section h1,
section h2 {
    margin: 0;

    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    color:var(--brand-primary);
}

/* ==========================================================================
   Dein Yoga › Private Lesson / Group & Business Yoga
   Werte aus "Website (verschoben) 6.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt).

   Sections:
     #section55 – Private Yoga        (Text, Blob "Zeit fuer mich", 3 Fotos)
     #section57 – Private Group Yoga  (Foto bleed links, Blob "Zeit fuer euch", Text)
     #section58 – Business Yoga       (Text, 2 Fotos, Blob "Zeit fuer dein Team")

   3 Zonen wie special4.css: max-width:999px / 1000–1600px / min-width:1600px.
   Zone 1000–1600px und min-width:1600px sind aktuell identisch (Platzhalter
   für spätere Differenzierung, wie im Vorbild special4.css).

   KONAMI-Manöver (Mobile, alle Sections dieser Datei): Foto-Felder (JPG-
   Hintergrund) bekommen width:60% und wechseln sich ab zwischen
   margin-left:0/margin-right:auto (linksbündig) und margin-left:auto/
   margin-right:0 (rechtsbündig) – erstes Foto pro Section links, dann
   abwechselnd. Ergibt einen versetzten Zickzack-Lauf auf dem Handy.
   Blobs (SVG) sind davon ausgenommen, die bleiben zentriert.
   ========================================================================== */

/* Blob-Texte in Weiß (gilt sectionübergreifend) */
#section55 .feld1 .text h2,
#section57 .feld1 .text h2,
#section58 .feld3 .text p {
    color: var(--brand-wte);
}


/* ==========================================================================
   Section 55 – Private Yoga
   ========================================================================== */

@media (max-width: 999px) {
    #section55 {
        padding-bottom: 0;
    }
    #section55 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem var(--gutter);
        position:relative;
    }
    #section55 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Blob (SVG) – contain, zentriert, davon ausgenommen vom KONAMI-Manöver */
    
    #section55 .feld0 {
    	position:relative;
    }
    
    #section55 .feld1 {
        aspect-ratio: 240 / 300;
        padding: 0;
        background-size: contain;
        width: 55%;
        margin-left: -10px;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
        position:relative;
    }
    /* Fotos (JPG) – KONAMI-Manöver: abwechselnd links/rechts, 60% breit */
    #section55 .feld2 {
        aspect-ratio: 1134 / 745;
        background-size: cover;
        width: 45%;
        margin-left: auto;
        margin-right: 0;
        right:0;
        top:0;
        position:relative;
        margin-top:-250px;
    }
    #section55 .feld3 {
        aspect-ratio: 670 / 445;
        background-size: cover;
        width: 60%;
        margin-left: auto;
        margin-right: 0;
        margin-top:30px;
    }
    #section55 .feld4 {
        aspect-ratio: 460 / 635;
        background-size: cover;
        width: 40%;
        margin-left: 0;
        margin-right: auto;
        width: 35%;
        margin-top:-80px;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section55 {
        padding-bottom: 0;
    }
    #section55 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 2293;
        margin: 0 auto;
    }
    #section55 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Text mit H1 + Button */
    #section55 .feld0 {
        left: 0%;
        top: 2.8%;
        width: 56.7%;
        height: 24.1%;
    }
    /* Blob "ZEIT FUER MICH" – Text sitzt mittig in der Form */
    #section55 .feld1 {
        left: -0.9%;
        top: 40%;
        width: 31.7%;
        height: 29.6%;
        z-index: 3;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Foto quer (lesson_02) */
    #section55 .feld2 {
        left: 39.2%;
        top: 35.5%;
        width: 60.9%;
        height: 32.5%;
        background-size: cover;
    }
    /* Foto klein (lesson_03) – überlappt das Querfoto */
    #section55 .feld3 {
        left: 25.2%;
        top: 62.7%;
        width: 36%;
        height: 19.4%;
        background-size: cover;
        z-index: 2;
    }
    /* Foto hoch (lesson_04) */
    #section55 .feld4 {
        left: 64%;
        top: 70.6%;
        width: 24.7%;
        height: 27.7%;
        background-size: cover;
    }
}

@media (min-width: 1600px) {
    #section55 {
        padding-bottom: 0;
    }
    #section55 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 2293;
        margin: 0 auto;
    }
    #section55 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section55 .feld0 {
        left: 0%;
        top: 2.8%;
        width: 56.7%;
        height: 24.1%;
    }
    #section55 .feld1 {
        left: -0.9%;
        top: 40%;
        width: 31.7%;
        height: 29.6%;
        z-index: 3;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #section55 .feld2 {
        left: 39.2%;
        top: 35.5%;
        width: 60.9%;
        height: 32.5%;
        background-size: cover;
    }
    #section55 .feld3 {
        left: 25.2%;
        top: 62.7%;
        width: 36%;
        height: 19.4%;
        background-size: cover;
        z-index: 2;
    }
    #section55 .feld4 {
        left: 64%;
        top: 70.6%;
        width: 24.7%;
        height: 27.7%;
        background-size: cover;
    }
}


/* ==========================================================================
   Section 57 – Private Group Yoga
   ========================================================================== */

/* leeres Feld aus dem Modul – auf allen Breiten ausgeblendet */
#section57 .feld3 {
    display: none;
}

#section57 .feld1 .text h2 {
    text-align: right;
}

