/* =========================================================================
   Entdecke den Koran – Stylesheet (öffentliche Website)
   "Literary Warm" Design-System:
   warmes Creme, nahezu schwarzer Primärton, weiche Karten,
   großzügige Typografie, ruhige Scroll-Animationen. Token-getrieben.

   Abschnitte: 1 Tokens · 2 Basis/Typografie · 3 Layout · 4 Motion ·
   5 Header · 6 Buttons · 7 Komponenten · 8 Lesebereich · 9 Formulare ·
   10 Footer · 11 Dark Mode · 12 Responsive
   Handgeschrieben, kein Framework, kein Build.
   ========================================================================= */

/* ---- 1. Design-Tokens ------------------------------------------------- */
:root {
    /* iOS-Safe-Areas (Notch / Dynamic Island / Home-Indicator). Nur aktiv mit
       viewport-fit=cover auf Geräten mit Aussparungen; sonst 0 → Desktop, Android
       und Browser ohne Aussparungen bleiben unverändert. Zentral wiederverwendbar. */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    /* Höhe der fixierten Nav inkl. Safe-Area – als wiederverwendbarer Inhaltsabstand
       (siehe #main). ~95 px Desktop-Pille; mobil unten überschrieben. */
    --nav-h: calc(5.95rem + var(--sat));
    --bg-page:     #F0F1F3;   /* Navy (#223A55) mit 7 % über Weiß – kühler Seitengrund */
    --bg-subtle:   #F0F1F3;   /* gleiche Fläche für "erhöhte" Elemente */
    --bg-alt:      #F2EEE5;   /* etwas tiefere Creme für Paper-Sektionen */
    --bg-card:     #ECE5D8;   /* warme Karte, klar vom Grund abgesetzt */
    --bg-inner:    var(--bg-card); /* Alias: eine gemeinsame Kartenfläche */
    --bg-inverse:  #0B0B0B;   /* primary dark */
    --text-strong: #1B1A18;   /* Überschriften */
    --text-default:#3F3B36;   /* Fließtext */
    --text-muted:  #6D6860;   /* gedämpft */
    --text-on-dark:#FAFAF9;
    --border:      #CFC6B6;
    --divider:     #E5DFD1;
    --accent:      #0B0B0B;
    --accent-hover:#1C1C1C;
    --accent-soft: var(--gold);     /* einziger öffentlicher Akzent: Gold */
    --accent-tint: var(--bg-card);
    --secondary:       #223A55;   /* Sekundär: Navy */
    --secondary-hover: #1B2F46;
    --secondary-soft:  #9DB0C6;
    --secondary-tint:  var(--bg-card);
    --danger:      #94342E;   /* Fehler (semantisch) */
    --success:     #4C6842;   /* Erfolg (semantisch) */
    --warning:     #B7842C;   /* Warnung (semantisch) */
    --info:        #35577B;   /* Info (semantisch) */

    /* ---- Theme-fähige Oberflächen-Tokens (EINE Quelle der Wahrheit) --------
       Hell: weiße/cremige Karten & Felder. Dunkel (siehe html[data-theme=dark]):
       geschichtete Navy-Dunkelflächen. Komponenten nutzen NUR diese Tokens
       (statt hartem #fff), damit sie automatisch beiden Themes folgen. */
    --surface-card:   #fff;          /* weiße Karten (Spenden, Seiten, Reader-Flow, Account) */
    --surface-raised: #fff;          /* Popover, Dropdown, Modal, Bottom-Sheet, Tooltip */
    --surface-sunken: #F1EFE9;       /* eingelassene Felder, Tracks, Eingaben */
    --surface-mix:    #fff;          /* Mischbasis für color-mix(…, #fff)-Tönungen */
    --surface-line:   color-mix(in srgb, var(--secondary) 12%, transparent); /* Haarlinie auf Karten */
    --surface-ink:    var(--secondary); /* Navy-„Tinten"-Flächen: Footer, Cookie-Band, Inverse-CTAs */

    /* Marken-Gold (Logo) – globale Quelle der Wahrheit („Goldener Faden“).
       Seiten-Tokens (--home-gold, --q-gold, --d-gold) werden schrittweise
       hierauf migriert. */
    --gold:       #9F985E;  /* Primär: Olivgold – einziger Marken-Akzent */
    --gold-hover: #8C854F;  /* Primär Hover */
    --gold-soft:  #E8E6D1;  /* weiche, helle Oliv-Tönung (Lesehervorhebung) */
    --gold-ink:   #fff;     /* Schriftfarbe AUF goldener Fläche (Dunkelmodus: dunkel) */

    /* Typografie */
    --font-body:    'TASA Explorer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Cooper BT W01 Light', 'Georgia', serif;
    --font-display-medium: 'Cooper BT W01 Medium', 'Cooper BT W01 Light', 'Georgia', serif;

    /* ---- Einheitlicher Hero (eine Quelle der Wahrheit für ALLE Hauptseiten:
       Projekt, Partner, Spenden, Kostenlos, Lesen, Einzelsure). Verlauf liegt
       auf dem Body, Inhalt fließt darüber; H1-Typo & Abstände sind überall
       identisch. ------------------------------------------------------------ */
    --hero-grad-top: #E8E1BE;                                   /* oberster Olivton (Hero)     */
    --hero-grad: linear-gradient(180deg, var(--hero-grad-top) 0%, var(--hero-grad-top) 35%, var(--bg-page) 100%);
    --hero-scale: 470px;                                        /* Höhe des Verlaufsbandes        */
    --hero-h1-size: clamp(2.4rem, 5vw, 3.6rem);                 /* H1-Größe überall gleich        */
    --hero-h1-lh: 1.08;                                         /* H1-Zeilenhöhe                  */
    --hero-pad-top: clamp(2.6rem, 5.5vw, 4.25rem);              /* Hero-Oberkante (unter Nav) → H1 */
    --hero-pad-bottom: clamp(1.5rem, 3vw, 2.25rem);             /* H1/Meta → Inhalt               */
    --hero-gap: .7rem;                                          /* Eyebrow ↔ H1 ↔ Subtitle        */

    /* Layout */
    --maxw:   1340px;   /* globale Referenzbreite (Navbar + ALLE Hauptcontainer) */
    --gutter: 24px;

    /* Radius */
    --radius:    8px;
    --radius-sm: 8px;
    --radius-xs: 8px;
    --radius-button: 13px;    /* Buttons: gerundet, aber nicht voll als Pille */
    --radius-pill: 999px;     /* Badges/Chips bleiben rund */
    /* Vereinheitlichte Karten-Radien („Goldener Faden“) */
    --radius-lg: 18px;
    --radius-xl: 26px;

    /* Fokus: einheitlicher, zugänglicher, aber dezenter Ring (kein hartes Schwarz). */
    --focus-ring: 2px solid color-mix(in srgb, var(--secondary) 80%, transparent);
    --focus-offset: 2px;

    /* Schatten (warm getönt) */
    --shadow-01: 0 1px 2px rgba(11,11,11,.05);
    --shadow-02: 0 2px 8px rgba(11,11,11,.06);
    --shadow-sm: 0 2px 10px rgba(11,11,11,.06), 0 1px 2px rgba(11,11,11,.05);
    --shadow-md: 0 18px 40px -18px rgba(11,11,11,.22);
    --shadow-lg: 0 30px 60px -22px rgba(11,11,11,.30);

    /* Motion – ruhige, hochwertige Kurven. Alles klingt sanft aus; nichts
       startet/stoppt abrupt. Eine gemeinsame Sprache für die ganze Seite. */
    --dur-micro: 180ms;
    --dur-fast:  280ms;   /* Hover/Mikro-Interaktionen */
    --dur-base:  640ms;   /* Reveals */
    --dur-media: 900ms;   /* große Eintritte */
    --ease-out-expo: cubic-bezier(.19, 1, .22, 1);   /* elegantes Ausklingen */
    --ease-out-soft: cubic-bezier(.22, 1, .36, 1);   /* weiche Dezeleration */
    --ease-hover:    cubic-bezier(.33, 1, .45, 1);   /* taktil, weich */
    --ease-in-out:   cubic-bezier(.62, 0, .18, 1);   /* beidseitig sanft (Scroll/Menü) */
    --stagger-step:  85ms;
    --rise:    12px;
    --rise-sm: 9px;
    --lift:    -4px;
    --lift-btn:-2px;
    --transition: var(--dur-fast) var(--ease-hover);

}

