emmas-schatzkiste/DESIGN.md

Emma's Schatzkiste — Design-System

Live-Dateien: index.html, hilfe-verein.html, shop.html, assets/site.css. Stand 2026-09-21. Offene Punkte: README.md.

Benannte Referenz

Workspace-Regel: kein UI-Code ohne benannte Referenz. Diese Seiten stehen auf einer:

emmas-schatzkiste-ds.md — das mitgelieferte, gebundene Handoff-Design-System. Neue Familie Warm Local Retail / Handmade Consumer; vorher hatte die Bibliothek für ein Projekt dieser Art keinen Eintrag.

Übernommen: die handgelegte Headline (jede Zeile eigenes Grid-Item mit eigener Rotation), die Zwei-Farbwelten-Trennung Shop = blau / Verein = gelb, die eigene Kante der Vereinsseite (gelbe 6px-Unterkante, rotierte Pille statt Eyebrow-Text, zwei Buttons statt einem, freies Logo unten rechts), durchgehende Pill-Rundung, blaustichige Schatten, 4px-Raster, Motion ausschließlich als Zustandsfeedback, Sprache und Tonalität.

Nicht übernommen: Dreifach-Akzent, neunstufige Typo-Skala, die durchgefallenen Textkontraste, die fixen Pixel-Stopps im Hero-Scrim, mix-blend-mode auf den Logos, Pexels-Hotlinks. Begründung je unten.

Produktwahrheit

