/* ============================================================ FIXOMETER® — Design-Tokens · eine Wahrheit ============================================================ Phase 3 (2026-07). Leitwelt „Messwerkzeug" (Territorium A) + dosierte Wärme aus B; C = Fachhandels-/POS-Dialekt über wenige Overrides — KEIN zweites System. Grün-Rampe rechnerisch aus der RAL-6018-Näherung #57A639 abgeleitet und WCAG-geprüft (derive_colors.py, Protokoll im Manual). Print-Referenz: RAL 6018 (Gurtfarbe am Produkt); RAL ist nicht exakt sRGB-konvertierbar — #57A639 ist die verbindliche Screen-Näherung. Harte Regeln (gemessen, nicht geschätzt): · Grün-500 NIE als Text auf hellen Flächen (2,73:1) — Text-Grün ist ausschließlich --gruen-700 (5,01:1 AA). · Bedeutungstragende Grafik auf hell (Messachse, Marker, Diagramm-Linien) braucht ≥3:1 (WCAG 1.4.11) → --gruen-600 (3,29:1 / 3,06:1). Grün-500 auf hell nur dekorativ / großflächig. · Auf Grün-Flächen Graphit-Text (4,91:1), nie Weiß (3,04:1). · Auf dunklen Flächen (POS-Dialekt) Grün als Text nur ab --gruen-500 (5,48:1), besser --gruen-300 (9,42:1). · Rot = Bedien-/Achtungscode am Produkt (--rot-bedien), nie Markenfläche, nie Fließtext. Die Semantik-Farbe --fehler (= --rot-text, 5,04:1) ist davon getrennt zu lesen: Fehler-Rot meldet Zustände, Bedien-Rot zeigt aufs Gerät. · Status nie nur über Farbe: Erfolg/Warnung/Fehler immer zusätzlich mit Label, Icon oder Form (WCAG 1.4.1). · Kein sichtbarer Text unter --fs-micro (11px). Einzige dokumentierte Ausnahme: dekorative, aria-hidden Lineal-Ziffern 9px (Leitwelt-Gerüst; Präzedenz: komponenten.html). ============================================================ */ :root{ /* ---------- Farbe · Graphit (Gehäuse — Basis der Marke) ---------- */ --graphit: #23282A; --graphit-tief: #1B1F20; --graphit-2: #2E3436; --graphit-3: #3A4144; /* ---------- Farbe · Papier (Fläche der Leitwelt) ---------- */ --papier: #F4F3EE; --papier-2: #EDEBE3; --weiss: #FFFFFF; /* ---------- Farbe · Grün (Produktsignatur, RAL-6018-Näherung) ---------- */ --gruen-050: #EEF4EC; /* Ordnungsfeld hell, Erfolgs-Fläche */ --gruen-100: #D9E8D4; /* Hinterlegung, Feld-Wärme aus B */ --gruen-300: #94D46E; /* Akzente/Text auf dunklen Flächen (9,42:1) */ --gruen-500: #57A639; /* Signatur: Ready-Mark, Gurt, Flächen-Akzent */ --gruen-600: #4F9634; /* bedeutungstragende Grafik auf hell: Achse, Marker (≥3:1) */ --gruen-700: #3D7528; /* einzige Text-Fassung auf hellen Flächen */ --gruen-900: #1D3E1B; /* dunkelste Fläche (POS) — leicht entsättigt/kühler */ --gruen: var(--gruen-500); /* ---------- Farbe · Rot (Bedien-/Achtungscode — nie Markenfläche) ---------- */ --rot-bedien: #E23A1E; /* Hebel am Gerät, grafischer Marker — kein Fließtext */ --rot-text: #C42E16; /* Text-Fassung */ /* ---------- Linien ---------- */ --linie: rgba(35,40,42,.14); --linie-stark: rgba(35,40,42,.28); --linie-hell: rgba(244,243,238,.22); /* auf dunklen Flächen */ /* ---------- Semantik ---------- */ --leit: var(--graphit); /* Deck-Kompatibilität (Phase 4) */ --text-primaer: var(--graphit); --text-sekundaer: var(--graphit-3); --text-invers: var(--papier); --signatur: var(--gruen-500); --achse-farbe: var(--gruen-600); /* Mess-/Zugrichtungs-Achse auf hell */ --erfolg: var(--gruen-700); --erfolg-flaeche: var(--gruen-050); --warnung: #9A5808; /* AA auf Papier (5,01) + Papier-2 (4,66) */ --warnung-flaeche: #FBF1E4; --fehler: var(--rot-text); --fehler-flaeche: #F9E9E5; /* ---------- Typografie · Familien ---------- */ --disp: "Archivo Expanded","Arial Narrow",Arial,sans-serif; --text: "Inter",system-ui,-apple-system,sans-serif; --mono: "JetBrains Mono",ui-monospace,"SF Mono",monospace; /* ---------- Typografie · Skala (Bühne 1280×720 · A4 794px) ---------- */ --fs-hero: 96px; /* Claim auf Titelflächen */ --fs-h1: 64px; --fs-h2: 40px; --fs-h3: 28px; --fs-lead: 22px; --fs-text: 18px; --fs-small: 15px; --fs-caption: 13px; --fs-micro: 11px; --lh-tight: 1.04; /* Display-Zeilen */ --lh-heading: 1.12; --lh-text: 1.55; --ls-disp: -0.01em; /* Display leicht geschlossen */ --ls-caps: 0.14em; /* Mono-Caps-Labels gesperrt */ /* ---------- Raster (4-px-Basis) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- Kanten & Tiefe (Leitwelt ist kantig — sparsam) ---------- */ --radius-0: 0; --radius-1: 3px; /* Chips, kleine Felder */ --radius-2: 6px; /* Cards */ --schatten-1: 0 1px 2px rgba(27,31,32,.06); --schatten-2: 0 6px 24px rgba(27,31,32,.10); /* ---------- Eigenelemente ---------- */ --achse: 2px; /* Stärke der Mess-/Zugrichtungs-Achse */ } /* POS-/Fachhandels-Dialekt (Territorium C): dunkle Fläche, gleiche Tokens — nur die Flächen-Slots drehen. Anwendung: oder Container-Klasse. */ .dialekt-pos{ --flaeche: var(--graphit-tief); --auf-flaeche: var(--papier); --gruen-text: var(--gruen-300); /* statt --gruen-700 */ --linie-dialekt: var(--linie-hell); } /* Leitwelt-Default derselben Slots */ :root{ --flaeche: var(--papier); --auf-flaeche: var(--graphit); --gruen-text: var(--gruen-700); --linie-dialekt: var(--linie); } /* Typo-Rollen — dokumentierte Bündel. Die Rollen sind die stabile Ebene für spätere Wiederverwendung (Website: Werte auf rem umstellen, Rollen bleiben). Display nie unter --fs-h3 und nie als Fließtext; Mono nur Kennwerte/Labels/ Tabellen; Inter alles andere. */ .typo-display{ font-family:var(--disp); font-weight:800; font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:var(--ls-disp); } .typo-lead{ font-family:var(--text); font-weight:500; font-size:var(--fs-lead); line-height:1.45; } .typo-body{ font-family:var(--text); font-weight:400; font-size:var(--fs-text); line-height:var(--lh-text); } .typo-label{ font-family:var(--mono); font-weight:500; font-size:var(--fs-caption); line-height:1.3; letter-spacing:var(--ls-caps); text-transform:uppercase; } .typo-daten{ font-family:var(--mono); font-weight:500; font-size:var(--fs-text); line-height:1.4; font-variant-numeric:tabular-nums; } .typo-caption{ font-family:var(--text); font-weight:400; font-size:var(--fs-caption); line-height:1.45; color:var(--text-sekundaer); }