dogfather-universe/server/pruef-grosscheck.mjs

/* DER GROSSCHECK — jede Seite, jede Rolle, Handy und Rechner.

   Auftrag vom 02.09.2026: "ich will, dass du jetzt einmal einen grossen
   Check machst, ob alles klappt, auf dem Handy und PC."

   WAS DIESE PRUEFUNG ANDERS MACHT ALS DIE ANDEREN.

   Die uebrigen dreissig Pruefungen fragen jeweils "stimmt diese eine
   Sache?". Diese hier fragt "faellt IRGENDWO etwas auseinander?" -- und
   geht dafuer stumpf ueber alles: sechzehn Workspace-Seiten mal vier
   Rollen mal zwei Bildschirmgroessen, dazu jede oeffentliche Seite.

   Solche Rundgaenge finden andere Fehler als gezielte Pruefungen: nicht
   den falsch gerechneten Wert, sondern die Seite, die bei genau einer
   Rolle leer bleibt, oder die auf dem Handy zwei Pixel ueberlaeuft.

   GEMESSEN WIRD, WAS EIN MENSCH MERKEN WUERDE:
     1. Kommt die Seite ueberhaupt an (Inhalt da, nicht nur Geruest)?
     2. Steht etwas seitlich ueber? (Auf dem Handy der schlimmste Fehler.)
     3. Meldet der Browser einen Fehler?
     4. Ist Text abgeschnitten?
     5. Sind Beruehrziele auf dem Handy gross genug (24 px, WCAG 2.5.8)?
     6. Liegt etwas Bedienbares unter etwas anderem?
     7. Ist Schrift zu klein zum Lesen?

   DIE ANZAHL GEHOERT IN DIE BEDINGUNG. Eine Seite, die gar nichts
   enthaelt, waere sonst die sauberste von allen -- kein Ueberstand,
   keine zu kleine Schrift, kein Fehler. Deshalb wird gezaehlt, WIE VIEL
   auf jeder Seite ueberhaupt angesehen wurde, und "nichts gefunden"
   gilt als Fehler.

   Am Ende steht eine Gegenprobe: eine absichtlich zu breite Kachel muss
   gemeldet werden. Eine Pruefung, die immer bestaetigt, bestaetigt
   nichts. */

import { mkdtempSync, rmSync, readdirSync } from "node:fs";
import { tmpdir } from "node:os";
import { join, dirname } from "node:path";
import { fileURLToPath } from "node:url";

/* Der Repo-Ordner, vom Ort DIESER Datei aus -- nicht vom Arbeits-
   verzeichnis. Siehe die Begruendung weiter unten bei OEFFENTLICH. */
const REPO = join(dirname(fileURLToPath(import.meta.url)), "..");

const ordner = mkdtempSync(join(tmpdir(), "ws-gross-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = "4218";
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_ACCESS_CODE_VANVAN = "VANVAN-TEST-1";
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, 800));
const BASIS = "http://127.0.0.1:4218";
setTimeout(() => { console.log("ABBRUCH — zu lange gelaufen"); process.exit(1); }, 900_000).unref?.();

/* ORTSZEIT, nicht UTC. Die Anwendung rechnet "heute" nach der Uhr des
   Benutzers; toISOString() liefert dagegen UTC und damit zwischen
   Mitternacht und 2 Uhr den VORTAG. In diesem Fenster schlug diese
   Pruefung fehl, ohne dass etwas kaputt war. */
