Vorschau: Hero-Section von Stockvideos auf Feature-Slides umgebaut

Ersetzt die 3 rotierenden Stockvideos durch 5 inhaltsgetriebene Slides,
die die Kernfeatures des Monitors bewerben (Echtzeit-Monitoring,
Faktencheck, KI-Recherche, Globale Abdeckung, Flexibilitaet).
Jeder Slide mit Feature-Text, konkretem Beispiel-Beleg und CTAs.
Grafik-Spalte pro Slide vorbereitet fuer spaetere Screenshots.

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

vorschau/css/style.css

@@ -63,10 +63,8 @@ a { color:inherit; text-decoration:none; }
 /* ==================== HERO ==================== */
 .hero { position:relative; min-height:88vh; display:flex; align-items:center; padding-top:var(--nav-height); overflow:hidden; background:var(--navy); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px)); margin-bottom:-60px; z-index:1; }
 
-.hero-video-container { position:absolute; inset:0; z-index:0; }
+
-.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 3s ease; }
+.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-video.active { opacity:1; }
-.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,24,50,0.82) 0%,rgba(10,24,50,0.65) 50%,rgba(10,24,50,0.75) 100%); z-index:1; }
 
 .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); }
@@ -75,6 +73,68 @@ a { color:inherit; text-decoration:none; }
 .hero-sub { font-size:0.95rem; color:rgba(255,255,255,0.55); line-height:1.7; margin-bottom:36px; }
 .hero-cta { display:flex; gap:16px; flex-wrap:wrap; }
 
