/*
 * SPDX-License-Identifier: EUPL-1.2
 * © 2024–2026 Thomas Kieß and contributors
 */

/* Smart-City-Dashboards — gemeinsame Theme-Tokens + Basiskomponenten (F2).
   Farbwelt nach Vorbild Smart City Münster (#009fe3); Kategorienfarben je
   Modus mit dem Dataviz-Validator geprüft (hell auf #ffffff, dunkel auf
   #16222e: Helligkeitsband, Chroma, CVD-Separation, Kontrast ≥ 3:1 — PASS).
   F6 ergänzt hier den Theme-Katalog über [data-theme="…"]-Varianten. */

:root {
  color-scheme: light;
  --accent: #0074e8;
  --tile: #0066cc;
  --surface-0: #e9f2f8;
  --surface-1: #ffffff;
  --border: #d5e4ee;
  --text-primary: #12283a;
  --text-secondary: #48606f;
  --text-muted: #7e93a1;
  --series-1: #0078d4;
  --series-2: #0db93c;
  --series-3: #ea2c3c;
  --series-4: #e88a00;
  --series-5: #b42323;
  --status-good: #0db93c;
  --status-warn: #e88a00;
  --status-serious: #ea2c3c;
  --grid: rgba(18,40,58,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --accent: #0074e8;
    --tile: #0a72c2;
    --surface-0: #0e1720;
    --surface-1: #16222e;
    --border: #24384a;
    --text-primary: #f2f7fb;
    --text-secondary: #b9cbd8;
    --text-muted: #77909f;
    --series-1: #4db2ff;
    --series-2: #3ce378;
    --series-3: #ff5252;
    --series-4: #ffb020;
    --series-5: #ff8a8a;
    --status-good: #3ce378;
    --status-warn: #ffb020;
    --status-serious: #ff5252;
    --grid: rgba(255,255,255,.08);
  }
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--surface-0);
  color: var(--text-primary);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 20px clamp(12px, 3vw, 36px) 40px;
}
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 16px; }
header h1 { font-size: 1.45rem; font-weight: 650; letter-spacing: -.01em;
            border-left: 5px solid var(--accent); padding-left: 12px; }
header .sub { color: var(--text-secondary); font-size: .92rem; }
header .stand { margin-left: auto; color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
#err { display: none; background: color-mix(in srgb, var(--status-serious) 14%, var(--surface-1));
       border: 1px solid var(--status-serious); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
footer { margin-top: 22px; color: var(--text-muted); font-size: .76rem; line-height: 1.7; }
footer a { color: var(--text-secondary); }

/* ---------- KPI-Kacheln ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { position: relative; background: var(--tile); border: 1px solid color-mix(in srgb, var(--tile) 80%, #000);
        border-radius: 12px; padding: 12px 14px 10px; color: #fff; box-shadow: 0 2px 6px rgba(18,40,58,.10); }
.tile .label { font-size: .78rem; color: rgba(255,255,255,.88); margin-bottom: 6px; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
.tile .value { font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .value .unit { font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.85); margin-left: 3px; }
.tile .hint { font-size: .74rem; color: rgba(255,255,255,.75); margin-top: 3px; }
/* Statuskreis in die Ecke: er nimmt keinen Platz mehr in der Wertzeile weg,
   die Hauptinfo beginnt am linken Rand und hat die volle Breite. */
.tile .dot { position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%;
             margin: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.92); }
.tile[data-detail] { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.tile[data-detail]:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(18,40,58,.22); }
.tile[data-detail]::before { content: "›"; position: absolute; right: 11px; bottom: 6px;
                             font-size: 1rem; color: rgba(255,255,255,.65); }
.tile[data-explain]::after {
  content: attr(data-explain); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 9px;
  background: var(--text-primary); color: var(--surface-1); font-size: .76rem; font-weight: 400; line-height: 1.45;
  white-space: normal; opacity: 0; pointer-events: none; transition: opacity .15s ease .25s; z-index: 30;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.tile[data-explain]:hover::after { opacity: 1; }
.tiles .tile:nth-child(-n+3)[data-explain]::after { left: 0; transform: none; }
a.tile { display: block; text-decoration: none; background: linear-gradient(135deg, var(--accent), var(--tile));
         cursor: pointer; }
a.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(18,40,58,.25); }
a.tile .value { font-size: 1.12rem; line-height: 1.3; padding-top: 4px; }
/* Sparkline (24-h-Trend) am Fuß der Messwert-Kachel — helle Linie auf farbiger Kachel */
.tile .spark { display: block; width: 100%; height: 26px; margin-top: 6px; opacity: .95; }
.tile[data-detail]::before { z-index: 1; }
/* Mini-Radial rechts neben dem Wert (Index-Kacheln UV/Luftqualität) */
.tile .value { display: flex; align-items: center; }
.tile-mini { margin-left: auto; width: 58px; flex: none; }
.tile-mini .mini-gauge { width: 58px; height: auto; display: block; }
.tile-mini .mini-compass { width: 44px; height: 44px; display: block; margin: 0 auto; }
/* Farbiges Schwellenband in der Kachel (Feinstaub u. a.) */
.tile .mini-band { position: relative; display: block; width: 100%; margin-top: 8px; }
.tile .mini-band .mb-track { display: flex; height: 7px; border-radius: 4px; overflow: hidden; gap: 1px; }
.tile .mini-band .mb-track span { display: block; }
.tile .mini-band .mb-mark { position: absolute; top: -2px; width: 2px; height: 11px; background: #fff;
                            border-radius: 1px; box-shadow: 0 0 2px rgba(0,0,0,.55); transform: translateX(-1px); }
