Die farbige Oberkante der Kacheln ist zurueck

Aufgefallen an einem Screenshot: Bei einer Kachel lag oben ein lila
Streifen, bei den anderen fehlte jede Farbe.

Die Ursache war meine eigene Aenderung von gerade eben. Der
Glanzstreifen kam ins ::before -- dort wohnt aber schon die farbige
Oberkante (.wd-karte--kappe), und zwar seit dem urspruenglichen Bau der
Seite.

Ein Element hat nur ZWEI Pseudoelemente, und beide waren belegt: ::after
traegt den Lichtkegel, ::before die Kante. Der Glanz hat sich das
::before genommen und die Kante damit still ueberschrieben.

Warum es nur teilweise auffiel: ".wd-karte--lila.wd-karte--kappe::before"
hat zwei Klassen und damit mehr Gewicht als mein
".wd-karte::before" -- die lila Farbe blieb also stehen, die blaue
verschwand. Deshalb sah es aus wie ein Zufall statt wie ein Fehler.

DIE LOESUNG

Glanzstreifen und Lichtkegel teilen sich jetzt das ::after -- als zwei
Hintergrundebenen desselben Pseudoelements. Das ::before ist wieder
frei fuer die Oberkante.

Beides funktioniert unveraendert: Der Glanz wandert weiterhin mit der
Neigung (er nimmt --wd-nx in seinen Winkel auf), der Lichtkegel
weiterhin mit dem Zeiger.

DIE PRUEFUNG DAZU

Ein neuer Abschnitt in pruef-bewegung.mjs misst alle acht Kacheln mit
Oberkante: 5 Punkte Hoehe, ganz oben sitzend, Farbe vorhanden -- und
ausdruecklich BLAUE UND LILA zusammen. Haette der Test nur eine Sorte
angesehen, waere genau dieser Fehler wieder durchgerutscht, denn die
lila Fassung war ja nie kaputt.

Dazu die Gegenprobe, dass der Glanz nicht einfach verlorengegangen ist:
Das ::after muss beide Verlaeufe tragen.

Geprueft: 296 Pruefungen gruen (Bewegung 32, Portfolio 19, Verwaltung 62,
CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42,
Angebot 54).

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

assets/css/webdesign.css

@@ -687,32 +687,14 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   .wd-karte h2, .wd-karte h3 { transform: translateZ(28px); }
 
 
-  /* Ein schmales Licht, das ueber die Platte laeuft und mit der Neigung
-     wandert. */
-  .wd-karte::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    background: linear-gradient(
-      calc(112deg + var(--wd-nx, 0) * 26deg),
-      transparent 34%,
-      rgb(255 255 255 / .06) 46%,
-      rgb(var(--wd-lumen) / .14) 50%,
-      rgb(255 255 255 / .06) 54%,
-      transparent 66%);
-    opacity: 0;
-    transition: opacity .3s ease;
-  }
-  .wd-karte:hover::before { opacity: 1; }
+  /* Der Glanzstreifen sitzt beim Lichtkegel im ::after -- siehe dort.
+     Das ::before bleibt frei fuer die farbige Oberkante
+     (.wd-karte--kappe), die es schon vor allen Lichteffekten gab. */
 }
 
 @media (prefers-reduced-motion: reduce) {
   .wd-karte, .wd-karte:hover { transform: none; transition: none; }
   .wd-karte > *, .wd-karte h2, .wd-karte h3 { transform: none; }
-  .wd-karte::before { display: none; }
 }
 
 /* =====================================================================
@@ -2346,7 +2328,26 @@ a.wd-karte:active, .wd-karte--klickbar:active {
        Grund, warum sich Licht wie Licht anfuehlt und nicht wie ein
        Schalter. */
     transition: opacity .30s ease;
