Alles fertig: Konsole montiert, Tageskachel als Instrument, zwei Seiten repariert

DIE KONSOLE -- DREI STUFEN DRAUF

  1. VIER NIETEN in den vier Fasen. Das Einzige, was eine Flaeche
     endgueltig zu einem GEGENSTAND macht, ist die Frage, wie sie
     befestigt ist. Ein Gehaeuse haengt nicht in der Luft.
  2. EINE GEFRAESTE NUT trennt Text von Instrumenten -- dunkel auf der
     Lichtseite, hell auf der Schattenseite. Genau umgekehrt zu einer
     aufgemalten Linie, und deshalb sieht sie nach Material aus.
  3. DIE UHR SITZT IN EINER MULDE statt auf der Platte.

Drei Fehler dabei, alle im Bildschirmfoto gesehen: Die Nieten waren
QUADRATE (eine Hintergrundebene laesst sich nicht runden -- jetzt aus
Radialverlaeufen, die selbst rund sind). Die Mulde lag UEBER der Uhr
und hat die polierte Luenette zu mattem Grau gedaempft (`::after` wird
nach allen Kindern gezeichnet). Und das Raster musste von der
Nieten-Ebene herunter: Eine Ebene hat nur EINE Deckkraft.

DIE TAGESKACHEL "WAS IST DRAN"

Die drei Zeilen sind jetzt MODULE -- Fase, Kantenlicht in der Farbe
ihres Bereichs, Eckwinkel. Sie sind damit kleine Ausgaben derselben
Bauteile, zu denen sie fuehren, was sie ja auch sind. Die ZAHL wurde
zum gefassten Schild wie das Zeichen auf den Kacheln, und zwischen den
Haelften laeuft dieselbe gefraeste Nut wie auf der Konsole.

Ein Rueckschritt dabei, von der Pruefung sofort gemeldet: Ich hatte
die Ziffer weiss gemacht, weil das auf Metall gut aussieht -- damit
war ihre Aussage weg. Die Zahl traegt die Farbe ihres Bereichs und bei
etwas Ueberfaelligem die Warnfarbe; das ist die schnellste Auskunft der
ganzen Kachel. Die Farbe gehoert in die Ziffer, nicht ins Schild.

SPICY MEDIA SIEHT DIE ZAHLEN JETZT NIRGENDS

Vorher nur Kachel und Seite -- die Creator-Zahlen standen weiterhin im
Dashboard, weil das sie ueber eine eigene Schnittstelle holt. Die ist
jetzt zu (404 am Server, nicht in der Oberflaeche). Das Dashboard
bleibt fuer sie stehen: Es faengt den Fehlschlag ausdruecklich ab.
Mit Pruefung und Gegenprobe.

UND ZWEI SEITEN, DIE BEIM ANSEHEN AUFFIELEN

Das ist der Ertrag der Durchsicht jener zwoelf Seiten, die bisher nur
GEPRUEFT und nie ANGESEHEN worden waren:

  * chat.html und uebersicht.html luden kopf.js OHNE wahl.js. Der
    Umschalter "Meine Sicht" fiel dort auf das nackte Systemfeld
    zurueck: 92 x 19 px, grauer Kasten, Systemschrift -- auf allen
    anderen Seiten ist es ein selbst gebautes Bedienelement, hinter dem
    dasselbe Feld unsichtbar bei 2 x 2 px liegt. Kaputt war nichts. Es
    sah nur aus wie aus einem anderen Programm, und genau das findet
    keine Pruefung, die auf Fehlermeldungen achtet.
    Neue Pruefung: Wer kopf.js laedt, muss wahl.js laden -- und vorher.
  * Der Chat-Rahmen gehoerte als einzige grosse Flaeche noch nicht zum
    Modulsystem. Jetzt schon.

18 Pruefungen gelaufen, alle gruen. Rechner und Handy angesehen,
dazu Kalender, Chat, Automationen, Uebersicht, Start-Check,
Steckbrief, Bereiche, Profil, Content, Scouting und Report.

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

workspace/assets/css/heim.css

@@ -185,10 +185,19 @@
     drop-shadow(0 22px 44px rgba(0, 0, 0, .7));
 }
 
