diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index b164cb44..cfee9c61 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -669,12 +669,34 @@
0 0 14px 3px rgba(255, 70, 90, .35),
inset 0 0 0 .5px rgba(255, 255, 255, .5);
}
+/* Die Kappen der beiden anderen Ringe. Sie sitzen auf DEREN Bahn --
+ der Abstand von der Mitte ist der einzige Unterschied, alles andere
+ erbt von der Perle. Die Farbe folgt dem Ring: Minute babyblau,
+ Stunde poliertes Silber. */
+.uhr__perle--minute::before {
+ top: 12.6%;
+ width: 6px; height: 6px; margin-left: -3px;
+ background: radial-gradient(circle at 36% 32%, #fff 0%, #cfe9ff 36%, #4aa8f0 72%, #17527f 100%);
+ box-shadow:
+ 0 0 5px 1px rgba(90, 180, 255, .7),
+ inset 0 0 0 .5px rgba(255, 255, 255, .55);
+}
+.uhr__perle--stunde::before {
+ top: 21.4%;
+ width: 5.4px; height: 5.4px; margin-left: -2.7px;
+ background: radial-gradient(circle at 34% 30%, #ffffff 0%, #dfe8f2 34%, #8b98a8 70%, #3d4653 100%);
+ box-shadow:
+ 0 0 4px 1px rgba(220, 235, 255, .45),
+ inset 0 0 0 .5px rgba(255, 255, 255, .6);
+}
+
@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; }
+ .uhr__schatten, .uhr__kante { display: none; }
}
/* SCHICHT 3: DAS GLAS -- ENTSPIEGELTES SAPHIRGLAS (07.09.2026)
@@ -749,7 +771,25 @@
fill: none;
stroke-linecap: butt;
}
-.uhr__bahn { stroke: rgba(150, 186, 220, .09); stroke-width: 3; }
+/* DIE BAHN IST EINE GEFRAESTE RILLE, kein blasser Kreis.
+
+ Ein Zeiger laeuft bei einem guten Instrument IN einer Vertiefung,
+ nicht auf einer Flaeche. Eine Rille erkennt man an zweierlei: Sie ist
+ dunkler als ihre Umgebung, und an ihrer unteren Wand steht eine helle
+ Kante, wo das Licht von oben auftrifft. Beides steht hier -- die
+ Kante als zweiter, um ein Drittel nach unten versetzter Kreis.
+
+ Die Breite folgt dem Ring, der darin laeuft: aussen 3,4 fuer die
+ Sekunde, in der Mitte 3,8, innen 4,4. Eine Rille, die schmaler ist
+ als ihr Zeiger, ist keine. */
+.uhr__bahn { stroke: rgba(4, 7, 13, .78); stroke-width: 4.4; }
+.uhr__bahn:nth-of-type(1) { stroke-width: 3.6; }
+.uhr__bahn:nth-of-type(2) { stroke-width: 4; }
+.uhr__rillenkante circle {
+ fill: none;
+ stroke: rgba(190, 215, 245, .16);
+ stroke-width: 1;
+}
/* AUSSEN: die SEKUNDE in Rot, auf der laengsten Bahn (07.09.2026
gedreht, Wunsch Filipe: "die minuten in der mitte und sekunden
@@ -786,9 +826,57 @@
stroke-dashoffset: 197.92;
}
+/* DER SCHLAGSCHATTEN JEDES BOGENS. Dieselbe Bahn, schwarz, ein wenig
+ breiter -- und um ein halbes Rastermass nach unten geschoben (im
+ HTML). Er macht aus einem aufgemalten Strich einen Koerper, der
+ ueber dem Zifferblatt liegt. */
+.uhr__schatten circle {
+ stroke: rgba(0, 0, 0, .62) !important;
+ stroke-width: 4.6;
+}
+.uhr__schatten .uhr__sekunde { stroke-width: 3.8; }
+.uhr__schatten .uhr__minute { stroke-width: 4.2; }
+
+/* DIE BELEUCHTETE OBERKANTE. Duenner, hell, nach oben versetzt: Sie
+ schaut oben hervor und verschwindet unten -- genau das tut eine
+ gewoelbte Kante bei Licht von oben. Das ist der ganze Unterschied
+ zwischen einem Strich und einem Ring aus Material. */
+.uhr__kante circle {
+ stroke: rgba(255, 255, 255, .72) !important;
+ stroke-width: .9;
+}
+.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; }
+
+/* DIE ZIFFERNINSEL (07.09.2026).
+
+ Seit der Stundenring eine beleuchtete Oberkante hat, laeuft ein
+ heller Bogen hinter den Ziffern durch. pruef-buehne hat es sofort
+ gemeldet: schlechtester Kontrast 2,98:1 gegen rgb(125,147,165) --
+ knapp unter der Grenze von 3:1, und zwar genau bei der Uhrzeit, also
+ der wichtigsten Angabe der ganzen Flaeche.
+
+ Das ist kein Grund, die Kante wieder wegzunehmen. Auf einer echten
+ Uhr steht eine Anzeige, die ueber Zeigern liegt, auf einer eigenen
+ Flaeche -- einer vertieften Insel im Zifferblatt. Genau die steht
+ jetzt hier: dunkel in der Mitte, nach aussen weich auslaufend, damit
+ sie keine sichtbare Kante bekommt. Der Kontrast ist damit
+ unabhaengig davon, was hinter ihr vorbeilaeuft.
+
+ Die Lehre allgemein: Wenn eine neue Schicht einen Text unlesbar
+ macht, ist die Antwort selten "Schicht weg" -- meistens fehlt dem
+ Text sein Untergrund. */
.uhr__mitte {
position: relative; z-index: 4;
display: grid; justify-items: center; gap: 2px; line-height: 1;
+ padding: 6px 14px;
+}
+.uhr__mitte::before {
+ content: ""; position: absolute; inset: -6px -10px;
+ z-index: -1; pointer-events: none;
+ border-radius: 50%;
+ background:
+ radial-gradient(closest-side, rgba(4, 7, 13, .93) 0%,
+ rgba(4, 7, 13, .88) 52%, rgba(4, 7, 13, .55) 78%, transparent 100%);
}
.uhr__zeit {
font-size: 1.86rem; font-weight: 700; letter-spacing: -.015em;
diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js
index 514ae7f5..989053bb 100644
--- a/workspace/assets/js/start.js
+++ b/workspace/assets/js/start.js
@@ -368,9 +368,20 @@
/* Voll = kein Versatz. Die Ringe wachsen im Uhrzeigersinn, weil das
SVG im Stil um 90 Grad zurueckgedreht ist. */
+ /* ALLE DREI LAGEN EINES RINGES AUF EINMAL (07.09.2026).
+
+ Seit jeder Ring aus Schatten, Koerper und Oberkante besteht,
+ muessen alle drei denselben Stand haben. Sie tragen dafuer
+ `data-ring`; einzeln gepflegte Verweise waeren drei Stellen, an
+ denen man eine vergessen kann -- und ein Schatten, der stehen
+ bleibt, sieht sofort kaputt aus. */
+ const lagen = {};
+ for (const welcher of ['sekunde', 'minute', 'stunde']) {
+ lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
+ }
const setze = (welcher, anteil) => {
- const el = ringe[welcher];
- if (el) el.style.strokeDashoffset = String(UMFANG[welcher] * (1 - anteil));
+ const wert = String(UMFANG[welcher] * (1 - anteil));
+ for (const el of lagen[welcher]) el.style.strokeDashoffset = wert;
};
const takt = () => {
@@ -400,6 +411,14 @@
Rechner. */
const perle = $('uhr-perle');
if (perle) perle.style.transform = `rotate(${sk * 6}deg)`;
+ /* Die beiden anderen Koepfe laufen mit IHREN Ringen -- die Minute
+ nimmt die Sekunden anteilig mit, die Stunde die Minuten. Sonst
+ staende der Kopf neben dem Ende seines Bogens, und genau das
+ sieht man sofort. */
+ const perleMin = $('uhr-perle-minute');
+ if (perleMin) perleMin.style.transform = `rotate(${(min + sk / 60) * 6}deg)`;
+ const perleStd = $('uhr-perle-stunde');
+ if (perleStd) perleStd.style.transform = `rotate(${((std % 12) + min / 60) * 30}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 51b2cf9c..add8f26e 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+