/* ============================================================ mahnbescheid — Gemeinsame Design-Tokens Eine zentrale Quelle für Farben, Radien, Spacing und die Schrift-Basis. Wird von index.html UND bestellformular.html geladen, damit beide Seiten exakt dieselben Farben nutzen. Farben in OKLCH; sRGB-Hex-Fallback im @supports-Block unten (Browser < 2023). Vollständige Tabelle: TOKENS.md. Aktive Palette wird per data-palette am gewählt: beide Seiten verwenden "smaragd" (Grün). ============================================================ */ :root{ --c-primary: oklch(0.33 0.08 252); --c-primary-700: oklch(0.27 0.08 252); --c-primary-100: oklch(0.95 0.025 252); --c-primary-050: oklch(0.975 0.012 252); --c-accent: oklch(0.48 0.13 25); --c-accent-050: oklch(0.97 0.02 25); --c-ink: oklch(0.20 0.012 252); --c-ink-soft: oklch(0.36 0.012 252); --c-muted: oklch(0.52 0.008 252); --c-line: oklch(0.88 0.008 252); --c-line-soft: oklch(0.93 0.006 252); --c-surface: oklch(0.992 0.003 80); --c-surface-2: oklch(0.972 0.005 80); --c-dark: #222; --c-dark-border: #333; --logo-flag-black: #15171a; --c-warn: oklch(0.62 0.15 75); --c-ok: oklch(0.55 0.10 155); --maxw: 1200px; --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --pad-y: 64px; font-family: "IBM Plex Sans", system-ui, sans-serif; color: var(--c-ink); background: var(--c-surface); } /* ============================================================ FARBSCHEMAS Jedes Schema setzt nur die vier --c-primary-* Variablen. Aktiv über data-palette am . ============================================================ */ [data-palette="smaragd"]{ --c-primary: oklch(0.42 0.105 168); --c-primary-700: oklch(0.35 0.105 168); --c-primary-100: oklch(0.95 0.025 168); --c-primary-050: oklch(0.975 0.012 168); } [data-density="compact"]{ --pad-y: 44px; } /* ------------------------------------------------------------ Scrollbalken-Platz immer reservieren. Sonst verschiebt sich der zentrierte Inhalt (Header, Nav, …) horizontal, je nachdem ob eine Seite scrollbar ist oder nicht (z. B. index.html vs. bestellformular.html). So sitzen beide Seiten exakt gleich. Fallback für ältere Browser: dauerhafter vertikaler Scrollbalken. ------------------------------------------------------------ */ html{ scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable){ html{ overflow-y: scroll; } } /* ------------------------------------------------------------ Header-Höhe seitenübergreifend identisch. Die index.html hat im Header einen CTA-Button, die bestellformular.html nicht — dadurch wäre deren Header ~1px niedriger. Die Aktionsspalte reserviert daher immer die Höhe des Buttons: line-height 1.2 × 16px + 2×10px Padding + 2×1px Rand = 41,2px. ------------------------------------------------------------ */ .header-actions{ min-height: calc(16px * 1.2 + 22px); } /* ------------------------------------------------------------ LEGACY-FALLBACK — sRGB-Hex für Browser ohne OKLCH-Support ------------------------------------------------------------ */ @supports not (color: oklch(0 0 0)){ :root{ --c-primary: #11365D; --c-primary-700: #00274C; --c-primary-100: #E3F0FF; --c-primary-050: #F1F8FF; --c-accent: #9A3936; --c-accent-050: #FFF0EE; --c-ink: #12161B; --c-ink-soft: #393E43; --c-muted: #66696D; --c-line: #D4D8DD; --c-line-soft: #E5E8EC; --c-surface: #FDFCFA; --c-surface-2: #F7F5F2; --c-warn: #B97600; --c-ok: #3A8357; } [data-palette="smaragd"]{ --c-primary: #005E42; --c-primary-700: #004B30; --c-primary-100: #DFF4EB; --c-primary-050: #F0FAF5; } }