dogfather-universe/server/bild-kampagne.mjs

/* Bild und Mass des Kastens „Kampagne aus einer Einladung" (07.10.2026)

   Etappe 4 des Bauplans. Die Zahlen sind gruen (pruef-kampagne, 94
   Pruefungen) -- das sagt, dass der Weg stimmt, aber nicht, wie es
   AUSSIEHT und ob man es mit dem Daumen treffen kann.

   GEMESSEN WIRD AUF 412 UND 1280 PIXEL. Das sind nicht zwei beliebige
   Breiten: An genau diesen beiden ist die Kopfleiste dieses Hauses am
   06.09.2026 zweimal an einem Tag gebrochen -- 412 px ist die
   haeufigste Android-Breite, 1280 px die schmalste, auf der die Seite
   als „Rechner" gilt. Wer nur bei 1400 nachsieht, sieht beides nicht.

   UND AUGENSCHONUNG WIRD GEMESSEN, NICHT ANGENOMMEN: Kontrast des
   Hinweistextes, und dass bei `prefers-reduced-motion` keine Bewegung
   laeuft.

   Aufrufen mit:  node server/bild-kampagne.mjs
*/
import { mkdtempSync, rmSync, readFileSync } from "node:fs";
import { brotliDecompressSync } from "node:zlib";
/* DER ECHTE LESER (07.10.2026) -- damit auf dem Bild eine Kampagne
   steht, die wirklich so auf tiktok.com stand, und keine nachgebaute.
   Ohne Netz: Die Seite liegt als Datei in server/pruefdaten und wird
   von pruef-kampagne-lesen.mjs an ihrer Pruefsumme festgehalten. */
import { leseKampagne, regelnText, aufgabenText } from "./kampagne-lesen.mjs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { notbremse } from "./helfer-notbremse.mjs";
notbremse(240_000, "bild-kampagne");

