dogfather-universe/workspace/assets/js/befinden.js

/* =====================================================================
   Wie geht's dir? (15.09.2026)

   Eine Seite, ein Zweck. Vorher führte die Kachel auf die
   Entwicklungsseite — also auf Namen und Beobachtungen über andere
   Menschen, während auf der Kachel „die Antworten sieht nur du" stand.

   ---------------------------------------------------------------------
   DREI DINGE, DIE DIESE SEITE ANDERS MACHT ALS EIN FRAGEBOGEN

   1. SIE SPEICHERT SOFORT. Kein „Absenden", das man vergessen kann.
      Jeder Klick steht. Der Knopf am Ende schließt nur die RUNDE ab —
      er trägt den Stand in den Verlauf ein.

   2. SIE FRAGT WIEDER. Nach vierzehn Tagen. Ein Befinden von vor drei
      Monaten ist keine Auskunft mehr, sondern ein Andenken.

   3. SIE ZEIGT DEN VERLAUF. Das Warnzeichen ist nicht ein einzelnes
      „da hakt es" — das ist ein schlechter Tag. Es ist dieselbe Antwort
      über mehrere Runden. Sehen kann das nur die Person selbst.
   ===================================================================== */
(() => {
  const $ = (id) => document.getElementById(id);
  const el = (t, k, text) => {
    const n = document.createElement(t);
    if (k) n.className = k;
    if (text !== undefined) n.textContent = text;
    return n;
  };
  const melde = (t) => { const f = $('fehler'); if (f) { f.textContent = t; f.hidden = !t; } };

  /* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
     Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
     die Regel darin sich als falsch herausstellte (jeder 404
     warf auf die Startseite, auch bei einer blossen Handlung),
     haette man sie achtmal aendern muessen. */
  const hole = (pfad, optionen) => window.holen(pfad, optionen);

  let stufen = [];
  let daten = null;

  /* ---- Die vier Knöpfe zu einer Frage --------------------------------- */
  function knopfsatz(gewaehlt, beiKlick) {
    const reihe = el('div', 'e-wahl');
    for (const s of stufen) {
      const b = el('button', 'e-wahl__knopf');
      b.type = 'button';
      b.dataset.stufe = s.schluessel;
      b.setAttribute('aria-pressed', String(gewaehlt === s.schluessel));
      b.append(el('span', 'e-wahl__zeichen', s.zeichen));
      /* ZWEI BESCHRIFTUNGEN, EINE WAHRHEIT (22.09.2026).
         Die lange steht am Rechner, die kurze am Handy -- welche zu
         sehen ist, entscheidet CSS nach Platz, nicht dieses Skript.
         Der VOLLE Name geht ausserdem ins `aria-label`: Ein
         Vorleseprogramm soll "Kann ich nicht sagen" hoeren, auch wenn
         auf dem Knopf "Unklar" steht. */
      b.setAttribute('aria-label', s.name);
      b.append(el('span', 'e-wahl__lang', s.name));
      /* IMMER BEIDE, auch wenn sie gleich lauten (berichtigt 22.09.2026).
         Erster Anlauf sparte die Kurzform, wenn sie dem Namen gleicht
         -- bei "Laeuft" ist das so. Am Handy ist die lange Fassung aber
         ausgeblendet, und der Knopf zeigte dann nur noch das Haekchen.
         Gesehen hat das kein gruener Haken, sondern das Bildschirmfoto. */
      b.append(el('span', 'e-wahl__kurz', s.kurz || s.name));
      b.addEventListener('click', () => beiKlick(s.schluessel, b));
      reihe.append(b);
    }
    return reihe;
  }

  /* ---- Der Rhythmus --------------------------------------------------- */
  function takt() {
    const r = daten.rhythmus;
    const kasten = $('takt');
    const satz = $('takt-satz');
    const knopf = $('takt-knopf');
    kasten.hidden = false;

    /* ==== OFFEN HEISST: NOCH NICHT IN DIESER RUNDE BEANTWORTET =======

       Hier stand `!p.meins` -- also "es gibt ueberhaupt keine Antwort".
       Nach der ersten Runde ist das nie wieder der Fall: Die Antworten
       bleiben stehen. Damit war ab der zweiten Runde sofort alles
       "fertig", der Knopf stand da, und man konnte eine Runde
       abschliessen, ohne eine einzige Frage angesehen zu haben.

       `frisch` sagt, ob die Antwort NACH der letzten Runde gesetzt
       wurde. Vor der ersten Runde ist alles frisch. */
    const offen = daten.punkte.filter((p) => !p.frisch).length;
    const alle = daten.punkte.length;
    const gesamt = daten.fragen_gesamt || alle;

    /* WARUM NUR ACHT VON ZWOELF. Ohne diesen Satz sieht eine kurze
       Runde aus wie ein Katalog, aus dem etwas verschwunden ist. */
    const kurz = gesamt > alle
      ? ` Diese Runde sind ${alle} von ${gesamt} Fragen dran – `
        + `${daten.kern_anzahl} feste und ${daten.zusatz_anzahl} wechselnde. `
        + 'So bleibt jede Runde kurz, und über die Monate kommt trotzdem alles dran.'
      : '';

    if (!r.letzte) {
      satz.textContent = (offen
        ? `Noch ${offen} von ${alle} Fragen offen. Wenn du durch bist, halte den Stand fest – `
          + `dann siehst du beim nächsten Mal, was sich verändert hat.`
        /* GEZÄHLT STATT GESCHRIEBEN (17.09.2026): Der Block ist von sechs
           auf zwölf Fragen gewachsen, und dieser Satz stand danach falsch
           da. `alle` ist dieselbe Zahl, die eine Zeile höher schon steht. */
        : `Alle ${alle} beantwortet. Halte den Stand fest, dann hast du beim nächsten Mal `
          + `einen Vergleich.`) + kurz;
      kasten.dataset.lage = offen ? 'offen' : 'bereit';
    } else if (r.faellig) {
      satz.textContent = `Deine letzte Runde ist ${r.tage} Tage her. `
        + (offen
          ? `Noch ${offen} von ${alle} Fragen offen – was dasteht, ist die Antwort `
            + 'vom letzten Mal und zählt erst, wenn du sie bestätigst.'
          : `Alle ${alle} sind beantwortet. Halte den Stand fest.`)
        + kurz;
      kasten.dataset.lage = 'faellig';
    } else {
      const rest = daten.rhythmus_tage - r.tage;
      /* „Vor 0 Tagen" ist keine Zeitangabe, sondern eine Rechnung, die
         man laut vorliest. Drei Faelle, drei Saetze -- derselbe Grund,
         aus dem die Ampel nebenan drei hat. */
      const wann = r.tage === 0 ? 'Heute festgehalten.'
        : r.tage === 1 ? 'Gestern festgehalten.'
          : `Zuletzt vor ${r.tage} Tagen festgehalten.`;
      satz.textContent = `${wann} `
        + (rest <= 1 ? 'Morgen fragt die Seite wieder – '
          : `In ${rest} Tagen fragt die Seite wieder – `)
        + `du kannst aber jederzeit etwas ändern.`
        /* AUCH HIER. Der Hinweis stand erst nur in den beiden anderen
           Faellen -- ausgerechnet nicht in dem, den man am haeufigsten
           sieht. Wer dann acht Fragen zaehlt, wo zwoelf im Katalog
           stehen, haelt vier fuer verschwunden. */
        + kurz;
      kasten.dataset.lage = 'ruhig';
    }

    /* DER KNOPF ERSCHEINT NUR, WENN ER ETWAS TUN KANN. Ein Knopf, der
       "erst alle sechs beantworten" sagt, ist eine Absage mit
       Umweg -- der Satz darüber sagt es schon. */
    knopf.hidden = offen > 0;
  }

  /* ---- Die sechs Fragen ------------------------------------------------ */
  function fragen() {
    const ziel = $('fragen');
    ziel.textContent = '';
    ziel.setAttribute('aria-busy', 'false');

    /* =====================================================================
       NACH FELDERN GEGLIEDERT (20.09.2026)

       Filipe: „bei der frage wie geht es dir will ich viel mehr fragen
       aber kategorisiert und so. psychologisch hochprofessionell."

       Acht Fragen in einer Reihe sind ein Fragebogen; acht Fragen in
       sechs Feldern sind ein Gespräch mit Themen. Die Überschrift ist
       dabei nicht Schmuck, sondern Teil der Frage: „Ich kann nein
       sagen" heißt unter „Klarheit & Rückhalt" etwas anderes als unter
       „Miteinander" — sie beantwortet die Rückfrage, bevor sie
       entsteht.

       DIE REIHENFOLGE KOMMT VOM SERVER, nicht aus einer Liste hier.
       Sie geht von außen nach innen: „Wie viel ist es" lässt sich
       leicht beantworten, „bleibe ich" ist die schwerste Frage der
       Liste und steht zuletzt.

       EIN FELD OHNE FRAGEN WIRD NICHT GEZEICHNET. Eine leere
       Überschrift sieht aus, als wäre etwas verlorengegangen — und der
       Server sorgt ohnehin dafür, dass in jeder Runde jedes Feld
       vorkommt. */
    const felder = Array.isArray(daten.felder) ? daten.felder : [];
    /* ABGELEITET STATT ANGENOMMEN: Fragen ohne bekanntes Feld (eine
       neue, die noch keins hat) landen in einer eigenen Gruppe am
       Ende, statt zu verschwinden. Ein Eintrag, den man angelegt hat
       und nirgends wiederfindet, ist der schlimmere Fehler. */
    const gruppen = felder.map((f) => ({
      feld: f,
      punkte: daten.punkte.filter((pt) => pt.feld === f.schluessel),
    })).filter((g) => g.punkte.length);
    const bekannt = new Set(felder.map((f) => f.schluessel));
    const uebrig = daten.punkte.filter((pt) => !bekannt.has(pt.feld));
    if (uebrig.length) gruppen.push({ feld: null, punkte: uebrig });

    /* =================================================================
       EINE FLAECHE, GRUPPEN DARIN (23.09.2026)
       =================================================================

       Filipe: „ich will dass diese seite viel übersichtlicher
       aussieht, es soll eine riesßen kachel sein wo alles viel besser
       und geiler aussieht."

       VORHER lagen Gruppenkoepfe und Fragen FLACH nebeneinander in
       derselben Spalte -- jede Frage eine eigene Kachel mit eigenem
       Rand, dazwischen ab und zu eine Ueberschrift. Im zweispaltigen
       Raster rutschte der Kopf einer Gruppe dadurch neben die Fragen
       einer anderen; auf seinem Bildschirmfoto steht „Miteinander"
       links unten neben den Fragen von „Klarheit & Rückhalt".

       Das ist nicht nur unschoen, es ist FALSCH: Eine Ueberschrift,
       die neben fremdem Inhalt steht, ordnet den falschen zu.

       Jetzt gehoert jede Gruppe zusammen: ein `<section>` mit ihrem
       Kopf und ihren Fragen darin, und das Ganze liegt in EINER
       Flaeche (b-flaeche in befinden.html). Getrennt wird durch eine
       Linie, nicht durch eine Luecke -- dieselbe Entscheidung wie bei
       den Regeln am 22.09.

       DIE GRUPPE TRAEGT IHRE NUMMER als CSS-Variable. Daraus faerbt
       die Stilvorlage den Balken vor der Ueberschrift; eine Farbe je
       Gruppe im Skript waere eine zweite Farbliste. */
    let nr = 0;
    for (const g of gruppen) {
      const abschnitt = el('section', 'b-gruppe');
      abschnitt.style.setProperty('--gruppe-nr', String(nr++));
      if (g.feld) {
        const kopf = el('div', 'e-feld');
        const wort = el('h3', 'e-feld__wort');
        if (g.feld.zeichen) {
          const zch = el('span', 'e-feld__zeichen', g.feld.zeichen);
          zch.setAttribute('aria-hidden', 'true');
          wort.append(zch);
        }
        wort.append(document.createTextNode(g.feld.name));
        kopf.append(wort);
        if (g.feld.text) kopf.append(el('p', 'e-feld__text', g.feld.text));
        abschnitt.append(kopf);
      }
      const raster = el('div', 'b-gruppe__fragen');
      for (const pt of g.punkte) zeichneFrage(pt, raster);
      abschnitt.append(raster);
      ziel.append(abschnitt);
    }
    fortschrittZeigen();
  }

  /* =====================================================================
     WIE WEIT BIN ICH? (23.09.2026)

     „viel übersichtlicher" heisst bei einer Seite, auf der man etwas
     AUSFUELLT, vor allem eines: zu wissen, wie viel noch kommt. Der
     Kasten oben sagt „9 von 18 Fragen dran" -- das ist die Runde,
     nicht der eigene Stand.

     Gezaehlt werden die Fragen, die WIRKLICH auf dem Bildschirm
     stehen, und davon die mit einer Antwort aus dieser Runde. Eine
     Zahl aus den Daten waere eine zweite Rechnung neben dem, was man
     sieht -- und zwei Rechnungen ueber dasselbe gehen irgendwann
     auseinander.

     `aria-live` steht im HTML: Wer nicht hinsieht, bekommt den neuen
     Stand vorgelesen, sobald er eine Frage beantwortet. */
  function fortschrittZeigen() {
    const band = $('b-stand');
    if (!band) return;
    const fragen = [...document.querySelectorAll('#fragen .e-punkt')];
    const fertig = fragen.filter((f) => f.dataset.stufe).length;
    const gesamt = fragen.length;
    if (!gesamt) { band.hidden = true; return; }
    band.hidden = false;
    const balken = $('b-stand-balken');
    if (balken) balken.style.width = `${Math.round((fertig / gesamt) * 100)}%`;
    const wort = $('b-stand-wort');
    if (wort) {
      wort.textContent = fertig === gesamt
        ? `Alle ${gesamt} Fragen dieser Runde beantwortet.`
        : `${fertig} von ${gesamt} Fragen dieser Runde beantwortet.`;
    }
    band.dataset.fertig = fertig === gesamt ? 'ja' : 'nein';
  }

  /** Eine einzelne Frage. Ausgelagert, damit die Gliederung oben
   *  lesbar bleibt -- der Inhalt ist unverändert. */
  function zeichneFrage(pt, ziel) {
    {
      const z = el('article', 'e-punkt e-punkt--meins');
      if (pt.meins) z.dataset.stufe = pt.meins.stufe;
      /* ALT, ABER SICHTBAR. Die Antwort vom letzten Mal stehen zu
         lassen ist richtig -- sie ist ja nicht falsch, nur alt, und
         meistens klickt man dasselbe wieder. Sie zu VERSCHWEIGEN waere
         falsch: Dann sieht eine unbeantwortete Frage genauso aus wie
         eine beantwortete. */
      /* NUR WENN WIRKLICH EINE RUNDE ANSTEHT.

         `frisch` ist "nach der letzten Runde gesetzt" -- und direkt
         NACH einer abgeschlossenen Runde ist das bei keiner Antwort
         der Fall: Man hat sie ja Sekunden vorher gesetzt, also VOR dem
         Abschluss. Ohne diese Bedingung stuende an jeder Frage "das
         war beim letzten Mal", unmittelbar nachdem man sie beantwortet
         hat. Das waere wahr und trotzdem irrefuehrend. */
      const braucht = daten.rhythmus?.faellig === true;
      if (braucht && pt.meins && !pt.frisch) z.dataset.alt = 'ja';
      z.append(el('h3', 'e-punkt__titel', pt.titel));
      /* Die fuenf festen tragen es offen. Wer sieht, dass eine Frage
         jedes Mal kommt, liest sie anders -- und merkt selbst, wenn
         sich die Antwort darauf bewegt. */
      if (pt.kern) z.append(el('span', 'e-punkt__marke', 'jede Runde'));
      z.append(el('p', 'e-punkt__text', pt.text));
      if (braucht && pt.meins && !pt.frisch) {
        z.append(el('p', 'e-punkt__alt',
          'Das war deine Antwort beim letzten Mal. Tipp sie an, wenn sie noch stimmt.'));
      }
      z.append(knopfsatz(pt.meins?.stufe || null, async (stufe, knopf) => {
        for (const b of knopf.parentElement.querySelectorAll('.e-wahl__knopf')) {
          b.setAttribute('aria-pressed', String(b === knopf));
        }
        z.dataset.stufe = stufe;
        /* DER STAND OBEN ZIEHT SOFORT MIT. Wer eine Frage beantwortet
           und die Zahl erst beim naechsten Laden steigen sieht, haelt
           sie fuer kaputt. */
        fortschrittZeigen();
        const s = await hole(`/workspace/api/entwicklung/mich/${pt.schluessel}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ stufe }),
        });
        if (!s.ok) { melde('Ging nicht.'); return; }
        melde('');
        /* Den Stand im Kopf mitführen, statt die ganze Seite neu zu
           holen: Ein Neuaufbau nach jedem Klick würde die Seite unter
           den Fingern springen lassen. */
        pt.meins = { ...(pt.meins || {}), stufe };
        /* Angetippt heisst frisch -- ab jetzt zaehlt sie fuer diese
           Runde. Der Hinweis darueber verschwindet damit auch. */
        pt.frisch = true;
        delete z.dataset.alt;
        z.querySelector('.e-punkt__alt')?.remove();
        takt();
      }));
      ziel.append(z);
    }
  }

  /* =====================================================================
     DIE EINE ZUSAMMENFASSUNG (20.09.2026)

     Filipe: „am ende von allen fragen will ich eine gesamte
     zusammenfassung, nicht bei jeder frage oder kategorie eine, sondern
     EINE gesamte am ende. eine motivierende zusammenfassung für die
     person."

     GERECHNET HAT SIE DER SERVER — hier wird nur gezeichnet. Dieselbe
     Regel wie bei der Analyse darunter, und aus demselben Grund: Diese
     Antworten dürfen das Haus nicht verlassen, und eine Auswertung im
     Browser hieße, sie dorthin zu schicken, wo man sie abgreifen kann.

     WARUM KEIN SPRACHMODELL: steht in workspace-befinden-resuemee.js.
     Kurz: Gesundheitsdaten, ein Modell erfindet, ein fremder Dienst
     fällt aus.

     DIE REIHENFOLGE DER VIER TEILE IST DIE AUSSAGE:
       1. der Kopfsatz — die Lage in einem Satz
       2. was trägt — benannt, nicht als Zahl
       3. höchstens EINE Sache zum Hinschauen
       4. ein Schluss, der zur Lage passt

     Erst das Tragende, dann das Thema. Umgekehrt wäre es eine
     Mängelliste mit Trostpflaster — und so etwas beantwortet man beim
     nächsten Mal nicht mehr ehrlich.
     ===================================================================== */
  function fazit() {
    const block = $('fazit-block');
    if (!block) return;
    const f = daten.resuemee;
    /* KEINE ANTWORTEN, KEIN FAZIT. Ein freundlicher Satz über nichts
       wäre schlimmer als gar keiner -- er behauptet, es sei schon
       etwas gesagt worden. */
    if (!f || !f.moeglich) { block.hidden = true; return; }
    block.hidden = false;

    /* WORAUF SIE SICH BEZIEHT. „Was das zusammen heißt" über eine
       Runde von vorgestern ist etwas anderes als über die, die man
       gerade ausfüllt -- und wer das nicht weiß, bezieht den Satz auf
       den falschen Tag. */
    const schild = block.querySelector('.e-abschnitt');
    if (schild) {
      schild.textContent = daten.resuemee_stand === 'letzte'
        ? 'Was deine letzte Runde zusammen heißt'
        : 'Was das zusammen heißt';
    }

    $('fazit-kopf').textContent = f.kopf || '';

    const tBlock = $('fazit-traegt'), tListe = $('fazit-traegt-liste');
    tListe.textContent = '';
    if (f.traegt?.length) {
      tBlock.hidden = false;
      for (const t of f.traegt) tListe.append(el('li', 'b-fazit__punkt', t.titel));
    } else tBlock.hidden = true;

    const th = $('fazit-thema');
    if (f.thema?.satz) {
      th.hidden = false;
      th.textContent = f.thema.satz;
      /* Welche Fragen es sind, gehört dazu -- „Klarheit & Rückhalt"
         allein ist eine Überschrift, keine Auskunft. */
      if (f.thema.titel?.length) {
        th.append(document.createElement('br'));
        const w = el('span', 'b-fazit__themafragen', f.thema.titel.join(' · '));
        th.append(w);
      }
    } else th.hidden = true;

    /* DEIN NAECHSTER SCHRITT (22.09.2026).
       Genau einer, nicht neun. Die Einordnung aus der Forschung steht
       daneben -- sie ist der Grund, warum es dieser ist, und ohne sie
       waere es ein Ratschlag statt einer Auskunft. */
    const sBlock = $('fazit-schritt');
    if (f.schritt) {
      sBlock.hidden = false;
      /* DER FRAGETITEL IST EINE AUSSAGE, KEINE SACHE.
         "Wenn du eine Sache angehst, dann die: Die Menge passt
         gerade" liest sich schief -- die Titel im Katalog sind
         Saetze ("Die Menge passt gerade"), keine Substantive. In
         Anfuehrungszeichen gesetzt liest es sich richtig, und man
         sieht sofort, dass es der Wortlaut der Frage ist. */
      $('fazit-schritt-titel').textContent = f.schritt.haengt
        ? 'Fang hier an: „' + f.schritt.titel + '“'
        : 'Hier ist gerade Bewegung drin: „' + f.schritt.titel + '“';
      $('fazit-schritt-was').textContent = f.schritt.was;
      const w = $('fazit-schritt-welt');
      if (f.schritt.welt) { w.hidden = false; w.textContent = f.schritt.welt; }
      else { w.hidden = true; w.textContent = ''; }
    } else {
      sBlock.hidden = true;
    }

    /* WAS DAS TEAM DAVON HAT. Vier Lagen, vier Saetze -- und in der
       schwersten ist es eine Entlastung, keine Aufforderung. */
    const tm = $('fazit-team');
    if (f.team) { tm.hidden = false; tm.textContent = f.team; }
    else { tm.hidden = true; }

    $('fazit-schluss').textContent = f.schluss || '';

    /* DIE ZAHLEN GANZ UNTEN UND LEISE. Sie sind die Belegstelle für
       alles darüber -- wer sie nicht will, überliest sie; wer prüfen
       will, ob der Satz stimmt, findet sie. */
    const z = f.zahlen || {};
    const teile = [];
    if (z.traegt) teile.push(`${z.traegt}× läuft`);
    if (z.waechst) teile.push(`${z.waechst}× wächst`);
    if (z.hakt) teile.push(`${z.hakt}× hakt`);
    if (z.unklar) teile.push(`${z.unklar}× ohne Antwort`);
    /* WOHER DAS KOMMT, GEHOERT DAZU (uebernommen aus dem alten
       Analyse-Block, 15.09.2026). Ein Satz ueber "die Forschung" ohne
       Quelle ist eine Behauptung -- und bei diesem Thema waere das der
       Moment, an dem man der ganzen Seite nicht mehr glaubt.
       Er steht jetzt EINMAL unten, nicht unter jeder Frage. */
    const q = $('fazit-quelle');
    if (q) {
      if (f.schritt && f.schritt.welt) {
        q.hidden = false;
        q.textContent = '';
        q.append(document.createTextNode('Eingeordnet nach Untersuchungen zur '
          + 'Moderationsarbeit: '));
        const quellen = [
          ['University of Michigan',
            'https://news.umich.edu/online-content-moderators-likely-to-experience-burnout-u-m-study-suggests/'],
          ['Discord über Moderator-Burnout',
            'https://discord.com/safety/understanding-and-avoiding-moderator-burnout'],
          /* DIE TIKTOK-QUELLE GEHOERT DAZU. Filipe ausdruecklich:
             "eine professionelle auch mit infos und so aus aller welt
             was tiktok angeht." Sie stand im alten Analyse-Block und
             waere beim Umbau beinahe verlorengegangen -- die Pruefung
             hat es gemeldet. */
          ['TikTok-Moderation weltweit',
            'https://restofworld.org/2025/tiktok-moderators-turkey/'],
        ];
        quellen.forEach((qu, i) => {
          if (i) q.append(document.createTextNode(' · '));
          const a = el('a', 'b-fazit__quelle-link b-fazit__quelle-hin', qu[0]);
          a.href = qu[1];
          a.target = '_blank';
          a.rel = 'noopener noreferrer';
          q.append(a);
        });
      } else {
        q.hidden = true;
      }
    }

    $('fazit-zahlen').textContent = teile.length
      ? `${z.gefragt} Fragen aus ${z.felder} Feldern: ${teile.join(' · ')}.`
      : '';
  }

  /* ---- Der Verlauf ----------------------------------------------------- */
  function verlauf() {
    const block = $('verlauf-block');
    const v = daten.verlauf || [];
    if (v.length < 2) {
      /* MIT EINER EINZIGEN RUNDE GIBT ES KEINEN VERLAUF. Eine Spalte
         allein sähe aus wie ein Muster und wäre keins. */
      block.hidden = true;
      return;
    }
    block.hidden = false;
    $('verlauf-satz').textContent =
      `Deine letzten ${v.length} Stände. Was zählt, ist nicht ein einzelnes Kreuz – `
      + `sondern dieselbe Antwort mehrmals hintereinander. `
      + 'Leere Felder heißen nicht „keine Antwort“, sondern „diese Frage war '
      + 'in der Runde nicht dran“.';

    const ziel = $('verlauf');
    ziel.textContent = '';

    /* Älteste links: Ein Verlauf liest sich von links nach rechts. */
    const runden = [...v].reverse();
    const kopf = el('div', 'b-verlauf__zeile b-verlauf__zeile--kopf');
    kopf.append(el('span', 'b-verlauf__frage', ''));
    for (const r of runden) {
      const d = new Date(r.runde);
      kopf.append(el('span', 'b-verlauf__datum',
        d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })));
    }
    ziel.append(kopf);

    const name = {};
    for (const s of stufen) name[s.schluessel] = s;

    /* ==== DER VERLAUF ZEIGT JEDE FRAGE MIT GESCHICHTE ===============

       Hier stand `daten.punkte` -- also die Fragen DIESER Runde. Seit
       die Zusatzfragen wechseln (19.09.2026), waere das die falsche
       Liste: Eine Frage, die vor vier Wochen beantwortet wurde und
       diesmal pausiert, verschwaende aus dem Verlauf. Ihre Antwort
       hoert aber nicht auf zu gelten, weil sie gerade nicht dran ist --
       und eine verschwundene Zeile sieht aus, als haette es sie nie
       gegeben.

       Gezeigt wird deshalb, wozu es UEBERHAUPT Antworten gibt, in der
       Reihenfolge des Katalogs. */
    const mitGeschichte = new Set();
    for (const r of v) for (const k of Object.keys(r.antworten)) mitGeschichte.add(k);
    const zeilen = (daten.katalog || daten.punkte)
      .filter((pt) => mitGeschichte.has(pt.schluessel));

    for (const pt of zeilen) {
      const zeile = el('div', 'b-verlauf__zeile');
      zeile.append(el('span', 'b-verlauf__frage', pt.titel));
      for (const r of runden) {
        const stufe = r.antworten[pt.schluessel] || null;
        const p = el('span', 'b-verlauf__punkt', stufe ? name[stufe]?.zeichen || '·' : '·');
        p.dataset.stufe = stufe || 'leer';
        /* DAS ZEICHEN ALLEIN IST NICHT DIE AUSKUNFT -- der Name steht
           im Titel, damit auch ein Vorleseprogramm ihn ansagt. */
        p.title = stufe ? `${pt.titel}: ${name[stufe]?.name || stufe}` : 'keine Antwort';
        p.setAttribute('aria-label', p.title);
        zeile.append(p);
      }
      ziel.append(zeile);
    }
  }

  /* analyse() GAB ES BIS ZUM 22.09.2026.

     Sie baute eine Zeile je Frage: Titel, Marke, Einordnung aus der
     Forschung, "Was hilft". Bei neun Fragen neun Kaesten
     untereinander.

     Filipe: "das resume unten auf jeder frage hab ich auch schon
     mehrmals gesagt muss weg ich will ein ganzes gesamtresume."

     Nichts davon ist verloren -- die staerkste Erkenntnis steht
     jetzt oben im Fazit als "Dein naechster Schritt", mit derselben
     Einordnung, aber einmal statt neunmal. Gerechnet wird sie im
     Server (workspace-befinden-resuemee.js), wo auch der Rest des
     Gesamtresuemees entsteht -- eine Stelle, nicht zwei. */

  /* ---- Runde abschließen ----------------------------------------------- */
  $('takt-knopf')?.addEventListener('click', async (e) => {
    const k = e.currentTarget;
    k.disabled = true;
    try {
      const a = await hole('/workspace/api/befinden/runde',
        { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
      const j = await a.json().catch(() => ({}));
      if (!a.ok) {
        melde(j.fehler === 'unvollstaendig'
          ? `Es fehlen noch ${j.offen} von ${j.gesamt} Fragen.`
          : 'Ging nicht.');
        return;
      }
      melde('Festgehalten. Beim nächsten Mal siehst du, was sich verändert hat.');
      await laden();
    } finally { k.disabled = false; }
  });

  async function laden() {
    const a = await hole('/workspace/api/befinden');
    if (!a.ok) { melde('Ging nicht.'); return; }
    daten = await a.json();
    stufen = daten.stufen || [];
    takt();
    fragen();
    fazit();
    verlauf();

  }

  (async () => {
    try {
      const a = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
      if (a.ok) window.werZeigen?.(await a.json());
    } catch { /* der Kopf holt es sonst selbst */ }
    /* NICHT MEHR STUMM (20.09.2026). Hier stand `catch { /* umgeleitet *\/ }`
       -- und wenn `laden()` an einem Netzaussetzer scheiterte, blieb die
       Seite auf „wird geladen …" stehen. Umgeleitet wird nur bei 401;
       alles andere ist ein Ladefehler und gehoert gesagt. */
    try { await laden(); } catch { window.ladefehler?.({ nochmal: laden }); }
  })();
})();