section h1,
section h2 {
    margin: 0;

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

section h1 {
    margin-top: 0;
    margin-bottom: 0;
}
section h2 {
    margin-top: 0;
    margin-bottom: 0;
}

[class^="feld"] .text h2 + p {
    margin-top: 0;
    margin-bottom: 2rem;
}

[class^="feld"] .text h1 + p {
    margin-top: 0;
    margin-bottom: 4rem;
}

/* ==========================================================================
   Dein Yoga › Deine Preise
   Werte aus "Website (verschoben) 7.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt).

   Sections:
     #section59 – Feste Kursbuchung  (Text, Foto quer, Terracotta-SVG, Foto hoch)
     #section60 – Zeitkarten         (Text rechts, Foto bleed links, feld2 leer)
     #section61 – Einzelticket + Kennenlernen (2 Textblöcke, Foto)
     #section62 – Hansefit Tarife

   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).
   ========================================================================== */

/* Bilder füllen ihr Feld */
#section59 [class^="feld"] img,
#section60 [class^="feld"] img,
#section61 [class^="feld"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================================================
   Section 59 – Feste Kursbuchung
   ========================================================================== */

@media (max-width: 999px) {
    #section59 {
        padding-top: 2rem;
        padding-bottom: 0;
    }
    #section59 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
padding: 2rem var(--gutter);
    }
    #section59 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    
    #section59 .feld1 {
    	background-size: cover;
    	width: 40%;
    	z-index: 2;
    }
    
    #section59 .feld2 {
        width: 40%;
        background-size: cover;
        margin-top:-160px;
        margin-right:0;
        margin-left:30%;
        z-index: 1;
    }
    
    
    #section59 .feld3 {
        width: 35%;
        background-size: cover;
        margin-top:-160px;
        margin-right:0;
        margin-left:auto;
        z-index: 2;
    }
    
    #section59 .feld1 { aspect-ratio: 600 / 850; }
    #section59 .feld2 { aspect-ratio: 821 / 868; }
    #section59 .feld3 { aspect-ratio: 538 / 732; }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section59 {
        padding-top: 8rem;
        padding-bottom: 0;
    }
    #section59 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1900;
        margin: 0 auto;
    }
    #section59 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Text */
    #section59 .feld0 {
        left: 0%;
        top: 2.6%;
        width: 48.1%;
        height: 35.6%;
    }
    /* Foto quer (preise_03) – ragt rechts über den Container */
    #section59 .feld1 {
        left: 58.5%;
        top: 42.5%;
        width: 58%;
        height: 31.7%;
        background-size: 100%;
        z-index: 1;
    }
    /* Terracotta-Form (forme-23) – liegt hinter/zwischen den Fotos */
    #section59 .feld2 {
        left: 33.9%;
        top: 37.8%;
        width: 44.1%;
        height: 45.7%;
        background-size: contain;
        z-index: 0;
    }
    /* Foto hoch (preise_0r) */
    #section59 .feld3 {
        left: 12.1%;
        top: 58.3%;
        width: 28.9%;
        height: 38.5%;
        background-size: cover;
        z-index: 2;
    }
}

@media (min-width: 1600px) {
    #section59 {
        padding-top: 8rem;
        padding-bottom: 0;
    }
    #section59 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1900;
        margin: 0 auto;
    }
    #section59 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section59 .feld0 {
        left: 0%;
        top: 2.6%;
        width: 48.1%;
        height: 35.6%;
    }
    #section59 .feld1 {
        left: 58.5%;
        top: 42.5%;
        width: 58%;
        height: 31.7%;
        background-size: 100%;
        z-index: 1;
    }
    #section59 .feld2 {
        left: 33.9%;
        top: 37.8%;
        width: 44.1%;
        height: 45.7%;
        background-size: contain;
        z-index: 0;
    }
    #section59 .feld3 {
        left: 12.1%;
        top: 58.3%;
        width: 28.9%;
        height: 38.5%;
        background-size: cover;
        z-index: 2;
    }
}


