/* ============================================================
   PrepperGuide — site.css
   Portiert aus design-handoff styles-v2-base.css + styles-v2-sections.css
   (Design «Einsatzzentrale»). Branding «PrepperGuide» (Wortmarke in den Views).
   Selbst gehostete Fonts (§17.4, DSG) statt Google-CDN.
   Aufbau: 1) @font-face  2) Base/Tokens/Rail/SOS/Hero  3) Sektionen/Karten/Footer
           4) Print-Stylesheet (Notfallkarte)
   ============================================================ */

/* ===== 1) FONTS (selbst gehostet, latin + latin-ext) ===== */
/* Big Shoulders Display 600 — latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders Display 600 — latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Big Shoulders Display 700 — latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders Display 700 — latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Big Shoulders Display 800 — latin-ext */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Big Shoulders Display 800 — latin */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 400 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 500 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 600 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrik-angepasste Fallback-Schrift für 'Big Shoulders Display' (CLS-Fix).
   Big Shoulders ist ein schmal laufender (condensed) Display-Font; solange die woff2 noch lädt
   (font-display: swap), rendern die grossen Hero-/Sektions-Überschriften in dieser Ersatzschrift.
   Über size-adjust + *-override werden Arial-Metriken exakt an Big Shoulders angeglichen, sodass
   die Zeilenbox schon vor dem Font-Swap die endgültige Höhe hat → kein Layout-Sprung (Start-CLS).
   Werte via capsize-Prinzip aus der 800-latin-woff2 berechnet (Referenz: Arial):
     size-adjust 62.19% (Breitenverhältnis xAvg), ascent 158.23%, descent 34.25%, line-gap 0. */
@font-face {
  font-family: 'Big Shoulders Fallback';
  src: local('Arial');
  size-adjust: 62.19%;
  ascent-override: 158.23%;
  descent-override: 34.25%;
  line-gap-override: 0%;
}

/* ===== 2) BASE / TOKENS / RAIL / SOS / HERO ===== */
/* ============================================================
   BEREIT v2 — „Einsatzzentrale"
   Weiterentwicklung des Field-Manual-Looks:
   Rail-Navigation links, Corner-Ticks, Watermark-Ziffern,
   Konsolen-Statusleiste. Dunkel default, hell umschaltbar.
   Teil 1: Tokens, Base, Rail, SOS, Hero
   ============================================================ */

:root {
  --accent: #ff6a1f;
  --accent-ink: #160a02;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --warn: #ffd21e;
  --sev-low: #46c98b; --sev-mid: #ffc53d; --sev-high: #ff8a3d; --sev-max: #f3564b;
  /* Fünfte CAP-/CH-Stufe (dunkelrot) für „sehr gross" — ergänzt die 4er-Skala zur 5-Stufen-Warnleiter
     (grün→gelb→orange→rot→dunkelrot), keine Parallel-Palette (Spec §5). */
  --sev-extreme: #b3271e;
  /* Severity-TEXT-Farbe (nur wo eine --sev-*-Farbe als Schriftfarbe auf einer Fläche steht, nicht als
     Flächen-Hintergrund). Im Dark-Mode identisch zu --sev-mid; im Light-Mode abgedunkelt (siehe unten),
     weil das helle Amber #ffc53d auf hellem Grund WCAG-AA verfehlt (~1.5:1). Ein eigenes Token statt einer
     globalen Absenkung von --sev-mid, damit die Flächen-Nutzungen (dunkle Schrift AUF Amber: .rm-cell,
     .risk-matrix td) unangetastet bleiben — dort würde ein dunkleres Amber den Kontrast wieder verschlechtern. */
  --sev-mid-ink: var(--sev-mid);
  --r-s: 4px; --r-m: 8px; --r-l: 14px;
  --fdisp: "Big Shoulders Display", "Big Shoulders Fallback", "Saira Condensed", sans-serif;
  --fbody: "IBM Plex Sans", system-ui, sans-serif;
  --fmono: "IBM Plex Mono", ui-monospace, monospace;
  --rail: 92px;
  --gut: clamp(20px, 3.6vw, 56px);
  --maxw: 1280px;
}
:root, :root[data-theme="dark"] {
  --bg: #0b0d0f; --bg-2: #08090b;
  --surface: #14171b; --surface-2: #1b1f25; --surface-3: #23282f;
  --line: #262b31; --line-2: #353c44;
  /* --text-3: dritte Textstufe (leiser als --text-2), 96 Verwendungen. Angehoben von #7e868e auf #8b939b:
     #7e868e verfehlte WCAG AA (4.5:1) auf ALLEN Flächen knapp — auf --surface-2 mit 4.48 (Lighthouse:
     44 Elemente auf /de/lage, erklärt a11y 89). #8b939b ist der kleinstmögliche Schritt, der auf jeder
     Fläche (--bg 4.85 … --surface-3 5.16) besteht; heller würde die Hierarchie zu --text-2 einebnen. */
  --text: #ece8de; --text-2: #b4bac0; --text-3: #8b939b;
  --grid-ink: rgba(255,255,255,.04);
  --shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  --stripe-ink: #0b0d0f;
}
:root[data-theme="light"] {
  --bg: #edeae3; --bg-2: #e3dfd6;
  --surface: #f8f6f1; --surface-2: #efece5; --surface-3: #e5e1d7;
  --line: #d3cec1; --line-2: #bfb9a9;
  /* --text-3 light: abgesenkt von #6e747b auf #5c636b. #6e747b verfehlte AA auf allen fünf hellen Flächen
     (3.55–4.37) — nie gemessen, weil Lighthouse nur das Dark-Theme prüfte. Betrifft auch die Notfallkarte:
     _LayoutPrint setzt fest data-theme="light". #5c636b besteht überall (--bg 5.44 … --surface 5.98). */
  --text: #181b1f; --text-2: #474d54; --text-3: #5c636b;
  --grid-ink: rgba(20,20,20,.045);
  --shadow: 0 22px 48px -26px rgba(40,35,25,.45);
  --stripe-ink: #181b1f;
  /* Abgedunkeltes Warn-Amber NUR als Textfarbe (Staleness-Badge, Situationskugel „erhöht"). Ziel-Ratio:
     ≥ 4.5:1 gegen die hellen Panel-Flächen (--surface #f8f6f1 … --surface-3 #e5e1d7) für kleinen Badge-Text;
     #7d5600 liefert ~6:1 gegen --surface und ~5:1 gegen --surface-3 (die 28px-Kugel braucht ohnehin nur 3:1).
     Flächen-Amber (--sev-mid) bleibt hell — dort steht dunkle Schrift darauf. */
  --sev-mid-ink: #7d5600;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* F-4 (a11y, Design-Kontrakt §1/Muster 10, Invariante 14): Unter reduzierter Bewegung werden alle
   nicht-essenziellen Bewegungen neutralisiert — die Karten-Hover-Lifts (translateY) und die pulsierenden
   SOS-Punkte. Rein additiv innerhalb der Media-Query: die Normaldarstellung bleibt unverändert. */
@media (prefers-reduced-motion: reduce) {
  .dcard, .gcard, .facard, .ccard, .ncard, .dov-link { transition: none; }
  .dcard:hover, .gcard:hover, .facard:hover, .ccard:hover, .ncard:hover, .dov-link:hover { transform: none; }
  /* Pfeil-Nudges (translateX auf dem Icon) beim Hover ebenfalls stilllegen. */
  .clickable:hover .more-row svg, .gcard:hover .go svg { transform: none; }
  .sos-dot, .console-live .sos-dot { animation: none; }
}
body {
  margin: 0; font-family: var(--fbody); background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.04; }
p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.tag { font-family: var(--fmono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.tag-accent { color: var(--accent); }
.display, h1, h2 { font-family: var(--fdisp); text-transform: uppercase; }

/* hazard stripe utility */
.stripes { background: repeating-linear-gradient(-45deg, var(--warn) 0 12px, var(--stripe-ink) 12px 24px); }

/* corner ticks: vier Eckmarken auf Panels */
.tick-frame { position: relative; }
.tick-frame::before, .tick-frame::after,
.tick-frame > .tick::before, .tick-frame > .tick::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--line-2); border-style: solid; transition: border-color .18s;
}
.tick-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.tick-frame::after { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.tick-frame > .tick::before { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.tick-frame > .tick::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.tick-frame:hover::before, .tick-frame:hover::after,
.tick-frame:hover > .tick::before, .tick-frame:hover > .tick::after { border-color: var(--accent); }

/* ============================================================
   RAIL — vertikale Kommando-Leiste (desktop)
   ============================================================ */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 60;
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; padding: 14px 0;
  gap: 10px;
}
.rail-logo {
  width: 44px; height: 44px; border-radius: var(--r-s); background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center; flex: none;
}
.rail-logo svg { width: 24px; height: 24px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; flex: 1; width: 100%; }
.rail-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 4px; color: var(--text-3); position: relative;
  font-family: var(--fmono); transition: color .15s, background .15s;
}
.rail-nav a .no { font-size: 10px; letter-spacing: .12em; }
.rail-nav a .lb { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.rail-nav a:hover { color: var(--text); background: var(--surface); }
.rail-nav a.on { color: var(--accent); }
.rail-nav a.on::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; background: var(--accent); }
.rail-foot { display: flex; flex-direction: column; gap: 8px; align-items: center; }
/* Kein opacity: .8 — sie senkte den Kontrast der Notrufnummern auf 4.09 (unter WCAG AA). Nicht die Farbe war
   das Problem, sondern die Deckkraft: --sev-max (#f3564b) voll deckend liefert 5.92 gegen --bg-2. Bei einem
   Element, auf dem „Notruf 112 · 144" steht, ist gedämpfte Deckkraft ohnehin die falsche Entscheidung. */
.rail-sos { font-family: var(--fmono); font-size: 10px; color: var(--sev-max); letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); }

/* Sprachumschalter als reines CSS-<details>-Dropdown (kein JS, CSP-konform), §18.4 */
.lang-dd { position: relative; }
.lang-dd > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; justify-content: center;
  font-family: var(--fmono); font-size: 10px; letter-spacing: .08em; color: var(--text-3);
  padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r-s);
  transition: color .15s, border-color .15s, background .15s;
}
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary:hover { color: var(--text); border-color: var(--line-2); }
.lang-dd[open] > summary { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.lang-dd-globe { width: 13px; height: 13px; flex: none; }
.lang-dd-menu {
  position: absolute; display: flex; flex-direction: column; gap: 1px; min-width: 134px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-m);
  padding: 5px; box-shadow: var(--shadow); z-index: 70;
}
.lang-dd-item {
  font-family: var(--fbody); font-size: 13px; color: var(--text-2); text-decoration: none;
  padding: 6px 9px; border-radius: var(--r-s); white-space: nowrap;
  transition: color .15s, background .15s;
}
.lang-dd-item:hover { color: var(--text); background: var(--surface-3); }
.lang-dd-item.on { color: var(--accent); font-weight: 600; }
/* In der schmalen Rail: Panel rechts daneben öffnen, am unteren Rand ausgerichtet */
.rail .lang-dd-menu { left: calc(100% + 10px); bottom: 0; }
/* Im Mobile-Menü: Toggle zentriert. Der Schalter sitzt am unteren Ende des
   (oben verankerten) Burger-Menüs, darum öffnet das Panel nach OBEN — sonst
   würde es unter den Viewport-Rand rutschen und die unteren Sprachen wären
   abgeschnitten. Höhe gedeckelt + scrollbar als zusätzliche Absicherung. */
.mobile-menu .lang-dd { align-self: center; margin-top: 6px; }
.mobile-menu .lang-dd-menu {
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  max-height: 50vh; overflow-y: auto;
}
/* Grössere Touch-Targets im Mobile-Menü (mind. ~44px hoch, Apple/Android-Richtwert) */
.mobile-menu .lang-dd-item { font-size: 15px; padding: 11px 14px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-s); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  display: grid; place-items: center; transition: color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }
/* Tastatur-Fokus sichtbar machen (A11y, Design-Review 14.07): gleicher Stil wie .clickable/.map-cta-link,
   gilt zentral für Theme-Toggle, Sprachumschalter und den neuen Konto-Link im Rail. */
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .moon { display: none; }
:root[data-theme="light"] .icon-btn .moon { display: block; }
:root[data-theme="light"] .icon-btn .sun { display: none; }

