/* Container: hält Aspect Ratio + Clipping */
.image-carousel__container {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-std);
  overflow: hidden;
  position: relative;
}

/* Embla Root: muss clippen, damit nur 1 Slide sichtbar ist */
.image-carousel__embla {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* Embla Track: horizontales Layout */
.image-carousel__embla .embla__container {
  display: flex;
  height: 100%;
}

/* Jede Slide nimmt 100% Breite ein */
.image-carousel__slide {
  display: flex;
  flex: 0 0 100%;
  height: 100%;
  min-width: 0;
}

/* Bild füllt Slide */
.image-carousel__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Pfeile: Overlay über dem Carousel */
.image-carousel__arrows {
  align-items: center;
  display: none;
  inset: 0;
  justify-content: space-between;
  padding: 0 var(--space-4);
  pointer-events: none;
  position: absolute;
}

/* ab 1024px einblenden */
@media (min-width: 1024px) {
  .image-carousel__arrows {
    display: flex;
  }
}

/* Pfeil-Buttons */
.image-carousel__arrow {
  align-items: center;
  border-color: transparent;
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--color-title);
  display: flex;
  height: var(--text-3xl);
  justify-content: center;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  transition: all var(--transition-std);
  visibility: hidden;
  width: var(--text-3xl);
}

/* Wenn Nutzer über Container hovert ODER ein Kind den Fokus hat (Keyboard) */
/* Mobilgeräte vermeiden für performance */
@media (hover: hover) and (pointer: fine) {
  .image-carousel__container:hover .image-carousel__arrow,
  .image-carousel__container:focus-within .image-carousel__arrow {
    backdrop-filter: var(--glass-blur);
    background-color: var(--glass-bg);
    border-color: var(--glass-border-color);
    border-style: solid;
    border-width: var(--glass-border-width);
    box-shadow: var(--shadow-std);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}

/* Hover/Fokus auf dem Button selbst */
.image-carousel__arrow:hover,
.image-carousel__arrow:focus-visible {
  box-shadow: var(--shadow-std);
}

/* Click auf den Button */
.image-carousel__arrow:active {
  transform: var(--scale-btn);
}

.arrow-noise-overlay {
  background-image: var(--noise-bg-img);
  background-repeat: repeat;
  opacity: var(--noise-opacity);
  pointer-events: none;
}

/* Pagination (Bullets) */
.image-carousel__pagination {
  align-items: center;
  bottom: var(--space-2);
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

/* Bullet-Button */
.image-carousel__pagination-page {
  background: white;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  height: var(--text-4xs);
  margin: var(--space-1);
  opacity: 0.4;
  padding: 0;
  transition: all var(--transition-std);
  width: var(--text-4xs);
}

/* Aktiver Bullet */
.image-carousel__pagination-page.is-active {
  opacity: 0.8;
  transform: scale(1.3);
}