Verwaltung: das Licht kommt zurueck, die Buehne atmet

Vier Dinge dazu, drei davon Bewegung, eines eine Reparatur.

1. DAS LICHT FOLGT WIEDER DEM ZEIGER

Es war nie weg. --wd-lichtx/--wd-lichty wurden die ganze Zeit gesetzt,
der Lichtkegel stand korrekt an der richtigen Stelle -- er war nur
unsichtbar geworden. Die 28 % Deckkraft aus dem Grundsystem sind fuer
eine dunkle, undurchsichtige Kachel gedacht. Auf einer Glasflaeche, durch
die eine beleuchtete Kristallwelt schimmert, geht das schlicht unter.

Jetzt wirkt es auf zwei Ebenen: der Lichtkegel auf der Flaeche, und die
KANTE der Kachel leuchtet dort auf, wo der Zeiger steht. Zusammen sieht
es aus, als laege eine echte Lichtquelle ueber dem Glas, statt als waere
ein Fleck aufgemalt. Die Farbe ist die Leitfarbe des Bereichs -- im
Kundenbereich leuchtet es Indigo, bei den Zahlungen Gold.

2. DIE BUEHNE BEWEGT SICH GEGEN DEN ZEIGER

Wenige Bildpunkte, gemessen 5,8 px Ausschlag. Gerade genug, dass sich
der Raum echt anfuehlt statt wie eine Tapete -- und wenig genug, dass
beim Lesen nichts im Augenwinkel wandert. Ein Test haelt die Obergrenze
fest.

3. EIN LICHTREFLEX BEIM BEREICHSWECHSEL

Ein einzelner heller Streifen zieht schraeg ueber die Buehne, genau
einmal, dann ist er weg. Ein Moment, kein Dauerflackern.

4. DIE KACHEL HEBT SICH BEIM UEBERFAHREN AN

Zwei Bildpunkte. Sie soll reagieren, nicht huepfen.

DER FEHLER, DEN DER TEST GEFUNDEN HAT:

Die Parallaxe wirkte zuerst gar nicht. Die Werte kamen sauber an
(--vw-px, --vw-py standen korrekt am Element), das Bild stand trotzdem
still. Grund: Die Einblend-Animation animiert "transform" und haelt
ihren Endwert fest (fill-mode both) -- und eine Animation schlaegt jede
normale Regel. Die Verschiebung steht deshalb jetzt in "translate",
einer eigenen Eigenschaft, die VOR "transform" angewendet wird. Beide
koennen sich so nicht mehr in die Quere kommen.

Alles Bewegte ist bei prefers-reduced-motion aus: keine Parallaxe, kein
Reflex, kein Anheben. Die Buehne bleibt aber sichtbar -- abschalten
heisst nicht verschwinden. Auch das wird geprueft.

Die Parallaxe laeuft nur auf Geraeten mit echtem Zeiger und ist ueber
requestAnimationFrame gedrosselt. Ohne die Drosselung rechnet der
Browser bei jeder einzelnen Zeigerbewegung neu, und das merkt man
ausgerechnet beim Scrollen durch lange Listen.

Geprueft: 236 Pruefungen gruen (Verwaltung 38, Portfolio 15, CRYONOVA 53,
Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54). Die
Lesbarkeit ueber der Buehne liegt weiter bei 11,9 bis 14,6:1, verlangt
sind 4,5:1.

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

pruef-verwaltung-schmuck.mjs

@@ -231,6 +231,62 @@ srv.listen(4404, async () => {
       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 .wd-karte");
+  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===== 4. WECHSELT DER RAUM WIRKLICH? =====");
   const gesehen = [];
   for (const bereich of BEREICHE) {
@@ -273,6 +329,24 @@ srv.listen(4404, async () => {
     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);
+  pruefe("und kein Lichtreflex",
+    ruhigeLage.reflex === "none" && ruhigeLage.reflexSichtbar === 0,
+    ruhigeLage.reflex + ", Deckkraft " + ruhigeLage.reflexSichtbar);
   await ruhig.close();
 
   console.log("\n===== 6. HANDY =====");