/* BRDmap — Design "Leitstelle" (seit 04.11.2026)
   Liegt als eigene Datei UEBER den Stilen der Seiten-Bausteine (_seo.py SHARED_STYLE_BLOCK,
   build_preview.py). Quelle + Vorschau-Werkzeug: design/2026-11-04-leitstelle/.
   Schrift: Barlow Semi Condensed (SIL OFL 1.1, fonts/OFL-BarlowSemiCondensed.txt), selbst
   gehostet — kein Google-CDN (DSGVO). JetBrains Mono nur noch fuer Zeit/Koordinaten/Code. */
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/BarlowSemiCondensed-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/BarlowSemiCondensed-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/BarlowSemiCondensed-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/BarlowSemiCondensed-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/BarlowSemiCondensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/BarlowSemiCondensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/BarlowSemiCondensed-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/BarlowSemiCondensed-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html:root:not([data-theme="light"]) {
  --bg: #07101c;
  --panel: #0a1626;
  --panel-2: #0d1b2f;
  --border: #1a2b45;
  --border-strong: #26395a;
  --text: #e3eaf4;
  --text-dim: #8e9eb6;
  --text-mute: #64758e;
  --accent: #44b8ff;
  --accent-dim: #1d6aa5;
  --ok: #3ddc84;
  --err: #ff5a67;
  --sev1: #6f8099;
  --sev2: #93a3ba;
  --sev3: #44b8ff;
  --sev4: #ffa733;
  --sev5: #ff4f5e;
  --active-bg: #10223a;
  --gradient-top: #0c1a30;
  --hud-bg: rgba(10, 22, 38, 0.94);
  --led: #ffb43d;
  --bar-bg: rgba(7, 16, 28, 0.93);
  --grid-line: rgba(68, 184, 255, 0.16);
}
/* Hell = "Leitstelle bei Tag": kuehles Grau-Blau statt Creme, gedaempfte Karte;
   Lagebild-Leiste ebenfalls hell (User 04.11.: dunkle Leiste im Hellen wirkte fremd). */
html[data-theme="light"] {
  --bg: #c7cfd9;
  --panel: #e4e9ef;
  --panel-2: #d9e0e8;
  --border: #c0cad6;
  --border-strong: #9eabbb;
  --text: #121d2b;
  --text-dim: #44546a;
  --text-mute: #5d6c80;
  --accent: #0b64ad;
  --accent-dim: #5d97c9;
  --ok: #17824a;
  --err: #b4232f;
  --sev1: #5d6c80;
  --sev2: #44546a;
  --sev3: #0b64ad;
  --sev4: #b0620a;
  --sev5: #b4232f;
  --active-bg: #cfd8e3;
  --gradient-top: #dde3ea;
  --hud-bg: rgba(228, 233, 239, 0.95);
  --popup-shadow: 0 6px 22px rgba(18, 29, 43, 0.22);
  --sidebar-shadow: 2px 0 14px rgba(18, 29, 43, 0.14);
  --led: #9a5300;
  --bar-bg: rgba(228, 233, 239, 0.96);
  --grid-line: rgba(11, 100, 173, 0.22);
}
html[data-theme="light"] .leaflet-tile-pane {
  filter: saturate(0.35) brightness(0.86) contrast(0.96);
}
html[data-theme="light"] #map { background: var(--bg); }
html[data-theme="light"] #sidebar { background: linear-gradient(180deg, #dbe2ea 0, var(--panel) 220px); }
html[data-theme="light"] #lagebild .nb-clock .nb-time { text-shadow: none; }
html[data-theme="light"] #lagebild {
  border-bottom-color: var(--border-strong);
  color: var(--text);
}
html[data-theme="light"] .lb-grat span { background: rgba(228, 233, 239, 0.85); color: #44546a; }
html[data-theme="light"] .leaflet-outline-pane path { stroke: #0b64ad !important; stroke-opacity: 0.75 !important; }
html[data-theme="light"] #feed .item-cat { color: color-mix(in srgb, var(--accent-color, var(--accent)) 72%, #000); }
html[data-theme="light"] #coord-readout { background: var(--hud-bg); border-color: var(--border); color: var(--text-dim); }
html[data-theme="light"] .mithilfe-banner { background: color-mix(in srgb, var(--sev4) 9%, var(--panel-2)) !important; }
html[data-theme="light"] #cc-main {
  --cc-bg: #e4e9ef; --cc-primary-color: #121d2b; --cc-secondary-color: #44546a;
  --cc-btn-primary-bg: #0b64ad; --cc-btn-primary-color: #fff; --cc-btn-primary-border-color: #0b64ad;
  --cc-btn-primary-hover-bg: #094f89; --cc-btn-primary-hover-border-color: #094f89;
  --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: #121d2b; --cc-btn-secondary-border-color: #9eabbb;
  --cc-separator-border-color: #c0cad6;
}
html:root {
  --f-ui: "Barlow Semi Condensed", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lb-top: 52px;
}
@media (max-width: 900px) { html:root { --lb-top: 46px; } }

/* ---------- Schrift ---------- */
html body { font-family: var(--f-ui); }
#sidebar *:not(.item-time):not(.item-state):not(code):not(time),
.leaflet-container, .leaflet-popup-content-wrapper, #wx-switch, #wx-switch button,
#new-events-banner, #brd-loading-pill, .leaflet-control-attribution, #pwa-install-banner {
  font-family: var(--f-ui);
}
.leaflet-tooltip.brd-marker-tip { font-family: var(--f-ui) !important; font-size: 13px !important; }