Baby- und Kinder-Second-Hand-Laden in 84056 Rottenburg a.d. Laaber, seit September in neuer Hand. Dazu der Hilfe Verein („Hilfe. Herz. Hoffnung."), noch nicht eingetragen — deshalb keine Spendenstufen, kein Zahlungsformular, kein Mitgliedschafts-Flow. Drei Hilfearten, genau wie vom Kunden benannt: Geldspenden, ehrenamtliche Helfer, Weitersagen. Kontakt nur über tel: und mailto:. Opa Martin ist der Inhaber; Bild und Name, kein Bildtext — Kundenvorgabe. Foto seit 2026-09-24 in assets/opa-martin.jpg, 4:5 zugeschnitten, gleich behandelt wie das Story-Bild (gekippt, weiß gerahmt). Der Online-Shop ist bewusst geparkt. Tonalität: Du-Form, Satzkleinschreibung, keine Emoji.

Drei Abweichungen vom Handoff

Alle drei freigegeben. Der Handoff erklärt Farben und Typo für final; diese drei Punkte kollidieren mit den Guardrails, zwei davon sind zusätzlich messbare Fehler.

1. Farbe — Guardrail bewusst gelockert

Guardrail: „Ein einziger Akzent-Ton pro Seite." Die erste Fassung hielt ihn streng ein und wurde vom Auftraggeber am 2026-09-21 als zu blass zurückgewiesen. Der Guardrail ist damit bewusst gelockert — dasselbe Vorgehen wie bei Hypno Active, wo die drei Logofarben ebenfalls gegen den Guardrail stehen und im CSS-Kopf dokumentiert sind.

Damit die Hierarchie trotzdem trägt, gilt eine harte Ersatzregel:

Farbe lebt in Flächen und in Display-Typo — nie im Fließtext.

Alle drei Buntfamilien laufen wieder, aber ausschließlich als Sektionsflächen, Kachelfüllungen, Icon-Chips und H1-Zeilen. Jeder Fließtext bleibt --ink-500 oder --ink-700. So konkurrieren die Farben nie auf derselben Leseebene.

Die Seitenidentität bleibt: --accent* ist weiter pro Seite gesetzt und regiert Icons, Rahmen, Kontaktkarten, Footer-Kante und den aktiven Nav-Zustand.

Seite	--accent	--accent-text	--accent-soft	--accent-line
Startseite, Shop (.page-shop)	--sky-500	--sky-600	--sky-50	--sky-400
Hilfe Verein (.page-verein)	--sun-600	--sun-700	--sun-100	--sun-400

H1 wieder dreifarbig, Reihenfolge pro Seite gespiegelt: Startseite Sky → Sun → Coral, Verein Sun → Coral → Sky. Zulässig, weil Display-Typo ab 24px die Large-Text-Schwelle 3.0 nutzt und alle drei Werte darüber liegen (auf Weiß 3.86 / 3.92 / 4.00, auf Creme 3.52 / 3.57 / 3.65). Im Fließtext wäre keiner davon erlaubt.

Ein gesättigtes Vollflächen-Band pro Seite. Pastelltöne allein trugen die Seite nicht, sie verschwinden gegen Weiß. Startseite: „Für Familien" auf --sky-500 mit weißer Überschrift und weißen Kacheln. Verein: „Wir brauchen Hilfe" auf --sun-400 mit --ink-700. Weiß auf --sky-500 misst 3.86 und reicht nur für Überschriften ab 24px — deshalb steht auf dem blauen Band kein Fließtext, der sitzt in den weißen Kacheln. --ink-700 auf --sun-400 misst 8.67 und ist überall zulässig.

Der Seitenrhythmus ist damit: Foto-Hero → Weiß → Creme → gesättigtes Band → Weiß → Creme-Band → Footer.

Coral bleibt unverändert ausschließlich Handlungsfarbe der primären Buttons.

Eine bewusste Ausnahme: das Band „Wo alles angefangen hat" auf der Vereinsseite steht im Blau der Shop-Welt. Es verweist auf den Laden; die Tönung markiert den Themenwechsel.

1b. Kräftigere Tönungen (2026-09-24)

Zweite Rückmeldung des Auftraggebers: die Farben wirken „zu transparent". Gemessen lag das an drei Stellen: den 50/100-Pastellen (--sky-50, --sun-100, --coral-50) mit Leuchtdichte nahe Weiß, dem halbtransparenten Weißschleier im Hero, der bis 820px über dem Foto lag, und dem durchscheinenden Header (rgba(255,255,255,.92)).

Begründung aus derselben Referenz: emmas-schatzkiste-ds.md hält bereits fest, dass Pastell allein in dieser Familie nicht trägt. Das wird jetzt eine Stufe weiter gezogen, ohne neue Farbfamilie:

Rolle	vorher	jetzt
Creme-Flächen, Footer, Verein-Hero	--sun-100 #FDF4DC	--sun-200 #FBE3A0 (neu)
Blaue Flächen, Shop-Hero	--sky-50 / Weiß	--sky-100 #CFE6F8
Rosa Kachel	--coral-50	--coral-100 #FFD8CE (neu)
Icon-Chips	Pastell mit farbigem Icon	Vollton --accent, weißes Icon (3.86 / 3.92)
Hero-Verlauf	Weiß bis 430px, Schleier bis 820px	Fläche bis zur Textspalte, 90px Kante
Header	92 % Weiß mit Blur	deckend Weiß

Die Kacheln im gelben Band der Vereinsseite tragen jetzt ihre Tönung (rosa, blau, gelb) statt einheitlich Weiß.

Kontrast neu gerechnet. Auf den kräftigeren Gründen fallen die hellen Buntwerte auf ~3.0–3.1. Deshalb stehen H1-Zeilen, Band-Überschriften und der Name unter dem Porträt dort in der dunkleren Stufe derselben Familie: auf --sun-200 --sky-600 4.43 · --sun-700 4.11 · --coral-600 3.93; auf --sky-100 4.35 · 4.04 · 3.87. Fließtext auf getöntem Grund ist --ink-700 (≥ 11.0).

Gelb als Schrift (2026-09-24, dritte Rückmeldung: „geht mehr auf Braun als Gelb"). Ein Gelb, das auf hellem Grund 3:1 erreicht, liegt bei Leuchtdichte ≤ 0.3 — und das ist bei diesem Farbton zwangsläufig Ocker/Braun (--sun-600, --sun-700). Heller geht nur, wenn nicht die Füllung den Kontrast trägt. Lösung aus dem Logo übernommen: helles Markengelb --sun-400 mit dunkler Kontur (-webkit-text-stroke in --ink-700, paint-order: stroke fill), wie die umrandeten Buchstaben der Wortmarke. Gilt nur für Displaygrößen (H1-Zeile, Band-Überschrift Verein). Kleinere gelbe Texte gibt es nicht mehr: Lied vom Hilfe Verein steht in Ink, Links auf der Vereinsseite in Ink mit 3px gelber Unterstreichung. Icon-Chips auf der Vereinsseite: --sun-400 mit Ink-Icon (8.67).

2. Kontrast

Guardrail: „Graue Schrift auf farbigem Grund." Gemessen statt geschätzt:

Paar	Verhältnis
--ink-300 #8B94A0 auf --sun-100 #FDF4DC	2.80	durchgefallen — das war die §19-Zeile
weiß auf --coral-400 #F4715A	2.85	durchgefallen
weiß auf --sky-400 #4A9FE0	2.87	durchgefallen — Header-Farbe des Handoffs
--ink-500 #4A5560 auf --sun-100	6.94	bestanden

Der Fließtext auf Creme bestand also; dort war der Guardrail stilistisch. Die §19-Zeile und die beiden weiß-auf-bunt-Fälle waren echte Fehler.

Geändert: Text auf farbigem Grund steht in --ink-700 (13.20 auf Creme). Der Header ist weiß mit --ink-700-Navigation statt --sky-400 mit Weiß. Für den Primärbutton kamen drei Stufen dazu, die bei jedem Zustand nachdunkeln und nie heller werden:

Zustand	Füllung	Weiß darauf
Ruhe	--coral-600 #C8402B	4.97
Hover	--coral-700 #B03422	6.25
Press	--coral-800 #A82F1E	6.80

Dazu --sun-700 #8F6510 für gelben Text in Body-Größe (4.74 auf Creme); --sun-600 bleibt für Displaygrößen. --coral-400 und --sky-400 bleiben als Flächen im System, nicht mehr als Grund für weißen Text.

Alle drei Seiten sind gegen WCAG AA geprüft, inklusive der Large-Text-Schwellen (≥24px, oder ≥18.66px ab Weight 700). Keine Verstöße. Eine Stelle fiel dabei auf, die im Handoff nicht sichtbar war: Lied vom Laden stand in --accent bei 20px/600 — 3.86 bei verlangten 4.5, weil 20px/600 die Large-Text-Ausnahme nicht erreicht. Steht jetzt in --accent-text.

3. Typo-Skala

Guardrail: „Typo-Extreme (groß oder klein, kein Mittelmaß)." Neun gleichmäßige Stufen (56 · 42 · 32 · 24 · 19 · 17 · 15 · 13 · 11) sind genau das Mittelmaß — 24/19/17/15 liegen so dicht, dass der Unterschied nicht mehr liest.

Auf sechs reduziert, gestrichen sind 42, 24, 19 und 15:

Token	Wert	Face
--t-display	clamp(34px, 7.2vw, 60px) / 1.02	Fredoka 700
--t-h2	clamp(24px, 3.1vw, 30px) / 1.12	Fredoka 600
--t-h3	20px / 1.3	Fredoka 600
--t-body	17px / 1.65	Nunito 400
--t-small	13px / 1.5	Nunito 400
--t-label	11px / 1.4, +0.08em, versal	Nunito 700

Display-Tracking -0.01em. Fredoka und Nunito sind laut Handoff Platzhalter für einen nicht gelieferten Markenfont — ersetzen, sobald echte Binaries da sind. Kein Inter, kein System-Font.

Weitere Korrekturen

Hero unter 820px. Der Handoff markiert die fixen Gradient-Stopps (430/560/820px) selbst als Schwachstelle: unter ~820px deckt der Scrim das Foto fast vollständig zu. Ab 820px bleibt der Scrim wie spezifiziert; darunter stapelt der Hero — Foto oben, Text darunter auf voller Fläche, Scrim aus.

Mobile Header. Wortmarke plus vier Nav-Items passen unter 640px nicht nebeneinander; die Nav brach aus den 64px heraus und legte sich über den Hero. Unter 640px ist die Wortmarke auf das Zeichen reduziert, die Nav enger und notfalls horizontal scrollbar statt umbrechend.

Logos freigestellt. Die Client-JPEGs haben einen eingebackenen weißen Kasten, im Handoff per mix-blend-mode: multiply kaschiert — das bricht auf jedem dunkleren Grund und ließ auf der Vereinsseite sichtbar Weiß stehen. Beide sind jetzt echt freigestellt (Flood-Fill über randverbundenes Nahe-Weiß plus weiche Kante, 800px, 96-Farben-Palette) und liegen als assets/logo-*.png, zusammen 135 KB statt 326 KB. Blend-Mode ist raus.

Fokusring. --ring-focus stand im Base-Block vor den Button-Regeln. Bei gleicher Spezifität gewinnt die spätere Regel, also überschrieb .btn--primary ihre eigene box-shadow über den Ring: auf Buttons war für Tastaturnutzer gar kein Fokus sichtbar. Der Fokus-Block steht jetzt am Dateiende, und .btn:focus-visible setzt Ring und eigenen Schatten. Geprüft mit echter Tab-Navigation.

Keine Hotlinks. Die beiden Pexels-Fotos waren auf ein fremdes CDN verlinkt. Statt sie zu übernehmen liegen beschriftete Platzhalter in assets/, die unübersehbar als solche lesen. Ersetzen, siehe README.

Bilder

Alle Fotos von Pexels, Lizenz am 2026-09-21 geprüft: kommerzielle Nutzung frei, keine Namensnennung nötig, Selbsthosting erlaubt. Sie sind heruntergeladen und selbst gehostet, nicht vom fremden CDN verlinkt wie im Handoff.

Datei	Pexels-ID	Motiv
assets/hero-start.jpg	10831693	bunte Holzfahrzeuge auf Holz
assets/hero-verein.jpg	34148341	Kindersachen auf der Kleiderstange
assets/laden-story.jpg	6591155	Hände legen ein Oberteil zusammen

Bewusst keine Kinderfotos. Pexels gibt für erkennbare Personen kein Model Release; für eine deutsche Gewerbeseite wäre das ein unnötiges Risiko. Deshalb Sachmotive und, beim Story-Bild, Hände ohne Gesicht. Aus demselben Grund aussortiert: Motive mit klar erkennbaren Personen und englischen Aufdrucken („VOLUNTEER", „DONATE") sowie die generischen Hände-im-Kreis-Klischees.

Beim Verein-Hero war im ersten Zuschnitt ein fremdes Kleidungs-Etikett sichtbar — weg geschnitten, weil die Pexels-Lizenz Darstellungen untersagt, die eine Markenempfehlung nahelegen.

Zuschnitte sind rechtsbetont: die Textspalte sitzt links unter dem Scrim, das Motiv muss im rechten Drittel liegen. Alle 2000×1100, progressives JPEG, Qualität 76.

Das Vereinslogo im Hero liegt auf einer weißen Karte — auf dem gemusterten Stoff war die feine Schrift darin sonst nicht lesbar.

Motion

Nur Zustandsfeedback, wie im Handoff: 120ms Farbe, 200ms Lift, 340ms alles Größere, --ease: cubic-bezier(.2,.6,.3,1). Hover hebt 3px und vertieft den Schatten, Press scale(.97) mit --shadow-xs. Kein Load-Fade, kein Parallax, keine Loop-Animation, kein Bounce-Easing. prefers-reduced-motion: reduce schaltet Transitions ab und stellt Headline, Pille und Logo aufrecht.

Recht und Datenschutz

Kein Anwaltsersatz — aber die technische Seite ist so gebaut, dass möglichst wenig zu regeln bleibt.

Die Seite macht null Anfragen an Dritte. Gemessen im Browser: keine Cookies, kein Local oder Session Storage, keine Skripte, keine Iframes, keine Fremd-Origins. Damit ist § 25 TDDDG nicht berührt und ein Einwilligungsbanner ist nicht erforderlich — es gibt nichts, wozu man einwilligen könnte. Das ist die bessere Lösung als ein aufgesetztes Banner: kein Klickhindernis, keine Consent-Logik, nichts, was falsch konfiguriert sein kann.

Schriften selbst gehostet. Vorher kamen Fredoka und Nunito von fonts.googleapis.com / fonts.gstatic.com. Das überträgt die IP jedes Besuchers an Google; das LG München I hat darin am 20.01.2022 (3 O 17493/20) eine Verletzung des Persönlichkeitsrechts gesehen. Beide liegen jetzt als woff2 in assets/fonts/, eingebunden über assets/fonts.css. Es sind Variable Fonts — alle Schnitte einer Familie in einer Datei, deshalb je eine @font-face-Deklaration mit Gewichtsbereich statt sechs. Nur die Subsets latin und latin-ext, zusammen 106 KB. Lizenz SIL OFL 1.1, Lizenztexte liegen daneben.

Was bewusst fehlt: die OS-Plattform. Sie wurde zum 20.07.2025 abgeschaltet (VO (EU) 2024/3228), die Hinweispflicht ist entfallen, und ein stehengebliebener Link darauf ist inzwischen selbst abmahnfähig. Beim Übernehmen alter Rechtstexte ist das der erste Punkt, den man rauswerfen muss.

Zwei neue Seiten: impressum.html (§ 5 DDG — nicht mehr § 5 TMG, das ist seit Mai 2024 abgelöst) und datenschutz.html. Beide nutzen die .prose-Klassen. Offene Angaben stehen als .todo-Felder mit gestricheltem Coral-Rahmen im Fließtext, damit nichts davon versehentlich live geht, plus ein .prose__warn-Kasten oben auf jeder Seite.

Mobil und Touch

Überarbeitung 2026-09-24 (Kundenrückmeldung: Einstieg schwach, Header klobig, zu lang, Headline zu klein). Referenz unverändert das Handoff-DS, geändert sind nur Verhältnisse:

• Header wieder einzeilig und sticky: Zeichen links (Name bleibt für Screenreader im Link), vier Punkte rechts, aktiv als 3px-Akzentkante statt Pille. Ziele weiter ≥ 44px, passt bis 320px.
• Hero stapelt Text zuerst, Foto danach als gekipptes, gerahmtes Bild wie .story__img. Die Headline beginnt bei 212px statt ~560px.
• Headline so groß, wie das längste Wort in die Spalte passt: min(48px, Spalte / 7.4), Verein / 8.1 wegen „zusammenhalten!". 45px statt 34px bei 375. Kontur .075em.
• Rhythmus gestrafft: Abstände 64 → 40px, Porträt max. 260px, Story-Bild 3:2. Startseite bei 375px 4936 → 4260px hoch.

Die Angaben unten zum zweizeiligen, nicht-stickigen Header sind damit überholt.

Geprüft bei 320 · 375 · 390 · 640 · 768 · 1024 · 1440 · 1920 px, auf allen fünf Seiten, jeweils auf horizontalen Overflow, Zielgrößen, Schriftgrößen und Randabstände. Alles sauber. Gefunden und behoben wurde dabei:

Der Header war auf dem Handy kaputt. Nav-Links 28px hoch, Wortmarken-Link 32px breit, und unter 400px scrollte die Navigation seitlich weg, ohne dass es jemand sieht. Jetzt unter 640px zwei Zeilen: Wortmarke mittig, darunter die vier Punkte als Viererraster über die volle Breite, jedes Ziel 44px. „Hilfe Verein" bricht bei 320px sauber um. Der Header ist auf dem Handy dafür nicht mehr sticky — zwei Zeilen würden dauerhaft ein Sechstel des Displays wegnehmen, und bei fünf Unterseiten ist eine mitlaufende Navigation kein Verlust.

Zielgrößen nach WCAG. Zwei Schwellen, bewusst getrennt:

Element	vorher	jetzt	Maßstab
Nav-Links, Wortmarke	28–34px	44px	2.5.5 (AAA)
Telefon/E-Mail in Kontaktkarten	23px	44px	wichtigste Links der Seite
Telefon/E-Mail im Impressum	23px	44px	stehen allein, nicht im Satz
Footer-Links	21px	30px Desktop, 44px Handy	2.5.8 (AA) verlangt 24px

Links mitten im Fließtext (etwa der Pexels-Verweis) bleiben unverändert — für die gilt die Inline-Ausnahme von WCAG 2.5.8.

Schriftgrößen. Die 11px-Versallabels gehen auf dem Handy auf 12px hoch. Auf dem Desktop bleiben sie bei 11px, so wie das Handoff-DS es vorgibt.

Versionierte Stylesheets. Die CSS-Links tragen einen Hash des Dateiinhalts (site.css?v=…). Ändert sich das CSS, ändert sich die URL, und Besucher mit altem Browser-Cache bekommen zwingend die neue Datei. deploy.sh setzt den Hash bei jedem Deploy automatisch neu. Das war keine Theorie: beim Testen hat der Panel-Cache mehrfach veraltetes CSS ausgeliefert und Korrekturen als „nicht gewirkt" erscheinen lassen.

Technik

Statische Seiten ohne Build, wie die übrigen Websites/* im Workspace. Eine Abweichung vom Hausmuster: das CSS liegt als assets/site.css statt inline, weil es drei Seiten trägt. Icons sind als Lucide-Pfade inline gesetzt — kein CDN-UMD-Build, keine Netzabhängigkeit. Fonts über Google Fonts mit preconnect.

Lokal ansehen:

cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173