Harden audit privacy and admin modals

2026-06-26 20:47:07 +02:00
parent aeade132f9
commit 9393d433fa
17 changed files with 741 additions and 315 deletions
@@ -43,7 +43,7 @@ public sealed record AdminAuditEntryDto(
    string Summary,
    DateTimeOffset CreatedAt,
    string MetadataJson,
-    string CreatedFromIp,
+    string? CreatedFromIp,
    string UserAgent);

 public sealed record AdminAuditEntriesResponse(
@@ -20,8 +20,9 @@ public static class AdminDashboardEndpoints
        return group;
    }

-    private static async Task<IResult> GetDashboard(AwardsDbContext db)
+    private static async Task<IResult> GetDashboard(AwardsDbContext db, HttpContext context)
    {
+        var canViewAuditIp = CanViewAuditIp(context);
        var currentSeason = await db.Seasons.AsNoTracking().FirstOrDefaultAsync(item => item.IsCurrent);
        if (currentSeason is null)
        {
@@ -68,7 +69,7 @@ public static class AdminDashboardEndpoints
                item.Summary,
                item.CreatedAt,
                item.MetadataJson,
-                item.CreatedFromIp,
+                canViewAuditIp ? item.CreatedFromIp : null,
                item.UserAgent))
            .ToArrayAsync();

@@ -101,10 +102,12 @@ public static class AdminDashboardEndpoints
        DateTimeOffset? from,
        DateTimeOffset? to,
        string? cursor,
-        AwardsDbContext db)
+        AwardsDbContext db,
+        HttpContext context)
    {
        var normalizedLimit = Math.Clamp(limit ?? 100, 1, 500);
        var search = query?.Trim();
+        var canViewAuditIp = CanViewAuditIp(context);
        var auditQuery = db.AdminAuditEntries.AsNoTracking();

        if (!TryDecodeAuditCursor(cursor, out var decodedCursor))
@@ -122,8 +125,8 @@ public static class AdminDashboardEndpoints
                EF.Functions.ILike(item.EntityId, pattern) ||
                EF.Functions.ILike(item.Summary, pattern) ||
                EF.Functions.ILike(item.MetadataJson, pattern) ||
-                EF.Functions.ILike(item.CreatedFromIp, pattern) ||
-                EF.Functions.ILike(item.UserAgent, pattern));
+                EF.Functions.ILike(item.UserAgent, pattern) ||
+                (canViewAuditIp && EF.Functions.ILike(item.CreatedFromIp, pattern)));
        }

        if (!string.IsNullOrWhiteSpace(admin))
@@ -176,7 +179,7 @@ public static class AdminDashboardEndpoints
                item.Summary,
                item.CreatedAt,
                item.MetadataJson,
-                item.CreatedFromIp,
+                canViewAuditIp ? item.CreatedFromIp : null,
                item.UserAgent))
            .ToArrayAsync();

@@ -197,6 +200,9 @@ public static class AdminDashboardEndpoints
    private static string EncodeAuditCursor(AdminAuditEntryDto entry) =>
        $"{entry.CreatedAt.UtcTicks}:{entry.Id}";