/* ---------- Sidebar ---------- */
#sidebar { background: linear-gradient(180deg, #0b1830 0, var(--panel) 220px); }
html[data-theme="light"] #sidebar { background: var(--panel); }
#sidebar::before { opacity: 0.35; }
#sidebar-head { background: transparent; padding: 16px 18px 12px; }
#sidebar-head::after { opacity: 0.35; }
#sidebar-head h1 {
  font: 700 26px/1 var(--f-ui); letter-spacing: 0.2px; text-transform: none; color: var(--text);
}
#sidebar-head h1 .tld { font-weight: 500; letter-spacing: 0; color: var(--accent); }
#sidebar-head .brand-mark { width: 12px; height: 12px; flex-basis: 12px; }
#sidebar-head .sub {
  font-size: 14px; letter-spacing: 0.1px; text-transform: none; color: var(--text-dim); margin-top: 6px;
}
@media (min-width: 901px) { #sidebar-head .meta { display: none; } }
#sidebar-head .data-meta {
  font-size: 13px; letter-spacing: 0.1px; border-top-color: var(--border); margin-top: 10px; padding-top: 8px;
}
.data-meta-num { font-family: var(--f-ui); font-weight: 700; }
#sidebar-head .data-meta-sep { opacity: 0.5; }

#sidebar-filters { background: transparent; padding: 10px 16px 12px; border-bottom-color: var(--border); }
.timeframe-pills {
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2);
  font-size: 13px; letter-spacing: 0.4px; text-transform: none; padding: 2px; gap: 2px;
}
.timeframe-pills button {
  border: 0; border-radius: 4px; background: transparent; color: var(--text-dim); font-weight: 600; min-height: 32px;
}
.timeframe-pills button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.timeframe-pills button[aria-pressed="true"],
html[data-theme="light"] .timeframe-pills button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.severity-pill, .missing-pill, #mobile-filters-toggle, .search-input {
  border-radius: 6px !important; font-size: 13px !important; letter-spacing: 0.3px !important;
}
.search-input { font-size: 14px !important; }
.severity-pill, .missing-pill, .ai-notice .ai-badge, .mft-text,
#sidebar-head .stat-lbl, #sheet-handle .sheet-label { text-transform: none !important; letter-spacing: 0.3px !important; }
#sheet-handle .sheet-label { font-size: 15px !important; font-weight: 600; }
#sidebar-head .meta { border-radius: 8px; }
#sidebar-head .stat-num { font-family: var(--f-ui); font-size: 17px; }

/* Neuigkeiten-Karte auf der Karte */
#brd-news, #brd-news * { font-family: var(--f-ui) !important; }
#brd-news { border-radius: 10px !important; font-size: 14px !important; line-height: 1.4 !important; }
#brd-news h2 { text-transform: none !important; letter-spacing: 0.2px !important; font-size: 16px !important; }
#brd-news button, #brd-news a { text-transform: none !important; letter-spacing: 0.2px !important; font-size: 14px !important; border-radius: 6px !important; }

.mithilfe-banner {
  border-radius: 6px; border-left: 3px solid var(--sev4) !important;
  background: color-mix(in srgb, var(--sev4) 7%, var(--panel-2)) !important;
}
.mithilfe-banner .mb-title { text-transform: none; letter-spacing: 0.2px; font-size: 14px; font-weight: 700; color: var(--text); }
.mithilfe-banner .mb-counts { font-size: 13px; }
.mithilfe-banner .mb-count { color: var(--sev4); font-weight: 700; }

/* Meldungs-Feed: Titel lesbar, Schwere als 5-stufiger Pegel */
#feed .item { padding: 13px 16px 13px 26px; border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); }
#feed .item::before {
  left: 10px; top: 18px; width: 7px; height: 7px; border-radius: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, var(--accent)) 16%, transparent);
}
#feed .item-head { font-size: 13px; letter-spacing: 0.2px; margin-bottom: 4px; }
#feed .item-cat { font-weight: 600; }
#feed .item[data-sev="1"] { --lvl: 1; } #feed .item[data-sev="2"] { --lvl: 2; }
#feed .item[data-sev="3"] { --lvl: 3; } #feed .item[data-sev="4"] { --lvl: 4; }
#feed .item[data-sev="5"] { --lvl: 5; }
#sidebar #feed .item-sev {
  font-size: 0; line-height: 0; padding: 0; border: 0; border-radius: 1px;
  width: 29px; height: 7px; align-self: center;
  background: linear-gradient(90deg, var(--sev-color, var(--accent)) calc(var(--lvl, 1) * 20%),
              color-mix(in srgb, var(--text-mute) 38%, transparent) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6px);
          mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6px);
}
#feed .item-state { font-family: var(--f-data); font-size: 11px; color: var(--text-mute); letter-spacing: 0.6px; }
#feed .item-title { font-size: 16px; font-weight: 500; line-height: 1.28; letter-spacing: 0.05px; margin-bottom: 5px; }
#feed .item-time { font-family: var(--f-data); font-size: 11px; color: var(--text-mute); }
#feed .item[data-sev="4"] .item-title, #feed .item[data-sev="5"] .item-title { font-weight: 600; }
#feed .item-detail { font-size: 14px; }

.ai-notice .ai-badge { border-radius: 4px; letter-spacing: 0.4px; }
.hub-block .hub-title { text-transform: none; letter-spacing: 0.2px; font-size: 14px; }
.hub-chip { border-radius: 4px !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0.2px !important; }
#sidebar-foot { font-size: 13px; letter-spacing: 0.2px; text-transform: none; background: transparent; }
#sidebar-foot a { text-transform: none; }

/* ---------- Karte ---------- */
#map { background: var(--bg); }
[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(0.93) hue-rotate(188deg) saturate(0.62) brightness(0.72) contrast(1.12);
}
.leaflet-outline-pane path { stroke: var(--accent) !important; stroke-opacity: 0.7 !important; }
.leaflet-outline-pane { filter: drop-shadow(0 0 5px rgba(68, 184, 255, 0.45)); }
html[data-theme="light"] .leaflet-outline-pane { filter: none; }

