/* ==========================================================================
   ZEIT FRANKFURT — site.css
   Design-System nach der Synthese-Spec (docs/design-spec.md, §3.3–§3.7).

   Leitidee: urban laut im Teaser (Archivo, Rotpunkt, Riesenziffern),
   literarisch leise im Artikel (Source Serif 4, 68ch, ruhiger Bildrhythmus).
   Einziger Sektionstrenner: die Rotmarke. Kein Blau, kein Cyan — nirgends.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted Variable WOFF2, font-display: swap)
   Archivo: wght 100–900 + wdth 62–125 (die Weiten-Achse ersetzt eine
   zweite Sans). Source Serif 4: Variable + Italic, opsz automatisch.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-var.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-var.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-var-latin-ext.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-italic-var.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-italic-var-latin-ext.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Farbtoken (Spec §3.3) — Light „Papier" (Default) / Dark
   Regeln: Rot nie flächig hinter Fließtext; Rot als Text nur ≥600er-Gewicht
   oder ≥18px. Farbe kommt ansonsten aus der Fotografie.
   -------------------------------------------------------------------------- */

:root {
    --paper:    #FBF8F2;   /* Seitengrund */
    --card:     #FFFFFF;   /* Karten, Boxen */
    --ink:      #181410;   /* Text, Headlines */
    --ink-soft: #5D5346;   /* Vorspänne, Meta, Captions */
    --line:     #E8E0D2;   /* dezente Trenner */
    --rot:      #BE3A26;   /* Akzent: Rotpunkt, Links, Nummern, Rotmarke */
    --rot-tief: #93291A;   /* Hover/Active */
    --gold:     #C4841D;   /* nur Guide-/„Getestet"-Badges */
    --gruen:    #3F6B45;   /* nur „Grün & Freizeit"-Labels, sparsam */

    /* Typografie */
    --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    /* Fluide Skala (Spec §3.4) */
    --fs-buehne:   clamp(2.8rem, 1.6rem + 6vw, 6.75rem);   /* Hero-Headline */
    --fs-h1:       clamp(2.4rem, 1.3rem + 4.5vw, 5rem);    /* Artikel-H1 */
    --fs-h2:       clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
    --fs-vorspann: clamp(1.2rem, 1.05rem + .7vw, 1.45rem);
    --fs-text:     clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    --fs-kicker:   0.78rem;
    --fs-caption:  0.8125rem;
    --fs-ziffer:   clamp(2.5rem, 2rem + 3vw, 4.5rem);      /* Riesenziffern */

    /* Abstände & Maße */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1.25rem;
    --space-4: 2rem;
    --space-5: 3.25rem;
    --space-6: 5rem;
    --radius:  6px;
    --header-h: 64px;
    --container: 76rem;

    color-scheme: light;
}

/* Dark-Token (System-Präferenz) — [data-theme]-Override gewinnt in beide
   Richtungen (Toggle in site.js schreibt data-theme auf <html>). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:    #161210;
        --card:     #1F1A15;
        --ink:      #EDE6DA;
        --ink-soft: #A89B89;
        --line:     #2E2721;
        --rot:      #E8603F;
        --rot-tief: #C74B2F;
        --gold:     #E0A44A;
        --gruen:    #7FA981;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --paper:    #161210;
    --card:     #1F1A15;
    --ink:      #EDE6DA;
    --ink-soft: #A89B89;
    --line:     #2E2721;
    --rot:      #E8603F;
    --rot-tief: #C74B2F;
    --gold:     #E0A44A;
    --gruen:    #7FA981;
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. Reset & Grundlagen
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: var(--fs-text);
    line-height: 1.7;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--rot) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--rot); }

h1, h2, h3, h4 {
    font-family: var(--sans);
    line-height: 1.12;
    text-wrap: balance;
    margin: 0 0 var(--space-2);
}

p { margin: 0 0 1em; }

button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: color-mix(in srgb, var(--rot) 22%, transparent); }

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

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--rot); color: #fff;
    padding: 0.6rem 1rem; z-index: 100;
    font-family: var(--sans); font-weight: 640;
}
.skip-link:focus { left: 0; color: #fff; }

/* Honeypot-Feld (Formulare) — für Menschen unsichtbar */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Layout-Container */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
.container--wide { max-width: 96rem; margin-inline: auto; padding-inline: var(--space-3); }
.container--schmal { max-width: 46rem; margin-inline: auto; padding-inline: var(--space-3); }

