/* ============================================================================
 * theme.css — Dunkelmodus für lh-virtual.com
 * ----------------------------------------------------------------------------
 * Eine Datei für 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 Weißblitz)
 *     <style> … die Seite selbst … </style>
 *     <link rel="stylesheet" href="assets/theme.css">
 *     <script src="assets/theme.js" defer></script>
 *
 * Drei Zustände, wie der Schalter sie kennt:
 *   - nichts gesetzt        → das Betriebssystem entscheidet
 *   - data-theme="light"    → ausdrücklich hell, schlägt das System
 *   - data-theme="dark"     → ausdrücklich dunkel, schlägt das System
 *
 * WICHTIG: Farben immer über 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.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Rueckfallebene.
 *
 * Die Dunkelwerte weiter unten ueberschreiben Tokens, die jede Seite bisher in
 * ihrem eigenen <style> definiert — aber nicht jede Seite definiert jedes.
 * `livemap` etwa kennt kein --selection; eine Regel, die es benutzt, faellt
 * dort im Hellmodus aus und die Schrift steht auf ihrer eigenen Farbe.
 *
 * `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 {
  --navy: #00235F;
  --deep: #05164D;
  --night-1: #0A226B;
  --night-2: #071A55;
  --night-3: #041034;
  --yellow: #FFAD00;
  --paper: #FFFFFF;
  --cloud: #F4F6FA;
  --line: #E1E6EF;
  --line-dark: #1D3468;
  --ink: #0F1B33;
  --muted: #5A6A85;
  --muted-dark: #93A3C4;
  --action-hover: #FFBD32;
  --interactive: #52627C;
  --interactive-hover: #414E63;
  --interactive-inv: #EBEBEB;
  --interactive-inv-hover: #FFFFFF;
  --selection: #00235F;
  --focus: #0968F6;
  --focus-inv: #FFFFFF;
  --shadow: 0 10px 40px rgba(0, 35, 95, .10);
}

/* ---------------------------------------------------------------------------
 * Rollen-Tokens. Sie fehlen im Bestand und sind die Voraussetzung dafür, dass
 * überhaupt etwas kippen kann:
 *
 *   --ink-brand  Markenschrift (Überschriften). Stand bisher als --navy in der
 *                Schrift UND in Flächen — ein Token für zwei Rollen kann nicht
 *                kippen, weil die eine Rolle hell und die andere dunkel will.
 *   --on-accent  Schrift auf Gelb. Machte bisher --deep. Kippt --deep mit,
 *                wird der gelbe Knopf blassblau auf Gelb.
 *   --paper-2    Angehobene Fläche (Tabellenkopf, Hover, Reiter). Wurde bisher
 *                mit #fff improvisiert.
 * ------------------------------------------------------------------------ */
