Startseite: die tote Mitte der Konsole bekommt drei Ablesungen

Gemessen, nicht geschaetzt: Auf 1440 px lagen zwischen dem Ende des
Textes und der Uhr rund 300 px Leere. Dort stehen jetzt HEUTE (Termine),
ALS NAECHSTES (Uhrzeit) und OFFEN (Punkte, Farbe nach Lage).

Keine zweite Zaehlung: Die Zahlen kommen aus denselben zwei Quellen, die
die Kacheln darunter fuellen. Zwei Rechenwege fuer dieselbe Zahl laufen
auseinander, und dann stehen zwei Wahrheiten auf einem Bildschirm.

EINE Fassung mit Stegen, nicht drei Kaestchen. Der erste Anlauf gab jedem
Wert eine eigene Fraesung -- im Bild sah das aus wie aufgeklebte
Plaettchen. Ein Instrumentenblock ist EIN eingelassenes Feld, in dem
Stege trennen; das Licht laeuft dann einmal ueber eine Kante statt
sechsmal. Auf dem Handy geht der Block auf volle Breite und richtet sich
nach der Uhr, nicht nach dem Rand.

EINE ANNAHME KORRIGIERT: In meiner Merkliste stand "Werktisch-Aufbau
nach VanVans Business Hub, Prozentring links". Im Hub nachgesehen -- es
gibt dort keinen Ring und keinen solchen Aufbau, nur eine schlichte
buehne-hero. Filipes Verweis galt der UHR, und die ist laengst gebaut.
Meine eigenen Notizen altern wie jede andere Bestandsliste.

DREI BEFUNDE AUS EIGENEN PRUEFUNGEN, alle behoben:

1. pruef-css-klassen: Die Zahl der Schriftgroessen unter 11,5 px war um
   genau eine gestiegen -- .stand__schild stand auf 9,3 px. Gesperrte
   Grossbuchstaben in 9 px liest man nicht, man erraet sie. Jetzt 11,5 px
   mit etwas engerer Sperrung, damit drei Schilder bei 320 px weiterhin
   nebeneinander passen (nachgemessen: 287 px, nichts abgeschnitten).

2. pruef-struktur: pruef-arten.mjs bildete das Tagesdatum aus UTC. Nachts
   zwischen 00:00 und 02:00 waere sie rot geworden, ohne dass am Code
   etwas falsch ist. Derselbe Fehler war mir am selben Abend schon im
   Messskript passiert -- dort hatte ich "Heute=0" gemessen und den Code
   verdaechtigt, der richtig lag.

3. Beim Bauen fast eingebaut: margin-left:auto von der Uhrgruppe
   genommen, weil der neue Block sie ja schon nach rechts schiebt. Er tut
   das nur, solange er da ist -- bis zur ersten Antwort steht er auf
   hidden, und die Uhr waere sichtbar weggesprungen.

Neu: server/pruef-ueberlappung.mjs. Misst auf 5 Seiten x 4 Breiten, ob
ein Bedienelement ueber einem anderen liegt (am 06.09. lag der
Sicht-Umschalter bei 412 px auf zwoelf Seiten ueber dem Chat-Knopf).
Ueberlappungen INNERHALB eines Bedienelements zaehlen nicht -- ein
durchsichtiges select ueber seinem eigenen Schild ist die uebliche
Bauart, und eine Warnung, die immer kommt, ist keine Warnung mehr. Mit
Gegenprobe: ein absichtlich verschobener Knopf muss erkannt werden.

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

workspace/assets/css/heim.css

@@ -412,6 +412,119 @@
    zwei Bauteile. Auf dem Handy gibt es diese Trennung nicht mehr
    (dort steht alles untereinander), deshalb faellt sie dort weg. */
 