.grid { display: grid; gap: var(--space-4) var(--space-3); }
@media (min-width: 700px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   4. Signature-Elemente (Spec §3.10)
   -------------------------------------------------------------------------- */

/* Der Rotpunkt — vor Kickern, als Schlusspunkt der Wortmarke */
.rotpunkt { color: var(--rot); }
.kicker .rotpunkt, .inkuerze .rotpunkt { font-size: 0.65em; vertical-align: 0.15em; margin-right: 0.15em; }

/* Die Rotmarke — 3rem × 4px roter Balken, einziger Trenner der Site */
.rotmarke {
    display: block;
    width: 3rem; height: 4px;
    background: var(--rot);
    margin-bottom: var(--space-2);
}

/* Kicker: Archivo 640, Versalien, ls 0.09em */
.kicker {
    font-family: var(--sans);
    font-size: var(--fs-kicker);
    font-weight: 640;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 var(--space-1);
}
.kicker a { text-decoration: none; }
.kicker a:hover { color: var(--rot); }

/* Riesenziffer: condensed Archivo in Rot */
.ziffer {
    font-family: var(--sans);
    font-size: var(--fs-ziffer);
    font-weight: 850;
    font-stretch: 70%;
    line-height: 1;
    color: var(--rot);
    font-variant-numeric: tabular-nums;
}

/* Gold-Badge (nur Guide/„Getestet") */
.badge-gold {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

/* Initialen-Avatare (keine Autorenfotos) */
.avatar {
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: var(--ink); color: var(--paper);
    font-family: var(--sans); font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
}
.avatar--32 { width: 32px; height: 32px; font-size: 0.72rem; }
.avatar--64 { width: 64px; height: 64px; font-size: 1.3rem; }

/* Sektionskopf: Rotmarke über dem Modultitel — keine Hairlines */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.section-head__title {
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
    font-weight: 800;
    font-stretch: 108%;
    letter-spacing: -0.01em;
    margin: 0;
}
.section-head__title .rotmarke { margin-bottom: 0.6rem; }
.section-head__more {
    font-family: var(--sans); font-size: 0.9rem; font-weight: 640;
    text-decoration: none; white-space: nowrap; color: var(--rot);
    padding-bottom: 0.25rem;
}
.section-head__more:hover { color: var(--rot-tief); }

/* --------------------------------------------------------------------------
   5. Header (Spec §3.5 Modul 1 + §3.7 Wow 1)
   Datumszeile + 64px-Bar mit Wortmarke, Ressorts, Suche, Schoppen-Button.
   Auf der Startseite liegt der Header transparent über der Bühne und
   bekommt ab 40px Scroll Papier + Blur (site.js setzt .is-scrolled).
   -------------------------------------------------------------------------- */

.dateline {
    margin: 0;
    text-align: center;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 640;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0.45rem var(--space-3) 0.35rem;
}

.site-header {
    position: sticky;
    top: calc(-1 * (0.72rem * 1.5 + 0.8rem)); /* Datumszeile scrollt weg, Bar bleibt */
    z-index: 50;
    background: var(--paper);
    transition: background 300ms ease;
}
.site-header__bar { height: var(--header-h); display: flex; align-items: center; }
.site-header__inner {
    width: 100%;
    display: flex; align-items: center; gap: var(--space-3);
}

/* Scrolled: Papier halbtransparent + Blur (Wow-Moment 1) */
.js .site-header.is-scrolled {
    background: color-mix(in srgb, var(--paper) 85%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--line);
}

/* Overlay-Variante (Startseite): transparent über der Bühne */
.js .site-header--overlay:not(.is-scrolled) {
    background: transparent;
}
.js .site-header--overlay:not(.is-scrolled) .dateline,
.js .site-header--overlay:not(.is-scrolled) .wortmarke,
.js .site-header--overlay:not(.is-scrolled) .hauptnav a,
.js .site-header--overlay:not(.is-scrolled) .site-header__actions { color: #fff; }
.js .site-header--overlay:not(.is-scrolled) .wortmarke .rotpunkt { color: var(--rot); }
.site-header--overlay { position: fixed; left: 0; right: 0; }
.site-header--overlay + * { margin-top: 0; }

/* Wortmarke (Sticky-Variante einzeilig): Archivo 800, wdth ~115, Versalien */
.wortmarke {
    font-family: var(--sans);
    font-weight: 800;
    font-stretch: 115%;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.wortmarke:hover { color: inherit; }
.wortmarke .rotpunkt { font-weight: 900; }

/* Ressort-Navigation */
.hauptnav { margin-left: auto; }
.hauptnav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: clamp(0.6rem, 1.4vw, 1.4rem);
}
.hauptnav a {
    font-family: var(--sans);
    font-size: 0.86rem; font-weight: 640;
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 3px solid transparent;
}
.hauptnav a:hover { border-bottom-color: var(--rot); color: inherit; }
.hauptnav a[aria-current] { border-bottom-color: var(--rot); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.header-suche, .theme-toggle {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    background: none; border: 0; border-radius: 50%;
    color: inherit;
}
.header-suche:hover, .theme-toggle:hover { color: var(--rot); }

/* Theme-Toggle: Sonnenstrahlen nur im Dark Mode zeigen (= „zurück zu hell") */
.theme-toggle__rays { opacity: 0; transition: opacity 200ms ease; }
[data-theme="dark"] .theme-toggle__rays { opacity: 1; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__rays { opacity: 1; }
}

/* Roter Newsletter-Button „Der Schoppen →" */
.btn-schoppen {
    font-family: var(--sans);
    font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff !important;
    background: var(--rot);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    transition: background 200ms ease;
}
.btn-schoppen:hover { background: var(--rot-tief); }

/* Burger (mobil, CSS-only via Checkbox) */
.nav-burger-box { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }

@media (max-width: 980px) {
    .dateline { display: none; }
    .site-header { top: 0; }
    .nav-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 40px; height: 40px; padding: 8px;
        margin-left: auto;
        flex: none; /* nie von der Flex-Zeile zusammengedrückt werden */
        cursor: pointer;
    }
    .site-header__actions { flex: none; }
    .nav-burger span {
        display: block; height: 2px; width: 100%;
        background: currentColor;
        transition: transform 250ms ease, opacity 250ms ease;
    }
    .js .site-header--overlay:not(.is-scrolled) .nav-burger { color: #fff; }
    .nav-burger-box:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger-box:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-burger-box:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-burger-box:focus-visible ~ .nav-burger { outline: 2px solid var(--rot); }

    .hauptnav {
        display: none;
        position: absolute; left: 0; right: 0; top: var(--header-h);
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        padding: var(--space-2) var(--space-3) var(--space-3);
    }
    .nav-burger-box:checked ~ .hauptnav { display: block; }
    .hauptnav ul { flex-direction: column; gap: 0; }
    .hauptnav a { display: block; padding: 0.65rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
    .hauptnav a[aria-current] { color: var(--rot); }
    .btn-schoppen { display: none; }

    /* Offenes Burger-Menü über der Bühne: Panel ist Papier, also dunkle
       Schrift erzwingen — sonst weiß auf hell (unlesbar). Fallback ohne :has. */
    .js .site-header--overlay:not(.is-scrolled) .nav-burger-box:checked ~ .hauptnav a { color: var(--ink); }
    .js .site-header--overlay:not(.is-scrolled) .nav-burger-box:checked ~ .hauptnav a[aria-current] { color: var(--rot); }
    /* Mit :has zusätzlich die ganze Bar solide schalten (Logo, Icons, X) */
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) {
        background: var(--paper);
        box-shadow: 0 1px 0 var(--line);
    }
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .dateline,
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .wortmarke,
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .hauptnav a,
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .site-header__actions,
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .nav-burger { color: var(--ink); }
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .wortmarke__img--dunkel { display: none; }
    .js .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .wortmarke__img--hell { display: block; }
    /* Dark Theme: Papier ist dunkel — dann helle Wortmarke zeigen */
    :root[data-theme="dark"] .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .wortmarke__img--hell { display: none; }
    :root[data-theme="dark"] .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .wortmarke__img--dunkel { display: block; }
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .wortmarke__img--hell { display: none; }
        :root:not([data-theme="light"]) .site-header--overlay:not(.is-scrolled):has(.nav-burger-box:checked) .wortmarke__img--dunkel { display: block; }
    }
}

/* Sehr schmale Viewports: Wortmarke verkleinern, damit die Zeile passt */
@media (max-width: 480px) {
    .wortmarke { font-size: 1.05rem; }
    .site-header__inner { gap: var(--space-2); }
    .header-suche, .theme-toggle { width: 32px; height: 32px; }
}

/* Sentinel für den Scroll-Zustand des Headers (site.js) */
.header-sentinel { position: absolute; top: 0; height: 40px; width: 1px; pointer-events: none; }

/* Rote Lesefortschritts-Linie (Artikel, Wow-Moment 4) */
.lesefortschritt {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px; z-index: 60;
    background: var(--rot);
    transform: scaleX(0);
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   6. Die Bühne (Startseiten-Hero, Spec §3.5 Modul 2 + Wow 1)
   ~92vh Lead-Story full-bleed, Scrim von unten, darunter ragt das
   Folgemodul als angeschnittene Kante in den Viewport.
   -------------------------------------------------------------------------- */

.buehne {
    position: relative;
    min-height: 92vh;
    display: flex; align-items: flex-end;
    color: #fff;
    overflow: hidden;
}
.buehne__media { position: absolute; inset: 0; }
.buehne__media img { width: 100%; height: 100%; object-fit: cover; }
.buehne::after { /* Scrim von unten + leichte Abdunklung oben (Header-Lesbarkeit) */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(12, 8, 5, 0.82) 0%, rgba(12, 8, 5, 0.35) 45%, rgba(12, 8, 5, 0.12) 65%, rgba(12, 8, 5, 0.45) 100%);
}
.buehne__inhalt {
    position: relative; z-index: 1;
    width: 100%;
    padding-top: calc(var(--header-h) + 4rem); /* nie unter den fixierten Header rutschen */
    padding-bottom: calc(6vh + var(--space-5));
}
.buehne .kicker { color: rgba(255, 255, 255, 0.85); }
.buehne__titel {
    font-size: var(--fs-buehne);
    font-weight: 800;
    font-stretch: 108%;
    line-height: 0.98;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-3);
    max-width: 18ch;
}
.buehne__titel a { text-decoration: none; color: #fff; }
.buehne__titel a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.buehne__vorspann {
    font-family: var(--serif);
    font-size: var(--fs-vorspann);
    line-height: 1.5;
    max-width: 56ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
}
.buehne__meta { font-family: var(--sans); font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); margin-top: var(--space-2); }
.buehne__meta a { color: inherit; }

/* Angeschnittene Kante: erstes Modul ragt ~6vh in die Bühne */
.buehne-anschluss {
    position: relative; z-index: 2;
    margin-top: -6vh;
    background: var(--paper);
    border-radius: 12px 12px 0 0;
    padding-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   7. Startseiten-Module (Spec §3.5)
   -------------------------------------------------------------------------- */

.modul { padding-block: var(--space-5); }
.modul--tight { padding-block: var(--space-4); }

/* 7.1 Der Kompass: Chip-Leiste mit Evergreen-Einstiegen */
.kompass { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.kompass__chip {
    font-family: var(--sans);
    font-size: 0.85rem; font-weight: 640;
    text-decoration: none;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    transition: border-color 200ms ease, color 200ms ease;
}
.kompass__chip:hover { border-color: var(--rot); color: var(--rot); }

/* 7.2 Die Woche: kuratierte Empfehlungsleiste — der typografische Ruhepunkt */
.woche {
    background: var(--card);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.woche ol { list-style: none; margin: 0; padding: 0; }
.woche li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-2);
}
.woche li + li { border-top: 1px solid var(--line); }
.woche__tag {
    font-family: var(--sans);
    font-size: 1.5rem; font-weight: 850; font-stretch: 70%;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
}
.woche__text { font-family: var(--serif); font-style: italic; font-size: 1.05rem; margin: 0; }
.woche__ort {
    font-family: var(--sans); font-style: normal;
    font-size: 0.78rem; font-weight: 640;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft);
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* 7.3 Heute in Frankfurt: 1 Bildteaser + 4 Meldungszeilen */
.heute { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .heute { grid-template-columns: 7fr 5fr; } }
.heute__meldungen { list-style: none; margin: 0; padding: 0; }
.heute__meldungen li { padding-block: var(--space-2); }
.heute__meldungen li + li { border-top: 1px solid var(--line); }
.heute__meldungen .kicker { margin-bottom: 0.15rem; }
.heute__meldungen p { margin: 0; font-size: 1rem; }
.heute__meldungen a { text-decoration: none; font-family: var(--sans); font-weight: 640; }
.heute__meldungen a:hover { color: var(--rot); }

/* 7.4 Die Frankfurter 38: horizontaler Scroll-Snap-Streifen (Wow 2) */
.f38 { overflow: hidden; }
.f38__strip {
    display: flex; gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 3rem var(--space-3) var(--space-2);
    margin-inline: calc(-1 * var(--space-3));
    scrollbar-width: thin;
    scrollbar-color: var(--rot) transparent;
}
.f38__karte {
    position: relative;
    flex: 0 0 min(78vw, 21rem);
    scroll-snap-align: start;
}
.f38__karte .ziffer {
    position: absolute;
    top: 0; left: 0.6rem;
    transform: translateY(-40%);
    z-index: 2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.f38__media {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3 / 2;
}
.f38__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 750ms ease; }
.f38__karte:hover .f38__media img { transform: scale(1.04); }
.f38__name { font-size: 1.05rem; font-weight: 800; margin: var(--space-2) 0 0.15rem; }
.f38__name a { text-decoration: none; }
.f38__name a:hover { box-shadow: inset 0 -3px 0 var(--rot); }
.f38__sub { font-size: 0.9rem; color: var(--ink-soft); margin: 0; font-style: italic; }

/* 7.5 Ein Bild von Frankfurt: full-bleed 21:9, nur Orts-Zeit-Bildzeile */
.einbild { padding-block: var(--space-5); }
.einbild figure { margin: 0; }
.einbild img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}
.einbild .bildzeile { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
.einbild .section-head { margin-bottom: var(--space-3); }

/* 7.6 Meistgelesen (Riesenziffern 1–7) + Newsletter-Box „Der Schoppen" */
.mg-nl { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .mg-nl { grid-template-columns: 7fr 5fr; } }
.meistgelesen ol { list-style: none; margin: 0; padding: 0; counter-reset: mg; }
.meistgelesen li {
    counter-increment: mg;
    display: grid;
    grid-template-columns: 3.6rem 1fr;
    gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-2);
}
.meistgelesen li + li { border-top: 1px solid var(--line); }
.meistgelesen li::before {
    content: counter(mg);
    font-family: var(--sans);
    font-size: var(--fs-ziffer);
    font-weight: 850; font-stretch: 70%;
    line-height: 0.9;
    color: var(--rot);
}
.meistgelesen h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.meistgelesen h3 a { text-decoration: none; }
.meistgelesen h3 a:hover { box-shadow: inset 0 -3px 0 var(--rot); }
.meistgelesen .kicker { margin: 0 0 0.15rem; }

.schoppen-box {
    background: var(--card);
    border-top: 4px solid var(--rot);
    border-radius: var(--radius);
    padding: var(--space-4);
    align-self: start;
}
.schoppen-box h3 { font-size: 1.5rem; font-weight: 800; font-stretch: 110%; }
.schoppen-box p { color: var(--ink-soft); font-size: 1rem; }
.schoppen-box form { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.schoppen-box input[type="email"] {
    flex: 1 1 12rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
}
.schoppen-box button {
    background: var(--rot); color: #fff;
    border: 0; border-radius: var(--radius);
    font-family: var(--sans); font-weight: 700;
    padding: 0.6rem 1.1rem;
}
.schoppen-box button:hover { background: var(--rot-tief); }
.schoppen-box .hinweis { font-size: 0.8rem; margin: var(--space-2) 0 0; }

/* 7.7 Perfekt für …: Use-Case-Kacheln */
.perfekt { display: grid; gap: var(--space-2); }
@media (min-width: 700px) { .perfekt { grid-template-columns: repeat(4, 1fr); } }
.perfekt__kachel {
    display: block;
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3);
    transition: border-color 250ms ease, transform 250ms ease;
}
.perfekt__kachel:hover { border-color: var(--rot); transform: translateY(-3px); color: inherit; }
.perfekt__kachel .kicker { color: var(--rot); }
.perfekt__kachel h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.25rem; }
.perfekt__kachel p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   8. Karten (Spec §3.5 Kartendesign)
   Bild 3:2, Radius 6px, kein Schatten. Hover: Bild scale(1.04) in 750ms,
   rote 3px-Unterstreichung der Headline.
   -------------------------------------------------------------------------- */

.karte { display: flex; flex-direction: column; }
.karte__media {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin-bottom: var(--space-2);
}
.karte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 750ms ease; }
.karte:hover .karte__media img { transform: scale(1.04); }
.karte__title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.005em; margin: 0 0 var(--space-1); }
.karte--gross .karte__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.karte__title a { text-decoration: none; }
.karte:hover .karte__title a { box-shadow: inset 0 -3px 0 var(--rot); }
.karte__excerpt { font-family: var(--serif); font-size: 0.98rem; color: var(--ink-soft); margin: 0 0 var(--space-1); }
.karte__meta { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); margin: 0; }
.karte--kompakt { padding-block: var(--space-2); }
.karte--kompakt + .karte--kompakt { border-top: 1px solid var(--line); }
.karte--kompakt .karte__title { font-size: 1.02rem; }

