.agv-team { background: var(--agv-mist-light); }
.agv-team__headline {
  color: var(--agv-deep);
  max-width: 18ch;
  margin-bottom: clamp(44px, 5vw, 96px);
}
.agv-team__headline .agv-hl { color: var(--agv-coral); }
/* Die vier Karten teilen sich dieselben Zeilen: Bild, Name und Rolle,
   Linie, Kurzprofil. Sonst schiebt eine zweizeilige Rolle — etwa
   „Technology & Consulting · Partner“ — Linie und Text dieser einen
   Karte nach unten, und die Reihe steht nicht mehr auf einer Höhe. */
.agv-team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: clamp(24px, 5.52vw, 106px);
  row-gap: 0;
}
.agv-team__person {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}

/* Ohne subgrid wird die Höhe für zwei Zeilen Rolle reserviert. Das
   hält die Reihe ebenfalls auf einer Linie, nur weniger genau. */
@supports not (grid-template-rows: subgrid) {
  .agv-team__person { display: block; }
  .agv-team__role { min-height: calc(2em * 1.6); }
}
.agv-team__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
}
.agv-team__portrait {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.agv-team__ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--agv-white);
  border-radius: 50%;
  pointer-events: none;
}
.agv-team__person:hover .agv-team__portrait,
.agv-team__person:focus-within .agv-team__portrait {
  filter: grayscale(0);
  transform: scale(1.035);
}
.agv-team__kopf { margin-top: clamp(20px, 2.4vw, 46px); }
.agv-team__name {
  display: block;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--agv-fs-md);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.0385em;
}
.agv-team__role {
  display: block;
  font-size: var(--agv-fs-body);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.028em;
}
.agv-team__rule {
  height: 1px;
  margin: clamp(12px, 1.2vw, 24px) 0 clamp(14px, 1.35vw, 26px);
  border: 0;
  background: var(--agv-muted);
}
.agv-team__bio { color: var(--agv-deep); }

@media (max-width: 1100px) {
  .agv-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, auto);
    column-gap: 32px;
  }
  .agv-team__person:nth-child(n + 3) { margin-top: 40px; }
}
@media (max-width: 560px) {
  /* Untereinander gibt es keine Reihe mehr, die ausgerichtet werden
     müsste — die Karten stehen wieder für sich. */
  .agv-team__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .agv-team__person { display: block; grid-row: auto; }
  .agv-team__person + .agv-team__person { margin-top: 40px; }
  .agv-team__figure { max-width: 300px; }
  .agv-team__role { min-height: 0; }
}