From 8d01c49707c460e3ccb54202c888b4db2180ee35 Mon Sep 17 00:00:00 2001
From: Claude Code <noreply@anthropic.com>
Date: Sun, 12 Apr 2026 15:46:53 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Video-Hintergrund=20f=C3=BCr=20Hero=20S?=
 =?UTF-8?q?lide=201=20(Echtzeit-Monitoring)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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                      | 12 ++++++++++++
 vorschau/index.html                         |  9 ++++++---
 vorschau/videos/hero-slide-1-monitoring.mp4 |  3 +++
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 vorschau/videos/hero-slide-1-monitoring.mp4

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