feat(ui): Formular-Karten, Backup-Codes als Kacheln, Gutschein zum Kopieren

- Gemeinsame FormPanel-Karte fuer Passwort- und Zwei-Faktor-Seiten
- Zwei-Faktor-Code: grosses, zentriertes Ziffernfeld
- Backup-Codes als nummerierte Kacheln statt langer Liste
- Newsletter-Bestaetigung: Willkommensrabatt als Gutschein mit
  gestricheltem Rand und Kopier-Knopf (bestaetigt "Kopiert")

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/app/konto/zwei-faktor/backup-codes/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
-import { Container, SectionHeading, Button } from "@/components/ui";
+import { Container, SectionHeading, Button, FormPanel } from "@/components/ui";
 import { getCurrentCustomer, getTwoFactorBackupCodesDisplay } from "@/lib/auth";
 import { dismissBackupCodesAction } from "../../actions";
 import { getLocale } from "@/i18n/locale";
@@ -19,20 +19,25 @@ export default async function ZweiFaktorBackupCodesPage() {
 
   return (
     <div className="py-20">
-      <Container className="max-w-md">
+      <Container className="max-w-lg">
+        <FormPanel>
         <SectionHeading
           eyebrow={t.twoFactorBackupCodesPage.eyebrow}
           title={t.twoFactorBackupCodesPage.title}
           subtitle={t.twoFactorBackupCodesPage.subtitle}
         />
 
-        <ul className="mt-8 border border-ink/10 divide-y divide-ink/10 font-mono text-sm">
-          {codes.map((code) => (
-            <li key={code} className="px-4 py-3">
+        <ol className="mt-8 grid grid-cols-2 gap-2">
+          {codes.map((code, i) => (
+            <li
+              key={code}
+              className="flex items-center gap-3 border border-ink/10 bg-cream/50 px-3 py-3 font-mono text-sm tabular-nums tracking-wider text-forest"
+            >
+              <span className="text-[10px] text-ink/45 tabular-nums">{String(i + 1).padStart(2, "0")}</span>
               {code}
             </li>
           ))}
-        </ul>
+        </ol>
 
         <p className="mt-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">
           {t.twoFactorBackupCodesPage.warning}
@@ -41,6 +46,7 @@ export default async function ZweiFaktorBackupCodesPage() {
         <form action={dismissBackupCodesAction} className="mt-8">
           <Button type="submit">{t.twoFactorBackupCodesPage.done}</Button>
         </form>
+      </FormPanel>
       </Container>
     </div>
   );