/*
 * Gemeinsame Farbgrundlage aller Seiten - Tag- und Nachtmodus.
 *
 * Standard richtet sich nach dem Geraet: auf dem Telefon hell, am Rechner dunkel.
 * Eine ausdrueckliche Wahl der Besucherin schlaegt diesen Standard immer und wird
 * gespeichert (siehe theme.js).
 *
 * AUFBAU: Jeder Farbwert steht genau EINMAL - als --hell-* oder --dunkel-*. Die drei
 * Bloecke darunter ordnen nur zu. Vorher lagen die Werte dreifach ausgeschrieben vor,
 * und genau das ist sofort auseinandergelaufen: eine neu ergaenzte Farbe fehlte im
 * geraeteabhaengigen Block, wodurch am Rechner ein heller Balken stehen blieb.
 * Neue Farbe = eine Zeile bei --hell-*, eine bei --dunkel-*, drei Zuordnungen.
 *
 * BEDEUTUNG DER BEZEICHNER:
 *   --paper   Grundflaeche der Seite      --surface abgesetzte Flaeche
 *   --band    abgesetztes Band            --ink     Lesetext
 *   --muted   Nebentext                   --line    Trennlinien
 *   --deep    kraeftige Leiste (in BEIDEN Modi dunkel)
 *   --auf-deep  Text auf --deep           --akzent  Hauptakzent
 *   --akzent-kontrast  Text auf dem Akzent
 */

:root {
  /* ---- Werte: Tag ---- */
  --hell-paper:   #f5f1e9;
  --hell-surface: #fffdf8;
  --hell-band:    #e7eeeb;
  --hell-deep:    #173d4b;
  --hell-ink:     #172a35;
  --hell-muted:   #60727a;
  --hell-line:    rgba(23, 61, 75, .2);
  --hell-akzent:  #286b82;
  --hell-akzent-kontrast: #fffdf8;
  --hell-blau:    #286b82;
  --hell-gold:    #a97524;
  --hell-warnung: #b4571f;
  --hell-violett: #6b4fa8;
  --hell-schatten: 0 14px 34px rgba(23, 42, 53, .12);
  --hell-auf-deep: rgba(255, 255, 255, .82);

  /* ---- Werte: Nacht ---- */
  --dunkel-paper:   #0d141b;
  --dunkel-surface: #151f28;
  --dunkel-band:    #111d26;
  --dunkel-deep:    #07131d;
  --dunkel-ink:     #e7eef2;
  --dunkel-muted:   #9eafb9;
  --dunkel-line:    #2b3b47;
  --dunkel-akzent:  #35c9b4;
  --dunkel-akzent-kontrast: #06151a;
  --dunkel-blau:    #78b6df;
  --dunkel-gold:    #f1bf63;
  --dunkel-warnung: #e79a64;
  --dunkel-violett: #a78bfa;
  --dunkel-schatten: 0 18px 45px rgba(0, 0, 0, .28);
  --dunkel-auf-deep: #b9ded5;

  /* ---- Zuordnung: Grundfall ist hell (Telefon) ---- */
  --paper: var(--hell-paper);
  --surface: var(--hell-surface);
  --band: var(--hell-band);
  --deep: var(--hell-deep);
  --ink: var(--hell-ink);
  --muted: var(--hell-muted);
  --line: var(--hell-line);
  --akzent: var(--hell-akzent);
  --akzent-kontrast: var(--hell-akzent-kontrast);
  --blau: var(--hell-blau);
  --gold: var(--hell-gold);
  --warnung: var(--hell-warnung);
  --violett: var(--hell-violett);
  --schatten: var(--hell-schatten);
  --auf-deep: var(--hell-auf-deep);
  color-scheme: light;
}

