/* ==========================================================================
   roland-volme.de — Design-System & Stylesheet
   --------------------------------------------------------------------------
   EINE Datei, keine externen Ressourcen (keine Fonts/CDNs — DSGVO, file://).
   Gliederung:
     1. Design-Tokens (Light)          8. Artikelkarte + Grid
     2. Design-Tokens (Dark)           9. Kategorie-Badges
     3. Reset & Basis                 10. Artikel-Detail
     4. Typografie                    11. Timeline
     5. Layout-Container              12. Urteils-Karte
     6. Header & Navigation           13. Boxen (Quellen/Disclaimer/Todo)
     7. Hero & Event-Banner           14. Newsletter-Formular
                                      15. Figure/Attribution
                                      16. Footer
                                      17. Buttons & Utilities
                                      18. Print
   Konventionen: BEM-artig, deutsch (.karte, .karte__titel, .karte--gross).
   Breakpoints: 640 px (Tablet), 960 px (Desktop). Mobile-first.
   Doku: docs/design-spec.md
   ========================================================================== */

/* ==========================================================================
   1. DESIGN-TOKENS — Light (Standard)
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Farbwelt: ruhiges Blaugrau + tiefes Petrol (Wasser-Anspielung).
         Bewusst KEIN Signalrot — seriöse Dokumentation, keine Alarmoptik. */
  --farbe-papier:        #fbfbf9;  /* Seitenhintergrund (warmes Off-White) */
  --farbe-flaeche:       #f1f3f4;  /* Karten-/Box-Hintergründe */
  --farbe-flaeche-2:     #e7ebed;  /* tiefere Fläche (z. B. Footer-Vorstufe) */
  --farbe-tinte:         #1b2733;  /* Fließtext (dunkles Blaugrau, ~13:1) */
  --farbe-tinte-2:       #48555f;  /* Sekundärtext, Datumszeilen (~6.4:1) */
  --farbe-linie:         #d7dde1;  /* Rahmen, Trennlinien */
  --farbe-akzent:        #0f5e6e;  /* tiefes Petrol — Links, CTAs (~7.3:1) */
  --farbe-akzent-dunkel: #0a4652;  /* Hover/Active */
  --farbe-akzent-hell:   #e3eff1;  /* Petrol-Tint für Hintergründe */
  --farbe-dunkel:        #16222c;  /* Header/Footer/Banner-Grund */
  --farbe-dunkel-2:      #1f2f3c;  /* hellere Stufe auf Dunkelgrund */
  --farbe-hell-auf-dunkel: #f2f5f7;
  --farbe-gedeckt-auf-dunkel: #aebcc6; /* Sekundärtext auf Dunkelgrund (AA) */

  /* ---- Statusfarben (sparsam; Warnung = Bernstein, kein Rot) */
  --farbe-warnung-bg:    #fdf3dd;
  --farbe-warnung-rand:  #b98a1e;
  --farbe-warnung-text:  #6e4e07;
  --farbe-ok-text:       #1d5a2a;
  --farbe-ok-bg:         #ddefdf;

  /* ---- Kategoriefarben (7 Kategorien, je Vorder-/Hintergrund, WCAG AA) */
  --kat-chronik-fg:      #0b4854;  --kat-chronik-bg:      #d9edf1;
  --kat-fall-fg:         #1d3f7a;  --kat-fall-bg:         #dde6f7;
  --kat-recht-fg:        #46337a;  --kat-recht-bg:        #e7e1f4;
  --kat-versicherung-fg: #6e4a08;  --kat-versicherung-bg: #f7ead2;
  --kat-stadt-fg:        #1d5a2a;  --kat-stadt-bg:        #ddefdf;
  --kat-betroffene-fg:   #7a2b3c;  --kat-betroffene-bg:   #f6e1e5;
  --kat-eigenes-fg:      #3c4650;  --kat-eigenes-bg:      #e7eaec;

  /* ---- Typografie: reine System-Stacks (keine Webfonts) */
  --schrift-headline: "Charter", "Bitstream Charter", "Sitka Text", Cambria,
                      Georgia, "Times New Roman", serif;
  --schrift-text:     system-ui, -apple-system, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;
  --schrift-mono:     ui-monospace, "Cascadia Mono", Consolas, "SF Mono",
                      Menlo, monospace;

  /* Typo-Skala (fluid, ~1.2er-Schritte) */
  --text-xs:   0.8125rem;                      /* 13px — Mikrotypo, Quellen */
  --text-s:    0.875rem;                       /* 14px — Datumszeilen, Badges */
  --text-m:    1.0625rem;                      /* 17px — Fließtext */
  --text-l:    1.25rem;                        /* 20px — Teaser, H4 */
  --text-xl:   clamp(1.375rem, 1.2rem + 1vw, 1.75rem);   /* H3/H2 klein */
  --text-2xl:  clamp(1.625rem, 1.35rem + 1.6vw, 2.25rem);/* H2 */
  --text-3xl:  clamp(2rem, 1.5rem + 2.6vw, 3rem);        /* H1 */
  --zeilenhoehe-text: 1.65;
  --zeilenhoehe-eng:  1.25;

  /* ---- Spacing-Skala (4er-Raster) */
  --raum-1: 0.25rem;   /*  4px */
  --raum-2: 0.5rem;    /*  8px */
  --raum-3: 0.75rem;   /* 12px */
  --raum-4: 1rem;      /* 16px */
  --raum-5: 1.5rem;    /* 24px */
  --raum-6: 2rem;      /* 32px */
  --raum-7: 3rem;      /* 48px */
  --raum-8: 4.5rem;    /* 72px */

  /* ---- Layout & Form */
  --breite-inhalt: 71.25rem;   /* 1140px max. Inhaltsbreite */
  --breite-lesen:  72ch;       /* Artikel-Lesespalte */
  --radius-s: 4px;
  --radius-m: 8px;
  --schatten-karte: 0 1px 2px rgba(22, 34, 44, 0.08),
                    0 2px 8px rgba(22, 34, 44, 0.06);
  --schatten-karte-hover: 0 2px 4px rgba(22, 34, 44, 0.1),
                          0 8px 24px rgba(22, 34, 44, 0.12);
  --fokus-ring: 2px solid var(--farbe-akzent);
}