/* ==========================================================================
   Section 60 – Zeitkarten
   ========================================================================== */

/* feld2 ist im Modul leer (Olive-Form/kleines Foto aus dem PDF fehlen im
   Markup) – auf allen Breiten ausgeblendet. Werte für eine spätere Pflege:
   kleines Foto  left 55.4% / top 99.3% / 36.8 x 35.4%
   Olive-Form    left 80.2% / top ~105% / 36.3 x 79%  (ragt unten raus) */
#section60 .feld2 {
    display: none;
}

@media (max-width: 999px) {
    #section60 {
        padding-top: 0;
        padding-bottom: 0;
    }
    #section60 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0rem var(--gutter);
    }
    #section60 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section60 .feld1 { 
    width:45%;
    
    aspect-ratio: 1063 / 709; }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section60 {
        padding-top: 0;
        padding-bottom: 0;
    }
    /* Container endet am Foto-Unterrand (PDF y 2090–2800) */
    #section60 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1292;
        margin: 0 auto;
    }
    #section60 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Text rechts – beginnt laut PDF leicht oberhalb der Sectionkante */
    #section60 .feld0 {
        left: 55.5%;
        top: -9.8%;
        width: 44.5%;
        height: 76.8%;
    }
    /* Foto – bleedet links über Container/Seitenrand */
    #section60 .feld1 {
        left: -16.5%;
        top: 44.6%;
        width: 57.1%;
        height: 54.9%;
    }
}

@media (min-width: 1600px) {
    #section60 {
        padding-top: 0;
        padding-bottom: 0;
    }
    #section60 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1292;
        margin: 0 auto;
    }
    #section60 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section60 .feld0 {
        left: 55.5%;
        top: -9.8%;
        width: 44.5%;
        height: 76.8%;
    }
    #section60 .feld1 {
        left: -16.5%;
        top: 44.6%;
        width: 57.1%;
        height: 54.9%;
    }
}


/* ==========================================================================
   Section 61 – Einzelticket (Drop-in) + Kennenlernen
   ========================================================================== */

/* Markup: feld0 = Foto (preise_0r), feld1 = Form (forme-24),
   feld2 = Text Einzelticket, feld3 = Text Kennenlernen */

@media (max-width: 999px) {
    #section61 {
        padding-top: 0;
    }
    #section61 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding: 2rem var(--gutter) 0 var(--gutter);
    }
    #section61 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section61 .feld0 {
        width: 50%;
        background-size: cover;
        margin-right:0;
        margin-left:auto;
        margin-top:-100px;
        z-index:10;
    }
    
    #section61 .feld1 {
        width:  35%;
        background-size: cover;
        margin-top:-50px;
        margin-left:auto;
        margin-right:0;
        display:none;
    }
    #section61 .feld0 { aspect-ratio: 685 / 457; }
    #section61 .feld1 { aspect-ratio: 676 / 1035; }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section61 {
        padding-top: 0;
    }
    #section61 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 2184;
        margin: 0 auto;
    }
    #section61 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* kleines Foto quer */
    #section61 .feld0 {
        left: 56%;
        top: 0.3%;
        width: 36.8%;
        height: 20.9%;
        background-size: cover;
        z-index: 2;
    }
    /* Olive-Form – bleedet rechts über Container/Seitenrand */
    #section61 .feld1 {
        left: 82.3%;
        top: 3.7%;
        width: 36.3%;
        height: 47.4%;
        background-size: contain;
        background-position: left top;
        z-index: 1;
    }
    /* Text Einzelticket – links */
    #section61 .feld2 {
        left: 0%;
        top: 28.6%;
        width: 64%;
        height: 33%;
    }
    /* Text Kennenlernen – links darunter */
    #section61 .feld3 {
        left: 0%;
        top: 70.6%;
        width: 64%;
        height: 28.7%;
    }
}

