/* =====================================================================
   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 IST EINE KACHEL, IM TON DER KATEGORIE (09.09.2026)

   Filipe: "perfektionnir das in einer kachel in der farbe von der
   kategorie bitte."

   `.t-kachel` steht in der Modulliste von module.css und bekommt damit
   die Form des Hauses: gefraeste Fase, Kantenlicht, Eckwinkel, Raster.
   Sie braucht hier nur noch zweierlei -- eine FLAECHE (die Modulliste
   gibt nur die Fassung, den Grund bringt jedes Bauteil selbst mit) und
   den TON.

   DER TON IST NICHT ABGESCHRIEBEN. Die Kachel traegt `data-ton="22"`,
   und die Regel dazu steht in start.css -- dieselbe, aus der die
   Kachel auf der Startseite ihre Farbe zieht. Es gibt damit weiterhin
   genau EINE Stelle, an der die Farbe dieser Kategorie steht; wer sie
   dort aendert, aendert beides. Eine zweite Hexzahl hier waere die
   naechste, die auseinanderlaeuft.
   ===================================================================== */
.t-kachel {
  margin: 0 0 18px;
  padding: 20px 22px;
  background:
    var(--raster),
    linear-gradient(150deg,
      color-mix(in srgb, var(--ton) 13%, transparent),
      transparent 46%),
    linear-gradient(178deg, rgba(9, 13, 20, .955), rgba(4, 7, 12, .985));
}

/* ---------- Der Kopf --------------------------------------------------- */
.t-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.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;
  /* Im Ton der Kategorie und nicht mehr in Gruen: In einer Kachel, die
     schon eine Farbe hat, ist eine zweite Farbe daneben eine zweite
     Aussage -- und dieser Kasten sagt dasselbe wie die Kachel, nur
     genauer. */
  border-left: 3px solid color-mix(in srgb, var(--ton) 60%, transparent);
  border-radius: 0 10px 10px 0;
  background:
    linear-gradient(color-mix(in srgb, var(--ton) 9%, transparent),
                    color-mix(in srgb, var(--ton) 9%, transparent)),
    rgba(7, 10, 17, .8);
  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 {
  /* Auch eine Kachel -- mit dem Warnton als --ton, damit Kantenlicht
     und Eckwinkel rot leuchten. Der Grund bleibt DECKEND: Die Lektion
     vom Vorlagenbrett gilt weiter, eine Karte mit sieben Prozent Farbe
     auf durchsichtigem Grund laesst das Buehnenfoto durch. */
  --ton: #ff9aa2;
  padding: 16px 18px;
  background:
    var(--raster),
    linear-gradient(150deg, rgba(255, 154, 162, .11), transparent 50%),
    rgba(7, 10, 17, .95);
}
.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"] {
  --ton: var(--scout-haupt);
  background:
    var(--raster),
    linear-gradient(150deg, rgba(95, 201, 154, .11), transparent 50%),
    rgba(7, 10, 17, .95);
}
.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 ---------------------------------------------- */
/* Die Kennzahlen bleiben SCHLICHT -- und das ist eine Entscheidung.
   Sie stehen zu acht in einer Karte; jede davon mit Fase, Kantenlicht
   und Eckwinkel waere ein Schaufenster voller Rahmen und keine
   Auskunft mehr. Eine Kachel in der Kachel in der Kachel liest
   niemand.

   Was sie bekommen: eine abgeschnittene Ecke aus derselben Formel wie
   die Kacheln (clip-path mit --fase), damit sie erkennbar zur selben
   Familie gehoeren -- nur eben als Beschlagteil, nicht als Kachel. */
.tz {
  display: grid; gap: 2px; align-content: start;
  padding: 11px 13px;
  border: 1px solid var(--rand);
  border-radius: 0;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
  /* Deckend -- eine Kennzahl auf einem Foto ist keine Kennzahl,
     sondern ein Ratespiel. */
  background:
    linear-gradient(rgba(255, 255, 255, .034), rgba(255, 255, 255, .034)),
    rgba(9, 12, 19, .92);
}
.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) 45%, 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));
}

/* =====================================================================
   DIE KARTEN UNTEN SIND JETZT AUCH KACHELN (09.09.2026)

   Filipe: "und die kacheln unten in der seite auch perfektionnieren und
   geil machen bitte."

   Sie waren abgerundete Rechtecke mit einem Streifen links -- richtig,
   aber eben nicht die Sprache dieses Hauses. `.tperson` und `.tl`
   stehen jetzt in der Modulliste und bekommen damit Fase, Kantenlicht,
   Eckwinkel und Raster wie jede andere Kachel.

   DIE FARBE KOMMT AUS DER ROLLE, und zwar ueber `--ton`. Das ist die
   Variable, aus der module.css das Kantenlicht und die Eckwinkel
   zieht. Ein Manager-Kasten leuchtet damit lila, ein Scout-Kasten
   gruen -- ohne dass hier eine einzige Farbe ausgeschrieben stehen
   muss.

   DER STREIFEN IST WEG, und das ist kein Verlust: module.css belegt
   ::before und ::after selbst (Kantenlicht und Eckwinkel) und laedt
   NACH dieser Datei -- ein eigenes ::after waere wirkungslos gewesen.
   Das Kantenlicht traegt die Rollenfarbe jetzt ohnehin, und zwar rund
   um die ganze Karte statt auf drei Pixeln links. */
/* =====================================================================
   DIE DREI TOENE VON TEAM DOGI -- an EINER Stelle (23.09.2026)
   =====================================================================

   Bis heute standen `#f0c14b`, `#d8a7f5` und `#8fd6ff` als Zahlen in
   der Datei verteilt: einmal bei der Gruppenueberschrift, einmal bei
   der Rollenmarke, und `#f0c14b` ein drittes Mal in module.css an der
   Karte der rechten Hand. Drei Orte fuer dieselbe Farbe sind drei
   Gelegenheiten, dass einer beim naechsten Anstrich nicht mitgeht --
   und dann traegt die Marke einen anderen Lila-Ton als die Karte, auf
   der sie liegt.

   Ausloeser war Filipes Wunsch, die Karte der linken Hand in der
   Farbe ihrer Marke zu faerben: „die farbe der kachel soll die gleiche
   sein wie die farbe die der text linke hand hat". „Die gleiche" ist
   keine Absicht, die man aufschreibt -- es ist eine, die man
   ABLEITET. Deshalb steht die Farbe jetzt hier und wird ueberall von
   hier geholt.

   AUF :root UND NICHT AUF DEM BEHAELTER: `.tperson` gibt es auf zwei
   Seiten (team.html und teamlage.html) und in zwei Behaeltern. Ein
   Ton, der nur in einem davon gilt, ist der, der auf der anderen Seite
   still auf seinen Rueckfall faellt. */