/* Lagezeichen: Plakette statt Kreis. Routine tritt zurueck, schwere Lagen sind gefuellt. */
.brd-marker {
  border-radius: 4px;
  background: color-mix(in srgb, var(--cat, #8b949e) 12%, #081221);
  border: 1.5px solid color-mix(in srgb, var(--cat, #8b949e) 80%, transparent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .brd-marker { background: color-mix(in srgb, var(--cat, #8b949e) 14%, #f3f6f9); }
.brd-marker.brd-sev-1, .brd-marker.brd-sev-2 { transform: scale(0.8); opacity: 0.82; border-width: 1px; }
.brd-marker.brd-sev-4, .brd-marker.brd-sev-5,
html[data-theme="light"] .brd-marker.brd-sev-4, html[data-theme="light"] .brd-marker.brd-sev-5 {
  background: var(--cat, #8b949e); color: #07101c; border: 1.5px solid color-mix(in srgb, var(--cat, #8b949e) 55%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, #8b949e) 22%, transparent),
              0 0 16px color-mix(in srgb, var(--cat, #8b949e) 50%, transparent);
}
.brd-marker.brd-sev-4::after, .brd-marker.brd-sev-5::after { border-radius: 7px; inset: -5px; }
.brd-marker-wrap .brd-marker:hover { transform: scale(1.12); opacity: 1; }

/* Cluster: Ring in Kategoriefarbe, Zahl neutral — sofort von Einzelmeldungen zu unterscheiden */
.marker-cluster div {
  border: 0 !important; border-radius: 50% !important;
  background: radial-gradient(circle, rgba(8, 18, 33, 0.96) 60%, rgba(8, 18, 33, 0) 62%) !important;
  box-shadow: 0 0 0 1.5px var(--cat, var(--accent)), 0 0 0 3px rgba(8, 18, 33, 0.7) !important;
  color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 700 !important;
}
html[data-theme="light"] .marker-cluster div {
  background: radial-gradient(circle, rgba(243, 246, 249, 0.97) 60%, rgba(243, 246, 249, 0) 62%) !important;
  box-shadow: 0 0 0 1.5px var(--cat, var(--accent)), 0 0 0 3px rgba(243, 246, 249, 0.8) !important;
}
.marker-cluster:hover div { background: var(--cat, var(--accent)) !important; color: #07101c !important; }
.marker-cluster-small div { font-size: 12.5px !important; }
.marker-cluster-medium div { font-size: 13.5px !important; }
.marker-cluster-large div { font-size: 15px !important; }

.leaflet-popup-content-wrapper { border-radius: 8px; border-top: 2px solid var(--accent); }
/* Meldungsfenster auf der Karte: lesbar statt 10-12 px Mono (User 04.11.: "Text etwas klein") */
.leaflet-popup-content { min-width: 300px; font-family: var(--f-ui); }
.leaflet-popup-content, .leaflet-popup-content * { font-family: var(--f-ui) !important; }
.leaflet-popup-content .popup-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0.1px !important; }
.leaflet-popup-content .popup-meta { font-size: 13px !important; letter-spacing: 0.2px !important; text-transform: none !important; margin-top: 4px; }
.leaflet-popup-content .popup-body { font-size: 15.5px !important; line-height: 1.45 !important; }
.leaflet-popup-content .popup-tags span { font-size: 12.5px !important; letter-spacing: 0.2px !important; border-radius: 4px !important; padding: 2px 7px !important; }
.leaflet-popup-content .popup-src, .leaflet-popup-content .popup-src * { font-size: 13.5px !important; letter-spacing: 0.2px !important; text-transform: none !important; }
.leaflet-popup-content .popup-disclaimer { font-size: 12.5px !important; line-height: 1.4 !important; letter-spacing: 0.1px !important; }
.leaflet-popup-content .popup-disclaimer .ai-badge { font-size: 11.5px !important; text-transform: none !important; }
.leaflet-tooltip.brd-marker-tip { border-radius: 6px !important; border-left-width: 3px !important; min-width: 220px; }
.leaflet-tooltip.brd-marker-tip .tip-title { font-size: 15px; }
.leaflet-tooltip.brd-marker-tip .tip-meta { text-transform: none; letter-spacing: 0.2px; font-size: 12.5px; }

.leaflet-control-zoom { border: 0 !important; box-shadow: none !important; }
.leaflet-control-zoom a {
  background: var(--hud-bg) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 6px !important; margin-bottom: 4px;
}
.map-layer-toggle { border-radius: 8px; background: var(--hud-bg); border-color: var(--border); }
#wx-switch { border-radius: 8px; background: var(--hud-bg); padding: 3px; }
#wx-switch button { font-size: 13px; font-weight: 600; letter-spacing: 0.3px; text-transform: none; border-radius: 6px; min-height: 28px; padding: 3px 12px; }
#coord-readout { font-family: var(--f-data); border-radius: 6px; background: var(--hud-bg); border-color: var(--border); }
.leaflet-control-attribution { font-size: 11px !important; }

/* Alles, was oben an der Karte haengt, rutscht unter die Lagebild-Leiste */
#map-toolbar, #new-events-banner, #brd-loading-pill, #region-draw-hint,
.heatmap-legend, .flood-panel, #wx-detail, #wx-focus-chip, #map .leaflet-top {
  margin-top: var(--lb-top);
}
#hud { display: none !important; }

/* ---------- Lagebild-Leiste ---------- */
#lagebild {
  position: absolute; top: 0; left: 0; right: 0; height: var(--lb-top); z-index: 640; /* ueber Markern (600), unter Tooltips (650) + Popups (700) */
  display: flex; align-items: stretch; background: var(--bar-bg);
  border-bottom: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  font-family: var(--f-ui); color: var(--text); cursor: default; user-select: none;
}
html[data-theme="light"] #lagebild { box-shadow: 0 4px 16px rgba(60, 52, 35, 0.12); }
#lagebild .nb-cell { display: flex; flex-direction: column; justify-content: center; padding: 0 18px; border-right: 1px solid var(--border); min-width: 0; }
#lagebild .nb-cell:last-child { border-right: 0; }
#lagebild .nb-k { font-size: 12px; color: var(--text-dim); letter-spacing: 0.2px; white-space: nowrap; }
#lagebild .nb-v { font-size: 17px; font-weight: 700; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }

#lagebild .nb-status { flex-direction: row; align-items: center; gap: 10px; }
#lagebild .nb-lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent), 0 0 10px var(--ok); }
#lagebild.is-quiet .nb-lamp { background: var(--text-dim); box-shadow: none; }
#lagebild.is-error .nb-lamp { background: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 25%, transparent), 0 0 10px var(--err); }
#lagebild .nb-title { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; }

#lagebild .nb-clock .nb-time {
  font-family: var(--f-data); font-weight: 600; font-size: 22px; line-height: 1; color: var(--led);
  letter-spacing: 1px; text-shadow: 0 0 12px color-mix(in srgb, var(--led) 45%, transparent);
}
#lagebild .nb-clock .nb-dtg { font-family: var(--f-data); font-size: 11px; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.4px; }

#lagebild .nb-clock { position: relative; outline: none; cursor: help; }
#lagebild .nb-clock:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
#lagebild .nb-tip {
  display: none; position: absolute; top: calc(100% + 8px); left: 8px; width: 290px; z-index: 5;
  padding: 12px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: var(--text); cursor: default;
}
html[data-theme="light"] #lagebild .nb-tip { box-shadow: 0 8px 24px rgba(18, 29, 43, 0.2); }
#lagebild .nb-clock:hover .nb-tip, #lagebild .nb-clock:focus .nb-tip { display: block; }
#lagebild .nb-tip-h { font-size: 15px; font-weight: 700; }
#lagebild .nb-tip-p { font-size: 13.5px; color: var(--text-dim); margin: 3px 0 9px; line-height: 1.35; }
#lagebild .nb-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13.5px; }
#lagebild .nb-tip dt { font-family: var(--f-data); color: var(--led); font-weight: 600; }
#lagebild .nb-tip dd { margin: 0; }
#lagebild .nb-lage { flex: 1 1 auto; gap: 6px; }
#lagebild .nb-stack { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--border); gap: 2px; }
#lagebild .nb-stack span { display: block; height: 100%; min-width: 3px; }
#lagebild .nb-legend { display: flex; gap: 14px; overflow: hidden; white-space: nowrap; font-size: 13px; }
#lagebild .nb-legend b { font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
#lagebild .nb-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
#lagebild .nb-legend .nb-total { color: var(--text-dim); }

.lb-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 450; pointer-events: none;
  background: linear-gradient(180deg, transparent 0, rgba(68, 184, 255, 0.07) 70%, rgba(68, 184, 255, 0.55) 99%, transparent 100%);
  animation: lb-scan 1700ms cubic-bezier(.3, .1, .3, 1) 250ms 1 both;
}
@keyframes lb-scan { from { transform: translateY(-120px); } to { transform: translateY(calc(100vh + 20px)); } }

.lb-grat { position: absolute; inset: 0; z-index: 420; pointer-events: none; font-family: var(--f-data); font-size: 10.5px; color: var(--text-mute); }
.lb-grat span { position: absolute; white-space: nowrap; padding: 1px 4px; background: color-mix(in srgb, var(--bg) 70%, transparent); border-radius: 3px; }


/* Cookie-Banner im selben Stil */
#cc-main, #cc-main * { font-family: var(--f-ui) !important; letter-spacing: 0.2px !important; text-transform: none !important; }
#cc-main .cm__title { font-size: 18px !important; }
#cc-main .cm__desc { font-size: 15px !important; line-height: 1.45 !important; }
html:root:not([data-theme="light"]) #cc-main {
  --cc-bg: #0a1626; --cc-primary-color: #e3eaf4; --cc-secondary-color: #8e9eb6;
  --cc-btn-primary-bg: #44b8ff; --cc-btn-primary-color: #07101c; --cc-btn-primary-border-color: #44b8ff;
  --cc-btn-primary-hover-bg: #7fcdff; --cc-btn-primary-hover-border-color: #7fcdff;
  --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: #e3eaf4; --cc-btn-secondary-border-color: #26395a;
  --cc-separator-border-color: #1a2b45;
}
#cc-main .cm__btn, #cc-main .pm__btn { border-radius: 8px !important; font-weight: 600 !important; font-size: 15px !important; }

@media (max-width: 900px) {
  #lagebild .nb-cell { padding: 0 12px; }
  #lagebild .nb-hide-m { display: none; }
  #lagebild .nb-lage { position: absolute; left: 0; right: 0; bottom: -1px; padding: 0; border: 0; }
  #lagebild .nb-stack { height: 3px; border-radius: 0; gap: 1px; }
  #lagebild .nb-legend { display: none; }
  #lagebild .nb-status { flex: 1 1 auto; }
  #lagebild .nb-clock .nb-time { font-size: 19px; }
  .lb-grat { display: none; }
  /* DTG-Zeile ist mobil ausgeblendet -> Erklaerung beim Antippen der Uhr auch (User 04.11.) */
  #lagebild .nb-tip { display: none !important; }
  #lagebild .nb-clock { cursor: default; }
}
@media (prefers-reduced-motion: reduce) { .lb-scan { display: none; } }

/* Startseite: spaetere Stilbloecke im <body> (Design-Rest 01.10.) setzen Kopfzeilen der Seitenleiste
   zurueck auf 10,5-11 px -> hier gestaerkt (live 04.11. gemessen: .sub 11 px, .data-meta 10,5 px). */
html body #sidebar-head h1 { font-size: 26px !important; padding-left: 0 !important; line-height: 1 !important; }
html body #sidebar-head .sub { font-size: 14px !important; margin-top: 6px !important; line-height: 1.35 !important; }
html body #sidebar-head .data-meta, html body #sidebar-head .data-meta-chip,
html body #sidebar-head .data-meta time { font-size: 13px !important; }
html body #sidebar-head .stat-lbl { font-size: 12.5px !important; }

/* ---------- Unterseiten + global: Grotesk ueberall, Mono nur fuer Zeit/Koordinaten/Code ---------- */
html body { font-family: var(--f-ui); font-feature-settings: normal; }
html body *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--f-ui) !important; text-transform: none !important; }
html body *:not(.nb-time):not(.nb-dtg):not(code):not(pre) { letter-spacing: 0.1px !important; }
html body :is(code, pre, kbd, samp, .chip-coord, #coord-readout, #coord-readout *, .nb-time, .nb-dtg,
  .nb-tip dt, .lb-grat, .lb-grat span, #feed .item-time, #feed .item-state) { font-family: var(--f-data) !important; }
html body :is(#lagebild .nb-time) { letter-spacing: 1px !important; }

header .brand { font-size: 22px !important; font-weight: 700 !important; }
header nav { font-size: 14px !important; gap: 2px; border-radius: 8px !important; }
header nav a { padding: 6px 10px !important; }
html body main#main-content > h1, html body main h1 {
  font-size: clamp(28px, 4.2vw, 46px) !important; line-height: 1.08 !important; font-weight: 700 !important;
  overflow-wrap: normal !important; hyphens: auto; padding-left: 18px; position: relative;
}
html body main#main-content > h1::before {
  content: '' !important; position: absolute !important; left: 0; top: 0.12em; bottom: 0.12em; width: 4px !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim)) !important; border-radius: 2px;
}
html body main h2 { font-size: 21px !important; font-weight: 700 !important; }
html body main h3 { font-size: 17px; }
html body main p, html body main li { font-size: 16px; line-height: 1.55; }
:is(.breadcrumbs, footer, .hub-hero-meta, .hub-stat .hub-stat-lbl, .news-card .news-meta, .news-card .news-source,
  .page-meta, .hub-meta, .stats-hero-cell .lbl, .stats-num-grid .lbl, .stats-spark-row .lbl, .warning-card .card-meta,
  .mithilfe-meta, .topic-card-sub, .src-table th, .share-btn, .official-badge, .status-badge, .wx-card .lvl,
  .hub-loadmore, .mithilfe-state-pill, .topic-card-count span, .uw-warn span, .ai-badge) { font-size: 13px !important; }
