Spotify jetzt als kleiner Knopf auf jeder Seite statt grosser Bloecke

- Alle grossen Musik-Abschnitte entfernt (Start, Links, HasiDog, VanVan)
- Neuer schwebender Musik-Knopf unten rechts, wie im Analyse-Tool:
  Klick oeffnet ein Feld mit den Playern von Hasidog und Van-Van
- Zentral in main.js gerendert, erscheint dadurch automatisch auf ALLEN
  Seiten, ohne jede Datei einzeln anzufassen
- Player werden erst beim ersten Oeffnen geladen, damit keine Seite
  unnoetig zwei fremde Einbettungen mitzieht
- Schliessen per Knopf oder Escape, kleiner auf dem Handy, im Druck aus

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

assets/css/main.css

@@ -950,52 +950,107 @@ footer.site-footer {
 }
 
 /* ==========================================================================
-   SPOTIFY-PLAYER — Musik direkt auf der Seite hören, ohne wegzuklicken
+   MUSIK-KNOPF — kleiner schwebender Knopf unten rechts, auf jeder Seite
+
+   Klick öffnet ein Feld mit den Spotify-Playern von Hasidog und Van-Van.
+   Bewusst schwebend (position:fixed) statt als eigener Seitenabschnitt:
+   so ist die Musik überall mit einem Klick erreichbar, nimmt aber nirgends
+   Platz weg. Die Player werden erst beim ersten Öffnen geladen.
    ========================================================================== */
