/* ============================================================================
 * theme.css — Dunkelmodus fuer lx-virtual.com
 * ----------------------------------------------------------------------------
 * Eine Datei fuer alle Seiten. Sie wird **nach** dem seiteneigenen <style>
 * eingebunden, damit die Dunkelwerte die hellen Grundwerte der Seite schlagen.
 * Reihenfolge im <head>:
 *
 *     <script> … data-theme setzen … </script>   (gegen den Weissblitz)
 *     <style> … die Seite selbst … </style>
 *     <link rel="stylesheet" href="/assets/theme.css">
 *     <script src="/assets/theme.js" defer></script>
 *
 * Drei Zustaende, wie der Schalter sie kennt:
 *   - nichts gesetzt        → das Betriebssystem entscheidet
 *   - data-theme="light"    → ausdruecklich hell, schlaegt das System
 *   - data-theme="dark"     → ausdruecklich dunkel, schlaegt das System
 *
 * WICHTIG: Farben immer ueber die Tokens setzen, nie direkt in einem
 * @media- oder [data-theme]-Block. Sonst gilt die Regel im dritten Zustand
 * (nichts gesetzt, System hell) gar nicht — und die Seite steht schief.
 *
 * ----------------------------------------------------------------------------
 * Herkunft der Dunkelwerte — brands/lx aus dem virtual-brand-system
 * ----------------------------------------------------------------------------
 * Das Brandbook sagt ausdruecklich: „SWISS selbst hat keine dunkle Welt — die
 * Website ist durchgehend weiss." Der Alpine-Anthrazit-Verlauf ist als
 * LXV-Erweiterung dokumentiert, und genau aus dessen drei Stufen ist diese
 * Datei gebaut:
 *
 *   Alpine Anthracite 1  #323232   Verlauf oben
 *   Alpine Anthracite 2  #212121   dunkle Welt, Panels
 *   Alpine Anthracite 3  #121212   Verlauf unten, Scrims
 *   Alpine Mist          #929292   Sekundaertext auf Anthrazit
 *   Line dunkel          #3D3D3D   Trennlinien
 *   Ink                  #101010   (hell die Schrift, dunkel der Seitengrund)
 *
 * Zwei Brandregeln steuern alles Weitere:
 *
 *   1. „Graustufen bleiben neutral, nicht blaustichig." Deshalb steht hier
 *      kein einziger blau getoenter Grauwert — anders als bei LH Virtual, wo
 *      der Nachtblau-Stich das Lufthansa-Erbe ist.
 *   2. „Auf Rot steht immer Weiss" und „Rot bleibt unter ~10 % jeder Flaeche."
 *      Die rote FLAECHE bleibt deshalb auch im Dunkeln das echte Swiss Red
 *      #CC0000 mit weisser Schrift (5,9:1). Nur wo Rot selbst zur SCHRIFT
 *      wird — Links, Marken, Zaehler — braucht es einen aufgehellten Ton:
 *      #CC0000 auf #1A1A1A traegt nur 3,0:1 und faellt damit durch.
 *
 * Alle Kontraste unten sind gerechnet (WCAG 2.1 relative Luminanz), nicht
 * geschaetzt — so verlangt es die Abnahme-Checkliste der Brand-Integrations-
 * Vorgabe.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Rueckfallebene.
 *
 * Die Dunkelwerte weiter unten ueberschreiben Tokens, die jede Seite in ihrem
 * eigenen <style> definiert — aber nicht jede Seite definiert jedes. Die
 * Startseite kennt `--red` und `--glacier`, das Dashboard `--yellow` und
 * `--cloud`; die Kontomenue-Stile in assets/site.js greifen auf BEIDE
 * Vokabulare zu und liefen auf der Website bisher ins Leere.
 *
 * `html` wiegt weniger als `:root` (0,0,1 gegen 0,1,0). Diese Werte fuellen
 * deshalb nur Luecken und ueberschreiben nie, was eine Seite selbst gesetzt
 * hat — auch dann nicht, wenn theme.css spaeter geladen wird.
 * ------------------------------------------------------------------------ */