-/* DAS INNENGLAS. Eigene Ebene, damit die Fassung ringsum stehen bleibt
-   -- genau wie bei der Uhr und beim Medaillon. Der Horizont unten ist
-   der einzige farbige Akzent: Rot links, Babyblau rechts, beide weit
-   unter der Blendschwelle. */
+/* DAS INNENGLAS mit dem Raster. Eigene Ebene, damit die Fassung
+   ringsum stehen bleibt -- genau wie bei der Uhr und beim Medaillon.
+   Der Horizont unten ist der einzige farbige Akzent: Rot links,
+   Babyblau rechts, beide weit unter der Blendschwelle.
+
+   DAS RASTER LIEGT SEIT DEM 07.09.2026 HIER und nicht mehr auf einer
+   eigenen halbdurchsichtigen Ebene. Grund: Auf dieser Ebene brauchen
+   die Nieten volle Deckkraft (siehe unten), und eine Ebene hat nur
+   EINE Deckkraft. Das Raster kommt deshalb als eigene Verlaufsschicht
+   mit eigener Alpha -- so ist es genauso leise wie vorher, aber die
+   Nieten sind es nicht. Derselbe Fehler wie mit der Koernung im
+   August: Wer zwei Dinge auf eine Ebene legt, gibt ihnen dieselbe
+   Lautstaerke. */
 .willkommen::before {
   content: ""; position: absolute; inset: var(--k-rand);
   z-index: 0; pointer-events: none;
@@ -198,24 +207,71 @@
     calc(100% - var(--k-fase) + var(--k-rand)) 100%, calc(var(--k-fase) - var(--k-rand)) 100%,
     0 calc(100% - var(--k-fase) + var(--k-rand)), 0 calc(var(--k-fase) - var(--k-rand)));
   background:
+    linear-gradient(180deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px),
+    repeating-linear-gradient(0deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px),
     radial-gradient(120% 90% at 4% 108%, rgba(255, 95, 109, .16), transparent 52%),
     radial-gradient(120% 90% at 96% 108%, rgba(143, 216, 255, .17), transparent 52%),
     linear-gradient(168deg, #131a27 0%, #0a0e17 62%, #06090f 100%);
 }
 
-/* RASTER UND KANTENLICHT auf einer zweiten Ebene. Das Raster ist
-   feiner als das der Module (16 statt 26 px) -- eine Konsole ist ein
-   Messgeraet, kein Modul, und der Unterschied soll auch aus der Naehe
-   tragen. */
+/* =====================================================================
+   STUFE 1: VIER NIETEN -- die Konsole ist MONTIERT (07.09.2026)
+
+   Filipe: "noch viel viel viel spezieller, setz noch eine drauf, und
+   dan noch eine drauf und dan noch eine drauf."
+
+   Das Einzige, was eine Flaeche endgueltig von einem Bildschirmkasten
+   zu einem GEGENSTAND macht, ist die Frage, wie sie befestigt ist.
+   Ein Gehaeuse haengt nicht in der Luft -- es ist verschraubt. Vier
+   Nieten in den vier Fasen beantworten diese Frage, und sie
+   beantworten sie an genau den Stellen, an denen ein Konstrukteur
+   sie auch setzen wuerde: dort, wo das Material am dicksten ist.
+
+   Jede Niete ist EIN Kegelverlauf (das gedrehte Metall des Kopfes) und
+   ein Radialverlauf darueber (die Woelbung: Licht oben links, Schatten
+   unten rechts). Acht Ebenen fuer vier Nieten, kein einziges Element
+   mehr im Baum.
+   ===================================================================== */
 .willkommen::after {
   content: ""; position: absolute; inset: var(--k-rand);
   z-index: 0; pointer-events: none;
   clip-path: inherit;
+  /* RUND, UND ZWAR AUS SICH SELBST HERAUS.
+
+     Der erste Anlauf nahm einen Kegelverlauf fuer das Metall und
+     schnitt ihn mit `background-size` auf 9x9 Pixel zurecht. Das
+     Ergebnis waren vier graue QUADRATE: Eine Hintergrundebene laesst
+     sich nicht runden -- `border-radius` gilt fuer das Element, nicht
+     fuer eine ihrer Ebenen, und eine Maske haette alle acht Ebenen
+     zugleich getroffen.
+
+     Ein Radialverlauf dagegen IST rund: Wo sein letzter Stopp
+     durchsichtig wird, hoert die Form auf. Deshalb bestehen die
+     Nieten jetzt aus zwei Radialverlaeufen -- einer fuer den Kopf mit
+     Rand, einer fuer die Woelbung. `closest-side` sorgt dafuer, dass
+     100 % der Radius sind und nicht die weiteste Ecke; genau der
+     Fehler, der heute die Skala der Uhr unsichtbar gemacht hat. */
+  --niete-metall: radial-gradient(circle closest-side,
+    #e6eff9 0%, #b6c6d9 38%, #64758c 74%,
+    #39465a 90%, rgba(6, 10, 18, .95) 97%, transparent 100%);
+  --niete-woelbung: radial-gradient(circle closest-side at 34% 30%,
+    rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 46%,
+    rgba(0, 0, 0, .45) 88%, transparent 100%);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px),
-    repeating-linear-gradient(0deg, rgba(150, 186, 220, .30) 0 1px, transparent 1px 16px),
-    repeating-linear-gradient(90deg, rgba(150, 186, 220, .30) 0 1px, transparent 1px 16px);
-  opacity: .30;
+    var(--niete-woelbung), var(--niete-metall),
+    var(--niete-woelbung), var(--niete-metall),
+    var(--niete-woelbung), var(--niete-metall),
+    var(--niete-woelbung), var(--niete-metall);
+  background-repeat: no-repeat;
+  background-size: 11px 11px, 11px 11px, 11px 11px, 11px 11px,
+                   11px 11px, 11px 11px, 11px 11px, 11px 11px;
+  /* In der Fase, nicht in der Ecke: Die Ecke gibt es nicht mehr. */
+  background-position:
+    left 8px top 8px,          left 8px top 8px,
+    right 8px top 8px,         right 8px top 8px,
+    right 8px bottom 8px,      right 8px bottom 8px,
+    left 8px bottom 8px,       left 8px bottom 8px;
 }
 
 .willkommen > * { position: relative; z-index: 1; }
