/* ==========================================================================
   Dein Kursplan
   Werte aus "Website (verschoben) 9.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt).

   #section64 – Headline "WONACH IST DIR HEUTE ?" + Einleitungstext
   .kursplan-... – Eversports-Widget (Modul), full-bleed über die
   ganze Seitenbreite (PDF: x 0–1360.6)

   ---------------------------------------------------------------------
   Umbau auf 3 Viewport-Zonen (auf Wunsch):
     Zone 1: @media (max-width: 999px)
     Zone 2: @media (min-width: 1000px) and (max-width: 1600px)
     Zone 3: @media (min-width: 1600px)
   Jede Section bekommt jetzt alle drei Zonen. Wo bisher nur ein Wert
   existierte, wurde er in alle drei Zonen übernommen (identisches
   Erscheinungsbild wie vorher, aber jetzt einzeln pro Zone einstellbar).
   Die ehemalige Mobil-Regel (max-width: 900px) ist jetzt Zone 1.
   Rein optische Regeln (Farbe, Textausrichtung einzeln, font-size,
   display:none) ohne erkennbaren Zonenbezug bleiben unskaliert direkt
   unter der jeweiligen Section stehen, um unnötige Verdopplung zu
   vermeiden.

   ---------------------------------------------------------------------
   .kursplan-iframe – Höhe (Update):
   Das Eversports-Widget meldet seine Inhaltshöhe NICHT per postMessage
   (geprüft: kein entsprechender Code in dessen JS-Bundles). Live-Höhe
   ist bei einem Cross-Origin-iframe ohne Mitwirken der Gegenseite
   technisch nicht möglich. Statt der bisherigen, an die Breite
   gekoppelten aspect-ratio (die das Widget auf schmaleren/mittleren
   Viewports zu knapp bemisst) jetzt eine großzügige feste min-height
   je Zone, aspect-ratio deaktiviert. Falls der Inhalt trotzdem mal
   höher ist, zeigt der iframe von sich aus seinen eigenen Scrollbalken
   (Standard-Browserverhalten) statt etwas abzuschneiden.
   ========================================================================== */

section h1,
section h2 {
    margin: 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    color: var(--brand-primary);
}

/* H1 – im Layout rechtsbündig, endet bündig mit dem Textbeginn
   (Mobil linksbündig -> Einzelfall, daher in den Zonen) */
#section64 .feld0 h1 {
    margin: 0;
}

/* Einleitungstext rechts */
#section64 .feld1 p {
    text-align: left;
    margin: 0;
}

/* hidden muss die display-Regeln schlagen, sonst bleiben Modal und
   Ablehnungs-Kasten trotz hidden-Attribut sichtbar (display:flex) */
.kursplan-section [hidden] {
    display: none !important;
}

/* sobald per JS eine feste Höhe gesetzt wurde, gewinnt die inline-Höhe */
.kursplan-iframe[style*="height"] {
    aspect-ratio: auto;
}

/* Widerrufs-Link ist ausgeblendet (stray-Regel schlägt per Kaskade) */
.kursplan-widerruf {
    display: none;
}

body.kursplan-modal-offen {
    overflow: hidden;
}

/* ==========================================================================
   Section 64 – Headline + Einleitung
   ========================================================================== */

@media (max-width: 999px) {
    #section64 {
        padding-bottom: 0;
    }

    #section64 .container {
        position: relative;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem var(--gutter);
    }

    #section64 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }

    #section64 .feld0 {
        width: 100%;
        height: 54%;
        position:relative;
    }

    #section64 .feld0 h1 {
        text-align: left!important;
    }

    #section64 .feld1 {
       position: static;	
        width: 100%;
        height: 45.6%;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section64 {
        padding-bottom: 0;
    }

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

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

    #section64 .feld0 {
        left: 8%;
        top: 16%;
        width: 36.1%;
        height: 54%;
    }

    #section64 .feld0 h1 {
        text-align: right;
    }

    #section64 .feld1 {
        left: 48.6%;
        top: 16.9%;
        width: 51.3%;
        height: 45.6%;
    }
}

@media (min-width: 1600px) {
    #section64 {
        padding-bottom: 0;
    }

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

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

    #section64 .feld0 {
        left: 8%;
        top: 16%;
        width: 36.1%;
        height: 54%;
    }

    #section64 .feld0 h1 {
        text-align: right;
    }

    #section64 .feld1 {
        left: 48.6%;
        top: 16.9%;
        width: 51.3%;
        height: 45.6%;
    }
}

/* ==========================================================================
   Kursplan-Widget (Modul)
   PDF: volle Seitenbreite, y 1213–2001 -> aspect 2480/1436
   ========================================================================== */

