Spotify-Player zum Anhoeren + fehlende Bilder eingebaut

Musik:
- Echte Spotify-Player statt nur Links — Hasidog und Van-Van lassen sich
  jetzt direkt auf der Seite abspielen, ohne wegzuklicken
- Startseite und Links-Seite: beide Kuenstler; HasiDog-Seite: Hasidog;
  VanVan-Seite: Van-Van
- Eigene Player-Optik (music-grid / music-player), lazy geladen

Bilder aus dokumente-Bilder ergaenzt:
- Spicy-Media-Logo ersetzt den Platzhalter auf der Manager-Seite
- Michi: Team-Dogi-Karte + Gesichts-Avatar
- Patrick (Scout): Portrait-Avatar

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/css/main.css

@@ -815,6 +815,55 @@ footer.site-footer {
   .char-card, .char-card img { animation: none; transition: none; }
 }
 
+/* ==========================================================================
+   SPOTIFY-PLAYER — Musik direkt auf der Seite hören, ohne wegzuklicken
+   ========================================================================== */
+.music-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.4rem;
+  max-width: 900px;
+  margin: 0 auto;
+}
+.music-player {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.2rem;
+  box-shadow: var(--shadow);
+  transition: border-color .3s ease;
+}
+.music-player:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
+.music-player h3 {
+  margin: 0 0 .2rem;
+  font-size: 1.05rem;
+  display: flex;
+  align-items: center;
+  gap: .45rem;
+  justify-content: center;
+}
+.music-player .music-sub {
+  margin: 0 0 .9rem;
+  font-size: .82rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+/* Spotify liefert einen eigenen, abgerundeten Rahmen mit — deshalb hier
+   nur Höhe/Breite setzen und nicht doppelt umrahmen. */
+.music-player iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-radius: 12px;
+}
+.music-note {
+  text-align: center;
+  font-size: .8rem;
+  color: var(--text-muted);
+  margin: 1.2rem auto 0;
+  max-width: 56ch;
+}
+
 /* ---------- Live-Status-Punkt ---------- */
 .live-dot {
   display: inline-block;

assets/js/data-modis.js

@@ -76,7 +76,8 @@ const MODIS = [
     name: "Michi",
     role: "Kommentare auf den Clip-Accounts",
     rank: 5,
-    photo: "",
+    photo: "assets/img/card-michi.jpg",
+    avatar: "assets/img/avatar-michi.jpg",
     quote: "",
     social: {},
     page: "",

assets/js/data-scouts.js

@@ -20,7 +20,8 @@ const SCOUTS = [
   {
     name: "Patrick",
     role: "Scout — Team Dogi",
-    photo: "",
+    photo: "assets/img/avatar-patrick.jpg",
+    avatar: "assets/img/avatar-patrick.jpg",
     quote: "", // TODO: Zitat von Patrick einholen
     social: {},
     status: "aktiv",

hasidog.html

@@ -92,6 +92,26 @@
       </div>
     </div>
   </section>
+
+  <!-- ================= MUSIK ================= -->
+  <section class="section-tight">
+    <div class="container text-center">
+      <span class="eyebrow">🎵 Musik</span>
+      <h2>Hasidog auf Spotify</h2>
+      <p class="lead" style="max-width:50ch;margin:0 auto 2rem;">Direkt hier reinhören — kein Wegklicken nötig.</p>
+      <div class="music-grid" style="max-width:520px;">
+        <div class="music-player">
+          <h3>🎵 Hasidog</h3>
+          <p class="music-sub">Dogfathers eigenes Musikprojekt</p>
+          <iframe
+            src="https://open.spotify.com/embed/artist/2INiE1VVJGUQdEURsltuJU?utm_source=generator&amp;theme=0"
+            height="352" loading="lazy" title="Hasidog auf Spotify anhören"
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+      </div>
+    </div>
+  </section>
 </main>
 
 <div id="site-footer"></div>

index.html

@@ -227,6 +227,42 @@
     </div>
   </section>
 
+
+  <!-- ================= MUSIK: DIREKT AUF DER SEITE HÖREN ================= -->
+  <section class="section-tight">
+    <div class="container text-center">
+      <span class="eyebrow">🎵 Musik</span>
+      <h2>Direkt hier reinhören</h2>
+      <p class="lead" style="max-width:54ch;margin:0 auto 2rem;">
+        Die Songs von Hasidog und Van-Van — einfach abspielen, ohne die Seite zu verlassen.
+      </p>
+      <div class="music-grid">
+        <div class="music-player">
+          <h3>🎵 Hasidog</h3>
+          <p class="music-sub">Dogfathers eigenes Musikprojekt</p>
+          <iframe
+            src="https://open.spotify.com/embed/artist/2INiE1VVJGUQdEURsltuJU?utm_source=generator&amp;theme=0"
+            height="352" loading="lazy" title="Hasidog auf Spotify anhören"
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+        <div class="music-player">
+          <h3>🎵 Van-Van</h3>
+          <p class="music-sub">Musik von VanVan, der rechten Hand</p>
+          <iframe
+            src="https://open.spotify.com/embed/artist/4J9PcKZBkh6V8dVY3CGliw?utm_source=generator&amp;theme=0"
+            height="352" loading="lazy" title="Van-Van auf Spotify anhören"
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+      </div>
+      <p class="music-note">
+        Wiedergabe läuft über Spotify. Mit einem kostenlosen Konto hörst du Ausschnitte,
+        mit Premium die vollen Songs. 🩵
+      </p>
+    </div>
+  </section>
+
   <!-- ================= FINALER CTA ================= -->
   <section class="hero">
     <div class="container text-center">

links.html

@@ -41,14 +41,6 @@
           <h3>🎥 TikTok</h3>
           <p>@dogfather0804</p>
         </a>
-        <a class="card text-center" href="https://open.spotify.com/intl-de/artist/2INiE1VVJGUQdEURsltuJU" target="_blank" rel="noopener">
-          <h3>🎵 Spotify — Hasidog</h3>
-          <p>Zum Artist-Profil</p>
-        </a>
-        <a class="card text-center" href="https://open.spotify.com/intl-de/artist/4J9PcKZBkh6V8dVY3CGliw" target="_blank" rel="noopener">
-          <h3>🎵 Spotify — Van-Van</h3>
-          <p>Zum Artist-Profil</p>
-        </a>
         <a class="card text-center" href="#" target="_blank" rel="noopener">
           <h3>💬 Discord</h3>
           <p class="small muted">Folgt in Kürze</p>
@@ -65,6 +57,37 @@
     </div>
   </section>
 
+  <!-- ================= MUSIK: DIREKT HIER HÖREN ================= -->
+  <section class="section-tight">
+    <div class="container text-center">
+      <span class="eyebrow">🎵 Musik</span>
+      <h2>Direkt hier reinhören</h2>
+      <p class="lead" style="max-width:54ch;margin:0 auto 2rem;">
+        Hasidog und Van-Van auf Spotify — abspielen, ohne die Seite zu verlassen.
+      </p>
+      <div class="music-grid">
+        <div class="music-player">
+          <h3>🎵 Hasidog</h3>
+          <p class="music-sub">Dogfathers eigenes Musikprojekt</p>
+          <iframe
+            src="https://open.spotify.com/embed/artist/2INiE1VVJGUQdEURsltuJU?utm_source=generator&amp;theme=0"
+            height="352" loading="lazy" title="Hasidog auf Spotify anhören"
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+        <div class="music-player">
+          <h3>🎵 Van-Van</h3>
+          <p class="music-sub">Musik von VanVan, der rechten Hand</p>
+          <iframe
+            src="https://open.spotify.com/embed/artist/4J9PcKZBkh6V8dVY3CGliw?utm_source=generator&amp;theme=0"
+            height="352" loading="lazy" title="Van-Van auf Spotify anhören"
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section>
     <div class="container">
       <h2 class="text-center">QR-Codes</h2>

manager.html

@@ -46,8 +46,9 @@
         <p>Scouts arbeiten in einem 50/50 Gewinn-Sharing-Modell mit Dogfather zusammen.</p>
       <!-- TODO: TODO / zu bestätigen: Genaue Kommissions-/Gewinnbeteiligungs-Details sollen so öffentlich stehen? Bitte mit Dogi final absegnen, bevor die Seite live geht. -->
       </div>
-      <div class="img-placeholder" style="aspect-ratio:4/3;">
+      <div class="collage-photo" style="aspect-ratio:4/3;border-radius:var(--radius);background:#000;">
-        Spicy Media Logo<br><span class="small">folgt in Kürze</span>
+        <img src="assets/img/spicy-media-logo.jpg" alt="Spicy Media Agency Logo"
+             style="width:100%;height:100%;object-fit:contain;padding:1.2rem;" />
       </div>
     </div>
   </section>

vanvan.html

@@ -61,6 +61,26 @@
       </div>
     </div>
   </section>
+
+  <!-- ================= MUSIK ================= -->
+  <section class="section-tight">
+    <div class="container text-center">
+      <span class="eyebrow">🎵 Musik</span>
+      <h2>Van-Van auf Spotify</h2>
+      <p class="lead" style="max-width:50ch;margin:0 auto 2rem;">VanVans eigene Songs — direkt hier abspielbar.</p>
+      <div class="music-grid" style="max-width:520px;">
+        <div class="music-player">
+          <h3>🎵 Van-Van</h3>
+          <p class="music-sub">Musik von VanVan</p>
+          <iframe
+            src="https://open.spotify.com/embed/artist/4J9PcKZBkh6V8dVY3CGliw?utm_source=generator&amp;theme=0"
+            height="352" loading="lazy" title="Van-Van auf Spotify anhören"
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+      </div>
+    </div>
+  </section>
 </main>
 
 <div id="site-footer"></div>