/* ============================================================================
   NGB Niederschlagstool — Stylesheet (D24 "Schweizer Meteo-Instrument")
   Display: Bricolage Grotesque · Body/Daten: Inter — beide lokal vendored.
   Palette: Tiefblau (Wasser/Meteo) + Feuerwehr-Rot (CTA) + 5 Stadtteil-Farben.
   ========================================================================== */
@font-face {
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800;
  font-display:swap;
  src:url("/static/vendor/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/vendor/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* Hell-Design fest deklarieren -> Browser-/OS-Auto-Dark-Mode abdunkelt die Seite NICHT
     (sonst: schwarzer Body + dunkle Ueberschriften/Texte = unlesbar, weisse Karten = Mischlook). */
  color-scheme:light;
  --paper:#f4f1ea; --paper2:#ebe6db; --card:#fffefb;
  --ink:#10171e; --ink2:#3a4853; --muted:#7a8793; --line:#e6dfd1;
  --water:#0f4f78; --water2:#2f86bb; --water-soft:#e8f1f8; --water-ink:#0b3a59;
  --fire:#C90C0F; --fire2:#CE2B38; --fire-soft:#fdeceb;
  /* Stadtteil-Identitätsfarben (aus der Quartierkarte) */
  --st-aare:#ef9b4b; --st-telli:#e9bf2f; --st-rohr:#e26167; --st-zentrum:#4a90c2; --st-sued:#79bd53;
  --sh-sm:0 1px 2px rgba(16,30,45,.05);
  --sh:0 2px 6px rgba(16,30,45,.06), 0 12px 28px rgba(16,30,45,.07);
  --sh-lg:0 4px 10px rgba(16,30,45,.08), 0 24px 52px rgba(16,30,45,.12);
  --r:18px; --r-sm:11px;
  --font-display:"Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:.22s cubic-bezier(.4,0,.2,1);
  --wrap:1120px;
  /* Dezente Struktur (feine Diagonal-Schraffur + Punktraster) — gegen den „klinischen" Flachlook */
  --tex:
    repeating-linear-gradient(135deg, rgba(16,30,45,.020) 0 1px, transparent 1px 8px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23103a59' fill-opacity='0.05'/%3E%3C/svg%3E");
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); font-family:var(--font-body); line-height:1.55;
  background:var(--paper);
  background-image:
    var(--tex),
    radial-gradient(60rem 40rem at 88% -8%, rgba(47,134,187,.16), transparent 60%),
    radial-gradient(48rem 36rem at -6% 4%, rgba(226,59,59,.07), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--water); text-decoration:none; }
a:hover { text-decoration:underline; }

/* --- Header --------------------------------------------------------------- */
header.site {
  position:sticky; top:0; z-index:1000;
  background:rgba(247,244,238,.82); backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
header.site .wrap {
  max-width:var(--wrap); margin:0 auto; padding:.6rem 1.2rem;
  display:flex; align-items:center; gap:1rem;
}
.brand { display:flex; align-items:center; gap:.6rem; color:var(--water); text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand .logo { width:34px; height:34px; flex:none; filter:drop-shadow(0 2px 5px rgba(15,79,120,.25)); }
.brand-txt { display:flex; flex-direction:column; line-height:1.05; }
.brand-txt b { font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em; color:var(--ink); }
.brand-txt span { font-size:.72rem; color:var(--muted); font-weight:500; }
header.site nav { margin-left:auto; display:flex; gap:.2rem; align-items:center; }
.brand { min-width:0; }
.brand-txt { min-width:0; }
.brand-txt b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header.site nav a {
  color:var(--ink2); padding:.45rem .85rem; border-radius:999px; font-size:.92rem;
  font-weight:550; transition:var(--ease);
}
header.site nav a:hover { background:rgba(15,79,120,.08); color:var(--water); text-decoration:none; }
header.site nav a.active { color:var(--fire); background:var(--fire-soft); font-weight:650; }

main { max-width:var(--wrap); margin:0 auto; padding:1.6rem 1.2rem 3rem; }
footer.quelle {
  max-width:var(--wrap); margin:0 auto; padding:1.4rem 1.2rem 2.4rem;
  font-size:.78rem; color:var(--muted); display:flex; gap:.45rem; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--line);
}
footer.quelle .dot { opacity:.5; }

/* --- Typografie ----------------------------------------------------------- */
h1 { font-family:var(--font-display); font-weight:750; font-size:clamp(1.7rem,3.4vw,2.3rem);
  letter-spacing:-.025em; line-height:1.05; margin:.2rem 0 .5rem; }
h2 { font-family:var(--font-display); font-weight:650; font-size:1.25rem; letter-spacing:-.02em;
  margin:2rem 0 .7rem; color:var(--ink); }
.lead { color:var(--ink2); font-size:1.04rem; max-width:60ch; }
.hint, .meta { color:var(--muted); }
.hint { font-size:.9rem; max-width:72ch; }
.meta { font-size:.92rem; margin:.1rem 0 1rem; }
.kicker { display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--water);
  background:var(--water-soft); padding:.32rem .7rem; border-radius:999px; }

/* --- Hero (Startseite) ---------------------------------------------------- */
.hero {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(1.4rem,3.5vw,2.8rem); align-items:center;
  padding:clamp(.6rem,2.5vw,2rem) 0 .8rem;
}
.hero-copy { animation:rise .7s var(--ease) both; }
.hero h1 { font-size:clamp(2.05rem,4.6vw,3.25rem); margin:.7rem 0 .6rem; }
.hero h1 .accent { color:var(--water);
  background:linear-gradient(120deg,var(--water2),var(--water)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.hero .lead { margin-bottom:1.3rem; }

/* Form */
.form-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:1.2rem 1.25rem; }
.field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.field > label, .field-legend { font-weight:600; font-size:.9rem; color:var(--ink); }
.field input, .field select {
  padding:.62rem .72rem; font-size:1rem; font-family:inherit; color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; width:100%;
  transition:var(--ease);
}
.field input:hover, .field select:hover { border-color:#cdbfae; }
.field input:focus, .field select:focus { outline:none; border-color:var(--water2);
  box-shadow:0 0 0 3px rgba(47,134,187,.18); }
.field small { color:var(--muted); font-size:.8rem; }
fieldset.field { border:1px solid var(--line); border-radius:var(--r-sm); padding:.85rem .9rem; gap:.6rem; }
fieldset.field legend { padding:0 .4rem; }
.row2 { display:flex; gap:.8rem; }
.row2 > label { flex:1; display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.9rem; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.3rem; background:var(--fire); color:#fff; border:0; border-radius:var(--r-sm);
  font-size:1.02rem; font-weight:650; font-family:inherit; cursor:pointer;
  box-shadow:0 2px 5px rgba(226,59,59,.3); transition:var(--ease); letter-spacing:.005em;
}
.btn:hover { background:var(--fire2); transform:translateY(-1px); box-shadow:0 6px 18px rgba(226,59,59,.36); text-decoration:none; }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--fire-soft), 0 6px 18px rgba(226,59,59,.36); }
.btn.full { width:100%; }
.btn.ghost { background:#fff; color:var(--water); border:1.5px solid var(--line); box-shadow:var(--sh-sm); }
.btn.ghost:hover { background:var(--water-soft); border-color:var(--water2); }
.btn.small { padding:.42rem .85rem; font-size:.86rem; border-radius:8px; white-space:nowrap; }

/* Hero-Karte (Live-Stadtteile) */
.map-card { position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-lg); padding:.55rem; animation:rise .8s .08s var(--ease) both; }
#heromap { height:clamp(340px,46vh,470px); border-radius:14px; overflow:hidden; z-index:0; }
.map-cap { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.55rem .6rem .25rem; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.map-cap b { color:var(--ink); font-weight:650; }
.st-key { display:flex; flex-wrap:wrap; gap:.3rem .7rem; }
.st-key span { display:inline-flex; align-items:center; gap:.32rem; font-size:.76rem; color:var(--ink2); }
.st-key i { width:.7rem; height:.7rem; border-radius:3px; display:inline-block; }
.baseswitch { display:inline-flex; background:var(--paper2); border:1px solid var(--line);
  border-radius:999px; padding:2px; gap:2px; }
.baseswitch button { border:0; background:transparent; color:var(--ink2); font:inherit;
  font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:999px; cursor:pointer; transition:var(--ease); }
.baseswitch button.on { background:#fff; color:var(--water); box-shadow:var(--sh-sm); }

/* Feature-Chips unter dem Hero */
.chips { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.9rem; margin:1.8rem 0 .5rem; }
.chip { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-sm); padding:.9rem 1rem; transition:var(--ease); }
.chip:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.chip .ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--water-soft); color:var(--water); margin-bottom:.5rem; }
.chip b { display:block; font-weight:650; font-size:.96rem; margin-bottom:.15rem; }
.chip p { margin:0; font-size:.85rem; color:var(--muted); }

