Alle Buttons im Polarlicht-Stil des Bewerben-Knopfs, Musik-Knopf auch auf Startseite auffällig

- .btn (primary/secondary/outline) bekommt jetzt sitewide denselben STIL wie
  der "Bewerben"-Knopf oben (wandernde, weichgezeichnete Farbwolken +
  Lichtschimmer) - aber mit den Farben der jeweiligen Seite/Karte
  (--accent/--accent-2) statt der festen Regenbogen-Palette. Läuft über
  negative z-index-Ebenen, Button-Text bleibt automatisch scharf obenauf,
  keine HTML-Änderung in den ~30 Seiten nötig.
- Musik-Knopf zeigt den festen Polarlicht-Look (wie der Bewerben-Knopf)
  jetzt auch auf der Startseite, nicht mehr nur auf den Bewerben-Seiten -
  auf allen anderen Seiten bleibt er das Chamäleon (passt sich dem
  jeweiligen Seitenbild an)
- main.js: SPA-Seitenwechsel übernimmt jetzt die komplette body-Klassenliste
  der neuen Seite (vorher wurde nur "mit-hintergrund" einzeln synchronisiert -
  Sonderklassen wie "bewerben-seite"/"start-seite" blieben beim Klick-Wechsel
  fälschlich hängen bzw. fehlten)

assets/css/main.css

@@ -292,8 +292,19 @@ header.site-header {
   .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
 }
 
-/* ---------- Buttons ---------- */
+/* ---------- Buttons ----------
+   Gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste (wandernde,
+   weichgezeichnete Farbwolken + durchlaufender Lichtschimmer) — aber NICHT
+   dieselbe feste Regenbogen-Palette, sondern die Farben der jeweiligen
+   Seite/Karte (--accent/--accent-2, die überall schon pro Theme bzw. pro
+   Karte gesetzt sind). Läuft komplett über negative z-index-Ebenen, dadurch
+   bleibt der Button-Text automatisch scharf obenauf, ganz ohne <span>-
+   Wrapper in jeder einzelnen HTML-Datei (siehe Stacking-Reihenfolge: eigene
+   Box-Hintergrund → negative z-index-Kinder → normaler Inline-Text). */
 .btn {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
   gap: .5rem;
@@ -303,9 +314,47 @@ header.site-header {
   font-size: .95rem;
   border: 1px solid transparent;
   cursor: pointer;
-  transition: transform .15s ease, opacity .15s ease;
+  transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease;
+}
+.btn::before {
+  content: "";
+  position: absolute;
+  inset: -70%;
+  z-index: -2;
+  background:
+    radial-gradient(circle at 24% 28%, color-mix(in srgb, var(--accent) 92%, transparent), transparent 58%),
+    radial-gradient(circle at 76% 74%, color-mix(in srgb, var(--accent-2) 92%, transparent), transparent 58%);
+  filter: blur(9px) saturate(1.3);
+  opacity: .55;
+  animation: btn-aurora 11s ease-in-out infinite alternate;
+}
+.btn::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 49%, transparent 63%);
+  background-size: 240% 100%;
+  mix-blend-mode: overlay;
+  animation: btn-shimmer 5.5s linear infinite;
+  pointer-events: none;
+}
+@keyframes btn-aurora {
+  from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
+  to   { transform: translate(3%, 3%) rotate(6deg) scale(1.08); }
+}
+@keyframes btn-shimmer {
+  from { background-position: 130% 0; }
+  to   { background-position: -30% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn::before, .btn::after { animation: none; }
+}
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, .28),
+              0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
 }
-.btn:hover { transform: translateY(-2px); }
 .btn-primary { background: var(--accent); color: var(--accent-contrast); }
 .btn-secondary { background: var(--accent-2); color: #fff; }
 .btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
@@ -1269,10 +1318,12 @@ 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; }
 
