Die Zeitraeume bekommen eine Tafel -- und die Zahl, die fehlte

Filipe: "das muss viel geiler aussehen bitte. ich will dass es auch
seeeehr gut erkennbar ist, genau wie der text drueber. mach das bitte
alles so dass es mega speziell, hochwertig und lesbar ist."

DAS EIGENTLICHE PROBLEM WAR LESBARKEIT, nicht Geschmack. Im
Bildschirmfoto gemessen: Ueberschrift und Erklaersatz standen direkt
auf der Buehne -- einem Foto mit hellrotem Berg. Und die Karte griff
nach `--flaeche-tief`, einer Variablen, die es im ganzen Haus nicht
gibt; gegriffen hat der Ersatzwert mit 72 % Deckung, also kam der Berg
mit. Eine Variable, die nirgends steht, faellt nicht auf.

Jetzt sitzt alles in EINEM Koerper: vierfarbige Fassung, deckendes
Innenglas mit Messraster, die Zeitraeume als eingelassene Felder mit
dunklen Fugen. Das ist nicht neu erfunden, sondern die Rollenkachel der
Anmeldeseite -- ein Haus, eine Handschrift. Typenschild und Hauptzahl
in gebuerstetem Metall, mit vollwertigem Rueckfall.

"GUELTIGE LIVE-GEHEN-TAGE" WURDE BIS HEUTE WEGGEWORFEN. Datenbank,
Anzeigefeld und Importzeile waren da -- nur `spaltenRaten` hatte kein
Muster dafuer. Am 14.09. wurde das alte `/tag/` reparirt, das die
Spalte faelschlich zur Datumsspalte machte; die Reparatur hat den
falschen Empfaenger entfernt und keinen richtigen bestellt. Die
Pruefdatei SCHICKTE den Wert seit dem 14.09. und hat nie nachgesehen,
ob er ankommt. Jetzt steht er als Streifen da, in genau so viele
Kaestchen geteilt, wie der Zeitraum Tage hat.

ZWEI KLASSEN IM WAEHLER, mit Grund: `.spannen__schild` allein (0,1,0)
kam gegen `.inhalt .feldschild` aus start.css (0,2,0) nicht an -- im
Browser gemessen war weder `display: flex` noch die Farbe da.

UND EINE ZEITBOMBE ENTSCHAERFT: pruef-backstage-import rechnete
"morgen" mit `toISOString()` (UTC), der Server mit Ortszeit. Um 00:40
Berlin war das hier berechnete "morgen" in Wahrheit HEUTE -- die
Gegenprobe "ein Datum in der Zukunft wird abgelehnt" fiel taeglich
zwischen Mitternacht und zwei Uhr um. Alle drei Tage werden jetzt aus
einer Stelle abgeleitet.

Gemessen statt behauptet: 43 258 Bildpunkte hinter Ueberschrift und
Satz abgetastet, kein einziger rot. Gegenprobe mit weggenommenem
Innenglas: 2 857 rote -- die Messung kann Rot also sehen.

pruef-backstage-import 133 (war 127), pruef-xlsx 75 (war 67),
pruef-css-klassen, pruef-leistung-optik 59, pruef-leistung: alle gruen.

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

workspace/assets/js/leistung.js

@@ -692,6 +692,42 @@
         karte.append(haupt);
       }
 
+      /* ---- Wie viele Tage davon wirklich live waren (16.09.2026) -----
+         Backstage liefert "Gültige LIVE-Gehen-Tage" mit. Die Zahl stand
+         bisher als eine von fünf gleich aussehenden unten im Raster --
+         dabei ist sie die EINZIGE, die sagt, wie die Diamantenzahl
+         zustande kam: 13.210 an elf Tagen ist etwas anderes als
+         13.210 an dreien.
+
+         EIN STREIFEN STATT EINES BALKENS. Er zeigt einen Anteil, keinen
+         Fortschritt -- deshalb keine Bewegung, kein Füllen, kein Ziel.
+
+         GERECHNET WIRD NUR, WENN BEIDE ZAHLEN DA SIND. Ohne die Zahl
+         der Tage wäre der Anteil eine Division durch nichts, und ein
+         Streifen ohne Bezug zeigt eine Genauigkeit, die es nicht gibt. */
+      if (z.gueltige_tage !== null && z.gueltige_tage !== undefined && z.tage > 0) {
+        /* NICHT GERUNDET. 11 von 13 sind 84,615 %; auf 85 gerundet
+           ragte die Füllung vier Pixel in den zwölften Tag hinein --
+           auf einem in Tage geteilten Streifen sieht das aus wie ein
+           angefangener Tag, den es nicht gibt. */
+        const anteil = Math.max(0, Math.min(100, (z.gueltige_tage / z.tage) * 100));
+        const lauf = el('div', 'spanne__lauf');
+        const bahn = el('div', 'spanne__lauf-bahn');
+        const teil = el('div', 'spanne__lauf-teil');
+        teil.style.width = anteil + '%';
+        /* Die Zahl der Tage geht als Wert an den Stil -- er teilt den
+           Streifen daraufhin in genau so viele Kästchen. Ab 32 Tagen
+           wäre jede Zelle schmaler als ihre Fuge, dann bleibt es bei
+           der glatten Bahn. Die Grenze steht im Stil erklärt. */
+        bahn.style.setProperty('--tage', String(z.tage));
+        if (z.tage <= 31) bahn.dataset.teilen = 'ja';
+        bahn.append(teil);
+        lauf.append(bahn);
+        lauf.append(el('span', 'spanne__lauf-text',
+          `${z.gueltige_tage} von ${z.tage} Tagen live`));
+        karte.append(lauf);
+      }
+
       /* ---- Die uebrigen Werte --------------------------------------- */
       const werte = el('div', 'spanne__werte');
       const zeig = (name, wert, form) => {
@@ -702,7 +738,9 @@
         werte.append(w);
       };
       zeig('LIVE-Zeit', z.dauer_min, stunden);
-      zeig('Gültige Tage', z.gueltige_tage, (n) => `${n} von ${z.tage}`);
+      /* "Gültige Tage" steht NICHT mehr hier -- es steht als Streifen
+         darüber. Zweimal dieselbe Zahl wäre zweimal dieselbe Auskunft
+         mit zwei verschiedenen Rängen. */
       zeig('Ø Zuschauer', z.zuschauer_avg, zahl);
       zeig('Spitze', z.zuschauer_max, zahl);
       zeig('Neue Follower', z.follower_neu, zahl);