diff --git a/server/pruef-backstage-import.mjs b/server/pruef-backstage-import.mjs
index 532f333e..977c5efb 100644
--- a/server/pruef-backstage-import.mjs
+++ b/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
diff --git a/workspace/app.webmanifest b/workspace/app.webmanifest
index 64591473..f1d61de6 100644
--- a/workspace/app.webmanifest
+++ b/workspace/app.webmanifest
@@ -13,25 +13,25 @@
"theme_color": "#06090f",
"icons": [
{
- "src": "/assets/img/app-symbole/workspace-192.png?v=202609111545",
+ "src": "/assets/img/app-symbole/workspace-192.png?v=202609111554",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/img/app-symbole/workspace-512.png?v=202609111545",
+ "src": "/assets/img/app-symbole/workspace-512.png?v=202609111554",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609111545",
+ "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609111554",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
- "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609111545",
+ "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609111554",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
diff --git a/workspace/assets/css/leistung.css b/workspace/assets/css/leistung.css
index b8ca5faa..7a987f57 100644
--- a/workspace/assets/css/leistung.css
+++ b/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; }
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index c1ac7b6e..d1df15fd 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -12,19 +12,19 @@
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
-
-
-
-
-
-
+
+
+
+
+
+
-
+
@@ -252,10 +252,10 @@
-
-
-
-
-
+
+
+
+
+