/* ==========================================================================
   tokens.css – Design-System KMU-Plattform (Grundke IT-Service)
   Version  : 0.1 (Entwurf)
   Autor    : Claude für Andreas Grundke
   Datum    : 2026-10-15
   Zweck    : Alle Design-Tokens als CSS-Variablen. Gilt für Kundeninstanzen,
              Steuerzentrale, Demos und Landingpage.
   Doku     : 2026-10-15-design-system-plattform_v0.1.md (gleicher Ordner)
   Änderungen:
     0.1  2026-10-15  Erstfassung: Kern, Zustände, Phasen, Diagramm, sechs Profile,
                      Dark-Mode Grundke, Dichte nach Eingabegerät.

   Ablauf (wie die Datei gelesen wird):
     1. Kern-Tokens auf :root (Abstände, Radien, Schatten, Schrift, Dichte, Bewegung)
     2. Zustände, Phasen, Diagrammfarben (hell) auf :root
     3. Profile über data-profil="…" am <html> oder an einem Container:
        grundke (Standard) · restaurant-warm · hotel-ruhig · ausflug-frisch · weinstube
     4. Dunkel nur für Grundke-Oberflächen: data-thema="dunkel" oder Systemeinstellung
     5. Dichte: (pointer: coarse) → Touch; Umschalter data-dichte="kompakt|normal|gross"
     6. Browserflächen: Auswahl, Fokus, Scrollleisten, Tabellenziffern

   Farbwerte mit Kontrastbezug (Knopf-Solid, Marke-Text, Akzent-Solid, Zustands-Text)
   werden beim Speichern des Profils serverseitig berechnet (WCAG 2.2 AA und APCA)
   und hier je Profil fest eingetragen. Die color-mix()-Ableitungen unter
   [data-profil] sind nur die Rückfallebene für ein Profil ohne berechnete Werte.
   ========================================================================== */

/* ---------- Schriften (lokal, OFL, kein Abruf bei Dritten) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ==========================================================================
   1. KERN
   ========================================================================== */
:root {
  color-scheme: light;

  /* Schrift */
  --schrift-ui: "Manrope", "Segoe UI", system-ui, sans-serif;
  --schrift-zahlen: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --schrift-marke: var(--schrift-ui);           /* Marken-Slot: Überschriften, Mandantenname */
  --gewicht-normal: 450;
  --gewicht-mittel: 560;
  --gewicht-stark: 680;
  --zh-eng: 1.25;                               /* Zeilenhöhe Tabellen, Knöpfe */
  --zh-text: 1.5;                               /* Zeilenhöhe Fließtext */
  --laufweite-titel: -0.012em;

  /* Abstände (4er-Raster, eng in Gruppen, weit zwischen Blöcken) */
  --abstand-1: 2px;
  --abstand-2: 4px;
  --abstand-3: 6px;
  --abstand-4: 8px;
  --abstand-5: 12px;
  --abstand-6: 16px;
  --abstand-7: 24px;
  --abstand-8: 32px;
  --abstand-9: 48px;

  /* Radien je Komponente, bewusst nicht überall gleich */
  --r-chip: 4px;
  --r-eingabe: 6px;
  --r-zelle: 6px;
  --r-knopf: 8px;                               /* CI 2026.01; Marken-Slot */
  --r-karte: 12px;                              /* CI 2026.01 */
  --r-dialog: 12px;
  --r-voll: 999px;                              /* nur Schalter und Avatare */

  /* Ebenen */
  --z-kopf: 10; --z-panel: 20; --z-menue: 40; --z-dialog: 100; --z-meldung: 1000;

  /* Bewegung: kurz, ausrollend */
  --dauer-kurz: 120ms;
  --dauer: 180ms;
  --dauer-panel: 240ms;
  --ease-aus: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fokus und Auswahl */
  --fokus-breite: 2px;
  --fokus-abstand: 2px;

  /* Dichte: Standard Kompakt (Maus und Tastatur) */
  --zeile: 34px;                                /* Tabellenzeile */
  --klick: 30px;                                /* Höhe Knopf, Eingabe */
  --pad-zelle-x: 8px;
  --pad-knopf-x: 12px;
  --pad-karte: 12px;
  --luecke: 12px;                               /* Abstand zwischen Blöcken */
  --t-meta: 11.5px;
  --t-klein: 12px;
  --t-basis: 13px;
  --t-eingabe: 13px;
  --t-gross: 15px;
  --t-titel: 18px;
  --t-seite: 22px;
  --icon: 16px;
}

