/* ========================================================================== DAO Systems — tokens.css Einziger Ort für Literalwerte (Farben, Abstände, Schriftgrößen, Radien …). Enthält ausschließlich :root. Keine weiteren Selektoren, keine Media Queries. ACHTUNG beim Bearbeiten dieses Kopfblocks: Er darf keinen weiteren Kommentar öffnen oder schließen. CSS-Kommentare verschachteln sich nicht — das erste Kommentarende beendet diesen Kopf, und alles danach landet als Müll-Selektor vor :root. Dann verwirft der Browser den kompletten :root-Block und keine einzige Variable ist mehr definiert. Erläuterungen deshalb ausschließlich als Fließtext. -------------------------------------------------------------------------- BREAKPOINTS (CSS-Variablen funktionieren NICHT in @media — deshalb hier nur dokumentiert, in style.css als Literal schreiben): --bp-xs 30em -> 480px große Handys --bp-sm 40em -> 640px Landscape / kleine Tablets --bp-md 48em -> 768px Tablet, Umbruch Mobile-Nav -> Desktop-Nav --bp-lg 64em -> 1024px kleines Notebook, 2–3-spaltige Grids --bp-xl 80em -> 1280px Desktop, Container erreicht Maxbreite Konvention: Mobile first, ausschließlich `min-width`. Beispiel: @media (min-width: 48em) { … } -------------------------------------------------------------------------- KONTRASTPRÜFUNG (WCAG 2.1, berechnet gegen --color-bg #f7f8fa bzw. weiß) #1a2332 Text auf #f7f8fa = 14.9:1 AAA #4a5568 Text-muted auf #f7f8fa = 7.1:1 AAA #5b6577 Text-subtle auf #f7f8fa = 5.5:1 AA #1a2942 Marineblau auf #f7f8fa = 13.7:1 AAA #ffffff Weiß auf #1a2942 = 14.6:1 AAA (Primär-Button) #0f6f5c Petrol auf #f7f8fa = 5.7:1 AA (Links, Icons) #ffffff Weiß auf #0f6f5c = 6.1:1 AA (Petrol-Fläche) #ffffff Weiß auf #0c5a4a = 8.2:1 AAA #c3cbd9 Text-invers-muted auf #1a2942 = 8.9:1 AAA (Footer) AMBER — WICHTIG, hier liegt die Falle: #d97706 auf #f7f8fa = 3.0:1 -> FÄLLT DURCH für Text (AA braucht 4.5:1). Amber ist deshalb ausschließlich FLÄCHE, niemals Textfarbe auf hellem Grund. Regel 1 — Amber als Button-/Badge-Fläche: Schrift darauf ist --color-text #1a2332 (dunkles Navy): #1a2332 auf #d97706 = 5.0:1 AA ✓ Weiß auf #d97706 = 3.2:1 ✗ -> NICHT verwenden. Regel 2 — Hover geht HELLER, nicht dunkler: #ea8a04 hält den dunklen Text bei 6.1:1 ✓. Ein dunkleres Amber (#b45309) würde mit dunklem Text auf 3.1:1 fallen — deshalb kein "dunkler on hover" bei Amber-Flächen. Regel 3 — Amber-farbiger TEXT auf hellem Grund: nur --color-accent-text #92400e verwenden = 6.7:1 AA ✓. Fokusring --color-focus #b45309: auf #f7f8fa = 4.8:1 · auf #edf0f4 = 4.39:1 · beide über 3:1 (1.4.11) ✓. Achtung: 4.39:1 auf #edf0f4 reicht NICHT für normalen Text (AA 4.5:1), nur für Large Text ab 24px und für Nicht-Text-Kontraste. Für kleinen Text auf getönter Fläche --color-accent-text #92400e nehmen (6.2:1). Auf dunklem Grund stattdessen --color-focus-invert #fbbf24 (auf #1a2942 = 8.7:1 ✓). ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. FARBEN — Marke ------------------------------------------------------------------ */ /* ACHTUNG: dieser Wert steht zusätzlich als Literal in allen sieben HTML-Dateien im . Ein meta-Attribut kann keine CSS-Variable auflösen. Bei einem Farbwechsel dort mitziehen. */ --color-primary: #1a2942; /* Marineblau, Hauptfarbe */ --color-primary-hover: #24395c; /* aufgehellt, für Hover auf Fläche */ --color-primary-dark: #101c2e; /* Footer, dunkle Sektionen */ --color-secondary: #0f6f5c; /* Petrol, Links / Icons / Akzentlinie */ --color-secondary-hover: #0c5a4a; --color-secondary-dark: #0a4a3d; --color-accent: #d97706; /* Amber — NUR Fläche, nie Text */ --color-accent-hover: #ea8a04; /* heller (siehe Regel 2 oben) */ --color-accent-text: #92400e; /* Amber-Ton als Textfarbe, AA-sicher */ /* ------------------------------------------------------------------ 2. FARBEN — Flächen & Rahmen ------------------------------------------------------------------ */ --color-bg: #f7f8fa; /* Seitenhintergrund */ --color-surface: #ffffff; /* Karten, Formularfelder */ --color-surface-tinted: #edf0f4; /* .section--tinted */ --color-surface-hover: #eaeef4; /* Hover für Ghost-Buttons / Zeilen */ --color-surface-dark: #1a2942; /* dunkle Sektion / Footer */ --color-surface-darker: #101c2e; --color-border: #d8dee8; /* dezente Trennlinie, dekorativ */ --color-border-strong: #7d8899; /* Formularfelder, 3.6:1 auf Weiß ✓ */ --color-border-on-dark: #2e3f5c; /* Trennlinien auf Navy */ /* ------------------------------------------------------------------ 3. FARBEN — Text ------------------------------------------------------------------ */ --color-text: #1a2332; /* Fließtext, Überschriften */ --color-text-muted: #4a5568; /* Sekundärtext, Lead */ --color-text-subtle: #5b6577; /* Meta, Bildunterschrift, Label */ --color-text-invert: #ffffff; /* Text auf dunklem Grund */ --color-text-invert-muted: #c3cbd9;/* Sekundärtext auf dunklem Grund */ --color-link: #0f6f5c; --color-link-hover: #0c5a4a; /* ------------------------------------------------------------------ 4. FARBEN — Status ------------------------------------------------------------------ */ --color-success: #15803d; /* 4.7:1 auf --color-bg ✓ */ --color-warning: #b45309; /* 4.8:1 auf --color-bg ✓ */ --color-error: #b42318; /* 6.2:1 auf --color-bg ✓ */ /* ------------------------------------------------------------------ 5. FARBEN — Fokus & Overlay ------------------------------------------------------------------ */ --color-focus: #b45309; --color-focus-invert: #fbbf24; --color-overlay: rgba(16, 28, 46, 0.55); /* ------------------------------------------------------------------ 6. TYPOGRAFIE — Familien Kein Google-Fonts-CDN: DSGVO ist Verkaufsargument dieser Seite. Ausschließlich System-Fonts, Inter falls lokal installiert. ------------------------------------------------------------------ */ --font-sans: -apple-system, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* ------------------------------------------------------------------ 7. TYPOGRAFIE — Größen (fluid via clamp, Basis 16px = 1rem) Werte in Klammern: min .. max in px ------------------------------------------------------------------ */ --font-size-xs: 0.8125rem; /* 13 */ --font-size-sm: 0.9375rem; /* 15 */ --font-size-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); /* 16–17 */ --font-size-md: clamp(1.0625rem, 1rem + 0.30vw, 1.1875rem); /* 17–19 */ --font-size-lg: clamp(1.1875rem, 1.10rem + 0.40vw, 1.375rem); /* 19–22 */ --font-size-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18–21 */ --font-size-h3: clamp(1.3125rem, 1.20rem + 0.55vw, 1.625rem); /* 21–26 */ --font-size-h2: clamp(1.625rem, 1.40rem + 1.10vw, 2.25rem); /* 26–36 */ --font-size-h1: clamp(2rem, 1.70rem + 2.10vw, 3.25rem); /* 32–52 */ --font-size-display: clamp(2.25rem, 1.85rem + 2.90vw, 3.75rem); /* 36–60 */ /* ------------------------------------------------------------------ 8. TYPOGRAFIE — Zeilenhöhen, Gewichte, Laufweite ------------------------------------------------------------------ */ --line-height-tight: 1.15; /* Display, h1 */ --line-height-heading: 1.25; /* h2–h4 */ --line-height-snug: 1.4; /* Lead, kurze Absätze */ --line-height-base: 1.6; /* Fließtext */ --line-height-relaxed: 1.75; /* lange Textblöcke, Rechtsseiten */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --letter-spacing-tight: -0.022em; /* Display, h1 */ --letter-spacing-heading: -0.012em;/* h2–h3 */ --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; --letter-spacing-caps: 0.08em; /* Versal-Label, Eyebrow */ --measure: 68ch; /* max. Zeilenlänge Fließtext */ --measure-narrow: 56ch; /* ------------------------------------------------------------------ 9. ABSTÄNDE — strenges 8px-Raster (--space-N = N × 8px) --space-0-5 (4px) ist die einzige Ausnahme: nur für Icon-Abstände und optische Korrekturen innerhalb von Steuerelementen. ------------------------------------------------------------------ */ --space-0: 0; --space-0-5: 0.25rem; /* 4px Ausnahme */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-7: 3.5rem; /* 56px */ --space-8: 4rem; /* 64px */ --space-9: 4.5rem; /* 72px */ --space-10: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ --space-14: 7rem; /* 112px */ --space-16: 8rem; /* 128px */ /* ------------------------------------------------------------------ 10. LAYOUT ------------------------------------------------------------------ */ --container-max: 71.25rem; /* 1140px */ --container-narrow: 45rem; /* 720px, Fließtextseiten */ --container-wide: 78rem; /* 1248px, breite Grids */ --container-padding: var(--space-3); /* 24px, Rand links/rechts */ --section-padding-y: clamp(3rem, 6vw, 6rem); /* 48–96px */ --section-padding-y-lg: clamp(4rem, 8vw, 8rem); /* 64–128px */ --header-height: 4.5rem; /* 72px, für scroll-padding & Sticky */ --card-padding: clamp(1.5rem, 3vw, 2rem); /* 24–32px */ --grid-gap: var(--space-3); --grid-gap-lg: var(--space-4); /* ------------------------------------------------------------------ 11. RADIEN — sachlich, kein Pillen-Look außer bei Badges ------------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* ------------------------------------------------------------------ 12. RAHMENBREITEN ------------------------------------------------------------------ */ --border-width: 1px; --border-width-thick: 2px; --border-width-accent: 3px; /* Akzentkante links an Zitat/Hinweis */ /* ------------------------------------------------------------------ 13. SCHATTEN — dezent, kalt-neutral, kein Neon, keine Verläufe ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(26, 41, 66, 0.06); --shadow-sm: 0 1px 3px rgba(26, 41, 66, 0.08), 0 1px 2px rgba(26, 41, 66, 0.04); --shadow-md: 0 4px 12px rgba(26, 41, 66, 0.08); --shadow-lg: 0 12px 28px rgba(26, 41, 66, 0.10); --shadow-none: none; /* ------------------------------------------------------------------ 14. BEWEGUNG ------------------------------------------------------------------ */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 300ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-color: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); /* Scroll-Reveals und Ablauf-Animation. Werden ausschliesslich von assets/js/motion.js aktiviert und greifen nur, wenn die Klasse js-motion traegt. Ohne JavaScript und bei prefers-reduced-motion sind alle Inhalte sofort sichtbar. ACHTUNG: In dieser Datei duerfen Kommentare NICHT verschachtelt werden. Ein zweiter Kommentar-Anfang innerhalb eines Kommentars beendet ihn vorzeitig, der :root-Block haengt danach an einem Muell-Selektor und saemtliche Variablen sind still weg. */ --duration-reveal: 500ms; --duration-lift: 200ms; --reveal-stagger: 80ms; --reveal-shift: 20px; --flow-step-delay: 400ms; --flow-row-delay: 140ms; --lift-distance: -4px; --lift-distance-sm: -2px; /* ------------------------------------------------------------------ 15. STEUERELEMENTE (Buttons, Eingabefelder) ------------------------------------------------------------------ */ --control-height-sm: 2.5rem; /* 40px */ --control-height: 3rem; /* 48px, Touch-Ziel */ --control-height-lg: 3.5rem; /* 56px */ --control-padding-x: var(--space-3); --control-radius: var(--radius-md); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ------------------------------------------------------------------ 16. Z-INDEX ------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-skip-link: 500; }