/* ==========================================================================
   Rheinpegel Neuwied — "Brass on Graphite", Fassung 2
   Hell und Dunkel folgen dem Systemwunsch. Alle Farben stehen als Token in
   :root; die dunkle Fassung ueberschreibt nur die Werte, nie die Regeln.
   Chart.js liest dieselben Token ueber --chart-* aus (siehe core.js).
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Flaechen: warmes Papier, keine reinen Graustufen ------------------ */
  --bg:            #f7f6f3;
  --bg-raised:     #fffefb;
  --bg-card:       #ffffff;
  --bg-inset:      #efede8;
  --border:        rgba(28, 24, 16, .10);
  --border-strong: rgba(28, 24, 16, .20);

  /* --- Akzent: Messing. Im Hellen abgedunkelt, sonst kein Kontrast ------- */
  --brass:         #7d6111;
  --gold:          #8a6a12;
  --gold-dim:      #b9a05c;
  --on-accent:     #fffdf5;

  --text:          #17161a;
  --text-muted:    #55524b;
  --text-faint:    #6c685f;

  --pos:           #0d6b3f;
  --neg:           #a8371a;

  /* --- Serien im Diagramm ------------------------------------------------ */
  --series-main:   #8a6a12;
  --series-mm7:    #2f6f9e;
  --series-mm30:   #7b4a97;

  /* --- Diagramm-Umgebung ------------------------------------------------- */
  --chart-grid:    rgba(28, 24, 16, .10);
  --chart-axis:    rgba(28, 24, 16, .22);
  --chart-text:    #6c685f;
  --chart-zero:    #8a857a;
  --chart-tip-bg:  #ffffff;

  --font: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Radien: gestuft, nicht alles maximal rund ------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Abstandsskala ----------------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  --pad:  1.25rem;
  --maxw: 1180px;

  /* --- Tiefe: im Hellen weiche Schatten, im Dunkeln Flaechenhelligkeit --- */
  --shadow-sm: 0 1px 2px rgba(24, 20, 12, .05);
  --shadow:    0 1px 2px rgba(24, 20, 12, .05), 0 10px 28px -18px rgba(24, 20, 12, .35);
  --shadow-lg: 0 2px 4px rgba(24, 20, 12, .06), 0 24px 48px -28px rgba(24, 20, 12, .45);

  /* --- Bewegung ---------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  .18s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #101113;
    --bg-raised:     #17181b;
    --bg-card:       #1a1b1e;
    --bg-inset:      #141517;
    --border:        rgba(255, 250, 235, .10);
    --border-strong: rgba(255, 250, 235, .20);

    --brass:         #b8860b;
    --gold:          #e0bc4d;
    --gold-dim:      #8f7524;
    --on-accent:     #14100a;

    --text:          #e8e5de;
    --text-muted:    #a5a199;
    --text-faint:    #918d84;

    --pos:           #6ee7a8;
    --neg:           #f0836a;

    --series-main:   #d4af37;
    --series-mm7:    #7fb3d5;
    --series-mm30:   #c98fd6;

    --chart-grid:    rgba(255, 250, 235, .09);
    --chart-axis:    rgba(255, 250, 235, .20);
    --chart-text:    #918d84;
    --chart-zero:    #7c8087;
    --chart-tip-bg:  #0d0e10;

    --shadow-sm: none;
    --shadow:    none;
    --shadow-lg: 0 24px 48px -28px rgba(0, 0, 0, .8);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--gold);
  text-decoration-color: var(--gold-dim);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --- Skip link ----------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: var(--on-accent);
  padding: .7rem 1.1rem; font-weight: 600; border-radius: var(--r-sm);
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- Kopfleiste ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar {
    background: color-mix(in srgb, var(--bg) 65%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s4);
  padding: .6rem var(--s4);
}
.brand {
  display: flex; align-items: center; gap: .55rem;
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  white-space: nowrap; flex-shrink: 0;
}
.brand svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.brand__sub { color: var(--text-faint); font-weight: 400; font-size: .8rem; letter-spacing: 0; }

/* Auf schmalen Geraeten steht die Navigation in einer eigenen, randlosen
   Zeile — vorher war sie seitlich weggescrollt und damit unsichtbar. */
