/* ========================================================================== GOYER PFINGSTEN — DESIGN TOKENS Einzige Quelle der Wahrheit für Farben, Typografie, Abstände, Radien, Schatten und Übergänge. Alle anderen Stylesheets referenzieren ausschließlich diese Custom Properties — keine Magic Numbers, keine hartkodierten Farb-/Schriftwerte außerhalb dieser Datei. Skalierung: Schrift- und Abstandswerte sind fluid (clamp()) und skalieren stufenlos zwischen einem Referenz-Viewport von 360px (kleines Smartphone) und 1920px (Full-HD-Desktop). Oberhalb von 1920px bleibt der Maximalwert stehen — auf 6K-/Ultra-Wide-Displays wächst nicht die Schrift ins Unlesbare, sondern der Weißraum über --container-max (siehe unten). ========================================================================== */ :root{ /* ---------- Breakpoints (Referenzwerte — CSS kennt keine Variablen in @media, diese Werte müssen dort als Literal gespiegelt werden; verbindliche Referenzliste, damit alle Stylesheets dieselben Kanten benutzen) ---------- --bp-xs : 480px Kleines Smartphone --bp-sm : 640px Großes Smartphone --bp-md : 768px Tablet Hochformat --bp-nav : 1024px Burger-Menü-Schwelle (verbindlich lt. Vorgabe) --bp-lg : 1280px Kleiner Desktop --bp-xl : 1440px Desktop --bp-2xl : 1920px Full HD — Referenz-Obergrenze für fluid scaling --bp-3xl : 2560px QHD / 5K Einstieg --bp-4xl : 3840px 4K --bp-6k : 5120px+ 6K und größer — Layout deckelt über container-max */ /* ---------- Farben — Primär: Frisches Rubinrot ---------- */ --color-bordeaux-900:#8C0E0E; /* Frisches dunkles Rubin für große Flächen (Hero, Footer, Dark-Sections) */ --color-bordeaux-700:#A61111; --color-bordeaux-500:#BF1313; /* Markenrot (aufgefrischt ggü. Alt-Logo #90273E, Kundinnen-Freigabe 08/2026) */ --color-bordeaux-300:#D65C5C; --color-bordeaux-100:#FAEAEA; /* ---------- Farben — Akzent: Digital Teal ---------- */ --color-teal-900:#173A33; /* Dunkel-Teal — dunkle Akzentflächen */ --color-teal-600:#2C6D5F; --color-teal-500:#3C8676; --color-teal-400:#6AAFA0; --color-teal-200:#CBE3DD; /* Soft Mint — Teal-Texte/-Icons AUF roten Flächen (gesättigtes Teal flirrt auf gesättigtem Rot, Komplementärkontrast) */ --color-teal-100:#E0EBE9; /* ---------- Farben — Neutral: warmes Ink & Paper ---------- */ --color-ink-900:#24191C; --color-stone-700:#5B484C; --color-stone-400:#B6A5A9; --color-stone-200:#E3DEDF; --color-paper:#F8F7F7; --color-white:#FFFFFF; /* ---------- Farben — Funktional ---------- */ --color-success:#3C8676; --color-warning:#C97A2E; --color-error:#B23A2E; /* ---------- Semantische Farb-Rollen (hier umbenennen, wenn sich die Markenfarbwelt ändert — Komponenten greifen nur auf diese Rollen zu, nie direkt auf --color-bordeaux-* etc.) ---------- */ --c-brand: var(--color-bordeaux-500); --c-brand-dark: var(--color-bordeaux-900); --c-brand-mid: var(--color-bordeaux-700); --c-brand-tint: var(--color-bordeaux-100); --c-accent: var(--color-teal-500); --c-accent-dark: var(--color-teal-600); --c-accent-tint: var(--color-teal-100); --c-text: var(--color-ink-900); --c-text-muted: var(--color-stone-700); --c-border: var(--color-stone-200); --c-surface: var(--color-white); --c-surface-alt: var(--color-paper); --c-on-brand: var(--color-white); /* ---------- Icon-System: Ultra-thin Editorial Line. Haarfeine, einfarbige Konturlinie (Teal/--c-accent-dark, siehe .ic-line in components.css), kein Fill, kein Badge, kein Akzentpunkt — bewusst zurückhaltend. Farbe läuft ausschließlich über die Rollen-Tokens oben. ---------- */ /* ---------- Typografie: Schriftfamilien ---------- */ --font-display:'Manrope','Inter',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'IBM Plex Mono','SFMono-Regular',monospace; /* ---------- Typografie: fluid Schriftgrößen (360px → 1920px) ---------- */ --fs-xs: clamp(0.875rem, 0.8534rem + 0.0962vw, 0.9688rem); --fs-sm: clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem); --fs-base: clamp(1.125rem, 1.0889rem + 0.1603vw, 1.2812rem); --fs-md: clamp(1.2812rem,1.2308rem + 0.2244vw, 1.5rem); --fs-lg: clamp(1.4375rem,1.3726rem + 0.2885vw, 1.7188rem); --fs-xl: clamp(1.6875rem,1.5865rem + 0.4487vw, 2.125rem); --fs-2xl: clamp(2rem, 1.8269rem + 0.7692vw, 2.75rem); --fs-3xl: clamp(2.5rem, 2.2115rem + 1.2821vw, 3.75rem); --fs-4xl: clamp(3.125rem, 2.5769rem + 2.4359vw, 5.5rem); --fs-hero: clamp(3.5rem, 2.5192rem + 4.359vw, 7.75rem); /* ---------- Typografie: Zeilenhöhen & Laufweiten ---------- */ --lh-tight: 1.08; --lh-heading: 1.18; --lh-body: 1.6; --ls-tight: -0.02em; --ls-normal: 0; --ls-uppercase: 0.09em; /* ---------- Schriftschnitte ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---------- Abstände (fluid, 360px → 1920px) ---------- */ --space-3xs: 0.25rem; --space-2xs: clamp(0.5rem, 0.4712rem + 0.1282vw, 0.625rem); --space-xs: clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem); --space-sm: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem); --space-md: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem); --space-lg: clamp(2rem, 1.7692rem + 1.0256vw, 3rem); --space-xl: clamp(3rem, 2.6538rem + 1.5385vw, 4.5rem); --space-2xl: clamp(4rem, 3.4808rem + 2.3077vw, 6.25rem); --space-3xl: clamp(6rem, 5.0769rem + 4.1026vw, 10rem); --space-4xl: clamp(8rem, 6.6731rem + 5.8974vw, 13.75rem); /* ---------- Abstände: Überschrift → Subline / Subline → Content Immer +20% ggü. dem jeweiligen Basiswert, per calc() direkt an der Basis gekoppelt — ändert sich die Basis-Skala, zieht das hier nach. */ --space-heading-subline: calc(var(--space-sm) * 1.2); --space-subline-content: calc(var(--space-lg) * 1.2); --space-subline-content-loose: calc(var(--space-xl) * 1.2); /* ---------- Layout / Container ---------- Inhalt bleibt bis 1440px begrenzt und zentriert, damit Zeilenlängen auf großen und 6K-Displays lesbar bleiben. Hintergründe (Hero, farbige Sections) dürfen davon unabhängig full-bleed über 100% Breite gehen. */ --container-max: 1440px; --container-max-narrow: 1075px; --container-gutter: clamp(1.25rem, 0.5rem + 3.3333vw, 4.5rem); /* ---------- Radien ---------- */ --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --radius-xl: 32px; --radius-pill: 999px; /* ---------- Schatten ---------- */ --shadow-sm: 0 1px 2px rgba(36,25,28,0.06); --shadow-card: 0 1px 2px rgba(36,25,28,0.06), 0 8px 24px rgba(36,25,28,0.07); --shadow-lifted: 0 20px 60px rgba(36,25,28,0.18); /* ---------- Übergänge ---------- */ --ease-standard: cubic-bezier(.4,0,.2,1); --ease-reveal: cubic-bezier(.16,1,.3,1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 480ms; --dur-reveal: 760ms; --reveal-distance: clamp(1.25rem, 1.05rem + 0.7vw, 2.25rem); /* ---------- Sonstiges ---------- */ --header-height: clamp(7.25rem, 6.4423rem + 3.5897vw, 10.75rem); --z-header: 100; --z-menu: 200; --z-modal: 300; } /* Reduzierte Bewegung respektieren — global verfügbar für alle Layer */ @media (prefers-reduced-motion: reduce){ :root{ --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --reveal-distance: 0px; } }