/* ════════════════════════════════════════════════════════════
   SCHATTENATLAS — die eigene Oberflaeche
   Wird NUR von schattenatlas.html geladen, nach css/terminal-app.css.

   WOZU DIESE DATEI EXISTIERT. Bis zum 2026-09-01 stand alles in terminal-app.css,
   das sich vier Seiten teilen. Damit war jede Aenderung am Atlas eine Aenderung an
   der Zeitung — und einmal war sie es unbemerkt: ein auf 950 px verschobener
   Umbruchpunkt nahm index.html und impressum.html zwischen 769 und 950 px Uhr, LED
   und Titelgroesse, weil im selben Block .tt-header steht.
   Geprueft und hierher gezogen wurde, was in index.html, impressum.html,
   entitaet/index.html und main.js NICHT vorkommt.

   ⚠ Die geteilten Flaechen bleiben drueben: html/body, .tt-header*, .tt-clock/-led/-sys,
     .tt-footer, .graph-link-btn, *{box-sizing}, body::after, #crt-overlay.
   ⚠ Namensfalle: main.js benutzt sidebar-cy, sidebar-artikel-liste u. a. — die sind in
     css/tribune.css definiert, nicht hier. Ein pauschales .sidebar-*-Umbenennen traefe
     sie trotzdem.
   ════════════════════════════════════════════════════════════ */

/* ── DIE WERTE, AUS DENEN DER ATLAS BESTEHT ─────────────────────────────────
   Bis zum 2026-09-01 standen hier 219 rohe Farbnennungen, und der geerbte Wertesatz aus
   terminal-app.css (--amber #FFB000) beschrieb sie NICHT: der Atlas malt in einem
   gedaempften Messing, das in keinem einzigen Merkmalswert vorkam. Sechzehn Werte decken
   83 % aller Nennungen — das ist der Satz.

   ⚠ BENANNT NACH DER ROLLE, NICHT NACH DEM AUSSEHEN. `--at-schrift` und nicht `--at-messing`:
     ein zweites Design belegt dieselbe Rolle mit einem anderen Ton. Waere der Name die Farbe,
     hiesse es dort `--at-messing: grau` und niemand kaeme mehr mit.
   ⚠ Die Sendekette wird auf CRT festgenagelt (html.cockpit) — Directive One darf sich nicht
     aendern, auch nicht weil jemand am Tablet umgeschaltet hat.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --at-schrift:         #c8a84b;   /* die Stimme des Atlas — Schrift, aktive Raender */
  --at-schrift-hell:    #e8c97a;   /* hervorgehoben, angewaehlt */
  --at-schrift-matt:    #9a8038;   /* eine Stufe zurueck */
  --at-schrift-leise:   #8a7a40;   /* Nebenschrift */
  --at-schrift-leiser:  #7a6a3a;   /* Beschriftung, Einheiten */
  --at-schrift-fern:    #6a5a2a;   /* Randnotizen */
  --at-schrift-fast:    #5a4a30;   /* kaum noch da — Quellenangaben */
  --at-linie:           #3a2a10;   /* Rahmen und Trenner */
  --at-grund-hoch:      #161009;   /* gehobene Flaeche (Kopfzeilen in Kaesten) */
  --at-grund-kasten:    #120d07;   /* Kastenfuellung */
  --at-grund:           #0c0a08;   /* der Grund */
  --at-signal:          #3fd6e0;   /* Cyan — Live, Kameras, Bewegung */
  --at-signal-tief:     #1d5c63;   /* Cyan gedaempft */
  --at-klar:            #fff;      /* reines Weiss — nur fuer Zuspitzung */
}


/* ── View Toggle ────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--amber-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  border-radius: 2px;
  transition: all 0.2s;
}

.view-btn:hover, .view-btn.active {
  background: var(--amber-glow);
  border-color: var(--border-bright);
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.5);
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.1) inset;
}

.view-sep {
  color: var(--border);
  font-size: 12px;
}


/* ── Main Layout ────────────────────────────────────────────── */
/* ── DIE KOPFZEILE, NUR AUF DER ATLAS-SEITE ─────────────────────────────────
   B12: `.tt-header` hat `height:44px`, aber KEIN `flex-wrap`, KEIN `overflow` und kein
   `min-width:0` an den drei Gruppen. Der Atlas fuellt sie mit rund 917 px Mindestinhalt
   (Anzeige-Wahl 132 + vier Knoepfe + Lage + Radio + Suchfeld 150 links, Ansichts-Umschalter
   rechts, Titel in der Mitte) — auf einem 800-px-Schirm laeuft sie ueber, und
   `html,body{overflow:hidden}` schneidet das STUMM ab. Betroffen ist das rechte Ende, also
   ausgerechnet der Ansichts-Umschalter.

   ⚠ ALLES HIER HAENGT AN `html.atlas`. `.tt-header*` gehoert vier Seiten; die Zeitung darf
     davon nichts merken. Der Haken wird im Kopf-Skript gesetzt, vor dem ersten Anstrich.
     _test/zeitung.mjs misst nach, dass index/impressum/entitaet unveraendert bleiben — in
     700/850/1400 px, und die 850 steht da, weil ich genau diesen Bereich heute frueh schon
     einmal beschaedigt hatte.
   ──────────────────────────────────────────────────────────────────────────── */
html.atlas .tt-header { flex-wrap: nowrap; gap: 8px; }
/* `min-width:0` ist der eigentliche Schalter: ohne ihn schrumpft ein Flex-Kind NIE unter seinen
   Inhalt, egal welches flex-shrink dransteht. Mit ihm darf die Mitte weichen. */
