/* ── KOMOS Design Tokens ───────────────────────────────────────────────── Die einzige Quelle für Farben, Typografie, Abstände, Radien und Schatten. Ausgangslage im Live-System (gemessen über 36 Elementor-CSS-Dateien): 64 Hex-Farben · 34 Schriftgrößen · 35 Section-Paddings · 15 Border-Radien · 52 Gap-Werte Hier zusammengeführt auf: 18 Farbtokens · 8 Schriftgrößen · 10 Abstände · 4 Radien · 3 Schatten Alle Marken-Farbwerte stammen unverändert aus dem bestehenden CD. ──────────────────────────────────────────────────────────────────── */ :root { /* ── Marke ───────────────────────────────────────────────────────── Navy und Gold sind die Trägerfarben. Beide Werte sind aus dem bestehenden Elementor-Kit bzw. der Live-Seite übernommen. */ --c-navy: #0B2341; /* Elementor "primary", Flächen & Headlines */ --c-navy-deep: #071426; /* dunkelste Stufe, Hero & Footer-Basis */ --c-navy-soft: #163E66; /* Elementor "secondary", Hover auf Navy */ --c-logo-navy: #03305D; /* exakte Logo-Farbe, nur für Wortmarke */ --c-gold: #D5A521; /* Akzent: Buttons, Marker, Icons */ --c-gold-hover: #BB8F17; /* -8 % Helligkeit, für :hover */ --c-gold-soft: #F4E4B8; /* helle Goldtönung für Flächen */ --c-gold-text: #806314; /* Gold für kleine Fettschrift. Rubriken und Labels stehen in 14 px und brauchen damit 4,5:1; --c-gold-ink erreicht nur 3,58:1. Gleicher Farbton (44°) und gleiche Sättigung (73 %) wie das Marken-Gold, nur dunkler: 5,66:1 auf Weiß. */ --c-gold-ink: #A8821A; /* Gold für Grafiken auf hellem Grund. Gleicher Farbton (44°) und gleiche Sättigung wie --c-gold, nur dunkler. Das helle Gold erreicht auf Weiß nur 2,27:1 und verfehlt die 3:1, die WCAG für grafische Elemente verlangt. */ --c-blue: #1174BD; /* Elementor "accent", Links im Fließtext */ --c-blue-hover: #0E5F9A; /* ── Neutrale ────────────────────────────────────────────────────── Ersetzt neun fast identische Grau-/Weißtöne des Live-Systems (#F7F7F7 #F7F7F5 #F9F9F9 #FAFAFA #EFEFEA #F1F2F3 #E7E7E2 #F4F5F6 #D5D6D0) durch drei klar unterscheidbare Stufen. */ --c-white: #FFFFFF; --c-surface: #F4F5F6; /* Sektionswechsel gegen Weiß */ --c-surface-sunken: #E8EBEF; /* Karten auf --c-surface */ --c-border: #D9DEE7; --c-border-strong: #BAC4CB; --c-muted-mark: #7C8F9C; /* dezente Zählmarken. Gleicher Farbton wie --c-border-strong, aber dunkel genug für die 3:1 bei großem Text: 3,07:1 auf der grauen Fläche, 3,35:1 auf Weiß. */ /* ── Text ────────────────────────────────────────────────────────── Ersetzt vier parallele Textfarben (#000000 #1C1C1C #4B4F54 #555555). */ --c-text: #1C1C1C; /* Überschriften und Fließtext */ --c-text-muted: #565D66; /* Bildunterschriften, Meta, Labels */ --c-text-on-dark: #FFFFFF; --c-text-on-dark-muted: #B9C4D2; /* seit 16.09.2026 unbenutzt: auf dunklem Grund steht jeder Text weiß, der gedämpfte Ton ließ Flächen fleckig wirken. Bleibt als Reserve stehen. */ /* ── Status ──────────────────────────────────────────────────────── Nur für Formular-Feedback. Ersetzt die markenfremden Werte #33DB10, #FF9600, #D11C1C, #EEFFEE aus dem Live-System. */ --c-success: #1E7A4C; --c-error: #B3261E; /* ── Typografie ──────────────────────────────────────────────────── Eine Schrift, acht Größen. Fluid per clamp(), dadurch entfallen die drei Breakpoint-Blöcke des Elementor-Kits. */ --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-3xl: clamp(2.00rem, 1.30rem + 2.80vw, 3.25rem); /* 32 → 52 H1 */ --fs-2xl: clamp(1.75rem, 1.35rem + 1.60vw, 2.50rem); /* 28 → 40 H2 */ --fs-xl: clamp(1.375rem, 1.15rem + 0.90vw, 1.875rem);/* 22 → 30 H3 groß */ --fs-lg: clamp(1.25rem, 1.11rem + 0.55vw, 1.50rem); /* 20 → 24 H3 */ --fs-md: 1.25rem; /* 20 H4 */ --fs-base: clamp(1.0625rem, 1.03rem + 0.14vw, 1.125rem);/* 17 → 18 Fließtext */ --fs-sm: 1rem; /* 16 klein */ --fs-xs: 0.875rem; /* 14 Meta */ --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; /* Zeilenhöhen einheitslos. Im Live-Kit stehen hier line-height:1.5px, 1.25px und 1.3px — px statt em, die Werte greifen dort nicht. */ --lh-tight: 1.15; /* H1, H2 */ --lh-snug: 1.3; /* H3, H4 */ --lh-normal: 1.6; /* Fließtext */ --ls-tight: -0.02em; /* große Headlines */ --ls-normal: 0; /* ── Abstände ────────────────────────────────────────────────────── 4-px-Raster. Ersetzt 35 Section-Paddings und 52 Gap-Werte. */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ /* Vertikaler Sektionsrhythmus, fluid: 48 → 96 px */ --section-y: clamp(3rem, 1.5rem + 6vw, 6rem); /* ── Layout ──────────────────────────────────────────────────────── */ --container: 75rem; /* 1200 px, wie im Live-System */ --container-narrow: 48rem; /* 768 px, für Fließtextseiten */ --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); /* ── Radien ──────────────────────────────────────────────────────── Ersetzt 15 Werte (0/4/5/6/8/9/10/15/20/30/43 px). */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; /* ── Schatten ────────────────────────────────────────────────────── Ersetzt u. a. rgba(0,0,0,0.5) mit 10 px Blur, das im Live-System als harte Kante unter dem Header liegt. */ --shadow-sm: 0 1px 2px rgba(11, 35, 65, 0.06), 0 1px 3px rgba(11, 35, 65, 0.08); --shadow-md: 0 2px 4px rgba(11, 35, 65, 0.06), 0 4px 12px rgba(11, 35, 65, 0.10); --shadow-lg: 0 4px 8px rgba(11, 35, 65, 0.07), 0 12px 28px rgba(11, 35, 65, 0.13); /* ── Bewegung ────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 180ms; /* ── Fokus ───────────────────────────────────────────────────────── */ --focus-ring: 3px solid var(--c-blue); --focus-offset: 2px; --header-h: 76px; } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }