dogfather-universe/workspace/assets/css/team.css

/* =====================================================================
   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. */
.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; }

/* 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 DREI STUFEN steigern sich sichtbar, ohne dass eine davon nach
   Rang aussieht: gleiche Form, nur mehr Farbe. Probe bleibt bewusst
   das ruhigste Schild -- wer neu ist, soll nicht markiert wirken. */
.tmerkmal--probe {
  color: color-mix(in srgb, #9fb6c6 82%, #ffffff);
  border-color: rgba(159, 182, 198, .3);
  background: rgba(159, 182, 198, .08);
}
.tmerkmal--standard {
  color: color-mix(in srgb, #7fc4e8 82%, #ffffff);
  border-color: rgba(127, 196, 232, .34);
  background: rgba(127, 196, 232, .1);
}
.tmerkmal--senior {
  color: color-mix(in srgb, #8fd6a6 84%, #ffffff);
  border-color: rgba(143, 214, 166, .38);
  background: rgba(143, 214, 166, .12);
}

/* ---------- 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. */
.t-wartet, .t-leute {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}

/* 2. DIE STUFE ALS FARBE DER KARTE.
      Dieselben drei Toene wie die Schilder darin -- ein vierter waere
      eine zweite Sprache fuer dieselbe Sache. */
.tperson[data-stufe="probe"]    { --r: #9fb6c6; }
.tperson[data-stufe="standard"] { --r: #7fc4e8; }
.tperson[data-stufe="senior"]   { --r: #8fd6a6; }
/* 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);
}
.tampel__tag {
  display: grid; place-items: center;
  padding: 7px 0 6px; border-radius: 8px;
  font-size: .7rem; 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;
}