/* ============================================================
   gta6karte.de — Theme-Grundsystem (Single Source of Truth)
   ------------------------------------------------------------
   Standard = Dark: das :root jeder Seite bleibt unveraendert.
   Alternative Modi ueberschreiben AUSSCHLIESSLICH Farb-Tokens
   ueber html[data-theme="..."] und wirken dadurch automatisch
   durch alle bestehenden Regeln (Header, Karte, Cards, Sunset-
   Wortmarke, Countdown) – ohne dass eine Einzelregel angefasst
   werden muss.
   Umschaltung + Speicherung: assets/theme.js
   Rollout auf Unterseiten: spaeter (gleiche Token-Namen ueberall).
   ============================================================ */

/* ============================================================
   DESIGN TOKENS — „Leonida Interface" Fundament (Step 11)
   ------------------------------------------------------------
   Nicht-Farb-Tokens fuer alle Seiten. Farb-Tokens (--bg, --ink,
   --teal, --pink, ...) definiert weiterhin jede Seite in ihrem
   :root; die Themes ueberschreiben sie unten. Alle Werte hier
   sind aus den BESTEHENDEN Komponenten abgeleitet -> das Mapping
   auf Tokens aendert nichts Sichtbares.

   Regeln fuer spaetere Steps:
   - Spacing: 4px-Basis. Neue Abstaende nur aus der --sp-Skala.
   - Radius: nur --r-s/-m/-l/-xl. Keine neuen Zwischenwerte.
   - GLOW-BUDGET: max. EINE Glow-Ebene pro Komponente, nur ueber
     --glow-soft/-mid/-strong. Keine Ad-hoc-Neon-Schatten mehr.
     Dark glueht ruhig (Teal), Vice City heiss (Pink/Cyan).
   - Glass: HUD-/Overlay-Flaechen nutzen --glass-*, nichts Eigenes.
   ============================================================ */
:root{
  /* Spacing (4px-Basis) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:28px; --sp-7:40px;

  /* Radius */
  --r-s:8px;   /* Buttons, Chips, Inputs   */
  --r-m:12px;  /* Cards, Menues, Kacheln   */
  --r-l:16px;  /* Heroes, grosse Panels    */
  --r-xl:99px; /* Pills, Dots              */

  /* Glass (HUD-/Overlay-Flaechen; Werte = bisheriges Map-HUD) */
  --glass-bg:rgba(8,14,20,.82);
  --glass-line:var(--line2);
  --glass-blur:8px;

  /* Glow-Budget (komplette box-shadow-Werte). Dark = Teal, ruhig. */
  --glow-soft:0 0 14px rgba(31,182,166,.15);
  --glow-mid:0 0 16px rgba(31,182,166,.24);
  --glow-strong:0 6px 26px rgba(31,182,166,.30);

  /* Typografie / HUD */
  --fs-label:10.5px;    /* Uppercase-Kicker/Labels (hs-k, mh, cat-group) */
  --fs-hud:11.5px;      /* HUD-Chips, Coords                             */
  --fs-ui:13.5px;       /* UI-Text: Buttons, Nav, Menue-Optionen         */
  --fs-body:15px;       /* Fliesstext Content                            */
  --fs-card-title:16px; /* Card-Ueberschriften                           */

  /* Motion */
  --dur-fast:.14s; --dur-mid:.25s;

  /* Z-Skala (dokumentiert auch die Inline-Werte in index.html —
     dort bei Aenderungen zuerst hier abgleichen):
     450 Map-Vignette | 500 Map-HUD/Badge/Coords | 600 Marker-Hover
     1090 Drawer-Backdrop | 1100 Drawer | 1150 Filter-FAB
     1200 Header | 1300 Theme-Menue | 2000 Skip-Link */
  --z-map-vignette:450; --z-map-hud:500; --z-map-marker:600;
  --z-side-backdrop:1090; --z-side:1100; --z-fab:1150;
  --z-header:1200; --z-menu:1300; --z-skip:2000;
}

/* ---- Vice City — Miami-Neon-Nacht (Indigo/Purpur, Pink + Cyan) ---- */
html[data-theme="vice-city"]{
  /* Atmosphere-Lift Runde 2 (2026-07-08, Live-Feedback: 12% zu konservativ):
     Flaechen deutlich Richtung warmes Plum/Magenta-Nachtlicht (+~35% zu
     4a65815), Kanten klar sichtbar. Ink/Muted/Faint, Glass- und Glow-Tokens
     weiterhin unveraendert -> Lesbarkeit/Budget halten. */
  --bg:#211031; --bg2:#291441; --panel:#2e1a4e; --panel2:#38215e;
  --line:#4a2f73; --line2:#5c3b8a;
  --ink:#f3ecf9; --muted:#b49bcb; --faint:#7d6698;
  --teal:#22d3ee; --teal-dim:#0e7490;
  --pink:#ff3e88; --orange:#ff8a3d; --amber:#f0b73f;
  --map-water:#130f3a; /* Night-Ocean: tiefes Indigo statt Teal – harmoniert mit Neon-UI */

  /* Glass + Glow-Budget in Vice City (Werte = bisheriger Erlebnis-Layer) */
  --glass-bg:rgba(20,10,40,.72);
  --glass-line:rgba(255,62,136,.34);
  --glow-soft:0 4px 16px rgba(255,62,136,.18);
  --glow-mid:0 0 16px rgba(255,62,136,.30);
  --glow-strong:0 6px 26px rgba(255,62,136,.42), 0 0 20px rgba(34,211,238,.18);
}

