/* ===================================================================
   Dashboard -- die Gesamtuebersicht je Creator.

   Grundgedanke: eine Karte je Person, in der Reihenfolge des Drucks.
   Ruhige Karten fuer alles, was laeuft; nur was Handlung braucht,
   bekommt Farbe. Waere jede Zahl bunt, waere keine mehr auffaellig --
   und die Augen haetten nichts, worauf sie sich ausruhen koennen.
   =================================================================== */

/* ---------- Summen oben ---------------------------------------------------- */

.summen {
  display: grid; gap: 8px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.summe {
  display: grid; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.summe[data-warn="ja"] {
  border-color: rgba(255, 154, 162, .32);
  background: rgba(255, 154, 162, .05);
}
.summe__zahl {
  font-size: 1.6rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.summe[data-warn="ja"] .summe__zahl { color: var(--warn); }
.summe__name {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-still);
}

/* ---------- Karten --------------------------------------------------------- */

.creator-liste {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
}
.creator {
  position: relative; overflow: hidden;
  padding: 18px 20px 16px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche);
}
/* Ein schmaler Streifen an der Kante statt einer eingefaerbten Karte:
   sichtbar genug zum Ueberfliegen, ruhig genug zum Lesen. */
.creator::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--akzent), transparent 85%);
  opacity: .35;
}
.creator[data-achtung="ja"] {
  border-color: rgba(255, 154, 162, .26);
}
.creator[data-achtung="ja"]::before {
  background: linear-gradient(180deg, var(--warn), transparent 85%);
  opacity: .75;
}

.creator__kopf {
  display: flex; gap: 18px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
  margin-bottom: 15px;
}
.creator__wer { min-width: 0; }
.creator__name {
  margin: 0 0 3px; font-size: 1.14rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--text);
}
.creator__unter { margin: 0; font-size: .8rem; color: var(--text-still); }
.creator__unter[data-kalt="ja"] { color: var(--warn); opacity: .82; }

.naechstes { display: grid; gap: 2px; justify-items: end; text-align: right; flex: none; }
.naechstes__schild {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-still);
}
.naechstes__wert {
  font-size: .92rem; font-weight: 650; color: var(--text);
  text-decoration: none; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid transparent;
}
a.naechstes__wert:hover { color: var(--akzent); border-bottom-color: rgba(63, 189, 245, .45); }
.naechstes__wert--leer { color: var(--text-still); font-weight: 500; }

/* ---------- Zahlenreihe ---------------------------------------------------- */

.werte {
  display: grid; gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.wert {
  display: grid; gap: 1px; padding: 9px 4px 8px;
  text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: var(--flaeche);
  transition: border-color var(--tempo), background var(--tempo);
}
a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .06); }
.wert__zahl {
  font-size: 1.22rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--text);
}
/* Eine Zeile, ohne Umbruch: "ERLEDIGT 30 T." brach sonst als einziges
   Feld um und zog die ganze Reihe in die Hoehe. Lieber eine Spur
   kleiner als sechs Kaesten, von denen einer aus der Reihe faellt. */
/* 0,7 rem = 11,2 px statt 9,6. Unter 10 px ist auch auf einem grossen
   Bildschirm keine Beschriftung mehr, sondern ein Muster -- und es sind
   ausgerechnet die Woerter, die den Zahlen darueber ihre Bedeutung
   geben ("ueberfaellig", "dringend", "offen"). Auf dem Handy stand
   laengst eine Ausnahme auf 0,75 rem; nur der Rechner war vergessen
   worden. */
.wert__name {
  font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-still);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Eine Null ist eine gute Nachricht -- sie darf zuruecktreten. */
.wert[data-leer="ja"] { background: rgba(255, 255, 255, .016); }
.wert[data-leer="ja"] .wert__zahl { color: var(--text-still); font-weight: 600; }
.wert[data-warn="ja"] {
  border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .07);
}
.wert[data-warn="ja"] .wert__zahl { color: var(--warn); }
/* EIN ECHTER FARBWERT, kein halbdurchsichtiges Rosa (06.09.2026).

   Hier stand `rgba(255, 154, 162, .8)`. Halbdurchsichtige Schrift
   nimmt die Farbe von dem an, was zufaellig dahinterliegt -- sie
   sieht so lange gut aus, wie der Untergrund dunkel bleibt, und
   wird still unlesbar, sobald sich daran etwas aendert. Gemessen
   von pruef-buehne an echten Bildpunkten: 4,05:1 statt der
   noetigen 4,5:1 fuer "Ueberfaellig".

   Derselbe Fehler steht zwei Dateien weiter schon als Warnung in
   gate.css: "Neutral braucht einen echten Farbwert.
   Halbdurchsichtiges Weiss ergab in der Messung 1,1:1." Es hilft
   offenbar nichts, ihn EINMAL aufzuschreiben. */
