/* ============================================================
   VACATUM DESIGN SYSTEM — variables.css
   Zentrale Wahrheitsquelle fuer alle Design-Tokens
   Version: 2.0 | Mai 2026
   ============================================================ */

:root {
  /* ── FARBEN ─────────────────────────────────────────────── */

  /* Primaer — Schriftfarbe fuer Ueberschriften und Menue.
     Im Dark Mode wird daraus ein helles Blau, damit Text lesbar bleibt. */
  --vac-color-primary:        #2c3e50;
  --vac-color-primary-light:  #3d5166;
  --vac-color-primary-dark:   #1a252f;

  /* Primaer als FLAECHE — Hero-Baender, dunkle Karten, Tabellenkoepfe.
     Muss in beiden Modi dunkel bleiben, sonst steht weisse Schrift auf
     hellem Grund. Deshalb ein eigener Satz Tokens statt --vac-color-primary:
     dieselbe Farbe kann nicht gleichzeitig Schrift und Untergrund sein. */
  --vac-color-primary-surface:       #2c3e50;
  --vac-color-primary-surface-light: #3d5166;
  --vac-color-primary-surface-dark:  #1a252f;

  /* Akzent: Bitcoin Orange — als FLAECHE, Rahmen, Diagrammfarbe. */
  --vac-color-accent:         #f7931a;
  --vac-color-accent-dark:    #e6841a;
  --vac-color-accent-light:   #ffa940;

  /* Akzent als SCHRIFT. Gemessen am 17.08.2026: #f7931a als Text erreicht
     auf dem Seitengrund nur 2.18:1 und auf einer Karte 2.30:1 — noetig sind
     4.5:1. Das betraf 142 Fundstellen, darunter jeden Fliesstext-Link.
     Dieselbe Trennung wie bei --vac-color-primary-surface: eine Farbe kann
     nicht gleichzeitig gute Flaeche und gute Schrift sein.
     #a85400 erreicht 5.07:1 auf #f8f9fa und 5.34:1 auf Weiss. */
  --vac-color-accent-text:    #a85400;

  /* Schrift AUF dem Akzent. Weiss auf Orange ergab 2.30:1 (hell) und
     1.91:1 (dunkel) — Knopfbeschriftungen waren kaum lesbar.
     #1a1a1a erreicht 7.58:1 bzw. 9.12:1. */
  --vac-color-on-accent:      #1a1a1a;

  /* Gold */
  --vac-color-gold:           #d4af37;

  /* Hintergruende */
  --vac-color-bg:             #f8f9fa;
  --vac-color-bg-card:        #ffffff;
  --vac-color-bg-dark:        #1a1a2e;
  --vac-color-bg-dark-card:   #16213e;

  /* Text */
  --vac-color-text:           #333333;
  /* #6c757d lag mit 4.45:1 knapp unter der Grenze von 4.5:1 — auf 95
     Fundstellen. #656d75 erreicht 4.98:1 bei praktisch gleichem Eindruck. */
  --vac-color-text-muted:     #656d75;
  --vac-color-text-light:     #adb5bd;
  --vac-color-text-inverse:   #ffffff;

  /* Rahmen */
  --vac-color-border:         #e0e0e0;
  --vac-color-border-dark:    #2e2e4a;

  /* Status */
  --vac-color-success:        #27ae60;
  --vac-color-success-bg:     #e8f5e9;
  --vac-color-warning:        #f39c12;
  --vac-color-warning-bg:     #fff8e1;
  --vac-color-danger:         #e74c3c;
  --vac-color-danger-bg:      #ffebee;
  --vac-color-info:           #2980b9;
  --vac-color-info-bg:        #e3f2fd;

  /* Schriftfarbe IN den Hinweiskaesten. Sie stand fest verdrahtet in
     components.css (#0d47a1, #1a5e20 …) und blieb im Dark Mode dunkel,
     waehrend die Flaeche darunter dunkel wurde — die Kaesten waren dort
     praktisch unlesbar. */
  --vac-color-info-text:      #0d47a1;
  --vac-color-success-text:   #1a5e20;
  --vac-color-warning-text:   #a04100;
  --vac-color-danger-text:    #b71c1c;
  --vac-color-swiss-bg:       #e8f4f8;

  /* Statusfarben fuer Schrift auf FEST dunkler Flaeche (Codekaesten,
     Formelboxen). Diese Kaesten setzen ihren Grund hart auf #1e2d3d o. ae.
     und folgen dem Theme NICHT — die Schrift darauf darf es deshalb auch
     nicht. Wer hier --vac-color-success-text nimmt, bekommt im Hellmodus
     dunkelgruen auf dunkelblau. Genau das war der Fehler, den die Messung
     am 17.08.2026 mit 1.01:1 als schlimmsten Wert der Website auswarf. */
  --vac-color-on-dark-success: #a3e6c6;
  --vac-color-on-dark-warning: #f2d39a;
  --vac-color-on-dark-danger:  #f5b4b4;
  --vac-color-on-dark-info:    #a8cdf5;
  /* #9aa4ae erreichte auf der hellsten dunklen Flaeche (#2c3e50) nur
     4.34:1. #a3adb8 kommt auf 4.83:1 und bleibt sonst gleich. */
  --vac-color-on-dark-muted:   #a3adb8;

  /* Schrift auf HELLEN Signalflaechen (Knoepfe in Gruen, Blau, Orange).
     Weiss darauf ergibt 1.74:1 bis 2.87:1 — die Beschriftung der
     Rechner-Knoepfe war praktisch nicht zu lesen. Bewusst ohne
     Dunkelmodus-Variante: die Flaeche darunter ist in beiden Modi hell,
     also muss die Schrift in beiden Modi dunkel sein. */
  --vac-color-on-bright:       #1a1a1a;

  /* Chart-Farben */
  --vac-color-chart-1:        #f7931a;
  --vac-color-chart-2:        #2980b9;
  --vac-color-chart-3:        #27ae60;
  --vac-color-chart-4:        #8e44ad;
  --vac-color-chart-5:        #e74c3c;
  --vac-color-chart-6:        #f39c12;

  /* ── TYPOGRAFIE ─────────────────────────────────────────── */
  /* Drei Rollen, drei Tokens. Vorher standen in den Seiten sechs
     Schreibweisen fuer dieselben drei Absichten ('Segoe UI', sans-serif /
     'Segoe UI', Tahoma, Geneva, Verdana, sans-serif / 'Consolas',
     monospace / 'Courier New', monospace / …). Es wird nichts nachgeladen:
     alle drei Stapel greifen auf vorhandene Systemschriften zurueck, was
     zum werbe- und trackingfreien Anspruch der Seite passt. */
  --vac-font:                 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --vac-font-serif:           Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --vac-font-mono:            'Consolas', 'SF Mono', Menlo, 'Courier New', monospace;

  --vac-font-size-xs:         0.75rem;
  --vac-font-size-sm:         0.875rem;
  --vac-font-size-base:       1rem;
  --vac-font-size-md:         1.1rem;
  --vac-font-size-lg:         1.25rem;
  --vac-font-size-xl:         1.5rem;
  --vac-font-size-2xl:        2rem;
  --vac-font-size-3xl:        2.5rem;
  --vac-font-size-4xl:        3rem;

  --vac-font-weight-normal:   400;
  --vac-font-weight-medium:   500;
  --vac-font-weight-semibold: 600;
  --vac-font-weight-bold:     700;
  --vac-font-weight-black:    800;

  --vac-line-height-tight:    1.2;
  --vac-line-height-base:     1.6;
  --vac-line-height-loose:    1.8;

  /* ── ABSTÄNDE ───────────────────────────────────────────── */
  --vac-space-1:    4px;
  --vac-space-2:    8px;
  --vac-space-3:    12px;
  --vac-space-4:    16px;
  --vac-space-5:    20px;
  --vac-space-6:    24px;
  --vac-space-8:    32px;
  --vac-space-10:   40px;
  --vac-space-12:   48px;
  --vac-space-16:   64px;
  --vac-space-20:   80px;

  /* ── RADIEN ─────────────────────────────────────────────── */
  --vac-radius-sm:   4px;
  --vac-radius:      8px;
  --vac-radius-md:   12px;
  --vac-radius-lg:   16px;
  --vac-radius-xl:   24px;
  --vac-radius-full: 9999px;

  /* ── SCHATTEN ───────────────────────────────────────────── */
  --vac-shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --vac-shadow-sm:  0 2px 10px rgba(0,0,0,0.07);
  --vac-shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --vac-shadow-lg:  0 8px 30px rgba(0,0,0,0.14);
  --vac-shadow-xl:  0 16px 50px rgba(0,0,0,0.18);

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --vac-transition-fast:   all 0.15s ease;
  --vac-transition:        all 0.3s ease;
  --vac-transition-slow:   all 0.5s ease;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --vac-nav-height:       64px;
  /* Hoehe des klebenden Kopfbandes: Menue plus Pfadmenue. Gemessen am
     18.08.2026 sind das 64 + 49 px. Wird gebraucht, damit Ankersprünge
     nicht hinter dem Band landen — sonst klickt jemand auf "Etappe 3"
     und steht mitten im Text statt bei der Ueberschrift. */
  --vac-breadcrumb-height: 49px;
  --vac-kopfband: calc(var(--vac-nav-height) + var(--vac-breadcrumb-height));
  --vac-container-max:    1200px;
  --vac-container-wide:   1400px;
  --vac-content-max:      800px;

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --vac-z-base:       1;
  --vac-z-dropdown:   100;
  --vac-z-sticky:     200;
  --vac-z-nav:        1000;
  --vac-z-modal:      2000;
  --vac-z-toast:      3000;
  --vac-z-disclaimer: 9999;

  /* ── LEGACY ALIASES (Rueckwaertskompatibilitaet) ─────────── */
  /* Damit alle bestehenden Seiten ohne Aenderung weiter funktionieren */
  --primary:   var(--vac-color-primary);
  --accent:    var(--vac-color-accent);
  --gold:      var(--vac-color-gold);
  --bg:        var(--vac-color-bg);
  --text:      var(--vac-color-text);
  --border:    var(--vac-color-border);
  --white:     var(--vac-color-bg-card);
  --shadow-sm: var(--vac-shadow-sm);
  --shadow-md: var(--vac-shadow-md);
  --radius:    var(--vac-radius);
  --nav-height: var(--vac-nav-height);
  --font:      var(--vac-font);

  /* Alte components.css Aliases */
  --vacatum-accent:   var(--vac-color-accent);
  --vacatum-primary:  var(--vac-color-primary);
  --vacatum-white:    var(--vac-color-bg-card);
  --border-radius:    var(--vac-radius);
  --shadow-soft:      var(--vac-shadow-sm);
  --transition-speed: var(--vac-transition);
  --space-lg:         var(--vac-space-8);
  --space-md:         var(--vac-space-4);
  --space-sm:         var(--vac-space-2);
}

