Zahlen bekommen eine Oberflaeche, das Dashboard bekommt Zahlen

Der Server konnte seit gestern rechnen -- und niemand konnte etwas
eintragen. Ein Rechenwerk ohne Oberflaeche ist kein Modul, sondern ein
Versprechen. Das ist jetzt eingeloest:

  * leistung.html: Wochenkarten (Wert, Vergleich zur Vorwoche,
    Verlaufslinie), Ziele als Fortschrittsbalken, die letzten 14 Tage
    zum Eintragen -- auch die LEEREN, denn eine Luecke ist selbst die
    Auskunft. Import aus dem TikTok-Export mit Vorschau VOR dem
    Schreiben.
  * Kachel "Zahlen" als erste der Gruppe "Rund um den Creator", eigenes
    Zeichen (steigende Linie, kein zweites Balkendiagramm).
  * Dashboard: jede Creator-Karte traegt jetzt Diamanten, LIVE-Tage und
    Verweildauer. Bis heute zeigte sie ausschliesslich ARBEIT -- ein
    Creator konnte null ueberfaellige Aufgaben haben und gleichzeitig
    seit drei Wochen einbrechen, und die Karte sah tadellos aus.
  * Die Fruehwarnung steht oben im Dashboard. Sechs benannte Signale im
    Klartext mit Beleg, bewusst OHNE Punktzahl -- ein Wert wie
    "Abwanderungsrisiko 73" klingt nach Wissenschaft und ist eine
    Behauptung, der man nicht widersprechen kann.
  * chat.html?mit=<person>: der Weg von der Warnung ins Gespraech. Gab
    es vorher nicht; ein Hinweis ohne Weg dahin ist nur ein schlechtes
    Gewissen.

GEFUNDEN VON DEN PRUEFUNGEN, nicht von der Theorie:

  1. Die Verlaufslinie zeichnete fuer vier der sieben Groessen NICHTS.
     Der Server liefert im Verlauf nur drei Reihen; fuer den Rest kam
     undefined an. `=== null` faengt das nicht, Number(undefined) ist
     NaN, und ein <polyline points="NaN,NaN"> ist im DOM vorhanden und
     auf dem Bildschirm unsichtbar -- ohne Fehlermeldung. Die Pruefung
     misst deshalb die PUNKTE, nicht die Anwesenheit des Elements.
  2. Fuenf Schriftgroessen im CHAT lagen unter 11,5 px (.68/.7 rem) und
     waren seit vorgestern drin. Die Grundlinie der Groessenpruefung
     stand auf 43, gemessen wurden 48. Nicht die Grundlinie angehoben,
     sondern die fuenf Stellen behoben: Eine Grundlinie, die mitwaechst,
     ist keine mehr.

pruef-leistung-optik.mjs: 57 Pruefungen, zwei echte Browser, Gegenprobe
zu jeder Aussage -- auch dazu, dass die Vorschau vor dem Bestaetigen
wirklich noch nichts geschrieben hat und dass ein Creator seine Zahlen
zwar SIEHT, sie aber weder eintragen noch die Fruehwarnung ueber sich
lesen kann (auch nicht ueber eine von Hand gebaute Anfrage).

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/chat.css

@@ -178,7 +178,7 @@
 }
 .chat-raum__zeit {
   flex: none;
-  font-size: .7rem; color: var(--text-still);
+  font-size: .75rem; color: var(--text-still);
   font-variant-numeric: tabular-nums;
 }
 .chat-raum__vorschau {
@@ -266,7 +266,7 @@
   grid-column: 1;
   width: 30px; height: 30px; border-radius: 50%;
   display: grid; place-items: center;
-  font-size: .7rem; font-weight: 700;
+  font-size: .75rem; font-weight: 700;
   color: var(--r);
   background: color-mix(in srgb, var(--r) 13%, transparent);
   border: 1px solid color-mix(in srgb, var(--r) 28%, transparent);
@@ -326,7 +326,7 @@
   margin-top: 4px;
 }
 .chat-nachricht__zeit {
-  font-size: .68rem; color: var(--text-still);
+  font-size: .75rem; color: var(--text-still);
   font-variant-numeric: tabular-nums;
 }
 /* Der Zurücknehmen-Knopf erscheint erst beim Darüberfahren -- er ist
@@ -334,7 +334,7 @@
    Geräten ohne Zeiger steht er immer da (siehe unten). */
 .chat-nachricht__weg-knopf {
   padding: 0; border: 0; background: none;
-  font: inherit; font-size: .68rem;
+  font: inherit; font-size: .75rem;
   color: var(--text-still); cursor: pointer;
   opacity: 0; transition: opacity .16s ease, color .16s ease;
 }