/* Kompakte Stufenanzeige in der Kachel (Hitze/Pollen) */
.tile .mini-steps { display: flex; gap: 3px; margin-top: 8px; }
.tile .mini-steps span { flex: 1; height: 6px; border-radius: 3px; }
/* Liegendes Thermometer in der Temperatur-Kachel */
.tile .mini-thermo-wrap { display: block; margin-top: 8px; }
.tile .mini-thermo { display: block; width: 100%; height: 16px; overflow: visible; }
/* Anbieter-Markenchips (E-Scooter): Markenfarbe als Erkennungsmerkmal, kein Logo */
.tile .hint .brand { display: inline-block; color: #fff; border-radius: 6px; padding: 1px 7px;
                     margin: 3px 5px 0 0; font-weight: 700; font-size: .72rem;
                     text-shadow: 0 1px 1px rgba(0,0,0,.3); }

/* ---------- Karten-Grid ---------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.card h2 { font-size: .95rem; font-weight: 600; margin-bottom: 2px; }
.card .desc { font-size: .78rem; color: var(--text-muted); margin-bottom: 8px; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 1100px) { .span-4, .span-6, .span-8 { grid-column: span 12; } }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th { text-align: left; color: var(--text-muted); font-weight: 500; font-size: .76rem; padding: 4px 8px;
     border-bottom: 1px solid var(--border); }
td { padding: 5px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
td.num { text-align: right; }

/* ---------- Diagramme ---------- */
.chart { position: relative; }
.chart svg, .bars svg { display: block; width: 100%; height: 210px; }
.bars svg { height: 190px; }
.chart .tip { position: absolute; pointer-events: none; background: var(--surface-1); border: 1px solid var(--border);
              border-radius: 8px; padding: 6px 9px; font-size: .78rem; display: none; z-index: 5;
              box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: .78rem; color: var(--text-secondary); }
.legend .chip { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

/* ---------- Karte & Legende ---------- */
#map, #modal-map { border-radius: 9px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; font-size: .8rem; color: var(--text-secondary); }
.map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.map-legend .leg-item { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 5px;
                        border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px 3px 8px; background: var(--surface-1); }
.map-legend .leg-item:hover { border-color: var(--accent); }
.map-legend .leg-sym { font-size: 15px; line-height: 1; display: inline-flex; }
.map-legend .leg-sym svg { width: 17px; height: 17px; display: block; }
.map-legend span.off { opacity: .4; text-decoration: line-through; }
.map-legend span { cursor: pointer; user-select: none; }
.map-legend.leg-key .leg-item { cursor: default; }
.map-legend.leg-key .leg-item:hover { border-color: var(--border); }
.leaflet-popup-content a.navlink { display: inline-block; margin-top: 4px; font-size: .8rem; }

/* ---------- Themenfilter-Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-btn { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
            border-radius: 999px; padding: 5px 14px; font-size: .84rem; cursor: pointer; font-family: inherit; }
.chip-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
[data-topic].topic-hidden { display: none !important; }

/* ---------- Warn-Banner ---------- */
.wbanner { border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; display: none; }
.wbanner.info { display: block; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); }
.wbanner.warn { display: block; background: color-mix(in srgb, var(--status-warn) 16%, var(--surface-1));
                border: 1px solid var(--status-warn); }
.wbanner.serious { display: block; background: color-mix(in srgb, var(--status-serious) 16%, var(--surface-1));
                   border: 1px solid var(--status-serious); }