:root {
  --ton-hand:  #f0c14b;   /* Gold -- die rechte Hand */
  --ton-linke: #d8a7f5;   /* Lila -- die linke Hand */
  /* DER DRITTE TON HAT KEINEN ROLLENNAMEN (23.09.2026).

     Er hiess `--ton-modi`, und damit stand der verborgene Rollenname
     in einer Stilvorlage, die ohne Anmeldung im Netz liegt.
     pruef-modi-wortleck hat es gemeldet.

     Er heisst jetzt nach seiner AUFGABE statt nach seinem Traeger: Er
     ist der Grundton des Teams, und die beiden Haende weichen davon
     ab. Das ist nicht nur unverfaenglich, es ist auch richtiger --
     eine Farbe gehoert einer Rolle nicht, sie steht fuer sie. */
  --ton-team:  #8fd6ff;   /* Blau -- der Grundton des Teams */
}

.tperson {
  --r: var(--text-still);
  --ton: var(--r);
  position: relative;
  padding: 17px 19px 19px;
  background:
    var(--raster),
    linear-gradient(155deg,
      color-mix(in srgb, var(--r) 11%, transparent),
      transparent 52%),
    linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
}
.tperson[data-rolle="manager"] { --r: var(--manager-haupt); }
.tperson[data-rolle="scout"]   { --r: var(--scout-haupt); }
.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;
}
/* SICHERHEITSNETZ (10.09.2026). In der Blase steht ein BUCHSTABE --
   ein Bild gehoert in `.tperson__bild` daneben. Genau das ist einmal
   schiefgegangen: ein blankes <img> darin, ohne Groesse, ohne
   `overflow: hidden` am Elternteil -- das Foto lief ueber die ganze
   Kachel. Behoben ist es im Skript; diese zwei Zeilen sorgen dafuer,
   dass derselbe Fehler beim naechsten Mal nichts mehr anrichtet. */
.tperson__zeichen { overflow: hidden; }
.tperson__zeichen > img { width: 100%; height: 100%; object-fit: cover; }

.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; }
  /* `flex: 1 1 300px` ist am Rechner richtig -- dort ist die Hauptachse
     WAAGERECHT und der Kasten teilt sich die Breite mit dem Titel.
     In einer Spalte ist die Hauptachse aber SENKRECHT, und derselbe
     Wert laesst ihn in die HOEHE wachsen: Auf dem Bildschirmfoto stand
     danach die halbe Kachel leer.

     Ein Flexwert gilt fuer eine Richtung, nicht fuer ein Element. Wer
     die Richtung dreht, muss ihn mitdrehen. */
  .t-kopf__grenze { flex: 0 0 auto; max-width: none; }
  .tperson { padding: 14px 15px 16px; }
}
@media (forced-colors: active) {
  .tz, .tl, .tperson { border: 1px solid CanvasText; }
  .tperson::after { background: CanvasText; }
}

/* =======================================================================
   DIE MITGLIEDER-KACHEL AUS KAPITEL 4 (10.09.2026)

   Der Blueprint verlangt dort neben Name, Foto und Zahlen auch Status
   (aktiv/pausiert), das Datum "dabei seit" und -- nach 4.1 -- die
   Stufe. Drei kurze Angaben, die zusammen in eine Zeile gehoeren:
   Einzeln untereinander waeren sie drei Zeilen fuer neun Woerter.

   ALLE DREI IM SELBEN GEWAND wie `tperson__zuletzt` daneben (Pille,
   999px, .74rem). Ein zweites Gewand fuer dieselbe Sorte Angabe waere
   der Anfang davon, dass die Karte nach Baustelle aussieht.
   ==================================================================== */
.tperson__merkmale {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.tmerkmal {
  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);
}
/* "dabei seit" ist die leiseste der drei -- sie beantwortet keine
   Frage, sie gibt nur Zusammenhang. */
.tmerkmal--leise { opacity: .78; }

/* ---------------------------------------------------------------------
   DIE ROLLE (22.09.2026)
   ---------------------------------------------------------------------
   Filipe: „und auch den rollen entsprechend reihenfolge. nicht einfach
   so sondern die rolle soll die reihenfolge ausmachen."

   Gemessen war die Reihenfolge schon nach Rolle sortiert -- man konnte
   es nur nicht sehen: Auf der Karte stand die STUFE („Probe"), nie die
   Rolle. Eine Ordnung, die man nicht sehen kann, sieht aus wie Zufall.

   DIE ROLLENMARKE IST DIE ERSTE UND DIE KRAEFTIGSTE. Sie steht vor der
   Stufe, weil sie die groessere Frage beantwortet: WAS jemand ist,
   nicht wie weit er darin ist. Gefuellt statt umrandet -- die anderen
   Marken sind Auskunft, diese ist Einordnung.
   --------------------------------------------------------------------- */
