/* =========================================================================
   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));

    /* =====================================================================
       KANONISCHE DESIGN-TOKENS (eine Quelle der Wahrheit; siehe DESIGN_SYSTEM.md)
       Alle historischen Token-Namen darunter sind ALIASE dieser Werte.
       ===================================================================== */
    --color-bg:          #F0F1F3;  /* die EINE Seitenfläche (getönt, nie reinweiß) */
    --color-surface:     #FFFFFF;  /* die EINE Erhebung: weiße Container            */
    --color-text-strong: #1B1A18;
    --color-text:        #3F3B36;
    --color-text-muted:  #6D6860;
    --color-border:      #CFC6B6;  /* der EINE Rahmen-Ton (Inputs, echte Trenner)   */
    --color-divider:     color-mix(in srgb, var(--color-border) 55%, transparent);
    --color-accent:      #958D4B;  /* Olivgold – einziger Akzent                     */
    --color-accent-soft: #ECE5D8;  /* warme Tönung (Gold-Panels, Paper-Sektionen)    */

    --bg-page:     var(--color-bg);
    --bg-subtle:   var(--color-bg);   /* gleiche Fläche für "erhöhte" Elemente */
    --bg-alt:      #F2EEE5;   /* Paper-Sektionen: Zwischenton der Akzent-Tönung */
    --bg-card:     var(--color-accent-soft); /* warme Karte (Akzent-Tönung) */
    --bg-inner:    var(--bg-card); /* Alias: eine gemeinsame Kartenfläche */
    --bg-inverse:  #0B0B0B;   /* primary dark */
    --text-strong: var(--color-text-strong);   /* Überschriften */
    --text-default:var(--color-text);          /* Fließtext */
    --text-muted:  var(--color-text-muted);    /* gedämpft */
    --text-on-dark:#FAFAF9;
    --border:      var(--color-border);
    --divider:     var(--color-divider);
    --accent:      #0B0B0B;
    --accent-hover:#1C1C1C;
    --accent-soft: var(--gold);     /* einziger öffentlicher Akzent: Gold */
    --accent-tint: var(--bg-card);
    --secondary:       #122E53;   /* Sekundär: Navy */
    --secondary-hover: #0D2340;
    --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:   var(--color-surface); /* weiße Karten (Spenden, Seiten, Reader-Flow, Account) */
    --surface-raised: var(--color-surface); /* Popover, Dropdown, Modal, Bottom-Sheet, Tooltip */
    --surface-sunken: #F1EFE9;       /* eingelassene Felder, Tracks, Eingaben */
    --surface-mix:    var(--color-surface); /* Mischbasis für color-mix(…, surface)-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:       var(--color-accent);  /* Primär: Olivgold – einziger Marken-Akzent */
    --gold-hover: #827B41;  /* Primär Hover (weiß darauf: 4.3:1) */
    --gold-soft:  #E3E1CF;  /* weiche, helle Oliv-Tönung (Lesehervorhebung) */
    --gold-ink:   #fff;     /* Schriftfarbe AUF goldener Fläche (Dunkelmodus: dunkel) */

    /* Illustrations-Töne (Buch-/Papier-Mockups, Foto-Ambiente) – KEINE UI-Akzente.
       Hierher konsolidiert, damit Seiten-CSS ausschließlich Tokens konsumiert. */
    --page-edge:   #E7E7E5;  /* Papierschnitt-Block hinter Buchcovern            */
    --scrim:       #0F1928;  /* tiefes Navy für Scrims/Foto-Verläufe             */
    --paper-sepia: #281C10;  /* warme Druck-„Tinte" der Papier-Mockups (per mix) */
    --glow:        #E3A24C;  /* warmes Ambient-Licht der Hero-Fotografie          */
    --glow-soft:   #EBB877;

    /* Typografie */
    --font-body:    'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Anzeigeschrift: Fraunces (variabel, Soft-Achse in header.php gepinnt). */
    --font-display: 'Fraunces', 'Georgia', serif;
    --font-display-medium: 'Fraunces', 'Georgia', serif;

    /* Typo-Skala – EIN modularer Maßstab, seitenweit (Rule 8).
       display = Seiten-H1/Hero (Fraunces) · section = Sektions-H2 (Fraunces).
       h1–h4 = Dokument-Basisgrößen · body/small/caption = Onest-Lauftext. */
    --fs-display: clamp(2.4rem, 5vw, 3.6rem);
    --fs-section: clamp(1.7rem, 3vw, 2.4rem);
    --fs-h1: 2.25rem;
    --fs-h2: 1.875rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.2rem;
    --fs-body: 1rem;
    --fs-small: .9rem;
    --fs-caption: .8rem;
    --lh-heading: 1.15;
    --lh-body: 1.65;

    /* ---- 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: #DAD8C1;                                   /* 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: var(--fs-display);                          /* 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 – EINE Skala, nach Elementtyp (kanonisch):
       sm = Inputs/kleine Controls · md = Buttons · lg = Karten/Panels/Bilder ·
       full = Pillen/Avatare/Kreis-Buttons. Alt-Namen sind Aliase. */
    --radius-sm:   8px;
    --radius-md:   13px;
    --radius-lg:   18px;
    --radius-full: 999px;
    --radius:    var(--radius-sm);
    --radius-xs: var(--radius-sm);
    --radius-button: var(--radius-md);
    --radius-pill:   var(--radius-full);
    --radius-xl:     var(--radius-lg);

    /* 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;

    /* 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: 400;   /* Fraunces variabel – bewusst leichter (vorher 500) */
    letter-spacing: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-h4); 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); }