html {
  /* Website-Vokabular */
  --red: #CC0000;
  --red-deep: #990000;
  --on-red: #FFFFFF;
  --anthra-1: #323232;
  --anthra-2: #212121;
  --anthra-3: #121212;
  --glacier: #F4F5F7;
  --mist: #929292;
  --warm-grey: #6F6660;
  --pine-grey: #554E49;

  /* Dashboard-Vokabular */
  --navy: #101010;
  --deep: #121212;
  --night-1: #323232;
  --night-2: #212121;
  --night-3: #121212;
  --yellow: #CC0000;
  --cloud: #F4F5F7;
  --muted-dark: #929292;
  --action-hover: #990000;
  --interactive: #CC0000;
  --interactive-hover: #990000;
  --interactive-inv: #F4F5F7;
  --interactive-inv-hover: #FFFFFF;
  --selection: #CC0000;

  /* Gemeinsam */
  --paper: #FFFFFF;
  --line: #E2E4E8;
  --line-dark: #3D3D3D;
  --ink: #101010;
  --muted: #666666;
  --focus: #0968F6;
  --focus-inv: #FFFFFF;
  --shadow: 0 10px 40px rgba(18, 18, 18, .10);
  --head: 'LHV Head', 'Segoe UI', Arial, sans-serif;
  --text: 'LHV Text', 'Segoe UI', Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Rollen-Tokens. Sie fehlen im Bestand und sind die Voraussetzung dafuer, dass
 * ueberhaupt etwas kippen kann:
 *
 *   --ink-brand  Markenschrift (Ueberschriften). Stand bisher als --navy in
 *                der Schrift UND in Flaechen — ein Token fuer zwei Rollen kann
 *                nicht kippen, weil die eine Rolle hell und die andere dunkel
 *                will. Auf der Website macht das --ink, dort geht es auf.
 *   --on-accent  Schrift auf Rot. Machte im Dashboard bisher --deep, also
 *                Anthrazit auf Rot: 3,2:1 und damit unter der Schwelle — und
 *                dazu gegen die ausdrueckliche Brandregel „auf Rot steht immer
 *                Weiss" (5,9:1). Als eigenes Token steht es jetzt richtig und
 *                kann im Dunkeln nicht mit --deep davonlaufen.
 *   --paper-2    Angehobene Flaeche (Tabellenkopf, Hover, Reiter). Wurde
 *                bisher mit #fff improvisiert.
 *   --accent-ink Rot als SCHRIFT statt als Flaeche. Hell dasselbe Rot, dunkel
 *                aufgehellt — siehe Kopfkommentar.
 * ------------------------------------------------------------------------ */
:root {
  --ink-brand: #101010;
  --on-accent: #FFFFFF;
  --paper-2: #FAFBFC;
  --accent-ink: #CC0000;

  /* Der durchscheinende Seitenkopf. Stand als rgba(255,255,255,.93) fest in
     jeder Seite und konnte deshalb nicht mitkippen. */
  --surface-blur: rgba(255, 255, 255, .93);

  /* Kategorie-Marken der Meldungen und Event-Tags. Sie standen als feste
     Wertepaare in index.html — dunkle Schrift auf heller Toenung, im
     Dunkelmodus unlesbar. Als Tokens drehen sie mit: helle Schrift auf
     dunkler Toenung. */
  /* Der Akzent als grosse FLAECHE — Giveaway-Karte, Gewinner-Banner. Die
     Chip-Toenung --cat-news-bg traegt auf 20x40 px, auf einer halben
     Bildschirmbreite wird daraus ein rotes Feld und die Brandregel „Rot
     bleibt unter ~10 % jeder Flaeche" kippt. Deshalb dieselbe Farbe, aber
     halb so laut. */
  --akzent-wasch:  rgba(204, 0, 0, .07);

  --cat-news:      #990000;  --cat-news-bg:      rgba(204, 0, 0, .15);
  --cat-fleet:     #101010;  --cat-fleet-bg:     rgba(26, 29, 35, .08);
  --cat-routes:    #1E7A43;  --cat-routes-bg:    rgba(41, 166, 90, .12);
  --cat-community: #7D3C98;  --cat-community-bg: rgba(155, 89, 182, .12);
  --cat-ops:       #43536E;  --cat-ops-bg:       rgba(90, 106, 133, .14);

  /* Zustandsfarben. Sie standen als feste Wertepaare im Dashboard — dunkle
     Schrift auf heller Toenung. Als Tokens drehen sie sich um: helle Schrift
     auf dunkler Toenung. Die Bedeutung bleibt in beiden Modi dieselbe, nur
     die Helligkeit dreht. Gut ist gruen, kritisch ist rot — immer. */
  --ok:           #187044;  --ok-soft:   #E5F6ED;  --ok-line:   #BFE6D0;
  --warn:         #8B6200;  --warn-soft: #FFF3D6;  --warn-line: #F0D38A;
  --bad:          #B23A3A;  --bad-soft:  #FDEAEA;  --bad-line:  #E5B4B4;
  --bad-hover:    #AC3434;
  --bad-strong:   #A31F2E;  --bad-strong-hover: #861724;
  /* Schrift AUF der Zustandsfarbe. Dieselbe Falle wie --on-accent: kippt
     --bad nach Hell, muss die Schrift darauf nach Dunkel. */
  --on-bad:       #FFFFFF;
  --info:         #265CA8;  --info-soft: #E7EFFD;  --info-line: #C4D1ED;
  --neutral-soft: #EEF1F6;  --neutral-ink: #65748D;

  /* Der ausgewaehlte Eintrag einer Liste — eDesk-Ordner, Reiter, Unter-Tabs.
     Bisher machte das --navy (#101010). Im Dunkeln ist --navy eine dunkle
     Flaeche und traefe damit fast punktgenau den Grund, auf dem solche Listen
     liegen: die Auswahl verschwaende spurlos.

     Eine eigene Rolle, weil sie in beiden Modi dasselbe leisten muss: sich
     von --paper-2 absetzen. Hell tut das eine dunkle Flaeche, dunkel eine
     helle — dieselbe Umkehrung wie bei den Zustandsfarben.

     Der Dunkelwert #D93A32 ist nicht frei gewaehlt, sondern die Stelle, an
     der beide Schwellen zusammen aufgehen: 3,4:1 der Flaeche gegen --paper-2
     (1.4.11 verlangt 3:1) und 4,6:1 fuer die weisse Schrift darauf. Heller
     faellt die Schrift durch, dunkler die Flaeche. Dass es ein Rot ist und
     kein Grau, folgt dem Brandbook: `interaction-selection = lx-red`. */
  --auswahl:     #101010;
  --auf-auswahl: #FFFFFF;

  /* Der Glanzstreifen der Lade-Platzhalter. Er muss sich von --skeleton-grund
     absetzen — in beiden Modi in dieselbe Richtung, naemlich heller. */
  --skeleton-grund: #EDF0F5;
  --skeleton-glanz: #F7F8FA;

  /* Farbstreifen der Gesellschaften an den Flugkarten des Pilot Centers.
     Alle drei sind fuer Weiss gerechnet und verschwinden auf Anthrazit; im
     Dunkeln stehen sie deshalb aufgehellt.

     --brand-wk ist Edelweiss Blue aus brands/lx. Auf Weiss traegt es 10,7:1,
     auf --paper im Dunkeln aber nur 1,6:1 — ein 4px-Streifen waere dort
     schlicht nicht da. Der Dunkelwert ist derselbe Ton, 25 % nach Weiss
     gemischt: 3,3:1 auf der Karte und 3,5:1 auf der Nachtkarte, womit er auf
     jeder Flaeche besser steht als das laengst akzeptierte Swiss Red
     (3,0:1 bzw. 3,2:1). Denselben Ton traegt plane_EDW.png auf der Livemap. */
  --brand-lh:  #05164D;
  --brand-dla: #00A6B2;
  --brand-wk:  #003D7C;

  /* Schwebende Ebenen — Konto-Menue, Hover-Karten, Toasts, Modale. Sie liegen
     ueber dem Inhalt und muessen sich davon absetzen. Im Hellmodus erledigt
     das der Schatten allein: eine weisse Flaeche auf hellem Grund. Im Dunkeln
     taugt das nicht — ein Schatten auf dunklem Grund ist unsichtbar und
     --paper liegt zu nah an der Seite. Deshalb eigene Werte: eine deutlich
     hellere Flaeche, eine kraeftigere Kante und ein echter schwarzer
     Schatten. */
  --schwebe-flaeche:  #FFFFFF;
  --schwebe-kante:    #E2E4E8;
  --schwebe-schatten: 0 18px 48px rgba(18, 18, 18, .20);

  /* Der Scrim ueber den Modal-Hintergruenden. Hell ein dunkles Anthrazit,
     dunkel ein noch tieferes Schwarz — sonst hebt sich der Dialog nicht mehr
     von einer ohnehin dunklen Seite ab. */
  --scrim: rgba(18, 18, 18, .70);

  color-scheme: light;
}

/* --------------------------------------------------------------- Dunkelwerte
 * Einmal geschrieben, zweimal angewendet: ueber das System und ueber die
 * ausdrueckliche Wahl. Die Liste bleibt bewusst an EINER Stelle im Quelltext
 * (siehe unten die Wiederholung fuer [data-theme="dark"]), damit sie nicht
 * auseinanderlaeuft — wer hier etwas aendert, aendert es unten mit.
 *
 * Die Staffelung der Flaechen, von tief nach hoch:
 *
 *   --cloud / --glacier  #101010   Seitengrund (Dashboard) bzw. Sektionsband
 *   --paper              #1A1A1A   Karten, Panels, Website-Grund
 *   --paper-2            #242424   angehoben: Tabellenkopf, Hover, Reiter
 *   --navy               #333333   Flaechenrolle: die dunklen Scheiben der
 *                                  Markenzeichen (Rang, Abzeichen, Toast)
 *                                  und das Kopfband der Modale
 *
 * Die Richtung ist dieselbe wie im Hellmodus: dort liegen die Karten (#FFF)
 * ueber dem Seitengrund (#F4F5F7), hier liegt #1A1A1A ueber #101010. Der
 * Abstand ist bei Beinahe-Schwarz naturgemaess klein — getragen wird die
 * Trennung von --line (#3D3D3D, der Brand-Wert), genau wie SWISS es macht:
 * Kante statt Schatten.
 * ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Flaechen */
    --paper:    #1A1A1A;
    --paper-2:  #242424;
    --cloud:    #101010;
    --glacier:  #101010;
    --navy:     #333333;
    --deep:     #0C0C0C;
    --night-1:  #2A2A2A;
    --night-2:  #1A1A1A;
    --night-3:  #0C0C0C;
    --anthra-1: #3A3A3A;
    --anthra-2: #262626;
    --anthra-3: #161616;
    --line:      #3D3D3D;
    --line-dark: #4A4A4A;

    /* Schrift — neutral, nicht blaustichig (Brandregel) */
    --ink:        #EDEDED;   /* 14,9:1 auf --paper */
    --ink-brand:  #FFFFFF;
    --muted:      #929292;   /* Alpine Mist, 5,6:1 auf --paper */
    --mist:       #A8A8A8;
    --muted-dark: #929292;

    /* Rot. Die Flaeche bleibt Markenrot, die Schrift wird aufgehellt. */
    --red:        #CC0000;
    --yellow:     #CC0000;
    --on-red:     #FFFFFF;
    --on-accent:  #FFFFFF;
    /* Hover geht im Dunkeln nach OBEN — #990000 wuerde in den Grund fallen. */
    --red-deep:     #E01414;
    --action-hover: #E01414;
    /* Rot als Schrift: 5,7:1 auf --paper, 5,1:1 auf --paper-2. */
    --accent-ink:        #FF5A52;
    --interactive:       #FF5A52;
    --interactive-hover: #FF8079;
    --selection:         #D93A32;
    /* --interactive-inv/-inv-hover bleiben absichtlich stehen: sie gelten auf
       dunklem Grund, und der ist in beiden Modi dunkel. */

    /* Sekundaerfarbe. Warm Grey und Pine Grey sind fuer Weiss gerechnet und
       fallen auf Anthrazit durch — aufgehellt bleiben sie warm. */
    --warm-grey: #A79C94;
    --pine-grey: #C0B6AE;

    /* Fokusring. Das Brandbook fuehrt Electric Blue fuer Hell und schreibt
       fuer Dunkel ausdruecklich Weiss vor (--lxv-focus-inverted). */
    --focus:     #FFFFFF;
    --focus-inv: #FFFFFF;

    --shadow: 0 14px 44px rgba(0, 0, 0, .60);
    --surface-blur: rgba(16, 16, 16, .92);
    --scrim: rgba(0, 0, 0, .74);

    --akzent-wasch:  rgba(255, 90, 82, .08);
    --cat-news:      #FF8079;  --cat-news-bg:      rgba(255, 90, 82, .16);
    --cat-fleet:     #FFFFFF;  --cat-fleet-bg:     rgba(255, 255, 255, .10);
    --cat-routes:    #5FD48C;  --cat-routes-bg:    rgba(95, 212, 140, .18);
    --cat-community: #C79BE8;  --cat-community-bg: rgba(199, 155, 232, .20);
    --cat-ops:       #B4B4B4;  --cat-ops-bg:       rgba(255, 255, 255, .10);

    --ok:           #5FD48C;  --ok-soft:   #12281C;  --ok-line:   #1E5A3A;
    --warn:         #F5B547;  --warn-soft: #2A2013;  --warn-line: #55431B;
    --bad:          #FF8F86;  --bad-soft:  #2C1614;  --bad-line:  #6B2A25;
    --bad-hover:    #FFA9A1;
    --bad-strong:   #C22D3A;  --bad-strong-hover: #E0414E;
    --on-bad:       #2C1614;
    --info:         #7FB6FF;  --info-soft: #16213A;  --info-line: #2A4A80;
    --neutral-soft: #242424;  --neutral-ink: #A8A8A8;

    --auswahl:     #D93A32;
    --auf-auswahl: #FFFFFF;

    --skeleton-grund: #1E1E1E;
    --skeleton-glanz: #2C2C2C;

    --brand-lh:  #7C93D8;
    --brand-dla: #45C8D2;
    --brand-wk:  #406E9D;

    --schwebe-flaeche:  #242424;
    --schwebe-kante:    #4A4A4A;
    --schwebe-schatten: 0 20px 50px rgba(0, 0, 0, .70);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:    #1A1A1A;
  --paper-2:  #242424;
  --cloud:    #101010;
  --glacier:  #101010;
  --navy:     #333333;
  --deep:     #0C0C0C;
  --night-1:  #2A2A2A;
  --night-2:  #1A1A1A;
  --night-3:  #0C0C0C;
  --anthra-1: #3A3A3A;
  --anthra-2: #262626;
  --anthra-3: #161616;
  --line:      #3D3D3D;
  --line-dark: #4A4A4A;

  --ink:        #EDEDED;
  --ink-brand:  #FFFFFF;
  --muted:      #929292;
  --mist:       #A8A8A8;
  --muted-dark: #929292;

  --red:        #CC0000;
  --yellow:     #CC0000;
  --on-red:     #FFFFFF;
  --on-accent:  #FFFFFF;
  --red-deep:     #E01414;
  --action-hover: #E01414;
  --accent-ink:        #FF5A52;
  --interactive:       #FF5A52;
  --interactive-hover: #FF8079;
  --selection:         #D93A32;
  /* s.o. — die -inv-Paare bleiben hell. */

  --warm-grey: #A79C94;
  --pine-grey: #C0B6AE;

  --focus:     #FFFFFF;
  --focus-inv: #FFFFFF;

  --shadow: 0 14px 44px rgba(0, 0, 0, .60);
  --surface-blur: rgba(16, 16, 16, .92);
  --scrim: rgba(0, 0, 0, .74);

  --akzent-wasch:  rgba(255, 90, 82, .08);
  --cat-news:      #FF8079;  --cat-news-bg:      rgba(255, 90, 82, .16);
  --cat-fleet:     #FFFFFF;  --cat-fleet-bg:     rgba(255, 255, 255, .10);
  --cat-routes:    #5FD48C;  --cat-routes-bg:    rgba(95, 212, 140, .18);
  --cat-community: #C79BE8;  --cat-community-bg: rgba(199, 155, 232, .20);
  --cat-ops:       #B4B4B4;  --cat-ops-bg:       rgba(255, 255, 255, .10);

  --ok:           #5FD48C;  --ok-soft:   #12281C;  --ok-line:   #1E5A3A;
  --warn:         #F5B547;  --warn-soft: #2A2013;  --warn-line: #55431B;
  --bad:          #FF8F86;  --bad-soft:  #2C1614;  --bad-line:  #6B2A25;
  --bad-hover:    #FFA9A1;
  --bad-strong:   #C22D3A;  --bad-strong-hover: #E0414E;
  --on-bad:       #2C1614;
  --info:         #7FB6FF;  --info-soft: #16213A;  --info-line: #2A4A80;
  --neutral-soft: #242424;  --neutral-ink: #A8A8A8;

  --auswahl:     #D93A32;
  --auf-auswahl: #FFFFFF;

  --skeleton-grund: #1E1E1E;
  --skeleton-glanz: #2C2C2C;

  --brand-lh:  #7C93D8;
  --brand-dla: #45C8D2;
  --brand-wk:  #406E9D;

  --schwebe-flaeche:  #242424;
  --schwebe-kante:    #4A4A4A;
  --schwebe-schatten: 0 20px 50px rgba(0, 0, 0, .70);
}

