/* =========================================================
   VANTEX Design-Token — die eine Quelle
   ---------------------------------------------------------
   Die Markenfarben standen dreimal im Repo: in `style.css`, in
   `landing.css` und noch einmal inline im `<style>` von
   `legal_base.html`. Drei Kopien derselben acht Hex-Werte heißt: wer
   die Marke anfasst, ändert eine Stelle und übersieht zwei. Aufgefallen
   wäre es erst, wenn jemand die Verkaufsseite neben das Dashboard hält.

   Was hier steht, ist die **Marke**: Farben, Radien, Abstände,
   Schriftgrößen, Bewegung – und seit Runde 8 auch die Flächen aus Farbe
   (Aufhellungen, Zustände), weil beide Seiten dieselben Bauteile
   benutzen. Was nur das Dashboard hat, bleibt in `style.css`: die drei
   Ebenen (`--shadow-*`, `--surface-sunken/-raised`), der Fokusring und
   die Höhe der Topbar. Tiefe braucht eine Seite, die Karten stapelt; die
   Verkaufsseite ist eine durchgehende Fläche.

   Eingebunden **vor** dem jeweiligen Stylesheet, in allen vier Seiten
   mit eigenem `<head>`: `base.html`, `landing.html`, `legal_base.html`,
   `status.html`. Als zweite Datei statt `@import`: ein `@import` würde
   den Browser erst die eine Datei laden lassen und dann die nächste
   entdecken; zwei `<link>` holt er nebeneinander.
   ========================================================= */