+
+/* ==================== HERO SLIDER ==================== */
+.hero-brand { margin-bottom:28px; }
+.hero-tagline { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.6); margin-top:8px; }
+
+.hero-slider { position:relative; min-height:280px; }
+.hero-slide { position:absolute; top:0; left:0; width:100%; opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; pointer-events:none; visibility:hidden; }
+.hero-slide.active { position:relative; opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
+.hero-slide.exiting { opacity:0; transform:translateY(-12px); transition:opacity 0.4s ease, transform 0.4s ease; }
+
+.hero-slide-inner { display:flex; gap:40px; align-items:flex-start; }
+.hero-slide-text-col { flex:1; min-width:0; }
+.hero-slide-media-col { flex:0 0 360px; display:none; }
+.hero-slide-media-col:not(:empty) { display:block; }
+.hero-slide-media-col img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
+
+.hero-slide-label { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:var(--gold); color:var(--navy); margin-bottom:14px; }
+.hero-slide-headline { font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:16px; color:var(--white); letter-spacing:-0.01em; }
+.hero-slide-text { font-size:1.05rem; font-weight:300; line-height:1.65; color:rgba(255,255,255,0.8); margin-bottom:12px; max-width:640px; }
+.hero-slide-example { font-size:0.88rem; font-weight:400; line-height:1.5; color:var(--gold); opacity:0.85; margin-bottom:24px; max-width:640px; padding-left:14px; border-left:2px solid rgba(200,168,81,0.4); }
+.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; }
+.hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; }
+
+.hero-slider-nav { display:flex; align-items:center; gap:20px; margin-top:32px; }
+.hero-slider-dots { display:flex; gap:10px; }
+.hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
+.hero-dot.active { background:var(--gold); }
+.hero-slider-arrows { display:flex; gap:8px; margin-left:auto; }
+.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 SLIDER ==================== */
+.hero-brand { margin-bottom:28px; }
+.hero-tagline { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.6); margin-top:8px; }
+
+.hero-slider { position:relative; min-height:280px; }
+.hero-slide { position:absolute; top:0; left:0; width:100%; opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; pointer-events:none; visibility:hidden; }
+.hero-slide.active { position:relative; opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
+.hero-slide.exiting { opacity:0; transform:translateY(-12px); transition:opacity 0.4s ease, transform 0.4s ease; }
+
+.hero-slide-inner { display:flex; gap:40px; align-items:flex-start; }
+.hero-slide-text-col { flex:1; min-width:0; }
+.hero-slide-media-col { flex:0 0 360px; display:none; }
+.hero-slide-media-col:not(:empty) { display:block; }
+.hero-slide-media-col img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
+
+.hero-slide-label { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:var(--gold); color:var(--navy); margin-bottom:14px; }
+.hero-slide-headline { font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:16px; color:var(--white); letter-spacing:-0.01em; }
+.hero-slide-text { font-size:1.05rem; font-weight:300; line-height:1.65; color:rgba(255,255,255,0.8); margin-bottom:12px; max-width:640px; }
+.hero-slide-example { font-size:0.88rem; font-weight:400; line-height:1.5; color:var(--gold); opacity:0.85; margin-bottom:24px; max-width:640px; padding-left:14px; border-left:2px solid rgba(200,168,81,0.4); }
+.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; }
+.hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; }
+
+.hero-slider-nav { display:flex; align-items:center; gap:20px; margin-top:32px; }
+.hero-slider-dots { display:flex; gap:10px; }
+.hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
+.hero-dot.active { background:var(--gold); }
+.hero-slider-arrows { display:flex; gap:8px; margin-left:auto; }
+.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); }
+
 /* ==================== 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); }
@@ -264,7 +324,7 @@ a { color:inherit; text-decoration:none; }
     .hero-title { font-size:2.8rem; }
     .section { padding:64px 0; }
     .workflow-connector { width:40px; }
-    
+    .hero-slide-media-col { flex:0 0 280px; }
 }
 
 @media(max-width:768px) {
@@ -282,6 +342,14 @@ a { color:inherit; text-decoration:none; }
     .workflow-step { max-width:100%; padding:16px 0; }
     .hero-cta { flex-direction:column; }
     .hero-cta .btn { width:100%; }
+    .hero-slider { min-height:320px; }
+    .hero-slide-headline { font-size:1.5rem; }
+    .hero-slide-text { font-size:0.95rem; }
+    .hero-slide-inner { flex-direction:column; gap:20px; }
+    .hero-slide-media-col { flex:none; width:100%; }
+    .hero-slider-arrows { display:none; }
+    .hero-slide-cta { flex-direction:column; }
+    .hero-slide-cta .btn { width:100%; }
     .footer-content { flex-direction:column; text-align:center; gap:16px; }
     
     #map-container { height:300px; }

vorschau/index.html

@@ -78,25 +78,112 @@
 
     <!-- Hero Section -->
     <section class="hero" id="hero">
-        <div class="hero-video-container">
-            <video class="hero-video active" autoplay muted loop playsinline>
-                <source src="/assets/videos/hero-data-flow.mp4" type="video/mp4">
-            </video>
-            <video class="hero-video" autoplay muted loop playsinline>
-                <source src="/assets/videos/hero-network-viz.mp4" type="video/mp4">
-            </video>
-            <video class="hero-video" autoplay muted loop playsinline>
-                <source src="/assets/videos/hero-code-abstract.mp4" type="video/mp4">
-            </video>
-        </div>
         <div class="hero-overlay"></div>
         <div class="container hero-content">
-            <h1 class="hero-title">AegisSight Monitor</h1>
+            <div class="hero-brand">
-            <p class="hero-claim">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen,<br><span class="gold">vollautomatisch.</span></p>
+                <h1 class="hero-title">AegisSight Monitor</h1>
-            <p class="hero-sub">Aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen.</p>
+                <p class="hero-tagline">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, <span class="gold">vollautomatisch.</span></p>
-            <div class="hero-cta">
+            </div>
-                <a href="#demos" class="btn btn-primary">Live-Demo ansehen</a>
+
-                <button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
+            <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-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="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
+                                <button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
+                            </div>
+                        </div>
+                        <div class="hero-slide-media-col"></div>
+                    </div>
+                </div>
+
+                <!-- Slide 2: Automatischer Faktencheck -->
+                <div class="hero-slide" data-slide="1">
+                    <div class="hero-slide-inner">
+                        <div class="hero-slide-text-col">
+                            <span class="hero-slide-label">Faktencheck</span>
+                            <h2 class="hero-slide-headline">Jede Behauptung geprüft. Automatisch.</h2>
+                            <p class="hero-slide-text">Kernaussagen werden gegen unabhängige Quellen verifiziert und mit einem Verifikationsstatus versehen. Widersprechen sich Quellen, wird das transparent dargestellt. Wenn neue Belege auftauchen, aktualisiert sich die Bewertung. Keine blinden Flecken, systematische Verifikation.</p>
+                            <p class="hero-slide-example">Im Live-Lagebild zum Iran-Konflikt wurden bisher über 1.600 Faktenchecks automatisch durchgeführt.</p>
+                            <div class="hero-slide-cta">
+                                <a href="/lagen/iran-konflikt/" class="btn btn-primary">Faktencheck ansehen</a>
+                                <button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
+                            </div>
+                        </div>
+                        <div class="hero-slide-media-col"></div>
+                    </div>
+                </div>
+
+                <!-- Slide 3: KI-Recherche -->
+                <div class="hero-slide" data-slide="2">
+                    <div class="hero-slide-inner">
+                        <div class="hero-slide-text-col">
+                            <span class="hero-slide-label">KI-Recherche</span>
+                            <h2 class="hero-slide-headline">Umfassende Recherche in Minuten statt Tagen.</h2>
+                            <p class="hero-slide-text">Definieren Sie ein Thema, der Monitor recherchiert, strukturiert und belegt vollautomatisch. Quellenbasierte Analyse mit Faktenprüfung, kein Copy-Paste aus Suchmaschinen. Das Ergebnis: ein vollständiges Dossier mit Quellenbelegen und Faktenchecks.</p>
+                            <p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
+                            <div class="hero-slide-cta">
+                                <a href="#demos" class="btn btn-primary">Recherche-Beispiel ansehen</a>
+                                <button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
+                            </div>
+                        </div>
+                        <div class="hero-slide-media-col"></div>
+                    </div>
+                </div>
+
+                <!-- Slide 4: Globale Quellenabdeckung -->
+                <div class="hero-slide" data-slide="3">
+                    <div class="hero-slide-inner">
+                        <div class="hero-slide-text-col">
+                            <span class="hero-slide-label">Globale Abdeckung</span>
+                            <h2 class="hero-slide-headline">Dutzende Sprachen. Hunderte Quellen. Null blinde Flecken.</h2>
+                            <p class="hero-slide-text">Arabisch, Persisch, Hebräisch, Russisch, Chinesisch: Der Monitor verarbeitet Quellen, die den meisten Analystenteams sprachlich verschlossen bleiben. Automatische Übersetzung, Kontextanalyse und Einordnung. Globale Abdeckung ohne globale Personalkosten.</p>
+                            <p class="hero-slide-example">Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.</p>
+                            <div class="hero-slide-cta">
+                                <a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
+                                <button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
+                            </div>
+                        </div>
+                        <div class="hero-slide-media-col"></div>
+                    </div>
+                </div>
+
+                <!-- Slide 5: Flexibel einsetzbar -->
+                <div class="hero-slide" data-slide="4">
+                    <div class="hero-slide-inner">
+                        <div class="hero-slide-text-col">
+                            <span class="hero-slide-label">Flexibel einsetzbar</span>
+                            <h2 class="hero-slide-headline">Von der Grosslage bis zum Einzelthema.</h2>
+                            <p class="hero-slide-text">Geopolitische Konflikte, Unternehmensrisiken, regionale Krisen oder Einzelpersonen: Der AegisSight Monitor skaliert mit Ihrem Bedarf. Definieren Sie Ihr Thema, wählen Sie Ihre Quellen, der Rest läuft automatisch. Jede Lage erhält ihr eigenes Lagebild mit Quellenbelegen, Karte und Faktencheck.</p>
+                            <p class="hero-slide-example">Weitere Live-Beispiele folgen in Kürze.</p>
+                            <div class="hero-slide-cta">
+                                <a href="#" class="btn btn-outline-light btn-placeholder" aria-disabled="true">Demnächst verfügbar</a>
+                                <button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
+                            </div>
+                        </div>
+                        <div class="hero-slide-media-col"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="hero-slider-nav">
+                <div class="hero-slider-dots">
+                    <button class="hero-dot active" data-slide="0" aria-label="Echtzeit-Monitoring"></button>
+                    <button class="hero-dot" data-slide="1" aria-label="Faktencheck"></button>
+                    <button class="hero-dot" data-slide="2" aria-label="KI-Recherche"></button>
+                    <button class="hero-dot" data-slide="3" aria-label="Globale Abdeckung"></button>
+                    <button class="hero-dot" data-slide="4" aria-label="Flexibel einsetzbar"></button>
+                </div>
+                <div class="hero-slider-arrows">
+                    <button class="hero-arrow hero-arrow-prev" aria-label="Vorheriger Slide">&#8592;</button>
+                    <button class="hero-arrow hero-arrow-next" aria-label="Nächster Slide">&#8594;</button>
+                </div>
             </div>
         </div>
     </section>

vorschau/js/app.js

@@ -41,35 +41,86 @@
         });
     });
 
-    /* ==================== HERO VIDEOS ==================== */
+    /* ==================== HERO SLIDER ==================== */
-    var videos = document.querySelectorAll('.hero-video');
+    var heroSlides = document.querySelectorAll('.hero-slide');
-    var currentVideo = 0;
+    var heroDots = document.querySelectorAll('.hero-dot');
-    var rotationTimer;
+    var heroCurrentSlide = 0;
+    var heroTimer = null;
+    var HERO_INTERVAL = 8000;
+    var heroIsTransitioning = false;
 
