---
import Base from '../layouts/Base.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE } from '../data/site';
---

<Base title={`Seite nicht gefunden · ${SITE.name}`} description="Diese Seite existiert nicht.">
  <Header />

  <main class="mx-auto flex min-h-svh max-w-3xl flex-col items-center justify-center px-5 py-32 text-center sm:px-8">
    <p class="font-display text-[clamp(5rem,18vw,10rem)] leading-none text-white/10">404</p>
    <h1 class="mt-2 font-display text-3xl text-white sm:text-4xl">Hier läuft nichts</h1>
    <p class="mt-4 max-w-md text-white/60">
      Diese Seite gibt es nicht (mehr). Zurück zum Start – dort spielt die Musik.
    </p>
    <a
      href="/"
      class="mt-9 rounded-full bg-gold-400 px-7 py-4 font-semibold text-ink-950 transition duration-300 hover:bg-gold-300 hover:shadow-[0_0_36px_-6px] hover:shadow-gold-400/70"
    >
      Zur Startseite
    </a>
  </main>

  <Footer />
</Base>
