/* ============================================================================= WOS Pro · LP-Components · Tokens-Schicht 2 — andy-hoffmann.css ============================================================================= Marken-Wertbelegung für BodyMind Transformation (Andy Hoffmann, Lich/Laubach). LOKAL / gitignored (.gitignore: brand/lp-components/_tokens/*.css, DSGVO, Kunden-Brand). Angelegt 2026-09-08 im Phase-1-Brand-Capture von wos-website-build. Lade-Reihenfolge: _base.css ZUERST, dann diese Datei. HERKUNFT DER WERTE (belegt, nicht gemessen): basisdokumente/v4/BrandVoice-AH-V4.md, Abschnitt Design-System (Andy, KickOff 10.06.2026): Orange #FF8800, Aquamarin #7FFFD4, dazu Schwarz und Weiß; Logo-Schriften TT Autonomous und Before Collapse bleiben Logo-Ebene und tauchen hier bewusst NICHT auf. Fließtext-Schriften laut D2 (gelockt 11.06.2026): Lora für Leitsätze und Headlines, Inter für Fließtext, beide selbst gehostet (woff2 im Theme, kein Google-CDN). DESIGN-DIREKTION (KG2 plus KickOff, BrandVoice V4 Abschnitt 5): ruhig, geordnet, viel Weißraum, "der erste Raum für Veränderung". Markenfarben NUR als Akzente auf überwiegend weißer Fläche. Nicht bunt, nicht fancy, kein CTA-Druck. KONTRAST-REGELN (vor dem Bau gerendert prüfen, nicht aus dem Quelltext raten): - Orange #FF8800 auf Weiß trägt als Text NICHT (rund 2,5:1). Orange lebt als Akzent mit Lesefunktion (Linien, Marker, Zahlen, Icons) und als CTA-Fläche mit DUNKLEM Text (Kontrast rund 8:1). Nie Orange als Fließtext oder Link auf Weiß. - Aquamarin #7FFFD4 auf Weiß trägt als Text nie (rund 1,3:1). Aquamarin ist Flächen-Wash, Rahmen-Tönung, Icon-Grund, Hover-Schimmer. Auf der dunklen Bühne trägt es als Akzent (rund 14:1 auf Schwarz). - Links im Fließtext: Ink mit Orange-Unterstreichung, nicht Orange-Text. ============================================================================ */ :root { /* --- Farben: Akzente ------------------------------------------------------ */ --color-primary: #FF8800; /* Orange: Akzent mit Lesefunktion, CTA-Fläche */ --color-primary-strong: #E67A00; /* dunkleres Orange: Hover, Verlaufs-Ende */ --color-primary-soft: rgba(255, 136, 0, 0.14); /* Orange-Tönung: Pills, Rahmen, Eyebrow-Grund */ --color-on-primary: #141414; /* dunkler Text auf Orange-Fläche (Kontrast) */ --color-secondary: #7FFFD4; /* Aquamarin: Wash, Icon-Grund, Rahmen, Schimmer, nie Text auf Weiß */ --color-secondary-soft: rgba(127, 255, 212, 0.22); /* leichte Aquamarin-Tönung */ /* CTA-Akzent: identisch mit Primary, es gibt nur EINE laute Farbe auf dieser Seite */ --color-accent: #FF8800; --color-accent-strong: #E67A00; --color-on-accent: #141414; /* --- Farben: helle (dominante) Welt --------------------------------------- */ --color-bg: #FFFFFF; /* Weiß: Seite, die Regel */ --color-bg-warm: #F7F7F5; /* warmes Hellgrau: ruhige Wechsel-Sektion */ --color-bg-wash: #EEF8F4; /* hauchdünne Aquamarin-Tönung: Wash-Flächen, Quiz-Grund */ --color-surface: #FFFFFF; /* Karten auf hellem Grund */ --color-ink: #141414; /* Fast-Schwarz: Headlines, starker Text */ --color-ink-soft: #4A4A4A; /* Dunkelgrau: Fließtext, Sekundärtext */ --color-line: rgba(20, 20, 20, 0.10); /* Linien, Rahmen, Divider */ /* --- Abstände ------------------------------------------------------------ */ --space-xs: 8px; --space-s: 16px; --space-m: 24px; --space-l: 40px; --space-xl: 64px; --space-xxl: 96px; /* --- Typografie (D2: Lora für Leitsätze und Headlines, Inter für Fließtext) --- */ --font-headline: 'Lora', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-accent: 'Lora', Georgia, 'Times New Roman', serif; /* Leitsätze, Zitate, Andys O-Töne */ --font-scale-display: clamp(2.4rem, 6.5vw, 3.8rem); /* Hero-Headline, ruhig groß */ --font-scale-h1: clamp(2.0rem, 5.5vw, 3.0rem); --font-scale-h2: clamp(1.55rem, 4vw, 2.2rem); --font-scale-h3: 1.35rem; --font-scale-body: 1.0625rem; /* 17px, viel Zeilenraum */ --font-scale-small: 0.875rem; /* --- Radius -------------------------------------------------------------- */ --radius-button: 8px; --radius-card: 16px; --radius-pill: 100px; /* --- Schatten und Tiefe (farbig, nicht flach: Qualitätsanspruch 03.09.2026) --- Helle Welt, deshalb Ink-getönt für Ruhe und Orange-getönt dort, wo etwas gehoben wird (Karten, CTA). Kein Grau-Nebel. */ --shadow-soft: 0 18px 30px -18px rgba(20, 20, 20, 0.12); --shadow-card: 0 24px 60px -28px rgba(255, 136, 0, 0.22); --shadow-card-lift: 0 34px 80px -24px rgba(255, 136, 0, 0.30); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.7); } /* ----------------------------------------------------------------------------- DUNKLE BÜHNE (sparsam: allenfalls Footer oder ein einzelner Akzent-Anker). Schwarz und Weiß sind Markenfarben; hier tragen Orange UND Aquamarin als Akzent. Auf `.section--dark` oder [data-section="dark"] setzen, token-pure Komponenten adaptieren automatisch. ---------------------------------------------------------------------------- */ .section--dark, [data-section="dark"] { --color-bg: #0B0B0B; --color-bg-warm: #141414; --color-bg-wash: #101816; /* Schwarz mit Hauch Aquamarin */ --color-surface: #151515; --color-ink: #FFFFFF; --color-ink-soft: #B8B8B8; --color-line: rgba(255, 255, 255, 0.12); --color-primary: #FF8800; --color-primary-strong: #FF9A26; /* auf Dunkel heller als Hover */ --color-primary-soft: rgba(255, 136, 0, 0.22); --color-on-primary: #141414; --color-secondary: #7FFFD4; /* auf Dunkel als Text-Akzent tragfähig */ --color-secondary-soft: rgba(127, 255, 212, 0.18); --shadow-soft: 0 18px 40px -20px rgba(0, 0, 0, 0.55); --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.6); --shadow-card-lift: 0 34px 80px -24px rgba(255, 136, 0, 0.35); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ----------------------------------------------------------------------------- Im Bau gerendert zu prüfen (bewusst offen, siehe setup/build/kapitel-01-brand-capture.md): - Orange-CTA mit dunklem Text gegen AA messen (getComputedStyle), ebenso Aquamarin-Wash. - woff2 für Lora (Regular, Italic, SemiBold) und Inter (Regular, Medium, SemiBold) in assets/fonts/ plus fonts.css, kein CDN. Fallback-Stapel oben ist bewusst konservativ. - Logo-Dateien (Canva-Einladung, Kettlebell-Figur mit T) als SVG/PNG in assets/img/. ---------------------------------------------------------------------------- */