/* ============================================================
   DARK MODE
   ------------------------------------------------------------
   Drei Zustaende, gesteuert vom Umschalter in vacatum-nav.js:

     kein data-theme  → der Systemeinstellung folgen (Voreinstellung)
     data-theme=light → dauerhaft hell, auch bei dunklem System
     data-theme=dark  → dauerhaft dunkel, auch bei hellem System

   Deshalb steht die dunkle Palette zweimal: einmal unter
   prefers-color-scheme (abgesichert gegen ein ausdrueckliches "light")
   und einmal unter [data-theme="dark"], damit der Umschalter in beide
   Richtungen gewinnt. Beide Bloecke enthalten dieselben Werte —
   Aenderungen immer in --vac-dunkel-* vornehmen, nicht in den Kopien.
   ============================================================ */

:root {
  /* Bezugswerte der dunklen Palette an einer Stelle */
  --vac-dunkel-bg:          #14161f;
  --vac-dunkel-bg-card:     #1c1f2b;
  --vac-dunkel-bg-erhoeht:  #242838;
  --vac-dunkel-text:        #e2e5ea;
  --vac-dunkel-text-muted:  #98a1b3;
  --vac-dunkel-border:      #2f3446;
  --vac-dunkel-primary:     #9fc0dd;
  --vac-dunkel-accent:      #ffa940;
  --vac-dunkel-success:     #4ade80;
  --vac-dunkel-warning:     #fbbf24;
  --vac-dunkel-danger:      #f87171;
  --vac-dunkel-info:        #60a5fa;
}