+/* =====================================================================
+   DIE MITTE DER KONSOLE: DREI EINGELASSENE ABLESUNGEN
+
+   Gemessen, nicht geschaetzt: Auf 1440 px lagen zwischen dem Ende des
+   Textes und der Uhr rund 300 px Leere. Auf einer Konsole ist eine
+   leere Flaeche keine Ruhe, sondern ein fehlendes Bauteil.
+
+   Sie sind EINGELASSEN, nicht aufgesetzt -- dieselbe Bauart wie die
+   Uhrmulde daneben, damit die Kachel EIN Stueck bleibt und nicht in
+   zwei Stile zerfaellt:
+     - dunkler Grund (in einer Fraesung faellt weniger Licht an)
+     - Schatten oben INNEN, heller Bogen unten INNEN (die
+       gegenueberliegende Wand faengt das Licht)
+     - haarfeine helle Kante aussen unten (die Oberkante der Fraesung)
+   Ein `box-shadow: inset` allein reicht dafuer nicht: Es macht eine
+   Delle, aber keinen Rand. Erst die zweite, helle Kante macht daraus
+   ein Loch mit Wand.
+
+   `flex: 0 1 auto` und `flex-wrap` am Elternteil: Wird der Platz eng,
+   RUTSCHT die Gruppe unter den Text, statt sich zu quetschen. Das ist
+   Absicht und ersetzt eine feste Umbruchbreite -- eine Zahl, die zaehlt,
+   was daneben steht, wird beim naechsten hinzugefuegten Element falsch,
+   und zwar still. Genau so lag im September der Sicht-Umschalter ueber
+   dem Chat-Knopf. */
+/* EINE FASSUNG, DREI FELDER -- nicht drei Kaestchen nebeneinander.
+
+   Der erste Anlauf gab jedem Wert eine eigene Fraesung. Im Bild sah das
+   aus wie drei aufgeklebte Plaettchen: Ein Instrumentenblock auf einer
+   Konsole ist EIN eingelassenes Feld, in dem STEGE die Ablesungen
+   trennen. Der Unterschied ist nicht Geschmack, sondern Bauweise -- und
+   man sieht ihn sofort, weil das Licht nur einmal ueber eine Kante
+   laeuft statt sechsmal.
+
+   Der Steg ist zwei Linien breit, nie eine: dunkel auf der Lichtseite,
+   hell auf der Schattenseite. Eine einzelne Linie ist ein Strich, zwei
+   sind eine Kante. Dieselbe Regel wie bei der Nut daneben. */
+.willkommen__stand {
+  display: flex; align-items: stretch;
+  margin-left: auto; flex: 0 1 auto;
+  padding: 3px;
+  border-radius: 13px;
+  background:
+    linear-gradient(178deg, rgba(3, 8, 15, .78), rgba(10, 18, 29, .54));
+  box-shadow:
+    inset 0 4px 9px rgba(0, 0, 0, .66),          /* Schatten der Oberkante */
+    inset 0 -1px 0 rgba(150, 185, 220, .17),     /* Licht auf der Gegenwand */
+    0 1px 0 rgba(170, 200, 235, .10);            /* Kante der Fraesung */
+}
+.stand {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 4px;
+  min-width: 86px; padding: 10px 15px 9px;
+  position: relative;
+}
+/* Der Steg zwischen zwei Feldern -- am zweiten und dritten, nicht am
+   ersten. `::before` statt `border-left`, weil eine Kante aus zwei
+   Farben besteht. */
+.stand + .stand::before {
+  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%;
+  width: 2px;
+  background: linear-gradient(90deg,
+    rgba(0, 0, 0, .5) 0 1px, rgba(160, 195, 230, .13) 1px 2px);
+}
+.stand__wert {
+  font-size: 1.55rem; font-weight: 700; line-height: 1;
+  font-variant-numeric: tabular-nums;            /* springt nicht beim Zaehlen */
+  letter-spacing: .01em;
+  color: var(--stand-farbe, #cfe2f5);
+  /* Ein Hauch Eigenlicht -- so viel, dass die Ziffer in der Fraesung
+     leuchtet, so wenig, dass sie scharf bleibt. Kein blur() auf der
+     Schrift selbst; das war beim ersten Uhr-Anlauf der Vorwurf. */
+  text-shadow: 0 0 12px color-mix(in srgb, var(--stand-farbe, #cfe2f5) 34%, transparent);
+}
+/* 11,5 px IST DIE UNTERGRENZE, auch fuer ein Schildchen (08.09.2026).
+
+   Hier stand `.58rem` -- 9,3 px. pruef-css-klassen hat es gemeldet, und
+   zwar nicht als Geschmacksfrage: Die Zahl der Stellen unter 11,5 px war
+   um genau eine gestiegen. Gesperrte Grossbuchstaben in 9 px liest man
+   nicht, man erraet sie -- und "augenschonend" gilt ueberall, nicht nur
+   dort, wo es auffaellt.
+
+   Die Sperrung faellt dafuer etwas kleiner aus: Was groesser wird, darf
+   nicht auch noch breiter werden, sonst passen drei Schilder bei 320 px
+   nicht mehr nebeneinander. Nachgemessen, nicht geschaetzt. */
+.stand__schild {
+  font-size: .72rem; font-weight: 600; letter-spacing: .09em;
+  text-transform: uppercase;
+  color: rgba(168, 192, 218, .62);
+  white-space: nowrap;
+}
+/* Eine Farbe je Ablesung -- dieselbe Idee wie bei den Terminarten:
+   Die Farbe gehoert zur Sache. Babyblau fuer den Tag, Bernstein fuer
+   das Naechste, und Offen wechselt mit der Lage. */
+.stand[data-stand="heute"]     { --stand-farbe: #7fc4f2; }
+.stand[data-stand="naechster"] { --stand-farbe: #e3b341; }
+.stand[data-stand="offen"]     { --stand-farbe: #8fb3cf; }
+.stand[data-stand="offen"][data-stufe="offen"]   { --stand-farbe: #e3b341; }
+.stand[data-stand="offen"][data-stufe="warnung"] { --stand-farbe: #ff6b74; }
+/* Ruhig heisst ruhig: kein Grasgruen in einer Konsole, die sonst aus
+   Blau und Rot besteht -- ein gedaempftes Petrol sagt dasselbe, ohne
+   die Augen zu stechen (augenschonend gilt ueberall). */
+.stand[data-stand="offen"][data-stufe="ruhig"]   { --stand-farbe: #57b89b; }
+
+/* `margin-left: auto` BLEIBT HIER, obwohl der Stand daneben es auch hat.
+
+   Beim Bauen hatte ich es weggenommen -- der Stand schiebe die Uhr ja
+   schon nach rechts. Er tut das nur, solange er DA ist: Bis die erste
+   Abfrage zurueck ist, steht er auf `hidden`, und in dieser Sekunde
+   waere die Uhr an den Text geklebt und dann sichtbar weggesprungen.
+
+   Zwei `auto` nebeneinander sind kein Widerspruch: Das erste nimmt den
+   freien Platz, das zweite bekommt keinen mehr. Ergebnis ist in BEIDEN
+   Faellen dasselbe -- Instrumente rechts, Text links. */
 .willkommen__rechts {
   display: flex; align-items: center; gap: 14px;
   margin-left: auto; flex: 0 0 auto;
@@ -952,6 +1065,22 @@
      keine Zeile mehr übrig. */
   .willkommen { padding: 18px 16px; }
   .willkommen__rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
+  /* DER STAND RICHTET SICH NACH DER UHR, NICHT NACH DEM RAND.
+
+     Am Rechner sitzt er rechts, weil dort auch die Uhr rechts sitzt.
+     Auf dem Handy rutscht die Uhr nach LINKS (Zeile darueber) -- der
+     Stand blieb dabei rechtsbuendig und stand als einziges Bauteil auf
+     der falschen Seite. Im Bildschirmfoto bei 412 px gesehen, nicht
+     hergeleitet.
+
+     `align-self` statt `margin-left: 0`: Der Kasten soll auf die volle
+     Breite gehen duerfen, wenn drei Felder nebeneinander nicht mehr
+     passen -- dann verteilen sie sich, statt sich zu stauchen. */
+  .willkommen__stand {
+    margin-left: 0; width: 100%;
+    justify-content: space-around;
+  }
+  .stand { min-width: 0; flex: 1 1 0; padding: 10px 8px 9px; }
   .uhr { width: 118px; height: 118px; padding: 4px; }
   .uhr__zeit { font-size: 1.3rem; }
 }