/* =========================================================
   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) --------------------- */
    /* Was hier steht, ist die Marke – und damit das, was ein Besucher sieht:
       Verkaufsseite, Rechtstexte, Statusseite. Sie bleiben, wie sie waren.

       **Das Dashboard bringt seine eigenen Flächen mit** (`style.css`, Runde
       10). Bis dahin trugen `--bg`, `--surface` und `--surface-2` alle einen
       Blau-Violett-Stich, und darüber lag ein Schimmer aus denselben Farben.
       Auf einem Plakat ist das die Stimmung; in einem Werkzeug, in dem jemand
       nachmittags dreißig Tickets durchgeht, färbt es jede Tabelle und jedes
       Formular mit ein. Dort sind die Flächen deshalb neutral, und die Marke
       trägt nur noch, was sie tragen soll: aktiver Navigationseintrag,
       Primärknopf, Fokusring, Diagrammlinie.

       Dieselbe Trennung wie bei den Ebenen und dem Fokusring: geteilt ist,
       was beide brauchen (Knopf, Pille, Abzeichen, Skalen, Zustandsfarben) –
       eigen ist, was nur eine Seite hat. */
    --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 */
    /* Grün und Gelb gab es bisher nur einmal: als Fläche *und* als Schrift.
       Auf dunklem Grund geht das gut (8,5:1 und 12,6:1), auf hellem nicht –
       `#22C55E` auf Weiß sind 2,0:1. Dieselbe Trennung wie bei `--primary`
       und `--danger`: der Punkt und die Kante bleiben satt, die Buchstaben
       nehmen die geprüfte Fassung. Im dunklen Thema sind beide identisch. */
    --success-text: #22C55E;
    --warning-text: #FACC15;
    --info-text: #00D4FF;
    /* 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);
    /* Magenta ist keine Zustandsfarbe – es ordnet nur die Icon-Chips der
       Verkaufsseite. Die Fläche gehört trotzdem hierher: sie stand dort als
       fünfter, eigener `rgba()`-Wert neben vier Geschwistern aus dieser
       Reihe. */
    --accent-bg: rgba(255, 46, 158, .12);
    --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);
}

/* =========================================================
   Das helle Thema

   Möglich wurde es erst, als die Marke hier zusammenzog: ein zweiter
   Satz Werte an einer Stelle statt drei Kopien in drei Dateien. Den
   Griff zeigt der Druckblock in `style.css` seit Runde 7 – dort wird
   fürs Papier genau so umgeschaltet.

   **Es gilt nur im Dashboard.** Verkaufsseite, Rechtstexte und
   Statusseite bleiben dunkel: das ist das Gesicht der Marke, und ein
   Besucher hat dort nichts einzustellen. Technisch hängt alles am
   Attribut – `base.html` setzt `data-theme`, die drei anderen Seiten mit
   eigenem `<head>` tun es nicht.

   Umgeschaltet wird **serverseitig** (Cookie + Session, wie die
   Sprache): ohne JavaScript funktioniert der Knopf trotzdem, und die
   Seite kommt schon in der richtigen Farbe an – kein kurzes Aufblitzen
   des dunklen Themas. „Automatisch" ist der einzige Zustand, der
   JavaScript braucht: nur der Browser weiß, was das Betriebssystem
   gerade will. Ohne JavaScript bleibt es dabei dunkel, also so, wie das
   Dashboard schon immer aussah.

   Was hier steht, ist die Farbe – und nur die. Abstände, Schriftgrößen,
   Radien und Bewegung sind in beiden Themen dieselben.

   **Die Flächen stehen seit Runde 10 nicht mehr hier**, sondern in
   `style.css` – dort, wo auch die des dunklen Themas stehen. Sie sind
   das Einzige, was das Dashboard anders macht als die Verkaufsseite;
   alles Übrige (Linkfarbe, Zustandsfarben, Aufhellungen) teilen sich
   beide und dreht deshalb weiterhin hier.
   ========================================================= */

:root[data-theme="light"] {
    /* Dieselbe Regel wie im dunklen Thema, nur andersherum: die
       Markenfarben sind als Fläche gedacht. `--primary` auf Weiß sind
       3,4:1, `--success` sogar 2,0:1 – gerechnet wird das in
       `tests/test_barrierefreiheit.py`, für beide Themen. */
    --link: #5636CE;           /* 7,22:1 auf --surface */
    --danger-text: #B3181B;    /* 6,64:1 */
    --success-text: #0A6630;   /* 6,88:1 */
    --warning-text: #725500;   /* 6,74:1 */
    --info-text: #075A70;      /* 7,52:1 */

    /* Aufhellungen werden zu Abdunklungen. Weiß auf Weiß ist nichts –
       das ist die Stelle, an der ein halbherziges helles Thema seine
       Kanten verliert. */
    --border-soft: rgba(0, 0, 0, .12);
    --tint-1: rgba(0, 0, 0, .02);
    --tint-2: rgba(0, 0, 0, .04);
    --tint-3: rgba(0, 0, 0, .07);
    --tint-4: rgba(0, 0, 0, .12);

    /* Die Zustandsflächen tragen mehr Deckkraft als im Dunkeln: dieselbe
       Farbe zu 12 % auf Weiß ist ein Hauch, auf Schwarz eine Fläche. */
    --success-bg: rgba(34, 197, 94, .16);
    --warning-bg: rgba(250, 204, 21, .22);
    --danger-bg: rgba(239, 68, 68, .14);
    --info-bg: rgba(0, 212, 255, .18);
    --accent-bg: rgba(255, 46, 158, .14);
    --primary-bg: rgba(123, 92, 255, .14);
    --primary-bg-strong: rgba(123, 92, 255, .22);
    --primary-glow: rgba(123, 92, 255, .25);
    --primary-glow-strong: rgba(123, 92, 255, .35);
}

/* =========================================================
   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`).
   ========================================================= */
