From 17134b3b821af88b564a651614e05ee5833bdead Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Mon, 22 Jun 2026 21:15:53 +0200
Subject: [PATCH] Restyle shell and home page with Jayuhime brand; add account
 and privacy modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaces amber/Manrope shell with sticky purple nav (Outfit + Fredoka)
- Adds account modal: profile info, Datenschutzerklärung, DSGVO Art. 17 delete flow
- Home: new hero with animated blobs/stars/countdown, inline vote picker, clip submit form, show-reminder, FAQ
- Switches base palette to purple (#f4eefb / #3f3556) and adds keyframe animations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/AppShell.vue |  311 +++++--
 frontend/src/style.css               |   42 +-
 frontend/src/views/HomeView.vue      | 1236 ++++++++++++++------------
 3 files changed, 918 insertions(+), 671 deletions(-)

diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
index 9aefcf6..c66ccc9 100644
--- a/frontend/src/components/AppShell.vue
+++ b/frontend/src/components/AppShell.vue
@@ -1,141 +1,282 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
-import { Star } from '@lucide/vue'
 
-import Button from './ui/Button.vue'
 import { useAuthStore } from '../stores/auth'
 import { usePhases } from '../composables/usePhases'
 
 const route = useRoute()
 const authStore = useAuthStore()
 const { infoForPhaseKey } = usePhases()
-const loginOpen = ref(false)
-const loginError = ref('')
+
 const loginForm = reactive({
   twitchUserId: 'jayuhime_demo',
   displayName: 'Jayuhime',
   role: 'viewer' as 'viewer' | 'admin',
 })
 
+const accountOpen = ref(false)
+const deleteConfirm = ref(false)
+const privacyOpen = ref(false)
+
+defineExpose({ privacyOpen })
+
 const navItems = [
   { label: 'Home', to: '/' },
   { label: 'Nominierung', to: '/nominations', requiresAuth: true, phase: 'nomination' },
   { label: 'Voting', to: '/voting', requiresAuth: true, phase: 'voting' },
   { label: 'Clips', to: '/clips', requiresAuth: true, phase: 'nomination' },
   { label: 'Gewinner', to: '/winners' },
-  { label: 'Admin', to: '/admin' },
 ]
 
-const currentLabel = computed(
-  () => navItems.find((item) => route.path === item.to || route.path.startsWith(`${item.to}/`))?.label ?? 'Awards',
-)
-
 const visibleNavItems = computed(() =>
   navItems.filter((item) => {
-    if (item.to === '/admin') return authStore.isAdmin
-    // Teilnahme-Seiten erst nach Login zeigen
     if (item.requiresAuth && !authStore.isLoggedIn) return false
-    // ... und nur, solange ihre Phase aktiv ist
     if (item.phase && infoForPhaseKey(item.phase).state !== 'active') return false
     return true
   }),
 )
 
-async function login(role: 'viewer' | 'admin') {
-  loginError.value = ''
-  loginForm.role = role
-
+async function doLogin() {
   try {
     await authStore.login(loginForm)
-    loginOpen.value = false
-  } catch (error) {
-    loginError.value = error instanceof Error ? error.message : 'Login fehlgeschlagen.'
-  }
+  } catch {}
 }
+
+async function doLogout() {
+  accountOpen.value = false
+  deleteConfirm.value = false
+  await authStore.logout()
+}
+
+function isActive(to: string) {
+  if (to === '/') return route.path === '/'
+  return route.path === to || route.path.startsWith(to + '/')
+}
+
+const linkBase = 'padding:9px 14px;border-radius:9px;font-family:\'Outfit\',sans-serif;font-size:14px;text-decoration:none;display:inline-block;transition:all .15s;'
+const linkActive = linkBase + 'background:rgba(139,108,219,.1);color:#5f44ad;font-weight:600;'
+const linkInactive = linkBase + 'background:transparent;color:#6f6685;font-weight:500;'
 </script>
 
 <template>
-  <div class="min-h-screen overflow-x-hidden bg-[linear-gradient(180deg,#fffdf9_0%,#fff6ee_38%,#fff9f4_100%)] text-slate-800">
-    <div class="pointer-events-none absolute inset-x-0 top-0 h-[520px] bg-[radial-gradient(circle_at_top_left,_rgba(237,214,167,0.38),transparent_34%),radial-gradient(circle_at_top_right,_rgba(210,195,255,0.32),transparent_28%)]" />
-    <div class="pointer-events-none absolute left-1/2 top-36 h-[560px] w-[560px] -translate-x-1/2 rounded-full border border-white/70 opacity-70 blur-3xl" />
+  <div style="min-height:100vh;overflow-x:hidden;font-family:'Outfit',sans-serif;line-height:1.5;background:#f4eefb;color:#3f3556;">
 
-    <div class="relative mx-auto w-full max-w-[1460px] px-4 py-4 sm:px-6 lg:px-10">
-      <div class="mb-5 flex items-center justify-between border-b border-black/8 px-2 pb-3 text-[11px] uppercase tracking-[0.34em] text-slate-500">
-        <span>VTuber Star Awards 2026</span>
-        <span>{{ currentLabel }}</span>
-      </div>
+    <!-- Nav -->
+    <nav style="position:sticky;top:0;z-index:50;background:rgba(248,243,254,.86);border-bottom:1px solid #ece2fa;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);">
+      <div style="max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:16px;">
 
-      <header
-        class="mb-10 flex flex-col gap-6 rounded-[24px] border border-white/70 bg-white/72 px-5 py-5 shadow-[0_18px_55px_rgba(93,63,135,0.08)] backdrop-blur lg:px-7"
-      >
-        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
-          <RouterLink to="/" class="flex items-center gap-4 text-slate-800 no-underline">
-            <div
-              class="grid h-12 w-12 place-items-center rounded-[1.1rem] bg-[linear-gradient(135deg,#f6e3b2,#f5c877)] text-amber-950 shadow-[0_16px_28px_rgba(245,200,119,0.35)]"
+        <!-- Logo -->
+        <RouterLink to="/" style="display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;">
+          <div style="width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#8b6cdb,#e7b13e);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 6px 14px rgba(139,108,219,.3);flex:none;">✦</div>
+          <span style="font-family:'Fredoka',sans-serif;font-size:17px;font-weight:600;color:#3f3556;">VTuber Star Award</span>
+        </RouterLink>
+
+        <!-- Links -->
+        <nav style="display:flex;align-items:center;gap:4px;margin-left:auto;">
+          <RouterLink
+            v-for="item in visibleNavItems"
+            :key="item.to"
+            :to="item.to"
+            :style="isActive(item.to) ? linkActive : linkInactive"
+          >{{ item.label }}</RouterLink>
+          <RouterLink
+            v-if="authStore.isAdmin"
+            to="/admin"
+            :style="route.path.startsWith('/admin') ? linkActive : linkInactive"
+          >Admin</RouterLink>
+        </nav>
+
+        <!-- Auth -->
+        <div style="display:flex;align-items:center;gap:8px;">
+          <template v-if="authStore.session">
+            <button
+              @click="accountOpen = true"
+              style="display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:none;background:rgba(139,108,219,.08);color:#6a4fb8;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;cursor:pointer;"
             >
-              <Star class="h-5 w-5" />
-            </div>
-            <div>
-              <strong class="block text-sm tracking-[0.35em]">VTUBER</strong>
-              <span class="block text-[11px] tracking-[0.45em] text-slate-500">STAR AWARDS</span>
-            </div>
-          </RouterLink>
+              <span style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;">
+                {{ authStore.session.displayName.charAt(0).toUpperCase() }}
+              </span>
+              @{{ authStore.session.twitchUserId }}
+            </button>
+          </template>
+          <template v-else>
+            <button
+              @click="doLogin"
+              style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:none;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 6px 18px rgba(124,86,196,.3);"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="white">
+                <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+              </svg>
+              Mit Twitch anmelden
+            </button>
+          </template>
+        </div>
+      </div>
+    </nav>
 
-          <div class="flex flex-wrap items-center gap-3">
-            <template v-if="authStore.session">
-              <div class="rounded-full border border-violet-100 bg-violet-50/70 px-4 py-2 text-sm text-violet-800">
-                {{ authStore.session.displayName }} · {{ authStore.session.role }}
+    <!-- Page content: home is full-width, all other views get a max-width container -->
+    <template v-if="route.name === 'home'">
+      <slot />
+    </template>
+    <template v-else>
+      <div style="max-width:1460px;margin:0 auto;padding:16px 16px 0;box-sizing:border-box;">
+        <slot />
+      </div>
+    </template>
+
+    <!-- Account modal -->
+    <Teleport to="body">
+      <div
+        v-if="accountOpen"
+        @click.self="accountOpen = false; deleteConfirm = false"
+        style="position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
+      >
+        <div style="position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);overflow:hidden;">
+          <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid #f1ecfb;">
+            <div>
+              <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Mein Profil</div>
+              <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;margin:0;color:#3f3556;">@{{ authStore.session?.twitchUserId }}</h2>
+            </div>
+            <button
+              @click="accountOpen = false; deleteConfirm = false"
+              style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;"
+            >✕</button>
+          </div>
+          <div style="padding:24px 28px;display:flex;flex-direction:column;gap:16px;">
+            <div style="display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:#f6f1fd;border:1px solid #ede4fb;">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="#9146FF">
+                <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+                <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+              </svg>
+              <span style="font-size:14px;color:#5f44ad;font-weight:500;">Angemeldet über Twitch</span>
+            </div>
+            <div style="padding:16px;border-radius:14px;background:#fafafa;border:1px solid #f0eafc;">
+              <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a99fc0;margin:0 0 10px;">Gespeicherte Daten</p>
+              <div style="display:flex;flex-direction:column;gap:7px;">
+                <div style="display:flex;justify-content:space-between;font-size:13.5px;">
+                  <span style="color:#6f6685;">Twitch-ID</span>
+                  <span style="font-weight:600;color:#3f3556;">@{{ authStore.session?.twitchUserId }}</span>
+                </div>
+                <div style="display:flex;justify-content:space-between;font-size:13.5px;">
+                  <span style="color:#6f6685;">Rolle</span>
+                  <span style="font-weight:700;color:#8b6cdb;text-transform:uppercase;font-size:11px;letter-spacing:1px;">{{ authStore.session?.role }}</span>
+                </div>
+                <div style="display:flex;justify-content:space-between;font-size:13.5px;">
+                  <span style="color:#6f6685;">Einreichungen</span>
+                  <span style="font-weight:600;color:#3f3556;">Clips, Votes, Nominierungen</span>
+                </div>
+                <div style="display:flex;justify-content:space-between;font-size:13.5px;">
+                  <span style="color:#6f6685;">Löschfrist</span>
+                  <span style="font-weight:600;color:#059669;">März 2027 (auto.)</span>
+                </div>
               </div>
-              <Button variant="ghost" @click="authStore.logout()">Abmelden</Button>
+            </div>
+            <button
+              @click="privacyOpen = true"
+              style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #ede4fb;background:#f9f6ff;color:#6a4fb8;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
+            >
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+              </svg>
+              Datenschutzerklärung lesen
+            </button>
+            <button
+              @click="doLogout"
+              style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
+            >
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                <polyline points="16 17 21 12 16 7"/>
+                <line x1="21" y1="12" x2="9" y2="12"/>
+              </svg>
+              Abmelden
+            </button>
+            <template v-if="!deleteConfirm">
+              <button
+                @click="deleteConfirm = true"
+                style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
+              >
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="3 6 5 6 21 6"/>
+                  <path d="M19 6l-1 14H6L5 6"/>
+                  <path d="M10 11v6M14 11v6"/>
+                </svg>
+                Meine Daten löschen (Löschrecht Art. 17 DSGVO)
+              </button>
             </template>
             <template v-else>
-              <Button variant="ghost" @click="loginOpen = !loginOpen">Einloggen</Button>
-              <Button class="gap-2" @click="login('viewer')">
-                <svg class="h-4 w-4 fill-current" viewBox="0 0 16 16"><path d="M2.5 0 0 2.5v11h3.5V16h2l2.5-2.5h3l5-5V0H2.5Zm12 8L12 10.5H8.5L6 13v-2.5H2.5V2h12v6Z"/><path d="M11.5 4h1.5v3.5h-1.5V4Zm-3.5 0h1.5v3.5H8V4Z"/></svg>
-                Anmelden mit Twitch
-              </Button>
+              <div style="padding:16px;border-radius:14px;background:#fff5f5;border:1.5px solid #fecdd3;">
+                <p style="font-size:13.5px;color:#9f1239;font-weight:600;margin:0 0 6px;">Alle deine Daten werden sofort gelöscht.</p>
+                <p style="font-size:12.5px;color:#e11d48;margin:0 0 14px;line-height:1.5;">Das umfasst deine Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
+                <div style="display:flex;gap:8px;">
+                  <button @click="deleteConfirm = false" style="flex:1;padding:10px;border-radius:10px;border:1px solid #e6dcf6;background:white;color:#6f6685;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;cursor:pointer;">Abbrechen</button>
+                  <button @click="doLogout" style="flex:1;padding:10px;border-radius:10px;border:none;background:#e11d48;color:white;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;cursor:pointer;">Jetzt löschen</button>
+                </div>
+              </div>
             </template>
           </div>
         </div>
+      </div>
+    </Teleport>
 
-        <div v-if="loginOpen && !authStore.session" class="rounded-[28px] border border-violet-100 bg-white/80 p-5">
-          <div class="grid gap-4 md:grid-cols-3">
-            <input v-model="loginForm.displayName" type="text" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Anzeigename" />
-            <input v-model="loginForm.twitchUserId" type="text" class="rounded-2xl border border-violet-200 px-4 py-3" placeholder="Twitch Nutzer-ID" />
-            <div class="flex flex-wrap gap-3">
-              <Button :disabled="authStore.loading" @click="login('viewer')">
-                {{ authStore.loading ? 'Loggt ein ...' : 'Viewer-Login' }}
-              </Button>
-              <Button variant="secondary" :disabled="authStore.loading" @click="login('admin')">Admin-Login</Button>
+    <!-- Privacy modal -->
+    <Teleport to="body">
+      <div
+        v-if="privacyOpen"
+        @click.self="privacyOpen = false"
+        style="position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
+      >
+        <div style="position:relative;width:100%;max-width:680px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
+          <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
+            <div>
+              <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Rechtliches</div>
+              <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">Datenschutzerklärung</h2>
             </div>
+            <button @click="privacyOpen = false" style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
           </div>
-          <p v-if="loginError" class="mt-3 text-sm text-rose-700">{{ loginError }}</p>
-        </div>
-
-        <div class="flex flex-col gap-3 border-t border-black/6 pt-3 lg:flex-row lg:items-center lg:justify-between">
-          <nav class="flex flex-wrap items-center gap-1 rounded-full border border-violet-100/80 bg-violet-50/50 p-1.5 text-sm font-medium text-slate-500">
-            <RouterLink
-              v-for="item in visibleNavItems"
-              :key="item.to"
-              :to="item.to"
-              class="rounded-full px-4 py-2 transition"
-              :class="route.path === item.to || route.path.startsWith(`${item.to}/`)
-                ? 'bg-white text-violet-800 shadow-[0_4px_14px_rgba(124,92,255,0.18)] ring-1 ring-violet-100'
-                : 'hover:bg-white/60 hover:text-violet-700'"
-            >
-              {{ item.label }}
-            </RouterLink>
-          </nav>
-
-          <div class="flex items-center gap-3 text-xs uppercase tracking-[0.24em] text-slate-500">
-            <span class="inline-flex h-2 w-2 rounded-full bg-emerald-500" />
-            Community Voting live
+          <div style="overflow-y:auto;padding:28px 32px;flex:1;display:flex;flex-direction:column;gap:22px;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.65;color:#6f6685;">
+            <div>
+              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Verantwortliche:r</h3>
+              <p style="margin:0;">VTuber Star Awards, vertreten durch Jayuhime. Kontakt: datenschutz@vtuber-star-awards.de</p>
+            </div>
+            <div>
+              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Welche Daten wir verarbeiten</h3>
+              <p style="margin:0 0 8px;">Bei Teilnahme (Voting, Nominierung, Clip-Einreichung) verarbeiten wir ausschließlich deine <strong style="color:#3f3556;">Twitch-User-ID</strong> (ein technischer Bezeichner, kein Klarname) sowie den Zeitstempel deiner Aktion.</p>
+              <p style="margin:0;">Für Show-Erinnerungen speichern wir optional deine E-Mail-Adresse.</p>
+            </div>
+            <div>
+              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Rechtsgrundlage</h3>
+              <p style="margin:0;">Verarbeitung auf Basis von <strong style="color:#3f3556;">Art. 6 Abs. 1 lit. b DSGVO</strong> (Vertragserfüllung / vorvertragliche Maßnahmen) — deine Teilnahme ist freiwillig. Für E-Mail-Erinnerungen gilt Art. 6 Abs. 1 lit. a DSGVO (Einwilligung).</p>
+            </div>
+            <div>
+              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Zweck der Verarbeitung</h3>
+              <p style="margin:0;">Durchführung des VTuber Star Awards: Sicherstellung fairer Abstimmung (1 Stimme / Person), Spam-Prävention, Admin-Review von Clip-Einreichungen.</p>
+            </div>
+            <div style="background:#fef9c3;border:1px solid #fef08a;border-radius:12px;padding:14px 16px;">
+              <h3 style="font-size:15px;font-weight:700;color:#854d0e;margin:0 0 6px;">Löschfristen</h3>
+              <p style="margin:0;color:#92400e;">Alle Teilnahmedaten (Twitch-IDs, Votes, Nominierungen, Clips) werden <strong>spätestens 6 Monate nach der Award-Show</strong> (d.&nbsp;h. bis März 2027) automatisch gelöscht. E-Mail-Adressen werden nach der Show sofort gelöscht.</p>
+            </div>
+            <div>
+              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Deine Rechte (Art. 15–22 DSGVO)</h3>
+              <ul style="margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;">
+                <li><strong style="color:#3f3556;">Auskunft</strong> — du kannst jederzeit erfragen, welche Daten wir über dich gespeichert haben.</li>
+                <li><strong style="color:#3f3556;">Löschung</strong> — du kannst die sofortige Löschung deiner Daten verlangen. Nutze den Button in deinem Profil oder schreibe uns.</li>
+                <li><strong style="color:#3f3556;">Widerspruch</strong> — du kannst der Verarbeitung jederzeit widersprechen.</li>
+                <li><strong style="color:#3f3556;">Portabilität</strong> — du kannst eine maschinenlesbare Kopie deiner Daten anfordern.</li>
+                <li><strong style="color:#3f3556;">Beschwerde</strong> — du hast das Recht, dich bei der zuständigen Aufsichtsbehörde zu beschweren (z.&nbsp;B. LfDI Baden-Württemberg).</li>
+              </ul>
+            </div>
+            <div>
+              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Weitergabe an Dritte</h3>
+              <p style="margin:0;">Keine Weitergabe an Dritte zu Werbezwecken. Technischer Hosting-Anbieter (EU-basiert) verarbeitet Daten als Auftragsverarbeiter gemäß Art. 28 DSGVO.</p>
+            </div>
+            <p style="font-size:12px;color:#a99fc0;margin:0;">Stand: Juni 2026 · Änderungen werden auf dieser Seite bekannt gegeben.</p>
           </div>
         </div>
-      </header>
+      </div>
+    </Teleport>
 
-      <slot />
-    </div>
   </div>
 </template>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4b4c633..ea84dc2 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,10 +1,12 @@
-@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Sacramento&display=swap");
 @import "tailwindcss";
 @import "primeicons/primeicons.css";
 
 @theme {
   --font-display: "Cormorant Garamond", serif;
-  --font-sans: "Manrope", sans-serif;
+  --font-sans: "Outfit", sans-serif;
+  --font-wordmark: "Fredoka", sans-serif;
+  --font-script: "Sacramento", cursive;
 }
 
 html,
@@ -15,15 +17,43 @@ body,
 
 body {
   font-family: var(--font-sans);
-  color: #1f2430;
-  background-color: #fffaf4;
+  color: #3f3556;
+  background-color: #f4eefb;
 }
 
 ::selection {
-  background: rgba(137, 92, 246, 0.18);
-  color: #2e1065;
+  background: rgba(139, 108, 219, 0.18);
+  color: #3f3556;
 }
 
 a {
   color: inherit;
 }
+
+details > summary {
+  list-style: none;
+}
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+@keyframes floaty {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-18px); }
+}
+@keyframes floaty2 {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-12px) rotate(6deg); }
+}
+@keyframes twinkle {
+  0%, 100% { opacity: .3; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.3); }
+}
+@keyframes pulseGlow {
+  0%, 100% { opacity: .55; }
+  50% { opacity: .9; }
+}
+@keyframes spinSlow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 1b95754..37ce75e 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,631 +1,707 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
-import Accordion from 'primevue/accordion'
-import AccordionContent from 'primevue/accordioncontent'
-import AccordionHeader from 'primevue/accordionheader'
-import AccordionPanel from 'primevue/accordionpanel'
-import {
-  ArrowRight,
-  Award,
-  BarChart3,
-  ChevronLeft,
-  ChevronRight,
-  Clapperboard,
-  Clock,
-  Crown,
-  Film,
-  Globe,
-  Heart,
-  Link as LinkIcon,
-  Megaphone,
-  Mic,
-  PartyPopper,
-  ShieldCheck,
-  Sparkles,
-  Star,
-  Trophy,
-  Users,
-  Video,
-  Vote,
-} from '@lucide/vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 
-import Button from '../components/ui/Button.vue'
-import Card from '../components/ui/Card.vue'
 import { useAwardsStore } from '../stores/awards'
 import { useAuthStore } from '../stores/auth'
