.bmh-hero-rotator {
  position: absolute;
  inset: 0;

  border-radius: inherit;
}

/*
 * Unbewegte Begrenzung der Bildfläche.
 * Die Controls liegen außerhalb dieses Clippings.
 */
.bmh-hero-rotator__clip {
  position: absolute;
  inset: 0;

  overflow: hidden;
  overflow: clip;

  border-radius: inherit;
}

.bmh-hero-rotator__viewport,
.bmh-hero-rotator__slide {
  position: absolute;
  inset: 0;
	
  padding-top: 4em;

  width: 100%;
  height: 100%;
}

.bmh-hero-rotator__slide {
  opacity: 0;
}

.bmh-hero-rotator__slide[data-active="true"] {
  opacity: 1;
}

.bmh-hero-rotator__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% 30%;
}

/* Controls */

.bmh-hero-rotator__controls {
  position: absolute;

  right: var(--space-l);
  bottom: calc(var(--space-m)*0.8);

  z-index: 10;

  display: flex;
  gap: max(8px, 0.8rem);
}

.bmh-hero-rotator__controls[hidden] {
  display: none !important;
}

.bmh-hero-rotator__control {
  box-sizing: border-box;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 2.5em;
  height: 2.5em;

  padding: 0;

  border-radius: 50%;

  background: var(--primary);
  color: var(--base);

  cursor: pointer;
	
  transition: transform 0.35s ease;	
}

.bmh-hero-rotator__control svg {
  width: 0.9em;
  height: 0.9em;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (hover: hover) {
  .bmh-hero-rotator__control:hover {
      transform: scale(1.1);
  }
}

.bmh-hero-rotator__control:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--base);
}

/* Play / Pause */

.bmh-hero-rotator__play {
  display: none;
}

.bmh-hero-rotator__toggle[data-playing="false"]
.bmh-hero-rotator__pause {
  display: none;
}

.bmh-hero-rotator__toggle[data-playing="false"]
.bmh-hero-rotator__play {
  display: block;
}

/* Visuell verborgen, für Screenreader verfügbar */

.bmh-hero-rotator__sr {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 478px) {
  .bmh-hero-rotator__controls {
  	bottom: var(--space-s);
}
}

/*
 * Auch externe Parallax-Transforms auf diesem
 * Viewport bei Reduced Motion unterdrücken.
 */
@media (prefers-reduced-motion: reduce) {
  .bmh-hero-rotator__viewport {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
}

@media (forced-colors: active) {
  .bmh-hero-rotator__control {
    border-color: ButtonText;
  }

  .bmh-hero-rotator__control:focus-visible {
    outline-color: Highlight;
  }
}



@media (max-width: 478px) {
  .bmh-hero-rotator__controls {
    left: var(--space-s);
    right: auto;
    bottom: var(--space-s);
  }

  .hero__heading:has(+ .bmh-hero-rotator) {
    position: absolute;
    left: var(--space-s);
    right: var(--space-s);

    /* Platz für Controls + Abstand */
    bottom: calc(var(--space-s) + 3rem + var(--space-xs));

    z-index: 10;
  }
  .hero__container::before {
	  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 65%);
  }	
}