@media (max-width: 999px) {
    #section57 {
        padding-top: 0;
        padding-bottom: 0;
        margin-top:0rem;
    }
    #section57 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0rem var(--gutter);
    }
    #section57 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section57 .feld1 .text h2 {
        text-align: left;
    }
    /* Foto (JPG) – KONAMI-Manöver: nur ein Foto in dieser Section, startet links */
    #section57 .feld0 {
        aspect-ratio: 948 / 840;
        background-size: cover;
        width: 60%;
        margin-left: auto;
        margin-right: 0;
    }
    /* Blob (SVG) – contain, zentriert, davon ausgenommen vom KONAMI-Manöver */
    #section57 .feld1 {
        aspect-ratio: 220 / 300;
        padding: 0;
        background-size: contain;
        width: 50%;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-top:-150px;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section57 {
        padding-top: 0;
        padding-bottom: 0;
    }
    #section57 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1460;
        margin: 0 auto;
    }
    #section57 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Foto – bleedet links über den Container/Seitenrand hinaus */
    #section57 .feld0 {
        left: -18.4%;
        top: 0.2%;
        width: 50.9%;
        height: 57.5%;
        background-size: cover;
    }
    /* Blob "ZEIT FUER EUCH" – überlappt das Foto unten */
    #section57 .feld1 {
        left: -5.4%;
        top: 48.5%;
        width: 35.1%;
        height: 52.9%;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    /* Text mit H2 + Button */
    #section57 .feld2 {
        left: 45.6%;
        top: 37.6%;
        width: 54.3%;
        height: 46.2%;
    }
}

@media (min-width: 1600px) {
    #section57 {
        padding-top: 0;
        padding-bottom: 0;
    }
    #section57 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1460;
        margin: 0 auto;
    }
    #section57 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section57 .feld0 {
        left: -18.4%;
        top: 0.2%;
        width: 50.9%;
        height: 57.5%;
        background-size: cover;
    }
    #section57 .feld1 {
        left: -5.4%;
        top: 48.5%;
        width: 35.1%;
        height: 52.9%;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    #section57 .feld2 {
        left: 45.6%;
        top: 37.6%;
        width: 54.3%;
        height: 46.2%;
    }
}


/* ==========================================================================
   Section 58 – Business Yoga (freisetzend)
   ========================================================================== */

/* Der Team-Blob-Text ist im Markup ein <p> – wie die h2 der
   anderen Blobs darstellen */
#section58 .feld3 .text p {
    font-family: var(--font-heading);
    font-size: var(--font-size-h);
    letter-spacing: var(--letter-spacing-h);
    font-weight: var(--font-weight-a);
    text-transform: uppercase;
    line-height: var(--line-height-h);
    text-align: left;
    margin: 0;
}

@media (max-width: 999px) {
    #section58 {
        padding-top: 0rem;
    }
    #section58 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem var(--gutter);
    }
    #section58 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Fotos (JPG) – KONAMI-Manöver: abwechselnd links/rechts, 60% breit */
    #section58 .feld1 {
        aspect-ratio: 477 / 710;
        background-size: cover;
        width:40%;
        margin-left: auto;
        margin-right: 0;
        margin-top:-170px
    }
    #section58 .feld2 {
        aspect-ratio: 894 / 592;
        background-size: cover;
        width: 55%;
        margin-left: 0;
        margin-right: auto;
        margin-top:-120px
    }
    /* Blob (SVG) – contain, zentriert, davon ausgenommen vom KONAMI-Manöver */
    #section58 .feld3 {
        aspect-ratio: 240 / 300;
        padding: 0;
        background-size: contain;
        width: 50%;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
        z-index:5;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section58 {
        padding-top: 4rem;
    }
    #section58 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1788;
        margin: 0 auto;
    }
    #section58 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Text mit H2 + Button */
    #section58 .feld0 {
        left: 0.1%;
        top: 6%;
        width: 56.5%;
        height: 37.4%;
    }
    /* Foto hoch (lesson_06) */
    #section58 .feld1 {
        left: 74.8%;
        top: 12.1%;
        width: 25.6%;
        height: 39.7%;
        background-size: cover;
    }
    /* Foto quer (lesson_07) */
    #section58 .feld2 {
        left: 15.3%;
        top: 48.7%;
        width: 48%;
        height: 33.1%;
        background-size: cover;
    }
    /* Blob "ZEIT FUER DEIN TEAM" – Text in h2-Optik, sitzt mittig */
    #section58 .feld3 {
        left: 55.3%;
        top: 65.8%;
        width: 33.4%;
        height: 40.2%;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
}

@media (min-width: 1600px) {
    #section58 {
        padding-top: 4rem;
    }
    #section58 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1788;
        margin: 0 auto;
    }
    #section58 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section58 .feld0 {
        left: 0.1%;
        top: 6%;
        width: 56.5%;
        height: 37.4%;
    }
    #section58 .feld1 {
        left: 74.8%;
        top: 12.1%;
        width: 25.6%;
        height: 39.7%;
        background-size: cover;
    }
    #section58 .feld2 {
        left: 15.3%;
        top: 48.7%;
        width: 48%;
        height: 33.1%;
        background-size: cover;
    }
    #section58 .feld3 {
        left: 55.3%;
        top: 65.8%;
        width: 33.4%;
        height: 40.2%;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
}