:root {
  --ink-brand: #00235F;
  --on-accent: #05164D;
  --paper-2:   #F8FAFD;
  /* 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. Sie standen als feste Wertepaare in
     index.html — dunkle Schrift auf heller Tönung, im Dunkelmodus unlesbar.
     Als Tokens drehen sie mit: helle Schrift auf dunkler Tönung. */
  --cat-news:      #9A6A00;  --cat-news-bg:      rgba(255, 173, 0, .15);
  --cat-fleet:     #00235F;  --cat-fleet-bg:     rgba(0, 35, 95, .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 Tönung. Als Tokens drehen sie sich um: helle Schrift
     auf dunkler Tönung. Die Bedeutung bleibt in beiden Modi dieselbe,
     nur die Helligkeit dreht. Gut ist grün, kritisch ist rot — immer. */
  --ok:            #187044;  --ok-soft:      #E5F6ED;  --ok-line:   #BFE6D0;
  --warn:          #8A5B00;  --warn-soft:    #FFF3D6;  --warn-line: #F0D9A0;
  --bad:           #B23A3A;  --bad-soft:     #FDEAEA;  --bad-line:  #E5B4B4;
  --bad-hover:     #AC3434;
  /* Schrift AUF der Zustandsfarbe. Dieselbe Falle wie --on-accent:
     kippt --bad nach Hell, muss die Schrift darauf nach Dunkel. */
  --on-bad:        #FFFFFF;
  --info:          #07529D;  --info-soft:    #EEF2FB;  --info-line: #C4D1ED;
  --neutral-soft:  #EEF1F6;
  /* Der ausgewählte Eintrag einer Liste — eDesk-Ordner, Reiter in einer
     Seitenspalte. Bisher machte das --navy, und das ist genau die Falle aus
     dem Airline-Reiter: --navy kippt im Dunkelmodus auf #0E1E4A und trifft
     dort punktgenau --paper-2, den Grund, auf dem solche Listen liegen. Die
     Auswahl verschwand damit spurlos.

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

     Der Dunkelwert ist nicht frei gewählt, sondern die hellste Stelle, an
     der beide Schwellen noch zusammen aufgehen: 3,18:1 der Fläche gegen
     --paper-2 (1.4.11 verlangt 3:1) und 5,06:1 für die weisse Schrift
     darauf. Dunkler wird die Auswahl unkenntlich, heller die Schrift.
     Hell stehen dieselben Werte bei 14,3:1 und 14,9:1. */
  --auswahl:       #00235F;
  --auf-auswahl:   #FFFFFF;
  /* Der Glanzstreifen der Lade-Platzhalter. Er muss sich von
     --neutral-soft absetzen — in beiden Modi in dieselbe Richtung,
     naemlich heller. */
  --skeleton-glanz: #F7F8FA;
  /* Die grosse Ziffer hinter den Schritt-Karten der Anleitungen. */
  --wasserzeichen: rgba(0, 35, 95, .055);
  /* Marke am aktuellen Kapitel der Anleitungen. Hell traegt die Toenung
     allein — auf Weiss reicht sie. Dunkel nicht, dort kommt der Balken. */
  --kapitel-marke: transparent;

  /* Schwebende Ebenen — Konto-Menue, Auswahllisten. Sie liegen ueber dem
     Inhalt und muessen sich davon absetzen. Im Hellmodus erledigt das der
     Schatten allein: eine weisse Flaeche auf hellgrauem Grund mit einem
     marineblau getoenten Schlagschatten. Im Dunkeln taugt beides nicht —
     eine getoente Toenung auf dunklem Grund ist unsichtbar, und --paper-2
     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:   #E1E6EF;
  --schwebe-schatten: 0 18px 48px rgba(5, 22, 77, .20);

  color-scheme: light;
}

/* --------------------------------------------------------------- Dunkelwerte
 * Einmal geschrieben, zweimal angewendet: über das System und über die
 * ausdrückliche Wahl. Die Liste bleibt bewusst an einer Stelle, damit sie
 * nicht auseinanderläuft.
 * ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Flächen */
    --cloud:    #02091C;
    --paper:    #0A1839;
    --paper-2:  #0E1E4A;
    --navy:     #0E1E4A;
    --deep:     #0A1839;
    --night-1:  #12275C;
    --night-2:  #0C1B44;
    --night-3:  #060F2A;
    --line:     #22376B;
    --line-dark:#2E4A8A;

    /* Schrift */
    --ink:       #E8EEFA;
    --ink-brand: #FFFFFF;
    --muted:     #9FB0D0;

    /* Rollen */
    --action-hover:         #FFC24D;
    --interactive:          #A9B8D4;
    --interactive-hover:    #C8D4EA;
    /* --interactive-inv/-inv-hover bleiben absichtlich stehen: sie gelten auf
       dunklem Grund, und der ist in beiden Modi dunkel. */
    --selection:            #2C4A8C;
    --focus:                #5B9DFF;

    --shadow: 0 14px 44px rgba(0, 0, 0, .55);
    --surface-blur: rgba(6, 14, 36, .90);

    --cat-news:      #FFC24D;  --cat-news-bg:      rgba(255, 173, 0, .16);
    --cat-fleet:     #FFFFFF;  --cat-fleet-bg:     rgba(255, 255, 255, .10);
    --cat-routes:    #5FD48C;  --cat-routes-bg:    rgba(41, 166, 90, .18);
    --cat-community: #C79BE8;  --cat-community-bg: rgba(155, 89, 182, .22);
    --cat-ops:       #A9B8D4;  --cat-ops-bg:       rgba(120, 140, 180, .18);

    --ok:            #5FD48C;  --ok-soft:      #0E2A1B;  --ok-line:   #1E5A3A;
    --warn:          #F5B547;  --warn-soft:    #2B1F08;  --warn-line: #5A4413;
    --bad:           #FF8F86;  --bad-soft:     #2E1310;  --bad-line:  #6B2A25;
    --bad-hover:     #FFA9A1;
    --on-bad:        #2E1310;
    --info:          #7FB6FF;  --info-soft:    #0E1E3E;  --info-line: #2A4A80;
    --neutral-soft:  #0E1E4A;
    --auswahl:       #4F6DB0;  --auf-auswahl: #FFFFFF;
    --skeleton-glanz: #1A2C5E;
    --wasserzeichen: rgba(255, 255, 255, .05);
    --kapitel-marke: #FFAD00;
      --schwebe-flaeche: #1A3168;
    --schwebe-kante:   #3A5490;
    --schwebe-schatten: 0 20px 50px rgba(0, 0, 0, .7);
  }
}

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

  --cloud:    #02091C;
  --paper:    #0A1839;
  --paper-2:  #0E1E4A;
  --navy:     #0E1E4A;
  --deep:     #0A1839;
  --night-1:  #12275C;
  --night-2:  #0C1B44;
  --night-3:  #060F2A;
  --line:     #22376B;
  --line-dark:#2E4A8A;

  --ink:       #E8EEFA;
  --ink-brand: #FFFFFF;
  --muted:     #9FB0D0;

  --action-hover:         #FFC24D;
  --interactive:          #A9B8D4;
  --interactive-hover:    #C8D4EA;
  /* s.o. — die -inv-Paare bleiben hell. */
  --selection:            #2C4A8C;
  --focus:                #5B9DFF;

  --shadow: 0 14px 44px rgba(0, 0, 0, .55);
  --surface-blur: rgba(6, 14, 36, .90);

  --cat-news:      #FFC24D;  --cat-news-bg:      rgba(255, 173, 0, .16);
  --cat-fleet:     #FFFFFF;  --cat-fleet-bg:     rgba(255, 255, 255, .10);
  --cat-routes:    #5FD48C;  --cat-routes-bg:    rgba(41, 166, 90, .18);
  --cat-community: #C79BE8;  --cat-community-bg: rgba(155, 89, 182, .22);
  --cat-ops:       #A9B8D4;  --cat-ops-bg:       rgba(120, 140, 180, .18);

  --ok:            #5FD48C;  --ok-soft:      #0E2A1B;  --ok-line:   #1E5A3A;
  --warn:          #F5B547;  --warn-soft:    #2B1F08;  --warn-line: #5A4413;
  --bad:           #FF8F86;  --bad-soft:     #2E1310;  --bad-line:  #6B2A25;
  --bad-hover:     #FFA9A1;
  --on-bad:        #2E1310;
  --info:          #7FB6FF;  --info-soft:    #0E1E3E;  --info-line: #2A4A80;
  --neutral-soft:  #0E1E4A;
  --auswahl:       #4F6DB0;  --auf-auswahl: #FFFFFF;
  --skeleton-glanz: #1A2C5E;
  --wasserzeichen: rgba(255, 255, 255, .05);
  --kapitel-marke: #FFAD00;
    --schwebe-flaeche: #1A3168;
  --schwebe-kante:   #3A5490;
  --schwebe-schatten: 0 20px 50px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------- Der Schalter
 * Sonne oder Mond, 60x32. Er liegt auf jeder Fläche, auf der er vorkommt:
 * heller Seitenkopf, dunkle Dashboard-Kopfzeile, Nacht-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: 60px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cloud);
  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: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink-brand);
  color: var(--paper);
  box-shadow: 0 2px 6px rgba(0, 35, 95, .30);
  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.
 *
 * Die Umschaltung lief lange ins Leere: `.theme-toggle .tt-knob svg` traegt
 * die Spezifitaet (0,2,1) und setzte `display: block`, waehrend die Regel zum
 * Ausblenden nur (0,2,0) hatte. Der Mond stand damit immer auf block — beide
 * Symbole lagen uebereinander, in beiden Modi. Deshalb tragen Zeigen und
 * Verstecken jetzt dieselbe Tiefe wie die Groessenregel, und die Groessenregel
 * selbst mischt sich nicht mehr in `display` ein.
 */
