/* Merkbar · Design-Tokens (T016, Stand 27.09.2026) WERTE-WAHRHEIT für das ganze Frontend. Die Bedeutung, Rolle, Kontrast und Quelle jedes Tokens stehen in .claude/skills/lernapp-design/references/tokens.md. Jede Änderung hier ändert tokens.md im selben Commit (Sync-Regel, geprüft von tests/theme-guards.test.js). Grammatik --mb---, Rollennamen deutsch. Schicht 1 sind Primitive mit Rohwerten. Sie stehen nur in dieser Datei. Schicht 2 ist Semantik. Nur sie steht im Bauteil-CSS. Kontrastzahlen in den Kommentaren sind mit tools/farbcheck.mjs gerechnet. Kein Dark Mode, kein zweites Farbregime (PLAN.md Design). Umbrüche 768, 1100 und 1400 px, mobile first. CSS-Variablen wirken in Media Queries nicht, deshalb stehen die Zahlen dort direkt. */ :root { color-scheme: light; /* ===== Schicht 1 · Primitive ===== */ /* Marke Merkbar, eigene Palette seit 27.09.2026 (Richtung A Ultraviolett, harmonisch überarbeitet, Rechnung in _audit/2026-09-27-marke/). Eine Familie um Violett, Farbton 288 in OKLCH. Die neutrale Treppe ist leicht violett getönt. Gold erscheint nur als Stern auf Tinte, nie als Fläche auf Violett. */ /* Grund und Stimme */ --mb-white: #FFFFFF; --mb-tinte: #130E2B; /* 18,66:1 auf Weiß */ --mb-tinte-rgb: 19 14 43; /* Basis für Scrim und Schatten, nie Schwarz */ /* Violett, alles was man antippen kann */ --mb-violett-500: #7757E9; /* Weiß darauf 4,86:1 */ --mb-violett-700: #613FC8; /* 6,88:1 auf Weiß, Weiß darauf ebenso */ --mb-violett-800: #4E32A2; /* Weiß darauf 9,12:1 */ /* Lavendel, nur die Wahl */ --mb-lavendel-400: #B4AFEB; /* 2,04:1 gegen Weiß, trägt die Wahl nie allein */ --mb-lavendel-50: #EFEEFF; /* Tinte darauf 16,30:1 */ /* Meilenstein K10, Stern auf Tinte */ --mb-gold: #F4CC64; /* 12,14:1 gegen Tinte, nie auf Hell */ --mb-mond: #F9F7F1; /* 17,42:1 auf Tinte */ /* Ink-Treppe, leicht violett getönt */ --mb-ink-50: #FBFBFE; /* Hover-Fläche, Tinte darauf 18,07:1 */ --mb-ink-100: #F3F3F8; /* 1,11:1 gegen Weiß */ --mb-ink-200: #E2E2E9; /* 1,29:1, nur Deko */ --mb-ink-300: #CDCCD7; /* 1,59:1, Deko neben Beschriftung */ --mb-ink-500: #767683; /* 4,48:1, Rand von Bedienelementen */ --mb-ink-600: #62616F; /* 6,07:1 */ --mb-ink-700: #494858; /* 8,93:1 */ /* Rückmeldung und Formularfehler, die Ampel bleibt */ --mb-success-bg: #DAFCE2; /* Tinte darauf 16,89:1 */ --mb-success-solid: #3D9C5E; /* 3,43:1 auf Weiß */ --mb-warning-bg: #FFEFDD; /* Tinte darauf 16,57:1 */ --mb-warning-border: #ECCB9E; /* 1,54:1, nur Deko */ --mb-critical-bg: #FFEBE8; /* Tinte darauf 16,26:1 */ --mb-critical-border: #F3BFBA; /* 1,41:1 gegen critical-bg, nur Deko */ --mb-critical-solid: #C4403D; /* 5,06:1 auf Weiß */ --mb-critical-text: #B7443D; /* 5,37:1 auf Weiß */ /* Fachfarben (B9), nur Streifen, Symbol, Kalenderpunkt, immer mit Namen */ --mb-petrol: #00757C; /* 5,48:1 auf Weiß */ --mb-beere: #92194F; /* 8,49:1 auf Weiß */ --mb-orange: #DB7D24; /* 3,01:1 auf Weiß, nie Text */ /* Skeleton */ --mb-skeleton-licht: #F9F9FC; /* 1,05:1 gegen ink-100, nur Deko */ /* ===== Schicht 2 · Semantik ===== */ /* Flächen */ --mb-surface-page: var(--mb-white); --mb-surface-stage: var(--mb-lavendel-50); --mb-surface-component: var(--mb-ink-100); --mb-surface-dark: var(--mb-tinte); --mb-surface-skeleton-licht: var(--mb-skeleton-licht); --mb-surface-hover: var(--mb-ink-50); /* nur unter (hover: hover) */ /* Text */ --mb-text-heading: var(--mb-tinte); --mb-text-body: var(--mb-ink-700); --mb-text-muted: var(--mb-ink-600); --mb-text-link: var(--mb-violett-700); --mb-text-on-dark: var(--mb-mond); /* Aktion */ --mb-action-primary: var(--mb-violett-500); --mb-action-primary-hover: var(--mb-violett-700); --mb-action-primary-active: var(--mb-violett-800); --mb-action-primary-label: var(--mb-white); --mb-action-meilenstein: var(--mb-gold); --mb-action-meilenstein-label: var(--mb-tinte); /* Ränder */ --mb-border-hairline: var(--mb-ink-200); /* Deko, nie Rand eines Bedienelements */ --mb-border-control: var(--mb-ink-500); /* Felder und Plätze, 4,48:1 */ --mb-border-gewaehlt: var(--mb-lavendel-400); /* Deko, die Wahl tragen Fläche und Haken */ --mb-border-sekundaer: var(--mb-ink-300); /* Deko, der Zweitknopf trägt immer ein Wort */ --mb-border-sekundaer-hover: var(--mb-ink-500); /* 4,34:1 auf surface-hover */ --mb-border-meilenstein: var(--mb-gold); /* Rückmeldung nach dem Prüfen (B6, B7) */ --mb-feedback-richtig-flaeche: var(--mb-success-bg); --mb-feedback-richtig-rand: var(--mb-success-solid); --mb-feedback-fast-flaeche: var(--mb-warning-bg); --mb-feedback-fast-rand: var(--mb-warning-border); /* Deko, der Zustand steht im Symbol */ --mb-feedback-falsch-flaeche: var(--mb-critical-bg); --mb-feedback-falsch-rand: var(--mb-critical-solid); --mb-feedback-symbol: var(--mb-tinte); --mb-feedback-text: var(--mb-tinte); /* Formularfehler bei Roger und Daniel */ --mb-feedback-fehler-rand: var(--mb-critical-solid); --mb-feedback-fehler-text: var(--mb-critical-text); --mb-feedback-fehler-flaeche: var(--mb-critical-bg); --mb-feedback-fehler-kante: var(--mb-critical-border); /* Fächer */ --mb-fach-englisch: var(--mb-petrol); --mb-fach-deutsch: var(--mb-beere); --mb-fach-mathe: var(--mb-orange); /* Scrim unter Dialog und Unterblatt, 40 % Tinte (R3 2.2, R3 2.6) */ --mb-alpha-scrim: rgb(var(--mb-tinte-rgb) / .4); /* Fokus-Formel, zweifarbig nach WCAG-Technik G195 */ --mb-focus-outline: 2px solid var(--mb-tinte); --mb-focus-offset: 3px; --mb-focus-ring: 0 0 0 5px var(--mb-white); /* Schrift */ --mb-font-sans: "Atkinson Hyperlegible Next", "MerkbarFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mb-weight-regular: 400; --mb-weight-semibold: 600; /* Kind-Skala, Handy unter 768 px (R3 2.5) */ --mb-t-wort: 40px; --mb-t-display-02: 30px; --mb-t-heading-01: 24px; --mb-t-loesung: 24px; --mb-t-eingabe: 24px; --mb-t-buchstabe: 24px; --mb-t-antwort: 20px; /* auch Zustandswort im Rückmeldeblatt (entschieden 27.09.2026) */ --mb-t-satz: 20px; --mb-t-text: 18px; --mb-t-knopf: 18px; --mb-t-klein: 16px; /* Untergrenze ihrer Oberfläche */ --mb-t-tab: 14px; /* nur die Tab-Leiste */ /* Eltern-Skala, nur Rogers und Daniels Seiten (NextBuy, fließend 390 bis 1240 px). display-02 und heading-01 teilen den Namen mit der Kind-Skala und stehen im Block [data-skala="eltern"] unten. */ --mb-t-display-01: clamp(40px, 32.7px + 1.88vw, 56px); --mb-t-heading-02: clamp(18px, 17.1px + 0.24vw, 20px); --mb-t-heading-03: 16px; --mb-t-body-01: 16px; --mb-t-body-02: 14px; --mb-t-label-01: 11px; /* nur Tabellenköpfe in A1 bis A3 */ --mb-t-legal-01: 12px; --mb-t-figure-01: clamp(30px, 25.4px + 1.18vw, 40px); /* Abstand, nur diese Leiter */ --mb-space-3xs: 4px; --mb-space-2xs: 8px; --mb-space-xs: 12px; --mb-space-s: 16px; --mb-space-m: 24px; --mb-space-l: 32px; --mb-space-xl: 48px; --mb-space-2xl: 64px; /* Radius */ --mb-radius-badge: 8px; --mb-radius-input: 16px; --mb-radius-card: 24px; --mb-radius-container: 32px; --mb-radius-pill: 999px; /* Schatten, in Tinte getönt. sh-raised und sh-float gestrichen am 27.09.2026 (FS:251) */ --mb-sh-card: 0 1px 2px rgb(var(--mb-tinte-rgb) / .05), 0 2px 6px rgb(var(--mb-tinte-rgb) / .05); --mb-sh-panel: 0 2px 4px rgb(var(--mb-tinte-rgb) / .05), 0 18px 44px -20px rgb(var(--mb-tinte-rgb) / .34); /* Maße, Handy */ --mb-size-ziel-min: 44px; --mb-size-ziel-abstand: 10px; /* UX-2.3, nicht auf der Abstandsleiter */ --mb-size-knopf: 56px; --mb-size-knopf-breite: 100%; --mb-size-knopf-eltern: 48px; --mb-size-kachel-min: 64px; --mb-size-buchstabe: 60px; --mb-size-feld: 64px; --mb-size-feld-eltern: 52px; --mb-size-chip: 44px; --mb-size-zeile: 64px; --mb-size-tab-leiste: 64px; /* plus env(safe-area-inset-bottom) im Bauteil */ --mb-size-tab-feld: 78px; --mb-size-seitenleiste: 240px; /* greift erst ab 1100 px */ --mb-size-balken: 8px; --mb-size-streifen: 4px; --mb-size-punkt: 8px; --mb-size-station-punkt: 20px; --mb-size-linie: 2px; /* Rand des Stationspunkts und Linie im Unit-Pfad (KSK §10) */ --mb-size-offline-band: 40px; --mb-size-abfrage-kachel: 88px; --mb-size-marke: 44px; /* Höhe des Zeichens in der Wortmarke, kein Ziel */ --mb-size-qr: 224px; /* QR-Code in S2, gut lesbar für eine Handykamera auf 30 bis 50 cm */ --mb-size-spalte: 720px; --mb-size-container: 1200px; --mb-size-dialog: 100%; /* am Handy Unterblatt in voller Breite */ --mb-size-symbol: 20px; --mb-size-haken: 24px; /* Bewegung, eine Kurve, feste Dauern */ --mb-motion-kurve: cubic-bezier(.4, 0, .2, 1); --mb-motion-farbe: 200ms; --mb-motion-druck-zurueck: 200ms; --mb-motion-rand: 250ms; --mb-motion-transform: 300ms; --mb-motion-reveal: 600ms; --mb-motion-rollwerk: 1400ms; --mb-motion-ziffer: 140ms; --mb-motion-meilenstein: 1200ms; --mb-motion-skeleton-sweep: 1200ms; --mb-motion-skeleton-verzug: 400ms; --mb-motion-versatz: 250ms; --mb-motion-weg: 24px; } /* iPad ab 768 px: Stufe der Kind-Skala und Maße (R3 2.5, R3 2.6) */ @media (min-width: 768px) { :root { --mb-t-wort: 56px; --mb-t-display-02: 40px; --mb-t-heading-01: 28px; --mb-t-loesung: 28px; --mb-t-eingabe: 28px; --mb-t-buchstabe: 28px; --mb-t-antwort: 22px; --mb-t-satz: 24px; --mb-size-ziel-abstand: 12px; --mb-size-knopf-breite: 320px; --mb-size-buchstabe: 64px; --mb-size-dialog: 520px; } } /* Eltern-Skala für display-02 und heading-01. Rogers und Daniels Seiten tragen data-skala="eltern" am . Der Block steht nach der Media Query, damit er bei gleicher Spezifität gewinnt. */ [data-skala="eltern"] { --mb-t-display-02: clamp(30px, 25.4px + 1.18vw, 40px); --mb-t-heading-01: clamp(24px, 22.2px + 0.47vw, 28px); } /* Reduzierte Bewegung: alle Dauern auf 0, Endwerte erscheinen sofort (UX-5.10). motion-farbe geht mit auf 0, Kachel wählen und alte Karte wechseln ohne Übergang (R3 2.7). motion-druck-zurueck bleibt, der Rückweg nach dem Druck ist keine Bewegung (B11, R3 2.7). skeleton-verzug bleibt, er ist eine Wartezeit, keine Bewegung (FS:384). */ @media (prefers-reduced-motion: reduce) { :root { --mb-motion-farbe: 0ms; --mb-motion-rand: 0ms; --mb-motion-transform: 0ms; --mb-motion-reveal: 0ms; --mb-motion-rollwerk: 0ms; --mb-motion-ziffer: 0ms; --mb-motion-meilenstein: 0ms; --mb-motion-skeleton-sweep: 0ms; --mb-motion-versatz: 0ms; } }