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>
Dieser Commit ist enthalten in:
Claude Code
2026-04-12 15:49:02 +02:00
Ursprung 8d01c49707
Commit f039357a7f
3 geänderte Dateien mit 13 neuen und 17 gelöschten Zeilen

Datei anzeigen

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