/* Nur bei echtem Zeiger: auf Touch „klebt" :hover nach dem Antippen und
   würde Links dauerhaft umfärben (z. B. fast Schwarz auf Navy im Footer). */
@media (hover: hover) {
    a:hover { color: var(--accent-hover); }
}

/* Touch-Geräte: kein natives Antipp-Aufblitzen (grauer/blauer Overlay beim
   Tippen). Ergänzend entfernt main.js auf Touch-Geräten ALLE :hover-/:active-
   Regeln aus den Stylesheets – Buttons/Links ändern sich beim Tippen visuell
   überhaupt nicht. Desktop (hover-fähig) bleibt vollständig unberührt. */
@media (hover: none) {
    html, body, a, button, input, select, textarea, label, summary {
        -webkit-tap-highlight-color: transparent;
    }
}

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;
    /* Weißes Banner – folgt im Dark Mode automatisch dem Flächen-Token. */
    background: var(--surface-card);
    padding: .9rem 0 calc(.9rem + var(--sab));   /* Inhalt frei vom Home-Indicator */
    color: var(--text-default);
}
.cookie-notice.is-hidden { display: none; }
/* Link auf hellem Grund: gut lesbare Akzentfarbe. */
.cookie-notice__text a { color: var(--secondary); text-underline-offset: 2px; }
/* „Akzeptieren": Gold-Akzent. „Ablehnen": dezenter Outline-Button auf Weiß. */
.cookie-notice .btn--gold { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.cookie-notice .btn--gold:hover { background: var(--gold-hover); color: var(--gold-ink); }
.cookie-notice .btn--ghost {
    background: transparent;
    color: var(--text-default);
    border: 1px solid var(--border);
}
.cookie-notice .btn--ghost:hover { background: var(--surface-sunken); border-color: var(--text-muted); color: var(--text-strong); }
.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: var(--text-default);   /* lesbar auf hellem Banner (folgt dem Theme) */
}
.cookie-notice__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.cookie-notice .btn:focus-visible { outline: 2px solid var(--text-strong); 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: var(--radius-full);
}
/* 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: .85rem;                 /* Versalien: einen Tick kleiner + gesperrt */
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s var(--ease-hover);
}
/* Minimaler Zustand: Hover = goldener Text; Aktiv = goldener Text + kurze,
   mittige Gold-Linie (dezenter Strich statt voller Unterstreichung). */
.primary-nav__link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: .5rem;
    width: 1.1rem; height: 2px;
    border-radius: var(--radius-full);
    background: var(--gold);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .22s var(--ease-hover);
}
.primary-nav__link[aria-current="page"]::after,
.primary-nav__trigger[aria-expanded="true"]::after { transform: translateX(-50%) scaleX(1); }
.primary-nav__trigger[aria-expanded="true"] { color: var(--gold); }
/* Hover NUR bei echtem Zeiger: auf Touch „klebt" :hover nach dem Antippen
   und würde Nav-Links dauerhaft umfärben. */
