/* ========================================================= BASIS / DESIGN-TOKENS - Globale CSS-Variablen für Farben, Effekte, Animationen - Zentraler Ort für schnelle Theme-Anpassungen ========================================================= */ :root{ /* ===== Premium Surface System ===== */ --radius-xl: 20px; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 10px; --shadow-sm: 0 1px 0 rgba(255,255,255,0.55) inset, 0 10px 28px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04); --shadow-md: 0 1px 0 rgba(255,255,255,0.65) inset, 0 20px 50px rgba(15,23,42,0.12), 0 6px 16px rgba(15,23,42,0.06); --shadow-lg: 0 1px 0 rgba(255,255,255,0.08) inset, 0 28px 80px rgba(0,0,0,0.28), 0 12px 32px rgba(0,0,0,0.14); --shadow-stage: 0 0 0 1px rgba(255,255,255,0.10), 0 1px 0 rgba(255,255,255,0.12) inset, 0 26px 70px rgba(0,0,0,0.45); --stroke-light: rgba(255,255,255,0.14); --stroke-dark: rgba(0,0,0,0.08); --surface: rgba(255,255,255,0.86); --surface-strong: rgba(255,255,255,0.92); --surface-weak: rgba(255,255,255,0.78); --sheen-1: rgba(255,255,255,0.65); --sheen-2: rgba(255,255,255,0); --ease-out: cubic-bezier(.19,1,.22,1); --ease-soft: cubic-bezier(.2,.75,.25,1); --ease-luxe: cubic-bezier(.16,1,.3,1); --motion-fast: 180ms; --motion-base: 320ms; --motion-slow: 760ms; --motion-delay-step: 60ms; --hover-lift: -2px; --accent: #0a84ff; --accent-soft: rgba(10,132,255,0.14); --content-max: 1160px; --text-strong: #11253e; --text-muted: rgba(17,37,62,0.78); --space-section-y: clamp(22px, 3.2vw, 34px); --space-section-x: clamp(14px, 2.2vw, 26px); /* Navigation: Glas-/Premium-Look */ --nav-bg: rgba(22, 22, 22, 0.92); /* edles, mattes Schwarz */ --nav-border: rgba(255, 255, 255, 0.08); /* Footer: leicht dunkler als Nav für klare Hierarchie */ --footer-bg: rgba(18, 18, 18, 0.95); --footer-border: rgba(255, 255, 255, 0.08); /* Seiten-Hintergrund + Textfarben */ --page-bg: #cfd7e2; --header-bg: rgba(53, 50, 47, 0.55); /* dunkles Glas überall gleich */ --text: #222; --white: #fff; /* Interaktionsfarben */ --hover-bg: #1e1e1e; --border: #1e1e1e; /* Eleganter Gradient (Header-Layer / Sheen) */ --header-grad-1: rgba(255,255,255,0.06); --header-grad-2: rgba(255,255,255,0.00); /* Hamburger-Konfiguration (Größe & Timing) */ --burger-w: 22px; --burger-h: 2px; --burger-gap: 6px; --burger-speed: .32s; --burger-ease: cubic-bezier(.2,.75,.25,1); } /* ========================================================= GLOBAL RESET / BOX-SIZING - Berechenbares Layout bei Padding/Border ========================================================= */ *{ box-sizing: border-box; } /* ========================================================= BODY / SEITENBASIS - Grundschrift, Hintergrund, z-index Kontext ========================================================= */ /*