diff --git a/vorschau/css/style.css b/vorschau/css/style.css
index d7b8753..50956c6 100644
--- a/vorschau/css/style.css
+++ b/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-slide-has-video { display:flex; flex-direction:column; }
-.hero-slide-video-inline { width:100%; border-radius:var(--radius-lg); overflow:hidden; }
-.hero-slide-video-inline video { display:block; width:100%; height:auto; }
-.hero-slide-bottom { margin-top:16px; }
+/* ==================== HERO VIDEO CONTAINER ==================== */
+.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-video-container 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 { }
 
 /* ==================== 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; }
diff --git a/vorschau/index.html b/vorschau/index.html
index ab315d8..87da8e4 100644
--- a/vorschau/index.html
+++ b/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-video-container" id="hero-video-container">
+                <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 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-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">
diff --git a/vorschau/js/app.js b/vorschau/js/app.js
index b570a46..14c5b4b 100644
--- a/vorschau/js/app.js
+++ b/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;