const tagText = (d = new Date()) =>
  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`
  + `-${String(d.getDate()).padStart(2, "0")}`;

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

await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});

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

/* ---- Ein Bestand, der die Seiten wirklich fuellt ----------------------
   Leere Seiten pruefen nichts. Jede Rolle bekommt Daten, damit auf jeder
   Seite tatsaechlich etwas steht -- sonst misst der Rundgang leere
   Geruesten und meldet sie als tadellos. */
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = tagText();
const gestern = tagText(new Date(Date.now() - 86400_000));
const morgen = tagText(new Date(Date.now() + 86400_000));

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, jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
/* Lange Namen -- kurze wuerden Ueberlauf-Fehler verstecken. */
const idDogi = anlegen("Filipe Fernandes Ribeiro", "admin", "CODE-DOGI-0001");
const idMara = anlegen("Mara Schmidt-Hohenberg", "manager", "CODE-MANA-0001");
const idPat  = anlegen("Patrick von Hohenstein", "scout", "CODE-SCOU-0001");
const idTili = anlegen("SpongBobSchwammKopf", "creator", "CODE-ANNA-0001");
const idLuna = anlegen("Luna", "creator", "CODE-LUNA-0001");

d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idTili, idPat, jetzt);
d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idLuna, idMara, jetzt);
d.prepare("INSERT INTO scout_zuteilung (scout_id, manager_id, seit) VALUES (?,?,?)").run(idPat, idMara, jetzt);

const LANG = "Ein absichtlich sehr langer Titel ohne Leerzeichenumbrueche "
  + "damit ein Ueberlauf auffaellt statt sich zu verstecken";
for (const [titel, st, frist, cr, ve] of [
  [LANG, "offen", gestern, idTili, idPat],
  ["Kurz", "arbeit", heute, idTili, idPat],
  ["Review-Sache", "review", morgen, idLuna, idMara],
  ["Fertig", "erledigt", null, idLuna, idMara],
]) {
  d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, frist,
    creator_id, verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?,?)`)
    .run(titel, "Beschreibung mit etwas Text.", st, "hoch", frist, cr, ve, jetzt, idDogi);
}
for (const [t, art, beginn] of [
  ["Wochen-Call mit einem sehr langen Namen", "call", heute + "T10:00"],
  ["Review", "review", morgen + "T14:00"],
]) {
  d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, creator_id, erstellt, erstellt_von)
             VALUES (?,?,?,?,?,?,?)`).run(t, art, beginn, 30, idTili, jetzt, idPat);
}
for (const b of ["live", "community", "technik", "schutz", "content"]) {
  d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, status, dringlichkeit,
    datum, creator_id, erstellt, erstellt_von)
    VALUES (?,?,?,?,?,?,?,?,?,?)`)
    .run(b, b === "content" ? "idee" : "vorbereitung", LANG, "Text dazu.",
         "offen", "hoch", heute, idTili, jetzt, idPat);
}
d.prepare(`INSERT INTO leads (name, plattform, handle, status, prioritaet, scout_id, erstellt,
  naechster_followup) VALUES (?,?,?,?,?,?,?,?)`)
  .run("Ein Lead mit langem Namen", "tiktok", "@langername", "angesprochen", "hoch",
       idPat, jetzt, gestern);
try {
  d.prepare(`INSERT INTO wissen (titel, beschreibung, kategorie, stufe, geraet,
    name_original, name_datei, groesse, wichtig, veroeffentlicht, hochgeladen, erstellt_von)
    VALUES (?,?,?,?,?,?,?,?,?,?,?,?)`)
    .run(LANG, "Eine Anleitung.", "hilfe", "einsteiger", "egal",
         "a.pdf", "x1.pdf", 1000, 1, heute, jetzt, idDogi);
} catch { /* Tabelle evtl. anders benannt -- der Rundgang laeuft trotzdem */ }
d.close();

/* ---------------------------------------------------------------- */

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

/* Die Messung laeuft IM Browser -- nur dort weiss man, was wirklich
   gezeichnet wurde. */
const messen = () => {
  const sichtbar = (e) => {
    const r = e.getBoundingClientRect();
    return r.width > 0 && r.height > 0;
  };
  const name = (e) => (e.tagName + "." + String(e.className || "").split(" ")[0]).slice(0, 28)
    + (e.textContent ? ` "${e.textContent.trim().slice(0, 14)}"` : "");

  const alle = [...document.querySelectorAll("body *")];

  /* ABSICHTLICH UNSICHTBAR IST KEIN FEHLER.
     wahl.js ersetzt jedes Auswahlfeld durch einen eigenen Knopf; das
     echte <select> bleibt als 1x1-Punkt mit opacity 0 darunter liegen
     (damit Formularpruefung und `required` weiter greifen). Der erste
     Lauf meldete es auf zwoelf Seiten als "verdeckt" und als "zu
     kleines Beruehrziel" -- beides richtig gemessen und beides kein
     Mangel. Eine Pruefung, die Richtiges anmahnt, gewoehnt man sich ab
     zu lesen. */
  const echtBedienbar = (e) => {
    const st = getComputedStyle(e);
    if (st.opacity === "0" || st.pointerEvents === "none" || st.visibility === "hidden") return false;
    const r = e.getBoundingClientRect();
    return r.width > 2 && r.height > 2;
  };
  const bedienbar = [...document.querySelectorAll(
    "button, a[href], input, select, textarea, [role=button]")]
    .filter(sichtbar).filter(echtBedienbar);

  return {
    /* 1. Ist ueberhaupt etwas da? */
    inhalt: (document.querySelector("main")?.textContent || "").trim().length,
    elemente: alle.length,
    bedienbar: bedienbar.length,

    /* 2. Waagerechter Ueberstand -- und WER schuld ist. */
    ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
    schuld: alle.filter((e) => {
      const r = e.getBoundingClientRect();
      return r.width > 0 && r.right > document.documentElement.clientWidth + 1;
    }).slice(0, 3).map(name),

    /* 4. Abgeschnittener TEXT.

       NUR Elemente, die ihren Text SELBST tragen (keine Element-Kinder).
       Der erste Lauf pruefte jeden Kasten mit overflow:hidden -- und
       meldete damit genau die Stellen, an denen absichtlich beschnitten
       wird: die Kacheln (das riesige Wasserzeichen ragt bewusst ueber
       den Rand) und jede kopf-zeile (dort steht im Quelltext woertlich
       "overflow: hidden schneidet es sauber ab"). Neunzehn Meldungen,
       null Fehler.

       Ein Kasten, der ein zu breites KIND enthaelt, ist Gestaltung. Ein
       WORT, das an der Kante endet, ist ein Fehler -- und nur den suchen
       wir hier. */
    abgeschnitten: alle.filter((e) => {
      if (e.children.length) return false;
      if (!sichtbar(e)) return false;
      const st = getComputedStyle(e);
      if (st.overflow !== "hidden" && st.overflowX !== "hidden") return false;
      if (st.textOverflow === "ellipsis") return false;
      /* ABSICHTLICH WEGGESCHNITTEN IST KEIN FEHLER.
         Das uebliche Muster fuer "nur fuer Vorleseprogramme" ist
         width:1px + clip-path:inset(50%) -- der Text bleibt im Dokument
         und verschwindet nur fuer das Auge. Auf dem Handy macht das
         .zurueck-knopf__text genau so ("der Pfeil allein sagt zurueck,
         das Wort daneben kostet 65 px"). Der zweite Lauf meldete es auf
         siebzehn Seiten. Ein Kasten von einem Pixel schneidet nichts ab,
         er versteckt. */
      if (e.clientWidth < 4 || e.clientHeight < 4) return false;
      if (st.clipPath && st.clipPath !== "none") return false;
      return e.scrollWidth > e.clientWidth + 2 && (e.textContent || "").trim().length > 3;
    }).slice(0, 3).map(name),

    /* 5. Beruehrziele -- MIT der Ausnahme, die im Standard steht.

       WCAG 2.5.8 nennt 24x24 als Mindestmass und nimmt davon
       ausdruecklich Verweise aus, die IM FLIESSTEXT liegen ("inline
       exception: the target is in a sentence or block of text"). Anders
       ginge es auch gar nicht: Ein Link mitten in einem Satz muesste
       sonst die Zeile auseinanderziehen.

       Der zweite Lauf meldete drei solche Faelle auf der oeffentlichen
       Seite ("Streamplan ansehen" im Absatz, die E-Mail im Impressum,
       der ODR-Link). Alle drei sind nach dem Standard, den diese
       Pruefung selbst zitiert, KEIN Mangel -- eine Pruefung, die ihre
       eigene Messlatte nicht kennt, misst nichts. */
    klein: bedienbar.filter((e) => {
      const r = e.getBoundingClientRect();
      if (r.width >= 24 && r.height >= 24) return false;
      const st = getComputedStyle(e);
      if (e.tagName === "A" && st.display.startsWith("inline")) {
        /* Steht der Verweis in einem Satz? Dann traegt der Elternteil
           mehr Text als der Verweis selbst. */
        const eltern = (e.parentElement?.textContent || "").trim().length;
        const selbst = (e.textContent || "").trim().length;
        if (eltern > selbst + 12) return false;
      }
      return true;
    }).slice(0, 3).map((e) => `${name(e)} ${Math.round(e.getBoundingClientRect().width)}x${Math.round(e.getBoundingClientRect().height)}`),

    /* 6. Verdeckt: Liegt in der Mitte eines bedienbaren Elements etwas
       anderes?

       EINE KLEBENDE LEISTE IST KEIN FEHLER -- sie soll ueberlagern. Der
       erste Lauf meldete auf profil.html ein Textfeld unter der
       Speicherleiste; das ist die Bauart einer sticky-Leiste und nicht
       ihr Versagen.

       Statt die Meldung abzuschalten (dann faende sie auch echte
       Ueberdeckungen nicht mehr), wird sie GENAUER: Ueberdeckt etwas
       Klebendes ein Eingabefeld, ist das nur dann in Ordnung, wenn das
       Feld genug scroll-margin-bottom hat, um darunter hervorzukommen.
       Sonst sieht man beim Tippen die eigene Zeile nicht -- WCAG 2.2
       nennt das 2.4.11 "Focus Not Obscured".

       Aus einer vagen Meldung wird so eine pruefbare Zusage. */
    verdeckt: bedienbar.filter((e) => {
      const r = e.getBoundingClientRect();
      const x = r.left + r.width / 2;
      const y = r.top + r.height / 2;
      if (x < 0 || y < 0 || x >= innerWidth || y >= innerHeight) return false;
      const oben = document.elementFromPoint(x, y);
      if (!oben || oben === e || e.contains(oben) || oben.contains(e)) return false;

      /* Klebt das, was darueber liegt? Dann zaehlt der Fluchtweg. */
      let p = oben;
      while (p && p !== document.body) {
        const ps = getComputedStyle(p);
        if (ps.position === "sticky" || ps.position === "fixed") {
          const platz = parseFloat(getComputedStyle(e).scrollMarginBottom) || 0;
          return platz < p.getBoundingClientRect().height;
        }
        p = p.parentElement;
      }
      return true;
    }).slice(0, 3).map(name),

    /* 7. Zu kleine Schrift -- nur sichtbarer Text, und die Grenze haengt
       am Geraet.

       11,5 px gilt fuer das HANDY: Dort ist alles darunter kein Text
       mehr, sondern ein Muster. Am Rechner sitzt man weiter weg, hat
       aber deutlich mehr Pixel -- dieselbe Grenze meldete dort jede
       Rollenmarke und jedes Kleinschild (10,5 bis 11,4 px), also
       Gestaltung und keinen Mangel. Am Rechner ist die Grenze deshalb
       10 px; darunter wird es auch dort muehsam. */
    winzig: [...document.querySelectorAll("p, span, li, a, label, small, h1, h2, h3, h4")]
      .filter((e) => e.children.length === 0 && (e.textContent || "").trim().length > 3
        && sichtbar(e)
        && parseFloat(getComputedStyle(e).fontSize) < (innerWidth < 700 ? 11.5 : 10))
      .slice(0, 3).map((e) => `${name(e)} ${getComputedStyle(e).fontSize}`),
  };
};

