/* ═══════════════════════════════════════════════════════════════════════════ BLUE HORIZON DESIGN SYSTEM — tokens.css Version: 0.1.5 · Build: 2026-09-29 0.1.5 — Zwei Zeichen, die seit dem ersten Tag falsch standen. Beide waren unsichtbar, weil CSS an dieser Stelle nicht meckert, sondern schweigend etwas anderes tut. Zeile 92: --bh-indigo-200 endete ohne Semikolon. Der Wert einer Variablen läuft bis zum nächsten Semikolon — Zeilenumbrüche zählen nicht. Also bekam --bh-indigo-200 den Wert „#B4B9FF --bh-indigo-300: #8B93FF", und --bh-indigo-300 wurde NIE erklärt. Darüber starben --bh-color-accent, --bh-focus-color und --bh-color-accent-bright: 151 Deklarationen im Team Hub, rund 94 im Ticketsystem, darunter JEDER Fokusrahmen beider Projekte. Gefunden erst am 2026-09-29, an drei Stichpunkten im Hub, denen der Haken fehlte. Warum es so lange hielt: von sieben Akzent-Token sind fünf heil (-strong, -hover, -active, -soft, -overlay). Flächen behielten ihr Indigo, nur Schrift, Rahmen und Fokus verloren es. Ein halb kaputter Akzent fällt schwerer auf als ein ganz fehlender. Eingeführt hat die Zeile ausgerechnet 0.1.4 — die Korrektur eines Kontrastfehlers hat den Akzent erschlagen. Eine Änderung, die eine Farbe verbessert, ist keine Änderung, die man ungeprüft ansieht. Zeile 394: ein Kommentar im Kommentar. CSS-Kommentare schachteln nicht, das innere Endezeichen schloss den Block aus Zeile 386 — und beim Schreiben DIESES Eintrags ist es mir prompt wieder passiert, weil ich das Zeichenpaar zitieren wollte. Es darf hier nicht vorkommen, auch nicht in Anführungszeichen. Ab Zeile 395 las der Browser den Platzhalter-Pseudocode als echtes CSS und verschluckte beim Aufräumen den nächsten Block — @media (prefers-reduced-motion: reduce) am Dateiende. Wer Animationen abgeschaltet hatte, bekam sie trotzdem. Jetzt runde Klammern statt eines zweiten Kommentars. Beides ist derselbe Satz: eine Datei muss man lesen wie ein Parser, nicht wie eine Liste von Zeilen. Ein zeilenweises grep nach „--bh-indigo-300:" findet Zeile 93 und meldet die Variable als vorhanden — das Gegenteil der Wahrheit. Siehe MIGRATION.md §11. 0.1.4 — Zwei Farbkorrekturen, beide aus derselben Ursache: ein Token trug zwei Bedeutungen, und auf dunklem Grund zeigen sie in verschiedene Richtungen. --bh-color-accent-bright (neu, --bh-indigo-200 #B4B9FF) --bh-color-accent-strong war am Primärbutton eine FLÄCHE und an sechs Stellen eine SCHRIFTFARBE. Als Fläche heißt „kräftiger" dunkler; als Schrift auf dunklem Grund heißt es heller. Die sechs Textstellen kamen deshalb auf 2,78:1 — ein Link wurde beim Überfahren blasser statt deutlicher. Jetzt zwei Token (DESIGN.md §0b); accent-strong ist nur noch Fläche. --bh-neutral-400 #71717A → #8E8E97 Als --bh-text-muted hielt der alte Wert nur 3,70:1. Siehe dort. 0.1.3 — --bh-text-2xs (11px) als siebte Schriftstufe. Sie war im Bestand bereits die meistgewählte Größe unterhalb von xs, nur ohne Namen. 0.1.2 — Vier Ergänzungen für Schwebendes, alle aus der Vermessung der Forum-Leiste (BACKLOG: „Die Pill-Navbar"): --bh-radius-2xl fünfte Radiusstufe, 20px --bh-shadow-4 vierte Elevationsstufe: schwebt über statt liegt auf --bh-surface-glass durchlässige Fläche, aus --bh-surface-1 abgeleitet --bh-blur-glass die Unschärfe dahinter, an einer Stelle 0.1.1 — Aufhellungen als eigene Skala: --bh-wash-1/2/3 (Abschnitt 1b). --bh-surface-hover ist jetzt die mittlere Stufe. Anlass waren zehn rohe rgba() in der project.css des ersten Projekts, von denen acht längst ein Token hatten und zwei eine echte Lücke waren. Build: 2026-09-13 Basis: FLX-DESIGN Skill-Assets (app.css / forms.css) + bluehorizonrp.com Herkunft: konsolidiert aus 11 Projekten, siehe TOKEN-MAPPING.md VENDORED — READ-ONLY. Diese Datei wird in Projekte kopiert und dort NIE bearbeitet. Projekt- spezifisches gehört ausschließlich in die projekteigene project.css, die nach dem Designsystem geladen wird. Wer hier hineinschreibt, erzeugt genau die Drift, die dieses System verhindern soll. ZWEI EBENEN Ebene 1 Primitive --bh-indigo-600, --bh-neutral-800 … Rohwerte. Werden NUR in Ebene 2 referenziert. Ebene 2 Semantisch --bh-color-accent, --bh-surface-1, --bh-text-muted … Komponenten benutzen ausschließlich diese Tokens. Eine Komponente, die einen Primitiv oder einen rohen Hex-Wert benutzt, ist falsch gebaut. Das ist die einzige Regel, die dieses Datei-Layout erzwingt. DARK-FIRST Die semantische Ebene beschreibt das dunkle Thema. Ein helles Thema wird später ausschließlich durch Überschreiben derselben semantischen Tokens unter [data-theme="light"] ergänzt — siehe Abschnitt 9. Primitive und alle nicht-farblichen Skalen bleiben dabei unberührt. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── EBENE 1 · PRIMITIVE Rohwerte ohne Bedeutung. Nicht in Komponenten benutzen. ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── Neutrale Rampe ────────────────────────────────────────────────────── Trägt Flächen, Text und Rahmen. Alle Werte stammen aus den Skill-Assets bzw. bluehorizonrp.com/bh_assets — keine neu erfundenen Stufen. */ --bh-neutral-50: #FAFAFA; --bh-neutral-200: #D4D4D8; --bh-neutral-300: #A1A1AA; /* 2026-09-21 von #71717A aufgehellt. Der alte Wert hielt als --bh-text-muted nur 3,70:1 auf der Karte und 3,08:1 auf --bh-surface-3 — und dort steht er wirklich: .bh-table thead th trägt beides. #8E8E97 ist der kleinste Wert im Muster der Leiter (Blau = Rot + 9), der 4,5:1 auf ALLEN drei Flächen hält: Karte 5,51 · Grund 5,81 · erhöht 4,59. Der Abstand zu --bh-neutral-300 wird dadurch enger (1,27:1 statt 1,89:1). Das ist der Preis: eine Stufe, die niemand lesen kann, ist als Abstufung nichts wert. */ --bh-neutral-400: #8E8E97; --bh-neutral-600: #3F3F46; --bh-neutral-700: #27272A; --bh-neutral-800: #17171A; --bh-neutral-900: #111113; --bh-neutral-950: #0A0A0A; /* ── Indigo — die Markenfarbe ──────────────────────────────────────────── Ersetzt acht parallele Akzentsysteme. Siehe TOKEN-MAPPING.md §2. */ --bh-indigo-200: #B4B9FF; /* Akzenttext im Hover */ --bh-indigo-300: #8B93FF; /* hell, auf dunklem Grund lesbar */ --bh-indigo-500: #5257F3; /* Hover der Primäraktion */ --bh-indigo-600: #3E43F0; /* Primäraktion, CTA */ --bh-indigo-700: #2E33D8; /* gedrückt */ /* ── Zweit- und Drittakzent — nur Diagramme und Kategoriefarben ───────── */ --bh-violet-600: #7A00DF; --bh-cyan-700: #007CBA; /* ── Status ────────────────────────────────────────────────────────────── Je Rolle genau ein Wert. Im Bestand waren es 4 Grün, 5 Gelb, 3 Rot. */ --bh-green-500: #22C55E; --bh-amber-500: #FCB900; --bh-red-500: #CF2E2E; --bh-red-400: #E04141; /* Hover auf Rot */ /* ── Discord — reserviert ──────────────────────────────────────────────── Ausschließlich für Discord-Aktionen (Login, Einladung, Verknüpfung). Nie als allgemeine Akzentfarbe. Siehe TOKEN-MAPPING.md §3. */ --bh-blurple-500: #5865F2; --bh-blurple-600: #4752C4; /* ── Absolut ───────────────────────────────────────────────────────────── */ --bh-white: #FFFFFF; } /* ─────────────────────────────────────────────────────────────────────────── EBENE 2 · SEMANTISCH — dunkles Thema Das hier benutzen Komponenten. Nichts anderes. ─────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: dark; /* ── 1. Flächen ─────────────────────────────────────────────────────────── */ --bh-surface-1: var(--bh-neutral-800); /* Karte, Input, Sidebar, Modal, Toast */ --bh-surface-2: var(--bh-neutral-900); /* Seitenhintergrund */ --bh-surface-3: var(--bh-neutral-700); /* Tabellenkopf, Hover, Chip, Spur */ --bh-surface-hover: var(--bh-wash-2); /* = mittlere Aufhellung, s. 1b */ --bh-surface-overlay: rgba(0, 0, 0, 0.70); /* Backdrop hinter Modal und Schublade */ /* Glas: eine Fläche, die etwas durchlässt. KEIN Sonderfall der Leiste — Material, das jedes Element braucht, das über Inhalt schwebt statt auf ihm zu liegen: Pill-Navbar, Schublade, Dialogpanel. Über color-mix aus --bh-surface-1 abgeleitet, damit ein Themenwechsel sie mitnimmt; eine rohe rgba() wäre die zweite Wahrheit neben der Fläche (DESIGN.md §0). Ohne die Unschärfe dahinter ist Glas nur eine blasse Fläche — die beiden gehören zusammen und tragen deshalb denselben Namensteil. */ --bh-surface-glass: color-mix(in srgb, var(--bh-surface-1) 85%, transparent); --bh-blur-glass: 12px; /* ── 1b. Aufhellungen ─────────────────────────────────────────────────── Eine Aufhellung ist NICHT eine Fläche. Eine Fläche deckt: --bh-surface-3 ersetzt, was darunter liegt. Eine Aufhellung lässt durch — sie hebt an, was schon da ist, und funktioniert deshalb über beliebigem Grund: über einer Karte, über einer Tabellenzeile, über einer fremden Farbe. Das ist der Grund, warum eine weitere Fläche diese Fälle nicht löst. Drei Stufen reichen; eine vierte wäre nicht mehr unterscheidbar: 1 kaum sichtbar Zebrastreifen, Wochenendspalte, ruhig markierter Bereich — hebt ab, ohne etwas zu behaupten 2 spürbar Hover auf Zeile, Kachel, Zusammenklappkopf (trägt --bh-surface-hover) 3 deutlich Ring um beliebige Farbpunkte, Trennung über einer Fremdfarbe — dort, wo Rahmenfarben untergehen Im hellen Thema kehrt sich die Richtung um: dort sind es Abdunklungen aus Schwarz. Die Namen bleiben, die Werte wechseln — siehe Abschnitt 9. */ --bh-wash-1: rgba(255, 255, 255, 0.025); --bh-wash-2: rgba(255, 255, 255, 0.05); --bh-wash-3: rgba(255, 255, 255, 0.18); /* ── 2. Text ────────────────────────────────────────────────────────────── */ --bh-text-primary: var(--bh-neutral-50); /* Überschriften, Werte, aktive Zeile */ --bh-text-secondary: var(--bh-neutral-200); /* Fließtext, Standardfarbe des body */ --bh-text-tertiary: var(--bh-neutral-300); /* Untertitel, Metadaten, ruhende Nav */ --bh-text-muted: var(--bh-neutral-400); /* Platzhalter, Deaktiviertes, Hinweis */ --bh-text-on-accent: var(--bh-white); /* Text auf Indigo */ --bh-text-on-solid: var(--bh-neutral-950); /* Text auf heller Solid-Fläche */ /* ── 3. Rahmen ──────────────────────────────────────────────────────────── */ --bh-border-subtle: var(--bh-neutral-700); /* Standardrahmen */ --bh-border-strong: var(--bh-neutral-600); /* Hover, Toastrahmen, aktive Trennung */ /* Dasselbe Material wie eine Aufhellung, aber in der Rolle eines Rahmens — deshalb ein eigener Name und ein eigener Wert. Nicht mit --bh-wash-3 zusammenlegen: der Rahmen darf kräftiger sein als die Fläche daneben. */ --bh-border-soft: rgba(255, 255, 255, 0.22); /* Ghost-Button */ /* ── 4. Akzent ──────────────────────────────────────────────────────────── */ --bh-color-accent: var(--bh-indigo-300); /* Icons, aktive Nav, Fokus, Badge */ /* FLÄCHE. Die Leiter geht nach unten — auf einer gefüllten Fläche heißt „kräftiger" dunkler, und die Schrift darauf ist --bh-text-on-accent. */ --bh-color-accent-strong: var(--bh-indigo-600); /* Primärbutton, CTA */ --bh-color-accent-hover: var(--bh-indigo-500); /* Primärbutton :hover */ --bh-color-accent-active: var(--bh-indigo-700); /* Primärbutton :active */ /* SCHRIFT. Die Leiter geht nach OBEN. Auf dunklem Grund ist ein Akzent kräftiger, wenn er heller wird — genau umgekehrt zur Fläche. Sechs Stellen im DS nahmen dafür --bh-color-accent-strong (#3E43F0) und erreichten als Schrift 2,78:1: ein Link wurde beim Überfahren BLASSER statt deutlicher, und fiel dabei unter jede Schwelle. Fläche und Schrift sind zwei Bedeutungen, also zwei Token (DESIGN.md §0b). #B4B9FF hält 9,65:1 auf --bh-surface-1. */ --bh-color-accent-bright: var(--bh-indigo-200); /* Akzenttext :hover/:active */ --bh-color-accent-soft: rgba(139, 147, 255, 0.15); /* Fläche hinter Akzenttext */ --bh-color-accent-overlay: rgba(62, 67, 240, 0.18); /* Icon-Box, aktiver Nav-Punkt */ /* Helle Solid-Fläche — die primäre Aktion im FLX-Bestand. Bleibt als eigene Rolle erhalten, weil sie kein Indigo ist. */ --bh-color-solid: var(--bh-neutral-50); --bh-color-solid-hover: var(--bh-neutral-200); --bh-color-solid-active: var(--bh-neutral-300); /* Nur Diagramme und Kategoriefarben. Nie für Bedienelemente. */ --bh-color-accent-2: var(--bh-violet-600); --bh-color-accent-3: var(--bh-cyan-700); /* ── 5. Status ──────────────────────────────────────────────────────────── */ --bh-color-success: var(--bh-green-500); --bh-color-success-soft: rgba(34, 197, 94, 0.15); --bh-color-warning: var(--bh-amber-500); --bh-color-warning-soft: rgba(252, 185, 0, 0.15); --bh-color-danger: var(--bh-red-500); --bh-color-danger-hover: var(--bh-red-400); --bh-color-danger-soft: rgba(207, 46, 46, 0.15); /* Abstufungen entstehen ausschließlich über Transparenz derselben Farbe: Fläche rgba(, .15), Rahmen und Text in der vollen Farbe. Neue Hex-Werte für Zwischenstufen sind nicht vorgesehen. */ /* ── 6. Discord — reserviert ────────────────────────────────────────────── */ --bh-color-discord: var(--bh-blurple-500); --bh-color-discord-hover: var(--bh-blurple-600); --bh-text-on-discord: var(--bh-white); /* ── 7. Fokus ───────────────────────────────────────────────────────────── */ /* Im Bestand vier verschiedene Ringe. Ab hier genau einer. */ --bh-focus-color: var(--bh-color-accent); --bh-focus-width: 2px; --bh-focus-offset: 2px; --bh-focus-ring: 0 0 0 3px rgba(139, 147, 255, 0.20); --bh-focus-ring-danger: 0 0 0 3px rgba(207, 46, 46, 0.22); } /* ─────────────────────────────────────────────────────────────────────────── EBENE 2 · SEMANTISCH — themenunabhängig Maße, Skalen, Bewegung. Ändern sich beim Themenwechsel nicht. ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── 8a. Typografie ─────────────────────────────────────────────────────── */ /* Geist ist die kanonische Schrift des FLX-Designs. Belegt im Bestand: team.bluehorizonrp.com lädt Geist 400/500/600/700 und Geist Mono 400 (includes/layout.php:142). Ausgeliefert wird sie vom Designsystem selbst über fonts.css — die muss VOR dieser Datei geladen werden. Inter steht als zweite Stufe im Stack, weil 9 der 11 Projekte sie heute laden (bluehorizonrp.com/bh_includes/header.php). Ein noch nicht migriertes Projekt fällt damit auf Inter zurück statt auf die Systemschrift. Nach abgeschlossener Migration kann Inter raus. */ --bh-font-sans: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --bh-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Sechs Stufen. Mehr gibt es nicht. Verloren gegenüber dem Bestand: 11px (→ xs) und 16px (→ md bzw. lg). */ /* Mikrobeschriftung: Zweitzeile unter einem Namen, versale Labels, Beschriftung in Rasterzellen. NICHT für Text, den jemand liest — für Text, der etwas benennt. Abgrenzung zu --bh-text-xs, damit die nächste Instanz nicht rät: xs (12px) SAGT etwas — Hinweis, Tabellenkopf, Nav-Label, Badge. Steht für sich und wird gelesen. 2xs (11px) BENENNT etwas — die Zweitzeile unter einem Namen, das Wochentagskürzel über einer Spalte, die Rollenmarke. Steht immer NEBEN oder UNTER dem, worauf es sich bezieht. Die Stufe war am 2026-09-18 bereits da, nur nicht benannt: 14 Stellen im ersten Projekt trugen 11px, die zehn Abweichungen auf 10px waren fünfmal von einem engen Behälter erzwungen und fünfmal unbeabsichtigt (ein 10px-Geschwister neben einem 11px-Geschwister derselben Aufgabe). Kleiner geht nicht. Wo eine Ziffer in einen 16px-Kreis passen muss, ist das Geometrie und keine Stufe — solche Werte tragen ihre Begründung neben sich, wie die Mikroabstände. */ --bh-text-2xs: 11px; /* Mikrobeschriftung — siehe oben */ --bh-text-xs: 12px; /* Hinweis, Tabellenkopf, Nav-Label, Badge */ --bh-text-sm: 13px; /* Fließtext — Standardgröße des body */ --bh-text-md: 14px; /* Label, h4, Button in Großform */ --bh-text-lg: 20px; /* h3, Kartentitel */ --bh-text-xl: 32px; /* h2, Seitentitel */ --bh-text-2xl: 48px; /* h1 — nur Marketingseiten */ --bh-leading-tight: 1.2; /* Überschriften */ --bh-leading-normal: 1.5; /* Fließtext: 13px → 19.5px */ --bh-weight-regular: 400; --bh-weight-medium: 500; --bh-weight-semibold: 600; --bh-weight-bold: 700; /* Nur diese vier. `bold` und `normal` als Schlüsselwörter sind unzulässig. */ --bh-tracking-caps: 0.06em; /* Tabellenkopf, Nav-Label, versal */ --bh-tracking-tight: -0.02em; /* h1 und h2 */ /* ── 8b. Abstände ───────────────────────────────────────────────────────── */ /* Sechs Stufen auf 4px-Basis. Die Begrenzung ist der Zweck. Verloren gegenüber dem Bestand: 48px und 64px — siehe --bh-section-gap. */ --bh-space-1: 4px; --bh-space-2: 8px; --bh-space-3: 12px; --bh-space-4: 16px; --bh-space-5: 24px; --bh-space-6: 32px; /* ── 8c. Radius ─────────────────────────────────────────────────────────── */ /* Fünf Stufen. Eindeutig neu benannt, weil --r-md (6px) und --radius-md (8px bzw. 10px) im Bestand denselben Namen für drei Werte tragen. */ --bh-radius-sm: 4px; /* Fokusring, Mini-Elemente */ --bh-radius-md: 6px; /* Badge, sekundärer Button, Hover-Zeile */ --bh-radius-lg: 8px; /* Button, Input, Select, Icon-Box, Nav-Punkt */ --bh-radius-xl: 10px; /* Karte, Modal, Toast, Tabellenrahmen, Panel */ --bh-radius-2xl: 20px; /* Schwebendes: Pill-Navbar, freistehende Leisten */ /* Formwerte, keine Skalenstufen — deshalb außerhalb der Vier. */ --bh-radius-pill: 999px; --bh-radius-round: 50%; /* ── 8d. Elevation ──────────────────────────────────────────────────────── */ /* Vier Stufen. Flächen, Sektionen und Tabellenzeilen bekommen nie Schatten. Die vierte ist keine größere dritte, sondern eine andere Aufgabe: 1 bis 3 sagen „liegt auf", 4 sagt „schwebt über". Der weiche, weit gestreute Schatten trennt das Element vom Grund, statt es darauf abzusetzen; der inset-Ring gibt ihm die Kante, die ihm ohne Auflage fehlt. */ --bh-shadow-1: rgba(0, 0, 0, 0.30) 0 1px 2px 0; /* Karte */ --bh-shadow-2: rgba(0, 0, 0, 0.40) 0 1px 3px 0, rgba(0, 0, 0, 0.30) 0 1px 2px -1px; /* Button */ --bh-shadow-3: rgba(0, 0, 0, 0.50) 0 4px 8px 0, rgba(0, 0, 0, 0.30) 0 2px 4px -1px; /* Modal, Toast, Panel */ --bh-shadow-4: rgba(0, 0, 0, 0.30) 0 8px 32px 0, inset 0 0 0 1px rgba(255, 255, 255, 0.03); /* Schwebendes */ /* ── 8e. Bedienelemente ─────────────────────────────────────────────────── */ /* EIN Wert für Button, Input, Select und Textarea-Zeile. Im Bestand wichen Button- und Feldhöhe in fünf Projektgruppen voneinander ab — das endet hier. Wer eine Komponente baut, die nicht auf dieser Höhe sitzt, baut falsch. */ --bh-control-height: 36px; /* Derselbe Regler auf Touch-Geräten (≤767px). Keine zweite Größenoption, sondern dieselbe Komponente unter einer Media Query. */ --bh-control-height-touch: 44px; --bh-control-padding-x: 14px; /* Button */ --bh-field-padding-x: 12px; /* Input, Select */ --bh-icon-size: 16px; /* Icon im Button */ --bh-icon-size-nav: 18px; /* Icon in der Navigation */ /* Badge — bewusste Abweichung, siehe TOKEN-MAPPING.md §5. */ --bh-badge-height: 24px; /* ── 8f. Layout ─────────────────────────────────────────────────────────── */ --bh-sidebar-width: 248px; --bh-topbar-height: 56px; --bh-content-max: 1440px; --bh-section-gap: 48px; /* Abstand zwischen Sektionen — Layoutmaß, bewusst außerhalb der Abstandsskala */ /* ── 8g. Bewegung ───────────────────────────────────────────────────────── */ --bh-transition: 0.15s ease; /* Farbe, Rahmen */ --bh-transition-enter: 0.2s cubic-bezier(0.16, 1, 0.3, 1); /* auf-/zufahren */ /* Nichts bewegt sich länger als 260ms. */ /* ── 8h. Ebenen ─────────────────────────────────────────────────────────── */ --bh-z-topbar: 50; --bh-z-scrim: 90; --bh-z-sidebar: 100; --bh-z-modal: 300; --bh-z-toast: 500; /* ── 8i. Haltepunkte (Dokumentation) ────────────────────────────────────── */ /* In Media Queries nicht als Variable nutzbar — hier als verbindliche Referenz, damit 768/767 und 1024/1023 nicht weiter nebeneinander stehen. ≥1024px Sidebar fest, Raster voll ≤1023px Raster zweispaltig, Inhalt --bh-space-5 ≤767px Sidebar wird Schublade, Raster einspaltig, Touch-Höhen ≤639px Panels als Sheet, Toast über volle Breite Es gelten ausschließlich diese vier Grenzen. */ } /* ─────────────────────────────────────────────────────────────────────────── 9. HELLES THEMA — Platzhalter Nicht ausformuliert. Wenn es kommt, wird ausschließlich dieser Block gefüllt: dieselben semantischen Namen, andere Werte. Primitive, Abstände, Radien, Schriftgrößen, Schatten und Maße bleiben unangetastet. [data-theme="light"] { --bh-surface-1: …; --bh-surface-2: …; --bh-surface-3: …; --bh-wash-1: …; --bh-wash-2: …; --bh-wash-3: …; (aus Schwarz, nicht Weiß) --bh-text-primary: …; --bh-text-secondary: …; … --bh-border-subtle: …; --bh-border-strong: …; --bh-color-accent: …; --bh-color-accent-strong: …; --bh-shadow-1: …; --bh-shadow-2: …; --bh-shadow-3: …; } Warum data-theme und nicht .dark: von den elf Projekten benutzt nur polls.bluehorizonrp.com die Klassenvariante, flxdevv.com dagegen bereits data-theme. Das Attribut gewinnt, weil es einen dritten Zustand ("auto") ohne zweite Klasse erlaubt. ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 10. BEWEGUNGSREDUKTION Gehört zu den Tokens, weil jede Komponente sich daran halten muss. ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --bh-transition: 0.01ms linear; --bh-transition-enter: 0.01ms linear; } } /* ─────────────────────────────────────────────────────────────────────────── 11. PAPIER Angelegt 2026-10-01, nachdem gemessen wurde, dass das Ticketsystem als nahezu leeres Blatt druckt: Schrift rgb(212,212,216) auf weissem Papier sind 1,48:1. Grund ist eine Eigenschaft, die man leicht uebersieht — Browser drucken Hintergruende standardmaessig NICHT (print-color-adjust steht auf economy). Die dunkle Flaeche faellt also weg, die helle Schrift darauf bleibt. Ein dunkles Design ohne Druckpalette druckt sich selbst aus dem Blatt. Warum hier und nicht im Projekt: Der Team Hub hatte sich eine eigene kleine Palette gebaut (drei rohe Hexwerte in project.css), das Ticketsystem gar keine. Zwei Projekte, dieselbe Ursache — damit gehoert es hierher. Die Kommentare in project.css Zeile 28 und 1857 verweisen seit jeher auf einen BACKLOG-Eintrag dazu; den gab es nicht, und deshalb wurde die Palette nie gebaut. Ein Verweis ist keine Liste. DIE BAUART IST DIE AUS ABSCHNITT 9: dieselben semantischen Namen, andere Werte. Kein einziger Selektor wird hier angefasst, keine Komponente weiss davon. Was eine Flaeche ist, bleibt eine Flaeche; sie ist nur weiss. DER AKZENT WIRD NICHT SCHWARZ, sondern eine dunklere Stufe seiner selbst. Das ist der Unterschied, auf den es ankommt: --bh-color-accent traegt vier Rollen gleichzeitig — Schrift, Rahmen, Flaeche, Schatten. Faerbt man ihn auf Papier schwarz, verlieren Rahmen ihre Aussage: Ein Akzentrahmen heisst "dieses eine ist hervorgehoben", und wenn alle Rahmen schwarz sind, ist nichts mehr hervorgehoben. Indigo-600 dagegen liegt auf Weiss bei 6,43:1 und bleibt erkennbar dieselbe Markenfarbe. Gemessen: indigo-200 1,85:1 indigo-300 2,72:1 (auf Papier unbrauchbar) indigo-500 5,23:1 indigo-600 6,43:1 indigo-700 8,14:1 --bh-text-on-accent wird Druckfarbe statt Weiss. Die Flaeche darunter wird ja nicht gedruckt, und weisse Schrift auf weissem Papier ist keine. NICHT GELOEST, und das bleibt offen: Flaechen, die allein durch Farbe etwas aussagen — Fortschrittsbalken, Rollenpunkte, Diagrammbalken — fehlen im Ausdruck ersatzlos. Ein blasser Text ist lesbar, ein nicht gedruckter Balken wird als Null gelesen. Das ist Markup-Arbeit, keine Tokenfrage. ─────────────────────────────────────────────────────────────────────────── */ @media print { :root { /* Flaechen werden Papier. */ --bh-surface-1: #FFFFFF; --bh-surface-2: #FFFFFF; --bh-surface-3: var(--bh-neutral-50); --bh-surface-glass: #FFFFFF; /* Aufhellungen werden Abdunklungen: aus Schwarz, nicht aus Weiss. */ --bh-wash-1: rgba(0, 0, 0, 0.03); --bh-wash-2: rgba(0, 0, 0, 0.06); --bh-wash-3: rgba(0, 0, 0, 0.12); /* Schrift. --bh-text-muted nimmt neutral-600: Die Skala haelt zwischen 400 (3,1:1 auf Weiss, zu wenig) und 600 keine Zwischenstufe. Lieber zu dunkel als unlesbar; eine Papier-Zwischenstufe waere ein eigener Schritt und steht im BACKLOG. */ --bh-text-primary: var(--bh-neutral-950); --bh-text-secondary: var(--bh-neutral-800); --bh-text-muted: var(--bh-neutral-600); --bh-text-on-solid: var(--bh-neutral-950); --bh-text-on-accent: var(--bh-neutral-950); /* Rahmen. */ --bh-border-subtle: var(--bh-neutral-300); --bh-border-strong: var(--bh-neutral-400); /* Akzent: dieselbe Farbe, dunklere Stufe. Siehe Kopf. */ --bh-color-accent: var(--bh-indigo-600); --bh-color-accent-bright: var(--bh-indigo-700); --bh-focus-color: var(--bh-indigo-600); /* Schatten tragen auf Papier nichts und kosten nur Toner. */ --bh-shadow-1: none; --bh-shadow-2: none; --bh-shadow-3: none; --bh-shadow-4: none; } } /* ═══════════════════════════════ Ende tokens.css ═══════════════════════════ */