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/components/ui.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { HexMark } from "@/components/honeycomb";
+import { HexMark, HoneycombPattern } from "@/components/honeycomb";
 
 export function Container({
   id,
@@ -164,3 +164,21 @@ export function FramedMedia({
     </div>
   );
 }
+
+/**
+ * Karte fuer die kurzen Formularseiten (Passwort, Zwei-Faktor, ...): hebt
+ * das Formular von der Flaeche ab, mit Wabenraster in der oberen Ecke als
+ * leiser Markengruss.
+ */
+export function FormPanel({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={`relative overflow-hidden border border-ink/10 bg-background px-7 py-9 shadow-[0_24px_50px_-34px_rgba(36,53,43,0.45)] sm:px-10 sm:py-11 ${className}`}
+    >
+      <div aria-hidden="true" className="pointer-events-none absolute -right-8 -top-8 h-40 w-40">
+        <HoneycombPattern className="text-honey/30" size={14} />
+      </div>
+      <div className="relative">{children}</div>
+    </div>
+  );
+}