/* ========================================================================= Design Tokens — BaurechtGPT / FORUM VERLAG HERKERT ------------------------------------------------------------------------- Single source of truth für Farben, Spacing, Typografie, Schatten, Radien, Z-Index und Motion. Hex-/Pixelwerte gehören ausschließlich hierhin. Architekturprinzipien: - Fluid Typography via clamp() (skaliert zwischen 320px und 1440px Viewport). - Root-Font-Size bleibt fix 16px → rem-Spacings sind stabil, Schrift skaliert unabhängig. So bleibt Browser-Zoom des Nutzers wirksam. - Line-Heights sind unitless, damit sie mit der Schriftgröße mitskalieren. - Brand-Token (Roh-Hex) NICHT direkt in Komponenten nutzen — stattdessen die semantischen Aliase (--surface-*, --text-*, --border-*, --state-*). - Preferenzen (Dark-Mode, hoher Kontrast, Reduced-Motion) werden hier in den Token-Layer eingebaut. Komponenten müssen nichts wissen. ========================================================================= */ :root { color-scheme: light; /* ==================================================================== 1) Brand & Neutrals (Rohwerte – nicht direkt in Komponenten nutzen) ==================================================================== */ /* Brand */ --brand-blue: #0E3A66; /* 8.5:1 auf #FFFFFF — AAA für normalen Text */ --brand-blue-strong: #082A4D; --brand-blue-soft: #E5EEF6; --brand-accent: #FFBB0A; /* Signal-Gelb */ --brand-accent-strong: #FF9D00; /* Hover: satteres Gold (nicht abgedunkelt wie #E0A100) */ /* Neutrals */ --neutral-0: #FFFFFF; --neutral-50: #F7F7F7; --neutral-100: #EFEFEF; --neutral-200: #DFDFDF; --neutral-300: #C7C7C7; --neutral-400: #9A9A9A; --neutral-500: #6E6E6E; --neutral-600: #5A5A5A; /* 7.0:1 auf weiß — AAA */ --neutral-700: #404040; --neutral-800: #2A2A2A; --neutral-900: #111111; /* States (Rohwerte) */ --state-success-700: #1F6E33; --state-success-100: #E1F1E5; --state-warning-700: #8A6D00; --state-warning-100: #FFF4D1; --state-danger-700: #8A1A1A; --state-danger-100: #FBE1E1; --state-info-700: var(--brand-blue); --state-info-100: var(--brand-blue-soft); /* ==================================================================== 2) Semantik-Layer (DAS hier in Komponenten verwenden) ==================================================================== */ --surface-default: var(--neutral-0); --surface-raised: var(--neutral-50); --surface-sunken: var(--neutral-100); --surface-brand: var(--brand-blue); --surface-brand-soft:var(--brand-blue-soft); --surface-inverse: var(--neutral-800); --text-strong: var(--neutral-900); --text-default: var(--neutral-800); --text-muted: var(--neutral-600); --text-inverse: var(--neutral-0); --text-on-brand: var(--neutral-0); --text-link: var(--brand-blue); --text-link-hover: var(--brand-blue-strong); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-500); --border-focus: var(--brand-blue); --state-success-fg: var(--state-success-700); --state-success-bg: var(--state-success-100); --state-warning-fg: var(--state-warning-700); --state-warning-bg: var(--state-warning-100); --state-danger-fg: var(--state-danger-700); --state-danger-bg: var(--state-danger-100); --state-info-fg: var(--state-info-700); --state-info-bg: var(--state-info-100); /* Marker- und Erforderlich-Stern */ --color-required: var(--state-danger-fg); /* ==================================================================== 3) Typografie ==================================================================== */ --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif; /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-bold: 700; --fw-black: 900; /* Fluid Type-Scale (clamp) — Min ~ 320px, Max ~ 1440px Viewport. Diese Werte ersetzen die alten --fs-xs/sm/base/md/lg/xl/2xl/3xl. */ --fs-12: clamp(0.75rem, 0.71rem + 0.20vw, 0.8125rem); --fs-14: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem); --fs-16: clamp(1rem, 0.94rem + 0.30vw, 1.125rem); --fs-18: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --fs-21: clamp(1.3125rem, 1.20rem + 0.50vw, 1.5rem); --fs-24: clamp(1.5rem, 1.35rem + 0.70vw, 1.875rem); --fs-30: clamp(1.875rem, 1.60rem + 1.20vw, 2.5rem); --fs-38: clamp(2.375rem, 2.00rem + 1.70vw, 3.25rem); --fs-48: clamp(3rem, 2.50rem + 2.20vw, 4.25rem); /* Legacy-Aliase (kompatibel mit altem System) */ --fs-xs: var(--fs-12); --fs-sm: var(--fs-14); --fs-base: var(--fs-16); --fs-md: var(--fs-18); --fs-lg: var(--fs-21); --fs-xl: var(--fs-24); --fs-2xl: var(--fs-30); --fs-3xl: var(--fs-38); /* Unitless line-heights — skalieren mit font-size */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.65; --lh-loose: 1.75; /* Letter-spacing für Caps/Tagline */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ==================================================================== 4) Spacing-Skala (rem-basiert, Root bleibt fix 16px) ==================================================================== */ --space-0: 0; --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 */ --space-12: 12rem; /* 192px */ /* Fluid Section-Padding */ --space-section: clamp(3rem, 6vw + 1rem, 6rem); --space-section-lg: clamp(4.5rem, 8vw + 2rem, 9rem); /* ==================================================================== 5) Radien ==================================================================== */ /* Scharfkantiges System - keine runden Ecken. Aliase bleiben für Backward-Compat erhalten, sind aber alle 0. Ausnahme: explizite Kreise (Avatare, Spinner) nutzen direkt border-radius: 50% in der Komponente, NICHT diese Tokens. */ --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; /* ==================================================================== 6) Schatten ==================================================================== */ --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 1px rgba(17, 17, 17, 0.04); --shadow-2: 0 4px 8px -2px rgba(17, 17, 17, 0.08), 0 2px 4px -2px rgba(17, 17, 17, 0.06); --shadow-3: 0 12px 24px -8px rgba(17, 17, 17, 0.16), 0 4px 8px -4px rgba(17, 17, 17, 0.08); /* ==================================================================== 7) Focus & A11y ==================================================================== */ --focus-ring-color: color-mix(in srgb, var(--brand-blue) 60%, transparent); --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring: 0 0 0 var(--focus-ring-offset) var(--surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); /* Touch-Target — WCAG 2.5.5 (Target Size) AAA = 44px */ --min-touch: 2.75rem; /* Header-Höhen — werden per JS in lib/ui.js gesetzt (ResizeObserver). Fallbacks sinnvoll, damit scroll-padding / Hero-Höhe nicht 0 sind, falls JS aus. */ --header-h: 5rem; --meta-nav-h: 2.75rem; --scroll-anchor-offset: calc(var(--header-h) + var(--space-3)); /* ==================================================================== 8) Z-Index-Skala ==================================================================== */ --z-base: 0; --z-sticky: 100; --z-header: 200; --z-overlay: 800; --z-dialog: 900; --z-toast: 1000; /* ==================================================================== 9) Layout / Container ==================================================================== */ --container-inline-padding: clamp(1rem, 4vw, 2rem); --container-prose: 65ch; --container-md: 48rem; /* 768px */ --container-lg: 80rem; /* 1280px */ --container-xl: 96rem; /* 1536px */ --container-2xl: 102.375rem; /* 1638px — Legacy-Maximum */ /* ==================================================================== 10) Motion ==================================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; --duration-4: 500ms; /* Legacy-Aliase */ --transition-fast: var(--duration-1) var(--ease-out); --transition-base: var(--duration-2) var(--ease-out); --transition-slow: var(--duration-4) var(--ease-out); /* ==================================================================== 11) Hero-Overlay (Gradient statt mix-blend-mode-Trapez) ==================================================================== */ --hero-overlay: linear-gradient( 100deg, rgba(14, 58, 102, 0.88) 0%, rgba(14, 58, 102, 0.72) 38%, rgba(14, 58, 102, 0.32) 78%, rgba(14, 58, 102, 0.10) 100% ); --hero-overlay-soft: linear-gradient( 100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.45) 80%, rgba(255, 255, 255, 0.10) 100% ); /* Gestapeltes Hero (Text + Screenshot): gleichmäßiger Kontrast auf schmalen Viewports */ --hero-overlay-mobile: linear-gradient( 180deg, rgba(14, 58, 102, 0.94) 0%, rgba(14, 58, 102, 0.90) 42%, rgba(14, 58, 102, 0.86) 100% ); /* ==================================================================== 11b) Inline-Icons (Data-URL) ---------------------------------------------------------------- Die UI-Icons sind als Data-URL eingebettet, damit sie auch beim Aufruf der Seite über file:/// funktionieren (Chrome blockiert sonst CSS-mask-Requests cross-origin) und keinen separaten HTTP- Request verursachen. Nur für die fünf Mask-Icons. Foto-/Bild- Icons (clock, law-book, …) bleiben als -Datei. ==================================================================== */ --icon-check: url("data:image/svg+xml;utf8,"); --icon-alert-circle: url("data:image/svg+xml;utf8,"); --icon-chevron-down: url("data:image/svg+xml;utf8,"); --icon-x: url("data:image/svg+xml;utf8,"); /* ==================================================================== 12) Legacy-Aliase für Komponenten, die noch alte Token-Namen nutzen. Bitte in neuen Komponenten NICHT mehr verwenden. ==================================================================== */ --primary-blue: var(--brand-blue); --primary-blue-700: var(--brand-blue-strong); --primary-blue-100: var(--brand-blue-soft); --signal-orange: var(--brand-accent); --mark-red: var(--state-danger-fg); --dark-grey: var(--neutral-700); --blackish-grey: var(--neutral-800); --typo-grey: var(--text-muted); --background-fond-grey: var(--surface-sunken); --line-grey: var(--border-default); --white: var(--neutral-0); --black: var(--neutral-900); --color-text: var(--text-default); --color-text-muted: var(--text-muted); --color-text-inverse: var(--text-inverse); --color-bg: var(--surface-default); --color-bg-alt: var(--surface-raised); --color-border: var(--border-default); --color-link: var(--text-link); --color-success: var(--state-success-fg); --color-warning: var(--state-warning-fg); --color-error: var(--state-danger-fg); --container-width: 100%; --container-max: var(--container-2xl); --container-narrow-max: var(--container-md); --section-py: var(--space-section); --section-py-lg: var(--space-section-lg); --shadow-xs: var(--shadow-1); --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-2); --shadow-xl: var(--shadow-3); } /* ========================================================================= Root-Defaults - Root-Font-Size bleibt fest bei 16px — Spacings/Layouts stabil, Schrift skaliert über clamp() unabhängig. - scroll-padding-top sorgt dafür, dass Sprunglinks unter dem sticky-Header sauber landen. ========================================================================= */ html { font-size: 16px; font-family: var(--font-sans); scroll-padding-top: var(--scroll-anchor-offset); } /* ========================================================================= Reduced motion ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --duration-1: 0ms; --duration-2: 0ms; --duration-3: 0ms; --duration-4: 0ms; --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================= Prefers-contrast: more Verstärkt Borders, Focus-Ring und Muted-Text für Personen mit erhöhtem Kontrastbedarf (Windows High-Contrast, macOS Increase Contrast, etc.) ========================================================================= */ @media (prefers-contrast: more) { :root { --text-muted: var(--text-default); --border-subtle: var(--border-strong); --border-default: var(--border-strong); --focus-ring-width: 4px; --focus-ring-color: var(--brand-blue); } } /* ========================================================================= Prefers-color-scheme: dark Nur Surface-/Text-/Border-Aliase werden umgemappt — Brand bleibt blau. Bilder bekommen eine sehr leichte Dämpfung. ========================================================================= */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --surface-default: #11161D; --surface-raised: #1A2129; --surface-sunken: #0C1015; --surface-brand: var(--brand-blue); --surface-brand-soft:#16263A; --surface-inverse: #F2F4F7; --text-strong: #F2F4F7; --text-default: #E4E7EC; --text-muted: #B5BAC1; --text-inverse: #11161D; --text-on-brand: #FFFFFF; --text-link: #7FB6E8; --text-link-hover: #A7CCEC; --border-subtle: #232A33; --border-default: #2F3742; --border-strong: #4A535F; --border-focus: #7FB6E8; --focus-ring-color: color-mix(in srgb, #7FB6E8 70%, transparent); --state-success-bg: #142A1B; --state-warning-bg: #2B2208; --state-danger-bg: #2A1212; --state-info-bg: #16263A; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-3: 0 16px 32px rgba(0, 0, 0, 0.6); /* Legacy-Aliase nachführen */ --color-text: var(--text-default); --color-text-muted: var(--text-muted); --color-bg: var(--surface-default); --color-bg-alt: var(--surface-raised); --color-border: var(--border-default); --background-fond-grey: var(--surface-sunken); --white: var(--surface-default); --blackish-grey: var(--text-strong); } img, picture { filter: brightness(0.94) contrast(1.02); } } /* ========================================================================= Forced-colors (Windows High Contrast) Sichtbarkeit von Focus + Buttons garantieren. ========================================================================= */ @media (forced-colors: active) { :root { --focus-ring-color: Highlight; } .btn, button, [role="button"] { forced-color-adjust: none; } }