:is(.incidents-h, .stats-h, .topic-h, .mithilfe-section-h, .fat-footer h4, .city-nearest h2, .stats-export h3,
  .uw-card h3, .warning-card h3, .warnings-hero h2, .mithilfe-hero h2, .mithilfe-crosslinks h2) { font-size: 17px !important; font-weight: 700 !important; }
.hub-stat .hub-stat-num { font-size: 28px !important; }
.news-card { border-radius: 8px !important; }
.news-card h3 { font-size: 17px !important; line-height: 1.3 !important; }
.news-card p { font-size: 15px !important; }
.fat-footer li a, .fat-footer a { font-size: 14px; }

/* "Mehr"-Filter (mobil als Vollbild-Fenster): Fertig-Knopf unten statt mitten im Bild,
   Kategorie-Schalter lesbar (User 04.11.: "da ist noch altes Design") */
@media (max-width: 900px) {
  html body #mobile-filters-body:not([hidden]) { display: flex !important; flex-direction: column; }
  html body #mobile-filters-body:not([hidden]) > * { flex: 0 0 auto; }
  html body #mobile-filters-body .mfb-modal-footer { margin-top: auto !important; }
}
html body .mfb-modal-title { font-size: 17px !important; font-weight: 700 !important; color: var(--text) !important; }
html body .mfb-modal-done { border-radius: 8px !important; font-size: 16px !important; font-weight: 700 !important; }
html body .cat-filters label { font-size: 14px !important; border-radius: 6px !important; }
html body .cat-filters label .cat-count { font-family: var(--f-ui) !important; }
html body .multi-select-trigger { border-radius: 6px !important; font-size: 15px !important; }
html body .state-multi-item { font-size: 14px !important; }
html body .cat-bulk-btn { border-radius: 6px !important; font-size: 13px !important; }
html body .embed-share-link { border-radius: 6px !important; font-size: 13px !important; }

/* Banner "neue Meldungen": groesser, und am PC unter der Gradnetz-Beschriftung (User 04.11.) */
html body #new-events-banner {
  font-size: 15px !important; padding: 10px 18px !important; border-radius: 8px !important; gap: 8px !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45) !important;
}
html body #new-events-banner .neb-count { font-weight: 700 !important; }
html body #new-events-banner .neb-dot { width: 9px !important; height: 9px !important; }
@media (min-width: 901px) {
  html body #new-events-banner, html body #brd-loading-pill { margin-top: calc(var(--lb-top) + 26px) !important; }
}