/* ───────────────────────────────────────────────────────── MGA Lobpreis — Design Tokens Brand: dark-teal → lime gradient (Logo) Modes: light / dark · Brand-Intensität: dezent / mutig ───────────────────────────────────────────────────────── */ /* Fonts werden SELBST gehostet über public/fonts.css (im vor dieser Datei eingebunden) — kein Google-CDN mehr (Zuverlässigkeit + DSGVO). */ :root { /* ── Type ──────────────────────────────────────── */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ── Brand raw (Logo) ──────────────────────────── */ --brand-deep: oklch(34% 0.07 195); /* dunkles Teal aus Logo */ --brand-mid: oklch(54% 0.13 170); /* Mittelton */ --brand-bright: oklch(70% 0.19 135); /* helles Lime aus Logo */ --brand-grad: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-mid) 45%, var(--brand-bright) 100%); --brand-grad-soft: linear-gradient(135deg, oklch(94% 0.04 175), oklch(95% 0.06 135)); /* ── Spacing ───────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* ── Radii ─────────────────────────────────────── */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ── Strokes ──────────────────────────────────── */ --stroke-1: 1px; --stroke-2: 1.5px; /* ── Motion ────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --d-fast: 120ms; --d-base: 180ms; --d-slow: 260ms; /* ── Z-Layers ──────────────────────────────────── */ --z-base: 1; --z-sticky: 10; --z-overlay: 100; --z-toast: 200; } /* ═══════════════════════════════════════════════════ LIGHT — default ═══════════════════════════════════════════════════ */ :root, :root[data-mode="light"] { --bg: oklch(98.5% 0.005 160); --bg-2: oklch(96.5% 0.008 160); --surface: oklch(100% 0 0); --surface-2: oklch(97% 0.006 170); --surface-3: oklch(94% 0.01 170); --fg: oklch(22% 0.025 195); --fg-2: oklch(34% 0.022 190); --muted: oklch(50% 0.018 185); --muted-2: oklch(63% 0.014 180); --border: oklch(91% 0.012 175); --border-strong:oklch(82% 0.018 175); --divider: oklch(94% 0.008 175); --shadow-sm: 0 1px 2px oklch(20% 0.02 195 / 0.06); --shadow-md: 0 4px 14px -6px oklch(20% 0.02 195 / 0.12), 0 1px 2px oklch(20% 0.02 195 / 0.05); --shadow-lg: 0 24px 50px -20px oklch(20% 0.02 195 / 0.22), 0 4px 10px -2px oklch(20% 0.02 195 / 0.08); --shadow-glow: 0 0 0 4px var(--accent-soft); --tag-warn-bg: oklch(96% 0.05 80); --tag-warn-fg: oklch(40% 0.13 70); --tag-warn-bd: oklch(86% 0.08 80); --tag-danger-bg: oklch(95% 0.04 25); --tag-danger-fg: oklch(42% 0.16 25); --tag-danger-bd: oklch(85% 0.08 25); --tag-info-bg: oklch(95% 0.04 240); --tag-info-fg: oklch(42% 0.13 240); --tag-success-bg: oklch(94% 0.05 145); --tag-success-fg: oklch(36% 0.12 145); --tag-success-bd: oklch(82% 0.09 145); --tag-neutral-bg: oklch(95% 0.006 175); --tag-neutral-fg: oklch(42% 0.015 185); --tag-neutral-bd: oklch(88% 0.012 175); --pdf-paper: oklch(99% 0.003 175); --pdf-canvas: oklch(94% 0.006 175); } /* ═══════════════════════════════════════════════════ DARK ═══════════════════════════════════════════════════ */ :root[data-mode="dark"] { --bg: oklch(15% 0.018 200); --bg-2: oklch(18% 0.022 200); --surface: oklch(20% 0.025 198); --surface-2: oklch(24% 0.026 198); --surface-3: oklch(28% 0.028 195); --fg: oklch(97% 0.008 170); --fg-2: oklch(86% 0.012 170); --muted: oklch(66% 0.018 175); --muted-2: oklch(52% 0.018 180); --border: oklch(30% 0.022 195); --border-strong:oklch(40% 0.028 190); --divider: oklch(25% 0.022 195); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4); --shadow-md: 0 4px 16px -6px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.35); --shadow-lg: 0 24px 56px -20px oklch(0% 0 0 / 0.65), 0 4px 12px -4px oklch(0% 0 0 / 0.45); --shadow-glow: 0 0 0 4px var(--accent-soft); --tag-warn-bg: oklch(28% 0.07 80); --tag-warn-fg: oklch(85% 0.12 80); --tag-warn-bd: oklch(40% 0.10 80); --tag-danger-bg: oklch(28% 0.08 25); --tag-danger-fg: oklch(84% 0.14 25); --tag-danger-bd: oklch(42% 0.13 25); --tag-info-bg: oklch(28% 0.06 240); --tag-info-fg: oklch(84% 0.10 240); --tag-success-bg: oklch(28% 0.07 145); --tag-success-fg: oklch(84% 0.13 145); --tag-success-bd: oklch(42% 0.10 145); --tag-neutral-bg: oklch(26% 0.018 195); --tag-neutral-fg: oklch(78% 0.014 180); --tag-neutral-bd: oklch(36% 0.022 195); --pdf-paper: oklch(96% 0.005 175); --pdf-canvas: oklch(12% 0.018 195); } /* ═══════════════════════════════════════════════════ BRAND INTENSITÄT — Akzent-Schichten - dezent: gedeckter Teal-Akzent, kein Gradient in UI - mutig: saftiger Brand-Akzent + Gradient für Hero ═══════════════════════════════════════════════════ */ /* Default = mutig */ :root, :root[data-brand="mutig"] { --accent: oklch(54% 0.14 165); --accent-hover: oklch(46% 0.13 170); --accent-press: oklch(40% 0.11 175); --accent-soft: oklch(94% 0.05 160); --accent-soft-2: oklch(89% 0.07 155); --accent-fg: oklch(99% 0 0); --accent-border: oklch(78% 0.10 160); --hero-bg: var(--brand-grad); --hero-fg: oklch(99% 0 0); --on-accent-muted: oklch(99% 0.008 175 / 0.78); } :root[data-brand="dezent"] { --accent: oklch(46% 0.085 178); --accent-hover: oklch(38% 0.09 178); --accent-press: oklch(32% 0.09 178); --accent-soft: oklch(95% 0.025 175); --accent-soft-2: oklch(92% 0.035 175); --accent-fg: oklch(99% 0 0); --accent-border: oklch(82% 0.05 175); --hero-bg: var(--surface); --hero-fg: var(--fg); --on-accent-muted: oklch(99% 0 0 / 0.78); } /* Dark-mode tweak: heller accent für Kontrast */ :root[data-mode="dark"][data-brand="mutig"] { --accent: oklch(72% 0.18 145); --accent-hover: oklch(78% 0.18 142); --accent-press: oklch(66% 0.17 150); --accent-soft: oklch(28% 0.06 160); --accent-soft-2: oklch(32% 0.08 158); --accent-fg: oklch(15% 0.04 180); --accent-border: oklch(40% 0.10 158); } :root[data-mode="dark"][data-brand="dezent"] { --accent: oklch(70% 0.12 178); --accent-hover: oklch(76% 0.12 178); --accent-press: oklch(62% 0.11 178); --accent-soft: oklch(26% 0.04 178); --accent-soft-2: oklch(30% 0.05 178); --accent-fg: oklch(15% 0.025 195); --accent-border: oklch(38% 0.06 178); } /* ── Base reset & type rhythm ─────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: var(--ui-font-size, 14px); line-height: 1.45; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } /* UI-Schriftgröße (Einstellungen → Darstellung) — skaliert die Basis-Schrift. */ :root[data-font-size="s"] { --ui-font-size: 13px; } :root[data-font-size="m"] { --ui-font-size: 14px; } :root[data-font-size="l"] { --ui-font-size: 15.5px; } button { font-family: inherit; } a { color: inherit; } /* Type scale (semantic) */ .t-display { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; } .t-h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; } .t-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; } .t-h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; } .t-h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.008em; line-height: 1.3; } .t-body { font-size: 14px; font-weight: 400; line-height: 1.5; } .t-small { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--muted); } .t-caption { font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--muted); } .t-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; } .t-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .t-num { font-variant-numeric: tabular-nums; }