/* ================================================================ DESIGN TOKENS – ZENTRALE DEFINTION Alle Farben, Größen, Abstände, Schriften HIER definieren ================================================================ */ /* ────────────────────────────────────────────────────────── SCHRIFT-EINBINDUNG (07.2026 aus dem HTML- hierher verschoben – lag dort fälschlich in einem nicht geschlossenen Kommentar und griff für alle Schnitte auf dieselbe Datei zu). Pfad geht von "fonts/" als Geschwister- Ordner der CSS-Datei aus – bitte auf dem Webserver prüfen. ────────────────────────────────────────────────────────── */ @font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/jakarta-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ────────────────────────────────────────────────────────── FARBEN – Primär ────────────────────────────────────────────────────────── */ --color-teal-50: #e7f4f3; --color-teal-100: #c7e8e6; --color-teal-200: #93d2cf; --color-teal-300: #4fb8b3; --color-teal-400: #1fa39e; --color-teal-500: #0e8a86; --color-teal-600: #0b6e6b; --color-teal-700: #0a5957; --color-teal-800: #0b3133; --color-teal-900: #082528; /* Grün – Energiewende, Erfolg */ --color-green-50: #eef7e9; --color-green-100: #d8edcc; --color-green-200: #b6dd9c; --color-green-300: #8fd06b; --color-green-400: #7cc95b; --color-green-500: #5fa63f; --color-green-600: #4e8c33; --color-green-700: #3c6e27; /* Blau – Sekundär */ --color-blue-500: #2e86ca; --color-blue-400: #56a8e6; /* Grau/Ink – Text */ --color-ink-900: #0c2a31; --color-ink-700: #103940; --color-ink-500: #46636b; --color-ink-400: #6e898f; --color-ink-300: #9db1b6; /* Linien */ --color-line-200: #d3e0e0; --color-line-100: #e6eeec; /* Mint – Hintergründe */ --color-mint-50: #f4f8f6; --color-mint-100: #eff4f2; /* Dunkel – Hintergründe */ --color-petrol-700: #0e3c3e; --color-petrol-800: #0b3133; --color-petrol-900: #082528; --color-petrol-950: #061d1f; /* Status-Farben */ --color-success: #5fa63f; --color-warning: #d8932f; --color-danger: #c4533f; --color-error: #e05c3a; /* ────────────────────────────────────────────────────────── TEXT-FARBEN ────────────────────────────────────────────────────────── */ --text-primary: var(--color-ink-900); --text-secondary: var(--color-ink-700); --text-muted: var(--color-ink-500); --text-light: var(--color-ink-400); --text-on-dark: #eaf4f2; --text-on-dark-muted: #b9d6d1; /* ────────────────────────────────────────────────────────── HINTERGRUND-FARBEN ────────────────────────────────────────────────────────── */ --bg-light: #ffffff; --bg-mint: var(--color-mint-100); --bg-dark: var(--color-petrol-800); --bg-darkest: var(--color-petrol-900); /* ────────────────────────────────────────────────────────── SCHRIFTARTEN ────────────────────────────────────────────────────────── */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ────────────────────────────────────────────────────────── SCHRIFTGEWICHTE ────────────────────────────────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ────────────────────────────────────────────────────────── SCHRIFTGROSSEN ────────────────────────────────────────────────────────── */ --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-body-lg: 1.1875rem; --fs-body: 1.0625rem; --fs-body-sm: 0.9375rem; --fs-caption: 0.8125rem; --fs-overline: 0.8125rem; /* ────────────────────────────────────────────────────────── ZEILENHÖHEN ────────────────────────────────────────────────────────── */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-heading: 1.22; --lh-body: 1.6; /* ────────────────────────────────────────────────────────── ABSTÄNDE (Spacing Scale) ────────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ────────────────────────────────────────────────────────── ECKENRADIUS ────────────────────────────────────────────────────────── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-circle: 50%; /* ────────────────────────────────────────────────────────── SCHATTEN ────────────────────────────────────────────────────────── */ --shadow-sm: 0 2px 6px rgba(12, 42, 51, 0.06); --shadow-md: 0 8px 24px rgba(12, 42, 51, 0.08); --shadow-lg: 0 18px 48px rgba(12, 42, 51, 0.12); --shadow-dark: 0 18px 50px rgba(0, 0, 0, 0.45); /* ────────────────────────────────────────────────────────── ÜBERGÄNGE & ANIMATIONEN ────────────────────────────────────────────────────────── */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ────────────────────────────────────────────────────────── Z-INDEX ────────────────────────────────────────────────────────── */ --z-base: 1; --z-sticky: 100; --z-overlay: 800; --z-modal: 900; /* ────────────────────────────────────────────────────────── ERGÄNZUNG (07.2026) – von style.css benötigt, gab es vorher nicht. Farben/Radien/Schatten sind bewusst als ALIAS auf bestehende Werte gesetzt (keine neuen Farben erfunden). Bitte optisch prüfen, ob das passt. ────────────────────────────────────────────────────────── */ --accent-primary: var(--color-teal-500); --accent-bright: var(--color-teal-400); --accent-aqua: var(--color-teal-300); --aqua-500: var(--color-teal-300); --mint-200: #dcebe7; --surface-mint-soft: var(--color-mint-50); /* Für Basis-Reset (07.2026) benötigt, gab es vorher nicht. --ls-snug: identischer Wert wie bestehendes --ls-tight, kein neuer Zahlenwert erfunden. --focus-ring: sichtbarer Tastatur-Fokusring in Signal-Grün. */ --ls-snug: -0.01em; --focus-ring: color-mix(in srgb, var(--color-green-500) 55%, transparent); --border-width: 1px; --border-width-strong: 2px; --radius-xs: 4px; --radius-xl: 24px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(12, 42, 51, 0.05); /* War Alias auf --shadow-md, laut spacing.css (Original) eigener Wert. */ --shadow-card: 0 10px 30px rgba(7, 61, 74, 0.08); /* Dark-field elevation + glow — aus spacing.css (Original-Auslieferung) nachgetragen, fehlte bisher komplett in dieser Datei. */ --glow-ring: 0 0 0 1px rgba(25, 199, 207, 0.25), 0 0 24px rgba(25, 199, 207, 0.18); /* Rest aus spacing.css nachgetragen, aktuell noch ungenutzt, aber für kommende Abschnitte vorgehalten. */ --space-0: 0; --section-pad-y: clamp(3.5rem, 6vw, 7rem); --section-pad-x: clamp(1.25rem, 5vw, 5rem); --container-max: 1200px; --container-wide: 1360px; --measure: 62ch; --focus-ring-width: 3px; --z-toast: 1000; --fs-display-l: 3rem; --lh-relaxed: 1.5; --ls-tight: -0.01em; --ls-wide: 0.02em; --ls-overline: 0.08em; /* Feinere Zwischenschritte der Abstands-Skala, die style.css zusätzlich zu den obigen space-1..10 braucht (Muster: N × 4px) */ --space-0-5: 0.125rem; --space-1-25: 0.3125rem; --space-1-5: 0.375rem; --space-2-25: 0.5625rem; --space-2-5: 0.625rem; --space-3-25: 0.8125rem; --space-3-5: 0.875rem; --space-3-75: 0.9375rem; --space-4-5: 1.125rem; --space-5-5: 1.375rem; --space-6-5: 1.625rem; --space-9-5: 2.375rem; --space-11: 2.75rem; --space-12: 3rem; --space-14: 3.5rem; --space-15: 3.75rem; --space-16: 4rem; --space-18: 4.5rem; --space-20: 5rem; }