/* ============================================================
   Obelin – Oberauer Eltern-Initiative e.V.
   Layout-Referenz: XD-Export (Obelin-Programmierung/screens/),
   Design-Raster 1920 px. Mobile-first, keine externen Ressourcen.
   ============================================================ */

/* ── Fonts (lokal, DSGVO) ── */
@font-face {
    font-family: 'Chewy';
    src: url('/assets/fonts/Chewy-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Asap';
    src: url('/assets/fonts/Asap-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ── Design-Tokens ── */
:root {
    --blau:      #202FA3;
    --lila:      #820C86;
    --gruen:     #55B731;
    --rot:       #D11010;
    --gelb:      #FFE200;
    --dunkelrot: #8E0E00;
    --gold:      #E3B505;
    --schwarz:   #000;
    --weiss:     #FFF;
    --verlauf-rot: linear-gradient(180deg, #B51503 0%, #000 100%);
    --btn-verlauf: linear-gradient(180deg, #E42313 0%, #A50D05 100%);
    --lila-verlauf: linear-gradient(90deg, #5D0B66 0%, #9C27B0 100%);

    --font-headline: 'Chewy', 'Comic Sans MS', cursive;
    --font-text: 'Asap', system-ui, sans-serif;

    /* XD: Chewy 110 / 60, Asap 37 / 27 / 18 */
    --fs-headline-xl: clamp(3rem, 1.75rem + 4.5vw, 6.875rem);
    --fs-headline:    clamp(1.875rem, 1.25rem + 2vw, 3.75rem);
    --fs-lead:        clamp(1.25rem, 1rem + 0.9vw, 2.0625rem);
    --fs-zwischen:    clamp(1.125rem, 1rem + 0.6vw, 1.6875rem);
    --fs-text:        1.0625rem;
    --fs-klein:       0.9375rem;

    --inhalt-breite: 1300px;
    --abstand-sektion: clamp(3.5rem, 2.5rem + 4vw, 7rem);
}

/* ── Basis ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--fs-text);
    line-height: 1.45;
    color: var(--schwarz);
    background: var(--weiss);
    overflow-x: hidden;
}

img, picture { max-width: 100%; height: auto; display: block; }

h1, h2 {
    font-family: var(--font-headline);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 0.4em;
}
h3, h4 { font-family: var(--font-text); font-weight: 700; margin: 0 0 0.5em; }
h1 { font-size: var(--fs-headline-xl); }
h2 { font-size: var(--fs-headline); }
h3 { font-size: var(--fs-zwischen); }

a { color: var(--blau); }
p { margin: 0 0 1em; }

:focus-visible {
    outline: 3px solid var(--blau);
    outline-offset: 3px;
    border-radius: 2px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    background: var(--gelb);
    color: var(--schwarz);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Seitenrand: genug Platz für die fixe Seitenleiste links (Design: ~16 % Rand) */
.inhalt {
    max-width: var(--inhalt-breite);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 7vw, 6rem);
}
@media (min-width: 1500px) {
    .inhalt { padding-inline: 0; }
}

section { margin-block: var(--abstand-sektion); }

.bild-platzhalter {
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(45deg, #eee 0 12px, #f7f7f7 12px 24px);
    color: #888;
    text-align: center;
    font-size: var(--fs-klein);
    min-height: 200px;
    border-radius: 16px;
}

/* ── Buttons: rote Glanz-Pille (Neumorphism-Effekt nach uiverse.io/jantorres53,
      Farben auf Obelin-Rot angepasst) ── */
.btn {
    display: inline-block;
    font-family: var(--font-text);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    color: var(--weiss);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 -1px 1px rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, #E42313, #A50D05);
    border: 0;
    border-radius: 999px;
    padding: 0.7em 1.9em;
    box-shadow:
        inset 3px 3px 6px rgba(255, 255, 255, 0.5),
        inset -3px -3px 6px rgba(0, 0, 0, 0.25),
        4px 4px 12px rgba(0, 0, 0, 0.25),
        -2px -2px 10px rgba(255, 255, 255, 0.4);
    transition: transform 0.15s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
}
.btn:hover, .btn:focus-visible {
    background: linear-gradient(145deg, #F53523, #B81107);
    transform: translateY(-2px);
    box-shadow:
        inset 3px 3px 6px rgba(255, 255, 255, 0.6),
        inset -3px -3px 6px rgba(0, 0, 0, 0.25),
        6px 6px 14px rgba(0, 0, 0, 0.3),
        -3px -3px 12px rgba(255, 255, 255, 0.4);
}
.btn:active {
    transform: scale(0.97);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.4),
        inset -2px -2px 4px rgba(255, 255, 255, 0.5);
}

/* ── Sticky-Menübar (erscheint beim Scrollen) ── */
.sticky-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 150;
    background: var(--weiss);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    transform: translateY(-110%);
    transition: transform 0.3s ease;
}
body.sticky-aktiv .sticky-bar { transform: translateY(0); }
.sticky-bar-inner {
    max-width: var(--inhalt-breite);
    margin-inline: auto;
    padding: 0.7rem clamp(1.25rem, 7vw, 6rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 1500px) {
    .sticky-bar-inner { padding-inline: 0; }
}
.sticky-bar-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: var(--schwarz);
}
.sticky-bar-logo img { width: 34px; height: auto; }
.sticky-bar-logo span {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
    line-height: 1;
}
.sticky-bar-buttons {
    display: flex;
    gap: 1rem;
    /* Platz für die Kordel am rechten Container-Rand lassen */
    margin-right: clamp(3.5rem, 8vw, 9rem);
}
.btn--klein { font-size: 0.9375rem; padding: 0.55em 1.6em; }
@media (max-width: 640px) {
    .sticky-bar-buttons { display: none; }
}

/* ── Kordel-Menü-Toggle (goldene Kordel oben rechts) ── */
.kordel-toggle {
    position: fixed;
    top: 0;
    right: max(1.5rem, calc((100vw - var(--inhalt-breite)) / 2));
    z-index: 220;
    background: none;
    border: 0;
    padding: 0 0 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-text);
    /* Feste Breite: kurze und lange Kordel sind unterschiedlich breit –
       ohne feste Breite springt der Button beim Umschalten */
    width: 48px;
}
.kordel-bild { display: none; }
.kordel-toggle[aria-expanded="false"] .kordel-bild--kurz { display: block; width: 34px; height: auto; }
/* 42.5px = gleiche Skalierung wie die kurze Kordel; translateX gleicht aus,
   dass die Quaste im langen SVG 2px links der viewBox-Mitte sitzt */
.kordel-toggle[aria-expanded="true"]  .kordel-bild--lang { display: block; width: 42.5px; height: auto; transform: translateX(1.5px); }
.kordel-pfeile { display: none; }
.kordel-toggle[aria-expanded="false"] .kordel-pfeile--oeffnen { display: block; }
.kordel-toggle[aria-expanded="true"]  .kordel-pfeile--schliessen { display: block; }
.kordel-label {
    color: var(--gold);
    font-size: 0.9375rem;
    font-weight: 500;
}
/* Kein blauer Fokus-Ring um die Kordel nach Klick/Tipp – nur bei Tastatur */
.kordel-toggle:focus { outline: none; }
.kordel-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

/* ── Linke Seitenleiste (Icon-Schnellzugriff) ── */
.seitenleiste {
    position: fixed;
    left: clamp(0.75rem, 2.5vw, 2.6rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.seitenleiste::before, .seitenleiste::after {
    content: '';
    width: 1px;
    height: 3.5rem;
    background: currentColor;
    opacity: 0.6;
    /* fest über der Icon-Spalte verankern – sonst wandert die Linie mit,
       wenn die Hover-Pille den Container verbreitert */
    align-self: flex-start;
    margin-left: 13.5px;
}
/* Einträge: Icon, beim Hover fährt eine farbige Pille mit Label aus */
.seitenleiste-icon {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    line-height: 1;
    text-decoration: none;
    color: var(--weiss);
    border-radius: 999px;
    max-width: 28px;
    overflow: hidden;
    transition: max-width 0.3s ease, background-color 0.2s ease, padding 0.3s ease;
    white-space: nowrap;
}
.seitenleiste-icon img { width: 28px; height: 28px; flex: 0 0 auto; }
.seitenleiste-label {
    font-size: 0.9375rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
    padding-right: 0.4rem;
}
.seitenleiste-icon:hover, .seitenleiste-icon:focus-visible {
    max-width: 280px;
    padding-right: 0.6rem;
}
.seitenleiste-icon:hover .seitenleiste-label, .seitenleiste-icon:focus-visible .seitenleiste-label { opacity: 1; }
/* Pillen-Farbe passend zum jeweiligen Icon (Reihenfolge laut Seitenleisten-Pflege) */
.seitenleiste-icon:nth-of-type(1):hover, .seitenleiste-icon:nth-of-type(1):focus-visible { background: var(--blau); }
.seitenleiste-icon:nth-of-type(2):hover, .seitenleiste-icon:nth-of-type(2):focus-visible { background: var(--lila); }
.seitenleiste-icon:nth-of-type(3):hover, .seitenleiste-icon:nth-of-type(3):focus-visible { background: var(--rot); }

/* ── Megamenü (Overlay auf rotem Vorhang) ── */
.megamenu {
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow-y: auto;
    color: var(--weiss);
}
.megamenu-hintergrund {
    position: fixed;
    inset: 0;
    /* Weiße Kante unten wie die Hero-Kurve: links tiefer, zieht nach rechts hoch */
    background:
        radial-gradient(ellipse 175% 34% at 18% 116%, #FFF 49.5%, rgba(255, 255, 255, 0) 50.2%),
        linear-gradient(115deg, rgba(160, 15, 5, 0.92) 0%, rgba(120, 8, 2, 0.96) 55%, rgba(75, 3, 0, 0.98) 100%),
        url('/assets/images/startseite/startseite-header.webp') center / cover no-repeat;
}
body.menue-offen { overflow: hidden; }

.megamenu-inner {
    position: relative;
    max-width: var(--inhalt-breite);
    margin-inline: auto;
    padding: clamp(5rem, 12vh, 8rem) clamp(3.5rem, 8vw, 6rem) 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 900px) {
    .megamenu-inner { grid-template-columns: 2fr 1fr; align-items: start; }
}
.megamenu-gruppen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2.75rem 3rem;
}
.megamenu-gruppe-titel {
    margin: 0 0 0.9rem;
    font-weight: 700;
    /* Max. 30px, damit „Service & Offenes Haus" einzeilig bleibt (Design) */
    font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.875rem);
}
.megamenu-gruppe-titel a {
    color: var(--weiss);
    text-decoration: underline;
    text-underline-offset: 0.45em;
    text-decoration-thickness: 2px;
}
/* Kein Fokus-Ring beim automatischen Fokus nach dem Öffnen –
   Tastatur-Nutzer bekommen weiterhin einen sichtbaren Rahmen */
.megamenu a:focus { outline: none; }
.megamenu-inner:focus { outline: none; }
.megamenu a:focus-visible { outline: 2px solid var(--weiss); outline-offset: 4px; }
.megamenu-gruppe-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.megamenu-gruppe-liste a {
    display: inline-block;
    color: var(--weiss);
    text-decoration: none;
    font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.4375rem);
    padding: 0.3rem 0;
}
.megamenu-gruppe-liste a:hover, .megamenu-gruppe-liste a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; }

/* Rechte Spalte: Störer (Originalgröße 353x393) + Marke darunter */
.megamenu-rechts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 6vh, 4rem);
}
.megamenu-stoerer {
    width: clamp(260px, 19vw, 353px);
    aspect-ratio: 353 / 400;
    /* Kapselform laut XD: runde obere Ecken, gerade Seiten, bündiger Halbkreis unten */
    background: var(--rot);
    border-radius: 34px 34px 50% 50% / 34px 34px 44% 44%;
    box-shadow: inset 7px 7px 10px rgba(255, 255, 255, 0.14), inset -7px -7px 10px rgba(0, 0, 0, 0.14);
    margin-top: calc(-1 * clamp(5rem, 12vh, 8rem));
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
    display: grid;
    place-items: center;
}
.megamenu-einzeln {
    list-style: none;
    margin: 0;
    padding: 0 0 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    text-align: center;
}
.megamenu-einzeln a {
    color: var(--weiss);
    font-weight: 700;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 2.0625rem);
    text-decoration: underline;
    text-underline-offset: 0.45em;
    text-decoration-thickness: 2px;
}
.megamenu-marke {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: clamp(2rem, 9vh, 6rem) 0 0;
    color: var(--weiss);
    text-decoration: none;
}
.megamenu-marke img { width: clamp(70px, 7vw, 135px); height: auto; }
.megamenu-marke span {
    font-family: var(--font-headline);
    font-size: clamp(3rem, 6.5vw, 7rem);
    line-height: 1;
}

