/* ============================================================ RENDERFEIN DESIGN-TOKENS v2 — „Lichtkante · Blaue Stunde“ Verbindliche Werte laut Styleguide v2 (Juni 2026, ersetzt v1.0). Architektur: Primitives (--rfp-*) → semantische Rollen (--rf-*). Heller Modus („Tageslicht“) ist Default; dunkle Bereiche bekommen die Klasse .rf-nacht, die NUR die semantischen Rollen umhängt. Alle Text-Kontraste mit WCAG-Checker gemessen (a11y-audit/contrast.py) — bei neuen Kombinationen: erst messen, dann einsetzen. ============================================================ */ :root{ /* ---------- PRIMITIVES: Blaue Stunde (kühle dunkle Bühne) ---------- */ --rfp-blaustunde:#14171D; /* Canvas dunkel — entsättigtes Blau-Anthrazit (KEIN Salfer-Navy) */ --rfp-schiefer:#1C2027; /* Fläche dunkel, erhöht (Trustband, Cards auf dunkel) */ --rfp-stahl:#303641; /* Hairlines auf dunkel */ --rfp-galerieweiss:#F0F2F5; /* Text auf dunkel — 16,0:1 auf Blaustunde */ --rfp-nebel:#A9B1BD; /* Sekundärtext auf dunkel — 8,3:1 auf Blaustunde */ /* ---------- PRIMITIVES: Goldene Stunde (das Licht) ---------- */ --rfp-bernstein:#D9952B; /* DER Akzent. Text NUR auf dunkel (7,1:1). Auf hell nur Fläche/Linie! */ --rfp-goldstunde:#E8A33C; /* Hover-/Glow-Stufe von Bernstein */ --rfp-messing-tinte:#8A5C10; /* Akzent-TEXT auf hell — 5,4:1 auf Tageslicht, 5,8:1 auf Weiß */ /* ---------- PRIMITIVES: Entwurf (CAD-Welt, kühler Gegenpol) ---------- */ --rfp-cad:#98A0AB; /* CAD-Grau auf dunkel — 6,8:1 (Labels, Outline-Typo) */ --rfp-cad-text:#5F6670; /* CAD-Grau als Text auf hell — 5,8:1 auf Weiß */ /* ---------- PRIMITIVES: Tageslicht (helle Sektionen) ---------- */ --rfp-tageslicht:#F6F7F8; /* Canvas hell, neutral-kühl (nie beige) */ --rfp-weiss:#FFFFFF; /* Karten, Inputs */ --rfp-kalklinie:#E2E4E7; /* Hairlines auf hell */ --rfp-tinte:#191B1E; /* Text auf hell — 16,1:1 auf Tageslicht */ --rfp-tinte-soft:#494E56; /* Sekundärtext auf hell — 7,8:1 auf Tageslicht */ /* ---------- PRIMITIVES: Status ---------- */ --rfp-ok:#2E7A50; /* 4,9:1 auf Tageslicht · Weiß auf OK: 5,2:1 */ --rfp-ok-bg:#E7F4EC; /* OK-Text darauf: 4,6:1 */ --rfp-ok-nacht:#7CC79A; /* OK-Text auf Blaustunde: 9,0:1 */ --rfp-warn:#8A5C10; /* = Messing-Tinte (Doppelrolle wie v1) */ --rfp-warn-bg:#F7EDD8; /* Warn-Text darauf: 5,0:1 */ --rfp-error:#B5472E; /* warmes Rostrot, kein Signalrot — 5,0:1 auf Tageslicht */ --rfp-error-bg:#FCEDE9; /* Error-Text darauf: 4,7:1 */ --rfp-error-nacht:#F09A86; /* Error-Text auf Blaustunde: 8,3:1 */ /* ---------- SEMANTISCHE ROLLEN — Default: Tageslicht ---------- */ --rf-canvas:var(--rfp-tageslicht); --rf-surface:var(--rfp-weiss); --rf-line:var(--rfp-kalklinie); --rf-ink:var(--rfp-tinte); --rf-ink-soft:var(--rfp-tinte-soft); --rf-accent:var(--rfp-bernstein); /* nur Fläche/Linie/CTA-Hintergrund */ --rf-accent-hover:var(--rfp-goldstunde); --rf-accent-text:var(--rfp-messing-tinte); /* Links, Kicker, Akzent-Text */ --rf-entwurf:var(--rfp-cad-text); /* „Entwurfs“-Semantik: Vorher-Labels, Outline, Nummern */ --rf-ok:var(--rfp-ok); --rf-ok-bg:var(--rfp-ok-bg); --rf-warn:var(--rfp-warn); --rf-warn-bg:var(--rfp-warn-bg); --rf-error:var(--rfp-error); --rf-error-bg:var(--rfp-error-bg); --rf-focus:var(--rfp-messing-tinte); /* Fokusring auf hell (Bernstein schafft nur 2,5:1!) */ /* ---------- TYPOGRAFIE ---------- */ /* Selbst gehostet seit 12.06.2026 — fonts.css VOR dieser Datei einbinden, KEIN Google-CDN (Abmahnrisiko, Recht/OFFENE_PUNKTE.md) */ --rf-font-display:'Archivo','Segoe UI',system-ui,sans-serif; /* Headlines: 640 · font-stretch 118% */ --rf-font-ui:'Hanken Grotesk','Segoe UI',system-ui,sans-serif; /* UI & Fließtext: 400/500/600(/700 Zahlen) */ --rf-font-mono:'Spline Sans Mono','Consolas',monospace; /* Kicker, Werkschilder, Specs: 400/500 */ --rf-display-weight:640; --rf-display-stretch:118%; --rf-display-tracking:-0.012em; --rf-display-leading:1.04; /* ---------- FORM ---------- */ --rf-radius-tag:4px; /* Ecktags, Chips */ --rf-radius-btn:10px; --rf-radius-card:12px; --rf-radius-werk:14px; /* Exponat-/Bildrahmen */ /* ---------- SCHATTEN & GLOW ---------- */ --rf-shadow-werk:0 40px 80px -28px rgba(0,0,0,.65); /* Exponat auf dunkel */ --rf-shadow-card:0 2px 6px rgba(25,27,30,.05),0 30px 60px -24px rgba(25,27,30,.22); --rf-shadow-card-hover:0 1px 2px rgba(25,27,30,.05),0 18px 40px -18px rgba(138,92,16,.18); --rf-glow-cta:0 10px 28px rgba(217,149,43,.32); --rf-glow-lichtkante:0 0 18px rgba(217,149,43,.55); --rf-glow-divider:0 0 16px rgba(217,149,43,.5); /* ---------- MOTION (Playbook: design-library/motion-choreography) ---------- */ --rf-dur-hover:150ms; /* Farb-/Border-Hover */ --rf-dur-fill:180ms; /* Kontur→Füllung-Hover */ --rf-dur-reveal:350ms; /* Scroll-Reveals (12px translateY + Fade) */ --rf-stagger:60ms; /* Gruppen-Stagger, gesamt < 400ms */ --rf-ease:ease-out; } /* ---------- NACHT-SCOPE: dunkle Bereiche (Hero, Trustband, Footer) ---------- Nur semantische Rollen umhängen — Komponenten-CSS bleibt identisch. */ .rf-nacht{ --rf-canvas:var(--rfp-blaustunde); --rf-surface:var(--rfp-schiefer); --rf-line:var(--rfp-stahl); --rf-ink:var(--rfp-galerieweiss); --rf-ink-soft:var(--rfp-nebel); --rf-accent-text:var(--rfp-bernstein); /* auf dunkel DARF Bernstein Text sein (7,1:1) */ --rf-entwurf:var(--rfp-cad); --rf-ok:var(--rfp-ok-nacht); --rf-error:var(--rfp-error-nacht); --rf-focus:var(--rfp-bernstein); background:var(--rf-canvas); color:var(--rf-ink); } /* ---------- LEGACY-ALIASE (Migration aus v1 — nach Umbau entfernen) ---------- Alte base.css-Verweise funktionieren weiter, zeigen aber auf v2-Werte. */ :root{ --rf-bernstein:var(--rfp-bernstein); --rf-bernstein-tint:var(--rfp-warn-bg); /* v1-Highlight-Flaeche → warmer v2-Ton */ --rf-messing:var(--rfp-messing-tinte); --rf-dark:var(--rfp-blaustunde); --rf-sand:var(--rfp-tageslicht); /* v1-„Sand“-Flächen → neutral-kühl */ --rf-font-brand:var(--rf-font-display); --rf-radius-s:var(--rf-radius-tag); --rf-radius:var(--rf-radius-btn); --rf-radius-l:var(--rf-radius-card); --rf-shadow:var(--rf-shadow-card); --rf-shadow-l:var(--rf-shadow-card); --rf-ok-bg-legacy:var(--rfp-ok-bg); }