Separate active season admin card

frontend/src/views/admin/AdminLayoutView.vue

@@ -35,7 +35,8 @@ onMounted(async () => {
 <template>
   <div class="pb-10">
     <div class="grid gap-5 xl:grid-cols-[220px_minmax(0,1fr)]">
-      <Card class="h-fit p-2 xl:sticky xl:top-4">
+      <aside class="space-y-3 xl:sticky xl:top-4 xl:h-fit">
+        <Card class="p-2">
           <nav class="space-y-1">
             <RouterLink
               v-for="item in navItems"
@@ -63,8 +64,9 @@ onMounted(async () => {
               </div>
             </RouterLink>
           </nav>
+        </Card>
 
-        <div class="mt-3 rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-3">
+        <Card class="p-3">
           <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-500">Aktive Season</p>
           <p class="mt-1 truncate text-sm font-semibold text-violet-800">{{ currentSeason.year || 'Keine Season' }} · {{ currentSeason.currentPhase || 'Kein Status' }}</p>
           <p class="mt-1 truncate text-xs text-slate-500">{{ currentSeason.name || 'Bitte Season auswaehlen.' }}</p>
@@ -78,8 +80,8 @@ onMounted(async () => {
               <strong class="block text-base leading-5 text-violet-800">{{ item.value }}</strong>
             </div>
           </div>
-        </div>
         </Card>
+      </aside>
 
       <RouterView />
     </div>