/* Ressort-Block-Layout: 1 groß + 3 Standard */
.ressort-block { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
    .ressort-block { grid-template-columns: 7fr 5fr; }
    .ressort-block__rest { display: flex; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   9. Artikel (Spec §3.6) — Satzspiegel mit benannten Grid-Spalten
   -------------------------------------------------------------------------- */

.artikel {
    display: grid;
    grid-template-columns:
        [full-start] minmax(1.25rem, 1fr)
        [wide-start] minmax(0, 9rem)
        [text-start] min(68ch, 100%) [text-end]
        minmax(0, 9rem) [wide-end]
        minmax(1.25rem, 1fr) [full-end];
    padding-block: var(--space-4) var(--space-6);
}
.artikel > * { grid-column: text; }
.img-wide { grid-column: wide; }
.img-full { grid-column: full; }

.breadcrumb {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-bottom: var(--space-4);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--rot); }
.breadcrumb__sep { margin-inline: 0.4rem; color: var(--line); }

/* Plakat-Einstieg (Wow 3): Kicker → 5rem-H1 → Serif-Vorspann → dann Kinobild */
.artikel__kopf { margin-bottom: var(--space-4); }
.kicker--artikel { color: var(--ink); font-size: 0.82rem; }
.artikel__titel {
    font-size: var(--fs-h1);
    font-weight: 800;
    font-stretch: 106%;
    line-height: 1.02;
    letter-spacing: -0.018em;
    margin: 0 0 var(--space-3);
}
.artikel__vorspann {
    font-family: var(--serif);
    font-size: var(--fs-vorspann);
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 var(--space-3);
    max-width: 60ch;
}
.artikel__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2) var(--space-3);
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.autor-chip { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 640; color: var(--ink); }
.autor-chip:hover { color: var(--rot); }
.share { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.share a, .share button {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line); border-radius: 50%;
    background: none; text-decoration: none;
    color: var(--ink-soft);
    transition: border-color 200ms ease, color 200ms ease;
}
.share a:hover, .share button:hover { border-color: var(--rot); color: var(--rot); }
.link-kopieren.is-copied { border-color: var(--gruen); color: var(--gruen); }

