/* ============================================================ K-I-X.eu — Design Tokens (v3.0) Stand: 18.08.2026 Quelle: KIX-EU-Astro/src/styles/tokens.css Was sich gegenueber v2.1 geaendert hat: Die Datei traegt nicht laenger das Raucamp-Grundthema mit K-I-X als Aufsatz. Sie IST jetzt K-I-X: Petrolgruen #1A6B5A und Gold #C9952C sind raus, an ihrer Stelle steht die Gruen-Familie der aktuellen Seite. FARBREGEL („Variante A“) — die wichtigste Regel dieser Datei: Lime #6DC253 ist eine FLAECHENfarbe, keine Schriftfarbe. Als Text auf Weiss kommt es auf 2,21:1 und faellt damit durch jede Pruefung. Fuer Schrift, Links und Hover gibt es --color-accent-text #3B7829 (5,38:1). Wer Lime als color: setzt, macht die Seite unlesbar. ============================================================ */ /* === SCHRIFTEN === Variable Fonts: eine Datei je Familie deckt 300–800 ab. Drei Dateien statt der frueheren neun Schnitte. Die Dateien liegen unter /fonts/. */ /* Winkel fuer den rotierenden Kartenrahmen. Ohne @property waere ein conic-gradient nicht animierbar — Browser interpolieren selbstdefinierte Eigenschaften sonst nicht, der Rand stuende einfach still. */ @property --winkel { syntax: ''; initial-value: 0deg; inherits: false; } :root { /* === PRIMAERFARBE === Sattgruen. Traegt Headlines, Kennzahlenbaender, Tabellenkoepfe und die tragende Bento-Kachel. */ --color-primary: #1B6B2A; /* 6,60:1 auf Weiss */ --color-primary-light: #3A9B42; /* Hover, Rahmen auf dunklem Grund */ --color-primary-dark: #0D2912; /* Footer, Ergebnis-Hero, Schrift auf Lime */ --color-primary-mid: #2A7A38; /* Flaechen INNERHALB dunkelgruener Blöcke */ --color-brand: #3A9B42; /* Logo-Bezug, farbige Headlines */ /* === AKZENT === Zwei getrennte Rollen, siehe Farbregel im Kopf. */ --color-accent: #6DC253; /* Lime — NUR Flaechen, nie Schrift */ --color-accent-text: #3B7829; /* Schrift, Links, Hover (5,38:1) */ --color-accent-light: #A8D86B; /* Flaechen und Schrift auf dunklem Grund */ --color-accent-dark: #2E5F20; /* Rahmen, Active-Zustand */ /* === NEUTRALS === */ --color-text: #1A1A1A; /* 17,40:1 auf Weiss */ --color-text-secondary: #4A5A4E; /* Gruenstichiges Grau, 7,33:1 */ --color-surface: #F0F7F0; /* Hero, Seitenkopf */ --color-surface-alt: #F4FAF5; /* Sektionswechsel, Chips, Hinweise */ --color-background: #FAFAF7; /* Leicht warmes Off-White, kein reines Weiss, kein Cremeton #F7F5F2 (wirkte in der durchgehend kuehlgruenen Palette aufgeklebt). Manuell nachgezogen 2026-08-23, von Andreas lokal bereits so entschieden (#FAFAF7), aber wegen dieses einzelnen Werts keine neue Paketlieferung erzeugt. */ /* --color-header bleibt nur als Zeiger stehen: die Kopfzeile nutzt bewusst --color-background. Cremeweiss #F7F5F2 aus dem Raucamp-Erbe, nicht neu verwenden. */ --color-header: #F7F5F2; --color-white: #FFFFFF; --color-border: #D6E3D8; /* Rasterlinien, Kartenraender */ --color-border-strong: #B4CDB8; /* Konturen, Trennlinien, Knopfraender */ --color-outline: #6F8C77; /* Konturziffern, 3,69:1 auf Weiss */ /* === AUF DUNKELGRUENEM GRUND === Diese vier waren bisher an rund 50 Stellen als Hexwert einbetoniert. Auf --color-primary bzw. --color-primary-dark geprueft. */ --color-on-dark: #DCE9DE; /* Fliesstext, 5,26:1 auf primary */ --color-on-dark-link: #C5E88A; /* Links, 4,80:1 auf primary */ --color-on-dark-strong: #FFFFFF; /* Headlines, 6,60:1 auf primary */ --color-border-dark: #2A5A32; /* Trennlinien im Footer */ /* === FEEDBACK (sparsam) === Gold und Brannt-Orange bleiben als einzige Nicht-Gruens erhalten — eine Warnung in Gruen waere keine Warnung. */ --color-success: #1B6B2A; --color-warning: #C9952C; --color-warning-text: #8A6410; /* 5,37:1 — Gold selbst reicht als Schrift nicht */ --color-error: #C2622D; --color-error-text: #8A4520; /* 5,90:1 auf --color-error-surface */ --color-error-surface: #FBE6D8; --color-info: #1B6B2A; /* === TYPOGRAFIE === */ --font-headline: 'Montserrat', sans-serif; --font-body: 'Source Sans 3', sans-serif; --font-code: 'JetBrains Mono', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* wurde in components.css benutzt, war nie definiert */ /* === SPACING === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* === LAYOUT === */ --max-width: 1200px; --max-width-text: 720px; --header-h: 68px; /* feste Kopfzeile — Seiten muessen darunter beginnen */ --radius: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(26, 26, 26, .06); --shadow-md: 0 4px 10px rgba(26, 26, 26, .08); --shadow-lg: 0 14px 32px rgba(26, 26, 26, .10); --t-fast: 150ms ease; --t-normal: 250ms ease; --t-slow: 400ms ease; --ease-out: cubic-bezier(.16, 1, .3, 1); /* === ALTE NAMEN === components.css benutzt an vielen Stellen noch die Schreibweise aus v2.1. Statt 200 Fundstellen umzubenennen zeigen die alten Namen hier auf die neuen — beide Schreibweisen liefern denselben Wert. */ --border-radius: var(--radius); --border-radius-md: var(--radius-md); --border-radius-lg: var(--radius-lg); --border-radius-xl: var(--radius-xl); --border-radius-full: var(--radius-full); --transition-fast: var(--t-fast); --transition-normal: var(--t-normal); --transition-slow: var(--t-slow); /* === BREAKPOINTS (Referenz) === */ /* Mobile < 640px · Tablet 640–1024px · Desktop > 1024px · Wide > 1280px */ } /* ============================================================ DUNKLE ANSICHT Die aktuelle Seite fuehrt keinen Umschalter mehr — dieser Block ist die Fortschreibung des frueheren Mint-Themas in der Gruen-Familie. Er greift nur, wenn jemand data-theme="dark" setzt. Grundgedanke: kein reines Schwarz. Der Grund ist ein sehr dunkles Gruen, damit die Palette auch im Dunkeln zur Marke gehoert. Lime traegt hier mehr als im Hellen — auf dunklem Grund hat es endlich den Kontrast, der ihm auf Weiss fehlt (8,19:1). ============================================================ */ [data-theme="dark"] { --color-primary: #7ECF63; /* Interaktion, 9,48:1 auf background */ --color-primary-light: #A8D86B; --color-primary-dark: #0A140C; --color-primary-mid: #1F4A28; --color-brand: #A8D86B; --color-accent: #6DC253; --color-accent-text: #8FD478; /* 8,48:1 — im Dunkeln muss der Text HELLER werden, nicht dunkler */ --color-accent-light: #C5E88A; --color-accent-dark: #4E9B3A; --color-text: #E8F0E9; /* 15,59:1 */ --color-text-secondary: #A3B6A7; /* 7,67:1 */ --color-surface: #16221A; --color-surface-alt: #1B2A1F; --color-background: #0F1811; --color-header: #0F1811; --color-white: #FFFFFF; --color-border: #2A3D2F; --color-border-strong: #3D5643; --color-outline: #6F8C77; --color-on-dark: #DCE9DE; --color-on-dark-link: #C5E88A; --color-on-dark-strong: #FFFFFF; --color-border-dark: #2A3D2F; --color-success: #7ECF63; --color-warning: #E0B65A; --color-warning-text: #E0B65A; --color-error: #E08A5E; --color-error-text: #E8A87F; --color-error-surface: #2E1D14; --color-info: #7ECF63; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 10px rgba(0, 0, 0, .48); --shadow-lg: 0 14px 32px rgba(0, 0, 0, .55); }