/* ---------- Status-Listen (Betrieb) ---------- */
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.svc { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.svc:last-child { border-bottom: none; }
.svc .lat { margin-left: auto; color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ---------- F6: Theme-Katalog je Kommune ----------------------------------
   Layering-Entscheidung: Themes variieren den BRAND-Layer (accent/tile);
   der DATEN-Layer (series-1..5, status) bleibt die validierte Palette —
   Diagrammfarben sind damit über alle Kommunen konsistent lesbar.
   Kachel-Kontrast (weiße Schrift) je Theme geprüft, alle >= 3:1:
   wald 5.31/7.33 · bordeaux 8.12/10.04 · petrol 5.47/7.51 ·
   violett 7.28/8.79 · bernstein 4.88/6.22 · schiefer 7.33/9.10 (hell/dunkel).
   Modus-Hierarchie: [data-mode=dark|light] erzwingt, sonst prefers-color-scheme. */

:root[data-mode="dark"] {
  color-scheme: dark;
  --accent: #0074e8; --tile: #0a72c2;
  --surface-0: #0e1720; --surface-1: #16222e; --border: #24384a;
  --text-primary: #f2f7fb; --text-secondary: #b9cbd8; --text-muted: #77909f;
  --series-1: #4db2ff; --series-2: #3ce378; --series-3: #ff5252;
  --series-4: #ffb020; --series-5: #ff8a8a;
  --status-good: #3ce378; --status-warn: #ffb020; --status-serious: #ff5252;
  --grid: rgba(255,255,255,.08);
}
:root[data-mode="light"] {
  color-scheme: light;
  --accent: #0074e8; --tile: #0066cc;
  --surface-0: #e9f2f8; --surface-1: #ffffff; --border: #d5e4ee;
  --text-primary: #12283a; --text-secondary: #48606f; --text-muted: #7e93a1;
  --series-1: #0078d4; --series-2: #0db93c; --series-3: #ea2c3c;
  --series-4: #e88a00; --series-5: #b42323;
  --status-good: #0db93c; --status-warn: #e88a00; --status-serious: #ea2c3c;
  --grid: rgba(18,40,58,.08);
}

:root[data-theme="wald"]      { --accent: #22996a; --tile: #1e7a4f; }
:root[data-theme="bordeaux"]  { --accent: #b03a5c; --tile: #8e2b47; }
:root[data-theme="petrol"]    { --accent: #14a394; --tile: #0f766e; }
:root[data-theme="violett"]   { --accent: #7c5ce0; --tile: #5b46a8; }
:root[data-theme="bernstein"] { --accent: #c97a00; --tile: #a85f00; }
:root[data-theme="schiefer"]  { --accent: #5b7186; --tile: #46586a; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="wald"]:not([data-mode="light"])      { --tile: #176243; }
  :root[data-theme="bordeaux"]:not([data-mode="light"])  { --tile: #7a2038; }
  :root[data-theme="petrol"]:not([data-mode="light"])    { --tile: #0c5f59; }
  :root[data-theme="violett"]:not([data-mode="light"])   { --tile: #4e3b96; }
  :root[data-theme="bernstein"]:not([data-mode="light"]) { --tile: #8f5200; }
  :root[data-theme="schiefer"]:not([data-mode="light"])  { --tile: #3a4a5a; }
}
:root[data-theme="wald"][data-mode="dark"]      { --tile: #176243; }
:root[data-theme="bordeaux"][data-mode="dark"]  { --tile: #7a2038; }
:root[data-theme="petrol"][data-mode="dark"]    { --tile: #0c5f59; }
:root[data-theme="violett"][data-mode="dark"]   { --tile: #4e3b96; }
:root[data-theme="bernstein"][data-mode="dark"] { --tile: #8f5200; }
:root[data-theme="schiefer"][data-mode="dark"]  { --tile: #3a4a5a; }

/* Selektor-Popover */
.themesel { position: relative; }
.themesel > button { border: 1px solid var(--border); background: var(--surface-1); border-radius: 999px;
                     padding: 4px 11px; cursor: pointer; font: inherit; font-size: .9rem; }
.themesel .pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
                 background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
                 padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); width: 250px; }
.themesel.open .pop { display: block; }
.themesel .row { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 10px; }
.themesel .sw { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border); }
.themesel .sw.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--surface-1) inset; }
.themesel .mode { border: 1px solid var(--border); background: var(--surface-0); border-radius: 8px;
                  padding: 3px 10px; cursor: pointer; font: inherit; font-size: .8rem; }
.themesel .mode.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.themesel .note { font-size: .72rem; color: var(--text-muted); margin-top: 6px; }

/* ---------- Detail-Modal (B3: Klick-Detailtiefe je Kachel) ---------- */
/* Über den Leaflet-Ebenen/-Bedienelementen: vendor/leaflet.css vergibt bis
   z-index 1000 (.leaflet-control 800, .leaflet-top/.leaflet-bottom 1000). Die
   Detailkarte und ihr Backdrop müssen die Hauptkarte sicher überdecken —
   darunter schöben sich Zoom- und Ebenen-Bedienelemente über das Modal. */
#sc-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,20,30,.55);
                     z-index: 1000; backdrop-filter: blur(2px); }
#sc-modal { display: none; position: fixed; z-index: 1001; inset: 0; margin: auto;
            width: min(860px, calc(100vw - 24px)); height: fit-content; max-height: calc(100vh - 40px);
            overflow-y: auto; background: var(--surface-1); border: 1px solid var(--border);
            border-radius: 14px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
#sc-modal.open, #sc-modal-backdrop.open { display: block; }
#sc-modal h3 { font-size: 1.1rem; font-weight: 650; margin: 0 40px 2px 0; }
#sc-modal .m-meta { font-size: .78rem; color: var(--text-muted); margin-bottom: 8px; }
#sc-modal .m-explain { font-size: .88rem; color: var(--text-secondary); line-height: 1.55;
                       background: var(--surface-0); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; }
#sc-modal .m-close { position: absolute; top: 12px; right: 14px; border: none; background: var(--surface-0);
                     color: var(--text-secondary); width: 30px; height: 30px; border-radius: 50%;
                     font-size: 1rem; cursor: pointer; }
/* Grafische Momentanwert-Bausteine (Gauge/Kompass/Schwellenband) als Kopf der Detailkarte */
#sc-modal .m-head { display: flex; justify-content: center; margin: 2px 0 14px;
                    padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.viz-gauge, .viz-band { display: flex; flex-direction: column; align-items: center; }
.viz-gauge svg { width: 210px; max-width: 62vw; height: auto; }
.viz-band svg { width: 240px; max-width: 70vw; height: auto; }
.viz-state { font-size: .82rem; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
/* Stufenskala (Hitze/Pollen/Warnstufen) */
.viz-steps { width: 100%; }
.viz-steps .steps-row { display: flex; gap: 5px; }
.viz-steps .step { flex: 1; text-align: center; padding: 9px 4px; border-radius: 8px; font-size: .8rem;
                   font-weight: 700; background: var(--surface-2); color: var(--text-muted);
                   border: 1px solid var(--border); opacity: .7; }
.viz-steps .step.on { color: #fff; opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.viz-steps .steps-cap { text-align: center; margin-top: 12px; font-size: .9rem; font-weight: 700; color: var(--text-primary); }
/* 7-Tage-Vorhersagestreifen in der Temperatur-Detailkarte */
.fc-strip { margin: 2px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.fc-strip .fc-title { font-size: .82rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.fc-row { display: grid; grid-template-columns: 30px 1fr 34px 30px auto; align-items: center; gap: 8px;
          font-size: .8rem; padding: 3px 0; }
.fc-row .fc-d { color: var(--text-secondary); font-weight: 600; }
.fc-row .fc-track { height: 8px; background: var(--surface-2); border-radius: 5px; position: relative; }
.fc-row .fc-bar { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.fc-row .fc-hi { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-row .fc-lo { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fc-row .fc-meta { color: var(--text-muted); font-size: .74rem; white-space: nowrap; }
@media (max-width: 480px) { .fc-row .fc-meta { display: none; } }
#sc-modal .m-range { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#sc-modal .m-range button { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
                            border-radius: 8px; padding: 3px 12px; font-size: .8rem; cursor: pointer; font-family: inherit; }
#sc-modal .m-range button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#sc-modal #modal-map { height: 380px; border-radius: 10px; }
#sc-modal .m-list { font-size: .82rem; color: var(--text-secondary); margin-top: 10px; columns: 2; column-gap: 24px; }
#sc-modal .m-list div { break-inside: avoid; padding: 2px 0; }

/* Barrierefreiheit (BITV 2.0): sichtbarer Fokus, Screenreader-Tabellen,
   Tastaturbedienung. Ergänzt 22.07. (Audit) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tile[role="button"] { cursor: pointer; }
.map-legend span:focus-visible, #map-legend span:focus-visible { outline-offset: 3px; }
#sc-modal .m-export { display: flex; gap: 8px; margin: 10px 0 0; }
#sc-modal .m-export button { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
                             border-radius: 8px; padding: 3px 12px; font-size: .8rem; cursor: pointer; font-family: inherit; }
#sc-modal .m-export button:hover { border-color: var(--accent); color: var(--accent); }

/* Symbol-Marker: Symbol direkt auf der Karte, weißer Umriss für Lesbarkeit
   (kein farbiger Kreis darunter) — 23.07. */
.mkr { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
       font-size: 18px; line-height: 1; cursor: pointer;
       filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }
.mkr-big { width: 30px; height: 30px; font-size: 23px; }
/* Linien-Icon-Marker (Variante A): SVG-Glyph in der Ebenenfarbe, Größe im .mkr-Rahmen */
.mkr svg { width: 21px; height: 21px; display: block; }
.mkr-big svg { width: 26px; height: 26px; }