/* ── Headline mit Farbpunkten (Punkte UNTER dem Text) ── */
.headline { margin-bottom: 1.75rem; }
.headline--center { text-align: center; }
.headline--left { text-align: left; }
.headline-inner { display: inline-block; text-align: left; }
.headline-text { margin-bottom: 0.3rem; }
.headline-punkte { width: 84px; height: 13px; }

/* ── Hero ── */
.hero { position: relative; margin: 0; }
.hero-bild img, .hero-bild picture { width: 100%; }
.hero-text {
    position: absolute;
    top: 44%;
    left: 63%;
    transform: translate(-50%, -50%);
    width: min(88vw, 580px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--weiss);
}
.hero-bildmarke { width: clamp(44px, 5.7vw, 110px); height: auto; margin-bottom: 1rem; }
.hero-titel {
    font-family: var(--font-headline);
    font-size: var(--fs-headline-xl);
    line-height: 1;
    margin: 0 0 0.2em;
}
/* Subline laut Design: auf Unterseiten normal geschnitten, mit Luft zum
   Titel – nur auf der Startseite fett */
.hero-subline {
    font-size: clamp(1.125rem, 1rem + 0.7vw, 1.9375rem);
    font-weight: 400;
    margin: 0.4em 0 0.9em;
}
.hero--start .hero-subline { font-weight: 700; }
.hero-intro {
    font-size: clamp(0.8125rem, 0.7rem + 0.45vw, 1.0625rem);
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: 1.4em;
}

