<!-- /error.vue  (Nuxt automatically serves this for 404 routes) -->
<template>
  <section
      class="flex min-h-screen flex-col items-center justify-center
           bg-neutral-100 px-4 text-center"
  >
    <!-- Icon -->
    <UIcon
        name="i-heroicons-face-frown"
        class="h-16 w-16 text-primary-600 mb-6"
    />

    <!-- Headline -->
    <h1 class="text-4xl font-bold text-neutral-900 mb-2">
      Seite nicht gefunden
    </h1>

    <!-- Sub-copy -->
    <p class="max-w-md text-neutral-600 mb-8">
      Die gewünschte Seite existiert leider nicht (mehr) oder der Link war
      fehlerhaft. Versuchen Sie es über die Startseite noch einmal.
    </p>

    <!-- CTA -->
    <UButton
        to="/"
        size="lg"
        color="primary"
        variant="solid"
        trailing-icon="i-heroicons-arrow-uturn-left"
    >
      Zur Startseite
    </UButton>
  </section>
</template>

<script setup lang="ts">
definePageMeta({layout: false, statusCode: 404})
</script>
