/* =====================================================================
   team.css — die Arbeitslage von Managern und Scouts.

   Wunsch Filipe, 09.09.2026: "so eine kategorie wie über die creator
   will ich dass nur für die spicy und dogfather rolle auch über manager
   und scouts gibt ... ich will dass es so ultra krass gut ist."

   DIE GESTALTUNG FOLGT EINER ENTSCHEIDUNG, NICHT EINEM GESCHMACK:
   Diese Seite zeigt Zahlen über Kollegen. Sie darf deshalb NICHT
   aussehen wie ein Cockpit mit Warnleuchten. Rot gibt es genau dort,
   wo etwas liegengeblieben ist -- und sonst nirgends. Alles andere ist
   ruhig, damit die wenigen roten Stellen auch etwas heißen.
   ===================================================================== */

/* ---------- Der Kopf --------------------------------------------------- */
.t-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.t-kopf__titel {
  margin: 4px 0 6px;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.t-kopf__unter { margin: 0; font-size: .96rem; color: var(--text-leise); }
/* Der Satz über die Grenzen steht in einem eigenen Kasten und nicht als
   Fußnote. Er ist die wichtigste Zeile der Seite: Ohne ihn wird eine
   Arbeitslage als Überwachung gelesen -- und dann arbeitet niemand mehr
   offen damit. */
.t-kopf__grenze {
  flex: 1 1 300px; max-width: 44ch;
  margin: 0; padding: 12px 15px;
  border-left: 3px solid color-mix(in srgb, var(--scout-haupt) 55%, transparent);
  border-radius: 0 10px 10px 0;
  background: rgba(95, 201, 154, .07);
  font-size: .87rem; line-height: 1.55; color: var(--text-leise);
}
.t-kopf__grenze strong { color: var(--text); }

/* ---------- Die Lücken ------------------------------------------------- */
.t-luecken {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin: 0 0 18px;
}
/* EINE UNDURCHSICHTIGE FLAECHE, KEIN SCHLEIER.

   Die Lektion vom Vorlagenbrett heute Mittag, hier gleich mitgenommen:
   Eine Karte mit 7 Prozent Farbe auf transparentem Grund laesst das
   Buehnenfoto durchscheinen -- und dann haengt die Lesbarkeit davon ab,
   ob hinter dem Text gerade eine helle oder eine dunkle Stelle liegt.
   Dort hat es 3,61:1 ergeben, wo 4,5 noetig sind.

   Deshalb hier von vornherein ein eigener, deckender Grund. Der rote
   Ton liegt darauf, nicht darin. */
.tl {
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--warn, #ff9aa2) 34%, transparent);
  border-radius: var(--radius-klein);
  background:
    linear-gradient(rgba(255, 154, 162, .07), rgba(255, 154, 162, .07)),
    rgba(7, 10, 17, .93);
  backdrop-filter: blur(8px);
}
.tl__titel {
  margin: 0 0 4px; font-size: .98rem; font-weight: 700;
  color: color-mix(in srgb, var(--warn, #ff9aa2) 78%, #ffffff);
}
.tl__satz { margin: 0 0 8px; font-size: .84rem; color: var(--text-leise); line-height: 1.5; }
.tl__namen {
  margin: 0; font-size: .86rem; color: var(--text); line-height: 1.6;
  overflow-wrap: anywhere;
}
/* Keine Lücke ist auch eine Auskunft -- und dann grün statt rot. */
.tl[data-gut="ja"] {
  border-color: color-mix(in srgb, var(--scout-haupt) 34%, transparent);
  background:
    linear-gradient(rgba(95, 201, 154, .07), rgba(95, 201, 154, .07)),
    rgba(7, 10, 17, .93);
}
.tl[data-gut="ja"] .tl__titel { color: var(--scout-haupt); }

/* ---------- Die Lage in Zahlen ----------------------------------------- */
.t-lage {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  margin: 0 0 22px;
}

/* ---------- Eine Kennzahl ---------------------------------------------- */
.tz {
  display: grid; gap: 2px; align-content: start;
  padding: 11px 13px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  /* Ebenfalls deckend -- eine Kennzahl auf einem Foto ist keine
     Kennzahl, sondern ein Ratespiel. */
  background:
    linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .028)),
    rgba(7, 10, 17, .9);
}
.tz__wert {
  font-size: 1.28rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tz__schild {
  font-size: .74rem; color: var(--text-leise); line-height: 1.35;
}
/* Rot NUR, wo etwas liegengeblieben ist. */
.tz[data-art="warn"] {
  border-color: color-mix(in srgb, var(--warn, #ff9aa2) 42%, transparent);
  /* Auch hier deckend. Diese Zeile stand zuerst mit einem einzelnen
     rgba-Wert da und hat damit den undurchsichtigen Grund von oben
     wieder aufgehoben -- ausgerechnet an den Karten, auf die es
     ankommt. Zwei Regeln fuer denselben Grund, und die spaetere
     gewinnt: derselbe Fehler wie so oft in diesem Haus. */
  background:
    linear-gradient(rgba(255, 154, 162, .09), rgba(255, 154, 162, .09)),
    rgba(7, 10, 17, .9);
}
.tz[data-art="warn"] .tz__wert { color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff); }
/* Und grün, wenn eine Null eine gute Nachricht ist -- eine Null ohne
   Farbe liest sich wie ein fehlender Wert. */
.tz[data-art="gut"] { border-color: color-mix(in srgb, var(--scout-haupt) 30%, transparent); }
.tz[data-art="gut"] .tz__wert { color: var(--scout-haupt); }

/* ---------- Die Leute --------------------------------------------------- */
.t-gruppe { margin: 0 0 26px; }
.t-gruppe .feldschild { margin: 0 0 10px; }
.t-liste {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.tperson {
  --r: var(--text-still);
  position: relative;
  padding: 16px 18px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--r) 6%, transparent), transparent 60%),
    var(--flaeche);
}
.tperson[data-rolle="manager"] { --r: var(--manager-haupt); }
.tperson[data-rolle="scout"]   { --r: var(--scout-haupt); }
/* Der Streifen in der Rollenfarbe -- dieselbe Sprache wie in der
   Personenliste, damit man beide Seiten als ein Haus liest. */
.tperson::after {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 999px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--r) 80%, transparent),
    color-mix(in srgb, var(--r) 25%, transparent));
  pointer-events: none;
}
.tperson[data-gesperrt="ja"] { opacity: .6; }