@@ -389,7 +389,7 @@
 .chat-wahl__titel {
   margin: 0 0 7px;
   display: flex; align-items: center; gap: 7px;
-  font-size: .68rem; font-weight: 700;
+  font-size: .75rem; font-weight: 700;
   letter-spacing: .08em; text-transform: uppercase;
   color: var(--text-still);
 }

workspace/assets/css/leistung.css

@@ -0,0 +1,284 @@
+/* ===================================================================
+   Zahlen. Baut auf gate.css, start.css und aufgaben.css auf.
+
+   DER GESTALTERISCHE GRUNDSATZ dieser Seite ist ein anderer als auf den
+   uebrigen: Hier steht nicht die Flaeche im Vordergrund, sondern die
+   ZAHL. Alles andere -- Rahmen, Beschriftung, Vergleich, Linie --
+   ordnet sich ihr unter und wird leiser, je weiter es von ihr weg ist.
+
+   Deshalb:
+     * Die Zahl in Tabellenziffern (font-variant-numeric), damit
+       untereinanderstehende Werte auf derselben Stelle sitzen. Ohne das
+       tanzen 1.240 und 987 gegeneinander, und man vergleicht schlechter.
+     * Der Vergleich in GEDECKTEM Gruen/Rot, nicht in Signalfarbe. Ein
+       Minus ist eine Auskunft, kein Alarm -- und die Seite soll
+       augenschonend bleiben (Dauerregel).
+     * Die Verlaufslinie ohne Achsen, Gitter und Beschriftung. Sie
+       beantwortet genau eine Frage ("geht es hoch oder runter?"), und
+       jede weitere Linie darin macht diese Antwort langsamer.
+   =================================================================== */
+
+/* ---------- Kopf ------------------------------------------------------- */
+
+.leistung__wahl { display: grid; gap: 6px; min-width: 220px; }
+
+/* Wie vollstaendig die Woche erfasst ist. Steht neben der Ueberschrift
+   und nicht darunter: Wer die Zahlen liest, muss diesen Satz VORHER
+   gesehen haben -- eine Woche aus zwei Tagen ist etwas anderes als eine
+   aus sieben. */
+.leistung__erfassung {
+  margin: 0; font-size: 13px; color: var(--text-still);
+}
+.leistung__erfassung[data-knapp="ja"] { color: #d9a441; }
+
+.leistung__leer {
+  margin: 0; padding: 18px; text-align: center;
+  color: var(--text-leise); font-size: 14px; line-height: 1.6;
+}
+
+.leistung-woche, .leistung-ziele, .leistung-tage { margin: 0 0 30px; }
+
+/* ---------- Die Wochenkarten -------------------------------------------- */
+
+.zahlkarten {
+  display: grid; gap: 14px;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+}
+
+.zahlkarte {
+  position: relative; overflow: hidden;
+  padding: 16px 16px 12px;
+  background: var(--flaeche);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+  display: grid; gap: 4px;
+  /* Alle Karten gleich hoch, auch die ohne Verlaufslinie. Sonst
+     entsteht eine Treppe, und eine Treppe liest man als Bedeutung
+     ("die kurze Karte ist weniger wichtig"), obwohl sie nur ein
+     Nebeneffekt ist. */
+  align-content: start; min-height: 132px;
+}
+
+/* DIE LEITZAHL. Die Verweildauer ist seit 2026 die Groesse, an der der
+   Algorithmus alles aufhaengt -- sie darf nicht eine von sieben
+   gleichaussehenden Karten sein. Ein feiner Rand und ein Hauch Farbe
+   reichen; ein Kasten in Signalfarbe waere Laerm. */
+.zahlkarte[data-leit="ja"] {
+  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
+  background:
+    radial-gradient(120% 100% at 0% 0%,
+      color-mix(in srgb, var(--akzent) 9%, transparent), transparent 70%),
+    var(--flaeche);
+}
+
+.zahlkarte__name {
+  margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
+  color: var(--text-still);
+}
+
+.zahlkarte__wert {
+  margin: 0; font-size: 30px; line-height: 1.1; font-weight: 650;
+  color: var(--text);
+  /* Tabellenziffern: gleiche Breite je Ziffer. Damit stehen die Werte
+     mehrerer Karten auf derselben senkrechten Linie. */
+  font-variant-numeric: tabular-nums;
+}
+
+.zahlkarte__wandel {
+  margin: 2px 0 0; font-size: 12.5px; line-height: 1.45;
+}
+/* Gedeckt, nicht grell. Gruen und Rot sind hier Auskunft, nicht Ampel --
+   und beide bleiben ueber 4,5:1 gegen die Kachelflaeche. */
+.zahlkarte__wandel[data-richtung="hoch"]   { color: #6fc38a; }
+.zahlkarte__wandel[data-richtung="runter"] { color: #e08c93; }
+.zahlkarte__wandel[data-richtung="gleich"] { color: var(--text-still); }
+
+/* Die kleine Verlaufslinie. Sie sitzt unten in der Karte und laeuft
+   ueber die ganze Breite -- als Untergrund, nicht als eigenes Bild. */
+.zahlkarte__linie {
+  width: 100%; height: 30px; margin-top: 8px; display: block;
+  overflow: visible;
+}
+.zahlkarte__linie polyline {
+  fill: none; stroke: var(--akzent); stroke-width: 1.6;
+  stroke-linejoin: round; stroke-linecap: round;
+  /* Nicht mitskalieren: preserveAspectRatio="none" streckt das Bild in
+     die Breite und wuerde die Linie sonst hauchduenn ziehen. */
+  vector-effect: non-scaling-stroke;
+  opacity: .8;
+}
+.zahlkarte__linie circle {
+  fill: var(--akzent); stroke: none;
+  /* Der letzte Punkt ist das Jetzt. Er wird durch die Streckung zum
+     Ei -- deshalb bleibt er klein genug, dass es nicht auffaellt. */
+}
+.zahlkarte[data-leit="ja"] .zahlkarte__linie polyline { opacity: 1; }
+
+/* ---------- Ziele -------------------------------------------------------- */
+
+.zielbalken { display: grid; gap: 16px; }
+
+.zielbalken__zeile {
+  padding: 14px 16px;
+  background: var(--flaeche);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+}
+.zielbalken__kopf {
+  display: flex; justify-content: space-between; align-items: baseline;
+  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
+}
+.zielbalken__name { font-size: 14px; color: var(--text); }
+.zielbalken__zahl {
+  font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums;
+}
+
+.zielbalken__spur {
+  height: 10px; border-radius: 999px; overflow: hidden;
+  background: rgba(150, 186, 220, 0.12);
+}
+.zielbalken__fuell {
+  height: 100%; border-radius: 999px;
+  background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
+  transition: width var(--tempo);
+}
+/* Ein erreichtes Ziel wechselt die Farbe, nicht die Groesse. Ein
+   springender Balken waere Bewegung ohne Aussage. */
+.zielbalken__fuell[data-voll="ja"] {
+  background: linear-gradient(90deg, #2f8f5b, #55c184);
+}
+.zielbalken__anteil {
+  margin: 8px 0 0; font-size: 12.5px; color: var(--text-still);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zielbalken__fuell { transition: none; }
+}
+
+/* ---------- Die Tageszeilen ---------------------------------------------- */
+
+.tagetabelle {
+  display: grid; gap: 8px;
+}
+
+.tagzeile {
+  display: grid; align-items: center; gap: 6px 16px;
+  grid-template-columns: 74px 1fr auto;
+  padding: 12px 16px;
+  background: var(--flaeche);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+}
+/* EIN TAG OHNE EINTRAG BLEIBT SICHTBAR -- er ist selbst die Auskunft.
+   Er wird nur leiser, damit die erfassten Tage vorn stehen. */
+.tagzeile[data-leer="ja"] {
+  background: transparent;
+  border-style: dashed;
+  border-color: rgba(150, 186, 220, 0.13);
+}
+/* Woher die Zeile kommt. Ein schmaler Streifen links, kein Etikett:
+   Man muss es wissen KOENNEN, nicht bei jedem Blick lesen. */
+.tagzeile[data-quelle="import"] {
+  border-left: 3px solid color-mix(in srgb, var(--violett) 55%, transparent);
+}
+
+.tagzeile__datum { display: grid; gap: 1px; }
+.tagzeile__wochentag {
+  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--text-still);
+}
+.tagzeile__zahl {
+  font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
+}
+
+.tagzeile__werte {
+  display: flex; flex-wrap: wrap; gap: 6px 22px; min-width: 0;
+}
+.tagzeile__wert { display: grid; gap: 1px; min-width: 0; }
+.tagzeile__wertname {
+  font-size: 12px; letter-spacing: .05em; color: var(--text-still);
+}
+.tagzeile__wertzahl {
+  font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
+}
+.tagzeile__leer { font-size: 13.5px; color: var(--text-still); }
+
+/* Die Notiz laeuft ueber die ganze Zeilenbreite unter den Werten --
+   sie ist der Kontext, ohne den eine eingebrochene Zahl in die Irre
+   fuehrt ("krank", "Technik ausgefallen"). */
+.tagzeile__notiz {
+  grid-column: 2 / -1;
+  margin: 2px 0 0; font-size: 13px; line-height: 1.5;
+  color: var(--text-leise);
+}
+
+.tagzeile__knopf {
+  grid-row: 1; grid-column: 3;
+  padding: 8px 14px; min-height: 38px;
+  font: inherit; font-size: 13px;
+  color: var(--text-leise); cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--rand); border-radius: 999px;
+  transition: color var(--tempo), border-color var(--tempo);
+}
+.tagzeile__knopf:hover, .tagzeile__knopf:focus-visible {
+  color: var(--text); border-color: var(--rand-hell);
+}
+
+/* ---------- Der Import --------------------------------------------------- */
+
+.dialog--breit { max-width: 720px; }
+
+.import-vorschau {
+  margin: 4px 0 14px; padding: 16px;
+  background: rgba(150, 186, 220, 0.05);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+}
+
+.import-zahlen { display: flex; flex-wrap: wrap; gap: 12px 28px; }
+.import-zahl { display: grid; gap: 2px; }
+.import-zahl__wert {
+  font-size: 26px; font-weight: 650; line-height: 1.1;
+  color: var(--text); font-variant-numeric: tabular-nums;
+}
+.import-zahl__name { font-size: 12px; color: var(--text-still); }
+.import-zahl[data-warn="ja"] .import-zahl__wert { color: #d9a441; }
+
+.import-spalten {
+  margin: 14px 0 0; font-size: 13px; line-height: 1.6;
+  color: var(--text-leise);
+}
+.import-probleme {
+  margin: 10px 0 0; padding-left: 20px;
+  font-size: 12.5px; line-height: 1.7; color: #d9a441;
+}
+
+/* ---------- Handy --------------------------------------------------------- */
+
+@media (max-width: 640px) {
+  /* Die Wochenkarten werden EINSPALTIG, nicht enger. Zwei Karten
+     nebeneinander auf 360 px lassen fuer die Zahl 150 px uebrig -- ein
+     vierstelliger Wert bricht dann um, und eine umgebrochene Zahl ist
+     keine Zahl mehr. */
+  .zahlkarten { grid-template-columns: 1fr; }
+  .zahlkarte { min-height: 0; }
+  .zahlkarte__wert { font-size: 27px; }
+
+  .leistung__wahl { min-width: 0; width: 100%; }
+
+  /* Die Tageszeile wird zweizeilig: Datum und Knopf oben, die Werte
+     darunter. Drei Spalten nebeneinander quetschen den Knopf sonst auf
+     unter 44 px -- und darunter trifft man ihn mit dem Daumen nicht
+     mehr zuverlaessig. */
+  .tagzeile {
+    grid-template-columns: 1fr auto;
+    gap: 10px 12px;
+  }
+  .tagzeile__datum { grid-row: 1; grid-column: 1; }
+  .tagzeile__knopf { grid-row: 1; grid-column: 2; }
+  .tagzeile__werte { grid-row: 2; grid-column: 1 / -1; gap: 8px 18px; }
+  .tagzeile__notiz { grid-row: 3; grid-column: 1 / -1; }
+
+  .import-zahl__wert { font-size: 23px; }
+}

workspace/assets/css/uebersicht.css

@@ -172,6 +172,104 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
 }
 .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;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 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);
+}
+.warnkarte__kopf {
+  display: flex; align-items: baseline; justify-content: space-between;
+  gap: 12px; margin-bottom: 10px;
+}
+.warnkarte__name {
+  font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
+}
+.warnkarte__name:hover, .warnkarte__name:focus-visible { color: var(--akzent); }
+
+/* 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 {
@@ -188,6 +286,12 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
   .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) {