/* Hero 21:9 mit clip-path-Reveal (Wow 3, site.js setzt .is-revealed) */
.artikel__hero { margin-block: var(--space-3) var(--space-4); }
.artikel__hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.js .artikel__hero.will-reveal img { clip-path: inset(8% 4%); transition: clip-path 900ms ease-out; }
.js .artikel__hero.is-revealed img { clip-path: inset(0 0 0 0); }

.article__figure { margin: var(--space-4) 0; }
.article__figure img { width: 100%; border-radius: var(--radius); }
.artikel__hero img { border-radius: 0; }

/* Orts-Zeit-Bildzeile (Signature-Element 2) */
.bildzeile {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: var(--fs-caption);
    color: var(--ink-soft);
    padding-top: 0.6rem;
}
.artikel__hero .bildzeile { padding-inline: var(--space-3); }
.bildzeile__num { font-weight: 800; color: var(--rot); font-variant-numeric: tabular-nums; }
.bildzeile__ort { font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.bildzeile__text { font-family: var(--serif); }
.bildzeile__credit { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Hochformat 4:5, contained, Caption ab Desktop seitlich (A-Asymmetrie) */
.article__figure--portrait { grid-column: text; }
.article__figure--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 1100px) {
    .article__figure--portrait {
        grid-column: text-start / wide-end;
        display: grid;
        grid-template-columns: minmax(0, 30rem) 1fr;
        gap: var(--space-3);
        align-items: end;
    }
    .article__figure--portrait .bildzeile { display: block; padding-bottom: 0.4rem; }
    .article__figure--portrait .bildzeile > span { display: block; margin: 0 0 0.2rem; }
}

/* „In Kürze"-Box (Featured-Snippet-Futter) */
.inkuerze {
    background: var(--card);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.inkuerze__titel {
    font-family: var(--sans);
    font-size: var(--fs-kicker); font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    margin: 0 0 var(--space-1);
}
.inkuerze ul { margin: 0; padding-left: 1.1rem; }
.inkuerze li { margin-bottom: 0.35rem; font-size: 1rem; }
.inkuerze li::marker { color: var(--rot); }

/* Fließtext: 68ch, Initial im ersten Absatz, H2 als Aussagesätze */
.artikel > p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.artikel > h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    font-stretch: 106%;
    margin: var(--space-4) 0 var(--space-2);
}

/* Initial: Archivo 800 in Rot — initial-letter mit Float-Fallback */
.initial::first-letter {
    float: left;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 3.4em;
    line-height: 0.85;
    color: var(--rot);
    padding: 0.06em 0.12em 0 0;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .initial::first-letter {
        float: none;
        -webkit-initial-letter: 3;
        initial-letter: 3;
        padding: 0 0.14em 0 0;
    }
}

/* Pull-Quote: Source Serif Italic groß, Rotmarke darüber */
.pullquote {
    margin: var(--space-5) 0;
    padding: 0;
}
.pullquote p {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
    line-height: 1.4;
    margin: 0;
}
.pullquote cite { font-family: var(--sans); font-style: normal; font-size: 0.82rem; font-weight: 640; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: var(--space-2); }

/* Service-Box „Zur Sache" */
.zursache {
    background: var(--card);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    font-size: 0.98rem;
}
.zursache__kopf {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--sans);
    font-size: var(--fs-kicker); font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 var(--space-1);
}
.zursache__titel { font-family: var(--sans); font-size: 1.15rem; font-weight: 800; margin: 0 0 var(--space-2); }
.zursache dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--space-3); margin: 0; }
.zursache dt { font-family: var(--sans); font-weight: 640; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.zursache dd { margin: 0; }

/* Verdikt-Box „Einordnung der Redaktion": 4px rote Linksborte */
.verdikt {
    border-left: 4px solid var(--rot);
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    margin: var(--space-4) 0;
}
.verdikt__titel {
    font-family: var(--sans);
    font-size: var(--fs-kicker); font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    margin: 0 0 var(--space-1);
}
.verdikt p { font-family: var(--serif); }
.verdikt p:last-child { margin-bottom: 0; }

/* Ranking-Einträge im Test (Riesenziffer + Name) */
.rang { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); align-items: baseline; margin-top: var(--space-4); }
.rang .ziffer { font-size: clamp(2rem, 1.6rem + 2vw, 3.4rem); }
.rang h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.rang p { grid-column: 2; margin-top: 0.35rem; }
.rang .rang__sub { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); grid-column: 2; margin: 0; }

