dogfather-universe/pruef-verwaltung-schmuck.mjs

/* =====================================================================
   Prueft die Buehne im Verwaltungsbereich.

   Das Konzept hat sich umgedreht, und damit auch die Pruefung.

   Vorher: ein schmaler Streifen, auf 190 % gezoomt, davon ein Ausschnitt
   gewaehlt und die linke Haelfte voll zugedeckt -- damit Text darauf
   lesbar bleibt. Gemessen wurde, ob das Bild leise genug ist. Uebrig
   blieb ein Zipfel.

   Jetzt: Das Motiv ist die Buehne -- bildschirmfuellend, ungeschnitten,
   ungedimmt. Der Inhalt schwebt als Milchglas darueber. Text steht nie
   direkt auf dem Bild.

   Deshalb wird jetzt das Gegenteil geprueft:
     1. Ist das Bild wirklich GANZ da? (kein Zoom, kein Ausschnitt)
     2. Traegt jede Flaeche, auf der gelesen wird, auch Glas?
     3. Bleibt der Text darauf lesbar -- an echten Bildpunkten gemessen?
   ===================================================================== */
import { chromium } from "playwright";
import http from "http";
import fs from "fs";
import path from "path";

const TYP = {
  ".html": "text/html", ".css": "text/css", ".js": "text/javascript",
  ".png": "image/png", ".svg": "image/svg+xml", ".webp": "image/webp",
  ".json": "application/json", ".ico": "image/x-icon", ".jpg": "image/jpeg",
};

const fehlt = [];
const srv = http.createServer((q, r) => {
  const u = decodeURIComponent(q.url.split("?")[0]);
  const p = path.join(process.cwd(), u);
  if (fs.existsSync(p) && !p.endsWith("/")) {
    r.writeHead(200, { "content-type": TYP[path.extname(p)] || "text/plain" });
    return r.end(fs.readFileSync(p));
  }
  fehlt.push(u);
  r.writeHead(404);
  r.end("");
});

let ok = 0, fehl = 0;
const pruefe = (name, gut, info) => {
  if (gut) { ok++; console.log("  ok   " + name + (info ? "  -> " + info : "")); }
  else { fehl++; console.log("  FEHL " + name + (info ? "  -> " + info : "")); }
};

function leuchtkraft([r, g, b]) {
  const f = (v) => {
    v /= 255;
    return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
}
function verhaeltnis(a, b) {
  const l1 = leuchtkraft(a), l2 = leuchtkraft(b);
  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}

const BEREICHE = ["uebersicht", "anfragen", "projekte", "kunden", "zahlungen", "postfach"];

/* Setzt einen Bereich und legt Beispielinhalt ein. Ohne Inhalt liesse
   sich nicht messen, ob Text ueber der Buehne lesbar bleibt -- und genau
   das ist die Frage, an der das ganze Konzept haengt.

   Der Aufbau passiert vor JEDER Messung neu: Der Datenabruf laeuft im
   Hintergrund weiter und klappt den Arbeitsbereich verzoegert wieder zu
   (Zugangspruefung, kein Fehler). */
async function bereichAufbauen(seite, bereich) {
  await seite.evaluate((b) => {
    document.querySelector("#vw-anmeldung").setAttribute("hidden", "");
    const bereichEl = document.querySelector("#vw-bereich");
    bereichEl.removeAttribute("hidden");
    document.documentElement.setAttribute("data-vw-bereich", b);
    document.querySelectorAll("[data-tab]").forEach((x) =>
      x.classList.toggle("vw-an", x.dataset.tab === b));

    let probe = document.querySelector("#vw-probe");
    if (!probe) {
      probe = document.createElement("div");
      probe.id = "vw-probe";
      /* DIE ECHTE KACHELSTRUKTUR der Verwaltung, so wie das Skript sie
         erzeugt: .vw-karte mit Nummer, Mitte und rechter Spalte.

         Frueher stand hier eine selbst gebaute .wd-karte. Die kommt im
         Verwaltungsbereich aber fast nicht vor -- der Test hat also
         eine Attrappe geprueft und war gruen, waehrend auf den echten
         Kacheln nichts davon ankam. Genau deshalb war der Unterschied
         nirgends zu sehen. */
      probe.innerHTML =
        '<button class="vw-karte">' +
          '<span class="vw-karte-nr">P-2608-0002</span>' +
          '<span class="vw-karte-mitte">' +
            '<span class="vw-karte-name">Onepager fuer Vanessa</span>' +
            '<span class="vw-karte-info" id="vw-probe-text">Vanessa Geske</span>' +
          '</span>' +
          '<span class="vw-karte-rechts"><span class="vw-mini">Design</span></span>' +
        '</button>' +
        '<button class="vw-karte">' +
          '<span class="vw-karte-nr">P-2608-0004</span>' +
          '<span class="vw-karte-mitte">' +
            '<span class="vw-karte-name">Betreuung</span>' +
            '<span class="vw-karte-info">Marc Weber</span>' +
          '</span>' +
          '<span class="vw-karte-rechts"><span class="vw-mini vw-mini--geld">39,00</span></span>' +
        '</button>';
      bereichEl.appendChild(probe);
    }
  }, bereich);
  await seite.waitForTimeout(700);
}

/* Misst die Schwankung des Untergrunds an echten Bildpunkten. Hohe
   Schwankung heisst: Da liegt Bildstruktur unter der Schrift. */
async function unruheAn(seite, wahl) {
  const bild = await seite.locator(wahl).first().screenshot();
  return seite.evaluate(async (daten) => {
    const bl = await fetch("data:image/png;base64," + daten).then((r) => r.blob());
    const bm = await createImageBitmap(bl);
    const c = new OffscreenCanvas(bm.width, bm.height);
    const x = c.getContext("2d");
    x.drawImage(bm, 0, 0);
    const d = x.getImageData(0, 0, bm.width, bm.height).data;
    const grund = [];
    for (let i = 0; i < d.length; i += 4) {
      const h = 0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2];
      if (h < 120) grund.push(h);
    }
    if (grund.length < 50) return null;
    const m = grund.reduce((a, b) => a + b, 0) / grund.length;
    return Math.round(Math.sqrt(grund.reduce((a, b) => a + (b - m) ** 2, 0) / grund.length));
  }, bild.toString("base64"));
}