/* ---- 2. Basis & Typografie ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Seitengrund liegt auf der Wurzel (Canvas); body/#main bleiben transparent –
   gleiches Erscheinungsbild, aber die Seitenflächen selbst sind durchsichtig. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; background: var(--bg-page); }

body {
    font-family: var(--font-body);
    color: var(--text-default);
    background: transparent;
    line-height: 1.75;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#main {
    flex: 1 0 auto;
    background: transparent;
    /* Standard-Abstand, damit die fixierte Nav keinen Inhalt überdeckt. Seiten mit
       Vollbild-Band/Hero (Startseite, $pageHeading) setzen ihn auf 0. */
    padding-top: var(--nav-h);
}

img, svg, video, iframe, embed, object, canvas { max-width: 100%; height: auto; }
img, svg, video, picture, canvas { display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display-medium);
    color: var(--text-strong);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: 0;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.25rem; line-height: 1.25; }
h4 { font-size: 1.2rem; line-height: 1.35; }
p { color: var(--text-default); }

/* Globaler Mobil-Schutz: lange, nicht umbrechbare Strings (deutsche Komposita,
   E-Mails, URLs) brechen um, statt eine Spalte/den Viewport seitlich zu sprengen.
   Nur auf schmalen Schirmen aktiv; Desktop-Umbruch bleibt unberührt. */
@media (max-width: 768px) {
    body, p, li, a, h1, h2, h3, h4, dd, dt, figcaption, label, .cookie-notice__text {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

@media (min-width: 640px) {
    body { font-size: 1.03125rem; }
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.375rem; }
}

@media (min-width: 960px) {
    h1 { font-size: 3.4rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.55rem; }
}

a { color: var(--accent); text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

ul, ol { padding-left: 1.2rem; }

::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--bg-inverse); color: var(--text-on-dark); padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- 3. Layout -------------------------------------------------------- */
.container {
    width: min(calc(100% - (var(--gutter) * 2)), var(--maxw));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.section { padding-block: clamp(5rem, 8vw, 10rem); }      /* 80 → 160px – großzügiger Weißraum */
.section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section--paper { background: var(--bg-alt); }
body:not(.page-index) #main > .section:first-child:not(.section--inverse) {
    background: var(--bg-page);
}
body:not(.page-index) #main > .section:first-child > .container.measure {
    margin-inline: auto;
    text-align: center;
}
.section--green {                                            /* Legacy hero name, now aligned with homepage */
    background: var(--bg-page);
    color: var(--text-default);
}
.section--green h1, .section--green h2, .section--green h3 { color: var(--text-strong); }
.section--green p { color: var(--text-default); }
.section--inverse {
    background: var(--bg-inverse);
    color: var(--text-on-dark);
}
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: #fff; }
.section--inverse p { color: rgba(249,246,241,.82); }

.eyebrow {
    display: inline-block; font-family: var(--font-body); font-weight: 700;
    font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); margin-bottom: .9rem;
}
.section--green .eyebrow { color: var(--accent); }
.section--inverse .eyebrow { color: var(--secondary-soft); }

.lead { font-size: 1.12rem; line-height: 1.6; color: var(--text-muted); }
@media (min-width: 640px) { .lead { font-size: 1.24rem; } }
@media (min-width: 960px) { .lead { font-size: 1.35rem; } }
.section--green .lead, .hero .lead { color: var(--text-muted); }
.section--inverse .lead { color: rgba(249,246,241,.85); }

.text-center { text-align: center; }
.measure { max-width: 62ch; }
.container.measure {
    max-width: none;
}
.container.measure > * {
    max-width: 62ch;
}
body:not(.page-index) #main > .section:first-child > .container.measure > *,
.container.measure.text-center > * {
    margin-inline: auto;
}
.measure-center { max-width: 62ch; margin-inline: auto; }
.stack > * + * { margin-top: 1.15rem; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1.05fr .95fr; align-items: center; }