/* page content offset */
.page { margin-left: var(--rail); }

/* ============================================================
   TOPBAR — Notruf-Konsole oben
   ============================================================ */
.sos {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  font-family: var(--fmono); font-size: 12px;
}
.sos .sos-in { display: flex; align-items: stretch; padding-inline: var(--gut); overflow-x: auto; scrollbar-width: none; }
.sos .sos-in::-webkit-scrollbar { display: none; }
.sos-label { display: flex; align-items: center; gap: 8px; padding-block: 9px; padding-right: 16px; color: var(--text-3); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.sos-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sev-max); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(243,86,75,.5)} 70%{box-shadow:0 0 0 7px rgba(243,86,75,0)} 100%{box-shadow:0 0 0 0 rgba(243,86,75,0)} }
.sos a { display: flex; align-items: baseline; gap: 7px; padding: 9px 14px; border-left: 1px solid var(--line); white-space: nowrap; color: var(--text-2); transition: background .15s, color .15s; }
.sos a:hover { background: var(--surface); color: var(--text); }
.sos a b { color: var(--text); font-weight: 600; }
.sos a span { font-size: 10.5px; color: var(--text-3); }
.sos .sos-clock { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--line); color: var(--text-3); letter-spacing: .08em; white-space: nowrap; }
.sos .sos-clock b { color: var(--text); font-weight: 500; }

/* burger only on mobile */
.nav-burger { display: none; }
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: 80px var(--gut) 24px; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--fdisp); font-weight: 700; font-size: 34px; text-transform: uppercase; padding: 13px 0; border-bottom: 1px solid var(--line); }
.mobile-menu a:hover { color: var(--accent); }
/* Tastatur-Fokus im Mobile-Menü sichtbar (A11y, gleiches Muster wie .icon-btn/.clickable). Das Menü enthält
   seit B1 den einzigen mobilen Weg zur Startseite — er muss auch per Tastatur auffindbar sein. */
.mobile-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-close { position: fixed; top: 18px; right: 18px; z-index: 71; }

/* ============================================================
   HERO — Lagezentrum
   ============================================================ */
.hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 52px 52px;
  mask-image: radial-gradient(130% 100% at 75% 0%, #000 25%, transparent 80%);
}
.hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%;
  background: radial-gradient(80% 60% at 70% 35%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; padding-block: clamp(52px, 7vw, 96px) 0; }
.hero-tagline { display: flex; align-items: center; gap: 14px; }
.hero-tagline .bar { width: 42px; height: 3px; background: var(--accent); }
.hero h1 {
  font-size: clamp(58px, 9.5vw, 140px); font-weight: 800; letter-spacing: .005em;
  line-height: .88; margin-top: 26px;
}
.hero h1 .o { color: var(--accent); }
.hero h1 .ghost { -webkit-text-stroke: 2px var(--line-2); color: transparent; }
.hero-sub {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 70px);
  margin-top: clamp(30px, 4vw, 48px); align-items: start;
}
.hero-lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-2); max-width: 52ch; line-height: 1.65; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--fmono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 22px; border-radius: var(--r-s); border: 1px solid transparent;
  transition: transform .12s, background .15s, border-color .15s; white-space: nowrap;
  background: transparent;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); }
/* Sekundär-Button: eigener, deckender Hintergrund (nicht nur Rahmen). Garantiert Lesbarkeit in
   BEIDEN Themes und verhindert, dass native <button>-Hintergründe (buttonface, hell) durchscheinen
   und den Text unleserlich machen (z. B. Druck-Button im Dark-Mode). */
.btn-ghost { background: var(--surface-2); border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--text-3); }

/* Status-Konsole rechts */
.console { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--r-m); overflow: hidden; }
.console-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.console-head .tag { color: var(--text-2); }
.console-live { display: flex; align-items: center; gap: 7px; font-family: var(--fmono); font-size: 11px; letter-spacing: .08em; color: var(--sev-low); }
.console-live .sos-dot { background: var(--sev-low); animation-name: pulseg; }
@keyframes pulseg { 0%{box-shadow:0 0 0 0 rgba(70,201,139,.45)} 70%{box-shadow:0 0 0 7px rgba(70,201,139,0)} 100%{box-shadow:0 0 0 0 rgba(70,201,139,0)} }
.console-row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--line); transition: background .14s; }
.console-row:last-child { border-bottom: 0; }
a.console-row:hover { background: var(--surface-2); }
.console-ic { width: 38px; height: 38px; flex: none; border-radius: var(--r-s); background: var(--surface-3); color: var(--accent); display: grid; place-items: center; }
.console-ic svg { width: 20px; height: 20px; }
.console-row h4 { font-size: 14.5px; font-weight: 600; }
.console-row p { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.console-row .val { margin-left: auto; font-family: var(--fdisp); font-weight: 700; font-size: 24px; text-transform: uppercase; }

/* Ticker-Stats unten im Hero */
.hero-ticker {
  position: relative; display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line); margin-top: clamp(36px, 5vw, 64px);
}
.hero-ticker > div { padding: 20px 18px 26px; border-left: 1px solid var(--line); position: relative; }
.hero-ticker > div:first-child { border-left: 0; padding-left: 2px; }
.ht-num { font-family: var(--fdisp); font-weight: 800; font-size: clamp(36px, 4.4vw, 58px); line-height: 1; }
.ht-num em { font-style: normal; color: var(--accent); font-size: .5em; }
.ht-lbl { font-family: var(--fmono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; }

/* ===== 3) SEKTIONEN / KARTEN / CHECKLISTEN / FOOTER / RESPONSIVE ===== */
/* ============================================================
   BEREIT v2 — Teil 2: Sektionen, Karten, Checklisten,
   Kontakte, Morse, Overlay, Footer, Responsive
   ============================================================ */

/* ---------- Sektions-Gerüst mit Watermark-Ziffer ---------- */
section { scroll-margin-top: 56px; }
.band { position: relative; padding-block: clamp(60px, 8vw, 110px); }
.band-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { position: relative; margin-bottom: 42px; }
/* Ghost-Kapitelziffer: gemeinsame Optik für Sektions- und Detail-Header;
   nur der vertikale Versatz (top) unterscheidet sich je Kontext (Detail-Override bei .detail-head .watermark). */
.sec-head .watermark, .detail-head .watermark {
  position: absolute; right: -10px; z-index: 0; user-select: none; pointer-events: none;
  font-family: var(--fdisp); font-weight: 800; font-size: clamp(120px, 16vw, 230px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--line); opacity: .9;
}
.sec-head .watermark { top: -42px; }
.sec-head .l { position: relative; z-index: 1; max-width: 64ch; }
.sec-num { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fmono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sec-num::before { content: ""; width: 26px; height: 2px; background: var(--accent); }
.sec-head h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; margin-top: 14px; letter-spacing: .004em; }
.sec-head p { color: var(--text-2); margin-top: 14px; font-size: 16px; max-width: 60ch; }

/* ---------- Filter-Chips ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.chip {
  font-family: var(--fmono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 16px; cursor: pointer; border-radius: var(--r-s);
  background: transparent; border: 1px solid var(--line-2); color: var(--text-2); transition: all .14s;
}
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------- Gefahren-Karten ---------- */
.danger-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dcard {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 22px; display: flex; flex-direction: column; transition: transform .16s, border-color .16s, box-shadow .16s;
}
.dcard:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.dcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sev); opacity: .85;
}
.dcard-top { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 15px; }
.dcard-ic { width: 46px; height: 46px; flex: none; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; }
.dcard-ic svg { width: 24px; height: 24px; }
.dcard h3 { font-family: var(--fdisp); font-weight: 700; font-size: 25px; text-transform: uppercase; letter-spacing: .01em; }
.dcat { font-family: var(--fmono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; }
.dcard > p { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.sev-meter { display: flex; align-items: center; gap: 9px; margin: 15px 0 4px; }
.sev-bars { display: flex; gap: 3px; }
.sev-bars i { width: 24px; height: 5px; background: var(--line); }
.sev-bars i.f { background: var(--sev); }
.sev-meter span { font-family: var(--fmono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-left: auto; }
.dcard-acts { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--line-2); }
.dcard-acts .tag { display: block; margin-bottom: 8px; }
.dcard-acts li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-2); padding: 3px 0; }
.dcard-acts li svg { width: 15px; height: 15px; flex: none; color: var(--accent); margin-top: 3px; }

/* mehr-erfahren-Zeile (overlay-Trigger) */
.clickable { cursor: pointer; }
.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--fmono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.more-row svg { width: 14px; height: 14px; transition: transform .16s; }
.clickable:hover .more-row svg { transform: translateX(4px); }

/* ---------- Guides ---------- */
/* Karten dynamisch breit: auto-fit füllt die Reihe, jede Karte mind. 260px (vermeidet die ursprünglichen
   ultraschmalen 1/12-Spalten, da die Span-Klassen des Designs beim Portieren entfielen). */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
/* Zwei direkt aufeinanderfolgende Grids (z. B. Tools-Grid nach Guides-Grid) brauchen Abstand,
   sonst stossen die Karten-Reihen ohne Trennung aneinander. Trifft nur den Adjazenz-Fall. */
.guide-grid + .guide-grid { margin-top: 24px; }
/* Abschluss-Button („mehr ansehen") direkt nach einem Karten-Grid: klarer Abstand zur Karte darüber. */
.band-more { margin-top: 26px; }
.gcard {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 26px; min-height: 240px; display: flex; flex-direction: column;
  transition: transform .16s, border-color .16s, box-shadow .16s; overflow: hidden;
}
.gcard:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow); }
/* Akzent-Top-Linie analog .dcard::before — hebt Anleitungs-/Finanzen-/Vorlagen-Karten auf Gold-Niveau.
   Die akzentgefüllte .feat-Karte trägt bereits eigenen Streifen (::after) und wird ausgenommen. */
.gcard:not(.feat)::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); opacity: .85;
}
/* Karten-Icon (Listen/Finanzen): gleicher Kachel-Look wie das Szenarien-Icon (.dcard-ic).
   Nur vorhanden, wo die View bewusst ein Icon setzt — Anleitungs-Karten (.num) bleiben ohne. */
.gcard-ic { width: 46px; height: 46px; flex: none; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; margin-bottom: 2px; }
.gcard-ic svg { width: 24px; height: 24px; }
.gcard .num { font-family: var(--fmono); font-size: 11.5px; letter-spacing: .12em; color: var(--text-3); }
/* Akzent-Variante des Karten-Badges: hebt einen andersartigen Karten-Typ hervor (z. B. der Selbsttest im
   Spiel-Hub gegenüber den Szenario-Karten), ohne ein neues Badge-Primitive einzuführen. */
.gcard .num-accent { color: var(--accent); }
.gcard h3 { font-family: var(--fdisp); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 36px); margin-top: auto; line-height: .95; }
.gcard p { font-size: 14px; color: var(--text-2); margin-top: 12px; }
/* Anleitungs-Übersicht: kompaktere Kacheltitel, damit lange Titel nicht über 3 Zeilen laufen. */
.guide-grid .gcard h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.08; margin-top: 14px; overflow-wrap: break-word; hyphens: auto; }
.guide-grid .gcard { min-height: 210px; }
/* CTA am Kartenfuss verankern. Im guide-grid hebt die Regel darüber das `margin-top: auto` des h3
   auf — ohne diesen Anker sammelt sich der Leerraum UNTER dem CTA, und Karten mit sehr
   unterschiedlich langer Beschreibung (Checklisten-Übersicht: 71 bis 471 Zeichen) lassen ihre
   CTAs auf verschiedenen Höhen stehen. So liegen sie wieder auf einer gemeinsamen Grundlinie. */
.guide-grid .gcard .go { margin-top: auto; }
.gcard .go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fmono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-top: 18px; }
.gcard .go svg { width: 15px; height: 15px; transition: transform .16s; }
.gcard:hover .go svg { transform: translateX(4px); }
.gcard.feat { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gcard.feat .num, .gcard.feat p { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }
.gcard.feat .go { color: var(--accent-ink); }
.gcard.feat::after {
  content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--accent-ink) 0 8px, transparent 8px 16px); opacity: .35;
}
.span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; } .span-8 { grid-column: span 8; }

