---
import Layout from "#layouts/Layout.astro";
---

<Layout title="Bedarfsausweis · Energieausweis online erstellen">

    <h1>Bedarfsausweis</h1>
    <h2>Für Wohngebäude & Nichtwohngebäude</h2>

    <div class="max-w-4xl mx-auto px-6 py-12">
        
        <!-- Einleitung -->
        <p class="text-lg text-gray-700 mb-6">
            Der <strong>Bedarfsausweis</strong> ist der umfangreichere 
            <a href="/" class="text-blue-600 hover:underline">Energieausweis</a>.  
            Er ist für alle Anwendungsfälle zulässig und erforderlich bei:
        </p>

        <ul class="list-disc list-inside space-y-2 text-lg text-gray-700 mb-8">
            <li>Vermietung & Verkauf ohne vollständige Verbrauchsdaten</li>
            <li>Gebäude mit Baujahr vor 1978</li>
            <li>Neubau oder Modernisierung</li>
        </ul>

        <hr class="border-gray-300 my-8">

        <!-- Bedarfsausweis Wohngebäude -->
        <section class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-2xl font-semibold mb-4">Bedarfsausweis Wohngebäude</h2>
            <div class="flex flex-col sm:flex-row items-center sm:space-x-6">
                <img src="/images/energieausweis-online-erstellen-verbrauchsausweis.png"
                    alt="Energieausweis online erstellen - Bedarfsausweis"
                    class="w-48 h-auto rounded-lg shadow-md mb-4 sm:mb-0">
                <ul class="list-disc list-inside space-y-2 text-gray-700 text-lg">
                    <li>Angabe der Heizungsanlage (z.B. Brennwertkessel).</li>
                    <li>Grundrissgeometrie, Baujahr Heizung & Gebäude erforderlich.</li>
                    <li>Bei allen Gebäuden möglich, detaillierte Berechnung.</li>
                </ul>
            </div>
            <a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude"
                class="mt-4 inline-block bg-secondary text-white text-lg font-semibold px-6 py-3 rounded-lg hover:bg-blue-700">
                Jetzt Bedarfsausweis erstellen
            </a>
        </section>

        <hr class="border-gray-300 my-8">

        <!-- Wohngebäude Eingabedaten -->
        <section>
            <h2 class="text-2xl font-semibold mb-4">Eingabedaten für Wohngebäude</h2>

            <div class="space-y-6">
                <div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Kontakt & Gebäudedaten</h3>
                    <ul class="list-disc list-inside text-gray-700">
                        <li>Name, Anrede & E-Mail des Ansprechpartners</li>
                        <li>Rechnungs- & Versandadresse</li>
                        <li>Gebäudeangaben: Wohnfläche, Baujahr, Anzahl Geschosse</li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Maße & Technische Angaben</h3>
                    <ul class="list-disc list-inside text-gray-700">
                        <li>Grundrissgeometrie & Außenhaut-Aufbau</li>
                        <li>Dämmzustand von Dach, Wänden & Fußboden</li>
                        <li>Fensterflächen & Isoliergrad</li>
                        <li>Anlagentechnik: Brennstoff, Warmwasserbereitung, Heizsystem</li>
                    </ul>
                </div>
            </div>
        </section>

        <hr class="border-gray-300 my-8">

        <!-- Bedarfsausweis Gewerbe -->
        <section>
            <h2 class="text-2xl font-semibold mb-4">Bedarfsausweis Nichtwohngebäude</h2>

            <div class="space-y-6">
                <div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Notwendige Pläne & Daten</h3>
                    <ul class="list-disc list-inside text-gray-700">
                        <li>Aktuelle Grundriss- & Ansichtspläne</li>
                        <li>Baubeschreibung mit Materialien & Technik</li>
                        <li>Baujahr der Heizung, Gebäude & Klimaanlage</li>
                    </ul>
                </div>
            </div>
        </section>

        <hr class="border-gray-300 my-8">

        <!-- Weitere Informationen -->
        <section>
            <h2 class="text-2xl font-semibold mb-4">Weitere Informationen</h2>
            <ul class="list-disc list-inside text-blue-600 text-lg">
                <li><a href="/bedarfsausweis/bedarfsausweis-wohngebaeude" class="hover:underline">Bedarfsausweis Wohngebäude</a></li>
                <li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis" class="hover:underline">Häufige Fragen</a></li>
                <li><a href="/bedarfsausweis/statistiken-zum-bedarfsausweis" class="hover:underline">Statistiken</a></li>
            </ul>
        </section>

    </div>

</Layout>