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>

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>