/* ==========================================================================
   2. DESIGN-TOKENS — Dark (prefers-color-scheme)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-papier:        #131a21;
    --farbe-flaeche:       #1b242d;
    --farbe-flaeche-2:     #212c37;
    --farbe-tinte:         #e6ebef;
    --farbe-tinte-2:       #a5b1bb;
    --farbe-linie:         #2e3a45;
    --farbe-akzent:        #6cc0d0;  /* helles Petrol auf Dunkel (~7.6:1) */
    --farbe-akzent-dunkel: #93d2de;  /* "Hover" = heller auf Dunkelgrund */
    --farbe-akzent-hell:   #17333b;
    --farbe-dunkel:        #0d1319;  /* Header bleibt dunkelste Ebene */
    --farbe-dunkel-2:      #182430;
    --farbe-hell-auf-dunkel: #f2f5f7;
    --farbe-gedeckt-auf-dunkel: #a5b1bb;

    --farbe-warnung-bg:    #33290f;
    --farbe-warnung-rand:  #caa23f;
    --farbe-warnung-text:  #ecd9a4;
    --farbe-ok-text:       #a9d9b2;
    --farbe-ok-bg:         #1a2f1f;

    --kat-chronik-fg:      #a8dbe4;  --kat-chronik-bg:      #123b45;
    --kat-fall-fg:         #b3c7ef;  --kat-fall-bg:         #1c2f52;
    --kat-recht-fg:        #cabfec;  --kat-recht-bg:        #322a52;
    --kat-versicherung-fg: #e8ca8e;  --kat-versicherung-bg: #40320e;
    --kat-stadt-fg:        #a9d9b2;  --kat-stadt-bg:        #1a3a22;
    --kat-betroffene-fg:   #e9bcc6;  --kat-betroffene-bg:   #46202a;
    --kat-eigenes-fg:      #c2ccd4;  --kat-eigenes-bg:      #2b353e;

    --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.4),
                      0 2px 8px rgba(0, 0, 0, 0.3);
    --schatten-karte-hover: 0 2px 4px rgba(0, 0, 0, 0.5),
                            0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

/* ==========================================================================
   3. RESET & BASIS
   ========================================================================== */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: var(--text-m);
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-tinte);
  background: var(--farbe-papier);
  text-rendering: optimizeLegibility;
}

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

/* Anker-Sprungziele (z. B. urteile.html#bgh-…) nicht unterm Sticky-Header */
:target {
  scroll-margin-top: 5.5rem;
}

/* ---- Fokus: sichtbar, konsistent, nur bei Tastatur (focus-visible) */
:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

::selection {
  background: var(--farbe-akzent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   4. TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--schrift-headline);
  line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-tinte);
  margin: 0 0 var(--raum-4);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); letter-spacing: -0.015em; }
h2 { font-size: var(--text-2xl); margin-top: var(--raum-7); }
h3 { font-size: var(--text-xl);  margin-top: var(--raum-6); }
h4 { font-size: var(--text-l);   margin-top: var(--raum-5); }

h1:first-child, h2:first-child, h3:first-child, h4:first-child {
  margin-top: 0;
}

p {
  margin: 0 0 var(--raum-4);
}

a {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--farbe-akzent-dunkel);
  text-decoration-thickness: 2px;
}

strong { font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--farbe-linie);
  margin: var(--raum-6) 0;
}

blockquote {
  margin: var(--raum-5) 0;
  padding: var(--raum-2) var(--raum-5);
  border-left: 3px solid var(--farbe-akzent);
  font-family: var(--schrift-headline);
  font-size: var(--text-l);
  color: var(--farbe-tinte);
}