const ordner = mkdtempSync(join(tmpdir(), "ws-kmpbild-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
const { portMussFreiSein } = await import("./helfer-port.mjs");
const PORT = await portMussFreiSein(4338, "das Bildwerkzeug Kampagne");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) {
  return ec.call(this, n, w, { ...(o || {}), secure: false });
};
await import("./index.js");
await new Promise((r) => setTimeout(r, 1200));
/* WARUM HIER 127.0.0.1 STEHT UND NICHT DIE AGENTURWAND
   (gemessen und wieder zurueckgebaut, 07.10.2026).

   Versucht wurde beides. Der Host-Kopf laesst sich in Chromium
   nicht ueberschreiben (gemessen: /api/ich meldete weiter
   `darf: false`, der Wirt blieb "127.0.0.1"), und laesst man den
   Namen wirklich aufloesen, kommt die Anmeldemaske der echten Wand
   -- mit einer Tuer davor, die dieses Werkzeug nicht aufmachen
   soll. Gemessen werden soll die KACHEL, nicht der Zugang.

   Deshalb bleibt es bei der Pruefadresse. Dort vergibt
   `sitzungLesen` bewusst KEIN Haus (24.09.2026), und `/api/ich`
   fragt genau deshalb `haus !== "crew"` statt `=== "agentur"`:
   Der Kasten ist hier sichtbar und damit messbar.

   Dass er auf der CREW-Adresse verschwindet, misst
   pruef-kampagne mit echten Host-Koepfen -- das geht ohne
   Browser und ist dort besser aufgehoben. */const BASIS = `http://127.0.0.1:${PORT}`;

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
for (let i = 0; i < 60; i++) {
  try {
    const p = new DatabaseSync(process.env.WORKSPACE_DB);
    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
  } catch { await new Promise((r) => setTimeout(r, 250)); }
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const j = new Date().toISOString();
function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64,
    { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen (name,rolle,code_hash,code_salt,code_n,aktiv,erstellt)"
    + " VALUES (?,?,?,?,?,1,?)").run(name, rolle, hash, salt, 32768, j);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idDogi = anlegen("Filipe", "admin", "CODE-DOGI-0001");
anlegen("Luna", "creator", "CODE-CREA-0001");

/* ZWEI KACHELN, EINE JE SEITE DER TRENNUNG.

   Die linke traegt eine `kampagne_id` -- genau daran, und nur daran,
   haengt die Trennung. Die rechte hat keine; sie ist ein Event, das
   die Agentur selbst angelegt hat.

   ALLE DATEN RELATIV ZU HEUTE. Ein festes Datum waere gruen, bis der
   Kalender es einholt. */
const tagHin = (v) => {
  const x = new Date(Date.now() + v * 86400_000);
  const z = (n) => String(n).padStart(2, "0");
  return `${x.getFullYear()}-${z(x.getMonth() + 1)}-${z(x.getDate())}`;
};
function event(titel, text, von, bis, auf, reg, kampagneId, daten) {
  d.prepare(`INSERT INTO eintraege
      (bereich, art, titel, text, datum, event_ende, event_aufgaben, event_regeln,
       dringlichkeit, status, nur_leitung, erstellt, erstellt_von, haus, kampagne_id,
       kampagne_daten)
     VALUES ('agentur','kampagne',?,?,?,?,?,?,?,'offen',0,?,?,NULL,?,?)`)
    .run(titel, text, von, bis, auf, reg,
      bis < tagHin(7) ? "hoch" : "mittel", j, idDogi, kampagneId,
      daten === undefined || daten === null ? null : JSON.stringify(daten));
}

/* ==== EINE ECHTE KAMPAGNE, NICHT EINE NACHGEBAUTE (07.10.2026) ==

   Die uebrigen Kacheln hier sind von Hand getippt, und das ist fuer
   ihren Zweck richtig: kurze, berechenbare Daten fuer Abstaende und
   Toene. Fuer die Gliederung taugt das nicht. „KAMPAGNENZEITPLAN"
   mit zwei Zeilen zeigt weder Geschenke mit Coinpreis noch
   Unterabschnitte noch einen Steckbrief -- also waere auf dem Bild
   nichts von dem zu sehen, worum es Filipe ging.

   Deshalb geht EINE Kachel durch den echten Leser: dieselbe
   gespeicherte Seite, die pruef-kampagne-lesen.mjs an ihrer
   Pruefsumme festhaelt. Was auf dem Bild steht, hat damit wirklich
   auf tiktok.com gestanden.

   KEIN NETZ: Die Seite liegt als Datei in server/pruefdaten. */
const echteSeite = brotliDecompressSync(
  readFileSync(new URL("./pruefdaten/kampagne-gipfelstuermer.html.br", import.meta.url)))
  .toString("utf8");
const echt = leseKampagne(echteSeite);
event("LIVE Glow Up", "Eine vierwöchige Wachstums-Challenge für deine LIVEs.",
  tagHin(-9), tagHin(-1),
  "Deine täglichen LIVE Missionen\nDeine wöchentliche Missionen",
  "KAMPAGNENZEITPLAN\n· Woche 1: 5. - 11.10.\n· Woche 2: 12. - 18.10.",
  "7690927903777262344");
/* LAEUFT (frueher: vorbei). So steht sie in der offenen Gruppe und
   ist auf dem Bild zu sehen. „LIVE Glow Up" uebernimmt dafuer den
   Zustand „vorbei" -- die drei Zustaende bleiben also vertreten,
   und die Tonmessung weiter unten misst weiterhin drei
   verschiedene. */
event("Gipfelstürmer", echt.kuer.einleitung || "Bereit für Alpen-Vibes in deinem LIVE?",
  tagHin(-3), tagHin(10),
  aufgabenText(echt.kuer), regelnText(echt.kuer, echt.hinweise),
  "7691493175936699143", echt.auszug);
event("Spicy Media Teamabend", "Unser eigener Abend — Rückblick und Planung.",
  tagHin(3), tagHin(3),
  "Pünktlich um 20 Uhr da sein\nEinen Punkt für die Runde mitbringen",
  "ABLAUF\n· 20:00 Rückblick\n· 21:00 Planung", null);
event("Oktober-Aktion der Agentur", "Zusätzliche Prämien für das Team.",
  tagHin(1), tagHin(21),
  "20 LIVE-Stunden\n50.000 Diamanten",
  "PRÄMIEN\n· Platz 1: 200 €", null);
d.close();

const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await pw.chromium.launch();
const fehlerAufSeite = [];


/** Den Einlesekasten aufmachen, falls er zu ist.
 *
 *  Seit dem 08.10.2026 steht er von sich aus zu -- er war auf
 *  412 px auf 521 px gewachsen, mehr als ein halber
 *  Telefonbildschirm vor der ersten Kachel. Jede Stelle, die
 *  seinen INHALT braucht, muss ihn also erst oeffnen.
 *
 *  AN EINER STELLE, NICHT DREIMAL ABGESCHRIEBEN: Beim ersten
 *  Versuch stand das Oeffnen nur oben bei der Messung, und die
 *  zwei `fill()` weiter unten liefen in eine 30-Sekunden-Frist --
 *  mit einer Meldung ueber ein Textfeld, das es laut Fehlertext
 *  sehr wohl gab. Das ist die unangenehme Sorte Fehlschlag: Er
 *  sagt die Wahrheit und fuehrt trotzdem in die Irre. */
const kastenAufmachen = async (seite) => {
  const schild = await seite.$("#kampagne-schild");
  if (!schild) return false;
  const zu = await seite.evaluate(() =>
    document.getElementById("kampagne-form")?.hidden === true);
  if (!zu) return true;
  await schild.click();
  await seite.waitForTimeout(250);
  return true;
};

const anmelden = async (seite, rolle, code) => {
  await seite.goto(BASIS + "/workspace/", { waitUntil: "networkidle" });
  await seite.click(`.rolle[data-rolle="${rolle}"]`);
  await seite.fill("#code", code);
  /* DEN KNOPF DIREKT AUSLOESEN, nicht ueber die Maus.

     page.click wartet darauf, dass das Element "visible, enabled and
     stable" ist -- und auf der echten Agenturwand lief es dort in die
     30-Sekunden-Frist. Die Anmeldeseite bewegt sich dauerhaft (die
     Buehne atmet), also wird "stable" nie erreicht. Auf 127.0.0.1 war
     das nie aufgefallen, weil dort eine andere Szene laeuft.

     Gemessen wird hier die KACHEL, nicht die Anmeldemaske -- der
     direkte Klick ist deshalb kein Umgehen einer Pruefung, sondern
     der Weg zum eigentlichen Messgegenstand. */
  await seite.$eval("button[type=submit]", (b) => b.click());
  await seite.waitForURL("**/start.html", { timeout: 25000 });
};

/** Der Kontrast zweier Farben nach WCAG. Gerechnet, nicht geschaetzt. */
const leuchte = ([r, g, b]) => {
  const f = (c) => { const x = c / 255; return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4; };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
};
const kontrast = (a, b) => {
  const [x, y] = [leuchte(a), leuchte(b)].sort((p, q) => q - p);
  return (x + 0.05) / (y + 0.05);
};
const farbe = (s) => {
  const m = /rgba?\(([^)]+)\)/.exec(s || "");
  if (!m) return null;
  const t = m[1].split(",").map((x) => parseFloat(x));
  return [t[0], t[1], t[2]];
};

let fehler = 0;
let geprueft = 0;
const ok = (b, t) => { geprueft++; console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

async function messen(breite, hoehe, name) {
  const ctx = await browser.newContext({
    viewport: { width: breite, height: hoehe },
    deviceScaleFactor: 2,
    hasTouch: breite < 700, isMobile: breite < 700,
  });
  const seite = await ctx.newPage();
  seite.on("console", (m) => { if (m.type() === "error") fehlerAufSeite.push(m.text()); });
  seite.on("pageerror", (f) => fehlerAufSeite.push(String(f)));
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1600);

  console.log(`\n=== ${name} (${breite} px) ===`);
  const ichSagt = await seite.evaluate(async () => {
    const a = await fetch("/workspace/api/ich", { credentials: "same-origin" });
    const j = await a.json().catch(() => ({}));
    return { rolle: j.rolle, darf: j.darf_kampagne_einlesen, wirt: location.host };
  });
  console.log("  /api/ich: " + JSON.stringify(ichSagt));

  /* ERST AUFKLAPPEN (08.10.2026).

     Der Kasten steht seit heute zu -- er war auf 412 px auf 521 px
     gewachsen, mehr als ein halber Telefonbildschirm vor der ersten
     Kachel. Gemessen werden soll trotzdem der INHALT: Textfeld,
     Knopf, Kontrast, Tippziele. Zugeklappt haben die alle die Hoehe
     null, und die Messung meldete einen Schaden, wo keiner ist.

     DASS ER ZUGEHT, MISST pruef-eventkarte (Abschnitt 4c) -- dort
     gehoert es hin, zusammen mit dem Rest der Bedienung. Hier geht
     es um das Aussehen des offenen Kastens. */
  await kastenAufmachen(seite);

  const mass = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    if (!k || k.hidden) return { da: false };
    /* EIN FEHLENDES ELEMENT GIBT NULLEN, KEINEN ABSTURZ
       (berichtigt 08.10.2026). Vorher warf `r(null)` mitten in der
       Messung, und der ganze Lauf endete mit „unbehandelter
       Fehler" -- ohne zu sagen, WELCHES Element fehlte. Nullen
       machen die Zusicherung darunter rot und nennen dabei den
       Namen. Ein Fehlschlag ist rot und steht da; ein Absturz
       sieht aus wie ein kaputtes Werkzeug. */
    const r = (e) => {
      if (!e) return { x: 0, y: 0, b: 0, h: 0, fehlt: true };
      const b = e.getBoundingClientRect();
      return { x: Math.round(b.x), y: Math.round(b.y),
        b: Math.round(b.width), h: Math.round(b.height) };
    };
    const feld = document.getElementById("kampagne-text");
    const knopf = document.getElementById("kampagne-holen");
    const sagt = document.getElementById("kampagne-sagt");
    /* DIE UEBERSCHRIFT IST SEIT DEM 08.10.2026 DAS KLAPPSCHILD.
       `.kampagneholen__titel` gibt es nicht mehr -- der `<h2>` ist
       ein `<button>` geworden, weil man ihn jetzt druecken kann.
       Die Messung sucht deshalb das Schild; faellt auch das weg,
       gibt `r()` keinen Fehler mehr, sondern Nullen, und die
       Zusicherungen unten werden rot statt den Lauf abzubrechen. */
    const titel = k.querySelector(".kampagneholen__schildwort")
      || k.querySelector(".kampagneholen__schild");
    const st = getComputedStyle(sagt);
    return {
      da: true,
      kasten: r(k), feld: r(feld), knopf: r(knopf), sagt: r(sagt), titel: r(titel),
      knopfText: knopf.textContent.trim(),
      sagtText: sagt.textContent.trim(),
      textFarbe: st.color,
      kastenFarbe: getComputedStyle(k).backgroundColor,
      seitenFarbe: getComputedStyle(document.body).backgroundColor,
      schrift: st.fontSize,
      /* Ueberdeckt etwas den Knopf? Nicht gerechnet, sondern gefragt:
         Was liegt an seinem Mittelpunkt wirklich obenauf? */
      obenAufKnopf: (() => {
        /* ERST IN DEN BLICK HOLEN (berichtigt 08.10.2026).

           `elementFromPoint` fragt das SICHTFENSTER, nicht die
           Seite: Was darunter liegt, gibt `null`. Seit der Kasten
           die Seitenwahl und den Bildweg traegt, ist er auf 412 px
           hoeher als das Fenster -- und die Pruefung meldete
           „nichts liegt auf dem Knopf“ als Schaden, obwohl der
           Knopf nur weiter unten stand.

           Die Frage bleibt dieselbe und bleibt wichtig: Am
           06.09.2026 lag der Sicht-Umschalter quer ueber dem
           Chat-Knopf. Nur muss man dafuer hinsehen, wo er ist. */
        knopf.scrollIntoView({ block: "center" });
        const b = knopf.getBoundingClientRect();
        const e = document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2);
        return e ? (e.id || e.className || e.tagName) : null;
      })(),
      ueberlauf: k.scrollWidth > document.documentElement.clientWidth + 1,
    };
  });

  ok(mass.da, "der Kasten ist da");
  if (!mass.da) { await ctx.close(); return; }

  console.log(`  Kasten  x=${mass.kasten.x} b=${mass.kasten.b} h=${mass.kasten.h}`);
  console.log(`  Titel   „${"Kampagne aus einer Einladung anlegen"}"  h=${mass.titel.h}`);
  console.log(`  Feld    x=${mass.feld.x} b=${mass.feld.b} h=${mass.feld.h}`);
  console.log(`  Knopf   x=${mass.knopf.x} b=${mass.knopf.b} h=${mass.knopf.h}  „${mass.knopfText}"`);
  console.log(`  Hinweis x=${mass.sagt.x} b=${mass.sagt.b} h=${mass.sagt.h}`);

  /* 44 PIXEL. Die Zahl aus pruef-handy-teamdogi: Darunter trifft ein
     Daumen nicht verlaesslich. Am 07.10.2026 lagen fuenf Flaechen in
     diesem Haus bei 40 und wurden genau deshalb gezogen. */
  ok(mass.knopf.h >= 44, `der Knopf ist ${mass.knopf.h} px hoch (mindestens 44)`);
  ok(mass.feld.b > 120, `das Textfeld ist ${mass.feld.b} px breit -- kein Schlitz`);
  /* WIE VIEL PLATZ FRISST DER KASTEN? (08.10.2026)

     Er ist seit dem 07.10. um die Seitenwahl und seit dem 08.10.
     um den Bildweg gewachsen -- auf 412 px gemessen 539 px, also
     mehr als ein halber Telefonbildschirm, bevor man die erste
     Kachel sieht. Die Grenze steht hier, damit das naechste
     Stueck nicht unbemerkt dazukommt: Eine feste Zahl, die
     mitwaechst, ist keine Grenze (CLAUDE.md, 06.09.2026). */
  /* WIE VIEL PLATZ FRISST DER OFFENE KASTEN?

     Er ist seit dem 07.10. um die Seitenwahl und seit dem 08.10. um
     den Bildweg gewachsen -- auf 412 px gemessen 521 px. Seitdem
     steht er zu (siehe oben); AUFGEKLAPPT darf er trotzdem nicht
     beliebig wachsen, sonst ist das Aufklappen ein Sprung ins
     Nichts. Die Grenze steht hier, damit das naechste Stueck nicht
     unbemerkt dazukommt: Eine feste Zahl, die mitwaechst, ist keine
     Grenze (CLAUDE.md, 06.09.2026). */
  const grenze = breite <= 560 ? 560 : 420;
  ok(mass.kasten.h <= grenze,
    `der offene Kasten bleibt bei ${mass.kasten.h} px `
    + `(hoechstens ${grenze} auf ${breite} px)`);
  ok(mass.feld.h >= 72, `und ${mass.feld.h} px hoch, also mehrzeilig`);

  /* NICHTS LIEGT AUF DEM KNOPF. Am 06.09.2026 lag der Sicht-Umschalter
     quer ueber dem Chat-Knopf: Wer auf „Meine Sicht" tippte, landete
     im Chat -- auf zwoelf Seiten. */
  ok(String(mass.obenAufKnopf).includes("kampagne-holen"),
    `am Mittelpunkt des Knopfes liegt der Knopf (${mass.obenAufKnopf})`);

  ok(!mass.ueberlauf, "der Kasten laeuft nicht aus der Seite heraus");

  /* BRICHT ES UM, WENN DER PLATZ NICHT REICHT? Keine feste Schwelle,
     sondern `flex-wrap` -- gemessen daran, ob Knopf und Hinweis bei
     412 px untereinander stehen. */
  const nebeneinander = Math.abs(mass.knopf.y - mass.sagt.y) < 10;
  console.log(`  Knopf und Hinweis ${nebeneinander ? "nebeneinander" : "untereinander"}`);

  /* AUGENSCHONEND, GERECHNET. */
  const vorn = farbe(mass.textFarbe);
  const hinten = farbe(mass.kastenFarbe)?.[0] !== undefined
    && farbe(mass.kastenFarbe) || farbe(mass.seitenFarbe);
  if (vorn && hinten) {
    const k = kontrast(vorn, hinten);
    ok(k >= 4.5, `Kontrast des Hinweises ${k.toFixed(2)}:1 (mindestens 4,5)`);
  } else {
    ok(false, `Farben nicht messbar: ${mass.textFarbe} auf ${mass.kastenFarbe}`);
  }
  ok(parseFloat(mass.schrift) >= 13,
    `Schriftgroesse ${mass.schrift} (mindestens 13 px)`);

  const kasten = await seite.$("#kampagneholen");
  await kasten.screenshot({ path: `server/bild-kampagne-${breite}.png` });

  /* UND WIE ES WAEHREND DES HOLENS AUSSIEHT. */
  await seite.evaluate(() => {
    document.getElementById("kampagne-form").dataset.laeuft = "ja";
    document.getElementById("kampagne-sagt").textContent = "Wird geholt …";
  });
  await seite.waitForTimeout(300);
  await kasten.screenshot({ path: `server/bild-kampagne-${breite}-laeuft.png` });

  await ctx.close();
}