@media (min-width: 1600px) {
    #section61 {
        padding-top: 0;
    }
    #section61 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 2184;
        margin: 0 auto;
    }
    #section61 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section61 .feld0 {
        left: 56%;
        top: 0.3%;
        width: 36.8%;
        height: 20.9%;
        background-size: cover;
        z-index: 2;
    }
    #section61 .feld1 {
        left: 82.3%;
        top: 3.7%;
        width: 36.3%;
        height: 47.4%;
        background-size: contain;
        background-position: left top;
        z-index: 1;
    }
    #section61 .feld2 {
        left: 0%;
        top: 28.6%;
        width: 64%;
        height: 33%;
    }
    #section61 .feld3 {
        left: 0%;
        top: 70.6%;
        width: 64%;
        height: 28.7%;
    }
}


/* ==========================================================================
   Section 62 – Hansefit Tarife
   BG: forme-25 (beiges Band, full-bleed – ragt im PDF links/rechts raus)
   PDF-Fenster y 4230–4790 (H 560 pt)
   ========================================================================== */

/* "HANSEFIT TARIFE" – im Markup ein <p>, im PDF aber Headline-Optik */
#section62 .feld0 .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);
    color: var(--brand-olive);
    text-align: left;
    margin: 0;
}

/* Spalten-h3: gleiches Schriftbild wie in special8.css –
   Fließtext-Font, gesperrt, Größe aus --font-size-h3 */
#section62 h3 {
    font-family: var(--font-body);
    font-size: var(--font-size-h3);
    font-weight: normal;
    letter-spacing: var(--letter-spacing-b);
    text-transform: uppercase;
    line-height: var(--line-height-p);
    color: var(--brand-olive);
    cursor: default;
    margin: 0 0 1.4em;
}

#section62 .text p {
    text-align: left;
    margin: 0 0 1.4em;
    color: var(--brand-olive);
}

/* die beiden Oliv-Buttons untereinander mit wenig Abstand */
#section62 .feld2 p:has(> a.button) {
    margin: 0 0 0.8em;
}

@media (max-width: 999px) {
    #section62 {
        position: relative;
        background-size: 140%;
        background-position: center 10px;
        background-repeat: no-repeat;
        padding-top:3rem;
        padding-bottom: 9rem;
        margin-bottom: -130px;
        margin-top:0rem;
        background-image:url(../../media/forme-25-pdf-seite-12-mobile.svg)!important;
    }
    #section62 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem var(--gutter);
    }
    #section62 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section62 {
        position: relative;
        background-size: 120%;
        background-position: top;
        background-repeat: no-repeat;
        padding-top: 10rem;
        padding-bottom: 6rem;
        margin-bottom: -150px;
    }
    #section62 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1150;
        margin: 0 auto;
    }
    #section62 [class^="feld"] {
        position: absolute;
    }
    /* "HANSEFIT TARIFE" */
    #section62 .feld0 {
        left: -1.9%;
        top: 13.6%;
        width: 40%;
        height: 9.6%;
    }
    /* linke Spalte: Feste Kursbuchung */
    #section62 .feld1 {
        left: -1.9%;
        top: 29.9%;
        width: 44.5%;
        height: 55%;
    }
    /* rechte Spalte: Einzelticket + Hansefit-Links */
    #section62 .feld2 {
        left: 58.6%;
        top: 30.7%;
        width: 44.5%;
        height: 66%;
    }
}

@media (min-width: 1600px) {
    #section62 {
        position: relative;
        background-size: 120%;
        background-position: top;
        background-repeat: no-repeat;
        padding-top: 10rem;
        padding-bottom: 6rem;
        margin-bottom: -150px;
    }
    #section62 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1150;
        margin: 0 auto;
    }
    #section62 [class^="feld"] {
        position: absolute;
    }
    #section62 .feld0 {
        left: -1.9%;
        top: 13.6%;
        width: 40%;
        height: 9.6%;
    }
    #section62 .feld1 {
        left: -1.9%;
        top: 29.9%;
        width: 44.5%;
        height: 55%;
    }
    #section62 .feld2 {
        left: 58.6%;
        top: 30.7%;
        width: 44.5%;
        height: 66%;
    }
}