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

/* Vollbreite: 100vw Full-Bleed */
.wbae-banner-wrap.wbae-width-full .wbae-banner-inner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

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

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

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

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

/* Iframe als "Cover" */
.wbae-banner .wbae-iframe {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.wbae-banner .wbae-iframe.ratio-16x9 { width: 177.78%; left: -38.89%; }
.wbae-banner .wbae-iframe.ratio-4x3  { width: 133.33%; left: -16.67%; }
.wbae-banner .wbae-iframe.ratio-21x9 { width: 233.33%; left: -66.67%; }

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

/* Link-Overlay: hinter Content, aber über Medien */
.wbae-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  pointer-events: auto;
}

/* Content-Layer */
.wbae-content {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.wbae-content-inner {
  background-color: rgba(255,255,255,0); /* via Control überschrieben */
  max-width: 600px;
}
.wbae-title { margin: 0 0 .5em 0; }
.wbae-desc { margin: 0 0 1em 0; }

/* Buttons – feste Farben laut Vorgabe (nicht in Elementor änderbar) */
.wbae-buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
.wbae-btn {
  display: inline-block;
  padding: .75em 1.25em;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.wbae-btn-primary { background: #111; color: #fff; }
.wbae-btn-secondary { background: #fff; color: #111; border: 1px solid #111; }
.wbae-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }

/* Parallax (JS setzt transform/background-position) */
.wbae-parallax { will-change: transform, background-position; }