/* ============================================================================ K&F Tollhaus — Design-Tokens Stand 14.08.2026 EINE Quelle für BEIDE Installationen (Root/Impreza + Shop/brisk). ============================================================================ HALTUNG ------- Der verspielte Kinderlook BLEIBT. Es wird nicht aufgeräumt, nicht entsättigt, nicht beruhigt. Leitsatz: Die Lautstärke bleibt (Farbe, Form, Illustration), die Mechanik wird erwachsen (Lesbarkeit, Skalen, Konsistenz). Zwei Zielgruppen: 🎈 das Kind entscheidet die Stimmung, 👔 der Elternteil entscheidet den Kauf. HERKUNFT -------- Farben: Pixelzählung am Logo-Master TH_Logo_farbe_rgb (siehe DESIGN-DNA Abschnitt 1a). Alles andere ist aus dem Bestand verdichtet, nicht erfunden — die Kommentare nennen jeweils den Ausgangswert. ⚠️ Diese Datei enthält NUR Variablen. Sie verändert für sich genommen kein einziges Pixel. Die Wirkung entsteht erst in impreza.css / brisk.css, wo die Themevariablen auf diese Tokens umgebogen werden. Wer die Grundschicht abschalten will, deaktiviert kf-design-base.php — sonst nichts. ========================================================================== */ :root { /* ═══ 1 · FARBEN ═════════════════════════════════════════════════════════ Die eine Regel, die fast jedes Kontrastproblem des Auftritts löst: HELLE Flächen tragen --kf-ink (Logo-Dunkelblau), NIEMALS Weiß. Das ist kein Kompromiss und kein Abdunkeln — die Flächen bleiben exakt so bunt wie vorher, nur die Schrift darauf dreht sich um. Alle Werte hier sind nachgemessen (WCAG-2.x-Relativluminanz), nicht geschätzt. */ /* ── Marke · 1:1 aus dem Logo ─────────────────────────────────────────── */ --kf-orange: #F39200; /* Wortmarke. ⛔ Nie als TEXT auf Weiß (2,37:1). Als FLÄCHE mit --kf-ink darauf: 5,20:1 ✓ Ersetzt #E07114 (Root) und #F18706 (Shop) — beide waren Beinahe-Dubletten der CI. */ --kf-ink: #282E70; /* Logo-Kontur + Slogan. 12,24:1 auf Weiß. Trägt Überschriften UND Text auf Buntflächen. Ersetzt #273583 (Shop) und macht das Dunkelblau erstmals auch auf Root nutzbar. */ --kf-red: #E30613; /* Logo-Außenkontur + Cap des Maskottchens. Weiß darauf 4,88:1 ✓ — Signal/Fehler. */ /* ── Aktion ─────────────────────────────────────────────────────────────── Der EINE Primärbutton. Vorher waren es im selben Kaufweg drei Farben: orange #F18706 (Archiv), petrol #00807F (Produktseite, aus Korrekturwelle 1) und türkis #77C8C9 (Warenkorb) — davor an der Produktseite sogar das ungebrandete WooCommerce-Lila #7F54B3. Hover geht bewusst HELLER, nicht dunkler: das ist die 🎈-Geste (etwas leuchtet auf, wenn man es anfasst) und verbessert den Kontrast zusätzlich. */ --kf-action: var(--kf-orange); /* --kf-ink darauf = 5,20:1 ✓ */ --kf-action-text: var(--kf-ink); --kf-action-hover: #FFC04D; /* aus dem Logo-Verlauf. --kf-ink darauf = 7,52:1 ✓ */ /* ── Flächen · die Türkis-/Hellblau-Familie, auf je EINEN Wert verdichtet ── Vorher lief jede Fläche in zwei Varianten nebeneinander (Root/Shop). Die Impreza-Werte gewinnen, weil sie die 9 Hauptseiten tragen. */ --kf-sky: #B9E4F8; /* Header, Body-Grund. --kf-ink darauf = 9,05:1 ✓ ersetzt zusätzlich #BCE1E9 (Shop) */ --kf-aqua: #85C9D1; /* Zickzack-Sektion. --kf-ink darauf = 6,57:1 ✓ ersetzt zusätzlich #77C8C9 (Shop) */ --kf-mist: #E7F4F6; /* Inhaltskasten. --kf-ink darauf = 10,89:1 ✓ */ --kf-paper: #FFFFFF; --kf-sunny: #FFC04D; /* Highlight-Fläche, = --kf-action-hover */ /* ── Text ─────────────────────────────────────────────────────────────── */ --kf-ink-body: #1A1A1A; /* Impreza-Bestand. Lange Fließtexte, Tabellen. 15,47:1 auf --kf-mist — der beste Wert des ganzen Auftritts, deshalb übernommen. Ersetzt Shop-Grau #6E7A84 (nur 4,15:1). */ --kf-ink-muted: #5A6472; /* Sekundär/Meta. 5,65:1 auf #F8F8F8 ✓ */ --kf-ink-on-action: var(--kf-ink); --kf-on-dark: #FFFFFF; /* nur auf --kf-red und echten Dunkelflächen */ /* ── Semantik · 👔-Welt, bewusst nüchtern ─────────────────────────────── */ --kf-success: #1E7A46; --kf-warning: #B25900; --kf-error: #C0121C; --kf-focus: var(--kf-ink); /* Fokusring. Ink liegt auf JEDER unserer Flächen über 5:1 (orange 5,20 · aqua 6,57 · sky 9,05 · weiß 12,24) — Rot wäre auf Orange unsichtbar gewesen. */ /* ⛔ ERSATZLOS GESTRICHEN (nicht ersetzt, sondern weg): #E95095 / #7049BA + linear-gradient(135deg,…) Impreza-Demo-Reste #7F54B3 WooCommerce-Werksfarbe (Kauf-Button) #00A2A3 Shop-Footer-Petrol #1E73BE Shop-Cookiebanner-Blau #F18706 · #77C8C9 · #BCE1E9 · #E07114 · #273583 Beinahe-Dubletten */ /* ═══ 2 · TYPOGRAFIE ═════════════════════════════════════════════════════ --kf-font-display trägt die 🎈-Welt (Emotion, Überschriften). --kf-font-text trägt die 👔-Welt (Preis, Zeit, Buchung, Formular). ⛔ Die Comic-Schrift NIE für Preise, Uhrzeiten, Buchungsschritte. */ --kf-font-display: "Love Ya Like A Sister", "Comic Neue", cursive; --kf-font-text: "Open Sans", system-ui, -apple-system, sans-serif; /* Gewichte — siehe fonts.css für die Messung. Display hat nur 400; jedes höhere Gewicht wäre synthetisch und matschig. Text ist variabel (300–800), 700 ist ab jetzt ein ECHTER Schnitt. */ --kf-fw-display: 400; --kf-fw-display-bold: 400; /* bewusst 400 — die Schrift hat keinen 700er */ --kf-fw-text: 400; --kf-fw-text-medium: 600; --kf-fw-text-bold: 700; /* Skala, Faktor ~1,25. Repariert die kaputte Bestandsfolge: Root hatte H3 22,4px KLEINER als H4 24px, und sechs Stufen zwischen 20,8 und 32px — das bildet keine Hierarchie mehr. Shop lief parallel auf einer ganz anderen Skala (H1 80px vs. Root 48px). Ab hier gilt EINE Skala für beide Installationen. */ --kf-fs-2xs: 0.75rem; /* 12px — Rechtstext, Footer-Feinzeile */ --kf-fs-xs: 0.875rem; /* 14px — Label, Bildunterschrift */ --kf-fs-sm: 1rem; /* 16px — UI, Tabellen, Formulare */ --kf-fs-base: 1.125rem; /* 18px — Fließtext (Bestand 16px; 18px liest sich für Eltern am Handy spürbar besser) */ --kf-fs-lg: 1.375rem; /* 22px — Vorspann */ --kf-fs-h6: 1.125rem; /* 18px */ --kf-fs-h5: 1.25rem; /* 20px */ --kf-fs-h4: 1.5rem; /* 24px */ --kf-fs-h3: 1.875rem; /* 30px — behebt die H3