-.music-grid {
+.music-widget {
-  display: grid;
+  position: fixed;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  right: 22px;
-  gap: 1.4rem;
+  bottom: 22px;
-  max-width: 900px;
+  z-index: 120;
-  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
 }
-.music-player {
+.music-toggle {
-  background: var(--card-bg);
+  width: 54px;
-  border: 1px solid var(--border);
+  height: 54px;
-  border-radius: var(--radius);
+  flex: none;
-  padding: 1.2rem;
+  border-radius: 999px;
-  box-shadow: var(--shadow);
+  font-size: 1.45rem;
-  transition: border-color .3s ease;
+  line-height: 1;
-}
-.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;
+  cursor: pointer;
+  color: var(--accent-contrast);
+  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
+              0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
+  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
 }
-.music-player .music-sub {
+.music-toggle:hover,
-  margin: 0 0 .9rem;
+.music-toggle:focus-visible {
-  font-size: .82rem;
+  transform: translateY(-2px) scale(1.05);
+  filter: brightness(1.12);
+  box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
+              0 0 34px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+.music-widget.open .music-toggle { transform: rotate(12deg); }
+
+.music-panel {
+  width: min(330px, calc(100vw - 44px));
+  max-height: min(74vh, 640px);
+  overflow-y: auto;
+  padding: 1rem 1.1rem 1.2rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
+  animation: music-panel-in .22s ease-out;
+}
+.music-panel[hidden] { display: none; }
+@keyframes music-panel-in {
+  from { opacity: 0; transform: translateY(10px) scale(.97); }
+  to   { opacity: 1; transform: none; }
+}
+.music-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .6rem;
+}
+.music-panel-head strong { font-size: .95rem; }
+.music-close {
+  background: none;
+  border: 0;
   color: var(--text-muted);
-  text-align: center;
+  font-size: 1rem;
+  line-height: 1;
+  padding: .2rem .3rem;
+  cursor: pointer;
+  border-radius: 6px;
 }
-/* Spotify liefert einen eigenen, abgerundeten Rahmen mit — deshalb hier
+.music-close:hover { color: var(--accent); }
-   nur Höhe/Breite setzen und nicht doppelt umrahmen. */
+.music-artist-label {
-.music-player iframe {
+  margin: .9rem 0 .4rem;
+  font-size: .7rem;
+  font-weight: 800;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+/* Spotify bringt seinen eigenen abgerundeten Rahmen mit — hier nur Größe setzen. */
+.music-panel iframe {
   display: block;
   width: 100%;
   border: 0;
   border-radius: 12px;
 }
-.music-note {
+@media (max-width: 620px) {
-  text-align: center;
+  .music-widget { right: 14px; bottom: 14px; }
-  font-size: .8rem;
+  .music-toggle { width: 48px; height: 48px; font-size: 1.25rem; }
-  color: var(--text-muted);
+}
-  margin: 1.2rem auto 0;
+@media print { .music-widget { display: none !important; } }
-  max-width: 56ch;
+@media (prefers-reduced-motion: reduce) {
+  .music-panel { animation: none; }
+  .music-toggle { transition: none; }
 }
 
 /* ---------- Live-Status-Punkt ---------- */

assets/js/main.js

@@ -190,9 +190,80 @@
     document.body.prepend(layer);
   }
 
+  /* ===================================================================
+     Musik-Knopf (unten rechts, auf jeder Seite)
+
+     Kleiner schwebender Knopf, der ein Feld mit den Spotify-Playern von
+     Hasidog und Van-Van aufklappt. Genauso gelöst wie im Analyse-Tool.
+
+     Zwei bewusste Entscheidungen:
+     1. Das Feld hängt direkt am <body>, nicht in einem Abschnitt — so
+        kann kein Neuaufbau der Seite den laufenden Player unterbrechen.
+     2. Die Player werden ERST beim ersten Öffnen geladen (src wird dann
+        gesetzt). Sonst würde jede Seite zwei fremde Einbettungen laden,
+        auch wenn niemand Musik hören will.
+     =================================================================== */
+  const SPOTIFY_ARTISTS = [
+    { name: "Hasidog", id: "2INiE1VVJGUQdEURsltuJU" },
+    { name: "Van-Van", id: "4J9PcKZBkh6V8dVY3CGliw" },
+  ];
+
+  function renderMusicWidget() {
+    if (document.getElementById("music-widget")) return;
+
+    const widget = document.createElement("div");
+    widget.className = "music-widget";
+    widget.id = "music-widget";
+    widget.innerHTML = `
+      <div class="music-panel" id="music-panel" hidden>
+        <div class="music-panel-head">
+          <strong>Musik von Team Dogi 🎵</strong>
+          <button class="music-close" id="music-close" type="button" aria-label="Musik-Feld schließen">✕</button>
+        </div>
+        <p class="small muted" style="margin:.2rem 0 .6rem;">Läuft weiter, solange du auf dieser Seite bleibst. 🩵</p>
+        ${SPOTIFY_ARTISTS.map(
+          (a) => `
+        <p class="music-artist-label">${a.name}</p>
+        <iframe data-src="https://open.spotify.com/embed/artist/${a.id}?utm_source=generator&amp;theme=0"
+                height="152" loading="lazy" title="${a.name} auf Spotify anhören"
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                allowfullscreen></iframe>`
+        ).join("")}
+      </div>
+      <button class="music-toggle" id="music-toggle" type="button"
+              aria-expanded="false" aria-controls="music-panel"
+              title="Musik von Hasidog &amp; Van-Van">🎵</button>`;
+    document.body.appendChild(widget);
+
+    const panel = document.getElementById("music-panel");
+    const toggle = document.getElementById("music-toggle");
+    let geladen = false;
+
+    function oeffnen(auf) {
+      panel.hidden = !auf;
+      toggle.setAttribute("aria-expanded", String(auf));
+      widget.classList.toggle("open", auf);
+      if (auf && !geladen) {
+        // Player erst jetzt wirklich laden
+        panel.querySelectorAll("iframe[data-src]").forEach((f) => {
+          f.src = f.dataset.src;
+          f.removeAttribute("data-src");
+        });
+        geladen = true;
+      }
+    }
+
+    toggle.addEventListener("click", () => oeffnen(panel.hidden));
+    document.getElementById("music-close").addEventListener("click", () => oeffnen(false));
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && !panel.hidden) oeffnen(false);
+    });
+  }
+
   document.addEventListener("DOMContentLoaded", () => {
     renderHeader();
     renderFooter();
     renderFog();
+    renderMusicWidget();
   });
 })();

hasidog.html

@@ -91,25 +91,6 @@
     </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

@@ -228,40 +228,6 @@
   </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">

links.html

@@ -57,36 +57,6 @@
     </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">

vanvan.html

@@ -62,25 +62,6 @@
     </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>