/* Dichte folgt dem Eingabegerät (Regel feedback_dichte_desktop_touch) */
@media (pointer: coarse) {
  :root:not([data-dichte]) {
    --zeile: 48px; --klick: 44px; --pad-zelle-x: 12px; --pad-knopf-x: 16px; --pad-karte: 14px; --luecke: 16px;
    --t-meta: 13px; --t-klein: 14px; --t-basis: 16px; --t-eingabe: 16px; --t-gross: 18px; --t-titel: 21px; --t-seite: 26px; --icon: 20px;
  }
}
[data-dichte="kompakt"] {
  --zeile: 34px; --klick: 30px; --pad-zelle-x: 8px; --pad-knopf-x: 12px; --pad-karte: 12px; --luecke: 12px;
  --t-meta: 11.5px; --t-klein: 12px; --t-basis: 13px; --t-eingabe: 13px; --t-gross: 15px; --t-titel: 18px; --t-seite: 22px; --icon: 16px;
}
[data-dichte="normal"] {
  --zeile: 40px; --klick: 36px; --pad-zelle-x: 10px; --pad-knopf-x: 14px; --pad-karte: 14px; --luecke: 16px;
  --t-meta: 12px; --t-klein: 13px; --t-basis: 14px; --t-eingabe: 14px; --t-gross: 16px; --t-titel: 19px; --t-seite: 24px; --icon: 18px;
}
[data-dichte="gross"] {
  --zeile: 48px; --klick: 44px; --pad-zelle-x: 12px; --pad-knopf-x: 16px; --pad-karte: 14px; --luecke: 16px;
  --t-meta: 13px; --t-klein: 14px; --t-basis: 16px; --t-eingabe: 16px; --t-gross: 18px; --t-titel: 21px; --t-seite: 26px; --icon: 20px;
}
/* Schatten werden je Profil neu aufgelöst, damit --schattenfarbe des Profils greift */
:root,
[data-profil] {
  /* Schatten: vier Tiefen, getönt mit --schattenfarbe, immer Versatz plus Weichheit */
  --schatten-1: 0 1px 2px color-mix(in oklab, var(--schattenfarbe) 7%, transparent),
                0 1px 1px color-mix(in oklab, var(--schattenfarbe) 4%, transparent);
  --schatten-2: 0 2px 4px -1px color-mix(in oklab, var(--schattenfarbe) 8%, transparent),
                0 8px 16px -4px color-mix(in oklab, var(--schattenfarbe) 12%, transparent);
  --schatten-3: 0 4px 8px -2px color-mix(in oklab, var(--schattenfarbe) 8%, transparent),
                0 16px 32px -8px color-mix(in oklab, var(--schattenfarbe) 16%, transparent);
  --schatten-4: 0 8px 16px -4px color-mix(in oklab, var(--schattenfarbe) 10%, transparent),
                0 32px 64px -12px color-mix(in oklab, var(--schattenfarbe) 24%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dauer-kurz: 0ms; --dauer: 0ms; --dauer-panel: 0ms; }
}

/* ==========================================================================
   2. ZUSTÄNDE, PHASEN, DIAGRAMM (hell, für alle Profile gleich)
   Quelle: Radix Colors (Fläche Stufe 3, Rand 6/7, Text Stufe 11, wo nötig in OKLCH
   nachgedunkelt bis 4,5:1 und Lc 60). Diagramm: dataviz-Referenzpalette, validiert.
   ========================================================================== */