/* ── Angebote: blaue Arkaden-Säulen ── */
.angebote-uebersicht { text-align: center; position: relative; }
.angebote-uebersicht::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3rem;
    width: clamp(70px, 10vw, 200px);
    height: 100%;
    max-height: 900px;
    background: url('/assets/images/allgemein/deko-linie-rechts.svg') right top / 100% auto no-repeat;
    pointer-events: none;
}
.angebote-uebersicht-text { max-width: 640px; margin: 0 auto 3rem; }
.angebote-saeulen {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 275px));
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.9rem);
}
@media (min-width: 1000px) {
    .angebote-saeulen { grid-template-columns: repeat(4, minmax(0, 275px)); }
}
.angebote-saeule {
    background: url('/assets/images/startseite/startseite-angebote-saeule-blau.svg') center / 100% 100% no-repeat;
    color: var(--weiss);
    border-radius: 999px 999px 10px 10px;
    padding: 3.25rem 1.25rem 2.25rem;
    min-height: 345px;
    aspect-ratio: 270 / 392;
}
.angebote-saeule-titel {
    font-size: var(--fs-zwischen);
    margin-bottom: 1.4rem;
    max-width: 11ch;
    margin-inline: auto;
}
.angebote-saeule-titel a { color: var(--weiss); text-decoration: none; }
.angebote-saeule-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.angebote-saeule-liste a {
    position: relative;
    display: inline-block;
    color: var(--weiss);
    text-decoration: none;
    padding: 0.28rem 0;
    /* lange Kursnamen (z. B. „Cyrwheel/Rhönrad") umbrechen statt überstehen */
    max-width: 100%;
    overflow-wrap: anywhere;
}
.angebote-saeule-liste a::before {
    content: '';
    position: absolute;
    left: -1.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.7rem;
    height: 0.7rem;
    background: url('/assets/images/startseite/startseite-angebote-hover-pfeil-weiss.svg') center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.angebote-saeule-liste a:hover::before, .angebote-saeule-liste a:focus-visible::before { opacity: 1; }

/* ── 30 Jahre Timeline ── */
.jahre30 { text-align: center; }
.jahre30-kopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin: 0 0 0;
    font-family: var(--font-headline);
}
.jahre30-zahl { font-size: clamp(4.5rem, 3rem + 5.5vw, 9.375rem); }
.jahre30-wort { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 3.4rem); }
.jahre30-kopf::after {
    content: '';
    width: 1px;
    height: 2.6rem;
    background: var(--schwarz);
    margin-top: 0.9rem;
}
.jahre30-liste {
    list-style: none;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    position: relative;
}
.jahre30-item { position: relative; padding-top: 4.6rem; font-size: var(--fs-klein); }
.jahre30-item p { margin: 0; }
.jahre30-punkt {
    position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    z-index: 1;
}
/* Verbindungslinie zwischen den Punkten */
.jahre30-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2.4rem;
    left: 50%;
    width: calc(100% + 1.5rem);
    height: 1px;
    background: var(--schwarz);
}
.jahre30-punkt--blau  { background: var(--blau); }
.jahre30-punkt--lila  { background: var(--lila); }
.jahre30-punkt--gruen { background: var(--gruen); }
.jahre30-punkt--rot   { background: var(--rot); }
.jahre30-punkt--gelb  { background: var(--gelb); }
@media (max-width: 800px) {
    .jahre30-liste { grid-template-columns: 1fr; max-width: 420px; }
    .jahre30-item { padding-top: 4.2rem; }
    .jahre30-item:not(:last-child)::after { display: none; }
}

