/* 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; } :root { /* ========================================================================== 1. FARBE — [Vorschlag], Werte aus dem Bestand übernommen ========================================================================== */ /* 1.1 Grund und Fläche */ --ground: #0f1420; /* Seitengrund */ --ground-2: #131a29; /* Panel-Grund, abgesetzte Fläche */ --surface: #1a2030; /* Karten, Knöpfe, Eingaben */ --surface-2: #222a3d; /* Hover-Stufe, Toast */ --line: #2a3247; /* Alle Rahmen und Trenner */ /* 1.2 Schrift */ --text: #edf0f7; /* Fließtext */ --muted: #8f98b0; /* Sekundärtext, inaktive Navigation */ --faint: #5b647c; /* Kleinlabels, Versalienmarken */ /* 1.3 Bedeutungsfarben */ --accent: #e6a94b; /* Marke, aktiver Zustand, primärer Knopf */ --accent-ink: #1a1408; /* Schrift auf Akzentfläche */ --wortmarke: #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: #5fb3c9; /* Herkunft und Begründung, Fokusring */ --context-ink: #06131a; /* Schrift auf Kontextfläche */ --good: #6cc08b; /* Positiver Zustand */ --warn: #e07a5f; /* Warnender Zustand */ --rec: #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: #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: #f0b65a; /* BUILD: .btn.primary:hover */ --context-deep: #2b6f80; /* beide: zweiter Halt im Avatar-Verlauf */ --category: #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 */ --scrim: rgba(6, 9, 16, .6); /* Schleier über der Bühne, mit blur(4px) */ --veil-strong: rgba(15, 20, 32, .92); --veil: rgba(15, 20, 32, .6); --veil-soft: rgba(15, 20, 32, .55); --tint-up: rgba(255, 255, 255, .06); /* leichte Aufhellung auf dunkler Fläche */ --tint-accent-weak: rgba(230, 169, 75, .07); --tint-accent: rgba(230, 169, 75, .12); /* 1.6 Zustandsrahmen — Rahmen in der Bedeutungsfarbe, halbdeckend */ --border-good: rgba(108, 192, 139, .4); --border-warn: rgba(224, 122, 95, .4); --border-context: rgba(95, 179, 201, .4); --border-accent: rgba(230, 169, 75, .5); --border-rec: 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. ========================================================================== */ --elevation-0: none; --elevation-1: 0 10px 30px rgba(0, 0, 0, .35); /* NOW: Nachbarkachel */ --elevation-2: 0 16px 40px rgba(0, 0, 0, .45); /* BUILD: Toast, Panel */ --elevation-3: 0 24px 60px rgba(0, 0, 0, .55); /* NOW: aktive Kachel */ /* 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; } }