Neuigkeiten: News-Pinnwand auf der Startseite

Sektion 'Neues aus dem Laden' nach dem Hero. Die Beitraege schreibt Opa Martin im WEBklar-Kundenportal (Funktion News); news.js von project.webklar.com zeigt sie als Korkwand. Ohne Beitraege bleibt der statische Leerzustand stehen. Menuepunkt 'Neuigkeiten' (am Handy ausgeblendet, 4 Punkte passen), Datenschutz Abschnitt 4c, Stand 30.09.2026. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Google-Karte auf der Startseite immer anzeigen
2026-09-30 18:02:14 +00:00 · 2026-09-30 12:51:14 +00:00 · 2026-09-29 22:34:56 +02:00 · 2026-09-27 22:19:12 +02:00 · 2026-09-26 13:00:46 +02:00 · 2026-09-26 11:12:15 +02:00
22 changed files with 1540 additions and 203 deletions
@@ -28,7 +28,9 @@ 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.
+**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
@@ -80,6 +82,45 @@ Coral bleibt unverändert **ausschließlich** Handlungsfarbe der primären Butto
 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`](../design-references/entries/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:
@@ -173,7 +214,6 @@ kommerzielle Nutzung frei, keine Namensnennung nötig, Selbsthosting erlaubt. Si
 |---|---|---|
 | `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
@@ -191,6 +231,63 @@ 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.

+## Decor-Muster
+
+Kundenwunsch 2026-09-24: die farbigen Flächen wirkten leer. Referenz ist die
+Handoff-Komponente **`Decor` — „flat decorative layer" (`variant`, `opacity`)**; sie steht
+in der Komponentenliste des Handoffs, wurde dort aber nie ausgeführt.
+
+`assets/decor/source.svg` ist eine nahtlose Kachel mit elf flachen Spielzeug-Silhouetten
+(Teddy, Ente, Auto, Ball, Bauklotz, Rassel, Stern, Ballon, Stapelturm, Herz, Segelboot),
+selbst gezeichnet. Daraus sind sieben vorgefärbte Varianten erzeugt (`warm`, `cool`,
+`rose`, `sky`, `sun`, `hero-shop`, `hero-verein`), eingebunden als normales
+Hintergrundbild: immer der Ton der Fläche, eine Stufe dunkler — ein Schatten, kein zweites
+Motiv. Kachel 600px, auf dem Handy 440px (auf Kundenwunsch größer, gleich kräftig).
+
+**Nicht als CSS-Maske.** Die erste Fassung färbte eine einzige SVG per `mask` ein und war
+in Safari (Mac) komplett unsichtbar. Vorgefärbte Dateien sind etwas redundanter, laufen
+aber in jedem Browser. Den Hero-Übergang zur Fotokante macht nur noch eine reine
+Verlaufsmaske.
+
+Liegt auf: Heros (Desktop nur über der Farbfläche, zur Fotokante ausgeblendet), allen
+getönten und gesättigten Feldern, den Bändern und dem Footer. Weiße Sektionen bleiben leer,
+damit der Rhythmus Weiß ↔ Farbe erhalten bleibt.
+
+Kontrast gegen die **dunklere** Musterfarbe gemessen, nicht gegen den Grund: `--ink-700`
+7.41–9.71, Weiß auf dem Blau-Band 4.65.
+
+## Anfahrt und Karte (2026-09-25)
+
+Adresse und Öffnungszeiten von Google Maps übernommen: **Hollerstraße 2, 84056 Rottenburg
+a.d. Laaber**, **Mo–Fr 9:00–13:00**, Sa/So geschlossen. Stehen jetzt im Footer aller Seiten,
+in der Kontaktkarte der Vereinsseite, auf der Shop-Seite und in der neuen Sektion
+„So findest du uns" (`index.html#anfahrt`).
+
+**Die Karte ist eine Zwei-Klick-Lösung.** Ein Google-Maps-iframe beim Seitenaufruf würde
+die IP jedes Besuchers an Google übertragen und bräuchte eine Einwilligung nach
+§ 25 TDDDG — also ein Banner. Stattdessen steht dort eine getönte Fläche mit „Karte
+laden"; erst der Klick setzt das iframe ein (Inline-Skript am Ende von `index.html`, das
+einzige JavaScript der Site). Gemessen: vor dem Klick keine einzige Anfrage an Google.
+Datenschutzerklärung Abschnitt 4a beschreibt das. „Route planen" ist ein normaler Link.
+
+Die Aussage „null Anfragen an Dritte" aus dem Abschnitt Recht gilt damit weiter für den
+Seitenaufruf, nicht mehr nach dem Klick auf die Karte.
+
+Header: beide Zeichen (Laden und Hilfe Verein) nebeneinander auf allen Seiten.
+
+## Ladenfoto und Lieder (2026-09-26)
+
+Das Story-Bild ist jetzt das echte Schaufenster (Kundenfoto, `assets/laden-front.jpg`,
+3:2 mit Schild, Ballonbogen und Eingang) statt des Pexels-Motivs; `.story__img` dafür von
+4:3 auf 3:2. Bildnachweis im Impressum angepasst.
+
+Die Player spielen echte Lieder: `assets/audio/lied-laden.mp3` (2:12, Startseite) und
+`lied-verein.mp3` (3:21, Vereinsseite) — ein Lied pro Seite, wie vorgegeben. Kein
+Autoplay. Fortschritt ist ein echter `<input type="range">`, per Tastatur bedienbar.
+**Abweichung vom Handoff:** keine gemerkte Abspielposition in `localStorage` — das wäre
+Speicherung auf dem Endgerät (§ 25 TDDDG) und widerspräche dem Versprechen der
+Datenschutzerklärung, das die Seite bannerfrei hält.
+
 ## Motion

 Nur Zustandsfeedback, wie im Handoff: 120ms Farbe, 200ms Lift, 340ms alles Größere,
@@ -229,8 +326,74 @@ abgelöst) und `datenschutz.html`. Beide nutzen die `.prose`-Klassen. Offene Ang
 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.

+## Social Media (2026-09-29)
+
+Vierte Footer-Spalte „Folgen" auf allen fünf Seiten: Facebook, Instagram, TikTok.
+
+**Nur Links, keine Einbettungen.** Kein Page-Plugin, kein Feed, keine Like- oder
+Folgen-Schaltfläche. Solche Widgets laden fremde Skripte beim Seitenaufruf und setzen
+Cookies — das würde die Bannerfreiheit kippen, auf der die Datenschutzerklärung steht.
+Dieselbe Überlegung wie bei der Karte, nur mit dem angenehmeren Ergebnis: bei reinen Links
+braucht es nicht einmal eine Zwei-Klick-Lösung. Gemessen nach dem Einbau: weiterhin null
+Fremdanfragen, keine Cookies, kein Storage.
+
+**Icon plus Text, nicht Icon allein.** Eine reine Icon-Reihe zwingt zum Raten und braucht
+eigene Beschriftung für Screenreader. Mit Text greift `.ftr__col a` unverändert weiter,
+inklusive Zielgrößen. Jeder Link trägt zusätzlich ein verstecktes
+„(öffnet in neuem Fenster)" und `rel="noopener noreferrer"`.
+
+**Icons erben `currentColor`,** tragen also `--ink-700` statt Markenfarben. Im Fließtext
+trägt Farbe keine Information — siehe Abschnitt Farbe. Die Markenzeichen bleiben in ihrer
+Form unverändert; als Verweis auf das eigene Profil ist das zulässige Nennung.
+
+**Die drei Ziele, alle vor dem Einbau im Browser geprüft:**
+
+| | Adresse | Stand 29.09.2026 |
+|---|---|---|
+| Facebook | `/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/` | Seite bestätigt |
+| Instagram | `instagram.com/emmas_schatzkiste/` | 70 Follower, 112 Beiträge |
+| TikTok | `tiktok.com/@emmasschatzkiste` | 29 Videos, 64 Follower |
+
+**Bei Facebook steht die dauerhafte Adresse, nicht der Share-Link.** Geliefert wurde
+`facebook.com/share/19NxMjLkKT/`. Solche Links sind undurchsichtig — beim Überfahren sieht
+niemand, wohin es geht —, sie hängen an einem Weiterleitungsschritt und können ungültig
+werden. Im Browser aufgelöst ergibt sich die Profiladresse mit der festen ID
+`61594794906587`; die steht jetzt im Footer, ohne die angehängten Tracking-Parameter
+`rdid` und `share_url`.
+
+**Der Platzhalter-Mechanismus bleibt im CSS.** `.ftr__social[href^="URL-"]` zeichnet einen
+gestrichelten Coral-Rahmen, falls je wieder eine Adresse fehlt. Erfundene Profil-Links
+kommen nicht in Frage: ein Icon, das auf ein fremdes Konto führt, ist schlimmer als keins.
+
+### Nebenbefund: die 44px-Regel im Footer war wirkungslos
+
+Beim Messen aufgefallen: Fusszeilen-Links waren auf dem Handy **30px** hoch, nicht 44.
+Die Mobilregel steht in `site.css` bei Zeile ~245, die Basisregel mit `min-height:30px`
+im FOOTER-Abschnitt bei ~622 — gleiche Spezifität, spätere Regel gewinnt. Die weiter oben
+dokumentierte Korrektur war dadurch seit Längerem außer Kraft. Behoben durch einen Block
+am Dateiende; betrifft alle 13 Footer-Links, nicht nur die neuen.
+
+Das ist im Projekt der dritte Fall derselben Falle. Merke: Overrides für Regeln aus den
+Komponentenabschnitten gehören ans **Ende** von `site.css`, nicht in den Mobile-Block oben.
+
 ## 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:
@@ -46,17 +46,15 @@ cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173

 ### 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".