/* Rotes Schlusszeichen + Abspann */
.schlusszeichen { color: var(--rot); font-size: 0.8em; }
.artikel__abspann { margin-top: var(--space-4); }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.pills__label { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.pill {
    font-family: var(--sans); font-size: 0.82rem; font-weight: 640;
    background: var(--card);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 0.3rem 0.8rem;
}
.tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tag {
    font-family: var(--sans); font-size: 0.8rem;
    text-decoration: none;
    color: var(--ink-soft);
    border: 1px dashed var(--line); border-radius: 999px;
    padding: 0.25rem 0.75rem;
}
.tag:hover { color: var(--rot); border-color: var(--rot); }

/* Autor-Box */
.autor-box {
    display: flex; gap: var(--space-3);
    background: var(--card);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-5);
}
.autor-box__name { font-family: var(--sans); font-weight: 800; font-size: 1.1rem; margin: 0; }
.autor-box__name a { text-decoration: none; }
.autor-box__name a:hover { color: var(--rot); }
.autor-box__rolle { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--space-1); }
.autor-box__bio { font-size: 0.95rem; margin: 0 0 var(--space-1); }
.autor-box__link { font-family: var(--sans); font-size: 0.85rem; font-weight: 640; text-decoration: none; color: var(--rot); }

.mehr-aus { padding-block: var(--space-5); }

