/* rollen.css — der Gestaltungs-Vertrag von olymp2.
===========================================================================
EIGENSTAENDIG SEIT 20.09.2026 (Entscheid Manuel). Die Namen sind `--u-*` und
vertraut — aber was hier steht, gilt hier.
DUNKEL SEIT DER HUELLE „ERP“ (H1, Entscheid Manuel 03.10.2026: „EIN System,
olymp2-Architektur + ERP-Bedienung, einzige Huelle“; Entwurf F/G,
hu/BAUPLAN_HUELLE_ERP.md). Es bleibt EIN Thema und EINE Palette — nur ist sie
jetzt dunkel: Grund #0f1316, Flaechen in drei Stufen darueber, helle Schrift,
Gruen fuer Geld, Neon als Akzent. Die ROLLENNAMEN SIND GEBLIEBEN, damit jede
Modulseite ohne Umbau dunkel lesbar wird (Design-Vertrag): `--u-surface` ist
weiter die Karte, `--u-text` weiter die Schrift. Bis H1 war die Palette hell
(„Kanzlei“, warmes Papier, Brombeere); deren Werte stehen in der Geschichte von
git, nicht hier.
DIE MARKE BLEIBT BROMBEERE — ALS FLAECHE. `--u-brand`, `--u-brand-2` und
`--u-brand-hell` sind die Farben des Zeichens, aus denen bin/symbole_bauen.php
das App-Symbol rechnet (18-gleich); sie bleiben gleich. Auf dunklem Grund ist
die dunkle Marke keine Schrift mehr (1,7:1) — als Schrift steht die Textstufe
`--u-brand-text` (hell, ≥ 6,9:1 auf jeder Flaeche). Hauptknopf und Markenverlauf
tragen weiter weisse Schrift (≥ 7,94:1, 14-verlauf).
MAGENTA HEISST „WARTET AUF DICH“ UND NICHTS ANDERES (E11). Neon ist Kante,
Schein und Deko, nie Schrift (14-neon-nie-text). Die Bereiche des Menues tragen
je eine Sparten-Farbe (`--u-sparte-*`), die Mandanten je eine Mandantenfarbe
(`--u-mandant-1…6`, fest nach der ID, huelle_mandant_farbe()).
KEIN ZWEITES THEMA, und das ist eine Entscheidung, kein Rueckstand: zwei Themen
sind zwei Paletten, die auseinanderlaufen. Ein heller Modus kaeme als zweite
Palette mit eigener Kontrastrechnung (offen an Manuel, Bauplan „Offen“); die
Pruefungen 11f bis 11k halten fest, dass er nicht durch die Hintertuer kommt.
SEIT H4 KAM ER DURCH DIE VORDERTUER (Manuel 04.10.2026: „Hell/Dunkel-Umschalter fehlt
noch“; Entwurf J `body.hell`): rollen-hell.css setzt jede Farbrolle dieser Datei neu,
mit eigener Kontrastrechnung (43h in tests/pruefe_liste.php). Die Seite laedt sie nur
fuer `oberflaeche.farbe` = hell (immer) bzw. = system (mit Medienabfrage am ) —
DIESE Datei bleibt die eine dunkle Palette ohne Medienabfrage (11f bis 11k).
LADEREIHENFOLGE: schriften.css, olymp.css, huelle.css, dann DIESE Datei. Und
KEIN @layer: nicht geschichtetes CSS schlaegt jedes geschichtete (61 §2). Aus
demselben Grund stehen hier ausschliesslich Rollen und niemals ein Baustein —
11m prueft das.
WAS GERECHNET WIRD, IST, WAS ANGEZEIGT WIRD. Alle Farbtoene stehen als Literale
in der Basis, und tests/pruefe_oberflaeche.php rechnet genau diese; der Aufsatz
am Ende traegt nur abgeleitete Mischungen, und 11d rechnet nach, dass Basis und
Aufsatz denselben Wert meinen.
BASIS UND AUFSATZ BLEIBEN GETRENNT, und das ist Technik: ein Browser ohne
color-mix() speichert den Wert klaglos, VERWIRFT IHN ABER BEIM EINSETZEN --
ein Rueckfall ueber var() greift dort nicht. Die Mischungen stehen im Aufsatz,
ihre rgba-Naeherung in der Basis.
=========================================================================== */
:root {
/* MB-B35c: freigegebener Prüfplatz 06.10.2026. Orange/Grün mit weißem Text >= 4,5:1. */
--u-pruef-leiste: #1b2620;
--u-pruef-text: #f1eef5;
--u-pruef-leise: #b9b3c4;
--u-pruef-orange: #b64b00;
--u-pruef-gruen: #167741;
--u-pruef-weiss: #ffffff;
--u-pruef-hover: rgba(255, 255, 255, .09);
--u-pruef-linie: rgba(255, 255, 255, .35);
--u-pruef-druck: rgba(0, 0, 0, .12);
/* ENDE MB-B35c Rollen */
/* Formularfelder, Rollbalken und Auswahllisten des Browsers folgen dem Thema. */
color-scheme: dark;
/* ── Flaechen ─────────────────────────────────────────────────────────
DUNKEL IN FUENF STUFEN (Entwurf F): der Grund (`--u-surface-2`) am tiefsten,
darueber eingesenkt, Karte, zweite Karte und die eine erhobene Flaeche. Was
schwebt (Dialog, Toast, Menueblatt), ist heller als alles darunter — im
Dunkel steigt eine Flaeche mit ihrer Helligkeit, nicht mit einem Schatten. */
--u-surface: #1a2126; /* Karte, Feld */
--u-surface-2: #0f1316; /* der Grund der Seite */
--u-surface-3: #141a1e; /* eingesenkt, Bahn eines Balkens */
--u-surface-alt: #1e262c; /* zweite Kartenflaeche, Tabellenkopf */
--u-surface-hoch: #222b31; /* DIE EINE ERHOBENE FLAECHE: Dialog, Toast, Menueblatt */
--u-field-off: #161c20; /* deaktiviertes Feld */
--u-hover: #232c33; /* DAS SCHWEBEN IST NEUTRAL, NICHT DIE MARKE */
--u-zeile-zebra: transparent; /* Zebrastreifung waere mit Haarlinien Doppelkodierung */
/* DIE DUNKLEN STUFEN DER HELLEN PALETTE BLEIBEN (Wandschirm, Blase des Menschen, Begruessung): warmes Braunschwarz,
im Dunkel eine Spur waermer als der Grund. `--u-surface-inv` ist zugleich der Grund des App-Symbols
(bin/symbole_bauen.php, 18-gleich) — ein neuer Wert hiesse neue Symboldateien. */
--u-surface-inv: #141310; /* Wandschirm, Blase des Menschen; Grund des App-Symbols */
--u-surface-inv-2: #1d1a13; /* zweiter Verlaufsstopp, oben heller */
--u-surface-inv-3: #2a2417; /* waermste Stufe: Ende des Begruessungs-Verlaufs */
/* DIE KOPFLEISTE (H1): ihr Grund, eine Spur ueber dem der Seite — und die Farbe der Browserleiste (MARKE_THEME). */
--u-kopf: #12171b;
/* DIE EINE RUHIGE AKZENTFARBE DER KOPFLEISTE (H3, „schoen ruhig wie das ERP“): Unterlinie des aktiven Punkts, Zahlen der Leiste,
Rand eines Fensterknopfs. Neutral, keine Bereichsfarbe. Als Schrift 8,4:1 auf --u-kopf, 6,7:1 auf dem Blatt; --u-surface-2 darauf
8,7:1 (26-kontrast). */
--u-kopf-akzent: #9fb4c3;
/* ── Linien ───────────────────────────────────────────────────────── */
--u-border: #263038; /* Kartenrand */
--u-border-soft: #1f282f; /* Trennlinie zwischen Zeilen */
--u-border-strong: #34414b; /* Feldrand, betonter Rand */
--u-line-on-inv: rgba(255, 255, 255, .07); /* Linie UND Hinterlegung auf dunklem Grund */
--u-scrollbar-on-inv: rgba(255, 255, 255, .16); /* ohne Verwender seit Phase 6 */
/* ── Tiefe ────────────────────────────────────────────────────────── */
/* DIE BASIS TRAEGT DEN ANGEZEIGTEN WERT, nicht den gemeinten (11d). */
--u-hairline: rgba(232, 237, 240, .10); /* = --u-text, siehe Aufsatz */
--u-hairline-strong: rgba(232, 237, 240, .18);
--u-sheen: rgba(255, 255, 255, .06); /* Glanzkante oben an Knopf und Karte, im Dunkel leise */
/* ── Text ─────────────────────────────────────────────────────────── */
--u-text: #e8edf0; /* gerechnet gegen alle vier Flaechen: 13,0 bis 15,8:1 */
--u-text-2: #c5cfd6;
--u-text-muted: #9aa8b2; /* gedaempft: 6,3 bis 7,7:1 */
--u-text-faint: #7b8993; /* NUR Platzhalter und Grafik, nie Fliesstext: ≥ 3:1 auf jeder Flaeche */
--u-text-on-inv: rgba(248, 244, 235, .72); /* Schrift auf der tiefsten Stufe */
--u-text-on-inv-dim: rgba(248, 244, 235, .38); /* Platzhalter dort */
--u-text-on-inv-stark: #fbf7ee; /* volle Staerke auf dunklem Grund */
/* GRUEN FUER GELD (H1, Entwurf F): Betraege und Umsatz. Als Schrift ≥ 8,8:1 auf jeder Flaeche (14-geld). */
--u-geld: #7ee08a;
/* ── Marke ────────────────────────────────────────────────────────── */
/* BROMBEERE BLEIBT DAS ZEICHEN (App-Symbol, bin/symbole_bauen.php), drei Stufen
plus die Textstufe. Im Dunkel ist `--u-brand` FLAECHE (Hauptknopf, Verlauf,
Zaehler) mit weisser Schrift (10,49:1); die helle Stufe ist Ring, Schein und
Akzent; die Textstufe ist hell und traegt jede Markenschrift. */
--u-brand-hell: #d9a6ee; /* helle Stufe: Ring, Schein, Akzent */
--u-brand: #5b2a6e; /* Brombeere: Flaeche, Knopf */
--u-brand-2: #47205a; /* Zeigestufe und Verlaufsende, dunkler */
--u-brand-text: #c9a3ff; /* Textstufe: 6,97 bis 9,04:1 auf jeder Flaeche */
--u-text-on-brand: #ffffff; /* weiss auf Brombeere: 10,49:1 (sechsstellig, symbole_bauen liest nur so) */
/* DIE DRITTE AUFGABE DER MARKE: das eine Aktuelle — als Kante, nicht als Flaeche. */
--u-aktuell-flaeche: transparent;
--u-aktuell-text: var(--u-brand-text);
--u-brand-wash: rgba(217, 166, 238, .14); /* Toenung aus der hellen Stufe; = Aufsatz 14 % */
--u-brand-line: rgba(217, 166, 238, .35); /* Haarlinie der Marke; = Aufsatz 35 % */
--u-brand-glow: rgba(217, 166, 238, .45); /* Schein aus der HELLEN Stufe */
--u-brand-focus: rgba(217, 166, 238, .45); /* nur Zierde; ein Fokusring nimmt --u-brand-text */
--u-brand-wash-inv: rgba(217, 166, 238, .12); /* Toenung auf der tiefsten Stufe */
--u-brand-auswahl-inv: rgba(217, 166, 238, .30); /* Textauswahl auf der tiefsten Stufe */
/* ── Semantik ─────────────────────────────────────────────────────────
Vier Dreiergruppen (Zustand, Hintergrund, Vordergrund), dunkel: der Hintergrund
ist eine dunkle Toenung, der Vordergrund eine helle Stufe. fg auf bg 8,45 bis
9,8:1, fg auf jeder Flaeche ≥ 7,09:1 (die Kanalwoerter der Auftraege stehen
ohne bg) — gerechnet, nicht geschaetzt. */
--u-ok: #3fb950; --u-ok-bg: #12261a; --u-ok-fg: #7ee08a;
--u-warn: #d29922; --u-warn-bg: #2b2110; --u-warn-fg: #f0c060;
--u-danger: #f85149; --u-danger-bg: #2d1416; --u-danger-fg: #ff9b8f;
--u-info: #4fa3e8; --u-info-bg: #10223a; --u-info-fg: #8cc8ff;
/* ── Bereiche ─────────────────────────────────────────────────────────
Sechs Farben fuer Fachbereiche der Agenten (Zuordnung deterministisch in
bereich_rolle()): Akzent (Ring am Avatar), Hintergrund, Vordergrund — dunkel
wie die Semantik. fg auf bg 8,9 bis 10,6:1. Die Farbe ordnet, das Wort benennt. */
--u-bereich-1: #2fb8ba; --u-bereich-1-bg: #0f2a2b; --u-bereich-1-fg: #7fd9db; /* Petrol */
--u-bereich-2: #b07cc4; --u-bereich-2-bg: #24172b; --u-bereich-2-fg: #d9b3e8; /* Pflaume */
--u-bereich-3: #e07a50; --u-bereich-3-bg: #2c1912; --u-bereich-3-fg: #f5b394; /* Rost */
--u-bereich-4: #8fb34a; --u-bereich-4-bg: #1c2412; --u-bereich-4-fg: #c2dc8a; /* Moos */
--u-bereich-5: #7a96b8; --u-bereich-5-bg: #161e28; --u-bereich-5-fg: #b4c8de; /* Schiefer */
--u-bereich-6: #e0628e; --u-bereich-6-bg: #2c141d; --u-bereich-6-fg: #f5a3c0; /* Beere */
/* ── Sparten des Menues (H1) ──────────────────────────────────────────
Je Bereich der Kopfleiste EINE Farbe (HUELLE_MENUE_BEREICHE): Zeichen, Unterstrich
des offenen Bereichs, Kopf des Aufklappers, Ueberschrift der Startkacheln. Als
Schrift ≥ 5,1:1 auf jeder Flaeche, also auch fuer kurze Woerter („Fragen“). Ein
neuer Bereich braucht seine Rolle hier (Test 28m-sparte). */
--u-sparte-vorbereitet: #c4a7ff;
--u-sparte-verkauf: #ff6b9d;
--u-sparte-einkauf: #3fd69b;
--u-sparte-lager: #f2b14b;
--u-sparte-buchhaltung: #5cb8f2;
--u-sparte-postfach: #ff8f5c;
--u-sparte-service: #ff8f5c;
--u-sparte-system: #9aa6ff;
--u-sparte-verwaltung: #9aa6ff;
--u-sparte-it: #4fd8e8;
--u-sparte-entwicklung: #b8e05a;
--u-sparte-agenten: #c98bff;
/* ── Mandanten (H1) ───────────────────────────────────────────────────
Sechs Farben, fest nach der ID (`(id - 1) mod 6 + 1`, huelle_mandant_farbe()):
Punkt in der Mandantenwahl und der Farbstreifen unter der Kopfleiste. Grafik,
≥ 4,9:1 auf jeder Flaeche; das Wort (der Name) steht immer daneben. */
--u-mandant-1: #ff5c8a;
--u-mandant-2: #f2c14b;
--u-mandant-3: #4fb8ff;
--u-mandant-4: #3fd69b;
--u-mandant-5: #c98bff;
--u-mandant-6: #ff9a4d;
/* ── Kanaele (H4, Entwurf J „Kanal farbig wie im ERP“) ────────────────
Das Kanalwort einer Auftragszeile in der Farbe des Marktplatzes (Kaufland rot, eBay
blau, Amazon bernstein, der eigene Shop in der Markenschrift; PayPal ein vom eBay-Blau
abgesetztes Blau, seit Bank nativ für die Konten der Bank). Schrift: >= 4,5:1 auf
jeder Flaeche, auch unter dem Schweben (26-kanal). Das Wort steht immer da, die Farbe
ordnet nur. Bis H4 lieh sich das Raum-Panel die Semantik (danger-fg fuer Kaufland) —
ein Marktplatz ist aber kein Fehler. */
--u-kanal-kaufland: #ff5c5c;
--u-kanal-ebay: #5b9bff;
--u-kanal-amazon: #f2a541;
--u-kanal-shop: #c9a3ff;
--u-kanal-paypal: #8fb5ff; /* PayPal: Wert des abgenommenen Bildentwurfs (Bank nativ 14.10.2026); auf dem dunklen Fenster ueber 7:1, vom eBay-Blau getrennt */
/* ── Farbmodus (H4) ───────────────────────────────────────────────────
Der Umschalter der Kopfleiste zeigt das Zeichen des ANDEREN Modus: im Dunkel die Sonne
(„Hell“), im Hellen den Mond. Kein Farbton, sondern eine Anzeige-Rolle — rollen-hell.css
dreht sie mit den Farben um, und weil jene Datei fuer „wie System“ mit einer
Medienabfrage am geladen wird, braucht kein Stilblatt eine eigene Abfrage. */
--u-farbe-zu-hell: inline-flex;
--u-farbe-zu-dunkel: none;
/* ── Glas (Rest bis H4) ───────────────────────────────────────────────
Die Glas-Huelle ist mit H1 entfallen; `.glas`/`.glas-2` stehen noch an einigen
Bausteinen im Inhalt (Raum, Panels, Entscheiden-Blatt — H4 baut sie ab). Seit H1
sind sie DUNKEL: durchscheinende Karte, feste Rueckfallflaeche `-fest` (13w).
Gerechnet im schlimmsten Fall, Glas ueber Schwarz (14-glas): `--u-text` 15,2:1,
`--u-glas-text-2` 11,3:1. Komma-Schreibweise, weil die Pruefung nur sie parst. */
--u-glas-1: rgba(26, 33, 38, .80); /* Widget, Raumkopf (.80: Schrift haelt 4,5:1 auch ueber hellem Grund, 14-glas) */
--u-glas-2: rgba(26, 33, 38, .88); /* Dialog, Blatt */
--u-glas-1-fest: #1a2126;
--u-glas-2-fest: #1d252b;
--u-glas-kante: rgba(255, 255, 255, .08);
--u-glas-schein: rgba(255, 255, 255, .06);
--u-glas-blur: 14px;
--u-glas-text-2: #c5cfd6; /* gedaempfte Schrift AUF Glas */
--u-glas-saettigung: 1.2;
/* ── Schreibtisch (Design-Linie „Schreibtisch“, 16.10.2026, Bauplan Q1) ───────────────
Die Kulisse hinter dem Start (3D-Render, abends im Dunkeln, tags im Hellen: rollen-hell.css) und das Glas der Kopfleiste
und der Start-Tafeln. Die Kulisse ist ein Bild, keine Navigation; der Schleier haelt die Schrift auf dem Glas lesbar.
`--u-glas-panel` traegt wie jede Glasstufe seine feste Flaeche (13w), `--u-kopf-glas` faellt auf `--u-kopf` zurueck (13v). */
--u-kulisse-tag: url("/assets/design/kulisse-tag.webp"); /* Kulisse je Thema (data-kulisse, olymp.css); Vorgabe Campus */
--u-kulisse-abend: url("/assets/design/kulisse-abend.webp");
--u-kulisse: var(--u-kulisse-abend);
--u-kulisse-scrim: rgba(8, 10, 16, .38);
/* B6 Kulisse: Stärke (Entscheid Manuel 20.10.2026, Plan Mobil/Chat/Icons B6) — der dichte Schleier der Vorgabe dezent und der
ruhige Grund für aus; welcher gilt, entscheidet `data-kulisse-staerke` (Block unten). Der helle Satz steht in rollen-hell.css. */
--u-kulisse-scrim-dezent: rgba(8, 10, 16, .70);
--u-kulisse-grund: #0f1316; /* derselbe Ton wie die Fläche der Seite, nur ohne Bild */
/* ENDE B6 Kulisse Rollen */
--u-glas-panel: rgba(26, 33, 38, .80);
--u-glas-panel-fest: #1a2126;
--u-kopf-glas: rgba(18, 23, 27, .74);
/* ── Huelle (seit H1 die Kopfleiste) ──────────────────────────────────
Masse der Huelle, damit kein Stilblatt eine Zahl von Hand traegt. `--u-topbar-h` ist
seit H1 die Hoehe der Kopfleiste samt Farbstreifen (der Name blieb: Chatflaeche und
Sprungziele rechnen damit). */
--u-slot: rgba(255, 255, 255, .06);
--u-topbar-h: calc(3.25rem + 3px + var(--u-fensterleiste-h, 0px)); /* 52 px Leiste + 3 px Farbstreifen + Fensterleiste (Q5) */
--u-glasfenster-kopf-h: 2.5rem; /* h1-Zeile im Inhaltsrahmen samt Abstand darunter, fest */
--u-inhalt-max: none; /* Breitengrenze von Fenster und Raum: keine (M1-B, volle Breite) */
--u-lesebreite: 75ch; /* Zeilenlaenge von Fliesstext, Hilfe und Wertepaaren (M1-B) */
--u-gespraech-breite: 64rem; /* Spalte des Gespraechs auf /gespraeche ab 100rem Behaelter (M1-B) */
--u-menue-breite: 17rem; /* ein Aufklapper der Kopfleiste (Entwurf F) */
/* ── Fenster (H8, Entwurf K) ──────────────────────────────────────────
Die Titelleiste des Fensters, in dem jede Arbeitsseite steht: dunkelgruen wie im ERP und in BEIDEN Farben des
Fensterinhalts gleich (rollen-hell.css setzt sie nicht neu — 43h PL_GLEICH). Gerechnet (26-kontrast-titelleiste):
Schrift 13,24:1, Pfad 6,95:1, Zeichen 9,61:1 auf der Leiste; Schrift 11,64:1 auf der Knopfflaeche, 9,94:1 beim Schweben;
Weiss auf dem Rot von ✕ beim Schweben 6,54:1. Der Schatten hebt das helle Fenster vom dunklen Grund. */
/* HM2 (Entwurf M): die Leiste ist die Reiterleiste — ruhig wie die Fläche, nicht mehr dunkelgrün. */
--u-fenster-titel: #141a1e;
--u-fenster-titel-knopf: #141a1e;
--u-fenster-titel-hover: #222b31;
--u-fenster-titel-linie: #263038;
--u-fenster-titel-text: #e8edf0;
--u-fenster-titel-leise: #9aa8b2;
--u-fenster-titel-zeichen: #c9a3ff;
--u-fenster-zu: #b3261e;
--u-e-fenster: 0 0 0 1px #2a343b, 0 24px 60px -20px rgba(0, 0, 0, .80);
/* ── Bühne und Töne (HM4b, Entwurf O2) ────────────────────────────────
Die Bühne ist der farbige Kopf einer Akte (Verlauf aus drei Brombeer-Stufen, Schrift weiß: auf --u-buehne-b 12,1:1); die Töne
färben Symbolkacheln und Chips nach Bedeutung (lila Agentin/Hinweis, grün Ertrag, orange Gebühr/Warnung, blau Ware/Daten,
türkis Markt, rot Fehler). Ton auf Tongrund jeweils >= 4,5:1. */
--u-buehne-a: #170c1e;
--u-buehne-b: #341646;
--u-buehne-c: #6a2369;
--u-buehne-text: #ffffff;
--u-buehne-leise: rgba(255, 255, 255, .74);
--u-buehne-glas: rgba(255, 255, 255, .10);
--u-buehne-glas-2: rgba(255, 255, 255, .16);
--u-buehne-linie: rgba(255, 255, 255, .18);
--u-buehne-hell: #ffffff; /* Hauptknopf, aktueller Schritt und Produktkachel auf der Bühne — in beiden Farben weiß */
--u-buehne-grund: radial-gradient(38rem 19rem at 85% 0%, rgba(236, 72, 153, .30), transparent 60%),
radial-gradient(32rem 16rem at 0% 100%, rgba(99, 102, 241, .28), transparent 60%),
linear-gradient(135deg, var(--u-buehne-a), var(--u-buehne-b) 50%, var(--u-buehne-c));
--u-buehne-ok: rgba(74, 222, 128, .14); /* erledigter Schritt, Margenpille */
--u-buehne-ok-linie: rgba(74, 222, 128, .45);
--u-buehne-akzent: linear-gradient(90deg, #a855f7, #ec4899); /* Kante des aktuellen Schritts, Rahmen „Als Nächstes“ */
--u-e-buehne: 0 18px 50px rgba(52, 22, 70, .35);
--u-e-buehne-hell: 0 10px 28px rgba(0, 0, 0, .25);
--u-ring-agent: 0 0 0 2px var(--u-surface), 0 0 0 4px rgba(168, 85, 247, .45);
--u-ton-lila: #c4a6ff; --u-ton-lila-bg: #261a3d;
--u-ton-gruen: #5ee89a; --u-ton-gruen-bg: #10291c;
--u-ton-orange: #fbbf24; --u-ton-orange-bg: #2c2110;
--u-ton-blau: #8fb4ff; --u-ton-blau-bg: #14213b;
--u-ton-tuerkis: #2dd4bf; --u-ton-tuerkis-bg: #0f2a27;
--u-ton-rot: #fb8f8f; --u-ton-rot-bg: #2d1416;
--u-akte-grund: #0e1215;
--u-e-karte: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 30px rgba(0, 0, 0, .25);
/* ── Scrim ────────────────────────────────────────────────────────────
Die Abdunklung hinter einer Schublade (`.schirm`) und ueber Bildern. */
--u-scrim-oben: rgba(0, 0, 0, .55);
--u-scrim-mitte: rgba(0, 0, 0, .20);
--u-scrim-unten: rgba(0, 0, 0, .45);
--u-scrim-ruhe: rgba(0, 0, 0, .70);
--u-scrim-fenster: rgba(0, 0, 0, .55);
/* ── Spielschicht (aus Prototyp v4) ───────────────────────────────────
NEON IST NIE SCHRIFT, nur Kante, Glow, Balken und Deko (14-neon-nie-text):
neben einer Neonkante steht immer das Wort. Im Dunkel heller als bis H1, damit
Kante und Schein tragen; gegen Weiss weiter unter 4,5:1. */
--u-neon-petrol: #2fd3c4;
--u-neon-violett: #b06cff;
--u-neon-magenta: #ff4fa8;
/* DER MARKENVERLAUF traegt weisse Schrift (Hauptknopf, Namensschild, Agentenblase).
Gerechnet an jedem Stopp und in 5-%-Schritten (14-verlauf): Brombeere 10,49:1 →
Indigo 9,93:1 → dunkles Petrol 7,94:1. */
--u-marke-indigo: #3730a3;
--u-marke-petrol: #0e5a5f;
--u-verlauf-marke: linear-gradient(120deg, var(--u-brand) 0%, var(--u-marke-indigo) 55%, var(--u-marke-petrol) 100%);
--u-verlauf-neon: linear-gradient(90deg, var(--u-neon-violett), var(--u-neon-petrol)); /* nur Deko: Kante, Balken */
/* Der Schimmer ueber dem Grund der Seite (Entwurf F: ein violetter Schein oben rechts) — Deko, nie unter Schrift gerechnet. */
--u-verlauf-grund: radial-gradient(1200px 500px at 70% -10%, rgba(176, 108, 255, .10), transparent);
--u-glow-marke: 0 0 0 1px rgba(217, 166, 238, .22), 0 6px 18px rgba(55, 48, 163, .35), 0 0 14px rgba(176, 108, 255, .30);
--u-glow-neon: 0 0 0 1px rgba(176, 108, 255, .38), 0 4px 16px rgba(47, 211, 196, .18), 0 0 12px rgba(176, 108, 255, .22);
/* ── Schrift ──────────────────────────────────────────────────────────
Zwei Hausschriften mit klaren Rollen, SELBST GEHOSTET (assets/schriften.css):
Bricolage Grotesque traegt Ueberschriften, Zahlen und die Marke, Hanken
Grotesk den Fliesztext. Die Richtlinie erlaubt nur eigene Quellen — deshalb
liegen die Dateien im Haus statt bei einem Anbieter; faellt eine aus, greift
die Systemschrift dahinter. Festbreite ist Information, nicht Zierrat: bei
Kennungen und Vorgangsnummern sagt sie etwas, bei Etiketten ist sie Dekoration. */
/* HM1 (Entwurf M): EINE Schrift für Titel, Text, Etiketten und Zahlen; Chakra Petch nur noch in der Marke. */
--u-font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--u-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--u-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* DIE HUD-STIMME DER SPIELSCHICHT (VORRAT, Phase 2+): Chakra Petch fuer kurze,
versale, gesperrte Etiketten und Zahlen (Widgettitel, Kennzahl, Dock,
Namensschild) — nie Fliesstext, nie lange Ueberschriften. SELBST GEHOSTET seit
24.09.2026 (Download freigegeben von Manuel): 500/600/700, je latin und
latin-ext, @font-face in schriften.css, Dateien im Offline-Vorrat. Der Stapel
dahinter greift nur, solange die Datei noch laedt (font-display: swap). */
--u-font-hud: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--u-font-marke: "Chakra Petch", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
--u-track-hud: 0.01em;
/* ── Abstand ──────────────────────────────────────────────────────────
Eine Rollenfolge von 2 bis 64 Pixel. Kein Abstand von Hand. */
--u-s-1: 2px; --u-s-2: 4px; --u-s-3: 6px; --u-s-4: 8px;
--u-s-5: 12px; --u-s-6: 16px; --u-s-7: 20px; --u-s-8: 24px;
--u-s-9: 28px; --u-s-10: 32px; --u-s-11: 40px; --u-s-12: 48px;
--u-s-13: 56px; --u-s-14: 64px;
/* ── Typografie ───────────────────────────────────────────────────────
UNTERGRENZE 11 PIXEL, UND SIE GILT. Eine kleinere Groesse ist ein
Prueffehler (tests/pruefe_oberflaeche.php). 4xl ist die Zahl einer
Kennzahl-Kachel -- die einzige Stelle, an der Groesse die Aussage traegt. */
/* DAS TEXTENDE DER SKALA STEHT FEST, DAS ANZEIGEENDE IST FREI. Nachgezaehlt:
2xs bis lg tragen zusammen 91 Verwendungen, xl bis 4xl deren 9. An den
kleinen Graden zu drehen hiesse, 91 Stellen zu bewegen, ohne dass jemand
den Unterschied benennen koennte. Also: 11/12/13/14/15 bleiben, 18 bis 34
sind neu entworfen. */
--u-t-2xs: 11px; --u-t-xs: 12px; --u-t-sm: 13px; --u-t-md: 14px;
--u-t-lg: 15px; --u-t-xl: 18px; --u-t-2xl: 22px; --u-t-3xl: 26px;
/* Nur die groesste Stufe waechst mit. `vw` und nicht `cqi`: ein Grad in einer
Rolle soll ueberall dasselbe bedeuten -- `cqi` loeste am Einsatzort gegen
den naechsten Behaelter auf und waere je Behaelter eine andere Zahl. */
--u-t-4xl: clamp(28px, 2.4vw, 36px);
/* Die Kennzahl auf einem Glas-Widget (VORRAT, Phase 2+), tabellarische Ziffern. */
--u-t-kpi: clamp(28px, 2.6vw, 40px);
/* Der Grad eines Eingabefelds UNTER DEM DAUMEN. Er steht als eigene Rolle da, weil er
keine Stufe der Leseskala ist, sondern eine Bedienentscheidung: am Schreibtisch
bleiben Felder kompakt (14), am Telefon werden sie 16. */
--u-t-feld: 16px;
/* Gemeinsamer Aktenstil L2–L8: feste Typografie und Markenflächen (B24b). */
--u-t-akte-kennzahl: 21px;
--u-t-akte-titel: 28px;
--u-t-akte-haupt: 36px;
--u-w-hud: 600;
--u-w-titel: 700;
--u-akte-symbol-rand: rgba(255, 255, 255, .25);
--u-akte-symbol-grund: rgba(255, 255, 255, .12);
--u-akte-abzeichen-rand: rgba(255, 255, 255, .30);
--u-akte-abzeichen-grund: rgba(255, 255, 255, .15);
--u-akte-schritt-rand: rgba(255, 255, 255, .22);
--u-akte-naechste-grund: rgba(47, 211, 196, .24);
--u-akte-aktion-schein: rgba(47, 211, 196, .20);
--u-akte-agent-schein: rgba(176, 108, 255, .35);
--u-akte-reiter-schein: rgba(91, 42, 110, .20);
--u-akte-reiter-akzent: #b62e83;
--u-lh-tight: 1.2; --u-lh: 1.5; --u-lh-loose: 1.6;
/* Versal-Etiketten bei 11 Pixel mit 1,5 sind 16,5 Pixel hoch -- daher wirkte
der klebende Tabellenkopf locker, obwohl die Polsterung eng war. */
--u-lh-caps: 1.1;
/* VIER GEWICHTE, UND ZWAR ACHSENWERTE. Beide Hausschriften sind variabel
(400 bis 800), also sind 560 und 720 echte Zwischenstufen und keine
Synthese. Bisher wurden die Rollen an zehn Stellen mit rohen 600 und 700
umgangen -- es fehlte faktisch eine Stufe, nicht der Wille. */
--u-w-normal: 400; --u-w-medium: 500; --u-w-strong: 560;
/* -0,02em ist eine Laufweite fuer 30 Pixel und stand auch bei 18 und 22:
dort beruehren sich die Buchstaben. Aufgeteilt. */
--u-track-tight: -0.011em; /* Anzeige 18 bis 22 */
--u-track-display: -0.022em; /* Anzeige ab 26 */
--u-track-dark: 0.006em; /* helle Schrift auf dunkel blueht auf; ohne Verwender seit Phase 6, im ERP unbenutzt */
--u-track-caps: 0.07em; /* Versal-Etiketten: Kartentitel, Tabellenkopf */
/* ── Radien ───────────────────────────────────────────────────────────
Gleiche Namen wie im ERP, andere Werte. Radius ist Markencharakter. */
--u-r-xs: 4px; --u-r-sm: 6px; --u-r-md: 10px; --u-r-lg: 12px;
--u-r-xl: 16px; --u-r-full: 999px;
/* DER RADIUS DES MARKENZEICHENS IST GEPINNT. Es nahm bisher `--u-r-sm` -- bei
32 Pixeln Kantenlaenge waren das 28 %. Ein Entwurf, der an der
Radienstimmung dreht, haette damit stillschweigend das Logo umgezeichnet,
und aus demselben Zeichen entsteht das App-Symbol. */
--u-r-marke: 9px;
/* Glas ist runder als Papier: eine Glasflaeche soll nicht wie eine Karte lesen
(VORRAT, Phase 2+). */
--u-r-glas: 16px;
/* ── Tiefe ────────────────────────────────────────────────────────────
Vier Stufen (dazu zwei fuer Glas und Buehne, weiter unten). Die erste ist eine
Haarlinie; die Karten tragen die zweite. IM DUNKEL SIND DIE SCHATTEN SCHWARZ und
tiefer als auf Papier: ein Schatten traegt dort nur, wenn er die Flaeche vom
noch dunkleren Grund absetzt (seit H1; bis dahin warm 30,25,15 auf Papier). */
--u-e-1: 0 0 0 1px var(--u-hairline);
/* DIE EINE ZEILE, DIE DIE PLATTFORM UMDREHT. `--u-e-2` hat fuenf Aufrufstellen
-- Karte, Tabellenrahmen, Filterzeile, Chatflaeche, aktiver Gespraechseintrag
-- und kippt sie gleichzeitig vom Schweben ins Liegen. Dass sie damit
denselben Wert traegt wie `--u-e-1`, ist in Entwurf A die Aussage und kein
Versehen: was auf dem Papier liegt, liegt gleich tief. Die Rollen bleiben
getrennt, weil ein anderer Entwurf sie wieder trennen koennen soll. */
--u-e-2: 0 0 0 1px var(--u-hairline);
/* Nur noch, WAS WIRKLICH SCHWEBT, bekommt einen Weichzeichner: Menueblatt,
Toast, gezogene Karte. Die Haarlinie bleibt darunter, damit die Kante auch
auf hellem Grund steht. */
--u-e-3: 0 0 0 1px var(--u-hairline), 0 10px 26px rgba(0, 0, 0, .45);
--u-e-4: 0 20px 50px rgba(0, 0, 0, .65); /* ausschliesslich der Dialog */
/* Tiefe fuer Glas und Buehne: die Glasflaechen (Rest bis H4) setzen sich mit gestaffelten schwarzen Schatten ab, die
Buehne ist ein freigestelltes Bild und bekommt einen Filter-Schatten. */
--u-e-glas: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 10px rgba(0, 0, 0, .30),
0 12px 28px rgba(0, 0, 0, .35), 0 28px 60px rgba(0, 0, 0, .40);
--u-e-buehne: drop-shadow(0 28px 36px rgba(0, 0, 0, .55));
/* Die Figur in der Charakterkarte eines Raums (P4-E): derselbe Filter-Schatten, kuerzer — sie steht in einer Karte,
nicht frei vor dem Grund. Eine eigene Rolle, weil die Figur auch ausserhalb des Raums steht. */
--u-e-figur: drop-shadow(0 12px 16px rgba(0, 0, 0, .50));
/* ── Bewegung ─────────────────────────────────────────────────────────
Vier Dauern fuer Bedienelemente (dazu zwei der Spielschicht, weiter unten),
drei Verlaeufe. BEWEGUNG SITZT AN WENIGEN ANKERN: keine
Einblendung fuer Listen, nur Uebergaenge an Bedienelementen. */
--u-dur-1: 90ms; --u-dur-2: 150ms; --u-dur-3: 220ms; --u-dur-4: 320ms;
/* DIE SPIELSCHICHT BEWEGT SICH LANGSAMER (VORRAT, Phase 2+, Nachtrag
23.09.2026 „kleine dezente Animationen"): 600 ms fuer Eintritt, Glanz und
Toast, 1100 ms fuer Balken, Zaehler und Kennzahlen. Nie fuer Bedienelemente
— dort bleiben 1 bis 4. Dazu drei Endlos-Takte, eine Staffel je Element
beim Eintritt und EIN Faktor: `--u-bewegung` ist 1 und wird 0 bei
reduzierter Bewegung (Medienabfrage am Ende dieser Datei, NICHT in
olymp.css — dort verloere sie gegen :root hier, diese Datei laedt zuletzt).
Hub-Wege rechnen mit ihm, dann steht bei 0 alles still. */
--u-dur-5: 600ms; --u-dur-6: 1100ms;
--u-takt-schweben: 6s; /* Buehne schwebt, Funken treiben */
--u-takt-puls: 2.4s; /* Live-Punkt, „wartet auf dich" */
--u-takt-atmen: 5s; /* Figur atmet */
--u-staffel: 45ms; /* Verzoegerung je Element beim Eintritt */
--u-bewegung: 1;
--u-ease: cubic-bezier(.22, .68, .18, 1);
--u-ease-in: cubic-bezier(.5, 0, .9, .4);
--u-ease-play: cubic-bezier(.2, .9, .25, 1.02);
/* PARALLAX IM RAUM (P5-D): Strecke = Amplitude × `--u-px`/`--u-py` (−1 … 1, raum.js) × `--u-bewegung` (Weg A, E-P5-3).
Die Buehne bleibt unter dem Rasterabstand (`--u-s-5` − 4 px), die Figur darunter; ab 70rem wandert eine Station
hoechstens 1,43 px je 100 px Mausweg. Kein eigenes `--u-parallax` (Gesamtplan §2): der Faktor ist `--u-bewegung`. */
--u-parallax-buehne: 8px; --u-parallax-figur: 6px;
/* ── Die Stapelleiter ist benannt ─────────────────────────────────────
Jede Stapelordnung kommt aus einer Rolle, keine Zahl im Baustein. Zwei
Rollen mit demselben Wert sind verboten -- ein Gleichstand ist eine
Entscheidung, die niemand getroffen hat. */
/* Die unteren vier: Hintergrund, Buehne eines Raums, Figur vor der Buehne,
Widget ueber allem im Inhalt. */
--u-z-hintergrund: 0; /* der Grund (bis H1 die Kulisse) */
--u-z-zeile: 1; /* H4: was in einer Listenzeile bedienbar ist, liegt ueber der Flaeche ihres Zeilenverweises */
--u-z-buehne: 10; /* freigestellte Buehne eines Raums */
--u-z-figur: 15; /* Figur vor der Buehne */
--u-z-sticky: 20; /* klebender Tabellenkopf im Inhalt */
--u-z-widget: 30; /* Glas-Widget ueber Buehne und Figur */
--u-z-topbar: 50; /* die Kopfleiste (seit H1; bis dahin die Glas-Topbar) */
--u-z-nav: 100; /* die offenen Aufklapper der Kopfleiste (seit H1) */
--u-z-scrim: 1040; /* der Schirm hinter jeder Schublade (.schirm) */
--u-z-drawer: 1045; /* Schublade: Gespraechsliste, Chat-Ebene am Telefon */
--u-z-overlay: 1050; /* noch ungenutzt */
--u-z-modal: 1080; /* noch ungenutzt: Dialog */
--u-z-menu: 1200; /* Zeilenmenue-Blatt, in glas auch die Zeile mit offenem Menue */
--u-z-toast: 1250; /* Toast-Stapel */
--u-z-palette: 1300; /* noch ungenutzt: Befehlspalette */
/* ── Knoepfe und Etiketten ────────────────────────────────────────────
Der Hauptknopf IST die Marke: Brombeere mit weisser Schrift, als Verlauf von
der Marke in die Zeigestufe gezeichnet (olymp.css). Beim Zeigen wird er
DUNKLER: dann steht die Zeigestufe allein, ohne Verlauf (bis 23.09.2026
heller: Gold trug dunkle Schrift). Weiss haelt auf
beiden Flaechen 10,49 bzw. 12,95:1. Die helle Stufe gehoert NIE in den
Verlauf eines Knopfs — Weiss darauf haette nur 1,97:1 (14-marke-verlauf).
Der Nebenknopf ist seit H1 eine dunkle Flaeche mit Rand (`--u-text` darauf
11,6:1). Die Linien-Rollen geben den Etiketten ihren farbigen Rand. */
--u-knopf-haupt: #5b2a6e;
--u-knopf-haupt-hover: #47205a;
--u-knopf-haupt-text: #ffffff;
--u-knopf: #252f36;
--u-ok-line: rgba(63, 185, 80, .40);
--u-warn-line: rgba(210, 153, 34, .45);
--u-danger-line: rgba(248, 81, 73, .40);
--u-info-line: rgba(79, 163, 232, .40);
--u-w-heavy: 720; /* Versal-Etiketten und die Marke; 800 ist bei 11px ein Klotz */
--u-track-wide: 0.18em; /* weite Laufweite der Marke */
/* ── Dichte: EINE Leiter, zwei Stufen ─────────────────────────────────
Arbeitsansichten werden dicht, Leseansichten luftig (Entscheid Manuel
20.09.2026). Die Gefahr dabei sind ZWEI Leitern, die auseinanderlaufen --
deshalb darf der Wert einer Dichte-Rolle nichts anderes sein als ein
Verweis auf die Abstandsleiter oben. 13h prueft genau das, 13i prueft, dass
es zu jeder Rolle ihren `-lesen`-Zwilling gibt.
DIE DICHTE STUFE IST DIE VORGABE. Damit schreiben die vier bis sechs
Leseansichten je eine Zeile, nicht die siebzig Arbeitsansichten.
UND SIE STAUCHT NUR BEDIENSCHRIFT, NIE FLIESSTEXT: `--u-d-lh` gilt fuer
Tabelle, Kanban-Karte und Gespraechsleiste. Karte, Nachrichtentext und
vorformatierter Text behalten ihre Zeilenhoehe -- sonst liest es sich
nicht dicht, sondern gequetscht. */
--u-d-rand: var(--u-s-8); --u-d-rand-lesen: var(--u-s-9);
--u-d-block: var(--u-s-6); --u-d-block-lesen: var(--u-s-8);
--u-d-luecke: var(--u-s-5); --u-d-luecke-lesen: var(--u-s-7);
--u-d-zeile: var(--u-s-3); --u-d-zeile-lesen: var(--u-s-5);
--u-d-zeile-x: var(--u-s-5); --u-d-zeile-x-lesen: var(--u-s-6);
--u-d-ziel: var(--u-s-10); --u-d-ziel-lesen: var(--u-s-10);
--u-d-feld: var(--u-s-10); --u-d-feld-lesen: var(--u-s-11);
--u-d-lh: var(--u-lh-tight); --u-d-lh-lesen: var(--u-lh);
/* ── Die Trefferflaechen-Untergrenze ──────────────────────────────────
SIE IST EINE ROLLE UND KEIN SELEKTOR, und das ist der ganze Trick. Bisher
stand `@media (any-pointer: coarse) { .knopf { min-height: 48px } }` bei
Zeile 403 von olymp.css und `.knopf-klein { min-height: 24px }` bei 1071 --
gleiche Spezifitaet, spaetere Regel gewinnt. Alle kleinen Knoepfe blieben
deshalb auch auf einem Telefon 24 Pixel hoch: „Freigeben", „Ablehnen",
„Umsetzen", „+ Neu".
Verschieben haette den naechsten Anbau wieder gebrochen, und die
Spezifitaet zu verdoppeln haette gegen die kommende Dichtestufe erneut
0,2,0 gegen 0,2,0 gestanden. Steht die Grenze dagegen IN der Deklaration
(`min-height: max(, var(--u-ziel-min))`), entscheidet weder
Reihenfolge noch Spezifitaet ueber sie -- und keine Dichtestufe kann sie
unterlaufen, weil sie den ersten Wert druecken darf, nicht den zweiten.
`0px` und nicht `0`: eine einheitenlose Null ist in `max()` keine Laenge
und macht den ganzen Ausdruck ungueltig. */
--u-ziel-min: 0px;
}
/* Die ruhige Stufe haengt an einem Attribut, nicht an einer Klasse -- so kann sie
auch MITTEN in einer dichten Seite stehen und umgekehrt, ohne dass irgendwo eine
zweite Leiter entsteht. */
[data-dichte="lesen"] {
--u-d-rand: var(--u-d-rand-lesen);
--u-d-block: var(--u-d-block-lesen);
--u-d-luecke: var(--u-d-luecke-lesen);
--u-d-zeile: var(--u-d-zeile-lesen);
--u-d-zeile-x: var(--u-d-zeile-x-lesen);
--u-d-ziel: var(--u-d-ziel-lesen);
--u-d-feld: var(--u-d-feld-lesen);
--u-d-lh: var(--u-d-lh-lesen);
}
/* DIE ZEIGERGENAUIGKEIT ENTSCHEIDET, NICHT DIE BILDSCHIRMBREITE (61 §11 Punkt 3):
ein Tablet mit Tastatur verhaelt sich wie ein Schreibtisch, ein schmales Fenster
am Schreibtisch nicht wie ein Telefon. `.dialog` steht ausdruecklich dabei, weil
er in der obersten Schicht liegt und seine Rollen von `:root` erbt. */
@media (any-pointer: coarse) {
:root, [data-dichte], .dialog { --u-ziel-min: var(--u-s-12); }
}
/* REDUZIERTE BEWEGUNG STELLT DEN FAKTOR AUF NULL — hier und nicht in olymp.css:
diese Datei laedt zuletzt, ein `:root` dort verloere bei gleicher Spezifitaet
gegen `:root` hier (16-bewegung). Die Dauern selbst setzt der globale Block in
olymp.css auf null; dieser Faktor haelt die Hub-Wege der Spielschicht an. */
@media (prefers-reduced-motion: reduce) {
:root { --u-bewegung: 0; }
}
/* „BEWEGUNG AUS" IM PROFIL (Neubau Phase 2): dieselbe Wirkung wie die Geraetewahl, aber je Mensch.
Der Wert steht als `data-bewegung` am (oberflaeche_html_attribute(), nur bei Angemeldeten
— Gast-Seiten tragen ihn nicht). Hier und nicht in olymp.css, aus demselben Grund wie der Block
darueber (16-bewegung); die Dauern setzt der Zwilling in olymp.css auf null. */
:root[data-bewegung="aus"] { --u-bewegung: 0; }
/* B6 Kulisse: Stärke (Entscheid Manuel 20.10.2026, Plan Mobil/Chat/Icons B6: Desktop „gleiche Linie, angepasst“, Kulisse „dezent bzw.
abschaltbar“, Vorgabe dezent, je Mandant — `oberflaeche.kulisse_staerke`). Das Merkmal steht nur bei Abweichung von der Vorgabe am
(oberflaeche_kulisse_staerke_attribut()): ohne Merkmal dezent, `voll` lässt Bild und Schleier wie bis B6 (keine Regel greift),
`aus` nimmt das Bild weg und deckt mit dem ruhigen Grund. NUR ROLLEN, hier und nicht in huelle.css/olymp.css: deren Budgets sind voll,
und die eine Regel, die die Kulisse malt (huelle.css, Q1 Schreibtisch-Rahmen), liest ohnehin nur `--u-kulisse` und `--u-kulisse-scrim`.
Die Spezifität (drei Klassen) schlägt den :root von rollen-hell.css; dessen helle Werte kommen über var() trotzdem an. */
:root[data-huelle="glas"]:not([data-kulisse-staerke="voll"]) { --u-kulisse-scrim: var(--u-kulisse-scrim-dezent); }
:root[data-huelle="glas"][data-kulisse-staerke="aus"] { --u-kulisse: none; --u-kulisse-scrim: var(--u-kulisse-grund); }
/* ENDE B6 Kulisse Regeln */
/* ── INHALT V2 (Phase 2b „Inhaltsbausteine", abgeschlossen mit S7) ─────────
Die Rollen der Inhaltsbausteine in der Glas-Huelle (Zeilenkarten, Akte,
Blatt-Formular, Zeitleiste, Chat, Kanban). Genutzt nur im Abschnitt
„INHALT V2" von olymp.css; Referenz: docs/oberflaeche-inhalt.md §7.
EIN EIGENER :root-BLOCK, weil 26e fuer rollen.css je Deklaration prueft (26e-rollen,
Grundlinie heute 0096cb3): neu duerfen nur Rollen dazukommen, deren Namen die
Grundlinie nicht kennt — keine bestehende Rolle wird hier neu gesetzt. Jede
Farbrolle hat ihre gerechneten Faelle in Test 29h (tests/pruefe_inhalt.php);
die Zahlen im Kommentar sind dieselben. Komponentenvariablen (`--u-log-farbe`,
`--u-abz-bg`, `--u-klebe-unten` …) stehen NICHT hier, sondern bei ihren
Bausteinen in olymp.css. Der Rueckbau der klassischen Huelle (Phase 6) hat
den Block stehen lassen: er aenderte in rollen.css nur Kommentare.
KEINE SCHRIFT: Glow, Raster, Maske und Grau sind nie `color` (29h). Das Grau
ist die Leiste bzw. der Ring fuer „unbekannt" — neben ihm steht immer das
Zustandswort (61 §8: unbekannt ist grau, nie nur Farbe). LEISTEN UND RINGE
NIE AUF DER EINGESENKTEN FLAECHE (`--u-surface-3`) — dort haelt das Grau nur
3,30:1 und Magenta 3,10:1, an der Grenze, und `--u-ok`/`--u-warn` fielen
darunter (2,75/2,76). */
:root {
/* Schein der Neonfarben (box-shadow, drop-shadow) — Deko, nie Schrift. */
--u-neon-petrol-glow: rgba(19, 179, 166, .45);
--u-neon-violett-glow: rgba(139, 92, 246, .38);
--u-neon-magenta-glow: rgba(224, 69, 155, .38);
/* Senkrechter Neonverlauf: Kennzahl-Strich, Etikett-Strich, Charakterrahmen. Deko. */
--u-verlauf-neon-hoch: linear-gradient(180deg, var(--u-neon-violett), var(--u-neon-petrol));
/* Der Glanzstreifen ueber dem Hauptknopf. Weiss darunter haelt ueber Brombeere
6,33, ueber Indigo 6,17, ueber dunklem Petrol 5,06:1. */
--u-glanz: rgba(255, 255, 255, .18);
/* Die Fuellung einer Maske (mask/-webkit-mask) — keine Farbe, die jemand sieht. */
--u-maske-voll: #000;
/* Halbton-Raster hinter einer Figur (Charakterkarte). Deko. */
--u-raster-punkte: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.2px);
--u-raster-mass: 7px 7px;
/* Die Sprechblase des Chats ist runder als eine Karte. */
--u-r-blase: 18px;
/* Der Schatten einer klebenden Reihe nach OBEN (Formular, Entscheidung). */
--u-e-klebend: 0 -8px 24px rgba(0, 0, 0, .45);
/* „Unbekannt" als Leiste oder Ring: 4,53 auf --u-surface, 4,27 auf
--u-surface-alt, 5,19 auf --u-surface-2 (Nicht-Text, 3:1). Nie Schrift. */
--u-zustand-grau: #7b8993;
/* Nebenschrift in der Agentenblase (Zeit, Kopfzeile): 8,04:1 auf der Marke,
6,23:1 am dunklen Petrol-Ende des Markenverlaufs. */
--u-text-on-brand-2: rgba(255, 255, 255, .85);
/* Platten HINTER schraegen Schildern (Sprungleiste, Namensschild): der Traeger
bekommt `position: relative; isolation: isolate`, damit die Platte in
seinem eigenen Stapel bleibt. Negativ, eindeutig, nur in z-index (29h, 12b). */
--u-z-dahinter: -1;
--u-z-dahinter-2: -2;
/* Die Markentoenung DECKEND (Pruefkorrektur I): --u-brand-wash (14 %) auf
--u-surface gerechnet. Fuer Flaechen aus zwei ueberlappenden Haelften (das
Abzeichen mit Anschnitt): die halbdurchsichtige Toenung deckte den
Streifen der Ueberlappung doppelt — eine Naht mitten im Wort.
--u-brand-text darauf 5,91:1. */
--u-brand-wash-deckend: #353442;
}
/* ═══════════════════════════════════════════════════════════════════════
AUFSATZ HELL — nur abgeleitete Mischungen, keine Farbtoene. (Der Name des Blocks ist
geblieben — 11a findet ihn daran —, die Palette ist seit H1 dunkel.)
Begruendung im Kopf dieser Datei: was gerechnet wird, ist, was angezeigt wird.
═══════════════════════════════════════════════════════════════════════ */
@supports (color: color-mix(in oklab, red, blue)) {
:root {
--u-hairline: color-mix(in oklab, var(--u-text) 10%, transparent);
--u-hairline-strong: color-mix(in oklab, var(--u-text) 18%, transparent);
--u-sheen: color-mix(in oklab, #ffffff 6%, transparent);
--u-brand-wash: color-mix(in srgb, var(--u-brand-hell) 14%, transparent);
--u-brand-line: color-mix(in srgb, var(--u-brand-hell) 35%, transparent);
}
}