feat: Add subscription UI components

- Add Subscription interface to auth store
- Add subscription computed properties (isTrialActive, isExpired, etc.)
- Add SubscriptionBanner component (trial warning, expired notice)
- Add SubscriptionExpiredView (blocked access screen)
- Update AppLayout to show banner
- Update router to redirect expired subscriptions

src/views/SubscriptionExpiredView.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth'
+import { useRouter } from 'vue-router'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+const isPaused = authStore.subscription?.status === 'paused'
+
+async function logout() {
+  await authStore.logout()
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center">
+      <div class="text-6xl mb-6">{{ isPaused ? '⏸️' : '⏰' }}</div>
+      
+      <h1 class="text-2xl font-bold text-gray-900 mb-4">
+        {{ isPaused ? 'Account pausiert' : 'Testphase beendet' }}
+      </h1>
+      
+      <p class="text-gray-600 mb-6">
+        <template v-if="isPaused">
+          Ihr Account wurde vorübergehend pausiert. Dies kann an einer ausstehenden Zahlung liegen.
+          Bitte kontaktieren Sie unseren Support.
+        </template>
+        <template v-else>
+          Ihre 14-tägige Testphase ist leider abgelaufen. 
+          Um SeCu weiter zu nutzen, wählen Sie bitte ein passendes Abonnement.
+        </template>
+      </p>
+
+      <div class="space-y-3">
+        <a 
+          href="https://secu.kronos-soulution.de/#preise"
+          target="_blank"
+          class="block w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition"
+        >
+          {{ isPaused ? '📞 Support kontaktieren' : '💳 Abonnement wählen' }}
+        </a>
+        
+        <button
+          @click="logout"
+          class="block w-full bg-gray-200 text-gray-700 py-3 px-6 rounded-lg font-semibold hover:bg-gray-300 transition"
+        >
+          🚪 Ausloggen
+        </button>
+      </div>
+
+      <div class="mt-8 pt-6 border-t border-gray-200">
+        <p class="text-sm text-gray-500">
+          Fragen? Kontaktieren Sie uns:
+        </p>
+        <a href="mailto:support@kronos-soulution.de" class="text-purple-600 font-medium hover:underline">
+          support@kronos-soulution.de
+        </a>
+      </div>
+    </div>
+  </div>
+</template>