/* --- Cards / Banner / Badges --------------------------------------------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:1.2rem 1.3rem; }
.card + .card { margin-top:1rem; }
.message { background:#fff8ec; border:1px solid #f0c674; border-left-width:5px; color:#8a5a09;
  padding:.75rem 1rem; border-radius:var(--r-sm); margin:1rem 0; }
.message.info { background:var(--water-soft); border-color:#9cc7e3; color:var(--water-ink); }
.message.warn { background:var(--fire-soft); border-color:#eaa; color:var(--fire2); }
.badge { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.03em;
  background:var(--water); color:#fff; padding:.2rem .58rem; border-radius:999px; vertical-align:middle; }
.badge.warn { background:var(--fire); }
.badge.muted { background:var(--muted); }
.badge.ok { background:#2e9e6b; }

/* --- Stat-Kacheln --------------------------------------------------------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.85rem; margin:1.1rem 0 .4rem; }
.stat { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--sh-sm); padding:.85rem .95rem; transition:var(--ease);
  display:flex; flex-direction:column; }
.stat::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--line); transition:var(--ease); }
.stat:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.stat .label { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
  font-weight:650; min-height:2.1em; display:flex; align-items:flex-start; }
.stat .value { font-size:1.7rem; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.1;
  margin-top:.1rem; letter-spacing:-.02em; }
.stat .value small { font-size:.78rem; font-weight:500; color:var(--muted); }
/* Stadtteil-Aufschlüsselung in der Kachel (klein, in Stadtteilfarbe) */
.stat-break { margin-top:auto; padding-top:.5rem; display:flex; flex-wrap:wrap; gap:.1rem .55rem;
  font-size:.76rem; font-weight:700; font-variant-numeric:tabular-nums; }
