From 2c6dc7a045f14f8b12884fd8f37ef5983cd40697 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:14:40 +0100
Subject: [PATCH] Tooltips gefixt, Bestellprozess und Merkblatt erstellt

---
 .../Ausweis/BilderZusatzsysteme.svelte        |  22 +-
 .../sidebars/cards/cardNavigation.svelte      |   6 +-
 .../bestellprozess-energieausweis/index.astro | 125 +++++---
 .../index.astro                               | 276 ++++++++++++++++++
 4 files changed, 379 insertions(+), 50 deletions(-)
 create mode 100644 src/pages/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/index.astro

diff --git a/src/components/Ausweis/BilderZusatzsysteme.svelte b/src/components/Ausweis/BilderZusatzsysteme.svelte
index 3ffc2ca1..a46d2252 100644
--- a/src/components/Ausweis/BilderZusatzsysteme.svelte
+++ b/src/components/Ausweis/BilderZusatzsysteme.svelte
@@ -35,18 +35,18 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
 ">
 
-<SanierungsOption label="Zentral/Etage" name="zentralheizung" help="Bitte anklicken wenn die Heizwärme <strong>zentral erzeugt</strong> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu." value="ZH" bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}></SanierungsOption>
-<SanierungsOption label="Einzelofen" name="einzelofen" help="Bei <strong>dezentraler Erzeugung</strong> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu." value="EO" bind:checked={gebaeude_aufnahme_allgemein.einzelofen}></SanierungsOption>
-<SanierungsOption label="Durchlauferhitzer (elektrisch)" name="durchlauf_erhitzer" help="Wenn <strong>dezentrale</strong> elektrische <strong>Warmwassererzeugung</strong> vorhanden ist" value="DH" bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}></SanierungsOption>
+<SanierungsOption label="Zentral/Etage" name="zentralheizung" help="Bitte anklicken wenn die Heizwärme <b>zentral erzeugt</b> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu." value="ZH" bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}></SanierungsOption>
+<SanierungsOption label="Einzelofen" name="einzelofen" help="Bei <b>dezentraler Erzeugung</b> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu." value="EO" bind:checked={gebaeude_aufnahme_allgemein.einzelofen}></SanierungsOption>
+<SanierungsOption label="Durchlauferhitzer (elektrisch)" name="durchlauf_erhitzer" help="Wenn <b>dezentrale</b> elektrische <b>Warmwassererzeugung</b> vorhanden ist" value="DH" bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}></SanierungsOption>
 <SanierungsOption label="Standardkessel" name="standard_kessel" help="Gemeint sind Konstanttemperaturkessel und ältere Gebläse- oder Feststoffkessel" value="SK" bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}></SanierungsOption>
