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/leistung.html

@@ -12,20 +12,20 @@
      Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
      eine Flaeche sind statt zweier. -->
 <meta name="theme-color" content="#06090f" />
-<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609111545" />
-<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609111545" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609111545" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609111545" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609111545" />
-<link rel="stylesheet" href="assets/css/leistung.css?v=202609111545" />
-<link rel="stylesheet" href="assets/css/module.css?v=202609111545" />
+<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609111554" />
+<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609111554" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609111554" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609111554" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609111554" />
+<link rel="stylesheet" href="assets/css/leistung.css?v=202609111554" />
+<link rel="stylesheet" href="assets/css/module.css?v=202609111554" />
 <!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
      Auf der Agenturadresse ist sie leer -- das Haus hier IST der
      Grundzustand. Auf der Adresse von Team Dogi biegt der Server
      genau diesen Dateinamen auf crew-haus.css um, und die Seite
      kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
      ohne Umfaerben im Browser, ohne Flackern. -->
-<link rel="stylesheet" href="assets/css/haus.css?v=202609111545" />
+<link rel="stylesheet" href="assets/css/haus.css?v=202609111554" />
 </head>
 
 <body class="start">
@@ -256,71 +256,87 @@
 <dialog class="dialog dialog--breit" id="netz-dialog">
   <form method="dialog" id="netz-form" class="neu neu--blank">
     <h2 class="dialog__titel">Backstage-Tabelle einfügen</h2>
+
+    <!-- ARBEIT ZUERST, ANLEITUNG DAHINTER (11.09.2026).
+
+         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: Fünf lange
+         Schritte und zwei Absätze standen VOR dem Feld, in das man
+         einfügt. Wer das Fenster zum zwanzigsten Mal öffnet, scrollt
+         jedes Mal an einer Anleitung vorbei, die er längst kennt – und
+         wer es zum ersten Mal öffnet, liest eine Wand, bevor er weiß,
+         worum es geht.
+
+         Jetzt steht oben EIN Satz mit dem, woran es wirklich scheitert
+         (die Überschriftenzeile), darunter sofort das Feld. Die
+         ausführliche Anleitung ist eingeklappt – einmal aufgemacht,
+         danach nie wieder im Weg.
+
+         DIE ÜBERSCHRIFTENZEILE STEHT BEWUSST OBEN UND NICHT NUR IM
+         AUFGEKLAPPTEN TEIL. Sie ist die einzige Angabe, ohne die es
+         gar nicht geht; sie hinter einen Klick zu legen hieße, den
+         häufigsten Fehlgriff zu verstecken. -->
     <p class="dialog__unter">
-      Für alle Creator auf einmal. Erst siehst du, was passieren würde –
-      geschrieben wird erst, wenn du bestätigst.
-    </p>
-
-    <!-- DIE ANLEITUNG STEHT IM FENSTER, NICHT IN EINER NOTIZ (11.09.2026).
-
-         Filipe: "ich brauch auch eine erklärung immer dabei wo die scouts
-         und manager das finden."
-
-         KEIN ERFUNDENER KLICKPFAD. Die Menünamen von Backstage sind
-         nirgends öffentlich dokumentiert, und eine Anleitung, die
-         „Daten → Export“ sagt, wo „Performance“ steht, schickt Leute
-         suchen und wird nie korrigiert. Beschrieben wird deshalb, WAS
-         man sucht – das bleibt richtig, auch wenn TikTok umbenennt.
-         Die Mechanik dagegen (markieren, Strg+C) ist überall gleich und
-         steht genau. -->
-    <ol class="anleitung">
-      <li>
-        <strong>In Backstage die Ansicht öffnen, in der deine Creator
-        untereinander mit ihren Zahlen stehen</strong> – also die Liste mit
-        Diamanten, LIVE-Dauer und gültigen Tagen. Wie der Menüpunkt heißt,
-        wechselt mit den TikTok-Versionen; gesucht ist die Tabelle, nicht
-        ein bestimmter Name.
-      </li>
-      <li>
-        <strong>Die Tabelle mit der Maus markieren – die Überschriftenzeile
-        muss mit.</strong> An ihr erkennt der Workspace, welche Spalte
-        Diamanten sind und welche Dauer. Ohne sie geht es nicht.
-      </li>
-      <li>Kopieren mit <strong>Strg&nbsp;+&nbsp;C</strong> (Mac: Cmd&nbsp;+&nbsp;C).</li>
-      <li>Hier unten ins Feld klicken und <strong>Strg&nbsp;+&nbsp;V</strong> drücken.
-        Die Vorschau erscheint von selbst.</li>
-      <li>Steht in der Tabelle <strong>kein Datum</strong>, den Tag im Feld
-        darunter wählen – sonst weiß niemand, worauf sich die Zahlen beziehen.</li>
-    </ol>
-
-    <p class="dialog__unter dialog__unter--still">
-      <strong>Zugeordnet wird über den TikTok-Namen aus dem Steckbrief.</strong>
-      Wer dort keinen stehen hat, taucht in der Vorschau unter „nicht
-      zugeordnet“ auf – dann einmal im Steckbrief nachtragen, und beim
-      nächsten Mal wird er gefunden. Es wird nie geraten.
-    </p>
-    <p class="dialog__unter dialog__unter--still">
-      Warum von Hand und nicht automatisch: Backstage hat keine
-      Schnittstelle und keinen Export. Erweiterungen, die das umgehen,
-      verstoßen gegen die Nutzungsbedingungen – und riskieren das
-      Netzwerk-Konto.
+      Tabelle in Backstage markieren – <strong>mit der Überschriftenzeile</strong> –
+      und hier einfügen. Für alle Creator auf einmal. Erst siehst du, was
+      passieren würde; geschrieben wird erst, wenn du bestätigst.
     </p>
 
     <div class="neu__zeile">
       <label class="feld-schild" for="netz-text">Tabelle</label>