/* --------------------------------------------------------------- Der Schalter
 * Sonne oder Mond, 58x30 — und ausdruecklich KEINE Pille.
 *
 * „SWISS ist scharfkantig — 228 von 247 gemessenen Elementen stehen auf
 * border-radius: 0. LX Virtual mildert das auf 2 px ab. Nie die 14 px aus dem
 * LH-System: die Rundung ist Lufthansa, nicht Schweiz." Der LH-Schalter ist
 * eine 999px-Pille mit rundem Knauf; hier sind Bahn und Knauf rechteckig mit
 * 2 px, wie jedes andere Bedienelement der LX-Oberflaeche auch.
 *
 * Er liegt auf jeder Flaeche, auf der er vorkommt: heller Seitenkopf, dunkle
 * Dashboard-Kopfzeile, Anthrazit-Hero. Deshalb zeichnet er sich aus --line und
 * --ink-brand und nicht aus festen Werten.
 * ------------------------------------------------------------------------ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 58px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--glacier);
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--interactive); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.theme-toggle .tt-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 24px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  background: var(--ink-brand);
  color: var(--paper);
  transition: transform .26s cubic-bezier(.4, 1.4, .5, 1), background .22s ease, color .22s ease;
}
/*
 * Sonne und Mond liegen beide im Knauf; sichtbar ist immer genau einer.
 * Zeigen, Verstecken und die Groessenregel tragen dieselbe Spezifitaet
 * (0,2,1) — sonst gewinnt die Groessenregel mit ihrem display und beide
 * Symbole stehen uebereinander.
 */