/* ---- 4. Motion (Scroll-Reveal) --------------------------------------- */
/* Nur aktiv, wenn JS läuft (html.js) – ohne JS bleibt alles sichtbar. */
/* Reveals sind opazitätsgeführt mit minimaler Bewegung – die Elemente wirken,
   als wären sie schon da und blenden sich nur sanft ein (kein Blur: klarer und
   günstiger). Gemeinsames Timing/Easing für ein durchgehendes Gefühl. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise, 12px));
    transition: opacity var(--dur-base) var(--ease-out-soft),
                transform var(--dur-base) var(--ease-out-soft);
    transition-delay: calc(var(--reveal-i, 0) * var(--stagger-step));
    will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal-media] {
    opacity: 0;
    transform: translateY(var(--rise, 12px)) scale(1.014);
    transition: opacity var(--dur-media) var(--ease-out-soft),
                transform var(--dur-media) var(--ease-out-soft);
    transition-delay: calc(var(--reveal-i, 0) * var(--stagger-step));
    will-change: opacity, transform;
}
.js [data-reveal-media].is-visible { opacity: 1; transform: none; }

/* ---- 5. Header / Navigation ------------------------------------------ */
.maintenance-bar { background: var(--accent); color: #fff; text-align: center; padding: .6rem 1rem; font-weight: 600; font-size: .95rem; }

/* ---- Cookie-/Datenschutzhinweis (fixe, dezente Bodenleiste) -------- */
.cookie-notice {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    /* Navy-Band, passend zum Footer. */
    background: var(--surface-ink);
    border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
    box-shadow: none;
    padding: .9rem 0 calc(.9rem + var(--sab));   /* Inhalt frei vom Home-Indicator */
    color: rgba(255, 255, 255, .82);
}
.cookie-notice.is-hidden { display: none; }
/* Link auf dem Navy-Band (Textfarbe siehe .cookie-notice__text weiter unten). */
.cookie-notice__text a { color: #fff; text-underline-offset: 2px; }
/* „Akzeptieren/Verstanden": Gold-Akzent. „Ablehnen/Datenschutz": heller Outline-Button. */
.cookie-notice .btn--gold { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.cookie-notice .btn--gold:hover { background: color-mix(in srgb, var(--gold) 88%, #fff); color: #fff; }
.cookie-notice .btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid color-mix(in srgb, #fff 38%, transparent);
}
.cookie-notice .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.cookie-notice__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    flex-wrap: wrap;
}
.cookie-notice__text {
    margin: 0;
    flex: 1 1 22rem;
    min-width: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);   /* hell auf dem Navy-Band (beide Themes) */
}
.cookie-notice__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.cookie-notice .btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
@media (max-width: 560px) {
    .cookie-notice__actions { width: 100%; }
    .cookie-notice__actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* Sticky Header: Sprungmarken (#ayah-…) nicht unter dem Header verstecken. */
html { scroll-padding-top: 6rem; }

/* ---- Header / Navigation --------------------------------------------- */
/* EINE Nav-Variante für die ganze Website: dauerhaft fixiert oben, immer sichtbar.
   `fixed` (statt sticky) ist stabil, wenn iOS-Safari die Browserleisten ein-/
   ausblendet – kein Springen/Flackern, kein Positionswechsel. Kein Auto-Ausblenden. */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0; z-index: 50;
    /* Pille unter Statusleiste/Dynamic Island schieben; das Band/der Hero dahinter
       (top:0) füllt den Bereich hinter der Uhr. */
    padding: calc(.8rem + var(--sat)) 0 0;
    background: transparent;
}
/* Schwebende Pillen-Navigation: abgerundete, deckend weiße Leiste. */
.site-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    min-height: 82px;
    padding: 1.05rem clamp(1.2rem, 2.5vw, 2rem);
    background: #fff;
    border-radius: 999px;
}
/* Alternative Navigationsleiste: volle, deckend weiße Leiste über die gesamte
   Breite (per Body-Klasse .nav-full). Ohne diese Klasse bleibt die schwebende
   Pille oben aktiv – so lässt sich jederzeit zurückwechseln. */
.nav-full .site-header {
    padding: 0;
    background: #fff;
    border-bottom: 1px solid color-mix(in srgb, var(--secondary) 8%, transparent);
}
.nav-full .site-header__inner {
    background: transparent;
    border-radius: 0;
    min-height: 74px;
    /* Keine zusätzliche Innenpolsterung: Inhalt richtet sich exakt am
       Container-Gutter aus – gleiche Breite wie alle übrigen Sektionen. */
    padding-inline: 0;
}
html[data-theme="dark"] .nav-full .site-header {
    background: var(--bg-page);
    border-bottom-color: color-mix(in srgb, #fff 10%, transparent);
}
/* Offenes Mobilmenü: Glas-Effekt der Pille aus. transform, backdrop-filter UND
   will-change: transform erzeugen je einen Containing Block – das fixe Vollbild-
   Panel würde sonst an der (Flow-)Position des Headers kleben und beim Scrollen
   nach oben aus dem Bild rutschen. Daher hier alle drei neutralisieren. */
/* Bei offenem Menü: Leiste bleibt fixiert am Viewport-Oberrand (gleiche Variante
   wie sonst – die Nav ist überall fixed). */
.site-header.is-menu-open {
    position: fixed; top: 0; left: 0; right: 0;
}
.site-header.is-menu-open .site-header__inner {
    background: var(--bg-page);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Scrim hinter dem mobilen Menü (per JS gesteuert). */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(11, 11, 11, .38);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s var(--ease-out-soft);
    pointer-events: none;
}
.nav-scrim.is-visible { opacity: 1; pointer-events: auto; }
.nav-scrim[hidden] { display: none; }

.brand { justify-self: start; display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.brand__logo {
    width: clamp(150px, 16vw, 220px);
    height: auto;
    display: block;
}
.primary-nav { justify-self: center; }
.primary-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(1.15rem, 2.4vw, 2.2rem);
    margin: 0;
    padding: 0;
}
.primary-nav__item { position: relative; }
.primary-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    padding: .35rem .1rem;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s var(--ease-hover);
}
/* Goldene Unterstreichung: wächst beim Hover, bleibt auf der aktiven Seite. */
.primary-nav__link::after {
    content: "";
    position: absolute;
    left: .1rem; right: .1rem; bottom: .35rem;
    height: 2px; border-radius: 2px;
    background: var(--gold);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .22s var(--ease-hover);
}
.primary-nav__link:hover::after,
.primary-nav__item--submenu:hover > .primary-nav__trigger::after,
.primary-nav__trigger[aria-expanded="true"]::after,
.primary-nav__link[aria-current="page"]::after,
.primary-nav__item.is-current > .primary-nav__trigger::after { transform: scaleX(1); }
/* Hover deutlich sichtbar: goldener Text + wachsende Unterstreichung. */
.primary-nav__link:hover,
.primary-nav__link[aria-current="page"]:hover,
.primary-nav__item--submenu:hover > .primary-nav__trigger,
.primary-nav__trigger[aria-expanded="true"] { color: var(--gold); }
.primary-nav__link[aria-current="page"],
.primary-nav__item.is-current > .primary-nav__trigger { color: var(--text-strong); font-weight: 600; background: transparent; }
.primary-nav__link:focus-visible,
.primary-nav__submenu-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.primary-nav__chevron {
    width: .42rem;
    height: .42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-.12rem) rotate(45deg);
    transition: transform .18s var(--ease-hover);
}
.primary-nav__item--submenu:hover > .primary-nav__trigger .primary-nav__chevron,
.primary-nav__trigger[aria-expanded="true"] .primary-nav__chevron {
    transform: translateY(.08rem) rotate(225deg);
}
.primary-nav__submenu {
    position: absolute;
    top: calc(100% + .65rem);
    left: 50%;
    min-width: 11rem;
    list-style: none;
    margin: 0;
    padding: .35rem;
    background: #fff;
    border: 1px solid rgba(40, 28, 16, .12);
    border-radius: 14px;
    box-shadow: 0 10px 26px -16px rgba(40, 28, 16, .2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, .4rem) scale(.985);
    transform-origin: top center;
    transition: opacity .2s var(--ease-out-soft), transform .2s var(--ease-out-soft), visibility 0s linear .2s;
    visibility: hidden;
}
/* Unsichtbare Brücke zwischen Trigger und Panel (verhindert Flackern). */
.primary-nav__submenu::before {
    content: "";
    position: absolute;
    top: -.7rem; left: 0; right: 0;
    height: .7rem;
}
.primary-nav__item--submenu:hover > .primary-nav__submenu,
.primary-nav__item--submenu:focus-within > .primary-nav__submenu,
.primary-nav__item--submenu.is-open > .primary-nav__submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition: opacity .2s var(--ease-out-soft), transform .2s var(--ease-out-soft), visibility 0s linear 0s;
    visibility: visible;
}
.primary-nav__submenu-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 38px;
    padding: .5rem .65rem;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .18s var(--ease-hover), color .18s var(--ease-hover);
}
.primary-nav__submenu-icon { flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; color: var(--gold); }
.primary-nav__submenu-icon svg { width: 100%; height: 100%; }
.primary-nav__submenu-link:hover,
.primary-nav__submenu-link[aria-current="page"]:hover {
    background: var(--bg-inner);
    color: var(--text-strong);
}
.primary-nav__submenu-link[aria-current="page"] { background: var(--bg-inner); color: var(--text-strong); }

/* Primärer CTA: rechts auf Desktop (.header-cta) bzw. im Menü-Panel auf Mobil (.primary-nav__cta). */
.header-cta { justify-self: end; display: flex; align-items: center; gap: .6rem; }
.primary-nav__cta { display: none; }
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .65rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
    will-change: transform;
}
.nav-cta svg {
    width: .95rem;
    height: .95rem;
    transition: transform var(--dur-fast) var(--ease-hover);
}
.nav-cta:hover {
    background: var(--gold-hover);
    color: #fff;
    transform: translateY(-1.5px);
}
.nav-cta:hover svg { transform: translateX(3px); }
.nav-cta:active { transform: translateY(0) scale(.985); transition-duration: var(--dur-micro); }
.nav-cta:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Sekundärer CTA (z. B. „Spenden“): gleiche Form, Kontur in Navy (Sekundärfarbe). */
.nav-cta--outline {
    background: transparent;
    border-color: var(--secondary);
    color: var(--secondary);
}
.nav-cta--outline:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}
/* Dezente, sekundäre Aktion (z. B. „Abmelden“) – Text statt gefüllter Pille. */
.nav-cta--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    box-shadow: none;
}
.nav-cta--ghost:hover {
    background: transparent;
    border-color: transparent;
    color: var(--secondary);
    transform: none;
}

/* ---- Konto-Menü: EIN Avatar-Icon mit elegantem Dropdown (angemeldet) --- */
.acct-menu { position: relative; display: inline-flex; }
.acct-menu__trigger {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    background: transparent;
    color: var(--secondary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-hover),
                color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.acct-menu__trigger:hover { transform: translateY(-1.5px); }
.acct-menu__trigger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.acct-menu.is-open .acct-menu__trigger,
html:not(.js) .acct-menu:hover .acct-menu__trigger,
html:not(.js) .acct-menu:focus-within .acct-menu__trigger { background: var(--secondary); color: #fff; }
.acct-menu__avatar { width: 1.3rem; height: 1.3rem; }

/* Login-Einstieg (abgemeldet): gleiches rundes Profil-Icon wie das Konto-Menü. */
.nav-profile {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--secondary); border-radius: 50%;
    background: transparent; color: var(--secondary); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-hover),
                color var(--dur-fast) var(--ease-hover),
                transform var(--dur-fast) var(--ease-hover);
}
.nav-profile:hover { background: var(--secondary); color: #fff; transform: translateY(-1.5px); }
.nav-profile:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.nav-profile svg { width: 1.3rem; height: 1.3rem; }

/* ---- Wiederverwendbarer Seitentitel (volle Breite, hinter der Navigation) --
   Spannt von Kante zu Kante und beginnt ganz oben hinter der (auf solchen
   Seiten schwebenden) Navigation. Nur die unteren Ecken sind gerundet, oben
   bündig mit den Kanten. Großzügige obere Polsterung, damit der Titel unter der
   Navigation liegt, ohne sie zu überdecken. Kontrastierender Navy-Grund
   (themesicher via --surface-ink), große zentrierte Serifen-Überschrift.
   Titel wechselt je Seite. */
.page-title {
    position: relative;
    isolation: isolate;
    overflow: hidden;                  /* schneidet das Overlay an Kanten/Radien */
    margin: 0 0 clamp(1.75rem, 4vw, 3rem);
    /* Titel-Inhalt unter die (durch Safe-Area tiefer sitzende) Nav schieben; das
       Goldband selbst reicht von top:0 bis hinter die Statusleiste. */
    padding: calc(clamp(7rem, 5rem + 5vw, 10rem) + var(--sat)) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
    background: var(--gold);           /* Primär-Gold (Marken-Akzent) */
    border-radius: 0 0 clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px);
    text-align: center;
}
/* Marken-Motiv (overlay-icon.svg) als großes, mittiges Wasserzeichen – weiß
   eingefärbt, sehr langsam rotierend, hinter dem Text. Bei reduzierter Bewegung
   steht es still. */
.page-title::before {
    content: "";
    position: absolute; z-index: -1;
    top: 50%; left: 50%;
    height: clamp(30rem, 85vw, 72rem); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url("../images/SVG/overlay-icon.svg") center / contain no-repeat;
    filter: brightness(0) invert(1);   /* Motiv weiß einfärben */
    opacity: .07;
    pointer-events: none;
    will-change: transform;
    animation: pt-emblem 150s linear infinite;
}
@keyframes pt-emblem {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .page-title::before { animation: none; }
}
/* Das Titelband sitzt selbst ganz oben hinter der (fixierten) Nav – daher keinen
   Inhaltsabstand: das Goldband füllt den Bereich hinter der Leiste, sein eigenes
   Innenpolster hält den Titel frei. */
body.has-page-title #main { margin-top: 0; padding-top: 0; }
.page-title__heading {
    margin: 0; font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em;
    color: #fff;
}
.page-title__sub {
    margin: clamp(.7rem, 1.6vw, 1.1rem) auto 0; max-width: 46ch;
    color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55;
}
.page-title__meta {
    margin: .9rem 0 0; color: rgba(255, 255, 255, .68);
    font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
}

.acct-menu__panel {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 60;
    min-width: 12.75rem;
    padding: .4rem;
    background: var(--surface-raised);
    border: 1px solid color-mix(in srgb, var(--secondary) 12%, transparent);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 11, 11, .05), 0 14px 30px -18px rgba(11, 11, 11, .2);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.97);
    transition: opacity var(--dur-fast) var(--ease-out-soft),
                transform var(--dur-fast) var(--ease-out-soft),
                visibility 0s linear var(--dur-fast);
}
.acct-menu.is-open .acct-menu__panel,
html:not(.js) .acct-menu:hover .acct-menu__panel,
html:not(.js) .acct-menu:focus-within .acct-menu__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity var(--dur-fast) var(--ease-out-soft),
                transform var(--dur-fast) var(--ease-out-soft),
                visibility 0s;
}
.acct-menu__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .62rem .7rem;
    border-radius: 9px;
    color: var(--text-strong);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover);
}
.acct-menu__item svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--secondary); transition: color var(--dur-fast) var(--ease-hover); }
.acct-menu__item:hover { background: color-mix(in srgb, var(--secondary) 10%, var(--surface-raised)); color: var(--text-strong); }
.acct-menu__item:hover svg { color: var(--secondary); }
.acct-menu__item--logout:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface-raised)); color: var(--danger); }
.acct-menu__item--logout:hover svg { color: var(--danger); }
/* Theme-Umschalter im Konto-Menü: Button wie die Link-Einträge darstellen. */
button.acct-menu__item { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.theme-toggle__ic { display: inline-flex; }
.theme-toggle__ic--sun, .theme-toggle__label--light { display: none; }
html[data-theme="dark"] .theme-toggle__ic--moon, html[data-theme="dark"] .theme-toggle__label--dark { display: none; }
html[data-theme="dark"] .theme-toggle__ic--sun { display: inline-flex; }
html[data-theme="dark"] .theme-toggle__label--light { display: inline; }
.acct-menu__sep { height: 1px; margin: .3rem .45rem; background: color-mix(in srgb, var(--secondary) 10%, transparent); }

.nav-toggle {
    justify-self: end;
    display: none; flex-direction: column; gap: 5px; justify-content: center;
    width: 46px; height: 46px; border: 0; border-radius: 0;
    background: transparent; cursor: pointer; padding: 0;
}
.nav-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.nav-toggle span { display: block; height: 2px; width: 22px; margin-inline: auto; background: var(--text-strong); transition: var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- 6. Buttons – EIN System für die gesamte öffentliche Website -------
   Fünf Typen: Gold (primär) · Rot (destruktiv) · Gold-Outline (sekundär,
   füllt sich bei Hover) · Rot-Outline · Hellgrau (leise).
   Gleiche Form, Maße, Typografie und Zustände überall. Aliasse halten
   bestehende Klassennamen am Leben (.btn--ghost/.btn--light → Grau).
   Das Admin-CMS hat ein eigenes System und bleibt unberührt. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: var(--gold);
    color: var(--gold-ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn:hover { background: var(--gold-hover); color: #fff; }
.btn:active { transform: scale(.98); }
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled { opacity: .45; pointer-events: none; }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Gold (primär) = Standard */
.btn--gold { background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover { background: var(--gold-hover); }

/* Rot (destruktiv) */
.btn--red { background: var(--danger); color: #fff; }
.btn--red:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }

/* Navy-Outline (sekundär): füllt sich bei Hover */
.btn--outline {
    background: transparent;
    border-color: var(--secondary);
    color: var(--secondary);
}
.btn--outline:hover { background: var(--secondary); border-color: var(--secondary); color: #fff; }

/* Rot-Outline (destruktiv, sekundär) */
.btn--outline-red {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}
.btn--outline-red:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Hellgrau (leise) – Aliasse: ghost, light */
.btn--grey,
.btn--ghost,
.btn--light {
    background: var(--bg-card);
    border-color: transparent;
    color: var(--text-strong);
}
.btn--grey:hover,
.btn--ghost:hover,
.btn--light:hover { background: #ECECEA; color: var(--text-strong); }

/* Größen */
.btn--sm { min-height: 38px; padding: .5rem 1.05rem; font-size: .85rem; }
@media (max-width: 560px) { .btn--sm { min-height: 44px; } }
.btn--lg { min-height: 56px; padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---- 7. Komponenten --------------------------------------------------- */
.card {
    background: var(--bg-inner);
    border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    box-shadow: none;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.card--hover:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: none;
}
.card__icon {
    width: 50px; height: 50px; border-radius: var(--radius); display: grid; place-items: center;
    font-size: 1.35rem; background: var(--bg-inverse); color: #fff; margin-bottom: 1rem;
}
.card h3 { margin-bottom: .4rem; }

.hero {
    position: relative;
    overflow: hidden;
    color: var(--text-default);
    background: var(--bg-page);
}
.hero__inner {
    padding-block: clamp(4rem, 8vw, 7rem);
    position: relative;
    z-index: 1;
}
.hero .measure {
    margin-inline: auto;
    text-align: center;
}
.hero h1 { color: var(--text-strong); margin-bottom: 1.1rem; }
.hero p { color: var(--text-muted); }

.step { display: flex; gap: 1rem; align-items: flex-start; }
.step__num {
    flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--accent);
    color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display);
}
.section--green .step__num, .section--inverse .step__num { background: var(--accent); }

.checks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .6rem; align-items: flex-start; }
.checks li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }

.cta-band {
    background: var(--bg-inverse);
    border-radius: var(--radius);
    color: #fff;
    padding: clamp(2.4rem, 6vw, 4rem);
    text-align: center;
    box-shadow: none;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(249,246,241,.82); }

.editorial-frame {
    display: grid;
    align-content: center;
    gap: 1rem;
    min-height: 18rem;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: var(--radius);
    background: var(--bg-inner);
}
.editorial-frame--dark {
    background:
        linear-gradient(150deg, rgba(11, 11, 11, .94), rgba(28, 28, 28, .94));
    color: #fff;
}
.editorial-frame--dark p,
.editorial-frame--dark li,
.editorial-frame--dark .checks li::before { color: rgba(249, 246, 241, .82); }
.editorial-frame--dark .checks li::before { color: var(--accent-soft); }
.editorial-frame__kicker {
    color: var(--text-strong);
    font-family: var(--font-display-medium);
    font-size: 1.45rem;
    line-height: 1.25;
}
.editorial-frame--dark .editorial-frame__kicker { color: #fff; }

.media-card {
    border-radius: var(--radius); background:
        linear-gradient(150deg, rgba(11, 11, 11, .96), rgba(28, 28, 28, .96));
    aspect-ratio: 4/3; display: grid; place-items: center; color: #fff; box-shadow: none;
    font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.2rem); text-align: center; padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Suchtreffer-Hervorhebung (öffentliche Suche) */
mark { background: var(--secondary-soft); color: var(--text-strong); padding: 0 .14em; border-radius: 4px; }

/* ---- 9. Formulare ----------------------------------------------------- */
.form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; color: var(--text-strong); font-size: .95rem; }
.field .req { color: var(--accent); }
.field .hint { font-size: .82rem; color: var(--text-muted); }
.field input, .field textarea, .field select {
    font-family: inherit; font-size: 1rem; color: var(--text-strong); padding: .85rem .95rem;
    border: 1.5px solid color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--radius-sm); background: var(--bg-page); width: 100%;
    transition: border-color var(--transition), background var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: .85rem; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox { display: flex; gap: .6rem; align-items: flex-start; }
.checkbox input { width: auto; margin-top: .25rem; accent-color: var(--gold); }
.form__note { font-size: .85rem; color: var(--text-muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { margin-block: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid; font-weight: 500; }
.alert--success { background: color-mix(in srgb, var(--success) 9%, var(--bg-page)); border-color: color-mix(in srgb, var(--success) 24%, var(--bg-page)); color: var(--success); }
.alert--error   { background: color-mix(in srgb, var(--danger) 9%, var(--bg-page)); border-color: color-mix(in srgb, var(--danger) 24%, var(--bg-page)); color: var(--danger); }
.alert--info    { background: color-mix(in srgb, var(--secondary) 10%, var(--bg-page)); border-color: color-mix(in srgb, var(--secondary) 24%, var(--bg-page)); color: var(--secondary); }

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

/* ---- 10. Footer ------------------------------------------------------- */
/* Footer: helles Grau wie die Karten des Lesebereichs, ruhige Haarlinien.
   Bleibt – wie der Header – auch im Nachtmodus hell (daher feste Werte). */
.site-footer {
    --f-ink:    #ffffff;
    --f-muted:  rgba(255, 255, 255, .72);
    --f-line:   rgba(255, 255, 255, .16);
    --f-line-2: rgba(255, 255, 255, .30);
    margin-top: auto;
    background: var(--surface-ink);
    color: var(--f-muted);
}
/* Logo im dunklen Footer weiß rendern. */
.site-footer__logo { filter: brightness(0) invert(1); }
.site-footer__inner {
    padding-block: clamp(3rem, 5.5vw, 4.5rem) calc(clamp(1.75rem, 3.5vw, 2.75rem) + var(--sab));
}
/* „Nach oben“ – schwebender Icon-Button unten rechts, erscheint beim Scrollen. */
.scroll-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: calc(clamp(1rem, 3vw, 2rem) + var(--sab));
    z-index: 60;
    width: 3.1rem; height: 3.1rem;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--gold); color: #fff;
    cursor: pointer;
    box-shadow: none;
    opacity: 0; visibility: hidden;
    transform: translateY(14px) scale(.9);
    transition: opacity .35s var(--ease-out-soft), transform .35s var(--ease-out-soft), visibility .35s, background .2s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.scroll-top:hover { background: color-mix(in srgb, var(--gold) 86%, #000); transform: translateY(-3px) scale(1.05); }
.scroll-top:active { transform: translateY(-1px) scale(1); }
.scroll-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.scroll-top svg { width: 1.35rem; height: 1.35rem; transition: transform .25s var(--ease-out-soft); }
.scroll-top:hover svg { transform: translateY(-3px); }
.site-footer__main {
    display: grid;
    grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.75fr);
    align-items: start;
    gap: clamp(1.5rem, 5vw, 4.5rem);
}
.site-footer__intro {
    display: grid;
    gap: .85rem;
    max-width: 22rem;
}
.site-footer__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.site-footer__logo {
    width: clamp(145px, 14vw, 195px);
    height: auto;
    display: block;
}
.site-footer__about {
    margin: 0;
    color: var(--f-muted);
    font-size: .9rem;
    line-height: 1.55;
}
.site-footer__social {
    list-style: none;
    padding: 0;
    margin: .15rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--f-line-2);
    border-radius: 50%;
    color: var(--f-ink);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}
.site-footer__social a:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}
.site-footer__social svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}
/* „Ein Projekt von" + IMAN-Logo (Partnerhinweis). */
.site-footer__credit {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: .35rem;
    text-decoration: none;
    width: fit-content;
    transition: opacity var(--transition);
}
.site-footer__credit:hover { opacity: .82; }
.site-footer__credit-label {
    color: var(--f-muted);
    font-size: .82rem;
    letter-spacing: .01em;
}
.site-footer__credit-logo {
    height: 1.55rem;
    width: auto;
    display: block;
}
.site-footer__credit:focus-visible { outline: 2px solid var(--f-line-2); outline-offset: 4px; border-radius: 4px; }
.site-footer__content {
    display: grid;
    gap: 1rem;
}
.site-footer__routes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}
.site-footer__route {
    display: grid;
    place-items: center;
    min-height: 3.1rem;
    padding: .7rem .9rem;
    background: var(--bg-page);
    border-radius: var(--radius-button);   /* wie übrige Buttons: gerundet, nicht voll als Pille */
    color: var(--secondary);       /* Navy-Schrift auf heller Karte */
    font-weight: 700;
    font-size: .93rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
.site-footer__route--primary {
    background: var(--gold);
    color: #fff;
}
.site-footer__route--primary:hover { color: #fff; }
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2.25rem);
    padding-top: 1rem;
    border-top: 1px solid var(--f-line);
}
.site-footer__col {
    text-align: left;
}
.site-footer__heading {
    color: var(--f-ink);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .1em;
    margin-bottom: .38rem;
    text-transform: uppercase;
}
.site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .2rem;
}
.site-footer__col a {
    color: var(--f-muted);
    font-size: .88rem;
    line-height: 1.3;
    text-decoration: none;
    transition: color var(--transition);
}
.site-footer__col a:hover {
    color: var(--f-ink);
}
/* Copyright sitzt jetzt unter der Beschreibung in der Marken-Spalte. */
/* Copyright: eigene, zentrierte Zeile unten im Footer. */
.site-footer__bottom {
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--f-line);
    text-align: center;
}
.site-footer__copyright {
    margin: 0;
    color: var(--f-muted);
    font-size: .82rem;
}

