Vorschau Hero: Dots weiter unten, eigener Raum unter dem Video

- Slider endet jetzt bei bottom:60px statt bottom:0 -> Video-Bereich
  beginnt unter der Navbar und endet oberhalb einer reservierten Zone
  fuer die Dots, damit sie keine Video-Schrift verdecken
- Dots auf bottom:22px (Desktop) / 18px (Mobile) statt 75/65px

Rollback-Punkt: fa17c1f

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 */
+/* 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:0; z-index:1; }
+.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. */
+/* Slider-Navigation: Dots zentriert ganz unten im Chevron-Band, ausserhalb des Video-Bereichs. */
-.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; }
+.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; }