blockquote p:last-child { margin-bottom: 0; }

code, kbd, .mono {
  font-family: var(--schrift-mono);
  font-size: 0.925em;
}

/* ---- Mikrotypografie: Datumszeile (überall identisch verwenden) */
.datumszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  font-size: var(--text-s);
  color: var(--farbe-tinte-2);
  letter-spacing: 0.01em;
}

.datumszeile time {
  font-variant-numeric: tabular-nums;
}

/* Trennpunkt zwischen Metadaten:  <span class="meta-trenner"></span> */
.meta-trenner::before {
  content: "·";
  color: var(--farbe-tinte-2);
}

/* Hochgestellter Quellenverweis [1] → Anker auf die Quellen-Box */
.quellen-verweis {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  padding: 0 0.15em;
}

/* ==========================================================================
   5. LAYOUT-CONTAINER
   ========================================================================== */

/* Zentrierter Inhaltscontainer, max. 1140px */
.inhalt {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--raum-4);
}

@media (min-width: 640px) {
  .inhalt { padding-inline: var(--raum-5); }
}

/* Schmale Lesespalte für Artikel/Fließtext-Seiten (~72ch) */
.lesespalte {
  max-width: var(--breite-lesen);
  margin-inline: auto;
}

/* Vertikaler Seitenrhythmus */
.abschnitt {
  padding-block: var(--raum-7);
}

.abschnitt--flaeche {
  background: var(--farbe-flaeche);
}

/* Abschnittskopf mit Titel + optionalem "Alle ansehen"-Link */
.abschnitt__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-3);
  margin-bottom: var(--raum-5);
}

.abschnitt__kopf h2 { margin: 0; }

/* ==========================================================================
   6. HEADER & NAVIGATION
   --------------------------------------------------------------------------
   - Sticky, dunkler Grund (beide Farbschemata) = Wiedererkennung.
   - Aktiver Nav-Punkt rein per CSS: <body data-nav="chronik"> +
     <a data-nav-link="chronik"> (kein JS nötig).
   - Mobil: Burger-Button. OHNE JS bleibt die Nav sichtbar (untereinander),
     der Button ist versteckt. main.js setzt <html class="js"> und toggelt
     [data-nav-offen] auf .site-header + aria-expanded auf dem Button.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--farbe-dunkel);
  color: var(--farbe-hell-auf-dunkel);
  border-bottom: 3px solid var(--farbe-akzent);
}

.site-header__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2) var(--raum-5);
  padding-block: var(--raum-3);
}

/* Wortmarke + Unterzeile */
.wortmarke {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 1.15;
}

.wortmarke:hover { color: inherit; }

.wortmarke__name {
  font-family: var(--schrift-headline);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wortmarke__name::first-letter { color: inherit; }

.wortmarke__claim {
  display: block;
  font-family: var(--schrift-text);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--farbe-gedeckt-auf-dunkel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Burger-Button: nur mit JS + mobil sichtbar */
.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--farbe-gedeckt-auf-dunkel);
  border-radius: var(--radius-s);
  color: var(--farbe-hell-auf-dunkel);
  font: inherit;
  font-size: var(--text-s);
  padding: var(--raum-2) var(--raum-3);
  cursor: pointer;
  align-items: center;
  gap: var(--raum-2);
}

.nav-toggle:hover {
  border-color: var(--farbe-hell-auf-dunkel);
}

.nav-toggle svg {
  width: 1.1em;
  height: 1.1em;
}

/* Hauptnavigation */
.site-nav {
  flex-basis: 100%;
}

.site-nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--raum-2);
}

.site-nav a {
  display: block;
  padding: var(--raum-2) var(--raum-3);
  color: var(--farbe-hell-auf-dunkel);
  text-decoration: none;
  font-size: var(--text-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-s);
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: #fff;
  background: var(--farbe-dunkel-2);
}

/* Aktiver Nav-Punkt: body[data-nav] ↔ a[data-nav-link] */
body[data-nav="start"]         .site-nav a[data-nav-link="start"],
body[data-nav="chronik"]       .site-nav a[data-nav-link="chronik"],
body[data-nav="fall"]          .site-nav a[data-nav-link="fall"],
body[data-nav="urteile"]       .site-nav a[data-nav-link="urteile"],
body[data-nav="presse"]        .site-nav a[data-nav-link="presse"],
body[data-nav="stadt"]         .site-nav a[data-nav-link="stadt"],
body[data-nav="veranstaltung"] .site-nav a[data-nav-link="veranstaltung"] {
  border-bottom-color: var(--farbe-akzent);
  color: #fff;
  font-weight: 650;
}

