commit 92a6faaf54d5ac25646cfbd5221c8fa8a47e8884 Author: Andrej Stevanovski Date: Tue Sep 22 20:05:34 2026 +0200 Emma's Schatzkiste — statische Website, fünf Seiten Umsetzung des Design-Handoffs als statisches HTML ohne Build-Schritt, nach dem Hausmuster der übrigen ASX-Websites. Seiten - index.html Startseite (blaue Welt) - hilfe-verein.html Hilfe Verein (gelbe Welt) - shop.html Platzhalter, Online-Shop bewusst nicht gebaut - impressum.html § 5 DDG - datenschutz.html Art. 13 DSGVO Design - Farbe lebt in Flächen und Display-Typo, nie im Fließtext — dadurch laufen alle drei Markenfarben, ohne die Hierarchie zu brechen. - Ein gesättigtes Vollflächen-Band pro Seite gegen die Blässe der reinen Pastellfassung. - Alle fünf Seiten bestehen WCAG AA im Kontrast. Mobil - Header unter 640px zweizeilig, Navigation als Viererraster, alle Touch-Ziele >= 44px (WCAG 2.5.5), Footer-Links >= 24px (2.5.8). - Geprüft bei 320/375/390/640/768/1024/1440/1920 px. Datenschutz - Keine Cookies, kein Storage, keine Skripte, null Fremdanfragen. Deshalb bewusst kein Einwilligungsbanner. - Fredoka und Nunito selbst gehostet statt über Google Fonts (LG München I, 3 O 17493/20). Bilder - Drei Pexels-Fotos, Lizenz geprüft, heruntergeladen und selbst gehostet. - Bewusst keine Kinderfotos: Pexels gibt kein Model Release. Offen: drei Angaben in den Rechtstexten, Foto Opa Martin, zwei Audiodateien. Co-Authored-By: Claude Opus 5 diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 0000000..f0bdc8c --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "emmas-schatzkiste", + "runtimeExecutable": "python3", + "runtimeArgs": ["-m", "http.server", "4173"], + "port": 4173 + } + ] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2d2f7aa --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +# macOS +.DS_Store +._* + +# Editor +.vscode/ +.idea/ + +# Lokale Werkzeuge, nichts davon gehoert ins Repo +*.log +node_modules/ diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..3939bd6 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,278 @@ +# 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`](README.md). + +## Benannte Referenz + +Workspace-Regel: *kein UI-Code ohne benannte Referenz*. Diese Seiten stehen auf einer: + +**[`emmas-schatzkiste-ds.md`](../design-references/entries/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. +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](../design-references/GUARDRAILS.md), 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. + +### 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](https://www.pexels.com/license/) 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 + +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: + +```bash +cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173 +``` diff --git a/README.md b/README.md new file mode 100644 index 0000000..5ccaa9c --- /dev/null +++ b/README.md @@ -0,0 +1,97 @@ +# Emma's Schatzkiste — Website + +Drei statische Seiten für den Baby- und Kinder-Second-Hand-Laden in Rottenburg a.d. Laaber +und den zugehörigen Hilfe Verein. + +| Datei | Seite | +|---|---| +| `index.html` | Startseite | +| `hilfe-verein.html` | Hilfe Verein (`#helfen`, `#kontakt`) | +| `shop.html` | Online-Shop, bewusst geparkt („Im Aufbau") | +| `assets/site.css` | gemeinsames Stylesheet, Tokens und Komponenten | +| `design_handoff_emmas_schatzkiste/` | Original-Handoff, unverändert | + +Design-Entscheidungen und Abweichungen: [`DESIGN.md`](DESIGN.md). +Benannte Referenz: [`emmas-schatzkiste-ds.md`](../design-references/entries/emmas-schatzkiste-ds.md). + +Kein Build. Lokal ansehen: + +```bash +cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173 +``` + +## Was noch fehlt + +### Vor dem Launch zwingend + +1. **Zwei Felder in der Datenschutzerklärung, eine Bestätigung im Impressum.** Beide + Seiten existieren, sind im Footer verlinkt und bestehen den Kontrast-Check. Aus dem + Impressum der alten Seite übernommen und eingetragen: **Martin Lindenau, Hollerstraße 2, + 84056 Rottenburg a.d. Laaber**. Hoster STRATO GmbH ist eingetragen. Offen, jeweils rot + gestrichelt auf der Seite markiert: + + - Impressum: bestätigen, dass es ein Kleingewerbe ohne Handelsregistereintrag ist. + - Datenschutz: AV-Vertrag nach Art. 28 DSGVO mit STRATO abschließen (im STRATO-Kundenkonto + verfügbar) und Datum eintragen; Speicherdauer der Server-Logfiles nachsehen. + + **Ein Cookie-Banner ist nicht nötig** — gemessen: keine Cookies, kein Storage, keine + Fremdanfragen. Details in [`DESIGN.md`](DESIGN.md#recht-und-datenschutz). + Beide Texte sind Entwürfe und sollten vor dem Launch juristisch geprüft werden. + +2. **Die alte Datenschutzerklärung ist eine leere Vorlage — dringend.** Unter + `emmas-schatzkiste.de/datenschutzerklarung/` steht aktuell noch der unausgefüllte + Mustertext („Bitte geben Sie den Namen Ihres Datenverantwortlichen ein"). Das ist ein + laufender Verstoß gegen Art. 13 DSGVO und unabhängig von dieser neuen Seite. Entweder + die alte Seite abschalten oder den Text dort sofort ersetzen. + +### Vom Kunden ausstehend + +3. **Foto von Opa Martin.** Der Slot auf der Startseite ist 1:1 und beschriftet. Bild + einsetzen: den `
` durch + `Opa Martin` ersetzen — der Kommentar steht an + der Stelle. Bild und Name, kein Bildtext (Kundenvorgabe). +4. **Zwei Audiodateien** — ein Lied für den Laden, eines für den Verein. Bis dahin ist der + Player sichtbar deaktiviert, mit Badge „Audio folgt". Beim Einbau: je ein `