/* ---------- Erste Hilfe ---------- */
.fa-alert {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
  padding: 18px 20px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--sev-max) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--sev-max) 42%, transparent);
}
.fa-badge { display: flex; align-items: center; gap: 12px; background: var(--sev-max); color: #fff; padding: 12px 20px; border-radius: var(--r-s); flex: none; transition: transform .12s; }
.fa-badge:active { transform: translateY(1px); }
.fa-badge svg { width: 22px; height: 22px; }
.fa-badge b { font-family: var(--fdisp); font-weight: 800; font-size: 32px; line-height: 1; }
.fa-badge span { font-family: var(--fmono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.fa-alert p { flex: 1; min-width: 240px; font-size: 14.5px; color: var(--text-2); }
.fa-alert p b { color: var(--text); }
.firstaid-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.facard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 24px; display: flex; flex-direction: column; transition: transform .16s, border-color .16s; }
.facard:hover { transform: translateY(-3px); border-color: var(--line-2); }
.facard-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.facard-ic { width: 48px; height: 48px; flex: none; border-radius: var(--r-s); display: grid; place-items: center; color: var(--sev-max); background: color-mix(in srgb, var(--sev-max) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--sev-max) 32%, transparent); }
.facard-ic svg { width: 25px; height: 25px; }
.facard h3 { font-family: var(--fdisp); font-weight: 800; font-size: 29px; text-transform: uppercase; }
.fa-step { font-family: var(--fmono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.fa-lead { font-size: 14.5px; color: var(--text-2); padding-bottom: 15px; border-bottom: 1px dashed var(--line-2); }
.fa-steps { counter-reset: fa; display: flex; flex-direction: column; }
.fa-steps li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.fa-steps li:last-child { border-bottom: 0; padding-bottom: 2px; }
.fa-n { width: 26px; height: 26px; flex: none; border-radius: 2px; background: var(--accent); color: var(--accent-ink); font-family: var(--fmono); font-size: 13px; display: grid; place-items: center; margin-top: 1px; }
.fa-steps li b { font-size: 15px; }
.fa-steps li p { font-size: 13.5px; color: var(--text-2); margin-top: 3px; }

/* ---------- Kommunikation ---------- */
.comms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; display: flex; flex-direction: column; transition: transform .16s, border-color .16s, box-shadow .16s; }
.ccard:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.ccard-img { width: 100%; height: 170px; display: block; border-bottom: 1px solid var(--line); }
.ccard-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.ccard-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 13px; }
.ccard-ic { width: 42px; height: 42px; flex: none; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--accent); display: grid; place-items: center; }
.ccard-ic svg { width: 22px; height: 22px; }
.ccat { font-family: var(--fmono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ccard h3 { font-family: var(--fdisp); font-weight: 800; font-size: 25px; text-transform: uppercase; margin-top: 2px; }
.csub { font-family: var(--fmono); font-size: 11px; color: var(--accent); margin-top: 3px; }
.ccard-body > p { font-size: 13.5px; color: var(--text-2); }
.ccard-specs { margin-top: auto; padding-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spec { border-top: 2px solid var(--line-2); padding-top: 8px; }
.spec-k { display: block; font-family: var(--fmono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.spec-v { display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.morse { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 22px 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.morse-l { flex: 1; min-width: 230px; }
.morse-l h4 { font-family: var(--fdisp); font-weight: 800; font-size: 27px; text-transform: uppercase; margin-top: 8px; }
.morse-l p { font-size: 13.5px; color: var(--text-2); margin-top: 8px; max-width: 52ch; }
.morse-sig { display: flex; flex-direction: column; gap: 12px; }
#morse-sos { display: flex; align-items: center; gap: 8px; }
.ms { height: 14px; background: var(--accent); }
.ms.short { width: 14px; } .ms.long { width: 42px; }
.ms[data-gap] { margin-right: 14px; }
.morse-legend { display: flex; gap: 18px; font-family: var(--fmono); font-size: 11px; color: var(--text-3); }
.morse-legend b { color: var(--text); font-weight: 500; }

/* ---------- Checklisten ---------- */
.check-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.check-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 62px; }
.ctab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; padding: 12px 13px; background: transparent; border: 1px solid transparent; border-left: 2px solid var(--line); border-radius: 0; color: var(--text-2); font-family: var(--fbody); transition: all .14s; }
.ctab:hover { background: var(--surface); color: var(--text); }
.ctab.on { background: var(--surface); border-left-color: var(--accent); color: var(--text); }
.ctab svg { width: 19px; height: 19px; flex: none; color: var(--text-3); }
.ctab.on svg { color: var(--accent); }
.ctab .ct-name { font-family: var(--fdisp); font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1; }
.ctab .ct-meta { font-family: var(--fmono); font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
.check-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.cp-head { padding: 22px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--surface-2); }
.cp-head h3 { font-family: var(--fdisp); font-weight: 800; font-size: 30px; text-transform: uppercase; }
.cp-head p { font-size: 13.5px; color: var(--text-3); margin-top: 4px; width: 100%; order: 3; }
.cp-prog { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.prog-ring { --p: 0; width: 50px; height: 50px; flex: none; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p)*1%), var(--surface-3) 0); display: grid; place-items: center; position: relative; }
.prog-ring::after { content: ""; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); }
.prog-ring b { position: absolute; font-family: var(--fmono); font-size: 12px; }
.cp-prog .ptxt { font-family: var(--fmono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.cp-reset { font-family: var(--fmono); font-size: 11px; color: var(--text-3); background: none; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; }
.cp-reset:hover { color: var(--sev-max); }
.cp-body { padding: 8px 10px 14px; }
.cgroup-h { font-family: var(--fmono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 16px 14px 8px; }
.citem { display: flex; align-items: flex-start; gap: 13px; padding: 11px 14px; cursor: pointer; transition: background .12s; border-radius: var(--r-s); }
.citem:hover { background: var(--surface-2); }
.cbox { width: 20px; height: 20px; flex: none; margin-top: 1px; border: 1.5px solid var(--line-2); border-radius: 3px; display: grid; place-items: center; color: transparent; transition: all .14s; }
.cbox svg { width: 13px; height: 13px; }
.citem.done .cbox { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.citem .ci-txt { font-size: 14.5px; }
.citem .ci-sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.citem.done .ci-txt { color: var(--text-3); text-decoration: line-through; }
.ci-amt { margin-left: auto; font-family: var(--fmono); font-size: 12px; color: var(--accent); white-space: nowrap; padding-left: 12px; }

/* ---------- Kontakte ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.num-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ncard { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); transition: border-color .15s, transform .15s; }
.ncard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ncard.urgent { border-color: var(--accent-line); }
.nnum { font-family: var(--fdisp); font-weight: 800; font-size: 44px; line-height: .9; min-width: 80px; }
.ncard.urgent .nnum { color: var(--accent); }
.ncard h4 { font-size: 15px; font-weight: 600; }
.ncard p { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.info-stack { display: flex; flex-direction: column; gap: 14px; }
.ibox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.ibox-h { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ibox-h svg { width: 20px; height: 20px; color: var(--accent); }
.ibox-h h4 { font-family: var(--fdisp); font-weight: 700; font-size: 21px; text-transform: uppercase; }
.ibox-b { padding: 18px 20px; }
.ibox-b p { font-size: 14px; color: var(--text-2); }
.siren { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.siren:last-child { border-bottom: 0; padding-bottom: 0; }
.siren-wave { width: 54px; flex: none; }
.siren h5 { font-family: var(--fdisp); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.siren p { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.applinks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.applink { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); flex: 1; min-width: 150px; }
.applink svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.applink b { font-size: 13.5px; display: block; }
.applink span { font-size: 11.5px; color: var(--text-3); }

/* ---------- Overlay ---------- */
.dov { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--bg-2) 78%, transparent); backdrop-filter: blur(10px); display: grid; place-items: center; padding: clamp(12px, 3vw, 32px); transition: opacity .22s ease; }
.dov.closing { opacity: 0; }
.dov-panel { position: relative; width: min(880px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m); box-shadow: 0 48px 140px -32px rgba(0,0,0,.78); padding: clamp(22px, 4vw, 42px); will-change: transform; }
.dov.closing .dov-panel { transform: scale(.97); transition: transform .2s ease; }
.dov-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; border-radius: var(--r-s); cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); display: grid; place-items: center; }
.dov-x:hover { color: var(--text); border-color: var(--line-2); }
.dov-x svg { width: 17px; height: 17px; }
.dov-head { display: flex; align-items: center; gap: 18px; padding-right: 48px; }
.dov-ic { width: 58px; height: 58px; flex: none; border-radius: var(--r-s); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); display: grid; place-items: center; }
.dov-ic svg { width: 30px; height: 30px; }
.dov-head h2 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; margin-top: 4px; }
.dov-sub { font-family: var(--fmono); font-size: 12px; color: var(--text-3); margin-top: 4px; }
.dov-intro { margin-top: 20px; font-size: 15.5px; color: var(--text-2); line-height: 1.65; max-width: 72ch; }
.dov-secs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.dov-sec { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 16px 18px; }
.dov-sec h5 { font-family: var(--fmono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.dov-sec li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-2); padding: 4px 0; line-height: 1.45; }
.dov-sec li svg { width: 14px; height: 14px; flex: none; color: var(--accent); margin-top: 3px; }
.dov-foot { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
.dov-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.dov-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; transition: border-color .14s, transform .14s; }
.dov-link:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.dov-link b { display: block; font-size: 13.5px; }
.dov-link small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.dov-link svg { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: 48px 30px; }
.footer .stripe { height: 8px; margin-bottom: 40px; background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, transparent 14px 28px); opacity: .5; }
.footer-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.brand-word { font-family: var(--fdisp); font-weight: 800; font-size: 30px; text-transform: uppercase; }
.brand-word b { color: var(--accent); }
/* Seit B1 (17.07.2026) ist der Footer-Brand ein Link zur Startseite (war ein <span>). Aussehen unverändert —
   das globale `a { color: inherit; text-decoration: none }` greift. Nur Hover/Fokus kommen dazu, damit er als
   klickbar erkennbar und per Tastatur auffindbar ist. */
a.brand-word:hover b { color: var(--text); }
a.brand-word:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.disclaimer { font-size: 12px; color: var(--text-3); line-height: 1.6; max-width: 78ch; margin-top: 18px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.fcol-title { font-family: var(--fmono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }
.fcol a { display: block; font-size: 14px; color: var(--text-2); padding: 5px 0; }
.fcol a:hover { color: var(--accent); }

.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; font-family: var(--fmono); font-size: 11px; color: var(--text-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .page { margin-left: 0; }
  .nav-burger { display: grid; position: fixed; bottom: 18px; right: 18px; z-index: 65; width: 52px; height: 52px; box-shadow: var(--shadow); background: var(--accent); color: var(--accent-ink); border: none; }
  .danger-grid, .comms-grid { grid-template-columns: repeat(2, 1fr); }
  /* Ticker auf mittleren Breiten dreispaltig (2 Reihen à 3); linke Spalte ohne Trennlinie. */
  .hero-ticker { grid-template-columns: repeat(3, 1fr); }
  .hero-ticker > div:nth-child(3n+1) { border-left: 0; padding-left: 2px; }
  .check-layout { grid-template-columns: 1fr; }
  .check-tabs { flex-direction: row; overflow-x: auto; position: static; scrollbar-width: none; }
  .check-tabs::-webkit-scrollbar { display: none; }
  .ctab { min-width: 180px; border-left: none; border-bottom: 2px solid var(--line); }
  .ctab.on { border-bottom-color: var(--accent); }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-sub { grid-template-columns: 1fr; }
  .console { max-width: 480px; }
  .span-6, .span-4, .span-3, .span-8 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .danger-grid, .comms-grid, .firstaid-grid, .num-grid { grid-template-columns: 1fr; }
  .hero-ticker { grid-template-columns: repeat(2, 1fr); }
  /* Zweispaltig: linke Spalte (ungerade) ohne Trennlinie, rechte Spalte (gerade) mit. */
  .hero-ticker > div:nth-child(odd) { border-left: 0; padding-left: 2px; }
  .hero-ticker > div:nth-child(even) { border-left: 1px solid var(--line); }
  .span-6, .span-4, .span-3, .span-8 { grid-column: span 12; }
  .dov-secs, .dov-links { grid-template-columns: 1fr; }
  .sec-head .watermark, .detail-head .watermark { display: none; }
}

/* ===== 4) PRINT — Notfallkarte (§9/§13: A4, schwarz/weiss, ohne Nav/Ads) ===== */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #fff; --bg-2: #fff;
    --surface: #fff; --surface-2: #fff; --surface-3: #fff;
    --line: #000; --line-2: #000;
    --text: #000; --text-2: #000; --text-3: #000;
    --accent: #000; --accent-ink: #fff;
    --shadow: none; --grid-ink: transparent;
  }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; }

  /* Chrome ausblenden: Rail, Notruf-Konsole, Footer, Burger, Ads */
  .rail, .sos, .footer, .nav-burger, .mobile-menu,
  .adslot, .ad-slot { display: none !important; }

  /* Bildschirm-only Bedienelemente (z. B. Druck-Button) erscheinen nicht im Ausdruck. */
  .no-print { display: none !important; }

  /* Die Ghost-Ziffer ist am Bildschirm eine transparente Kontur in --line. Im Druck wird --line
     schwarz, wodurch eine ~127 px hohe umrandete Zahl über den Titelbereich druckt. */
  .watermark { display: none !important; }

  .page, .wrap, main { margin: 0 !important; padding: 0 !important; max-width: none !important; }

  /* Karten/Blöcke nicht über Seitenumbrüche zerreissen */
  .pk-card, .pk-block, .num-grid > *, .ibox, section { break-inside: avoid; page-break-inside: avoid; }

  a { color: #000; text-decoration: none; }
  @page { size: A4; margin: 14mm; }
}

