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]>

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