/* ===================================================================
   Startseite nach dem Anmelden.

   Sie war eine Wand aus siebzehn gleichen Rechtecken, auf denen jeweils
   "ÖFFNEN" stand. Wenn alles gleich aussieht, ist alles gleich wichtig
   -- also nichts. Und "ÖFFNEN" ist keine Information, das weiss man von
   einer Kachel ohnehin.

   Drei Dinge machen daraus etwas Brauchbares:

   1. GRUPPEN. Was man täglich braucht, was zu einem Creator gehört, was
      den Laden am Laufen hält -- das sind drei verschiedene Absichten
      und nicht eine Liste.

   2. ZAHLEN STATT "ÖFFNEN". Auf der Kachel steht, wo Arbeit liegt.
      Dieselben Quellen wie die Hinweise darüber, kein zweiter Zähler.
      Eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine, die
      "öffnen" sagt.

   3. ZEICHEN UND FARBE. Ein eigenes Zeichen je Bereich und ein eigener
      Farbton -- man findet sie nach kurzer Zeit blind.

   Die Seite ist bereits serverseitig geschützt (workspace.js). Dieses
   Skript holt nur noch, WER angemeldet ist.
   =================================================================== */
(() => {
  'use strict';

  /** Hat diese Person ueberhaupt einen Arbeitsplatz hier?

      GEFRAGT WIRD NICHT NACH DER ROLLE. Rollennamen der Community
      gehoeren nicht in eine Datei, die jeder herunterladen kann --
      darueber wacht pruef-modi-wortleck, und ROLLENTEXT unten laesst
      sie aus demselben Grund aus.

      Gefragt wird nach etwas, das der Server ohnehin schon beantwortet
      hat: Hat sie die Aufgaben-Kachel? Er schickt nur, was jemand
      sehen darf. Keine zweite Wahrheit, kein Rollenname -- und es
      bleibt richtig, wenn sich die Rechte aendern. */
  function hatArbeitsplatz() {
    const liste = ich && ich.bereiche;
    if (!Array.isArray(liste)) return true;   /* im Zweifel wie bisher */
    return liste.some((b) => String(b.ziel || '').split('?')[0] === 'aufgaben.html');
  }

  const ROLLENTEXT = {
    spicy:   'Spicy Media · Überblick über alle, ohne Automationen',
    admin:   'DogFather · Gesamtübersicht und Freigaben',
    /* Der Satz stimmte bis zum 07.09.2026. Seither legen Manager
       Creator an -- und ein Rollentext, der etwas anderes verspricht als
       die Oberflaeche kann, ist schlimmer als gar keiner. */
    manager: 'Manager · dieselben Rechte, ohne Personenverwaltung – legt Creator an',
    creator: 'Creator · dein eigener Bereich',
    scout:   'Scout · deine Pipeline und die Creator, die du betreust',
  };

  /* Zeichen und Bereiche kommen aus assets/js/bereiche.js -- derselben
     Quelle, aus der auch die Kopfleisten der Unterseiten ihr Zeichen und
     ihre Farbe nehmen. Zwei Listen wären der sichere Weg dazu, dass ein
     Bereich hier gelb und dort grün ist. */
  const { ZEICHEN, GRUPPEN, zeichenBauen } = window.Bereiche;


  /* Welcher Hinweis gehört auf welche Kachel. Die Zahl auf der Kachel ist
     damit KEIN neuer Zähler, sondern dieselbe Quelle wie die Liste
     darüber -- sonst stünden irgendwann zwei verschiedene Wahrheiten
     übereinander auf einem Bildschirm. */
  const HINWEIS_ZU_KACHEL = {
    aufgaben_ueberfaellig: 'Aufgaben',
    aufgaben_heute:        'Aufgaben',
    aufgaben_review:       'Aufgaben',
    termine_heute:         'Kalender',
    protokoll_fehlt:       'Calls & Protokolle',
    dateien_review:        'Dateien',
    /* DAS ZIEL STATT DES NAMENS (berichtigt 20.09.2026).
       Hier stand „LIVE-Analyse". So heisst die Kachel auf der
       AGENTURSEITE -- auf der Crew-Adresse heisst dieselbe Seite
       „Live-Ablauf". Ein Name trifft immer nur ein Haus; ich hatte
       ihn erst einfach umgedreht und damit das andere kaputt
       gemacht (pruef-start-ansicht wurde sofort rot).
       Das ZIEL gilt in beiden. */
    bereiche_dringend:     'bereich.html?b=live',
    startcheck_handlung:   'Start-Check',
    ohne_startcheck:       'Start-Check',
    followup_faellig:      'Scout-Pipeline',
    uebergabe_offen:       'Scout-Pipeline',
    review_faellig:        'Reports & Review',
    review_bald:           'Reports & Review',
    ohne_betreuung:        'Personen & Zugänge',
    ohne_profil:           'Creator-Profile',
    markiert_live:         'bereich.html?b=live',
    markiert_content:      'Content-Ideen',
    markiert_community:    'Community',
    markiert_technik:      'Technik',
    /* MANAGER-ZIELE (02.10.2026). Ueber das ZIEL und nicht ueber den
       Namen -- ein Name wandert, ein Ziel nicht (gelernt am
       20.09.2026, als "LIVE-Analyse" auf der Crew-Adresse anders
       heisst). Hier faellt es ohnehin nicht auf: Die Kachel gibt es
       nur im Agenturhaus. Genau deshalb steht sie trotzdem so da --
       die naechste koennte es anders sein. */
    mz_dringend:           'manager-ziele.html',
    mz_offen:              'manager-ziele.html',
  };

  /* Diese Hinweise bekommen zusätzlich das Merkzeichen auf die Kachel.
     Sie sind etwas anderes als "3 Aufgaben offen": Da hat jemand
     persönlich etwas markiert und wartet auf eine Reaktion. Eine Zahl
     allein macht diesen Unterschied nicht sichtbar. */
  const MIT_MERKZEICHEN = new Set([
    'markiert_live', 'markiert_content', 'markiert_community', 'markiert_technik',
  ]);

  /* Findet einen Bereich über seinen Namen -- damit Hinweis und Kachel
     dasselbe Zeichen und denselben Farbton benutzen, ohne dass die
     Zuordnung ein zweites Mal irgendwo stünde. */
  /** Die Kachel zu einem Hinweis -- GEFUNDEN UEBER DAS ZIEL, NICHT
   *  UEBER DEN NAMEN (20.09.2026).
   *
   *  Hier stand `x.name === name`, und gesucht wurde nur in `GRUPPEN`
   *  -- der Kachelliste der AGENTUR aus bereiche.js. Zwei Fehler in
   *  einer Zeile, und beide waren unsichtbar:
   *
   *  1. Die Kacheln von Team Dogi schickt der SERVER (`ich.bereiche`).
   *     In GRUPPEN stehen sie nicht. Fuer einen Modi fand diese Zeile
   *     also entweder nichts -- oder eine AGENTUR-Kachel, die er gar
   *     nicht hat, und uebernahm deren Farbe.
   *
   *  2. Namen aendern sich. Gemessen am 20.09.2026: Sieben der
   *     dreizehn Hinweisziele hatten auf der Crew-Adresse keine Kachel
   *     dieses Namens. „LIVE-Analyse" zum Beispiel heisst dort
   *     „Live-Ablauf".
   *
   *  Das Ziel bleibt. `bereich.js` sagt denselben Satz an einer
   *  anderen Stelle schon: „Gefunden wird ueber das ZIEL, nicht ueber
   *  den Namen: Der Name aendert sich, das Ziel bleibt." */
  const bereichZu = (was) => {
    if (!was) return null;
    const passt = (k) => k && (k.name === was
      || String(k.ziel || '').split('#')[0] === was);
    /* ZUERST DIE EIGENEN KACHELN. Hier wurde nur `GRUPPEN` durchsucht
       -- die Liste der AGENTUR aus bereiche.js. Die Kacheln von Team
       Dogi schickt der SERVER (`ich.bereiche`), und die standen dort
       nie drin. Fuer einen Modi fand diese Zeile entweder nichts oder
       eine Agenturkachel, die er gar nicht hat -- und uebernahm deren
       Farbe. Dieselbe Fehlerklasse wie bei der Seitenfarbe am
       19.09.2026, nur an einer anderen Stelle. */
    for (const k of (ich?.bereiche || [])) if (passt(k)) return k;
    for (const k of (ich?.bereiche_zusatz || [])) if (passt(k)) return k;
    for (const g of GRUPPEN) {
      const k = g.bereiche.find(passt);
      if (k) return k;
    }
    return null;
  };

  const $ = (id) => document.getElementById(id);
  const el = (tag, klasse, text) => {
    const k = document.createElement(tag);
    if (klasse) k.className = klasse;
    if (text !== undefined) k.textContent = text;
    return k;
  };

  let ich = null;
  /* WESSEN ARBEITSPLATZ WIRD GEZEIGT (02.09.2026).

     `ich` ist, WER ANGEMELDET ist -- das bleibt so und gilt fuer alles,
     was schreibt oder Rechte hat. `zeigt` ist, WESSEN Arbeitsplatz auf
     dem Bildschirm steht. Im Normalfall dasselbe.

     Vorher gab es nur `ich`, und die Folge war ein halb gebauter
     Umschalter: Die Listen kamen bereits von der gewaehlten Person,
     Kacheln, Rolle und Begruessung aber weiterhin von DogFather. Er sah
     einen Creator-Arbeitsplatz in seiner eigenen Verkleidung -- gemeldet
     mit "ich seh immer noch die Seite genau wie meine". */
  let zeigt = null;
  let hinweise = [];

  /* ---------- Aufbau ------------------------------------------------------- */

  function bereicheBauen() {
    const ziel = $('bereiche');
    ziel.textContent = '';

    /* Zahlen je Kachel aus den Hinweisen zusammenzählen. Warnstufe
       schlägt durch: Eine Kachel mit etwas Überfälligem ist rot, auch
       wenn daneben Harmloses mitgezählt wird. */
    /* DIE ZAHL LANDET AUF DER AUFGELOESTEN KACHEL (20.09.2026).
       ----------------------------------------------------------------
       Hier wurde nach dem SCHLUESSEL aus `HINWEIS_ZU_KACHEL` abgelegt
       und unten nach `b.name` gesucht. Das ging genau so lange gut,
       wie beide dasselbe Wort waren.

       Dasselbe Brett heisst aber in den zwei Haeusern verschieden:
       auf der Agenturseite „LIVE-Analyse", auf der Crew-Adresse
       „Live-Ablauf". Ein Name trifft immer nur ein Haus -- ich hatte
       den Schluessel erst einfach umgedreht und damit das andere
       kaputt gemacht (`pruef-start-ansicht` wurde sofort rot).

       Abgelegt wird jetzt unter dem ZIEL der Kachel. Das ist in
       beiden Haeusern dasselbe und aendert sich nicht, wenn jemand
       umbenennt. */
    const zahlen = new Map();
    for (const h of hinweise) {
      const treffer = bereichZu(HINWEIS_ZU_KACHEL[h.art]);
      const kachel = treffer?.ziel || HINWEIS_ZU_KACHEL[h.art];
      if (!kachel) continue;
      const bisher = zahlen.get(kachel) || { n: 0, warn: false, merk: 0 };
      bisher.n += h.anzahl;
      if (h.stufe === 'warnung') bisher.warn = true;
      if (MIT_MERKZEICHEN.has(h.art)) bisher.merk += h.anzahl;
      zahlen.set(kachel, bisher);
    }

    /* =================================================================
       WELCHE KACHELN DIESE PERSON SIEHT (10.09.2026)

       ZWEI QUELLEN, und die Reihenfolge ist die Aussage:

         1. Schickt der Server eine Liste, gilt sie. Das ist der Weg fuer
            Rollen, die in bereiche.js gar nicht vorkommen duerfen --
            diese Datei bekommt jeder ausgeliefert, der die Seite
            oeffnet, und ein Rollenname darin waere mit einem Blick in
            den Quelltext gefunden.
         2. Sonst wie bisher: die Rollenliste an der Kachel selbst.

       Nach der ANGESEHENEN Rolle, nicht der eigenen -- sonst stuenden
       bei der Sicht auf einen Creator weiterhin "Personen & Zugaenge"
       und "Automationen" da, die er gar nicht hat. Genau daran war zu
       sehen, dass die Sicht nicht greift. Der Server richtet sich beim
       Bauen seiner Liste nach derselben Person.

       `null` heisst "nimm deine eigene Liste", eine LEERE Liste hiesse
       "keine Kacheln". Die beiden auseinanderzuhalten ist kein
       Feinschliff: Verwechselte man sie, haetten die fuenf bekannten
       Rollen ab sofort eine leere Startseite. */
    /* Ist die Seite hinter diesem Ziel fuer mich offen?
     Ohne Auskunft vom Server: ja -- siehe oben. */
  function seiteOffen(ziel) {
    const offen = ich?.seiten;
    if (!Array.isArray(offen) || !offen.length) return true;
    const z2 = String(ziel || "");
    if (!z2) return true;
    return offen.includes('/workspace/' + z2.split('?')[0]);
  }

  /* =====================================================================
     DIE REIHENFOLGE DER GRUPPEN (19.09.2026)

     Filipe: „ich will das oben die sachen für dogfather sind, dan die
     sachen für modis und dan community bereich, und so soll die
     reihenfolge überall perfekt ist, also mit dem was jede rolle eben
     halt sieht. was sie nicht sehen sehen sie nicht."

     BIS HEUTE ENTSCHIED DER ZUFALL. Die Gruppen kamen in der
     Reihenfolge, in der die Kacheln zusammengesetzt wurden — und die
     hängt davon ab, welche Liste an welche angehängt wurde. Beim Team
     stand „Für dich" deshalb mitten zwischen der Arbeit, und die
     Moderation ganz unten hinter allen sieben Brettern der Community.

     JETZT GILT EINE ORDNUNG, und sie folgt Filipes Satz:

       1. die eigene Arbeit      (Täglich, Live, Creator, Entwicklung …)
       2. die Arbeit am Treff    (Moderation) — sieht nur, wer moderiert
       3. der Raum der Zuschauer (Community)
       4. das Eigene             (Für dich)

     „Was sie nicht sehen, sehen sie nicht" bleibt unberührt: Diese
     Funktion sortiert nur, was ohnehin schon da ist. Wer keine
     Moderationskachel bekommt, bekommt auch keine Gruppe dafür —
     leere Gruppen fallen vorher heraus.

     UNBEKANNTE GRUPPEN LANDEN BEI DER ARBEIT, nicht am Ende. Eine neu
     erfundene Gruppe ist fast immer Arbeit; und sie am Ende
     einzusortieren hieße, sie hinter dem Persönlichen zu verstecken,
     wo sie niemand sucht. */
  /* NUR DAS ENDE WIRD FESTGELEGT -- die Arbeitsgruppen behalten ihre
     Reihenfolge.

     Der erste Versuch schrieb auch die Arbeitsgruppen fest
     (Täglich, Rund um das Team, …). Das war zu viel: Ihre Reihenfolge
     ist an mehreren Stellen bewusst gewählt und mit Gründen versehen,
     und eine Prüfung hat sie sofort als geändert gemeldet — zu Recht.
     Wer eine bestehende Entscheidung überschreibt, ohne sie gelesen zu
     haben, repariert nichts, sondern ersetzt sie durch seine eigene.

     Also: Alles, was hier NICHT steht, bleibt, wo es war. Nur diese
     drei wandern ans Ende, in genau dieser Folge. */
  const GRUPPEN_ZULETZT = ['Moderation', 'Community', 'Für dich'];

  function gruppenPlatz(name) {
    const z = GRUPPEN_ZULETZT.indexOf(name);
    return z >= 0 ? 1 + z : 0;
  }

  /** Sortiert die Gruppen, ohne innerhalb einer Gruppe etwas zu
   *  verschieben. `sort` ist seit ES2019 stabil — Kacheln gleicher
   *  Gruppe behalten also ihre Reihenfolge, und die ist an mehreren
   *  Stellen bewusst gewählt (die breite Treff-Kachel vorn). */
  function nachOrdnung(gruppen) {
    return [...gruppen].sort((a, b) => gruppenPlatz(a.name) - gruppenPlatz(b.name));
  }

  function eigeneGruppen(wer) {
      const vomServer = ich && ich.bereiche;
      if (Array.isArray(vomServer)) {
        /* Nach Gruppen buendeln, in der Reihenfolge, in der sie kommen
           -- eine Map behaelt sie, ein Objekt sortierte Zahlenschluessel
           um. Hier sind es Woerter, aber darauf zu bauen waere die Art
           Annahme, die spaeter jemanden Zeit kostet. */
        const nach = new Map();
        for (const b of vomServer) {
          if (!nach.has(b.gruppe)) {
            nach.set(b.gruppe, { name: b.gruppe, unter: b.gruppeUnter || '', bereiche: [] });
          }
          nach.get(b.gruppe).bereiche.push(b);
        }
        return nachOrdnung([...nach.values()]);
      }
      /* KACHELN, DIE DAZUKOMMEN (10.09.2026).

         Anders als `ich.bereiche` (das die Liste ERSETZT) haengen
         diese sich an eine vorhandene Gruppe an. Gebraucht wird das
         fuer Kacheln, die nur eine einzige Rolle bekommt: In dieser
         Datei duerften sie nicht stehen -- sie wird an jeden
         ausgeliefert, und eine Kachel, die nur bei einem erscheint,
         wirft die Frage auf, fuer wen sie ist.

         Findet sich die genannte Gruppe nicht, wird eine eigene
         angelegt. Sonst faellt die Kachel lautlos weg, sobald jemand
         eine Gruppe umbenennt -- und niemand merkt es, weil nichts
         kaputtgeht. */
      const zusatz = Array.isArray(ich?.bereiche_zusatz) ? ich.bereiche_zusatz : [];
      const gruppen = GRUPPEN
        /* UND GEGEN DIE RECHTETAFEL (11.09.2026).

           `rollen` an der Kachel ist die Liste in dieser Datei -- sie
           wird von Hand gepflegt und kennt nichts davon, dass DogFather
           eine Seite umgestellt hat. `ich.seiten` kommt vom Server und
           ist dieselbe Auskunft, aus der auch die Schranke ihre
           Entscheidung holt.

           BEIDES UND NICHT NUR EINES: Die Liste hier entscheidet, was
           ueberhaupt angeboten wird; die Tafel, ob es noch offen ist.
           Faellt `ich.seiten` aus (alte Fassung im Zwischenspeicher),
           bleibt es beim alten Verhalten -- eine Kachel zu viel ist
           aergerlich, eine fehlende sieht aus wie ein Fehler. */
        .map((g) => ({ ...g, bereiche: g.bereiche.filter((b) => b.rollen.includes(wer.rolle)
          && seiteOffen(b.ziel)) }))
        .filter((g) => g.bereiche.length);
      for (const b of zusatz) {
        const g = gruppen.find((x) => x.name === b.gruppe);
        if (g) { g.bereiche = [...g.bereiche, b]; continue; }

        /* EINE NEUE GRUPPE DARF SAGEN, WO SIE HINGEHOERT (10.09.2026).

           Bis hierhin wurde sie hinten angehaengt. Filipe: "ich will
           dass die kacheln ... eine eigene kategorie haben. damit ich
           nicht zwischen den kacheln suchen muss." Ganz unten waere
           zwar eine eigene Kategorie -- aber immer noch Scrollen.

           `gruppeNach` nennt die Gruppe, HINTER der sie stehen soll.
           Findet sie sich nicht (umbenannt, fuer diese Rolle nicht
           dabei), bleibt es beim Anhaengen: Eine Kachel, die wegen
           einer Reihenfolge verschwindet, waere der schlechtere
           Tausch. */
        const neuGruppe = { name: b.gruppe, unter: b.gruppeUnter || '', bereiche: [b] };
        const nach = b.gruppeNach
          ? gruppen.findIndex((x) => x.name === b.gruppeNach)
          : -1;
        if (nach >= 0) gruppen.splice(nach + 1, 0, neuGruppe);
        else gruppen.push(neuGruppe);
      }
      return nachOrdnung(gruppen);
    }

    let laufNr = 0;
    /* Alle Kacheln, die zum Live fuehren -- gesammelt, weil die
       Antwort des Live-Dienstes erst nach dem Aufbau der Wand da ist
       (ein Netzabruf, die Wand steht in Millisekunden). */
    const liveKacheln = [];
    for (const gruppe of eigeneGruppen(zeigt)) {
      const meine = gruppe.bereiche;
      if (!meine.length) continue;

      const abschnitt = el('section', 'gruppe');
      /* Manche Gruppen heißen für einen Creator anders -- siehe GRUPPEN. */
      const istCreator = zeigt.rolle === 'creator';

      /* ===============================================================
         JEDE GRUPPE LAESST SICH ZUKLAPPEN (07.09.2026)

         Wunsch Filipe: "diese kategorien soll man auch zu und aufmachen
         koennen so wie es einem lieb ist gerade."

         DER KOPF IST DER SCHALTER, nicht ein Knopf daneben. Eine
         Ueberschrift, neben der ein kleines Dreieck sitzt, laedt zum
         Zielen ein; eine Ueberschrift, die SELBST der Schalter ist,
         trifft man immer. Deshalb <button> statt <div> -- damit kommt
         die Tastaturbedienung und die Ansage fuer Vorleseprogramme
         geschenkt, statt sie mit tabindex und role nachzubauen.

         DER ZUSTAND WIRD GEMERKT. "So wie es einem lieb ist" heisst:
         Er muss den naechsten Aufruf ueberleben. Gespeichert wird je
         Gruppe und je ANGESEHENER Rolle -- DogFather, der sich einen
         Creator ansieht, hat dort eine andere Aufteilung im Kopf als
         auf seiner eigenen Seite.

         Faellt localStorage aus (privates Fenster, volle Ablage), ist
         das kein Fehler: Dann steht eben alles offen. Ein Merker, der
         die Seite mitreisst, waere schlimmer als ein vergessener. */
      const kopf = el('button', 'gruppe__kopf');
      kopf.type = 'button';
      const schluessel = `gruppe:${zeigt.rolle}:${gruppe.name}`;
      let zu = false;
      try { zu = localStorage.getItem(schluessel) === 'zu'; } catch { zu = false; }

      kopf.append(el('h2', 'gruppe__name',
        (istCreator && gruppe.nameCreator) || gruppe.name));
      kopf.append(el('span', 'gruppe__unter',
        (istCreator && gruppe.unterCreator) || gruppe.unter));
      /* Die Zahl sagt, was hinter einer zugeklappten Gruppe steckt --
         ohne sie klappt man drei Gruppen auf, um zu suchen. */
      kopf.append(el('span', 'gruppe__zahl', String(meine.length)));
      const pfeil = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      pfeil.setAttribute('class', 'gruppe__pfeil');
      pfeil.setAttribute('viewBox', '0 0 24 24');
      pfeil.setAttribute('aria-hidden', 'true');
      pfeil.innerHTML = '<path d="m6 9.5 6 6 6-6" fill="none" stroke="currentColor"'
        + ' stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>';
      kopf.append(pfeil);
      abschnitt.append(kopf);

      const liste = el('ul', 'kacheln');
      for (const b of meine) {
        const li = el('li', 'kachel');
        /* NUR SETZEN, WENN ES EINEN GIBT. `String(undefined)` schreibt
           sonst data-ton="undefined" ins Dokument -- kein Selektor
           trifft das, die Farbe stimmt also zufaellig, und jede
           Pruefung, die Toene zaehlt, liest ein Wort statt einer Zahl.
           Die Tuer ins andere Haus ist die einzige Kachel ohne Ton
           (sie gehoert keinem Bereich an, siehe workspace.js). */
        if (b.ton !== undefined && b.ton !== null) li.dataset.ton = String(b.ton);
        /* Die Willkommenskachel traegt alle Farben des Hauses.
           Das Merkmal steht hier und nicht am Ton, damit die
           Farbwerkzeuge weiter mit Zahlen rechnen koennen. */
        if (b.regenbogen) li.dataset.regenbogen = 'ja';
        /* SILBER -- wie der Regenbogen ein Merkmal am Element und
           nicht am Ton, damit die Farbwerkzeuge weiter mit Zahlen
           rechnen koennen. */
        if (b.silber) li.dataset.silber = 'ja';
        /* PAPIER -- die Oberflaeche des Notizblocks. Dieselbe Bauart
           wie Silber und Regenbogen: ein Merkmal am Element, damit
           die Farbwerkzeuge weiter mit Zahlen rechnen koennen. */
        if (b.papier) li.dataset.papier = 'ja';
        /* LIVE -- die Flaeche der Reaction. Sie traegt keine
           Ton-Nummer, sondern ihren Zustand; den holt start.js beim
           Laden von /api/reaktion/stand nach und setzt ihn als
           data-stand. Bis dahin steht sie geschlossen da, und das
           ist die richtige Vorgabe: Wer nichts weiss, behauptet
           nicht, es laufe etwas. */
        if (b.live) { li.dataset.sendung = 'ja'; li.dataset.stand = 'zu'; }
        if (b.gross) li.dataset.gross = 'ja';
        /* Der Einlauf wird gestaffelt -- aber über eine Eigenschaft, die
           bei "weniger Bewegung" nichts tut (siehe start.css). */
        li.style.setProperty('--nr', String(laufNr++));

        const a = el('a', 'kachel__link');
        a.href = b.ziel;

        /* DIE KACHEL, DIE ZUM LIVE FUEHRT, SAGT ES SELBST (22.09.2026).
           ==========================================================
           Filipe: "in dieser kachel soll wenn ich live bin um 20h bis
           22h ein live button der richtig geil ist mit einem live
           roten punkt symbol".

           WELCHE Kachel das ist, wird nicht am Namen erkannt, sondern
           am ZIEL. Der Name hat sich in diesem Haus schon zweimal
           geaendert ("Unsere Seiten" -> "Draussen"), das Ziel nie --
           und am 21.09. hat genau dieser Unterschied eine ganze
           Hinweisspalte lahmgelegt. */
        if (typeof b.ziel === 'string' && b.ziel.indexOf('unsere-seiten.html') === 0) {
          liveKacheln.push(li);
        }

        /* Das Wasserzeichen: dasselbe Zeichen noch einmal, riesig und
           fast unsichtbar in der Ecke. Es macht jede Kachel auf den
           ersten Blick unverwechselbar, ohne dass man es bewusst
           wahrnimmt -- und es ist der Grund, warum siebzehn Kacheln
           nicht mehr wie siebzehn Kästen aussehen.

           Steht als Erstes im Aufbau, damit es HINTER allem liegt. */
        const schatten = el('span', 'kachel__wasserzeichen');
        schatten.append(zeichenBauen(b.zeichen));
        a.append(schatten);

        const zeichen = el('span', 'kachel__zeichen');
        zeichen.append(zeichenBauen(b.zeichen));
        a.append(zeichen);

        const text = el('span', 'kachel__text');
        text.append(el('span', 'kachel__name', b.name));
        text.append(el('span', 'kachel__unter', b.unter));
        a.append(text);

        const zahl = zahlen.get(b.ziel) || zahlen.get(b.name);

        /* Das Merkzeichen oben in der Kachel. Es sitzt im Link und nicht
           im Text, damit es sich absolut an der Kachelecke ausrichten
           kann statt im Fluss mitzuschwimmen. */
        if (zahl && zahl.merk > 0) {
          const m = window.Bereiche.merkzeichenBauen(zahl.merk, 'merk');
          m.classList.add('kachel__merk');
          a.append(m);
          /* Die Kachel merkt sich das: Zahl und Pfeil ruecken dann nach
             unten, damit sie dem Zeichen nicht ins Gehege kommen. Die
             Browserpruefung hat genau diese Ueberdeckung gemeldet -- mit
             blossem Auge waren es zwei Pixel. */
          li.dataset.merk = 'ja';
        }

        /* Besteht die Zahl NUR aus Markierungen, waere sie dieselbe
           Auskunft ein zweites Mal: Das Zeichen sagt bereits "hier ist
           etwas", und bei mehreren steht die Anzahl darin. Dann lieber
           der Pfeil -- zwei Marken uebereinander auf einer Kachel von
           achtzig Pixeln sind Unruhe ohne Gewinn. */
        /* DER FARBIGE RAND AN DER KACHEL SELBST (02.10.2026).

           Bis hierher trug nur das ABZEICHEN die Warnfarbe -- eine
           Marke von 32 Pixeln am rechten Rand einer Kachel von 96.
           Auf einer Wand mit zwanzig Kacheln findet man sie nur,
           wenn man sie sucht.

           Verlangt hat es die Vorlage zur Kachel „Manager-Ziele"
           („farbiger Rand + Badge mit Anzahl offener Aufgaben") --
           gebaut ist es aber fuer JEDE Kachel, nicht nur fuer die
           eine. Eine Regel, die nur an einer Stelle gilt, ist
           dieselbe Falle wie eine feste Zahl: Beim naechsten Mal
           fehlt sie, und niemand weiss warum.

           ES IST DIESELBE QUELLE wie das Abzeichen (`zahl.warn`),
           kein zweiter Zaehler. Und es ersetzt die Marke nicht,
           sondern steht daneben -- Farbe traegt im Haus nie allein
           eine Aussage. */
        if (zahl && zahl.warn) li.dataset.warn = 'ja';

        if (zahl && zahl.n > 0 && zahl.n > zahl.merk) {
          const marke = el('span', 'kachel__zahl', String(zahl.n));
          if (zahl.warn) marke.dataset.warn = 'ja';
          /* Vorlesende Programme bekommen einen Satz statt einer nackten
             Zahl -- "Aufgaben, 3" sagt nichts.

             NICHT "OFFENE PUNKTE" (17.09.2026). Gezaehlt werden
             HINWEISE: bei Aufgaben etwa "2 ueberfaellig" plus "2 heute
             faellig" -- also 4. Darunter steht im Zahlenblock aber "6
             Offen", und beides ist richtig. Das Wort "offen" war die
             einzige Stelle, an der daraus ein Widerspruch wurde: Wer
             die Kachel vorgelesen bekam, hoerte eine Zahl offener
             Aufgaben, die es so nicht gibt.

             "Liegt an" ist das Wort, das im Haus ohnehin dafuer steht
             -- der Block darueber heisst "Was ist dran". */
          marke.setAttribute('aria-label',
            `${b.name}: ${zahl.n} ${zahl.n === 1 ? 'Sache liegt an' : 'Sachen liegen an'}`);
          a.append(marke);
        } else {
          a.append(el('span', 'kachel__pfeil', '→'));
        }

        li.append(a);
        liste.append(li);
      }
      abschnitt.append(liste);

      /* Das Aufklappen laeuft ueber ein Merkmal am Abschnitt, nicht ueber
         `hidden` an der Liste: So kann das CSS den Uebergang zeichnen
         und den Pfeil drehen, ohne dass das Skript etwas davon wissen
         muss. */
      const stand = (istZu) => {
        abschnitt.dataset.zu = istZu ? 'ja' : 'nein';
        kopf.setAttribute('aria-expanded', istZu ? 'false' : 'true');
        liste.hidden = istZu;
      };
      stand(zu);
      kopf.addEventListener('click', () => {
        zu = !zu;
        stand(zu);
        try { localStorage.setItem(schluessel, zu ? 'zu' : 'auf'); } catch { /* egal */ }
      });

      ziel.append(abschnitt);
    }

    /* ===============================================================
       DER LIVE-PUNKT AUF DER KACHEL (22.09.2026)

       Er wird NICHT in den Aufbau der Wand hineingerechnet, sondern
       nachtraeglich gesetzt: Der Live-Dienst steht draussen, sein
       Abruf dauert. Wer die Wand darauf warten liesse, haette eine
       Seite, die beim Laden haengt, weil jemand anderes gerade nicht
       antwortet.

       `live.js` liefert drei Antworten. Nur "live" setzt die Marke --
       bei "weiss nicht" behauptet hier niemand etwas, weder in die
       eine noch in die andere Richtung. */
    /* ==== DIE REACTION-KACHEL HOLT IHREN ZUSTAND ===================
       (28.09.2026.)

       Sie steht als „geschlossen" in der Wand, bis der Server etwas
       anderes sagt. Das ist die richtige Vorgabe: Wer nichts weiss,
       behauptet nicht, es laufe gerade etwas.

       DIE ABFRAGE HAENGT AN DER KACHEL UND NICHT AN DER SEITE. Gibt
       es sie nicht -- im Agenturhaus zum Beispiel --, wird auch
       nicht gefragt. Sonst stuende dort bei jedem Aufruf ein 404 in
       der Konsole, und pruef-handy wuerde die Seite zu Recht
       beanstanden; genau das ist am 27.09. beim Notizblock
       passiert. */
    const sendungsKachel = ziel.querySelector('.kachel[data-sendung="ja"]');
    if (sendungsKachel) {
      fetch('/workspace/api/reaktion', { credentials: 'same-origin' })
        .then((a) => (a.ok ? a.json() : null))
        .then((l) => {
          if (l && typeof l.stand === 'string') sendungsKachel.dataset.stand = l.stand;
        })
        .catch(() => { /* Die Wand steht auch ohne diese Auskunft. */ });
    }

    if (liveKacheln.length && window.LiveStatus) {
      window.LiveStatus.beobachten((lage) => {
        for (const li of liveKacheln) {
          const link = li.querySelector('.kachel__link');
          const alt = li.querySelector('.kachel__live');
          if (lage.zustand === 'live') {
            if (!alt && link) {
              const marke = window.LiveStatus.abzeichen('LIVE');
              marke.classList.add('kachel__live');
              link.append(marke);
            }
            li.dataset.live = 'ja';
          } else {
            if (alt) alt.remove();
            delete li.dataset.live;
          }
        }
      });
    }

  }

  /* =====================================================================
     WARUM DIE GRUPPEN OFFEN BLEIBEN — nachgemessen am 20.09.2026

     Der Gedanke war: Ein Modi sieht beim allerersten Besuch 25 Kacheln
     in 5 Gruppen, eine rechte Hand 30 in 6, DogFather 39 in 8. Das ist
     eine Wand. Naheliegend wäre, beim ersten Mal alles außer der ersten
     Gruppe zuzuklappen -- dann stünde die Gliederung da wie ein
     Inhaltsverzeichnis.

     GEBAUT, GEMESSEN, WIEDER ENTFERNT. Drei Gründe, alle gemessen:

       1. DIE ERSTE GRUPPE IST NICHT DIE WICHTIGSTE. Bei DogFather
          heißt sie „Rund um das Team" und hat GENAU EINE Kachel. Er
          hätte eine Kachel gesehen und sieben zugeklappte
          Überschriften. Das ist keine Gliederung, das ist eine leere
          Seite mit Beschriftung.

       2. „PASST ES AUF DEN SCHIRM" KLAPPT FAST IMMER ZU. Gedacht war
          die Regel als Selbstanpassung: nur einklappen, wenn die
          letzte Überschrift unter den Rand rutscht. Bei 30 Kacheln
          rutscht sie das auch auf einem 1280×900-Bildschirm. Die
          Regel, die „nur auf dem Handy greifen" sollte, hätte überall
          gegriffen.

       3. ES GIBT KEINEN „ERSTEN BESUCH" MEHR. Der Merker entsteht erst,
          wenn jemand eine Gruppe anfasst. Wer die Seite seit Wochen
          benutzt und nie geklappt hat, sähe für das Skript aus wie ein
          Neuling -- und fände am Morgen seine Startseite umgebaut. Eine
          Verbesserung, die den Bestand überrumpelt, ist keine.

     Was bleibt: Die Gruppen sind klappbar, die Zahl steht am Kopf, und
     der Zustand wird gemerkt. Wer aufräumen will, kann es -- und es
     bleibt so. Das ist die Entscheidung des Nutzers, nicht meine.
     ===================================================================== */

  /* ---------- Das Licht folgt dem Zeiger -----------------------------------

     Die Kachel trägt einen weichen Lichtfleck. Er sitzt ruhend oben links
     und wandert unter dem Zeiger mit. Kein Blinken, keine Bewegung des
     Inhalts -- es wird nur an einer anderen Stelle heller. Genau das ist
     der Unterschied zwischen "sieht gut aus" und "fühlt sich gut an".

     EIN Zuhörer für alle Kacheln statt siebzehn einzelner. Und in einem
     Bild je Rahmen: pointermove feuert dutzendfach je Sekunde; wer bei
     jedem Ereignis in den Stil schreibt, lässt den Browser das Bild
     mehrfach umsonst neu berechnen.

     Auf Fingerbedienung und bei "weniger Bewegung" bleibt es ganz aus --
     dort gibt es keinen Zeiger, dem etwas folgen könnte. */
  /* lichtFolgen steht seit dem 01.09.2026 in kopf.js und gilt fuer ALLE
     Karten im Workspace, nicht nur fuer die Kacheln hier. Eine zweite
     Fassung an dieser Stelle haette bedeutet: zwei Zuhoerer auf
     denselben Bewegungen, und der Fehler waere erst aufgefallen, wenn
     jemand die eine geaendert haette und sich nichts tat. */


  /* ---------- Die Begrüßung ------------------------------------------------

     Sie soll in drei Zeilen sagen, was man beim Reinkommen wissen will:
     WANN ist es, WER bin ich, WIE steht es. Vorher stand dort "Angemeldet"
     -- eine Zeile, die nichts hinzufügt, weil oben rechts der eigene Name
     mit Rolle steht. */

  const WOCHENTAGE = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
    'Donnerstag', 'Freitag', 'Samstag'];
  const MONATE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
    'August', 'September', 'Oktober', 'November', 'Dezember'];

  /* Kalenderwoche nach ISO 8601 -- die Woche, in der der Donnerstag liegt.
     Selbst gerechnet, weil eine falsche KW schlimmer ist als gar keine
     und dafür keine fremde Bibliothek in die Seite gehört. */
  function kalenderwoche(d) {
    const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
    const anfang = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
    return Math.ceil(((t - anfang) / 86400000 + 1) / 7);
  }

  /* Manche Tage haben einen Charakter, und den zu benennen kostet nichts.
     Bewusst NICHT für jeden Tag -- ein Wort, das immer da steht, liest
     nach drei Tagen niemand mehr. */
  const TAGESMARKER = {
    1: 'Neue Woche',
    5: 'Endspurt',
    6: 'Wochenende',
    0: 'Wochenende',
  };

  /* ---------- Die Uhr in der Begrüßungskachel -------------------------
     Zwei Ringe um dieselbe Mitte: der äußere zeigt die Minute in der
     Stunde, der innere die Sekunde. Beides als SVG-Kreis mit
     `stroke-dasharray` -- ein Kegelverlauf (conic-gradient) hätte an
     der Naht eine sichtbare Kante, ein Kreisbogen nicht.

     UMFANG = 2 * pi * 44 = 276.46. Die Zahl steht hier ausgerechnet und
     nicht als Formel im Stil: Ändert jemand den Radius im HTML, fällt
     der Ring sofort auf, statt sich stillschweigend zu verrechnen.

     KEIN setInterval(…, 1000). Ein Takt von genau einer Sekunde läuft
     mit der Zeit aus dem Tritt (jeder Durchlauf kostet ein paar
     Millisekunden), und die Anzeige springt dann gelegentlich zwei
     Sekunden weiter. Stattdessen wird jedes Mal bis zur NÄCHSTEN vollen
     Sekunde gewartet -- die Anzeige bleibt für immer im Takt der
     Systemuhr. */
  /* Drei Umfaenge, ausgerechnet und nicht als Formel im Stil: Aendert
     jemand einen Radius im HTML, faellt der Ring sofort auf, statt sich
     stillschweigend zu verrechnen.  U = 2 * pi * r  */
  const UMFANG = { sekunde: 285.88, minute: 241.90, stunde: 197.92 };  // r = 45.5 / 38.5 / 31.5

  function uhrStarten() {
    const zeit = $('uhr-zeit'), sek = $('uhr-sek');
    const ringe = {
      stunde: $('uhr-stunde'), minute: $('uhr-minute'), sekunde: $('uhr-sekunde'),
    };
    if (!zeit || !ringe.sekunde) return;
    const p = (n) => String(n).padStart(2, '0');

    /* Voll = kein Versatz. Die Ringe wachsen im Uhrzeigersinn, weil das
       SVG im Stil um 90 Grad zurueckgedreht ist. */
    /* ALLE DREI LAGEN EINES RINGES AUF EINMAL (07.09.2026).

       Seit jeder Ring aus Schatten, Koerper und Oberkante besteht,
       muessen alle drei denselben Stand haben. Sie tragen dafuer
       `data-ring`; einzeln gepflegte Verweise waeren drei Stellen, an
       denen man eine vergessen kann -- und ein Schatten, der stehen
       bleibt, sieht sofort kaputt aus. */
    const lagen = {}, koepfe = {};
    for (const welcher of ['sekunde', 'minute', 'stunde']) {
      lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
      koepfe[welcher] = document.querySelector(`[data-kopf="${welcher}"]`);
    }

    /* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026).

       Filipe: "ich will aber dass die sekunden wie punkte sind".

       Sechzig Punkte auf der Bahn, einer je Sekunde, und es leuchten so
       viele, wie vergangen sind. `stroke-linecap: round` macht aus einer
       Strichlaenge nahe null einen Kreis vom Durchmesser der
       Strichbreite -- so entsteht ein Punkt ohne ein einziges weiteres
       Element.

       DAS MUSTER MUSS MITWACHSEN, und genau das kann `dashoffset`
       allein nicht: Es verschiebt ein festes Muster, es kuerzt es
       nicht. Ein festes Punktmuster plus Offset ergaebe eine Reihe, die
       WANDERT statt zu wachsen. Deshalb wird die Liste je Sekunde neu
       gebaut: n Paare aus Punkt und Luecke, dahinter eine Luecke ueber
       den ganzen Rest. Sechzig Zahlenpaare einmal je Sekunde sind
       nichts -- die Alternative waeren sechzig Elemente im Dokument. */
    /* Wie viele Glieder hat welche Bahn, und wie lang ist eines?
       Die Sekunde bekommt PUNKTE (Laenge nahe null, runde Kappe), Minute
       und Stunde BALKEN -- je langsamer, desto laenger das Glied. So
       liest man die drei auch ohne Farbe auseinander. */
    const GLIEDER = { sekunde: 60, minute: 60, stunde: 12 };
    /* DIE STUNDE WAR BREITER ALS LANG (behoben 09.09.2026, screen5).

       Filipe: "alles ist mega ausser die stunden muss du noch
       perfektionnieren."

       Nachgemessen war das der Grund: Ein Stundenglied war 5,5 lang
       und 7 breit. Ein Segment, das breiter ist als lang, liest sich
       nicht als Balken auf einer Bahn, sondern als Klotz quer darauf --
       und weil die Kantenlage 0,4 nach oben versetzt ist, lief
       zusaetzlich ein heller Strich mitten hindurch statt an der
       Oberkante entlang.

       Jetzt 10 lang bei 5,8 breit. Das Verhaeltnis ist damit 1,7:1
       statt 0,79:1 -- aus dem Klotz wird ein Balken, und der helle
       Strich sitzt wieder da, wo er hingehoert: auf der Kante.

       Die Staffelung bleibt eindeutig: Punkt (0,01), kurzer Balken
       (1,7), langer Balken (10). Je langsamer die Bahn, desto laenger
       das Glied. */
    const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 10 };

    const punktMuster = (U, n, gesamt, laenge) => {
      const schritt = U / gesamt;
      if (n <= 0) return `0 ${U}`;
      /* 0.01 statt 0: Manche Browser zeichnen eine Strichlaenge von
         exakt null gar nicht, auch mit runder Kappe. */
      const paar = `${laenge} ${(schritt - laenge).toFixed(3)} `;
      /* DIE REIHENFOLGE ENTSCHEIDET, OB DER REST EINE LUECKE IST.

         In `dasharray` wechseln sich Strich und Luecke ab, beginnend
         mit einem Strich. Nach n Paaren stehen 2n Werte -- der naechste
         Wert sitzt damit an UNGERADER Stelle und ist ein STRICH.

         Genau daran bin ich zweimal gescheitert. Erst haengte ich den
         Rest direkt an (2n+1 Werte, ungerade -- SVG verdoppelt die
         Liste und vertauscht dabei alles), dann setzte ich eine Null
         hinterher (`rest 0`): Die Anzahl war gerade, aber der Rest
         stand weiterhin an ungerader Stelle und wurde gezeichnet. Im
         Bildschirmfoto lief beide Male ein durchgehender roter Bogen
         ueber die halbe Uhr, neben den richtigen Punkten.

         Richtig ist die Null ZUERST: Sie belegt die ungerade Stelle als
         Strich der Laenge null, und der Rest landet an gerader Stelle --
         als Luecke, wie gemeint. Zwei Zahlen in der richtigen
         Reihenfolge, und der Rest verschwindet. */
      return paar.repeat(n) + '0 ' + (U - n * schritt).toFixed(3);
    };

    const setze = (welcher, anteil) => {
      const U = UMFANG[welcher];

      /* ALLE DREI BAHNEN SIND REIHEN (08.09.2026).

         Filipe: "ich will auch dass die stunden und minuten auch barren
         oder punkte sind und nicht so eine durchlaufende schleife."

         Ein durchgehender Bogen zeigt einen Stand, eine Reihe zeigt
         SCHRITTE -- und Zeit besteht aus Schritten. Die Stunde bekommt
         zwoelf Balken (ein Zifferblatt hat zwoelf), Minute und Sekunde
         sechzig. Das erste Glied gehoert dem Wert 0: Bei 0 Sekunden
         leuchtet eines, bei 59 alle sechzig. Ein Ring, der bei null
         voellig leer ist, sieht eine Sekunde lang aus wie ein
         Ladefehler. */
      const gesamt = GLIEDER[welcher];
      /* ABRUNDEN, NICHT RUNDEN -- der Unterschied ist ein ganzer Balken.

         `Math.round` haette bei Minute und Stunde ab der HAELFTE
         aufgerundet: Um 14:30 lief der Stundenring auf 2 + 0,5 = 2,5,
         gerundet 3, plus eins = VIER Balken -- obwohl erst die dritte
         Stunde laeuft. Dasselbe im Minutenring ab Sekunde 30. Die Uhr
         war damit die halbe Zeit ueber einen Balken zu weit, und zwar
         gerade dann nicht, wenn man hinsieht (zur vollen Stunde stimmte
         sie). Nachgerechnet, nicht geschaetzt: 10:30 -> 11 Balken,
         14:30 -> 3, 23:59 -> 12, 00:00 -> 1.

         Bei der Sekunde macht es keinen Unterschied (sk ist ganz), bei
         den anderen beiden ist es der ganze Unterschied. */
      const n = Math.min(Math.floor(anteil * gesamt) + 1, gesamt);
      const muster = punktMuster(U, n, gesamt, GLIED_LAENGE[welcher]);

      /* JEDES GLIED SITZT AUF SEINER ZAHL, ES BEGINNT NICHT DORT
         (09.09.2026, screen2).

         Filipe: "oben in der mitte ist auch mittag, die stunden sehen
         bissl verschoben aus."

         Er hatte recht, und es ist ausrechenbar. Ein Strichmuster
         beginnt bei Position null -- der erste Balken lief also von 12
         Uhr aus im Uhrzeigersinn weg, statt unter der Zwoelf zu stehen.
         Sein MITTELPUNKT lag damit um eine halbe Balkenlaenge daneben:

           Stunde   10 von 197,92 Umfang  ->  9,09 Grad
           Minute   1,7 von 241,90        ->  1,27 Grad
           Sekunde  0,01 von 285,88       ->  0,006 Grad

         Deshalb faellt es nur bei den Stunden auf: Neun Grad sieht man,
         eineinviertel nicht. Der Fehler steckte aber in allen dreien --
         und genau so etwas faellt beim naechsten Umbau auf die Fuesse,
         wenn die Glieder laenger werden.

         Eine halbe Gliedlaenge zurueck, und jedes Glied steht mittig
         auf seiner Zahl. `dashoffset` ist dabei POSITIV: Ein positiver
         Wert schiebt das Muster rueckwaerts (siehe die Begruendung am
         Kopf weiter unten, wo es aus demselben Grund negativ ist). */
      const halb = GLIED_LAENGE[welcher] / 2;
      for (const el of lagen[welcher]) {
        el.style.strokeDasharray = muster;
        el.style.strokeDashoffset = halb.toFixed(3);
      }

      /* DAS LETZTE GLIED, EINZELN (09.09.2026, screen5).

         Filipe: "immer der letzte soll mehr strahlen oder so."

         Vorher liefen dafuer drei HTML-Perlen auf eigenen Bahnen -- mit
         einer EIGENEN Winkelrechnung. Zwei Rechnungen fuer denselben
         Ort sind zwei Gelegenheiten auseinanderzulaufen, und genau das
         ist am 08.09. passiert: Die Bahnen tauschten die Farben, die
         Perlen nicht.

         Jetzt zeichnet eine zweite Lage GENAU EIN Glied, aus denselben
         Zahlen wie die Reihe darunter: Laenge unveraendert, alles
         andere Luecke, Anfang um (n-1) Schritte verschoben.

         `dashoffset` ist NEGATIV, und das ist keine Willkuer: Ein
         positiver Wert schiebt das Muster rueckwaerts, der Strich
         erschiene frueher. Um ihn bei p BEGINNEN zu lassen, braucht es
         -p. */
      const kopf = koepfe[welcher];
      if (kopf) {
        const schritt = U / gesamt;
        const laenge = GLIED_LAENGE[welcher];
        kopf.style.strokeDasharray = `${laenge} ${(U - laenge).toFixed(3)}`;
        /* Derselbe Versatz wie bei der Reihe darunter -- sonst saesse der
         Kopf um eine halbe Gliedlaenge neben seinem eigenen Glied. Zwei
         Rechnungen fuer denselben Ort waren an dieser Stelle schon
         einmal der Fehler. */
      kopf.style.strokeDashoffset = `${(halb - (n - 1) * schritt).toFixed(3)}`;
      }
    };

    const takt = () => {
      const j = new Date();
      const std = j.getHours(), min = j.getMinutes(), sk = j.getSeconds();
      zeit.textContent = `${p(std)}:${p(min)}`;
      sek.textContent = p(sk);

      /* JEDER RING LAEUFT WEICH IN SEINER EIGENEN EINHEIT.

         Die Sekunde springt (sie ist die Anzeige selbst), Minute und
         Stunde nicht: Ein Minutenring, der einmal pro Minute einen
         Sprung macht, sieht aus wie eine haengende Anzeige. Er bekommt
         deshalb die Sekunden anteilig dazu -- und die Stunde die
         Minuten. Genau das hat Filipe verlangt ("die minuten sollen
         auch den minuten entsprechen mitlaufen").

         Die Stunde ueber ZWOELF, nicht ueber 24: Ein Zifferblatt hat
         zwoelf Stunden, und der Ring soll sich wie eines lesen. */
      setze('sekunde', sk / 60);

      /* HIER STAND DIE PERLENRECHNUNG -- 60 Zeilen, und sie ist mit den
         Perlen zusammen weggefallen (09.09.2026, screen5).

         Sie war ein Lehrstueck fuer sich: eine eigene Uhr ab dem ersten
         Takt, weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab und
         die Nachkommastellen verlor; ein Startwinkel je Bahn; drei
         Winkel, die die kleineren Einheiten anteilig mittragen mussten,
         damit kein Kopf neben dem Ende seines Bogens steht.

         All das war noetig, WEIL der Kopf ein zweites Ding an einer
         zweiten Stelle war. Er ist jetzt das letzte Glied der Bahn
         selbst und wird von derselben Funktion aus denselben Zahlen
         gesetzt (siehe `setze`). Damit kann er gar nicht mehr
         danebenstehen -- nicht weil die Rechnung besser ist, sondern
         weil es nur noch eine gibt.

         Der Rest, der hier stand (nullpunkt, startWinkel, minStart,
         stdStart, sekStart), wird nirgends sonst gebraucht und ist
         ebenfalls weg. Eine Variable, die nur noch gepflegt wird, ist
         eine Falle fuer den naechsten Leser. */
      setze('minute', (min + sk / 60) / 60);
      setze('stunde', ((std % 12) + min / 60) / 12);

      /* Der volle Zeitpunkt fuer Vorleseprogramme -- sichtbar steht dort
         nur die Uhrzeit, vorgelesen wird der ganze Satz. */
      const uhr = $('uhr');
      if (uhr) uhr.setAttribute('aria-label', `${p(std)}:${p(min)} Uhr`);

      /* KEIN setInterval(1000). Ein fester Takt laeuft mit der Zeit aus
         dem Tritt (jeder Durchlauf kostet Millisekunden) und
         ueberspringt dann gelegentlich eine Sekunde. Gewartet wird bis
         zur naechsten VOLLEN Sekunde -- die Anzeige bleibt fuer immer im
         Takt der Systemuhr. */
      setTimeout(takt, 1000 - (Date.now() % 1000) + 8);
    };
    takt();
  }

  function grussZeigen() {
    const jetzt = new Date();
    const stunde = jetzt.getHours();

    $('datum').textContent =
      `${WOCHENTAGE[jetzt.getDay()]}, ${jetzt.getDate()}. ${MONATE[jetzt.getMonth()]}`
      + ` · KW ${kalenderwoche(jetzt)}`;

    const marker = TAGESMARKER[jetzt.getDay()];
    const mEl = $('tagesmarker');
    if (marker) { mEl.textContent = marker; mEl.hidden = false; }

    /* Feiner gestuft als vorher: Wer um kurz nach Mitternacht reinkommt,
       liest nicht "Guten Abend", und wer um 13 Uhr kommt, nicht "Morgen". */
    const tageszeit =
      stunde < 5  ? 'Noch wach' :
      stunde < 11 ? 'Guten Morgen' :
      stunde < 14 ? 'Guten Mittag' :
      stunde < 18 ? 'Guten Tag' :
      stunde < 22 ? 'Guten Abend' : 'Späten Abend';

    /* Der Name ist das Wichtigste an der Zeile und wird deshalb getrennt
       ausgezeichnet -- der Gruß leiser, der Name kräftig. */
    const g = $('gruss');
    g.textContent = '';
    g.append(el('span', 'gruss__wort', tageszeit + ', '));
    g.append(el('span', 'gruss__name', ich.name));

    /* Die Plakette: das eigene Bild, sonst der erste Buchstabe in der
       Farbe der Rolle. Dieselbe Zuordnung wie im Kopf der Seite, damit
       nichts auseinanderläuft.

       DAS BILD FEHLTE HIER BIS ZUM 01.09.2026 -- und das ist ein
       lehrreicher Fehler: Der Server liefert es längst mit, und im
       Quelltext dort steht sogar ausdrücklich "es steht in der
       Kopfleiste JEDER Seite UND IN DER BEGRÜSSUNG". Die Absicht war
       aufgeschrieben, die Hälfte davon nie gebaut. Aufgefallen ist es
       nicht, weil ein Buchstabe in einem Kreis nicht falsch aussieht --
       nur eben nicht wie man selbst.

       Ein Kommentar ist kein Beweis. Deshalb prüft pruef-start-ansicht
       das jetzt mit einem echten Bild nach. */
    const p = $('plakette');
    p.textContent = '';
    p.dataset.rolle = ich.rolle;   /* die Plakette bleibt DEINE */
    if (ich.bild) {
      const b = el('img', 'willkommen__foto');
      b.src = ich.bild;
      b.alt = '';
      /* Geht das Bild verloren (gelöschte Datei, kein Netz), erscheint
         sonst ein kaputtes Bildsymbol. Dann lieber zurück zum
         Buchstaben -- der ist immer richtig. */
      b.addEventListener('error', () => {
        b.remove();
        p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
      });
      p.append(b);
    } else {
      p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
    }

    /* Die Zeile unter dem Gruss sagt, WESSEN Arbeitsplatz man sieht.
       Bei der eigenen Sicht wie bisher die eigene Rolle; bei fremder
       Sicht der Name davor -- sonst liest man "Creator, dein eigener
       Bereich" und haelt es fuer die eigene Lage. */
    /* DER NAME DER EIGENEN ROLLE KOMMT NOTFALLS VOM SERVER (09.09.2026).

       ROLLENTEXT steht in einer Datei, die JEDER bekommt, der die Seite
       oeffnet -- auch jeder Manager, jeder Scout, jeder Creator. Eine
       Rolle, von der ausser DogFather niemand wissen soll, darf deshalb
       nicht darin stehen: Ein Blick in den Quelltext wuerde genuegen.

       `rolle_name` kommt dagegen aus /workspace/api/ich und beschreibt
       immer nur EINEN Menschen -- den, der gerade angemeldet ist. Wer
       Manager ist, liest dort "Manager" und sonst nichts.

       Die Reihenfolge ist Absicht: erst das ausfuehrliche Wort aus der
       Liste (mit dem erklaerenden Zusatz dahinter), dann der Name vom
       Server, zuletzt der nackte Schluessel. So aendert sich fuer die
       fuenf bekannten Rollen nichts. */
    /* DIE ZIERZEILE UEBER DEM TITEL (10.09.2026).

       Sie nennt den Betrieb -- fest "Spicy Media" in start.html. Das
       stimmt nicht fuer jeden, der hier arbeitet; wo es nicht stimmt,
       schickt der Server den passenden Namen mit. WER das ist, steht
       ausdruecklich nicht in dieser Datei: Sie bekommt jeder, der die
       Seite oeffnet.

       ERSETZT WIRD NUR DER TEXTKNOTEN, nicht der ganze Inhalt: In dem
       Element sitzen zwei <i class="zraute"> als Zierrauten links und
       rechts. Ein textContent darauf haette sie geloescht -- und zwar
       lautlos, denn eine fehlende Raute sieht nicht nach Fehler aus,
       sondern nach Absicht. Ein neues Element drumherum waere die
       andere naheliegende Loesung und aendert die Flex-Aufteilung; das
       hier aendert am Aufbau gar nichts. */
    if (ich.marke) {
      const marke = document.querySelector('.zmarke');
      if (marke) {
        for (const knoten of marke.childNodes) {
          if (knoten.nodeType === 3 && knoten.textContent.trim()) {
            knoten.textContent = ` ${ich.marke} `;
          }
        }
      }
    }

    /* DER GROSSE TITEL DARUNTER (24.09.2026).

       Er sagt, WO man ist. In der Seite steht "Zentrale" -- das gilt
       fuer das Agenturhaus. Fuer das Teamhaus schickt der Server ein
       eigenes Wort, aus demselben Grund wie bei der Marke darueber:
       Was nur dieses Haus angeht, gehoert nicht in eine Datei, die
       jeder Creator herunterlaedt.

       NUR ERSETZEN, WENN ETWAS KOMMT. Ohne Angabe bleibt stehen, was
       in der Seite steht. Ein leerer Titel waere das Schlimmste von
       beidem: Die groesste Schrift der Seite stuende leer da, und
       niemand koennte sagen, ob das ein Fehler ist oder Absicht. */
    if (ich.titel) {
      const titel = $('ztitel');
      if (titel) titel.textContent = ich.titel;
    }

    /* JETZT DUERFEN SIE GESEHEN WERDEN (27.09.2026).

       Bis hierher waren Marke und Titel durchsichtig -- in der Seite
       steht die Vorgabe des Agenturhauses, und die hat im Teamhaus
       nichts verloren. Ab hier steht entweder das Wort des Servers
       da oder die Vorgabe, und beide sind dann richtig.

       AUCH OHNE ANGABE WEGNEHMEN: Das Agenturhaus bekommt keinen
       eigenen Titel geschickt, dort gilt die Vorgabe. Wer das
       Wegnehmen an `ich.titel` haengt, laesst die groesste Schrift
       der Seite ausgerechnet dort unsichtbar. */
    for (const e of document.querySelectorAll('[data-wartet]')) {
      e.removeAttribute('data-wartet');
    }

    $('rollentext').textContent = ich.sicht
      ? `Arbeitsplatz von ${ich.sicht.name} · `
        + `${ROLLENTEXT[zeigt.rolle] || ich.sicht.rolle_name || zeigt.rolle}`
      : (ROLLENTEXT[ich.rolle] || ich.rolle_text || ich.rolle_name || ich.rolle);

    /* Datum und Rolle in der Anrede -- wie im Vorbild, wo unter "Noch
       wach, Dogi" das Datum steht und daneben "ADMIN & PARTNER".

       Das Datum steht damit ZWEIMAL auf der Kachel: oben in der
       Zierzeile mit KW, hier ohne. Das ist Absicht und keine Doppelung:
       Oben gehoert es zur Tafel ("welcher Tag ist heute"), hier zur
       Anrede ("wann begruesse ich dich"). Im Vorbild ist es genauso,
       und es liest sich dort natuerlich. Faellt es Filipe als Doppelung
       auf, kommt die Zierzeile oben weg -- nicht diese Zeile. */
    const jetzt2 = new Date();
    const dat = $('zgruss-datum');
    if (dat) {
      dat.textContent = `${WOCHENTAGE[jetzt2.getDay()]}, `
        + `${jetzt2.getDate()}. ${MONATE[jetzt2.getMonth()]}`;
    }
    const rolleEl = $('zgruss-rolle');
    if (rolleEl) {
      /* Aus demselben Grund wie oben: Steht die Rolle nicht in der
         Liste, fragt die Plakette den Server -- aber nur fuer die
         EIGENE Sicht. In einer fremden Sicht gibt es kein rolle_name
         zu dieser Person, und etwas anderes hinzuschreiben waere
         geraten. */
      const eigene = !ich.sicht;
      rolleEl.textContent = (ROLLEN_KURZ[zeigt.rolle]
        || (eigene ? ich.rolle_name : '') || zeigt.rolle || '').toUpperCase();
      rolleEl.hidden = false;
    }
  }

  /* Kurzform der Rolle fuer die Plakette neben dem Namen. Der lange
     Text ("Gesamtuebersicht und Freigaben") steht schon darunter --
     hier braucht es das Wort, nicht die Erklaerung. */
  const ROLLEN_KURZ = {
    admin: 'DogFather', manager: 'Manager', scout: 'Scout',
    creator: 'Creator', spicy: 'Spicy Media',
  };

  /* Ein Satz zur Lage -- gerechnet aus denselben Hinweisen, die darunter
     stehen. Keine zweite Zählung, sonst gäbe es irgendwann zwei
     Wahrheiten auf einem Bildschirm. */
  function lageZeigen() {
    const el2 = $('lage');
    const gesamt = hinweise.reduce((s, h) => s + h.anzahl, 0);
    const dringend = hinweise.filter((h) => h.stufe === 'warnung')
      .reduce((s, h) => s + h.anzahl, 0);

    let satz, stufe;
    if (dringend > 0) {
      satz = `${dringend} ${dringend === 1 ? 'Sache ist' : 'Sachen sind'} überfällig – das zuerst.`;
      stufe = 'warnung';
    } else if (gesamt > 0) {
      satz = `${gesamt} ${gesamt === 1 ? 'Punkt steht' : 'Punkte stehen'} an, nichts davon brennt.`;
      stufe = 'offen';
    } else {
      /* „VORARBEITEN" IST ARBEITSSPRACHE (18.09.2026).

         Fuer jemanden mit Aufgabenliste ist der Satz richtig. Ein
         Mitglied der Community arbeitet hier aber nicht vor -- es
         schaut vorbei. Derselbe Satz fuer beide waere fuer die eine
         Haelfte eine Aufforderung, die es nicht einloesen kann. */
      satz = hatArbeitsplatz()
        ? 'Nichts liegt an – guter Tag zum Vorarbeiten.'
        : 'Gerade ist nichts los. Guter Moment, um zu stöbern.';
      stufe = 'ruhig';
    }
    el2.textContent = satz;
    el2.dataset.stufe = stufe;
    el2.hidden = false;

    standSetzen('offen', gesamt === 0 ? '0' : String(gesamt), stufe);
  }

  /* ---------- Der Ring links ----------------------------------------------
     Nach dem Vorbild von VanVans Werktisch. Zwei Bahnen:

       INNEN  eine feine Bahn mit EINEM Segment je Person (bzw. je
              Stunde), eingefaerbt nach Lage -- dort sieht man jedes
              Einzelne.
       AUSSEN ein durchgehender Bogen, der GENAU auf der Prozentzahl in
              der Mitte steht.

     Die Trennung ist aus dem Vorbild uebernommen, samt Begruendung:
     Dort zeigte der Ring erst die 162 Produkte je einzeln, und der
     Anteil des Blauen entsprach dann der Zahl der fertigen AKTEN (44 %),
     waehrend daneben die Zahl der erfuellten ANGABEN (91 %) stand. Zwei
     Auskuenfte, die sich widersprechen, sind schlimmer als eine.
     Deshalb: der Bogen sagt dasselbe wie die Zahl, immer. */

  const RING_FARBE = {
    frei:  '#57b89b',   /* nichts offen -- gedaempftes Petrol, kein Grasgruen */
    dran:  '#7fc4f2',   /* heute versorgt */
    offen: '#ff6b74',   /* liegt liegen */
  };

  function bogen(cx, cy, r, von, bis) {
    const x1 = cx + r * Math.cos(von), y1 = cy + r * Math.sin(von);
    const x2 = cx + r * Math.cos(bis), y2 = cy + r * Math.sin(bis);
    const gross = bis - von > Math.PI ? 1 : 0;
    return `M ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r} ${r} 0 ${gross} 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`;
  }
  const svgEl = (name, attr) => {
    const n = document.createElementNS('http://www.w3.org/2000/svg', name);
    for (const [k, v] of Object.entries(attr)) n.setAttribute(k, v);
    return n;
  };

  function ringZeichnen(daten) {
    const svg = $('zring-bild');
    if (!svg) return;
    svg.replaceChildren();
    const segmente = daten.segmente || [];

    /* Der Verlauf fuer den Fortschrittsbogen -- eine Reise von Rot nach
       Babyblau, dieselben zwei Farben wie in der Uhr daneben und im
       Rahmen der Kachel. Keine dritte Handschrift. */
    const defs = svgEl('defs', {});
    const lauf = svgEl('linearGradient', { id: 'zring-lauf', x1: '0', y1: '0', x2: '1', y2: '1' });
    for (const [o, f] of [['0%', '#ff5f6d'], ['46%', '#c07ad0'], ['100%', '#7fc4f2']]) {
      lauf.appendChild(svgEl('stop', { offset: o, 'stop-color': f }));
    }
    defs.appendChild(lauf);
    svg.appendChild(defs);

    /* DIE RADIEN FUELLEN JETZT DEN KASTEN (09.09.2026, screen1).

       Filipe: "der kreis soll die gleiche groesse wie die uhr haben."

       Nachgemessen waren beide Kaesten schon exakt gleich gross
       (248 x 248) -- der gezeichnete Ring aber nicht: Sein aeusserer
       Bogen lag bei Radius 128 von 150, plus 4,5 halbe Strichbreite
       also bei 132,5. Das sind 88 Prozent des Kastens, gerendert 219
       statt 248 px. Die Uhr daneben fuellt ihren Kasten dagegen ganz
       aus (ihr Leuchtkranz ragt sogar 7 px darueber hinaus). Zwei
       gleich grosse Kaesten mit ungleich grossem Inhalt sehen ungleich
       gross aus, und genau das war zu sehen.

       Jetzt 145 statt 128 (aussen) und 120 statt 106 (die Segmente) --
       dasselbe Verhaeltnis zueinander, nur bis an den Rand. 145 + 4,5
       = 149,5 von 150: ein halber Pixel Luft, damit die runde Kappe
       nicht abgeschnitten wird. */
    const R_AUSSEN = 145;
    const R_SEGMENTE = 120;

    /* 1. Die leere Bahn zuerst -- damit der Ring auch bei 0 % ein Ring
          ist und nicht ein Punkt. */
    svg.appendChild(svgEl('path', {
      d: bogen(150, 150, R_AUSSEN, 0, Math.PI * 1.9999),
      stroke: 'rgba(120, 150, 185, .16)', 'stroke-width': '9',
      fill: 'none', 'stroke-linecap': 'round',
    }));

    /* 2. Ein Segment je Person (oder Stunde), innen. Mit Luecke
          dazwischen, sonst verschmelzen sie zu einem Ring und man
          zaehlt nichts mehr. */
    if (segmente.length) {
      const schritt = (Math.PI * 2) / segmente.length;
      const luecke = Math.min(schritt * 0.22, 0.06);
      segmente.forEach((s, i) => {
        const von = i * schritt + luecke / 2;
        const bis = (i + 1) * schritt - luecke / 2;
        const st = svgEl('path', {
          d: bogen(150, 150, R_SEGMENTE, von, bis),
          stroke: RING_FARBE[s.stufe] || '#8fb3cf',
          'stroke-width': '7', fill: 'none', 'stroke-linecap': 'round',
          opacity: s.stufe === 'offen' ? '.95' : '.72',
        });
        /* Der Name als Sprechblase. Nur der Vorname, und nur das, was
           der Server ohnehin geschickt hat -- der Browser erfaehrt
           nichts, was er nicht sehen darf. */
        const titel = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        titel.textContent = s.name || '';
        st.appendChild(titel);
        svg.appendChild(st);
      });
    }

    /* 3. Der Fortschrittsbogen aussen, genau auf der Prozentzahl. */
    const anteil = Math.max(0, Math.min(100, Number(daten.prozent) || 0));
    const bis = (anteil / 100) * Math.PI * 2;
    if (bis > 0.01) {
      const d = bogen(150, 150, R_AUSSEN, 0, Math.min(bis, Math.PI * 1.9999));
      svg.appendChild(svgEl('path', {
        d, stroke: 'url(#zring-lauf)', 'stroke-width': '9',
        fill: 'none', 'stroke-linecap': 'round',
      }));
      /* Ein heller Punkt an der Spitze macht aus dem Bogen einen
         Zeiger -- er markiert den Stand so genau, wie die Zahl es sagt. */
      const px = 150 + R_AUSSEN * Math.cos(bis), py = 150 + R_AUSSEN * Math.sin(bis);
      svg.appendChild(svgEl('circle', { cx: px, cy: py, r: '3.4', fill: '#eaf4ff' }));
    }

    /* `mitte` schlaegt die Prozentzahl, wenn der Server eine schickt.
       Fuer die Community steht dort die Zahl der Termine -- „2" sagt
       mehr als „50 %", und bei null Terminen waere jede Prozentangabe
       eine Behauptung ueber nichts. Fehlt das Feld, bleibt alles wie
       bisher. */
    $('zring-prozent').textContent = daten.mitte ? String(daten.mitte) : `${anteil} %`;
    $('zring-unter').textContent = daten.titel || '';
  }

  /* WENN DER RING NICHTS ZU SAGEN HAT, SAGT ER DAS (19.09.2026).

     Vorher stand hier ein frueher `return`. Der liess die Startwerte
     aus dem HTML unberuehrt -- und die lauten "–" und "wird geladen".
     Bei einer 503 blieb mitten auf der Startseite dauerhaft ein leerer
     Ring mit "wird geladen" stehen.

     Das ist genau der Fall, den dieselbe Datei an anderer Stelle schon
     richtig macht ("Auch der leere Fall wird GESETZT, nicht
     uebersprungen"). Ein Platzhalter, der nie ersetzt wird, ist eine
     Luege mit Fortschrittsanzeige. */
  function ringStumm() {
    const p = $('zring-prozent'), u = $('zring-unter');
    if (p) p.textContent = '–';
    if (u) u.textContent = 'gerade nicht abrufbar';
    const ring = $('zring');
    if (ring) ring.dataset.stumm = 'ja';
  }

  async function zentraleLaden() {
    let daten;
    try {
      const antwort = await fetch('/workspace/api/zentrale', { credentials: 'same-origin' });
      if (!antwort.ok) { ringStumm(); return; }
      daten = await antwort.json();
    } catch { ringStumm(); return; }   /* Der Rest der Kachel steht trotzdem. */

    ringZeichnen(daten);

    /* Die drei Zahlen unter dem Titel kommen bei Leitung aus derselben
       Antwort -- eine Abfrage, eine Wahrheit. Fuer die Tagesansicht
       fuellen `lageZeigen` und `tagestermineLaden` sie weiter; deshalb
       wird hier nur ueberschrieben, was der Server auch geschickt hat. */
    const zahlen = daten.zahlen || [];
    const felder = ['heute', 'naechster', 'offen'];
    zahlen.slice(0, 3).forEach((z, i) => {
      const wert = $('stand-' + felder[i]);
      const schild = wert?.parentElement?.querySelector('.stand__schild');
      if (!wert || !schild) return;
      wert.textContent = String(z.wert);
      schild.textContent = z.schild;
      /* Die Farbe folgt der Bedeutung, nicht der Position: Was liegen
         bleibt, ist rot -- egal an welcher Stelle es steht. */
      const kasten = wert.closest('.stand');
      if (kasten) {
        kasten.dataset.stufe = /liegt|offen|fehlt/i.test(z.schild)
          ? (Number(z.wert) > 0 ? 'warnung' : 'ruhig') : '';
      }
    });
    if (zahlen.length) {
      standVonZentrale = true;
      $('tagesstand').hidden = false;
    }
  }

  /* ---------- Die drei Ablesungen in der Konsolenmitte --------------------- */

  /* EINE Funktion fuer alle drei, und sie wird von den STELLEN gerufen,
     die die Zahl ohnehin schon haben -- lageZeigen() und
     tagestermineLaden(). Hier wird nichts nachgezaehlt: Zwei Rechenwege
     fuer dieselbe Zahl laufen auseinander, und dann stehen zwei
     Wahrheiten auf einem Bildschirm.

     Der Kasten geht auf, sobald die ERSTE Zahl da ist. Er wartet nicht
     auf beide: Wer nichts Offenes hat, aber drei Calls, soll seinen Tag
     sehen, auch wenn die andere Abfrage haengt. Genau diesen Fehler hat
     die Kachel darunter schon einmal gemacht. */
  /* WER DIE FELDER BESETZT HAT, BEHAELT SIE (08.09.2026).

     Seit der Ring da ist, schreiben ZWEI Quellen in dieselben drei
     Felder: `zentraleLaden` (bei Leitung: im Team / heute dran / liegt
     liegen) und `lageZeigen` + `tagestermineLaden` (Heute / Als
     Naechstes / Offen). Beide laufen nebeneinander los -- wer zuletzt
     ankommt, haette gewonnen, und das waere bei jedem Laden eine andere.

     Ein Bildschirm, auf dem "heute dran: 2" steht und beim naechsten
     Aufruf "Heute: 5", ist schlimmer als einer, der weniger zeigt.
     Deshalb: Hat die Zentrale die Felder belegt, ruehrt sie niemand
     mehr an. Die Reihenfolge des Eintreffens spielt dann keine Rolle. */
  let standVonZentrale = false;

  function standSetzen(welches, wert, stufe) {
    if (standVonZentrale) return;
    const feld = $('stand-' + welches);
    if (!feld) return;
    feld.textContent = wert;
    if (stufe) feld.closest('.stand')?.setAttribute('data-stufe', stufe);
    const kasten = $('tagesstand');
    if (kasten) kasten.hidden = false;
  }

  /* ---------- Laden -------------------------------------------------------- */

  async function laden() {
    try {
      const antwort = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
      if (!antwort.ok) { location.assign('/workspace/'); return; }
      ich = await antwort.json();
    } catch {
      /* EIN FUNKLOCH IST KEIN RAUSWURF (20.09.2026).
         ------------------------------------------------------------
         Hier stand `location.assign('/workspace/')` -- also: Netz kurz
         weg, und der Mensch landet auf der Anmeldeseite. Er glaubt
         dann, er sei rausgeworfen worden, und tippt seinen Code neu
         ein. Im Aufzug, in der Bahn, im Funkloch.

         Dabei ist er gar nicht abgemeldet: Die Sitzung haelt 12
         Stunden. Nur die Anfrage ist nicht durchgekommen.

         Umgeleitet wird deshalb nur noch bei einer ANTWORT, die das
         sagt (401 -- die Zeile darueber). Ein Fehler ohne Antwort ist
         ein Netzfehler, und der bekommt einen Satz und einen Knopf. */
      window.ladefehler?.({
        satz: 'Deine Startseite konnte gerade nicht geladen werden.',
        grund: 'Du bist weiterhin angemeldet – es fehlt nur die Verbindung.',
        nochmal: laden,
      });
      return;
    }

    /* Die Sicht steht in der Antwort von /api/ich. Ohne sie ist `zeigt`
       schlicht die eigene Person -- der Normalfall. */
    zeigt = ich.sicht || ich;

    window.werZeigen?.(ich);
    grussZeigen();
    uhrStarten();

    /* Die Hinweise zuerst -- die Kacheln brauchen ihre Zahlen.
       Die Tagestermine laufen daneben her: Sie sind die rechte Hälfte
       derselben Kachel, aber niemand soll auf sie warten. Scheitern
       sie, steht die linke Hälfte trotzdem. */
    /* Der Ring laeuft daneben her, wie die Tagestermine: Er ist die
       linke Spalte der Kachel, aber niemand soll auf ihn warten.
       Scheitert er, steht der Rest trotzdem. */
    const ringLaeuft = zentraleLaden();

    const termineLaeuft = tagestermineLaden();
    await hinweiseLaden();
    /* KEIN `await ringLaeuft` HIER (08.09.2026).

       Genau das stand kurz an dieser Stelle, und pruef-start-ansicht
       wurde daraufhin dreimal rot -- nicht am Ring, sondern am
       MAUS-LICHT auf den Kacheln weiter unten. Der Grund: Alles, was
       nach diesem `await` kommt, wartet mit. Der Ring braucht eine
       Server-Abfrage, und in der Zeit war das Licht noch nicht
       eingehaengt, als die Pruefung mit dem Zeiger darueberfuhr.

       Gemessen, nicht vermutet: derselbe Lauf am alten Stand meldete
       null Befunde, mit dem `await` drei. Ein zusaetzliches `await` in
       einer Ladefolge ist nie nur eine Verzoegerung fuer sich selbst --
       es verzoegert alles dahinter. */
    await termineLaeuft;
    /* Erst jetzt steht fest, wie die Lage ist. */
    lageZeigen();
    bereicheBauen();
    await zahlenLaden();
  }

  /* Was ist dran? Erster Baustein der Automationen aus dem Konzept.
     Fuehrt bewusst keine eigenen Daten -- jeder Hinweis ist nur eine
     Sicht auf etwas, das schon da ist, und verschwindet von selbst,
     sobald die Sache erledigt ist. Nichts zu quittieren. */
  /* HINWEISE OHNE ZAHL (19.09.2026).

     Vor jedem Hinweis steht seine Anzahl -- das ist richtig, solange
     er Dinge zaehlt ("3 Aufgaben sind ueberfaellig"). Ein Hinweis,
     der einen ZUSTAND beschreibt, zaehlt nichts; eine „1“ davor
     liest sich dort wie ein Zaehlfehler.

     Die Liste ist seit dem 03.10.2026 leer: Ihr einziger Eintrag war
     „kein_geraet" („Bei dir klingelt nichts"), und der steht jetzt
     als Kasten mit Anschalt-Knopf ueber dieser Liste -- siehe
     workspace-hinweise.js, dort steht auch warum.

     SIE BLEIBT TROTZDEM STEHEN, leer. Der naechste Zustandshinweis
     braucht sie wieder, und als Liste ist sie die eine Stelle dafuer
     -- ein Sonderfall im Aufbau waere die Stelle, an der es beim
     naechsten Mal wieder schiefgeht. */
  const OHNE_ZAHL = new Set([]);

  const EINZAHL = {
    aufgaben_ueberfaellig: (n) => `${n} ${n === 1 ? 'Aufgabe ist' : 'Aufgaben sind'} überfällig`,
    aufgaben_heute:        (n) => `${n} ${n === 1 ? 'Aufgabe ist' : 'Aufgaben sind'} heute fällig`,
    aufgaben_review:       (n) => `${n} ${n === 1 ? 'Aufgabe wartet' : 'Aufgaben warten'} auf Freigabe`,
    termine_heute:         (n) => `${n} ${n === 1 ? 'Termin steht' : 'Termine stehen'} heute an`,
    protokoll_fehlt:       (n) => `${n} ${n === 1 ? 'Gespräch hat' : 'Gespräche haben'} noch kein Protokoll`,
    dateien_review:        (n) => `${n} ${n === 1 ? 'Datei wartet' : 'Dateien warten'} auf Freigabe`,
    bereiche_dringend:     (n) => `${n} ${n === 1 ? 'dringender Punkt' : 'dringende Punkte'} in den Bereichen`,
    followup_faellig:      (n) => `${n} Follow-up${n === 1 ? '' : 's'} ${n === 1 ? 'ist' : 'sind'} fällig`,
    uebergabe_offen:       (n) => `${n} übergebene${n === 1 ? 'r Lead wartet' : ' Leads warten'} auf das Onboarding`,
    review_faellig:        (n) => `${n} Review-Termin${n === 1 ? ' ist' : 'e sind'} überfällig`,
    review_bald:           (n) => `${n} Review${n === 1 ? ' steht' : 's stehen'} in den nächsten 7 Tagen an`,
    ohne_betreuung:        (n) => `${n} Creator ${n === 1 ? 'hat' : 'haben'} noch keine zuständige Person`,
    ohne_profil:           (n) => `${n} Creator-Profil${n === 1 ? ' ist' : 'e sind'} noch leer`,
    ohne_startcheck:       (n) => `${n} Creator ${n === 1 ? 'hat' : 'haben'} noch keinen Start-Check`,
    startcheck_handlung:   (n) => `${n} ${n === 1 ? 'Punkt im Start-Check braucht' : 'Punkte im Start-Check brauchen'} Handlung`,
    /* Diese vier beginnen mit der Zahl, wie alle anderen auch: Die Zeile
       schneidet die führende Zahl ab und zeigt sie getrennt davor. Ein
       Satz, der anders anfängt ("Deine Betreuung hat 3 …"), stünde
       hinter der Marke ein zweites Mal mit der 3 -- kein Fehler, den ein
       Programm meldet, aber einer, den jeder sieht. */
    markiert_live:      (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} in der LIVE-Analyse`,
    markiert_content:   (n) => `${n} markierte ${n === 1 ? 'Content-Idee' : 'Content-Ideen'}`,
    markiert_community: (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} bei Community`,
    /* Beide beginnen mit der Zahl, wie alle anderen auch -- die
       Zeile schneidet die fuehrende Zahl ab und zeigt sie getrennt
       davor. "Dir fehlen noch 2 Ziele" stuende sonst hinter einer
       zweiten 2. */
    mz_dringend:        (n) => `${n} Monatsziel${n === 1 ? '' : 'e'} ${n === 1 ? 'ist' : 'sind'} dringend`,
    mz_offen:           (n) => `${n} Monatsziel${n === 1 ? ' ist' : 'e sind'} noch offen`,
    markiert_technik:   (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} bei Technik`,
  };

  async function hinweiseLaden() {
    let daten;
    try {
      const antwort = await fetch('/workspace/api/hinweise', { credentials: 'same-origin' });
      if (!antwort.ok) return;
      daten = await antwort.json();
    } catch { return; }

    hinweise = daten.hinweise || [];
    const liste = $('dran');
    liste.textContent = '';

    /* DIE KACHEL HAT ZWEI HÄLFTEN (05.09.2026), und keine darf die
       andere mitreißen.

       Hier stand `if (!hinweise.length) { block.hidden = true; return; }`
       -- solange die Kachel nur die Hinweise enthielt, war das richtig.
       Jetzt stehen rechts die Termine des Tages: Wer nichts Offenes
       hat, aber drei Calls, hätte seinen Tagesplan nicht mehr gesehen.
       Über das Verstecken entscheidet deshalb tagesblickPruefen(),
       wenn BEIDE Seiten geladen sind. */
    $('dran-leer').hidden = hinweise.length > 0;
    if (!hinweise.length) { tagesblickPruefen(); return; }

    for (const h of hinweise) {
      const li = el('li', 'dran__punkt');
      li.dataset.stufe = h.stufe;

      /* Ein Hinweis trägt ZEICHEN UND FARBE der Kachel, zu der er führt.
         Dadurch gehört sichtbar zusammen, was zusammengehört: Wer die
         rote Zeile „2 Aufgaben sind überfällig" sieht, erkennt weiter
         unten dieselbe Farbe und dasselbe Zeichen auf der Kachel
         wieder -- und weiß, wohin er muss, bevor er den Text zu Ende
         gelesen hat. Beides kommt aus derselben Zuordnung wie die Zahl
         auf der Kachel, es gibt also keine zweite Liste. */
      const kachel = bereichZu(HINWEIS_ZU_KACHEL[h.art]);
      if (kachel && kachel.ton !== undefined && kachel.ton !== null) {
        li.dataset.ton = String(kachel.ton);
      }

      /* Jeder Hinweis führt irgendwohin -- ein Hinweis ohne Ziel ist
         nur ein schlechtes Gewissen. */
      const a = el('a', 'dran__link');
      a.href = h.ziel;

      const zeichen = el('span', 'dran__zeichen');
      /* JEDE ZEILE BEKOMMT EIN ZEICHEN (20.09.2026).
         ----------------------------------------------------------
         Hier stand `if (kachel) { … }` -- und seit gestern gibt es
         einen Hinweis, der zu KEINEM Bereich gehoert: "Bei dir
         klingelt nichts". Der hat absichtlich keine Kachel (die
         Anruf-Probe ist ein Werkzeug, kein Bereich), und damit fiel
         sein Zeichen weg.

         Die Zeile stand dann als einzige ohne Zeichen zwischen allen
         anderen -- der Text begann weiter links, und es sah aus, als
         fehle etwas. Genau der stille Fehler, der wie Absicht
         aussieht.

         Die Farbe bleibt aus (kein `data-ton`): Sie soll KEINEN
         Bereich behaupten, zu dem der Hinweis nicht gehoert. Das
         Zeichen dagegen ist neutral -- ein Geraet. Darum geht es. */
      zeichen.append(zeichenBauen(kachel ? kachel.zeichen : 'technik', 'dran__svg'));
      a.append(zeichen);

      /* Die Zahl steht vorn und getrennt vom Satz. Man liest sie zuerst,
         und beim Überfliegen von sieben Zeilen zählt genau das. */
      if (!OHNE_ZAHL.has(h.art)) a.append(el('span', 'dran__zahl', String(h.anzahl)));

      const satz = (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl);
      /* Die Zahl steht schon davor -- im Satz wäre sie doppelt. */
      a.append(el('span', 'dran__text', satz.replace(/^\d+\s+(×\s+)?/, '')));

      const pfeil = el('span', 'dran__pfeil', '→');
      pfeil.setAttribute('aria-hidden', 'true');
      a.append(pfeil);
      /* Vorleseprogramme bekommen den ganzen Satz, nicht die Bruchstücke. */
      a.setAttribute('aria-label', satz);
      li.append(a);
      liste.append(li);
    }
    /* Sieben Hinweise untereinander sind eine Wand -- und die
       wichtigsten stehen ohnehin oben (der Server sortiert nach Stufe).
       Sichtbar bleiben vier, der Rest ist einen Klick entfernt.
       Derselbe Helfer wie im Protokoll und im Verlauf. */
    window.klappe?.(liste, $('dran-schalter'), $('dran-schalter-text'));
    tagesblickPruefen();
  }

  /* ---------- Die rechte Hälfte: was heute ansteht ------------------------

     Wunsch 05.09.2026: *"rechts in der kachel die termine vom tag."*

     WARUM NEBEN DEN HINWEISEN: Links steht, was zu TUN ist, rechts,
     was schon FESTSTEHT. Zusammen beantworten sie die Frage, die man
     morgens hat -- und die man vorher nur durch Scrollen beantworten
     konnte.

     Die Daten kommen aus derselben Schnittstelle wie der Kalender, mit
     `tage=1`. Keine zweite Abfrage, keine zweite Sichtbarkeitsregel:
     Was jemand im Kalender nicht sehen darf, kommt hier gar nicht erst
     an. */

  let tagesterminGeladen = false;

  /** Entscheidet, ob die Kachel überhaupt etwas zu zeigen hat.
   *
   *  Läuft nach BEIDEN Hälften. Eine Kachel mit zwei leeren Seiten wäre
   *  ein Rahmen um nichts -- eine mit einer vollen Seite dagegen ist
   *  genau richtig, und welche das ist, steht vorher nicht fest. */
  function tagesblickPruefen() {
    /* ==== DER WEG ZUM KALENDER NUR FUER DIE, DIE IHN HABEN ==========

       Der Verweis „Kalender" steht fest im HTML des Tagesblicks. Fuer
       ein Mitglied der Community fuehrt er ins Leere -- es hat keine
       Kalenderkachel und die Seite steht ihm nicht offen. Der Klick
       landet wieder auf der Startseite: keine Meldung, kein Grund,
       nichts passiert.

       Gefunden von pruef-community-sicht, die genau danach sucht --
       und zwar schon VOR den Aenderungen dieses Tages. Aufgefallen ist
       es nur deshalb, weil dieselbe Pruefung heute noch einen zweiten
       toten Weg fand, den ich selbst gebaut hatte.

       ABGELEITET, NICHT ENTSCHIEDEN: Wer die Kachel hat, hat den Weg.
       Eine zweite Liste („diese Rollen duerfen den Kalender") waere
       die, die beim naechsten Umbau auseinanderlaeuft. */
    const kalenderWeg = document.querySelector('.tagesblick__mehr[href^="kalender"]');
    if (kalenderWeg && ich) {
      const hatKalender = [...(ich.bereiche || []), ...(ich.bereiche_zusatz || [])]
        .some((k) => String(k?.ziel || "").startsWith("kalender.html"));
      /* `ich.bereiche === null` heisst "nimm die Liste aus dem
         Browser" -- dann gilt die Agenturliste, und dort gibt es den
         Kalender. Nur bei einer ECHTEN Liste ohne Kalender wird der
         Weg entfernt. */
      if (Array.isArray(ich.bereiche) && !hatKalender) kalenderWeg.remove();
    }

    const etwasLinks = hinweise.length > 0;
    const etwasRechts = $('tagestermine').childElementCount > 0;
    /* Solange die Termine noch unterwegs sind, wird nicht versteckt --
       sonst blitzt die Kachel auf und verschwindet wieder. */
    const kachel = $('dran-block');
    if (!tagesterminGeladen) return;   /* der Platzhalter haelt die Hoehe */

    /* Jetzt steht beides fest: Der Platzhalter wird abgeraeumt, und die
       Kachel bleibt nur, wenn sie etwas zu zeigen hat. */
    delete kachel.dataset.laedt;
    kachel.hidden = !etwasLinks && !etwasRechts;

    /* DIE ERKLAERUNG GEHT MIT. Sie beschreibt genau diesen Kasten --
       steht er nicht da, erklaert sie etwas, das es nicht gibt, und
       man sucht danach. */
    const fuss = $('fuss-dran');
    if (fuss) fuss.hidden = kachel.hidden;
  }

  /** hh:mm aus einem Zeitstempel, ohne Zeitzonen-Rechnerei.
   *  Die Werte kommen als "2026-09-05T14:30" vom Server -- schon in
   *  Ortszeit. Ein `new Date()` darauf würde sie ein zweites Mal
   *  umrechnen und Termine um Stunden verschieben. */
  const uhrzeit = (beginn) => String(beginn || '').slice(11, 16);

  const ART_NAME = { call: 'Call', termin: 'Termin', review: 'Review', frist: 'Frist' };

  async function tagestermineLaden() {
    const liste = $('tagestermine');
    let termine = [];
    try {
      const heute = window.heuteLokal();
      const antwort = await fetch(
        `/workspace/api/termine?von=${heute}&tage=1`, { credentials: 'same-origin' });
      if (antwort.ok) {
        const daten = await antwort.json();
        /* `tage=1` liefert den Zeitraum bis morgen früh -- auf den
           heutigen Tag wird hier noch einmal genau geschnitten. */
        termine = (daten.termine || []).filter((t) => String(t.beginn).slice(0, 10) === heute);
      }
    } catch { /* die linke Hälfte steht trotzdem */ }

    liste.textContent = '';
    tagesterminGeladen = true;

    /* Auch der leere Fall wird GESETZT, nicht uebersprungen. Ein Feld,
       das bei null Terminen auf dem Strich stehen bleibt, sieht aus wie
       eine Abfrage, die haengt -- und man wartet auf eine Zahl, die nie
       kommt. "0" ist eine Auskunft, "–" ist keine. */
    if (!termine.length) {
      $('heute-leer').hidden = false;
      standSetzen('heute', '0');
      standSetzen('naechster', '–');
      tagesblickPruefen();
      return;
    }
    $('heute-leer').hidden = true;

    /* Was ist gerade dran? Der erste Termin, der noch nicht vorbei ist.
       Er wird hervorgehoben -- beim Überfliegen ist genau das die
       Auskunft, die man sucht, und nicht "der erste des Tages". */
    const jetzt = new Date();
    const jetztText = `${String(jetzt.getHours()).padStart(2, '0')}:`
      + `${String(jetzt.getMinutes()).padStart(2, '0')}`;
    const naechster = termine.find((t) => {
      const ende = new Date(Date.parse(t.beginn.replace(' ', 'T'))
        + (Number(t.dauer_min) || 30) * 60000);
      return !Number.isNaN(ende.getTime()) ? ende >= jetzt : uhrzeit(t.beginn) >= jetztText;
    });

    /* Die zwei Ablesungen fuer den Tag -- aus GENAU diesen Werten, die
       die Liste darunter ohnehin benutzt.

       "Als Naechstes" zeigt den Termin, der noch nicht vorbei ist. Ist
       keiner mehr uebrig, steht dort "fertig" und nicht die Uhrzeit des
       letzten: Ein vergangener Termin unter der Ueberschrift "Als
       Naechstes" ist schlimmer als gar keine Angabe. */
    standSetzen('heute', String(termine.length));
    standSetzen('naechster', naechster ? uhrzeit(naechster.beginn) : 'fertig');

    /* HÖCHSTENS FÜNF. Zwei Gründe, und beide zählen:

       Fachlich: Eine Kachel auf der Startseite beantwortet "was kommt
       als Nächstes", nicht "was war alles". Wer zwanzig Termine hat,
       will die nächsten sehen und dann in den Kalender -- eine Liste,
       die den halben Bildschirm füllt, nimmt den Blick auf alles
       darunter.

       Technisch: Ohne Grenze hängt die Höhe der Kachel an der Zahl der
       Termine, und der reservierte Platz kann nie passen. Der
       Layout-Sprung lag deshalb bei 0,93 -- alles unterhalb rutschte
       beim Laden nach unten. Mit einer Obergrenze ist die Höhe
       planbar.

       Warum DREI und nicht fuenf: Gemessen wurde die Kachelhoehe --
       ein Termin 169 px, drei 327 px, fuenf 486 px. Je weiter die
       Spanne, desto weniger kann der reservierte Platz passen, und
       desto staerker springt die Seite. Bei drei liegt die Spanne bei
       gut 150 Pixeln statt bei 320.

       Die weggelassenen werden GENANNT, nicht verschwiegen: Eine
       Liste, die stillschweigend abschneidet, liest sich wie der
       ganze Tag -- und man verpasst den Termin um sechs. */
    const ZEIGE_HOECHSTENS = 3;
    const gezeigt = termine.slice(0, ZEIGE_HOECHSTENS);
    const weitere = termine.length - gezeigt.length;

    for (const t of gezeigt) {
      const li = el('li', 'tagesliste__punkt');
      li.dataset.art = t.art || 'termin';

      const beginn = uhrzeit(t.beginn);
      if (t === naechster) li.dataset.naechster = 'ja';
      /* Vorbei heißt nicht weg: Man will sehen, was man heute schon
         hinter sich hat. Es tritt nur zurück. */
      else if (beginn < jetztText) li.dataset.vorbei = 'ja';

      /* ---- Links: Uhrzeit, Dauerbalken, Dauer ---- */
      const zeit = el('span', 'tagesliste__zeit');
      zeit.append(el('span', 'tagesliste__stunde', beginn));

      if (t.dauer_min) {
        /* DER BALKEN ZEIGT DIE LÄNGE. Bezugsgröße sind zwei Stunden --
           darüber ist er voll. Das ist keine Skala, sondern ein
           Verhältnis: Man soll auf einen Blick sehen, ob ein Termin
           kurz oder lang ist, ohne "30 min" zu lesen.

           Zwei Stunden als Vollausschlag, weil darüber im Alltag
           kaum etwas liegt; ein Ganztagestermin würde jeden anderen
           Balken sonst auf einen Strich zusammendrücken. */
        const anteil = Math.max(12, Math.min(100, (Number(t.dauer_min) / 120) * 100));
        const balken = el('span', 'tagesliste__balken');
        balken.style.setProperty('--laenge', `${Math.round(anteil)}%`);
        balken.setAttribute('aria-hidden', 'true');   // die Zahl daneben sagt es
        const laenge = el('span', 'tagesliste__laenge');
        laenge.append(balken, el('span', 'tagesliste__dauer', `${t.dauer_min} min`));
        zeit.append(laenge);
      }
      li.append(zeit);

      /* ---- Mitte: Titel und Beteiligte ---- */
      const text = el('div', 'tagesliste__text');
      text.append(el('p', 'tagesliste__titel', t.titel));

      const unten = [];
      if (t.teilnehmer_name) unten.push(t.teilnehmer_name);
      else if (t.creator_name) unten.push(t.creator_name);
      if (t.ort) unten.push(t.ort);
      if (unten.length) text.append(el('p', 'tagesliste__unter', unten.join(' · ')));
      li.append(text);

      /* ---- Rechts: Art und, beim nächsten, die Jetzt-Marke ---- */
      const rechts = el('div', 'tagesliste__rechts');
      rechts.append(el('span', 'tagesliste__art', ART_NAME[t.art] || t.art || ''));
      /* Steht im Markup immer, wird aber nur beim nächsten Termin
         eingeblendet (CSS). Ein Wort sagt hier mehr als ein hellerer
         Hintergrund -- und ein Vorleseprogramm bekommt es ebenfalls. */
      rechts.append(el('span', 'tagesliste__jetzt', 'Jetzt'));
      li.append(rechts);

      /* Der ganze Eintrag führt in den Kalender, auf den richtigen Tag.
         Ein Termin, den man nur anschauen kann, ist eine Sackgasse. */
      const link = el('a', 'tagesliste__link');
      link.href = `kalender.html?tag=${String(t.beginn).slice(0, 10)}`;
      link.setAttribute('aria-label',
        `${beginn} Uhr, ${t.titel}${unten.length ? ', ' + unten.join(', ') : ''}`);
      li.append(link);

      liste.append(li);
    }

    /* Was nicht mehr hineinpasste, wird gesagt -- mit dem Weg dorthin.
       Eine Liste, die stillschweigend abschneidet, liest sich wie der
       ganze Tag, und man verpasst den Termin um sechs. */
    if (weitere > 0) {
      const mehr = el('li', 'tagesliste__mehr');
      const a = el('a', 'tagesliste__mehr-link',
        `${weitere} weitere${weitere === 1 ? 'r Termin' : ' Termine'} heute →`);
      a.href = 'kalender.html';
      mehr.append(a);
      liste.append(mehr);
    }

    tagesblickPruefen();
  }

  /* Die Zahlen kommen aus derselben Quelle wie das Brett und sind bereits
     serverseitig auf die eigene Rolle eingegrenzt. */
  const ZAHLEN = [
    { schluessel: 'ueberfaellig', name: 'Überfällig', warn: true },
    { schluessel: 'heute',        name: 'Heute fällig' },
    { schluessel: 'offen',        name: 'Offen' },
    { schluessel: 'arbeit',       name: 'In Arbeit' },
    { schluessel: 'review',       name: 'Zur Freigabe' },
    { schluessel: 'erledigt',     name: 'Erledigt' },
    /* ABGEBROCHEN als eigene Zahl (08.09.2026, screen12). Sie steht
       hinten bei "Erledigt", weil beides dasselbe bedeutet: vom Tisch.
       Vorher tauchte sie nirgends auf und schlug sich stattdessen
       unsichtbar auf "Überfällig" und "Heute fällig" nieder -- eine
       Aufgabe, die niemand mehr anfasst, mahnte weiter. */
    { schluessel: 'abgebrochen',  name: 'Abgebrochen' },
  ];

  async function zahlenLaden() {
    let daten;
    try {
      const antwort = await fetch('/workspace/api/uebersicht', { credentials: 'same-origin' });
      if (!antwort.ok) return;
      daten = await antwort.json();
    } catch { return; }

    /* JEDE ROLLE SIEHT DIESELBEN KATEGORIEN (08.09.2026).

       Filipe: "diese beiden kategorien sollen bei jedem in jeder rolle
       gleich sein ... alles was kacheln ist und so soll gleich sein."

       Hier stand: Ist die Summe null, wird die ganze Reihe GELÖSCHT und
       durch einen Satz ersetzt -- mit der Begründung "sechs Nullen
       nebeneinander sind kein Bericht, sondern Rauschen". Der Gedanke
       war nicht falsch, die Folge aber schon: Nachgemessen über alle
       fünf Rollen sah Spicy Media als EINZIGE keine Zahlenreihe,
       sondern einen Satz -- die anderen vier sahen sieben Kategorien.
       Wer zwischen zwei Rollen wechselt, findet die Seite dann anders
       aufgebaut vor und sucht, was fehlt.

       Jetzt steht die Reihe IMMER, mit denselben sieben Kategorien für
       alle. Ist wirklich nichts offen, wird sie GEDÄMPFT (siehe
       `[data-leer]` in start.css) und der Satz steht ZUSÄTZLICH
       darunter statt an ihrer Stelle. Damit bleibt die Aussage "es ist
       gerade nichts zu tun" erhalten, ohne dass die Seite ihre Form
       ändert -- gedämpft ist auch eine Antwort, nur eben eine leise. */
    /* ---- WER KEINE AUFGABEN HAT, BEKOMMT KEINE ZAHLEN (18.09.2026)

       Ein Mitglied der Community sah hier „Deine Aufgaben" mit sieben
       Zaehlern: Ueberfaellig, Heute faellig, Offen, In Arbeit, Zur
       Freigabe,
       Erledigt, Abgebrochen -- alle null. Darunter „Nichts offen.
       Alles abgearbeitet – goenn dir was."

       Das ist die Sprache eines Arbeitsplatzes, und ein Zuschauer hat
       hier keinen. Schlimmer: Jede der sieben Zahlen ist ein LINK auf
       aufgaben.html. Gemessen mit Gast-Augen -- ein Klick landet
       wieder auf start.html. Sieben tote Knoepfe, und der Code
       daneben sagt selbst: „Ein toter Knopf ist keine Antwort."

       WORAN ERKANNT: nicht an der Rolle. Rollennamen der Community
       gehoeren nicht in eine Datei, die jeder herunterladen kann
       (darueber wacht pruef-modi-wortleck, und ROLLENTEXT oben laesst
       sie aus demselben Grund aus). Entschieden wird deshalb an der
       Frage, die ohnehin schon beantwortet ist: Hat diese Person die
       Aufgaben-Kachel? Der Server schickt nur, was jemand sehen darf.
       Keine zweite Wahrheit, kein Rollenname, und es bleibt richtig,
       wenn sich die Rechte aendern. */
    const summe = ZAHLEN.reduce((n, z) => n + (daten[z.schluessel] ?? 0), 0);
    const block = $('zahlen-block');
    if (!hatArbeitsplatz()) { block.hidden = true; return; }
    block.hidden = false;
    if (!summe) block.dataset.leer = 'ja';
    else block.removeAttribute('data-leer');
    $('zahlen-leer').hidden = !!summe;

    /* JEDE ZAHL FUEHRT ZU IHREN AUFGABEN (09.09.2026, screen1).

       Filipe: "wenn ich auf die druecke soll ich auf zu denen punkten
       gebracht werden."

       Der Weg dahin gab es schon: `aufgaben.html?zeigen=<schluessel>`
       springt zu den passenden Karten und legt eine Zeile darueber,
       was gerade gezeigt wird (kopf.js, `zielMarkieren`). Nur waren
       diese sieben Karten `<li>` ohne Link -- die Auskunft war da, der
       Weg dorthin nicht. Zwei fehlende Schluessel ("heute",
       "abgebrochen") sind in aufgaben.js nachgetragen.

       EIN <a> IM <li>, NICHT DAS <li> KLICKBAR. Ein Listenpunkt mit
       einem Klick-Zuhoerer ist fuer Tastatur und Vorleseprogramm kein
       Ziel -- man kann ihn nicht anspringen und bekommt nicht gesagt,
       dass er irgendwohin fuehrt. Ein echter Link kann das alles, ohne
       eine Zeile JavaScript.

       DIE NULL BLEIBT EIN LINK. Es waere naheliegend, sie abzuschalten
       ("da ist ja nichts"). Aber der Sprung zeigt dann genau das --
       eine leere Spalte mit der Zeile "Aufgaben, die offen sind". Das
       ist eine Antwort. Ein toter Knopf ist keine.

       Der volle Satz steht im `aria-label`: Vorgelesen wird "3 Aufgaben
       sind überfällig — ansehen" und nicht "3 Überfällig". */
    const liste = $('zahlen');
    liste.textContent = '';
    for (const z of ZAHLEN) {
      const wert = daten[z.schluessel] ?? 0;
      const li = el('li', 'zahl');
      if (z.warn && wert > 0) li.dataset.warn = 'ja';
      const a = el('a', 'zahl__link');
      a.href = `aufgaben.html?zeigen=${encodeURIComponent(z.schluessel)}`;
      a.setAttribute('aria-label',
        `${wert} ${wert === 1 ? 'Aufgabe' : 'Aufgaben'}: ${z.name} — ansehen`);
      a.append(el('span', 'zahl__wert', String(wert)));
      a.append(el('span', 'zahl__name', z.name));
      li.append(a);
      liste.append(li);
    }
  }

  laden();
})();