.theme-toggle .tt-knob svg { width: 14px; height: 14px; }
.theme-toggle .tt-knob .tt-sun  { display: block; }
.theme-toggle .tt-knob .tt-moon { display: none; }

.theme-toggle[aria-checked="true"] {
  background: var(--anthra-2);
  border-color: var(--line-dark);
}
.theme-toggle[aria-checked="true"] .tt-knob {
  transform: translateX(28px);
  /* Auf dem Knauf steht der Akzent — und darauf nach Brandregel immer Weiss. */
  background: var(--red);
  color: var(--on-accent);
}
.theme-toggle[aria-checked="true"] .tt-knob .tt-sun  { display: none; }
.theme-toggle[aria-checked="true"] .tt-knob .tt-moon { display: block; }

/* Auf Anthrazit-Flaechen (Hero, Community-Band, Livemap, Dashboard-Kopf)
   steht er auf Dunkel — dort braucht die Kante mehr Kontrast als --line
   hergibt. */
.on-night .theme-toggle,
.lm .theme-toggle,
.community .theme-toggle,
.pagehead .theme-toggle {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
}
.on-night .theme-toggle .tt-knob,
.lm .theme-toggle .tt-knob,
.community .theme-toggle .tt-knob,
.pagehead .theme-toggle .tt-knob { background: #fff; color: var(--anthra-3); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle .tt-knob { transition: none; }
}

