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; } };

  async function hole(pfad, optionen = {}) {
    const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
    if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); }
    return a;
  }

  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 });

    for (const g of gruppen) {
      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));
        ziel.append(kopf);
      }
      for (const pt of g.punkte) zeichneFrage(pt, ziel);
    }
  }

  /** 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;
        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;

    $('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`);
    $('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);
    }
  }

  /* ---- Was dein Verlauf sagt --------------------------------------------

     Filipe: „mach mir auch eine analyse, mach eine perfektion draus.
     eine professionelle auch mit infos und so aus aller welt was tiktok
     angeht."

     GERECHNET HAT SIE DER SERVER, aus demselben Verlauf, der oben steht
     -- hier wird nur gezeichnet. Das ist kein Zufall: Der Verlauf darf
     das Haus nicht verlassen, und eine Auswertung im Browser hieße, ihn
     dorthin zu schicken, wo man ihn abgreifen kann.
     ==================================================================== */
  const ART = {
    dauerhaft: { marke: 'seit mehreren Runden', ton: 'hakt' },
    neu: { marke: 'neu in dieser Runde', ton: 'neu' },
    besser: { marke: 'hat sich gelöst', ton: 'besser' },
    traegt: { marke: 'trägt durchgehend', ton: 'gut' },
    ruhig: { marke: 'unauffällig', ton: 'still' },
    offen: { marke: 'noch nicht beantwortet', ton: 'still' },
  };

  function analyse() {
    const block = $('analyse-block');
    const a = daten.analyse;
    if (!a || !a.moeglich) {
      /* NOCH KEINE ZWEITE RUNDE: Dann steht hier nichts. Eine Deutung
         über einen einzigen Punkt wäre geraten, und geraten ist bei
         diesem Thema schlimmer als nichts. */
      block.hidden = true;
      return;
    }
    block.hidden = false;
    $('analyse-satz').textContent = a.satz;

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

    /* DIE REIHENFOLGE IST DIE AUSSAGE: erst, was seit mehreren Runden
       hakt, dann das Neue, dann was sich gelöst hat, dann der Rest.
       Alphabetisch oder in Katalogreihenfolge müsste man suchen. */
    const rang = { dauerhaft: 0, neu: 1, besser: 2, traegt: 3, ruhig: 4, offen: 5 };
    const zeilen = [...a.zeilen].sort((x, y) => rang[x.art] - rang[y.art]);

    for (const z of zeilen) {
      const art = ART[z.art] || ART.ruhig;
      const k = el('article', 'b-analyse__zeile');
      k.dataset.ton = art.ton;

      const kopf = el('div', 'b-analyse__kopf');
      kopf.append(el('h3', 'b-analyse__titel', z.titel));
      kopf.append(el('span', 'b-analyse__marke',
        /* "MALE", NICHT "RUNDEN" (19.09.2026). Seit die Zusatzfragen
           wechseln, war eine Frage nicht in jeder Runde dran --
           "seit 2 Runden" waere dann eine Behauptung ueber eine Runde,
           in der gar nicht gefragt wurde. */
        z.art === 'dauerhaft' ? `die letzten ${z.male} Male` : art.marke));
      k.append(kopf);

      /* DIE EINORDNUNG -- der Teil, der sagt: du bist damit nicht
         allein. Sie steht bei JEDER Zeile, auch bei den guten: Wer nur
         dort etwas liest, wo es hakt, liest eine Mängelliste. */
      if (z.welt) k.append(el('p', 'b-analyse__welt', z.welt));
      if (z.hilft) {
        const h = el('p', 'b-analyse__hilft');
        h.append(el('span', 'b-analyse__hilft-marke', 'Was hilft'));
        h.append(document.createTextNode(z.hilft));
        k.append(h);
      }
      ziel.append(k);
    }

    /* WOHER DAS KOMMT, GEHÖRT DAZU. Ein Satz über „die Forschung“ ohne
       Quelle ist eine Behauptung -- und bei diesem Thema wäre das der
       Moment, an dem man der ganzen Seite nicht mehr glaubt. */
    const q = $('analyse-quelle');
    q.textContent = '';
    q.append(document.createTextNode(
      `Eingeordnet nach ${a.runden} ${a.runden === 1 ? 'Runde' : 'Runden'} von dir – `
      + 'und nach Untersuchungen zur Moderationsarbeit: '));
    const quellen = [
      ['University of Michigan: warum Moderatoren aufhören',
        'https://news.umich.edu/online-content-moderators-likely-to-experience-burnout-u-m-study-suggests/'],
      ['Discord: Anzeichen von Moderator-Burnout',
        'https://discord.com/safety/understanding-and-avoiding-moderator-burnout'],
      ['Rest of World: TikTok-Moderation in der Türkei',
        'https://restofworld.org/2025/tiktok-moderators-turkey/'],
    ];
    quellen.forEach(([name, url], i) => {
      if (i) q.append(document.createTextNode(' · '));
      const a2 = el('a', 'b-analyse__quelle-hin', name);
      a2.href = url;
      a2.target = '_blank';
      /* noopener: Ein fremdes Fenster darf das eigene nicht umlenken. */
      a2.rel = 'noopener noreferrer';
      q.append(a2);
    });
  }

  /* ---- 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();
    analyse();
  }

  (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 }); }
  })();
})();