Stufe 2: "Wann ist der naechste Stream?" steht jetzt oben

Aus dem Plan im Vault. Bei "Was ansteht" gibt es genau EINE Frage, die
ein Zuschauer hat -- und sie stand in Zeile vier einer Liste wie jede
andere Angabe auch.

Jetzt ganz oben, gross:

    ALS NAECHSTES
    in 12 Std 15 Min
    Abendstream
    17.09.2026 um 23:30 Uhr
    2 weitere Termine danach

Darunter wird die Liste zum ZEITSTRAHL: Heute und morgen · Diese Woche
· Spaeter · Ohne Datum · Vorbei. Vergangenes steht unten, nicht
dazwischen -- ein abgelaufener Termin zwischen kommenden liest sich wie
ein Fehler.

DER PLAN VERSPRACH ETWAS, DAS DIE DATEN NICHT HERGABEN.
"in 3 Std 12 Min" -- aber `eintraege.datum` ist ein TAG, und die
Pruefung im Server lehnte eine Uhrzeit ausdruecklich ab
(`^\d{4}-\d{2}-\d{2}$`). Ein Stundencountdown war unmoeglich.

Das ist die uebliche Sorte Planungsluecke: Sie steht nicht im Plan, sie
steht in der Datenbank. Neue Spalte `uhrzeit`, OPTIONAL -- viele
Termine haben keine ("diese Woche", "im Oktober"), und ein Pflichtfeld
haette dafuer eine erfundene erzwungen. Ohne Uhrzeit zaehlt der
Countdown in Tagen, und "morgen" ist eine ehrliche Antwort.

Der Ton folgt der NAEHE, nicht der Wichtigkeit: Was gleich anfaengt,
ist waermer. Das ist die einzige Information, die eine Farbe hier
tragen kann, ohne zu behaupten, ein Termin sei "besser" als ein
anderer. Kein Blinken, keine Animation -- auf dieser Seite steht
niemand unter Zeitdruck, er will es nur wissen.

NEU: pruef-countdown (22 Pruefungen)
Das Abnahmekriterium aus dem Plan, in Pixeln gemessen: Die Antwort MUSS
im ersten Bildschirm stehen (gemessen 458 px von 844) und groesser sein
als jede Fliesstextzeile (27 px). Dazu: Uhrzeit setzen, wiederfinden
und wieder ENTFERNEN; vier unmoegliche Zeiten; der Zeitstrahl mit
"Vorbei" ganz unten; und der leere Fall, in dem ein SATZ dasteht statt
einer leeren Flaeche.

UND EIN EIGENER FEHLER, gefunden von der eigenen Gegenprobe: Der
Testtitel war "X" -- ein Zeichen, der Server verlangt zwei. Vier
"wird abgelehnt"-Haken waren damit halb aus dem falschen Grund gruen.
Aufgefallen ist es nur, weil die Gegenprobe ("der gueltige Fall muss
durchgehen") danebenlag. Ohne sie haette die Pruefung vier Haken
gesetzt und nichts geprueft.

pruef-treff 66, pruef-bereiche-lesend, pruef-css-klassen gruen -- die
anderen sieben Bretter teilen sich diese Datei.

Der Plan im Vault fuehrt jetzt einen Abschnitt 12: "Was beim Bauen
herauskam, das im Plan nicht stand". Plaene altern, Befunde nicht.

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

workspace/assets/js/bereich.js

@@ -97,6 +97,114 @@
   const EVENT_ART = 'kampagne';
   const istEventArt = (art) => bereich === EVENT_BEREICH && art === EVENT_ART;
 
+  /* =====================================================================
+     "WANN IST DER NAECHSTE STREAM?" (17.09.2026)
+
+     Filipe wollte fuer den Community-Bereich "eine richtige
+     perfektion". Bei "Was ansteht" ist das keine Frage der Optik: Es
+     gibt genau EINE Frage, die ein Zuschauer hier hat, und sie stand
+     bisher in Zeile vier einer Liste.
+
+     BEIM BAUEN KAM EINE LUECKE HERAUS, die im Plan nicht stand: Ein
+     Eintrag hatte nur einen TAG, keine Uhrzeit -- die Pruefung im
+     Server lehnte eine Zeitangabe ausdruecklich ab. Ein Countdown "in
+     3 Std 12 Min" war damit gar nicht moeglich. Die Spalte `uhrzeit`
+     ist deshalb heute dazugekommen; sie ist OPTIONAL, denn viele
+     Termine haben keine Uhrzeit, und ein Pflichtfeld haette dafuer
+     eine erfundene erzwungen.
+
+     OHNE UHRZEIT ZAEHLT ER IN TAGEN. "Morgen" ist eine ehrliche
+     Antwort; "morgen um 00:00" waere eine erfundene. */
+
+  /* Der Zeitpunkt eines Eintrags als Millisekunden -- Ortszeit.
+     `new Date("2026-09-17T20:00:00")` OHNE Z ist Ortszeit, und genau
+     das ist gemeint: Der Stream faengt um 20 Uhr HIER an. */
+  function zeitpunktVon(e) {
+    const tag = String(e?.datum || '').slice(0, 10);
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(tag)) return null;
+    const zeit = /^\d{2}:\d{2}$/.test(String(e.uhrzeit || '')) ? e.uhrzeit : null;
+    const d = new Date(`${tag}T${zeit || '00:00'}:00`);
+    return Number.isNaN(d.getTime()) ? null : { ms: d.getTime(), tag, zeit };
+  }
+
+  /* Wie lange noch? Gibt Worte zurueck, keine Zahl -- "in 3 Std 12 Min"
+     liest sich in einem Zug, "0.134 Tage" nicht. */
+  function nochText(e, jetztMs = Date.now()) {
+    const z = zeitpunktVon(e);
+    if (!z) return null;
+    const heute = window.heuteLokal ? window.heuteLokal() : new Date().toISOString().slice(0, 10);
+    const tageHin = Math.round(
+      (new Date(`${z.tag}T00:00:00`).getTime() - new Date(`${heute}T00:00:00`).getTime()) / 86400000);
+
+    if (tageHin < 0) return { wann: 'vorbei', stufe: 'vorbei' };
+    /* MIT UHRZEIT UND HEUTE ODER MORGEN: in Stunden. Weiter entfernt
+       sagt eine Stundenzahl nichts mehr -- "in 73 Std" muss man erst
+       umrechnen, "in 3 Tagen" nicht. */
+    if (z.zeit && tageHin <= 1) {
+      const min = Math.round((z.ms - jetztMs) / 60000);
+      if (min < 0) return { wann: tageHin === 0 ? 'läuft' : 'vorbei', stufe: tageHin === 0 ? 'jetzt' : 'vorbei' };
+      if (min < 60) return { wann: `in ${min} Min`, stufe: 'jetzt' };
+      const std = Math.floor(min / 60);
+      const rest = min % 60;
+      return { wann: `in ${std} Std${rest ? ' ' + rest + ' Min' : ''}`, stufe: 'bald' };
+    }
+    if (tageHin === 0) return { wann: 'heute', stufe: 'jetzt' };
+    if (tageHin === 1) return { wann: 'morgen', stufe: 'bald' };
+    if (tageHin <= 7) return { wann: `in ${tageHin} Tagen`, stufe: 'woche' };
+    return { wann: datum(z.tag), stufe: 'spaeter' };
+  }
+
+  /* In welchen Abschnitt des Zeitstrahls gehoert der Eintrag? */
+  function abschnittVon(e) {
+    const n = nochText(e);
+    if (!n) return 'ohne';
+    if (n.stufe === 'vorbei') return 'vorbei';
+    if (n.stufe === 'jetzt' || n.stufe === 'bald') return 'heute';
+    if (n.stufe === 'woche') return 'woche';
+    return 'spaeter';
+  }
+  const ABSCHNITT_NAME = {
+    heute: 'Heute und morgen', woche: 'Diese Woche',
+    spaeter: 'Später', ohne: 'Ohne Datum', vorbei: 'Vorbei',
+  };
+
+  /* Der Kasten ganz oben. */
+  function countdownZeigen(eintraege) {
+    const ziel = $('countdown');
+    if (!ziel) return;
+    if (bereich !== 'ansteht') { ziel.hidden = true; return; }
+    ziel.hidden = false;
+    ziel.textContent = '';
+
+    const kommend = (eintraege || [])
+      .map((e) => ({ e, n: nochText(e), z: zeitpunktVon(e) }))
+      .filter((x) => x.n && x.n.stufe !== 'vorbei')
+      .sort((a, b) => a.z.ms - b.z.ms);
+
+    if (!kommend.length) {
+      /* EIN SATZ STATT EINER LEEREN FLAECHE. Ein Bereich, der nichts
+         sagt, wenn nichts da ist, sieht kaputt aus statt leer. */
+      ziel.dataset.leer = 'ja';
+      ziel.append(el('p', 'countdown__leer',
+        'Noch kein Termin eingetragen. Der nächste Stream steht hier, sobald er feststeht.'));
+      return;
+    }
+    delete ziel.dataset.leer;
+    const { e, n } = kommend[0];
+    ziel.dataset.stufe = n.stufe;
+    ziel.append(el('p', 'countdown__schild', 'Als Nächstes'));
+    ziel.append(el('p', 'countdown__wann', n.wann));
+    ziel.append(el('p', 'countdown__titel', e.titel || 'Termin'));
+    const wann = e.uhrzeit
+      ? `${datum(String(e.datum).slice(0, 10))} um ${e.uhrzeit} Uhr`
+      : datum(String(e.datum).slice(0, 10));
+    ziel.append(el('p', 'countdown__datum', wann));
+    if (kommend.length > 1) {
+      ziel.append(el('p', 'countdown__weitere',
+        `${kommend.length - 1} weitere${kommend.length === 2 ? 'r Termin' : ' Termine'} danach`));
+    }
+  }
+
   /* Laeuft das Event noch, kommt es erst, ist es vorbei?
      Der Vergleich laeuft auf den ISO-Zeichenketten, nicht auf Date --
      "2026-09-12" < "2026-09-30" ist als Text schon richtig, und ein
@@ -568,6 +676,12 @@
         if (filter === 'offen') return e.status === 'offen';
         return e.art === filter;
       });
+      /* DER COUNTDOWN steht ueber der Liste und rechnet mit ALLEN
+         Eintraegen, nicht mit der gefilterten Auswahl: Wer auf "nur
+         offene" stellt, will trotzdem wissen, wann der naechste Stream
+         ist. */
+      countdownZeigen(daten.eintraege);
+
       if (!sichtbar.length) {
         ziel.append(el('p', 'leer-hinweis', daten.eintraege.length
           ? 'Zu dieser Auswahl gibt es nichts.'
@@ -581,10 +695,42 @@
         return;
       }
       const karten = new Map();
-      for (const e of sichtbar) {
-        const k = karte(e);
-        karten.set(e.id, k);
-        ziel.append(k);
+      if (bereich === 'ansteht') {
+        /* ALS ZEITSTRAHL, NICHT ALS LISTE (17.09.2026).
+
+           Eine Liste beantwortet "was gibt es". Hier lautet die Frage
+           aber "was kommt WANN" -- und die beantwortet erst eine
+           Reihenfolge mit Abschnitten. Vorbei Gewesenes steht unten,
+           nicht dazwischen: Ein abgelaufener Termin mitten zwischen
+           kommenden liest sich wie ein Fehler. */
+        const REIHE = ['heute', 'woche', 'spaeter', 'ohne', 'vorbei'];
+        const faecher = new Map(REIHE.map((r) => [r, []]));
+        for (const e of sichtbar) faecher.get(abschnittVon(e)).push(e);
+        for (const r of REIHE) {
+          const fach = faecher.get(r);
+          if (!fach.length) continue;
+          /* Innerhalb eines Abschnitts nach Zeitpunkt, das Vergangene
+             umgekehrt -- das zuletzt Gewesene zuerst. */
+          fach.sort((a, b) => {
+            const za = zeitpunktVon(a)?.ms ?? 0;
+            const zb = zeitpunktVon(b)?.ms ?? 0;
+            return r === 'vorbei' ? zb - za : za - zb;
+          });
+          const kopf = el('h2', 'zeitstrahl__schild', ABSCHNITT_NAME[r]);
+          kopf.append(el('span', 'zeitstrahl__zahl', String(fach.length)));
+          ziel.append(kopf);
+          for (const e of fach) {
+            const k = karte(e);
+            karten.set(e.id, k);
+            ziel.append(k);
+          }
+        }
+      } else {
+        for (const e of sichtbar) {
+          const k = karte(e);
+          karten.set(e.id, k);
+          ziel.append(k);
+        }
       }
       sprungZeigen(ziel, karten);
 
@@ -677,6 +823,16 @@
   function formularAnpassen() {
     const event = istEventArt($('f-art').value);
 
+    /* DIE UHRZEIT NUR DORT, WO TERMINE STEHEN (17.09.2026). Ein
+       Anschlag oder ein Wunsch hat keine Uhrzeit -- ein Feld, das da
+       ist und nie gebraucht wird, macht das Formular laenger und die
+       Entscheidung schwerer. */
+    const uhrFeld = $('feld-uhrzeit');
+    if (uhrFeld) {
+      uhrFeld.hidden = bereich !== 'ansteht';
+      if (uhrFeld.hidden && $('f-uhrzeit')) $('f-uhrzeit').value = '';
+    }
+
     $('feld-ende').hidden = !event;
     $('feld-aufgaben').hidden = !event;
     $('feld-regeln').hidden = !event;
@@ -737,6 +893,9 @@
       text: $('f-text').value,
       datum: $('f-datum').value,
     };
+    if ($('feld-uhrzeit') && !$('feld-uhrzeit').hidden) {
+      daten.uhrzeit = $('f-uhrzeit').value || '';
+    }
     const event = istEventArt(daten.art);
     if (einstellung.dringlichkeit && !event) daten.dringlichkeit = $('f-dringlich').value;
     if (einstellung.vertraulich) daten.nur_leitung = $('f-vertraulich').checked ? 1 : 0;