/* ============================================================ Pammi Thai Massage — Design-Tokens Farbsystem-Revision 07.09.2026: Rollen statt Farbnamen. Jede Farbe heißt nach ihrer AUFGABE (Fläche, Text, Akzent, Linie), nie nach ihrem Ton. Komponenten referenzieren NUR Tokens — style.css enthält keine Rohwerte für diese Rollen mehr. Zur Auswahl standen am 07.09.2026 drei Farbverteilungen; entschieden wurde „Aubergine tief“. Die beiden Alternativen (warmes Dunkelbraun mit Violett nur in der Schrift, und Salbei als Sekundär-Akzent) sind mit der Entscheidung entfernt worden — nachlesbar in docs/CHANGELOG.md und im Commit „Farbsystem auf Rollen-Tokens umgestellt“. Flächenverteilung: die dunkle Fläche gibt es im Seitenverlauf nur im Footer; Hero und Seitenköpfe liegen als Foto mit Schleier darüber. Der Akzent erscheint nur an den Haupt-CTAs, dem Anrufen-Button, den Bewertungssternen und dünnen Trennlinien — nie als Flächenfüllung. Einzige Ausnahme ist die Goldfolie im Hero-Akzentwort „Tiefe Erholung.“, das Signature-Element der Seite. ============================================================ */ /* ---- „Aubergine tief“ ---- Kontraste WCAG (nachgerechnet im Audit P1 am 07.09.2026, siehe docs/AUDIT.md): --text-body auf base 7,18:1 · auf card 7,48:1 · auf raised 5,90:1 --text-muted auf base 5,67:1 · auf card 5,90:1 · auf raised 4,65:1 ↑ knappster Wert der Seite: nur 0,15 über AA. Wird --surface-raised je abgedunkelt, fällt --text-muted darauf durch — dann den Token aufhellen, nicht die Einzelstelle. --text-on-deep auf deep 15,03:1 · --text-on-deep-muted 9,14:1 --text-on-accent auf accent 8,38:1 (hover 9,78:1) Fokusring: --focus-ring, hell 12,93:1 / dunkel 15,03:1 (style.css) */ :root { /* ---- Farbkanäle: EINE Quelle je Farbe ---- Jede Farbe, die irgendwo transluzent gebraucht wird, steht hier einmal als blanke hsl-Kanalfolge. Die deckende Rolle darunter setzt sie in hsl() ein, die transluzenten Rollen hängen eine Deckkraft an (`hsl(var(--x-hsl) / 14%)`). Warum nicht color-mix: Bis 08.09.2026 entstanden alle transluzenten Rollen als `color-mix(in srgb, FARBE p%, transparent)`. Das ist rechnerisch dasselbe — Mischen gegen `transparent` liefert exakt die Ausgangsfarbe mit Deckkraft p —, aber color-mix gibt es erst ab Safari 16.2. Auf einem älteren iPad fiel deshalb JEDE Glasfläche, Haarlinie und jeder Schatten ersatzlos aus: Die Kopfleiste blieb durchsichtig, ihre hellen Beschriftungen standen unlesbar auf weißem Grund, und die Rahmen sprangen auf `currentColor` (Befund aus Matteos Foto vom 08.09.2026, Tablet). `hsl(… / …)` kann Safari seit 12.1. Neue transluzente Werte deshalb IMMER in dieser Form anlegen, nie wieder als color-mix gegen transparent. */ --mask-solid-hsl: 0 0% 0%; --surface-base-hsl: 38 40% 96%; --surface-deep-hsl: 280 28% 13%; --surface-deep-soft-hsl: 280 24% 18%; --text-primary-hsl: 280 28% 20%; --text-on-deep-hsl: 38 30% 94%; --text-on-deep-hi-hsl: 40 40% 99%; --accent-hsl: 45 64% 56%; --accent-secondary-hsl: 43 65% 36%; /* ---- Flächen ---- */ --surface-base: hsl(var(--surface-base-hsl)); /* Creme: Grundfläche der Seite */ --surface-card: hsl(40 45% 98%); /* Karten auf hell: eine Spur heller, nie reines Weiß */ /* Mittlere Fläche (Stimmen-Sektion): zartes Lavendel-Rosé. Der Farbton 313 ist aus den Studiofotos gemessen — es ist der Ton der violetten Wandpaneele im Behandlungsraum, stark aufgehellt und entsättigt. Helligkeit bewusst identisch zum vorherigen Sand (89 %), damit alle Textkontraste darauf unverändert bleiben. */ --surface-raised: hsl(313 20% 89%); --surface-deep: hsl(var(--surface-deep-hsl)); /* Aubergine: NUR Footer, Hero-Schleier, Menü-Glas */ --surface-deep-soft: hsl(var(--surface-deep-soft-hsl)); /* zweite Stufe auf deep: Badge, Glas-Verlauf */ /* ---- Text auf hellen Flächen ---- */ --text-primary: hsl(var(--text-primary-hsl)); /* Überschriften, Links, Preise, Hervorhebungen */ --text-body: hsl(28 10% 32%); /* Fließtext */ --text-muted: hsl(28 9% 38%); /* Nebentext, Labels, Quellenzeilen (4,8:1 auf raised) */ /* ---- Text auf der dunklen Fläche ---- */ --text-on-deep: hsl(var(--text-on-deep-hsl)); /* warmes Weiß, nie #FFF */ --text-on-deep-hi: hsl(var(--text-on-deep-hi-hsl)); /* Glanzpunkt im Hero-Akzentwort */ --text-on-deep-muted: hsl(290 12% 76%); /* Nebentext, Footer-Kontakt (≥ 4,5:1) */ /* ---- Akzent: Gold — nur CTAs, Anrufen-Button, Sterne, Haarlinien ---- 07.09.2026 vom stumpfen Messing auf echtes Gold gezogen. Maßgabe war das Logo: dort liegt das Gold bei Farbton 45–58 mit 55–71 % Sättigung, das bisherige --accent stand bei 38 und nur 42 % — daher der matte, abgenutzte Eindruck. Gelb ist die hellste Spektralfarbe, satteres Gold ist deshalb automatisch heller. Auf Flächen ist das ein Gewinn (der dunkle Text darauf trägt jetzt 8,6:1 statt 5,9:1); für dünne Elemente auf hellem Grund kippt es, dafür gibt es --accent-secondary. */ --accent: hsl(var(--accent-hsl)); --accent-hover: hsl(46 70% 62%); --accent-light: hsl(46 72% 67%); /* heller Stopp der Hero-Goldfolie */ --accent-sheen: hsl(48 82% 80%); /* Glanzpunkt in Verläufen, nie Fläche/Text */ --text-on-accent: var(--surface-deep); /* Beschriftung AUF Akzentfläche */ /* Sekundär-Akzent für Linien, Icons, Link-Unterstriche und Sterne. Sattes Altgold: dieselbe Goldrichtung wie --accent (Farbton 43 statt 45) und mit 65 % sogar kräftiger gesättigt, aber deutlich tiefer gesetzt. Nur so tragen dünne Elemente auf allen hellen Flächen die 3:1 aus WCAG 1.4.11 — Zitatkarte 4,1:1, Creme 4,0:1, Lavendel 3,3:1. Ein Gold in der Helligkeit von --accent käme dort nur auf 2,7:1. */ --accent-secondary: hsl(var(--accent-secondary-hsl)); --glow-accent: hsl(var(--accent-hsl) / 28%); /* Hover-Ring der CTAs */ /* ---- Linien: dünn, aus dem Text abgeleitet ---- */ --line: hsl(var(--text-primary-hsl) / 12%); --line-strong: hsl(var(--text-primary-hsl) / 28%); --line-accent: hsl(var(--accent-secondary-hsl) / 55%); --line-on-deep: hsl(var(--text-on-deep-hsl) / 14%); --line-on-deep-strong: hsl(var(--text-on-deep-hsl) / 50%); /* ---- Glas- und Schleierflächen (transluzent, aus deep abgeleitet) ---- */ --glass: hsl(var(--surface-deep-hsl) / 55%); --glass-strong: hsl(var(--surface-deep-hsl) / 72%); --glass-hover: hsl(var(--text-on-deep-hsl) / 10%); --glow-deep: hsl(var(--text-on-deep-hsl) / 7%); /* weiches Licht auf deep */ --hero-light: hsl(var(--text-on-deep-hsl) / 18%); /* warmes Licht oben rechts im Hero */ --mask-solid: hsl(var(--mask-solid-hsl)); /* nur Deckkraft in mask-image, nie sichtbar */ --danger: hsl(8 75% 76%); /* Fehlerton auf deep */ /* ---- Schatten: getönt aus Text bzw. Fläche, nie neutralgrau ---- */ --shadow-card: 0 10px 34px hsl(var(--text-primary-hsl) / 7%); --shadow-card-hover: 0 18px 40px hsl(var(--text-primary-hsl) / 16%); --shadow-card-soft: 0 6px 22px hsl(var(--text-primary-hsl) / 5%); --shadow-fan: 0 10px 28px hsl(var(--surface-deep-hsl) / 14%); --shadow-fan-hi: 0 22px 48px hsl(var(--surface-deep-hsl) / 24%); --shadow-deep-sm: 0 6px 18px hsl(var(--surface-deep-hsl) / 32%); --shadow-deep: 0 8px 24px hsl(var(--surface-deep-hsl) / 22%); --shadow-deep-lg: 0 10px 34px hsl(var(--surface-deep-hsl) / 26%); --shadow-text: 0 1px 12px hsl(var(--surface-deep-hsl) / 50%); /* ---- Wandernder Lichtstreifen: Glanz-Sweep über den Gold-CTAs und der Hover-Schimmer auf den Behandlungs-Kapseln. ---- */ --sheen: hsl(var(--text-on-deep-hi-hsl) / 38%); --sheen-soft: hsl(var(--text-on-deep-hi-hsl) / 16%); /* auslaufende Flanken */ /* ---- Typografie: fluid via clamp ---- */ --font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; /* Display-Serif für ALLE Überschriften (Vorgabe 07.09.2026, nach Referenzbildern). Ersetzt Fraunces und Instrument Serif; beide sind mit dieser Umstellung aus dem Projekt entfallen. Lokal gehostet (fonts/playfair-display-*.woff2), kein externer Request. */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Grotesk der Startseiten-Sektionen: trägt dort Fließtext, Zitate und Meta-Zeilen. Die Überschriften sind seit 07.09.2026 durchgehend --font-display. */ --font-ref: 'Inter', 'Segoe UI', system-ui, sans-serif; --fs-display: clamp(2.6rem, 7vw, 5.5rem); /* Hero-H1 */ --fs-h2: clamp(1.8rem, 4vw, 3rem); --fs-h3: clamp(1.15rem, 1.5vw, 1.4rem); --fs-body: clamp(1rem, .45vw + .9rem, 1.125rem); --fs-label: .78rem; /* Rollen der Startseiten-Sektionen (06.09.2026 als Token nachgezogen — die Werte standen vorher als Rohwerte in style.css): --fs-h2-sec trägt die Vertrauens- und die Stimmen-Überschrift. Die FAQ-Überschrift ist bewusst eine Spur kleiner und bleibt eigen. */ --fs-h2-sec: clamp(1.9rem, 3.6vw, 3.1rem); /* Eigene, größere Stufe nur für die Studio-Fächer-Überschrift (07.09.2026, Wunsch Matteo) — von --fs-h2-sec getrennt, damit die Stimmen-Überschrift unverändert bleibt. */ --fs-h2-lg: clamp(2.2rem, 4.4vw, 3.8rem); /* Kontaktseiten-Unterüberschriften „Öffnungszeiten“ / „Anfahrt“ (07.09.2026, Wunsch Matteo): größer als --fs-h3, das dort bisher stand und die gleiche Stufe wie normaler Fließtext-Umbruchtext trug. */ --fs-h3-lg: clamp(1.4rem, 2.2vw, 1.9rem); /* Abschnittsueberschriften der Rechtsseiten (Impressum, Datenschutz), 09.09.2026. Dort standen acht kurze Abschnitte unter der globalen h2-Stufe (--fs-h2, bis 3rem) — genauso gross wie die H1 im Seitenkopf, also gar keine Hierarchie. Eigene Stufe statt --fs-h3 (mit 1.4rem zu nah am Fliesstext) oder --fs-h3-lg (mit 1.9rem noch zu wuchtig fuer acht Zwischentitel auf einer Textseite). */ --fs-h2-legal: clamp(1.3rem, 1.1vw + 1rem, 1.65rem); --fs-lead: .95rem; /* Sektions-Einleitungen */ --fs-quote: .93rem; /* Zitattext */ --fs-meta: .88rem; /* Namenszeile, Signaturen */ --fs-mark: .78rem; /* Sterne und andere Marker */ --fs-micro: .74rem; /* Monogramm, Quellenzeile */ --tracking-display: .01em; --tracking-label: .18em; --measure: 62ch; /* Fließtext-Maß, zusätzlich zu --maxw */ /* ---- Spacing: 8px-Basis ---- */ --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem; --section-y: clamp(3.25rem, 6.2vw, 6.25rem); /* DER Sektionsabstand */ --fade-zone: clamp(7.5rem, 12vw, 12.5rem); /* weiche Stufenübergänge (§2) */ /* ---- Motion: EINE Bewegungssprache ---- */ --ease: cubic-bezier(.22, 1, .36, 1); --dur: .28s; --dur-fast: .18s; --dur-reveal: .65s; --dur-page: .55s; /* Seiten-Wisch (View Transitions) */ /* Wandern der aktiven Tab-Pille. EIN Wert für beide Wege, auf denen die Pille ihren Platz wechselt (View-Transition-Morph und CSS-Gleiten), damit die Bewegung überall gleich lange dauert. */ --dur-morph: .5s; /* ---- Form + Layout ---- */ --radius: 12px; --radius-sm: 8px; --radius-lg: 22px; /* Foto-Kacheln im Studio-Fächer */ --maxw: 1440px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --header-h: 72px; }