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/newsletter-bestaetigt/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CopyCodeButton } from "@/components/copy-code-button";
 import { Container, SectionHeading, LinkButton } from "@/components/ui";
 import { getLocale } from "@/i18n/locale";
 import { getDictionary } from "@/i18n/get-dictionary";
@@ -38,13 +39,24 @@ export default async function NewsletterBestaetigtPage(props: PageProps<"/newsle
         <p className="mt-6 text-ink/70">{text}</p>
 
         {status === "ok" ? (
-          <div className="mt-8 border border-forest/20 bg-forest/5 p-6">
+          // Der Rabatt als Gutschein: gestrichelter Rand wie zum Ausschneiden,
+          // Code gross und mit einem Klick kopierbar.
+          <div className="relative mt-10 border-2 border-dashed border-honey/60 bg-honey/[0.06] px-6 py-8">
+            <span aria-hidden="true" className="absolute -left-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-background" />
+            <span aria-hidden="true" className="absolute -right-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-background" />
             <p className="text-sm text-ink/70">{t.newsletterBestaetigtPage.discountHeading}</p>
-            <p className="mt-2 text-2xl text-forest tracking-wide">
-              {t.newsletterBestaetigtPage.discountText(NEWSLETTER_DISCOUNT_PERCENT)}{" "}
-              <span className="font-medium">{NEWSLETTER_DISCOUNT_CODE}</span>
+            <p className="mt-2 font-serif text-2xl text-forest">
+              {t.newsletterBestaetigtPage.discountText(NEWSLETTER_DISCOUNT_PERCENT)}
             </p>
-            <p className="mt-2 text-xs text-ink/70">{t.newsletterBestaetigtPage.discountCopyHint}</p>
+            <p className="mt-4 font-mono text-3xl tracking-[0.2em] text-honey-dark select-all">{NEWSLETTER_DISCOUNT_CODE}</p>
+            <div className="mt-5 flex flex-col items-center gap-2">
+              <CopyCodeButton
+                code={NEWSLETTER_DISCOUNT_CODE}
+                label={t.newsletterBestaetigtPage.copyCode}
+                copiedLabel={t.newsletterBestaetigtPage.codeCopied}
+              />
+              <p className="text-xs text-ink/70">{t.newsletterBestaetigtPage.discountCopyHint}</p>
+            </div>
           </div>
         ) : null}