:root {
  --erfolg-fl: #e6f6eb;
  --erfolg-rand: #adddc0;
  --erfolg-text: #157b51;
  --erfolg-solid: #30a46c;
  --warnung-fl: #fff7c2;
  --warnung-rand: #f3d673;
  --warnung-text: #9f5d00;
  --warnung-solid: #ffc53d;
  --fehler-fl: #feebec;
  --fehler-rand: #fdbdbe;
  --fehler-text: #ce2c31;
  --fehler-solid: #e5484d;
  --hinweis-fl: #e6f4fe;
  --hinweis-rand: #acd8fc;
  --hinweis-text: #006ec7;
  --hinweis-solid: #0090ff;
  --phase-vorlauf-fl: #e1f6fd;
  --phase-vorlauf-rand: #8dcae3;
  --phase-vorlauf-text: #00749e;
  --phase-vorlauf-punkt: #7ce2fe;
  --phase-verbindlich-fl: #f0f1fe;
  --phase-verbindlich-rand: #b8baf8;
  --phase-verbindlich-text: #5753c6;
  --phase-verbindlich-punkt: #5b5bd6;
  --phase-vorbereitung-fl: #e0f8f3;
  --phase-vorbereitung-rand: #83cdc1;
  --phase-vorbereitung-text: #007b6a;
  --phase-vorbereitung-punkt: #12a594;
  --phase-durchfuehrung-fl: #e9f6e9;
  --phase-durchfuehrung-rand: #94ce9a;
  --phase-durchfuehrung-text: #287c3a;
  --phase-durchfuehrung-punkt: #46a758;
  --phase-nachlauf-fl: #f6eee7;
  --phase-nachlauf-rand: #dcbc9f;
  --phase-nachlauf-text: #815e46;
  --phase-nachlauf-punkt: #ad7f58;
  --phase-abschluss-fl: #f0f0f0;
  --phase-abschluss-rand: #cecece;
  --phase-abschluss-text: #646464;
  --phase-abschluss-punkt: #8d8d8d;
  --diagramm-1: #2a78d6;
  --diagramm-2: #eb6834;
  --diagramm-3: #1baf7a;
  --diagramm-4: #eda100;
  --diagramm-5: #e87ba4;
  --diagramm-6: #008300;
}

/* ==========================================================================
   3. MARKEN-SLOTS: Rückfallebene für ein Profil ohne berechnete Werte
   Pflicht-Slot: --marke. Optional: --akzent, --seite, --schrift-marke, --r-knopf, Logo (im HTML).
   Alles andere wird abgeleitet. Kontrastwerte rechnet der Server beim Speichern.
   ========================================================================== */
[data-profil] {
  --marke-solid: var(--marke);
  --marke-hover: color-mix(in oklab, var(--marke-solid) 88%, black);
  --marke-aktiv: color-mix(in oklab, var(--marke-solid) 80%, black);
  --marke-text: var(--marke-solid);
  --marke-fl-1: color-mix(in oklab, var(--marke) 7%, var(--karte));
  --marke-fl-2: color-mix(in oklab, var(--marke) 12%, var(--karte));
  --marke-fl-3: color-mix(in oklab, var(--marke) 20%, var(--karte));
  --marke-rand: color-mix(in oklab, var(--marke) 45%, var(--karte));
  --akzent-solid: var(--akzent);
  --akzent-fl: color-mix(in oklab, var(--akzent) 14%, var(--karte));
  --auswahl: var(--marke-fl-3);
  --fokus: var(--marke-text);
}

/* ==========================================================================
   4. PROFILE (berechnet aus den Marken-Slots, siehe Doku Abschnitt 5 und 6)
   ========================================================================== */

/* Grundke IT-Service (CI 2026.01) (Eigene Oberfläche) */
:root,
[data-profil="grundke"] {
  --n-1: #fcfcfd;
  --n-2: #f9f9fb;
  --n-3: #f0f0f3;
  --n-4: #e8e8ec;
  --n-5: #e0e1e6;
  --n-6: #d9d9e0;
  --n-7: #cdced6;
  --n-8: #b9bbc6;
  --n-9: #8b8d98;
  --n-10: #80838d;
  --n-11: #60646c;
  --n-12: #1c2024;
  --seite: #f4f7fc;
  --karte: #ffffff;
  --karte-2: #f9f9fb;
  --flaeche-hover: #f0f0f3;
  --flaeche-aktiv: #e8e8ec;
  --rand: #d0daea;
  --rand-stark: #cdced6;
  --rand-eingabe: #8b8d98;
  --text-1: #111111;
  --text-2: #555555;
  --text-aus: #8b8d98;
  --marke: #0c4da2;
  --marke-solid: #0c4da2;
  --marke-hover: #003f8e;
  --marke-aktiv: #00357a;
  --auf-marke: #ffffff;
  --marke-text: #0c4da2;
  --marke-fl-1: #e8f0fb;
  --marke-fl-2: #e1e9f5;
  --marke-fl-3: #cedbee;
  --marke-rand: #92aed8;
  --akzent: #26bdef;
  --akzent-solid: #2cc0f2;
  --auf-akzent: #1c2024;
  --akzent-text: #00779a;
  --akzent-fl: #e7f6fd;
  --fokus: #0c4da2;
  --auswahl: #cedbee;
  --zeile-gewaehlt: #e8f0fb;
  --schattenfarbe: #1c2024;
  --fehler-text: #c0392b;
}