/* ── Veranstaltungen ── */
.startseite-events-text { max-width: 520px; margin-bottom: 2.5rem; }
.events-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.6rem;
}
.event-pille {
    position: relative;
    display: flex;
    align-items: center;
    background: url('/assets/images/startseite/startseite-veranstaltungs-kachel-lila-weiss.svg') center / 100% 100% no-repeat;
    border-radius: 999px;
    aspect-ratio: 1301 / 133;
    color: var(--weiss);
}
.event-datum {
    flex: 0 0 auto;
    width: clamp(6.5rem, 11vw, 10rem);
    padding-left: clamp(1.5rem, 3vw, 3.4rem);
    font-weight: 700;
    font-size: clamp(1.0625rem, 0.85rem + 0.65vw, 1.5rem);
    line-height: 1.3;
}
.event-titel {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.6875rem);
    line-height: 1.25;
    padding-right: 1rem;
}
.event-infokarte {
    /* Weißer Bereich (rechte Hälfte, gerade linke Kante) kommt aus dem
       SVG-Hintergrund der Pille – hier nur Textpositionierung */
    flex: 0 0 50%;
    align-self: stretch;
    background: transparent;
    color: var(--schwarz);
    padding: 0.75rem clamp(1.5rem, 3vw, 3rem) 0.75rem clamp(1.75rem, 3.5vw, 3.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: clamp(0.875rem, 0.75rem + 0.35vw, 1.0625rem);
    line-height: 1.5;
}
.event-infokarte p { margin: 0.1em 0; }
.event-toggle {
    position: absolute;
    right: -3.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.4rem;
    cursor: pointer;
    line-height: 0;
}
.event-toggle .event-toggle-minus { display: none; }
.event-toggle[aria-expanded="true"] .event-toggle-plus { display: none; }
.event-toggle[aria-expanded="true"] .event-toggle-minus { display: block; }
.event-details {
    padding: 1.75rem clamp(1.5rem, 4vw, 4rem);
}
.event-beschreibung { max-width: 760px; }
.event-plakat, .event-bild { max-width: 460px; margin-top: 1.25rem; }
.events-leer { font-weight: 600; }
.startseite-events-cta { text-align: right; margin-top: 2rem; }

@media (max-width: 900px) {
    .event-pille { flex-wrap: wrap; background: var(--lila); border-radius: 28px; aspect-ratio: auto; padding: 1rem; gap: 0.5rem; }
    .event-datum { width: auto; padding-left: 0.5rem; }
    .event-infokarte { flex: 1 1 100%; background: var(--weiss); border-radius: 20px; margin: 0.25rem 0 0; padding: 0.9rem 1.25rem; }
    .event-toggle { position: static; transform: none; margin-left: auto; }
}

/* ── Zirkus-Banner ── */
.zirkus-banner { position: relative; margin-block: 0; }
.zirkus-banner-bg img, .zirkus-banner-bg picture { width: 100%; }
.zirkus-banner-text {
    position: absolute;
    top: 44%;
    left: 72%;
    transform: translate(-50%, -50%);
    width: min(84vw, 400px);
    color: var(--weiss);
    text-align: center;
}
.zirkus-banner-frage {
    font-weight: 700;
    font-size: var(--fs-zwischen);
    margin-bottom: 0.4em;
}
.zirkus-banner-copy { font-size: clamp(0.8125rem, 0.7rem + 0.4vw, 1rem); margin-bottom: 1.4em; }

/* ── Über-uns-Teaser (mehr Luft nach oben/unten auf allen Unterseiten) ── */
.ueberuns-teaser {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    max-width: none;
    margin-block: calc(var(--abstand-sektion) * 1.6);
    padding-left: max(clamp(1.25rem, 7vw, 6rem), calc((100vw - var(--inhalt-breite)) / 2));
}
@media (min-width: 900px) {
    .ueberuns-teaser { grid-template-columns: minmax(400px, 520px) 1fr; }
}
.ueberuns-teaser-zwischenzeile {
    font-weight: 700;
    font-size: var(--fs-zwischen);
    margin-bottom: 0.6em;
}
.ueberuns-teaser-text { margin-bottom: 1.6em; }
.ueberuns-teaser-bild { justify-self: end; width: 100%; }
.ueberuns-teaser-bild img, .ueberuns-teaser-bild .bild-platzhalter {
    width: 100%;
    max-height: 400px;
    min-height: 280px;
    object-fit: cover;
    border-radius: 999px 0 0 999px;
}
@media (max-width: 899px) {
    .ueberuns-teaser { padding-right: clamp(1.25rem, 5vw, 3rem); }
    .ueberuns-teaser-bild img, .ueberuns-teaser-bild .bild-platzhalter { border-radius: 24px; }
}

/* ── Zahlen-Modul ── */
.zahlen { text-align: center; }
.zahlen-liste {
    list-style: none;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    max-width: 1180px;
}
.zahlen-wert {
    display: block;
    font-family: var(--font-headline);
    font-size: clamp(2.25rem, 1.5rem + 2vw, 3.75rem);
    line-height: 1.1;
}
.zahlen-wert--blau  { color: var(--blau); }
.zahlen-wert--lila  { color: var(--lila); }
.zahlen-wert--gruen { color: var(--gruen); }
.zahlen-wert--rot   { color: var(--rot); }
.zahlen-wert--gelb  { color: var(--gelb); }
.zahlen-text { font-size: var(--fs-klein); }

/* ── Einradfahrer (Scroll-Animation nach links) ── */
.einradfahrer-bahn {
    position: relative;
    height: 152px;
    border-bottom: 1px solid var(--schwarz);
    overflow: hidden;
    margin-top: 3rem;
}
.einradfahrer {
    position: absolute;
    bottom: 2px;
    left: 72%;
    width: 72px;
    will-change: transform;
}
.einradfahrer > img { width: 100%; height: auto; }
.einrad-rad {
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 57.7%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    will-change: transform;
}

/* ── Mach mit! (weiße Karte auf Blob-Hintergrund) ── */
.mitmachen-teaser { position: relative; margin-block: 0; padding-block: clamp(3rem, 8vw, 7rem); }
.mitmachen-teaser-bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.mitmachen-teaser-bg img, .mitmachen-teaser-bg picture { width: 100%; height: 100%; }
.mitmachen-teaser-bg img { object-fit: cover; }
.mitmachen-karte {
    max-width: 1070px;
    margin-inline: auto;
    background: var(--weiss);
    border-radius: 36px;
    padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.5rem, 6vw, 5.5rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: calc(100% - 2.5rem);
}
.mitmachen-spalten {
    display: grid;
    gap: 2.5rem;
}
.mitmachen-spalte h3 {
    font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
    margin-bottom: 0.6em;
}
@media (min-width: 760px) { .mitmachen-spalten { grid-template-columns: 1fr 1fr; } }
.mitmachen-spalte p { min-height: 5.5em; }
@media (max-width: 759px) { .mitmachen-spalte p { min-height: 0; } }

/* ── Galerie-Teaser „Einblicke" ── */
.galerie-teaser {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding-left: max(clamp(1.25rem, 7vw, 6rem), calc((100vw - var(--inhalt-breite)) / 2));
    overflow: hidden;
    position: relative;
}
@media (min-width: 900px) {
    .galerie-teaser { grid-template-columns: minmax(300px, 470px) 1fr; }
}
.galerie-teaser-text { margin-bottom: 1.6em; }
.galerie-teaser-bilder {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 330px));
    gap: clamp(1rem, 2.5vw, 2.25rem);
    margin-right: -6rem;
}
/* Bogen-Form für ALLE Fotos (auch normale Galerie-Fotos, z. B. Vereinsheim) */
.galerie-teaser-bogen {
    border-radius: 999px 999px 0 0;
    aspect-ratio: 437 / 485;
    overflow: hidden;
}
.galerie-teaser-bogen img { width: 100%; height: 100%; object-fit: cover; }
.galerie-teaser-bogen picture { display: block; height: 100%; }
.galerie-teaser-bogen.bild-platzhalter { min-height: 0; }
@media (max-width: 899px) {
    .galerie-teaser { padding-right: clamp(1.25rem, 5vw, 3rem); }
    .galerie-teaser-bilder { margin-right: 0; grid-template-columns: repeat(3, 1fr); }
}