/* ---- Grassrivers — Everglades-Sumpf (Moos-Gruen, Amber) ---- */
html[data-theme="grassrivers"]{
  --bg:#0a1410; --bg2:#0e1b15; --panel:#12241c; --panel2:#172e24;
  --line:#1e3a2c; --line2:#284a38;
  --ink:#e8f2ec; --muted:#8fa899; --faint:#5e7568;
  --teal:#3fcf8e; --teal-dim:#1f7d55;
  --pink:#8fcb53; --orange:#e8b84b; --amber:#e8b84b;
}

/* ---- Police Scanner — Nachtschicht-Dispatch (Blau/Schwarz, Rot + Amber) ---- */
html[data-theme="police"]{
  --bg:#05080d; --bg2:#080d15; --panel:#0b131e; --panel2:#0f1926;
  --line:#16263a; --line2:#1e3550;
  --ink:#d8e4f0; --muted:#7f93a8; --faint:#516073;
  --teal:#3aa0ff; --teal-dim:#1c5a99;
  --pink:#ff4d4d; --orange:#ffb020; --amber:#ffb020;
}

/* ============================================================
   Theme-Umschalter (wird von theme.js in header.top gemountet)
   ============================================================ */
.theme-switch{position:relative;flex:none}

.theme-btn{display:flex;align-items:center;gap:9px;height:38px;padding:0 var(--sp-3);
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-s);color:var(--ink);
  font:700 13.5px/1 'Inter',system-ui,-apple-system,sans-serif;cursor:pointer;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.theme-btn:hover{border-color:var(--teal-dim);box-shadow:var(--glow-soft)}
.theme-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.theme-btn .sw{width:15px;height:15px;border-radius:5px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.theme-btn .lbl{white-space:nowrap}
.theme-btn .cr{width:14px;height:14px;color:var(--muted);flex:none;transition:transform .16s}
.theme-btn[aria-expanded="true"] .cr{transform:rotate(180deg)}

.theme-menu{position:absolute;right:0;top:calc(100% + var(--sp-2));z-index:var(--z-menu);min-width:224px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-m);padding:7px;
  box-shadow:0 14px 44px rgba(0,0,0,.55);display:none}
.theme-menu.open{display:block}
.theme-menu .mh{font-size:var(--fs-label);font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);padding:8px 9px 9px}

.theme-opt{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:9px 9px;border-radius:var(--r-s);
  background:none;border:none;cursor:pointer;color:var(--ink);text-align:left;
  font:600 13.5px/1.2 'Inter',system-ui,-apple-system,sans-serif;transition:background .1s}
