Sicht-Umschalter: ein Auge statt des Wortes "SICHT"

Filipe zu dem Feld in der Kopfleiste: "das soll viel besser aussehen
viel geiler aber nicht so eine scheisse."

Er hatte recht. Da stand ein Etikett mit dem Wort SICHT und daneben ein
Auswahlfeld -- ein Formular, das in die Kopfleiste gerutscht war. Drei
Aenderungen:

  * DAS AUGE ersetzt das Wort. Es sagt dasselbe in einem Zeichen und
    laesst dem NAMEN den Platz, um den es eigentlich geht. Fuer
    Vorleseprogramme bleibt die Beschriftung erhalten, nur unsichtbar --
    sie ersatzlos zu loeschen haette das Feld unbeschriftet gelassen.

  * "Meine Sicht" statt "Alles (meine Sicht)". Der Zusatz erklaerte
    nichts und machte den Knopf so breit, dass am Handy nichts anderes
    mehr danebenpasste.

  * EIN KREUZ statt "zurueck zu mir". Der Satz brauchte mehr Platz als
    der Name daneben, und was ein Kreuz an einer aktiven Auswahl tut,
    weiss jeder. Die Worte bleiben im aria-label und im Titel.

DIE EIGENTLICHE VERBESSERUNG ist aber die Hierarchie: Im Normalfall
ist der Umschalter still (graues Auge, ruhiger Rand). Sobald eine
FREMDE Sicht laeuft, traegt er ganz Farbe -- nicht nur ein
Zusatzknopf am Rand.

Das ist der gefaehrlichste Zustand dieser Funktion: Wer sie vergisst,
sieht am naechsten Tag drei Aufgaben statt dreissig und haelt das fuer
den Bestand. Ein Zustand, der Schaden anrichtet, muss lauter sein als
einer, der nichts tut.

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

workspace/assets/css/start.css

@@ -2786,7 +2786,24 @@ body.start #protokoll {
   min-width: 0;
 }
 
+/* DAS WORT "SICHT" IST WEG (06.09.2026, Wunsch Filipe: "das soll viel
+   besser aussehen").
+
+   Es stand als Etikett vor einem Auswahlfeld -- ein Formular, das in
+   die Kopfleiste gerutscht war. An seiner Stelle steht jetzt ein Auge,
+   das dasselbe in einem Zeichen sagt und dem NAMEN den Platz laesst,
+   um den es geht.
+
+   Fuer Vorleseprogramme bleibt die Beschriftung erhalten; sie ist nur
+   nicht mehr zu sehen. Sie ersatzlos zu loeschen haette das
+   Auswahlfeld unbeschriftet zurueckgelassen. */
 .sicht__schild {
+  position: absolute;
+  width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+}
+
+.sicht__schild--alt {
   flex: none;
   /* 0,75 rem = 12 px. Nicht kleiner: Unter 11,5 px meldet die
      Geraetepruefung zu Recht "zu kleine Schrift" -- und was auf dem
@@ -2835,14 +2852,40 @@ body.start #protokoll {
     rgba(0, 0, 0, .3);
 }
 .sicht[data-fremd="ja"] .sicht__schild { color: var(--s-ton); }
+/* Das Auge. Im Normalfall still, bei fremder Sicht in der Rollenfarbe
+   -- es ist dann das Erste, was auffaellt. */
+.sicht__auge {
+  flex: none;
+  width: 16px; height: 16px;
+  fill: none; stroke: var(--text-still); stroke-width: 1.6;
+  transition: stroke .18s ease;
+}
+.sicht[data-fremd="ja"] .sicht__auge { stroke: var(--s-ton); }
+
+/* FREMDE SICHT MUSS AUFFALLEN. Der gefaehrlichste Fall dieser Funktion
+   ist, dass man sie vergisst -- man sieht am naechsten Tag drei
+   Aufgaben statt dreissig und haelt das fuer den Bestand. Deshalb
+   traegt der ganze Umschalter dann Farbe, nicht nur ein Zusatzknopf. */
+.sicht[data-fremd="ja"] {
+  border-color: color-mix(in srgb, var(--s-ton) 50%, transparent);
+  background: color-mix(in srgb, var(--s-ton) 12%, rgba(0, 0, 0, .25));
+}
+
 .sicht__weg {
-  flex: none; min-height: 28px; padding: 4px 11px;
+  flex: none; min-height: 28px;
+  /* Ein Kreuz braucht keine Wortbreite mehr. */
+  width: 28px; padding: 0;
+  display: grid; place-items: center;
   border: 1px solid color-mix(in srgb, var(--s-ton) 45%, transparent);
   border-radius: 999px;
   background: transparent; color: var(--s-ton);
   font: inherit; font-size: .76rem; cursor: pointer;
   transition: background var(--tempo);
 }
+.sicht__weg svg {
+  width: 14px; height: 14px;
+  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
+}
 .sicht__weg:hover { background: color-mix(in srgb, var(--s-ton) 16%, transparent); }
 .sicht__weg:focus-visible { outline: 2px solid var(--s-ton); outline-offset: 2px; }