/* ============================================================ LEICHT IN BEWEGUNG · Haus-Tokens (Atmosphärensystem) assets/tokens.css · Stand 2026 Das "Haus" — Fundament, das jeder Raum (verbindung/singen/ sprechstunde/Haupttemplate) später per [data-room="…"] erbt und gezielt überschreibt. Diese Datei wird noch von KEINER Seite eingebunden — reines Vorbereitungs-Artefakt. Quelle der Werte: bewusst aus den LIVE-Stylesheets gezogen (verbindung.css / muehelos-singen.css / koerpersprechstunde.css), nicht aus dem ursprünglichen Konzeptdokument. Wo die vier bestehenden Stylesheets untereinander abweichen, ist das mit ⚠ markiert — bitte vor der ersten Raum-Migration bestätigen. Farben stehen bewusst NICHT hier drin (wie im Konzeptdokument vorgesehen) — jeder Raum bringt seinen eigenen --accent mit. Siehe Notiz am Dateiende zur geplanten Namens-Vereinheitlichung. ============================================================ */ :root { /* ---- Schriftfamilien ---- Übernommen aus verbindung.css / muehelos-singen.css / koerpersprechstunde.css (3 von 4 Stylesheets nutzen exakt diesen Satz). style.css nutzt aktuell nur 'Lato',sans-serif ohne eigene Variable — das ist eine Teilmenge von --font-sans, keine Abweichung. */ --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-display: 'Playfair Display SC', 'Playfair Display', Georgia, serif; --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---- Weißraum-Basiseinheit ---- 8px-Raster für kleinere, feste Abstände (Gaps, Innenabstände von Komponenten). Diese Stufen sind NEU eingeführt (kein Raum nutzt sie aktuell explizit so benannt), aber unstrittig, da sie nur ein rechnerisches Vielfaches von 8px sind. */ --space-unit: 8px; --space-xs: calc(var(--space-unit) * 1); /* 8px */ --space-sm: calc(var(--space-unit) * 2); /* 16px */ --space-md: calc(var(--space-unit) * 4); /* 32px */ --space-lg: calc(var(--space-unit) * 8); /* 64px */ --space-xl: calc(var(--space-unit) * 16); /* 128px */ /* ---- Sektionsabstand (wichtigster Atmosphären-Hebel) ---- Bewusst NICHT aus dem alten Konzeptdokument (128px/192px), sondern 1:1 aus den Live-Werten von verbindung.css übernommen (dort --section-py / --section-py-lg). muehelos-singen.css nutzt aktuell abweichend clamp(80px,11vw,160px) direkt im Selektor (kein eigenes Token) ⚠ – koerpersprechstunde.css übernimmt bereits exakt die verbindung.css-Werte. --space-section bleibt fluid (clamp) und daher kein sauberes Vielfaches von --space-unit – das ist beabsichtigt, da die vw-Komponente den atmenden Charakter trägt. */ --space-section: clamp(100px, 13.75vw, 200px); /* aus verbindung.css --section-py */ --space-section-lg: clamp(125px, 17.5vw, 250px); /* aus verbindung.css --section-py-lg */ /* ---- Lesebreite / Maß ---- style.css: --maxread:680px. Landing-Pages: .lede max-width 56ch, .prose p max-width 62ch (kein einzelnes --measure-Token bisher). Hier als Ausgangswert die .prose-Breite (breiter genutzter Fließtext- Fall in den Landing-Pages) ⚠ zu bestätigen gegen style.css' 680px. */ --measure: 62ch; /* ---- Content-Maximalbreiten ---- --max:1240px identisch in allen drei Landing-Page-Stylesheets. style.css nutzt --maxwide:1180px (Haupttemplate, etwas schmaler). */ --container-max: 1240px; /* ---- Typo: gemeinsame Konstanten ---- line-height-display: h1/h2/h3 in allen drei Landing-Pages = 1.1. style.css weicht je Heading-Level ab (h1 1.08, .article-head h1 1.18, article-body h2 1.3) ⚠ – beim Haupttemplate-Umbau prüfen. line-height-body: ENTSCHIEDEN als 1.75 (style.css-Wert, dort body/.prose/.szene p). Landing-Pages nutzen dagegen 1.6 – wird bei deren Migration auf 1.75 angehoben (bewusst, kein Fehler). letter-spacing-display: -0.005em, aus h1/h2/h3 der Landing-Pages (style.css nutzt uneinheitlich -.018em/-.01em/-.005em je Heading) ⚠. letter-spacing-eyebrow: ENTSCHIEDEN als .16em (style.css-Wert). Landing-Pages nutzen dagegen .22em – wird bei deren Migration auf .16em verengt (bewusst, kein Fehler). */ --line-height-display: 1.1; --line-height-body: 1.75; --letter-spacing-display: -0.005em; --letter-spacing-eyebrow: .16em; /* ---- Bewegung: Reveal-Basis ---- Vereinheitlicht auf das Timing aus den drei Landing-Pages (dort bereits wortgleich in allen dreien: 1400ms, gleiche Easing- Kurve, gleiche Distanz). style.css nutzt aktuell abweichend 800ms / translateY(18px) mit Klassenname .visible statt .in ⚠ – wird erst bei der Haupttemplate-Migration angeglichen, nicht hier. --reveal-stagger bildet den Rhythmus der aktuell fest codierten .reveal-delay-1/2/3-Utility-Klassen ab (120/240/360ms = 1×/2×/3× --reveal-stagger); diese Klassen selbst werden erst beim Umbau der einzelnen Räume aus tokens.css referenziert. */ --reveal-duration: 1400ms; --reveal-distance: 32px; --reveal-stagger: 120ms; --ease-atmosphere: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Schatten (markenweit zurückhaltend) ---- Noch kein Raum nutzt ein einzelnes benanntes Schatten-Token, alle box-shadow-Werte stehen aktuell literal im Selektor. Als Startpunkt aus dem Konzeptdokument übernommen, nicht live belegt. */ --shadow-whisper: 0 1px 40px rgba(0,0,0,0.04); } /* Reduced motion: zentral, markenweit. Deckt sowohl die künftige .reveal.in-Konvention (Landing-Pages) als auch .reveal.visible (aktuelles Haupttemplate) ab, sobald Raum-CSS auf diese Tokens umgestellt ist. */ @media (prefers-reduced-motion: reduce) { :root { --reveal-duration: 0ms; --reveal-distance: 0px; --reveal-stagger: 0ms; } html { scroll-behavior: auto; } } /* ============================================================ Notiz — Farb-Token-Namen (noch NICHT umgesetzt) ============================================================ Vorschlag für einen späteren, separaten Schritt: --accent / --accent-deep als einheitlicher Name in allen drei Räumen, inklusive Umbenennung von --sage/--sage-deep zu --accent/ --accent-deep bei "Mühelos singen". FarbWERTE bleiben dabei unverändert (Live-Stand): Singen: --accent #90ca4d / --accent-deep #6fa336 Sprechstunde: --accent #C9765C / --accent-deep #A85A3E Verbindung: --accent #2e7d74 (unverändert) Diese Datei definiert bewusst keine Farben — jeder Raum bringt seinen --accent selbst mit, siehe Konzeptdokument Teil I. ============================================================ */