/* === tokens.css ==========================================================
 * Design-Tokens: die einzige Stelle, an der Farb-, Typo-, Abstands-,
 * Radius- und Schattenwerte definiert werden. Alle anderen Stylesheets
 * greifen ausschliesslich über var(--…) darauf zu.
 *
 * Die Seite hat nur noch eine Ansicht: dunkel. Das Hintergrundfoto (helle
 * Bergkette) wird invertiert und liegt sichtbar hinter dem Kopfbereich –
 * darunter legt sich ein Verlauf, damit die Tabelle ruhig bleibt.
 *
 * Flaechen sind bewusst halbtransparent mit Weichzeichner: so bleibt das
 * Foto praesent, ohne dass der Text darunter leidet. Die Deckkraft ist so
 * gewaehlt, dass jede Text-auf-Flaeche-Paarung WCAG AA erreicht.
 * ======================================================================= */

:root {
  color-scheme: dark;

  /* ---- Basis: kuehles Nachtblau statt neutralem Grau ---- */
  --nacht-950: #05090d;
  --nacht-900: #080e14;
  --nacht-800: #0d151d;
  --nacht-700: #142029;
  --nacht-600: #1d2b37;

  /* ---- Akzent: kuehles Gruen, auf dunklem Grund gut lesbar ---- */
  --akzent-300: #6ee7b7;
  --akzent-400: #34d399;
  --akzent-500: #10b981;
  --akzent-600: #059669;

  --signal-400: #f87171;
  --signal-300: #f19a90;   /* nur Hover des Loesch-Knopfs */
  --signal-900: #2c1517;

  /* ---- Semantische Rollen: Flaechen ----
     Halbtransparent, damit das Hintergrundfoto durchscheint. Der Wert in
     Klammern ist die effektive Farbe ueber --nacht-900. */
  --flaeche:        rgba(255, 255, 255, .045);  /* ~#161d24 */
  --flaeche-2:      rgba(255, 255, 255, .022);  /* ~#10171e */
  --flaeche-3:      rgba(255, 255, 255, .075);  /* ~#1d242c */
  --flaeche-fest:   var(--nacht-800);           /* wo Transparenz stoert */
  --flaeche-akzent: rgba(52, 211, 153, .12);
  /* Eingabefelder und Aufklapplisten bewusst deckend: halbtransparente
     Flaechen werden hinter aufgeklappten Listen unlesbar. */
  --flaeche-eingabe: #111b24;

  --glas-blur: 16px;

  /* ---- Semantische Rollen: Text ---- */
  --text:         #eaf1f6;
  --text-koerper: #c8d5e0;
  --text-schwach: #92a4b3;
  --text-zart:    #6b7f8f;   /* nur Icons und Dekor, nie Fliesstext */
  --text-invers:  var(--nacht-950);
  --text-akzent:  var(--akzent-400);

  /* ---- Semantische Rollen: Linien ---- */
  --linie:       rgba(255, 255, 255, .09);
  --linie-zart:  rgba(255, 255, 255, .05);
  --linie-stark: rgba(255, 255, 255, .18);

  /* ---- Interaktion ---- */
  --fokus-ring:  0 0 0 3px rgba(52, 211, 153, .35);
  --auswahl-bg:  rgba(52, 211, 153, .25);
  --markierung:      rgba(52, 211, 153, .22);
  --markierung-text: var(--akzent-300);

  /* ---- Leuchten: sparsam, nur fuer Akzentflaechen ---- */
  --glanz-akzent: 0 0 24px -6px rgba(52, 211, 153, .45);

  /* ---- Hintergrundbild ----
     Das Foto ist nahezu weiss und wird invertiert; so entsteht eine dunkle
     Bergkette. Sichtbar vor allem hinter dem Kopfbereich. */
  --bg-bild-deckkraft: .5;
  --bg-bild-filter: invert(1) grayscale(1) contrast(1.15) brightness(.85);

  /* ---- Typografie ---- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --fs-xs:   .75rem;
  --fs-sm:   .8125rem;
  --fs-md:   .875rem;
  --fs-base: 1rem;
  --fs-lg:   1.0625rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  clamp(1.75rem, 5vw, 3.25rem);
  --lh-eng:  1.25;
  --lh:      1.55;
  --tracking-weit: .06em;
  --tracking-eng:  -.02em;

  /* ---- Abstaende (4-px-Raster) ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* ---- Radien ---- */
  --radius-s:     8px;
  --radius-m:     12px;
  --radius-l:     18px;
  --radius-xl:    26px;
  --radius-pille: 999px;

  /* ---- Schatten ---- */
  --schatten-s: 0 1px 3px rgba(0, 0, 0, .4);
  --schatten-m: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --schatten-l: 0 28px 60px -24px rgba(0, 0, 0, .8), 0 8px 20px -8px rgba(0, 0, 0, .5);

  /* ---- Masse ---- */
  --control-h: 2.75rem;
  --container: 82rem;
  --uebergang: .18s ease;
}