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 <noreply@anthropic.com>

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 `<div class="portrait__slot">` durch
+   `<img src="assets/opa-martin.jpg" alt="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 `<audio>`
+   verdrahten, Button aktivieren, Fortschrittsbalken aus `timeupdate` treiben,
+   Abspielposition in `localStorage` merken. **Ein Lied pro Seite, nicht beide auf beiden**
+   (Kundenvorgabe).
+5. **Öffnungszeiten und vollständige Anschrift.** Bekannt sind nur Postleitzahl und Ort.
+   Der Footer sagt bis dahin „Öffnungszeiten folgen".
+6. **Logos als Vektor.** Die gelieferten JPEGs sind freigestellt worden (siehe DESIGN.md),
+   aber eine SVG- oder transparente PNG-Originaldatei wäre sauberer, besonders fürs
+   Header-Zeichen bei 32px.
+7. **Rechtsform des Vereins.** Noch nicht eingetragen; die Seite spricht deshalb nur vom
+   „Hilfe Verein". Sobald eingetragen: Name und Rechtsform überall nachziehen, dann sind
+   auch Spendenquittungen und ein echter Spendenweg möglich.
+
+### Nicht bauen
+
+Der Online-Shop bleibt geparkt — kein Storefront, kein Warenkorb, kein Checkout. Der
+Nav-Eintrag bleibt trotzdem sichtbar, damit Besucher wissen, dass da etwas kommt. Falls
+später doch ein Shop entsteht: die §19-UStG-Zeile muss zusätzlich im Checkout und auf
+Rechnungen stehen.
+
+## Inhaltliche Lücke gegenüber der alten Seite
+
+Die alte Seite `emmas-schatzkiste.de` führt Angebote, die auf der neuen Seite nirgends
+vorkommen. Der Handoff erwähnt sie nicht — vermutlich übersehen, nicht bewusst gestrichen:
+
+- **Verleih** von Reisebetten und Atemmonitoren
+- **UPS Access Point**
+- **Zahlungsarten** bar, Karte und PayPal
+- eigene Seiten „Über uns" und „Unser Laden" (der Nav-Punkt „Unser Laden" wurde laut
+  Handoff allerdings ausdrücklich vom Kunden entfernt)
+
+Bitte klären, ob das weiterhin angeboten wird. Besonders der Verleih und der UPS Access
+Point sind starke Gründe, überhaupt in den Laden zu kommen — die würde ich nicht
+verschweigen.
+
+## Vom Handoff fehlt
+
+Der Bundle enthält `design/_ds/…/styles.css` und `_ds_bundle.js` **nicht** — die drei
+`.dc.html`-Prototypen lassen sich damit nicht öffnen. Die elf Komponenten (`SiteHeader`,
+`SiteFooter`, `Button`, `IconButton`, `Icon`, `Badge`, `SectionHeader`, `InfoTile`,
+`TrustBadge`, `ImagePlaceholder`, `Decor`) waren nur über Name und Prop-Liste bekannt; ihr
+Innenleben ist hier aus der Token-Tabelle und den Inline-Styles rekonstruiert. Falls der
+Absender den `_ds/`-Ordner nachliefert, lohnt ein Abgleich — vor allem bei `InfoTile`,
+`TrustBadge` und `SiteFooter`.