.tmerkmal--rolle {
  color: #0a0f18;
  background: color-mix(in srgb, var(--rm, #9fb6c6) 82%, #ffffff);
  border-color: color-mix(in srgb, var(--rm, #9fb6c6) 60%, transparent);
  letter-spacing: .01em;
}
/* Jede Rolle ihr Ton. Die rechte Hand behaelt ihr Gold -- es ist
   dasselbe, das die Karte schon traegt; ein zweiter Ton daneben waere
   eine zweite Sprache fuer dieselbe Sache. */
/* DER GRUNDTON STEHT AN DER MARKE SELBST, die beiden Haende weichen
   ab. So braucht die dritte Rolle keinen eigenen Wahlausdruck -- und
   damit steht ihr Name nirgends in dieser Datei. */
.tmerkmal--rolle   { --rm: var(--ton-team); }
.tmerkmal--r-hand  { --rm: var(--ton-hand); }
.tmerkmal--r-linke { --rm: var(--ton-linke); }

/* ---------------------------------------------------------------------
   DIE GRUPPENUEBERSCHRIFT
   ---------------------------------------------------------------------
   Vier Karten hintereinander sehen gleich aus, egal in welcher
   Reihenfolge sie stehen. Erst die Zaesur macht aus der Sortierung
   eine Gliederung.

   Sie steht nur da, wenn es mehr als eine Gruppe gibt -- bei einer
   waere sie keine Gliederung, sondern eine Zeile, die sagt, was man
   ohnehin sieht.
   --------------------------------------------------------------------- */
.t-gruppe {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 10px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tg, #9fb6c6);
}
/* Dieselbe Bauweise wie bei der Marke: Grundton an der
   Ueberschrift, die beiden Haende weichen ab. */
.t-gruppe                     { --tg: var(--ton-team); }
.t-gruppe[data-rolle="hand"]  { --tg: var(--ton-hand); }
.t-gruppe[data-rolle="linke"] { --tg: var(--ton-linke); }
/* Eine Linie, die bis zum Rand laeuft. Sie traegt die Zaesur; die
   Schrift allein ginge zwischen den Karten unter. */
.t-gruppe::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tg) 45%, transparent),
    transparent 70%);
}
.t-gruppe__zahl {
  padding: 1px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tg) 40%, transparent);
  background: color-mix(in srgb, var(--tg) 12%, transparent);
  font-size: .72rem; letter-spacing: 0;
}
/* Die erste Ueberschrift braucht oben keinen Abstand -- darueber steht
   schon die Trennung zur Warteliste. */
.t-gruppe:first-of-type { margin-top: 6px; }

@media (forced-colors: active) {
  .tmerkmal--rolle { border: 1px solid CanvasText; }
  .t-gruppe::after { background: CanvasText; }
}

/* PAUSIERT FAELLT AUF, aber warm und nicht alarmierend: Eine Pause ist
   kein Fehler. Derselbe Ton wie die Warnung daneben, nur ruhiger --
   sonst liest man "pausiert" als "kaputt". */