+0. ~~**Die drei Social-Media-Adressen.**~~ Erledigt 2026-09-29. Facebook, Instagram und
+   TikTok stehen im Footer aller fünf Seiten; alle drei Ziele wurden vor dem Einbau im
+   Browser aufgerufen und bestätigt. Bei Facebook ist die dauerhafte Profiladresse
+   eingetragen, nicht der gelieferte Share-Link (Begründung in [`DESIGN.md`](DESIGN.md)).
+
+
+3. ~~**Foto von Opa Martin.**~~ Erledigt 2026-09-24 (`assets/opa-martin.jpg`).
+4. ~~**Zwei Audiodateien**~~ Erledigt 2026-09-26 (`assets/audio/`).
+5. ~~**Öffnungszeiten und vollständige Anschrift.**~~ Erledigt 2026-09-25 (von Google Maps).
 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.
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, eingefaerbt fuer "cool" (#A9CFEE).
+     Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#A9CFEE" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#A9CFEE">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, eingefaerbt fuer "hero-shop" (#B5D8F3).
+     Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#B5D8F3" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#B5D8F3">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, eingefaerbt fuer "hero-verein" (#F1CC66).
+     Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#F1CC66" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#F1CC66">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, eingefaerbt fuer "rose" (#F9BFB0).
+     Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#F9BFB0" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#F9BFB0">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, eingefaerbt fuer "sky" (#2878BD).
+     Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#2878BD" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#2878BD">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, Quelle fuer die eingefaerbten Varianten
+     daneben (warm, cool, rose, sky, sun, hero-shop, hero-verein). Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#000">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, eingefaerbt fuer "sun" (#E8B124).
+     Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#E8B124" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#E8B124">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, eingefaerbt fuer "warm" (#EDC356).
+     Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#EDC356" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#EDC356">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -0,0 +1,64 @@
+/* Emma's Schatzkiste — Lied-Player
+   Ein Lied pro Seite (Kundenvorgabe). Kein Autoplay: Ton gibt es nur auf Klick.
+   Bewusst OHNE Merken der Abspielposition: das Handoff wollte localStorage, aber jede
+   Speicherung auf dem Gerät fällt unter § 25 TDDDG — die Seite verspricht in der
+   Datenschutzerklärung, nichts zu speichern, und braucht deshalb kein Banner. */
+(function () {
+  function fmt(t) {
+    if (!isFinite(t) || t < 0) t = 0;
+    var m = Math.floor(t / 60), s = Math.floor(t % 60);
+    return m + ':' + (s < 10 ? '0' : '') + s;
+  }
+
+  document.querySelectorAll('[data-song]').forEach(function (box) {
+    var audio = box.querySelector('audio');
+    var btn = box.querySelector('[data-song-toggle]');
+    var seek = box.querySelector('[data-song-seek]');
+    var cur = box.querySelector('[data-song-cur]');
+    var dur = box.querySelector('[data-song-dur]');
+    var title = box.querySelector('h3').textContent;
+    var seeking = false;
+
+    function paint() {
+      var d = audio.duration, t = audio.currentTime;
+      var p = d ? (t / d) * 100 : 0;
+      if (!seeking) seek.value = p;
+      seek.style.setProperty('--p', p + '%');
+      cur.textContent = fmt(t);
+    }
+
+    audio.addEventListener('loadedmetadata', function () {
+      dur.textContent = fmt(audio.duration);
+      paint();
+    });
+    audio.addEventListener('timeupdate', paint);
+    audio.addEventListener('play', function () {
+      box.classList.add('is-playing');
+      btn.setAttribute('aria-label', title + ' pausieren');
+    });
+    audio.addEventListener('pause', function () {
+      box.classList.remove('is-playing');
+      btn.setAttribute('aria-label', title + ' abspielen');
+    });
+    audio.addEventListener('ended', function () {
+      audio.currentTime = 0;
+      paint();
+    });
+
+    btn.addEventListener('click', function () {
+      if (audio.paused) audio.play(); else audio.pause();
+    });
+
+    seek.addEventListener('input', function () {
+      seeking = true;
+      var d = audio.duration || 0;
+      seek.style.setProperty('--p', seek.value + '%');
+      cur.textContent = fmt((seek.value / 100) * d);
+    });
+    seek.addEventListener('change', function () {
+      if (audio.duration) audio.currentTime = (seek.value / 100) * audio.duration;
+      seeking = false;
+      paint();
+    });
+  });
+})();
@@ -43,6 +43,12 @@
     Neun gleichmäßige Stufen (56/42/32/24/19/17/15/13/11) auf sechs reduziert.
     Gestrichen: 42, 24, 19, 15. Bleibt: Display / 30 / 20 / 17 / 13 / 11.

+  4. KRÄFTIGERE TÖNUNGEN (2026-09-24) — zweite Kundenrückmeldung "zu transparent".
+     Referenz wie oben: der DS-Eintrag hält fest, dass Pastell allein nicht trägt.
+     sun-100 → sun-200, sky-50 → sky-100, coral-50 → coral-100, Icon-Chips im Vollton,
+     Hero-Schleier auf eine kurze Kante gekürzt, Header deckend. Auf den neuen Gründen
+     Display-Typo in der dunkleren Stufe (≥3.87). Messwerte in DESIGN.md, Abschnitt 1b.
+
  ASSETS: Die Client-Logos kamen als JPEG mit eingebackenem weissem Kasten, im Handoff
  per mix-blend-mode:multiply kaschiert — das bricht auf jedem dunkleren Grund. Beide sind
  jetzt echt freigestellt (Flood-Fill ueber randverbundenes Nahe-Weiss + weiche Kante,
@@ -67,17 +73,22 @@
  --coral-700:#B03422;  /* Hover: 6.25 */
  --coral-800:#A82F1E;  /* Press: 6.80 */

+  /* Kräftigere Tönungen — 2026-09-24, siehe Abweichung 4. Die 50/100-Pastelle
+     lasen gegen Weiß wie verwaschen ("zu transparent"). */
+  --sun-200:#FBE3A0;    /* ink-700 darauf 11.44 */
+  --coral-100:#FFD8CE;  /* ink-700 darauf 11.01 */
+
  /* Getönte Neutrale (blaustichig, kein reines Grau) */
  --ink-300:#8B94A0; --ink-500:#4A5560; --ink-700:#232A33;
  --line-soft:#EDEFF2; --line:#DFE3E8;

  --surface-page:#FFFFFF; --surface-card:#FFFFFF; --surface-sunk:#F5F7FA;
-  --surface-band:#FDF4DC; --surface-band-cool:#EAF4FC; --surface-footer:#FDF4DC;
+  --surface-band:var(--sun-200); --surface-band-cool:var(--sky-100); --surface-footer:var(--sun-200);

  /* Pro Seite überschrieben — genau ein Identitätsakzent */
  --accent:var(--sky-500);
  --accent-text:var(--sky-600);
-  --accent-soft:var(--sky-50);
+  --accent-soft:var(--sky-100);
  --accent-line:var(--sky-400);

  /* Typo — sechs Stufen */
@@ -114,8 +125,11 @@
 .page-verein{
  --accent:var(--sun-600);
  --accent-text:var(--sun-700);
-  --accent-soft:var(--sun-100);
+  --accent-soft:var(--sun-200);
  --accent-line:var(--sun-400);
+  /* Icon-Chips im hellen Gelb statt sun-600 (las als Braun). Weißes Icon darauf
+     wäre 1.6 — deshalb Ink-Icon: 8.67. */
+  --chip-bg:var(--sun-400); --chip-fg:var(--ink-700);
 }

 /* ============================================================ BASE */
@@ -130,6 +144,8 @@ h1{font:var(--t-display)} h2{font:var(--t-h2)} h3{font:var(--t-h3)}
 p{margin:0}
 img{max-width:100%; display:block}
 a{color:var(--accent-text); text-underline-offset:3px}
+/* Verein: Links in Ink mit dicker gelber Unterstreichung statt braunem Text. */
+.page-verein main a:not(.btn){color:var(--ink-700); text-decoration-color:var(--sun-400); text-decoration-thickness:3px}
 a:hover{color:var(--sky-600)}

 .wrap{max-width:var(--page-max); margin:0 auto; padding-inline:var(--page-pad-x)}
@@ -139,9 +155,9 @@ a:hover{color:var(--sky-600)}
 /* Getoente Vollflaechen statt durchgehendem Weiss. Geben der Seite Rhythmus und
   tragen den groessten Teil der Farbe — ohne einen einzigen Fliesstext einzufaerben. */
 .field{padding-block:var(--space-16)}
-.field--cool{background:var(--sky-50)}
-.field--warm{background:var(--sun-100)}
-.field--rose{background:var(--coral-50)}
+.field--cool{background:var(--sky-100)}
+.field--warm{background:var(--sun-200)}
+.field--rose{background:var(--coral-100)}
 .field--sunk{background:var(--surface-sunk)}

 /* Ein gesaettigtes Vollflaechen-Band pro Seite. Pastelltoene allein trugen die Seite
@@ -172,7 +188,7 @@ a:hover{color:var(--sky-600)}
 /* Weiß statt --sky-400: weiße Navigation auf Hellblau misst 2.87 und fällt durch. */
 .hdr{
  position:sticky; top:0; z-index:50; height:var(--header-h);
-  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
+  background:var(--surface-page);   /* deckend: das durchscheinende Weiß wirkte milchig */
  border-bottom:1px solid var(--line-soft);
 }
 .hdr__in{
@@ -185,6 +201,9 @@ a:hover{color:var(--sky-600)}
  min-height:44px;   /* Touch-Ziel, auch auf Tablets */
 }
 .hdr__brand img{width:34px; height:34px; object-fit:contain}
+/* Beide Zeichen: Laden und Hilfe Verein (Kundenwunsch 2026-09-25) — die zwei Welten
+   des Handoffs stehen damit auf jeder Seite nebeneinander. */
+.hdr__marks{display:flex; align-items:center; gap:4px}
 .nav{display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap}
 /* 44px hoch statt 31: Tablets sind Touch-Geraete, WCAG 2.5.5 will 44x44.
   Passt weiterhin in den 64px hohen Header. */
@@ -198,34 +217,29 @@ a:hover{color:var(--sky-600)}
 .nav a:hover{color:var(--ink-700); background:var(--surface-sunk)}
 .nav a[aria-current="page"]{color:var(--ink-700); background:var(--accent-soft)}

-/* MOBILER HEADER — unter 640px.
-   Vorher: eine Zeile, Nav horizontal scrollend, Wortmarke per font-size:0 versteckt.
-   Gemessen war das zu eng — Nav-Links 28px hoch, Wortmarken-Link 32px breit, und bei
-   320/360px scrollte die Nav seitlich weg, ohne dass man es sieht.
-   Jetzt: zwei Zeilen, Nav als Viererraster ueber die volle Breite, jedes Ziel >=44px
-   (WCAG 2.5.5). Der Header ist dafuer nicht mehr sticky — zwei Zeilen wuerden sonst
-   dauerhaft ein Sechstel des Handydisplays wegnehmen. Auf fuenf Unterseiten ist eine
-   mitlaufende Navigation kein Verlust. */
+/* MOBILER HEADER — unter 640px. Dritte Fassung (2026-09-24).
+   Die Zwei-Zeilen-Fassung (Wortmarke mittig, darunter Viererraster mit Pillen) hat
+   der Kunde als klobig zurückgewiesen. Jetzt wieder eine Zeile und sticky: links nur
+   das Zeichen (der Name steht groß im Hero-Logo direkt darunter und bleibt für
+   Screenreader im Link), rechts die vier Punkte. Aktiv ist eine 3px-Unterkante im
+   Akzent statt der Pille — dieselbe Geste wie die Footer-Kante.
+   Gemessen passt das bis 320px: 44px Zeichen + vier Ziele à ≥44px Höhe. */
@media (max-width:639.98px){
-  .hdr{position:static; height:auto}
-  html{scroll-padding-top:16px}
-  .hdr__in{
-    flex-direction:column; align-items:stretch; justify-content:flex-start;
-    height:auto; gap:6px; padding-block:10px;
-  }
-  .hdr__brand{
-    justify-content:center; min-height:44px; gap:10px;
-    font:600 18px/1.2 'Fredoka','Trebuchet MS',sans-serif;
-  }
-  .hdr__brand img{width:30px; height:30px}
-  .nav{
-    display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
-    flex-wrap:nowrap; overflow:visible;
-  }
+  :root{--header-h:60px; --page-pad-x:20px}
+  .hdr__in{gap:var(--space-2)}
+  .hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center}
+  .hdr__brand img{width:32px; height:32px}
+  .nav{flex-wrap:nowrap; gap:0}
+  /* Die Kopfzeile traegt am Handy vier Punkte; "Neuigkeiten" steht dort direkt unter dem Hero */
+  .nav a.nav__news{display:none}
  .nav a{
-    min-height:44px; display:flex; align-items:center; justify-content:center;
-    padding:6px 4px; font-size:13px; line-height:1.15; text-align:center;
-    white-space:normal; hyphens:auto;
+    position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px);
+    font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s);
+  }
+  .nav a[aria-current="page"]{background:none}
+  .nav a[aria-current="page"]::after{
+    content:""; position:absolute; left:clamp(5px,2.2vw,10px); right:clamp(5px,2.2vw,10px);
+    bottom:6px; height:3px; border-radius:var(--radius-pill); background:var(--accent-line);
  }
  /* Fusszeilen-Links waren 21px hoch und damit unter jeder Touch-Schwelle. */
  .ftr__col ul{gap:2px}
@@ -233,6 +247,10 @@ a:hover{color:var(--sky-600)}
    display:flex; align-items:center; min-height:44px; padding-block:2px;
  }
 }