/* Standard am Rechner: dunkel. Gilt nur, solange keine Wahl getroffen wurde. */
@media (min-width: 821px) {
  :root:not([data-theme]) {
    --paper: var(--dunkel-paper);
    --surface: var(--dunkel-surface);
    --band: var(--dunkel-band);
    --deep: var(--dunkel-deep);
    --ink: var(--dunkel-ink);
    --muted: var(--dunkel-muted);
    --line: var(--dunkel-line);
    --akzent: var(--dunkel-akzent);
    --akzent-kontrast: var(--dunkel-akzent-kontrast);
    --blau: var(--dunkel-blau);
    --gold: var(--dunkel-gold);
    --warnung: var(--dunkel-warnung);
    --violett: var(--dunkel-violett);
    --schatten: var(--dunkel-schatten);
    --auf-deep: var(--dunkel-auf-deep);
    color-scheme: dark;
  }
}

/* Ausdrueckliche Wahl - steht bewusst NACH der Geraeteregel, damit sie gewinnt. */
:root[data-theme="light"] {
  --paper: var(--hell-paper);
  --surface: var(--hell-surface);
  --band: var(--hell-band);
  --deep: var(--hell-deep);
  --ink: var(--hell-ink);
  --muted: var(--hell-muted);
  --line: var(--hell-line);
  --akzent: var(--hell-akzent);
  --akzent-kontrast: var(--hell-akzent-kontrast);
  --blau: var(--hell-blau);
  --gold: var(--hell-gold);
  --warnung: var(--hell-warnung);
  --violett: var(--hell-violett);
  --schatten: var(--hell-schatten);
  --auf-deep: var(--hell-auf-deep);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: var(--dunkel-paper);
  --surface: var(--dunkel-surface);
  --band: var(--dunkel-band);
  --deep: var(--dunkel-deep);
  --ink: var(--dunkel-ink);
  --muted: var(--dunkel-muted);
  --line: var(--dunkel-line);
  --akzent: var(--dunkel-akzent);
  --akzent-kontrast: var(--dunkel-akzent-kontrast);
  --blau: var(--dunkel-blau);
  --gold: var(--dunkel-gold);
  --warnung: var(--dunkel-warnung);
  --violett: var(--dunkel-violett);
  --schatten: var(--dunkel-schatten);
  --auf-deep: var(--dunkel-auf-deep);
  color-scheme: dark;
}

/* ---- Umschalter ---- */
.modus-schalter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font: 600 .72rem "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.modus-schalter:hover,
.modus-schalter:focus-visible { color: var(--ink); border-color: var(--akzent); }
.modus-schalter svg { width: 15px; height: 15px; flex: none; }
.modus-schalter .modus-sonne { display: none; }
:root[data-theme="dark"] .modus-schalter .modus-sonne,
:root:not([data-theme]) .modus-schalter .modus-sonne { display: block; }
:root[data-theme="dark"] .modus-schalter .modus-mond,
:root:not([data-theme]) .modus-schalter .modus-mond { display: none; }
@media (max-width: 820px) {
  :root:not([data-theme]) .modus-schalter .modus-sonne { display: none; }
  :root:not([data-theme]) .modus-schalter .modus-mond { display: block; }
}
:root[data-theme="light"] .modus-schalter .modus-sonne { display: none; }
:root[data-theme="light"] .modus-schalter .modus-mond { display: block; }

@media (prefers-reduced-motion: reduce) {
  .modus-schalter { transition: none; }
}

/*
 * Der Umschalter steht oft in der kraeftigen Kopfleiste (--deep). Die ist in BEIDEN
 * Modi dunkel, deshalb darf er dort nicht die Textfarben des Seitenkoerpers nehmen -
 * im hellen Modus stand sonst dunkelgrauer Text auf dunklem Grund.
 */
.top .modus-schalter,
.utility-bar .modus-schalter,
.auf-dunkel .modus-schalter {
  color: var(--auf-deep);
  border-color: color-mix(in srgb, var(--auf-deep) 40%, transparent);
}
.top .modus-schalter:hover,
.top .modus-schalter:focus-visible,
.utility-bar .modus-schalter:hover,
.utility-bar .modus-schalter:focus-visible,
.auf-dunkel .modus-schalter:hover,
.auf-dunkel .modus-schalter:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--auf-deep) 75%, transparent);
}