.nav {
  margin-left: auto; display: flex; gap: .2rem;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  background: var(--bg-inset);
  padding: .2rem; border-radius: var(--r-pill);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--text-muted); text-decoration: none;
  font-size: .875rem; font-weight: 500;
  padding: .4rem .85rem; border-radius: var(--r-pill);
  white-space: nowrap; scroll-snap-align: center;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.nav a[aria-current="page"] {
  color: var(--text); background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .nav a[aria-current="page"] { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
}
@media (max-width: 599px) {
  .topbar__inner { flex-wrap: wrap; gap: .5rem; padding-bottom: .5rem; }
  .nav { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* --- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); }

.page-head { margin-bottom: var(--s6); }
.page-head p { color: var(--text-muted); max-width: 66ch; margin: 0; font-size: 1.0625rem; }

/* Die aus data.json nachgefuellten Textstellen bekommen ihre Breite vorab,
   sonst rutscht der Absatz beim Nachfuellen um eine Zeile und schiebt die
   halbe Seite nach unten. Nach dem Fuellen wird die Reservierung wieder
   freigegeben, damit keine Luecke im Satz stehen bleibt. */
[data-fill-zeitraum], [data-fill-nmess] { display: inline-block; }
/* Die Werte sind gemessen, nicht geschaetzt: der gefuellte Zeitraum ist
   19,76 ch breit, die Messungszahl 3 ch (deploy/qa, Messung vom 18.08.).
   Eine zu grosszuegige Reservierung aendert beim Freigeben den Zeilenumbruch
   und schiebt die Seite — genau das war hier schon einmal der Fehler. */
[data-fill-zeitraum] { min-width: 19.8ch; }
[data-fill-nmess] { min-width: 3.1ch; }
[data-fill-zeitraum].gefuellt, [data-fill-nmess].gefuellt { min-width: 0; }

section { margin-bottom: var(--s7); scroll-margin-top: 4.5rem; }

/* Abschnittstitel als echte Ueberschrift statt als Versalien-Etikett. */
.sec-title {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--text); text-transform: none;
  margin-bottom: var(--s3); padding-bottom: 0; border: 0;
}
.sec-lead { color: var(--text-muted); max-width: 70ch; margin: 0 0 var(--s4); font-size: .95rem; }

/* --- Karten -------------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--pad);
  box-shadow: var(--shadow-sm);
}
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }

/* --- Kennzahlen ---------------------------------------------------------- */
.kpi { display: flex; flex-direction: column; gap: .35rem; }
.kpi__label {
  font-size: .8125rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-muted);
}
.kpi__value {
  font-size: 1.75rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.05;
  letter-spacing: -.03em;
}
.kpi__value .u { font-size: .95rem; color: var(--text-faint); font-weight: 400; margin-left: .15em; letter-spacing: 0; }
.kpi__meta { font-size: .8125rem; color: var(--text-faint); }
[aria-busy="true"] .kpi__value { color: var(--text-faint); }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5);
  display: grid; gap: var(--s5);
  grid-template-columns: 1fr;
  margin-bottom: var(--s4);
  box-shadow: var(--shadow);
}
@media (min-width: 720px) { .hero { grid-template-columns: auto 1fr; align-items: center; gap: var(--s7); padding: var(--s6); } }
/* Auf breiten Schirmen verteilen sich die drei Kennwerte ueber die Zeile,
   statt links zu kleben und rechts eine Leere zu lassen. */
@media (min-width: 1000px) { .hero__deltas { justify-content: space-between; } }

.hero__reading { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.hero__value {
  font-size: clamp(3.25rem, 15vw, 5rem);
  font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: .95;
  letter-spacing: -.045em;
}
.hero__unit { font-size: 1.5rem; color: var(--text-faint); font-weight: 400; letter-spacing: -.01em; }
.hero__label {
  font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-muted); margin-bottom: .4rem;
}
.hero__when { color: var(--text-muted); font-size: .875rem; margin-top: .7rem; }
.hero__deltas { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); }
.hero__delta { display: flex; flex-direction: column; gap: .1rem; }
.hero__delta dt {
  font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-muted);
}
.hero__delta dd {
  margin: 0; font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.025em;
}

.trend { font-size: .85em; margin-right: .15em; }
.up { color: var(--pos); }
.down { color: var(--neg); }
.flat { color: var(--text-muted); }

/* --- Etiketten ----------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600; letter-spacing: 0;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.badge__text, .tag__text { color: var(--text); }

.badge::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge--plain { border-color: var(--border-strong); color: var(--text-muted); background: var(--bg-inset); }
.badge--plain::before { display: none; }

.tag {
  display: inline-block; padding: .15rem .5rem; border-radius: var(--r-xs);
  font-size: .75rem; font-weight: 600; letter-spacing: 0;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  white-space: nowrap;
}

/* --- Hinweise ------------------------------------------------------------ */
.note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brass);
  background: var(--bg-inset);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: .9375rem; color: var(--text-muted);
}
.note strong { color: var(--text); }
.note--warn { border-left-color: var(--neg); }
.note + .note { margin-top: var(--s3); }

