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>

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>