/* ===============================
   FOOTER & MENÜ
=============================== */
.footer-menu {
  position: fixed;
  top: 100vh;
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

@media (max-width: 1024px) {
  .vertical-menu .main-menu .nav.menu > li {
    display: inline-block;
  }
}

/* ===============================
   SLIDESHOW VIDEOS (z. B. Gridbox Slides)
=============================== */
.ba-slideshow-img {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto !important;
  overflow: hidden;
}

.ba-slideshow-img video {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-slideshow {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.ba-slideshow video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive Fixes für Slideshow-Videos */
@media (max-width: 1280px), (max-width: 1024px), (max-width: 768px) {
  .ba-slideshow-img video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}

/* ===============================
   STANDARD VIDEO WRAPPER
=============================== */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.video-wrapper .ba-item-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===============================
   VIDEO-BANNER OVERLAY (mittig)
=============================== */
.video-wrapper .video-banner {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.6);
  padding: 5px 10px;
  border-radius: 4px;
  max-width: 100%;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

.ba-item.hidden,
.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ===============================
   SPEZIELLE AUTOPLAY-VIDEOS (mit Ton)
=============================== */
.video-wrapper.autoplay-muted {
  position: relative;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 1 !important;
}

.video-wrapper.autoplay-muted video {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #000;
}

/* 🎛 Steuer-Button unten rechts */
.video-wrapper.autoplay-muted .video-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.video-wrapper.autoplay-muted .video-controls:hover {
  background: rgba(255, 255, 255, 0.85);
  color: black;
}

/* ===============================
   VIDEO THUMBNAILS (nur für .video-thumb)
=============================== */
.video-thumb {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  object-position: center center !important;
  overflow: hidden;
  background: #000;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.video-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* ===============================
   MOBILE: Thumbnail statt Video (außer autoplay-muted)
=============================== */
@media (max-width: 768px) {
  /* Normale Videos ausblenden */
  .video-wrapper:not(.autoplay-muted) {
    display: none !important;
  }

  /* Thumbnails zeigen */
  .video-thumb {
    display: block !important;
    cursor: pointer;
  }

  /* autoplay-muted bleibt sichtbar */
  .video-wrapper.autoplay-muted {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .video-wrapper.autoplay-muted video {
    height: auto !important;
    object-fit: cover !important;
  }
}

/* ===============================
   VOLLBREITE-THUMBNAILS auf Mobil
   =============================== */

/* Container dehnen */
@media (max-width: 768px) {
  .video-thumb {
    position: relative;
    display: block !important;
    width: 100vw !important;                    /* volle Bildschirmbreite */
    height: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #000;
    margin-left: calc(-50vw + 50%) !important;  /* Container-Einrückung ausgleichen */
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Bild im Thumb */
  .video-thumb img {
    width: 100vw !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
}