/* Notfallkarte: Bildschirm-Aktionsleiste über der druckbaren Karte (Druck-Button). */
.card-actions { margin: 0 0 1rem; }

/* ===== 5) ETAPPE-5-ERGÄNZUNGEN (Review) ===== */
/* AdSense-Slot ohne Inline-Style (strikte CSP: style-src 'self', §10) */
.adslot { display: block; }
/* Uhr-Wert in der SOS-Leiste (ersetzt das vormalige <b>, id liegt nun auf <time>) */
.sos-clock-val { font-family: var(--fdisp); font-weight: 700; font-style: normal; }

/* ===== 6) ETAPPE 6 — Inhaltsseiten ===== */
/* Severity-Farbe per data-Attribut statt Inline-Style (strikte CSP: style-src 'self', §10).
   Mapping identisch zur Design-Logik sevVar in site.js (1–2 niedrig, 3 mittel, 4 hoch, 5 max). */
.dcard[data-sev="1"], .dcard[data-sev="2"], .sev-meter[data-sev="1"], .sev-meter[data-sev="2"] { --sev: var(--sev-low); }
.dcard[data-sev="3"], .sev-meter[data-sev="3"] { --sev: var(--sev-mid); }
.dcard[data-sev="4"], .sev-meter[data-sev="4"] { --sev: var(--sev-high); }
.dcard[data-sev="5"], .sev-meter[data-sev="5"] { --sev: var(--sev-max); }

/* ---- Gefahren-Risikomatrix (3×3, semantische <table>) ----
   Einfärbung der Zellen ausschliesslich über data-band gegen die bestehenden --sev-*-Tokens; Farbe ist
   nie der einzige Träger (aktive Zelle zusätzlich per Rahmen + „Sie sind hier"-Text + Häkchen). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.risk-matrix-block { margin: 16px 0 4px; }
.risk-answer {
  margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--band, var(--sev-mid));
  background: var(--surface-2); border-radius: var(--r-s); line-height: 1.5;
}
.risk-answer[data-band="1"] { --band: var(--sev-low); }
.risk-answer[data-band="2"] { --band: var(--sev-mid); }
.risk-answer[data-band="3"] { --band: var(--sev-max); }
.risk-matrix-layout { display: flex; align-items: center; gap: 10px; }
.rm-axis-y {
  writing-mode: vertical-rl; transform: rotate(180deg); flex: none;
  font-family: var(--fmono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.risk-matrix-scroll { overflow-x: auto; }
.risk-matrix { border-collapse: collapse; min-width: 320px; }
.risk-matrix caption {
  text-align: left; caption-side: top; color: var(--text-2);
  font-size: .85rem; line-height: 1.4; margin-bottom: 10px;
}
.risk-matrix th {
  font-family: var(--fmono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 6px 8px;
}
.risk-matrix .rm-axis-x { color: var(--text-2); }
.risk-matrix .rm-corner { border: 0; background: none; }
.risk-matrix td {
  width: 64px; height: 56px; text-align: center; vertical-align: middle;
  border: 1px solid var(--surface); border-radius: var(--r-s); color: #0b0d0f; font-weight: 700;
}
.risk-matrix td[data-band="1"] { background: var(--sev-low); }
.risk-matrix td[data-band="2"] { background: var(--sev-mid); }
.risk-matrix td[data-band="3"] { background: var(--sev-max); }
.risk-matrix td.rm-active { outline: 3px solid var(--text); outline-offset: -3px; }
.rm-here-mark { font-size: 20px; line-height: 1; color: #0b0d0f; }
.risk-legend {
  margin: 12px 0 0; font-family: var(--fmono); font-size: 11px;
  letter-spacing: .04em; color: var(--text-3); line-height: 1.5;
}
@media print {
  /* Band-Flächen und aktive Zelle auch im Ausdruck sichtbar halten (Farbe ist ohnehin nie alleiniger Träger). */
  .risk-matrix td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .risk-matrix td.rm-active { outline-color: #000; }
}

/* Detailseiten: Lesetypografie für die portierten Inhalte. */
.prose { max-width: 72ch; }
.prose h2 { margin: 28px 0 12px; }
.prose h3 { margin: 22px 0 10px; }
.prose p { margin: 0 0 14px; line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 8px; line-height: 1.6; }
.prose ol.steps { list-style: decimal; }

/* Detail-Sektion mit Watermark-Nummer (article auf Unterseiten). */
.detail-head { position: relative; margin: 0 0 8px; }
/* Ghost-Kapitelziffer analog .sec-head .watermark — die Signatur auch auf allen Detail-Templates.
   Optionales Element: rendert nur, wo die View eine <span class="watermark"> durchreicht.
   Gemeinsame Optik in der Basisregel bei .sec-head .watermark; hier weicht nur top ab. */
.detail-head .watermark { top: -30px; }
.detail-head > :not(.watermark) { position: relative; z-index: 1; }
/* H1 auf Gold-Typo-Skala heben — wirkt auf ALLE Detail-/Legal-/Tool-Header.
   Font (--fdisp) und Uppercase kommen bereits global aus `.display, h1, h2`; hier werden nur
   die zuvor UA-Default gebliebenen Grösse/Gewicht/Laufweite gesetzt. */
.detail-head h1 {
  font-weight: 800; font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: .004em; line-height: 1.02; margin: 12px 0 0;
}
.detail-lead { font-size: 1.05rem; color: var(--text-2); line-height: 1.6; margin: 0 0 22px; max-width: 72ch; }
.detail-meta { font-size: .85rem; color: var(--text-2); opacity: .8; margin: -14px 0 24px; }
.detail-sec { margin: 0 0 26px; }
.detail-sec > h2 { font-size: 1.25rem; margin: 0 0 12px; }

/* Phasen-Spalten (Vorher/Während/Nachher) auf Szenario-Detailseiten. */
.phase-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 8px 0 22px; }
.phase { border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface-2); padding: 16px 18px; }
.phase h3 { margin: 0 0 10px; font-size: 1rem; }
.phase ul { margin: 0; padding-left: 20px; }
.phase li { margin: 0 0 7px; line-height: 1.55; }

/* Warn-/Hinweis-Box (med. Disclaimer, 144-Hinweis, rechtlicher Funk-Hinweis). */
.notice { border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, var(--surface-2)); border-radius: var(--r-s); padding: 14px 18px; margin: 24px 0 20px; }
.notice.danger { border-color: color-mix(in srgb, var(--sev-max) 40%, transparent); background: color-mix(in srgb, var(--sev-max) 12%, var(--surface-2)); }
.notice h2, .notice h3 { margin-top: 0; }

/* Referenz-Tabellen (Frequenzen, Morse). */
.ref-table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: .95rem; }
.ref-table caption { text-align: left; font-family: var(--fmono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 0 0 8px; }
.ref-table th, .ref-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ref-table td.mono, .ref-table th.mono { font-family: var(--fmono); }

/* Einheitlicher Tabellen-Header für beide Primitives (.ref-table + .data-table):
   Mono / UPPERCASE / gedämpft. Vorher divergierte .data-table (nicht-Mono, gemischte Schreibung). */
.ref-table thead th,
.data-table thead th {
  color: var(--text-3); font-family: var(--fmono); font-size: .78rem;
  letter-spacing: .03em; text-transform: uppercase; font-weight: 600;
}

/* Verweis-/Quellen-Liste am Ende der Detailseiten. */
.links-list { list-style: none; margin: 8px 0 0; padding: 0; }
.links-list li { margin: 0 0 8px; }
.links-list .lk-sub { display: block; color: var(--text-3); font-size: .85rem; }

/* „Offizielle Karte"-CTA: hebt einen amtlichen externen Kartenlink prominent aus der Linkliste
   heraus. Rein datengetrieben (Partial _OfficialMapCta), CSP-sicher – kein Embed, kein inline style,
   Farben/Abstände nur über Tokens. */
.map-cta { margin: 0 0 26px; padding: 20px 22px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-m); }
.map-cta-title { font-family: var(--fdisp); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; margin: 0 0 12px; color: var(--text); }
.map-cta-link { margin: 0 0 12px; }
.map-cta-link svg { width: 16px; height: 16px; flex: none; }
.map-cta-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.map-cta-src { font-family: var(--fmono); font-size: .8rem; color: var(--text-2); margin: 0; }

/* Inline-Icon in einer Überschrift (z.B. Warn-Dreieck vor „Warnanzeichen"). */
.ico-inline { width: 1.1em; height: 1.1em; vertical-align: -0.15em; margin-right: .35em; color: var(--warn); }

/* „Das ist real passiert" — historische Ereignisse als Timeline-Liste. */
.hist-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hist-item { border-left: 2px solid var(--accent-line); padding: 0 0 18px 18px; position: relative; }
.hist-item:last-child { padding-bottom: 0; }
.hist-item::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hist-head { margin: 0 0 6px; font-size: 1rem; }
.hist-year { font-family: var(--fmono); color: var(--accent); margin-right: .4em; }
.hist-sum { margin: 0 0 6px; color: var(--text-2); line-height: 1.55; max-width: 72ch; }
.hist-src { font-size: .85rem; }

/* Spec-Kennzahlen einer Comms-Unterseite. */
.spec-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 6px 0 24px; }

/* Übernahme-Hinweis auf Checklisten-Vorlagen-Detailseiten. */
.adopt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface-2); padding: 16px 18px; margin: 22px 0; }
.adopt p { margin: 0; flex: 1 1 240px; }

/* Notfallkarte (Print-Layout): kompakte Blöcke. */
.card-sheet { max-width: 900px; margin: 0 auto; padding: 24px; }
.card-block { margin: 0 0 22px; break-inside: avoid; }
.card-block > h2 { font-size: 1.1rem; border-bottom: 2px solid var(--line); padding-bottom: 6px; margin: 0 0 12px; }
.card-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card-field { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; min-height: 44px; }
.card-field span { display: block; font-family: var(--fmono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 4px; }

/* ============================================================================
   Konto / Formulare (Etappe 7+8). Server-First: native Controls, keine JS-Widgets.
   ========================================================================== */

/* Schmale, zentrierte Auth-Karte (Login/Register/Reset/Löschen). */
.auth-card { max-width: 460px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface-2); padding: 28px 26px; }
.auth-card h1 { font-size: 1.5rem; margin: 0 0 6px; }
.auth-card .detail-lead { margin: 0 0 18px; font-size: .98rem; }

