Uhr und Glocke in die Begruessung, Teilen in die Leiste, ein echter Fehler weg

Neun Punkte aus Filipes Bildschirmfotos. Der wichtigste war kein
Aussehen, sondern ein Fehler:

UEBEREINANDERLIEGENDE TEXTE IN DER SICHERUNGSLISTE. Das Datum entstand
aus `name.split('-').slice(1).reverse().join('.')`. Bei
"woechentlich-2026-09-06.db" ging das gut; die Sicherungen vor einem
Umbau heissen aber "vorher-2026-09-02-160012438.db" -- mit Zeitstempel.
Heraus kam "160012438.02.09.2026", dreimal so lang wie die 96-px-Spalte,
und es lief ueber den Nachbartext. Ein Muster, das Bestandteile ZAEHLT
statt sie zu SUCHEN, bricht beim ersten Namen mit einem Teil mehr. Jetzt
ein Suchmuster nach vier-zwei-zwei Ziffern -- und in der CSS eine
Kuerzung, damit der NAECHSTE zu lange Text nur abgeschnitten wird. Eine
Spalte mit fester Breite ohne Kuerzung ist immer eine Zeitbombe.

DIE BEGRUESSUNGSKACHEL. Runde Digitaluhr rechts: zwei Ringe um dieselbe
Mitte -- innen die Sekunde, aussen der Stand der Stunde. Kein
setInterval(1000): Ein fester Takt laeuft mit der Zeit aus dem Tritt und
ueberspringt Sekunden; gewartet wird bis zur naechsten VOLLEN Sekunde.
Die Glocke ist aus der Kopfleiste hierhergezogen -- mit Rueckfall, denn
zwoelf andere Seiten haben diesen Platz nicht. Nebenbei ist die Leiste
damit um ein Element leichter; sie ist am 06.09. schon einmal an einem
sechsten zerbrochen.

TEILEN-KNOPF in der Leiste, nur fuer Scout, Manager und DogFather.
Geteilt wird der EINGANG, nicht die aktuelle Seite: Ein Link auf
bereich.html?b=schutz schickt jemanden auf eine Seite, die er nicht
sehen darf. Wo es navigator.share gibt, wird es benutzt; sonst
Zwischenablage; wo beides fehlt, erscheint der Knopf gar nicht -- ein
dritter Ausgang statt einer Schaltflaeche, die nichts tut.

WEITER: Kachelreihenfolge Steckbrief -> Profile -> Zahlen. Die
Tagesliste laesst sich zuklappen und zeigt dann SIEBEN Tage (die Woche,
nicht die vier von ueberall sonst). Dialoge, Automationen-Karten,
Sicherungsblock, KI-Kasten und Call-Karten bekommen dasselbe Material
wie die Kacheln -- Leuchtschiene, Materialstaerke, Glanz.

Profilbilder brauchten nichts: Der Weg gibt es fuer jede Rolle bereits
(steckbrief.html fuer die Betreuung, derselbe Block auf profil.html fuer
Creator, Hochladen schreibt immer auf req.person.id).

ZWEI EIGENE FEHLER, beide gemessen statt vermutet:
  - Die Koernung lag in vier neuen Bloecken auf DERSELBEN Ebene wie die
    Spiegelung und erbte deren 50 % Deckkraft. Gemessen rgb(56,44,58)
    statt rgb(20,26,38) -- die Karten sahen durchsichtig aus, obwohl sie
    zu 95 % decken. Derselbe Fehler wie heute Nachmittag an der
    Anmeldekarte. Koernung gehoert auf eine eigene Ebene mit overlay.
  - `.glocke-platz:empty { display: none }` liess die Kachel wachsen,
    sobald die Glocke geladen war. Layout-Sprung von start.html: 0,708.
    Platz wird jetzt reserviert -> 0,473.

