section h1,
section h2 {
    margin: 0;

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


/* Section 69 – Headline */

@media (max-width: 999px) {
    #section69 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0rem var(--gutter) 1rem var(--gutter);
    }

    #section69 [class^="feld"] {
        position: relative;   /* statt static: eigener Positionierungskontext
                                  für den Trenner (::after), bleibt normales
                                  Flex-Item im Spaltenlayout */
        width: 100%;
        height: auto;
    }

    #section69 .feld0 h1 {
        text-align: left;
    }

    #section69 {
        padding-top: 4rem;
        padding-bottom: 0rem;
        z-index: 5;
    }
	#section70 .feld0 {
	padding-top:4rem;
	}
    #section70 .feld0::before {
        content: "";
        position: absolute;
        left: 0;
        top: -55px;
        width: 100%;
        height: 100px;
       
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        z-index: 10;
    }

    /* Rotation über Section 69 + 70 hinweg: shape1 → shape2 → shape3 → shape4
       → shape1 … Start hier mit shape1, Fortsetzung in Section 70. */
    #section70 .feld0::before { background-image: url('/media/shape1-rel.svg'); }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section69 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 364;
        margin: 0 auto;
    }

    #section69 [class^="feld"] {
        position: absolute;
    }

    /* H1 – im Layout rechtsbündig, endet bündig vor der Textspalte */
    #section69 .feld0 {
        left: 7.6%;
        top: 16%;
        width: 33.3%;
        height: 54%;
    }

    #section69 .feld0 h1 {
        text-align: right;
        margin: 0;
    }

    #section69 .feld1 {
        left: 48.6%;
        top: 16.9%;
        width: 51.3%;
        height: 70.6%;
    }

    #section69 .feld1 p {
        text-align: left;
        margin: 0;
    }

    #section69 {
        padding-bottom: 0;
    }
}

@media (min-width: 1600px) {
    #section69 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 364;
        margin: 0 auto;
    }

    #section69 [class^="feld"] {
        position: absolute;
    }

    /* H1 – im Layout rechtsbündig, endet bündig vor der Textspalte */
    #section69 .feld0 {
        left: 7.6%;
        top: 16%;
        width: 33.3%;
        height: 54%;
    }

    #section69 .feld0 h1 {
        text-align: right;
        margin: 0;
    }

    #section69 .feld1 {
        left: 48.6%;
        top: 16.9%;
        width: 51.3%;
        height: 70.6%;
    }

    #section69 .feld1 p {
        text-align: left;
        margin: 0;
    }

    #section69 {
        padding-bottom: 0;
    }
}


/* Section 70 – Textblasen */

@media (max-width: 999px) {
    #section70 {
        padding-top: 0rem;
        padding-bottom: 2rem;
        margin-bottom: -50px;
    }

    #section70 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 0rem;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        
    }

    #section70 [class^="feld"] {
        position: relative;   /* statt static: eigener Positionierungskontext
                                  für den Trenner (::after), bleibt normales
                                  Flex-Item im Spaltenlayout */
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 12% var(--gutter);
        background-size: 100% 100%;
    }

    #section70 .text,
    #section70 [class^="feld"] .text {
        width: 84%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 0;
        padding: 0 var(--gutter);
    }

    /* --- Hintergrundfarben je Blase (Feld), rotierende Abfolge, nur
       < 1000px Viewport. */
    #section70 .feld0 { background-color: rgba(114, 108, 74, 0.3); z-index: 7; }   /* olive */
    #section70 .feld1 { background-color: rgba(187, 119, 77, 0.3); z-index: 6; }   /* terracotta */
    #section70 .feld2 { background-color: rgba(236, 232, 228, 0.6); z-index: 5; }  /* beige */
    #section70 .feld3 { background-color: rgba(249, 189, 153, 0.3); z-index: 4; }  /* apricot */
    #section70 .feld4 { background-color: rgba(114, 108, 74, 0.3); z-index: 3; }   /* olive */

    /* --- Trenner nach jedem Feld (::after), gleiche 4 Wellen-SVGs wie in
       special13.css, rotierend über section69 + 70 hinweg, feste Höhe
       150px, nur < 1000px Viewport. Container-gap ist 0, daher zentriert
       "translateY(50%)" (nur die eigene Höhe) den Trenner exakt auf der
       Feld-zu-Feld-Grenze. */
    #section70 [class^="feld"]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 150px;
        transform: translateY(50%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        z-index: 2;
    }

    /* Rotation Fortsetzung von Section 69: shape3 → shape4 → shape1 → shape2
       → shape3 */
    #section70 .feld0::after { background-image: url('/media/shape3-rel.svg'); }
    #section70 .feld1::after { background-image: url('/media/shape4-rel.svg'); }
    #section70 .feld2::after { background-image: url('/media/shape1-rel.svg'); }
    #section70 .feld3::after { background-image: url('/media/shape2-rel.svg'); }

    #section70 [class^="feld"] {
        background-image: none !important;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section70 {
        padding-top: 0;
        overflow: clip;          /* Formen ragen seitlich über die Seite */
        padding-bottom: 3rem;
    }

    #section70 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 4778;   /* war 1862 / 5460 – Blasen 18% enger gesetzt */
        margin: 0 auto;
    }

    #section70 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Text innerhalb der Blase: zentriert, auf ~58% der Formbreite begrenzt,
       damit er nicht über die runden Kanten läuft */
    #section70 .text {
        width: 58%;
        max-width: 58%;
    }

    #section70 .text h2 {
        margin: 0 0 0.5em;
    }

    #section70 .text p {
        text-align: left;
        margin: 0 0 1.2em;
    }

    #section70 .text p:last-child {
        margin-bottom: 0;
    }

    /* Text auf allen Formen */
    #section70 .text h2,
    #section70 .text p {
        color: var(--brand-primary);
    }

    /* --- Blase 1: Deine Sommerzeit 2026 (olive, links, bleedet links raus) --- */
    #section70 .feld0 {
        left: -19.1%;
        top: 2.91%;
        width: 72.1%;
        height: 30.46%;
        z-index: 1;
    }

    /* --- Blase 2: Kinder-Sommerferienprogramm (taupe, rechts) --- */
    #section70 .feld1 {
        left: 40.3%;
        top: 0.57%;
        width: 83.1%;
        height: 33.14%;
        z-index: 2;
    }

    /* --- Blase 3: Oh Baby / Praenatal Yoga (terracotta, mittig) --- */
    #section70 .feld2 {
        left: 2.1%;
        top: 26.15%;
        width: 93.4%;
        height: 36.57%;
        z-index: 3;
    }

    /* --- Blase 4: Wiesen & Flow (taupe, rechts) --- */
    #section70 .feld3 {
        left: 42.1%;
        top: 55.02%;
        width: 80.1%;
        height: 32.48%;
        z-index: 4;
    }

    /* --- Blase 5: Soulful Friday Circle (olive, links, bleedet links raus) --- */
    #section70 .feld4 {
        left: -24.4%;
        top: 62.52%;
        width: 79.7%;
        height: 38.48%;
        z-index: 5;
    }

    /* Textposition je Blase feinjustieren.
       ACHTUNG: margin-left/-top verschieben den Text nur um die HÄLFTE des
       Wertes (justify-content/align-items: center verteilt den Rest des
       Freiraums gleichmäßig). Prozente beziehen sich auf die FELDBREITE.

       In diesem Bereich (1000–1600px) sind die Werte gegenüber ≥1600px
       verschoben: der Container füllt hier den Viewport, dadurch landet
       der Überhang der Blasen 2, 4 (rechts) und 1, 5 (links) außerhalb
       des Bildschirms und wurde von "overflow: clip" abgeschnitten.
       Gemessen: bis zu 71px fehlender Text bei 1366px (iPad Pro quer).
       Die Werte unten halten den Text bei jeder Breite von 1000 bis 1600px
       mindestens 14px innerhalb des Viewports. */

    #section70 .feld0 .text {
        margin-left: 9.4%;
        margin-top: -4%;
    }

    #section70 .feld1 .text {
        margin-left: -7.6%;
        margin-top: -14%;
    }

    #section70 .feld2 .text {
        margin-left: 14%;
    }

    #section70 .feld3 .text {
        margin-left: -10.1%;
        margin-top: -5%;
    }

    #section70 .feld4 .text {
        margin-left: 18.2%;
        margin-top: -4%;
    }
}