/* Vor dem ersten Klick folgt die Seite dem System — dann darf der Schalter
   nicht so tun, als sei eine Wahl getroffen worden: der Knauf steht grau
   statt auf der Markenfarbe. Das Symbol muss dann mitdrehen, sonst stuende
   Weiss auf Alpine Mist (2,2:1) und der Mond verschwaende halb. */
.theme-toggle[data-choice="auto"] .tt-knob { background: var(--mist); color: var(--anthra-3); }

/* Am Handy wird es eng: die Kopfleiste traegt dort Wortmarke, Anmeldeknopf und
   jetzt zusaetzlich den Schalter. Ohne diese Regeln laeuft er ueber die rechte
   Kante hinaus. Das Polster wird nur im `header` schmaler, nicht auf der
   ganzen Seite — und die Wortmarke bleibt unangetastet. */
@media (max-width: 560px) {
  header .wrap { padding-left: 16px; padding-right: 16px; }
  header .nav { gap: 14px; }
  .theme-toggle { width: 50px; height: 28px; }
  .theme-toggle .tt-knob { width: 22px; height: 22px; }
  .theme-toggle .tt-knob svg { width: 12px; height: 12px; }
  .theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(24px); }
}

/* ------------------------------------------------------- Allgemeine Nachlese
 * Stellen, die sich nicht ueber ein Token loesen lassen, weil sie im Bestand
 * mit rgba() oder festen Werten gesetzt sind. Bewusst kurz gehalten: was hier
 * landet, gehoert eigentlich in ein Token.
 * ------------------------------------------------------------------------ */

