html {
  scroll-behavior: smooth;
}

.video-header-wrapper {
    width: 100%;
    height: 35vh; /* Höhe in % der Viewport-Höhe – mobil-tauglich */
    overflow: hidden;
    position: relative;
    background: black;
  }

.prodImage {
  width: 30% !important;
}

.backgroundBox {
  background-color: rgba(255, 255, 255, 0.5);
  border: solid 1px black;
  border-radius: 4px;
  max-width: 100%;
  margin: 0 auto;
  padding: 15px;
  overflow: auto;
}


/* Graue Bootstrap Carousel Icons */
.carousel-control-prev-icon.gray-icon,
.carousel-control-next-icon.gray-icon {
  background-color: rgba(128, 128, 128, 0.6);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  background-size: 100% 100%;
  background-image: none;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='black' d='M5.5 0l-4 4 4 4V0z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='black' d='M5.5 0l-4 4 4 4V0z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon.gray-icon {
  transform: scaleX(-1); /* Icon für rechte Seite gespiegelt */
}

.section {
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* Optional: für einen Parallax-Effekt */
  min-height: 600px; /* Mindesthöhe, aber keine feste Höhe */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Beginnt oben statt mittig */
  flex-direction: column; /* Layout von oben nach unten */
  padding: 215px;
}

.bgUeUns {
  background-image: url('../images/BackgroundUeberUns.jpg');
}

.bgContact {
  background-image: url('../images/BackgroundKontakt.jpg');
}

.bgImpressum {
  background-image: url('../images/BackgroundImpressum.jpg');
}

.bgDS {
  background-image: url('../images/BackgroundDS.jpg');
  min-height: 5600px !important;
}

  .myClip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .logo {
    display: block;
    width: 65%;
    max-width: 300px;
    height: auto;
    filter: invert(1) drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
  }

  a:hover {
    color: white;
  }
  
  .aFooter {
    margin-bottom: 1em;
    color: rgba(255, 255, 255, .55);
  }
  
  .aFooter a {
    color: white;
    text-decoration: none;
  }

  .carousel-wrapper {
    position: relative;
  }
  
  .carousel-title-overlay {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    z-index: 2;
    pointer-events: none; /* Damit es Klicks nicht blockiert */
  }

  /* Mobile-Fix: feste Höhe bei kleineren Viewports */
@media (max-width: 576px) {
  .video-header-wrapper {
    height: 220px; /* oder z. B. 200px – je nach Logo & Bildausschnitt */
  }

  .section {
    min-height: 100vh; /* Für kleinere Geräte, um sicherzustellen, dass der Inhalt den Bildschirm ausfüllt */
    padding: 10px;
  }

  .logo {
    width: 85%;
    max-width: 220px;
  }
}

/* Ab 768px: links oben */
@media (min-width: 768px) {
    .logo-overlay {
      top: 1rem;
      left: 1rem;
      transform: none;
      text-align: left;
    }

    .backgroundBox {
      width: 60%; /* Auf größeren Bildschirmen breiter */
    }

    .carousel-title-overlay {
        top: 5%; /* höher bei mehr Platz */
        width: 60%;
    }

    .backgroundBox {
      width: 60%; /* Entfernt die 100% Breite */
    }

  }

  #cb-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    border-radius: 0;
    display: none;
  }