diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index 3bc8be49..ca2e533c 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -1090,38 +1090,52 @@
transform: rotate(0deg);
transition: transform .12s cubic-bezier(.34, 1.56, .64, 1);
}
+/* DER ABSTAND FOLGT DER BAHN, DIE FARBE FOLGT DER BAHN -- und beides
+ muss beim Farbtausch mitgehen. Am 08.09.2026 habe ich genau das
+ vergessen: Die drei BOEGEN waren getauscht (Stunde rot, Minute
+ silber, Sekunde babyblau), die drei KOEPFE trugen weiter die alte
+ Zuordnung. Im Bildschirmfoto sass dadurch ein roter Kopf auf der
+ blauen Sekundenreihe und ein silberner auf den roten Stundenbalken
+ -- es sah nach einem Rechenfehler bei den Winkeln aus, obwohl alle
+ drei auf die Zehntelgrad genau standen (354 / 161,9 / 343,0 bei
+ 23:26:59, nachgemessen). Wer eine Farbe tauscht, tauscht sie an
+ ALLEN Stellen, die sie tragen -- Bogen, Kopf, Schein, Kranz. */
+
+/* AUSSEN, BABYBLAU: der Kopf der Sekundenpunkte. Am groessten, weil er
+ der einzige ist, der sich sichtbar bewegt. */
.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%);
+ radial-gradient(circle at 36% 32%, #fff 0%, #d8efff 34%, #7ec8f2 70%, #1d5a80 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);
+ 0 0 6px 1px rgba(126, 200, 242, .75),
+ 0 0 13px 3px rgba(110, 180, 235, .3),
+ inset 0 0 0 .5px rgba(255, 255, 255, .55);
}
-/* 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. */
+/* MITTE, SILBER: der Kopf der Minutenbalken. Poliertes Metall, kein
+ Licht -- er ist der Bezug, an dem man die anderen beiden misst. */
.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%);
+ background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e6edf6 34%, #97a4b4 70%, #414b58 100%);
box-shadow:
0 0 4px 1px rgba(220, 235, 255, .45),
inset 0 0 0 .5px rgba(255, 255, 255, .6);
}
+/* INNEN, ROT: der Kopf der Stundenbalken. Der kleinste Punkt in der
+ kraeftigsten Farbe -- er bewegt sich am wenigsten und darf deshalb
+ auffallen, ohne zu stoeren. */
+.uhr__perle--stunde::before {
+ top: 21.4%;
+ width: 5.4px; height: 5.4px; margin-left: -2.7px;
+ background: radial-gradient(circle at 36% 32%, #fff 0%, #ffb0b6 38%, #ff4257 72%, #7e1a24 100%);
+ box-shadow:
+ 0 0 5px 1px rgba(255, 80, 95, .6),
+ inset 0 0 0 .5px rgba(255, 255, 255, .5);
+}
@media (prefers-reduced-motion: reduce) {
/* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */
@@ -1238,22 +1252,23 @@
endet dann nie dort, wo er soll. U = 2 * pi * r, ausgerechnet und
nicht geschaetzt. */
.uhr__sekunde {
- stroke: url(#uhr-rot);
+ stroke: url(#uhr-sekunde-farbe);
stroke-width: 2.6;
stroke-dasharray: 285.88; /* r = 45.5 */
stroke-dashoffset: 285.88;
}
-/* MITTE: die Minute in Blau. */
+/* MITTE: die MINUTE in Schwarzsilber -- der ruhige Bezug zwischen
+ den beiden farbigen Bahnen. */
.uhr__minute {
- stroke: url(#uhr-blau);
+ stroke: url(#uhr-minute-farbe);
stroke-width: 3;
stroke-dasharray: 241.90; /* r = 38.5 */
stroke-dashoffset: 241.90;
}
-/* INNEN: die STUNDE in Schwarzsilber. Am breitesten und am ruhigsten --
+/* INNEN: die STUNDE in Rot. Am breitesten und am ruhigsten --
sie bewegt sich in fuenf Minuten um ein halbes Grad. */
.uhr__stunde {
- stroke: url(#uhr-silber);
+ stroke: url(#uhr-stunde-farbe);
stroke-width: 3.6;
stroke-dasharray: 197.92; /* r = 31.5 */
stroke-dashoffset: 197.92;
@@ -1616,43 +1631,15 @@
Schein liegt deshalb bei 45 bis 55 Prozent Deckkraft und wird NICHT
animiert -- ein pulsierendes Leuchten am Bildrand ist genau das, was
die Hausregel verbietet. */
-/* DIE SEKUNDE GLUEHT SCHWAECHER ALS DIE ANDEREN BEIDEN, und das ist
- Absicht: Sie ist die laengste Bahn, die hellste Farbe und die
- einzige, die sich sichtbar bewegt. Mit demselben Schein wie Minute
- und Stunde zog sie im Bildschirmfoto den ganzen Blick auf sich --
- ein roter Reifen, neben dem die Uhrzeit selbst zurueckstand.
- Nachgesehen, nicht gerechnet. */
-.uhr__sekunde {
- stroke-width: 3;
- filter:
- drop-shadow(0 0 1.5px rgba(255, 118, 132, .8))
- drop-shadow(0 0 6px rgba(255, 70, 90, .3));
-}
-.uhr__minute {
- stroke-width: 3.4;
- filter:
- drop-shadow(0 0 2px rgba(120, 200, 255, .95))
- drop-shadow(0 0 8px rgba(70, 165, 245, .48));
-}
-.uhr__stunde {
- stroke-width: 4;
- filter:
- drop-shadow(0 0 2px rgba(255, 214, 160, .9))
- drop-shadow(0 0 9px rgba(214, 154, 82, .45));
-}
-
-/* Die Perle am Ende jeder Bahn ist die Spitze -- dort schaut man hin.
- Sie bekommt denselben Schein wie ihre Bahn, nur staerker, und einen
- weissen Kern: Das ist der Unterschied zwischen einem farbigen Punkt
- und einem Licht. */
-.uhr__perle::before {
- box-shadow:
- 0 0 0 1px rgba(255, 255, 255, .5),
- 0 0 6px 1px currentColor,
- 0 0 14px 2px currentColor;
-}
-.uhr__perle--minute::before { color: rgba(99, 184, 245, .85); }
-.uhr__perle--stunde::before { color: rgba(226, 176, 108, .8); }
+/* Die Strichbreiten und Scheine der drei Bahnen stehen NICHT hier,
+ sondern gesammelt am Dateiende unter "DIE DREI FARBEN, NEU VERTEILT".
+ Hier stand bis zum 08.09.2026 ein zweiter, vollstaendiger Satz davon
+ (Sekunde rot, Minute blau, Stunde bronze). Er wurde vom spaeteren
+ Satz ueberschrieben und war damit unsichtbar -- aber wer die Datei
+ von oben liest, haelt ihn fuer die geltende Regel und aendert die
+ falsche Stelle. Genau das ist mir heute schon einmal passiert
+ (zwei Groessenregeln 3600 Zeilen auseinander). Deshalb entfernt
+ statt stehengelassen: EINE Stelle entscheidet ueber eine Farbe. */
@media (prefers-reduced-motion: reduce) {
/* Kein Leuchten ohne Not: Wer weniger Bewegung will, will meist auch
@@ -1696,23 +1683,6 @@
dadurch exakt eine Vierteldrehung neben ihren Boegen -- im Bild oben
links, waehrend die Boegen oben rechts endeten. Die Rechnung war
richtig, die Drehung eine zu viel. */
-.uhr__spur-bahn {
- fill: none;
- stroke-linecap: round;
- opacity: .95;
-}
-.uhr__spur-bahn[data-spur="sekunde"] {
- stroke: #ffd2d6; stroke-width: 3;
- filter: drop-shadow(0 0 3px rgba(255, 120, 134, .85));
-}
-.uhr__spur-bahn[data-spur="minute"] {
- stroke: #d8efff; stroke-width: 3.4;
- filter: drop-shadow(0 0 3px rgba(130, 205, 255, .8));
-}
-.uhr__spur-bahn[data-spur="stunde"] {
- stroke: #ffe9c9; stroke-width: 4;
- filter: drop-shadow(0 0 3px rgba(233, 190, 130, .75));
-}
/* DIE KOEPFE GLEITEN, STATT ZU SPRINGEN.
@@ -1882,19 +1852,7 @@
letzten Punkt, und den setzt die Perle. */
/* ---- 4. Schaerfe statt Nebel ------------------------------------- */
-.uhr__sekunde {
- filter: drop-shadow(0 0 1.5px rgba(255, 92, 108, .9));
-}
-.uhr__minute {
- filter: drop-shadow(0 0 1.5px rgba(120, 200, 255, .9));
-}
-.uhr__stunde {
- filter: drop-shadow(0 0 1.5px rgba(255, 205, 145, .85));
-}
-.uhr__spur-bahn[data-spur="minute"],
-.uhr__spur-bahn[data-spur="stunde"] {
- filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .5));
-}
+/* (Die Scheine selbst: siehe Dateiende, ein Satz fuer alle drei.) */
/* Auch die Perlen: harte Kante, enger Schein. Ein Lichtpunkt ist
scharf -- was leuchtet, hat einen Rand. */
.uhr__perle::before {
@@ -1902,3 +1860,66 @@
0 0 0 1px rgba(255, 255, 255, .75),
0 0 4px 0 currentColor;
}
+
+/* ===================================================================
+ DIE DREI FARBEN, NEU VERTEILT (08.09.2026)
+
+ Filipe: "stunden soll rot sein, minuten schwarz/silber und die
+ sekunden babyblau. die punkte herum sollen eine mischung von rot
+ schwarz und babyblau sein."
+
+ Die Zuordnung ist nicht beliebig, sie folgt der Geschwindigkeit:
+ Die SEKUNDE laeuft dauernd und bekommt das ruhigste Babyblau --
+ staendige Bewegung in Signalrot ermuedet. Die STUNDE bewegt sich
+ kaum und darf deshalb die kraeftigste Farbe tragen. Die MINUTE
+ dazwischen in Schwarzsilber: Sie ist der Bezug, an dem man die
+ beiden anderen misst, und Metall draengt sich nicht vor.
+
+ Die Glieder sind ausserdem verschieden LANG -- Punkt, kurzer Balken,
+ langer Balken. Damit liest man die drei Bahnen auch dann
+ auseinander, wenn jemand Farben schlecht unterscheidet. Farbe allein
+ traegt eine Information nie. */
+/* DER SCHEIN GEHOERT AN EINE LAGE, NICHT AN DREI.
+
+ Jeder Ring liegt dreifach im SVG: Schattenlage (0,55 nach unten),
+ Hauptlage, Kantenlage (0,4 nach oben). `.uhr__stunde` trifft alle
+ drei -- der Schein wurde damit DREIMAL uebereinander gerechnet. Im
+ Bildschirmfoto lief das rote Leuchten deshalb bis ueber die Ziffern
+ und liess die ganze Uhr weich aussehen, obwohl in der Regel nur
+ 1,8 px stehen. Genau das, was Filipe nicht will ("es soll nichts
+ verschwommen aussehen ... im gegenteil, richtig scharf").
+
+ Mit `>` bekommt nur die Hauptlage den Schein. Schatten und Kante
+ bleiben hart -- sie sind Koerper, kein Licht. Das ist derselbe
+ Gedanke wie im Kommentar oben ("KEIN Weichzeichner, nirgends: Die
+ Tiefe entsteht aus dem Versatz"), nur war er an dieser Stelle nicht
+ durchgehalten. */
+.uhr__ring > .uhr__sekunde { filter: drop-shadow(0 0 1.4px rgba(126, 200, 242, .85)); }
+.uhr__ring > .uhr__minute { filter: drop-shadow(0 0 1.2px rgba(220, 232, 246, .6)); }
+.uhr__ring > .uhr__stunde { filter: drop-shadow(0 0 1.4px rgba(255, 92, 104, .8)); }
+.uhr__schatten .uhr__sekunde, .uhr__schatten .uhr__minute, .uhr__schatten .uhr__stunde,
+.uhr__kante .uhr__sekunde, .uhr__kante .uhr__minute, .uhr__kante .uhr__stunde { filter: none; }
+
+/* Die Koepfe tragen die Farbe ihrer Bahn -- sonst zeigte ein blauer
+ Punkt auf eine rote Reihe. */
+.uhr__perle::before { color: rgba(126, 200, 242, .9); }
+.uhr__perle--minute::before { color: rgba(226, 236, 248, .85); }
+.uhr__perle--stunde::before { color: rgba(255, 92, 104, .9); }
+
+/* ---- Der Punktkranz: rot, schwarz, babyblau im Wechsel -----------
+
+ Drei Farben in einem `repeating-conic-gradient`: je 6 Grad ein
+ Punkt, dazwischen die Luecke. Die Reihenfolge Rot - Blau - Dunkel
+ wiederholt sich alle 18 Grad, also zwanzigmal auf dem Ring.
+
+ Das Dunkel ist kein Loch, sondern ein sehr dunkles Blau: Ein echter
+ Zwischenraum haette den Kranz in zwei Haelften zerfallen lassen,
+ sobald man ihn aus dem Augenwinkel sieht. So bleibt der Ring ein
+ Ring und hat trotzdem drei Toene. */
+.uhr__leds {
+ background: repeating-conic-gradient(from -1.5deg,
+ rgba(255, 90, 102, .70) 0deg 3deg, transparent 3deg 6deg,
+ rgba(126, 200, 242, .70) 6deg 9deg, transparent 9deg 12deg,
+ rgba(120, 150, 185, .34) 12deg 15deg, transparent 15deg 18deg);
+ filter: drop-shadow(0 0 2px rgba(150, 170, 210, .4));
+}
diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js
index 435ac416..2f87d74d 100644
--- a/workspace/assets/js/start.js
+++ b/workspace/assets/js/start.js
@@ -379,24 +379,6 @@
for (const welcher of ['sekunde', 'minute', 'stunde']) {
lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
}
- /* DER SCHWEIF (08.09.2026): die letzten Grad vor der Spitze, heller.
-
- Gerechnet, nicht geschaetzt. Ein Kreis mit Umfang U, Fortschritt
- a (0..1) und Schweiflaenge s soll ein Segment von (a*U - s) bis
- a*U zeigen. Mit `dasharray: s, U-s` beginnt das sichtbare Stueck
- bei (U - offset), also gilt
-
- U - offset = a*U - s -> offset = U*(1-a) + s
-
- Die Laenge wird bei kurzen Boegen mitgekuerzt: Am Anfang einer
- Minute ist der Bogen selbst noch kuerzer als der Schweif, und ein
- Schweif ohne Bogen darunter haenge sonst am Ende des Kreises --
- sichtbar als heller Strich bei zwoelf Uhr, wo nichts sein darf. */
- const SCHWEIF = { sekunde: 30, minute: 26, stunde: 22 }; // Bogenlaenge
- const spuren = {};
- for (const welcher of ['sekunde', 'minute', 'stunde']) {
- spuren[welcher] = document.querySelector(`[data-spur="${welcher}"]`);
- }
/* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026).
@@ -415,13 +397,19 @@
gebaut: n Paare aus Punkt und Luecke, dahinter eine Luecke ueber
den ganzen Rest. Sechzig Zahlenpaare einmal je Sekunde sind
nichts -- die Alternative waeren sechzig Elemente im Dokument. */
- const SEK_PUNKTE = 60;
- const punktMuster = (U, n) => {
- const schritt = U / SEK_PUNKTE;
+ /* Wie viele Glieder hat welche Bahn, und wie lang ist eines?
+ Die Sekunde bekommt PUNKTE (Laenge nahe null, runde Kappe), Minute
+ und Stunde BALKEN -- je langsamer, desto laenger das Glied. So
+ liest man die drei auch ohne Farbe auseinander. */
+ const GLIEDER = { sekunde: 60, minute: 60, stunde: 12 };
+ const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 5.5 };
+
+ const punktMuster = (U, n, gesamt, laenge) => {
+ const schritt = U / gesamt;
if (n <= 0) return `0 ${U}`;
/* 0.01 statt 0: Manche Browser zeichnen eine Strichlaenge von
exakt null gar nicht, auch mit runder Kappe. */
- const paar = `0.01 ${(schritt - 0.01).toFixed(3)} `;
+ const paar = `${laenge} ${(schritt - laenge).toFixed(3)} `;
/* DIE REIHENFOLGE ENTSCHEIDET, OB DER REST EINE LUECKE IST.
In `dasharray` wechseln sich Strich und Luecke ab, beginnend
@@ -446,30 +434,39 @@
const setze = (welcher, anteil) => {
const U = UMFANG[welcher];
- if (welcher === 'sekunde') {
- /* Der erste Punkt gehoert der Sekunde 0 -- deshalb n = sk + 1:
- Bei 0 Sekunden leuchtet einer, bei 59 alle sechzig. Ein Ring,
- der bei null voellig leer ist, sieht eine Sekunde lang aus wie
- ein Ladefehler. */
- const n = Math.round(anteil * SEK_PUNKTE) + 1;
- const muster = punktMuster(U, Math.min(n, SEK_PUNKTE));
- for (const el of lagen[welcher]) {
- el.style.strokeDasharray = muster;
- el.style.strokeDashoffset = '0';
- }
- return;
+ /* ALLE DREI BAHNEN SIND REIHEN (08.09.2026).
+
+ Filipe: "ich will auch dass die stunden und minuten auch barren
+ oder punkte sind und nicht so eine durchlaufende schleife."
+
+ Ein durchgehender Bogen zeigt einen Stand, eine Reihe zeigt
+ SCHRITTE -- und Zeit besteht aus Schritten. Die Stunde bekommt
+ zwoelf Balken (ein Zifferblatt hat zwoelf), Minute und Sekunde
+ sechzig. Das erste Glied gehoert dem Wert 0: Bei 0 Sekunden
+ leuchtet eines, bei 59 alle sechzig. Ein Ring, der bei null
+ voellig leer ist, sieht eine Sekunde lang aus wie ein
+ Ladefehler. */
+ const gesamt = GLIEDER[welcher];
+ /* ABRUNDEN, NICHT RUNDEN -- der Unterschied ist ein ganzer Balken.
+
+ `Math.round` haette bei Minute und Stunde ab der HAELFTE
+ aufgerundet: Um 14:30 lief der Stundenring auf 2 + 0,5 = 2,5,
+ gerundet 3, plus eins = VIER Balken -- obwohl erst die dritte
+ Stunde laeuft. Dasselbe im Minutenring ab Sekunde 30. Die Uhr
+ war damit die halbe Zeit ueber einen Balken zu weit, und zwar
+ gerade dann nicht, wenn man hinsieht (zur vollen Stunde stimmte
+ sie). Nachgerechnet, nicht geschaetzt: 10:30 -> 11 Balken,
+ 14:30 -> 3, 23:59 -> 12, 00:00 -> 1.
+
+ Bei der Sekunde macht es keinen Unterschied (sk ist ganz), bei
+ den anderen beiden ist es der ganze Unterschied. */
+ const n = Math.min(Math.floor(anteil * gesamt) + 1, gesamt);
+ const muster = punktMuster(U, n, gesamt, GLIED_LAENGE[welcher]);
+ for (const el of lagen[welcher]) {
+ el.style.strokeDasharray = muster;
+ el.style.strokeDashoffset = '0';
}
- const wert = String(U * (1 - anteil));
- for (const el of lagen[welcher]) el.style.strokeDashoffset = wert;
-
- const spur = spuren[welcher];
- if (!spur) return;
- const s = Math.min(SCHWEIF[welcher], U * anteil);
- if (s <= 0.5) { spur.style.opacity = '0'; return; } /* nichts zu zeigen */
- spur.style.opacity = '';
- spur.style.strokeDasharray = `${s} ${U - s}`;
- spur.style.strokeDashoffset = String(U * (1 - anteil) + s);
};
/* Der Nullpunkt der eigenen Uhr -- siehe unten bei den Koepfen. */
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index accb9b27..e0f8ad39 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -217,10 +217,10 @@
-
-
-
-
-
+
+
+
+
+