/* --------------------------------------------------------------------------
   10. Ressort- & Autorenseiten, Standardseiten
   -------------------------------------------------------------------------- */

.ressort-kopf { padding-block: var(--space-5) var(--space-4); }
.ressort-kopf h1 {
    font-size: clamp(2.4rem, 1.6rem + 4vw, 4.5rem);
    font-weight: 800; font-stretch: 110%;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-2);
}
.ressort-kopf__claim { font-family: var(--serif); font-size: var(--fs-vorspann); color: var(--ink-soft); max-width: 55ch; margin: 0; }
.ressort-hero { margin-bottom: var(--space-4); }
.ressort-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }

.autor-kopf { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-5) var(--space-3); flex-wrap: wrap; }
.autor-kopf .avatar { width: 96px; height: 96px; font-size: 2rem; }
.autor-kopf h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.4rem); font-weight: 800; margin: 0; }
.autor-kopf .kicker { margin: 0 0 0.3rem; }
.autor-vita { max-width: 68ch; }
.topic-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block: var(--space-3); }

/* Fließtextseiten (Impressum, Datenschutz, Redaktion …) */
.prosa { padding-block: var(--space-4) var(--space-6); }
.prosa h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); font-weight: 800; font-stretch: 108%; margin-bottom: var(--space-3); }
.prosa h2 { font-size: var(--fs-h2); font-weight: 800; margin-top: var(--space-4); }
.prosa p, .prosa li { max-width: 68ch; }
.prosa .kicker { margin-top: var(--space-4); }

/* Formulare */
.form-feld { margin-bottom: var(--space-3); }
.form-feld label { display: block; font-family: var(--sans); font-size: 0.85rem; font-weight: 640; margin-bottom: 0.35rem; }
.form-feld input, .form-feld select, .form-feld textarea {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
}
.form-feld textarea { min-height: 10rem; resize: vertical; }
.form-feld input:focus, .form-feld textarea:focus, .form-feld select:focus { outline: 2px solid var(--rot); outline-offset: 1px; }
.form-hinweis { font-size: 0.85rem; color: var(--ink-soft); }
.btn-rot {
    display: inline-block;
    background: var(--rot); color: #fff;
    border: 0; border-radius: var(--radius);
    font-family: var(--sans); font-weight: 700;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
}
.btn-rot:hover { background: var(--rot-tief); color: #fff; }
.btn-ghost {
    display: inline-block;
    background: none; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--sans); font-weight: 640;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
}
.btn-ghost:hover { border-color: var(--rot); color: var(--rot); }

