/* =========================================================================
   layer-explorer.css — zentrales Stylesheet der Werkbank
   (Layer-Explorer-Familie von GEOPHORA).

   Die Werkbank bleibt bewusst dunkel (Familien-Beschluss F2, 11.08.2026):
   „Erzählseiten stehen auf Kreide, Instrumente arbeiten auf der Tinte."

   Hier liegen die gemeinsamen Design-Tokens und das gemeinsame Chrome
   aller fünf Explorer-Seiten (Kopfzeile, Wortmarke, Modus-Leiste, Rückweg,
   Fußzeile). Seitenspezifisches — Bühnen, Panels, Legenden, MapLibre-
   Overrides — bleibt inline in den jeweiligen Seiten.

   Vereinheitlichte Werte des Beschlusses:
   · EIN dunkler Grund #0c1320 (ersetzt #0a111c)
   · Text auf Dunkel = Kreide #f2f2ef (statt Reinweiß)
   · EIN Teal #15a3a3 (ersetzt #1ab3b3), nur als Datenfarbe
   · Chrome-Akzente laufen über das Markenblau (#437d9f / hell #6ba3c6)

   Ergänzungen 12.08.2026:
   · Der Hub ist die helle Erzählfassung (Body-Schalter .lx--hell) — das
     Werkbank-Chrome oben bleibt Tinte, der Seitenkörper steht auf Kreide.
   · Teal ist auch im Chrome vollständig durch die Marke ersetzt; es bleibt
     ausschließlich Datenfarbe (AOI-Linien, Legenden, Lizenz-/Live-Codes).
   · MapLibre-Controls (Zoom, Attribution, Maßstab) im Werkbank-Ton, § 3.2.

   Stand: 12.08.2026
   ========================================================================= */

:root{
  /* Dunkler Grund und abgestufte Flächen der Werkbank */
  --ink-900:#0c1320; --ink-800:#0e1727; --surface:#111c2b; --card:#152232;
  --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.16);
  /* Datenfarben: Teal, Wheat, Live-Grün, Alarm — nicht fürs Chrome */
  --teal:#15a3a3; --teal-d:#12888a; --wheat:#e0b56b; --alert:#e8734a; --live:#37d0a0;
  /* Text auf Dunkel = Kreide, nicht Reinweiß */
  --text:#f2f2ef; --soft:#9fb2c4; --faint:#6a7d90;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r:14px;
  /* Marken-Blau der GEOPHORA-Hauptseite — auf dunklem Grund konsistent
     aufgehellt (PHORA, aktive Tabs, Chrome-Akzente); --marke-heller ist die
     Hover-Stufe (ersetzt das frühere Teal-Aufhellen der CTA-Knöpfe). */
  --marke:#437d9f; --marke-hell:#6ba3c6; --marke-heller:#84b6d6;
  /* Kreide-Werte der Familie für helle Flächen (Technik-Seite u. a.) */
  --kreide-grund:#f2f2ef; --kreide-karte:#f8f8f5; --kreide-tinte:#24262a;
  --kreide-linie:#dad9d3; --akzent-tief:#2f6d93;
}