/* ── Trenner + Cross-Teaser ── */
.trenner { margin: 0; line-height: 0; }
.trenner img { width: 100%; }
.trenner-kordel { padding-block: 1.5rem; }
.trenner-kordel img { margin-inline: auto; width: auto; max-height: 44px; }
.cross-teaser {
    max-width: 560px;
    margin: var(--abstand-sektion) auto;
    padding: 2rem;
    text-align: center;
}
.cross-teaser-frage {
    font-weight: 700;
    font-size: var(--fs-zwischen);
    margin: 0 0 0.5rem;
}

/* ── Zitat: große gelbe Anführungszeichen links, Fließtextschrift (nur größer) ── */
.zitat {
    max-width: 820px;
    margin: var(--abstand-sektion) auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 2rem);
    text-align: left;
    font-family: var(--font-text);
    font-weight: 600;
    font-size: clamp(1.125rem, 1rem + 0.7vw, 1.75rem);
    line-height: 1.4;
}
.zitat p { margin: 0; }
.zitat-zeichen {
    margin: 0;
    flex: 0 0 auto;
    width: clamp(56px, 6vw, 90px);
    height: auto;
}
@media (max-width: 640px) {
    .zitat { flex-direction: column; gap: 0.75rem; }
    .zitat-zeichen { width: 48px; }
}

/* ── Formulare ── */
.cms-form {
    max-width: 640px;
    display: grid;
    gap: 1.25rem;
}
.form-group { display: grid; gap: 0.375rem; }
.form-group label { font-weight: 600; }
.cms-form input[type="text"],
.cms-form input[type="email"],
.cms-form textarea,
.cms-form select {
    font: inherit;
    padding: 0.75rem 1rem;
    border: 2px solid var(--schwarz);
    border-radius: 12px;
    background: var(--weiss);
    width: 100%;
}
.form-check { display: flex; gap: 0.625rem; align-items: flex-start; }
.form-check input { margin-top: 0.3rem; width: 1.25rem; height: 1.25rem; }
.form-erfolg {
    max-width: 640px;
    padding: 1.5rem;
    border: 3px solid var(--gruen);
    border-radius: 12px;
    font-weight: 600;
}

/* ── Footer (rot, mit Spendenkonto-Blase) ── */
.site-footer {
    position: relative;
    background: var(--dunkelrot);
    color: var(--weiss);
    margin-top: var(--abstand-sektion);
    overflow: hidden;
}
.site-footer a { color: var(--weiss); }
/* Deutlich kompakter + alles im 1300er-Container (auch die Icons) */
.site-footer-inner {
    max-width: var(--inhalt-breite);
    margin-inline: auto;
    padding: 1.5rem clamp(1.25rem, 7vw, 6rem);
    display: grid;
    grid-template-columns: auto auto auto auto 1fr;
    gap: clamp(1.25rem, 3vw, 3.5rem);
    align-items: center;
}
@media (min-width: 1500px) {
    .site-footer-inner { padding-inline: 0; }
}
.site-footer-bildmarke { display: block; line-height: 0; }
.site-footer-bildmarke img { width: 48px; height: auto; }
.site-footer-titel {
    font-weight: 700;
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.625rem);
    margin-bottom: 0.3em;
}
.site-footer-adresse p, .site-footer-spenden p { margin: 0; font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); line-height: 1.55; }
.site-footer-legal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-klein);
}
.site-footer-legal a { text-decoration: none; }
.site-footer-legal a:hover { text-decoration: underline; }
.site-footer-copyright { font-size: 0.8125rem; margin: 0.3em 0 0; opacity: 0.9; }
.site-footer-icons { display: flex; gap: 0.9rem; }
.site-footer-icon { display: block; line-height: 0; }
.site-footer-icon img { width: 38px; height: 38px; }
.site-footer-spenden {
    position: relative;
    isolation: isolate;
    justify-self: end;
    min-width: min(34vw, 560px);
    padding: 1.9rem clamp(1.25rem, 2.5vw, 2.5rem) 1.9rem clamp(2.5rem, 5vw, 5rem);
}
.site-footer-spenden::before {
    content: '';
    position: absolute;
    inset: -1.5rem -100vw -1.5rem 0;
    background: var(--rot);
    border-radius: 999px 0 0 999px;
    z-index: -1;
}
@media (max-width: 1000px) {
    .site-footer-inner { grid-template-columns: auto 1fr; }
    .site-footer-spenden { justify-self: start; min-width: 0; padding: 1.25rem 1.5rem; }
    .site-footer-spenden::before { inset: 0 -100vw 0 -1.5rem; border-radius: 24px; }
}
/* Mobil: Footer-Blöcke alle untereinander */
@media (max-width: 640px) {
    .site-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; }
    .site-footer-spenden { justify-self: stretch; }
}

/* ── Kleine Screens: Seitenleiste ausblenden ── */
@media (max-width: 760px) {
    .seitenleiste { display: none; }
    .hero-text { top: 50%; left: 50%; }
}

/* ── Reduzierte Bewegung ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .einradfahrer { transform: none !important; }
}

/* ============================================================
   Unterseiten-Module (Phase 3)
   ============================================================ */