/* Restaurant warm: Terrakotta, Oliv, Sand (Demo) */
[data-profil="restaurant-warm"] {
  --n-1: #fdfdfc;
  --n-2: #f9f9f8;
  --n-3: #f1f0ef;
  --n-4: #e9e8e6;
  --n-5: #e2e1de;
  --n-6: #dad9d6;
  --n-7: #cfceca;
  --n-8: #bcbbb5;
  --n-9: #8d8d86;
  --n-10: #82827c;
  --n-11: #63635e;
  --n-12: #21201c;
  --seite: #fdfdfc;
  --karte: #ffffff;
  --karte-2: #f9f9f8;
  --flaeche-hover: #f1f0ef;
  --flaeche-aktiv: #e9e8e6;
  --rand: #dad9d6;
  --rand-stark: #cfceca;
  --rand-eingabe: #8d8d86;
  --text-1: #21201c;
  --text-2: #63635e;
  --text-aus: #8d8d86;
  --marke: #e54d2e;
  --marke-solid: #8e3a23; /* Ziegel: Mischung Radix Tomato 11 (#d13415) und 12 (#5c271f); Tomate bleibt für Linien, Rot nur für Fehler */
  --marke-hover: #7a3020;
  --marke-aktiv: #6a2b1e;
  --auf-marke: #ffffff;
  --marke-text: #d13415;
  --marke-fl-1: #fff4f1;
  --marke-fl-2: #ffebe7;
  --marke-fl-3: #ffded6;
  --marke-rand: #fbb4a3;
  --akzent: #5c7c2f;
  --akzent-solid: #5c7c2f;
  --auf-akzent: #ffffff;
  --akzent-text: #37401c;
  --akzent-fl: #e7ece1;
  --fokus: #d13415;
  --auswahl: #ffded6;
  --zeile-gewaehlt: #fff4f1;
  --schattenfarbe: #21201c;
}

/* Hotel ruhig: Petrol, Sand, Messing (Demo) */
[data-profil="hotel-ruhig"] {
  --n-1: #fdfdfc;
  --n-2: #f9f9f8;
  --n-3: #f1f0ef;
  --n-4: #e9e8e6;
  --n-5: #e2e1de;
  --n-6: #dad9d6;
  --n-7: #cfceca;
  --n-8: #bcbbb5;
  --n-9: #8d8d86;
  --n-10: #82827c;
  --n-11: #63635e;
  --n-12: #21201c;
  --seite: #f0eee9;
  --karte: #ffffff;
  --karte-2: #f9f9f8;
  --flaeche-hover: #f1f0ef;
  --flaeche-aktiv: #e9e8e6;
  --rand: #dad9d6;
  --rand-stark: #cfceca;
  --rand-eingabe: #8d8d86;
  --text-1: #21201c;
  --text-2: #63635e;
  --text-aus: #8d8d86;
  --marke: #12a594;
  --marke-solid: #008573;
  --marke-hover: #007565;
  --marke-aktiv: #006859;
  --auf-marke: #ffffff;
  --marke-text: #0d3d38;
  --marke-fl-1: #f1f9f7;
  --marke-fl-2: #e8f4f2;
  --marke-fl-3: #d8ede9;
  --marke-rand: #a7d7ce;
  --akzent: #978365;
  --akzent-solid: #c6b192;
  --auf-akzent: #21201c;
  --akzent-text: #71624b;
  --akzent-fl: #f0ede8;
  --fokus: #0d3d38;
  --auswahl: #d8ede9;
  --zeile-gewaehlt: #f1f9f7;
  --schattenfarbe: #21201c;
}