-    background: radial-gradient(
+    /* ZWEI Ebenen: oben der Glanzstreifen, darunter der Lichtkegel.
+
+       Der Glanz lag zuerst im ::before -- und hat damit die farbige
+       Oberkante geloescht, die dort schon wohnt (.wd-karte--kappe).
+       Sichtbar war das als "bei einer Kachel Farbe oben, bei den
+       anderen keine": Die Lila-Fassung hat eine Klasse mehr und damit
+       mehr Gewicht, ihre Farbe blieb; die blaue verschwand.
+
+       Ein Element hat nur zwei Pseudoelemente. Beide waren belegt, also
+       teilen sich Glanz und Lichtkegel jetzt eines -- als zwei
+       Hintergrundebenen desselben ::after. */
+    background:
+      linear-gradient(
+        calc(112deg + var(--wd-nx, 0) * 26deg),
+        transparent 34%,
+        rgb(255 255 255 / .07) 46%,
+        rgb(var(--wd-lumen) / .16) 50%,
+        rgb(255 255 255 / .07) 54%,
+        transparent 66%),
+      radial-gradient(
         220px circle at var(--wd-lichtx) var(--wd-lichty),
         rgb(var(--wd-lumen) / .28),
         rgb(var(--wd-lumen) / .10) 40%,

pruef-bewegung.mjs

@@ -129,6 +129,49 @@ srv.listen(4405, async () => {
     einblendung ? `translate: ${einblendung.translate}` : "kein .wd-auf gefunden");
   await s2.close();
 
+  console.log("\n2b. DIE FARBIGE OBERKANTE DARF NICHT VERSCHWINDEN");
+  const s3 = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+  await s3.goto("http://127.0.0.1:4405/webdesign/index.html");
+  await s3.waitForTimeout(4500);
+  const kappen = await s3.evaluate(() =>
+    [...document.querySelectorAll(".wd-karte--kappe")].slice(0, 8).map((k) => {
+      const v = getComputedStyle(k, "::before");
+      return {
+        lila: k.classList.contains("wd-karte--lila"),
+        hoehe: parseFloat(v.height),
+        oben: parseFloat(v.top),
+        farbig: /gradient/.test(v.backgroundImage),
+      };
+    }));
+  pruefe("es gibt Kacheln mit Oberkante", kappen.length > 0, kappen.length + " Stueck");
+
+  /* Das ist der Kern: Ein Element hat nur ZWEI Pseudoelemente. Der
+     Glanzstreifen lag zuerst ebenfalls im ::before und hat die farbige
+     Oberkante stillschweigend geloescht -- sichtbar als "bei einer
+     Kachel Farbe oben, bei den anderen keine". Die Lila-Fassung hat
+     eine Klasse mehr und damit mehr Gewicht, ihre Farbe blieb; die
+     blaue verschwand. Deshalb wird hier ausdruecklich BEIDES geprueft. */
+  pruefe("jede davon hat eine 5 Punkte hohe Kante ganz oben",
+    kappen.every((k) => k.hoehe === 5 && k.oben === 0),
+    kappen.map((k) => k.hoehe + "px").join(" "));
+  pruefe("und jede traegt Farbe", kappen.every((k) => k.farbig),
+    kappen.filter((k) => k.farbig).length + " von " + kappen.length);
+  pruefe("blaue UND lila Kacheln sind dabei",
+    kappen.some((k) => k.lila) && kappen.some((k) => !k.lila),
+    kappen.filter((k) => k.lila).length + " lila, " +
+    kappen.filter((k) => !k.lila).length + " blau");
+
+  /* Der Glanz muss trotzdem noch da sein -- er ist jetzt die erste von
+     zwei Hintergrundebenen im ::after. */
+  const glanz = await s3.evaluate(() => {
+    const k = document.querySelector(".wd-karte");
+    return getComputedStyle(k, "::after").backgroundImage;
+  });
+  pruefe("der Glanzstreifen liegt jetzt beim Lichtkegel",
+    /linear-gradient/.test(glanz) && /radial-gradient/.test(glanz),
+    (glanz.match(/gradient/g) || []).length + " Verlaeufe");
+  await s3.close();
+
   console.log("\n3. BEI REDUZIERTER BEWEGUNG IST ALLES AUS");
   const ruhig = await browser.newPage({
     viewport: { width: 1440, height: 900 }, reducedMotion: "reduce" });

webdesign/sw.js

@@ -34,7 +34,7 @@
    Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
    Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
    Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v44";
+const CACHE_NAME = "dogfather-webdesign-v45";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */