/* ARGUS – dunkles Lagezentrum mit Glasflächen und Licht */
:root {
  color-scheme: dark;
  --bg: #05070b;
  --bg-2: #0a0e15;
  --surface: #0e131b;
  --glass: rgba(16, 22, 32, 0.66);
  --glass-hi: rgba(26, 34, 48, 0.72);
  --line: rgba(150, 180, 220, 0.12);
  --line-2: rgba(150, 180, 220, 0.22);
  --ink: #e9eef6;
  --ink-2: #aab5c6;
  --ink-3: #6f7b8e;
  --accent: #5fd4ff;
  --accent-2: #a58bff;
  --good: #3ecf8e;
  --warn: #f2b134;
  --bad: #ff5d5d;

  /* Lagerfarben – Reihenfolge geprüft (dataviz-Validator, dunkel): West, RU, OSINT, UA, Medien */
  --c-west: #3987e5;
  --c-ru: #e66767;
  --c-osint: #199e70;
  --c-ua: #c98500;
  --c-media: #9085e9;
  --c-other: #7d8796;

  --r: 16px;
  --r-s: 10px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --f-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --f-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font: inherit; color: inherit; }
small { font-weight: 400; }

/* ── Hintergrundlicht ───────────────────────────────────────── */
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(57, 135, 229, 0.20), transparent 60%),
    radial-gradient(900px 600px at 95% 5%, rgba(230, 103, 103, 0.13), transparent 60%),
    radial-gradient(900px 700px at 60% 110%, rgba(95, 212, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.bg-glow::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(150, 180, 220, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 180, 220, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ── Intro ─────────────────────────────────────────────────── */
#intro {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 45%, #0b1522 0%, #030508 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: opacity 0.6s ease, visibility 0.6s;
}
#intro.gone { opacity: 0; visibility: hidden; }
.intro-eye svg { width: 200px; height: 120px; overflow: visible; }
.intro-eye .lid { fill: none; stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 12px rgba(95, 212, 255, 0.7)); }
.intro-eye .iris { fill: none; stroke: rgba(95, 212, 255, 0.5); stroke-width: 1.5; }
.intro-eye .pupil { fill: var(--accent); filter: drop-shadow(0 0 16px var(--accent)); }
.intro-eye .sweep { transform-origin: 100px 60px; animation: sweep 1.4s linear infinite; }
.intro-eye .sweep path { fill: rgba(95, 212, 255, 0.22); }
@keyframes sweep { to { transform: rotate(360deg); } }
.intro-word { font: 600 44px/1 var(--f-cond); letter-spacing: 0.5em; margin-right: -0.5em; text-shadow: 0 0 30px rgba(95, 212, 255, 0.45); }
.intro-sub { font: 400 12px var(--f-mono); color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; }

/* ── Kopfleiste ───────────────────────────────────────────── */
.topbar {
  position: sticky; top: 10px; z-index: 1000;
  margin: 10px 16px 0; padding: 10px 16px;
  display: flex; align-items: center; gap: 20px;
  border-radius: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-eye { width: 38px; height: 24px; }
.brand-eye path { fill: none; stroke: var(--accent); stroke-width: 3; }
.brand-eye circle { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.brand-name { font: 600 18px/1 var(--f-cond); letter-spacing: 0.32em; }
.brand-sub { font: 400 11px/1.4 var(--f-mono); color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }
.clocks { display: flex; gap: 18px; margin-left: auto; font-family: var(--f-mono); }
.clock { display: flex; flex-direction: column; align-items: flex-end; }
.clock b { font-weight: 500; font-size: 15px; letter-spacing: 0.04em; }
.clock span { font-size: 10px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }
.top-status { display: flex; align-items: center; gap: 12px; }
.stufe {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
}
.stufe-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px var(--f-mono); background: var(--ink-3); color: #05070b;
}
.stufe-l { font: 500 12px var(--f-cond); letter-spacing: 0.06em; }
.stufe[data-s='1'] .stufe-n { background: var(--good); }
.stufe[data-s='2'] .stufe-n { background: #9bd64b; }
.stufe[data-s='3'] .stufe-n { background: var(--warn); }
.stufe[data-s='4'] .stufe-n { background: #ff8a3d; }
.stufe[data-s='5'] .stufe-n { background: var(--bad); box-shadow: 0 0 18px var(--bad); }
.src-pill {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); cursor: pointer; font-size: 12px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 8px currentColor; }
.dot.ok { background: var(--good); color: var(--good); }
.dot.warn { background: var(--warn); color: var(--warn); }
.dot.bad { background: var(--bad); color: var(--bad); }

.jump {
  display: flex; gap: 4px; margin: 10px 16px 0; overflow-x: auto; scrollbar-width: none;
}
.jump a {
  padding: 6px 12px; border-radius: 999px; font: 500 12px var(--f-cond); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid transparent; white-space: nowrap;
}
.jump a:hover { text-decoration: none; border-color: var(--line-2); color: var(--ink); }

/* ── Raster ───────────────────────────────────────────────── */
main { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 16px; max-width: 1920px; margin: 0 auto; }
.row { display: grid; gap: 16px; min-width: 0; }
.row > * { min-width: 0; }
.hero { grid-template-columns: minmax(0, 1.75fr) minmax(360px, 1fr); }
.triple { grid-template-columns: 1fr 1fr minmax(280px, 0.8fr); }
.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { padding: 16px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font: 600 15px/1.2 var(--f-cond); letter-spacing: 0.1em; text-transform: uppercase; }
.panel-head h2 small { display: block; margin-top: 3px; font: 400 12px var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.sub-h { font: 600 13px var(--f-cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin: 22px 0 10px; }

.btn {
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(95, 212, 255, 0.4);
  background: linear-gradient(180deg, rgba(95, 212, 255, 0.18), rgba(95, 212, 255, 0.06));
  color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: transparent; border-color: var(--line-2); }
select, input[type='search'] {
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; min-width: 0;
}
input[type='search'] { min-width: 200px; }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 5px 11px; font-size: 11px; color: var(--ink-2); cursor: pointer; font-family: var(--f-mono); }
.seg button.on { background: rgba(95, 212, 255, 0.16); color: var(--ink); }

/* ── Karte ────────────────────────────────────────────────── */
.map-panel { display: flex; flex-direction: column; }
.map-tools { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.map-tools label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.map-tools input { accent-color: var(--accent); }
.map-wrap { position: relative; flex: 1; min-height: 640px; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); }
#map { position: absolute; inset: 0; background: #070b11; }
.leaflet-container { font-family: var(--f-sans); background: #070b11; }
/* OSM-Kacheln abgedunkelt (CARTO verlangt inzwischen einen Schlüssel) */
/* Esri Dark Gray: leicht abgedunkelt und ins Blaue gezogen, passend zum Glas */
.tiles-base { filter: brightness(0.78) contrast(1.12) sepia(0.25) hue-rotate(175deg) saturate(1.4); }
.tiles-labels { opacity: 0.8; }
.leaflet-control-attribution { background: rgba(5, 7, 11, 0.7) !important; color: var(--ink-3) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar a { background: rgba(16, 22, 32, 0.9); color: var(--ink); border-color: var(--line-2); }
.leaflet-bar a:hover { background: rgba(26, 34, 48, 0.95); color: var(--ink); }

.map-hud { position: absolute; top: 12px; left: 56px; z-index: 500; padding: 10px 14px; display: flex; gap: 18px; border-radius: 12px; }
.hud-k { display: flex; flex-direction: column; }
.hud-k b { font: 500 22px/1 var(--f-mono); }
.hud-k span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }
.map-legend { position: absolute; bottom: 26px; left: 12px; z-index: 500; padding: 8px 12px; font-size: 11px; display: flex; flex-direction: column; gap: 4px; border-radius: 12px; }
.lg { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lg i.ring { border-radius: 50%; background: transparent !important; border: 2px solid var(--accent); }

.ac-icon { transition: transform 0.2s; }
.ac-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.9)); }
.ac-icon.isr svg { filter: drop-shadow(0 0 6px var(--accent)); }
.ac-icon.emerg svg { filter: drop-shadow(0 0 8px var(--bad)); }
.ac-label { background: rgba(5, 7, 11, 0.8) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; font: 500 10px var(--f-mono) !important; box-shadow: none !important; padding: 1px 5px !important; border-radius: 4px !important; }
.ac-label::before { display: none; }
.pulse { border-radius: 50%; border: 2px solid var(--accent); animation: pulse 2s ease-out infinite; }
.pulse.bad { border-color: var(--bad); }
@keyframes pulse { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hs-label { background: none !important; border: 0 !important; box-shadow: none !important; color: rgba(95, 212, 255, 0.75) !important; font: 600 10px var(--f-cond) !important; letter-spacing: 0.14em; text-transform: uppercase; }
.hs-label::before { display: none; }

.ac-card { position: absolute; top: 12px; right: 12px; z-index: 600; width: 300px; max-width: calc(100% - 24px); padding: 14px; border-radius: 12px; }
.ac-card h3 { margin: 0 0 2px; font: 600 18px var(--f-mono); }
.ac-card .x { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 20px; color: var(--ink-2); cursor: pointer; }
.ac-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0; font-size: 12px; }
.ac-card dt { color: var(--ink-3); }
.ac-card dd { margin: 0; font-family: var(--f-mono); }
.ac-card img { width: 100%; border-radius: 8px; margin-top: 6px; display: block; }
.ac-card .links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font: 500 11px var(--f-cond); letter-spacing: 0.04em; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.tag .sw { width: 8px; height: 8px; border-radius: 50%; }
.tag.bad { color: #ffd0d0; border-color: rgba(255, 93, 93, 0.6); background: rgba(255, 93, 93, 0.15); }
.tag.warn { color: #ffe6b3; border-color: rgba(242, 177, 52, 0.5); background: rgba(242, 177, 52, 0.12); }
.tag.good { color: #c9f5e0; border-color: rgba(62, 207, 142, 0.5); background: rgba(62, 207, 142, 0.12); }
.tag.info { color: #cdeefc; border-color: rgba(95, 212, 255, 0.45); background: rgba(95, 212, 255, 0.1); }

/* ── Lagebild ─────────────────────────────────────────────── */
.lage-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lage-actions { display: flex; gap: 8px; align-items: center; }
.lage-actions select { max-width: 170px; }
.lage-body { overflow-y: auto; max-height: 520px; padding-right: 4px; }
.lage-kurz { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.lage-stufe { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); margin-bottom: 14px; }
.gauge { display: flex; gap: 3px; margin-top: 4px; }
.gauge i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.gauge i.on:nth-child(1) { background: var(--good); }
.gauge i.on:nth-child(2) { background: #9bd64b; }
.gauge i.on:nth-child(3) { background: var(--warn); }
.gauge i.on:nth-child(4) { background: #ff8a3d; }
.gauge i.on:nth-child(5) { background: var(--bad); }
.lage-stufe b { font: 600 13px var(--f-cond); letter-spacing: 0.06em; text-transform: uppercase; }
.lage-stufe p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); }
.lage-sec h4 { margin: 14px 0 6px; font: 600 12px var(--f-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lage-sec p { margin: 0; color: var(--ink-2); font-size: 13px; }
.lage-sec ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.lage-sec li { margin: 3px 0; }
.empty { color: var(--ink-3); font-size: 13px; padding: 20px 4px; }
.empty code { font-family: var(--f-mono); color: var(--ink-2); background: rgba(255, 255, 255, 0.05); padding: 1px 5px; border-radius: 4px; }
.skeleton { height: 200px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 0; overflow: hidden; background: var(--line); }
.kpi { padding: 14px; background: rgba(12, 17, 25, 0.92); }
.kpi b { display: block; font: 500 24px/1.1 var(--f-mono); }
.kpi span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.kpi em { font-style: normal; font-size: 11px; font-family: var(--f-mono); margin-left: 6px; }
.kpi em.up { color: var(--warn); }
.kpi em.down { color: var(--good); }

/* ── Abgleich ─────────────────────────────────────────────── */
.legend-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.themen { display: flex; flex-direction: column; gap: 12px; }
.thema { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.thema-head { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 10px; }
.thema-w { font: 600 12px var(--f-mono); color: var(--ink-3); padding-top: 3px; min-width: 22px; }
.thema-t { flex: 1; min-width: 0; }
.thema-t h3 { margin: 0 0 4px; font: 600 16px/1.3 var(--f-cond); letter-spacing: 0.02em; }
.thema-t p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.thema-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sichten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.sicht { padding: 10px 14px; background: rgba(9, 13, 20, 0.9); font-size: 12.5px; color: var(--ink-2); position: relative; }
.sicht::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--c); }
.sicht h5 { margin: 0 0 4px; font: 600 11px var(--f-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.sicht.leer { color: var(--ink-3); font-style: italic; }
.belege { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px 12px; border-top: 1px solid var(--line); }
.beleg { font: 500 11px var(--f-mono); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); cursor: pointer; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.beleg:hover { border-color: var(--accent); color: var(--ink); }
.beleg .sw { width: 7px; height: 7px; border-radius: 50%; }
.widersprueche { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.wid { border: 1px solid rgba(242, 177, 52, 0.25); border-radius: 12px; padding: 12px 14px; background: linear-gradient(180deg, rgba(242, 177, 52, 0.06), transparent); font-size: 13px; }
.wid .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; margin-bottom: 8px; }
.wid .vs b { font: 600 11px var(--f-cond); letter-spacing: 0.1em; color: var(--warn); align-self: center; }
.wid p { margin: 0; color: var(--ink-2); }

/* ── Narrative ────────────────────────────────────────────── */
.narr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.narr-col { border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; min-width: 0; }
.narr-col h3 { margin: 0; padding: 10px 12px; font: 600 12px var(--f-cond); letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.narr-col h3 i { width: 10px; height: 10px; border-radius: 50%; }
.narr-col h3 span { margin-left: auto; font: 400 11px var(--f-mono); color: var(--ink-3); letter-spacing: 0; }
.narr-list { overflow-y: auto; max-height: 560px; }

.item { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.item:hover { background: rgba(255, 255, 255, 0.03); }
.item-meta { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font: 400 11px var(--f-mono); color: var(--ink-3); min-width: 0; }
.item-meta .src { color: var(--ink-2); font-family: var(--f-cond); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta .sw { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.item-t { font-size: 13px; line-height: 1.4; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.item-img { width: 58px; height: 42px; object-fit: cover; border-radius: 6px; grid-row: 2; grid-column: 2; background: #111; }
.item.new { animation: flash 2.4s ease-out; }
@keyframes flash { from { background: rgba(95, 212, 255, 0.14); } to { background: transparent; } }
mark { background: rgba(95, 212, 255, 0.28); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ── Diagramme ────────────────────────────────────────────── */
.chart { position: relative; height: 260px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid line { stroke: rgba(150, 180, 220, 0.08); }
.chart .axis text { fill: var(--ink-3); font: 10px var(--f-mono); }
.chart .lbl { font: 600 11px var(--f-cond); letter-spacing: 0.04em; fill: var(--ink-2); }
.chart .xhair { stroke: rgba(233, 238, 246, 0.35); stroke-dasharray: 3 3; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.chart-legend i { width: 14px; height: 2px; border-radius: 2px; }
.tip { position: absolute; pointer-events: none; z-index: 5; padding: 8px 10px; border-radius: 8px; background: rgba(8, 11, 17, 0.95); border: 1px solid var(--line-2); font-size: 11.5px; min-width: 130px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.tip b { display: block; font: 500 11px var(--f-mono); color: var(--ink-3); margin-bottom: 4px; }
.tip div { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.tip div span { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.tip i { width: 8px; height: 8px; border-radius: 50%; }
.tip em { font-style: normal; font-family: var(--f-mono); color: var(--ink); }

.alert-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; max-height: 300px; overflow-y: auto; }
.al { display: flex; align-items: center; gap: 7px; color: var(--ink-3); padding: 3px 0; }
.al.on { color: #ffd0d0; }
.al.on .dot { background: var(--bad); color: var(--bad); animation: blink 1.4s infinite; }
.al.occ { color: var(--ink-3); font-style: italic; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ── Tabellen ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font: 600 11px var(--f-cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: rgba(255, 255, 255, 0.02); }
.tbl .mono { font-family: var(--f-mono); }
.tbl .note { color: var(--ink-2); max-width: 520px; }
.tbl tr.click { cursor: pointer; }

/* ── Meldungsstrom ────────────────────────────────────────── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font: 500 12px var(--f-cond); letter-spacing: 0.04em; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.chip i { width: 8px; height: 8px; border-radius: 50%; }
.chip.on { color: var(--ink); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); }
.strom { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); border-top: 1px solid var(--line); }
.strom .item { border-right: 1px solid var(--line); }
.more { display: block; margin: 14px auto 0; }
.fine { color: var(--ink-3); font-size: 12px; margin: 12px 0 0; }

/* ── Detail-Schublade ─────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 2000; }
.drawer-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); border-radius: 18px 0 0 18px; padding: 22px; overflow-y: auto; background: rgba(12, 17, 25, 0.96); }
.drawer-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 26px; color: var(--ink-2); cursor: pointer; }
.d-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font: 400 12px var(--f-mono); color: var(--ink-3); }
.d-title { font: 600 20px/1.3 var(--f-cond); margin: 0 0 12px; overflow-wrap: anywhere; }
.d-body { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.d-img { width: 100%; border-radius: 12px; margin: 10px 0; }
.d-note { margin-top: 16px; padding: 10px 12px; border-left: 2px solid var(--accent); background: rgba(95, 212, 255, 0.06); font-size: 12.5px; color: var(--ink-2); border-radius: 0 8px 8px 0; }
.d-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

.foot { padding: 16px 20px 28px; color: var(--ink-3); font-size: 11px; text-align: center; }

/* ── Vertrauen & Herkunft ─────────────────────────────────── */
.mini { font: 600 9.5px var(--f-cond); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; }
.mini.bad { color: #ffb4b4; border-color: rgba(255, 93, 93, 0.5); background: rgba(255, 93, 93, 0.12); }
.mini.warn { color: #ffe0a3; border-color: rgba(242, 177, 52, 0.45); background: rgba(242, 177, 52, 0.1); }
.mini.good { color: #b9f2d8; border-color: rgba(62, 207, 142, 0.45); background: rgba(62, 207, 142, 0.12); }
.mini.ru { color: #f3c6c6; border-color: rgba(230, 103, 103, 0.35); }
.item-t .mini { vertical-align: 1px; margin-left: 4px; }
.item.is-prop .item-t { color: var(--ink-2); font-style: italic; }
.prop-warn { margin: 0; padding: 8px 12px; font-size: 11.5px; line-height: 1.45; color: #ffcdcd; background: repeating-linear-gradient(135deg, rgba(255, 93, 93, 0.10) 0 10px, rgba(255, 93, 93, 0.05) 10px 20px); border-bottom: 1px solid rgba(255, 93, 93, 0.3); }
.prop-warn.ok { color: #c9f5e0; background: repeating-linear-gradient(135deg, rgba(62, 207, 142, 0.10) 0 10px, rgba(62, 207, 142, 0.05) 10px 20px); border-color: rgba(62, 207, 142, 0.35) !important; }
.prop-warn.big { border: 1px solid rgba(255, 93, 93, 0.35); border-radius: 10px; margin: 0 0 12px; font-size: 13px; }
.col-prop { border-color: rgba(255, 93, 93, 0.3); }
.d-orig { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.d-orig summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
.d-orig .d-body { margin-top: 8px; font-size: 13px; }

/* ── Tendenz & Trendbarometer ─────────────────────────────── */
.td-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.td-head b { font: 600 17px var(--f-cond); letter-spacing: 0.04em; text-transform: uppercase; }
.td-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 19px var(--f-mono); border: 1px solid var(--line-2); flex: none; }
.td-arrow.sm { width: 24px; height: 24px; font-size: 13px; }
.td-arrow.bad { color: #ffb4b4; background: rgba(255, 93, 93, 0.15); border-color: rgba(255, 93, 93, 0.5); }
.td-arrow.warn { color: #ffe0a3; background: rgba(242, 177, 52, 0.13); border-color: rgba(242, 177, 52, 0.5); }
.td-arrow.info { color: #cdeefc; background: rgba(95, 212, 255, 0.1); border-color: rgba(95, 212, 255, 0.4); }
.td-arrow.good { color: #c9f5e0; background: rgba(62, 207, 142, 0.12); border-color: rgba(62, 207, 142, 0.45); }
.td-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.td-row { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); }
.td-row b { display: block; color: var(--ink); font-weight: 600; font-size: 12.5px; }
.bad-t { color: #ff9c9c; } .warn-t { color: var(--warn); } .info-t { color: var(--accent); } .good-t { color: var(--good); }
.trend { border-top: 1px solid var(--line); padding: 14px 0 16px; display: flex; flex-direction: column; gap: 14px; }
.tr-main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tr-main > div { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, 0.02); }
.tr-main p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.tr-k { display: block; font: 600 11px var(--f-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.meter { margin: 8px 0 4px; }
.meter-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-bottom: 5px; }
.meter-bar { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #3ecf8e 0%, #5fd4ff 35%, #5fd4ff 65%, #f2b134 82%, #ff5d5d 100%); opacity: 0.85; }
.meter-bar i { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.chip.topic b { font: 500 11px var(--f-mono); color: var(--ink); }
.chip.topic em { font-style: normal; font: 500 10.5px var(--f-mono); color: var(--ink-3); }
.chip.topic em.up { color: var(--warn); }
.chip.topic em.down { color: var(--good); }

/* ── Flugdetails ──────────────────────────────────────────── */
.fl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.fl-grid div { background: rgba(9, 13, 20, 0.95); padding: 9px 12px; }
.fl-grid span { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.fl-grid b { font: 500 14px var(--f-mono); }
.fl-map { height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #070b11; }
.fl-photo { width: 100%; border-radius: 12px; margin-top: 12px; display: block; }
.tbl tr.click:hover td { background: rgba(95, 212, 255, 0.06); }

/* ── Kurzbriefing ─────────────────────────────────────────── */
.brief { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2fr) minmax(220px, 1fr); gap: 20px; align-items: start; }
.brief-lage { display: flex; flex-direction: column; gap: 10px; }
.brief-stufe { display: flex; align-items: center; gap: 12px; }
.brief-stufe .n { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font: 600 26px var(--f-mono); color: #05070b; }
.brief-stufe b { display: block; font: 600 14px var(--f-cond); letter-spacing: 0.1em; text-transform: uppercase; }
.brief-stufe span { font-size: 12px; color: var(--ink-3); }
.brief-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.brief-bullets li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.brief-bullets li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; box-shadow: 0 0 8px var(--accent); }
.brief-num { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.brief-num div { background: rgba(9, 13, 20, 0.92); padding: 8px 10px; }
.brief-num b { display: block; font: 500 19px var(--f-mono); }
.brief-num span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.brief-foot { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Kameras ──────────────────────────────────────────────── */
.cam-jumps { display: flex; gap: 6px; flex-wrap: wrap; }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cam { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.25); cursor: pointer; }
.cam img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #0b0f16; }
.cam-cap { padding: 7px 10px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; }
.cam-cap b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-cap span { font: 400 10.5px var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.cam-pin { width: 20px; height: 20px; color: #5fd4ff; filter: drop-shadow(0 0 4px rgba(0,0,0,.9)); }
.cam-pin svg { width: 100%; height: 100%; }
.d-cam { width: 100%; border-radius: 12px; display: block; }

/* ── Alarm ────────────────────────────────────────────────── */
#alarmBtn .bell { font-size: 13px; filter: grayscale(1) opacity(0.7); }
#alarmBtn.on { border-color: rgba(62, 207, 142, 0.6); background: rgba(62, 207, 142, 0.12); }
#alarmBtn.on .bell { filter: none; }
.alarm-regeln { display: flex; flex-direction: column; gap: 8px; }
.alarm-regeln div { border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; }
.alarm-regeln b { display: block; font: 600 13px var(--f-cond); letter-spacing: 0.04em; }
.alarm-regeln span { font-size: 12.5px; color: var(--ink-2); }
.alarm-liste { display: flex; flex-direction: column; gap: 10px; }
.alarm-eintrag { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.alarm-eintrag b { font-size: 13.5px; }
.alarm-eintrag span { display: block; font: 400 11px var(--f-mono); color: var(--ink-3); margin: 2px 0 6px; }
.alarm-eintrag p { margin: 0; font-size: 12.5px; color: var(--ink-2); }

/* ── Ereignisse und Bewertung ─────────────────────────────── */
.adm { display: inline-block; font: 600 13px var(--f-mono); letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); }
.adm.good { color: #c9f5e0; border-color: rgba(62, 207, 142, 0.5); background: rgba(62, 207, 142, 0.12); }
.adm.info { color: #cdeefc; border-color: rgba(95, 212, 255, 0.45); background: rgba(95, 212, 255, 0.1); }
.adm.warn { color: #ffe6b3; border-color: rgba(242, 177, 52, 0.5); background: rgba(242, 177, 52, 0.12); }
.adm.bad { color: #ffd0d0; border-color: rgba(255, 93, 93, 0.6); background: rgba(255, 93, 93, 0.15); }
.claims { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.claims div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.claims b { font: 500 18px var(--f-mono); margin-right: 6px; }
.claims span { display: block; color: var(--ink-3); font-size: 11px; margin-top: 3px; }
.cam-extern { margin-bottom: 12px; }
.cam-extern .chip { text-decoration: none; }

/* ── Datenstand ───────────────────────────────────────────── */
#dataState.warn { border-color: rgba(242, 177, 52, 0.55); background: rgba(242, 177, 52, 0.12); }
body.stale .map-hud { outline: 1px solid rgba(242, 177, 52, 0.4); outline-offset: 2px; }

/* ── Responsiv ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .hero { grid-template-columns: 1fr; }
  .triple { grid-template-columns: 1fr 1fr; }
  .triple > :last-child { grid-column: 1 / -1; }
  .narr-grid { grid-template-columns: 1fr 1fr; }
  .lage-body { max-height: none; }
}
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 10px; top: 0; margin: 0; border-radius: 0 0 14px 14px; position: relative; }
  .clocks { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 6px; min-width: 0; }
  .clock b { font-size: 13px; }
  .top-status { margin-left: auto; }
  .triple { grid-template-columns: 1fr; }
  .narr-grid { grid-template-columns: 1fr; }
  .sichten { grid-template-columns: 1fr 1fr; }
  .map-wrap { min-height: 460px; }
  .map-hud { left: 50px; right: 10px; gap: 12px; flex-wrap: wrap; }
  .hud-k b { font-size: 17px; }
  .map-legend { display: none; }
  .strom { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  input[type='search'] { min-width: 0; width: 100%; }
  .inline-search { width: 100%; }
  .filters { width: 100%; }
  .widersprueche { grid-template-columns: 1fr; }
  .lage-actions { width: 100%; }
  .lage-actions select { flex: 1; max-width: none; }
  .alert-list { grid-template-columns: 1fr; }
  .tr-main { grid-template-columns: 1fr; }
  .brief { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px) {
  main { padding: 10px 10px 20px; }
  .panel { padding: 12px; }
  .sichten { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ── Kopfbereich: die vier Fragen der ersten zehn Sekunden ─────────────────
   Der Zustand steht am body (data-lage). Nur der Code setzt ihn, nie das
   Sprachmodell. Rot ist ausschließlich dem Alarmzustand vorbehalten. */
#hero { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.hero-line {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.hero-line::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ink-3);
}
.hl-zustand {
  font: 700 11px var(--f-cond); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 9px; flex: none;
}
.hl-satz { font: 600 17px/1.3 var(--f-cond); letter-spacing: 0.02em; flex: 1 1 320px; }
.hl-grund { font-size: 12px; color: var(--ink-2); flex: 1 1 100%; }
.hl-zeit { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

body[data-lage="erhoeht"] .hero-line::before { background: var(--warn); }
body[data-lage="erhoeht"] .hl-zustand { color: #ffe6b3; border-color: rgba(242, 177, 52, 0.5); background: rgba(242, 177, 52, 0.12); }
body[data-lage="alarm"] .hero-line::before { background: var(--bad); }
body[data-lage="alarm"] .hero-line { border-color: rgba(255, 93, 93, 0.5); background: linear-gradient(90deg, rgba(255, 93, 93, 0.16), var(--glass) 40%); }
body[data-lage="alarm"] .hl-zustand { color: #fff; border-color: var(--bad); background: rgba(255, 93, 93, 0.3); animation: alarmPuls 2s ease-in-out infinite; }
body[data-lage="alarm"] .hl-satz { color: #ffdede; }
@keyframes alarmPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 93, 0.5); } 50% { box-shadow: 0 0 0 7px rgba(255, 93, 93, 0); } }

/* Im Alarmzustand tritt das Rauschen zurück: Narrative und Meldungsstrom
   bleiben erreichbar, verlieren aber ihre Aufmerksamkeit. */
body[data-lage="alarm"] #narrative, body[data-lage="alarm"] #luft { opacity: 0.55; transition: opacity 0.3s; }
body[data-lage="alarm"] #narrative:hover, body[data-lage="alarm"] #luft:hover { opacity: 1; }
body[data-lage="alarm"] .map-wrap { height: 62vh; }

.hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hk {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 12px 14px; backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 6px;
  min-height: 108px;
}
.hk[data-ev], .hk[data-jump], .hk[data-fokus] { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.hk[data-ev]:hover, .hk[data-jump]:hover, .hk[data-fokus]:hover { border-color: var(--line-2); transform: translateY(-1px); }
.hk-k { font: 600 10px var(--f-cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.hk b { font: 600 15px/1.25 var(--f-cond); letter-spacing: 0.01em; }
.hk p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.hk-top b { color: var(--ink); }
body[data-lage="alarm"] .hk-top { border-color: rgba(255, 93, 93, 0.45); background: rgba(255, 93, 93, 0.07); }

.bel-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.bel-bar i { display: block; height: 100%; }
.bel-bar .verified { background: var(--good); }
.bel-bar .claimed { background: var(--warn); }
.bel-bar .weak { background: var(--ink-3); }
.bel-bar .conflict { background: var(--bad); }

/* ── Vertrauen im Klartext ────────────────────────────────────────────────
   Der Admiralty-Code bleibt als kleine Kennung erhalten, aber lesen muss man
   ihn nicht mehr. */
.vb {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 11px var(--f-cond); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
}
.vb em { font: 500 10px var(--f-mono); font-style: normal; opacity: 0.6; letter-spacing: 0; }
.vb.verified { color: #c9f5e0; border-color: rgba(62, 207, 142, 0.5); background: rgba(62, 207, 142, 0.12); }
.vb.claimed { color: #ffe6b3; border-color: rgba(242, 177, 52, 0.45); background: rgba(242, 177, 52, 0.1); }
.vb.weak { color: var(--ink-2); }
.vb.conflict { color: #ffd0d0; border-color: rgba(255, 93, 93, 0.55); background: rgba(255, 93, 93, 0.14); }

/* ── Kernpunkte mit Beleg ─────────────────────────────────────────────── */
.brief-bullets li.kp-klick { cursor: pointer; border-radius: 6px; margin: -2px -6px; padding: 2px 6px; transition: background 0.15s; }
.brief-bullets li.kp-klick:hover { background: rgba(255, 255, 255, 0.05); }
.kp-t { flex: 1; }
.kp-b {
  flex: none; align-self: center; font: 600 10px var(--f-cond); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(95, 212, 255, 0.35); border-radius: 5px; padding: 2px 6px;
}
.brief-bullets li.kp-klick:hover .kp-b { background: rgba(95, 212, 255, 0.12); }

/* ── Autopilot der Karte ──────────────────────────────────────────────── */
.auto-lbl { color: var(--accent); }
.auto-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink);
  font: 600 11px var(--f-cond); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.auto-badge:hover { border-color: var(--accent); color: var(--accent); }

/* Zahlen dürfen beim Aktualisieren nicht springen. */
.mono, .hl-zeit, .hud-k b, .brief-num b, .tbl .mono { font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .hero-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* Der Kopfbereich ist wichtig, darf die Karte aber nicht aus dem Blick schieben. */
  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hk { min-height: 0; padding: 10px 12px; gap: 4px; }
  .hk p { font-size: 11.5px; line-height: 1.4; }
  #hero { gap: 8px; margin-bottom: 12px; }
  .hl-satz { font-size: 15px; }
  .auto-badge { font-size: 10px; padding: 6px 10px; }
}

/* ── Beleglage hinter einem Kernpunkt ─────────────────────────────────── */
.beleg-lage { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.beleg-lage .bl {
  flex: 1 1 130px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 9px 11px;
}
.beleg-lage .bl span { display: block; font: 600 9.5px var(--f-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.beleg-lage .bl b { font: 600 15px var(--f-cond); font-variant-numeric: tabular-nums; }
.beleg-lage .bl em { font-style: normal; font-size: 11px; color: var(--ink-2); display: block; margin-top: 2px; }
.beleg-lager { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

/* Unabhängige Bestätigung – der einzige Ort, an dem Grün etwas behauptet. */
.d-note.ok { border-color: rgba(62, 207, 142, 0.35); background: rgba(62, 207, 142, 0.07); color: #d3f3e4; }

/* ── Internetverkehr ─────────────────────────────────────────────────── */
.netz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 18px; }
.netz { display: grid; grid-template-columns: 90px 1fr 60px; align-items: center; gap: 10px; padding: 5px 0; }
.netz-n { font: 500 13px var(--f-cond); color: var(--ink-2); }
.netz-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); position: relative; overflow: hidden; }
.netz-bar i { position: absolute; top: 0; bottom: 0; display: block; border-radius: 3px; }
.netz-bar i.ab { right: 50%; background: var(--warn); }
.netz-bar i.zu { left: 50%; background: var(--accent); }
.netz b { text-align: right; font-size: 12px; }
.netz.warn .netz-n { color: var(--ink); }
.netz.warn .netz-bar i.ab { background: var(--bad); }

/* ── Themenkarten auf schmalen Schirmen ───────────────────────────────
   Die beiden Abzeichen („teilweise bestätigt“, „Sicherheit hoch“) sind breit und
   brechen nicht um. Neben ihnen blieb für Titel und Text nur eine Handbreit – jedes
   zweite Wort stand in einer eigenen Zeile. Unter 820 px wandern sie unter den Titel. */
@media (max-width: 820px) {
  .thema-head { flex-wrap: wrap; }
  .thema-t { flex: 1 1 calc(100% - 40px); }
  .thema-tags { order: 3; flex-basis: 100%; justify-content: flex-start; padding-left: 34px; }
  .wid .vs { grid-template-columns: 1fr; }
  .wid .vs b { justify-self: start; }
}

/* ── Einklappbare Bereiche ────────────────────────────────────────────
   Jeder Kasten lässt sich über seine Überschrift zuklappen. Der Zustand bleibt
   je Gerät gespeichert. Eingeklappt bleibt nur die Kopfzeile stehen. */
.panel-head h2.klapp { cursor: pointer; user-select: none; display: flex; align-items: flex-start; gap: 8px; }
.panel-head h2.klapp::before {
  content: ''; flex: none; width: 8px; height: 8px; margin-top: 4px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 0.18s;
}
.panel-head h2.klapp:hover::before { border-color: var(--accent); }
.panel.zu .panel-head h2.klapp::before { transform: rotate(-45deg); margin-top: 3px; }
.panel.zu > :not(.panel-head) { display: none !important; }
.panel.zu .panel-head { margin-bottom: 0; }
.panel.zu .panel-head > :not(h2) { display: none; }
.panel.zu { padding-top: 12px; padding-bottom: 12px; }
.jump .alle { margin-left: auto; color: var(--ink-3); cursor: pointer; background: none; border: 0; font: inherit; }
.jump .alle:hover { color: var(--accent); }

/* Gegenmeldungen im Urteil: dieselben Knöpfe wie bei den Belegen */
.gegen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.netz-reg { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.nr { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; background: rgba(255, 255, 255, 0.02); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.nr b { font: 600 13px var(--f-cond); }
.nr em { flex-basis: 100%; font-style: normal; font-size: 11px; color: var(--ink-3); }
.nr.laeuft { border-color: rgba(242, 177, 52, 0.45); background: rgba(242, 177, 52, 0.07); }
.nr.laeuft em { color: #ffe0a3; }

/* Ohne Netz: der letzte Stand bleibt lesbar, aber unübersehbar als alt markiert. */
body.offline::before {
  content: 'Offline – angezeigt wird der zuletzt gespeicherte Stand';
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3000;
  padding: 8px 16px; border-radius: 999px; font: 600 12px var(--f-cond); letter-spacing: 0.06em;
  background: rgba(242, 177, 52, 0.95); color: #1a1200;
}

/* ── Am Ort ───────────────────────────────────────────────────────────── */
.umfeld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.uo { display: grid; grid-template-columns: minmax(130px, auto) 1fr auto; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border-left: 2px solid var(--line-2); }
.uo b { font: 600 12.5px var(--f-cond); }
.uo span { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uo em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.uo.r1, .uo.r2, .uo.r3 { border-left-color: #ff8a3d; }
.uo.r4 { border-left-color: var(--warn); }
.wetter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.wetter div { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.wetter span { display: block; font: 600 9.5px var(--f-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.wetter b { font: 600 13px var(--f-cond); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .wetter { grid-template-columns: 1fr 1fr; }
  .uo { grid-template-columns: 1fr auto; }
  .uo span { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}

/* ── Variante „Klarglas“ (zum Ausprobieren, per Schalter in der Sprungleiste) ──
   Glas wirkt nur, wenn dahinter etwas ist, das es brechen kann. Über fast schwarzem
   Grund sieht die bisherige Glasfläche aus wie mattes Grau. Diese Variante legt
   deshalb farbiges Licht in den Hintergrund und macht die Flächen durchlässiger,
   mit einer hellen Oberkante wie bei geschliffenem Glas.

   Bewusst ohne Bewegung: Jede Bewegung hinter unscharf gerechneten Flächen zwingt
   die Grafikkarte, alle Flächen in jedem Bild neu zu berechnen. Auf einem Zweit-
   bildschirm, der tagelang läuft, ist das spürbar. Rot erscheint im Hintergrund
   nur im Alarmzustand – dann färbt sich das ganze Umgebungslicht. */
body[data-stil="glas"] .bg-glow {
  background:
    radial-gradient(900px 620px at 8% 4%, rgba(57, 135, 229, 0.62), transparent 62%),
    radial-gradient(760px 560px at 92% 12%, rgba(165, 139, 255, 0.48), transparent 60%),
    radial-gradient(980px 700px at 70% 78%, rgba(25, 158, 112, 0.38), transparent 62%),
    radial-gradient(700px 520px at 18% 88%, rgba(95, 212, 255, 0.34), transparent 60%),
    radial-gradient(600px 500px at 50% 45%, rgba(57, 135, 229, 0.20), transparent 60%),
    linear-gradient(180deg, #04060a 0%, #070b12 100%);
}
body[data-stil="glas"][data-lage="alarm"] .bg-glow {
  background:
    radial-gradient(1000px 700px at 50% 0%, rgba(255, 70, 70, 0.40), transparent 65%),
    radial-gradient(760px 560px at 92% 60%, rgba(165, 60, 90, 0.26), transparent 60%),
    radial-gradient(800px 600px at 8% 80%, rgba(120, 40, 60, 0.22), transparent 60%),
    linear-gradient(180deg, #0a0507 0%, #0d0709 100%);
}
body[data-stil="glas"][data-lage="erhoeht"] .bg-glow {
  background:
    radial-gradient(900px 620px at 50% 0%, rgba(242, 177, 52, 0.26), transparent 62%),
    radial-gradient(760px 560px at 92% 12%, rgba(165, 139, 255, 0.24), transparent 60%),
    radial-gradient(980px 700px at 70% 78%, rgba(57, 135, 229, 0.24), transparent 62%),
    linear-gradient(180deg, #06060a 0%, #0a0b12 100%);
}
body[data-stil="glas"] .glass,
body[data-stil="glas"] .hk {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0.035) 100%),
    rgba(12, 18, 28, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    0 24px 60px -26px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
}
/* Lesbarkeit geht vor: Wo viel Text steht, bleibt der Grund dunkler. */
body[data-stil="glas"] .item,
body[data-stil="glas"] .sicht,
body[data-stil="glas"] .tbl,
body[data-stil="glas"] .thema,
body[data-stil="glas"] .drawer-panel { background-color: rgba(7, 11, 17, 0.62); }
body[data-stil="glas"] .drawer-panel { backdrop-filter: blur(34px) saturate(160%); -webkit-backdrop-filter: blur(34px) saturate(160%); }
body[data-stil="glas"] .hero-line { background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(12, 18, 28, 0.42); }
body[data-stil="glas"][data-lage="alarm"] .hero-line { background: linear-gradient(90deg, rgba(255, 93, 93, 0.30), rgba(12, 18, 28, 0.42) 55%); }
/* Wer „Transparenz reduzieren“ eingestellt hat, bekommt die ruhige Fassung. */
@media (prefers-reduced-transparency: reduce) {
  body[data-stil="glas"] .glass, body[data-stil="glas"] .hk { background: rgba(14, 20, 30, 0.92); backdrop-filter: none; }
}
.jump .alle + .alle { margin-left: 14px; }

/* ── Gegenprobe ───────────────────────────────────────────────────────── */
.gegenprobe { margin: 4px 0 14px; }
.gegenprobe .sub-h { margin-top: 6px; }
.gp-fazit { margin: 0 0 8px; font-size: 13px; }
.gp { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; background: rgba(255, 255, 255, 0.025); border-left: 2px solid var(--line-2); }
.gp-s { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--f-mono); background: rgba(255, 255, 255, 0.06); color: var(--ink-3); }
.gp b { font: 600 12.5px var(--f-cond); letter-spacing: 0.02em; }
.gp p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.gp em { font-style: normal; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.gp-ja { border-left-color: var(--good); }
.gp-ja .gp-s { background: rgba(62, 207, 142, 0.18); color: var(--good); }
.gp-nein { border-left-color: var(--bad); }
.gp-nein .gp-s { background: rgba(255, 93, 93, 0.2); color: var(--bad); }
.gp-offen .gp-s { color: var(--warn); }
.gp-info .gp-s { color: var(--accent); font-style: italic; }
.good-t { color: var(--good); }
@media (max-width: 560px) { .gp { grid-template-columns: 26px 1fr; } .gp em { grid-column: 2; } }

/* ── Sensoren ─────────────────────────────────────────────────────────── */
.sensor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sensor { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-k { font: 600 10px var(--f-cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.s-z { font: 600 16px/1.25 var(--f-cond); }
.sensor > p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.s-liste { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.s-e { text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--ink); font: 500 12.5px var(--f-sans); cursor: pointer; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.s-e:hover { border-color: var(--accent); }
.s-e span { font: 600 12px var(--f-mono); }
.s-e em { flex-basis: 100%; font-style: normal; font-size: 11px; color: var(--ink-3); }
@media (max-width: 1100px) { .sensor-grid { grid-template-columns: 1fr; } }

/* ── „Gerade eben“ auf der Karte ──────────────────────────────────────── */
.jetzt { position: absolute; right: 12px; bottom: 26px; z-index: 520; padding: 8px; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; width: 250px; }
.jetzt-k { font: 600 10px var(--f-cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 0 6px 2px; }
.jetzt button { display: grid; grid-template-columns: 8px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 5px 6px; border-radius: 7px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.jetzt button:hover { background: rgba(255, 255, 255, 0.06); }
.jetzt i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; }
.jetzt b { font: 600 12.5px var(--f-cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jetzt span { grid-column: 2; font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jetzt em { grid-row: 1; grid-column: 3; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
@media (max-width: 820px) { .jetzt { left: 10px; right: 10px; width: auto; bottom: 10px; } .jetzt button:nth-of-type(n+4) { display: none; } }

/* ── Livestreams und eingebettete Kameras ─────────────────────────────── */
.live-reihe, .windy { margin-bottom: 14px; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.live { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); background: #000; cursor: pointer; }
.live img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 0.2s; }
.live:hover img { opacity: 0.95; }
.live-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(8, 12, 18, 0.65); color: #fff; font-size: 20px; cursor: pointer; backdrop-filter: blur(6px); }
.live .cam-cap { position: absolute; left: 0; right: 0; bottom: 0; }
.live iframe, .windy-k iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.windy-k { position: relative; aspect-ratio: 16 / 10; cursor: pointer; }

/* ── Mitlaufende Navigation ───────────────────────────────────────────── */
/* PC: schmale Leiste links, schiebt beim Überfahren die Beschriftung aus. Der Inhalt bekommt
   dauerhaft etwas Rand links, damit nichts springt, wenn die Leiste erscheint. */
.leiste {
  position: fixed; left: 10px; top: 50%; transform: translateY(-50%); z-index: 1100;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 14px;
  width: 34px; overflow: hidden; transition: width 0.18s ease, opacity 0.2s;
  animation: leisteRein 0.25s ease;
}
.leiste[hidden], .menue-knopf[hidden] { display: none; }
.leiste:hover, .leiste:focus-within { width: 150px; }
.leiste a { display: flex; align-items: center; gap: 10px; padding: 6px 5px; border-radius: 8px; color: var(--ink-3); text-decoration: none; white-space: nowrap; font: 600 12px var(--f-cond); letter-spacing: 0.06em; text-transform: uppercase; }
.leiste a i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.leiste a span { opacity: 0; transition: opacity 0.15s; }
.leiste:hover a span, .leiste:focus-within a span { opacity: 1; }
.leiste a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.leiste a.aktiv { color: var(--accent); }
.leiste a.aktiv i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes leisteRein { from { opacity: 0; transform: translate(-12px, -50%); } }
@media (min-width: 1101px) { main { padding-left: 56px; } .menue-knopf { display: none !important; } }

/* Handy und Tablet: Knopf unten links, öffnet ein Blatt mit allen Bereichen. */
.menue-knopf {
  position: fixed; left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 1100;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink);
  font: 600 13px var(--f-cond); letter-spacing: 0.06em; cursor: pointer; animation: knopfRein 0.2s ease;
}
@keyframes knopfRein { from { opacity: 0; transform: translateY(10px); } }
.menue-blatt { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; }
.menue-blatt[hidden] { display: none; }
.menue-inhalt { width: 100%; max-height: 80vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menue-inhalt .tr-k { grid-column: 1 / -1; }
.menue-inhalt a { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 600 14px var(--f-cond); background: rgba(255, 255, 255, 0.03); }
.menue-inhalt a.aktiv { border-color: var(--accent); color: var(--accent); }
.menue-extra { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; }
.menue-extra button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 500 12px var(--f-sans); }
@media (max-width: 1100px) { .leiste { display: none !important; } }

/* ── Sensorfusion ─────────────────────────────────────────────────────── */
.fusion { margin-bottom: 14px; }
.fu-tab { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-bottom: 6px; }
.fu { text-align: left; border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: var(--r-s); padding: 9px 11px; background: rgba(255, 255, 255, 0.025); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.fu:hover { border-color: var(--line-2); }
.fu b { font: 600 13px var(--f-cond); }
.fu-st { font: 600 10.5px var(--f-cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fu-fam { display: flex; flex-wrap: wrap; gap: 4px; }
.fu-fam i { font: 600 9.5px var(--f-cond); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-3); }
.fu-fam i.an { color: #1a1200; background: var(--warn); border-color: var(--warn); }
.fu.auffaellig { border-left-color: var(--warn); }
.fu.alarm { border-left-color: var(--bad); background: rgba(255, 93, 93, 0.08); }
.fu.alarm .fu-fam i.an { background: var(--bad); border-color: var(--bad); color: #fff; }
.fu.krieg { border-left-color: var(--ink-3); }
.s-e.hinweis { border-color: rgba(255, 93, 93, 0.45); }

/* VesselFinder */
.vf { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: var(--r-s); margin: 8px 0; background: #000; }
.vf-knopf { margin: 6px 0; width: 100%; }

.s-mehr { font-size: 12.5px; color: var(--ink-2); }
.s-mehr summary { cursor: pointer; color: var(--accent); font: 600 12px var(--f-cond); letter-spacing: 0.04em; margin: 4px 0; }
.s-mehr p { margin: 4px 0 8px; line-height: 1.5; }

.sensor .wetter { grid-template-columns: repeat(2, 1fr); }

.pulse.feuer { width: 30px; height: 30px; border-color: #ff8a3d; }