Vorschau Hero: Video vollstaendig sichtbar + Endcard mit CTA am Ende

Umgebaut zu Video-getriebenem Slider mit Endcard-Phase:
- Video object-fit: contain (komplett sichtbar, Navy-Letterbox-Raender)
- Waehrend Video-Laufzeit: keine Overlays (Video spricht fuer sich)
- ended-Event triggert .ended/.endcard-Klassen -> 3s Endcard
- Endcard zeigt Titel + Tagline (zentriert) + Beispieltext + CTA
- Slide 2 ohne CTA: Endcard zeigt nur Titel + Tagline
- loop-Attribut aus allen 5 Videos entfernt (sonst feuert ended nicht)
- Festes 15s-Autoplay entfernt; Slide-Wechsel ist video-getrieben
- Fallback-Timer 25s falls ended-Event nicht kommt (Ladefehler etc.)
- Manuelle Navigation (Dots/Pfeile/Swipe) cleant alle Timer sofort
- Tab-Wechsel pausiert/resumt korrekt im jeweiligen Zustand

Rollback-Punkt: c693114
Dieser Commit ist enthalten in:
Claude Code
2026-04-21 01:28:42 +02:00
Ursprung c6931142e7
Commit c85be47307
3 geänderte Dateien mit 104 neuen und 71 gelöschten Zeilen

Datei anzeigen

@@ -91,7 +91,7 @@
<!-- Slide 1: Echtzeit-Monitoring (Video) -->
<div class="hero-slide active" data-slide="0">
<div class="hero-slide-video">
<video muted loop playsinline preload="auto">
<video muted playsinline preload="auto">
<source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
</video>
</div>
@@ -106,7 +106,7 @@
<!-- Slide 2: Automatischer Faktencheck (Video) -->
<div class="hero-slide" data-slide="1">
<div class="hero-slide-video">
<video muted loop playsinline preload="metadata">
<video muted playsinline preload="metadata">
<source src="videos/hero-slide-2-monitoring.mp4?v=3" type="video/mp4">
</video>
</div>
@@ -115,7 +115,7 @@
<!-- Slide 3: KI-Recherche (Video) -->
<div class="hero-slide" data-slide="2">
<div class="hero-slide-video">
<video muted loop playsinline preload="metadata">
<video muted playsinline preload="metadata">
<source src="videos/hero-slide-3-monitoring.mp4?v=2" type="video/mp4">
</video>
</div>
@@ -130,7 +130,7 @@
<!-- Slide 4: Globale Quellenabdeckung (Video) -->
<div class="hero-slide" data-slide="3">
<div class="hero-slide-video">
<video muted loop playsinline preload="metadata">
<video muted playsinline preload="metadata">
<source src="videos/hero-slide-4-monitoring.mp4" type="video/mp4">
</video>
</div>
@@ -145,7 +145,7 @@
<!-- Slide 5: Flexibel einsetzbar (Video) -->
<div class="hero-slide" data-slide="4">
<div class="hero-slide-video">
<video muted loop playsinline preload="metadata">
<video muted playsinline preload="metadata">
<source src="videos/hero-slide-5-monitoring.mp4?v=2" type="video/mp4">
</video>
</div>