feat: Video-Hintergrund für Hero Slide 1 (Echtzeit-Monitoring)

- Komprimiertes Video (2.1 MB, 1920x1080, 15s loop) als Hintergrund
- Beschreibungstext entfernt (wird durch Video repräsentiert)
- Label, Headline, Beispiel-Zitat und CTA bleiben sichtbar
- Text-Shadows für Lesbarkeit über Video

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

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); }

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>