/* ============================================================
   ROSTER GRID — used by Team page (players + management + crew)
   ============================================================ */
.roster-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.roster-card {
  background: white; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  transition: transform .18s;
}
.roster-card:hover { transform: translateY(-2px); }
.roster-card .photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 12%;
  background-color: var(--sand);
}
.roster-card .photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,14,18,0) 50%, rgba(14,14,18,0.85) 100%);
}
.roster-card .num {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  font-family: var(--display); font-weight: 900; font-style: normal; font-size: 40px;
  color: var(--red); line-height: 1;
}
.roster-card .pos {
  position: absolute; top: 14px; right: 12px; z-index: 2;
  background: white; color: var(--ink);
  padding: 4px 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
}
.roster-card .name {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; color: white;
}
.roster-card .name .first {
  font-family: var(--body); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.85; font-weight: 600;
}
.roster-card .name .last {
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 26px; text-transform: uppercase; line-height: 1; margin-top: 2px;
  letter-spacing: 0.005em;
}
.roster-card.coach .photo { background-position: center 18%; }
.roster-card .num.role { font-size: 24px; top: 14px; }

@media (max-width: 1024px) {
  .roster-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .roster-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Handy: bei 2 Spalten ist die Karte so schmal, dass lange Funktionen
     (z.B. "Geschäftsführung") die 9px/0.18em-Box fast über die ganze
     Kartenbreite ziehen — kleiner und enger stellen. */
  .roster-card .pos { font-size: 7px; letter-spacing: 0.1em; padding: 3px 6px; }
}
@media (max-width: 400px) {
  .roster-grid { grid-template-columns: 1fr 1fr; }
}