feat(zuweisungen): Zum Dry-Run springt zur Dry-Run-Karte (#032)

Der Link im Zell-Dialog der Zuweisungsmatrix fuehrte nur auf den Kopf
der Schluesselseite; die Dry-Run-Karte liegt weit unten, und wer aus der
Matrix kommt, will genau dorthin. Die Karte traegt jetzt id="dry-run"
(Karte nimmt dafuer eine optionale id an), der Link zeigt auf
/schluessel/<id>#dry-run. scroll-mt haelt die Karte unter der festen
Kopfleiste der schmalen Ansicht.

E2E: der Matrix-Test klickt den Link und prueft Adresse und Sichtbarkeit
der Karte.

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

src/app/(app)/schluessel/[id]/page.tsx

@@ -457,6 +457,10 @@ export default async function SchluesselSeite({
         !imWiderruf &&
         (s.publicVerwendungen.length > 0 || (rechte.privat && s.privateVerwendungen.length > 0)) && (
           <Karte
+            // Sprungziel fuer „Zum Dry-Run“ aus der Zuweisungsmatrix; scroll-mt haelt die Karte
+            // unter der festen Kopfleiste der schmalen Ansicht (#032).
+            id="dry-run"
+            className="scroll-mt-20"
             titel="Dry-Run-Vorschau"
             untertitel="Erst prüfen, dann anwenden – auf den Hosts ändert sich vorher nichts"
           >

src/components/ui/Karte.tsx

@@ -13,6 +13,7 @@ export function Karte({
   className,
   innen = "normal",
   as: Element = "section",
+  id,
 }: {
   titel?: ReactNode;
   untertitel?: ReactNode;
@@ -22,9 +23,12 @@ export function Karte({
   /** „ohne“ für Inhalte, die bis an den Rand reichen (z. B. Tabellen mit eigenem Abstand). */
   innen?: "normal" | "ohne";
   as?: "section" | "div" | "article";
+  /** Sprungziel für Links von anderen Seiten (z. B. `#dry-run`, #032). */
+  id?: string;
 }) {
   return (
     <Element
+      id={id}
       className={clsx(
         "border-border bg-surface min-w-0 rounded-karte border",
         innen === "normal" && "p-5 sm:p-6",

src/components/zuweisungen/ZellenDialog.tsx

@@ -175,7 +175,7 @@ export function ZellenDialog({
             zeigt und schreibt die Änderung.
           </p>
           <Button
-            href={`/schluessel/${schluessel.id}`}
+            href={`/schluessel/${schluessel.id}#dry-run`}
             klein
             className="self-start"
             icon={<ArrowRight className="size-4" />}

tests/e2e/zuweisungen.spec.ts

@@ -128,6 +128,14 @@ test("Matrix zeigt Gruppen-Zuweisung, filtert, weist zu und exportiert", async (
     `"${name} Backup";"SHA256:${name}";"${name}-h2";"root";"Public Key";"${name}-g";"restrict";"noch nicht ausgerollt"`,
   );
   expect(text).toContain(`"${name}-h3";"deploy";"Public Key";""`);
+
+  // „Zum Dry-Run“ springt direkt zur Dry-Run-Karte der Schluesselseite (#032).
+  await matrix.getByRole("button", { name: new RegExp(`auf ${name}-h3: Public Key direkt`) }).click();
+  await dialog.getByRole("link", { name: "Zum Dry-Run" }).click();
+  await expect(page).toHaveURL(new RegExp(`/schluessel/${ids.schluessel}#dry-run$`));
+  const karte = page.locator("#dry-run");
+  await expect(karte).toContainText("Dry-Run-Vorschau");
+  await expect(karte).toBeInViewport();
 });
 
 test("Leser sieht die Matrix, aber keinen Zuweisen-Knopf", async ({ page }) => {