/* tokens.css — Single Source of Truth für das CD des WachVerlags. * Werte NUR hier ändern; in base.css/components.css stehen keine Hex-Werte. * * Richtung (Entwurf 23.07.2026): * Tiefes Grün = Fundament (Solidität, aufrecht, ruhig) * Historisches Türkis = Funke (Wiedererkennung, sparsam gesetzt) * Weißraum = eigentlicher Hauptdarsteller (das Moderne) * * Kontrastwerte in den Kommentaren sind gegen Weiß gerechnet (WCAG). * AA verlangt 4,5:1 für Fließtext, 3:1 für große Schrift und UI-Elemente. */ :root{ /* ---- Fundament: Grün (Solidität) ---- */ --forest:#1E4D40; /* 9,6:1 Text, Headlines, tragende Flächen */ --forest-deep:#12312A; /* 14,0:1 dunkle Bänder, Hero-Flächen */ --forest-soft:#3C7565; /* 5,4:1 sekundär: Hover, Rahmen, ruhige Akzente */ /* ---- Funke: das historische Türkis (Wiedererkennung) ---- */ --teal:#00A59F; /* 3,1:1 NUR Flächen/CTA/große Schrift — NIE Fließtext */ --teal-deep:#007F7A; /* 4,9:1 Türkis als Textfarbe (AA-sicher) */ --teal-mist:#D9EFEC; /* zarte Hinterlegung */ --on-teal:#FFFFFF; /* Text auf Türkisfläche */ /* ---- Fläche & Linie (Freiraum) ---- */ /* 31.07.2026: Seitengrund steht auf reinem Weiß (vorher warmes #F7F5EF). Zwischenstufen, falls Weiß später doch zu kühl gerät: #FCFBF9 · #FAF8F3 */ --page:#FFFFFF; /* Seitenhintergrund */ /* Grund der Kopfleiste und der Menüklappe auf schmalen Schirmen (die ist nichts anderes als die aufgeklappte Leiste). ENTSCHIEDEN 31.07.2026 (Frank): läuft mit dem Seitengrund, also Weiß. Zwei warme Fassungen wurden davor ausprobiert und beide verworfen — die Leiste soll sich nicht vom Rest absetzen. Was sie stattdessen trägt, ist die Haarlinie an ihrer Unterkante (siehe .nav in components.css); die begrenzt das Band, ohne es einzufärben. Der Token bleibt trotzdem bestehen, obwohl er nur auf --page zeigt: Er ist der Punkt, an dem sich Leiste und Seite trennen lassen, falls die Frage wiederkommt. Ein Wert genügt dann. Gelernt bei den Versuchen, falls es doch wieder warm werden soll: Ein schmales Band neben einer grossen weissen Flaeche liest sich KUEHLER als derselbe Farbwert auf ganzer Seite (Simultankontrast). Der alte Seitengrund #F7F5EF hat nur 8 Stufen Abstand zwischen Rot- und Blaukanal; als Band braucht es etwa das Doppelte, um gleich warm zu wirken. Und die Leiste ist zu 88 % deckend, es scheinen also 12 % Weiss durch — der Wert muss die Verduennung mit einrechnen. */ /* Der Hero bekam am 03.08.2026 ein eigenes Band über die ganze Breite, und zwar in GENAU dem warmen Off-White, das bis zum 31.07. der Seitengrund war. Der Ton ist damit nicht verschwunden, er hat eine Aufgabe bekommen: Er ist nicht mehr „die Farbe, die wir aufgegeben haben", sondern „die Farbe des Kopfes". (Aus der Git-Historie: früher --page, mit dem Regler-Vermerk „Wärme regelbar: heller → #FAF8F3".) Warum überhaupt eine Fläche: Der Hero unterschied sich von den Abschnitten darunter nur durch Schriftgröße — ein GRADUELLER Unterschied, den das Auge als „mehr vom Selben" liest. Ein Kopf braucht einen KATEGORIALEN: andere Fläche, andere Kante, andere Farbe. */ --hero-grund:#F7F5EF; /* Ton der Kopfleiste, NACHDEM der Hero durchgescrollt ist. Darüber trägt sie --hero-grund mit; das Umschalten macht die Klasse .is-nach-hero. Genau dafür wurde dieser Token am 31.07. vom Seitengrund entkoppelt — damals ohne Anwendung, jetzt mit. */ --nav-grund:var(--page); /* Kopfleiste + Menüklappe, unterhalb des Hero */ --paper:#FBFAF8; /* helle Fläche innerhalb der Seite */ --surface:#FFFFFF; /* Karten */ --mist:#EDF1EE; /* ruhige Tönung */ --sand:#F3EDE1; /* warmes Papier / Buchcover */ --line:#E4E7E3; /* Hairline / Border */ /* ---- Text ---- */ --ink:#1F2421; /* 15,8:1 Fließtext */ --ink-soft:#5A635E; /* 6,2:1 sekundärer Text */ --on-dark:#E8F0EC; /* 12,1:1 auf --forest-deep */ --on-dark-soft:#A9BDB4; /* ---- Goldgelb — der warme Funke des Sonnenaufgangs (CD-Akzent, festgelegt 24.07.) ---- */ --dawn:#F8CE49; /* hell: Sonne, Flächen, Akzent auf Dunkel */ --dawn-deep:#8F730E; /* tief: Linien, Rahmen, Unterstreichung auf Hell */ --sun-orange:#F2913D; /* warme Sonnen-Testfarben (Vergleich) */ --sun-coral:#EF6A44; /* ---- Signalfarben (Status / Ampel) — hell = Fläche/Punkt, deep = Text/Linie (AA) ---- */ --signal-green:#2E9E5B; --signal-green-deep:#1B6E3B; --green-mist:#E3F2E8; /* verfügbar / Erfolg */ --signal-red:#D64B4B; --signal-red-deep:#A82626; --red-mist:#F8E6E4; /* nicht verfügbar / Fehler */ --signal-blue:#3B7DC4; --signal-blue-deep:#1E5488; --blue-mist:#E5EEF7; /* Info / Hinweis */ /* ---- Statusfarben (nur für diese Vorschau) ---- */ --warn-bg:#FBEDD9; --warn-ink:#8A5A12; /* ---- Typografie ---- * PLATZHALTER: Die finale Hausschrift ist noch nicht entschieden. * Sobald gewählt, wird sie selbst gehostet (woff2, kein Google-CDN). */ --font-sans:'Source Sans 3',system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Fließtext/UI, selbst gehostet */ --font-display:'Source Serif 4',Georgia,"Times New Roman",serif; /* Hausschrift (selbst gehostet) */ --font-mono:ui-monospace,Consolas,"Courier New",monospace; /* ---- Bilder im Seitenfluss ---- Radius und Schatten für ALLE grossen Fotos an einer Stelle. Angelegt am 31.07.2026, weil Frank bemerkte, dass das Hero-Bild einen Schatten trug und die Fotos darunter nicht — dieselbe Sorte Bild, zwei Behandlungen. Vorher standen die Werte nur bei .hero__foto img, die Abschnittsbilder hatten gar keine. Jetzt hängen beide an diesen zwei Werten. Stand jetzt = die bisherige Hero-Behandlung, unverändert; die Bilder darunter sind ihr nur angeglichen worden. LEITER, falls es nüchterner werden soll (beide Werte gehören zusammen — Radius und Schatten sind dieselbe Geste, halb durchgezogen wirkt unentschieden): wie jetzt 16px · 0 18px 44px rgba(18,49,42,.20) gedämpft 10px · 0 10px 28px rgba(18,49,42,.12) flach 6px · none hart 0 · none ← die sachlichste Fassung Freigestellte Motive (.hero__foto--frei) und die Spielfiguren (.figur) bleiben aussen vor: Sie bringen ihre eigene Silhouette mit und tragen einen Schlagschatten entlang der Kontur statt entlang eines Rechtecks. */ --bild-radius:16px; --bild-schatten:0 18px 44px rgba(18,49,42,.20); /* ---- Raster & Form ---- */ --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-24:6rem; --measure:66ch; /* Lesebreite Fließtext */ /* SEITENBREITE, am 31.07.2026 von 1120 auf 1280 gesetzt (Frank). Der Zuwachs von 160 px geht NICHT an die Bilder — die bleiben bei 576 px — sondern vollständig in die Lücke zwischen Text und Bild. Begründung steht bei --raster-spalt. Gegen schmale Schirme ist das abgesichert: .container rechnet min(100% − 2,5rem, hier), nimmt also nie mehr Platz als vorhanden und lässt immer 20 px Rand. */ --container:1280px; /* max. Seitenbreite */ /* LUFT IN DER MITTE — die Lücke zwischen Textspalte und Bild. Franks Regel vom 31.07.2026: Das Auge denkt sich zwanghaft eine Mittellinie durch den Inhalt. Die linke Bildkante sollte von ihr denselben Abstand haben wie das Ende der längsten Textzeile — sonst fehlt die Symmetrie. Vorher war das grob verletzt: Der Text endete 80 bis 86 px links der Mitte, die Bildkante lag 16 px RECHTS davon, hatte die Mitte also bereits überschritten. Rund 100 px Unwucht. Die Regel hat eine eindeutige Lösung. Gemessen enden die längsten Zeilen praktisch bündig an der Spaltenkante (0 bis 6 px Rest), der Textabstand zur Mitte ist also die halbe Lücke. Damit die Bildkante denselben Abstand hat, muss die Lücke mittig liegen — und das tut sie nur bei GLEICH BREITEN Spalten. Deshalb 1fr 1fr statt der früheren 5fr 6fr. Die Symmetrie steckt seitdem in der Struktur und kann nicht mehr verrutschen, egal wie breit der Schirm ist. Wer hier je auf ungleiche Spalten zurückgeht, bricht sie wieder. Die Lücke wächst mit dem Schirm, statt fest zu stehen: Am Umbruchpunkt (896 px) blieben von 128 px festem Spalt nur schmale Spalten übrig. Bei voller Breite sind es 128 px, also 64 px Luft je Seite der Mittellinie. */ --raster-spalt:clamp(4rem, 10vw, 128px); --tap-target:44px; /* Mindest-Touchfläche */ --eyebrow-tracking:.16em; --shadow-card:0 1px 2px rgba(18,49,42,.05), 0 10px 28px rgba(18,49,42,.07); }