Backstage-Fenster: Arbeit zuerst, Anleitung dahinter

Filipe, mit dem Fenster im Bild: "perfektionnier auch diese kachel die
sieht so scheisse aus."

Er hatte recht, und der Grund war nicht die Farbe, sondern die
REIHENFOLGE. Vor dem Feld, in das man einfuegt, standen fuenf lange
Schritte und zwei Absaetze -- rund 1400 px Text, bevor die eigentliche
Arbeit anfing. Wer das Fenster zum zwanzigsten Mal oeffnet, scrollt
jedes Mal an einer Anleitung vorbei, die er laengst kennt; wer es zum
ersten Mal oeffnet, liest eine Wand, bevor er weiss, worum es geht.

Das habe ich selbst gebaut, heute Vormittag, auf den Wunsch "ich
brauch auch eine erklaerung immer dabei". Die Erklaerung war richtig --
ihr Platz war falsch.

JETZT: ein Satz oben, sofort das Feld, dann Tag und Vorschau. Die
ausfuehrliche Anleitung liegt unter einer aufklappbaren Zeile, die
zugeklappt 37 px braucht statt 560.

DIE UEBERSCHRIFTENZEILE BLEIBT OBEN, ausserhalb des Aufklappers. Sie
ist die einzige Angabe, ohne die es gar nicht geht -- den haeufigsten
Fehlgriff hinter einen Klick zu legen waere genau der falsche Tausch.

Nebenbei: Der Erklaersatz zum Tag stand IN der Feldbeschriftung und
machte sie zweizeilig -- eine Beschriftung, die man lesen muss, ist
keine mehr. Er steht jetzt darunter. Das Datumsfeld erbt die Schrift
des Hauses (ohne Angabe nimmt der Browser seine eigene, und das sah
aus wie ein vergessener Rest) und ist auf die Breite gedeckelt, die
ein Datum braucht. Und das Fenster rollt INNEN, damit "Uebernehmen"
immer erreichbar bleibt.

pruef-backstage-import 72 -> 77. Die neuen Zeilen messen die POSITION
in Pixeln, nicht den Text: Die bestehenden Pruefungen lesen
`textContent` des ganzen Dialogs und waeren auch dann gruen, wenn die
Anleitung wieder nach vorn rutscht. Dazu: zugeklappt beim Oeffnen,
Ueberschriftenzeile trotzdem sichtbar, die Zeile nimmt unter 90 px,
und der Aufklapper klappt wirklich auf (ein Aufklapper, der klemmt,
versteckt die Anleitung endgueltig).

Mit SCHIRM=1 legt die Pruefung drei Bilder ab: leer, zugeklappt,
aufgeklappt.

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

workspace/assets/css/leistung.css

@@ -347,12 +347,78 @@
    Reihenfolge liest und nicht als Aufzählung -- bei einer Anleitung ist
    die Reihenfolge die halbe Auskunft. */
 .anleitung {
-  margin: 4px 0 14px; padding: 0 0 0 1.6em;
-  font-size: .86rem; line-height: 1.6;
-  color: var(--text-leise);
+  margin: 10px 0 12px; padding: 0 0 0 1.5em;
+  font-size: .83rem; line-height: 1.55;
+  color: var(--text-still);
 }
-.anleitung li { margin: 0 0 7px; }
+.anleitung li { margin: 0 0 6px; }
 .anleitung li::marker { color: var(--akzent); font-weight: 700; }
-.anleitung strong { color: var(--text); }
+.anleitung strong { color: var(--text-leise); }
 
 .dialog__unter--still { font-size: .8rem; color: var(--text-still); }
+
+/* ---- EINGEKLAPPTE HILFE (11.09.2026) ------------------------------
+   Filipe zum Backstage-Fenster: "die sieht so scheisse aus."
+
+   Der Grund war nicht die Farbe, sondern die Reihenfolge: Fuenf lange
+   Schritte standen VOR dem Feld, in das man einfuegt. Wer das Fenster
+   oft benutzt, scrollte jedes Mal an einer Anleitung vorbei, die er
+   laengst kennt.
+
+   Jetzt liegt sie unter einer Zeile, die man aufklappen KANN. Kein
+   Kasten, kein Rahmen -- nur ein Pfeil und eine stille Zeile, damit
+   sie im geschlossenen Zustand fast nichts vom Fenster wegnimmt. */
+.hilfe {
+  margin: 14px 0 4px;
+  border-top: 1px solid var(--rand);
+  padding-top: 10px;
+}
+.hilfe > summary {
+  display: flex; align-items: center; gap: 7px;
+  list-style: none; cursor: pointer;
+  font-size: .82rem; color: var(--text-still);
+  padding: 3px 0;
+  transition: color var(--tempo);
+}
+.hilfe > summary::-webkit-details-marker { display: none; }
+/* Der Pfeil wird gedreht statt ausgetauscht -- ein Zeichen, zwei
+   Zustaende, und die Drehung sagt von selbst, was passiert. */
+.hilfe > summary::before {
+  content: ""; flex: none;
+  width: 7px; height: 7px;
+  border-right: 1.6px solid currentColor;
+  border-bottom: 1.6px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--tempo);
+}
+.hilfe[open] > summary::before { transform: rotate(45deg); }
+.hilfe > summary:hover { color: var(--text-leise); }
+.hilfe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
+.hilfe__satz {
+  margin: 0 0 8px; font-size: .8rem; line-height: 1.55;
+  color: var(--text-still);
+}
+.hilfe__satz strong { color: var(--text-leise); }
+
+/* Der Tag steht neben seinem Hinweis, nicht in der Beschriftung. Vorher
+   hing der ganze Erklaersatz in der Ueberschrift des Feldes und machte
+   sie zweizeilig -- eine Beschriftung, die man lesen muss, ist keine
+   mehr. */
+/* `font: inherit` ist hier kein Schoenheitsfehler-Fix, sondern
+   Notwendigkeit: Ohne Angabe rendert der Browser ein Datumsfeld in
+   SEINER Schrift -- neben dem uebrigen Fenster sieht das aus wie ein
+   Rest, den jemand vergessen hat. Die Breite deckelt es auf die
+   Laenge, die ein Datum wirklich braucht; volle Breite laesst ein
+   fast leeres Feld quer durch den Dialog laufen. */
+.neu__zeile--tag input[type="date"] {
+  max-width: 190px;
+  font: inherit; font-size: .88rem;
+}
+.feld-hinweis {
+  margin: 5px 0 0; font-size: .76rem; color: var(--text-still);
+}
+
+/* Ein Fenster, das laenger ist als der Bildschirm, versteckt seine
+   eigenen Knoepfe. Gerollt wird INNEN, damit "Uebernehmen" immer
+   erreichbar bleibt. */
+.dialog--breit .neu { max-height: min(86vh, 900px); overflow-y: auto; }