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