/* --- Mobil (< 640px): Nav einklappen, nur wenn JS vorhanden --- */
@media (max-width: 639.98px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    display: none;
    padding-bottom: var(--raum-3);
  }

  .js .site-header[data-nav-offen] .site-nav {
    display: block;
  }

  .site-nav__liste {
    flex-direction: column;
    gap: var(--raum-1);
  }

  .site-nav a {
    padding: var(--raum-3);
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
  }

  body[data-nav="start"]         .site-nav a[data-nav-link="start"],
  body[data-nav="chronik"]       .site-nav a[data-nav-link="chronik"],
  body[data-nav="fall"]          .site-nav a[data-nav-link="fall"],
  body[data-nav="urteile"]       .site-nav a[data-nav-link="urteile"],
  body[data-nav="presse"]        .site-nav a[data-nav-link="presse"],
  body[data-nav="stadt"]         .site-nav a[data-nav-link="stadt"],
  body[data-nav="veranstaltung"] .site-nav a[data-nav-link="veranstaltung"] {
    border-bottom: none;
    border-left-color: var(--farbe-akzent);
    background: var(--farbe-dunkel-2);
  }
}

/* --- Ab 960px: einzeilig, Nav rechts neben der Wortmarke --- */
@media (min-width: 960px) {
  .site-nav { flex-basis: auto; }
}

/* ==========================================================================
   7. HERO & EVENT-BANNER
   ========================================================================== */

/* Hero (Startseite): Claim + Transparenzhinweis */
.hero {
  padding-block: var(--raum-7);
  border-bottom: 1px solid var(--farbe-linie);
}

.hero__dachzeile {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe-akzent);
  font-weight: 650;
  margin-bottom: var(--raum-3);
}

.hero h1 {
  max-width: 22ch;
  margin-bottom: var(--raum-4);
}

.hero__einleitung {
  font-size: var(--text-l);
  color: var(--farbe-tinte-2);
  max-width: 60ch;
  margin-bottom: var(--raum-4);
}

.hero__transparenz {
  font-size: var(--text-s);
  color: var(--farbe-tinte-2);
  max-width: 70ch;
  padding-top: var(--raum-3);
  border-top: 1px solid var(--farbe-linie);
}

/* Event-Banner: volle Breite, dunkler Petrolgrund, Datum groß */
.event-banner {
  background: linear-gradient(135deg, var(--farbe-dunkel) 0%, #0d3a44 100%);
  color: var(--farbe-hell-auf-dunkel);
}

.event-banner__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-4) var(--raum-6);
  padding-block: var(--raum-5);
}

.event-banner__datum {
  font-family: var(--schrift-headline);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  padding-right: var(--raum-6);
  border-right: 2px solid rgba(255, 255, 255, 0.25);
}

.event-banner__datum small {
  display: block;
  font-family: var(--schrift-text);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--farbe-gedeckt-auf-dunkel);
  margin-bottom: var(--raum-1);
}

.event-banner__text {
  flex: 1 1 20rem;
}

.event-banner__titel {
  font-family: var(--schrift-headline);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--raum-1);
  color: #fff;
}

.event-banner__details {
  margin: 0;
  font-size: var(--text-s);
  color: var(--farbe-gedeckt-auf-dunkel);
}

/* Schmale Variante für Rubrikseiten */
.event-banner--schmal .event-banner__innen {
  padding-block: var(--raum-3);
}

.event-banner--schmal .event-banner__datum {
  font-size: var(--text-l);
  border-right-width: 1px;
  padding-right: var(--raum-4);
}

.event-banner--schmal .event-banner__titel {
  font-size: var(--text-m);
}

@media (max-width: 639.98px) {
  .event-banner__datum {
    border-right: none;
    padding-right: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    padding-bottom: var(--raum-2);
    flex-basis: 100%;
  }
}

/* ==========================================================================
   8. ARTIKELKARTE + GRID
   --------------------------------------------------------------------------
   Ganze Karte klickbar per Stretched-Link auf dem Titel-<a> —
   KEINE verschachtelten <a> in der Karte (Badge/Quellen dann ohne Link).
   ========================================================================== */

.karten-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-5);
}

@media (min-width: 640px) {
  .karten-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .karten-grid { grid-template-columns: repeat(3, 1fr); }
}

.karte {
  position: relative;               /* Bezug für Stretched-Link */
  display: flex;
  flex-direction: column;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.karte:hover {
  box-shadow: var(--schatten-karte-hover);
  transform: translateY(-2px);
}

/* Fokusring auf der ganzen Karte, wenn der Stretched-Link fokussiert ist */
.karte:has(.karte__link:focus-visible) {
  outline: var(--fokus-ring);
  outline-offset: 2px;
}

.karte__bild {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-bottom: 1px solid var(--farbe-linie);
}

.karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-4);
  flex: 1;
}

.karte__titel {
  font-size: var(--text-l);
  margin: 0;
}

.karte__link {
  color: inherit;
  text-decoration: none;
}

.karte__link::after {           /* Stretched-Link über die ganze Karte */
  content: "";
  position: absolute;
  inset: 0;
}

.karte__link:hover { color: var(--farbe-akzent); }