@media (min-width: 1600px) {
    #section70 {
        padding-top: 0;
        overflow: clip;          /* Formen ragen seitlich über die Seite */
        padding-bottom: 3rem;
    }

    #section70 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 4778;   /* war 1862 / 5460 – Blasen 18% enger gesetzt */
        margin: 0 auto;
    }

    #section70 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Text innerhalb der Blase: zentriert, auf ~58% der Formbreite begrenzt,
       damit er nicht über die runden Kanten läuft */
    #section70 .text {
        width: 58%;
        max-width: 58%;
    }

    #section70 .text h2 {
        margin: 0 0 0.5em;
    }

    #section70 .text p {
        text-align: left;
        margin: 0 0 1.2em;
    }

    #section70 .text p:last-child {
        margin-bottom: 0;
    }

    /* Text auf allen Formen */
    #section70 .text h2,
    #section70 .text p {
        color: var(--brand-primary);
    }

    /* --- Blase 1: Deine Sommerzeit 2026 (olive, links, bleedet links raus) --- */
    #section70 .feld0 {
        left: -22.1%;
        top: 2.91%;
        width: 75.1%;
        height: 36.46%;
        z-index: 1;
    }

    /* --- Blase 2: Kinder-Sommerferienprogramm (taupe, rechts) --- */
    #section70 .feld1 {
        left: 40.3%;
        top: 0.57%;
        width: 83.1%;
        height: 33.14%;
        z-index: 2;
    }

    /* --- Blase 3: Oh Baby / Praenatal Yoga (terracotta, mittig) --- */
    #section70 .feld2 {
        left: 2.1%;
        top: 26.15%;
        width: 93.4%;
        height: 36.57%;
        z-index: 3;
    }

    /* --- Blase 4: Wiesen & Flow (taupe, rechts) --- */
    #section70 .feld3 {
        left: 42.1%;
        top: 52.02%;
        width: 82.1%;
        height: 33.48%;
        z-index: 4;
    }

    /* --- Blase 5: Soulful Friday Circle (olive, links, bleedet links raus) --- */
    #section70 .feld4 {
        left: -30.4%;
        top: 62.52%;
        width: 91.7%;
        height: 37.48%;
        z-index: 5;
    }

    /* Textposition je Blase feinjustieren – im PDF sitzt der Text nicht
       exakt im Formmittelpunkt, sondern leicht versetzt.
       (margin-left/-top verschieben um die HÄLFTE des Wertes, bezogen auf
       die Feldbreite – siehe Kommentar im Block 1000–1600px.) */

    #section70 .feld0 .text {
        margin-left: 2%;
        margin-top: -4%;
    }

    #section70 .feld1 .text {
        margin-left: 8%;
        margin-top: -14%;
    }

    #section70 .feld2 .text {
        margin-left: 14%;
    }

    #section70 .feld3 .text {
        margin-left: 6%;
        margin-top: -5%;
    }

    #section70 .feld4 .text {
        margin-left: 12%;
        margin-top: -4%;
    }
}