/* Team-Seite – Karte mit Foto und Eckdaten, Details als Aufklapper */
.team { list-style: none; margin: 49px 0 0; padding: 0; max-width: var(--inhalt-breite); display: grid; gap: 24px; }
.person { background: var(--karte, #F8F8F8); }                  /* leicht grau wie die Referenz-Karten in Figma, deckend über dem Raster */
.person__karte { position: relative; display: grid; grid-template-columns: 300px 1fr; }
.person__foto { position: relative; align-self: start; aspect-ratio: 3 / 2; background: #eee; }   /* 3:2 wie die Referenzbilder (384 × 256) */
.person__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.person__info { padding: 20px 72px 20px 28px; font-size: 20px; line-height: 28px; letter-spacing: .4px; color: var(--schwarz); }
.person__name { margin: 0 0 4px; font-size: 24px; line-height: 30px; }   /* H2-Stil global, hier etwas kleiner */
.person__funktion { margin: 0 0 16px; }
.person__kontakt { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; }
.person__kontakt dt { font-weight: 600; }
.person__kontakt dd { margin: 0; }
.person__kontakt a { color: var(--schwarz); text-decoration: none; }
.person__kontakt a:hover { color: var(--rot); }

/* Plus-Button – Kreis wie der rote Button, Hover invertiert */
.person__plus {
  position: absolute; right: 16px; bottom: 16px;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 2px solid var(--rot); background: var(--rot); cursor: pointer;
  transition: background-color .15s ease;
}
.person__plus::before, .person__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 2.5px; background: #fff; transform: translate(-50%, -50%);
  transition: transform .2s ease, background-color .15s ease;
}
.person__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.person__plus:hover, .person__plus:focus-visible { background: #fff; }
.person__plus:hover::before, .person__plus:hover::after,
.person__plus:focus-visible::before, .person__plus:focus-visible::after { background: var(--rot); }
.person__plus:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.person__plus[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(45deg); }   /* Plus wird zu × */
.person__plus[aria-expanded="true"]::after  { transform: translate(-50%, -50%) rotate(135deg); }

/* Details */
.person__details { padding: 4px 28px 28px 328px; font-size: 20px; line-height: 28px; letter-spacing: .4px; color: var(--schwarz); }
.person__eckdaten { margin: 0 0 4px; }
.person__details h3 { margin: 24px 0 8px; font-weight: 600; font-size: 20px; line-height: 28px; color: var(--rot); }
.zeitleiste { margin: 0; }
.zeitleiste div { display: grid; grid-template-columns: 130px 1fr; gap: 0 16px; padding: 6px 0; border-top: 1px solid rgb(var(--raster-farbe) / .25); }
.zeitleiste div:last-child { border-bottom: 1px solid rgb(var(--raster-farbe) / .25); }
.zeitleiste dt { white-space: nowrap; }
.zeitleiste dd { margin: 0; }

@media (prefers-reduced-motion: reduce) { .person__plus, .person__plus::before, .person__plus::after { transition: none; } }

@media (max-width: 960px) {
  .team { margin-top: 32px; }
  .person__karte { grid-template-columns: 1fr; }
  .person__info { padding: 16px 64px 20px 20px; font-size: 18px; line-height: 26px; }
  .person__name { font-size: 22px; line-height: 28px; }
  .person__details { padding: 0 20px 24px; font-size: 18px; line-height: 26px; }
  .person__details h3 { font-size: 18px; line-height: 26px; }
  .zeitleiste div { grid-template-columns: 1fr; }
  .zeitleiste dt { font-weight: 600; }
}