/* Formular-Grundbausteine. */
.form-row { margin: 0 0 16px; }
.form-row label { display: block; font-family: var(--fmono); font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; }
.form-control { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 10px 12px; }
.form-control:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; border-color: var(--accent); }
textarea.form-control { min-height: 84px; resize: vertical; }
/* Native Select durch tactical Chevron ersetzen (CSP-konform per data:-SVG, Akzent-Orange
   funktioniert auf dunkler wie heller Fläche).
   stroke='%23ff6a1f' = Wert von --accent (#ff6a1f); var() ist innerhalb einer data:-URL nicht möglich,
   daher hier hartkodiert → bei Änderung des Accent-Tokens diesen Wert manuell nachziehen. */
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ff6a1f' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* Inline-Checkbox-Zeile (AGB, Bestätigung, „angemeldet bleiben“).
   Touch-Ziel 24×24px wie der Karten-Filter (WCAG 2.2 SC 2.5.8, 17.07.2026): Diese Checkboxen hatten
   denselben 13×13px-Browser-Default und wurden beim Filter-Fix zunächst übersehen — dabei sitzen sie an
   den heikelsten Stellen (AGB-Zustimmung, Login). Ein halber Fix hätte drei verschiedene Checkbox-Grössen
   auf der Site hinterlassen; hier steht bewusst derselbe Wert wie in .lage-filter-row input. */
.form-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; }
.form-check input { margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent); width: 24px; height: 24px; }
.form-check label { display: inline; font-family: var(--fbody); text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--text-2); margin: 0; }

/* Honeypot: visuell und für Screenreader entfernt, aber im DOM (Bot-Falle). */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Validierungs-/Statusmeldungen. */
.validation-summary { border: 1px solid color-mix(in srgb, var(--sev-max) 45%, transparent); background: color-mix(in srgb, var(--sev-max) 12%, var(--surface-2)); border-radius: var(--r-s); padding: 12px 14px; margin: 0 0 18px; }
.validation-summary ul { margin: 0; padding-left: 18px; }
.field-validation-error, .text-danger { color: var(--sev-max); font-size: .85rem; display: block; margin-top: 5px; }
.input-validation-error { border-color: var(--sev-max); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 0; }
.auth-links { margin: 18px 0 0; font-size: .9rem; }
.auth-links a { color: var(--accent); }

/* Konto-Übersicht: Kachel-Navigation. */
.konto-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0 0; }
.konto-tile { display: block; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface-2); padding: 18px; color: inherit; text-decoration: none; }
.konto-tile:hover { border-color: var(--accent); }
.konto-tile h2 { font-size: 1.1rem; margin: 0 0 6px; }
.konto-tile p { margin: 0; color: var(--text-2); font-size: .9rem; }

/* Listen von eigenen Checklisten/Funkplänen. */
.entity-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.entity-list li { border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface-2); padding: 14px 16px; }
.entity-list .entity-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.entity-list h2 { font-size: 1.05rem; margin: 0; }
.entity-list .entity-meta { color: var(--text-3); font-family: var(--fmono); font-size: .76rem; }
.entity-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.inline-form { display: inline; }

/* Editierbare, dynamische Formularzeilen (Checklisten-Items, Funk-Einträge). */
.edit-rows { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.edit-row { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); padding: 12px 14px; }
.edit-row .row-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.row-tools { display: flex; gap: 8px; margin: 10px 0 0; }
.empty-hint { color: var(--text-3); font-style: italic; margin: 8px 0 14px; }

/* Abhakbare Checklisten-Items (No-JS Form + JS-Fetch teilen sich das Markup). */
.check-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); padding: 10px 14px; }
.check-item.is-checked { opacity: .62; }
.check-item .toggle-form { margin: 2px 0 0; }
.check-item .item-body { flex: 1; }
.check-item .item-text { font-weight: 600; }
.check-item.is-checked .item-text { text-decoration: line-through; }
.check-item .item-sub { display: block; color: var(--text-3); font-size: .84rem; margin-top: 3px; }
.check-toggle-btn { font: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); width: 30px; height: 30px; color: var(--accent); }
.check-toggle-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Gruppen-Überschrift innerhalb einer Checkliste. */
.check-group { margin: 0 0 22px; }
.check-group > h2 { font-size: 1.1rem; margin: 0 0 4px; }

/* ============================================================
   INTEL-Lagebild (§19) — Liste, INTEL-Brief, Risiko-Matrix, Karte, Gap-Tabelle.
   Reines CSS, keine zusaetzlichen Abhaengigkeiten. Severity-Akzente nutzen die
   bestehenden --sev-*-Variablen.
   ============================================================ */
.intel-meta { font-family: var(--fmono); font-size: 12px; color: var(--text-3); margin: 8px 0 18px; }
.intel-empty { color: var(--text-2); padding: 24px 0; }

.intel-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.intel-card { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); border-left: 4px solid var(--line-2); }
.intel-card a { display: block; padding: 16px 18px; color: inherit; text-decoration: none; }
.intel-card:hover { border-color: var(--line-2); }
.intel-card h3 { margin: 6px 0; font-size: 18px; }
.intel-card p { margin: 0 0 10px; color: var(--text-2); }
.intel-card time, .intel-src { font-family: var(--fmono); font-size: 11px; color: var(--text-3); letter-spacing: .08em; }
.intel-src { margin-left: 10px; }

.intel-card-head, .intel-brief-head { display: flex; gap: 12px; align-items: center; font-family: var(--fmono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.intel-cat { color: var(--accent); }
.intel-sev { color: var(--text-3); }

/* Severity-Farbkante an Karte/Brief */
.sev-1 { border-left-color: var(--sev-low); }
.sev-2 { border-left-color: var(--sev-low); }
.sev-3 { border-left-color: var(--sev-mid); }
.sev-4 { border-left-color: var(--sev-high); }
.sev-5 { border-left-color: var(--sev-max); }

/* INTEL-Brief */
.intel-brief { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-m); background: var(--surface); padding: 24px 26px; margin-top: 18px; }
.intel-brief h1 { font-size: clamp(26px, 4vw, 40px); margin: 10px 0 2px; }
.intel-brief > time { font-family: var(--fmono); font-size: 12px; color: var(--text-3); }
.intel-block { margin-top: 26px; }
.intel-block h2 { font-size: 15px; letter-spacing: .12em; color: var(--text-3); }
.intel-block p { color: var(--text); }
.intel-guide-link { display: inline-block; margin-top: 8px; color: var(--accent); font-family: var(--fmono); font-size: 13px; }
/* „Was jetzt zu tun ist"-Block: der Container-Selektor stylt BEIDE internen Links (Anleitung + Gefahren-
   Kapitel) einheitlich als erkennbare Links — sonst erscheint der Gefahren-Link wegen des globalen
   a { color: inherit; text-decoration: none } als normaler Fliesstext (a11y/Design). Spiegelt das etablierte
   .cross-link-Muster, rein token-getrieben, keine Inline-Styles. */
.intel-actionnow { border-left: 3px solid var(--accent); padding-left: 16px; }
.intel-actionnow-links { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-top: 12px; }
.intel-actionnow-links a { color: var(--accent); font-family: var(--fmono); font-size: 13px; letter-spacing: .03em; }
.intel-actionnow-links a:hover, .intel-actionnow-links a:focus-visible { text-decoration: underline; }
.intel-brief-foot { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; font-family: var(--fmono); font-size: 12px; }
.intel-brief-foot a { color: var(--text-2); }

/* Risiko-Matrix (5x5 CSS-Grid) */
.risk-matrix { margin: 6px 0 0; }
.rm-grid { display: grid; grid-template-columns: auto repeat(5, 1fr); grid-template-rows: repeat(5, 1fr) auto; gap: 3px; max-width: 360px; }
.rm-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r-s); font-family: var(--fmono); font-weight: 700; color: #0b0d0f; grid-column: span 1; }
.rm-grid .rm-cell:nth-child(6n + 1) { } /* Achsen-Beschriftung sitzt separat */
.rm-low { background: var(--sev-low); }
.rm-medium { background: var(--sev-mid); }
.rm-high { background: var(--sev-high); }
.rm-critical { background: var(--sev-max); }
.rm-hit { outline: 3px solid var(--text); outline-offset: -3px; }
.rm-axis-y { grid-row: 1 / span 5; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--fmono); font-size: 10px; letter-spacing: .12em; color: var(--text-3); text-align: center; }
.rm-axis-x { grid-row: 6; grid-column: 2 / span 5; font-family: var(--fmono); font-size: 10px; letter-spacing: .12em; color: var(--text-3); text-align: center; padding-top: 4px; }
.risk-matrix figcaption { font-family: var(--fmono); font-size: 12px; color: var(--text-2); margin-top: 10px; }

/* Karte — Leaflet mit lokalen Swisstopo-Tiles (§19). Container braucht eine feste Höhe, sonst rendert
   Leaflet in 0px (unsichtbar). min-height reserviert den Platz schon vor dem Tile-Load (CLS-Schutz, §21).
   isolation: isolate kapselt die Leaflet-internen z-index (200–1000 der Panes/Popups) in einen eigenen
   Stacking-Context; sonst überstiegen sie im Root-Context das mobile Menü (z-index 70) und den Sticky-Header
   (50) und überdeckten diese. Der Kartencontainer selbst bleibt im Fluss unter beiden. Popups innerhalb der
   Karte bleiben unberührt, weil ihr Kontext lokal bleibt. */
.lage-map { position: relative; height: 460px; min-height: 460px; border: 1px solid var(--line); border-radius: var(--r-m); margin: 18px 0; background: #0b1620; isolation: isolate; }
.lage-map-detail { height: 320px; min-height: 320px; }
.lage-asof { color: var(--text-3); font-size: .85rem; margin: 6px 0 0; text-align: center; }

/* Schweregrad-Badge (Spec §5): Farbe (data-sev) + Icon + Wort-Label zusammen — Farbe nie allein (WCAG 1.4.1).
   5-Stufen-CAP-/CH-Skala; --sev fällt für ungültige Werte auf eine neutrale Linie zurück. */
.sev-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fmono); font-size: 11px; letter-spacing: .06em; color: var(--text-2); --sev: var(--line-2); }
.sev-badge[data-sev="1"] { --sev: var(--sev-low); }
.sev-badge[data-sev="2"] { --sev: var(--sev-mid); }
.sev-badge[data-sev="3"] { --sev: var(--sev-high); }
.sev-badge[data-sev="4"] { --sev: var(--sev-max); }
.sev-badge[data-sev="5"] { --sev: var(--sev-extreme); }
.sev-badge-icon { width: 14px; height: 14px; color: var(--sev); flex: 0 0 auto; }
/* Zahl bewusst in lesbarer Textfarbe (var(--text-2)) statt in der hellen Severity-Hue: auf hellem Grund
   verfehlten die Stufen 1–4 als echter Text WCAG AA. Der Schweregrad bleibt redundant über Icon-Farbe und
   Wort-Label codiert (WCAG 1.4.1), die Zahl ist damit auch im Light-Theme sicher lesbar. */
.sev-badge-num { color: var(--text-2); font-weight: 700; }
.sev-badge-label { text-transform: uppercase; }

/* Frische-Header (Spec §2): Stand + Zeitzone + nächste Aktualisierung, darunter die Quellen-Frische-Leiste. */
.lage-freshness { color: var(--text-3); font-size: .85rem; margin: 8px 0 0; text-align: center; }
.lage-freshness-next { color: var(--text-3); }
.lage-source-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 8px 0 0; padding: 0; font-family: var(--fmono); font-size: 11px; }
.lage-source { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.lage-source-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sev-low); flex: 0 0 auto; }
.lage-source[data-state="stale"] .lage-source-dot { background: var(--sev-mid); }
.lage-source[data-state="nodata"] .lage-source-dot { background: var(--text-3); }
.lage-source-state { text-transform: uppercase; letter-spacing: .06em; }

/* „Datenlage unvollständig"-Banner (Spec §3): neutrale Amber-Info-Optik, NICHT die Severity-Palette
   (Confidence nicht mit Schweregrad mischen). Icon + Titel + Text (WCAG 1.4.1). */