.karte__teaser {
  margin: 0;
  color: var(--farbe-tinte-2);
  font-size: var(--text-s);
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* Teaser auf 2 Zeilen kappen */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.karte__weiter {
  margin-top: auto;               /* "Weiterlesen" ans Kartenende */
  padding-top: var(--raum-2);
  font-size: var(--text-s);
  font-weight: 650;
  color: var(--farbe-akzent);
}

/* Aufmacher-Variante: volle Grid-Breite, größere Typo */
.karte--gross {
  grid-column: 1 / -1;
}

.karte--gross .karte__titel { font-size: var(--text-2xl); }

.karte--gross .karte__teaser {
  font-size: var(--text-m);
  -webkit-line-clamp: 3;
}

@media (min-width: 640px) {
  .karte--gross {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .karte--gross .karte__bild {
    height: 100%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--farbe-linie);
    order: 1;
  }

  .karte--gross .karte__inhalt {
    order: 2;
    padding: var(--raum-5);
    justify-content: center;
  }
}

/* ==========================================================================
   9. KATEGORIE-BADGES (7 Kategorien, Pill-Form)
   --------------------------------------------------------------------------
   Klassen ↔ data-kategorie-Werte (für den optionalen JS-Filter):
     chronik · fall · recht · versicherung · stadt · betroffene · eigenes
   ========================================================================== */

.badge {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.375em 0.75em;
  border-radius: 999px;
  background: var(--kat-eigenes-bg);
  color: var(--kat-eigenes-fg);
  white-space: nowrap;
}

.badge--chronik      { background: var(--kat-chronik-bg);      color: var(--kat-chronik-fg); }
.badge--fall         { background: var(--kat-fall-bg);         color: var(--kat-fall-fg); }
.badge--recht        { background: var(--kat-recht-bg);        color: var(--kat-recht-fg); }
.badge--versicherung { background: var(--kat-versicherung-bg); color: var(--kat-versicherung-fg); }
.badge--stadt        { background: var(--kat-stadt-bg);        color: var(--kat-stadt-fg); }
.badge--betroffene   { background: var(--kat-betroffene-bg);   color: var(--kat-betroffene-fg); }
.badge--eigenes      { background: var(--kat-eigenes-bg);      color: var(--kat-eigenes-fg); }

/* Status-Badges (Verfahrens-Timeline, neutraler als Kategorien) */
.status {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1;
  padding: 0.3em 0.65em;
  border-radius: var(--radius-s);
  border: 1px solid currentColor;
}

.status--erledigt    { color: var(--farbe-ok-text);      background: var(--farbe-ok-bg);      border-color: transparent; }
.status--anstehend   { color: var(--kat-fall-fg);        background: var(--kat-fall-bg);      border-color: transparent; }
.status--platzhalter { color: var(--farbe-warnung-text); background: var(--farbe-warnung-bg); border-color: transparent; }

/* ==========================================================================
   10. ARTIKEL-DETAIL
   ========================================================================== */

.artikel {
  padding-block: var(--raum-7);
}

.artikel__kopf {
  max-width: var(--breite-lesen);
  margin-inline: auto;
  margin-bottom: var(--raum-6);
}

.artikel__kopf .badge {
  margin-bottom: var(--raum-3);
}

.artikel__kopf h1 {
  margin-bottom: var(--raum-3);
}

.artikel__kopf .datumszeile {
  margin-bottom: var(--raum-4);
}

/* Teaser-/Lead-Absatz: fett, größer */
.artikel__teaser {
  font-size: var(--text-l);
  font-weight: 650;
  line-height: 1.5;
  color: var(--farbe-tinte);
}

.artikel__inhalt {
  max-width: var(--breite-lesen);
  margin-inline: auto;
}

.artikel__inhalt > h2 { font-size: var(--text-xl); }
.artikel__inhalt > h3 { font-size: var(--text-l); }

.artikel__inhalt ul,
.artikel__inhalt ol {
  padding-left: 1.4em;
  margin: 0 0 var(--raum-4);
}

.artikel__inhalt li {
  margin-bottom: var(--raum-2);
}

/* Fuß: Zurück-Link */
.artikel__fuss {
  max-width: var(--breite-lesen);
  margin-inline: auto;
  margin-top: var(--raum-6);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--text-s);
}

/* ==========================================================================
   11. TIMELINE (Chronik + Verfahrens-Variante)
   ========================================================================== */

.timeline {
  list-style: none;
  margin: var(--raum-6) 0;
  padding: 0;
  position: relative;
}

.timeline::before {                 /* durchgehende Linie */
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.4375rem;
  width: 2px;
  background: var(--farbe-linie);
}

.timeline__eintrag {
  position: relative;
  padding: 0 0 var(--raum-6) var(--raum-6);
}

.timeline__eintrag:last-child { padding-bottom: 0; }

.timeline__eintrag::before {        /* Marker-Punkt */
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--farbe-akzent);
  border: 3px solid var(--farbe-papier);
  box-shadow: 0 0 0 2px var(--farbe-akzent);
}

