fix: Hero-Video als Vollbild über gesamte Hero-Section

Video füllt jetzt die komplette Hero-Section (88vh) statt nur den
700px-breiten Slide-Container. Ein-/Ausblenden per CSS-Transition
(0.8s) gekoppelt an den aktiven Slide (nur bei Slide 0 sichtbar).

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

vorschau/css/style.css

@@ -104,17 +104,10 @@ 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 FULLSCREEN VIDEO ==================== */
-.hero-slide-video { position:relative; }
+.hero-fullscreen-video { position:absolute; inset:0; z-index:1; overflow:hidden; opacity:0; transition:opacity 0.8s ease; pointer-events:none; }
-.hero-slide-video-bg { position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-lg); z-index:0; }
+.hero-fullscreen-video.visible { opacity:1; }
-.hero-slide-video-bg video { width:100%; height:100%; object-fit:cover; }
+.hero-fullscreen-video 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; }

vorschau/index.html

@@ -81,6 +81,11 @@
     <!-- 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>
@@ -89,12 +94,7 @@
 
             <div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
                 <!-- Slide 1: Echtzeit-Monitoring -->
-                <div class="hero-slide hero-slide-video active" data-slide="0">
+                <div class="hero-slide 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>

vorschau/js/app.js

@@ -64,6 +64,9 @@
             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);
     }