/* Elementor Banner Extended (stelaraX) v1.1.0 */
.stelaraX-banner-wrap { width: 100%; }
.stelaraX-banner-wrap .stelaraX-banner-inner {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden; /* Border-Radius clippen */
}

/* Vollbreite: bricht aus Container aus und nutzt 100vw */
.stelaraX-banner-wrap.stelaraX-width-full .stelaraX-banner-inner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Banner-Container */
.stelaraX-banner {
  display: block;
  width: 100%;
  height: 400px; /* Fallback – wird durch Controls überschrieben */
  background-color: #f5f5f5;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

/* Overlay */
.stelaraX-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Medien-Ebene (Video/Iframe) */
.stelaraX-media-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* Banner bleibt klickbar (z. B. Links darüber) */
  z-index: 0;
}

.stelaraX-banner .stelaraX-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Iframe als "Cover" (Standard: 16:9) */
.stelaraX-banner .stelaraX-iframe {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* Cover-Tricks je Seitenverhältnis (Breite > 100% um Höhe abzudecken) */
.stelaraX-banner .stelaraX-iframe.ratio-16x9 {
  width: 177.78%;
  left: -38.89%;
}
.stelaraX-banner .stelaraX-iframe.ratio-4x3 {
  width: 133.33%;
  left: -16.67%;
}
.stelaraX-banner .stelaraX-iframe.ratio-21x9 {
  width: 233.33%;
  left: -66.67%;
}

/* Video auf Mobilgeräten deaktivieren -> Fallback-Bild bleibt sichtbar */
@media (max-width: 767px) {
  .stelaraX-banner.stelaraX-disable-video-mobile .stelaraX-media-wrapper {
    display: none;
  }
}