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/aufgaben.css

@@ -214,19 +214,116 @@
 
 /* ---------- Bearbeiten-Dialog ------------------------------------------ */
 
+/* =====================================================================
+   DIALOGE (07.09.2026 überarbeitet)
+
+   Filipe zu zwei davon: "lass alles in dieser kachel viel spezieller und
+   geiler aussehen" und "dass soll auch viel besser aussehen".
+
+   Er hatte recht, und der Grund war nicht Geschmack: Ein Dialog war
+   bisher ein grauer Kasten (`background: #0b1018`, ein Rand, fertig) --
+   während die Seite dahinter aus beleuchteten Platten mit Schienen,
+   Körnung und Glanz besteht. Beim Öffnen fiel man aus dem einen
+   Material ins andere.
+
+   Jetzt trägt er dieselbe Sprache wie alles übrige:
+     - Leuchtschiene links, im Hausakzent
+     - Kopfzeile abgesetzt mit einer feinen Fuge
+     - Körnung und ein fester Glanz von links oben
+     - Materialstärke: Licht oben, Schatten unten
+   Und er ist deutlich TIEFER als vorher (#0b1018 war ein helles Grau
+   gegen das, was jetzt hinter ihm liegt) -- ein Dialog muss sich vom
+   Untergrund abheben, sonst schwimmt er darin.
+
+   Der Hintergrund dahinter wird STÄRKER abgedunkelt und weicher
+   gezeichnet: Ein Dialog ist der einzige Ort, an dem ein Weichzeichner
+   richtig ist -- er soll das Dahinter ausdrücklich zurücktreten
+   lassen. Genau dafür ist er gemacht, und genau deshalb war er unter
+   den Kacheln falsch.
+   ===================================================================== */
 .dialog {
-  width: min(560px, calc(100vw - 32px));
-  padding: 0; border: 1px solid var(--rand-hell);
-  border-radius: var(--radius);
-  background: #0b1018;
+  position: relative;
+  width: min(580px, calc(100vw - 32px));
+  padding: 0;
+  border: 1px solid rgba(150, 186, 220, .16);
+  border-radius: 4px 20px 20px 4px;
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--akzent) 16%, transparent) 0%,
+      color-mix(in srgb, var(--akzent) 5%, transparent) 14%,
+      transparent 40%),
+    linear-gradient(163deg, #141c29 0%, #0a0e17 58%, #070a11 100%);
   color: var(--text);
-  box-shadow: var(--schatten);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .10),
+    inset 0 -1px 0 rgba(0, 0, 0, .55),
+    inset 2px 0 0 -1px color-mix(in srgb, var(--akzent) 34%, transparent),
+    0 30px 70px -24px rgba(0, 0, 0, .92),
+    0 4px 12px -6px rgba(0, 0, 0, .7);
+  overflow: hidden;
 }
-.dialog::backdrop { background: rgba(2, 4, 8, .68); backdrop-filter: blur(3px); }
+/* Die Leuchtschiene -- dieselbe wie an jeder Kachel. */
+.dialog::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) 48%, 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);
+  z-index: 2;
+}
+/* Glanz und Körnung. `pointer-events: none` ist Pflicht: Ohne das läge
+   eine unsichtbare Fläche über dem ganzen Formular, und kein einziges
+   Feld wäre anklickbar. */
+.dialog::after {
+  content: ""; position: absolute; inset: 0; pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(122deg,
+      rgba(255, 255, 255, .075) 0%,
+      rgba(255, 255, 255, .020) 15%,
+      transparent 34%);
+  /* Ohne Körnung -- siehe die Begründung in automation.css: Auf einer
+     Ebene mit der Spiegelung erbt sie deren Deckkraft und wird zum
+     grauen Schleier. */
+  opacity: .55;
+  z-index: 1;
+}
+.dialog > * { position: relative; z-index: 2; }
 
-.neu--blank { margin: 0; border: 0; background: none; padding: 22px; }
+.dialog::backdrop {
+  background: rgba(2, 4, 8, .78);
+  backdrop-filter: blur(6px) saturate(80%);
+}
 
-.dialog__titel { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; }
+.neu--blank { margin: 0; border: 0; background: none; padding: 22px 24px 20px; }
+
+/* Der Kopf steht auf einer eigenen Stufe: Überschrift, darunter der
+   erklärende Satz, darunter eine feine Fuge. Ohne diese Trennung
+   verschwimmt die Ansage mit dem ersten Feld -- und genau die Ansage
+   ist das, was den Dialog erklärt. */
+.dialog__titel {
+  margin: 0 0 4px;
+  font-size: 1.24rem; font-weight: 700; letter-spacing: -.015em;
+  color: #f2f7fd;
+}
+.dialog__unter {
+  margin: 0 0 16px; padding-bottom: 16px;
+  border-bottom: 1px solid rgba(150, 186, 220, .12);
+  font-size: .87rem; line-height: 1.55;
+  color: var(--text-leise);
+}
+/* Hat ein Dialog keine Erklärung, muss die Fuge trotzdem da sein --
+   sonst hängt die Überschrift am ersten Feld. */
+.dialog__titel:last-of-type,
+.dialog__unter:empty { border-bottom: 0; }
+.dialog__unter:empty {
+  margin: 0 0 16px; padding-bottom: 16px;
+  border-bottom: 1px solid rgba(150, 186, 220, .12);
+}
 
 .dialog__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
 .dialog__knoepfe #b-loeschen { margin-left: auto; }