/*--------------------------------------------------------------
# Team-Grid-Fix – Vorstand & Hiker-Vorschau
# Erzwingt gleich breite, gleich hohe Karten unabhängig vom
# Bootstrap-Grid. Genutzt in: about.html (#vorstand, #hiker-preview)
--------------------------------------------------------------*/

/* Erzwingt für alle Vorstandskarten dieselbe Bild-Proportion (quadratisch, wie bei Johannes) */
.team .member-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.team .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Erzwingt 4 gleich breite Spalten im Vorstand und in der Hiker-Vorschau, unabhängig vom Bootstrap-Grid */
#vorstand .row,
#hiker-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

#vorstand .row > div,
#hiker-preview > div {
  width: 100%;
  max-width: 100%;
  flex: none;
}

/* Ohne echtes Foto hat die Platzhalter-Box keine Eigenbreite und würde
   auf Icon-Größe zusammenschrumpfen. Erzwingt volle Spaltenbreite,
   damit alle Karten (mit und ohne Foto) exakt gleich breit sind. */
#vorstand .row > div .member,
#hiker-preview > div .member {
  width: 100%;
}

#vorstand .row > div .member-img,
#hiker-preview > div .member-img {
  width: 100%;
}

@media (max-width: 991px) {
  #vorstand .row, #hiker-preview { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  #vorstand .row, #hiker-preview { grid-template-columns: 1fr; }
}