.theme-opt:hover{background:var(--panel)}
.theme-opt:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.theme-opt[aria-checked="true"]{background:var(--panel)}
.theme-opt .sw{width:24px;height:24px;border-radius:7px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.theme-opt .ol{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;line-height:1.2}
.theme-opt .od{font-size:11px;font-weight:500;color:var(--muted);line-height:1.35}
.theme-opt .ck{width:16px;height:16px;color:var(--teal);opacity:0;flex:none}
.theme-opt[aria-checked="true"] .ck{opacity:1}

@media(max-width:560px){
  .theme-btn{padding:0 8px;height:36px;gap:0}
  .theme-btn .lbl,.theme-btn .cr{display:none}
  .theme-menu{min-width:210px}
}
@media(max-width:430px){
  .theme-btn{padding:0 6px}
  .theme-btn .sw{width:14px;height:14px}
}
@media(prefers-reduced-motion:reduce){
  .theme-btn,.theme-btn .cr{transition:none}
}

/* ============================================================
   VICE CITY — Erlebnis-Layer (global auf allen Seiten)
   ------------------------------------------------------------
   Greift NUR bei html[data-theme="vice-city"]; Dark bleibt die
   ruhige Basis und wird hier nicht angefasst. Reines CSS ueber
   vorhandene Klassen/Tokens, keine neuen Assets, kein JS.
   Spezifitaet 0-2-1 (html[attr] .klasse) schlaegt :root/Basis.
   ============================================================ */

/* Seiten-Hintergrund/Atmosphaere fuer Vice City wird jetzt vom globalen
   Experience-Layer getragen (body::before/::after, Abschnitt ganz unten).
   Frueher lagen die Sunset-/Neon-Glows direkt auf body -> jetzt zentral
   und mode-gescoped, damit Dark ebenfalls eine eigene Atmosphaere bekommt. */

/* Header -> Neon-Glass. Sticky ueber Inhalt, Blur wirkt als echtes Glas. */
html[data-theme="vice-city"] header.top{
  background:linear-gradient(180deg, rgba(46,26,78,.82), rgba(33,16,49,.70));
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
          backdrop-filter:blur(10px) saturate(1.25);
  border-bottom-color:rgba(255,62,136,.34);
  box-shadow:0 1px 0 rgba(255,62,136,.22), 0 12px 34px -22px rgba(255,62,136,.55);
}

/* Nav / Release-Pille bekommen den Neon-Kontext */
html[data-theme="vice-city"] .nav-guides,
html[data-theme="vice-city"] .stat-pill{
  border-color:rgba(255,62,136,.32);
  background:rgba(255,62,136,.06);
}
html[data-theme="vice-city"] .nav-guides:hover{
  border-color:var(--pink); box-shadow:var(--glow-mid);
}
html[data-theme="vice-city"] .nav a.cta{
  box-shadow:0 0 15px rgba(34,211,238,.34);
}

/* Primaer-CTAs: kraeftigerer Sunset-/Cyan-Glow (= --glow-strong in Vice) */
html[data-theme="vice-city"] .hc-btn.primary,
html[data-theme="vice-city"] .lp-cta{
  box-shadow:var(--glow-strong);
}

/* Cards ueberall: dezente Neon-Border + Glow (nur Vice City). */
html[data-theme="vice-city"] .guide-card,
html[data-theme="vice-city"] .lp-card,
html[data-theme="vice-city"] .hs-tile,
html[data-theme="vice-city"] .lp-faq details{
  border-color:rgba(255,62,136,.22);
  box-shadow:0 0 0 1px rgba(255,62,136,.05), 0 10px 30px -20px rgba(34,211,238,.55);
}
html[data-theme="vice-city"] .guide-card:hover,
html[data-theme="vice-city"] .lp-card:hover{
  border-color:rgba(255,62,136,.5);
  box-shadow:0 0 24px -4px rgba(255,62,136,.26);
}

/* Countdown-Leiste (Startseite): Neon-Kante + ein Glow (Budget: --glow-soft) */
html[data-theme="vice-city"] .cd-grid{
  border-color:rgba(255,62,136,.30);
  box-shadow:var(--glow-soft);
}
html[data-theme="vice-city"] .cd-unit{
  border-left-color:rgba(255,62,136,.14);
}

/* Kategorie-Hero (Unterseiten) staerker */
html[data-theme="vice-city"] .lp-hero{
  border-color:rgba(255,62,136,.30);
  box-shadow:0 0 44px -20px rgba(255,62,136,.55);
}

/* Startseiten-Hero-Panel (.home-hero, index.html) — gleiche Neon-Behandlung */
html[data-theme="vice-city"] .home-hero{
  border-color:rgba(255,62,136,.30);
  box-shadow:0 0 44px -20px rgba(255,62,136,.55);
}

/* Fortschrittsbalken-Fuellung im Neon-Look */
html[data-theme="vice-city"] .pbar i{
  box-shadow:0 0 12px rgba(255,62,136,.5);
}

/* Kein „mitscrollender“ fixed-BG auf Mobile (iOS ignoriert fixed ohnehin,
   Android spart so Repaints) – Atmosphaere bleibt trotzdem klar sichtbar. */
@media(max-width:560px){
  html[data-theme="vice-city"] header.top{
    -webkit-backdrop-filter:blur(8px) saturate(1.2);
            backdrop-filter:blur(8px) saturate(1.2);
  }
}

/* ============================================================
   VICE CITY — Map-HUD (Coords, Badge, Zoom) + Vignette
   ------------------------------------------------------------
   Nur Farbe/Glass/Glow, keine Map-Logik. Dark bleibt ruhig
   (nutzt weiter die Basis-Regeln in index.html).
   ============================================================ */

/* Koordinaten-Readout: Neon-Glass, Cyan-Ziffern (gut lesbar auf Indigo) */
html[data-theme="vice-city"] .coords{
  background:var(--glass-bg);
  border-color:rgba(255,62,136,.40);
  color:#22d3ee;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 0 14px rgba(34,211,238,.22);
}

/* Vorschau-Badge: pinker Neon-Rahmen + dezenter Glow, Amber-Text bleibt */
html[data-theme="vice-city"] .badge-prerelease{
  background:var(--glass-bg);
  border-color:rgba(255,62,136,.45);
  box-shadow:0 4px 18px rgba(255,62,136,.28);
}

/* Leaflet-Zoom-Buttons ins Neon-Glass ziehen.
   Alphas bewusst hoeher als --glass-bg (.85/.92): muessen ueber der
   Karte deckend genug fuer Klick-Ziele bleiben -> kein Token-Mapping. */
html[data-theme="vice-city"] .leaflet-control-zoom a{
  background:rgba(20,10,40,.85)!important;
  border-color:rgba(255,62,136,.32)!important;
  color:var(--ink)!important;
}
html[data-theme="vice-city"] .leaflet-control-zoom a:hover{
  background:rgba(30,16,55,.92)!important;
  color:#22d3ee!important;
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.55)!important;
}

