/*----------------Video Hero---------------*/
.detail-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.detail-hero video,
.detail-hero .video-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-fallback {
  z-index: 1; /* Liegt unter dem Video */
}

.detail-hero video {
  z-index: 2; /* Video liegt über dem Bild */
}



/* --------Video page Tatort---------*/

.two-images {
  display: flex;
  justify-content: center;   /* mittig auf der Seite */
  align-items: center;       /* vertikal ausrichten */
  margin: 40px 0;            /* Abstand oben und unten */
}

.two-images video {
  width: 1000px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);       /* optional: runde Ecken */
  margin: 40px 0;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .two-images video {
     width: 800px;
  }
}

@media (max-width: 800px) {
  .two-images video {
     width: 600px;
  }
}

@media (max-width: 600px) {
  .two-images video {
     width: 400px;
  }
}


/*-----finale Animation Wave-------*/
.final-animation{
  display: flex;
  justify-content: center;   /* Bilder mittig auf der Seite */
  align-items: center;       /* vertikal ausrichten */
  gap: 80px;                 /* Abstand zwischen den Bildern */
  margin: 40px 0;            /* Abstand oben und unten */
}

.final-animation video {
    width: auto;
  height: 800px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);       /* optional: runde Ecken */
  margin: 40px 0;
}

/* --- Responsive --- */
@media (max-width: 1100px) {

  .final-animation video{
     width: 700px;
  }
}

@media (max-width: 800px) {
 .final-animation video {
     width: 600px;
  }
}

@media (max-width: 600px) {

  .final-animation video {
     width: 400px;
  }
}




/* -------Fullscreen at the top -------*/
.detail-hero {
  position: relative;
  width: 100%;
  height: 100vh; /* initial fullscreen */
  overflow: hidden;
}

.detail-hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;  /* etwas größer für Parallax */
  object-fit: cover;
  transform: translateY(0);
  transition: transform 0.1s linear, height 0.5s ease;
}