/* -------------------------------------------------------------------------
   Teamprofile ([sty_teamprofile], includes/team.php)

   Baut auf den Klassen .sty-team / .sty-person aus sty-public.css auf und
   überschreibt nur, was die großen Profilkarten anders brauchen: Foto oben im
   Hochformat, Text darunter, Profil per <details> aufklappbar.
   ---------------------------------------------------------------------- */

.sty-team__liste--profile{
  grid-template-columns:1fr;
  gap:1.25rem;
  /* Zugeklappt sind alle Karten einer Zeile gleich hoch, der Knopf sitzt
     unten. Ist irgendwo ein Profil offen, behalten die Karten ihre eigene
     Höhe, damit neben der langen Karte keine leeren Flächen stehen. */
  align-items:stretch;
}
.sty-team__liste--profile:has(.sty-person__mehr[open]){align-items:start}
@media (min-width:640px){  .sty-team__liste--profile{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .sty-team__liste--profile{grid-template-columns:repeat(3,minmax(0,1fr))} }

.sty-person--profil{
  flex-direction:column;
  align-items:stretch;
  gap:1rem;
  padding:0 0 1.25rem;
  overflow:hidden;
}
.sty-person--profil .sty-person__bild{flex:0 0 auto;display:block}
.sty-person--profil.sty-person--ohne-bild .sty-person__bild{display:flex}
.sty-person--profil .sty-person__bild img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:50% 20%;
}
.sty-person--profil .sty-person__text,
.sty-person--profil .sty-person__mehr{padding-inline:1.25rem}
.sty-person--profil .sty-person__text{justify-content:flex-start}

.sty-person__bild--platzhalter{
  align-items:center;
  justify-content:center;
  aspect-ratio:4 / 5;
  background:var(--sty-warmblack);
  color:var(--sty-gold);
  font-size:2.5rem;
  font-weight:700;
  letter-spacing:.12em;
}

.sty-person__aka{
  font-weight:400;
  color:rgb(248 246 241 / .7);
}

/* Aufklappbares Profil */
.sty-person__mehr{margin-top:auto}
.sty-person__mehr summary{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  cursor:pointer;
  list-style:none;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sty-gold);
}
.sty-person__mehr summary::-webkit-details-marker{display:none}
.sty-person__mehr summary::after{
  content:"";
  width:.5rem;
  height:.5rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--sty-uebergang);
}
.sty-person__mehr[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.sty-person__mehr summary:focus-visible{outline:2px solid var(--sty-gold);outline-offset:3px}
.sty-person__mehr .sty-sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.sty-person__voll{
  padding-top:.5rem;
  font-size:.9375rem;
  line-height:1.65;
  color:rgb(248 246 241 / .82);
}
.sty-person__voll p{margin:0 0 .9rem}
.sty-person__zwischen{
  margin:1.25rem 0 .5rem;
  font-family:var(--sty-font-body);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sty-gold);
}
.sty-person__quali{margin:0 0 1rem;padding-left:1.1rem}
.sty-person__quali li{margin:0 0 .35rem}
.sty-person__mission{margin:1rem 0 0;padding-top:1rem;border-top:1px solid rgb(248 246 241 / .12)}
.sty-person__mission strong{color:var(--sty-white)}

/* Zustandsabhängiger Text im Knopf und zweiter Schließen-Knopf am Profilende */
.sty-person__zu{display:none}
.sty-person__mehr[open] .sty-person__auf{display:none}
.sty-person__mehr[open] .sty-person__zu{display:inline}
.sty-person--profil{scroll-margin-top:90px}
.sty-person__mehr[open] .sty-person__voll{max-width:62ch}
.sty-person__schliessen{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:.75rem 0 .25rem;
  padding:0 1.1rem;
  border:1px solid rgb(201 165 92 / .5);
  border-radius:var(--sty-radius);
  background:transparent;
  font:inherit;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sty-gold);
  cursor:pointer;
}
.sty-person__schliessen:hover{background:rgb(201 165 92 / .12)}
.sty-person__schliessen:focus-visible{outline:2px solid var(--sty-gold);outline-offset:3px}