@media (hover: hover) {
    .primary-nav__link:hover::after,
    .primary-nav__item--submenu:hover > .primary-nav__trigger::after { transform: translateX(-50%) scaleX(1); }
    .primary-nav__link:hover,
    .primary-nav__item--submenu:hover > .primary-nav__trigger { color: var(--gold); }
}
.primary-nav__link[aria-current="page"],
.primary-nav__item.is-current > .primary-nav__trigger { color: var(--gold); 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__trigger[aria-expanded="true"] .primary-nav__chevron {
    transform: translateY(.08rem) rotate(225deg);
}
@media (hover: hover) {
    .primary-nav__item--submenu:hover > .primary-nav__trigger .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: var(--radius-md);
    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: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;
}
@media (hover: hover) {
    .primary-nav__item--submenu:hover > .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: var(--radius-sm);
    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%; }
@media (hover: hover) {
    .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: var(--gold-ink);
    font-weight: 600;
    font-size: .82rem;                 /* Versalien: etwas kleiner + gesperrt, wie die Nav-Links */
    letter-spacing: .06em;
    text-transform: uppercase;
    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);
}
@media (hover: hover) {
    .nav-cta:hover {
        background: var(--gold-hover);
        color: var(--gold-ink);
        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); }
.nav-cta:disabled,
.nav-cta[aria-disabled="true"],
.nav-cta.is-disabled { opacity: .45; pointer-events: none; }

/* 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);
}
@media (hover: hover) {
    .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);
}
@media (hover: hover) {
    .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: var(--radius-full);
    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);
}
@media (hover: 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: var(--radius-full);
    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);
}
@media (hover: 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;
}
/* Banner-Farbregel: Transaktions-/Unterstützungsseiten (Bestellen, Partner,
   Spenden) tragen NAVY, redaktionelle/Konto-/Rechtsseiten GOLD. Die Seitenliste
   wird zentral in includes/header.php ($navyBannerPages) gepflegt und als
   Body-Klasse `banner-navy` ausgegeben – hier nur noch die Farbe.
   (Dark Mode bleibt dunkel, s. u.) */
body.banner-navy .page-title { background: var(--secondary); }
/* 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, .96); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55;
}
.page-title__meta {
    margin: .9rem 0 0; color: rgba(255, 255, 255, .85);
    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: var(--radius-md);
    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: var(--radius-sm);
    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: 600;
    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: var(--gold-ink); }
.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);
    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);
}
.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: var(--radius-full); 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;
}
.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;
    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: var(--radius-sm); }

/* ---- 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);
}
/* Fokus: gleicher weicher Ring wie im Dark Mode (Konsistenz beider Themes). */
.field input:focus, .field textarea:focus, .field select:focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--secondary); }
.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: display:none statt off-screen – Browser/Passwortmanager füllen
   ausgeblendete (display:none) Felder NICHT automatisch aus (off-screen schon,
   was legitime Nutzer fälschlich als Spam markierte). Einfache Bots, die alle
   DOM-Felder ausfüllen, werden weiterhin erkannt. */
.honeypot { display: none; }

.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(3.25rem, 6vw, 5rem) calc(clamp(2rem, 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: var(--radius-full);
    background: var(--gold); color: #fff;
    cursor: pointer;
    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: var(--gold-hover); 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); }
/* EIN Raster für Marke + vier Link-Spalten: gemeinsame Oberkante, ausgewogene
   Breiten. Die Spalten strecken sich auf Zeilenhöhe (kein align-items:start),
   damit die vertikalen Trennlinien alle gleich hoch laufen. */
.site-footer__main {
    display: grid;
    grid-template-columns: minmax(13rem, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 2.25rem clamp(1rem, 2.25vw, 1.75rem);
}
/* Vertikale Trennlinie zwischen den Link-Spalten – als Verlauf, der nach unten
   ausblendet (oben voll, unten transparent) statt einer harten Kante. Innen-
   abstand = Spaltenabstand → Linie sitzt optisch mittig. NICHT vor der ersten
   Spalte (Entdecken): zwischen Markenblock und Verzeichnis bleibt es offen. */
.site-footer__col {
    position: relative;
    padding-left: clamp(1rem, 2.25vw, 1.75rem);
}
.site-footer__col::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, var(--f-line) 55%, transparent);
}
.site-footer__col:first-of-type {
    padding-left: 0;
}
.site-footer__col:first-of-type::before {
    display: none;
}
.site-footer__intro {
    display: grid;
    gap: 1rem;
    max-width: 20rem;
}
.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: .92rem;
    line-height: 1.6;
}
/* Social-Icons: sitzen in der Meta-Zeile unten (nicht mehr im Markenblock). */
.site-footer__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 2.5rem;      /* 40 px – bequemes Touch-Ziel */
    height: 2.5rem;
    border: 1px solid var(--f-line-2);
    border-radius: var(--radius-full);
    color: var(--f-ink);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}
.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-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: var(--radius-sm); }
/* Abschlusszeile des Hauptrasters: IMAN-Credit links, Social-Icons mittig,
   Kernaktionen rechts – balanciert den Markenblock gegen die Link-Spalten aus.
   3-Spalten-Raster (1fr auto 1fr) mit expliziter Platzierung, damit die
   Social-Icons geometrisch zentriert sitzen (unabhängig von Credit-/Button-
   Breite). DOM bleibt Buttons-zuerst → mobil sauber gestapelt. */
.site-footer__band {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .9rem 1.5rem;
}
/* grid-row: 1 erzwingt EINE Zeile trotz abweichender DOM-Reihenfolge
   (Buttons, Social, Credit) – sonst schöbe der Auto-Flow sie auf drei Zeilen. */
.site-footer__band .site-footer__credit { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
.site-footer__band .site-footer__social { grid-column: 2; grid-row: 1; justify-self: center; }
.site-footer__band .site-footer__routes { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
.site-footer__routes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.site-footer__route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;               /* 44 px Touch-Ziel */
    padding: .6rem 1rem;
    border: 1px solid var(--f-line-2);
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--f-ink);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-hover), border-color var(--dur-fast) var(--ease-hover);
}
.site-footer__route--primary {
    background: var(--gold);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}
.site-footer__col {
    text-align: left;
}
.site-footer__heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--f-ink);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .1em;
    margin-bottom: .85rem;
    text-transform: uppercase;
}
.site-footer__heading svg {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--gold);
}
.site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
}
.site-footer__col a {
    display: flex;
    align-items: center;
    justify-content: space-between;    /* Label links, Pfeil am rechten Spaltenrand */
    gap: .75rem;
    padding-block: .1rem;              /* mit Listenabstand ≈ 24-px-Zeilenraster */
    color: var(--f-muted);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--transition);
}
/* Pfeil (Chevron) rechts an JEDEM Link – auch „Alle 114 Suren" (trägt keinen
   eigenen Text-Pfeil mehr, damit alle Links gleich aussehen). */
.site-footer__col a::after {
    content: "";
    flex: none;
    width: .38rem;
    height: .38rem;
    border-right: 1.6px solid currentColor;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: .65;
}
.site-footer__all { color: var(--f-ink); font-weight: 500; }
/* Hover NUR auf Geräten mit echtem Zeiger (Touch bleibt komplett ohne Hover).
   Jede Regel setzt die Farbe EXPLIZIT: das globale a:hover (Zeile ~231,
   --accent-hover = fast Schwarz) gewann sonst per Spezifität und färbte
   weiße Button-Schrift dunkel auf dunklem Grund. */
@media (hover: hover) {
    .site-footer__route:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: var(--f-ink); }
    .site-footer__route--primary:hover { background: var(--gold-hover); border-color: transparent; color: #fff; }
    .site-footer__col a:hover { color: var(--f-ink); }
    .site-footer__all:hover { color: var(--f-ink); }
    .site-footer__social a:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: var(--f-ink); }
    .site-footer__credit:hover { opacity: .82; }
}
/* Meta-Zeile: © und Theme-Schalter als EIN linksbündiges Cluster auf der
   gemeinsamen Achse – die rechte untere Ecke bleibt für den schwebenden
   „Nach oben"-Button frei (vorher kollidierten Schalter und Button dort). */
.site-footer__bottom {
    margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
    padding-top: clamp(1.1rem, 2vw, 1.4rem);
    border-top: 1px solid var(--f-line);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .85rem 1rem;
    flex-wrap: wrap;
}
.site-footer__copyright {
    margin: 0;
    color: var(--f-muted);
    font-size: .84rem;
}
/* Desktop: Theme-Schalter an den rechten Rand der Meta-Zeile. */
.site-footer__bottom .footer-theme { margin-left: auto; }

/* Hell/Dunkel-Schalter im Footer – sichtbar für ALLE Besucher (an-/abgemeldet).
   Icon-Umschalter mit „Tag/Nacht"-Animation: beim Wechsel dreht die Sonne aus
   und der Mond herein (Blende + Drehung + Skalierung). Beim Hover leuchtet ein
   goldener Ring auf und die Sonne dreht ihre Strahlen. */
.footer-theme {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: #fff;
    border-radius: var(--radius-full);
    transition: border-color .3s var(--ease-out-soft), transform .35s var(--ease-out-soft);
    -webkit-tap-highlight-color: transparent;
}
.footer-theme:hover {
    border-color: color-mix(in srgb, #fff 45%, transparent);
    transform: scale(1.06);
}
.footer-theme:active { transform: scale(.92); }
.footer-theme:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Beide Icons gestapelt (gleiche Rasterzelle); der Wechsel blendet per Drehung. */
.footer-theme__icon {
    grid-area: 1 / 1;
    position: relative; z-index: 1;
    width: 1.5rem; height: 1.5rem;
    color: inherit;
    transition: opacity .4s ease, transform .55s cubic-bezier(.5, 1.6, .4, 1);
}
/* Hellmodus: Sonne da, Mond klein/gedreht versteckt. */
.footer-theme__icon--sun  { opacity: 1; transform: rotate(0deg)   scale(1); }
.footer-theme__icon--moon { opacity: 0; transform: rotate(-80deg) scale(.35); }
/* Dunkelmodus: Mond da, Sonne herausgedreht. */
html[data-theme="dark"] .footer-theme__icon--sun  { opacity: 0; transform: rotate(80deg) scale(.35); }
html[data-theme="dark"] .footer-theme__icon--moon { opacity: 1; transform: rotate(0deg)  scale(1); }
/* Hover-Spielerei: Sonne dreht ihre Strahlen, Mond neigt sich sanft. */
.footer-theme:hover .footer-theme__icon--sun  { transform: rotate(48deg) scale(1.05); }
html[data-theme="dark"] .footer-theme:hover .footer-theme__icon--moon { transform: rotate(-16deg) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .footer-theme, .footer-theme::before, .footer-theme__icon { transition: none; }
    .footer-theme:hover, .footer-theme:hover .footer-theme__icon--sun { transform: none; }
}
/* Mobil: Meta-Zeile bleibt auf der linken Achse – © links, Schalter rechts. */
@media (max-width: 560px) {
    .site-footer__bottom { margin-top: 1.75rem; padding-top: 1rem; }
}

/* ---- 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;

    /* Dunkle Palette (3 Flächen-Ebenen, wie im Hellmodus geschichtet) – insgesamt
       etwas tiefer abgestimmt:
       Seite #121B25 < Sekundärfläche #15212C < erhöhte Fläche/Karte #1D2933.
       Nur Gold als Akzent; alle Text-Kontraste ≥ WCAG AA (dunkler = höher). */
    /* Kanonische Tokens – dunkles Gegenstück (vollständige Parität zu :root).
       Alle Alt-Namen folgen als Aliase automatisch. */
    --color-bg:          #121B25;  /* die EINE dunkle Seitenfläche */
    --color-surface:     #1D2933;  /* die EINE erhöhte Fläche (Karten) */
    --color-text-strong: #FFFFFF;
    --color-text:        #FFFFFF;
    --color-text-muted:  #8899AC;  /* ≥ 4.5:1 auf allen Flächen */
    --color-border:      #28333D;
    --color-divider:     color-mix(in srgb, var(--color-border) 70%, transparent);
    --color-accent-soft: #1D2933;  /* warme Panels tragen im Dunkeln die Kartenfläche */

    --bg-page:     var(--color-bg);   /* L0 – Seitenhintergrund */
    --bg-subtle:   #15212C;   /* L0.5 – ruhige/alternierende Zonen */
    --bg-alt:      #15212C;   /* alternierende Sektionen (Sekundärfläche) */
    --bg-card:     var(--color-surface);   /* L1 – Karten (erhöhte Fläche) */
    --bg-inner:    #15212C;
    --bg-inverse:  #15212C;   /* Kontrastbänder: Sekundärfläche */

    /* Theme-fähige Oberflächen (Gegenstück zu :root). */
    --surface-card:   var(--color-surface);   /* L1 – Karten heben sich von der Seite ab */
    --surface-raised: var(--color-surface);   /* L2 – Popover/Dropdown/Modal/Sheet (per Rahmen abgesetzt) */
    --surface-sunken: #15212C;   /* eingelassene Felder (unter der Karte) */
    --surface-mix:    #15212C;   /* Tönungsbasis */
    --surface-line:   #242F38;   /* feine Haarlinie */
    --surface-ink:    #15212C;   /* Tinten-Flächen (Footer/Cookie) */

    --text-strong: var(--color-text-strong);   /* Überschriften */
    --text-default:var(--color-text);          /* Primärtext */
    --text-muted:  var(--color-text-muted);    /* Sekundärtext */
    --text-on-dark:#FFFFFF;

    --border:      var(--color-border);
    --divider:     var(--color-divider);

    --accent:      var(--gold);
    --accent-hover:#A69C55;
    --accent-soft: var(--gold-soft);
    --accent-tint: var(--surface-card);
    /* Dunkelmodus: „Sekundär" ist neutrales Weiß statt Stahlblau – so bleibt Gold
       der einzige Farbakzent. Sekundär-Buttons/Umrisse/Links tragen jetzt Weiß;
       Weiß-auf-Weiß-Fälle (Hero-/About-Karten-Buttons) werden lokal auf dunkle
       Schrift gestellt. */
    --secondary:       #FFFFFF;
    --secondary-hover: #FFFFFF;
    --secondary-soft:  #AEB9C6;   /* dezentes Hellgrau für Eyebrows/weiche Flächen */
    --secondary-tint:  var(--surface-card);

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

    /* Marken-Gold identisch zum Hellmodus (#958D4B). Auf Gold-Flächen trägt der
       Nachtmodus – wie der Hellmodus – WEISSE Schrift (Marken-Look, ~3.4:1). */
    --gold:       #958D4B;
    --gold-hover: #A69C55;   /* etwas heller für Hover auf Dunkel */
    --gold-soft:  #202417;   /* dunkle Oliv-Tönung (Lesehervorhebung/Chips) */
    --gold-ink:   #FFFFFF;   /* weiße Schrift auf Gold (wie Hellmodus) */

    /* Illustrations-Töne im Nachtmodus (Papierschnitt gedämpft, Glow entsättigt). */
    --page-edge:   #1C2227;
    --glow:        #6E89A8;
    --glow-soft:   #6E89A8;

    /* Hero-Verlauf: dezent navy auf den neuen (tieferen) Flächen. */
    --hero-grad-top: #15212C;
    --hero-grad: linear-gradient(180deg, #15212C 0%, #15212C 38%, var(--bg-page) 100%);

    /* Schatten auch auf Dunkel entfernt – Tiefe über Flächen/Rahmen/Abstände. */

    --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: eine Spur unter dem Seitengrund für dezente Abhebung, rahmenlos. */
html[data-theme="dark"] .site-header__inner {
    background: #0D141C;
    border: 0;
}
/* Logo auf Dunkel in Weiß einfärben (derkoran-logo.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); }
/* Rotierendes Marken-Wasserzeichen im Dunkelmodus dezenter (weiß auf dunkel wirkt sonst kräftiger). */
html[data-theme="dark"] .page-title::before { opacity: .04; }

/* 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-impact,
html[data-theme="dark"] .ord-product {
    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:focus-visible,
html[data-theme="dark"] .primary-nav__trigger[aria-expanded="true"] { color: var(--text-strong); }
@media (hover: hover) {
    html[data-theme="dark"] .primary-nav__link:hover,
    html[data-theme="dark"] .primary-nav__item--submenu:hover > .primary-nav__trigger { 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[aria-current="page"] { background: color-mix(in srgb, var(--secondary) 16%, transparent); color: var(--text-strong); }
@media (hover: hover) {
    html[data-theme="dark"] .primary-nav__submenu-link:hover { 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); outline: var(--focus-ring); outline-offset: var(--focus-offset); }

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 ist --secondary Weiß → weiße Schrift wäre unsichtbar. Daher dunkle
   Schrift auf der (nun weißen) Fläche → klare, „chip"-artige Hervorhebung. */
html[data-theme="dark"] .btn--outline:hover,
html[data-theme="dark"] .acct-menu.is-open .acct-menu__trigger { color: var(--bg-page); }
@media (hover: hover) {
    html[data-theme="dark"] .nav-cta--outline:hover,
    html[data-theme="dark"] .nav-profile:hover { color: var(--bg-page); }
}
/* Menü-CTAs (Anmelden/Spenden): --secondary ist im Dunkelmodus Weiß – die
   Fläche rendert aber Navy. Daher fest Navy-Fläche + weiße Schrift in BEIDEN
   Themes, sonst entstünde dunkle Schrift auf Navy (unlesbar). */
html[data-theme="dark"] .navfoot__login,
html[data-theme="dark"] .navfoot__cta--soft { background: #122E53; color: #fff; }

/* 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: var(--gold-ink); }

/* ---- 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;
        text-transform: none;          /* Versalien nur am Desktop */
        transition: color var(--dur-fast) var(--ease-hover), transform var(--dur-fast) var(--ease-hover);
    }
    /* Touch: kein Hover im mobilen Menü. Der „Sticky-Hover" nach dem Antippen
       färbte die Einträge sonst um – Farben bleiben wie im Ruhezustand; nur der
       aktive Eintrag bleibt gold (über die [aria-current]-Regel weiter unten). */
    .primary-nav__link:hover,
    .primary-nav__item--submenu:hover > .primary-nav__trigger { color: var(--text-strong); }
    .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: var(--radius-full); 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-muted); }
    .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: var(--radius-full);
        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); }
    /* Hover NUR bei echtem Zeiger – auf Touch klebt :hover nach dem Tippen. */
    @media (hover: 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); }
    @media (hover: hover) {
        .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: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--gold { background: var(--gold); color: #fff; }
    .navfoot__cta--gold svg { width: 1.05rem; height: 1.05rem; }
    .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; }
    /* Tablet: Markenblock über volle Breite, darunter die vier Link-Spalten
       als 2×2-Raster. Trennlinie nur vor der jeweils rechten Spalte – die
       linke Spalte jeder Zeile beginnt an der Rasterkante. */
    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.25rem clamp(1.5rem, 4vw, 3rem);
    }
    .site-footer__intro {
        grid-column: 1 / -1;
        max-width: 26rem;
    }
    .site-footer__col:nth-of-type(odd) { padding-left: 0; }
    .site-footer__col:nth-of-type(odd)::before { display: none; }
}
@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; }
    /* Telefon: zentrierte Komposition. Die Aktions-/Credit-Zeile rückt direkt
       hinter den Markenblock (Buttons gestapelt: „Bestellen" volle Breite,
       darunter die zwei ruhigen Wege; Credit mittig darunter). */
    .site-footer__inner { padding-block: 2.5rem calc(1.25rem + var(--sab)); }
    /* Telefon: die vier Link-Spalten bleiben ein 2×2-Raster mit mittiger
       Trennlinie je Zeile (odd ohne, even mit Verlaufslinie – wie im
       Tablet-Block); nur enger gesetzt. Pfeile in schmalen Spalten weglassen. */
    .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem clamp(.9rem, 4vw, 1.5rem); }
    .site-footer__col { order: 1; text-align: left; }
    .site-footer__col a::after { display: none; }
    /* Mobil: 3-Spalten-Raster auflösen → zentrierter Stapel in DOM-Reihenfolge
       (Buttons, Social-Icons, Credit). Grid-Platzierung/justify-self greifen im
       Flex-Kontext nicht mehr. */
    .site-footer__band {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
    }
    .site-footer__band .site-footer__routes { margin-inline: auto; }
    .site-footer__routes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
        width: 100%;
        max-width: 32rem;
    }
    .site-footer__route--primary {
        grid-column: 1 / -1;
        order: -1;
    }
    .site-footer__intro {
        max-width: 32rem;
        gap: .85rem;
        margin-inline: auto;
        justify-items: center;
        text-align: center;
    }
    .site-footer__heading { justify-content: flex-start; margin-bottom: .7rem; }
    .site-footer__col ul { display: grid; gap: .5rem; }
    .site-footer__col a { font-size: .9rem; line-height: 1.35; }
    /* Meta-Zeile mobil: nur noch © + Theme-Schalter – zentriert nebeneinander
       (die Social-Icons sitzen jetzt in der Aktionszeile darüber). */
    .site-footer__bottom { justify-content: center; }
    .site-footer__bottom .footer-theme { margin-left: 0; }
}

@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; }
/* Dunkelmodus: Schiene folgt der dunklen Fläche (statt Weiß); Daumen bleibt Gold. */
html[data-theme="dark"] { scrollbar-color: var(--gold) var(--surface-sunken); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-sunken); }
html[data-theme="dark"] ::-webkit-scrollbar-corner { background: var(--surface-sunken); }

/* ---- 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; } }