html.atlas .tt-header-left  { min-width: 0; flex: 1 1 auto; overflow: hidden; }
html.atlas .tt-header-right { min-width: 0; flex: 0 0 auto; }
/* Der Titel gibt zuerst nach — er ist Schmuck, die Bedienung ist es nicht. */
html.atlas .tt-header-title { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Enger wird nicht abgeschnitten, sondern WEGGELASSEN — von hinten nach vorn, nach Wichtigkeit.
   Was verschwindet, ist anderswo erreichbar; was bleibt, ist es nicht.

   ⚠ DIE GRENZEN SIND GERECHNET, und die Rechnung steht hier. Gemessen auf 1920 px:
       links  1229 = SYS 69 · Darstellung 243 · Lage 60 · Radio 66 · Ortssuche 177 (+ Abstaende)
       rechts  320 = Uhr 72 · Ansichten 234 (davon btn-radar ALLEIN 92)
       Titel   130
     Voll gebraucht: rund 1680 px. Alles darunter muss etwas weglassen — und die teuersten
     Posten sind ausgerechnet die entbehrlichsten:
       1680 → SYS::READY (69) und Uhr (72) raus                = 1539
       1540 → das Etikett „wird ueberarbeitet" am toten RADAR   ≈ 1480
       1480 → Titel (130)                                       = 1350
       1350 → RADAR ganz (die Ansicht ist dreifach stillgelegt)  ≈ 1260
       1260 → Radio (66)                                        = 1194   … usw.
     ⚠ Ich habe die Schwellen NICHT auf runde Zahlen gelegt, sondern auf diese Summen. Runde
       Zahlen sind der Grund, warum die alte 768 an der Tablet-Flotte (800-834) vorbeizielte. */
@media (max-width: 1680px) {
  html.atlas .tt-sys, html.atlas .tt-clock, html.atlas .tt-led { display: none; }
}
@media (max-width: 1540px) {
  html.atlas #btn-radar .view-badge,
  html.atlas #btn-radar small,
  html.atlas #btn-radar span:not(.view-name) { display: none; }
}
@media (max-width: 1480px) {
  html.atlas .tt-header-title { display: none; }
}
@media (max-width: 1350px) {
  /* Die Ansicht ist dreifach stillgelegt (disabled + zwei tote Codepfade). Ein Knopf, der nichts
     tut, ist auf einem engen Schirm der erste, der weichen darf — erreichbar bleibt sie ueber
     nichts, aber sie tut ja auch nichts. */
  html.atlas #btn-radar, html.atlas #btn-radar + .view-sep { display: none; }
}
@media (max-width: 1260px) {
  html.atlas #sa-radio-btn { display: none; }        /* Radio laeuft weiter, nur der Knopf weicht */
  html.atlas .tt-header { padding: 0 8px; gap: 6px; }
}
@media (max-width: 1000px) {
  html.atlas #disp-terrain { display: none; }        /* nur im 3D-Globus wirksam */
  html.atlas #sa-such-feld { width: 110px; }
}
@media (max-width: 820px) {
  html.atlas #sa-such-feld { width: 84px; }
  html.atlas #disp-select { max-width: 104px; }
}

/* ── DIE KURZFASSUNG ────────────────────────────────────────────────────────
   Was auf einem Telefon bleibt: die KARTE, die LAGEN-WAHL und das LAND-DETAIL. Was geht:
   die 31 Ebenen-Checkboxen, die Zeitachse, der Graph.

   ⚠ NICHT WEIL ES NICHT PASST. Gemessen auf 390x844: null Ueberlappungen, beide Schienen docken
     sauber an, die Achse sitzt. Es passt — es ist nur nicht zu BEDIENEN. CHR, gefragt ob die
     Reduktion nach dem Raster noch noetig sei: „trotzdem reduzieren."
   ⚠ Und es wird GESAGT, nicht stillschweigend weggelassen (#sa-kurzfassung, sa-layers.js):
     „Kurzfassung — ein groesserer Schirm zeigt alle Ebenen, die Zeitachse und den Graphen."
     Wer nicht sagt, dass er beschneidet, laesst den Besucher glauben, das sei alles, was es gibt.
   ⚠ Die Klasse setzt `kurzfassungsGeraet()` aus `screen`, NICHT aus der Fensterbreite — ein
     td1-Sendepanel ist ein schmales Fenster auf einem grossen Schirm.
   ──────────────────────────────────────────────────────────────────────────── */
html.kurzfassung #map-controls-panel,
html.kurzfassung #sa-timebar,
html.kurzfassung #map-burger-btn { display: none; }

/* ⚠⚠ DIE SPALTEN SETZT DIE KURZFASSUNG SELBST — und das ist die Lehre aus einem Bruch, den CHR
   am Geraet gefunden hat: „also smartphone quer funktioniert nicht".
   Hier stand nur `grid-template-rows`, und die Zuweisung `grid-area: 1/1/2/2` unten verliess sich
   darauf, dass der Zweig `@media (max-width: 732px)` das Raster einspaltig gemacht hat.
   AUF EINEM TELEFON QUER (844x390) GREIFT DIESER ZWEIG NICHT. Das Raster hatte dort weiter DREI
   Spalten, und die Karte wurde an Spalte 1 geheftet — die ist `auto` breit und schrumpft auf
   ihren Inhalt. GEMESSEN: die Karte war 58 PIXEL breit, auf einem 844-px-Schirm.
   ⇒ Eine Klasse, deren Wirkung von einer Bildschirmbreite abhaengt, ist keine Klasse, sondern
     eine Wette. Sie setzt ihre Voraussetzung jetzt selbst.
   ⚠ Dieselbe Fehlerklasse wie der Umbruchpunkt heute frueh: richtige Regel, falscher
     Geltungsbereich. Zwei Regelwerke ueberlagern sich, und nur eines kennt die Voraussetzung
     des anderen. */
html.kurzfassung .main-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
/* ⚠⚠ UMENTSCHIEDEN AM 2026-09-02 — DIE RECHTE SCHIENE FAELLT AM TELEFON GANZ WEG.
   Hier stand bis heute: „Die rechte Schiene bleibt — sie traegt das Land-Detail, und das ist der
   halbe Zweck. Sie liegt in der Kurzfassung ueber der Karte statt neben ihr (eine Spalte)."
   Das war am 01.09. richtig gedacht und am Geraet falsch. CHR mit einem Screenshot vom Telefon:
   „mobiltelefon bekommt die hinweise, und man kann einfach nur die lagen wechseln. Keine
   seitenpannels nix nur den drehbaren 2d globe."
   ⇒ Der Grund ist nicht der Platz, sondern die BEDIENBARKEIT. Die Schiene lag mit 62 vw ueber der
     Karte, der Detail-Kasten fuellte den Schirm, und die Karte — der einzige Grund, warum jemand
     den Atlas am Telefon oeffnet — war das Kleinste im Bild.
   ⚠ DAS LAND-DETAIL IST NICHT WEG, es hat einen anderen Ort: ein Tipp beantwortet sich als EINE
     Hinweiszeile im Meldungsstapel (`showHint`, s. sa-layers.js). Wer tippt, bekommt eine Antwort
     — sonst haelt man die Karte fuer kaputt. Was das Telefon dafuer NICHT mehr zeigt, sagt die
     Kurzfassungs-Ansage ausdruecklich („mindestens ein Tablet"), denn beschneiden ist erlaubt,
     verschweigen nicht.
   ⚠ NUR DAS TELEFON. Am Schreibtisch und am Tablet bleibt die Schiene unveraendert — das Tablet
     ist laut CHR gut geworden und wird nicht angefasst. `schienen.mjs` prueft genau das und muss
     gruen bleiben; wird sie rot, ist hier zu breit ausgeblendet. */
html.kurzfassung .sidebar,
html.kurzfassung #sidebar-toggle-btn,
html.kurzfassung #map-panel-backdrop { display: none !important; }

/* ⚠ DER „QUER HALTEN"-HINWEIS VERSCHWINDET AUF DEM TELEFON.
   CHR: „wir schreiben ja quer halten am telefon und dann ist es eigentlich broken."
   Die Kette war Ende zu Ende nachgemessen: hochkant erschien der Rat, nach dem Drehen war die
   Karte 58 px breit. Aber auch nach dem Grid-Fix bleibt er FALSCH — er stammt vom 2026-08-13 und
   war fuer TABLETS gedacht, wo quer wirklich mehr Platz hat (1280x800 gegen 800x1280, die
   Schienen passen nebeneinander). Auf einem Telefon ist 844x390 fuer eine Karte SCHLECHTER als
   390x844: die Kopfzeile nimmt 44 der 390 px, und in der Kurzfassung gibt es keine Schiene, die
   man durch Drehen gewinnen koennte.
   ⇒ Ein Rat, dessen Begruendung fuer das angesprochene Geraet nicht gilt, gehoert weg — nicht
     umformuliert. Auf dem TABLET bleibt er, dort stimmt er. */
html.kurzfassung #sa-hochformat { display: none !important; }
/* `#sidebar-toggle-btn` stand hier mit in der Zuweisung — er ist seit dem 02.09. ausgeblendet
   (s. oben) und braucht keine Rasterzelle mehr. */
html.kurzfassung #map-container,
html.kurzfassung #graph-container,
html.kurzfassung #radar-container { grid-area: 1 / 1 / 2 / 2; }

/* Kopfzeile auf das Noetigste: Darstellung waehlen und Lage waehlen. Alles andere ist entweder
   Schmuck oder es steuert etwas, das hier nicht da ist. */
/* ⚠ SEIT 2026-09-02 BLEIBEN NUR DREI GRIFFE (CHR: „nur den drehbaren 2d globe"):
     ◈ LAGE  — der einzige Weg zurueck in die Lagenwahl, also DER Bedienweg am Telefon
     Sprache — der Waehler erscheint nur beim ERSTEN Besuch; ohne ihn bliebe eine Fehlwahl fuer
               immer stehen, und zwar in einer Sprache, die man nicht liest
     ⊙       — zurueck auf den Weltblick. Auf Touch der wichtigste Ausweg: Pinch und Doppeltipp
               geben zwei Wege HINEIN und keinen zurueck (B30, CHR am Geraet 2026-09-01)
   Was zusaetzlich faellt:
     #disp-select  — die Darstellung ist am Telefon FEST auf den 2D-Globus. Tiefenlinks (?view=,
                     ?lens=) bleiben wirksam; es verschwindet der WAEHLER, nicht der Codepfad —
                     derselbe Grundsatz wie bei den Experten-Lagen.
     #disp-rotate  — Auto-Rotation ist oeffentlich ohnehin aus (e2e-950-touch prueft das). Ein
                     Schalter fuer eine Schauwirkung kostet 44 px, die die Karte braucht.
     #disp-design  — Geschmacksschalter. Am Telefon ist jeder Platz Karte. */
html.kurzfassung #sa-radio-btn,
html.kurzfassung #disp-terrain,
html.kurzfassung #disp-select,
html.kurzfassung #disp-rotate,
html.kurzfassung #disp-design,
html.kurzfassung #sa-ortssuche,
html.kurzfassung .tt-header-title,
html.kurzfassung #btn-graph,
html.kurzfassung #btn-radar,
html.kurzfassung .view-sep,
/* ⚠ ZWEI, DIE BISHER UEBERSEHEN WURDEN (gefunden bei der Inventur am 2026-09-02):
     #btn-karte  — der Ansichts-Umschalter „KARTE". Graph und Radar sind hier ausgeblendet, also
                   schaltet er von nichts auf nichts. Ein Knopf, der nichts bewirkt, ist schlimmer
                   als keiner. ⚠ Der Klick-Pfad bleibt: `#btn-lage` klickt ihn programmatisch, und
                   ein `display:none`-Knopf nimmt einen JS-Klick weiterhin an — gepruefte Absicht.
     .tt-footer  — die Fusszeile blendete bisher NUR `html.cockpit` aus. Am Telefon stand sie
                   unter der Karte und ist der wahrscheinlichste Teil des leeren unteren Drittels
                   in CHRs Screenshot vom 2026-09-02. */
html.kurzfassung #btn-karte,
html.kurzfassung .tt-footer { display: none; }
html.kurzfassung .tt-header { padding: 0 6px; gap: 4px; }

/* ⚠ DAS TELEFON BEKOMMT SECHS LAGEN, NICHT ELF (CHR-Entscheid 2026-09-02: „das Menü um Features
   leichter machen, nur beim Telefon").
   Der Experten-Block ist bereits ein <details> — er wird hier nicht zugeklappt, sondern GAR NICHT
   ANGEBOTEN. Der Unterschied zaehlt: ein zugeklapptes <details> auf 390 px ist ein Griff, der beim
   Oeffnen fuenf weitere Kacheln unter den Schirmrand schiebt, und genau das war der gemessene
   Zustand (letzte Kachel bei y=1195 auf einem 844-px-Schirm).
   ⚠ Das ist dieselbe Haltung wie bei der Kurzfassung selbst: beschneiden ist erlaubt, VERSCHWEIGEN
     nicht. Die Ansage „◈ Kurzfassung — ein groesserer Schirm zeigt alle Ebenen, die Zeitachse und
     den Graphen" steht ohnehin da; die Experten-Lagen fallen sichtbar darunter.
   ⚠ Die Tiefenlinks bleiben: `?lens=ueberwachung` & Co. gehen an dieser Kachel vorbei und wirken
     auch auf dem Telefon. Der Kernel benutzt genau diesen Weg. */
html.kurzfassung #sa-lens-experte { display: none; }

/* ⚠ 3D BLEIBT GESPERRT, MIT GRUND — und der Grund ist ein anderer als der Platz: MapLibre samt
   Relief-Kacheln ist auf Telefon-Grafik nicht zu verantworten. Das ist eine Leistungsfrage, und
   sie waere auch auf einem breiteren Telefon dieselbe. `disabled` allein saehe aus wie ein
   Fehler; der title sagt, warum. */
html.kurzfassung #disp-select option[value="globe3d"] { display: none; }

/* ══ #950 G — DIE BOOT-BUEHNE ═══════════════════════════════════════════════════════════════
   CHR: die Seite soll sich melden „wie ein hochfahrender alter Rechner". Bis heute lud sie wortlos.

   ⚠ DIE UNSCHAERFE SITZT HIER, NICHT AUF DER KARTE. `backdrop-filter` auf der Buehne laesst die
     drei Canvas darunter unangetastet; ein `filter: blur()` auf #map-container zwaenge sie bei
     laufender Rotation PRO FRAME in eine Neu-Rasterisierung. Und der Container darf NIE
     display:none/visibility:hidden bekommen — `fit()` liest getBoundingClientRect(), bei 0x0 faellt
     die Projektion auf Math.max(1,…) und der Globus kommt nicht wieder.
   ⚠ Bauform eines echten TORES (fixed, inset 0, z-index 9999) wie #sa-warteraum — nicht die des
     Banners, das nur innerhalb der Karte liegt. Aber ANDERS ALS DAS TOR verschwindet sie von
     selbst: sie haelt niemanden fest, sie erzaehlt nur, was gerade passiert (s. „Menue oder Tor"
     in SCHATTENATLAS_LAYER.md §7e).
   ⚠ Doppelt gesichert gegen das Sendebild: `bootBuehneNoetig()` baut sie dort gar nicht erst, und
     die Regel unten faengt den Fall, dass jemand sie doch erzeugt. Die Ausblendliste von
     html.cockpit nennt Elemente beim NAMEN — ein neues waere dort sonst nicht enthalten. */
#sa-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 5, 2, 0.55);
  backdrop-filter: blur(3px);
  transition: opacity .6s ease, backdrop-filter .6s ease;
  /* ⚠ SIE FAENGT KLICKS AB, SOLANGE SIE STEHT. Hier stand `pointer-events: none` mit der
     Begruendung „die Buehne informiert, sie faengt nichts ab" — und genau das war falsch:
     gemessen liess sich die Lagenwahl DURCH die unscharfe Buehne hindurch anklicken
     (`elementFromPoint` traf die Kachel, nicht die Buehne). Eine Flaeche, die den Blick verdeckt,
     aber den Finger durchlaesst, ist eine Falle. Beim Ausblenden gibt sie den Durchgriff frei,
     damit die letzten 650 ms nicht blockieren. */
  pointer-events: auto;
}
#sa-boot.weg { opacity: 0; backdrop-filter: blur(0); pointer-events: none; }
html.cockpit #sa-boot { display: none !important; }

