Uhrmacherei statt Lack: guillochiertes Blatt, laufende Perle, Spiegelung auf Metall

Filipe: "ich will dass diese kachel komplett speziell ist, das
hochwertigste und geilste auf der ganzen website ... auch das gleiche
prinzip fuer die uhr, noch vieeeel spezieller. hol die besten skills
von den besten skills dafuer."

Also keine weitere Schicht Lack, sondern die Mittel, an denen man ein
teures Instrument WIRKLICH erkennt.

DIE UHR -- VIER MITTEL AUS DER UHRMACHEREI

  1. GUILLOCHIERTES ZIFFERBLATT. Guillochieren ist das Verfahren, mit
     dem seit zweihundert Jahren hochwertige Blaetter gemacht werden:
     Eine Maschine schneidet ein feines regelmaessiges Muster ins
     Metall, und weil jede Rille das Licht anders zurueckwirft, LEBT
     die Flaeche. Hier aus Strahlen vom Mittelpunkt und Ringen darum,
     beide bei vier Prozent Deckkraft -- wer das Muster einzeln
     erkennt, hat es zu laut gemacht.
  2. EIN AUFGESETZTER ZWOELF-INDEX. Auf einem echten Blatt ist die
     Zwoelf nie nur ein Strich wie die anderen: Sie ist das, woran das
     Auge sich ausrichtet. Ein Keil in Hausrot mit heller Kante.
  3. DIE PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je Minute
     herum und ist das Einzige an der Uhr, das sich BEWEGT statt zu
     wachsen. Ein Bogen zeigt einen Stand, eine laufende Perle zeigt
     Leben. Sie springt im Sekundentakt statt zu gleiten -- ehrlicher
     (die Anzeige ist digital) und eine Bildberechnung je Sekunde statt
     sechzig.
  4. GRAVIERTE ZIFFERN. Ein dunkler Saum oben, ein heller unten -- das
     Lichtverhalten einer Vertiefung. Die Ziffern stehen damit IM Blatt
     statt darauf.

DIE KONSOLE -- DAS METALL FAENGT DAS LICHT

Auf den Kacheln leuchtet das Licht in der Farbe der Kategorie; dort ist
es ein Hinweis. Auf der Konsole waere das falsch -- ein farbiger
Schleier auf gebuerstetem Metall sieht aus wie eine Folie darauf.
Metall zeigt seine Form ueber die SPIEGELUNG: weiss, schmal, hart an
der Kante, und sie wandert mit dem Zeiger ueber die Fassung wie ein
Fenster, an dem man vorbeigeht. Erst dadurch sieht man, dass die
Fassung gewoelbt ist. Ein Standbild kann das nicht.

Dieselbe Falle wie heute Frueh dabei vermieden, diesmal vorher
bedacht: `.willkommen > *` haette dem Lichtelement wieder sein
`position: absolute` genommen -- jetzt `:not(.licht)`.

UND EIN FEHLER, DEN NUR DAS HANDY GEZEIGT HAT

Die Mulde der Uhr hing am Kasten daneben und war an dessen rechtem Rand
ausgerichtet. Am Rechner passte das; bei 412 px steht die Uhr mittig,
und die Mulde lag als dunkle Scheibe neben ihr. Sie entsteht jetzt aus
zwei Schattenringen der Uhr SELBST und ist damit konzentrisch bei jeder
Groesse -- die bessere Bauart, nicht nur die reparierte: Eine Fassung,
die man ausrichten muss, richtet irgendwann jemand falsch aus.

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

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

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. */