+/* Unter 360px mit zwei Zeichen im Header: "Hilfe Verein" darf zweizeilig werden. */
+@media (max-width:359.98px){
+  .nav a{white-space:normal; text-align:center; line-height:1.1}
+}

 /* ============================================================ BUTTONS */
 .btn{
@@ -276,6 +294,23 @@ a:hover{color:var(--sky-600)}
 .hl .c-sun{color:var(--sun-600)}
 .hl .c-coral{color:var(--coral-500)}
 .hl .on{color:var(--accent)}
+/* Beide Heros stehen seit 2026-09-24 auf getöntem Grund (sky-100 / sun-200). Dort
+   fielen die Buntwerte auf ~3.0-3.1 — knapp an der Schwelle. Deshalb die dunklere
+   Stufe derselben Familie: auf sky-100 4.35 / 4.04 / 3.87, auf sun-200 4.43 / 4.11 / 3.93. */
+.hero .hl .c-sky{color:var(--sky-500)}
+/* Gelb: dunkles Gelb, das auf hellem Grund lesbar bleibt, ist zwangsläufig Braun
+   (sun-600/700 wurden vom Kunden am 2026-09-24 als "braun statt gelb" zurückgewiesen).
+   Deshalb helles Markengelb mit dunkler Kontur — wie die Buchstaben im Logo. Lesbar
+   macht die Kontur: ink-700 gegen den Grund misst ≥11. paint-order legt sie unter die
+   Füllung, damit die Buchstaben nicht dünner werden. */
+.hero .hl .c-sun, .yellow-type{color:var(--sun-400)}
+/* Kontur auf allen drei Zeilen (Kundenwunsch 2026-09-24) — einheitlicher Sticker-Look
+   wie die Wortmarke. Da die Kontur den Kontrast trägt, stehen Blau und Coral wieder
+   in ihren helleren Markenwerten sky-500 / coral-500 statt der dunklen 600er. */
+/* 0.1em statt fester 6px: auf dem Handy (34px) liefen die Buchstaben sonst zu. */
+.hero .hl span{-webkit-text-stroke:.1em var(--ink-700); paint-order:stroke fill}
+.hero .hl .c-coral{color:var(--coral-500)}
+.hero .trust b + span{color:var(--ink-700)}

 .hero__sub{font:var(--t-body); color:var(--ink-700); max-width:34ch}
 .hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}
@@ -290,31 +325,39 @@ a:hover{color:var(--sky-600)}
 .trust{display:flex; align-items:center; gap:10px}
 .trust__chip{
  width:30px; height:30px; flex:none; border-radius:var(--radius-circle,50%);
-  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
+  display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff);  /* Icon 3.86 */
 }
 .trust svg{width:15px; height:15px; flex:none}
 .trust b{display:block; font:700 15px/1.3 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
-.trust span{display:block; font:var(--t-small); color:var(--ink-500)}
+/* Nur die Unterzeile treffen — .trust__chip ist selbst ein <span>, und ein blankes
+   ".trust span" setzte ihm display:block und die Textfarbe: Icon aus dem Kreis
+   gerutscht und dunkel statt weiß. */
+.trust b + span{display:block; font:var(--t-small); color:var(--ink-500)}

 /* Schwachstelle des Handoffs behoben: die fixen Stopps (430/560/820px) decken das Foto
   unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben,
   Text darunter auf voller Fläche. */
@media (min-width:820px){
-  .hero{min-height:clamp(540px,64vw,680px); display:grid}
+  /* Kante der Fläche folgt der Textspalte: .wrap ist zentriert, die Spalte endet bei
+     50% - 590px + 24px + 560px. max() hält sie bei schmalen Fenstern bei 600px. */
+  .hero{min-height:clamp(540px,64vw,680px); display:grid; --scrim-edge:max(600px, calc(50% + 10px))}
  .hero__in{align-self:center}
  .hero--shop .hero__scrim{
-    background:linear-gradient(98deg,#FFF 0,#FFF 430px,rgba(255,255,255,.92) 560px,rgba(255,255,255,0) 820px);
+    /* Getönte Fläche statt Weiß, und eine kurze Kante statt eines langen Schleiers:
+       vorher lag bis 820px ein halbtransparenter Weißverlauf über dem Foto und nahm ihm
+       die Farbe. Jetzt deckt die Fläche die Textspalte, das Foto steht voll gesättigt. */
+    background:linear-gradient(98deg,var(--sky-100) 0,var(--sky-100) var(--scrim-edge),rgba(207,230,248,0) calc(var(--scrim-edge) + 90px));
  }
  .hero--verein .hero__scrim{
-    background:linear-gradient(100deg,var(--sun-100) 0,var(--sun-100) 430px,rgba(253,244,220,.92) 560px,rgba(253,244,220,0) 820px);
+    background:linear-gradient(100deg,var(--sun-200) 0,var(--sun-200) var(--scrim-edge),rgba(251,227,160,0) calc(var(--scrim-edge) + 90px));
  }
 }
@media (max-width:819.98px){
  .hero__media{position:relative; inset:auto; height:clamp(200px,44vw,320px)}
  .hero__scrim{display:none}
  .hero__in{padding-block:var(--space-10)}
-  .hero--shop{background:var(--surface-page)}
-  .hero--verein{background:var(--sun-100)}
+  .hero--shop{background:var(--sky-100)}
+  .hero--verein{background:var(--sun-200)}
 }
 .hero--verein{border-bottom:6px solid var(--sun-400)}
 /* Seit im Hero ein echtes Foto liegt, braucht das Zeichen einen eigenen Grund —
@@ -331,10 +374,9 @@ a:hover{color:var(--sky-600)}
 .sh{display:flex; align-items:center; gap:14px; margin-bottom:var(--space-6)}
 .sh__chip{
  width:44px; height:44px; flex:none; border-radius:var(--radius-m);
-  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
+  display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff);  /* Icon: Grafik-Schwelle 3.0 */
  transform:rotate(-3deg);
 }
-.field--cool .sh__chip, .field--warm .sh__chip, .field--rose .sh__chip{background:var(--surface-card)}
 .sh svg{width:22px; height:22px; flex:none}
 .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start}
 .cols p{max-width:52ch}
@@ -345,10 +387,18 @@ a:hover{color:var(--sky-600)}
 }
 .story__copy{display:grid; gap:var(--space-4)}
 .story__copy p{max-width:50ch}
+/* Kundenwunsch 2026-09-24: Geschichte größer. Überschrift auf Display-Niveau, Text eine
+   Stufe hoch auf 20px (vorhandene h3-Stufe, keine neue Größe) in ink-700 — er ist hier
+   der Inhalt, nicht Beiwerk. Guardrail Typo-Extreme: groß wird wirklich groß. */
+#ueber-uns .sh h2{font-size:clamp(32px, 4.6vw, 48px); line-height:1.05}
+#ueber-uns .sh__chip{width:52px; height:52px}
+#ueber-uns .sh svg{width:26px; height:26px}
+.story__copy{gap:var(--space-5)}
+.story__copy p{font-size:20px; line-height:1.6; color:var(--ink-700); max-width:44ch}
 .story__img{
  /* height:auto ist noetig: die width/height-Attribute im HTML (gegen Layout-Shift)
     machen beide Achsen definit, dann ignoriert der Browser aspect-ratio. */
-  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
+  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;  /* Ladenfoto ist Querformat */
  border-radius:var(--radius-xl); box-shadow:var(--shadow-band);
  transform:rotate(-1.5deg);
 }
@@ -363,9 +413,13 @@ a:hover{color:var(--sky-600)}
  padding:var(--space-6); display:grid; gap:var(--space-3); align-content:start;
  transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
 }
-.tile--cool{background:var(--sky-50);   border-color:#D6E8F7; border-top-color:var(--sky-400)}
-.tile--warm{background:var(--sun-100);  border-color:#F2E5C4; border-top-color:var(--sun-400)}
-.tile--rose{background:var(--coral-50); border-color:#F8DED8; border-top-color:var(--coral-400)}
+/* Getönte Kacheln tragen auch auf dem gelben Vollband ihre Farbe (Spezifität 0,2,0,
+   damit sie das Weiß von .field--solid-* .tile schlagen). Fließtext darin ink-700:
+   Guardrail "keine graue Schrift auf farbigem Grund". */
+.tile.tile--cool{background:var(--sky-100);   border-color:var(--sky-100);   border-top-color:var(--sky-500)}
+.tile.tile--warm{background:var(--sun-200);   border-color:var(--sun-200);   border-top-color:var(--sun-600)}
+.tile.tile--rose{background:var(--coral-100); border-color:var(--coral-100); border-top-color:var(--coral-500)}
+.tile[class*="tile--"] p{color:var(--ink-700)}
 /* Auf getoentem Feld kehren sich die Kacheln um: weiss auf Farbe statt Farbe auf Weiss. */
 .field--cool .tile, .field--warm .tile, .field--rose .tile{background:var(--surface-card)}
 .tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
@@ -377,14 +431,50 @@ a:hover{color:var(--sky-600)}
   Auf 400px verkleinert und auf ein Cremefeld gesetzt, damit die Luecke wie ein
   vorbereiteter Rahmen liest und nicht wie ein Loch. */
 .portrait{max-width:400px; margin-inline:auto; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
-.portrait__slot{
-  width:100%; aspect-ratio:1/1; border-radius:var(--radius-xl);
-  background:var(--surface-card); border:2px dashed var(--sun-400);
-  display:grid; place-items:center; padding:var(--space-6);
+/* Gleiche Behandlung wie .story__img — gekippt, weiß gerahmt, wie ein aufgelegtes Foto. */
+.portrait__img{
+  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
+  border-radius:var(--radius-xl); border:6px solid var(--surface-card);
+  box-shadow:var(--shadow-band); transform:rotate(1.5deg);
 }
-.portrait__slot span{font:var(--t-small); color:var(--ink-700); max-width:22ch}
-.portrait__slot img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-xl)}
-.portrait__name{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
+/* Wie die Hero-Headline: Display-Größe, helles Markenblau mit dunkler Kontur (die Kontur
+   trägt den Kontrast), leicht gekippt wie jede Headline-Zeile. */
+.portrait__name{
+  font:var(--t-display); font-size:clamp(40px, 6vw, 60px); letter-spacing:var(--ls-display);
+  color:var(--sky-500); -webkit-text-stroke:.1em var(--ink-700); paint-order:stroke fill;
+  transform:rotate(-2deg);
+}
+
+/* Anfahrt — Adresse, Zeiten, Karte */
+.visit{
+  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
+  gap:var(--space-8); align-items:stretch;
+}
+.visit__info{display:grid; gap:var(--space-6); align-content:center; justify-items:start}
+.visit__info .label{display:block; margin-bottom:var(--space-2)}
+.visit__addr{font:600 22px/1.35 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
+.hours{margin:0; display:grid; grid-template-columns:auto auto; gap:var(--space-1) var(--space-6)}
+.hours dt{color:var(--ink-500)}
+.hours dd{margin:0; font-weight:700; color:var(--ink-700)}
+/* Zwei-Klick-Karte. Vor dem Klick eine getönte Fläche mit Decor-Muster — keine Karte
+   in der Karte (Guardrail), nur Inhalt auf Fläche. */
+.map{
+  position:relative; isolation:isolate; min-height:380px; overflow:hidden;
+  border-radius:var(--radius-xl); box-shadow:var(--shadow-band);
+  background:var(--sky-100) url(decor/cool.svg) 0 0/var(--decor-size,600px) auto repeat;
+  display:grid; place-items:center; padding:var(--space-8) var(--space-6);
+}
+.map.is-loaded{padding:0; display:block; background:var(--surface-sunk)}
+.map iframe{display:block; width:100%; height:100%; min-height:380px; border:0}
+.map__consent{display:grid; gap:var(--space-3); justify-items:center; text-align:center; max-width:36ch}
+.map__pin{
+  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
+  background:var(--accent); color:#fff; box-shadow:var(--shadow-card);
+}
+.map__pin svg{width:28px; height:28px}
+.map__title{font:var(--t-h3); color:var(--ink-700)}
+.map__note{font:var(--t-small); color:var(--ink-700)}
+.map__note a{color:var(--ink-700)}

 /* Audio */
 .song{
@@ -393,7 +483,10 @@ a:hover{color:var(--sky-600)}
  box-shadow:var(--shadow-card); padding:var(--space-6); display:grid; gap:var(--space-4);
 }
 .song__top{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
-.song__top h3{color:var(--accent-text)}  /* nicht --accent: 20px/600 zaehlt nicht als
+.song__top h3{color:var(--accent-text)}
+/* Auf der Vereinsseite wäre das Braun — 20px ist zu klein für die Kontur-Lösung.
+   Ink trägt den Text, die gelbe Badge daneben trägt die Farbe. */
+.page-verein .song__top h3{color:var(--ink-700)}  /* nicht --accent: 20px/600 zaehlt nicht als
   Large Text, sky-500 misst dort nur 3.86. accent-text = 5.60 bzw. 5.20. */
 .badge{
  font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
@@ -401,15 +494,44 @@ a:hover{color:var(--sky-600)}
  background:var(--sun-400); color:var(--ink-700);   /* 8.67 */
 }
 .song__row{display:flex; align-items:center; gap:var(--space-4)}
+/* Seit 2026-09-26 mit echten Liedern. Knopf im Vollton wie die Icon-Chips
+   (weiß auf sky-500 3.86 / Ink auf sun-400 8.67 — Grafik-Schwelle 3.0). */
 .iconbtn{
-  width:44px; height:44px; flex:none; border-radius:var(--radius-circle, 50%);
-  display:grid; place-items:center; border:1px solid var(--line);
-  background:var(--sun-100); color:var(--ink-300); cursor:not-allowed;
+  width:52px; height:52px; flex:none; border-radius:50%;
+  display:grid; place-items:center; border:0; cursor:pointer;
+  background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff);
+  box-shadow:var(--shadow-button);
+  transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
 }
-.iconbtn svg{width:18px; height:18px}
-.song__meter{flex:1; display:grid; gap:var(--space-2)}
-.song__track{height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)}
-.song__time, .song__note{font:var(--t-small); color:var(--ink-500)}
+.iconbtn:hover{transform:translateY(-2px); box-shadow:var(--shadow-card-hover)}
+.iconbtn:active{transform:scale(.95); box-shadow:var(--shadow-xs)}
+.iconbtn svg{width:22px; height:22px}
+.iconbtn .i-pause, .is-playing .iconbtn .i-play{display:none}
+.is-playing .iconbtn .i-pause{display:block}
+.song__meter{flex:1; display:grid; gap:var(--space-1)}
+/* Fortschritt als echter Regler — per Tastatur bedienbar, Füllung über --p aus player.js. */
+.song__seek{
+  -webkit-appearance:none; appearance:none; width:100%; height:24px; margin:0;
+  background:transparent; cursor:pointer; --p:0%;
+}
+.song__seek::-webkit-slider-runnable-track{
+  height:8px; border-radius:var(--radius-pill);
+  background:linear-gradient(to right,var(--accent-line) var(--p),var(--surface-sunk) var(--p));
+}
+.song__seek::-moz-range-track{height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)}
+.song__seek::-moz-range-progress{height:8px; border-radius:var(--radius-pill); background:var(--accent-line)}
+.song__seek::-webkit-slider-thumb{
+  -webkit-appearance:none; width:18px; height:18px; margin-top:-5px; border-radius:50%;
+  background:var(--surface-card); border:3px solid var(--ink-700); box-shadow:var(--shadow-xs);
+}
+.song__seek::-moz-range-thumb{
+  width:12px; height:12px; border-radius:50%; background:var(--surface-card);
+  border:3px solid var(--ink-700);
+}
+.song__seek:focus-visible{box-shadow:none; outline:none}
+.song__seek:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring-focus)}
+.song__seek:focus-visible::-moz-range-thumb{box-shadow:var(--ring-focus)}
+.song__time{font:var(--t-small); color:var(--ink-500); font-variant-numeric:tabular-nums}

 /* Band */
 .band{
@@ -422,7 +544,8 @@ a:hover{color:var(--sky-600)}
 .band__copy{display:grid; gap:var(--space-4); justify-items:start}
 /* Guardrail: kein Grau auf farbigem Grund. Ink-700 = 13.20 auf Creme. */
 .band__copy p{color:var(--ink-700); max-width:46ch}
-.band__copy h2{color:var(--accent)}
+.band__copy h2{color:var(--accent-text)}  /* 4.43 auf sun-200 */
+.page-verein .band__copy h2{color:var(--sun-400); -webkit-text-stroke:5px var(--ink-700); paint-order:stroke fill}
 .band__copy .label{color:var(--ink-700)}
 .band img{width:100%; max-width:380px; justify-self:center}

@@ -434,10 +557,12 @@ a:hover{color:var(--sky-600)}
  border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  padding:var(--space-6); display:grid; gap:var(--space-2);
 }
-.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); word-break:break-word}
+.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); overflow-wrap:break-word}  /* bricht am <wbr> nach dem @ */
 /* Telefon und E-Mail sind die wichtigsten Links der Seite und waren 23px hoch —
   einen Pixel unter WCAG 2.5.8. Als volles 44px-Ziel laesst sich die Nummer am
   Handy zuverlaessig antippen. */