#sa-boot .boot-kasten {
  min-width: min(360px, 86vw);
  padding: 20px 24px;
  background: var(--at-grund-kasten, rgba(12, 10, 8, .96));
  border: 1px solid var(--at-linie, rgba(255, 176, 0, .18));
  box-shadow: 0 0 30px rgba(0, 0, 0, .7);
  font-family: 'Share Tech Mono', monospace;
}
#sa-boot .boot-kopf {
  font-family: 'VT323', monospace;
  font-size: 26px;
  letter-spacing: .06em;
  color: var(--at-schrift-hell, #ffd060);
}
#sa-boot .boot-sub {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--at-schrift-leise, rgba(255, 176, 0, .55));
  margin: 2px 0 14px;
}
#sa-boot .boot-liste { list-style: none; margin: 0; padding: 0; }
#sa-boot .boot-liste li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: .08em;
  padding: 3px 0;
  color: var(--at-schrift-fern, rgba(255, 176, 0, .35));
  transition: color .2s;
}
#sa-boot .boot-liste li.laeuft { color: var(--at-schrift, #ffb000); }
#sa-boot .boot-liste li.ok     { color: var(--at-schrift, #ffb000); }
#sa-boot .boot-liste li.fehler { color: #e0563c; }
#sa-boot .boot-marke { font-variant-numeric: tabular-nums; }
#sa-boot .boot-name  { flex: 1; }
#sa-boot .boot-wert  { color: var(--at-schrift-leise, rgba(255, 176, 0, .55)); font-variant-numeric: tabular-nums; }
#sa-boot .boot-fuss {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--at-schrift-leise, rgba(255, 176, 0, .55));
}

