fix: Video läuft durchgehend, kein Neustart bei Slide-Wechsel

Video aus dem Slide-Div herausgelöst und als eigenständiges Element
zwischen hero-brand und hero-slider platziert. Dadurch wird es nie
via visibility:hidden versteckt und der Browser resettet es nicht.
Ein-/Ausblenden per opacity + max-height Transition.

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

vorschau/css/style.css

@@ -104,11 +104,11 @@ a { color:inherit; text-decoration:none; }
 .hero-arrow { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); background:transparent; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
 .hero-arrow:hover { border-color:var(--gold); color:var(--gold); }
 
-/* ==================== HERO INLINE VIDEO (Slide 0) ==================== */
+/* ==================== HERO VIDEO CONTAINER ==================== */
-.hero-slide-has-video { display:flex; flex-direction:column; }
+.hero-video-container { width:100%; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px; transition:opacity 0.6s ease, max-height 0.6s ease; max-height:700px; }
-.hero-slide-video-inline { width:100%; border-radius:var(--radius-lg); overflow:hidden; }
+.hero-video-container video { display:block; width:100%; height:auto; }
-.hero-slide-video-inline video { display:block; width:100%; height:auto; }
+.hero-video-container.hidden { opacity:0; max-height:0; margin-bottom:0; pointer-events:none; }
-.hero-slide-bottom { margin-top:16px; }
+.hero-slide-bottom { }
 
 /* ==================== BUTTONS ==================== */
 .btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 28px; border-radius:var(--radius); font-family:inherit; font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.2s; border:2px solid transparent; text-decoration:none; }

vorschau/index.html

@@ -87,14 +87,15 @@
                 <p class="hero-tagline">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, <span class="gold">vollautomatisch.</span></p>
             </div>
 
-            <div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
+            <div class="hero-video-container" id="hero-video-container">
-                <!-- Slide 1: Echtzeit-Monitoring (Video) -->
-                <div class="hero-slide hero-slide-has-video active" data-slide="0">
-                    <div class="hero-slide-video-inline">
                 <video autoplay muted loop playsinline>
                     <source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
                 </video>
             </div>
+
+            <div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
+                <!-- Slide 1: Echtzeit-Monitoring (Video) -->
+                <div class="hero-slide active" data-slide="0">
                     <div class="hero-slide-bottom">
                         <p class="hero-slide-example">Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.</p>
                         <div class="hero-slide-cta">

vorschau/js/app.js

@@ -63,6 +63,9 @@
         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);
+
         setTimeout(function () {
             heroSlides[oldIndex].classList.remove('exiting');
             heroCurrentSlide = index;