/* Startseite – Hero/Slider */
.hero{
  position:relative;
  /* Höhe: auf Desktop 420px (deine Bildhöhe), auf kleineren Screens dynamisch */
  height:clamp(300px, 50vh, 420px);
  overflow:hidden;
  background:#e9eee9;
  border-bottom:1px solid var(--border);
}

.slider{
  position:relative;
  width:100%;
  height:100%;
}

.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .8s ease;
}
.slide.is-active{
  opacity:1;
}

/* Lesbarkeitsverlauf unten */
.hero-gradient{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:46%;
  background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0));
  pointer-events:none;
}

/* Overlay Content (falls du später Text im Hero nutzt) */
.hero-content{
  position:absolute;
  left:50%;
  top:55%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
  width:min(92%, 1000px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.hero-title{
  font-size:clamp(26px, 3.2vw, 40px);
  margin:0 0 6px 0;
}
.hero-lead{
  font-size:clamp(14px, 1.4vw, 18px);
  margin:0 0 14px 0;
}

/* Controls */
.ctrl{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  font-size:26px;
  line-height:38px;
  text-align:center;
  cursor:pointer;
  user-select:none;
}
.ctrl:hover{
  background:#fff;
}
.ctrl.prev{
  left:10px;
}
.ctrl.next{
  right:10px;
}

/* Dots */
.dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  display:flex;
  gap:8px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.15);
  cursor:pointer;
}
.dot.is-active{
  background:#fff;
}

/* CTA-Buttons im Hero übernehmen globale .btn-Klassen – hier nur Feinheiten */
.hero .btn{
  backdrop-filter:saturate(1.15);
}