.timeline__datum {
  display: block;
  font-size: var(--text-s);
  font-weight: 650;
  color: var(--farbe-akzent);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--raum-1);
}

.timeline__titel {
  font-size: var(--text-l);
  margin: 0 0 var(--raum-2);
}

.timeline__text {
  margin: 0;
  color: var(--farbe-tinte);
}

.timeline__text + .timeline__text { margin-top: var(--raum-2); }

/* Verfahrens-Variante: Status-Badge neben dem Datum, gedeckte Marker
   für Platzhalter-Stationen */
.timeline--verfahren .timeline__datum {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
}

.timeline--verfahren .timeline__eintrag--offen::before {
  background: var(--farbe-papier);
  box-shadow: 0 0 0 2px var(--farbe-tinte-2);
}

.timeline--verfahren .timeline__eintrag--offen .timeline__datum {
  color: var(--farbe-tinte-2);
}

/* ==========================================================================
   12. URTEILS-KARTE
   ========================================================================== */

.urteil-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-left: 4px solid var(--farbe-akzent);
  border-radius: var(--radius-m);
  padding: var(--raum-5);
  margin-block: var(--raum-5);
}

/* Kopf als Definitionsliste: Gericht / Az. / Datum / Thema */
.urteil-karte__kopf {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--raum-1) var(--raum-4);
  margin: 0 0 var(--raum-4);
  font-size: var(--text-s);
}

.urteil-karte__kopf dt {
  font-weight: 650;
  color: var(--farbe-tinte-2);
}

.urteil-karte__kopf dd {
  margin: 0;
}

.urteil-karte__az {
  font-family: var(--schrift-mono);
  font-size: 0.95em;
  background: var(--farbe-flaeche-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-s);
}

/* Kernsatz: hervorgehobene Paraphrase/Blockzitat */
.urteil-karte__kernsatz {
  margin: 0 0 var(--raum-4);
  padding: var(--raum-3) var(--raum-4);
  border-left: 3px solid var(--farbe-akzent);
  background: var(--farbe-akzent-hell);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-family: var(--schrift-headline);
  font-size: var(--text-l);
  line-height: 1.4;
}

.urteil-karte__einordnung {
  font-size: var(--text-m);
}

.urteil-karte__fundstellen {
  margin: var(--raum-3) 0 0;
  padding-top: var(--raum-3);
  border-top: 1px dashed var(--farbe-linie);
  font-size: var(--text-s);
  color: var(--farbe-tinte-2);
}

/* Sonderzustand: Aktenzeichen nicht publiziert */
.urteil-karte--az-offen {
  border-left-color: var(--farbe-warnung-rand);
}

.urteil-karte__az-hinweis {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--farbe-warnung-text);
  background: var(--farbe-warnung-bg);
  border-radius: var(--radius-s);
  padding: 0.3em 0.6em;
  margin-bottom: var(--raum-3);
}

/* ==========================================================================
   13. BOXEN: Quellen / Disclaimer / Todo
   ========================================================================== */

/* --- Quellen-Box: <aside> am Artikel-/Abschnittsende --- */
.quellen-box {
  max-width: var(--breite-lesen);
  margin: var(--raum-6) auto 0;
  padding: var(--raum-4) var(--raum-5);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  font-size: var(--text-s);
  color: var(--farbe-tinte-2);
}

.quellen-box__titel {
  font-family: var(--schrift-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-tinte);
  margin: 0 0 var(--raum-3);
}

.quellen-box ol {
  margin: 0;
  padding-left: 1.4em;
}

.quellen-box li {
  margin-bottom: var(--raum-2);
}

.quellen-box li:target {
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-s);
}

.quellen-box a {
  overflow-wrap: anywhere;          /* lange URLs umbrechen */
}

/* Extern-Icon (Inline-SVG im Markup); Farbe folgt dem Link */
.extern-icon {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.2em;
  vertical-align: baseline;
  fill: currentColor;
}

/* --- Disclaimer-Box: laufendes Verfahren, seriös aber deutlich --- */
.disclaimer-box {
  max-width: var(--breite-lesen);
  margin: var(--raum-5) auto;
  padding: var(--raum-4) var(--raum-5);
  background: var(--farbe-akzent-hell);
  border: 1px solid var(--farbe-akzent);
  border-left-width: 4px;
  border-radius: var(--radius-m);
  font-size: var(--text-s);
}

.disclaimer-box__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-akzent);
  margin-bottom: var(--raum-2);
}

@media (prefers-color-scheme: dark) {
  .disclaimer-box__label { color: var(--farbe-akzent); }
}

.disclaimer-box p {
  margin: 0;
}

.disclaimer-box p + p { margin-top: var(--raum-2); }

/* --- Todo-Box: sichtbarer Platzhalter (Impressum, Verfahrensdetails) --- */
.todo-box {
  max-width: var(--breite-lesen);
  margin: var(--raum-5) auto;
  padding: var(--raum-4) var(--raum-5);
  background: var(--farbe-warnung-bg);
  border: 2px dashed var(--farbe-warnung-rand);
  border-radius: var(--radius-m);
  color: var(--farbe-warnung-text);
  font-size: var(--text-s);
}

