/* ============================================================================= Life Change Management — Design Tokens (CSS Custom Properties) Basis: Palette v2 „vedisch" (Farben) + Design-Sprache v1 (Typo/Spacing/Rhythmus) v2.0.0 · Stand: 2026-07-06 · Spiegelt docs/design-system/tokens.json 1:1. Quellen: docs/strategy/plan-homepage-texte-coaching.md Phase 1b (Farben, kanonisch), lcc-theme/DESIGN.md (Palette/Rollen/Kontrastmatrix), docs/design-system/palette-v2-mapping-2026-07-06.md (Mapping alt→neu), docs/content/design-sprache-v1.md (Typo/Spacing — Farbschicht dort ABGELÖST), docs/content/brand-voice-v2.md (Voice). Leitgedanke: Tiefe, Würde und lebendige Klarheit. v2 (06.07.2026): Token-NAMEN unverändert (theme.json-Slugs in Patterns), nur WERTE getauscht. Neue Primitive: orange-strong (Button-BG, AA), sage(+hover/active), gold. CTA-Varianten A/B als Body-Klassen am Dateiende (Default B, final 06.07.2026). Abgeleitete Töne am 06.07.2026 bestätigt. Konvention Größenbereiche: Token = unterer v1-Wert, Bereich als Kommentar. ============================================================================= */ :root { /* --- Farbe · Primitive (Palette v2 „vedisch" + Ableitungen) -------------- */ --color-sand: #F4EFE4; /* Warmes Elfenbein (v1: #F2EDE4) */ --color-sand-light: #FAF6EC; /* Elfenbein hell (abgeleitet, bestätigt 06.07.2026) */ --color-petrol: #175B5D; /* Pfauen-Petrol (v1: #1E3A4F) */ --color-petrol-dark: #123F42; /* Tiefes Blaugrün (v1: #2E4654) */ --color-petrol-light:#8FB5B0; /* Teal hell (abgeleitet, bestätigt 06.07.2026) */ --color-petrol-pale: #CDDCD9; /* Teal blass (abgeleitet, bestätigt 06.07.2026) */ --color-orange: #B76545; /* Gedämpftes Kupfer — Akzent, als Button-BG verboten (kein AA) */ --color-orange-strong:#A85B3D;/* Kupfer tief — Button-BG Primär, Weiß 4.97:1 AA */ --color-orange-hover:#925137; /* Kupfer ×0.8 — Weiß 6.08 AA (bestätigt 06.07.2026) */ --color-orange-active:#80472F;/* Kupfer ×0.7 — Weiß 7.34 AA (bestätigt 06.07.2026) */ --color-sage: #A7B6A3; /* Salbeigrün — ruhige Button-/Flächenfarbe, Schrift IMMER Anthrazit */ --color-sage-hover: #96A493; /* Salbei ×0.9 — Anthrazit 5.11 AA (bestätigt 06.07.2026) */ --color-sage-active: #8E9B8B; /* Salbei ×0.85 (nicht ×0.8: sonst 4.10 < AA) — Anthrazit 4.59 AA (bestätigt 06.07.2026) */ --color-gold: #B69A52; /* Antikes Gold — Premium-Akzent, NUR Deko (nie Text auf hell, nie Fläche) */ --color-ink: #2C302F; /* Weiches Anthrazit (v1: #1A1A2E) */ --color-gray-body: #2C302F; /* Fließtext = Anthrazit (v2-Merge mit ink; v1: #555555) */ --color-white: #FFFFFF; /* Text auf dunkel */ /* --- Farbe · Rollen ------------------------------------------------------ */ --color-bg-default: var(--color-sand); --color-bg-alt: var(--color-sand-light); --color-bg-dark: var(--color-petrol-dark); /* v2-Fix 06.07.: dunkle Flächen = Tiefes Blaugrün #123F42 (wie Footer); Weiß darauf 11.6:1 */ --color-text-heading: var(--color-petrol); /* v2: Pfauen-Petrol als Hauptfarbe (Headlines) — 6.81–7.80:1 auf hell */ --color-text-subheading: var(--color-petrol-dark); --color-text-body: var(--color-gray-body); --color-text-on-dark-heading:var(--color-white); --color-text-on-dark-body: var(--color-petrol-pale); --color-text-on-dark-muted: var(--color-petrol-light); --color-accent-cta: var(--color-orange); /* Kupfer-Akzent: Checkmarks/Deko/Glow — NIE Flächen-BG, NICHT Button-BG (dafür orange-strong) */ --color-accent-cta-hover: var(--color-orange-hover); --color-accent-cta-active: var(--color-orange-active); /* DEFAULT (Review) */ --color-accent-premium: var(--color-gold); /* v2: Premium-Akzent — Zitat-Border, Linien auf dunkel; sparsam, NUR Deko */ --color-label-phase: var(--color-petrol-light); --color-border-faint: var(--color-petrol-pale); --color-link-inline: var(--color-petrol); /* 1b: Fließtext-Link, unterstrichen */ --color-link-inline-hover: var(--color-petrol-dark); /* 1b: Orange NICHT für Links */ /* --- Farbe · Status (DEFAULT Review — v2 behalten: Success≈Salbei, Error≈Kupfer, Warning≈Gold) */ --color-success: #4F7A6A; --color-warning: #D49A3A; --color-error: #B4452F; --color-info: #123F42; /* --- Typografie · Familien (1b: Montserrat=Display, Lora=Body; Design-Pass: Fraunces=Headline) -- */ --font-display: "Montserrat"; /* Labels/Buttons/Nav/Sub-Headline — Schnitte 500/600/700, self-hosted woff2 */ --font-headline:"Fraunces"; /* Design-Pass: H1/H2 als High-Contrast-Display-Serif (variable opsz+wght, OFL, self-hosted). Labels bleiben --font-display. */ --font-body: "Lora"; /* Fließtext/Kleintext/Zitate — Schnitte 400/500/600 + 400 italic, self-hosted woff2 */ /* Kein Google-Fonts-CDN. */ /* --- Typografie · Gewichte ----------------------------------------------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* --- Typografie · Line-Height / Letter-Spacing (DEFAULT Review) ---------- */ --line-height-body: 1.6; --line-height-heading: 1.25; --letter-spacing-heading-large: -0.02em; /* H1, Preis */ --letter-spacing-heading: -0.01em; /* H2, H3 */ --letter-spacing-body: 0em; /* --- Typografie · Größen Desktop ----------------------------------------- */ --fs-h1: 56px; /* Design-Pass: mutigere Hero-Scale (vorher 44px) */ --fs-h2: 40px; /* Design-Pass: mutigere Scale (vorher 32px) */ --fs-h3: 22px; --fs-subheadline: 20px; /* 2b: Montserrat 500 */ --fs-atemzug: 20px; /* 2b: Lora italic 400 */ --fs-phase-label: 11px; /* uppercase */ --fs-body: 16px; /* v1: 16–17px — Bereich, unterer Wert gesetzt */ --fs-small: 14px; /* v1: 14–15px — Bereich, unterer Wert gesetzt */ --fs-quote: 16px; /* italic */ --fs-price: 48px; /* v1: 48–52px — Bereich, unterer Wert gesetzt */ /* --- Typografie · Größen Mobile ------------------------------------------ */ --fs-h1-mobile: 36px; /* Design-Pass: mutiger (vorher 30px) */ --fs-h2-mobile: 28px; /* Design-Pass: mutiger (vorher 24px) */ --fs-h3-mobile: 19px; --fs-subheadline-mobile: 18px; --fs-atemzug-mobile: 18px; --fs-phase-label-mobile: 11px; --fs-body-mobile: 16px; --fs-small-mobile: 14px; --fs-quote-mobile: 16px; --fs-price-mobile: 40px; /* --- Spacing · Sektions-Paddings (v1 Whitespace-Tabelle) ----------------- */ --space-hero-top: 140px; --space-hero-bottom: 120px; --space-atemzug: 80px; --space-section: 96px; --space-petrol-section: 112px; --space-cta-close: 120px; --space-inline-x: 40px; --space-inline-x-mobile: 24px; /* --- Spacing · Feinraster (2b, DEFAULT Review — 4px-Basis, Vielfache von 4) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* --- Spacing · Semantische Rollen (2b, DEFAULT Review) ------------------- */ --space-stack-xs: 8px; --space-stack-sm: 12px; --space-stack-md: 16px; --space-stack-lg: 24px; --space-stack-xl: 32px; --space-inline-xs: 4px; --space-inline-sm: 8px; --space-inline-md: 16px; --space-inline-lg: 24px; /* --- Layout -------------------------------------------------------------- */ --content-max-width-min: 780px; /* Content-Elemente: max-width 780–1060px */ --content-max-width-max: 1060px; /* Breakpoints (DEFAULT Review) */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* --- Radius (1b: sm/md/lg — kein Pill) ----------------------------------- */ --radius-sm: 6px; --radius-md: 10px; /* Buttons */ --radius-lg: 16px; /* Cards: md–lg */ /* --- Border (DEFAULT Review) --------------------------------------------- */ --border-hairline: 1px; /* --- Schatten (DEFAULT Review — zurückhaltend; v2: color-mix statt rgba-Hartcodierung) */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-petrol) 8%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--color-petrol) 10%, transparent); /* --- Fokus (DEFAULT Review — AA-sichtbar) -------------------------------- */ --focus-outline-width: 2px; --focus-outline-style: solid; --focus-outline-color: var(--color-petrol); --focus-outline-offset: 2px; /* --- Komponente · Button/CTA (1b, v2: Varianten A/B — Overrides am Dateiende) */ /* :root-Defaults = Variante B primär (Kupfer tief / Weiß, 4.97 AA). Gilt auch im Block-Editor, der keine Body-Klasse trägt. Pures Kupfer ist als Button-BG verboten. */ --button-bg: var(--color-orange-strong); --button-text-color: var(--color-white); --button-font: var(--font-display); --button-font-weight:var(--font-weight-semibold); --button-font-size: 16px; /* Mindestgröße */ --button-min-height: 44px; /* Touch-Target */ --button-radius: var(--radius-md); --button-hover: var(--color-accent-cta-hover); --button-active: var(--color-accent-cta-active); /* DEFAULT (Review) */ --button-disabled-opacity: 0.5; /* DEFAULT (Review) */ --button-padding: 16px 32px; /* DEFAULT (Review) */ /* v2: Border — Salbei-Flächen heben sich nur 1.86:1 vom Elfenbein ab, darum tragen ALLE Salbei-Buttons eine Petrol-Hairline (Entscheidung 06.07.2026). Kupfer-Buttons: keine. */ --button-border: 0; /* v2: Sekundär-Button (ruhig) — Salbei mit Anthrazit-Schrift (6.28 AA), NIE Weiß (2.13 FAIL). */ --button-secondary-bg: var(--color-sage); --button-secondary-text-color: var(--color-ink); --button-secondary-hover: var(--color-sage-hover); --button-secondary-active: var(--color-sage-active); --button-secondary-border: var(--border-hairline) solid var(--color-petrol); /* Kanonisches CTA-Label (Voice/SSoT): "Klarheitsgespräch buchen". */ /* GAP: Formularfeld-Styling (Inputs/Selects/Textareas) — weder v1 noch 1b */ /* --- Motion (2c) — minimal, dezent, reduced-motion-geschützt ------------- */ --motion-fast: 150ms; /* Zustände: Hover/Fokus */ --motion-base: 250ms; /* UI-Übergänge */ --motion-reveal: 600ms; /* Scroll-Reveal */ --motion-reveal-distance: 16px; --motion-breath: 10s; /* Hero-Atmen (sehr dezent) */ --ease-calm: cubic-bezier(0.22, 1, 0.36, 1); /* weiches ease-out, „setzt sich" */ --ease-state: cubic-bezier(0.4, 0, 0.2, 1); /* Zustands-Übergänge */ /* --- Design-Pass (Schwellen-Signatur + Textur + Tiefe) ------------------- */ /* Schwellen-Signatur „Türschwelle" an dunkel→hell-Übergängen */ --color-threshold-line: color-mix(in srgb, var(--color-petrol) 40%, transparent); /* Sims-Linie 1 */ --color-threshold-line-2: color-mix(in srgb, var(--color-petrol) 22%, transparent); /* Sims-Linie 2 */ --shadow-threshold: color-mix(in srgb, var(--color-petrol) 20%, transparent); /* weicher Schatten auf den „Boden" */ /* Textur · Sand-Grain (CSS-Noise, Opazität als Token) */ --grain-opacity: 0.07; /* helle Sektionen */ --grain-opacity-dark: 0.05; /* Petrol-Sektionen */ /* Sand-Tiefe · Hauch Wärme auf hellen Sektionen (sehr dezent) */ --sand-depth: color-mix(in srgb, var(--color-orange) 6%, transparent); /* Petrol-Tiefe · Glow + Vignette */ --glow-petrol: color-mix(in srgb, var(--color-orange) 12%, transparent); /* leiser warmer Glow (v2: Kupfer) */ --vignette-petrol: color-mix(in srgb, var(--color-ink) 28%, transparent); /* dunklere Ränder (v2: Anthrazit) */ } /* ============================================================================= CTA-Varianten (v2, 06.07.2026) — umschaltbar per Body-Klasse. Schalter: LCC_CTA_VARIANT in lcc-theme/functions.php ('a' | 'b'). Default 'b' — FINAL (Martins Entscheidung 06.07.2026 nach Preview-Sichtung). Variante A = Martins ursprünglicher Wunsch: ALLE Buttons Salbei/Anthrazit. Variante B = Hierarchie: Primär Kupfer tief/Weiß, Sekundär Salbei/Anthrazit. ============================================================================= */ /* Variante A: alle Buttons Salbei — Schrift Anthrazit (6.28 AA), nie Weiß */ .cta-variant-a { --button-bg: var(--color-sage); --button-text-color: var(--color-ink); --button-hover: var(--color-sage-hover); --button-active: var(--color-sage-active); --button-border: var(--border-hairline) solid var(--color-petrol); /* Salbei braucht Kante (1.86 zur Fläche) */ } /* Variante B: erbt die :root-Defaults (Kupfer tief/Weiß + Sekundär Salbei) — explizit deklariert für Toggle-Symmetrie in der Preview */ .cta-variant-b {}