-import { usePhases, type ActionKey, type PhaseState } from '../composables/usePhases'
-import landingHeroCharacter from '../assets/landing-hero-character.png'
-import stepNominate from '../assets/step-nominate.svg'
-import stepVote from '../assets/step-vote.svg'
-import stepWinners from '../assets/step-winners.svg'
+import heroImg from '../assets/landing-hero-character.png'
 
 const store = useAwardsStore()
 const authStore = useAuthStore()
-const router = useRouter()
-const { phaseInfo } = usePhases()
 
-/* ----- Phasen-Zustand je Aktion (Quelle: Season-Timeline) ----- */
-const phaseByAction = computed(() => ({
-  nominate: phaseInfo('nominate'),
-  vote: phaseInfo('vote'),
-  clip: phaseInfo('clip'),
-}))
+onMounted(() => void store.loadHomeData())
 
-function phaseBadge(state: PhaseState) {
-  if (state === 'active') return { label: 'Jetzt offen', class: 'bg-emerald-50 text-emerald-600' }
-  if (state === 'upcoming') return { label: 'Demnächst', class: 'bg-amber-50 text-amber-600' }
-  return { label: 'Abgeschlossen', class: 'bg-slate-100 text-slate-500' }
+/* ---- Countdown ---- */
+const pad = (n: number) => String(n).padStart(2, '0')
+const cdD = ref('00'); const cdH = ref('00'); const cdM = ref('00'); const cdS = ref('00')
+
+function tick() {
+  const target = new Date('2026-09-11T23:59:59').getTime()
+  const diff = Math.max(0, target - Date.now())
+  const s = Math.floor(diff / 1000)
+  cdD.value = pad(Math.floor(s / 86400))
+  cdH.value = pad(Math.floor((s % 86400) / 3600))
+  cdM.value = pad(Math.floor((s % 3600) / 60))
+  cdS.value = pad(s % 60)
 }
 
-function ctaLabel(key: ActionKey, openLabel: string) {
-  const info = phaseByAction.value[key]
-  if (info.open) return openLabel
-  if (info.state === 'upcoming') return `Ab ${info.startLabel}`
-  return 'Abgeschlossen'
-}
+let timer: ReturnType<typeof setInterval> | undefined
+onMounted(() => { tick(); timer = setInterval(tick, 1000) })
+onBeforeUnmount(() => { if (timer) clearInterval(timer) })
 
-onMounted(() => {
-  void store.loadHomeData()
-})
-
-const heroYear = computed(() => store.overview.year)
-const isLoggedIn = computed(() => authStore.isLoggedIn)
-
-/* ----- Login-Gate: ohne Twitch-Login kein Nominieren/Voten ----- */
-async function startLogin() {
+/* ---- Auth ---- */
+async function doLogin() {
   try {
     await authStore.login({ twitchUserId: 'jayuhime_demo', displayName: 'Jayuhime', role: 'viewer' })
-  } catch {
-    /* Fehler werden im Header-Login-Bereich angezeigt */
-  }
+  } catch {}
 }
 
-function goTo(path: string) {
-  if (isLoggedIn.value) {
-    void router.push(path)
-  } else {
-    void startLogin()
-  }
+function requireLogin(cb: () => void) {
+  if (authStore.isLoggedIn) { cb(); return }
+  doLogin().then(cb)
 }
 
-/* ----- Live Countdown bis zum Ende der aktiven Phase ----- */
-const now = ref(Date.now())
-let timer: ReturnType<typeof setInterval> | undefined
+/* ---- Vote modal ---- */
+const modal = ref<null | 'vote' | 'nominate' | 'show'>(null)
+const modalSubmitted = ref(false)
+const successKind = ref<'vote' | 'show' | null>(null)
+const activeCatIdx = ref(0)
+const votes = reactive<Record<number, number>>({})
 
-onMounted(() => {
-  timer = setInterval(() => {
-    now.value = Date.now()
-  }, 1000)
-})
-onBeforeUnmount(() => {
-  if (timer) clearInterval(timer)
-})
-
-const targetDate = computed(() => {
-  const active = store.overview.timeline.find((item) => item.state === 'active')
-  const raw = active?.endsAt ?? store.overview.showDate
-  const parsed = new Date(`${raw}T23:59:59`).getTime()
-  return Number.isNaN(parsed) ? now.value : parsed
-})
-
-const countdown = computed(() => {
-  const diff = Math.max(0, targetDate.value - now.value)
-  const totalSeconds = Math.floor(diff / 1000)
-  const days = Math.floor(totalSeconds / 86400)
-  const hours = Math.floor((totalSeconds % 86400) / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-  const pad = (value: number) => value.toString().padStart(2, '0')
-  return [
-    { label: 'Tage', value: pad(days) },
-    { label: 'Std', value: pad(hours) },
-    { label: 'Min', value: pad(minutes) },
-    { label: 'Sek', value: pad(seconds) },
-  ]
-})
-
-/* ----- Statische Showcase-Daten ----- */
-const trustItems = [
-  { icon: Sparkles, title: '100% Community Powered', text: 'Deine Stimme entscheidet!' },
-  { icon: ShieldCheck, title: 'Fair & Transparent', text: 'Verifiziert. Sicher. Vertrauenswürdig.' },
-  { icon: Video, title: 'Live auf YouTube & Twitch', text: 'Die große Award Show.' },
-  { icon: Globe, title: 'Global Celebration', text: 'Alle VTuber. Alle Fans.' },
+const CATS = [
+  { id: 'year',      name: 'VTuber des Jahres',   icon: '✦' },
+  { id: 'newcomer',  name: 'Best Newcomer',        icon: '★' },
+  { id: 'design',    name: 'Model & Design',       icon: '✧' },
+  { id: 'music',     name: 'Gesang & Musik',       icon: '♬' },
+  { id: 'gaming',    name: 'Best Gaming',          icon: '⚔' },
+  { id: 'variety',   name: 'Best Variety',         icon: '☻' },
+  { id: 'community', name: 'Community Liebling',   icon: '♡' },
+  { id: 'collab',    name: 'Best Collab & Duo',    icon: '✶' },
 ]
 
-const steps = [
-  {
-    image: stepNominate,
-    title: 'Nominieren',
-    text: 'Nominiere deine Favoriten in jeder Kategorie. Pro Kategorie 3 Nominierungen.',
-  },
-  {
-    image: stepVote,
-    title: 'Voten',
-    text: 'Die Community stimmt über ihre Top-Favoriten ab. Nur 1 Stimme pro Kategorie.',
-  },
-  {
-    image: stepWinners,
-    title: 'Die Besten',
-    text: 'Die Stimmen werden gezählt und die Gewinner live in der Show gekürt!',
-  },
-]
-
-const categories = [
-  { icon: Star, name: 'VTuber des Jahres', text: 'Die Auszeichnung des Abends – für die, die alle verzaubert hat.', accent: 'bg-violet-100 text-violet-600' },
-  { icon: Mic, name: 'Bestes Live Event', text: 'Konzerte, Watchalongs und Shows, die niemand vergisst.', accent: 'bg-fuchsia-100 text-fuchsia-600' },
-  { icon: Video, name: 'Streamer:in des Jahres', text: 'Für die Streams, in denen man einfach hängen bleibt.', accent: 'bg-sky-100 text-sky-600' },
-  { icon: Heart, name: 'Beste Collab', text: 'Wenn zwei Welten kollidieren und Magie entsteht.', accent: 'bg-rose-100 text-rose-500' },
-  { icon: Clapperboard, name: 'Best Content Creator', text: 'Für kreative Köpfe, die immer wieder überraschen.', accent: 'bg-amber-100 text-amber-600' },
-  { icon: Film, name: 'Clip des Jahres', text: 'Der eine Clip, den du in jeden Chat spammst.', accent: 'bg-emerald-100 text-emerald-600' },
-]
-
-const winners = [
-  { name: 'Hoshimi Miyu', slug: '@HoshimiMiyu', category: 'VTuber des Jahres', year: 2025, current: false },
-  { name: 'Kurainu 3D Live', slug: '@Kurainu', category: 'Best Live Event', year: 2025, current: false },
-  { name: 'Shiro Ch.', slug: '@ShiroCh', category: 'Streamer:in des Jahres', year: 2025, current: true },
-  { name: 'Luna & Yuki', slug: '@LunaYuki', category: 'Beste Collab', year: 2025, current: false },
-  { name: 'Miyu Ch.', slug: '@MiyuCh', category: 'Best Content Creator', year: 2025, current: false },
-  { name: 'Pyonkichi Kingdom', slug: '@PyonkichiKingdom', category: 'Clip des Jahres', year: 2024, current: false },
-]
-
-const winnerGradients = [
-  'from-violet-200 to-fuchsia-100',
-  'from-indigo-200 to-violet-100',
-  'from-sky-200 to-violet-100',
-  'from-rose-200 to-amber-100',
-  'from-violet-200 to-amber-100',
-  'from-fuchsia-200 to-rose-100',
-]
-
-const participation: Array<{
-  key: ActionKey
-  icon: typeof Sparkles
-  title: string
-  text: string
-  to: string
-  cta: string
-  accent: string
-}> = [
-  { key: 'nominate', icon: Sparkles, title: 'Nominieren', text: 'Trag bis zu 3 Favoriten pro Kategorie ein und bring sie auf die Bühne.', to: '/nominations', cta: 'Jetzt nominieren', accent: 'from-violet-200 to-fuchsia-100 text-violet-600' },
-  { key: 'vote', icon: Heart, title: 'Voten', text: 'Eine Stimme pro Kategorie – entscheide mit, wer am Ende gewinnt.', to: '/voting', cta: 'Jetzt voten', accent: 'from-rose-200 to-amber-100 text-rose-500' },
-  { key: 'clip', icon: Film, title: 'Clip einreichen', text: 'Teile den Link zu deinem Lieblings-Clip fürs „Clip des Jahres".', to: '/clips', cta: 'Clip einreichen', accent: 'from-sky-200 to-violet-100 text-sky-600' },
-]
-
-const adminMetrics = [
-  { label: 'Nominierungen', value: '12.341', delta: '+12,4% vs. gestern' },
-  { label: 'Votes', value: '582.731', delta: '+8,7% vs. gestern' },
-  { label: 'Nutzer', value: '98.452', delta: '+9,2% vs. gestern' },
-  { label: 'Kategorien', value: '28', delta: 'aktiv' },
-  { label: 'Reviews offen', value: '47', delta: '+14 neu' },
-]
-
-const adminTopVotes = [
-  { name: 'VTuber des Jahres', votes: 186321, pct: 100 },
-  { name: 'Best Streamer', votes: 142553, pct: 77 },
-  { name: 'Beste Collab', votes: 112968, pct: 61 },
-  { name: 'Best Content Creator', votes: 78442, pct: 42 },
-  { name: 'Best Live Event', votes: 62517, pct: 34 },
-]
-
-/* ----- Gewinner-Archiv Carousel ----- */
-const carousel = ref<HTMLElement | null>(null)
-function scrollCarousel(direction: number) {
-  carousel.value?.scrollBy({ left: direction * 320, behavior: 'smooth' })
+const NOMS: Record<string, [string, string][]> = {
+  year:      [['Akari ✩', '@akari_vt'], ['Nox ✦', '@nox_live'], ['Mochi ♡', '@mochi_mochi'], ['Yuki Stern', '@yuki_sings']],
+  newcomer:  [['Nox ✦', '@nox_live'], ['Pixel ⚔', '@pixelpunk'], ['Lumi', '@lumi_vt'], ['Sora Blau', '@sora_blau']],
+  design:    [['Mochi ♡', '@mochi_mochi'], ['Akari ✩', '@akari_vt'], ['Hana ♡', '@hana_hearts'], ['Rei Velvet', '@rei_velvet']],
+  music:     [['Yuki Stern', '@yuki_sings'], ['Lumi', '@lumi_vt'], ['Melo Diva', '@melo_diva'], ['Hana ♡', '@hana_hearts']],
+  gaming:    [['Pixel ⚔', '@pixelpunk'], ['Nox ✦', '@nox_live'], ['Kotaro', '@kotaro_plays'], ['Bit Knight', '@bit_knight']],
+  variety:   [['Akari ✩', '@akari_vt'], ['Kotaro', '@kotaro_plays'], ['Mochi ♡', '@mochi_mochi'], ['Taro Chaos', '@taro_chaos']],
+  community: [['Hana ♡', '@hana_hearts'], ['Akari ✩', '@akari_vt'], ['Lumi', '@lumi_vt'], ['Sora Blau', '@sora_blau']],
+  collab:    [['Akari & Nox', '@akari_vt'], ['Mochi & Hana', '@mochi_mochi'], ['Pixel & Kotaro', '@pixelpunk'], ['Yuki & Melo', '@yuki_sings']],
 }
 
-const winnersScopeYear = computed(() => heroYear.value - 1)
+const activeCat = computed(() => CATS[activeCatIdx.value])
+const activeNoms = computed(() => NOMS[activeCat.value.id] ?? [])
+const voteCount = computed(() => Object.keys(votes).length)
+
+function openModal(kind: 'vote' | 'nominate' | 'show') {
+  modal.value = kind
+  modalSubmitted.value = false
+  successKind.value = null
+}
+function closeModal() { modal.value = null; modalSubmitted.value = false }
+function pickNominee(catId: string, idx: number) { votes[CATS.findIndex(c => c.id === catId)] = idx }
+function submitVote() {
+  if (voteCount.value === 0) return
+  successKind.value = 'vote'
+  modalSubmitted.value = true
+}
+
+/* ---- Show reminder ---- */
+const reminderEmail = ref('')
+function submitReminder() { successKind.value = 'show'; modalSubmitted.value = true }
+
+/* ---- Clip form ---- */
+const clipCatIdx = ref(0)
+const clipUrl = ref('')
+const clipNom = ref('')
+const clipDesc = ref('')
+const clipDsgvo = ref(false)
+const clipSubmitted = ref(false)
+const homePrivacyOpen = ref(false)
+
+function submitClip() {
+  if (!clipDsgvo.value || !clipUrl.value.trim()) return
+  clipSubmitted.value = true
+}
+
+/* ---- FAQ ---- */
+const faq = [
+  {
+    q: 'Wer darf abstimmen?',
+    a: 'Alle, die einen Twitch-Account haben — einmal einloggen, fertig. Kein Extra-Konto, kein Newsletter-Abo, kein Papierkram.',
+  },
+  {
+    q: 'Wie oft kann ich abstimmen?',
+    a: 'Einmal pro Kategorie. Du kannst deine Stimme bis zum Ende der Voting-Phase jederzeit ändern — also kein Stress, wenn du dich umentscheidest.',
+  },
+  {
+    q: 'Wie werden die Gewinner ermittelt?',
+    a: 'Ausschließlich durch eure Stimmen. Keine Jury, keine versteckten Gewichtungen — wer die meisten Votes hat, gewinnt.',
+  },
+  {
+    q: 'Kann ich eine VTuberin/einen VTuber selbst nominieren?',
+    a: 'Ja! Während der Nominierungsphase kannst du beliebige Vorschläge einreichen. Das Jayuhime-Team kuratiert die finale Liste, um Duplikate und Spam herauszufiltern.',
+  },
+  {
+    q: 'Was passiert mit meinen Daten?',
+    a: 'Wir speichern nur deine Twitch-User-ID und die Zeitstempel deiner Aktionen. Alle Daten werden spätestens 6 Monate nach der Award-Show automatisch gelöscht. Keine Weitergabe an Dritte.',
+  },
+]
 </script>
 
 <template>
-  <div class="space-y-24 pb-20">
-    <!-- ============ HERO ============ -->
-    <section class="grid items-stretch gap-8 lg:grid-cols-[1.02fr_1.18fr]">
-      <div class="flex flex-col justify-center space-y-8">
-        <p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">
-          Die große Community-Auszeichnung
-        </p>
-        <div class="space-y-3">
-          <h1 class="font-[Cormorant_Garamond] text-6xl leading-[0.86] text-violet-800 sm:text-7xl xl:text-[6.4rem]">
-            VTUBER<br />STAR AWARDS
-          </h1>
-          <div class="h-1.5 w-48 rounded-full bg-[linear-gradient(90deg,#c4b5fd,#f5d0fe,#fecdd3,#fde68a,#bbf7d0,#bae6fd)]" />
-          <p class="font-[Cormorant_Garamond] text-3xl italic text-violet-500">
-            Presented by Jayuhime <Sparkles class="-mt-1 inline h-6 w-6 text-amber-400" />
-          </p>
-        </div>
-        <p class="max-w-lg text-lg leading-8 text-slate-600">
-          VTuber sind Künstler:innen, Entertainer und Geschichtenerzähler:innen zugleich. Hier feiern wir genau diese
-          Kreativität – nominiere deine Favoriten, vote für die Besten und sei dabei, wenn die Stars gekürt werden!
-        </p>
+  <!-- ===== HERO ===== -->
+  <header style="position:relative;overflow:hidden;min-height:780px;">
+    <!-- Accent bar -->
+    <div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff5fa2,#a06bff,#5fa2ff);z-index:20;"></div>
 
-        <!-- Aktuelle Phase Card -->
-        <Card class="p-7">
-          <div class="flex items-center justify-between">
-            <p class="text-xs font-semibold uppercase tracking-[0.3em] text-violet-500">Aktuelle Phase</p>
-            <span class="inline-flex items-center gap-2 rounded-full bg-rose-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-rose-500">
-              <span class="inline-flex h-2 w-2 animate-pulse rounded-full bg-rose-500" /> Live
-            </span>
+    <!-- Glow blobs -->
+    <div style="position:absolute;width:640px;height:640px;top:-80px;right:calc(50% - 190px);border-radius:50%;background:radial-gradient(circle,rgba(255,180,220,.48) 0%,transparent 70%);filter:blur(40px);pointer-events:none;animation:pulseGlow 7s ease-in-out infinite;"></div>
+    <div style="position:absolute;width:480px;height:480px;bottom:-120px;left:-60px;border-radius:50%;background:radial-gradient(circle,rgba(196,178,246,.4) 0%,transparent 70%);filter:blur(32px);pointer-events:none;animation:floaty2 9s ease-in-out infinite;"></div>
+
+    <!-- Confetti stars -->
+    <div style="position:absolute;top:18%;left:8%;font-size:13px;color:#d0b4f5;animation:twinkle 3.2s ease-in-out infinite;pointer-events:none;">✦</div>
+    <div style="position:absolute;top:32%;left:14%;font-size:9px;color:#f2b3d4;animation:twinkle 4.5s 1s ease-in-out infinite;pointer-events:none;">★</div>
+    <div style="position:absolute;top:60%;left:6%;font-size:11px;color:#b9a3e8;animation:twinkle 5.1s 0.5s ease-in-out infinite;pointer-events:none;">✧</div>
+
+    <!-- Character image -->
+    <img
+      :src="heroImg"
+      alt=""
+      aria-hidden="true"
+      style="position:absolute;top:-10px;right:max(30px,calc(50% - 560px));height:1010px;width:auto;object-fit:contain;pointer-events:none;z-index:1;animation:floaty 6s ease-in-out infinite;"
+    />
+
+    <!-- Left gradient overlay -->
+    <div style="position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(100deg,#f6f0fe 0%,rgba(246,240,254,.86) 26%,rgba(246,240,254,.3) 46%,transparent 62%);"></div>
+
+    <!-- Content -->
+    <div style="position:relative;z-index:10;max-width:1200px;margin:0 auto;padding:80px 24px 96px;min-height:780px;display:flex;flex-direction:column;justify-content:center;">
+      <!-- H1 -->
+      <h1 style="margin:0;line-height:.92;letter-spacing:-.02em;">
+        <span style="display:block;font-family:'Fredoka',sans-serif;font-size:clamp(56px,8.4vw,116px);color:#5f44ad;font-weight:700;">VTUBER</span>
+        <span style="display:block;font-family:'Fredoka',sans-serif;font-size:clamp(56px,8.4vw,116px);font-weight:700;background:linear-gradient(95deg,#eeb24a,#d9942a);-webkit-background-clip:text;background-clip:text;color:transparent;">STAR AWARDS</span>
+      </h1>
+      <span style="font-family:'Sacramento',cursive;font-size:clamp(32px,3.8vw,48px);color:#8a6fd0;display:block;margin:8px 0 32px;transform:rotate(-3deg);transform-origin:left center;">Presented by Jayuhime</span>
+
+      <!-- Phase card -->
+      <div style="background:rgba(255,255,255,.46);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;padding:24px;border:1px solid rgba(255,255,255,.7);max-width:440px;box-shadow:0 8px 32px rgba(139,108,219,.12);">
+        <div style="display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:linear-gradient(135deg,#ff5fa2,#a06bff);color:#fff;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:14px;">✦ {{ store.overview.currentPhase }}</div>
+        <h2 style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:#3f3556;margin:0 0 8px;">Abstimmen · Bis 11. September</h2>
+        <p style="font-size:14px;color:#7d7491;margin:0 0 20px;line-height:1.55;">Deine Stimme entscheidet, wer auf die Bühne darf. Jede Kategorie zählt.</p>
+
+        <!-- Countdown -->
+        <div style="display:flex;align-items:center;background:rgba(255,255,255,.6);border-radius:14px;overflow:hidden;border:1px solid #ede4fb;margin-bottom:16px;">
+          <div style="flex:1;text-align:center;padding:12px 4px 10px;border-right:1px solid #eee4fb;">
+            <div style="font-family:'Fredoka',sans-serif;font-size:32px;font-weight:700;color:#5a4a8a;line-height:1;">{{ cdD }}</div>
+            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a98ddb;margin-top:4px;">Tage</div>
           </div>
-          <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ store.overview.currentPhase }}</h2>
-          <p class="mt-2 text-sm text-slate-600">
-            Die Nominierungsphase ist abgeschlossen. Jetzt liegt es an dir: Stimme für deine Favoriten!
-          </p>
-
-          <div class="mt-6 grid grid-cols-4 gap-3">
-            <div
-              v-for="unit in countdown"
-              :key="unit.label"
-              class="rounded-2xl border border-violet-100 bg-violet-50/70 py-4 text-center"
-            >
-              <strong class="block font-[Cormorant_Garamond] text-3xl text-violet-800">{{ unit.value }}</strong>
-              <span class="text-[10px] uppercase tracking-[0.2em] text-slate-500">{{ unit.label }}</span>
-            </div>
+          <div style="flex:1;text-align:center;padding:12px 4px 10px;border-right:1px solid #eee4fb;">
+            <div style="font-family:'Fredoka',sans-serif;font-size:32px;font-weight:700;color:#5a4a8a;line-height:1;">{{ cdH }}</div>
+            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a98ddb;margin-top:4px;">Std</div>
           </div>
-
-          <div class="mt-6 flex flex-wrap gap-3">
-            <Button
-              size="lg"
-              class="gap-2"
-              :disabled="!phaseByAction.nominate.open"
-              @click="goTo('/nominations')"
-            >
-              <Sparkles class="h-4 w-4" /> {{ ctaLabel('nominate', 'Jetzt nominieren') }}
-            </Button>
-            <Button
-              variant="secondary"
-              size="lg"
-              class="gap-2"
-              :disabled="!phaseByAction.vote.open"
-              @click="goTo('/voting')"
-            >
-              <Star class="h-4 w-4" /> {{ ctaLabel('vote', 'Jetzt voten') }}
-            </Button>
+          <div style="flex:1;text-align:center;padding:12px 4px 10px;border-right:1px solid #eee4fb;">
+            <div style="font-family:'Fredoka',sans-serif;font-size:32px;font-weight:700;color:#5a4a8a;line-height:1;">{{ cdM }}</div>
+            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a98ddb;margin-top:4px;">Min</div>
           </div>
-        </Card>
-      </div>
-
-      <!-- Hero Keyvisual -->
-      <Card class="relative h-full overflow-hidden p-0">
-        <div class="relative h-full min-h-[560px] overflow-hidden bg-[linear-gradient(145deg,#f6efff_0%,#d9c9f2_48%,#7b61aa_100%)] sm:min-h-[640px]">
-          <div class="absolute inset-0 bg-[radial-gradient(circle_at_76%_16%,rgba(255,255,255,0.58),transparent_34%),radial-gradient(circle_at_18%_72%,rgba(250,204,21,0.2),transparent_32%),linear-gradient(135deg,rgba(64,34,112,0.28),rgba(64,34,112,0.02)_46%,rgba(255,255,255,0.22))]" />
-          <div class="absolute -bottom-16 -left-16 h-64 w-64 rounded-full bg-amber-200/25 blur-3xl" />
-          <div class="absolute right-16 top-20 h-44 w-44 rounded-full bg-white/30 blur-3xl" />
-
-          <img
-            :src="landingHeroCharacter"
-            alt="VTuber Award Host mit Trophäe"
-            class="absolute right-[-18px] top-8 z-10 h-[470px] max-w-none object-contain drop-shadow-[0_30px_50px_rgba(32,13,77,0.38)] sm:right-6 sm:top-4 sm:h-[600px] lg:right-8 xl:right-12 xl:h-[640px]"
-          />
-
-          <div class="absolute bottom-0 left-0 right-0 z-20 bg-gradient-to-t from-[#241049]/92 via-[#241049]/48 to-transparent px-6 pb-6 pt-28 sm:px-8 sm:pb-8">
-            <div class="max-w-[330px] rounded-[24px] border border-white/25 bg-white/82 p-5 shadow-[0_24px_70px_rgba(32,13,77,0.28)] backdrop-blur">
-              <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-violet-500">Host</p>
-              <p class="mt-1 flex items-center gap-2 font-[Cormorant_Garamond] text-3xl text-violet-800">
-                Jayuhime <Sparkles class="h-5 w-5 text-amber-400" />
-              </p>
-              <p class="text-sm text-slate-600">VTuber &amp; Award Host</p>
-              <div class="mt-4 grid grid-cols-3 gap-2 text-violet-600">
-                <span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
-                  <Video class="h-4 w-4" />
-                </span>
-                <span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
-                  <PartyPopper class="h-4 w-4" />
-                </span>
-                <span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
-                  <Trophy class="h-4 w-4" />
-                </span>
-              </div>
-            </div>
+          <div style="flex:1;text-align:center;padding:12px 4px 10px;">
+            <div style="font-family:'Fredoka',sans-serif;font-size:32px;font-weight:700;color:#c77ab0;line-height:1;">{{ cdS }}</div>
+            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a98ddb;margin-top:4px;">Sek</div>
           </div>
         </div>
-      </Card>
-    </section>
 
-    <!-- ============ TRUST BAR ============ -->
-    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <Card v-for="item in trustItems" :key="item.title" class="flex items-center gap-4 p-5">
-        <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[linear-gradient(135deg,#efe6ff,#fff1da)] text-violet-600">
-          <component :is="item.icon" class="h-5 w-5" />
-        </span>
-        <div>
-          <p class="text-sm font-semibold uppercase tracking-[0.15em] text-violet-700">{{ item.title }}</p>
-          <p class="text-sm text-slate-500">{{ item.text }}</p>
-        </div>
-      </Card>
-    </section>
-
-    <!-- ============ SO FUNKTIONIERT'S ============ -->
-    <section class="space-y-7 rounded-[32px] border border-violet-100/80 bg-white/72 px-6 py-8 shadow-[0_28px_90px_rgba(124,92,255,0.09)] sm:px-8">
-      <div class="text-center">
-        <p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">So funktioniert's</p>
-      </div>
-      <div class="grid gap-8 md:grid-cols-3">
-        <div v-for="(step, index) in steps" :key="step.title" class="relative">
-          <img :src="step.image" alt="" aria-hidden="true" class="mx-auto h-40 w-full max-w-[292px] object-contain" />
-          <div
-            v-if="index < steps.length - 1"
-            class="pointer-events-none absolute right-[-48px] top-16 hidden h-14 w-24 text-violet-300 md:block"
-            aria-hidden="true"
-          >
-            <svg viewBox="0 0 110 54" class="h-full w-full fill-none">
-              <path d="M8 36C38 10 69 8 97 31" stroke="currentColor" stroke-width="6" stroke-linecap="round" opacity=".58" />
-              <path d="M96 31l-17-3 8 16 9-13z" fill="currentColor" opacity=".68" />
-            </svg>
-          </div>
-          <div class="mt-4 flex items-start gap-4">
-            <span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border-2 border-violet-200 bg-white font-[Cormorant_Garamond] text-2xl font-semibold text-violet-700">
-              {{ index + 1 }}
-            </span>
-            <div>
-              <h3 class="font-[Cormorant_Garamond] text-3xl font-semibold uppercase tracking-[0.02em] text-violet-800">{{ step.title }}</h3>
-              <p class="mt-2 max-w-xs text-base leading-8 text-slate-600">{{ step.text }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- ============ BELIEBTE KATEGORIEN ============ -->
-    <section class="space-y-8">
-      <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
-        <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Beliebte Kategorien</h2>
-        <RouterLink to="/voting" class="inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
-          Alle Kategorien ansehen <ArrowRight class="h-4 w-4" />
-        </RouterLink>
-      </div>
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
-        <Card v-for="category in categories" :key="category.name" class="group p-6 transition hover:-translate-y-1 hover:shadow-[0_30px_70px_rgba(124,92,255,0.18)]">
-          <span :class="['grid h-14 w-14 place-items-center rounded-2xl', category.accent]">
-            <component :is="category.icon" class="h-6 w-6" />
-          </span>
-          <h3 class="mt-5 text-base font-semibold text-violet-800">{{ category.name }}</h3>
-          <p class="mt-2 text-xs leading-6 text-slate-500">{{ category.text }}</p>
-          <RouterLink to="/voting" class="mt-4 inline-flex items-center gap-1 text-xs font-semibold text-amber-500 group-hover:gap-2">
-            Top 10 ansehen <ArrowRight class="h-3.5 w-3.5" />
-          </RouterLink>
-        </Card>
-      </div>
-    </section>
-
-    <!-- ============ GEWINNER ARCHIV ============ -->
-    <section class="space-y-8">
-      <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
-        <div class="flex items-center gap-3">
-          <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Gewinner Archiv</h2>
-        </div>
-        <div class="flex items-center gap-3">
-          <RouterLink to="/winners" class="inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
-            Alle Jahre ansehen <ArrowRight class="h-4 w-4" />
-          </RouterLink>
-          <div class="flex gap-2">
-            <button class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 bg-white text-violet-600 transition hover:bg-violet-50" @click="scrollCarousel(-1)">
-              <ChevronLeft class="h-4 w-4" />
-            </button>
-            <button class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 bg-white text-violet-600 transition hover:bg-violet-50" @click="scrollCarousel(1)">
-              <ChevronRight class="h-4 w-4" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div ref="carousel" class="flex gap-4 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        <Card
-          v-for="(winner, index) in winners"
-          :key="winner.slug"
-          class="w-[230px] shrink-0 overflow-hidden p-0"
+        <!-- CTA -->
+        <button
+          @click="requireLogin(() => openModal('vote'))"
+          style="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);"
         >
-          <div :class="['relative h-[230px] bg-gradient-to-br', winnerGradients[index % winnerGradients.length]]">
-            <div class="absolute inset-0 grid place-items-center text-white/70">
-              <Star class="h-12 w-12" />
-            </div>
-            <span
-              v-if="winner.current"
-              class="absolute left-3 top-3 rounded-full bg-violet-600 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-white"
-            >
-              {{ winner.year }}
-            </span>
-            <span
-              v-else
-              class="absolute left-3 top-3 inline-flex items-center gap-1 rounded-full bg-[linear-gradient(135deg,#ffd97a,#f6b938)] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-amber-950"
-            >
-              <Crown class="h-3 w-3" /> Winner
-            </span>
-          </div>
-          <div class="p-4">
-            <p class="text-[10px] uppercase tracking-[0.2em] text-violet-400">{{ winner.category }}</p>
-            <p class="mt-1 font-[Cormorant_Garamond] text-2xl text-violet-800">{{ winner.name }}</p>
-            <p class="text-sm text-slate-500">{{ winner.slug }}</p>
-          </div>
-        </Card>
-      </div>
-      <p class="text-xs text-slate-400">Archiv-Stand: Gewinner aus {{ winnersScopeYear }} · Bilder sind Platzhalter.</p>
-    </section>
-
-    <!-- ============ MITMACHEN (Teaser-CTAs) ============ -->
-    <section class="space-y-8">
-      <div class="text-center">
-        <p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">Mach mit</p>
-        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Werde Teil der Show</h2>
-      </div>
-
-      <div class="grid gap-5 md:grid-cols-3">
-        <Card
-          v-for="action in participation"
-          :key="action.to"
-          class="flex flex-col p-7"
-          :class="phaseByAction[action.key].open ? 'ring-1 ring-violet-200/70' : 'opacity-95'"
-        >
-          <div class="flex items-start justify-between">
-            <span :class="['grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br', action.accent]">
-              <component :is="action.icon" class="h-6 w-6" />
-            </span>
-            <span :class="['rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.15em]', phaseBadge(phaseByAction[action.key].state).class]">
-              {{ phaseBadge(phaseByAction[action.key].state).label }}
-            </span>
-          </div>
-          <h3 class="mt-5 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ action.title }}</h3>
-          <p class="mt-2 flex-1 text-sm leading-7 text-slate-600">{{ action.text }}</p>
-
-          <!-- Phase offen -->
-          <template v-if="phaseByAction[action.key].open">
-            <Button v-if="isLoggedIn" class="mt-6 w-full gap-2" @click="goTo(action.to)">
-              {{ action.cta }} <ArrowRight class="h-4 w-4" />
-            </Button>
-            <Button v-else variant="ghost" class="mt-6 w-full gap-2 border border-violet-200" @click="startLogin">
-              <svg class="h-4 w-4 fill-current" viewBox="0 0 16 16"><path d="M2.5 0 0 2.5v11h3.5V16h2l2.5-2.5h3l5-5V0H2.5Zm12 8L12 10.5H8.5L6 13v-2.5H2.5V2h12v6Z" /><path d="M11.5 4h1.5v3.5h-1.5V4Zm-3.5 0h1.5v3.5H8V4Z" /></svg>
-              Mit Twitch anmelden
-            </Button>
-          </template>
-          <!-- Phase noch nicht offen / abgeschlossen -->
-          <div v-else class="mt-6 flex items-center justify-center gap-2 rounded-xl bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-400">
-            <Clock class="h-4 w-4" />
-            {{ ctaLabel(action.key, action.cta) }}
-          </div>
-        </Card>
-      </div>
-    </section>
-
-    <!-- ============ FAQ / COMMUNITY / SHARE ============ -->
-    <section class="grid gap-6 lg:grid-cols-3">
-      <Card class="p-7">
-        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-amber-500">FAQ – Häufige Fragen</p>
-        <Accordion value="0" class="mt-5">
-          <AccordionPanel v-for="(item, index) in store.overview.faq" :key="item.question" :value="String(index)">
-            <AccordionHeader>{{ item.question }}</AccordionHeader>
-            <AccordionContent>
-              <p class="leading-7 text-slate-600">{{ item.answer }}</p>
-            </AccordionContent>
-          </AccordionPanel>
-        </Accordion>
-        <RouterLink to="/winners" class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
-          Alle Fragen ansehen <ArrowRight class="h-4 w-4" />
-        </RouterLink>
-      </Card>
-
-      <Card class="flex flex-col p-7">
-        <div class="flex items-center gap-2 text-violet-600">
-          <Megaphone class="h-5 w-5 text-amber-500" />
-          <p class="text-xs font-semibold uppercase tracking-[0.3em]">Community &amp; Updates</p>
-        </div>
-        <p class="mt-4 text-sm leading-7 text-slate-600">
-          Tritt unserer Community bei und verpasse keine News, Updates und Behind-the-Scenes!
-        </p>
-        <div class="mt-5 flex gap-3 text-violet-600">
-          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50"><Video class="h-4 w-4" /></span>
-          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50"><PartyPopper class="h-4 w-4" /></span>
-          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50">
-            <svg class="h-4 w-4" viewBox="0 0 19 19"><use href="/icons.svg#x-icon" /></svg>
-          </span>
-          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50">
-            <svg class="h-4 w-4" viewBox="0 0 20 19"><use href="/icons.svg#discord-icon" /></svg>
-          </span>
-        </div>
-        <button class="mt-auto flex w-full items-center justify-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm font-semibold text-violet-700">
-          ✉ Newsletter abonnieren
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          Jetzt abstimmen ✦
         </button>
-      </Card>
+      </div>
+    </div>
 
-      <Card class="flex flex-col p-7">
-        <p class="font-[Cormorant_Garamond] text-3xl text-violet-800">Teile die Awards</p>
-        <p class="mt-2 text-sm leading-7 text-slate-600">
-          Supporte deine Favoriten und teile die Awards mit deinen Freunden!
-        </p>
-        <div class="mt-5 space-y-3">
-          <button class="flex w-full items-center gap-3 rounded-2xl bg-slate-900 px-4 py-3 text-sm font-semibold text-white">
-            <svg class="h-4 w-4 fill-white" viewBox="0 0 19 19"><use href="/icons.svg#x-icon" /></svg> Auf X teilen
-          </button>
-          <button class="flex w-full items-center gap-3 rounded-2xl bg-violet-600 px-4 py-3 text-sm font-semibold text-white">
-            <svg class="h-4 w-4 fill-white" viewBox="0 0 20 19"><use href="/icons.svg#discord-icon" /></svg> Auf Discord teilen
-          </button>
-          <button class="flex w-full items-center gap-3 rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm font-semibold text-violet-700">
-            <LinkIcon class="h-4 w-4" /> Link kopieren
-          </button>
+    <!-- Host card -->
+    <div style="position:absolute;z-index:61;right:64px;bottom:96px;background:rgba(255,255,255,.36);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:18px;border:1px solid rgba(255,255,255,.7);padding:16px 20px;box-shadow:0 16px 36px rgba(120,90,196,.2);display:flex;align-items:center;gap:12px;">
+      <div style="width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#ff5fa2,#a06bff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex:none;">✦</div>
+      <div>
+        <div style="font-family:'Fredoka',sans-serif;font-size:15px;font-weight:600;color:#3f3556;">Jayuhime</div>
+        <div style="font-size:12px;color:#9a8fb5;">Host & Organisatorin</div>
+      </div>
+    </div>
+  </header>
+
+  <!-- ===== STREAM BANNER ===== -->
+  <section style="background:linear-gradient(115deg,#241640 0%,#3a2168 48%,#5b3aa0 100%);padding:28px 0;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;">
+      <div style="display:flex;align-items:center;gap:16px;min-width:0;">
+        <div style="flex:none;width:48px;height:48px;border-radius:14px;background:#9146FF;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(145,70,255,.4);">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
+            <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
+            <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
+          </svg>
         </div>
-      </Card>
-    </section>
-
-    <!-- ============ ADMIN DASHBOARD VORSCHAU ============ -->
-    <section>
-      <Card class="overflow-hidden p-0">
-        <div class="flex flex-col gap-2 border-b border-violet-100 px-7 py-5 sm:flex-row sm:items-center sm:justify-between">
-          <div class="flex items-center gap-2">
-            <p class="text-xs font-semibold uppercase tracking-[0.3em] text-violet-500">Für das Team: Admin Dashboard (Vorschau)</p>
-            <ShieldCheck class="h-4 w-4 text-amber-500" />
-          </div>
-          <RouterLink to="/admin" class="inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
-            Zum vollständigen Admin Panel <ArrowRight class="h-4 w-4" />
-          </RouterLink>
+        <div>
+          <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px;">Award Show</div>
+          <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(20px,3vw,30px);color:#fff;font-weight:600;margin:0 0 2px;">Live ab 12. September 2026</h2>
+          <p style="font-size:14px;color:rgba(255,255,255,.65);margin:0;">Die große Award-Show auf Twitch — sei live dabei.</p>
         </div>
+      </div>
+      <button
+        @click="openModal('show')"
+        style="flex:none;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;border:none;background:rgba(255,255,255,.12);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;cursor:pointer;border:1px solid rgba(255,255,255,.2);"
+      >
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+        Erinnerung aktivieren
+      </button>
+    </div>
+  </section>
 
-        <div class="grid gap-0 lg:grid-cols-[200px_1fr]">
-          <!-- Sidebar -->
-          <aside class="hidden flex-col gap-1 border-r border-violet-100 bg-violet-50/40 p-5 text-sm text-slate-600 lg:flex">
-            <p class="mb-2 flex items-center gap-2 font-semibold text-violet-800"><Star class="h-4 w-4 text-amber-500" /> VSA Admin</p>
-            <span class="rounded-xl bg-violet-100 px-3 py-2 font-semibold text-violet-800">Dashboard</span>
-            <span class="px-3 py-2">Nominierungen</span>
-            <span class="px-3 py-2">Voting</span>
-            <span class="px-3 py-2">Kategorien</span>
-            <span class="px-3 py-2">Clips</span>
-            <span class="px-3 py-2">Reviews</span>
-            <span class="px-3 py-2">User &amp; Logs</span>
-            <span class="px-3 py-2">Analytics</span>
-            <span class="px-3 py-2">Einstellungen</span>
-          </aside>
+  <!-- ===== STATS ===== -->
+  <section style="background:#ebe2f8;padding:28px 0;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;">
+      <div style="flex:1;min-width:160px;text-align:center;padding:16px 24px;border-right:1px solid rgba(124,86,196,.18);">
+        <div style="font-family:'Fredoka',sans-serif;font-size:clamp(32px,4vw,48px);font-weight:700;background:linear-gradient(135deg,#8b6cdb,#b78bff);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;">12.341</div>
+        <div style="font-size:14px;color:#8a8398;font-weight:500;margin-top:4px;">Nominierungen</div>
+      </div>
+      <div style="flex:1;min-width:160px;text-align:center;padding:16px 24px;border-right:1px solid rgba(124,86,196,.18);">
+        <div style="font-family:'Fredoka',sans-serif;font-size:clamp(32px,4vw,48px);font-weight:700;background:linear-gradient(135deg,#8b6cdb,#b78bff);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;">587.231</div>
+        <div style="font-size:14px;color:#8a8398;font-weight:500;margin-top:4px;">Abgegebene Stimmen</div>
+      </div>
+      <div style="flex:1;min-width:160px;text-align:center;padding:16px 24px;">
+        <div style="font-family:'Fredoka',sans-serif;font-size:clamp(32px,4vw,48px);font-weight:700;background:linear-gradient(135deg,#8b6cdb,#b78bff);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;">8</div>
+        <div style="font-size:14px;color:#8a8398;font-weight:500;margin-top:4px;">Kategorien</div>
+      </div>
+    </div>
+  </section>
 
-          <!-- Content -->
-          <div class="space-y-6 p-7">
-            <div class="grid gap-3 sm:grid-cols-3 xl:grid-cols-5">
-              <div v-for="metric in adminMetrics" :key="metric.label" class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
-                <p class="text-[11px] uppercase tracking-[0.15em] text-slate-400">{{ metric.label }}</p>
-                <p class="mt-1 font-[Cormorant_Garamond] text-2xl text-violet-800">{{ metric.value }}</p>
-                <p class="text-[11px] font-semibold text-emerald-500">{{ metric.delta }}</p>
+  <!-- ===== ABLAUF ===== -->
+  <section style="padding:80px 0;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;">
+      <div style="text-align:center;margin-bottom:56px;">
+        <div style="display:inline-block;padding:4px 14px;border-radius:999px;background:#f3eefb;color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;">Zeitplan</div>
+        <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(28px,4vw,44px);color:#3f3556;margin:0 0 12px;font-weight:700;">So läuft's ab</h2>
+        <p style="font-size:17px;color:#8a8398;margin:0 auto;max-width:520px;line-height:1.6;">Drei Phasen, eine große Show — von der ersten Nominierung bis zum Finale auf Twitch.</p>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;">
+        <!-- Phase 1 -->
+        <div style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:24px;padding:32px 28px;position:relative;">
+          <div style="display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#ff5fa2,#a06bff);color:#fff;font-size:24px;margin-bottom:20px;box-shadow:0 8px 20px rgba(255,95,162,.3);">★</div>
+          <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:8px;">Phase 1</div>
+          <h3 style="font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:#3f3556;margin:0 0 6px;">Nominierung</h3>
+          <p style="font-size:13px;color:#9a93a8;margin:0 0 16px;">1. Mai – 31. Mai 2026</p>
+          <p style="font-size:14px;color:#7d7491;line-height:1.6;margin:0 0 18px;">Schlage deine Favorit:innen vor — in allen Kategorien. Jede:r mit Twitch-Account kann nominieren.</p>
+          <span style="display:inline-block;padding:4px 12px;border-radius:999px;background:#f0fdf4;color:#16a34a;font-size:11px;font-weight:700;letter-spacing:.5px;">✓ Abgeschlossen</span>
+        </div>
+        <!-- Phase 2 -->
+        <div style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:24px;padding:32px 28px;position:relative;">
+          <div style="display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;font-size:24px;margin-bottom:20px;box-shadow:0 8px 20px rgba(124,86,196,.3);">✦</div>
+          <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:8px;">Phase 2</div>
+          <h3 style="font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:#3f3556;margin:0 0 6px;">Community Voting</h3>
+          <p style="font-size:13px;color:#9a93a8;margin:0 0 16px;">1. Juni – 11. September 2026</p>
+          <p style="font-size:14px;color:#7d7491;line-height:1.6;margin:0 0 18px;">Stimme in jeder Kategorie für deinen Favoriten. Eine Stimme pro Kategorie, jederzeit änderbar.</p>
+          <span style="display:inline-block;padding:4px 12px;border-radius:999px;background:linear-gradient(135deg,#8b6cdb,#a06bff);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;">◉ Jetzt aktiv</span>
+        </div>
+        <!-- Phase 3 -->
+        <div style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:24px;padding:32px 28px;position:relative;">
+          <div style="display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#d9942a,#eeb24a);color:#fff;font-size:24px;margin-bottom:20px;box-shadow:0 8px 20px rgba(217,148,42,.3);">♡</div>
+          <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:8px;">Phase 3</div>
+          <h3 style="font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:#3f3556;margin:0 0 6px;">Award Show</h3>
+          <p style="font-size:13px;color:#9a93a8;margin:0 0 16px;">12. September 2026 · 20:00 Uhr</p>
+          <p style="font-size:14px;color:#7d7491;line-height:1.6;margin:0 0 18px;">Die Gewinner werden live auf Twitch bei Jayuhime bekannt gegeben. Sei dabei!</p>
+          <span style="display:inline-block;padding:4px 12px;border-radius:999px;background:#f5f5f5;color:#9a93a8;font-size:11px;font-weight:700;letter-spacing:.5px;">○ Demnächst</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== KATEGORIEN ===== -->
+  <section style="padding:70px 0 80px;background:#f9f6fe;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;">
+      <div style="text-align:center;margin-bottom:48px;">
+        <div style="display:inline-block;padding:4px 14px;border-radius:999px;background:#f3eefb;color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;">Teilnehmen & Abstimmen</div>
+        <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(32px,4vw,48px);color:#3f3556;margin:0 0 14px;font-weight:700;letter-spacing:-.4px;">8 Kategorien · 1 Sternenhimmel</h2>
+        <p style="font-size:17px;color:#8a8398;margin:0 auto;max-width:520px;line-height:1.6;">Alle Kategorien sind offen — nominier deine Lieblinge und gib ihnen deine Stimme.</p>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;">
+        <div
+          v-for="cat in CATS"
+          :key="cat.id"
+          style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:22px;padding:28px 24px;cursor:pointer;transition:transform .15s,box-shadow .15s;"
+          @click="requireLogin(() => openModal('vote'))"
+        >
+          <div style="display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#ff5fa2,#a06bff);color:#fff;font-size:20px;margin-bottom:16px;box-shadow:0 6px 14px rgba(255,95,162,.25);">{{ cat.icon }}</div>
+          <h3 style="font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:#3f3556;margin:0 0 6px;">{{ cat.name }}</h3>
+          <p style="font-size:13px;color:#9a93a8;margin:0;">Jetzt abstimmen →</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== NOMINIERTE ===== -->
+  <section style="background:#ebe2f8;padding:80px 0;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;">
+      <div style="text-align:center;margin-bottom:48px;">
+        <div style="display:inline-block;padding:4px 14px;border-radius:999px;background:rgba(139,108,219,.15);color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;">Saison 2026</div>
+        <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(28px,4vw,44px);color:#3f3556;margin:0 0 12px;font-weight:700;">Nominierte</h2>
+        <p style="font-size:17px;color:#8a8398;margin:0 auto;max-width:480px;line-height:1.6;">Die Kandidat:innen stehen fest — jetzt liegt es an dir.</p>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;">
+        <div
+          v-for="cand in (store.categories.categories[0]?.candidates ?? []).slice(0, 4)"
+          :key="cand.id"
+          style="background:#fff;border-radius:24px;overflow:hidden;border:1px solid rgba(124,86,196,.12);padding:0;"
+        >
+          <div style="height:8px;background:linear-gradient(90deg,#ff5fa2,#a06bff);"></div>
+          <div style="padding:24px 20px;">
+            <div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
+              <div style="flex:none;width:52px;height:52px;border-radius:14px;background:repeating-linear-gradient(45deg,#f3eefb 0 8px,#ece2fa 8px 16px);display:flex;align-items:center;justify-content:center;font-size:22px;color:#a98ddb;">✦</div>
+              <div style="min-width:0;">
+                <div style="font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:#3f3556;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ cand.displayName }}</div>
+                <div style="font-size:13px;color:#9a93a8;">{{ cand.channelSlug }}</div>
               </div>
             </div>
+            <div style="font-size:12px;color:#a98ddb;font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;">{{ store.categories.categories[0]?.name }}</div>
+            <button
+              @click="requireLogin(() => openModal('vote'))"
+              style="width:100%;padding:11px;border-radius:999px;border:none;background:linear-gradient(135deg,#ff5fa2,#a06bff);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 6px 16px rgba(255,95,162,.3);"
+            >Abstimmen ✦</button>
+          </div>
+        </div>
+      </div>
+      <div style="text-align:center;margin-top:36px;">
+        <button
+          @click="requireLogin(() => openModal('nominate'))"
+          style="display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:12px;border:1.5px solid rgba(124,86,196,.3);background:transparent;color:#8b6cdb;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;cursor:pointer;"
+        >Alle Nominierten anzeigen →</button>
+      </div>
+    </div>
+  </section>
 
-            <div class="grid gap-5 lg:grid-cols-2">
-              <div class="rounded-2xl border border-violet-100 bg-white p-5">
-                <div class="flex items-center gap-2 text-violet-600">
-                  <BarChart3 class="h-4 w-4 text-amber-500" />
-                  <p class="text-xs font-semibold uppercase tracking-[0.2em]">Top Kategorien (nach Votes)</p>
+  <!-- ===== CLIPS ===== -->
+  <section style="padding:80px 0;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;">
+        <!-- Left -->
+        <div>
+          <div style="display:inline-block;padding:4px 14px;border-radius:999px;background:#f3eefb;color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;">Clip-Einreichung</div>
+          <h2 style="font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3.6vw,44px);color:#3f3556;margin:0 0 16px;font-weight:700;line-height:1.15;">Einen Clip einreichen</h2>
+          <p style="font-size:15.5px;color:#7d7491;line-height:1.65;margin:0 0 32px;">Hast du einen unvergesslichen Moment auf Twitch oder YouTube gesehen? Reiche ihn ein und lass die Community entscheiden.</p>
+          <div style="display:flex;flex-direction:column;gap:20px;">
+            <div style="display:flex;align-items:flex-start;gap:16px;">
+              <div style="flex:none;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#ff5fa2,#a06bff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;">1</div>
+              <div>
+                <div style="font-weight:700;color:#3f3556;font-size:14px;margin-bottom:4px;">Kategorie wählen</div>
+                <div style="font-size:13.5px;color:#8a8398;line-height:1.55;">Ordne den Clip der passenden Award-Kategorie zu.</div>
+              </div>
+            </div>
+            <div style="display:flex;align-items:flex-start;gap:16px;">
+              <div style="flex:none;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;">2</div>
+              <div>
+                <div style="font-weight:700;color:#3f3556;font-size:14px;margin-bottom:4px;">Link einfügen</div>
+                <div style="font-size:13.5px;color:#8a8398;line-height:1.55;">Twitch-Clip oder YouTube-Link — beides ist willkommen.</div>
+              </div>
+            </div>
+            <div style="display:flex;align-items:flex-start;gap:16px;">
+              <div style="flex:none;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#d9942a,#eeb24a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;">3</div>
+              <div>
+                <div style="font-weight:700;color:#3f3556;font-size:14px;margin-bottom:4px;">Einreichen & fertig</div>
+                <div style="font-size:13.5px;color:#8a8398;line-height:1.55;">Das Team prüft deinen Clip und gibt ihn frei.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Form -->
+        <div>
+          <template v-if="!clipSubmitted">
+            <div style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:24px;padding:32px 28px;">
+              <div style="display:flex;flex-direction:column;gap:16px;">
+                <div>
+                  <label style="display:block;font-size:13px;font-weight:700;color:#5f44ad;margin-bottom:6px;letter-spacing:.3px;">Kategorie</label>
+                  <select v-model="clipCatIdx" style="width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;font-family:'Outfit',sans-serif;font-size:15px;color:#3f3556;outline:none;cursor:pointer;">
+                    <option v-for="(cat, i) in CATS" :key="cat.id" :value="i">{{ cat.icon }}&nbsp;{{ cat.name }}</option>
+                  </select>
                 </div>
-                <div class="mt-4 space-y-3">
-                  <div v-for="item in adminTopVotes" :key="item.name">
-                    <div class="flex items-center justify-between text-xs text-slate-600">
-                      <span>{{ item.name }}</span>
-                      <span class="font-semibold text-violet-700">{{ item.votes.toLocaleString('de-DE') }}</span>
-                    </div>
-                    <div class="mt-1 h-2 rounded-full bg-violet-50">
-                      <div class="h-2 rounded-full bg-[linear-gradient(90deg,#a78bff,#7c5cff)]" :style="{ width: `${item.pct}%` }" />
+                <div>
+                  <label style="display:block;font-size:13px;font-weight:700;color:#5f44ad;margin-bottom:6px;letter-spacing:.3px;">Twitch- oder YouTube-Link</label>
+                  <input v-model="clipUrl" type="url" placeholder="https://clips.twitch.tv/..." style="width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;font-family:'Outfit',sans-serif;font-size:15px;color:#3f3556;outline:none;box-sizing:border-box;" />
+                </div>
+                <div>
+                  <label style="display:block;font-size:13px;font-weight:700;color:#5f44ad;margin-bottom:6px;letter-spacing:.3px;">Name des VTubers</label>
+                  <input v-model="clipNom" type="text" placeholder="z. B. Hoshimi Miyu" style="width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;font-family:'Outfit',sans-serif;font-size:15px;color:#3f3556;outline:none;box-sizing:border-box;" />
+                </div>
+                <div>
+                  <label style="display:block;font-size:13px;font-weight:700;color:#5f44ad;margin-bottom:6px;letter-spacing:.3px;">Kurze Beschreibung</label>
+                  <textarea v-model="clipDesc" rows="3" placeholder="Warum ist dieser Clip besonders?" style="width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;font-family:'Outfit',sans-serif;font-size:15px;color:#3f3556;outline:none;resize:vertical;box-sizing:border-box;"></textarea>
+                </div>
+                <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:#7d7491;line-height:1.5;">
+                  <input type="checkbox" v-model="clipDsgvo" style="margin-top:2px;accent-color:#8b6cdb;flex:none;" />
+                  Ich stimme der Verarbeitung meiner Daten gemäß der <button type="button" @click.stop="homePrivacyOpen = true" style="background:none;border:none;padding:0;color:#8b6cdb;cursor:pointer;font-size:inherit;">Datenschutzerklärung</button> zu.
+                </label>
+                <button
+                  @click="requireLogin(submitClip)"
+                  :style="clipDsgvo ? '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;'"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                  Clip einreichen
+                </button>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:24px;padding:56px 40px;text-align:center;">
+              <div style="width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(135deg,#2bbd6e,#1f9d5a);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 32px rgba(31,157,90,.32);">
+                <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+              </div>
+              <h3 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:30px;margin:0 0 12px;color:#3f3556;">Clip eingereicht ✦</h3>
+              <p style="font-size:16px;line-height:1.6;color:#7d7491;max-width:320px;margin:0 auto 28px;">Danke! Dein Clip wird vom Team geprüft und bei Freigabe in der Abstimmung angezeigt.</p>
+              <button @click="clipSubmitted = false; clipUrl = ''; clipNom = ''; clipDesc = ''; clipDsgvo = false" style="padding:14px 32px;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;">Weiteren Clip einreichen</button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== VOTING CTA ===== -->
+  <section style="padding:0 0 80px;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;">
+      <!-- How it works -->
+      <div style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:28px;padding:48px 40px;margin-bottom:32px;">
+        <div style="text-align:center;margin-bottom:40px;">
+          <div style="display:inline-block;padding:4px 14px;border-radius:999px;background:#f3eefb;color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;">Wie es funktioniert</div>
+          <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(26px,3.5vw,40px);color:#3f3556;margin:0 0 10px;font-weight:700;">So stimmst du ab</h2>
+          <p style="font-size:16px;color:#8a8398;margin:0;line-height:1.6;">Drei einfache Schritte — keine App nötig.</p>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:32px;">
+          <div style="text-align:center;">
+            <div style="background:#f6f1fd;border:1px dashed #d8c9f2;height:170px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:48px;">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d8c9f2" stroke-width="1.5"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4z"/></svg>
+            </div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:8px;">Schritt 1</div>
+            <h3 style="font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:#3f3556;margin:0 0 6px;">Mit Twitch anmelden</h3>
+            <p style="font-size:13.5px;color:#8a8398;line-height:1.55;margin:0;">Einmal einloggen — kein extra Konto nötig.</p>
+          </div>
+          <div style="text-align:center;">
+            <div style="background:#f6f1fd;border:1px dashed #d8c9f2;height:170px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:48px;">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d8c9f2" stroke-width="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+            </div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:8px;">Schritt 2</div>
+            <h3 style="font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:#3f3556;margin:0 0 6px;">Kategorien durchgehen</h3>
+            <p style="font-size:13.5px;color:#8a8398;line-height:1.55;margin:0;">Pro Kategorie eine Stimme — jederzeit änderbar.</p>
+          </div>
+          <div style="text-align:center;">
+            <div style="background:#f6f1fd;border:1px dashed #d8c9f2;height:170px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:48px;">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d8c9f2" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+            </div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:8px;">Schritt 3</div>
+            <h3 style="font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;color:#3f3556;margin:0 0 6px;">Stimme absenden</h3>
+            <p style="font-size:13.5px;color:#8a8398;line-height:1.55;margin:0;">Bestätigen und auf die Show freuen!</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Big CTA -->
+      <div style="background:linear-gradient(135deg,#8b6cdb,#b78bff);border-radius:28px;padding:56px 48px;text-align:center;position:relative;overflow:hidden;">
+        <div style="position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;"></div>
+        <div style="position:absolute;bottom:-30px;left:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;"></div>
+        <div style="position:relative;z-index:1;">
+          <div style="font-size:42px;margin-bottom:12px;">✦</div>
+          <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(28px,4vw,44px);color:#fff;margin:0 0 12px;font-weight:700;">Deine Stimme zählt</h2>
+          <p style="font-size:17px;color:rgba(255,255,255,.82);margin:0 auto 32px;max-width:480px;line-height:1.6;">Wähle jetzt deine Favorit:innen — jede Kategorie, eine Stimme. Die Community entscheidet.</p>
+          <button
+            @click="requireLogin(() => openModal('vote'))"
+            style="display:inline-flex;align-items:center;gap:10px;padding:18px 36px;border-radius:14px;border:none;background:#fff;color:#7355c8;font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 14px 36px rgba(0,0,0,.2);"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+            Jetzt abstimmen ✦
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== COMMUNITY ===== -->
+  <section style="background:linear-gradient(180deg,#ece3fa 0%,#e6dcf6 100%);padding:80px 0;overflow:hidden;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;">
+      <div>
+        <div style="display:inline-block;padding:4px 14px;border-radius:999px;background:rgba(139,108,219,.15);color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;">Community</div>
+        <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(28px,4vw,44px);color:#3f3556;margin:0 0 14px;font-weight:700;">Teile die Begeisterung</h2>
+        <p style="font-size:16px;color:#7d7491;line-height:1.65;margin:0 0 28px;max-width:460px;">Bring deine Community mit ins Boot! Je mehr Stimmen, desto mehr Gewicht hat das Ergebnis. Teile die Awards und animier andere zur Teilnahme.</p>
+        <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
+          <button style="display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;border:none;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 6px 18px rgba(124,86,196,.3);">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+            Link teilen
+          </button>
+          <a href="https://twitch.tv/jayuhime" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;border:1.5px solid rgba(139,108,219,.3);background:transparent;color:#8b6cdb;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;text-decoration:none;">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="#9146FF"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/></svg>
+            Jayuhime folgen
+          </a>
+        </div>
+      </div>
+      <div style="flex:none;">
+        <img :src="heroImg" alt="Jayuhime" style="height:360px;width:auto;object-fit:contain;filter:drop-shadow(0 20px 48px rgba(139,108,219,.3));animation:floaty 7s ease-in-out infinite;" />
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== FAQ ===== -->
+  <section style="padding:80px 0;">
+    <div style="max-width:880px;margin:0 auto;padding:0 24px;">
+      <div style="text-align:center;margin-bottom:48px;">
+        <div style="display:inline-block;padding:4px 14px;border-radius:999px;background:#f3eefb;color:#8b6cdb;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;">Häufige Fragen</div>
+        <h2 style="font-family:'Fredoka',sans-serif;font-size:clamp(28px,4vw,44px);color:#3f3556;margin:0 0 12px;font-weight:700;">FAQ</h2>
+        <p style="font-size:17px;color:#8a8398;margin:0;line-height:1.6;">Alles, was du wissen musst — auf einen Blick.</p>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:12px;">
+        <details
+          v-for="item in faq"
+          :key="item.q"
+          style="background:#fff;border:1px solid rgba(124,86,196,.16);border-radius:16px;overflow:hidden;"
+        >
+          <summary style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;font-weight:600;font-size:15.5px;color:#3f3556;user-select:none;">
+            {{ item.q }}
+            <span style="flex:none;width:26px;height:26px;border-radius:50%;background:#f3eefb;color:#8b6cdb;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;">+</span>
+          </summary>
+          <div style="padding:0 24px 20px;font-size:14.5px;color:#7d7491;line-height:1.65;">{{ item.a }}</div>
+        </details>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== FOOTER ===== -->
+  <footer style="border-top:1px solid rgba(124,86,196,.16);padding:40px 0;">
+    <div style="max-width:1200px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;">
+      <div style="display:flex;align-items:center;gap:10px;text-decoration:none;">
+        <div style="width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#8b6cdb,#e7b13e);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;">✦</div>
+        <span style="font-family:'Fredoka',sans-serif;font-size:15px;font-weight:600;color:#3f3556;">VTuber Star Award 2026</span>
+      </div>
+      <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:14px;font-weight:500;">
+        <a href="#" style="color:#8a8398;text-decoration:none;">Impressum</a>
+        <a href="#" style="color:#8a8398;text-decoration:none;">Datenschutz</a>
+        <a href="#" style="color:#8a8398;text-decoration:none;">Kontakt</a>
+        <a href="#" style="color:#8a8398;text-decoration:none;">Sponsoren & Partner</a>
+      </div>
+      <div style="font-size:13px;color:#c9b8da;">© 2026 · Made with ♡ &amp; Chaos</div>
+    </div>
+  </footer>
+
+  <!-- ===== INLINE PRIVACY MODAL (clips DSGVO link) ===== -->
+  <Teleport to="body">
+    <div
+      v-if="homePrivacyOpen"
+      @click.self="homePrivacyOpen = false"
+      style="position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
+    >
+      <div style="position:relative;width:100%;max-width:680px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
+          <div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Rechtliches</div>
+            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">Datenschutzerklärung</h2>
+          </div>
+          <button @click="homePrivacyOpen = false" style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
+        </div>
+        <div style="overflow-y:auto;padding:28px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.65;color:#6f6685;">
+          <p>Bei Teilnahme verarbeiten wir ausschließlich deine <strong style="color:#3f3556;">Twitch-User-ID</strong> sowie den Zeitstempel deiner Aktion. Alle Daten werden spätestens 6 Monate nach der Award-Show (bis März 2027) automatisch gelöscht.</p>
+          <p>Für die vollständige Erklärung melde dich an und öffne dein Profil.</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+  <!-- ===== VOTE / NOMINATE / SHOW MODAL ===== -->
+  <Teleport to="body">
+    <div
+      v-if="modal"
+      @click.self="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 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="closeModal"
+          aria-label="Schliessen"
+          style="position:absolute;top:16px;right:16px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;"
+        >✕</button>
+
+        <!-- Success -->
+        <template v-if="modalSubmitted">
+          <div style="padding:56px 40px;text-align:center;">
+            <div style="width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(135deg,#2bbd6e,#1f9d5a);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 32px rgba(31,157,90,.32);">
+              <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+            </div>
+            <h3 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:30px;margin:0 0 12px;color:#3f3556;">
+              {{ successKind === 'show' ? 'Erinnerung aktiviert ✦' : 'Stimme gespeichert ✩' }}
+            </h3>
+            <p style="font-size:16px;line-height:1.6;color:#7d7491;max-width:420px;margin:0 auto 28px;">
+              {{ successKind === 'show' ? 'Wir erinnern dich rechtzeitig vor der Award-Show. Bis zum 12. September!' : 'Danke fürs Abstimmen! Du kannst deine Auswahl bis zum Ende der Phase ändern.' }}
+            </p>
+            <button @click="closeModal" style="padding:14px 32px;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);">Schliessen</button>
+          </div>
+        </template>
+
+        <!-- Show reminder -->
+        <template v-else-if="modal === 'show'">
+          <div 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>
+            <h3 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:30px;margin:0 0 10px;color:#3f3556;">Sei live dabei ✦</h3>
+            <p style="font-size:15.5px;line-height:1.6;color:#7d7491;margin:0 0 24px;">Die große Live-Show findet am <strong style="color:#5f44ad;">12. September 2026 um 20:00 Uhr</strong> auf Twitch statt. Aktiviere eine Erinnerung, damit du nichts verpasst.</p>
+            <div style="display:flex;gap:10px;margin-bottom:14px;">
+              <input v-model="reminderEmail" type="email" placeholder="deine@email.de" style="flex:1;padding:14px 16px;border-radius:12px;border:1.5px solid #e6dcf6;background:#fbf9ff;font-family:'Outfit',sans-serif;font-size:15px;color:#3f3556;outline:none;" />
+              <button @click="submitReminder" style="flex:none;padding:14px 24px;border-radius:12px;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 22px rgba(124,86,196,.3);">Erinnern</button>
+            </div>
+            <a href="https://twitch.tv/jayuhime" target="_blank" rel="noopener" style="display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:12px;background:#f1ecfb;color:#7a3fd0;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;">
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="#9146FF"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/><path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/></svg>
+              Jayuhime auf Twitch folgen
+            </a>
+          </div>
+        </template>
+
+        <!-- Vote / Nominate picker -->
+        <template v-else>
+          <div style="display:flex;flex-direction:column;min-height:0;">
+            <div style="padding:30px 36px 18px;border-bottom:1px solid #f1ecfb;">
+              <h3 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:27px;margin:0 0 6px;color:#3f3556;">
+                {{ modal === 'nominate' ? 'Eingegangene Nominierungen' : 'Deine Stimme zählt' }}
+              </h3>
+              <p style="font-size:14px;line-height:1.5;color:#8a8398;margin:0;">
+                {{ modal === 'nominate' ? 'Die Nominierungsphase ist abgeschlossen — hier sind alle eingereichten Kandidat:innen.' : 'Wähle pro Kategorie deine:n Favorit:in. Eine Stimme pro Kategorie.' }}
+              </p>
+            </div>
+            <div style="display:grid;grid-template-columns:230px 1fr;min-height:0;flex:1;overflow:hidden;">
+              <!-- Category list -->
+              <div style="border-right:1px solid #f1ecfb;padding:16px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;background:#fcfaff;">
+                <button
+                  v-for="(cat, i) in CATS"
+                  :key="cat.id"
+                  @click="activeCatIdx = i"
+                  :style="i === activeCatIdx
+                    ? 'display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;cursor:pointer;font-size:14px;font-weight:600;border:1px solid #d8c9f2;background:#f1ecfb;color:#5f44ad;width:100%;text-align:left;font-family:\'Outfit\',sans-serif;outline:none;'
+                    : 'display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;cursor:pointer;font-size:14px;font-weight:500;border:1px solid transparent;background:transparent;color:#6f6685;width:100%;text-align:left;font-family:\'Outfit\',sans-serif;outline:none;'"
+                >
+                  <span :style="i === activeCatIdx ? 'flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:14px;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;' : 'flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:14px;background:#efe7fb;color:#9a7fce;'">{{ cat.icon }}</span>
+                  <span>{{ cat.name }}</span>
+                  <span v-if="votes[i] != null" style="flex:none;margin-left:auto;color:#1f9d5a;font-size:14px;font-weight:700;">✓</span>
+                </button>
+              </div>
+              <!-- Nominee list -->
+              <div style="padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;">
+                <div style="font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#a98ddb;margin-bottom:2px;">{{ activeCat.name }}</div>
+                <div
+                  v-for="(nom, idx) in activeNoms"
+                  :key="idx"
+                  :style="votes[activeCatIdx] === idx
+                    ? 'display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:13px;border:1.5px solid #8b6cdb;background:#f6f1fd;'
+                    : 'display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:13px;border:1.5px solid #ece4f6;background:#fff;'"
+                >
+                  <div style="display:flex;align-items:center;gap:12px;min-width:0;">
+                    <div style="flex:none;width:42px;height:42px;border-radius:11px;background:repeating-linear-gradient(45deg,#f3eefb 0 8px,#ece2fa 8px 16px);"></div>
+                    <div style="min-width:0;">
+                      <div style="font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;color:#3f3556;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ nom[0] }}</div>
+                      <div style="font-size:13px;color:#9a93a8;">{{ nom[1] }}</div>
                     </div>
                   </div>
+                  <button
+                    v-if="modal === 'vote'"
+                    @click="pickNominee(activeCat.id, idx)"
+                    :style="votes[activeCatIdx] === idx
+                      ? 'flex:none;white-space:nowrap;padding:8px 16px;border-radius:9px;border:none;cursor:pointer;font-family:\'Outfit\',sans-serif;font-weight:600;font-size:13px;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;'
+                      : 'flex:none;white-space:nowrap;padding:8px 16px;border-radius:9px;border:none;cursor:pointer;font-family:\'Outfit\',sans-serif;font-weight:600;font-size:13px;background:#f1ecfb;color:#8b6cdb;'"
+                  >{{ votes[activeCatIdx] === idx ? '✓ Gewählt' : 'Auswählen' }}</button>
                 </div>
               </div>
-
-              <div class="rounded-2xl border border-violet-100 bg-white p-5">
-                <div class="flex items-center gap-2 text-violet-600">
-                  <Vote class="h-4 w-4 text-amber-500" />
-                  <p class="text-xs font-semibold uppercase tracking-[0.2em]">Letzte Aktivitäten</p>
-                </div>
-                <ul class="mt-4 space-y-3 text-sm text-slate-600">
-                  <li class="flex items-center justify-between">
-                    <span class="flex items-center gap-2"><Sparkles class="h-4 w-4 text-violet-400" /> Neue Nominierung in Best New VTuber</span>
-                    <span class="text-xs text-slate-400">vor 2 Min.</span>
-                  </li>
-                  <li class="flex items-center justify-between">
-                    <span class="flex items-center gap-2"><Users class="h-4 w-4 text-violet-400" /> 24 Votes in VTuber des Jahres</span>
-                    <span class="text-xs text-slate-400">vor 5 Min.</span>
-                  </li>
-                  <li class="flex items-center justify-between">
-                    <span class="flex items-center gap-2"><Award class="h-4 w-4 text-violet-400" /> Clip-Einreichung in Beste Collab</span>
-                    <span class="text-xs text-slate-400">vor 18 Min.</span>
-                  </li>
-                </ul>
-              </div>
+            </div>
+            <!-- Submit bar -->
+            <div v-if="modal === 'vote'" style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 36px;border-top:1px solid #f1ecfb;background:#fcfaff;">
+              <div style="font-size:14px;font-weight:600;color:#7d7491;"><span style="color:#8b6cdb;font-weight:700;">{{ voteCount }}</span> / {{ CATS.length }} Kategorien gewählt</div>
+              <button
+                @click="submitVote"
+                style="padding:13px 28px;border-radius:12px;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 22px rgba(124,86,196,.3);"
+              >Stimmen absenden ✩</button>
             </div>
           </div>
-        </div>
-      </Card>
-    </section>
-  </div>
+        </template>
+      </div>
+    </div>
+  </Teleport>
 </template>