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/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{