/* Ausflugslokal frisch: Jade, Salbei, Sonnengelb (Demo) */
[data-profil="ausflug-frisch"] {
  --n-1: #fbfdfc;
  --n-2: #f7f9f8;
  --n-3: #eef1f0;
  --n-4: #e6e9e8;
  --n-5: #dfe2e0;
  --n-6: #d7dad9;
  --n-7: #cbcfcd;
  --n-8: #b8bcba;
  --n-9: #868e8b;
  --n-10: #7c8481;
  --n-11: #5f6563;
  --n-12: #1a211e;
  --seite: #fbfdfc;
  --karte: #ffffff;
  --karte-2: #f7f9f8;
  --flaeche-hover: #eef1f0;
  --flaeche-aktiv: #e6e9e8;
  --rand: #d7dad9;
  --rand-stark: #cbcfcd;
  --rand-eingabe: #868e8b;
  --text-1: #1a211e;
  --text-2: #5f6563;
  --text-aus: #868e8b;
  --marke: #29a383;
  --marke-solid: #208368;
  --marke-hover: #01745a;
  --marke-aktiv: #006750;
  --auf-marke: #ffffff;
  --marke-text: #008165;
  --marke-fl-1: #f2f9f6;
  --marke-fl-2: #e8f4ef;
  --marke-fl-3: #d9ede5;
  --marke-rand: #a9d6c5;
  --akzent: #ffc53d;
  --akzent-solid: #ffc53d;
  --auf-akzent: #1a211e;
  --akzent-text: #926c00;
  --akzent-fl: #fff8e9;
  --fokus: #008165;
  --auswahl: #d9ede5;
  --zeile-gewaehlt: #f2f9f6;
  --schattenfarbe: #1a211e;
}

/* Reserve Weinstube: Rubin, Mauve, Bronze (Demo) */
[data-profil="weinstube"] {
  --n-1: #fdfcfd;
  --n-2: #faf9fb;
  --n-3: #f2eff3;
  --n-4: #eae7ec;
  --n-5: #e3dfe6;
  --n-6: #dbd8e0;
  --n-7: #d0cdd7;
  --n-8: #bcbac7;
  --n-9: #8e8c99;
  --n-10: #84828e;
  --n-11: #65636d;
  --n-12: #211f26;
  --seite: #fdfcfd;
  --karte: #ffffff;
  --karte-2: #faf9fb;
  --flaeche-hover: #f2eff3;
  --flaeche-aktiv: #eae7ec;
  --rand: #dbd8e0;
  --rand-stark: #d0cdd7;
  --rand-eingabe: #8e8c99;
  --text-1: #211f26;
  --text-2: #65636d;
  --text-aus: #8e8c99;
  --marke: #e54666;
  --marke-solid: #ca244d;
  --marke-hover: #b8023f;
  --marke-aktiv: #a50037;
  --auf-marke: #ffffff;
  --marke-text: #ca244d;
  --marke-fl-1: #fff3f4;
  --marke-fl-2: #ffebec;
  --marke-fl-3: #ffdddf;
  --marke-rand: #fcb1b8;
  --akzent: #a18072;
  --akzent-solid: #cfac9e;
  --auf-akzent: #211f26;
  --akzent-text: #7d5e54;
  --akzent-fl: #f2ecea;
  --fokus: #ca244d;
  --auswahl: #ffdddf;
  --zeile-gewaehlt: #fff3f4;
  --schattenfarbe: #211f26;
}

