/* ==========================================================================
   Vista City — Teamseite
   ---------------------------------------------------------------------------
   Mittig aufgebaut: Kopf, Bereichsüberschriften und Personen stehen alle auf
   derselben Mittelachse. Die Seite liest sich dadurch von oben nach unten
   wie eine Aufstellung, nicht wie eine Tabelle mit Beschriftungsspalte.

   Was die Rangordnung trägt, ist die Größe: Spitze am größten, die oberste
   Rolle eines Bereichs mittelgroß, alles darunter kompakt. Die Rollenfarbe
   kommt aus Discord und liegt als Ring am Bild — Information, keine
   Dekoration.

   Wichtig für mittige Raster: flex-wrap statt grid. Ein Grid lässt die
   letzte, nicht volle Zeile links stehen; nebeneinander gesetzte Flex-Kinder
   zentrieren auch eine angebrochene Zeile.
   ========================================================================== */

/* =========================================================================
   KOPF
   ========================================================================= */

.crew {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
  text-align: center;
}

.crew__inner { position: relative; }

.crew .crumbs { justify-content: center; }

.crew__grid {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.crew__title {
  margin: 0;
  font-size: clamp(2.6rem, 1.5rem + 5.5vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.crew__title em { font-style: normal; color: var(--accent); }

.crew__lede {
  margin: 0 auto;
  max-width: 46ch;
}

.crew__meta { display: grid; justify-items: center; gap: 1.25rem; }

/* --- Gesichterreihe --------------------------------------------------------
   Überlappende Bilder statt einer aufgereihten Galerie: das liest sich als
   Gruppe und braucht ein Drittel der Breite.
   ---------------------------------------------------------------------------- */

.facepile {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Der negative Rand des ersten Kindes zöge den Stapel sonst nach links
     aus der Mitte. */
  padding-left: 0.85rem;
}

.facepile li {
  margin-left: -0.85rem;
  /* Frühere Bilder liegen oben — sonst überdeckt das letzte alle anderen
     und der Stapel kippt optisch nach rechts. */
  z-index: calc(20 - var(--i));
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.facepile:hover li { transform: translateY(-3px); }

.facepile img {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-hi);
  box-shadow: 0 0 0 3px var(--bg);
}

.crew__count {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin: 0;
}
.crew__count b {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3.5vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.crew__count span {
  max-width: 26ch;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.4;
}

.crew__sync {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font: 400 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.crew__dot {
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--state-live);
  animation: crew-pulse 2.6s ease-in-out infinite;
}
.crew__dot--warn { background: var(--state-warn); animation: none; }

@keyframes crew-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* =========================================================================
   BEREICH
   ========================================================================= */

.band {
  position: relative;
  padding-block: clamp(2.75rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--line);
  text-align: center;
}

.band__inner { display: grid; justify-items: center; gap: 2.5rem; }

.band__head {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  max-width: 52ch;
}

.band__num {
  font: 700 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.24em;
  color: var(--accent);
}

.band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.band__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Personenzahl als kleine Marke unter der Beschreibung. */
.band__size {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  font-size: var(--text-xs);
  color: var(--ink-mute);
}
.band__size b {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--ink);
}

.band__body { display: grid; justify-items: center; gap: 2.5rem; width: 100%; }

.band__empty {
  margin: 0;
  padding: 0.9rem 1.4rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--ink-mute);
}

/* =========================================================================
   SPITZE — die Pyramide
   ========================================================================= */

.peak {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding-bottom: 2.75rem;
}

/* Kurze Linie nach unten: macht aus zwei Blöcken einen Zusammenhang. */
.peak::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  width: 1px;
  height: 1.8rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

.peak__label {
  margin: 0;
  font: 400 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.peak__row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* =========================================================================
   ROLLE
   ========================================================================= */

.role { --role: var(--accent); width: 100%; }

/* Mittige Überschrift mit zwei kurzen Strichen links und rechts — eine
   Kante an der Seite funktioniert bei zentriertem Satz nicht. */
.role__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.role__head::before,
.role__head::after {
  content: '';
  width: clamp(1.5rem, 6vw, 4rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--role));
}
.role__head::after { background: linear-gradient(to left, transparent, var(--role)); }

.role__name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role__n {
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  background: var(--surface);
  font: 400 var(--text-xs)/1.5 var(--font-mono);
  color: var(--ink-mute);
}

/* Flex statt Grid: eine angebrochene letzte Zeile bleibt damit mittig. */
.role__people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.role--big .role__people { gap: 1rem; }

/* =========================================================================
   PERSON
   ========================================================================= */

.mate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  /* flex-basis statt width, dazu min-width: 0 — ein Flex-Kind schrumpft
     sonst nicht unter die Breite seines Inhalts, und ein langer
     Verwaltungsname zieht die ganze Karte auseinander. */
  flex: 0 0 8.5rem;
  width: 8.5rem;
  min-width: 0;
  padding: 0.7rem 0.5rem;
  border-radius: var(--r-md);
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease-out-expo);
}
.mate:hover { background: var(--surface); }