/* Fotos und Screenshots strahlen im Dunkeln. Ein Hauch weniger Helligkeit
   nimmt das Leuchten, ohne das Motiv zu verfaelschen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.dm-dim,
  :root:not([data-theme="light"]) .cinema .cslide img,
  :root:not([data-theme="light"]) .discordband .shot img,
  :root:not([data-theme="light"]) .fleet-photo img { filter: brightness(.86) contrast(1.02); }
}
:root[data-theme="dark"] img.dm-dim,
:root[data-theme="dark"] .cinema .cslide img,
:root[data-theme="dark"] .discordband .shot img,
:root[data-theme="dark"] .fleet-photo img { filter: brightness(.86) contrast(1.02); }

/* Die Auswahlfarbe. Auf Rot steht Weiss — auch hier. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection { background: var(--selection); color: #fff; }
}
:root[data-theme="dark"] ::selection { background: var(--selection); color: #fff; }

/* ------------------------------------------------------------------- Marke
 * Die rote Wortmarke steht auf hellem Grund. Im Dunkeln muss sie weiss werden
 * — genau das ist LXV_Logo_White.svg. Statt die Quelle per Skript zu tauschen
 * (und dabei kurz das rote Bild zu zeigen) faerbt der Filter sie sofort um:
 * die Marke ist einfarbig, das Ergebnis ist deckungsgleich mit der weissen
 * Datei.
 *
 * Das Gate des Dashboards traegt dieselbe rote Datei auf einer Karte, die im
 * Dunkeln ebenfalls dunkel wird — deshalb steht es hier mit drin.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header .logo img,
  :root:not([data-theme="light"]) footer .logo img,
  :root:not([data-theme="light"]) .gate-card > img { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] header .logo img,
:root[data-theme="dark"] footer .logo img,
:root[data-theme="dark"] .gate-card > img { filter: brightness(0) invert(1); }

/* Partner-Band und Footer stehen in beiden Modi auf Anthrazit — die weiss
   ausgestanzten Partnerlogos und die Alpen-Polygone (rgba(255,255,255,.05)
   als data-URI) tragen dort unveraendert weiter und brauchen keine
   Sonderbehandlung. Gemessen: mit und ohne Ausgleich identisch. */