const SEITEN = ["start.html", "uebersicht.html", "aufgaben.html", "kalender.html",
  "calls.html", "dateien.html", "steckbrief.html", "profil.html", "startcheck.html",
  "bereich.html?b=live", "content.html", "bereich.html?b=community",
  "bereich.html?b=technik", "bereich.html?b=schutz", "report.html",
  "personen.html", "scouting.html", "wissen.html", "automation.html"];

const ROLLEN = [
  ["admin", "CODE-DOGI-0001", "DogFather"],
  ["manager", "CODE-MANA-0001", "Manager"],
  ["scout", "CODE-SCOU-0001", "Scout"],
  ["creator", "CODE-ANNA-0001", "Creator"],
];

const GERAETE = [[1280, 900, "Rechner"], [390, 844, "Handy"]];

let seitenGesamt = 0, elementeGesamt = 0, bedienbarGesamt = 0;
const probleme = [];

for (const [breite, hoehe, wie] of GERAETE) {
  console.log(`\n=================== ${wie} (${breite}px) ===================`);
  for (const [rolle, code, rollenName] of ROLLEN) {
    const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
    const konsole = [];
    const seite = await kontext.newPage();
    seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text().slice(0, 90)); });
    seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message.slice(0, 90)));

    await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
    await seite.click(`.rolle[data-rolle="${rolle}"]`);
    await seite.fill("#code", code);
    await seite.click("button[type=submit]");
    await seite.waitForURL("**/start.html", { timeout: 20000 });

    let schlecht = 0;
    let elemente = 0, bedienbar = 0;
    const details = [];

    for (const s of SEITEN) {
      konsole.length = 0;
      await seite.goto(BASIS + "/workspace/" + s, { waitUntil: "networkidle" });
      await seite.waitForTimeout(750);
      /* Umgeleitet? Dann darf diese Rolle die Seite nicht -- kein Fehler,
         aber auch nichts zu messen. */
      if (!seite.url().includes(s.split("?")[0])) continue;

      const r = await seite.evaluate(messen);
      seitenGesamt++;
      elemente += r.elemente;
      bedienbar += r.bedienbar;

      const mangel = [];
      /* DIE ANZAHL IN DER BEDINGUNG: Eine leere Seite waere sonst die
         sauberste von allen. */
      if (r.inhalt < 40) mangel.push(`fast kein Inhalt (${r.inhalt} Zeichen)`);
      if (r.bedienbar < 2) mangel.push(`kaum bedienbare Elemente (${r.bedienbar})`);
      if (r.ueber > 0) mangel.push(`${r.ueber}px Überstand [${r.schuld.join(" | ")}]`);
      if (konsole.length) mangel.push(`Konsole: ${konsole.slice(0, 2).join(" | ")}`);
      if (r.abgeschnitten.length) mangel.push(`abgeschnitten: ${r.abgeschnitten.join(" | ")}`);
      if (r.winzig.length) mangel.push(`zu klein: ${r.winzig.join(" | ")}`);
      if (r.verdeckt.length) mangel.push(`verdeckt: ${r.verdeckt.join(" | ")}`);
      /* Beruehrziele nur auf dem Handy -- mit der Maus trifft man auch
         kleine Ziele. */
      if (breite < 700 && r.klein.length) mangel.push(`Berührziel: ${r.klein.join(" | ")}`);

      if (mangel.length) {
        schlecht++;
        details.push(`      ${s.padEnd(24)} ${mangel.join("; ")}`);
      }
    }

    elementeGesamt += elemente;
    bedienbarGesamt += bedienbar;
    const gut = schlecht === 0;
    if (!gut) { fehler++; probleme.push(`${wie} / ${rollenName}`); }
    console.log(`  ${gut ? "ok  " : "FEHL"} ${rollenName.padEnd(10)}`
      + `${String(SEITEN.length).padStart(3)} Seiten, `
      + `${String(elemente).padStart(5)} Elemente, ${String(bedienbar).padStart(4)} bedienbar`
      + (gut ? "" : `  — ${schlecht} beanstandet`));
    for (const z of details) console.log(z);

    await kontext.close();
  }
}

/* ================================================================
   Die oeffentliche Seite -- sie ist das Wichtigste ueberhaupt
   ================================================================ */
console.log("\n=================== Öffentliche Seite ===================");

/* BEFUND VOM 04.09.2026 (Audit). Hier stand `readdirSync(".")` -- das
   AKTUELLE ARBEITSVERZEICHNIS, nicht der Repo-Ordner. Wer diese Pruefung
   aus `server/` startet (der naheliegendste Ort, dort liegt sie), findet
   dort keine einzige .html: die Schleife lief null Mal, und der Abschnitt
   meldete trotzdem

       ok   Rechner     0 Seiten
       ok   Handy       0 Seiten

   ausgerechnet unter der Ueberschrift "sie ist das Wichtigste ueberhaupt".
   Ein gruener Haken fuer nichts. Das ist genau die Sorte Pruefung, die
   nicht scheitert, wenn sie ihre Voraussetzung nicht hat, sondern
   schweigt -- und dadurch monatelang bestaetigt, was sie nie angesehen hat.

   Zwei Aenderungen: Der Ordner steht jetzt fest (vom Ort dieser Datei
   aus), und die ANZAHL gehoert in die Bedingung -- 0 Seiten ist ab jetzt
   ein Fehler, kein Erfolg. */
const OEFFENTLICH = readdirSync(REPO)
  .filter((n) => n.endsWith(".html") && !["404.html", "gate.html"].includes(n));
