/**************************************************************************************************
// Webauftritt
//
// Version: 1.0
// Date   : 30.10.2025
// Autor  : M.Hielscher
// Desc.  : style_videos.css
// ************************************************************************************************/

/* --- Video-Galerie Layout --- */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Immer zwei pro Zeile */
  gap: 24px;
  justify-items: center;
  align-items: start;
  margin-top: 30px;
}

/* --- Einzelnes Video-Element --- */
.video-item {
  flex: 0 0 320px;            /* feste Breite, kein Schrumpfen */
  max-width: 320px;
  text-align: center;
  color: white;
}

/* --- Video-Styling --- */
.video-item video {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- Einzelnes Bild-Element --- */
.picture-item {
  flex: 0 0 280px;
  max-width: 280px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Bild-Styling --- */
.picture-item img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  margin-bottom: 8px;
}

/* --- Responsive Anpassung --- */
@media (max-width: 768px) {
  .video-gallery {
    flex-direction: column;   /* untereinander bei schmalen Bildschirmen */
    align-items: center;
  }
}

/* Mittelgroße Bildschirme (Tablets) */
@media (max-width: 1024px) {
  #video-section {
    min-height: 300px;
  }

  #video-section video {
    width: 360px;
  }

  #video-section .text h1 {
    font-size: 2rem;
  }
}

/* Kleine Bildschirme (Smartphones) */
@media (max-width: 600px) {
  #video-section {
    background-attachment: scroll; /* Parallax deaktivieren auf Mobile */
    min-height: 250px;
    padding: 20px;
  }

  #video-section video {
    width: 280px;
  }

  #video-section .text h1 {
    font-size: 1.5rem;
  }

  #video-section .text p.lead {
    font-size: 1rem;
  }
}