refactor: Hero-Slider auf opacity-Stacking, Video pro Slide

- visibility:hidden aus Slide-States entfernt (brach Video-Playback)
- #hero-video-container + Sonderfall-Logik für Slide 0 entfernt
- Video in Slide 0 inline verschoben, generische Restart-Logik
- Videos starten bei jedem Slide-Wechsel bei 0:00 (bewusste
  Verhaltensänderung gegenüber 9df30bc)
- Autoplay-Intervall auf 15s vereinheitlicht (kein Video/Text-Sonderfall)
- Hover-Pause des Sliders entfernt (stoppte Autoplay unerwartet)
- Neue Videos in weiteren Slides erfordern jetzt nur HTML-Block + src

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-12 19:34:52 +02:00
Ursprung 80ce22b692
Commit 7dd6cb991d
3 geänderte Dateien mit 33 neuen und 31 gelöschten Zeilen

Datei anzeigen

@@ -79,8 +79,8 @@ a { color:inherit; text-decoration:none; }
.hero-tagline { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.6); margin-top:8px; }
.hero-slider { position:relative; }
.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 { 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; }
.hero-slide.active { position:relative; opacity:1; transform:translateY(0); pointer-events:auto; }
.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; }
@@ -104,10 +104,9 @@ 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 CONTAINER ==================== */
.hero-video-container { width:100%; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px; transition:opacity 0.6s ease, max-height 0.6s ease; max-height:700px; }
.hero-video-container video { display:block; width:100%; height:auto; }
.hero-video-container.hidden { opacity:0; max-height:0; margin-bottom:0; pointer-events:none; }
/* ==================== HERO SLIDE VIDEO ==================== */
.hero-slide-video { width:100%; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px; }
.hero-slide-video video { display:block; width:100%; height:auto; }
.hero-slide-bottom { }
/* ==================== BUTTONS ==================== */