dogfather-universe/workspace/assets/js/manager-ziele.js

/* =====================================================================
   manager-ziele.js — die vier festen Monatsaufgaben (02.10.2026)
   =====================================================================

   WAS DIESE DATEI NICHT TUT, und das ist Absicht:

   SIE RECHNET NICHTS. Keine Zielzahl, keine Ampel, kein Fortschritt
   entsteht hier. Alles kommt fertig vom Server (`standFuer()` in
   workspace-manager-ziele.js). Der Grund ist derselbe wie überall im
   Haus: Zwei Rechnungen über dieselbe Sache laufen auseinander, und
   zwar lautlos — die Seite zeigt dann Grün, während die Erinnerung
   per Push noch mahnt, und niemand weiß, welche von beiden recht hat.

   SIE ENTSCHEIDET NICHTS ÜBER RECHTE. Ein ausgeblendeter Knopf ist
   Aufräumen, keine Sicherung. Wer die Zielzahlen nicht ändern darf,
   bekommt vom Server eine Absage — auch wenn er den Knopf mit den
   Entwicklerwerkzeugen wieder sichtbar macht.

   ---------------------------------------------------------------------
   EINE EINGABE GEHT NIE VERLOREN

   Aus der Vorlage: „Bei Speicherfehlern geht keine Eingabe verloren."
   Deshalb bleibt der Dialog bei einem Fehler OFFEN und behält seinen
   Inhalt; geschlossen wird er erst, wenn der Server bestätigt hat.
   Das ist der Unterschied zwischen einer Fehlermeldung und einem
   verlorenen Abend.
   ===================================================================== */
