/* ========================================================== tokens.css · GedankenRESET-LP · Nadine Isberner Kanon v3.1 · Runde p.003 · 07.09.2026 Zusammenfuehrung aus zwei Quellen: - Markenwerte aus Quellen/GedankenRESET-LP_v1.2_Designtokens.css (Farben an den Kampagnengrafiken gemessen, 06.09.2026) - Gestaltungsleitern aus dem Kit, unveraendert Diese Datei wird zuerst geladen. Im Komponenten-CSS stehen ausschliesslich var()-Verweise, keine Rohwerte (Kanon 5.1). DREI ABWEICHUNGEN von der Zulieferung v1.2, jede begruendet an ihrer Stelle und im Projektblatt unter P-06 bis P-08: 1. Abstandsleiter auf --sp-1..8 / --sec-* (Kanon 5.1, verbindlich seit v2.1). --abstand-xl:6rem entfaellt. 2. --textbreite von 34em auf 62ch (Kanon 5.19.1 + 5.19.5). 3. Kontrastmatrix korrigiert: Grau auf Creme ist 5,91:1, nicht 6,37:1. Nachgerechnet, siehe unten. ========================================================== */ :root{ /* --- Marke · gemessen an den Kampagnengrafiken ----------- Uebernommen aus v1.2, Werte unveraendert. */ --farbe-marine: #10284C; /* Primaerflaeche, Ueberschriften, Fliesstext */ --farbe-creme: #F4F0E9; /* Grundflaeche der Seite */ --farbe-gold: #B49066; /* Linien, Icons, Flaechenakzente */ --farbe-beige: #E4D8C6; /* Icon-Kreise, Kartenflaechen auf Creme */ --farbe-grau: #5C5C58; /* Logograu, Sekundaer- und Metatext */ --farbe-weiss: #FFFFFF; /* Karten auf Creme */ /* Abgeleitete Goldvarianten fuer Text. Das gemessene Gold erreicht auf Creme nur 2,60:1 und ist dort als Textfarbe unzulaessig. */ --farbe-gold-text: #856341; /* Text und Links auf Creme */ --farbe-gold-hell: #C9A87C; /* Text und Akzente auf Marine */ --farbe-gedaempft: #A48E72; /* leiser als Gold-hell, 4,68:1 auf Marine */ /* Agenturkennzeichnung, eyedee-Magenta (Kanon 6.6) */ --farbe-eyedee-herz: #D70E54; /* Marine als RGB-Tripel, damit Schatten damit rechnen koennen. Ein Farbsystem: Schatten nie gegen #000 - reines Schwarz erzeugt auf Creme einen Grauschleier, der als Schmutz gelesen und an der falschen Stelle gesucht wird. */ --marine-rgb: 16,40,76; --hairline: rgba(16,40,76,.14); /* --- Kontrastmatrix · nachgerechnet 07.09.2026 ----------- Gegen fuenf bekannte WCAG-Referenzwerte geprueft, bevor hier eine Zahl steht (#767676/Weiss=4,54 · #949494/Weiss=3,03 · #595959/Weiss=7,00 · Schwarz/Weiss=21,00 · Weiss/Weiss=1,00). TEXT AUF FLAECHE zulaessig fuer Marine auf Creme 12.93:1 Text frei Marine auf Weiss 14.69:1 Text frei Marine auf Beige 10.45:1 Text frei Creme auf Marine 12.93:1 Text frei Beige auf Marine 10.45:1 Text frei Grau auf Creme 5.91:1 Text frei Grau auf Weiss 6.72:1 Text frei Grau auf Beige 4.78:1 Text frei Gold-hell auf Marine 6.56:1 Text frei Gold-text auf Creme 4.79:1 Text frei Gold-text auf Weiss 5.44:1 Text frei Gold auf Marine 4.98:1 Text frei Gold auf Creme 2.60:1 NICHT fuer Text Gold auf Weiss 2.95:1 NICHT fuer Text Gold auf Beige 2.10:1 NICHT fuer Text SCHRIFT AUF BUTTONFLAECHE Marine auf Gold 4.98:1 Text frei Marine auf Gold-hell 6.56:1 Text frei AGENTURKENNZEICHNUNG Herz auf Creme 4.53:1 Text frei Herz auf Marine 2.85:1 NICHT fuer Text Herz auf Weiss 5.15:1 Text frei NICHT-TEXT (WCAG 1.4.11, mind. 3:1 - Icons mit Bedeutung, Bauteilgrenzen, Fokusringe. Rein dekorative Linien ausgenommen.) Gold auf Marine 4.98:1 ok Gold auf Creme 2.60:1 ZU SCHWACH Gold auf Weiss 2.95:1 ZU SCHWACH Gold auf Beige 2.10:1 ZU SCHWACH Gold-text auf Creme 4.79:1 ok Marine auf Creme 12.93:1 ok KORREKTUR gegenueber v1.2: Grau auf Creme ist 5,91:1, dort stand 6,37:1. Der behauptete Wert gehoert zu #575757, das Logograu ist #5C5C58. Folgenlos fuer die Zulaessigkeit - beide bestehen AA -, aber die Matrix wird laut Briefing einmal gefuellt und danach nicht mehr diskutiert. Dann muss sie stimmen. GRENZFALL: Gold als Bauteilgrenze oder bedeutungstragendes Icon erreicht auf Creme 2,60:1, auf Weiss 2,95:1, auf Beige 2,10:1 - alle unter den 3:1 aus WCAG 1.4.11. Rein dekorative Linien sind davon ausgenommen, Sekundaerbutton-Konturen, Formularrahmen, Fokusringe und Icons mit Bedeutung nicht. Dafuer gilt --farbe-gold-text (4,79:1 auf Creme). Siehe P-07. GRENZFALL: Das eyedee-Herz erreicht auf Marine 2,85:1. Auf einem Marine-Footer gehoert die helle Fassung oder Creme als Grund darunter. */ /* --- Schrift --------------------------------------------- Selbst hosten, kein Aufruf der Google-Server (Kanon 7.6 - sonst Consent-Pflicht vor Seitenaufbau). Zu laden: Montserrat 400/600, Playfair Display 500/600. Keine Schnitte ueber 700. Die Wortmarke GedankenRESET und der Claim in Schreibschrift werden als SVG eingebunden, nicht gesetzt - Claim mit Alt-Text, er ist inhaltstragend. */ --schrift-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --schrift-serif: "Playfair Display", Georgia, "Times New Roman", serif; /* --- Schriftgrade · v1.5 G-01 --------------------------- Ersetzt die Leiter aus v1.2. Groessere Grade tragen den Eindruck von Groesse, nicht zusaetzliche Gestaltungsmittel. ACHTUNG bei clamp: um das Plus MUESSEN Leerzeichen stehen. "1.05rem+0.4vw" ist ungueltig, die ganze Regel faellt dann aus - in dieser Runde einmal passiert, die Messung meldete 16px Grundschrift statt 22. */ --grad-hero: clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem); --grad-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem); --grad-h2: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); --grad-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem); --grad-statement: clamp(1.75rem, 1.25rem + 2.4vw, 3rem); --grad-text: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --grad-klein: 1rem; /* --- Zeilenhoehen ---------------------------------------- */ --zeile-eng: 1.12; /* Ueberschriften · v1.5 G-01 */ --zeile-weit: 1.7; /* Fliesstext - Montserrat braucht Luft */ /* --- Breiten · v1.8 A-01 -------------------------------- GENAU DREI zulaessige Inhaltsbreiten. Andere Werte sind nicht zulaessig, auch keine prozentualen Sonderfaelle in einzelnen Sektionen. Alle drei teilen denselben Seitenabstand; kein Block bekommt eigene Aussenabstaende. Zu --breite-lesen: 34em misst gemessen 59,6 Zeichen, nicht die "rund 68", die v1.5 in der Prosa nannte. Ich hatte den Wert in p.012 deshalb auf 58ch (67,3 Zeichen) gesetzt und das gemeldet. v1.5 nannte 34em, v1.8 nennt es erneut - das ist eine Entscheidung, kein Versehen. Gebaut ist die Zahl. Die Folge steht in der Rueckmeldung. */ --breite-voll: 1320px; /* Innencontainer, Raster, Stufenfolgen */ --breite-mittel: 56rem; /* Ueberschriften, Statements, Listen */ --breite-lesen: 34em; /* zusammenhaengender Fliesstext */ /* --- Sectionrhythmus · v1.5 G-02 ------------------------- ABWEICHUNG von Kanon 5.1: dort drei feste Stufen (--sec-s/m/l). v1.5 gibt EINEN Wert vor, deutlich groesser als die Kitstufen (160px statt 81px bei 1440x900) - das ist der Weissraum, aus dem der Eindruck von Groesse entsteht. Die Kitstufen bleiben fuer die Ausnahmen definiert: S-06 braucht mehr, die Schlusskarte rechnet in vh. */ --sektion-y: clamp(5rem, 3rem + 8vw, 10rem); /* --- Abstaende · Kanon 5.1, verbindlich seit v2.1 -------- ABWEICHUNG von v1.2: dort --abstand-xs/s/m/l/xl, hier die Achterleiter des Kanons. Vier der fuenf gelieferten Werte SIND Leiterstufen und nur anders benannt: xs 0.5rem = --sp-2 · s 1rem = --sp-4 m 2rem = --sp-6 · l 4rem = --sp-8 Der fuenfte, xl 6rem, liegt auf keiner Stufe. 5.1 sagt dazu: Zwischenwerte werden nicht erfunden - passt keiner der acht Schritte, ist die Frage nicht der Wert, sondern die Struktur. Ein Abstand dieser Groesse ist Section-Rhythmus, dafuer gibt es --sec-*. Deshalb faellt 6rem weg. */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; /* Section-Rhythmus, fluid. Symmetrisch oben und unten, damit Sections frei sortierbar bleiben (5.1). v1.2 hatte --sektion-y:clamp(3.5rem,2rem + 6vw,7rem); der Deckelwert 7rem ist derselbe wie in --sec-m. */ --sec-s:clamp(3rem,6vh,4.5rem); --sec-m:clamp(4.5rem,9vh,7rem); --sec-l:clamp(7rem,12vh,9rem); /* --- Formen ---------------------------------------------- Aus v1.2 uebernommen. Bewusst in Pixeln: ein Radius soll bei 200 % Schriftvergroesserung NICHT mitwachsen, sonst wird aus einer Kante eine Blase. */ --radius-klein: 6px; --radius-karte: 14px; --radius-pille: 999px; /* Buttons, Hinweiskasten aus der Kampagnengrafik */ --linie-gold: 1px solid var(--farbe-gold); /* --- Schatten · gegen --marine-rgb, nie gegen #000 -------- */ --sh-1:0 1px 2px rgba(var(--marine-rgb),.08); --sh-2:0 12px 30px -14px rgba(var(--marine-rgb),.25); --sh-3:0 40px 90px -40px rgba(var(--marine-rgb),.45); /* --- Dauern · Kanon 13.6 --------------------------------- */ --dur-1:.15s; /* Zustandswechsel: hover, focus */ --dur-2:.3s; /* Ein- und Ausblenden */ --dur-3:.55s; /* orchestrierter Moment */ /* --- Versionsmarke · Kanon 10.12a ------------------------ Damit im Browser feststellbar ist, WELCHER Stand laeuft. Fundstelle der Regel: drei Pakete gleichen Namens. Wird je Runde fortgeschrieben und ist ueber getComputedStyle(document.documentElement) .getPropertyValue('--eyedee-stand') auch am Live-Server auslesbar. */ --eyedee-stand:"GRLP p.038 · 20.09.2026 · Kanon v3.1"; /* --- Zielgroesse Touch · Kanon 5.3 ----------------------- 52 px, nicht 44. Der Kanon fuehrt ausdruecklich den Fall, dass min-height:44px im Stylesheet stand, an Inline-Elementen aber wirkungslos blieb: die Regel sah erfuellt aus und war es nicht. Deshalb gilt sie nur an Elementen, die eine Hoehe annehmen koennen - block, flex, inline-flex, grid. */ --ziel-touch:52px; /* --- Haarlinien ------------------------------------------ 1px gehoert NICHT auf die Abstandsleiter - Haarlinie und optischer Ausgleich, keine Rhythmusstufe. */ --hair:1px; /* --- Kopfhoehe, zur Laufzeit per JS gesetzt -------------- Jede Verwendung traegt einen Rueckfallwert, damit ohne JavaScript nichts bricht: var(--headerh,64px). */ --headerh:64px; } /* Verwendungsregeln aus v1.2, unveraendert ------------------------------------------------------------ Flaechen Hero und Zwischenbaender auf Marine, Grundflaeche Creme, Karten Weiss oder Beige. Gold ausschliesslich als Linie, Icon, Rahmen oder grosse Auszeichnung, nie als Textfarbe auf Creme. Schrift Playfair Display fuer H1 bis H3 sowie den Preis. Montserrat fuer alles Uebrige, Fliesstext in 400, Buttons und Labels in 600. Buttons Primaer: Flaeche Gold, Schrift Marine, Radius Pille. Auf Marineflaechen: Flaeche Gold-hell, Schrift Marine. Sekundaer: transparent mit Goldkontur, Schrift Marine. -> Fuer die Kontur gilt --farbe-gold-text statt --farbe-gold, solange sie auf Creme, Weiss oder Beige sitzt (P-07). */ /* Umbruchpunkte · Kanon 5.0 - Wirkungsschwellen, nicht Messpunkte: <=1000px Layoutmassnahmen (Klemmung, Spaltenumbau, 5.9) <=760px Renderkostenklassen, Touch (13.2) Ein dritter Umbruchpunkt braucht einen Eintrag im Projektblatt mit Begruendung. Custom Properties funktionieren in Media-Query-Praeambeln nicht - deshalb stehen die beiden Zahlen dort als Literal. Das ist die einzige zulaessige Ausnahme. */ @media (prefers-reduced-motion:reduce){ :root{ --dur-1:0s; --dur-2:0s; --dur-3:0s; } }