srv.listen(4404, async () => {
  const browser = await chromium.launch();
  const seite = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  const skriptfehler = [];
  seite.on("pageerror", (e) => skriptfehler.push(String(e).slice(0, 140)));
  await seite.goto("http://127.0.0.1:4404/webdesign/verwaltung.html");
  await seite.waitForTimeout(1500);

  console.log("===== 1. IST DAS BILD GANZ DA? =====");
  await bereichAufbauen(seite, "kunden");
  const buehne = await seite.evaluate(() => {
    const el = document.querySelector(".vw-buehne");
    if (!el) return null;
    const st = getComputedStyle(el);
    const r = el.getBoundingClientRect();
    /* Seit Buehne und Lampe in einem gemeinsamen Raum stecken, sitzen
       Haltung, Stapelplatz und die Auszeichnung als Zierde am RAUM --
       die Buehne darin ist absolut positioniert. Geprueft wird deshalb
       der Raum, sonst misst der Test am falschen Element. */
    const raum = el.parentElement;
    const rs = getComputedStyle(raum);
    const treffer = st.backgroundImage.match(/img\/([a-z0-9-]+\.webp)/i);
    return {
      datei: treffer ? treffer[1] : "(keins)",
      groesse: st.backgroundSize,
      lage: st.backgroundPosition,
      haltung: st.position,
      breite: Math.round(r.width),
      hoehe: Math.round(r.height),
      haltungRaum: rs.position,
      z: parseInt(rs.zIndex, 10),
      klicks: rs.pointerEvents,
      versteckt: raum.getAttribute("aria-hidden"),
    };
  });
  if (!buehne) { pruefe("Buehne vorhanden", false); }
  else {
    /* Das ist der Kern der Korrektur. Beim ersten Anlauf stand hier
       "190% auto" plus ein Ausschnitt wie "84% 46%" -- damit war der
       groesste Teil des Bildes weggeschnitten. */
    pruefe("das Bild wird NICHT gezoomt", buehne.groesse === "cover", buehne.groesse);
    pruefe("und NICHT einseitig ausgeschnitten",
      /50%\s+50%|center/.test(buehne.lage), buehne.lage);
    pruefe("die Buehne fuellt den ganzen Bildschirm",
      buehne.breite >= 1430 && buehne.hoehe >= 890, `${buehne.breite}x${buehne.hoehe}`);
    pruefe("sie steht fest, der Inhalt scrollt darueber",
      buehne.haltungRaum === "fixed", buehne.haltungRaum);
    pruefe("sie liegt hinter allem", buehne.z < 0, "z-index " + buehne.z);
    pruefe("sie faengt keine Klicks ab", buehne.klicks === "none", buehne.klicks);
    pruefe("sie ist als Zierde ausgezeichnet", buehne.versteckt === "true");
  }

  console.log("\n===== 2. TRAEGT ALLES GLAS, WORAUF GELESEN WIRD? =====");
  const glas = await seite.evaluate(() => {
    const pruefen = [".wd-karte", ".vw-filter-knopf", ".vw-wer"];
    const raus = {};
    for (const w of pruefen) {
      const el = document.querySelector("#vw-bereich " + w);
      if (!el) { raus[w] = "(nicht gefunden)"; continue; }
      const st = getComputedStyle(el);
      raus[w] = st.backdropFilter || st.webkitBackdropFilter || "keins";
    }
    return raus;
  });
  for (const [w, wert] of Object.entries(glas)) {
    if (wert === "(nicht gefunden)") continue;
    pruefe(`  ${w} hat Rueckseiten-Unschaerfe`, /blur/.test(wert), wert.slice(0, 34));
  }

  console.log("\n===== 3. BLEIBT DER TEXT LESBAR? =====");
  for (const bereich of BEREICHE) {
    await bereichAufbauen(seite, bereich);

    const aufGlas = await unruheAn(seite, "#vw-probe .vw-karte");
    await seite.evaluate(() => {
      document.querySelector(".vw-buehne").style.visibility = "hidden";
    });
    await seite.waitForTimeout(350);
    await bereichAufbauen(seite, bereich);
    const ohneBuehne = await unruheAn(seite, "#vw-probe .vw-karte");
    await seite.evaluate(() => {
      document.querySelector(".vw-buehne").style.visibility = "";
    });
    await seite.waitForTimeout(250);

    const mehr = (aufGlas ?? 99) - (ohneBuehne ?? 0);
    /* Etwas Struktur DARF durchkommen -- das ist ja der Reiz. Sie darf
       nur nicht so stark werden, dass die Schrift darauf flimmert. */
    pruefe(`  ${bereich}: der Kachelgrund bleibt ruhig`,
      aufGlas !== null && ohneBuehne !== null && mehr <= 8,
      `mit Buehne ${aufGlas}, ohne ${ohneBuehne} → plus ${mehr}`);

    await bereichAufbauen(seite, bereich);
    /* Der tatsaechliche Kachelgrund wird aus dem BILD gelesen, nicht aus
       dem Stilblatt: Die Kachel ist halbdurchsichtig, ihr rechnerischer
       Wert sagt nichts darueber, was am Ende darunter liegt. */
    const stelle = await seite.evaluate(() => {
      const k = document.querySelector("#vw-probe .vw-karte");
      const r = k.getBoundingClientRect();
      return { x: Math.round(r.x + r.width * 0.72), y: Math.round(r.y + r.height * 0.62) };
    });
    const punkt = await seite.screenshot({
      clip: { x: stelle.x, y: stelle.y, width: 10, height: 10 } });
    const grundfarbe = await seite.evaluate(async (daten) => {
      const bl = await fetch("data:image/png;base64," + daten).then((r) => r.blob());
      const bm = await createImageBitmap(bl);
      const c = new OffscreenCanvas(bm.width, bm.height);
      const x = c.getContext("2d");
      x.drawImage(bm, 0, 0);
      const d = x.getImageData(0, 0, bm.width, bm.height).data;
      let r = 0, g = 0, b = 0, n = 0;
      for (let i = 0; i < d.length; i += 4) { r += d[i]; g += d[i + 1]; b += d[i + 2]; n++; }
      return [Math.round(r / n), Math.round(g / n), Math.round(b / n)];
    }, punkt.toString("base64"));

    const schrift = await seite.evaluate(() =>
      getComputedStyle(document.querySelector("#vw-probe-text"))
        .color.match(/[\d.]+/g).slice(0, 3).map(Number));

    const v = verhaeltnis(schrift, grundfarbe);
    pruefe(`  ${bereich}: Text auf der Kachel erfuellt AA (4,5:1)`,
      v >= 4.5, v.toFixed(2) + ":1");
  }

  console.log("\n===== 3b. FOLGT DAS LICHT DER MAUS? =====");
  await bereichAufbauen(seite, "kunden");
  const karte = seite.locator("#vw-probe .vw-karte").first();
  const kasten = await karte.boundingBox();

  /* WICHTIG: mit steps bewegen. Ein Sprung ohne Zwischenschritte
     erzeugt kein pointermove -- der Test wuerde "Licht folgt nicht"
     melden, obwohl alles stimmt. Diese Falle hat hier schon einmal
     einen Fehlalarm ausgeloest. */
  await seite.mouse.move(kasten.x + 30, kasten.y + 20, { steps: 8 });
  await seite.waitForTimeout(320);
  const lichtA = await karte.evaluate((e) => ({
    x: getComputedStyle(e).getPropertyValue("--wd-lichtx").trim(),
    y: getComputedStyle(e).getPropertyValue("--wd-lichty").trim(),
  }));
  await seite.mouse.move(kasten.x + kasten.width - 40,
                         kasten.y + kasten.height - 20, { steps: 16 });
  await seite.waitForTimeout(400);
  const lichtB = await karte.evaluate((e) => {
    const st = getComputedStyle(e);
    const na = getComputedStyle(e, "::after");
    return {
      x: st.getPropertyValue("--wd-lichtx").trim(),
      y: st.getPropertyValue("--wd-lichty").trim(),
      lumen: st.getPropertyValue("--wd-lumen").trim(),
      kante: st.backgroundImage.includes("radial-gradient"),
      kegel: na.backgroundImage,
    };
  });
  pruefe("das Licht wandert mit dem Zeiger",
    lichtA.x !== lichtB.x && lichtA.y !== lichtB.y,
    lichtA.x + "/" + lichtA.y + " -> " + lichtB.x + "/" + lichtB.y);
  pruefe("die Kachelkante leuchtet an der Zeigerstelle", lichtB.kante);
  /* Der Lichtkegel muss die Leitfarbe des Bereichs tragen, nicht die
     Grundfarbe -- sonst leuchtet im Kundenbereich Baby Blue statt
     Indigo. */
  pruefe("der Lichtkegel traegt die Leitfarbe",
    /97,\s*92,\s*255/.test(lichtB.kegel), lichtB.lumen);

  console.log("\n===== 3c. BEWEGT SICH DIE BUEHNE MIT? =====");
  await seite.mouse.move(160, 780, { steps: 12 });
  await seite.waitForTimeout(650);
  const lage1 = await seite.evaluate(() =>
    getComputedStyle(document.querySelector(".vw-buehne")).translate);
  await seite.mouse.move(1320, 130, { steps: 20 });
  await seite.waitForTimeout(750);
  const lage2 = await seite.evaluate(() =>
    getComputedStyle(document.querySelector(".vw-buehne")).translate);
  pruefe("die Buehne verschiebt sich gegen den Zeiger",
    lage1 !== lage2 && lage1 !== "none", lage1 + " -> " + lage2);

  /* Der Ausschlag muss klein bleiben. Waere er gross, wuerde beim Lesen
     staendig etwas im Augenwinkel wandern. */
  const weite = Math.max(...String(lage2).match(/-?[\d.]+/g).map((n) => Math.abs(+n)));
  pruefe("und zwar nur wenige Bildpunkte", weite <= 16, weite.toFixed(1) + "px");

  console.log("\n===== 3d. DER LEUCHTBALKEN =====");
  /* Der Balken muss GENAU am aktiven Reiter sitzen. Gemessen wird
     gegen die echten Masse des Reiters -- feste Werte waeren hier
     zwangslaeufig falsch, weil die Reiter unterschiedlich breit sind
     und beim Sprachwechsel wandern. */
  const balkenPruefen = async (bereich) => {
    /* Erst den Bereich sichtbar machen, DANN klicken: Ein Klick auf
       einen zugeklappten Arbeitsbereich misst zwangslaeufig 0.
       Danach wieder aufmachen -- der Klick loest die Zugangspruefung
       aus, die korrekterweise zur Anmeldung zurueckschaltet. */
    await bereichAufbauen(seite, bereich);
    await seite.click(`[data-tab="${bereich}"]`).catch(() => {});
    await seite.waitForTimeout(500);
    await bereichAufbauen(seite, bereich);
    await seite.evaluate(() => window.vwBalkenSetzen && window.vwBalkenSetzen());
    await seite.waitForTimeout(400);
    return seite.evaluate(() => {
      const l = document.querySelector("#vw-bereich .vw-tabs");
      const a = l.querySelector(".vw-filter-knopf.vw-an");
      const lr = l.getBoundingClientRect();
      const ar = a.getBoundingClientRect();
      const st = l.style;
      return {
        gesetztX: parseInt(st.getPropertyValue("--vw-balken-x"), 10),
        gesetztB: parseInt(st.getPropertyValue("--vw-balken-b"), 10),
        echtX: Math.round(ar.left - lr.left),
        echtB: Math.round(ar.width),
        sichtbar: st.getPropertyValue("--vw-balken-da"),
        reiter: a.textContent.trim().slice(0, 12),
      };
    });
  };

  const b1 = await balkenPruefen("uebersicht");
  pruefe("der Balken sitzt am aktiven Reiter",
    Math.abs(b1.gesetztX - b1.echtX) <= 2 && Math.abs(b1.gesetztB - b1.echtB) <= 2,
    `${b1.reiter}: gesetzt ${b1.gesetztX}/${b1.gesetztB}, echt ${b1.echtX}/${b1.echtB}`);
  pruefe("und er ist sichtbar", b1.sichtbar === "1", b1.sichtbar);
  /* Der haeufigste Fehlerfall: Beim Start ist der Arbeitsbereich noch
     versteckt, die Leiste also 0 Punkte breit. Wer nur auf "resize"
     horcht, misst nie nach -- der Balken bleibt auf Breite 0. */
  pruefe("er hat eine echte Breite (nicht 0)", b1.gesetztB > 20, b1.gesetztB + "px");

  const b2 = await balkenPruefen("zahlungen");
  pruefe("er wandert zum neuen Reiter mit",
    b2.gesetztX !== b1.gesetztX && Math.abs(b2.gesetztX - b2.echtX) <= 2,
    `${b1.gesetztX}px -> ${b2.gesetztX}px`);

  console.log("\n===== 3e. TAUCHEN DIE KACHELN GESTAFFELT AUF? =====");
  const staffel = await seite.evaluate(() => {
    const be = document.querySelector("#vw-bereich");
    /* EIGENER Behaelter. Frueher wurde hier die Probekachel geleert --
       danach fehlten ihr Ueberschrift und Text, und der Neigungstest
       weiter unten stuerzte ab, weil er auf ein nicht vorhandenes
       Element zugriff. */
    let probe = document.querySelector("#vw-staffel");
    if (!probe) {
      probe = document.createElement("div");
      probe.id = "vw-staffel";
      be.appendChild(probe);
    }
    probe.innerHTML = "";
    for (let i = 0; i < 4; i++) {
      const k = document.createElement("button");
      k.className = "vw-karte";
      k.style.padding = "1rem";
      k.textContent = "Kachel " + (i + 1);
      probe.appendChild(k);
    }
    return [...probe.querySelectorAll(".wd-karte")].map((k) => ({
      name: getComputedStyle(k).animationName,
      versatz: getComputedStyle(k).animationDelay,
    }));
  });
  pruefe("die Kacheln haben eine Auftauch-Animation",
    staffel.every((k) => k.name === "vw-kachel-auf"),
    staffel.map((k) => k.name).join(", "));
  pruefe("und jede startet etwas spaeter als die davor",
    new Set(staffel.map((k) => k.versatz)).size === staffel.length,
    staffel.map((k) => k.versatz).join(" "));

  console.log("\n===== 3f. ZEIGERLAMPE, PRISMA UND PARTIKEL =====");
  await bereichAufbauen(seite, "anfragen");
  await seite.mouse.move(300, 300, { steps: 8 });
  await seite.waitForTimeout(300);
  await seite.mouse.move(1050, 380, { steps: 20 });
  await seite.waitForTimeout(700);

  const extra = await seite.evaluate(() => {
    const raum = document.querySelector(".vw-raum");
    const lampe = document.querySelector(".vw-lampe");
    const flocken = document.querySelector(".vw-flocken");
    const karte = document.querySelector("#vw-probe .vw-karte");
    const ls = getComputedStyle(lampe);
    return {
      raumIsoliert: getComputedStyle(raum).isolation,
      mischung: ls.mixBlendMode,
      lampeAn: lampe.classList.contains("vw-lampe-an"),
      mx: lampe.style.getPropertyValue("--vw-mx"),
      my: lampe.style.getPropertyValue("--vw-my"),
      flockenZahl: flocken ? flocken.children.length : 0,
      flockeLaeuft: flocken && flocken.children[0]
        ? getComputedStyle(flocken.children[0]).animationName : "",
      kachelKante: karte ? getComputedStyle(karte).backgroundImage : "",
    };
  });

  /* Die Isolation ist der Kern. Ohne sie mischt sich die Lampe mit
     ALLEM in ihrem Stapelkontext -- auch mit Kacheln, die eigentlich
     darueber liegen. Beim Bauen lag dadurch ein gruenlicher Fleck
     mitten auf einer Karte. */
  pruefe("Buehne und Lampe stecken in einem isolierten Raum",
    extra.raumIsoliert === "isolate", extra.raumIsoliert);
  /* soft-light rechnet mit dem, was darunter liegt: dunkle Stellen
     bleiben dunkel, vorhandene Lichtkanten werden verstaerkt. "screen"
     oder "overlay" wuerden die Eiskanten ausbrennen lassen. */
  pruefe("die Lampe beleuchtet, statt zu ueberdecken",
    extra.mischung === "soft-light", extra.mischung);
  pruefe("sie folgt dem Zeiger", extra.mx === "1050px" && extra.my === "380px",
    extra.mx + " / " + extra.my);
  /* Erst zeigen, wenn der Zeiger wirklich da war -- sonst haengt beim
     Laden ein Lichtfleck in der Bildmitte, den niemand dorthin gelegt
     hat. */
  pruefe("und war vor der ersten Zeigerbewegung aus", extra.lampeAn === true);

  pruefe("es schweben Partikel im Raum", extra.flockenZahl === 9,
    extra.flockenZahl + " Stueck");
  pruefe("und sie bewegen sich", extra.flockeLaeuft === "vw-schweben",
    extra.flockeLaeuft);

  /* Der Prisma-Schimmer faechert die Kante in Nachbartoene auf. Geprueft
     wird, dass mehr als nur die Leitfarbe drinsteckt -- sonst waere es
     wieder ein einfarbiger Rand. */
  const toene = (extra.kachelKante.match(/rgba?\(/g) || []).length;
  pruefe("die Kachelkante bricht das Licht in mehrere Toene", toene >= 6,
    toene + " Farbstufen");

  console.log("\n===== 3g. NEIGEN SICH DIE KACHELN? =====");
  await bereichAufbauen(seite, "kunden");
  const platte = seite.locator("#vw-probe .vw-karte").first();
  const pk = await platte.boundingBox();

  /* Mit steps bewegen, sonst entsteht kein pointermove. */
  await seite.mouse.move(pk.x + 25, pk.y + 20, { steps: 10 });
  await seite.waitForTimeout(420);
  const eckeA = await platte.evaluate((e) => ({
    nx: parseFloat(e.style.getPropertyValue("--vw-nx")),
    ny: parseFloat(e.style.getPropertyValue("--vw-ny")),
    matrix: getComputedStyle(e).transform,
  }));
  await seite.mouse.move(pk.x + pk.width - 25, pk.y + pk.height - 20, { steps: 18 });
  await seite.waitForTimeout(420);
  const eckeB = await platte.evaluate((e) => ({
    nx: parseFloat(e.style.getPropertyValue("--vw-nx")),
    ny: parseFloat(e.style.getPropertyValue("--vw-ny")),
    matrix: getComputedStyle(e).transform,
  }));

  /* Die Werte muessen unabhaengig von der Kachelgroesse sein: -1 am
     linken Rand, +1 am rechten. Sonst kippt eine breite Kachel
     staerker als eine schmale, obwohl der Zeiger relativ gleich steht. */
  /* Geprueft wird der VORZEICHENWECHSEL, nicht ein fester Betrag.
     Eine flache Kachel ist nur gut 100 Punkte hoch -- 20 Punkte vom
     Rand liegen dort schon fast in der Mitte, der senkrechte Wert
     bleibt also klein. Ein Schwellwert von 0,5 haette nur gemessen,
     wie hoch die Testkachel zufaellig ist. */
  pruefe("die Neigung kippt in die Gegenrichtung",
    eckeA.nx < -0.4 && eckeB.nx > 0.4 &&
    eckeA.ny < 0 && eckeB.ny > 0,
    `${eckeA.nx}/${eckeA.ny} -> ${eckeB.nx}/${eckeB.ny}`);
  pruefe("und wird als echte Raumdrehung umgesetzt",
    eckeA.matrix.startsWith("matrix3d") && eckeA.matrix !== eckeB.matrix,
    eckeA.matrix.slice(0, 26) + "...");

  /* Der Ausschlag muss klein bleiben, sonst verzerrt die Schrift. Aus
     der Matrix laesst sich der Winkel ueber den Eintrag [0][2]
     zurueckrechnen: sin(Drehung um die Hochachse). */
  /* NUR den Inhalt der Klammern auswerten. Ein Suchmuster ueber die
     ganze Zeichenkette liest die "3" aus "matrix3d" als erste Zahl mit
     und verschiebt damit jeden Eintrag um eine Stelle -- der Winkel kam
     dadurch als 0,4 Grad heraus statt als 7. */
  const inhalt = eckeB.matrix.slice(eckeB.matrix.indexOf("(") + 1, -1);
  const zahlen = inhalt.split(",").map((n) => parseFloat(n));
  const winkel = Math.abs(Math.asin(Math.max(-1, Math.min(1, zahlen[2]))) * 180 / Math.PI);
  pruefe("aber flach genug, dass die Schrift scharf bleibt", winkel <= 9,
    winkel.toFixed(1) + " Grad");

  /* Beim Verlassen zuruecksetzen -- sonst bleibt die Kachel schraeg
     stehen, nachdem der Zeiger laengst weg ist. */
  await seite.mouse.move(40, 40, { steps: 14 });
  await seite.waitForTimeout(520);
  const zurueck = await platte.evaluate((e) => ({
    nx: e.style.getPropertyValue("--vw-nx"),
    ny: e.style.getPropertyValue("--vw-ny"),
  }));
  pruefe("und sie stellt sich beim Verlassen zurueck",
    zurueck.nx === "0" && zurueck.ny === "0", `${zurueck.nx}/${zurueck.ny}`);

  const tiefe = await seite.evaluate(() => {
    const k = document.querySelector("#vw-probe .vw-karte");
    const h = k.querySelector(".vw-karte-nr");
    const p = k.querySelector(".vw-karte-mitte");
    return {
      ueberschrift: getComputedStyle(h).transform,
      absatz: getComputedStyle(p).transform,
      ecken: getComputedStyle(k).borderRadius,
      glanz: getComputedStyle(k, "::before").backgroundImage.slice(0, 30),
    };
  });
  /* Der Inhalt steht vor der Flaeche, Ueberschriften weiter vorn als
     Fliesstext -- dadurch entsteht beim Neigen echte Staffelung. */
  pruefe("der Inhalt steht vor der Flaeche",
    tiefe.ueberschrift !== "none" && tiefe.absatz !== "none" &&
    tiefe.ueberschrift !== tiefe.absatz,
    "Ueberschrift und Text auf verschiedenen Ebenen");
  /* Ungleiche Ecken: Eine gleichmaessig gerundete Kachel liest sich als
     Knopf, die ungleiche nimmt die Facetten der Motive auf. */
  const radien = tiefe.ecken.split(/\s+/).map(parseFloat);
  pruefe("die Ecken sind ungleich geschliffen",
    new Set(radien).size > 1, tiefe.ecken);
  pruefe("und ein Glanzstreifen liegt auf der Platte",
    /gradient/.test(tiefe.glanz), tiefe.glanz);

  console.log("\n===== 4. WECHSELT DER RAUM WIRKLICH? =====");
  const gesehen = [];
  for (const bereich of BEREICHE) {
    await bereichAufbauen(seite, bereich);
    const d = await seite.evaluate(() => {
      const st = getComputedStyle(document.querySelector(".vw-buehne"));
      const t = st.backgroundImage.match(/img\/([a-z0-9-]+\.webp)/i);
      return {
        datei: t ? t[1] : "(keins)",
        farbe: getComputedStyle(document.documentElement)
          .getPropertyValue("--vw-farbe").trim(),
      };
    });
    gesehen.push({ bereich, ...d });
    console.log(`  ${bereich.padEnd(11)} ${d.datei.padEnd(22)} ${d.farbe}`);
  }
  pruefe("jeder Bereich hat eine eigene Leitfarbe",
    new Set(gesehen.map((g) => g.farbe)).size === 6,
    new Set(gesehen.map((g) => g.farbe)).size + " von 6");
  pruefe("mindestens fuenf verschiedene Motive",
    new Set(gesehen.map((g) => g.datei)).size >= 5,
    new Set(gesehen.map((g) => g.datei)).size + " verschiedene");

  pruefe("kein Skriptfehler", skriptfehler.length === 0, skriptfehler[0] || "");
  await bereichAufbauen(seite, "kunden");
  await seite.screenshot({ path: "pruef-vw-schmuck-computer.png" });
  await seite.close();

  console.log("\n===== 5. REDUZIERTE BEWEGUNG =====");
  const ruhig = await browser.newPage({
    viewport: { width: 1440, height: 900 }, reducedMotion: "reduce" });
  await ruhig.goto("http://127.0.0.1:4404/webdesign/verwaltung.html");
  await ruhig.waitForTimeout(1300);
  await bereichAufbauen(ruhig, "projekte");
  const bewegung = await ruhig.evaluate(() => {
    const st = getComputedStyle(document.querySelector(".vw-buehne"));
    return { animation: st.animationName, sichtbar: st.visibility };
  });
  pruefe("keine Animation bei reduzierter Bewegung",
    bewegung.animation === "none", bewegung.animation);
  /* Abschalten heisst NICHT verschwinden. */
  pruefe("die Buehne ist trotzdem da", bewegung.sichtbar === "visible", bewegung.sichtbar);
  await ruhig.mouse.move(200, 700, { steps: 10 });
  await ruhig.waitForTimeout(400);
  await ruhig.mouse.move(1200, 200, { steps: 16 });
  await ruhig.waitForTimeout(600);
  const ruhigeLage = await ruhig.evaluate(() => {
    const b = document.querySelector(".vw-buehne");
    const vor = getComputedStyle(b, "::before");
    return {
      translate: getComputedStyle(b).translate,
      reflex: vor.animationName,
      reflexSichtbar: parseFloat(vor.opacity),
    };
  });
  pruefe("keine Parallaxe bei reduzierter Bewegung",
    ruhigeLage.translate === "none", ruhigeLage.translate);
  const ruhigExtra = await ruhig.evaluate(() => {
    const be = document.querySelector("#vw-bereich");
    const k = document.createElement("button");
    k.className = "vw-karte";
    be.appendChild(k);
    const l = document.querySelector("#vw-bereich .vw-tabs");
    return {
      kachel: getComputedStyle(k).animationName,
      balken: getComputedStyle(l, "::after").transitionDuration,
    };
  });
  const ruhigNeigung = await ruhig.evaluate(() => {
    const be = document.querySelector("#vw-bereich");
    let k = be.querySelector(".vw-karte");
    if (!k) { k = document.createElement("button"); k.className = "vw-karte"; be.appendChild(k); }
    return getComputedStyle(k).transform;
  });
  pruefe("keine Neigung bei reduzierter Bewegung",
    ruhigNeigung === "none", ruhigNeigung);

  pruefe("keine Auftauch-Animation der Kacheln",
    ruhigExtra.kachel === "none", ruhigExtra.kachel);
  /* Geprueft wird "praktisch sofort", nicht wortwoertlich "0s".

     Die Testumgebung emuliert reduzierte Bewegung, indem sie alle
     Uebergaenge auf eine Mikrosekunde setzt statt auf null -- gemeldet
     wird dann "1e-06s". Wahrnehmbar ist das identisch; ein Test auf
     exakt "0s" wuerde nur die Emulation messen, nicht die Regel. */
  const laengste = Math.max(...ruhigExtra.balken.split(",")
    .map((t) => parseFloat(t) || 0));
  pruefe("und der Balken gleitet nicht, sondern springt",
    laengste <= 0.01, ruhigExtra.balken);

  const ruhigFlocken = await ruhig.evaluate(() => {
    const f = document.querySelector(".vw-flocken");
    return f ? getComputedStyle(f).display : "(fehlt)";
  });
  /* Komplett weg, nicht nur angehalten: Ein eingefrorener Punkt mitten
     im Bild waere ein Fleck ohne Sinn. */
  pruefe("keine Partikel bei reduzierter Bewegung",
    ruhigFlocken === "none", ruhigFlocken);

  pruefe("und kein Lichtreflex",
    ruhigeLage.reflex === "none" && ruhigeLage.reflexSichtbar === 0,
    ruhigeLage.reflex + ", Deckkraft " + ruhigeLage.reflexSichtbar);
  await ruhig.close();

  console.log("\n===== 6. HANDY =====");
  const handy = await browser.newPage({ viewport: { width: 390, height: 844 } });
  await handy.goto("http://127.0.0.1:4404/webdesign/verwaltung.html");
  await handy.waitForTimeout(1300);
  await bereichAufbauen(handy, "zahlungen");
  const hd = await handy.evaluate(() => {
    const st = getComputedStyle(document.querySelector(".vw-buehne"));
    const t = st.backgroundImage.match(/img\/([a-z0-9-]+\.webp)/i);
    return { datei: t ? t[1] : "(keins)", groesse: st.backgroundSize };
  });
  pruefe("Handy: kleine Bildfassung", hd.datei.includes("-klein"), hd.datei);
  pruefe("Handy: auch hier kein Zoom", hd.groesse === "cover", hd.groesse);
  const ueberlauf = await handy.evaluate(() =>
    document.documentElement.scrollWidth - document.documentElement.clientWidth);
  pruefe("Handy: nichts laeuft seitlich ueber", ueberlauf <= 1, ueberlauf + "px");
  await handy.screenshot({ path: "pruef-vw-schmuck-handy.png" });
  await handy.close();

  const verpasst = fehlt.filter((f) => /\.(webp|jpg|png|css|js|svg)$/.test(f));
  pruefe("keine fehlende Datei", verpasst.length === 0, verpasst.join(", ") || "keine");

  console.log(`\n===== ${ok} bestanden, ${fehl} fehlgeschlagen =====`);
  await browser.close();
  srv.close();
  process.exit(fehl ? 1 : 0);
});