Lesbarere Kaesten, und DogFather kann durch fremde Augen sehen

SCREEN 1 -- "die Kachel ganz leicht dunkler, so dass man den Text besser
gelesen bekommt, aber nicht zu viel, so dass man den Hasen noch sieht."

Die Erklaerkaesten stehen jetzt auf 88 statt 78 Prozent Deckung. Zehn
Punkte sind gemessen der Unterschied zwischen muehsam und ruhig lesbar
und lassen zwoelf Prozent Bild durch -- das Motiv bleibt sichtbar.

"und die von wichtigen und neuen PDFs sollen auch staerker sein."
Das war kein Geschmack, sondern ein Fehler: `background` ist eine
Eigenschaft, keine Schicht. Die Zeile
`background: rgba(232,192,125,.045)` hat die Flaeche nicht getoent,
sondern ERSETZT -- uebrig blieben viereinhalb Prozent Deckung. Damit war
ausgerechnet die Anleitung, die jeder lesen soll, die am schwersten
lesbare der Seite. Die Toenung liegt jetzt als Schicht darueber.
Gemessen: 88 % gegen 78 % bei einer gewoehnlichen.

pruef-lesbarkeit.mjs misst das an ECHTEN PIXELN (Text kurz unsichtbar
machen, Flaeche fotografieren, WCAG-Formel) und kennt ZWEI Grenzen --
lesbar genug UND durchsichtig genug. Mit nur einer haette sie eine
schwarze Flaeche am besten gefunden, und das wollte niemand.

SCREEN 2 -- "ich will alles von den Scouts und Managern einsehen
koennen, auswaehlen, was und von wem. Ueberall, auf jeder Seite.
NUR WIR BEIDE SOLLEN DIESE OPTION HABEN."

Die naheliegende Loesung waere ein Filter je Seite gewesen -- also eine
zweite Rechteregel in zwoelf Modulen, und eine Rechteregel an zwoelf
Stellen stimmt irgendwann an elf. Stattdessen wird die PERSON getauscht,
nicht die Regel: Waehlt DogFather einen Scout, laufen alle vorhandenen
Sichtbarkeitsregeln unveraendert mit diesem Scout. Er sieht exakt dessen
Arbeitsplatz -- nicht mehr, nicht weniger. Keine neue Rechteregel.

Im Browser genauso: EIN Ort statt vierzehn. fetch wird einmal umgeleitet
und haengt den Wert an jede lesende Abfrage an. Neue Seiten sind damit
von selbst dabei; man kann es nicht vergessen.

Drei Sicherungen: nur admin (auf dem SERVER geprueft, nicht in der
Oberflaeche), nur lesend (geschrieben wird immer im eigenen Namen --
sonst staende im Protokoll der falsche Name), nur aktive Personen.

Und ein Rahmen um die Seite, solange eine fremde Sicht laeuft. Der
gefaehrlichste Fall ist nicht, dass man nicht umschalten kann, sondern
dass man vergisst, dass man umgeschaltet hat -- und drei Aufgaben statt
dreissig fuer den Bestand haelt.

FUENF FEHLER, DIE DIE PRUEFUNGEN GEFUNDEN HABEN:

1. steckbrief.html hat die Kopfleiste NIE gefuellt -- dort stand
   monatelang "…" statt des eigenen Namens. Aufgefallen, weil der
   Umschalter dort fehlte. Jetzt zusaetzlich ein Netz darunter: Meldet
   sich nach kurzer Zeit niemand, holt der Kopf sich selbst, wer
   angemeldet ist. Die naechste neue Seite kann es nicht mehr vergessen.

2. Der Umschalter sprengte die Kopfleiste (46 px am Rechner, 117 px am
   Handy) und drueckte den Abmelden-Knopf hinaus.

