/* Das dunkle Erscheinungsbild (Stufe 4 des neuen Looks, 08.09.2026).
   **Eine eigene Datei, nur Tokens**: `[data-theme="dark"]` setzt denselben
   Satz Farben neu, den tokens.css fuer hell definiert - Komponenten und
   Layout kennen kein Dunkel, sie kennen nur Tokens. Welche Fassung gilt,
   entscheidet ein Inline-Skript im Kopf jeder Seite (base.html, login.html)
   vor dem ersten Malen: gemerkte Wahl im Browser, sonst die Systemvorgabe.
   Der Schalter sitzt in der Seitenleiste neben der Systeminfo.

   **Warum nicht in tokens.css:** Die Kontrast-Waechter lesen tokens.css als
   die eine Wahrheit je Token (`tests/test_gestaltung.py`). Eine zweite
   Definition im selben File haette die erste ueberschrieben. Diese Datei hat
   ihren eigenen Waechter mit den Paaren auf dunklem Grund
   (`tests/test_erscheinungsbild.py`).

   Die Regeln bleiben: Blau handelt, Teal markiert, Gruen erfuellt, Amber
   Hinweis, Rot Fehler - nur heller, damit sie auf Dunkel lesbar sind. Alle
   Textpaare ueber 4,5 : 1, Bedienzeichen ueber 3 : 1, gerechnet im Test. */

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

  --fb-accent: #6ea8dc;
  --fb-accent-dark: #8fbde6;
  --fb-accent-tint: #172c3d;
  --fb-success: #4fb57c;
  --fb-success-tint: #12302a;
  --fb-warning: #d9a23b;
  --fb-warning-tint: #33270f;
  --fb-success-text: #86d6aa;
  --fb-warning-text: #e8bd62;
  --fb-danger: #e08b84;
  --fb-danger-tint: #3a1d1b;

  --fb-gray-50: #172230;
  --fb-gray-100: #1f2b39;
  --fb-gray-200: #2a3746;
  --fb-gray-300: #3a4858;
  --fb-gray-400: #6b7885;
  --fb-gray-600: #9fabb7;
  --fb-gray-800: #e6ebf0;

  --fb-marke: #2aa7a9;
  --fb-marke-text: #8fd8d9;
  --fb-marke-tint: #10302f;
  --fb-sidebar: #070d13;
  --fb-sidebar-hover: #131e2a;
  --fb-sidebar-text: #9fabb7;
  --fb-overlay: rgba(0, 0, 0, 0.62);

  --fb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --fb-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  --fb-shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.9);
  --fb-schimmer: radial-gradient(60% 50% at 20% 0%, rgba(27, 141, 143, 0.45), transparent 70%);

  --fb-flaeche-grund: #0a1117;
  --fb-flaeche: #131b25;
  --fb-flaeche-innen: #182330;
  --fb-flaeche-rand: #243141;
}

/* Was kein Token ist und trotzdem Farbe traegt: Avatare (Pastell wird tief),
   der Chevron im Auswahlfeld (ein Hintergrundbild kennt kein `currentColor`),
   Bloecke der Tageslinie etwas gedaempft. */
[data-theme="dark"] .fb-avatar {
  color: hsl(var(--h) 60% 85%);
  background: hsl(var(--h) 40% 24%);
}

[data-theme="dark"] .fb-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239fabb7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
}

[data-theme="dark"] .fb-tageslinie__block {
  background: hsl(var(--h) 50% 52%);
}

[data-theme="dark"] .fb-sidebar__logo-zeichen,
[data-theme="dark"] .fb-login__zeichen {
  box-shadow: var(--fb-schatten-marke);
}