refactor: Hero Slide 0 mit Inline-Video statt Fullscreen-Hintergrund

Video wird jetzt als Inline-Element unter der Tagline angezeigt
(volle Breite, object-fit contain, nichts abgeschnitten).
Label und Headline entfernt (redundant mit Tagline).
Beispiel-Text und CTA-Button unterhalb des Videos.

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

vorschau/css/style.css

@@ -66,7 +66,7 @@ a { color:inherit; text-decoration:none; }
 
 .hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,24,50,0.95) 0%,rgba(19,40,68,0.98) 50%,rgba(10,24,50,0.95) 100%); z-index:1; }
 
-.hero-content { position:relative; z-index:3; max-width:700px; padding:80px 24px; color:var(--white); }
+.hero-content { position:relative; z-index:2; max-width:700px; padding:80px 24px; color:var(--white); }
 .hero-title { font-size:3.4rem; font-weight:700; line-height:1.1; margin-bottom:20px; letter-spacing:-0.02em; color:var(--white); }
 .hero-claim { font-size:1.45rem; font-weight:300; line-height:1.5; margin-bottom:24px; color:rgba(255,255,255,0.9); }
 .gold { color:var(--gold); font-weight:600; }
@@ -104,10 +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 FULLSCREEN VIDEO ==================== */
+/* ==================== HERO INLINE VIDEO (Slide 0) ==================== */
-.hero-fullscreen-video { position:absolute; inset:0; z-index:2; overflow:hidden; opacity:0; transition:opacity 0.8s ease; pointer-events:none; }
+.hero-slide-has-video { display:flex; flex-direction:column; }
-.hero-fullscreen-video.visible { opacity:1; }
+.hero-slide-video-inline { width:100%; border-radius:var(--radius-lg); overflow:hidden; }
-.hero-fullscreen-video video { width:100%; height:100%; object-fit:cover; }
+.hero-slide-video-inline video { display:block; width:100%; height:auto; }
+.hero-slide-bottom { margin-top:16px; }
 
 /* ==================== 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; }

vorschau/index.html

@@ -81,11 +81,6 @@
     <!-- Hero Section -->
     <section class="hero" id="hero">
         <div class="hero-overlay"></div>
-        <div class="hero-fullscreen-video visible" id="hero-fullscreen-video">
-            <video autoplay muted loop playsinline>
-                <source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
-            </video>
-        </div>
         <div class="container hero-content">
             <div class="hero-brand">
                 <h1 class="hero-title">AegisSight Monitor</h1>
@@ -93,19 +88,20 @@
             </div>
 
             <div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
-                <!-- Slide 1: Echtzeit-Monitoring -->
+                <!-- Slide 1: Echtzeit-Monitoring (Video) -->
-                <div class="hero-slide active" data-slide="0">
+                <div class="hero-slide hero-slide-has-video active" data-slide="0">
-                    <div class="hero-slide-inner">
+                    <div class="hero-slide-video-inline">
-                        <div class="hero-slide-text-col">
+                        <video autoplay muted loop playsinline>
-                            <span class="hero-slide-label">Echtzeit-Monitoring</span>
+                            <source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
-                            <h2 class="hero-slide-headline">Lagebilder in Echtzeit. Vollautomatisch.</h2>
+                        </video>
+                    </div>
+                    <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">
                             <a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
                         </div>
                     </div>
                 </div>
-                </div>
 
                 <!-- Slide 2: Automatischer Faktencheck -->
                 <div class="hero-slide" data-slide="1">

vorschau/js/app.js

@@ -69,9 +69,7 @@
             heroSlides[heroCurrentSlide].classList.add('active');
             if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');
             heroIsTransitioning = false;
-            // Fullscreen video only on slide 0
+
-            var vid = document.getElementById('hero-fullscreen-video');
-            if (vid) vid.classList.toggle('visible', heroCurrentSlide === 0);
         }, 400);
     }