/* ===================================================================
   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); }
.wert[data-warn="ja"] .wert__name { color: rgba(255, 154, 162, .8); }

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

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

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