Verwaltung: die Kacheln werden zu geschliffenen Glasplatten

Buehne und Zeigerlicht bleiben unveraendert. Diesmal geht es nur um die
Kacheln selbst.

SIE LIEGEN IM RAUM, NICHT AUF DER SEITE

Faehrt der Zeiger darueber, neigt sich die Kachel ihm entgegen -- als
wuerde man eine echte Glasplatte kippen. Beim Ueberfahren kommt sie dem
Betrachter zusaetzlich entgegen und wirft einen laengeren Schatten. Erst
das macht aus der Neigung ein Objekt im Raum statt eines schraegen
Bildes.

Der Ausschlag liegt bei hoechstens 7 Grad (gemessen 6,7). Alles darueber
verzerrt die Schrift sichtbar, und auf diesen Kacheln wird gearbeitet,
nicht nur geschaut.

DER INHALT STEHT VOR DER FLAECHE

Ueberschriften weiter vorn als Fliesstext. Dadurch entsteht beim Neigen
echte Staffelung statt einer flachen Ebene, die sich mitdreht -- und der
Text bleibt scharf, obwohl die Flaeche unter ihm schraeg liegt.

DAZU EIN GLANZSTREIFEN UND UNGLEICHE ECKEN

Ein schmales Licht laeuft ueber die Platte und wandert mit der Neigung.
Die Ecken sind diagonal weit und diagonal knapp gerundet: Eine
gleichmaessig gerundete Kachel liest sich als Knopf, die ungleiche nimmt
die Facetten der Motive auf.

DIE FALLE, DIE ICH SCHON KANNTE

Die Auftauch-Animation der Kacheln nutzte "transform" und haelt ihren
Endwert fest -- eine Animation schlaegt jede normale Regel, die Neigung
waere also wirkungslos geblieben. Genau dieselbe Falle wie zuvor bei der
Buehne, nur eine Ebene tiefer. Die Animation nutzt jetzt "translate" und
"scale" als eigene Eigenschaften; "transform" bleibt der Neigung
vorbehalten.

DREI FEHLER IM TEST, NICHT IN DER SEITE

- Der Staffelungstest raeumte die Probekachel leer. Danach fehlten ihr
  Ueberschrift und Text, und der Neigungstest stuerzte ab, weil er auf
  ein nicht vorhandenes Element zugriff. Er hat jetzt einen eigenen
  Behaelter.
- Die Winkelrechnung las die "3" aus "matrix3d" als erste Zahl mit und
  verschob damit jeden Eintrag um eine Stelle. Der Winkel kam als 0,4
  Grad heraus statt als 6,7 -- die Pruefung "flach genug" waere also
  immer gruen gewesen, egal wie stark die Kachel kippt.
- Der Schwellwert fuer den senkrechten Ausschlag war zu streng. Eine
  flache Kachel ist nur gut 100 Punkte hoch; 20 Punkte vom Rand liegen
  dort schon fast in der Mitte. Geprueft wird jetzt der
  Vorzeichenwechsel statt eines festen Betrags.

Bei prefers-reduced-motion ist alles davon aus: keine Neigung, keine
Tiefe, kein Glanz. Ohne feinen Zeiger entfaellt es ebenfalls -- auf
einem Telefon gibt es kein Schweben.

Geprueft: 260 Pruefungen gruen (Verwaltung 62, Portfolio 15, CRYONOVA 53,
Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54).

Co-Authored-By: Claude Opus 5 <[email protected]>

pruef-verwaltung-schmuck.mjs

@@ -345,7 +345,16 @@ srv.listen(4404, async () => {
   console.log("\n===== 3e. TAUCHEN DIE KACHELN GESTAFFELT AUF? =====");
   const staffel = await seite.evaluate(() => {
     const be = document.querySelector("#vw-bereich");
-    const probe = document.querySelector("#vw-probe");
+    /* 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("div");
@@ -422,6 +431,92 @@ srv.listen(4404, async () => {
   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 .wd-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 .wd-karte");
+    const h = k.querySelector("h2");
+    const p = k.querySelector("p");
+    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) {
@@ -490,6 +585,15 @@ srv.listen(4404, async () => {
       balken: getComputedStyle(l, "::after").transitionDuration,
     };
   });
+  const ruhigNeigung = await ruhig.evaluate(() => {
+    const be = document.querySelector("#vw-bereich");
+    let k = be.querySelector(".wd-karte");
+    if (!k) { k = document.createElement("div"); k.className = "wd-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".