/* ⚠ #424: wer Bewegung abbestellt hat, bekommt sie auch hier nicht. Die Buehne bleibt sichtbar
   und verschwindet ohne Ueberblendung — die Aussage haengt am Text, nicht an der Animation. */
@media (prefers-reduced-motion: reduce) {
  #sa-boot { transition: none; }
}

#sa-kurzfassung {
  display: flex; align-items: center; gap: 10px;
  background: var(--at-grund-kasten); border: 1px solid var(--at-linie);
  color: var(--at-schrift); font-family: 'Share Tech Mono', monospace;
  font-size: 10.5px; letter-spacing: .04em; padding: 7px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
/* ⚠ ZUM DRITTEN MAL AN EINEM TAG DIESELBE REGEL: der Wegtipp-Knopf war 13x12 PIXEL. Gemessen am
   2026-09-02 auf dem Telefon — zusammen mit dem Banner-Ausgang (214x13) und dem Schliessknopf der
   Schiene (44x44, aber verdeckt). Die Hausregel aus #424 sagt 44, und sie gilt fuer JEDE Flaeche,
   die ein Finger treffen soll, nicht nur fuer die, an die man beim Aufschreiben gedacht hat.
   ⚠ Diese Ansage schwebt ueber der Karte UND ueber einer geoeffneten Schiene (gemessen: sie
     ueberlappt sie). Das ist als Meldung in Ordnung — sie ist wegtippbar und die Entscheidung wird
     gemerkt (localStorage). Aber genau deshalb MUSS der Wegtipp sicher treffen: eine Meldung, die
     man nicht schliessen kann, ist keine Meldung mehr, sondern ein Hindernis. */
#sa-kurzfassung button {
  background: none; border: none; color: var(--at-schrift-leise);
  cursor: pointer; font-size: 12px; line-height: 1;
  min-width: 44px; min-height: 44px; padding: 0;
  margin: -12px -6px -12px 0;   /* die Flaeche waechst nach aussen, der Kasten bleibt schmal */
}

/* ── DAS RASTER ──────────────────────────────────────────────────────────────
   #950, CHR: "die ganze seite muss sich anpassen und mitskalieren, der rechte
   seitenpannl darf auch ausblendbar werden."

   VORHER: eine Flex-Zeile aus Karte + Sidebar, und ACHTZEHN absolute Kaesten OBEN DRAUF,
   positioniert mit vierzehn handgesetzten Konstanten (bottom:8, 74, 84, 82, 32, 14, 16, 20,
   top:56, 10 ...). Keine wusste von den anderen. Gemessen: 18 Ueberlappungen in acht
   Geraeteformaten; sauber waren AUSSCHLIESSLICH Schreibtisch und Sendebild.

   JETZT: drei Spalten und zwei Zeilen. Links steuern, rechts lesen, unten die Zeit, in der
   Mitte die Karte. Die Ueberlappungen sind danach nicht wegkonfiguriert, sondern STRUKTURELL
   UNMOEGLICH — was nebeneinander steht, kann sich nicht ueberdecken.

     ┌──────────┬───────────────────┬──────────┐
     │ Schiene  │      K A R T E    │ Schiene  │   Zeile 1
     │ (steuern)│  graph │ radar    │ (lesen)  │
     ├──────────┴───────────────────┴──────────┤
     │           Z E I T A C H S E             │   Zeile 2, ueber alle Spalten
     └─────────────────────────────────────────┘

   ⚠ minmax(0, 1fr) und nicht 1fr: eine Rasterspalte hat `min-width: auto`, waechst also mit
     ihrem Inhalt und schiebt die Schienen aus dem Bild. Bei einer Karte mit Canvas faellt das
     erst auf einem schmalen Schirm auf. Dasselbe fuer die Zeilenhoehe.
   ──────────────────────────────────────────────────────────────────────────── */
.main-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;   /* Anker fuer das, was noch schwebt (Backdrop, Sheets) */
}
/* ⚠ Die Zuweisung steht bewusst HIER, direkt beim Raster, und nicht bei den einzelnen Flaechen:
   wer das Raster liest, sieht in vier Zeilen, was wo sitzt. Verstreut man sie, muss man vier
   Stellen zusammensuchen, um eine Frage zu beantworten. */
#map-controls-panel { grid-area: 1 / 1 / 2 / 2; }
#map-container,
#graph-container,
#radar-container     { grid-area: 1 / 2 / 2 / 3; }
.sidebar             { grid-area: 1 / 3 / 2 / 4; }
/* Die Zeitachse gilt fuer die GANZE Karte — also bekommt sie die ganze Breite.
   ⚠ position:static hier, weil der Inline-Stil sie absolut setzt; im Raster braucht sie das
     nicht mehr. Der Cockpit-Zweig setzt sie ausdruecklich wieder absolut. */
#sa-timebar {
  grid-area: 2 / 1 / 3 / 4;
  position: static;
  width: auto;
  transform: none;
}

/* Der Einzugsplatz fuer Registry-Ebenen (renderFilterUI). Traegt nichts und nimmt nichts ein —
   `display:none` steht hier ausdruecklich, damit ein leeres <div> nicht doch ueber eine
   Geschwisterregel Abstand erbt. Ein unsichtbares Element, das Platz braucht, ist die Sorte
   Fehler, die man nur beim Nachmessen findet. */
.reg-anker { display: none; }

/* ── DIE GRIFFE ─────────────────────────────────────────────────────────────
   CHR: "der rechte seitenpannl darf auch ausblendbar werden."
   Beide Schienen sind bei JEDER Breite klappbar — bis zum 2026-09-01 ging das nur unter dem
   Umbruchpunkt, und die Knoepfe dafuer waren daruber `display:none`.

   ⚠ SIE SITZEN IN DER KARTENZELLE, NICHT AM FENSTER. Vorher: `position:absolute; bottom:16px`
     relativ zum Kartencontainer — und damit, seit die Zeitachse die untere Zeile ist,
     zwangslaeufig auf ihr (gemessen 44x44 px, beidseitig). Als Rasterkinder der MITTLEREN
     Spalte koennen sie weder die Achse noch eine Schiene beruehren: die Zelle endet, wo die
     Nachbarn anfangen. Wieder Bauform statt Zahl. */
#map-burger-btn,
#sidebar-toggle-btn {
  grid-area: 1 / 2 / 2 / 3;
  align-self: end;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  z-index: 1100;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  box-shadow: 0 0 18px var(--amber-glow);
  color: var(--amber-bright);
  font-family: var(--font-mono);
  font-size: 16px;
  cursor: pointer;
  border-radius: 2px;
}
#map-burger-btn     { justify-self: start; margin-left: 14px; }
#sidebar-toggle-btn { justify-self: end;   margin-right: 14px; }

/* ── ZUGEKLAPPT ─────────────────────────────────────────────────────────────
   Die Schiene faellt auf einen schmalen Streifen statt auf 0. Das ist Absicht: bei Breite 0
   waere der Griff das einzige, was noch von ihr zeugt — und ein Bedienelement, das erst nach
   dem Suchen gefunden wird, ist keins. Der Streifen zeigt, dass da etwas ist.
   Die Karte gewinnt trotzdem den ganzen Rest (rund 250-300 px). */
#map-controls-panel.zu,
.sidebar.zu {
  width: 26px;
}
#map-controls-panel.zu > *,
.sidebar.zu > * { display: none; }
#map-controls-panel.zu::after,
.sidebar.zu::after {
  content: "";
  display: block;
  height: 100%;
  background: repeating-linear-gradient(180deg,
    var(--at-linie) 0 8px, transparent 8px 16px);
  opacity: .5;
}
/* ── LINKE SCHIENE — STEUERN ────────────────────────────────────────────────
   ⚠ DIE ID BLEIBT. Sie steht namentlich in der Ausblendliste `html.cockpit`
     (schattenatlas.html ~Z. 41). Eine Umbenennung stellte das Menue ins Sendebild.
   Breite waechst STUFENLOS mit (CHR: "mitskalieren") statt an einem Umbruchpunkt zu springen —
   daran ist die alte 768 gescheitert: die Tablet-Flotte liegt hochkant bei 800-834. */