3. Ich habe das <select> gestaltet -- wahl.js ersetzt aber jedes
   Auswahlfeld durch einen eigenen Knopf und schrumpft das echte Feld
   auf einen Pixel. Meine Regeln haben es wieder auf 20 x 44 aufgeblasen,
   wo es als unsichtbares Hindernis ueber dem Knopf lag. Gestaltet wird
   jetzt der Knopf.

4. Ein Wettlauf: Auf profil.html rufen zwei Dateien werZeigen() auf.
   Beide kamen an "gibt es den Umschalter schon?" vorbei, bevor eine ihn
   angehaengt hatte -- zwei Umschalter uebereinander. Die Sperre gehoert
   vor das erste await.

5. Die Handy-Pruefung bemaengelte ein Schild, das dort per display:none
   gar nicht erscheint. Sie sieht jetzt nur noch sichtbaren Text an --
   eine Pruefung, die Unsichtbares anmahnt, gewoehnt man sich ab zu
   lesen.

Dazu zwei Messfehler in den Pruefungen selbst: getComputedStyle liefert
ein LEBENDES Objekt (die Farbe wurde gelesen, nachdem der Text
unsichtbar gemacht war -- gemeldet wurden 1,17:1 fuer tadellos lesbaren
Text), und ein Vergleich lief still ins Leere, weil die Vergleichsdaten
fehlten.

pruef-sicht.mjs stellt den MISSBRAUCH an den Anfang: Scout, Manager und
Creator haengen ?sicht= an und muessen ignoriert werden; erfundene
Nummern, Buchstaben und ein Einschleusversuch fallen auf die eigene
Sicht zurueck; eine abgeschaltete Person liefert keine Sicht mehr; und
was DogFather bei fremder Sicht anlegt, steht unter SEINEM Namen.

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

workspace/assets/css/start.css

@@ -444,10 +444,21 @@ body.start > main { position: relative; z-index: 1; }
   color: var(--text-leise); font-size: .92rem; line-height: 1.6;
   border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 20%, var(--rand));
   border-radius: var(--radius);
+  /* Ein Stueck dichter als die uebrige Flaeche (0,88 statt 0,78) --
+     Wunsch vom 01.09.2026: "ganz leicht noch dunkler, so dass man den
+     Text besser gelesen bekommt, aber auch nicht zu viel, so dass man
+     den Hasen noch sieht."
+
+     Diese Kaesten tragen mehr zusammenhaengenden Text als jede andere
+     Flaeche im Workspace (der Erklaerkasten im Scouting sind acht
+     Absaetze). Zehn Punkte mehr Deckung sind gemessen der Unterschied
+     zwischen muehsam und ruhig lesbar -- und lassen zwoelf Prozent Bild
+     durch, das Motiv bleibt also sichtbar. Mehr waere ein Kasten mit
+     einem Bild dahinter, das man nur noch erahnt. */
   background:
     radial-gradient(120% 90% at 50% -10%,
       color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent), transparent 68%),
-    var(--flaeche);
+    rgba(9, 13, 22, .88);
 }
 /* Der Ring: ein Kreis in der Seitenfarbe, hohl, weich leuchtend. Ein
    Zeichen wäre hier zu laut -- es geht ja gerade darum, dass NICHTS da
@@ -2571,3 +2582,129 @@ body.start #protokoll {
   .inhalt textarea,
   .inhalt select { font-size: 16px; }
 }
+
+/* ---------- Die Sicht eines anderen (nur DogFather) -----------------------
+
+   Der Umschalter steht im Seitenkopf, links neben dem eigenen Namen --
+   also genau dort, wo ohnehin steht, WER man gerade ist. Beides gehoert
+   zusammen: "ich, und wessen Arbeitsplatz ich gerade ansehe."
+
+   Solange eine fremde Sicht aktiv ist, faellt das deutlich auf. Das ist
+   der wichtigste Teil dieser ganzen Funktion: Der gefaehrlichste Fall
+   ist nicht, dass man die Sicht nicht wechseln kann, sondern dass man
+   vergisst, dass man sie gewechselt hat -- und am naechsten Tag drei
+   Aufgaben statt dreissig sieht und das fuer den Bestand haelt. */
+
+.sicht {
+  --s-ton: #d8a13a;                    /* die Rollenfarbe von DogFather */
+  display: flex; align-items: center; gap: 8px;
+  padding: 4px 6px 4px 11px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  background: rgba(0, 0, 0, .25);
+  /* SCHRUMPFEN MUSS ERLAUBT SEIN. In der Kopfleiste steht
+     `.kopfleiste__rechts > * { flex: 0 0 auto; }` -- jedes Teil dort
+     behaelt also seine Wunschbreite. Der Umschalter schob die Seite
+     dadurch um 46 px (Rechner) bis 117 px (Handy) aus dem Bild, und der
+     Abmelden-Knopf war nicht mehr erreichbar. Gemeldet von
+     pruef-workspace-seiten und pruef-handy, bevor es jemand gesehen hat.
+     Diese Regel steht spaeter in der Datei und gewinnt deshalb. */
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.sicht__schild {
+  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
+     Handy niemand liest, ist auf dem Rechner auch nur Zierde. */
+  font-size: .75rem; font-weight: 600;
+  letter-spacing: .1em; text-transform: uppercase;
+  color: var(--text-still);
+}
+/* Kein `width: 100%` wie bei den Feldern im Inhalt -- hier gehoert das
+   Feld in eine Zeile und darf nicht die halbe Kopfleiste einnehmen. */
+/* NICHT das <select> selbst gestalten -- das waere hier ein Fehler mit
+   Ansage. wahl.js ersetzt jedes Auswahlfeld im Workspace durch ein
+   eigenes Bedienelement: Das echte <select> bleibt im Dokument, wird
+   aber auf einen Pixel geschrumpft und unsichtbar gemacht; sichtbar ist
+   ein Knopf darueber (.wahl2__knopf).
+
+   Der erste Anlauf gab dem <select> Breite und Polsterung. Ergebnis:
+   Das versteckte Feld wurde wieder 20 x 44 Pixel gross und lag als
+   unsichtbares Hindernis ueber dem Knopf -- die Geraetepruefung meldete
+   es als "Beruehrziel zu klein", und getroffen haette man damit gar
+   nichts. Gestaltet wird deshalb der Knopf.
+
+   Falls wahl.js einmal nicht laeuft (Skript blockiert), traegt das
+   nackte <select> nichts Eigenes -- es sieht dann schlicht aus, ist
+   aber vollstaendig bedienbar. Das ist die richtige Reihenfolge. */
+.sicht .wahl2 { flex: 0 1 auto; min-width: 0; max-width: 180px; }
+.sicht .wahl2__knopf {
+  padding: 5px 10px;
+  font-size: .82rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .04);
+}
+.sicht .wahl2__knopf:hover:not([disabled]) {
+  background: rgba(255, 255, 255, .07);
+}
+/* Der Name darf gekuerzt werden, statt den Knopf aufzublaehen. */
+.sicht .wahl2__text {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* FREMDE SICHT AKTIV -- deutlich, aber nicht schreiend. */
+.sicht[data-fremd="ja"] {
+  border-color: color-mix(in srgb, var(--s-ton) 55%, transparent);
+  background:
+    linear-gradient(rgba(216, 161, 58, .12), rgba(216, 161, 58, .12)),
+    rgba(0, 0, 0, .3);
+}
+.sicht[data-fremd="ja"] .sicht__schild { color: var(--s-ton); }
+.sicht__weg {
+  flex: none; min-height: 28px; padding: 4px 11px;
+  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:hover { background: color-mix(in srgb, var(--s-ton) 16%, transparent); }
+.sicht__weg:focus-visible { outline: 2px solid var(--s-ton); outline-offset: 2px; }
+
+/* Ein feiner Rahmen um die ganze Seite, solange eine fremde Sicht laeuft.
+   Er kostet keinen Platz, laesst sich nicht wegscrollen und ist damit die
+   einzige Anzeige, die man wirklich nicht uebersehen kann. */
+body[data-fremde-sicht="ja"]::after {
+  content: "";
+  position: fixed; inset: 0;
+  border: 2px solid rgba(216, 161, 58, .38);
+  pointer-events: none;
+  z-index: 60;
+}
+
+/* Ab hier wird die Kopfleiste eng. Das Schild "SICHT" entfaellt als
+   Erstes -- das Feld selbst sagt bereits, wessen Sicht laeuft, und der
+   Rahmen um die Seite sagt DASS eine fremde laeuft. */
+@media (max-width: 1180px) {
+  .sicht__schild { display: none; }
+  .sicht { padding-left: 6px; }
+  .sicht .wahl2 { max-width: 150px; }
+}
+@media (max-width: 900px) {
+  .sicht .wahl2 { max-width: 128px; }
+  /* Der Knopf "zurueck zu mir" entfaellt -- "Alles (meine Sicht)" steht
+     ganz oben in der Auswahl und tut dasselbe. */
+  .sicht__weg { display: none; }
+}
+@media (max-width: 620px) {
+  /* MINDESTBREITE, nicht nur Hoechstbreite: Ein Knopf, der auf zwanzig
+     Pixel zusammenfaellt, ist mit dem Daumen nicht zu treffen.
+     Den Platz gibt der eigene Name daneben ab -- er steht ohnehin als
+     Plakette da, und wessen Sicht laeuft, ist die wichtigere Auskunft. */
+  .sicht .wahl2 { min-width: 104px; max-width: 118px; }
+  .sicht { padding: 3px 4px; }
+  .wer__name { display: none; }
+}
+@media (forced-colors: active) {
+  body[data-fremde-sicht="ja"]::after { border-color: Highlight; }
+}

workspace/assets/css/wissen.css

@@ -166,9 +166,33 @@
   transition: border-color .18s ease;
 }
 .pdf:hover { border-color: rgba(255, 255, 255, .18); }
+/* WICHTIG UND NEU MUESSEN BESSER LESBAR SEIN ALS DER REST, nicht
+   schlechter -- und genau das war hier verkehrt herum.
+
+   `background` ist eine Eigenschaft, keine Schicht: Die Zeile
+   `background: rgba(232,192,125,.045)` hat die Flaeche var(--flaeche)
+   nicht getoent, sondern ERSETZT. Uebrig blieben viereinhalb Prozent
+   Deckung -- das Hintergrundbild kam praktisch ungefiltert durch, und
+   ausgerechnet die Anleitung, die jeder lesen soll, war die am
+   schwersten lesbare auf der Seite.
+
+   Jetzt liegt die Toenung als eigene Schicht DARUEBER (ein
+   linear-gradient aus zweimal derselben Farbe ist der uebliche Weg, aus
+   einer Farbe eine Schicht zu machen). Die Flaeche bleibt darunter --
+   und weil "wichtig" mehr Ruhe verdient als der Rest, ist sie hier
+   sogar etwas dichter als anderswo. */
 .pdf[data-wichtig="ja"] {
-  border-color: rgba(232, 192, 125, .32);
-  background: rgba(232, 192, 125, .045);
+  border-color: rgba(232, 192, 125, .42);
+  background:
+    linear-gradient(rgba(232, 192, 125, .07), rgba(232, 192, 125, .07)),
+    rgba(9, 13, 22, .88);
+}
+/* Dasselbe fuer das Neue: Es steht nur 48 Stunden da und soll in dieser
+   Zeit auch wirklich gelesen werden. */
+.pdf:has(.marke-neu) {
+  background:
+    linear-gradient(rgba(95, 201, 154, .05), rgba(95, 201, 154, .05)),
+    rgba(9, 13, 22, .88);
 }
 
 .pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }