Konto-Seite: eigenen Namen, E-Mail, Passwort und Passkeys selbst verwalten

- Klick auf den Benutzernamen im Header (Kantinen- und Admin-Bereich)
  öffnet /konto
- Name-Änderung per RLS-Policy mit spaltenscharfem Grant (nur
  full_name), Rolle bleibt ausschließlich über die Admin-API änderbar
- E-Mail-Änderung über supabase.auth.updateUser mit Bestätigungslink;
  Trigger synchronisiert profiles.email nach Bestätigung
- Passwortänderung verlangt zur Verifizierung das aktuelle Passwort
  (Re-Login-Check) plus Wiederholung des neuen Passworts
- Passkey-Verwaltung aus /intern/konto hierher verschoben

components/PasskeyManager.tsx

@@ -57,11 +57,9 @@ export default function PasskeyManager() {
   }
 
   return (
-    <div className="max-w-2xl">
-      <h1 className="text-xl font-bold text-[var(--c-primary)] mb-2">
-        Passkeys
-      </h1>
-      <p className="text-sm text-gray-600 mb-4">
+    <section className="card">
+      <h2 className="font-semibold mb-1">Passkeys</h2>
+      <p className="text-sm text-gray-600 mb-3">
         Mit einem Passkey (Fingerabdruck, Gesichtserkennung oder
         Sicherheitsschlüssel) kannst du dich künftig ohne Passwort anmelden.
         Passkeys gelten pro Domain – für den Live-Betrieb muss die Domain in
@@ -69,24 +67,24 @@ export default function PasskeyManager() {
       </p>
 
       {error && (
-        <p className="mb-3 text-sm text-[var(--c-del)]" role="alert">
+        <p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
           {error}
         </p>
       )}
-      {info && <p className="mb-3 text-sm text-green-700">{info}</p>}
+      {info && <p className="mb-2 text-sm text-green-700">{info}</p>}
 
       <button
         type="button"
-        className="btn btn-add mb-4"
+        className="btn btn-add mb-3"
         onClick={register}
         disabled={busy}
       >
         Neuen Passkey registrieren
       </button>
 
-      <ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
+      <ul className="divide-y divide-gray-100">
         {passkeys.map((pk) => (
-          <li key={pk.id} className="flex items-center gap-3 px-4 py-2 text-sm">
+          <li key={pk.id} className="flex items-center gap-3 py-1.5 text-sm">
             <span className="mr-auto">
               <span className="font-semibold">
                 {pk.friendly_name || "Passkey"}
@@ -106,11 +104,11 @@ export default function PasskeyManager() {
           </li>
         ))}
         {passkeys.length === 0 && (
-          <li className="px-4 py-3 text-gray-500 text-sm">
+          <li className="py-2 text-gray-500 text-sm">
             Noch keine Passkeys registriert.
           </li>
         )}
       </ul>
-    </div>
+    </section>
   );
 }