<template>
  <div class="min-h-screen flex items-center justify-center px-4">
    <div class="text-center">
      <div class="text-8xl font-bold text-slate-200 mb-4">404</div>
      <h1 class="text-2xl font-bold text-slate-800 mb-2">Seite nicht gefunden</h1>
      <p class="text-slate-500 mb-8">Die Seite, die du suchst, existiert nicht.</p>
      <router-link 
        to="/"
        class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-600 transition-colors"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
        Zum Dashboard
      </router-link>
    </div>
  </div>
</template>