/**************************************************************************************************
// Webauftritt
//
// Version: 1.0
// Date   : 06.11.2025
// Autor  : M.Hielscher
// Desc.  : style_uebermich.css
// ************************************************************************************************/

/* Absatztexte in Über mich linksbündig (Überschrift und Lead bleiben zentriert) */
#id_section_uebermich .textuebermich p:not(.lead) {
  text-align: left;
}

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

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

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

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

/* --- Bild-Styling --- */
.uebermich-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) {
  .uebermich-gallery {
    flex-direction: column;   /* untereinander bei schmalen Bildschirmen */
    align-items: c  enter;
  }
}

/* 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;
  }
}