/* ========================================================================== Ela's 3D Studio — Design Tokens Version 5.0 · 31.07.2026 · „Blütenkabinett" Verbindliche Grundlage: claude/elas3dstudio.de/AUFTRAG.md (31.07.2026, Vorrang) claude/elas3dstudio.de/LIESMICH.md .claude/skills/elas3d-website/references/brand.md WAS SICH GEGENÜBER 4.0 GEÄNDERT HAT ----------------------------------- Der Auftraggeber hat am 31.07.2026 einen dunklen Auftritt gewählt. Bis 4.0 kannte das System nur helle Flächen; jetzt wechselt die Seite von Nacht zu Tag und zurück. Dazu kommt eine zweite Schrift — Cormorant Garamond kursiv für Zahlen, Preise, Zitate und einzelne Hero-Wörter. Beides weicht bewusst von brand.md ab und ist dort nachzuziehen (LIESMICH, Punkt 12). Die gedämpfte Blütenpalette bleibt. AUFTRAG Regel 4 stellt das ausdrücklich klar: „Das ist die gedämpfte Palette aus brand.md, nicht tokens.css 3.0." ALLE Werte hier sind gemessen, nicht geschätzt — und zwar gegen JEDE Fläche, auf der sie vorkommen können: zwei dunkle, zwei helle, vier Kategorieflächen. ========================================================================== */ /* --- Schrift --------------------------------------------------------------- Beide selbst gehostet, kein CDN. Manrope trägt alles Laufende, Cormorant kursiv nur Zahlen, Preise, Zitate und einzelne Hero-Wörter. Lizenz beider: SIL Open Font License 1.1 — siehe assets/fonts/OFL.txt */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Variabler Schnitt: 400 und 600 liegen in derselben Datei. Google liefert für beide Gewichte dasselbe woff2 aus — über Prüfsumme verifiziert. */ @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/cormorant-garamond-italic-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* ========================================================================= FLÄCHEN ========================================================================= */ /* --- Nacht -------------------------------------------------------------- Kein Schwarz. #15121A trägt einen violetten Stich aus der Pflaume, der Fuß liegt eine Stufe tiefer. */ --grund-dunkel: #15121A; /* Hero, dunkle Bänder, 404 */ --grund-fuss: #100E14; /* nur der Fuß */ /* Eine Stufe ÜBER der Nacht, nicht darunter wie der Fuß: aufgesetzte Flächen, die vor dem dunklen Band schweben — bisher nur das Überlaufmenü im Kopf. Werte aus der Menü-Übergabe vom 24.08.2026. */ --grund-dunkel-blatt: #1C1822; --rand-dunkel: #2E2838; /* --- Tag ---------------------------------------------------------------- */ --grund-hell: #FFFAF6; /* Seitengrund */ --grund-platte: #FBF2EA; /* ruhige Bandfläche, Karten */ --grund-weiss: #FFFFFF; /* Formularfelder, Zahlungsplättchen */ /* ========================================================================= SCHRIFTFARBEN — gemessen gegen ihre jeweilige Fläche ========================================================================= */ /* --- auf Nacht ---------------------------------------------------------- */ --text-dunkel: #F2E9E3; /* #15121A 15,5:1 · #100E14 16,0:1 */ --text-dunkel-weich: #9C8F8A; /* #15121A 5,9:1 · #100E14 6,1:1 */ /* HARTE UNTERGRENZE für gedämpften Text auf Nacht. Alles Hellere ist erlaubt, alles Dunklere nicht. #7F736E kommt nur auf 4,0:1 und wurde im Projekt deshalb bereits zweimal ersetzt (AUFTRAG, Falle 9). */ --text-dunkel-grenze: #8E827B; /* #15121A 5,0:1 · #100E14 5,1:1 */ /* --- auf Tag ------------------------------------------------------------- Zwei Stufen gedämpft: #5B5F69 für Fließtext, #6B6E78 nur für Meta auf dem Seitengrund — auf der Platte fällt es auf 4,6:1 und hat dann keine Reserve mehr. */ --text-hell: #242933; /* Seite 14,1:1 · Platte 13,2:1 */ --text-hell-weich: #5B5F69; /* Seite 6,2:1 · Platte 5,8:1 */ --text-hell-meta: #6B6E78; /* Seite 4,9:1 · Platte 4,6:1 */ /* ========================================================================= HANDLUNG ========================================================================= */ /* ABWEICHUNG VOM ENTWURF — gemeldet, nicht stillschweigend geändert. AUFTRAG und LIESMICH nennen #B05770. Der Wert trägt auf dem Seitengrund (4,56:1), fällt aber auf allen anderen hellen Flächen durch: Platte 4,27 · Vasen 4,03 · Teelichthalter 4,12 · Figuren 4,03 · Saisonales 4,10 AUFTRAG verlangt im selben Atemzug: „Kontraste geprüft sind: gegen #15121A, gegen #FBF2EA und gegen die vier hellen Kategorieflächen." Beides zusammen geht mit #B05770 nicht. #A45168 hält Farbton (343°) und Sättigung (51 %) und ist nur 4 % dunkler: Seite 5,12 · Platte 4,80 · Vasen 4,53 · Teelicht 4,63 · Figuren 4,53 · Saisonales 4,60 · Weiß darauf 5,31 Nebeneinander kaum zu unterscheiden. Entscheidung liegt beim Auftraggeber; bis dahin gilt der tragfähige Wert. */ --handlung: #A45168; --handlung-hover: #864054; --handlung-auf: #FFFFFF; /* Text auf --handlung, 5,3:1 */ --handlung-zart: #F7EDF0; /* Tint für aktive Zustände */ /* Der Entwurfswert, damit ein Vergleich ohne Suchen möglich ist. NICHT für Text verwenden, solange die Abweichung offen ist. */ --handlung-entwurf: #B05770; /* Auf Nacht trägt Handlung nicht — dort führt Gold. */ /* ========================================================================= GOLD — Linie, Kante, Funke. Nie Fläche, nie Fließtext. ========================================================================= */ --gold: #D39A39; /* #15121A 7,5:1 · #100E14 7,7:1 */ --gold-schrift-hell: #906727; /* falls Gold auf hellem Grund Text tragen muss: Seite 4,9:1 · Platte 4,6:1 */ /* ========================================================================= BLÜTENFARBEN — das Ordnungssystem Jede Kategorie hat ihre Farbe: Navigation, Kategorieband, Licht hinter der Kachel, Punkt im Fuß. Überall dieselbe Zuordnung. Die KLASSEN heißen nach der Farbe (.punkt-rose), nicht nach der Kategorie — sonst wandert das Stylesheet bei jeder Umbenennung mit. Es sind FLÄCHENFARBEN. Als Schrift trägt keine von ihnen. ========================================================================= */ --bluete-rose: #D47F91; /* Wohnen & Deko */ --bluete-pfirsich: #E69A67; /* Haus & Garten */ --bluete-pflaume: #896C91; /* Werkstatt & Werkzeug */ --bluete-petrol: #6F9EAB; /* Feste & Geschenke */ --bluete-gold: var(--gold);/* Nach Maß */ /* Salbei kam am 18.08.2026 mit der Rubrik „Zubehör" dazu. Sie ist die einzige Kategorie OHNE Blütenblatt (die Blüte hat fünf, und sie ist das Markenzeichen) — die Farbe trägt sie trotzdem: Navigation, Kategorieband, Punkt im Fuß und Kachellicht ordnen nach Farbe, nicht nach Blatt. */ --bluete-salbei: #8FA98A; /* Zubehör */ /* Textfarbe AUF einer Blütenfläche. Nicht raten — gemessen: Rosé Weiß 2,90 · Dunkel 6,39 → dunkel Pfirsich Weiß 2,29 · Dunkel 8,10 → dunkel Petrol Weiß 2,94 · Dunkel 6,31 → dunkel Gold Weiß 2,48 · Dunkel 7,46 → dunkel Pflaume Weiß 4,55 · Dunkel 4,07 → WEISS, als einzige Salbei Weiß 2,56 · Dunkel 7,24 → dunkel Die Pflaume ist die Ausnahme. Wer sie mit dunklem Text setzt, fällt unter AA — und wer die anderen mit weißem Text setzt, ebenfalls. */ --auf-bluete: var(--grund-dunkel); --auf-bluete-pflaume: #FFFFFF; /* ========================================================================= KATEGORIEFLÄCHEN — helle Fassung derselben Ordnung Zifferton jeweils gegen die eigene Fläche gemessen. ========================================================================= */ --kat-rose-flaeche: #F9E9ED; --kat-rose-ziffer: #8E4257; /* 5,8 */ --kat-pfirsich-flaeche: #FBEDE2; --kat-pfirsich-ziffer: #9A5A25; /* 4,7 */ --kat-pflaume-flaeche: #F1EBF3; --kat-pflaume-ziffer: #634B6B; /* 6,5 */ --kat-petrol-flaeche: #E9F0F2; --kat-petrol-ziffer: #3F6975; /* 5,2 */ /* Gold kam am 01.08.2026 dazu: Das fünfte Blatt trägt seither eine eigene Kategorie (Nach Maß) statt nur ein fünftes Stück. Fläche und Ziffer nach demselben Verfahren wie die vier darüber gemessen. */ --kat-gold-flaeche: #FAF0DE; --kat-gold-ziffer: #7A5613; /* 5,9 */ /* Salbei, 18.08.2026, nach demselben Verfahren gemessen. */ --kat-salbei-flaeche: #ECF1E8; --kat-salbei-ziffer: #4C6B45; /* 5,2 */ /* Überschrift auf jeder Kategoriefläche: --text-hell, 12,4–12,9:1. Der Entwurf gibt dem Fließtext je Fläche einen eigenen, leicht eingefärbten Ton statt eines gemeinsamen Grau. Gegen die eigene Fläche gemessen — alle sechs tragen mit Reserve. */ --kat-rose-text: #6A5A5E; /* auf #F9E9ED 5,5:1 */ --kat-pfirsich-text: #6D5C4E; /* auf #FBEDE2 5,6:1 */ --kat-pflaume-text: #5E5563; /* auf #F1EBF3 6,1:1 */ --kat-petrol-text: #4F5D62; /* auf #E9F0F2 5,9:1 */ --kat-gold-text: #665845; /* auf #FAF0DE 6,1:1 */ --kat-salbei-text: #565E52; /* auf #ECF1E8 5,9:1 */ /* ========================================================================= BRONZE — Augenbrauen, Weiterlinks, Ziffern in den Filterpillen ========================================================================= */ /* NUR auf --grund-hell (4,7:1). Auf --grund-platte fällt der Ton auf 4,41:1 und damit unter AA — dort gehört --gold-schrift-hell hin. Der Entwurf setzt Bronze auch nirgends auf die Platte. */ --bronze: #8E6A4A; /* ========================================================================= ZUSTAND — getrennt vom Markenakzent, nie dekorativ ========================================================================= */ --zustand-gut: #2C6A4C; /* Seite 6,2 · Platte 5,8 */ --zustand-achtung: #906727; /* Seite 4,9 · Platte 4,6 */ --zustand-fehler: #A32B2B; /* Seite 6,9 · Platte 6,5 */ /* ========================================================================= FORM — die Blattform ist die Klammer der ganzen Seite Produktkacheln, Menüzeilen, Blütenblätter. Nicht durch Rechtecke ersetzen (AUFTRAG Regel 6). Zwei Ecken sind rund, zwei laufen spitz zu — deshalb liegt auf dem Blatt nur das diagonale Eckband, keine rechteckige Marke (Falle 7). ========================================================================= */ --blatt: 100% 0 100% 0 / 100% 0 100% 0; --blatt-gespiegelt: 0 100% 0 100% / 0 100% 0 100%; --blatt-seitenverhaeltnis: 3 / 4; --radius-klein: 3px; --radius-pille: 999px; --radius-plaettchen: 4px; /* Zahlungslogos */ /* ========================================================================= SCHRIFT ========================================================================= */ --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --schrift-kursiv: "Cormorant Garamond", Georgia, serif; --gewicht-leicht: 300; --gewicht-normal: 400; --gewicht-halb: 600; /* Hero exakt aus dem Entwurf — nicht runden (AUFTRAG Regel 2). */ --t-hero: 64px; --t-hero-hoehe: 1.03; --t-hero-sperrung: -0.042em; --t-h1: 48px; --t-h2: 34px; --t-h3: 19px; --t-text: 16.5px; --t-klein: 14.5px; --t-mikro: 11px; /* Handy: Seitenüberschrift 29–32 statt 48, Fließtext 14,5–15. Darunter nicht (AUFTRAG, Abschnitt Handy). */ --t-h1-handy: 30px; --t-h2-handy: 19px; --t-text-handy: 15px; --zeile-eng: 1.25; --zeile-text: 1.8; --sperrung-mikro: 0.1em; --lesespalte: 64ch; /* ========================================================================= RAUM ========================================================================= */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 26px; --s-7: 30px; --s-8: 52px; --s-9: 96px; --seitenrand: 52px; --seitenrand-handy: 20px; --container: 1240px; --inhaltsspalte: 220px; /* klebende Seitenverzeichnisse */ --treffer: 44px; /* Trefferfläche, nirgends darunter */ /* ========================================================================= BEWEGUNG — sparsam und langsam, das ist Absicht. Nichts davon darf schneller werden (AUFTRAG Regel 9). ========================================================================= */ --d-faden: 22s; /* Filamentfaden zeichnet sich aus der Düse */ --d-lichter: 34s; /* Hintergrundlichter driften (28–40 s) */ --d-goldlinie: 18s; /* Linie zwischen Nacht und Tag wandert durch */ --d-verlauf: 24s; /* Verlauf im Hero-Wort */ --d-kachel-1: 11s; /* Blattkacheln atmen versetzt */ --d-kachel-2: 12s; --d-kachel-3: 13s; --d-kachel-4: 14s; --d-blende: 260ms; /* Nach-oben-Pille */ --d-schnell: 140ms; /* Hover, Fokus */ --uebergang: cubic-bezier(0.2, 0, 0.15, 1); /* Fokusring: kein Browserstandard (AUFTRAG Regel 13). EIGENER TON SEIT DEM 15.08.2026, VORHER var(--gold). Der Ring ist kein Schmuck, sondern ein Bedienelement-Umriss — WCAG 2.2 SC 1.4.11 verlangt dafür 3:1 gegen die Fläche, auf der er liegt. Gold #D39A39 hielt das nur auf dem Nachtgrund (7,46:1); auf hellem Grund kam es nicht über 2,40:1, und hell ist der größere Teil der Seite. Der Ring war da und trotzdem kaum zu sehen. #A8761F ist dasselbe Gold, nur tiefer. Gemessen gegen alle drei hellen Flächen, auf denen er vorkommt: Seitengrund #FFFAF6 3,84:1 ✓ Feldgrund #FFFDFB 3,92:1 ✓ Karte #FBF4EE 3,65:1 ✓ Nachtgrund #15121A 4,66:1 ✓ Ein einziger Ton für beide Welten, kein zweites Token für hell und dunkel — ein Fokusring, der je nach Abschnitt die Farbe wechselt, ist schwerer zu prüfen als er wert ist. --gold BLEIBT #D39A39. Es trägt Linien, Verläufe und die Filamentfunke; das ist Gestaltung und hat mit dieser Schwelle nichts zu tun. Wer beide Werte wieder zusammenlegt, holt sich den Verstoß zurück. */ --fokus-farbe: #A8761F; --fokus: 2px solid var(--fokus-farbe); --fokus-abstand: 3px; /* ========================================================================= FARBEN, DIE EINEN NAMEN BEKOMMEN HABEN — 18.08.2026 ========================================================================= Diese zehn Werte standen als Zahl im Stylesheet, zusammen 257 Mal, ohne dass sie hier gefuehrt waren. Nicht aus Nachlaessigkeit: Sie sind ueber die Zeit entstanden, und wo eine Farbe zum ersten Mal gebraucht wird, ist der Weg in die Zeile kuerzer als der in diese Datei. Was das kostete, zeigt --linie am deutlichsten: Es traegt JEDE Haarlinie der Seite. Eine Kontrastnachbesserung daran waeren 83 Einzelaenderungen gewesen, jede eine Gelegenheit, eine zu vergessen. Die Kontrastwerte hinter den Textfarben sind gemessen, gegen #15121A. Alle fuenf liegen komfortabel ueber der Schwelle. OFFEN UND BEWUSST NICHT HIER GEAENDERT: --feld-rand erreicht gegen --feld-grund nur 1,55:1. Der Feldgrund hebt sich vom Seitengrund kaum ab (1,02:1), das Feld ist also allein an diesem Rand zu erkennen — SC 1.4.11 verlangt dafuer 3:1. Das zu beheben aendert das Aussehen und gehoert entschieden, nicht nebenbei erledigt. ========================================================================= */ --linie: #EADFD7; /* 83x Raender und Linien auf hellen Flaechen */ --linie-zart: #F0E6DE; /* 12x Trenner zwischen Listenzeilen */ --feld-grund: #FFFDFB; /* 16x Grund der Eingabefelder */ --feld-rand: #DCCBBF; /* 19x Rand der Eingabefelder */ --gold-auf: #F5DEB2; /* 27x Schrift auf dem goldenen Knopf */ --gold-weich: #E7C9A0; /* 22x gedaempftes Gold als Schrift auf Nacht 11,7:1 */ /* GOLD ALS SCHRIFT AUF HELLEM GRUND. `--gold` (#D39A39) kommt auf Creme nur auf 2,3:1 — als Flaeche und als Rand richtig, als TEXT unlesbar. Diese Fassung traegt 5,1:1 auf Creme und 5,4:1 auf Weiss und erfuellt damit WCAG AA fuer Fliesstext. Angelegt am 27.08.2026 fuer die Personalisierungs-Hinweise auf der Produktseite; der Entwurf nannte denselben Wert, unabhaengig gerechnet. */ --gold-dunkel: #8A6318; /* - goldene Schrift auf hell 5,1:1 */ --text-dunkel-titel: #FBF4EE; /* 25x Hero-Ueberschriften auf Nacht 17,0:1 */ --text-dunkel-nav: #CFC2BC; /* 18x Navigation und Fuss auf Nacht 10,7:1 */ --text-dunkel-rubrik: #C9A98C; /* 21x Rubriktitel im Fuss 8,4:1 */ --text-dunkel-lead: #BEB0AA; /* 14x Hero-Fliesstext auf Nacht 8,8:1 */ /* ========================================================================= DIESELBEN FARBEN ALS ZAHLENTRIPEL — fuer alles Durchscheinende ========================================================================= CSS kann einem Farb-Token keine Deckkraft mitgeben: In `rgba(var(--gold), .5)` landet `#D39A39` statt `211,154,57`, und die Regel faellt aus. Ohne die Zeilen hier MUSS jeder transparente Ton seine Zahlen wiederholen — und genau das ist ueber die Zeit passiert. Gezaehlt am 18.08.2026 in blueten.css: --gold 81x als rgba() wiederholt --text-dunkel 52x --grund-dunkel 32x die vier Bluetentoene zusammen 28x 201 Stellen, an denen eine Farbaenderung haengen bleibt, weil sie den Namen der Farbe nicht kennt. Ab jetzt: `rgba(var(--gold-rgb), .55)`. WER EINEN WERT OBEN AENDERT, AENDERT IHN HIER MIT. Zwei Schreibweisen derselben Farbe sind der Preis dafuer, dass CSS es nicht anders kann. Laufen sie auseinander, hat dieselbe Farbe deckend und durchscheinend zwei verschiedene Toene — und das faellt zuerst niemandem auf. ========================================================================= */ --gold-rgb: 211, 154, 57; /* #D39A39 */ --text-dunkel-rgb: 242, 233, 227; /* #F2E9E3 */ --grund-dunkel-rgb: 21, 18, 26; /* #15121A */ --bluete-rose-rgb: 212, 127, 145; /* #D47F91 */ --bluete-pfirsich-rgb: 230, 154, 103; /* #E69A67 */ --bluete-pflaume-rgb: 137, 108, 145; /* #896C91 */ --bluete-petrol-rgb: 111, 158, 171; /* #6F9EAB */ --bluete-salbei-rgb: 143, 169, 138; /* #8FA98A */ --bronze-rgb: 142, 106, 74; /* #8E6A4A */ } /* Kein dunkles Systemthema: Die Seite bringt ihre eigene Nacht mit und wechselt sie abschnittsweise. Ein zweites, umgekehrtes Thema würde die Dramaturgie von Nacht zu Tag zerstören. `color-scheme: light` oben hält Formularfelder hell. */ @media (prefers-reduced-motion: reduce) { :root { --d-faden: 1ms; --d-lichter: 1ms; --d-goldlinie: 1ms; --d-verlauf: 1ms; --d-kachel-1: 1ms; --d-kachel-2: 1ms; --d-kachel-3: 1ms; --d-kachel-4: 1ms; --d-blende: 1ms; --d-schnell: 1ms; } }