.todo-box__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--raum-2);
}

.todo-box p { margin: 0; }

/* ==========================================================================
   14. NEWSLETTER-FORMULAR (UI-only im Auslieferungszustand)
   ========================================================================== */

.newsletter-form {
  max-width: 34rem;
}

.newsletter-form__feldzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
}

.newsletter-form label {
  display: block;
  font-size: var(--text-s);
  font-weight: 650;
  margin-bottom: var(--raum-1);
}

.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
  flex: 1 1 14rem;
  width: 100%;
  font: inherit;
  padding: var(--raum-3) var(--raum-4);
  color: var(--farbe-tinte);
  background: var(--farbe-papier);
  border: 1px solid var(--farbe-tinte-2);
  border-radius: var(--radius-s);
}

.newsletter-form input[type="email"]:focus-visible,
.newsletter-form input[type="text"]:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: 1px;
  border-color: var(--farbe-akzent);
}

/* Einwilligung: Checkbox + Text */
.newsletter-form__einwilligung {
  display: flex;
  gap: var(--raum-2);
  align-items: flex-start;
  font-size: var(--text-s);
  color: var(--farbe-tinte-2);
  margin-bottom: var(--raum-4);
}

.newsletter-form__einwilligung input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: var(--farbe-akzent);
  flex-shrink: 0;
}

/* Hinweis nach Submit (JS blendet [hidden] aus); role="status" im Markup */
.newsletter-form__hinweis {
  padding: var(--raum-3) var(--raum-4);
  background: var(--farbe-akzent-hell);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
}

.newsletter-form__hinweis[hidden] { display: none; }

/* ==========================================================================
   15. FIGURE / BILD MIT ATTRIBUTION
   ========================================================================== */

.bild {
  margin: var(--raum-6) auto;
  max-width: var(--breite-lesen);
}

/* Große Aufmacherbilder dürfen die Lesespalte sprengen */
.bild--breit {
  max-width: var(--breite-inhalt);
}

.bild img {
  width: 100%;
  border-radius: var(--radius-m);
  border: 1px solid var(--farbe-linie);
}

.bild figcaption {
  margin-top: var(--raum-2);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--farbe-tinte-2);
}

/* Zeile 1: Beschreibung — Zeile 2: Attribution (Lizenz-Mikrotypo) */
.bild__beschreibung {
  display: block;
}

.bild__attribution {
  display: block;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   16. FOOTER (3 Spalten: Rubriken / Rechtliches / Transparenz)
   ========================================================================== */

.site-footer {
  margin-top: var(--raum-8);
  background: var(--farbe-dunkel);
  color: var(--farbe-gedeckt-auf-dunkel);
  border-top: 3px solid var(--farbe-akzent);
  font-size: var(--text-s);
}

.site-footer__spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-6);
  padding-block: var(--raum-7) var(--raum-6);
}

@media (min-width: 640px) {
  .site-footer__spalten { grid-template-columns: repeat(3, 1fr); }
}

.site-footer h2 {
  font-family: var(--schrift-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-hell-auf-dunkel);
  margin: 0 0 var(--raum-3);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: var(--raum-2);
}