+.contact .contact__note{font:var(--t-small); color:var(--ink-500)}
+.contact .contact__note a{min-height:0; display:inline}
 .contact a{
  color:var(--accent-text); display:inline-flex; align-items:center;
  min-height:44px; text-decoration:underline; text-underline-offset:3px;
@@ -501,6 +626,32 @@ a:hover{color:var(--sky-600)}
  font:400 15px/1.4 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); text-decoration:none;
 }
 .ftr__col a:hover{color:var(--sky-600); text-decoration:underline}
+/* Social-Links im Footer. Ausgehende Verweise, sonst nichts: kein Page-Plugin,
+   kein Feed, kein Follow-Button. Solche Widgets laden fremde Skripte beim
+   Seitenaufruf und wuerden die Bannerfreiheit kippen, auf der die
+   Datenschutzerklaerung steht — dieselbe Ueberlegung wie bei der Karte.
+
+   Icon PLUS Text, nicht Icon allein: eine reine Icon-Reihe zwingt zum Raten und
+   braucht Extra-Beschriftung. Mit Text greift .ftr__col a unveraendert weiter,
+   inklusive der 30px/44px-Zielgroessen.
+   Die Icons erben currentColor (--ink-700) statt Markenfarben zu tragen — im
+   Fliesstext traegt Farbe keine Information, siehe DESIGN.md Abschnitt Farbe. */
+.ftr__social{gap:9px}
+.ftr__social svg{width:18px; height:18px; flex:none}
+
+/* Platzhalter, solange eine Profiladresse fehlt. Unuebersehbar, damit nichts
+   davon versehentlich live geht. */
+.ftr__social[href^="URL-"]{
+  color:var(--coral-500); border:2px dashed var(--coral-400);
+  border-radius:var(--radius-xs); padding-inline:6px; font-weight:700;
+}
+
+/* Nur fuer Screenreader. */
+.vh{
+  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
+  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
+}
+
 .ftr__legal{
  margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(35,52,74,.12);
  font:var(--t-small); color:var(--ink-700); max-width:80ch;
@@ -520,6 +671,87 @@ a:hover{color:var(--sky-600)}
  .label, .ftr__col h3, .badge{font-size:12px}
 }

+/* ============================================================ DECOR
+   Referenz: Handoff-DS-Komponente "Decor — flat decorative layer" (variant, opacity).
+   Im Handoff gelistet, aber nie gebaut. Kundenwunsch 2026-09-24: die Flächen wirkten leer.
+   Flache Spielzeug-Silhouetten, je Fläche derselbe Farbton eine Stufe dunkler — Schatten,
+   kein zweites Motiv. Text darüber gemessen gegen die DUNKLERE Musterfarbe:
+   ink-700 ≥ 7.41 auf allen hellen Tönen, weiß auf #2878BD = 4.65.
+
+   Technik: vorgefärbte SVG-Kacheln (assets/decor/*.svg, erzeugt aus source.svg) als
+   normales Hintergrundbild. Die erste Fassung lief über eine CSS-Maske und war in
+   Safari (Mac) unsichtbar — Hintergrundbilder laufen überall.
+   Kachelgröße 600px (vorher 420): auf Kundenwunsch größere Spielzeuge, gleich kräftig. */
+.field--warm, .field--cool, .field--rose, .field--solid-sky, .field--solid-sun,
+.band, .ftr{position:relative; isolation:isolate}
+.field--warm::before, .field--cool::before, .field--rose::before,
+.field--solid-sky::before, .field--solid-sun::before, .band::before, .ftr::before,
+.hero::after{
+  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
+  border-radius:inherit; background-repeat:repeat;
+  background-size:var(--decor-size,600px) auto; background-position:0 0;
+}
+.field--warm::before, .band::before, .ftr::before{background-image:url(decor/warm.svg)}
+.field--cool::before, .band--cool::before{background-image:url(decor/cool.svg)}
+.field--rose::before{background-image:url(decor/rose.svg)}
+.field--solid-sky::before{background-image:url(decor/sky.svg); background-position:180px 120px}
+.field--solid-sun::before{background-image:url(decor/sun.svg); background-position:180px 120px}
+
+/* Hero: über Foto und Verlauf, unter dem Text. */
+.hero--shop::after{background-image:url(decor/hero-shop.svg)}
+.hero--verein::after{background-image:url(decor/hero-verein.svg)}
+.hero::after{z-index:0}
+.hero__in, .hero__mark{z-index:1}
+/* Desktop: nur über der Farbfläche, zur Fotokante hin ausgeblendet. Breite statt
+   SVG-Maske; der Verlauf ist eine reine Gradient-Maske, die Safari seit Jahren kann. */
+@media (min-width:820px){
+  .hero::after{
+    right:auto; width:var(--scrim-edge);
+    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
+            mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
+  }
+}
+@media (max-width:819.98px){ .hero__media{z-index:1} }
+@media (max-width:639.98px){ :root{--decor-size:440px} }
+
+/* ============================================================ HANDY-RHYTHMUS
+   Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein.
+   Gemessen vorher: Startseite 4936px hoch, auf dem ersten Bildschirm nur Foto und
+   Logo — die Headline begann bei ~560px. Referenz bleibt das Handoff-DS; geändert
+   werden nur Verhältnisse, nicht die Bausteine. */
+@media (max-width:639.98px){
+  /* Headline zuerst, Foto danach als gekipptes, gerahmtes Bild — dieselbe Behandlung
+     wie .story__img und das Porträt. */
+  .hero{display:flex; flex-direction:column}
+  .hero__in{order:1; padding-block:var(--space-6) var(--space-5)}
+  .hero__media{
+    order:2; height:190px; margin:0 var(--page-pad-x) var(--space-8);
+    border-radius:var(--radius-xl); box-shadow:var(--shadow-band); transform:rotate(-1.5deg);
+  }
+  .hero__col{gap:var(--space-4)}
+  .hero__logo{max-width:112px}
+  /* So groß, wie "weitergegeben!" in die Spalte passt (Breite ≈ 7.2 × Schriftgröße):
+     46px bei 375, 39px bei 320. Kontur dünner, sonst laufen die Punzen zu. */
+  .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 7.4))}
+  /* "zusammenhalten!" ist breiter: ≈ 8.0 × Schriftgröße inkl. Kontur. */
+  .hero--verein .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 8.1))}
+
+  .section{padding-block:var(--space-10)}
+  .section--tight{padding-block:var(--space-8)}
+  .field{padding-block:var(--space-10)}
+  .sh{margin-bottom:var(--space-4)}
+  .story{gap:var(--space-5)}
+  .story__img{aspect-ratio:3/2}
+  .story__copy p{font-size:18px}
+  .hero .hl span, .portrait__name{-webkit-text-stroke-width:.075em}
+  .portrait{max-width:260px; gap:var(--space-3)}
+  .tiles{gap:var(--space-3)}
+  .tile{padding:var(--space-5)}
+  .band{gap:var(--space-5)}
+  .band img{max-width:220px}
+  .ftr{margin-top:var(--space-10); padding-block:var(--space-10) var(--space-6)}
+}
+
 /* ============================================================ FOKUS
   Muss ganz am Ende stehen. Der Ring ist eine box-shadow, und .btn/.tile/.song
   setzen selbst eine — bei gleicher Spezifitaet gewinnt die spaetere Regel.
@@ -535,3 +767,50 @@ a:hover{color:var(--sky-600)}
 .nav a:focus-visible, .hdr__brand:focus-visible{border-radius:var(--radius-pill)}
 .iconbtn:focus-visible{border-radius:50%}
 .contact a:focus-visible, .ftr__col a:focus-visible{border-radius:var(--radius-xs)}
+
+/* ============================================================ TOUCH-ZIELE MOBIL
+   Muss ganz am Ende stehen. Die Regel im Mobile-Block weiter oben (Zeile ~245) setzt
+   .ftr__col a auf min-height:44px, wird aber von der Basisregel im FOOTER-Abschnitt
+   mit min-height:30px ueberschrieben — gleiche Spezifitaet, spaetere Regel gewinnt.
+   Die dokumentierte 44px-Korrektur war dadurch seit laengerem wirkungslos; gemessen
+   waren es auf dem Handy 30px. Hier greift sie wieder.
+   Betrifft alle Fusszeilen-Links, nicht nur die Social-Links. */
+@media (max-width:639.98px){
+  .ftr__col a, .ftr__col span{min-height:44px; padding-block:2px}
+}
+
+/* ============================================================ NEUIGKEITEN (News-Pinnwand)
+   Die Zettel rendert news.js (WEBklar-Portal, Funktion "News") in Kork mit Holzrahmen #A8733F,
+   Schriften der Seite ueber die --wkn-Variablen. .news-board ist nur der statische Leerzustand im
+   selben Look; news.js ersetzt ihn, sobald ein Beitrag haengt. */
+.news-lead{max-width:52ch; margin:calc(var(--space-2) * -1) 0 var(--space-6) 58px; color:var(--ink-500)}
+.news-pinnwand{
+  --wkn-font-display:'Fredoka', 'Trebuchet MS', sans-serif;
+  --wkn-font-body:'Nunito', 'Segoe UI', sans-serif;
+}
+.news-board{
+  position:relative; border-radius:var(--radius-xl); border:12px solid #A8733F;
+  padding:var(--space-12) var(--space-6); display:grid; place-items:center;
+  background-color:#C08A52;
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .06 0 0 0 -2.4 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .58 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
+  box-shadow:inset 0 6px 14px rgba(60,32,10,.35), var(--shadow-band);
+}
+.news-empty{
+  position:relative; max-width:34ch; text-align:center; background:#fff; border-radius:8px;
+  padding:var(--space-8) var(--space-6) var(--space-6); transform:rotate(-1.5deg);
+  box-shadow:0 10px 22px rgba(35,52,74,.18);
+}
+.news-empty::before{
+  content:""; position:absolute; top:-12px; left:50%; width:84px; height:24px;
+  transform:translateX(-50%) rotate(3deg); background:rgba(255,255,255,.7);
+  box-shadow:0 1px 2px rgba(35,52,74,.12);
+}
+.news-empty__pin svg{width:34px; height:34px; color:var(--sun-700)}
+.news-empty h3{font:var(--t-h2); color:var(--ink-700); margin:var(--space-2) 0}
+.news-empty p{color:var(--ink-500); margin:0}
+@media (max-width:700px){
+  .news-lead{margin-left:0}
+  .news-board{border-width:8px; padding:var(--space-10) var(--space-4); border-radius:var(--radius-l)}
+}
@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Datenschutzerklärung — Emma's Schatzkiste</title>
+<title>Datenschutzerklärung | Emma's Schatzkiste</title>
 <meta name="description" content="Datenschutzerklärung: keine Cookies, kein Tracking, lokal gehostete Schriften. Emma's Schatzkiste, Rottenburg a.d. Laaber." />
 <meta name="robots" content="noindex, follow" />
 <meta name="theme-color" content="#FDF4DC" />