.theme-toggle .tt-knob svg { width: 15px; height: 15px; }
.theme-toggle .tt-knob .tt-sun  { display: block; }
.theme-toggle .tt-knob .tt-moon { display: none; }

.theme-toggle[aria-checked="true"] {
  background: var(--night-2);
  border-color: var(--line-dark);
}
.theme-toggle[aria-checked="true"] .tt-knob {
  transform: translateX(28px);
  background: var(--yellow);
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.theme-toggle[aria-checked="true"] .tt-knob .tt-sun  { display: none; }
.theme-toggle[aria-checked="true"] .tt-knob .tt-moon { display: block; }

/* Auf Nachtflächen (Hero, Dashboard-Kopfzeile) steht er auf Dunkelblau —
   dort braucht die Kante mehr Kontrast als --line hergibt. */
.on-night .theme-toggle,
.lm .theme-toggle,
.community .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 { background: #fff; color: var(--on-accent); }

@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. */
.theme-toggle[data-choice="auto"] .tt-knob { background: var(--muted-dark); }

/* 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: 52px; height: 30px; }
  .theme-toggle .tt-knob { width: 24px; height: 24px; }
  .theme-toggle .tt-knob svg { width: 13px; height: 13px; }
  .theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(22px); }
}

/* ------------------------------------------------------- Allgemeine Nachlese
 * Stellen, die sich nicht über ein Token lösen lassen, weil sie im Bestand
 * mit rgba() oder festen Werten gesetzt sind. Bewusst kurz gehalten: was hier
 * landet, gehört eigentlich in ein Token.
 * ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.dm-dim { filter: brightness(.88) contrast(1.02); }
}
:root[data-theme="dark"] img.dm-dim { filter: brightness(.88) contrast(1.02); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection { background: var(--yellow); color: var(--on-accent); }
}
:root[data-theme="dark"] ::selection { background: var(--yellow); color: var(--on-accent); }

/* ------------------------------------------------------------------- Marke
 * Das blaue Wortbild steht auf hellem Grund. Im Dunkeln muss es weiss werden —
 * genau das ist LHV_Logo.png. Statt die Quelle per Skript zu tauschen (und
 * dabei kurz das blaue Bild zu zeigen) faerbt der Filter es sofort um: die
 * Marke ist einfarbig, das Ergebnis ist deckungsgleich mit der weissen Datei.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header .logo img,
  :root:not([data-theme="light"]) header .logo-swap img { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] header .logo img,
:root[data-theme="dark"] header .logo-swap img { filter: brightness(0) invert(1); }

/* ------------------------------------------------------- Dashboard-Leiste
 * Die Seitenleiste ist in beiden Modi dunkel. Im Hellmodus markiert eine
 * weisse Fuellung den aktiven Punkt; im Dunkelmodus steht Weiss auf Weiss —
 * dort uebernimmt Gelb, das 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: rgba(255, 173, 0, .14);
    color: var(--yellow);
  }
}
:root[data-theme="dark"] aside nav button.on,
:root[data-theme="dark"] aside nav a.on {
  background: rgba(255, 173, 0, .14);
  color: var(--yellow);
}
