{# Your header goes here #}
<div class="relative flex items-center justify-center">
    <img src="{{'header.jpg' | media }}" class="w-full h-[40vh] md:h-full object-cover" />
    <div class="absolute top-6 w-full left-0">
        <div class="container">
            <div class="flex justify-center items-center rounded-xl lg:text-xl font-bold overflow-hidden from-lime-300/60 to-rose-300/60 bg-gradient-to-tr backdrop-blur">
                <a class="text-red-900 hover:text-neutral-900 py-2 lg:py-4 px-2 lg:px-6 hover:bg-neutral-500/40 transition duration-400"  href="/#ausstattung">Ausstattung</a>
                <a class="text-red-900 hover:text-neutral-900 py-2 lg:py-4 px-2 lg:px-6 hover:bg-neutral-500/40 transition duration-400" href="/#buchen">Buchungsanfrage</a>
                <a class="text-red-900 hover:text-neutral-900 py-2 lg:py-4 px-2 lg:px-6 hover:bg-neutral-500/40 transition duration-400" href="/#faq">FAQ</a>
            </div>
        </div>
    </div>

    <div class="hidden lg:block absolute left-0 w-full">
        <div class="container flex justify-left">
            <div class="bg-rose-300/80 py-4 px-6 backdrop-blur rounded-lg text-red-900">
                <h1 class="text-red-900 text-2xl font-bold">
                    Discothek St. Katharina
                </h1>
                <p class="mt-2">
                    Partyraum in Solingen Wald
                </p>
                <p>
                    Für Geburtstage, Firmenfeiern und Partys aller Art.
                </p>
                <a class="bg-red-500 py-2 px-5 mt-5 text-lg transition hover:bg-rose-500 inline-block rounded-lg" href="/#buchen">Jetzt unverbindlich anfragen</a>
            </div>
        </div>
    </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" class="w-full h-10 text-neutral-900 -mt-10 relative">
  <path fill="currentColor" class="hidden lg:block" fill-opacity="1" d="M0,128L144,96L288,320L432,0L576,64L720,160L864,32L1008,64L1152,0L1296,128L1440,32L1440,320L1296,320L1152,320L1008,320L864,320L720,320L576,320L432,320L288,320L144,320L0,320Z"></path>
  <path fill="currentColor" class="lg:hidden" fill-opacity="1" d="M0,160L288,192L576,256L864,128L1152,192L1440,96L1440,320L1152,320L864,320L576,320L288,320L0,320Z"></path>
</svg>