await messen(1280, 900, "Am Rechner, schmalste Rechnerbreite");
await messen(412, 915, "Auf dem Handy, haeufigste Android-Breite");

/* ---- Keine Bewegung, wenn jemand keine will -------------------------- */
{
  const ctx = await browser.newContext({
    viewport: { width: 412, height: 915 }, deviceScaleFactor: 2,
    hasTouch: true, isMobile: true, reducedMotion: "reduce",
  });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1200);
  const ruht = await seite.evaluate(() => {
    const f = document.getElementById("kampagne-form");
    f.dataset.laeuft = "ja";
    const s = getComputedStyle(document.getElementById("kampagne-sagt"));
    return { animation: s.animationName, dauer: s.animationDuration };
  });
  console.log("\n=== Wer keine Bewegung will ===");
  ok(ruht.animation === "none" || ruht.dauer === "0s",
    `keine Bewegung bei prefers-reduced-motion (${ruht.animation}, ${ruht.dauer})`);
}

/* ---- SAGT DER KASTEN, WARUM ES NICHT GING? -------------------------

   Am 07.10.2026 stand bei Filipe im Kasten "Ging nicht." -- der
   Ersatztext. Im Protokoll des Servers stand dagegen der genaue
   Grund. Zwischen beiden liegt die ganze Frage, ob jemand weiss, was
   zu tun ist.

   GEMESSEN WIRD HIER DER ECHTE WEG: Auf einer Pruefadresse hat die
   Sitzung kein Haus, die Route lehnt deshalb mit 403 und einem
   ganzen deutschen Satz ab. Genau dieser Satz muss im Kasten
   stehen -- nicht "Ging nicht.".

   Das ist kein Umweg: Jede Fehlermeldung dieser Route geht
   denselben Weg (res.status(...).json({ fehler })). Wer hier
   ankommt, kommt ueberall an. */
{
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);

  await kastenAufmachen(seite);
  await seite.fill("#kampagne-text",
    "Dein Creator Network lädt dich ein: https://www.tiktok.com/t/ZSbqPsFa8/");
  await seite.$eval("#kampagne-holen", (b) => b.click());
  /* Auf eine ANTWORT warten, nicht auf eine feste Zeit: Ein fester
     Wert waere hier dieselbe Rechnung von gestern wie ueberall. */
  await seite.waitForFunction(
    () => document.getElementById("kampagne-sagt").textContent.trim() !== "Wird geholt …",
    { timeout: 25000 }).catch(() => {});

  const gezeigt = await seite.evaluate(() => ({
    text: document.getElementById("kampagne-sagt").textContent.trim(),
    knopfFrei: !document.getElementById("kampagne-holen").disabled,
  }));
  console.log("\n=== Was der Kasten nach einem Fehlschlag sagt ===");
  console.log("  gezeigt: " + JSON.stringify(gezeigt.text));

  ok(gezeigt.text !== "Ging nicht.",
    "der Kasten zeigt NICHT den Ersatztext");
  ok(gezeigt.text.length > 25 && /[.!]$/.test(gezeigt.text),
    `sondern einen ganzen Satz (${gezeigt.text.length} Zeichen)`);
  ok(/Agentur|workspace\.dogfather/i.test(gezeigt.text),
    "der den Grund nennt und sagt, was zu tun ist");
  ok(gezeigt.knopfFrei, "und der Knopf ist wieder frei");

  /* UND DER FALL, DER FILIPE GETROFFEN HAT: HTTP 502.

     Der 403 oben beweist, dass der Weg grundsaetzlich traegt. Die
     Meldung, die bei ihm verschwand, war aber ein 502 -- und ein
     502 kommt in diesem Haus durch einen anderen Flaschenhals
     (Vorbau, Dienst). Deshalb wird er hier EINZELN nachgestellt:
     window.holen gibt eine fertige 502-Antwort zurueck, genau so,
     wie der Server sie schickt. Zeigt der Kasten dann den Satz,
     liegt es nicht am Browsercode.

     Nachgestellt wird die ANTWORT, nicht der Fehler -- damit misst
     diese Zeile genau eine Sache und nicht nebenbei TikTok. */
  await seite.evaluate(() => {
    const echt = window.holen;
    window.holen = async (pfad, o) => {
      if (!String(pfad).includes("/kampagne/einlesen")) return echt(pfad, o);
      return new Response(JSON.stringify({
        fehler: "Die Seite konnte nicht gelesen werden: "
          + "__MODERN_ROUTER_DATA__ fehlt in der Seite. "
          + "Vermutlich hat TikTok die Seite umgebaut.",
      }), { status: 502, headers: { "Content-Type": "application/json" } });
    };
  });
  await kastenAufmachen(seite);
  await seite.fill("#kampagne-text", "https://www.tiktok.com/t/ZSbqPsFa8/");
  await seite.$eval("#kampagne-holen", (b) => b.click());
  await seite.waitForFunction(
    () => document.getElementById("kampagne-sagt").textContent.trim() !== "Wird geholt …",
    { timeout: 20000 }).catch(() => {});
  const beiFuenfNullZwei = (await seite.evaluate(
    () => document.getElementById("kampagne-sagt").textContent.trim()));
  console.log("  bei HTTP 502: " + JSON.stringify(beiFuenfNullZwei));
  ok(beiFuenfNullZwei !== "Ging nicht."
    && /MODERN_ROUTER_DATA/.test(beiFuenfNullZwei),
    "auch ein 502 zeigt den Satz des Servers, nicht den Ersatztext");
  await ctx.close();
}

/* ---- DIE TRENNUNG: LINKS TIKTOK, RECHTS DIE AGENTUR ---------------- */
for (const [breite, name] of [[1400, 'Am Rechner'], [412, 'Auf dem Handy']]) {
  const ctx = await browser.newContext({
    viewport: { width: breite, height: breite < 700 ? 1500 : 1300 },
    deviceScaleFactor: 2, hasTouch: breite < 700, isMobile: breite < 700,
  });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1800);

  console.log(`\n=== Trennung, ${name} (${breite} px) ===`);
  const mass = await seite.evaluate(() => {
    const t = document.querySelector(".kv-trennung");
    if (!t) return { da: false };
    const r = (e) => { const b = e.getBoundingClientRect();
      return { x: Math.round(b.x), b: Math.round(b.width) }; };
    const seiten = [...t.querySelectorAll(".kv-seite")].map((s) => ({
      seite: s.dataset.seite,
      titel: s.querySelector(".kv-seite__titel")?.firstChild?.textContent?.trim(),
      zahl: s.querySelector(".kv-seite__zahl")?.textContent?.trim(),
      ...r(s),
      ton: getComputedStyle(s).getPropertyValue("--kv-ton").trim(),
      karten: [...s.querySelectorAll(".eintrag-karte")].map((k) => {
        const st = getComputedStyle(k);
        return {
          titel: k.querySelector(".eintrag-karte__titel, h3, h2")?.textContent?.trim()?.slice(0, 28),
          ton: st.getPropertyValue("--ton").trim(),
          /* ZWEI TOENE, ZWEI KANAELE (siehe die Begruendung bei der
             Pruefung unten): `--ton` sagt den ZUSTAND, `--kv-ton`
             die SEITE. Gemessen werden beide, sonst kann die
             Pruefung sie nicht auseinanderhalten. */
          kvTon: st.getPropertyValue("--kv-ton").trim(),
          stand: k.dataset.event || null,
          /* Und ob der Seitenton wirklich GEZEICHNET wird. Ein
             Merkmal, das gesetzt ist, aber nichts malt, ist keine
             Auskunft -- derselbe Fehler wie beim Farbpunkt am
             07.10.2026, der 10 statt 22 px breit war. */
          bild: st.backgroundImage.slice(0, 200),
        };
      }),
    }));
    const kopfA = t.querySelector('.kv-seite[data-seite="tiktok"] .kv-seite__titel');
    const zahlA = t.querySelector('.kv-seite[data-seite="tiktok"] .kv-seite__zahl');
    return {
      da: true, seiten,
      nebeneinander: seiten.length === 2 && seiten[0].x + seiten[0].b <= seiten[1].x + 2,
      abstandWortZahl: kopfA && zahlA
        ? Math.round(zahlA.getBoundingClientRect().left
          - kopfA.getBoundingClientRect().right) : null,
      rest: [...document.querySelectorAll(".kv-rest .eintrag-karte")].length,
    };
  });
  ok(mass.da, "die Trennung ist da");
  if (!mass.da) { await ctx.close(); continue; }
  for (const s of mass.seiten) {
    console.log(`  ${String(s.seite).padEnd(8)} x=${String(s.x).padStart(4)} b=${String(s.b).padStart(4)}`
      + ` ${String(s.titel).padEnd(16)} ${s.zahl}  Ton ${s.ton}`);
    for (const k of s.karten) console.log(`      ${String(k.titel).padEnd(30)} --ton ${k.ton}`);
  }
  ok(mass.seiten.length === 2,
    `zwei Seiten (${mass.seiten.map((s) => s.seite).join(" | ")})`);
  ok(mass.seiten[0].seite === "tiktok" && mass.seiten[1].seite === "agentur",
    "links TikTok, rechts die Agentur");
  ok(mass.seiten[0].ton !== mass.seiten[1].ton,
    `jede Seite hat ihren eigenen Ton (${mass.seiten[0].ton} / ${mass.seiten[1].ton})`);
  /* ==== ZWEI TOENE, ZWEI KANAELE (berichtigt 07.10.2026) =======

     HIER STAND `k.ton === s.ton` -- „jede Kachel traegt den Ton
     ihrer Seite". Diese Zeile war ROT, und zwar schon vor dem
     heutigen Umbau: Am 07.10.2026 wurde bewusst entschieden, dass
     die Kachel den Ton ihres ZUSTANDS traegt (laeuft gruen, kommt
     blau, vorbei stumpf) und die SEITE eine eigene Kante links
     bekommt. Die Pruefung hier wurde dabei nicht mitgezogen und
     widersprach seitdem dem eigenen Entwurf.

     SIE IST NIEMANDEM AUFGEFALLEN, weil nach dem Lauf nur die
     Zahl der Messungen notiert wurde („53 Messungen") und nicht
     die Zahl der Fehler. Genau davor warnt CLAUDE.md seit dem
     28.08.2026 -- und diesmal hat es nicht die Zahl der Pruefungen
     getroffen, sondern die der Fehler. Beides gehoert verglichen.

     WARUM DER ZUSTAND GEWINNT: Ob etwas LAEUFT oder VORBEI ist,
     entscheidet, ob man heute etwas tut. Woher es kommt, steht
     ohnehin zweimal da -- in der Spaltenueberschrift und auf dem
     Herkunftsschild der Kachel.

     GEPRUEFT WIRD JETZT BEIDES, getrennt: der Zustandston am
     `data-event` der Kachel, der Seitenton daran, dass er bis zur
     Kachel durchkommt UND dort wirklich gezeichnet wird. */
  const ZUSTAND_TON = {
    laeuft: "#cace02", kommt: "#5b8fd4", vorbei: "#6b7686",
  };
  const alleKarten = mass.seiten.flatMap((s) =>
    s.karten.map((k) => ({ ...k, seitenTon: s.ton })));
  ok(alleKarten.length >= 2,
    `${alleKarten.length} Kacheln in den Spalten (sonst misst das Folgende nichts)`);
  const falscheToene = alleKarten.filter((k) =>
    ZUSTAND_TON[k.stand] && k.ton.toLowerCase() !== ZUSTAND_TON[k.stand]);
  ok(falscheToene.length === 0,
    `jede Kachel traegt den Ton ihres ZUSTANDS `
    + `(${alleKarten.map((k) => `${k.stand}=${k.ton}`).join(", ")})`);
  /* GEGENPROBE: Die Toene sind nicht alle gleich -- sonst waere
     „jeder Zustand hat einen eigenen" bei einer einzigen Farbe
     auch gruen. */
  ok(new Set(alleKarten.map((k) => k.ton)).size >= 2,
    `und verschiedene Zustaende verschiedene Toene `
    + `(${[...new Set(alleKarten.map((k) => k.ton))].join(" / ")})`);

  /* DER SEITENTON KOMMT BIS ZUR KACHEL ... */
  ok(alleKarten.every((k) => k.kvTon === k.seitenTon),
    `der Seitenton erbt bis in jede Kachel `
    + `(${alleKarten.map((k) => k.kvTon).join(", ")})`);
  /* ... UND WIRD DORT GEZEICHNET. `--kv-ton` gesetzt zu haben,
     heisst noch nicht, dass man etwas sieht: Der Verlauf fuer die
     Kante links steht in `background-image`, und wenn die Regel
     dafuer ausfaellt (etwa weil ein Direktkind-Selektor nach einem
     Umbau nicht mehr greift), ist das Merkmal da und die Kante
     weg. Geprueft wird deshalb der GEZEICHNETE Verlauf. */
  const mitKante = alleKarten.filter((k) => /gradient/.test(k.bild || ""));
  ok(mitKante.length === alleKarten.length,
    `und jede Kachel zeichnet ihre Kante wirklich `
    + `(${mitKante.length} von ${alleKarten.length})`);
  if (breite >= 820) {
    ok(mass.nebeneinander, "sie stehen nebeneinander");
    ok(Math.abs(mass.seiten[0].b - mass.seiten[1].b) <= 2,
      `gleich breit (${mass.seiten[0].b} / ${mass.seiten[1].b})`);
  } else {
    ok(!mass.nebeneinander,
      "auf dem Handy untereinander, keine gequetschte Spalte");
    ok(mass.seiten.every((s) => s.b > 300), `${mass.seiten[0].b} px breit`);
  }
  ok(mass.abstandWortZahl !== null && mass.abstandWortZahl < 80,
    `die Zahl steht neben ihrem Wort (${mass.abstandWortZahl} px)`);
  ok(mass.rest === 0, `nichts Fremdes unter der Trennung (${mass.rest})`);

  /* GREIFEN DIE NEUEN REGELN WIRKLICH? (07.10.2026)

     Beim Bauen zielte eine davon auf `.ev-stand__punkt` -- eine
     Klasse, die es in diesem Haus gar nicht gibt. Sie war still
     wirkungslos, genau wie die drei, vor denen module.css warnt,
     und waere es geblieben: Ein Bild sagt nicht, ob etwas pulsiert.

     Gemessen wird deshalb der ERRECHNETE Stil, nicht der
     geschriebene. */
  const regeln = await seite.evaluate(() => {
    const schild = document.querySelector(".marke-art[data-quelle]");
    const laeuft = document.querySelector('.ev-noch[data-stand="laeuft"]');
    const karte = document.querySelector('.kv-seite .eintrag-karte[data-eventkarte="ja"]');
    return {
      schildTon: schild ? getComputedStyle(schild).color : null,
      schildQuelle: schild ? schild.dataset.quelle : null,
      /* DER PUNKT HAENGT AN ::before, NICHT AN ::after (berichtigt
         07.10.2026). Hier stand ::after -- dort ist er seit dem
         Umbau auf das ev-noch-Muster nicht mehr. Gemessen kam
         "rgba(0, 0, 0, 0)" zurueck, und die Bedingung /rgb/ passte
         darauf: ein gruener Haken, der nichts angesehen hat. */
      schildPunkt: schild
        ? getComputedStyle(schild, "::before").backgroundColor : null,
      puls: laeuft
        ? getComputedStyle(laeuft, "::before").animationName : "(kein laufendes Event)",
      kartenGrund: karte ? getComputedStyle(karte).backgroundImage.slice(0, 40) : null,
    };
  });
  console.log(`  Schild   ${regeln.schildQuelle} / ${regeln.schildTon}`
    + `  Punkt ${regeln.schildPunkt}`);
  console.log(`  Puls     ${regeln.puls}`);
  const nach = await seite.evaluate(() => {
    const s = document.querySelector(".marke-art[data-quelle]");
    const tr = document.querySelector(".kv-trennung");
    const st = getComputedStyle(s);
    const na = getComputedStyle(s, "::after");
    return { padLinks: st.paddingLeft, pos: st.position, anzeige: st.display,
      punktPos: na.position, punktLinks: na.left,
      trennBild: getComputedStyle(tr).backgroundImage.slice(0, 90),
      trennGroesse: getComputedStyle(tr).backgroundSize };
  });
  console.log("  MESS " + JSON.stringify(nach));
  ok(regeln.schildQuelle === "tiktok" || regeln.schildQuelle === "agentur",
    `das Herkunftsschild steht an der Kachel (${regeln.schildQuelle})`);
  ok(/^rgba?((?!0, 0, 0, 0))/.test(regeln.schildPunkt || ""),
    `sein Farbpunkt wird wirklich gezeichnet (${regeln.schildPunkt})`);
  /* UND ER TRAEGT DIE FARBE SEINER SEITE. Ohne diese Zeile waere der
     Punkt auch dann "gezeichnet", wenn er den Ersatzton traegt -- genau
     das war er beim ersten Anlauf. */
  ok(regeln.schildPunkt === "rgb(63, 189, 245)",
    `und zwar das TikTok-Blau, nicht den Ersatzton (${regeln.schildPunkt})`);
  ok(regeln.puls === "ev-puls",
    `der Punkt eines laufenden Events pulst (${regeln.puls})`);
  ok(/radial-gradient/.test(regeln.kartenGrund || ""),
    `die Kachel traegt den Schein ihres Tons (${regeln.kartenGrund}…)`);

  const t2 = await seite.$(".kv-trennung");
  await t2.screenshot({ path: `server/bild-kampagne-trennung-${breite}.png` });

  /* ---- UND EINMAL AUFGEKLAPPT (07.10.2026) ---------------------------

     Das Bild oben zeigt, dass die Kachel KURZ ist. Es zeigt nicht, was
     dahinter steht -- und genau darum ging es Filipe zuerst: „man soll
     die titel in den texten besser erkennen und sehen was zu was
     passt." Also ein zweites Bild mit offenem Kasten.

     NUR DIE EINE KACHEL, nicht das ganze Brett: Mit 13 Abschnitten
     waere das Bild sonst mehrere tausend Pixel hoch und niemand sieht
     etwas. */
  const gipfel = await seite.evaluateHandle(() => {
    const k = [...document.querySelectorAll('.eintrag-karte[data-eventkarte="ja"]')]
      .find((x) => x.textContent.includes("Gipfelstürmer"));
    k?.querySelector(".ev-mehr__knopf")?.click();
    return k;
  });
  await seite.waitForTimeout(400);
  const offen = await seite.evaluate(() => {
    const k = [...document.querySelectorAll('.eintrag-karte[data-eventkarte="ja"]')]
      .find((x) => x.textContent.includes("Gipfelstürmer"));
    return {
      auf: k?.querySelector(".ev-mehr__inhalt")?.hidden === false,
      titel: [...(k?.querySelectorAll(".ev-abschnitt__titel") || [])]
        .map((h) => h.textContent.trim()).slice(0, 5),
      stufen: [...(k?.querySelectorAll(".ev-abschnitt") || [])]
        .map((a) => a.dataset.stufe),
    };
  });
  ok(offen.auf === true, `der Infokasten laesst sich aufklappen (${offen.auf})`);
  /* DIE ZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext:
     Ein Bild von einem leeren Kasten waere sonst genauso gruen. */
  ok(offen.titel.length >= 3,
    `und zeigt die Ueberschriften der Kampagne: ${JSON.stringify(offen.titel)}`);
  ok(offen.stufen.includes("2") && offen.stufen.includes("3"),
    `auf zwei Stufen, nicht alle gleichrangig `
    + `(${offen.stufen.filter((s) => s === "2").length}x Stufe 2, `
    + `${offen.stufen.filter((s) => s === "3").length}x Stufe 3)`);
  if (gipfel) {
    await gipfel.asElement()?.screenshot({
      path: `server/bild-kampagne-infos-${breite}.png`,
    });
  }
  await ctx.close();
}