#map-controls-panel {
  width: clamp(212px, 19vw, 320px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-bright);
  overflow: hidden;
  transition: width .22s ease;
}

#map {
  position: absolute;
  inset: 0;
  background: #040300;
}

/* ── Griffe: siehe „DIE GRIFFE" oben beim Raster ────────────────────────────
   Hier standen bis zum 2026-09-01 zwei Regeln, die beide Knoepfe `display:none` setzten und sie
   erst unter dem Umbruchpunkt freigaben — deshalb war auf einem 800-px-Tablet KEINE der beiden
   Schienen zu schliessen. Sie sind ersatzlos weg: es gibt jetzt EINE Stelle, an der steht, wie
   die Griffe aussehen und wo sie sitzen. Zwei Stellen fuer dieselbe Sache waren der Grund, warum
   der alte Zustand so schwer zu ueberblicken war. */

#map-burger-btn:hover {
  background: var(--amber-glow);
  color: var(--amber-bright);
}

/* ── Backdrop ───────────────────────────────────────────────── */
#map-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}
#map-panel-backdrop.open { display: block; }

/* ── Map Controls Panel Header (Mobile) ─────────────────────── */
.map-panel-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-bright);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.map-panel-close {
  background: none;
  border: none;
  color: var(--amber-dim);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  transition: color 0.15s;
}
.map-panel-close:hover { color: var(--amber); }


/* ── Layer Controls (Desktop: absolute bottom-left) ─────────── */
/* Beide Kaesten stehen jetzt UNTEREINANDER in der Schiene, statt absolut ueber der Karte.
   Sie behalten ihr Aussehen (Rahmen, Grund) — nur der Rahmen zur Karte hin faellt weg, den
   traegt jetzt die Schiene selbst. */
.layer-controls {
  flex: 1 1 auto;
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 10px 12px;
  min-width: 0;
  pointer-events: all;
  overflow-y: auto;
}

.layer-title {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.layer-controls label {
  display: block;
  color: var(--amber-dim);
  cursor: pointer;
  padding: 3px 0;
  font-size: 11px;
  transition: color 0.2s;
}
.layer-controls label:hover { color: var(--amber); }
.layer-controls input[type="checkbox"] { accent-color: var(--amber); margin-right: 5px; }

/* ── v3.1: Lage-Schiene (4 Menüs) + Rollen-Chips (Filter links) ── */
.lage-rail { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 9px; }
.lage-btn {
  flex: 1 1 calc(50% - 3px);
  background: var(--at-grund-hoch); color: var(--amber-dim);
  border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em;
  padding: 5px 3px; cursor: pointer; transition: all 0.15s;
}
.lage-btn:hover { color: var(--amber); border-color: var(--border-bright); }
.lage-btn.active {
  background: var(--amber-glow); color: var(--amber);
  border-color: var(--border-bright); box-shadow: 0 0 6px var(--amber-glow);
}
.lage-hdr { color: var(--amber); }
.rollen-hint { color: var(--amber-dim); font-size: 8px; letter-spacing: 0; opacity: 0.7; }
#rollen-filter { display: flex; flex-wrap: wrap; gap: 4px; max-width: 230px; margin-top: 2px; }
.rolle-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 176, 0, 0.06); border: 1px solid var(--border);
  color: var(--amber-dim); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.04em; padding: 2px 6px; cursor: pointer; transition: all 0.15s;
}
.rolle-chip:hover { color: var(--amber); border-color: var(--border-bright); }
.rolle-chip.off { opacity: 0.45; border-color: #5a1a1a; }
.rolle-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.weitere-ebenen > summary {
  cursor: pointer; color: var(--amber-dim); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; padding: 4px 0; list-style: none;
}
.weitere-ebenen > summary::-webkit-details-marker { display: none; }
.weitere-ebenen > summary::before { content: "▸ "; }
.weitere-ebenen[open] > summary::before { content: "▾ "; }
.weitere-ebenen[open] > summary { color: var(--amber); }

/* ── v3.2: 4 offene Lens-Gruppen (aufklappbar, freie Mehrfachauswahl) ── */
.lens-group { margin-top: 7px; border-top: 1px solid var(--border); }
.lens-group > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 4px;
}
.lens-group > summary::-webkit-details-marker { display: none; }
.lens-group > summary .lens-name {
  color: var(--amber); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
}
.lens-group > summary .lens-name::before { content: "▾ "; color: var(--amber-dim); }
.lens-group:not([open]) > summary .lens-name::before { content: "▸ "; }
.set-btn {
  background: var(--at-grund-hoch); color: var(--amber-dim);
  border: 1px solid var(--border); font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.05em; padding: 2px 7px; cursor: pointer; transition: all 0.15s;
}
.set-btn:hover { color: var(--amber); border-color: var(--border-bright); background: var(--amber-glow); }

/* ── Legende (Desktop: absolute bottom-right) ───────────────── */
.legende {
  flex: 0 1 auto;
  min-height: 0;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  box-shadow: none;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  pointer-events: all;
  overflow-y: auto;
}

.legende-title {
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.legende-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--amber-dim);
  margin-bottom: 4px;
}

.legende-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legende-kreis {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(170, 170, 180, 0.8);
  flex-shrink: 0;
}

.legende-sep {
  border-top: 1px solid var(--border);
  margin: 5px 0;
}

/* ── Sidebar ────────────────────────────────────────────────── */
/* ── RECHTE SCHIENE — LESEN ─────────────────────────────────────────────────
   ⚠ `html.cockpit-welt .sidebar { width: 380px }` (schattenatlas.html) muss diese Regel
     schlagen — zwei Klassen gegen eine, also gewinnt sie. Gemessen, nicht angenommen:
     _test/moebel.mjs faehrt das Sendebild mit. */
.sidebar {
  width: clamp(224px, 20vw, 340px);
  min-width: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-bright);
  box-shadow: -4px 0 20px rgba(255, 176, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .22s ease;
}

.sidebar-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-bright);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;   /* Anker fuer den Schliessknopf, s. unten */
}

/* ⚠⚠ DER RÜCKWEG AUS DER SCHIENE (CHR am Gerät, 2026-09-02).
   Auf dem Telefon deckte die Schiene ihren eigenen Schliessknopf zu: gemessen auf 390×844 war
   `#sidebar-toggle-btn` bei geoeffneter Schiene „VERDECKT von sidebar-actions" — sichtbar, 44×44 px
   gross und unerreichbar. Deshalb bekommt der KOPF der Schiene denselben ✕, den die linke Schiene
   seit je hat (`.map-panel-close` in `.map-panel-header`).

   ⚠ ER ERSCHEINT NUR, WENN DIE SCHIENE DIE KARTE ÜBERLAGERT — und diese Bedingung kommt NICHT aus
     einer Media Query, sondern aus der gemessenen Geometrie: `rueckwegPruefen()` in
     schattenatlas.html vergleicht zwei Rechtecke und setzt `.ueberlagert`. Am 2026-09-01 hat eine
     Regel, die an einer Bildschirmbreite hing, schon einmal die Karte auf 58 Pixel gebracht; eine
     zweite Wette dieser Art gibt es hier nicht.
   ⚠ Am Schreibtisch, wo die Schiene NEBEN der Karte liegt, bleibt der Knopf weg — dort deckt sie
     nichts zu, und ein zweiter Griff neben dem vorhandenen waere nur Rauschen. */
