/* Embla Slider Styles */
.embla {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  height: 50vh; /* Maximal die Hälfte der verfügbaren Höhe */
}
.embla__viewport {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.embla__container {
  display: flex;
  height: 100%;
  gap: clamp(8px, 2vw, 16px); /* Abstand zwischen den Slides */
}
.embla__slide {
  position: relative;
  flex: 0 0 100%; /* 1 Slide pro View standardmäßig */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.embla__slide img {
  max-width: 100%;
  height: 100%;
  width: auto; /* Erhalte das Seitenverhältnis von Smartphone-Screens */
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  object-fit: contain;
}
.embla__slide__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.55) 100%);
  color: #fff;
  text-align: left;
  border-radius: 0 0 12px 12px;
}

/* Prev/Next */
.embla__prev, .embla__next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
}
.embla__prev:hover, .embla__next:hover { background: rgba(0,0,0,.8); }
.embla__prev { left: .5rem; }
.embla__next { right: .5rem; }

/* Dots */
.embla__dots { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.embla__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #555; border: none;
}
.embla__dot.is-selected { background: #d4af73; }

/* Ab mittleren Screens: 2 Slides nebeneinander */
@media (min-width: 768px) {
  .embla__slide { flex: 0 0 50%; }
}

/* Ab größeren Tablets: 3 Slides nebeneinander */
@media (min-width: 992px) {
  .embla__slide { flex: 0 0 33.3333%; }
}

/* Ab großen Screens: 4 Slides nebeneinander */
@media (min-width: 1200px) {
  .embla__slide { flex: 0 0 25%; }
}

/* Lightbox Navigation */
.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 999px;
  display: grid; place-items: center;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.2); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }