/* Carousel base */
.carousel{
  border-bottom: 1px solid var(--border);
}

.carousel{
  margin-top: var(--header-height);
}

.carousel-item{
  height: 420px; /* Wunschhöhe */
}

.carousel .carousel-inner{
  border-radius: 0;
}

.carousel .carousel-item{
  min-height: 52vh;
}

/* Deine Slides nutzen SVG-Hintergründe über .backgroundX Klassen.
   Wenn du irgendwann echte <img> Slides willst, können wir das umbauen. */

.carousel-control-prev,
.carousel-control-next{
  width: 56px;
  bottom: 0%;
  top: 55%
  transform: translateY(-50%);
  width: 56px; /* Klickfläche beibehalten */
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

/* Indicators: weg von “6 kleine Punkte in hässlich” */
.carousel-indicators{
  margin-bottom: 1rem;
}

.carousel-indicators li{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.25);
  transition: transform var(--t-fast) var(--ease);
}

.carousel-indicators li.active{
  background: rgba(255,255,255,.95);
  transform: scale(1.2);
}

/* Captions (falls du später welche nutzt) */
.carousel-caption{
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Slider background images */
.background1{
  background: url("../images/slider/001.jpg") center / cover no-repeat;
}
.background2{
  background: url("../images/slider/002.jpg") center / cover no-repeat;
}
.background3{
  background: url("../images/slider/003.jpg") center / cover no-repeat;
}
.background4{
  background: url("../images/slider/004.jpg") center / cover no-repeat;
}
.background5{
  background: url("../images/slider/005.jpg") center / cover no-repeat;
}
.background6{
  background: url("../images/slider/006.jpg") center / cover no-repeat;
}

/* bündig: keine zusätzlichen Abstände */
#myCarousel,
.carousel{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Pfeil-Container */
.carousel-control-prev,
.carousel-control-next{
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.45); /* dunkler, leicht transparent */
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
}

/* Hover: etwas stärker sichtbar */
.carousel-control-prev:hover,
.carousel-control-next:hover{
  background: rgba(0, 0, 0, 0.65);
  opacity: 1;
}

/* Pfeil-Icons selbst */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: none;               /* Bootstrap-Filter raus */
  background-size: 18px 18px; /* etwas kompakter */
}

.carousel-control-prev{
  left: 4%;
}
.carousel-control-next{
  right: 4%;
}

.carousel.is-dragging{
  user-select: none;
  cursor: grabbing;
}
.carousel{
  cursor: grab;
}

/* Desktop: wie bisher */
.carousel-item{
  height: 420px; /* oder dein aktueller Wert */
}

@media (max-width: 576px){
  .carousel-control-prev,
  .carousel-control-next{
    width: 44px;
    height: 44px;
    opacity: 0.75;
  }

  .carousel-indicators{
    bottom: .5rem;
  }
}


@media (max-width: 576px){
  .carousel-item,
  .bd-placeholder-img{
    min-height: 0 !important;
  }
}