:root {
    /* ---- Farben (VANTEX UI & Design System v1.0) --------------------- */
    --primary: #7B5CFF;        /* Neon Purple */
    --secondary: #00D4FF;      /* Electric Blue */
    --accent: #FF2E9E;         /* Magenta */
    --bg: #0D0D14;             /* Deep Space */
    --surface: #1A1A24;        /* Graphite */
    --surface-2: #2A2A36;      /* Slate */
    --text: #F5F5F5;
    --muted: #9A9AAB;
    --success: #22C55E;
    --warning: #FACC15;
    --danger: #EF4444;
    --info: #38BDF8;

    /* ---- Dieselben Farben, aber lesbar als *Text* -------------------
       `--primary` erreicht auf `--surface` nur 3,96:1 und auf
       `--surface-2` 3,25:1 – gefordert sind 4,5:1 (WCAG AA). Als Fläche
       (Knopf, Rahmen, Verlauf) bleibt `--primary` unverändert; nur
       Buchstaben nehmen die hellere Fassung. Dasselbe bei `--danger`:
       3,76:1 auf `--surface-2`. Gerechnet in
       `tests/test_barrierefreiheit.py`, nicht abgeschrieben. */
    --link: #9B85FF;           /* 5,91:1 auf --surface, 4,85:1 auf --surface-2 */
    --danger-text: #F87171;    /* 6,24:1 auf --surface, 5,12:1 auf --surface-2 */
    /* Einfarbige Flächen mit weißer Schrift (Knopf, Pille, Zähler): auf
       `--primary` kommt Weiß auf 4,36:1, hier auf 5,37:1. */
    --primary-fill: #6A45FF;
    /* Rot als Fläche: auf `--danger` kommt Weiß nur auf 3,76:1. */
    --danger-fill: #DC2626;    /* 4,83:1 */
    --danger-fill-hover: #B91C1C;

    /* Der Verlauf schmückt (Balken, Fortschritt); `--grad-text` trägt
       weiße Schrift. Der helle Verlauf tut das nicht: am blauen Ende
       kommt Weiß auf 1,77:1. Derselbe Weg von Violett nach Blau, nur
       tief genug: 5,37:1 bis 5,0:1. */
    --grad: linear-gradient(135deg, var(--primary), var(--secondary));
    --grad-text: linear-gradient(135deg, #6A45FF, #00799A);

    /* ---- Abstandsraster ---------------------------------------------
       Vorher 27 verschiedene px-Werte für padding, margin und gap –
       gewachsen, nicht gewählt: 5 neben 6 neben 7, 30 neben 32 neben 34.
       Stattdessen eine Vierer-Reihe mit halber Stufe am unteren Ende.
       Feste Bauteilmaße bleiben Zahlen (Randstärke, der 22-px-Knopf, der
       64-px-Avatar, die 210-px-Spalte): das ist kein Rhythmus, sondern
       ein Maß. Ebenso Negativwerte, die ein positives Gegenstück
       ausgleichen. */
    --sp-0: 2px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    /* Nur die Verkaufsseite: der Abstand zwischen zwei Abschnitten einer
       Seite, die man von oben nach unten liest. Im Dashboard endet die
       Reihe bei 64 – dort sitzt alles in Karten. */
    --sp-9: 96px;

    /* ---- Schriftskala ------------------------------------------------
       26 Werte zwischen .68 und 1.7 rem lagen so dicht beieinander, dass
       zwischen Überschrift und Fließtext kein Unterschied mehr blieb –
       h1 1.6, h2 1.15, h3 1.0 rem. Sieben Stufen, jede rund 1,15-mal so
       groß wie die vorige. */
    --fs-2xs: .74rem;   /* Tabellenkopf, Gruppenbeschriftung (Versalien) */
    --fs-xs: .8rem;     /* Nebenangaben, Pillen, Zähler */
    --fs-sm: .88rem;    /* Tabellen, Formularfelder, Knöpfe */
    --fs-md: 1rem;      /* Fließtext */
    --fs-lg: 1.125rem;  /* h3 */
    --fs-xl: 1.375rem;  /* h2 */
    --fs-2xl: 1.75rem;  /* h1, Statistik-Zahl */

    /* ---- Radien ------------------------------------------------------
       Abstände und Schriftgrößen hatten eine Reihe, die Ecken nicht:
       neben `--radius` (16) und `--radius-sm` (10) standen neun rohe
       Werte – 2 neben 3 neben 4 neben 5, 6 neben 8 neben 10. Vier
       Stufen und die Pille; 2 und 3 werden zu 4, 6 und 10 zu 8.

       `border-radius: 50%` bleibt eine Zahl: das ist keine Stufe,
       sondern die Form „Kreis" (Avatar, Statuspunkt) – mit einer
       px-Stufe wäre ein 88-px-Avatar kein Kreis mehr. */
    --radius-xs: 4px;     /* Fortschrittsbalken, Marker, kleine Pille */
    --radius-sm: 8px;     /* kleiner Knopf, Chip, Vorschaubild */
    --radius-md: 12px;    /* Knopf, Eingabefeld, Menü */
    --radius-lg: 16px;    /* Karte, Panel, Dialog */
    --radius-pill: 999px; /* Badge, Zähler, Fortschrittsleiste */

    /* ---- Bewegung ----------------------------------------------------
       13-mal stand `transition: … .15s ease` von Hand im Stylesheet,
       einmal .18s, einmal .4s. Drei Dauern mit einer Bedeutung: schnell
       für alles unter dem Zeiger, mittel für Bewegung im Layout, langsam
       fürs Ausblenden. Die Kurve endet flach (`ease-out`-artig) statt
       symmetrisch – eine Fläche, die unter dem Zeiger anhält, wirkt
       damit angekommen statt gebremst.

       `prefers-reduced-motion` schaltet die Dauern am Dateiende von
       `style.css` zentral ab – mit Ausnahme des Ladezeigers. */
    --motion-fast: .15s;   /* Farbe, Kante, Fokus: was am Zeiger hängt */
    --motion-base: .25s;   /* was sich bewegt: Panel, Aufklappen */
    --motion-slow: .4s;    /* Ausblenden einer erledigten Meldung */
    --ease: cubic-bezier(.2, 0, .2, 1);

    /* ---- Flächen aus Farbe: Aufhellungen und Zustände ----------------
       Sie standen bis Runde 8 in `style.css`, weil nur das Dashboard
       Karten stapelt. Seit die Verkaufsseite dieselben Bauteile benutzt
       (Knöpfe, Pillen, Abzeichen), braucht sie dieselben Flächen – und
       ein Wert, den beide brauchen, gehört in die geteilte Datei. Was
       weiterhin nur das Dashboard hat, bleibt drüben: die drei Ebenen
       (`--surface-sunken/-raised`, `--shadow-*`), der Fokusring und die
       Höhe der Topbar.

       Aufhellungen auf dunklem Grund gab es in acht Abstufungen zwischen
       .02 und .16 – nebeneinander sahen zwei davon gleich aus, in
       derselben Rolle aber verschieden. Vier Stufen: kaum sichtbar,
       Fläche, Knopf, Knopf beim Zeigen. */
    --border-soft: rgba(255, 255, 255, .07);
    --tint-1: rgba(255, 255, 255, .03);
    --tint-2: rgba(255, 255, 255, .05);
    --tint-3: rgba(255, 255, 255, .09);
    --tint-4: rgba(255, 255, 255, .16);

    /* ---- Zustandsfarben -------------------------------------------------
       Grün, Gelb und Rot standen an rund 30 Stellen als eigener
       `rgba()`-Wert – mal .10, mal .12 Deckkraft für die Fläche, mal .4,
       mal .45, mal .5 für die Kante. Ein Badge, ein Meldungskasten und ein
       Statuspunkt zeigten dadurch drei verschiedene Grüns. Je Zustand
       deshalb genau eine Fläche und eine Kante; die Schriftfarbe ist der
       in `tokens.css` auf Kontrast geprüfte Wert. */
    --success-bg: rgba(34, 197, 94, .12);
    --success-border: rgba(34, 197, 94, .45);
    --warning-bg: rgba(250, 204, 21, .12);
    --warning-border: rgba(250, 204, 21, .45);
    --danger-bg: rgba(239, 68, 68, .12);
    --danger-border: rgba(239, 68, 68, .45);
    --info-bg: rgba(0, 212, 255, .12);
    --info-border: rgba(0, 212, 255, .45);
    --primary-bg: rgba(123, 92, 255, .12);
    --primary-bg-strong: rgba(123, 92, 255, .18);   /* getastete Zeile der Palette */
    --primary-border: rgba(123, 92, 255, .45);
    --primary-glow: rgba(123, 92, 255, .35);
    --primary-glow-strong: rgba(123, 92, 255, .5);
}

/* =========================================================
   Bildschirmstufen — drei, nicht elf

   Abstände, Schriftgrößen und Radien hatten längst eine Reihe, die
   Umbruchpunkte nicht: 480, 600 (sechsmal), 620, 700, 800, 900, 901,
   1024, 1180 im Dashboard, dazu 560 und 980 auf der Verkaufsseite. 620
   neben 600 und 901 neben 900 ist kein Raster, sondern Zufall – und
   jeder Wert dazwischen war eine Stelle, an der sich das Layout ändern
   konnte, ohne dass jemand es entschieden hätte.

     S   600px   Handy  ->  Tablet: Karten-Tabellen werden wieder
                            Tabellen, die Topbar bekommt ihre Beschriftung
     M   900px   Tablet ->  Laptop: die Server-Navigation wird zur
                            Seitenspalte, das Burger-Menü verschwindet
     L  1180px   breites Fenster: die Konfiguration wird zweispaltig

   `901px` war kein eigener Punkt, sondern eine Notlösung: `max-width:
   900px` und `min-width: 900px` treffen beide zu, wenn das Fenster
   genau 900 px breit ist. Deshalb hört das Kleine bei **899.98px** auf
   und das Große fängt bei **900px** an – ein Punkt, zwei Seiten.

   Warum als Kommentar und nicht als Variable: `@media (max-width:
   var(--bp-s))` funktioniert nicht. Eine Media Query wird ausgewertet,
   bevor eine Custom Property einen Wert hat; die Zeile fiele stillschweigend
   weg. Festgenagelt ist die Reihe deshalb im Test
   (`test_designsystem.py::test_es_gibt_nur_drei_bildschirmstufen`).
   ========================================================= */
