/* Team-Sektion auf der Über-uns-Seite. */

.team-raster {
  display: grid;
  gap: 1.5rem;
  /* Feste Dreierteilung statt auto-fill: bei 15rem Mindestbreite
     passten auf breiten Schirmen vier Karten in die Reihe, die
     Portraits wurden dadurch zu klein. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .team-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .team-raster { grid-template-columns: 1fr; }
}

.person {
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.person img {
  width: 100%;
  /* FESTE Höhe, kein aspect-ratio.
     aspect-ratio koppelt die Bildhöhe an die Kartenbreite: je breiter
     das Fenster, desto höher das Bild. Auf grossen Monitoren wurden
     daraus bildschirmfuellende Kacheln. Mit fester Höhe sieht das
     Portrait ueberall gleich aus.

     Die Originale sind 800x1200, der Kopf reicht bis etwa Zeile 550.
     Bei rund 370px Kartenbreite zeigt cover die oberen ~560 Zeilen --
     also genau Kopf und Schulteransatz. */
  height: 260px;
  object-fit: cover;
  object-position: center top;
  background: var(--color-bg-soft);
}

.person-text { padding: 1.25rem; }
.person-text h3 { font-size: 1.05rem; }

.person-aka {
  margin-top: .1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-orange);
}

.person-rolle {
  margin-top: .4rem;
  font-size: .9rem;
  line-height: 1.5;
}

/* Nur Icons: bei neun Karten nebeneinander wäre "E-Mail  LinkedIn"
   als Text zu viel Zeilenrauschen. Die Beschriftung steckt in
   aria-label und title, ist also für Screenreader und beim Überfahren
   mit der Maus da. */
.person-links {
  display: flex;
  gap: .5rem;
  margin-top: .9rem;
}

.person-link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-ink-soft);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: color .15s ease, border-color .15s ease,
              background .15s ease, transform .15s ease;
}

.person-link svg { width: 1.05rem; height: 1.05rem; }

.person-link:hover {
  color: var(--color-white);
  background: var(--color-orange);
  border-color: var(--color-orange);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .person-link:hover { transform: none; }
}

.team-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.team-cta h3 { flex: 1 1 24rem; font-size: 1.2rem; }