.heroSection{
    float: left;
    width: 1069px;
    .ueberschrift{
        display: flex;
        padding-top: 90px;
        padding-bottom: 60px;
        justify-content: center;
    }
    .preisText{
        width: 250px;
        margin: 0 auto;
        .headingPreis{
            text-align: center;
        }
    }
    .einmaligerPreis{
        text-align: center;
        margin-bottom: 0px;
        font-weight: 600;
    }
    .monatlicherPreis{
        text-align: center;
        margin-top: 15px;
        margin-bottom: 35px;
        font-size: 40px;
    }

    .basicMain{
        float: left;
        width: 32%;
        margin-bottom: 40px;
        .basic{
            float: left;
            width: 100%;
            height: auto;
            background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
            border-radius: 20px;
            margin-bottom: 20px;
        }
        .basicButton{
            margin-left: 15%;
            margin-right: 15%;
            width: 70%;
            background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
            border-radius: 40px;
            border: 0px;
        }
    }
    
    .standardMain{
        float: left;
        width: 32%;
        margin-bottom: 74px;
        margin-left: 2%;
        margin-right: 2%;
        .standard{
            float: right;
            width: 100%;
            height: auto;
            background: linear-gradient(270deg, #8cb4d2 14.5%, #ac8cda 86.51%);
            border-radius: 20px;
            margin-bottom: 20px;
        }
        .standardButton{
            margin-left: 15%;
            margin-right: 15%;
            width: 70%;
            background: linear-gradient(270deg, #8cb4d2 14.5%, #ac8cda 86.51%);
            border-radius: 40px;
            border: 0px;
        }
    }
   
    .premiumMain{
        width: 32%;
        float: right;
        margin-bottom: 20px;
        .premium{
            float: left;
            width: 100%;
            height: auto;
            background: linear-gradient(270deg, #ca8cd2 14.5%, #da8ca3 86.51%);
            border-radius: 20px;
            margin-bottom: 20px;
        }
        .premiumButton{
            margin-left: 15%;
            margin-right: 15%;
            width: 70%;
            background: linear-gradient(270deg, #ca8cd2 14.5%, #da8ca3 86.51%);
            border-radius: 40px;
            border: 0px;
        }
    }
    

    .individuellMain{
       display: none;
    }
}

.transformation{
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1065px;
    height: 380px;
    background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
    border-radius: 30px;
    margin-top: 180px;
    .QuestionTransformationMobile{
        display: none;
    }
    .QuestionTransformationDesktop{
        text-align: center;
        margin-top: 35px;
        color: black;
    }
    .transformationCTA{
        text-align: center;
        margin-top: 0;
        margin-bottom: 35p
    }
    .transformationCTAMobile{
        display: none;
    }
    .buttonJetztBuchen{
        background-color: black;
        border-radius: 40px;
        border: 2px solid black;
        width: 250px;
    }
}

.preishinweis{
    float: left;
    margin-top: 30px;
}


/*tablet*/

@media only screen and (min-width: 601px) and (max-width: 1200px){
    .heroSection{
        float: left;
        width: 530px;
        .ueberschrift{
            display: flex;
            padding-top: 60px;
            padding-bottom: 30px;
            justify-content: center;
        }
        .preisText{
            width: 200px;
            margin: 0 auto;
            .headingPreis{
                text-align: center;
            }
        }
        .einmaligerPreis{
            text-align: center;
            margin-bottom: 0px;
            font-weight: 500;
        }
        .monatlicherPreis{
            text-align: center;
            margin-top: 15px;
            margin-bottom: 25px;
            font-size: 30px;
        }

        .basicMain{
            float: left;
            width: 48%;
            margin-bottom: 40px;
            .basic{
                float: left;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .basicButton{
                margin-left: 15%;
                margin-right: 15%;
                width: 70%;
                background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
                border-radius: 40px;
                border: 0px;
            }
        }
        
        .standardMain{
            float: right;
            width: 48%;
            margin-bottom: 42px;
            margin-right: 0;
            .standard{
                float: right;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #8cb4d2 14.5%, #ac8cda 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .standardButton{
                margin-left: 15%;
                margin-right: 15%;
                width: 70%;
                background: linear-gradient(270deg, #8cb4d2 14.5%, #ac8cda 86.51%);
                border-radius: 40px;
                border: 0px;
            }
        }
       
        .premiumMain{
            width: 48%;
            float: left;
            margin-bottom: 20px;
            .premium{
                float: left;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #ca8cd2 14.5%, #da8ca3 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .premiumButton{
                margin-left: 15%;
                margin-right: 15%;
                width: 70%;
                background: linear-gradient(270deg, #ca8cd2 14.5%, #da8ca3 86.51%);
                border-radius: 40px;
                border: 0px;
            }
        }
        

        .individuellMain{
            display: block;
            float: right;
            width: 48%;
            margin-bottom: 20px;
            .individuell{
                float: right;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #a0d28c 14.5%, #8cda94 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .individuellButton{
                margin-left: 10%;
                margin-right: 10%;
                width: 80%;
                background: linear-gradient(270deg, #a0d28c 14.5%, #8cda94 86.51%);
                border-radius: 40px;
                border: 0px;
            }
        }
    }

    .transformation{
        display: none;
    }
}


/*mobile */

@media only screen and (min-width: 430px) and (max-width: 600px){
    .heroSection{
        float: left;
        width: 355px;
        .ueberschrift{
            display: flex;
            padding-top: 60px;
            padding-bottom: 30px;
            justify-content: center;
        }
        .preisText{
            width: 140px;
            margin: 0 auto;
            .headingPreis{
                text-align: center;
            }
        }
        .einmaligerPreis{
            text-align: center;
            margin-bottom: 0px;
            font-weight: 500;
        }
        .monatlicherPreis{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 22px;
        }

        .basicMain{
            float: left;
            width: 48%;
            margin-bottom: 5px;
            .basic{
                float: left;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .basicButton{
                display: none;
            }    
        }
        
        .standardMain{
            float: right;
            width: 48%;
            margin-bottom: 7px;
            margin-right: 0;
            .standard{
                float: right;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #8cb4d2 14.5%, #ac8cda 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .standardButton{
                display: none;
            }
        }
       
        .premiumMain{
            width: 48%;
            float: left;
            margin-bottom: 20px;
            .premium{
                float: left;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #ca8cd2 14.5%, #da8ca3 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .premiumButton{
                display: none;
            }
        }
        

        .individuellMain{
            display: block;
            float: right;
            width: 48%;
            margin-bottom: 20px;
            .individuell{
                float: right;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #a0d28c 14.5%, #8cda94 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
            }
            .individuellButton{
                display: none;
            }
        }
    }

    .transformation{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 355px;
        height: 230px;
        background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
        border-radius: 30px;
        margin-top: 70px;
        .QuestionTransformationDesktop{
            display: none;
        }
        .QuestionTransformationMobile{
            display: block;
            text-align: center;
            margin-top: 25px;
            color: black;
        }
        .transformationCTAMobile{
            display: block;
            text-align: center;
            margin-top: 0;
            margin-bottom: 30px;
        }
        .transformationCTA{
            display: none;
        }
        .buttonJetztBuchen{
            background-color: black;
            border-radius: 20px;
            border: 2px solid black;
            width: 160px;
        }
    }    
}

/* small mobile phones */

@media only screen and (max-width: 429px){ 

    .heroSection{
        float: left;
        width: 290px;
        .ueberschrift{
            display: flex;
            padding-top: 60px;
            padding-bottom: 30px;
            justify-content: center;
        }
        .preisText{
            width: 120px;
            margin: 0 auto;
            .headingPreis{
                text-align: center;
            }
        }
        .einmaligerPreis{
            text-align: center;
            margin-bottom: 0px;
            font-weight: 500;
        }
        .monatlicherPreis{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 20px;
        }

        .basicMain{
            float: left;
            width: 48%;
            margin-bottom: 0px;
            .basic{
                float: left;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
                height: 265px;
            }
            .basicButton{
                display: none;
            }
        }
        
        .standardMain{
            float: right;
            width: 48%;
            margin-bottom: 0px;
            margin-right: 0;
            .standard{
                float: right;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #8cb4d2 14.5%, #ac8cda 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
                height: 265px;
                #einmalig{
                    margin-top: 32px;
                }
            }
            .standardButton{
                display: none;
            }
        }
       
        .premiumMain{
            width: 48%;
            float: left;
            margin-bottom: 20px;
            .premium{
                float: left;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #ca8cd2 14.5%, #da8ca3 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
                height: 300px;
            }
            .premiumButton{
                display: none;
            }
        }
        

        .individuellMain{
            display: block;
            float: right;
            width: 48%;
            margin-bottom: 20px;
            .individuell{
                float: right;
                width: 100%;
                height: auto;
                background: linear-gradient(270deg, #a0d28c 14.5%, #8cda94 86.51%);
                border-radius: 20px;
                margin-bottom: 10px;
                height: 300px;
                #anfrage{
                    margin-top: 45px;
                }
            }
            .individuellButton{
                display: none;
            }
        }
    }

    .transformation{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 290px;
        height: 200px;
        background: linear-gradient(270deg, #8CD1D2 14.5%, #8D8CDA 86.51%);
        border-radius: 30px;
        margin-top: 20px;
        .QuestionTransformationDesktop{
            display: none;
        }
        .QuestionTransformationMobile{
            display: block;
            text-align: center;
            margin-top: 25px;
            color: black;
        }
        .transformationCTAMobile{
            display: block;
            text-align: center;
            margin-top: 0;
            margin-bottom: 30px;
        }
        .transformationCTA{
            display: none;
        }
        .buttonJetztBuchen{
            background-color: black;
            border-radius: 20px;
            border: 2px solid black;
            width: 150px;
        }
    }    
}