.stat-break i { font-style:normal; opacity:.55; font-weight:500; }

/* Chart-Reihe: 2 nebeneinander auf breiten Schirmen (groesser/lesbarer), Stundenverlauf voll breit */
.charts-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(440px,1fr)); gap:1rem; margin-top:.2rem; }
.chart-box { position:relative; height:300px; }
.chart-box.sm { height:200px; }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.chart-head strong { margin:0; font-family:var(--font-display); font-weight:600; font-size:.92rem; }
.chart-sel { font:inherit; font-size:.8rem; padding:.25rem .5rem; border:1px solid var(--line);
  border-radius:7px; background:#fff; color:var(--ink); }
.rp-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1rem; align-items:start; margin:.4rem 0; }
.stat .value small { font-size:.8rem; font-weight:500; color:var(--muted); }
.stat.accent .value { color:var(--water); } .stat.accent::before { background:var(--water2); }
.stat.orange .value { color:var(--fire); } .stat.orange::before { background:var(--fire); }

/* --- Tabs (Ergebnis-Ansichten: Karte / Verlauf / Stadtteile / …) ---------- */
.tabs { display:flex; gap:.25rem; flex-wrap:wrap; margin:1.5rem 0 1.2rem; border-bottom:2px solid var(--line); }
.tab { font:inherit; font-family:var(--font-display); font-weight:600; font-size:.96rem;
  color:var(--ink2); background:transparent; border:0; border-bottom:2.5px solid transparent;
  margin-bottom:-2px; padding:.55rem .95rem; cursor:pointer; border-radius:9px 9px 0 0;
  transition:var(--ease); white-space:nowrap; }
.tab:hover { color:var(--water); background:var(--water-soft); }
.tab.on { color:var(--water); border-bottom-color:var(--water); }
.tabpanel[hidden] { display:none; }
.tabpanel { animation:rise .35s var(--ease) both; }
.panel-cap { display:flex; align-items:center; gap:.5rem; margin:.1rem 0 .8rem;
  font-family:var(--font-display); font-weight:650; font-size:1.05rem; color:var(--ink); }

/* --- Ergebnis-Story (Scroll-Erzählung statt Tabs) ------------------------- */
.section { margin:2.6rem 0; animation:rise .4s var(--ease) both; }
.section > h2 { margin:.35rem 0 .3rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-weight:700;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--water); }
.eyebrow .n { display:grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:999px;
  background:var(--water); color:#fff; font-size:.8rem; box-shadow:0 2px 6px rgba(15,79,120,.3); }
.section-intro { color:var(--ink2); font-size:1rem; max-width:66ch; margin:.2rem 0 1.1rem; }

/* Schlagzeile — der zitierbare Satz */
.lede { font-family:var(--font-display); font-weight:450; line-height:1.3; letter-spacing:-.01em;
  font-size:clamp(1.3rem,2.7vw,1.85rem); color:var(--ink); max-width:34ch; margin:1.3rem 0 .4rem; }
.lede b { font-weight:750; color:var(--water); }

/* Gesamtregen — die grosse, vom Verlauf unabhängige Aussage */
.rain-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:.2rem 0 0; }
.rain-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:1.3rem 1.45rem; }
.rain-card.primary { background:linear-gradient(135deg,var(--water2),var(--water)); color:#fff;
  border:0; box-shadow:var(--sh-lg); }
.rain-card .k { font-size:.82rem; font-weight:650; color:var(--muted); }
.rain-card.primary .k { color:rgba(255,255,255,.92); }
.rain-card .bignum { font-family:var(--font-display); font-weight:750; letter-spacing:-.035em;
  line-height:1; font-variant-numeric:tabular-nums; font-size:clamp(2.8rem,7.5vw,4.2rem);
  margin:.25rem 0 .1rem; }
.rain-card .bignum small { font-size:.28em; font-weight:600; margin-left:.2em; opacity:.7; }
.rain-card .sub { font-size:.86rem; color:var(--muted); }
.rain-card.primary .sub { color:rgba(255,255,255,.85); }
.rain-equiv { background:var(--water-soft); border:1px solid #cfe3f1; color:var(--water-ink);
  border-radius:var(--r-sm); padding:.75rem 1rem; margin:.9rem 0 .2rem; font-size:.94rem; max-width:none; }
.rain-equiv b { color:var(--water-ink); }

/* Aktualisierungs-Hinweis (genauere CPCH-Reanalyse liegt vor) */
.update-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem 1.2rem;
  flex-wrap:wrap; background:var(--water-soft); border:1px solid #9cc7e3; border-left-width:5px;
  color:var(--water-ink); padding:.85rem 1.1rem; border-radius:var(--r-sm); margin:1rem 0;
  animation:rise .35s var(--ease) both; }