/* ==========================================================================
   5. DUNKEL – nur Grundke-Oberflächen (CI 2026.01 Dark). Mandanten bleiben hell.
   Drei Werte sind gegenüber der CI-Vorlage aufgehellt, weil sie APCA Lc 60 sonst
   verfehlen: --text-2 #94a3b8 → #b0bfd5, --marke-text und --akzent-text
   #26bdef → #3eccfe (Freigabe Andreas offen, Doku Abschnitt 9).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]):not([data-profil]),
  [data-profil="grundke"]:not([data-thema="hell"]) {
  --n-1: #111113;
  --n-2: #18191b;
  --n-3: #212225;
  --n-4: #272a2d;
  --n-5: #2e3135;
  --n-6: #363a3f;
  --n-7: #43484e;
  --n-8: #5a6169;
  --n-9: #696e77;
  --n-10: #777b84;
  --n-11: #b0b4ba;
  --n-12: #edeef0;
  --seite: #0f1117;
  --karte: #1e2538;
  --karte-2: #1a1f2e;
  --flaeche-hover: #272e41;
  --flaeche-aktiv: #2e3547;
  --rand: #2d3748;
  --rand-stark: #3b4254;
  --rand-eingabe: #64748b;
  --text-1: #f1f5f9;
  --text-2: #b0bfd5;
  --text-aus: #64748b;
  --marke: #0c4da2;
  --marke-solid: #0c4da2;
  --marke-hover: #1f5cb2;
  --marke-aktiv: #004293;
  --auf-marke: #ffffff;
  --marke-text: #3eccfe;
  --marke-fl-1: #1e2c4a;
  --marke-fl-2: #1d3054;
  --marke-fl-3: #1d3560;
  --marke-rand: #2d6585;
  --akzent: #26bdef;
  --akzent-solid: #26bdef;
  --auf-akzent: #0f1117;
  --akzent-text: #3eccfe;
  --akzent-fl: #253b52;
  --fokus: #3eccfe;
  --auswahl: #1d3560;
  --zeile-gewaehlt: #1e2c4a;
  --schattenfarbe: #000000;
  --erfolg-fl: #132d21;
  --erfolg-rand: #20573e;
  --erfolg-text: #3dd68c;
  --erfolg-solid: #30a46c;
  --warnung-fl: #302008;
  --warnung-rand: #5c3d05;
  --warnung-text: #ffca16;
  --warnung-solid: #ffc53d;
  --fehler-fl: #3b1219;
  --fehler-rand: #72232d;
  --fehler-text: #ffa09c;
  --fehler-solid: #e5484d;
  --hinweis-fl: #0d2847;
  --hinweis-rand: #104d87;
  --hinweis-text: #7ebeff;
  --hinweis-solid: #0090ff;
  --phase-vorlauf-fl: #112840;
  --phase-vorlauf-rand: #1f6692;
  --phase-vorlauf-text: #75c7f0;
  --phase-vorlauf-punkt: #7ce2fe;
  --phase-verbindlich-fl: #202248;
  --phase-verbindlich-rand: #4a4a95;
  --phase-verbindlich-text: #b7b1ff;
  --phase-verbindlich-punkt: #5b5bd6;
  --phase-vorbereitung-fl: #0d2d2a;
  --phase-vorbereitung-rand: #1c6961;
  --phase-vorbereitung-text: #0bd8b6;
  --phase-vorbereitung-punkt: #12a594;
  --phase-durchfuehrung-fl: #1b2a1e;
  --phase-durchfuehrung-rand: #366740;
  --phase-durchfuehrung-text: #71d083;
  --phase-durchfuehrung-punkt: #46a758;
  --phase-nachlauf-fl: #28211d;
  --phase-nachlauf-rand: #614a39;
  --phase-nachlauf-text: #dbb594;
  --phase-nachlauf-punkt: #ad7f58;
  --phase-abschluss-fl: #222222;
  --phase-abschluss-rand: #484848;
  --phase-abschluss-text: #b9b9b9;
  --phase-abschluss-punkt: #6e6e6e;
  --diagramm-1: #3987e5;
  --diagramm-2: #d95926;
  --diagramm-3: #199e70;
  --diagramm-4: #c98500;
  --diagramm-5: #d55181;
  --diagramm-6: #008300;
  --fehler-solid: #ef4444; --warnung-solid: #f59e0b; --erfolg-solid: #22c55e; /* CI Dark, Symbole */
  --schatten-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --schatten-2: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 8px 16px -4px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.04);
  --schatten-3: 0 4px 8px -2px rgb(0 0 0 / 0.4), 0 16px 32px -8px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.05);
  --schatten-4: 0 8px 16px -4px rgb(0 0 0 / 0.45), 0 32px 64px -12px rgb(0 0 0 / 0.65), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  color-scheme: dark;
  }
}
:root[data-thema="dunkel"]:not([data-profil]),
[data-profil="grundke"][data-thema="dunkel"] {
  --n-1: #111113;
  --n-2: #18191b;
  --n-3: #212225;
  --n-4: #272a2d;
  --n-5: #2e3135;
  --n-6: #363a3f;
  --n-7: #43484e;
  --n-8: #5a6169;
  --n-9: #696e77;
  --n-10: #777b84;
  --n-11: #b0b4ba;
  --n-12: #edeef0;
  --seite: #0f1117;
  --karte: #1e2538;
  --karte-2: #1a1f2e;
  --flaeche-hover: #272e41;
  --flaeche-aktiv: #2e3547;
  --rand: #2d3748;
  --rand-stark: #3b4254;
  --rand-eingabe: #64748b;
  --text-1: #f1f5f9;
  --text-2: #b0bfd5;
  --text-aus: #64748b;
  --marke: #0c4da2;
  --marke-solid: #0c4da2;
  --marke-hover: #1f5cb2;
  --marke-aktiv: #004293;
  --auf-marke: #ffffff;
  --marke-text: #3eccfe;
  --marke-fl-1: #1e2c4a;
  --marke-fl-2: #1d3054;
  --marke-fl-3: #1d3560;
  --marke-rand: #2d6585;
  --akzent: #26bdef;
  --akzent-solid: #26bdef;
  --auf-akzent: #0f1117;
  --akzent-text: #3eccfe;
  --akzent-fl: #253b52;
  --fokus: #3eccfe;
  --auswahl: #1d3560;
  --zeile-gewaehlt: #1e2c4a;
  --schattenfarbe: #000000;
  --erfolg-fl: #132d21;
  --erfolg-rand: #20573e;
  --erfolg-text: #3dd68c;
  --erfolg-solid: #30a46c;
  --warnung-fl: #302008;
  --warnung-rand: #5c3d05;
  --warnung-text: #ffca16;
  --warnung-solid: #ffc53d;
  --fehler-fl: #3b1219;
  --fehler-rand: #72232d;
  --fehler-text: #ffa09c;
  --fehler-solid: #e5484d;
  --hinweis-fl: #0d2847;
  --hinweis-rand: #104d87;
  --hinweis-text: #7ebeff;
  --hinweis-solid: #0090ff;
  --phase-vorlauf-fl: #112840;
  --phase-vorlauf-rand: #1f6692;
  --phase-vorlauf-text: #75c7f0;
  --phase-vorlauf-punkt: #7ce2fe;
  --phase-verbindlich-fl: #202248;
  --phase-verbindlich-rand: #4a4a95;
  --phase-verbindlich-text: #b7b1ff;
  --phase-verbindlich-punkt: #5b5bd6;
  --phase-vorbereitung-fl: #0d2d2a;
  --phase-vorbereitung-rand: #1c6961;
  --phase-vorbereitung-text: #0bd8b6;
  --phase-vorbereitung-punkt: #12a594;
  --phase-durchfuehrung-fl: #1b2a1e;
  --phase-durchfuehrung-rand: #366740;
  --phase-durchfuehrung-text: #71d083;
  --phase-durchfuehrung-punkt: #46a758;
  --phase-nachlauf-fl: #28211d;
  --phase-nachlauf-rand: #614a39;
  --phase-nachlauf-text: #dbb594;
  --phase-nachlauf-punkt: #ad7f58;
  --phase-abschluss-fl: #222222;
  --phase-abschluss-rand: #484848;
  --phase-abschluss-text: #b9b9b9;
  --phase-abschluss-punkt: #6e6e6e;
  --diagramm-1: #3987e5;
  --diagramm-2: #d95926;
  --diagramm-3: #199e70;
  --diagramm-4: #c98500;
  --diagramm-5: #d55181;
  --diagramm-6: #008300;
  --fehler-solid: #ef4444; --warnung-solid: #f59e0b; --erfolg-solid: #22c55e; /* CI Dark, Symbole */
  --schatten-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --schatten-2: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 8px 16px -4px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.04);
  --schatten-3: 0 4px 8px -2px rgb(0 0 0 / 0.4), 0 16px 32px -8px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.05);
  --schatten-4: 0 8px 16px -4px rgb(0 0 0 / 0.45), 0 32px 64px -12px rgb(0 0 0 / 0.65), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  color-scheme: dark;
}