.sidebar-close { display: none; }
.sidebar.ueberlagert .sidebar-close {
  display: block;
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 44px;      /* #424: Trefferflaeche fuer Finger, nicht fuer Mauszeiger */
  min-height: 44px;
  line-height: 44px;
  text-align: center;
  z-index: 2;
}
.sidebar.ueberlagert .sidebar-header { padding-right: 52px; }
/* Dieselbe Bedingung fuer die linke Schiene — sie hatte ihren Kopf bisher nur unter einem
   Umbruchpunkt (`@media (max-width: 732px)`), also aus demselben Zufall heraus, der rechts
   danebenging. Die Media-Regel bleibt stehen; diese hier greift zusaetzlich, wo sie zaehlt. */
#map-controls-panel.ueberlagert .map-panel-header { display: flex; }

.sidebar-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--amber);
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 176, 0, 0.5);
}

.sidebar-tabs {
  display: flex;
  gap: 3px;
}

.tab-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  color: var(--amber-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 4px 2px;
  border-radius: 1px;
  transition: all 0.15s;
}
.tab-btn:hover, .tab-btn.active {
  background: var(--amber-glow);
  border-color: var(--border-bright);
  color: var(--amber);
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.tab-pane { display: none; padding: 14px; }
.tab-pane.active { display: block; }

.sidebar-placeholder {
  text-align: center;
  margin-top: 50px;
  color: var(--amber-dim);
}

.placeholder-icon {
  font-family: var(--font-crt);
  font-size: 48px;
  margin-bottom: 16px;
  color: rgba(255, 176, 0, 0.25);
  text-shadow: 0 0 20px rgba(255, 176, 0, 0.15);
}

.sidebar-placeholder p {
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}

.placeholder-sub { font-size: 10px; color: rgba(255, 176, 0, 0.35); }

/* Land-Detail */
.land-detail h2 {
  font-family: var(--font-crt);
  font-size: 28px;
  color: var(--amber);
  margin-bottom: 4px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(255, 176, 0, 0.5);
}
.land-coords {
  color: var(--amber-dim);
  font-size: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.ereignis-count {
  color: var(--red);
  font-size: 12px;
  margin-bottom: 10px;
}
.ereignis-list { list-style: none; }
.ereignis-item {
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
  font-size: 11px;
  color: var(--amber-dim);
  cursor: pointer;
  transition: color 0.15s;
}
.ereignis-item:hover { color: var(--amber); }
.ereignis-date {
  color: rgba(255, 176, 0, 0.4);
  font-size: 10px;
  display: block;
  margin-bottom: 2px;
}

/* Quellen */
.keine-daten { color: var(--amber-dim); font-size: 11px; text-align: center; margin-top: 20px; }
.treffer-count { color: var(--red); font-size: 12px; margin-bottom: 12px; }
.quellen-header {
  color: rgba(255, 176, 0, 0.5);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

/* v3.1: Entitäts-Beschreibung (zurück aus v1) + demoted externe Quellen */
.entity-beschreibung {
  color: var(--amber-dim);
  font-size: 11px;
  line-height: 1.5;
  margin: 8px 0 10px;
  padding: 7px 10px;
  border-left: 2px solid var(--border-bright);
  background: rgba(255, 176, 0, 0.04);
}
.weitere-quellen { margin-top: 12px; }
.weitere-quellen > summary {
  cursor: pointer;
  color: var(--amber-dim);
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 4px 0;
  list-style: none;
}
.weitere-quellen > summary::-webkit-details-marker { display: none; }
.weitere-quellen > summary::before { content: "▸ "; }
.weitere-quellen[open] > summary::before { content: "▾ "; }
.weitere-quellen[open] > summary { color: var(--amber); }

.quelle-list { list-style: none; }
.quelle-item {
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
  font-size: 10px;
}
.quelle-link {
  color: var(--amber-dim);
  text-decoration: none;
  display: block;
  transition: color 0.15s;
  word-break: break-word;
}
.quelle-link:hover { color: var(--amber); }
.quelle-datum {
  color: rgba(255, 176, 0, 0.35);
  font-size: 9px;
  display: block;
  margin-top: 2px;
}

/* Verbindungen */
.verbindung-item {
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 1px;
}
.verbindung-item:hover { background: var(--amber-glow); padding-left: 6px; }
.verbindung-name { color: var(--amber); font-size: 11px; margin-bottom: 2px; }
.verbindung-meta { color: var(--amber-dim); font-size: 10px; }
.verbindung-typ {
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 1px;
  font-size: 9px;
}

/* Rollen */
.rollen-favoriten-trenner {
  font-size: 10px;
  color: rgba(255, 176, 0, 0.35);
  letter-spacing: 0.15em;
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

.rollen-karte {
  border: 1px solid var(--border);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 176, 0, 0.03);
  border-radius: 1px;
}
.rollen-karte-name { color: var(--amber); font-size: 12px; margin-bottom: 4px; }
.rollen-karte-bar-wrap { height: 3px; background: rgba(255,176,0,0.1); border-radius: 1px; margin: 6px 0; }
.rollen-karte-bar { height: 100%; background: var(--amber-dim); border-radius: 1px; }
.rollen-karte-meta { color: var(--amber-dim); font-size: 10px; }

.favorit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.favorit-link { color: var(--amber-dim); cursor: pointer; transition: color 0.15s; }
.favorit-link:hover { color: var(--amber); }
.favorit-del { color: rgba(255, 68, 34, 0.5); cursor: pointer; font-size: 14px; padding: 0 4px; }
.favorit-del:hover { color: var(--red); }

/* ── Sidebar Actions / Footer ───────────────────────────────── */
.sidebar-actions {
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  gap: 6px;
}

.action-btn {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 1px;
  cursor: pointer;
  color: var(--amber-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  transition: all 0.15s;
}
.action-btn:hover {
  background: var(--amber-glow);
  border-color: var(--border-bright);
  color: var(--amber);
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  background: var(--bg-secondary);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--amber-dim);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.status-dot.active {
  background: var(--green);
  box-shadow: 0 0 5px var(--green);
}
.status-dot.error { background: var(--red); box-shadow: 0 0 5px var(--red); }


/* ── Graph Container ────────────────────────────────────────── */
#graph-container {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: #060400;
}


/* ── Radar Container ────────────────────────────────────────── */
#radar-container {
  display: none;
  flex: 1;
  overflow-y: auto;
  background: #060400;
  padding: 20px 28px;
}

.radar-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
}
.radar-bottom { grid-column: 1 / -1; }
.radar-left { display: flex; flex-direction: column; gap: 14px; }
.radar-right { display: flex; flex-direction: column; gap: 14px; }

.radar-title {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  margin-bottom: 8px;
}
.radar-chart-wrap {
  background: rgba(6, 4, 0, 0.8);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.radar-panel {
  background: rgba(8, 6, 0, 0.85);
  border: 1px solid var(--border);
  padding: 14px;
}
.radar-panel-title {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
}
.radar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.radar-name { color: var(--amber-dim); font-family: var(--font-mono); font-size: 10px; width: 130px; flex-shrink: 0; }
.radar-bar-wrap { flex: 1; background: rgba(255,176,0,0.08); border-radius: 1px; height: 5px; overflow: hidden; }
.radar-bar { height: 100%; background: var(--amber-dim); border-radius: 1px; transition: width 0.4s ease; }
.radar-bar-typ { background: var(--blue); }
.radar-bar-land { background: var(--red); opacity: 0.7; }
.radar-bar-offshore { background: linear-gradient(90deg, rgba(180,60,120,0.8), var(--amber-dim)); }
.radar-val { color: rgba(255,176,0,0.4); font-family: var(--font-mono); font-size: 10px; width: 28px; text-align: right; }
.radar-empty { color: rgba(255,176,0,0.3); font-family: var(--font-mono); font-size: 10px; padding: 6px 0; }
.radar-toggle {
  color: rgba(255,176,0,0.4);
  cursor: pointer;
  font-size: 10px;
  padding: 4px 0;
  transition: color 0.15s;
}
.radar-toggle:hover { color: var(--amber); }

/* Topverdächtige */
.topverd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.topverd-section-hdr {
  color: var(--amber-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.topverd-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(255,176,0,0.02);
  border: 1px solid var(--border);
  padding: 7px 9px;
  margin-bottom: 4px;
  height: 62px;
  overflow: hidden;
  box-sizing: border-box;
}
.topverd-rank { font-size: 14px; min-width: 20px; margin-top: 2px; }
.topverd-info { flex: 1; min-width: 0; }
.topverd-name { font-size: 11px; color: var(--amber); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.topverd-typ { color: var(--amber-dim); font-size: 9px; }
.topverd-score { margin-left: auto; color: var(--red); font-size: 10px; background: rgba(255,68,34,0.1); padding: 1px 5px; border-radius: 1px; white-space: nowrap; }
.topverd-signals { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.topverd-signals span { font-size: 9px; padding: 1px 5px; border-radius: 1px; font-family: var(--font-mono); }
.sig-offshore { background: rgba(255,176,0,0.1); color: var(--amber); border: 1px solid var(--border); }
.sig-rollen { background: rgba(58,155,212,0.1); color: var(--blue); border: 1px solid rgba(58,155,212,0.3); }
.sig-fall, a.sig-fall { background: rgba(220,50,50,0.15); color: #e05050; border: 1px solid rgba(220,50,50,0.4); text-decoration: none; }
a.sig-fall:hover { background: rgba(220,50,50,0.3); }
.sig-wid { background: rgba(255,68,34,0.1); color: var(--red); border: 1px solid rgba(255,68,34,0.3); }
.sig-deg { background: rgba(255,176,0,0.05); color: var(--amber-dim); border: 1px solid var(--border); }
.sig-typ { background: rgba(255,176,0,0.08); color: rgba(255,176,0,0.7); border: 1px solid var(--border); }
.topverd-bar-wrap { height: 2px; background: rgba(255,176,0,0.08); border-radius: 1px; overflow: hidden; }
.topverd-bar { height: 100%; background: linear-gradient(90deg, var(--red), var(--amber)); }

.offshore-name { min-width: 100px; }
.crossover-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.crossover-row:last-child { border-bottom: none; }
.crossover-typ { color: var(--amber); font-size: 10px; min-width: 14px; margin-top: 2px; }
.crossover-info { flex: 1; min-width: 0; }
.crossover-name { font-family: var(--font-mono); font-size: 11px; color: var(--amber); margin-bottom: 3px; }
.crossover-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.crossover-badge { font-size: 9px; padding: 1px 5px; border-radius: 1px; background: var(--amber-glow); color: var(--amber-dim); border: 1px solid var(--border); font-family: var(--font-mono); }
.crossover-count { color: var(--amber); font-family: var(--font-mono); font-size: 12px; min-width: 16px; text-align: right; }

@media (max-width: 900px) {
  .radar-layout { grid-template-columns: 1fr; }
  .radar-bottom { grid-column: 1; }
  .topverd-split { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════════
   SCHMALE SCHIRME — wenn nicht einmal EINE Schiene neben die Karte passt
   ⚠ DIE GRENZE IST GERECHNET, NICHT GERATEN, und die Rechnung steht hier:
       schmalste Schiene 212 + brauchbare Karte 520 = 732
     Dieselben zwei Zahlen stehen als SCHIENE_MIN/KARTE_MIN im Skript von schattenatlas.html,
     das die Vorgabe ableitet. Wer eine aendert, muss die andere nachziehen — deshalb stehen
     sie beide mit Namen da und nicht als runde Zahl.
     Genau daran ist die alte 768 gescheitert: sie war eine Konvention, keine Rechnung, und die
     Tablet-Flotte liegt hochkant bei 800-834 — also knapp darueber und damit im falschen Zweig.
   Hier werden aus beiden Schienen BOTTOM-SHEETS. Ueber der Grenze bleiben sie Schienen und
   klappen zu einem schmalen Streifen zusammen; die Klasse `.zu` bedeutet in beiden Faellen
   dasselbe — zu. EINE Klasse, EINE Bedeutung.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 732px) {
  /* Eine Spalte: die Karte bekommt alles, die Schienen legen sich davor. */
  .main-layout { grid-template-columns: minmax(0, 1fr); }
  #map-container,
  #graph-container,
  #radar-container,
  #map-burger-btn,
  #sidebar-toggle-btn { grid-area: 1 / 1 / 2 / 2; }
  #sa-timebar         { grid-area: 2 / 1 / 3 / 2; }

  #map-controls-panel,
  .sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    width: auto;
    max-height: 65vh;
    z-index: 1100;
    background: rgba(8, 6, 0, 0.98);
    border: none;
    border-top: 1px solid var(--border-bright);
    box-shadow: 0 -8px 30px rgba(255, 176, 0, 0.15);
    pointer-events: all;
    transform: translateY(0);
    transition: transform 0.28s ease;
    overflow-y: auto;
  }
  /* ⚠ `.zu` schiebt weg statt zu verschmaelern — und der Inhalt BLEIBT. Die Streifen-Optik der
     breiten Ansicht (26 px + Schraffur) waere hier ein 26 px hoher Balken quer ueber dem Bild. */
  #map-controls-panel.zu,
  .sidebar.zu { transform: translateY(100%); width: auto; }
  #map-controls-panel.zu > *,
  .sidebar.zu > * { display: revert; }
  #map-controls-panel.zu::after,
  .sidebar.zu::after { content: none; }

  .map-panel-header { display: flex; }
  .layer-controls,
  .legende { max-height: none; overflow-y: visible; }   /* das Sheet scrollt selbst — kein Doppel-Scroll */
  .legende { border-bottom: none; }
}

/* Extra-klein (≤ 380px) */
@media (max-width: 380px) {
  .view-btn { padding: 3px 6px; font-size: 8px; }
}

/* ── Graph Controls (injected by graph.js) ──────────────────── */
.graph-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.graph-search-input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 1px;
  outline: none;
  width: 180px;
  transition: border-color 0.2s;
}
.graph-search-input::placeholder { color: rgba(255,176,0,0.25); }
.graph-search-input:focus { border-color: var(--border-bright); }
.graph-role-select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 1px;
}
.graph-node-count { color: rgba(255,176,0,0.4); font-family: var(--font-mono); font-size: 10px; margin-left: auto; }
.graph-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--amber-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
}
.graph-error { color: var(--red); }
.graph-legend {
  position: absolute;
  bottom: 20px;
  left: 16px;
  background: rgba(8, 6, 0, 0.92);
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber-dim);
  pointer-events: none;
  z-index: 1000;
}
.graph-legend-item { display: flex; align-items: center; margin-bottom: 4px; }



/* ── Verbindungspfeile — Fluss-Animation ─────────────────────────── */
.pfeil-animiert {
  stroke-dasharray: 8, 12;
  animation: pfeil-flow 1.8s linear infinite;
}
@keyframes pfeil-flow {
  to { stroke-dashoffset: -20; }
}


/* ── Radar: 3-Spalten TopVerd ────────────────────────────────────────── */
.topverd-3col { grid-template-columns: 1fr 1fr 1fr; }
.topverd-bar-land { background: linear-gradient(90deg, #2a6a3a, #4a9a5a); }
@media (max-width: 900px) {
  .topverd-3col { grid-template-columns: 1fr; }
}
.topverd-row.topverd-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.topverd-row.topverd-clickable:hover { background: rgba(255,176,0,0.07); border-color: rgba(201,168,76,0.4); }


/* ── Entity Site Links ────────────────────────────────────────────── */
.entity-site-links {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.entity-site-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 2px;
  transition: color .15s, border-color .15s;
}

.entity-site-link:hover {
  color: var(--amber-dim);
  border-color: var(--amber-dim);
}


/* ══ DIE LAND-LEISTE (2026-09-04) ══════════════════════════════════════════════════════════
   BEFUND, der den Umbau ausgeloest hat — CHR am Galaxy Tab S9: „die schriftgröße im info
   pannel ist lächerlich groß". Gemessen: `.land-detail h2` 28px gegen 9–12px im ganzen Rest.
   28 : 9 = 3,1× und NICHTS dazwischen — zwei Extreme statt einer Stufung, und ausgerechnet die
   Navigation des Panels (.sidebar-title 10px, .tab-btn 9px) war der kleinste Text auf dem Schirm.

   ⚠ ES WIRD KEINE NEUE SKALA ERFUNDEN. Das Pult hat eine, in Variablen, von CHR am 16.08.
     abgenommen und mit gerechnetem Kontrast: --p-fs-gross 19 · basis 12,5 · kopf/klein 11.
     Die Leiste traegt jetzt `.p-flaeche` und benutzt dieselbe. Die 28px fallen auf 19 — bei
     196px Inhaltsbreite im Hochformat bricht VT323 in 28px jeden laengeren Laendernamen.
   ⚠ KEINE KLEINERE STUFE FUER ZEITBEZUEGE. Das war der Fehler vom 09.08.: „⌀/Jahr" stand in
     10px unter dem Wert, und CHR las das Klima-Jahresmittel als Wetter. Der Zeitbezug gehoert
     in den GRUPPENKOPF (.p-gruppe-h .f), nicht in eine Fussnote. */
.land-panel { display: flex; flex-direction: column; gap: 10px; }
.land-panel .p-gross { font-family: 'VT323', monospace; line-height: 1.1; }
/* Die alte 28px-Ueberschrift ist ersatzlos weg — ihr Platz hat jetzt .p-gross (19px). */
.land-detail h2 { font-size: var(--p-fs-gross, 19px); line-height: 1.15; }

/* (6) Touch-Ziele: NUR auf Touch-Geräten (pointer: coarse) — Desktop-Maus-Layout bleibt unverändert (CHR-Vorgabe). */
@media (pointer: coarse) {
  #map-burger-btn, #sidebar-toggle-btn, #sa-legende-toggle { min-height: 44px; min-width: 44px; }
  /* #950: die drei Darstellungs-Knoepfe der Kopfzeile waren nie dabei — ⟳ und ⛰ nicht, und der
     neue ⊙ waere auf genau dem Geraet zu klein geworden, fuer das er gebaut ist. */
  #disp-rotate, #disp-terrain, #disp-center,
  #btn-lage, #sa-radio-btn, .view-btn, .tab-btn { min-height: 44px; }
  .rolle-chip { min-height: 44px; display: inline-flex; align-items: center; }
  /* ⚠ 2026-09-04: BIS HEUTE STAND HIER KEINE EINZIGE KLASSE DER SEITENLEISTE. Der Block deckte
     .rolle-chip, .tab-btn und .view-btn ab — die Leiste selbst hatte nie eine Touch-Regel,
     obwohl ihre Zeilen anklickbar sind. Gemessen: .verbindung-item ≈23px, .ereignis-item ≈25px,
     bei einer Hausregel von 44 (#424).
     ⚠ Und die Rueckmeldung haengt an `:hover` — auf Touch wirkungslos. Ohne `:active` sieht
       niemand, dass eine Zeile ein Griff ist. */
  .verbindung-item, .ereignis-item, .quelle-item {
    min-height: 44px; display: flex; flex-direction: column; justify-content: center;
    padding: 8px 6px; margin: 0 -6px;
  }
  .verbindung-item:active, .ereignis-item:active, .quelle-item:active {
    background: var(--amber-glow); }
  /* Die Bloecke der Land-Leiste tragen das Pult-Kleid; hier bekommen ihre Zeilen Luft. */
  .land-panel .p-row { padding: 6px 0; min-height: 32px; }
  .land-panel .p-ev { min-height: 44px; padding: 7px 0; }
  .land-panel .p-ev:active { background: var(--amber-glow); }
  /* Ein 9px-Etikett in einem 44px-Knopf waere das naechste „laecherlich". */
  .tab-btn { font-size: 11px; }
  .sidebar-title { font-size: 12px; }

}


/* (3) Canvas-Text-Alternative: tastatur-/screenreader-erreichbare Länderliste.
   sr-only by default, bei Tastatur-Fokus enthüllt → Layout unverändert, aber voll bedienbar. */
#sa-canvas-alt {
  position: absolute; left: 8px; top: 8px; z-index: 40;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  background: rgba(10, 7, 3, 0.97); border: 1px solid var(--border); padding: 0;
}
#sa-canvas-alt:focus-within {
  width: 280px; height: auto; max-height: 62vh; overflow: auto; clip: auto;
  padding: 10px 12px; box-shadow: 0 0 18px rgba(0, 0, 0, 0.85);
}
#sa-canvas-alt h2 { font-size: 11px; color: var(--amber); margin-bottom: 6px; letter-spacing: .05em; }
#sa-canvas-alt .sa-alt-hint { font-size: 10px; color: var(--amber-dim); margin-bottom: 6px; }
#sa-canvas-alt button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--amber-dim); font-family: inherit; font-size: 11px; padding: 7px 4px;
  cursor: pointer; border-bottom: 1px solid var(--border);
}
#sa-canvas-alt button:hover, #sa-canvas-alt button:focus-visible {
  color: var(--amber-bright); outline: 2px solid var(--amber-bright); outline-offset: -2px;
}

