Der Server wusste, was du zuletzt gesehen hast — und sonst nichts

Für „wie viel habe ich letzte Woche geschaut" gab es keine Daten.
`UserItemState` ist eine Zeile je Titel: der letzte Stand. Wer einen Film
zweimal sieht, überschreibt den ersten Durchgang; wann etwas lief, wusste
der Server nur fürs jeweils letzte Mal. Nachträglich erfinden lässt sich
das nicht.

Jetzt gibt es ein Sehprotokoll: **eine Zeile je Nutzer, Tag und Titel.**
Keine Sitzungen — die brauchen ein Ende, und das kommt oft nie an, wenn
der Browser zugemacht oder das Telefon zugeklappt wird. Tagesbündel haben
diesen Lebenslauf nicht, es wird nur addiert.

**Gezählt wird, was wirklich lief.** Der Zuwachs zwischen zwei Meldungen,
gedeckelt auf die Zeit, die dazwischen verstrichen ist (mal zwei als
Toleranz für doppelte Geschwindigkeit und ausgefallene Meldungen). Sonst
ergäbe ein Sprung von Minute 5 auf Minute 90 anderthalb Stunden Sehzeit in
zehn Sekunden. Gemessen an fünf Meldungen im Abstand von elf Sekunden:
88 Sekunden statt 190.

Dabei fiel ein zweiter Fall auf: war **gar keine** Zeit verstrichen, griff
kein Deckel statt eines engen — eine frisch angelegte Zeile hätte ihre
Anfangsstelle voll mitgezählt. Wer einen Film öffnet und sofort auf Minute
fünf springt, hat keine fünf Minuten gesehen.

Im Profil stehen drei Zahlen, und jede sagt, woher sie kommt: die
aufgezeichnete Zeit fängt heute an, die Zahl gesehener Titel steht seit
jeher fest. Dazu eine Wochenkurve, die häufigsten Genres und was zuletzt
lief. **Jeder sieht nur sich selbst, auch ein Administrator** — es gibt
keinen Weg, ein fremdes Konto zu meinen.

Zwei Dinge auf dem Weg dorthin:

**Eine stellbare Uhr für die Tests.** Zwei Minuten Film lassen sich nicht
in fünf Millisekunden sehen, und das ist richtig so — prüfen liess es sich
nur, indem die Zeit vergeht, ohne sie zu verbringen.

**Ein Namenskonflikt im CSS.** Die leeren Wochenbalken trugen die Klasse
`leer`, und die gehört längst der Fläche „hier ist nichts" — mitsamt
24 Pixeln Polster. Jeder leere Balken war dadurch 48 Pixel hoch, egal
welche Höhe dastand.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/style.css

@@ -1265,6 +1265,65 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
   .profil-kopf { flex-direction: column; align-items: flex-start; gap: var(--s-loose); }
 }
 
+/* Zahlen im Profil. Drei Kacheln, eine Wochenkurve, zwei Listen — alles von
+   Hand gezeichnet. Für zwölf Balken eine Diagrammbibliothek zu laden hiesse,
+   dreihundert Kilobyte für etwas mitzuschleppen, das aus Rechtecken besteht. */
+
+.profil-zahlen { margin-bottom: var(--s-section); }
+.profil h3 { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 0 0 var(--s-snug); }
+
+.zahlenreihe {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--s-regular); margin-bottom: var(--s-section);
+}
+.zahlkachel {
+  display: flex; flex-direction: column; gap: 2px;
+  padding: var(--s-loose); border-radius: var(--r-karte); background: var(--elevated);
+}
+.zahlkachel strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
+.zahlkachel > span { font-size: var(--t-normal); color: var(--text-dim); }
+.zahlkachel .winzig { color: var(--text-faint); }
+
+.wochen {
+  display: flex; align-items: flex-end; gap: 6px;
+  margin-bottom: var(--s-section);
+}
+/* Hundert Pixel für den höchsten Balken, zwanzig für die Beschriftung — die
+   Höhe steht in `profil.ts` und kommt in Pixeln, nicht in Prozent. */
+.woche { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
+.woche-balken {
+  flex: none; border-radius: 3px 3px 0 0;
+  background: var(--accent); min-height: 2px;
+}
+/* Eine Woche ohne Sehzeit bleibt sichtbar — sonst sähe die Kurve aus, als
+   fehlten dort Daten, statt dass nichts lief. */
+.woche-balken.woche-leer { background: var(--line); }
+.woche-marke {
+  flex: none; font-size: 10px; color: var(--text-faint); text-align: center;
+  padding-top: 4px; font-variant-numeric: tabular-nums;
+}
+
+.genres { display: flex; flex-direction: column; gap: var(--s-snug); margin-bottom: var(--s-section); }
+.genre { display: flex; align-items: center; gap: var(--s-regular); font-size: var(--t-normal); }
+.genre-name { flex: 0 0 110px; color: var(--text-dim); }
+.genre-balken { flex: 1; height: 8px; border-radius: 4px; background: var(--elevated); overflow: hidden; }
+.genre-balken i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
+.genre-wert { flex: none; color: var(--text-faint); font-variant-numeric: tabular-nums; }
+
+.zuletzt { display: flex; flex-direction: column; gap: 2px; }
+.zuletzt-zeile {
+  display: flex; align-items: center; gap: var(--s-regular);
+  background: none; border: 0; text-align: left; color: var(--text);
+  padding: var(--s-snug); border-radius: var(--r-control);
+}
+.zuletzt-zeile:hover { background: var(--elevated); }
+.zuletzt-zeile img, .zuletzt-zeile .platzhalter {
+  flex: none; width: 32px; height: 48px; border-radius: 4px;
+  object-fit: cover; background: var(--placeholder);
+}
+.zuletzt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.zuletzt-text strong { font-size: var(--t-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 /* --- Verwaltung ----------------------------------------------------------
  *
  * **Eine zweite Leiste, keine zweite Seite.** Die Verwaltung war elf