-    function switchVideo() {
+    function heroGoTo(index) {
-        videos[currentVideo].classList.remove('active');
+        if (heroIsTransitioning || index === heroCurrentSlide || !heroSlides.length) return;
-        currentVideo = (currentVideo + 1) % videos.length;
+        heroIsTransitioning = true;
-        var next = videos[currentVideo];
+
-        next.currentTime = 0;
+        var oldIndex = heroCurrentSlide;
-        next.play().catch(function () {});
+        heroSlides[oldIndex].classList.add('exiting');
-        next.classList.add('active');
+        heroSlides[oldIndex].classList.remove('active');
+        if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active');
+
+        setTimeout(function () {
+            heroSlides[oldIndex].classList.remove('exiting');
+            heroCurrentSlide = index;
+            heroSlides[heroCurrentSlide].classList.add('active');
+            if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');
+            heroIsTransitioning = false;
+        }, 400);
     }
 
-    function startRotation() {
+    function heroNext() {
-        rotationTimer = setInterval(switchVideo, 12000);
+        heroGoTo((heroCurrentSlide + 1) % heroSlides.length);
+    }
+
+    function heroPrev() {
+        heroGoTo((heroCurrentSlide - 1 + heroSlides.length) % heroSlides.length);
+    }
+
+    function heroStartAutoplay() {
+        heroStopAutoplay();
+        heroTimer = setInterval(heroNext, HERO_INTERVAL);
+    }
+
+    function heroStopAutoplay() {
+        if (heroTimer) { clearInterval(heroTimer); heroTimer = null; }
+    }
+
+    heroDots.forEach(function (dot, i) {
+        dot.addEventListener('click', function () {
+            heroGoTo(i);
+            heroStartAutoplay();
+        });
+    });
+
+    var heroPrevBtn = document.querySelector('.hero-arrow-prev');
+    var heroNextBtn = document.querySelector('.hero-arrow-next');
+    if (heroPrevBtn) heroPrevBtn.addEventListener('click', function () { heroPrev(); heroStartAutoplay(); });
+    if (heroNextBtn) heroNextBtn.addEventListener('click', function () { heroNext(); heroStartAutoplay(); });
+
+    var heroSlider = document.querySelector('.hero-slider');
+    if (heroSlider) {
+        heroSlider.addEventListener('mouseenter', heroStopAutoplay);
+        heroSlider.addEventListener('mouseleave', heroStartAutoplay);
+
+        var heroTouchStartX = 0;
+        heroSlider.addEventListener('touchstart', function (e) {
+            heroTouchStartX = e.changedTouches[0].screenX;
+            heroStopAutoplay();
+        }, { passive: true });
+        heroSlider.addEventListener('touchend', function (e) {
+            var diff = e.changedTouches[0].screenX - heroTouchStartX;
+            if (Math.abs(diff) > 50) {
+                if (diff < 0) heroNext(); else heroPrev();
+            }
+            heroStartAutoplay();
+        }, { passive: true });
     }
 
     document.addEventListener('visibilitychange', function () {
-        if (document.hidden) {
+        if (document.hidden) { heroStopAutoplay(); }
-            clearInterval(rotationTimer);
+        else { heroStartAutoplay(); }
-            videos.forEach(function (v) { v.pause(); });
-        } else {
-            videos.forEach(function (v) { if (v.classList.contains('active')) v.play().catch(function () {}); });
-            startRotation();
-        }
     });
 
-    if (videos.length > 1) startRotation();
+    if (heroSlides.length > 1) heroStartAutoplay();
 
     /* ==================== MAP STATE ==================== */
     var mapInstance = null;