/* ============================================================
   SESAM — Team (7 Video-Karten, versetztes Raster)
   ============================================================ */
.team { background: var(--bg); overflow: clip; }

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.tcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-2) var(--space-3);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-hover) var(--ease-out-hard), box-shadow var(--dur-hover) var(--ease-out-hard);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

/* Versatz-Rhythmus (bricht das strenge Raster) */
.tcard:nth-child(even) { margin-top: var(--space-5); }

/* Der Chef bekommt die doppelte Breite */
.tcard--lead { grid-row: span 2; }
.tcard--lead .tcard__name { font-size: 1.6rem; }

.tcard__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface-2);
}
.tcard--lead .tcard__media { aspect-ratio: auto; flex: 1; min-height: 320px; }
.tcard__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcard__name {
  margin-top: var(--space-2);
  padding-inline: var(--space-1);
  font-size: 1.2rem;
  text-transform: uppercase;
}
.tcard__role {
  padding-inline: var(--space-1);
  margin-top: 0.2em;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.tcard__hobby {
  padding-inline: var(--space-1);
  margin-top: 0.55em;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.team__deco-onion { width: clamp(80px, 9vw, 150px); right: 1%; top: 4%; rotate: 16deg; }

@media (max-width: 1080px) {
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tcard--lead { grid-row: auto; }
  .tcard--lead .tcard__media { aspect-ratio: 3 / 4; }
}
@media (max-width: 760px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .tcard:nth-child(even) { margin-top: var(--space-3); }
}
@media (max-width: 460px) {
  .team__grid { grid-template-columns: 1fr; }
  .tcard:nth-child(even) { margin-top: 0; }
}