fix: Kurzbefehl-Anleitung dauerhaft sichtbar

Die Anleitung – und damit die Konto-Nummern fuer account_id – erschien nur
direkt nach dem Anlegen einer Marke. Wer sie ausblendete oder die Seite neu
lud, kam nie wieder daran und stand vor dem Kurzbefehl ohne die Nummer, die
er eintragen sollte.

Einmalig ist nur der Klartext der Marke; die Anleitung steht jetzt immer da,
mit Platzhalter statt Klartext.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/pages/settings/Geraetemarken.jsx

@@ -30,6 +30,9 @@ export default function Geraetemarken() {
   const [busy, setBusy] = useState(false);
 
   const basis = useMemo(() => window.location.origin, []);
+  // In der Anleitung steht der Klartext nur, solange die Marke frisch ist –
+  // danach ein Platzhalter, denn wir haben ihn selbst nicht mehr.
+  const markeText = frisch ? frisch.token : "<deine Marke>";
 
   async function laden() {
     try {
@@ -124,65 +127,6 @@ export default function Geraetemarken() {
               <Icon name="copy" size={14} /> {t("tokens.copy")}
             </button>
           </div>
-          <details style={{ marginTop: "var(--sp-3)" }} open>
-            <summary>{t("tokens.guideTitle")}</summary>
-            <p className="muted small">{t("tokens.guideNoDownload")}</p>
-            <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
-              <li>{t("tokens.step1")}</li>
-              <li>{t("tokens.step2")}</li>
-              <li>{t("tokens.step3")}</li>
-              <li>
-                {t("tokens.step4")}
-                <div className="input-with-button" style={{ marginTop: 4 }}>
-                  <input readOnly className="selectable" value={`${basis}/api/quick/booking`} />
-                  <button type="button" className="btn sm"
-                          onClick={() => kopieren(`${basis}/api/quick/booking`)}>
-                    <Icon name="copy" size={14} />
-                  </button>
-                </div>
-                <div className="input-with-button" style={{ marginTop: 4 }}>
-                  <input readOnly className="selectable"
-                         value={`X-Certain-Token: ${frisch.token}`} />
-                  <button type="button" className="btn sm"
-                          onClick={() => kopieren(`X-Certain-Token: ${frisch.token}`)}>
-                    <Icon name="copy" size={14} />
-                  </button>
-                </div>
-              </li>
-              <li>{t("tokens.step5")}</li>
-            </ol>
-            <p className="muted small">{t("tokens.guideHomeScreen")}</p>
-            <p className="muted small">{t("tokens.guideAutomation")}</p>
-          </details>
-
-          <details style={{ marginTop: "var(--sp-3)" }}>
-            <summary>{t("tokens.fileGuideTitle")}</summary>
-            <p className="muted small">{t("tokens.fileGuideIntro")}</p>
-            <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
-              <li>{t("tokens.fileStep1")}</li>
-              <li>{t("tokens.fileStep2")}</li>
-              <li>
-                {t("tokens.fileStep3")}
-                <div className="input-with-button" style={{ marginTop: 4 }}>
-                  <input readOnly className="selectable" value={`${basis}/api/quick/statement`} />
-                  <button type="button" className="btn sm"
-                          onClick={() => kopieren(`${basis}/api/quick/statement`)}>
-                    <Icon name="copy" size={14} />
-                  </button>
-                </div>
-              </li>
-              <li>{t("tokens.fileStep4")}</li>
-            </ol>
-            <p className="muted small" style={{ marginBottom: 4 }}>
-              <strong>{t("tokens.accountIds")}</strong>
-            </p>
-            <ul className="muted small selectable" style={{ paddingLeft: "1.2em", margin: 0 }}>
-              {konten.map((k) => (
-                <li key={k.id}>{k.name}: <strong>{k.id}</strong></li>
-              ))}
-            </ul>
-            <p className="muted small">{t("tokens.fileGuideNote")}</p>
-          </details>
           <button className="btn sm ghost" style={{ marginTop: "var(--sp-2)" }}
                   onClick={() => setFrisch(null)}>
             {t("tokens.hide")}
@@ -190,6 +134,68 @@ export default function Geraetemarken() {
         </div>
       )}
 
+      <div style={{ marginTop: "var(--sp-4)" }}>
+        <details>
+          <summary>{t("tokens.guideTitle")}</summary>
+          <p className="muted small">{t("tokens.guideNoDownload")}</p>
+          <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
+            <li>{t("tokens.step1")}</li>
+            <li>{t("tokens.step2")}</li>
+            <li>{t("tokens.step3")}</li>
+            <li>
+              {t("tokens.step4")}
+              <div className="input-with-button" style={{ marginTop: 4 }}>
+                <input readOnly className="selectable" value={`${basis}/api/quick/booking`} />
+                <button type="button" className="btn sm"
+                      onClick={() => kopieren(`${basis}/api/quick/booking`)}>
+                <Icon name="copy" size={14} />
+                </button>
+              </div>
+              <div className="input-with-button" style={{ marginTop: 4 }}>
+                <input readOnly className="selectable"
+                     value={`X-Certain-Token: ${markeText}`} />
+                <button type="button" className="btn sm"
+                      onClick={() => kopieren(`X-Certain-Token: ${markeText}`)}>
+                <Icon name="copy" size={14} />
+                </button>
+              </div>
+            </li>
+            <li>{t("tokens.step5")}</li>
+          </ol>
+          <p className="muted small">{t("tokens.guideHomeScreen")}</p>
+          <p className="muted small">{t("tokens.guideAutomation")}</p>
+        </details>
+
+        <details style={{ marginTop: "var(--sp-3)" }}>
+          <summary>{t("tokens.fileGuideTitle")}</summary>
+          <p className="muted small">{t("tokens.fileGuideIntro")}</p>
+          <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
+            <li>{t("tokens.fileStep1")}</li>
+            <li>{t("tokens.fileStep2")}</li>
+            <li>
+              {t("tokens.fileStep3")}
+              <div className="input-with-button" style={{ marginTop: 4 }}>
+                <input readOnly className="selectable" value={`${basis}/api/quick/statement`} />
+                <button type="button" className="btn sm"
+                      onClick={() => kopieren(`${basis}/api/quick/statement`)}>
+                <Icon name="copy" size={14} />
+                </button>
+              </div>
+            </li>
+            <li>{t("tokens.fileStep4")}</li>
+          </ol>
+          <p className="muted small" style={{ marginBottom: 4 }}>
+            <strong>{t("tokens.accountIds")}</strong>
+          </p>
+          <ul className="muted small selectable" style={{ paddingLeft: "1.2em", margin: 0 }}>
+            {konten.map((k) => (
+              <li key={k.id}>{k.name}: <strong>{k.id}</strong></li>
+            ))}
+          </ul>
+          <p className="muted small">{t("tokens.fileGuideNote")}</p>
+        </details>
+      </div>
+
       {marken.length > 0 && (
         <div className="account-list" style={{ marginTop: "var(--sp-3)" }}>
           {marken.map((m) => (