/* Der Rumpf der dunklen Palette — per @supports-freier Wiederverwendung
   in beide Selektoren kopiert. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vac-color-bg:            var(--vac-dunkel-bg);
    --vac-color-bg-card:       var(--vac-dunkel-bg-card);
    --vac-color-text:          var(--vac-dunkel-text);
    --vac-color-text-muted:    var(--vac-dunkel-text-muted);
    --vac-color-text-light:    var(--vac-dunkel-text-muted);
    --vac-color-border:        var(--vac-dunkel-border);
    --vac-color-primary:       var(--vac-dunkel-primary);
    --vac-color-primary-light: #b8d2e9;
    --vac-color-primary-dark:  #7ba3c4;
  --vac-color-primary-surface:     #232f3f;
  --vac-color-primary-surface-light: #2e3d51;
  --vac-color-primary-surface-dark:  #18202b;
    --vac-color-primary-surface:       #232f3f;
    --vac-color-primary-surface-light: #2e3d51;
    --vac-color-primary-surface-dark:  #18202b;
    --vac-color-accent:        var(--vac-dunkel-accent);
    /* Im Dunkelmodus ist das helle Orange als Schrift bereits gut
       lesbar (8.94:1 auf dem Seitengrund) — hier braucht es keine
       abgedunkelte Variante, sondern die helle. */
    --vac-color-accent-text:   #ffa940;
    --vac-color-on-accent:     #1a1a1a;
    --vac-color-success:       var(--vac-dunkel-success);
    --vac-color-warning:       var(--vac-dunkel-warning);
    --vac-color-danger:        var(--vac-dunkel-danger);
    --vac-color-info:          var(--vac-dunkel-info);
    --vac-color-success-bg:    #14321f;
    --vac-color-warning-bg:    #3a2c10;
    --vac-color-danger-bg:     #3a1a1a;
    --vac-color-info-bg:       #17263d;
  --vac-color-info-text:   #a8cdf5;
  --vac-color-success-text:  #a3e6c6;
  --vac-color-warning-text:  #f2d39a;
  --vac-color-danger-text:   #f5b4b4;
  --vac-color-swiss-bg:    #16283a;
    --vac-color-info-text:     #a8cdf5;
    --vac-color-success-text:  #a3e6c6;
    --vac-color-warning-text:  #f2d39a;
    --vac-color-danger-text:   #f5b4b4;
    --vac-color-swiss-bg:      #16283a;
    --vac-shadow-xs: 0 1px 3px rgba(0,0,0,0.40);
    --vac-shadow-sm: 0 2px 10px rgba(0,0,0,0.45);
    --vac-shadow-md: 0 4px 20px rgba(0,0,0,0.55);
    --vac-shadow-lg: 0 8px 30px rgba(0,0,0,0.60);
    --vac-shadow-xl: 0 16px 50px rgba(0,0,0,0.65);

    /* Legacy-Aliase mitziehen — viele Seiten nutzen noch --bg/--white/--text */
    --bg:     var(--vac-dunkel-bg);
    --white:  var(--vac-dunkel-bg-card);
    --text:   var(--vac-dunkel-text);
    --border: var(--vac-dunkel-border);
  }
}