@@ -229,6 +285,63 @@
 /* Rechts: Glocke neben der Uhr, beide rechtsbündig. `margin-left: auto`
    statt `justify-content: space-between` am Elternteil -- so bleibt die
    Gruppe auch dann rechts, wenn der Text davor kurz ist. */
+/* =====================================================================
+   STUFE 2: EINE GEFRAESTE NUT trennt Text von Instrumenten.
+
+   Auf einer echten Konsole liegen Anzeige und Beschriftung nicht auf
+   derselben Flaeche -- dazwischen laeuft eine Nut. Sie ist keine Linie,
+   sondern eine VERTIEFUNG, und daran erkennt man sie: dunkel auf der
+   Lichtseite, hell auf der Schattenseite. Genau umgekehrt zu einer
+   aufgemalten Trennlinie, und genau deshalb sieht sie nach Material
+   aus statt nach Dekoration.
+
+   STUFE 3: DIE UHR SITZT IN EINER MULDE.
+
+   Sie lag bisher AUF der Konsole. Ein Instrument wird aber in eine
+   Fraesung eingesetzt: eine runde Vertiefung, etwas groesser als das
+   Gehaeuse, mit Schatten oben (dort faellt kein Licht mehr hinein) und
+   einem hellen Bogen unten (dort trifft es die gegenueberliegende
+   Wand). Beides zusammen macht aus "davor" ein "darin".
+   ===================================================================== */
+.willkommen__rechts { position: relative; }
+
+/* Die Nut. */
+.willkommen__rechts::before {
+  content: ""; position: absolute;
+  left: -18px; top: -14px; bottom: -14px; width: 2px;
+  pointer-events: none; z-index: 0;
+  background: linear-gradient(90deg,
+    rgba(0, 0, 0, .75) 0 1px,
+    rgba(255, 255, 255, .13) 1px 2px);
+  border-radius: 1px;
+}
+
+/* DIE INSTRUMENTE LIEGEN UEBER DER MULDE -- und das muss ausdruecklich
+   dastehen. `::after` wird NACH allen Kindern gezeichnet; bei gleichem
+   Stapelwert gewinnt das spaetere Element. Die Mulde lag deshalb OBEN
+   und hat die Luenette der Uhr von poliertem Stahl zu mattem Grau
+   gedaempft -- im Bildschirmfoto gesehen, im Vergleich mit der Aufnahme
+   von vorhin. Ein Stapelwert von 1 stellt die Reihenfolge her, die der
+   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);
+}
+
 .willkommen__rechts {
   display: flex; align-items: center; gap: 14px;
   margin-left: auto; flex: 0 0 auto;