@media (max-width: 999px) {
    .kursplan-section {
        position: relative;
        width: 100%;
        padding: 2rem 0 3rem;
        z-index: 501;
    }

    .kursplan-wrapper {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden;
    }

    .kursplan-iframe {
        display: block;
        width: 100%;
        border: 0;
        /* großzügig, mobil wird das Widget deutlich höher */
        min-height: 1600px;
        aspect-ratio: auto;
        height: auto;
        background: var(--brand-bg);
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    .kursplan-section {
        position: relative;
        width: 100%;
        padding: 4rem 0 6rem;
        z-index: 501;
    }

    .kursplan-wrapper {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden;
    }

    .kursplan-iframe {
        display: block;
        width: 100%;
        border: 0;
        /* großzügige feste Höhe statt breitenabhängiger aspect-ratio,
           da das Widget seine Höhe nicht selbst meldet */
        min-height: 1300px;
        aspect-ratio: auto;
        height: auto;
        background: var(--brand-bg);
    }
}

@media (min-width: 1600px) {
    .kursplan-section {
        position: relative;
        width: 100%;
        padding: 4rem 0 6rem;
        z-index: 501;
    }

    .kursplan-wrapper {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden;
    }

    .kursplan-iframe {
        display: block;
        width: 100%;
        border: 0;
        /* großzügige feste Höhe statt breitenabhängiger aspect-ratio,
           da das Widget seine Höhe nicht selbst meldet */
        min-height: 1300px;
        aspect-ratio: auto;
        height: auto;
        background: var(--brand-bg);
    }
}

/* ==========================================================================
   Zustand "abgelehnt"
   ========================================================================== */

@media (max-width: 999px) {
    .kursplan-abgelehnt {
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 0 auto;
        background: var(--brand-wte);
        border: 1px solid var(--brand-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 160px;
        padding: 1.5rem var(--gutter);
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    .kursplan-abgelehnt {
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 0 auto;
        background: var(--brand-wte);
        border: 1px solid var(--brand-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        padding: 2rem var(--gutter);
    }
}

@media (min-width: 1600px) {
    .kursplan-abgelehnt {
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 0 auto;
        background: var(--brand-wte);
        border: 1px solid var(--brand-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        padding: 2rem var(--gutter);
    }
}

.kursplan-abgelehnt p {
    text-align: center;
    line-height: 2.6;
    margin: 0;
}

/* --- Widerrufs-Link unter dem geladenen Kursplan -------------------------- */

@media (max-width: 999px) {
    .kursplan-widerruf {
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 1rem auto 0;
        text-align: right;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    .kursplan-widerruf {
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 1rem auto 0;
        text-align: right;
    }
}

@media (min-width: 1600px) {
    .kursplan-widerruf {
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        margin: 1rem auto 0;
        text-align: right;
    }
}

/* --- Buttons im Look von .button (default.css) --------------------------- */

.kursplan-section .button,
.kursplan-ok,
.kursplan-ablehnen,
.kursplan-erneut,
.kursplan-zuruecknehmen {
    display: inline-block;
    padding: 6px 16px;
    background: var(--brand-primary);
    color: var(--brand-wte);
    text-decoration: none;
    border: 0;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: var(--line-height-p);
    cursor: pointer;
    appearance: none;
    transition: background 0.2s ease;
}

.kursplan-section .button:hover,
.kursplan-ok:hover,
.kursplan-ablehnen:hover,
.kursplan-erneut:hover,
.kursplan-zuruecknehmen:hover {
    background: rgba(var(--brand-primary-rgb), 0.85);
}

/* Sekundäre Aktionen: Oliveton, damit die Hauptaktion führt */
.kursplan-ablehnen,
.kursplan-zuruecknehmen {
    background: var(--brand-olive);
}

.kursplan-ablehnen:hover,
.kursplan-zuruecknehmen:hover {
    background: rgba(var(--brand-olive-rgb), 0.85);
}

/* ==========================================================================
   Modal
   ========================================================================== */

@media (max-width: 999px) {
    .kursplan-modal {
        position: fixed;
        inset: 0;
        z-index: 600;
        background: rgba(var(--brand-wte-darker-rgb), 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--gutter);
    }

    .kursplan-modal-box {
        background: var(--brand-bg);
        max-width: 52ch;
        width: 100%;
        padding: 1.75rem;
        border-radius: 2px;
    }

    .kursplan-modal-aktionen {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin: 2rem 0 0;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    .kursplan-modal {
        position: fixed;
        inset: 0;
        z-index: 600;
        background: rgba(var(--brand-wte-darker-rgb), 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--gutter);
    }

    .kursplan-modal-box {
        background: var(--brand-bg);
        max-width: 52ch;
        width: 100%;
        padding: 2.5rem;
        border-radius: 2px;
    }

    .kursplan-modal-aktionen {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin: 2rem 0 0;
    }
}

@media (min-width: 1600px) {
    .kursplan-modal {
        position: fixed;
        inset: 0;
        z-index: 600;
        background: rgba(var(--brand-wte-darker-rgb), 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--gutter);
    }

    .kursplan-modal-box {
        background: var(--brand-bg);
        max-width: 52ch;
        width: 100%;
        padding: 2.5rem;
        border-radius: 2px;
    }

    .kursplan-modal-aktionen {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin: 2rem 0 0;
    }
}

.kursplan-modal[hidden] {
    display: none;
}

.kursplan-modal-box h3 {
    margin: 0 0 .5em 0;
    color: var(--brand-primary);
}

.kursplan-modal-box p {
    text-align: left;
    margin: 0 0 1.2em;
}
.kursplan-modal-box p a {
    color: var(--brand-primary);
    text-decoration: none;
}

/* ==========================================================================
   Global – letzte Section, kein überflüssiger Abstand
   ========================================================================== */

article section:last-of-type {
    padding-bottom: 0rem;
    position: relative;
}