/* ============================================================================= LeadShield Design Tokens ----------------------------------------------------------------------------- Light-Side : Studio Hauptseite + /sites + /about (:root, default) Dark-Side : /filter Produktseite ([data-theme="dark"]) Tokens sind die einzige Wahrheitsquelle für Farben, Typo, Spacing, Layout. Jede Site-CSS-Datei referenziert nur diese Custom-Properties. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. LIGHT-SIDE (Studio + Sites + About) --------------------------------------------------------------------------- */ :root { /* --- Surface / Background ----------------------------------------------- */ --bg: #F7F8FA; --bg-surface: #FFFFFF; --bg-raised: #EEF0F4; --border: #E3E6EB; --border-strong: #C9CFD8; /* --- Text --------------------------------------------------------------- */ --text-primary: #0B0E14; --text-muted: rgba(11, 14, 20, 0.62); /* AA ~5.2:1 on --bg */ --text-faint: rgba(11, 14, 20, 0.55); /* AA-Large ~3.6:1 (bumped from 0.42 spec for AA compliance — see fonts.css notes) */ --text-inverse: #FFFFFF; /* --- Brand-Accent (Cyan) ------------------------------------------------ */ --accent: #00B8D4; /* Logo, lines, icons, button-bg */ --accent-glow: #00E5FF; /* Hover / Bridge-Echo zur Dark-Side */ --accent-ink: #006B7A; /* AA ~5.5:1 — Cyan als Text-Farbe */ --accent-soft: rgba(0, 184, 212, 0.10); /* Subtle tinted surfaces */ /* --- Sub-Brand: Sites (Coral) ------------------------------------------ */ --accent-coral: #FF6B4A; /* Buttons, accent-strips, icons */ --accent-coral-ink: #B8341A; /* AA ~5.4:1 — Coral als Text-Farbe */ --accent-coral-soft: rgba(255, 107, 74, 0.10); /* --- Sub-Brand: Filter (Electric Cyan, identisch Dark-Side) ------------ */ --accent-filter: #00E5FF; /* Cross-side bridge — auf hellem BG nur als Glow / Linie */ /* --- Logo-Mark Fill ----------------------------------------------------- */ --shield-navy: #0B1929; /* Logo-Schild auf Hell */ --shield-on-dark: #00D9EE; /* Logo-Schild auf Dark — dial-back von #00E5FF für weniger grell */ --shield-mono-light: #FFFFFF; /* Logo-Schild mono weiß */ --shield-mono-dark: #0B1929; /* Logo-Schild mono navy */ /* --- Focus / Interaction ------------------------------------------------ */ --focus-ring: 0 0 0 3px rgba(0, 184, 212, 0.45); --focus-ring-coral: 0 0 0 3px rgba(255, 107, 74, 0.45); /* --- Typography Stacks -------------------------------------------------- */ --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display-dark: "Syne", "Space Grotesk", system-ui, sans-serif; /* nur Dark-Side */ /* --- Type Scale (12 / 14 / 16 / 18 / 24 / 32 / 48 / 64 / 96) ---------- */ --fs-12: 0.75rem; /* 12 — Caption / Micro-Label */ --fs-14: 0.875rem; /* 14 — Small UI / Bullets */ --fs-16: 1rem; /* 16 — Body default */ --fs-18: 1.125rem; /* 18 — Lead / Sub-Headlines */ --fs-24: 1.5rem; /* 24 — H4 / Card-Heads */ --fs-32: 2rem; /* 32 — H3 */ --fs-48: 3rem; /* 48 — H2 */ --fs-64: 4rem; /* 64 — H1 Mobile */ --fs-96: 6rem; /* 96 — Hero Display Desktop */ /* --- Line-Heights ------------------------------------------------------- */ --lh-tight: 1.04; /* Hero Display, große Headlines */ --lh-snug: 1.18; /* H2 / H3 */ --lh-normal: 1.45; /* Sub-Headlines */ --lh-relaxed: 1.6; /* Body */ --lh-loose: 1.75; /* Editorial-Body (long-form /about) */ /* --- Letter-Spacing ----------------------------------------------------- */ --ls-tight: -0.02em; /* Display */ --ls-snug: -0.01em; /* H2/H3 */ --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.12em; /* DM-Mono Labels uppercase */ /* --- Font-Weight -------------------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* --- Spacing-Scale (8px Basis) ---------------------------------------- */ --space-1: 0.5rem; /* 8 */ --space-2: 1rem; /* 16 */ --space-3: 1.5rem; /* 24 */ --space-4: 2rem; /* 32 */ --space-6: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-12: 6rem; /* 96 */ --space-16: 8rem; /* 128 */ --space-24: 12rem; /* 192 — extra für Hero-Atmer */ /* --- Section Padding (Y) ------------------------------------------------ */ --section-y: clamp(4rem, 8vw, 8rem); /* 64 → 128 */ --section-y-lg: clamp(5rem, 10vw, 10rem); /* 80 → 160 — Hero */ /* --- Layout ------------------------------------------------------------- */ --container-max: 1280px; --container-pad: clamp(1.25rem, 3vw, 2rem); /* 20 → 32 */ --gutter: 1.5rem; /* 24 */ --grid-cols: 12; /* --- Radii -------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* --- Shadows (sparsam, kein heavy depth — minimalist) ----------------- */ --shadow-flat: 0 1px 0 0 rgba(11, 14, 20, 0.04); --shadow-card: 0 1px 2px rgba(11, 14, 20, 0.04), 0 8px 24px -12px rgba(11, 14, 20, 0.08); --shadow-lift: 0 2px 4px rgba(11, 14, 20, 0.06), 0 18px 40px -16px rgba(11, 14, 20, 0.12); /* --- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bridge: cubic-bezier(0.86, 0, 0.07, 1); /* harter Bridge-Wechsel zur Dark-Side */ --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-bridge: 720ms; /* --- Z-Layers ----------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; } /* ----------------------------------------------------------------------------- 2. DARK-SIDE (LeadShield Filter — /filter) Token-Set unverändert aus Leadshield_Web_Optimized/ übernommen + ergänzt. --------------------------------------------------------------------------- */ [data-theme="dark"] { /* --- Surface / Background ----------------------------------------------- */ --bg: #090909; --bg-surface: #0F0F11; --bg-raised: #161618; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); /* --- Text --------------------------------------------------------------- */ --text-primary: #FFFFFF; --text-muted: rgba(255, 255, 255, 0.50); /* AA ~4.9:1 */ --text-faint: rgba(255, 255, 255, 0.34); /* AA-Large only */ --text-inverse: #0B0E14; /* --- Accent (Cyan stays — bridge) -------------------------------------- */ --accent: #00E5FF; /* AA ~13.9:1 auf #090909 */ --accent-glow: rgba(0, 229, 255, 0.18); /* Soft bloom */ --accent-ink: #00E5FF; /* Cyan ist auf Dark direkt text-tauglich */ --accent-soft: rgba(0, 229, 255, 0.10); /* --- Focus -------------------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(0, 229, 255, 0.55); /* --- Typography Stack (Dark-Side bevorzugt Syne als Display) ----------- */ --font-display: var(--font-display-dark); /* --- Shadows (Dark-Side nutzt Glow statt Drop-Shadow) ----------------- */ --shadow-flat: 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-card: 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 0 24px -4px rgba(0, 229, 255, 0.08); --shadow-lift: 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 0 48px -8px rgba(0, 229, 255, 0.18); /* --- Dot-Grid BG (Signature der Dark-Side) ----------------------------- */ --dot-grid: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 26px 26px; } /* ----------------------------------------------------------------------------- 3. GLOBAL DEFAULTS (token-driven, side-agnostic) --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; /* 1rem = 16px Baseline */ -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-relaxed); font-weight: var(--fw-regular); } ::selection { background: var(--accent); color: var(--text-inverse); } [data-theme="dark"] ::selection { background: var(--accent); color: var(--bg); } /* ----------------------------------------------------------------------------- 4. REDUCED-MOTION FALLBACK --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-bridge: 1ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------------- Skip-to-content link (A11y — Tastatur-User springen am Header vorbei) Versteckt bis Focus. Beim Tabben sichtbar oben links. --------------------------------------------------------------------------- */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; padding: 12px 20px; background: var(--text-primary, #0B0E14); color: var(--text-inverse, #FFFFFF); font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 6px; transition: top 0.18s ease; } .skip-link:focus, .skip-link:focus-visible { top: 16px; outline: 2px solid var(--accent, #00B8D4); outline-offset: 2px; }