/* ==========================================================================
   Dein Yoga › Deine Kurse – Kurs-Sections
   Werte aus "Website (verschoben) 5.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt).
   Spaltenraster laut PDF:
     linke Spalte:  beginnt bei 0%   (PDF x 170.2)
     rechte Spalte: beginnt bei 54.5% (PDF x 726.7)
     → Spaltenbreite je ~45.5%, Lücke ~9%
   --------------------------------------------------------------------------
   OHNE ID-LISTEN. Kurs-Sections werden über ihren Inhalt erkannt:
       article > section:has(.text)
   Jede Kurs-Section enthält mindestens ein .text-Element, die Formen-Section
   (#section50) enthält keines. Neue Kurse können also im Backend angelegt
   werden, ohne dass hier eine ID nachgetragen werden muss – egal welche
   Section-Nummer REDAXO vergibt (aktuell z. B. #section85 zwischen
   #section46 und #section47).
   Reihenfolge-Abhängiges (Hintergrundfarbe, Trenner-Form) läuft über
   :nth-of-type(4n+x), rotiert also automatisch weiter.
   Hintergrundfarben und Trenner-Formen sind bewusst NUR im Mobile-Block
   (max-width: 999px) gesetzt – Desktop bleibt im Originalzustand.
   --------------------------------------------------------------------------
   DREI ZONEN:
       Mobile   max-width: 999px                        (einspaltig)
       Tablet   min-width: 1000px and max-width: 1600px (quer: 1024/1194/1366)
       Desktop  min-width: 1601px
   Gemeinsames steht in @media (min-width: 1000px) – die Tablet-Zone ist ans
   Dateiende konsolidiert und enthaelt nur noch die Abweichungen dazu.
   --------------------------------------------------------------------------
   KONSOLIDIERT (aktueller Stand): Es gab zwei aufeinanderfolgende
   @media (min-width: 1000px) and (max-width: 1600px)-Blöcke mit jeweils
   eigenen #section50-Formwerten (zweiter Block = spätere Korrektur, hat die
   Werte des ersten per Kaskade überschrieben – bis auf feld2's z-index:0,
   das im zweiten Block nicht neu gesetzt wurde und daher aus dem ersten
   Block weitergalt). Beides ist unten zu einem einzigen Tablet-Block
   zusammengeführt (nur die zuletzt wirksamen Werte), ans Ende verschoben.
   aspect-ratio-Werte stehen als Bruch (Breite / Höhe) statt als Dezimalzahl.
   ========================================================================== */
section h2 {
    margin: 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    color: var(--brand-primary);
}
[class^="feld"] h2 + p {
    margin-top: 0;
    margin-bottom: 4rem;
}
/* --- Typografie im Kursblock ---------------------------------------------
   PDF-Aufbau: h2, dann Untertitel/Frage/Stile als p, zuletzt Button.
   Nicht viewport-abhängig – gilt in allen Zonen. */
article > section:has(.text) .text h2 {
    margin-top: 0;
    margin-bottom: 0.6em;
}
article > section:has(.text) .text p {
    text-align: left;          /* PDF: linksbündig, kein Blocksatz */
    margin: 0 0 1.4em;
}
article > section:has(.text) .text p:last-child {
    margin-bottom: 0;
}
/* Button-Absatz mit etwas mehr Luft davor (PDF: ~50 pt) */
article > section:has(.text) .text p:has(> a.button) {
    margin-top: 2rem;
}
/* ==========================================================================
   Kurs-Sections – Mobile (einspaltig, mit Farbflächen und Wellen-Trennern)
   ========================================================================== */