/* ---- Und ein Creator sieht den Kasten gar nicht --------------------- */
{
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  await anmelden(seite, "creator", "CODE-CREA-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);
  const sicht = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    return { da: !!k, versteckt: k ? k.hidden : null,
      sichtbar: k ? k.getBoundingClientRect().height > 0 : null };
  });
  console.log("\n=== Ein Creator ===");
  ok(sicht.versteckt === true && sicht.sichtbar === false,
    `der Kasten bleibt zu (hidden=${sicht.versteckt}, Hoehe>0=${sicht.sichtbar})`);
  await ctx.close();
}

/* ---- Und auf einem anderen Brett steht er nicht --------------------- */
{
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=technik", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);
  const sicht = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    return k ? k.hidden : null;
  });
  console.log("\n=== Auf dem Brett Technik ===");
  ok(sicht === true, `dort bleibt der Kasten zu (hidden=${sicht})`);
  await ctx.close();
}

console.log("\n=== Browser-Meldungen ===");
ok(fehlerAufSeite.length === 0,
  fehlerAufSeite.length ? fehlerAufSeite.slice(0, 4).join(" | ") : "keine Fehler");

console.log(`\n${geprueft} Messungen, ${fehler} Fehler`);
console.log("Bilder: server/bild-kampagne-1280.png, -412.png und je -laeuft.png");
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* Rest */ }
process.exit(fehler ? 1 : 0);