/* ====================================================================== tokens.css — Einzige Quelle für Farben, Schriften, Maße, Bewegung ---------------------------------------------------------------------- Grundlage: DESIGNSPRACHE.md (Kundenvorgabe vom 11.08.2026, bindend) REGEL: Außerhalb dieser Datei steht nirgendwo ein Farbwert, eine Schriftgröße oder ein Abstand als fester Wert. Alles greift hierauf zu. Eine Farbe ändern heißt: eine Zeile hier ändern — und die ganze Seite zieht nach. Zu jeder Farbe, die irgendwo mit Deckkraft verwendet wird, gibt es zusätzlich ein "-rgb"-Token. Nur so ziehen auch halbtransparente Flächen, Ringe und Verläufe mit, wenn die Farbe geändert wird. ====================================================================== */ :root{ /* ==================================================================== FLÄCHEN — Namen nach DESIGNSPRACHE.md ==================================================================== */ --midnight-ink: #0E151F; /* Haupt-Hintergrund */ --midnight-ink-rgb: 14,21,31; --midnight-paper: #17202B; /* ABWEICHUNG: Vorgabe nennt #171B23 */ --midnight-paper-rgb: 23,32,43; --warm-ivory: #F2EFE9; /* helle Hauptfläche */ --warm-ivory-rgb: 242,239,233; --ivory-bright: #FAF9F6; /* hellere Fläche, nicht in der Vorgabe */ --ivory-bright-rgb: 250,249,246; --white: #FFFFFF; --surface-note: #FBFAF7; /* Hinweiskasten */ --surface-hover: #FCFBF8; /* Zielverweis beim Zeigen */ --white-rgb: 255,255,255; /* ==================================================================== GOLD — höchstens 3–5 % der Fläche, nie großflächig ==================================================================== */ --heritage-gold: #A98552; /* Hauptgold */ --heritage-gold-rgb: 169,133,82; --gold-highlight: #D2AC6C; /* auf dunklem Grund, kleine Texte */ --gold-shadow: #7C6240; /* auf hellem Grund */ /* ==================================================================== TEXT — nach Untergrund benannt, nicht nach Farbe ==================================================================== */ /* auf dunklem Grund */ --text-on-dark: #F2EFE9; /* Warm Ivory */ --text-on-dark-2: #AEB4BD; /* Silver Grey */ --text-on-dark-3: #848C96; /* Ersatz für Muted Grey #787F89 */ /* auf hellem Grund */ --text-on-light: #141C25; --text-on-light-rgb: 20,28,37; --text-on-light-2: #525C68; --text-on-light-3: #676F7B; /* Fließtext der Werkstatt-Blöcke — jeder Wert einzeln, wie besprochen. Sollen sie später gleich sein: hier denselben Wert eintragen. */ --text-body-1: #4D596D; --text-body-2: #536073; --text-body-3: #566176; --text-body-4: #5B6577; --text-body-5: #6A7384; --text-body-6: #636B77; /* ==================================================================== LINIEN UND RAHMEN ==================================================================== */ --line-light: #DCD8CF; --line-warm: #D8D0C3; --border-gold: rgba(var(--heritage-gold-rgb), .22); /* ==================================================================== STATUSFARBEN — Rückmeldungen des Kontaktformulars Stehen in keiner Vorgabe, werden hier erstmals festgeschrieben. ==================================================================== */ --status-success-bg: #EAF3E6; --status-success-text: #2C4620; --status-error-bg: #FBEAE8; --status-error-text: #8A2820; --status-error-border: #A8332A; --status-error-border-rgb: 168,51,42; /* Hinweisboxen (KI-Hinweis, Einwilligungsbanner) — Bernsteinton. Steht in keiner Vorgabe, hier erstmals festgeschrieben. */ --notice-bg: #FFF7E2; --notice-border: #FFEAA9; --notice-border-strong: #E8CD85; --notice-text: #4D3600; --notice-text-2: #6B4B00; --notice-accent: #D99B00; /* Abdunklung hinter dem Einwilligungsbanner */ --overlay-rgb: 6,10,16; /* ==================================================================== SCHRIFT Manrope durchgehend, lokal unter assets/fonts/ — nie von Google laden (abmahnfähig, LG München I, 3 O 17493/20). Überschriften tragen über das Gewicht (600/700), nicht über eine zweite Schriftart. Cinzel aus der Vorgabe ist bewusst nicht im Einsatz — siehe AUFBAU.md. ==================================================================== */ --font-body: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Sieben Stufen, Verhältnis rund 1,3 */ --size-label: 0.875rem; /* 14 px */ --size-small: 1.0625rem; /* 17 px */ --size-copy: 1.1875rem; /* 19 px — Fliesstext, am 11.09.2026 zwei Stufen vergroessert */ --size-body: 1.25rem; /* 20 px */ --size-lead: 1.6875rem; /* 27 px */ --size-heading: 2.375rem; /* 38 px */ --size-title: 3.5rem; /* 56 px */ --size-display: clamp(3rem, 7vw, 6rem); /* Grosse Ueberschriften. clamp(klein, mitwachsend, gross): der mittlere Wert richtet sich nach der Fensterbreite, die beiden aeusseren sind die Grenzen. Zum Aendern reicht es meist, die beiden Grenzen anzupassen. */ --size-hero-title: clamp(50px, 6vw, 84px); /* Hero-Ueberschrift */ --size-goal-title: clamp(43px, 5vw, 70px); /* Ueberschrift eines Zielbereichs */ --size-vorgehen-title: clamp(48px, 5vw, 68px); /* "Vom ersten Ueberblick" */ --size-section-title: clamp(36px, 4vw, 56px); /* Abschnittstitel */ --size-module-title: clamp(32px, 3.5vw, 48px); /* Zwischenueberschrift */ --size-hint: 0.75rem; /* 12px — KI-Hinweis */ /* Feinstufen der Werkstatt-Blöcke — jede einzeln, wie besprochen. Krumme Werte auf glatte Pixel gerundet (11.5→12, 15.3→15, 16.8→17 …). Sollen mehrere gleich sein: hier denselben Wert eintragen. */ --size-fine-12: 12px; --size-fine-13: 13px; --size-fine-14: 14px; --size-fine-15: 15px; --size-fine-16: 16px; --size-fine-17: 17px; --size-fine-18: 18px; --size-fine-19: 19px; --size-fine-20: 20px; --size-fine-21: 21px; --size-fine-23: 23px; --size-fine-24: 24px; --size-fine-27: 27px; --size-fine-28: 28px; --size-fine-29: 29px; --size-fine-31: 31px; --size-fine-34: 34px; --size-fine-36: 36px; --size-fine-42: 42px; --size-fine-44: 44px; --size-fine-46: 46px; --size-fine-54: 54px; /* ==================================================================== RASTER UND MASSE — 8-px-Raster ==================================================================== */ --space-1: 0.5rem; /* 8 px */ --space-2: 1rem; /* 16 px */ --space-3: 1.5rem; /* 24 px */ --space-4: 2.5rem; /* 40 px */ --space-5: 4rem; /* 64 px */ --space-6: 6rem; /* 96 px */ --space-7: 9rem; /* 144 px */ --space-section: clamp(5rem, 10vw, 9rem); /* Vorgabe */ /* ABWEICHUNG: Vorgabe nennt 1280 px Inhalt und 680 px Textspalte. Die Seite verwendet 1312 px und 736 px. */ --width-content: 82rem; /* 1312 px */ --width-column: 46rem; /* 736 px */ --width-header: 94rem; /* 1504 px — Kopfzeile läuft breiter */ --radius: 2px; /* Schaltflaechen. ABWEICHUNG von DESIGNSPRACHE.md: Die Vorgabe verlangt 2px und "keine Pillen-Buttons". Auf ausdruecklichen Wunsch wird die abgerundete Form der oeffentlichen Seite verwendet. Zurueck zur Vorgabe: hier auf var(--radius) stellen. */ --button-radius: 0.625rem; /* 10px */ /* Schriftfarbe auf der goldenen Schaltflaeche. Der dunkle Ton kommt auf 5,38 : 1 und erfuellt damit die Mindestanforderung von 4,5 : 1 fuer Normaltext. Weiss kam nur auf 3,41 : 1 und war nicht barrierefrei — am 11.09.2026 geprueft und wieder verworfen. */ --button-text: var(--midnight-ink); /* Vorgabe: keine gerundeten Karten */ /* ==================================================================== KOPFZEILE Am 11.09.2026 in zwei Schritten um zusammen 21 % vergroessert (10 % und nochmal 10 %). Die Ausgangswerte stehen als Kommentar dahinter — so bleibt nachvollziehbar, worauf sich die Vergroesserung bezieht. ==================================================================== */ --header-height: 117px; /* Ausgangswert 96px */ --header-height-small: 83px; /* Ausgangswert 68px */ --header-gap: 34px; /* Ausgangswert 28px */ --header-logo-width: 16.7rem; /* Ausgangswert 13.8rem */ --header-logo-max: 46vw; /* Ausgangswert 38vw */ --header-nav-gap: 29px; /* Ausgangswert 24px */ --header-cta-pad: 13px 19px; /* Ausgangswert 11px 15px */ --header-cta-pad-small:11px 14px; /* Ausgangswert 9px 12px */ /* ==================================================================== BEWEGUNG UND TIEFE ==================================================================== */ --motion: 220ms cubic-bezier(.2,.8,.2,1); --motion-offset: 16px; --motion-hover: 1.025; --shadow-soft: 0 22px 60px rgba(var(--midnight-ink-rgb), .09); } /* Wer im Betriebssystem reduzierte Bewegung einstellt, bekommt keine Animationen — Vorgabe aus DESIGNSPRACHE.md. */ @media (prefers-reduced-motion: reduce){ :root{ --motion: 0ms linear; --motion-offset: 0px; --motion-hover: 1; } } /* Responsive Stufen — dieselben Token, kleinere Werte. Früher verstreut in den Media-Blöcken von v2.css. */ @media(max-width:64rem){ :root{--size-title:2.75rem;--size-heading:2rem;--size-lead:1.5rem;--size-body:1.1875rem;--space-7:5.5rem;--space-6:4rem} } @media(max-width:40rem){ :root{--size-title:2.25rem;--size-heading:1.75rem;--size-small:1rem;--space-7:4rem;--space-6:3rem;--space-5:2.5rem} } /* Telefonnummer — Hoehe der festen Anrufleiste auf schmalen Bildschirmen. Der Seitenfuss bekommt denselben Wert als Abstand, damit die Leiste nichts verdeckt. Eingefuehrt am 05.10.2026. */ :root{ --anruf-leiste-hoehe: 56px; }