-/* Auf den Bewerben-Seiten bekommt der Musik-Knopf dieselbe Polarlicht-
+/* Auf der Startseite UND den Bewerben-Seiten bekommt der Musik-Knopf
-   Farbe wie der "Bewerben"-Knopf oben in der Leiste — beide markieren
+   dieselbe Polarlicht-Farbe wie der "Bewerben"-Knopf oben in der Leiste
-   hier bewusst denselben "Treffpunkt beider Welten"-Charakter der Seite. */
+   (statt der Chamäleon-Farben vom Seitenbild) — das sind die beiden
-body.bewerben-seite .music-toggle {
+   Stellen, an denen bewusst "alle Welten auf einmal" gezeigt werden. */
+body.bewerben-seite .music-toggle,
+body.start-seite .music-toggle {
   position: relative;
   isolation: isolate;
   overflow: hidden;
@@ -1280,7 +1331,8 @@ body.bewerben-seite .music-toggle {
   border-color: rgba(255, 255, 255, .18);
   color: #fff;
 }
-body.bewerben-seite .music-toggle::before {
+body.bewerben-seite .music-toggle::before,
+body.start-seite .music-toggle::before {
   content: "";
   position: absolute;
   inset: -40%;
@@ -1293,7 +1345,8 @@ body.bewerben-seite .music-toggle::before {
   filter: blur(6px) saturate(1.35);
   animation: nav-cta-aurora 9s ease-in-out infinite alternate;
 }
-body.bewerben-seite .music-toggle::after {
+body.bewerben-seite .music-toggle::after,
+body.start-seite .music-toggle::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -1306,14 +1359,18 @@ body.bewerben-seite .music-toggle::after {
   pointer-events: none;
 }
 body.bewerben-seite .music-toggle:hover,
-body.bewerben-seite .music-toggle:focus-visible {
+body.bewerben-seite .music-toggle:focus-visible,
+body.start-seite .music-toggle:hover,
+body.start-seite .music-toggle:focus-visible {
   box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
               0 0 22px rgba(143, 217, 234, .3),
               0 0 22px rgba(217, 74, 92, .28);
 }
 @media (prefers-reduced-motion: reduce) {
   body.bewerben-seite .music-toggle::before,
-  body.bewerben-seite .music-toggle::after { animation: none; }
+  body.bewerben-seite .music-toggle::after,
+  body.start-seite .music-toggle::before,
+  body.start-seite .music-toggle::after { animation: none; }
 }
 
 .music-panel {

assets/js/main.js

@@ -484,10 +484,14 @@
 
     alterInhalt.replaceWith(neuerInhalt);
 
-    // Seitenmotiv mitnehmen: Die Bildvariablen hängen am <body>, damit das
+    // Seitenmotiv + Sonderklassen mitnehmen: Die Bildvariablen hängen am
-    // Motiv die ganze Seite trägt — beim Wechsel also mit übernehmen.
+    // <body>, damit das Motiv die ganze Seite trägt — beim Wechsel also mit
+    // übernehmen. Bewusst die GANZE Klassenliste kopieren (nicht nur
+    // "mit-hintergrund" einzeln pflegen), sonst bleiben Sonderklassen wie
+    // "bewerben-seite" oder "start-seite" nach einem Klick-Wechsel fälschlich
+    // stehen bzw. fehlen auf der neuen Seite.
     const bodyNeu = dok.body;
-    document.body.classList.toggle("mit-hintergrund", bodyNeu.classList.contains("mit-hintergrund"));
+    document.body.className = bodyNeu.className;
     ["--page-bg", "--page-bg-mobile"].forEach((v) => {
       const wert = bodyNeu.style.getPropertyValue(v);
       if (wert) document.body.style.setProperty(v, wert);

index.html

@@ -22,7 +22,7 @@
 <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
 <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
 </head>
-<body>
+<body class="start-seite">
 <div id="site-header"></div>
 
 <main>