diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css
index c8e068fd..4eec4fbf 100644
--- a/assets/css/webdesign.css
+++ b/assets/css/webdesign.css
@@ -2016,3 +2016,117 @@ a.wd-karte:active, .wd-karte--klickbar:active {
.wd .vw-paar dd, .wd .wr-pruef dd, .wd .wr-beleg dd {
max-width: none;
}
+
+/* =====================================================================
+ KACHELN: LICHT UNTER DEM ZEIGER (23.08.2026)
+
+ Die Kacheln hatten Verlaufsrand, Verlaufsfläche, Schatten und
+ Lichtkante — alles richtig, alles statisch. Was fehlte, war das
+ Gefühl von MATERIAL: eine Oberfläche, die auf Licht reagiert.
+
+ Der Effekt: Ein weicher Lichtfleck folgt dem Zeiger über die Kachel.
+ Das ist kein Zierrat, sondern die Fortsetzung derselben Erzählung wie
+ bei der Lichtkante oben — es gibt eine Lichtquelle, und die Fläche
+ verhält sich, als wäre sie aus etwas.
+
+ VIER ENTSCHEIDUNGEN, DAMIT ES HOCHWERTIG UND NICHT BILLIG WIRKT
+
+ 1. Sehr schwach. 13 % Deckkraft. Man soll es SPÜREN, nicht ANSEHEN.
+ Ein greller Fleck sieht nach Spielerei aus; ein kaum sichtbarer
+ nach teurem Material. Passt zugleich zur Dauervorgabe
+ "augenschonend" — nichts blitzt, nichts blendet.
+
+ 2. Nur bei echtem Zeiger (hover: hover). Auf einem Handy gibt es
+ keinen Zeiger; dort bliebe ein Lichtfleck an einer zufälligen
+ Stelle kleben.
+
+ 3. Die Farbe folgt der Kachel. Blaue Kacheln leuchten blau, lila
+ lila — sonst bräche der Effekt die Farbordnung, die überall sonst
+ Bedeutung trägt.
+
+ 4. Aus bei prefers-reduced-motion. Auch wenn sich nichts bewegt:
+ Etwas, das dem Zeiger folgt, ist Bewegung.
+ ===================================================================== */
+@media (hover: hover) and (pointer: fine) {
+ .wd-karte {
+ /* Startwert oben mittig — falls die Kachel vor der ersten
+ Zeigerbewegung schon überfahren wird. */
+ --wd-lichtx: 50%;
+ --wd-lichty: 0%;
+ isolation: isolate;
+ }
+
+ .wd-karte::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ pointer-events: none;
+ z-index: 0;
+ opacity: 0;
+ transition: opacity .28s ease;
+ background: radial-gradient(
+ 380px circle at var(--wd-lichtx) var(--wd-lichty),
+ rgb(var(--wd-blau-rgb) / .22),
+ rgb(var(--wd-blau-rgb) / .08) 38%,
+ transparent 70%
+ );
+ }
+ .wd-karte--lila::after {
+ background: radial-gradient(
+ 380px circle at var(--wd-lichtx) var(--wd-lichty),
+ rgb(var(--wd-lila-rgb) / .24),
+ rgb(var(--wd-lila-rgb) / .08) 38%,
+ transparent 70%
+ );
+ }
+ .wd-karte:hover::after { opacity: 1; }
+
+ /* DER RAND LEUCHTET MIT — und das ist der Teil, der auffällt.
+
+ Die Kachel hat schon zwei Hintergrundebenen: die Fläche
+ (padding-box) und den Verlaufsrand (border-box). Der Rand ist nur
+ einen Pixel breit, aber genau dort lässt sich Licht am stärksten
+ zeigen, ohne dass es kitschig wird.
+
+ Beim Überfahren bekommt die Randebene einen Lichtpunkt an derselben
+ Stelle wie die Fläche. Ergebnis: Die Kante glüht dort auf, wo der
+ Zeiger steht, und verläuft nach beiden Seiten aus. Ein Lichtfleck
+ OHNE mitleuchtende Kante wirkt wie ein Fleck AUF der Kachel; mit ihr
+ wirkt die ganze Kachel beleuchtet.
+
+ Die Fläche bleibt unverändert — sonst würde der Text flackern. */
+ .wd-karte:hover {
+ background:
+ linear-gradient(180deg, rgba(20, 32, 50, .72), rgba(9, 15, 26, .86)) padding-box,
+ radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
+ rgb(var(--wd-blau-rgb) / .95),
+ rgb(var(--wd-blau-rgb) / .30) 42%,
+ rgb(var(--wd-lila-rgb) / .28) 100%) border-box;
+ }
+ .wd-karte--lila:hover {
+ background:
+ linear-gradient(180deg, rgba(26, 22, 48, .72), rgba(12, 10, 24, .88)) padding-box,
+ radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
+ rgb(var(--wd-lila-rgb) / .95),
+ rgb(var(--wd-lila-rgb) / .30) 42%,
+ rgb(var(--wd-blau-rgb) / .26) 100%) border-box;
+ }
+
+ /* Der Inhalt muss ÜBER dem Lichtfleck liegen.
+
+ Ohne das legt sich der absolut gesetzte Lichtfleck über den Text —
+ absolut positionierte Elemente malen über normalen Fluss-Inhalt,
+ auch wenn sie im Quelltext davor stehen. Das Ergebnis wäre ein
+ leichter Schleier auf der Schrift, den man erst bemerkt, wenn man
+ zwei Kacheln nebeneinander vergleicht. */
+ .wd-karte > * { position: relative; z-index: 1; }
+
+ /* Der Rand zieht mit. Ein Lichtfleck ohne mitleuchtende Kante wirkt
+ wie ein Fleck AUF der Kachel statt wie Licht darauf. */
+ .wd-karte { transition: border-color .28s ease, box-shadow .18s cubic-bezier(.2,.8,.3,1), transform .18s cubic-bezier(.2,.8,.3,1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .wd-karte::after { display: none; }
+}
diff --git a/assets/js/wd-core.js b/assets/js/wd-core.js
index 2c977f8d..cafb7bf0 100644
--- a/assets/js/wd-core.js
+++ b/assets/js/wd-core.js
@@ -871,6 +871,53 @@
} else {
start();
}
+ lichtStarten();
+
+ /* ===================================================================
+ LICHT UNTER DEM ZEIGER
+
+ Setzt zwei Variablen auf der überfahrenen Kachel; die eigentliche
+ Darstellung macht das CSS. So bleibt hier nur Rechnen, kein Malen.
+
+ DREI DINGE, DIE ES SPARSAM HALTEN
+
+ 1. EIN Zuhörer am Dokument statt einem je Kachel. Bei zwanzig
+ Kacheln wären das zwanzig — und jede müsste beim Nachladen neuer
+ Inhalte einzeln nachgerüstet werden.
+
+ 2. Geschrieben wird erst im nächsten Bildaufbau
+ (requestAnimationFrame). Der Zeiger meldet sich bis zu tausendmal
+ je Sekunde; der Bildschirm zeichnet sechzigmal. Ohne diese
+ Drosselung rechnet der Browser neunhundert Mal umsonst.
+
+ 3. Gar nicht erst starten, wenn es keinen echten Zeiger gibt oder
+ Bewegung unerwünscht ist. Auf dem Handy bliebe der Lichtfleck an
+ einer zufälligen Stelle kleben.
+ =================================================================== */
+ function lichtStarten() {
+ if (!window.matchMedia) return;
+ if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+ var offen = false;
+ var letzte = null;
+
+ document.addEventListener("pointermove", function (e) {
+ var karte = e.target && e.target.closest ? e.target.closest(".wd-karte") : null;
+ if (!karte) return;
+ letzte = { karte: karte, x: e.clientX, y: e.clientY };
+ if (offen) return;
+ offen = true;
+ requestAnimationFrame(function () {
+ offen = false;
+ if (!letzte) return;
+ var k = letzte.karte;
+ var r = k.getBoundingClientRect();
+ k.style.setProperty("--wd-lichtx", (letzte.x - r.left) + "px");
+ k.style.setProperty("--wd-lichty", (letzte.y - r.top) + "px");
+ });
+ }, { passive: true });
+ }
/* Nach außen sichtbare Schnittstelle für seiteneigene Skripte. */
window.WD = {
diff --git a/pruef-aufgaben-computer.png b/pruef-aufgaben-computer.png
index 7f2d9ac3..c82f16dd 100644
Binary files a/pruef-aufgaben-computer.png and b/pruef-aufgaben-computer.png differ
diff --git a/pruef-portal-aufgaben-computer.png b/pruef-portal-aufgaben-computer.png
index 3ae7f761..af876b57 100644
Binary files a/pruef-portal-aufgaben-computer.png and b/pruef-portal-aufgaben-computer.png differ
diff --git a/pruef-portal-aufgaben-handy.png b/pruef-portal-aufgaben-handy.png
index 6ea88ba0..e30ba534 100644
Binary files a/pruef-portal-aufgaben-handy.png and b/pruef-portal-aufgaben-handy.png differ
diff --git a/pruef-portal-postfach-computer.png b/pruef-portal-postfach-computer.png
index 73a8f3fe..3d6cad21 100644
Binary files a/pruef-portal-postfach-computer.png and b/pruef-portal-postfach-computer.png differ
diff --git a/pruef-portal-postfach-handy.png b/pruef-portal-postfach-handy.png
index fc6addf9..37059ae7 100644
Binary files a/pruef-portal-postfach-handy.png and b/pruef-portal-postfach-handy.png differ
diff --git a/pruef-postfach-computer.png b/pruef-postfach-computer.png
index c9400b52..492dd217 100644
Binary files a/pruef-postfach-computer.png and b/pruef-postfach-computer.png differ
diff --git a/pruef-postfach-handy.png b/pruef-postfach-handy.png
index 555e9e1f..cb6c4ee7 100644
Binary files a/pruef-postfach-handy.png and b/pruef-postfach-handy.png differ
diff --git a/webdesign/ablauf.html b/webdesign/ablauf.html
index 80c4aa1f..1baa40b2 100644
--- a/webdesign/ablauf.html
+++ b/webdesign/ablauf.html
@@ -13,8 +13,8 @@
-
-
+
+