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>
2026-09-22 20:05:34 +02:00
commit 92a6faaf54
@@ -0,0 +1,375 @@
+# Handoff: Emma's Schatzkiste — Startseite, Hilfe Verein, Shop
+
+## Overview
+Website für **Emma's Schatzkiste**, einen Baby- und Kinder-Second-Hand-Laden in
+Rottenburg a.d. Laaber (Bayern), plus den zugehörigen **Hilfe Verein** ("Hilfe. Herz.
+Hoffnung."), der sich noch im Aufbau befindet.
+
+Three pages:
+1. **Startseite** — shop introduction, story, Opa Martin, family value props, song player, teaser to the Hilfe Verein.
+2. **Hilfe Verein** — the association: song, three ways to help, the shop's origin story, contact.
+3. **Shop** — deliberately parked: an "im Aufbau" (under construction) placeholder page. The online shop is NOT to be built yet.
+
+## About the Design Files
+The files in `design/` are **design references created in HTML** — prototypes showing
+intended look and behavior, not production code to copy directly. They are authored in a
+custom in-house HTML component format (`.dc.html` = template + a small logic class) and
+will not drop into a normal build as-is.
+
+The task is to **recreate these designs in the target codebase's existing environment**
+(React, Vue, Astro, WordPress, etc.) using its established patterns and libraries. If no
+environment exists yet, pick the most appropriate stack — this is a small, mostly static
+marketing site for a local shop, so a static-site generator or a light React/Astro setup
+is more appropriate than a heavy app framework.
+
+## Fidelity
+**High fidelity.** Colors, typography, spacing, radii and shadows are all final and come
+from a bound design system (see *Design Tokens*). Recreate the UI faithfully using the
+codebase's existing component library where one exists; otherwise implement against the
+token values listed below.
+
+Two things are explicitly unfinished and must not be treated as final:
+- **Audio files** for the two songs do not exist yet. The players render disabled with an "Audio folgt" badge.
+- The **Opa Martin photo** is a drop-target placeholder; the real photo is pending.
+
+## Design System
+All three pages are built on the **Emmas Schatzkiste Design System**
+(namespace `EmmasSchatzkisteDesignSystem_3da4b6`). The pages compose its components rather
+than styling raw HTML. Components used, with the props these pages pass:
+
+| Component | Used for | Props passed |
+|---|---|---|
+| `SiteHeader` | sticky 64px top nav on all 3 pages | `items`, `active`, `onNavigate` |
+| `SiteFooter` | footer on all 3 pages | `columns` |
+| `Button` | all CTAs | `as`, `href`, `size`, `variant`, `icon` |
+| `IconButton` | audio play button (disabled) | `label`, `disabled`, `size` |
+| `Icon` | Lucide icon wrapper | `name`, `size` |
+| `Badge` | "Audio folgt", "Im Aufbau" | `tone` |
+| `SectionHeader` | every section heading | `title`, `icon` |
+| `InfoTile` | value props + ways-to-help cards | `title`, `body`, `tone`, `cta` |
+| `TrustBadge` | hero badges | `icon`, `title`, `sub` |
+| `ImagePlaceholder` | Opa Martin drop slot | `slotId`, `label`, `tone`, `ratio`, `radius` |
+| `Decor` | flat decorative layer | `variant`, `opacity` |
+
+Language and tone rules from the design system, followed throughout: **German, informal
+"du"**, sentence case, no emoji, prices in German format. Uppercase labels are 11px with
+0.08em tracking.
+
+---
+
+## Screens / Views
+
+### 1. Startseite (`design/Startseite.dc.html`)
+
+**Purpose.** First contact. Explain what the shop is, build trust, and hand visitors off
+to the Hilfe Verein.
+
+**Layout.** Single column, content constrained to `--page-max` (1180px) with 24px side
+padding, sections separated by `--space-16` (64px). Full-bleed hero and header.
+
+**Sections top to bottom:**
+
+**a) SiteHeader** — sticky, 64px, `items: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt']`,
+`active: 'Start'`. `onNavigate` routes: Shop → Shop page, Hilfe Verein → Verein page,
+Kontakt → Verein page `#kontakt`.
+
+**b) Hero** — full-bleed, `min-height: clamp(540px, 64vw, 680px)`, `display: grid`, content
+vertically centered.
+- Background: a full-cover photo, `position: absolute; inset: 0; object-fit: cover; object-position: 74% 45%`. Currently a hot-linked free Pexels photo of children with wooden toys (see *Assets*).
+- Scrim above it: `linear-gradient(98deg, #FFF 0, #FFF 430px, rgba(255,255,255,.9) 560px, rgba(255,255,255,0) 820px)` — opaque white on the left so text stays readable, fading to clear over the photo on the right. **Note:** this is a fixed-px gradient, deliberately, so the text column always sits fully on solid white regardless of viewport width.
+- Content column: `max-width: min(100%, 540px)`, left-aligned, `gap: --space-5`.
+  - Shop logo image, `max-width: 200px`, `mix-blend-mode: multiply` (removes the logo JPEG's white box).
+  - **H1**, `font: --text-display-xl` overridden to `font-size: clamp(32px, 7.5vw, 56px); line-height: 1.05`, as a `display: grid` of three lines, each individually rotated for a lively hand-placed feel:
+    - "Gebraucht," — `--sky-500 #2E86D0`, `rotate(-2.5deg)`
+    - "geliebt," — `--sun-600 #A87811`, `rotate(1.5deg) translateX(14px)`
+    - "weitergegeben!" — `--coral-500 #DB513A`, `rotate(-1deg)`
+  - Sub, `--text-body-l`, `--ink-700`, `max-width: 34ch`: "Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg."
+  - Primary `Button` size `l` with arrow icon → Hilfe Verein page: **"Hilfe Verein ansehen"**
+  - Two `TrustBadge`s in a wrapping flex row, `gap: --space-4`:
+    - sparkles / "Einzelstücke" / "nur 1× vorhanden"
+    - badge-check / "Sehr gut erhalten" / "wir prüfen jedes Teil"
+
+**c) "Wie alles angefangen hat"** — `SectionHeader` with a `heart` icon, then a two-column
+auto-fit grid (`minmax(min(100%,280px),1fr)`, gap `--gutter-grid`) of two `--text-body-l`
+paragraphs, each `max-width: 52ch`:
+> Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche sollen Spielsachen bekommen, die ein zweites Leben verdient haben: nachhaltig, familienfreundlich und für jeden Geldbeutel.
+
+> Bei uns findest du Einzelstücke — vom Strampler bis zum Bobbycar. Jedes Teil gibt es nur 1× vorhanden, und jedes hat schon eine Geschichte hinter sich.
+
+**d) Opa Martin** — a deliberately quiet, centered block, `max-width: 560px`, `justify-items: center`.
+- `ImagePlaceholder` `slotId="opa-martin"`, `tone="sun"`, `ratio="1 / 1"`, `radius: --radius-xl`, label "Bild von Opa Martin hier ablegen".
+- Below it the name **"Opa Martin"** in `--text-display-m`, `--sky-500`.
+- **No body text by client instruction** — image and name only. Opa Martin is the owner and the name is important to the brand; do not add a caption or bio.
+
+**e) "Für Familien"** — `SectionHeader` with `heart-handshake`, then three `InfoTile`s in an
+auto-fit grid (`minmax(min(100%,260px),1fr)`):
+1. tone `cool` — "Preise für Familien" / "Second-Hand-Preise, die zum Familienbudget passen."
+2. tone `band` — "Sehr gut erhalten" / "Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand."
+3. tone `soft` — "Wir suchen mit" / "Sag uns, was du brauchst — wir helfen beim Suchen."
+
+**f) "Unser Lied"** — `SectionHeader` with `music`. One centered card, `max-width: 520px; margin: 0 auto`.
+- Card: `--surface-card`, 1px `--line-soft` border, `--radius-l`, `--shadow-card`, `--space-5` padding, grid `gap: --space-4`.
+- Header row: "Lied vom Laden" in `--text-subheading`/`--sky-500` + `Badge tone="warning"` reading "Audio folgt".
+- Player row: disabled 44px `IconButton` with a `play` icon, then a flex-1 column with an 8px `--surface-sunk` pill as the progress track and "0:00" in `--text-small`/`--text-muted`.
+- Footnote: "Sobald die Datei da ist, spielt der Player sie hier ab."
+- **Gated behind the `audioSichtbar` prop** (boolean, default `true`) so the whole section can be hidden until audio exists.
+
+**g) Hilfe-Verein teaser band** — `--surface-band` (`#FDF4DC`), `--radius-band` (24px),
+`--space-10` padding, two-column auto-fit grid.
+- Left: uppercase `--text-label` eyebrow "Hilfe. Herz. Hoffnung." in `--sun-600`; H2 "Unser Hilfe Verein ist im Aufbau." in `--text-display-l`/`--sky-500`; paragraph "Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst." (`max-width: 46ch`); `Button` size `l` "So kannst du helfen".
+- Right: the Verein logo, `max-width: 380px`, `--radius-xl`, `--shadow-card`.
+
+**h) SiteFooter** + a §19 UStG legal line (see *Legal*).
+
+---
+
+### 2. Hilfe Verein (`design/Hilfe Verein.dc.html`)
+
+**Purpose.** Explain the association and convert visitors into donors or volunteers.
+Client requirement: this page must look and feel **distinctly different** from the
+Startseite — it is the yellow page, the shop is the blue page.
+
+**a) SiteHeader** — same items, `active: 'Hilfe Verein'`.
+
+**b) Hero** — the yellow counterpart to the shop hero. Same full-bleed structure,
+`min-height: clamp(520px, 62vw, 660px)`, but visually differentiated:
+- Background photo of children playing together (Pexels, hot-linked), `object-position: 72% 40%`.
+- Scrim: `linear-gradient(100deg, var(--sun-100) 0, var(--sun-100) 430px, rgba(253,244,220,.9) 560px, rgba(253,244,220,0) 820px)` — cream-yellow instead of white.
+- `border-bottom: 6px solid var(--sun-400)` — a solid yellow edge the shop hero does not have.
+- Eyebrow is a **rotated yellow pill**, not plain text: `background: --sun-400`, `--ink-700` text, `--text-label` uppercase with `--ls-caps`, `padding: 6px 14px`, `--radius-pill`, `rotate(-2deg)`, reading "Hilfe. Herz. Hoffnung."
+- **H1**, same clamp scale and rotation treatment, different words and colour order:
+  - "Helfen," — `--sun-600`, `rotate(-2deg)`
+  - "teilen," — `--coral-500`, `rotate(1.5deg) translateX(12px)`
+  - "zusammenhalten!" — `--sky-500`, `rotate(-1deg)`
+- Sub (`max-width: 34ch`): "Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt."
+- **Two** buttons, not one: primary "So kannst du helfen" (→ `#helfen`) and secondary "Kontakt" (→ `#kontakt`).
+- Two `TrustBadge`s: hand-heart / "Im Aufbau" / "wir fangen gerade an"; map-pin / "Rottenburg a.d. Laaber" / "für Familien hier".
+- Verein logo positioned `absolute` bottom-right, `width: clamp(110px, 16vw, 180px)`, `mix-blend-mode: multiply`, `rotate(-3deg)`.
+
+**c) "Unser Lied"** — identical card pattern to the Startseite, centered, but titled
+**"Lied vom Hilfe Verein"**. Client requirement: **the two songs must not both appear on
+both pages** — shop song on the Startseite only, Verein song on this page only.
+
+**d) "Wir brauchen Hilfe"** (`id="helfen"`) — `SectionHeader` with `hand-heart`, intro
+paragraph (`max-width: 56ch`): "Ein Verein im Aufbau braucht beides: Mittel, um wirklich
+helfen zu können, und Menschen, die mit anpacken. Finanziell und menschlich — in jeder
+Form." Then three `InfoTile`s, two of which carry a CTA:
+1. tone `soft`, "Geldspenden" / "Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben." / CTA primary "Spenden" → `mailto:` with subject `Spende Hilfe Verein`
+2. tone `cool`, "Ehrenamtlich mithelfen" / "Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu." / CTA secondary "Anrufen" → `tel:`
+3. tone `band`, "Weitersagen" / "Reichweite kostet nichts: erzähl von uns und bring Familien vorbei." / no CTA
+
+These three are exactly the help types the client asked for: **Geldspenden, ehrenamtliche
+Helfer, Reichweite/Weitersagen**. Do not add donation tiers, a payment form or a
+membership flow — the association is not incorporated yet.
+
+**e) "Wo alles angefangen hat"** — `--surface-band` band, two columns: copy left with a
+secondary `Button` "Mehr über den Laden" → Startseite; shop logo right, `max-width: 360px`.
+Copy:
+> Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei uns Spielsachen, die ein zweites Leben verdient haben.
+
+> Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.
+
+**f) "Schreib uns"** (`id="kontakt"`) — `SectionHeader` with `mail`, then three white cards
+in an auto-fit grid (`minmax(min(100%,240px),1fr)`). Each: uppercase `--text-label`
+`--text-muted` label + value in `--text-body-l`.
+- Adresse — "84056 Rottenburg a.d. Laaber"
+- Telefon — `tel:015751479212` → "0157 51479212"
+- E-Mail — `mailto:emmas.schatzkiste.hilft@gmail.com` (`word-break: break-word`)
+
+**g) SiteFooter** + §19 UStG line.
+
+---
+
+### 3. Shop (`design/Shop.dc.html`)
+
+**Purpose.** The online shop is **intentionally parked**. The nav link stays visible so
+visitors know a shop is coming, but the page only announces that it is under construction.
+**Do not implement a storefront, cart or checkout.**
+
+**Layout.** `min-height: 100vh`, flex column; header, a flex-1 centered `<main>`, footer
+pinned at the bottom.
+
+**Content**, centered, `max-width: 620px`, `gap: --space-5`:
+- `Badge tone="warning"` — "Im Aufbau"
+- H1 `--text-display-l`/`--sky-500` — "Der Online-Shop ist noch im Aufbau."
+- Paragraph `max-width: 48ch` — "Wir richten ihn gerade ein. Bis dahin findest du unsere Sachen im Laden in Rottenburg a.d. Laaber — oder du rufst an und wir suchen mit."
+- Two `Button`s size `l`, centered flex row: primary `tel:` "0157 51479212", secondary "Zurück zur Startseite".
+
+---
+
+## Interactions & Behavior
+
+**Navigation.** `SiteHeader` is controlled — it does not contain links. It calls
+`onNavigate(itemLabel)` and each page maps the label to a destination. When porting, replace
+this with the target framework's router and mark the active item from the current route.
+
+| Label | Destination |
+|---|---|
+| Start | Startseite |
+| Shop | Shop page |
+| Hilfe Verein | Hilfe Verein page |
+| Kontakt | Hilfe Verein page, `#kontakt` anchor |
+
+Client instruction: the nav is exactly these four items. An earlier "Unser Laden" item was
+removed on request — do not reintroduce it.
+
+**Audio players.** Both are non-functional by design: the play `IconButton` is `disabled`,
+the progress track is a static pill, the time reads `0:00`, and a "Audio folgt" badge
+explains why. When the two MP3s arrive, wire each card to a real audio element, enable the
+button, and drive the progress pill from `timeupdate`. Persist playback position in
+`localStorage` and restore on load. Keep the one-song-per-page split.
+
+**Hover / press / focus** come from the design system and should be preserved:
+- Hover: lift 3px, deepen shadow; buttons darken one step (coral 400 → 500). Never lighten, never change hue.
+- Press: `scale(0.97)`, shadow drops to `--shadow-xs`, fill darkens one further step.
+- Focus: double ring — `--ring-focus` = `0 0 0 3px var(--sky-100), 0 0 0 5px var(--sky-400)`. On everything.
+- Disabled: cream fill, muted ink, no shadow, no lift.
+
+**Motion.** 120ms for state colour, 200ms for lift, 340ms for anything larger.
+`--ease-standard` for most things; `--ease-bounce` only on category discs and colour
+swatches (neither appears on these pages). No load fade-ins, no parallax, no looping
+animation.
+
+**Responsive.** Everything is fluid; there are no media queries. Columns use
+`repeat(auto-fit, minmax(min(100%, Npx), 1fr))` so they collapse to one column on narrow
+viewports. Headline sizes use `clamp()`. The heroes use `min-height: clamp(...)` so they
+shrink on phones.
+
+⚠️ **Known weak point to fix when porting:** the hero scrims use fixed-pixel gradient
+stops (430px / 560px / 820px). On viewports narrower than ~820px the photo is almost
+entirely covered by the scrim. Consider swapping to a vertical stack below ~768px: photo
+on top, text block below on solid colour.
+
+## State Management
+Minimal — these are marketing pages.
+- `Startseite`: one prop, `audioSichtbar` (boolean, default `true`), toggles the entire "Unser Lied" section. Port as a feature flag or CMS field.
+- All three pages hold a small `dsReady` flag used only to wait for the design-system bundle before rendering icons. **This is an artifact of the prototype environment — drop it entirely** and import icons normally.
+- No data fetching. No forms. Contact is via `tel:` and `mailto:` links only.
+
+## Design Tokens
+
+**Colour — brand**
+| Token | Hex | Role |
+|---|---|---|
+| `--sky-400` | `#4A9FE0` | header, secondary buttons |
+| `--sky-500` | `#2E86D0` | headings, links |
+| `--sky-600` | `#1F6BAB` | link hover |
+| `--sky-50` | `#EAF4FC` | cool band |
+| `--sky-100` | `#CFE6F8` | focus halo |
+| `--sun-400` | `#F5C13B` | highlight, Verein hero edge + pill |
+| `--sun-600` | `#A87811` | yellow-on-light text (contrast-safe) |
+| `--sun-100` | `#FDF4DC` | band + footer cream, Verein hero scrim |
+| `--coral-400` | `#F4715A` | action colour (buy/press) |
+| `--coral-500` | `#DB513A` | action hover, coral-on-light text |
+| `--coral-50` | `#FFF1EE` | soft band |
+
+**Colour — neutrals & semantics**
+`--surface-page`/`--surface-card` `#FFFFFF` · `--surface-sunk` `#F5F7FA` ·
+`--surface-band` `#FDF4DC` · `--surface-footer` `#FDF4DC` ·
+`--ink-300` `#8B94A0` (muted) · `--ink-500` `#4A5560` (body) · `--ink-700` `#232A33` (prices, strong) ·
+`--line-soft` `#EDEFF2` (card borders) · `--line` `#DFE3E8`
+
+**Typography.** Display: **Fredoka** (Google Fonts). Body: **Nunito** (Google Fonts), 15px
+base, 1.6 leading. Two families only. Both are substitutions for an unsupplied brand font —
+swap in real binaries if they exist.
+
+| Token | Size / line-height | Weight |
+|---|---|---|
+| `--text-display-xl` | 56px / 1.02 | 700 |
+| `--text-display-l` | 42px / 1.06 | 700 |
+| `--text-display-m` | 32px / 1.12 | 600 |
+| `--text-heading-s` | 24px / 1.2 | 600 |
+| `--text-subheading` | 19px / 1.3 | 600 |
+| `--text-body-l` | 17px / 1.6 | 400 |
+| `--text-body-m` | 15px / 1.6 | 400 |
+| `--text-small` | 13px / 1.5 | 400 |
+| `--text-label` | 11px / 1.4 | 700 |
+
+Display tracking `--ls-display: -0.01em`; uppercase labels `--ls-caps: 0.08em`.
+Both H1s override `--text-display-xl` to `font-size: clamp(32px, 7.5vw, 56px); line-height: 1.05`.
+
+**Spacing** — 4px base: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px
+(`--space-0` … `--space-24`). Layout: `--page-max: 1180px`, `--page-pad-x: 24px`,
+`--gutter-grid: 20px`, `--section-gap: 56px`, `--header-h: 64px`.
+⚠️ `--space-14` does **not** exist — an earlier draft used it and silently broke the hero padding.
+
+**Radius** — 6 / 10 / 14 / 20 / 28px (`--radius-xs` … `--radius-xl`), `--radius-band: 24px`,
+`--radius-pill: 999px`, `--radius-circle: 50%`. **Nothing is square.** Every button, input,
+badge and select is a full pill.
+
+**Shadows** — warm, blue-tinted, never black, never coloured:
+`--shadow-xs: 0 1px 2px rgba(35,52,74,.06)` ·
+`--shadow-card: 0 2px 10px rgba(35,52,74,.07)` ·
+`--shadow-card-hover: 0 10px 24px rgba(35,52,74,.13)` ·
+`--shadow-band: 0 4px 22px rgba(35,52,74,.09)` ·
+`--shadow-pop: 0 16px 40px rgba(35,52,74,.18)` ·
+`--shadow-button: 0 2px 0 rgba(35,52,74,.10)` (bottom-only, buttons at rest) ·
+`--shadow-inset-sunk: inset 0 1px 2px rgba(35,52,74,.06)`
+
+## Assets
+
+**Logos** (`design/` references `./assets/`, included in this bundle):
+- `assets/logo-shop.jpeg` — "Emma's Schatzkiste, Baby & Kind Second Hand". Supplied by the client.
+- `assets/logo-verein.jpeg` — "Emma's Schatzkiste Hilfe Verein — Hilfe. Herz. Hoffnung." Supplied by the client.
+
+Both are **JPEGs with a baked-in white background**. The pages hide that box with
+`mix-blend-mode: multiply`, which works because they sit on white or pale cream. **Ask the
+client for transparent PNG or SVG versions** and drop the blend mode — the current approach
+will break on any darker background.
+
+**Hero photography — placeholders, replace before launch.** Two free Pexels photos are
+**hot-linked, not licensed or downloaded**:
+- Startseite: `https://images.pexels.com/photos/3661386/pexels-photo-3661386.jpeg` (children with wooden toys)
+- Hilfe Verein: `https://images.pexels.com/photos/8435803/pexels-photo-8435803.jpeg` (children playing together)
+
+Pexels images are free for commercial use, but hot-linking a third-party CDN in production
+is not acceptable. Either self-host them or — preferred — replace both with real photos
+from the shop. Check current Pexels terms before shipping either one.
+
+**Opa Martin photo — missing.** Renders as a labelled drop-target placeholder
+(`ImagePlaceholder slotId="opa-martin"`). Client has confirmed a photo is coming. Image and
+name only, no caption.
+
+**Audio — missing.** Two songs, one per page. Neither file has been delivered.
+
+**Icons** — **Lucide**, 2px stroke, `currentColor`, via
+`https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js`, wrapped by the design system's `Icon`
+component. Names used: `heart`, `heart-handshake`, `hand-heart`, `music`, `mail`,
+`map-pin`, `play`, `sparkles`, `badge-check`, `search`, `arrow-right`. Sizes: 15px in trust
+badges, 17–18px in nav/buttons, 22px in section headings. Stroke weight stays 2 at every
+size. Use a proper Lucide package rather than the CDN UMD build in production.
+
+## Legal
+
+**Kleinunternehmerregelung nach § 19 UStG.** All three pages carry this line beneath the
+footer, on `--surface-footer` in `--text-small`/`--text-muted`:
+
+> Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.
+
+Keep it on every page. If a shop is ever built, this wording must also appear at checkout
+and on invoices. Note the site currently has **no Impressum and no Datenschutzerklärung**
+— both are legally required for a German commercial site and must be added before launch.
+The footer's "Impressum" link is a label only and does not resolve.
+
+## Still open (client-side)
+1. Opa Martin photo
+2. Two audio files (shop song, Verein song)
+3. Opening hours and full street address — only postcode and town are known
+4. Transparent logo files
+5. Legal name / status of the association (not yet incorporated; currently referred to only as "Hilfe Verein")
+6. Impressum and Datenschutzerklärung content
+
+## Files
+```
+design/Startseite.dc.html     Startseite
+design/Hilfe Verein.dc.html   Hilfe Verein page
+design/Shop.dc.html           "Im Aufbau" shop placeholder
+design/support.js             prototype runtime — reference only, do not port
+design/image-slot.js          drag-and-drop image placeholder — reference only
+assets/logo-shop.jpeg         shop logo (client-supplied)
+assets/logo-verein.jpeg       Verein logo (client-supplied)
+```
+
+Each `.dc.html` is a single file: an HTML template followed by a small logic class in a
+`<script type="text/x-dc">` tag. Read the template for structure and inline styles; read the
+class for the data (nav items, footer columns, icon names, copy passed as props).
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
+<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
+<script src="./image-slot.js"></script>
+<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
+</helmet>
+
+<div style="background:var(--surface-page)">
+
+  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Hilfe Verein" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
+
+  <section style="position:relative; background:var(--sun-100); overflow:hidden; border-bottom:6px solid var(--sun-400); min-height:clamp(520px, 62vw, 660px); display:grid">
+    <img src="https://images.pexels.com/photos/8435803/pexels-photo-8435803.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800" alt="Kinder spielen gemeinsam" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 40%" />
+    <span style="position:absolute; inset:0; background:linear-gradient(100deg, var(--sun-100) 0, var(--sun-100) 430px, rgba(253,244,220,0.9) 560px, rgba(253,244,220,0) 820px)"></span>
+    <div style="position:relative; align-self:center; width:100%; max-width:var(--page-max); margin:0 auto; padding:var(--space-12) var(--page-pad-x)">
+      <div style="display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%, 540px)">
+        <span style="display:inline-block; background:var(--sun-400); color:var(--ink-700); font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); transform:rotate(-2deg)">Hilfe. Herz. Hoffnung.</span>
+        <h1 style="font:var(--text-display-xl); font-size:clamp(32px,7.5vw,56px); line-height:1.05; display:grid; justify-items:start; gap:2px">
+          <span style="color:var(--sun-600); display:inline-block; transform:rotate(-2deg)">Helfen,</span>
+          <span style="color:var(--coral-500); display:inline-block; transform:rotate(1.5deg) translateX(12px)">teilen,</span>
+          <span style="color:var(--sky-500); display:inline-block; transform:rotate(-1deg)">zusammenhalten!</span>
+        </h1>
+        <p style="font:var(--text-body-l); color:var(--ink-700); max-width:34ch">Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt.</p>
+        <div style="display:flex; flex-wrap:wrap; gap:var(--space-3)">
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="#helfen" size="l" icon="{{ iconArrow }}" hint-size="230px,48px">So kannst du helfen</x-import>
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="#kontakt" size="l" variant="secondary" hint-size="150px,48px">Kontakt</x-import>
+        </div>
+        <div style="display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)">
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconHandSmall }}" title="Im Aufbau" sub="wir fangen gerade an" hint-size="190px,52px"></x-import>
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconPin }}" title="Rottenburg a.d. Laaber" sub="für Familien hier" hint-size="220px,52px"></x-import>
+        </div>
+      </div>
+    </div>
+    <img src="./assets/logo-verein.jpeg" alt="Emma's Schatzkiste Hilfe Verein" style="position:absolute; right:var(--page-pad-x); bottom:var(--space-6); width:clamp(110px, 16vw, 180px); mix-blend-mode:multiply; transform:rotate(-3deg)" />
+  </section>
+
+  <section style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) 0">
+    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Unser Lied" icon="{{ iconMusic }}" hint-size="100%,44px"></x-import>
+    <div style="display:grid; max-width:520px; margin:0 auto">
+      <div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-4)">
+        <div style="display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap">
+          <span style="font:var(--text-subheading); color:var(--sky-500)">Lied vom Hilfe Verein</span>
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="110px,22px">Audio folgt</x-import>
+        </div>
+        <div style="display:flex; align-items:center; gap:var(--space-4)">
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.IconButton" label="Abspielen" disabled="{{ true }}" size="{{ 44 }}" hint-size="44px,44px">
+            <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Icon" name="play" size="{{ 18 }}" hint-size="18px,18px"></x-import>
+          </x-import>
+          <div style="flex:1; display:grid; gap:var(--space-2)">
+            <span style="height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)"></span>
+            <span style="font:var(--text-small); color:var(--text-muted)">0:00</span>
+          </div>
+        </div>
+        <p style="font:var(--text-small); color:var(--text-muted)">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
+      </div>
+    </div>
+  </section>
+
+  <section id="helfen" style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) var(--space-12)">
+    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Wir brauchen Hilfe" icon="{{ iconHands }}" hint-size="100%,44px"></x-import>
+    <p style="font:var(--text-body-l); color:var(--text-body); max-width:56ch; margin-bottom:var(--space-8)">Ein Verein im Aufbau braucht beides: Mittel, um wirklich helfen zu können, und Menschen, die mit anpacken. Finanziell und menschlich — in jeder Form.</p>
+    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)">
+      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Geldspenden" body="Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben." tone="soft" cta="{{ ctaSpende }}" hint-size="100%,170px"></x-import>
+      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Ehrenamtlich mithelfen" body="Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu." tone="cool" cta="{{ ctaHelfen }}" hint-size="100%,170px"></x-import>
+      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Weitersagen" body="Reichweite kostet nichts: erzähl von uns und bring Familien vorbei." tone="band" hint-size="100%,170px"></x-import>
+    </div>
+  </section>
+
+  <section style="max-width:var(--page-max); margin:0 auto var(--space-16); padding:0 var(--page-pad-x)">
+    <div style="background:var(--surface-band-cool); border-radius:var(--radius-band); padding:var(--space-10); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-8); align-items:center">
+      <div style="display:grid; gap:var(--space-4); justify-items:start">
+        <span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--sky-500)">Der Second-Hand-Laden</span>
+        <h2 style="font:var(--text-display-l); color:var(--sky-500)">Wo alles angefangen hat.</h2>
+        <p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei uns Spielsachen, die ein zweites Leben verdient haben.</p>
+        <p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.</p>
+        <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Startseite.dc.html" variant="secondary" size="l" hint-size="210px,48px">Mehr über den Laden</x-import>
+      </div>
+      <img src="./assets/logo-shop.jpeg" alt="Emma's Schatzkiste — Baby &amp; Kind Second Hand" style="width:100%; max-width:360px; justify-self:center; mix-blend-mode:multiply" />
+    </div>
+  </section>
+
+  <section id="kontakt" style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
+    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Schreib uns" icon="{{ iconMail }}" hint-size="100%,44px"></x-import>
+    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--gutter-grid)">
+      <div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
+        <span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">Adresse</span>
+        <p style="font:var(--text-body-l); color:var(--text-price)">84056 Rottenburg a.d. Laaber</p>
+      </div>
+      <div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
+        <span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">Telefon</span>
+        <p style="font:var(--text-body-l)"><a href="tel:015751479212">0157 51479212</a></p>
+      </div>
+      <div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
+        <span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">E-Mail</span>
+        <p style="font:var(--text-body-l); word-break:break-word"><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
+      </div>
+    </div>
+  </section>
+
+  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
+  <div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
+    <p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+  </div>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+  state = { dsReady: false };
+
+  componentDidMount() {
+    this.waitForDs();
+  }
+
+  componentWillUnmount() { clearInterval(this._t); }
+
+  waitForDs() {
+    const check = () => {
+      const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
+      if (ds && ds.Icon) { clearInterval(this._t); this.setState({ dsReady: true }); }
+    };
+    this._t = setInterval(check, 120);
+    check();
+  }
+
+  icon(name, size) {
+    const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
+    if (!ds || !ds.Icon) return null;
+    return React.createElement(ds.Icon, { name: name, size: size || 22 });
+  }
+
+  link(href, label, variant) {
+    const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
+    if (!ds || !ds.Button) return null;
+    return React.createElement(ds.Button, { as: 'a', href: href, size: 's', variant: variant || 'primary' }, label);
+  }
+
+  renderVals() {
+    return {
+      navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
+      onNavigate: item => {
+        if (item === 'Start') window.location.href = './Startseite.dc.html';
+        else if (item === 'Shop') window.location.href = './Shop.dc.html';
+        else if (item === 'Kontakt') window.location.hash = '#kontakt';
+      },
+      iconArrow: this.icon('arrow-right', 18),
+      iconHandSmall: this.icon('hand-heart', 15),
+      iconPin: this.icon('map-pin', 15),
+      footerColumns: [
+        { title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
+        { title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
+        { title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
+      ],
+      iconHands: this.icon('hand-heart'),
+      iconMail: this.icon('mail'),
+      iconMusic: this.icon('music'),
+      ctaSpende: this.link('mailto:emmas.schatzkiste.hilft@gmail.com?subject=Spende%20Hilfe%20Verein', 'Spenden'),
+      ctaHelfen: this.link('tel:015751479212', 'Anrufen', 'secondary')
+    };
+  }
+}
+</script>
+</body>
+</html>
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
+<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
+<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
+</helmet>
+
+<div style="background:var(--surface-page); min-height:100vh; display:flex; flex-direction:column">
+
+  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Shop" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
+
+  <main style="flex:1; display:flex; align-items:center; justify-content:center; padding:var(--space-20) var(--page-pad-x)">
+    <div style="max-width:620px; display:grid; gap:var(--space-5); justify-items:center; text-align:center">
+      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="120px,22px">Im Aufbau</x-import>
+      <h1 style="font:var(--text-display-l); color:var(--sky-500)">Der Online-Shop ist noch im Aufbau.</h1>
+      <p style="font:var(--text-body-l); color:var(--text-body); max-width:48ch">Wir richten ihn gerade ein. Bis dahin findest du unsere Sachen im Laden in Rottenburg a.d. Laaber — oder du rufst an und wir suchen mit.</p>
+      <div style="display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-2)">
+        <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="tel:015751479212" size="l" hint-size="190px,48px">0157 51479212</x-import>
+        <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Startseite.dc.html" variant="secondary" size="l" hint-size="190px,48px">Zurück zur Startseite</x-import>
+      </div>
+    </div>
+  </main>
+
+  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
+  <div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
+    <p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+  </div>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+  renderVals() {
+    return {
+      navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
+      onNavigate: item => {
+        if (item === 'Hilfe Verein') window.location.href = './Hilfe Verein.dc.html';
+        else if (item === 'Kontakt') window.location.href = './Hilfe Verein.dc.html#kontakt';
+        else if (item !== 'Shop') window.location.href = './Startseite.dc.html';
+      },
+      footerColumns: [
+        { title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
+        { title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
+        { title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
+      ]
+    };
+  }
+}
+</script>
+</body>
+</html>
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
+<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
+<script src="./image-slot.js"></script>
+<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
+</helmet>
+
+<div style="background:var(--surface-page)">
+
+  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Start" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
+
+  <section style="position:relative; background:var(--surface-band-cool); overflow:hidden; min-height:clamp(540px, 64vw, 680px); display:grid">
+    <img src="https://images.pexels.com/photos/3661386/pexels-photo-3661386.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800" alt="Kinder spielen mit Holzspielzeug" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:74% 45%" />
+    <span style="position:absolute; inset:0; background:linear-gradient(98deg, var(--surface-card) 0, var(--surface-card) 430px, rgba(255,255,255,0.9) 560px, rgba(255,255,255,0) 820px)"></span>
+    <div style="position:relative; align-self:center; width:100%; max-width:var(--page-max); margin:0 auto; padding:var(--space-10) var(--page-pad-x)">
+      <div style="display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%, 540px)">
+        <img src="./assets/logo-shop.jpeg" alt="Emma's Schatzkiste — Baby &amp; Kind Second Hand" style="width:100%; max-width:200px; mix-blend-mode:multiply" />
+        <h1 style="font:var(--text-display-xl); font-size:clamp(32px,7.5vw,56px); line-height:1.05; display:grid; justify-items:start; gap:2px">
+          <span style="color:var(--sky-500); display:inline-block; transform:rotate(-2.5deg)">Gebraucht,</span>
+          <span style="color:var(--sun-600); display:inline-block; transform:rotate(1.5deg) translateX(14px)">geliebt,</span>
+          <span style="color:var(--coral-500); display:inline-block; transform:rotate(-1deg)">weitergegeben!</span>
+        </h1>
+        <p style="font:var(--text-body-l); color:var(--ink-700); max-width:34ch">Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg.</p>
+        <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" icon="{{ iconArrow }}" hint-size="280px,48px">Hilfe Verein ansehen</x-import>
+        <div style="display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)">
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconSparkles }}" title="Einzelstücke" sub="nur 1× vorhanden" hint-size="180px,52px"></x-import>
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconCheck }}" title="Sehr gut erhalten" sub="wir prüfen jedes Teil" hint-size="200px,52px"></x-import>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) var(--space-12)">
+    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Wie alles angefangen hat" icon="{{ iconHeart }}" hint-size="100%,44px"></x-import>
+    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start">
+      <p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche sollen Spielsachen bekommen, die ein zweites Leben verdient haben: nachhaltig, familienfreundlich und für jeden Geldbeutel.</p>
+      <p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Bei uns findest du Einzelstücke — vom Strampler bis zum Bobbycar. Jedes Teil gibt es nur 1× vorhanden, und jedes hat schon eine Geschichte hinter sich.</p>
+    </div>
+  </section>
+
+  <section style="max-width:560px; margin:0 auto; padding:var(--space-8) var(--page-pad-x) var(--space-16); display:grid; gap:var(--space-5); justify-items:center">
+    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.ImagePlaceholder" slot-id="opa-martin" label="Bild von Opa Martin hier ablegen" tone="sun" ratio="1 / 1" radius="var(--radius-xl)" style="width:100%" hint-size="100%,420px"></x-import>
+    <span style="font:var(--text-display-m); color:var(--sky-500)">Opa Martin</span>
+  </section>
+
+  <section style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
+    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Für Familien" icon="{{ iconFamily }}" hint-size="100%,44px"></x-import>
+    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)">
+      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Preise für Familien" body="Second-Hand-Preise, die zum Familienbudget passen." tone="cool" hint-size="100%,150px"></x-import>
+      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Sehr gut erhalten" body="Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand." tone="band" hint-size="100%,150px"></x-import>
+      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Wir suchen mit" body="Sag uns, was du brauchst — wir helfen beim Suchen." tone="soft" hint-size="100%,150px"></x-import>
+    </div>
+  </section>
+
+  <sc-if value="{{ audioSichtbar }}" hint-placeholder-val="{{ true }}">
+  <section style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
+    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Unser Lied" icon="{{ iconMusic }}" hint-size="100%,44px"></x-import>
+    <div style="display:grid; max-width:520px; margin:0 auto">
+      <div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-4)">
+        <div style="display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap">
+          <span style="font:var(--text-subheading); color:var(--sky-500)">Lied vom Laden</span>
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="110px,22px">Audio folgt</x-import>
+        </div>
+        <div style="display:flex; align-items:center; gap:var(--space-4)">
+          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.IconButton" label="Abspielen" disabled="{{ true }}" size="{{ 44 }}" hint-size="44px,44px">
+            <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Icon" name="play" size="{{ 18 }}" hint-size="18px,18px"></x-import>
+          </x-import>
+          <div style="flex:1; display:grid; gap:var(--space-2)">
+            <span style="height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)"></span>
+            <span style="font:var(--text-small); color:var(--text-muted)">0:00</span>
+          </div>
+        </div>
+        <p style="font:var(--text-small); color:var(--text-muted)">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
+      </div>
+    </div>
+  </section>
+  </sc-if>
+
+  <section style="max-width:var(--page-max); margin:0 auto var(--space-16); padding:0 var(--page-pad-x)">
+    <div style="background:var(--surface-band); border-radius:var(--radius-band); padding:var(--space-10); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-8); align-items:center">
+      <div style="display:grid; gap:var(--space-4); justify-items:start">
+        <span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--sun-600)">Hilfe. Herz. Hoffnung.</span>
+        <h2 style="font:var(--text-display-l); color:var(--sky-500)">Unser Hilfe Verein ist im Aufbau.</h2>
+        <p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst.</p>
+        <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" hint-size="220px,48px">So kannst du helfen</x-import>
+      </div>
+      <img src="./assets/logo-verein.jpeg" alt="Emma's Schatzkiste Hilfe Verein" style="width:100%; max-width:380px; justify-self:center; mix-blend-mode:multiply" />
+    </div>
+  </section>
+
+  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
+  <div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
+    <p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+  </div>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;audioSichtbar&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Inhalte&quot;}}">
+class Component extends DCLogic {
+  state = { dsReady: false };
+
+  componentDidMount() {
+    this.waitForDs();
+  }
+
+  componentWillUnmount() { clearInterval(this._t); }
+
+  waitForDs() {
+    const check = () => {
+      const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
+      if (ds && ds.Icon) { clearInterval(this._t); this.setState({ dsReady: true }); }
+    };
+    this._t = setInterval(check, 120);
+    check();
+  }
+
+  icon(name, size) {
+    const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
+    if (!ds || !ds.Icon) return null;
+    return React.createElement(ds.Icon, { name: name, size: size || 22 });
+  }
+
+  renderVals() {
+    return {
+      audioSichtbar: this.props.audioSichtbar ?? true,
+      navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
+      onNavigate: item => {
+        if (item === 'Shop') window.location.href = './Shop.dc.html';
+        else if (item === 'Hilfe Verein') window.location.href = './Hilfe Verein.dc.html';
+        else if (item === 'Kontakt') window.location.href = './Hilfe Verein.dc.html#kontakt';
+      },
+      iconArrow: this.icon('arrow-right', 18),
+      iconSparkles: this.icon('sparkles', 15),
+      iconCheck: this.icon('badge-check', 15),
+      iconSearch: this.icon('search', 15),
+      footerColumns: [
+        { title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
+        { title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
+        { title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
+      ],
+      iconHeart: this.icon('heart'),
+      iconFamily: this.icon('heart-handshake'),
+      iconMusic: this.icon('music')
+    };
+  }
+}
+</script>
+</body>
+</html>