/* * tokens.css — Design-Variablen vogel-kollegen.de (VuK) * * MASCHINEN-QUELLE: Pencil-Variablen in `website_VuK.pen`, ausgelesen per * mcp__pencil__get_variables(filePath: ".../WebsiteRelaunch_VuK/website_VuK.pen") * am 2026-07-07. Bei Zweifel: erneut auslesen, diese Datei ist ein Abzug, * keine zweite Quelle der Wahrheit. * LESE-SSOT (Vault): "SSOT DesignManual VuK" v1.1, Stand 2026-07-07. * BAU-REGEL: `_briefing/Prompt_Pencil-HTML-Export_VuK.md` §2a/§5 — Pencil- * Variable 1:1 als CSS-Variable, KEIN Hardcode im generierten HTML/CSS. * * Struktur an RV orientiert (`WebsiteRelaunch_RV/global.css`), Werte aus VuK. * VuK hat KEINE Theme-Achse "font" (SSOT §4: font-family-display fest = * Source Sans 3) — deshalb kein "Bereich 1 Varianten", nur 0 + 2. * * Einheiten-Mapping (bindend): * color-* → Hex unverändert * size-* radius-* stroke-* space-* → px * frame-width-* breakpoint-mobile → px (Doku, s.u.) * lh-* → einheitenlos (Ratio) * ls-* → px * weight-* → einheitenlose Zahl * font-family* → String + Fallback * * Geräte-Suffix: -d = Desktop (CSS-Default) · -m = Mobile (@media ≤1024px). * Variablen ohne Suffix gelten für beide Geräte identisch. */ /* ═══════════════════════════════════════════════════════════════════ BEREICH 0 — STRUKTURELLE KONSTANTEN Frame-Breiten für Pencil · CSS-Breakpoint als Referenz. Hinweis: --breakpoint-mobile ist reine Dokumentation — Custom Properties funktionieren nicht in @media-Bedingungen (CSS-Spezifikation); der Wert 640 ist unten im @media-Selektor als Literal eingetragen. ═══════════════════════════════════════════════════════════════════ */ :root { --frame-width-desktop: 1280px; --frame-width-mobile: 390px; --breakpoint-mobile: 640px; /* Doku, kein var() in @media */ } /* ═══════════════════════════════════════════════════════════════════ BEREICH 2 — NON-VARIANTEN-STANDARDS (Desktop-Default) Farbe · Typografie · Radius · Strich · Abstand ═══════════════════════════════════════════════════════════════════ */ :root { /* ── SCHRIFTFAMILIEN ──────────────────────────────────────────── */ --font-family: 'Source Sans 3', sans-serif; --font-family-body: 'Source Sans 3', sans-serif; --font-family-display: 'Source Sans 3', sans-serif; /* kein Zweitfont (SSOT §4) */ /* ── GEWICHTE ─────────────────────────────────────────────────── */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; /* ── FARBE: MARKE ─────────────────────────────────────────────── */ --color-brand: #A62022; --color-brand-hover: #8A1B1D; --color-brand-hint: #A620221A; /* rgba(166,32,34,0.10) */ /* ── FARBE: TEXT ──────────────────────────────────────────────── */ --color-heading: #222222; --color-body: #333333; --color-meta: #6A6A6A; /* 2026-07-09: #767676→#6A6A6A für WCAG-AA-Kontrast (4,9:1 auf #F3F4F6) */ --color-subtle: #9A9A9A; --color-disabled: #A0A0A0; /* ── FARBE: FLÄCHEN ───────────────────────────────────────────── */ --color-surface-page: #FFFFFF; --color-surface-card: #F3F4F6; --color-surface-band: #1C1C1C; /* dunkles Band */ --color-surface-kachel: #262626; /* Cockpit-Kachel-Grund */ /* ── FARBE: RAHMEN ────────────────────────────────────────────── */ --color-border: #E5E5E5; --color-border-kachel: #383838; --color-border-on-brand: #FFFFFF59; /* 35% auf Rot */ /* ── FARBE: AUF DUNKEL / AUF ROT ──────────────────────────────── */ --color-kachel: #CFCFCF; /* helles Element auf Kachel */ --color-on-dark: #FFFFFF; --color-on-brand: #FFFFFF; --color-on-brand-subtle: #FFFFFFCC; /* 80% auf Rot */ /* ── FARBE: STATUS (nur Cockpit-Kachel, nie Fläche/Button) ────── */ --color-status-ok: #3DA35D; --color-status-warn: #E6A817; --color-status-stop: #C0392B; /* bewusst ≠ --color-brand, Signal ≠ Marke */ /* ── RADIUS ───────────────────────────────────────────────────── */ --radius-button: 6px; --radius-mini: 8px; --radius-kachel: 24px; --radius-balken: 3px; /* ── STRICHBREITEN ────────────────────────────────────────────── */ --stroke-border: 1px; --stroke-eyebrow-bar: 2px; --stroke-bar: 3px; --stroke-balken: 6px; --stroke-marker-w: 38px; /* ── ABSTÄNDE ─────────────────────────────────────────────────── */ --space-md: 20px; --space-lg: 50px; --space-xl: 80px; /* ── ZEILENHÖHEN (einheitenlos) ───────────────────────────────── */ --lh-hero-lp: 1.05; --lh-hero-content: 1.1; --lh-h2: 1.15; --lh-fragen: 1.3; --lh-pull: 1.35; --lh-h3: 1.35; --lh-lead: 1.4; --lh-kachel: 1.55; --lh-body: 1.6; --lh-ziffer: 1; /* ── LAUFWEITEN ───────────────────────────────────────────────── */ --ls-hero-d: -1.5px; --ls-hero-m: -0.5px; --ls-h2: -0.5px; --ls-eyebrow: 1.5px; /* ── SCHRIFTGRÖSSEN OHNE GERÄTE-PAAR ──────────────────────────── */ --size-h3: 22px; --size-h4: 17px; --size-label: 15px; --size-nav-link: 15px; --size-footer: 14px; --size-eyebrow: 13px; --size-kachel: 13px; --size-ampel: 10px; /* ── SCHRIFTGRÖSSEN — DESKTOP-WERT (Default) ──────────────────── */ --size-ziffer-d: 110px; --size-hero-lp-d: 84px; --size-hero-content-d: 64px; --size-band-h2-d: 44px; --size-h2-d: 40px; --size-cta-hl-d: 40px; --size-pull-d: 30px; --size-fragen-d: 26px; --size-lead-d: 22px; --size-wordmark-d: 22px; --size-body-d: 18px; --size-internelinks-d: 18px; --size-m5-text-d: 17px; --size-band-sub-d: 16px; --size-button-d: 16px; } /* ═══════════════════════════════════════════════════════════════════ MOBILE (≤ 1024px) — überschreibt alle -d durch die -m-Werte. Literal 640, nicht var(--breakpoint-mobile) — CSS erlaubt das nicht. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { :root { --size-hero-lp-m: 46px; --size-hero-content-m: 48px; /* bestätigt 07.07., s. Mapping-Kommentar */ --size-band-h2-m: 34px; --size-h2-m: 30px; --size-cta-hl-m: 30px; --size-pull-m: 24px; --size-fragen-m: 22px; --size-lead-m: 19px; --size-wordmark-m: 18px; --size-body-m: 16px; --size-internelinks-m: 16px; --size-m5-text-m: 16px; --size-band-sub-m: 15px; --size-button-m: 15px; --size-ziffer-m: 68px; } } /* * ───────────────────────────────────────────────────────────────────── * MAPPING-KOMMENTAR — Pencil-Variable → CSS-Variable → Pencil-Typ → Wert * Eindeutige Quelle für den Pencil-Agenten beim Anlegen/Prüfen der * Pencil-Variablen (SSOT "Arbeitsordner-Systematik"-Schwester-Workflow: * "SSOT Workflow Design-Variablen Pencil", Schritt 3). * ───────────────────────────────────────────────────────────────────── * * breakpoint-mobile number 640 → --breakpoint-mobile (Doku) * color-body color #333333 → --color-body * color-border color #E5E5E5 → --color-border * color-border-kachel color #383838 → --color-border-kachel * color-border-on-brand color #FFFFFF59 → --color-border-on-brand * color-brand color #A62022 → --color-brand * color-brand-hint color #A620221A → --color-brand-hint * color-brand-hover color #8A1B1D → --color-brand-hover * color-disabled color #A0A0A0 → --color-disabled * color-heading color #222222 → --color-heading * color-kachel color #CFCFCF → --color-kachel * color-meta color #6A6A6A → --color-meta * color-on-brand color #FFFFFF → --color-on-brand * color-on-brand-subtle color #FFFFFFCC → --color-on-brand-subtle * color-on-dark color #FFFFFF → --color-on-dark * color-status-ok color #3DA35D → --color-status-ok * color-status-stop color #C0392B → --color-status-stop * color-status-warn color #E6A817 → --color-status-warn * color-subtle color #9A9A9A → --color-subtle * color-surface-band color #1C1C1C → --color-surface-band * color-surface-card color #F3F4F6 → --color-surface-card * color-surface-kachel color #262626 → --color-surface-kachel * color-surface-page color #FFFFFF → --color-surface-page * font-family string Source Sans 3 → --font-family * font-family-body string Source Sans 3 → --font-family-body * font-family-display string Source Sans 3 → --font-family-display * frame-width-desktop number 1280 → --frame-width-desktop * frame-width-mobile number 390 → --frame-width-mobile * lh-body number 1.6 → --lh-body * lh-fragen number 1.3 → --lh-fragen * lh-h2 number 1.15 → --lh-h2 * lh-h3 number 1.35 → --lh-h3 * lh-hero-content number 1.1 → --lh-hero-content * lh-hero-lp number 1.05 → --lh-hero-lp * lh-kachel number 1.55 → --lh-kachel * lh-lead number 1.4 → --lh-lead * lh-pull number 1.35 → --lh-pull * lh-ziffer number 1 → --lh-ziffer * ls-eyebrow number 1.5 → --ls-eyebrow * ls-h2 number -0.5 → --ls-h2 * ls-hero-d number -1.5 → --ls-hero-d * ls-hero-m number -0.5 → --ls-hero-m * radius-balken number 3 → --radius-balken * radius-button number 6 → --radius-button * radius-kachel number 24 → --radius-kachel * radius-mini number 8 → --radius-mini * size-ampel number 10 → --size-ampel * size-band-h2-d / -m number 44 / 34 → --size-band-h2-d/-m * size-band-sub-d / -m number 16 / 15 → --size-band-sub-d/-m * size-body-d / -m number 18 / 16 → --size-body-d/-m * size-button-d / -m number 16 / 15 → --size-button-d/-m * size-cta-hl-d / -m number 40 / 30 → --size-cta-hl-d/-m * size-eyebrow number 13 → --size-eyebrow * size-footer number 14 → --size-footer * size-fragen-d / -m number 26 / 22 → --size-fragen-d/-m * size-h2-d / -m number 40 / 30 → --size-h2-d/-m * size-h3 number 22 → --size-h3 * size-h4 number 17 → --size-h4 * size-hero-content-d / -m number 64 / 48 → --size-hero-content-d/-m * size-hero-lp-d / -m number 84 / 46 → --size-hero-lp-d/-m * size-internelinks-d / -m number 18 / 16 → --size-internelinks-d/-m * size-kachel number 13 → --size-kachel * size-label number 15 → --size-label * size-lead-d / -m number 22 / 19 → --size-lead-d/-m * size-m5-text-d / -m number 17 / 16 → --size-m5-text-d/-m * size-nav-link number 15 → --size-nav-link * size-pull-d / -m number 30 / 24 → --size-pull-d/-m * size-wordmark-d / -m number 22 / 18 → --size-wordmark-d/-m * size-ziffer-d / -m number 110 / 68 → --size-ziffer-d/-m * space-lg number 50 → --space-lg * space-md number 20 → --space-md * space-xl number 80 → --space-xl * stroke-balken number 6 → --stroke-balken * stroke-bar number 3 → --stroke-bar * stroke-border number 1 → --stroke-border * stroke-eyebrow-bar number 2 → --stroke-eyebrow-bar * stroke-marker-w number 38 → --stroke-marker-w * weight-bold string 700 (→ Zahl) → --weight-bold * weight-regular string 400 (→ Zahl) → --weight-regular * weight-semibold string 600 (→ Zahl) → --weight-semibold * * GEKLÄRT (2026-07-07): `size-hero-content-m` = 48 ist PO-bestätigt bewusst * (nicht 44). `SSOT DesignManual VuK.md` §4.1 (v1.2) und `Hardcode-Audit_ * Block2_20260707.md` §3b sind nachgezogen. Rest-Aufgabe beim Bau: die drei * H1-Knoten (Startseite ROT, Mobil) sind noch als Literal `48` gebunden, * nicht als `$size-hero-content-m` — beim Export auf die Variable ziehen * (0 optische Änderung, nur korrekte Bindung; s. Audit §3b). */