.site-footer a {
  color: var(--farbe-hell-auf-dunkel);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__transparenz p {
  margin: 0 0 var(--raum-3);
}

.site-footer__unterzeile {
  border-top: 1px solid var(--farbe-dunkel-2);
  padding-block: var(--raum-4);
  font-size: var(--text-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  justify-content: space-between;
}

/* ==========================================================================
   17. BUTTONS & UTILITIES
   ========================================================================== */

.button {
  display: inline-block;
  font: inherit;
  font-size: var(--text-s);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: var(--farbe-akzent);
  border: 2px solid var(--farbe-akzent);
  border-radius: var(--radius-s);
  padding: var(--raum-3) var(--raum-5);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button:hover {
  background: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  /* Auf Dunkelgrund: Akzent ist hell → dunkle Schrift für Kontrast */
  .button {
    color: #0d1319;
  }
  .button:hover { color: #0d1319; }
}

/* Sekundär: Outline auf hellem Grund */
.button--sekundaer {
  background: transparent;
  color: var(--farbe-akzent);
}

.button--sekundaer:hover {
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
}

/* Heller Button für dunkle Flächen (Event-Banner) */
.button--hell {
  background: #fff;
  border-color: #fff;
  color: var(--farbe-dunkel);
}

.button--hell:hover {
  background: var(--farbe-hell-auf-dunkel);
  border-color: var(--farbe-hell-auf-dunkel);
  color: var(--farbe-dunkel);
}

/* Skip-Link: erster Fokus-Halt jeder Seite */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--farbe-akzent);
  color: #fff;
  padding: var(--raum-3) var(--raum-4);
  border-radius: 0 0 var(--radius-s) 0;
  text-decoration: none;
  font-weight: 650;
}

.skip-link:focus-visible {
  left: 0;
  outline-offset: -2px;
}

/* Nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   17b. FLUT-SLIDER (Startseite, oben im Sichtbereich)
   --------------------------------------------------------------------------
   Progressive enhancement: ohne JS ist der Slider eine horizontal
   scrollbare Bildleiste (scroll-snap); JS blendet Pfeile/Punkte ein
   und ergänzt Autoplay (nicht bei prefers-reduced-motion).
   ========================================================================== */

.flut-slider {
  position: relative;
  background: var(--farbe-dunkel);
}

.flut-slider__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.flut-slider__viewport::-webkit-scrollbar { display: none; }

.flut-slider__viewport:focus-visible {
  outline: var(--fokus-ring);
  outline-offset: -2px;
}

.flut-slider__slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  height: clamp(300px, 46vh, 440px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Unscharfe, abgedunkelte Füllung links/rechts (gleiches Bild als
   Hintergrund, per --slide-bg inline am <figure> gesetzt) */
.flut-slider__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.5) saturate(0.85);
  transform: scale(1.12); /* Blur-Ränder aus dem Sichtbereich schieben */
}

.flut-slider__slide img {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
}

.flut-slider__slide figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4.5rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(10, 16, 22, 0) 0%,
                                      rgba(10, 16, 22, 0.55) 45%,
                                      rgba(10, 16, 22, 0.88) 100%);
  color: var(--farbe-hell-auf-dunkel);
  font-family: var(--schrift-text);
  font-size: var(--text-s);
  line-height: var(--zeilenhoehe-eng);
}

.flut-slider__slide figcaption > span,
.flut-slider__slide figcaption > small {
  display: block;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
}

.flut-slider__datum {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-gedeckt-auf-dunkel);
  margin-bottom: 0.25rem;
}

.flut-slider__text {
  font-family: var(--schrift-headline);
  font-size: var(--text-l);
  font-weight: 600;
  text-wrap: balance;
}

.flut-slider__credit {
  margin-top: 0.4rem;
  font-size: var(--text-xs);
  color: var(--farbe-gedeckt-auf-dunkel);
}

.flut-slider__credit a {
  color: inherit;
  text-decoration: underline;
}

.flut-slider__credit a:hover { color: var(--farbe-hell-auf-dunkel); }

/* Pfeile (nur mit JS sichtbar — [hidden] wird von main.js entfernt) */
.flut-slider__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 16, 22, 0.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease;
}

.flut-slider__pfeil:hover { background: rgba(10, 16, 22, 0.85); }

.flut-slider__pfeil:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.flut-slider__pfeil--zurueck { left: 0.75rem; }
.flut-slider__pfeil--weiter  { right: 0.75rem; }

/* Punkte-Navigation */
.flut-slider__punkte {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.flut-slider__punkt {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.flut-slider__punkt[aria-current="true"] { background: #fff; }

.flut-slider__punkt:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 44rem) {
  .flut-slider__slide { height: clamp(240px, 38vh, 320px); }
  .flut-slider__text { font-size: var(--text-m); }
  .flut-slider__pfeil { display: none; } /* mobil: wischen */
}

/* ==========================================================================
   18. PRINT (Urteile & Dossier druckbar)
   ========================================================================== */

@media print {
  :root {
    --farbe-papier: #fff;
    --farbe-tinte: #000;
    --farbe-tinte-2: #333;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  /* Navigation, Banner, Formulare, Buttons drucken nicht */
  .site-header .site-nav,
  .nav-toggle,
  .event-banner,
  .flut-slider,
  .newsletter-form,
  .skip-link,
  .button,
  .karte__weiter {
    display: none !important;
  }

  .site-header {
    position: static;
    background: none;
    color: #000;
    border-bottom: 2pt solid #000;
  }

  .wortmarke__claim { color: #333; }

  .site-footer {
    background: none;
    color: #333;
    border-top: 1pt solid #000;
  }

  .site-footer a { color: #333; }

  a {
    color: #000;
  }

  /* URLs in Quellen-Box & Fundstellen ausdrucken */
  .quellen-box a[href^="http"]::after,
  .urteil-karte__fundstellen a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  .karte,
  .urteil-karte,
  .quellen-box,
  .disclaimer-box,
  .todo-box,
  .timeline__eintrag,
  .bild {
    break-inside: avoid;
    box-shadow: none;
  }

  .urteil-karte,
  .quellen-box,
  .disclaimer-box {
    border: 1pt solid #666;
    background: none;
  }

  .todo-box {
    border: 1pt dashed #666;
    background: none;
    color: #333;
  }

  .urteil-karte__kernsatz {
    background: none;
    border-left: 2pt solid #000;
  }

  .badge,
  .status {
    border: 0.5pt solid #000;
    background: none !important;
    color: #000 !important;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
  }
}