/* ============================= */
/* RESPONSIVE DESIGN ANPASSUNGEN */
/* ============================= */

/* Tablets und kleinere Laptops */
@media (max-width: 1250px) {
    .flip-card-back .back-text p{
        font-size: 1.2rem;
    }
}
@media (max-width: 1200px) {
    section {
        padding: 8rem 0rem;
    }
    #headlineSection {
        padding: 8rem 0rem;
    }
    #KURSVIER{
        padding: 12rem 0rem;
        padding-bottom: 4rem;
    }
    #START{
        padding-bottom: 18rem;
    }
    #DEINCOACHING{
        padding-top: 18rem;
    }
    h1 { font-size: 3.4rem; }
    h2 { font-size: 3.1rem; }
    h3 { font-size: 1.3rem; }
    p  { font-size: 1.2rem; }
    .checkboxes p  { font-size: 1.5rem; }
    .Fragen  { font-size: 1.5rem; }
    .checkboxes label  { font-size: 1.1rem; }
    input[type=text]   { font-size: 1.1rem; }
    textarea   { font-size: 1.1rem; }
    #headlineSection h2{ font-size: 2.5rem; }

    .TeilbildschirmText {
        padding-left: 0rem;
        padding-right: 0rem;
        width: 100%;
    }

    .Bild_Text {
        flex-direction: column-reverse;
    }
    .QR_Ausrichtung{
        flex-direction: row;
    }
    #KURSVIER .Bild_Text {
        flex-direction: column;
    }
    .Desktop{
        display: none;
    }
    /*.Handy{
        display: flex;
    }*/

    .H_eins_Bereich {
        padding: 1.5rem 2rem;
    }
    .buttonGroß{
        display: none;
    }
    .buttonKlein{
        display: flex;
    }
    #ANGEBOT summary{
    width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 20em);
    max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 20em);
    }
    summary{
    width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 20em);
    max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 20em);
    }
    .Aufgeklappt{
    width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 20em);
    max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 20em);
    }
    #ANGEBOT .aufklapp::before{        
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
        transform: translateY(-1400%) rotate(225deg);

    }
    #ANGEBOT .aufklapp::after{
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
        transform: translateY(-1500%) rotate(-45deg);
    }
    .aufklapp::before{        
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 16em);
    }
    .aufklapp::after{
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 16em);
    }
    #ANGEBOT h3{
        width: 86%;
    }
    #KURSVIER .Inhaltsbreite img {
        width: 25rem;
    }
    #WASWENN .Inhaltsbreite img {
        width: 15rem;
    }
    .feder {
        width: 15rem;
    }
    .TeilbildschirmBild{
        justify-content: center;
        align-items: center;
    }
    #START .TeilbildschirmBild img{
        width: 30rem;
        height: auto;
        margin-bottom: 4rem;
    }
    .Quadrat{
        display: flex;
    }
    .rechteck{
        display: none;
    }
    #START .Verzierung {
        width: 12rem;
        right: 5rem;
    }
    #QR_COACH .Verzierung {
        width: 12rem;
        right: 5rem;
    }
    .Kurse {
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); /* variabel anpassbar */
    }
}
@media (max-width: 1150px){
    #QR_START .Bild{
        width: 18rem;
    }
    #QR_COACH .TeilbildschirmBild img{
        width: 18rem;
    }
}
@media (max-width: 1000px){
    #START{
        padding-bottom: 21rem;
    }
    #DEINCOACHING{
        padding-top: 21rem;
    }
    #QR_START .Bild{
        width: 18rem;
    }
    #QR_COACH .TeilbildschirmBild img{
        width: 18rem;
    }
    .QR-Seite{
    width: 100%;
    }
    #QR_COACH .Bild_Text{
    width: 100%;
    }
}
@media (max-width: 910px) {
    h3{
        width: 80%;
    }
}
@media (max-width: 850px){
    .Smartphone{
        display: flex;
    }
    .Tablet{
        display: none;      
        border: solid 2px red;
    }
    #QR_COACH .Smartphone h2{
        text-align: left;
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 0;
    }
    #QR_START .QR-Seite{
        flex-direction: column-reverse;
    }
    #QR_START .Smartphone {
        flex-direction: column-reverse;
    }
    #QR_START .Smartphone h2{
        text-align: left;
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 0;
    }
    #QR_COACH .Bild_Text{
    flex-direction: column;
    }
    #QR_START .Text_links{
        width: 80%;
        padding-right: 0;
    }
    #QR_COACH .TeilbildschirmText{
        width: 80%;
        padding-left: 0;
    }
    /*.QR-Seite{
    display: flex;
    flex-direction: column-reverse;
    }*/
    #QR_START .Bild{
        margin-left: 0;
    }
    #QR_COACH .TeilbildschirmBild img{
        margin-right: 0;
    }
}
/* Smartphones im Querformat und große Handys */
@media (max-width: 790px) {
    .Button-rot, .Button-transp, .Button-hell, .Button-transp-hell {
        font-size: 1.2rem;
        padding: 0.4em 1.2em;
    }
}
@media (max-width: 768px) {
    section {
        padding: 5rem 2rem;
    }
    #headlineSection {
        padding: 5rem 2rem;
    }

    h1 { font-size: 2.9rem; }
    h2 { font-size: 2.7rem; }
    h4 { font-size: 2rem; }
    p  { font-size: 1.1rem; }
    .checkboxes p { font-size: 1.3rem; }
    .Fragen { font-size: 1.3rem; }
    .checkboxes label { font-size: 1rem; }
    input[type=text]  { font-size: 1rem; }
    textarea  { font-size: 1rem; }
    .Untertitel{ font-size: 1.4rem; }
    #headlineSection h2{ font-size: 2.25rem; }

    .Kurse {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); /* variabel anpassbar */
    }

    .TeilbildschirmBild img {
        width: 90%;
        max-width: 22rem;
        height: auto;
        margin: 2rem auto;
    }

    .TeilbildschirmText {
        padding: 0;
        width: 100%;
    }

    .H_Groß { display: none; }
    .H_Klein { display: block; }

    .Button-rot, .Button-transp, .Button-hell {
        font-size: 1rem;
        padding: 0.4em 1.2em;
    }
    .flip-card-back .back-text p{
        font-size: 1rem;
    }

    header {
        height: auto;
    }

    .InhaltHeader {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    header img {
        height: 3.5rem;
    }

    .ButtonContainer {
        display: flex;
        flex-direction: column;
    }
    .Bildbreit{
        display: none;
    }
    .Bildrechteck{
        display: flex;
        margin: 0 2rem;
    }
    #QR_START .Bild{
        width: 16rem;
    }
    #QR_COACH .TeilbildschirmBild img{
        width: 16rem;
    }
}
@media (max-width: 730px) {
    /*FOOTER*/
    .Link_Text{
        margin-bottom: 1.5em;    
        /*border: 2px solid var(--global-color-hintergrund);*/
    }
    .Link_Text a{
        font-size: 1.25rem;
    }
    footer p{
        margin-top: 1em;
        /*border: 2px solid var(--global-color-hintergrund);*/
    }
    .Icon_Social{
        height: 1.75rem;        
    }
    .Icons_Footer a{
        margin-right: 2em;        
    }
    #ABOUTME .Bildbreit{
        height: 21rem;
        width: 27.99rem;
    }
}
@media (max-width: 650px) {
    /*FOOTER*/
    footer{
        display: flex;
        flex-direction: row;
    }
    .LinksFooter {
        display: flex;
        flex-direction: row;
        justify-content: start;
        width: var(--global-Inhaltsbreite_relativ);
    }
    .Link_Text {
        flex-direction: column;
        align-items: start;
        margin: 0;
        /*margin-bottom: 1.75em;*/
    }
    .Link_Text a {
        margin-bottom: 0.5em;
    }
    .Icons_Footer a{
        margin: .75em;
        margin-top: 0;
        margin-right: .75em;
        line-height: 1.75;
    }
    .Icons_Footer {
        margin-left: 2em;
        height: auto;
        width: 50%;
    }
}
@media (max-width: 600px) {
    .ButtonContainer_Text{
        flex-direction: row;
    }
    /*HEADER*/
    header{
        height: 9rem;
    }
    header .ButtonContainer{
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }
    header .ButtonContainer a{
        font-size: 1em;
    }
    .Button-rot:hover::before, .Button-transp:hover:before{
        display: none;
    }
    .Button-rot:hover::after, .Button-transp:hover:after{
        display: none;
    }
    .Button-transp:hover{
        background-color: transparent;
    }
    .InhaltHeader{
        flex-direction: row;
    }
    header .buttonKlein{
        display: none;
    }
    header img{
        height: 5rem;
    }
    summary{
    width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
    max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
    height: 8rem;
    padding-left: 0.5em;
    }
    
    .aufklapp::before{        
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 11em);
    }
    .aufklapp::after{
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 11em);
    }
    #ANGEBOT summary{
    width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
    max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
    height: 10rem;
    padding-left: 1.5em;
    }
    #ANGEBOT h3{
        margin-left: 0;
    }
    .Aufgeklappt{
    width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
    max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 15em);
    padding: 1.5em;
    padding-top: 4rem;
    padding-bottom: 1rem;
    hyphens: auto;
    }
    #ANGEBOT .aufklapp::before{        
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
    }
    #ANGEBOT .aufklapp::after{
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
    }
}
@media (max-width: 560px) {
    #START{
        padding-bottom: 25rem;
    }
    #DEINCOACHING{
        padding-top: 25rem;
    }
    #WASWENN .Liste{
        width: 90%;
    }
    #WASWENN h2{
        text-align: center;
        max-width: 80%;
        margin-top: 2rem;
    }
    #KursEinsbisDrei{
        padding-top: 2rem;
    }
}

