Aus drei Strichen werden drei Ringe aus Material

Filipe: "ich will dass der rand mit den sekunden minuten und stunden
viel krasser und geiler ist ... ultra modern, ultra speziell, ultra
profissionell, ultra phaenomenal."

EIN STRICH IST EINE LINIE. EIN RING IST EIN KOERPER.

Und ein Koerper hat drei Merkmale, die man zeichnen MUSS, sonst bleibt
es ein Strich. Jeder der drei Ringe besteht deshalb jetzt aus drei
Lagen:

  SCHATTEN   Er liegt ueber dem Zifferblatt, also wirft er einen.
             Dieselbe Bahn, schwarz, ein halbes Rastermass nach UNTEN.
  KOERPER    Der Bogen selbst in seiner Farbe.
  OBERKANTE  Duenner, hell, ein Drittel nach OBEN. Weil er versetzt
             ist, schaut er oben hervor und verschwindet unten -- genau
             das tut eine gewoelbte Kante bei Licht von oben.

Kein Weichzeichner, nirgends: Die Tiefe kommt aus dem Versatz, nicht
aus Unschaerfe.

DIE BAHNEN SIND GEFRAESTE RILLEN

Ein Zeiger laeuft bei einem guten Instrument IN einer Vertiefung. Eine
Rille erkennt man an zweierlei: dunkler als ihre Umgebung, und an ihrer
unteren Wand steht eine helle Kante. Beides steht jetzt da, und die
Breite folgt dem Ring, der darin laeuft -- eine Rille, die schmaler ist
als ihr Zeiger, ist keine.

DREI KOEPFE STATT EINEM

Minute und Stunde bekommen dieselbe polierte Kappe wie die Sekunde, auf
ihren eigenen Bahnen und in ihrer eigenen Farbe. Erst dadurch liest man
die drei Ringe als drei ZEIGER und nicht als drei Fortschrittsbalken.
Sie laufen mit ihrem Ring: die Minute nimmt die Sekunden anteilig mit,
die Stunde die Minuten -- sonst staende der Kopf neben dem Ende seines
Bogens.

ALLE LAGEN WERDEN GEMEINSAM GESETZT. Sie tragen `data-ring`; einzeln
gepflegte Verweise waeren drei Stellen, an denen man eine vergessen
kann, und ein Schatten, der stehen bleibt, sieht sofort kaputt aus.

UND EIN FUND, DEN DIE PRUEFUNG SOFORT GEMELDET HAT

Die neue helle Oberkante des Stundenrings laeuft hinter den Ziffern
durch: schlechtester Kontrast 2,98:1 -- knapp unter der Grenze, und
ausgerechnet bei der Uhrzeit selbst. Die Antwort war nicht "Kante
weg", sondern der fehlende Untergrund: Auf einer echten Uhr steht eine
Anzeige, die ueber Zeigern liegt, auf einer eigenen vertieften INSEL im
Zifferblatt. Jetzt 5,42:1, und dabei 29 statt 14 gemessene Stellen.

Merksatz: Wenn eine neue Schicht einen Text unlesbar macht, ist die
Antwort selten "Schicht weg" -- meistens fehlt dem Text sein Grund.

Zehn Pruefungen gelaufen, alle gruen. Rechner und Handy angesehen.

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

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;