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

/* ===================================================================
   Scout-CRM (Konzept, Seite 15).

   Die Pipeline ist nach Stufen gruppiert, nicht als breites Board --
   auf dem Handy waere ein Board mit sechs Spalten unbedienbar, und ein
   Scout arbeitet ohnehin meistens unterwegs.

   Jede Karte hat genau einen naheliegenden naechsten Schritt ("Weiter
   zu ..."), weil die Pipeline eine Richtung hat. Alles andere steckt
   im aufklappbaren Teil, damit die Liste ruhig bleibt.
   =================================================================== */
(() => {
  'use strict';

  /* DogFather und Manager haben dieselben Rechte -- die Unterscheidung
     macht nur die Personenverwaltung, und die prueft der Server. */
  /* Die Leitungsliste steht in bereiche.js -- eine Antwort statt neun.
     Sie stand hier frueher selbst, ohne 'spicy', und genau das war der
     Fehler, den Filipe am 07.09.2026 gefunden hat. */
  const LEITUNG = window.Bereiche.LEITUNG;

  const $ = (id) => document.getElementById(id);
  const WEITER = {
    neu: 'angesprochen', angesprochen: 'gespraech',
    gespraech: 'interessiert', interessiert: 'uebergeben',
  };

  /* DIE ETAPPENNUMMER WIRD ABGELEITET, NICHT DANEBENGESCHRIEBEN
     (06.10.2026).

     WEITER sagt bereits, welche Stufe auf welche folgt -- die
     Nummerierung ist genau dieser Weg, einmal durchgezaehlt. Eine
     zweite Liste `{ neu: 1, angesprochen: 2, ... }` waere die naechste
     Stelle, die beim Einfuegen einer Stufe vergessen wird; eine Liste,
     die niemand pflegt, kann nicht veralten.

     „Abgelehnt" kommt in WEITER nicht vor und bekommt deshalb von
     selbst keine Nummer -- eine Absage ist keine Etappe auf dem Weg
     nach vorn. Dasselbe sagt der leere Zustand weiter unten, der
     ebenfalls nur bis fuenf zaehlt. */
  const STUFE_NR = (() => {
    const nummern = {};
    let stufe = 'neu', i = 1;
    while (stufe && !nummern[stufe]) { nummern[stufe] = String(i++).padStart(2, '0'); stufe = WEITER[stufe]; }
    return nummern;
  })();

  /* WAS JEDE STUFE BEDEUTET -- an EINER Stelle.

     Diese Saetze standen bis zum 11.09.2026 nur im leeren Zustand der
     Seite, ausgeschrieben in einer eigenen Liste. Jetzt lesen beide
     daraus: die Erklaerung fuer den leeren Zustand und der Kopf jeder
     Stufe. Zwei Fassungen derselben Erklaerung waeren zwei
     Gelegenheiten, dass eine von beiden veraltet -- und eine veraltete
     Erklaerung ist schlimmer als keine. */
  const STUFE_WAS = {
    neu: 'Entdeckt. Noch nicht angeschrieben.',
    angesprochen: 'Erste Nachricht ist raus. Jetzt läuft die Uhr.',
    gespraech: 'Ihr seid im Austausch – Fragen, Bedingungen, Termine.',
    interessiert: 'Grundsätzlich dabei. Jetzt zählt, dass es nicht liegen bleibt.',
    uebergeben: 'Ein Manager übernimmt. Ab hier ist es Betreuung, kein Scouting mehr.',
    abgelehnt: 'Passt nicht – festgehalten, damit niemand zweimal fragt.',
  };

  let ich = null;
  let stufen = {};
  /* Die Auswahllisten kommen vom Server (siehe /api/leads) -- die
     Oberflaeche fuehrt keine eigenen. Leere Vorgabe, damit ein
     Ausfall der Abfrage kein kaputtes Formular ergibt. */
  let laenderListe = [], landName = {}, netzwerkListe = [], netzwerkName = {};
  /* Normal und Premium -- die beiden Arten, die TikTok kennt.

     DIE RUECKFALLLISTE IST KEIN SCHMUCK: Sie steht hier, damit die
     Trennung auch dann zwei Spalten hat, wenn ein alter Server die
     Listen noch nicht mitschickt. Ohne sie waere die Seite in genau dem
     Moment leer, in dem jemand sie zum ersten Mal nach einem Deploy
     aufmacht -- der Server neu, die Datei aus dem Zwischenspeicher alt,
     oder umgekehrt. */
  let artenListe = ['normal', 'premium'], artName = { normal: 'Normal', premium: 'Premium' };
  let heute = '';
  let daten = [];
  let offen = new Set();

  const el = (tag, klasse, text) => {
    const k = document.createElement(tag);
    if (klasse) k.className = klasse;
    if (text !== undefined) k.textContent = text;
    return k;
  };
  const melde = (t) => { $('fehler').textContent = t || ''; };
  const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');

  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 && !pfad.includes('/leads/')) {
      location.assign('/workspace/start.html'); throw new Error('kein Zugriff');
    }
    return a;
  }

  async function schicke(pfad, methode, körper) {
    const a = await hole(pfad, {
      method: methode,
      headers: körper ? { 'Content-Type': 'application/json' } : undefined,
      body: körper ? JSON.stringify(körper) : undefined,
    });
    if (!a.ok) {
      melde(sagWas((await a.json().catch(() => ({}))).fehler, 'Das hat nicht geklappt.'));
      return null;
    }
    melde('');
    return a.json().catch(() => ({}));
  }

  /* ---------- Karte -------------------------------------------------------- */

  function zeile(schild, wert) {
    const p = el('p', 'kk__zeile');
    p.append(el('span', 'kk__schild', schild), document.createTextNode(wert));
    return p;
  }

  /* 12.400 -> "12,4k". Auf einer Karte zaehlt die Groessenordnung, nicht
     die letzte Stelle -- und die genaue Zahl steht im Titel. */
  function zahlKurz(n) {
    if (!Number.isFinite(n)) return '';
    if (n >= 1000000) return (n / 1000000).toFixed(n >= 10000000 ? 0 : 1).replace('.', ',') + 'M';
    if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 0 : 1).replace('.', ',') + 'k';
    return String(n);
  }

  function karte(l) {
    const k = el('article', 'kk');
    k.dataset.prio = l.prioritaet;
    const fällig = l.naechster_followup && l.naechster_followup <= heute
      && l.status !== 'uebergeben' && l.status !== 'abgelehnt';
    if (fällig) k.dataset.faellig = 'ja';

    /* Kopf */
    const kopf = el('div', 'kk__kopf');
    const links = el('div');
    /* h4, NICHT h3 (06.10.2026). Ueber der Karte stehen jetzt drei
       Ebenen: "Pipeline" (h1), die Stufe (h2) und die Spalte Normal /
       Premium (h3). Bliebe der Name ein h3, saesse er auf derselben
       Ebene wie die Spalte, in der er liegt -- wer sich per
       Ueberschriften durch die Seite bewegt, bekaeme die Trennung nicht
       mehr zu hoeren. */
    links.append(el('h4', 'kk__name', l.name));
    /* PLATTFORM UND HANDLE SIND ZWEI DINGE (06.10.2026).

       Hier stand `[plattform, handle].join(' · ')` -- ein grauer Satz,
       in dem beides gleich aussah. Die Plattform ist eine Einordnung
       (davon gibt es eine Handvoll, man vergleicht sie), das Handle
       eine Kennung (einmalig, man liest sie Zeichen fuer Zeichen).
       Zwei Rollen, zwei Formen: die Plattform als kleines Schild, das
       Handle in gleichbreiter Schrift. */
    const unter = el('p', 'kk__unter');
    if (l.plattform) unter.append(el('span', 'kk__plattform', l.plattform));
    if (l.handle) unter.append(el('span', 'kk__handle', l.handle));
    if (unter.childNodes.length) links.append(unter);
    kopf.append(links);

    const marken = el('div', 'kk__marken');
    /* SCHON IM NETZWERK? ZUERST UND IN ROT (11.09.2026).

       Das ist die einzige Angabe, die die ganze weitere Arbeit
       erledigt: Wer unter Vertrag steht, kann nicht uebernommen
       werden. Sie steht deshalb VOR der Prioritaet -- eine hohe
       Prioritaet bei jemandem, der gar nicht kann, ist eine
       Verabredung mit sich selbst. */
    if (l.netzwerk === 'ja') {
      const n = el('span', 'marke-punkt', 'Schon im Netzwerk');
      n.dataset.warn = 'ja';
      n.title = 'Steht bei einer anderen Agentur unter Vertrag – eine Übernahme geht nicht.';
      marken.append(n);
    } else if (l.netzwerk === 'unbekannt') {
      const n = el('span', 'marke-still', 'Netzwerk ungefragt');
      n.title = 'Noch nicht geklärt, ob die Person schon bei einer Agentur ist.';
      marken.append(n);
    }
    /* PREMIUM TRAEGT EIN ZEICHEN, NORMAL NICHT (06.10.2026).

       Dieselbe Regel wie bei "Schon im Netzwerk": Nur der Fall, der vom
       Normalfall abweicht, bekommt eine Marke. Eine Marke "Normal" auf
       jeder zweiten Karte waere ein Wort, das nie etwas Neues sagt.

       WARUM UEBERHAUPT, WO DOCH DIE SPALTE ES SCHON SAGT: Die beiden
       Spalten werden verschieden lang. Steht links eine lange Liste und
       rechts eine kurze, ist eine Karte weit unten vom Kopf ihrer Spalte
       durch einen halben Bildschirm getrennt -- und auf dem Handy liegen
       die Spalten ohnehin untereinander. */
    if (l.creator_art === 'premium') {
      const a = el('span', 'marke-punkt', artName.premium || 'Premium');
      a.dataset.art = 'premium';
      a.title = 'Premium-Creator – die zweite der beiden Arten, die TikTok kennt.';
      marken.append(a);
    }
    const prio = el('span', 'marke-punkt', l.prioritaet === 'hoch' ? 'Hoch'
      : l.prioritaet === 'niedrig' ? 'Niedrig' : 'Mittel');
    prio.dataset.prio = l.prioritaet;
    marken.append(prio);
    if (l.scout_name && LEITUNG.has(ich.rolle)) marken.append(el('span', 'marke-still', l.scout_name));
    if (l.creator_name) marken.append(el('span', 'marke-fertig', 'Creator: ' + l.creator_name));
    kopf.append(marken);
    k.append(kopf);

    /* Kurzinfo */
    const info = el('div', 'kk__info');
    /* DIE HARTEN ZAHLEN ZUERST (11.09.2026). Land, Reichweite und
       LIVE-Zeiten beantworten "lohnt sich das ueberhaupt" -- und zwar
       ohne dass man die Karte aufklappen muss. Fehlt eine Angabe,
       steht sie nicht da; ein leeres Schild ist schlechter als keins. */
    if (l.land) {
      const s = el('span', 'kk__fakt', landName[l.land] || l.land);
      s.dataset.art = 'land';
      info.append(s);
    }
    if (l.follower) {
      const f = el('span', 'kk__fakt', zahlKurz(l.follower) + ' Follower');
      f.dataset.art = 'follower';
      f.title = l.follower.toLocaleString('de-DE') + ' Follower beim Fund';
      info.append(f);
    }
    if (l.live_zeiten) info.append(el('span', 'kk__still', 'LIVE: ' + l.live_zeiten));
    if (l.naechster_followup) {
      const f = el('span', 'kk__followup', 'Follow-up ' + datum(l.naechster_followup));
      if (fällig) f.dataset.faellig = 'ja';
      info.append(f);
    }
    if (l.letzte_nachricht) info.append(el('span', 'kk__still', 'zuletzt geschrieben ' + datum(l.letzte_nachricht)));
    if (l.uebergeben_am) info.append(el('span', 'kk__still', 'übergeben ' + datum(l.uebergeben_am)));
    if (info.childNodes.length) k.append(info);

    /* Knöpfe: ein naheliegender Schritt, alles andere aufklappbar. */
    const knöpfe = el('div', 'kk__knoepfe');
    const ziel = WEITER[l.status];
    if (ziel) {
      const w = el('button', 'knopf knopf--klein knopf--weiter', 'Weiter zu „' + stufen[ziel] + '“');
      w.type = 'button';
      w.addEventListener('click', () => stufeSetzen(l, ziel));
      knöpfe.append(w);
    }
    if (l.status === 'uebergeben' && LEITUNG.has(ich.rolle) && !l.creator_id) {
      const o = el('button', 'knopf knopf--klein knopf--gold', 'Creator-Onboarding starten');
      o.type = 'button';
      o.addEventListener('click', () => onboarding(l, o));
      knöpfe.append(o);
    }
    /* „BEARBEITEN" STATT „DETAILS" (11.09.2026).

       Filipe: "weil man kan da nichts machen." Man konnte -- der ganze
       Editor lag hinter diesem Knopf. Nur verspricht "Details" das
       Lesen und nicht das Aendern, und er stand als stiller Textknopf
       neben einem auffaelligen. Wer ihn nicht drueckt, haelt die Karte
       fuer eine Anzeige. Der Name sagt jetzt, was passiert. */
    const mehr = el('button', 'knopf-still knopf-still--bearbeiten',
      offen.has(l.id) ? 'Fertig' : 'Bearbeiten');
    mehr.type = 'button';
    mehr.setAttribute('aria-expanded', offen.has(l.id) ? 'true' : 'false');
    mehr.addEventListener('click', () => {
      if (offen.has(l.id)) offen.delete(l.id); else offen.add(l.id);
      zeichne();
    });
    knöpfe.append(mehr);
    k.append(knöpfe);

    if (!offen.has(l.id)) return k;

    /* ---------- Aufgeklappt: Qualifizierung und Pflege ---------- */
    const d = el('div', 'kk__detail');

    /* AKTIVITAET UND POTENZIAL WAREN NUR ZU LESEN (11.09.2026).

       Sie liessen sich ausschliesslich beim ANLEGEN eintragen -- danach
       standen sie da und waren nicht mehr zu aendern. Genau das meinte
       Filipes "man kan da nichts machen": Es sah nach Anzeige aus, weil
       es Anzeige war. Jetzt sind es Felder wie alle anderen. */
    const notiz = el('textarea', 'kk__notiz');
    notiz.rows = 3;
    notiz.maxLength = 3000;
    notiz.placeholder = 'Notizen zum Gespräch – was wurde besprochen, was ist offen?';
    notiz.value = l.notizen || '';
    d.append(el('label', 'feld-schild', 'Notizen'), notiz);

    const raster = el('div', 'kk__raster');
    const mach = (schild, typ, wert, aufbau) => {
      const box = el('div', 'feld');
      box.append(el('label', 'feld-schild', schild));
      const f = typ === 'select' ? el('select') : el('input');
      if (typ !== 'select') f.type = typ;
      if (aufbau) aufbau(f);
      f.value = wert || '';
      box.append(f);
      raster.append(box);
      return f;
    };
    const fNachricht = mach('Zuletzt geschrieben', 'date', l.letzte_nachricht);
    const fFollowup = mach('Nächster Follow-up', 'date', l.naechster_followup);
    const fPrio = mach('Priorität', 'select', l.prioritaet, (f) => {
      for (const [w, t] of [['hoch', 'Hoch'], ['mittel', 'Mittel'], ['niedrig', 'Niedrig']]) {
        const o = document.createElement('option'); o.value = w; o.textContent = t; f.append(o);
      }
    });
    /* Die Art laesst sich auch nachtraeglich aendern -- ein Lead rutscht
       dabei in die andere Spalte. Genau das war der Mangel vom
       11.09.2026 ("man kan da nichts machen"): ein Feld, das man beim
       Anlegen setzt und danach nie wieder. */
    const fArt = mach('Art', 'select', l.creator_art || 'normal', (f) => {
      for (const w of artenListe) {
        const o = document.createElement('option');
        o.value = w; o.textContent = artName[w] || w; f.append(o);
      }
    });
    const fStufe = mach('Stufe', 'select', l.status, (f) => {
      for (const [w, t] of Object.entries(stufen)) {
        const o = document.createElement('option'); o.value = w; o.textContent = t; f.append(o);
      }
    });

    /* ---- DIE SIEBEN NEUEN FELDER ------------------------------------

       Die Auswahllisten kommen vom Server (laender, netzwerk) -- hier
       steht keine eigene. */
    const leer = (f, text) => {
      const o = document.createElement('option'); o.value = ''; o.textContent = text; f.append(o);
    };
    const fNetz = mach('Schon im Netzwerk?', 'select', l.netzwerk, (f) => {
      leer(f, '– nicht angegeben –');
      for (const w of netzwerkListe) {
        const o = document.createElement('option');
        o.value = w; o.textContent = netzwerkName[w] || w; f.append(o);
      }
    });
    const fLand = mach('Land', 'select', l.land, (f) => {
      leer(f, '– nicht angegeben –');
      for (const w of laenderListe) {
        const o = document.createElement('option');
        o.value = w; o.textContent = landName[w] || w; f.append(o);
      }
    });
    const fFollower = mach('Follower', 'text', l.follower ? String(l.follower) : '', (f) => {
      f.placeholder = 'z. B. 12400 oder 12,4k';
      f.inputMode = 'numeric';
    });
    const fWoher = mach('Wie gefunden', 'text', l.woher, (f) => {
      f.maxLength = 80; f.placeholder = 'LIVE entdeckt, Empfehlung, Kommentar …';
    });
    const fWeg = mach('Angeschrieben über', 'text', l.kontaktweg, (f) => {
      f.maxLength = 80; f.placeholder = 'TikTok-DM, Instagram, WhatsApp …';
    });
    const fZeiten = mach('LIVE-Zeiten', 'text', l.live_zeiten, (f) => {
      f.maxLength = 200; f.placeholder = 'z. B. Mo–Fr ab 21 Uhr';
    });
    d.append(raster);

    /* Die beiden langen Texte stehen UNTER dem Raster, nicht darin:
       Sie brauchen Zeilen, keine Spalte. */
    const lang = (schild, wert, platzhalter) => {
      const t = el('textarea', 'kk__notiz');
      t.rows = 2; t.maxLength = 3000; t.placeholder = platzhalter; t.value = wert || '';
      d.append(el('label', 'feld-schild', schild), t);
      return t;
    };
    const fAktiv = lang('Aktivität & LIVE-Fokus', l.aktivitaet,
      'Wie oft LIVE? Welche Zeiten? Welches Format?');
    const fPot = lang('Potenzial & Stil', l.potenzial,
      'Was macht die Person besonders?');
    /* Der Absagegrund erscheint nur, wo er hingehoert. Ein Feld
       "warum nicht" an einem Kontakt, der gerade gut laeuft, ist eine
       Frage, die niemand gestellt hat. */
    const fAbsage = l.status === 'abgelehnt'
      ? lang('Warum es nicht gepasst hat', l.absage_grund,
        'Kein Interesse, schon vergeben, passt nicht zur Agentur …')
      : null;

    const unten = el('div', 'kk__knoepfe');
    const sp = el('button', 'knopf knopf--klein', 'Speichern');
    sp.type = 'button';
    sp.addEventListener('click', async () => {
      sp.disabled = true;
      const r = await schicke('/workspace/api/leads/' + l.id, 'PATCH', {
        notizen: notiz.value, letzte_nachricht: fNachricht.value,
        naechster_followup: fFollowup.value, prioritaet: fPrio.value, status: fStufe.value,
        creator_art: fArt.value,
        netzwerk: fNetz.value, land: fLand.value, follower: fFollower.value,
        woher: fWoher.value, kontaktweg: fWeg.value, live_zeiten: fZeiten.value,
        aktivitaet: fAktiv.value, potenzial: fPot.value,
        ...(fAbsage ? { absage_grund: fAbsage.value } : {}),
      });
      sp.disabled = false;
      if (r) await laden();
    });
    unten.append(sp);

    if (l.status !== 'abgelehnt' && l.status !== 'uebergeben') {
      const ab = el('button', 'knopf-still', 'Passt nicht');
      ab.type = 'button';
      ab.addEventListener('click', () => stufeSetzen(l, 'abgelehnt'));
      unten.append(ab);
    }
    const wg = el('button', 'knopf-still knopf-still--warn', 'Löschen');
    wg.type = 'button';
    wg.addEventListener('click', async () => {
      if (!await frageNach({
        titel: `„${l.name}“ aus der Pipeline entfernen?`,
        was: 'Der Lead verschwindet aus der Liste, samt Notizen und Verlauf.',
        bleibt: 'Andere Leads bleiben unberührt.',
        endgueltig: true, ja: 'Entfernen',
      })) return;
      if (await schicke('/workspace/api/leads/' + l.id, 'DELETE')) { offen.delete(l.id); await laden(); }
    });
    unten.append(wg);
    d.append(unten);

    k.append(d);
    return k;
  }

  async function stufeSetzen(l, status) {
    if (await schicke('/workspace/api/leads/' + l.id, 'PATCH', { status })) await laden();
  }

  async function onboarding(l, knopf) {
    if (!await frageNach({
      titel: `Aus „${l.name}“ einen Creator mit eigenem Zugang anlegen?`,
      was: 'Es entsteht ein Konto mit eigenem Zugangscode.',
      bleibt: 'Der Lead bleibt in der Pipeline stehen und wird als '
            + 'übernommen markiert.',
      ja: 'Creator anlegen',
    })) return;
    knopf.disabled = true;
    const r = await schicke('/workspace/api/leads/' + l.id + '/onboarding', 'POST', { name: l.name });
    knopf.disabled = false;
    if (!r) return;
    $('code-wert').textContent = r.code;
    $('code-schleier').hidden = false;
    $('code-zu').focus();
    await laden();
  }

  /* ---------- Zeichnen ----------------------------------------------------- */

  function zeichne() {
    const ziel = $('pipeline');
    ziel.textContent = '';
    ziel.setAttribute('aria-busy', 'false');

    const scout = $('f-scout').value;
    const liste = scout ? daten.filter((l) => String(l.scout_id) === scout) : daten;

    /* Follow-ups, die heute oder frueher faellig sind. */
    const fällig = liste.filter((l) => l.naechster_followup && l.naechster_followup <= heute
      && l.status !== 'uebergeben' && l.status !== 'abgelehnt');
    $('faellig').hidden = fällig.length === 0;
    const fl = $('faellig-liste');
    fl.textContent = '';
    for (const l of fällig) {
      const li = el('li');
      const b = el('button', 'faellig__knopf', l.name);
      b.type = 'button';
      b.addEventListener('click', () => {
        offen.add(l.id); zeichne();
        document.getElementById('lead-' + l.id)?.scrollIntoView({ block: 'center', behavior: window.sanft?.() || 'auto' });
      });
      li.append(b, el('span', 'kk__still', datum(l.naechster_followup)));
      fl.append(li);
    }

    if (!liste.length) {
      /* WOFUER IST DAS GUT? (Wunsch vom 01.09.2026)

         Vorher stand hier ein Satz, der nur wiederholte, was man
         ohnehin sieht: dass nichts da ist. Wer die Seite zum ersten
         Mal oeffnet, weiss danach immer noch nicht, warum es sie gibt.

         Der leere Zustand ist der EINZIGE Moment, in dem jemand
         garantiert liest, was dort steht -- spaeter ist die Flaeche
         von Daten belegt. Deshalb steht die Erklaerung genau hier und
         nicht in einer Hilfe, die niemand aufmacht.

         Erklaert wird der NUTZEN, nicht die Bedienung: nicht "hier
         klicken", sondern warum ein Scout ohne diese Liste Leute
         verliert. */
      const kasten = el('div', 'leer-hinweis leer-hinweis--erklaerung');

      kasten.append(el('p', 'erklaerung__satz',
        'Hier steht jeder, den ihr entdeckt habt – von der ersten Nachricht '
        + 'bis zur Übergabe an einen Manager.'));

      kasten.append(el('p', 'erklaerung__warum',
        'Wozu das gut ist: Ein Scout spricht viele an. Ohne Liste erinnert '
        + 'sich niemand, wer schon gefragt wurde, wer zugesagt hat und bei '
        + 'wem seit drei Wochen nichts passiert ist. Genau die gehen '
        + 'verloren – nicht die, die Nein sagen.'));

      /* Aus derselben Liste wie die Stufenkoepfe -- siehe STUFE_WAS.
         "Abgelehnt" bleibt hier weg: Die Einfuehrung beschreibt den
         Weg nach vorn, und eine Absage ist keine Stufe darauf. */
      const stufenListe = el('ol', 'erklaerung__stufen');
      for (const [nr, name, was] of [
        ['1', 'Neu', STUFE_WAS.neu],
        ['2', 'Angesprochen', STUFE_WAS.angesprochen],
        ['3', 'Gespräch', STUFE_WAS.gespraech],
        ['4', 'Interessiert', STUFE_WAS.interessiert],
        ['5', 'Übergeben', STUFE_WAS.uebergeben],
      ]) {
        const z = el('li', 'erklaerung__stufe');
        z.append(el('span', 'erklaerung__nr', nr));
        const t = el('div', null);
        t.append(el('strong', null, name));
        t.append(el('span', 'erklaerung__was', was));
        z.append(t);
        stufenListe.append(z);
      }
      kasten.append(stufenListe);

      kasten.append(el('p', 'erklaerung__fuss',
        'Zu jedem Kontakt gehört ein Datum für den nächsten Schritt. Ist es '
        + 'überfällig, erscheint der Kontakt auf deiner Startseite – du musst '
        + 'also nicht daran denken, die Seite denkt für dich.'));

      kasten.append(el('p', 'erklaerung__los',
        '„Neuer Kontakt“ oben rechts legt den ersten an.'));

      ziel.append(kasten);
      return;
    }

    for (const [wert, name] of Object.entries(stufen)) {
      const drin = liste.filter((l) => l.status === wert);
      if (!drin.length) continue;
      const gruppe = el('section', 'stufe');
      gruppe.dataset.stufe = wert;
      /* JEDE STUFE SAGT, WAS SIE BEDEUTET (11.09.2026).

         Die Erklaerung stand bisher nur im leeren Zustand -- also
         genau einmal, bevor der erste Kontakt da war, und danach nie
         wieder. Wer im Januar dazukommt, sieht sechs Ueberschriften und
         muss raten, was "Interessiert" von "Gespraech" unterscheidet.

         Der Satz steht deshalb an der Stufe selbst und wird aus
         derselben Liste gelesen wie der leere Zustand -- nicht aus
         einer zweiten. */
      const kopf = el('div', 'stufe__kopf');
      /* Die Nummer ist eine OPTISCHE Angabe: Sie macht aus sechs
         Ueberschriften einen Weg. Fuer die Sprachausgabe ist sie
         ueberfluessig -- dort steht die Reihenfolge ohnehin in der
         Reihenfolge, und „null eins" vor jeder Ueberschrift waere
         Laerm. Was die Stufe BEDEUTET, sagt `.stufe__was` in Worten. */
      const nr = el('span', 'stufe__nr', STUFE_NR[wert] || '—');
      nr.setAttribute('aria-hidden', 'true');
      kopf.append(nr);
      const kt = el('div', 'stufe__text');
      kt.append(el('h2', 'stufe__titel', name));
      if (STUFE_WAS[wert]) kt.append(el('p', 'stufe__was', STUFE_WAS[wert]));
      kopf.append(kt, el('span', 'stufe__zahl', String(drin.length)));
      gruppe.append(kopf);

      /* ====== LINKS NORMAL, RECHTS PREMIUM (06.10.2026) ==============

         Filipe: "ich will dass es da in der mitte eine trennung gibt.
         links sollen normale creator sein und rechts premium creator.
         es gibt bei tiktok nämlich diese zwei optionen von streamer."

         DIE TRENNUNG SITZT IN JEDER STUFE, nicht einmal ueber der
         ganzen Seite. Zwei komplette Pipelines nebeneinander haetten
         jede Stufenueberschrift zweimal gebraucht, und die beiden
         Seiten waeren nie auf gleicher Hoehe gewesen -- "Angesprochen"
         links auf Hoehe von "Interessiert" rechts. So bleibt die Stufe
         die Ueberschrift und die Art die Spalte darunter.

         DIE REIHENFOLGE KOMMT VOM SERVER (artenListe) und ist dort
         "normal, premium" -- links, rechts. Sie steht nicht zweimal da;
         waere sie hier noch einmal hingeschrieben, koennte eine der
         beiden Stellen gedreht werden und die Spalten wuerden
         vertauscht, ohne dass irgendetwas kaputtginge.

         EINE LEERE SPALTE BLEIBT STEHEN und sagt "noch niemand". Wer
         sie wegliesse, haette eine Stufe, die ploetzlich eine Spalte
         hat statt zwei -- und man wuesste nicht, ob da niemand ist oder
         ob die Trennung an dieser Stelle nicht gilt. Die Zahl im Kopf
         beantwortet es ohne Nachzaehlen. */
      const spalten = el('div', 'stufe__arten');
      for (const art of artenListe) {
        const inDieser = drin.filter((l) => (l.creator_art || 'normal') === art);
        const sp = el('section', 'art-spalte');
        sp.dataset.art = art;

        const spKopf = el('div', 'art-spalte__kopf');
        const spTitel = el('h3', 'art-spalte__titel', artName[art] || art);
        /* Die Ueberschrift benennt den Bereich fuer die Sprachausgabe --
           sonst liest sie zwei Kartenstapel vor, ohne zu sagen, welcher
           welcher ist. */
        spTitel.id = `art-spalte-${wert}-${art}`;
        sp.setAttribute('aria-labelledby', spTitel.id);
        spKopf.append(spTitel, el('span', 'art-spalte__zahl', String(inDieser.length)));
        sp.append(spKopf);

        const box = el('div', 'stufe__karten');
        if (!inDieser.length) box.append(el('p', 'art-spalte__leer', 'noch niemand'));
        for (const l of inDieser) {
          const k = karte(l);
          k.id = 'lead-' + l.id;
          box.append(k);
        }
        sp.append(box);
        spalten.append(sp);
      }
      gruppe.append(spalten);
      ziel.append(gruppe);
    }
  }

  async function laden() {
    try {
      const a = await hole('/workspace/api/leads');
      if (!a.ok) { melde('Pipeline konnte nicht geladen werden.'); return; }
      const d = await a.json();
      stufen = d.stufen; heute = d.heute; daten = d.leads;
      laenderListe = d.laender || []; landName = d.land_name || {};
      netzwerkListe = d.netzwerk || []; netzwerkName = d.netzwerk_name || {};
      /* Nur uebernehmen, wenn wirklich etwas kommt -- sonst stuende hier
         eine leere Liste und die Seite haette null Spalten statt zwei.
         `|| []` waere an dieser Stelle genau der stille Ausfall, den die
         Rueckfallliste oben verhindern soll. */
      if (Array.isArray(d.arten) && d.arten.length) artenListe = d.arten;
      if (d.art_name) artName = d.art_name;
      artwahlFuellen();
      zeichne();
    } catch { /* umgeleitet */ }
  }

  /* ---------- Neuer Kontakt ------------------------------------------------ */

  /* Die Auswahl im Anlege-Formular wird aus derselben Liste gefuellt wie
     die Spalten. In scouting.html stehen Normal und Premium zwar schon
     fest drin -- das ist die Vorgabe, damit das Feld auch vor der ersten
     Antwort bedienbar ist. Sobald der Server geantwortet hat, gilt
     seine Liste, und zwar auch dann, wenn dort eines Tages etwas anderes
     steht. Die bereits getroffene Wahl bleibt erhalten. */
  function artwahlFuellen() {
    const f = $('n-art');
    if (!f) return;
    const vorher = f.value;
    f.textContent = '';
    for (const w of artenListe) {
      const o = document.createElement('option');
      o.value = w; o.textContent = artName[w] || w;
      f.append(o);
    }
    f.value = artenListe.includes(vorher) ? vorher : (artenListe[0] || '');
  }

  $('neu-auf').addEventListener('click', () => {
    $('neu-block').hidden = false;
    $('neu-auf').hidden = true;
    $('n-name').focus();
  });
  $('neu-zu').addEventListener('click', () => {
    $('neu-block').hidden = true;
    $('neu-auf').hidden = false;
    $('neu-form').reset();
    $('n-fehler').textContent = '';
  });

  $('neu-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    $('n-fehler').textContent = '';
    const knopf = $('n-speichern');
    knopf.disabled = true;
    const a = await hole('/workspace/api/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: $('n-name').value, plattform: $('n-plattform').value,
        handle: $('n-handle').value, prioritaet: $('n-prio').value,
        creator_art: $('n-art').value,
        aktivitaet: $('n-aktivitaet').value, potenzial: $('n-potenzial').value,
        naechster_followup: $('n-followup').value,
        scout_id: $('n-scout').value || null,
        netzwerk: $('n-netzwerk').value, land: $('n-land').value,
        follower: $('n-follower').value,
      }),
    }).catch(() => null);
    knopf.disabled = false;
    if (!a) return;
    if (!a.ok) {
      $('n-fehler').textContent = sagWas((await a.json().catch(() => ({}))).fehler, 'Ging nicht.');
      return;
    }
    $('neu-zu').click();
    await laden();
  });

  /* ---------- Codefenster --------------------------------------------------- */

  $('code-zu').addEventListener('click', () => {
    $('code-schleier').hidden = true;
    $('code-wert').textContent = '—';
  });
  $('code-kopieren').addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText($('code-wert').textContent);
      $('code-kopieren').textContent = 'Kopiert ✓';
      setTimeout(() => { $('code-kopieren').textContent = 'Kopieren'; }, 2200);
    } catch { /* ohne Zwischenablage bleibt der Code lesbar stehen */ }
  });

  /* ---------- Start --------------------------------------------------------- */

  (async () => {
    try {
      const a = await hole('/workspace/api/ich');
      if (!a.ok) { location.assign('/workspace/'); return; }
      ich = await a.json();
    } catch {
      /* NICHT MEHR STUMM (20.09.2026). Hier stand `catch { return; }`
         -- und damit blieb die Seite bei jedem Netzaussetzer fuer
         immer auf "wird geladen …" stehen. Gemessen auf 13 von 21
         Seiten. `ladefehler()` sagt, was los ist, und bietet einen
         Knopf an, der es noch einmal versucht. */
      window.ladefehler?.();
      return;
    }
    if (ich.rolle === 'creator') { location.assign('/workspace/start.html'); return; }
    window.werZeigen?.(ich);

    if (LEITUNG.has(ich.rolle)) {
      $('unterzeile').textContent = 'Gesamtübersicht über alle Scouts.';
      try {
        const { scouts } = await (await hole('/workspace/api/leads-scouts')).json();
        for (const s of scouts) {
          for (const wo of [$('f-scout'), $('n-scout')]) {
            const o = document.createElement('option');
            o.value = String(s.id); o.textContent = s.name;
            wo.append(o);
          }
        }
        $('scoutwahl-block').hidden = false;
        $('n-scout-block').hidden = false;
      } catch { return; }
      $('f-scout').addEventListener('change', zeichne);
    } else {
      $('unterzeile').textContent = 'Deine Pipeline – nur du und DogFather sehen sie.';
    }

    await laden();
  })();
})();