refactor: Hero-Slider auf opacity-Stacking, Video pro Slide

- visibility:hidden aus Slide-States entfernt (brach Video-Playback)
- #hero-video-container + Sonderfall-Logik für Slide 0 entfernt
- Video in Slide 0 inline verschoben, generische Restart-Logik
- Videos starten bei jedem Slide-Wechsel bei 0:00 (bewusste
  Verhaltensänderung gegenüber 9df30bc)
- Autoplay-Intervall auf 15s vereinheitlicht (kein Video/Text-Sonderfall)
- Hover-Pause des Sliders entfernt (stoppte Autoplay unerwartet)
- Neue Videos in weiteren Slides erfordern jetzt nur HTML-Block + src

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vorschau/js/app.js

@@ -46,12 +46,20 @@
     var heroDots = document.querySelectorAll('.hero-dot');
     var heroCurrentSlide = 0;
     var heroTimer = null;
-    var HERO_INTERVAL = 8000;
-    var HERO_INTERVAL_VIDEO = 15000;
+    var HERO_INTERVAL = 15000;
     var heroIsTransitioning = false;
 
-    function heroGetInterval() {
-        return heroCurrentSlide === 0 ? HERO_INTERVAL_VIDEO : HERO_INTERVAL;
+    function heroPlaySlideVideo(slide) {
+        var v = slide && slide.querySelector('video');
+        if (!v) return;
+        try { v.currentTime = 0; } catch (err) { /* ignore */ }
+        var p = v.play();
+        if (p && typeof p.catch === 'function') p.catch(function () { /* autoplay blocked */ });
+    }
+
+    function heroPauseSlideVideo(slide) {
+        var v = slide && slide.querySelector('video');
+        if (v) v.pause();
     }
 
     function heroGoTo(index) {
@@ -63,23 +71,19 @@
         heroSlides[oldIndex].classList.remove('active');
         if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active');
 
-        var vc = document.getElementById('hero-video-container');
-        if (vc) {
-            vc.classList.toggle('hidden', index !== 0);
-            var vid = vc.querySelector('video');
-            if (vid) {
-                if (index === 0) vid.play();
-                else vid.pause();
-            }
-        }
+        // Altes Video sofort pausieren, damit es während des Fade-Outs nicht mehr läuft
+        heroPauseSlideVideo(heroSlides[oldIndex]);
 
         setTimeout(function () {
             heroSlides[oldIndex].classList.remove('exiting');
             heroCurrentSlide = index;
             heroSlides[heroCurrentSlide].classList.add('active');
             if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');
-            heroIsTransitioning = false;
 
+            // Neues Video von Anfang starten, sobald der Slide sichtbar wird
+            heroPlaySlideVideo(heroSlides[heroCurrentSlide]);
+
+            heroIsTransitioning = false;
         }, 400);
     }
 
@@ -95,8 +99,8 @@
         heroStopAutoplay();
         heroTimer = setTimeout(function tick() {
             heroNext();
-            heroTimer = setTimeout(tick, heroGetInterval());
-        }, heroGetInterval());
+            heroTimer = setTimeout(tick, HERO_INTERVAL);
+        }, HERO_INTERVAL);
     }
 
     function heroStopAutoplay() {
@@ -117,9 +121,6 @@
 
     var heroSlider = document.querySelector('.hero-slider');
     if (heroSlider) {
-        heroSlider.addEventListener('mouseenter', heroStopAutoplay);
-        heroSlider.addEventListener('mouseleave', heroStartAutoplay);
-
         var heroTouchStartX = 0;
         heroSlider.addEventListener('touchstart', function (e) {
             heroTouchStartX = e.changedTouches[0].screenX;
@@ -141,6 +142,9 @@
 
     if (heroSlides.length > 1) heroStartAutoplay();
 
+    // Initialer Video-Start für Slide 0 (ersetzt das weggefallene autoplay-Attribut)
+    if (heroSlides.length) heroPlaySlideVideo(heroSlides[0]);
+
     /* ==================== MAP STATE ==================== */
     var mapInstance = null;
     var markerLayer = null;