/* Allgemeine Stile für Bildgalerien */
.image-gallery,
.image-gallery-duplicated,
.image-gallery-produkt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thumbnail-container,
.thumbnail-container-duplicated,
.thumbnail-container-produkt {
  display: flex;
}

.thumbnail,
.thumbnail-duplicated,
.thumbnail-produkt {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  margin-top: 5px;
  cursor: pointer;
}

.main-image-container,
.main-image-container-duplicated,
.main-image-container-produkt {
  margin-top: 10px;
  overflow: hidden; /* Verhindert Überlauf */
}

/* Setze eine feste Höhe für den Container */
.main-image,
.main-image-duplicated,
.main-image-produkt,
.slidbanner-slide {
  width: 100%; /* Bilder nutzen die volle Breite des Containers */
  height: 300px; /* Feste Höhe für die Bilder */
  object-fit: cover; /* Füllt den Container aus und behält die Proportionen bei */
}

* {
  box-sizing: border-box;
}

.slideshow-container {
  width: 100%; /* Nutzt 100% der übergeordneten Container-Breite */
  max-width: 100%; /* Begrenze die Breite, damit sie nicht über den Container hinausgeht */
  overflow: hidden; /* Verhindert das Überlaufen des Inhalts */
  margin: 0 auto; /* Zentriere den Container horizontal, falls nötig */
  padding: 0;
}

/* Bilder füllen den Container vollständig aus */
.slidbanner-slide {
  width: 100%;
  height: auto;
  object-fit: cover; /* Bilder passen sich an, ohne die Proportionen zu verzerren */
  display: block;
  margin: 0;
  padding: 0;
}

/* Optional: Übergangseffekte für sanftes Ein- und Ausblenden */
.slidbanner-slide {
  transition: opacity 1s ease-in-out;
}

/* Medienabfragen für kleinere Bildschirme */
@media (max-width: 768px) {
  .main-image,
  .main-image-duplicated,
  .main-image-produkt,
  .slidbanner-slide {
    height: 300; /* Höhe auf mobilen Geräten automatisch anpassen */
  }
}