Die Uhr bekommt Kometenschweife -- und die Koepfe gleiten, statt zu springen

Filipe: "nehm diese uhr bitte und passe sie so gut wie es geht an, auch
die lichter von sekunden, minuten und stunden perfekt anpassen ...
überrasch mich."

ZWEI DINGE, DIE EINE UHR LEBENDIG MACHEN.

1. DER KOMETENSCHWEIF. Ein Bogen in gleichmaessiger Farbe zeigt einen
   STAND. Ein Bogen, der zur Spitze hin heller wird, zeigt eine
   RICHTUNG -- man sieht ohne Nachdenken, wo "jetzt" ist und wohin es
   laeuft. Bei drei Ringen uebereinander ist das der Unterschied
   zwischen Ablesen und Erkennen.

   Gebaut als zweites, kuerzeres Segment ueber dem Bogen: die letzten
   rund 40 Grad, heller, mit runder Kappe. Ein Verlauf ENTLANG der Bahn
   geht in SVG nicht -- `linearGradient` folgt einer Geraden, keiner
   Kurve. Zwei Lagen sind der ehrliche Weg dorthin.

   Die Lage wird gerechnet, nicht geschaetzt: Bei Umfang U, Fortschritt
   a und Schweiflaenge s soll das Segment von (aU - s) bis aU liegen.
   Mit `dasharray: s, U-s` beginnt das sichtbare Stueck bei (U - offset),
   also ist offset = U*(1-a) + s. Die Laenge wird bei kurzen Boegen
   mitgekuerzt -- sonst haenge der Schweif am Anfang einer Minute am
   ENDE des Kreises, sichtbar als heller Strich bei zwoelf Uhr.

2. DIE KOEPFE GLEITEN. Bisher sprangen sie einmal je Sekunde. Jetzt
   uebernimmt der Browser die Bewegung dazwischen (Ueberblendung von
   0,92 s) -- das Skript rechnet weiterhin nur EINMAL je Sekunde. Sechzig
   Bildberechnungen je Sekunde wuerden auf einer stundenlang offenen
   Seite den Rechner warm halten; diese Loesung kostet nichts.

ZWEI FEHLER DABEI, BEIDE NUR IM BILD ZU SEHEN:

  Der erste Versuch rechnete die Winkel aus der vollen Unixzeit, damit
  sie immer weiterwachsen (sonst liefe die Ueberblendung einmal je
  Minute rueckwaerts durchs Zifferblatt). Ergebnis:
  `rotate(1.07333e+10deg)` -- Exponentialschreibweise, Nachkommastellen
  weg. Die Koepfe standen sichtbar neben ihren Boegen, der rote auf der
  anderen Seite der Uhr. Jetzt zaehlt eine eigene Uhr ab dem ersten
  Takt: klein genug zum Rechnen, wachsend genug fuer die Ueberblendung.

  Und ich hatte den Schweifen `rotate(-90deg)` gegeben, damit sie bei
  zwoelf beginnen -- das SVG ist aber bereits gedreht. Sie standen
  dadurch exakt eine Vierteldrehung daneben: oben links, waehrend die
  Boegen oben rechts endeten.

NACHGEMESSEN, in Grad statt nach Augenmass:
  Kopf gegen Bogenende      Abweichung 0,00° / 0,00° / 0,03°
  Schweifende gegen Bogen   Abweichung 0,0° / 0,0° / 0,0°

pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0 (28).
Bei `prefers-reduced-motion` gleiten die Koepfe nicht -- sie springen
dann wie vorher.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/heim.css

@@ -1659,3 +1659,77 @@
      weniger Reiz. Die Bahnen bleiben in voller Farbe stehen. */
   .uhr__sekunde, .uhr__minute, .uhr__stunde { filter: none; }
 }
+
+/* ===================================================================
+   DER KOMETENSCHWEIF (08.09.2026)
+
+   Filipe: "auch die lichter von sekunden, minuten und stunden perfekt
+   anpassen, wie die läuft und aussieht soll wirklich mega perfekt sein
+   ... überrasch mich."
+
+   WAS ER LEISTET: Ein Bogen in gleichmaessiger Farbe zeigt einen
+   STAND. Ein Bogen, der zur Spitze hin heller wird, zeigt eine
+   RICHTUNG -- man sieht ohne Nachdenken, wo "jetzt" ist und wohin es
+   laeuft. Bei drei Ringen uebereinander ist das der Unterschied
+   zwischen Ablesen und Erkennen.
+
+   WARUM ZWEI LAGEN UND KEIN VERLAUF: Ein Farbverlauf ENTLANG einer
+   Kreisbahn geht in SVG nicht -- `linearGradient` folgt einer Geraden,
+   `radialGradient` einem Radius, keiner einer Bahn. Der ehrliche Weg
+   ist ein zweites, kuerzeres Segment ueber dem ersten. Es liegt vor
+   der Oberkante, damit die helle Kante auch auf dem Schweif sitzt.
+
+   `stroke-linecap: round` nur hier, nicht am Hauptbogen: Die runde
+   Kappe markiert die Spitze. Am Hauptbogen wuerde sie auch den ANFANG
+   runden -- und der liegt bei zwoelf Uhr, wo eine runde Kappe wie ein
+   Fehler aussieht.
+
+   AUGENSCHONEND: Der Schweif ist heller als der Bogen, aber nicht
+   greller -- er bleibt in derselben Farbfamilie und wird nicht
+   animiert. Was hier leuchtet, leuchtet ruhig. */
+/* KEINE EIGENE DREHUNG (Korrektur nach dem Bildschirmfoto).
+
+   Ich hatte hier `transform: rotate(-90deg)` gesetzt, damit der
+   Schweif wie die Bahnen bei zwoelf Uhr beginnt. Das war doppelt: Das
+   ganze SVG `.uhr__ring` ist bereits um -90 Grad gedreht (siehe dort,
+   "Bei Null soll der Ring OBEN beginnen"). Die Schweife standen
+   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.
+
+   Die Anzeige selbst rechnet weiterhin nur EINMAL je Sekunde -- das
+   war eine bewusste Entscheidung (sechzig Bildberechnungen je Sekunde
+   halten auf einer stundenlang offenen Seite den Rechner warm). Die
+   Bewegung dazwischen uebernimmt der Browser: eine Ueberblendung von
+   knapp einer Sekunde, die genau bis zum naechsten Takt laeuft.
+
+   Damit sieht die Perle aus wie ein gleitender Zeiger und kostet
+   trotzdem nichts. Voraussetzung ist, dass der Winkel WEITERZAEHLT
+   statt bei 360 Grad zurueckzuspringen -- sonst liefe die Ueberblendung
+   einmal je Minute rueckwaerts durch das ganze Zifferblatt. Genau das
+   macht start.js jetzt (fortlaufende Sekunden statt sk % 60). */
+.uhr__perle {
+  transition: transform .92s cubic-bezier(.33, 0, .2, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .uhr__perle { transition: none; }
+}