:root[data-theme="dark"] {
  --vac-color-bg:            var(--vac-dunkel-bg);
  --vac-color-bg-card:       var(--vac-dunkel-bg-card);
  --vac-color-text:          var(--vac-dunkel-text);
  --vac-color-text-muted:    var(--vac-dunkel-text-muted);
  --vac-color-text-light:    var(--vac-dunkel-text-muted);
  --vac-color-border:        var(--vac-dunkel-border);
  --vac-color-primary:       var(--vac-dunkel-primary);
  --vac-color-primary-light: #b8d2e9;
  --vac-color-primary-dark:  #7ba3c4;
  --vac-color-primary-surface:     #232f3f;
  --vac-color-primary-surface-light: #2e3d51;
  --vac-color-primary-surface-dark:  #18202b;
  --vac-color-accent:        var(--vac-dunkel-accent);
  /* Im Dunkelmodus ist das helle Orange als Schrift bereits gut
     lesbar (8.94:1 auf dem Seitengrund) — hier braucht es keine
     abgedunkelte Variante, sondern die helle. */
  --vac-color-accent-text:   #ffa940;
  --vac-color-on-accent:     #1a1a1a;
  --vac-color-success:       var(--vac-dunkel-success);
  --vac-color-warning:       var(--vac-dunkel-warning);
  --vac-color-danger:        var(--vac-dunkel-danger);
  --vac-color-info:          var(--vac-dunkel-info);
  --vac-color-success-bg:    #14321f;
  --vac-color-warning-bg:    #3a2c10;
  --vac-color-danger-bg:     #3a1a1a;
  --vac-color-info-bg:       #17263d;
  --vac-color-info-text:   #a8cdf5;
  --vac-color-success-text:  #a3e6c6;
  --vac-color-warning-text:  #f2d39a;
  --vac-color-danger-text:   #f5b4b4;
  --vac-color-swiss-bg:    #16283a;
  --vac-shadow-xs: 0 1px 3px rgba(0,0,0,0.40);
  --vac-shadow-sm: 0 2px 10px rgba(0,0,0,0.45);
  --vac-shadow-md: 0 4px 20px rgba(0,0,0,0.55);
  --vac-shadow-lg: 0 8px 30px rgba(0,0,0,0.60);
  --vac-shadow-xl: 0 16px 50px rgba(0,0,0,0.65);

  --bg:     var(--vac-dunkel-bg);
  --white:  var(--vac-dunkel-bg-card);
  --text:   var(--vac-dunkel-text);
  --border: var(--vac-dunkel-border);
}

/* Browser-eigene Bedienelemente (Formularfelder, Scrollbalken) mitnehmen */
:root                       { color-scheme: light; }
:root[data-theme="dark"]    { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}