diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index b8abb8a1..3bc61e9f 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -274,7 +274,48 @@
left 8px bottom 8px, left 8px bottom 8px;
}
-.willkommen > * { position: relative; z-index: 1; }
+/* `:not(.licht)` -- dieselbe Falle wie in module.css, und ich bin
+ heute schon einmal hineingelaufen: Das Lichtelement ist ein direktes
+ KIND der Flaeche. `position: relative` nimmt ihm sein `absolute` und
+ macht aus einer Flaeche ueber der ganzen Konsole einen leeren
+ Inline-Span. Eine Regel auf `> *` trifft eben auch das, was gar kein
+ Inhalt ist. */
+.willkommen > *:not(.licht) { position: relative; z-index: 1; }
+
+/* =====================================================================
+ DAS LICHT AUF DER KONSOLE IST EINE SPIEGELUNG, KEIN FARBSCHLEIER
+
+ Auf den Kacheln leuchtet das Licht in der Farbe der Kategorie -- dort
+ ist es ein Hinweis. Hier waere dasselbe falsch: Die Konsole gehoert
+ zu keiner Kategorie, und ein farbiger Schleier auf gebuerstetem
+ Metall sieht aus wie eine Folie darauf.
+
+ Metall zeigt seine Form ueber die SPIEGELUNG. Deshalb ist das Licht
+ hier weiss, schmal und hart an der Kante -- es wandert ueber die
+ Fassung wie ein Fenster, an dem man vorbeigeht. Erst dadurch sieht
+ man, dass die Fassung gewoelbt ist; ein Standbild kann das nicht.
+ ===================================================================== */
+.willkommen > .licht {
+ z-index: 2; /* ueber Glas und Nieten, unter dem Text */
+ clip-path: inherit;
+}
+/* Der weiche Schein auf der Glasflaeche -- sehr leise, er soll den Text
+ nicht anheben. */
+.willkommen > .licht::before {
+ background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
+ rgba(190, 220, 255, .085), transparent 62%);
+}
+/* Die eigentliche Spiegelung: ein enger, heller Fleck, den die Maske auf
+ die FASSUNG begrenzt -- also genau auf das Metall und nicht auf die
+ Flaeche daneben. */
+.willkommen > .licht::after {
+ padding: var(--k-rand);
+ background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%),
+ rgba(255, 255, 255, .95),
+ rgba(214, 232, 255, .42) 34%,
+ rgba(160, 190, 225, .12) 58%,
+ transparent 74%);
+}
.willkommen__reihe {
display: flex; align-items: center; gap: 16px;
@@ -325,22 +366,22 @@
Name schon behauptet. */
.willkommen__rechts > * { position: relative; z-index: 1; }
-/* Die Mulde. Sie liegt HINTER der Uhr (z-index 0 gegen 1) und ist
- bewusst 22 px groesser als das Gehaeuse -- eine Fraesung ist immer
- etwas weiter als das, was hineinkommt, sonst bekaeme man es nicht
- hinein. */
-.willkommen__rechts::after {
- content: ""; position: absolute;
- right: -11px; top: 50%; width: 186px; height: 186px;
- margin-top: -93px;
- border-radius: 50%;
- pointer-events: none; z-index: 0;
- background:
- radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .55) 62%, transparent 74%);
- box-shadow:
- inset 0 6px 10px -6px rgba(0, 0, 0, .95),
- inset 0 -3px 0 -1px rgba(190, 208, 230, .16);
-}
+/* DIE MULDE HAENGT AN DER UHR, NICHT AM KASTEN DANEBEN.
+
+ Der erste Anlauf setzte sie als eigene Flaeche in die rechte Haelfte
+ der Konsole, ausgerichtet an deren rechtem Rand. Am Rechner passte
+ das; auf dem Handy steht die Uhr MITTIG, und die Mulde lag als
+ dunkle Scheibe daneben. Im Bildschirmfoto bei 412 px gesehen.
+
+ Jetzt entsteht sie aus zwei Schattenringen der Uhr selbst (siehe
+ `.uhr` weiter oben): Sie ist damit automatisch konzentrisch, bei
+ jeder Groesse und an jedem Ort. Das ist die bessere Bauart, nicht
+ nur die reparierte -- eine Fassung, die man ausrichten MUSS, richtet
+ irgendwann jemand falsch aus.
+
+ Die Nut daneben bleibt am Kasten: Sie trennt zwei BEREICHE, nicht
+ zwei Bauteile. Auf dem Handy gibt es diese Trennung nicht mehr
+ (dort steht alles untereinander), deshalb faellt sie dort weg. */
.willkommen__rechts {
display: flex; align-items: center; gap: 14px;
@@ -448,6 +489,14 @@
-4px -4px 26px -13px rgba(255, 95, 109, .6),
4px 4px 26px -13px rgba(143, 216, 255, .6),
0 14px 30px -14px rgba(0, 0, 0, .95),
+ /* DIE MULDE. Zwei Ringe aus Schatten mit Ausdehnung: aussen die
+ Fraesung selbst (dunkel, 11 px breit), darauf eine haarfeine
+ helle Kante -- dort trifft das Licht die gegenueberliegende Wand
+ der Vertiefung. Zusammen macht das aus "davor" ein "darin", und
+ zwar konzentrisch bei jeder Groesse. */
+ 0 0 0 11px rgba(0, 0, 0, .5),
+ 0 0 0 12px rgba(190, 208, 230, .12),
+ 0 6px 14px 6px rgba(0, 0, 0, .45),
/* Und der dunkle Ring, der die Fassung einlaesst -- ohne ihn liegt
sie auf dem Zifferblatt statt darin. */
inset 0 0 0 1px rgba(6, 10, 18, .85);
@@ -455,7 +504,33 @@
/* SCHICHT 2: die vertiefte Scheibe. */
.uhr::before {
content: ""; position: absolute; inset: 10px; border-radius: 50%;
+ /* DAS GUILLOCHIERTE ZIFFERBLATT.
+
+ Guillochieren ist das Verfahren, mit dem seit zweihundert Jahren
+ hochwertige Zifferblaetter gemacht werden: Eine Maschine schneidet
+ ein feines, regelmaessiges Muster in das Metall, und weil jede
+ Rille das Licht in einem anderen Winkel zurueckwirft, LEBT die
+ Flaeche, wenn man den Kopf bewegt. Es ist der Unterschied zwischen
+ einem lackierten und einem bearbeiteten Blatt -- und der Grund,
+ warum ein teures Zifferblatt teuer AUSSIEHT, ohne dass eine
+ einzige Farbe daran teuer waere.
+
+ Hier aus zwei Ebenen: STRAHLEN vom Mittelpunkt (der Kegelverlauf,
+ 240 Rillen) und RINGE um den Mittelpunkt (der wiederholte
+ Radialverlauf, alle 3 px). Beide extrem leise -- bei 4 Prozent
+ Deckkraft sieht man kein Muster, man sieht eine Oberflaeche. Wer
+ sie einzeln erkennt, hat sie zu laut gemacht.
+
+ `closest-side`, damit die Ringe im Radius rechnen und nicht in der
+ weitesten Ecke -- derselbe Fehler, der heute die Skala unsichtbar
+ gemacht hat. */
background:
+ repeating-conic-gradient(from 0deg,
+ rgba(255, 255, 255, .045) 0deg 0.75deg,
+ rgba(0, 0, 0, .05) 0.75deg 1.5deg),
+ repeating-radial-gradient(circle closest-side at 50% 50%,
+ rgba(255, 255, 255, .035) 0 1px,
+ rgba(0, 0, 0, .045) 1px 3px),
radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .06), transparent 56%),
radial-gradient(circle at 50% 50%, #0c121e 56%, #04070d 100%);
box-shadow:
@@ -521,6 +596,49 @@
mask: radial-gradient(circle closest-side, transparent 0 94%, #000 94% 99.5%, transparent 99.5%);
}
+/* DER AUFGESETZTE ZWOELF-INDEX. Ein Keil in Hausrot mit heller
+ Oberkante, gesetzt auf die Luenette. Er beantwortet die Frage "wo ist
+ oben" ohne eine einzige Ziffer -- und er ist der einzige farbige
+ Punkt auf dem Metall, also auch der Blickfang. */
+.uhr__zwoelf {
+ position: absolute; top: 3px; left: 50%;
+ width: 7px; height: 13px; margin-left: -3.5px;
+ z-index: 5; pointer-events: none;
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
+ background: linear-gradient(180deg, #ffd9dc 0%, #ff5f6d 34%, #b3323e 100%);
+ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
+}
+
+/* DIE PERLE. Ein Kasten in voller Groesse, der sich dreht -- die Perle
+ selbst sitzt oben auf dem Radius des Sekundenbogens. So braucht die
+ Drehung keine Rechnung mit Winkelfunktionen: Der Kasten dreht sich,
+ die Perle wird mitgenommen. */
+.uhr__perle {
+ position: absolute; inset: 10px;
+ z-index: 5; pointer-events: none;
+ transform: rotate(0deg);
+ transition: transform .12s cubic-bezier(.34, 1.56, .64, 1);
+}
+.uhr__perle::before {
+ content: "";
+ position: absolute; top: 4.2%; left: 50%;
+ width: 7px; height: 7px; margin-left: -3.5px;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 36% 32%, #fff 0%, #ff9aa2 38%, #ff2f42 72%, #8e1b26 100%);
+ box-shadow:
+ 0 0 6px 1px rgba(255, 70, 90, .75),
+ 0 0 14px 3px rgba(255, 70, 90, .35),
+ inset 0 0 0 .5px rgba(255, 255, 255, .5);
+}
+@media (prefers-reduced-motion: reduce) {
+ /* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */
+ .uhr__perle { transition: none; }
+}
+@media (forced-colors: active) {
+ .uhr__zwoelf, .uhr__perle { display: none; }
+}
+
/* SCHICHT 3: die Glaskuppe. */
.uhr__glas {
position: absolute; inset: 10px; border-radius: 50%;
@@ -616,7 +734,15 @@
Schrift (background-clip: text) wuerde im Windows-Kontrastmodus zu
unsichtbarer Schrift -- derselbe Grund, aus dem die Ueberschrift
daneben eine feste Farbe traegt. */
+ /* GRAVIERT STATT GEDRUCKT. Zwei zusaetzliche Schatten mit einem
+ halben Pixel Versatz: einer dunkel nach oben, einer hell nach
+ unten. Das ist genau das Lichtverhalten einer Vertiefung -- oben
+ faellt Schatten hinein, unten trifft das Licht die
+ gegenueberliegende Wand. Zusammen mit den beiden farbigen Scheinen
+ stehen die Ziffern damit IM Blatt statt darauf. */
text-shadow:
+ 0 -.5px 0 rgba(0, 0, 0, .85),
+ 0 .5px 0 rgba(255, 255, 255, .22),
-6px 0 16px rgba(255, 95, 109, .38),
6px 0 16px rgba(143, 216, 255, .42);
}
@@ -649,6 +775,9 @@
Seite -- fehlt auf 17 Seiten". */
@media (max-width: 620px) {
+ /* Die Nut trennt Text von Instrumenten -- nebeneinander. Untereinander
+ traennte sie nichts und stuende quer im Bild. */
+ .willkommen__rechts::before { display: none; }
/* Auf dem Handy rückt die Gruppe unter den Gruß und die Uhr wird
kleiner -- 108 px neben einer Überschrift lassen für den Namen
keine Zeile mehr übrig. */
diff --git a/workspace/assets/js/kopf.js b/workspace/assets/js/kopf.js
index 9b19da61..47ef38af 100644
--- a/workspace/assets/js/kopf.js
+++ b/workspace/assets/js/kopf.js
@@ -267,6 +267,12 @@
'.dran__punkt', '.zahl', '.datei', '.person', '.eintrag', '.thema',
'.listentag', '.k-listentag', '.steckbrief', '.leer-hinweis', '.block',
'.saeule', '.karte-gross', '.kandidat', '.punkt', '.call', '.report',
+ /* Die Konsole der Startseite (07.09.2026). Auf ihr ist das Licht
+ kein Farbschleier, sondern eine SPIEGELUNG auf Metall -- gesteuert
+ von denselben zwei Werten (--mx/--my), gestaltet in heim.css.
+ Echtes Metall zeigt seine Form erst, wenn sich das Licht darauf
+ bewegt; ein Standbild kann das nie leisten. */
+ '.willkommen',
].join(', ');
window.lichtFolgen = function (wurzel = document) {
diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js
index 07510aac..514ae7f5 100644
--- a/workspace/assets/js/start.js
+++ b/workspace/assets/js/start.js
@@ -391,6 +391,15 @@
Die Stunde ueber ZWOELF, nicht ueber 24: Ein Zifferblatt hat
zwoelf Stunden, und der Ring soll sich wie eines lesen. */
setze('sekunde', sk / 60);
+ /* Die Perle sitzt auf dem Kopf des Sekundenbogens. Sechs Grad je
+ Sekunde, im selben Takt wie die Anzeige -- sie springt also
+ mit, statt weich zu gleiten. Das ist ehrlicher (die Anzeige ist
+ digital) und kostet EINE Bildberechnung je Sekunde statt
+ sechzig. Auf einer Seite, die stundenlang offen steht, ist das
+ der Unterschied zwischen einem warmen und einem kalten
+ Rechner. */
+ const perle = $('uhr-perle');
+ if (perle) perle.style.transform = `rotate(${sk * 6}deg)`;
setze('minute', (min + sk / 60) / 60);
setze('stunde', ((std % 12) + min / 60) / 12);
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 1ed6a8b2..62acc03f 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+