Vorschau: Hero-Section von Stockvideos auf Feature-Slides umgebaut

Ersetzt die 3 rotierenden Stockvideos durch 5 inhaltsgetriebene Slides,
die die Kernfeatures des Monitors bewerben (Echtzeit-Monitoring,
Faktencheck, KI-Recherche, Globale Abdeckung, Flexibilitaet).
Jeder Slide mit Feature-Text, konkretem Beispiel-Beleg und CTAs.
Grafik-Spalte pro Slide vorbereitet fuer spaetere Screenshots.

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

vorschau/js/app.js

@@ -41,35 +41,86 @@
         });
     });
 
-    /* ==================== HERO VIDEOS ==================== */
-    var videos = document.querySelectorAll('.hero-video');
-    var currentVideo = 0;
-    var rotationTimer;
+    /* ==================== HERO SLIDER ==================== */
+    var heroSlides = document.querySelectorAll('.hero-slide');
+    var heroDots = document.querySelectorAll('.hero-dot');
+    var heroCurrentSlide = 0;
+    var heroTimer = null;
+    var HERO_INTERVAL = 8000;
+    var heroIsTransitioning = false;
 
-    function switchVideo() {
-        videos[currentVideo].classList.remove('active');
-        currentVideo = (currentVideo + 1) % videos.length;
-        var next = videos[currentVideo];
-        next.currentTime = 0;
-        next.play().catch(function () {});
-        next.classList.add('active');
+    function heroGoTo(index) {
+        if (heroIsTransitioning || index === heroCurrentSlide || !heroSlides.length) return;
+        heroIsTransitioning = true;
+
+        var oldIndex = heroCurrentSlide;
+        heroSlides[oldIndex].classList.add('exiting');
+        heroSlides[oldIndex].classList.remove('active');
+        if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active');
+
+        setTimeout(function () {
+            heroSlides[oldIndex].classList.remove('exiting');
+            heroCurrentSlide = index;
+            heroSlides[heroCurrentSlide].classList.add('active');
+            if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');
+            heroIsTransitioning = false;
+        }, 400);
     }
 
-    function startRotation() {
-        rotationTimer = setInterval(switchVideo, 12000);
+    function heroNext() {
+        heroGoTo((heroCurrentSlide + 1) % heroSlides.length);
+    }
+
+    function heroPrev() {
+        heroGoTo((heroCurrentSlide - 1 + heroSlides.length) % heroSlides.length);
+    }
+
+    function heroStartAutoplay() {
+        heroStopAutoplay();
+        heroTimer = setInterval(heroNext, HERO_INTERVAL);
+    }
+
+    function heroStopAutoplay() {
+        if (heroTimer) { clearInterval(heroTimer); heroTimer = null; }
+    }
+
+    heroDots.forEach(function (dot, i) {
+        dot.addEventListener('click', function () {
+            heroGoTo(i);
+            heroStartAutoplay();
+        });
+    });
+
+    var heroPrevBtn = document.querySelector('.hero-arrow-prev');
+    var heroNextBtn = document.querySelector('.hero-arrow-next');
+    if (heroPrevBtn) heroPrevBtn.addEventListener('click', function () { heroPrev(); heroStartAutoplay(); });
+    if (heroNextBtn) heroNextBtn.addEventListener('click', function () { heroNext(); heroStartAutoplay(); });
+
+    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;
+            heroStopAutoplay();
+        }, { passive: true });
+        heroSlider.addEventListener('touchend', function (e) {
+            var diff = e.changedTouches[0].screenX - heroTouchStartX;
+            if (Math.abs(diff) > 50) {
+                if (diff < 0) heroNext(); else heroPrev();
+            }
+            heroStartAutoplay();
+        }, { passive: true });
     }
 
     document.addEventListener('visibilitychange', function () {
-        if (document.hidden) {
-            clearInterval(rotationTimer);
-            videos.forEach(function (v) { v.pause(); });
-        } else {
-            videos.forEach(function (v) { if (v.classList.contains('active')) v.play().catch(function () {}); });
-            startRotation();
-        }
+        if (document.hidden) { heroStopAutoplay(); }
+        else { heroStartAutoplay(); }
     });
 
-    if (videos.length > 1) startRotation();
+    if (heroSlides.length > 1) heroStartAutoplay();
 
     /* ==================== MAP STATE ==================== */
     var mapInstance = null;