.mate__face {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface-hi);
  overflow: hidden;
  /* Ring in der Rollenfarbe — die einzige Farbfläche pro Person, und sie
     trägt eine Information statt Dekoration zu sein. */
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in oklab, var(--role, var(--accent)) 55%, transparent);
  transition: box-shadow var(--dur-fast) var(--ease-out-expo);
}
.mate:hover .mate__face {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--role, var(--accent));
}

.mate__face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Erst zeigen, wenn wirklich geladen — sonst blitzt der leere Rahmen
     über den Anfangsbuchstaben. */
  opacity: 0;
  transition: opacity var(--dur-mid) ease;
}
.mate__face img[data-loaded] { opacity: 1; }

.mate__initials {
  font: 700 var(--text-sm)/1 var(--font-display);
  color: var(--ink-mute);
}

.mate__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.mate__name {
  max-width: 100%;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mate__handle,
.mate__since {
  max-width: 100%;
  font: 400 0.625rem/1.4 var(--font-mono);
  color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Größere Stufe --------------------------------------------------------- */

.mate--big {
  flex: 0 0 10.5rem;
  width: 10.5rem;
  gap: 0.75rem;
  padding: 1.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}
.mate--big:hover { border-color: var(--role, var(--accent)); background: var(--surface-hi); }

.mate--big .mate__face { width: 4.5rem; height: 4.5rem; }
.mate--big .mate__initials { font-size: var(--text-lg); }
.mate--big .mate__name { font-size: var(--text-sm); }

/* Die Spitze steht am größten da. */
.peak .mate--big { flex: 0 0 14rem; width: 14rem; padding: 1.9rem 1.5rem; }
.peak .mate--big .mate__face { width: 5.75rem; height: 5.75rem; }
.peak .mate--big .mate__name { font-size: var(--text-base); }

/* =========================================================================
   HINWEIS, SOLANGE NICHTS ÜBERNOMMEN WURDE
   ========================================================================= */

.empty-note {
  margin-inline: auto;
  max-width: 46ch;
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-mute);
}

/* =========================================================================
   SCHMALE FENSTER
   ========================================================================= */

@media (max-width: 40rem) {
  .facepile img { width: 2.25rem; height: 2.25rem; }
  .mate { width: 6.5rem; }
  .mate--big { width: 9rem; padding: 1.1rem 0.75rem; }
  .peak .mate--big { width: 11rem; }
  .role__head::before, .role__head::after { width: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .crew__dot { animation: none; }
  .facepile li, .mate, .mate__face { transition: none; }
}

/* =========================================================================
   VERWALTUNGEN
   -------------------------------------------------------------------------
   Aufgabenbereiche quer zur Rangordnung: Rückerstattung, Fraktionen, Team.
   Sie sind keine Stufe in der Hierarchie, sondern eine Zuständigkeit —
   deshalb kein eigener Abschnitt, sondern ein Kennzeichen an der Person
   und eine Leiste im Kopf, über die sich hervorheben lässt, wer dazugehört.
   ========================================================================= */

.units { display: grid; justify-items: center; gap: 0.6rem; }

.units__cap {
  margin: 0;
  font: 400 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.units__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 46rem;
}

.unitchip {
  --unit: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: var(--ink-soft);
  font: 500 var(--text-xs)/1.4 var(--font-ui);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}

/* Der Punkt trägt die Rollenfarbe aus Discord — dieselbe, die auch am
   Kennzeichen an der Person steht. */
.unitchip::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--unit);
}

.unitchip:hover { color: var(--ink); border-color: var(--line-hi); }

.unitchip[aria-pressed='true'] {
  color: var(--ink);
  border-color: var(--unit);
  background: color-mix(in oklab, var(--unit) 14%, transparent);
}

.unitchip__n {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--ink-mute);
}
.unitchip[aria-pressed='true'] .unitchip__n { color: var(--ink-soft); }

/* --- Kennzeichen an der Person --------------------------------------------- */

.mate__units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  margin-top: 0.35rem;
  max-width: 100%;
  min-width: 0;
}

.unit {
  --unit: var(--ink-mute);
  max-width: 100%;
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  /* Sehr zurückhaltend: das Kennzeichen ist eine Zusatzangabe, kein
     zweiter Name. Es soll erkennbar sein, ohne die Karte zu übertönen. */
  background: color-mix(in oklab, var(--unit) 18%, transparent);
  color: var(--ink-soft);
  font: 500 0.5625rem/1.5 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unit--more { background: var(--surface-hi); }

.mate--big .unit { font-size: 0.625rem; padding: 0.1rem 0.4rem; }

/* --- Hervorheben beim Filtern ---------------------------------------------- */

/* Nicht ausblenden, sondern zurücknehmen: die Rangordnung bleibt sichtbar,
   und man sieht sofort, wo in der Struktur die Zuständigen sitzen. */
.is-filtering .mate { opacity: 0.28; }
.is-filtering .mate.is-match { opacity: 1; }
.is-filtering .mate.is-match .mate__face {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

/* Ein Bereich ohne Treffer verliert seine Überschrift nicht — nur ihre
   Betonung. Sonst springt beim Filtern das ganze Layout. */
.is-filtering .band__head,
.is-filtering .role__head { opacity: 0.4; }
.is-filtering .band:has(.mate.is-match) .band__head,
.is-filtering .role:has(.mate.is-match) .role__head { opacity: 1; }