/* Map-Vignette in Vice City: dezenter Pink/Cyan-Edge (Sunset-Schimmer)
   + 1px Neon-Hairline als HUD-Rahmen (Pendant zur Dark-Hairline, index.html) */
html[data-theme="vice-city"] .map-wrap::after{
  box-shadow:inset 0 0 0 1px rgba(255,62,136,.12),
             inset 0 0 70px 8px rgba(8,4,26,.5),
             inset 0 0 34px rgba(255,62,136,.14),
             inset 0 0 64px rgba(34,211,238,.08);
}

/* Map-HUD-Statusbar in Vice City: dezentes Neon-Glass (passt zum Map-HUD oben).
   Sheen-Verlauf = gleiche Oberflaeche wie Hero-Kacheln/Basis-Chips. */
html[data-theme="vice-city"] .hud-chip{
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 62%) var(--glass-bg);
  border-color:var(--glass-line);
  box-shadow:var(--glow-soft);
}
html[data-theme="vice-city"] .hud-chip svg{color:#22d3ee}
html[data-theme="vice-city"] .hud-mode .mode-dot{background:#22d3ee;box-shadow:0 0 8px #22d3ee}

/* Map-Control-Center-Shell in Vice City: Sidebar, Suche und Progress-Box
   gehoeren sichtbar zum Neon-Interface. Die Klassen existieren nur auf der
   Startseite (index.html) -> faktisch app-gescoped, kein Unterseiten-Effekt. */
html[data-theme="vice-city"] .side{
  background:linear-gradient(180deg,rgba(255,62,136,.07),transparent 150px) var(--bg2);
  border-right-color:rgba(255,62,136,.20);
}
html[data-theme="vice-city"] .search:focus{
  border-color:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.14);
}
html[data-theme="vice-city"] .quick button:hover{
  color:var(--ink);
  border-color:rgba(255,62,136,.45);
}
/* Progress-Box: Sunset-Akzentkante statt Teal (Instrument-Sprache des Heros) */
html[data-theme="vice-city"] .prog-box{
  background:linear-gradient(90deg,rgba(255,62,136,.55),rgba(34,211,238,.25)) top left/100% 2px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 62%) var(--panel);
}

/* ============================================================
   FOLD-DIFFERENZIERUNG (App-Fold, nur Startseite in Vice City)
   ------------------------------------------------------------
   Root-Cause 2026-07-07: Der erste Viewport der Startseite ist zu
   79% theme-invariantes Karten-JPG + fast-schwarzes Chrome -> Dark
   und Vice waren dort kaum unterscheidbar. Diese Regeln machen den
   Fold in Vice klar erkennbar: dezenter Neon-Farbwash UEBER den
   Map-Tiles (Pseudo .map-wrap::after, z450 unter HUD/Markern,
   pointer-events:none -> keine Map-Logik beruehrt), staerkere
   Vignette/Hairline, sichtbarer Sidebar-Wash + Header-Kante,
   klarere Filter-Akzente. Dark bleibt bewusst unveraendert ruhig.
   Spezifitaet: [data-surface][data-theme] schlaegt die generischen
   Vice-Regeln oben. Premium-Control-Center, kein Neon-Chaos:
   Wash-Alphas 5-7%, keine neuen Deko-Objekte auf der Karte.
   ============================================================ */
html[data-surface="app"][data-theme="vice-city"] .map-wrap::after{
  background:
    linear-gradient(160deg, rgba(255,62,136,.07), transparent 34%),
    linear-gradient(340deg, rgba(34,211,238,.06), transparent 30%),
    linear-gradient(0deg,   rgba(255,138,61,.05), transparent 22%);
  box-shadow:inset 0 0 0 1px rgba(255,62,136,.30),
             inset 0 0 90px 12px rgba(8,4,26,.55),
             inset 0 0 60px rgba(255,62,136,.25),
             inset 0 0 110px rgba(34,211,238,.10);
}
html[data-surface="app"][data-theme="vice-city"] .side{
  background:linear-gradient(180deg,rgba(255,62,136,.13),rgba(255,62,136,.03) 220px,transparent 340px) var(--bg2);
  border-right-color:rgba(255,62,136,.30);
}
html[data-surface="app"][data-theme="vice-city"] header.top{
  border-bottom-color:rgba(255,62,136,.55);
  box-shadow:0 1px 0 rgba(255,62,136,.38), 0 14px 40px -20px rgba(255,62,136,.55);
}
html[data-surface="app"][data-theme="vice-city"] .search{border-color:rgba(255,62,136,.28)}
html[data-surface="app"][data-theme="vice-city"] .quick button{border-color:rgba(255,62,136,.30)}
html[data-surface="app"][data-theme="vice-city"] .cat:hover{background:rgba(255,62,136,.08)}
html[data-surface="app"][data-theme="vice-city"] .cat .ct{background:rgba(255,62,136,.10)}

/* ============================================================
   BASE UI UTILITIES (Step 11 — vorbereitet, noch ungenutzt)
   ------------------------------------------------------------
   Gemeinsame Bausteine fuer kommende Steps (Content-Shell,
   Sidebar-Panel, /karte/). Bewusst klein gehalten; kein HTML
   nutzt sie bisher. Theme-Faehigkeit kommt ueber die Tokens
   automatisch (Vice City ueberschreibt --glass-* / --glow-*).
   ============================================================ */

/* Grundflaeche: ruhiges Panel (Sektionen, Boxen) */
.ui-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m)}

/* HUD-/Overlay-Glas (schwebende Elemente ueber Karte/Hero) */
.ui-glass{background:var(--glass-bg);border:1px solid var(--glass-line);
  border-radius:var(--r-s);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}

/* Interaktive Card (Teaser, Listen) — Hover haelt das Glow-Budget ein */
.ui-card{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);padding:var(--sp-4);text-decoration:none;color:var(--ink);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)}
.ui-card:hover{border-color:var(--teal-dim);box-shadow:var(--glow-soft)}
html[data-theme="vice-city"] .ui-card:hover{border-color:rgba(255,62,136,.5)}

/* Status-/Kategorie-Badge (Pill) */
.ui-badge{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-label);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-xl)}

/* Uppercase-HUD-/Sektions-Label (Kicker) */
.ui-hud-label{display:block;font-size:var(--fs-label);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .ui-card{transition:none}
}

/* ============================================================
   GLOBALER EXPERIENCE-BACKGROUND-LAYER (Phase 1a)
   ------------------------------------------------------------
   Fixierte, seitenweite Atmosphaere je Modus. Reines CSS, keine
   Assets. Wirkt automatisch auf ALLE Seiten, die theme.css laden.

   Mechanik (3 Ebenen, kein HTML-Touch):
   - body::before = statische Basis-Tiefe (radiale Glows) + Vignette.
     Bleibt auch bei prefers-reduced-motion sichtbar -> Atmosphaere
     ohne Bewegung.
   - body::after  = Signatur-Ebene (Radar-Grid/Scanline bzw. Sunset-
     Haze), dezent animiert (background-position + opacity).
   - html::before = Environment-/Buehnen-Ebene: Center-Veil (dunkelt
     die Deko hinter der Lesespalte ab -> Lesbarkeit bleibt) +
     Side-Glows; in Vice zusaetzlich selbst gezeichnete SVG-in-CSS-
     Silhouetten (Palmen / Sonne). Statisch, kein Bild-Asset, keine
     offizielle Grafik. Die Vice-Deko ankert ueber calc(50% - Npx)
     relativ zur Mitte und liegt damit NUR in den echten Guttern
     neben der Content-Spalte; auf schmalen Viewports rutscht sie
     automatisch aus dem Bild. Dark ist hier bewusst reduziert
     (Batch-Fix 2026-07-07): EINE Signatur pro Modus.
   Alle liegen HINTER dem Inhalt (z-index negativ) und sind
   pointer-events:none -> die interaktive Karte wird nie ueberlagert
   und kein Klick blockiert. Der Body-Hintergrund (var(--bg)) jeder
   Seite bleibt darunter; Text sitzt darueber -> Kontrast bleibt.

   Dark  = „Night HUD"  : Teal-Radialtiefe, feines Radar-Grid,
                          Scanline-Hauch, ruhig/mysterioes.
   Vice  = „Neon Sunset": Pink->Orange-Bloom + Cyan, Pink-Grid,
                          Sun-Strip-Horizont, Heat-Haze, lebendig.
   -> ohne genaues Hinschauen klar unterscheidbar (Signatur, nicht
      nur Farbton).
   ============================================================ */

/* Gemeinsame Mechanik aller Ebenen (mode-neutral). */
body::before,
body::after,
html::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;            /* hinter allem Inhalt (Inhalt = z auto/>=0) */
}
body::before{ z-index:-3 } /* Basis-Tiefe zuunterst                      */
body::after{  z-index:-2 } /* Signatur ueber der Tiefe                   */
html::before{ z-index:-1 } /* Environment/Buehne zuoberst, unter Inhalt  */

/* ---- DARK / NIGHT HUD --------------------------------------- */
/* html[data-theme="dark"] (theme.js setzt data-theme immer) UND
   :not([data-theme]) als No-JS-/Pre-Flash-Fallback. */