/* ── DAS ZWEITE DESIGN: TERMINAL ────────────────────────────────────────────
   CHR 2026-09-01: "CRT & Terminal — als wechselbares design?"

   CRT ist die Vorgabe und bleibt, wie sie ist. TERMINAL ist dieselbe Palette, flach:
   kein Gluehen, keine Scanlines, kein Flimmern. Fuers lange Arbeiten und fuers Tablet.

   ⚠ ES IST EINE REGEL, KEINE LISTE VON AUSNAHMEN. Der Atlas traegt heute 22 gluehende
     Schatten an 16 verschiedenen Formen. Haette ich jede einzeln zum Merkmalswert gemacht,
     braeuchte die naechste Sitzung Disziplin, um daran zu denken — und genau solche
     Disziplin-Regeln sind hier schon fuenfmal gerissen. So glueht in Terminal auch alles,
     was noch niemand gebaut hat, von selbst nicht.
   ⚠ TIEFE IST KEIN GLUEHEN. Acht schwarze Schatten geben schwebenden Kaesten eine Kante
     zum Grund — ohne sie schwimmen sie. Die kommen gezielt zurueck.
   ⚠ DIE SENDEKETTE IST FESTGENAGELT: html.cockpit bekommt NIE ein data-design. Directive
     One darf sich nicht aendern, auch nicht weil jemand am Tablet umgeschaltet hat.
   ──────────────────────────────────────────────────────────────────────────── */