.update-banner > div { flex:1; min-width:16rem; font-size:.94rem; }
.update-banner b { color:var(--water-ink); }
.update-banner form { margin:0; }
/* "laeuft gerade"-Variante: neutralere Farbe + kleiner Inline-Spinner */
.update-banner.running { background:#fff8e9; border-color:#e6c878; color:#7a5b16; }
.update-banner.running b { color:#7a5b16; }
.spin { display:inline-block; width:.95em; height:.95em; vertical-align:-.12em; margin-right:.15em;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  opacity:.8; animation:spin .8s linear infinite; }

/* Anker-Hinweis unter den Seltenheits-Kurven (Buchs = belastbar) */
.anchor-line { margin:.9rem 0 .2rem; padding:.7rem .9rem; font-size:.92rem; line-height:1.45;
  background:#fff4ec; border:1px solid #f2c6a8; border-left-width:4px; border-radius:var(--r-sm); }
.anchor-line b { color:#b5530f; }

/* kleine Beschriftung im Small-Multiple-Titel (z. B. "~4 j. · 1 h") */
.sm-sub { margin-left:auto; font-weight:600; font-size:.78rem; color:var(--muted); white-space:nowrap; }

/* Ampel-Klassen (Stadtteil-Seltenheit: grün/gelb/rot) */
.ampel-gruen { color:#1e7a45; font-weight:700; }
.ampel-gelb  { color:#8a6100; font-weight:700; }
.ampel-rot   { color:#c0311c; font-weight:700; }
.ampel-label { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.82rem; font-weight:700; }
.ampel-label.ampel-gruen { background:#d4f0e0; color:#1e7a45; }
.ampel-label.ampel-gelb  { background:#fff0cc; color:#8a6100; }
.ampel-label.ampel-rot   { background:#fde8e4; color:#c0311c; }
.ampel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; margin:1rem 0; }
.ampel-item { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-sm); padding:.7rem .9rem; }
.ampel-name { font-weight:650; font-size:.9rem; margin-bottom:.4rem; display:flex; align-items:center; gap:.35rem; }
/* Ampel als reine Schriftfarbe (kein Badge-Hintergrund) — Wort + konkrete Häufigkeit darunter */
.ampel-line { font-size:.92rem; margin:.18rem 0; }
.ampel-when { color:var(--muted); font-weight:600; }
.ampel-jahre { display:block; font-size:.78rem; color:var(--muted); font-weight:500; margin-top:-.05rem; }
/* Windböen-Schweregrad: ab ~60 km/h farblich markieren */
.wind-strong { color:#c2410c; font-weight:700; }
.wind-storm  { color:#c0311c; font-weight:700; }
html[data-theme="dark"] .wind-strong { color:#f0974c; }
html[data-theme="dark"] .wind-storm  { color:#f0807a; }
.lz-jahre { font-weight:500; color:rgba(255,255,255,.82); }

/* Eleganter Hover-Tooltip je Stadtteil (Kartenkarte im Seiten-Stil) */
.leaflet-tooltip.st-tip { background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--sh-lg); padding:.5rem .65rem; font-size:.82rem; white-space:nowrap; }
.leaflet-tooltip.st-tip::before { border-top-color:var(--card); }
.st-tip .stt-name { font-family:var(--font-display); font-weight:700; font-size:.92rem; }
.st-tip .stt-val { font-weight:700; font-variant-numeric:tabular-nums; margin-top:.1rem; }
.st-tip .stt-amp { margin-top:.15rem; font-weight:650; }
.st-tip .stt-sub { color:var(--muted); font-weight:500; }

/* Kurze Klartext-Notiz unter Diagramm-Titeln */
.chart-note { color:var(--muted); font-size:.85rem; margin:.1rem 0 .7rem; max-width:74ch; }

/* Stadtteil-Farblegende (erklaert die farbigen Werte in den Kennzahl-Kacheln) */
.st-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin:.85rem 0 0;
  font-size:.82rem; }
.st-legend .lbl { color:var(--muted); font-weight:600; }
.st-legend .st-leg { display:inline-flex; align-items:center; gap:.38rem; font-weight:650; color:var(--ink2); }
.st-legend .st-leg i { width:.72rem; height:.72rem; border-radius:3px; display:inline-block; flex:none; }

/* Stadtteil-Farbpunkt in der Tabelle */
.st-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:3px; margin-right:.45rem;
  vertical-align:baseline; }

/* --- Tabellen ------------------------------------------------------------- */
.grid { display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0; }
table.kpi { border-collapse:collapse; min-width:280px; flex:1; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--sh-sm); }
table.kpi caption { font-family:var(--font-display); font-weight:650; text-align:left; padding:.65rem .85rem;
  background:var(--water-soft); color:var(--water-ink); }
table.kpi th, table.kpi td { border-top:1px solid var(--line); padding:.5rem .85rem; text-align:left; font-size:.92rem; }
table.kpi td { text-align:right; font-variant-numeric:tabular-nums; font-weight:650; }
table.archiv { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--sh-sm); }
table.archiv th { background:var(--paper2); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
table.archiv th, table.archiv td { border-top:1px solid var(--line); padding:.6rem .85rem; text-align:left; }
table.archiv thead tr { border-top:0; }
table.archiv tbody tr { transition:background var(--ease); }
table.archiv tbody tr:hover { background:var(--water-soft); }
table.archiv td.num { text-align:right; font-variant-numeric:tabular-nums; }

/* --- Einklappbare Detailwerte -------------------------------------------- */
details.detailwerte { margin-top:1.6rem; }
details.detailwerte > summary { cursor:pointer; list-style:none; font-family:var(--font-display);
  font-weight:650; font-size:1.05rem; color:var(--ink); display:flex; align-items:center; gap:.5rem; }
details.detailwerte > summary::-webkit-details-marker { display:none; }
details.detailwerte > summary::before { content:"▸"; color:var(--accent); transition:var(--ease); }
details.detailwerte[open] > summary::before { transform:rotate(90deg); }
details.detailwerte .grid { margin:1rem 0 0; }

/* --- Karte + Charts ------------------------------------------------------- */
#map { height:480px; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); z-index:0; }
.chart-card { margin-top:1rem; position:relative; }
.chart-card strong { display:block; margin-bottom:.5rem; font-size:.95rem; font-family:var(--font-display); font-weight:600; }
.chart-box.xs { height:130px; }
.sub-h { font-family:var(--font-display); font-weight:650; font-size:1.02rem; margin:1.6rem 0 .2rem; }

/* Kritische-Dauer-Zeitfenster (Uhrzeiten unter dem Wert) */
.t-win { color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; }

/* Transparenz-Slider fuer Karten-Overlays + Hintergrund (mehrzeilig) */
.map-controls { display:flex; flex-direction:column; gap:.45rem; margin:.7rem 0; padding:.6rem .85rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-sm);
  font-size:.85rem; }
.opacity-row { display:flex; align-items:center; gap:.7rem; }
.opacity-row label { font-weight:600; color:var(--ink2); white-space:nowrap; min-width:13.5em; }
.opacity-row input[type=range] { flex:1; accent-color:var(--water); }
.opacity-row output { font-variant-numeric:tabular-nums; font-weight:650; min-width:3.6em; text-align:right; }

/* Summenbilder als Mini-Karten + Download */
.sum-downloads { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; margin-top:.4rem; }
.sum-img { margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-sm); padding:.6rem; }
.sum-map { height:320px; border-radius:8px; overflow:hidden; border:1px solid var(--line); z-index:0; }
.sum-ctrls { display:flex; flex-direction:column; gap:.3rem; margin:.5rem 0 0; }
.sum-ctrls .opacity-row label { min-width:8.5em; font-size:.8rem; font-weight:600; }
.sum-img figcaption { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  flex-wrap:wrap; margin-top:.55rem; font-size:.86rem; font-weight:600; }
.sum-img .dl { display:flex; gap:.4rem; }

/* Small-Multiples (Intensität je Stadtteil) */
.small-multiples { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin-top:.4rem; }
.sm-title { display:flex; align-items:center; gap:.4rem; font-weight:650; font-size:.86rem; margin-bottom:.3rem; }
.sm-title i { width:.7rem; height:.7rem; border-radius:3px; flex:none; }

/* Vergrössern-Button + Lightbox */
.zoom-btn { position:absolute; top:.7rem; right:.7rem; z-index:5; width:2rem; height:2rem;
  display:grid; place-items:center; border:1px solid var(--line); background:rgba(255,255,255,.92);
  color:var(--ink2); border-radius:8px; cursor:pointer; font-size:1.05rem; line-height:1;
  box-shadow:var(--sh-sm); transition:var(--ease); }
.zoom-btn:hover { background:var(--water-soft); color:var(--water); border-color:var(--water2); }
.zoom-backdrop { position:fixed; inset:0; background:rgba(16,30,45,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:1500; }
.chart-card.zoomed { position:fixed; inset:3vh 3vw; z-index:1600; margin:0; overflow:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem; box-shadow:var(--sh-lg); }
.chart-card.zoomed .chart-box { height:78vh; }
.chart-card.zoomed .small-multiples { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.chart-card.zoomed .chart-box.xs { height:34vh; }
body.zoom-open { overflow:hidden; }

/* Animationsleiste */
.anim { display:flex; align-items:center; gap:.7rem; margin:.7rem 0; padding:.6rem .85rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-sm); }
.anim input[type=range] { flex:1; accent-color:var(--water); }
.anim-time { font-variant-numeric:tabular-nums; font-weight:650; min-width:5.5em; text-align:center; }
.anim-hint { font-size:.78rem; color:var(--muted); }

/* Leaflet-Legende (Glas) */
.legend { background:rgba(255,255,255,.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:.5rem .65rem; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--sh-lg); font-size:.75rem; color:var(--ink); }
.legend-title { font-weight:650; margin-bottom:.3rem; }
.legend-row { display:flex; align-items:center; gap:.35rem; }
.legend-bar { display:inline-block; width:130px; height:11px; border-radius:3px; border:1px solid rgba(0,0,0,.15);
  background:linear-gradient(to right,#cfe8fa,#9ccdee,#5fa6df,#3d7fc1,#2e5fa3,#46b08a,#8bd05a,#ecde3b,#f4a23c,#e2453c,#b5277d); }
.legend-bar.choro { background:linear-gradient(to right,#cfe8fa,#9ccdee,#5fa6df,#3d7fc1,#2e5fa3,#46b08a,#8bd05a,#ecde3b,#f4a23c,#e2453c,#b5277d); }
.leaflet-tooltip { font-size:.8rem; }
.leaflet-container { font-family:var(--font-body); }

/* Karten-Werkzeuge IN der Karte (Titel-Chip, Vollbild, Ausschnitt, Transparenz, Export) */
.map-chip { background:rgba(255,255,255,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6); box-shadow:var(--sh-sm); border-radius:8px;
  padding:.3rem .55rem; font-size:.76rem; color:var(--ink); max-width:16rem; }
.map-tools { display:flex; flex-direction:column; gap:.35rem; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--sh-lg); border-radius:10px; padding:.4rem; }
.map-tools button { font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; color:var(--ink2);
  background:#fff; border:1px solid var(--line); border-radius:7px; padding:.32rem .55rem; transition:var(--ease); }
.map-tools button:hover { background:var(--water-soft); color:var(--water); border-color:var(--water2); }
.map-tools .mt-row { display:flex; gap:.3rem; }
.map-tools .mt-row button { flex:1; }
.map-tools .mt-seg { display:flex; }
.map-tools .mt-seg button { border-radius:0; flex:1; }
.map-tools .mt-seg button:first-child { border-radius:7px 0 0 7px; }
.map-tools .mt-seg button:last-child { border-radius:0 7px 7px 0; border-left:0; }
.map-tools .mt-seg button.on { background:var(--water); color:#fff; border-color:var(--water); }
.map-tools .mt-op { display:flex; align-items:center; gap:.35rem; font-size:.7rem; color:var(--muted); }
.map-tools .mt-op input { width:6.2rem; accent-color:var(--water); }

/* Vollbild-Karte (CSS-Klasse, von der Werkzeugleiste umgeschaltet) */
#map.map-fs { position:fixed !important; inset:0 !important; height:100vh !important; height:100dvh !important;
  width:100vw !important; z-index:2000; border-radius:0; border:0; margin:0 !important; }
body.map-fs-open { overflow:hidden; }
html[data-theme="dark"] .map-chip,
html[data-theme="dark"] .map-tools { background:rgba(14,22,32,.9); border-color:var(--line); }
html[data-theme="dark"] .map-tools button { background:var(--card); }

/* --- Loader --------------------------------------------------------------- */
.loader { display:flex; flex-direction:column; align-items:center; gap:1.1rem; padding:1.4rem 0 .6rem; }
.spinner { width:42px; height:42px; border:4px solid var(--line); border-top-color:var(--water);
  border-radius:50%; animation:spin .9s linear infinite, pulse 1.8s ease-in-out infinite; }
.progress { width:100%; max-width:340px; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.progress > span { display:block; width:40%; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--water2),var(--water)); animation:indeterminate 1.4s ease-in-out infinite; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
@keyframes indeterminate { 0% { margin-left:-40%; } 100% { margin-left:100%; } }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* --- Methodik-Seite ------------------------------------------------------- */
.method-head { max-width:70ch; }
.method-switch { margin:1.1rem 0 .4rem; }
.method-view { animation:rise .4s var(--ease) both; }
.m-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin:1.3rem 0; }
.m-card h2 { margin:.3rem 0 .5rem; font-size:1.1rem; }
.m-card p, .m-list { color:var(--ink2); font-size:.95rem; }
.m-ic { font-size:1.7rem; line-height:1; }
.m-list { margin:.3rem 0 0; padding-left:1.1rem; }
.m-list li { margin:.3rem 0; }
.m-sources { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem; margin:.6rem 0 .5rem; }
.m-src { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-sm); padding:1rem; }
.m-src b { display:block; margin:.5rem 0 .25rem; }
.m-src p { margin:0; font-size:.88rem; color:var(--muted); }
.m-src .tag { display:inline-block; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:.18rem .55rem; border-radius:999px; }
table.kpi.m-kpi td.l { text-align:left; font-weight:400; color:var(--ink2); font-size:.9rem; }
table.kpi.m-kpi th { white-space:nowrap; vertical-align:top; color:var(--water-ink); }

/* Lösch-Button (Archiv / Ergebnis) */
.btn-del { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line);
  background:#fff; color:var(--fire2); font:inherit; font-size:.82rem; font-weight:600;
  padding:.34rem .7rem; border-radius:8px; cursor:pointer; transition:var(--ease); }
.btn-del:hover { background:var(--fire-soft); border-color:#eaa; }
.archiv-actions { display:flex; gap:.5rem; align-items:center; }
.del-inline { display:inline; }
.res-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.1rem 0 1.2rem; }

/* ============================================================================
   Ergebnisseite — Lese-Modus (Einfach/Fach), Sprungnav, Auf-einen-Blick, Leitzahl
   ========================================================================== */
/* Einfach (default): Fachinhalte versteckt. Fach: Einfach-Vereinfachungen versteckt. */
html.simple .fachonly { display:none !important; }
html.fach .einfachonly { display:none !important; }
/* Umschalter-Beschriftung wechselt mit dem Modus */
html.simple .mode-toggle .m-fach,
html.fach .mode-toggle .m-simple { display:none; }
.mode-toggle { font-weight:650; }
html.fach .mode-toggle { background:var(--water-soft); border-color:var(--water2); color:var(--water); }

/* Admin-Aktionen (Rohdaten/Neu/Löschen) im ⋯-Menü — aus der Lesersicht raus */
.admin-menu { position:relative; }
.admin-menu > summary { list-style:none; }
.admin-menu > summary::-webkit-details-marker { display:none; }
.admin-pop { position:absolute; right:0; top:calc(100% + .35rem); z-index:50; display:flex; flex-direction:column;
  gap:.1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-lg); padding:.4rem; min-width:12.5rem; }
.admin-pop a, .admin-pop .linklike { display:flex; align-items:center; gap:.45rem; text-align:left; width:100%;
  padding:.45rem .6rem; border-radius:8px; font-size:.86rem; color:var(--ink2); background:transparent;
  border:0; cursor:pointer; font:inherit; }
.admin-pop a:hover, .admin-pop .linklike:hover { background:var(--water-soft); text-decoration:none; }
.admin-pop .linklike.danger { color:var(--fire2); }
.admin-pop .del-inline { display:block; }

/* Auf einen Blick — Kurzfazit + Sprungbrett */
.glance { margin:1.2rem 0 .2rem; }
.glance-head { font-family:var(--font-display); font-weight:650; font-size:.92rem; color:var(--ink2);
  margin-bottom:.55rem; letter-spacing:-.01em; }
.glance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:.7rem; }
.glance-card { display:flex; flex-direction:column; gap:.12rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--sh-sm); padding:.7rem .85rem; color:var(--ink); transition:var(--ease); }
.glance-card:hover { transform:translateY(-2px); box-shadow:var(--sh); text-decoration:none; border-color:var(--water2); }
.glance-card.static { cursor:default; }
.glance-card.static:hover { transform:none; box-shadow:var(--sh-sm); border-color:var(--line); }
.glance-card .g-k { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); }
.glance-card .g-v { font-family:var(--font-display); font-weight:750; font-size:1.5rem; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.glance-card .g-v.sm { font-size:1.02rem; line-height:1.15; }
.glance-card .g-v small { font-size:.5em; font-weight:600; color:var(--muted); }
.glance-card .g-s { font-size:.76rem; color:var(--muted); }
.amp-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.3rem; vertical-align:baseline; }
.amp-dot.amp-gruen { background:#1e7a45; } .amp-dot.amp-gelb { background:#caa006; } .amp-dot.amp-rot { background:#c0311c; }

/* Sticky Abschnitts-Sprungnav (Scroll-Spy) */
.secnav { position:sticky; top:var(--secnav-top, 3.4rem); z-index:900; display:flex; gap:.15rem; flex-wrap:wrap;
  margin:1rem 0 1.2rem; padding:.3rem; background:rgba(247,244,238,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh-sm); }
.secnav a { padding:.35rem .85rem; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--ink2); white-space:nowrap; }
.secnav a:hover { background:var(--water-soft); color:var(--water); text-decoration:none; }
.secnav a.active { background:var(--water); color:#fff; }
/* Sektionen unter der sticky-Leiste anspringen, ohne dass der Titel verdeckt wird */
section[id] { scroll-margin-top:var(--scroll-margin, 7rem); }

/* Einfach-Modus: EINE Leitzahl + Ampel */
.leitzahl { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; justify-content:space-between;
  background:linear-gradient(135deg,var(--water2),var(--water)); color:#fff; border-radius:var(--r);
  box-shadow:var(--sh-lg); padding:1.4rem 1.6rem; margin:.4rem 0 .2rem; }
.leitzahl .lz-body { min-width:0; }
.leitzahl .lz-num { font-family:var(--font-display); font-weight:750; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums; font-size:clamp(2.6rem,8vw,4rem); }
.leitzahl .lz-num small { font-size:.26em; font-weight:600; margin-left:.15em; opacity:.8; }
.leitzahl .lz-cap { font-size:.98rem; margin-top:.3rem; color:rgba(255,255,255,.92); max-width:34ch; }
.leitzahl .lz-ampel { margin-top:.65rem; }
.leitzahl .lz-trust { font-size:.84rem; margin-top:.6rem; color:rgba(255,255,255,.85); max-width:44ch; }
.leitzahl .lz-trust b { color:#fff; }
.leitzahl .reveal-fach { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.45); flex:none; }
.leitzahl .reveal-fach:hover { background:rgba(255,255,255,.28); border-color:#fff; }

/* Scroll-Fortschritt + Nach-oben */
.scrollprog { position:fixed; top:0; left:0; height:3px; width:0; z-index:1200;
  background:linear-gradient(90deg,var(--water2),var(--fire)); transition:width .08s linear; }
.to-top { position:fixed; right:1rem; bottom:1rem; z-index:1100; width:2.7rem; height:2.7rem; border-radius:50%;
  display:grid; place-items:center; background:var(--card); color:var(--water); border:1px solid var(--line);
  box-shadow:var(--sh-lg); cursor:pointer; font-size:1.25rem; line-height:1;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:var(--ease); }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { color:#fff; background:var(--water); border-color:var(--water); }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto; }
}

@media (max-width:880px) {
  .hero { grid-template-columns:1fr; }
  .map-card { order:-1; }
}
@media (max-width:560px) {
  .row2 { flex-direction:column; }
  main { padding:1.1rem .9rem 2.4rem; }
  .brand-txt span { display:none; }
  /* Header passt sonst nicht in 390px: Brand-Schrift + Nav kompakter, Nav darf umbrechen */
  header.site .wrap { padding:.5rem .8rem; gap:.5rem; flex-wrap:wrap; }
  .brand .logo { width:28px; height:28px; }
  .brand-txt b { font-size:1rem; }
  header.site nav { gap:.1rem; flex-wrap:wrap; justify-content:flex-end; }
  header.site nav a { padding:.4rem .55rem; font-size:.86rem; }
  .theme-toggle { width:1.9rem; height:1.9rem; }
  /* breite Tabellen (Stadtteile) horizontal scrollbar statt Seiten-Overflow */
  table.archiv { display:block; overflow-x:auto; white-space:nowrap; }
  /* Karten-Bedienleisten dürfen umbrechen statt die Seite zu sprengen */
  .anim { flex-wrap:wrap; }
  .opacity-row { flex-wrap:wrap; }
  .opacity-row label { min-width:0; white-space:normal; }
}

/* --- Theme-Umschalter (Hell/Dunkel) -------------------------------------- */
.theme-toggle { display:inline-grid; place-items:center; width:2.1rem; height:2.1rem;
  margin-left:.35rem; border:1px solid var(--line); border-radius:999px; cursor:pointer;
  background:var(--card); color:var(--ink2); transition:var(--ease); flex:none; }
.theme-toggle:hover { color:var(--water); border-color:var(--water2); }
.theme-toggle svg { width:1.05rem; height:1.05rem; }
.theme-toggle .i-sun { display:none; }
html[data-theme="dark"] .theme-toggle .i-sun { display:block; }
html[data-theme="dark"] .theme-toggle .i-moon { display:none; }
.opt { color:var(--muted); font-weight:500; }

/* ============================================================================
   DARK THEME — nur Variablen + wenige fest kodierte Hell-Flaechen ueberschreiben.
   Aktiv via <html data-theme="dark"> (vom Umschalter / Kopf-Skript gesetzt).
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme:dark;
  --paper:#0e1620; --paper2:#0a1119; --card:#161f2b;
  --ink:#e7edf3; --ink2:#aebccb; --muted:#8294a3; --line:#2a3a4b;
  --water:#5aa8d8; --water2:#7cc0e6; --water-soft:#13283a; --water-ink:#cfe6f5;
  /* Eigene dunklere Flaechenfarben fuer Komponenten mit weisser Schrift (Leitzahl, Rain-Karte,
     aktive Sprungnav, Badge, Eyebrow-Kreis) — --water/--water2 bleiben hell (Text-/Icon-Akzent,
     z.B. .eyebrow, .kicker); als Flaeche hinter #fff ergaben sie nur ~2:1 Kontrast. */
  --water-surface:#164a6e; --water-surface2:#0f3a57;
  /* Helleres Rot fuer Links auf dunklen Karten (--fire/--fire2 sind Text-/Rahmenfarbe andernorts). */
  --link-dark:#ff6b6b;
  --fire:#f2615f; --fire2:#ef4b49; --fire-soft:#3a1816;
  --sh-sm:0 1px 2px rgba(0,0,0,.45);
  --sh:0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.55);
  --sh-lg:0 4px 10px rgba(0,0,0,.55), 0 24px 52px rgba(0,0,0,.65);
  --tex:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 8px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23bcd6ec' fill-opacity='0.05'/%3E%3C/svg%3E");
}
html[data-theme="dark"] header.site { background:rgba(14,22,32,.85); }
html[data-theme="dark"] .secnav { background:rgba(14,22,32,.9); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .chart-sel { background:var(--card); color:var(--ink); }
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .btn-del,
html[data-theme="dark"] .baseswitch button.on { background:var(--card); }
html[data-theme="dark"] .zoom-btn { background:rgba(22,31,43,.92); color:var(--ink2); }
html[data-theme="dark"] .zoom-backdrop { background:rgba(0,0,0,.66); }
html[data-theme="dark"] .legend { background:rgba(14,22,32,.88); border-color:var(--line); }
/* pastellfarbene Hinweis-Banner abdunkeln (sonst grell auf Dunkel) */
html[data-theme="dark"] .message { background:#2a2410; border-color:#6b5a1e; color:#f0d488; }
html[data-theme="dark"] .update-banner { background:#13283a; border-color:#2f6286; color:var(--water-ink); }
html[data-theme="dark"] .update-banner.running { background:#2a2410; border-color:#6b5a1e; color:#f0d488; }
html[data-theme="dark"] .update-banner.running b { color:#f0d488; }
html[data-theme="dark"] .anchor-line { background:#2a1d14; border-color:#7a4a22; }
html[data-theme="dark"] .anchor-line b { color:#f0a460; }
/* Kontrastfix (Review): weisser Text auf hellblauer Flaeche (--water/--water2) hatte im
   Dark-Theme nur ~2:1 Kontrast. Eigene dunkle Flaeche statt der hellen Text-/Icon-Akzentfarbe. */
html[data-theme="dark"] .leitzahl,
html[data-theme="dark"] .rain-card.primary {
  background:linear-gradient(135deg,var(--water-surface),var(--water-surface2));
}
html[data-theme="dark"] .secnav a.active,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .eyebrow .n {
  background:var(--water-surface);
}
/* Leaflet-Bedienelemente an Dunkel anpassen */
html[data-theme="dark"] .leaflet-control-layers,
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-control-attribution {
  background:var(--card) !important; color:var(--ink) !important; }
html[data-theme="dark"] .leaflet-bar a { border-bottom-color:var(--line) !important; }
html[data-theme="dark"] .leaflet-control-attribution a { color:var(--water) !important; }
/* Ampel dark theme overrides */
html[data-theme="dark"] .ampel-label.ampel-gruen { background:#0d2e1c; color:#5fd99a; }
html[data-theme="dark"] .ampel-label.ampel-gelb  { background:#2a2100; color:#f0c84a; }
html[data-theme="dark"] .ampel-label.ampel-rot   { background:#2a0f0f; color:#f08070; }
html[data-theme="dark"] .ampel-gruen { color:#5fd99a; }
html[data-theme="dark"] .ampel-gelb  { color:#f0c84a; }
html[data-theme="dark"] .ampel-rot   { color:#f08070; }