/* ── Kurs-Modul (Angebots-Seiten) ── */
.kurs { margin-block: var(--abstand-sektion); scroll-margin-top: 7rem; }
.kurs-kreis {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.25rem;
    background-size: 100% 100%;
    display: grid;
    place-items: center;
    color: var(--weiss);
    font-family: var(--font-headline);
    font-size: 2.5rem;
    line-height: 1;
    padding-bottom: 0.3rem;
}
.kurs-spalten {
    display: grid;
    gap: 2rem 4rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 800px) { .kurs-spalten { grid-template-columns: 1fr 1fr; } }
.kurs-eckdaten { font-weight: 700; }
.kurs-eckdaten p { margin-bottom: 0.9em; }

.kurs-unten {
    display: grid;
    align-items: center;
}
@media (min-width: 900px) {
    /* Roter CTA-Balken läuft in voller Breite durch, das Foto liegt darüber */
    /* Inhalt nach unten ausrichten: roter Balken schließt bündig mit dem Foto ab */
    .kurs-unten { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; min-height: clamp(280px, 23vw, 430px); }
    /* Fakten-Icons enden bündig mit dem letzten Sticky-Button („Gruppenübersicht"):
       Container-Rand + derselbe Kordel-Abstand wie in .sticky-bar-buttons */
    .kurs-fakten {
        margin-left: 48%;
        margin-right: calc(max(calc((100% - var(--inhalt-breite)) / 2), 0px) + clamp(3.5rem, 8vw, 9rem));
    }
    .kurs-cta { padding-left: calc(48% + clamp(1.5rem, 3vw, 4rem)); }
    .kurs-foto {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 46%;
        z-index: 1;
    }
}
.kurs-foto img, .kurs-foto picture img, .kurs-foto .bild-platzhalter {
    width: 100%;
    height: clamp(280px, 23vw, 430px);
    border-radius: 0 250px 250px 0;
    object-fit: cover;
}
.kurs-foto .bild-platzhalter { min-height: 280px; }
/* Drei gleich breite Spalten über die volle Containerbreite verteilt */
.kurs-fakten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.75rem 0;
}
/* Icon-Reihe fest (Icons auf einer Linie), Text hängt unten bündig */
.kurs-fakt {
    display: grid;
    grid-template-rows: 44px 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.6rem;
    min-width: 0;
}
/* Äußere Spalten bündig mit dem Container (links Bildkante, rechts wie das Menü) */
.kurs-fakt:first-child { justify-self: start; }
.kurs-fakt:last-child  { justify-self: end; }
/* Höhe statt Breite vorgeben: der schmale, hohe Ort-Pin würde sonst
   auf 44×60 hochskaliert – dickere Linien und tiefer sitzender Text */
.kurs-fakt img { width: auto; height: 44px; }
.kurs-fakt p { margin: 0; font-size: var(--fs-klein); align-self: end; }
.kurs-cta {
    background: #9A1006;
    color: var(--weiss);
    padding: 2rem clamp(1.5rem, 4vw, 4rem) 2.25rem;
}
.kurs-cta-frage {
    font-weight: 700;
    font-size: var(--fs-zwischen);
    margin-bottom: 0.25em;
}
.kurs-cta-hinweis { font-size: var(--fs-klein); margin-bottom: 1.2em; }
@media (max-width: 899px) {
    .kurs-foto img, .kurs-foto picture img, .kurs-foto .bild-platzhalter { border-radius: 24px; margin-inline: 1rem; width: calc(100% - 2rem); }
    .kurs-unten { gap: 1.5rem; }
}

/* ── Gruppenübersicht (Service-Seite) ── */
.gruppen-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}
.gruppe {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    align-items: center;
    gap: 1rem;
    border-radius: 999px;
    padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1.25rem, 3vw, 2.75rem);
    border: 2px solid var(--lila);
}
.gruppe--voll { background: var(--lila); color: var(--weiss); }
.gruppe--voll .gruppe-fakt img { filter: brightness(0) invert(1); }
.gruppe--umriss { background: var(--weiss); color: var(--lila); }
.gruppe-name {
    font-weight: 700;
    font-size: var(--fs-zwischen);
    display: flex;
    align-items: center;
}
/* Dünne Linie zwischen Name und Fakten (laut Design) */
.gruppe-name::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
    margin-inline: 1.25rem 0.5rem;
}
.gruppe-fakt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.3;
}
.gruppe-fakt strong { font-size: 1.375rem; }
.gruppe-fakt small { font-size: 0.9375rem; }
@media (max-width: 800px) {
    .gruppe { grid-template-columns: 1fr 1fr; border-radius: 24px; }
    .gruppe-name { grid-column: 1 / -1; }
}

/* ── Bücherschrank (Service-Seite) ── */
.buecherschrank {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding-left: max(clamp(1.25rem, 7vw, 6rem), calc((100vw - var(--inhalt-breite)) / 2));
}
@media (min-width: 900px) { .buecherschrank { grid-template-columns: minmax(360px, 520px) 1fr; } }
.buecherschrank-bild img, .buecherschrank-bild picture img {
    width: 100%;
    border-radius: 250px 0 0 250px;
    object-fit: cover;
    max-height: 420px;
}
@media (max-width: 899px) {
    .buecherschrank { padding-right: clamp(1.25rem, 7vw, 6rem); }
    .buecherschrank-bild img, .buecherschrank-bild picture img { border-radius: 24px; }
}

/* Timeline-Titel-Variante (Regeln / Unser Ziel) */
.jahre30-titel { font-size: var(--fs-headline); }

