/* ============================================================================ PAKT-Gruppe Immobilien · Design Tokens v1.0 (10/2026) Drei Ebenen: 1 Primitive (Rohwerte, nie direkt in Komponenten oder Seiten) 2 Semantik (Rollen – das benutzen Seiten und Komponenten) 3 Komponenten (nur wo eine Komponente eigene Stellschrauben braucht) Herkunft: Navy-Violett, Gold, Hellgrau und Linie von pakt-gruppe.de; Logo-Gold #F0A93B und Logo-Blau #275AA0 per PIL aus pakt-gruppe-logo.png gemessen (deckende Pixel; #3A66AA ist nur der Mischwert der Kantenglättung). Schriften: Montserrat (Live-Seite) + Besley (nur Kennzahlen und Zitate), beide selbst gehostet. Motion nach Emil Kowalski: eigene ease-out-Kurven, UI < 300 ms, Abgang schneller als Auftritt. ========================================================================== */ :root { /* ── 1 · PRIMITIVE ─────────────────────────────────────────────────────── */ /* Navy-Violett (Website: #1a0c53 Buttons, #14093e / #12083a Text und Flächen) */ --navy-950: #12083A; --navy-900: #14093E; --navy-850: #201457; /* angehobene Fläche auf Navy */ --navy-800: #1A0C53; /* Marken-Navy */ --navy-700: #2B1C72; /* Hover für Navy-Buttons (heller, nicht dunkler: Navy ist schon fast Schwarz) */ --navy-600: #3C2F85; /* Linien auf Navy */ --navy-400: #A39DC8; --navy-300: #C3BFE0; --navy-200: #DCD9EE; --navy-100: #ECEAF6; --navy-50: #F5F4FA; /* Gold (Logo + Website). 500 ist Ornament, nie Text auf Hell. */ --gold-300: #F6BE63; /* Hover für Gold-Buttons */ --gold-500: #F2A93B; /* Logo-/Website-Gold (Logo gemessen #F0A93B) */ --gold-600: #E09A2E; /* Gold gedrückt */ --gold-700: #A97629; /* Website-Dunkelgold · 3,95:1 auf Weiß → nur ≥ 24 px oder Grafik */ --gold-800: #8A5E1C; /* Gold als Fließtext · 5,68:1 auf Weiß */ --gold-100: #FCEFD8; --gold-50: #FEF8EC; /* Logo-Blau (das offene Buch) – Wissen, Ratgeber, Diagramme. Nie CTA. */ --blue-700: #1F4A86; --blue-600: #275AA0; --blue-300: #9DB6DC; --blue-100: #E4ECF7; /* Neutrale – minimal violett getönt (Markenfarbton), bewusst nicht warm/creme */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFC; /* Website #fafafa */ --neutral-100: #F1F0F5; --neutral-200: #E2E1E8; /* Website-Linie #e1e1e1 */ --neutral-300: #C9C7D3; --neutral-500: #827F96; /* Eingabe-Rahmen · ≥ 3:1 auf Weiß und auf neutral-100 */ --neutral-600: #5A566E; --neutral-800: #34304A; --neutral-950: #16132B; /* Platzhalter-Rosa (wie bei Pathway) + Status */ --rose-50: #FBEFF4; --rose-300: #D69BB5; --rose-200: #E8B2C8; /* Platzhalter-Text auf Navy */ --rose-800: #8A2F5A; --red-700: #B42318; --red-50: #FDECEA; --green-700: #1D6B45; --green-50: #E8F4EC; /* ── Schriften (selbst gehostet, siehe fonts/fonts.css) ── */ --font-sans: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-serif: 'Besley', 'Georgia', 'Times New Roman', serif; /* nur Kennzahlen, Zitate, Schritt-Nummern */ /* ── Typo-Skala (rem; 1rem = 16px). Ratio ≥ 1,2 zwischen den Stufen ── */ --fs-micro: 0.8125rem; /* 13 px · Badges, Fußnoten */ --fs-caption: 0.875rem; /* 14 px · Meta, Labels, Hilfstexte */ --fs-small: 0.9375rem; /* 15 px · Kartentexte */ --fs-body: 1.0625rem; /* 17 px · Fließtext (Zielgruppe 50+) */ --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); /* 18–21 px */ --fs-h4: 1.1875rem; /* 19 px · Karten-, FAQ-Titel */ --fs-h3: clamp(1.3125rem, 1.15rem + 0.55vw, 1.625rem);/* 21–26 px */ --fs-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem); /* 28–44 px */ --fs-display: clamp(2.125rem, 1.35rem + 2.9vw, 3.625rem); /* 34–58 px · nur H1 (Montserrat ist breit) */ --fs-figure: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem); /* 40–60 px · Besley-Kennzahl */ --fs-quote: clamp(1.3125rem, 1.1rem + 0.9vw, 1.75rem); /* 21–28 px · Besley-Zitat */ --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.65; --lh-body-inverse: 1.72; /* helle Schrift auf Navy braucht mehr Luft */ --tracking-display: -0.022em; --tracking-heading: -0.012em; --tracking-label: 0.01em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --measure: 66ch; /* ── Abstands-Skala (4er-Raster) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --space-11: 96px; --space-section: clamp(64px, 8vw, 120px); --gutter: clamp(20px, 4vw, 40px); --container: 1240px; --container-narrow: 780px; --tap-min: 44px; /* ── Radien (architektonisch knapp) ── */ --radius-xs: 2px; /* Tags, Fokus */ --radius-sm: 4px; /* Badges, Chips */ --radius-md: 6px; /* Buttons, Eingaben */ --radius-lg: 10px; /* Karten, Formular */ --radius-xl: 16px; /* Fotos, Hero-Bild */ --radius-full: 999px; /* ── Linien ── */ --border-width: 1px; --border-width-strong: 1.5px; --rule-gold: 3px; /* Säulen-Kapitell der Prozess-Schritte, aktive Navigation */ --focus-width: 3px; --focus-offset: 3px; /* ── Schatten (navy getönt, sparsam: Hierarchie primär über Flächen + Linien) ── */ --shadow-1: 0 1px 2px rgb(20 9 62 / 0.06), 0 1px 1px rgb(20 9 62 / 0.04); --shadow-2: 0 2px 4px rgb(20 9 62 / 0.05), 0 10px 28px -8px rgb(20 9 62 / 0.16); --shadow-3: 0 6px 12px rgb(20 9 62 / 0.06), 0 24px 56px -12px rgb(20 9 62 / 0.28); /* ── Ebenen (semantisch, keine 9999) ── */ --z-base: 1; --z-dropdown: 10; --z-sticky: 20; /* Header, Sticky-CTA */ --z-overlay: 30; /* Mobil-Menü */ --z-modal: 40; --z-toast: 50; --z-skip: 60; /* ── Motion (Emil Kowalski) ── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Auftritt, Feedback */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Bewegung auf dem Screen */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Leisten, Sheets */ --ease-color: ease; /* Farb-/Hover-Wechsel */ --dur-press: 140ms; /* Button-Druck */ --dur-hover: 180ms; /* Hover, Farbe */ --dur-ui: 220ms; /* Menü, Accordion, Chips */ --dur-exit: 150ms; /* Abgang immer schneller als Auftritt */ --dur-sheet: 280ms; /* Sticky-CTA rein */ --dur-reveal: 520ms; /* seltene Scroll-Einblendung (Marketing) */ --stagger: 60ms; --press-scale: 0.97; /* ── 2 · SEMANTIK ──────────────────────────────────────────────────────── */ --color-bg: var(--neutral-0); --color-surface: var(--neutral-0); --color-surface-sunken: var(--neutral-100); /* Abschnitts-Band, Bildfläche */ --color-surface-subtle: var(--neutral-50); /* Hover auf Karten */ --color-surface-accent: var(--gold-100); /* Gold-Wash: Auswahl, Siegel */ --color-surface-inverse: var(--navy-900); --color-surface-inverse-raised: var(--navy-850); --color-surface-deep: var(--navy-950); /* Footer */ --color-text: var(--neutral-950); --color-text-heading: var(--navy-800); --color-text-secondary: var(--neutral-800); --color-text-muted: var(--neutral-600); --color-text-inverse: var(--neutral-0); --color-text-inverse-secondary: var(--navy-200); --color-text-inverse-muted: var(--navy-400); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-500); /* Eingaben (1.4.11: ≥ 3:1) */ --color-border-inverse: var(--navy-600); --color-action: var(--navy-800); /* Haupt-CTA (wie Live-Seite) */ --color-action-hover: var(--navy-700); --color-action-text: var(--neutral-0); --color-action-gold: var(--gold-500); /* Premium-CTA, nur auf Navy oder einmal je Seite */ --color-action-gold-hover: var(--gold-300); --color-action-gold-text: var(--navy-900); --color-accent: var(--gold-500); /* Ornament: Linien, Sterne, Glyphen – nie Text auf Hell */ --color-accent-text: var(--gold-800); /* Gold als Text auf Hell */ --color-accent-large: var(--gold-700); /* nur ≥ 24 px (Schritt-Nummern) */ --color-knowledge: var(--blue-600); /* Ratgeber, Diagramme */ --color-knowledge-text: var(--blue-700); --color-knowledge-wash: var(--blue-100); --color-link: var(--navy-800); --color-link-hover: var(--gold-800); --color-link-underline: var(--gold-500); --color-focus: var(--navy-800); --color-danger: var(--red-700); --color-danger-wash: var(--red-50); --color-success: var(--green-700); --color-success-wash: var(--green-50); --color-placeholder-bg: var(--rose-50); /* „vom Kunden zu liefern“ */ --color-placeholder-border: var(--rose-300); --color-placeholder-text: var(--rose-800); --color-selection: var(--gold-100); /* ── 3 · KOMPONENTEN ───────────────────────────────────────────────────── */ --header-h: 84px; --btn-h: 48px; --btn-h-sm: 44px; --btn-h-lg: 58px; --btn-pad-x: 22px; --btn-pad-x-sm: 16px; --btn-pad-x-lg: 30px; --btn-fs: 0.96875rem; /* 15,5 px – Montserrat läuft breit */ --btn-fs-lg: 1.0625rem; --input-h: 50px; --card-pad: clamp(var(--space-5), 2.4vw, var(--space-7)); --chip-h: 44px; --logo-h: 52px; --sticky-cta-h: 72px; } @media (max-width: 760px) { :root { --header-h: 68px; --logo-h: 42px; } } /* ── Inverse Fläche: Rollen umschalten statt Komponenten duplizieren ───── */ .theme-inverse { --color-bg: var(--navy-900); --color-surface: var(--navy-850); --color-surface-sunken: var(--navy-950); --color-surface-subtle: var(--navy-850); --color-text: var(--navy-200); --color-text-heading: var(--neutral-0); --color-text-secondary: var(--navy-200); --color-text-muted: var(--navy-400); --color-border: var(--navy-600); --color-border-strong: var(--navy-400); --color-action: var(--gold-500); /* Primär-Button wird auf Navy automatisch Gold */ --color-action-hover: var(--gold-300); --color-action-text: var(--navy-900); --color-link: var(--neutral-0); --color-link-hover: var(--gold-300); --color-accent-text: var(--gold-500); /* Gold auf Navy: 9,24:1 */ --color-accent-large: var(--gold-500); --color-focus: var(--gold-500); --color-placeholder-bg: color-mix(in srgb, var(--rose-200) 10%, transparent); --color-placeholder-border: var(--rose-200); --color-placeholder-text: var(--rose-200); --lh-body: var(--lh-body-inverse); }