/* ============================================================ CareVergleich24 · Design-Tokens v1.0 (Juli 2026) ------------------------------------------------------------ Die einzige Quelle der Wahrheit für Farben, Schrift, Form. Vollständige Dokumentation mit Beispielen und Regeln: → DESIGNSYSTEM.md im Projekt-Root → Styleguide-Artifact „CareVergleich24 · Designsystem“ Herkunft: Alle Markenfarben wurden pixelgenau aus dem Bestandslogo gemessen (das Logo bleibt unverändert). Alle angegebenen Kontraste sind rechnerisch nach WCAG 2.1 geprüft (Fließtext ≥ 4,5:1, große Schrift/UI ≥ 3:1). Eingebunden VOR design.css (index.html) bzw. VOR tokens.css (base.html der Fallback-Seiten) — liefert @font-face + --pw-*. ============================================================ */ /* ---- Schriften: lokal gehostet, kein Google-CDN (DSGVO) ---- */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-latin-wght-normal.6009e68ecba1.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-latin-ext-wght-normal.4bc760b904d0.woff2") format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0; } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-sans-latin.29fab48fb240.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-sans-latin-ext.31a914925919.woff2") format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0; } /* Geprüfte Alternative für Überschriften (Ratgeber-Anmutung), Dateien liegen bereit: lora-latin[-ext]-wght-normal.woff2. Aktivierung = --pw-schrift-display austauschen. */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/lora-latin-wght-normal.2731f8c0edd0.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/lora-latin-ext-wght-normal.710072f89322.woff2") format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0; } :root { /* ============ FARBEN ============ */ /* ---- Tannengrün-Skala ---- 400 = Salbei (Dachlinie im Logo) · 700 = Wortmarke „Care Vergleich“ */ --pw-gruen-50: #F3F7F4; --pw-gruen-100: #E4EDE7; --pw-gruen-200: #CBDCD1; --pw-gruen-300: #A9C4B3; --pw-gruen-400: #8FAA9A; /* Logo: Salbei (Dach) — Etiketten, ruhige Nebenrollen */ --pw-gruen-500: #5F8370; --pw-gruen-600: #47685A; /* Sekundär-Knopf-Kontur · Weiß darauf 6,2:1 */ --pw-gruen-700: #344B40; /* Logo: Tannengrün — Marke, Überschriften · auf Creme 8,6:1 */ --pw-gruen-800: #2A3D34; --pw-gruen-900: #22322B; /* dunkle Flächen (Footer) */ --pw-gruen-950: #16211B; /* ---- Terracotta-Skala ---- 400 = helle Stufe aus dem Vorgängerlogo — NUR dekorativ, nie für Text/Knöpfe! 600 = die „24“ im Logo (gemessen #B0501E) und zugleich das CTA-Terracotta (Weiß darauf 5,2:1) — die Knopffarbe steht also wörtlich im Logo */ --pw-terra-50: #FCF1EA; --pw-terra-100: #F8E1D2; --pw-terra-200: #F1C7AC; --pw-terra-300: #E5A17D; --pw-terra-400: #D47B57; /* dekorativ (Illustration, Zierlinien) */ --pw-terra-500: #C4602F; --pw-terra-600: #B0511F; /* CTA-Knöpfe · Weiß darauf 5,2:1 */ --pw-terra-700: #9E471C; /* CTA hover/aktiv · Weiß darauf 6,2:1 */ --pw-terra-800: #813A19; --pw-terra-900: #683016; /* ---- Flächen (warmes Papier statt Klinik-Weiß) ---- */ --pw-papier: #FAF4EC; /* Seitenhintergrund (Logo-Creme leicht abgedunkelt) */ --pw-flaeche: #FFFFFF; /* Karten, Formulare, Tabellen */ --pw-flaeche-warm: #FFFDF9; /* Kopfleiste, Hervorhebungen */ --pw-sand-100: #F3EADD; /* stille Flächen, Zebra-Zeilen */ --pw-sand-200: #EBDFCE; /* deaktivierte Knöpfe */ /* ---- Text (dunkles Markengrün statt Schwarz) ---- */ --pw-text: #22322B; /* auf Papier 12,3:1 · auf Weiß 13,5:1 */ --pw-text-mild: #51645A; /* Nebentext · auf Papier 5,8:1 — kein Hellgrau! */ --pw-text-invers: #FFFFFF; /* auf Grün 700/900 und Terra 600/700 */ /* ---- Linien & Fokus ---- */ --pw-linie: #E7DCCB; /* dekorative Trennlinien */ --pw-linie-stark: #75857B; /* Eingabefeld-Rahmen · auf Weiß ≥ 3:1 */ --pw-fokus: #344B40; /* Fokus-Ring: 3px, offset 2px */ /* ---- Funktion ---- */ --pw-cta: var(--pw-terra-600); --pw-cta-hover: var(--pw-terra-700); --pw-link: #A84C1E; /* Textlinks · auf Weiß 5,7:1, auf Papier 5,2:1 */ /* ---- Signalfarben (getrennt von Marke & Handlung) ---- */ --pw-erfolg: #2E7D4F; /* Weiß darauf 5,1:1 */ --pw-gruen-pop: #0F8A44; /* Signal-Grün (2-Minuten-Chip, Sieger-Rahmen im Hero) · Weiß darauf 4,6:1 */ --pw-erfolg-flaeche: #E7F3EC; --pw-erfolg-text: #1F5A38; /* auf erfolg-flaeche AA */ --pw-warnung-text: #8A6116; /* auf warnung-flaeche 4,9:1 */ --pw-warnung-flaeche: #FBF0D9; --pw-fehler: #B3362B; /* auf Weiß 6,0:1 */ --pw-fehler-flaeche: #FBEBE9; --pw-info-text: #3E6259; --pw-info-flaeche: #EAF1ED; --pw-gold: #E8A33D; /* Bewertungssterne, dekorativ */ --pw-gold-text: #835C00; /* Bewertungszahl als Text · auf Papier 5,5:1 */ /* ============ SCHRIFT ============ */ --pw-schrift-display: 'Nunito', 'Nunito Sans', system-ui, sans-serif; /* Überschriften, große Zahlen/Preise */ --pw-schrift-text: 'Nunito Sans', system-ui, sans-serif; /* Fließtext, Formulare, UI */ /* Größenskala — Grundgröße 17 px, die Zielgruppe liest mit */ --pw-groesse-display: clamp(2.5rem, 5vw, 3.5rem); /* 40–56 · Nunito 900 · Zeile 1,08 · nur Startseite */ --pw-groesse-h1: 2.25rem; /* 36 · Nunito 800 · Zeile 1,12 */ --pw-groesse-h2: 1.75rem; /* 28 · Nunito 800 · Zeile 1,2 */ --pw-groesse-h3: 1.375rem; /* 22 · Nunito 800 · Zeile 1,3 */ --pw-groesse-lead: 1.1875rem; /* 19 · Sans 400 · Zeile 1,6 */ --pw-groesse-text: 1.0625rem; /* 17 · Sans 400 · Zeile 1,65 — nie kleiner für Fließtext */ --pw-groesse-klein: 0.9375rem; /* 15 · Nebentext */ --pw-groesse-label: 0.8125rem; /* 13 · VERSAL 800, +0,09em — sparsam */ /* ============ FORM & TIEFE ============ */ --pw-radius-s: 10px; /* Knöpfe, Felder, Chips */ --pw-radius-m: 16px; /* Karten, Meldungen */ --pw-radius-l: 24px; /* Hero-Flächen, Dialoge */ --pw-radius-pill: 999px; /* Badges, Fortschritt */ /* Schatten immer warm getönt (Tannengrün-Basis), nie Schwarz */ --pw-schatten-1: 0 1px 3px rgba(52, 75, 64, 0.07), 0 4px 14px rgba(52, 75, 64, 0.06); --pw-schatten-2: 0 2px 6px rgba(52, 75, 64, 0.07), 0 14px 34px rgba(52, 75, 64, 0.11); --pw-schatten-3: 0 4px 12px rgba(52, 75, 64, 0.09), 0 28px 60px rgba(52, 75, 64, 0.16); /* Abstände: 4er-Raster */ --pw-raum-1: 4px; --pw-raum-2: 8px; --pw-raum-3: 12px; --pw-raum-4: 16px; --pw-raum-5: 24px; --pw-raum-6: 32px; --pw-raum-7: 48px; --pw-raum-8: 64px; --pw-raum-9: 96px; /* Layout */ --pw-maxbreite: 72rem; /* 1152 px · Lesetexte zusätzlich max. 62ch */ /* Bedienbarkeit (BFSG/WCAG): Knöpfe/Felder ≥ 48px, Chips ≥ 46px */ --pw-ziel-hoehe: 48px; color-scheme: light; }