+    private static bool CanViewAuditIp(HttpContext context) =>
+        AdminRoles.IsPrivilegedFullControlRole(context.GetCurrentSession()?.Role);
+
    private static bool TryDecodeAuditCursor(string? cursor, out AuditCursor? decodedCursor)
    {
        decodedCursor = null;
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { LogOut, Shield, Trash2, Unlink, X } from '@lucide/vue'

 import type { AuthSession } from '../types/awards'

@@ -30,6 +31,7 @@ defineEmits<{
 const isTeamPasswordSession = computed(() => Boolean(props.session?.teamLogin && props.session.twitchUserId.startsWith('team:')))
 const isTwitchAuthenticated = computed(() => Boolean(props.session && !isTeamPasswordSession.value))
 const profileHandle = computed(() => props.session?.teamLogin ?? props.session?.twitchUserId ?? '')
+const displayInitial = computed(() => (props.session?.displayName ?? profileHandle.value).charAt(0).toUpperCase())
 const role = computed(() => props.session?.role ?? 'viewer')
 const isTeamSession = computed(() => Boolean(props.session?.teamLogin))
 const isParticipantSession = computed(() => !isTeamSession.value)
@@ -52,220 +54,269 @@ const logoutLabel = computed(() => !isTeamSession.value && isTwitchAuthenticated
 </script>

 <template>
+  <!-- ── Account Modal ─────────────────────────────────────── -->
  <Teleport to="body">
-    <div
-      v-if="accountOpen"
-      style="position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
-      @click.self="$emit('close-account')"
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
    >
-      <div style="position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);overflow:hidden;">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid #f1ecfb;">
-          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Mein Profil</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;margin:0;color:#3f3556;">@{{ profileHandle }}</h2>
-          </div>
-          <button
-            style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;"
-            @click="$emit('close-account')"
-          >
-            ✕
-          </button>
-        </div>
-        <div style="padding:24px 28px;display:flex;flex-direction:column;gap:16px;">
-          <div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px;padding:14px 16px;border-radius:16px;background:#f6f1fd;border:1px solid #ede4fb;">
-            <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M15 7a4 4 0 1 1-2.8-3.82" />
-              <path d="M13 5 21 13" />
-              <path d="M21 13 18 16" />
-              <path d="M18 13 16 15" />
-            </svg>
-            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="#9146FF" aria-hidden="true">
-              <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z" />
-              <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z" />
-            </svg>
-            <span style="font-size:14px;color:#5f44ad;font-weight:800;">{{ authStatusLabel }}</span>
-            <span style="grid-column:2;font-size:12.5px;color:#6f6685;line-height:1.45;">{{ authStatusText }}</span>
-          </div>
-          <div style="padding:16px;border-radius:14px;background:#fafafa;border:1px solid #f0eafc;">
-            <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a99fc0;margin:0 0 10px;">Gespeicherte Daten</p>
-            <div style="display:flex;flex-direction:column;gap:7px;">
-              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">{{ primaryIdentityLabel }}</span>
-                <span style="font-weight:600;color:#3f3556;">@{{ profileHandle }}</span>
-              </div>
-              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Rolle</span>
-                <span style="font-weight:700;color:#8b6cdb;text-transform:uppercase;font-size:11px;letter-spacing:1px;">{{ role }}</span>
-              </div>
-              <div v-if="showTeamLoginDetail" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Team-Login</span>
-                <span style="font-weight:600;color:#3f3556;">@{{ session?.teamLogin }}</span>
-              </div>
-              <div v-if="session?.boundTwitchUserId" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Gebundenes Twitch</span>
-                <span style="font-weight:600;color:#3f3556;">@{{ session.boundTwitchUserId }}</span>
-              </div>
-              <div v-if="isParticipantSession" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Einreichungen</span>
-                <span style="font-weight:600;color:#3f3556;">Clips, Votes, Nominierungen</span>
-              </div>
-              <div v-if="isParticipantSession" style="display:flex;justify-content:space-between;font-size:13.5px;">
-                <span style="color:#6f6685;">Löschfrist</span>
-                <span style="font-weight:600;color:#059669;">März 2027 (auto.)</span>
-              </div>
-              <div v-else style="display:flex;justify-content:space-between;gap:16px;font-size:13.5px;">
-                <span style="color:#6f6685;">Accountverwaltung</span>
-                <span style="font-weight:600;color:#3f3556;text-align:right;">Team-Accounts bleiben bestehen und werden im Admin-Panel verwaltet.</span>
+      <div
+        v-if="accountOpen"
+        class="fixed inset-0 z-[300] flex items-end justify-center p-4 sm:items-center sm:p-6"
+        style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+        @click.self="$emit('close-account')"
+      >
+        <Transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="opacity-0 translate-y-4 scale-[0.97] sm:translate-y-0"
+          enter-to-class="opacity-100 translate-y-0 scale-100"
+        >
+          <div class="w-full max-w-[480px] overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.38)]">
+
+            <!-- Header -->
+            <div class="flex items-center justify-between gap-4 border-b border-[#f1ecfb] bg-gradient-to-br from-[#f7f2ff] to-[#fff7ed] px-7 py-5">
+              <div class="flex items-center gap-3.5 min-w-0">
+                <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-gradient-to-br from-[#8b6cdb] to-[#7355c8] text-base font-bold text-white shadow-[0_6px_18px_rgba(124,86,196,0.3)]">
+                  {{ displayInitial }}
+                </div>
+                <div class="min-w-0">
+                  <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Mein Profil</p>
+                  <h2 class="truncate font-['Cormorant_Garamond'] text-2xl font-bold leading-tight text-[#3f3556]">
+                    @{{ profileHandle }}
+                  </h2>
+                </div>
              </div>
+              <button
+                type="button"
+                class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+                aria-label="Profil schließen"
+                @click="$emit('close-account')"
+              >
+                <X class="h-4 w-4" />
+              </button>
            </div>
-          </div>
-          <section
-            v-if="isTeamSession"
-            style="padding:16px;border-radius:14px;background:#f8f5ff;border:1px solid #ede4fb;display:grid;gap:12px;"
-          >
-            <div>
-              <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#8b6cdb;margin:0 0 4px;">Optionaler Admin-Login</p>
-              <p v-if="hasBoundTwitch" style="font-size:12.5px;color:#6f6685;margin:0;line-height:1.45;">
-                Dein Team-Account ist mit Twitch verbunden. Entfernst du die Verknüpfung, ist der Admin-Login per Twitch nicht mehr möglich.
-              </p>
-              <p v-else style="font-size:12.5px;color:#6f6685;margin:0;line-height:1.45;">
-                Verbinde deinen privaten Twitch-Account über den offiziellen Twitch Login. Danach kannst du dich im Admin-Panel per Twitch anmelden.
-              </p>
-            </div>
-            <div v-if="session?.boundTwitchUserId" style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:12px;background:white;border:1px solid #ede4fb;font-size:13px;">
-              <span style="color:#6f6685;">Aktuell verbunden</span>
-              <span style="font-weight:800;color:#3f3556;">@{{ session.boundTwitchUserId }}</span>
-            </div>
-            <p v-if="session?.mustChangePassword" style="font-size:12.5px;color:#b45309;margin:0;font-weight:700;">Bitte ändere zuerst dein temporäres Passwort.</p>
-            <p v-if="accountActionError" style="font-size:12.5px;color:#be123c;margin:0;font-weight:700;">{{ accountActionError }}</p>
-            <p v-if="accountActionSuccess" style="font-size:12.5px;color:#047857;margin:0;font-weight:700;">{{ accountActionSuccess }}</p>
-            <button
-              v-if="!hasBoundTwitch"
-              :disabled="authLoading || !canBindTwitch"
-              type="button"
-              style="display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:none;background:#6f4fd1;color:white;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:800;cursor:pointer;disabled:opacity:.6;"
-              @click="$emit('bind-team-twitch')"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z" />
-                <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z" />
-              </svg>
-              {{ authLoading ? 'Twitch wird geöffnet...' : 'Mit Twitch verbinden' }}
-            </button>
-            <button
-              v-else
-              :disabled="authLoading"
-              type="button"
-              style="display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:800;cursor:pointer;disabled:opacity:.6;"
-              @click="$emit('disconnect-team-twitch')"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <path d="M18 6 6 18" />
-                <path d="m6 6 12 12" />
-              </svg>
-              {{ authLoading ? 'Entknüpft...' : 'Twitch entknüpfen' }}
-            </button>
-          </section>
-          <button
-            style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #ede4fb;background:#f9f6ff;color:#6a4fb8;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
-            @click="$emit('open-privacy')"
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-            </svg>
-            Datenschutzerklärung lesen
-          </button>
-          <button
-            style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
-            @click="$emit('logout')"
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-              <polyline points="16 17 21 12 16 7" />
-              <line x1="21" y1="12" x2="9" y2="12" />
-            </svg>
-            {{ logoutLabel }}
-          </button>
-          <template v-if="isParticipantSession && !deleteConfirm">
-            <button
-              style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
-              @click="$emit('request-delete')"
-            >
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="3 6 5 6 21 6" />
-                <path d="M19 6l-1 14H6L5 6" />
-                <path d="M10 11v6M14 11v6" />
-              </svg>
-              Meine Daten löschen (Löschrecht Art. 17 DSGVO)
-            </button>
-          </template>
-          <template v-else-if="isParticipantSession">
-            <div style="padding:16px;border-radius:14px;background:#fff5f5;border:1.5px solid #fecdd3;">
-              <p style="font-size:13.5px;color:#9f1239;font-weight:600;margin:0 0 6px;">Alle deine Daten werden sofort gelöscht.</p>
-              <p style="font-size:12.5px;color:#e11d48;margin:0 0 14px;line-height:1.5;">Das umfasst deine Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
-              <p v-if="accountActionError" style="font-size:12.5px;color:#be123c;margin:0 0 12px;line-height:1.5;font-weight:600;">{{ accountActionError }}</p>
-              <div style="display:flex;gap:8px;">
-                <button :disabled="authLoading" style="flex:1;padding:10px;border-radius:10px;border:1px solid #e6dcf6;background:white;color:#6f6685;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;cursor:pointer;" @click="$emit('cancel-delete')">Abbrechen</button>
-                <button :disabled="authLoading" style="flex:1;padding:10px;border-radius:10px;border:none;background:#e11d48;color:white;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;cursor:pointer;" @click="$emit('confirm-delete')">
-                  {{ authLoading ? 'Löscht …' : 'Jetzt löschen' }}
+
+            <!-- Scrollable body -->
+            <div class="max-h-[72vh] overflow-y-auto">
+              <div class="space-y-3 p-6">
+
+                <!-- Auth status -->
+                <div class="grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-2xl border border-[#ede4fb] bg-[#f6f1fd] px-4 py-3.5">
+                  <div class="mt-0.5 shrink-0">
+                    <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M15 7a4 4 0 1 1-2.8-3.82"/><path d="M13 5 21 13"/><path d="M21 13 18 16"/><path d="M18 13 16 15"/>
+                    </svg>
+                    <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="#9146FF" aria-hidden="true">
+                      <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                      <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+                    </svg>
+                  </div>
+                  <span class="text-sm font-extrabold text-[#5f44ad]">{{ authStatusLabel }}</span>
+                  <span class="col-start-2 text-xs leading-relaxed text-[#6f6685]">{{ authStatusText }}</span>
+                </div>
+
+                <!-- Saved data -->
+                <div class="rounded-2xl border border-[#ede4fb] bg-[#fafafa] px-4 py-3.5">
+                  <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#a99fc0]">Gespeicherte Daten</p>
+                  <div class="space-y-2">
+                    <div class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">{{ primaryIdentityLabel }}</span>
+                      <span class="font-semibold text-[#3f3556]">@{{ profileHandle }}</span>
+                    </div>
+                    <div class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">Rolle</span>
+                      <span class="text-[10px] font-bold uppercase tracking-[0.1em] text-[#8b6cdb]">{{ role }}</span>
+                    </div>
+                    <div v-if="showTeamLoginDetail" class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">Team-Login</span>
+                      <span class="font-semibold text-[#3f3556]">@{{ session?.teamLogin }}</span>
+                    </div>
+                    <div v-if="session?.boundTwitchUserId" class="flex items-center justify-between text-sm">
+                      <span class="text-[#6f6685]">Gebundenes Twitch</span>
+                      <span class="font-semibold text-[#3f3556]">@{{ session.boundTwitchUserId }}</span>
+                    </div>
+                    <template v-if="isParticipantSession">
+                      <div class="flex items-center justify-between text-sm">
+                        <span class="text-[#6f6685]">Einreichungen</span>
+                        <span class="font-semibold text-[#3f3556]">Clips, Votes, Nominierungen</span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="flex items-start justify-between gap-4 text-sm">
+                        <span class="shrink-0 text-[#6f6685]">Accountverwaltung</span>
+                        <span class="text-right font-semibold text-[#3f3556]">Team-Accounts werden im Admin-Panel verwaltet.</span>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+
+                <!-- Team Twitch binding -->
+                <section v-if="isTeamSession" class="rounded-2xl border border-[#ede4fb] bg-[#f8f5ff] p-4">
+                  <p class="text-[11px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Optionaler Admin-Login</p>
+                  <p v-if="hasBoundTwitch" class="mt-1.5 text-xs leading-relaxed text-[#6f6685]">
+                    Dein Team-Account ist mit Twitch verbunden. Entfernst du die Verknüpfung, ist der Admin-Login per Twitch nicht mehr möglich.
+                  </p>
+                  <p v-else class="mt-1.5 text-xs leading-relaxed text-[#6f6685]">
+                    Verbinde deinen privaten Twitch-Account. Danach kannst du dich im Admin-Panel per Twitch anmelden.
+                  </p>
+                  <div v-if="session?.boundTwitchUserId" class="mt-3 flex items-center justify-between rounded-xl border border-[#ede4fb] bg-white px-3.5 py-2.5 text-sm">
+                    <span class="text-[#6f6685]">Aktuell verbunden</span>
+                    <span class="font-extrabold text-[#3f3556]">@{{ session.boundTwitchUserId }}</span>
+                  </div>
+                  <p v-if="session?.mustChangePassword" class="mt-2 text-xs font-bold text-amber-600">Bitte ändere zuerst dein temporäres Passwort.</p>
+                  <p v-if="accountActionError" class="mt-2 text-xs font-bold text-rose-600">{{ accountActionError }}</p>
+                  <p v-if="accountActionSuccess" class="mt-2 text-xs font-bold text-emerald-600">{{ accountActionSuccess }}</p>
+                  <button
+                    v-if="!hasBoundTwitch"
+                    :disabled="authLoading || !canBindTwitch"
+                    type="button"
+                    class="mt-3 flex w-full items-center justify-center gap-2 rounded-xl bg-[#6f4fd1] px-4 py-2.5 text-sm font-extrabold text-white transition hover:bg-[#5f44ad] disabled:opacity-50"
+                    @click="$emit('bind-team-twitch')"
+                  >
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                      <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                      <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+                    </svg>
+                    {{ authLoading ? 'Twitch wird geöffnet …' : 'Mit Twitch verbinden' }}
+                  </button>
+                  <button
+                    v-else
+                    :disabled="authLoading"
+                    type="button"
+                    class="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm font-extrabold text-rose-600 transition hover:bg-rose-100 disabled:opacity-50"
+                    @click="$emit('disconnect-team-twitch')"
+                  >
+                    <Unlink class="h-4 w-4" />
+                    {{ authLoading ? 'Entknüpft …' : 'Twitch entknüpfen' }}
+                  </button>
+                </section>
+
+                <!-- Privacy -->
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-3 rounded-xl border border-[#ede4fb] bg-[#f9f6ff] px-4 py-3 text-left text-sm font-semibold text-[#6a4fb8] transition hover:bg-[#f1ecfb]"
+                  @click="$emit('open-privacy')"
+                >
+                  <Shield class="h-4 w-4 shrink-0" />
+                  Datenschutzerklärung lesen
                </button>
+
+                <!-- Logout -->
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left text-sm font-semibold text-slate-500 transition hover:bg-slate-100"
+                  @click="$emit('logout')"
+                >
+                  <LogOut class="h-4 w-4 shrink-0" />
+                  {{ logoutLabel }}
+                </button>
+
+                <!-- Delete request -->
+                <template v-if="isParticipantSession && !deleteConfirm">
+                  <button
+                    type="button"
+                    class="flex w-full items-center gap-3 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-left text-sm font-semibold text-rose-600 transition hover:bg-rose-100"
+                    @click="$emit('request-delete')"
+                  >
+                    <Trash2 class="h-4 w-4 shrink-0" />
+                    Meine Daten löschen (Löschrecht Art. 17 DSGVO)
+                  </button>
+                </template>
+
+                <!-- Delete confirmation -->
+                <template v-else-if="isParticipantSession">
+                  <div class="rounded-2xl border-[1.5px] border-rose-200 bg-rose-50 p-4">
+                    <p class="text-sm font-semibold text-rose-800">Alle deine Daten werden sofort gelöscht.</p>
+                    <p class="mt-1 text-xs leading-relaxed text-rose-600">Das umfasst Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
+                    <p v-if="accountActionError" class="mt-2 text-xs font-bold text-rose-700">{{ accountActionError }}</p>
+                    <div class="mt-4 flex gap-2">
+                      <button
+                        :disabled="authLoading"
+                        type="button"
+                        class="flex-1 rounded-xl border border-[#e6dcf6] bg-white py-2.5 text-sm font-semibold text-[#6f6685] transition hover:bg-[#f9f6ff] disabled:opacity-50"
+                        @click="$emit('cancel-delete')"
+                      >Abbrechen</button>
+                      <button
+                        :disabled="authLoading"
+                        type="button"
+                        class="flex-1 rounded-xl bg-rose-600 py-2.5 text-sm font-bold text-white transition hover:bg-rose-700 disabled:opacity-50"
+                        @click="$emit('confirm-delete')"
+                      >{{ authLoading ? 'Löscht …' : 'Jetzt löschen' }}</button>
+                    </div>
+                  </div>
+                </template>
+
              </div>
            </div>
-          </template>
-        </div>
+          </div>
+        </Transition>
      </div>
-    </div>
+    </Transition>
  </Teleport>

+  <!-- ── Privacy Modal ─────────────────────────────────────── -->
  <Teleport to="body">
-    <div
-      v-if="privacyOpen"
-      style="position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
-      @click.self="$emit('close-privacy')"
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
    >
-      <div style="position:relative;width:100%;max-width:680px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
-          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Rechtliches</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">Datenschutzerklärung</h2>
-          </div>
-          <button style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" @click="$emit('close-privacy')">✕</button>
-        </div>
-        <div style="overflow-y:auto;padding:28px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.65;color:#6f6685;">
-          <template v-if="privacyContentHtml">
-            <div class="app-shell-privacy-content" v-html="privacyContentHtml" />
-          </template>
-          <template v-else>
-            <div style="background:#f9f6ff;border:1px solid #ede4fb;border-radius:14px;padding:16px;">
-              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Datenschutztext wird geladen</h3>
-              <p style="margin:0;">Die Datenschutzerklärung wird aus der Landingpage-Konfiguration geladen.</p>
+      <div
+        v-if="privacyOpen"
+        class="fixed inset-0 z-[400] flex items-center justify-center p-6"
+        style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+        @click.self="$emit('close-privacy')"
+      >
+        <div class="flex max-h-[88vh] w-full max-w-[680px] flex-col overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.4)]">
+          <div class="flex shrink-0 items-center justify-between gap-4 border-b border-[#f1ecfb] px-8 py-5">
+            <div>
+              <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Rechtliches</p>
+              <h2 class="font-['Cormorant_Garamond'] text-2xl font-bold text-[#3f3556]">Datenschutzerklärung</h2>
            </div>
-          </template>
-          <p v-if="privacyEmail" style="font-size:12px;color:#a99fc0;margin:18px 0 0;">Kontakt: {{ privacyEmail }}</p>
+            <button
+              type="button"
+              class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+              aria-label="Datenschutz schließen"
+              @click="$emit('close-privacy')"
+            >
+              <X class="h-4 w-4" />
+            </button>
+          </div>
+          <div class="flex-1 overflow-y-auto px-8 py-7 text-sm leading-relaxed text-[#6f6685]">
+            <div v-if="privacyContentHtml" class="privacy-content" v-html="privacyContentHtml" />
+            <div v-else class="rounded-2xl border border-[#f1ecfb] bg-[#fcfbff] px-4 py-3 text-sm">
+              Datenschutzerklärung wird geladen.
+            </div>
+            <p v-if="privacyEmail" class="mt-5 text-xs text-[#a99fc0]">Kontakt: {{ privacyEmail }}</p>
+          </div>
        </div>
      </div>
-    </div>
+    </Transition>
  </Teleport>
 </template>

 <style scoped>
-.app-shell-privacy-content :deep(p) {
+.privacy-content :deep(p) {
  margin: 0 0 14px;
 }
-
-.app-shell-privacy-content :deep(p:last-child),
-.app-shell-privacy-content :deep(ul:last-child),
-.app-shell-privacy-content :deep(ol:last-child) {
+.privacy-content :deep(p:last-child),
+.privacy-content :deep(ul:last-child),
+.privacy-content :deep(ol:last-child) {
  margin-bottom: 0;
 }
-
-.app-shell-privacy-content :deep(ul),
-.app-shell-privacy-content :deep(ol) {
+.privacy-content :deep(ul),
+.privacy-content :deep(ol) {
  margin: 0 0 14px 20px;
  padding-left: 16px;
 }
-
-.app-shell-privacy-content :deep(li) {
+.privacy-content :deep(li) {
  margin: 3px 0;
 }
 </style>
@@ -128,9 +128,10 @@
 </template>

 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 import { Braces, ExternalLink, GitCompareArrows, ListTree, ShieldCheck, X } from '@lucide/vue'

+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import type { AuditLogRow } from './useAdminAuditManager'

 const props = defineProps<{
@@ -145,18 +146,10 @@ function closeOnEscape(event: KeyboardEvent) {
  if (event.key === 'Escape' && props.entry) emit('close')
 }

-watch(
-  () => props.entry,
-  (entry) => {
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = entry ? 'hidden' : ''
-    }
-  },
-)
+useBodyScrollLock(() => Boolean(props.entry))

 onMounted(() => window.addEventListener('keydown', closeOnEscape))
 onBeforeUnmount(() => {
  window.removeEventListener('keydown', closeOnEscape)
-  if (typeof document !== 'undefined') document.body.style.overflow = ''
 })
 </script>
@@ -46,6 +46,7 @@
 import { X } from '@lucide/vue'
 import { computed } from 'vue'

+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import type { FaqFormItem } from './adminContentTypes'

 const props = defineProps<{
@@ -53,6 +54,8 @@ const props = defineProps<{
  faq: FaqFormItem[]
 }>()

+useBodyScrollLock(() => props.open)
+
 defineEmits<{
  close: []
 }>()
@@ -39,13 +39,17 @@
 <script setup lang="ts">
 import { X } from '@lucide/vue'

-defineProps<{
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
+
+const props = defineProps<{
  open: boolean
  title: string
  url: string
  contentHtml: string
 }>()

+useBodyScrollLock(() => props.open)
+
 defineEmits<{
  close: []
 }>()
@@ -39,12 +39,16 @@
 <script setup lang="ts">
 import { X } from '@lucide/vue'

-defineProps<{
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
+
+const props = defineProps<{
  open: boolean
  contentHtml: string
  updatedLabel: string
 }>()

+useBodyScrollLock(() => props.open)
+
 defineEmits<{
  close: []
 }>()
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 import { Sparkles, X } from '@lucide/vue'

 import AdminReviewDecisionPanel from './AdminReviewDecisionPanel.vue'
@@ -7,6 +7,7 @@ import AdminReviewsHistorySection from './AdminReviewsHistorySection.vue'
 import AdminReviewsQueueHeader from './AdminReviewsQueueHeader.vue'
 import AdminReviewsQueueList from './AdminReviewsQueueList.vue'
 import { useAdminReviewsManager } from './useAdminReviewsManager'
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import { watchAdminToast } from '../../composables/useAdminToast'

 const props = defineProps<{
@@ -55,20 +56,11 @@ function onKey(event: KeyboardEvent) {
  }
 }

-watch(
-  () => props.open,
-  (open) => {
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = open ? 'hidden' : ''
-    }
-  },
-  { immediate: true },
-)
+useBodyScrollLock(() => props.open)

 onMounted(() => window.addEventListener('keydown', onKey))
 onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKey)
-  if (typeof document !== 'undefined') document.body.style.overflow = ''
 })
 </script>

@@ -1,6 +1,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'

 import { useAwardsStore } from '../../stores/awards'
+import { useAuthStore } from '../../stores/auth'
 import type { AdminAuditEntry, AdminAuditQueryOptions } from '../../types/awards'

 const auditPageLimit = 80
@@ -294,9 +295,9 @@ function getDateBoundary(value: string, isEndOfDay: boolean) {
  return Number.isNaN(date.getTime()) ? undefined : date.toISOString()
 }

-function buildRequestContextItems(entry: AdminAuditEntry) {
+function buildRequestContextItems(entry: AdminAuditEntry, canViewAuditIp: boolean) {
  return [
-    { key: 'IP', value: entry.createdFromIp || 'nicht erfasst' },
+    ...(canViewAuditIp ? [{ key: 'IP', value: entry.createdFromIp || 'nicht erfasst' }] : []),
    { key: 'User-Agent', value: entry.userAgent || 'nicht erfasst' },
  ]
 }
@@ -312,7 +313,7 @@ function buildRelatedLink(entry: AdminAuditEntry) {
  return route
 }

-function createAuditRow(entry: AdminAuditEntry): AuditLogRow {
+function createAuditRow(entry: AdminAuditEntry, canViewAuditIp: boolean): AuditLogRow {
  return {
    ...entry,
    actionLabel: humanizeAction(entry.actionType),
@@ -324,13 +325,13 @@ function createAuditRow(entry: AdminAuditEntry): AuditLogRow {
    ageLabel: formatAge(entry.createdAt),
    metadataItems: parseMetadata(entry.metadataJson),
    changeItems: parseChangeItems(entry.metadataJson),
-    requestContextItems: buildRequestContextItems(entry),
+    requestContextItems: buildRequestContextItems(entry, canViewAuditIp),
    relatedLink: buildRelatedLink(entry),
    rawMetadataJson: entry.metadataJson || '{}',
  }
 }

-function downloadCsv(entries: AdminAuditEntry[]) {
+function downloadCsv(entries: AdminAuditEntry[], canViewAuditIp: boolean) {
  const rows = [
    [
      'Id',
@@ -340,7 +341,7 @@ function downloadCsv(entries: AdminAuditEntry[]) {
      'Objekt-Id',
      'Zusammenfassung',
      'Zeitpunkt',
-      'IP',
+      ...(canViewAuditIp ? ['IP'] : []),
      'User-Agent',
      'Metadaten',
    ],
@@ -352,7 +353,7 @@ function downloadCsv(entries: AdminAuditEntry[]) {
      entry.entityId,
      entry.summary,
      new Date(entry.createdAt).toISOString(),
-      entry.createdFromIp,
+      ...(canViewAuditIp ? [entry.createdFromIp ?? ''] : []),
      entry.userAgent,
      entry.metadataJson,
    ]),
@@ -372,6 +373,7 @@ function downloadCsv(entries: AdminAuditEntry[]) {

 export function useAdminAuditManager() {
  const store = useAwardsStore()
+  const authStore = useAuthStore()
  const query = ref('')
  const selectedAdmin = ref(allFilter)
  const selectedAction = ref(allFilter)
@@ -405,9 +407,10 @@ export function useAdminAuditManager() {
      label: entityOptions.find((option) => option.value === item.key)?.label ?? item.key,
    })),
  )
-  const auditRows = computed<AuditLogRow[]>(() => auditEntries.value.map(createAuditRow))
+  const canViewAuditIp = computed(() => authStore.isOwnerOrCreator)
+  const auditRows = computed<AuditLogRow[]>(() => auditEntries.value.map((entry) => createAuditRow(entry, canViewAuditIp.value)))
  const metadataCount = computed(() => auditEntries.value.filter((entry) => parseMetadata(entry.metadataJson).length > 0).length)
-  const requestContextCount = computed(() => auditEntries.value.filter((entry) => entry.createdFromIp || entry.userAgent).length)
+  const requestContextCount = computed(() => auditEntries.value.filter((entry) => entry.userAgent || (canViewAuditIp.value && entry.createdFromIp)).length)
  const recentDayCount = computed(() => {
    const minTimestamp = Date.now() - 24 * 60 * 60 * 1000
    return auditEntries.value.filter((entry) => new Date(entry.createdAt).getTime() >= minTimestamp).length
@@ -419,7 +422,7 @@ export function useAdminAuditManager() {
    { label: 'Geladen', value: loadedCountLabel.value, note: `Page ${auditPageLimit}` },
    { label: 'Treffer', value: totalCountLabel.value, note: 'serverseitig gefiltert' },
    { label: '24h', value: recentDayCount.value.toLocaleString('de-DE'), note: 'neue Aktionen' },
-    { label: 'Kontext', value: requestContextCount.value.toLocaleString('de-DE'), note: 'mit IP oder User-Agent' },
+    { label: 'Kontext', value: requestContextCount.value.toLocaleString('de-DE'), note: canViewAuditIp.value ? 'mit IP oder User-Agent' : 'mit User-Agent' },
  ])
  const focusCards = computed<AuditFocusCard[]>(() => {
    const topAdmin = adminCounts.value[0]
@@ -532,7 +535,7 @@ export function useAdminAuditManager() {

  function exportAuditCsv() {
    if (auditEntries.value.length === 0) return
-    downloadCsv(auditEntries.value)
+    downloadCsv(auditEntries.value, canViewAuditIp.value)
    exportMessage.value = `CSV mit ${auditEntries.value.length.toLocaleString('de-DE')} geladenen Einträgen erstellt.`
    if (exportMessageTimer) window.clearTimeout(exportMessageTimer)
    exportMessageTimer = window.setTimeout(() => {
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { LogOut, Shield, Trash2, X } from '@lucide/vue'

 import type { AuthSession } from '../../types/awards'

@@ -29,13 +30,14 @@ const isTeamPasswordSession = computed(() => Boolean(props.session?.teamLogin &&
 const isTeamSession = computed(() => Boolean(props.session?.teamLogin))
 const isParticipantSession = computed(() => !isTeamSession.value)
 const profileHandle = computed(() => props.session?.teamLogin ?? props.session?.twitchUserId ?? props.twitchUser)
+const displayInitial = computed(() => (props.session?.displayName ?? profileHandle.value).charAt(0).toUpperCase())
 const showTeamLoginDetail = computed(() => Boolean(props.session?.teamLogin && !isTeamSession.value))
-const statusLabel = computed(() => {
+const authStatusLabel = computed(() => {
  if (isTeamPasswordSession.value) return 'Angemeldet mit Team-Login'
  if (isTeamSession.value) return 'Admin-Login über Twitch'
  return 'Angemeldet über Twitch'
 })
-const statusText = computed(() => {
+const authStatusText = computed(() => {
  if (isTeamPasswordSession.value) return 'Diese Session läuft über deinen Team-Login.'
  if (isTeamSession.value) return 'Diese Admin-Session nutzt deinen verknüpften Twitch-Account.'
  return 'Diese Session nutzt deinen Twitch-Account.'
@@ -45,19 +47,34 @@ const logoutLabel = computed(() => !isTeamSession.value ? 'Von Twitch abmelden'
 </script>

 <template>
+  <!-- ── Privacy Modal ─────────────────────────────────────── -->
  <template v-if="props.privacyModalOpen">
-    <div class="home-modal-overlay" @click="props.onClosePrivacy" style="position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">
-      <div class="home-modal" @click="props.privacyModalStop" style="position:relative;width:100%;max-width:680px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
+    <div
+      class="fixed inset-0 z-[400] flex items-center justify-center p-6"
+      style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+      @click="props.onClosePrivacy"
+    >
+      <div
+        class="flex max-h-[88vh] w-full max-w-[680px] flex-col overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.4)]"
+        @click="props.privacyModalStop"
+      >
+        <div class="flex shrink-0 items-center justify-between gap-4 border-b border-[#f1ecfb] px-8 py-5">
          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Rechtliches</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">Datenschutzerklärung</h2>
+            <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Rechtliches</p>
+            <h2 class="font-['Cormorant_Garamond'] text-2xl font-bold text-[#3f3556]">Datenschutzerklärung</h2>
          </div>
-          <button @click="props.onClosePrivacy" style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" style-hover="background:#e6dcf6;">✕</button>
+          <button
+            type="button"
+            class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+            aria-label="Datenschutz schließen"
+            @click="props.onClosePrivacy"
+          >
+            <X class="h-4 w-4" />
+          </button>
        </div>
-        <div style="overflow-y:auto;padding:28px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.7;color:#6f6685;">
-          <div v-if="props.privacyContentHtml" class="home-privacy-content" v-html="props.privacyContentHtml" />
-          <div v-else style="margin:0;padding:14px 16px;border-radius:16px;border:1px solid #f1ecfb;background:#fcfbff;">
+        <div class="flex-1 overflow-y-auto px-8 py-7 text-sm leading-relaxed text-[#6f6685]">
+          <div v-if="props.privacyContentHtml" class="privacy-content" v-html="props.privacyContentHtml" />
+          <div v-else class="rounded-2xl border border-[#f1ecfb] bg-[#fcfbff] px-4 py-3 text-sm">
            Datenschutzerklärung wird geladen.
          </div>
        </div>
@@ -65,60 +82,150 @@ const logoutLabel = computed(() => !isTeamSession.value ? 'Von Twitch abmelden'
    </div>
  </template>

+  <!-- ── Account Modal ─────────────────────────────────────── -->
  <template v-if="props.accountModalOpen">
-    <div class="home-modal-overlay" @click="props.onCloseAccount" style="position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">
-      <div class="home-modal" @click="props.accountModalStop" style="position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);overflow:hidden;">
-        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid #f1ecfb;">
-          <div>
-            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Mein Profil</div>
-            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;margin:0;color:#3f3556;">@{{ profileHandle }}</h2>
-          </div>
-          <button @click="props.onCloseAccount" style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" style-hover="background:#e6dcf6;">✕</button>
-        </div>
-        <div style="padding:24px 28px;display:flex;flex-direction:column;gap:16px;">
-          <div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px;padding:14px 16px;border-radius:16px;background:#f6f1fd;border:1px solid #ede4fb;">
-            <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 7a4 4 0 1 1-2.8-3.82"/><path d="M13 5 21 13"/><path d="M21 13 18 16"/><path d="M18 13 16 15"/></svg>
-            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/><path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/></svg>
-            <span style="font-size:14px;color:#5f44ad;font-weight:800;">{{ statusLabel }}</span>
-            <span style="grid-column:2;font-size:12.5px;color:#6f6685;line-height:1.45;">{{ statusText }}</span>
-          </div>
-          <div style="padding:16px;border-radius:14px;background:#fafafa;border:1px solid #f0eafc;">
-            <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a99fc0;margin:0 0 10px;">Gespeicherte Daten</p>
-            <div style="display:flex;flex-direction:column;gap:7px;">
-              <div class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">{{ primaryIdentityLabel }}</span><span style="font-weight:600;color:#3f3556;">@{{ profileHandle }}</span></div>
-              <div v-if="showTeamLoginDetail" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Team-Login</span><span style="font-weight:600;color:#3f3556;">@{{ props.session?.teamLogin }}</span></div>
-              <div v-if="props.session?.boundTwitchUserId" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Gebundenes Twitch</span><span style="font-weight:600;color:#3f3556;">@{{ props.session.boundTwitchUserId }}</span></div>
-              <div class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Rolle</span><span style="font-weight:700;color:#8b6cdb;text-transform:uppercase;font-size:11px;letter-spacing:1px;">{{ props.role }}</span></div>
-              <div v-if="isParticipantSession" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Einreichungen</span><span style="font-weight:600;color:#3f3556;">Clips, Votes, Nominierungen</span></div>
-              <div v-if="isParticipantSession" class="home-account-data-row" style="display:flex;justify-content:space-between;font-size:13.5px;"><span style="color:#6f6685;">Löschfrist</span><span style="font-weight:600;color:#059669;">März 2027 (auto.)</span></div>
-              <div v-else class="home-account-data-row" style="display:flex;justify-content:space-between;gap:16px;font-size:13.5px;"><span style="color:#6f6685;">Accountverwaltung</span><span style="font-weight:600;color:#3f3556;text-align:right;">Team-Accounts bleiben bestehen und werden im Admin-Panel verwaltet.</span></div>
+    <div
+      class="fixed inset-0 z-[300] flex items-end justify-center p-4 sm:items-center sm:p-6"
+      style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
+      @click="props.onCloseAccount"
+    >
+      <div
+        class="w-full max-w-[480px] overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.38)]"
+        @click="props.accountModalStop"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between gap-4 border-b border-[#f1ecfb] bg-gradient-to-br from-[#f7f2ff] to-[#fff7ed] px-7 py-5">
+          <div class="flex min-w-0 items-center gap-3.5">
+            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-gradient-to-br from-[#8b6cdb] to-[#7355c8] text-base font-bold text-white shadow-[0_6px_18px_rgba(124,86,196,0.3)]">
+              {{ displayInitial }}
+            </div>
+            <div class="min-w-0">
+              <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Mein Profil</p>
+              <h2 class="truncate font-['Cormorant_Garamond'] text-2xl font-bold leading-tight text-[#3f3556]">
+                @{{ profileHandle }}
+              </h2>
            </div>
          </div>
-          <button @click="props.onOpenPrivacy" style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #ede4fb;background:#f9f6ff;color:#6a4fb8;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;" style-hover="background:#f1ecfb;">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-            Datenschutzerklärung lesen
+          <button
+            type="button"
+            class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
+            aria-label="Profil schließen"
+            @click="props.onCloseAccount"
+          >
+            <X class="h-4 w-4" />
          </button>
-          <button @click="props.onLogout" style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;" style-hover="background:#f1f5f9;">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
-            {{ logoutLabel }}
-          </button>
-          <template v-if="isParticipantSession && props.deleteNotConfirm">
-            <button @click="props.onRequestDelete" style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;" style-hover="background:#ffe4e6;">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
-              Meine Daten löschen (Löschrecht Art. 17 DSGVO)
-            </button>
-          </template>
-          <template v-if="isParticipantSession && props.deleteConfirm">
-            <div style="padding:16px;border-radius:14px;background:#fff5f5;border:1.5px solid #fecdd3;">
-              <p style="font-size:13.5px;color:#9f1239;font-weight:600;margin:0 0 6px;">Alle deine Daten werden sofort gelöscht.</p>
-              <p style="font-size:12.5px;color:#e11d48;margin:0 0 14px;line-height:1.5;">Das umfasst deine Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
-              <p v-if="props.accountActionError" style="font-size:12.5px;color:#be123c;margin:0 0 12px;line-height:1.5;font-weight:600;">{{ props.accountActionError }}</p>
-              <div class="home-account-confirm-actions" style="display:flex;gap:8px;">
-                <button :disabled="props.authLoading" @click="props.onCancelDelete" style="flex:1;padding:10px;border-radius:10px;border:1px solid #e6dcf6;background:white;color:#6f6685;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;cursor:pointer;" style-hover="background:#f9f6ff;">Abbrechen</button>
-                <button :disabled="props.authLoading" @click="props.onConfirmDelete" style="flex:1;padding:10px;border-radius:10px;border:none;background:#e11d48;color:white;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;cursor:pointer;" style-hover="opacity:0.9;">{{ props.authLoading ? 'Löscht …' : 'Jetzt löschen' }}</button>
+        </div>
+
+        <!-- Scrollable body -->
+        <div class="max-h-[72vh] overflow-y-auto">
+          <div class="space-y-3 p-6">
+
+            <!-- Auth status -->
+            <div class="grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-2xl border border-[#ede4fb] bg-[#f6f1fd] px-4 py-3.5">
+              <div class="mt-0.5 shrink-0">
+                <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M15 7a4 4 0 1 1-2.8-3.82"/><path d="M13 5 21 13"/><path d="M21 13 18 16"/><path d="M18 13 16 15"/>
+                </svg>
+                <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="#9146FF" aria-hidden="true">
+                  <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                  <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+                </svg>
+              </div>
+              <span class="text-sm font-extrabold text-[#5f44ad]">{{ authStatusLabel }}</span>
+              <span class="col-start-2 text-xs leading-relaxed text-[#6f6685]">{{ authStatusText }}</span>
+            </div>
+
+            <!-- Saved data -->
+            <div class="rounded-2xl border border-[#ede4fb] bg-[#fafafa] px-4 py-3.5">
+              <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#a99fc0]">Gespeicherte Daten</p>
+              <div class="space-y-2">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">{{ primaryIdentityLabel }}</span>
+                  <span class="font-semibold text-[#3f3556]">@{{ profileHandle }}</span>
+                </div>
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">Rolle</span>
+                  <span class="text-[10px] font-bold uppercase tracking-[0.1em] text-[#8b6cdb]">{{ props.role }}</span>
+                </div>
+                <div v-if="showTeamLoginDetail" class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">Team-Login</span>
+                  <span class="font-semibold text-[#3f3556]">@{{ props.session?.teamLogin }}</span>
+                </div>
+                <div v-if="props.session?.boundTwitchUserId" class="flex items-center justify-between text-sm">
+                  <span class="text-[#6f6685]">Gebundenes Twitch</span>
+                  <span class="font-semibold text-[#3f3556]">@{{ props.session.boundTwitchUserId }}</span>
+                </div>
+                <template v-if="isParticipantSession">
+                  <div class="flex items-center justify-between text-sm">
+                    <span class="text-[#6f6685]">Einreichungen</span>
+                    <span class="font-semibold text-[#3f3556]">Clips, Votes, Nominierungen</span>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="flex items-start justify-between gap-4 text-sm">
+                    <span class="shrink-0 text-[#6f6685]">Accountverwaltung</span>
+                    <span class="text-right font-semibold text-[#3f3556]">Team-Accounts werden im Admin-Panel verwaltet.</span>
+                  </div>
+                </template>
              </div>
            </div>
-          </template>
+
+            <!-- Privacy -->
+            <button
+              type="button"
+              class="flex w-full items-center gap-3 rounded-xl border border-[#ede4fb] bg-[#f9f6ff] px-4 py-3 text-left text-sm font-semibold text-[#6a4fb8] transition hover:bg-[#f1ecfb]"
+              @click="props.onOpenPrivacy"
+            >
+              <Shield class="h-4 w-4 shrink-0" />
+              Datenschutzerklärung lesen
+            </button>
+
+            <!-- Logout -->
+            <button
+              type="button"
+              class="flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left text-sm font-semibold text-slate-500 transition hover:bg-slate-100"
+              @click="props.onLogout"
+            >
+              <LogOut class="h-4 w-4 shrink-0" />
+              {{ logoutLabel }}
+            </button>
+
+            <!-- Delete request -->
+            <template v-if="isParticipantSession && props.deleteNotConfirm">
+              <button
+                type="button"
+                class="flex w-full items-center gap-3 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-left text-sm font-semibold text-rose-600 transition hover:bg-rose-100"
+                @click="props.onRequestDelete"
+              >
+                <Trash2 class="h-4 w-4 shrink-0" />
+                Meine Daten löschen (Löschrecht Art. 17 DSGVO)
+              </button>
+            </template>
+
+            <!-- Delete confirmation -->
+            <template v-if="isParticipantSession && props.deleteConfirm">
+              <div class="rounded-2xl border-[1.5px] border-rose-200 bg-rose-50 p-4">
+                <p class="text-sm font-semibold text-rose-800">Alle deine Daten werden sofort gelöscht.</p>
+                <p class="mt-1 text-xs leading-relaxed text-rose-600">Das umfasst Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
+                <p v-if="props.accountActionError" class="mt-2 text-xs font-bold text-rose-700">{{ props.accountActionError }}</p>
+                <div class="mt-4 flex gap-2">
+                  <button
+                    :disabled="props.authLoading"
+                    type="button"
+                    class="flex-1 rounded-xl border border-[#e6dcf6] bg-white py-2.5 text-sm font-semibold text-[#6f6685] transition hover:bg-[#f9f6ff] disabled:opacity-50"
+                    @click="props.onCancelDelete"
+                  >Abbrechen</button>
+                  <button
+                    :disabled="props.authLoading"
+                    type="button"
+                    class="flex-1 rounded-xl bg-rose-600 py-2.5 text-sm font-bold text-white transition hover:bg-rose-700 disabled:opacity-50"
+                    @click="props.onConfirmDelete"
+                  >{{ props.authLoading ? 'Löscht …' : 'Jetzt löschen' }}</button>
+                </div>
+              </div>
+            </template>
+
+          </div>
        </div>
      </div>
    </div>
@@ -126,23 +233,20 @@ const logoutLabel = computed(() => !isTeamSession.value ? 'Von Twitch abmelden'
 </template>

 <style scoped>
-.home-privacy-content :deep(p) {
+.privacy-content :deep(p) {
  margin: 0 0 14px;
 }
-
-.home-privacy-content :deep(p:last-child),
-.home-privacy-content :deep(ul:last-child),
-.home-privacy-content :deep(ol:last-child) {
+.privacy-content :deep(p:last-child),
+.privacy-content :deep(ul:last-child),
+.privacy-content :deep(ol:last-child) {
  margin-bottom: 0;
 }
-
-.home-privacy-content :deep(ul),
-.home-privacy-content :deep(ol) {
+.privacy-content :deep(ul),
+.privacy-content :deep(ol) {
  margin: 0 0 14px 20px;
  padding-left: 16px;
 }
-
-.home-privacy-content :deep(li) {
+.privacy-content :deep(li) {
  margin: 3px 0;
 }
 </style>
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { X } from '@lucide/vue'

+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
+
 const props = withDefaults(defineProps<{
  open: boolean
  title?: string
@@ -23,19 +25,11 @@ function onKey(event: KeyboardEvent) {
  if (event.key === 'Escape' && props.open) emit('close')
 }

-watch(
-  () => props.open,
-  (open) => {
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = open ? 'hidden' : ''
-    }
-  },
-)
+useBodyScrollLock(() => props.open)

 onMounted(() => window.addEventListener('keydown', onKey))
 onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKey)
-  if (typeof document !== 'undefined') document.body.style.overflow = ''
 })
 </script>

@@ -0,0 +1,72 @@
+import { onBeforeUnmount, watch, type WatchSource } from 'vue'
+
+let lockCount = 0
+let previousBodyOverflow = ''
+let previousBodyOverscrollBehavior = ''
+let previousBodyPaddingRight = ''
+let previousHtmlOverflow = ''
+let previousHtmlOverscrollBehavior = ''
+
+function acquireBodyScrollLock() {
+  if (typeof document === 'undefined' || typeof window === 'undefined') return
+
+  if (lockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow
+    previousBodyOverscrollBehavior = document.body.style.overscrollBehavior
+    previousBodyPaddingRight = document.body.style.paddingRight
+    previousHtmlOverflow = document.documentElement.style.overflow
+    previousHtmlOverscrollBehavior = document.documentElement.style.overscrollBehavior
+
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`
+    }
+
+    document.body.style.overflow = 'hidden'
+    document.body.style.overscrollBehavior = 'contain'
+    document.documentElement.style.overflow = 'hidden'
+    document.documentElement.style.overscrollBehavior = 'contain'
+  }
+
+  lockCount += 1
+}
+
+function releaseBodyScrollLock() {
+  if (typeof document === 'undefined') return
+  if (lockCount === 0) return
+
+  lockCount -= 1
+  if (lockCount > 0) return
+
+  document.body.style.overflow = previousBodyOverflow
+  document.body.style.overscrollBehavior = previousBodyOverscrollBehavior
+  document.body.style.paddingRight = previousBodyPaddingRight
+  document.documentElement.style.overflow = previousHtmlOverflow
+  document.documentElement.style.overscrollBehavior = previousHtmlOverscrollBehavior
+}
+
+export function useBodyScrollLock(locked: WatchSource<boolean>) {
+  let active = false
+
+  const stop = watch(
+    locked,
+    (shouldLock) => {
+      if (shouldLock && !active) {
+        active = true
+        acquireBodyScrollLock()
+      } else if (!shouldLock && active) {
+        active = false
+        releaseBodyScrollLock()
+      }
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(() => {
+    stop()
+    if (active) {
+      active = false
+      releaseBodyScrollLock()
+    }
+  })
+}
@@ -88,7 +88,7 @@ export interface AdminAuditEntry {
  summary: string
  createdAt: string
  metadataJson: string
-  createdFromIp: string
+  createdFromIp: string | null
  userAgent: string
 }

@@ -24,6 +24,8 @@ const passwordForm = reactive({
 const loginMode = ref<'password' | 'twitch'>('password')
 const errorMessage = ref('')
 const successMessage = ref('')
+const loginFormElement = ref<HTMLFormElement | null>(null)
+const passwordChangeFormElement = ref<HTMLFormElement | null>(null)

 const passwordChangeRequired = computed(() => Boolean(authStore.session?.mustChangePassword))

@@ -40,6 +42,10 @@ const redirectTarget = computed(() => {
 })

 async function submitLogin() {
+  if (authStore.loading) {
+    return
+  }
+
  errorMessage.value = ''
  successMessage.value = ''

@@ -81,6 +87,10 @@ async function submitLogin() {
 }

 async function startTwitchLogin() {
+  if (authStore.loading) {
+    return
+  }
+
  errorMessage.value = ''
  successMessage.value = ''

@@ -97,6 +107,10 @@ async function startTwitchLogin() {
 }

 async function submitPasswordChange() {
+  if (authStore.loading) {
+    return
+  }
+
  errorMessage.value = ''
  successMessage.value = ''

@@ -168,7 +182,7 @@ async function submitPasswordChange() {
        </button>
      </div>

-      <form v-if="!passwordChangeRequired && loginMode === 'password'" class="login-form" @submit.prevent="submitLogin">
+      <form ref="loginFormElement" v-if="!passwordChangeRequired && loginMode === 'password'" class="login-form" @submit.prevent="submitLogin">
        <label>
          <span>Login</span>
          <input
@@ -177,6 +191,7 @@ async function submitPasswordChange() {
            autocomplete="username"
            required
            placeholder="E-Mail oder Username"
+            @keydown.enter.exact.prevent="loginFormElement?.requestSubmit()"
          >
        </label>

@@ -188,6 +203,7 @@ async function submitPasswordChange() {
            autocomplete="current-password"
            required
            placeholder="Team-Passwort eingeben"
+            @keydown.enter.exact.prevent="loginFormElement?.requestSubmit()"
          />
        </label>

@@ -225,7 +241,7 @@ async function submitPasswordChange() {
        </button>
      </form>

-      <form v-else class="login-form" @submit.prevent="submitPasswordChange">
+      <form ref="passwordChangeFormElement" v-else class="login-form" @submit.prevent="submitPasswordChange">
        <label>
          <span>Aktuelles Passwort</span>
          <PasswordField
@@ -234,6 +250,7 @@ async function submitPasswordChange() {
            autocomplete="current-password"
            required
            placeholder="Temporäres Passwort"
+            @keydown.enter.exact.prevent="passwordChangeFormElement?.requestSubmit()"
          />
        </label>

@@ -246,6 +263,7 @@ async function submitPasswordChange() {
            required
            minlength="10"
            placeholder="Mindestens 10 Zeichen"
+            @keydown.enter.exact.prevent="passwordChangeFormElement?.requestSubmit()"
          />
        </label>

@@ -258,6 +276,7 @@ async function submitPasswordChange() {
            required
            minlength="10"
            placeholder="Neues Passwort bestätigen"
+            @keydown.enter.exact.prevent="passwordChangeFormElement?.requestSubmit()"
          />
        </label>

@@ -21,6 +21,7 @@ import {

 import AdminToastViewport from '../../components/admin/AdminToastViewport.vue'
 import Card from '../../components/ui/Card.vue'
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import { getRiskMetricValue } from '../../lib/adminMetrics'
 import { useAwardsStore } from '../../stores/awards'
 import { useAuthStore } from '../../stores/auth'
@@ -34,6 +35,8 @@ const adminWorkspaceLoading = ref(false)
 const adminWorkspaceLoaded = ref(false)
 const mobileNavOpen = ref(false)

+useBodyScrollLock(() => mobileNavOpen.value)
+
 const fullNavGroups = computed(() => [
  {
    label: 'Betrieb',
@@ -22,6 +22,7 @@ import AdminSeasonDeleteModal from '../../components/admin/AdminSeasonDeleteModa
 import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
 import {
  createSeasonTimelineRows,
+  hasShowDayPassed,
  normalizePhaseKey,
  resolveAutoPhase,
  SEASON_PHASES,
@@ -32,6 +33,7 @@ import { useAdminSeasonManager } from '../../components/admin/useAdminSeasonMana
 import { watchAdminToast } from '../../composables/useAdminToast'
 import Button from '../../components/ui/Button.vue'
 import Card from '../../components/ui/Card.vue'
+import Modal from '../../components/ui/Modal.vue'

 const {
  store,
@@ -88,10 +90,20 @@ const currentPhaseKey = computed(() => normalizePhaseKey(form.currentPhase))
 const autoPhase = computed(() => resolveAutoPhase(form))
 const autoPhaseIsCompleted = computed(() => normalizePhaseKey(autoPhase.value) === 'completed')
 const autoMismatch = computed(() => Boolean(autoPhase.value && normalizePhaseKey(autoPhase.value) !== currentPhaseKey.value))
+const todayLabel = computed(() =>
+  new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }),
+)

 const editingPhase = ref<PhaseKey | null>(null)
 const timelineError = ref('')
 const draft = reactive({ start: '', end: '', showStartsAt: '20:00' })
+const phaseWarning = ref<{
+  action: 'activate' | 'complete'
+  phase: string
+  reason: string
+  detail: string
+  range: string
+} | null>(null)

 const timelineRows = computed(() =>
  createSeasonTimelineRows(form, currentPhaseKey.value, autoPhase.value ?? '', editingPhase.value).map((row) => ({
@@ -150,6 +162,118 @@ function phaseCountdown(row: (typeof timelineRows.value)[number]): string | null
  return `Startet in ${days} Tagen`
 }

+function parseLocalDate(value: string | undefined | null) {
+  if (!value) return null
+  const [year, month, day] = value.split('-').map(Number)
+  if (!year || !month || !day) return null
+  const date = new Date(year, month - 1, day)
+  date.setHours(0, 0, 0, 0)
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+function formatLocalDate(value: string | undefined | null) {
+  const date = parseLocalDate(value)
+  return date
+    ? date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+    : 'offen'
+}
+
+function todayAtStartOfDay() {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  return today
+}
+
+function phaseWindowWarning(row: (typeof timelineRows.value)[number]) {
+  if (row.key === 'completed' || !row.start || !row.end) return null
+
+  const start = parseLocalDate(form[row.start])
+  const end = parseLocalDate(form[row.end])
+  if (!start || !end) {
+    return {
+      reason: `Für „${row.title}“ ist kein vollständiges Zeitfenster hinterlegt.`,
+      detail: 'Bitte prüfe zuerst Start und Ende der Phase oder bestätige bewusst die manuelle Aktivierung.',
+    }
+  }
+
+  const today = todayAtStartOfDay()
+  if (today < start) {
+    return {
+      reason: `„${row.title}“ startet laut Zeitplan erst am ${formatLocalDate(form[row.start])}.`,
+      detail: 'Wenn du jetzt aktivierst, öffnen Public-API, Countdown und Teilnahme-Gates vor dem geplanten Start.',
+    }
+  }
+
+  if (today > end) {
+    return {
+      reason: `„${row.title}“ ist laut Zeitplan seit dem ${formatLocalDate(form[row.end])} beendet.`,
+      detail: 'Wenn du jetzt aktivierst, springt die öffentliche Award-Phase zurück in ein bereits abgelaufenes Fenster.',
+    }
+  }
+
+  return null
+}
+
+function requestPhaseActivation(row: (typeof timelineRows.value)[number]) {
+  if (saving.value || !selectedSeasonId.value || row.active || row.finalLocked) return
+
+  const warning = phaseWindowWarning(row)
+  if (warning) {
+    phaseWarning.value = {
+      action: 'activate',
+      phase: row.title,
+      range: row.dateRange,
+      reason: warning.reason,
+      detail: warning.detail,
+    }
+    return
+  }
+
+  void activatePhase(row.title)
+}
+
+function requestPhaseActivationByTitle(phase: string) {
+  const row = timelineRows.value.find((item) => item.title === phase)
+  if (!row) {
+    void activatePhase(phase)
+    return
+  }
+
+  requestPhaseActivation(row)
+}
+
+function requestCompleteSeason() {
+  if (completing.value || !canCompleteSelectedSeason.value) return
+
+  if (!hasShowDayPassed(form)) {
+    phaseWarning.value = {
+      action: 'complete',
+      phase: 'Abgeschlossen',
+      range: form.showDate ? `nach ${formatLocalDate(form.showDate)}` : 'nach der Award Show',
+      reason: form.showDate
+        ? `Die Award Show ist laut Zeitplan erst am ${formatLocalDate(form.showDate)} bzw. noch nicht vorbei.`
+        : 'Für die Award Show ist noch kein Datum hinterlegt.',
+      detail: 'Wenn du jetzt beendest, werden Public-Aktionen gesperrt und das Jahr als abgeschlossen behandelt.',
+    }
+    return
+  }
+
+  void completeSeason()
+}
+
+async function confirmPhaseWarning() {
+  const pending = phaseWarning.value
+  if (!pending) return
+
+  phaseWarning.value = null
+  if (pending.action === 'complete') {
+    await completeSeason()
+    return
+  }
+
+  await activatePhase(pending.phase)
+}
+
 // ---------- Quick stats ----------
 const quickStats = computed(() => {
  const d = seasonDetail.value
@@ -290,7 +414,7 @@ const readinessScore = computed(() => {
          variant="ghost"
          class="gap-1.5 border border-amber-100 bg-amber-50 text-amber-700 hover:bg-amber-100"
          :disabled="completing || !canCompleteSelectedSeason"
-          @click="completeSeason"
+          @click="requestCompleteSeason"
        >
          <CheckCircle2 class="h-4 w-4" /> {{ completing ? 'Schließt …' : 'Beenden' }}
        </Button>
@@ -467,7 +591,7 @@ const readinessScore = computed(() => {
            size="sm"
            class="ml-2 border border-amber-200 bg-white text-amber-700 hover:bg-amber-100"
            :disabled="saving || !selectedSeasonId || !autoPhase || autoPhaseIsCompleted"
-            @click="autoPhase && !autoPhaseIsCompleted && activatePhase(autoPhase)"
+            @click="autoPhase && !autoPhaseIsCompleted && requestPhaseActivationByTitle(autoPhase)"
          >
            {{ autoPhaseIsCompleted ? 'Über Beenden' : 'Aktivieren' }}
          </Button>
@@ -558,8 +682,8 @@ const readinessScore = computed(() => {
                    : row.finalLocked
                      ? 'border border-slate-200 bg-slate-50 text-slate-500'
                      : 'border border-violet-200 bg-white text-violet-700 hover:bg-violet-50'"
-                  :disabled="saving || !selectedSeasonId || row.active || row.finalLocked"
-                  @click="activatePhase(row.title)"
+                    :disabled="saving || !selectedSeasonId || row.active || row.finalLocked"
+                  @click="requestPhaseActivation(row)"
                >
                  <CheckCircle2 v-if="row.active" class="h-3.5 w-3.5" />
                  <LockKeyhole v-else-if="row.finalLocked" class="h-3.5 w-3.5" />
@@ -621,4 +745,48 @@ const readinessScore = computed(() => {
    :on-close="() => { seasonToDelete = null }"
    :on-confirm-delete="confirmDeleteSeason"
  />
+
+  <Modal
+    :open="!!phaseWarning"
+    title="Phase außerhalb des Zeitfensters"
+    subtitle="Der Zeitplan passt nicht zur gewählten manuellen Umstellung."
+    @close="phaseWarning = null"
+  >
+    <div v-if="phaseWarning" class="space-y-4">
+      <div class="flex gap-4 rounded-[24px] border border-amber-200 bg-amber-50 p-4 text-amber-900">
+        <AlertTriangle class="mt-0.5 h-5 w-5 shrink-0" />
+        <div>
+          <p class="font-bold">{{ phaseWarning.reason }}</p>
+          <p class="mt-2 text-sm font-semibold leading-6 text-amber-800">{{ phaseWarning.detail }}</p>
+        </div>
+      </div>
+
+      <div class="grid gap-3 rounded-[22px] border border-violet-100 bg-white/80 p-4 text-sm">
+        <div class="flex items-center justify-between gap-4">
+          <span class="font-semibold text-slate-500">Gewählte Phase</span>
+          <strong class="text-right text-slate-900">{{ phaseWarning.phase }}</strong>
+        </div>
+        <div class="flex items-center justify-between gap-4">
+          <span class="font-semibold text-slate-500">Geplanter Zeitraum</span>
+          <strong class="text-right text-slate-900">{{ phaseWarning.range }}</strong>
+        </div>
+        <div class="flex items-center justify-between gap-4">
+          <span class="font-semibold text-slate-500">Heute</span>
+          <strong class="text-right text-slate-900">{{ todayLabel }}</strong>
+        </div>
+      </div>
+
+      <p class="rounded-2xl border border-violet-100 bg-violet-50/70 px-4 py-3 text-sm font-semibold leading-6 text-slate-600">
+        Bestätige nur, wenn der Zeitplan bewusst übersteuert werden soll. Nach der Bestätigung wird die Phase sofort gespeichert.
+      </p>
+    </div>
+    <template #footer>
+      <Button type="button" variant="ghost" :disabled="saving || completing" @click="phaseWarning = null">
+        Abbrechen
+      </Button>
+      <Button type="button" variant="secondary" :disabled="saving || completing" @click="confirmPhaseWarning">
+        {{ phaseWarning?.action === 'complete' ? 'Trotzdem beenden' : 'Trotzdem aktivieren' }}
+      </Button>
+    </template>
+  </Modal>
 </template>
@@ -4,6 +4,7 @@ import { computed, reactive, ref } from 'vue'

 import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
 import { useAdminTeamManager } from '../../components/admin/useAdminTeamManager'
+import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
 import { watchAdminToast } from '../../composables/useAdminToast'
 import Button from '../../components/ui/Button.vue'
 import Card from '../../components/ui/Card.vue'
@@ -67,6 +68,15 @@ const memberPendingDeletion = computed(() =>
  members.value.find((member) => member.id === confirmDeleteMemberId.value) ?? null,
 )
 const onlineMembers = computed(() => members.value.filter((member) => member.isOnline).length)
+const anyTeamModalOpen = computed(() =>
+  passwordModalOpen.value
+  || createMemberModalOpen.value
+  || editMemberModalOpen.value
+  || rolePermissionsModalOpen.value
+  || Boolean(memberPendingDeletion.value),
+)
+
+useBodyScrollLock(() => anyTeamModalOpen.value)

 const summaryItems = computed(() => [
  { label: 'Mitglieder', value: members.value.length, note: `${onlineMembers.value} online` },