---
// src/components/SubpageMauer.astro
---
<!-- Subpage: Mauer -->
<div x-show="currentPage === 'page-mauer'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
    <div class="max-w-6xl mx-auto space-y-12">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>
        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2025-09</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die Festung im Rheingau</h1>
            <p class="text-stone-400 text-lg font-light leading-relaxed max-w-3xl">
                Ein steiler Hang drohte wegzurutschen. Statt einer kalten Betonwand bauten wir eine bis zu 3 Meter hohe Trockenmauer aus regionalem Quarzit. Stein für Stein im zweihäuptigen Verband – ganz ohne Mörtel. Heute sonnen sich dort Eidechsen und der Hang ist für Generationen gesichert.
            </p>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
            <div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
        </div>
    </div>
</div>