diff --git a/vorschau/css/style.css b/vorschau/css/style.css
index 7945060..6750eb7 100644
--- a/vorschau/css/style.css
+++ b/vorschau/css/style.css
@@ -104,6 +104,18 @@ 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 VIDEO SLIDE ==================== */
+.hero-slide-video { position:relative; }
+.hero-slide-video-bg { position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-lg); z-index:0; }
+.hero-slide-video-bg video { width:100%; height:100%; object-fit:cover; }
+.hero-slide-video .hero-slide-inner { position:relative; z-index:1; }
+.hero-slide-video .hero-slide-text-col { padding:32px 0; }
+.hero-slide-video .hero-slide-headline { text-shadow:0 2px 12px rgba(0,0,0,0.5); }
+.hero-slide-video .hero-slide-label { box-shadow:0 2px 8px rgba(0,0,0,0.3); }
+.hero-slide-video .hero-slide-example { text-shadow:0 1px 4px rgba(0,0,0,0.4); }
+.hero-slide-video .btn { box-shadow:0 2px 8px rgba(0,0,0,0.3); }
+@media(max-width:768px) { .hero-slide-video-bg video { object-position:center; } }
+
 /* ==================== 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; }
 .btn-primary { background:var(--gold); color:var(--navy); border-color:var(--gold); }
diff --git a/vorschau/index.html b/vorschau/index.html
index c043a69..0120a18 100644
--- a/vorschau/index.html
+++ b/vorschau/index.html
@@ -89,18 +89,21 @@
 
             <div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
                 <!-- Slide 1: Echtzeit-Monitoring -->
-                <div class="hero-slide active" data-slide="0">
+                <div class="hero-slide hero-slide-video active" data-slide="0">
+                    <div class="hero-slide-video-bg">
+                        <video autoplay muted loop playsinline>
+                            <source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
+                        </video>
+                    </div>
                     <div class="hero-slide-inner">
                         <div class="hero-slide-text-col">
                             <span class="hero-slide-label">Echtzeit-Monitoring</span>
                             <h2 class="hero-slide-headline">Lagebilder in Echtzeit. Vollautomatisch.</h2>
-                            <p class="hero-slide-text">Der AegisSight Monitor überwacht hunderte Quellen rund um die Uhr und erstellt strukturierte Lagebilder, ohne manuellen Aufwand. Neue Entwicklungen werden in Minuten erfasst, analysiert und eingeordnet. Sie entscheiden, was überwacht wird, der Monitor liefert das Lagebild.</p>
                             <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">
                                 <a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
                             </div>
                         </div>
-                        <div class="hero-slide-media-col"></div>
                     </div>
                 </div>
 
diff --git a/vorschau/videos/hero-slide-1-monitoring.mp4 b/vorschau/videos/hero-slide-1-monitoring.mp4
new file mode 100644
index 0000000..4d0e315
--- /dev/null
+++ b/vorschau/videos/hero-slide-1-monitoring.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b201efe93c9a7c551fcf0c9f911761f67a48d17c9e244fe2517e26078fc3552f
+size 2098908