/* --- Diagramme ----------------------------------------------------------- */
.chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.chart-head {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
  align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border);
}
.chart-head h2, .chart-head h3 { margin: 0; font-size: 1.0625rem; }
.chart-box { position: relative; padding: var(--s4); height: 340px; }
@media (min-width: 720px) { .chart-box { height: 420px; } }
.chart-box--sm { height: 260px; }
@media (min-width: 720px) { .chart-box--sm { height: 300px; } }
.chart-box canvas { touch-action: none; }
.chart-foot {
  padding: var(--s3) var(--s5); border-top: 1px solid var(--border);
  font-size: .8125rem; color: var(--text-faint);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center;
}

/* --- Bedienelemente ------------------------------------------------------ */
.ctrls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.segmented {
  display: inline-flex; padding: .2rem; gap: .15rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-inset);
}
.segmented button {
  appearance: none; border: 0; background: transparent;
  color: var(--text-muted); font: inherit; font-size: .8125rem; font-weight: 500;
  padding: .35rem .8rem; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.segmented button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.segmented button:active { transform: scale(.97); }
.segmented button[aria-pressed="true"] {
  background: var(--bg-card); color: var(--text); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  .segmented button[aria-pressed="true"] { background: var(--brass); color: var(--on-accent); }
}

.btn {
  appearance: none; font: inherit; font-size: .8125rem; font-weight: 500;
  padding: .42rem .85rem; cursor: pointer; white-space: nowrap;
  background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { color: var(--text); border-color: var(--text-faint); }
.btn:active { transform: scale(.97); }
.btn[aria-pressed="true"] { background: var(--brass); color: var(--on-accent); border-color: var(--brass); font-weight: 600; }
.btn--gold { background: var(--brass); color: var(--on-accent); border-color: var(--brass); font-weight: 600; }
.btn--gold:hover { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label {
  font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-muted);
}
input[type="search"], input[type="date"], select {
  font: inherit; font-size: .9375rem;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: .5rem .75rem; min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input[type="search"]:focus, input[type="date"]:focus, select:focus {
  border-color: var(--gold);
}
input[type="search"]::placeholder { color: var(--text-faint); }

/* --- Tabellen ------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg-card); box-shadow: var(--shadow-sm);
}
.table-scroll--tall { max-height: 32rem; overflow-y: auto; }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
caption {
  text-align: left; padding: var(--s3) var(--s5);
  font-size: .875rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
th, td {
  padding: .6rem .8rem; text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-raised); color: var(--text-muted);
  font-size: .8125rem; text-transform: none; letter-spacing: 0;
  font-weight: 600; border-bottom: 1px solid var(--border-strong);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .875rem; }
.wrap-cell { white-space: normal; min-width: 20rem; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable::after { content: "↕"; opacity: .35; margin-left: .35rem; font-size: .9em; }
th.sortable[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; color: var(--gold); }
th.sortable[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--gold); }

/* --- Beschreibungslisten ------------------------------------------------- */
.dl { display: grid; grid-template-columns: 1fr auto; gap: .1rem var(--s4); margin: 0; font-size: .9375rem; }
.dl dt { color: var(--text-muted); padding: .35rem 0; border-bottom: 1px solid var(--border); }
.dl dd {
  margin: 0; padding: .35rem 0; text-align: right;
  color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }
.dl dd .u { color: var(--text-faint); font-weight: 400; font-size: .85em; margin-left: .15em; }
.dl--gold dd { color: var(--text); font-weight: 600; }

/* --- Ranglisten ---------------------------------------------------------- */
.ranks { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.ranks li {
  display: grid; grid-template-columns: 1.6rem 1fr auto;
  gap: .6rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--border);
}
.ranks li:last-child { border-bottom: 0; }
.ranks .r { color: var(--text-faint); font-size: .8125rem; font-variant-numeric: tabular-nums; text-align: right; }
.ranks .w { color: var(--text-muted); font-size: .8125rem; }
.ranks .v { font-variant-numeric: tabular-nums; font-weight: 600; font-family: var(--mono); }

/* --- Legende ------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .8125rem; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: .7rem; height: .7rem; border-radius: 3px; flex-shrink: 0; }
.legend i.line { height: 0; width: 1.1rem; border-top: 2px solid currentColor; border-radius: 0; }
.legend i.dash { height: 0; width: 1.1rem; border-top: 2px dashed currentColor; border-radius: 0; }

/* --- Ereignisseite ------------------------------------------------------- */
.event-head { display: flex; flex-wrap: wrap; gap: .5rem var(--s4); align-items: baseline; margin-bottom: .35rem; }
.event-head h2 { margin: 0; }
.event-range { color: var(--text-faint); font-size: .875rem; font-variant-numeric: tabular-nums; }

.thresholds { display: flex; flex-wrap: wrap; gap: var(--s2); }
.threshold {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .55rem .8rem; background: var(--bg-inset); min-width: 5.5rem;
}
.threshold b { display: block; color: var(--text); font-size: 1.2rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.threshold span { font-size: .75rem; color: var(--text-faint); }

/* --- Fusszeile ----------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  padding: var(--s6) var(--s4);
  font-size: .875rem; color: var(--text-faint);
}
.foot__inner { max-width: var(--maxw); margin: 0 auto; display: grid; gap: var(--s4); }
@media (min-width: 720px) { .foot__inner { grid-template-columns: 1fr auto; align-items: start; } }
.foot p { margin: 0 0 .4rem; max-width: 70ch; }
.foot a { color: var(--text-muted); }
.foot a:hover { color: var(--gold); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem var(--s4); }

/* --- Hilfsklassen -------------------------------------------------------- */
.mt { margin-top: var(--s4); }
.mt-lg { margin-top: var(--s6); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.status { font-size: .875rem; color: var(--text-muted); }

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

/* ==========================================================================
   Bewegung
   Alles hier ist Zugabe: ohne Unterstuetzung oder bei
   `prefers-reduced-motion: reduce` bleibt die Seite vollstaendig benutzbar.
   Bewusst weggelassen: Scroll-Jacking, seitenweites Parallax, 3D-Kippkarten.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Stroemung hinter dem aktuellen Messwert --------------------------
     Zwei Wellenlagen mit unterschiedlichem Tempo. Die Tiefe entsteht aus
     dem Geschwindigkeitsunterschied, nicht aus 3D — das bleibt ruhig genug
     fuer eine Seite mit Hochwasserdaten. Bewegt wird `transform`, damit die
     Grafikeinheit die Arbeit macht und der Hauptthread frei bleibt. */
  .hero { position: relative; overflow: hidden; isolation: isolate; }
  .hero > * { position: relative; z-index: 1; }
  .hero::before, .hero::after {
    content: ""; position: absolute; z-index: 0;
    left: 0; bottom: -10px; width: 200%; height: 160px;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: 50% 100%;
    will-change: transform;
  }
  .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0 96c100-34 200-34 300 0s200 34 300 0 200-34 300 0 200 34 300 0v64H0z' fill='%23b8860b'/%3E%3C/svg%3E");
    opacity: .07;
    animation: stroemung-langsam 34s linear infinite;
  }
  .hero::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0 116c150-28 250 28 400 0s250-40 400 0 250 28 400 0v44H0z' fill='%23b8860b'/%3E%3C/svg%3E");
    opacity: .05;
    animation: stroemung-schnell 21s linear infinite reverse;
  }
  @keyframes stroemung-langsam { to { transform: translate3d(-50%, 0, 0); } }
  @keyframes stroemung-schnell { to { transform: translate3d(-50%, 0, 0); } }

  /* --- Abschnitte tauchen beim Scrollen auf ----------------------------
     Nativ ueber die Scroll-Zeitachse, ohne eine Zeile JavaScript. Der erste
     Abschnitt bleibt ausgenommen: er traegt den groessten sichtbaren Inhalt
     und darf beim Laden nicht erst durchsichtig sein. */
  @supports (animation-timeline: view()) {
    main > section.enthuellen {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes auftauchen {
      from { opacity: 0; transform: translate3d(0, 20px, 0); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* --- Kopfleiste bekommt Kante, sobald die Seite laeuft ---------------- */
  @supports (animation-timeline: scroll()) {
    .topbar {
      animation: kopfleiste linear both;
      animation-timeline: scroll();
      animation-range: 0 120px;
    }
    @keyframes kopfleiste {
      to { box-shadow: 0 8px 24px -20px rgba(0, 0, 0, .55); }
    }
  }

  /* --- Karten heben sich leicht unter dem Zeiger ------------------------ */
  .card, .chart-card, .table-scroll {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  @media (prefers-color-scheme: dark) {
    .card:hover { border-color: var(--border-strong); }
  }
}

/* --- Kante des Hero in der Farbe der aktuellen Pegelklasse --------------
   Die Farbe kommt aus data.json und wird von index.js als --klasse gesetzt.
   Als Innenschatten statt Rahmen, damit sich die Hoehe nicht aendert. */
.hero { box-shadow: var(--shadow), inset 0 3px 0 var(--klasse, transparent); }