(() => {
  'use strict';

  const BASIS = '/workspace/api/manager-ziele';

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

  async function hole(pfad, einst = {}) {
    const a = await fetch(pfad, { credentials: 'same-origin', ...einst });
    /* Abgemeldet heißt zurück zur Anmeldung — nicht eine leere Seite
       mit einer Fehlermeldung, die niemand einordnen kann. */
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
    return a;
  }
  const alsJson = (einst, rumpf) => ({
    ...einst,
    headers: { 'Content-Type': 'application/json', ...(einst.headers || {}) },
    body: JSON.stringify(rumpf),
  });

  /* Die Sätze zu den Absagen des Servers. An EINER Stelle: Stünde
     jeder dort, wo er gebraucht wird, hieße dieselbe Absage an zwei
     Stellen verschieden. */
  const FEHLERTEXT = {
    datum_fehlt:         'Bitte ein Datum angeben.',
    datum_zukunft:       'Das Datum liegt in der Zukunft – eintragen kannst du nur, was schon war.',
    datum_fremder_monat: 'Das Datum gehört nicht in diesen Monat.',
    name_fehlt:          'Bitte den TikTok-Namen angeben.',
    link_ungueltig:      'Das sieht nicht nach einer gültigen Internetadresse aus (mit https:// davor).',
    art_fehlt:           'Bitte eine Art auswählen.',
    schon_eingetragen:   'Das steht diesen Monat schon in deiner Liste.',
    monat_gesperrt:      'Dieser Monat ist abgeschlossen und lässt sich nicht mehr ändern.',
    nicht_deins:         'Das ist nicht dein Eintrag.',
    nicht_erlaubt:       'Dafür fehlt dir die Berechtigung.',
    nicht_gespeichert:   'Gespeichert wurde nichts – bitte erneut versuchen.',
    ziel_ungueltig:      'Zielzahlen müssen zwischen 0 und 99 liegen.',
  };
  const satzZu = (schluessel, ersatz) =>
    FEHLERTEXT[schluessel] || ersatz || 'Das hat nicht geklappt.';

  const MONATSNAME = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
    'August', 'September', 'Oktober', 'November', 'Dezember'];
  const monatText = (m) => {
    const [j, n] = String(m).split('-');
    return `${MONATSNAME[Number(n) - 1] || m} ${j}`;
  };
  const tagText = (d) => {
    const [, m, t] = String(d).split('-');
    return `${t}.${m}.`;
  };

  /* Das Zeichen zur Stufe. FARBE NIE ALLEIN — wer Farben nicht
     unterscheidet, liest hier trotzdem, woran er ist. */
  /* Gemessen am Bildschirmfoto vom 02.10.2026: Der Mittelpunkt „·" war
     bei 412 px praktisch unsichtbar — die Zeile sah aus, als fehle das
     Zeichen. Jedes Zeichen ist jetzt eine eigene, deutlich
     unterscheidbare Form; „‼" ist EIN Zeichen, nicht zwei
     Ausrufezeichen nebeneinander. */
  const ZEICHEN = { gruen: '✓', orange: '!', rot: '‼', neutral: '○', aus: '–' };

  let stand = null;          // der zuletzt geladene Stand
  let ichDarfZiele = false;
  let ichDarfKorrigieren = false;
  const offen = new Set();   // welche Zeilen aufgeklappt sind

  /* =====================================================================
     DIE KURZE ERFOLGSMELDUNG
     ===================================================================== */
  let meldungWeg = null;
  function gelungen(text) {
    const alt = document.querySelector('.mz-gelungen');
    if (alt) alt.remove();
    clearTimeout(meldungWeg);
    const k = el('p', 'mz-gelungen', text);
    k.setAttribute('role', 'status');
    document.body.append(k);
    meldungWeg = setTimeout(() => k.remove(), 2600);
  }

  /* =====================================================================
     DER KOPF
     ===================================================================== */
  function kopfZeichnen(s) {
    $('kopf').hidden = false;
    const ring = $('ring');
    ring.dataset.stufe = s.stufe;
    ring.style.setProperty('--mz-anteil', String(s.gesamt.anteil));
    ring.setAttribute('aria-label',
      `${s.gesamt.erledigt} von ${s.gesamt.ziel} erledigt`);
    $('ring-zahl').textContent = String(s.gesamt.erledigt);
    $('ring-von').textContent = `von ${s.gesamt.ziel}`;

    $('kopf-monat').textContent = monatText(s.monat);
    $('kopf-stand').textContent = s.gesamt.ziel === 0
      ? 'Für deine Rolle sind diesen Monat keine Ziele gesetzt.'
      : `${s.gesamt.erledigt} von ${s.gesamt.ziel} erledigt`;

    const rest = $('kopf-rest');
    if (s.monat !== s.jetztMonat) {
      rest.textContent = 'Abgeschlossener Monat – nur zum Nachlesen.';
      rest.dataset.stufe = 'neutral';
    } else if (!s.pflichtig) {
      rest.textContent = 'Du bist diesen Monat dazugekommen – es gibt noch keine Warnungen für dich.';
      rest.dataset.stufe = 'neutral';
    } else {
      rest.textContent = s.bisEnde <= 0
        ? 'Heute ist der letzte Tag des Monats.'
        : `Noch ${s.bisEnde} ${s.bisEnde === 1 ? 'Tag' : 'Tage'} bis Monatsende.`;
      rest.dataset.stufe = s.gesamt.offen ? s.stufe : 'gruen';
    }
  }

  /* =====================================================================
     DIE VIER ZEILEN
     ===================================================================== */
  function zeileBauen(a, s) {
    const li = el('li', 'mz-zeile');
    li.dataset.stufe = a.stufe;
    li.dataset.aufgabe = a.schluessel;
    if (offen.has(a.schluessel)) li.dataset.auf = 'ja';

    const kopf = el('button', 'mz-zeile__kopf');
    kopf.type = 'button';
    kopf.setAttribute('aria-expanded', offen.has(a.schluessel) ? 'true' : 'false');

    const zeichen = el('span', 'mz-zeile__zeichen', ZEICHEN[a.stufe] || '·');
    zeichen.setAttribute('aria-hidden', 'true');
    kopf.append(zeichen);

    const text = el('span', 'mz-zeile__text');
    text.append(el('span', 'mz-zeile__name', a.name));
    const lage = el('span', 'mz-zeile__lage',
      a.text || `${a.zahl} von ${a.ziel} – ${a.hinweis}`);
    lage.dataset.stufe = a.stufe;
    text.append(lage);
    kopf.append(text);

    const zahl = el('span', 'mz-zeile__zahl', `${a.zahl}/${a.ziel}`);
    /* Vorleseprogramme bekommen einen Satz statt „2 Schrägstrich 3". */
    zahl.setAttribute('aria-label',
      `${a.zahl} von ${a.ziel} ${a.ziel === 1 ? a.einheit[0] : a.einheit[1]}`);
    kopf.append(zahl);
    kopf.append(el('span', 'mz-zeile__pfeil', '›'));

    /* NUR DIESE ZEILE AUF- UND ZUKLAPPEN, nicht die ganze Liste neu
       bauen.

       Der erste Entwurf rief hier `zeichnen(s)` und baute damit alle
       vier Zeilen neu. Das sieht gleich aus und ist es nicht: Der
       Knopf, auf den gerade getippt wurde, existiert danach nicht
       mehr -- der Fokus springt an den Seitenanfang, und wer mit der
       Tastatur arbeitet, verliert seine Stelle. Gefunden hat es die
       Bildmessung, der die Schaltfläche unter der Hand wegbrach
       („Element is not attached to the DOM"). */
    kopf.addEventListener('click', () => {
      const jetztAuf = !offen.has(a.schluessel);
      if (jetztAuf) offen.add(a.schluessel); else offen.delete(a.schluessel);
      kopf.setAttribute('aria-expanded', jetztAuf ? 'true' : 'false');
      if (jetztAuf) li.dataset.auf = 'ja'; else delete li.dataset.auf;

      const alteListe = li.querySelector('.mz-eintraege');
      if (!jetztAuf) { alteListe?.remove(); return; }
      if (alteListe) return;
      const kasten = el('div', 'mz-eintraege');
      kasten.dataset.liste = a.schluessel;
      kasten.append(el('p', 'mz-leer', 'Wird geladen …'));
      li.append(kasten);
      eintraegeLaden(a.schluessel);
    });
    li.append(kopf);

    const balken = el('div', 'mz-balken');
    const fuell = el('span', 'mz-balken__fuell');
    fuell.style.setProperty('--mz-anteil',
      String(a.ziel ? Math.min(100, Math.round((a.zahl / a.ziel) * 100)) : 0));
    balken.append(fuell);
    li.append(balken);

    /* Die Vorschläge aus der Pipeline hängen nur an der Rekrutierung
       und nur im laufenden Monat. */
    if (a.schluessel === 'creator' && s.eigen && s.monat === s.jetztMonat) {
      const platz = el('div');
      platz.dataset.vorschlaege = 'creator';
      li.append(platz);
    }

    const fuss = el('div', 'mz-zeile__fuss');
    if (s.eigen && s.monat === s.jetztMonat) {
      const knopf = el('button', 'knopf', '+ Eintragen');
      knopf.type = 'button';
      knopf.addEventListener('click', () => formOeffnen(a, null));
      fuss.append(knopf);
    }
    li.append(fuss);

    if (offen.has(a.schluessel)) {
      const kasten = el('div', 'mz-eintraege');
      kasten.dataset.liste = a.schluessel;
      kasten.append(el('p', 'mz-leer', 'Wird geladen …'));
      li.append(kasten);
    }
    return li;
  }

  function zeichnen(s) {
    stand = s;
    kopfZeichnen(s);
    const liste = $('liste');
    liste.textContent = '';
    for (const a of s.aufgaben) liste.append(zeileBauen(a, s));
    /* Die offenen Listen und die Vorschläge wieder füllen — sie
       hängen an Zeilen, die eben neu gebaut wurden. */
    for (const schluessel of offen) eintraegeLaden(schluessel);
    if (s.eigen && s.monat === s.jetztMonat) vorschlaegeLaden();
  }

  /* =====================================================================
     DIE EIGENEN EINTRÄGE EINER AUFGABE
     ===================================================================== */
  async function eintraegeLaden(aufgabe) {
    const kasten = document.querySelector(`[data-liste="${aufgabe}"]`);
    if (!kasten || !stand) return;
    try {
      const frage = new URLSearchParams({ monat: stand.monat, aufgabe });
      if (!stand.eigen) frage.set('person', String(stand.person.id));
      const a = await hole(`${BASIS}/eintraege?${frage}`);
      if (!a.ok) throw new Error('fehler');
      const d = await a.json();
      kasten.textContent = '';
      if (!d.eintraege.length) {
        kasten.append(el('p', 'mz-leer',
          'Noch nichts eingetragen – starte mit deinem ersten Eintrag.'));
        return;
      }
      for (const e of d.eintraege) kasten.append(eintragBauen(e, aufgabe, d.bearbeitbar));
    } catch {
      kasten.textContent = '';
      const p = el('p', 'mz-leer', 'Die Liste konnte nicht geladen werden. ');
      const k = el('button', 'schritt', 'Erneut versuchen');
      k.type = 'button';
      k.addEventListener('click', () => eintraegeLaden(aufgabe));
      p.append(k);
      kasten.append(p);
    }
  }

  function eintragBauen(e, aufgabe, bearbeitbar) {
    const zeile = el('div', 'mz-eintrag');
    zeile.append(el('span', 'mz-eintrag__datum', tagText(e.datum)));

    const was = el('span', 'mz-eintrag__was');
    if (e.name) {
      was.append(document.createTextNode(e.name));
      if (e.lead_id) {
        const marke = el('span', 'mz-eintrag__marke', 'aus Pipeline');
        marke.title = 'Dieser Eintrag ist mit einem Lead im Scout-CRM verbunden.';
        was.append(marke);
      }
    } else if (e.link) {
      const a = el('a', null, kurzLink(e.link));
      a.href = e.link; a.target = '_blank'; a.rel = 'noopener noreferrer';
      was.append(a);
    } else {
      /* Der Name der Aufgabe statt des Wortes „Eintrag" -- bei einem
         Meeting steht sonst „02.10. Eintrag" da, und das sagt nichts. */
      const ohneFeld = stand?.aufgaben.find((x) => x.schluessel === aufgabe);
      was.append(document.createTextNode(
        artName(aufgabe, e.art) || ohneFeld?.einheit?.[0] || ohneFeld?.kurz || 'Eintrag'));
    }
    if (e.art && (e.name || e.link)) {
      was.append(el('span', 'mz-eintrag__marke', artName(aufgabe, e.art)));
    }
    if (e.doppelt_bei) {
      const m = el('span', 'mz-eintrag__marke',
        `auch bei ${e.doppelt_name || 'jemand anderem'}`);
      was.append(m);
    }
    if (e.notiz) was.append(el('span', 'mz-eintrag__notiz', e.notiz));
    zeile.append(was);

    if (bearbeitbar) {
      const knoepfe = el('div', 'mz-eintrag__knoepfe');
      const bearbeiten = el('button', 'schritt', 'Bearbeiten');
      bearbeiten.type = 'button';
      bearbeiten.addEventListener('click', () => {
        const a = stand.aufgaben.find((x) => x.schluessel === aufgabe);
        formOeffnen(a, e);
      });
      const loeschen = el('button', 'schritt', 'Löschen');
      loeschen.type = 'button';
      loeschen.addEventListener('click', () => eintragLoeschen(e, aufgabe));
      knoepfe.append(bearbeiten, loeschen);
      zeile.append(knoepfe);
    }
    return zeile;
  }

  function kurzLink(w) {
    try {
      const u = new URL(w);
      const kurz = u.host.replace(/^www\./, '') + u.pathname;
      return kurz.length > 44 ? kurz.slice(0, 42) + '…' : kurz;
    } catch { return w; }
  }
  function artName(aufgabe, wert) {
    const a = stand?.aufgaben.find((x) => x.schluessel === aufgabe);
    return a?.arten?.find((x) => x.wert === wert)?.name || '';
  }

  async function eintragLoeschen(e, aufgabe) {
    const was = e.name || (e.link ? kurzLink(e.link) : tagText(e.datum));
    const frage = window.frageNach
      ? await window.frageNach({
          titel: `„${was}" löschen?`,
          was: 'Der Eintrag verschwindet aus deinem Monatszähler.',
          bleibt: e.lead_id ? 'Der Lead im Scout-CRM bleibt bestehen.' : '',
          endgueltig: true, ja: 'Löschen',
        })
      : window.confirm(`„${was}" löschen?`);
    if (!frage) return;
    try {
      const a = await hole(`${BASIS}/eintrag/${e.id}`, { method: 'DELETE' });
      const d = await a.json().catch(() => ({}));
      if (!a.ok) { gelungen(satzZu(d.fehler)); return; }
      zeichnen({ ...stand, ...d.stand, person: stand.person, eigen: stand.eigen,
        jetztMonat: stand.jetztMonat });
      gelungen('Eintrag gelöscht.');
    } catch {
      gelungen('Löschen hat nicht geklappt.');
    }
  }

  /* =====================================================================
     DIE VORSCHLÄGE AUS DER PIPELINE
     ===================================================================== */
  async function vorschlaegeLaden() {
    const platz = document.querySelector('[data-vorschlaege="creator"]');
    if (!platz) return;
    try {
      const a = await hole(`${BASIS}/vorschlaege`);
      if (!a.ok) return;
      const d = await a.json();
      platz.textContent = '';
      if (!d.vorschlaege.length) return;

      const kasten = el('div', 'mz-vorschlag');
      kasten.append(el('p', 'mz-vorschlag__titel',
        d.vorschlaege.length === 1
          ? 'Aus deiner Pipeline: 1 übergebener Lead ist noch nicht eingetragen'
          : `Aus deiner Pipeline: ${d.vorschlaege.length} übergebene Leads sind noch nicht eingetragen`));
      const reihe = el('div', 'mz-vorschlag__reihe');
      for (const v of d.vorschlaege) {
        const k = el('button', 'schritt mz-vorschlag__knopf',
          `+ ${v.handle || v.name}`);
        k.type = 'button';
        k.addEventListener('click', () => {
          const a2 = stand.aufgaben.find((x) => x.schluessel === 'creator');
          formOeffnen(a2, null, {
            name: v.handle || v.name,
            lead_id: v.id,
            datum: (v.uebergeben_am || '').slice(0, 10) || undefined,
          });
        });
        reihe.append(k);
      }
      kasten.append(reihe);
      platz.append(kasten);
    } catch { /* Vorschläge sind ein Angebot – ihr Ausfall darf die Seite nicht stören. */ }
  }

  /* =====================================================================
     DAS FORMULAR
     ===================================================================== */
  const dlg = $('form-dialog');
  let formAufgabe = null;
  let formEintrag = null;
  let formLead = null;

  function formOeffnen(aufgabe, eintrag, vorbelegt = {}) {
    formAufgabe = aufgabe;
    formEintrag = eintrag;
    formLead = eintrag?.lead_id || vorbelegt.lead_id || null;

    $('form-titel').textContent = eintrag ? 'Eintrag bearbeiten' : aufgabe.name;
    /* NICHT der Feldhinweis -- der steht zwei Zeilen tiefer noch
       einmal am Feld selbst. Eine Zeile, die dasselbe sagt wie die
       darunter, kostet Platz und erklaert nichts (gesehen auf dem
       Bildschirmfoto vom 02.10.2026). Hier steht stattdessen, WOFUER
       der Eintrag zaehlt und was schon ausgefuellt ist. */
    $('form-unter').textContent =
      `Zählt für ${monatText(stand.monat)} · Datum ist auf heute vorausgefüllt`;
    $('form-fehler').textContent = '';

    $('feld-name').hidden = aufgabe.feld !== 'name';
    $('feld-link').hidden = aufgabe.feld !== 'link';
    $('feld-art').hidden = !aufgabe.arten;
    $('treffer').hidden = true;

    $('e-name').value = eintrag?.name || vorbelegt.name || '';
    $('e-link').value = eintrag?.link || '';
    $('e-notiz').value = eintrag?.notiz || '';

    if (aufgabe.arten) {
      const auswahl = $('e-art');
      auswahl.textContent = '';
      for (const art of aufgabe.arten) {
        const o = el('option', null, art.name);
        o.value = art.wert;
        auswahl.append(o);
      }
      auswahl.value = eintrag?.art || aufgabe.arten[0].wert;
      $('art-schild').textContent = aufgabe.schluessel === 'werbung' ? 'Wofür?' : 'Art';
    }

    /* DATUM: heute vorausgefüllt, und die Grenzen stehen am Feld.
       Das ist mehr als Bequemlichkeit — der Kalender des Handys lässt
       dann gar nichts Falsches erst zu, und die Absage vom Server
       wird zur zweiten Sicherung statt zur ersten Begegnung. */
    const datum = $('e-datum');
    datum.min = `${stand.monat}-01`;
    datum.max = stand.heute;
    datum.value = eintrag?.datum || vorbelegt.datum || stand.heute;

    dlg.showModal();
    setTimeout(() => {
      const erstes = aufgabe.feld === 'name' ? $('e-name')
        : (aufgabe.feld === 'link' ? $('e-link') : datum);
      erstes.focus();
    }, 40);
  }

  $('form-abbruch').addEventListener('click', () => dlg.close());

  $('form').addEventListener('submit', async (ereignis) => {
    ereignis.preventDefault();
    const fehler = $('form-fehler');
    fehler.textContent = '';
    const knopf = $('form-speichern');
    knopf.disabled = true;

    const rumpf = {
      aufgabe: formAufgabe.schluessel,
      datum: $('e-datum').value,
      notiz: $('e-notiz').value,
    };
    if (formAufgabe.feld === 'name') rumpf.name = $('e-name').value;
    if (formAufgabe.feld === 'link') rumpf.link = $('e-link').value;
    if (formAufgabe.arten) rumpf.art = $('e-art').value;
    if (formLead) rumpf.lead_id = formLead;

    try {
      const a = formEintrag
        ? await hole(`${BASIS}/eintrag/${formEintrag.id}`,
            alsJson({ method: 'PATCH' }, rumpf))
        : await hole(`${BASIS}/eintrag`, alsJson({ method: 'POST' }, rumpf));
      const d = await a.json().catch(() => ({}));

      if (!a.ok) {
        /* DER DIALOG BLEIBT OFFEN und behält alles. Vorlage: „Bei
           Speicherfehlern geht keine Eingabe verloren." */
        fehler.textContent = d.text || satzZu(d.fehler);
        knopf.disabled = false;
        return;
      }

      dlg.close();
      offen.add(formAufgabe.schluessel);
      zeichnen({ ...stand, ...d.stand, person: stand.person, eigen: stand.eigen,
        jetztMonat: stand.jetztMonat });
      gelungen(d.warnung ? d.warnung.text : 'Gespeichert.');
      verlaufLaden();
    } catch {
      fehler.textContent = 'Keine Verbindung. Deine Eingabe steht noch da – bitte erneut versuchen.';
    } finally {
      knopf.disabled = false;
    }
  });

  /* ---------- Namensvorschläge beim Tippen ------------------------- */
  let tippUhr = null;
  $('e-name').addEventListener('input', () => {
    /* Mit dem Tippen löst sich die Verbindung zum Lead: Wer den Namen
       ändert, meint einen anderen Menschen. Eine Verbindung, die
       stehen bleibt, wäre schlimmer als keine. */
    formLead = null;
    clearTimeout(tippUhr);
    tippUhr = setTimeout(trefferLaden, 220);
  });
  $('e-name').addEventListener('blur', () => {
    /* Erst nach dem Klick schließen — sonst verschwindet die Liste,
       bevor der Finger sie trifft. */
    setTimeout(() => { $('treffer').hidden = true; }, 160);
  });

  async function trefferLaden() {
    const liste = $('treffer');
    const q = $('e-name').value.trim();
    if (q.length < 2) { liste.hidden = true; return; }
    try {
      const a = await hole(`${BASIS}/namen?q=${encodeURIComponent(q)}`);
      if (!a.ok) { liste.hidden = true; return; }
      const d = await a.json();
      liste.textContent = '';
      if (!d.treffer.length) { liste.hidden = true; return; }
      for (const t of d.treffer) {
        const li = el('li');
        const k = el('button', null);
        k.type = 'button';
        k.append(document.createTextNode(t.handle || t.name));
        k.append(el('span', 'mz-treffer__lage', `aus der Pipeline · ${t.status}`));
        k.addEventListener('click', () => {
          $('e-name').value = t.handle || t.name;
          formLead = t.id;
          liste.hidden = true;
        });
        li.append(k);
        liste.append(li);
      }
      liste.hidden = false;
    } catch { liste.hidden = true; }
  }

  /* =====================================================================
     DER VERLAUF
     ===================================================================== */
  async function verlaufLaden() {
    try {
      const frage = stand && !stand.eigen ? `?person=${stand.person.id}` : '';
      const a = await hole(`${BASIS}/verlauf${frage}`);
      if (!a.ok) return;
      const d = await a.json();
      const block = $('verlauf-block');
      const platz = $('verlauf');
      platz.textContent = '';
      if (!d.monate.length) { block.hidden = true; return; }
      block.hidden = false;

      const tabelle = el('table', 'mz-tabelle');
      const kopf = el('thead');
      const kz = el('tr');
      kz.append(el('th', null, 'Monat'));
      for (const a2 of (stand?.aufgaben || [])) kz.append(el('th', null, a2.kurz));
      kz.append(el('th', null, 'Gesamt'));
      kopf.append(kz);
      tabelle.append(kopf);

      const koerper = el('tbody');
      for (const m of d.monate) {
        const tr = el('tr');
        const geschafft = m.aufgaben.every((x) => x.erreicht !== false);
        tr.dataset.stufe = geschafft ? 'gruen' : 'rot';
        const t1 = el('td', null, monatText(m.monat));
        t1.dataset.schild = 'Monat';
        tr.append(t1);
        for (const x of m.aufgaben) {
          const td = el('td', 'mz-wert');
          td.dataset.schild = x.kurz;
          const punkt = el('span', 'mz-punkt');
          punkt.dataset.stufe = x.erreicht === null ? 'aus' : (x.erreicht ? 'gruen' : 'rot');
          td.append(punkt);
          td.append(document.createTextNode(
            x.erreicht === null ? 'nicht gefordert' : `${x.zahl}/${x.ziel}`));
          tr.append(td);
        }
        const tg = el('td', 'mz-wert', `${m.gesamt.erledigt}/${m.gesamt.ziel}`);
        tg.dataset.schild = 'Gesamt';
        tr.append(tg);
        koerper.append(tr);
      }
      tabelle.append(koerper);
      platz.append(tabelle);
    } catch { /* Der Verlauf ist eine Zugabe – sein Ausfall darf den Monat nicht verdecken. */ }
  }

  /* =====================================================================
     DIE TEAM-ÜBERSICHT
     ===================================================================== */
  async function teamLaden() {
    if (!ichDarfZiele) return;
    const monat = $('team-monat').value || stand.jetztMonat;
    try {
      const a = await hole(`${BASIS}/team?monat=${encodeURIComponent(monat)}`);
      if (!a.ok) return;
      const d = await a.json();
      const platz = $('team');
      platz.textContent = '';

      const filter = $('team-filter').value;
      const leute = d.leute.filter((p) => {
        if (filter === 'rot') return p.stufe === 'rot';
        if (filter === 'orange') return p.stufe === 'rot' || p.stufe === 'orange';
        if (filter === 'offen') return p.gesamt.offen > 0;
        return true;
      });

      if (!leute.length) {
        platz.append(el('p', 'mz-leer', 'Niemand passt auf diesen Filter – das ist eine gute Nachricht.'));
        return;
      }

      const tabelle = el('table', 'mz-tabelle');
      const kopf = el('thead');
      const kz = el('tr');
      kz.append(el('th', null, 'Person'));
      for (const a2 of d.aufgaben) kz.append(el('th', null, a2.kurz));
      kz.append(el('th', null, 'Gesamt'));
      kopf.append(kz);
      tabelle.append(kopf);

      const koerper = el('tbody');
      for (const p of leute) {
        const tr = el('tr');
        tr.dataset.stufe = p.stufe;

        const td1 = el('td');
        td1.dataset.schild = 'Person';
        /* „Spicy Media · Spicy Media" stand hier beim ersten Bild --
           bei dieser Rolle ist der Anzeigename gleich dem Rollennamen.
           Der Zusatz hilft nur, wenn er etwas hinzufuegt. */
        const name = el('button', 'schritt',
          p.name === p.rollenName ? p.name : `${p.name} · ${p.rollenName}`);
        name.type = 'button';
        name.addEventListener('click', () => personAnsehen(p.id, monat));
        td1.append(name);
        if (!p.pflichtig) td1.append(el('span', 'mz-eintrag__marke', 'neu – ohne Warnung'));
        tr.append(td1);

        for (const a2 of p.aufgaben) {
          const td = el('td', 'mz-wert');
          td.dataset.schild = d.aufgaben.find((x) => x.schluessel === a2.schluessel)?.kurz || '';
          const punkt = el('span', 'mz-punkt');
          punkt.dataset.stufe = a2.stufe;
          td.append(punkt);
          td.append(document.createTextNode(`${a2.zahl}/${a2.ziel}`));
          tr.append(td);
        }
        const tg = el('td', 'mz-wert', `${p.gesamt.erledigt}/${p.gesamt.ziel}`);
        tg.dataset.schild = 'Gesamt';
        tr.append(tg);
        koerper.append(tr);
      }
      tabelle.append(koerper);
      platz.append(tabelle);
    } catch {
      $('team').textContent = '';
      $('team').append(el('p', 'mz-leer', 'Die Übersicht konnte nicht geladen werden.'));
    }
  }

  async function personAnsehen(id, monat) {
    try {
      const a = await hole(`${BASIS}/stand?person=${id}&monat=${encodeURIComponent(monat)}`);
      if (!a.ok) return;
      const s = await a.json();
      offen.clear();
      zeichnen(s);
      $('seiten-titel').textContent = `${s.person.name} · ${monatText(s.monat)}`;
      /* Nur DogFather darf fremde Einträge korrigieren. Der Satz steht
         hier, damit niemand erst durch Ausprobieren herausfindet, ob
         die Knöpfe etwas tun -- der Server entscheidet es ohnehin. */
      $('kopf-rest').textContent = ichDarfKorrigieren
        ? 'Du siehst eine fremde Übersicht. Korrekturen werden mit deinem Namen protokolliert.'
        : 'Du siehst eine fremde Übersicht – nur zum Nachlesen.';
      verlaufLaden();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch { /* still */ }
  }

  /* =====================================================================
     DIE ZIELZAHLEN
     ===================================================================== */
  const zieleDlg = $('ziele-dialog');

  async function zieleOeffnen() {
    try {
      const a = await hole(`${BASIS}/ziele`);
      if (!a.ok) { gelungen(satzZu('nicht_erlaubt')); return; }
      const d = await a.json();
      $('ziele-gilt').textContent =
        `Die Zahlen gelten ab ${monatText(d.naechsterMonat)}. Der laufende Monat bleibt, wie er ist.`;
      const platz = $('ziele-felder');
      platz.textContent = '';

      const tabelle = el('table', 'mz-tabelle');
      const kopf = el('thead');
      const kz = el('tr');
      kz.append(el('th', null, 'Rolle'));
      for (const a2 of d.aufgaben) kz.append(el('th', null, a2.kurz));
      kopf.append(kz);
      tabelle.append(kopf);
      const koerper = el('tbody');
      for (const r of d.naechster) {
        const tr = el('tr');
        const td1 = el('td', null, r.rollenName);
        td1.dataset.schild = 'Rolle';
        tr.append(td1);
        for (const a2 of d.aufgaben) {
          const td = el('td');
          td.dataset.schild = a2.kurz;
          const feld = el('input', 'mz-ziele__zahl');
          feld.type = 'number'; feld.min = '0'; feld.max = '99'; feld.step = '1';
          feld.value = String(r.ziele[a2.schluessel] ?? a2.vorgabe);
          feld.dataset.rolle = r.rolle;
          feld.dataset.aufgabe = a2.schluessel;
          feld.setAttribute('aria-label', `${r.rollenName}: ${a2.name}`);
          td.append(feld);
          tr.append(td);
        }
        koerper.append(tr);
      }
      tabelle.append(koerper);
      platz.append(tabelle);
      platz.append(el('p', 'mz-ziele__gilt',
        '0 heißt: Für diese Rolle ist die Aufgabe nicht gefordert – sie warnt dann nie.'));
      $('ziele-fehler').textContent = '';
      zieleDlg.showModal();
    } catch { gelungen('Die Zielzahlen konnten nicht geladen werden.'); }
  }

  $('ziele-abbruch')?.addEventListener('click', () => zieleDlg.close());

  $('ziele-form')?.addEventListener('submit', async (ereignis) => {
    ereignis.preventDefault();
    const fehler = $('ziele-fehler');
    fehler.textContent = '';
    const ziele = {};
    for (const feld of $('ziele-felder').querySelectorAll('input[data-rolle]')) {
      const wert = Number(feld.value);
      if (!Number.isInteger(wert) || wert < 0 || wert > 99) {
        fehler.textContent = satzZu('ziel_ungueltig');
        feld.focus();
        return;
      }
      (ziele[feld.dataset.rolle] ||= {})[feld.dataset.aufgabe] = wert;
    }
    try {
      const a = await hole(`${BASIS}/ziele`, alsJson({ method: 'PUT' }, { ziele }));
      const d = await a.json().catch(() => ({}));
      if (!a.ok) { fehler.textContent = satzZu(d.fehler); return; }
      zieleDlg.close();
      gelungen(`Gilt ab ${monatText(d.monat)}.`);
    } catch {
      fehler.textContent = 'Keine Verbindung. Deine Zahlen stehen noch da – bitte erneut versuchen.';
    }
  });

  /* =====================================================================
     START
     ===================================================================== */
  async function laden() {
    $('ladefehler').hidden = true;
    try {
      const a = await hole(`${BASIS}/stand`);
      if (a.status === 404) {
        /* Diese Seite gibt es für diese Rolle oder auf dieser Adresse
           nicht. Zurück zur Startseite statt eines leeren Gerüsts —
           eine Seite, die lädt und dann leer bleibt, sieht aus wie ein
           Fehler und ist einer. */
        location.assign('/workspace/start.html');
        return;
      }
      if (!a.ok) throw new Error(`HTTP ${a.status}`);
      const s = await a.json();

      if (s.vorErstemMonat) {
        $('kopf').hidden = true;
        $('liste').append(el('li', 'mz-leer',
          `Es geht erst mit ${monatText(s.erster)} los – vorher gibt es nichts einzutragen.`));
        return;
      }

      ichDarfZiele = !!s.darfZiele;
      ichDarfKorrigieren = !!s.darfKorrigieren;
      zeichnen(s);
      verlaufLaden();

      if (ichDarfZiele) {
        $('team-block').hidden = false;
        monatsAuswahlFuellen(s);
        teamLaden();
      }
    } catch (fehler) {
      $('ladefehler').hidden = false;
      $('ladefehler-grund').textContent =
        String(fehler?.message || '').startsWith('HTTP')
          ? 'Der Server hat nicht geantwortet.'
          : 'Keine Verbindung zum Server.';
    }
  }

  function monatsAuswahlFuellen(s) {
    const auswahl = $('team-monat');
    auswahl.textContent = '';
    let m = s.jetztMonat;
    for (let i = 0; i < 18 && m >= s.erster; i++) {
      const o = el('option', null, monatText(m));
      o.value = m;
      auswahl.append(o);
      const [j, n] = m.split('-').map(Number);
      const d = new Date(Date.UTC(j, n - 2, 1));
      m = `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;
    }
    auswahl.value = s.monat;
  }

  $('team-monat')?.addEventListener('change', teamLaden);
  $('team-filter')?.addEventListener('change', teamLaden);
  $('ziele-auf')?.addEventListener('click', zieleOeffnen);
  $('team-csv')?.addEventListener('click', () => {
    const monat = $('team-monat').value || stand.jetztMonat;
    location.assign(`${BASIS}/export.csv?monat=${encodeURIComponent(monat)}`);
  });
  $('nochmal')?.addEventListener('click', laden);

  laden();
})();