-      <textarea id="netz-text" rows="7" class="netz__feld"
-        placeholder="Hier einfügen (Strg+V) …"></textarea>
+      <textarea id="netz-text" rows="6" class="netz__feld"
+        placeholder="Hier einfügen (Strg + V) …"></textarea>
     </div>
 
-    <div class="neu__zeile">
-      <label class="feld-schild" for="netz-tag">Tag <span class="leise">– nur nötig, wenn die Tabelle keine Datumsspalte hat</span></label>
+    <div class="neu__zeile neu__zeile--tag">
+      <label class="feld-schild" for="netz-tag">Tag</label>
       <input id="netz-tag" type="date" />
+      <p class="feld-hinweis">Nur nötig, wenn die Tabelle keine Datumsspalte hat.</p>
     </div>
 
     <div class="import-vorschau" id="netz-vorschau" hidden></div>
 
     <p class="fehler" id="netz-fehler" role="alert" aria-live="polite"></p>
 
+    <!-- KEIN ERFUNDENER KLICKPFAD. Die Menünamen von Backstage sind
+         nirgends öffentlich dokumentiert, und eine Anleitung, die
+         „Daten → Export" sagt, wo „Performance" steht, schickt Leute
+         suchen und wird nie korrigiert. Beschrieben wird deshalb, WAS
+         man sucht – das bleibt richtig, auch wenn TikTok umbenennt.
+         Die Mechanik dagegen (markieren, Strg+C) ist überall gleich
+         und steht genau. -->
+    <details class="hilfe" id="netz-hilfe">
+      <summary>Schritt für Schritt – und warum von Hand</summary>
+      <ol class="anleitung">
+        <li>In Backstage die Ansicht öffnen, in der deine Creator
+          untereinander mit ihren Zahlen stehen – die Liste mit Diamanten,
+          LIVE-Dauer und gültigen Tagen. Wie der Menüpunkt heißt, wechselt
+          mit den TikTok-Versionen; gesucht ist die <strong>Tabelle</strong>,
+          nicht ein bestimmter Name.</li>
+        <li>Die Tabelle mit der Maus markieren – <strong>die
+          Überschriftenzeile muss mit</strong>. An ihr erkennt der Workspace,
+          welche Spalte Diamanten sind und welche Dauer.</li>
+        <li>Kopieren mit <strong>Strg&nbsp;+&nbsp;C</strong> (Mac: Cmd&nbsp;+&nbsp;C).</li>
+        <li>Oben ins Feld klicken, <strong>Strg&nbsp;+&nbsp;V</strong> – die
+          Vorschau erscheint von selbst.</li>
+        <li>Steht in der Tabelle kein Datum, den <strong>Tag</strong> wählen –
+          sonst weiß niemand, worauf sich die Zahlen beziehen.</li>
+      </ol>
+      <p class="hilfe__satz">
+        <strong>Zugeordnet wird über den TikTok-Namen aus dem Steckbrief.</strong>
+        Wer dort keinen stehen hat, taucht in der Vorschau unter „nicht
+        zugeordnet" auf – einmal im Steckbrief nachtragen, und beim nächsten
+        Mal wird er gefunden. Es wird nie geraten.
+      </p>
+      <p class="hilfe__satz">
+        <strong>Warum von Hand?</strong> Backstage hat keine Schnittstelle und
+        keinen Export. Erweiterungen, die das umgehen, verstoßen gegen die
+        Nutzungsbedingungen – und riskieren das Netzwerk-Konto.
+      </p>
+    </details>
+
     <div class="dialog__knoepfe">
       <button type="submit" class="knopf knopf--klein" id="netz-los" disabled>Übernehmen</button>
       <button type="button" class="abmelden" id="netz-zu">Abbrechen</button>
@@ -366,10 +382,10 @@
   </form>
 </dialog>
 
-<script src="assets/js/wahl.js?v=202609111545"></script>
-<script src="assets/js/bereiche.js?v=202609111545"></script>
-<script src="assets/js/kopf.js?v=202609111545"></script>
-<script src="assets/js/glocke.js?v=202609111545"></script>
-<script src="assets/js/leistung.js?v=202609111545"></script>
+<script src="assets/js/wahl.js?v=202609111554"></script>
+<script src="assets/js/bereiche.js?v=202609111554"></script>
+<script src="assets/js/kopf.js?v=202609111554"></script>
+<script src="assets/js/glocke.js?v=202609111554"></script>
+<script src="assets/js/leistung.js?v=202609111554"></script>
 </body>
 </html>