@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -19,11 +19,12 @@
 <header class="hdr">
  <div class="wrap hdr__in">
    <a class="hdr__brand" href="index.html">
-      <img src="assets/logo-shop.png" alt="" />
+      <span class="hdr__marks"><img src="assets/logo-shop.png" alt="" /><img src="assets/logo-verein.png" alt="" /></span>
      Emma's Schatzkiste
    </a>
    <nav class="nav" aria-label="Hauptnavigation">
      <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
      <a href="shop.html">Shop</a>
      <a href="hilfe-verein.html">Hilfe Verein</a>
      <a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -37,10 +38,12 @@
      <h1>Datenschutzerklärung</h1>

      <div class="prose__intro">
-        <strong>Kurz gesagt:</strong> Diese Website setzt keine Cookies, bindet keine
-        Dienste Dritter ein und analysiert nichts. Es gibt kein Kontaktformular. Schriften
-        werden vom eigenen Server geladen, nicht von Google. Deshalb gibt es hier auch kein
-        Einwilligungsbanner — es gibt nichts einzuwilligen.
+        <strong>Kurz gesagt:</strong> Diese Website setzt keine Cookies und analysiert nichts.
+        Es gibt kein Kontaktformular. Schriften werden vom eigenen Server geladen, nicht von
+        Google. Auf der Startseite ist eine Karte von Google Maps eingebunden. Beim Aufruf
+        der Startseite wird dafür eine Verbindung zu Google hergestellt (siehe Abschnitt 4a).
+        Die Neuigkeiten auf der Startseite lädt Ihr Browser vom Server meines Webdienstleisters
+        WEBklar (siehe Abschnitt 4c).
      </div>

      <div class="prose__warn">
@@ -54,7 +57,7 @@
        <dt>Name</dt><dd>Martin Lindenau</dd>
        <dt>Anschrift</dt><dd>Hollerstraße 2, 84056 Rottenburg a.d. Laaber</dd>
        <dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
-        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
+        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></dd>
      </dl>
      <p>Eine Pflicht zur Benennung einer Datenschutzbeauftragten oder eines
      Datenschutzbeauftragten besteht bei dieser Größe nach § 38 BDSG nicht.</p>
@@ -79,9 +82,50 @@
      daher nicht erforderlich, und ein Einwilligungsbanner gibt es bewusst nicht.</p>

      <h2>4. Keine Analyse, kein Tracking, keine Werbung</h2>
-      <p>Es sind keine Analyse-, Tracking- oder Werbedienste eingebunden — kein Google
+      <p>Es sind keine Analyse-, Tracking- oder Werbedienste eingebunden: kein Google
      Analytics, kein Matomo, keine Pixel, keine Social-Media-Plugins, keine eingebetteten
-      Videos oder Karten.</p>
+      Videos. Zur Karte siehe den nächsten Abschnitt.</p>
+
+      <h2 id="karte">4a. Google Maps</h2>
+      <p>Auf der Startseite ist eine Karte von Google Maps eingebunden. Anbieter
+      ist die Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland.</p>
+      <p>Die Karte wird beim Aufruf der Startseite automatisch geladen. Dabei baut Ihr Browser
+      eine Verbindung zu Servern von Google auf.
+      Dabei werden mindestens Ihre IP-Adresse, Datum und Uhrzeit sowie Informationen über
+      Ihren Browser an Google übertragen; Google kann dabei Cookies setzen. Eine Übermittlung
+      in die USA ist möglich. Google LLC ist unter dem EU-US Data Privacy Framework
+      zertifiziert (Angemessenheitsbeschluss der EU-Kommission vom 10. Juli 2023).</p>
+      <p>Die Karte dient dazu, meinen Laden leicht auffindbar zu machen. Rechtsgrundlage ist
+      mein berechtigtes Interesse an einer ansprechenden Darstellung meines Angebots und
+      einer einfachen Auffindbarkeit (Art. 6 Abs. 1 lit. f DSGVO). Sie können der Verarbeitung
+      widersprechen oder die Übertragung verhindern, indem Sie in Ihrem Browser
+      Inhalte von Google blockieren. Mehr zur Datenverarbeitung durch Google:
+      <a href="https://policies.google.com/privacy" rel="noopener noreferrer" target="_blank">policies.google.com/privacy</a>.</p>
+      <p>Der Link „Route planen" öffnet Google Maps in einem neuen Fenster. Auch dort gilt
+      erst ab dem Klick die Datenschutzerklärung von Google.</p>
+
+      <h2 id="social">4b. Social Media</h2>
+      <p>Im Fußbereich jeder Seite finden Sie Verweise auf unsere Profile bei Facebook,
+      Instagram und TikTok. Das sind <strong>einfache Links</strong>. Es sind keine
+      Plugins, Feeds, Like- oder Folgen-Schaltflächen dieser Netzwerke eingebunden.</p>
+      <p>Beim Aufruf dieser Website werden deshalb <strong>keine Daten an die Netzwerke
+      übertragen</strong> und keine Cookies der Netzwerke gesetzt. Erst wenn Sie einen der
+      Links anklicken, verlässt Ihr Browser diese Website. Ab dann gelten ausschließlich
+      die Datenschutzbestimmungen des jeweiligen Anbieters, auf dessen Verarbeitung wir
+      keinen Einfluss haben.</p>
+
+      <h2 id="neuigkeiten">4c. Neuigkeiten auf dieser Website</h2>
+      <p>Auf der Startseite zeige ich unter „Neues aus dem Laden“ kurze Beiträge mit Text und
+      Fotos. Beim Aufruf der Seite lädt Ihr Browser diese Beiträge und Bilder von dem Server,
+      den die WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler, in meinem Auftrag betreibt und
+      der bei der Hetzner Online GmbH in Falkenstein (Deutschland) steht. Dabei werden Ihre
+      IP-Adresse, Datum und Uhrzeit des Aufrufs sowie Angaben zu Ihrem Browser und
+      Betriebssystem übertragen und kurzzeitig in Server-Protokollen gespeichert. Die
+      Pinnwand setzt <strong>keine Cookies</strong> und speichert nichts in Ihrem Browser.</p>
+      <p>Ich brauche diese Daten, um die Beiträge auszuliefern und den Betrieb sicher zu
+      halten. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Mein berechtigtes Interesse
+      liegt in der Darstellung aktueller Informationen und im sicheren, funktionsfähigen
+      Betrieb der Website. Die Protokolle werden nach 14 Tagen gelöscht.</p>

      <h2>5. Schriftarten</h2>
      <p>Die Schriften Fredoka und Nunito werden <strong>lokal vom eigenen Server</strong>
@@ -90,11 +134,11 @@
      übermittelt.</p>

      <h2>6. Kontaktaufnahme</h2>
-      <p>Ein Kontaktformular gibt es nicht. Wenn Sie uns per E-Mail oder Telefon
-      kontaktieren, verarbeiten wir Ihre Angaben ausschließlich zur Bearbeitung Ihrer
+      <p>Ein Kontaktformular gibt es nicht. Wenn Sie mich per E-Mail oder Telefon
+      kontaktieren, verarbeite ich Ihre Angaben ausschließlich zur Bearbeitung Ihrer
      Anfrage. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, soweit die Anfrage auf einen
      Vertrag gerichtet ist, sonst Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse an der
-      Beantwortung). Wir löschen die Daten, sobald der Vorgang erledigt ist und keine
+      Beantwortung). Ich lösche die Daten, sobald der Vorgang erledigt ist und keine
      gesetzlichen Aufbewahrungsfristen entgegenstehen.</p>
      <p>Hinweis: Die angegebene E-Mail-Adresse wird bei Google (Gmail) geführt. Inhalte
      unverschlüsselter E-Mails können auf dem Übertragungsweg mitgelesen werden.</p>
@@ -104,8 +148,10 @@
      und dem Server ist damit verschlüsselt.</p>

      <h2>8. Empfänger und Drittlandübermittlung</h2>
-      <p>Über den Hoster hinaus geben wir keine personenbezogenen Daten weiter. Eine
-      Übermittlung in Länder außerhalb der EU beziehungsweise des EWR findet nicht statt.</p>
+      <p>Über den Hoster und meinen Webdienstleister WEBklar (Abschnitt 4c) hinaus gebe ich
+      keine personenbezogenen Daten weiter. Eine
+      Übermittlung in Länder außerhalb der EU beziehungsweise des EWR findet durch mich nicht
+      statt. Ausnahme ist die Karte von Google Maps auf der Startseite (Abschnitt 4a).</p>

      <h2>9. Ihre Rechte</h2>
      <ul>
@@ -125,10 +171,7 @@
      Bayerische Landesamt für Datenschutzaufsicht (BayLDA), Promenade 18, 91522 Ansbach.</p>

      <h2>11. Stand</h2>