-<SanierungsOption label="Solarsystem für Warmwasser" name="solarsystem_warmwasser" help="Solarpanele auf dem Dach zur <strong>alternativen Warmwassererzeugung</strong> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik." value="SSWW" bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}></SanierungsOption>
-<SanierungsOption label="Wärmepumpe" name="waermepumpe" help="Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <strong>Umgebungsluft, dem Erdreich oder Grundwasser</strong> nutzbar macht." value="WP" bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}></SanierungsOption>
-<SanierungsOption label="Niedertemperaturkessel" name="niedertemperatur_kessel" help="Heizkessel der mit <strong>niedrigen Vorlauftemperaturen</strong> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt." value="NK" bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}></SanierungsOption>
-<SanierungsOption label="Brennwertkessel" name="brennwert_kessel" help="Hat einen besonders <strong>hohen Wirkungsgrad</strong> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}></SanierungsOption>
-<SanierungsOption label="Warmwasserrohre gedämmt" name="warmwasser_rohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}></SanierungsOption>
-<SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen.ext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
-<SanierungsOption label="Zirkulation" name="zirkulation" help="Kreislauf von Heizungs- oder Warmwasser <strong>innerhalb eines Leitungssystems</strong>, um eine gleichmäßige Wärmeverteilung sicherzustellen." value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
-<SanierungsOption label="Photovoltaik auf dem Dach" name="photovoltaik" help="Direkte Umwandlung von Sonnenlicht in <strong>elektrische Energie</strong> mittels Solarzellen, die den photoelektrischen Effekt nutzen." value="PV" bind:checked={gebaeude_aufnahme_allgemein.photovotaik}></SanierungsOption>
+<SanierungsOption label="Solarsystem für Warmwasser" name="solarsystem_warmwasser" help="Solarpanele auf dem Dach zur <b>alternativen Warmwassererzeugung</b> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik." value="SSWW" bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}></SanierungsOption>
+<SanierungsOption label="Wärmepumpe" name="waermepumpe" help="Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <b>Umgebungsluft, dem Erdreich oder Grundwasser</b> nutzbar macht." value="WP" bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}></SanierungsOption>
+<SanierungsOption label="Niedertemperaturkessel" name="niedertemperatur_kessel" help="Heizkessel der mit <b>niedrigen Vorlauftemperaturen</b> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt." value="NK" bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}></SanierungsOption>
+<SanierungsOption label="Brennwertkessel" name="brennwert_kessel" help="Hat einen besonders <b>hohen Wirkungsgrad</b> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}></SanierungsOption>
+<SanierungsOption label="Warmwasserrohre gedämmt" name="warmwasser_rohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}></SanierungsOption>
+<SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen.ext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
+<SanierungsOption label="Zirkulation" name="zirkulation" help="Kreislauf von Heizungs- oder Warmwasser <b>innerhalb eines Leitungssystems</b>, um eine gleichmäßige Wärmeverteilung sicherzustellen." value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
+<SanierungsOption label="Photovoltaik auf dem Dach" name="photovoltaik" help="Direkte Umwandlung von Sonnenlicht in <b>elektrische Energie</b> mittels Solarzellen, die den photoelektrischen Effekt nutzen." value="PV" bind:checked={gebaeude_aufnahme_allgemein.photovotaik}></SanierungsOption>
 </div>
 
 <HeizungImage bind:images bind:ausweis bind:gebaeude />