/* --- Grundfläche: die Tinte, auf der die Instrumente arbeiten ------------ */
*{box-sizing:border-box}
html,body{margin:0; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{background:
    radial-gradient(1100px 520px at 82% -8%, rgba(107,163,198,.12), transparent 60%),
    radial-gradient(900px 500px at 4% 0%, rgba(67,125,159,.16), transparent 55%),
    linear-gradient(180deg,var(--ink-900),#080d16 80%);
  color:var(--text); font-family:var(--sans); min-height:100vh; line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--marke-hell)}
.wrap{max-width:1280px; margin:0 auto; padding:0 20px}
header{padding:30px 0 8px}

/* --- Kopfzeile: Marke links, Rückweg rechts ------------------------------ */
.lx-top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
/* Wortmarke wie auf der Hauptseite (gp-brand): Kachel-Symbol mit Radius und
   Schatten, Laufweite .02em, PHORA im aufgehellten Marken-Blau. */
.brand{display:inline-flex; align-items:center; gap:.6em; font-weight:800; letter-spacing:.02em; font-size:1.05rem}
.brand .mark{width:30px;height:30px;border-radius:8px;overflow:hidden;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.brand .mark img{width:30px;height:30px;display:block}
.brand__txt{white-space:nowrap}
.brand b{color:var(--marke-hell)}
.lx-back{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--soft);
  font-size:.85rem; font-weight:600; border:1px solid var(--border); background:var(--card);
  border-radius:999px; padding:7px 15px 7px 11px; transition:all .15s}
.lx-back:hover{border-color:var(--marke-hell); color:var(--text); transform:translateX(-2px)}
.lx-back__ar{font-family:var(--mono); color:var(--marke-hell); font-size:1rem; line-height:1}

/* --- Modus-Leiste: identisch auf allen fünf Seiten der Familie ----------- */
.lx-modi{display:flex; gap:7px; margin:14px 0 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px}
.lx-modi::-webkit-scrollbar{display:none}
.lx-modi__tab{flex:0 0 auto; font-size:.84rem; font-weight:600; text-decoration:none;
  color:var(--soft); border:1.5px solid var(--border); background:var(--card);
  border-radius:999px; padding:7px 15px; transition:all .15s}
.lx-modi__tab:hover{border-color:var(--border2); color:var(--text)}
/* Aktiver Modus: Unterstreichung im aufgehellten Markenblau —
   Teal bleibt den Daten vorbehalten. */
.lx-modi__tab.is-akt{border-color:var(--marke-hell); background:rgba(107,163,198,.12);
  color:var(--text); text-decoration:underline; text-decoration-color:var(--marke-hell);
  text-decoration-thickness:2px; text-underline-offset:4px}

/* --- Flughöhen-Spanne: Mono-Zeile, verweist auf die Dach-Seite ----------- */
.gp-spanne{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; margin:10px 0 0}
.gp-spanne a{color:var(--marke-hell); text-decoration:underline;
  text-decoration-color:rgba(107,163,198,.45); text-underline-offset:3px}

/* --- Fußzeile: eine Linkzeile + dezente Claim-Zeile ---------------------- */
footer{color:var(--faint); font-size:.85rem; padding:18px 0 44px; text-align:center; line-height:1.6}
footer a{color:var(--soft)}
.lx-claim{display:block; margin-top:7px; font-size:.78rem; color:rgba(242,242,239,.6)}

/* =========================================================================
   Helle Erzählfassung — Body-Schalter .lx--hell (Hub, Technik-Seite).
   Alle Regeln hängen am Schalter: die dunklen Werkzeugseiten bleiben
   unberührt. Das gemeinsame Werkbank-Chrome (Kopfzeile + Modus-Leiste)
   bleibt auch hier Tinte — dafür trägt der Hub das Band .lx-chrome.
   ========================================================================= */
body.lx--hell{background:var(--kreide-grund); color:var(--kreide-tinte)}
.lx--hell a{color:var(--akzent-tief)}
/* Dunkles Band über der Kreide: Wortmarke, Rückweg und Modi behalten ihre
   Werkbank-Farben aus den Regeln oben — Grund UND Textfarbe kommen vom Band,
   sonst erbte die Wortmarke die Tinte des hellen Bodys. */
.lx--hell .lx-chrome{background:var(--ink-900); color:var(--text); padding:16px 0 13px}
.lx--hell .gp-spanne a{color:var(--akzent-tief); text-decoration-color:rgba(47,109,147,.45)}
.lx--hell footer{color:rgba(36,38,42,.72)}
.lx--hell footer a{color:var(--akzent-tief)}
.lx--hell .lx-claim{color:rgba(36,38,42,.6)}

/* =========================================================================
   Karten-Controls, 3.2 — MapLibre-Chrome im Werkbank-Ton.
   Dunkle Fassung (NDVI-Monitor): Buttons auf #101822, Vendor-Icons per
   Invert auf Kreide gedreht — konservativ, ohne die SVGs anzufassen.
   Wichtig: das Vendor-Stylesheet muss VOR dieser Datei geladen sein.
   Nur Chrome — Karteninhalte, AOI-Linien und Legenden bleiben unberührt.
   ========================================================================= */
.maplibregl-ctrl-group{background:#101822; border:1px solid rgba(242,242,239,.18)}
.maplibregl-ctrl-group:not(:empty){box-shadow:0 4px 14px rgba(0,0,0,.45)}
.maplibregl-ctrl-group button+button{border-top:1px solid rgba(242,242,239,.12)}
.maplibregl-ctrl button:not(:disabled):hover{background-color:rgba(242,242,239,.08)}
.maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(.9)}
.maplibregl-ctrl.maplibregl-ctrl-attrib{background:rgba(12,19,32,.75); color:rgba(242,242,239,.7)}
.maplibregl-ctrl-attrib a{color:var(--marke-hell)}
.maplibregl-ctrl-scale{background:rgba(12,19,32,.6); border-color:rgba(242,242,239,.55); color:rgba(242,242,239,.8)}
/* Helle Fassung (Technik-Seite): Surface + Haarlinie + Tinte. */
.lx--hell .maplibregl-ctrl-group{background:var(--kreide-karte); border:1px solid var(--kreide-linie)}
.lx--hell .maplibregl-ctrl-group:not(:empty){box-shadow:0 4px 12px rgba(36,38,42,.14)}
.lx--hell .maplibregl-ctrl-group button+button{border-top:1px solid var(--kreide-linie)}
.lx--hell .maplibregl-ctrl button:not(:disabled):hover{background-color:rgba(36,38,42,.06)}
.lx--hell .maplibregl-ctrl button .maplibregl-ctrl-icon{filter:none}
.lx--hell .maplibregl-ctrl.maplibregl-ctrl-attrib{background:rgba(248,248,245,.85); color:rgba(36,38,42,.75)}
.lx--hell .maplibregl-ctrl-attrib a{color:var(--akzent-tief)}
.lx--hell .maplibregl-ctrl-scale{background:rgba(248,248,245,.8); border-color:rgba(36,38,42,.55); color:rgba(36,38,42,.8)}

@media(max-width:640px){
  header{padding:18px 0 2px}
  .wrap{padding:0 14px}
}