---
// src/components/Events.astro
// HINWEIS: Umbenannt von Events zu Kernkompetenzen (Pflanzen, Bauten, Gehölze)
---
<!-- Core Competencies Section -->
<section id="competencies" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="mb-20 text-center">
            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Unsere Kernkompetenzen</span>
            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Pflanzen, Bauten & Gehölze</h2>
            <p class="text-stone-500 max-w-2xl mx-auto font-light">Wir konzentrieren uns auf das Wesentliche: Ausgeklügeltes Handwerk und botanische Präzision. Kein Schnickschnack, nur echte Qualität.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Pflanzen -->
            <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
                    <i class="fa-solid fa-seedling"></i>
                </div>
                <h3 class="text-xl font-luxury font-bold text-white mb-3">Pflanzen</h3>
                <p class="text-stone-400 text-sm font-light leading-relaxed">
                    Ausgeklügelte Pflanzkonzepte mit Fokus auf Biodiversität. Wir setzen auf standortgerechte Stauden und klimaresistente Arten, deren Eignung wir vorab über <a href="https://plantlix.de" target="_blank" class="text-amber-400/80 hover:underline">Plantlix.de</a> verifizieren.
                </p>
            </div>

            <!-- Bauten -->
            <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
                    <i class="fa-solid fa-trowel-bricks"></i>
                </div>
                <h3 class="text-xl font-luxury font-bold text-white mb-3">Bauten</h3>
                <p class="text-stone-400 text-sm font-light leading-relaxed">
                    Präzise Steinmetzarbeiten und Trockenmauerwerk nach DIN 18915. Langlebige Konstruktionen im zweihäuptigen Verband, die Struktur geben und Generationen überdauern.
                </p>
            </div>

            <!-- Gehölze -->
            <div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
                <div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
                    <i class="fa-solid fa-tree"></i>
                </div>
                <h3 class="text-xl font-luxury font-bold text-white mb-3">Gehölze</h3>
                <p class="text-stone-400 text-sm font-light leading-relaxed">
                    Charakterstarke Solitärgehölze und Großbäume. Wir wählen jedes Gehölz passend zum Mikroklima aus und pflanzen mit optimalem Wurzelraum für gesundes Wachstum.
                </p>
            </div>
        </div>
    </div>
</section>