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>

DESIGN.md

@@ -214,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
@@ -276,6 +275,19 @@ 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,

README.md

@@ -47,11 +47,7 @@ cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173
 ### Vom Kunden ausstehend
 
 3. ~~**Foto von Opa Martin.**~~ Erledigt 2026-09-24 (`assets/opa-martin.jpg`).
-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).
+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

assets/player.js

@@ -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();
+    });
+  });
+})();

assets/site.css

@@ -396,7 +396,7 @@ a:hover{color:var(--sky-600)}
 .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);
 }
@@ -492,15 +492,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{

datenschutz.html

@@ -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=007c8ae9" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>

hilfe-verein.html

@@ -10,7 +10,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=007c8ae9" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-verein">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -71,21 +71,21 @@
       <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>
     </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>
 
@@ -186,5 +186,6 @@
   </div>
 </footer>
 
+<script src="assets/player.js" defer></script>
 </body>
 </html>

impressum.html

@@ -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=007c8ae9" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -80,7 +80,7 @@
       <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. Porträtfoto und Logos: Emma's Schatzkiste.</p>
+      Bild-IDs 10831693 und 34148341. Ladenfoto, Porträtfoto und Logos: Emma's Schatzkiste.</p>
     </div>
   </section>
 </main>

index.html

@@ -10,7 +10,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=007c8ae9" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -74,7 +74,7 @@
         <p>Im September 2025 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>
       </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>
 
@@ -143,21 +143,21 @@
       <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>
     </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>
 
@@ -224,5 +224,6 @@
   </div>
 </footer>
 
+<script src="assets/player.js" defer></script>
 </body>
 </html>

shop.html

@@ -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=007c8ae9" />
+<link rel="stylesheet" href="assets/site.css?v=ca3d584c" />
 </head>
 <body class="page-shop parked">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>