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

/* =====================================================================
   Die Entwicklungskarte (11.09.2026)

   Vier Knöpfe je Beobachtung, ein Feld für den Anlass, und oben die
   Abweichungen zwischen zwei Augenpaaren. Mehr ist es nicht — und das
   ist Absicht: „so einfach wie möglich, aber so professionell wie
   möglich" (Filipe).

   WAS HIER NICHT PASSIERT: rechnen. Es gibt keine Punktzahl, keinen
   Durchschnitt, keine Ampel je Person. Eine Zahl über einem Menschen
   wird gelesen, verglichen und weitererzählt — gebraucht wird ein
   Gesprächsanlass.

   UND KEINE RECHTEPRÜFUNG. Ob jemand Block 5 sehen darf, entscheidet
   der Server: Er liefert ihn gar nicht erst aus. Was hier steht, ist
   höchstens ein Abschnitt, der leer bleibt.
   ===================================================================== */
(() => {
  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;
  };
  /* EINE GUTE NACHRICHT DARF NICHT AUSSEHEN WIE EIN FEHLER
     (22.09.2026). Auf dem ersten Bildschirmfoto der neuen
     Aufgabenanlage stand „Clips vom Samstag schneiden steht jetzt bei
     Rieke." in Warnrot -- weil `melde` immer in denselben Absatz
     schreibt und der `.fehler` heisst.

     Es ist nicht schlimm und genau deshalb heimtueckisch: Wer eine
     Bestaetigung in Rot liest, sucht den Fehler. Und wer sich daran
     gewoehnt, ueberliest den echten.

     Die Vorgabe bleibt „Fehler" -- alle neun bisherigen Aufrufe meinen
     das, und ein Wechsel per Vorgabe haette sie alle stillschweigend
     umgefaerbt. */
  const melde = (t, gut) => {
    const f = $('fehler');
    if (!f) return;
    f.textContent = t;
    f.hidden = !t;
    f.dataset.gut = gut ? 'ja' : 'nein';
  };

  const datum = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString('de-DE',
      { day: 'numeric', month: 'short', year: 'numeric' });
  };

  /* 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 = [];
  /* Welche Erwartungsstufe gerade gefiltert ist ('' = alle).

     ER LIEGT AUSSERHALB VON karte(), wie die Klappzustände: Beim
     Neuzeichnen soll er nicht zurückspringen. Wer „Fortgeschritten"
     gewählt hat und einen Punkt setzt, will danach immer noch
     „Fortgeschritten" sehen.

     DIE VORGABE IST "ALLE". Ein Filter, der beim Öffnen schon etwas
     versteckt, lässt einen Punkte suchen, die gestern noch da waren.
     Wer filtert, hat es selbst getan und weiß es. */
  let stufenFilter = '';

  /* WELCHE KATEGORIEN OFFEN STEHEN (15.09.2026).

     Filipe: „ich will auch dass man die kategorien von den fragen, also
     die liste auf und zu drücken kann mit einem button."

     Der Zustand liegt hier und nicht an den Elementen: Die Karte wird
     nach dem ersten Klick auf einen Punkt neu gezeichnet (erst danach
     darf der Stand der anderen ueberhaupt ausgeliefert werden). Waere
     er an den Elementen, klappte dabei alles wieder zu -- mitten in der
     Arbeit, bei jedem ersten Klick. */
  let offeneBloecke = null;
  let karteFuer = null;

  /* Der Pfeil des Aufklappers. Als Zeichnung und nicht als Textzeichen:
     „▸" sieht auf jedem Geraet anders aus und faellt bei manchen
     Schriften ganz aus. */
  const pfeil = () => {
    const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    s.setAttribute('class', 'e-block__pfeil');
    s.setAttribute('viewBox', '0 0 24 24');
    s.setAttribute('aria-hidden', 'true');
    const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    p.setAttribute('d', 'M9 6l6 6-6 6');
    s.append(p);
    return s;
  };
  let offen = null;          // die gerade geöffnete Person

  /* DIE ZAHL AUF DER PERSONENKACHEL LEBT WOANDERS ALS DIE IN DER KARTE
     (15.09.2026).

     Filipe: „und wieso steht bei vanvan 0 von 28 obwohl ich alle durch
     habe."

     Weil die Kachel aus /entwicklung/lage kommt -- EINMAL, beim Laden
     der Seite. Die Karte holt sich ihren Stand bei jedem Öffnen neu.
     Wer 28 Punkte durchklickt, sieht in der Karte 28 von 28 und auf der
     Kachel darüber weiterhin die Zahl von vorhin. Zwei Wahrheiten auf
     einem Bildschirm, und die falsche steht oben.

     Die Liste deshalb NICHT neu zu holen ist Absicht: Jeder Neuaufbau
     bewegt die Seite, und genau darüber hat Filipe sich im selben
     Atemzug beschwert. Stattdessen wandert die Zahl mit. */
  const personZahlen = new Map();   // Personennummer -> Element mit „x von 28"
  let letzteKarte = null;           // { id, daten } der gerade offenen Karte

  /** Alle sichtbaren Zähler auf den Stand bringen, den die Karte hat.
   *  Ohne Neuladen, ohne Sprung. */
  function zaehlerNachziehen() {
    if (!letzteKarte) return;
    const r = letzteKarte.daten;
    const alle = r.bloecke.flatMap((b) => b.punkte);
    const gesetzt = alle.filter((pt) => pt.meins).length;
    const satz = `${gesetzt} von ${r.gesamt} angesehen`;

    const kopf = document.querySelector('#karte .e-karte__stand');
    if (kopf) kopf.textContent = satz;
    const kachel = personZahlen.get(letzteKarte.id);
    if (kachel) {
      /* Zwei Ziffern statt eines Satzes -- und der Ton wechselt auf
         gruen, sobald nichts mehr offen ist. Ohne das bliebe eine
         fertig angesehene Person blaugrau wie eine halbe. */
      kachel.angesehen.textContent = String(gesetzt);
      kachel.offen.textContent = String(Math.max(0, r.gesamt - gesetzt));
      kachel.kasten.dataset.stufe = gesetzt >= r.gesamt ? 'gut' : 'offen';
    }

    /* Und die Köpfe der Kategorien -- sonst steht zugeklappt „0 / 7“
       über sieben beantworteten Fragen. */
    for (const b of r.bloecke) {
      const abschnitt = document.querySelector(`.e-block[data-block="${b.schluessel}"]`);
      if (!abschnitt) continue;
      /* MIT DEMSELBEN FILTER WIE BEIM ZEICHNEN (17.09.2026). Ohne
         diese drei Zeilen zieht der Zaehler nach jedem Klick auf die
         UNGEFILTERTE Zahl zurueck -- der Kopf sagte dann "3 / 14",
         waehrend vier Zeilen darunter stehen. Und man zweifelt an der
         Zahl, nicht am Filter. */
      const punkte = stufenFilter
        ? b.punkte.filter((pt) => pt.stufe === stufenFilter)
        : b.punkte;
      const n = punkte.filter((pt) => pt.meins).length;
      const haktHier = punkte.filter((pt) => pt.meins?.stufe === 'hakt').length;
      const stand = abschnitt.querySelector('.e-block__stand');
      if (stand) {
        stand.textContent = `${n} / ${punkte.length}`;
        if (n === punkte.length) stand.dataset.fertig = 'ja';
        else delete stand.dataset.fertig;
      }
      if (n === punkte.length) abschnitt.dataset.fertig = 'ja';
      else delete abschnitt.dataset.fertig;
      const hakt = abschnitt.querySelector('.e-block__hakt');
      if (hakt) {
        hakt.hidden = !haktHier;
        const zahl = hakt.querySelector('.e-block__hakt-zahl');
        if (zahl) zahl.textContent = `${haktHier} ×`;
      }
    }
  }

  /* ---- Die vier Knöpfe ------------------------------------------------
     Sie stehen immer in derselben Reihenfolge, auch wenn einer gesetzt
     ist. Ein Knopfsatz, der sich umsortiert, sobald man ihn benutzt,
     ist der sicherste Weg, beim zweiten Mal danebenzutippen. */
  function knopfsatz(aktuell, waehle) {
    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(aktuell === s.schluessel));
      b.title = s.text;
      b.append(el('span', 'e-wahl__zeichen', s.zeichen));
      b.append(el('span', 'e-wahl__name', s.name));
      b.addEventListener('click', () => waehle(s.schluessel, b));
      reihe.append(b);
    }
    return reihe;
  }

  /* ---- Die Ampel ------------------------------------------------------ */
  async function ampel() {
    const ziel = $('ampel');
    let a;
    try { a = await hole('/workspace/api/entwicklung/ampel'); } catch { return; }
    if (!a.ok) return;                       // nicht jede Rolle hat sie
    const r = await a.json();
    ziel.textContent = '';
    ziel.hidden = false;
    ziel.dataset.lage = r.sagbar ? r.lage : 'still';
    ziel.append(el('p', 'e-ampel__satz', r.sagbar ? r.text : r.grund));
    if (r.sagbar) {
      ziel.append(el('p', 'e-ampel__zusatz',
        `${r.geantwortet} von ${r.team} im Team haben die Fragen schon beantwortet. `
        + 'Namen stehen hier nicht – auch für dich nicht.'));
    }
  }

  /* ---- Die Personen --------------------------------------------------- */
  /* EIN BILANZ-KASTEN, wie ihn die Checkliste benutzt (17.09.2026).

     Filipe, mit zwei Bildschirmfotos nebeneinander: "wieso ist diese
     seite noch nicht im stil und perfektioniert wie die auf screen2".

     Der Unterschied war nicht der Aufbau -- der stimmte -- sondern die
     Zahlen: Hier standen sie als graue Textzeilen, drueben als
     abgesetzte Kaesten mit grosser Ziffer und eigenem Ton. Zwei
     Bretter, die dasselbe tun und verschieden aussehen, wirken wie
     zwei verschiedene Sachen.

     `bilanz-zahl` steht in start.css und gehoert damit dem ganzen Haus,
     nicht der Checkliste. Nachbauen waere eine zweite Wahrheit ueber
     dasselbe Aussehen gewesen. */
  function bilanzZahl(n, text, stufe, hinweis) {
    const kasten = el('div', 'bilanz-zahl');
    kasten.dataset.stufe = stufe;
    if (hinweis) kasten.title = hinweis;
    const ziffer = el('span', 'bilanz-zahl__n', String(n));
    kasten.append(ziffer);
    kasten.append(el('span', 'bilanz-zahl__text', text));
    return { kasten, ziffer };
  }

  function personKarte(p, lage) {
    const k = el('button', 'e-person');
    k.type = 'button';
    /* JEDE PERSON IST EINZELN WAEHLBAR -- UND MAN SIEHT ES.
       Vorher war die Kachel ein Knopf ohne Zustand: Man klickte jemanden
       an, die Karte ging auf, und die Kachel sah aus wie vorher. Wer
       dann scrollte, wusste nicht mehr, wen er offen hat. */
    k.setAttribute('aria-pressed', 'false');
    k.dataset.person = String(p.id);
    /* Der Name als Angabe, nicht nur als Text: Das Verteil-Band nennt
       ihn ("Aufgabe fuer Kessi"), und `textContent` der ganzen Kachel
       waere Name + Rolle + drei Zahlen. */
    k.dataset.name = p.name;
    k.append(el('span', 'e-person__name', p.name));
    k.append(el('span', 'e-person__rolle', p.rolle_name));

    const gesamt = Number(lage.gesamt_fremd) || 0;
    const gesetzt = Number(p.gesetzt) || 0;
    const zahlen = el('div', 'e-person__bilanz');
    /* DIESELBEN DREI WIE DRUEBEN, und die ersten beiden teilen dasselbe
       Ganze: angesehen + noch offen = alle Punkte. Die dritte ist das
       Ergebnis dieser Seite -- wo zwei Leute dasselbe sehen, gibt es
       nichts zu besprechen. */
    const a = bilanzZahl(gesetzt, 'angesehen',
      gesamt && gesetzt >= gesamt ? 'gut' : 'offen');
    const o = bilanzZahl(Math.max(0, gesamt - gesetzt), 'noch offen', 'offen');
    const v = bilanzZahl(Number(p.abweichungen) || 0, 'verschieden gesehen',
      'verbessern', 'Hier lohnt das Gespräch – nicht dort, wo ihr einig seid.');
    zahlen.append(a.kasten, o.kasten, v.kasten);
    /* Die Kachel merkt sich ihre Ziffern -- daran zieht
       zaehlerNachziehen() sie nach, ohne die Liste neu zu holen. */
    personZahlen.set(p.id, { angesehen: a.ziffer, offen: o.ziffer, kasten: a.kasten });
    k.append(zahlen);
    if (p.veraltet) {
      const z = el('span', 'e-person__zahl e-person__zahl--alt',
        `${p.veraltet} älter als ${lage.verblasst_nach} Tage`);
      z.title = 'Eine alte Einschätzung ist keine Einschätzung mehr.';
      k.append(z);
    }
    /* NUR HIER WIRD GESPRUNGEN: Wer eine Person anklickt, will zu ihrer
       Karte. Überall sonst bleibt die Seite stehen, wo sie steht. */
    k.addEventListener('click', () => karte(p.id, true));
    /* VON AUSSEN AUF EINE KARTE (17.09.2026).

       Die Talentseite verweist seit heute hierher -- bis dahin oeffnete
       sich eine Karte NUR durch Klick auf ihre Kachel. Wer dem Link
       folgte, landete auf einer Liste und musste die Person suchen;
       genau der Schritt, den der Link ersparen sollte.

       `?zeigen=` ist der vorhandene Weg (kopf.js), nicht ein zweiter.
       Er wird an der Kachel ausgewertet, waehrend sie entsteht --
       vorher gibt es sie nicht, und ein Sprung ins Nichts scrollt
       kommentarlos an den Seitenanfang. */
    if (window.zielSchluessel?.() === `person-${p.id}`) {
      gesucht = k;
    }
    return k;
  }

  /* Welche Kachel von aussen gesucht wurde (`?zeigen=person-…`).
     Sie wird beim Bauen gemerkt und erst danach angesprungen -- vorher
     haengt sie nicht im Dokument und hat keine Position. */
  let gesucht = null;

  /* ---- Die Karte einer Person ----------------------------------------- */
  /* DIE SEITE BEWEGT SICH NUR NOCH, WENN MAN ES WILL (15.09.2026).

     Filipe: „immer wenn ich auf was drücke dan geht das fenster wieder
     hoch. die seite soll sich nicht immer wieder bewegen wenn ich auf
     was drücke."

     Hier stand ein `scrollIntoView` ohne Bedingung -- und diese Funktion
     wird an VIER Stellen gerufen: beim Öffnen einer Person (da ist es
     richtig), nach dem ersten Klick auf einen Punkt, beim Aufklappen
     aller Kategorien und nach dem Anlegen eines Schritts. Dreimal von
     vier war es falsch: Man tippt unten auf „Läuft“ und steht wieder
     ganz oben.

     `springen` ist deshalb VORGABE NEIN. Wer springen will, sagt es --
     und das tut genau eine Stelle. Und selbst ohne Sprung wird die
     Höhe gehalten: Der Neuaufbau kann die Karte kürzer oder länger
     machen (eine Zeile „Schritt läuft“ kommt dazu), und dann rutscht
     alles darunter weg. */
  /* DAS VERTEIL-BAND (22.09.2026).
     ------------------------------------------------------------------
     Es steht nur da, wenn die Person auch verteilen darf -- gefragt
     wird `darf_verteilen` vom Server (ueber window.__ich, das kopf.js
     ohnehin holt). Ein Rollenname stuende hier in einer Datei, die
     jeder herunterlaedt, und waere am Tag der naechsten Aenderung
     falsch. */
  function verteilBandZeigen(personId, name) {
    const band = $('verteilen-band');
    if (!band) return;
    /* `window.__ich` KOMMT SPAETER ALS DIESE SEITE (22.09.2026).
       ----------------------------------------------------------------
       kopf.js holt die Auskunft ueber das Netz; beim ersten Aufruf hier
       steht sie noch nicht. Gemessen: Das Band blieb unsichtbar, bis
       man eine Person anklickte -- also genau dann, wenn man es zum
       ersten Mal gebraucht haette.

       Ein festes `setTimeout` waere eine Zahl aus dem Kopf. Gewartet
       wird stattdessen darauf, dass die Auskunft DA ist, und laengstens
       drei Sekunden. */
    if (window.__ich === undefined && window.wennIchDaBin) {
      /* Benutzt seit dem 22.09.2026 die gemeinsame Wartestelle aus
         kopf.js. Vorher stand hier ein eigenes setInterval -- dasselbe
         Warten ein zweites Mal geschrieben, und damit die Fassung, die
         beim naechsten Umbau nur halb nachgezogen wird. */
      window.wennIchDaBin().then((da) => {
        if (da) verteilBandZeigen(personId, name);
      });
      return;
    }
    const darf = window.__ich?.darf_verteilen === true;
    band.hidden = !darf;
    if (!darf) return;
    const knopf = $('verteilen-knopf');
    const satz = $('verteilen-satz');
    /* WER UND WIE HEISST ER -- fuer das Formular darunter. Es steht
       hier und nicht im Formular selbst: Die Auswahl geschieht
       oberhalb, und zwei Stellen, die sich dieselbe Person merken,
       laufen auseinander. */
    fuerPerson = personId || null;
    fuerName = name || null;

    /* DER KNOPF IST NIE AUS (22.09.2026 abends).

       Vorher: Ohne vorherige Auswahl war er abgeschaltet, und
       daneben stand „Wähl links jemanden aus". Gemessen steht die
       Auswahl aber gar nicht links, sondern 206 px WEITER UNTEN, bei
       derselben linken Kante. Wer der Anweisung folgte, schaute auf
       eine leere Fläche -- und hatte einen Knopf, der nicht ging.

       Filipe: „weil gerade hängt das und weiß nicht wieso."

       Ein toter Knopf mit einer falschen Erklärung daneben ist die
       schlechteste Kombination: Man sucht den Fehler bei sich. Die
       Auswahl steht jetzt IM Formular; der Knopf öffnet es immer.
       Wer unten schon jemanden angeklickt hat, findet ihn angehakt
       wieder. */
    knopf.disabled = false;
    if (personId) {
      knopf.textContent = name ? `Aufgabe für ${name}` : 'Aufgabe anlegen';
      satz.textContent = name
        ? `Sie landet direkt bei ${name} — mit einer Meldung.`
        : 'Sie landet direkt bei der gewählten Person.';
    } else {
      knopf.textContent = 'Aufgabe anlegen';
      satz.textContent = 'Aufgabe anlegen und an eine oder mehrere Personen geben.';
    }
    /* Steht das Formular schon offen, zieht die Auswahl darin mit --
       sonst haette man unten jemanden angeklickt und oben stuende
       weiterhin der alte Haken. */
    if (!$('e-neu')?.hidden) fuerLeuteBauen();
  }

  /* =====================================================================
     AUFGABEN ANLEGEN -- HIER, NICHT AUF EINER ANDEREN SEITE (22.09.2026)
     =====================================================================
     Filipe: „dieser buttion da soll nicht einen zu der seite aufgaben
     fuehren sondern da in dieser seite die aufgaben erstellen und
     vergeben koennen. plus man soll die aufgaben hier in dieser seite
     auch sehen."

     DREI FELDER, NICHT ZWOELF. Wer hier steht, hat die Person schon
     gewaehlt; was fehlt, ist was, bis wann und ob noch jemand
     mitmacht. Das grosse Formular auf dem Brett bleibt, wo es ist --
     fuer den Fall, dass man eine Aufgabe fuer irgendwen irgendwo
     anlegt.
     ===================================================================== */
  let fuerPerson = null;
  let fuerName = null;
  let mehrLeute = [];
  let leute = [];

  function formularZu() {
    const f = $('e-neu');
    if (!f) return;
    f.hidden = true;
    const auf = $('verteilen-knopf');
    if (auf) auf.setAttribute('aria-expanded', 'false');
  }

  /* =====================================================================
     DIE EINE PERSONENLISTE

     Sie ersetzt zwei: „Für wen?" (oben, vorher gar nicht im Formular)
     und „Noch jemanden dazunehmen" (unten, zugeklappt). Zwei Listen
     für dieselbe Frage waren zwei Bedienungen -- und die
     Bewerbungs-Option steckte ausgerechnet in der zugeklappten.

     DIE REIHENFOLGE DER HAKEN ENTSCHEIDET, WER VORN STEHT: Der erste
     Angehakte ist die Hauptperson, die weiteren kommen dazu. Das
     steht hier an einer Stelle, damit `fuerPerson` und `mehrLeute`
     nicht auseinanderlaufen können -- sie werden beide aus derselben
     Liste abgeleitet und nirgends sonst gesetzt.
     ===================================================================== */
  function auswahlLesen() {
    const ziel = $('e-fuer-leute');
    if (!ziel) return;
    const an = [...ziel.querySelectorAll('input:checked')].map((x) => Number(x.value));
    fuerPerson = an.length ? an[0] : null;
    mehrLeute = an.slice(1);
    /* DIE ART FRAGT NUR, WER MEHR ALS EINEN EINTRAEGT. Bei einer
       Person gibt es nichts zu verteilen -- die Frage waere
       Fuellwerk. */
    $('e-art').hidden = an.length < 2;
    if (an.length < 2) {
      const einzeln = $('e-art').querySelector('input[value="mehrere"]');
      if (einzeln) einzeln.checked = true;
    }
    const knopf = $('verteilen-knopf');
    const name = an.length
      ? (leute.find((x) => String(x.id) === String(fuerPerson))?.name || null) : null;
    if (knopf) {
      knopf.textContent = an.length > 1
        ? `Aufgabe für ${an.length} Personen`
        : name ? `Aufgabe für ${name}` : 'Aufgabe anlegen';
    }
    const satz = $('verteilen-satz');
    if (satz) {
      satz.textContent = an.length > 1
        ? 'Sie geht an alle Angehakten — wie, sagst du gleich darunter.'
        : name ? `Sie landet direkt bei ${name} — mit einer Meldung.`
          : 'Aufgabe anlegen und an eine oder mehrere Personen geben.';
    }
  }

  function fuerLeuteBauen() {
    const ziel = $('e-fuer-leute');
    if (!ziel) return;
    /* WAS SCHON ANGEHAKT WAR, BLEIBT ANGEHAKT. Die Liste wird auch
       neu gebaut, wenn man unten eine andere Person anklickt --
       wer dabei seine Haken verliert, fängt von vorn an. */
    const warAn = new Set([...ziel.querySelectorAll('input:checked')].map((x) => x.value));
    if (fuerPerson !== null && fuerPerson !== undefined) warAn.add(String(fuerPerson));
    ziel.replaceChildren();
    for (const p2 of (leute || [])) {
      const zeile = document.createElement('label');
      zeile.className = 'z-wahl__zeile';
      const k = document.createElement('input');
      k.type = 'checkbox';
      k.value = String(p2.id);
      k.checked = warAn.has(String(p2.id));
      k.addEventListener('change', auswahlLesen);
      const t = document.createElement('span');
      t.textContent = p2.name || 'Jemand';
      zeile.append(k, t);
      ziel.append(zeile);
    }
    auswahlLesen();
  }

  function formularAuf() {
    const f = $('e-neu');
    if (!f) return;
    f.hidden = false;
    $('verteilen-knopf').setAttribute('aria-expanded', 'true');
    $('e-neu-fehler').textContent = '';
    fuerLeuteBauen();
    /* OHNE AUSWAHL IST DIE ERSTE FRAGE „für wen" -- dorthin der
       Blick. Steht sie schon fest, fehlt nur noch der Titel. */
    if (fuerPerson) $('e-titel').focus();
    else $('e-fuer-leute').querySelector('input')?.focus();
  }

  function aufgabenFormularAufbauen() {
    const auf = $('verteilen-knopf');
    if (!auf) return;
    auf.setAttribute('aria-expanded', 'false');
    auf.setAttribute('aria-controls', 'e-neu');
    auf.addEventListener('click', () => {
      if ($('e-neu').hidden) formularAuf(); else formularZu();
    });
    $('e-neu-abbrechen').addEventListener('click', () => {
      $('e-neu').reset();
      mehrLeute = [];
      /* ZURUECK AUF DIE KACHEL, NICHT AUF NICHTS. Wer abbricht, hat
         unten meist trotzdem jemanden ausgewaehlt -- der Knopf soll
         dann wieder „Aufgabe fuer X" heissen und nicht so tun, als
         waere die Auswahl auch weg. Sie wird aus der Kachel GELESEN
         und nicht daneben gemerkt: zwei Stellen, die sich dieselbe
         Person merken, laufen auseinander. */
      const kachel = document.querySelector('#personen .e-person[aria-pressed="true"]');
      verteilBandZeigen(kachel ? Number(kachel.dataset.person) : null,
        kachel ? (kachel.dataset.name || null) : null);
      formularZu();
    });
    /* Der Klapp-Knopf „Noch jemanden dazunehmen" ist weg -- es gibt
       nur noch eine Liste, und sie ist von Anfang an offen. */

    $('e-neu').addEventListener('submit', async (ev) => {
      ev.preventDefault();
      const melder = $('e-neu-fehler');
      melder.textContent = '';
      const titel = $('e-titel').value.trim();
      if (titel.length < 2) {
        melder.textContent = 'Schreib kurz, was zu tun ist.';
        $('e-titel').focus();
        return;
      }
      if (!fuerPerson) {
        /* KEIN „links" MEHR. Dort steht nichts -- gemessen. Der
           Hinweis zeigt jetzt auf die Zeile, die im selben Formular
           direkt darüber steht. */
        melder.textContent = 'Hak oben an, für wen die Aufgabe ist.';
        $('e-fuer-leute')?.querySelector('input')?.focus();
        return;
      }
      const knopf = $('e-neu-speichern');
      knopf.disabled = true;
      try {
        const art = mehrLeute.length
          ? ($('e-art').querySelector('input[name="e-verteilart"]:checked')?.value || 'mehrere')
          : 'einzeln';
        const a = await fetch('/workspace/api/aufgaben', {
          method: 'POST',
          credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            titel,
            beschreibung: $('e-text').value.trim() || null,
            frist: $('e-frist').value || null,
            /* DIE GEWAEHLTE PERSON STEHT VORN. `zuteilen` leitet die
               Art ab; bei einer Person wird daraus „einzeln", und
               genau das ist gemeint. */
            zuteilung: [Number(fuerPerson), ...mehrLeute],
            verteilart: art,
          }),
        });
        const r = await a.json().catch(() => ({}));
        if (!a.ok) {
          melder.textContent = window.sagWas?.(r.fehler, 'Ging nicht.') || 'Ging nicht.';
          knopf.disabled = false;
          return;
        }
        /* WAS DER SERVER WIRKLICH GESETZT HAT, nicht was ich wollte.
           `zuteilen` kann eine Person weglassen (gesperrter Zugang)
           oder die Art aendern -- wer das verschweigt, laesst jemanden
           in dem Glauben, er habe drei Leute eingetragen. */
        const gesetzt = r?.zuteilung?.gesetzt;
        const alleIds = [Number(fuerPerson), ...mehrLeute];
        const fehlt = Array.isArray(gesetzt)
          ? alleIds.filter((x) => !gesetzt.includes(x)).length
          : 0;

        /* ERST MERKEN, DANN AUFRAEUMEN (22.09.2026 abends).

           Hier wurde `fuerPerson` auf null gesetzt und danach
           `aufgabenZeigen(fuerPerson, …)` aufgerufen -- die Liste,
           die gerade zeigen soll, was eben entstanden ist, wurde
           damit ausgeblendet. Und die Meldung las `fuerName`, das
           nur beim Klick auf eine Kachel gefuellt wird; wer im
           Formular ankreuzte, bekam „steht jetzt bei ihm".

           Die Namen kommen jetzt aus derselben Liste wie die Haken
           und werden festgehalten, BEVOR `reset()` sie abraeumt. */
        const namenVon = (id) =>
          (leute.find((x) => String(x.id) === String(id))?.name || null);
        const ersterName = fuerName || namenVon(fuerPerson);
        const wieViele = alleIds.length;
        const zeigeFuer = Number(fuerPerson);
        const zeigeName = ersterName;
        const istPool = art === 'pool';

        $('e-neu').reset();
        mehrLeute = [];
        fuerPerson = null;
        formularZu();

        /* DIE MELDUNG SAGT, WAS WIRKLICH PASSIERT IST -- nicht immer
           denselben Satz. Bei einem Pool ist das Entscheidende, dass
           jetzt eine Bewerbung kommt und nicht etwa schon jemand
           dransitzt. */
        melde(fehlt
          ? `Angelegt — aber ${fehlt} Person(en) konnten nicht eingetragen werden.`
          : wieViele === 1
            ? `„${titel}" steht jetzt bei ${ersterName || 'der gewählten Person'}.`
            : istPool
              ? `„${titel}" liegt für ${wieViele} Leute bereit — wer zuerst Zeit hat,`
                + ' bewirbt sich, und du entscheidest.'
              : `„${titel}" steht jetzt bei ${wieViele} Leuten — jede hat ihren`
                + ' eigenen Stand.',
          !fehlt);
        /* UND DIE LISTE DARUNTER ZEIGT DIE ERSTE PERSON. Sie ist die,
           die im Knopf stand; wer mehrere eingetragen hat, findet den
           Rest ueber deren Kacheln. */
        await aufgabenZeigen(zeigeFuer, zeigeName);
      } catch {
        melder.textContent = 'Das hat gerade nicht geklappt. Versuch es noch einmal.';
        knopf.disabled = false;
      } finally {
        knopf.disabled = false;
      }
    });
  }

  /* ---------------------------------------------------------------------
     UND DIE AUFGABEN DIESER PERSON, AUF DERSELBEN SEITE
     ---------------------------------------------------------------------
     „plus man soll die aufgaben hier in dieser seite auch sehen."

     GEFILTERT WIRD IM BROWSER, nicht mit einem eigenen Weg im Server:
     Die Liste, die er ohnehin schickt, enthaelt die Zuteilung je
     Aufgabe. Ein zweiter Weg waere eine zweite Rechnung fuer dieselbe
     Frage -- und die Sichtbarkeitsregel muesste dort noch einmal
     stehen.
     --------------------------------------------------------------------- */
  async function aufgabenZeigen(personId, name) {
    const block = $('e-aufgaben-block');
    if (!block) return;
    if (!personId) { block.hidden = true; return; }
    try {
      const a = await fetch('/workspace/api/aufgaben', { credentials: 'same-origin' });
      if (!a.ok) { block.hidden = true; return; }
      const roh = await a.json();
      const alle = Array.isArray(roh) ? roh : (roh?.aufgaben || []);
      const nr = Number(personId);
      const meine = alle.filter((x) => Number(x.verantwortlich_id) === nr
        || (x.zuteilung || []).some((z) => Number(z.person_id) === nr
          && z.zustand !== 'abgelehnt'));

      block.hidden = false;
      $('e-aufgaben-titel').textContent = name ? `Aufgaben von ${name}` : 'Ihre Aufgaben';

      const offen = meine.filter((x) => x.status !== 'erledigt' && x.status !== 'abgebrochen');
      $('e-aufgaben-satz').textContent = meine.length
        ? `${offen.length} offen, ${meine.length} insgesamt.`
        : '';

      const liste = $('e-aufgaben-liste');
      liste.replaceChildren();
      if (!meine.length) {
        const p2 = document.createElement('p');
        p2.className = 'e-aufgaben__leer';
        p2.textContent = name
          ? `${name} hat gerade keine Aufgabe. Leg oben eine an, wenn etwas ansteht.`
          : 'Gerade keine Aufgabe.';
        liste.append(p2);
        return;
      }
      /* OFFENE ZUERST. Was erledigt ist, interessiert danach -- und
         eine Liste nach Anlegedatum haette die wichtigste Zeile
         irgendwo in der Mitte. */
      const sortiert = [...meine].sort((x, y) => {
        const fertig = (z) => (z.status === 'erledigt' || z.status === 'abgebrochen' ? 1 : 0);
        return fertig(x) - fertig(y)
          || String(x.frist || '9999').localeCompare(String(y.frist || '9999'));
      });
      for (const x of sortiert) {
        const a2 = document.createElement('a');
        a2.className = 'e-aufgabe';
        a2.href = 'aufgaben.html#a' + x.id;
        a2.dataset.status = x.status || 'offen';
        const t = document.createElement('span');
        t.className = 'e-aufgabe__titel';
        t.textContent = x.titel;
        a2.append(t);
        const m = document.createElement('span');
        m.className = 'e-aufgabe__stand';
        m.textContent = STATUS_WORT[x.status] || x.status || 'offen';
        a2.append(m);
        if (x.frist) {
          const f = document.createElement('span');
          f.className = 'e-aufgabe__frist';
          f.textContent = 'bis ' + datum(x.frist);
          a2.append(f);
        }
        liste.append(a2);
      }
    } catch { block.hidden = true; }
  }

  const STATUS_WORT = {
    offen: 'Offen', arbeit: 'In Arbeit', review: 'Zur Freigabe',
    erledigt: 'Erledigt', abgebrochen: 'Abgebrochen',
  };

  async function karte(id, springen = false) {
    offen = id;
    /* WER IST GERADE OFFEN? Die Antwort gehoert auf die Kacheln, nicht
       nur in eine Variable. `aria-pressed` sagt es zugleich einem
       Vorleseprogramm -- eine Umrandung allein kann das nicht. */
    for (const kachel of document.querySelectorAll('#personen .e-person')) {
      kachel.setAttribute('aria-pressed',
        kachel.dataset.person === String(id) ? 'true' : 'false');
    }
    {
      const k = document.querySelector(`#personen .e-person[data-person="${id}"]`);
      const wieHeisst = k ? (k.dataset.name || k.textContent.trim()) : null;
      verteilBandZeigen(id, wieHeisst);
      /* UND IHRE AUFGABEN GLEICH MIT. „plus man soll die aufgaben
         hier in dieser seite auch sehen." Sie kommen beim Auswaehlen,
         nicht auf Knopfdruck: Wer jemanden durchgeht, will wissen,
         was bei ihm liegt -- das ist keine Zusatzfrage. */
      aufgabenZeigen(id, wieHeisst);
    }
    const ziel = $('karte');
    const vorherY = window.scrollY;
    ziel.hidden = false;
    ziel.textContent = '';
    ziel.append(el('p', 'leise', 'wird geladen …'));
    if (springen) ziel.scrollIntoView({ behavior: window.sanft?.() || 'auto', block: 'start' });

    const a = await hole(`/workspace/api/entwicklung/person/${id}`);
    if (!a.ok) { melde('Die Karte ließ sich nicht laden.'); return; }
    const r = await a.json();
    stufen = r.stufen;
    letzteKarte = { id, daten: r };
    ziel.textContent = '';

    /* WIE DIESER MENSCH GEKOMMEN IST (17.09.2026).

       Wer eine Karte aufschlaegt, sieht Namen und Punkte -- aber nicht,
       dass derselbe Mensch vier Wochen lang beobachtet wurde und wer
       ihn eingearbeitet hat. Beim ersten Beurteilen ist genau das die
       Frage: „Woher kommt der eigentlich?"

       NUR DER WEG, NICHT DIE DATEN. Die Merkmale aus dem Trichter
       hierher zu kopieren waere bequem und falsch -- zwei Kataloge,
       zwei Fragen (taugt er? / wie entwickelt er sich?). Eine Zahl aus
       dem einen sieht im anderen aus wie eine Beurteilung und ist
       keine. */
    if (r.herkunft) {
      const h = el('p', 'e-herkunft');
      h.append(el('span', 'e-herkunft__schild', 'Kam über den Trichter'));
      const hin = el('a', 'e-herkunft__weg', r.herkunft.titel);
      hin.href = 'talente.html';
      h.append(hin);
      if (r.herkunft.buddy_name) {
        h.append(el('span', 'e-herkunft__buddy',
          '· eingearbeitet von ' + r.herkunft.buddy_name));
      }
      ziel.append(h);
    }

    const kopf = el('div', 'e-karte__kopf');
    kopf.append(el('h2', 'e-karte__name', r.person.name));
    kopf.append(el('span', 'e-karte__rolle', r.person.rolle_name));
    kopf.append(el('span', 'e-karte__stand', `${r.gesetzt} von ${r.gesamt} angesehen`));
    /* Der Weg zum Notizbrett. Der Katalog ist das, was man regelmäßig
       durchgeht; die Notiz das, was zwischendurch auffällt. Beides
       nebeneinander, nicht statt. */
    const brett = el('a', 'schritt e-karte__brett', 'Notizen zu dieser Person');
    brett.href = 'bereich.html?b=entwicklung';
    kopf.append(brett);
    ziel.append(kopf);

    /* ---- Abweichungen zuerst ------------------------------------------
       Sie stehen oben, weil sie das Einzige sind, was diese Seite
       liefert und eine Liste nicht: die Stelle, an der zwei Leute
       dieselbe Person verschieden sehen. */
    if (r.abweichungen.length) {
      const box = el('div', 'e-abweichung');
      box.append(el('h3', 'e-abweichung__titel',
        `${r.abweichungen.length} × seht ihr das verschieden`));
      box.append(el('p', 'e-abweichung__satz',
        'Genau hier lohnt das Gespräch. Wo ihr einig seid, gibt es nichts zu besprechen.'));
      const liste = el('ul', 'e-abweichung__liste');
      for (const ab of r.abweichungen) {
        const li = document.createElement('li');
        li.append(el('span', 'e-abweichung__punkt', ab.titel));
        const nn = (s) => stufen.find((x) => x.schluessel === s)?.name || s;
        li.append(el('span', 'e-abweichung__gegen',
          `du: ${nn(ab.meins)} · ${ab.von_name}: ${nn(ab.andere)}`));
        liste.append(li);
      }
      box.append(liste);
      ziel.append(box);
    }

    /* ---- Die Blöcke, auf- und zuklappbar --------------------------------

       ACHTUNDZWANZIG PUNKTE SIND ZU VIEL FÜR EINEN BILDSCHIRM. Offen
       sind es rund zwei Meter Seite; man scrollt, verliert die Stelle
       und macht es beim nächsten Mal gar nicht mehr.

       WELCHER ZUERST OFFEN STEHT, IST DIE EIGENTLICHE ENTSCHEIDUNG.
       Alle zu hieße: jedes Mal erst suchen. Alle auf wäre der Zustand
       von vorher. Offen steht deshalb die erste Kategorie, in der noch
       etwas fehlt — man landet dort, wo die Arbeit ist. Ist alles
       gesetzt, steht die erste offen.
       ================================================================ */
    if (karteFuer !== id) { karteFuer = id; offeneBloecke = null; }
    if (offeneBloecke === null) {
      offeneBloecke = new Set();
      const ersteOffene = r.bloecke.find((b) => b.punkte.some((pt) => !pt.meins))
        || r.bloecke[0];
      if (ersteOffene) offeneBloecke.add(ersteOffene.schluessel);
    }

    const leiste = el('div', 'e-bloecke__leiste');
    const alleZu = () => r.bloecke.every((b) => offeneBloecke.has(b.schluessel));
    const alleKnopf = el('button', 'e-bloecke__alle');
    alleKnopf.type = 'button';
    const alleBeschriften = () => {
      alleKnopf.textContent = alleZu() ? 'Alle zuklappen' : 'Alle aufklappen';
    };
    alleBeschriften();
    /* Jede Kategorie legt hier ihren eigenen Umschalter ab. */
    const umschalter = [];
    alleKnopf.addEventListener('click', () => {
      /* AN ORT UND STELLE, NICHT ÜBER EINEN NEUAUFBAU. Vorher rief
         dieser Knopf karte() -- die Karte wurde neu geholt, neu
         gezeichnet, und die Seite sprang. Aufklappen ist eine Sache der
         Anzeige; dafür braucht es den Server nicht. */
      const zu = alleZu();
      if (zu) offeneBloecke.clear();
      else for (const b of r.bloecke) offeneBloecke.add(b.schluessel);
      for (const u of umschalter) u(!zu);
      alleBeschriften();
    });
    leiste.append(alleKnopf);
    /* HIER STAND KURZ „2 von 28 angesehen" -- dieselbe Zahl, die zwei
       Zeilen hoeher schon im Kopf der Karte steht. Zweimal dasselbe auf
       einem Bildschirm laesst einen ueberlegen, ob es zwei verschiedene
       Zahlen sind. Gesehen habe ich das im Bildschirmfoto, nicht im
       Code. */
    /* DIE STUFENLEITER (17.09.2026).

       Sie wird aus r.erwartung GEBAUT und nicht hier aufgezählt --
       eine zweite Liste wäre die Falle, die in diesem Haus schon
       mehrfach zugeschlagen hat: Kommt eine fünfte Stufe dazu, fehlt
       sie genau an der Stelle, an der niemand nachsieht.

       Und jede Stufe sagt, wie viele Punkte sie hat. Ein Filter, der
       auf eine leere Liste führt, sieht aus wie ein Fehler. */
    const stufenLeiste = el('div', 'e-stufen');
    stufenLeiste.setAttribute('role', 'group');
    stufenLeiste.setAttribute('aria-label', 'Nach Stufe filtern');
    const allePunkte = r.bloecke.flatMap((b) => b.punkte);
    const stufenWahl = [{ schluessel: '', name: 'Alle', text: '' }, ...(r.erwartung || [])];
    for (const e of stufenWahl) {
      const wieViele = e.schluessel
        ? allePunkte.filter((pt) => pt.stufe === e.schluessel).length
        : allePunkte.length;
      const k = el('button', 'e-stufen__knopf');
      k.type = 'button';
      k.dataset.erwartung = e.schluessel;
      k.setAttribute('aria-pressed', String(stufenFilter === e.schluessel));
      if (e.text) k.title = e.text;
      k.append(el('span', 'e-stufen__name', e.name));
      k.append(el('span', 'e-stufen__zahl', String(wieViele)));
      k.addEventListener('click', () => {
        /* Ein zweiter Klick auf dieselbe Stufe hebt den Filter auf.
           Sonst sucht man den Weg zurück zu „Alle" und findet ihn
           nicht, weil man nicht mehr weiß, dass man gefiltert hat. */
        stufenFilter = (stufenFilter === e.schluessel) ? '' : e.schluessel;
        karte(id, false);
      });
      stufenLeiste.append(k);
    }
    leiste.append(stufenLeiste);
    ziel.append(leiste);

    for (const b of r.bloecke) {
      /* GEFILTERT WIRD HIER, EINMAL -- und alles darunter rechnet mit
         derselben Liste. Stünde der Filter nur beim Zeichnen der
         Zeilen, zeigte der Kopf weiterhin „3 / 14", während vier
         Punkte darunter stehen. Genau diese Sorte Unstimmigkeit
         lässt einen an der Zahl zweifeln statt am Filter. */
      const punkte = stufenFilter
        ? b.punkte.filter((pt) => pt.stufe === stufenFilter)
        : b.punkte;
      /* EINE KATEGORIE OHNE TREFFER WIRD GANZ AUSGELASSEN. Ein
         Abschnitt mit „0 / 0" ist kein Ergebnis, sondern ein
         Hindernis zwischen den echten. */
      if (!punkte.length) continue;
      const gesetzt = punkte.filter((pt) => pt.meins).length;
      const offen = offeneBloecke.has(b.schluessel);
      const haktHier = punkte.filter((pt) => pt.meins?.stufe === 'hakt').length;

      const abschnitt = el('section', 'e-block');
      /* Der Schlüssel am Element -- daran findet zaehlerNachziehen()
         den richtigen Kopf wieder, ohne eine zweite Liste zu führen. */
      abschnitt.dataset.block = b.schluessel;
      abschnitt.dataset.offen = offen ? 'ja' : 'nein';
      if (gesetzt === punkte.length) abschnitt.dataset.fertig = 'ja';

      const koerper = el('div', 'e-block__koerper');
      koerper.id = `block-${b.schluessel}`;
      koerper.hidden = !offen;

      const titel = el('h3', 'e-block__zeile');
      const schalter = el('button', 'e-block__schalter');
      schalter.type = 'button';
      schalter.setAttribute('aria-expanded', String(offen));
      schalter.setAttribute('aria-controls', koerper.id);
      schalter.append(pfeil());
      schalter.append(el('span', 'e-block__name', b.name));
      /* DER STAND STEHT IM KOPF, damit man ihn ZUGEKLAPPT sieht. Eine
         zugeklappte Kategorie, die nicht sagt, wie weit sie ist, klappt
         man einmal auf und danach nie wieder zu. */
      const stand = el('span', 'e-block__stand', `${gesetzt} / ${punkte.length}`);
      if (gesetzt === punkte.length) stand.dataset.fertig = 'ja';
      schalter.append(stand);
      /* DER HAKT-HINWEIS STEHT IMMER DA, nur meistens verborgen: So
         kann er nachgezogen werden, ohne den Kopf neu zu bauen -- und
         ein neu gebauter Kopf wäre wieder eine Bewegung. */
      const h = el('span', 'e-block__hakt');
      h.hidden = !haktHier;
      h.append(el('span', 'e-block__hakt-zahl', `${haktHier} ×`));
      h.append(el('span', 'e-block__hakt-wort', 'hakt'));
      h.title = 'Punkte, bei denen du „Da hakt es“ gesetzt hast.';
      schalter.append(h);

      const umschalten = (auf) => {
        abschnitt.dataset.offen = auf ? 'ja' : 'nein';
        koerper.hidden = !auf;
        schalter.setAttribute('aria-expanded', String(auf));
      };
      umschalter.push(umschalten);
      schalter.addEventListener('click', () => {
        if (offeneBloecke.has(b.schluessel)) offeneBloecke.delete(b.schluessel);
        else offeneBloecke.add(b.schluessel);
        /* Nur DIESEN Abschnitt umschalten statt die Karte neu zu holen:
           Ein Neuaufbau bei jedem Klick ließe die Seite unter den
           Fingern springen -- und bei 28 Punkten sieht man das. */
        umschalten(offeneBloecke.has(b.schluessel));
        alleBeschriften();
      });
      titel.append(schalter);
      abschnitt.append(titel);

      /* Der erklärende Satz gehört in den Körper, nicht in den Kopf:
         Zugeklappt will man die Überschrift lesen, nicht einen Absatz. */
      koerper.append(el('p', 'e-block__satz', b.text));
      for (const pt of punkte) koerper.append(punktZeile(id, pt, r.erwartung));
      abschnitt.append(koerper);
      ziel.append(abschnitt);
    }

    /* Die Zahl auf der Personenkachel mitziehen -- sie kommt aus einer
       Liste, die nur beim Laden der Seite geholt wird. */
    zaehlerNachziehen();
    /* UND DIE HÖHE HALTEN. Ohne diese Zeile springt die Seite auch ohne
       scrollIntoView: Der Neuaufbau ändert die Höhe der Karte, und der
       Browser behält nur die Pixelzahl, nicht die Stelle. */
    if (!springen) window.scrollTo({ top: vorherY, behavior: 'instant' });
  }

  function punktZeile(personId, pt, erwartung) {
    const z = el('article', 'e-punkt');
    if (pt.meins) z.dataset.stufe = pt.meins.stufe;
    if (pt.meins?.verblasst) z.dataset.verblasst = 'ja';

    const kopf = el('div', 'e-punkt__kopf');
    kopf.append(el('h4', 'e-punkt__titel', pt.titel));
    const erw = erwartung.find((e) => e.schluessel === pt.stufe);
    if (erw) {
      const m = el('span', 'e-punkt__erwartung', erw.name);
      m.dataset.erwartung = pt.stufe;
      m.title = erw.text;
      kopf.append(m);
    }
    z.append(kopf);
    z.append(el('p', 'e-punkt__text', pt.text));

    /* Das Anlassfeld. Es steht IMMER da, nicht erst nach dem Klick:
       Ein Feld, das aufklappt, kostet einen zweiten Blick, und genau
       an der Stelle hört man auf zu schreiben. */
    const feld = el('textarea', 'e-punkt__anlass');
    feld.rows = 2;
    feld.value = pt.meins?.anlass || '';
    /* DER HINWEIS STAND BISHER ACHTUNDZWANZIGMAL DA -- auch an Punkten,
       an denen nichts hakt. Ein Satz, der überall steht, wird nirgends
       gelesen. Jetzt sagt das Feld erst dann, dass es gebraucht wird,
       wenn es gebraucht wird. */
    const feldSetzen = (stufe) => {
      const noetig = stufe === 'hakt';
      feld.dataset.noetig = noetig ? 'ja' : 'nein';
      feld.placeholder = noetig
        ? 'Woran hast du das gemerkt? Ein Satz genügt – ohne ihn wird daraus kein Schritt.'
        : 'Woran hast du das gemerkt? (kann leer bleiben)';
    };
    feldSetzen(pt.meins?.stufe || null);

    z.append(knopfsatz(pt.meins?.stufe || null, async (stufe, knopf) => {
      const reihe = knopf.parentElement;
      for (const b of reihe.querySelectorAll('.e-wahl__knopf')) {
        b.setAttribute('aria-pressed', String(b === knopf));
      }
      z.dataset.stufe = stufe;
      feldSetzen(stufe);
      if (stufe === 'hakt' && !feld.value.trim()) feld.focus();
      const a = await hole(`/workspace/api/entwicklung/person/${personId}/${pt.schluessel}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ stufe, anlass: feld.value }),
      });
      if (!a.ok) {
        const j = await a.json().catch(() => ({}));
        melde(sagWas(j.fehler, 'Ging nicht.'));
        feld.focus();
        return;
      }
      melde('');
      /* DER STAND WANDERT SOFORT MIT -- ohne den Server noch einmal zu
         fragen. Daran hängen drei sichtbare Zahlen: der Kopf der Karte,
         der Kopf der Kategorie und die Personenkachel oben, die sonst
         bei „0 von 28" stehen bliebe. */
      const warNeu = !pt.meins;
      pt.meins = { ...(pt.meins || {}), stufe, anlass: feld.value };
      zaehlerNachziehen();
      /* Neu laden NUR beim ersten Klick auf einem Punkt: Erst danach
         darf der Stand des anderen überhaupt ausgeliefert werden, und
         dann soll er auch sichtbar werden. Ohne Sprung -- karte()
         hält seit heute die Höhe. */
      if (warNeu) await karte(personId);
    }));

    z.append(feld);

    if (pt.andere?.length) {
      for (const a of pt.andere) {
        const nn = stufen.find((x) => x.schluessel === a.stufe);
        const zeile = el('p', 'e-punkt__andere',
          `${a.von_name}: ${nn?.name || a.stufe}${a.anlass ? ' – ' + a.anlass : ''}`);
        zeile.dataset.stufe = a.stufe;
        z.append(zeile);
      }
    } else if (pt.andere_offen) {
      /* WARUM DA ETWAS STEHT UND NICHT NICHTS: „Noch niemand" und „du
         darfst es noch nicht sehen" sähen sonst gleich aus — und das
         erste ist eine Auskunft, das zweite eine Täuschung. */
      z.append(el('p', 'e-punkt__verdeckt',
        `${pt.andere_offen} andere Einschätzung liegt vor – sichtbar, sobald du selbst gesetzt hast.`));
    }

    if (pt.meins) {
      z.append(el('p', 'e-punkt__wann',
        `von dir am ${datum(pt.meins.am)}${pt.meins.verblasst ? ' – älter als 90 Tage' : ''}`));
    }

    /* ==== AUS DER BEOBACHTUNG WIRD EIN SCHRITT (15.09.2026) ==========

       Bis heute konnte diese Zeile genau eines: festhalten, dass etwas
       hakt. Danach passierte nichts — beim nächsten Öffnen stand
       dieselbe Beobachtung da, nur älter.

       Ein Entwicklungsplan wirkt dann, wenn er an einer ECHTEN Aufgabe
       hängt. Also wird aus „da hakt es" eine Aufgabe auf dem Brett,
       mit Verantwortlichem und Frist — und wenn sie erledigt ist,
       fragt die Karte dieselbe Frage noch einmal. Das ist der Kreis.
       ============================================================== */
    z.append(schrittZeile(personId, pt));
    return z;
  }

  const SCHRITT_ABSAGE = {
    kein_hakt: 'Ein Schritt entsteht aus „Da hakt es“ – setz das zuerst.',
    schon_da: 'Dazu läuft schon ein Schritt.',
  };

  function schrittZeile(personId, pt) {
    const s = pt.schritt;
    const zeile = el('div', 'e-schritt');

    /* ---- Es läuft schon etwas ---- */
    if (s && s.status !== 'erledigt' && s.status !== 'abgebrochen') {
      zeile.dataset.lage = 'laeuft';
      zeile.append(el('span', 'e-schritt__was', 'Schritt läuft'));
      const a = el('a', 'e-schritt__hin', s.titel);
      /* DIE SCHREIBWEISE DES HAUSES: `#a<nummer>`. Das Brett springt
         damit wirklich zu der Aufgabe -- `?a=` hatte ich erfunden, und
         das Brett liest es nicht. Ein Verweis, der nur die Seite
         oeffnet und nichts zeigt, ist schlechter als keiner. */
      a.href = 'aufgaben.html#a' + s.id;
      zeile.append(a);
      if (s.frist) zeile.append(el('span', 'e-schritt__frist', `bis ${datum(s.frist)}`));
      return zeile;
    }

    /* ---- Er ist durch: dieselbe Frage noch einmal ----
       DAS IST DER EIGENTLICHE GEWINN. Ohne diesen Satz wäre der Schritt
       nur eine Aufgabe mehr; mit ihm wird aus der Beobachtung eine
       Runde, die zu Ende geht. */
    if (s && s.status === 'erledigt') {
      zeile.dataset.lage = 'durch';
      zeile.append(el('span', 'e-schritt__was', 'Schritt erledigt'));
      zeile.append(el('span', 'e-schritt__satz',
        s.erledigt_am
          ? `am ${datum(s.erledigt_am)} – sieh noch einmal hin und setz neu.`
          : 'Sieh noch einmal hin und setz neu.'));
      return zeile;
    }

    /* ---- Noch keiner: aber nur aus einem „da hakt es" ----
       Der Knopf steht NUR dort. Ein Knopf, der überall steht und fast
       überall „geht nicht" antwortet, ist schlechter als keiner. */
    if (pt.meins?.stufe !== 'hakt') return zeile;

    zeile.dataset.lage = 'offen';
    const b = el('button', 'schritt e-schritt__knopf', 'Daraus einen Schritt machen');
    b.type = 'button';
    b.title = 'Legt eine Aufgabe auf dem Brett an – mit dieser Person als '
      + 'Verantwortlicher und einer Frist in zwei Wochen.';
    b.addEventListener('click', async () => {
      b.disabled = true;
      const a = await hole(
        `/workspace/api/entwicklung/person/${personId}/${pt.schluessel}/schritt`,
        { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
      b.disabled = false;
      if (!a.ok) {
        const j = await a.json().catch(() => ({}));
        melde(SCHRITT_ABSAGE[j.fehler] || 'Ging nicht.');
        return;
      }
      const neu = await a.json();
      melde(`Steht auf dem Aufgabenbrett: „${neu.titel}“, bis ${datum(neu.frist)}.`);
      await karte(personId);
    });
    zeile.append(b);
    return zeile;
  }

  /* ---- Deine eigene Karte -----------------------------------------------

     WAS HIER STEHT UND WAS NICHT: die Antworten, nicht die Namen, und
     nicht der Anlass. „2 × Läuft" oder „1 × Läuft, 1 × Wächst gerade".

     Der Anlass ist für ein Gespräch aufgeschrieben, nicht zum Lesen
     ohne den Menschen dazu — deshalb steht hier stattdessen der Satz,
     dass man danach fragen soll. Ein Satz aus einer Notiz, aus dem
     Zusammenhang gerissen, richtet mehr an, als er erklärt. */
  async function meineKarte() {
    let a;
    try { a = await hole('/workspace/api/entwicklung/meine-karte'); } catch { return; }
    if (!a.ok) return;
    const r = await a.json();
    if (!r.hat_karte) return;                 // DogFather hat keine

    $('karte-block').hidden = false;
    const satz = $('karte-satz');
    const ziel = $('meine-karte');
    ziel.textContent = '';
    ziel.setAttribute('aria-busy', 'false');

    if (!r.beurteiler) {
      satz.textContent = 'Es gibt gerade niemanden, der sie führt. Sobald jemand '
        + 'da ist, steht hier etwas.';
      return;
    }
    if (!r.fertig) {
      /* EINE ZAHL IN EINEM SATZ MUSS SICH VORLESEN LASSEN. „wenn alle 1
         sie gesetzt haben" ist keine Auskunft, sondern eine Rechnung --
         und wer einen Satz liest, der falsch klingt, glaubt auch dem
         Rest der Seite weniger. Derselbe Fall wie bei der Ampel und
         beim Takt auf befinden.html. */
      satz.textContent = r.beurteiler === 1
        ? 'Noch nichts fertig. Eine Beobachtung erscheint hier, sobald sie gesetzt ist '
          + '– eine halbe Karte wäre schlimmer als keine.'
        : `Noch nichts fertig. Eine Beobachtung erscheint hier erst, `
          + `wenn alle ${r.beurteiler} sie gesetzt haben – eine halbe Karte ist `
          + `schlimmer als keine.`;
      return;
    }

    satz.textContent = `${r.fertig} von ${r.gesamt} Beobachtungen sind durch. `
      + 'Du siehst die Antworten, nicht wer was gesetzt hat – und nicht, was '
      + 'danebengeschrieben steht. Das gehört ins Gespräch: frag danach.';

    for (const b of r.bloecke) {
      const fertige = b.punkte.filter((pt) => !pt.offen);
      if (!fertige.length) continue;
      const abschnitt = el('section', 'e-block');
      abschnitt.append(el('h3', 'e-block__titel', b.name));
      for (const pt of fertige) {
        const zeile = el('article', 'e-punkt e-punkt--meine');
        if (pt.einig) zeile.dataset.stufe = pt.antworten[0].stufe;
        zeile.append(el('h4', 'e-punkt__titel', pt.titel));
        const antw = el('div', 'e-meine__antworten');
        for (const x of pt.antworten) {
          const chip = el('span', 'e-meine__antwort', `${x.anzahl} × ${x.name}`);
          chip.dataset.stufe = x.stufe;
          antw.append(chip);
        }
        if (!pt.einig) {
          const hin = el('span', 'e-meine__uneinig', 'darüber seid ihr euch nicht einig');
          hin.title = 'Zwei Leute haben dasselbe verschieden gesehen. Das ist normal – '
            + 'und ein guter Anlass, danach zu fragen.';
          antw.append(hin);
        }
        zeile.append(antw);
        abschnitt.append(zeile);
      }
      ziel.append(abschnitt);
    }
  }

  /* ---- Start ------------------------------------------------------------ */
  (async () => {
    try {
      const a = await hole('/workspace/api/entwicklung/lage');
      if (!a.ok) { melde('Ging nicht.'); return; }
      const lage = await a.json();
      stufen = lage.stufen;

      if (lage.leitung) {
        /* DIE LEUTE FUER „NOCH JEMANDEN DAZUNEHMEN" kommen aus
           derselben Antwort wie die Kacheln. Ein eigener Abruf waere
           eine zweite Liste, die im Zweifel eine andere ist. */
        leute = lage.personen || [];
        /* Das Verteil-Band gehoert zur Leitungssicht -- ein Modi sieht
           hier nur sich selbst und verteilt nichts. */
        aufgabenFormularAufbauen();
        verteilBandZeigen(null, null);
        $('personen-block').hidden = false;
        const ziel = $('personen');
        ziel.textContent = '';
        ziel.setAttribute('aria-busy', 'false');
        if (!lage.personen.length) {
          ziel.append(el('p', 'leise',
            'Noch niemand im Team. Zugänge legst du in „Personen & Zugänge" an.'));
        }
        gesucht = null;
        for (const p of lage.personen) ziel.append(personKarte(p, lage));
        /* ERST JETZT SPRINGEN. Die Kachel entsteht in der Schleife
           darueber; waehrenddessen haengt sie noch nicht im Dokument
           und hat keine Position. Ein Sprung dorthin waere ein Sprung
           an den Seitenanfang -- lautlos, und man haelt den Link fuer
           kaputt.

           Die Karte wird MIT geoeffnet: Wer von der Talentseite kommt,
           will die Karte sehen und nicht die Kachel dazu. Genau der
           Schritt, den der Link ersparen soll. */
        if (gesucht) {
          const wen = Number(gesucht.dataset.person);
          window.zielMarkieren?.([gesucht], 'diese eine Karte');
          if (wen) await karte(wen, true);
        }
        await ampel();
      } else {
        /* Für die Beurteilten ist DIESE Seite die eigene Karte — das,
           was die Leitung über ihn notiert hat, und was er selbst
           dazu sagt. Nicht „Entwicklung" als Überschrift: Das liest
           sich wie eine Beurteilung, und darum geht es hier nicht.

           Bis zum 15.09.2026 stand hier „Wie geht's dir?" — damals
           bestand die Seite für ihn aus den sechs Fragen. Die haben
           jetzt ihre eigene Seite, also stimmte der Titel nicht mehr.
           Ein Titel, der etwas anderes verspricht als die Seite zeigt,
           ist derselbe Fehler wie der an der Kachel. */
        /* NICHT 'Deine Entwicklung' (geaendert 19.09.2026): So hiess bis
       heute AUCH werdegang.html fuer denselben Menschen. Wer aus der
       Glocke oder einem Link kam, konnte nicht sagen, auf welcher der
       beiden Seiten er stand. Jetzt traegt jede den Namen ihrer
       Kachel: hier 'Deine Aufgaben', dort 'Deine Entwicklung'. */
      $('titel').textContent = 'Deine Aufgaben';
        $('unterzeile').textContent =
          'Was im Team über deine Arbeit notiert ist – und was du selbst dazu sagst. '
          + 'Keine Noten, keine Punktzahl.';
      }

      await meineKarte();
      /* Die sechs Fragen stehen seit dem 15.09.2026 auf einer eigenen
         Seite. Hier bleibt nur der Verweis -- er wird fuer alle
         gezeigt, die dort ueberhaupt etwas zu beantworten haben. */
      if ($('meins-block')) $('meins-block').hidden = false;
    } catch {
      /* NICHT MEHR STUMM (20.09.2026). Scheitert hier etwas am Netz,
         blieben die Ladeplatzhalter fuer immer stehen -- gemessen auf
         13 von 21 Seiten. Umgeleitet wird nur bei 401; alles andere
         ist ein Ladefehler und gehoert gesagt. */
      window.ladefehler?.();
    }
  })();
})();