@media (max-width: 999px) {
    article > section:has(.text) {
        padding-top: 7rem;
        padding-bottom: 7rem;
        position: relative;       /* über den Hintergrund-Formen (#section50) */
        z-index: 1;               /* #section50 liegt auf z-index 0 */
        overflow: visible;        /* Trenner-Form darf über die Section hinausragen */
    }
    /* Erste Kurs-Section schließt direkt an die Slideshow an */
    article > section:has(.text):first-of-type {
        padding-top: 4rem;
    }
    /* --- Hintergrundfarben aus den #section50-Formen, im Vierertakt
       rotierend: olive → terracotta → beige → apricot → olive …
       Olive kam in der Formen-Liste doppelt vor (zwei SVG-Dateien, gleiche
       Farbe) – dedupliziert auf 4 Farben, damit keine zwei Sections direkt
       hintereinander dieselbe Farbe bekommen. */
    article > section:has(.text):nth-of-type(4n+1) {
        background-color: rgba(114, 108, 74, 0.3);    /* olive */
    }
    article > section:has(.text):nth-of-type(4n+2) {
        background-color: rgba(187, 119, 77, 0.3);    /* terracotta */
    }
    article > section:has(.text):nth-of-type(4n+3) {
        background-color: rgba(236, 232, 228, 0.55);  /* beige */
    }
    article > section:has(.text):nth-of-type(4n) {
        background-color: rgba(249, 189, 153, 0.4);   /* apricot */
    }
    /* --- Trenner-Formen: 4 organische Wellen-SVGs (shape1–4, ~600×60–82
       Viewbox), volle Breite, mittig auf der Trennkante zwischen zwei
       Sections – halb in der oberen, halb in der unteren.
       Bewusst als ::before der UNTEREN Section (früher ::after der oberen):
       ein späteres Geschwisterelement wird ohnehin über dem früheren
       gezeichnet, dadurch liegt die Welle automatisch über der Section
       darüber. Die früher nötige absteigende z-index-Leiter (20, 19, 18 …)
       entfällt damit komplett – ein einziges z-index: 1 oben genügt.
       Die erste Kurs-Section bekommt keine Welle (darüber liegt die
       Slideshow). */
    article > section:has(.text):not(:first-of-type)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 200px;             /* feste Höhe statt aspect-ratio, klarer steuerbar */
        transform: translateY(-50%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
    }
    /* Rotation shape1 → shape2 → shape3 → shape4 → shape1 …
       Der Versatz gegenüber der Farbrotation ist gewollt: die Welle gehört
       zur Kante ÜBER der Section, die Farbe zur Section selbst. */
    article > section:has(.text):nth-of-type(4n+2)::before {
        background-image: url('/media/shape1-15x.svg');
    }
    article > section:has(.text):nth-of-type(4n+3)::before {
        background-image: url('/media/shape2-15x.svg');
    }
    article > section:has(.text):nth-of-type(4n)::before {
        background-image: url('/media/shape3-15x.svg');
    }
    article > section:has(.text):nth-of-type(4n+1)::before {
        background-image: url('/media/shape4-15x.svg');
    }
    article > section:has(.text) .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 100%;
        row-gap: 4.5rem;
    }
    /* Letzte Kurs-Section = "keine spätere Section enthält .text" */
    article > section:has(.text):not(:has(~ section .text)) {
        margin-bottom: -60px;      /* die Welle (200px) steht unten über */
    }
}
/* ==========================================================================
   Kurs-Sections – Desktop (zweispaltiges Raster)
   Früher zwei identische Blöcke (1000–1600px und ab 1600px) – hier zu einem
   zusammengefasst, der Inhalt war Zeichen für Zeichen gleich.
   ========================================================================== */
@media (min-width: 1000px) {
    article > section:has(.text) .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 45.5% 45.5%;
        column-gap: 9%;
        align-items: start;
    }
    /* Abstand zwischen den Kurs-Reihen (PDF: ~180 pt Luft zwischen den Blöcken) */
    article > section:has(.text) {
        padding-top: 5rem;
        padding-bottom: 5rem;
        position: relative;       /* über den Hintergrund-Formen (#section50) */
        z-index: 1;
    }
    /* #section50 fängt die allgemeine Regel
       "article section:first-of-type { padding-top: 5rem }" ab –
       die erste Kurs-Section bekommt den Einstiegs-Abstand deshalb explizit. */
    article > section:has(.text):first-of-type {
        padding-top: 10rem;
    }
    article > section:has(.text):not(:has(~ section .text)) {
        padding-bottom: 10rem;
    }
    /* Feld-Korrektur innerhalb der ersten Kurs-Section (aus dem PDF gemessen) */
    article > section:has(.text):first-of-type .feld0 {
        margin: 8.52% 0% 0% 0%;
        width: 100%;
    }
    article > section:has(.text):first-of-type .feld1 {
        margin: 7.95% 0% 0% 0%;
        width: 100.08%;
    }
}
/* ==========================================================================
   #section50 – Hintergrund-Formen (freisetzend)
   Positionen aus "Website (verschoben) 5.pdf" gemessen; Formen-BBoxen
   exakt aus den SVG-Pfaden berechnet. Bezugsrahmen: volle Seitenbreite
   (Formen bleeden über Container und Seitenrand hinaus).
   WICHTIG: Die Section liegt absolut HINTER den Kurs-Sections.
   Der umgebende Wrapper (article) braucht position: relative.
   top ggf. anpassen, je nachdem wo #section50 im DOM steht –
   Wert unten gilt für: Overlay beginnt auf Höhe der ersten Kurs-Section.
   Diese Section enthält kein .text und wird von den Regeln oben deshalb
   nicht erfasst.
   ========================================================================== */
