Add viewer-range categories, nomination tracking, dynamic showact form, session timeout, share URLs, and workflow-per-season

Features:
- Category viewer ranges + subcategory templates (admin group modal, tree workspace)
- Nomination enrichment via TwitchTracker API (NominationEnrichmentService,
  TwitchTrackerViewerStatsProvider) with admin tracking rules editor
- Nomination group tracker: CategoryGroupName as primary identifier,
  CategoryId stays as nullable legacy field; StreamerIdentity table
- Dynamic showact application form builder (AdminShowactFormBuilder,
  ShowactApplicationSchedule)
- Session idle timeout setting (AdminSessionTimeoutCard)
- Share URLs for X and Discord (SiteSettings, public extras)
- Workflow rules now stored per season (falls back to global SiteSettings)
- New admin routes: settings/access, settings/workflows, tracking-rules
- New admin review workspace with subcategory tabs
- AdminCategoriesView rebuilt with group/subcategory modals

Migrations (all additive):
- AddShareUrls, AddShowactDynamicForm, AddCategoryViewerRanges,
  AddSessionIdleTimeoutSettings, AddSeasonSubcategoryTemplates,
  AddNominationGroupTrackerIdentity, AddShowactApplicationSchedule,
  AddSeasonWorkflowRulesJson

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/AppShell.vue

@@ -3,6 +3,8 @@ import { computed, reactive, ref } from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 
 import AppShellAccountModals from './AppShellAccountModals.vue'
+import AdminToastViewport from './admin/AdminToastViewport.vue'
+import { useAdminApiDisconnectToast } from '../composables/useAdminApiDisconnectToast'
 import { useBodyScrollLock } from '../composables/useBodyScrollLock'
 import { privacyContentToHtml } from '../lib/privacyContent'
 import { useAuthStore } from '../stores/auth'
@@ -35,6 +37,7 @@ const navItems = [
 ]
 
 const visibleNavItems = computed(() => navItems)
+const isAdminRoute = computed(() => route.path.startsWith('/admin'))
 const privacyContent = computed(
   () => awardsStore.overview.siteContent.privacyPolicyContent || awardsStore.adminSiteSettings.privacyPolicyContent,
 )
@@ -140,6 +143,7 @@ const linkBase = 'padding:9px 14px;border-radius:9px;font-family:\'Outfit\',sans
 const linkActive = linkBase + 'background:rgba(139,108,219,.1);color:#5f44ad;font-weight:600;'
 const linkInactive = linkBase + 'background:transparent;color:#6f6685;font-weight:500;'
 
+useAdminApiDisconnectToast(isAdminRoute)
 </script>
 
 <template>
@@ -231,6 +235,7 @@ const linkInactive = linkBase + 'background:transparent;color:#6f6685;font-weigh
     />
     </template>
 
+    <AdminToastViewport />
   </div>
 </template>
 

frontend/src/components/admin/AdminCandidateEditorModal.vue

@@ -31,6 +31,41 @@
         <input :value="form.platform" type="text" class="h-11 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z. B. Cake, Booth, neue Plattform" @input="$emit('update:platform', ($event.target as HTMLInputElement).value)" />
       </label>
 
+      <section v-if="identitySummary || ruleNotices.length" class="rounded-2xl border border-violet-100 bg-violet-50/40 p-4">
+        <div class="mb-3">
+          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Regel-Kontext</p>
+          <p class="mt-1 text-sm text-slate-500">Diese Werte helfen bei mehrfachen Nominierungen und Gewinnergrenzen.</p>
+        </div>
+        <div v-if="identitySummary" class="grid gap-3 sm:grid-cols-4">
+          <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Kandidaturen</p>
+            <strong class="mt-1 block text-lg text-violet-900">{{ identitySummary.appearances }}</strong>
+          </div>
+          <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Angenommen</p>
+            <strong class="mt-1 block text-lg text-violet-900">{{ identitySummary.acceptedAppearances }}</strong>
+          </div>
+          <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Gewinner</p>
+            <strong class="mt-1 block text-lg text-violet-900">{{ identitySummary.winnerPlacements }}</strong>
+          </div>
+          <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Viewer-Nominierungen</p>
+            <strong class="mt-1 block text-lg text-violet-900">{{ identitySummary.nominationTally }}</strong>
+          </div>
+        </div>
+        <div v-if="ruleNotices.length" class="mt-3 space-y-2">
+          <p
+            v-for="notice in ruleNotices"
+            :key="notice.message"
+            class="rounded-2xl border px-4 py-3 text-sm font-semibold"
+            :class="notice.mode === 'block' ? 'border-rose-100 bg-rose-50 text-rose-700' : 'border-amber-100 bg-amber-50 text-amber-700'"
+          >
+            {{ notice.mode === 'block' ? 'Blockiert' : 'Warnung' }}: {{ notice.message }}
+          </p>
+        </div>
+      </section>
+
       <section class="rounded-2xl border border-violet-100 bg-violet-50/40 p-4">
         <div class="mb-3">
           <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Annahmestatus</p>
@@ -128,6 +163,13 @@ defineProps<{
   acceptanceStatusOptions: Array<{ label: string; value: string; description: string }>
   clipEmbedStatusOptions: Array<{ label: string; value: string }>
   selectedPlatformValue: string
+  identitySummary: {
+    appearances: number
+    acceptedAppearances: number
+    winnerPlacements: number
+    nominationTally: number
+  } | null
+  ruleNotices: Array<{ mode: 'warn' | 'block'; message: string }>
   canSave: boolean
   saving: boolean
 }>()

frontend/src/components/admin/AdminCandidatesTable.vue

@@ -22,6 +22,13 @@
           <div class="min-w-0">
             <p class="truncate font-semibold text-slate-800">{{ candidate.displayName }}</p>
             <p class="truncate text-xs text-slate-500">{{ candidate.channelSlug }}</p>
+            <p class="mt-1 text-xs text-slate-500">
+              {{ candidate.nominationTally }} Viewer-Nominierungen
+              <template v-if="candidateIdentitySummaries[identityKey(candidate)]">
+                · {{ candidateIdentitySummaries[identityKey(candidate)].appearances }} Kandidaturen
+                · {{ candidateIdentitySummaries[identityKey(candidate)].winnerPlacements }} Gewinnerplätze
+              </template>
+            </p>
             <p v-if="isDuplicate(candidate)" class="mt-1 text-xs font-semibold text-amber-700">
               Mögliches Duplikat in dieser Kategorie
             </p>
@@ -122,6 +129,7 @@ const props = defineProps<{
   rangeEnd: number
   categoryLabelMap: Record<number, string>
   duplicateCandidateKeys: Map<string, number>
+  candidateIdentitySummaries: Record<string, { appearances: number; acceptedAppearances: number; winnerPlacements: number; nominationTally: number }>
   candidateWorkflowNotices: Record<number, Array<{ mode: 'warn' | 'block'; message: string }>>
   acceptanceStatusOptions: Array<{ label: string; value: string; description: string }>
 }>()
@@ -138,6 +146,15 @@ function isDuplicate(candidate: AdminCandidateItem) {
     || (props.duplicateCandidateKeys.get(`${candidate.categoryId}:slug:${candidate.channelSlug.trim().toLowerCase()}`) ?? 0) > 1
 }
 
+function identityKey(candidate: AdminCandidateItem) {
+  if (typeof candidate.streamerIdentityId === 'number') {
+    return `identity:${candidate.streamerIdentityId}`
+  }
+
+  const channel = candidate.channelSlug.trim().replace(/^@+/, '').toLowerCase()
+  return channel ? `slug:${channel}` : `name:${candidate.displayName.trim().toLowerCase()}`
+}
+
 function acceptanceLabel(value: string) {
   return props.acceptanceStatusOptions.find((option) => option.value === value)?.label ?? 'Offen'
 }

frontend/src/components/admin/AdminCategoryGroupModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <Modal
+    :open="open"
+    size="lg"
+    :title="title"
+    subtitle="Diese Hauptkategorie bekommt automatisch alle globalen Unterkategorien der ausgewaehlten Season."
+    @close="$emit('close')"
+  >
+    <div class="grid gap-4 md:grid-cols-2">
+      <label class="space-y-2 md:col-span-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Name</span>
+        <input
+          :value="form.groupName"
+          type="text"
+          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          placeholder="z. B. Gaming"
+          @input="form.groupName = ($event.target as HTMLInputElement).value"
+        />
+      </label>
+
+      <label class="space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Reihenfolge</span>
+        <input
+          :value="form.sortOrder"
+          type="number"
+          min="1"
+          max="200"
+          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          @input="form.sortOrder = toPositiveInteger(($event.target as HTMLInputElement).value, 1)"
+        />
+      </label>
+
+      <label class="space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Nominierungs-Limit</span>
+        <input
+          :value="form.maxNomineesPerUser"
+          type="number"
+          min="1"
+          max="10"
+          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          @input="form.maxNomineesPerUser = toPositiveInteger(($event.target as HTMLInputElement).value, 3)"
+        />
+      </label>
+
+      <label class="space-y-2 md:col-span-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Beschreibung</span>
+        <textarea
+          :value="form.description"
+          class="min-h-28 w-full rounded-2xl border border-violet-200 px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          placeholder="Kurze Orientierung fuer Admins und Public-Flows"
+          @input="form.description = ($event.target as HTMLTextAreaElement).value"
+        />
+      </label>
+    </div>
+
+    <p v-if="!canCreateGroup && !isEditing" class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
+      Lege zuerst globale Unterkategorien an, bevor du neue Hauptkategorien erzeugst.
+    </p>
+
+    <template #footer>
+      <Button
+        v-if="isEditing"
+        variant="ghost"
+        class="mr-auto gap-2 border-rose-200 bg-rose-50 text-rose-600 hover:bg-rose-100"
+        @click="$emit('delete')"
+      >
+        <Trash2 class="h-4 w-4" />
+        Loeschen
+      </Button>
+      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
+      <Button :disabled="!canSave || saving" @click="$emit('save')">
+        {{ saving ? 'Speichert ...' : isEditing ? 'Hauptkategorie speichern' : 'Hauptkategorie anlegen' }}
+      </Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { Trash2 } from '@lucide/vue'
+
+import Button from '../ui/Button.vue'
+import Modal from '../ui/Modal.vue'
+
+defineProps<{
+  open: boolean
+  title: string
+  form: {
+    groupName: string
+    description: string
+    sortOrder: number
+    maxNomineesPerUser: number
+  }
+  canSave: boolean
+  canCreateGroup: boolean
+  saving: boolean
+  isEditing: boolean
+}>()
+
+defineEmits<{
+  close: []
+  save: []
+  delete: []
+}>()
+
+function toPositiveInteger(value: string, fallback: number) {
+  const number = Number(value)
+  return Number.isFinite(number) ? Math.max(1, Math.round(number)) : fallback
+}
+</script>

frontend/src/components/admin/AdminCategoryOverviewModal.vue

@@ -0,0 +1,394 @@
+<template>
+  <Modal :open="open" size="xl" :title="title" :subtitle="subtitle" @close="$emit('close')">
+    <div class="grid gap-4 md:grid-cols-4">
+      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3">
+        <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-500">Unterkategorien</p>
+        <strong class="mt-2 block text-2xl text-violet-900">{{ categories.length }}</strong>
+      </div>
+      <div class="rounded-2xl border border-emerald-100 bg-emerald-50/70 px-4 py-3">
+        <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-emerald-600">Kandidaten</p>
+        <strong class="mt-2 block text-2xl text-emerald-800">{{ candidates.length }}</strong>
+      </div>
+      <div class="rounded-2xl border border-amber-100 bg-amber-50/70 px-4 py-3">
+        <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-600">Nominierungen</p>
+        <strong class="mt-2 block text-2xl text-amber-800">{{ nominations.length }}</strong>
+      </div>
+      <div class="rounded-2xl border border-sky-100 bg-sky-50/70 px-4 py-3">
+        <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-sky-600">Nominierer</p>
+        <strong class="mt-2 block text-2xl text-sky-800">{{ totalNominatorCount }}</strong>
+      </div>
+    </div>
+
+    <div v-if="readinessItems.length > 0" class="mt-4 grid gap-2">
+      <article
+        v-for="item in readinessItems"
+        :key="item.category.id"
+        class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border px-4 py-3"
+        :class="item.isReady ? 'border-emerald-100 bg-emerald-50/70' : 'border-sky-100 bg-sky-50/70'"
+      >
+        <div class="min-w-0">
+          <p class="truncate text-sm font-semibold" :class="item.isReady ? 'text-emerald-900' : 'text-sky-900'">
+            {{ item.category.groupName }} · {{ item.category.name }}
+          </p>
+          <p class="mt-1 text-xs" :class="item.isReady ? 'text-emerald-700' : 'text-sky-700'">
+            {{ item.nominatorCount }} von {{ readinessTargetLabel }} Nominierern erreicht. Hinweis, kein Blocker.
+          </p>
+        </div>
+        <span class="rounded-full px-3 py-1 text-xs font-semibold" :class="item.isReady ? 'bg-emerald-100 text-emerald-700' : 'bg-white/80 text-sky-700'">
+          {{ item.isReady ? 'Bereit' : 'Aufbau' }}
+        </span>
+      </article>
+    </div>
+
+    <div class="mt-5 grid gap-5 lg:grid-cols-[0.82fr_1.18fr]">
+      <section class="space-y-3">
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Tree-Ausschnitt</p>
+          <p class="mt-1 text-sm text-slate-500">Aktuelle Struktur und Belegung.</p>
+        </div>
+        <article
+          v-for="category in categories"
+          :key="category.id"
+          class="rounded-2xl border border-violet-100 bg-white px-4 py-4"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div class="min-w-0">
+              <p class="truncate font-semibold text-slate-900">{{ category.name }}</p>
+              <p class="mt-1 font-mono text-xs text-slate-400">/{{ category.slug }}</p>
+            </div>
+            <span class="shrink-0 rounded-full bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-violet-700">
+              {{ formatViewerRange(category.viewerRangeMin, category.viewerRangeMax) }}
+            </span>
+          </div>
+          <div class="mt-3 flex flex-wrap gap-2">
+            <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-emerald-700">
+              {{ category.candidateCount }} Kandidaten
+            </span>
+            <span class="rounded-full bg-amber-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-amber-700">
+              {{ category.pendingCount }} Reviews
+            </span>
+            <span class="rounded-full bg-sky-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-sky-700">
+              {{ category.nominatorCount }}/{{ readinessTargetLabel }} Nominierer
+            </span>
+          </div>
+        </article>
+      </section>
+
+      <section class="space-y-5">
+        <div>
+          <div class="flex flex-wrap items-end justify-between gap-3">
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Nominierungs-Leaderboard</p>
+              <p class="mt-1 text-sm text-slate-500">Standard: viele Nominierungen vor wenigen Nominierungen.</p>
+            </div>
+            <span class="rounded-full bg-violet-50 px-3 py-1 text-xs font-semibold text-violet-700">
+              {{ filteredLeaderboardRows.length }} Einträge
+            </span>
+          </div>
+
+          <div class="mt-3 grid gap-2 md:grid-cols-[minmax(0,1fr)_auto_auto]">
+            <label class="block">
+              <span class="sr-only">Leaderboard filtern</span>
+              <input
+                v-model="leaderboardQuery"
+                class="h-10 w-full rounded-2xl border border-violet-200 bg-white px-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                placeholder="Streamer, Link oder Plattform filtern"
+              />
+            </label>
+            <select
+              v-model="leaderboardStatusFilter"
+              class="h-10 rounded-2xl border border-violet-200 bg-white px-3 text-sm font-semibold text-slate-600 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+            >
+              <option value="all">Alle Status</option>
+              <option value="pending">Offen</option>
+              <option value="approved">Übernommen</option>
+              <option value="rejected">Verworfen</option>
+              <option value="candidate">Kandidaten</option>
+            </select>
+            <select
+              v-model="leaderboardSort"
+              class="h-10 rounded-2xl border border-violet-200 bg-white px-3 text-sm font-semibold text-slate-600 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+            >
+              <option value="votes-desc">Viele Votes</option>
+              <option value="votes-asc">Wenige Votes</option>
+              <option value="name-asc">Name A-Z</option>
+              <option value="recent-desc">Neueste</option>
+            </select>
+          </div>
+        </div>
+
+        <div v-if="filteredLeaderboardRows.length > 0" class="grid gap-2">
+          <article
+            v-for="(row, index) in filteredLeaderboardRows"
+            :key="row.key"
+            class="rounded-2xl border border-violet-100 bg-white px-4 py-3"
+          >
+            <div class="grid gap-3 sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center">
+              <span class="grid h-9 w-9 place-items-center rounded-xl bg-violet-50 text-sm font-black text-violet-700">
+                #{{ index + 1 }}
+              </span>
+              <div class="min-w-0">
+                <p class="truncate font-semibold text-slate-900">{{ row.label }}</p>
+                <p class="mt-1 truncate text-xs text-slate-500">
+                  {{ row.platform || 'Plattform offen' }} · {{ row.url || 'kein Link' }}
+                </p>
+                <div class="mt-2 flex flex-wrap gap-2">
+                  <span
+                    v-for="status in row.statuses"
+                    :key="`${row.key}-${status}`"
+                    class="rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em]"
+                    :class="statusBadgeClass(status)"
+                  >
+                    {{ statusLabel(status) }}
+                  </span>
+                </div>
+              </div>
+              <div class="sm:text-right">
+                <strong class="block text-2xl text-violet-900">{{ row.voteCount }}</strong>
+                <span class="text-[11px] font-semibold uppercase tracking-[0.14em] text-violet-500">Nominierer</span>
+                <p class="mt-1 text-xs text-slate-500">{{ row.nominationCount }} Einreichungen</p>
+              </div>
+            </div>
+          </article>
+        </div>
+        <p v-else class="rounded-2xl border border-dashed border-violet-200 bg-violet-50/40 px-4 py-5 text-sm text-slate-500">
+          Keine Leaderboard-Einträge passen zum Filter.
+        </p>
+
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Kandidaten</p>
+          <p class="mt-1 text-sm text-slate-500">Finale und vorbereitete Kandidaten in diesem Ausschnitt.</p>
+        </div>
+        <div v-if="candidates.length > 0" class="grid gap-2">
+          <article
+            v-for="candidate in candidates"
+            :key="candidate.id"
+            class="rounded-2xl border border-violet-100 bg-white px-4 py-3"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <p class="truncate font-semibold text-slate-900">{{ candidate.displayName }}</p>
+                <p class="mt-1 truncate text-xs text-slate-500">{{ candidate.platform }} · {{ candidate.channelSlug }}</p>
+              </div>
+              <span class="rounded-full bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-violet-700">
+                {{ candidate.nominationTally }}x
+              </span>
+            </div>
+          </article>
+        </div>
+        <p v-else class="rounded-2xl border border-dashed border-violet-200 bg-violet-50/40 px-4 py-5 text-sm text-slate-500">
+          Noch keine Kandidaten in diesem Ausschnitt.
+        </p>
+
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Roh-Nominierungen</p>
+          <p class="mt-1 text-sm text-slate-500">Offene und bereits gepruefte Einreichungen zur Kontrolle.</p>
+        </div>
+        <div v-if="nominations.length > 0" class="grid gap-2">
+          <article
+            v-for="nomination in nominations"
+            :key="nomination.id"
+            class="rounded-2xl border border-violet-100 bg-white px-4 py-3"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <p class="truncate font-semibold text-slate-900">{{ nomination.resolvedChannel || nomination.candidateText || 'Ohne Namen' }}</p>
+                <p class="mt-1 truncate text-xs text-slate-500">{{ nomination.streamUrl || nomination.categoryGroupName }}</p>
+              </div>
+              <span class="rounded-full px-2.5 py-1 text-[11px] font-semibold" :class="nomination.status === 'pending' ? 'bg-amber-50 text-amber-700' : 'bg-slate-100 text-slate-600'">
+                {{ nomination.status }}
+              </span>
+            </div>
+          </article>
+        </div>
+        <p v-else class="rounded-2xl border border-dashed border-violet-200 bg-violet-50/40 px-4 py-5 text-sm text-slate-500">
+          Keine Nominierungen in diesem Ausschnitt.
+        </p>
+      </section>
+    </div>
+
+    <template #footer>
+      <Button variant="ghost" @click="$emit('close')">Schliessen</Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { AdminCandidateItem, AdminNominationReviewItem } from '../../types/awards'
+import Button from '../ui/Button.vue'
+import Modal from '../ui/Modal.vue'
+import type { AdminCategoryGroupSummary } from './useAdminCategoryManager'
+import { formatViewerRange } from './useAdminCategoryManager'
+
+const props = defineProps<{
+  open: boolean
+  title: string
+  subtitle: string
+  categories: AdminCategoryGroupSummary['categories']
+  candidates: AdminCandidateItem[]
+  nominations: AdminNominationReviewItem[]
+  recommendedNominatorTarget: number | null
+}>()
+
+defineEmits<{
+  close: []
+}>()
+
+type LeaderboardStatus = 'pending' | 'approved' | 'rejected' | 'candidate' | string
+type LeaderboardStatusFilter = 'all' | 'pending' | 'approved' | 'rejected' | 'candidate'
+type LeaderboardSort = 'votes-desc' | 'votes-asc' | 'name-asc' | 'recent-desc'
+
+interface LeaderboardRow {
+  key: string
+  label: string
+  platform: string
+  url: string
+  voteCount: number
+  nominationCount: number
+  latestCreatedAt: string
+  statuses: LeaderboardStatus[]
+  nominatorKeys: string[]
+  searchText: string
+}
+
+const leaderboardQuery = ref('')
+const leaderboardStatusFilter = ref<LeaderboardStatusFilter>('all')
+const leaderboardSort = ref<LeaderboardSort>('votes-desc')
+
+const totalNominatorCount = computed(() => uniqueNominatorCount(props.nominations))
+const readinessTargetLabel = computed(() => props.recommendedNominatorTarget === null ? '' : String(props.recommendedNominatorTarget))
+
+const readinessItems = computed(() =>
+  props.recommendedNominatorTarget === null
+    ? []
+    : props.categories.map((category) => {
+      const target = props.recommendedNominatorTarget ?? 0
+      const nominations = props.nominations.filter((nomination) =>
+        (nomination.categoryId !== null && nomination.categoryId === category.id)
+        || (nomination.suggestedCategoryId !== null && nomination.suggestedCategoryId === category.id),
+      )
+      const nominatorCount = uniqueNominatorCount(nominations)
+      return {
+        category,
+        nominatorCount,
+        isReady: nominatorCount >= target,
+      }
+    }),
+)
+
+const leaderboardRows = computed<LeaderboardRow[]>(() => {
+  const rows = new Map<string, LeaderboardRow>()
+
+  for (const nomination of props.nominations) {
+    const key = nominationKey(nomination)
+    const existing = rows.get(key)
+    const label = nomination.resolvedChannel || nomination.candidateDisplayName || nomination.candidateText || nomination.streamUrl || 'Ohne Namen'
+    const platform = nomination.resolvedPlatform || ''
+    const url = nomination.streamUrl || ''
+    const status = nomination.status || 'pending'
+    const createdAt = nomination.createdAt || ''
+    const row = existing ?? {
+      key,
+      label,
+      platform,
+      url,
+      voteCount: 0,
+      nominationCount: 0,
+      latestCreatedAt: createdAt,
+      statuses: [],
+      nominatorKeys: [],
+      searchText: '',
+    }
+
+    row.nominationCount += 1
+    const nominatorKey = nomination.submittedByTwitchId.trim().toLowerCase()
+    if (nominatorKey && !row.nominatorKeys.includes(nominatorKey)) {
+      row.nominatorKeys.push(nominatorKey)
+    }
+    row.voteCount = Math.max(row.voteCount, row.nominatorKeys.length)
+    if (!row.statuses.includes(status)) row.statuses.push(status)
+    if (createdAt && (!row.latestCreatedAt || createdAt > row.latestCreatedAt)) row.latestCreatedAt = createdAt
+    row.searchText = [row.label, row.platform, row.url, row.statuses.join(' ')].join(' ').toLowerCase()
+    rows.set(key, row)
+  }
+
+  for (const candidate of props.candidates) {
+    const key = candidateKey(candidate)
+    const existing = rows.get(key)
+    const row = existing ?? {
+      key,
+      label: candidate.displayName,
+      platform: candidate.platform,
+      url: candidate.channelSlug,
+      voteCount: 0,
+      nominationCount: 0,
+      latestCreatedAt: '',
+      statuses: [],
+      nominatorKeys: [],
+      searchText: '',
+    }
+
+    row.label = row.label || candidate.displayName
+    row.platform = row.platform || candidate.platform
+    row.url = row.url || candidate.channelSlug
+    row.voteCount = Math.max(row.voteCount, candidate.nominationTally)
+    if (!row.statuses.includes('candidate')) row.statuses.push('candidate')
+    row.searchText = [row.label, row.platform, row.url, row.statuses.join(' ')].join(' ').toLowerCase()
+    rows.set(key, row)
+  }
+
+  return [...rows.values()]
+})
+
+const filteredLeaderboardRows = computed(() => {
+  const search = leaderboardQuery.value.trim().toLowerCase()
+  const statusFilter = leaderboardStatusFilter.value
+  const filtered = leaderboardRows.value.filter((row) =>
+    (!search || row.searchText.includes(search))
+    && (statusFilter === 'all' || row.statuses.includes(statusFilter)),
+  )
+
+  return filtered.sort((left, right) => {
+    if (leaderboardSort.value === 'votes-asc') return left.voteCount - right.voteCount || left.nominationCount - right.nominationCount || left.label.localeCompare(right.label, 'de')
+    if (leaderboardSort.value === 'name-asc') return left.label.localeCompare(right.label, 'de')
+    if (leaderboardSort.value === 'recent-desc') return right.latestCreatedAt.localeCompare(left.latestCreatedAt) || right.voteCount - left.voteCount || right.nominationCount - left.nominationCount
+    return right.voteCount - left.voteCount || right.nominationCount - left.nominationCount || left.label.localeCompare(right.label, 'de')
+  })
+})
+
+function nominationKey(nomination: AdminNominationReviewItem) {
+  if (nomination.streamerIdentityId !== null) return `identity:${nomination.streamerIdentityId}`
+  const channel = (nomination.resolvedChannel || nomination.candidateText || '').trim().toLowerCase()
+  if (channel) return `channel:${channel}`
+  const url = (nomination.streamUrl || '').trim().toLowerCase()
+  if (url) return `url:${url}`
+  return `nomination:${nomination.id}`
+}
+
+function candidateKey(candidate: AdminCandidateItem) {
+  if (candidate.streamerIdentityId !== null) return `identity:${candidate.streamerIdentityId}`
+  const channel = candidate.channelSlug.trim().replace(/^@+/, '').toLowerCase()
+  if (channel) return `channel:${channel}`
+  return `candidate:${candidate.id}`
+}
+
+function uniqueNominatorCount(nominations: AdminNominationReviewItem[]) {
+  return new Set(nominations.map((nomination) => nomination.submittedByTwitchId.trim().toLowerCase()).filter(Boolean)).size
+}
+
+function statusLabel(status: LeaderboardStatus) {
+  if (status === 'pending') return 'offen'
+  if (status === 'approved') return 'übernommen'
+  if (status === 'rejected') return 'verworfen'
+  if (status === 'candidate') return 'Kandidat'
+  return status
+}
+
+function statusBadgeClass(status: LeaderboardStatus) {
+  if (status === 'pending') return 'bg-amber-50 text-amber-700'
+  if (status === 'approved' || status === 'candidate') return 'bg-emerald-50 text-emerald-700'
+  if (status === 'rejected') return 'bg-rose-50 text-rose-700'
+  return 'bg-slate-100 text-slate-600'
+}
+</script>

frontend/src/components/admin/AdminCategorySubcategoryModal.vue

@@ -0,0 +1,98 @@
+<template>
+  <Modal :open="open" size="lg" :title="title" subtitle="Diese Unterkategorie wird spaeter bei allen Hauptkategorien verwendet." @close="$emit('close')">
+    <div class="grid gap-4 md:grid-cols-2">
+      <label class="space-y-2 md:col-span-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Name</span>
+        <input
+          :value="form.name"
+          type="text"
+          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          placeholder="z. B. Rising Star"
+          @input="form.name = ($event.target as HTMLInputElement).value"
+        />
+      </label>
+
+      <label class="space-y-2 md:col-span-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Slug</span>
+        <div class="flex gap-2">
+          <input
+            :value="form.slug"
+            type="text"
+            class="h-12 min-w-0 flex-1 rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+            placeholder="rising-star"
+            @input="form.slug = ($event.target as HTMLInputElement).value"
+          />
+          <Button variant="ghost" class="border border-violet-200 bg-violet-50 text-violet-700 hover:bg-violet-100" @click="$emit('fill-slug')">
+            Auto
+          </Button>
+        </div>
+      </label>
+
+      <label class="space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Viewer von</span>
+        <input
+          :value="form.viewerRangeMin ?? ''"
+          type="number"
+          min="0"
+          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          placeholder="0"
+          @input="form.viewerRangeMin = toNullableNumber(($event.target as HTMLInputElement).value)"
+        />
+      </label>
+
+      <label class="space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Viewer bis</span>
+        <input
+          :value="form.viewerRangeMax ?? ''"
+          type="number"
+          min="0"
+          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          placeholder="offen"
+          @input="form.viewerRangeMax = toNullableNumber(($event.target as HTMLInputElement).value)"
+        />
+      </label>
+
+      <label class="space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Reihenfolge</span>
+        <input
+          :value="form.sortOrder"
+          type="number"
+          min="1"
+          class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+          @input="form.sortOrder = Math.max(1, Number(($event.target as HTMLInputElement).value) || 1)"
+        />
+      </label>
+    </div>
+
+    <template #footer>
+      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
+      <Button :disabled="!canSave" @click="$emit('save')">Unterkategorie speichern</Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import Button from '../ui/Button.vue'
+import Modal from '../ui/Modal.vue'
+import type { AdminSubcategoryDraft } from './useAdminCategoryManager'
+
+defineProps<{
+  open: boolean
+  title: string
+  form: AdminSubcategoryDraft
+  canSave: boolean
+}>()
+
+defineEmits<{
+  close: []
+  save: []
+  'fill-slug': []
+}>()
+
+function toNullableNumber(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  const number = Number(trimmed)
+  return Number.isFinite(number) ? number : null
+}
+</script>

frontend/src/components/admin/AdminCategoryTemplatesModal.vue

@@ -0,0 +1,193 @@
+<template>
+  <Modal
+    :open="open"
+    size="xl"
+    title="Unterkategorien konfigurieren"
+    subtitle="Diese Viewer-Sektionen gelten fuer alle Hauptkategorien der ausgewaehlten Season."
+    @close="$emit('close')"
+  >
+    <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.72fr)]">
+      <section class="space-y-4">
+        <div class="flex items-center justify-between gap-3">
+          <div>
+            <p class="text-sm font-semibold text-slate-900">Globale Unterkategorien</p>
+            <p class="text-sm text-slate-500">Die Hauptkategorien muessen sie nicht einzeln anlegen.</p>
+          </div>
+          <Button class="gap-2" @click="$emit('add-subcategory')">
+            <PlusCircle class="h-4 w-4" />
+            Unterkategorie
+          </Button>
+        </div>
+
+        <div v-if="subcategories.length > 0" class="grid gap-3">
+          <article
+            v-for="(subcategory, index) in subcategories"
+            :key="`${subcategory.slug}-${index}`"
+            class="rounded-2xl border border-violet-100 bg-white px-4 py-4"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                  <h3 class="text-base font-bold text-slate-900">{{ subcategory.name || 'Neue Unterkategorie' }}</h3>
+                  <span class="rounded-full bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-violet-700">
+                    {{ formatViewerRange(subcategory.viewerRangeMin, subcategory.viewerRangeMax) }}
+                  </span>
+                </div>
+                <p class="mt-1 font-mono text-xs text-slate-400">/{{ subcategory.slug || 'slug-fehlt' }}</p>
+              </div>
+
+              <div class="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600">
+                  #{{ subcategory.sortOrder }}
+                </span>
+                <Button variant="ghost" size="sm" class="gap-2" @click="$emit('edit-subcategory', index)">
+                  <Pencil class="h-4 w-4" />
+                  Bearbeiten
+                </Button>
+                <Button variant="ghost" size="sm" class="gap-2 border-rose-200 bg-rose-50 text-rose-600 hover:bg-rose-100" @click="$emit('remove-subcategory', index)">
+                  <Trash2 class="h-4 w-4" />
+                  Entfernen
+                </Button>
+              </div>
+            </div>
+          </article>
+        </div>
+
+        <div v-else class="rounded-2xl border border-dashed border-violet-200 bg-violet-50/40 px-4 py-8 text-center text-sm text-slate-500">
+          Noch keine Unterkategorien vorhanden.
+        </div>
+      </section>
+
+      <aside class="rounded-2xl border border-violet-100 bg-violet-50/50 p-4">
+        <div v-if="editorOpen" class="space-y-4">
+          <div>
+            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">{{ editorTitle }}</p>
+            <p class="mt-1 text-sm text-slate-500">Aenderungen werden erst mit der gesamten Unterkategorien-Konfiguration gespeichert.</p>
+          </div>
+
+          <label class="block space-y-2">
+            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Name</span>
+            <input
+              :value="form.name"
+              type="text"
+              class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+              placeholder="z. B. Rising Star"
+              @input="form.name = ($event.target as HTMLInputElement).value"
+            />
+          </label>
+
+          <label class="block space-y-2">
+            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Slug</span>
+            <div class="flex gap-2">
+              <input
+                :value="form.slug"
+                type="text"
+                class="h-12 min-w-0 flex-1 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                placeholder="rising-star"
+                @input="form.slug = ($event.target as HTMLInputElement).value"
+              />
+              <Button variant="ghost" class="border border-violet-200 bg-white text-violet-700 hover:bg-violet-50" @click="$emit('fill-slug')">
+                Auto
+              </Button>
+            </div>
+          </label>
+
+          <div class="grid gap-3 sm:grid-cols-2">
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Viewer von</span>
+              <input
+                :value="form.viewerRangeMin ?? ''"
+                type="number"
+                min="0"
+                class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                placeholder="0"
+                @input="form.viewerRangeMin = toNullableNumber(($event.target as HTMLInputElement).value)"
+              />
+            </label>
+
+            <label class="space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Viewer bis</span>
+              <input
+                :value="form.viewerRangeMax ?? ''"
+                type="number"
+                min="0"
+                class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                placeholder="offen"
+                @input="form.viewerRangeMax = toNullableNumber(($event.target as HTMLInputElement).value)"
+              />
+            </label>
+          </div>
+
+          <label class="block space-y-2">
+            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Reihenfolge</span>
+            <input
+              :value="form.sortOrder"
+              type="number"
+              min="1"
+              class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+              @input="form.sortOrder = Math.max(1, Number(($event.target as HTMLInputElement).value) || 1)"
+            />
+          </label>
+
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" @click="$emit('close-editor')">Abbrechen</Button>
+            <Button :disabled="!canSaveSubcategory" @click="$emit('save-subcategory')">
+              Unterkategorie uebernehmen
+            </Button>
+          </div>
+        </div>
+
+        <div v-else class="flex min-h-64 flex-col items-center justify-center rounded-2xl border border-dashed border-violet-200 bg-white/60 px-4 py-8 text-center">
+          <Layers3 class="h-8 w-8 text-violet-300" />
+          <p class="mt-3 font-semibold text-slate-700">Unterkategorie auswaehlen</p>
+          <p class="mt-1 text-sm leading-6 text-slate-500">Bearbeite eine bestehende Sektion oder lege eine neue Viewer-Sektion an.</p>
+        </div>
+      </aside>
+    </div>
+
+    <template #footer>
+      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
+      <Button :disabled="!canSave || saving" @click="$emit('save')">
+        {{ saving ? 'Speichert ...' : 'Unterkategorien speichern' }}
+      </Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { Layers3, Pencil, PlusCircle, Trash2 } from '@lucide/vue'
+
+import Button from '../ui/Button.vue'
+import Modal from '../ui/Modal.vue'
+import type { AdminSubcategoryDraft } from './useAdminCategoryManager'
+import { formatViewerRange } from './useAdminCategoryManager'
+
+defineProps<{
+  open: boolean
+  subcategories: AdminSubcategoryDraft[]
+  canSave: boolean
+  saving: boolean
+  editorOpen: boolean
+  editorTitle: string
+  form: AdminSubcategoryDraft
+  canSaveSubcategory: boolean
+}>()
+
+defineEmits<{
+  close: []
+  save: []
+  'add-subcategory': []
+  'edit-subcategory': [index: number]
+  'remove-subcategory': [index: number]
+  'close-editor': []
+  'save-subcategory': []
+  'fill-slug': []
+}>()
+
+function toNullableNumber(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  const number = Number(trimmed)
+  return Number.isFinite(number) ? number : null
+}
+</script>

frontend/src/components/admin/AdminCategoryTreeWorkspace.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="space-y-3">
+    <article
+      v-for="group in groups"
+      :key="group.name"
+      class="overflow-hidden rounded-2xl border bg-white/90 shadow-[0_14px_36px_rgba(124,91,180,0.08)]"
+      :class="selectedGroupName === group.name ? 'border-violet-200 ring-2 ring-violet-100' : 'border-violet-100'"
+    >
+      <div class="grid gap-3 border-b border-violet-100 bg-violet-50/45 px-4 py-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
+        <button type="button" class="min-w-0 text-left" @click="$emit('edit-group', group)">
+          <div class="flex min-w-0 flex-wrap items-center gap-2">
+            <span class="grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-white text-violet-700 shadow-sm">
+              <FolderTree class="h-4 w-4" />
+            </span>
+            <h2 class="truncate text-lg font-bold text-slate-900">{{ group.name }}</h2>
+            <span class="rounded-full bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-violet-700">
+              #{{ group.sortOrder }}
+            </span>
+            <span class="rounded-full bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-600">
+              Limit {{ group.maxNomineesPerUser }}
+            </span>
+          </div>
+          <p class="mt-2 line-clamp-2 text-sm leading-6 text-slate-500">
+            {{ group.description || 'Keine Beschreibung hinterlegt.' }}
+          </p>
+        </button>
+
+        <div class="flex flex-wrap items-center gap-2 lg:justify-end">
+          <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
+            {{ group.candidateCount }} Kandidaten
+          </span>
+          <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
+            {{ group.pendingCount }} Reviews
+          </span>
+          <span class="rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">
+            {{ group.nominatorCount }} Nominierer
+          </span>
+          <Button variant="ghost" size="sm" class="gap-2" @click.stop="$emit('overview-group', group)">
+            <Info class="h-4 w-4" />
+            Details
+          </Button>
+          <Button size="sm" class="gap-2" @click.stop="$emit('edit-group', group)">
+            <Pencil class="h-4 w-4" />
+            Bearbeiten
+          </Button>
+        </div>
+      </div>
+
+      <div class="divide-y divide-violet-100">
+        <div
+          v-for="category in group.categories"
+          :key="category.id"
+          class="grid gap-3 px-4 py-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"
+          :class="isFocused(category.slug) || isFocused(category.name) ? 'bg-sky-50/60' : 'bg-white'"
+        >
+          <button type="button" class="min-w-0 border-l-2 border-violet-100 pl-4 text-left" @click="$emit('overview-category', group, category)">
+            <div class="flex min-w-0 flex-wrap items-center gap-2">
+              <span class="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-violet-50 text-violet-600">
+                <GitBranch class="h-3.5 w-3.5" />
+              </span>
+              <p class="truncate font-semibold text-slate-900">{{ category.name }}</p>
+              <span
+                v-if="isFocused(category.slug) || isFocused(category.name)"
+                class="rounded-full bg-sky-100 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-sky-700"
+              >
+                Fokus
+              </span>
+              <span class="rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em]" :class="statusClass(category)">
+                {{ statusLabel(category) }}
+              </span>
+            </div>
+            <div class="mt-2 flex flex-wrap gap-2 text-xs text-slate-500">
+              <span class="font-mono text-slate-400">/{{ category.slug }}</span>
+              <span>{{ formatViewerRange(category.viewerRangeMin, category.viewerRangeMax) }}</span>
+            </div>
+          </button>
+
+          <div class="flex flex-wrap items-center gap-2 lg:justify-end">
+            <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
+              {{ category.candidateCount }} Kandidaten
+            </span>
+            <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
+              {{ category.pendingCount }} Reviews
+            </span>
+            <span class="rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">
+              {{ category.nominatorCount }} Nominierer<span v-if="recommendedNominatorTarget !== null"> · Ziel {{ recommendedNominatorTarget }}</span>
+            </span>
+            <Button variant="ghost" size="sm" class="gap-2" @click="$emit('overview-category', group, category)">
+              <Info class="h-4 w-4" />
+              Overview
+            </Button>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <div v-if="groups.length === 0" class="rounded-2xl border border-dashed border-violet-200 bg-violet-50/50 px-4 py-12 text-center text-sm text-slate-500">
+      Keine Hauptkategorien passen zu diesem Filter.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FolderTree, GitBranch, Info, Pencil } from '@lucide/vue'
+
+import Button from '../ui/Button.vue'
+import type { AdminCategoryGroupSummary } from './useAdminCategoryManager'
+import { formatViewerRange } from './useAdminCategoryManager'
+
+type TreeCategory = AdminCategoryGroupSummary['categories'][number]
+
+defineProps<{
+  groups: AdminCategoryGroupSummary[]
+  selectedGroupName: string | null
+  isFocused: (nameOrSlug: string) => boolean
+  recommendedNominatorTarget: number | null
+}>()
+
+defineEmits<{
+  'edit-group': [group: AdminCategoryGroupSummary]
+  'overview-group': [group: AdminCategoryGroupSummary]
+  'overview-category': [group: AdminCategoryGroupSummary, category: TreeCategory]
+}>()
+
+function statusLabel(category: TreeCategory) {
+  if (category.pendingCount > 0) return 'Reviews'
+  if (category.nominatorCount >= 4) return 'Bereit'
+  if (category.nominatorCount > 0 || category.candidateCount > 0) return 'Aufbau'
+  if (category.candidateCount === 0) return 'Leer'
+  return 'Aufbau'
+}
+
+function statusClass(category: TreeCategory) {
+  if (category.pendingCount > 0) return 'bg-amber-50 text-amber-700'
+  if (category.nominatorCount >= 4) return 'bg-emerald-50 text-emerald-700'
+  if (category.nominatorCount > 0 || category.candidateCount > 0) return 'bg-sky-50 text-sky-700'
+  if (category.candidateCount === 0) return 'bg-rose-50 text-rose-700'
+  return 'bg-sky-50 text-sky-700'
+}
+</script>

frontend/src/components/admin/AdminContentBasicsSection.vue

@@ -29,6 +29,14 @@
         <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Newsletter URL</span>
         <input v-model="form.newsletterUrl" type="url" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
       </label>
+      <label class="space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Auf X teilen – URL</span>
+        <input v-model="form.shareXUrl" type="url" placeholder="https://x.com/intent/tweet?..." class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
+      </label>
+      <label class="space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Auf Discord teilen – URL</span>
+        <input v-model="form.shareDiscordUrl" type="url" placeholder="https://discord.gg/..." class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
+      </label>
     </div>
   </Card>
 </template>

frontend/src/components/admin/AdminContentLandingExtrasSection.vue

@@ -1,22 +1,41 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { Handshake, Mic2, Plus, Save, Settings2, Trash2 } from '@lucide/vue'
+import { Eye, Handshake, Mic2, Plus, Save, Settings2, Trash2 } from '@lucide/vue'
 
+import { privacyContentToHtml } from '../../lib/privacyContent'
 import { useAwardsStore } from '../../stores/awards'
 import type { AdminSponsorItem, UpsertSponsorPayload } from '../../types/awards'
 import Button from '../ui/Button.vue'
-import Card from '../ui/Card.vue'
+import AdminContentFooterPreviewModal from './AdminContentFooterPreviewModal.vue'
+import AdminRichTextEditor from './AdminRichTextEditor.vue'
 import AdminSettingsToggle from './AdminSettingsToggle.vue'
+import type { AdminContentForm } from './adminContentTypes'
+import AdminShowactFormBuilder from './AdminShowactFormBuilder.vue'
+import Modal from '../ui/Modal.vue'
+
+const props = defineProps<{
+  section: 'showacts' | 'sponsors'
+  form: AdminContentForm
+  saving: boolean
+  saveSiteSettings: (sectionLabel?: string) => Promise<void>
+}>()
 
 const store = useAwardsStore()
 const loading = ref(false)
-const saving = ref(false)
+const localSaving = ref(false)
 const statusMessage = ref('')
 const statusError = ref('')
+const previewOpen = ref(false)
+const previewHtml = computed(() => privacyContentToHtml(props.form.sponsorsContent))
+const previewTitle = 'Sponsoren & Partner'
 const editingSponsorId = ref<number | null>(null)
+const selectedShowactId = ref<number | null>(null)
 const showactNotes = reactive<Record<number, string>>({})
 const settingsForm = reactive({
   showactApplicationsEnabled: false,
+  showactApplicationStartsAt: '',
+  showactApplicationEndsAt: '',
+  showactApplicationsOpenNow: false,
   showactApplicationDisabledMessage: 'Showact-Bewerbungen sind aktuell geschlossen.',
   sponsorsVisible: true,
 })
@@ -33,17 +52,108 @@ const sponsorForm = reactive<UpsertSponsorPayload>({
 const seasonId = computed(() => store.adminSelectedSeasonId ?? (store.adminSeasonDetail.id || store.overview.seasonId))
 const pendingShowacts = computed(() => store.adminShowactApplications.filter((item) => item.status === 'pending').length)
 const visibleSponsors = computed(() => store.adminSponsors.filter((item) => item.isVisible).length)
+const selectedShowact = computed(() =>
+  selectedShowactId.value == null
+    ? null
+    : store.adminShowactApplications.find((item) => item.id === selectedShowactId.value) ?? null,
+)
+
+const showactSubmissionDetails = computed(() => {
+  const application = selectedShowact.value
+  if (!application) return []
+
+  const schemaFields = props.form.showactFormSchema ?? []
+  const responseEntries = parseShowactResponses(application.fieldResponsesJson)
+  const responseMap = new Map(responseEntries)
+  const consumedKeys = new Set<string>()
+
+  const orderedFields = schemaFields
+    .map((field) => {
+      const value = normalizeDetailValue(responseMap.get(field.id))
+      consumedKeys.add(field.id)
+      if (!value) return null
+      return {
+        key: field.id,
+        label: field.label,
+        value,
+      }
+    })
+    .filter((item): item is { key: string; label: string; value: string } => item !== null)
+
+  const remainingFields = responseEntries
+    .filter(([key]) => !consumedKeys.has(key))
+    .map(([key, value]) => ({
+      key,
+      label: humanizeShowactKey(key),
+      value: normalizeDetailValue(value),
+    }))
+    .filter((item) => item.value)
+
+  if (orderedFields.length > 0 || remainingFields.length > 0) {
+    return [...orderedFields, ...remainingFields]
+  }
+
+  return [
+    { key: 'artistName', label: 'Artist', value: application.artistName },
+    { key: 'performanceType', label: 'Performance', value: application.performanceType },
+    { key: 'description', label: 'Beschreibung', value: application.description },
+    { key: 'technicalNotes', label: 'Technische Hinweise', value: application.technicalNotes },
+    { key: 'platformUrl', label: 'Kanal oder Profil', value: application.platformUrl },
+    { key: 'referenceUrl', label: 'Referenz', value: application.referenceUrl },
+    { key: 'contactEmail', label: 'E-Mail', value: application.contactEmail },
+    { key: 'contactDiscord', label: 'Discord', value: application.contactDiscord },
+  ].filter((item) => normalizeDetailValue(item.value))
+})
 
 watch(
   () => store.adminOptionalFeatureSettings,
   (settings) => {
     settingsForm.showactApplicationsEnabled = settings.showactApplicationsEnabled
+    settingsForm.showactApplicationStartsAt = settings.showactApplicationStartsAt ?? ''
+    settingsForm.showactApplicationEndsAt = settings.showactApplicationEndsAt ?? ''
+    settingsForm.showactApplicationsOpenNow = settings.showactApplicationsOpenNow
     settingsForm.showactApplicationDisabledMessage = settings.showactApplicationDisabledMessage || 'Showact-Bewerbungen sind aktuell geschlossen.'
     settingsForm.sponsorsVisible = settings.sponsorsVisible
   },
   { immediate: true, deep: true },
 )
 
+const showactStatusText = computed(() => {
+  if (!settingsForm.showactApplicationsEnabled) {
+    return 'Bewerbungen sind manuell deaktiviert und es wird nur der Hinweistext ausgespielt.'
+  }
+
+  const parts: string[] = []
+  if (settingsForm.showactApplicationStartsAt) {
+    parts.push(`Start ${formatDate(settingsForm.showactApplicationStartsAt)}`)
+  }
+  if (settingsForm.showactApplicationEndsAt) {
+    parts.push(`Deadline ${formatDate(settingsForm.showactApplicationEndsAt)}`)
+  }
+
+  if (settingsForm.showactApplicationsOpenNow) {
+    return parts.length > 0
+      ? `Bewerbungen sind aktuell offen. ${parts.join(' · ')}.`
+      : 'Bewerbungen sind aktuell offen und das Modal bleibt fuer Einreichungen verfuegbar.'
+  }
+
+  if (parts.length > 0) {
+    return `Bewerbungen sind aktuell geschlossen. ${parts.join(' · ')}.`
+  }
+
+  return 'Bewerbungen sind aktuell geschlossen und es wird nur der Hinweistext ausgespielt.'
+})
+
+const showactScheduleError = computed(() => {
+  if (!settingsForm.showactApplicationStartsAt || !settingsForm.showactApplicationEndsAt) {
+    return ''
+  }
+
+  return settingsForm.showactApplicationStartsAt > settingsForm.showactApplicationEndsAt
+    ? 'Der Starttermin darf nicht nach der Deadline liegen.'
+    : ''
+})
+
 function resetSponsorForm() {
   editingSponsorId.value = null
   sponsorForm.name = ''
@@ -92,31 +202,41 @@ async function loadLandingExtras() {
   }
 }
 
-async function saveLandingExtrasSettings() {
-  saving.value = true
+async function saveAll() {
+  localSaving.value = true
   statusMessage.value = ''
   statusError.value = ''
   try {
-    await store.updateAdminOptionalFeatureSettings({
-      clipSubmissionsEnabled: store.adminOptionalFeatureSettings.clipSubmissionsEnabled,
-      clipReviewEnabled: store.adminOptionalFeatureSettings.clipReviewEnabled,
-      clipSubmissionDisabledMessage: store.adminOptionalFeatureSettings.clipSubmissionDisabledMessage,
-      showactApplicationsEnabled: settingsForm.showactApplicationsEnabled,
-      showactApplicationDisabledMessage: settingsForm.showactApplicationDisabledMessage,
-      sponsorsVisible: settingsForm.sponsorsVisible,
-    })
-    statusMessage.value = 'Landingpage-Extras wurden gespeichert.'
+    if (showactScheduleError.value) {
+      throw new Error(showactScheduleError.value)
+    }
+
+    await Promise.all([
+      store.updateAdminOptionalFeatureSettings({
+        clipSubmissionsEnabled: store.adminOptionalFeatureSettings.clipSubmissionsEnabled,
+        clipReviewEnabled: store.adminOptionalFeatureSettings.clipReviewEnabled,
+        clipAdminMenuVisible: store.adminOptionalFeatureSettings.clipAdminMenuVisible,
+        clipSubmissionDisabledMessage: store.adminOptionalFeatureSettings.clipSubmissionDisabledMessage,
+        showactApplicationsEnabled: settingsForm.showactApplicationsEnabled,
+        showactApplicationStartsAt: settingsForm.showactApplicationStartsAt || null,
+        showactApplicationEndsAt: settingsForm.showactApplicationEndsAt || null,
+        showactApplicationDisabledMessage: settingsForm.showactApplicationDisabledMessage,
+        sponsorsVisible: settingsForm.sponsorsVisible,
+      }),
+      props.saveSiteSettings(props.section === 'showacts' ? 'Showact-Inhalt' : 'Sponsoren-Inhalt'),
+    ])
+    statusMessage.value = 'Einstellungen gespeichert.'
   } catch (error) {
-    statusError.value = error instanceof Error ? error.message : 'Landingpage-Extras konnten nicht gespeichert werden.'
+    statusError.value = error instanceof Error ? error.message : 'Einstellungen konnten nicht gespeichert werden.'
   } finally {
-    saving.value = false
+    localSaving.value = false
   }
 }
 
 async function saveSponsor() {
   const resolvedSeasonId = await ensureSeasonId()
   if (!resolvedSeasonId) return
-  saving.value = true
+  localSaving.value = true
   statusMessage.value = ''
   statusError.value = ''
   try {
@@ -131,14 +251,14 @@ async function saveSponsor() {
   } catch (error) {
     statusError.value = error instanceof Error ? error.message : 'Sponsor konnte nicht gespeichert werden.'
   } finally {
-    saving.value = false
+    localSaving.value = false
   }
 }
 
 async function deleteSponsor(sponsor: AdminSponsorItem) {
   const resolvedSeasonId = await ensureSeasonId()
   if (!resolvedSeasonId || !window.confirm(`Sponsor "${sponsor.name}" loeschen?`)) return
-  saving.value = true
+  localSaving.value = true
   statusMessage.value = ''
   statusError.value = ''
   try {
@@ -148,14 +268,14 @@ async function deleteSponsor(sponsor: AdminSponsorItem) {
   } catch (error) {
     statusError.value = error instanceof Error ? error.message : 'Sponsor konnte nicht geloescht werden.'
   } finally {
-    saving.value = false
+    localSaving.value = false
   }
 }
 
 async function updateShowactStatus(applicationId: number, status: string) {
   const resolvedSeasonId = await ensureSeasonId()
   if (!resolvedSeasonId) return
-  saving.value = true
+  localSaving.value = true
   statusMessage.value = ''
   statusError.value = ''
   try {
@@ -167,14 +287,14 @@ async function updateShowactStatus(applicationId: number, status: string) {
   } catch (error) {
     statusError.value = error instanceof Error ? error.message : 'Showact-Status konnte nicht gespeichert werden.'
   } finally {
-    saving.value = false
+    localSaving.value = false
   }
 }
 
 async function deleteShowact(applicationId: number, artistName: string) {
   const resolvedSeasonId = await ensureSeasonId()
   if (!resolvedSeasonId || !window.confirm(`Showact-Bewerbung von "${artistName}" loeschen?`)) return
-  saving.value = true
+  localSaving.value = true
   statusMessage.value = ''
   statusError.value = ''
   try {
@@ -184,7 +304,7 @@ async function deleteShowact(applicationId: number, artistName: string) {
   } catch (error) {
     statusError.value = error instanceof Error ? error.message : 'Showact-Bewerbung konnte nicht geloescht werden.'
   } finally {
-    saving.value = false
+    localSaving.value = false
   }
 }
 
@@ -197,97 +317,151 @@ function statusLabel(status: string) {
   }[status] ?? status
 }
 
+function formatDate(value: string) {
+  const parsed = new Date(`${value}T00:00:00`)
+  return Number.isNaN(parsed.getTime())
+    ? value
+    : parsed.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+function parseShowactResponses(raw: string) {
+  try {
+    const parsed = JSON.parse(raw)
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return [] as Array<[string, unknown]>
+    }
+
+    return Object.entries(parsed)
+  } catch {
+    return [] as Array<[string, unknown]>
+  }
+}
+
+function normalizeDetailValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => String(item).trim())
+      .filter(Boolean)
+      .join(', ')
+  }
+
+  if (typeof value === 'boolean') {
+    return value ? 'Ja' : 'Nein'
+  }
+
+  if (value == null) {
+    return ''
+  }
+
+  return String(value).trim()
+}
+
+function humanizeShowactKey(key: string) {
+  return key
+    .replace(/_/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/^./, (char) => char.toUpperCase())
+}
+
+function openShowactDetails(applicationId: number) {
+  selectedShowactId.value = applicationId
+}
+
+function closeShowactDetails() {
+  selectedShowactId.value = null
+}
+
 onMounted(loadLandingExtras)
 </script>
 
 <template>
-  <Card id="content-landing-extras" class="p-6">
-    <div class="flex flex-wrap items-start justify-between gap-4">
-      <div>
-        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Landingpage Extras</p>
-        <h2 class="mt-1 text-xl font-bold text-slate-900">Showacts und Sponsoren</h2>
-        <p class="mt-2 text-sm leading-6 text-slate-500">
-          Module, Bewerbungen und Sponsoren direkt dort steuern, wo sie public erscheinen.
-        </p>
-      </div>
+  <div class="space-y-6">
+    <div class="flex items-center justify-between gap-4">
+      <p class="text-sm text-slate-500">
+        <template v-if="props.section === 'showacts'">
+          {{ store.adminShowactApplications.length }} Bewerbungen · {{ pendingShowacts }} offen
+        </template>
+        <template v-else>
+          {{ store.adminSponsors.length }} Sponsoren · {{ visibleSponsors }} sichtbar
+        </template>
+      </p>
       <Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-violet-200 bg-white px-4 text-violet-700 shadow-none hover:bg-violet-50" :disabled="loading" @click="loadLandingExtras">
         <Settings2 class="h-4 w-4" />
         {{ loading ? 'Laedt ...' : 'Neu laden' }}
       </Button>
     </div>
 
-    <div class="mt-5 grid gap-3 md:grid-cols-3">
-      <div class="rounded-2xl border border-fuchsia-100 bg-fuchsia-50/55 p-4">
-        <p class="text-xs font-bold uppercase tracking-[0.18em] text-fuchsia-600">Showacts</p>
-        <p class="mt-2 text-2xl font-black text-slate-950">{{ store.adminShowactApplications.length }}</p>
-        <p class="text-sm text-slate-500">{{ pendingShowacts }} offen</p>
-      </div>
-      <div class="rounded-2xl border border-sky-100 bg-sky-50/55 p-4">
-        <p class="text-xs font-bold uppercase tracking-[0.18em] text-sky-600">Sponsoren</p>
-        <p class="mt-2 text-2xl font-black text-slate-950">{{ store.adminSponsors.length }}</p>
-        <p class="text-sm text-slate-500">{{ visibleSponsors }} sichtbar</p>
-      </div>
-      <div class="rounded-2xl border border-violet-100 bg-violet-50/55 p-4">
-        <p class="text-xs font-bold uppercase tracking-[0.18em] text-violet-600">Saison</p>
-        <p class="mt-2 text-2xl font-black text-slate-950">{{ store.overview.year || store.adminSeasonDetail.year || '–' }}</p>
-        <p class="text-sm text-slate-500">Landingpage-Jahr</p>
-      </div>
-    </div>
-
-    <section class="mt-6 grid gap-3 lg:grid-cols-2">
+    <!-- Showacts section -->
+    <template v-if="props.section === 'showacts'">
       <div class="rounded-2xl border border-violet-100 bg-white p-4">
         <div class="flex items-start justify-between gap-4">
           <div>
             <h3 class="text-base font-bold text-slate-900">Showact-Bewerbung</h3>
-            <p class="mt-1 text-sm leading-6 text-slate-500">Public-Formular auf der Landingpage anzeigen.</p>
+            <p class="mt-1 text-sm leading-6 text-slate-500">
+              {{ showactStatusText }}
+            </p>
           </div>
           <AdminSettingsToggle
             :model-value="settingsForm.showactApplicationsEnabled"
             label="Showact-Bewerbungen aktivieren"
-            active-label="Offen"
-            inactive-label="Zu"
+            active-label="Bewerbung offen"
+            inactive-label="Bewerbung geschlossen"
             @update:model-value="settingsForm.showactApplicationsEnabled = $event"
           />
         </div>
       </div>
 
-      <div class="rounded-2xl border border-violet-100 bg-white p-4">
-        <div class="flex items-start justify-between gap-4">
-          <div>
-            <h3 class="text-base font-bold text-slate-900">Sponsoren-Modul</h3>
-            <p class="mt-1 text-sm leading-6 text-slate-500">Sponsor-Kacheln auf der Landingpage anzeigen.</p>
-          </div>
-          <AdminSettingsToggle
-            :model-value="settingsForm.sponsorsVisible"
-            label="Sponsoren anzeigen"
-            active-label="Sichtbar"
-            inactive-label="Aus"
-            @update:model-value="settingsForm.sponsorsVisible = $event"
+      <div class="grid gap-4 md:grid-cols-2">
+        <label class="block space-y-2">
+          <span class="text-sm font-bold text-slate-900">Starttermin (optional)</span>
+          <input
+            v-model="settingsForm.showactApplicationStartsAt"
+            type="date"
+            class="h-12 w-full rounded-2xl border border-violet-100 bg-white px-4 text-sm text-slate-700 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
           />
-        </div>
+        </label>
+
+        <label class="block space-y-2">
+          <span class="text-sm font-bold text-slate-900">Deadline (optional)</span>
+          <input
+            v-model="settingsForm.showactApplicationEndsAt"
+            type="date"
+            class="h-12 w-full rounded-2xl border border-violet-100 bg-white px-4 text-sm text-slate-700 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+          />
+        </label>
       </div>
-    </section>
 
-    <label class="mt-4 block space-y-2">
-      <span class="text-sm font-bold text-slate-900">Hinweis bei geschlossenen Showact-Bewerbungen</span>
-      <textarea
-        v-model="settingsForm.showactApplicationDisabledMessage"
-        rows="3"
-        maxlength="240"
-        class="w-full rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm leading-6 text-slate-700 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+      <p v-if="showactScheduleError" class="text-sm font-semibold text-rose-700">
+        {{ showactScheduleError }}
+      </p>
+
+      <label class="block space-y-2">
+        <span class="text-sm font-bold text-slate-900">Hinweis bei geschlossenen Bewerbungen</span>
+        <textarea
+          v-model="settingsForm.showactApplicationDisabledMessage"
+          rows="3"
+          maxlength="240"
+          class="w-full rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm leading-6 text-slate-700 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+        />
+      </label>
+
+      <div class="flex flex-wrap items-center gap-3">
+        <Button class="gap-2" :disabled="props.saving || localSaving" @click="saveAll">
+          <Save class="h-4 w-4" />
+          {{ (props.saving || localSaving) ? 'Speichert ...' : 'Einstellungen speichern' }}
+        </Button>
+        <p v-if="statusMessage" class="text-sm font-semibold text-emerald-700">{{ statusMessage }}</p>
+        <p v-if="statusError" class="text-sm font-semibold text-rose-700">{{ statusError }}</p>
+      </div>
+
+      <AdminShowactFormBuilder
+        :form="props.form"
+        :saving="props.saving"
+        :save-site-settings="props.saveSiteSettings"
       />
-    </label>
 
-    <div class="mt-4 flex flex-wrap items-center gap-3">
-      <Button class="gap-2" :disabled="saving" @click="saveLandingExtrasSettings">
-        <Save class="h-4 w-4" />
-        {{ saving ? 'Speichert ...' : 'Landingpage Extras speichern' }}
-      </Button>
-      <p v-if="statusMessage" class="text-sm font-semibold text-emerald-700">{{ statusMessage }}</p>
-      <p v-if="statusError" class="text-sm font-semibold text-rose-700">{{ statusError }}</p>
-    </div>
-
-    <section class="mt-7 grid gap-5 xl:grid-cols-[minmax(0,1.1fr)_minmax(340px,0.9fr)]">
       <div class="overflow-hidden rounded-2xl border border-violet-100 bg-white">
         <div class="border-b border-violet-100 p-4">
           <div class="flex items-center gap-2">
@@ -309,7 +483,7 @@ onMounted(loadLandingExtras)
                 <p class="mt-1 text-sm text-slate-500">{{ application.performanceType }}</p>
               </div>
               <div class="flex flex-wrap gap-2">
-                <Button size="sm" variant="ghost" :disabled="saving" @click="updateShowactStatus(application.id, 'shortlisted')">Shortlist</Button>
+                <Button size="sm" variant="ghost" :disabled="saving" @click="openShowactDetails(application.id)">Details</Button>
                 <Button size="sm" :disabled="saving" @click="updateShowactStatus(application.id, 'accepted')">Annehmen</Button>
                 <Button size="sm" variant="secondary" :disabled="saving" @click="updateShowactStatus(application.id, 'rejected')">Ablehnen</Button>
                 <Button size="sm" variant="ghost" class="text-rose-700" :disabled="saving" @click="deleteShowact(application.id, application.artistName)">
@@ -317,13 +491,28 @@ onMounted(loadLandingExtras)
                 </Button>
               </div>
             </div>
-            <p class="text-sm leading-6 text-slate-600">{{ application.description }}</p>
-            <div class="grid gap-2 text-sm text-slate-500 md:grid-cols-2">
-              <a v-if="application.platformUrl" class="font-semibold text-violet-700 hover:text-violet-900" :href="application.platformUrl" target="_blank" rel="noreferrer">Kanal/Profil</a>
-              <a v-if="application.referenceUrl" class="font-semibold text-violet-700 hover:text-violet-900" :href="application.referenceUrl" target="_blank" rel="noreferrer">Referenz</a>
-              <span v-if="application.contactEmail">Mail: {{ application.contactEmail }}</span>
-              <span v-if="application.contactDiscord">Discord: {{ application.contactDiscord }}</span>
-            </div>
+
+            <!-- Dynamic field responses if available, otherwise legacy fixed fields -->
+            <template v-if="application.fieldResponsesJson && application.fieldResponsesJson !== '{}'">
+              <div class="grid gap-2 text-sm text-slate-600 md:grid-cols-2">
+                <template v-for="(value, key) in (() => { try { return JSON.parse(application.fieldResponsesJson) } catch { return {} } })()" :key="key">
+                  <div v-if="value" class="flex flex-col gap-0.5">
+                    <span class="text-xs font-bold uppercase tracking-wide text-slate-400">{{ key }}</span>
+                    <span>{{ value }}</span>
+                  </div>
+                </template>
+              </div>
+            </template>
+            <template v-else>
+              <p class="text-sm leading-6 text-slate-600">{{ application.description }}</p>
+              <div class="grid gap-2 text-sm text-slate-500 md:grid-cols-2">
+                <a v-if="application.platformUrl" class="font-semibold text-violet-700 hover:text-violet-900" :href="application.platformUrl" target="_blank" rel="noreferrer">Kanal/Profil</a>
+                <a v-if="application.referenceUrl" class="font-semibold text-violet-700 hover:text-violet-900" :href="application.referenceUrl" target="_blank" rel="noreferrer">Referenz</a>
+                <span v-if="application.contactEmail">Mail: {{ application.contactEmail }}</span>
+                <span v-if="application.contactDiscord">Discord: {{ application.contactDiscord }}</span>
+              </div>
+            </template>
+
             <textarea
               v-model="showactNotes[application.id]"
               rows="2"
@@ -334,6 +523,47 @@ onMounted(loadLandingExtras)
           </article>
         </div>
       </div>
+    </template>
+
+    <!-- Sponsors section -->
+    <template v-else>
+      <div class="rounded-2xl border border-violet-100 bg-white p-4">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <h3 class="text-base font-bold text-slate-900">Sponsoren-Modul</h3>
+            <p class="mt-1 text-sm leading-6 text-slate-500">Sponsor-Kacheln auf der Landingpage anzeigen.</p>
+          </div>
+          <AdminSettingsToggle
+            :model-value="settingsForm.sponsorsVisible"
+            label="Sponsoren anzeigen"
+            active-label="Sichtbar"
+            inactive-label="Aus"
+            @update:model-value="settingsForm.sponsorsVisible = $event"
+          />
+        </div>
+      </div>
+
+      <div class="flex justify-end">
+        <Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-violet-200 bg-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100" @click="previewOpen = true">
+          <Eye class="h-4 w-4" />
+          Preview öffnen
+        </Button>
+      </div>
+      <AdminRichTextEditor
+        v-model="props.form.sponsorsContent"
+        label="Sponsoren-Seiteninhalt"
+        placeholder="Texte für die Sponsoren-Seite (wird als Modal auf der Landingpage angezeigt)..."
+        min-height-class="min-h-[220px]"
+      />
+
+      <div class="flex flex-wrap items-center gap-3">
+        <Button class="gap-2" :disabled="props.saving || localSaving" @click="saveAll">
+          <Save class="h-4 w-4" />
+          {{ (props.saving || localSaving) ? 'Speichert ...' : 'Einstellungen speichern' }}
+        </Button>
+        <p v-if="statusMessage" class="text-sm font-semibold text-emerald-700">{{ statusMessage }}</p>
+        <p v-if="statusError" class="text-sm font-semibold text-rose-700">{{ statusError }}</p>
+      </div>
 
       <div class="overflow-hidden rounded-2xl border border-violet-100 bg-white">
         <div class="border-b border-violet-100 p-4">
@@ -388,6 +618,54 @@ onMounted(loadLandingExtras)
           </article>
         </div>
       </div>
-    </section>
-  </Card>
+    </template>
+  </div>
+
+  <AdminContentFooterPreviewModal
+    :open="previewOpen"
+    :title="previewTitle"
+    url=""
+    :content-html="previewHtml"
+    @close="previewOpen = false"
+  />
+
+  <Modal
+    :open="selectedShowact !== null"
+    size="xl"
+    :title="selectedShowact ? `${selectedShowact.artistName} · Showact-Details` : 'Showact-Details'"
+    :subtitle="selectedShowact ? `${statusLabel(selectedShowact.status)} · Eingereicht am ${new Date(selectedShowact.createdAt).toLocaleString('de-DE')}` : undefined"
+    @close="closeShowactDetails"
+  >
+    <div v-if="selectedShowact" class="space-y-6">
+      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Artist</p>
+          <p class="mt-1 text-sm font-semibold text-slate-900">{{ selectedShowact.artistName }}</p>
+        </div>
+        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Status</p>
+          <p class="mt-1 text-sm font-semibold text-slate-900">{{ statusLabel(selectedShowact.status) }}</p>
+        </div>
+        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">E-Mail</p>
+          <p class="mt-1 text-sm font-semibold text-slate-900">{{ selectedShowact.contactEmail || 'Nicht angegeben' }}</p>
+        </div>
+        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Discord</p>
+          <p class="mt-1 text-sm font-semibold text-slate-900">{{ selectedShowact.contactDiscord || 'Nicht angegeben' }}</p>
+        </div>
+      </div>
+
+      <div class="grid gap-3 md:grid-cols-2">
+        <div
+          v-for="detail in showactSubmissionDetails"
+          :key="detail.key"
+          class="rounded-2xl border border-violet-100 bg-white px-4 py-3"
+        >
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{{ detail.label }}</p>
+          <p class="mt-1 whitespace-pre-wrap break-words text-sm leading-6 text-slate-800">{{ detail.value }}</p>
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>

frontend/src/components/admin/AdminContentPageSection.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex justify-end gap-2">
+      <Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-violet-200 bg-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100" @click="previewOpen = true">
+        <Eye class="h-4 w-4" />
+        Preview öffnen
+      </Button>
+      <Button :disabled="saving" size="sm" class="gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-fuchsia-500 shadow-violet-500/20" @click="onSave">
+        <Save class="h-4 w-4" />
+        {{ saving ? 'Speichert ...' : `${props.label} speichern` }}
+      </Button>
+    </div>
+    <AdminRichTextEditor
+      v-model="form[props.contentKey]"
+      :label="props.label"
+      :placeholder="props.placeholder"
+      min-height-class="min-h-[420px]"
+    />
+  </div>
+
+  <AdminContentFooterPreviewModal
+    :open="previewOpen"
+    :title="props.label"
+    url=""
+    :content-html="previewHtml"
+    @close="previewOpen = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Eye, Save } from '@lucide/vue'
+
+import { privacyContentToHtml } from '../../lib/privacyContent'
+import Button from '../ui/Button.vue'
+import AdminContentFooterPreviewModal from './AdminContentFooterPreviewModal.vue'
+import AdminRichTextEditor from './AdminRichTextEditor.vue'
+import type { AdminContentForm } from './adminContentTypes'
+
+const props = defineProps<{
+  form: AdminContentForm
+  saving: boolean
+  label: string
+  placeholder: string
+  contentKey: 'imprintContent' | 'contactContent' | 'sponsorsContent'
+  saveSiteSettings: (sectionLabel?: string) => Promise<void>
+}>()
+
+const previewOpen = ref(false)
+const previewHtml = computed(() => privacyContentToHtml(props.form[props.contentKey]))
+
+function onSave() {
+  return props.saveSiteSettings(props.label)
+}
+</script>

frontend/src/components/admin/AdminContentPrivacySection.vue

@@ -31,9 +31,13 @@
           <p class="mt-2 text-lg font-semibold text-slate-900">{{ updatedLabel }}</p>
         </div>
       </div>
+      <label class="mt-6 block space-y-2">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Datenschutz E-Mail</span>
+        <input v-model="form.privacyEmail" type="email" placeholder="datenschutz@..." class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
+      </label>
       <AdminRichTextEditor
         v-model="form.privacyPolicyContent"
-        class="mt-6"
+        class="mt-4"
         label="Datenschutz Inhalt"
         placeholder="Datenschutztext..."
         min-height-class="min-h-[560px]"

frontend/src/components/admin/AdminDemoPreviewCard.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { KeyRound } from '@lucide/vue'
+
+import type { AdminOperationalSettingsForm } from './adminSettingsTypes'
+import AdminSettingsToggle from './AdminSettingsToggle.vue'
+import PasswordField from '../ui/PasswordField.vue'
+
+defineProps<{
+  form: AdminOperationalSettingsForm
+  saving: boolean
+  canManage: boolean
+  demoPassword: string
+  demoPasswordHint: string
+  demoPasswordSet: boolean
+  demoManagedByDatabase: boolean
+  demoCredentialsComplete: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:demoPassword': [value: string]
+}>()
+</script>
+
+<template>
+  <section class="rounded-[26px] border border-violet-100 bg-white/85 p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]">
+    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+      <div class="flex gap-3">
+        <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
+          <KeyRound class="h-5 w-5" />
+        </div>
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Demo Login</p>
+          <h3 class="mt-1 text-xl font-bold text-slate-900">Landingpage temporär sperren</h3>
+          <p class="mt-1 text-sm leading-6 text-slate-500">
+            Für Demo-Deployments oder nicht öffentliche Tests. Danach kann der Schutz hier wieder aus.
+          </p>
+        </div>
+      </div>
+
+      <AdminSettingsToggle
+        v-model="form.demoLoginEnabled"
+        label="Demo Login aktivieren"
+        :disabled="saving || !canManage"
+      />
+    </div>
+
+    <p
+      v-if="form.demoLoginEnabled && !demoCredentialsComplete"
+      class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-800"
+    >
+      Zum Aktivieren fehlen noch Login, Twitch-ID, Anzeigename oder ein gesetztes Passwort.
+    </p>
+
+    <div class="mt-5 grid gap-4 md:grid-cols-2">
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Login</span>
+        <input v-model="form.demoLoginIdentifier" :disabled="saving || !canManage" type="text" autocomplete="username" placeholder="E-Mail oder Username" class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400" />
+        <span class="mt-2 block text-xs leading-5 text-slate-500">E-Mail, Username oder dieselbe Kennung wie die Twitch-ID.</span>
+      </label>
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Passwort setzen</span>
+        <PasswordField
+          :model-value="demoPassword"
+          :disabled="saving || !canManage"
+          autocomplete="new-password"
+          placeholder="Leer lassen = behalten"
+          root-class="mt-2"
+          input-class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
+          @update:model-value="emit('update:demoPassword', $event)"
+        />
+        <span class="mt-2 block text-xs leading-5 text-slate-500">{{ demoPasswordHint }}</span>
+      </label>
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Twitch-ID</span>
+        <input v-model="form.demoLoginTwitchUserId" :disabled="saving || !canManage" type="text" class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400" />
+      </label>
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
+        <input v-model="form.demoLoginDisplayName" :disabled="saving || !canManage" type="text" class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400" />
+      </label>
+    </div>
+
+    <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold">
+      <span class="rounded-full bg-violet-50 px-3 py-1 text-violet-700">{{ demoManagedByDatabase ? 'Quelle: Datenbank' : 'Quelle: Config' }}</span>
+      <span class="rounded-full px-3 py-1" :class="demoPasswordSet ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
+        {{ demoPasswordSet ? 'Passwort vorhanden' : 'Passwort fehlt' }}
+      </span>
+    </div>
+  </section>
+</template>

frontend/src/components/admin/AdminMaintenanceModeCard.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ShieldCheck, Wrench } from '@lucide/vue'
+import { RouterLink } from 'vue-router'
+
+import type { AdminOperationalSettingsForm } from './adminSettingsTypes'
+import AdminSettingsToggle from './AdminSettingsToggle.vue'
+
+defineProps<{
+  form: AdminOperationalSettingsForm
+  saving: boolean
+  canManage: boolean
+}>()
+</script>
+
+<template>
+  <section class="rounded-[26px] border p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]" :class="form.maintenanceModeEnabled ? 'border-amber-200 bg-amber-50/70' : 'border-violet-100 bg-white/85'">
+    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+      <div class="flex gap-3">
+        <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl" :class="form.maintenanceModeEnabled ? 'bg-amber-100 text-amber-700' : 'bg-violet-100 text-violet-700'">
+          <Wrench class="h-5 w-5" />
+        </div>
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-[0.22em]" :class="form.maintenanceModeEnabled ? 'text-amber-600' : 'text-violet-500'">Wartungsmodus</p>
+          <h3 class="mt-1 text-xl font-bold text-slate-900">Sternenpause anzeigen</h3>
+          <p class="mt-1 text-sm leading-6 text-slate-500">
+            Besucher landen auf der Wartungsseite. Login und Admin bleiben erreichbar.
+          </p>
+        </div>
+      </div>
+
+      <AdminSettingsToggle
+        v-model="form.maintenanceModeEnabled"
+        label="Wartungsmodus aktivieren"
+        tone="amber"
+        :disabled="saving || !canManage"
+      />
+    </div>
+
+    <div class="mt-5 space-y-4">
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel der Wartungsseite</span>
+        <input v-model="form.maintenanceTitle" :disabled="saving || !canManage" type="text" maxlength="120" class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400" />
+      </label>
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Hinweistext</span>
+        <textarea v-model="form.maintenanceMessage" :disabled="saving || !canManage" rows="4" maxlength="600" class="mt-2 w-full resize-none rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm font-semibold leading-6 text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"></textarea>
+      </label>
+      <RouterLink to="/maintenance?preview=true" class="inline-flex h-11 items-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-violet-700 transition hover:bg-violet-50">
+        <ShieldCheck class="h-4 w-4" />
+        Wartungsseite ansehen
+      </RouterLink>
+    </div>
+  </section>
+</template>

frontend/src/components/admin/AdminNominationReviewModal.vue

@@ -1,52 +1,51 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { Sparkles, X } from '@lucide/vue'
 
 import AdminReviewDecisionPanel from './AdminReviewDecisionPanel.vue'
-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'
+import type { AdminCandidateItem, AdminNominationReviewGroup, AdminNominationReviewItem } from '../../types/awards'
 
 const props = defineProps<{
   open: boolean
+  nomination: AdminNominationReviewGroup | null
+  reviewSaving: number | null
+  reviewForm: {
+    displayName: string
+    channelSlug: string
+    platform: string
+    categoryId: number | null
+    reviewNote: string
+  } | null
+  candidatePlatformOptions: Array<{ key: string; label: string }>
+  categoryOptions: Array<{ id: number; label: string }>
+  selectedCandidateCollision: AdminCandidateItem | null
+  selectedRelatedPendingNominations?: AdminNominationReviewItem[]
+  signalSummary?: {
+    submissions: number
+    uniqueSubmitters: number
+    platforms: string[]
+  } | null
+  trackingReviewNotes?: string
+  selectedNominationHasBlockingFlag?: boolean
+  streamUrl?: string
+  canApproveSelected: boolean
+  blacklistSaving: boolean
+  selectedPlatformValue: (platform: string) => string
+  trackerStatusMeta: (status: string) => { label: string; toneClass: string; hint: string }
 }>()
 
 const emit = defineEmits<{
   close: []
+  'platform-change': [value: string]
+  approve: [nominationId: number]
+  reject: [nominationId: number]
+  reviewFlagged: [nominationId: number]
+  overrideFlagged: [nominationId: number]
+  'blacklist-link': [streamUrl: string]
 }>()
 
-const {
-  reviewSaving,
-  blacklistSaving,
-  adminMessage,
-  adminError,
-  reviewForms,
-  seasonDetail,
-  reviewFilter,
-  categoryFilter,
-  selectedNominationId,
-  candidatePlatformOptions,
-  filteredNominations,
-  selectedNomination,
-  reviewStats,
-  reviewedNominations,
-  categoryOptions,
-  selectedCandidateCollision,
-  selectedRelatedPendingNominations,
-  selectedNominationSignalSummary,
-  canApproveSelected,
-  approveNomination,
-  rejectNomination,
-  addStreamUrlToBlacklist,
-  selectedPlatformValue,
-  handlePlatformSelection,
-  extractNominationStreamUrl,
-} = useAdminReviewsManager()
-
-watchAdminToast(adminMessage, adminError)
+const modalTitle = computed(() => props.nomination?.displayName || 'Nominierung entscheiden')
 
 function closeModal() {
   emit('close')
@@ -84,7 +83,7 @@ onBeforeUnmount(() => {
               </span>
               <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Review-Fokus</p>
             </div>
-            <h2 class="mt-3 text-2xl font-bold text-slate-950">Nominierung entscheiden</h2>
+            <h2 class="mt-3 text-2xl font-bold text-slate-950">{{ modalTitle }}</h2>
             <p class="mt-1 max-w-2xl text-sm leading-6 text-slate-500">
               Die Nominierungsliste bleibt scanbar; Entscheidungen laufen hier konzentriert mit Queue, Prüfung und Kandidatenübernahme.
             </p>
@@ -99,83 +98,30 @@ onBeforeUnmount(() => {
           </button>
         </header>
 
-        <div class="min-h-0 overflow-y-auto bg-white">
-          <AdminReviewsQueueHeader
-            v-model:review-filter="reviewFilter"
-            v-model:category-filter="categoryFilter"
-            :total-pending="seasonDetail.pendingNominations.length"
-            :visible-count="filteredNominations.length"
-            :review-stats="reviewStats"
+        <div class="min-h-0 overflow-y-auto p-4 sm:p-6">
+          <AdminReviewDecisionPanel
+            :nomination="nomination"
+            :review-saving="reviewSaving"
+            :review-form="reviewForm"
+            :candidate-platform-options="candidatePlatformOptions"
             :category-options="categoryOptions"
+            :selected-candidate-collision="selectedCandidateCollision"
+            :selected-related-pending-nominations="selectedRelatedPendingNominations"
+            :signal-summary="signalSummary"
+            :tracking-review-notes="trackingReviewNotes"
+            :selected-nomination-has-blocking-flag="selectedNominationHasBlockingFlag"
+            :stream-url="streamUrl"
+            :can-approve-selected="canApproveSelected"
+            :blacklist-saving="blacklistSaving"
+            :selected-platform-value="selectedPlatformValue"
+            :tracker-status-meta="trackerStatusMeta"
+            @platform-change="emit('platform-change', $event)"
+            @approve="emit('approve', $event)"
+            @reject="emit('reject', $event)"
+            @review-flagged="emit('reviewFlagged', $event)"
+            @override-flagged="emit('overrideFlagged', $event)"
+            @blacklist-link="emit('blacklist-link', $event)"
           />
-
-          <div class="space-y-4 p-4 sm:p-6">
-            <div class="grid gap-5 xl:grid-cols-[minmax(300px,0.8fr)_minmax(0,1.2fr)]">
-              <div class="space-y-2">
-                <!-- Keyboard shortcut legend — fixed above scrollable list -->
-                <div v-if="filteredNominations.length > 0" class="flex flex-wrap items-center gap-x-4 gap-y-1.5 rounded-2xl border border-violet-100 bg-violet-50/60 px-3 py-2">
-                  <span class="text-[10px] font-bold uppercase tracking-[0.16em] text-violet-500">Tastaturkürzel</span>
-                  <span class="flex items-center gap-1.5">
-                    <span class="inline-flex gap-0.5">
-                      <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-violet-200 bg-white px-1 text-[10px] font-bold text-violet-700 shadow-sm">↑</kbd>
-                      <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-violet-200 bg-white px-1 text-[10px] font-bold text-violet-700 shadow-sm">↓</kbd>
-                    </span>
-                    <span class="text-[11px] text-slate-500">/ </span>
-                    <span class="inline-flex gap-0.5">
-                      <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-violet-200 bg-white px-1 text-[10px] font-bold text-violet-700 shadow-sm">J</kbd>
-                      <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-violet-200 bg-white px-1 text-[10px] font-bold text-violet-700 shadow-sm">K</kbd>
-                    </span>
-                    <span class="text-[11px] text-slate-500">Navigieren</span>
-                  </span>
-                  <span class="flex items-center gap-1.5">
-                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-emerald-200 bg-emerald-50 px-1.5 text-[10px] font-bold text-emerald-700 shadow-sm">A</kbd>
-                    <span class="text-[11px] text-slate-500">Annehmen</span>
-                  </span>
-                  <span class="flex items-center gap-1.5">
-                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-rose-200 bg-rose-50 px-1.5 text-[10px] font-bold text-rose-700 shadow-sm">R</kbd>
-                    <span class="text-[11px] text-slate-500">Ablehnen</span>
-                  </span>
-                </div>
-
-                <AdminReviewsQueueList
-                  :nominations="filteredNominations"
-                  :total-pending="seasonDetail.pendingNominations.length"
-                  :selected-nomination-id="selectedNominationId"
-                  @select="selectedNominationId = $event"
-                />
-              </div>
-
-              <AdminReviewDecisionPanel
-                :nomination="selectedNomination"
-                :review-saving="reviewSaving"
-                :review-form="selectedNomination ? reviewForms[selectedNomination.id] : null"
-                :candidate-platform-options="candidatePlatformOptions"
-                :selected-candidate-collision="selectedCandidateCollision"
-                :selected-related-pending-nominations="selectedRelatedPendingNominations"
-                :signal-summary="selectedNominationSignalSummary"
-                :stream-url="selectedNomination ? extractNominationStreamUrl(selectedNomination) : ''"
-                :can-approve-selected="canApproveSelected"
-                :blacklist-saving="blacklistSaving"
-                :selected-platform-value="selectedPlatformValue"
-                @platform-change="handlePlatformSelection"
-                @approve="approveNomination"
-                @reject="rejectNomination"
-                @blacklist-link="addStreamUrlToBlacklist"
-              />
-            </div>
-
-            <details class="rounded-[24px] border border-violet-100 bg-violet-50/40">
-              <summary class="cursor-pointer px-5 py-4 text-sm font-semibold text-violet-900">
-                Letzte Entscheidungen anzeigen
-              </summary>
-              <div class="border-t border-violet-100 p-5">
-                <AdminReviewsHistorySection
-                  :reviewed-nominations="reviewedNominations"
-                  :reviewed-total="seasonDetail.reviewedNominations.length"
-                />
-              </div>
-            </details>
-          </div>
         </div>
       </section>
     </div>

frontend/src/components/admin/AdminOperationalSettingsCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { KeyRound, Loader2, LockKeyhole, Save, Settings, ShieldCheck, Wrench } from '@lucide/vue'
+import { Clock3, KeyRound, Loader2, LockKeyhole, Save, Settings, ShieldCheck, Wrench } from '@lucide/vue'
 import { RouterLink } from 'vue-router'
 
 import type { AdminOperationalSettingsForm, AdminSettingsStatusSummary, AdminSettingsTone } from './adminSettingsTypes'
@@ -225,6 +225,39 @@ function toneClasses(tone: AdminSettingsTone) {
           </div>
         </section>
 
+        <section class="rounded-[26px] border border-violet-100 bg-white/85 p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]">
+          <div class="flex gap-3">
+            <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
+              <Clock3 class="h-5 w-5" />
+            </div>
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Session Timeout</p>
+              <h3 class="mt-1 text-xl font-bold text-slate-900">Automatischer Logout bei Inaktivitaet</h3>
+              <p class="mt-1 text-sm leading-6 text-slate-500">
+                Team- und Admin-Sessions werden nach der eingestellten Zeit ohne Aktivitaet automatisch beendet. Minimum sind 3 Stunden.
+              </p>
+            </div>
+          </div>
+
+          <div class="mt-5 grid gap-4 md:grid-cols-[minmax(0,220px)_1fr] md:items-start">
+            <label class="block">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Inaktiv nach Stunden</span>
+              <input
+                v-model.number="form.sessionIdleTimeoutHours"
+                :disabled="saving || !canManage"
+                type="number"
+                min="3"
+                step="1"
+                inputmode="numeric"
+                class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
+              />
+            </label>
+            <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm leading-6 text-violet-900">
+              Der Logout reagiert auf echte Nutzeraktivitaet wie Klicks, Tasten, Scrollen oder Touch. Die Session bleibt serverseitig trotzdem autoritativ und laeuft spaetestens nach 30 Tagen absolut ab.
+            </div>
+          </div>
+        </section>
+
         <section class="rounded-[26px] border p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]" :class="form.maintenanceModeEnabled ? 'border-amber-200 bg-amber-50/70' : 'border-violet-100 bg-white/85'">
           <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
             <div class="flex gap-3">

frontend/src/components/admin/AdminOptionalFeaturesEditor.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { Save } from '@lucide/vue'
+
+import AdminSettingsToggle from './AdminSettingsToggle.vue'
+import Button from '../ui/Button.vue'
+import Card from '../ui/Card.vue'
+
+defineProps<{
+  form: {
+    clipSubmissionsEnabled: boolean
+    clipReviewEnabled: boolean
+    clipAdminMenuVisible: boolean
+    clipSubmissionDisabledMessage: string
+  }
+  saving: boolean
+  dirty: boolean
+  canManage: boolean
+}>()
+
+const emit = defineEmits<{
+  save: []
+  'update:clipSubmissionsEnabled': [value: boolean]
+  'update:clipReviewEnabled': [value: boolean]
+  'update:clipAdminMenuVisible': [value: boolean]
+  'update:clipSubmissionDisabledMessage': [value: string]
+}>()
+</script>
+
+<template>
+  <Card class="overflow-hidden">
+    <section class="border-b border-violet-100 p-5">
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div class="min-w-0">
+          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Optionale Workflows</p>
+          <h2 class="mt-2 text-lg font-bold text-slate-900">Clip-Einreichungen direkt steuern</h2>
+          <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-500">
+            Clip-Einreichung und Clip-Review sind optionale Betriebsfunktionen. Wenn deaktiviert, bleibt der Award-Workflow ohne Clip-Pflicht nutzbar.
+          </p>
+        </div>
+
+        <Button class="gap-2" :disabled="saving || !dirty || !canManage" @click="emit('save')">
+          <Save class="h-4 w-4" />
+          {{ saving ? 'Speichert ...' : 'Clip-Workflow speichern' }}
+        </Button>
+      </div>
+    </section>
+
+    <section v-if="!canManage" class="border-b border-amber-100 bg-amber-50 px-5 py-3 text-sm font-semibold text-amber-800">
+      Du kannst den Clip-Workflow ansehen, aber nicht bearbeiten.
+    </section>
+
+    <section class="space-y-5 p-5">
+      <section class="grid gap-3 md:grid-cols-2">
+        <div class="rounded-2xl border border-violet-100 bg-violet-50/45 p-4">
+          <div class="flex items-start justify-between gap-4">
+            <div>
+              <h4 class="text-base font-bold text-slate-900">Public-Einreichung</h4>
+              <p class="mt-1 text-sm leading-6 text-slate-500">
+                Besucher können während der passenden Phase Clips einreichen.
+              </p>
+            </div>
+            <AdminSettingsToggle
+              :model-value="form.clipSubmissionsEnabled"
+              label="Clip-Einreichung aktivieren"
+              :disabled="!canManage"
+              active-label="Aktiv"
+              inactive-label="Inaktiv"
+              @update:model-value="emit('update:clipSubmissionsEnabled', $event)"
+            />
+          </div>
+        </div>
+
+        <div class="rounded-2xl border border-violet-100 bg-violet-50/45 p-4">
+          <div class="flex items-start justify-between gap-4">
+            <div>
+              <h4 class="text-base font-bold text-slate-900">Admin-Review</h4>
+              <p class="mt-1 text-sm leading-6 text-slate-500">
+                Clip-Bestand und Alt-Einreichungen bleiben als optionale Inbox sichtbar.
+              </p>
+            </div>
+            <AdminSettingsToggle
+              :model-value="form.clipReviewEnabled"
+              label="Admin-Review anzeigen"
+              :disabled="!canManage"
+              active-label="Sichtbar"
+              inactive-label="Aus"
+              @update:model-value="emit('update:clipReviewEnabled', $event)"
+            />
+          </div>
+        </div>
+      </section>
+
+      <div class="rounded-2xl border border-violet-100 bg-violet-50/45 p-4">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <h4 class="text-base font-bold text-slate-900">Menüpunkt „Clips" im Admin</h4>
+            <p class="mt-1 text-sm leading-6 text-slate-500">
+              Blendet den Clips-Menüpunkt im Admin-Panel ein oder aus, unabhängig von Einreichung und Review.
+            </p>
+          </div>
+          <AdminSettingsToggle
+            :model-value="form.clipAdminMenuVisible"
+            label="Clips-Menüpunkt anzeigen"
+            :disabled="!canManage"
+            active-label="Sichtbar"
+            inactive-label="Aus"
+            @update:model-value="emit('update:clipAdminMenuVisible', $event)"
+          />
+        </div>
+      </div>
+
+      <label class="block space-y-2">
+        <span class="text-sm font-bold text-slate-900">Hinweis bei deaktivierter Einreichung</span>
+        <textarea
+          :value="form.clipSubmissionDisabledMessage"
+          rows="3"
+          maxlength="240"
+          :disabled="!canManage"
+          class="w-full rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm leading-6 text-slate-700 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"
+          @input="emit('update:clipSubmissionDisabledMessage', ($event.target as HTMLTextAreaElement).value)"
+        />
+        <span class="text-xs font-semibold text-slate-500">
+          {{ form.clipSubmissionDisabledMessage.length }}/240 Zeichen
+        </span>
+      </label>
+
+      <section class="rounded-2xl border border-sky-100 bg-sky-50 px-4 py-3 text-sm leading-6 text-sky-800">
+        Nominierung, Voting und Gewinnerpflege laufen unabhängig davon weiter. Bestehende Clips werden nicht gelöscht.
+      </section>
+    </section>
+  </Card>
+</template>

frontend/src/components/admin/AdminReleaseNotesCard.vue

@@ -1,16 +1,39 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { BookOpenText, CheckCircle2, History, Info, Rocket, ShieldCheck, Sparkles, Tag } from '@lucide/vue'
+import { BookOpenText, CheckCircle2, ChevronDown, History, Info, Rocket, ShieldCheck, Sparkles, Tag } from '@lucide/vue'
 
-import { buildDateLabel, buildVersion, releaseNotes, semanticVersion, versionRules, type ReleaseChangeType } from '../../lib/releaseNotes'
+import { buildDateLabel, buildVersion, releaseNotes, releaseVersions, semanticVersion, versionRules, type ReleaseChangeType } from '../../lib/releaseNotes'
 import Button from '../ui/Button.vue'
 import Card from '../ui/Card.vue'
 import Modal from '../ui/Modal.vue'
 
 const changelogOpen = ref(false)
+const expandedVersions = ref<string[]>([releaseVersions[0]?.version ?? semanticVersion])
 
 const featureCount = computed(() => releaseNotes.filter((note) => note.type === 'feature').length)
 const fixCount = computed(() => releaseNotes.filter((note) => note.type === 'fix').length)
+const versionCount = computed(() => releaseVersions.length)
+
+function versionFeatureCount(version: typeof releaseVersions[number]) {
+  return version.notes.filter((note) => note.type === 'feature').length
+}
+
+function versionFixCount(version: typeof releaseVersions[number]) {
+  return version.notes.filter((note) => note.type === 'fix').length
+}
+
+function isVersionExpanded(version: string) {
+  return expandedVersions.value.includes(version)
+}
+
+function toggleVersion(version: string) {
+  if (isVersionExpanded(version)) {
+    expandedVersions.value = expandedVersions.value.filter((entry) => entry !== version)
+    return
+  }
+
+  expandedVersions.value = [version]
+}
 
 function changeTypeLabel(type: ReleaseChangeType) {
   if (type === 'major') return 'Major'
@@ -83,6 +106,11 @@ function changeTypeClasses(type: ReleaseChangeType) {
         <strong class="mt-1 block text-lg text-amber-700">{{ fixCount }}</strong>
         <p class="mt-1 text-xs leading-5 text-slate-600">Stabilitaet, UI-Feedback und Backend-Hygiene.</p>
       </div>
+      <div class="rounded-2xl border border-slate-200 bg-slate-50/70 px-4 py-3 md:col-span-3">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Versionen im Verlauf</p>
+        <strong class="mt-1 block text-lg text-slate-800">{{ versionCount }}</strong>
+        <p class="mt-1 text-xs leading-5 text-slate-600">Neueste Builds lassen sich im Changelog einzeln auf- und zuklappen.</p>
+      </div>
     </div>
   </Card>
 
@@ -115,32 +143,80 @@ function changeTypeClasses(type: ReleaseChangeType) {
       <section>
         <div class="flex items-center gap-2">
           <History class="h-4 w-4 text-violet-600" />
-          <h3 class="text-sm font-bold text-slate-900">Was neu ist</h3>
+          <h3 class="text-sm font-bold text-slate-900">Versionen & Aenderungen</h3>
         </div>
         <div class="mt-3 space-y-3">
-          <article
-            v-for="note in releaseNotes"
-            :key="note.title"
-            class="rounded-2xl border p-4"
-            :class="changeTypeClasses(note.type).panel"
+          <section
+            v-for="version in releaseVersions"
+            :key="version.version"
+            class="overflow-hidden rounded-[24px] border border-violet-100 bg-white/95 shadow-[0_16px_36px_rgba(124,92,255,0.08)]"
           >
-            <div class="flex items-start gap-3">
-              <div class="grid h-9 w-9 shrink-0 place-items-center rounded-xl" :class="changeTypeClasses(note.type).icon">
-                <Sparkles v-if="note.type === 'feature'" class="h-4 w-4" />
-                <ShieldCheck v-else-if="note.type === 'major'" class="h-4 w-4" />
-                <CheckCircle2 v-else class="h-4 w-4" />
-              </div>
+            <button
+              type="button"
+              class="flex w-full items-start justify-between gap-4 bg-gradient-to-r from-white via-violet-50/50 to-white px-5 py-4 text-left transition hover:bg-violet-50/70"
+              @click="toggleVersion(version.version)"
+            >
               <div class="min-w-0">
                 <div class="flex flex-wrap items-center gap-2">
-                  <h4 class="text-sm font-bold text-slate-900">{{ note.title }}</h4>
-                  <span class="rounded-full px-2.5 py-1 text-[11px] font-semibold" :class="changeTypeClasses(note.type).badge">
-                    {{ changeTypeLabel(note.type) }}
+                  <span class="rounded-full bg-slate-900 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white">
+                    {{ version.version }}
+                  </span>
+                  <span class="rounded-full px-2.5 py-1 text-[11px] font-semibold" :class="changeTypeClasses(version.releaseType).badge">
+                    {{ changeTypeLabel(version.releaseType) }}
+                  </span>
+                  <span class="text-xs font-semibold text-slate-500">
+                    {{ version.buildVersion ?? version.version }} · {{ version.buildDateLabel }}
                   </span>
                 </div>
-                <p class="mt-1 text-sm leading-6 text-slate-600">{{ note.description }}</p>
+                <h4 class="mt-3 text-base font-bold text-slate-900">{{ version.summary }}</h4>
+                <div class="mt-3 flex flex-wrap gap-2 text-xs font-semibold">
+                  <span class="rounded-full border border-violet-100 bg-violet-50 px-3 py-1 text-violet-700">
+                    {{ versionFeatureCount(version) }} Features
+                  </span>
+                  <span class="rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1 text-emerald-700">
+                    {{ versionFixCount(version) }} Fixes
+                  </span>
+                  <span class="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-slate-600">
+                    {{ version.notes.length }} Eintraege
+                  </span>
+                </div>
+              </div>
+              <span
+                class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl border border-violet-100 bg-white text-violet-700 transition"
+                :class="{ 'rotate-180': isVersionExpanded(version.version) }"
+              >
+                <ChevronDown class="h-4 w-4" />
+              </span>
+            </button>
+
+            <div v-if="isVersionExpanded(version.version)" class="border-t border-violet-100 bg-white px-5 py-4">
+              <div class="space-y-3">
+                <article
+                  v-for="note in version.notes"
+                  :key="`${version.version}-${note.title}`"
+                  class="rounded-2xl border p-4"
+                  :class="changeTypeClasses(note.type).panel"
+                >
+                  <div class="flex items-start gap-3">
+                    <div class="grid h-9 w-9 shrink-0 place-items-center rounded-xl" :class="changeTypeClasses(note.type).icon">
+                      <Sparkles v-if="note.type === 'feature'" class="h-4 w-4" />
+                      <ShieldCheck v-else-if="note.type === 'major'" class="h-4 w-4" />
+                      <CheckCircle2 v-else class="h-4 w-4" />
+                    </div>
+                    <div class="min-w-0">
+                      <div class="flex flex-wrap items-center gap-2">
+                        <h4 class="text-sm font-bold text-slate-900">{{ note.title }}</h4>
+                        <span class="rounded-full px-2.5 py-1 text-[11px] font-semibold" :class="changeTypeClasses(note.type).badge">
+                          {{ changeTypeLabel(note.type) }}
+                        </span>
+                      </div>
+                      <p class="mt-1 text-sm leading-6 text-slate-600">{{ note.description }}</p>
+                    </div>
+                  </div>
+                </article>
               </div>
             </div>
-          </article>
+          </section>
         </div>
       </section>
 

frontend/src/components/admin/AdminReviewDecisionPanel.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import { Ban, CheckCircle2, Loader2, Trash2 } from '@lucide/vue'
+import { Ban, CheckCircle2, Link2, Loader2, ShieldAlert, Trash2, UserRoundCheck, WandSparkles } from '@lucide/vue'
 
 import Button from '../ui/Button.vue'
 import NativeSelect from '../ui/NativeSelect.vue'
-import type { AdminCandidateItem, AdminNominationReviewItem } from '../../types/awards'
+import type { AdminCandidateItem, AdminNominationReviewGroup, AdminNominationReviewItem } from '../../types/awards'
 
-defineProps<{
-  nomination: AdminNominationReviewItem | null
+const props = defineProps<{
+  nomination: AdminNominationReviewGroup | null
   reviewSaving: number | null
   reviewForm: {
     displayName: string
     channelSlug: string
     platform: string
+    categoryId: number | null
     reviewNote: string
   } | null
   candidatePlatformOptions: Array<{ key: string; label: string }>
+  categoryOptions: Array<{ id: number; label: string }>
   selectedCandidateCollision: AdminCandidateItem | null
   selectedRelatedPendingNominations?: AdminNominationReviewItem[]
   signalSummary?: {
@@ -22,152 +24,291 @@ defineProps<{
     uniqueSubmitters: number
     platforms: string[]
   } | null
+  trackingReviewNotes?: string
+  selectedNominationHasBlockingFlag?: boolean
   streamUrl?: string
   canApproveSelected: boolean
   blacklistSaving: boolean
   selectedPlatformValue: (platform: string) => string
+  trackerStatusMeta: (status: string) => { label: string; toneClass: string; hint: string }
 }>()
 
 const emit = defineEmits<{
   'platform-change': [value: string]
   approve: [nominationId: number]
   reject: [nominationId: number]
+  reviewFlagged: [nominationId: number]
+  overrideFlagged: [nominationId: number]
   'blacklist-link': [streamUrl: string]
 }>()
+
+function avgViewerWindowLabel(nomination: AdminNominationReviewGroup) {
+  return nomination.trackingMetrics.find((metric) => metric.key === 'avg_viewers')?.windowLabel?.trim() ?? ''
+}
 </script>
 
 <template>
-  <div v-if="nomination && reviewForm" class="rounded-[26px] border border-violet-100 bg-white/90 p-5 shadow-[0_14px_36px_rgba(168,145,214,0.08)]">
-    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-      <div class="min-w-0">
-        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">{{ nomination.categoryName }}</p>
-        <h3 class="mt-1 text-xl font-bold text-slate-900">{{ nomination.candidateText || 'Name im Review festlegen' }}</h3>
-        <p class="mt-2 text-sm text-slate-500">
-          Eingereicht von {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
-        </p>
-      </div>
-      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-violet-800">
-        ID {{ nomination.id }}
-      </div>
-    </div>
+  <div v-if="nomination && reviewForm" class="rounded-[26px] border border-violet-100 bg-white/90 p-4 shadow-[0_14px_36px_rgba(168,145,214,0.08)] sm:p-5">
+    <div class="space-y-4">
+      <section class="rounded-[24px] border border-violet-100 bg-[linear-gradient(135deg,#fcfaff_0%,#ffffff_100%)] p-4 sm:p-5">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div class="min-w-0">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="rounded-full bg-violet-100 px-3 py-1 text-[10px] font-bold uppercase tracking-[0.18em] text-violet-800">
+                {{ nomination.categoryGroupName }}
+              </span>
+              <span class="rounded-full border border-violet-100 bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-[0.18em] text-slate-500">
+                Gruppe #{{ nomination.id }}
+              </span>
+            </div>
+            <h3 class="mt-3 break-words text-xl font-bold text-slate-900 sm:text-2xl">{{ nomination.displayName || 'Name im Review festlegen' }}</h3>
+            <p class="mt-2 text-sm leading-6 text-slate-500">
+              {{ nomination.uniqueSubmitterCount }} eindeutige Nominierende · {{ nomination.nominationTally }} Nominierungen · zuletzt {{ new Date(nomination.lastSubmittedAt).toLocaleString('de-DE') }}
+            </p>
+          </div>
 
-    <div v-if="streamUrl" class="mt-5 rounded-2xl border border-sky-100 bg-sky-50/70 p-4">
-      <p class="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700">Eingereichter Stream-Link</p>
-      <div class="mt-2 flex flex-wrap items-center gap-2">
-        <a
-          :href="streamUrl"
-          target="_blank"
-          rel="noopener"
-          class="inline-flex max-w-full items-center rounded-full border border-sky-200 bg-white px-3 py-1.5 text-sm font-semibold text-sky-800 underline-offset-4 hover:underline"
-        >
-          <span class="truncate">{{ streamUrl }}</span>
-        </a>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          class="gap-2 rounded-full border-rose-200 bg-white px-3 text-rose-700 hover:bg-rose-50 hover:text-rose-800"
-          :disabled="blacklistSaving"
-          @click="emit('blacklist-link', streamUrl)"
-        >
-          <Loader2 v-if="blacklistSaving" class="h-3.5 w-3.5 animate-spin" />
-          <Ban v-else class="h-3.5 w-3.5" />
-          {{ blacklistSaving ? 'Blockiert ...' : 'Zur Blacklist' }}
-        </Button>
-      </div>
-    </div>
+          <div
+            class="rounded-2xl border px-4 py-3 text-sm"
+            :class="props.trackerStatusMeta(nomination.trackerStatus).toneClass"
+          >
+            <p class="text-[10px] font-bold uppercase tracking-[0.18em]">Tracker</p>
+            <p class="mt-1 font-semibold">{{ props.trackerStatusMeta(nomination.trackerStatus).label }}</p>
+          </div>
+        </div>
 
-    <div v-if="signalSummary" class="mt-4 grid gap-3 sm:grid-cols-3">
-      <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
-        <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Einreichungen</p>
-        <strong class="mt-1 block text-xl text-violet-900">{{ signalSummary.submissions }}</strong>
-      </div>
-      <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
-        <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Eindeutige User</p>
-        <strong class="mt-1 block text-xl text-violet-900">{{ signalSummary.uniqueSubmitters }}</strong>
-      </div>
-      <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
-        <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Plattformen</p>
-        <strong class="mt-1 block truncate text-sm text-violet-900">{{ signalSummary.platforms.join(', ') || 'keine' }}</strong>
-      </div>
-    </div>
+        <div class="mt-4 grid gap-3 sm:grid-cols-3">
+          <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Tier-Vorschlag</p>
+            <strong class="mt-1 block text-sm text-violet-900">{{ nomination.suggestedCategoryName || 'manuell wählen' }}</strong>
+          </div>
+          <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Avg Viewer <span v-if="avgViewerWindowLabel(nomination)">· {{ avgViewerWindowLabel(nomination) }}</span></p>
+            <strong class="mt-1 block text-xl text-violet-900">{{ nomination.avgViewers ?? 'offen' }}</strong>
+          </div>
+          <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Plattformen</p>
+            <strong class="mt-1 block text-sm text-violet-900">{{ signalSummary?.platforms.join(', ') || nomination.resolvedPlatform || 'keine' }}</strong>
+          </div>
+        </div>
+      </section>
 
-    <div class="mt-5 rounded-2xl border border-violet-100 bg-violet-50/50 p-4">
-      <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Als Kandidat übernehmen</p>
-      <div class="mt-4 grid gap-4 md:grid-cols-3">
-        <label class="space-y-2">
-          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
-          <input
-            v-model="reviewForm.displayName"
-            type="text"
-            class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
-            placeholder="Anzeigename"
-          />
-        </label>
-        <label class="space-y-2">
-          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Handle</span>
-          <input
-            v-model="reviewForm.channelSlug"
-            type="text"
-            class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
-            placeholder="channel"
-          />
-        </label>
-        <label class="space-y-2">
-          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform</span>
-          <NativeSelect
-            :model-value="selectedPlatformValue(reviewForm.platform)"
-            :options="[
-              ...candidatePlatformOptions.map((option) => ({ label: option.label, value: option.key })),
-              { label: 'Eigene Plattform', value: 'custom' },
-            ]"
-            @update:model-value="emit('platform-change', String($event))"
-          />
-        </label>
-      </div>
-      <label v-if="selectedPlatformValue(reviewForm.platform) === 'custom'" class="mt-3 block space-y-2">
-        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Eigene Plattform</span>
-        <input
-          v-model="reviewForm.platform"
-          type="text"
-          class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
-          placeholder="z. B. Cake, Booth, neue Plattform"
-        />
-      </label>
-      <p v-if="selectedCandidateCollision" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800">
-        Mögliches Duplikat: {{ selectedCandidateCollision.displayName }} ist in dieser Kategorie bereits vorhanden. Übernimm nur, wenn es wirklich ein separater Kandidat ist; Alias-/Merge-Pflege gehört danach in Kandidaten.
-      </p>
-      <div v-if="selectedRelatedPendingNominations?.length" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800">
-        <p class="font-semibold">Weitere offene Einreichungen für denselben Namen oder Link:</p>
-        <ul class="mt-2 space-y-1">
-          <li v-for="related in selectedRelatedPendingNominations" :key="related.id">
-            ID {{ related.id }} · {{ related.submittedByTwitchId }} · {{ related.candidateText || related.streamUrl || related.reviewNote || 'Name offen' }}
-          </li>
-        </ul>
-      </div>
-      <p v-if="!canApproveSelected" class="mt-3 rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-700">
-        Anzeigename, Handle und Plattform sind Pflicht, damit der Kandidat später im Voting eindeutig erscheint.
-      </p>
-      <label class="mt-3 block space-y-2">
-        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Moderationsnotiz</span>
-        <textarea
-          v-model="reviewForm.reviewNote"
-          rows="3"
-          class="w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
-          placeholder="Warum wurde übernommen oder verworfen?"
-        />
-      </label>
-    </div>
+      <div class="grid gap-4 xl:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]">
+        <div class="space-y-4">
+          <section class="rounded-[24px] border border-violet-100 bg-violet-50/35 p-4">
+            <div class="flex items-center gap-2">
+              <Link2 class="h-4 w-4 text-sky-700" />
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-700">Quelle & Signale</p>
+            </div>
 
-    <div class="mt-4 flex flex-wrap justify-end gap-3">
-      <Button :disabled="reviewSaving === nomination.id" variant="secondary" @click="emit('reject', nomination.id)">
-        <Trash2 class="mr-2 h-4 w-4" />
-        {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Verwerfen' }}
-      </Button>
-      <Button :disabled="reviewSaving === nomination.id || !canApproveSelected" @click="emit('approve', nomination.id)">
-        <CheckCircle2 class="mr-2 h-4 w-4" />
-        {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Als Kandidat übernehmen' }}
-      </Button>
+            <div v-if="streamUrl" class="mt-3 rounded-2xl border border-sky-100 bg-white p-3">
+              <a
+                :href="streamUrl"
+                target="_blank"
+                rel="noopener"
+                class="block truncate text-sm font-semibold text-sky-800 underline-offset-4 hover:underline"
+              >
+                {{ streamUrl }}
+              </a>
+              <div class="mt-3 flex flex-wrap gap-2">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  class="gap-2 rounded-full border-rose-200 bg-rose-50 px-3 text-rose-700 hover:bg-rose-100 hover:text-rose-800"
+                  :disabled="blacklistSaving"
+                  @click="emit('blacklist-link', streamUrl)"
+                >
+                  <Loader2 v-if="blacklistSaving" class="h-3.5 w-3.5 animate-spin" />
+                  <Ban v-else class="h-3.5 w-3.5" />
+                  {{ blacklistSaving ? 'Blockiert ...' : 'Zur Blacklist' }}
+                </Button>
+              </div>
+            </div>
+
+            <div v-if="signalSummary" class="mt-3 grid gap-3 sm:grid-cols-3">
+              <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+                <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Nominierungen</p>
+                <strong class="mt-1 block text-xl text-violet-900">{{ signalSummary.submissions }}</strong>
+              </div>
+              <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+                <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Eindeutige Nominierende</p>
+                <strong class="mt-1 block text-xl text-violet-900">{{ signalSummary.uniqueSubmitters }}</strong>
+              </div>
+              <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+                <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Status</p>
+                <strong class="mt-1 block text-sm text-violet-900">{{ props.trackerStatusMeta(nomination.trackerStatus).label }}</strong>
+              </div>
+            </div>
+
+            <div v-if="selectedRelatedPendingNominations?.length" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50/75 p-4">
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-800">Nominierungen dieser Gruppe</p>
+              <div class="mt-3 space-y-2">
+                <div
+                  v-for="related in selectedRelatedPendingNominations"
+                  :key="related.id"
+                  class="rounded-2xl border border-amber-100 bg-white px-3 py-2 text-sm text-slate-700"
+                >
+                  <p class="font-semibold">#{{ related.id }} · {{ related.submittedByTwitchId }}</p>
+                  <p class="mt-1 break-words text-slate-500">{{ related.candidateText || related.streamUrl || related.reviewNote || 'Name offen' }}</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section
+            class="rounded-[24px] border p-4"
+            :class="nomination.trackingReviewStatus === 'overridden' ? 'border-emerald-100 bg-emerald-50/70' : nomination.requiresManualReview ? 'border-amber-100 bg-amber-50/70' : 'border-violet-100 bg-white'"
+          >
+            <div class="flex items-center gap-2">
+              <ShieldAlert class="h-4 w-4" :class="nomination.requiresManualReview ? 'text-amber-700' : 'text-violet-600'" />
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em]" :class="nomination.requiresManualReview ? 'text-amber-800' : 'text-violet-500'">Tracking Review</p>
+            </div>
+
+            <p class="mt-2 text-sm font-semibold text-slate-900">{{ props.trackerStatusMeta(nomination.trackerStatus).hint }}</p>
+
+            <div v-if="nomination.trackingFlags.length" class="mt-3 flex flex-wrap gap-2">
+              <span
+                v-for="flag in nomination.trackingFlags"
+                :key="flag.key"
+                class="rounded-full border border-amber-200 bg-white px-3 py-1 text-xs font-semibold text-amber-800"
+              >
+                {{ flag.label }}<span v-if="flag.blocksApproval"> · blockiert</span>
+              </span>
+            </div>
+
+            <div v-if="nomination.trackingMetrics.length" class="mt-4 grid gap-3 md:grid-cols-2">
+              <div v-for="metric in nomination.trackingMetrics" :key="metric.key" class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
+                <div class="flex items-center justify-between gap-3">
+                  <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">{{ metric.label }}</p>
+                  <span
+                    class="rounded-full border px-2 py-0.5 text-[10px] font-semibold"
+                    :class="metric.sourceSupport === 'auto'
+                      ? (metric.present ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-rose-200 bg-rose-50 text-rose-700')
+                      : 'border-slate-200 bg-slate-50 text-slate-700'"
+                  >
+                    {{ metric.sourceSupport === 'auto' ? (metric.present ? 'vorhanden' : 'fehlt') : (metric.sourceSupport === 'manual' ? 'manuell' : 'kontext') }}
+                  </span>
+                </div>
+                <strong class="mt-1 block text-sm text-violet-900">{{ metric.value }}</strong>
+                <p class="mt-1 text-xs text-slate-500">{{ metric.required ? 'Pflichtmetrik' : 'Optionale Metrik' }} · {{ metric.windowLabel }}</p>
+              </div>
+            </div>
+
+            <div v-if="trackingReviewNotes" class="mt-4 rounded-2xl border border-sky-100 bg-sky-50/70 p-4">
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-700">Manual Review Notes</p>
+              <pre class="mt-2 whitespace-pre-wrap text-sm leading-6 text-sky-900">{{ trackingReviewNotes }}</pre>
+            </div>
+
+          </section>
+        </div>
+
+        <div class="space-y-4">
+          <section class="rounded-[24px] border border-violet-100 bg-violet-50/45 p-4 sm:p-5">
+            <div class="flex items-center gap-2">
+              <UserRoundCheck class="h-4 w-4 text-violet-700" />
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-violet-600">Kandidaten-Übernahme</p>
+            </div>
+
+            <div class="mt-4 grid gap-4 sm:grid-cols-2">
+              <label class="space-y-2">
+                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
+                <input
+                  v-model="reviewForm.displayName"
+                  type="text"
+                  class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                  placeholder="Anzeigename"
+                />
+              </label>
+              <label class="space-y-2">
+                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Handle</span>
+                <input
+                  v-model="reviewForm.channelSlug"
+                  type="text"
+                  class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                  placeholder="channel"
+                />
+              </label>
+              <label class="space-y-2">
+                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Tier</span>
+                <NativeSelect
+                  :model-value="reviewForm.categoryId ?? ''"
+                  :options="categoryOptions.map((option) => ({ label: option.label, value: option.id }))"
+                  @update:model-value="reviewForm.categoryId = Number($event) || null"
+                />
+              </label>
+              <label class="space-y-2">
+                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform</span>
+                <NativeSelect
+                  :model-value="selectedPlatformValue(reviewForm.platform)"
+                  :options="[
+                    ...candidatePlatformOptions.map((option) => ({ label: option.label, value: option.key })),
+                    { label: 'Eigene Plattform', value: 'custom' },
+                  ]"
+                  @update:model-value="emit('platform-change', String($event))"
+                />
+              </label>
+            </div>
+
+            <label v-if="selectedPlatformValue(reviewForm.platform) === 'custom'" class="mt-3 block space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Eigene Plattform</span>
+              <input
+                v-model="reviewForm.platform"
+                type="text"
+                class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                placeholder="z. B. Cake, Booth, neue Plattform"
+              />
+            </label>
+
+            <p
+              v-if="!nomination.suggestedCategoryId"
+              class="mt-3 rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800"
+            >
+              Kein automatischer Tier-Vorschlag vorhanden. Bitte manuell anhand Viewer-Range und Kanal einordnen.
+            </p>
+
+            <p v-if="selectedCandidateCollision" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+              Mögliches Duplikat: {{ selectedCandidateCollision.displayName }} ist in diesem Tier bereits vorhanden.
+            </p>
+
+            <p v-if="!canApproveSelected" class="mt-3 rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+              <span v-if="selectedNominationHasBlockingFlag && nomination.trackingReviewStatus !== 'overridden'">
+                Mindestens ein Tracking-Flag blockiert die Freigabe. Bitte zuerst einen Override setzen.
+              </span>
+              <span v-else>
+                Anzeigename, Handle, Plattform und Tier sind Pflicht.
+              </span>
+            </p>
+          </section>
+
+          <section class="rounded-[24px] border border-violet-100 bg-white p-4 sm:p-5">
+            <div class="flex items-center gap-2">
+              <WandSparkles class="h-4 w-4 text-violet-700" />
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-violet-600">Moderationsnotiz & Entscheidung</p>
+            </div>
+
+            <label class="mt-4 block space-y-2">
+              <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Moderationsnotiz</span>
+              <textarea
+                v-model="reviewForm.reviewNote"
+                rows="5"
+                class="w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+                placeholder="Warum wurde übernommen oder verworfen?"
+              />
+            </label>
+
+            <div class="mt-4 flex flex-col gap-3 sm:flex-row sm:justify-end">
+              <Button :disabled="reviewSaving === nomination.id" variant="secondary" class="justify-center" @click="emit('reject', nomination.id)">
+                <Trash2 class="mr-2 h-4 w-4" />
+                {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Verwerfen' }}
+              </Button>
+              <Button :disabled="reviewSaving === nomination.id || !canApproveSelected" class="justify-center" @click="emit('approve', nomination.id)">
+                <CheckCircle2 class="mr-2 h-4 w-4" />
+                {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Als Kandidat übernehmen' }}
+              </Button>
+            </div>
+          </section>
+        </div>
+      </div>
     </div>
   </div>
 </template>

frontend/src/components/admin/AdminReviewSubcategoryTabs.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+  tabs: Array<{ id: number | null; label: string; count: number; note?: string }>
+  modelValue: number | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | null]
+}>()
+</script>
+
+<template>
+  <div class="rounded-[24px] border border-violet-100 bg-[linear-gradient(180deg,#fcfaff_0%,#f8f4ff_100%)] p-4">
+    <div>
+      <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-violet-500">Unterkategorien</p>
+      <p class="mt-1 text-sm text-slate-500">Nur die aktuell gewählte Tier-Stufe wird in der Queue gezeigt.</p>
+    </div>
+
+    <div class="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id ?? 'all'"
+        type="button"
+        class="rounded-[20px] border px-4 py-3 text-left transition"
+        :class="modelValue === tab.id ? 'border-violet-300 bg-white text-violet-900 shadow-[0_12px_28px_rgba(168,145,214,0.14)] ring-2 ring-violet-100' : 'border-violet-100 bg-white/75 text-slate-600 hover:border-violet-200 hover:bg-white'"
+        @click="emit('update:modelValue', tab.id)"
+      >
+        <span class="flex items-start justify-between gap-3">
+          <span class="min-w-0">
+            <span class="block text-sm font-semibold">{{ tab.label }}</span>
+            <span v-if="tab.note" class="mt-1 block text-[11px] font-medium text-slate-500">{{ tab.note }}</span>
+          </span>
+          <span
+            class="inline-flex min-h-8 min-w-8 items-center justify-center rounded-full border px-2 text-xs font-bold"
+            :class="modelValue === tab.id ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-violet-50 text-violet-700'"
+          >
+            {{ tab.count }}
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>

frontend/src/components/admin/AdminReviewWorkspace.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import AdminNominationReviewModal from './AdminNominationReviewModal.vue'
+import AdminReviewsHistorySection from './AdminReviewsHistorySection.vue'
+import AdminReviewsQueueHeader from './AdminReviewsQueueHeader.vue'
+import AdminReviewsQueueList from './AdminReviewsQueueList.vue'
+import AdminReviewSubcategoryTabs from './AdminReviewSubcategoryTabs.vue'
+import { getTrackerStatusMeta, useAdminReviewsManager } from './useAdminReviewsManager'
+import { watchAdminToast } from '../../composables/useAdminToast'
+
+const props = withDefaults(defineProps<{
+  categoryIdsFilter?: number[] | null
+  activeMainCategory?: string | null
+  showCategoryFilterChips?: boolean
+  historyCollapsible?: boolean
+  showBlacklistButton?: boolean
+}>(), {
+  categoryIdsFilter: null,
+  activeMainCategory: null,
+  showCategoryFilterChips: true,
+  historyCollapsible: false,
+  showBlacklistButton: false,
+})
+
+const emit = defineEmits<{
+  'open-blacklist': []
+}>()
+
+const {
+  reviewSaving,
+  blacklistSaving,
+  adminMessage,
+  adminError,
+  reviewForms,
+  seasonDetail,
+  reviewFilter,
+  categoryFilter,
+  subcategoryFilter,
+  selectedNominationId,
+  isReviewModalOpen,
+  candidatePlatformOptions,
+  filteredNominations,
+  selectedNomination,
+  reviewedNominations,
+  categoryOptions,
+  availableSubcategoryOptions,
+  tierCategoryOptions,
+  selectedCandidateCollision,
+  selectedRelatedPendingNominations,
+  selectedNominationSignalSummary,
+  trackingReviewNotes,
+  selectedNominationHasBlockingFlag,
+  canApproveSelected,
+  approveNomination,
+  rejectNomination,
+  reopenRejectedNomination,
+  updateTrackingReview,
+  addStreamUrlToBlacklist,
+  openNominationById,
+  closeNominationModal,
+  selectedPlatformValue,
+  handlePlatformSelection,
+  extractNominationStreamUrl,
+} = useAdminReviewsManager({
+  categoryIdsFilter: () => props.categoryIdsFilter,
+})
+
+watchAdminToast(adminMessage, adminError)
+</script>
+
+<template>
+  <div class="min-h-0 overflow-y-auto bg-white">
+    <AdminReviewsQueueHeader
+      v-model:review-filter="reviewFilter"
+      v-model:category-filter="categoryFilter"
+      :total-pending="seasonDetail.pendingNominations.length"
+      :visible-count="filteredNominations.length"
+      :category-options="categoryOptions"
+      :active-main-category="props.activeMainCategory"
+      :show-category-filter-chips="showCategoryFilterChips"
+      :show-blacklist-button="showBlacklistButton"
+      @open-blacklist="emit('open-blacklist')"
+    />
+
+    <div class="space-y-4 p-4 sm:p-6">
+      <AdminReviewSubcategoryTabs
+        v-model="subcategoryFilter"
+        :tabs="availableSubcategoryOptions"
+      />
+
+      <AdminReviewsQueueList
+        :nominations="filteredNominations"
+        :total-pending="seasonDetail.pendingNominations.length"
+        :selected-nomination-id="selectedNominationId"
+        :tracker-status-meta="getTrackerStatusMeta"
+        @select="selectedNominationId = $event"
+        @open="openNominationById"
+      />
+
+      <details v-if="historyCollapsible" class="rounded-[24px] border border-violet-100 bg-violet-50/40">
+        <summary class="cursor-pointer px-5 py-4 text-sm font-semibold text-violet-900">
+          Letzte Entscheidungen anzeigen
+        </summary>
+        <div class="border-t border-violet-100 p-5">
+          <AdminReviewsHistorySection
+            :reviewed-nominations="reviewedNominations"
+            :reviewed-total="seasonDetail.reviewedNominations.length"
+            :review-saving="reviewSaving"
+            @undo-rejected="reopenRejectedNomination"
+          />
+        </div>
+      </details>
+
+      <AdminReviewsHistorySection
+        v-else
+        :reviewed-nominations="reviewedNominations"
+        :reviewed-total="seasonDetail.reviewedNominations.length"
+        :review-saving="reviewSaving"
+        @undo-rejected="reopenRejectedNomination"
+      />
+    </div>
+
+    <AdminNominationReviewModal
+      :open="isReviewModalOpen"
+      :nomination="selectedNomination"
+      :review-saving="reviewSaving"
+      :review-form="selectedNomination ? reviewForms[selectedNomination.id] : null"
+      :candidate-platform-options="candidatePlatformOptions"
+      :category-options="tierCategoryOptions"
+      :selected-candidate-collision="selectedCandidateCollision"
+      :selected-related-pending-nominations="selectedRelatedPendingNominations"
+      :signal-summary="selectedNominationSignalSummary"
+      :tracking-review-notes="trackingReviewNotes"
+      :selected-nomination-has-blocking-flag="selectedNominationHasBlockingFlag"
+      :stream-url="selectedNomination ? extractNominationStreamUrl(selectedNomination) : ''"
+      :can-approve-selected="canApproveSelected"
+      :blacklist-saving="blacklistSaving"
+      :selected-platform-value="selectedPlatformValue"
+      :tracker-status-meta="getTrackerStatusMeta"
+      @close="closeNominationModal"
+      @platform-change="handlePlatformSelection"
+      @approve="approveNomination"
+      @reject="rejectNomination"
+      @review-flagged="updateTrackingReview($event, 'reviewed')"
+      @override-flagged="updateTrackingReview($event, 'overridden')"
+      @blacklist-link="addStreamUrlToBlacklist"
+    />
+  </div>
+</template>

frontend/src/components/admin/AdminReviewsHistorySection.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
+import { RotateCcw } from '@lucide/vue'
+
 import type { AdminNominationReviewItem } from '../../types/awards'
 
 defineProps<{
   reviewedNominations: AdminNominationReviewItem[]
   reviewedTotal: number
+  reviewSaving?: number | null
+}>()
+
+const emit = defineEmits<{
+  'undo-rejected': [nominationId: number]
 }>()
 </script>
 
@@ -28,9 +35,21 @@ defineProps<{
               <span v-if="nomination.candidateDisplayName"> · Kandidat: {{ nomination.candidateDisplayName }}</span>
             </p>
           </div>
-          <span class="rounded-full px-3 py-1 text-xs font-semibold" :class="nomination.status === 'approved' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'">
-            {{ nomination.status === 'approved' ? 'übernommen' : 'verworfen' }}
-          </span>
+          <div class="flex items-center gap-2">
+            <span class="rounded-full px-3 py-1 text-xs font-semibold" :class="nomination.status === 'approved' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'">
+              {{ nomination.status === 'approved' ? 'übernommen' : 'verworfen' }}
+            </span>
+            <button
+              v-if="nomination.status === 'rejected'"
+              type="button"
+              class="inline-flex h-9 items-center justify-center gap-2 rounded-full border border-violet-200 bg-violet-50 px-3 text-xs font-semibold text-violet-700 transition hover:bg-violet-100 disabled:cursor-not-allowed disabled:opacity-60"
+              :disabled="reviewSaving === nomination.id"
+              @click="emit('undo-rejected', nomination.id)"
+            >
+              <RotateCcw class="h-3.5 w-3.5" />
+              {{ reviewSaving === nomination.id ? 'Öffnet ...' : 'Undo' }}
+            </button>
+          </div>
         </div>
         <p v-if="nomination.reviewNote" class="mt-3 text-sm leading-6 text-slate-600">{{ nomination.reviewNote }}</p>
         <p class="mt-2 text-xs text-slate-500">

frontend/src/components/admin/AdminReviewsQueueHeader.vue

@@ -1,40 +1,45 @@
 <script setup lang="ts">
-import { Search } from '@lucide/vue'
+import { Ban, Search } from '@lucide/vue'
 
 defineProps<{
   reviewFilter: string
-  categoryFilter: number | null
+  categoryFilter: string | null
   totalPending: number
   visibleCount: number
-  reviewStats: Array<{ label: string; value: number }>
-  categoryOptions: Array<{ id: number; label: string; count: number }>
+  categoryOptions: Array<{ id: string; label: string; count: number }>
+  activeMainCategory?: string | null
+  showCategoryFilterChips?: boolean
+  showBlacklistButton?: boolean
 }>()
 
 const emit = defineEmits<{
   'update:reviewFilter': [value: string]
-  'update:categoryFilter': [value: number | null]
+  'update:categoryFilter': [value: string | null]
+  'open-blacklist': []
 }>()
 </script>
 
 <template>
   <div class="border-b border-violet-100 bg-white/75 p-6">
-    <div class="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
-      <div>
-        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Review Queue</p>
-        <h2 class="mt-1 text-xl font-bold text-slate-900">Offene Nominierungen</h2>
-        <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
-          Kompakte Liste für viele Freitext-Fälle. Wähle links einen Fall aus und entscheide rechts, ob daraus ein Kandidat wird.
-        </p>
-      </div>
-      <div class="grid gap-2 sm:grid-cols-3 xl:min-w-[360px]">
-        <div v-for="stat in reviewStats" :key="stat.label" class="rounded-2xl border border-violet-50 bg-violet-50/50 px-3 py-2">
-          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">{{ stat.label }}</p>
-          <strong class="mt-1 block text-lg text-violet-800">{{ stat.value }}</strong>
+    <div class="space-y-5">
+      <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Review Queue</p>
+          <h2 class="mt-1 text-2xl font-bold text-slate-900">{{ activeMainCategory || 'Offene Nominierungen' }}</h2>
+          <p class="mt-1 text-sm text-slate-500">Offene Nominierungen</p>
         </div>
-      </div>
-    </div>
 
-    <div class="mt-5 grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]">
+        <button
+          v-if="showBlacklistButton"
+          type="button"
+          class="inline-flex h-11 items-center justify-center gap-2 rounded-2xl border border-rose-200 bg-rose-50 px-4 text-sm font-semibold text-rose-700 transition hover:bg-rose-100"
+          @click="emit('open-blacklist')"
+        >
+          <Ban class="h-4 w-4" />
+          Blacklist verwalten
+        </button>
+      </div>
+
       <label class="relative block">
         <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
         <input
@@ -45,11 +50,9 @@ const emit = defineEmits<{
           @input="emit('update:reviewFilter', ($event.target as HTMLInputElement).value)"
         />
       </label>
-      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
-        {{ visibleCount }} / {{ totalPending }} sichtbar
-      </div>
     </div>
-    <div class="mt-3 flex flex-wrap gap-2">
+
+    <div v-if="showCategoryFilterChips !== false" class="mt-4 flex flex-wrap gap-2">
       <button
         type="button"
         class="rounded-full border px-3 py-1.5 text-xs font-semibold transition"

frontend/src/components/admin/AdminReviewsQueueList.vue

@@ -1,42 +1,129 @@
 <script setup lang="ts">
-import type { AdminNominationReviewItem } from '../../types/awards'
+import type { AdminNominationReviewGroup } from '../../types/awards'
 
-defineProps<{
-  nominations: AdminNominationReviewItem[]
+const props = defineProps<{
+  nominations: AdminNominationReviewGroup[]
   totalPending: number
   selectedNominationId: number | null
+  trackerStatusMeta: (status: string) => { label: string; toneClass: string; hint: string }
 }>()
 
 const emit = defineEmits<{
   select: [nominationId: number]
+  open: [nominationId: number]
 }>()
+
+function avgViewerLabel(nomination: AdminNominationReviewGroup) {
+  if (nomination.avgViewers === null) return null
+  const avgViewerMetric = nomination.trackingMetrics.find((metric) => metric.key === 'avg_viewers')
+  const windowLabel = avgViewerMetric?.windowLabel?.trim()
+  return windowLabel
+    ? `${nomination.avgViewers} Avg Viewer · ${windowLabel}`
+    : `${nomination.avgViewers} Avg Viewer`
+}
 </script>
 
 <template>
-  <div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
+  <div class="space-y-3 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
+    <div v-if="nominations.length > 0" class="rounded-[22px] border border-violet-100 bg-violet-50/50 px-4 py-3">
+      <div class="flex flex-wrap items-center gap-2 text-xs font-semibold text-slate-600">
+        <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-violet-500">Queue-Navigation</span>
+        <div class="flex flex-wrap gap-2 text-xs font-semibold text-slate-600">
+          <span class="rounded-full border border-violet-100 bg-white px-3 py-1.5">
+            <kbd class="rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">↑</kbd>
+            <kbd class="ml-1 rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">↓</kbd>
+            <span class="ml-2">oder</span>
+            <kbd class="ml-2 rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">J</kbd>
+            <kbd class="ml-1 rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">K</kbd>
+            <span class="ml-2">Navigieren</span>
+          </span>
+          <span class="rounded-full border border-sky-100 bg-sky-50 px-3 py-1.5 text-sky-700">
+            <kbd class="rounded border border-sky-200 bg-white px-1.5 py-0.5 text-[10px] font-bold">Enter</kbd>
+            <span class="ml-2">Modal öffnen</span>
+          </span>
+          <span class="rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1.5 text-emerald-700">
+            <kbd class="rounded border border-emerald-200 bg-white px-1.5 py-0.5 text-[10px] font-bold">A</kbd>
+            <span class="ml-2">Annehmen</span>
+          </span>
+          <span class="rounded-full border border-rose-100 bg-rose-50 px-3 py-1.5 text-rose-700">
+            <kbd class="rounded border border-rose-200 bg-white px-1.5 py-0.5 text-[10px] font-bold">R</kbd>
+            <span class="ml-2">Verwerfen</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
     <button
       v-for="nomination in nominations"
       :key="nomination.id"
       type="button"
-      class="w-full rounded-2xl border p-3 text-left transition"
-      :class="selectedNominationId === nomination.id ? 'border-violet-200 bg-violet-50/80 shadow-[0_12px_30px_rgba(168,145,214,0.12)]' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
+      class="w-full rounded-[24px] border p-4 text-left transition"
+      :class="selectedNominationId === nomination.id ? 'border-violet-300 bg-white shadow-[0_18px_34px_rgba(168,145,214,0.14)] ring-2 ring-violet-100' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
       @click="emit('select', nomination.id)"
     >
       <div class="flex items-start justify-between gap-3">
         <div class="min-w-0">
           <div class="flex flex-wrap items-center gap-2">
-            <span class="rounded-full bg-violet-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-700">
-              {{ nomination.categoryName }}
+            <span
+              class="rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em]"
+              :class="selectedNominationId === nomination.id ? 'bg-violet-100 text-violet-800' : 'bg-violet-50 text-violet-700'"
+            >
+              {{ nomination.categoryGroupName }}
             </span>
             <span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
-              ID {{ nomination.id }}
+              {{ nomination.uniqueSubmitterCount }} Nominierende
+            </span>
+            <span
+              class="rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em]"
+              :class="props.trackerStatusMeta(nomination.trackerStatus).toneClass"
+            >
+              {{ props.trackerStatusMeta(nomination.trackerStatus).label }}
             </span>
           </div>
-          <h3 class="mt-2 truncate text-base font-semibold text-slate-900">{{ nomination.candidateText || nomination.streamUrl || 'Name im Review festlegen' }}</h3>
-          <p class="mt-1 truncate text-sm text-slate-500">
-            {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
+          <h3 class="mt-2 line-clamp-2 text-base font-semibold text-slate-900">{{ nomination.displayName || nomination.streamUrl || 'Name im Review festlegen' }}</h3>
+          <div class="mt-2 flex flex-wrap gap-2 text-xs font-semibold text-slate-500">
+            <span class="rounded-full border border-violet-100 bg-violet-50/50 px-2.5 py-1">{{ nomination.suggestedCategoryName || 'Tier offen' }}</span>
+            <span class="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1">{{ nomination.nominationTally }} Nominierungen</span>
+            <span class="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1">{{ nomination.uniqueSubmitterCount }} eindeutige Nominierende</span>
+            <span v-if="avgViewerLabel(nomination)" class="rounded-full border border-sky-100 bg-sky-50 px-2.5 py-1 text-sky-700">{{ avgViewerLabel(nomination) }}</span>
+            <span
+              v-if="nomination.trackingFlags.some((flag) => flag.blocksApproval)"
+              class="rounded-full border border-rose-200 bg-rose-50 px-2.5 py-1 text-rose-700"
+            >
+              Blockierende Flags
+            </span>
+            <span
+              v-else-if="nomination.requiresManualReview"
+              class="rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-amber-700"
+            >
+              Manuelle Pruefung
+            </span>
+            <span
+              v-if="!nomination.suggestedCategoryName"
+              class="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-slate-600"
+            >
+              Tier manuell waehlen
+            </span>
+          </div>
+          <p class="mt-2 text-xs font-medium text-slate-400">
+            zuletzt {{ new Date(nomination.lastSubmittedAt).toLocaleString('de-DE') }}
           </p>
         </div>
+        <div class="flex shrink-0 flex-col items-end gap-2">
+          <div
+            class="rounded-full border px-3 py-1.5 text-xs font-bold"
+            :class="selectedNominationId === nomination.id ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-500'"
+          >
+            #{{ nomination.id }}
+          </div>
+          <button
+            type="button"
+            class="rounded-full border border-violet-200 bg-white px-3 py-1.5 text-xs font-semibold text-violet-700 transition hover:bg-violet-50"
+            @click.stop="emit('open', nomination.id)"
+          >
+            Prüfen
+          </button>
+        </div>
       </div>
     </button>
 

frontend/src/components/admin/AdminSessionTimeoutCard.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Clock3 } from '@lucide/vue'
+
+import type { AdminOperationalSettingsForm } from './adminSettingsTypes'
+
+defineProps<{
+  form: AdminOperationalSettingsForm
+  saving: boolean
+  canManage: boolean
+}>()
+</script>
+
+<template>
+  <section class="rounded-[26px] border border-violet-100 bg-white/85 p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]">
+    <div class="flex gap-3">
+      <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
+        <Clock3 class="h-5 w-5" />
+      </div>
+      <div>
+        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Session Timeout</p>
+        <h3 class="mt-1 text-xl font-bold text-slate-900">Automatischer Logout bei Inaktivitaet</h3>
+        <p class="mt-1 text-sm leading-6 text-slate-500">
+          Team- und Admin-Sessions werden nach der eingestellten Zeit ohne Aktivitaet automatisch beendet. Minimum sind 3 Stunden.
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-5 grid gap-4 md:grid-cols-[minmax(0,220px)_1fr] md:items-start">
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Inaktiv nach Stunden</span>
+        <input
+          v-model.number="form.sessionIdleTimeoutHours"
+          :disabled="saving || !canManage"
+          type="number"
+          min="3"
+          step="1"
+          inputmode="numeric"
+          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
+        />
+      </label>
+      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm leading-6 text-violet-900">
+        Der Logout reagiert auf echte Nutzeraktivitaet wie Klicks, Tasten, Scrollen oder Touch. Die Session bleibt serverseitig trotzdem autoritativ und laeuft spaetestens nach 30 Tagen absolut ab.
+      </div>
+    </div>
+  </section>
+</template>

frontend/src/components/admin/AdminShowactFormBuilder.vue

@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Check, ChevronDown, ChevronUp, Eye, Plus, Save, Star, Trash2 } from '@lucide/vue'
+
+import type { ShowactFormField, ShowactFieldType } from '../../types/awards/showactForm'
+import Button from '../ui/Button.vue'
+import Modal from '../ui/Modal.vue'
+import type { AdminContentForm } from './adminContentTypes'
+
+const props = defineProps<{
+  form: AdminContentForm
+  saving: boolean
+  saveSiteSettings: (sectionLabel?: string) => Promise<void>
+}>()
+
+const expandedIndex = ref<number | null>(null)
+const previewOpen = ref(false)
+const saveMessage = ref('')
+const saveError = ref('')
+
+const fieldTypeOptions: { value: ShowactFieldType; label: string }[] = [
+  { value: 'text', label: 'Text' },
+  { value: 'email', label: 'E-Mail' },
+  { value: 'url', label: 'URL' },
+  { value: 'textarea', label: 'Textbereich' },
+  { value: 'select', label: 'Auswahl (Select)' },
+  { value: 'radio', label: 'Einzelauswahl' },
+  { value: 'multiselect', label: 'Mehrfachauswahl' },
+  { value: 'checkbox', label: 'Checkbox' },
+]
+
+function fieldTypeBadge(type: ShowactFieldType) {
+  return {
+    text: 'Text',
+    email: 'E-Mail',
+    url: 'URL',
+    textarea: 'Textarea',
+    select: 'Select',
+    radio: 'Radio',
+    multiselect: 'Multi',
+    checkbox: 'Checkbox',
+  }[type] ?? type
+}
+
+function toggleExpand(index: number) {
+  expandedIndex.value = expandedIndex.value === index ? null : index
+}
+
+function addField() {
+  const newField: ShowactFormField = {
+    id: `field_${Date.now()}`,
+    type: 'text',
+    label: 'Neues Feld',
+    placeholder: '',
+    helpText: '',
+    required: false,
+    isArtistName: false,
+    options: [],
+    allowOther: false,
+    maxLength: 200,
+  }
+  props.form.showactFormSchema.push(newField)
+  expandedIndex.value = props.form.showactFormSchema.length - 1
+}
+
+function removeField(index: number) {
+  props.form.showactFormSchema.splice(index, 1)
+  if (expandedIndex.value === index) {
+    expandedIndex.value = null
+  } else if (expandedIndex.value !== null && expandedIndex.value > index) {
+    expandedIndex.value--
+  }
+}
+
+function moveUp(index: number) {
+  if (index === 0) return
+  const arr = props.form.showactFormSchema
+  const temp = arr[index - 1]
+  arr[index - 1] = arr[index]
+  arr[index] = temp
+  if (expandedIndex.value === index) expandedIndex.value = index - 1
+  else if (expandedIndex.value === index - 1) expandedIndex.value = index
+}
+
+function moveDown(index: number) {
+  const arr = props.form.showactFormSchema
+  if (index >= arr.length - 1) return
+  const temp = arr[index + 1]
+  arr[index + 1] = arr[index]
+  arr[index] = temp
+  if (expandedIndex.value === index) expandedIndex.value = index + 1
+  else if (expandedIndex.value === index + 1) expandedIndex.value = index
+}
+
+function setArtistName(index: number, value: boolean) {
+  if (value) {
+    props.form.showactFormSchema.forEach((f, i) => {
+      f.isArtistName = i === index
+    })
+  } else {
+    props.form.showactFormSchema[index].isArtistName = false
+  }
+}
+
+function toggleRequired(field: ShowactFormField) {
+  field.required = !field.required
+}
+
+function updateFieldType(field: ShowactFormField, type: ShowactFieldType) {
+  field.type = type
+
+  if (type !== 'multiselect') {
+    field.allowOther = false
+  }
+
+  if (type === 'checkbox' && field.options.length === 0) {
+    field.options = ['Ja']
+  } else if (type === 'radio' && field.options.length === 0) {
+    field.options = ['Ja', 'Nein']
+  } else if ((type === 'select' || type === 'multiselect') && field.options.length === 0) {
+    field.options = type === 'select' ? ['Option 1'] : ['Option 1', 'Option 2']
+  }
+
+  if (type === 'textarea' && (!field.maxLength || field.maxLength < 500)) {
+    field.maxLength = 1500
+  } else if ((type === 'email' || type === 'url') && (!field.maxLength || field.maxLength < 200)) {
+    field.maxLength = 500
+  } else if (type === 'checkbox' && (!field.maxLength || field.maxLength > 100)) {
+    field.maxLength = 20
+  }
+}
+
+function getOptionsText(field: ShowactFormField): string {
+  return field.options.join('\n')
+}
+
+function setOptionsText(field: ShowactFormField, text: string) {
+  field.options = text
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0)
+}
+
+async function save() {
+  saveMessage.value = ''
+  saveError.value = ''
+  try {
+    await props.saveSiteSettings('Showact-Formular')
+    saveMessage.value = 'Formular-Schema gespeichert.'
+  } catch (error) {
+    saveError.value = error instanceof Error ? error.message : 'Speichern fehlgeschlagen.'
+  }
+}
+
+function previewOptionLabel(field: ShowactFormField) {
+  if (field.type === 'checkbox') {
+    return field.options[0] || 'Ja'
+  }
+
+  return field.placeholder || 'Antwort'
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <div>
+        <h3 class="text-base font-bold text-slate-900">Formular-Builder</h3>
+        <p class="mt-0.5 text-sm text-slate-500">Felder definieren, die im Bewerbungs-Modal angezeigt werden.</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          class="gap-2 rounded-2xl border border-violet-200 bg-white px-4 text-violet-700 shadow-none hover:bg-violet-50"
+          @click="previewOpen = true"
+        >
+          <Eye class="h-4 w-4" />
+          Vorschau
+        </Button>
+        <Button class="gap-2" :disabled="props.saving" @click="save">
+          <Save class="h-4 w-4" />
+          {{ props.saving ? 'Speichert ...' : 'Schema speichern' }}
+        </Button>
+      </div>
+    </div>
+
+    <p v-if="saveMessage" class="text-sm font-semibold text-emerald-700">{{ saveMessage }}</p>
+    <p v-if="saveError" class="text-sm font-semibold text-rose-700">{{ saveError }}</p>
+
+    <div class="overflow-hidden rounded-2xl border border-violet-100 bg-white">
+      <div
+        v-for="(field, index) in props.form.showactFormSchema"
+        :key="field.id"
+        class="border-b border-violet-100 last:border-b-0"
+      >
+        <!-- Field header row -->
+        <div class="flex items-center gap-2 px-4 py-3">
+          <!-- Up/Down buttons -->
+          <div class="flex shrink-0 flex-col gap-0.5">
+            <button
+              type="button"
+              :disabled="index === 0"
+              class="flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:text-violet-700 disabled:opacity-30"
+              @click="moveUp(index)"
+            >
+              <ChevronUp class="h-3.5 w-3.5" />
+            </button>
+            <button
+              type="button"
+              :disabled="index === props.form.showactFormSchema.length - 1"
+              class="flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:text-violet-700 disabled:opacity-30"
+              @click="moveDown(index)"
+            >
+              <ChevronDown class="h-3.5 w-3.5" />
+            </button>
+          </div>
+
+          <!-- Type badge -->
+          <span class="shrink-0 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-bold text-violet-700">
+            {{ fieldTypeBadge(field.type) }}
+          </span>
+
+          <!-- Label + indicators -->
+          <button
+            type="button"
+            class="flex min-w-0 flex-1 items-center gap-2 text-left"
+            @click="toggleExpand(index)"
+          >
+            <span class="truncate text-sm font-semibold text-slate-800">{{ field.label || '(kein Label)' }}</span>
+            <span v-if="field.required" class="shrink-0 text-xs font-bold text-rose-600">*</span>
+            <Star v-if="field.isArtistName" class="h-3.5 w-3.5 shrink-0 fill-amber-400 text-amber-500" />
+          </button>
+
+          <!-- Delete + expand -->
+          <button
+            type="button"
+            :disabled="props.form.showactFormSchema.length <= 1"
+            class="shrink-0 rounded p-1 text-slate-400 hover:text-rose-600 disabled:opacity-30"
+            @click="removeField(index)"
+          >
+            <Trash2 class="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            class="shrink-0 rounded p-1 text-slate-400 hover:text-violet-700"
+            @click="toggleExpand(index)"
+          >
+            <ChevronDown v-if="expandedIndex !== index" class="h-4 w-4" />
+            <ChevronUp v-else class="h-4 w-4" />
+          </button>
+        </div>
+
+        <!-- Expanded editor -->
+        <div v-if="expandedIndex === index" class="space-y-3 border-t border-violet-100 bg-violet-50/40 px-4 py-4">
+          <div class="grid gap-3 sm:grid-cols-2">
+            <!-- Field type -->
+            <label class="flex flex-col gap-1.5">
+              <span class="text-xs font-bold text-slate-700">Feldtyp</span>
+              <select
+                :value="field.type"
+                class="min-h-12 w-full rounded-2xl border-2 border-violet-100 bg-white px-4 py-3 text-sm font-bold text-slate-800 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+                @change="updateFieldType(field, (($event.target as HTMLSelectElement).value || 'text') as ShowactFieldType)"
+              >
+                <option v-for="option in fieldTypeOptions" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </option>
+              </select>
+            </label>
+
+            <!-- Field ID -->
+            <label class="flex flex-col gap-1.5">
+              <span class="text-xs font-bold text-slate-700">Feld-ID (eindeutig)</span>
+              <input
+                v-model="field.id"
+                maxlength="80"
+                placeholder="z.B. artist_name"
+                class="rounded-xl border border-violet-100 bg-white px-3 py-2 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+              />
+            </label>
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-2">
+            <!-- Label -->
+            <label class="flex flex-col gap-1.5">
+              <span class="text-xs font-bold text-slate-700">Label</span>
+              <input
+                v-model="field.label"
+                maxlength="500"
+                placeholder="Anzeige-Name"
+                class="rounded-xl border border-violet-100 bg-white px-3 py-2 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+              />
+            </label>
+
+            <!-- Placeholder -->
+            <label class="flex flex-col gap-1.5">
+              <span class="text-xs font-bold text-slate-700">Platzhaltertext</span>
+              <input
+                v-model="field.placeholder"
+                maxlength="500"
+                placeholder="Hinweistext im leeren Feld"
+                class="rounded-xl border border-violet-100 bg-white px-3 py-2 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+              />
+            </label>
+          </div>
+
+          <!-- Help text -->
+          <label class="flex flex-col gap-1.5">
+            <span class="text-xs font-bold text-slate-700">Hilfetext / Beschreibung</span>
+            <textarea
+              v-model="field.helpText"
+              rows="2"
+              maxlength="1000"
+              placeholder="Optionaler Text unter dem Label"
+              class="rounded-xl border border-violet-100 bg-white px-3 py-2 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+            />
+          </label>
+
+          <!-- MaxLength -->
+          <label class="flex flex-col gap-1.5">
+            <span class="text-xs font-bold text-slate-700">Max. Zeichenanzahl</span>
+            <input
+              v-model.number="field.maxLength"
+              type="number"
+              min="1"
+              max="10000"
+              class="w-36 rounded-xl border border-violet-100 bg-white px-3 py-2 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+            />
+          </label>
+
+          <!-- Options for choice fields -->
+          <label v-if="field.type === 'select' || field.type === 'radio' || field.type === 'multiselect' || field.type === 'checkbox'" class="flex flex-col gap-1.5">
+            <span class="text-xs font-bold text-slate-700">Optionen (eine pro Zeile)</span>
+            <textarea
+              :value="getOptionsText(field)"
+              rows="4"
+              placeholder="Option 1&#10;Option 2&#10;Option 3"
+              class="rounded-xl border border-violet-100 bg-white px-3 py-2 text-sm text-slate-700 outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
+              @input="setOptionsText(field, ($event.target as HTMLTextAreaElement).value)"
+            />
+          </label>
+
+          <!-- Toggles row -->
+          <div class="flex flex-wrap gap-3">
+            <!-- Required toggle -->
+            <button
+              type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border px-3.5 py-2 text-sm font-semibold transition"
+              :class="field.required
+                ? 'border-violet-300 bg-violet-100/90 text-violet-900 shadow-[0_10px_24px_rgba(139,108,219,0.14)]'
+                : 'border-violet-200 bg-white text-slate-700 hover:border-violet-300 hover:bg-violet-50'"
+              @click="toggleRequired(field)"
+            >
+              <span
+                class="flex h-5 w-5 items-center justify-center rounded-md border transition"
+                :class="field.required
+                  ? 'border-violet-500 bg-violet-600 text-white'
+                  : 'border-violet-200 bg-violet-50 text-transparent'"
+              >
+                <Check class="h-3.5 w-3.5" />
+              </span>
+              <span>Pflichtfeld</span>
+            </button>
+
+            <!-- isArtistName toggle -->
+            <button
+              type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border px-3.5 py-2 text-sm font-semibold transition"
+              :class="field.isArtistName
+                ? 'border-amber-300 bg-amber-50 text-amber-900 shadow-[0_10px_24px_rgba(251,191,36,0.16)]'
+                : 'border-violet-200 bg-white text-slate-700 hover:border-amber-300 hover:bg-amber-50/70'"
+              @click="setArtistName(index, !field.isArtistName)"
+            >
+              <span
+                class="flex h-5 w-5 items-center justify-center rounded-md border transition"
+                :class="field.isArtistName
+                  ? 'border-amber-400 bg-amber-400 text-white'
+                  : 'border-amber-200 bg-amber-50 text-transparent'"
+              >
+                <Check class="h-3.5 w-3.5" />
+              </span>
+              <span>Künstlername-Feld</span>
+              <Star class="h-3.5 w-3.5 fill-amber-400 text-amber-500" />
+            </button>
+
+            <!-- Other option toggle -->
+            <button
+              v-if="field.type === 'multiselect'"
+              type="button"
+              class="inline-flex items-center gap-2 rounded-2xl border px-3.5 py-2 text-sm font-semibold transition"
+              :class="field.allowOther
+                ? 'border-violet-300 bg-violet-100/90 text-violet-900 shadow-[0_10px_24px_rgba(139,108,219,0.14)]'
+                : 'border-violet-200 bg-white text-slate-700 hover:border-violet-300 hover:bg-violet-50'"
+              @click="field.allowOther = !field.allowOther"
+            >
+              <span
+                class="flex h-5 w-5 items-center justify-center rounded-md border transition"
+                :class="field.allowOther
+                  ? 'border-violet-500 bg-violet-600 text-white'
+                  : 'border-violet-200 bg-violet-50 text-transparent'"
+              >
+                <Check class="h-3.5 w-3.5" />
+              </span>
+              <span>„Andere" erlauben</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="props.form.showactFormSchema.length === 0" class="px-4 py-6 text-center text-sm text-slate-500">
+        Noch keine Felder definiert. Klicke unten auf „Feld hinzufügen".
+      </div>
+    </div>
+
+    <Button variant="ghost" class="gap-2 rounded-2xl border border-violet-200 bg-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100" @click="addField">
+      <Plus class="h-4 w-4" />
+      Feld hinzufügen
+    </Button>
+
+    <Modal
+      :open="previewOpen"
+      size="lg"
+      title="Formular-Vorschau"
+      subtitle="So werden die aktuell konfigurierten Felder im Bewerbungsformular aufgebaut."
+      @close="previewOpen = false"
+    >
+      <div v-if="props.form.showactFormSchema.length === 0" class="rounded-2xl border border-dashed border-violet-200 bg-violet-50/60 p-6 text-center text-sm font-semibold text-slate-500">
+        Noch keine Felder fuer die Vorschau vorhanden.
+      </div>
+      <div v-else class="space-y-4">
+        <div
+          v-for="field in props.form.showactFormSchema"
+          :key="field.id"
+          class="rounded-2xl border border-violet-100 bg-white p-4 shadow-sm"
+        >
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <label class="text-sm font-black text-violet-800">
+              {{ field.label || '(kein Label)' }}<span v-if="field.required" class="text-rose-600"> *</span>
+            </label>
+            <span class="rounded-full bg-violet-100 px-2.5 py-1 text-xs font-black text-violet-700">{{ fieldTypeBadge(field.type) }}</span>
+          </div>
+          <p v-if="field.helpText" class="mt-1 text-xs font-semibold leading-5 text-slate-500">{{ field.helpText }}</p>
+
+          <input
+            v-if="field.type === 'text' || field.type === 'email' || field.type === 'url'"
+            disabled
+            :placeholder="field.placeholder || previewOptionLabel(field)"
+            class="mt-3 w-full rounded-xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-slate-500"
+          />
+          <textarea
+            v-else-if="field.type === 'textarea'"
+            disabled
+            rows="3"
+            :placeholder="field.placeholder || 'Lange Antwort'"
+            class="mt-3 w-full resize-none rounded-xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-slate-500"
+          />
+          <select
+            v-else-if="field.type === 'select'"
+            disabled
+            class="mt-3 w-full rounded-xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-slate-500"
+          >
+            <option>{{ field.placeholder || 'Bitte waehlen' }}</option>
+            <option v-for="option in field.options" :key="option">{{ option }}</option>
+          </select>
+          <div v-else-if="field.type === 'radio' || field.type === 'multiselect'" class="mt-3 space-y-2">
+            <label
+              v-for="option in field.options"
+              :key="option"
+              class="flex items-center gap-3 rounded-xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-slate-600"
+            >
+              <span
+                class="h-4 w-4 border border-violet-300 bg-white"
+                :class="field.type === 'radio' ? 'rounded-full' : 'rounded'"
+              />
+              {{ option }}
+            </label>
+            <label v-if="field.type === 'multiselect' && field.allowOther" class="flex items-center gap-3 rounded-xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-slate-600">
+              <span class="h-4 w-4 rounded border border-violet-300 bg-white" />
+              Andere:
+              <span class="min-w-28 flex-1 border-b border-violet-200 text-slate-400">Eigene Antwort</span>
+            </label>
+          </div>
+          <label
+            v-else-if="field.type === 'checkbox'"
+            class="mt-3 flex items-center gap-3 rounded-xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-slate-600"
+          >
+            <span class="h-4 w-4 rounded border border-violet-300 bg-white" />
+            {{ field.options[0] || 'Ja' }}
+          </label>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>

frontend/src/components/admin/AdminToastViewport.vue

@@ -51,6 +51,7 @@ function iconForTone(tone: string) {
           </p>
 
           <button
+            v-if="!toast.persistent"
             type="button"
             class="grid h-8 w-8 shrink-0 place-items-center rounded-full text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400"
             aria-label="Toast schließen"

frontend/src/components/admin/AdminTwitchAuthCard.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { Loader2, LockKeyhole, Save, Settings } from '@lucide/vue'
+import { ref } from 'vue'
+
+import type { AdminOperationalSettingsForm } from './adminSettingsTypes'
+import Button from '../ui/Button.vue'
+import Modal from '../ui/Modal.vue'
+import PasswordField from '../ui/PasswordField.vue'
+
+defineProps<{
+  form: AdminOperationalSettingsForm
+  saving: boolean
+  canManage: boolean
+  twitchClientSecret: string
+  twitchSecretHint: string
+  twitchClientSecretSet: boolean
+  twitchAuthConfigured: boolean
+  twitchAuthManagedByDatabase: boolean
+  twitchAuthComplete: boolean
+}>()
+
+const emit = defineEmits<{
+  save: []
+  'update:twitchClientSecret': [value: string]
+}>()
+
+const twitchModalOpen = ref(false)
+
+function defaultRedirectUri() {
+  if (typeof window === 'undefined') {
+    return 'https://deine-domain.de/api/auth/twitch/callback'
+  }
+
+  return `${window.location.origin.replace(/:\d+$/, ':5084')}/api/auth/twitch/callback`
+}
+</script>
+
+<template>
+  <section class="rounded-[26px] border border-violet-100 bg-white/85 p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]">
+    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <div class="flex gap-3">
+        <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
+          <Settings class="h-5 w-5" />
+        </div>
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Twitch OAuth</p>
+          <h3 class="mt-1 text-xl font-bold text-slate-900">Offiziellen Twitch Login konfigurieren</h3>
+          <p class="mt-1 text-sm leading-6 text-slate-500">
+            Einmal mit Client-ID, Client Secret und Redirect URI verbinden. Danach verwenden Login und Account-Verknüpfung den offiziellen Twitch-Flow.
+          </p>
+          <div class="mt-3 flex flex-wrap gap-2 text-xs font-semibold">
+            <span class="rounded-full px-3 py-1" :class="twitchAuthConfigured ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
+              {{ twitchAuthConfigured ? 'OAuth bereit' : 'OAuth fehlt' }}
+            </span>
+            <span class="rounded-full bg-violet-50 px-3 py-1 text-violet-700">
+              {{ twitchAuthManagedByDatabase ? 'Quelle: Datenbank' : 'Quelle: Config' }}
+            </span>
+            <span class="rounded-full px-3 py-1" :class="twitchClientSecretSet ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
+              {{ twitchClientSecretSet ? 'Secret vorhanden' : 'Secret fehlt' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <Button
+        type="button"
+        variant="secondary"
+        class="gap-2 rounded-2xl px-5"
+        :disabled="saving || !canManage"
+        @click="twitchModalOpen = true"
+      >
+        <LockKeyhole v-if="!canManage" class="h-4 w-4" />
+        <Settings v-else class="h-4 w-4" />
+        {{ !canManage ? 'Nur Owner' : 'Twitch konfigurieren' }}
+      </Button>
+    </div>
+  </section>
+
+  <Modal
+    :open="twitchModalOpen"
+    title="Twitch OAuth"
+    subtitle="Client-Daten aus der Twitch Developer Console. Das Secret wird gespeichert, aber nie wieder angezeigt."
+    @close="twitchModalOpen = false"
+  >
+    <div class="space-y-5">
+      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm leading-6 text-violet-900">
+        In Twitch muss dieselbe Redirect URI eingetragen sein, die hier gespeichert ist. Ohne eigene Redirect URI nutzt das Backend automatisch den Callback deiner API.
+      </div>
+
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Client-ID</span>
+        <input
+          v-model="form.twitchClientId"
+          :disabled="saving || !canManage"
+          type="text"
+          autocomplete="off"
+          placeholder="Twitch Client-ID"
+          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
+        />
+      </label>
+
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Client Secret</span>
+        <PasswordField
+          :model-value="twitchClientSecret"
+          :disabled="saving || !canManage"
+          autocomplete="new-password"
+          placeholder="Leer lassen = behalten"
+          root-class="mt-2"
+          input-class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
+          @update:model-value="emit('update:twitchClientSecret', $event)"
+        />
+        <span class="mt-2 block text-xs leading-5 text-slate-500">{{ twitchSecretHint }}</span>
+      </label>
+
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Redirect URI</span>
+        <input
+          v-model="form.twitchRedirectUri"
+          :disabled="saving || !canManage"
+          type="url"
+          autocomplete="off"
+          :placeholder="defaultRedirectUri()"
+          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
+        />
+        <span class="mt-2 block text-xs leading-5 text-slate-500">Muss exakt in deiner Twitch-App unter OAuth Redirect URLs eingetragen sein.</span>
+      </label>
+
+      <label class="block">
+        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Scopes</span>
+        <input
+          v-model="form.twitchScope"
+          :disabled="saving || !canManage"
+          type="text"
+          autocomplete="off"
+          placeholder="Optional, z.B. user:read:email"
+          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
+        />
+        <span class="mt-2 block text-xs leading-5 text-slate-500">Für reines Login/Profil bleibt das Feld normalerweise leer.</span>
+      </label>
+
+      <p
+        v-if="form.twitchClientId && !twitchAuthComplete"
+        class="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-800"
+      >
+        Zum Aktivieren fehlt noch ein Client Secret.
+      </p>
+    </div>
+
+    <template #footer>
+      <Button type="button" variant="ghost" :disabled="saving" @click="twitchModalOpen = false">Schließen</Button>
+      <Button type="button" class="gap-2" :disabled="saving || !canManage" @click="emit('save')">
+        <Loader2 v-if="saving" class="h-4 w-4 animate-spin" />
+        <Save v-else class="h-4 w-4" />
+        {{ saving ? 'Speichert ...' : 'Twitch speichern' }}
+      </Button>
+    </template>
+  </Modal>
+</template>

frontend/src/components/admin/AdminWorkflowRulesCard.vue

@@ -24,6 +24,8 @@ const emit = defineEmits<{
   updateRule: [ruleKey: string, patch: Partial<AdminWorkflowRule>]
   save: []
 }>()
+
+const advisoryOnlyRuleKey = 'recommended_nominators_per_subcategory'
 </script>
 
 <template>
@@ -96,7 +98,15 @@ const emit = defineEmits<{
 
           <label class="space-y-1">
             <span class="text-xs font-semibold text-slate-500">Modus</span>
+            <div
+              v-if="rule.key === advisoryOnlyRuleKey"
+              class="rounded-xl border border-violet-100 bg-white px-3 py-2 text-xs font-semibold leading-5 text-slate-500"
+            >
+              Hinweis-Regel<br>
+              <span class="font-normal">Diese Regel bleibt immer unverbindlich und blockiert nichts.</span>
+            </div>
             <NativeSelect
+              v-else
               :model-value="rule.mode"
               :disabled="!canManage"
               :options="[

frontend/src/components/admin/adminContentTypes.ts

@@ -1,3 +1,5 @@
+import type { ShowactFormField } from '../../types/awards/showactForm'
+
 export type SocialLinkForm = {
   label: string
   platform: string
@@ -16,6 +18,8 @@ export type AdminContentForm = {
   hostDisplayName: string
   hostTagline: string
   newsletterUrl: string
+  shareXUrl: string
+  shareDiscordUrl: string
   privacyEmail: string
   privacyPolicyContent: string
   imprintUrl: string
@@ -28,4 +32,5 @@ export type AdminContentForm = {
   showactsContent: string
   socialLinks: SocialLinkForm[]
   faq: FaqFormItem[]
+  showactFormSchema: ShowactFormField[]
 }

frontend/src/components/admin/adminSeasonTypes.ts

@@ -27,6 +27,29 @@ export interface AdminSeasonReadinessItem {
   to: string
 }
 
+export interface AdminSeasonGatewayEntryLink {
+  label: string
+  to: string
+}
+
+export interface AdminSeasonGatewayCheckItem {
+  label: string
+  detail: string
+  status: 'ok' | 'warn' | 'block'
+  to: string
+  entries?: AdminSeasonGatewayEntryLink[]
+}
+
+export interface AdminSeasonPhaseGateway {
+  action: 'activate' | 'complete'
+  phase: string
+  title: string
+  subtitle: string
+  blockers: AdminSeasonGatewayCheckItem[]
+  warnings: AdminSeasonGatewayCheckItem[]
+  confirmsLabel: string
+}
+
 export interface AdminSeasonCopyOption {
   label: string
   value: number | null

frontend/src/components/admin/adminSettingsTypes.ts

@@ -10,6 +10,7 @@ export interface AdminOperationalSettingsForm {
   twitchClientId: string
   twitchRedirectUri: string
   twitchScope: string
+  sessionIdleTimeoutHours: number
   maintenanceModeEnabled: boolean
   maintenanceTitle: string
   maintenanceMessage: string

frontend/src/components/admin/useAdminAnalyticsManager.ts

@@ -86,21 +86,27 @@ export function useAdminAnalyticsManager() {
       value: `${seasonDetail.value.categories.length - emptyCategories.value.length}/${seasonDetail.value.categories.length}`,
       note: emptyCategories.value.length === 0 ? 'Alle Kategorien haben Kandidaten.' : `${emptyCategories.value.length} Kategorien sind noch leer.`,
       icon: Tags,
-      to: emptyCategories.value.length > 0 ? '/admin/candidates' : '/admin/categories',
+      to: emptyCategories.value.length > 0
+        ? `/admin/categories?group=${encodeURIComponent(emptyCategories.value[0]!.groupName)}`
+        : '/admin/categories',
     },
     {
       label: 'Gewinnerstatus',
       value: `${winnerCoveragePct.value}%`,
       note: `${seasonDetail.value.results.length} von ${seasonDetail.value.categories.length} Kategorien final gesetzt.`,
       icon: Trophy,
-      to: '/admin/winners',
+      to: categoriesWithoutWinner.value.length > 0
+        ? `/admin/winners?status=open&categoryId=${categoriesWithoutWinner.value[0]!.id}`
+        : '/admin/winners?status=set',
     },
     {
       label: 'Freigabe-Risiko',
       value: String(categoriesWithReviews.value.length + pendingClipCount.value),
       note: `${categoriesWithReviews.value.length} Kategorien mit Reviews, ${pendingClipCount.value} Clips offen.`,
       icon: AlertTriangle,
-      to: categoriesWithReviews.value.length > 0 ? '/admin/nominations?review=1' : '/admin/clips',
+      to: categoriesWithReviews.value.length > 0
+        ? `/admin/nominations?review=1&categoryId=${categoriesWithReviews.value[0]!.id}&status=heavy`
+        : '/admin/clips?status=pending',
     },
   ])
 
@@ -127,6 +133,9 @@ export function useAdminAnalyticsManager() {
         value: String(busiestReviewCategory?.reviews ?? 0),
         note: busiestReviewCategory ? busiestReviewCategory.name : 'Keine offenen Review-Hotspots.',
         icon: Clock3,
+        to: busiestReviewCategory
+          ? `/admin/nominations?review=1&categoryId=${busiestReviewCategory.id}&status=heavy`
+          : '/admin/nominations?review=1',
       },
     ]
   })
@@ -137,7 +146,9 @@ export function useAdminAnalyticsManager() {
       label: 'Leere Kategorien',
       value: emptyCategories.value.length,
       note: emptyCategories.value.length === 0 ? 'Keine Luecke in der Kandidatenbasis.' : emptyCategories.value.slice(0, 3).map((category) => category.name).join(', '),
-      to: '/admin/candidates',
+      to: emptyCategories.value.length > 0
+        ? `/admin/categories?group=${encodeURIComponent(emptyCategories.value[0]!.groupName)}`
+        : '/admin/categories',
       tone: emptyCategories.value.length > 0 ? 'border-rose-100 bg-rose-50 text-rose-800' : 'border-emerald-100 bg-emerald-50 text-emerald-800',
     },
     {
@@ -145,7 +156,9 @@ export function useAdminAnalyticsManager() {
       label: 'Offene Reviews',
       value: seasonDetail.value.pendingNominations.length,
       note: categoriesWithReviews.value.length === 0 ? 'Review-Queue ist leer.' : `${categoriesWithReviews.value.length} Kategorien betroffen.`,
-      to: '/admin/nominations?review=1',
+      to: categoriesWithReviews.value.length > 0
+        ? `/admin/nominations?review=1&categoryId=${categoriesWithReviews.value[0]!.id}&status=heavy`
+        : '/admin/nominations?review=1',
       tone: seasonDetail.value.pendingNominations.length > 0 ? 'border-amber-100 bg-amber-50 text-amber-800' : 'border-emerald-100 bg-emerald-50 text-emerald-800',
     },
     {
@@ -153,7 +166,9 @@ export function useAdminAnalyticsManager() {
       label: 'Gewinner fehlen',
       value: categoriesWithoutWinner.value.length,
       note: categoriesWithoutWinner.value.length === 0 ? 'Alle Gewinner sind gesetzt.' : 'Finalisierung auf der Gewinner-Seite abschliessen.',
-      to: '/admin/winners',
+      to: categoriesWithoutWinner.value.length > 0
+        ? `/admin/winners?status=open&categoryId=${categoriesWithoutWinner.value[0]!.id}`
+        : '/admin/winners?status=set',
       tone: categoriesWithoutWinner.value.length > 0 ? 'border-sky-100 bg-sky-50 text-sky-800' : 'border-emerald-100 bg-emerald-50 text-emerald-800',
     },
   ])

frontend/src/components/admin/useAdminCandidateManager.ts

@@ -1,4 +1,5 @@
 import { computed, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import { SOCIAL_ICON_OPTIONS, socialIconOptionForValue } from '../../lib/socialIcons'
 import { useAwardsStore } from '../../stores/awards'
@@ -17,6 +18,11 @@ interface CandidateForm {
   clipEmbedStatus: string
 }
 
+type CandidateRuleNotice = {
+  mode: 'warn' | 'block'
+  message: string
+}
+
 const pageSize = 10
 const maxFinalistsRuleKey = 'max_finalists_per_category'
 const maxCandidateAppearancesRuleKey = 'max_candidate_appearances'
@@ -34,6 +40,7 @@ const clipEmbedStatusOptions = [
 ]
 const readinessFilterOptions = [
   { label: 'Alle', value: 'all' },
+  { label: 'Zusage offen', value: 'needs_decision' },
   { label: 'Offen', value: 'open' },
   { label: 'Angefragt', value: 'contacted' },
   { label: 'Angenommen', value: 'accepted' },
@@ -44,6 +51,7 @@ const readinessFilterOptions = [
 
 export function useAdminCandidateManager() {
   const store = useAwardsStore()
+  const route = useRoute()
   const saving = ref(false)
   const deleting = ref(false)
   const adminMessage = ref('')
@@ -97,6 +105,10 @@ export function useAdminCandidateManager() {
     seasonDetail.value.candidates,
     workflowRules.value,
   ))
+  const candidateIdentitySummaries = computed(() => buildCandidateIdentitySummaries(
+    seasonDetail.value.candidates,
+    seasonDetail.value.results,
+  ))
   const acceptedCandidateCount = computed(() =>
     seasonDetail.value.candidates.filter((candidate) => candidate.acceptanceStatus === 'accepted').length,
   )
@@ -120,6 +132,10 @@ export function useAdminCandidateManager() {
 
     if (readinessFilter.value !== 'all') {
       list = list.filter((candidate) => {
+        if (readinessFilter.value === 'needs_decision') {
+          return candidate.acceptanceStatus === 'open' || candidate.acceptanceStatus === 'contacted'
+        }
+
         if (readinessFilter.value === 'missing_clip') {
           return !hasUsableCompilation(candidate)
         }
@@ -163,6 +179,75 @@ export function useAdminCandidateManager() {
   )
   const candidatePlatformOptions = computed(() => SOCIAL_ICON_OPTIONS.filter((option) => option.key !== 'website'))
   const selectedPlatformValue = computed(() => socialIconOptionForValue(form.platform)?.key ?? 'custom')
+  const editorIdentitySummary = computed(() => {
+    const identityKey = editorIdentityKey(form, editingId.value, seasonDetail.value.candidates)
+    if (!identityKey) {
+      return null
+    }
+
+    return candidateIdentitySummaries.value[identityKey] ?? {
+      appearances: 0,
+      acceptedAppearances: 0,
+      winnerPlacements: 0,
+      nominationTally: 0,
+    }
+  })
+  const editorRuleNotices = computed<CandidateRuleNotice[]>(() => {
+    if (!selectedSeasonId.value || !form.categoryId) {
+      return []
+    }
+
+    const notices: CandidateRuleNotice[] = []
+    const finalistsRule = workflowRules.value.find((rule) => rule.key === maxFinalistsRuleKey)
+    const appearancesRule = workflowRules.value.find((rule) => rule.key === maxCandidateAppearancesRuleKey)
+    const activeCandidates = seasonDetail.value.candidates.filter((candidate) => candidate.acceptanceStatus !== 'declined')
+    const currentCandidateId = typeof editingId.value === 'number' ? editingId.value : null
+
+    if (finalistsRule?.enabled) {
+      const categoryCount = activeCandidates.filter((candidate) =>
+        candidate.categoryId === form.categoryId && candidate.id !== currentCandidateId,
+      ).length + 1
+
+      if (categoryCount > finalistsRule.limit) {
+        notices.push({
+          mode: finalistsRule.mode === 'warn' ? 'warn' : 'block',
+          message: `${categoryCount}/${finalistsRule.limit} finale Kandidat:innen in dieser Kategorie.`,
+        })
+      }
+    }
+
+    if (appearancesRule?.enabled) {
+      const identityKey = editorIdentityKey(form, editingId.value, seasonDetail.value.candidates)
+      if (identityKey) {
+        const appearanceCount = activeCandidates.filter((candidate) =>
+          candidate.id !== currentCandidateId && candidateIdentityKey(candidate) === identityKey,
+        ).length + 1
+
+        if (appearanceCount > appearancesRule.limit) {
+          notices.push({
+            mode: appearancesRule.mode === 'warn' ? 'warn' : 'block',
+            message: `${appearanceCount}/${appearancesRule.limit} Kandidaturen für diese Person.`,
+          })
+        }
+      }
+    }
+
+    return notices
+  })
+
+  function applyRouteFilters() {
+    const rawQuery = Array.isArray(route.query.q) ? route.query.q[0] : route.query.q
+    const rawCategoryId = Array.isArray(route.query.categoryId) ? route.query.categoryId[0] : route.query.categoryId
+    const rawReadiness = Array.isArray(route.query.readiness) ? route.query.readiness[0] : route.query.readiness
+
+    search.value = typeof rawQuery === 'string' ? rawQuery : ''
+
+    const parsedCategoryId = Number(rawCategoryId)
+    categoryFilter.value = Number.isFinite(parsedCategoryId) && parsedCategoryId > 0 ? parsedCategoryId : null
+
+    const nextReadiness = typeof rawReadiness === 'string' ? rawReadiness : 'all'
+    readinessFilter.value = readinessFilterOptions.some((option) => option.value === nextReadiness) ? nextReadiness : 'all'
+  }
 
   watch([search, categoryFilter, readinessFilter, () => seasonDetail.value.candidates.length], () => {
     page.value = 1
@@ -174,6 +259,14 @@ export function useAdminCandidateManager() {
     }
   })
 
+  watch(
+    () => [route.query.q, route.query.categoryId, route.query.readiness] as const,
+    () => {
+      applyRouteFilters()
+    },
+    { immediate: true },
+  )
+
   function clearFilters() {
     search.value = ''
     categoryFilter.value = null
@@ -304,6 +397,7 @@ export function useAdminCandidateManager() {
     categoryLabelMap,
     duplicateCandidateKeys,
     candidateWorkflowNotices,
+    candidateIdentitySummaries,
     duplicateCandidateCount,
     acceptedCandidateCount,
     clipReadyCount,
@@ -319,6 +413,8 @@ export function useAdminCandidateManager() {
     canSave,
     candidatePlatformOptions,
     selectedPlatformValue,
+    editorIdentitySummary,
+    editorRuleNotices,
     acceptanceStatusOptions,
     clipEmbedStatusOptions,
     readinessFilterOptions,
@@ -333,7 +429,7 @@ export function useAdminCandidateManager() {
 }
 
 function buildCandidateWorkflowNotices(candidates: AdminCandidateItem[], rules: AdminWorkflowRule[]) {
-  const notices: Record<number, Array<{ mode: 'warn' | 'block'; message: string }>> = {}
+  const notices: Record<number, CandidateRuleNotice[]> = {}
   const activeCandidates = candidates.filter((candidate) => candidate.acceptanceStatus !== 'declined')
   const finalistsRule = rules.find((rule) => rule.key === maxFinalistsRuleKey)
   const appearancesRule = rules.find((rule) => rule.key === maxCandidateAppearancesRuleKey)
@@ -371,7 +467,7 @@ function buildCandidateWorkflowNotices(candidates: AdminCandidateItem[], rules:
 }
 
 function addCandidateNotice(
-  notices: Record<number, Array<{ mode: 'warn' | 'block'; message: string }>>,
+  notices: Record<number, CandidateRuleNotice[]>,
   candidateId: number,
   rule: AdminWorkflowRule,
   message: string,
@@ -381,10 +477,34 @@ function addCandidateNotice(
 }
 
 function candidateIdentityKey(candidate: Pick<AdminCandidateItem, 'displayName' | 'channelSlug'>) {
+  if ('streamerIdentityId' in candidate && typeof candidate.streamerIdentityId === 'number') {
+    return `identity:${candidate.streamerIdentityId}`
+  }
   const channel = candidate.channelSlug.trim().replace(/^@+/, '').toLowerCase()
   return channel ? `slug:${channel}` : `name:${candidate.displayName.trim().toLowerCase()}`
 }
 
+function editorIdentityKey(
+  form: Pick<CandidateForm, 'displayName' | 'channelSlug'>,
+  editingId: number | 'new' | null,
+  candidates: AdminCandidateItem[],
+) {
+  if (typeof editingId === 'number') {
+    const existing = candidates.find((candidate) => candidate.id === editingId)
+    if (existing?.streamerIdentityId) {
+      return `identity:${existing.streamerIdentityId}`
+    }
+  }
+
+  const channel = form.channelSlug.trim().replace(/^@+/, '').toLowerCase()
+  if (channel) {
+    return `slug:${channel}`
+  }
+
+  const name = form.displayName.trim().toLowerCase()
+  return name ? `name:${name}` : null
+}
+
 function createCandidateDuplicateKey(candidate: AdminCandidateItem, field: 'name' | 'slug') {
   const value = field === 'name' ? candidate.displayName : candidate.channelSlug
   return `${candidate.categoryId}:${field}:${value.trim().toLowerCase()}`
@@ -399,6 +519,34 @@ function hasUsableCompilation(candidate: AdminCandidateItem) {
   return Boolean(candidate.clipCompilationUrl?.trim()) && candidate.clipEmbedStatus !== 'blocked'
 }
 
+function buildCandidateIdentitySummaries(candidates: AdminCandidateItem[], results: Array<{ candidateId: number }>) {
+  const winnerCandidateIds = new Set(results.map((result) => result.candidateId))
+  const summaries: Record<string, {
+    appearances: number
+    acceptedAppearances: number
+    winnerPlacements: number
+    nominationTally: number
+  }> = {}
+
+  for (const candidate of candidates) {
+    const key = candidateIdentityKey(candidate)
+    const existing = summaries[key] ?? {
+      appearances: 0,
+      acceptedAppearances: 0,
+      winnerPlacements: 0,
+      nominationTally: 0,
+    }
+
+    existing.appearances += candidate.acceptanceStatus === 'declined' ? 0 : 1
+    existing.acceptedAppearances += candidate.acceptanceStatus === 'accepted' ? 1 : 0
+    existing.winnerPlacements += winnerCandidateIds.has(candidate.id) ? 1 : 0
+    existing.nominationTally = Math.max(existing.nominationTally, candidate.nominationTally ?? 0)
+    summaries[key] = existing
+  }
+
+  return summaries
+}
+
 function isValidOptionalUrl(value: string) {
   const trimmed = value.trim()
   if (!trimmed) return true

frontend/src/components/admin/useAdminCategoryManager.ts

@@ -1,182 +1,648 @@
 import { computed, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import { useAwardsStore } from '../../stores/awards'
-import type { AdminCategoryItem } from '../../types/awards'
+import type { AdminCandidateItem, AdminNominationReviewItem } from '../../types/awards'
+
+const recommendedNominatorsRuleKey = 'recommended_nominators_per_subcategory'
 
 type CategoryStatusFilter = 'all' | 'empty' | 'reviews' | 'thin'
 
-interface CategoryForm {
+interface CategoryGroupForm {
+  groupName: string
+  description: string
+  sortOrder: number
+  maxNomineesPerUser: number
+}
+
+interface CategoryWithState {
+  id: number
   groupName: string
   name: string
   slug: string
   description: string
   sortOrder: number
   maxNomineesPerUser: number
+  viewerRangeMin: number | null
+  viewerRangeMax: number | null
+  candidateCount: number
+  pendingCount: number
+  nominationCount: number
+  nominatorCount: number
 }
 
+export interface AdminSubcategoryDraft {
+  name: string
+  slug: string
+  sortOrder: number
+  viewerRangeMin: number | null
+  viewerRangeMax: number | null
+}
+
+export interface AdminCategoryGroupSummary {
+  name: string
+  description: string
+  sortOrder: number
+  maxNomineesPerUser: number
+  candidateCount: number
+  pendingCount: number
+  nominationCount: number
+  nominatorCount: number
+  categories: CategoryWithState[]
+}
+
+export type AdminCategoryOverviewTarget =
+  | { type: 'group'; group: AdminCategoryGroupSummary }
+  | { type: 'category'; group: AdminCategoryGroupSummary; category: CategoryWithState }
+
 export function useAdminCategoryManager() {
   const store = useAwardsStore()
+  const route = useRoute()
   const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
   const seasonDetail = computed(() => store.adminSeasonDetail)
+
   const query = ref('')
   const statusFilter = ref<CategoryStatusFilter>('all')
-  const selectedCategoryId = ref<number | null>(null)
-  const saving = ref<number | 'new' | null>(null)
+  const selectedGroupName = ref<string | null>(null)
+  const focusedSubcategory = ref<string | null>(null)
+  const saving = ref<string | 'new' | 'templates' | null>(null)
   const adminMessage = ref('')
   const adminError = ref('')
-  const categoryToDelete = ref<AdminCategoryItem | null>(null)
+  const groupToDelete = ref<AdminCategoryGroupSummary | null>(null)
   const deleting = ref(false)
 
-  const editForms = reactive<Record<number, CategoryForm>>({})
-  const newCategoryForm = reactive(createEmptyCategoryForm())
+  const groupModalOpen = ref(false)
+  const editingGroupName = ref<string | null>(null)
+  const groupDraft = reactive(createEmptyGroupForm())
+  const overviewTarget = ref<AdminCategoryOverviewTarget | null>(null)
 
-  const categoriesWithState = computed(() =>
+  const subcategoryConfigModalOpen = ref(false)
+  const subcategoryModalOpen = ref(false)
+  const editingSubcategoryIndex = ref<number | null>(null)
+  const subcategoryDraft = ref<AdminSubcategoryDraft>(createEmptySubcategoryDraft(1))
+  const subcategoryDrafts = ref<AdminSubcategoryDraft[]>([])
+
+  const categoriesWithState = computed<CategoryWithState[]>(() =>
     seasonDetail.value.categories
-      .map((category) => ({
-        ...category,
-        pending: seasonDetail.value.pendingNominations.filter((nomination) => nomination.categoryId === category.id).length,
-        candidates: seasonDetail.value.candidates.filter((candidate) => candidate.categoryId === category.id).length,
-      }))
-      .sort((a, b) => a.sortOrder - b.sortOrder),
+      .map((category) => {
+        const categoryNominations = nominationsForCategory(category.id, seasonDetail.value)
+        return {
+          ...category,
+          candidateCount: category.candidateCount ?? seasonDetail.value.candidates.filter((candidate) => candidate.categoryId === category.id).length,
+          pendingCount: seasonDetail.value.pendingNominations.filter((nomination) => nomination.categoryId === category.id).length,
+          nominationCount: categoryNominations.length,
+          nominatorCount: uniqueNominatorCount(categoryNominations),
+        }
+      })
+      .sort((left, right) => left.sortOrder - right.sortOrder || left.name.localeCompare(right.name, 'de')),
   )
-  const filteredCategories = computed(() => {
+
+  const categoryGroups = computed<AdminCategoryGroupSummary[]>(() =>
+    [...groupByName(categoriesWithState.value).values()]
+      .map((categories) => {
+        const sorted = [...categories].sort((left, right) => left.sortOrder - right.sortOrder || left.name.localeCompare(right.name, 'de'))
+        const first = sorted[0]
+        return {
+          name: first.groupName.trim(),
+          description: first.description,
+          sortOrder: sorted[0]?.sortOrder ?? 1,
+          maxNomineesPerUser: first.maxNomineesPerUser,
+          candidateCount: sorted.reduce((sum, category) => sum + category.candidateCount, 0),
+          pendingCount: sorted.reduce((sum, category) => sum + category.pendingCount, 0),
+          nominationCount: sorted.reduce((sum, category) => sum + category.nominationCount, 0),
+          nominatorCount: uniqueNominatorCount(sorted.flatMap((category) => nominationsForCategory(category.id, seasonDetail.value))),
+          categories: sorted,
+        }
+      })
+      .sort((left, right) => left.sortOrder - right.sortOrder || left.name.localeCompare(right.name, 'de')),
+  )
+
+  const filteredGroups = computed(() => {
     const search = query.value.trim().toLowerCase()
-    return categoriesWithState.value.filter((category) => {
+    return categoryGroups.value.filter((group) => {
       const matchesStatus =
-        statusFilter.value === 'all' ||
-        (statusFilter.value === 'empty' && category.candidates === 0) ||
-        (statusFilter.value === 'reviews' && category.pending > 0) ||
-        (statusFilter.value === 'thin' && category.candidates > 0 && category.candidates < Math.max(2, category.maxNomineesPerUser))
-      const matchesSearch = !search || [category.groupName, category.name, category.slug, category.description]
+        statusFilter.value === 'all'
+        || (statusFilter.value === 'empty' && group.categories.some((category) => category.candidateCount === 0))
+        || (statusFilter.value === 'reviews' && group.pendingCount > 0)
+        || (statusFilter.value === 'thin' && group.categories.some((category) => category.candidateCount > 0 && category.candidateCount < Math.max(2, category.maxNomineesPerUser)))
+      const matchesSearch = !search || [
+        group.name,
+        group.description,
+        ...group.categories.flatMap((category) => [category.name, category.slug, formatViewerRange(category.viewerRangeMin, category.viewerRangeMax)]),
+      ]
         .join(' ')
         .toLowerCase()
         .includes(search)
+
       return matchesStatus && matchesSearch
     })
   })
-  const selectedCategory = computed(() =>
-    filteredCategories.value.find((category) => category.id === selectedCategoryId.value) ?? filteredCategories.value[0] ?? null,
+
+  const selectedGroup = computed(() =>
+    filteredGroups.value.find((group) => group.name === selectedGroupName.value)
+    ?? filteredGroups.value[0]
+    ?? null,
   )
+
   const categoryStats = computed(() => [
-    { label: 'Kategorien', value: seasonDetail.value.categories.length },
+    { label: 'Hauptkategorien', value: categoryGroups.value.length },
+    { label: 'Unterkategorien', value: seasonDetail.value.categories.length },
     { label: 'Kandidaten', value: seasonDetail.value.candidates.length },
     { label: 'Reviews', value: seasonDetail.value.pendingNominations.length },
   ])
+  const recommendedNominatorTarget = computed(() => {
+    const configuredRule = store.adminWorkflowRules.rules.find((rule) => rule.key === recommendedNominatorsRuleKey)
+    if (!configuredRule) {
+      return 4
+    }
+
+    return configuredRule.enabled ? Math.max(1, configuredRule.limit) : null
+  })
+
   const statusFilters = computed(() => [
-    { key: 'all' as const, label: 'Alle', count: categoriesWithState.value.length },
-    { key: 'empty' as const, label: 'Ohne Kandidaten', count: categoriesWithState.value.filter((category) => category.candidates === 0).length },
-    { key: 'reviews' as const, label: 'Mit Reviews', count: categoriesWithState.value.filter((category) => category.pending > 0).length },
-    { key: 'thin' as const, label: 'Dünn besetzt', count: categoriesWithState.value.filter((category) => category.candidates > 0 && category.candidates < Math.max(2, category.maxNomineesPerUser)).length },
+    { key: 'all' as const, label: 'Alle', count: categoryGroups.value.length },
+    { key: 'empty' as const, label: 'Mit Lücken', count: categoryGroups.value.filter((group) => group.categories.some((category) => category.candidateCount === 0)).length },
+    { key: 'reviews' as const, label: 'Mit Reviews', count: categoryGroups.value.filter((group) => group.pendingCount > 0).length },
+    { key: 'thin' as const, label: 'Dünn besetzt', count: categoryGroups.value.filter((group) => group.categories.some((category) => category.candidateCount > 0 && category.candidateCount < Math.max(2, category.maxNomineesPerUser))).length },
   ])
 
+  const activeSubcategoryTemplates = computed<AdminSubcategoryDraft[]>(() => {
+    if (seasonDetail.value.subcategoryTemplates.length > 0) {
+      return seasonDetail.value.subcategoryTemplates
+        .map((template) => ({
+          name: template.name,
+          slug: template.slug,
+          sortOrder: template.sortOrder,
+          viewerRangeMin: template.viewerRangeMin,
+          viewerRangeMax: template.viewerRangeMax,
+        }))
+        .sort((left, right) => left.sortOrder - right.sortOrder || left.name.localeCompare(right.name, 'de'))
+    }
+
+    const distinct = new Map<string, AdminSubcategoryDraft>()
+    for (const category of categoriesWithState.value) {
+      const key = [category.name, category.viewerRangeMin ?? '', category.viewerRangeMax ?? ''].join('|')
+      if (!distinct.has(key)) {
+        distinct.set(key, {
+          name: category.name,
+          slug: extractTemplateSlug(category.groupName, category.slug),
+          sortOrder: distinct.size + 1,
+          viewerRangeMin: category.viewerRangeMin,
+          viewerRangeMax: category.viewerRangeMax,
+        })
+      }
+    }
+
+    return [...distinct.values()]
+  })
+  const focusedSubcategoryTemplate = computed(() => {
+    if (!focusedSubcategory.value) return null
+    const normalizedFocus = normalizeSubcategoryFocus(focusedSubcategory.value)
+    return activeSubcategoryTemplates.value.find((template) =>
+      normalizeSubcategoryFocus(template.slug) === normalizedFocus
+      || normalizeSubcategoryFocus(template.name) === normalizedFocus,
+    ) ?? null
+  })
+
+  const canSaveSubcategory = computed(() => validateSubcategoryDraft(subcategoryDraft.value) === null)
+  const canSaveSubcategoryConfig = computed(() =>
+    subcategoryDrafts.value.length > 0
+    && subcategoryDrafts.value.every((draft) => validateSubcategoryDraft(draft) === null)
+    && hasUniqueValues(subcategoryDrafts.value.map((draft) => draft.name))
+    && hasUniqueValues(subcategoryDrafts.value.map((draft) => draft.slug)),
+  )
+  const canCreateGroup = computed(() => selectedSeasonId.value !== null && activeSubcategoryTemplates.value.length > 0)
+  const canSaveGroup = computed(() => validateGroupForm(groupDraft) === null && (editingGroupName.value !== null || canCreateGroup.value))
+  const groupModalTitle = computed(() =>
+    editingGroupName.value === null ? 'Hauptkategorie anlegen' : 'Hauptkategorie bearbeiten',
+  )
+  const subcategoryModalTitle = computed(() =>
+    editingSubcategoryIndex.value === null ? 'Unterkategorie hinzufuegen' : 'Unterkategorie bearbeiten',
+  )
+
+  const overviewCategories = computed(() => {
+    if (!overviewTarget.value) return []
+    return overviewTarget.value.type === 'group'
+      ? overviewTarget.value.group.categories
+      : [overviewTarget.value.category]
+  })
+  const overviewCategoryIds = computed(() => new Set(overviewCategories.value.map((category) => category.id)))
+  const overviewCandidates = computed<AdminCandidateItem[]>(() =>
+    seasonDetail.value.candidates.filter((candidate) => overviewCategoryIds.value.has(candidate.categoryId)),
+  )
+  const overviewNominations = computed<AdminNominationReviewItem[]>(() => {
+    if (!overviewTarget.value) return []
+    const groupName = overviewTarget.value.group.name
+    return [...seasonDetail.value.pendingNominations, ...seasonDetail.value.reviewedNominations]
+      .filter((nomination) =>
+        (nomination.categoryId !== null && overviewCategoryIds.value.has(nomination.categoryId))
+        || (nomination.suggestedCategoryId !== null && overviewCategoryIds.value.has(nomination.suggestedCategoryId))
+        || (overviewTarget.value?.type === 'group'
+          && nomination.categoryId === null
+          && nomination.categoryGroupName.trim().toLowerCase() === groupName.trim().toLowerCase()),
+      )
+  })
+  const overviewTitle = computed(() => {
+    if (!overviewTarget.value) return ''
+    return overviewTarget.value.type === 'group'
+      ? overviewTarget.value.group.name
+      : `${overviewTarget.value.group.name} · ${overviewTarget.value.category.name}`
+  })
+  const overviewSubtitle = computed(() => {
+    if (!overviewTarget.value) return ''
+    return overviewTarget.value.type === 'group'
+      ? `${overviewCategories.value.length} Unterkategorien · ${overviewCandidates.value.length} Kandidaten · ${overviewNominations.value.length} Nominierungen`
+      : `${formatViewerRange(overviewTarget.value.category.viewerRangeMin, overviewTarget.value.category.viewerRangeMax)} · ${overviewCandidates.value.length} Kandidaten · ${overviewNominations.value.length} Nominierungen`
+  })
+
+  function applyRouteFilters() {
+    const rawQuery = Array.isArray(route.query.q) ? route.query.q[0] : route.query.q
+    const rawStatus = Array.isArray(route.query.status) ? route.query.status[0] : route.query.status
+    const rawGroup = Array.isArray(route.query.group) ? route.query.group[0] : route.query.group
+    const rawSubcategory = Array.isArray(route.query.subcategory) ? route.query.subcategory[0] : route.query.subcategory
+
+    query.value = typeof rawQuery === 'string' ? rawQuery : ''
+    statusFilter.value = isCategoryStatusFilter(rawStatus) ? rawStatus : 'all'
+    selectedGroupName.value = typeof rawGroup === 'string' && rawGroup.trim() ? rawGroup : null
+    focusedSubcategory.value = typeof rawSubcategory === 'string' && rawSubcategory.trim() ? rawSubcategory.trim() : null
+  }
+
+  watch(categoryGroups, (groups) => {
+    if (!groups.some((group) => group.name === selectedGroupName.value)) {
+      selectedGroupName.value = groups[0]?.name ?? null
+    }
+  }, { immediate: true })
+
+  watch(filteredGroups, (groups) => {
+    if (!groups.some((group) => group.name === selectedGroupName.value)) {
+      selectedGroupName.value = groups[0]?.name ?? null
+    }
+  })
+
   watch(
-    seasonDetail,
-    (detail) => {
-      for (const category of detail.categories) {
-        editForms[category.id] = createCategoryForm(category)
-      }
-      newCategoryForm.sortOrder = detail.categories.length + 1
-      if (!detail.categories.some((category) => category.id === selectedCategoryId.value)) {
-        selectedCategoryId.value = detail.categories[0]?.id ?? null
-      }
+    () => [route.query.q, route.query.status, route.query.group, route.query.subcategory] as const,
+    () => {
+      applyRouteFilters()
     },
     { immediate: true },
   )
 
-  watch(filteredCategories, (categories) => {
-    if (!categories.some((category) => category.id === selectedCategoryId.value)) {
-      selectedCategoryId.value = categories[0]?.id ?? null
-    }
-  })
+  function isFocusedSubcategory(nameOrSlug: string) {
+    if (!focusedSubcategoryTemplate.value) return false
+    const normalizedValue = normalizeSubcategoryFocus(nameOrSlug)
+    return normalizedValue === normalizeSubcategoryFocus(focusedSubcategoryTemplate.value.slug)
+      || normalizedValue === normalizeSubcategoryFocus(focusedSubcategoryTemplate.value.name)
+  }
 
-  async function saveCategory(categoryId: number) {
-    if (!selectedSeasonId.value) return
-    saving.value = categoryId
+  function openSubcategoryConfigModal() {
+    adminError.value = ''
+    subcategoryDrafts.value = activeSubcategoryTemplates.value.map(cloneSubcategoryDraft)
+    subcategoryConfigModalOpen.value = true
+    subcategoryModalOpen.value = false
+    editingSubcategoryIndex.value = null
+  }
+
+  function openCreateGroupModal() {
+    adminError.value = ''
+    editingGroupName.value = null
+    Object.assign(groupDraft, createEmptyGroupForm(categoryGroups.value.length + 1))
+    groupModalOpen.value = true
+  }
+
+  function openEditGroupModal(group: AdminCategoryGroupSummary) {
+    adminError.value = ''
+    editingGroupName.value = group.name
+    Object.assign(groupDraft, createGroupForm(group))
+    groupModalOpen.value = true
+  }
+
+  function closeGroupModal() {
+    groupModalOpen.value = false
+    editingGroupName.value = null
+    Object.assign(groupDraft, createEmptyGroupForm(categoryGroups.value.length + 1))
+  }
+
+  function closeSubcategoryConfigModal() {
+    subcategoryConfigModalOpen.value = false
+    subcategoryModalOpen.value = false
+    editingSubcategoryIndex.value = null
+  }
+
+  function openCreateSubcategoryModal() {
+    adminError.value = ''
+    editingSubcategoryIndex.value = null
+    subcategoryDraft.value = createEmptySubcategoryDraft(nextDraftSortOrder(subcategoryDrafts.value))
+    subcategoryModalOpen.value = true
+  }
+
+  function openEditSubcategoryModal(index: number) {
+    const template = subcategoryDrafts.value[index]
+    if (!template) return
+    adminError.value = ''
+    editingSubcategoryIndex.value = index
+    subcategoryDraft.value = cloneSubcategoryDraft(template)
+    subcategoryModalOpen.value = true
+  }
+
+  function closeSubcategoryModal() {
+    subcategoryModalOpen.value = false
+    editingSubcategoryIndex.value = null
+  }
+
+  function fillSubcategorySlug() {
+    subcategoryDraft.value.slug = slugify(subcategoryDraft.value.name) || `unterkategorie-${nextDraftSortOrder(subcategoryDrafts.value)}`
+  }
+
+  function saveSubcategoryDraft() {
+    const validationMessage = validateSubcategoryDraft(subcategoryDraft.value)
+    if (validationMessage) {
+      adminError.value = validationMessage
+      return
+    }
+
+    const normalized = normalizeDraft(subcategoryDraft.value)
+    if (editingSubcategoryIndex.value === null) {
+      subcategoryDrafts.value = [...subcategoryDrafts.value, normalized]
+    } else {
+      subcategoryDrafts.value = subcategoryDrafts.value.map((item, index) => index === editingSubcategoryIndex.value ? normalized : item)
+    }
+
+    closeSubcategoryModal()
+  }
+
+  function removeDraftSubcategory(index: number) {
+    subcategoryDrafts.value = subcategoryDrafts.value
+      .filter((_, itemIndex) => itemIndex !== index)
+      .map((draft, itemIndex) => ({ ...draft, sortOrder: itemIndex + 1 }))
+  }
+
+  async function saveSubcategoryConfig() {
+    if (!selectedSeasonId.value || !canSaveSubcategoryConfig.value) return
+
+    saving.value = 'templates'
     adminMessage.value = ''
     adminError.value = ''
+
     try {
-      await store.updateAdminCategory(categoryId, selectedSeasonId.value, editForms[categoryId])
-      adminMessage.value = 'Kategorie gespeichert.'
+      await store.updateAdminSeasonSubcategoryTemplates(selectedSeasonId.value, {
+        templates: subcategoryDrafts.value
+          .map(normalizeDraft)
+          .sort((left, right) => left.sortOrder - right.sortOrder)
+          .map((draft, index) => ({ ...draft, sortOrder: index + 1 })),
+      })
+      adminMessage.value = 'Unterkategorien wurden fuer alle Hauptkategorien aktualisiert.'
+      closeSubcategoryConfigModal()
     } catch (error) {
-      adminError.value = error instanceof Error ? error.message : 'Kategorie konnte nicht gespeichert werden.'
+      adminError.value = error instanceof Error ? error.message : 'Unterkategorien konnten nicht gespeichert werden.'
     } finally {
       saving.value = null
     }
   }
 
-  async function createCategory() {
-    if (!selectedSeasonId.value) return
-    saving.value = 'new'
+  async function saveGroupModal() {
+    if (!selectedSeasonId.value || !canSaveGroup.value) return
+
+    const targetGroupName = editingGroupName.value
+    saving.value = targetGroupName ?? 'new'
     adminMessage.value = ''
     adminError.value = ''
+
     try {
-      await store.createAdminCategory(selectedSeasonId.value, newCategoryForm)
-      adminMessage.value = 'Kategorie angelegt.'
-      Object.assign(newCategoryForm, createEmptyCategoryForm(seasonDetail.value.categories.length + 1))
+      const payload = {
+        groupName: groupDraft.groupName.trim(),
+        description: groupDraft.description.trim(),
+        sortOrder: normalizePositiveInteger(groupDraft.sortOrder, 1),
+        maxNomineesPerUser: normalizePositiveInteger(groupDraft.maxNomineesPerUser, 3),
+      }
+      if (targetGroupName) {
+        await store.updateAdminCategoryGroup(selectedSeasonId.value, targetGroupName, payload)
+        adminMessage.value = 'Hauptkategorie gespeichert.'
+      } else {
+        await store.createAdminCategoryGroup(selectedSeasonId.value, payload)
+        adminMessage.value = 'Hauptkategorie angelegt.'
+      }
+      selectedGroupName.value = payload.groupName
+      closeGroupModal()
     } catch (error) {
-      adminError.value = error instanceof Error ? error.message : 'Kategorie konnte nicht angelegt werden.'
+      adminError.value = error instanceof Error ? error.message : targetGroupName
+        ? 'Hauptkategorie konnte nicht gespeichert werden.'
+        : 'Hauptkategorie konnte nicht angelegt werden.'
     } finally {
       saving.value = null
     }
   }
 
-  function fillNewSlug() {
-    newCategoryForm.slug = slugify(newCategoryForm.name)
-  }
+  async function confirmDeleteGroup() {
+    if (!selectedSeasonId.value || !groupToDelete.value) return
 
-  async function confirmDeleteCategory() {
-    if (!categoryToDelete.value || !selectedSeasonId.value) return
     deleting.value = true
     adminError.value = ''
     try {
-      await store.deleteAdminCategory(categoryToDelete.value.id, selectedSeasonId.value)
-      adminMessage.value = `Kategorie „${categoryToDelete.value.name}" wurde gelöscht.`
-      categoryToDelete.value = null
+      await store.deleteAdminCategoryGroup(selectedSeasonId.value, groupToDelete.value.name)
+      adminMessage.value = `Hauptkategorie "${groupToDelete.value.name}" wurde geloescht.`
+      groupToDelete.value = null
     } catch (error) {
-      adminError.value = error instanceof Error ? error.message : 'Löschen fehlgeschlagen.'
+      adminError.value = error instanceof Error ? error.message : 'Loeschen fehlgeschlagen.'
     } finally {
       deleting.value = false
     }
   }
 
+  function openGroupOverview(group: AdminCategoryGroupSummary) {
+    overviewTarget.value = { type: 'group', group }
+  }
+
+  function openCategoryOverview(group: AdminCategoryGroupSummary, category: CategoryWithState) {
+    overviewTarget.value = { type: 'category', group, category }
+  }
+
   return {
     selectedSeasonId,
     query,
     statusFilter,
-    selectedCategoryId,
+    selectedGroupName,
+    focusedSubcategory,
     saving,
     adminMessage,
     adminError,
-    editForms,
-    newCategoryForm,
-    filteredCategories,
-    selectedCategory,
+    groupModalOpen,
+    editingGroupName,
+    groupDraft,
+    overviewTarget,
+    overviewTitle,
+    overviewSubtitle,
+    overviewCategories,
+    overviewCandidates,
+    overviewNominations,
+    filteredGroups,
+    selectedGroup,
     categoryStats,
     statusFilters,
-    categoryToDelete,
+    activeSubcategoryTemplates,
+    focusedSubcategoryTemplate,
+    subcategoryConfigModalOpen,
+    subcategoryModalOpen,
+    subcategoryDraft,
+    subcategoryDrafts,
+    subcategoryModalTitle,
+    canSaveSubcategory,
+    canSaveSubcategoryConfig,
+    canCreateGroup,
+    canSaveGroup,
+    groupModalTitle,
+    groupToDelete,
     deleting,
-    saveCategory,
-    createCategory,
-    fillNewSlug,
-    confirmDeleteCategory,
+    openCreateGroupModal,
+    openEditGroupModal,
+    closeGroupModal,
+    openSubcategoryConfigModal,
+    closeSubcategoryConfigModal,
+    openCreateSubcategoryModal,
+    openEditSubcategoryModal,
+    closeSubcategoryModal,
+    fillSubcategorySlug,
+    saveSubcategoryDraft,
+    removeDraftSubcategory,
+    saveSubcategoryConfig,
+    saveGroupModal,
+    confirmDeleteGroup,
+    openGroupOverview,
+    openCategoryOverview,
+    isFocusedSubcategory,
+    formatViewerRange,
+    recommendedNominatorTarget,
   }
 }
 
-function createCategoryForm(category: AdminCategoryItem): CategoryForm
-function createCategoryForm(category?: AdminCategoryItem, sortOrder?: number): CategoryForm
-function createCategoryForm(category?: AdminCategoryItem, sortOrder = 1): CategoryForm {
+function groupByName(categories: CategoryWithState[]) {
+  const groups = new Map<string, CategoryWithState[]>()
+  for (const category of categories) {
+    const key = category.groupName.trim() || 'Ohne Gruppe'
+    const current = groups.get(key) ?? []
+    current.push(category)
+    groups.set(key, current)
+  }
+
+  return groups
+}
+
+function nominationsForCategory(categoryId: number, source?: {
+  pendingNominations: AdminNominationReviewItem[]
+  reviewedNominations: AdminNominationReviewItem[]
+}) {
+  const allNominations = source
+    ? [...source.pendingNominations, ...source.reviewedNominations]
+    : []
+
+  if (source) {
+    return allNominations.filter((nomination) =>
+      (nomination.categoryId !== null && nomination.categoryId === categoryId)
+      || (nomination.suggestedCategoryId !== null && nomination.suggestedCategoryId === categoryId),
+    )
+  }
+
+  return []
+}
+
+function uniqueNominatorCount(nominations: AdminNominationReviewItem[]) {
+  return new Set(nominations.map((nomination) => nomination.submittedByTwitchId.trim().toLowerCase()).filter(Boolean)).size
+}
+
+function isCategoryStatusFilter(value: unknown): value is CategoryStatusFilter {
+  return value === 'all' || value === 'empty' || value === 'reviews' || value === 'thin'
+}
+
+function normalizeSubcategoryFocus(value: string) {
+  return value.trim().toLowerCase()
+}
+
+function createGroupForm(group?: AdminCategoryGroupSummary, sortOrder = 1): CategoryGroupForm {
   return {
-    groupName: category?.groupName ?? '',
-    name: category?.name ?? '',
-    slug: category?.slug ?? '',
-    description: category?.description ?? '',
-    sortOrder: category?.sortOrder ?? sortOrder,
-    maxNomineesPerUser: category?.maxNomineesPerUser ?? 3,
+    groupName: group?.name ?? '',
+    description: group?.description ?? '',
+    sortOrder: group?.sortOrder ?? sortOrder,
+    maxNomineesPerUser: group?.maxNomineesPerUser ?? 3,
   }
 }
 
-function createEmptyCategoryForm(sortOrder = 1): CategoryForm {
-  return createCategoryForm(undefined, sortOrder)
+function createEmptyGroupForm(sortOrder = 1): CategoryGroupForm {
+  return createGroupForm(undefined, sortOrder)
+}
+
+function validateGroupForm(form: CategoryGroupForm) {
+  if (!form.groupName.trim()) return 'Der Name der Hauptkategorie ist erforderlich.'
+  if (form.groupName.trim().length > 80) return 'Der Name der Hauptkategorie muss unter 80 Zeichen bleiben.'
+  if (form.description.trim().length > 400) return 'Die Beschreibung muss unter 400 Zeichen bleiben.'
+  if (normalizePositiveInteger(form.sortOrder, 1) > 200) return 'Die Reihenfolge muss zwischen 1 und 200 liegen.'
+  if (normalizePositiveInteger(form.maxNomineesPerUser, 3) > 10) return 'Das Nominierungs-Limit muss zwischen 1 und 10 liegen.'
+  return null
+}
+
+function normalizePositiveInteger(value: number, fallback: number) {
+  return Number.isFinite(value) ? Math.max(1, Math.round(value)) : fallback
+}
+
+function createEmptySubcategoryDraft(sortOrder: number): AdminSubcategoryDraft {
+  return {
+    name: '',
+    slug: `unterkategorie-${sortOrder}`,
+    sortOrder,
+    viewerRangeMin: null,
+    viewerRangeMax: null,
+  }
+}
+
+function cloneSubcategoryDraft(draft: AdminSubcategoryDraft): AdminSubcategoryDraft {
+  return {
+    name: draft.name,
+    slug: draft.slug,
+    sortOrder: draft.sortOrder,
+    viewerRangeMin: draft.viewerRangeMin,
+    viewerRangeMax: draft.viewerRangeMax,
+  }
+}
+
+function nextDraftSortOrder(items: AdminSubcategoryDraft[]) {
+  return items.reduce((max, item) => Math.max(max, item.sortOrder), 0) + 1
+}
+
+function validateSubcategoryDraft(draft: AdminSubcategoryDraft) {
+  const normalized = normalizeDraft(draft)
+  if (!normalized.name) return 'Der Name der Unterkategorie ist erforderlich.'
+  if (!normalized.slug) return 'Der Slug der Unterkategorie ist erforderlich.'
+  if (normalized.viewerRangeMin !== null && normalized.viewerRangeMin < 0) return 'Viewer-Range darf nicht negativ sein.'
+  if (normalized.viewerRangeMax !== null && normalized.viewerRangeMax < 0) return 'Viewer-Range darf nicht negativ sein.'
+  if (normalized.viewerRangeMin !== null && normalized.viewerRangeMax !== null && normalized.viewerRangeMax < normalized.viewerRangeMin) {
+    return 'Viewer-Range Ende muss groesser oder gleich dem Start sein.'
+  }
+
+  return null
+}
+
+function normalizeDraft(draft: AdminSubcategoryDraft): AdminSubcategoryDraft {
+  return {
+    name: draft.name.trim(),
+    slug: slugify(draft.slug) || slugify(draft.name),
+    sortOrder: Number.isFinite(draft.sortOrder) ? Math.max(1, Math.round(draft.sortOrder)) : 1,
+    viewerRangeMin: normalizeNullableNumber(draft.viewerRangeMin),
+    viewerRangeMax: normalizeNullableNumber(draft.viewerRangeMax),
+  }
+}
+
+function normalizeNullableNumber(value: number | null) {
+  return value === null || Number.isNaN(value) ? null : Math.max(0, Math.round(value))
+}
+
+function hasUniqueValues(values: string[]) {
+  const normalized = values.map((value) => value.trim().toLowerCase()).filter(Boolean)
+  return new Set(normalized).size === normalized.length
+}
+
+function extractTemplateSlug(groupName: string, slug: string) {
+  const groupSlug = slugify(groupName)
+  const normalizedSlug = slug.trim().toLowerCase()
+  const prefix = groupSlug ? `${groupSlug}-` : ''
+  return prefix && normalizedSlug.startsWith(prefix) ? normalizedSlug.slice(prefix.length) : normalizedSlug
 }
 
 function slugify(value: string) {
@@ -188,3 +654,10 @@ function slugify(value: string) {
     .replace(/[^a-z0-9]+/g, '-')
     .replace(/^-+|-+$/g, '')
 }
+
+export function formatViewerRange(min: number | null, max: number | null) {
+  if (min !== null && max !== null) return `${min} - ${max} Viewer`
+  if (min !== null) return `ab ${min} Viewer`
+  if (max !== null) return `bis ${max} Viewer`
+  return 'ohne Viewer-Range'
+}

frontend/src/components/admin/useAdminClipManager.ts

@@ -1,5 +1,6 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { CheckCircle2, Film, Layers3, PlayCircle } from '@lucide/vue'
+import { useRoute } from 'vue-router'
 
 import { buildClipEmbed, type ClipEmbed } from '../../lib/clipEmbeds'
 import { useAwardsStore } from '../../stores/awards'
@@ -11,6 +12,7 @@ type ClipPlatformFilter = 'all' | string
 
 export function useAdminClipManager() {
   const store = useAwardsStore()
+  const route = useRoute()
   const query = ref('')
   const statusFilter = ref<ClipStatusFilter>('all')
   const platformFilter = ref<ClipPlatformFilter>('all')
@@ -126,6 +128,20 @@ export function useAdminClipManager() {
       })),
   ])
 
+  function applyRouteFilters() {
+    const rawQuery = Array.isArray(route.query.q) ? route.query.q[0] : route.query.q
+    const rawStatus = Array.isArray(route.query.status) ? route.query.status[0] : route.query.status
+    const rawPlatform = Array.isArray(route.query.platform) ? route.query.platform[0] : route.query.platform
+    const rawCategoryId = Array.isArray(route.query.categoryId) ? route.query.categoryId[0] : route.query.categoryId
+
+    query.value = typeof rawQuery === 'string' ? rawQuery : ''
+    statusFilter.value = isClipStatusFilter(rawStatus) ? rawStatus : 'all'
+    platformFilter.value = typeof rawPlatform === 'string' && rawPlatform.trim() ? rawPlatform : 'all'
+
+    const normalizedCategoryId = typeof rawCategoryId === 'string' && rawCategoryId.trim() ? rawCategoryId : 'all'
+    categoryFilter.value = categoryFilters.value.some((filter) => filter.id === normalizedCategoryId) ? normalizedCategoryId : 'all'
+  }
+
   watch(submissions, (items) => {
     for (const clip of items) {
       if (reviewNotes[clip.id] === undefined) {
@@ -134,6 +150,14 @@ export function useAdminClipManager() {
     }
   }, { immediate: true })
 
+  watch(
+    () => [route.query.q, route.query.status, route.query.platform, route.query.categoryId] as const,
+    () => {
+      applyRouteFilters()
+    },
+    { immediate: true },
+  )
+
   async function updateClipStatus(clip: AdminClipSubmissionItem, status: ClipReviewStatus) {
     if (!selectedSeasonId.value) return
     statusSaving.value = clip.id
@@ -239,6 +263,10 @@ function matchesStatusFilter(status: string, filter: ClipStatusFilter) {
   return filter === 'all' || status === filter || (filter === 'reviewed' && status !== 'pending')
 }
 
+function isClipStatusFilter(value: unknown): value is ClipStatusFilter {
+  return value === 'all' || value === 'pending' || value === 'reviewed'
+}
+
 function normalizeClipUrl(clipUrl: string) {
   return clipUrl.trim().toLowerCase()
 }

frontend/src/components/admin/useAdminContentManager.ts

@@ -7,13 +7,27 @@ import {
 } from '../../lib/socialIcons'
 import { privacyContentForStorage, privacyContentToHtml } from '../../lib/privacyContent'
 import { useAwardsStore } from '../../stores/awards'
+import type { ShowactFormField } from '../../types/awards/showactForm'
+import { DEFAULT_SHOWACT_SCHEMA } from '../../types/awards/showactForm'
 import type { AdminContentForm, SocialLinkForm } from './adminContentTypes'
 
+function parseShowactSchema(json: string): ShowactFormField[] {
+  try {
+    const parsed = JSON.parse(json)
+    if (Array.isArray(parsed) && parsed.length > 0) return parsed as ShowactFormField[]
+  } catch {
+    // ignore parse errors
+  }
+  return DEFAULT_SHOWACT_SCHEMA
+}
+
 function createEmptyForm(): AdminContentForm {
   return {
     hostDisplayName: '',
     hostTagline: '',
     newsletterUrl: '',
+    shareXUrl: '',
+    shareDiscordUrl: '',
     privacyEmail: '',
     privacyPolicyContent: '',
     imprintUrl: '',
@@ -26,6 +40,7 @@ function createEmptyForm(): AdminContentForm {
     showactsContent: '',
     socialLinks: [],
     faq: [],
+    showactFormSchema: [],
   }
 }
 
@@ -77,6 +92,8 @@ export function useAdminContentManager() {
       form.hostDisplayName = settings.hostDisplayName
       form.hostTagline = settings.hostTagline
       form.newsletterUrl = settings.newsletterUrl
+      form.shareXUrl = settings.shareXUrl
+      form.shareDiscordUrl = settings.shareDiscordUrl
       form.privacyEmail = settings.privacyEmail
       form.privacyPolicyContent = settings.privacyPolicyContent
       form.imprintUrl = settings.imprintUrl
@@ -99,6 +116,7 @@ export function useAdminContentManager() {
         question: item.question ?? '',
         answer: item.answer ?? '',
       }))
+      form.showactFormSchema = parseShowactSchema(settings.showactFormSchemaJson ?? '[]')
     },
     { immediate: true, deep: true },
   )
@@ -245,6 +263,8 @@ export function useAdminContentManager() {
         hostDisplayName: form.hostDisplayName,
         hostTagline: form.hostTagline,
         newsletterUrl: form.newsletterUrl,
+        shareXUrl: form.shareXUrl,
+        shareDiscordUrl: form.shareDiscordUrl,
         privacyEmail: form.privacyEmail,
         privacyPolicyContent: privacyContentForStorage(form.privacyPolicyContent),
         imprintUrl: form.imprintUrl,
@@ -255,6 +275,7 @@ export function useAdminContentManager() {
         sponsorsContent: privacyContentForStorage(form.sponsorsContent),
         showactsUrl: form.showactsUrl,
         showactsContent: privacyContentForStorage(form.showactsContent),
+        showactFormSchemaJson: JSON.stringify(form.showactFormSchema),
         socialLinks: form.socialLinks
           .map((item) => ({
             label: item.label.trim(),

frontend/src/components/admin/useAdminDashboardOverview.ts

@@ -149,7 +149,9 @@ export function useAdminDashboardOverview() {
     {
       label: 'Kandidatenbasis',
       value: store.adminSeasonDetail.candidates.length,
-      to: '/admin/candidates',
+      to: store.adminSeasonDetail.candidates.length === 0
+        ? '/admin/categories?status=empty'
+        : '/admin/candidates',
       hint: 'Kandidaten und Plattformen schnell prüfen',
       icon: Users,
       tone: 'emerald',
@@ -167,14 +169,18 @@ export function useAdminDashboardOverview() {
       {
         label: 'Kategorien ohne Kandidaten',
         value: categoriesWithoutCandidates.length,
-        to: '/admin/categories',
+        to: categoriesWithoutCandidates.length > 0
+          ? `/admin/categories?group=${encodeURIComponent(categoriesWithoutCandidates[0]!.groupName)}`
+          : '/admin/categories',
         state: categoriesWithoutCandidates.length === 0 ? 'ok' : 'warn',
         note: categoriesWithoutCandidates.length === 0 ? 'Alle Kategorien sind besetzt.' : 'Vor Voting-Endspurt prüfen.',
       },
       {
         label: 'Review-Backlog verteilt',
         value: categoriesWithReviews.length,
-        to: '/admin/nominations',
+        to: categoriesWithReviews.length > 0
+          ? `/admin/nominations?review=1&categoryId=${categoriesWithReviews[0]!.id}&status=heavy`
+          : '/admin/nominations?review=1',
         state: categoriesWithReviews.length <= 1 ? 'ok' : 'warn',
         note: categoriesWithReviews.length <= 1 ? 'Backlog ist fokussiert.' : 'Mehrere Kategorien brauchen Sichtung.',
       },

frontend/src/components/admin/useAdminOperationalSettings.ts

@@ -30,6 +30,7 @@ export function useAdminOperationalSettings() {
     twitchClientId: '',
     twitchRedirectUri: '',
     twitchScope: '',
+    sessionIdleTimeoutHours: 3,
     maintenanceModeEnabled: false,
     maintenanceTitle: fallbackMaintenanceTitle,
     maintenanceMessage: fallbackMaintenanceMessage,
@@ -89,6 +90,12 @@ export function useAdminOperationalSettings() {
         ? demoCredentialsComplete.value ? 'warning' : 'danger'
         : 'good',
     },
+    {
+      label: 'Session Timeout',
+      value: `${operationalForm.sessionIdleTimeoutHours}h`,
+      note: `Logout nach ${operationalForm.sessionIdleTimeoutHours} Stunden ohne Aktivitaet.`,
+      tone: operationalForm.sessionIdleTimeoutHours >= 3 ? 'good' : 'danger',
+    },
     {
       label: 'Wartungsmodus',
       value: operationalForm.maintenanceModeEnabled ? 'Aktiv' : 'Aus',
@@ -126,6 +133,7 @@ export function useAdminOperationalSettings() {
     operationalForm.twitchClientId = response.twitchClientId
     operationalForm.twitchRedirectUri = response.twitchRedirectUri
     operationalForm.twitchScope = response.twitchScope
+    operationalForm.sessionIdleTimeoutHours = response.sessionIdleTimeoutHours
     operationalForm.maintenanceModeEnabled = response.maintenanceModeEnabled
     operationalForm.maintenanceTitle = response.maintenanceTitle
     operationalForm.maintenanceMessage = response.maintenanceMessage
@@ -148,6 +156,7 @@ export function useAdminOperationalSettings() {
       twitchClientId: operationalForm.twitchClientId,
       twitchRedirectUri: operationalForm.twitchRedirectUri,
       twitchScope: operationalForm.twitchScope,
+      sessionIdleTimeoutHours: operationalForm.sessionIdleTimeoutHours,
       twitchClientSecretInput: twitchClientSecretInput.value,
       maintenanceModeEnabled: operationalForm.maintenanceModeEnabled,
       maintenanceTitle: operationalForm.maintenanceTitle,
@@ -208,6 +217,11 @@ export function useAdminOperationalSettings() {
       return false
     }
 
+    if (!Number.isInteger(operationalForm.sessionIdleTimeoutHours) || operationalForm.sessionIdleTimeoutHours < 3) {
+      operationalError.value = 'Session-Timeout muss mindestens 3 Stunden betragen.'
+      return false
+    }
+
     return true
   }
 
@@ -235,7 +249,7 @@ export function useAdminOperationalSettings() {
       twitchClientSecretInput.value = ''
       await loadOperationalSettings({ silent: true })
       clearSiteStatusCache()
-      operationalSuccess.value = 'Demo-Zugang und Wartungsmodus wurden gespeichert.'
+      operationalSuccess.value = 'Demo-Zugang, Session-Timeout und Wartungsmodus wurden gespeichert.'
     } catch (error) {
       operationalError.value = error instanceof ApiRequestError
         ? error.message
@@ -254,6 +268,7 @@ export function useAdminOperationalSettings() {
       operationalForm.twitchClientId,
       operationalForm.twitchRedirectUri,
       operationalForm.twitchScope,
+      operationalForm.sessionIdleTimeoutHours,
       twitchClientSecretInput.value,
       operationalForm.maintenanceModeEnabled,
       operationalForm.maintenanceTitle,

frontend/src/components/admin/useAdminOptionalFeatures.ts

@@ -40,6 +40,8 @@ export function useAdminOptionalFeatures() {
       clipAdminMenuVisible: optionalFeaturesForm.clipAdminMenuVisible,
       clipSubmissionDisabledMessage: normalizeDisabledMessage(optionalFeaturesForm.clipSubmissionDisabledMessage),
       showactApplicationsEnabled: store.adminOptionalFeatureSettings.showactApplicationsEnabled,
+      showactApplicationStartsAt: store.adminOptionalFeatureSettings.showactApplicationStartsAt,
+      showactApplicationEndsAt: store.adminOptionalFeatureSettings.showactApplicationEndsAt,
       showactApplicationDisabledMessage: store.adminOptionalFeatureSettings.showactApplicationDisabledMessage,
       sponsorsVisible: store.adminOptionalFeatureSettings.sponsorsVisible,
     }

frontend/src/components/admin/useAdminReviewsManager.ts

@@ -3,8 +3,11 @@ import { useRoute } from 'vue-router'
 
 import { SOCIAL_ICON_OPTIONS, socialIconOptionForValue } from '../../lib/socialIcons'
 import { useAwardsStore } from '../../stores/awards'
+import type { AdminNominationReviewItem } from '../../types/awards'
 
-export function useAdminReviewsManager() {
+export function useAdminReviewsManager(options?: {
+  categoryIdsFilter?: () => number[] | null | undefined
+}) {
   const store = useAwardsStore()
   const route = useRoute()
   const reviewSaving = ref<number | null>(null)
@@ -12,120 +15,166 @@ export function useAdminReviewsManager() {
   const adminMessage = ref('')
   const adminError = ref('')
   const reviewFilter = ref('')
-  const categoryFilter = ref<number | null>(null)
+  const categoryFilter = ref<string | null>(null)
+  const subcategoryFilter = ref<number | null>(null)
   const selectedNominationId = ref<number | null>(null)
+  const isReviewModalOpen = ref(false)
   const reviewForms = reactive<Record<number, {
     displayName: string
     channelSlug: string
     platform: string
+    categoryId: number | null
     reviewNote: string
   }>>({})
 
   const seasonDetail = computed(() => store.adminSeasonDetail)
   const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
   const candidatePlatformOptions = computed(() => SOCIAL_ICON_OPTIONS.filter((option) => option.key !== 'website'))
+  const reviewGroups = computed(() => seasonDetail.value.pendingNominationGroups ?? [])
+  const pendingNominationById = computed(() =>
+    new Map(seasonDetail.value.pendingNominations.map((nomination) => [nomination.id, nomination])),
+  )
+  const tierCategoryFilterIds = computed(() =>
+    (options?.categoryIdsFilter?.() ?? [])
+      .filter((value): value is number => Number.isFinite(value) && value > 0),
+  )
   const filteredNominations = computed(() => {
     const query = reviewFilter.value.trim().toLowerCase()
-    return seasonDetail.value.pendingNominations.filter((nomination) =>
-      (!categoryFilter.value || nomination.categoryId === categoryFilter.value) &&
-      (!query || [nomination.categoryName, nomination.candidateText, nomination.submittedByTwitchId, extractNominationStreamUrl(nomination)]
-        .join(' ')
-        .toLowerCase()
-        .includes(query)),
+    const tierFilter = new Set(tierCategoryFilterIds.value)
+    return reviewGroups.value.filter((nomination) =>
+      (tierFilter.size === 0 || groupMatchesTierFilter(nomination, tierFilter, pendingNominationById.value)) &&
+      (subcategoryFilter.value === null || groupMatchesTierFilter(nomination, new Set([subcategoryFilter.value]), pendingNominationById.value)) &&
+      (!categoryFilter.value || nomination.categoryGroupName === categoryFilter.value) &&
+      (!query || [
+        nomination.categoryGroupName,
+        nomination.displayName,
+        nomination.resolvedChannel,
+        nomination.resolvedPlatform,
+        nomination.streamUrl,
+        nomination.suggestedCategoryName,
+      ].join(' ').toLowerCase().includes(query)),
     )
   })
   const selectedNomination = computed(() =>
     filteredNominations.value.find((nomination) => nomination.id === selectedNominationId.value) ?? filteredNominations.value[0] ?? null,
   )
   const reviewStats = computed(() => [
-    { label: 'Offen', value: seasonDetail.value.pendingNominations.length },
-    { label: 'Entschieden', value: seasonDetail.value.reviewedNominations.length },
-    { label: 'Sichtbar', value: filteredNominations.value.length },
-    { label: 'Kategorien', value: new Set(seasonDetail.value.pendingNominations.map((nomination) => nomination.categoryName)).size },
+    { label: 'Hauptkategorien', value: new Set(seasonDetail.value.categories.map((category) => category.groupName)).size },
+    { label: 'Unterkategorien', value: seasonDetail.value.categories.length },
+    { label: 'Nominierungen', value: seasonDetail.value.pendingNominations.length + seasonDetail.value.reviewedNominations.length },
+    { label: 'Noch zu bearbeiten', value: seasonDetail.value.pendingNominationGroups.length },
   ])
   const reviewedNominations = computed(() => seasonDetail.value.reviewedNominations.slice(0, 12))
   const categoryOptions = computed(() =>
-    seasonDetail.value.categories
-      .filter((category) => seasonDetail.value.pendingNominations.some((nomination) => nomination.categoryId === category.id))
-      .map((category) => ({
-        id: category.id,
-        label: category.name,
-        count: seasonDetail.value.pendingNominations.filter((nomination) => nomination.categoryId === category.id).length,
+    [...new Set(reviewGroups.value.map((nomination) => nomination.categoryGroupName))]
+      .filter(Boolean)
+      .sort((a, b) => a.localeCompare(b))
+      .map((groupName) => ({
+        id: groupName,
+        label: groupName,
+        count: reviewGroups.value.filter((nomination) => nomination.categoryGroupName === groupName).length,
       })),
   )
+  const availableSubcategoryOptions = computed(() => {
+    const scopedCategories = seasonDetail.value.categories
+      .filter((category) =>
+        (tierCategoryFilterIds.value.length === 0 || tierCategoryFilterIds.value.includes(category.id))
+        && (!categoryFilter.value || category.groupName === categoryFilter.value),
+      )
+      .sort((left, right) => left.sortOrder - right.sortOrder)
+
+    return [
+      {
+        id: null,
+        label: 'Alle',
+        count: reviewGroups.value.filter((nomination) =>
+          (tierCategoryFilterIds.value.length === 0 || groupMatchesTierFilter(nomination, new Set(tierCategoryFilterIds.value), pendingNominationById.value))
+          && (!categoryFilter.value || nomination.categoryGroupName === categoryFilter.value),
+        ).length,
+      },
+      ...scopedCategories.map((category) => ({
+        id: category.id,
+        label: category.name,
+        count: reviewGroups.value.filter((nomination) =>
+          groupMatchesTierFilter(nomination, new Set([category.id]), pendingNominationById.value),
+        ).length,
+        note: formatTierRangeNote(category.viewerRangeMin, category.viewerRangeMax),
+      })),
+    ]
+  })
+  const tierCategoryOptions = computed(() => {
+    if (!selectedNomination.value) return []
+    return seasonDetail.value.categories
+      .filter((category) => category.groupName === selectedNomination.value?.categoryGroupName)
+      .map((category) => ({
+        id: category.id,
+        label: formatTierOptionLabel(category.name, category.viewerRangeMin, category.viewerRangeMax),
+      }))
+  })
   const selectedCandidateCollision = computed(() => {
     if (!selectedNomination.value) return null
     const form = reviewForms[selectedNomination.value.id]
-    if (!form) return null
+    if (!form?.categoryId) return null
     const normalizedName = form.displayName.trim().toLowerCase()
     const normalizedSlug = form.channelSlug.trim().toLowerCase()
     return seasonDetail.value.candidates.find((candidate) =>
-      candidate.categoryId === selectedNomination.value?.categoryId &&
-      (candidate.displayName.trim().toLowerCase() === normalizedName || (!!normalizedSlug && candidate.channelSlug.trim().toLowerCase() === normalizedSlug)),
+      candidate.categoryId === form.categoryId &&
+      (
+        (!!selectedNomination.value?.streamerIdentityId && candidate.streamerIdentityId === selectedNomination.value.streamerIdentityId)
+        || candidate.displayName.trim().toLowerCase() === normalizedName
+        || (!!normalizedSlug && candidate.channelSlug.trim().toLowerCase() === normalizedSlug)
+      ),
     ) ?? null
   })
-  const selectedRelatedPendingNominations = computed(() => {
-    if (!selectedNomination.value) return []
-    const selectedName = selectedNomination.value.candidateText.trim().toLowerCase()
-    const selectedStreamUrl = extractNominationStreamUrl(selectedNomination.value).toLowerCase()
-
-    return seasonDetail.value.pendingNominations
-      .filter((nomination) => {
-        if (nomination.id === selectedNomination.value?.id || nomination.categoryId !== selectedNomination.value?.categoryId) {
-          return false
-        }
-
-        const sameName = Boolean(selectedName) && nomination.candidateText.trim().toLowerCase() === selectedName
-        const sameStreamUrl = selectedStreamUrl && extractNominationStreamUrl(nomination).toLowerCase() === selectedStreamUrl
-        return sameName || sameStreamUrl
-      })
-      .slice(0, 5)
-  })
   const selectedNominationSignalSummary = computed(() => {
     if (!selectedNomination.value) return null
-
-    const selectedName = selectedNomination.value.candidateText.trim().toLowerCase()
-    const selectedStreamUrl = extractNominationStreamUrl(selectedNomination.value).toLowerCase()
-    const relatedNominations = seasonDetail.value.pendingNominations.filter((nomination) =>
-      nomination.categoryId === selectedNomination.value?.categoryId &&
-      (
-        (Boolean(selectedName) && nomination.candidateText.trim().toLowerCase() === selectedName) ||
-        (Boolean(selectedStreamUrl) && extractNominationStreamUrl(nomination).toLowerCase() === selectedStreamUrl)
-      ),
-    )
-    const submitters = new Set(relatedNominations.map((nomination) => nomination.submittedByTwitchId.trim().toLowerCase()).filter(Boolean))
-    const platforms = new Set(
-      relatedNominations
-        .map((nomination) => resolveStreamIdentity(extractNominationStreamUrl(nomination)).platform)
-        .filter(Boolean),
-    )
-
     return {
-      submissions: relatedNominations.length,
-      uniqueSubmitters: submitters.size,
-      platforms: [...platforms].sort(),
+      submissions: selectedNomination.value.nominationTally,
+      uniqueSubmitters: selectedNomination.value.uniqueSubmitterCount,
+      platforms: selectedNomination.value.resolvedPlatform ? [selectedNomination.value.resolvedPlatform] : [],
     }
   })
+  const trackingReviewNotes = computed(() =>
+    seasonDetail.value.showTrackingReviewNotes
+      ? (seasonDetail.value.trackingReviewNotes ?? '')
+      : '',
+  )
+  const selectedNominationHasBlockingFlag = computed(() =>
+    selectedNomination.value?.trackingFlags?.some((flag) => flag.blocksApproval) ?? false,
+  )
+  const selectedRelatedPendingNominations = computed<AdminNominationReviewItem[]>(() => {
+    if (!selectedNomination.value) return []
+    const nominationIds = new Set(selectedNomination.value.nominationIds)
+    return seasonDetail.value.pendingNominations
+      .filter((nomination) => nominationIds.has(nomination.id))
+      .sort((left, right) => left.createdAt.localeCompare(right.createdAt))
+  })
   const canApproveSelected = computed(() => {
     if (!selectedNomination.value) return false
     const form = reviewForms[selectedNomination.value.id]
-    return Boolean(form?.displayName.trim() && form.channelSlug.trim() && form.platform.trim())
+    return Boolean(form?.displayName.trim() && form.channelSlug.trim() && form.platform.trim() && form.categoryId)
+      && !(selectedNominationHasBlockingFlag.value && selectedNomination.value.trackingReviewStatus !== 'overridden')
   })
 
   function focusNominationFromRoute() {
     const rawNominationId = Array.isArray(route.query.nominationId) ? route.query.nominationId[0] : route.query.nominationId
-    const nominationId = Number(rawNominationId)
-    if (!Number.isFinite(nominationId)) {
-      return false
+    const rawCategoryGroup = Array.isArray(route.query.categoryGroup) ? route.query.categoryGroup[0] : route.query.categoryGroup
+    if (typeof rawCategoryGroup === 'string' && rawCategoryGroup.trim()) {
+      categoryFilter.value = rawCategoryGroup
     }
 
-    const nomination = seasonDetail.value.pendingNominations.find((item) => item.id === nominationId)
+    const nominationId = Number(rawNominationId)
+    if (!Number.isFinite(nominationId)) {
+      return typeof rawCategoryGroup === 'string' && rawCategoryGroup.trim().length > 0
+    }
+
+    const nomination = reviewGroups.value.find((item) => item.id === nominationId || item.nominationIds.includes(nominationId))
     if (!nomination) {
       return false
     }
 
     reviewFilter.value = ''
-    categoryFilter.value = nomination.categoryId
+    categoryFilter.value = nomination.categoryGroupName
     selectedNominationId.value = nomination.id
     return true
   }
@@ -133,13 +182,14 @@ export function useAdminReviewsManager() {
   watch(
     seasonDetail,
     (detail) => {
-      for (const nomination of detail.pendingNominations) {
-        const streamIdentity = resolveStreamIdentity(extractNominationStreamUrl(nomination))
+      for (const nomination of detail.pendingNominationGroups ?? []) {
+        const streamIdentity = resolveStreamIdentity(nomination.streamUrl ?? '')
         reviewForms[nomination.id] = {
-          displayName: nomination.candidateText,
-          channelSlug: streamIdentity.channelSlug,
-          platform: streamIdentity.platform,
-          reviewNote: nomination.reviewNote ?? '',
+          displayName: nomination.displayName === 'Name im Review festlegen' ? '' : nomination.displayName,
+          channelSlug: nomination.resolvedChannel ?? streamIdentity.channelSlug,
+          platform: nomination.resolvedPlatform ?? streamIdentity.platform,
+          categoryId: nomination.suggestedCategoryId,
+          reviewNote: nomination.trackingReviewNote ?? '',
         }
       }
 
@@ -147,21 +197,31 @@ export function useAdminReviewsManager() {
         return
       }
 
-      if (!detail.pendingNominations.some((nomination) => nomination.id === selectedNominationId.value)) {
-        selectedNominationId.value = detail.pendingNominations[0]?.id ?? null
+      if (!reviewGroups.value.some((nomination) => nomination.id === selectedNominationId.value)) {
+        selectedNominationId.value = reviewGroups.value[0]?.id ?? null
       }
     },
     { immediate: true },
   )
 
   watch(
-    () => route.query.nominationId,
+    () => [route.query.nominationId, route.query.categoryGroup] as const,
     () => {
       focusNominationFromRoute()
     },
     { immediate: true },
   )
 
+  watch(
+    availableSubcategoryOptions,
+    (tabs) => {
+      if (!tabs.some((tab) => tab.id === subcategoryFilter.value)) {
+        subcategoryFilter.value = null
+      }
+    },
+    { immediate: true },
+  )
+
   watch(
     filteredNominations,
     (nominations) => {
@@ -181,7 +241,7 @@ export function useAdminReviewsManager() {
 
     try {
       await store.approveAdminNomination(nominationId, selectedSeasonId.value, reviewForms[nominationId])
-      adminMessage.value = 'Nominierung wurde in die Kandidatenliste übernommen.'
+      adminMessage.value = 'Nominierungsgruppe wurde in die Kandidatenliste übernommen.'
     } catch (error) {
       adminError.value = error instanceof Error ? error.message : 'Nominierung konnte nicht übernommen werden.'
     } finally {
@@ -200,7 +260,7 @@ export function useAdminReviewsManager() {
       await store.rejectAdminNomination(nominationId, selectedSeasonId.value, {
         reviewNote: reviewForms[nominationId]?.reviewNote || undefined,
       })
-      adminMessage.value = 'Nominierung wurde aus der Review-Liste entfernt.'
+      adminMessage.value = 'Nominierungsgruppe wurde aus der Review-Liste entfernt.'
     } catch (error) {
       adminError.value = error instanceof Error ? error.message : 'Nominierung konnte nicht verworfen werden.'
     } finally {
@@ -208,6 +268,45 @@ export function useAdminReviewsManager() {
     }
   }
 
+  async function reopenRejectedNomination(nominationId: number) {
+    if (!selectedSeasonId.value) return
+
+    reviewSaving.value = nominationId
+    adminMessage.value = ''
+    adminError.value = ''
+
+    try {
+      await store.reopenRejectedAdminNomination(nominationId, selectedSeasonId.value, {})
+      adminMessage.value = 'Verworfene Nominierung wurde wieder in die Review-Queue gelegt.'
+    } catch (error) {
+      adminError.value = error instanceof Error ? error.message : 'Nominierung konnte nicht wieder geoeffnet werden.'
+    } finally {
+      reviewSaving.value = null
+    }
+  }
+
+  async function updateTrackingReview(nominationId: number, status: 'reviewed' | 'overridden') {
+    if (!selectedSeasonId.value) return
+
+    reviewSaving.value = nominationId
+    adminMessage.value = ''
+    adminError.value = ''
+
+    try {
+      await store.updateNominationTrackingReview(nominationId, selectedSeasonId.value, {
+        status,
+        reviewNote: reviewForms[nominationId]?.reviewNote || undefined,
+      })
+      adminMessage.value = status === 'overridden'
+        ? 'Tracking-Override wurde gespeichert.'
+        : 'Tracking-Review wurde als geprüft markiert.'
+    } catch (error) {
+      adminError.value = error instanceof Error ? error.message : 'Tracking-Review konnte nicht gespeichert werden.'
+    } finally {
+      reviewSaving.value = null
+    }
+  }
+
   async function addStreamUrlToBlacklist(streamUrl: string) {
     const url = streamUrl.trim()
     if (!url || blacklistSaving.value) return
@@ -226,6 +325,23 @@ export function useAdminReviewsManager() {
     }
   }
 
+  function openSelectedNomination() {
+    if (!selectedNomination.value) return
+    selectedNominationId.value = selectedNomination.value.id
+    isReviewModalOpen.value = true
+  }
+
+  function openNominationById(nominationId: number) {
+    const nomination = filteredNominations.value.find((item) => item.id === nominationId)
+    if (!nomination) return
+    selectedNominationId.value = nomination.id
+    isReviewModalOpen.value = true
+  }
+
+  function closeNominationModal() {
+    isReviewModalOpen.value = false
+  }
+
   function handleKeydown(event: KeyboardEvent) {
     const target = event.target as Element
     if (
@@ -254,6 +370,13 @@ export function useAdminReviewsManager() {
         if (prev) selectedNominationId.value = prev.id
         break
       }
+      case 'Enter': {
+        if (selectedNomination.value) {
+          event.preventDefault()
+          openSelectedNomination()
+        }
+        break
+      }
       case 'a': {
         if (selectedNomination.value && canApproveSelected.value && !reviewSaving.value) {
           event.preventDefault()
@@ -306,33 +429,74 @@ export function useAdminReviewsManager() {
     seasonDetail,
     reviewFilter,
     categoryFilter,
+    subcategoryFilter,
     selectedNominationId,
+    isReviewModalOpen,
     candidatePlatformOptions,
     filteredNominations,
     selectedNomination,
     reviewStats,
     reviewedNominations,
     categoryOptions,
+    availableSubcategoryOptions,
+    tierCategoryOptions,
     selectedCandidateCollision,
     selectedRelatedPendingNominations,
     selectedNominationSignalSummary,
+    trackingReviewNotes,
+    selectedNominationHasBlockingFlag,
     canApproveSelected,
     approveNomination,
     rejectNomination,
+    reopenRejectedNomination,
+    updateTrackingReview,
     addStreamUrlToBlacklist,
+    openSelectedNomination,
+    openNominationById,
+    closeNominationModal,
     selectedPlatformValue,
     handlePlatformSelection,
     extractNominationStreamUrl,
   }
 }
 
-function extractNominationStreamUrl(nomination: { streamUrl?: string | null; reviewNote?: string | null }) {
-  if (nomination.streamUrl?.trim()) {
-    return nomination.streamUrl.trim()
+export function getTrackerStatusMeta(status: string) {
+  switch (status.trim().toLowerCase()) {
+    case 'resolved':
+      return {
+        label: 'Tracker bestätigt',
+        toneClass: 'border-emerald-100 bg-emerald-50 text-emerald-800',
+        hint: 'Viewer-Wert wurde gefunden und ein Tier automatisch vorgeschlagen.',
+      }
+    case 'no_data':
+      return {
+        label: 'Keine Viewer-Daten',
+        toneClass: 'border-amber-100 bg-amber-50 text-amber-800',
+        hint: 'Link wurde erkannt, aber TwitchTracker lieferte keinen belastbaren Avg-Viewer-Wert.',
+      }
+    case 'unsupported_platform':
+      return {
+        label: 'Manueller Tier-Entscheid',
+        toneClass: 'border-sky-100 bg-sky-50 text-sky-800',
+        hint: 'Diese Plattform wird nicht automatisch getrackt. Das Tier muss manuell festgelegt werden.',
+      }
+    case 'unresolved':
+      return {
+        label: 'Link nicht auflösbar',
+        toneClass: 'border-rose-100 bg-rose-50 text-rose-800',
+        hint: 'Der eingereichte Link konnte nicht sicher einem Kanal zugeordnet werden.',
+      }
+    default:
+      return {
+        label: 'Prüfung ausstehend',
+        toneClass: 'border-slate-100 bg-slate-50 text-slate-700',
+        hint: 'Für diesen Fall liegt noch kein stabiler Tracker-Status vor.',
+      }
   }
+}
 
-  const noteMatch = nomination.reviewNote?.match(/Stream-Link:\s*(https?:\/\/\S+)/i)
-  return noteMatch?.[1]?.trim() ?? ''
+function extractNominationStreamUrl(nomination: { streamUrl?: string | null }) {
+  return nomination.streamUrl?.trim() ?? ''
 }
 
 function resolveStreamIdentity(streamUrl: string) {
@@ -370,3 +534,36 @@ function resolveStreamIdentity(streamUrl: string) {
     return fallback
   }
 }
+
+function formatTierOptionLabel(name: string, min: number | null, max: number | null) {
+  if (min === null && max === null) return name
+  if (min !== null && max !== null) return `${name} (${min}-${max} Viewer)`
+  if (min !== null) return `${name} (ab ${min} Viewer)`
+  return `${name} (bis ${max} Viewer)`
+}
+
+function formatTierRangeNote(min: number | null, max: number | null) {
+  if (min === null && max === null) return 'ohne Range'
+  if (min !== null && max !== null) return `${min}-${max} Viewer`
+  if (min !== null) return `ab ${min} Viewer`
+  return `bis ${max} Viewer`
+}
+
+function groupMatchesTierFilter(
+  nomination: { nominationIds: number[]; suggestedCategoryId: number | null },
+  categoryIds: Set<number>,
+  pendingNominationById: Map<number, AdminNominationReviewItem>,
+) {
+  if (nomination.suggestedCategoryId !== null && categoryIds.has(nomination.suggestedCategoryId)) {
+    return true
+  }
+
+  for (const nominationId of nomination.nominationIds) {
+    const pendingNomination = pendingNominationById.get(nominationId)
+    if (pendingNomination?.categoryId !== null && pendingNomination?.categoryId !== undefined && categoryIds.has(pendingNomination.categoryId)) {
+      return true
+    }
+  }
+
+  return false
+}

frontend/src/components/admin/useAdminSeasonManager.ts

@@ -7,7 +7,10 @@ import { hasShowDayPassed, normalizePhaseKey } from './adminSeasonTimeline'
 import type {
   AdminSeasonCopyOption,
   AdminSeasonCreateForm,
+  AdminSeasonGatewayEntryLink,
+  AdminSeasonGatewayCheckItem,
   AdminSeasonForm,
+  AdminSeasonPhaseGateway,
   AdminSeasonReadinessItem,
 } from './adminSeasonTypes'
 
@@ -60,6 +63,7 @@ export function useAdminSeasonManager() {
   const seasonToDelete = ref<{ id: number; year: number; name: string; isCurrent: boolean } | null>(null)
   const deleting = ref(false)
   const completing = ref(false)
+  const phaseGateway = ref<AdminSeasonPhaseGateway | null>(null)
   const seasonAuditEntries = ref<AdminAuditEntry[]>([])
   const loadingSeasonAudit = ref(false)
   let seasonAuditRequestId = 0
@@ -88,8 +92,7 @@ export function useAdminSeasonManager() {
   const canCompleteSelectedSeason = computed(() =>
     Boolean(
       selectedSeason.value &&
-        normalizePhaseKey(form.currentPhase) !== 'completed' &&
-        archiveReadinessIssues.value.length === 0,
+        normalizePhaseKey(form.currentPhase) !== 'completed',
     ),
   )
   const canDeleteSelectedSeason = computed(() => Boolean(selectedSeason.value && !selectedSeason.value.isCurrent))
@@ -313,6 +316,44 @@ export function useAdminSeasonManager() {
     }
   }
 
+  function requestPhaseGateway(phase: string) {
+    const phaseKey = normalizePhaseKey(phase)
+    if (phaseKey === 'voting') {
+      const gateway = buildVotingGateway(seasonDetail.value)
+      if (gateway.blockers.length > 0 || gateway.warnings.length > 0) {
+        phaseGateway.value = gateway
+        return
+      }
+    }
+
+    void activatePhase(phase)
+  }
+
+  function requestCompletionGateway() {
+    const gateway = buildCompletionGateway(seasonDetail.value, form)
+    if (gateway.blockers.length > 0 || gateway.warnings.length > 0) {
+      phaseGateway.value = gateway
+      return
+    }
+
+    void completeSeason()
+  }
+
+  async function confirmPhaseGateway() {
+    const gateway = phaseGateway.value
+    if (!gateway) {
+      return
+    }
+
+    phaseGateway.value = null
+    if (gateway.action === 'complete') {
+      await completeSeason()
+      return
+    }
+
+    await activatePhase(gateway.phase)
+  }
+
   function openDeleteSeasonModal() {
     if (!selectedSeason.value) {
       return
@@ -419,8 +460,12 @@ export function useAdminSeasonManager() {
     latestSeasonAuditSummary,
     latestSeasonAuditMeta,
     canCreate,
+    phaseGateway,
     activatePhase,
     activatePublicSeason,
+    requestPhaseGateway,
+    requestCompletionGateway,
+    confirmPhaseGateway,
     openCreateModal,
     saveSeason,
     completeSeason,
@@ -447,7 +492,11 @@ function normalizeSeasonPayload<T extends { showStartsAt: string }>(payload: T):
 }
 
 function resolveSeasonFacts(detail: AdminSeasonDetailResponse) {
-  const categoryIdsWithCandidates = new Set(detail.candidates.map((candidate) => candidate.categoryId))
+  const categoryIdsWithCandidates = new Set(
+    detail.candidates
+      .filter((candidate) => candidate.acceptanceStatus !== 'declined')
+      .map((candidate) => candidate.categoryId),
+  )
   const categoryIdsWithResults = new Set(detail.results.map((result) => result.categoryId))
   const emptyCategories = detail.categories.filter((category) => !categoryIdsWithCandidates.has(category.id)).length
   const missingResults = detail.categories.filter((category) => !categoryIdsWithResults.has(category.id)).length
@@ -465,6 +514,7 @@ function buildReadinessItems(
   currentPhase: string,
 ): AdminSeasonReadinessItem[] {
   const facts = resolveSeasonFacts(detail)
+  const activeCandidateCount = detail.candidates.filter((candidate) => candidate.acceptanceStatus !== 'declined').length
   const phaseKey = normalizePhaseKey(currentPhase)
   const candidateBlocking = phaseKey !== 'nomination'
   const winnerBlocking = phaseKey === 'completed'
@@ -481,12 +531,12 @@ function buildReadinessItems(
     },
     {
       label: 'Kandidatenbasis',
-      note: facts.emptyCategories === 0 && detail.candidates.length > 0
+      note: facts.emptyCategories === 0 && activeCandidateCount > 0
         ? 'Alle Kategorien haben Kandidaten.'
         : candidateBlocking
           ? `${facts.emptyCategories} Kategorien brauchen noch Kandidaten.`
           : 'In der Nominierung duerfen Kategorien noch leer sein.',
-      complete: detail.categories.length > 0 && facts.emptyCategories === 0 && detail.candidates.length > 0,
+      complete: detail.categories.length > 0 && facts.emptyCategories === 0 && activeCandidateCount > 0,
       blocking: candidateBlocking,
       to: '/admin/candidates',
     },
@@ -567,6 +617,165 @@ function buildCreatePublicReadinessIssues(createForm: AdminSeasonCreateForm) {
   return issues
 }
 
+function buildVotingGateway(detail: AdminSeasonDetailResponse): AdminSeasonPhaseGateway {
+  const blockers: AdminSeasonGatewayCheckItem[] = []
+  const warnings: AdminSeasonGatewayCheckItem[] = []
+  const categoryIdsWithCandidates = new Set(
+    detail.candidates
+      .filter((candidate) => candidate.acceptanceStatus !== 'declined')
+      .map((candidate) => candidate.categoryId),
+  )
+  const emptyCategories = detail.categories.filter((category) => !categoryIdsWithCandidates.has(category.id))
+  if (emptyCategories.length > 0) {
+    blockers.push({
+      label: 'Kategorien ohne voting-bereite Kandidaten',
+      detail: emptyCategories.map((category) => category.name).slice(0, 4).join(', ')
+        + (emptyCategories.length > 4 ? ` +${emptyCategories.length - 4} weitere` : ''),
+      status: 'block',
+      to: '/admin/categories?status=empty',
+      entries: emptyCategories.map((category) => createGatewayEntry(
+        `${category.groupName} · ${category.name}`,
+        `/admin/categories?group=${encodeURIComponent(category.groupName)}`,
+      )),
+    })
+  }
+
+  const pendingReviewGroups = detail.pendingNominationGroups ?? []
+  if (pendingReviewGroups.length > 0) {
+    warnings.push({
+      label: 'Offene Nominierungsgruppen',
+      detail: `${pendingReviewGroups.length} Review-Gruppen sollten vor dem Voting entschieden werden.`,
+      status: 'warn',
+      to: '/admin/nominations?review=1',
+      entries: pendingReviewGroups
+        .slice(0, 6)
+        .map((group) => createGatewayEntry(
+          `${group.categoryGroupName} · ${group.displayName} · ${group.uniqueSubmitterCount} Viewer`,
+          buildReviewGatewayLink(group.id, group.categoryGroupName),
+        )),
+    })
+  }
+
+  const contactedCandidates = detail.candidates.filter((candidate) => candidate.acceptanceStatus === 'contacted')
+  const openCandidates = detail.candidates.filter((candidate) => candidate.acceptanceStatus === 'open')
+  if (contactedCandidates.length + openCandidates.length > 0) {
+    warnings.push({
+      label: 'Kandidaten ohne finale Teilnahmezusage',
+      detail: `${contactedCandidates.length} angefragt, ${openCandidates.length} offen.`,
+      status: 'warn',
+      to: '/admin/candidates?readiness=needs_decision',
+      entries: [...contactedCandidates, ...openCandidates]
+        .slice(0, 6)
+        .map((candidate) => createGatewayEntry(
+          `${candidate.displayName} · ${candidate.acceptanceStatus === 'contacted' ? 'angefragt' : 'offen'}`,
+          `/admin/candidates?readiness=needs_decision&categoryId=${candidate.categoryId}&q=${encodeURIComponent(candidate.displayName)}`,
+        )),
+    })
+  }
+
+  const pendingClips = detail.clipSubmissions.filter((clip) => clip.status === 'pending')
+  if (pendingClips.length > 0) {
+    warnings.push({
+      label: 'Offene Clip-Prüfungen',
+      detail: `${pendingClips.length} Clip-Einreichungen warten noch auf Entscheidung.`,
+      status: 'warn',
+      to: '/admin/clips?status=pending',
+      entries: pendingClips
+        .slice(0, 6)
+        .map((clip) => createGatewayEntry(
+          `${clip.creator} · ${clip.title}`,
+          `/admin/clips?status=pending&categoryId=${clip.categoryId}&q=${encodeURIComponent(clip.creator || clip.title)}`,
+        )),
+    })
+  }
+
+  return {
+    action: 'activate',
+    phase: 'Community Voting',
+    title: 'Check vor Community Voting',
+    subtitle: 'Vor dem Voting prüfen wir Kandidatenbasis, offene Reviews und organisatorische Restpunkte.',
+    blockers,
+    warnings,
+    confirmsLabel: 'Voting trotzdem aktivieren',
+  }
+}
+
+function buildCompletionGateway(
+  detail: AdminSeasonDetailResponse,
+  form: AdminSeasonForm,
+): AdminSeasonPhaseGateway {
+  const blockers: AdminSeasonGatewayCheckItem[] = []
+  const warnings: AdminSeasonGatewayCheckItem[] = []
+  const categoryIdsWithResults = new Set(detail.results.map((result) => result.categoryId))
+  const missingWinnerCategories = detail.categories.filter((category) => !categoryIdsWithResults.has(category.id))
+  if (!hasShowDayPassed(form)) {
+    blockers.push({
+      label: 'Award Show liegt noch nicht hinter uns',
+      detail: form.showDate
+        ? `Geplantes Show-Datum: ${formatLocalDate(form.showDate)}`
+        : 'Es fehlt ein gültiges Show-Datum.',
+      status: 'block',
+      to: '/admin/years',
+    })
+  }
+
+  if (missingWinnerCategories.length > 0) {
+    blockers.push({
+      label: 'Kategorien ohne Gewinner',
+      detail: missingWinnerCategories.map((category) => category.name).slice(0, 4).join(', ')
+        + (missingWinnerCategories.length > 4 ? ` +${missingWinnerCategories.length - 4} weitere` : ''),
+      status: 'block',
+      to: '/admin/winners?status=open',
+      entries: missingWinnerCategories.map((category) => createGatewayEntry(
+        `${category.groupName} · ${category.name}`,
+        `/admin/winners?status=open&categoryId=${category.id}`,
+      )),
+    })
+  }
+
+  const pendingReviewGroups = detail.pendingNominationGroups ?? []
+  if (pendingReviewGroups.length > 0) {
+    warnings.push({
+      label: 'Noch offene Reviews',
+      detail: `${pendingReviewGroups.length} Nominierungsgruppen sind noch nicht entschieden.`,
+      status: 'warn',
+      to: '/admin/nominations?review=1',
+      entries: pendingReviewGroups
+        .slice(0, 6)
+        .map((group) => createGatewayEntry(
+          `${group.categoryGroupName} · ${group.displayName} · ${group.uniqueSubmitterCount} Viewer`,
+          buildReviewGatewayLink(group.id, group.categoryGroupName),
+        )),
+    })
+  }
+
+  const categoriesWithoutCandidates = detail.categories.filter((category) =>
+    !detail.candidates.some((candidate) => candidate.categoryId === category.id),
+  )
+  if (categoriesWithoutCandidates.length > 0) {
+    warnings.push({
+      label: 'Historische Lücken in der Kandidatenbasis',
+      detail: `${categoriesWithoutCandidates.length} Kategorien hatten gar keine Kandidaten.`,
+      status: 'warn',
+      to: '/admin/categories?status=empty',
+      entries: categoriesWithoutCandidates.map((category) => createGatewayEntry(
+        `${category.groupName} · ${category.name}`,
+        `/admin/categories?group=${encodeURIComponent(category.groupName)}`,
+      )),
+    })
+  }
+
+  return {
+    action: 'complete',
+    phase: 'Abgeschlossen',
+    title: 'Abschluss-Gateway',
+    subtitle: 'Bevor das Jahr archiviert wird, prüfen wir Gewinner, Show-Zeitpunkt und offene Restarbeiten.',
+    blockers,
+    warnings,
+    confirmsLabel: 'Jahr trotzdem abschließen',
+  }
+}
+
 function formatAuditDate(value: string) {
   const date = new Date(value)
   if (Number.isNaN(date.getTime())) {
@@ -581,3 +790,33 @@ function formatAuditDate(value: string) {
     minute: '2-digit',
   })
 }
+
+function createGatewayEntry(label: string, to: string): AdminSeasonGatewayEntryLink {
+  return { label, to }
+}
+
+function buildReviewGatewayLink(nominationGroupId: number, categoryGroupName: string): string {
+  return `/admin/nominations?review=1&nominationId=${nominationGroupId}&categoryGroup=${encodeURIComponent(categoryGroupName)}`
+}
+
+function formatLocalDate(value: string | undefined | null) {
+  if (!value) {
+    return 'offen'
+  }
+
+  const [year, month, day] = value.split('-').map(Number)
+  if (!year || !month || !day) {
+    return value
+  }
+
+  const date = new Date(year, month - 1, day)
+  if (Number.isNaN(date.getTime())) {
+    return value
+  }
+
+  return date.toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
+}

frontend/src/components/admin/useAdminSettingsOverview.ts

@@ -120,7 +120,9 @@ export function useAdminSettingsOverview() {
       value: categoriesWithoutCandidates.value.length === 0 && seasonDetail.value.categories.length > 0,
       note: categoriesWithoutCandidates.value.length === 0 ? 'Alle Kategorien haben Kandidaten.' : `${categoriesWithoutCandidates.value.length} Kategorien brauchen Kandidaten.`,
       icon: Tags,
-      to: '/admin/categories',
+      to: categoriesWithoutCandidates.value.length > 0
+        ? `/admin/categories?group=${encodeURIComponent(categoriesWithoutCandidates.value[0]!.groupName)}`
+        : '/admin/categories',
     },
     {
       label: 'Risiko-Queue leer',
@@ -143,7 +145,9 @@ export function useAdminSettingsOverview() {
       label: 'Voting freigeschaltet',
       state: hasVotingPhase.value && categoriesWithoutCandidates.value.length === 0,
       note: hasVotingPhase.value ? 'Phase ist Voting; Kategorie-Readiness entscheidet.' : 'Phase ist nicht Voting.',
-      to: '/admin/categories',
+      to: categoriesWithoutCandidates.value.length > 0
+        ? `/admin/categories?group=${encodeURIComponent(categoriesWithoutCandidates.value[0]!.groupName)}`
+        : '/admin/categories',
     },
     {
       label: 'Clip-Workflow',
@@ -157,7 +161,7 @@ export function useAdminSettingsOverview() {
       label: 'Clip-Inbox',
       state: pendingClips.value > 0,
       note: pendingClips.value > 0 ? `${pendingClips.value} Clip-Einreichungen offen.` : 'Keine offenen Clip-Einreichungen.',
-      to: '/admin/clips',
+      to: '/admin/clips?status=pending',
     },
     {
       label: 'Freitext-Reviews geklärt',

frontend/src/components/admin/useAdminTrackingRules.ts

@@ -0,0 +1,278 @@
+import { computed, onMounted, ref } from 'vue'
+
+import { useAwardsStore } from '../../stores/awards'
+import type {
+  AdminTrackingFlagRule,
+  AdminTrackingMetricRule,
+  AdminTrackingRulesResponse,
+  AdminTrackingSource,
+} from '../../types/awards'
+
+function cloneMetricRules(rules: AdminTrackingMetricRule[]) {
+  return rules.map((rule) => ({
+    ...rule,
+    autoSupportedWindowKeys: [...(rule.autoSupportedWindowKeys ?? [])],
+    ignoredCategories: [...(rule.ignoredCategories ?? [])],
+  }))
+}
+
+function cloneFlagRules(rules: AdminTrackingFlagRule[]) {
+  return rules.map((rule) => ({ ...rule }))
+}
+
+function normalizeMetricRule(rule: AdminTrackingMetricRule): AdminTrackingMetricRule {
+  const autoSupportedWindowKeys = Array.isArray(rule.autoSupportedWindowKeys)
+    ? [...new Set(rule.autoSupportedWindowKeys.map((item) => String(item).trim()).filter(Boolean))]
+    : []
+
+  return {
+    ...rule,
+    enabled: Boolean(rule.enabled),
+    requiredForAutoClassification: Boolean(rule.requiredForAutoClassification),
+    showInReview: Boolean(rule.showInReview),
+    showInAdminSummary: Boolean(rule.showInAdminSummary),
+    manualOverrideAllowed: Boolean(rule.manualOverrideAllowed),
+    windowKey: String(rule.windowKey || '30d'),
+    autoSupportedWindowKeys,
+    providerFieldKey: rule.providerFieldKey?.trim() || null,
+    topCount: rule.topCount == null ? null : Number(rule.topCount),
+    minPrimaryCategorySharePercent: rule.minPrimaryCategorySharePercent == null ? null : Number(rule.minPrimaryCategorySharePercent),
+    minPrimaryCategoryHours: rule.minPrimaryCategoryHours == null ? null : Number(rule.minPrimaryCategoryHours),
+    maxDistinctCategoriesBeforeFlag: rule.maxDistinctCategoriesBeforeFlag == null ? null : Number(rule.maxDistinctCategoriesBeforeFlag),
+    ignoredCategories: Array.isArray(rule.ignoredCategories)
+      ? [...new Set(rule.ignoredCategories.map((item) => String(item).trim()).filter(Boolean))]
+      : [],
+    matchAwardCategoryAgainstTopCategories: Boolean(rule.matchAwardCategoryAgainstTopCategories),
+    flagIfAwardCategoryNotInTopX: Boolean(rule.flagIfAwardCategoryNotInTopX),
+    flagIfCategorySpreadTooWide: Boolean(rule.flagIfCategorySpreadTooWide),
+    flagIfNoCategoryContextAvailable: Boolean(rule.flagIfNoCategoryContextAvailable),
+    minValue: rule.minValue == null ? null : Number(rule.minValue),
+    maxValue: rule.maxValue == null ? null : Number(rule.maxValue),
+  }
+}
+
+function normalizeFlagRule(rule: AdminTrackingFlagRule): AdminTrackingFlagRule {
+  return {
+    ...rule,
+    enabled: Boolean(rule.enabled),
+    autoTriggerEnabled: Boolean(rule.autoTriggerEnabled),
+    requiresManualReview: Boolean(rule.requiresManualReview),
+    blocksApproval: Boolean(rule.blocksApproval),
+    adminNoteRequiredOnOverride: Boolean(rule.adminNoteRequiredOnOverride),
+    severity: rule.severity === 'high' || rule.severity === 'low' ? rule.severity : 'medium',
+  }
+}
+
+function createEmptyTrackingRules(): AdminTrackingRulesResponse {
+  return {
+    source: {
+      providerKey: 'twitchtracker',
+      providerLabel: 'TwitchTracker Basic API',
+      baseUrl: 'https://twitchtracker.com/api',
+      notesSummary: '',
+      showManualReviewNotesInReview: true,
+    },
+    importantMetrics: [],
+    optionalMetrics: [],
+    flags: [],
+    manualReviewNotes: '',
+  }
+}
+
+function createSourceSnapshot(source: AdminTrackingSource) {
+  return JSON.stringify(source)
+}
+
+function parseSourceSnapshot(snapshot: string): AdminTrackingSource {
+  if (!snapshot) {
+    return createEmptyTrackingRules().source
+  }
+
+  try {
+    const parsed = JSON.parse(snapshot) as AdminTrackingSource
+    return {
+      providerKey: parsed.providerKey || 'twitchtracker',
+      providerLabel: parsed.providerLabel || 'TwitchTracker Basic API',
+      baseUrl: parsed.baseUrl || 'https://twitchtracker.com/api',
+      notesSummary: parsed.notesSummary || '',
+      showManualReviewNotesInReview: parsed.showManualReviewNotesInReview !== false,
+    }
+  } catch {
+    return createEmptyTrackingRules().source
+  }
+}
+
+function createRulesSnapshot(
+  importantMetrics: AdminTrackingMetricRule[],
+  optionalMetrics: AdminTrackingMetricRule[],
+  flags: AdminTrackingFlagRule[],
+) {
+  return JSON.stringify({
+    importantMetrics: importantMetrics.map(normalizeMetricRule),
+    optionalMetrics: optionalMetrics.map(normalizeMetricRule),
+    flags: flags.map(normalizeFlagRule),
+  })
+}
+
+export function useAdminTrackingRules() {
+  const store = useAwardsStore()
+  const trackingLoading = ref(false)
+  const rulesSaving = ref(false)
+  const sourceSaving = ref(false)
+  const notesSaving = ref(false)
+  const trackingError = ref('')
+  const trackingSuccess = ref('')
+  const trackingSource = ref<AdminTrackingSource>(createEmptyTrackingRules().source)
+  const importantMetrics = ref<AdminTrackingMetricRule[]>([])
+  const optionalMetrics = ref<AdminTrackingMetricRule[]>([])
+  const trackingFlags = ref<AdminTrackingFlagRule[]>([])
+  const manualReviewNotes = ref('')
+  const sourceSnapshot = ref('')
+  const rulesSnapshot = ref('')
+  const notesSnapshot = ref('')
+
+  const trackingSummary = computed(() => ({
+    importantActive: importantMetrics.value.filter((item) => item.enabled).length,
+    optionalActive: optionalMetrics.value.filter((item) => item.enabled).length,
+    flagsActive: trackingFlags.value.filter((item) => item.enabled).length,
+    manualReviewFlags: trackingFlags.value.filter((item) => item.enabled && item.requiresManualReview).length,
+  }))
+
+  const hasUnsavedTrackingSourceChanges = computed(() => createSourceSnapshot(trackingSource.value) !== sourceSnapshot.value)
+  const hasUnsavedTrackingRuleChanges = computed(() =>
+    createRulesSnapshot(importantMetrics.value, optionalMetrics.value, trackingFlags.value) !== rulesSnapshot.value,
+  )
+  const hasUnsavedTrackingNotesChanges = computed(() => manualReviewNotes.value !== notesSnapshot.value)
+
+  function applyResponse(response: AdminTrackingRulesResponse) {
+    trackingSource.value = {
+      providerKey: response.source?.providerKey || 'twitchtracker',
+      providerLabel: response.source?.providerLabel || 'TwitchTracker Basic API',
+      baseUrl: response.source?.baseUrl || 'https://twitchtracker.com/api',
+      notesSummary: response.source?.notesSummary || '',
+      showManualReviewNotesInReview: response.source?.showManualReviewNotesInReview !== false,
+    }
+    importantMetrics.value = cloneMetricRules(response.importantMetrics)
+    optionalMetrics.value = cloneMetricRules(response.optionalMetrics)
+    trackingFlags.value = cloneFlagRules(response.flags)
+    manualReviewNotes.value = response.manualReviewNotes ?? ''
+    sourceSnapshot.value = createSourceSnapshot(trackingSource.value)
+    rulesSnapshot.value = createRulesSnapshot(importantMetrics.value, optionalMetrics.value, trackingFlags.value)
+    notesSnapshot.value = manualReviewNotes.value
+  }
+
+  async function loadTrackingRules() {
+    trackingLoading.value = true
+    trackingError.value = ''
+    trackingSuccess.value = ''
+    try {
+      applyResponse(await store.loadAdminTrackingRules())
+    } catch (error) {
+      trackingError.value = error instanceof Error ? error.message : 'Tracking Rules konnten nicht geladen werden.'
+      applyResponse(createEmptyTrackingRules())
+    } finally {
+      trackingLoading.value = false
+    }
+  }
+
+  function updateImportantMetric(ruleKey: string, patch: Partial<AdminTrackingMetricRule>) {
+    importantMetrics.value = importantMetrics.value.map((rule) =>
+      rule.key === ruleKey ? normalizeMetricRule({ ...rule, ...patch }) : rule,
+    )
+  }
+
+  function updateOptionalMetric(ruleKey: string, patch: Partial<AdminTrackingMetricRule>) {
+    optionalMetrics.value = optionalMetrics.value.map((rule) =>
+      rule.key === ruleKey ? normalizeMetricRule({ ...rule, ...patch }) : rule,
+    )
+  }
+
+  function updateTrackingFlag(ruleKey: string, patch: Partial<AdminTrackingFlagRule>) {
+    trackingFlags.value = trackingFlags.value.map((rule) =>
+      rule.key === ruleKey ? normalizeFlagRule({ ...rule, ...patch }) : rule,
+    )
+  }
+
+  async function saveTrackingSource() {
+    sourceSaving.value = true
+    trackingError.value = ''
+    trackingSuccess.value = ''
+    try {
+      const response = await store.updateAdminTrackingSource({
+        source: { ...trackingSource.value },
+      })
+      applyResponse(response)
+      trackingSuccess.value = 'Tracking Source wurde gespeichert.'
+    } catch (error) {
+      trackingError.value = error instanceof Error ? error.message : 'Tracking Source konnte nicht gespeichert werden.'
+    } finally {
+      sourceSaving.value = false
+    }
+  }
+
+  async function saveTrackingNotes() {
+    notesSaving.value = true
+    trackingError.value = ''
+    trackingSuccess.value = ''
+    try {
+      const response = await store.updateAdminTrackingReviewNotes({
+        manualReviewNotes: manualReviewNotes.value,
+        showManualReviewNotesInReview: trackingSource.value.showManualReviewNotesInReview,
+      })
+      applyResponse(response)
+      trackingSuccess.value = 'Manual Review Notes wurden gespeichert.'
+    } catch (error) {
+      trackingError.value = error instanceof Error ? error.message : 'Manual Review Notes konnten nicht gespeichert werden.'
+    } finally {
+      notesSaving.value = false
+    }
+  }
+
+  async function saveTrackingRules() {
+    rulesSaving.value = true
+    trackingError.value = ''
+    trackingSuccess.value = ''
+    try {
+      const response = await store.updateAdminTrackingRules({
+        source: parseSourceSnapshot(sourceSnapshot.value),
+        importantMetrics: importantMetrics.value.map(normalizeMetricRule),
+        optionalMetrics: optionalMetrics.value.map(normalizeMetricRule),
+        flags: trackingFlags.value.map(normalizeFlagRule),
+        manualReviewNotes: notesSnapshot.value,
+      })
+      applyResponse(response)
+      trackingSuccess.value = 'Tracking Rules wurden gespeichert.'
+    } catch (error) {
+      trackingError.value = error instanceof Error ? error.message : 'Tracking Rules konnten nicht gespeichert werden.'
+    } finally {
+      rulesSaving.value = false
+    }
+  }
+
+  onMounted(loadTrackingRules)
+
+  return {
+    trackingLoading,
+    rulesSaving,
+    sourceSaving,
+    notesSaving,
+    trackingError,
+    trackingSuccess,
+    trackingSource,
+    importantMetrics,
+    optionalMetrics,
+    trackingFlags,
+    manualReviewNotes,
+    trackingSummary,
+    hasUnsavedTrackingSourceChanges,
+    hasUnsavedTrackingRuleChanges,
+    hasUnsavedTrackingNotesChanges,
+    loadTrackingRules,
+    updateImportantMetric,
+    updateOptionalMetric,
+    updateTrackingFlag,
+    saveTrackingSource,
+    saveTrackingNotes,
+    saveTrackingRules,
+  }
+}

frontend/src/components/admin/useAdminWinnersManager.ts

@@ -1,6 +1,8 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { CheckCircle2, Clock3, ListChecks, Trophy } from '@lucide/vue'
+import { useRoute } from 'vue-router'
 
+import { buildClipEmbed } from '../../lib/clipEmbeds'
 import { useAwardsStore } from '../../stores/awards'
 import type { AdminCandidateItem, AdminWorkflowRule } from '../../types/awards'
 
@@ -13,30 +15,81 @@ type WinnerRuleNotice = {
   message: string
 }
 
+type WinnerIdentitySummary = {
+  appearances: number
+  acceptedAppearances: number
+  winnerPlacements: number
+  nominationTally: number
+  hasClip: boolean
+}
+
+type WinnerClipPreview = {
+  clipUrl: string | null
+  clipTitle: string
+  clipPlatform: string
+  clipEmbedUrl: string | null
+  clipEmbedTitle: string
+  clipEmbedStatus: string
+}
+
 export function useAdminWinnersManager() {
   const store = useAwardsStore()
+  const route = useRoute()
   const savingResultForCategory = ref<number | null>(null)
   const deletingResultId = ref<number | null>(null)
   const adminMessage = ref('')
   const adminError = ref('')
   const query = ref('')
   const statusFilter = ref(allFilter)
+  const categoryFilter = ref<number | null>(null)
   const winnerSelections = reactive<Record<number, string>>({})
 
   const seasonDetail = computed(() => store.adminSeasonDetail)
   const workflowRules = computed(() => store.adminWorkflowRules.rules)
   const resultMap = computed(() => new Map(seasonDetail.value.results.map((result) => [result.categoryId, result])))
   const selectedCandidateMap = computed(() => new Map(seasonDetail.value.candidates.map((candidate) => [candidate.id, candidate])))
+  const workflowRuleSummary = computed(() => {
+    const maxWinnerRule = findWorkflowRule(maxWinnerPlacementsRuleKey)
+    const clipRule = findWorkflowRule(winnerRequiresClipRuleKey)
+    return {
+      maxWinnerPlacements: maxWinnerRule,
+      winnerRequiresClip: clipRule,
+    }
+  })
 
   function findWorkflowRule(ruleKey: string): AdminWorkflowRule | null {
     return workflowRules.value.find((rule) => rule.key === ruleKey) ?? null
   }
 
-  function candidateIdentityKey(candidate: Pick<AdminCandidateItem, 'displayName' | 'channelSlug'>) {
+  function candidateIdentityKey(candidate: Pick<AdminCandidateItem, 'displayName' | 'channelSlug'> & { streamerIdentityId?: number | null }) {
+    if ('streamerIdentityId' in candidate && typeof candidate.streamerIdentityId === 'number') {
+      return `identity:${candidate.streamerIdentityId}`
+    }
     const channel = candidate.channelSlug.trim().replace(/^@+/, '').toLowerCase()
     return channel ? `slug:${channel}` : `name:${candidate.displayName.trim().toLowerCase()}`
   }
 
+  function selectedWinnerIdentitySummary(categoryId: number): WinnerIdentitySummary | null {
+    const candidateId = Number(winnerSelections[categoryId])
+    const selectedCandidate = selectedCandidateMap.value.get(candidateId)
+    if (!selectedCandidate) {
+      return null
+    }
+
+    const sameIdentityCandidates = seasonDetail.value.candidates.filter((candidate) =>
+      candidateIdentityKey(candidate) === candidateIdentityKey(selectedCandidate),
+    )
+    const winnerCandidateIds = new Set(seasonDetail.value.results.map((result) => result.candidateId))
+
+    return {
+      appearances: sameIdentityCandidates.filter((candidate) => candidate.acceptanceStatus !== 'declined').length,
+      acceptedAppearances: sameIdentityCandidates.filter((candidate) => candidate.acceptanceStatus === 'accepted').length,
+      winnerPlacements: sameIdentityCandidates.filter((candidate) => winnerCandidateIds.has(candidate.id)).length,
+      nominationTally: Math.max(...sameIdentityCandidates.map((candidate) => candidate.nominationTally ?? 0), 0),
+      hasClip: Boolean(selectedCandidate.clipCompilationUrl?.trim()),
+    }
+  }
+
   function winnerRuleNoticeFor(categoryId: number): WinnerRuleNotice | null {
     const candidateId = Number(winnerSelections[categoryId])
     const selectedCandidate = selectedCandidateMap.value.get(candidateId)
@@ -58,6 +111,7 @@ export function useAdminWinnersManager() {
     const existingWinnerCount = seasonDetail.value.results.filter((result) => {
       if (result.categoryId === categoryId) return false
       return candidateIdentityKey({
+        streamerIdentityId: result.streamerIdentityId,
         displayName: result.candidateDisplayName,
         channelSlug: result.candidateChannelSlug,
       }) === identityKey
@@ -72,6 +126,30 @@ export function useAdminWinnersManager() {
     }
   }
 
+  function selectedWinnerClipPreview(categoryId: number): WinnerClipPreview | null {
+    const candidateId = Number(winnerSelections[categoryId])
+    const selectedCandidate = selectedCandidateMap.value.get(candidateId)
+    if (!selectedCandidate) {
+      return null
+    }
+
+    const clipUrl = selectedCandidate.clipCompilationUrl?.trim() || null
+    const clipTitle = selectedCandidate.clipCompilationTitle?.trim() || 'Clip-Link ansehen'
+    const clipPlatform = selectedCandidate.clipCompilationPlatform?.trim() || selectedCandidate.platform
+    const clipEmbed = clipUrl && selectedCandidate.clipEmbedStatus !== 'link_only' && selectedCandidate.clipEmbedStatus !== 'blocked'
+      ? buildClipEmbed(clipUrl)
+      : null
+
+    return {
+      clipUrl,
+      clipTitle,
+      clipPlatform,
+      clipEmbedUrl: clipEmbed?.src ?? null,
+      clipEmbedTitle: clipEmbed?.title ?? clipTitle,
+      clipEmbedStatus: selectedCandidate.clipEmbedStatus || 'unchecked',
+    }
+  }
+
   const resultRows = computed(() =>
     seasonDetail.value.categories
       .map((category) => {
@@ -79,7 +157,10 @@ export function useAdminWinnersManager() {
           .filter((candidate) => candidate.categoryId === category.id)
           .sort((a, b) => a.displayName.localeCompare(b.displayName))
         const existing = resultMap.value.get(category.id) ?? null
-        const openReviews = seasonDetail.value.pendingNominations.filter((nomination) => nomination.categoryId === category.id).length
+        const openReviews = seasonDetail.value.pendingNominations.filter((nomination) =>
+          nomination.categoryId === category.id
+          || nomination.suggestedCategoryId === category.id,
+        ).length
         const approvedClips = seasonDetail.value.clipSubmissions.filter((clip) => clip.categoryId === category.id && clip.status === 'approved').length
 
         return {
@@ -121,6 +202,7 @@ export function useAdminWinnersManager() {
         || (statusFilter.value === 'empty' && row.isEmpty)
 
       if (!matchesStatus) return false
+      if (categoryFilter.value && row.category.id !== categoryFilter.value) return false
       if (!normalizedQuery) return true
 
       return [
@@ -163,6 +245,18 @@ export function useAdminWinnersManager() {
     },
   ])
 
+  function applyRouteFilters() {
+    const rawQuery = Array.isArray(route.query.q) ? route.query.q[0] : route.query.q
+    const rawStatus = Array.isArray(route.query.status) ? route.query.status[0] : route.query.status
+    const rawCategoryId = Array.isArray(route.query.categoryId) ? route.query.categoryId[0] : route.query.categoryId
+
+    query.value = typeof rawQuery === 'string' ? rawQuery : ''
+    const nextStatus = typeof rawStatus === 'string' ? rawStatus : allFilter
+    statusFilter.value = statusFilters.value.some((option) => option.value === nextStatus) ? nextStatus : allFilter
+    const parsedCategoryId = Number(rawCategoryId)
+    categoryFilter.value = Number.isFinite(parsedCategoryId) && parsedCategoryId > 0 ? parsedCategoryId : null
+  }
+
   watch(resultRows, (rows) => {
     const knownCategoryIds = new Set(rows.map((row) => row.category.id))
     for (const key of Object.keys(winnerSelections)) {
@@ -176,6 +270,14 @@ export function useAdminWinnersManager() {
     }
   }, { immediate: true })
 
+  watch(
+    () => [route.query.q, route.query.status, route.query.categoryId] as const,
+    () => {
+      applyRouteFilters()
+    },
+    { immediate: true },
+  )
+
   async function saveWinner(categoryId: number) {
     const candidateId = Number(winnerSelections[categoryId])
     if (!candidateId || !seasonDetail.value.id) return
@@ -228,6 +330,9 @@ export function useAdminWinnersManager() {
     winnerSelections,
     clearWinner,
     saveWinner,
+    workflowRuleSummary,
+    selectedWinnerIdentitySummary,
+    selectedWinnerClipPreview,
     winnerRuleNoticeFor,
   }
 }

frontend/src/components/admin/useAdminWorkflowRules.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 import { useAwardsStore } from '../../stores/awards'
 import type { AdminWorkflowRule } from '../../types/awards'
@@ -18,6 +18,7 @@ function normalizeRule(rule: AdminWorkflowRule): AdminWorkflowRule {
 
 export function useAdminWorkflowRules() {
   const store = useAwardsStore()
+  const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
   const workflowLoading = ref(false)
   const workflowSaving = ref(false)
   const workflowError = ref('')
@@ -81,6 +82,11 @@ export function useAdminWorkflowRules() {
   }
 
   onMounted(loadWorkflowRules)
+  watch(selectedSeasonId, (next, previous) => {
+    if (next && next !== previous) {
+      void loadWorkflowRules()
+    }
+  })
 
   return {
     hasUnsavedWorkflowRuleChanges,

frontend/src/components/home/HomeArchiveModal.vue

@@ -60,14 +60,14 @@ function initialsFor(value: string) {
               <article
                 v-for="winner in props.selectedArchive.winners"
                 :key="`${props.selectedArchive.year}-${winner.category}`"
-                style="display:grid;grid-template-columns:76px minmax(0,1fr);gap:15px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.74);border:1px solid rgba(139,108,219,.12);box-shadow:0 12px 28px rgba(139,108,219,.08);"
+                style="display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;padding:18px;border-radius:24px;background:rgba(255,255,255,.78);border:1px solid rgba(139,108,219,.12);box-shadow:0 12px 28px rgba(139,108,219,.08);align-items:start;"
               >
-                <div style="width:76px;height:76px;border-radius:22px;background:linear-gradient(135deg,#ffe1a3,#e7b13e);display:grid;place-items:center;color:#2f1b00;font-family:'Fredoka',sans-serif;font-size:24px;font-weight:800;box-shadow:0 12px 24px rgba(139,108,219,.16);">
+                <div style="width:84px;height:84px;border-radius:24px;background:linear-gradient(135deg,#ffe1a3,#e7b13e);display:grid;place-items:center;color:#2f1b00;font-family:'Fredoka',sans-serif;font-size:26px;font-weight:800;box-shadow:0 12px 24px rgba(139,108,219,.16);">
                   {{ initialsFor(winner.name) }}
                 </div>
                 <div style="min-width:0;">
                   <div style="font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#d9942a;margin-bottom:7px;">{{ winner.category }}</div>
-                  <div style="font-family:'Fredoka',sans-serif;font-weight:600;font-size:18px;line-height:1.25;color:#3f3556;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ winner.name }}</div>
+                  <div style="font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px;line-height:1.2;color:#3f3556;">{{ winner.name }}</div>
                   <div style="font-size:13px;color:#8a8398;margin-top:5px;">{{ winner.handle }}</div>
                   <div style="display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:12px;">
                     <a :href="winner.url" target="_blank" rel="noopener" :style="props.winnerPlatformStyle(winner.url)" style-hover="transform:translateY(-1px);opacity:.88;">
@@ -94,6 +94,26 @@ function initialsFor(value: string) {
                     referrerpolicy="strict-origin-when-cross-origin"
                     style="width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#1b0d2d;margin-top:12px;"
                   />
+                  <div
+                    v-else-if="winner.clipUrl"
+                    style="display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:14px;background:rgba(255,255,255,.88);border:1px solid rgba(139,108,219,.12);margin-top:12px;padding:14px;text-align:center;"
+                  >
+                    <a
+                      :href="winner.clipUrl"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      referrerpolicy="no-referrer"
+                      style="color:#7c5bb4;text-decoration:none;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;"
+                    >
+                      Clip extern ansehen
+                    </a>
+                  </div>
+                  <div
+                    v-else
+                    style="display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:14px;background:rgba(255,248,232,.92);border:1px dashed rgba(231,177,62,.42);margin-top:12px;padding:14px;text-align:center;color:#b7791f;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;"
+                  >
+                    Fuer diesen Gewinner ist kein Clip hinterlegt.
+                  </div>
                 </div>
               </article>
             </div>

frontend/src/components/home/HomeCategoriesSection.vue

@@ -2,28 +2,33 @@
   <section id="kategorien" class="home-section" style="max-width:1200px;margin:0 auto;padding:90px 24px;">
     <div style="text-align:center;margin-bottom:52px;">
       <div style="font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent,#ff5fa2);margin-bottom:12px;">✦ Die Awards</div>
-      <h2 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(32px,4vw,48px);margin:0 0 14px;letter-spacing:0;">{{ displayCategories.length }} Kategorien · 1 Sternenhimmel</h2>
-      <p style="font-size:17px;color:var(--muted,#c9b8da);max-width:560px;margin:0 auto;">Von Newcomer bis VTuber des Jahres — für jede Art von Magie gibt es einen Stern zu gewinnen.</p>
+      <h2 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(32px,4vw,48px);margin:0 0 14px;letter-spacing:0;">{{ landingCategories.length }} Hauptkategorien · 1 Sternenhimmel</h2>
+      <p style="font-size:17px;color:var(--muted,#c9b8da);max-width:560px;margin:0 auto;">Von Gaming bis Creative - jede Hauptkategorie bringt ihre eigenen Viewer-Tiers und Favoriten mit.</p>
     </div>
     <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:18px;" data-cat-grid>
-      <div v-for="category in displayCategories" :key="category.id" style="padding:26px 22px;border-radius:22px;background:var(--card,#22123a);border:1px solid var(--line,rgba(255,255,255,.12));transition:transform .2s,border-color .2s;" style-hover="transform:translateY(-5px);border-color:var(--accent,#ff5fa2);">
+      <div v-for="category in landingCategories" :key="category.id" style="padding:26px 22px;border-radius:22px;background:var(--card,#22123a);border:1px solid var(--line,rgba(255,255,255,.12));transition:transform .2s,border-color .2s;" style-hover="transform:translateY(-5px);border-color:var(--accent,#ff5fa2);">
         <div style="display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,var(--accent,#ff5fa2),var(--accent2,#a06bff));color:#fff;font-size:24px;margin-bottom:16px;box-shadow:0 8px 20px var(--glow,rgba(255,95,162,.4));">{{ category.icon }}</div>
         <h3 style="font-family:'Fredoka',sans-serif;font-weight:600;font-size:19px;margin:0 0 6px;">{{ category.name }}</h3>
-        <p style="font-size:14px;color:var(--muted,#c9b8da);margin:0;line-height:1.5;">{{ category.candidates.length }} Kandidat:innen aktuell in dieser Award-Kategorie.</p>
+        <p style="font-size:14px;color:var(--muted,#c9b8da);margin:0;line-height:1.5;">{{ category.subcategoryCount }} Viewer-Tiers · {{ category.candidateCount }} Kandidat:innen aktuell.</p>
+        <p v-if="category.description" style="font-size:13px;color:var(--muted,#c9b8da);margin:12px 0 0;line-height:1.5;">{{ category.description }}</p>
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-type DisplayCategory = {
+type LandingCategory = {
   id: string
+  groupName: string
   name: string
   icon: string
-  candidates: unknown[]
+  description: string
+  maxNomineesPerUser: number
+  candidateCount: number
+  subcategoryCount: number
 }
 
 defineProps<{
-  displayCategories: DisplayCategory[]
+  landingCategories: LandingCategory[]
 }>()
 </script>

frontend/src/components/home/HomeCategoryProgressRail.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 export interface HomeCategoryProgressRailItem {
   id: string | number
   name: string
+  groupName?: string
   icon: string
   status: string
   tone: 'empty' | 'active' | 'done' | 'error'
@@ -13,25 +16,42 @@ const props = defineProps<{
   label: string
   onSelect: (id: string | number) => void
 }>()
+
+const groupedItems = computed(() => {
+  const groups: Array<{ name: string; items: HomeCategoryProgressRailItem[] }> = []
+  for (const item of props.items) {
+    const groupName = item.groupName?.trim() || 'Weitere Kategorien'
+    const current = groups.at(-1)
+    if (current?.name === groupName) {
+      current.items.push(item)
+    } else {
+      groups.push({ name: groupName, items: [item] })
+    }
+  }
+  return groups
+})
 </script>
 
 <template>
   <aside class="home-wizard-rail">
     <div class="home-wizard-rail__label">{{ props.label }}</div>
-    <button
-      v-for="item in props.items"
-      :key="item.id"
-      type="button"
-      class="home-wizard-rail__button"
-      :class="[
-        `home-wizard-rail__button--${item.tone}`,
-        { 'home-wizard-rail__button--selected': item.id === props.activeId },
-      ]"
-      @click="props.onSelect(item.id)"
-    >
-      <span class="home-wizard-rail__icon">{{ item.icon }}</span>
-      <span class="home-wizard-rail__name">{{ item.name }}</span>
-      <span class="home-wizard-rail__status">{{ item.status }}</span>
-    </button>
+    <section v-for="group in groupedItems" :key="group.name" class="home-wizard-rail__group">
+      <div class="home-wizard-rail__group-label">{{ group.name }}</div>
+      <button
+        v-for="item in group.items"
+        :key="item.id"
+        type="button"
+        class="home-wizard-rail__button"
+        :class="[
+          `home-wizard-rail__button--${item.tone}`,
+          { 'home-wizard-rail__button--selected': item.id === props.activeId },
+        ]"
+        @click="props.onSelect(item.id)"
+      >
+        <span class="home-wizard-rail__icon">{{ item.icon }}</span>
+        <span class="home-wizard-rail__name">{{ item.name }}</span>
+        <span class="home-wizard-rail__status">{{ item.status }}</span>
+      </button>
+    </section>
   </aside>
 </template>

frontend/src/components/home/HomeExtrasSection.vue

@@ -1,59 +1,408 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-import { CheckCircle2, Handshake, Mic2, Send } from '@lucide/vue'
+import { computed, reactive, ref, watch } from 'vue'
+import { Handshake, Mic2, Send, X } from '@lucide/vue'
 
+import { privacyContentToHtml } from '../../lib/privacyContent'
+import { useAdminToast } from '../../composables/useAdminToast'
 import { useAwardsStore } from '../../stores/awards'
+import type { ShowactFormField } from '../../types/awards/showactForm'
+import { DEFAULT_SHOWACT_SCHEMA } from '../../types/awards/showactForm'
+import type { CreateShowactApplicationPayload } from '../../types/awards'
+import HomeStarField from './HomeStarField.vue'
 
+const props = defineProps<{ modalOpen?: boolean }>()
+const emit = defineEmits<{ 'update:modalOpen': [boolean] }>()
+
+const { showAdminToast } = useAdminToast()
 const store = useAwardsStore()
 const submitting = ref(false)
-const submitMessage = ref('')
-const submitError = ref('')
-const form = reactive({
-  artistName: '',
-  contactEmail: '',
-  contactDiscord: '',
-  platformUrl: '',
-  performanceType: '',
-  description: '',
-  technicalNotes: '',
-  referenceUrl: '',
-})
+const localModalOpen = ref(false)
+const showactInfoModalOpen = ref(false)
+
+const fieldValues = reactive<Record<string, string>>({})
+const fieldErrors = reactive<Record<string, string>>({})
 
 const featureFlags = computed(() => store.overview.featureFlags)
 const sponsors = computed(() =>
   featureFlags.value.sponsorsVisible ? store.publicSponsors.items.filter((item) => item.isVisible) : [],
 )
-const showSection = computed(() => sponsors.value.length > 0 || featureFlags.value.showactApplicationsEnabled)
+const showactFooterLink = computed(() =>
+  (store.overview.siteContent.footerLinks ?? []).find((link) => link.key === 'showacts') ?? null,
+)
+const showactInfoHtml = computed(() => privacyContentToHtml(showactFooterLink.value?.content || ''))
+const showactHasInfo = computed(() =>
+  Boolean(
+    showactFooterLink.value?.content?.trim()
+      || (showactFooterLink.value?.url && isSafePublicUrl(showactFooterLink.value.url))
+      || featureFlags.value.showactApplicationDisabledMessage?.trim()
+      || featureFlags.value.showactApplicationStartsAt
+      || featureFlags.value.showactApplicationEndsAt,
+  ),
+)
+const showactVisible = computed(() => featureFlags.value.showactApplicationsEnabled || showactHasInfo.value)
+const showSection = computed(() => sponsors.value.length > 0 || showactVisible.value)
+const showactDeadlineText = computed(() => {
+  const deadline = featureFlags.value.showactApplicationEndsAt
+  if (!deadline) return ''
+
+  const parsed = new Date(`${deadline}T00:00:00`)
+  if (Number.isNaN(parsed.getTime())) {
+    return `Bewerbung bis ${deadline}`
+  }
+
+  return `Bewerbung bis ${parsed.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })}`
+})
+const showactStatusText = computed(() => {
+  if (featureFlags.value.showactApplicationsEnabled) {
+    return 'Bewerbungen sind aktuell offen.'
+  }
+
+  return featureFlags.value.showactApplicationDisabledMessage?.trim()
+    || 'Showact-Bewerbungen sind aktuell geschlossen.'
+})
+const showactPrimaryLabel = computed(() =>
+  featureFlags.value.showactApplicationsEnabled ? 'Jetzt bewerben' : 'Mehr erfahren',
+)
+const showactPrimaryHref = computed(() =>
+  !featureFlags.value.showactApplicationsEnabled && isSafePublicUrl(showactFooterLink.value?.url)
+    ? showactFooterLink.value?.url ?? ''
+    : '',
+)
+const showactPrimaryDisabled = computed(() =>
+  !featureFlags.value.showactApplicationsEnabled
+  && !showactInfoHtml.value
+  && !showactPrimaryHref.value,
+)
+const showactPrimaryButtonStyle = computed(() =>
+  showactPrimaryDisabled.value
+    ? "display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:14px;background:#c9b8da;border:none;color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;cursor:not-allowed;box-shadow:none;transition:transform .15s,box-shadow .15s;flex-shrink:0;opacity:.86;"
+    : "display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:14px;background:#8b6cdb;border:none;color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(124,86,196,.25);transition:transform .15s,box-shadow .15s;flex-shrink:0;",
+)
+
+const showactSchema = computed((): ShowactFormField[] => {
+  const json = featureFlags.value.showactFormSchemaJson ?? '[]'
+  try {
+    const parsed = JSON.parse(json)
+    if (Array.isArray(parsed) && parsed.length > 0) return parsed as ShowactFormField[]
+  } catch {
+    // ignore
+  }
+  return DEFAULT_SHOWACT_SCHEMA
+})
 
 function resetForm() {
-  form.artistName = ''
-  form.contactEmail = ''
-  form.contactDiscord = ''
-  form.platformUrl = ''
-  form.performanceType = ''
-  form.description = ''
-  form.technicalNotes = ''
-  form.referenceUrl = ''
+  for (const key of Object.keys(fieldValues)) {
+    delete fieldValues[key]
+  }
+  for (const key of Object.keys(fieldErrors)) {
+    delete fieldErrors[key]
+  }
+}
+
+function closeModal() {
+  localModalOpen.value = false
+  emit('update:modalOpen', false)
+}
+
+function openShowactPrimaryAction() {
+  if (featureFlags.value.showactApplicationsEnabled) {
+    localModalOpen.value = true
+    return
+  }
+
+  if (showactInfoHtml.value) {
+    showactInfoModalOpen.value = true
+    return
+  }
+
+  const fallbackUrl = showactPrimaryHref.value
+  if (fallbackUrl && typeof window !== 'undefined') {
+    window.open(fallbackUrl, '_blank', 'noopener,noreferrer')
+  }
+}
+
+function closeShowactInfoModal() {
+  showactInfoModalOpen.value = false
+  emit('update:modalOpen', false)
+}
+
+// For multiselect: values are stored as comma-separated strings
+function getMultiselectValues(fieldId: string): string[] {
+  const raw = fieldValues[fieldId] ?? ''
+  return raw ? raw.split(',').map((v) => v.trim()).filter(Boolean) : []
+}
+
+function otherFieldId(fieldId: string) {
+  return `${fieldId}__other`
+}
+
+function getOtherValue(fieldId: string) {
+  return (fieldValues[otherFieldId(fieldId)] ?? '').trim()
+}
+
+function setMultiselectValue(fieldId: string, option: string, checked: boolean) {
+  const current = getMultiselectValues(fieldId)
+  if (checked) {
+    if (!current.includes(option)) current.push(option)
+  } else {
+    const idx = current.indexOf(option)
+    if (idx !== -1) current.splice(idx, 1)
+  }
+  fieldValues[fieldId] = current.join(', ')
+  delete fieldErrors[fieldId]
+}
+
+function setCheckboxValue(field: ShowactFormField, checked: boolean) {
+  const value = field.options[0] || 'Ja'
+  fieldValues[field.id] = checked ? value : ''
+  delete fieldErrors[field.id]
+}
+
+function isCheckboxChecked(field: ShowactFormField) {
+  return Boolean((fieldValues[field.id] ?? '').trim())
+}
+
+function updateOtherValue(field: ShowactFormField, value: string) {
+  fieldValues[otherFieldId(field.id)] = value
+  delete fieldErrors[field.id]
+}
+
+function validateField(field: ShowactFormField): string {
+  const value = (fieldValues[field.id] ?? '').trim()
+  const otherValue = field.allowOther ? getOtherValue(field.id) : ''
+
+  if (field.required && !value && !otherValue) {
+    if (field.type === 'checkbox') {
+      return `Bitte bestaetige „${field.label}".`
+    }
+
+    if (field.type === 'radio' || field.type === 'select' || field.type === 'multiselect') {
+      return `Bitte waehle bei „${field.label}" eine Antwort aus.`
+    }
+
+    return `Bitte fuell das Feld „${field.label}" aus.`
+  }
+
+  if (!value) {
+    return ''
+  }
+
+  if (field.type === 'email') {
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailPattern.test(value)) {
+      return `Bitte gib bei „${field.label}" eine gueltige E-Mail-Adresse ein.`
+    }
+  }
+
+  if (field.type === 'url') {
+    try {
+      const url = new URL(value)
+      if (!['http:', 'https:'].includes(url.protocol)) {
+        return `Bitte gib bei „${field.label}" einen gueltigen Link mit http oder https ein.`
+      }
+    } catch {
+      return `Bitte gib bei „${field.label}" einen gueltigen Link ein.`
+    }
+  }
+
+  return ''
+}
+
+function updateFieldError(field: ShowactFormField) {
+  const message = validateField(field)
+  if (message) {
+    fieldErrors[field.id] = message
+    return
+  }
+
+  delete fieldErrors[field.id]
+}
+
+function resolveFieldValue(field?: ShowactFormField | null, source: Record<string, string> = fieldValues) {
+  if (!field) {
+    return ''
+  }
+
+  return (source[field.id] ?? '').trim()
+}
+
+function findFieldByMatcher(matcher: (field: ShowactFormField) => boolean) {
+  return showactSchema.value.find(matcher) ?? null
+}
+
+function fieldHaystack(field: ShowactFormField) {
+  return `${field.id} ${field.label}`.toLowerCase()
+}
+
+function fieldMatches(field: ShowactFormField, needles: string[]) {
+  const haystack = fieldHaystack(field)
+  return needles.some((needle) => haystack.includes(needle))
+}
+
+function findFieldByIdOrLabel(ids: string[], labels: string[], type?: ShowactFormField['type']) {
+  return findFieldByMatcher((field) => {
+    if (type && field.type !== type) return false
+    const id = field.id.toLowerCase()
+    const label = field.label.toLowerCase()
+    return ids.some((needle) => id.includes(needle)) || labels.some((needle) => label.includes(needle))
+  })
+}
+
+function buildShowactPayload(fieldResponsesJson: string, responses: Record<string, string>): CreateShowactApplicationPayload {
+  const artistField = findFieldByMatcher((field) => field.isArtistName)
+  const emailField = findFieldByMatcher((field) => field.type === 'email')
+  const discordField = findFieldByMatcher((field) => fieldMatches(field, ['discord']))
+  const platformField = findFieldByMatcher((field) => {
+    if (field.type !== 'url') return false
+    return fieldMatches(field, ['platform', 'kanal', 'profil', 'channel'])
+  })
+  const referenceField = findFieldByMatcher((field) => {
+    if (field.type !== 'url') return false
+    return fieldMatches(field, ['referenz', 'reference'])
+  })
+  const performanceField = findFieldByIdOrLabel(
+    ['performance_type', 'showact_type', 'show_type', 'showact_roles', 'roles'],
+    ['showact-art', 'showact art', 'art des showacts', 'performance', 'wofür möchtest', 'wofuer moechtest', 'bewerben'],
+  )
+  const descriptionField = findFieldByIdOrLabel(
+    ['description', 'beschreibung', 'show_description'],
+    ['beschreibung', 'idee', 'was moechtest', 'was möchtest', 'zeigen'],
+    'textarea',
+  )
+  const technicalNotesField = findFieldByIdOrLabel(
+    ['technical_notes', 'technik', 'technical', 'setup', 'timing'],
+    ['technik', 'technical', 'setup', 'timing'],
+  )
+
+  const textareaSummary = showactSchema.value
+    .filter((field) => field.type === 'textarea')
+    .map((field) => resolveFieldValue(field, responses))
+    .filter(Boolean)
+    .join('\n\n')
+  const description = resolveFieldValue(descriptionField, responses) || textareaSummary || 'Strukturierte Showact-Bewerbung'
+
+  return {
+    artistName: resolveFieldValue(artistField, responses),
+    contactEmail: resolveFieldValue(emailField, responses),
+    contactDiscord: resolveFieldValue(discordField, responses),
+    platformUrl: resolveFieldValue(platformField, responses),
+    performanceType: resolveFieldValue(performanceField, responses),
+    description,
+    technicalNotes: resolveFieldValue(technicalNotesField, responses),
+    referenceUrl: resolveFieldValue(referenceField, responses),
+    fieldResponsesJson,
+  }
 }
 
 async function submitShowact() {
+  for (const field of showactSchema.value) {
+    const message = validateField(field)
+    if (message) {
+      fieldErrors[field.id] = message
+      showAdminToast(message, 'error')
+      return
+    }
+  }
+  const responses = { ...fieldValues }
+  for (const field of showactSchema.value) {
+    if (!field.allowOther) {
+      continue
+    }
+
+    const otherValue = getOtherValue(field.id)
+    delete responses[otherFieldId(field.id)]
+    if (otherValue) {
+      const current = getMultiselectValues(field.id)
+      responses[field.id] = [...current, `Andere: ${otherValue}`].join(', ')
+    }
+  }
+  const fieldResponsesJson = JSON.stringify(responses)
   submitting.value = true
-  submitMessage.value = ''
-  submitError.value = ''
   try {
-    await store.submitShowactApplication(form)
-    submitMessage.value = 'Bewerbung ist angekommen. Das Team meldet sich, wenn es passt.'
+    await store.submitShowactApplication(buildShowactPayload(fieldResponsesJson, responses))
+    showAdminToast('Bewerbung ist angekommen. Das Team meldet sich, wenn es passt.', 'success')
     resetForm()
+    closeModal()
   } catch (error) {
-    submitError.value = error instanceof Error ? error.message : 'Bewerbung konnte nicht gesendet werden.'
+    showAdminToast(error instanceof Error ? error.message : 'Bewerbung konnte nicht gesendet werden.', 'error')
   } finally {
     submitting.value = false
   }
 }
+
+const inputStyle = 'padding:13px 16px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;font-family:\'Outfit\',sans-serif;font-size:15px;color:#3f3556;outline:none;transition:border-color .15s;'
+const labelStyle = 'font-family:\'Outfit\',sans-serif;font-size:13px;font-weight:600;color:#5f44ad;'
+const errorStyle = 'font-family:\'Outfit\',sans-serif;font-size:12px;font-weight:600;color:#d14b72;line-height:1.45;'
+const checkboxStyle = 'display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;font-family:\'Outfit\',sans-serif;font-size:14px;color:#3f3556;cursor:pointer;'
+
+function onFocus(event: FocusEvent) {
+  ;(event.target as HTMLElement).style.borderColor = '#8b6cdb'
+}
+function onBlur(event: FocusEvent) {
+  ;(event.target as HTMLElement).style.borderColor = '#e6dcf6'
+}
+
+function handleFieldBlur(field: ShowactFormField, event: FocusEvent) {
+  onBlur(event)
+  updateFieldError(field)
+}
+
+function resolveTextInputType(field: ShowactFormField) {
+  if (field.type === 'email' || field.type === 'url') {
+    return 'text'
+  }
+
+  return 'text'
+}
+
+function resolveInputMode(field: ShowactFormField) {
+  if (field.type === 'email') return 'email'
+  if (field.type === 'url') return 'url'
+  return 'text'
+}
+
+function resolveAutoComplete(field: ShowactFormField) {
+  if (field.type === 'email') return 'email'
+  if (field.type === 'url') return 'url'
+  return 'off'
+}
+
+function isSafePublicUrl(value: string | null | undefined) {
+  if (!value) return false
+
+  try {
+    const url = new URL(value)
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+watch(
+  () => props.modalOpen,
+  (next) => {
+    if (!next) {
+      localModalOpen.value = false
+      showactInfoModalOpen.value = false
+      return
+    }
+
+    if (featureFlags.value.showactApplicationsEnabled) {
+      localModalOpen.value = true
+      showactInfoModalOpen.value = false
+      return
+    }
+
+    localModalOpen.value = false
+    showactInfoModalOpen.value = true
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
-  <section v-if="showSection" class="mx-auto grid w-full max-w-6xl gap-5 px-5 py-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
+  <section v-if="showSection" class="mx-auto w-full max-w-[1200px] space-y-5 px-6 pb-6 -mt-10">
+    <!-- Sponsor-Kacheln -->
     <div v-if="sponsors.length > 0" class="rounded-[24px] border border-white/70 bg-white/78 p-5 shadow-[0_18px_46px_rgba(105,78,160,0.13)] backdrop-blur">
       <div class="flex items-center gap-3">
         <span class="grid h-11 w-11 place-items-center rounded-2xl bg-sky-100 text-sky-700">
@@ -64,8 +413,7 @@ async function submitShowact() {
           <h2 class="text-xl font-black text-[#3f3556]">Sponsoren</h2>
         </div>
       </div>
-
-      <div class="mt-5 grid gap-3 sm:grid-cols-2">
+      <div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         <a
           v-for="sponsor in sponsors"
           :key="sponsor.id"
@@ -89,48 +437,296 @@ async function submitShowact() {
       </div>
     </div>
 
-    <div v-if="featureFlags.showactApplicationsEnabled" class="rounded-[24px] border border-white/70 bg-white/78 p-5 shadow-[0_18px_46px_rgba(105,78,160,0.13)] backdrop-blur">
-      <div class="flex items-center gap-3">
-        <span class="grid h-11 w-11 place-items-center rounded-2xl bg-fuchsia-100 text-fuchsia-700">
-          <Mic2 class="h-5 w-5" />
-        </span>
-        <div>
-          <p class="text-xs font-bold uppercase tracking-[0.2em] text-fuchsia-600">Showacts</p>
-          <h2 class="text-xl font-black text-[#3f3556]">Bewerben</h2>
-        </div>
-      </div>
-
-      <form class="mt-5 space-y-3" @submit.prevent="submitShowact">
-        <div class="grid gap-3 sm:grid-cols-2">
-          <input v-model="form.artistName" required maxlength="120" placeholder="Kuenstlername" class="rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-          <input v-model="form.performanceType" required maxlength="80" placeholder="Showact-Art" class="rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-        </div>
-        <div class="grid gap-3 sm:grid-cols-2">
-          <input v-model="form.contactEmail" maxlength="180" placeholder="E-Mail" class="rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-          <input v-model="form.contactDiscord" maxlength="120" placeholder="Discord" class="rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-        </div>
-        <div class="grid gap-3 sm:grid-cols-2">
-          <input v-model="form.platformUrl" maxlength="500" placeholder="Kanal/Profil URL" class="rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-          <input v-model="form.referenceUrl" maxlength="500" placeholder="Referenz URL" class="rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-        </div>
-        <textarea v-model="form.description" required rows="3" maxlength="1000" placeholder="Kurz beschreiben, was du zeigen moechtest" class="w-full rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-        <textarea v-model="form.technicalNotes" rows="2" maxlength="1000" placeholder="Technische Hinweise, Setup, Timing" class="w-full rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm outline-none focus:border-violet-300 focus:ring-4 focus:ring-violet-100" />
-
-        <p v-if="submitError" class="rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">{{ submitError }}</p>
-        <p v-if="submitMessage" class="flex items-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700">
-          <CheckCircle2 class="h-4 w-4" />
-          {{ submitMessage }}
+    <!-- Showact-Banner -->
+    <div
+      v-if="showactVisible"
+      class="flex flex-wrap items-center gap-5 rounded-[24px] border border-white/70 bg-white/78 px-6 py-5 backdrop-blur sm:flex-nowrap"
+    >
+      <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
+        <Mic2 class="h-6 w-6" />
+      </span>
+      <div class="min-w-0 flex-1">
+        <p class="text-xs font-bold uppercase tracking-[0.2em] text-violet-500">Showacts</p>
+        <h2 class="mt-0.5 text-xl font-black text-[#3f3556]">Als Showact auftreten</h2>
+        <p class="mt-1 text-sm leading-6 text-[#746b86]">
+          <template v-if="featureFlags.showactApplicationsEnabled">
+            Hast du eine Idee fuer einen Beitrag? Bewirb dich jetzt und zeig der Community, was du kannst.
+          </template>
+          <template v-else>
+            Showacts bleiben ein Teil der Award-Show. Aktuell ist das Bewerbungsfenster geschlossen, aber alle Infos bleiben hier erreichbar.
+          </template>
+          <span v-if="showactDeadlineText" class="font-semibold text-violet-700">{{ showactDeadlineText }}</span>
+          <span v-else class="font-semibold text-violet-700">{{ showactStatusText }}</span>
         </p>
-
-        <button
-          type="submit"
-          :disabled="submitting"
-          class="inline-flex h-11 items-center justify-center gap-2 rounded-2xl border border-fuchsia-500 bg-fuchsia-600 px-5 text-sm font-black text-white shadow-[0_14px_28px_rgba(192,38,211,0.2)] transition hover:bg-fuchsia-500 disabled:opacity-60"
-        >
-          <Send class="h-4 w-4" />
-          {{ submitting ? 'Sendet ...' : 'Bewerbung senden' }}
-        </button>
-      </form>
+      </div>
+      <a
+        v-if="showactPrimaryHref"
+        :href="showactPrimaryHref"
+        target="_blank"
+        rel="noopener noreferrer"
+        referrerpolicy="no-referrer"
+        style="display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:14px;background:#8b6cdb;border:none;color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(124,86,196,.25);transition:transform .15s,box-shadow .15s;flex-shrink:0;text-decoration:none;"
+      >
+        <Send class="h-4 w-4" />
+        {{ showactPrimaryLabel }}
+      </a>
+      <button
+        v-else
+        type="button"
+        :disabled="showactPrimaryDisabled"
+        :style="showactPrimaryButtonStyle"
+        @click="openShowactPrimaryAction"
+      >
+        <Send class="h-4 w-4" />
+        {{ showactPrimaryLabel }}
+      </button>
     </div>
   </section>
+
+  <!-- Bewerbungs-Modal im Landing-Page-Stil -->
+  <Teleport to="body">
+    <div
+      v-if="localModalOpen"
+      style="position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
+      @click.self="closeModal"
+    >
+      <div
+        style="position:relative;width:100%;max-width:720px;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);"
+        @click.stop
+      >
+        <!-- Schliessen-Button -->
+        <button
+          aria-label="Schliessen"
+          style="position:absolute;top:18px;right:18px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);font-size:18px;cursor:pointer;"
+          @click="closeModal"
+        >
+          <X :size="18" />
+        </button>
+
+        <!-- Header mit Sternanimation -->
+        <div style="position:relative;overflow:hidden;padding:30px 36px 26px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,#2a1842,#3a2168);flex:none;">
+          <HomeStarField :count="13" variant="header" />
+          <div style="position:relative;z-index:1;">
+            <div style="display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:rgba(201,177,255,.12);border:1px solid rgba(201,177,255,.34);color:#c9b1ff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;">✦ Showacts</div>
+            <h3 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.1;margin:0 0 8px;color:#fff6fb;">Showact-Bewerbung</h3>
+            <p style="font-size:15px;line-height:1.55;color:#d8c9eb;margin:0;">Fuell das Formular aus und schick deine Bewerbung ab.</p>
+          </div>
+        </div>
+
+        <!-- Dynamisches Formular -->
+        <div style="overflow-y:auto;padding:28px 36px 32px;flex:1;">
+          <form novalidate @submit.prevent="submitShowact">
+            <template v-for="field in showactSchema" :key="field.id">
+              <!-- text / email / url -->
+              <label v-if="field.type === 'text' || field.type === 'email' || field.type === 'url'" style="display:flex;flex-direction:column;gap:6px;margin-bottom:14px;">
+                <span :style="labelStyle">{{ field.label }}{{ field.required ? ' *' : '' }}</span>
+                <span v-if="field.helpText" style="font-family:'Outfit',sans-serif;font-size:12px;line-height:1.45;color:#8a819d;">{{ field.helpText }}</span>
+                <input
+                  v-model="fieldValues[field.id]"
+                  :type="resolveTextInputType(field)"
+                  :inputmode="resolveInputMode(field)"
+                  :autocomplete="resolveAutoComplete(field)"
+                  :maxlength="field.maxLength"
+                  :placeholder="field.placeholder"
+                  :aria-invalid="fieldErrors[field.id] ? 'true' : 'false'"
+                  :style="inputStyle + (fieldErrors[field.id] ? 'border-color:#d14b72;background:#fff7fa;' : '')"
+                  @focus="onFocus"
+                  @blur="handleFieldBlur(field, $event)"
+                  @input="delete fieldErrors[field.id]"
+                />
+                <span v-if="fieldErrors[field.id]" :style="errorStyle">{{ fieldErrors[field.id] }}</span>
+              </label>
+
+              <!-- textarea -->
+              <label v-else-if="field.type === 'textarea'" style="display:flex;flex-direction:column;gap:6px;margin-bottom:14px;">
+                <span :style="labelStyle">{{ field.label }}{{ field.required ? ' *' : '' }}</span>
+                <span v-if="field.helpText" style="font-family:'Outfit',sans-serif;font-size:12px;line-height:1.45;color:#8a819d;">{{ field.helpText }}</span>
+                <textarea
+                  v-model="fieldValues[field.id]"
+                  rows="4"
+                  :maxlength="field.maxLength"
+                  :placeholder="field.placeholder"
+                  :aria-invalid="fieldErrors[field.id] ? 'true' : 'false'"
+                  :style="inputStyle + 'resize:vertical;line-height:1.55;' + (fieldErrors[field.id] ? 'border-color:#d14b72;background:#fff7fa;' : '')"
+                  @focus="onFocus"
+                  @blur="handleFieldBlur(field, $event)"
+                  @input="delete fieldErrors[field.id]"
+                />
+                <span v-if="fieldErrors[field.id]" :style="errorStyle">{{ fieldErrors[field.id] }}</span>
+              </label>
+
+              <!-- select -->
+              <label v-else-if="field.type === 'select'" style="display:flex;flex-direction:column;gap:6px;margin-bottom:14px;">
+                <span :style="labelStyle">{{ field.label }}{{ field.required ? ' *' : '' }}</span>
+                <span v-if="field.helpText" style="font-family:'Outfit',sans-serif;font-size:12px;line-height:1.45;color:#8a819d;">{{ field.helpText }}</span>
+                <select
+                  v-model="fieldValues[field.id]"
+                  :aria-invalid="fieldErrors[field.id] ? 'true' : 'false'"
+                  :style="inputStyle + (fieldErrors[field.id] ? 'border-color:#d14b72;background:#fff7fa;' : '')"
+                  @focus="onFocus"
+                  @blur="handleFieldBlur(field, $event)"
+                  @change="delete fieldErrors[field.id]"
+                >
+                  <option value="">{{ field.placeholder || '— Bitte wählen —' }}</option>
+                  <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
+                </select>
+                <span v-if="fieldErrors[field.id]" :style="errorStyle">{{ fieldErrors[field.id] }}</span>
+              </label>
+
+              <!-- radio -->
+              <div v-else-if="field.type === 'radio'" style="display:flex;flex-direction:column;gap:6px;margin-bottom:14px;">
+                <span :style="labelStyle">{{ field.label }}{{ field.required ? ' *' : '' }}</span>
+                <span v-if="field.helpText" style="font-family:'Outfit',sans-serif;font-size:12px;line-height:1.45;color:#8a819d;">{{ field.helpText }}</span>
+                <div :style="'display:flex;flex-direction:column;gap:8px;padding:10px 14px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;' + (fieldErrors[field.id] ? 'border-color:#d14b72;background:#fff7fa;' : '')">
+                  <label
+                    v-for="opt in field.options"
+                    :key="opt"
+                    style="display:flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-size:14px;color:#3f3556;cursor:pointer;"
+                  >
+                    <input
+                      v-model="fieldValues[field.id]"
+                      type="radio"
+                      :name="field.id"
+                      :value="opt"
+                      style="width:17px;height:17px;accent-color:#7c56c4;"
+                      @change="delete fieldErrors[field.id]"
+                    />
+                    {{ opt }}
+                  </label>
+                </div>
+                <span v-if="fieldErrors[field.id]" :style="errorStyle">{{ fieldErrors[field.id] }}</span>
+              </div>
+
+              <!-- multiselect (checkboxes) -->
+              <div v-else-if="field.type === 'multiselect'" style="display:flex;flex-direction:column;gap:6px;margin-bottom:14px;">
+                <span :style="labelStyle">{{ field.label }}{{ field.required ? ' *' : '' }}</span>
+                <span v-if="field.helpText" style="font-family:'Outfit',sans-serif;font-size:12px;line-height:1.45;color:#8a819d;">{{ field.helpText }}</span>
+                <div :style="'display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;' + (fieldErrors[field.id] ? 'border-color:#d14b72;background:#fff7fa;' : '')">
+                  <label
+                    v-for="opt in field.options"
+                    :key="opt"
+                    style="display:flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;font-size:14px;color:#3f3556;cursor:pointer;"
+                  >
+                    <input
+                      type="checkbox"
+                      :checked="getMultiselectValues(field.id).includes(opt)"
+                      style="width:16px;height:16px;"
+                      @change="setMultiselectValue(field.id, opt, ($event.target as HTMLInputElement).checked); updateFieldError(field)"
+                    />
+                    {{ opt }}
+                  </label>
+                  <label
+                    v-if="field.allowOther"
+                    style="display:flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;font-size:14px;color:#3f3556;cursor:pointer;"
+                  >
+                    <span style="width:16px;height:16px;border-radius:4px;border:1.5px solid #d8c9eb;background:#fff;"></span>
+                    Andere:
+                    <input
+                      :value="getOtherValue(field.id)"
+                      type="text"
+                      placeholder="Eigene Antwort"
+                      style="min-width:0;flex:1;border:0;border-bottom:1.5px solid #d8c9eb;background:transparent;padding:4px 2px;font-family:'Outfit',sans-serif;font-size:14px;color:#3f3556;outline:none;"
+                      @input="updateOtherValue(field, ($event.target as HTMLInputElement).value)"
+                    />
+                  </label>
+                  <span v-if="field.options.length === 0" style="font-size:13px;color:#9ca3af;">Keine Optionen konfiguriert.</span>
+                </div>
+                <span v-if="fieldErrors[field.id]" :style="errorStyle">{{ fieldErrors[field.id] }}</span>
+              </div>
+
+              <!-- single checkbox confirmation -->
+              <div v-else-if="field.type === 'checkbox'" style="display:flex;flex-direction:column;gap:6px;margin-bottom:14px;">
+                <span :style="labelStyle">{{ field.label }}{{ field.required ? ' *' : '' }}</span>
+                <span v-if="field.helpText" style="font-family:'Outfit',sans-serif;font-size:12px;line-height:1.45;color:#8a819d;">{{ field.helpText }}</span>
+                <label :style="checkboxStyle + (fieldErrors[field.id] ? 'border-color:#d14b72;background:#fff7fa;' : '')">
+                  <input
+                    type="checkbox"
+                    :checked="isCheckboxChecked(field)"
+                    style="width:17px;height:17px;accent-color:#7c56c4;"
+                    @change="setCheckboxValue(field, ($event.target as HTMLInputElement).checked); updateFieldError(field)"
+                  />
+                  {{ field.options[0] || 'Ja' }}
+                </label>
+                <span v-if="fieldErrors[field.id]" :style="errorStyle">{{ fieldErrors[field.id] }}</span>
+              </div>
+            </template>
+
+            <div style="display:flex;justify-content:flex-end;margin-top:6px;">
+              <button
+                type="submit"
+                :disabled="submitting"
+                style="display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:13px;border:none;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 10px 24px rgba(124,86,196,.3);transition:transform .15s,opacity .15s;"
+                @mouseover="($event.currentTarget as HTMLButtonElement).style.transform='translateY(-2px)'"
+                @mouseleave="($event.currentTarget as HTMLButtonElement).style.transform='translateY(0)'"
+              >
+                <Send :size="16" />
+                {{ submitting ? 'Sendet ...' : 'Bewerbung senden' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+  <Teleport to="body">
+    <div
+      v-if="showactInfoModalOpen"
+      style="position:fixed;inset:0;z-index:205;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
+      @click.self="closeShowactInfoModal"
+    >
+      <div
+        style="position:relative;width:100%;max-width:720px;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);"
+        @click.stop
+      >
+        <button
+          aria-label="Schliessen"
+          style="position:absolute;top:18px;right:18px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;"
+          @click="closeShowactInfoModal"
+        >
+          <X :size="18" />
+        </button>
+        <div style="padding:30px 36px 20px;border-bottom:1px solid #f1ecfb;background:linear-gradient(135deg,#2a1842,#3a2168);">
+          <p style="margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#c9b1ff;">Showacts</p>
+          <h3 style="margin:0;font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;line-height:1.1;color:#fff6fb;">Infos zur Award-Show</h3>
+        </div>
+        <div style="overflow-y:auto;padding:28px 36px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.7;color:#6f6685;">
+          <div v-if="showactInfoHtml" class="home-showact-info-content" v-html="showactInfoHtml" />
+          <p v-else style="margin:0;padding:14px 16px;border-radius:16px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;font-weight:600;">
+            Fuer Showacts ist aktuell noch kein Landingpage-Inhalt hinterlegt.
+          </p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
 </template>
+
+<style scoped>
+.home-showact-info-content :deep(p) {
+  margin: 0 0 14px;
+}
+
+.home-showact-info-content :deep(p:last-child),
+.home-showact-info-content :deep(ul:last-child),
+.home-showact-info-content :deep(ol:last-child) {
+  margin-bottom: 0;
+}
+
+.home-showact-info-content :deep(ul),
+.home-showact-info-content :deep(ol) {
+  margin: 0 0 14px 20px;
+  padding-left: 16px;
+}
+
+.home-showact-info-content :deep(li) {
+  margin: 3px 0;
+}
+</style>
+
+<style scoped>
+@media (max-width: 560px) {
+  .home-showact-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+</style>

frontend/src/components/home/HomeInteractionModal.vue

@@ -102,16 +102,17 @@ function syncNominationDrafts(options: HomeSelectionOption[]) {
   const nextVisibleLinkCounts: Record<number, number> = {}
   for (const option of options) {
     const existing = nominationDrafts.value[option.id] ?? []
-    nextDrafts[option.id] = [existing[0] ?? '', existing[1] ?? '', existing[2] ?? '']
+    const limit = nominationLinkLimitFor(option.id)
+    nextDrafts[option.id] = createNominationLinkSlots(existing, limit)
     const filledCount = nextDrafts[option.id].reduce((count, link, index) => link.trim() ? index + 1 : count, 0)
-    nextVisibleLinkCounts[option.id] = Math.min(3, Math.max(1, nominationVisibleLinkCounts.value[option.id] ?? filledCount))
+    nextVisibleLinkCounts[option.id] = Math.min(limit, Math.max(1, nominationVisibleLinkCounts.value[option.id] ?? filledCount))
   }
   nominationDrafts.value = nextDrafts
   nominationVisibleLinkCounts.value = nextVisibleLinkCounts
 }
 
 function nominationLinksFor(categoryIndex: number) {
-  return nominationDrafts.value[categoryIndex] ?? ['', '', '']
+  return nominationDrafts.value[categoryIndex] ?? createNominationLinkSlots([], nominationLinkLimitFor(categoryIndex))
 }
 
 function nominationVisibleLinkCountFor(categoryIndex: number) {
@@ -119,9 +120,10 @@ function nominationVisibleLinkCountFor(categoryIndex: number) {
 }
 
 function compactNominationCategory(categoryIndex: number) {
+  const limit = nominationLinkLimitFor(categoryIndex)
   const links = nominationLinksFor(categoryIndex)
-  const compactedLinks = links.map((link) => link.trim()).filter(Boolean).slice(0, 3)
-  const nextLinks = [compactedLinks[0] ?? '', compactedLinks[1] ?? '', compactedLinks[2] ?? '']
+  const compactedLinks = links.map((link) => link.trim()).filter(Boolean).slice(0, limit)
+  const nextLinks = createNominationLinkSlots(compactedLinks, limit)
   const nextVisibleCount = Math.max(1, compactedLinks.length)
   nominationDrafts.value = {
     ...nominationDrafts.value,
@@ -162,12 +164,13 @@ const activeNominationCategory = computed(() =>
 const activeNominationLinks = computed(() => nominationLinksFor(nominationCatValue.value))
 const activeNominationErrors = computed(() => nominationFieldErrors(nominationCatValue.value))
 const activeNominationVisibleLinkCount = computed(() => nominationVisibleLinkCountFor(nominationCatValue.value))
-const activeNominationRemainingLinks = computed(() => Math.max(0, 3 - activeNominationVisibleLinkCount.value))
+const activeNominationLinkLimit = computed(() => nominationLinkLimitFor(nominationCatValue.value))
+const activeNominationRemainingLinks = computed(() => Math.max(0, activeNominationLinkLimit.value - activeNominationVisibleLinkCount.value))
 const nominationReviewItems = computed(() =>
   props.catOptions
     .map((option) => ({
       categoryIndex: option.id,
-      categoryName: stripCategoryIcon(option.label),
+      categoryName: option.name || stripCategoryIcon(option.label),
       links: nominationLinksFor(option.id).map((link) => link.trim()).filter(Boolean),
     }))
     .filter((item) => item.links.length > 0),
@@ -184,8 +187,9 @@ const nominationRailItems = computed(() => props.catOptions.map((option) => {
   const isActive = option.id === nominationCatValue.value
   return {
     id: option.id,
-    name: stripCategoryIcon(option.label),
-    icon: option.label.trim().split(' ')[0] ?? '✦',
+    name: option.name || stripCategoryIcon(option.label),
+    groupName: option.groupName,
+    icon: option.icon || option.label.trim().split(' ')[0] || '✦',
     status: errors.some(Boolean) ? 'Fehler' : linkCount === 0 ? 'Leer' : `${linkCount} Link${linkCount === 1 ? '' : 's'}`,
     tone: errors.some(Boolean) ? 'error' as const : linkCount > 0 ? 'done' as const : isActive ? 'active' as const : 'empty' as const,
   }
@@ -237,9 +241,10 @@ function editNominationCategory(categoryIndex: number) {
 
 function addNominationLinkField() {
   const currentCount = nominationVisibleLinkCountFor(nominationCatValue.value)
+  const limit = nominationLinkLimitFor(nominationCatValue.value)
   nominationVisibleLinkCounts.value = {
     ...nominationVisibleLinkCounts.value,
-    [nominationCatValue.value]: Math.min(3, currentCount + 1),
+    [nominationCatValue.value]: Math.min(limit, currentCount + 1),
   }
 }
 
@@ -249,10 +254,11 @@ function removeNominationLinkField(index: number) {
     .filter((_, linkIndex) => linkIndex !== index)
     .map((link) => link.trim())
     .filter(Boolean)
-    .slice(0, 3)
-  const nextLinks = [compactedLinks[0] ?? '', compactedLinks[1] ?? '', compactedLinks[2] ?? '']
+    .slice(0, nominationLinkLimitFor(nominationCatValue.value))
+  const limit = nominationLinkLimitFor(nominationCatValue.value)
+  const nextLinks = createNominationLinkSlots(compactedLinks, limit)
   const previousVisibleCount = nominationVisibleLinkCountFor(nominationCatValue.value)
-  const nextVisibleCount = Math.max(1, Math.min(3, Math.max(previousVisibleCount - 1, compactedLinks.length)))
+  const nextVisibleCount = Math.max(1, Math.min(limit, Math.max(previousVisibleCount - 1, compactedLinks.length)))
   nominationDrafts.value = {
     ...nominationDrafts.value,
     [nominationCatValue.value]: nextLinks,
@@ -286,6 +292,16 @@ function normalizeUrlForCompare(value: string) {
   return value.trim().replace(/\/+$/, '').toLowerCase()
 }
 
+function nominationLinkLimitFor(categoryIndex: number) {
+  const rawLimit = props.catOptions.find((option) => option.id === categoryIndex)?.maxNomineesPerUser
+  const limit = typeof rawLimit === 'number' && Number.isFinite(rawLimit) ? rawLimit : 3
+  return Math.max(1, Math.min(10, Math.round(limit)))
+}
+
+function createNominationLinkSlots(existing: string[], limit: number) {
+  return Array.from({ length: limit }, (_, index) => existing[index] ?? '')
+}
+
 function stripCategoryIcon(value: string) {
   return value.replace(/^\S+\s+/, '')
 }
@@ -294,7 +310,7 @@ function stripCategoryIcon(value: string) {
 <template>
   <template v-if="props.modalOpen">
     <div class="home-modal-overlay" @click="props.closeModal" style="position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">
-      <div class="home-modal" :class="{ 'home-modal--wide': props.isPicker, 'home-modal--voting': props.isPicker && props.isVote && props.notSubmitted }" @click="props.stop" 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 class="home-modal" :class="{ 'home-modal--wide': props.isPicker, 'home-modal--voting': props.isPicker && props.notSubmitted }" @click="props.stop" 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);">
         <button @click="props.closeModal" aria-label="Schliessen" style="position:absolute;top:18px;right:18px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:none;background:rgba(139,108,219,.12);color:#8b6cdb;font-size:20px;cursor:pointer;" style-hover="background:rgba(139,108,219,.2);">✕</button>
 
         <template v-if="props.submitted">
@@ -309,13 +325,6 @@ function stripCategoryIcon(value: string) {
         </template>
 
         <template v-if="props.notSubmitted">
-          <p
-            v-if="props.formError"
-            style="margin:18px 36px 0;padding:12px 14px;border-radius:12px;border:1px solid #fecdd3;background:#fff1f2;color:#be123c;font-size:13.5px;font-weight:600;line-height:1.45;"
-          >
-            {{ props.formError }}
-          </p>
-
           <template v-if="props.isShow">
             <div class="home-modal__show" style="padding:38px 40px 40px;">
               <div style="display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:#f3eefb;color:#a98ddb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:18px;">Award-Show</div>
@@ -338,7 +347,7 @@ function stripCategoryIcon(value: string) {
                   <div class="home-wizard-header-row">
                     <div>
                       <h3 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(30px,3vw,36px);line-height:1.08;margin:0 0 14px;color:#3f3556;">Streamer nominieren</h3>
-                      <p style="font-size:16px;line-height:1.5;color:#8a8398;margin:0;">Reiche pro Kategorie bis zu drei Stream- oder Kanal-Links ein.</p>
+                      <p style="font-size:16px;line-height:1.5;color:#8a8398;margin:0;">Reiche pro Kategorie die erlaubte Anzahl an Stream- oder Kanal-Links ein.</p>
                     </div>
                   </div>
                 </div>
@@ -359,7 +368,7 @@ function stripCategoryIcon(value: string) {
                     />
                     <HomeNominationWizardPane
                       v-else
-                      :category-name="activeNominationCategory ? stripCategoryIcon(activeNominationCategory.label) : 'Kategorie'"
+                      :category-name="activeNominationCategory ? activeNominationCategory.name || stripCategoryIcon(activeNominationCategory.label) : 'Kategorie'"
                       :links="activeNominationLinks"
                       :errors="activeNominationErrors"
                       :visible-link-count="activeNominationVisibleLinkCount"

frontend/src/components/home/HomeLandingExperience.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import CinematicStarLoader from '../CinematicStarLoader.vue'
 import HomeCategoriesSection from './HomeCategoriesSection.vue'
@@ -14,7 +15,8 @@ import { useHomeLandingState } from './useHomeLandingState'
 import { useHomeLandingViewEffects } from './useHomeLandingViewEffects'
 
 const router = useRouter()
-const rootStyle = "font-family:'Outfit',sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.5;position:relative;background:#f4eefb;color:#3f3556;--bg:#f4eefb;--bg2:#ebe2f8;--surface:#ffffff;--card:#ffffff;--ink:#3f3556;--muted:#8a8398;--accent:#8b6cdb;--accent2:#b78bff;--gold:#d9942a;--line:rgba(124,86,196,0.16);--glow:rgba(139,108,219,0.3)"
+const showactModalOpen = ref(false)
+const rootStyle ="font-family:'Outfit',sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.5;position:relative;background:#f4eefb;color:#3f3556;--bg:#f4eefb;--bg2:#ebe2f8;--surface:#ffffff;--card:#ffffff;--ink:#3f3556;--muted:#8a8398;--accent:#8b6cdb;--accent2:#b78bff;--gold:#d9942a;--line:rgba(124,86,196,0.16);--glow:rgba(139,108,219,0.3)"
 const {
   store,
   authStore,
@@ -30,7 +32,7 @@ const {
   faqItems,
   privacyContentHtml,
   publicStreamUrl,
-  displayCategories,
+  landingCategories,
   nominationPhase,
   votingPhase,
   preparationPhase,
@@ -271,7 +273,7 @@ const { setRootEl, landingLoaderVisible, stickyCountdownVisible, handleClipSubmi
     :on-timeline-final-action="onTimelineFinalAction"
   />
 
-  <HomeCategoriesSection :display-categories="displayCategories" />
+  <HomeCategoriesSection :landing-categories="landingCategories" />
 
   <HomeWinnerShowcaseSection
     :selected-archive="selectedArchive"
@@ -292,7 +294,7 @@ const { setRootEl, landingLoaderVisible, stickyCountdownVisible, handleClipSubmi
     :on-section-action="onSectionAction"
   />
 
-  <HomeExtrasSection />
+  <HomeExtrasSection v-model:modal-open="showactModalOpen" />
 
   <HomeSupportFooterSection
     :community-social-links="communitySocialLinks"
@@ -300,6 +302,7 @@ const { setRootEl, landingLoaderVisible, stickyCountdownVisible, handleClipSubmi
     :faq-items="faqItems"
     :footer-links="footerLinks"
     :on-open-privacy="onOpenPrivacy"
+    :on-showact-apply="() => { showactModalOpen = true }"
     :is-uploaded-social-icon="isUploadedSocialIcon"
     :social-simple-icon-path="socialSimpleIconPath"
     :social-simple-icon-color="socialSimpleIconColor"

frontend/src/components/home/HomeParticipationSection.vue

@@ -29,7 +29,7 @@ const props = defineProps<{
             <span style="flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid #c9b6f0;font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:#7c5fc8;">1</span>
             <h3 style="margin:0;font-family:'Outfit',sans-serif;font-weight:700;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;color:#5f44ad;">Nominieren</h3>
           </div>
-          <p style="margin:0;font-size:15.5px;line-height:1.6;color:#7d7491;">Nominiere deine Favoriten in jeder Kategorie — pro Kategorie bis zu 3 Stream- oder Kanal-Links.</p>
+          <p style="margin:0;font-size:15.5px;line-height:1.6;color:#7d7491;">Nominiere deine Favoriten in jeder Kategorie - pro Kategorie bis zur erlaubten Anzahl an Stream- oder Kanal-Links.</p>
         </div>
         <svg data-step-arrow width="58" height="44" viewBox="0 0 58 44" fill="none" style="flex:none;margin-top:64px;"><path d="M3 12 C 22 4, 40 8, 50 26" stroke="#c2aef0" stroke-width="3" stroke-linecap="round"/><path d="M50 26 L 39 25 M50 26 L 49 14" stroke="#c2aef0" stroke-width="3" stroke-linecap="round"/></svg>
         <div style="flex:1;">

frontend/src/components/home/HomeSupportFooterSection.vue

@@ -19,6 +19,8 @@ interface FooterLink {
 
 interface SiteContent {
   newsletterUrl: string
+  shareXUrl: string
+  shareDiscordUrl: string
 }
 
 interface FaqItem {
@@ -32,6 +34,7 @@ const props = defineProps<{
   faqItems: FaqItem[]
   footerLinks: FooterLink[]
   onOpenPrivacy: () => void
+  onShowactApply?: () => void
   isUploadedSocialIcon: (icon: string | null | undefined) => boolean
   socialSimpleIconPath: (platform: string | null | undefined) => string
   socialSimpleIconColor: (platform: string | null | undefined) => string
@@ -39,12 +42,18 @@ const props = defineProps<{
 }>()
 
 const activeFooterLink = ref<FooterLink | null>(null)
+const linkCopied = ref(false)
 const activeFooterHtml = computed(() => privacyContentToHtml(activeFooterLink.value?.content || ''))
 const safeNewsletterUrl = computed(() =>
   isSafePublicUrl(props.siteContent.newsletterUrl) ? props.siteContent.newsletterUrl : '',
 )
 
 function openFooterLink(event: Event, link: FooterLink) {
+  if (link.key === 'showacts' && props.onShowactApply) {
+    event.preventDefault()
+    props.onShowactApply()
+    return
+  }
   if (!link.content.trim()) {
     if (!link.url.trim()) {
       event.preventDefault()
@@ -60,6 +69,16 @@ function closeFooterLink() {
   activeFooterLink.value = null
 }
 
+async function copyLink() {
+  try {
+    await navigator.clipboard.writeText(window.location.href)
+    linkCopied.value = true
+    setTimeout(() => { linkCopied.value = false }, 2000)
+  } catch {
+    // clipboard not available
+  }
+}
+
 function isSafePublicUrl(value: string | null | undefined) {
   if (!value) return false
 
@@ -120,9 +139,9 @@ function isSafePublicUrl(value: string | null | undefined) {
           <h2 style="margin:0 0 14px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,32px);letter-spacing:.5px;color:#5f44ad;">TEILE DIE AWARDS</h2>
           <p style="font-size:16px;line-height:1.6;color:#7d7491;margin:0 0 28px;">Supporte deine Favoriten und teile die Awards mit deinen Freunden!</p>
           <div style="display:flex;flex-direction:column;gap:14px;margin-top:auto;">
-            <a href="#" style="display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:14px;background:#15131c;color:#fff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 10px 24px rgba(20,18,28,.2);" style-hover="transform:translateY(-2px);"><svg width="17" height="17" viewBox="0 0 24 24" fill="#fff"><path d="M18.9 1.6h3.5l-7.6 8.7L23.7 22h-7l-5.5-7.2L4.9 22H1.4l8.1-9.3L1 1.6h7.2l4.9 6.5 5.8-6.5zm-1.2 18.3h1.9L7.1 3.6H5z"/></svg>Auf X teilen</a>
-            <a href="#" style="display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:14px;background:linear-gradient(135deg,#7c5fd0,#6d4fd0);color:#fff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 10px 24px rgba(124,86,196,.3);" style-hover="transform:translateY(-2px);"><svg width="19" height="19" viewBox="0 0 24 24" fill="#fff"><path d="M19.5 5.3A16 16 0 0 0 15.5 4l-.25.5a14.6 14.6 0 0 1 3.3 1.05 13 13 0 0 0-11.1 0A14.6 14.6 0 0 1 10.75 4.5L10.5 4A16 16 0 0 0 6.5 5.3 16.6 16.6 0 0 0 3.7 16.5a16.1 16.1 0 0 0 4.9 2.5l.6-.85a10.5 10.5 0 0 1-1.65-.8l.4-.3a11.5 11.5 0 0 0 9.9 0l.4.3a10.5 10.5 0 0 1-1.65.8l.6.85a16.1 16.1 0 0 0 4.9-2.5 16.6 16.6 0 0 0-2.8-11.2zM9.4 14.2c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.76 1.95-1.7 1.95zm5.2 0c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.75 1.95-1.7 1.95z"/></svg>Auf Discord teilen</a>
-            <a href="#" style="display:flex;align-items:center;justify-content:center;gap:11px;padding:15px 22px;border-radius:14px;background:#fff;border:1px solid #e9e0f8;color:#5f44ad;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 6px 16px rgba(124,86,196,.08);" style-hover="transform:translateY(-2px);border-color:#c9b6f0;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5"/></svg>Link kopieren</a>
+            <a v-if="props.siteContent.shareXUrl" :href="props.siteContent.shareXUrl" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" style="display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:14px;background:#15131c;color:#fff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 10px 24px rgba(20,18,28,.2);" style-hover="transform:translateY(-2px);"><svg width="17" height="17" viewBox="0 0 24 24" fill="#fff"><path d="M18.9 1.6h3.5l-7.6 8.7L23.7 22h-7l-5.5-7.2L4.9 22H1.4l8.1-9.3L1 1.6h7.2l4.9 6.5 5.8-6.5zm-1.2 18.3h1.9L7.1 3.6H5z"/></svg>Auf X teilen</a>
+            <a v-if="props.siteContent.shareDiscordUrl" :href="props.siteContent.shareDiscordUrl" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" style="display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;border-radius:14px;background:linear-gradient(135deg,#7c5fd0,#6d4fd0);color:#fff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 10px 24px rgba(124,86,196,.3);" style-hover="transform:translateY(-2px);"><svg width="19" height="19" viewBox="0 0 24 24" fill="#fff"><path d="M19.5 5.3A16 16 0 0 0 15.5 4l-.25.5a14.6 14.6 0 0 1 3.3 1.05 13 13 0 0 0-11.1 0A14.6 14.6 0 0 1 10.75 4.5L10.5 4A16 16 0 0 0 6.5 5.3 16.6 16.6 0 0 0 3.7 16.5a16.1 16.1 0 0 0 4.9 2.5l.6-.85a10.5 10.5 0 0 1-1.65-.8l.4-.3a11.5 11.5 0 0 0 9.9 0l.4.3a10.5 10.5 0 0 1-1.65.8l.6.85a16.1 16.1 0 0 0 4.9-2.5 16.6 16.6 0 0 0-2.8-11.2zM9.4 14.2c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.76 1.95-1.7 1.95zm5.2 0c-.95 0-1.7-.88-1.7-1.95s.75-1.95 1.7-1.95 1.72.88 1.7 1.95c0 1.07-.75 1.95-1.7 1.95z"/></svg>Auf Discord teilen</a>
+            <a href="#" @click.prevent="copyLink" style="display:flex;align-items:center;justify-content:center;gap:11px;padding:15px 22px;border-radius:14px;background:#fff;border:1px solid #e9e0f8;color:#5f44ad;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;box-shadow:0 6px 16px rgba(124,86,196,.08);" style-hover="transform:translateY(-2px);border-color:#c9b6f0;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5"/></svg>{{ linkCopied ? 'Kopiert ✓' : 'Link kopieren' }}</a>
           </div>
         </div>
       </div>
@@ -193,16 +212,6 @@ function isSafePublicUrl(value: string | null | undefined) {
           <p v-else style="margin:0;padding:14px 16px;border-radius:16px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;font-weight:600;">
             Für diese Footer-Seite ist noch kein Inhalt hinterlegt.
           </p>
-          <a
-            v-if="activeFooterLink.url"
-            :href="activeFooterLink.url"
-            target="_blank"
-            rel="noopener"
-            style="display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:12px 16px;border-radius:14px;background:#f6f1fd;border:1px solid #e6dcf6;color:#6a4fb8;text-decoration:none;font-weight:700;"
-            style-hover="background:#f1ecfb;"
-          >
-            Externe Seite öffnen
-          </a>
         </div>
       </div>
     </div>

frontend/src/components/home/HomeTimelineSection.vue

@@ -22,7 +22,7 @@
           <div :style="nominationPhase ? 'display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#e3f7ec;color:#1f9d5a;font-size:11px;font-weight:700;letter-spacing:.5px;margin-bottom:12px;' : 'display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#f1ecfb;color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:.5px;margin-bottom:12px;'">{{ nominationPhase ? 'JETZT AKTIV' : 'ABGESCHLOSSEN' }}</div>
           <h3 style="font-family:'Outfit',sans-serif;font-weight:700;font-size:21px;margin:0 0 6px;color:#3f3556;">Nominierung</h3>
           <div style="font-size:13px;font-weight:600;color:#a99fc0;margin-bottom:12px;">{{ formatTimelineRange('nomination') }}</div>
-          <p style="font-size:14.5px;line-height:1.6;color:#7d7491;margin:0 0 16px;">Die Community reicht ihre Favoriten ein — pro Kategorie bis zu drei Nominierungen.</p>
+          <p style="font-size:14.5px;line-height:1.6;color:#7d7491;margin:0 0 16px;">Die Community reicht ihre Favoriten ein - pro Kategorie bis zum konfigurierten Limit.</p>
           <button type="button" @click="openNominate" style="display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:11px;background:#f1ecfb;color:#7355c8;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;" style-hover="background:#e8e0f9;">{{ nominationPhase ? 'Jetzt nominieren' : 'Nominierungen ansehen' }}</button>
         </div>
       </div>

frontend/src/components/home/HomeVotingPickerPane.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 import HomeMissingVotesConfirm from './HomeMissingVotesConfirm.vue'
 import HomeWizardFooter from './HomeWizardFooter.vue'
@@ -20,11 +20,38 @@ const props = defineProps<{
 }>()
 
 const confirmMissingVotes = ref(false)
+const railRef = ref<HTMLElement | null>(null)
 const contentRef = ref<HTMLElement | null>(null)
 const activeCategoryRef = ref<HTMLElement | null>(null)
-const missingVoteCategoryNames = computed(() => props.catList.filter((category) => !category.done).map((category) => category.name))
+const activeCategoryItem = computed(() => props.catList[props.activeCatIndex] ?? null)
+const missingVoteCategoryNames = computed(() => props.catList.filter((category) => !category.done).map((category) => category.displayName))
 const submitLabel = computed(() => props.savedVoteActive ? 'Änderungen speichern' : 'Stimmen absenden')
 const isLastCategory = computed(() => props.activeCatIndex >= props.catList.length - 1)
+const groupedCatList = computed(() => {
+  const groups: Array<{
+    name: string
+    items: HomeCategoryListItem[]
+    doneCount: number
+    candidateCount: number
+  }> = []
+  for (const category of props.catList) {
+    const groupName = category.groupName?.trim() || 'Weitere Kategorien'
+    const current = groups.at(-1)
+    if (current?.name === groupName) {
+      current.items.push(category)
+      current.doneCount += category.done ? 1 : 0
+      current.candidateCount += category.candidateCount
+    } else {
+      groups.push({
+        name: groupName,
+        items: [category],
+        doneCount: category.done ? 1 : 0,
+        candidateCount: category.candidateCount,
+      })
+    }
+  }
+  return groups
+})
 const footerPrimaryLabel = computed(() => {
   if (!isLastCategory.value) return 'Weiter'
   if (!props.canSubmitVote) return 'Erst Favorit:in wählen'
@@ -81,10 +108,11 @@ function hideMissingVoteConfirm() {
 
 watch(
   () => props.activeCatIndex,
-  () => {
+  async () => {
     confirmMissingVotes.value = false
+    await nextTick()
     contentRef.value?.scrollTo({ top: 0 })
-    activeCategoryRef.value?.scrollIntoView({ block: 'nearest', inline: 'center' })
+    syncActiveCategoryIntoRail()
   },
 )
 
@@ -94,6 +122,23 @@ function setCategoryButtonRef(element: unknown, categoryIndex: number) {
   }
 }
 
+function syncActiveCategoryIntoRail() {
+  const rail = railRef.value
+  const activeButton = activeCategoryRef.value
+  if (!rail || !activeButton) return
+
+  const isHorizontalRail = rail.scrollWidth > rail.clientWidth && rail.clientWidth >= rail.clientHeight
+  if (isHorizontalRail) {
+    const buttonCenter = activeButton.offsetLeft + activeButton.offsetWidth / 2
+    const targetLeft = Math.max(0, buttonCenter - rail.clientWidth / 2)
+    rail.scrollTo({ left: targetLeft })
+    return
+  }
+
+  const targetTop = Math.max(0, activeButton.offsetTop - Math.max(12, (rail.clientHeight - activeButton.offsetHeight) / 2))
+  rail.scrollTo({ top: targetTop })
+}
+
 function goToNextCategory() {
   if (isLastCategory.value) {
     if (!props.canSubmitVote) return
@@ -114,20 +159,28 @@ async function submitConfirmedVote() {
 
 <template>
   <div class="home-vote-picker">
-    <aside class="home-vote-picker__rail">
-      <div class="home-vote-picker__rail-label">Kategorien</div>
-      <template v-for="(cat, __idx) in props.catList" :key="cat.idx ?? __idx">
+    <aside ref="railRef" class="home-vote-picker__rail">
+      <div class="home-vote-picker__rail-label">Hauptkategorien</div>
+      <section v-for="group in groupedCatList" :key="group.name" class="home-vote-picker__rail-group">
+        <div class="home-vote-picker__rail-group-label">{{ group.name }}</div>
         <button
-          :ref="(element) => setCategoryButtonRef(element, __idx)"
+          v-for="cat in group.items"
+          :key="cat.idx"
+          :ref="(element) => setCategoryButtonRef(element, cat.idx)"
+          type="button"
           class="home-vote-picker__category-button"
+          :aria-current="cat.idx === props.activeCatIndex ? 'true' : undefined"
           @click="cat.onClick"
+          @pointerdown.prevent
           :style="cat.rowStyle"
         >
           <span :style="cat.iconStyle">{{ cat.icon }}</span>
-          <span>{{ cat.name }}</span>
+          <span class="home-vote-picker__category-copy">
+            <span class="home-vote-picker__category-tier">{{ cat.name }}</span>
+          </span>
           <span v-if="!props.readonlyMode" :style="cat.checkStyle">✓</span>
         </button>
-      </template>
+      </section>
     </aside>
 
     <section ref="contentRef" class="home-vote-picker__content">
@@ -143,7 +196,8 @@ async function submitConfirmedVote() {
       <template v-else>
       <header class="home-vote-picker__category-header">
         <div>
-          <h4>{{ props.activeCatName }}</h4>
+          <p v-if="activeCategoryItem?.groupName" class="home-vote-picker__eyebrow">{{ activeCategoryItem.groupName }}</p>
+          <h4>{{ activeCategoryItem?.name || props.activeCatName }}</h4>
         </div>
       </header>
 

frontend/src/components/home/homeLandingExperience.css

@@ -330,8 +330,7 @@ html,body{margin:0;padding:0;background:#160a26;}
   position:relative;
   display:flex;
   flex-direction:column;
-  height:min(760px,calc(100dvh - 48px));
-  max-height:88vh;
+  flex:1;
   min-height:0;
   overflow:hidden;
   background:
@@ -405,6 +404,30 @@ html,body{margin:0;padding:0;background:#160a26;}
   color:#a98ddb;
 }
 
+.home-wizard-rail__group,
+.home-vote-picker__rail-group{
+  display:grid;
+  gap:8px;
+}
+
+.home-wizard-rail__group + .home-wizard-rail__group,
+.home-vote-picker__rail-group + .home-vote-picker__rail-group{
+  margin-top:8px;
+  padding-top:10px;
+  border-top:1px solid rgba(139,108,219,.12);
+}
+
+.home-wizard-rail__group-label,
+.home-vote-picker__rail-group-label{
+  padding:0 4px;
+  color:#8b6cdb;
+  font-size:10.5px;
+  font-weight:900;
+  letter-spacing:.14em;
+  line-height:1.2;
+  text-transform:uppercase;
+}
+
 .home-wizard-rail__button{
   display:grid;
   grid-template-columns:auto minmax(0,1fr) auto;
@@ -855,6 +878,11 @@ html,body{margin:0;padding:0;background:#160a26;}
   scrollbar-gutter:stable;
 }
 
+.home-vote-picker__rail-group{
+  display:grid;
+  gap:6px;
+}
+
 .home-vote-picker__rail-label{
   margin:0 4px 6px;
   font-size:11px;
@@ -868,11 +896,32 @@ html,body{margin:0;padding:0;background:#160a26;}
   min-height:54px;
 }
 
+.home-vote-picker__category-copy{
+  min-width:0;
+  display:grid;
+  gap:2px;
+}
+
+.home-vote-picker__category-tier{
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.home-vote-picker__category-meta{
+  color:#9a91aa;
+  font-size:11px;
+  font-weight:700;
+  line-height:1.2;
+}
+
 .home-vote-picker__content{
   min-width:0;
   padding:16px 22px 20px;
   overflow-y:auto;
   min-height:0;
+  min-block-size:420px;
   scrollbar-gutter:stable;
   background:rgba(255,255,255,.18);
 }
@@ -888,6 +937,7 @@ html,body{margin:0;padding:0;background:#160a26;}
   padding:0 0 12px;
   border-bottom:1px solid rgba(139,108,219,.09);
   background:transparent;
+  min-height:74px;
 }
 
 .home-vote-picker__eyebrow{
@@ -913,20 +963,10 @@ html,body{margin:0;padding:0;background:#160a26;}
   padding-bottom:22px;
 }
 
-.home-vote-picker__hint{
-  max-width:230px;
-  padding:8px 12px;
-  border-radius:999px;
-  background:#f4eefd;
-  color:#7d68bd;
-  font-size:12px;
-  font-weight:700;
-  line-height:1.35;
-}
-
 .home-vote-picker__cards{
   display:grid;
   gap:12px;
+  align-content:start;
 }
 
 .home-nomination-summary-card{
@@ -1007,13 +1047,12 @@ html,body{margin:0;padding:0;background:#160a26;}
 }
 
 .home-vote-card:hover{
-  border-color:rgba(139,108,219,.24);
   box-shadow:0 16px 36px rgba(139,108,219,.14);
   transform:translateY(-1px);
 }
 
 .home-vote-card--selected{
-  border-color:#8b6cdb;
+  border:3px solid #7c4de8;
   background:
     radial-gradient(circle at 92% 16%,rgba(139,108,219,.16),transparent 34%),
     rgba(255,255,255,.92);
@@ -1421,6 +1460,7 @@ html,body{margin:0;padding:0;background:#160a26;}
 
   .home-vote-picker__content{
     padding:14px 18px 18px;
+    min-block-size:360px;
   }
 
   .home-vote-card{
@@ -1961,6 +2001,7 @@ html,body{margin:0;padding:0;background:#160a26;}
   .home-vote-picker__content{
     flex:1 1 auto!important;
     min-height:0!important;
+    min-block-size:0!important;
     padding:14px!important;
   }
 

frontend/src/components/home/homeLandingTypes.ts

@@ -21,7 +21,20 @@ export interface HomeNominationSubmitContext {
 
 export interface HomeDisplayCategory {
   id: string
+  groupName: string
   name: string
   icon: string
+  maxNomineesPerUser: number
   candidates: CandidateSummary[]
 }
+
+export interface HomeLandingCategory {
+  id: string
+  groupName: string
+  name: string
+  icon: string
+  description: string
+  maxNomineesPerUser: number
+  candidateCount: number
+  subcategoryCount: number
+}

frontend/src/components/home/homeModalTypes.ts

@@ -1,8 +1,11 @@
 export interface HomeCategoryListItem {
   name: string
+  groupName: string
+  displayName: string
   icon: string
   idx: number
   done: boolean
+  candidateCount: number
   onClick: () => void
   rowStyle: string
   iconStyle: string
@@ -33,6 +36,10 @@ export interface HomeNomineeListItem {
 export interface HomeSelectionOption {
   id: number
   label: string
+  name?: string
+  groupName?: string
+  icon?: string
+  maxNomineesPerUser?: number
 }
 
 export interface HomeArchiveYearItem {

frontend/src/components/home/useHomeArchivePresentation.ts

@@ -63,7 +63,9 @@ export function useHomeArchivePresentation(store: AwardsStore, archiveYear: Ref<
     const clipUrl = winner.clipUrl?.trim() || null
     const clipTitle = winner.clipTitle?.trim() || 'Gewinner-Clip ansehen'
     const clipPlatform = clipUrl ? winner.clipPlatform?.trim() || winnerPlatformLabel(clipUrl) : 'Kein Clip'
-    const clipEmbed = clipUrl && winner.clipEmbedStatus !== 'link_only' ? buildClipEmbed(clipUrl) : null
+    const clipEmbed = clipUrl && winner.clipEmbedStatus !== 'link_only' && winner.clipEmbedStatus !== 'blocked'
+      ? buildClipEmbed(clipUrl)
+      : null
     return {
       category: winner.category,
       name: winner.winnerName,

frontend/src/components/home/useHomeLandingPresentation.ts

@@ -3,7 +3,7 @@ import { computed, type ComputedRef, type Ref } from 'vue'
 import { buildClipEmbed } from '../../lib/clipEmbeds'
 import { useAuthStore } from '../../stores/auth'
 import { useAwardsStore } from '../../stores/awards'
-import type { HomeDisplayCategory, HomeInteractionModalKind } from './homeLandingTypes'
+import type { HomeDisplayCategory, HomeInteractionModalKind, HomeLandingCategory } from './homeLandingTypes'
 
 type AwardsStore = ReturnType<typeof useAwardsStore>
 type AuthStore = ReturnType<typeof useAuthStore>
@@ -31,11 +31,52 @@ export function useHomeLandingOverviewPresentation(store: AwardsStore, authStore
   const displayCategories = computed<HomeDisplayCategory[]>(() =>
     store.categories.categories.map((category, index) => ({
       id: String(category.id),
+      groupName: category.groupName,
       name: category.name,
       icon: CATEGORY_ICONS[index % CATEGORY_ICONS.length] ?? '✦',
+      maxNomineesPerUser: category.maxNomineesPerUser,
       candidates: category.candidates,
     })),
   )
+  const landingCategories = computed<HomeLandingCategory[]>(() => {
+    if (store.overview.featuredCategories.length > 0) {
+      return store.overview.featuredCategories.map((category, index) => {
+        const matchingSubcategories = displayCategories.value.filter((item) => item.groupName === category.groupName)
+        const candidateCount = matchingSubcategories.reduce((sum, item) => sum + item.candidates.length, 0)
+        return {
+          id: String(category.id),
+          groupName: category.groupName,
+          name: category.groupName,
+          icon: CATEGORY_ICONS[index % CATEGORY_ICONS.length] ?? '✦',
+          description: category.description,
+          maxNomineesPerUser: category.maxNomineesPerUser,
+          candidateCount,
+          subcategoryCount: matchingSubcategories.length,
+        }
+      })
+    }
+
+    const seenGroups = new Set<string>()
+    return displayCategories.value.flatMap((category, index) => {
+      const groupKey = category.groupName.trim().toLowerCase()
+      if (seenGroups.has(groupKey)) {
+        return []
+      }
+
+      seenGroups.add(groupKey)
+      const matchingSubcategories = displayCategories.value.filter((item) => item.groupName.trim().toLowerCase() === groupKey)
+      return [{
+        id: category.id,
+        groupName: category.groupName,
+        name: category.groupName,
+        icon: CATEGORY_ICONS[index % CATEGORY_ICONS.length] ?? '✦',
+        description: '',
+        maxNomineesPerUser: category.maxNomineesPerUser,
+        candidateCount: matchingSubcategories.reduce((sum, item) => sum + item.candidates.length, 0),
+        subcategoryCount: matchingSubcategories.length,
+      }]
+    })
+  })
   const candidateCount = computed(() =>
     displayCategories.value.reduce((sum, category) => sum + category.candidates.length, 0),
   )
@@ -82,6 +123,7 @@ export function useHomeLandingOverviewPresentation(store: AwardsStore, authStore
     showStartsAt,
     currentYear,
     displayCategories,
+    landingCategories,
     candidateCount,
     bootstrapArchiveYears,
     formatRange,
@@ -194,9 +236,12 @@ function buildCatList(
     const done = votes.value[category.id] != null
     return {
       name: category.name,
+      groupName: category.groupName,
+      displayName: `${category.groupName} · ${category.name}`,
       icon: category.icon,
       idx: index,
       done,
+      candidateCount: category.candidates.length,
       onClick: () => setCat(index),
       rowStyle: baseRow + (active ? 'background:#f1ecfb;border-color:#d8c9f2;color:#5f44ad;' : 'border-color:transparent;color:#6f6685;'),
       iconStyle: "flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:14px;" + (active ? 'background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;' : 'background:#efe7fb;color:#9a7fce;'),

frontend/src/components/home/useHomeLandingState.ts

@@ -37,6 +37,7 @@ export function useHomeLandingState() {
     showStartsAt,
     currentYear,
     displayCategories,
+    landingCategories,
     candidateCount,
     bootstrapArchiveYears,
     formatRange,
@@ -137,7 +138,7 @@ export function useHomeLandingState() {
     sectionActionStyle,
   } = useHomePhasePresentation({
     previewPhase,
-    displayCategories,
+    landingCategories,
     candidateCount,
     publicStreamUrl,
     showDate,
@@ -263,6 +264,7 @@ export function useHomeLandingState() {
     privacyContentHtml,
     publicStreamUrl,
     displayCategories,
+    landingCategories,
     candidateCount,
     nominationPhase,
     votingPhase,

frontend/src/components/home/useHomeParticipationPresentation.ts

@@ -38,13 +38,31 @@ export function useHomeParticipationPresentation(params: {
   const canSubmitVote = computed(() => previewPhase.value === 'voting' && voteCount.value > 0)
   const savedVoteActive = computed(() => savedVoteCount.value > 0)
   const activeCategory = computed(() => displayCategories.value[activeCat.value] ?? displayCategories.value[0] ?? null)
-  const activeCatName = computed(() => activeCategory.value?.name ?? '')
+  const activeCatName = computed(() => {
+    const category = activeCategory.value
+    return category ? `${category.groupName} · ${category.name}` : ''
+  })
   const pickerTitle = computed(() => (modal.value === 'nominate' && previewPhase.value === 'nomination' ? 'Streamer nominieren' : modal.value === 'nominate' ? 'Eingegangene Nominierungen' : 'Deine Stimme zählt'))
-  const pickerSubtitle = computed(() => (modal.value === 'nominate' && previewPhase.value === 'nomination' ? 'Reiche den offiziellen Stream- oder Kanal-Link ein. Den Anzeigenamen vergibt das Team im Review.' : modal.value === 'nominate' ? 'Die Nominierungsphase ist abgeschlossen — hier sind alle eingereichten Kandidat:innen.' : 'Wähle pro Kategorie deine:n Favorit:in. Eine Stimme pro Kategorie.'))
+  const pickerSubtitle = computed(() => (modal.value === 'nominate' && previewPhase.value === 'nomination' ? 'Reiche den offiziellen Stream- oder Kanal-Link ein. Den Anzeigenamen vergibt das Team im Review.' : modal.value === 'nominate' ? 'Die Nominierungsphase ist abgeschlossen — hier sind alle eingereichten Kandidat:innen.' : 'Wähle in jeder Hauptkategorie die passende Unterkategorie und dort deine:n Favorit:in. Eine Stimme pro Unterkategorie.'))
   const successTitle = computed(() => successKind.value === 'nomination' ? 'Nominierung eingereicht ✦' : successKind.value === 'clip' ? 'Clip eingereicht ✦' : successKind.value === 'show' ? 'Erinnerung aktiviert ✦' : 'Stimme gespeichert ✩')
   const successText = computed(() => successKind.value === 'nomination' ? 'Danke! Deine Links wurden gespeichert und landen im Admin-Review.' : successKind.value === 'clip' ? 'Danke! Dein Clip wurde im Backend gespeichert und wird vom Team geprüft.' : successKind.value === 'show' ? `Wir erinnern dich rechtzeitig vor der Award-Show am ${formatShowDate(store)}.` : savedVoteActive.value ? 'Danke! Deine geänderte Auswahl wurde gespeichert.' : 'Danke fürs Abstimmen! Deine Auswahl wurde im Backend gespeichert.')
   const clipNomOptions = computed(() => (displayCategories.value[clipCatIdx.value]?.candidates ?? []).map((candidate, index) => ({ id: index, label: `${candidate.displayName}` })))
-  const catOptions = computed(() => displayCategories.value.map((category, index) => ({ id: index, label: `${category.icon} ${category.name}` })))
+  const catOptions = computed(() => {
+    const seenGroups = new Set<string>()
+    return displayCategories.value.flatMap((category, index) => {
+      const groupKey = category.groupName.trim().toLowerCase()
+      if (seenGroups.has(groupKey)) return []
+      seenGroups.add(groupKey)
+      return [{
+        id: index,
+        label: `${category.icon} ${category.groupName}`,
+        name: category.groupName,
+        groupName: category.groupName,
+        icon: category.icon,
+        maxNomineesPerUser: category.maxNomineesPerUser,
+      }]
+    })
+  })
   const canSubmitClip = computed(() => clipSubmissionsEnabled.value && previewPhase.value === 'nomination' && clipDsgvo.value)
   const clipSubmitStyle = computed(() => canSubmitClip.value ? "width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:13px;border:none;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 10px 24px rgba(124,86,196,.3);" : "width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:13px;border:none;background:#d1c4e9;color:#9e8cc5;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;cursor:not-allowed;")
 

frontend/src/components/home/useHomeParticipationState.ts

@@ -1,5 +1,6 @@
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
 
+import { watchAdminErrorToast } from '../../composables/useAdminToast'
 import { useAuthStore } from '../../stores/auth'
 import { useAwardsStore } from '../../stores/awards'
 import type { HomeDisplayCategory, HomeInteractionModalKind, HomePreviewPhase, HomeSuccessKind } from './homeLandingTypes'
@@ -47,6 +48,7 @@ export function useHomeParticipationState(params: {
   const submitted = ref(false)
   const submitting = ref(false)
   const formError = ref('')
+  watchAdminErrorToast(formError)
   const successKind = ref<null | HomeSuccessKind>(null)
   const clipCatIdx = ref(0)
   const clipDsgvo = ref(false)

frontend/src/components/home/useHomeParticipationSubmitActions.ts

@@ -139,8 +139,9 @@ export function useHomeParticipationSubmitActions(params: {
       return
     }
 
-    if (entries.some((entry) => entry.streamUrls.length > 3)) {
-      formError.value = 'Pro Kategorie sind maximal drei Links erlaubt.'
+    const overLimitEntry = entries.find((entry) => entry.streamUrls.length > nominationLinkLimitFor(displayCategories.value[entry.categoryIndex]))
+    if (overLimitEntry) {
+      formError.value = `Pro Kategorie sind maximal ${nominationLinkLimitFor(displayCategories.value[overLimitEntry.categoryIndex])} Links erlaubt.`
       return
     }
 
@@ -171,7 +172,7 @@ export function useHomeParticipationSubmitActions(params: {
         const category = displayCategories.value[entry.categoryIndex]
         return store.submitNomination({
           year: store.overview.year,
-          categoryId: Number(category.id),
+          categoryGroupName: category.groupName,
           twitchUserId: session.twitchUserId,
           nominations: entry.streamUrls.map((streamUrl) => ({ streamUrl })),
         })
@@ -260,6 +261,12 @@ function resolveSelectedCreator(category: HomeDisplayCategory | undefined, query
     ?? null
 }
 
+function nominationLinkLimitFor(category: HomeDisplayCategory | undefined) {
+  const rawLimit = category?.maxNomineesPerUser
+  const limit = typeof rawLimit === 'number' && Number.isFinite(rawLimit) ? rawLimit : 3
+  return Math.max(1, Math.min(10, Math.round(limit)))
+}
+
 function normalizeSearchValue(value: string) {
   return value.trim().toLowerCase()
 }

frontend/src/components/home/useHomePhasePresentation.ts

@@ -1,10 +1,10 @@
 import { computed, onBeforeUnmount, ref, type ComputedRef, type Ref } from 'vue'
 
-import type { HomeDisplayCategory, HomePreviewPhase } from './homeLandingTypes'
+import type { HomeLandingCategory, HomePreviewPhase } from './homeLandingTypes'
 
 export function useHomePhasePresentation(params: {
   previewPhase: Ref<HomePreviewPhase>
-  displayCategories: ComputedRef<HomeDisplayCategory[]>
+  landingCategories: ComputedRef<HomeLandingCategory[]>
   candidateCount: ComputedRef<number>
   publicStreamUrl: ComputedRef<string>
   showDate: ComputedRef<string>
@@ -15,7 +15,7 @@ export function useHomePhasePresentation(params: {
 }) {
   const {
     previewPhase,
-    displayCategories,
+    landingCategories,
     candidateCount,
     publicStreamUrl,
     showDate,
@@ -40,7 +40,7 @@ export function useHomePhasePresentation(params: {
   const streamLive = computed(() => showPhase.value && !Number.isNaN(showStartMs.value) && currentTimestamp.value >= showStartMs.value)
   const streamLocked = computed(() => !streamLive.value)
   const phaseCardTitle = computed(() => completedPhase.value ? 'Award-Jahr abgeschlossen' : nominationPhase.value ? 'Community Nominierung' : votingPhase.value ? 'Community Voting' : preparationPhase.value ? 'Aufbereitung bis zur Show' : 'Award Show Live')
-  const phaseCardDescription = computed(() => completedPhase.value ? 'Die grosse Award-Show ist beendet. Das Jahr ist abgeschlossen und alle Teilnahme-Aktionen sind gesperrt.' : nominationPhase.value ? 'Die Nominierungsphase läuft gerade. Reiche pro Kategorie bis zu drei Stream- oder Kanal-Links ein.' : votingPhase.value ? 'Die Nominierungsphase ist abgeschlossen.\nJetzt liegt es an dir: Stimme für deine Favoriten!' : preparationPhase.value ? 'Das Voting ist abgeschlossen. Das Team bereitet Clips, Ablauf und Gewinner-Momente für die Show vor.' : 'Die Award-Show läuft jetzt live. Zeit für Bühne, Gewinner:innen und ganz viel Glitzer.')
+  const phaseCardDescription = computed(() => completedPhase.value ? 'Die grosse Award-Show ist beendet. Das Jahr ist abgeschlossen und alle Teilnahme-Aktionen sind gesperrt.' : nominationPhase.value ? 'Die Nominierungsphase laeuft gerade. Reiche pro Kategorie die erlaubte Anzahl an Stream- oder Kanal-Links ein.' : votingPhase.value ? 'Die Nominierungsphase ist abgeschlossen.\nJetzt liegt es an dir: Stimme fuer deine Favoriten!' : preparationPhase.value ? 'Das Voting ist abgeschlossen. Das Team bereitet Clips, Ablauf und Gewinner-Momente fuer die Show vor.' : 'Die Award-Show laeuft jetzt live. Zeit fuer Buehne, Gewinner:innen und ganz viel Glitzer.')
   const phaseCardRange = computed(() => completedPhase.value ? `Finale abgeschlossen · ${formatShowDate()}` : nominationPhase.value ? `Nominierungszeitraum · ${formatRange('nomination')}` : votingPhase.value ? `Voting-Zeitraum · ${formatRange('voting')}` : preparationPhase.value ? `Aufbereitungszeit · ${formatRange('preparation')}` : `Live · ${formatShowDate()} · ${formatTimeLabel(showStartsAt.value)} Uhr`)
   const phaseStatusLabel = computed(() => completedPhase.value ? 'ABGESCHLOSSEN' : streamLive.value ? 'LIVE' : showPhase.value ? 'STARTET BALD' : preparationPhase.value ? 'IN AUFBEREITUNG' : 'AKTIV')
   const phaseStatusStyle = computed(() => completedPhase.value ? 'display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:#f1ecfb;color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:.5px;' : showPhase.value ? 'display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:#ffe5ec;color:#ec3b5a;font-size:11px;font-weight:700;letter-spacing:.5px;' : preparationPhase.value ? 'display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:#fff1d6;color:#b7791f;font-size:11px;font-weight:700;letter-spacing:.5px;' : 'display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:#e3f7ec;color:#1f9d5a;font-size:11px;font-weight:700;letter-spacing:.5px;')
@@ -56,11 +56,11 @@ export function useHomePhasePresentation(params: {
   const streamLockedTitle = computed(() => completedPhase.value ? 'Die Award-Show ist beendet' : 'Verfügbar, sobald die Show startet')
   const statOneValue = computed(() => completedPhase.value ? 'DONE' : streamLive.value ? 'LIVE' : String(candidateCount.value))
   const statOneLabel = computed(() => completedPhase.value ? 'Jahr-Status' : showPhase.value ? 'Show-Status' : 'Kandidat:innen')
-  const statTwoValue = computed(() => String(displayCategories.value.length))
+  const statTwoValue = computed(() => String(landingCategories.value.length))
   const statThreeValue = computed(() => currentYear.value || '—')
   const statThreeLabel = computed(() => 'Award-Jahr')
   const categoryIntroText = computed(() => {
-    const count = displayCategories.value.length
+    const count = landingCategories.value.length
     const countLabel = count === 1 ? 'Eine Kategorie' : `${count || 'Alle'} Kategorien`
     return `${countLabel}, eine Show, eine Szene. Stimm für deine Lieblings-VTuber ab und sei live dabei, wenn die Gewinner feststehen.`
   })

frontend/src/components/home/useHomeSocialPresentation.ts

@@ -27,7 +27,9 @@ export function useHomeSocialPresentation(siteContent: ComputedRef<OverviewRespo
   )
 
   const footerLinks = computed(() =>
-    (siteContent.value.footerLinks ?? []).filter((link) => link?.label && (isSafePublicUrl(link.url) || link.content)),
+    (siteContent.value.footerLinks ?? []).filter((link) =>
+      link?.label && (link.key === 'showacts' || isSafePublicUrl(link.url) || link.content),
+    ),
   )
 
   const privacyContentHtml = computed(() => privacyContentToHtml(siteContent.value.privacyPolicyContent || ''))

frontend/src/components/ui/NativeSelect.vue

@@ -35,29 +35,29 @@
     </button>
 
     <Teleport to="body">
-    <div v-if="open" :id="listboxId" class="native-select__menu" :style="menuStyle" role="listbox">
-      <template v-for="(option, index) in options" :key="optionKey(option.value)">
-        <p v-if="option.group && option.group !== options[index - 1]?.group" class="native-select__group">
-          {{ option.group }}
-        </p>
-        <button
-          type="button"
-          class="native-select__option"
-          :class="{
-            'native-select__option--active': index === activeIndex,
-            'native-select__option--selected': isSelected(option),
-          }"
-          :disabled="option.disabled"
-          role="option"
-          :aria-selected="isSelected(option)"
-          @mouseenter="setActiveIndex(index)"
-          @click="selectOption(option)"
-        >
-          <span class="native-select__option-label">{{ option.label }}</span>
-          <Check v-if="isSelected(option)" class="native-select__check" :size="18" :stroke-width="3" />
-        </button>
-      </template>
-    </div>
+      <div v-if="open" ref="menuEl" :id="listboxId" class="native-select__menu" :style="menuStyle" role="listbox">
+        <template v-for="(option, index) in options" :key="optionKey(option.value)">
+          <p v-if="option.group && option.group !== options[index - 1]?.group" class="native-select__group">
+            {{ option.group }}
+          </p>
+          <button
+            type="button"
+            class="native-select__option"
+            :class="{
+              'native-select__option--active': index === activeIndex,
+              'native-select__option--selected': isSelected(option),
+            }"
+            :disabled="option.disabled"
+            role="option"
+            :aria-selected="isSelected(option)"
+            @mouseenter="setActiveIndex(index)"
+            @click="selectOption(option)"
+          >
+            <span class="native-select__option-label">{{ option.label }}</span>
+            <Check v-if="isSelected(option)" class="native-select__check" :size="18" :stroke-width="3" />
+          </button>
+        </template>
+      </div>
     </Teleport>
   </div>
 </template>
@@ -92,6 +92,7 @@ const emit = defineEmits<{
 
 const rootEl = ref<HTMLElement | null>(null)
 const triggerEl = ref<HTMLButtonElement | null>(null)
+const menuEl = ref<HTMLElement | null>(null)
 const open = ref(false)
 const activeIndex = ref(0)
 const listboxId = `native-select-${Math.random().toString(36).slice(2)}`
@@ -240,7 +241,8 @@ function onButtonKeydown(event: KeyboardEvent) {
 }
 
 function onDocumentPointerDown(event: PointerEvent) {
-  if (!rootEl.value?.contains(event.target as Node)) {
+  const target = event.target as Node
+  if (!rootEl.value?.contains(target) && !menuEl.value?.contains(target)) {
     closeDropdown()
   }
 }