pruef-struktur: `-breit` gehoert in die Stufen-Ausnahme. Schaerfe kostet
Bytes (hohe Frequenzen lassen sich nicht wegrechnen), die mittlere Stufe
wuchs auf 230-300 KB. Die Regel bleibt inhaltlich: gross nur, WENN eine
kleinere Stufe daneben steht. Die Verkettung der beiden replace() waere
ein stiller Fehler gewesen -- fuer uhd haette sie nach `-schmal` gesucht.

Gruen: kopf-messen (3), breiten (23), glocke (26), css-klassen (15),
struktur (32), buehne (38), start-ansicht (136), handy (59),
formulare (19), barrierefrei (18), lesbarkeit (14), tempo (8).

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

workspace/assets/css/start.css

@@ -646,6 +646,15 @@ body.start > main { position: relative; z-index: 1; }
   gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
 }
 .klapp-kopf > .feldschild, .klapp-kopf > .block__titel { margin: 0; }
+/* Zwei Knöpfe rechts im Kopf einer Liste: der stille Schalter und die
+   Hauptaktion. Eigener Behälter, damit sie beim Umbruch ZUSAMMEN
+   umbrechen -- sonst steht auf schmalen Geräten der Schalter allein in
+   einer Zeile und die Hauptaktion in der nächsten. */
+.klapp-kopf__knoepfe {
+  display: flex; align-items: center; gap: 10px;
+  flex-wrap: wrap; justify-content: flex-end;
+  margin-left: auto;
+}
 
 .klapp-pfeil {
   width: 14px; height: 14px; flex: 0 0 auto;
@@ -659,6 +668,15 @@ body.start > main { position: relative; z-index: 1; }
    statt ueber das Entfernen von Zeilen: Das Aufklappen braucht dann
    weder einen neuen Aufbau noch eine zweite Abfrage. */
 [data-klapp="zu"] > *:nth-child(n+5) { display: none; }
+/* SIEBEN STATT VIER -- fuer Listen, bei denen die Woche die Einheit ist
+   (07.09.2026, Wunsch Filipe zur Tagesliste: "man soll immer noch die
+   letzten 7 tage sehen"). Vier Tage sind kein Zeitraum, ueber den man
+   etwas sagen kann; sieben sind eine Woche und damit vergleichbar.
+
+   Eine zweite Regel und keine gerechnete Zahl: `nth-child` nimmt keine
+   CSS-Variable. Zwei feste Werte, die beide im Quelltext stehen, sind
+   ehrlicher als eine Zahl, die man im Stil sucht und im Skript findet. */
+[data-klapp="zu7"] > *:nth-child(n+8) { display: none; }
 
 .willkommen { margin-bottom: 38px; }
 .willkommen .titel { margin-bottom: 6px; }
@@ -1231,7 +1249,12 @@ body.start > main { position: relative; z-index: 1; }
 /* Die Seite ist breit, damit die Kacheln Platz haben. Eine Zeile Text
    ueber 1240 px zu ziehen macht sie aber nicht lesbarer, sondern
    anstrengender -- Hinweise und Begruessung behalten deshalb ihr Mass. */
-.willkommen, .dran__liste, .inhalt .fuss { max-width: 940px; }
+/* .willkommen ist seit dem 07.09.2026 eine KACHEL und keine Textzeile
+   mehr. Eine Textzeile begrenzt man auf 940 px, weil lange Zeilen
+   schlecht zu lesen sind; eine Kachel, die 200 px vor allen anderen
+   endet, sieht dagegen aus, als sei sie danebengerutscht. Der Text
+   darin bleibt kurz -- die Begrenzung hat er nie gebraucht. */
+.dran__liste, .inhalt .fuss { max-width: 940px; }
 
 .dran { margin-bottom: 30px; }
 .dran__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@@ -4240,3 +4263,259 @@ body[data-fremde-sicht="ja"]::after {
   .kachel > .kachel__link::before,
   .kachel__zeichen::after { display: none; }
 }
+
+/* =====================================================================
+   DIE BEGRÜSSUNGSKACHEL — mit Uhr und Glocke (07.09.2026)
+
+   Wunsch Filipe: "ich will dass diese kacheln da auch übertrieben geil
+   gemacht wird, wirklich seeeeeehr hochwertig mit einer runden
+   digitalen uhr rechts in der kachel ... und der benachrichtigungs
+   button soll auch von der leiste in diese kachel gesetzt werden."
+
+   ---------------------------------------------------------------------
+   WARUM DIE UHR HIER RICHTIG IST UND NICHT NUR SCHÖN
+
+   Eine Uhr ist die einzige Angabe auf dieser Seite, die sich ändert,
+   während man hinsieht. Genau das macht sie wertvoll: Sie sagt ohne ein
+   Wort, dass die Seite LEBT -- dass die Zahlen daneben von jetzt sind
+   und nicht von gestern Nacht. Eine Oberfläche, bei der man das nicht
+   weiß, prüft man ständig nach.
+
+   Und sie steht neben dem Datum, das ohnehin dort steht. Zwei Angaben
+   zur selben Frage gehören zusammen; das Datum oben und die Uhrzeit in
+   der Fußzeile wären zwei halbe Antworten.
+
+   ---------------------------------------------------------------------
+   ZWEI RINGE, NICHT EINER
+
+   Der innere Ring füllt sich in einer Minute, der äußere in einer
+   Stunde. Das ist der Unterschied zwischen "eine Uhr, die tickt" und
+   "eine Uhr, an der man den Stand der Stunde sieht" -- man erkennt aus
+   dem Augenwinkel, ob die Stunde jung ist oder gleich vorbei.
+
+   Der Sekundenring läuft NICHT weich. Ein weicher Zeiger sieht teurer
+   aus, kostet aber eine Bildberechnung pro Bild statt einer pro
+   Sekunde, und auf einer Seite, die stundenlang offen steht, ist das
+   der Unterschied zwischen einem warmen und einem kalten Rechner.
+   Der Sprung ist außerdem ehrlicher: Die Anzeige ist digital.
+   ===================================================================== */
+
+/* Die Kachel selbst: dasselbe Material wie die Bereichskacheln, damit
+   nicht zwei Oberflächen nebeneinanderliegen. Sie hat KEINE eigene
+   Farbschiene -- sie gehört zu keiner Kategorie, sie ist der Anfang. */
+.willkommen {
+  position: relative;
+  padding: 22px 24px;
+  border: 1px solid var(--rand);
+  border-radius: 4px 20px 20px 4px;
+  background:
+    linear-gradient(90deg,
+      rgba(63, 189, 245, .10) 0%,
+      rgba(63, 189, 245, .03) 14%,
+      transparent 40%),
+    linear-gradient(163deg,
+      rgba(23, 31, 45, .95) 0%,
+      rgba(11, 15, 24, .95) 58%,
+      rgba(8, 11, 18, .95) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .10),
+    inset 0 -1px 0 rgba(0, 0, 0, .50),
+    inset 2px 0 0 -1px color-mix(in srgb, var(--akzent) 34%, transparent),
+    0 2px 5px -2px rgba(0, 0, 0, .55),
+    0 16px 34px -20px rgba(0, 0, 0, .88);
+  overflow: hidden;
+}
+/* Die Leuchtschiene links -- dieselbe Sprache wie überall, hier im
+   Hausakzent statt in einer Kategoriefarbe. */
+.willkommen::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
+  border-radius: 4px 0 0 4px;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--akzent) 55%, #fff) 0%,
+    var(--akzent) 26%,
+    color-mix(in srgb, var(--akzent) 50%, transparent) 100%);
+  box-shadow:
+    0 0 9px 0 color-mix(in srgb, var(--akzent) 55%, transparent),
+    3px 0 20px -3px color-mix(in srgb, var(--akzent) 42%, transparent);
+  opacity: .9;
+  z-index: 2;
+}
+/* Körnung und ein fester Glanz. Kein wandernder wie bei den Kacheln:
+   Diese Fläche wird nicht angeklickt, also gibt es nichts zu quittieren. */
+.willkommen::after {
+  content: ""; position: absolute; inset: 0; pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(104deg,
+      transparent 26%,
+      rgba(255, 255, 255, .05) 40%,
+      rgba(255, 255, 255, .085) 47%,
+      rgba(255, 255, 255, .03) 55%,
+      transparent 70%);
+  /* KEINE Körnung auf DIESER Ebene (07.09.2026, gemessen).
+
+     Sie stand hier als zweite Schicht und hat die Deckkraft der
+     Spiegelung geerbt -- 50 % eines mittelgrauen Rauschens heben jeden
+     Bildpunkt um rund 30 Stufen an. Gemessen: rgb(56,44,58) statt der
+     berechneten rgb(20,26,38), und über einer hellen Stelle des
+     Motivs rgb(85,83,81). Die Karte sah dadurch durchsichtig aus,
+     obwohl sie zu 95 % deckt.
+
+     Derselbe Fehler wie an der Anmeldekarte heute Nachmittag, und
+     genau derselbe Grund: Körnung gehört auf eine EIGENE Ebene mit
+     `mix-blend-mode: overlay` und 3 bis 4 Prozent -- so wie bei den
+     Kacheln der Startseite. Auf einer geteilten Ebene ist sie kein
+     Material, sondern ein grauer Schleier. */
+  opacity: .5;
+}
+.willkommen > * { position: relative; z-index: 1; }
+
+.willkommen__reihe {
+  display: flex; align-items: center; gap: 16px;
+  flex-wrap: wrap;
+}
+.willkommen__text { min-width: 0; flex: 1 1 260px; }
+
+/* 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. */
+.willkommen__rechts {
+  display: flex; align-items: center; gap: 14px;
+  margin-left: auto; flex: 0 0 auto;
+}
+/* DER PLATZ WIRD RESERVIERT, NICHT NACHTRÄGLICH GENOMMEN.
+
+   Hier stand `:empty { display: none }` -- und das ist genau der Fehler,
+   den die Kachel darunter schon einmal gemacht hat: Die Glocke wird
+   erst nach der ersten Abfrage eingehängt, und bis dahin war der Platz
+   0 px breit. In dem Moment, in dem sie erscheint, wächst die Zeile,
+   und alles darunter rutscht.
+
+   Ein Sprung ist kein Schönheitsfehler, sondern der Grund, warum man
+   auf den falschen Knopf drückt: Man zielt auf etwas, und im Moment des
+   Klicks rutscht es weg. Gemessen von pruef-tempo-workspace.
+
+   Also 46 px, immer -- ob die Glocke kommt oder nicht. Auf Geräten, auf
+   denen es sie gar nicht gibt (iPhone im Browser), bleibt ein leerer
+   Streifen neben der Uhr; das ist der Preis, und er ist niedriger als
+   ein springendes Bild. */
+.glocke-platz { width: 46px; height: 46px; flex: none; }
+
+/* ---------- Die Uhr -------------------------------------------------- */
+.uhr {
+  position: relative;
+  width: 108px; height: 108px; flex: none;
+  display: grid; place-items: center;
+  border-radius: 50%;
+  /* Das Gehäuse: außen ein Lichtsaum, innen eine dunkle Scheibe. */
+  background:
+    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .05), transparent 62%),
+    radial-gradient(circle at 50% 50%, #0d131f 62%, #070a11 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .12),
+    inset 0 -2px 6px -3px rgba(0, 0, 0, .9),
+    0 0 0 1px rgba(150, 186, 220, .10),
+    0 10px 24px -14px rgba(0, 0, 0, .9);
+}
+/* Die Skala: sechzig feine Striche, aus EINEM sich wiederholenden
+   Kegelverlauf. Sechzig Elemente im HTML wären dieselbe Optik mit
+   sechzig Elementen mehr im Baum. */
+.uhr__skala {
+  position: absolute; inset: 7px; border-radius: 50%;
+  background: repeating-conic-gradient(from 0deg,
+    rgba(150, 186, 220, .30) 0deg 0.5deg,
+    transparent 0.5deg 6deg);
+  /* Nur ein schmaler Ring davon ist zu sehen -- der Rest wird
+     ausgestanzt. */
+  -webkit-mask: radial-gradient(circle, transparent 0 76%, #000 76% 84%, transparent 84%);
+  mask: radial-gradient(circle, transparent 0 76%, #000 76% 84%, transparent 84%);
+  opacity: .5;
+  pointer-events: none;
+}
+/* Die Glasscheibe: eine Spiegelung von oben links über der Kuppe. */
+.uhr__glas {
+  position: absolute; inset: 0; border-radius: 50%;
+  background: linear-gradient(148deg,
+    rgba(255, 255, 255, .10) 0%,
+    rgba(255, 255, 255, .025) 22%,
+    transparent 46%);
+  pointer-events: none;
+}
+.uhr__ring {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  /* Bei Null soll der Ring OBEN beginnen, nicht rechts. */
+  transform: rotate(-90deg);
+}
+.uhr__bahn, .uhr__minute, .uhr__zeiger {
+  fill: none; stroke-linecap: round;
+  stroke-dasharray: 276.46;
+}
+.uhr__bahn { stroke: rgba(150, 186, 220, .11); stroke-width: 3.5; }
+/* Der Stundenstand: gedeckt, breit, ruhig -- er ändert sich einmal pro
+   Minute und darf nicht um Aufmerksamkeit bitten. */
+.uhr__minute {
+  stroke: color-mix(in srgb, var(--violett) 62%, transparent);
+  stroke-width: 3.5;
+  stroke-dashoffset: 276.46;
+}
+/* Die Sekunde: schmaler, heller, mit einem Hauch Leuchten. */
+.uhr__zeiger {
+  stroke: var(--akzent); stroke-width: 2.2;
+  stroke-dashoffset: 276.46;
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--akzent) 70%, transparent));
+}
+.uhr__mitte { display: grid; justify-items: center; gap: 1px; line-height: 1; }
+.uhr__zeit {
+  font-size: 1.42rem; font-weight: 700; letter-spacing: -.01em;
+  /* Gleiche Zifferbreite: Ohne sie zappelt die Anzeige bei jedem
+     Minutenwechsel, weil die 1 schmaler ist als die 8. */
+  font-variant-numeric: tabular-nums;
+  color: #eaf2fb;
+  text-shadow: 0 0 18px rgba(63, 189, 245, .28);
+}
+.uhr__sek {
+  font-size: .72rem; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: .16em; text-indent: .16em;
+  color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
+}
+
+/* ---------- Die Glocke, wenn sie in der Kachel sitzt ------------------ */
+/* In der Leiste ist sie ein Knopf unter Knöpfen. Hier steht sie allein
+   neben der Uhr und wird deshalb rund -- sie nimmt die Form ihrer
+   Nachbarin auf, statt als Rechteck danebenzustehen. */
+.glocke--kachel {
+  width: 46px; height: 46px; padding: 0;
+  border-radius: 50%;
+  justify-content: center;
+}
+.glocke--kachel .glocke__text {
+  /* Der Text bleibt für Vorleseprogramme da, verschwindet aber vom
+     Bildschirm: Neben einer Uhr ist Platz für ein Zeichen, nicht für
+     eine Beschriftung. */
+  position: absolute;
+  width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+}
+.glocke--kachel .glocke__zeichen { width: 19px; height: 19px; }
+
+@media (max-width: 620px) {
+  /* 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. */
+  .willkommen { padding: 18px 16px; }
+  .willkommen__rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
+  .uhr { width: 88px; height: 88px; }
+  .uhr__zeit { font-size: 1.18rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Die Uhr springt ohnehin -- hier gibt es nichts abzuschalten. Die
+     Zeile steht trotzdem da, damit der nächste, der einen weichen
+     Zeiger einbaut, sie findet. */
+  .uhr__zeiger, .uhr__minute { transition: none; }
+}
+@media (forced-colors: active) {
+  .uhr { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
+  .uhr__skala, .uhr__glas { display: none; }
+}