/* Positionierungskontext für #section50 */
article {
    position: relative;
}
#section50 {
    position: absolute;
    top: 100vh;                /* Slideshow (eine Fensterhöhe) überspringen;
                                  bei mobilen Browsern ggf. 100svh/100dvh –
                                  je nachdem wie die Slideshow ihre Höhe setzt */
    left: 0;
    width: 100%;
    z-index: 0;                /* unter den Kurs-Sections;
                                  kein -1, sonst rutscht es hinter einen evtl.
                                  vorhandenen article-Hintergrund */
    pointer-events: none;
    padding: 0;                /* überschreibt auch das first-of-type-Padding */
               /* Formen ragen rechts/links über die Seite */
}
@media (max-width: 999px) {
    /* Nutzt die im weißen Bereich zwischen top:100vh und dem Ende von
       article tatsächlich zur Verfügung stehende Höhe, statt einer
       geschätzten aspect-ratio. */
    #section50 {
        bottom: 0;
    }
    /* Formen auf Mobile sichtbar machen und über die volle verfügbare
       Höhe verteilen (top:100vh…bottom:0 gibt #section50 bereits eine
       feste Höhe – .container übernimmt sie 1:1, wie bei Desktop über
       aspect-ratio, hier aber über height:100%). */
    #section50 .container.zweispaltig,
    #section50 .container.freisetzend {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
    }
    #section50 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
    /* Größe verdoppelt gegenüber Desktop-Werten (left/top unverändert,
       Formen wachsen also nach rechts/unten weiter über den Rand hinaus –
       das Überstehen wird durch overflow: clip auf #section50 abgeschnitten,
       siehe Basis-Regel oben). */
    /* olive oben links */
    #section50 .feld0 {
        left: -5.6%;
        top: 0.3%;
        width: 202%;
        height: 54%;
    }
    /* terracotta oben rechts – ragt rechts über den Seitenrand */
    #section50 .feld1 {
        left: 2.2%;
        top: 12.3%;
        width: 209.6%;
        height: 52.4%;
    }
    /* beige mitte links – hinter allen anderen Formen */
    #section50 .feld2 {
        left: -5.6%;
        top: 33.3%;
        width: 221.4%;
        height: 59.6%;
        z-index: 0;
    }
    /* apricot mitte rechts */
    #section50 .feld3 {
        left: -11.6%;
        top: 59.4%;
        width: 243.8%;
        height: 31.2%;
    }
    /* olive unten */
    #section50 .feld4 {
        left: 1.9%;
        top: 71%;
        width: 206.4%;
        height: 59.2%;
    }
}
@media (min-width: 1600px) {
    /* Die Formen-Ebene hatte eine feste aspect-ratio (2480/7295). Ihre Hoehe
       haengt damit nur an der VIEWPORTBREITE – die Kurs-Sections werden
       dagegen HOEHER, je schmaler der Viewport wird (mehr Zeilenumbrueche).
       Beides lief auseinander: bei 1024px endeten die Formen 1753px vor dem
       letzten Kurs, der untere Drittel der Seite war komplett weiss.
       Stattdessen jetzt wie im Mobile-Block: bottom: 0 spannt die Ebene ueber
       die tatsaechliche Hoehe des Kursbereichs. Damit die Formen dabei nicht
       vertikal gestaucht/gestreckt werden, kommt ihre Hoehe nicht mehr aus
       einem height-Prozentwert, sondern aus aspect-ratio je Form – berechnet
       aus den bisherigen Desktop-Werten, die Formen sehen also gleich aus.
       Die top-Prozente verteilen sie ueber die gesamte Hoehe. */
    #section50 {
        bottom: 0;
    }
    #section50 .container.zweispaltig,
    #section50 .container.freisetzend {
        position: relative;
        width: 100%;               /* volle Breite, kein Gutter – Formen bleeden */
        max-width: none;
        height: 100%;
        margin: 0;
    }
    #section50 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100% 100%; /* PDF skaliert die Formen leicht unproportional */
        z-index: 1;                 /* Stapelung: beige (feld2) hinter allen anderen */
        height: auto;               /* Hoehe kommt aus aspect-ratio je Form */
    }
    /* olive oben links */
    #section50 .feld0 {
        left: -2.36%;
        top: 0.13%;
        width: 101%;
        aspect-ratio: 159 / 125;
    }
    /* terracotta oben rechts – ragt rechts über den Seitenrand */
    #section50 .feld1 {
        left: -1.77%;
        top: 13.51%;
        width: 104.8%;
        aspect-ratio: 34 / 25;
    }
    /* beige mitte links – hinter allen anderen Formen */
    #section50 .feld2 {
        left: -10.92%;
        top: 33.1%;
        width: 116.89%;
        aspect-ratio: 921 / 1000;
        z-index: 0;
    }
    /* apricot mitte rechts */
    #section50 .feld3 {
        left: -13.62%;
        top: 66.32%;
        width: 124.76%;
        aspect-ratio: 2761 / 1000;
    }
    /* olive unten */
    #section50 .feld4 {
        left: -1.6%;
        top: 78.33%;
        width: 101.85%;
        aspect-ratio: 621 / 500;
    }
}

