/* EMPARA — Design Tokens Stand: 11. September 2026 · Version 0.2 Status: Die Skalen für Schriftgröße, Abstand, Radius, Elevation und Dauer sind [Gesetzt] (11.09.2026). Farbwerte, Varianten und Strukturmaße tragen weiterhin den Marker, der an ihrem Abschnitt steht. Abgeleitet aus design-system/BESTANDSAUFNAHME.md. Die Farb- und Schrifttoken entsprechen dem Bestand zeichengleich; Größen, Abstände, Radien, Elevation und Motion sind reduzierte Skalen, auf die die gewucherten Einzelwerte abgebildet werden. Welcher Bestandswert auf welchen Schritt fällt, steht jeweils darunter. Diese Datei ändert nichts an den Demonstratoren. Sie wird erst wirksam, wenn ein Demonstrator sie einbindet. Offline-Auflage (CLAUDE.md, Abschnitt 4): Diese Datei lädt nichts aus dem Netz. Die drei Schriften liegen unter fonts/ und werden über relative Pfade gebunden. Namen sind englisch (CLAUDE.md), Kommentare deutsch. */ /* ========================================================================== 0. SCHRIFTEN — lokal, kein Netzabruf Variable WOFF2-Dateien, Subset latin, unverändert von der Google-Fonts-Auslieferung übernommen. Die Gewichtsbereiche entsprechen genau dem, was im Bestand verwendet wird: Fraunces 400–600 (400 Themenliste, 500 Überschriften, 600 Sigel) Manrope 400–700 (400 Fließtext, 500/600 Bedienelemente, 700 Avatar) JetBrains Mono 400–500 (400 Labels und Zahlen, 500 Marken und Kopfzellen) Lizenz (SIL OFL 1.1) und Herkunft: fonts/LICENSE.md Hinweis: Beim Öffnen einer Seite über file:// verweigern manche Browser das Laden von Schriften aus Nachbardateien. Wer eine Datei ohne Server ausliefern muss — wie die Demonstratoren —, bettet die Schriften stattdessen als data:-URI ein. Genau das tun sie. ========================================================================== */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrainsmono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== 0b. HELL ODER DUNKEL — [Vorschlag, 25.10.2026, `Entsch. 213`] Auftrag Martin: „Es wird ein paar Menschen geben, die gerne mit weißem Hintergrund arbeiten." ## Ein Wertepaar, nicht zwei Dateien Jeder Farbwert steht unten **einmal** da, als `light-dark(hell, dunkel)`. Die Alternative wäre ein zweiter Block mit dreißig Zeilen gewesen, der bei jeder Änderung mitgepflegt werden muss — und der beim ersten Vergessen auseinanderläuft. > **Zwei Fassungen, die an zwei Stellen stehen, sind irgendwann zwei > verschiedene.** Welcher Wert eines Paares gilt, entscheidet `color-scheme`, und das entscheidet eine Zeile. ## Dunkel ist die Vorgabe, und das ist keine Bequemlichkeit Ohne Zutun gilt **dunkel** — auch auf einem Rechner, der hell eingestellt ist. Der Grund steht in `CLAUDE.md` 4: Diese Datei wird in jeden Demonstrator und jede Präsentation eingebettet, und die laufen im Kundentermin am Beamer. Dunkel ist dort die entworfene Gestalt, nicht eine Voreinstellung. > **Ein Artefakt, das man mitnimmt, sieht überall gleich aus. Eine > Fläche, an der jemand arbeitet, darf ihm gehören.** Die laufende Plattform setzt deshalb `data-helligkeit` an der Wurzel und meldet sich damit ausdrücklich an; wer das Attribut nicht setzt, bleibt dunkel. [Gesetzt, 25.10.2026, Entscheidung Martin] ## Was die helle Fassung nicht ist **Hell ist nicht Druck.** Ein Bildschirm hell trägt weiche Grautöne, Schatten und Verläufe; Papier braucht reines Weiß, schwarze Schrift und keine Flächen, die ein Drucker verschluckt. Die Druckfassung entsteht am ersten Zeugnis und nicht hier — sonst wäre sie aus einer Vermutung gebaut. ========================================================================== */ :root { /* Dunkel, solange niemand etwas anderes sagt. */ color-scheme: dark; } :root[data-helligkeit="system"] { color-scheme: light dark; } :root[data-helligkeit="hell"] { color-scheme: light; } :root[data-helligkeit="dunkel"] { color-scheme: dark; } :root { /* ========================================================================== 1. FARBE — [Vorschlag], dunkle Werte aus dem Bestand übernommen `light-dark(hell, dunkel)` — die zweite Zahl ist überall der Wert, der bis zum 25.10.2026 allein dastand. An der dunklen Fassung ändert sich dadurch nichts; sie ist zeichengleich geblieben. Die **hellen** Werte sind neu und tragen deshalb [Vorschlag]: Sie sind aus den dunklen abgeleitet — gleicher Farbton, umgekehrte Helligkeit, und für Text so weit vertieft, dass er auf Weiß trägt. Was sich nicht ableiten lässt, steht an seinem Wert dabei. ========================================================================== */ /* 1.1 Grund und Fläche Umgekehrt, aber nicht gespiegelt: Auf hell ist die **Karte weiß** und der Grund leicht getönt, nicht umgekehrt. Weiße Flächen auf weißem Grund verlieren ihre Kante, und die Kante trägt hier die Ordnung. */ --ground: light-dark(#f4f6fb, #0f1420); /* Seitengrund */ --ground-2: light-dark(#eaeef7, #131a29); /* Panel-Grund, abgesetzte Fläche */ --surface: light-dark(#ffffff, #1a2030); /* Karten, Knöpfe, Eingaben */ --surface-2: light-dark(#e8edf7, #222a3d); /* Hover-Stufe, Toast */ --line: light-dark(#d3dae9, #2a3247); /* Alle Rahmen und Trenner */ /* 1.2 Schrift */ /* 1.2 Schrift **Die helle Fassung ist strenger als die dunkle, und das ist Absicht.** Gemessen am 25.10.2026 über alle Flächen: Jeder einzelne Kontrastbefund der hellen Fassung war **derselbe Token** — `--faint`, 194-mal allein im Gedächtnis. Die erste Ableitung spiegelte die dunkle Fassung getreulich und übernahm damit auch deren Schwäche: Dort trägt `--faint` 3,12:1, und lesbar beginnt bei 4,5:1. > **Eine neue Fassung erbt keine Schwäche, nur weil die alte sie hat.** Hell trägt deshalb drei Stufen, die sich unterscheiden *und* alle über 4,5 liegen (16,3 · 7,6 · 5,2 auf dem Grund). `--muted` musste mitwandern: Wäre nur `--faint` vertieft worden, lägen die beiden schwachen Stufen übereinander, und drei Stufen, von denen zwei gleich aussehen, sind zwei. **Am 26.10.2026 ist die dunkle Fassung nachgezogen** (`Entsch. 215`, offener Punkt 173). Sie trug dieselbe Schwäche, und sie ist die Fassung, die ohne Zutun gilt — eine Lesbarkeit, die nur in der selteneren Fassung stimmt, ist keine. Beide tragen jetzt dieselbe Staffel, gemessen auf dem Seitengrund: | | hell | dunkel | |---|---|---| | `--text` | 16,3 | 16,1 | | `--muted` | 7,6 | 8,3 | | `--faint` | 5,2 | 5,5 | > **Zwei Fassungen desselben Hauses lesen sich gleich gut oder sind > nicht dasselbe Haus.** Auch hier musste `--muted` mitwandern: Eine allein vertiefte schwächste Stufe wäre der mittleren so nahe gekommen, dass aus drei Stufen zwei geworden wären. Die einzige Paarung, die unter 4,5 bleibt, ist `--faint` auf `--surface-2` (4,26) — die Hover-Stufe. Gemessen über neun Flächen kommt sie im Ruhezustand nicht vor; **genannt, nicht verschwiegen.** */ --text: light-dark(#131926, #edf0f7); /* Fließtext */ --muted: light-dark(#474f63, #a6aec2); /* Sekundärtext, inaktive Navigation */ --faint: light-dark(#5f6878, #828ca5); /* Kleinlabels, Versalienmarken */ /* 1.3 Bedeutungsfarben **Der Akzent als Fläche bleibt gleich, als Schrift wird er tiefer.** Das Gold der Marke ist das Gold der Marke; ein hellerer Grund macht daraus keine andere Farbe. Nur taugt genau dieses Gold auf Weiß nicht als Schrift — es trägt dort rund 1,9:1, und lesbar beginnt bei 4,5:1. > **Eine Marke wechselt die Farbe nicht. Aber Schrift, die man nicht > lesen kann, ist keine Marke, sondern ein Fleck.** Deshalb zwei Token statt eines Kompromisses: `--accent` ist die Fläche und bleibt in beiden Fassungen dasselbe Gold, `--accent-text` ist derselbe Farbton vertieft und gilt dort, wo der Akzent **Schrift** ist. [Vorschlag] — welche Flächen heute das eine für das andere benutzen, ist ein eigener Durchgang und keine Nebenwirkung dieser Entscheidung. */ --accent: #e6a94b; /* Marke, aktiver Zustand, primärer Knopf — in beiden gleich */ --accent-text: light-dark(#8a5b0c, #e6a94b); /* der Akzent als Schrift */ --accent-ink: light-dark(#1a1408, #1a1408); /* Schrift auf Akzentfläche — Gold bleibt Gold */ --wortmarke: light-dark(#8a5b0c, #e6a94b); /* Nur die Wortmarke EMPARA */ /* [Gesetzt] 02.10.2026 — Warum --wortmarke denselben Wert doppelt haelt statt var(--accent) zu lesen: Die Erscheinung einer Instanz setzt --accent auf die Farbe des Kunden (Entsch. 127). Ein var(--accent) loeste sich dann mit auf, und die Wortmarke EMPARA stuende in Kundenfarbe. Das widerspricht derselben Entscheidung, die das Kundenlogo in den Nutzerbereich stellt: Das Haus bleibt das Haus, der Kunde ist der Raum darin. Der doppelte Wert ist hier also die Aussage, nicht die Unachtsamkeit. */ --context: light-dark(#1f6f84, #5fb3c9); /* Herkunft und Begründung, Fokusring */ --context-ink: light-dark(#ffffff, #06131a); /* Schrift auf Kontextfläche */ --good: light-dark(#1f7a4d, #6cc08b); /* Positiver Zustand */ --warn: light-dark(#a8411f, #e07a5f); /* Warnender Zustand */ --rec: light-dark(#b02838, #e05f6c); /* Aufnahme — bislang nur in BUILD */ /* [Gesetzt, 12.10.2026, `Entsch. 161`] Der dritte Zustand. Bis dahin kannte das Set zwei: gut und warnend. Das Gedaechtnis hat drei — alles in Ordnung, sieh mal drauf, hier ist Handlungsbedarf —, und zwei Zustaende auf drei Bedeutungen abzubilden heisst, eine davon zu verschweigen. **Derselbe Wert wie `--rec`, und das ist Absicht.** Die Palette fuehrt ein Rot; zwei fast gleiche Rots nebeneinander waeren nicht zu unterscheiden und trotzdem zwei Entscheidungen. Zwei Namen, weil es zwei Rollen sind: `--rec` nimmt auf, `--bad` sagt, dass etwas zu tun ist. Dieselbe Bauart wie `--wortmarke` oben. `--warn` ruecht damit in die mittlere Rolle. Wo es heute als einziger Nicht-Gut-Zustand steht, bleibt es stehen — ein Durchgang durch alle Flaechen waere eine eigene Entscheidung und keine Nebenwirkung dieser. */ --bad: light-dark(#b02838, #e05f6c); /* Handlungsbedarf — dritter Zustand */ /* 1.4 Ergänzungen: im Bestand vorhanden, aber ohne Token [Vorschlag] — Namen und Zuordnung sind neu, die Werte nicht. */ --accent-hover: light-dark(#f3c07a, #f0b65a); /* BUILD: .btn.primary:hover */ --context-deep: light-dark(#17505f, #2b6f80); /* beide: zweiter Halt im Avatar-Verlauf */ --category: light-dark(#6d49a3, #b59ad9); /* vierte Kategorie neben accent/context/good */ /* [Gesetzt] 10.09.2026 — Der Bestand führte zwei Nuancen für dieselbe Rolle: NOW #c58ce0, BUILD #b59ad9. Es gilt der BUILD-Wert: gedämpfter, näher am Grauton der Palette, und im Bestand viermal in mehreren Rollen belegt (Beteiligte, KI-App, Agent, Präsentation) statt einmal in einem Datenfeld. */ /* 1.5 Transparente Auflagen — im Bestand als wiederholte rgba-Literale Der Schleier bleibt in beiden Fassungen **dunkel**: Er verdeckt, und verdecken tut Schatten, nicht Licht. Ein weißer Schleier über einer hellen Fläche nimmt ihr die Kontur, statt sie zurückzusetzen. `--tint-up` dagegen dreht sich um. Der Name sagt *Aufhellung*, gemeint ist *eine Stufe von der Fläche weg* — auf dunklem Grund nach oben, auf hellem nach unten. **Ein Name, der eine Richtung nennt, stimmt nur in einer Welt.** Umbenannt wird er nicht in dieser Runde; wo er steht, steht er richtig. */ --scrim: light-dark(rgba(20, 26, 38, .45), rgba(6, 9, 16, .6)); --veil-strong: light-dark(rgba(255, 255, 255, .94), rgba(15, 20, 32, .92)); --veil: light-dark(rgba(255, 255, 255, .72), rgba(15, 20, 32, .6)); --veil-soft: light-dark(rgba(255, 255, 255, .66), rgba(15, 20, 32, .55)); --tint-up: light-dark(rgba(19, 25, 38, .05), rgba(255, 255, 255, .06)); /* Das Wasserzeichen in der Fläche (`Entsch. 213`). Auf dunkel fast schwarz, wie es entworfen wurde; auf hell ein Hauch des Textes — *schwarz auf schwarz* hat auf Weiß kein Gegenstück, und dieselbe Form in Schwarz wäre dort kein Wasserzeichen, sondern ein Bild. */ --wasserzeichen: light-dark(rgba(19, 25, 38, .06), rgba(0, 0, 0, .85)); --tint-accent-weak: light-dark(rgba(138, 91, 12, .07), rgba(230, 169, 75, .07)); --tint-accent: light-dark(rgba(138, 91, 12, .12), rgba(230, 169, 75, .12)); /* 1.6 Zustandsrahmen — Rahmen in der Bedeutungsfarbe, halbdeckend. Auf hell dichter als auf dunkel: Ein Rahmen mit 40 % Deckung verschwindet auf Weiß, weil darunter nichts ist, wogegen er steht. */ --border-good: light-dark(rgba(31, 122, 77, .55), rgba(108, 192, 139, .4)); --border-warn: light-dark(rgba(168, 65, 31, .55), rgba(224, 122, 95, .4)); --border-context: light-dark(rgba(31, 111, 132, .55), rgba(95, 179, 201, .4)); --border-accent: light-dark(rgba(138, 91, 12, .6), rgba(230, 169, 75, .5)); --border-rec: light-dark(rgba(176, 40, 56, .6), rgba(224, 95, 108, .5)); /* ========================================================================== 2. TYPOGRAFIE ========================================================================== */ /* 2.1 Familien — aus dem Bestand, zeichengleich in beiden Demonstratoren. Die Familien werden in Abschnitt 0 lokal gebunden. Die Fallbacks bleiben stehen, damit die Oberfläche auch dann trägt, wenn eine Datei fehlt. */ --display: "Fraunces", "Iowan Old Style", Georgia, serif; --body: "Manrope", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; /* 2.2 Größenskala — [Gesetzt] 11.09.2026 Bestand: 14 Werte in NOW, 23 in BUILD, teils in halben Pixeln. Elf Schritte. Halbe Pixel gibt es nicht mehr; damit fällt auch die Grundschriftgröße der Steuerzentrale von 14.5px auf 14px. Token Wert Bestandswerte, die darauf fallen ------------------------------------------------ 3xs 10px 9 · 9.5 · 10 2xs 11px 10.5 · 11 xs 12px 11.5 · 12 · 12.5 sm 13px 13 · 13.5 md 14px 14 · 14.5 lg 15px 15 xl 17px 16 · 17 2xl 20px 18 · 19 · 20 3xl 24px 22 · 24 · 26 4xl 30px 28 · 30 5xl 40px 40 */ --text-3xs: 10px; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 15px; --text-xl: 17px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 30px; --text-5xl: 40px; /* 2.3 Schnitte — aus dem Bestand, unverändert */ --weight-regular: 400; --weight-medium: 500; /* Display-Überschriften */ --weight-semibold: 600; /* Bedienelemente */ --weight-bold: 700; /* nur Avatar-Initialen */ /* 2.4 Laufweite */ --tracking-tight: .04em; /* Wortmarke */ --tracking-wide: .06em; /* Ebenenschalter */ --tracking-caps: .1em; /* Versalien-Kleinlabel; Bestand .08em und .1em */ /* 2.5 Zeilenhöhe Bestand: 1 · 1.15 · 1.25 · 1.45 · 1.5 · 1.6 · 1.7 → vier Schritte */ --leading-flat: 1; /* 1 */ --leading-tight: 1.15; /* 1.15 · 1.25 */ --leading-normal: 1.5; /* 1.45 · 1.5 */ --leading-loose: 1.7; /* 1.6 · 1.7 */ /* ========================================================================== 3. ABSTAND — [Gesetzt] 11.09.2026 Bestand: über zwanzig Werte zwischen 1px und 80px, ohne Grundmaß. Zwölf Schritte. Token Wert Bestandswerte, die darauf fallen ---------------------------------------------- 3xs 2px 1 · 2 · 3 2xs 4px 4 · 5 xs 6px 6 · 7 sm 8px 8 · 9 · 10 · 11 md 12px 12 · 13 · 14 lg 16px 16 · 18 · 20 xl 24px 22 · 24 · 26 · 28 2xl 32px 30 · 32 · 34 · 36 3xl 40px 38 · 40 4xl 48px 44 · 48 5xl 64px 60 6xl 80px 80 Gezählt über alle drei Demonstrator-Quellen (gap, padding, margin zusammen) steht 10px mit 51 Stellen an der Spitze, vor 8px (43), 6px (37), 12px (29) und 14px (26). Die Verschiebung 10px → 8px trifft damit den meistbenutzten Abstand überhaupt, zusammen mit 14px → 12px sind es 77 Stellen. Entschieden am 11.09.2026: 10px bekommt keinen eigenen Schritt. Der Grund ist nicht das Raster, sondern die Entstehung der Streuung — wer 8, 10 und 12 zur Wahl hat, greift wieder nach Gefühl. Die frühere Fassung dieses Kommentars nannte 8px als häufigsten Bestandswert; das galt nur für gap allein. Sichtbar gemacht in design-system/Skalenvergleich.html. ========================================================================== */ --space-3xs: 2px; --space-2xs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 64px; --space-6xl: 80px; /* ========================================================================== 4. RADIUS — [Gesetzt] 11.09.2026 Bestand: 2 · 3 · 4 · 5 · 6 · 7 · 8 · 10 · 12 · 14 · 16 · 18 · 999px · 50% Sechs Schritte plus Pille und Kreis. Die zweite 14 → 12-Verschiebung liegt hier: NOW rundet Karten mit 14px, BUILD und OPERATE mit 12px; es gilt 12px. Token Wert Bestandswerte Verwendung im Bestand --------------------------------------------------------------- hair 2px 2 · 3 Fortschrittsbalken, Marken xs 4px 4 · 5 kbd, kleine Marken sm 6px 6 · 7 kleine Flächen md 10px 8 · 10 Knopf (BUILD), Toast (NOW) lg 12px 12 · 14 Karte, Block — BUILD-Normalwert xl 16px 16 · 18 große Flächen pill 999px 999px Ebenenschalter, Knopf (NOW), Pille circle 50% 50% Avatar, Schließen-Knopf, Punkt ========================================================================== */ --radius-hair: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --radius-circle: 50%; /* ========================================================================== 5. ELEVATION — [Gesetzt] 11.09.2026 Bestand: fünf verschiedene Schatten plus zwei Leuchten. Drei Höhenstufen, getrennt von Kontur und Leuchten. ========================================================================== */ /* Auf hell deutlich leichter. Derselbe Schatten, der auf dunklem Grund Tiefe macht, sieht auf Weiß aus wie Schmutz — dort trägt die Höhe die Kante, nicht die Schwärze. */ --elevation-0: none; --elevation-1: light-dark(0 2px 8px rgba(19, 25, 38, .08), 0 10px 30px rgba(0, 0, 0, .35)); --elevation-2: light-dark(0 6px 18px rgba(19, 25, 38, .12), 0 16px 40px rgba(0, 0, 0, .45)); --elevation-3: light-dark(0 12px 32px rgba(19, 25, 38, .16), 0 24px 60px rgba(0, 0, 0, .55)); /* Kontur und Leuchten sind keine Höhe, sondern Auszeichnung. Sie werden neben eine Elevation gesetzt, nicht statt ihr. */ --ring-accent: 0 0 0 1px var(--border-accent); --glow-context: 0 0 10px var(--context); --glow-good: 0 0 8px var(--good); /* Der gestapelte Linienschatten aus BUILD (0 6px 0 var(--faint), 0 12px 0 var(--faint)) ist ein Zeichenmittel für einen Papierstapel, keine Elevation. Er bleibt lokal in der Komponente. */ /* ========================================================================== 6. MOTION — [Gesetzt] 11.09.2026 ========================================================================== */ /* 6.1 Kurve — im Bestand in beiden Dateien dieselbe */ --ease: cubic-bezier(.2, .7, .2, 1); /* 6.2 Dauer Bestand: .15 · .2 · .3 · .4 · .45 · .5 · .55 · .6s → fünf Schritte */ --duration-instant: 150ms; /* .15s — Hover, Aktiv */ --duration-quick: 200ms; /* .2s — Fläche, Rahmen */ --duration-moderate: 300ms; /* .3s — Ein- und Ausblenden */ --duration-panel: 450ms; /* .4s · .45s — Panel, Schleier */ --duration-calm: 600ms; /* .5s · .55s · .6s — Kachelwechsel */ /* 6.3 Rollen — die Varianten in Abschnitt 7 überschreiben diese */ --motion-ui: var(--duration-quick); --motion-panel: var(--duration-panel); /* ========================================================================== 7. VARIANTEN — [Vorschlag] Zwei benannte Erscheinungen derselben Marke, keine Abweichung. Entschieden am 10.09.2026: NOW ist Lean-back-Oberfläche, BUILD ist Steuerzentrale. Was sich unterscheidet, ist hier benannt und begrenzt; alles andere bleibt gemeinsam. Anwendung: oder "control-room" ========================================================================== */ /* Voreinstellung: Steuerzentrale (der dichtere, häufigere Fall) */ --font-size-base: var(--text-md); --top-position: sticky; --top-background: var(--ground); --top-border: 1px solid var(--line); --top-height: 64px; /* Strukturmaße */ --rail-width: 240px; /* Seitenleiste; Bestand 240px BUILD, 250px NOW */ --panel-width: 540px; /* Bestand 520px NOW, 540px BUILD */ --avatar-size: 32px; --control-size: 36px; /* Schließen-Knopf */ --breakpoint-wide: 980px; --breakpoint-narrow: 640px; } /* 7.1 Lean-back — die gelesene Oberfläche (NOW) Langsamer, ohne Seitenlauf, Kopfleiste liegt über dem Inhalt. */ :root[data-variant="lean-back"] { --font-size-base: var(--text-lg); /* 15px */ --motion-ui: var(--duration-calm); --top-position: fixed; --top-background: linear-gradient(var(--ground) 40%, transparent); --top-border: 0; } /* 7.2 Control-room — die bediente Oberfläche (BUILD) Kürzer, Seite scrollt, Kopfleiste klebt mit Trennlinie. */ :root[data-variant="control-room"] { --font-size-base: var(--text-md); /* 14px, Bestand 14.5px */ --motion-ui: var(--duration-quick); --top-position: sticky; --top-background: var(--ground); --top-border: 1px solid var(--line); } /* ========================================================================== 8. ZUGÄNGLICHKEIT ========================================================================== */ :root { --focus-ring: 2px solid var(--context); --focus-offset: 3px; } /* Im Bestand respektieren beide Demonstratoren diese Einstellung. Als Token heißt das: jede Dauer fällt auf null. */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-quick: 0ms; --duration-moderate: 0ms; --duration-panel: 0ms; --duration-calm: 0ms; } }