diff --git a/src/components/design/sidebars/cards/cardNavigation.svelte b/src/components/design/sidebars/cards/cardNavigation.svelte
index 8e4a84ac..778bd295 100644
--- a/src/components/design/sidebars/cards/cardNavigation.svelte
+++ b/src/components/design/sidebars/cards/cardNavigation.svelte
@@ -125,7 +125,7 @@ if(innerWidth>1024){
     <a href={undefined} class="nav-element-child">Angebot anfragen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {/if}
     
-    <ul class="dropdown-content energieasusweis-erstellen">
+    <ul class="dropdown-content angebot-anfragen">
       {#if innerWidth < 1023}
       <li><a href="/energieausweis-erstellen">Angebot anfragen</a></li>
       {/if}
@@ -209,11 +209,11 @@ if(innerWidth>1024){
   <a href="/bestellprozess-energieausweis" class="nav-element-child">Bestellprozess Energieausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
   {/if}
 
-<ul class="dropdown-content energieasusweis-erstellen">
+<ul class="dropdown-content bestellprozess-energieausweis">
   {#if innerWidth < 1023}
   <li><a href="/bestellprozess-energieausweis">Bestellprozess Energieausweis</a></li>
   {/if}
-  <li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Merkblatt Verbrauchsausweis Wohnen</a></li>
+  <li><a href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/">Merkblatt Verbrauchsausweis Wohnen</a></li>
   <li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Merkblatt Bedarfsausweis Wohnen</a></li>
   <li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Merkblatt Verbrauchsausweis Gewerbe</a></li>
 </ul>
diff --git a/src/pages/bestellprozess-energieausweis/index.astro b/src/pages/bestellprozess-energieausweis/index.astro
index 3574a5d6..8d2be4c6 100644
--- a/src/pages/bestellprozess-energieausweis/index.astro
+++ b/src/pages/bestellprozess-energieausweis/index.astro
@@ -8,72 +8,125 @@ import Layout from "#layouts/Layout.astro";
 
 <h1>Bestellprozess Energieausweis</h1>
 
-<div class="bestellprozess space-y-10 p-6 bg-gray-100 rounded-lg shadow-lg">
+<div class="bestellprozess space-y-5 p-8">
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 1: Online-Check</h2>
-      <p class="text-gray-600">Beginnen Sie mit unserem <a href="welcher-energieausweis">Online-Check</a> um festzustellen, welcher Energieausweis für Ihr Gebäude geeignet ist.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 1: Online-Check</h2>
+      <p>Beginnen Sie mit unserem <a href="welcher-energieausweis">Online-Check</a> um festzustellen, welcher Energieausweis für Ihr Gebäude geeignet ist.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 2: Auswahl des passenden Energieausweises</h2>
-      <p class="text-gray-600">Basierend auf den Ergebnissen wird Ihnen der passende Energieausweis angezeigt. Wenn sowohl Verbrauchsausweis als auch Bedarfsausweis möglich sind, empfehlen wir den Bedarfsausweis.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 2: Auswahl des passenden Energieausweises</h2>
+      <p>Basierend auf den Ergebnissen wird Ihnen der passende Energieausweis angezeigt. Wenn sowohl Verbrauchsausweis als auch Bedarfsausweis möglich sind, empfehlen wir den Bedarfsausweis.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 3: Eingabeformular aufrufen</h2>
-      <p class="text-gray-600">
-        Klicken Sie auf "jetzt online erstellen", um zum Eingabeformular für den Energieausweis zu gelangen. Hier sehen Sie alle erforderlichen Informationen auf einen Blick. Eine Zusammenfassung der benötigten Daten und Merkblätter finden Sie hier: <a href="#" class="text-blue-500 underline">Merkblätter Energieausweis</a>.
+    <div class="bestellprocess">
+      <h2>Schritt 3: Eingabeformular aufrufen</h2>
+      <p>
+        Klicken Sie auf "jetzt online erstellen", um zum Eingabeformular für den Energieausweis zu gelangen. Hier sehen Sie alle erforderlichen Informationen auf einen Blick. 
+        Eine Zusammenfassung der benötigten Daten und Merkblätter finden Sie hier: <a href="bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen">Merkblatt Verbrauchsausweis Wohnen</a>.
       </p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 4: Dateneingabe und Fotos hochladen</h2>
-      <p class="text-gray-600">Geben Sie die nötigen Gebäudedaten ein und laden Sie Fotos hoch. Angaben zum Sanierungsstand sind wichtig, um passende Modernisierungsempfehlungen zu erhalten. Bei Problemen können Sie über den <span class="font-medium">"Hilfe"</span>-Button unseren Offline-Service anfordern.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 4: Dateneingabe und Fotos hochladen</h2>
+      <p>Geben Sie die nötigen Gebäudedaten ein und laden Sie Fotos hoch. Angaben zum Sanierungsstand sind wichtig, um passende Modernisierungsempfehlungen zu erhalten. Bei Problemen können Sie über den <span class="font-medium">"Hilfe"</span>-Button unseren Offline-Service anfordern.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 5: Eingaben überprüfen</h2>
-      <p class="text-gray-600">Nutzen Sie die Vorschaufunktion für den Ansichtsausweis und das Datenblatt, die im Formular unten rechts aufrufbar sind. Der Anzeigebalken zu den Energiekennwerten wird während der Eingabe live aktualisiert.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 5: Eingaben überprüfen</h2>
+      <p>Nutzen Sie die Vorschaufunktion für den Ansichtsausweis und das Datenblatt, die im Formular unten rechts aufrufbar sind. Der Anzeigebalken zu den Energiekennwerten wird während der Eingabe live aktualisiert.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 6: Kundendaten eingeben und Vorprüfung</h2>
-      <p class="text-gray-600">Klicken Sie auf <span class="font-medium">"Weiter"</span>, um Ihre Kundendaten einzugeben und eine automatische Vorprüfung durchzuführen. Falls Punkte unvollständig sind, können Sie über <span class="font-medium">"zurück"</span> Ihre Eingaben korrigieren.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 6: Kundendaten eingeben und Vorprüfung</h2>
+      <p>Klicken Sie auf <span class="font-medium">"Weiter"</span>, um Ihre Kundendaten einzugeben und eine automatische Vorprüfung durchzuführen. Falls Punkte unvollständig sind, können Sie über <span class="font-medium">"zurück"</span> Ihre Eingaben korrigieren.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 7: Konto erstellen oder einloggen</h2>
-      <p class="text-gray-600">Sollten Sie noch kein Konto besitzen, wird automatisch ein Kundenkonto für Sie erstellt. Bestehende Kunden werden gebeten, sich einzuloggen, falls noch nicht geschehen.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 7: Konto erstellen oder einloggen</h2>
+      <p>Sollten Sie noch kein Konto besitzen, wird automatisch ein Kundenkonto für Sie erstellt. Bestehende Kunden werden gebeten, sich einzuloggen, falls noch nicht geschehen.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 8: Kaufabschluss und Zusatzservices</h2>
-      <p class="text-gray-600">Nach einer kurzen Zusammenfassung können Sie den Kauf abschließen. Hier haben Sie auch die Möglichkeit, Zusatzservices wie Postversand, Same-Day-Service oder eine Energieeffizienzberatung zu buchen.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 8: Kaufabschluss und Zusatzservices</h2>
+      <p>Nach einer kurzen Zusammenfassung können Sie den Kauf abschließen. Hier haben Sie auch die Möglichkeit, Zusatzservices wie Postversand, Same-Day-Service oder eine Energieeffizienzberatung zu buchen.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 9: Bezahlung</h2>
-      <p class="text-gray-600">Wählen Sie eine der angebotenen Bezahlmethoden, wie Rechnung, PayPal, Giropay, Sofortüberweisung oder Kreditkarte.</p>
+    <div class="bestellprocess">
+      <h2>Schritt 9: Bezahlung</h2>
+      <p>Wählen Sie eine der angebotenen Bezahlmethoden, wie Rechnung, PayPal, Giropay, Sofortüberweisung oder Kreditkarte.</p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="step border-b border-gray-300 pb-6">
-      <h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 10: Bestellung abschließen</h2>
-      <p class="text-gray-600">
+    <div class="bestellprocess">
+      <h2>Schritt 10: Bestellung abschließen</h2>
+      <p>
         Bestätigen Sie die AGB und die Datenschutzerklärung, und klicken Sie auf <span class="font-medium">"kostenpflichtig bestellen"</span>, um den Bestellvorgang abzuschließen.
       </p>
     </div>
+
+    <div class="flex items-center justify-center">
+        <span class="text-4xl">🠗</span>
+      </div>
   
-    <div class="confirmation mt-8 bg-white p-6 rounded-lg shadow-md">
-      <h3 class="text-xl font-semibold text-gray-800 mb-4">Nach der Bestellung erhalten Sie:</h3>
-      <ul class="list-disc ml-6 text-gray-600 space-y-2">
+    <div class="bestellprocess">
+      <h2>Nach der Bestellung erhalten Sie:</h2>
+      <ul class="list-disc ml-6 space-y-2">
         <li>Eine Bestellbestätigung auf dem Bildschirm und per E-Mail.</li>
         <li>Den Ansichtsausweis per E-Mail.</li>
         <li>Das Datenblatt zur Prüfung in einer separaten E-Mail.</li>
       </ul>
-      <p class="text-gray-600 mt-4">Der Energieausweis wird frühestens 12 Stunden nach Bestellung (außer beim Same-Day-Service) von uns geprüft. Sie können vor der Ausstellung noch Korrekturen vornehmen, falls erforderlich.</p>
+      <p class="mt-4">Der Energieausweis wird frühestens 12 Stunden nach Bestellung (außer beim Same-Day-Service) von uns geprüft. Sie können vor der Ausstellung noch Korrekturen vornehmen, falls erforderlich.</p>
     </div>
   </div>
   
+  <style lang="scss">
+
+    .bestellprocess {
+        @apply p-4 lg:shadow-box lg:ring-1 lg:ring-gray-300;
+
+        h2		{@apply w-full font-bold pb-2 mb-4 border-b-[1.5px] border-secondary/35}
+	    hr		{@apply my-0}
+	    p		{@apply text-lg}
+	    a		{@apply text-lg}  
+    }
+
+</style>
 
 </Layout>
\ No newline at end of file
diff --git a/src/pages/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/index.astro b/src/pages/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/index.astro
new file mode 100644
index 00000000..a74cfbd9
--- /dev/null
+++ b/src/pages/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/index.astro
@@ -0,0 +1,276 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Merkblatt Verbrauchsausweis Wohnen">
+
+<h1>Merkblatt Verbrauchsausweis Wohnen</h1>
+     
+
+<div class="container mx-auto p-8 space-y-8">
+    <!-- Abschnitt A -->
+    <section class="merkblatt">
+      <h2>Abschnitt A: Prüfung der Ausweisart</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Anlass*</p>
+          <p>Auswahlmöglichkeiten: Neubau, Vermietung, Verkauf, Modernisierung, Sonstiges</p>
+          <p class="text-sm italic">Hinweis: Wählen Sie den Grund für die Ausstellung des Energieausweises.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Gebäudetyp*</p>
+          <p>Auswahlmöglichkeiten: Einfamilienhaus, Mehrfamilienhaus, Wohn- und Geschäftshaus, Doppelhaushälfte etc.</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, welche Art von Gebäude vorliegt.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Sanierungsstatus*</p>
+          <p>Auswahlmöglichkeiten: Saniert, Unsaniert</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob das Gebäude energetisch saniert wurde. Ein saniertes Gebäude hat z. B. gedämmte Wände, Dach und neue Fenster.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Baujahr*</p>
+          <p>Eingabe: Jahreszahl</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie das Baujahr des Gebäudes an. Falls umfangreiche Sanierungen erfolgt sind, wählen Sie "saniert".</p>
+        </div>
+        <div>
+          <p class="font-semibold">Baujahr Heizung*</p>
+          <p>Eingabe: Jahreszahl</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie das Baujahr der Heizungsanlage an. Falls unterschiedliche Baujahre vorliegen, geben Sie einen Zeitraum an (z. B. 1994-2001).</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- Abschnitt B -->
+    <section class="merkblatt">
+      <h2>Abschnitt B: Eingabe der Gebäudeadresse</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Straße, Hausnummer*</p>
+          <p>Eingabe: Textfeld</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die genaue Adresse des Gebäudes ein.</p>
+        </div>
+        <div>
+          <p class="font-semibold">PLZ*</p>
+          <p>Eingabe: Fünfstellige Zahl</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Nach Eingabe der Postleitzahl wird der Ort automatisch ergänzt.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Wohnfläche (m²)*</p>
+          <p>Eingabe: Zahl</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die beheizte Wohnfläche in Quadratmetern an.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Keller*</p>
+          <p>Auswahlmöglichkeiten: Nicht vorhanden, Unbeheizt, Beheizt</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie den Zustand des Kellers an.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Gesamtfläche (m²)</p>
+          <p>Eingabe: Zahl</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die beheizte Gesamtfläche des Gebäudes ein (Wohnfläche + weitere beheizte Flächen wie Keller).</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- Abschnitt C -->
+    <section class="merkblatt">
+      <h2>Abschnitt C: Energieverbrauchsangaben</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Heizquelle*</p>
+          <p>Auswahlmöglichkeiten: Primäre Heizquelle, Zusätzliche Heizquelle (Checkboxen)</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Wählen Sie alle genutzten Heizquellen aus.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Verbrauchszeitraum (Start)</p>
+          <p>Eingabe: Monat und Jahr (z. B. Januar 2021)</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie den Startmonat und das Jahr des Verbrauchszeitraums an.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Primärer Brennstoff*</p>
+          <p>Auswahlmöglichkeiten: Heizöl, Erdgas, Holzpellets, Strommix, Fernwärme etc.</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Wählen Sie den hauptsächlich genutzten Brennstoff aus.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Einheit des Brennstoffverbrauchs*</p>
+          <p>Auswahlmöglichkeiten: kWh, Liter, Schüttraummeter (SRm)</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die Einheit des Brennstoffverbrauchs an.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Verbrauchswerte für 3 Jahre*</p>
+          <p>Eingabe: Zahlen für die letzten drei Verbrauchsjahre</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Tragen Sie den Verbrauch für den angegebenen Zeitraum ein.</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- Abschnitt D -->
+    <section class="merkblatt">
+      <h2>Abschnitt D: Warmwasseranteil</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Warmwasser im Verbrauch enthalten</p>
+          <p>Auswahl: Checkbox (Ja/Nein)</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob der Warmwasserverbrauch bereits im angegebenen Energieverbrauch enthalten ist.</p>
+        </div>
+        <div>
+          <p class="font-semibold">% Anteil Warmwasser</p>
+          <p>Eingabe: Zahl</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Falls bekannt, geben Sie den Anteil des Warmwassers in Prozent an.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Zusätzliche Heizquelle</p>
+          <p>Eingabe: Zahl</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Falls bekannt, geben Sie den Warmwasseranteil der zusätzlichen Heizquelle an.</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- Abschnitt E -->
+    <section class="merkblatt">
+      <h2>Abschnitt E: Angaben zur Lüftung und Kühlung</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Lüftung durch*</p>
+          <p>Auswahlmöglichkeiten: Fensterlüftung, Schachtlüftung, Lüftungsanlage ohne WRG, Lüftungsanlage mit WRG</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, wie das Gebäude belüftet wird.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Kühlung (Anlage vorhanden)*</p>
+          <p>Auswahlmöglichkeiten: Ja, Nein</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob eine Kühlanlage im Sommer verwendet wird.</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- Abschnitt F -->
+    <section class="merkblatt">
+      <h2>Abschnitt F: Angaben zur Heizungsanlage</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Zentralheizung/Etagenheizung</p>
+          <p>Auswahl: Checkbox</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Heizwärme wird zentral erzeugt und von dort in die Räume verteilt.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Einzelofen</p>
+          <p>Auswahl: Checkbox</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Dezentraler Heizwärmeerzeuger wie Kamin- oder Kachelofen.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Wärmepumpe</p>
+          <p>Auswahl: Checkbox</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Elektrisch betriebene Wärmeerzeuger, die Energie aus Umgebungsluft, Erdreich oder Wasser nutzen.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Solarthermieanlage</p>
+          <p>Auswahl: Checkbox</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Solarsysteme zur Warmwasserbereitung.</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- Abschnitt G -->
+    <section class="merkblatt">
+      <h2>Abschnitt G: Angaben zu Fenstern, Türen und Rollläden</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Fensterarten*</p>
+          <p>Auswahlmöglichkeiten: Einfachverglasung, Doppelverglasung, Dreifachverglasung, Isolierverglasung</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie die Art der Verglasung an.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Zustand der Fenster/Türen</p>
+          <p>Auswahlmöglichkeiten: Alle Fenster dicht, Fenster teilweise undicht, Alle Türen dicht, Türen teilweise undicht</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie den Zustand der Fenster und Türen an.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Rollläden</p>
+          <p>Auswahl: Checkbox (gedämmt/luftdicht)</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob die Rollladenkästen gedämmt sind.</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- Abschnitt H -->
+    <section class="merkblatt">
+      <h2>Abschnitt H: Angaben zur Wärmedämmung</h2>
+      <div class="mt-4 space-y-4">
+        <div>
+          <p class="font-semibold">Außenwand gedämmt</p>
+          <p>Auswahl: Checkbox</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob die Außenwand gedämmt ist.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Kellerwand/Kellerdecke gedämmt</p>
+          <p>Auswahl: Checkbox</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob die Kelleraußenwände oder Kellerdecken gedämmt sind.</p>
+        </div>
+        <div>
+          <p class="font-semibold">Dachgeschoss/Oberste Geschossdecke gedämmt</p>
+          <p>Auswahl: Checkbox</p>
+          <p class="text-sm text-gray-600 italic">Hinweis: Geben Sie an, ob das Dachgeschoss oder die oberste Geschossdecke gedämmt ist.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Bildanforderungen -->
+  <section class="merkblatt">
+    <h2>Bildanforderungen</h2>
+    <div class="mt-4 space-y-4">
+      <div>
+        <p class="font-semibold">Heizungsanlage (1-4 Bilder)</p>
+        <p class="text-sm text-gray-600 italic">Hinweis: Stellen Sie sicher, dass die Heizungsanlage aus verschiedenen Perspektiven gut erkennbar ist.</p>
+      </div>
+      <div>
+        <p class="font-semibold">Fenster/Türen (mind. 1 Bild)</p>
+        <p class="text-sm text-gray-600 italic">Hinweis: Zeigen Sie typische Fenster und Türen des Gebäudes. Achten Sie darauf, dass der Zustand der Rahmen und Verglasung sichtbar ist.</p>
+      </div>
+      <div>
+        <p class="font-semibold">Wärmedämmung (mind. 2 Bilder)</p>
+        <p class="text-sm text-gray-600 italic">Hinweis: Dokumentieren Sie die gedämmten Bereiche, z. B. Außenwände, Kellerdecken oder das Dachgeschoss.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Hinweise -->
+  <section class="merkblatt">
+    <h2>Hinweise zum Bildupload</h2>
+    <div class="mt-4 space-y-4">
+      <div>
+        <p class="font-semibold">Format der Bilder:</p>
+        <p>JPEG, PNG oder PDF (max. 5 MB pro Bild).</p>
+        <p class="text-sm text-gray-600 italic">Hinweis: Achten Sie darauf, dass die Bilddateien klar und nicht unscharf sind.</p>
+      </div>
+      <div>
+        <p class="font-semibold">Anzahl der Bilder:</p>
+        <p>Mindestens 1 Bild pro Bereich (z. B. Heizung, Fenster, Wärmedämmung).</p>
+        <p class="text-sm text-gray-600 italic">Hinweis: Mehr Bilder erhöhen die Aussagekraft, besonders bei komplexen Sanierungen.</p>
+      </div>
+      <div>
+        <p class="font-semibold">Qualität der Bilder:</p>
+        <p>Ausreichende Beleuchtung und Schärfe, damit Details gut erkennbar sind.</p>
+        <p class="text-sm text-gray-600 italic">Hinweis: Achten Sie auf helle Lichtverhältnisse oder verwenden Sie eine Kamera mit Blitz.</p>
+      </div>
+    </div>
+  </section>
+
+  </div>
+
+  <style lang="scss">
+
+    .merkblatt {
+        @apply p-4 lg:shadow-box lg:ring-1 lg:ring-gray-300;
+
+        h2		{@apply w-full font-bold pb-2 mb-4 border-b-[2px] border-secondary/35}
+	    hr		{@apply my-0}
+	    p		{@apply text-lg}
+	    a		{@apply text-lg}  
+    }
+
+</style>
+
+</Layout>
+