/* Mandanten und Demos bleiben hell, auch wenn die Seite dunkel läuft */
[data-profil]:not([data-profil="grundke"]),
[data-profil="grundke"][data-thema="hell"] {
  color-scheme: light;
  --erfolg-fl: #e6f6eb;
  --erfolg-rand: #adddc0;
  --erfolg-text: #157b51;
  --erfolg-solid: #30a46c;
  --warnung-fl: #fff7c2;
  --warnung-rand: #f3d673;
  --warnung-text: #9f5d00;
  --warnung-solid: #ffc53d;
  --fehler-fl: #feebec;
  --fehler-rand: #fdbdbe;
  --fehler-text: #ce2c31;
  --fehler-solid: #e5484d;
  --hinweis-fl: #e6f4fe;
  --hinweis-rand: #acd8fc;
  --hinweis-text: #006ec7;
  --hinweis-solid: #0090ff;
  --phase-vorlauf-fl: #e1f6fd;
  --phase-vorlauf-rand: #8dcae3;
  --phase-vorlauf-text: #00749e;
  --phase-vorlauf-punkt: #7ce2fe;
  --phase-verbindlich-fl: #f0f1fe;
  --phase-verbindlich-rand: #b8baf8;
  --phase-verbindlich-text: #5753c6;
  --phase-verbindlich-punkt: #5b5bd6;
  --phase-vorbereitung-fl: #e0f8f3;
  --phase-vorbereitung-rand: #83cdc1;
  --phase-vorbereitung-text: #007b6a;
  --phase-vorbereitung-punkt: #12a594;
  --phase-durchfuehrung-fl: #e9f6e9;
  --phase-durchfuehrung-rand: #94ce9a;
  --phase-durchfuehrung-text: #287c3a;
  --phase-durchfuehrung-punkt: #46a758;
  --phase-nachlauf-fl: #f6eee7;
  --phase-nachlauf-rand: #dcbc9f;
  --phase-nachlauf-text: #815e46;
  --phase-nachlauf-punkt: #ad7f58;
  --phase-abschluss-fl: #f0f0f0;
  --phase-abschluss-rand: #cecece;
  --phase-abschluss-text: #646464;
  --phase-abschluss-punkt: #8d8d8d;
  --diagramm-1: #2a78d6;
  --diagramm-2: #eb6834;
  --diagramm-3: #1baf7a;
  --diagramm-4: #eda100;
  --diagramm-5: #e87ba4;
  --diagramm-6: #008300;
}

