diff --git a/apps/admin/app/(authed)/einstellungen/_components/section-card.tsx b/apps/admin/app/(authed)/einstellungen/_components/section-card.tsx
new file mode 100644
index 0000000..52d2c05
--- /dev/null
+++ b/apps/admin/app/(authed)/einstellungen/_components/section-card.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+export function SectionCard({
+  title,
+  description,
+  children,
+  footer,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  return (
+    <section className="rounded-2xl bg-white shadow-sm ring-1 ring-gray-100">
+      <header className="border-b border-gray-100 px-6 py-5">
+        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+        {description ? <p className="mt-1 text-sm text-gray-500">{description}</p> : null}
+      </header>
+      <div className="space-y-5 px-6 py-6">{children}</div>
+      {footer ? <div className="border-t border-gray-100 px-6 py-4">{footer}</div> : null}
+    </section>
+  );
+}
diff --git a/apps/admin/app/(authed)/einstellungen/_components/settings-tabs.tsx b/apps/admin/app/(authed)/einstellungen/_components/settings-tabs.tsx
new file mode 100644
index 0000000..4d4d08f
--- /dev/null
+++ b/apps/admin/app/(authed)/einstellungen/_components/settings-tabs.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+export type SettingsTabId =
+  | "profil"
+  | "ernaehrung"
+  | "ziele"
+  | "sicherheit"
+  | "anwendung";
+
+const tabs: { id: SettingsTabId; label: string; description: string }[] = [
+  { id: "profil", label: "Profil", description: "Persoenliche Daten und Kontakt" },
+  { id: "ernaehrung", label: "Ernaehrung", description: "Rezept- und Mahlzeiten-Praeferenzen" },
+  { id: "ziele", label: "Ziele", description: "Kalorien, Makros, Gewicht, Fasten" },
+  { id: "sicherheit", label: "Sicherheit", description: "2FA, Passkeys, Passwort" },
+  { id: "anwendung", label: "Anwendung", description: "Erscheinungsbild und Erinnerungen" },
+];
+
+export function useSettingsTab(): {
+  active: SettingsTabId;
+  setActive: (id: SettingsTabId) => void;
+} {
+  const router = useRouter();
+  const search = useSearchParams();
+  const tabParam = search.get("tab");
+  const active: SettingsTabId =
+    tabs.find((tab) => tab.id === tabParam)?.id ?? "profil";
+
+  const setActive = useCallback(
+    (id: SettingsTabId) => {
+      const params = new URLSearchParams(search.toString());
+      params.set("tab", id);
+      router.replace(`/einstellungen?${params.toString()}`, { scroll: false });
+    },
+    [router, search],
+  );
+
+  return { active, setActive };
+}
+
+export function SettingsTabs({
+  active,
+  onChange,
+}: {
+  active: SettingsTabId;
+  onChange: (id: SettingsTabId) => void;
+}) {
+  const activeMeta = tabs.find((tab) => tab.id === active);
+  return (
+    <div className="space-y-3">
+      <div
+        role="tablist"
+        aria-label="Einstellungs-Kategorien"
+        className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1"
+      >
+        {tabs.map((tab) => {
+          const isActive = tab.id === active;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              onClick={() => onChange(tab.id)}
+              className={`shrink-0 rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
+                isActive
+                  ? "bg-[#0F766E] text-white shadow-sm"
+                  : "bg-white text-gray-600 ring-1 ring-gray-200 hover:bg-gray-50"
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+      {activeMeta?.description ? (
+        <p className="px-1 text-sm text-gray-500">{activeMeta.description}</p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/admin/app/(authed)/einstellungen/_components/status-banner.tsx b/apps/admin/app/(authed)/einstellungen/_components/status-banner.tsx
new file mode 100644
index 0000000..80b8ca3
--- /dev/null
+++ b/apps/admin/app/(authed)/einstellungen/_components/status-banner.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+export function StatusBanner({
+  status,
+  error,
+}: {
+  status: string | null;
+  error: string | null;
+}) {
+  if (!status && !error) return null;
+  if (error) {
+    return (
+      <div
+        role="alert"
+        className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+      >
+        {error}
+      </div>
+    );
+  }
+  return (
+    <div
+      role="status"
+      className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700"
+    >
+      {status}
+    </div>
+  );
+}
diff --git a/apps/admin/app/(authed)/einstellungen/page.tsx b/apps/admin/app/(authed)/einstellungen/page.tsx
index 4cfa48f..aab774e 100644
--- a/apps/admin/app/(authed)/einstellungen/page.tsx
+++ b/apps/admin/app/(authed)/einstellungen/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import {
   BeakerIcon,
@@ -8,8 +8,10 @@ import {
   EyeIcon,
   EyeSlashIcon,
   FireIcon,
+  KeyIcon,
   MoonIcon,
   ScaleIcon,
+  ShieldCheckIcon,
   SunIcon,
 } from "@heroicons/react/24/outline";
 import Link from "next/link";
@@ -19,6 +21,9 @@ import { useTheme } from "@/app/_components/theme-provider";
 import { authClient } from "@/lib/auth-client";
 import { HellthGoals, loadHellthData } from "@/lib/hellth-data";
 import { trpc } from "@/lib/trpc";
+import { SectionCard } from "./_components/section-card";
+import { SettingsTabs, useSettingsTab } from "./_components/settings-tabs";
+import { StatusBanner } from "./_components/status-banner";
 
 const PASSWORD_CHARS =
   "ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%&*";
@@ -38,9 +43,7 @@ function todayKey() {
 
 function generatePassword(length = 16) {
   const bytes = crypto.getRandomValues(new Uint8Array(length));
-  return Array.from(bytes, (byte) => PASSWORD_CHARS[byte % PASSWORD_CHARS.length]!).join(
-    "",
-  );
+  return Array.from(bytes, (byte) => PASSWORD_CHARS[byte % PASSWORD_CHARS.length]!).join("");
 }
 
 async function toOptimizedAvatarDataUrl(file: File) {
@@ -54,7 +57,7 @@ async function toOptimizedAvatarDataUrl(file: File) {
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("Canvas nicht verfügbar");
+  if (!ctx) throw new Error("Canvas nicht verfuegbar");
 
   ctx.drawImage(bitmap, 0, 0, width, height);
   bitmap.close();
@@ -64,13 +67,22 @@ async function toOptimizedAvatarDataUrl(file: File) {
     throw new Error("Profilbild konnte nicht verarbeitet werden.");
   }
   if (dataUrl.length > 120_000) {
-    throw new Error("Profilbild ist nach Komprimierung noch zu groß.");
+    throw new Error("Profilbild ist nach Komprimierung noch zu gross.");
   }
   return dataUrl;
 }
 
+const inputClass =
+  "w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-900 focus:border-[#0F766E] focus:outline-none focus:ring-2 focus:ring-[#0F766E]/20";
+const labelClass = "mb-1.5 block text-sm font-medium text-gray-700";
+const buttonPrimary =
+  "inline-flex items-center justify-center rounded-lg bg-[#0F766E] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[#115E59] disabled:cursor-not-allowed disabled:opacity-50";
+const buttonSecondary =
+  "inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50";
+
 export default function EinstellungenPage() {
   const { isDark, toggleDark } = useTheme();
+  const { active, setActive } = useSettingsTab();
   const utils = trpc.useUtils();
   const profileQuery = trpc.users.myProfile.useQuery();
   const securityQuery = trpc.security.status.useQuery();
@@ -89,13 +101,21 @@ export default function EinstellungenPage() {
   const [postalCode, setPostalCode] = useState("");
   const [city, setCity] = useState("");
   const [image, setImage] = useState<string | null>(null);
-  const [dietPreferences, setDietPreferences] = useState<DietPreference[]>(["vegan", "vegetarian", "meat", "fish"]);
+  const [dietPreferences, setDietPreferences] = useState<DietPreference[]>([
+    "vegan",
+    "vegetarian",
+    "meat",
+    "fish",
+  ]);
   const [mealsPerDay, setMealsPerDay] = useState("3");
   const [cooksPerDay, setCooksPerDay] = useState("1");
   const [preferredMealPrepDays, setPreferredMealPrepDays] = useState("0");
-  const [meatFishFrequency, setMeatFishFrequency] = useState<"none" | "once_per_day" | "flexible">("flexible");
+  const [meatFishFrequency, setMeatFishFrequency] = useState<
+    "none" | "once_per_day" | "flexible"
+  >("flexible");
 
   const isPlatformAdmin = profileQuery.data?.role === "admin";
+
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [confirmNewPassword, setConfirmNewPassword] = useState("");
@@ -124,7 +144,10 @@ export default function EinstellungenPage() {
 
   const updateMyProfile = trpc.users.updateMyProfile.useMutation({
     onSuccess: async () => {
-      await Promise.all([utils.users.myProfile.invalidate(), utils.security.status.invalidate()]);
+      await Promise.all([
+        utils.users.myProfile.invalidate(),
+        utils.security.status.invalidate(),
+      ]);
       setStatusMessage("Profil gespeichert.");
       setErrorMessage(null);
     },
@@ -152,7 +175,7 @@ export default function EinstellungenPage() {
     onSuccess: async () => {
       await healthOverviewQuery.refetch();
       await utils.health.recipeRecommendations.invalidate();
-      setStatusMessage("Essenspräferenzen gespeichert.");
+      setStatusMessage("Essenspraeferenzen gespeichert.");
       setErrorMessage(null);
     },
     onError: (error) => {
@@ -164,16 +187,24 @@ export default function EinstellungenPage() {
   useEffect(() => {
     const profile = healthOverviewQuery.data?.profile;
     if (!profile) return;
-    setDietPreferences((profile.dietPreferences?.length ? profile.dietPreferences : ["vegan", "vegetarian", "meat", "fish"]) as DietPreference[]);
+    setDietPreferences(
+      (profile.dietPreferences?.length
+        ? profile.dietPreferences
+        : ["vegan", "vegetarian", "meat", "fish"]) as DietPreference[],
+    );
     setMealsPerDay(String(profile.mealsPerDay ?? 3));
     setCooksPerDay(String(profile.cooksPerDay ?? 1));
     setPreferredMealPrepDays(String(profile.preferredMealPrepDays ?? 0));
-    setMeatFishFrequency((profile.meatFishFrequency as "none" | "once_per_day" | "flexible") ?? "flexible");
+    setMeatFishFrequency(
+      (profile.meatFishFrequency as "none" | "once_per_day" | "flexible") ?? "flexible",
+    );
   }, [healthOverviewQuery.data?.profile]);
 
   function toggleDietPreference(preference: DietPreference) {
     setDietPreferences((current) => {
-      const next = current.includes(preference) ? current.filter((item) => item !== preference) : [...current, preference];
+      const next = current.includes(preference)
+        ? current.filter((item) => item !== preference)
+        : [...current, preference];
       return next.length ? next : current;
     });
   }
@@ -184,7 +215,8 @@ export default function EinstellungenPage() {
       goal: profile?.goal ?? "healthier",
       age: profile?.age ?? null,
       heightCm: profile?.heightCm == null ? null : Number(profile.heightCm),
-      currentWeightKg: profile?.currentWeightKg == null ? null : Number(profile.currentWeightKg),
+      currentWeightKg:
+        profile?.currentWeightKg == null ? null : Number(profile.currentWeightKg),
       targetWeightKg: profile?.targetWeightKg == null ? null : Number(profile.targetWeightKg),
       activityLevel: profile?.activityLevel ?? "moderate",
       dietStyle: profile?.dietStyle ?? "flexible",
@@ -193,7 +225,8 @@ export default function EinstellungenPage() {
       cooksPerDay: Number(cooksPerDay) || 1,
       preferredMealPrepDays: Number(preferredMealPrepDays) || 0,
       meatFishFrequency,
-      cookingTime: (profile?.cookingTime as "low" | "medium" | "high" | undefined) ?? "medium",
+      cookingTime:
+        (profile?.cookingTime as "low" | "medium" | "high" | undefined) ?? "medium",
       budgetFocus: profile?.budgetFocus ?? false,
       excludedFoods: profile?.excludedFoods ?? null,
       biggestChallenge: profile?.biggestChallenge ?? null,
@@ -209,7 +242,8 @@ export default function EinstellungenPage() {
     () =>
       !!firstName.trim() &&
       firstName.trim().length >= 2 &&
-      (firstName.trim() !== (profileQuery.data?.firstName ?? profileQuery.data?.name ?? "") ||
+      (firstName.trim() !==
+        (profileQuery.data?.firstName ?? profileQuery.data?.name ?? "") ||
         (lastName.trim() || null) !== (profileQuery.data?.lastName ?? null) ||
         (phone.trim() || null) !== (profileQuery.data?.phone ?? null) ||
         (mobile.trim() || null) !== (profileQuery.data?.mobile ?? null) ||
@@ -245,24 +279,23 @@ export default function EinstellungenPage() {
       name: newPasskeyName.trim() || undefined,
     });
     if (result.error) {
-      setErrorMessage(result.error.message ?? "Passkey konnte nicht hinzugefügt werden.");
+      setErrorMessage(result.error.message ?? "Passkey konnte nicht hinzugefuegt werden.");
       return;
     }
-    setStatusMessage("Passkey erfolgreich hinzugefügt.");
+    setStatusMessage("Passkey erfolgreich hinzugefuegt.");
     setNewPasskeyName("");
     await passkeysQuery.refetch();
   }
 
   async function handleImageUpload(file: File) {
     if (!file.type.startsWith("image/")) {
-      setErrorMessage("Bitte eine Bilddatei auswählen.");
+      setErrorMessage("Bitte eine Bilddatei auswaehlen.");
       return;
     }
     if (file.size > 5 * 1024 * 1024) {
-      setErrorMessage("Profilbild ist zu groß. Maximal 5 MB.");
+      setErrorMessage("Profilbild ist zu gross. Maximal 5 MB.");
       return;
     }
-
     try {
       const dataUrl = await toOptimizedAvatarDataUrl(file);
       setImage(dataUrl);
@@ -276,162 +309,74 @@ export default function EinstellungenPage() {
     }
   }
 
+  function handleSaveProfile() {
+    setStatusMessage(null);
+    setErrorMessage(null);
+    updateMyProfile.mutate({
+      firstName: firstName.trim(),
+      lastName: lastName.trim() || null,
+      phone: phone.trim() || null,
+      mobile: mobile.trim() || null,
+      street: street.trim() || null,
+      postalCode: postalCode.trim() || null,
+      city: city.trim() || null,
+      image,
+    });
+  }
+
+  function handleChangePassword() {
+    setStatusMessage(null);
+    setErrorMessage(null);
+    changeMyPassword.mutate({ currentPassword, newPassword });
+  }
+
   return (
-    <DataPageLayout title="Einstellungen" description="Persönliches Profil und Sicherheit">
-      <div className="mb-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
-        <section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
-          <h2 className="text-xl font-black text-gray-400">Ziele</h2>
-          <div className="mt-5 divide-y divide-gray-100">
-            {[
-              { icon: FireIcon, label: "Kalorien", value: `${healthGoals?.calories ?? 2000} kcal`, color: "text-orange-500" },
-              { icon: ScaleIcon, label: "Makros", value: `${healthGoals?.carbs ?? 200}/${healthGoals?.fat ?? 67}/${healthGoals?.protein ?? 150} g`, color: "text-blue-500" },
-              { icon: ClockIcon, label: "Fasten", value: `${healthGoals?.fastingHours ?? 12} h`, color: "text-rose-500" },
-              { icon: BeakerIcon, label: "Wasser", value: `${healthGoals?.drinkMl ?? 2500} ml`, color: "text-blue-500" },
-              { icon: ScaleIcon, label: "Gewicht", value: `${healthGoals?.weightKg ?? 120} kg`, color: "text-orange-500" },
-            ].map((item) => (
-              <Link key={item.label} href="/ziele" className="flex w-full items-center gap-4 py-4 text-left">
-                <item.icon className={`h-7 w-7 ${item.color}`} />
-                <span className="flex-1 text-lg font-black text-gray-950">{item.label}</span>
-                <span className="text-lg font-black text-gray-400">{item.value}</span>
-                <ChevronRightIcon className="h-5 w-5 text-gray-300" />
-              </Link>
-            ))}
-          </div>
-        </section>
+    <DataPageLayout
+      title="Einstellungen"
+      description="Profil, Sicherheit und persoenliche Vorlieben"
+    >
+      <div className="space-y-6">
+        <SettingsTabs active={active} onChange={setActive} />
 
-        <section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
-          <h2 className="text-xl font-black text-gray-400">Rezept-Präferenzen</h2>
-          <div className="mt-5 space-y-4">
-            <div>
-              <p className="text-sm font-black uppercase text-gray-400">Ernährung</p>
-              <div className="mt-2 grid grid-cols-2 gap-2">
-                {dietPreferenceOptions.map((option) => (
-                  <button
-                    key={option.id}
-                    type="button"
-                    onClick={() => toggleDietPreference(option.id)}
-                    className={`rounded-full px-3 py-2 text-sm font-black ${
-                      dietPreferences.includes(option.id) ? "bg-[#0F766E] text-white" : "bg-gray-100 text-gray-500"
-                    }`}
-                  >
-                    {option.label}
-                  </button>
-                ))}
+        <StatusBanner status={statusMessage} error={errorMessage} />
+
+        {profileQuery.isLoading ? (
+          <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500">
+            Profil wird geladen...
+          </div>
+        ) : null}
+
+        {active === "profil" ? (
+          <SectionCard
+            title="Mein Profil"
+            description="Persoenliche Daten und Kontakt. E-Mail-Aenderung erfolgt ueber das Konto."
+            footer={
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  onClick={handleSaveProfile}
+                  disabled={isBusy || !canSaveProfile}
+                  className={buttonPrimary}
+                >
+                  Profil speichern
+                </button>
               </div>
-            </div>
-            <div className="grid grid-cols-3 gap-2">
-              <label className="space-y-1">
-                <span className="text-xs font-black uppercase text-gray-400">Mahlzeiten</span>
-                <input value={mealsPerDay} onChange={(event) => setMealsPerDay(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
-              </label>
-              <label className="space-y-1">
-                <span className="text-xs font-black uppercase text-gray-400">Kochen/Tag</span>
-                <input value={cooksPerDay} onChange={(event) => setCooksPerDay(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
-              </label>
-              <label className="space-y-1">
-                <span className="text-xs font-black uppercase text-gray-400">Mealprep</span>
-                <input value={preferredMealPrepDays} onChange={(event) => setPreferredMealPrepDays(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
-              </label>
-            </div>
-            <label className="block space-y-1">
-              <span className="text-xs font-black uppercase text-gray-400">Fleisch/Fisch</span>
-              <select
-                value={meatFishFrequency}
-                onChange={(event) => setMeatFishFrequency(event.target.value as "none" | "once_per_day" | "flexible")}
-                className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold"
-              >
-                <option value="none">nie</option>
-                <option value="once_per_day">maximal 1x am Tag</option>
-                <option value="flexible">flexibel</option>
-              </select>
-            </label>
-            <button
-              type="button"
-              onClick={saveEatingPreferences}
-              disabled={updateHealthProfile.isPending}
-              className="w-full rounded-full bg-gray-950 px-4 py-3 text-sm font-black text-white disabled:opacity-50"
-            >
-              Präferenzen speichern
-            </button>
-          </div>
-        </section>
-
-        <section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
-          <h2 className="text-xl font-black text-gray-400">Anwendung</h2>
-          <div className="mt-5 space-y-4">
-            <div className="flex items-center gap-4">
-              <BellIcon className="h-7 w-7 text-green-500" />
-              <div className="flex-1">
-                <p className="text-lg font-black text-gray-950">Tägliche Erinnerung</p>
-                <p className="text-sm font-bold text-gray-400">Tracking und Planung</p>
-              </div>
-              <span className="relative inline-flex h-8 w-14 rounded-full bg-green-500">
-                <span className="absolute right-1 top-1 h-6 w-6 rounded-full bg-white" />
-              </span>
-            </div>
-            <div className="flex items-center gap-4">
-              {isDark ? <MoonIcon className="h-7 w-7 text-indigo-400" /> : <SunIcon className="h-7 w-7 text-amber-500" />}
-              <div className="flex-1">
-                <p className="text-lg font-black text-gray-950">Dunkles Design</p>
-                <p className="text-sm font-bold text-gray-400">{isDark ? "aktiv" : "inaktiv"}</p>
-              </div>
-              <button
-                type="button"
-                onClick={toggleDark}
-                className={`relative inline-flex h-8 w-14 rounded-full ${isDark ? "bg-[#0F766E]" : "bg-gray-200"}`}
-                aria-label="Dunkles Design umschalten"
-              >
-                <span className={`absolute top-1 h-6 w-6 rounded-full bg-white transition ${isDark ? "right-1" : "left-1"}`} />
-              </button>
-            </div>
-          </div>
-        </section>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <section className="lg:col-span-2 bg-white border border-gray-200 rounded-xl p-6 space-y-5">
-          <div>
-            <h2 className="text-lg font-semibold text-[#333333]">Mein Profil</h2>
-            <p className="text-sm text-gray-500 mt-1">
-              Du kannst dein eigenes Profil bearbeiten. Höhere Admins können dich zusätzlich in
-              der Benutzerverwaltung bearbeiten.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Name</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-                value={firstName}
-                onChange={(event) => setFirstName(event.target.value)}
-                placeholder="Vorname"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Nachname</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-                value={lastName}
-                onChange={(event) => setLastName(event.target.value)}
-                placeholder="Nachname"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Profilbild</label>
-              <div className="flex items-center gap-3">
-                <div className="w-16 h-16 rounded-full bg-gray-100 border border-gray-200 overflow-hidden shrink-0">
+            }
+          >
+            <div className="flex flex-col gap-6 sm:flex-row sm:items-start">
+              <div className="flex flex-col items-center gap-3 sm:items-start">
+                <div className="h-24 w-24 overflow-hidden rounded-full border border-gray-200 bg-gray-100 shadow-inner">
                   {image ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img src={image} alt="Profilbild" className="w-full h-full object-cover" />
+                    <img src={image} alt="Profilbild" className="h-full w-full object-cover" />
                   ) : (
-                    <div className="w-full h-full flex items-center justify-center text-sm text-gray-400">
-                      -
+                    <div className="flex h-full w-full items-center justify-center text-2xl font-semibold text-gray-400">
+                      {(firstName || profileQuery.data?.email || "?").slice(0, 1).toUpperCase()}
                     </div>
                   )}
                 </div>
-                <div className="space-y-2">
-                  <label className="inline-flex px-3 py-2 rounded-lg bg-gray-100 text-gray-700 text-sm cursor-pointer">
+                <div className="flex flex-col gap-2 text-center sm:text-left">
+                  <label className={`${buttonSecondary} cursor-pointer text-xs`}>
                     Bild hochladen
                     <input
                       type="file"
@@ -439,341 +384,507 @@ export default function EinstellungenPage() {
                       className="hidden"
                       onChange={(event) => {
                         const file = event.target.files?.[0];
-                        if (file) {
-                          void handleImageUpload(file);
-                        }
+                        if (file) void handleImageUpload(file);
                         event.currentTarget.value = "";
                       }}
                     />
                   </label>
-                  <p className="text-xs text-gray-500">Bild wird automatisch skaliert und komprimiert.</p>
-                  <button
-                    type="button"
-                    onClick={() => setImage(null)}
-                    className="block text-xs text-red-600 hover:text-red-700"
-                  >
-                    Bild entfernen
-                  </button>
+                  {image ? (
+                    <button
+                      type="button"
+                      onClick={() => setImage(null)}
+                      className="text-xs font-medium text-red-600 hover:text-red-700"
+                    >
+                      Bild entfernen
+                    </button>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="grid flex-1 grid-cols-1 gap-4 sm:grid-cols-2">
+                <div>
+                  <label className={labelClass}>Vorname</label>
+                  <input
+                    className={inputClass}
+                    value={firstName}
+                    onChange={(event) => setFirstName(event.target.value)}
+                    placeholder="Vorname"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Nachname</label>
+                  <input
+                    className={inputClass}
+                    value={lastName}
+                    onChange={(event) => setLastName(event.target.value)}
+                    placeholder="Nachname"
+                  />
+                </div>
+                <div className="sm:col-span-2">
+                  <label className={labelClass}>E-Mail</label>
+                  <input
+                    className={`${inputClass} cursor-not-allowed bg-gray-50 text-gray-500`}
+                    value={profileQuery.data?.email ?? ""}
+                    disabled
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Telefon</label>
+                  <input
+                    className={inputClass}
+                    value={phone}
+                    onChange={(event) => setPhone(event.target.value)}
+                    placeholder="Telefon"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Mobil</label>
+                  <input
+                    className={inputClass}
+                    value={mobile}
+                    onChange={(event) => setMobile(event.target.value)}
+                    placeholder="Mobil"
+                  />
+                </div>
+                <div className="sm:col-span-2">
+                  <label className={labelClass}>Strasse und Hausnummer</label>
+                  <input
+                    className={inputClass}
+                    value={street}
+                    onChange={(event) => setStreet(event.target.value)}
+                    placeholder="Strasse und Hausnummer"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>PLZ</label>
+                  <input
+                    className={inputClass}
+                    value={postalCode}
+                    onChange={(event) => setPostalCode(event.target.value)}
+                    placeholder="PLZ"
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>Ort</label>
+                  <input
+                    className={inputClass}
+                    value={city}
+                    onChange={(event) => setCity(event.target.value)}
+                    placeholder="Ort"
+                  />
                 </div>
               </div>
             </div>
-            <div className="md:col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">E-Mail</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-gray-50 text-gray-500"
-                value={profileQuery.data?.email ?? ""}
-                disabled
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Telefon</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-                value={phone}
-                onChange={(event) => setPhone(event.target.value)}
-                placeholder="Telefon"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Mobil</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-                value={mobile}
-                onChange={(event) => setMobile(event.target.value)}
-                placeholder="Mobil"
-              />
-            </div>
-            <div className="md:col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Straße</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-                value={street}
-                onChange={(event) => setStreet(event.target.value)}
-                placeholder="Straße und Hausnummer"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">PLZ</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-                value={postalCode}
-                onChange={(event) => setPostalCode(event.target.value)}
-                placeholder="PLZ"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Ort</label>
-              <input
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-                value={city}
-                onChange={(event) => setCity(event.target.value)}
-                placeholder="Ort"
-              />
-            </div>
-          </div>
+          </SectionCard>
+        ) : null}
 
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => {
-                setStatusMessage(null);
-                setErrorMessage(null);
-                updateMyProfile.mutate({
-                  firstName: firstName.trim(),
-                  lastName: lastName.trim() || null,
-                  phone: phone.trim() || null,
-                  mobile: mobile.trim() || null,
-                  street: street.trim() || null,
-                  postalCode: postalCode.trim() || null,
-                  city: city.trim() || null,
-                  image,
-                });
-              }}
-              disabled={isBusy || !canSaveProfile}
-              className="px-4 py-2 rounded-lg bg-[#0F766E] text-white text-sm font-medium disabled:opacity-50"
-            >
-              Profil speichern
-            </button>
-          </div>
-        </section>
-
-        <section className="bg-white border border-gray-200 rounded-xl p-6 space-y-4">
-          <h2 className="text-lg font-semibold text-[#333333]">Sicherheit</h2>
-          <p className="text-sm text-gray-600">
-            2FA Status:{" "}
-            <strong>{securityQuery.data?.twoFactorEnabled ? "aktiv" : "nicht aktiv"}</strong>
-          </p>
-          {securityQuery.data?.twoFactorRecoveryRequired && (
-            <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-3 py-2">
-              2FA Recovery aktiv: Bitte OTP neu einrichten.
-            </p>
-          )}
-
-          <div className="flex flex-wrap gap-2">
-            <Link
-              href="/sicherheit/2fa-setup"
-              className="inline-flex px-4 py-2 rounded-lg bg-gray-900 text-white text-sm"
-            >
-              2FA verwalten
-            </Link>
-          </div>
-
-          <div className="border-t border-gray-100 pt-4 space-y-2">
-            <h3 className="text-sm font-semibold text-gray-800">Passkeys</h3>
-            <p className="text-sm text-gray-600">
-              Passkeys erlauben die Anmeldung per Gerät (z. B. Windows Hello, Touch ID oder
-              Passwortmanager).
-            </p>
-            <div className="flex flex-col sm:flex-row gap-2">
-              <input
-                type="text"
-                value={newPasskeyName}
-                onChange={(event) => setNewPasskeyName(event.target.value)}
-                placeholder="Name (optional), z. B. Laptop"
-                className="flex-1 border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
-              />
-              <button
-                type="button"
-                onClick={() => void handleAddPasskey()}
-                disabled={isBusy}
-                className="px-4 py-2 rounded-lg bg-gray-900 text-white text-sm disabled:opacity-50"
-              >
-                Passkey hinzufügen
-              </button>
-            </div>
-            <div className="space-y-2">
-              {passkeysQuery.isPending && (
-                <p className="text-xs text-gray-500">Passkeys werden geladen...</p>
-              )}
-              {passkeysQuery.error && (
-                <p className="text-xs text-red-600">
-                  {passkeysQuery.error.message ?? "Passkeys konnten nicht geladen werden."}
-                </p>
-              )}
-              {!passkeysQuery.isPending &&
-                !passkeysQuery.error &&
-                (passkeysQuery.data?.length ?? 0) === 0 && (
-                  <p className="text-xs text-gray-500">Noch keine Passkeys hinterlegt.</p>
-                )}
-              {(passkeysQuery.data ?? []).map((item) => (
-                <div
-                  key={item.id}
-                  className="rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-700"
+        {active === "ernaehrung" ? (
+          <SectionCard
+            title="Rezept- und Mahlzeiten-Praeferenzen"
+            description="Beeinflusst Vorschlaege und automatische Wochenplanung."
+            footer={
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  onClick={saveEatingPreferences}
+                  disabled={updateHealthProfile.isPending}
+                  className={buttonPrimary}
                 >
-                  <p className="font-medium text-gray-800">{item.name || "Unbenannter Passkey"}</p>
-                  <p className="text-gray-500">Erstellt: {new Date(item.createdAt).toLocaleString("de-DE")}</p>
-                </div>
+                  Praeferenzen speichern
+                </button>
+              </div>
+            }
+          >
+            <div>
+              <p className={labelClass}>Ernaehrung</p>
+              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                {dietPreferenceOptions.map((option) => {
+                  const selected = dietPreferences.includes(option.id);
+                  return (
+                    <button
+                      key={option.id}
+                      type="button"
+                      onClick={() => toggleDietPreference(option.id)}
+                      className={`rounded-full px-3 py-2 text-sm font-semibold transition-colors ${
+                        selected
+                          ? "bg-[#0F766E] text-white shadow-sm"
+                          : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                      }`}
+                    >
+                      {option.label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <label className="block">
+                <span className={labelClass}>Mahlzeiten/Tag</span>
+                <input
+                  className={inputClass}
+                  inputMode="numeric"
+                  value={mealsPerDay}
+                  onChange={(event) => setMealsPerDay(event.target.value)}
+                />
+              </label>
+              <label className="block">
+                <span className={labelClass}>Kochvorgaenge/Tag</span>
+                <input
+                  className={inputClass}
+                  inputMode="numeric"
+                  value={cooksPerDay}
+                  onChange={(event) => setCooksPerDay(event.target.value)}
+                />
+              </label>
+              <label className="block">
+                <span className={labelClass}>Mealprep-Tage</span>
+                <input
+                  className={inputClass}
+                  inputMode="numeric"
+                  value={preferredMealPrepDays}
+                  onChange={(event) => setPreferredMealPrepDays(event.target.value)}
+                />
+              </label>
+            </div>
+            <label className="block">
+              <span className={labelClass}>Fleisch / Fisch</span>
+              <select
+                value={meatFishFrequency}
+                onChange={(event) =>
+                  setMeatFishFrequency(
+                    event.target.value as "none" | "once_per_day" | "flexible",
+                  )
+                }
+                className={inputClass}
+              >
+                <option value="none">nie</option>
+                <option value="once_per_day">maximal 1x am Tag</option>
+                <option value="flexible">flexibel</option>
+              </select>
+            </label>
+          </SectionCard>
+        ) : null}
+
+        {active === "ziele" ? (
+          <SectionCard
+            title="Ziele"
+            description="Kalorien, Makros, Wasser, Fasten und Gewicht werden unter /ziele detailliert eingestellt."
+          >
+            <div className="divide-y divide-gray-100">
+              {[
+                {
+                  icon: FireIcon,
+                  label: "Kalorien",
+                  value: `${healthGoals?.calories ?? 2000} kcal`,
+                  color: "text-orange-500",
+                },
+                {
+                  icon: ScaleIcon,
+                  label: "Makros (KH / Fett / Eiweiss)",
+                  value: `${healthGoals?.carbs ?? 200} / ${healthGoals?.fat ?? 67} / ${
+                    healthGoals?.protein ?? 150
+                  } g`,
+                  color: "text-blue-500",
+                },
+                {
+                  icon: ClockIcon,
+                  label: "Fasten",
+                  value: `${healthGoals?.fastingHours ?? 12} h`,
+                  color: "text-rose-500",
+                },
+                {
+                  icon: BeakerIcon,
+                  label: "Wasser",
+                  value: `${healthGoals?.drinkMl ?? 2500} ml`,
+                  color: "text-cyan-500",
+                },
+                {
+                  icon: ScaleIcon,
+                  label: "Gewicht",
+                  value: `${healthGoals?.weightKg ?? 120} kg`,
+                  color: "text-emerald-500",
+                },
+              ].map((item) => (
+                <Link
+                  key={item.label}
+                  href="/ziele"
+                  className="flex w-full items-center gap-4 py-4 text-left transition-colors hover:bg-gray-50"
+                >
+                  <item.icon className={`h-6 w-6 ${item.color}`} />
+                  <span className="flex-1 text-sm font-semibold text-gray-900">
+                    {item.label}
+                  </span>
+                  <span className="text-sm font-semibold text-gray-500">{item.value}</span>
+                  <ChevronRightIcon className="h-4 w-4 text-gray-300" />
+                </Link>
               ))}
             </div>
-          </div>
-
-          <div className="border-t border-gray-100 pt-4 space-y-3">
-            <h3 className="text-sm font-semibold text-gray-800">Passwort zurücksetzen</h3>
-            <div className="relative">
-              <input
-                type={showCurrentPassword ? "text" : "password"}
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 pr-11 text-sm"
-                placeholder="Aktuelles Passwort"
-                value={currentPassword}
-                onChange={(event) => setCurrentPassword(event.target.value)}
-              />
-              <button
-                type="button"
-                onClick={() => setShowCurrentPassword((value) => !value)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                aria-label={showCurrentPassword ? "Passwort verbergen" : "Passwort anzeigen"}
-              >
-                {showCurrentPassword ? (
-                  <EyeSlashIcon className="w-4 h-4" />
-                ) : (
-                  <EyeIcon className="w-4 h-4" />
-                )}
-              </button>
-            </div>
-            <div className="relative">
-              <input
-                type={showNewPassword ? "text" : "password"}
-                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 pr-11 text-sm"
-                placeholder="Neues Passwort (mind. 16 Zeichen)"
-                value={newPassword}
-                onChange={(event) => setNewPassword(event.target.value)}
-              />
-              <button
-                type="button"
-                onClick={() => setShowNewPassword((value) => !value)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                aria-label={showNewPassword ? "Passwort verbergen" : "Passwort anzeigen"}
-              >
-                {showNewPassword ? (
-                  <EyeSlashIcon className="w-4 h-4" />
-                ) : (
-                  <EyeIcon className="w-4 h-4" />
-                )}
-              </button>
-            </div>
-            <div className="relative">
-              <input
-                type={showConfirmPassword ? "text" : "password"}
-                className={`w-full border rounded-lg px-3 py-2.5 pr-11 text-sm ${
-                  passwordMismatch ? "border-red-300" : "border-gray-200"
-                }`}
-                placeholder="Neues Passwort bestätigen"
-                value={confirmNewPassword}
-                onChange={(event) => setConfirmNewPassword(event.target.value)}
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword((value) => !value)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                aria-label={showConfirmPassword ? "Passwort verbergen" : "Passwort anzeigen"}
-              >
-                {showConfirmPassword ? (
-                  <EyeSlashIcon className="w-4 h-4" />
-                ) : (
-                  <EyeIcon className="w-4 h-4" />
-                )}
-              </button>
-            </div>
-            {passwordMismatch && (
-              <p className="text-xs text-red-600">Die neuen Passwörter stimmen nicht überein.</p>
-            )}
-            <button
-              type="button"
-              onClick={() => {
-                const generated = generatePassword(16);
-                setNewPassword(generated);
-                setConfirmNewPassword(generated);
-                setShowNewPassword(true);
-                setShowConfirmPassword(true);
-              }}
-              className="px-3 py-2 rounded-lg bg-gray-100 text-gray-700 text-sm w-fit"
-            >
-              Passwort generieren (16)
-            </button>
-            <button
-              onClick={() => {
-                setStatusMessage(null);
-                setErrorMessage(null);
-                changeMyPassword.mutate({
-                  currentPassword,
-                  newPassword,
-                });
-              }}
-              disabled={
-                isBusy ||
-                !currentPassword ||
-                newPassword.length < 16 ||
-                confirmNewPassword.length < 16 ||
-                passwordMismatch
-              }
-              className="w-full px-4 py-2 rounded-lg bg-[#0F766E] text-white text-sm font-medium disabled:opacity-50"
-            >
-              Passwort aktualisieren
-            </button>
-          </div>
-        </section>
-
-        <section className="lg:col-span-3 bg-white border border-gray-200 rounded-xl p-6 space-y-4">
-          <div>
-            <h2 className="text-lg font-semibold text-[#333333]">Darstellung</h2>
-            <p className="text-sm text-gray-500 mt-1">Erscheinungsbild der Anwendung anpassen.</p>
-          </div>
-          <div className="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 px-4 py-3">
-            <div className="flex items-center gap-3">
-              {isDark ? (
-                <MoonIcon className="h-5 w-5 text-indigo-400" />
-              ) : (
-                <SunIcon className="h-5 w-5 text-amber-500" />
-              )}
-              <div>
-                <p className="text-sm font-medium text-gray-900">Dunkles Design</p>
-                <p className="text-xs text-gray-500">
-                  {isDark ? "Dunkles Design ist aktiv" : "Helles Design ist aktiv"}
-                </p>
+            {isPlatformAdmin ? (
+              <div className="rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 text-sm text-gray-600">
+                Als Admin kannst du die{" "}
+                <Link
+                  href="/einstellungen/punkte"
+                  className="font-semibold text-[#0F766E] underline"
+                >
+                  Punkte-Konfiguration
+                </Link>{" "}
+                global anpassen.
               </div>
-            </div>
-            <button
-              type="button"
-              onClick={toggleDark}
-              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none ${
-                isDark ? "bg-[#0F766E]" : "bg-gray-200"
-              }`}
-              role="switch"
-              aria-checked={isDark}
-              aria-label="Dunkles Design umschalten"
+            ) : null}
+          </SectionCard>
+        ) : null}
+
+        {active === "sicherheit" ? (
+          <div className="space-y-6">
+            <SectionCard
+              title="Zwei-Faktor-Authentifizierung"
+              description="Schuetzt deinen Account zusaetzlich beim Login."
             >
-              <span
-                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ${
-                  isDark ? "translate-x-5" : "translate-x-0"
-                }`}
+              <div className="flex items-start gap-3 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3">
+                <ShieldCheckIcon
+                  className={`h-5 w-5 shrink-0 ${
+                    securityQuery.data?.twoFactorEnabled
+                      ? "text-emerald-500"
+                      : "text-gray-400"
+                  }`}
+                />
+                <div className="flex-1">
+                  <p className="text-sm font-semibold text-gray-900">
+                    Status:{" "}
+                    {securityQuery.data?.twoFactorEnabled ? "aktiv" : "nicht aktiv"}
+                  </p>
+                  {securityQuery.data?.twoFactorRecoveryRequired ? (
+                    <p className="mt-1 text-xs text-amber-700">
+                      Recovery aktiv: Bitte OTP neu einrichten.
+                    </p>
+                  ) : (
+                    <p className="mt-1 text-xs text-gray-500">
+                      Empfohlen, besonders fuer Admin-Accounts.
+                    </p>
+                  )}
+                </div>
+                <Link href="/sicherheit/2fa-setup" className={buttonSecondary}>
+                  2FA verwalten
+                </Link>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title="Passkeys"
+              description="Anmeldung per Geraet (Windows Hello, Touch ID, Passwortmanager)."
+            >
+              <div className="flex flex-col gap-2 sm:flex-row">
+                <input
+                  type="text"
+                  value={newPasskeyName}
+                  onChange={(event) => setNewPasskeyName(event.target.value)}
+                  placeholder="Name (optional), z. B. Laptop"
+                  className={inputClass}
+                />
+                <button
+                  type="button"
+                  onClick={() => void handleAddPasskey()}
+                  disabled={isBusy}
+                  className={buttonPrimary}
+                >
+                  <KeyIcon className="mr-1.5 h-4 w-4" />
+                  Hinzufuegen
+                </button>
+              </div>
+              <div className="space-y-2">
+                {passkeysQuery.isPending ? (
+                  <p className="text-xs text-gray-500">Passkeys werden geladen...</p>
+                ) : null}
+                {passkeysQuery.error ? (
+                  <p className="text-xs text-red-600">
+                    {passkeysQuery.error.message ?? "Passkeys konnten nicht geladen werden."}
+                  </p>
+                ) : null}
+                {!passkeysQuery.isPending &&
+                !passkeysQuery.error &&
+                (passkeysQuery.data?.length ?? 0) === 0 ? (
+                  <p className="text-xs text-gray-500">Noch keine Passkeys hinterlegt.</p>
+                ) : null}
+                {(passkeysQuery.data ?? []).map((item) => (
+                  <div
+                    key={item.id}
+                    className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-700"
+                  >
+                    <p className="font-semibold text-gray-800">
+                      {item.name || "Unbenannter Passkey"}
+                    </p>
+                    <p className="text-gray-500">
+                      Erstellt: {new Date(item.createdAt).toLocaleString("de-DE")}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title="Passwort"
+              description="Mindestens 16 Zeichen, gerne ein Generator."
+              footer={
+                <div className="flex flex-col gap-2 sm:flex-row sm:justify-between">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const generated = generatePassword(16);
+                      setNewPassword(generated);
+                      setConfirmNewPassword(generated);
+                      setShowNewPassword(true);
+                      setShowConfirmPassword(true);
+                    }}
+                    className={buttonSecondary}
+                  >
+                    Sicheres Passwort generieren
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleChangePassword}
+                    disabled={
+                      isBusy ||
+                      !currentPassword ||
+                      newPassword.length < 16 ||
+                      confirmNewPassword.length < 16 ||
+                      passwordMismatch
+                    }
+                    className={buttonPrimary}
+                  >
+                    Passwort aktualisieren
+                  </button>
+                </div>
+              }
+            >
+              <PasswordInput
+                value={currentPassword}
+                onChange={setCurrentPassword}
+                show={showCurrentPassword}
+                onToggle={() => setShowCurrentPassword((value) => !value)}
+                placeholder="Aktuelles Passwort"
               />
-            </button>
+              <PasswordInput
+                value={newPassword}
+                onChange={setNewPassword}
+                show={showNewPassword}
+                onToggle={() => setShowNewPassword((value) => !value)}
+                placeholder="Neues Passwort (mind. 16 Zeichen)"
+              />
+              <PasswordInput
+                value={confirmNewPassword}
+                onChange={setConfirmNewPassword}
+                show={showConfirmPassword}
+                onToggle={() => setShowConfirmPassword((value) => !value)}
+                placeholder="Neues Passwort bestaetigen"
+                invalid={passwordMismatch}
+              />
+              {passwordMismatch ? (
+                <p className="text-xs text-red-600">
+                  Die neuen Passwoerter stimmen nicht ueberein.
+                </p>
+              ) : null}
+            </SectionCard>
           </div>
-        </section>
+        ) : null}
+
+        {active === "anwendung" ? (
+          <div className="space-y-6">
+            <SectionCard
+              title="Erscheinungsbild"
+              description="Hell oder dunkel. Wird pro Browser gespeichert."
+            >
+              <div className="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 px-4 py-3">
+                <div className="flex items-center gap-3">
+                  {isDark ? (
+                    <MoonIcon className="h-5 w-5 text-indigo-400" />
+                  ) : (
+                    <SunIcon className="h-5 w-5 text-amber-500" />
+                  )}
+                  <div>
+                    <p className="text-sm font-semibold text-gray-900">Dunkles Design</p>
+                    <p className="text-xs text-gray-500">
+                      {isDark ? "Dunkles Design ist aktiv" : "Helles Design ist aktiv"}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={toggleDark}
+                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${
+                    isDark ? "bg-[#0F766E]" : "bg-gray-200"
+                  }`}
+                  role="switch"
+                  aria-checked={isDark}
+                  aria-label="Dunkles Design umschalten"
+                >
+                  <span
+                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition ${
+                      isDark ? "translate-x-5" : "translate-x-0.5"
+                    } translate-y-0.5`}
+                  />
+                </button>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title="Erinnerungen"
+              description="Tracking-, Plan- und Wasser-Erinnerungen verwalten."
+            >
+              <Link
+                href="/erinnerungen"
+                className="flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100"
+              >
+                <BellIcon className="h-5 w-5 text-emerald-500" />
+                <div className="flex-1">
+                  <p className="text-sm font-semibold text-gray-900">
+                    Taegliche Erinnerungen einrichten
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    Push, E-Mail und Browser-Notifications.
+                  </p>
+                </div>
+                <ChevronRightIcon className="h-4 w-4 text-gray-300" />
+              </Link>
+            </SectionCard>
+          </div>
+        ) : null}
       </div>
-
-      {profileQuery.isLoading && (
-        <div className="mt-6 text-sm rounded-lg border border-gray-200 bg-white px-4 py-3 text-gray-500">
-          Profil wird geladen...
-        </div>
-      )}
-
-      {(profileQuery.error || securityQuery.error) && (
-        <div className="mt-6 text-sm rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-700">
-          {profileQuery.error?.message ?? securityQuery.error?.message}
-        </div>
-      )}
-
-      {statusMessage && (
-        <div className="mt-6 text-sm rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-green-700">
-          {statusMessage}
-        </div>
-      )}
-
-      {errorMessage && (
-        <div className="mt-6 text-sm rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-700">
-          {errorMessage}
-        </div>
-      )}
     </DataPageLayout>
   );
 }
+
+function PasswordInput({
+  value,
+  onChange,
+  show,
+  onToggle,
+  placeholder,
+  invalid,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  show: boolean;
+  onToggle: () => void;
+  placeholder: string;
+  invalid?: boolean;
+}) {
+  return (
+    <div className="relative">
+      <input
+        type={show ? "text" : "password"}
+        className={`${inputClass} pr-11 ${invalid ? "border-red-300" : ""}`}
+        placeholder={placeholder}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      <button
+        type="button"
+        onClick={onToggle}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+        aria-label={show ? "Passwort verbergen" : "Passwort anzeigen"}
+      >
+        {show ? <EyeSlashIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+}
diff --git a/apps/admin/app/login/page.tsx b/apps/admin/app/login/page.tsx
index 7352c82..7016436 100644
--- a/apps/admin/app/login/page.tsx
+++ b/apps/admin/app/login/page.tsx
@@ -194,79 +194,130 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-[#F9F9F9]">
-      {!otpStepChecked ? (
-            <div className="w-8 h-8 rounded-full border-2 border-[#0F766E] border-t-transparent animate-spin" />
-      ) : (
-      <div className="w-full max-w-sm">
-        <div className="flex flex-col items-center mb-8">
-          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[#0F766E] text-lg font-bold text-white shadow-sm">
-            HH
-          </div>
-          <h1 className="text-xl font-bold text-[#333333]">Hellth Hub</h1>
-          <p className="mt-2 text-sm text-gray-500">Health-Tracking für dein Home-Lab</p>
-        </div>
+    <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-[#F5F9F8] via-[#F9FAFB] to-[#ECFDF5]">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -top-32 -left-32 h-96 w-96 rounded-full bg-[#0F766E]/15 blur-3xl"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-40 -right-32 h-[28rem] w-[28rem] rounded-full bg-emerald-200/40 blur-3xl"
+      />
 
-        <form
-          onSubmit={handleSubmit}
-          className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-4"
-        >
-          {error && (
-            <div className="flex items-center gap-2 text-sm text-red-600 bg-[#ECFDF5] border border-red-100 px-3 py-2.5 rounded-lg">
-              <span className="w-4 h-4 text-[#0F766E] shrink-0">!</span>
-              {error}
+      <div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6">
+        {!otpStepChecked ? (
+          <div className="h-10 w-10 animate-spin rounded-full border-2 border-[#0F766E] border-t-transparent" />
+        ) : (
+          <div className="w-full max-w-sm">
+            <div className="mb-8 flex flex-col items-center text-center">
+              <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#0F766E] to-[#0d9488] text-xl font-bold text-white shadow-lg shadow-[#0F766E]/25 ring-1 ring-white/40">
+                HH
+              </div>
+              <h1 className="text-2xl font-bold tracking-tight text-gray-900">Hellth Hub</h1>
+              <p className="mt-1.5 text-sm text-gray-500">
+                Health-Tracking fuer dein Home-Lab
+              </p>
             </div>
-          )}
 
-          <div>
-            <label className="block text-sm font-medium text-[#333333] mb-1.5">
-              E-Mail
-            </label>
-            <input
-              type="email"
-              required
-              autoComplete="username webauthn"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="admin@example.com"
-              className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-[#333333] placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-[#0F766E] focus:border-transparent transition-shadow"
-            />
+            <div className="rounded-2xl border border-gray-100 bg-white/90 p-6 shadow-xl shadow-gray-900/5 backdrop-blur sm:p-7">
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {error && (
+                  <div
+                    role="alert"
+                    className="flex items-start gap-2 rounded-lg border border-red-100 bg-red-50 px-3 py-2.5 text-sm text-red-700"
+                  >
+                    <span aria-hidden="true" className="mt-0.5 font-bold text-red-500">
+                      !
+                    </span>
+                    <span>{error}</span>
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="login-email" className="mb-1.5 block text-sm font-medium text-gray-700">
+                    E-Mail
+                  </label>
+                  <input
+                    id="login-email"
+                    type="email"
+                    required
+                    autoComplete="username webauthn"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="du@example.com"
+                    className="w-full rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 transition-shadow focus:border-[#0F766E] focus:outline-none focus:ring-2 focus:ring-[#0F766E]/20"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="login-password" className="mb-1.5 block text-sm font-medium text-gray-700">
+                    Passwort
+                  </label>
+                  <input
+                    id="login-password"
+                    type="password"
+                    required
+                    autoComplete="current-password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="••••••••••••"
+                    className="w-full rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 transition-shadow focus:border-[#0F766E] focus:outline-none focus:ring-2 focus:ring-[#0F766E]/20"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="mt-1 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-[#0F766E] py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[#115E59] disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {loading ? (
+                    <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                  ) : null}
+                  {loading ? "Anmelden..." : "Anmelden"}
+                </button>
+
+                <div className="relative pt-1">
+                  <div aria-hidden="true" className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-gray-200" />
+                  </div>
+                  <div className="relative flex justify-center">
+                    <span className="bg-white px-3 text-xs uppercase tracking-wider text-gray-400">
+                      oder
+                    </span>
+                  </div>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={handlePasskeyLogin}
+                  disabled={loading}
+                  className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white py-2.5 text-sm font-semibold text-gray-800 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  <svg
+                    aria-hidden="true"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.8"
+                    className="h-4 w-4 text-[#0F766E]"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M15.75 5.25a3 3 0 11-6 0 3 3 0 016 0zM4.5 19.5l4.5-7.5h6l4.5 7.5"
+                    />
+                  </svg>
+                  Mit Passkey anmelden
+                </button>
+              </form>
+            </div>
+
+            <p className="mt-6 text-center text-xs text-gray-400">
+              Geschuetzt durch 2FA, Passkeys und verschluesselte Verbindungen.
+            </p>
           </div>
-
-          <div>
-            <label className="block text-sm font-medium text-[#333333] mb-1.5">
-              Passwort
-            </label>
-            <input
-              type="password"
-              required
-              autoComplete="current-password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="************"
-              className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-[#333333] placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-[#0F766E] focus:border-transparent transition-shadow"
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2.5 bg-[#0F766E] text-white text-sm font-semibold rounded-lg hover:bg-[#115E59] transition-colors disabled:opacity-50 disabled:cursor-not-allowed mt-2"
-          >
-            {loading ? "Anmelden..." : "Anmelden"}
-          </button>
-
-          <button
-            type="button"
-            onClick={handlePasskeyLogin}
-            disabled={loading}
-            className="w-full py-2.5 bg-white text-[#333333] text-sm font-semibold rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Mit Passkey anmelden
-          </button>
-        </form>
+        )}
       </div>
-      )}
     </div>
   );
 }
diff --git a/apps/admin/next-env.d.ts b/apps/admin/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/apps/admin/next-env.d.ts
+++ b/apps/admin/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/api/src/trpc/health.test.ts b/packages/api/src/trpc/health.test.ts
index 441117a..eee4fef 100644
--- a/packages/api/src/trpc/health.test.ts
+++ b/packages/api/src/trpc/health.test.ts
@@ -589,3 +589,85 @@ test("health.statsSummary uses database logs for weekly and projection data", as
   assert.equal(summary.projection?.trendKgPerWeek, -1.1);
 });
 
+test("health.upsertWeeklyCaloriePlan speichert Tageskalorien pro Nutzer und Datum", async () => {
+  const { db, calls } = createHealthDbMock();
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const result = await caller.health.upsertWeeklyCaloriePlan({
+    date: "2026-05-30",
+    plannedCalories: 1800,
+    note: "Refeed-Tag",
+  });
+
+  assert.deepEqual(result, { ok: true });
+  const values = calls.find((call) => call.op === "insert.values")?.payload as {
+    userId?: string;
+    date?: string;
+    plannedCalories?: number;
+    note?: string | null;
+  };
+  assert.equal(values.userId, "user-health");
+  assert.equal(values.date, "2026-05-30");
+  assert.equal(values.plannedCalories, 1800);
+  assert.equal(values.note, "Refeed-Tag");
+
+  const conflict = calls.find((call) => call.op === "insert.values.result.onConflictDoUpdate")?.payload as {
+    set?: { plannedCalories?: number; note?: string | null };
+  };
+  assert.equal(conflict.set?.plannedCalories, 1800);
+  assert.equal(conflict.set?.note, "Refeed-Tag");
+});
+
+test("health.upsertWeeklyCaloriePlan lehnt unrealistische Kalorienwerte ab", async () => {
+  const caller = appRouter.createCaller(createContext() as never);
+
+  await assert.rejects(
+    () => caller.health.upsertWeeklyCaloriePlan({ date: "2026-05-30", plannedCalories: 500 }),
+    (error: unknown) => {
+      assert.equal((error as { code?: string }).code, "BAD_REQUEST");
+      return true;
+    },
+  );
+  await assert.rejects(
+    () => caller.health.upsertWeeklyCaloriePlan({ date: "2026-05-30", plannedCalories: 9000 }),
+    (error: unknown) => {
+      assert.equal((error as { code?: string }).code, "BAD_REQUEST");
+      return true;
+    },
+  );
+});
+
+test("health.addActivityLog schreibt Hellfireclub-Punkte mit Quelle und Idempotenz", async () => {
+  const { db, calls } = createHealthDbMock();
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  await caller.health.addActivityLog({
+    date: "2026-05-26",
+    name: "30 Minuten Joggen",
+    minutes: 30,
+    points: 45,
+    calories: 280,
+    source: "fitbit",
+    externalId: "fitbit-activity-99",
+  });
+
+  const values = calls.find((call) => call.op === "insert.values")?.payload as {
+    userId?: string;
+    name?: string;
+    points?: number;
+    calories?: number;
+    source?: string;
+    externalId?: string | null;
+  };
+  assert.equal(values.userId, "user-health");
+  assert.equal(values.name, "30 Minuten Joggen");
+  assert.equal(values.points, 45);
+  assert.equal(values.calories, 280);
+  assert.equal(values.source, "fitbit");
+  assert.equal(values.externalId, "fitbit-activity-99");
+  assert.ok(
+    calls.some((call) => call.op === "insert.values.result.onConflictDoNothing"),
+    "Wiederholtes Importieren der gleichen externalId darf nicht doppelt zaehlen",
+  );
+});
+
diff --git a/packages/api/src/trpc/security.test.ts b/packages/api/src/trpc/security.test.ts
new file mode 100644
index 0000000..0791f0a
--- /dev/null
+++ b/packages/api/src/trpc/security.test.ts
@@ -0,0 +1,229 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { appRouter } from "./index";
+import { twoFactorLossReasons } from "../lib/security-audit";
+
+type Call = { op: string; payload?: unknown };
+
+type DbUserRow = {
+  email?: string;
+  role?: string;
+  twoFactorEnabled?: boolean | null;
+  twoFactorRecoveryRequired?: boolean | null;
+} | null;
+
+type TwoFactorRow = { enabled?: boolean | null } | null;
+
+function chain(calls: Call[], op: string, payload?: unknown): any {
+  calls.push({ op, payload });
+  return {
+    set(value: unknown) {
+      calls.push({ op: `${op}.set`, payload: value });
+      return chain(calls, `${op}.set.result`);
+    },
+    where(value?: unknown) {
+      calls.push({ op: `${op}.where`, payload: value });
+      return Promise.resolve([]);
+    },
+  };
+}
+
+function createSecurityDbMock(options: { dbUser?: DbUserRow; twoFactorRow?: TwoFactorRow } = {}) {
+  const calls: Call[] = [];
+  const db = {
+    query: {
+      user: { findFirst: async () => options.dbUser ?? null },
+      twoFactor: { findFirst: async () => options.twoFactorRow ?? null },
+    },
+    update(table: unknown) {
+      return chain(calls, "update", table);
+    },
+  };
+  return { db, calls };
+}
+
+function createContext(overrides: Record<string, unknown> = {}) {
+  const user = { id: "user-1", email: "user@example.org", role: "user" };
+  return {
+    db: {},
+    headers: new Headers(),
+    session: { user },
+    user,
+    userRole: "user",
+    isPlatformAdmin: false,
+    ...overrides,
+  };
+}
+
+function createUnauthedContext() {
+  return {
+    db: {},
+    headers: new Headers(),
+    session: null,
+    user: null,
+    userRole: "user",
+    isPlatformAdmin: false,
+  };
+}
+
+test("twoFactorLossReasons meldet nur Probleme fuer privilegierte Accounts", () => {
+  assert.deepEqual(
+    twoFactorLossReasons({
+      isPrivileged: false,
+      userTwoFactorEnabled: false,
+      twoFactorRowExists: false,
+      twoFactorRowEnabled: false,
+      recoveryRequired: true,
+    }),
+    [],
+    "Normale Nutzer sind nicht zu 2FA verpflichtet",
+  );
+
+  const reasons = twoFactorLossReasons({
+    isPrivileged: true,
+    userTwoFactorEnabled: false,
+    twoFactorRowExists: false,
+    twoFactorRowEnabled: false,
+    recoveryRequired: true,
+  });
+  assert.ok(reasons.includes("user.twoFactorEnabled=false"));
+  assert.ok(reasons.includes("twoFactor row missing"));
+  assert.ok(reasons.includes("twoFactorRecoveryRequired=true"));
+
+  assert.deepEqual(
+    twoFactorLossReasons({
+      isPrivileged: true,
+      userTwoFactorEnabled: true,
+      twoFactorRowExists: true,
+      twoFactorRowEnabled: true,
+      recoveryRequired: false,
+    }),
+    [],
+    "Sauberer Admin-Account hat keine Recovery-Reasons",
+  );
+});
+
+test("twoFactorLossReasons unterscheidet fehlende Row von deaktivierter Row", () => {
+  const missing = twoFactorLossReasons({
+    isPrivileged: true,
+    userTwoFactorEnabled: true,
+    twoFactorRowExists: false,
+    twoFactorRowEnabled: false,
+    recoveryRequired: false,
+  });
+  assert.deepEqual(missing, ["twoFactor row missing"]);
+
+  const disabled = twoFactorLossReasons({
+    isPrivileged: true,
+    userTwoFactorEnabled: true,
+    twoFactorRowExists: true,
+    twoFactorRowEnabled: false,
+    recoveryRequired: false,
+  });
+  assert.deepEqual(disabled, ["twoFactor.enabled=false"]);
+});
+
+test("security.status erfordert Authentifizierung", async () => {
+  const caller = appRouter.createCaller(createUnauthedContext() as never);
+  await assert.rejects(
+    () => caller.security.status(),
+    (error: unknown) => {
+      assert.equal((error as { code?: string }).code, "UNAUTHORIZED");
+      return true;
+    },
+  );
+});
+
+test("security.status meldet sauberen Admin mit aktivem 2FA", async () => {
+  const { db, calls } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "admin",
+      twoFactorEnabled: true,
+      twoFactorRecoveryRequired: false,
+    },
+    twoFactorRow: { enabled: true },
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.deepEqual(status, {
+    isAdminAccount: true,
+    twoFactorEnabled: true,
+    hasTwoFactorSecret: true,
+    twoFactorRecoveryRequired: false,
+    requiresTwoFactorSetup: false,
+  });
+  assert.equal(calls.length, 0, "Keine Recovery-Updates noetig");
+});
+
+test("security.status markiert Admin ohne 2FA-Row als setup-pflichtig", async () => {
+  const { db } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "platform_admin",
+      twoFactorEnabled: false,
+      twoFactorRecoveryRequired: false,
+    },
+    twoFactorRow: null,
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.equal(status.isAdminAccount, true);
+  assert.equal(status.twoFactorEnabled, false);
+  assert.equal(status.hasTwoFactorSecret, false);
+  assert.equal(status.requiresTwoFactorSetup, true);
+});
+
+test("security.status loescht Recovery-Flag automatisch wenn 2FA wieder aktiv", async () => {
+  const { db, calls } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "admin",
+      twoFactorEnabled: true,
+      twoFactorRecoveryRequired: true,
+    },
+    twoFactorRow: { enabled: true },
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.equal(status.twoFactorRecoveryRequired, false, "Flag wird im Response zurueckgesetzt");
+  assert.equal(status.requiresTwoFactorSetup, false);
+  const updateSet = calls.find((call) => call.op === "update.set")?.payload as {
+    twoFactorRecoveryRequired?: boolean;
+    twoFactorRecoveryStartedAt?: Date | null;
+    twoFactorRecoveryStartedBy?: string | null;
+  };
+  assert.equal(updateSet.twoFactorRecoveryRequired, false);
+  assert.equal(updateSet.twoFactorRecoveryStartedAt, null);
+  assert.equal(updateSet.twoFactorRecoveryStartedBy, null);
+});
+
+test("security.status haelt requiresTwoFactorSetup aktiv solange Recovery noch laeuft mit deaktivierter Row", async () => {
+  const { db, calls } = createSecurityDbMock({
+    dbUser: {
+      email: "admin@example.org",
+      role: "admin",
+      twoFactorEnabled: true,
+      twoFactorRecoveryRequired: true,
+    },
+    twoFactorRow: { enabled: false },
+  });
+  const caller = appRouter.createCaller(createContext({ db }) as never);
+
+  const status = await caller.security.status();
+
+  assert.equal(status.twoFactorEnabled, false, "Row.enabled=false -> 2FA gilt als aus");
+  assert.equal(status.twoFactorRecoveryRequired, true);
+  assert.equal(status.requiresTwoFactorSetup, true);
+  assert.equal(
+    calls.some((call) => call.op === "update.set"),
+    false,
+    "Kein Auto-Clear solange 2FA effektiv aus ist",
+  );
+});