Banner-Slider: Crossfade-Übergang + per-Slide-Akzentfarbe

Folienwechsel als sauberes Crossfade (best practice): Slides im selben
Grid-Feld gestapelt → konstante Höhe ohne Sprung, ein-/ausgehende Folie
blendet über (Opacity + leichtes translateY). JS steuert die Sichtbarkeit
über .is-active statt hidden; ohne JS bleibt der hidden-Fallback (erste Folie).
Reduced-Motion über den globalen Kill-Switch instant.

Neue Slide-Prop "accent" (CSS-Farbe) überschreibt das Vereins-Rot der Buttons
pro Slide; Breadcrumb-Slide nutzt #6cbbbc. Button-Text wird aus der Akzentfarbe
dunkel abgeleitet (color-mix), da helle Akzente mit Weiß zu wenig Kontrast haben.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv

public/assets/js/banner.js

@@ -42,7 +42,8 @@
     function activate(i) {
         index = (i % slides.length + slides.length) % slides.length;
         slides.forEach(function (slide, n) {
-            slide.hidden = n !== index;
+            // Sichtbarkeit per Klasse → CSS blendet über (siehe .is-enhanced).
+            slide.classList.toggle('is-active', n === index);
         });
         dots.forEach(function (dot, n) {
             var on = n === index;
@@ -110,6 +111,13 @@
         });
     }
 
+    // Crossfade aktivieren: Slides stapeln (CSS) und Sichtbarkeit per Klasse
+    // steuern. Vorher gesetzte hidden-Attribute (No-JS-Fallback) entfernen.
+    root.classList.add('is-enhanced');
+    slides.forEach(function (slide) {
+        slide.hidden = false;
+    });
+
     activate(0);
     syncPaused();
 })();