/* ============================================================================ Eventsuite — Design-Tokens, Richtung „Bühne" (W2-D, Lauf 1); „Bühne 2" (D-1, Lauf design-politur/lauf-1): Material und Tiefe — drei Flächenstufen, Kanten, neutrale Schatten, Objektschattierung (system.md 11). Quelle der Wahrheit für Farbe, Schrift, Abstand, Radius, Bewegung. Beschreibung: docs/design/system.md. Prüfung: contrast-check.mjs. Die Marken in den Kommentaren (@ground, @text, @nebentext, @line, @accent, @on-accent) liest contrast-check.mjs. Jede Farbe braucht genau eine Rolle; Farben ohne Marke werden nicht geprüft und dürfen nicht für Text stehen. ========================================================================== */ :root { /* --- Farben: schwarzer Molton, ein warmes Licht --------------------------- */ --letterbox: #000000; /* INT-5 U7: Rand außerhalb der Bühne (Anzeige 16:9 fest, sicherer Rand, neben einer Modul-Bühne) — reines Schwarz, keine Fläche des Designs */ --molton: #0c0b0a; /* @ground Bühnenmolton, warmes Schwarz */ --molton-lift: #151311; /* @ground angehobene Fläche, +3 % */ --molton-lift-2: #1e1b17; /* @ground fokussierte Fläche, +6 % */ --molton-scrim: rgb(12 11 10 / .72); /* Abdunklung hinter Dialogen, kein Textgrund */ /* Schleier (UI-1, design-brief.md): liegt unter JEDEM Text, der über Inhalt oder Motiv steht — Kopf, Fuß, Kachel-Titelblock, Abzeichen. Neutral (Material, kein Licht). contrast-check.mjs rechnet ihn über WEISS (ungünstigster Inhalt darunter). */ --veil: rgb(12 11 10 / .86); /* @veil Schleier unter Text auf Inhalt/Motiv */ /* --- Material (Bühne 2, system.md 11): Tiefe ohne zweites Licht ------------------------------------------------------ */ /* Flächenstufen sind die drei Schwarztöne oben (--molton Grund · --molton-lift +3 % · --molton-lift-2 +6 %). Was in einer Fläche VERTIEFT liegt (Bildfeld ohne Bild, Nabe, Bahn), zeigt den Grund. Kanten: 1 px, oben leicht heller, unten dunkler. Schatten: neutral (kein Farbton), weich, nur nach unten oder nach innen — nie nach oben, nie in Akzent. Das prüft contrast-check.mjs: neutrale Schatten und neutrale Verläufe sind Material, alles mit Farbton ist Licht (nur der Spot). */ --edge-light: rgb(255 244 224 / .10); /* @line Kante oben: eine Spur heller als die Fläche (kein Leuchten) */ --edge-dark: rgb(0 0 0 / .55); /* Kante unten: dunkler als die Fläche */ --shadow-drop: 0 12px 28px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .35); /* weicher Wurfschatten nach unten (Kachel, Dialog, Fokus) */ --shadow-lift: 0 8px 24px rgb(0 0 0 / .40), 0 1px 3px rgb(0 0 0 / .35); /* flacherer Wurfschatten (Taste, Chip, Knopf) */ --shadow-inset: inset 0 1px 0 rgb(255 244 224 / .10), inset 0 -1px 0 rgb(0 0 0 / .55); /* Kantenpaar als Innenschatten: oben hell, unten dunkel */ --shadow-well: inset 0 2px 8px rgb(0 0 0 / .55), inset 0 1px 0 rgb(0 0 0 / .35); /* Vertiefung (Bildfeld ohne Bild, Bahn, Nabe) */ --shade-object: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / 0) 38%, rgb(0 0 0 / .30) 100%); /* Schattierung eines Körpers: Licht von oben, neutral */ --tungsten: #f2a33a; /* @accent Glühlicht — Standardwert des Akzents */ --accent: var(--tungsten); /* EINZIGE Stelle, die ein Branding überschreibt */ --on-accent: var(--molton); /* @on-accent Text auf Akzentfläche (OK-Taste, Hauptknopf) */ --spot: #fff4e0; /* @text Text primär, warmes Weiß unter Tungsten */ --spot-dim: rgb(255 244 224 / .62); /* @text Text sekundär: Meta, Beschreibungen */ --spot-faint: rgb(255 244 224 / .38); /* @nebentext nur Nebentext ≥ 20 px oder Schrift ≥ 44 px */ --spot-frame: rgb(255 244 224 / .32); /* @line Knopfrahmen, Schalterrahmen */ --spot-edge: rgb(255 244 224 / .24); /* @line Lichtkante der fokussierten Fläche */ --spot-ghost: rgb(255 244 224 / .14); /* @line Linien, Trennungen, ruhende Kanten */ /* Spot-Geometrie: der einzige Verlauf der Fläche (Regel „Ein Licht") */ --spot-size: 1100px; --spot-x: -40px; --spot-y: 280px; --spot-core: 16%; /* Akzentanteil im Kegelkern */ --spot-mid: 5%; /* Akzentanteil bei 55 % Radius */ /* --- Schrift -------------------------------------------------------------- */ --font-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; --font-display-text: "Big Shoulders Text", "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; --font-ui: "Instrument Sans", system-ui, "Segoe UI", Arial, sans-serif; /* UI-Skala (Instrument Sans). Kiosk-Minima: Nebentext 20, Fließtext 24, Bedientext 26, Kachelname 44 */ --text-note: 20px; /* Nebentext: powered by, Lizenzzeile, Fußnote */ --text-kind: 22px; /* Kennzeile: Kacheltyp, Skalen, Chips — Versal mit Sperrung */ --text-meta: 24px; /* Meta: Version, Zeit, Protokoll, Beschreibung */ --text-ui: 26px; /* Bedientext: Filter, Kopf-Untertitel, Hinweise */ --text-body: 28px; /* Fließtext, Knöpfe, Dialogtext, Listentitel */ --text-lead: 36px; /* Betreiber-Name, Regler-Label, Dialog-Titel */ --text-key: 44px; /* Ziffern der PIN-Tasten */ --text-cue: 48px; /* Cue-Zeile im Leerlauf („Tippen und drehen.") */ /* Display-Skala (Big Shoulders). Kachelnamen: drei Stufen, siehe system.md „Lange Namen" */ --name-size: 64px; /* Kachelname, Display 700, ≤ 2 Zeilen */ --name-size-long: 48px; /* langer Name, Text 700, ≤ 3 Zeilen */ --name-size-min: 44px; /* Notfallstufe, Text 700, harter Umbruch, Kiosk-Minimum */ --name-focus-size: 80px; /* fokussierte Kachel, Display 900 (Bühne 2: jede Kachel trägt das Bildfeld 160 — 112/96 sprengten die Kachelhöhe) */ --name-focus-size-image: 80px; /* = --name-focus-size (Bühne 2: es gibt keine Kachel ohne Bildfeld mehr; Token bleibt für den Musterbogen) */ --name-focus-size-long: 64px; /* fokussierte Kachel, langer Name, Text 700 */ --name-focus-size-min: 56px; /* fokussierte Kachel, Notfallstufe */ --value-size: 96px; /* Regler-Wert */ --title-size: 144px; /* Seitentitel: Programm, Betreiber */ --bill-size: 320px; /* Programmname im Leerlauf */ /* Zeilenhöhen auf dem 8-px-Rhythmus (Bühne 2): der Zeilenkasten jeder UI-Größe ist ein Vielfaches von 8 — feste Pixelwerte je Rolle statt Faktoren; Display-Schrift bleibt bei .9/.86 (Plakat, die Versalhöhe zählt) */ --lh-title: .86; --lh-display: .9; --lh-note: 24px; /* 20 px Nebentext */ --lh-kind: 24px; /* 22 px Kennzeile */ --lh-meta: 32px; /* 24 px Meta */ --lh-ui: 32px; /* 26/28 px Bedientext in Zeilen und Knöpfen */ --lh-body: 40px; /* 28 px Fließtext (Dialog, Hinweis) */ --lh-lead: 40px; /* 36 px */ --lh-key: 48px; /* 44 px */ --lh-cue: 56px; /* 48 px */ --track-kind: .16em; /* Kennzeilen in Versalien */ --track-caps: .12em; /* Filter, Versionen, Chips */ --track-btn: .06em; /* Knöpfe */ /* --- Abstände: eng innerhalb, weit zwischen Abschnitten. Rhythmus 8 px (Bühne 2): Flächen, Blöcke, Höhen liegen auf Vielfachen von 8; --hair (4) ist der halbe Schritt nur für Linien und Marken, --snug (12) der Anderthalbschritt innerhalb von Chips und Zeilen — nie zwischen Blöcken. ------------------------------------------------------- */ --hair: 4px; --tight: 8px; --snug: 12px; --inner: 16px; --row: 24px; --block: 32px; --section: 48px; --act: 64px; /* Sicherer Rand der Bühne (5 %): Gasse seitlich, Schnürboden oben, Vorbühne unten */ --wing: 96px; --fly: 64px; --apron: 48px; /* --- Maße ------------------------------------------------------------------- */ --stage-w: 1920px; --stage-h: 1080px; /* Rahmen (UI-1, design-brief.md): Kopf und Fuß sind Ebenen ÜBER dem Inhalt, kein eigenes Band. Sichtbar schmal, Treffer voll: der Fußknopf zeichnet sich in 56 px, seine Trefferfläche bleibt 80 px (Kiosk-Minimum). Sichere Zone für Text und Ziele = 64 oben, 56 unten (Layout-Gate head-foot + frame-size, Baukasten bandOf). */ --frame-head: 64px; /* Kopfebene: eine Zeile, Schleier 0–48, Auslauf 48–64 */ --frame-head-veil: 48px; /* bis hier deckt der Schleier voll; Text steht darin */ --frame-foot: 56px; /* Fußebene: eine Zeile, Auslauf 0–12, Schleier ab 12 */ --frame-foot-fade: 12px; --frame-hit: 80px; /* Trefferhöhe der Knöpfe in Band und Fuß (= --touch-min) */ --band-h: 56px; /* Chip-Band der Programmseite (sichtbar); Ziele darin 80 hoch, nach unten in die Gasse */ --tile-veil-fade: 96px; /* Auslauf des Kachel-Schleiers über dem Titelblock */ --tile-name: 56px; /* Kachelname (UI-1, Display 700, ≤ 2 Zeilen) — Typostufe „Display" des Briefs */ --tile-name-long: 44px; /* langer Name: Text 700 (Stufe 2) bzw. harter Umbruch (Stufe 3), Kiosk-Minimum */ --tile-frame: 4px; /* Akzentrahmen der aktiven Kachel (innen, outline) */ --touch-min: 80px; /* kleinstes Touch-Ziel */ --touch-gap: 16px; /* kleinster Abstand zwischen Zielen */ --btn-h: 88px; --key-w: 160px; --key-h: 88px; /* = --btn-h; zwölf Tasten passen so unter den Seitentitel */ --tile-w: 280px; --tile-focus-w: 440px; --tile-pad: 24px; --tile-image-h: 160px; /* Bildfeld der Kachel: 280 × 160 (7:4, das 16:10-Motiv wird mittig beschnitten), in jeder Kachel gleich hoch (Bühne 2) */ --tile-band-h: 64px; /* kompakte Kachel (L-1, 6–10 Kacheln in zwei Reihen): Band oben mit Kennzeile links und Motiv rechts (7:4 → 112 × 64, contain); 64 + 8 + 80 + 64 + 12 = 228 ≤ 231 Reihenhöhe */ --name-size-compact: 44px; /* kompakte Kachel: Name Display 700 ≤ 2 Zeilen (Kiosk-Minimum) */ --chip-h: 48px; /* Chip-Höhe (Bühne 2: 44 → 48, Rhythmus) */ --mark-h: 6px; /* Bodenmarkierung */ --square: 14px; /* Statusquadrat */ --square-lan: 20px; /* Stationsquadrat */ --dot: 24px; /* PIN-Punkt */ --knob: 56px; /* Reglergriff (Trefferfläche ist die 80-px-Bahn) */ --switch-w: 120px; --switch-h: 56px; --logo: 88px; /* Betreiber-Logo; ohne Logo entfällt die Fläche — der Name ist die Wortmarke (Bühne 2, kein Platzhalter) */ --sponsor-w: 720px; --sponsor-h: 280px; --dialog-w: 960px; --line: 1px; --rule: 2px; /* --- Radien: die Bühne hat keine runden Ecken --------------------------------- */ --radius-surface: 0; --radius-control: 0; --radius-dot: 50%; /* einzige Ausnahme: PIN-Punkte sind Lampen, keine Flächen */ /* --- Bewegung: nur das Licht bewegt sich, nie die Schrift ----------------------- */ --dur-press: 120ms; /* Druckrückmeldung */ --dur-mark: 200ms; /* Bodenmarkierung springt, Schalter kippt */ --dur-fade: 320ms; /* Ebenenwechsel, Dialog erscheint */ --dur-breath: 3s; /* Standby-Punkt atmet (0,33 Hz) */ --dur-sweep: 48s; /* Spot fährt im Leerlauf einmal quer und zurück */ --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.45, 0, .55, 1); }