.slider {
    width: 55%;
    margin: 100px auto;
    left: -70px;
    margin: 50px auto 60px auto;
}

.slick-slide {
    margin: 0px clamp(5px, 1.2vw, 20px); /* Mindestabstand: 10px, Skalierung bis 2vw, Maximalabstand: 20px */   
}

.slick-prev:before,
.slick-next:before {
  color: gray;
}

.slick-prev:hover,
.slick-next:hover {
  color: white;
  opacity: 1;
}

.slick-slide {
  transition: all ease-in-out .3s;
  /*transform: scale(0.75); /* Skaliert die Bilder leicht für den Stapel-Effekt */
  opacity: .2;
}

.slick-active {
  opacity: .95;
  filter: brightness(0.6);
}

.slick-current {
  opacity: 1;
  transform: scale(1.3); /* Setzt das mittlere Bild auf volle Größe */
  filter: brightness(1);
}

.slick-dots li.slick-active button:before {
   /*content: '•';*/
   opacity: .95;
   color:white;
   font-size: 10px;
}

.slick-dots li button:before {
   color:gray;
   opacity: .55;
}


.slick-center {
opacity: 1;  /* Hebt das mittlere Bild hervor */
transform: scale(1.3); /* Setzt das mittlere Bild auf volle Größe */
z-index: 1;  /* Bringt das Bild in den Vordergrund */
}

.img_slider {
   max-height:180px;
   width: auto;
   height: auto;
   max-width: 100%; /* Verkleinert die Bilder proportional beim Ändern der Fenstergröße */
   object-fit: contain; /* Hält das Seitenverhältnis bei */
}
.img_slider:hover {
    transform: scale(1); /* Setzt das mittlere Bild auf volle Größe */

}

.a_slider:hover, .a_slider:focus, .a_slider:active {
    background-color:transparent;
    color:transparent;
    text-decoration:none;
    border-radius:2px;
    box-shadow:transparent;
}