@charset "UTF-8";
/* CSS Document */
.swiper {
   width: 100%;
   position: relative;
min-height: 300px;
    }

    .swiper-slide {
      width: 70%;
      max-width: 800px;
      height: auto;
      flex-shrink: 0;
      overflow: hidden;
      background: #fff;
		
    }

    .swiper-slide img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
		cursor: pointer;
		
    }

    

    .swiper-button-prev {
      left: 20px;
    }

    .swiper-button-next {
      right: 20px;
    }
	  
	


  .custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

.custom-arrow .arrow-icon path {
  stroke: black /* Standardfarbe für Pfeil */
  transition: stroke 0.3s ease;
}

.custom-arrow:hover {
  background: rgba(0, 0, 0, 0.6); /* Hellerer Hintergrund bei Hover */
}

.custom-arrow:hover .arrow-icon path {
  stroke: white;; /* Farbe wechselt beim Hover */
}



.swiper-button-prev.custom-arrow {
  left: 10px;
}

.swiper-button-next.custom-arrow {
  right: 10px;
}

.custom-arrow .arrow-icon {
  width: 24px;
  height: 12px;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
content: none;
}	  
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
content:none;
}
    @media (max-width: 768px) {
      .swiper-slide {
        width: 85%;
      }
    }

@media screen and (max-width: 430px) {
  .swiper-slide {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .swiper-button-prev.custom-arrow,
  .swiper-button-next.custom-arrow {
    width: 40px;
    height: 40px;
  }

  .custom-arrow .arrow-icon {
    width: 20px;
    height: 10px;
  }


}