.wert[data-warn="ja"] .wert__name { color: var(--warn); }

/* ---------- Start-Check ---------------------------------------------------- */

.fortschritt {
  display: block; margin-top: 13px; padding: 11px 13px 12px;
  text-decoration: none;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche);
  transition: border-color var(--tempo);
}
.fortschritt:hover { border-color: var(--rand-hell); }
.fortschritt__zeile {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 8px;
}
.fortschritt__schild {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-still);
}
.fortschritt__text { font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.fortschritt__warn {
  margin-left: auto; padding: 1px 8px;
  font-size: .7rem; font-weight: 650; color: var(--warn);
  background: rgba(255, 154, 162, .1);
  border: 1px solid rgba(255, 154, 162, .26); border-radius: 999px;
}
.fortschritt__balken {
  display: block; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.fortschritt__fuellung {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.fortschritt__fuellung[data-warn="ja"] {
  background: linear-gradient(90deg, rgba(255, 154, 162, .55), var(--warn));
}
.fortschritt[data-fertig="ja"] .fortschritt__text { color: var(--akzent); }

.creator__luecke {
  display: block; margin: 10px 0 0; padding: 8px 12px;
  font-size: .78rem; color: var(--text-leise); text-decoration: none;
  border: 1px dashed var(--rand); border-radius: var(--radius-klein);
}
.creator__luecke:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }

/* ---------- Die Zahlen in der Karte (06.09.2026) --------------------------

   Eine eigene Zeile unter den Arbeitszahlen, durch eine feine Linie
   abgesetzt: Es sind zwei verschiedene Sorten Auskunft. Oben steht, was
   WIR schulden (überfällig, im Review), unten, was der Kanal HERGIBT.
   Ohne die Trennung liest man sie als eine Reihe und vergleicht Zahlen,
   die nichts miteinander zu tun haben. */
.kzahlen {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 12px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--rand);
  text-decoration: none; color: inherit;
}
.kzahlen:hover .kzahlen__wert, .kzahlen:focus-visible .kzahlen__wert { color: var(--akzent); }
.kzahlen[data-leer="ja"] { border-top-style: dashed; }

.kzahlen__feld { display: grid; gap: 1px; min-width: 0; }
.kzahlen__name {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-still);
}
.kzahlen__wert {
  font-size: 1.05rem; color: var(--text);
  /* Tabellenziffern: gleiche Breite je Ziffer, damit die Werte mehrerer
     Karten untereinander auf derselben Stelle sitzen. */
  font-variant-numeric: tabular-nums;
  transition: color var(--tempo);
}
.kzahlen__wandel { margin-left: 7px; font-size: .8rem; }
/* Gedeckt, nicht grell -- eine Auskunft, kein Alarm. */
.kzahlen__wandel[data-richtung="hoch"]   { color: #6fc38a; }
.kzahlen__wandel[data-richtung="runter"] { color: #e08c93; }
.kzahlen__wandel[data-richtung="gleich"] { color: var(--text-still); }

.kzahlen__leer { font-size: .82rem; color: var(--text-still); }

/* ---------- Die Frühwarnung ------------------------------------------------

   Bernstein, nicht Rot. "Hier würde ich nachfassen" ist ein Auftrag,
   kein Fehler -- und Rot wäre auf einer Seite, die man jeden Morgen
   aufmacht, nach drei Tagen Tapete. Dieselbe Farbe wie das Merkzeichen
   in den Bereichen, aus demselben Grund. */
.warnblock { margin: 0 0 26px; }

.warnliste {
  display: grid; gap: 12px;
  /* min(320px, 100%) statt 320px. Eine feste Mindestbreite ist auf einem
     320-px-Schirm groesser als der Platz, der nach den Raendern uebrig
     bleibt -- die Karte stand 9 px aus dem Bild (gemessen von
     pruef-breiten). Dieselbe Schreibweise wie bei .creator-liste und
     .summen zwei Abschnitte weiter oben; ich habe sie hier nur nicht
     uebernommen. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.warnkarte {
  padding: 14px 16px 12px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(217, 164, 65, .07), transparent 68%),
    var(--flaeche);
  border: 1px solid rgba(217, 164, 65, .28);
  border-radius: var(--radius-klein);
}
/* min-width: 0 UND umbrechen duerfen (06.09.2026).

   `minmax(min(320px, 100%), 1fr)` begrenzt die SPALTE -- nicht das, was
   darin steht. Solange die Karte ihren Mindestinhalt nicht unterbieten
   darf, waechst die Spalte trotzdem mit: Bei 320 px stand sie 9 px aus
   dem Bild, weil Name und "Schreiben"-Knopf nebeneinander bleiben
   wollten. Beides zusammen loest es, einzeln keines von beiden. */
.warnkarte { min-width: 0; }
.warnkarte__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  flex-wrap: wrap; min-width: 0;
}
/* Ein sehr langer Name ohne Leerzeichen ("SpongBobSchwammKopf") ist
   sonst selbst breiter als der Schirm. */
.warnkarte__name, .warnsignal__text { overflow-wrap: anywhere; }
.warnkarte__name {
  font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
  /* EIN FINGERZIEL, KEIN WORT. Als schlichter Inline-Link war der Kasten
     genau so gross wie der Name -- bei "Tili" 22 x 25 px. Das Mindestmass
     nach WCAG 2.2 (2.5.8) sind 24 x 24; darunter trifft man mit dem
     Daumen daneben, und zwar ausgerechnet bei kurzen Namen. Gemessen von
     pruef-handy auf allen drei Geraeten.

     Die negativen Aussenabstaende heben die Polsterung optisch wieder
     auf: Der Name steht danach exakt dort, wo er vorher stand, hat aber
     eine Flaeche, die man trifft. */
  display: inline-flex; align-items: center;
  min-width: 44px; min-height: 32px;
  padding: 4px 8px; margin: -4px -8px;
  border-radius: 8px;
}
.warnkarte__name:hover, .warnkarte__name:focus-visible {
  background: rgba(255, 255, 255, .05);
}


/* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
   ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */
.warnkarte__weg {
  flex: none;
  padding: 5px 12px; min-height: 32px;
  display: inline-flex; align-items: center;
  font-size: .8rem; color: var(--text-leise); text-decoration: none;
  border: 1px solid var(--rand); border-radius: 999px;
  transition: color var(--tempo), border-color var(--tempo);
}
.warnkarte__weg:hover, .warnkarte__weg:focus-visible {
  color: var(--akzent); border-color: rgba(63, 189, 245, .35);
}

.warnkarte__signale { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.warnsignal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding-left: 14px; position: relative;
}
/* Ein kleiner Punkt statt eines Aufzählungszeichens -- sechs Signale
   untereinander mit Spiegelstrichen sähen aus wie eine Mängelliste. */
.warnsignal::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(217, 164, 65, .75);
}
.warnsignal__text { font-size: .84rem; line-height: 1.55; color: var(--text); }
.warnsignal__beleg {
  font-size: .8rem; color: var(--text-still); font-variant-numeric: tabular-nums;
}

/* ---------- Rest ----------------------------------------------------------- */

.stand {
  margin: 20px 0 0; font-size: .74rem; color: var(--text-still); text-align: right;
}

@media (max-width: 620px) {
  .creator-liste { grid-template-columns: 1fr; }
  .creator { padding: 16px 15px 14px; }
  /* Sechs Spalten waeren auf dem Handy je 45 px breit -- die Beschriftung
     bricht dann mitten im Wort. Zwei Reihen zu dritt lesen sich sauber. */
  .werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator__kopf { gap: 10px; }
  .naechstes { justify-items: flex-start; text-align: left; }
  .summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stand { text-align: left; }

  /* Drei Zahlen nebeneinander lassen auf 360 px je 100 px -- "Ø
     Verweildauer" bricht dann in drei Zeilen um. Zwei Spalten, die
     dritte darunter. */
  .kzahlen { gap: 10px 20px; }
  .warnliste { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wert, .fortschritt, .fortschritt__fuellung { transition: none; }
}

/* Der einmalige Zugangscode. Gross, gesperrt, in gleicher Zeichenbreite
   und zum Markieren freigegeben -- er wird abgeschrieben oder kopiert,
   und beides muss auf Anhieb gelingen. `user-select: all` markiert ihn
   mit einem Klick vollstaendig; ein halb markierter Code ist ein Anruf
   am naechsten Tag. */
.code-anzeige {
  margin: 6px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-klein);
  border: 1px solid color-mix(in srgb, var(--k-gold) 34%, transparent);
  background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 2px 5px -2px rgba(0, 0, 0, .7);
  color: #f0d9a8;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.16rem; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all;
}

/* =====================================================================
   SECHS SORTEN, SECHS FARBEN (screen16, 09.09.2026)

   Filipe: "das ist schon richtig gut aber ich will alles noch viel
   spezieller, auch gerne mit mehreren farben arbeiten oder so damit
   die wichtigsten sachen auch auffallen bitte."

   DIE FARBE FOLGT DER BEDEUTUNG, NICHT DER REIHENFOLGE. Sie haengt an
   `data-sorte` (einem Schluessel aus uebersicht.js), nicht an
   `:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll
   nicht sechs Farben verrutschen lassen.

   DIE WICHTIGE ENTSCHEIDUNG IST ABER NICHT WELCHE FARBE, SONDERN WANN.
   Sechs dauerhaft leuchtende Felder waeren sechs gleich laute Rufe --
   und damit genau so wenig Hilfe wie sechs gleich blaue. Deshalb:

     NULL   bleibt grau. Eine Null ist eine gute Nachricht, sie darf
            zuruecktreten (die Regel dafuer stand hier schon).
     >0     bekommt ihre Farbe -- am Zahlenwert, an einer feinen
            Oberkante und an einem sehr leisen Flaechenton.

   Auf einer Karte, auf der alles auf Null steht, aendert sich damit
   nichts. Auf einer, auf der drei Sachen ueberfaellig sind, sieht man
   genau die. Das ist der Unterschied zwischen Farbe als Schmuck und
   Farbe als Auskunft.

   ROT UND BERNSTEIN SIND JETZT ZWEI FARBEN. Vorher faerbte `data-warn`
   ueberfaellig UND dringend in dasselbe Rot -- das eine ist eine
   versaeumte Frist, das andere eine Sache, die schnell muss. Zwei
   verschiedene Alarme, die gleich aussehen, sind ein Alarm.

   AUGENSCHONEND: Alle sechs Toene sind gedeckt (keiner ueber 78 %
   Saettigung), die Flaeche traegt hoechstens 9 Prozent, und nichts
   pulsiert. Die Beschriftung bleibt in jedem Fall lesbar -- sie ist
   der eigentliche Traeger, die Farbe verstaerkt nur.
   ================================================================== */
.wert[data-sorte="ueberfaellig"] { --wton: #ff6b78; }   /* versaeumt   */
.wert[data-sorte="dringend"]     { --wton: #e8a94e; }   /* eilt        */
.wert[data-sorte="offen"]        { --wton: #7ec8f2; }   /* liegt an    */
.wert[data-sorte="arbeit"]       { --wton: #a78bfa; }   /* laeuft      */
.wert[data-sorte="review"]       { --wton: #cbd7e6; }   /* wartet auf  */
.wert[data-sorte="erledigt"]     { --wton: #5fc99a; }   /* geschafft   */

/* Nur wenn wirklich etwas da ist. `:not([data-leer])` statt einer
   zweiten Klasse: Der Zustand steht schon im Baum, er muss nicht
   doppelt gefuehrt werden. */
.wert[data-sorte]:not([data-leer="ja"]) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wton) 9%, transparent), transparent 70%),
    var(--flaeche);
  box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--wton) 62%, transparent);
}
.wert[data-sorte]:not([data-leer="ja"]) .wert__zahl {
  color: color-mix(in srgb, var(--wton) 86%, #ffffff);
}
.wert[data-sorte]:not([data-leer="ja"]) .wert__name {
  color: color-mix(in srgb, var(--wton) 52%, #c9d6e4);
}
/* Beim Zeigen kommt die Kante voll -- naeherkommen statt aufleuchten,
   dieselbe Sprache wie ueberall im Haus. */
a.wert[data-sorte]:not([data-leer="ja"]):hover {
  border-color: color-mix(in srgb, var(--wton) 45%, transparent);
  box-shadow: inset 0 2px 0 var(--wton);
}
/* Die alte Warnregel faerbte ueberfaellig und dringend gleich rot.
   Sie tritt zurueck, wo eine Sorte steht -- sonst gaebe es fuer
   dieselben zwei Felder zwei Wahrheiten, und die spaetere gaebe still
   den Ausschlag. Genau dieses Muster hat mich in dieser Nacht
   siebenmal aufgehalten. */
.wert[data-warn="ja"][data-sorte] .wert__zahl,
.wert[data-warn="ja"][data-sorte] .wert__name {
  color: color-mix(in srgb, var(--wton) 86%, #ffffff);
}
.wert[data-warn="ja"][data-sorte] {
  border-color: color-mix(in srgb, var(--wton) 34%, transparent);
}