/* ==========================================================================
   ZONE TABLET – 1000 bis 1600px (iPad quer: 1024 / 1194 / 1366)
   Nur Abweichungen zum Block darueber.
   Warum ueberhaupt: bei 1024px bleiben nach Gutter und Container-Padding
   nur 860px Inhalt, die Spalte ist damit 391px statt 545px wie ab 1601px.
   Der Kursblock wird dadurch deutlich hoeher – ohne kleinere Abstaende
   wird die Seite auf dem Tablet unnoetig lang.

   Konsolidiert aus den ursprünglich zwei getrennten Blöcken (siehe Hinweis
   im Datei-Header) – nur die zuletzt wirksamen #section50-Formwerte,
   plus das per Kaskade weitergeltende feld2 { z-index: 0 } aus dem ersten
   Block, sind hier erhalten.
   ========================================================================== */
@media (min-width: 1000px) and (max-width: 1600px) {
    /* Spalten etwas breiter, Lücke etwas schmaler (47 + 6 + 47 = 100) */
    article > section:has(.text) .container {
        grid-template-columns: 47% 47%;
        column-gap: 6%;
    }
    /* Abstände zusammenziehen – auf Tablet sonst zu viel Leerraum */
    article > section:has(.text) {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    article > section:has(.text):first-of-type {
        padding-top: 6rem;
    }
    article > section:has(.text):not(:has(~ section .text)) {
        padding-bottom: 6rem;
    }
    #section50 {
        bottom: 0;
    }
    #section50 .container.zweispaltig,
    #section50 .container.freisetzend {
        position: relative;
        width: 100%;               /* volle Breite, kein Gutter – Formen bleeden */
        max-width: none;
        height: 100%;
        margin: 0;
    }
    #section50 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100% 100%; /* PDF skaliert die Formen leicht unproportional */
        z-index: 1;                 /* Stapelung: beige (feld2) hinter allen anderen */
        height: auto;               /* Hoehe kommt aus aspect-ratio je Form */
    }
    /* olive oben links */
    #section50 .feld0 {
        left: -3.42%;
        top: -0.42%;
        width: 101%;
        aspect-ratio: 159 / 125;
    }
    /* terracotta oben rechts – ragt rechts über den Seitenrand */
    #section50 .feld1 {
        left: -2.17%;
        top: 13.22%;
        width: 104.8%;
        aspect-ratio: 34 / 25;
    }
    /* beige mitte links – hinter allen anderen Formen (z-index aus dem
       ersten der beiden ursprünglichen Blöcke übernommen, da im zweiten
       nicht neu gesetzt) */
    #section50 .feld2 {
        left: -12.32%;
        top: 30.08%;
        width: 116.72%;
        aspect-ratio: 104 / 125;
        z-index: 0;
    }
    /* apricot mitte rechts */
    #section50 .feld3 {
        left: -11.09%;
        top: 63.69%;
        width: 116.76%;
        aspect-ratio: 101 / 40;
    }
    /* olive unten */
    #section50 .feld4 {
        left: -9.33%;
        top: 78.0%;
        width: 108.87%;
        aspect-ratio: 1331 / 900;
    }
    #section46 {
        padding-top: 0;
    }
    #section85 {
        padding-top: 0;
    }
    #section48 {
        padding-top: 3rem;
    }
}


@media (min-width: 1900px) {

#section50 .feld4 {
        left: -9.33%;
        top: 78.0%;
        width: 108.87%;
        aspect-ratio: 1331 / 900;
    }
}