/* ── Vorstand (Über uns) ── */
.vorstand {
    display: grid;
    gap: 2.5rem;
    align-items: start;
    padding-left: max(clamp(1.25rem, 7vw, 6rem), calc((100vw - var(--inhalt-breite)) / 2));
    padding-right: max(clamp(1.25rem, 7vw, 6rem), calc((100vw - var(--inhalt-breite)) / 2));
    margin-block: var(--abstand-sektion);
}
@media (min-width: 950px) { .vorstand { grid-template-columns: minmax(400px, 560px) 1fr; } }
/* Bild unten bündig mit der Tabelle (statt oben an der Überschrift) */
.vorstand-bild { align-self: end; }
.vorstand-bild img, .vorstand-bild picture img {
    width: 100%;
    border-radius: 32px;
    object-fit: cover;
    max-height: 560px;
}
@media (max-width: 949px) {
    .vorstand-bild img, .vorstand-bild picture img { border-radius: 24px; }
}
.vorstand-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: var(--fs-klein);
}
.vorstand-tabelle th, .vorstand-tabelle td {
    text-align: left;
    padding: 0.85rem 1rem;
}
.vorstand-tabelle th { font-weight: 700; white-space: nowrap; }
.vorstand-tabelle tbody tr:nth-child(even) { background: #F4E8F5; }
.vorstand-tabelle a { color: inherit; text-decoration: none; }
.vorstand-tabelle a:hover { text-decoration: underline; }

/* ── Vereinsgrundlagen ── */
.grundlagen-spalten {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 900px) { .grundlagen-spalten { grid-template-columns: 1.4fr 1fr; } }
.grundlagen-cta { text-align: center; }

/* ── Blob-Karte (Mitmachen/Spenden) ── */
.blob-karte-spalten {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 800px) { .blob-karte-spalten { grid-template-columns: 1.3fr 1fr; } }
.blob-karte-bild img, .blob-karte-bild picture img {
    width: min(100%, 340px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    margin-inline: auto;
}
.blob-karte-konto { line-height: 1.8; }
.mitmachen-intro { max-width: 640px; }
.spenden-hinweis { max-width: 720px; }

/* ── Kontakt-Seite ── */
.kontakt-bereich {
    display: grid;
    gap: 3rem;
    align-items: start;
    padding-left: max(clamp(1.25rem, 7vw, 6rem), calc((100vw - var(--inhalt-breite)) / 2));
    margin-block: var(--abstand-sektion);
}
@media (min-width: 950px) { .kontakt-bereich { grid-template-columns: minmax(400px, 640px) 1fr; } }
.kontakt-blase {
    background: var(--blau);
    color: var(--weiss);
    border-radius: 999px 0 0 999px;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 7.5rem);
    justify-self: stretch;
    align-self: start;
    margin-top: clamp(1.5rem, 4vw, 3.5rem);
}
.kontakt-blase-titel {
    font-weight: 700;
    font-size: var(--fs-zwischen);
    margin-bottom: 1.5rem;
}
.kontakt-blase dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem 2rem;
    margin: 0;
    font-size: 1.0625rem;
}
.kontakt-blase dt { font-weight: 700; }
.kontakt-blase dd { margin: 0; }
@media (max-width: 949px) {
    .kontakt-bereich { padding-right: clamp(1.25rem, 7vw, 6rem); }
    .kontakt-blase { border-radius: 24px; }
}
/* Formularfelder laut Design: blaue Umrisse, runde Ecken,
   Beschriftung als Placeholder IM Feld (Labels nur für Screenreader) */