.meldung {
    background: var(--card);
    border-left: 4px solid var(--gruen);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.meldung--fehler { border-left-color: var(--rot); }
.meldung p:last-child, .meldung ul:last-child { margin-bottom: 0; }

/* 404 */
.fehler-404 { text-align: center; padding-block: var(--space-6); }
.fehler-404 .ziffer { font-size: clamp(6rem, 4rem + 12vw, 14rem); display: block; }
.fehler-404 h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); }
.fehler-404 p { max-width: 46ch; margin-inline: auto; }
.fehler-404__aktionen { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   11. Footer (dunkel auf --ink auch im Light Mode) + Wortmarken-Basslinie
   -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    background: #181410;
    color: #EDE6DA;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    overflow: hidden;
}
[data-theme="dark"] .site-footer { background: #100D0A; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-footer { background: #100D0A; }
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #E8603F; }
.site-footer__grid {
    display: grid; gap: var(--space-4);
    padding-bottom: var(--space-4);
}
@media (min-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr 1.4fr; } }
.site-footer__head {
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: #A89B89;
    margin: 0 0 var(--space-2);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; font-family: var(--sans); font-size: 0.92rem; }
.site-footer__verlag { font-family: var(--sans); font-size: 0.92rem; color: #A89B89; margin: 0 0 var(--space-2); }
.site-footer__nl p { font-family: var(--serif); font-size: 0.95rem; color: #A89B89; }
.site-footer__nl form { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.site-footer__nl input[type="email"] {
    flex: 1 1 11rem;
    background: #262019;
    border: 1px solid #3A322A;
    border-radius: var(--radius);
    color: #EDE6DA;
    padding: 0.55rem 0.8rem;
}
.site-footer__nl button {
    background: #BE3A26; color: #fff;
    border: 0; border-radius: var(--radius);
    font-family: var(--sans); font-weight: 700;
    padding: 0.55rem 1rem;
}
.site-footer__nl button:hover { background: #93291A; }
.site-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
    font-family: var(--sans); font-size: 0.8rem; color: #A89B89;
    border-top: 1px solid #2E2721;
    padding-block: var(--space-3);
}
/* Footer-Brand: Fraktur-Masthead (helle Variante) links oben im Footer */
.site-footer__brandrow { margin-bottom: var(--space-4); }
.site-footer__brand { display: inline-block; }
.site-footer__logo { height: 2.6rem; width: auto; display: block; }
@media (max-width: 480px) { .site-footer__logo { height: 2.1rem; } }

/* --------------------------------------------------------------------------
   12. Motion (Spec §3.7) — kurz, weich, einmalig; alles reduced-motion-sicher
   -------------------------------------------------------------------------- */

/* Scroll-Einstieg: Karten & Breakout-Bilder steigen einmalig ein.
   Nur bei aktivem JS UND ohne Reduced-Motion wird der Startzustand
   versteckt — Inhalte sind sonst immer sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal,
    .js .artikel .article__figure.will-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 600ms ease-out, transform 600ms ease-out;
    }
    .js .reveal.is-visible,
    .js .artikel .article__figure.is-revealed {
        opacity: 1;
        transform: none;
    }
    /* Stagger im Frankfurter-38-Streifen */
    .js .f38__karte.reveal:nth-child(2) { transition-delay: 80ms; }
    .js .f38__karte.reveal:nth-child(3) { transition-delay: 160ms; }
    .js .f38__karte.reveal:nth-child(4) { transition-delay: 240ms; }
    .js .f38__karte.reveal:nth-child(5) { transition-delay: 320ms; }
}

/* Globales Sicherheitsnetz: Reduced Motion beruhigt ALLES */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .js .artikel__hero.will-reveal img { clip-path: none; }
    .lesefortschritt { display: none; }
}

/* --------------------------------------------------------------------------
   13. Druck
   -------------------------------------------------------------------------- */

@media print {
    .site-header, .site-footer, .lesefortschritt, .share, .btn-schoppen,
    .schoppen-box, .mehr-aus { display: none !important; }
    body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   14. QA-Runde 1 — Fixes & Feinschliff (Audit Fable 5 + Sol 5.6)
   -------------------------------------------------------------------------- */

/* Kompass-Chips ans Rotpunkt-System anbinden (statt generischer Grau-Pills) */
.kompass__chip .rotpunkt { color: var(--rot); font-size: 0.55rem; vertical-align: 2px; margin-right: 0.3rem; }
.kompass__chip:hover { border-color: transparent; color: var(--ink); box-shadow: inset 0 -3px 0 var(--rot); border-radius: 6px; }

/* Bühne: dezente Scroll-Einladung */
.buehne__hinweis {
    position: absolute; left: 50%; bottom: 7.5vh; transform: translateX(-50%);
    font-family: var(--sans); font-size: 0.72rem; font-weight: 640;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85); margin: 0; z-index: 2;
}
.buehne__hinweis .rotpunkt { color: var(--rot); margin-right: 0.35rem; }
@media (prefers-reduced-motion: no-preference) {
    .buehne__hinweis { animation: zf-hinweis 2.6s ease-in-out infinite; }
    @keyframes zf-hinweis { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
}

/* "Heute in Frankfurt": Datumsmarken an den Meldungen */
.heute__datum { font-weight: 400; letter-spacing: 0.04em; color: var(--ink-faint); margin-left: 0.5rem; }

/* F38 auf Desktop plakativer: breitere Karten, größere Ziffer */
@media (min-width: 981px) {
    .f38__karte { flex-basis: 23.5rem; }
    .f38__karte .ziffer { font-size: calc(var(--fs-ziffer) * 1.15); }
}

/* Bildzeilen vereinheitlicht: eine Flex-Zeile, Credit rechts, sauberer Umbruch */
.bildzeile { display: flex; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.15rem; align-items: baseline; }

/* Artikel-Hero mobil: full-bleed Kinobild statt eingerücktem Streifen */
@media (max-width: 720px) {
    .artikel__hero { margin-inline: calc(50% - 50vw); }
    .artikel__hero img { aspect-ratio: 3 / 2; }
    .artikel__hero .bildzeile { padding-inline: var(--space-3); }
}

/* Zur-Sache/Service-Boxen mobil: eine Spalte, Label als Überzeile */
@media (max-width: 640px) {
    .zursache dl { grid-template-columns: 1fr; gap: 0.1rem; }
    .zursache dt { margin-top: 0.65rem; }
    .zursache dt:first-child { margin-top: 0; }
}

/* Die Woche mobil: Tag als Inline-Marke, Ort in eigener Zeile */
@media (max-width: 640px) {
    .woche li { display: block; }
    .woche__tag { display: inline-block; font-size: 1.1rem; margin-right: 0.6rem; }
    .woche__text { display: inline; }
    .woche__ort { display: block; margin: 0.3rem 0 0; }
}

/* Autor-Boxen mobil: stapeln statt schmalem Text-Schlauch */
@media (max-width: 480px) {
    .autor-box { flex-direction: column; gap: var(--space-2); }
}

/* Fraktur-Masthead (Logo-Entscheid QA-Runde 1): Bildmarke mit Hell/Dunkel-Variante */
.wortmarke--bild { display: inline-flex; align-items: center; text-decoration: none; }
.wortmarke__img { width: auto; height: 2.4rem; }
.site-header.is-scrolled .wortmarke__img { height: 2rem; }
.wortmarke__img--dunkel { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wortmarke__img--hell { display: none; }
    :root:not([data-theme="light"]) .wortmarke__img--dunkel { display: block; }
}
[data-theme="dark"] .wortmarke__img--hell { display: none; }
[data-theme="dark"] .wortmarke__img--dunkel { display: block; }
/* Auf der transparenten Bühne (Overlay-Header) ist der Hintergrund dunkel: helle Marke zeigen */
.js .site-header--overlay:not(.is-scrolled) .wortmarke__img--hell { display: none; }
.js .site-header--overlay:not(.is-scrolled) .wortmarke__img--dunkel { display: block; }

/* Sol-Audit: Lesbarkeit von Bildzeilen/Meta/Footer + lange H1-Wörter mobil */
.bildzeile { font-size: 0.85rem; color: var(--ink-soft); }
.bildzeile__credit { font-size: 0.76rem; }
.karte__meta, .hinweis, .form-hinweis { color: var(--ink-soft); }
.site-footer, .site-footer a { font-size: 0.95rem; }
.site-footer .hinweis, .site-footer small { font-size: 0.85rem; }
.site-footer__bottom a { font-size: inherit; }
input::placeholder { color: color-mix(in srgb, var(--ink-soft) 85%, transparent); }


/* --------------------------------------------------------------------------
   15. QA-Runde 2 — Fixes
   -------------------------------------------------------------------------- */

/* Artikel-Grid unterhalb 960px: eine Spalte mit festen Gutter-Tracks.
   (min(68ch,100%) lief auf schmalen Screens über; minmax(0,68ch) ließ die
   9rem-Randspalten die Textspalte auffressen — daher expliziter Einspalter.) */
@media (max-width: 960px) {
    .artikel {
        grid-template-columns:
            [full-start] 1.25rem
            [wide-start] 0
            [text-start] minmax(0, 1fr) [text-end]
            0 [wide-end]
            1.25rem [full-end];
    }
}

/* Display-Headlines: nie Silbentrennung; lange Titel dürfen die wide-Spalte nutzen */
.buehne__titel, .artikel__titel, .karte__title { hyphens: none; }
@media (min-width: 961px) {
    .artikel__kopf { grid-column: wide; }
    .artikel__kopf .artikel__vorspann { max-width: 68ch; }
}

/* Lange Einzelwörter (z. B. „Datenschutzerklärung") nur auf Rechts-/Textseiten brechen */
@media (max-width: 480px) {
    .h1-brechbar { hyphens: auto; overflow-wrap: anywhere; }
}

/* Footer-Newsletter: sichtbares Label + AA-Placeholder auf dunkler Fläche */
.site-footer input::placeholder { color: rgba(255, 255, 255, 0.62); }
.site-footer .nl-label-sichtbar {
    display: block;
    flex-basis: 100%;
    width: 100%;
    font-family: var(--sans); font-size: 0.78rem; font-weight: 640;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.35rem;
}

/* Schoppen-Box (Startseite): sichtbares Label wie im Footer */
.schoppen-box .nl-label-sichtbar {
    display: block; width: 100%;
    font-family: var(--sans); font-size: 0.78rem; font-weight: 640;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.35rem;
}