/* ---- 11. Dark Mode (Lese-Nachtmodus, via Reader-Tools) ---------------- */
/* ==========================================================================
   NACHTMODUS – vollständig gestaltetes, geschichtetes Theme (kein invertiertes
   Hell-Theme). Kühle, navy-getönte Dunkelflächen statt reinem Schwarz; Tiefe
   entsteht durch HELLIGKEIT der Ebenen (L0 < L1 < L2), nicht durch Schatten.
   Gold leicht angehoben für Luminanz/Kontrast. Alle Tokens hier → jede
   Token-basierte Komponente folgt automatisch.
   ========================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Geschichtete Flächen (höher = heller). */
    --bg-page:     #0E141C;   /* L0 – Leinwand (Navy-Schwarz, nicht #000) */
    --bg-subtle:   #121A24;   /* L0.5 – ruhige Zonen */
    --bg-alt:      #121A24;   /* Paper-Sektionen → dunkler Schiefer */
    --bg-card:     #19212C;   /* L1 – Karten */
    --bg-inner:    #19212C;
    --bg-inverse:  #161E2A;   /* „inverse“ Kontrastbänder: dunkler Navy-Block (NICHT hell!) */

    /* Theme-fähige Oberflächen (Gegenstück zu :root). */
    --surface-card:   #19212C;   /* L1 – ehemals weiße Karten */
    --surface-raised: #212C39;   /* L2 – Popover/Dropdown/Modal/Sheet/Tooltip */
    --surface-sunken: #10171F;   /* eingelassene Felder (dunkler als Karte) */
    --surface-mix:    #19212C;   /* Tönungsbasis: mischt jetzt in Dunkel */
    --surface-line:   color-mix(in srgb, #fff 9%, transparent);  /* helle Haarlinie */
    --surface-ink:    #15202E;   /* Navy-Tinten-Flächen (Footer/Cookie) bleiben dunkel */

    --text-strong: #F3F5F8;   /* Überschriften (~15:1) */
    --text-default:#D6DCE5;   /* Fließtext (~11:1) */
    --text-muted:  #99A3B2;   /* gedämpft, aber ≥ 4.5:1 – kein Grau-auf-Grau */
    --text-on-dark:#F3F5F8;

    --border:      #2C3744;
    --divider:     #222C38;

    --accent:      var(--gold);
    --accent-hover:#DAD08C;
    --accent-soft: var(--gold-soft);
    --accent-tint: var(--surface-card);
    --secondary:       #4E6E99;   /* Navy-Rolle: dunkleres Stahlblau (kein helles Blau);
                                     trägt weißen Button-Text (≈5:1) und bleibt als Akzent lesbar */
    --secondary-hover: #5F80AC;
    --secondary-soft:  #5A748F;
    --secondary-tint:  var(--surface-card);

    --danger:  #E2766B;   /* Semantik angehoben für Kontrast auf Dunkel */
    --success: #86B070;
    --warning: #DDAA4C;
    --info:    #79A4D0;

    /* Gold im Nachtmodus etwas angehoben – luminöser & barrierefrei auf Dunkel. */
    --gold:       #C7BC78;
    --gold-hover: #D8CD88;
    --gold-soft:  #2A2C20;   /* dunkle Oliv-Tönung (Lesehervorhebung/Chips) */
    --gold-ink:   #1b160b;   /* dunkle Schrift auf dem helleren Nacht-Gold */

    /* Hero-Verlauf: dezent navy statt creme-gold. */
    --hero-grad-top: #18222F;
    --hero-grad: linear-gradient(180deg, #18222F 0%, #121A24 38%, var(--bg-page) 100%);

    /* Schatten tiefer (auf Dunkel kaum sichtbar – Tiefe v. a. über Ebenen). */
    --shadow-01: 0 1px 2px rgba(0,0,0,.45);
    --shadow-02: 0 3px 10px rgba(0,0,0,.5);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 18px 40px -18px rgba(0,0,0,.7);
    --shadow-lg: 0 30px 60px -22px rgba(0,0,0,.8);

    --focus-ring: 2px solid color-mix(in srgb, var(--secondary) 90%, transparent);
}
html[data-theme="dark"] body { background: transparent; color: var(--text-default); }

/* ---- Header/Navigation: dunkel & konsistent (keine helle Leiste auf Dunkel) */
html[data-theme="dark"] .site-header { background: transparent; }
/* Schwebende Pille: deckende, etwas dunklere Fläche (volle Deckkraft, kein Glas). */
html[data-theme="dark"] .site-header__inner {
    background: var(--bg-card);
    border: 1px solid var(--surface-line);
}
/* Logo auf Dunkel in Weiß einfärben (der-koran.svg ist dunkel). */
html[data-theme="dark"] .brand__logo { filter: brightness(0) invert(1); }
/* Titelband: auf Dunkel kein Gold, sondern eine dunkle, abgehobene Fläche
   (weißer Titel + Wasserzeichen bleiben gut lesbar). */
html[data-theme="dark"] .page-title { background: var(--surface-raised); }

/* Helleres Nacht-Gold als Fläche → dunkle Schrift statt Weiß (für Elemente, die
   ihr Weiß nicht über das --gold-ink-Token beziehen). Buttons (.btn/.btn--gold)
   nutzen bereits das Token. */
html[data-theme="dark"] .nav-cta:not(.nav-cta--outline),
html[data-theme="dark"] .scroll-top,
html[data-theme="dark"] .site-footer__route--primary,
html[data-theme="dark"] .navfoot__cta--gold,
html[data-theme="dark"] .qsearch__submit,
html[data-theme="dark"] .qlab__surah.is-active .qlab__surah-num,
html[data-theme="dark"] .home-support__chips button[aria-pressed="true"],
html[data-theme="dark"] .pic--fill,
html[data-theme="dark"] .plist__check,
html[data-theme="dark"] .pcheck input:checked + .pcheck__box,
html[data-theme="dark"] .dnt-banner,
html[data-theme="dark"] .dnt-banner__lead,
html[data-theme="dark"] .dnt-banner__list li,
html[data-theme="dark"] .ord-banner,
html[data-theme="dark"] .ord-banner__list li {
    color: var(--gold-ink);
}
/* Vollbreite Leiste: Innencontainer transparent – die Leiste trägt selbst bg-page. */
html[data-theme="dark"] .nav-full .site-header__inner { background: transparent; border: 0; }
html[data-theme="dark"] .site-header.is-menu-open .site-header__inner { background: var(--bg-page); }

html[data-theme="dark"] .primary-nav__link,
html[data-theme="dark"] .primary-nav__trigger,
html[data-theme="dark"] .primary-nav__submenu-link { color: var(--text-muted); }
html[data-theme="dark"] .primary-nav__link:hover,
html[data-theme="dark"] .primary-nav__link:focus-visible,
html[data-theme="dark"] .primary-nav__item--submenu:hover > .primary-nav__trigger,
html[data-theme="dark"] .primary-nav__trigger[aria-expanded="true"] { color: var(--text-strong); }
html[data-theme="dark"] .primary-nav__link[aria-current="page"],
html[data-theme="dark"] .primary-nav__item.is-current > .primary-nav__trigger { color: var(--gold); }
html[data-theme="dark"] .nav-toggle span { background: var(--text-strong); }
/* Untermenü-Panel & Hover dunkel statt hell. */
html[data-theme="dark"] .primary-nav__submenu { background: var(--surface-raised); border-color: var(--surface-line); }
html[data-theme="dark"] .primary-nav__submenu-link:hover,
html[data-theme="dark"] .primary-nav__submenu-link[aria-current="page"] { background: color-mix(in srgb, var(--secondary) 16%, transparent); color: var(--text-strong); }

/* ---- Sekundär-Buttons (grau/ghost/hell) → dunkle Fläche, helle Schrift ---- */
html[data-theme="dark"] .btn--grey,
html[data-theme="dark"] .btn--ghost,
html[data-theme="dark"] .btn--light { background: var(--surface-raised); color: var(--text-strong); border-color: var(--border); }
html[data-theme="dark"] .btn--grey:hover,
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .btn--light:hover { background: color-mix(in srgb, #fff 8%, var(--surface-raised)); }

/* ---- Formularfelder: eingelassen, lesbar, sichtbarer Fokus ---------------- */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select { background: var(--surface-sunken); border-color: var(--border); color: var(--text-default); }
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder { color: var(--text-muted); }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .field select:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 30%, transparent); }

html[data-theme="dark"] mark { background: var(--gold-soft); color: var(--text-strong); }

/* Akzent-Füll-Interaktionen (im Hellmodus Navy-Fläche + weiße Schrift): im
   Nachtmodus wird --secondary zu Hellblau → weiße Schrift unleserlich. Dunkle
   Schrift auf der hellblauen Fläche → klare, „chip"-artige Hervorhebung. */
html[data-theme="dark"] .nav-cta--outline:hover,
html[data-theme="dark"] .btn--outline:hover,
html[data-theme="dark"] .acct-menu.is-open .acct-menu__trigger,
html[data-theme="dark"] .navfoot__login,
html[data-theme="dark"] .navfoot__login:hover { color: var(--bg-page); }

/* Fokus & Auswahl auf dunklen Flächen sichtbar halten. */
.section--inverse :focus-visible { outline-color: var(--secondary-soft); }
.site-footer :focus-visible { outline-color: #fff; }
html[data-theme="dark"] ::selection { background: var(--gold); color: #0E141C; }

/* ---- 12. Responsive --------------------------------------------------- */
@media (max-width: 1120px) {
    :root { --nav-h: calc(5rem + var(--sat)); }   /* ~80 px mobile Pille */
    .site-header__inner { display: flex; justify-content: space-between; gap: 1rem; min-height: 66px; padding-block: .65rem; }
    .brand__logo { width: clamp(172px, 46vw, 200px); }
    .nav-toggle { display: flex; }
    .header-cta { display: none; }
    /* Mobiles Menü: bildschirmfüllendes Panel unter der Header-Zeile.
       Logo + Schließen-Kreuz bleiben sichtbar (z-index), Einträge groß und
       ruhig, Untermenüs als gruppierte Listen, CTA am unteren Rand. */
    .brand, .nav-toggle { position: relative; z-index: 2; }
    .primary-nav {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 1;
        display: flex;
        flex-direction: column;
        background: var(--bg-page);
        /* Seitliches Polster = Gutter + Pillen-Innenpolster, damit die Einträge auf
           exakt gleicher Breite wie Logo und Schließen-Button (innerhalb der Pille)
           beginnen und enden. */
        padding: calc(5.25rem + var(--sat)) calc(var(--gutter) + clamp(1.2rem, 2.5vw, 2rem)) max(1.25rem, var(--sab));
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0; transform: translateY(-.5rem); visibility: hidden;
        transition: opacity .42s var(--ease-out-soft), transform .42s var(--ease-out-soft), visibility 0s linear .42s;
    }
    .primary-nav.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .42s var(--ease-out-soft), transform .42s var(--ease-out-soft), visibility 0s linear 0s; }
    .primary-nav__list {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(.15rem, 1vw, .5rem);
        padding: clamp(.75rem, 4vw, 2rem) 0 0;
    }
    .primary-nav__list > li { opacity: 0; transform: translateY(-6px); }
    .primary-nav.is-open .primary-nav__list > li {
        opacity: 1;
        transform: none;
        transition: opacity .45s var(--ease-out-soft), transform .45s var(--ease-out-soft);
    }
    .primary-nav.is-open .primary-nav__list > li:nth-child(1) { transition-delay: .07s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(2) { transition-delay: .12s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(3) { transition-delay: .17s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(4) { transition-delay: .22s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(5) { transition-delay: .27s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(6) { transition-delay: .32s; }
    .primary-nav__item--submenu { display: grid; }
    .primary-nav__link {
        position: relative;
        width: 100%;
        justify-content: flex-start;
        min-height: 56px;
        padding: .5rem 0;
        border-radius: 0;
        color: var(--text-strong);
        font-family: var(--font-display-medium);
        font-size: clamp(1.65rem, 6.5vw, 2.05rem);
        font-weight: 500;
        line-height: 1.12;
        letter-spacing: -.01em;
        transition: color var(--dur-fast) var(--ease-hover), transform var(--dur-fast) var(--ease-hover);
    }
    .primary-nav__link:hover { color: var(--gold); }
    .primary-nav__link:active { transform: translateX(2px); }
    .primary-nav__link[aria-current="page"] { background: none; color: var(--gold); }
    .primary-nav__link[aria-current="page"]::before {
        content: ""; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%);
        width: 4px; height: 1.55rem; border-radius: 999px; background: var(--gold);
    }
    .primary-nav__link::after { display: none; }
    .primary-nav__chevron { width: .65rem; height: .65rem; }
    /* Untermenü: ruhige Gruppe mit Haarlinie statt Karte */
    .primary-nav__submenu {
        position: static;
        min-width: 0;
        max-height: 0;
        margin: 0;
        padding: 0 0 0 .9rem;
        border: 0;
        border-radius: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height .24s var(--ease-out-soft), opacity .18s var(--ease-out-soft);
        visibility: visible;
    }
    .primary-nav__submenu::before { display: none; }
    .primary-nav__item--submenu:hover > .primary-nav__submenu,
    .primary-nav__item--submenu:focus-within > .primary-nav__submenu {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transform: none;
    }
    .primary-nav__item--submenu.is-open > .primary-nav__submenu {
        max-height: 20rem;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        margin-bottom: .45rem;
    }
    .primary-nav__submenu-link {
        min-height: 42px;
        padding: .4rem 0;
        border-radius: 0;
        font-size: 1rem;
        color: var(--text-muted);
    }
    .primary-nav__submenu-link:hover { background: none; color: var(--text-strong); }
    .primary-nav__submenu-link[aria-current="page"] { background: none; color: var(--text-strong); }
    /* Menü-Fuß: Konto-Bereich nahe unten + primäre Aktionen ganz unten – ruhig,
       großzügig, ohne Rahmen oder Schatten. Vom Linkbereich nur durch Abstand getrennt. */
    .primary-nav__cta {
        display: flex;
        flex-direction: column;
        gap: clamp(1rem, 4vw, 1.6rem);
        margin-top: auto;
        padding-top: clamp(1.75rem, 6vw, 2.5rem);
    }
    /* Angemeldet: zwei „Karten" mit Icon-Badge – griffiger und lebendiger als
       schlichte Textzeilen, bleiben aber ruhig (Flächen-Token, keine harte Kante). */
    .navfoot__account { display: grid; gap: .6rem; }
    .navfoot__action {
        display: flex; align-items: center; gap: .85rem;
        min-height: 60px; padding: .7rem .9rem;
        border-radius: var(--radius-button);
        background: var(--surface-card);
        color: var(--text-strong); text-decoration: none;
        transition: background var(--dur-fast) var(--ease-hover), transform var(--dur-fast) var(--ease-hover);
    }
    .navfoot__action-ic {
        flex: none; display: grid; place-items: center;
        width: 2.5rem; height: 2.5rem; border-radius: 50%;
        background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold);
    }
    .navfoot__action-ic svg { width: 1.2rem; height: 1.2rem; }
    .navfoot__action-label { flex: 1; font-family: var(--font-body); font-size: 1.08rem; font-weight: 600; }
    .navfoot__action-arrow { flex: none; width: 1.05rem; height: 1.05rem; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover); }
    .navfoot__action:hover { background: color-mix(in srgb, var(--gold) 10%, var(--surface-card)); }
    .navfoot__action:hover .navfoot__action-arrow { transform: translateX(3px); color: var(--gold); }
    .navfoot__action:active { transform: scale(.99); }
    /* Abmelden: dezenter (Danger-Akzent statt Gold). */
    .navfoot__action--logout .navfoot__action-ic { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
    .navfoot__action--logout:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface-card)); }
    .navfoot__action--logout:hover .navfoot__action-arrow { color: var(--danger); }
    /* Abgemeldet: kurzer Hinweis + prominenter Anmelden-Button. */
    .navfoot__guest { display: flex; flex-direction: column; gap: .75rem; }
    .navfoot__hint { margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.5; }
    .navfoot__login {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 54px; padding: .85rem 1.25rem;
        border-radius: var(--radius-button);
        background: var(--secondary); color: #fff;
        font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; text-decoration: none;
        transition: background var(--dur-fast) var(--ease-hover), transform var(--dur-fast) var(--ease-hover);
    }
    .navfoot__login:hover { background: var(--secondary-hover); }
    .navfoot__login:active { transform: scale(.985); }
    .navfoot__login:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
    /* Primäre Aktionen: integriertes Zweier-Raster, gleiche Form/Höhe – keine losen Buttons. */
    .navfoot__primary { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .navfoot__cta {
        display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
        min-height: 54px; padding: .85rem 1rem;
        border-radius: var(--radius-button);
        font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-decoration: none;
        transition: background var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover), transform var(--dur-fast) var(--ease-hover);
    }
    /* Spenden: vollflächiges Navy – gleichwertig prominent neben „Bestellen" (Gold). */
    .navfoot__cta--soft { background: var(--secondary); color: #fff; }
    .navfoot__cta--soft:hover { background: var(--secondary-hover); }
    .navfoot__cta--gold { background: var(--gold); color: #fff; }
    .navfoot__cta--gold:hover { background: color-mix(in srgb, var(--gold) 88%, #000); }
    .navfoot__cta--gold svg { width: 1.05rem; height: 1.05rem; transition: transform var(--dur-fast) var(--ease-hover); }
    .navfoot__cta--gold:hover svg { transform: translateX(3px); }
    .navfoot__cta:active { transform: scale(.98); }
    .navfoot__cta:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--split { grid-template-columns: 1fr; }
    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .site-footer__intro {
        max-width: none;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem 1.25rem;
    }
    .site-footer__about { max-width: 38rem; }
    .site-footer__social { justify-content: flex-end; margin-top: 0; }
    .site-footer__grid { gap: 1.25rem; }
}
@media (max-width: 720px) {
    .grid--2, .grid--3, .grid--4, .grid--split, .stats { grid-template-columns: 1fr; }
    .field--row { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .75rem; }
    .site-footer__inner { padding-block: 1.4rem calc(.75rem + var(--sab)); }
    .site-footer__intro {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: .75rem;
    }
    .site-footer__about {
        display: -webkit-box;
        max-width: 32rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .site-footer__social { justify-content: center; }
    .site-footer__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__route { min-height: 3.6rem; padding: .65rem .75rem; }
    .site-footer__route small { font-size: .73rem; }
    .site-footer__route--primary {
        grid-column: 1 / -1;
        order: -1;
    }
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: .85rem;
        padding-top: .85rem;
    }
    .site-footer__col { text-align: center; }
    .site-footer__heading { font-size: .68rem; margin-bottom: .32rem; }
    .site-footer__col ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .25rem .7rem;
    }
    .site-footer__col a { font-size: .82rem; line-height: 1.25; }
}

@media (max-width: 480px) {
    :root { --gutter: 16px; }
}

/* Backstop gegen versehentliches horizontales Scrollen auf Telefonen.
   `clip` statt `hidden`: erzeugt KEINEN Scroll-Container, sticky-Header und
   In-Page-Anker bleiben funktionsfähig. Echte Überläufe bleiben strukturell behoben. */
@media (max-width: 560px) {
    html, body { overflow-x: clip; }
}

/* Mobil: schwebenden „Nach oben"-Button nicht hinter dem fixen Cookie-Hinweis verstecken. */
@media (max-width: 720px) {
    body:has(.cookie-notice:not(.is-hidden)) .scroll-top { bottom: calc(clamp(1rem, 3vw, 2rem) + 5.5rem + var(--sab)); }
}

@media (max-width: 1120px) {
    .primary-nav.is-open {
        opacity: 1 !important;
        transform: translateY(0) !important;
        visibility: visible !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .js [data-reveal], .js [data-reveal-media] { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================================
   13. Markenfarbene Bildlaufleiste + Papierkorn (global)
   =========================================================================== */

/* ---- Bildlaufleiste in Markenkupfer ------------------------------------ */
/* Eigenständiges Farbschema: Schiene = heller Olivton, Daumen = Markenkupfer.
   Die Schiene ist NICHT transparent, damit sie unabhängig vom Seitenhintergrund
   auf allen öffentlichen Seiten exakt gleich aussieht. */
/* Minimalistische Bildlaufleiste: weiße Schiene, Daumen in der Marken-Primärfarbe
   (Gold). Kantig (kein Radius), kein Abstand/Rand zwischen Daumen und Schiene –
   in allen unterstützten Browsern gleich (Chrome/Safari via ::-webkit-scrollbar,
   Firefox via scrollbar-color). */
html {
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: var(--gold) #ffffff;     /* Daumen (Marke) · Schiene (weiß) */
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #ffffff; border: 0; border-radius: 0; }
::-webkit-scrollbar-thumb { background: var(--gold); border: 0; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-hover); }
::-webkit-scrollbar-corner { background: #ffffff; }

/* ---- Papierkorn: feine, organische Textur über der ganzen Seite ---------
   Fixierter, nicht klickbarer Overlay-Layer mit sehr niedriger Deckkraft.
   „multiply" zeigt nur die dunklen Fasern → Flächen wirken wie hochwertiges
   Druckpapier, Text bleibt gestochen scharf (keine Unschärfe, nur minimale
   Tonschwankung). Liegt über allen Sektionen inkl. Navigation & Lesen. */
.paper-grain {
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
    /* Feines, einlagiges Rauschen (numOctaves 1 = keine grobe „Wolken"-Struktur),
       große 300er-Kachel gegen sichtbare Wiederholung, entsättigt. Jetzt klar
       sichtbar (~20 %): „multiply" zeigt die dunklen Fasern auf hellen Flächen
       wie bei hochwertigem Druckpapier und tönt sie minimal warm an, während
       dunkler Text dunkel (also lesbar) bleibt. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23pg)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    opacity: .05;
    mix-blend-mode: multiply;
}
html[data-theme="dark"] .paper-grain { opacity: .05; mix-blend-mode: screen; }
@media print { .paper-grain { display: none; } }