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

@@ -1679,3 +1679,74 @@ body.gate {
       inset 0 0 18px -8px color-mix(in srgb, var(--akzent) 85%, transparent);
   }
 }
+
+/* =====================================================================
+   DER TEILEN-KNOPF (07.09.2026)
+
+   Er sitzt links in der rechten Knopfgruppe und sieht aus wie ihre
+   Nachbarn -- dieselbe Höhe, derselbe geschliffene Rand, dieselbe
+   Schrift. Ein Knopf, der aus der Reihe tanzt, sagt "nachträglich
+   eingebaut", und genau das soll er nicht sagen.
+
+   Der einzige Unterschied ist die Farbe: --f wird auf Violett gesetzt.
+   Alle anderen Knöpfe der Leiste tragen den Hausakzent; ein zweiter
+   Ton macht diesen einen auffindbar, ohne ihn lauter zu machen.
+
+   BEIM GELINGEN WECHSELT DER TEXT, NICHT DIE FARBE ALLEIN. "Kopiert"
+   steht als Wort da -- eine Rückmeldung, die nur aus einem Farbwechsel
+   besteht, kommt bei niemandem an, der Farben schlecht unterscheidet.
+   ===================================================================== */
+.teilen {
+  --f: var(--violett);
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 38px; padding: 8px 14px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  background:
+    linear-gradient(#121926, #0d1420) padding-box,
+    linear-gradient(150deg,
+      color-mix(in srgb, var(--f) 70%, transparent),
+      rgba(255, 255, 255, .07) 52%,
+      color-mix(in srgb, var(--f) 28%, transparent)) border-box;
+  color: color-mix(in srgb, var(--f) 45%, #ffffff);
+  font: inherit; font-size: .85rem; font-weight: 600;
+  cursor: pointer;
+  transition: transform .16s ease, box-shadow .2s ease, color .16s ease;
+}
+.teilen:hover {
+  color: #fff;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--f) 85%, transparent);
+}
+.teilen:active { transform: translateY(0); }
+.teilen:focus-visible { outline: 2px solid var(--f); outline-offset: 2px; }
+/* Geschafft: der Rand wird grün, das Wort sagt es zusätzlich. */
+.teilen[data-fertig="ja"] {
+  --f: var(--k-gut);
+  color: color-mix(in srgb, var(--k-gut) 40%, #ffffff);
+}
+.teilen__zeichen {
+  width: 16px; height: 16px; flex: none;
+  fill: none; stroke: currentColor;
+  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
+}
+
+@media (max-width: 720px) {
+  /* Auf schmalen Geräten nur das Zeichen. Die Kopfleiste ist am
+     06.09.2026 schon einmal an einem Element zu viel zerbrochen --
+     dieser Knopf kommt deshalb von vornherein mit 38 px aus, statt
+     eine feste Umbruchschwelle noch einmal zu verschieben. */
+  .teilen { padding: 8px 10px; }
+  .teilen__text {
+    position: absolute;
+    width: 1px; height: 1px; margin: -1px; padding: 0;
+    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .teilen, .teilen:hover, .teilen:active { transform: none; }
+}
+@media (forced-colors: active) {
+  .teilen { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
+}