/* ============================================================ BKM (Bausparkasse Mainz) – tokens.css Von Hand gepflegt nach dem BKM-Design-System: tokens.json (Werte, Aliase {name} aufgelöst), README.md (Regeln) und bewegung.md (Motion), Stand 23.09.2026. Aufbau: 1. BKM-Token unter ihren eigenen Namen (--aubergine, --flaeche, --text-headline, --daten-1 …) – neue Komponenten nutzen NUR diese. 2. Kompatibilitäts-Schicht: ältere Rollennamen (--bg-*, --text-100…600, --lime*, --pink*, --r-*, --glow-* …) zeigen auf BKM-Werte, damit live.css/regie.css/praesentation.css ohne Umbau hell und flach aussehen. Die Schicht ist ein Übergang – beim Umbau einer Komponente auf BKM-Namen wechseln. Kernregeln (README): · Hell ist Standard: Seitengrund creme, Karten weiss, Zonen sand, Vollflächen aubergine. Nie Weiß als Seitenhintergrund. · Rot genau EIN Akzent pro Ansicht, nie Fläche außer Primär-Button. · Türkis, Maigrün, Petrol (bis) nur für Daten, nie Hintergrund. · Nur Volltöne: keine Aufhellungen, keine Verläufe. Einzige Abstufung ist Transparenz von Schwarz (hell) bzw. Weiß (dunkel). · Radius überall 0; Kreise nur als Diagramm-Elemente. · Flach: nur --schatten-1, nur fürs oberste Element (Overlay, Modal). Keine Glows. · Inter für alles, Bebas Neue für plakative Zahlen. · Fokus: 2 px aubergine, 2 px Abstand (auf Vollton weiss). ============================================================ */ :root { color-scheme: light; /* native Widgets (Scrollbars, Date-Picker) hell – Hell ist BKM-Standard */ /* ============================================================ 1. BKM-Token ============================================================ */ /* ---- Markenfarben (Volltöne, in beiden Themes gleich) ---- */ --aubergine: #4c2147; /* Primärfarbe: Headlines (10,9:1 auf Creme), Vollflächen, Tabellenköpfe, Marker */ --rot: #c3023b; /* Signal: genau EIN Akzent pro Ansicht; Text auf creme 5,2:1, weiss 6,2:1, sand nur ab 24 px */ --sand: #ddd3bc; /* ruhige Zonen, Platzhalter, Ergebniszeilen; als Text nur Dekor */ --tuerkis: #1eab9e; /* Datenfarbe und Link; als Text auf Hell zu schwach (2,4:1) */ --maigruen: #ccd500; /* Datenfarbe; auf Hell nie als Text, auf Aubergine Akzentwort (8,1:1) */ --bis: #00414c; /* BIS/Petrol, Sonderfarbe: Diagramme, Ziffern; 9,4:1 auf Creme */ --creme: #f1eadc; /* dominanter Seitengrund im Web */ --weiss: #ffffff; /* Karten und Tabellenzellen auf Creme; Schrift auf Aubergine/Rot/Bis */ --schwarz: #000000; /* Fließtext auf creme, sand, weiss */ /* ---- Flächen (hell) ---- */ --flaeche: var(--creme); /* Inhaltsseite, Sektionen */ --flaeche-zone: var(--sand); /* ruhige Zone unter Karten */ --flaeche-karte: var(--weiss); /* Karten, Kacheln, Tabelleninnenraum */ --flaeche-erhoeht: var(--weiss); /* Overlay, Modal – zusammen mit --schatten-1 */ --flaeche-vollton: var(--aubergine);/* Schnitte: Titel, Kapiteltrenner, Schluss; darauf nur --auf-vollton-* */ /* ---- Text und Linien (hell) ---- */ --text: var(--schwarz); /* Fließtext, ab 14:1 */ --text-headline: var(--aubergine); /* Headlines und Titel, ab 8,7:1 */ --text-neben: rgba(0, 0, 0, 0.62); /* Nebentext, Labels, Fußzeile, ab 5,4:1 */ --linie: rgba(0, 0, 0, 0.14); /* 1-px-Trennlinien, Kartenrahmen – rein strukturell, nie einziger Rand eines Bedienelements */ --linie-betont: var(--aubergine); /* Rand Sekundär-Button, Platzhalter-Feld, betonte Trennung */ --link: var(--tuerkis); /* auf Hell zusätzlich unterstreichen und fett */ --link-besucht: var(--aubergine); --fokus: var(--aubergine); /* 2 px Rahmen, 2 px Abstand; auf --flaeche-vollton stattdessen --weiss */ /* ---- Auf Vollton (aubergine) und auf Farbflächen ---- */ --auf-vollton-text: var(--weiss); /* 13:1 auf Aubergine */ --auf-vollton-neben: rgba(255, 255, 255, 0.75); /* 8:1 */ --auf-vollton-akzent: var(--maigruen); /* ersetzt Rot auf Aubergine (8,1:1) */ --auf-vollton-kachel: rgba(255, 255, 255, 0.08); /* Kachelfläche auf Vollton */ --auf-vollton-rand: rgba(255, 255, 255, 0.22); /* 1-px-Rand von Kacheln auf Vollton */ --auf-rot: var(--weiss); /* Schrift auf Rot, z. B. Primär-Button (6,2:1) */ --auf-tuerkis: var(--schwarz); /* nicht Weiß (2,9:1) */ --auf-maigruen: var(--schwarz); --auf-bis: var(--weiss); /* ---- Datenfarben (Reihenfolge der Serien; Werte direkt beschriften) ---- */ --daten-1: var(--aubergine); /* einfarbige Diagramme immer Aubergine */ --daten-2: var(--tuerkis); --daten-3: var(--maigruen); /* 1,3:1 auf Creme – nur mit Beschriftung oder 1-px-Rand */ --daten-4: var(--bis); --daten-5: var(--sand); /* 1,1:1 auf Creme – nur auf --flaeche-karte oder mit Rand */ --daten-signal: var(--rot); /* nur die EINE hervorgehobene Serie / der eine Wert */ /* ---- Abstände (4-px-Basis) ---- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; /* Button innen vertikal */ --space-16: 16px; --space-24: 24px; /* Button innen horizontal, Abstand zwischen Karten */ --space-32: 32px; /* Innenabstand Karten und Kacheln */ --space-48: 48px; /* zwischen Blöcken einer Sektion */ --space-64: 64px; /* zwischen Sektionen */ /* ---- Form, Tiefe, Linien ---- */ --radius-0: 0; /* überall – harte Rechtecke sind Markenmerkmal */ --schatten-1: 0 2px 6px rgba(0, 0, 0, 0.18); /* einzige Schattenstufe, nur oberstes Element (Overlay, Modal) */ --staerke-1: 1px; /* Trennlinien, Kartenrahmen */ --staerke-2: 2px; /* Zeitstrahl-Achse, Fokus */ --staerke-3: 3px; /* rote Linie unter dem Kopfband */ --staerke-4: 4px; /* Karten-Oberkante, Leitsatz-Kante */ /* ---- Schrift ---- */ --font-body: 'Inter', Calibri, Arial, sans-serif; --font-display: 'Inter', 'Montserrat', Calibri, Arial, sans-serif; /* display, h1, h2 */ --font-numeric: 'Bebas Neue', 'Inter', sans-serif; /* plakative Zahlen; nur Versalien, keine Kürzel wie „M4a“ */ --font-code: 'Roboto Mono', Consolas, ui-monospace, monospace; /* nur maschinelle Zeichenketten (Links zum Kopieren) – kein BKM-Token */ /* ---- Bewegung (bewegung.md) ---- */ --ease-sanft: cubic-bezier(.2, .7, .2, 1); /* eine Kurve für alles, was ein- oder ausläuft; Dauer-Animationen ease-in-out */ /* ============================================================ 2. Kompatibilitäts-Schicht: ältere Rollennamen → BKM-Werte ============================================================ */ /* ---- Marken-Rollen ---- Lime war primärer Akzent / aktiv / Signal (Eyebrow, aktive Option, Hervorhebung im Diagramm, Fokus). Diese Rolle übernimmt AUBERGINE: BKM-Primärfarbe, „ruhige Autorität“, Marker und Linien, Text 10,9:1. Rot kommt dafür nicht in Frage – Lime erscheint pro Ansicht vielfach, Rot darf es nur einmal. Maigrün (der Lime-ähnliche Ton) ist Datenfarbe und auf Hell nie Text. Pink war die Aktion (Primär-Button, CTA, Gegenstimme) → ROT, wie der BKM-Primär-Button. Weil Pink in den Komponenten an mehreren Stellen steht (Button, CTA-Pille, Fehlertext, Gegenstimme), müssen die Folge-Umbauten auf genau einen roten Akzent je Ansicht reduzieren. */ --lime: var(--aubergine); --lime-bright: var(--aubergine); /* keine Aufhellungen – Hover über Flächenwechsel */ --lime-dark: var(--aubergine); --pink: var(--rot); --pink-bright: var(--rot); --pink-dark: var(--rot); /* farbiger Text auf Hell: 5,2:1 auf Creme */ --gold: var(--bis); /* Gold war Sonder-Akzent → Petrol, die BKM-Sonderfarbe; als Text 9,4:1 (Sand wäre als Text unlesbar) */ --black: var(--schwarz); --graphite: var(--schwarz); /* BKM kennt keine eigene Graufarbe */ --white: var(--weiss); --on-accent: var(--weiss); /* Text auf der Akzentfläche – jetzt Aubergine (13:1), vorher Schwarz auf Lime */ /* ---- Hintergrund-Treppe (0 = Seite … 4 = Zone) ---- Seite und Bühne in Creme, erhöhte Elemente (Menüs, Toast, Karten) in Weiß, Zonen in Sand. Nie Weiß als Seitengrund. */ --bg-0: var(--creme); --bg-1: var(--creme); /* Folien-/Bühnengrund */ --bg-2: var(--creme); /* Seitengrund in live.css (--go-bg) */ --bg-3: var(--weiss); /* erhöht: Sprungmenü, Toast (--go-bg-soft) */ --bg-4: var(--sand); /* Zone */ /* ---- Text (Alpha-Schwarz; 100 = --text, 400 = --text-neben) ---- */ --text-100: var(--schwarz); --text-200: rgba(0, 0, 0, 0.92); --text-300: rgba(0, 0, 0, 0.75); --text-400: rgba(0, 0, 0, 0.62); --text-500: rgba(0, 0, 0, 0.42); /* unter AA – nur Dekor, Platzhalter */ --text-600: rgba(0, 0, 0, 0.30); /* unter AA – nur Dekor */ /* ---- Rahmen ---- */ --border-subtle: var(--linie); --border-soft: var(--linie); --border-strong: var(--linie-betont); /* Sekundär-Button-Rand laut BKM */ --border-active: var(--aubergine); --focus-ring: var(--fokus); /* ---- Status ---- BKM hat keine Ampel; die alten Ampel-Töne (Grün 1,7:1, Gelb 1,7:1 auf Hell) fallen als Text durch und sind Fremdfarben. Die Rohtöne zeigen deshalb auf Markenfarben, die als Text tragen; die Bedeutung tragen Text und Icon. */ --status-green: var(--bis); /* 9,4:1 auf Creme */ --status-yellow: var(--aubergine); /* Hinweis/Warnung ohne Gelb; „scharf“ (is-armed) sollte im Umbau rot werden */ --status-red: var(--rot); /* Fehler – zählt als roter Akzent der Ansicht */ /* ---- Akzent-Text-Aliase ---- */ --signal-text: var(--aubergine); /* Kicker/Eyebrow; rot nur, wenn er DER Akzent der Ansicht ist */ --ok-text: var(--bis); --warn-text: var(--text); /* neutral, Bedeutung trägt der Text */ --alert-text: var(--rot); /* ---- Verläufe: BKM kennt keine ---- Als einfarbige „Verläufe“ belassen, damit background-clip:text (z. B. .d-grad) weiter funktioniert. Das Akzentwort in der Headline ist dann der rote Akzent der Ansicht. */ --grad-headline: linear-gradient(var(--rot), var(--rot)); --grad-progress: linear-gradient(var(--tuerkis), var(--tuerkis)); /* Fortschritt: tuerkis auf sand */ --grad-text: linear-gradient(var(--aubergine), var(--aubergine)); /* ---- Spacing-Skala (alte Namen → BKM-Skala) ---- */ --space-xs: var(--space-4); --space-sm: var(--space-8); --space-md: var(--space-16); --space-lg: var(--space-24); --space-xl: var(--space-48); /* vorher 40 px – nicht in der BKM-Skala */ --space-2xl: var(--space-64); /* ---- Radius: überall 0 ---- --r-pill wird in den Komponenten für Buttons, Chips, Pillen, Toolbar, Toast und Balken genutzt (nie für echte Kreise – die stehen dort als border-radius:50%). Deshalb ebenfalls 0. */ --r-xs: var(--radius-0); --r-sm: var(--radius-0); --r-md: var(--radius-0); --r-lg: var(--radius-0); --r-xl: var(--radius-0); --r-pill: var(--radius-0); /* ---- Schatten: flach, nur das oberste Element bekommt --schatten-1 ---- */ --shadow-sm: none; --shadow-md: none; --shadow-lg: var(--schatten-1); /* ---- Glow: verboten ---- */ --glow-lime: none; --glow-pink: none; /* ---- Typo ---- */ --font: var(--font-body); --mono: var(--font-body); /* BKM: Inter für alles – Labels/Codes setzen Inter mit tabular-nums; Roboto Mono nur noch als --font-code */ /* ---- Font-Size-Skala (an die BKM-Web-Skala angelehnt) ---- */ --fs-xs: 13px; /* label */ --fs-sm: 14px; --fs-md: 16px; /* body-s */ --fs-lg: 19px; /* body */ --fs-xl: 24px; /* h2 */ --fs-2xl: 32px; --fs-3xl: 40px; /* h1 */ /* ---- Motion ---- */ --ease: var(--ease-sanft); --ease-out: var(--ease-sanft); --t-fast: .15s; /* Hover, Farbwechsel, Fokus 150–200 ms */ --t: .18s; /* Hover/Aufklappen 160–180 ms */ --t-slow: .6s; /* Einblenden 600 ms */ /* ---- KI-Denk-Indikator (Warten sichtbar machen) ---- */ --think-pulse: 1.15s; /* Balken-Atmung (ein Loop) */ --think-stagger: .16s; /* Versatz je Balken */ --think-cycle: 1.5s; /* Wort-Wechsel-Takt */ --think-word-in: .3s; /* Einblendung des neuen Worts */ /* ---- Layout ---- */ --container: 1200px; --reading: 900px; } /* ============================================================ Dunkles Theme (abgeleitet, KEIN offizieller CD-Bestandteil) Per . Wer ausschließlich offizielles CD braucht, bleibt hell. Flächen als warme Aubergine-Ladder (Canvas #1a1118, Surface #231823, Card #2c1f2b, Elevated #362736), nie reines Schwarz, nie neutrales Grau. Headlines weiß; Türkis und Maigrün sind der Text-Akzent. Aubergine ist hier nie Text (1,2–1,4:1), Rot nur als Fläche mit --auf-rot (2,3–3,0:1). ============================================================ */ [data-theme="dark"] { color-scheme: dark; /* ---- BKM-Token, dunkel ---- */ --flaeche: #231823; /* Surface */ --flaeche-zone: #1a1118; /* Canvas – Zuordnung abgeleitet */ --flaeche-karte: #2c1f2b; /* Card */ --flaeche-erhoeht: #362736; /* Elevated – die Fläche trägt die Tiefe, kein Schatten */ --flaeche-vollton: #1a1118; --text: rgba(255, 255, 255, 0.8); /* ab 9,5:1 */ --text-headline: var(--weiss); /* ab 14:1 */ --text-neben: rgba(255, 255, 255, 0.55); /* ab 5,3:1 */ --linie: rgba(255, 255, 255, 0.12); --linie-betont: rgba(255, 255, 255, 0.22); /* nur 2,0:1 – Bedienelemente zusätzlich über Beschriftung/Fokus erkennbar */ --fokus: var(--tuerkis); /* ab 4,9:1 */ /* --link bleibt tuerkis (4,9–6,5:1); --link-besucht (Aubergine) ist dunkel unsichtbar – nicht unterscheiden */ --link-besucht: var(--link); --daten-1: var(--tuerkis); --daten-2: var(--maigruen); --daten-3: var(--bis); /* 1,5:1 – nur mit 1-px-Rand --linie-betont */ --daten-4: var(--sand); --daten-5: var(--creme); --schatten-1: none; /* ---- Kompatibilitäts-Schicht, dunkel ---- */ --lime: var(--tuerkis); /* Akzent-Rolle: Türkis ist dunkel der bevorzugte Text-Akzent */ --lime-bright: var(--tuerkis); --lime-dark: var(--tuerkis); --on-accent: var(--auf-tuerkis); --gold: var(--sand); /* Petrol trägt auf Dunkel nicht (1,2–1,6:1) */ --bg-0: #1a1118; --bg-1: #1a1118; --bg-2: #231823; --bg-3: #2c1f2b; --bg-4: #362736; --text-100: var(--weiss); --text-200: rgba(255, 255, 255, 0.8); --text-300: rgba(255, 255, 255, 0.72); --text-400: rgba(255, 255, 255, 0.55); --text-500: rgba(255, 255, 255, 0.40); --text-600: rgba(255, 255, 255, 0.28); --border-subtle: var(--linie); --border-soft: var(--linie); --border-strong: var(--linie-betont); --border-active: var(--tuerkis); --focus-ring: var(--fokus); --status-green: var(--tuerkis); --status-yellow: var(--maigruen); --status-red: var(--rot); /* nur als Fläche */ --signal-text: var(--auf-vollton-akzent); /* Maigrün ersetzt Rot auf dunklem Grund */ --ok-text: var(--tuerkis); --warn-text: var(--maigruen); --alert-text: var(--text-100); /* Rot fällt als Text durch – neutral, Bedeutung trägt der Text */ --grad-headline: linear-gradient(var(--maigruen), var(--maigruen)); --grad-text: linear-gradient(var(--weiss), var(--weiss)); --shadow-lg: none; }