.lage-degraded { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--sev-mid); border-left: 4px solid var(--sev-mid); border-radius: var(--r-m); background: color-mix(in srgb, var(--sev-mid) 12%, var(--surface)); }
.lage-degraded-icon { color: var(--sev-mid); flex: 0 0 auto; }
.lage-degraded-icon svg { width: 20px; height: 20px; display: block; }
.lage-degraded-title { margin: 0 0 6px; font-family: var(--fmono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); font-weight: 700; }
.lage-degraded-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lage-degraded-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; color: var(--text-2); font-size: .9rem; }
.lage-degraded-rel { font-family: var(--fmono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 1px 6px; }
.lage-degraded-note { margin: 8px 0 0; color: var(--text-3); font-size: .85rem; }

/* Warnflächen-Status-Overlay der Karte (Spec §4): lädt/leer/Fehler. Standard versteckt; erscheint erst,
   sobald das JS ein data-state setzt. Sichtbarkeit ausschliesslich über die Klasse, kein inline style (CSP). */
.lage-warnstatus { display: none; position: absolute; left: 12px; bottom: 12px; z-index: 500; max-width: 260px; padding: 7px 11px; border-radius: var(--r-s); background: rgba(8, 16, 24, .92); border: 1px solid var(--line); color: var(--text-2); font-family: var(--fmono); font-size: 11px; line-height: 1.35; box-shadow: 0 4px 18px rgba(0, 0, 0, .4); }
.lage-warnstatus[data-state] { display: block; }
.lage-warnstatus[data-state="error"] { border-color: var(--sev-mid); }
.leaflet-container { background: #0b1620; font: inherit; border-radius: var(--r-m); }
.leaflet-popup-content a { color: var(--accent); }

/* Karten-Filter-Panel (§19): Gefahren-Layer und Ereignisse einzeln/kombiniert ein-/ausblenden. */
.lage-filter { background: rgba(8, 16, 24, .92); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; box-shadow: 0 4px 18px rgba(0,0,0,.4); max-width: 220px; }
.lage-filter-title { margin: 0 0 8px; font-family: var(--fmono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
/* Touch-Ziele der Karten-Filter (17.07.2026): Die Checkboxen hatten KEINE Grösse und liefen damit auf den
   13×13px-Browser-Default — auf einem Touchscreen kaum zu treffen (WCAG 2.2 SC 2.5.8 verlangt 24×24).
   Betraf 8 Elemente, mobil UND desktop. Die Spacing-Ausnahme der Norm griff nicht: bei padding 3px lagen die
   Zentren nur ~19px auseinander, die 24px-Kreise hätten sich geschnitten. Daher beides — 24px-Ziel und
   grösserer Abstand. Die Filter-Box ist ein Overlay über der Karte und wird primär mit dem Finger bedient;
   grosszügige Ziele sind hier richtig, nicht bloss geduldet. */
.lage-filter-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; min-height: 32px; font-size: 13px; color: var(--text); cursor: pointer; }
.lage-filter-row input { accent-color: var(--accent); margin: 0; cursor: pointer; width: 24px; height: 24px; flex: 0 0 auto; }
.lage-filter-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.3); flex: 0 0 auto; }
.lage-filter-label { line-height: 1.2; }
/* Die Filter-Box ist bewusst IMMER dunkel (Overlay über der Karte). Im Light-Mode werden
   var(--text)/var(--text-3) dunkel → dunkler Text auf dunkler Box (unlesbar). Darum den
   Filter-Text im Light-Mode fix hell halten (identisch zum Dark-Mode-Erscheinungsbild). */
:root[data-theme="light"] .lage-filter-title { color: #9aa1a8; }
:root[data-theme="light"] .lage-filter-row { color: #ece8de; }
.intel-coords { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2, rgba(255,255,255,.02)); }
.intel-coords dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.intel-coords dd { margin: 0; font-family: var(--fmono); font-size: .9rem; color: var(--text); }
.intel-coords dd.intel-coords-dms { font-size: .8rem; color: var(--text-3); margin-top: 2px; }
.intel-back-row { margin: 4px 0 14px; }
.intel-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text); text-decoration: none; font-size: .9rem; background: var(--surface-2, rgba(255,255,255,.02)); }
.intel-back:hover, .intel-back:focus-visible { border-color: var(--accent); color: var(--accent); }

/* Gap-Tabelle */
.intel-gap-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.intel-gap-table th, .intel-gap-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.intel-gap-table th { font-family: var(--fmono); font-size: 11px; letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.gap-ok { color: var(--sev-low); font-family: var(--fmono); font-size: 12px; }
.gap-missing { color: var(--sev-max); font-family: var(--fmono); font-size: 12px; }

/* ============================================================================
   KAPITEL 09 — FINANZEN (/finanzen)
   Klar abgegrenzte Regeln; nutzen ausschliesslich die bestehende Typo-Skala
   und Design-Tokens (keine globalen Tokens geaendert). Alle hier gestylten
   Klassen (fin-*, quellen-*, faq-item) werden nur im Finanzen-Kapitel genutzt.
   Schriftgroessen folgen der Detailseiten-Skala:
     Sektion-h2 1.25rem · Lead 1.05rem · Body 1rem · Tabelle .95rem ·
     Tabellenkopf/Labels .78rem mono-uppercase · Fussnote/Sub .85rem
   ========================================================================== */

/* Stand-/Datums-Zeile ("Stand: …") — kleine Mono-Meta-Zeile wie uebrige Labels. */
.fin-asof {
  font-family: var(--fmono); font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 14px;
}

/* Pflicht-Disclaimer — Warn-Note. Titel als dezente Note-Ueberschrift
   (Body-Font), nicht als grosse Display-Headline: ueberschreibt die globale
   h1/h2-Display-Regel, damit die Schriftgroesse zur Box passt. */
.fin-disclaimer { margin: 0 0 24px; }
.fin-disclaimer .fin-disclaimer-title {
  font-family: var(--fbody); text-transform: none; font-weight: 700;
  font-size: 1.05rem; line-height: 1.3; margin: 0 0 8px;
}
.fin-disclaimer p { margin: 0; color: var(--text-2); line-height: 1.55; }

/* ---- Kurscharts-Raster (Sparklines) ---- */
.fin-chart-grid {
  display: grid; gap: 16px; margin: 8px 0 26px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.fin-chart-card {
  margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--surface-2); padding: 14px 16px;
}
.fin-chart-card svg { display: block; width: 100%; height: auto; margin: 8px 0; }
.fin-chart-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.fin-chart-ticker {
  font-family: var(--fmono); font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}
.fin-chart-close { font-family: var(--fmono); font-size: .8rem; color: var(--accent); }
.fin-chart-asof, .fin-chart-nodata {
  margin: 4px 0 0; font-family: var(--fmono); font-size: .72rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-3);
}
.fin-chart-disclaimer {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.45; color: var(--text-3);
}

/* ---- Firmengeflecht-Grafik ---- */
.fin-graph { margin: 0 0 16px; }
.fin-graph svg { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
.fin-graph figcaption {
  margin-top: 8px; font-family: var(--fmono); font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}

/* Aufklapp-Bereiche: Legende & Beziehungstabelle (barrierearme Text-Alternative). */
.fin-legend, .fin-relations { margin: 0 0 16px; }
.fin-legend > summary, .fin-relations > summary {
  cursor: pointer; padding: 6px 0; font-family: var(--fmono); font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
.fin-legend-table, .fin-rel-table {
  width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: .95rem;
}
.fin-legend-table th, .fin-rel-table th,
.fin-legend-table td, .fin-rel-table td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.fin-legend-table thead th, .fin-rel-table thead th {
  color: var(--text-3); font-family: var(--fmono); font-size: .78rem;
  letter-spacing: .03em; text-transform: uppercase;
}

/* ---- Firmen-Karten (aufklappbar, nach Rolle gruppiert) ---- */
.fin-cards-lead { margin: 0 0 16px; color: var(--text-2); line-height: 1.55; }
.fin-card-group {
  margin: 22px 0 12px; font-size: .85rem; font-family: var(--fmono);
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
}
.fin-card-grid {
  display: grid; gap: 12px; margin: 0 0 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* Karten NICHT auf Reihenhöhe strecken: nur die aufgeklappte Karte wächst,
     die übrigen in derselben Reihe bleiben kompakt (sonst leere grosse Boxen). */
  align-items: start;
}
.fin-card {
  margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--surface-2);
}
.fin-card > summary.fin-card-summary {
  cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between; gap: 8px;
}
.fin-card-name { font-weight: 700; font-size: 1rem; color: var(--text); }
.fin-card-meta {
  font-family: var(--fmono); font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
}
.fin-card-body { padding: 0 16px 14px; }
.fin-card-industry {
  margin: 0 0 10px; font-size: .85rem; color: var(--text-3);
  border-top: 1px solid var(--line); padding-top: 10px;
}
.fin-card-facts { margin: 0; }
.fin-card-facts dt {
  margin: 8px 0 2px; font-family: var(--fmono); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.fin-card-facts dd { margin: 0; color: var(--text-2); line-height: 1.5; font-size: .92rem; }
.fin-card-source { margin: 12px 0 0; }
.fin-card-source a {
  font-family: var(--fmono); font-size: .76rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent);
}

/* ---- FAQ (Aufklapp-Liste) ---- */
/* FAQ-Abschnitt der Tool-Seiten folgt direkt auf die Cluster-Verweise (.cross-link) — ohne
   eigenen Abstand klebt die „Häufige Fragen"-Überschrift an der Verweiszeile darüber. */
.faq-section { margin-top: 38px; }
.faq-item {
  margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface-2);
}
.faq-item > summary {
  cursor: pointer; padding: 12px 16px; font-size: 1rem; font-weight: 600;
  line-height: 1.4;
}
.faq-item > p { margin: 0; padding: 0 16px 14px; color: var(--text-2); line-height: 1.55; }

/* ---- Quellen / Fussnoten (nummerierte Liste am Seitenende) ---- */
.quellen { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.quellen > h2 { font-size: 1.25rem; margin: 0 0 14px; }
.quellen-list { margin: 0; padding-left: 1.5em; list-style: decimal; }
.quellen-item { margin: 0 0 12px; font-size: .9rem; line-height: 1.55; color: var(--text-2); }
.quellen-publisher { font-weight: 600; color: var(--text); }
.quellen-item cite { font-style: italic; }
.quellen-date { font-family: var(--fmono); font-size: .8rem; color: var(--text-3); }
.quellen-quote {
  margin: 6px 0; padding: 8px 12px; border-left: 2px solid var(--accent-line);
  font-size: .9rem; line-height: 1.5; color: var(--text-2);
}
.quellen-links { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-left: 4px; }
.quellen-links a {
  font-family: var(--fmono); font-size: .78rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent);
}
.quellen-links a:hover, .quellen-links a:focus-visible { text-decoration: underline; }

/* ============================================================
   Lage-Kennzahlen-Panel + Situationskugel (§21 D)
   Farbband je Perzentil-Stufe nur über CSS-Variable (--accent),
   keine Inline-Styles → CSP 'self' bleibt intakt.
   ============================================================ */

/* Perzentil-Stufen: grün ≤ p25, orange Mittelband, rot ≥ p75. */
.level-low  { --accent: var(--sev-low); }
.level-mid  { --accent: var(--sev-high); }
.level-high { --accent: var(--sev-max); }