ok(OEFFENTLICH.length >= 10,
  `${OEFFENTLICH.length} oeffentliche Seiten gefunden (unter 10 waere ein Fehler in dieser Pruefung selbst)`);

for (const [breite, hoehe, wie] of GERAETE) {
  const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text().slice(0, 80)); });
  seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message.slice(0, 80)));

  let schlecht = 0;
  const details = [];
  for (const datei of OEFFENTLICH) {
    konsole.length = 0;
    await seite.goto(BASIS + "/" + datei, { waitUntil: "networkidle" });
    await seite.waitForTimeout(350);
    const r = await seite.evaluate(messen);
    seitenGesamt++;
    elementeGesamt += r.elemente;

    const mangel = [];
    if (r.inhalt < 40) mangel.push(`fast kein Inhalt (${r.inhalt})`);
    if (r.ueber > 0) mangel.push(`${r.ueber}px Überstand [${r.schuld.join(" | ")}]`);
    if (konsole.length) mangel.push(`Konsole: ${konsole.slice(0, 2).join(" | ")}`);
    if (breite < 700 && r.klein.length) mangel.push(`Berührziel: ${r.klein.join(" | ")}`);
    if (mangel.length) { schlecht++; details.push(`      ${datei.padEnd(26)} ${mangel.join("; ")}`); }
  }
  /* Die Anzahl steht in der Bedingung, nicht nur im Meldetext: Ohne
     angesehene Seite ist "0 beanstandet" keine Aussage. */
  const gut = schlecht === 0 && OEFFENTLICH.length > 0;
  if (!gut) { fehler++; probleme.push(`Öffentlich / ${wie}`); }
  console.log(`  ${gut ? "ok  " : "FEHL"} ${wie.padEnd(10)}${String(OEFFENTLICH.length).padStart(3)} Seiten`
    + (gut ? "" : `  — ${schlecht} beanstandet`));
  for (const z of details) console.log(z);
  await kontext.close();
}

/* ================================================================
   GEGENPROBE — kann dieser Rundgang ueberhaupt etwas finden?
   ================================================================ */
