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>

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{