<section class="relative w-full">
    <!-- Hintergrundbild mit zweischichtigem Overlay -->
    <div class="absolute inset-0 z-0">
        <img src="/assets/img/hero.jpg"
             alt="Hintergrundbild"
             class="w-full h-full object-cover opacity-50">
        <!-- Farbiges Overlay -->
        <div class="absolute inset-0 bg-blue-500/40"></div>
    </div>

    <!-- Content Container -->
    <div class="relative z-10 container mx-auto max-w-7xl px-4 py-24 md:py-32 sm:px-6 lg:px-8">
        <!-- Zwei-Spalten-Layout -->
        <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
            <!-- Linke Spalte - Text -->
            <div class="w-full lg:w-1/2">
                <div class="prose prose-invert">
                    <h2 class="text-4xl font-bold text-sf_blau-500 mb-6"><?= $page->title() ?></h2>
                    <p class="text-lg text-white">
                        Ihr Text kommt hier. Lorem ipsum dolor sit amet,
                        consectetur
                        adipiscing elit.
                    </p>
                </div>
            </div>

            <!-- Rechte Spalte - GIF -->
            <div class="w-3/4 md:w-1/2">
                <div class="rounded-lg overflow-hidden shadow-xl">
                    <img src="/assets/img/Hort-Martius-2.gif"
                         alt="Animation"
                         class="w-full h-auto">
                </div>
            </div>
        </div>
    </div>
</section>