/* ---- Public Hero (Full-Bleed Foto + Text-Overlay) ---- */
.lst-hero{ position:relative; display:flex; align-items:center; min-height:clamp(460px,56vh,620px); background:linear-gradient(180deg,#11161c,#1a2027); border-bottom:1px solid var(--tile-line); overflow:hidden; }
.lst-hero-scrim{ position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(8,11,16,.92) 0%, rgba(8,11,16,.78) 34%, rgba(8,11,16,.38) 64%, rgba(8,11,16,.08) 100%); }
.lst-hero .container{ position:relative; z-index:1; width:100%; }
.lst-hero-content{ max-width:600px; padding:40px 0 64px; }
.lst-pill{ display:inline-block; border:1px solid rgba(255,255,255,.3); background:rgba(8,11,16,.35); color:#e7edf5; border-radius:999px; padding:5px 14px; font-size:12.5px; font-weight:600; margin-bottom:18px; backdrop-filter:blur(2px); }
.lst-h1{ font-size:clamp(2.4rem,4.6vw,3.8rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 16px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.lst-sub{ color:#cdd6e2; font-size:1.08rem; max-width:48ch; margin:0 0 20px; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.lst-status{ display:inline-flex; align-items:center; gap:8px; color:var(--ok); font-weight:700; font-size:.95rem; margin-bottom:18px; }
.lst-status--alarm{ color:var(--alarm); }
.lst-status--alarm .dot{ animation:lst-status-pulse 1.3s ease-in-out infinite; }
@keyframes lst-status-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.lst-2col{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:stretch; }

/* Compact rows (Termine / Cockpit-Tabelle) */
.lst-rows{ width:100%; border-collapse:collapse; }
.lst-rows th{ text-align:left; color:var(--text-soft); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:6px; font-weight:700; }
.lst-rows td{ padding:10px 6px; border-bottom:1px solid var(--tile-line); font-size:.9rem; }
.lst-rows tr:last-child td{ border-bottom:0; }
.lst-rows .c-date{ color:var(--text-strong); font-weight:600; white-space:nowrap; }
.lst-rows .c-time{ color:var(--text-soft); white-space:nowrap; }
.lst-rows .c-loc{ color:var(--muted); }
.lst-st{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.lst-contact-map-label{ position:absolute; left:10px; bottom:10px; background:rgba(8,11,16,.7); color:#e7edf5; font-size:.78rem; font-weight:600; padding:3px 9px; border-radius:6px; }

/* ---- Internal Cockpit ---- */
.lst-cockpit{ display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start; }
.lst-cockpit .span-2{ grid-column:1 / -1; }
.lst-cockpit .row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lst-gauge{ width:150px; height:150px; border-radius:50%; margin:6px auto 4px; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--ok) 0 calc(var(--val,74) * 1%), var(--warn) calc(var(--val,74) * 1%) calc((var(--val,74) + 10) * 1%), var(--alarm) calc((var(--val,74) + 10) * 1%) 100%); }
.lst-gauge::before{ content:""; position:absolute; inset:18px; border-radius:50%; background:var(--tile-bg); }
.lst-gauge-num{ position:relative; text-align:center; }
.lst-gauge-num b{ font-size:2rem; font-weight:800; display:block; line-height:1; }
.lst-gauge-num span{ color:var(--muted); font-size:.75rem; }
.lst-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--text-soft); justify-content:center; margin-top:8px; }
.lst-legend span{ display:inline-flex; align-items:center; gap:6px; }
.lst-files{ display:grid; }
.lst-file{ display:flex; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--tile-line); }
.lst-file:last-child{ border-bottom:0; }
.lst-file-ic{ width:32px; height:38px; border-radius:5px; display:grid; place-items:center; font-size:8.5px; font-weight:800; color:#fff; flex:0 0 32px; }
.fi-pdf{ background:#c0392b; } .fi-docx{ background:#2563eb; } .fi-xlsx{ background:#1e8e4f; }
.lst-file-t{ font-weight:600; font-size:.9rem; }
.lst-file-m{ color:var(--muted); font-size:.78rem; }
.lst-file-pin{ margin-left:auto; color:var(--muted); }
.lst-quick{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lst-qt{ display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--tile-line); border-radius:10px; background:var(--surface-2); }
.lst-qt:hover{ border-color:var(--primary); transform:translateY(-2px); }
.lst-qt b{ font-weight:700; }
.lst-qt span{ color:var(--muted); font-size:.78rem; }
.lst-notice{ display:flex; align-items:center; gap:14px; }
.lst-notice-ic{ width:38px; height:38px; border-radius:9px; background:var(--primary); display:grid; place-items:center; color:#fff; flex:0 0 38px; }

@media (max-width: 900px){
  .lst-2col, .lst-3col, .lst-statband, .lst-cockpit, .lst-cockpit .row3, .lst-quick { grid-template-columns:1fr; }
  .lst-hero-content{ padding:48px 0 64px; max-width:none; }
  .lst-hero-scrim{ background:linear-gradient(180deg, rgba(8,11,16,.78) 0%, rgba(8,11,16,.62) 45%, rgba(8,11,16,.82) 100%); }
}

/* Einstellungs-Hub Gruppierung */
.settings-group-title{ margin:26px 0 2px; font-size:1.15rem; }
.settings-group-title--expert{ margin-top:34px; }
.settings-group-title + .form-hint{ margin-top:0; margin-bottom:12px; }

/* Aufgaben-Panel (Admin-Cockpit) */
.task-panel{ margin-bottom:18px; }
.task-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.task-tile{ display:flex; flex-direction:column; gap:4px; padding:18px 16px; border:1px solid var(--tile-line); border-radius:12px; background:var(--tile-bg); text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.task-tile:hover{ border-color:var(--primary); transform:translateY(-2px); }
.task-ic{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:rgba(200,19,44,.12); color:var(--primary); font-size:22px; font-weight:700; margin-bottom:6px; }
.task-tt{ font-weight:700; }
.task-td{ font-size:.9rem; color:var(--text-soft); }
@media (max-width: 900px){ .task-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .task-grid{ grid-template-columns:1fr; } }

/* Fehlerseiten (404 / 500) */
.error-card{ text-align:center; padding:40px 28px; }
.error-code{ font-size:clamp(3rem,8vw,5rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--primary); font-variant-numeric:tabular-nums; }
.error-card h1{ margin:10px 0 6px; }
.error-card .muted{ max-width:52ch; margin:0 auto 22px; }
.error-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.error-note{ margin-top:22px; font-size:.95rem; color:var(--text-soft); }

/* =====================================================================
   LEITSTAND – Startseite (Konzept-Layout, Querformat = 1 Bildschirm)
   Hero-Banner oben → Vertrauensleiste → Zeile (Aktuelles+Termine)
   → Zeile (Mannschaft+Mitmachen+Kontakt) → Footer
   ===================================================================== */
.lst-row{ padding:18px 0; }
.lst-row-3{ padding-top:0; }
.lst-tile-body{ display:block; }

/* Spenden-Buttons (Mitmachen-Kachel) */
.btn-spende{ background:#fff; color:var(--primary); font-weight:800; }
.btn-spende:hover{ background:#f0f0f0; }
.btn-mitglied{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-mitglied:hover{ background:rgba(255,255,255,.26); }

/* ===== Adaptiver Leitstand-Modus: Start- & Wetterseite auf einen Bildschirm =====
   Aktiv nur, wenn der Viewport ihn komfortabel trägt (Querformat + genug Breite
   UND Höhe). Sonst greift der normale, scrollende Fluss (Default weiter oben). */
@media (orientation: landscape) and (min-width: 1024px) and (min-height: 720px){
  html, body.home-leitstand, body.weather-leitstand, body.unwetter-takeover{ height:100%; }
  body.home-leitstand, body.weather-leitstand, body.unwetter-takeover{
    height:100dvh; overflow:hidden;
    display:flex; flex-direction:column;
  }
  body.home-leitstand .topbar, body.weather-leitstand .topbar, body.unwetter-takeover .topbar{ flex:0 0 auto; }
  body.home-leitstand .footer-min, body.weather-leitstand .footer-min, body.unwetter-takeover .footer-min{ flex:0 0 auto; padding:8px 0; }
  body.home-leitstand .site-header-inner, body.weather-leitstand .site-header-inner, body.unwetter-takeover .site-header-inner{ min-height:52px; }
  body.home-leitstand .footer, body.weather-leitstand .footer, body.unwetter-takeover .footer{ margin-top:0; }

  /* ---- Unwetter-Modus: Dashboard füllt die von Nav/Footer freigelassene Restfläche ---- */
  body.unwetter-takeover .uw{ flex:1 1 auto; min-height:0; }

  /* ---- Geteilte Hero-/Kachel-Stile (Start + Wetter) ---- */
  .lst-leitstand .lst-hero{
    flex:0 0 auto;
    height:clamp(220px,28vh,420px);
    min-height:0;
    align-items:center;
  }
  .lst-leitstand .lst-h1{ font-size:clamp(1.7rem,3.2vh,3rem); margin-bottom:10px; }
  .lst-leitstand .lst-sub{ font-size:clamp(.85rem,1.5vh,1.05rem); margin-bottom:14px; }
  .lst-leitstand .lst-status{ margin-bottom:12px; }
  .lst-leitstand .card{ min-height:0; display:flex; flex-direction:column; }
  .lst-leitstand .card-head{ flex:0 0 auto; }
  .lst-leitstand .lst-tile-body{ flex:1 1 auto; min-height:0; overflow:auto; }
  /* Dashboard etwas breiter nutzen → weniger leere Seitenränder auf Widescreen */
  .lst-leitstand .lst-hero > .container,
  .lst-leitstand .lst-row > .container,
  .lst-leitstand .lst-statband-wrap > .container{ width:min(var(--container-wide),94vw); }

  /* ---- Startseite: Hero · Statband · zwei Inhaltszeilen, vertikal zentriert ---- */
  .public-home.lst-leitstand{
    flex:1 1 auto; min-height:0; width:100%;
    display:flex; flex-direction:column; justify-content:center;
    gap:clamp(10px,1.6vh,20px);
    padding:clamp(10px,1.6vh,20px) 0;
  }
  /* Zeilen gedeckelt (kein Strecken auf 4K) und schrumpffähig (kein Clipping klein) */
  .public-home.lst-leitstand .lst-row{
    flex:0 1 auto; min-height:0; padding:0; display:flex;
    max-height:clamp(300px,40vh,520px);
  }
  .public-home.lst-leitstand .lst-row > .container{ display:flex; min-height:0; }
  .public-home.lst-leitstand .lst-2col,
  .public-home.lst-leitstand .lst-3col{ flex:1 1 auto; min-height:0; }

  /* ---- Wetterseite: 2×2-Dashboard, füllt genau einen Bildschirm ---- */
  .weather-leitstand .ww-leitstand{
    flex:1 1 auto; min-height:0; width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "hero  hero"
      "top   top"
      "days  water"
      "cred  cred";
    grid-template-rows:auto
      minmax(0, clamp(220px,42vh,520px))
      minmax(0, clamp(200px,36vh,440px))
      auto;
    align-content:center;
    gap:clamp(8px,1.4vh,18px);
    padding:clamp(8px,1.4vh,18px) 0;
  }
  .weather-leitstand .ww-leitstand .lst-hero{ grid-area:hero; }
  .weather-leitstand .ww-leitstand .ww-row-top{ grid-area:top; }
  .weather-leitstand .ww-leitstand .ww-row-days{ grid-area:days; }
  .weather-leitstand .ww-leitstand .ww-row-water{ grid-area:water; }
  .weather-leitstand .ww-leitstand .ww-credits{ grid-area:cred; padding:6px 0; }
  .weather-leitstand .ww-leitstand .lst-row{ min-height:0; padding:0; display:flex; }
  .weather-leitstand .ww-leitstand .lst-row > .container{ display:flex; width:100%; min-height:0; }
  .weather-leitstand .ww-leitstand .lst-row > .container > .card,
  .weather-leitstand .ww-leitstand .lst-2col{ flex:1 1 auto; min-height:0; }
}

/* ── Wetterseite: Ein-Bildschirm-Dashboard erst, wenn es WIRKLICH passt ──
   Hero + Aktuelles/Warnungen + 7-Tage + Wasserstand (inkl. Diagramm) brauchen
   gut Höhe. Unter ~1000px bleibt die Höhe pro Kachel zu klein (das Wasserstand-
   Diagramm fiele aus dem Raster), darum greift dort der normale, scrollende
   Fluss – jede Kachel komplett sichtbar, die Seite scrollt. So passt sich die
   Seite an das Layout an, statt Inhalte in Kacheln zu verstecken. */
@media (orientation: landscape) and (min-width: 1024px) and (min-height: 720px) and (max-height: 999px){
  body.weather-leitstand, body.unwetter-takeover{ height:auto; min-height:0; overflow:visible; display:block; }
  .weather-leitstand .ww-leitstand{ display:block; }
  .weather-leitstand .lst-leitstand .lst-row{ display:block; padding:18px 0; }
  .weather-leitstand .lst-leitstand .lst-row > .container{ display:block; }
  .weather-leitstand .lst-leitstand .card{ display:block; }
  .weather-leitstand .lst-leitstand .lst-tile-body{ display:block; overflow:visible; }
  .unwetter-takeover .uw{ display:block; height:auto; }
}

/* ── Wasserstand-Kachel im Dashboard (≥1000px Höhe): an die Höhe anpassen ──
   Gestapelt wie sonst (Station · Messwerte · Diagramm), aber das Diagramm füllt
   die RESTHÖHE der Kachel (flex) statt fixer 120px – es schrumpft mit, bleibt
   aber immer komplett sichtbar (kein Scrollen innerhalb der Kachel). */
@media (orientation: landscape) and (min-width: 1024px) and (min-height: 1000px){
  .weather-leitstand .ww-ws{ height:100%; min-height:0; gap:8px; }
  .weather-leitstand .ww-ws-station,
  .weather-leitstand .ww-ws-metrics{ flex:0 0 auto; }
  /* Messwerte verdichten, damit mehr Höhe fürs Diagramm bleibt. */
  .weather-leitstand .ww-ws-metrics{ gap:8px; }
  .weather-leitstand .ww-ws-metric{ padding:8px 12px; gap:2px; }
  .weather-leitstand .ww-ws-metric-value{ font-size:20px; }
  .weather-leitstand .ww-ws-chart{
    flex:1 1 auto; min-height:0; margin:0;
    display:flex; flex-direction:column; padding:10px 14px 8px;
  }
  .weather-leitstand .ww-ws-plot{ flex:1 1 auto; height:auto; min-height:0; }
  .weather-leitstand .ww-ws-chart svg{ height:100%; }
  /* Min/Max stehen bei den Messwerten, Quelle im Kachelkopf ("HD NÖ öffnen"). */
  .weather-leitstand .ww-ws-chart figcaption{ display:none; }
  .weather-leitstand .ww-ws-note{ display:none; }
}

/* Niedrige Querformate (z. B. 1366×768): weiter verdichten */
@media (orientation: landscape) and (min-width: 1024px) and (min-height: 720px) and (max-height: 800px){
  .lst-leitstand .lst-hero{ height:clamp(170px,24vh,230px); }
  .lst-leitstand .lst-sub{ display:none; }
  .lst-leitstand .card{ padding:12px 16px; }
}

/* =========================================================================
   Wetter & Warnungen page  (.ww-*)
   ========================================================================= */

/* Icon colours — monochrome; only storm uses the alert red */
.ww-col-sun   { color: var(--text-strong); }
.ww-col-cloud { color: var(--text-soft); }
.ww-col-fog   { color: var(--muted); }
.ww-col-rain  { color: var(--text-soft); }
.ww-col-snow  { color: var(--text-soft); }
.ww-col-storm { color: var(--primary); }

/* Generic icon sizing */
.ww-icon     { display: block; width: 1em; height: 1em; }
.ww-icon-xl  { width: 1em; height: 1em; }

/* ── Page bands ─────────────────────────────────────────────────────────── */
.ww-band     { padding: 36px 0; }
.ww-band-alt { background: var(--surface); }

/* ── Section header row ─────────────────────────────────────────────────── */
.ww-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 20px;
  letter-spacing: .01em;
  border-left: 3px solid var(--primary);
  padding-left: 12px;
}
.ww-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ww-source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
  transition: color .15s;
}
.ww-source-link:hover { color: var(--text-strong); }
.ww-source-note {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 16px;
}

/* ── Hero (compact variant) ──────────────────────────────────────────────── */
.ww-hero { min-height: clamp(110px, 16vh, 160px) !important; }
.ww-hero-content { padding: 22px 0 34px !important; }
.ww-hero-status { color: var(--text-soft) !important; font-size: .88rem; margin-bottom: 0; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.ww-row-top { padding-top: 24px; }
/* minmax(0,…) statt 1.15fr/1fr: ohne die 0-Untergrenze respektiert die linke
   Spalte die Mindestbreite ihres Inhalts (die stündliche Vorhersage ist
   24×68px ≈ 1668px breit) und schiebt die Warnungs-Kachel aus dem Bild. */
.ww-top-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; }
.ww-top-grid > .card { min-width: 0; }
.ww-top-grid .lst-tile-body { min-width: 0; }
/* Die horizontale Scroll-Leiste der Stundenleiste darf ihre Kachel nicht aufblähen. */
.ww-hourly-track { min-width: 0; }
.ww-card-meta { font-size: 12px; color: var(--muted); }

/* ── Incard divider (between current weather and hourly) ─────────────────── */
.ww-incard-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* ── Current conditions ──────────────────────────────────────────────────── */
.ww-now-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 32px;
  align-items: center;
  margin-bottom: 4px;
}
.ww-now-main {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ww-now-icon {
  font-size: 72px;
  flex: 0 0 auto;
  line-height: 1;
  opacity: .9;
}
.ww-now-body { display: flex; flex-direction: column; gap: 4px; }
.ww-now-temp {
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ww-now-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.ww-now-place { font-size: .82rem; color: var(--muted); margin-top: 2px; }

.ww-now-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 16px;
  align-content: center;
}
.ww-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ww-detail-ic {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--primary);
  opacity: .75;
}
.ww-detail span  { color: var(--text-soft); font-size: .88rem; flex: 1; }
.ww-detail strong { color: var(--text-strong); font-size: .95rem; font-weight: 700; white-space: nowrap; }

/* ── Hourly strip ────────────────────────────────────────────────────────── */
.ww-hourly-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-soft) transparent;
}
.ww-hourly-track::-webkit-scrollbar { height: 4px; }
.ww-hourly-track::-webkit-scrollbar-track { background: transparent; }
.ww-hourly-track::-webkit-scrollbar-thumb { background: var(--surface-soft); border-radius: 4px; }

.ww-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px;
  min-width: 62px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.ww-hour--now {
  border-color: var(--primary);
  background: rgba(200,19,44,.08);
  position: relative;
}
.ww-hour--now .ww-hour-time {
  color: var(--primary-soft, #e05470);
  font-weight: 800;
}
.ww-hour-time   { font-size: 11px; font-weight: 700; color: var(--text-soft); letter-spacing: .04em; }
.ww-hour-icon   { font-size: 24px; line-height: 1; }
.ww-hour-temp   { font-size: .95rem; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ww-hour-rain   { font-size: 11px; color: var(--muted); font-weight: 600; }
.ww-hour-rain--none { color: var(--line); }

/* ── 7-day grid ─────────────────────────────────────────────────────────── */
.ww-daily-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.ww-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.ww-day:first-child { border-color: var(--primary); }
.ww-day-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.ww-day:first-child .ww-day-label { color: var(--primary-soft); }
.ww-day-icon   { font-size: 28px; line-height: 1; }
.ww-day-cond   { font-size: 11px; color: var(--muted); text-align: center; min-height: 2.4em; line-height: 1.2; }
.ww-day-range  { display: flex; gap: 8px; align-items: baseline; }
.ww-day-max    { font-size: .95rem; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ww-day-min    { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ww-day-rain   { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 600; }

/* ── Warning cards ───────────────────────────────────────────────────────── */
.ww-warn-count {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(200,19,44,.15);
  color: var(--primary-soft);
  margin-left: 10px;
  vertical-align: middle;
}
.ww-warn-region-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
/* ── compact warning rows ────────────────────────────────────────────────── */
.ww-warn-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.ww-warn-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: .82rem;
  border-bottom: 1px solid var(--line-soft);
}
.ww-warn-row:last-child { border-bottom: none; }
.ww-warn-row:nth-child(even) { background: rgba(255,255,255,.02); }

.ww-warn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--muted);
}
.ww-warn-dot--extreme  { background: var(--primary); }
.ww-warn-dot--severe   { background: #d46000; }
.ww-warn-dot--moderate { background: #c9a800; }
.ww-warn-dot--minor    { background: var(--text-soft); }

.ww-warn-ev { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.ww-warn-ar { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ww-warn-tm { font-size: .72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ww-warn-none {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: .85rem;
}
.ww-warn-more {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.ww-warn-more a { color: var(--text-soft); }
.ww-warn-more a:hover { color: var(--text-strong); }

/* ── UWZ map toggle (<details>/<summary>) ────────────────────────────────── */
.ww-uwz-toggle {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.ww-uwz-toggle > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  padding: 4px 0;
  user-select: none;
}
.ww-uwz-toggle > summary::-webkit-details-marker { display: none; }
.ww-uwz-toggle > summary:hover { color: var(--text-strong); }
.ww-uwz-toggle[open] > summary { margin-bottom: 10px; color: var(--text-strong); }
.ww-uwz-inner { border-radius: var(--radius); overflow: hidden; line-height: 0; }
.ww-uwz-map {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.ww-uwz-caption {
  line-height: 1.4;
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 0;
}
.ww-uwz-caption a { color: var(--text-soft); }
.ww-uwz-caption a:hover { color: var(--text-strong); }

/* ── Wasserstand (serverseitig gerendert, kein Iframe) ───────────────────── */
.ww-ws { display: flex; flex-direction: column; gap: 16px; }

.ww-ws-station {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--text-soft);
}
.ww-ws-station svg { color: var(--primary); flex: 0 0 auto; }
.ww-ws-station strong { color: var(--text-strong); font-weight: 600; }

.ww-ws-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ww-ws-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.ww-ws-metric-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.ww-ws-metric-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-strong);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ww-ws-metric-value small { font-size: 14px; font-weight: 500; color: var(--text-soft); }
.ww-ws-metric-range { font-size: 12px; color: var(--muted); }

.ww-ws-trend { font-size: 18px; line-height: 1; }
.ww-ws-trend--rising  { color: var(--alarm); }
.ww-ws-trend--falling { color: var(--ok); }
.ww-ws-trend--steady  { color: var(--muted); }

.ww-ws-chart {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  padding: 14px 16px 10px;
}
.ww-ws-plot { position: relative; height: 120px; }
.ww-ws-chart svg {
  display: block;
  width: 100%;
  height: 120px;
}
/* HQ-/Hochwasser-Schwellenlinien (nur bei Annäherung an HW1/HQ1 eingeblendet) */
.ww-ws-thr {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1.5px dashed var(--thr);
  pointer-events: none;
  transform: translateY(-0.75px);
}
.ww-ws-thr-lbl {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  background: var(--thr);
}
.ww-ws-thr--low  { --thr: #d9a400; }
.ww-ws-thr--mid  { --thr: #e07a1f; }
.ww-ws-thr--high { --thr: #d63b2f; }
.ww-ws-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ww-ws-area { fill: var(--primary); opacity: .12; stroke: none; }
.ww-ws-chart figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.ww-ws-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.ww-ws-note svg { flex: 0 0 auto; margin-top: 1px; }
.ww-ws-note a { color: var(--text-soft); }
.ww-ws-note a:hover { color: var(--text-strong); }

/* ── Error / credits ─────────────────────────────────────────────────────── */
.ww-error {
  padding: 18px 0;
  color: var(--muted);
  font-style: italic;
}
/* ── Clickable warning rows ──────────────────────────────────────────────── */
.ww-warn-row[role="button"] { cursor: pointer; }
.ww-warn-row[role="button"]:hover { background: rgba(255,255,255,.04); }
.ww-warn-row[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Amstetten district highlight */
.ww-warn-row--amstetten {
  background: rgba(200,19,44,.06);
  border-left: 3px solid var(--primary);
  padding-left: 11px;
}
.ww-warn-row--amstetten .ww-warn-ev { color: var(--text-strong); }

/* ── Warning modal ───────────────────────────────────────────────────────── */
.ww-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ww-modal[hidden] { display: none; }
.ww-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}
.ww-modal-box {
  position: relative;
  background: var(--surface, #262c33);
  border: 1px solid var(--line, #3d4651);
  border-radius: var(--radius-lg, 10px);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
  animation: ww-modal-in .15s ease;
}
@keyframes ww-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ww-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line-soft, #2f363f);
}
.ww-modal-head-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ww-modal-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
  flex: 0 0 auto;
  background: rgba(255,255,255,.07);
  color: var(--text-soft);
}
.ww-modal-badge--extreme  { background: rgba(200,19,44,.25); color: #f07090; }
.ww-modal-badge--severe   { background: rgba(212,96,0,.25);  color: #e07828; }
.ww-modal-badge--moderate { background: rgba(201,168,0,.25); color: #c9a800; }
.ww-modal-badge--minor    { background: rgba(255,255,255,.07); color: var(--text-soft); }
.ww-modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ww-modal-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  border-radius: var(--radius);
  flex: 0 0 auto;
  line-height: 0;
}
.ww-modal-close:hover { color: var(--text-strong); background: rgba(255,255,255,.07); }
.ww-modal-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.ww-modal-field { display: flex; flex-direction: column; gap: 3px; }
.ww-modal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ww-modal-value { font-size: .9rem; color: var(--text-strong); }
.ww-modal-areas { color: var(--text-soft); font-size: .85rem; line-height: 1.6; }

/* ── Credits ─────────────────────────────────────────────────────────────── */
.ww-credits {
  padding: 14px 0;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--muted);
}
.ww-credits a { color: var(--text-soft); }
.ww-credits a:hover { color: var(--text-strong); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ww-top-grid { grid-template-columns: 1fr !important; }
  .ww-now-grid { grid-template-columns: 1fr; gap: 16px; }
  .ww-daily-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .ww-now-icon { font-size: 52px; }
  .ww-now-main { gap: 14px; }
  .ww-daily-grid { grid-template-columns: repeat(2, 1fr); }
  .ww-ws-metric-value { font-size: 22px; }
}