html[data-theme="dark"] body::before,
html:not([data-theme]) body::before{
  background:
    radial-gradient(70% 55% at 6% -8%,  rgba(31,182,166,.16), transparent 60%),
    radial-gradient(64% 58% at 100% 2%, rgba(120,150,170,.10), transparent 62%),
    radial-gradient(120% 78% at 50% 120%, rgba(31,182,166,.10), transparent 64%);
  box-shadow:
    inset 0 0 230px 44px rgba(0,0,0,.6),
    inset 0 0 90px rgba(4,10,14,.55);
}
html[data-theme="dark"] body::after,
html:not([data-theme]) body::after{
  background-image:
    /* Horizont-Schimmer (statisch) */
    linear-gradient(0deg, rgba(150,180,200,.07), transparent 4px),
    /* perspektivisches Radar-Grid (horizontale Linien) */
    repeating-linear-gradient(0deg,  rgba(130,160,185,.06) 0 1px, transparent 1px 46px),
    /* Radar-Grid (vertikale Linien) */
    repeating-linear-gradient(90deg, rgba(130,160,185,.06) 0 1px, transparent 1px 52px),
    /* feine Scanlines (statisch) */
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px);
  background-size:100% 100%, 100% 46px, 52px 100%, 100% 4px;
  background-position:0 100%, 0 0, 0 0, 0 0;
  background-repeat:no-repeat, repeat, repeat, repeat;
  /* Grid als „Boden": erst im unteren Drittel voll da -> Lesezone bleibt clean */
  -webkit-mask:linear-gradient(180deg, transparent 38%, #000 88%);
          mask:linear-gradient(180deg, transparent 38%, #000 88%);
  opacity:.95;
  animation:atmo-grid-drift 34s linear infinite;
  will-change:background-position;
}

/* Environment/Buehne Dark — bewusst ruhig (Batch-Fix 2026-07-07):
   nur noch Center-Veil (Layer 1, schuetzt die Lesespalte) + zwei
   Teal-Side-Glows. Die frueheren HUD-Tick-Ruler, Radar-Ringe und die
   Wireframe-Skyline sind entfernt — sie konkurrierten mit dem
   Radar-Grid (body::after) und liefen unter der Content-Spalte durch
   (wirkte wie Rendering-Artefakte). Dark-Signatur = Radar-Grid +
   Scanlines in body::after; diese Ebene liefert nur noch Tiefe.
   Komplett statisch -> kein Animations-/reduced-motion-Thema. */
html[data-theme="dark"]::before,
html:not([data-theme])::before{
  background-image:
    radial-gradient(46% 58% at 50% 42%, rgba(8,14,20,.5), transparent 100%),
    linear-gradient(90deg,  rgba(31,182,166,.10), transparent),
    linear-gradient(270deg, rgba(31,182,166,.08), transparent);
  background-size:100% 100%, 150px 100%, 150px 100%;
  background-position:center, left top, right top;
  background-repeat:no-repeat;
}

/* ---- VICE CITY / NEON SUNSET -------------------------------- */
html[data-theme="vice-city"] body::before{
  background:
    radial-gradient(88% 60% at 6% -10%,  rgba(255,62,136,.40), transparent 60%),
    radial-gradient(80% 55% at 100% -4%, rgba(34,211,238,.18), transparent 60%),
    /* Magenta-Mitte-Wash: die Content-Zone bekommt eigenes warmes Nachtlicht
       (vorher ankerten alle Radials nur an Ecken/Kanten -> Mitte blieb schwarz) */
    radial-gradient(120% 90% at 50% 34%, rgba(168,52,140,.16), transparent 62%),
    radial-gradient(120% 74% at 50% 115%, rgba(255,138,61,.38), transparent 62%),
    radial-gradient(100% 58% at 50% 122%, rgba(255,62,136,.26), transparent 66%);
  box-shadow:
    inset 0 0 240px 50px rgba(16,6,26,.36),
    inset 0 0 120px rgba(255,62,136,.14);
}
html[data-theme="vice-city"] body::after{
  background-image:
    /* Sun-Strip-Horizont unten (statisch) */
    linear-gradient(0deg, rgba(255,120,190,.27), rgba(255,120,190,.09) 140px, transparent 24%),
    /* Neon-Grid (horizontale Linien) */
    repeating-linear-gradient(0deg,  rgba(255,84,170,.14) 0 1px, transparent 1px 46px),
    /* Neon-Grid (vertikale Linien) */
    repeating-linear-gradient(90deg, rgba(255,84,170,.14) 0 1px, transparent 1px 52px),
    /* Heat-Haze-Scanline */
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 5px);
  background-size:100% 100%, 100% 46px, 52px 100%, 100% 5px;
  background-position:0 100%, 0 0, 0 0, 0 0;
  background-repeat:no-repeat, repeat, repeat, repeat;
  -webkit-mask:linear-gradient(180deg, transparent 12%, #000 78%);
          mask:linear-gradient(180deg, transparent 12%, #000 78%);
  opacity:1;
  /* Grid-Drift + Sunset-Atem (unterschiedliche Properties -> parallel ok) */
  animation:atmo-grid-drift 42s linear infinite,
            atmo-haze 13s ease-in-out infinite;
  will-change:background-position, opacity;
}

/* Environment/Buehne Vice — Neon-Sunset-Bühne in den Seitenflaechen:
   Center-Veil (Layer 1), Palmen-Silhouetten links+rechts und gestreifte
   Synthwave-Sonne (alle selbst gezeichnet, SVG-Data-URI, kein Asset),
   Pink-/Cyan-Side-Glows. Deko ankert via calc(50% - Npx) -> nur in den
   Guttern, rutscht auf schmalen Viewports automatisch offscreen.
   Statisch (Bewegung liefert body::after via Haze/Grid). */
html[data-theme="vice-city"]::before{
  background-image:
    radial-gradient(46% 58% at 50% 42%, rgba(30,11,40,.25), transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220' fill='none'%3E%3Cg stroke='%230b0517' stroke-linecap='round'%3E%3Cpath d='M86 220 C80 176 70 128 60 96' stroke-width='9'/%3E%3Cpath d='M60 92 C44 76 22 70 4 76' stroke-width='7'/%3E%3Cpath d='M60 92 C48 68 30 56 8 54' stroke-width='7'/%3E%3Cpath d='M60 92 C62 66 54 44 38 32' stroke-width='7'/%3E%3Cpath d='M60 92 C76 66 96 56 118 56' stroke-width='7'/%3E%3Cpath d='M60 92 C78 76 100 72 120 80' stroke-width='7'/%3E%3Cpath d='M60 92 C50 106 36 114 18 116' stroke-width='6'/%3E%3Cpath d='M60 92 C72 106 86 112 104 114' stroke-width='6'/%3E%3Cpath d='M228 220 C226 192 222 164 216 142' stroke-width='7'/%3E%3Cpath d='M216 138 C204 126 188 122 174 126' stroke-width='6'/%3E%3Cpath d='M216 138 C208 120 194 110 178 108' stroke-width='6'/%3E%3Cpath d='M216 138 C218 118 212 102 200 92' stroke-width='6'/%3E%3Cpath d='M216 138 C228 118 244 110 262 110' stroke-width='6'/%3E%3Cpath d='M216 138 C230 126 248 122 264 128' stroke-width='6'/%3E%3C/g%3E%3Cg fill='%230b0517'%3E%3Ccircle cx='60' cy='94' r='7'/%3E%3Ccircle cx='216' cy='140' r='6'/%3E%3Cpath d='M256 220 v-52 h26 v52 z'/%3E%3Cpath d='M286 220 v-36 h14 v36 z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220' fill='none'%3E%3Cg stroke='%230b0517' stroke-linecap='round'%3E%3Cpath d='M86 220 C80 176 70 128 60 96' stroke-width='9'/%3E%3Cpath d='M60 92 C44 76 22 70 4 76' stroke-width='7'/%3E%3Cpath d='M60 92 C48 68 30 56 8 54' stroke-width='7'/%3E%3Cpath d='M60 92 C62 66 54 44 38 32' stroke-width='7'/%3E%3Cpath d='M60 92 C76 66 96 56 118 56' stroke-width='7'/%3E%3Cpath d='M60 92 C78 76 100 72 120 80' stroke-width='7'/%3E%3Cpath d='M60 92 C50 106 36 114 18 116' stroke-width='6'/%3E%3Cpath d='M60 92 C72 106 86 112 104 114' stroke-width='6'/%3E%3Cpath d='M228 220 C226 192 222 164 216 142' stroke-width='7'/%3E%3Cpath d='M216 138 C204 126 188 122 174 126' stroke-width='6'/%3E%3Cpath d='M216 138 C208 120 194 110 178 108' stroke-width='6'/%3E%3Cpath d='M216 138 C218 118 212 102 200 92' stroke-width='6'/%3E%3Cpath d='M216 138 C228 118 244 110 262 110' stroke-width='6'/%3E%3Cpath d='M216 138 C230 126 248 122 264 128' stroke-width='6'/%3E%3C/g%3E%3Cg fill='%230b0517'%3E%3Ccircle cx='60' cy='94' r='7'/%3E%3Ccircle cx='216' cy='140' r='6'/%3E%3Cpath d='M256 220 v-52 h26 v52 z'/%3E%3Cpath d='M286 220 v-36 h14 v36 z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff2f7e'/%3E%3Cstop offset='.55' stop-color='%23ff7a3c'/%3E%3Cstop offset='1' stop-color='%23ffc46b'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='200' height='200' fill='%23fff'/%3E%3Crect y='104' width='200' height='5' fill='%23000'/%3E%3Crect y='121' width='200' height='7' fill='%23000'/%3E%3Crect y='140' width='200' height='9' fill='%23000'/%3E%3Crect y='161' width='200' height='11' fill='%23000'/%3E%3Crect y='184' width='200' height='13' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='98' fill='url(%23g)' mask='url(%23m)' opacity='.85'/%3E%3C/svg%3E"),
    linear-gradient(90deg,  rgba(255,62,136,.26), transparent),
    linear-gradient(270deg, rgba(196,74,196,.18), transparent);
  background-size:100% 100%, 300px auto, 380px auto, 460px 460px, 150px 100%, 150px 100%;
  background-position:
    center,
    left calc(50% - 780px) bottom,
    right calc(50% - 700px) bottom,
    left calc(50% - 760px) bottom -170px,
    left top,
    right top;
  background-repeat:no-repeat;
}

/* Radar-/Neon-Grid driftet sanft (nur die Grid-Ebenen bewegen sich;
   Periode = Grid-Abstand -> nahtloser Loop). */
@keyframes atmo-grid-drift{
  from{ background-position:0 100%, 0 0,    0 0,    0 0 }
  to{   background-position:0 100%, 0 46px, 52px 0, 0 0 }
}
/* Sunset-/Heat-Haze atmet nur ueber opacity (Vice City). */
@keyframes atmo-haze{
  0%,100%{ opacity:.85 }
  50%{     opacity:1 }
}

/* Mobile: gedaempft + statisch (Performance & Lesbarkeit).
   Spezifitaet (0-1-3) muss die mode-gescopten Regeln oben matchen,
   sonst gewinnt html[data-theme="…"] body::after — vgl. hero-atmosphere.css. */
@media(max-width:560px){
  html[data-theme] body::after,
  html:not([data-theme]) body::after{ opacity:.6; animation:none }
  html[data-theme="vice-city"] body::after{ opacity:.7 }
  /* Environment-Ebene auf Mobile stark daempfen (Deko-Anker liegen
     ohnehin offscreen; Ruler/Beams/Skyline nur als Hauch). */
  html[data-theme]::before,
  html:not([data-theme])::before{ opacity:.5 }
}

/* Reduced Motion: keine Bewegung, Ebenen bleiben atmosphaerisch.
   Ebenfalls mode-gescopt, damit animation:none die Signatur-Ebene sicher trifft. */
@media(prefers-reduced-motion:reduce){
  html[data-theme] body::after,
  html:not([data-theme]) body::after{ animation:none }
}

/* ============================================================
   APP-SURFACE (Startseite/Map): globale Buehne gedaempft
   ------------------------------------------------------------
   Die Startseite hat mit hero-atmosphere.css bereits eine eigene
   Hero-Atmosphaere (Grid + Skyline). Damit sich nicht zwei Grid-/
   Skyline-Systeme ueberlagern, wird die globale Signatur-Ebene hier
   stark gedaempft und statisch gestellt; die Basis-Tiefe
   (body::before) bleibt voll erhalten. Steht bewusst NACH den
   Mode-/Mobile-/Motion-Bloecken: gleiche Spezifitaet (0-1-2 bzw.
   0-1-1), spaeter im Stylesheet -> gewinnt fuer die App-Seite.
   ============================================================ */
/* Daempfung seit Fold-Fix 2026-07-07 moderater (.45/.55 -> .65/.75):
   der Content-Bereich der Startseite ist nicht mehr opak, die Buehne
   soll dort sichtbar tragen (wie Regionen), aber weiterhin leiser als
   auf reinen Content-Seiten bleiben (Hero-Atmo im cd-hero-Panel und
   Map bleiben die lautesten Ebenen). */
html[data-surface="app"] body::after{ opacity:.65; animation:none }
html[data-surface="app"]::before{ opacity:.75 }

/* Dark-Signatur im App-Content (nur Startseite): grosser Neon-Noir-Mond
   im LINKEN Gutter — weicher cyan-teal Halo + heller Crescent, selbst
   gezeichnete SVG-Data-URI (kein Asset, kein offizielles Material).
   Ankert via calc(50% - 700px) NUR im Gutter neben der 880px-Content-
   Spalte; auf schmalen Viewports rutscht er offscreen (gleiche Mechanik
   wie die Vice-Palmen). Bewusst EIN ruhiges Buehnen-Objekt, statisch.
   (Live-Feedback 2026-07-08: 112px rechts wirkte wie ein Icon ->
   jetzt 240px links inkl. Halo, Leuchtkraft .34 -> .85.) */
html[data-surface="app"][data-theme="dark"]::before{
  background-image:
    radial-gradient(46% 58% at 50% 42%, rgba(8,14,20,.5), transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3CradialGradient id='h' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0' stop-color='%239be0ea' stop-opacity='.32'/%3E%3Cstop offset='.45' stop-color='%239be0ea' stop-opacity='.13'/%3E%3Cstop offset='1' stop-color='%239be0ea' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='240' height='240' fill='%23fff'/%3E%3Ccircle cx='157' cy='99' r='82' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='120' cy='120' r='118' fill='url(%23h)'/%3E%3Ccircle cx='120' cy='120' r='86' fill='%23cfeaf4' fill-opacity='.85' mask='url(%23m)'/%3E%3C/svg%3E"),
    linear-gradient(90deg,  rgba(31,182,166,.10), transparent),
    linear-gradient(270deg, rgba(31,182,166,.08), transparent);
  background-size:100% 100%, 240px 240px, 150px 100%, 150px 100%;
  background-position:center, left calc(50% - 700px) top 90px, left top, right top;
  background-repeat:no-repeat;
}