.tmerkmal--pause {
  color: color-mix(in srgb, var(--warn, #ff9aa2) 70%, #ffffff);
  border-color: color-mix(in srgb, var(--warn, #ff9aa2) 38%, transparent);
  background: rgba(255, 154, 162, .1);
}

/* =====================================================================
   DIE FUENF STUFENFARBEN (22.09.2026) -- GERECHNET, NICHT GEWAEHLT
   =====================================================================

   Filipe: „und ich will das es ein zwei kategorien mehr gibt und das
   soll geiler aussehen und jede seine eigene farbe, stark erkennbar."

   DER ALTE STAND WAR MESSBAR ZU NAH BEIEINANDER. Nachgerechnet in
   OKLab, mit denselben Schwellen, die das ganze Haus benutzt
   (tools/kachelton-regeln.mjs):

       probe #9fb6c6  <-> standard #7fc4e8   Abstand 0,0576
       probe          <-> senior   #8fd6a6   Abstand 0,1136
       standard       <-> senior             Abstand 0,1202

   MINDEST_ABSTAND ist 0,090. Das erste Paar lag DARUNTER -- „Probe"
   und „Standard" waren nebeneinander praktisch dieselbe Farbe. Und
   die Buntheit lag bei 0,034 / 0,086 / 0,099, alle drei unter
   MINDEST_BUNTHEIT (0,12): blass, genau das, was er gemeldet hat.
   Der Kommentar, der hier stand, nannte das eine Absicht („Probe
   bleibt bewusst das ruhigste Schild"). Die Absicht war gut gemeint
   und hat dazu gefuehrt, dass man zwei Stufen nicht unterscheiden
   konnte.

   DIE NEUEN FUENF SIND EIN GLEICHMAESSIGER FAECHER: fuenf Farbwinkel
   im Abstand von 72 Grad, alle auf derselben Helligkeit (OKLab
   L = 0,74) und jeweils so bunt, wie es bei diesem Winkel gerade noch
   in sRGB passt. Der Versatz (54 Grad) ist nicht gewaehlt, sondern
   ausgerechnet: Von allen 72 moeglichen Drehungen ist es die, bei der
   der KLEINSTE Abstand am groessten wird -- auch zum Babyblau der
   Rollenmarke „Modi", die direkt daneben steht.

   Gemessen ergibt das:

       kleinster Abstand untereinander      0,1531  (Schwelle 0,090)
       kleinster Abstand zur Rollenmarke    0,1108
       kleinster Abstand zu „pausiert"      0,1273
       Kontrast gegen den Kartengrund       7,3 bis 8,6  (noetig: 4,5)
       Buntheit                             0,126 bis 0,212  (0,12-0,30)

   Die Reihenfolge ist ausserdem KALT NACH WARM -- Probe fliederblau,
   Vertretung magenta. Damit traegt die Farbe dieselbe Aussage wie die
   Reihenfolge der Knoepfe: Man sieht die Steigerung, ohne zu lesen.

   Nachgeprueft wird das nicht hier, sondern in pruef-team-stufen.mjs:
   Die Pruefung liest STUFEN aus dem Server und die Farben aus DIESER
   Datei und rechnet die Abstaende nach. Ein Kommentar, der eine Zahl
   behauptet, ist kein Nachweis.
   ===================================================================== */
.tmerkmal--probe {
  color: color-mix(in srgb, #8aa5ff 82%, #ffffff);
  border-color: rgba(138, 165, 255, .42);
  background: rgba(138, 165, 255, .13);
}
.tmerkmal--standard {
  color: color-mix(in srgb, #00c2c7 82%, #ffffff);
  border-color: rgba(0, 194, 199, .42);
  background: rgba(0, 194, 199, .13);
}
.tmerkmal--fort {
  color: color-mix(in srgb, #8dbe00 82%, #ffffff);
  border-color: rgba(141, 190, 0, .42);
  background: rgba(141, 190, 0, .13);
}
.tmerkmal--senior {
  color: color-mix(in srgb, #ff8511 82%, #ffffff);
  border-color: rgba(255, 133, 17, .42);
  background: rgba(255, 133, 17, .13);
}
.tmerkmal--vertretung {
  color: color-mix(in srgb, #ff6ad0 82%, #ffffff);
  border-color: rgba(255, 106, 208, .42);
  background: rgba(255, 106, 208, .13);
}

/* ---------- Die Stufe setzen (nur DogFather) --------------------------- */
.tstufen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--rand);
}
/* DAS SCHILD NIMMT DIE GANZE ZEILE.

   Ohne `flex-basis: 100%` teilt es sich die erste Zeile mit der ersten
   Stufe -- im Bildschirmfoto stand "STUFE  Probe" oben und darunter
   "Standard  Senior". Drei gleichwertige Knoepfe, ungleich verteilt:
   Man liest sie dann als zwei Gruppen statt als eine Reihe. */
.tstufen__schild {
  flex-basis: 100%;
  margin-bottom: 2px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-still);
}
.tstufen__knopf {
  padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--text-leise);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tstufen__knopf:hover:not([disabled]) {
  color: var(--text); background: rgba(255, 255, 255, .08);
}
.tstufen__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Die gewaehlte Stufe ist gefuellt, nicht bloss umrandet: Bei drei
   gleich aussehenden Pillen erkennt man einen Rahmenwechsel zu
   langsam, gerade auf einem hellen Bildschirm. */
.tstufen__knopf[data-an="ja"] {
  color: #0a121e;
  background: color-mix(in srgb, var(--akzent, #7fc4e8) 82%, #ffffff);
  border-color: transparent;
}
.tstufen__knopf[disabled] { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tstufen__knopf { transition: none; } }

/* =======================================================================
   DER EINGANG WIRD LESBAR STATT LEER (10.09.2026)

   Filipe zum Bildschirmfoto: "das muss viel krasser sein."

   Er hatte recht, und der Grund war nicht Geschmack: Auf der Seite
   standen drei gleich hohe Spalten, von denen zwei leer waren und
   trotzdem ueber den halben Bildschirm gingen. Die einzige Karte mit
   Inhalt lag darin wie ein Zettel in einem Umzugskarton -- und war
   ausserdem fahl, weil ihre Rollenfarbe auf ein helles Grau zurueckfiel.

   Vier Aenderungen, und jede loest etwas Konkretes:
     1. Leere Spalten schrumpfen (`align-items: start`).
     2. Die Karte traegt die Farbe der Stufe -- kein Nebel mehr, und
        man sieht am Rand, wer wo steht.
     3. Aus sechs Zahlenkaesten je Person werden drei Balken: "wie
        weit" statt "wie viele offen".
     4. Die drei Zahlen der Seite stehen oben als Zahlen, nicht in
        einem Satz.
   ==================================================================== */

/* 1. ZWEI REIHEN, UND LEERE KAESTEN SCHRUMPFEN.

      `.t-lage` war ein Raster mit `auto-fit, minmax(150px, 1fr)` fuer
      ALLES: die zwei Wartelisten und jede Person. Bei fuenf Kaesten
      nebeneinander blieben rund 150 px je Spalte, und im
      Bildschirmfoto stand "Community 12 von" -- abgeschnitten mitten
      in der Zahl. Ausserdem machte die laengste Liste die ganze Reihe
      so hoch wie sich selbst.

      Jetzt untereinander: erst was eine Antwort braucht, dann das
      Team. `align-items: start` haelt leere Kaesten kurz -- `stretch`
      ist die Vorgabe und zieht sonst jeden auf die Hoehe des
      hoechsten. */
.t-lage {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  align-items: start;
}
/* 300 px ist nachgemessen und nicht geraten: Darunter bricht
   "Community" von der Zahl daneben ab, und die Stufenknoepfe fallen in
   drei Zeilen. Auf einem Handy bleibt es bei einer Spalte. */
/* `auto-fill` UND NICHT `auto-fit` (22.09.2026).
   ---------------------------------------------------------------------
   Der Unterschied fiel erst auf, als die Karten nach Rolle gruppiert
   wurden: `auto-fit` laesst leere Spalten zusammenfallen, und die
   uebrigen Karten ziehen sich ueber die frei gewordene Breite. Solange
   alle vier Personen in EINER Reihe standen, war das richtig. In einer
   Gruppe mit genau einer Person -- und die rechte Hand ist immer eine
   -- wurde daraus eine Karte ueber die gesamte Bildschirmbreite.

   Im Bildschirmfoto vom 22.09. war Rieke damit 1800 px breit und hoeher
   als der sichtbare Bereich, waehrend die drei Modis darunter normal
   nebeneinander standen. Es sah aus wie zwei verschiedene Seiten.

   `auto-fill` haelt die leeren Spalten offen. Eine Karte ist dann
   genauso breit wie jede andere, egal wie viele neben ihr stehen. Auf
   einem schmalen Schirm bleibt alles wie bisher: `min(300px, 100%)`
   laesst dort ohnehin nur eine Spalte zu. */
.t-wartet, .t-leute {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  align-items: start;
}

/* 2. DIE STUFE ALS FARBE DER KARTE.
      Dieselben fuenf Toene wie die Schilder darin -- ein sechster
      waere eine zweite Sprache fuer dieselbe Sache. Sie stehen hier
      ein zweites Mal, weil CSS keine Zuordnung kennt; dass beide
      Listen gleich sind, weist pruef-team-stufen.mjs nach. */
.tperson[data-stufe="probe"]      { --r: #8aa5ff; }
.tperson[data-stufe="standard"]   { --r: #00c2c7; }
.tperson[data-stufe="fort"]       { --r: #8dbe00; }
.tperson[data-stufe="senior"]     { --r: #ff8511; }
.tperson[data-stufe="vertretung"] { --r: #ff6ad0; }
/* Pausiert wird leiser, nicht ausgegraut: 0,72 statt 0,6 (das ist der
   Wert fuer GESPERRT). Eine Pause ist kein Entzug. */
.tperson[data-pause="ja"] { opacity: .72; }

/* 3. DIE BEREICHE ALS BALKEN --------------------------------------- */
.tfort {
  display: grid; gap: 8px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--rand);
}
.tfort__zeile {
  display: grid; gap: 6px;
  padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--rand);
  transition: background .15s ease, border-color .15s ease;
}
.tfort__zeile:hover {
  background: rgba(255, 255, 255, .06);
  border-color: color-mix(in srgb, var(--r) 40%, transparent);
}
.tfort__zeile:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.tfort__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.tfort__name { font-size: .88rem; font-weight: 650; color: var(--text); }
.tfort__zahl {
  flex: none;
  font-size: .78rem; font-weight: 700; color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
/* DIE BAHN. 8 px hoch -- hoch genug, um die Farbe zu erkennen, flach
   genug, um nicht wie ein Ladebalken zu wirken. Der leere Teil bleibt
   sichtbar dunkel: Ein Balken ohne Bahn zeigt nur, was da ist, nicht
   wie viel fehlt. */
.tfort__bahn {
  display: flex; overflow: hidden;
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.tfort__bahn > i { display: block; height: 100%; }
/* GRUEN = besprochen und in Ordnung. BERNSTEIN = besprochen, da ist
   was. Beide fuellen den Balken, denn beide heissen "angesehen" --
   der Unterschied liegt im Ergebnis, nicht im Fortschritt. */
.tfort__gut { background: color-mix(in srgb, #8fd6a6 78%, #5f8a9f); }
.tfort__verbessern { background: color-mix(in srgb, #ffc978 82%, #b07a3a); }
.tfort__unter {
  font-size: .76rem; color: var(--text-still); line-height: 1.5;
}

/* 4. DIE DREI ZAHLEN DER SEITE -------------------------------------- */
.tkopfzahlen {
  grid-column: 1 / -1;          /* ueber die ganze Breite, keine vierte Spalte */
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  margin-bottom: 4px;
}
.tkz {
  display: grid; gap: 3px; align-content: start;
  padding: 15px 17px; border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(127, 196, 232, .07), transparent 60%),
    linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
  border: 1px solid var(--rand);
}
.tkz__wert {
  font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 750;
  line-height: 1.05; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tkz__schild {
  font-size: .8rem; color: var(--text-leise); line-height: 1.4;
}
/* WAS WARTET, FAELLT AUF -- aber nur, wenn wirklich etwas wartet. Eine
   Null in Warnfarbe waere ein Alarm ohne Anlass, und ab dem dritten Mal
   sieht man ihn nicht mehr. */
.tkz[data-dran="ja"] {
  border-color: color-mix(in srgb, #ffc978 42%, transparent);
  background:
    linear-gradient(160deg, rgba(255, 201, 120, .12), transparent 62%),
    linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
}
.tkz[data-dran="ja"] .tkz__wert { color: color-mix(in srgb, #ffc978 78%, #ffffff); }
.tkz__bahn {
  display: block; overflow: hidden;
  height: 8px; margin-top: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.tkz__bahn > i {
  display: block; height: 100%;
  background: linear-gradient(90deg,
    color-mix(in srgb, #5f8a9f 80%, #ffffff),
    color-mix(in srgb, #8fd6a6 76%, #5f8a9f));
}
@media (prefers-reduced-motion: reduce) { .tfort__zeile { transition: none; } }

/* =======================================================================
   DIE VERFUEGBARKEITS-AMPEL (Blueprint 7.1, 10.09.2026)

   Sieben Tage, drei Farben. Sie sagt, OB jemand kann -- nie, was er
   vorhat. Diese Grenze steht im Blueprint und laeuft hier mitten durch
   eine Kachel; deshalb ist sie auch im Quelltext an beiden Enden
   vermerkt.

   DREI FARBEN, DIE MAN AUCH OHNE FARBE UNTERSCHEIDET: Wer Rot und Gruen
   nicht auseinanderhaelt -- rund acht Prozent der Maenner --, sieht sonst
   drei gleiche Kaesten. Deshalb tragen die drei Stufen zusaetzlich
   verschieden viel FUELLUNG: frei ist nur umrandet, teils halb, voll
   ganz. Und der Titel beim Draufzeigen sagt es in Worten.
   ==================================================================== */
.tampel {
  display: grid; gap: 7px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--rand);
}
.tampel__schild {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-still);
}
.tampel__woche {
  display: grid; gap: 4px;
  grid-template-columns: repeat(7, 1fr);
}
/* .72rem und nicht .7 (10.09.2026, nachgezogen).
   In den sieben Feldern steht die Zahl der Termine -- klein, aber es
   ist die Auskunft, wegen der die Ampel da ist. Unter 11,5 px gilt im
   Haus als zu klein; .7rem waren 11,2. Gefunden hat es
   pruef-css-klassen, EINEN Commit zu spaet: Die Ampel war schon
   gepusht, weil ich diese Pruefung nicht laufen liess. */
.tampel__tag {
  display: grid; place-items: center;
  padding: 7px 0 6px; border-radius: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  cursor: default;
  border: 1px solid var(--rand);
}
/* FREI: nur ein Rahmen. Nichts eingetragen ist auch optisch nichts. */
.tampel__tag--frei {
  color: var(--text-leise);
  background: transparent;
}
/* TEILS: halb gefuellt -- ein Verlauf, der unten aufhoert. Er ist der
   Unterschied, den man auch in Graustufen sieht. */
.tampel__tag--teils {
  color: color-mix(in srgb, #ffc978 84%, #ffffff);
  border-color: color-mix(in srgb, #ffc978 38%, transparent);
  background: linear-gradient(180deg, transparent 48%, rgba(255, 201, 120, .18) 48%);
}
/* VOLL: ganz gefuellt. */
.tampel__tag--voll {
  color: color-mix(in srgb, #ff9aa2 86%, #ffffff);
  border-color: color-mix(in srgb, #ff9aa2 42%, transparent);
  background: rgba(255, 154, 162, .17);
}
.tampel__satz {
  font-size: .76rem; color: var(--text-still); line-height: 1.5;
}

/* =====================================================================
   „DEIN TEAM" — DIE KARTEN UND DIE SEITE (11.09.2026)

   Filipe, mit drei Bildschirmfotos: die Kachel umbenennen, "diese zwei
   kacheln noch mehr perfektionieren", "veränder den hintergrund von
   diesen kacheln komplett", "perfektionnier diese seite einfach
   komplett".

   Was hier steht, ist NICHT nur Geschmack. Drei der Änderungen sind
   Fehler, die erst das Nachmessen am fertigen Bildschirm gezeigt hat --
   sie stehen bei ihrer Regel, jede mit ihrer Zahl.
   ===================================================================== */

/* ---- Die vier Zahlen: 2 × 2 statt 3 + 1 ------------------------------

   GEMESSEN: Die Karte ist innen 536 px breit, die Regel verlangte je
   Spalte mindestens 130 px. Vier Spalten bräuchten 4 × 130 + 3 × 8 =
   544 px. Acht Pixel zu wenig -- also drei Spalten, und die vierte Zahl
   rutschte allein in eine zweite Reihe. Genau so steht sie in Filipes
   Bildschirmfoto.

   DIE LEHRE IST NICHT „130 auf 122 senken". Das wäre dieselbe Rechnung
   mit einer anderen Zahl, und beim nächsten Umbau stünde sie wieder
   knapp daneben. Vier Dinge sehen nur in 1 × 4, 2 × 2 oder 4 × 1
   richtig aus; 3 + 1 ist die eine Anordnung, die IMMER falsch wirkt --
   und eine `auto-fit`-Regel kann jederzeit dort landen. Zwei Spalten
   können es nicht. */
.tperson__zahlen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Der Grund der Karte --------------------------------------------

   Vorher: ein flacher Verlauf mit einem Hauch Rollenfarbe oben links.
   Auf der Team-Seite stehen zwei dieser Karten nebeneinander, jede
   fast bildschirmhoch -- das ist die größte Fläche der Seite, und sie
   war die ruhigste.

   Jetzt vier Lagen, von unten nach oben gelesen:
     1. die tiefe Grundfarbe (bleibt, sie trägt die Lesbarkeit),
     2. ein Lichtschein aus der oberen linken Ecke im Ton der Person,
     3. ein zweiter, kühler aus der unteren rechten -- die beiden
        ergeben die Diagonale, die das ganze Haus führt,
     4. das feine Raster darüber.

   AUGENSCHONEND BLEIBT PFLICHT: Keine Lage geht über 14 % Deckkraft,
   und die hellste Stelle liegt in einer ECKE, nicht hinter dem Text.
   Ein Schein hinter einer Zahl macht sie schwerer lesbar, egal wie
   schön er ist. */
.tperson {
  background:
    /* 1. Kantenlicht an der Oberkante -- die Karte bekommt eine Kante,
          die das Licht faengt, statt an einer Linie aufzuhoeren. */
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 11%),
    /* 2. das feine Raster */
    var(--raster),
    /* 3. ein schmaler Lichtstreifen quer ueber die Karte -- er gibt der
          Flaeche eine Richtung, ohne irgendwo hell genug zu werden, um
          Text zu stoeren (3 %). */
    linear-gradient(115deg, transparent 26%, rgba(255, 255, 255, .032) 45%, transparent 60%),
    /* 4. der Schein aus der oberen linken Ecke.

          HIER STAND ZUERST `var(--r)` -- die Farbe der STUFE. Das war
          logisch und unsichtbar: Bei "Probe" ist sie ein gedaempftes
          Grau, und ein Grauschein auf fast Schwarz ist kein Schein.
          Gemessen am Bildschirmfoto sah die Karte nach der Aenderung
          genauso aus wie davor. Jetzt tragen die beiden Ecken die
          Hausfarben -- Lila oben links, Babyblau unten rechts --, und
          die Stufe bleibt dort, wo sie hingehoert: im Kantenlicht und
          am Namensschild. */
    radial-gradient(135% 105% at 0% 0%,
      color-mix(in srgb, var(--violett) 26%, transparent), transparent 58%),
    /* 5. der Gegenschein unten rechts */
    radial-gradient(125% 95% at 100% 100%,
      color-mix(in srgb, var(--akzent) 18%, transparent), transparent 60%),
    /* 6. die tiefe Grundfarbe, leicht schraeg statt senkrecht */
    linear-gradient(160deg, rgba(14, 18, 30, .955), rgba(6, 9, 16, .985));
  transition: box-shadow var(--tempo), transform var(--tempo);
}
/* Beim Überfahren hebt sie sich einen Hauch -- so viel, dass man merkt,
   welche Karte man gerade liest, und so wenig, dass die Seite nicht
   zappelt. Zwei Pixel, kein Schatten-Feuerwerk. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tperson:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
  }
}

/* ---- Die Woche ------------------------------------------------------- */
/* HEUTE IST MARKIERT. Sieben gleich aussehende Kästchen zwingen dazu,
   den Wochentag im Kopf auszurechnen, um zu wissen, wo man steht. */
.tampel__tag[data-heute="ja"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 55%, transparent);
  font-weight: 800;
}
/* Ein freier Tag war GAR NICHT gefüllt -- sieben leere Rahmen sehen aus
   wie „noch nicht geladen". Jetzt eine Andeutung: sichtbar als Fläche,
   leise genug, dass belegte Tage weiterhin herausstechen. */
.tampel__tag--frei {
  background: rgba(255, 255, 255, .025);
}

/* ---- Der Weg in den Chat --------------------------------------------- */
/* 44 px HOCH, UND ZWAR GERECHNET STATT ZUSAMMENGEZAEHLT.
   Am 22.09.2026 habe ich beim Kartenumbau das Polster von 10 auf
   9 px gesenkt, um die Karte kompakter zu machen -- und damit den
   Knopf auf 42 px gedrueckt. Zwei Pixel unter der Hausregel fuer
   etwas, das man mit dem Finger trifft; gefunden hat es erst der
   Handy-Rundgang einen Tag spaeter.

   min-height statt einer Polsterzahl: Die Hoehe haengt damit nicht
   mehr daran, ob jemand spaeter am Polster oder an der Schriftgroesse
   dreht. flex + center, damit der Text dabei mittig bleibt -- ein
   Block mit min-height wuerde ihn nach oben kleben. */
.tschreiben {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  margin: 2px 0 14px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--r) 9%, transparent);
  color: var(--text); text-decoration: none; text-align: center;
  font-size: .88rem; font-weight: 600;
  transition: background var(--tempo), border-color var(--tempo);
}
.tschreiben:hover {
  background: color-mix(in srgb, var(--r) 16%, transparent);
  border-color: color-mix(in srgb, var(--r) 52%, transparent);
}
.tschreiben:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---- Der Kopf der Seite ---------------------------------------------
   Der Erklärkasten war auf 44 Zeichen begrenzt und stand dadurch auf
   einem breiten Bildschirm als schmale Säule neben viel Bild -- sechs
   Zeilen mit je vier Wörtern. Lesbar ist er zwischen 45 und 75
   Zeichen; die Grenze steht jetzt am oberen Ende dieses Bereichs und
   nicht darunter. */
.t-kopf__grenze { max-width: 68ch; }

/* =======================================================================
   DIE PERSONENKARTE, KOMPLETT ANDERS (22.09.2026)
   =======================================================================

   Filipe: „was verstehst du nicht wenn ich sage die sollen viel
   krasser geiler und übersichtlicher sein. […] und die kacheln sollen
   viel krass geiler und spezieller aussehen auch der hintergrund,
   veränder das komplett."

   Das „was verstehst du nicht" ist berechtigt: Am 20.09. hatte ich
   dieselbe Karte schon einmal angefasst und dabei nur die RECHTE HAND
   besonders gemacht. Die Modi-Karten sahen danach aus wie vorher --
   dunkles Rechteck, Raster, ein Kantenlicht in einem blassen Ton.

   ---------------------------------------------------------------------
   WAS HIER ANDERS IST -- vier Dinge, keine Effekte

   1. EIN KOPFBAND. Bis heute begann die Karte mit einem Kreis und
      einem Namen auf demselben Grund wie alles darunter. Vier Karten
      nebeneinander waren dadurch vier gleiche Rechtecke, in denen man
      den Namen SUCHEN musste. Jetzt traegt der Kopf ein eigenes Band
      in der Farbe der Stufe, bis an die Kanten der Karte (auch bis in
      die Fase -- `clip-path` an der Karte schneidet es sauber ab).
      Damit ist auf zwei Meter Entfernung erkennbar, wessen Karte das
      ist und wo sie anfaengt.

   2. DER HINTERGRUND IST NICHT MEHR NEUTRAL. Er hatte einen
      Farbschimmer von 11 % aus einer Ecke; bei den alten, blassen
      Stufentoenen war davon nichts zu sehen. Jetzt laeuft die Farbe
      vom Kopfband aus nach unten aus und die Karte steht auf einer
      DUNKLEREN Grundplatte als zuvor. Beides zusammen: mehr Farbe UND
      besserer Textkontrast -- das ist kein Widerspruch, weil die Farbe
      oben liegt und der Text unten.

   3. DER KREIS WIRD EIN ZEICHEN. 44 px ohne Rand waren ein Punkt
      neben einem Wort. 52 px mit einem Ring in der Stufenfarbe sind
      ein Abzeichen. Derselbe Ring liegt um das Foto, wenn es eins
      gibt -- ein Mensch mit Bild und einer ohne sollen gleich viel
      Platz und dieselbe Form haben.

   4. DIE ZAHLEN STEHEN AUF EINEM SOCKEL. Sie sind der Teil, den man
      im Vorbeigehen liest. Ein eigener, dunklerer Streifen am Fuss
      trennt sie von den Balken darueber, statt sie in dieselbe Flaeche
      zu mischen.

   AUGENSCHONEND BLEIBT ES: keine Bewegung, kein Leuchten, kein
   Flackern. Die staerkste Farbfaeche der Karte liegt bei 30 % Deckung
   ueber einem fast schwarzen Grund. Was sich geaendert hat, ist die
   ANORDNUNG -- und die kostet die Augen nichts.
   ======================================================================= */

/* ---- 1. Das Kopfband -------------------------------------------------- */
/* `z-index: 1` liegt zwischen Raster (::after, 0) und Kantenlicht
   (::before, 2). Ohne ihn verschwaende das Band unter dem Raster --
   nicht falsch, aber flau. */
.tperson__kopf {
  position: relative; z-index: 1;
  margin: -17px -19px 14px;
  padding: 15px 19px 13px;
  gap: 13px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--r) 30%, transparent) 0%,
      color-mix(in srgb, var(--r) 12%, transparent) 52%,
      color-mix(in srgb, var(--r) 4%, transparent) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12));
  border-bottom: 1px solid color-mix(in srgb, var(--r) 36%, transparent);
}
@media (max-width: 620px) {
  /* Die Karte hat auf schmalen Schirmen weniger Polster (14/15 px),
     also braucht das Band andere Gegenmasse. Eine feste Zahl gehoert
     dorthin, wo das steht, was sie ausgleicht. */
  .tperson__kopf { margin: -14px -15px 12px; padding: 13px 15px 11px; }
}

/* ---- 2. Der Grund ----------------------------------------------------- */
/* Die deckende Grundfarbe setzt weiterhin module.css (#070b12) -- sie
   muss decken, weil die Karte auf dem Buehnenbild der Seite liegt.
   Hier stehen nur die Ebenen DARUEBER. */
.tperson {
  background:
    /* Der Schein, der unter dem Kopfband hervorkommt und nach etwa
       einem Drittel der Karte ausgelaufen ist. */
    linear-gradient(180deg,
      color-mix(in srgb, var(--r) 13%, transparent) 0%,
      color-mix(in srgb, var(--r) 4%, transparent) 22%,
      transparent 38%),
    /* Eine sehr feine Schraffur -- sie gibt der Flaeche eine Oberflaeche,
       ohne ein Muster zu sein. 2,2 % Weiss auf Schwarz ist an der
       Grenze des Sichtbaren, und genau dort soll sie liegen. */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .022) 0 1px, transparent 1px 10px),
    /* Und die Platte darunter, dunkler als vorher. */
    linear-gradient(178deg, rgba(8, 11, 18, .97), rgba(4, 6, 11, .99));
}

/* ---- 3. Das Zeichen --------------------------------------------------- */
.tperson__zeichen,
.tperson__bild {
  width: 52px; height: 52px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--r) 55%, transparent),
    0 0 0 3px rgba(0, 0, 0, .45);
}
.tperson__zeichen {
  font-size: 1.24rem;
  border-color: color-mix(in srgb, var(--r) 20%, transparent);
  background: color-mix(in srgb, var(--r) 22%, #070a11);
}
.tperson__bild { border-color: transparent; }

/* Der Name traegt das Band -- er ist der Grund, warum man hinsieht. */
.tperson__kopf .tperson__name {
  font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em;
}

/* ---- 4. Das Zahlenband ------------------------------------------------ */
/* EIN BAND, KEIN SOCKEL -- und das ist ein Unterschied, der beinahe
   danebengegangen waere. Ein Sockel klebt am unteren Rand der Karte;
   dafuer muesste er das letzte Element sein. Er ist es NICHT: Unter
   den Zahlen kommen auf der Team-Lage noch die drei Bereichsbalken,
   und auf team.html noch mehr. Ein negativer Aussenabstand nach unten
   haette die Balken unter das Band geschoben.

   Gepruefte Reihenfolge in teamlage.js: Kopf, Merkmale, Ampel,
   Stufen, Schreiben, ZAHLEN, Balken. Also blutet das Band nur zu den
   Seiten aus und traegt oben wie unten eine Kante -- das funktioniert
   an jeder Stelle der Karte, auch wenn morgen etwas dazwischen kommt. */
.tperson__zahlen {
  position: relative; z-index: 1;
  margin: 14px -19px;
  padding: 13px 19px;
  /* NUR ANGEDUNKELT, NICHT ZUGEDECKT. Zuerst stand hier schwarz mit
     34-52 % -- im Bildschirmfoto wurde daraus ein schwarzer Riegel
     quer durch die Karte, waehrend die Mitte den lila Himmel des
     Hauses zeigte. Drei verschiedene Flaechen uebereinander sehen
     nicht nach einer Karte aus, sondern nach drei. 14-22 % dunkelt
     genug, um die Zahlen abzusetzen, und laesst den Himmel durch. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .22));
  border-top: 1px solid color-mix(in srgb, var(--r) 20%, rgba(255, 255, 255, .06));
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
/* Steht es doch einmal ganz unten (keine Balken), soll die Karte nicht
   mit einer Kante mitten im Polster aufhoeren. */
.tperson__zahlen:last-child {
  margin-bottom: -19px; padding-bottom: 16px; border-bottom: 0;
}
@media (max-width: 620px) {
  .tperson__zahlen { margin: 12px -15px; padding: 12px 15px; }
  .tperson__zahlen:last-child { margin-bottom: -16px; padding-bottom: 14px; }
}

/* ---- 5. Fuenf Stufenknoepfe statt drei -------------------------------- */
/* Bei fuenf Knoepfen auf einer 300 px breiten Karte wird aus einer
   Reihe eine Wand. Etwas schmaler und ein engerer Abstand halten sie
   auf zwei Zeilen statt auf drei -- gemessen, nicht geschaetzt. */
.tstufen { gap: 5px; }
.tstufen__knopf { padding: 6px 10px; font-size: .75rem; }

@media (forced-colors: active) {
  .tperson__kopf { border-bottom: 1px solid CanvasText; }
  .tperson__zahlen { border-top: 1px solid CanvasText; }
  .tperson__zeichen, .tperson__bild { box-shadow: none; border: 1px solid CanvasText; }
}

/* ---- 6. Die Karte wird kuerzer --------------------------------------- */
/* GEMESSEN, BEVOR ETWAS GEAENDERT WURDE (22.09.2026, 1420 px breit):
   Karte 781 px hoch, davon Kopf 82, Merkmale 28, Ampel 95,
   Schreiben-Knopf 60, ZAHLEN 167, BALKEN 276. Die beiden letzten
   machen mehr als die Haelfte aus -- also wird dort gekuerzt und
   nicht dort, wo es am leichtesten faellt.

   Filipe zu einer anderen Seite, dieselbe Sache: „es ist alles so
   lang gezogen, muss ewig scrollen um alles zu sehen das ist uncool."
   Gekuerzt wird der Leerraum, nicht der Inhalt: Es steht hinterher
   dasselbe da. */
.tperson .tz { padding: 8px 11px; }
.tperson .tz__schild { line-height: 1.3; }
.tperson .tfort { gap: 7px; margin-top: 12px; padding-top: 11px; }
.tperson .tfort__zeile { padding: 9px 11px; gap: 5px; }
.tperson .tampel { margin-top: 12px; }
.tperson .tschreiben { margin: 2px 0 10px; padding: 9px 14px; }

/* ---- 7. Die Stufenknoepfe tragen ihre eigene Farbe -------------------- */
/* IM BILDSCHIRMFOTO VOM 22.09. WAREN ALLE FUENF BABYBLAU, auch der
   gewaehlte. Der Knopf "Senior" fuehrte also zu einer orangen Karte,
   sah selbst aber aus wie "Standard". Filipe: „jede seine eigene
   farbe, stark erkennbar" -- das gilt fuer die Stelle, an der man die
   Stufe WAEHLT, mindestens so sehr wie fuer die, an der sie steht.

   Der gewaehlte Knopf ist gefuellt (wie bisher), die uebrigen tragen
   ihren Ton nur angedeutet: als Schrift und Rand. Fuenf gefuellte
   Pillen nebeneinander waeren Konfetti; fuenf angedeutete sind eine
   Leiter, die man von links nach rechts liest.

   `--st` steht je Knopf am `data-stufe`, das Skript setzt es ohnehin.
   Die Farbwerte sind dieselben fuenf wie oben -- dass sie
   uebereinstimmen, weist pruef-team-stufen.mjs nach. */
.tstufen__knopf[data-stufe="probe"]      { --st: #8aa5ff; }
.tstufen__knopf[data-stufe="standard"]   { --st: #00c2c7; }
.tstufen__knopf[data-stufe="fort"]       { --st: #8dbe00; }
.tstufen__knopf[data-stufe="senior"]     { --st: #ff8511; }
.tstufen__knopf[data-stufe="vertretung"] { --st: #ff6ad0; }

.tstufen__knopf[data-stufe] {
  color: color-mix(in srgb, var(--st) 72%, #e8f1fa);
  border-color: color-mix(in srgb, var(--st) 30%, transparent);
  background: color-mix(in srgb, var(--st) 7%, transparent);
}
.tstufen__knopf[data-stufe]:hover:not([disabled]) {
  color: color-mix(in srgb, var(--st) 40%, #ffffff);
  background: color-mix(in srgb, var(--st) 15%, transparent);
  border-color: color-mix(in srgb, var(--st) 48%, transparent);
}
.tstufen__knopf[data-an="ja"][data-stufe] {
  color: #0a121e;
  background: color-mix(in srgb, var(--st) 84%, #ffffff);
  border-color: transparent;
}
@media (forced-colors: active) {
  .tstufen__knopf[data-an="ja"][data-stufe] { border: 2px solid Highlight; }
}