/* ==========================================================================
   6. BROWSERFLÄCHEN (Schicht "basis", App-Stile dürfen überschreiben)
   ========================================================================== */
@layer basis {
  html {
    font-family: var(--schrift-ui);
    font-size: var(--t-basis);
    line-height: var(--zh-text);
    color: var(--text-1);
    background: var(--seite);
    accent-color: var(--marke-solid);
    caret-color: var(--marke-text);
    scrollbar-color: var(--n-8) transparent;
    -webkit-tap-highlight-color: transparent;
  }
  /* Profil-Container setzen Formularfarben neu, sonst erben sie den Wert von html */
  [data-profil] { accent-color: var(--marke-solid); caret-color: var(--marke-text); scrollbar-color: var(--n-8) transparent; }
  * { scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--n-7); border-radius: var(--r-voll); border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--n-9); background-clip: padding-box; }
  ::selection { background: var(--auswahl); color: var(--text-1); }
  :focus-visible { outline: var(--fokus-breite) solid var(--fokus); outline-offset: var(--fokus-abstand); }
  a { color: var(--marke-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  /* Tabellenziffern: Zahlenschrift in Datenspalten, Ziffern gleich breit in der UI-Schrift */
  .zahl, td.zahl, th.zahl { font-family: var(--schrift-zahlen); font-variant-numeric: tabular-nums slashed-zero; font-size: 0.94em; letter-spacing: -0.01em; }
  table, .tabellenziffern { font-variant-numeric: tabular-nums; }
  ::placeholder { color: var(--text-2); opacity: 1; }
  :disabled, [aria-disabled="true"] { color: var(--text-aus); cursor: not-allowed; }
}