html[data-design="terminal"] body * { box-shadow: none; text-shadow: none; }
html[data-design="terminal"] body { animation: none !important; text-shadow: none; }
html[data-design="terminal"] #crt-overlay,
html[data-design="terminal"] #crt-boot-overlay,
html[data-design="terminal"] body::after { display: none !important; }

/* Die Tiefe zurueck — nur fuer das, was ueber der Karte schwebt. */
html[data-design="terminal"] :is(#sa-artikel-panel, #sa-cctv-panel, #sa-chart, #sa-timebar,
  #sa-statestrip, #sa-banner .sa-banner-inner, .sidebar, #map-controls-panel, #sa-such-liste,
  #sa-tooltip, #sa-lens-hint, .layer-controls, #sa-legende) {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
/* Ohne Gluehen muss die KANTE die Arbeit machen, die vorher das Licht getan hat —
   sonst verschwimmen aktive Zustaende mit den ruhenden. */
html[data-design="terminal"] :is(.rolle-chip.aktiv, .lens-btn.aktiv, #disp-rotate.active,
  #disp-terrain.active, #disp-center.active, #disp-design.active, .view-btn.active,
  .tab-btn.active, #sa-legende-toggle.open, #sa-menu-toggle.open) {
  border-color: var(--at-schrift-hell);
  color: var(--at-klar);
}