/* ════════════════════════════════════════════════════════════════════ WOLFHARD WASSERSCHADENHILFE — Design Tokens Wird IMMER geladen. Customizer schreibt Inline-Style nach und überschreibt diese Defaults. Farb-Architektur (Phase 8 §36): 4 Basis-Tokens als RGB-Triplets → alle anderen Farben werden davon abgeleitet, entweder per rgb(var(...) / alpha) oder color-mix(). Kein neuer Token darf ohne starken Grund hinzugefügt werden. ════════════════════════════════════════════════════════════════════ */ /* ─── LIGHT MODE (Default) ────────────────────────────────────────── */ :root { /* ═══ 4 SEMANTISCHE BASIS-TOKENS (RGB-Triplets) ═══════════════════ Customizer überschreibt diese Werte per Inline-Style. Alle anderen Farb-Properties werden DAVON abgeleitet. */ --color-dark-rgb: 10 42 60; /* Primäres Dunkel / Text */ --color-light-rgb: 247 249 250; /* Primäres Hell / Hintergrund */ --color-main-rgb: 24 118 162; /* Marken-Petrol / Primär-Akzent — WCAG AA: 4.79:1 on light */ --color-accent-rgb: 220 50 40; /* Notruf-Rot — Primäre Aktion / CTA (Phase 8 §36: war --color-cta-rgb) */ /* ═══ KONSTANTE BRAND-TOKENS — flippen NICHT mit dem Theme ═════════ Werden gespiegelt von --color-dark-rgb / --color-light-rgb im Light-Mode, bleiben aber im Dark-Mode unverändert. Genutzt für Komponenten, die in beiden Modi visuell dunkel sein sollen (Hero-Verlauf, Footer, CTA-Banner, Sidebar-CTA, Prose-CTA). */ --color-brand-dark-rgb: 10 42 60; /* dauerhaft dunkles Brand-Navy */ --color-brand-light-rgb: 247 249 250; /* dauerhaft helles Brand-Cream (Text auf Brand-Dark) */ /* ═══ ABGELEITETE TOKENS (Aliase für Rückwärtskompatibilität) ══════ Diese Properties werden weiterhin von bestehenden Komponenten genutzt und bleiben erhalten. Sie leiten sich alle von den 4 Basis-Tokens ab. */ /* Hintergründe */ --color-bg: rgb(var(--color-light-rgb)); --color-bg-card: rgb(var(--color-light-rgb)); --color-bg-card-alt: rgb(var(--color-dark-rgb) / 0.04); /* Text */ --color-text: rgb(var(--color-dark-rgb)); --color-text-soft: rgb(var(--color-dark-rgb) / 0.8); --color-text-muted: rgb(var(--color-dark-rgb) / 0.65); /* WCAG AA: 4.78:1 on light (was 0.6 → 4.12:1, fail) */ --color-text-faint: rgb(var(--color-dark-rgb) / 0.4); /* Rahmen & Schatten */ --color-border: rgb(var(--color-dark-rgb) / 0.1); --color-shadow: rgb(var(--color-dark-rgb) / 0.08); --color-shadow-lg: rgb(var(--color-dark-rgb) / 0.14); /* Akzent / Marke (Petrol) */ --color-accent: rgb(var(--color-main-rgb)); --color-accent-light: color-mix(in srgb, rgb(var(--color-main-rgb)) 55%, white); --color-accent-dark: color-mix(in srgb, rgb(var(--color-main-rgb)) 80%, black); /* Sekundär-Akzent (Phase 8 §36: jetzt basierend auf --color-dark-rgb) */ --color-secondary: rgb(var(--color-dark-rgb)); --color-secondary-dark: color-mix(in srgb, rgb(var(--color-dark-rgb)) 90%, black); --color-secondary-contrast: #ffffff; /* CTA / Notruf-Rot (Phase 8 §36: basierend auf --color-accent-rgb) */ --color-cta-start: rgb(var(--color-accent-rgb)); --color-cta-end: color-mix(in srgb, rgb(var(--color-accent-rgb)) 92%, black); /* Hero-Verlauf — nutzt konstante Brand-Tokens, bleibt also in beiden Modi dunkel */ --color-hero-start: rgb(var(--color-brand-dark-rgb)); --color-hero-end: color-mix(in srgb, rgb(var(--color-brand-dark-rgb)) 70%, rgb(var(--color-main-rgb))); /* Formulare */ --color-input-bg: rgb(var(--color-light-rgb)); --color-input-border: rgb(var(--color-dark-rgb) / 0.15); /* Sterne / Bewertung — Phase 8 §36: Petrol-Sterne (--color-main-rgb) */ --color-star: rgb(var(--color-main-rgb)); /* Footer — bleibt in beiden Modi dunkel via Brand-Tokens */ --color-footer-bg: rgb(var(--color-brand-dark-rgb)); --color-footer-text: rgb(var(--color-brand-light-rgb) / 0.9); --color-footer-muted: rgb(var(--color-brand-light-rgb) / 0.5); /* Header / Mobile-Bar Transparenz */ --header-bg: rgb(var(--color-light-rgb) / 0.97); --mobile-bar-bg: rgb(var(--color-light-rgb) / 0.95); /* Typografie */ --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Maße */ --max-width: 1120px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Spacing-Skala */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Z-Index-Stufen */ --z-header: 100; --z-mobile-menu: 200; --z-mobile-bar: 150; --z-modal: 300; } /* ─── DARK MODE ───────────────────────────────────────────────────── */ /* Genau 3 der 4 Basis-Tokens werden überschrieben (Phase 8 §36). --color-accent-rgb (Notruf-Rot) bleibt in beiden Modi identisch — es ist eine semantische Konstante, nicht kontextabhängig. */ [data-theme="dark"] { --color-light-rgb: 6 25 35; /* Dark BG — was Light */ --color-dark-rgb: 223 233 238; /* Dark Text — was Dark */ --color-main-rgb: 95 181 216; /* Helleres Petrol für dunklen BG */ } /* ─── BORDER-RADIUS-VARIANTEN (per Customizer) ────────────────────── */ [data-radius="sharp"] { --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; } [data-radius="round"] { --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; } /* ─── DENSITY-KLASSEN (per Customizer, gesetzt via Body-Class) ────── */ /* compact ×0.85 — spacious ×1.15 — comfortable = Default */ body.density-compact { --space-1: 3px; --space-2: 7px; --space-3: 10px; --space-4: 14px; --space-5: 17px; --space-6: 20px; --space-8: 27px; --space-10: 34px; --space-12: 41px; --space-16: 54px; } body.density-spacious { --space-1: 5px; --space-2: 9px; --space-3: 14px; --space-4: 18px; --space-5: 23px; --space-6: 28px; --space-8: 37px; --space-10: 46px; --space-12: 55px; --space-16: 74px; } /* ─── REDUCED MOTION ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }