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]>

server/pruef-backstage-import.mjs

@@ -386,6 +386,75 @@ console.log("\n=== Die Seite ===");
   ok(/Steckbrief/.test(anleitung),
     "und woher die Zuordnung kommt (TikTok-Name im Steckbrief)");
 
+  /* ---- ARBEIT ZUERST, ANLEITUNG DAHINTER (11.09.2026) -------------
+     Filipe: "perfektionnier auch diese kachel die sieht so scheisse
+     aus." Fuenf lange Schritte standen VOR dem Einfuegefeld.
+
+     DIE ZEILEN OBEN WUERDEN AUCH GRUEN BLEIBEN, WENN DIE ANLEITUNG
+     WIEDER NACH VORN RUTSCHT -- `textContent` liest den ganzen Dialog
+     und kennt keine Reihenfolge. Deshalb wird hier die POSITION
+     gemessen, in Pixeln, an der laufenden Seite.
+
+     Und die eine Angabe, ohne die es gar nicht geht (die
+     Ueberschriftenzeile), muss SICHTBAR sein, ohne dass jemand
+     aufklappt. Sie hinter einen Klick zu legen hiesse, den
+     haeufigsten Fehlgriff zu verstecken. */
+  const bau = await seite.evaluate(() => {
+    const o = (id) => document.getElementById(id)?.getBoundingClientRect().top ?? -1;
+    const hilfe = document.getElementById("netz-hilfe");
+    const sichtbar = [...document.querySelectorAll("#netz-form > *")]
+      .filter((e) => e !== hilfe && !e.hidden)
+      .map((e) => e.textContent).join(" ");
+    return {
+      feld: o("netz-text"), hilfe: o("netz-hilfe"),
+      offen: hilfe?.open === true,
+      sichtbar,
+      zeileHoch: document.getElementById("netz-hilfe")?.offsetHeight ?? 0,
+    };
+  });
+  ok(bau.feld > 0 && bau.hilfe > bau.feld,
+    `das Einfügefeld steht VOR der Anleitung (${Math.round(bau.feld)} px zu `
+    + `${Math.round(bau.hilfe)} px)`);
+  ok(bau.offen === false, "die Anleitung ist zugeklappt -- sie steht im Weg, wer sie kennt");
+  ok(/Überschriftenzeile/.test(bau.sichtbar),
+    "trotzdem steht die Überschriftenzeile schon oben, ohne Aufklappen");
+  ok(bau.zeileHoch > 0 && bau.zeileHoch < 90,
+    `zugeklappt nimmt sie kaum Platz (${bau.zeileHoch} px)`);
+
+  /* Und sie laesst sich wirklich oeffnen -- ein Aufklapper, der nicht
+     aufklappt, versteckt die Anleitung endgueltig. */
+  await seite.click("#netz-hilfe > summary");
+  await seite.waitForTimeout(300);
+  const auf = await seite.evaluate(() => {
+    const h = document.getElementById("netz-hilfe");
+    const ol = document.querySelector("#netz-hilfe .anleitung");
+    return { offen: h?.open === true, hoch: ol?.offsetHeight ?? 0 };
+  });
+  ok(auf.offen === true && auf.hoch > 80,
+    `aufgeklappt stehen die Schritte da (${auf.hoch} px)`);
+  await seite.click("#netz-hilfe > summary");
+  await seite.waitForTimeout(200);
+  if (process.env.SCHIRM) {
+    await seite.locator("#netz-dialog").screenshot(
+      { path: join(HIER, "pruef-netz-zu.png") });
+    await seite.click("#netz-hilfe > summary");
+    await seite.waitForTimeout(300);
+    await seite.locator("#netz-dialog").screenshot(
+      { path: join(HIER, "pruef-netz-auf.png") });
+    await seite.click("#netz-hilfe > summary");
+    await seite.waitForTimeout(200);
+    /* Und der Zustand, den man beim OEFFNEN sieht -- genau der, ueber
+       den Filipe gestolpert ist. */
+    await seite.evaluate(() => {
+      document.getElementById("netz-text").value = "";
+      document.getElementById("netz-vorschau").hidden = true;
+      document.getElementById("netz-tag").value = "";
+    });
+    await seite.waitForTimeout(200);
+    await seite.locator("#netz-dialog").screenshot(
+      { path: join(HIER, "pruef-netz-leer.png") });
+  }
+
   await seite.click("#netz-zu");
   await seite.waitForTimeout(300);
   /* Gemessen wird SATZ FUER SATZ, nicht der Block. Ein Block, der