/* ============================================================================ TGV DESIGN-SYSTEM — TOKEN-SCHICHT (PLAT#06, SSOT) ---------------------------------------------------------------------------- 2 Schichten: ┌ LAYER 1 PRIMITIVES (--p-*) = rohe Palette. Werte aus der LIVE-Quelle │ 06_DASHBOARD/rka_v2.html :root (v2.9.8). NIE direkt in Komponenten │ benutzen — nur die semantische Schicht referenziert sie. └ LAYER 2 SEMANTIK (--c-*, --ent-*, --cls-*, --conf-*, --surface/--text…) = Rolle/Bedeutung → Primitive. KOMPONENTEN benutzen NUR diese. Prinzip: FARBE = BEDEUTUNG (nie Deko). Themes (dark / white-label) tauschen NUR Layer 2 — die Komponenten ändern sich nie. White-Label-Hook: eine Marke darf --c-action (Marken-Primärfarbe) umfärben, ABER die Bedeutungs-Anker bleiben fest: --c-confirm BLEIBT GRÜN · --c-warn amber · --c-danger rot. So heißt „Bestätigen" überall grün, egal welche Marke. DO-NOT-APPLY: reine Design-Schicht. Cockpits ziehen sie später (PLAT#03). ============================================================================ */ /* ───────────────────────── LAYER 1 — PRIMITIVES ─────────────────────────── */ :root { /* Neutrale Flächen / Linien / Tinte — CORE-DEFAULT = KÜHL-NEUTRAL (leicht blau-grau, statt der früheren warmen Papier-Töne). Zentrale Quelle: Cockpits dürfen KEINE eigenen Neutral-Hex hardcoden (Drift-Falle, z.B. costs.html Tailwind-Slate) — nur diese Tokens konsumieren. Warme Anmutung = Marken-Override (z.B. gabriel Crème). */ --p-paper: #f4f6f9; /* Seiten-Hintergrund (kühl, vorher #f7f7f4 warm) */ --p-white: #ffffff; /* Karten/Panels — rein weiß, wirkt kühl gegen kühles Papier */ --p-paper-2: #eceff4; /* eingebettete Fläche (kühl, ersetzt warmes gray-50 für --surface-2) */ --p-paper-3: #e2e7ef; /* R-127: Zone-Schicht (1) — eigener Ton zwischen App(0) u. Inset(3), damit Zone weder mit App noch mit Inset kollabiert (Grau-auf-Grau) */ --p-ink: #1f2530; /* Tinte (kühl-slate, vorher #23221e warm) */ --p-ink-mut: #5b626e; /* gedämpfte Tinte (kühl, vorher #6b6a63 warm) */ --p-ink-hint: #636a76; /* Hinweis-Tinte — AA-Fix 04.07.: von #8a909c (~3.2:1) auf ≥4.5:1 gegen surface/bg/surface-2 abgedunkelt (bleibt dezent, klar unter --text-muted #5b626e) */ --p-line: #e1e4ea; /* Linie (kühl, vorher #e3e2db warm) */ --p-line-2: #ccd1da; /* kräftige Linie (kühl, vorher #cfcec6 warm) */ /* Akzent-Familien — je Familie ein 700-Stop (Vordergrund) + 50-Stop (Fläche). Werte 1:1 aus rka_v2.html. Dunklere/​hellere Stops für dark-Theme ergänzt. */ --p-blue-800: #114a82; --p-blue-700: #185fa5; --p-blue-300: #7db4e3; --p-blue-50: #e6f1fb; --p-green-800: #2d5410; --p-green-700:#3b6d11; --p-green-300:#9ec97a; --p-green-50:#eaf3de; --p-amber-800: #6a3f08; --p-amber-700:#854f0b; --p-amber-300:#d9a45a; --p-amber-50:#faeeda; --p-red-800: #832323; --p-red-700: #a32d2d; --p-red-300: #d98a8a; --p-red-50: #f7e3e3; --p-coral-800: #7a2f16; --p-coral-700:#993c1d; --p-coral-300:#d39a82; --p-coral-50:#faece7; --p-purple-800: #2e2769; --p-purple-700:#3c3489; --p-purple-300:#9690cf; --p-purple-50:#eeedfe; --p-teal-800: #0b5443; --p-teal-700: #0f6e56; --p-teal-300: #6cb8a4; --p-teal-50: #e1f5ee; --p-gray-800: #45443f; --p-gray-700: #5f5e5a; --p-gray-300: #b6b5ad; --p-gray-50: #f1efe8; /* PINK (Anna/expats) — bis 17.07. existierte diese Rampe NICHT als Token: `foundation.css:331` (.ds-axis--ent-anna) trug die Werte NUR als Inline-Fallback `var(--p-pink-700, #a83277)`. Ein Wert, der nur als Fallback lebt, ist unsichtbarer Bestand — genau die Klasse, aus der die „existiert schon"-Irrtümer entstehen: kein Token-Konsument findet ihn, kein Theme kann ihn überschreiben. Werte 1:1 aus den belegten Fallbacks übernommen, nichts umgefärbt. `-300` GESETZT von DESIGN#01 18.07. (Hue 325 gehalten, S/L analog red-300; Kontrast 6.0:1 auf Anna-dark-bg #43142f, AA ✓) — vorher bewusst nicht erfunden, jetzt belegt entschieden. */ --p-pink-800: #7e2159; --p-pink-700: #a83277; --p-pink-300: #d98ab8; --p-pink-50: #fbe8f2; /* Selektion (gewählte Zeile/Karte) */ --p-gold: #e3c200; --p-gold-50: #fff7e0; /* ─────────────────────── LAYER 2 — SEMANTIK (LIGHT) ─────────────────────── */ /* Flächen & Tinte */ --bg: var(--p-paper); /* Seiten-Hintergrund */ --surface: var(--p-white); /* Karten / Panels */ --surface-2: var(--p-paper-2); /* eingebettete Felder / Metriken — kühl (war gray-50)*/ --text: var(--p-ink); /* ══ R-127 SURFACE/ELEVATION — 4-SCHICHTEN-HIERARCHIE (Q10, JC 2026-07-09) ══ EIN Token je Schicht; benachbarte Flächen sind NIE gleich (Ton-Kaskade), damit „Grau-auf-Grau" (Fläche ≈ Fläche ohne Grenze) strukturell unmöglich wird. Aliase auf die bestehenden Flächen-Primitives — KEINE neue Palette, nur benannte Rollen: 0 --bg-app = Gesamt/all-over (Seite) = --bg (dunkelster/tiefster Ton) 1 --bg-zone = Kartenbereich/Sektion = eigener Zwischen-Ton (paper-2) 2 --bg-card = Karte/Panel (hebt sich ab) = --surface (hellster Ton, weiß) 3 --bg-inset = eingelassen in Karte (Metrik…) = --surface-2 (leicht dunkler als card) KONTRAST-REGEL (Guard R-127): eine höhere Schicht MUSS sich von ihrer Eltern-Schicht absetzen — durch Ton (ΔLuminanz) ODER trennende Grenze (Rahmen/Schatten). Kein Element trägt dieselbe BG wie sein direkter Container ohne Border/Box-Shadow. --bg-zone bekommt einen EIGENEN Ton (paper) zwischen App und Card, sonst kollabierte die Zone-Schicht mit der App-Schicht (Grau-auf-Grau). */ --bg-app: var(--bg); /* Schicht 0 = Seite (--p-paper #f4f6f9) */ --bg-zone: var(--p-paper-3); /* Schicht 1 = eigener Ton (#e2e7ef), klar dunkler als App(0), klar dunkler als Card(2)=weiß, ungleich Inset(3)=paper-2 */ --bg-card: var(--surface); /* Schicht 2 = Karte (weiß) — hebt sich über Zone/App ab */ --bg-inset: var(--surface-2); /* Schicht 3 = eingelassen (--p-paper-2 #eceff4), leicht dunkler als Card */ --text-muted: var(--p-ink-mut); --text-hint: var(--p-ink-hint); --border: var(--p-line); --border-strong: var(--p-line-2); --selected-bg: var(--p-gold-50); --selected-bd: var(--p-gold); --focus-ring: var(--p-blue-700); /* AKTIONS-ROLLEN (fg = Text/Rahmen · bg = Füllung · ink = Text auf bg) */ --c-action: var(--p-blue-700); --c-action-bg: var(--p-blue-50); --c-action-ink: var(--p-blue-800); --c-confirm: var(--p-green-700); --c-confirm-bg:var(--p-green-50); --c-confirm-ink:var(--p-green-800); /* ⚓ WHITE-LABEL-ANKER: bleibt grün */ --c-warn: var(--p-amber-700); --c-warn-bg: var(--p-amber-50); --c-warn-ink: var(--p-amber-800); --c-danger: var(--p-red-700); --c-danger-bg: var(--p-red-50); --c-danger-ink: var(--p-red-800); --c-neutral: var(--p-gray-700); --c-neutral-bg:var(--p-gray-50); --c-neutral-ink:var(--p-gray-800); /* ── STATUS-ACHSE A — ENTITÄT (wer/welche Firma) ── orthogonal zu Einstufung & Konfidenz. NIE für Status/Sektion zweckentfremden. */ --ent-c3: var(--p-blue-700); --ent-c3-bg: var(--p-blue-50); /* C3 · Convis Consult & Marketing GmbH */ /* W6 (JC-Entscheid 17.07.): C4 = TEAL statt purple. Grund: purple ist in der V4-Referenz an KIVISAI vergeben (foundation.css:330 `.ds-axis--ent-kivisai`) — C4 und KIVISAI wären sonst farbgleich. `foundation.css:327` führt C4 bereits als teal; tokens.css hinkte hinterher. Also KEIN neuer Anstrich, sondern Angleich an den geltenden V4-Kanon. Achsen-Kollision geprüft: `--cls-internal` (:105) nutzt dieselbe teal-Rampe — unkritisch, weil die 3 Achsen über die FORM trennen (Entität=Fläche · Einstufung=Kante · Konfidenz=Punkt), nicht über den Farbton. */ --ent-c4: var(--p-teal-700); --ent-c4-bg: var(--p-teal-50); /* C4 · Convis SARL */ --ent-privat: var(--p-gray-700); --ent-privat-bg: var(--p-gray-50); /* Privat */ /* ── STATUS-ACHSE B — EINSTUFUNG / CONFIDENTIALITY (Sensibilität) ── orthogonal zur Entität: ein Business-Doc KANN sensibel sein (HR/bAV). reuse confidentiality_level (Mig 112+181). Eskalierend public→strict. */ --cls-public: var(--p-gray-700); --cls-public-bg: var(--p-gray-50); --cls-internal: var(--p-teal-700); --cls-internal-bg: var(--p-teal-50); --cls-confidential: var(--p-amber-700); --cls-confidential-bg: var(--p-amber-50); --cls-strict: var(--p-red-700); --cls-strict-bg: var(--p-red-50); /* streng_vertraulich */ /* ── STATUS-ACHSE C — KONFIDENZ (wie sicher ist die Klassifikation) ── orthogonal zu A & B. Wird mit Schloss-Icon kombiniert: bestätigt/gelockt = 🔒. Skala-Entscheid (JC 2026-06-20, gesperrt) → numerische confidence 0..1: high ≥ 0.85 · medium 0.60–0.85 · low < 0.60 · 🔒 (.is-locked) = bestätigt (User/Korroboration), orthogonal zum Zahlenwert. */ --conf-high: var(--p-green-700); --conf-high-bg: var(--p-green-50); --conf-medium: var(--p-amber-700); --conf-medium-bg: var(--p-amber-50); --conf-low: var(--p-coral-700); --conf-low-bg: var(--p-coral-50); --conf-locked: var(--p-ink); /* Schloss-Tinte bei bestätigt */ /* Zahlungs-Hinweise (RKA-Domäne, semantisch eigenständig) */ --pay-private: var(--p-coral-700); --pay-private-bg: var(--p-coral-50); /* privat ausgelegt → Erstattung */ --pay-firm: var(--p-green-700); --pay-firm-bg: var(--p-green-50); /* Firmenkarte → keine Erstattung */ /* ════════════════════ AMBIENT / WAYFINDING — KONTEXT-TINT (ctx-tint) ════════════════ „Welche Sektion bin ich?" — whisper-subtiler Flächen-Tint der aktiven Shell-Sektion (§5 KONZEPT_SHELL_4ZONEN · Regelwerk R-42 · AGENT-UX#01-Proposal 2026-06-29). BEWUSST EIGENE FAMILIE, NICHT Teil der Bedeutungs-Palette: ein Sektions-Tint ist ORIENTIERUNG, kein Status → daher rohe rgba-Hues statt --p-*-Verweis, und NICHT marken-überschreibbar (Wayfinding bleibt über Marken konsistent; eine Voll-Flächen- Marke wie gabriel kann sie via eigenem Block neutralisieren, Default-Anker bleibt). ── Kalibrierung (JC „nicht über-tönen"): Alpha = .04 OBERGRENZE (light). Die Haupt- Last der „wo bin ich"-Anzeige trägt der getönte 📍-Sektions-Chip; der Flächen-Tint ist nur die leise Bestätigung. ── ANWENDUNG = EINE Methode (Entscheid 5, gesperrt): Token DIREKT als Layer über --surface (`.ds-ctx-surface`, components.css) — NIE zusätzlich color-mix (das dämpfte das .04-Alpha ein zweites Mal → unsichtbar; vgl. abgelöster Shell-Platzhalter). ── KEYING: Token-Suffix == Shell-`context_id` (= SECTIONS[].id), sonst bindet nichts. Hinweis: Menü-Label „Finanzen" → context_id ist `buchungen`. `general` = KEIN Token (Allgemein-Chat bleibt --surface/weiß, bewusster Übergang, kein Auto-Reset). */ --ctx-tint-heute: rgba( 59,130,246,.04); /* Blau */ --ctx-tint-klaerung: rgba(234,179, 8,.04); /* Amber */ --ctx-tint-buchungen: rgba( 99,102,241,.04); /* Indigo (Menü-Label „Finanzen") */ --ctx-tint-dokumente: rgba( 20,184,166,.04); /* Teal */ --ctx-tint-vertraege: rgba( 6,182,212,.04); /* Cyan */ --ctx-tint-entitaeten: rgba(244, 63, 94,.04); /* Rosé */ --ctx-tint-steuer: rgba(139, 92,246,.04); /* Violett */ --ctx-tint-rka: rgba( 34,197, 94,.04); /* Grün */ --ctx-tint-weltb: rgba(249,115, 22,.04); /* Orange (Projekte Welt B) */ --ctx-tint-fahrtenbuch: rgba(132,204, 22,.04); /* Limette */ --ctx-tint-verwaltung: rgba(113,113,122,.04); /* Zink */ --ctx-tint-einstellungen:rgba(100,116,139,.04); /* Slate — RESERVIERT (noch keine Sektion) */ /* ───────────────────────── TYPO / SPACING / FORM ───────────────────────── Skala & Regeln aus dem Style-Guide §2. Sentence-case immer, nie ALL-CAPS. */ --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* nur Titel/Beträge — kein 3. Gewicht im Fließtext */ --fs-h1: 22px; --fs-h2: 18px; --fs-h3: 16px; --fs-body: 16px; --fs-small:13px; --fs-micro:11px; /* harte Untergrenze — nie < 11px */ --lh-body: 1.5; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; /* ══ ANTWORT-TYPOGRAFIE (DESIGN#03, JC-#920 „B4 Bullet-Abstände zu groß" → benanntes Set) ══ Wie KAI-Antworten im Chat gesetzt werden (.longprose). Vorher hartcodierte px in core_shell.html; jetzt EIN Token-Set, damit die Antwort im selben Raster atmet wie der Rest. Werte JC-freigegeben 17.07. (Tower), JC justiert live am Katalog. Der Hebel für „zu groß" war die line-height in MEHRZEILIGEN Bullets (1.6→1.45), nicht der Bullet-Gap (der war mit 2px winzig). */ --answer-line-height: 1.45; /* kompakter in mehrzeiligen Bullets — der eigentliche Hebel */ --answer-p-gap: var(--sp-2); /* 8px Absatz-Abstand */ --answer-li-gap: var(--sp-1); /* 4px zwischen Bullets — sichtbare Trennung bei mehrzeiligen */ --answer-list-indent: var(--sp-4); /* 16px Einzug (war 18px, weniger Flucht nach rechts) */ --answer-list-gap: var(--sp-2); /* 8px Liste ↔ Absatz */ --answer-heading-gap-top: var(--sp-3); /* 12px vor Zwischen-Überschrift */ --answer-heading-gap-bottom: var(--sp-1); /* 4px nach Zwischen-Überschrift */ /* ══ R-128 SPACING/RHYTHMUS — ABSTAND TRÄGT BEDEUTUNG (Q12, JC 2026-07-09) ══ Die Skala oben ist die ROH-Rampe (4-8-12-16-20-24, geometrisch). DARÜBER liegt eine SEMANTISCHE Schicht: Abstand kommuniziert Gruppierung vs. Trennung. Komponenten nutzen die SEMANTISCHEN Rollen (nie beliebige px), damit Nähe = „gehört zusammen" und Distanz = „ist getrennt" konsistent liest. Vier Rollen, aufsteigend: --gap-tight (sp-1) eng verwandt — Label↔Wert, Icon↔Text INNERHALB eines Elements --gap-group (sp-2) EINE Gruppe — Chips einer Zeile, Zeilen einer Karte --gap-related (sp-3) verwandte Blöcke — Kacheln eines Rasters, Karten einer Liste --gap-separate (sp-5) getrennte Einheiten — Konversations-Bubbles (Du↔Kai), Zonen --gap-zone (sp-6) Zonen-Trennung — Hero↔Main↔Konversation↔Composer MINDESTMASS (Guard R-128): Gaps zwischen Karten/Kacheln ≥ --gap-related (12px) und zwischen Konversations-Bubbles ≥ --gap-separate (20px) — nie „angeklebt". Werte kommen aus der Token-Rampe (Guard prüft Token-Herkunft: ein Nicht-Skalen-px-Gap fällt rot). */ --gap-tight: var(--sp-1); --gap-group: var(--sp-2); --gap-related: var(--sp-3); --gap-separate: var(--sp-5); --gap-zone: var(--sp-6); --radius-md: 8px; /* Buttons, Inputs, Chips */ --radius-lg: 12px; /* Karten, Panels */ --bd-width: 1px; --shadow-card: 0 1px 2px rgba(20,23,30,.04), 0 1px 3px rgba(20,23,30,.06); --shadow-pop: 0 4px 16px rgba(20,23,30,.12); --scrim: rgba(20,23,30,.45); /* Overlay-/Drawer-Abdunkelung (Modal/Scrim) — kühl-neutral */ /* ── BILDWELT / ASSET-TOKENS (JC-Export 4: „Icons + Hero-Bilder verbessern wir später — ist alles als Variable vorbereitet?"). DÜNNE Schicht, damit die Bildwelt ZENTRAL austauschbar bleibt, ohne Markup pro Seite anzufassen: --hero-media Hero-Bild-Slot: none = Emoji/Icon-Fläche (Default); auf url("…")/image-set(…) setzen → das Hero-Bild überlagert die Icon-Fläche (foundation .zone-hero__icon liest den Token). --hero-icon-scale Feinjustage der Emoji-/Icon-Größe im Hero (1 = Default). --icon-scale globaler Icon-Größen-Faktor (Inline-Emoji/Glyphen). --icon-source Icon-Set-Konvention: "emoji" (Default, Unicode inline) | künftig "sprite"/"font" → EIN Umschaltpunkt, wenn ein echtes Icon-Set kommt (Marke kann ihn je :root überschreiben). Marken-/Instanz-Blöcke (gabriel, megabook …) überschreiben diese Tokens für ihre eigene Bildwelt; SSOT bleibt Code, das Bild ist nur ein Slot. */ --hero-media: none; --hero-icon-scale: 1; --icon-scale: 1; --icon-source: "emoji"; color-scheme: light; } /* ───────────────────────── LAYER 2 — SEMANTIK (DARK) ───────────────────────── Nur die semantische Schicht wird umgehängt. Flächen dunkel, Tinte hell, Akzente auf hellere Stops gezogen + Flächen als getönte 800-Stops. */ :root[data-theme="dark"] { /* CORE-DEFAULT dark = KÜHL-NEUTRAL (kühl-slate statt warmem Braun-Ton). */ --bg: #14171b; --surface: #1c2026; --surface-2: #242931; --text: #e6e9ef; /* R-127 dark: 4-Schicht-Kaskade (App dunkelster → Card heller → Inset noch heller). Zone(1) = eigener Ton zwischen App(0) und Card(2), ungleich Inset(3). */ --bg-app: #14171b; /* 0 */ --bg-zone: #171a1f; /* 1 — zwischen App u. Card, klarer Δ zu beiden, ungleich Inset */ --bg-card: #1c2026; /* 2 */ --bg-inset: #242931; /* 3 */ --text-muted: #a7aeba; --text-hint: #9097a3; /* AA-Fix 04.07.: von #7e8590 (~4.0:1, unter AA gegen surface-2) auf ≥4.5:1 gegen surface/bg/surface-2 aufgehellt (dark); bleibt dezent unter --text-muted */ --border: #2b3038; --border-strong: #3b414c; --selected-bg: #3a3414; --selected-bd: var(--p-gold); --focus-ring: var(--p-blue-300); --c-action: var(--p-blue-300); --c-action-bg: #14304d; --c-action-ink: #dcebfb; --c-confirm: var(--p-green-300); --c-confirm-bg:#1e3210; --c-confirm-ink:#e7f3da; /* ⚓ bleibt grün */ --c-warn: var(--p-amber-300); --c-warn-bg: #3a2806; --c-warn-ink: #f7e9cf; --c-danger: var(--p-red-300); --c-danger-bg: #3d1717; --c-danger-ink: #f6dede; --c-neutral: var(--p-gray-300); --c-neutral-bg:#34332d; --c-neutral-ink:#ecebe4; --ent-c3: var(--p-blue-300); --ent-c3-bg: #14304d; /* W6 dark-Analogon zu :98 — teal-300 + dunkler teal-bg. Der bg folgt dem Muster der Nachbarn (dunkle, entsättigte Variante der Rampe); Referenz derselben Rampe im Dark: `--cls-internal-bg` (:257) = #0c382c. Hier bewusst etwas dunkler/neutraler, damit Entität (Fläche) und Einstufung (Kante) im Dark nicht verschmelzen. */ --ent-c4: var(--p-teal-300); --ent-c4-bg: #103b31; --ent-privat: var(--p-gray-300); --ent-privat-bg: #34332d; --cls-public: var(--p-gray-300); --cls-public-bg: #34332d; --cls-internal: var(--p-teal-300); --cls-internal-bg: #0c382c; --cls-confidential: var(--p-amber-300); --cls-confidential-bg: #3a2806; --cls-strict: var(--p-red-300); --cls-strict-bg: #3d1717; --conf-high: var(--p-green-300); --conf-high-bg: #1e3210; --conf-medium: var(--p-amber-300); --conf-medium-bg: #3a2806; --conf-low: var(--p-coral-300); --conf-low-bg: #3a2013; --conf-locked: #ecebe4; --pay-private: var(--p-coral-300); --pay-private-bg: #3a2013; --pay-firm: var(--p-green-300); --pay-firm-bg: #1e3210; --shadow-card: 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 4px 16px rgba(0,0,0,.55); --scrim: rgba(0,0,0,.6); /* Dark: kräftigere Abdunkelung */ /* Kontext-Tint dark: gleiche Hues, Alpha .06 (statt .04) für Sichtbarkeit auf dunklem Surface. */ --ctx-tint-heute: rgba( 59,130,246,.06); --ctx-tint-klaerung: rgba(234,179, 8,.06); --ctx-tint-buchungen: rgba( 99,102,241,.06); --ctx-tint-dokumente: rgba( 20,184,166,.06); --ctx-tint-vertraege: rgba( 6,182,212,.06); --ctx-tint-entitaeten: rgba(244, 63, 94,.06); --ctx-tint-steuer: rgba(139, 92,246,.06); --ctx-tint-rka: rgba( 34,197, 94,.06); --ctx-tint-weltb: rgba(249,115, 22,.06); --ctx-tint-fahrtenbuch: rgba(132,204, 22,.06); --ctx-tint-verwaltung: rgba(113,113,122,.06); --ctx-tint-einstellungen:rgba(100,116,139,.06); color-scheme: dark; } /* ════════════════════════════════ WHITE-LABEL / BRAND-LAYER ═══════════════════════ FORMALER MARKEN-VERTRAG (DESIGN#01, 2026-06-20) — was eine Marke überschreiben DARF und was FEST bleibt. Pro Instanz per data-brand="…" auf /. Wirkt in light UND dark, weil nur Layer-2-Rollen getauscht werden — Komponenten nie. ✅ ÜBERSCHREIBBAR (Marken-Identität — „Look"): Akzent --c-action / --c-action-bg / --c-action-ink (Primär/CTA/Links) Fokus --focus-ring Flächen --bg / --surface / --surface-2 (warme vs. kühle Anmutung) Linien --border / --border-strong Selektion --selected-bg / --selected-bd ⚓ ANKER — NIE marken-überschreiben (Bedeutung = überall gleich): --c-confirm* (grün) · --c-warn* (amber) · --c-danger* (rot) · --c-neutral* Status-Achsen --ent-* (Entität) · --cls-* (Einstufung) · --conf-* (Konfidenz) Domänen-Semantik --pay-* u.a. → „Bestätigen" ist überall grün, „streng vertraulich" überall rot, C3 überall blau — egal welche Marke. Re-Branding ändert NUR Look, nie Bedeutung/Funktion (S2/S3). ÜBERSICHT DER MARKEN (Coverage-Map = COVERAGE_MAP.md): (Default, ohne data-brand) = startact-Blau · CORE-Mandant jcbinetti, RKA/Cockpits data-brand="gabriel" = warme Terracotta/Crème · Live-Memory-Mandant (volle Flächen-Marke — überschreibt Akzent UND Flächen) data-brand="megabook" = Lila-Akzent (Beispiel: reine Akzent-Marke, Flächen neutral) ══════════════════════════════════════════════════════════════════════════════════ */ /* ── Marke „GABRIEL" (Live Memory) — VOLLE Flächen-Marke: warme Terracotta auf Crème. Zeigt die tiefe Override-Stufe: Akzent + Flächen + Linien + Selektion. Anker fix. */ :root[data-brand="gabriel"] { /* warme Crème-Flächen statt kühlem Papier */ --bg: #faf5ec; --surface: #fffdf8; --surface-2: #f2e9da; /* R-127 gabriel light: Crème-Kaskade. Zone(1) = eigener warmer Zwischen-Ton, damit die 4 Schichten auch auf Voll-Flächen-Marke nie Grau-auf-Grau (hier Crème-auf-Crème) werden. */ --bg-app: #faf5ec; /* 0 */ --bg-zone: #efe4cf; /* 1 — eigener warmer Ton, klar dunkler als App u. Card, ungleich Inset */ --bg-card: #fffdf8; /* 2 */ --bg-inset: #f2e9da; /* 3 */ --border: #e7dcc9; --border-strong: #d8c9af; --selected-bg: #fbe7cf; --selected-bd: #d99a3a; /* Terracotta-Akzent */ --c-action: #9a4a28; --c-action-bg: #f6e7de; --c-action-ink: #5c2a15; --focus-ring: #9a4a28; } :root[data-brand="gabriel"][data-theme="dark"] { --bg: #1d1813; --surface: #262019; --surface-2: #2f2820; /* R-127 gabriel dark: warme Kaskade, Zone(1) zwischen App u. Card, ungleich Inset. */ --bg-app: #1d1813; /* 0 */ --bg-zone: #221c15; /* 1 */ --bg-card: #262019; /* 2 */ --bg-inset: #2f2820; /* 3 */ --border: #3c342a; --border-strong: #4d4335; --selected-bg: #3a2a14; --selected-bd: #d99a3a; --c-action: #e0a07a; --c-action-bg: #3a2013; --c-action-ink: #f8e7dc; --focus-ring: #e0a07a; } /* ── Marke „MEGABOOK" — reine AKZENT-Marke (Lila): nur --c-action + Fokus, Flächen neutral. Beispiel für die leichte Override-Stufe. */ :root[data-brand="megabook"] { --c-action: var(--p-purple-700); --c-action-bg: var(--p-purple-50); --c-action-ink: var(--p-purple-800); --focus-ring: var(--p-purple-700); } :root[data-brand="megabook"][data-theme="dark"] { --c-action: var(--p-purple-300); --c-action-bg: #241e52; --c-action-ink: #e6e3fb; --focus-ring: var(--p-purple-300); } /* ════════════════════════════ MODUS-/TIEFE-ACHSE ══════════════════════════════ 3. orthogonale Achse (neben theme+brand): data-mode am . pro (Default, kein Attribut) = volle Tiefe · essential = reduziert, großzügig. HEBEL A = Dichte/Skala: essential überschreibt NUR Typo/Spacing/Zeilenhöhe (keine Farbe → AA unverändert, Farb-Paare identisch). Komponenten erben automatisch (sie nutzen nur Token). Komponiert frei mit data-theme + data-brand. Resolver (manuell>adaptiv>Wizard>pro): Konsument. (HEBEL B = Sichtbarkeit .ds-pro-only/.ds-essential-only liegt in components.css.) */ :root[data-mode="essential"] { --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 19px; --fs-body: 18px; --fs-small:15px; --fs-micro:13px; /* Floor angehoben — bessere Lesbarkeit */ --lh-body: 1.6; --sp-3: 16px; /* mehr Luft (sp-1/2 = Feinabstände bleiben) */ --sp-4: 20px; --sp-6: 32px; }