.tperson__kopf {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.tperson__bild {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--r) 40%, transparent);
  flex: none;
}
.tperson__zeichen {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-size: 1.05rem; font-weight: 700;
  color: color-mix(in srgb, var(--r) 75%, #ffffff);
  background: color-mix(in srgb, var(--r) 16%, #070a11);
  border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
}
.tperson__text { flex: 1; min-width: 0; }
/* LANGE NAMEN BRECHEN UM, statt abgeschnitten zu werden.
   "Patrick-Maximilian" braucht 90 px, bei 320 px Bildschirm stehen 56
   zur Verfuegung -- gemeldet von pruef-handy. Ein Name, den man nicht
   lesen kann, ist auf einer Seite ueber Personen der schlechteste
   Platz zum Sparen. */
.tperson__name {
  margin: 0; font-size: 1.06rem; font-weight: 650; color: var(--text);
  overflow-wrap: anywhere; hyphens: auto;
}
.tperson__unter {
  margin: 2px 0 0; font-size: .82rem; color: var(--text-leise); line-height: 1.45;
  overflow-wrap: anywhere;
}
.tperson__zuletzt {
  flex: none;
  padding: 4px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
  color: var(--text-leise);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand);
}
.tperson__zuletzt[data-warn="ja"] {
  color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff);
  border-color: color-mix(in srgb, var(--warn, #ff9aa2) 40%, transparent);
  background: rgba(255, 154, 162, .1);
}

.tperson__zahlen {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
}

/* ---------- Die Pipeline ------------------------------------------------ */
.tpipe {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--rand);
}
.tpipe__schild {
  margin: 0 0 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-still);
}
.tpipe__reihe {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}

/* ---------- Wen genau --------------------------------------------------- */
.tperson__wer { margin-top: 12px; }
.tperson__wer summary {
  cursor: pointer; font-size: .82rem; color: var(--text-leise);
  padding: 4px 0;
}
.tperson__wer summary:hover { color: var(--text); }
.tperson__wer summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.tperson__namen {
  margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); line-height: 1.65;
}

@media (max-width: 620px) {
  .t-kopf { flex-direction: column; gap: 14px; }
  .t-kopf__grenze { max-width: none; }
  .tperson { padding: 14px 15px 16px; }
}
@media (forced-colors: active) {
  .tz, .tl, .tperson { border: 1px solid CanvasText; }
  .tperson::after { background: CanvasText; }
}