From 060f6a8fe6ef757e1c15284e94965816087b3830 Mon Sep 17 00:00:00 2001
From: Dogfather <dogfather1608@gmail.com>
Date: Sat, 1 Aug 2026 13:18:40 +0200
Subject: [PATCH] =?UTF-8?q?Musik-Knopf=20bekommt=20=C3=BCberall=20den=20an?=
 =?UTF-8?q?imierten=20Polarlicht-Stil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bisher hatte der Chamäleon-Musik-Knopf nur einen einfachen, statischen
Farbverlauf - jetzt läuft er wie der Bewerben-Knopf: dunkler Grund +
wandernde, weichgezeichnete Farbwolken + durchlaufender Lichtschimmer
(wiederverwendete @keyframes btn-aurora/btn-shimmer). Die Farben kommen
weiterhin live per Canvas-Analyse aus dem Seitenbild (--music-c1/-c2).
Auf Start-/Bewerben-Seiten überschreibt der bestehende Block die Farben
weiterhin fest auf die Bewerben-Palette (höhere Selektor-Spezifität).
---
 assets/css/main.css | 53 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 3a2b026..93c2782 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1282,13 +1282,20 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
   align-items: flex-end;
   gap: 12px;
 }
-/* Musik-Knopf: "Chamäleon" — passt sich per JS (main.js,
-   musikKnopfFarbenAnpassen) an das tatsächliche Bild der jeweiligen Seite
-   an (Durchschnitts- + kräftigste Farbe daraus), statt nur 3 feste
-   Weltfarben zu kennen. --music-c1/--music-c2 werden dafür live per
-   Canvas-Analyse gesetzt; ohne Bild (oder solange JS noch lädt) fällt der
-   Knopf sauber auf die normale Weltfarbe --accent/--accent-2 zurück. */
+/* Musik-Knopf: gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste
+   (dunkler Grund + wandernde, weichgezeichnete Farbwolken + durchlaufender
+   Lichtschimmer) — aber mit den Chamäleon-Farben der jeweiligen Seite statt
+   der festen Regenbogen-Palette. "Chamäleon" heißt: main.js
+   (musikKnopfFarbenAnpassen) liest per Canvas das tatsächliche Bild der
+   Seite aus (Durchschnitts- + kräftigste Farbe daraus) und setzt
+   --music-c1/--music-c2 live. Ohne Bild (oder solange JS noch lädt) fällt
+   der Knopf sauber auf die normale Weltfarbe --accent/--accent-2 zurück.
+   Auf der Startseite und den Bewerben-Seiten überschreibt ein eigener Block
+   weiter unten die Farben fest auf die Bewerben-Palette (siehe dort). */
 .music-toggle {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
   width: 54px;
   height: 54px;
   flex: none;
@@ -1301,12 +1308,35 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
   cursor: pointer;
   color: #fff;
   text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
-  border: 1px solid color-mix(in srgb, var(--music-c1, var(--accent)) 60%, transparent);
-  background: linear-gradient(135deg, var(--music-c1, var(--accent)), var(--music-c2, var(--accent-2)));
+  background: #0b0e14;
+  border: 1px solid color-mix(in srgb, var(--music-c1, var(--accent)) 55%, transparent);
   box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
               0 0 24px color-mix(in srgb, var(--music-c1, var(--accent)) 35%, transparent);
-  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease,
-              background 1.1s ease, border-color 1.1s ease;
+  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, border-color 1.1s ease;
+}
+.music-toggle::before {
+  content: "";
+  position: absolute;
+  inset: -50%;
+  z-index: 0;
+  background:
+    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--music-c1, var(--accent)) 92%, transparent), transparent 58%),
+    radial-gradient(circle at 75% 72%, color-mix(in srgb, var(--music-c2, var(--accent-2)) 92%, transparent), transparent 58%);
+  filter: blur(7px) saturate(1.3);
+  animation: btn-aurora 10s ease-in-out infinite alternate;
+  transition: background 1.1s ease;
+}
+.music-toggle::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: 999px;
+  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
+  background-size: 240% 100%;
+  mix-blend-mode: overlay;
+  animation: btn-shimmer 5s linear infinite;
+  pointer-events: none;
 }
 .music-toggle:hover,
 .music-toggle:focus-visible {
@@ -1317,6 +1347,9 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
 }
 .music-widget.open .music-toggle { transform: rotate(12deg); }
 .music-toggle span { position: relative; z-index: 2; }
+@media (prefers-reduced-motion: reduce) {
+  .music-toggle::before, .music-toggle::after { animation: none; }
+}
 
 /* Auf der Startseite UND den Bewerben-Seiten bekommt der Musik-Knopf
    dieselbe Polarlicht-Farbe wie der "Bewerben"-Knopf oben in der Leiste