-      <p>Diese Erklärung beschreibt den Stand vom 21. September 2026. Sie muss angepasst
-      werden, sobald sich an der Website etwas ändert — etwa wenn ein Kontaktformular, eine
-      Karte, ein Newsletter, Audiodateien von einem fremden Dienst oder ein Online-Shop
-      dazukommen.</p>
+      <p>Diese Erklärung beschreibt den Stand vom 30. September 2026.</p>
    </div>
  </section>
 </main>
@@ -139,8 +182,9 @@
      <div class="ftr__col">
        <h3>Laden</h3>
        <ul>
-          <li><a href="index.html">Unser Laden</a></li>
-          <li><span>Öffnungszeiten folgen</span></li>
+          <li><a href="index.html">Mein Laden</a></li>
+          <li><a href="index.html#anfahrt">Hollerstraße 2, 84056 Rottenburg</a></li>
+          <li><span>Mo–Fr 9:00–13:00 Uhr</span></li>
          <li><a href="tel:015751479212">Ware abgeben</a></li>
        </ul>
      </div>
@@ -155,14 +199,22 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-mich">Über mich</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
        </ul>
      </div>
+      <div class="ftr__col">
+        <h3>Folgen</h3>
+        <ul>
+          <li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+        </ul>
+      </div>
    </div>
-    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
  </div>
 </footer>

@@ -3,14 +3,14 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Hilfe Verein — Hilfe. Herz. Hoffnung. | Emma's Schatzkiste</title>
-<meta name="description" content="Soziale Hilfe vor der Haustür in Rottenburg a.d. Laaber. Der Hilfe Verein ist im Aufbau: Geldspenden, ehrenamtlich mithelfen, weitersagen — jede Hand zählt." />
+<title>Hilfe Verein: Hilfe. Herz. Hoffnung. | Emma's Schatzkiste</title>
+<meta name="description" content="Soziale Hilfe vor der Haustür in Rottenburg a.d. Laaber. Der Hilfe Verein ist im Aufbau: Geldspenden, ehrenamtlich mithelfen, weitersagen. Jede Hand zählt." />
 <meta name="theme-color" content="#FDF4DC" />
 <link rel="icon" href="assets/logo-verein.png" />
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-verein">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -18,11 +18,12 @@
 <header class="hdr">
  <div class="wrap hdr__in">
    <a class="hdr__brand" href="index.html">
-      <img src="assets/logo-shop.png" alt="" />
+      <span class="hdr__marks"><img src="assets/logo-shop.png" alt="" /><img src="assets/logo-verein.png" alt="" /></span>
      Emma's Schatzkiste
    </a>
    <nav class="nav" aria-label="Hauptnavigation">
      <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
      <a href="shop.html">Shop</a>
      <a href="hilfe-verein.html" aria-current="page">Hilfe Verein</a>
      <a href="#kontakt">Kontakt</a>
@@ -43,7 +44,7 @@
          <span class="c-coral">teilen,</span>
          <span class="c-sky">zusammenhalten!</span>
        </h1>
-        <p class="hero__sub">Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt.</p>
+        <p class="hero__sub">Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau, und jede Hand zählt.</p>
        <div class="hero__actions">
          <a class="btn btn--primary btn--l" href="#helfen">
            So kannst du helfen
@@ -54,7 +55,7 @@
        <div class="trusts">
          <div class="trust">
            <span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg></span>
-            <span><b>Im Aufbau</b><span>wir fangen gerade an</span></span>
+            <span><b>Im Aufbau</b><span>ich fange gerade an</span></span>
          </div>
          <div class="trust">
            <span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></span>
@@ -69,23 +70,23 @@
  <section class="wrap section">
    <div class="sh">
      <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
-      <h2>Unser Lied</h2>
+      <h2>Mein Lied</h2>
    </div>
-    <div class="song">
+    <div class="song" data-song>
+      <audio src="assets/audio/lied-verein.mp3" preload="metadata"></audio>
      <div class="song__top">
        <h3>Lied vom Hilfe Verein</h3>
-        <span class="badge">Audio folgt</span>
      </div>
      <div class="song__row">
-        <button class="iconbtn" type="button" disabled aria-label="Abspielen — Audio folgt">
-          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+        <button class="iconbtn" type="button" data-song-toggle aria-label="Lied vom Hilfe Verein abspielen">
+          <svg class="i-play" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="7 4 20 12 7 20 7 4"/></svg>
+          <svg class="i-pause" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
        </button>
        <div class="song__meter">
-          <div class="song__track"></div>
-          <span class="song__time">0:00</span>
+          <input class="song__seek" type="range" min="0" max="100" step="0.1" value="0" aria-label="Position im Lied" data-song-seek />
+          <span class="song__time"><span data-song-cur>0:00</span> / <span data-song-dur>3:21</span></span>
        </div>
      </div>
-      <p class="song__note">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
    </div>
  </section>

@@ -93,23 +94,23 @@
    <div class="wrap">
    <div class="sh">
      <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg></span>
-      <h2>Wir brauchen Hilfe</h2>
+      <h2>Ich brauche Hilfe</h2>
    </div>
-    <p class="lede" style="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>
+    <p class="lede" style="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 class="tiles">
      <div class="tile tile--rose">
        <h3>Geldspenden</h3>
-        <p>Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben.</p>
+        <p>Jeder Betrag hilft: für Ware, Miete und Familien, die gerade nichts übrig haben.</p>
        <a class="btn btn--primary" href="mailto:emmas.schatzkiste.hilft@gmail.com?subject=Spende%20Hilfe%20Verein">Spenden</a>
      </div>
      <div class="tile tile--cool">
        <h3>Ehrenamtlich mithelfen</h3>
-        <p>Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu.</p>
+        <p>Sortieren, verkaufen, aufbauen, mitdenken. Regelmäßig oder ab und zu.</p>
        <a class="btn btn--secondary" href="tel:015751479212">Anrufen</a>
      </div>
      <div class="tile tile--warm">
        <h3>Weitersagen</h3>
-        <p>Reichweite kostet nichts: erzähl von uns und bring Familien vorbei.</p>
+        <p>Reichweite kostet nichts: erzähl von mir und bring Familien vorbei.</p>
      </div>
      </div>
    </div>
@@ -120,23 +121,24 @@
      <div class="band__copy">
        <span class="label">Der Second-Hand-Laden</span>
        <h2>Wo alles angefangen hat.</h2>
-        <p>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>Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.</p>
+        <p>Im September 2025 habe ich den Second-Hand-Laden übernommen. Eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei mir Spielsachen, die ein zweites Leben verdient haben.</p>
+        <p>Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und ich suche mit, bis du findest, was du brauchst.</p>
        <a class="btn btn--secondary btn--l" href="index.html">Mehr über den Laden</a>
      </div>
-      <img src="assets/logo-shop.png" alt="Emma's Schatzkiste — Baby &amp; Kind Second Hand" style="max-width:360px" />
+      <img src="assets/logo-shop.png" alt="Emma's Schatzkiste, Baby &amp; Kind Second Hand" style="max-width:360px" />
    </div>
  </section>

  <section class="wrap section" id="kontakt">
    <div class="sh">
      <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg></span>
-      <h2>Schreib uns</h2>
+      <h2>Schreib mir</h2>
    </div>
    <div class="contacts">
      <div class="contact">
        <span class="label">Adresse</span>
-        <p>84056 Rottenburg a.d. Laaber</p>
+        <p>Hollerstraße 2<br />84056 Rottenburg a.d. Laaber</p>
+        <p class="contact__note">Mo–Fr 9:00–13:00 Uhr · <a href="index.html#anfahrt">Karte &amp; Anfahrt</a></p>
      </div>
      <div class="contact">
        <span class="label">Telefon</span>
@@ -144,7 +146,7 @@
      </div>
      <div class="contact">
        <span class="label">E-Mail</span>
-        <p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
+        <p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></p>
      </div>
    </div>
  </section>
@@ -157,8 +159,9 @@
      <div class="ftr__col">
        <h3>Laden</h3>
        <ul>
-          <li><a href="index.html">Unser Laden</a></li>
-          <li><span>Öffnungszeiten folgen</span></li>
+          <li><a href="index.html">Mein Laden</a></li>
+          <li><a href="index.html#anfahrt">Hollerstraße 2, 84056 Rottenburg</a></li>
+          <li><span>Mo–Fr 9:00–13:00 Uhr</span></li>
          <li><a href="tel:015751479212">Ware abgeben</a></li>
        </ul>
      </div>
@@ -173,16 +176,25 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-mich">Über mich</a></li>
          <li><a href="#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
        </ul>
      </div>
+      <div class="ftr__col">
+        <h3>Folgen</h3>
+        <ul>
+          <li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+        </ul>
+      </div>
    </div>
-    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
  </div>
 </footer>

+<script src="assets/player.js" defer></script>
 </body>
 </html>
@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Impressum — Emma's Schatzkiste</title>
+<title>Impressum | Emma's Schatzkiste</title>
 <meta name="description" content="Impressum und Anbieterkennzeichnung nach § 5 DDG für Emma's Schatzkiste in Rottenburg a.d. Laaber." />
 <meta name="robots" content="noindex, follow" />
 <meta name="theme-color" content="#FDF4DC" />
@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -19,11 +19,12 @@
 <header class="hdr">
  <div class="wrap hdr__in">
    <a class="hdr__brand" href="index.html">
-      <img src="assets/logo-shop.png" alt="" />
+      <span class="hdr__marks"><img src="assets/logo-shop.png" alt="" /><img src="assets/logo-verein.png" alt="" /></span>
      Emma's Schatzkiste
    </a>
    <nav class="nav" aria-label="Hauptnavigation">
      <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
      <a href="shop.html">Shop</a>
      <a href="hilfe-verein.html">Hilfe Verein</a>
      <a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -36,66 +37,50 @@
    <div class="prose">
      <h1>Impressum</h1>

-      <div class="prose__warn">
-        <strong>Fast vollständig.</strong> Name und Anschrift sind aus dem Impressum der
-        bisherigen Seite übernommen. Offen ist nur noch das rot umrandete Feld unten.
-        Dieser Entwurf ersetzt keine Rechtsberatung.
-      </div>
-
      <h2>Angaben gemäß § 5 DDG</h2>
      <dl>
        <dt>Anbieter</dt><dd>Martin Lindenau</dd>
        <dt>Anschrift</dt><dd>Hollerstraße 2<br />84056 Rottenburg a.d. Laaber<br />Deutschland</dd>
        <dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
-        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
+        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></dd>
      </dl>
-      <p>Eine ladungsfähige Anschrift ist zwingend — ein Postfach genügt nicht.</p>

      <h2>Umsatzsteuer</h2>
-      <p>Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine
-      Umsatzsteuer und weisen sie daher auch nicht aus. Eine Umsatzsteuer-Identifikationsnummer
+      <p>Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus. Eine Umsatzsteuer-Identifikationsnummer
      nach § 27 a UStG besteht deshalb nicht.</p>

-      <h2>Registereintrag</h2>
-      <p><span class="todo">Bitte bestätigen:</span> Kleingewerbe, nicht im Handelsregister
-      eingetragen. Falls doch ein Eintrag besteht, gehören Registergericht und
-      Registernummer hierher.</p>
-
      <h2>Hilfe Verein</h2>
      <p>Der „Hilfe Verein" befindet sich im Aufbau und ist
      <strong>noch nicht als Verein eingetragen</strong>. Er tritt daher nicht als eigene
-      juristische Person auf; verantwortlich ist die oben genannte Person. Sobald die
-      Eintragung erfolgt ist, gehören Name, Rechtsform, Vereinsregister, Registernummer und
-      der Vorstand hierher — und der Verein braucht dann ein eigenes Impressum.</p>
+      juristische Person auf; verantwortlich ist die oben genannte Person. </p>

      <h2>Verbraucherstreitbeilegung</h2>
-      <p>Wir sind nicht bereit und nicht verpflichtet, an Streitbeilegungsverfahren vor einer
+      <p>Ich bin nicht bereit und nicht verpflichtet, an Streitbeilegungsverfahren vor einer
      Verbraucherschlichtungsstelle teilzunehmen.</p>
      <p>Ein Hinweis auf die EU-Plattform zur Online-Streitbeilegung entfällt: Sie wurde zum
-      20. Juli 2025 abgeschaltet (Verordnung (EU) 2024/3228). Falls auf der alten Seite noch
-      ein Link dorthin steht, muss er weg — ein toter Pflichthinweis ist selbst abmahnbar.</p>
+      20. Juli 2025 abgeschaltet (Verordnung (EU) 2024/3228).</p>

      <h2>Haftung für Inhalte</h2>
-      <p>Als Diensteanbieter sind wir für eigene Inhalte auf diesen Seiten nach den
-      allgemeinen Gesetzen verantwortlich. Wir sind nicht verpflichtet, übermittelte oder
+      <p>Als Diensteanbieter bin ich für eigene Inhalte auf diesen Seiten nach den
+      allgemeinen Gesetzen verantwortlich. Ich bin nicht verpflichtet, übermittelte oder
      gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die
-      auf eine rechtswidrige Tätigkeit hinweisen. Sobald uns eine konkrete Rechtsverletzung
-      bekannt wird, entfernen wir den Inhalt umgehend.</p>
+      auf eine rechtswidrige Tätigkeit hinweisen. Sobald mir eine konkrete Rechtsverletzung
+      bekannt wird, entferne ich den Inhalt umgehend.</p>

      <h2>Haftung für Links</h2>
-      <p>Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir
-      keinen Einfluss haben. Für diese fremden Inhalte ist stets der jeweilige Anbieter
-      verantwortlich. Bei Bekanntwerden von Rechtsverletzungen entfernen wir solche Links
+      <p>Mein Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte ich
+      keinen Einfluss habe. Für diese fremden Inhalte ist stets der jeweilige Anbieter
+      verantwortlich. Bei Bekanntwerden von Rechtsverletzungen entferne ich solche Links
      umgehend.</p>

      <h2>Urheberrecht</h2>
-      <p>Die durch die Betreiber erstellten Inhalte und Werke unterliegen dem deutschen
+      <p>Die durch den Betreiber erstellten Inhalte und Werke unterliegen dem deutschen
      Urheberrecht. Beiträge Dritter sind als solche gekennzeichnet.</p>

      <h2>Bildnachweis</h2>
      <p>Fotos von <a href="https://www.pexels.com/" rel="noopener noreferrer" target="_blank">Pexels</a>
-      (Pexels-Lizenz: kommerzielle Nutzung frei, keine Namensnennung erforderlich) —
-      Bild-IDs 10831693, 34148341 und 6591155. Logos: Emma's Schatzkiste.</p>
+      (Pexels-Lizenz: kommerzielle Nutzung frei, keine Namensnennung erforderlich),
+      Bild-IDs 10831693 und 34148341. Ladenfoto, Porträtfoto und Logos: Emma's Schatzkiste.</p>
    </div>
  </section>
 </main>
@@ -106,8 +91,9 @@
      <div class="ftr__col">
        <h3>Laden</h3>
        <ul>
-          <li><a href="index.html">Unser Laden</a></li>
-          <li><span>Öffnungszeiten folgen</span></li>
+          <li><a href="index.html">Mein Laden</a></li>
+          <li><a href="index.html#anfahrt">Hollerstraße 2, 84056 Rottenburg</a></li>
+          <li><span>Mo–Fr 9:00–13:00 Uhr</span></li>
          <li><a href="tel:015751479212">Ware abgeben</a></li>
        </ul>
      </div>
@@ -122,14 +108,22 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-mich">Über mich</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
        </ul>
      </div>
+      <div class="ftr__col">
+        <h3>Folgen</h3>
+        <ul>
+          <li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+        </ul>
+      </div>
    </div>
-    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
  </div>
 </footer>

@@ -3,14 +3,14 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Emma's Schatzkiste — Baby- und Kindersachen aus zweiter Hand in Rottenburg a.d. Laaber</title>
-<meta name="description" content="Second-Hand für Baby und Kind in Rottenburg a.d. Laaber: preiswert, sehr gut erhalten, jedes Teil nur einmal da. Dazu unser Hilfe Verein — Hilfe. Herz. Hoffnung." />
+<title>Emma's Schatzkiste | Baby- und Kindersachen aus zweiter Hand in Rottenburg a.d. Laaber</title>
+<meta name="description" content="Second-Hand für Baby und Kind in Rottenburg a.d. Laaber: preiswert, sehr gut erhalten, jedes Teil nur einmal da. Dazu mein Hilfe Verein: Hilfe. Herz. Hoffnung." />
 <meta name="theme-color" content="#FDF4DC" />
 <link rel="icon" href="assets/logo-shop.png" />
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -18,11 +18,12 @@
 <header class="hdr">
  <div class="wrap hdr__in">
    <a class="hdr__brand" href="index.html">
-      <img src="assets/logo-shop.png" alt="" />
+      <span class="hdr__marks"><img src="assets/logo-shop.png" alt="" /><img src="assets/logo-verein.png" alt="" /></span>
      Emma's Schatzkiste
    </a>
    <nav class="nav" aria-label="Hauptnavigation">
      <a href="index.html" aria-current="page">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
      <a href="shop.html">Shop</a>
      <a href="hilfe-verein.html">Hilfe Verein</a>
      <a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -37,13 +38,13 @@
    <span class="hero__scrim" aria-hidden="true"></span>
    <div class="wrap hero__in">
      <div class="hero__col">
-        <img class="hero__logo" src="assets/logo-shop.png" alt="Emma's Schatzkiste — Baby &amp; Kind Second Hand" />
+        <img class="hero__logo" src="assets/logo-shop.png" alt="Emma's Schatzkiste, Baby &amp; Kind Second Hand" />
        <h1 class="hl">
          <span class="c-sky">Gebraucht,</span>
          <span class="c-sun">geliebt,</span>
          <span class="c-coral">weitergegeben!</span>
        </h1>
-        <p class="hero__sub">Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg.</p>
+        <p class="hero__sub">Baby- und Kindersachen aus zweiter Hand: preiswert, gut erhalten, mitten in Rottenburg.</p>
        <div class="hero__actions">
          <a class="btn btn--primary btn--l" href="hilfe-verein.html">
            Hilfe Verein ansehen
@@ -57,32 +58,50 @@
          </div>
          <div class="trust">
            <span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></span>
-            <span><b>Sehr gut erhalten</b><span>wir prüfen jedes Teil</span></span>
+            <span><b>Sehr gut erhalten</b><span>ich prüfe jedes Teil</span></span>
          </div>
        </div>
      </div>
    </div>
  </section>

-  <section class="wrap section">
+  <!-- News-Pinnwand (WEBklar Kundenportal, Funktion "News"). Beitraege schreibt Opa Martin im Portal;
+       news.js ersetzt den Leerzustand, sobald mindestens ein Beitrag haengt. -->
+  <section class="wrap section" id="neuigkeiten">
+    <div class="sh">
+      <span class="sh__chip" style="--chip-bg:var(--coral-600)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></span>
+      <h2>Neues aus dem Laden</h2>
+    </div>
+    <p class="news-lead">Was gerade reingekommen ist, wann ich zu habe und was sonst so los ist. Frisch von mir an die Pinnwand gehängt.</p>
+    <div class="news-pinnwand" data-webklar-news="q74ehq7hvnpiymqy" data-api="https://project.webklar.com" data-signature="Opa Martin">
+      <div class="news-board">
+        <div class="news-empty">
+          <span class="news-empty__pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></span>
+          <h3>Hier hängt bald was Neues.</h3>
+          <p>Neue Ware, Aktionen und Öffnungszeiten findest du ab jetzt an dieser Pinnwand. Schau bald wieder vorbei.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="wrap section" id="ueber-mich">
    <div class="sh">
      <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
      <h2>Wie alles angefangen hat</h2>
    </div>
    <div class="story">
      <div class="story__copy">
-        <p>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>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>
+        <p>Im September 2025 habe ich 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>Bei mir 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>
-      <img class="story__img" src="assets/laden-story.jpg" alt="Hände legen ein Kinderoberteil zusammen und packen es in eine Kiste" loading="lazy" width="1200" height="900" />
+      <img class="story__img" src="assets/laden-front.jpg" alt="Schaufenster von Emma's Schatzkiste mit bunten Kinderrädern, Luftballonbogen am Eingang und dem Laden-Schild" loading="lazy" width="1304" height="869" />
    </div>
  </section>

  <section class="field field--warm">
    <div class="wrap">
      <div class="portrait">
-        <!-- Foto ausstehend. Sobald da: <img src="assets/opa-martin.jpg" alt="Opa Martin"> in den Slot. -->
-        <div class="portrait__slot"><span>Bild von Opa Martin folgt</span></div>
+        <img class="portrait__img" src="assets/opa-martin.jpg" alt="Opa Martin" width="800" height="1000" loading="lazy" />
        <p class="portrait__name">Opa Martin</p>
      </div>
    </div>
@@ -97,7 +116,38 @@
      <div class="tiles">
        <div class="tile"><h3>Preise für Familien</h3><p>Second-Hand-Preise, die zum Familienbudget passen.</p></div>
        <div class="tile"><h3>Sehr gut erhalten</h3><p>Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand.</p></div>
-        <div class="tile"><h3>Wir suchen mit</h3><p>Sag uns, was du brauchst — wir helfen beim Suchen.</p></div>
+        <div class="tile"><h3>Ich suche mit</h3><p>Sag mir, was du brauchst, ich helfe beim Suchen.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="wrap section" id="anfahrt">
+    <div class="sh">
+      <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></span>
+      <h2>So findest du mich</h2>
+    </div>
+    <div class="visit">
+      <div class="visit__info">
+        <div>
+          <span class="label">Adresse</span>
+          <p class="visit__addr">Hollerstraße 2<br />84056 Rottenburg a.d. Laaber</p>
+        </div>
+        <div>
+          <span class="label">Öffnungszeiten</span>
+          <dl class="hours">
+            <dt>Montag bis Freitag</dt><dd>9:00 – 13:00 Uhr</dd>
+            <dt>Samstag, Sonntag</dt><dd>geschlossen</dd>
+          </dl>
+        </div>
+        <a class="btn btn--primary btn--l" href="https://www.google.com/maps/dir/?api=1&amp;destination=EmMas+Schatzkiste%2C+Hollerstra%C3%9Fe+2%2C+84056+Rottenburg+an+der+Laaber" target="_blank" rel="noopener noreferrer">
+          Route planen
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+        </a>
+      </div>
+      <!-- Google-Karte wird direkt angezeigt (Wunsch Kunde, 30.09.2026).
+           Hinweis dazu in der Datenschutzerklaerung, Abschnitt 4a. -->
+      <div class="map is-loaded">
+        <iframe src="https://maps.google.com/maps?q=EmMas%20Schatzkiste%2C%20Hollerstra%C3%9Fe%202%2C%2084056%20Rottenburg%20an%20der%20Laaber&amp;z=16&amp;output=embed" title="Karte: EmMas Schatzkiste, Hollerstraße 2, Rottenburg a.d. Laaber" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    </div>
  </section>
@@ -106,23 +156,23 @@
  <section class="wrap section--tight">
    <div class="sh">
      <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
-      <h2>Unser Lied</h2>
+      <h2>Mein Lied</h2>
    </div>
-    <div class="song">
+    <div class="song" data-song>
+      <audio src="assets/audio/lied-laden.mp3" preload="metadata"></audio>
      <div class="song__top">
        <h3>Lied vom Laden</h3>
-        <span class="badge">Audio folgt</span>
      </div>
      <div class="song__row">
-        <button class="iconbtn" type="button" disabled aria-label="Abspielen — Audio folgt">
-          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+        <button class="iconbtn" type="button" data-song-toggle aria-label="Lied vom Laden abspielen">
+          <svg class="i-play" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="7 4 20 12 7 20 7 4"/></svg>
+          <svg class="i-pause" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
        </button>
        <div class="song__meter">
-          <div class="song__track"></div>
-          <span class="song__time">0:00</span>
+          <input class="song__seek" type="range" min="0" max="100" step="0.1" value="0" aria-label="Position im Lied" data-song-seek />
+          <span class="song__time"><span data-song-cur>0:00</span> / <span data-song-dur>2:12</span></span>
        </div>
      </div>
-      <p class="song__note">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
    </div>
  </section>

@@ -130,8 +180,8 @@
    <div class="band">
      <div class="band__copy">
        <span class="label">Hilfe. Herz. Hoffnung.</span>
-        <h2>Unser Hilfe Verein ist im Aufbau.</h2>
-        <p>Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst.</p>
+        <h2>Mein Hilfe Verein ist im Aufbau.</h2>
+        <p>Soziale Hilfe für meine Region. Dafür brauche ich finanzielle und menschliche Hilfe, in jeder Form, die du geben kannst.</p>
        <a class="btn btn--primary btn--l" href="hilfe-verein.html#helfen">So kannst du helfen</a>
      </div>
      <img src="assets/logo-verein.png" alt="Emma's Schatzkiste Hilfe Verein" />
@@ -146,8 +196,9 @@
      <div class="ftr__col">
        <h3>Laden</h3>
        <ul>
-          <li><a href="index.html">Unser Laden</a></li>
-          <li><span>Öffnungszeiten folgen</span></li>
+          <li><a href="index.html">Mein Laden</a></li>
+          <li><a href="index.html#anfahrt">Hollerstraße 2, 84056 Rottenburg</a></li>
+          <li><span>Mo–Fr 9:00–13:00 Uhr</span></li>
          <li><a href="tel:015751479212">Ware abgeben</a></li>
        </ul>
      </div>
@@ -162,16 +213,26 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-mich">Über mich</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
        </ul>
      </div>
+      <div class="ftr__col">
+        <h3>Folgen</h3>
+        <ul>
+          <li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+        </ul>
+      </div>
    </div>
-    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
  </div>
 </footer>

+<script src="assets/player.js" defer></script>
+<script src="https://project.webklar.com/embed/news.js" defer></script>
 </body>
 </html>
@@ -3,15 +3,15 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Online-Shop im Aufbau — Emma's Schatzkiste</title>
-<meta name="description" content="Der Online-Shop von Emma's Schatzkiste ist noch im Aufbau. Bis dahin: vorbeikommen in Rottenburg a.d. Laaber oder anrufen — wir suchen mit." />
+<title>Online-Shop im Aufbau | Emma's Schatzkiste</title>
+<meta name="description" content="Der Online-Shop von Emma's Schatzkiste ist noch im Aufbau. Bis dahin: vorbeikommen in Rottenburg a.d. Laaber oder anrufen, ich suche mit." />
 <meta name="robots" content="noindex, follow" />
 <meta name="theme-color" content="#FDF4DC" />
 <link rel="icon" href="assets/logo-shop.png" />
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop parked">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -19,11 +19,12 @@
 <header class="hdr">
  <div class="wrap hdr__in">
    <a class="hdr__brand" href="index.html">
-      <img src="assets/logo-shop.png" alt="" />
+      <span class="hdr__marks"><img src="assets/logo-shop.png" alt="" /><img src="assets/logo-verein.png" alt="" /></span>
      Emma's Schatzkiste
    </a>
    <nav class="nav" aria-label="Hauptnavigation">
      <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
      <a href="shop.html" aria-current="page">Shop</a>
      <a href="hilfe-verein.html">Hilfe Verein</a>
      <a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -35,7 +36,7 @@
  <div class="parked__in">
    <span class="badge">Im Aufbau</span>
    <h1>Der Online-Shop ist noch im Aufbau.</h1>
-    <p>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>
+    <p>Ich richte ihn gerade ein. Bis dahin findest du meine Sachen im Laden in der Hollerstraße 2 in Rottenburg a.d. Laaber, Montag bis Freitag von 9 bis 13 Uhr. Oder du rufst an und ich suche mit.</p>
    <div class="hero__actions" style="justify-content:center">
      <a class="btn btn--primary btn--l" href="tel:015751479212">0157 51479212</a>
      <a class="btn btn--secondary btn--l" href="index.html">Zurück zur Startseite</a>
@@ -49,8 +50,9 @@
      <div class="ftr__col">
        <h3>Laden</h3>
        <ul>
-          <li><a href="index.html">Unser Laden</a></li>
-          <li><span>Öffnungszeiten folgen</span></li>
+          <li><a href="index.html">Mein Laden</a></li>
+          <li><a href="index.html#anfahrt">Hollerstraße 2, 84056 Rottenburg</a></li>
+          <li><span>Mo–Fr 9:00–13:00 Uhr</span></li>
          <li><a href="tel:015751479212">Ware abgeben</a></li>
        </ul>
      </div>
@@ -65,14 +67,22 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-mich">Über mich</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
        </ul>
      </div>
+      <div class="ftr__col">
+        <h3>Folgen</h3>
+        <ul>
+          <li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+          <li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
+        </ul>
+      </div>
    </div>
-    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
+    <p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
  </div>
 </footer>
Author	SHA1	Message	Date
knsoandClaude Opus 5.5	3ae1084df8	Neuigkeiten: News-Pinnwand auf der Startseite Sektion 'Neues aus dem Laden' nach dem Hero. Die Beitraege schreibt Opa Martin im WEBklar-Kundenportal (Funktion News); news.js von project.webklar.com zeigt sie als Korkwand. Ohne Beitraege bleibt der statische Leerzustand stehen. Menuepunkt 'Neuigkeiten' (am Handy ausgeblendet, 4 Punkte passen), Datenschutz Abschnitt 4c, Stand 30.09.2026. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-30 18:02:14 +00:00
knsoandClaude Opus 5.5	116b8b741e	Google-Karte auf der Startseite immer anzeigen Die Zwei-Klick-Loesung entfaellt, das Maps-iframe laedt direkt. Datenschutzerklaerung (Kurzfassung, 4a, 8) entsprechend angepasst. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-30 12:51:14 +00:00
Andrej StevanovskiandClaude Opus 5	5df349fc71	Social-Media-Links im Footer: Facebook, Instagram, TikTok Vierte Footer-Spalte "Folgen" auf allen fünf Seiten. Icon plus Text statt Icon allein; Icons erben currentColor statt Markenfarben, weil Farbe im Fließtext keine Information trägt. Nur einfache Links, keine Plugins, Feeds oder Folgen-Schaltflächen. Solche Widgets würden beim Seitenaufruf fremde Skripte laden und Cookies setzen und damit die Bannerfreiheit kippen, auf der die Datenschutzerklärung steht. Gemessen nach dem Einbau: weiterhin null Fremdanfragen, keine Cookies, kein Storage. Datenschutzerklärung um Abschnitt 4b ergänzt. Alle drei Ziele vor dem Einbau im Browser aufgerufen und bestätigt. Bei Facebook steht die dauerhafte Profiladresse mit der ID 61594794906587, nicht der gelieferte Share-Link: der ist undurchsichtig, hängt an einer Weiterleitung und kann ungültig werden. Nebenbefund behoben: die 44px-Regel für Fusszeilen-Links war wirkungslos, weil die Basisregel mit min-height:30px später in site.css steht. Gemessen waren es auf dem Handy 30px. Override ans Dateiende gehängt, betrifft alle 13 Links. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-29 22:34:56 +02:00
Andrej StevanovskiandClaude Opus 5.5	f6e98cdcbb	Alle Texte in der Ich-Form statt Wir-Form wir/uns/unser -> ich/mir/mich/mein, samt Verbformen, auf allen fünf Seiten inklusive Impressum, Datenschutz, Seitentiteln und Meta-Beschreibungen. Anker #ueber-uns -> #ueber-mich. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-27 22:19:12 +02:00
Andrej StevanovskiandClaude Opus 5.5	65460b83dc	Gedankenstriche aus allen sichtbaren Texten entfernt Je nach Satz durch Punkt, Komma, Doppelpunkt oder \| im Seitentitel ersetzt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-26 13:00:46 +02:00
Andrej StevanovskiandClaude Opus 5.5	f067556314	Ladenfoto in der Geschichte, Lieder im Player - 'Wie alles angefangen hat' zeigt das echte Schaufenster statt des Pexels-Bilds - Player spielen lied-laden.mp3 (Startseite) und lied-verein.mp3 (Verein): Play/Pause, Fortschrittsregler per Tastatur, kein Autoplay, nichts gespeichert Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-26 11:12:15 +02:00
Andrej StevanovskiandClaude Opus 5.5	7ab8a7d5a9	Anfahrt mit Karte, Adresse und Öffnungszeiten, Vereinslogo im Header - Beide Logos im Header auf allen Seiten - Adresse Hollerstraße 2 und Öffnungszeiten Mo-Fr 9-13 (Google Maps) im Footer, Kontakt, Shop-Seite und neuer Sektion 'So findest du uns' - Google-Maps-Karte als Zwei-Klick-Lösung: lädt erst nach Klick, kein Banner nötig; Datenschutzerklärung um Abschnitt 4a ergänzt - 'Im September 2025' - Impressum: roter Warnkasten, Registereintrag und interne Hinweise entfernt Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-25 17:18:27 +02:00
Andrej StevanovskiandClaude Opus 5.5	4b3c90cb8e	Decor-Muster Safari-fest und größer Die CSS-Masken-Fassung war in Safari unsichtbar. Jetzt vorgefärbte SVG-Kacheln (assets/decor/*.svg) als normales Hintergrundbild. Kachel 420 -> 600px, Handy 440px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:26:48 +02:00
Andrej StevanovskiandClaude Opus 5.5	ab41686689	Geschichte größer, Opa Martins Name mit Kontur - 'Wie alles angefangen hat': Überschrift 48px, Text 20px in ink-700 - Name unter dem Porträt in Display-Größe mit derselben Kontur wie die Hero-Headline Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:22:24 +02:00
Andrej StevanovskiandClaude Opus 5.5	9d100734a9	Decor-Muster: Spielzeug-Silhouetten auf den farbigen Flächen Umsetzung der Handoff-Komponente Decor (flat decorative layer). Selbst gezeichnete SVG-Kachel als CSS-Maske, Farbe pro Fläche eine Stufe dunkler als der Grund. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:14:52 +02:00
Andrej StevanovskiandClaude Opus 5.5	7f1525b381	Handy-Ansicht überarbeitet - Header einzeilig und sticky, aktiver Punkt als Akzentkante statt Pille - Hero: Headline zuerst, Foto danach als gerahmtes Bild - Headline so groß wie die Spalte erlaubt (45px statt 34px bei 375), Kontur dünner - Abstände und Bilder gestrafft: Startseite 4936 -> 4260px Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:09:33 +02:00
Andrej StevanovskiandClaude Opus 5.5	f1ca321d7c	Kontur auf allen drei Headline-Zeilen Sticker-Kontur wie die Wortmarke jetzt auch auf Blau und Coral, skaliert mit der Schriftgröße (.1em). Blau/Coral dadurch wieder in den helleren Markenwerten. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:05:09 +02:00
Andrej StevanovskiandClaude Opus 5.5	6bd5c12d3e	Trust-Icons repariert, Gelb heller statt braun - .trust span traf auch den Icon-Chip (selbst ein span): Icon rutschte aus dem Kreis und war dunkel. Selektor auf die Unterzeile eingegrenzt. - Gelbe Display-Schrift jetzt helles Markengelb mit dunkler Kontur wie im Logo statt sun-600/700 (las als Braun). Kleine gelbe Texte und Links auf Ink umgestellt, Icon-Chips im Verein hellgelb mit Ink-Icon. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 21:59:01 +02:00
Andrej StevanovskiandClaude Opus 5.5	2defdc9856	Opa Martins Foto, kräftigere Farben, Bugfixes - Foto von Opa Martin eingesetzt (assets/opa-martin.jpg, 4:5) - Pastelle eine Stufe kräftiger (sun-200, sky-100, coral-100), Icon-Chips im Vollton, Hero-Weißschleier auf kurze Kante gekürzt, Header deckend - Kontraste auf den neuen Gründen neu gerechnet, Display-Typo dort dunklere Stufe - E-Mail bricht auf dem Handy nach dem @ statt mitten in gmail.com - Trust-Icons im Verein-Hero waren auf gleichfarbigem Grund unsichtbar - Footer 'Über uns' springt zur Geschichte statt auf die Startseite Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 21:47:52 +02:00