diff --git a/vorschau/css/style.css b/vorschau/css/style.css index d5235b4..491bf12 100644 --- a/vorschau/css/style.css +++ b/vorschau/css/style.css @@ -75,8 +75,8 @@ a { color:inherit; text-decoration:none; } .hero-tagline { font-size:1.2rem; font-weight:300; color:rgba(255,255,255,0.9); margin-top:12px; } /* ==================== HERO SLIDER ==================== */ -/* Slider beginnt unter der Navbar, damit das Video nicht dahinter verschwindet */ -.hero-slider { position:absolute; top:var(--nav-height); left:0; right:0; bottom:0; z-index:1; } +/* Slider: unter der Navbar beginnen, oberhalb der Dots-Zone enden (60px Reserve fuer Dots) */ +.hero-slider { position:absolute; top:var(--nav-height); left:0; right:0; bottom:60px; z-index:1; } .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.6s ease; pointer-events:none; } .hero-slide.active { opacity:1; pointer-events:auto; } .hero-slide.exiting { opacity:0; transition:opacity 0.4s ease; } @@ -94,8 +94,8 @@ a { color:inherit; text-decoration:none; } .hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; } .hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; } -/* Slider-Navigation: Dots zentriert unten, Pfeile seitlich auf Hero-Mitte. Immer sichtbar. */ -.hero-slider-nav { position:absolute; left:0; right:0; bottom:75px; display:flex; justify-content:center; padding:0 24px; pointer-events:none; z-index:5; } +/* Slider-Navigation: Dots zentriert ganz unten im Chevron-Band, ausserhalb des Video-Bereichs. */ +.hero-slider-nav { position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; padding:0 24px; pointer-events:none; z-index:5; } .hero-slider-dots { display:flex; gap:12px; pointer-events:auto; } .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); } @@ -312,7 +312,7 @@ a { color:inherit; text-decoration:none; } .hero-slide-example { font-size:0.95rem; margin-bottom:18px; } .hero-slide-cta { flex-direction:column; } .hero-slide-cta .btn { width:100%; } - .hero-slider-nav { bottom:65px; } + .hero-slider-nav { bottom:18px; } .hero-slider-arrows { display:none; } .section { padding:48px 0; } .section-title { font-size:1.6rem; }