/* ============================================================================ FSLeut · Finanzstarter Design Tokens (tokens.css) ---------------------------------------------------------------------------- Zentrale CSS Custom Properties. Build-frei, additiv. Wird von den gespiegelten Greenfield-Seiten (/, /empfehlung, später /tools) eingebunden. Struktur/Namen 1:1 aus web-mcleut übernommen, Werte auf das Finanzstarter-Designsystem umgestellt (Quelle: finanzstarter-design-guide, Stand 03/2026). Verbindliche Markenfarben: Primary #3C4EEE · Primary Deep #1A2A88 · Accent #FF8801 · Accent Warm #FFB84D · Dark #1A1A2E · Offwhite #F5F5F7 · Muted #6B7280 · Border #E5E7EB. Fonts: Figtree (Body/Headlines/UI, 300-800) · Montserrat (NUR Logo-Wortmarke, 600/700) — via Google Fonts CDN geladen (siehe je Seite), da keine lizenzierten Font-Dateien lokal vorliegen. Self-Hosting ist offener Gate-Punkt. Designrichtung: energetisch-seriös, klar, Finanz-/Reichweiten-tauglich. Orange als echter zweiter Markenpol (nicht nur sparsamer Akzent wie zuvor). ============================================================================ */ :root { /* ---------- Farbe · Primär (Finanzstarter-Blau/Indigo) ------------------- */ --primary-50: #E8EBFF; /* = FS "Primary Light" (exakter Guide-Wert) */ --primary-100: #D3D8FE; --primary-200: #A8B0FD; --primary-300: #7C89FB; --primary-400: #6270F5; --primary-500: #4C5CF2; --primary-600: #3C4EEE; /* = FS "Primary" (exakter Guide-Wert) */ --primary-700: #30409B; --primary-800: #22307E; --primary-900: #1A2A88; /* = FS "Primary Deep" (exakter Guide-Wert) */ --primary: #3C4EEE; /* Marken-Primär (= primary-600) */ --primary-deep: #1A2A88; /* Primary Deep / Gradient-Ende (= primary-900) */ --primary-light: #E8EBFF; /* Icon-BG, Badges, Hover-Flaechen (= primary-50) */ /* ---------- Farbe · Akzent (Orange, jetzt vollwertiger Markenpol) -------- */ --accent-soft: #FFF1E0; /* dezente Flaeche / Tint */ --accent-100: #FFE0B3; --accent: #FF8801; /* = FS "Accent" (exakter Guide-Wert) */ --accent-warm: #FFB84D; /* = FS "Accent Warm" (exakter Guide-Wert, Hover auf Accent-Buttons) */ --accent-strong: #E67A00; /* Kontrast-Variante fuer Hover-Fill/Eyebrow-Text (berechnet, ~10% dunkler als Accent) */ --accent-700: #B36600; /* Text-Kontrast auf hellem Tint (Badges) */ /* ---------- Farbe · Dark (eigenstaendiger Guide-Ton, NICHT Primary-900) -- */ --dark: #1A1A2E; /* = FS "Dark": Fliesstext-Basis, Footer-Background */ /* ---------- Farbe · Neutral / Grau --------------------------------------- */ --gray-50: #F8F9FA; --gray-100: #F1F3F5; --gray-200: #E5E7EB; /* = FS "Border" */ --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; /* = FS "Muted" */ --gray-600: #545B68; --gray-700: #3D4149; --gray-800: #26282E; --gray-900: #1A1A2E; /* = FS "Dark" */ /* ---------- Flächen / Hintergründe --------------------------------------- */ --surface: #FFFFFF; --bg: #FFFFFF; --bg-subtle: #F5F5F7; /* = FS "Offwhite" (exakter Guide-Wert) */ --bg-mist: #F5F5F7; --bg-dark: var(--dark); /* Footer/Dark-Sections = FS "Dark", NICHT Primary-Blau */ /* ---------- Border ------------------------------------------------------- */ --border: rgba(60, 78, 238, 0.10); /* dezent blau-getoenter Rand */ --border-strong: #E5E7EB; /* = FS "Border" (exakter Guide-Wert) */ --border-dark: rgba(255, 255, 255, 0.12); /* ---------- Text --------------------------------------------------------- */ --text: #1A1A2E; /* = FS "Dark" */ --text-muted: #6B7280; /* = FS "Muted" */ --text-soft: #8B93A8; --text-on-primary: #FFFFFF; --text-on-accent: #FFFFFF; --text-on-dark: #E9E9F5; --link: #3C4EEE; --link-hover: #1A2A88; /* ---------- Typografie --------------------------------------------------- Figtree = Body/Headlines/UI. Montserrat = NUR Logo-Wortmarke (kein CSS-Var hier gemeint fuer Fliesstext, siehe --font-logo). */ --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-sans); --font-logo: "Montserrat", sans-serif; --fs-display: clamp(2.5rem, 1.5rem + 5vw, 4.5rem); --fs-h1: clamp(2rem, 1.5rem + 3.5vw, 3.5rem); --fs-h2: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); --fs-h3: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); --fs-lead: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.75rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-eyebrow: 0.05em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---------- Spacing-Skala (4px-Basis) ------------------------------------ */ --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 / Container ------------------------------------------- */ --container: 1200px; --container-narrow: 768px; --container-wide: 1320px; --gutter: clamp(1rem, 4vw, 2rem); /* ---------- Section-Abstände --------------------------------------------- */ --section-y: clamp(3.5rem, 7vw, 6rem); --section-y-sm: clamp(2.5rem, 5vw, 4rem); --section-y-lg: clamp(4.5rem, 9vw, 7.5rem); /* ---------- Radius (exakte Guide-Werte) ---------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ---------- Schatten (Primary-getoent statt Navy-getoent) ---------------- */ --shadow-soft: 0 4px 20px -6px rgba(60, 78, 238, 0.10); --shadow-card: 0 18px 50px -22px rgba(60, 78, 238, 0.16); --shadow-focus: 0 0 0 3px rgba(60, 78, 238, 0.12); /* exakter Guide-Wert (Form-Focus-Ring) */ /* ---------- Motion (exakte Guide-Easing) --------------------------------- */ --transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); --transition-fast: 0.15s ease; /* ---------- Button-Grundwerte ------------------------------------------- */ --btn-radius: var(--radius-pill); --btn-pad-y: 0.85rem; --btn-pad-x: 1.6rem; --btn-min-h: 48px; --btn-font-size: 0.95rem; --btn-font-weight: var(--fw-semibold); /* ---------- Card-Grundwerte --------------------------------------------- */ --card-bg: var(--surface); --card-radius: var(--radius-lg); --card-pad: clamp(1.25rem, 3vw, 2rem); --card-border: 1px solid var(--border); --card-shadow: var(--shadow-soft); }