console.log("\n=================== Gegenprobe ===================");
{
  const kontext = await browser.newContext({ viewport: { width: 390, height: 844 } });
  const seite = await kontext.newPage();
  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 20000 });
  await seite.waitForTimeout(900);

  const vorher = await seite.evaluate(messen);
  ok(vorher.ueber <= 0 && vorher.klein.length === 0,
     `die Startseite ist unauffaellig (${vorher.ueber}px, ${vorher.klein.length} kleine Ziele)`);

  /* Absichtlich kaputtmachen: ein Element weit ueber den Rand. */
  const nachher = await seite.evaluate(() => {
    const k = document.createElement("div");
    k.style.cssText = "width:900px;height:20px;background:red";
    k.textContent = "absichtlich zu breit";
    document.querySelector("main")?.append(k);
    const b = document.createElement("button");
    b.style.cssText = "width:10px;height:10px";
    b.textContent = "winzig";
    document.querySelector("main")?.append(b);
    return null;
  });
  await seite.waitForTimeout(200);
  const kaputt = await seite.evaluate(messen);
  ok(kaputt.ueber > 0,
     `ein absichtlich zu breites Element wird gefunden (${kaputt.ueber}px Überstand)`);
  ok(kaputt.klein.length > 0,
     `ein absichtlich winziges Beruehrziel wird gefunden (${kaputt.klein.join(", ")})`);

  /* DIE AUSNAHMEN DUERFEN NICHT ALLES VERSCHLUCKEN.

     Drei Ausnahmen sind eingebaut (absichtlich unsichtbare Elemente,
     absichtlich weggeschnittener Text, Verweise im Fliesstext). Jede
     davon ist begruendet -- und jede ist zugleich ein Loch, durch das
     ein echter Fehler entkommen koennte. Deshalb wird hier geprueft,
     dass ein winziger Knopf, der NICHT im Fliesstext steht, weiterhin
     gemeldet wird, und ein abgeschnittenes Wort in einem normal grossen
     Kasten ebenfalls. */
  const trotzdem = await seite.evaluate(() => {
    const m = document.querySelector("main");
    /* Ein Verweis, der allein steht -- keine Fliesstext-Ausnahme. */
    const a = document.createElement("a");
    a.href = "#";
    a.style.cssText = "display:block;width:20px;height:18px";
    a.textContent = "x";
    m.append(a);
    /* Ein normal grosser Kasten mit wirklich abgeschnittenem Wort. */
    const k = document.createElement("div");
    k.style.cssText = "width:60px;overflow:hidden;white-space:nowrap;font-size:14px";
    k.textContent = "Dieses Wort passt hier ganz sicher nicht hinein";
    m.append(k);
    return null;
  });
  await seite.waitForTimeout(200);
  const nochKaputt = await seite.evaluate(messen);
  ok(nochKaputt.klein.some((t) => t.includes('"x"')),
     `ein winziger Verweis AUSSERHALB eines Satzes wird weiterhin gemeldet `
     + `(${nochKaputt.klein.join(", ")})`);
  ok(nochKaputt.abgeschnitten.length > 0,
     `und ein wirklich abgeschnittenes Wort ebenfalls (${nochKaputt.abgeschnitten.join(", ")})`);
  await kontext.close();
}

await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }

console.log("\n" + "=".repeat(64));
console.log(`Seiten angesehen:      ${seitenGesamt}`);
console.log(`Elemente vermessen:    ${elementeGesamt}`);
console.log(`Bedienbare Elemente:   ${bedienbarGesamt}`);
/* Ohne diese Bedingung waere ein Rundgang, der gar nichts geladen hat,
   das beste Ergebnis. */
if (seitenGesamt < 100) { console.log("  FEHL zu wenige Seiten angesehen"); fehler++; }
if (probleme.length) console.log(`Beanstandet:           ${probleme.join(", ")}`);
console.log("\n" + (fehler ? `${fehler} Beanstandung(en).` : "Alles in Ordnung."));
process.exit(fehler ? 1 : 0);