/* Sehr kleine Handys im Hochformat */
@media (max-width: 480px) {
    section {
        padding: 3rem 1rem;
    }
    #headlineSection {
        padding: 3rem 1rem;
    }

    h1 { font-size: 2.3rem; }
    #QR_START h1{ font-size: 2.9rem; text-align: center; }
    h2 { font-size: 2.3rem; }
    p  { font-size: 1rem; }
    .checkboxes p  { font-size: 1.2rem; }
    .Fragen { font-size: 1.2rem; }
    .checkboxes label  { font-size: 0.9rem; }
    input[type=text] { font-size: 0.9rem; }
    textarea { font-size: 0.9rem; }
    .Untertitel{ font-size: 1.2rem; }
    #headlineSection h2{ font-size: 1.9rem; }

    .textfeld, .checkboxes, .Info, .email {
        margin-bottom: 2em;
    }

    .TeilbildschirmBild img {
        max-width: 100%;
        border-radius: 3em;
    }
    /*Header*/
    header{
        height: 12rem;
        justify-content: center;
    }
    .InhaltHeader{
        gap: 0;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }
    header img{
        height: 4.5rem;
        margin-bottom: 0rem;
    }
    header .ButtonContainer .Button-rot {
        margin-bottom: 0.5rem;
    }
    header .ButtonContainer  {
        flex-direction: column;
        align-items: center;
        margin-top: 0rem;
        height: auto;
        justify-content: center;
    }
    header .ButtonContainer a {
        margin: 0;
        margin-right: 0em;
        width: 100%;
    }
    #ANGEBOT summary{
        width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
        max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
    }
    summary{
        width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
        max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
    }
    .Aufgeklappt{
        width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
        max-width: calc(var(--global-Inhaltsbreite_relativ) / 2 + 10em);
    }
    .aufklapp::before{        
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 7em);
        width: 1rem;
        height: 4px;
        transform: translateY(-1000%) rotate(225deg);
    }
    .aufklapp::after{
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 7em);
        width: 1rem;
        height: 4px;
        transform: translateY(-1100%) rotate(-45deg);
    }
    #ANGEBOT .aufklapp::before{        
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 6em);
        width: 1rem;
        height: 4px;
        transform: translateY(-2000%) rotate(225deg);
    }
    #ANGEBOT .aufklapp::after{
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 6em);
        width: 1rem;
        height: 4px;
        transform: translateY(-2100%) rotate(-45deg);
    }
    #ANGEBOT h3{
        overflow-wrap: break-word;
    }
    h3{
        font-size: 1.2rem;
    }
    .H_eins_Bereich::before{
        right: 30%;
    }
    .H_eins_Bereich::after{
        left: 30%; 
    }
    #START{
        padding-bottom: 30rem;
    }
    #DEINCOACHING{
        padding-top: 30rem;
    }
    #KURSVIER .Inhaltsbreite img {
        width: 20rem;
    }
    #WASWENN .Inhaltsbreite img {
        width: 12rem;
    }
    .feder {
        width: 12rem;
    }
    #START .Verzierung {
        width: 10rem;
        right: 3rem;
    }
    #QR_COACH .Verzierung {
        width: 10rem;
        right: 3rem;
    }
    #QR_START .Bild{
        width: 15rem;
        border-radius: 2em;
    }
    #QR_COACH .TeilbildschirmBild img{
        width: 15rem;
        border-radius: 2em;
    }
}
@media (max-width: 450px) {
    #START h2{
        margin-bottom: 1rem;
    }
    .flip-card-back .back-text {
        padding: 0 1.5rem;
    }
}
@media (max-width: 392px) {
    
    .Antworten p{
    inline-size: 80%;
    }
    .ButtonContainer_Text .Button-transp{
        margin-right: 0.5rem;
    }
    #QR_START .Text_links{
        width: 100%;
    }
    #QR_COACH .TeilbildschirmText{
        width: 100%;
    }
} 
@media (max-width: 350px) {
    /*Header*/
    .Antworten p{
    inline-size: 70%;
    }
    #ANGEBOT .aufklapp::before{        
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 6.5em);
        width: 1rem;
        height: 4px;
        transform: translateY(-2000%) rotate(225deg);
    }
    #ANGEBOT .aufklapp::after{
        margin-left: calc(var(--global-Inhaltsbreite_relativ) / 2 + 6.5em);
        width: 1rem;
        height: 4px;
        transform: translateY(-2100%) rotate(-45deg);
    }
    #KursEinsbisDrei{
        padding-top: 3rem;
    }
    #KURSVIER .Inhaltsbreite img {
        width: 15rem;
    }
}