.cms-form input[type="text"],
.cms-form input[type="email"],
.cms-form textarea {
    border: 2px solid var(--blau);
    border-radius: 18px;
}
.cms-form textarea { border-radius: 24px; }
.cms-form ::placeholder { color: #6b6b80; opacity: 1; }
.cms-form .form-group > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.cms-form .form-group > label.form-check {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}
/* Abschicken-Button wie im Design: kompakt, nicht über volle Breite */
.cms-form .btn { justify-self: start; width: auto; padding-inline: 3em; }

/* ── Galerie-Seite ── */
.galerie-intro {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 900px) { .galerie-intro { grid-template-columns: 1.5fr 1fr; } }
.galerie-intro-cta { text-align: center; }
.galerie-kategorie { margin-block: var(--abstand-sektion); }
/* Mosaik-Grid laut XD: 3 gleich breite Spalten, Bilder stapeln sich versetzt */
.galerie-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 1.25rem;
}
@media (min-width: 800px) { .galerie-grid { columns: 3; } }
.galerie-grid-item {
    break-inside: avoid;
    margin-bottom: 1.25rem;
}
.galerie-grid-item img {
    width: 100%;
    height: auto;
    border-radius: 14px;
}
.galerie-unterschrift { font-size: 0.8125rem; margin: 0.3em 0 0; color: #555; }

/* ── Textseiten (Impressum/Datenschutz) ── */
.textseite { padding-top: 8rem; max-width: 900px; }
.textseite h2 { font-family: var(--font-text); font-weight: 700; font-size: var(--fs-zwischen); }

/* Event-Toggle in der Infokarte (Veranstaltungsseite) */
.event-toggle {
    position: absolute;
    right: clamp(1rem, 2.5vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%);
}
.event-details .event-beschreibung h3 { margin-top: 0; }
.event-details-spalten {
    display: grid;
    gap: 2rem;
}
@media (min-width: 900px) { .event-details-spalten { grid-template-columns: 1.6fr 1fr; } }

/* ============================================================
   Responsive-Feinschliff (Mobil/Tablet)
   ============================================================ */
@media (max-width: 760px) {
    /* Hero: KEIN Foto – roter Farbverlauf mit weißer Bogenkante unten */
    .hero-bild { display: none; }
    .hero {
        background:
            radial-gradient(ellipse 170% 14% at 40% 103%, #FFF 49.5%, rgba(255, 255, 255, 0) 50.4%),
            linear-gradient(115deg, #B51503 0%, #8A0A02 55%, #4B0300 100%);
        padding: 7.5rem 1.25rem 6.5rem;
    }
    .hero-text {
        position: static;
        transform: none;
        width: min(88vw, 420px);
        margin-inline: auto;
    }

    /* Banner (Zirkus/Kino/Bücher/…): Text als eigener Block unter dem Bild */
    .zirkus-banner { background: var(--dunkelrot); }
    .zirkus-banner-bg img { height: 300px; object-fit: cover; }
    /* Mit eigenem Mobil-Crop (export-mobil): Bild in voller Höhe zeigen */
    .zirkus-banner--mobilbild .zirkus-banner-bg img { height: auto; object-fit: unset; }
    .zirkus-banner-text {
        position: static;
        transform: none;
        width: auto;
        padding: 1.75rem clamp(1.25rem, 7vw, 3rem) 2.5rem;
    }
    /* Hochformat-Crop: Text liegt IM roten Feld unten im Bild statt darunter */
    .zirkus-banner--text-im-bild .zirkus-banner-text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        padding: 0 clamp(1.25rem, 7vw, 3rem) 2rem;
    }

    /* Veranstaltungen: Plus/Minus-Icons deutlich kleiner */
    .event-toggle img { width: 24px; height: 24px; }

    /* Kurs-Fakten: kleinere Icons, alle drei nebeneinander */
    .kurs-fakten { gap: 0.5rem; padding: 1.5rem 1rem; }
    .kurs-fakt { grid-template-rows: 30px 1fr; gap: 0.45rem; }
    .kurs-fakt img { width: auto; height: 30px; }
    .kurs-fakt p { font-size: 0.8125rem; }

    /* Mehr Luft zwischen den einzelnen Angeboten */
    .kurs { margin-block: 5.5rem; }

    /* Kontakt-Kasten: links und rechts gleicher Abstand */
    .kontakt-bereich { padding-inline: 1.25rem; }
    .kontakt-blase { margin-inline: 0; padding: 2rem 1.5rem; }
}
@media (max-width: 640px) {
    .angebote-saeulen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Mehr Platz oben im Bogen, damit der Säulen-Titel nicht abgeschnitten wirkt.
       Wichtig: Das Säulen-SVG streckt sich nicht auf schmale Boxen (behält sein
       Seitenverhältnis → transparente Zone oben, Titel „schwebt") – mobil daher
       Farbfläche + runde Ecken statt SVG. */
    .angebote-saeule { aspect-ratio: auto; min-height: 0; padding: 3.5rem 0.75rem 1.75rem; background: var(--blau); border-radius: 999px 999px 10px 10px; }
    .angebote-saeule-titel { font-size: 1.125rem; }
    .sticky-bar-buttons { margin-right: 0; }
    .kordel-toggle[aria-expanded="false"] .kordel-bild--kurz { width: 26px; }
    .kurs-kreis { width: 68px; height: 68px; font-size: 1.9rem; }
    .event-datum { font-size: 1rem; }

    /* Menü mobil: Störer kompakt, genug Abstand zur weißen Bogenkante */
    .megamenu-hintergrund {
        background:
            radial-gradient(ellipse 160% 10% at 45% 102%, #FFF 49.5%, rgba(255, 255, 255, 0) 50.4%),
            linear-gradient(115deg, rgba(160, 15, 5, 0.92) 0%, rgba(120, 8, 2, 0.96) 55%, rgba(75, 3, 0, 0.98) 100%),
            url('/assets/images/startseite/startseite-header.webp') center / cover no-repeat;
    }
    .megamenu-inner { padding-bottom: clamp(7rem, 32vw, 11rem); }
    /* Mobil: einfaches Rechteck mit runden Ecken statt Kapselform */
    .megamenu-stoerer { margin-top: 0; width: 230px; aspect-ratio: auto; border-radius: 28px; padding: 1.75rem 1.25rem; }
    .megamenu-einzeln { padding-bottom: 0; gap: 1rem; }
    .megamenu-einzeln a { font-size: 1.25rem; }
    .megamenu-marke { margin-top: 0.5rem; }
    .megamenu-marke img { width: 60px; }
    .megamenu-marke span { font-size: 2.75rem; }

    /* Gemeinschaft in Zahlen: untereinander */
    .zahlen-liste { grid-template-columns: 1fr; gap: 2.25rem; max-width: 420px; }

    /* Gruppenübersicht: rechte Spalte breiter, damit die Uhrzeit einzeilig bleibt */
    .gruppe { grid-template-columns: 1fr 1.3fr; }
    .gruppe-fakt small { white-space: nowrap; }
}

/* Mobil: Vorstands-Tabelle kompakt, lange Wörter umbrechen */
@media (max-width: 640px) {
    .vorstand-tabelle { font-size: 0.8125rem; }
    .vorstand-tabelle th, .vorstand-tabelle td { padding: 0.6rem 0.5rem; }
    .vorstand-tabelle th { white-space: normal; }
    .vorstand-tabelle a { word-break: break-all; }
}
/* Textseiten: kleinere H1 (lange Wörter wie „Datenschutzerklärung") */
.textseite .headline-text { font-size: var(--fs-headline); overflow-wrap: anywhere; }


/* Startseite: Events schließen direkt an den Zirkus-Banner an (Desktop) */
.startseite-events { margin-bottom: 0; }
/* Mobil: deutlich Luft zwischen Events und Zirkus-Trenner */
@media (max-width: 760px) {
    .startseite-events { margin-bottom: 4.5rem; }
}

/* Kein weißer Balken vor dem Footer – Bild-/Banner-Sektionen laufen direkt hinein */
.site-footer { margin-top: 0; }

/* Kurs-CTA: Text rechts vom Foto (muss NACH der Basis-padding-Regel stehen) */
@media (min-width: 900px) {
    .kurs-cta { padding-left: calc(48% + clamp(1.5rem, 3vw, 4rem)); }
}

/* ── Richtext-Fließtexte (Formatierungen aus dem CMS-Editor) ── */
:where(.rt) { margin: 0 0 1em; }
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt ul, .rt ol { margin: 0.5em 0 1em; padding-left: 1.35em; }
.rt li { margin-bottom: 0.25em; }
.rt a { color: var(--blau); text-underline-offset: 0.15em; }
.rt u { text-underline-offset: 0.15em; }

/* ── KI-Kennzeichnung: dezentes Badge auf markierten Bildern ── */
.ki-bild { position: relative; display: block; line-height: 0; }
.ki-bild > picture, .ki-bild > img { line-height: normal; }
.ki-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    background: rgba(12, 12, 14, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--weiss);
    font-family: var(--font-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    pointer-events: none;
}

/* ── Lightbox (Galerie): Bild groß ansehen, blättern, schließen ── */
.galerie-grid-item { cursor: zoom-in; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 8, 0.92);
    padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox-bild {
    max-width: min(92vw, 1400px);
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.lightbox-unterschrift {
    color: var(--weiss);
    font-size: var(--fs-klein);
    margin-top: 0.9rem;
    text-align: center;
    max-width: 80vw;
    min-height: 1.2em;
}
.lightbox-zaehler {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.5rem);
    left: clamp(1rem, 3vw, 2rem);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-klein);
}
.lightbox button {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    color: var(--weiss);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, 0.28); }
.lightbox-schliessen { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox-zurueck { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox-weiter { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
    .lightbox button { width: 40px; height: 40px; }
    .lightbox-bild { max-height: 72vh; }
}