/* ---- Situationskugel ---- */
.situation {
  display: flex; gap: clamp(16px, 3vw, 32px); align-items: center;
  flex-wrap: wrap; margin: 18px 0 26px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface);
}
.situation-orb-wrap { flex: none; width: clamp(96px, 18vw, 140px); }
.situation-orb { display: block; width: 100%; height: auto; }
.situation-body { flex: 1 1 240px; min-width: 220px; }
.situation-kicker {
  margin: 0; font-family: var(--fmono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.situation-status { margin: 4px 0 8px; font-family: var(--fdisp); font-size: 28px; font-weight: 700; line-height: 1.05; }
.situation-status.status-calm    { color: var(--sev-low); }
.situation-status.status-elevated{ color: var(--sev-mid-ink); }
.situation-status.status-high    { color: var(--sev-high); }
.situation-status.status-crisis  { color: var(--sev-max); }
.situation-status.status-unknown { color: var(--text-3); }
.situation-disclaimer { margin: 0 0 8px; color: var(--text-2); font-size: .85rem; line-height: 1.5; }
.situation-drivers > summary { cursor: pointer; font-family: var(--fmono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.situation-drivers ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.situation-drivers li { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; }
.situation-drivers .driver-value { font-family: var(--fmono); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
/* Startseiten-Kurzansicht der Gesamtlage: nur Text (kein Orb) – .situation-status ohne status-*-Modifier
   bleibt bewusst in der Standard-Textfarbe, damit neben AdSense kein dunkelroter Krisen-Ton entsteht. */
.situation-lite { margin: 0 0 20px; }
/* Zwischenüberschrift des Tool-Blocks (Anleitungen/Startseite): unter dem Section-Header, über dem Grid. */
.tools-lead { margin: 34px 0 16px; font-family: var(--fdisp); font-size: 20px; font-weight: 700; }

/* ---- Kennzahl-Panel ---- */
.indicator-panel { margin: 28px 0 8px; }
.indicator-panel-title { font-family: var(--fdisp); font-size: 24px; margin: 0 0 14px; }
.indicator-group { margin: 0 0 22px; }
.indicator-group-title {
  font-family: var(--fmono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.indicator-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.indicator-card {
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-s);
  background: var(--surface-2); padding: 14px 16px;
}
.indicator-card svg { display: block; width: 100%; height: auto; margin: 8px 0; }
.indicator-card svg .spark { stroke: var(--accent); }
.indicator-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.indicator-label { font-family: var(--fmono); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.indicator-trend { color: var(--accent); font-size: 1rem; }
.indicator-value { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.indicator-number { font-family: var(--fdisp); font-size: 26px; font-weight: 700; line-height: 1; }
.indicator-unit { font-family: var(--fmono); font-size: .74rem; color: var(--text-3); }
.indicator-meta { margin: 0; display: flex; gap: 10px; font-family: var(--fmono); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.indicator-level { color: var(--accent); }
.indicator-src { display: inline-block; margin-top: 6px; font-family: var(--fmono); font-size: .72rem; letter-spacing: .03em; color: var(--text-3); }
.indicator-src:hover, .indicator-src:focus-visible { color: var(--accent); text-decoration: underline; }
.indicator-note { margin-top: 8px; }
.indicator-note > summary { cursor: pointer; font-family: var(--fmono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.indicator-note p { margin: 8px 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-2); }
.indicator-note .indicator-noadvice { color: var(--text-3); font-style: italic; }
.indicator-inflation { margin: 6px 0 0; font-size: .85rem; color: var(--text-2); }
.indicator-inflation a { color: var(--accent); }

/* ---- „Stand veraltet"-Badge (Defekt A/B) ----
   Greift, wenn die Quelle nicht mehr im erwarteten Takt publiziert (IndicatorCadenceTolerance). Baut auf dem
   kanonischen .badge-Primitive auf und färbt nur um — bewusst Warn-Amber statt Rot: der Wert ist nicht falsch,
   nur alt. Reine Klasse, KEIN Inline-Style (CSP: style-src 'self'). Text UND Rahmen nutzen --sev-mid-ink
   (im Light-Mode abgedunkelt für WCAG-AA; im Dark-Mode = --sev-mid), damit die Amber-Schrift auf hellem Grund
   lesbar bleibt. */
.indicator-stale-row { margin: 4px 0 0; }
.indicator-stale { border-color: var(--sev-mid-ink); color: var(--sev-mid-ink); background: transparent; }

/* ---- G/S/R-Komponenten-Strip der Sonnensturm-Karte (Feature 1) ----
   Optik am kanonischen .badge-Primitive (badge-official) ausgerichtet: gefüllter Pill-Chip mit
   weichem Tint. Die Level-Farbe kommt über die mitgegebene level-*-Klasse (--accent); Tint/Border
   werden – analog zu --accent-soft/--accent-line – per color-mix aus der Level-Farbe abgeleitet,
   sodass R/S/G ihre Severity-Farbe tragen, aber nicht lauter wirken als die restlichen Badges. */
.sw-badges { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sw-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  font-family: var(--fmono); font-size: 10.5px; line-height: 1.4;
  letter-spacing: .04em; color: var(--accent); white-space: nowrap;
}
.sw-badge-key { font-weight: 700; }
.sw-badge-val { color: var(--text-2); }

/* ---- Sonnenzyklus-Fortschrittsleiste (Feature 2) ----
   Position/Füllung über die CSS-Variable --sc-pos, die eine der vordefinierten Positionsklassen
   (sc-pos-0 … sc-pos-100) setzt — KEIN Inline-Style (CSP style-src 'self'). Design-Agent verfeinert später. */
.solar-cycle .sc-phase { margin: 0 0 10px; font-family: var(--fmono); font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); }
.sc-track {
  --sc-pos: 0%;
  position: relative; height: 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); overflow: visible;
}
.sc-fill { position: absolute; inset: 0 auto 0 0; width: var(--sc-pos); border-radius: 999px; background: var(--sev-high); }
.sc-marker {
  position: absolute; top: 50%; left: var(--sc-pos);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--sev-max); border: 2px solid var(--surface);
}
.sc-scale { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; font-family: var(--fmono); font-size: .72rem; color: var(--text-3); }
.sc-why { margin: 12px 0 0; color: var(--text-2); line-height: 1.55; }
.sc-why strong { color: var(--text); }

/* Vordefinierte Positionsstufen in 5%-Schritten (server wählt die passende Klasse). */
.sc-pos-0   { --sc-pos: 0%; }
.sc-pos-5   { --sc-pos: 5%; }
.sc-pos-10  { --sc-pos: 10%; }
.sc-pos-15  { --sc-pos: 15%; }
.sc-pos-20  { --sc-pos: 20%; }
.sc-pos-25  { --sc-pos: 25%; }
.sc-pos-30  { --sc-pos: 30%; }
.sc-pos-35  { --sc-pos: 35%; }
.sc-pos-40  { --sc-pos: 40%; }
.sc-pos-45  { --sc-pos: 45%; }
.sc-pos-50  { --sc-pos: 50%; }
.sc-pos-55  { --sc-pos: 55%; }
.sc-pos-60  { --sc-pos: 60%; }
.sc-pos-65  { --sc-pos: 65%; }
.sc-pos-70  { --sc-pos: 70%; }
.sc-pos-75  { --sc-pos: 75%; }
.sc-pos-80  { --sc-pos: 80%; }
.sc-pos-85  { --sc-pos: 85%; }
.sc-pos-90  { --sc-pos: 90%; }
.sc-pos-95  { --sc-pos: 95%; }
.sc-pos-100 { --sc-pos: 100%; }

/* ---- Zahlen-/Trend-Block (steigende Fallzahlen, z. B. Schockanruf) ----
   Balkenhöhe über die CSS-Variable --st-h aus einer vordefinierten Höhenklasse (st-bar-h-0 … st-bar-h-100
   in 5%-Schritten, absolute px) — KEIN Inline-Style (CSP style-src 'self'), analog zur Sonnenzyklus-Leiste.
   Design-Agent verfeinert später. */
.stat-trend .st-intro { margin: 0 0 18px; color: var(--text-2); line-height: 1.55; }
.st-chart { display: flex; align-items: flex-end; gap: 22px; min-height: 176px; padding: 6px 0 0; }
.st-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; flex: 0 0 auto; min-width: 68px; }
.st-bar { --st-h: 0px; width: 48px; height: var(--st-h); min-height: 4px; border-radius: 7px 7px 0 0; background: var(--sev-high); }
.st-bar-val { font-family: var(--fmono); font-weight: 700; font-size: .92rem; color: var(--text); margin: 0 0 7px; }
.st-bar-period { align-self: stretch; text-align: center; padding-top: 8px; border-top: 1px solid var(--line-2); font-family: var(--fmono); font-size: .74rem; letter-spacing: .03em; color: var(--text-3); }
.st-caption { margin: 12px 0 0; font-size: .8rem; color: var(--text-3); line-height: 1.5; }
.st-figures { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.st-figure { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.st-fig-val { font-family: var(--fmono); font-weight: 700; font-size: 1.08rem; color: var(--text); }
.st-fig-label { color: var(--text); line-height: 1.4; }
.st-fig-scope { font-size: .74rem; color: var(--text-2); font-style: italic; }
.st-fig-src { font-size: .72rem; color: var(--text-3); }
.st-note { margin: 18px 0 0; font-size: .82rem; color: var(--text-2); line-height: 1.55; }

/* Vordefinierte Höhenstufen in 5%-Schritten (server wählt die passende Klasse; 100% = 160px). */
.st-bar-h-0   { --st-h: 0px; }
.st-bar-h-5   { --st-h: 8px; }
.st-bar-h-10  { --st-h: 16px; }
.st-bar-h-15  { --st-h: 24px; }
.st-bar-h-20  { --st-h: 32px; }
.st-bar-h-25  { --st-h: 40px; }
.st-bar-h-30  { --st-h: 48px; }
.st-bar-h-35  { --st-h: 56px; }
.st-bar-h-40  { --st-h: 64px; }
.st-bar-h-45  { --st-h: 72px; }
.st-bar-h-50  { --st-h: 80px; }
.st-bar-h-55  { --st-h: 88px; }
.st-bar-h-60  { --st-h: 96px; }
.st-bar-h-65  { --st-h: 104px; }
.st-bar-h-70  { --st-h: 112px; }
.st-bar-h-75  { --st-h: 120px; }
.st-bar-h-80  { --st-h: 128px; }
.st-bar-h-85  { --st-h: 136px; }
.st-bar-h-90  { --st-h: 144px; }
.st-bar-h-95  { --st-h: 152px; }
.st-bar-h-100 { --st-h: 160px; }

/* ---- Erklär-Legende ---- */
.lage-legend { margin: 22px 0 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.lage-legend > summary { cursor: pointer; font-family: var(--fmono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.lage-legend-body p { margin: 10px 0 0; font-size: .85rem; line-height: 1.55; color: var(--text-2); }
.lage-legend .legend-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.legend-chip { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--accent); vertical-align: middle; }
.legend-disclaimer { color: var(--text-3); font-style: italic; }

/* GEO-/E-E-A-T-Retrofit: Answer-First, Prüfdatum und Referenztabellen (server-gerendert). */
.detail-reviewed { font-family: var(--fmono); font-size: 12px; letter-spacing: .04em; color: var(--text-3); margin: 6px 0 0; }
.answer-first {
  margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: var(--r-m); color: var(--text);
  font-size: 17px; line-height: 1.55;
}
.table-wrap { overflow-x: auto; margin: 6px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table caption { text-align: left; font-family: var(--fmono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-bottom: 8px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
/* Typografie kommt aus der geteilten Regel (.ref-table thead th, .data-table thead th);
   hier nur die tabellenspezifische Trennlinie + Umbruchschutz. */
.data-table thead th { border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.data-table tbody th[scope="row"] { color: var(--text); font-weight: 600; }
.table-note { color: var(--text-3); font-style: italic; font-size: 13px; margin-top: 8px; }

/* ---- Produktboxen (informativ + affiliate-fähig, server-rendered, kein JS) ---- */
.product-picks { margin: 0 0 26px; }
.affiliate-disclosure {
  margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--line-2);
  background: var(--surface-2); border-radius: var(--r-s);
  color: var(--text-3); font-size: 13px; line-height: 1.5;
}
.product-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.product-card {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface-2); padding: 16px;
}
.product-card > h3 { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.3; }
.product-cat {
  margin: 0 0 10px; font-family: var(--fmono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.product-card > p { margin: 0 0 10px; color: var(--text-2); line-height: 1.55; font-size: .95rem; }
.product-criteria { margin: 0 0 12px; padding-left: 18px; }
.product-criteria li { margin: 0 0 6px; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.product-link { margin: 4px 0 0; }
.product-price { display: inline-block; margin-left: 10px; color: var(--text-3); font-size: .9rem; }
.product-note { margin: 8px 0 0; color: var(--text-3); font-style: italic; font-size: 12px; line-height: 1.45; }

/* ============================================================
   TOOL-SEITEN — Notvorrat-Rechner & Checklisten-Generator
   Präsentation der server-gerenderten Formulare/Ergebnisse. Ergänzt die
   zuvor undefinierten semantischen Klassen im bestehenden Karten-/Referenz-
   Look; ausschliesslich Design-Tokens → Light/Dark laufen automatisch mit.
   Textlängen fr/it/en: keine festen Breiten, flex-wrap + overflow-wrap.
   ============================================================ */

/* ---- Badges: amtlich (Wasser) vs. Richtwert (Lebensmittel) ---- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--fmono); font-size: 10.5px; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2);
  white-space: nowrap;
}
.badge-official { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.badge-guideline { border-color: var(--line); color: var(--text-3); }
/* flex-wrap ist Pflicht: die längeren fr/it-Badge-Labels dürfen nicht überlaufen. */
.badge-legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: .6rem 0 0; }

/* ---- Hinweis-Karten (callout) ---- */
.callout {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); padding: 16px 18px; margin: 0 0 22px;
}
.callout-note { border-left: 3px solid var(--accent); }
/* Callout-Titel klein halten: überschreibt die globale h2-Display-Regel. */
.callout h2 {
  font-family: var(--fmono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 8px;
}
.callout p { margin: 0 0 8px; color: var(--text-2); line-height: 1.55; }
.callout p:last-child { margin-bottom: 0; }
/* «Das gibt der Bund vor»-Block auf der Checklisten-Detailseite: optisch als amtliche Grundlage
   abgesetzt, damit der Leser sie von der weitergehenden 30-Tage-Empfehlung darunter unterscheidet
   (Auftrag Marco 26.07.2026 — beide Ebenen sichtbar). Nutzt den callout-Grundstil, nur der
   Akzentstreifen wird neutraler und der Block bekommt etwas Abstand nach unten. */
.baseline-bund { border-left-color: var(--text-3); margin-bottom: 24px; }
.baseline-bund h2::before { content: "§ "; color: var(--text-3); }
/* Listen im Callout: Der globale Reset (ul { list-style: none; padding: 0 }) lässt sie sonst als
   Fliesstext-Block erscheinen — und weil .callout keine li-Regel hatte, erbten die Einträge --text
   und leuchteten heller als ihr eigener Einleitungssatz in --text-2. Site-weit statt nur in
   spiel.css, weil der Spiele-Hub (Views/Spiel/Index.cshtml) spiel.css bewusst nicht lädt. */
.callout ul { margin: 0; padding-left: 1.2rem; list-style: disc; }
.callout li { color: var(--text-2); line-height: 1.55; margin-bottom: .3rem; }
.callout li:last-child { margin-bottom: 0; }

/* ---- Tool-Formulare: Fieldset als Karte statt Browser-Default ---- */
.tool-form { margin: 0 0 26px; }
.tool-form fieldset {
  border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 18px 18px 20px; margin: 0 0 20px; background: var(--surface);
}
/* Legende als Mono-Kicker (kein Rahmen-durch-Text-Look des Defaults). */
.tool-form legend {
  font-family: var(--fmono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); padding: 0 8px;
}
/* Responsive 2-spaltiges Raster; auto-fit + minmax verhindert Abschneiden in allen Sprachen. */
.form-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Im Raster steuert die grid-gap die Abstände; Basis-Zeilenmarge (Auth-Form) neutralisieren. */
.form-grid .form-row { margin: 0; }
/* Options-Checkboxen (Gefahren/Bedürfnisse/Ausrüstung) enger gruppieren als Auth-Zeilen. */
.tool-form .form-check { margin: 0 0 10px; }
.tool-form .form-check:last-child { margin-bottom: 0; }

/* ---- Ergebnis: prominente amtliche Trinkwasser-Kennzahl ---- */
.result-water {
  margin: 0 0 20px; padding: 16px 18px;
  border: 1px solid var(--accent-line); border-left: 4px solid var(--accent);
  border-radius: var(--r-s); background: var(--accent-soft);
  font-size: clamp(17px, 2.4vw, 22px); line-height: 1.4; color: var(--text);
  overflow-wrap: break-word;
}
.result-water strong { font-weight: 700; }

/* Bildschirm-Aktionsleiste über dem Ergebnis (Druck-Button). */
.tool-result-actions { margin: 0 0 18px; }

/* ---- Generator-Ergebnis: Gruppen + Positionen ---- */
.checklist-group { margin: 0 0 22px; }
.checklist-group > h3 {
  font-family: var(--fdisp); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: .01em;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-2); margin: 0 0 4px;
}
.checklist-items { list-style: none; margin: 0; padding: 0; }
.checklist-items > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.checklist-items > li:last-child { border-bottom: 0; }
.checklist-items .item-text { flex: 1 1 200px; overflow-wrap: break-word; }
/* Menge mono, rechtsbündig ausgerichtet. */
.checklist-items .item-amount {
  margin-left: auto; font-family: var(--fmono); font-size: 13px;
  color: var(--accent); white-space: nowrap; text-align: right;
}

/* ---- Reminder-/Zusatz-Hinweis (Haustier/Säugling/Ausrüstung) ---- */
.hint { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.45; color: var(--text-3); }
/* Als eigener Block unter dem Legenden-Titel im Ausrüstungs-Fieldset. */
.tool-form .hint { margin: 4px 0 12px; }
/* Im Generator-Ergebnis: eigene Zeile unter Text/Menge. */
.checklist-items .hint { flex-basis: 100%; margin-top: 2px; }

/* ---- Cluster-Verlinkung (Rückweg zum Pillar/Vorlagen) ---- */
.cross-link { margin: 14px 0 0; }
.cross-link a { color: var(--accent); font-family: var(--fmono); font-size: 13px; letter-spacing: .03em; }
.cross-link a:hover, .cross-link a:focus-visible { text-decoration: underline; }

/* ---- Print: Tool-Ergebnis (Rechner/Generator) sauber ausdrucken ----
   Ergänzt den globalen Print-Block (§4, oben): dort werden bereits Rail/SOS/
   Footer/Ads/.no-print schwarz-auf-weiss ausgeblendet. Hier zusätzlich die
   Eingabe- und Sekundär-Blöcke ausblenden, damit NUR Titel + Ergebnis drucken. */
@media print {
  .tool-form, .cross-link, .adopt, .faq-section, .tool-result-actions { display: none !important; }
  .result-water { border: 1px solid #000; background: #fff; }
  .badge { border: 1px solid #000; background: #fff; color: #000; }
  .callout { border: 1px solid #000; }
  .checklist-group > h3, .checklist-items > li { border-bottom: 1px solid #000; }
}

/* ---- Krisen-Zeitstrahl (§20 „Wertsachen in Krisen"): der DOM bleibt eine echte, semantische
   <table> (crawlbar, AI-extrahierbar, barrierefrei, druckbar); die Zeitstrahl-Optik entsteht rein
   per CSS, KEIN JS und keine Inline-Styles (CSP). Desktop-first (Site-Konvention: max-width-
   Breakpoints): Basis = horizontale Stufen-Karten, unter 640px vertikaler Stapel. Das <thead>
   bleibt im DOM für den Screenreader-Spaltenbezug und wird nur visuell entfernt; die sichtbaren
   Spaltenlabels der Kartenansicht kommen aus dem data-col-Attribut (::before). ---- */
.fin-timeline { margin: 8px 0 4px; }
.fin-timeline-table { display: block; width: 100%; border-collapse: collapse; }
.fin-timeline-table caption { display: block; text-align: left; font-family: var(--fmono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-bottom: 12px; }
.fin-timeline-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fin-timeline-table tbody { display: flex; gap: 12px; align-items: stretch; }
.fin-timeline-table tbody tr { display: flex; flex-direction: column; flex: 1 1 0; min-width: 190px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); overflow: hidden; }
.fin-timeline-table tbody th[scope="row"] { position: relative; font-family: var(--fmono); font-size: 13px; letter-spacing: .04em; color: var(--text); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fin-timeline-table tbody th[scope="row"]::before { content: ""; position: absolute; left: 14px; bottom: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); z-index: 1; }
.fin-timeline-table tbody td { display: block; padding: 10px 14px; border: 0; font-size: 14px; color: var(--text-2); }
.fin-timeline-table tbody td::before { content: attr(data-col); display: block; font-family: var(--fmono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.fin-timeline-table tfoot { display: block; }
.fin-timeline-table tfoot td { display: block; padding: 12px 0 0; border: 0; color: var(--text-3); font-style: italic; font-size: 12.5px; }
.fin-timeline-table tfoot td::before { content: none; }
.fin-timeline-note { color: var(--text-3); font-style: italic; font-size: 13px; margin-top: 10px; }
@media (max-width: 640px) {
  .fin-timeline-table tbody { flex-direction: column; }
  .fin-timeline-table tbody tr { min-width: 0; }
  .fin-timeline-table tbody th[scope="row"]::before { top: 50%; bottom: auto; left: -5px; transform: translateY(-50%); }
}

/* ============================================================================
   Produkt-Review-Section „Tests" (Dark-Launch). Rein serverseitig gerendert,
   keine Inline-Styles: der Score-Balken nutzt feste Utility-Klassen .score-1..5
   (CSP style-src ohne unsafe-inline). Der halbe Stern kommt aus einem Gradient-
   Clip (.star.half), nicht aus JS. Ein Rating ist nie rein grafisch — der Zahlwert
   steht immer als Text daneben (.score-value/.score-num).
   ============================================================================ */

/* Sterne-Rating (Übersicht + Detail) */
.review-stars { display: inline-flex; align-items: center; gap: 10px; }
.stars { font-size: 18px; letter-spacing: 2px; line-height: 1; }
.star { color: var(--line-2); }
.star.on { color: var(--accent); }
.star.half {
  background: linear-gradient(90deg, var(--accent) 50%, var(--line-2) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score-value { font-family: var(--fmono); font-size: 14px; color: var(--text-2); }
.score-max { color: var(--text-3); }
.gcard .review-stars { margin: 10px 0 2px; }

/* Kriterien-Score-Balken (feste Breiten-Stufen statt Inline-Style) */
.score-bar { display: inline-block; width: 120px; height: 8px; background: var(--surface-3); border-radius: 99px; vertical-align: middle; overflow: hidden; }
.score-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.score-1 { width: 20%; }
.score-2 { width: 40%; }
.score-3 { width: 60%; }
.score-4 { width: 80%; }
.score-5 { width: 100%; }
.score-num { margin-left: 10px; font-family: var(--fmono); font-size: 12px; color: var(--text-2); white-space: nowrap; }

/* Detailkopf: Byline + Answer-First-Fazit */
.review-byline { font-family: var(--fmono); font-size: 12px; color: var(--text-3); margin: 6px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review-byline a { color: var(--accent); }
.review-meta-sep { color: var(--line-2); }
.review-verdict-headline { display: block; font-family: var(--fdisp); font-weight: 800; font-size: 1.2rem; line-height: 1.1; margin-bottom: 8px; }
.review-score { margin-top: 12px; }

/* Eigene Testfotos */
.review-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 22px; }
.review-photo { margin: 0; }
/* aspect-ratio reserviert den Platz vor dem Nachladen (kein Layout-Shift / CLS), auch ohne width/height am img. */
.review-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); display: block; }

/* Kriterien-Tabelle */
.review-criteria { width: 100%; border-collapse: collapse; margin-top: 6px; }
.review-criteria th, .review-criteria td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
.review-criteria thead th { font-family: var(--fmono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.review-criteria tbody th { font-weight: 600; color: var(--text); }

/* Pro / Contra */
.review-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.review-proscons ul { margin: 0; padding: 0; list-style: none; }
.review-proscons li { position: relative; padding-left: 24px; margin-bottom: 8px; line-height: 1.5; color: var(--text-2); }
ul.pro li::before { content: "+"; position: absolute; left: 0; color: #3a9d5d; font-weight: 700; }
ul.con li::before { content: "\2013"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Offenlegung Muster/Leihgabe + Methodik-Link */
.review-acquisition { font-size: 13px; color: var(--text-2); background: var(--surface-2); border-left: 3px solid var(--line-2); padding: 10px 14px; border-radius: var(--r-s); margin: 18px 0 0; }
.review-methodik-link { margin: 14px 0 20px; }
.review-methodik-link a { color: var(--accent); font-family: var(--fmono); font-size: 12px; letter-spacing: .04em; }

@media (max-width: 640px) {
  .review-proscons { grid-template-columns: 1fr; }
  .score-bar { width: 84px; }
}