/* ------------------------------------------------------- Dashboard-Leiste
 * Die Seitenleiste ist in beiden Modi dunkel. Im Hellmodus markiert eine
 * weisse Fuellung den aktiven Punkt; im Dunkelmodus stuende Weiss auf einer
 * Leiste, die selbst fast schwarz ist — das traegt, ist aber zu laut. Dort
 * uebernimmt die Auswahlfarbe, die auf der Nachtflaeche ohnehin die
 * Signalfarbe ist.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) aside nav button.on,
  :root:not([data-theme="light"]) aside nav a.on {
    background: var(--auswahl);
    color: var(--auf-auswahl);
  }
}
:root[data-theme="dark"] aside nav button.on,
:root[data-theme="dark"] aside nav a.on {
  background: var(--auswahl);
  color: var(--auf-auswahl);
}

/* ------------------------------------------------------- Alpen ueber der Marke
 * Der Bergruecken, den assets/site.js beim Ueberfahren der Wortmarke zeichnet,
 * legt zwei Waschungen aus rgba(204,0,0,.04/.07) unter die Linie. Auf Weiss
 * ist das ein Hauch, auf Anthrazit gar nichts mehr. Die Linie selbst zeichnet
 * sich inzwischen aus --accent-ink und braucht hier nichts; nur die Fuellungen
 * kommen mit etwas mehr Deckkraft zurueck.
 *
 * Die Regeln stehen bewusst hier und nicht in site.js: das eingespritzte
 * <style> haengt spaeter im <head> als diese Datei, sticht sie bei gleicher
 * Spezifitaet also aus. Der [data-theme]-Vorsatz hebt die Regeln darueber.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lxv-peaks .fill-far  { fill: rgba(255, 90, 82, .09); }
  :root:not([data-theme="light"]) .lxv-peaks .fill-near { fill: rgba(255, 90, 82, .14); }
}
:root[data-theme="dark"] .lxv-peaks .fill-far  { fill: rgba(255, 90, 82, .09); }
:root[data-theme="dark"] .lxv-peaks .fill-near { fill: rgba(255, 90, 82, .14); }

/* ---------------------------------------------------- Wasserzeichen im KPI
 * Die KPI-Kacheln des Pilot Centers tragen unten rechts das LX-Leitwerk als
 * angeschnittenes Wasserzeichen. Es wird mit `brightness(0)` schwarz gefaerbt
 * und mit 4,5 % Deckkraft auf die weisse Karte gelegt — auf Anthrazit ist
 * Schwarz auf Schwarz nichts mehr. Umgekehrt gefaerbt und etwas kraeftiger
 * steht dieselbe Andeutung wieder da.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .overview-kpi::after {
    filter: brightness(0) invert(1);
    opacity: .07;
  }
}
:root[data-theme="dark"] .overview-kpi::after {
  filter: brightness(0) invert(1);
  opacity: .07;
}
