/* ------------------------------------------------------------------ *
 * Hell-/Dunkel-Umschaltung, gemeinsam für alle Seiten.
 *
 * Einbinden (NACH dem seiteneigenen CSS):
 *   <script>…kleines Startskript im <head>, siehe unten…</script>
 *   <link rel="stylesheet" href="theme.css">
 *   <script src="theme.js" defer></script>
 *
 * Die Seiten definieren ihre Farben als Variablen in :root — das ist der
 * DUNKLE Satz, und Dunkel ist der Standard (Maik, 2026-09-19). Der helle
 * Modus ist fertig gebaut und bleibt drin: er greift, sobald <html>
 * data-theme="light" trägt. Der Umschalter ist derzeit verborgen
 * (ENABLED = false in theme.js); zum Ansehen ?theme=light an die Adresse
 * hängen. Feste Farbwerte gehören deshalb nicht mehr in die Seiten,
 * sondern hierher als Variable mit beiden Werten.
 *
 * Bewusst in beiden Modi dunkel: die Countdown-Leiste (countdown.css) und
 * die Flächen hinter den Firmware-Screens — das Gerät ist schwarz.
 * ------------------------------------------------------------------ */

:root {
  /* Zusatzvariablen, dunkler Satz */
  --amber-ink:   #ffb200;               /* Amber als SCHRIFT- und Linkfarbe */
  --amber-line:  #ffb200;               /* Amber als Rahmen */
  --on-amber:    #14100a;               /* Schrift auf Amber-Flächen */
  --surface-1:   #0d0f13;               /* Karten, Kästen */
  --surface-2:   #14171d;               /* Code, Hinweise, Eingabeflächen */
  --screen-bg:   #000;                  /* hinter Geräte-Screens, immer schwarz */
  --bar-bg:      rgba(7, 8, 10, .72);   /* klebende Kopfzeile */
  --chip-bg:     rgba(7, 8, 10, .72);
  --shadow-deep: 0 30px 80px -30px #000;
  --glow-a:      #ffb200;
  --glow-b:      #ffd166;
  --warn-ink:    #ff8a5c;
  --backdrop:    rgba(4, 5, 7, .78);
  --modal-bg:    #0b0d11;
  --skel-a:      #14171d;
  --skel-b:      #1e232b;
  --text-low:    #7a8390;               /* war #6d7683: knapp unter dem Mindestkontrast */
  --ok-bg:       #00e363;               /* Erfolgs-Haken auf der Danke-Seite */
  --ok-ink:      #05230f;
}

html[data-theme="light"] {
  color-scheme: light;

  --ink-000: #ffffff;
  --ink-050: #f4f5f7;
  --ink-100: #eceef2;
  --ink-200: #e0e4ea;
  --ink-300: #c9d0d9;

  --text:     #0e1116;
  --text-mid: #434c5a;
  --text-low: #667080;
  --rule:     #e1e5ea;
  --dim:      #667080;

  /* Signalfarben als Schrift auf Weiß: abgedunkelt, sonst unlesbar */
  --green:  #0a7f3d;
  --cyan:   #00628b;
  --violet: #6a3fcf;
  --red:    #b3380a;

  --amber-ink:   #8f5600;
  --amber-line:  #d18a00;
  --surface-1:   #f4f5f7;
  --surface-2:   #eceef2;
  --bar-bg:      rgba(255, 255, 255, .82);
  --chip-bg:     rgba(255, 255, 255, .86);
  --shadow-deep: 0 30px 70px -34px rgba(14, 17, 22, .55);
  --glow-a:      #b86a00;
  --glow-b:      #e08f00;
  --warn-ink:    #b53a08;
  --backdrop:    rgba(14, 17, 22, .55);
  --modal-bg:    #ffffff;
  --skel-a:      #eceef2;
  --skel-b:      #f6f7f9;
  --ok-bg:       #0a7f3d;
  --ok-ink:      #ffffff;
}

/* ---------------------------------------------------------- Umschalter */
.theme-toggle {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--ink-300); border-radius: 4px;
  background: none; color: var(--text-mid); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-low); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
html[data-theme="light"] .theme-toggle .sun { display: none; }
html[data-theme="light"] .theme-toggle .moon { display: block; }
.topbar .back + .theme-toggle { margin-left: 16px; }
@media (max-width: 380px) { .theme-toggle { width: 34px; height: 34px; } }
.topbar .back { margin-left: auto; }