/* Stadt-Board Oldenburg — Glas-Look nach dem Muster von wetter.tec-ol.de
   (Design-Tokens aus /opt/wetter/app/static/style.css übernommen,
   ohne WebGL-Himmel: statischer Verlauf reicht fürs Board). */
:root {
  --ink:      #f2f5f9;
  --ink-2:    rgba(242,245,249,0.72);
  --muted:    rgba(242,245,249,0.5);
  --faint:    rgba(242,245,249,0.38);

  --glass:    rgba(255,255,255,0.08);
  --glass-2:  rgba(255,255,255,0.10);
  --glass-hi: rgba(255,255,255,0.16);
  --ring:     rgba(255,255,255,0.10);
  --ring-2:   rgba(255,255,255,0.14);
  --page:     #151f2e;
  --surface:  #252f3d;
  --map-bg:   #16202e;

  --accent:     #7fd0f2;
  --acc-green:  #7fe0bd;
  --acc-amber:  #f4c96b;
  --acc-red:    #f47a6e;

  --font: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --blur: blur(20px);
}

* { box-sizing: border-box; }
/* Author-display (grid/flex) schlägt sonst das UA-hidden — Tabs brauchen das */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(180deg, #26374d 0%, #1a2739 45%, #111a28 100%) fixed, #111a28;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.45;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Kopf ---- */
.site-head { padding: max(14px, env(safe-area-inset-top)) 0 0; }
.head-inner {
  max-width: 1060px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.brand-line { margin: 0; font-size: 1.35rem; font-weight: 650; letter-spacing: .01em; }
.brand-line .hq { color: var(--accent); font-weight: 750; }
.brand-sub { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.stand { margin: 0; color: var(--faint); font-size: .75rem; font-family: var(--mono); text-align: right; }

/* nur für Screenreader (Überschriften-Hierarchie der Panels) */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.tabs-nav { max-width: 1060px; margin: 6px auto 0; padding: 0 18px; }
[role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* Segment-Schalter (Tab-Wahl), Muster wie beim Wetter-HQ */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--glass); border: 1px solid var(--ring); border-radius: 12px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.seg-btn {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: 5px 14px; border-radius: 9px; cursor: pointer;
}
.seg-btn[aria-pressed="true"], .seg-btn[aria-selected="true"] { background: var(--glass-hi); color: var(--ink); }
.seg-btn:hover { color: var(--ink); }

/* ---- Layout ---- */
.wrap { max-width: 1060px; margin: 0 auto; padding: 14px 18px 30px; display: grid; gap: 14px; }

.card {
  background: var(--glass);
  border: 1px solid var(--ring);
  border-radius: 18px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
}

/* ---- Panels ---- */
.panel-stapel { display: grid; gap: 14px; }

/* ---- Stat-Kacheln ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stats-kompakt { grid-template-columns: 1fr 1fr; }
.stats-kompakt .stat { background: rgba(255,255,255,0.04); }
.stat {
  background: var(--glass); border: 1px solid var(--ring); border-radius: 14px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  padding: 12px 14px; display: grid; gap: 2px;
}
.stat-n { font-size: 1.55rem; font-weight: 700; font-family: var(--mono); }
.stat-n.acc { color: var(--accent); }
.stat-n.neu { color: var(--acc-amber); }
.stat-l { color: var(--muted); font-size: .74rem; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Modul-Kacheln (Bus + Parken + Abfuhr) ---- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.modul { padding: 14px 16px; }
.modul-titel { margin: 0 0 10px; font-size: .95rem; font-weight: 650; }
.modul-sub { color: var(--faint); font-size: .7rem; font-weight: 400; font-family: var(--mono); margin-left: 6px; }

.bus-grid { display: grid; gap: 12px; }
.bus-stop h3 { margin: 0 0 4px; font-size: .78rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bus-zeile {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.bus-zeile:last-child { border-bottom: 0; }
.bus-linie {
  font-family: var(--mono); font-weight: 700; color: var(--accent);
  min-width: 2.6em; text-align: right;
}
.bus-ziel { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bus-zeit { font-family: var(--mono); color: var(--ink); }
.bus-delay { font-family: var(--mono); font-size: .74rem; color: var(--acc-amber); }
.bus-delay.punkt { color: var(--acc-green); }
.bus-ausfall { color: var(--acc-red); font-size: .74rem; font-weight: 700; }
.bus-hbf {
  flex: none; align-self: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  color: var(--accent); background: rgba(127,208,242,.14);
  border: 1px solid rgba(127,208,242,.3); border-radius: 5px; padding: 1px 5px;
}

.ph-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 5px 0; }
.ph-zeile + .ph-zeile { border-top: 1px solid rgba(255,255,255,.05); }
.ph-name { font-size: .82rem; color: var(--ink-2); }
.ph-frei { font-family: var(--mono); font-size: .82rem; text-align: right; }
.ph-frei b { color: var(--acc-green); font-weight: 600; }
.ph-frei.eng b { color: var(--acc-amber); }
.ph-frei.voll b { color: var(--acc-red); }
.ph-stoer { color: var(--acc-red); font-size: .74rem; font-family: var(--mono); }
.ph-balken { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.ph-balken i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--acc-green); transition: width .4s;
}
.ph-balken.eng i { background: var(--acc-amber); }
.ph-balken.voll i { background: var(--acc-red); }
.trend { font-size: .7rem; margin-left: 4px; color: var(--muted); }

/* ---- Abfuhr-Kachel ---- */
.awb-gross { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.awb-gross .awb-tag { font-size: 1.3rem; font-weight: 700; }
.awb-gross .awb-in { color: var(--acc-amber); font-family: var(--mono); font-size: .85rem; }
.awb-zeile { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.awb-zeile:last-child { border-bottom: 0; }
.awb-zeile.alt { opacity: .55; }
.awb-zeile .dot { flex: none; align-self: center; }
.awb-art { flex: 1; color: var(--ink-2); }
.awb-datum { font-family: var(--mono); color: var(--ink); font-size: .8rem; }
.dot-rest   { background: #8b97a5; }
.dot-bio    { background: var(--acc-green); }
.dot-papier { background: var(--accent); }
.dot-gelb   { background: var(--acc-amber); }

/* ---- Rad-Tab ---- */
.rad-ctl { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: .8rem; color: var(--ink-2); }
.rad-ctl select {
  background: var(--surface); color: var(--ink); border: 1px solid var(--ring-2);
  border-radius: 9px; padding: 5px 10px; font: inherit; font-size: .8rem; max-width: 100%;
}

/* ---- Bahn + Pegel ---- */
.bahn-gleis { flex: none; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.pegel-gross { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#pegel-spark svg { display: block; width: 100%; height: auto; }

/* ---- Schulausfall-Banner ---- */
.banner { padding: 12px 16px; border-color: rgba(244,201,107,.4); }
.banner-zeile { margin: 4px 0 0; color: var(--ink-2); font-size: .84rem; }

/* ---- Parkprofil-Heatmap ---- */
.profil-skala { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .7rem; color: var(--muted); }
.profil-skala i {
  flex: 0 0 140px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(33,153,204,.15), rgba(127,208,242,1));
}

/* ---- Charts (Rad × Wetter) ---- */
:root {
  --grid: rgba(255,255,255,0.09);
  --c-rad:   #21a377;   /* Serienfarben: validiertes Wetter-HQ-Set (dataviz) */
  --c-rad25: #5e87cf;
  --c-regen: #2199cc;
  --c-temp:  #e04f42;
}
.chart-box { margin-top: 4px; }
.chart-box svg, .mini-panel svg { display: block; width: 100%; height: auto; }
.chart-legende { display: flex; gap: 14px; font-size: .74rem; color: var(--ink-2); margin: 2px 0 4px; }
.chart-legende .dot { width: 9px; height: 9px; }
.chart-hinweis { color: var(--muted); font-size: .76rem; margin: 8px 0 2px; }
.mini-panel { margin-top: 6px; }
.mini-titel { font-size: .72rem; color: var(--muted); margin: 6px 0 2px; letter-spacing: .03em; }
.chart-tabelle { margin-top: 10px; }
.chart-tabelle summary { color: var(--faint); font-size: .75rem; cursor: pointer; }
.chart-tabelle table { border-collapse: collapse; margin-top: 8px; font-size: .76rem; width: 100%; max-width: 560px; }
.chart-tabelle th, .chart-tabelle td { text-align: right; padding: 3px 10px; border-bottom: 1px solid var(--grid); font-family: var(--mono); font-weight: 400; }
.chart-tabelle th:first-child, .chart-tabelle td:first-child { text-align: left; font-family: var(--font); }
.chart-tabelle th { color: var(--muted); }
#tooltip {
  position: fixed; z-index: 1000; pointer-events: none; display: none;
  background: var(--surface); color: var(--ink); font-size: .76rem;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ring-2);
  box-shadow: 0 8px 30px rgba(0,0,0,.45); font-family: var(--mono);
}

/* ---- Karte ---- */
.map-card { position: relative; }
#map { height: 420px; background: var(--map-bg); }
@media (max-width: 640px) { #map { height: 320px; } }
/* OSM-Tiles in den dunklen Look einfärben (wie beim Wetter-HQ-Radar) */
#map .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) saturate(.55) brightness(.9) contrast(.9); }
.leaflet-container { font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.leaflet-popup-content { margin: 10px 14px; font-size: .82rem; }
.leaflet-popup-content b { display: block; margin-bottom: 2px; }

.map-ctl {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--ring);
}
.radius-l { color: var(--ink-2); font-size: .8rem; white-space: nowrap; }
.radius-l b { font-family: var(--mono); color: var(--accent); font-weight: 600; }
#radius { flex: 1; min-width: 140px; accent-color: #7fd0f2; }
.chk { color: var(--ink-2); font-size: .8rem; display: flex; gap: 6px; align-items: center; }
.chk input { accent-color: #7fd0f2; }

.ebenen { border-top: 1px dashed var(--ring); }
.ebenen-l { color: var(--faint); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.ebenen-sel { background: var(--surface); color: var(--ink); border: 1px solid var(--ring-2); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: .74rem; }
.blitzer-icon { font-size: 15px; line-height: 22px; text-align: center; filter: drop-shadow(0 0 3px rgba(244,201,107,.8)); }
.blitzer-icon.fest { filter: drop-shadow(0 0 3px rgba(244,122,110,.9)); }

.legende {
  position: absolute; top: 10px; right: 10px; z-index: 500;
  display: flex; gap: 12px; padding: 6px 12px;
  background: rgba(21,31,46,.82); border: 1px solid var(--ring-2); border-radius: 10px;
  font-size: .72rem; color: var(--ink-2);
}
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.dot-akt  { background: var(--acc-red); }
.dot-bev  { background: var(--acc-amber); }
.dot-home { background: var(--accent); }

/* ---- Sperrungs-Liste ---- */
.liste { display: grid; gap: 10px; }
.sperre {
  background: var(--glass); border: 1px solid var(--ring); border-radius: 14px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  padding: 12px 16px;
}
.sperre.fern { opacity: .62; }
.sperre-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.badge {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.badge-akt { background: rgba(244,122,110,.18); color: var(--acc-red); }
.badge-bev { background: rgba(244,201,107,.16); color: var(--acc-amber); }
.badge-neu { background: rgba(127,224,189,.16); color: var(--acc-green); }
.sperre-titel { margin: 0; font-size: .98rem; font-weight: 650; flex: 1; min-width: 200px; }
.sperre-dist { font-family: var(--mono); color: var(--accent); font-size: .8rem; white-space: nowrap; }
.sperre-meta { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.sperre details { margin-top: 6px; }
.sperre summary { color: var(--faint); font-size: .75rem; cursor: pointer; }
.sperre summary:hover { color: var(--ink-2); }
.sperre-beschr { margin: 6px 0 0; color: var(--ink-2); font-size: .8rem; white-space: pre-line; }
.leer { color: var(--muted); text-align: center; padding: 22px; font-size: .85rem; }

/* ---- Fuß ---- */
.foot { max-width: 1060px; margin: 0 auto; padding: 6px 18px 26px; }
.foot p { color: var(--faint); font-size: .72rem; margin: 0; }
.foot-legal { margin-top: 6px !important; font-size: .78rem !important; }
.foot-legal a { font-weight: 600; }