From a4e40309aa3508051cfbdd2b9bedc47a8e1f410c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 1 Dec 2024 17:31:10 +0100
Subject: [PATCH 001/165] Header fix

---
 src/components/design/header/Header.astro | 1 +
 1 file changed, 1 insertion(+)
diff --git a/src/components/design/header/Header.astro b/src/components/design/header/Header.astro
index 4d09f541..0d61a0bc 100644
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -9,6 +9,7 @@ import Login from "#sidebarCards/card-login.svelte";
 
 
 
+	
 <!---
 		
 		

From aeaf5f24d43f6f6088fdaee6576741c6a23229ec Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 1 Dec 2024 18:00:49 +0100
Subject: [PATCH 002/165] Header fix 3

---
 src/components/design/content/banner-saeule.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/design/content/banner-saeule.svelte b/src/components/design/content/banner-saeule.svelte
index cd9ecffc..6077a35c 100644
--- a/src/components/design/content/banner-saeule.svelte
+++ b/src/components/design/content/banner-saeule.svelte
@@ -4,6 +4,7 @@
  import BApromo from "#sidebarCards/card-BA-promo.svelte";
 </script>
 
+
 <div id="saeulen">
     <div class="saeule">
       <VApromo client:load /> 

From 9dad6932b26a65b7988f59c0c02e664abb29e69a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 1 Dec 2024 18:03:59 +0100
Subject: [PATCH 003/165] Header fix 4

---
 src/components/design/header/Header.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/design/header/Header.astro b/src/components/design/header/Header.astro
index 0d61a0bc..5beb3080 100644
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -3,6 +3,7 @@ import Login from "#sidebarCards/card-login.svelte";
 
 ---
 
+
 <header>
 
 <div class="flex flex-row max-w-[1920px] w-full bg-white p-2">

From c532745951ec29c80a38d018f75be87a561e47ef Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 1 Dec 2024 19:13:11 +0100
Subject: [PATCH 004/165] Test Server

---
 .github/workflows/dev-pipeline.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/dev-pipeline.yml b/.github/workflows/dev-pipeline.yml
index 8ee7c416..bd2f8e23 100644
--- a/.github/workflows/dev-pipeline.yml
+++ b/.github/workflows/dev-pipeline.yml
@@ -1,5 +1,5 @@
 name: Dev Pipeline
-
+ 
 on:
   pull_request:
     branches: [main]

From 1dbd4364fc322a642c9a620574fcb3e6c65f5779 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:47:01 +0100
Subject: [PATCH 005/165] FAQ Startseite

---
 src/components/design/content/faq.svelte | 100 +++++++++++++++++++++++
 src/pages/faq/index.astro                |   8 +-
 2 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 src/components/design/content/faq.svelte

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
new file mode 100644
index 00000000..68eb9909
--- /dev/null
+++ b/src/components/design/content/faq.svelte
@@ -0,0 +1,100 @@
+
+<div class="mt-12 m-auto w-[90%] relative">
+<div id="faqs">
+
+<div class="bg-gray-100 p-6 rounded-md shadow-md max-w-5xl mx-auto">
+
+  <!-- Allgemeines -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-gray-700 mb-4">1. Allgemeines zur Berechnungsmethode und Norm DIN 18599</h2>
+    <ul class="list-disc list-inside text-gray-600 space-y-2">
+      <li>Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</li>
+      <li>Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</li>
+      <li>Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</li>
+      <li>Seit wann gilt die neue Norm (DIN 18599)?</li>
+      <li>Werden alle Energieausweise durch die neue Norm schlechter?</li>
+      <li>Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</li>
+      <li>Warum wurden frühere Energieausweise schneller ausgestellt?</li>
+      <li>Was bedeutet DIN 18599, und warum ist sie wichtig?</li>
+    </ul>
+  </div>
+
+  <!-- Erstellung und Bearbeitung -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-gray-700 mb-4">2. Erstellung und Bearbeitung von Energieausweisen</h2>
+    <ul class="list-disc list-inside text-gray-600 space-y-2">
+      <li>Warum dauert die Ausstellung meines Bedarfsausweises so lange?</li>
+      <li>Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</li>
+      <li>Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</li>
+      <li>Was kann ich tun, wenn ich den Energieausweis dringend benötige?</li>
+      <li>Kann ich den Energieausweis beschleunigen lassen?</li>
+      <li>Wie werde ich über den Status meines Energieausweises informiert?</li>
+    </ul>
+  </div>
+
+  <!-- Eingabefehler und Korrekturen -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-gray-700 mb-4">3. Eingabefehler und Korrekturen</h2>
+    <ul class="list-disc list-inside text-gray-600 space-y-2">
+      <li>Ich habe die Grundflächen korrigiert, aber der Energieausweis zeigt noch falsche Werte an. Was könnte das Problem sein?</li>
+      <li>Wie kann ich die Daten im System speichern?</li>
+      <li>Warum werden in der Berechnung einige Werte nicht berücksichtigt?</li>
+      <li>Was passiert, wenn ich versehentlich Daten von einem anderen Objekt eingebe?</li>
+      <li>Ich habe mehrere Objekte im System. Wie stelle ich sicher, dass ich das richtige bearbeite?</li>
+      <li>Was tun, wenn das Volumen oder die Geometrie nicht korrekt berechnet wird?</li>
+      <li>Kann ich die Daten nachträglich korrigieren?</li>
+    </ul>
+  </div>
+
+  <!-- Anforderungen an Unterlagen und Fotos -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-gray-700 mb-4">4. Anforderungen an Unterlagen und Fotos</h2>
+    <ul class="list-disc list-inside text-gray-600 space-y-2">
+      <li>Welche Fotos werden für den Energieausweis benötigt?</li>
+      <li>Kann ich Fotos nachträglich hochladen?</li>
+      <li>In welchem Format sollen die Pläne bereitgestellt werden?</li>
+    </ul>
+  </div>
+
+  <!-- Unterstützung und Kontakt -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-gray-700 mb-4">5. Unterstützung und Kontakt</h2>
+    <ul class="list-disc list-inside text-gray-600 space-y-2">
+      <li>Was muss ich tun, wenn ich die Berechnungen nicht verstehe?</li>
+      <li>Ich benötige Unterstützung bei der Eingabe. Wer kann mir helfen?</li>
+      <li>Was sollte ich tun, wenn ich regelmäßig Energieausweise benötige?</li>
+    </ul>
+  </div>
+
+  <!-- Energieverbrauch und Wärmepumpen -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-gray-700 mb-4">6. Energieverbrauch und Wärmepumpen</h2>
+    <ul class="list-disc list-inside text-gray-600 space-y-2">
+      <li>Wie wird der Stromverbrauch bei einer Wärmepumpe im Energieausweis berücksichtigt?</li>
+      <li>Wie schätze ich den Haushaltsstromverbrauch?</li>
+      <li>Was, wenn mein Stromverbrauch höher ist?</li>
+      <li>Wie wirkt sich Warmwasser auf den Stromverbrauch aus?</li>
+      <li>Was tun, wenn ich keine separaten Zähler habe?</li>
+      <li>Kann ich diese Anpassungen selbst vornehmen?</li>
+      <li>Warum zeigt das System manchmal Warnhinweise an?</li>
+    </ul>
+  </div>
+
+  <!-- Versand und Dokumentation -->
+  <div>
+    <h2 class="text-xl font-semibold text-gray-700 mb-4">7. Versand und Dokumentation</h2>
+    <ul class="list-disc list-inside text-gray-600 space-y-2">
+      <li>Kann ich meinen Energieausweis erneut zugesandt bekommen?</li>
+      <li>Was passiert, wenn der Energieausweis nicht rechtzeitig fertiggestellt wird?</li>
+    </ul>
+  </div>
+</div>
+   
+</div>
+</div>
+
+<style lang="scss">
+
+#faqs{@apply flex;}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 78f36a1b..7d4648b5 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -1,8 +1,14 @@
 ---
 
 import Layout from "#layouts/Layout.astro";
+import FAQ from "#content/faq.svelte";
 
 
 ---
 
-<Layout title="FAQ - IBCornelsen"></Layout>
\ No newline at end of file
+<Layout title="FAQ - IBCornelsen">
+
+<h1> FAQ – Energieausweise</h1>
+
+	<FAQ client:load />
+</Layout>
\ No newline at end of file

From 11f94cf45dcd201aa618e9720ff84456cd9cfe89 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:57:16 +0100
Subject: [PATCH 006/165] Box entfernt

---
 src/components/design/content/faq.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
index 68eb9909..22b8bde8 100644
--- a/src/components/design/content/faq.svelte
+++ b/src/components/design/content/faq.svelte
@@ -2,8 +2,6 @@
 <div class="mt-12 m-auto w-[90%] relative">
 <div id="faqs">
 
-<div class="bg-gray-100 p-6 rounded-md shadow-md max-w-5xl mx-auto">
-
   <!-- Allgemeines -->
   <div class="mb-6">
     <h2 class="text-xl font-semibold text-gray-700 mb-4">1. Allgemeines zur Berechnungsmethode und Norm DIN 18599</h2>
@@ -88,7 +86,6 @@
       <li>Was passiert, wenn der Energieausweis nicht rechtzeitig fertiggestellt wird?</li>
     </ul>
   </div>
-</div>
    
 </div>
 </div>

From 7c6a922a2ab955f66103689bc06d3fea77a6e31a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:01:35 +0100
Subject: [PATCH 007/165] =?UTF-8?q?Ausrichtung=20Container=20ge=C3=A4ndert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/design/content/faq.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
index 22b8bde8..a07f3b39 100644
--- a/src/components/design/content/faq.svelte
+++ b/src/components/design/content/faq.svelte
@@ -92,6 +92,6 @@
 
 <style lang="scss">
 
-#faqs{@apply flex;}
+#faqs{@apply flex flex-row;}
 
 </style>
\ No newline at end of file

From 481207d85d459a664327f4ca253081545b9ca232 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:08:00 +0100
Subject: [PATCH 008/165] Fehler behoben

---
 src/components/design/content/faq.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
index a07f3b39..db461ec1 100644
--- a/src/components/design/content/faq.svelte
+++ b/src/components/design/content/faq.svelte
@@ -1,6 +1,6 @@
 
 <div class="mt-12 m-auto w-[90%] relative">
-<div id="faqs">
+<div id="faqs" class="faqs">
 
   <!-- Allgemeines -->
   <div class="mb-6">

From ad3593937f589660c82190f25156af6322b6bd15 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:13:58 +0100
Subject: [PATCH 009/165] Fehler behoben

---
 src/components/design/content/faq.svelte | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
index db461ec1..56a1c928 100644
--- a/src/components/design/content/faq.svelte
+++ b/src/components/design/content/faq.svelte
@@ -1,6 +1,6 @@
 
 <div class="mt-12 m-auto w-[90%] relative">
-<div id="faqs" class="faqs">
+<div id="faqs" class="flex flex-row">
 
   <!-- Allgemeines -->
   <div class="mb-6">
@@ -88,10 +88,4 @@
   </div>
    
 </div>
-</div>
-
-<style lang="scss">
-
-#faqs{@apply flex flex-row;}
-
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file

From db79dfb5eb3b77c7c24ebd6ace78c3162c2490a5 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:21:56 +0100
Subject: [PATCH 010/165] Fehler behoben

---
 src/components/design/content/faq.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
index 56a1c928..38251fe4 100644
--- a/src/components/design/content/faq.svelte
+++ b/src/components/design/content/faq.svelte
@@ -1,6 +1,6 @@
 
 <div class="mt-12 m-auto w-[90%] relative">
-<div id="faqs" class="flex flex-row">
+<div class="flex flex-row">
 
   <!-- Allgemeines -->
   <div class="mb-6">

From 3d928cf65ef686aebec427a4dd987381217c9f46 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:33:19 +0100
Subject: [PATCH 011/165] =?UTF-8?q?Formatierung=20ge=C3=A4ndert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/design/content/faq.svelte | 30 ++++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
index 38251fe4..6289e690 100644
--- a/src/components/design/content/faq.svelte
+++ b/src/components/design/content/faq.svelte
@@ -1,11 +1,11 @@
 
 <div class="mt-12 m-auto w-[90%] relative">
-<div class="flex flex-row">
+<div class="flex-row">
 
   <!-- Allgemeines -->
   <div class="mb-6">
-    <h2 class="text-xl font-semibold text-gray-700 mb-4">1. Allgemeines zur Berechnungsmethode und Norm DIN 18599</h2>
-    <ul class="list-disc list-inside text-gray-600 space-y-2">
+    <h2 class="text-2xl font-semibold text-gray-700 mb-4">1. Allgemeines zur Berechnungsmethode und Norm DIN 18599</h2>
+    <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</li>
       <li>Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</li>
       <li>Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</li>
@@ -19,8 +19,8 @@
 
   <!-- Erstellung und Bearbeitung -->
   <div class="mb-6">
-    <h2 class="text-xl font-semibold text-gray-700 mb-4">2. Erstellung und Bearbeitung von Energieausweisen</h2>
-    <ul class="list-disc list-inside text-gray-600 space-y-2">
+    <h2 class="text-2xl font-semibold text-gray-700 mb-4">2. Erstellung und Bearbeitung von Energieausweisen</h2>
+    <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Warum dauert die Ausstellung meines Bedarfsausweises so lange?</li>
       <li>Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</li>
       <li>Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</li>
@@ -32,8 +32,8 @@
 
   <!-- Eingabefehler und Korrekturen -->
   <div class="mb-6">
-    <h2 class="text-xl font-semibold text-gray-700 mb-4">3. Eingabefehler und Korrekturen</h2>
-    <ul class="list-disc list-inside text-gray-600 space-y-2">
+    <h2 class="text-2xl font-semibold text-gray-700 mb-4">3. Eingabefehler und Korrekturen</h2>
+    <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Ich habe die Grundflächen korrigiert, aber der Energieausweis zeigt noch falsche Werte an. Was könnte das Problem sein?</li>
       <li>Wie kann ich die Daten im System speichern?</li>
       <li>Warum werden in der Berechnung einige Werte nicht berücksichtigt?</li>
@@ -46,8 +46,8 @@
 
   <!-- Anforderungen an Unterlagen und Fotos -->
   <div class="mb-6">
-    <h2 class="text-xl font-semibold text-gray-700 mb-4">4. Anforderungen an Unterlagen und Fotos</h2>
-    <ul class="list-disc list-inside text-gray-600 space-y-2">
+    <h2 class="text-2xl font-semibold text-gray-700 mb-4">4. Anforderungen an Unterlagen und Fotos</h2>
+    <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Welche Fotos werden für den Energieausweis benötigt?</li>
       <li>Kann ich Fotos nachträglich hochladen?</li>
       <li>In welchem Format sollen die Pläne bereitgestellt werden?</li>
@@ -56,8 +56,8 @@
 
   <!-- Unterstützung und Kontakt -->
   <div class="mb-6">
-    <h2 class="text-xl font-semibold text-gray-700 mb-4">5. Unterstützung und Kontakt</h2>
-    <ul class="list-disc list-inside text-gray-600 space-y-2">
+    <h2 class="text-2xl font-semibold text-gray-700 mb-4">5. Unterstützung und Kontakt</h2>
+    <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Was muss ich tun, wenn ich die Berechnungen nicht verstehe?</li>
       <li>Ich benötige Unterstützung bei der Eingabe. Wer kann mir helfen?</li>
       <li>Was sollte ich tun, wenn ich regelmäßig Energieausweise benötige?</li>
@@ -66,8 +66,8 @@
 
   <!-- Energieverbrauch und Wärmepumpen -->
   <div class="mb-6">
-    <h2 class="text-xl font-semibold text-gray-700 mb-4">6. Energieverbrauch und Wärmepumpen</h2>
-    <ul class="list-disc list-inside text-gray-600 space-y-2">
+    <h2 class="text-2xl font-semibold text-gray-700 mb-4">6. Energieverbrauch und Wärmepumpen</h2>
+    <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Wie wird der Stromverbrauch bei einer Wärmepumpe im Energieausweis berücksichtigt?</li>
       <li>Wie schätze ich den Haushaltsstromverbrauch?</li>
       <li>Was, wenn mein Stromverbrauch höher ist?</li>
@@ -80,8 +80,8 @@
 
   <!-- Versand und Dokumentation -->
   <div>
-    <h2 class="text-xl font-semibold text-gray-700 mb-4">7. Versand und Dokumentation</h2>
-    <ul class="list-disc list-inside text-gray-600 space-y-2">
+    <h2 class="text-2xl font-semibold text-gray-700 mb-4">7. Versand und Dokumentation</h2>
+    <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Kann ich meinen Energieausweis erneut zugesandt bekommen?</li>
       <li>Was passiert, wenn der Energieausweis nicht rechtzeitig fertiggestellt wird?</li>
     </ul>

From 98dc75f7ddc2cdb519993f5dfafceb29743b4015 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 20:15:44 +0100
Subject: [PATCH 012/165] FAQ - Allgemeines

---
 .../design/content/allgemeines18599.svelte    | 78 +++++++++++++++++++
 .../index.astro                               | 14 ++++
 2 files changed, 92 insertions(+)
 create mode 100644 src/components/design/content/allgemeines18599.svelte
 create mode 100644 src/pages/faq/Allgemeines zur Berechnungsmethode und Norm DIN 18599/index.astro

diff --git a/src/components/design/content/allgemeines18599.svelte b/src/components/design/content/allgemeines18599.svelte
new file mode 100644
index 00000000..78fa30cd
--- /dev/null
+++ b/src/components/design/content/allgemeines18599.svelte
@@ -0,0 +1,78 @@
+<div class="mt-12 m-auto w-[90%] relative">
+<div class="flex-row">
+
+ <div class="bg-gray-100 p-6 rounded-md shadow-md max-w-4xl mx-auto">
+
+  <!-- Frage 1 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</h2>
+    <p class="text-gray-600 mt-2">
+      Die Energieeffizienzklasse kann sich durch die Umstellung auf die neue DIN 18599 verschlechtern. Diese Norm bewertet Randbedingungen wie die Qualität der Anlagentechnik und die Innentemperatur anders als die vorherige Norm. Dadurch können höhere Werte für den Endenergiebedarf entstehen.
+    </p>
+  </div>
+
+  <!-- Frage 2 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</h2>
+    <p class="text-gray-600 mt-2">
+      Die alte Methode (z. B. DIN V 4108) und die neue (DIN 18599) liefen eine Zeit lang parallel. Seit diesem Jahr ist die Berechnung nach der neuen DIN verpflichtend. Die neue Norm verwendet aktualisierte Berechnungsfaktoren und Randbedingungen, um eine einheitlichere Bewertung sicherzustellen.
+    </p>
+  </div>
+
+  <!-- Frage 3 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</h2>
+    <p class="text-gray-600 mt-2">
+      Das Online-System könnte noch mit der alten DIN arbeiten, während der Energieausweis, den Sie von uns erhalten haben, nach der neuen DIN berechnet wurde. Die Werte im Online-System werden derzeit aktualisiert.
+    </p>
+  </div>
+
+  <!-- Frage 4 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Seit wann gilt die neue Norm (DIN 18599)?</h2>
+    <p class="text-gray-600 mt-2">
+      Die DIN 18599 ist seit diesem Jahr (2024) für Energieausweise verpflichtend. Frühere Berechnungen nach der alten Norm sind nicht mehr gültig.
+    </p>
+  </div>
+
+  <!-- Frage 5 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Werden alle Energieausweise durch die neue Norm schlechter?</h2>
+    <p class="text-gray-600 mt-2">
+      Die meisten Gebäude werden durch die strengeren Bewertungsfaktoren der neuen Norm etwas schlechter eingestuft. Das betrifft insbesondere Gebäude mit älterer Heiztechnik oder weniger effizienter Anlagentechnik.
+    </p>
+  </div>
+
+  <!-- Frage 6 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</h2>
+    <p class="text-gray-600 mt-2">
+      Der Bedarfsausweis wird nach der Norm DIN 18599 erstellt. Diese berücksichtigt unter anderem:
+    </p>
+    <ul class="list-disc list-inside text-gray-600 mt-2">
+      <li>Gebäudegeometrie.</li>
+      <li>Dämmstandard.</li>
+      <li>Heiz- und Anlagentechnik.</li>
+      <li>Die Umstellung auf diese Berechnungsmethode ist eine gesetzliche Vorgabe.</li>
+    </ul>
+  </div>
+
+  <!-- Frage 7 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Warum wurden frühere Energieausweise schneller ausgestellt?</h2>
+    <p class="text-gray-600 mt-2">
+      Die früheren Berechnungsverfahren waren weniger komplex. Mit der Einführung der DIN 18599 wurde der Prozess anspruchsvoller, um präzisere und einheitlichere Ergebnisse zu gewährleisten.
+    </p>
+  </div>
+
+  <!-- Frage 8 -->
+  <div>
+    <h2 class="text-lg font-semibold text-gray-700">Was bedeutet DIN 18599, und warum ist sie wichtig?</h2>
+    <p class="text-gray-600 mt-2">
+      Die DIN 18599 ist eine standardisierte Berechnungsvorschrift, die eine einheitliche Bewertung von Energieeffizienz und Anlagentechnik gewährleistet. Sie wurde eingeführt, um genauere und vergleichbare Ergebnisse zu erzielen.
+    </p>
+  </div>
+</div>
+   
+</div>
+</div>
\ No newline at end of file
diff --git a/src/pages/faq/Allgemeines zur Berechnungsmethode und Norm DIN 18599/index.astro b/src/pages/faq/Allgemeines zur Berechnungsmethode und Norm DIN 18599/index.astro
new file mode 100644
index 00000000..418bfee2
--- /dev/null
+++ b/src/pages/faq/Allgemeines zur Berechnungsmethode und Norm DIN 18599/index.astro	
@@ -0,0 +1,14 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+import allgemeines18599 from "#content/allgemeines18599.svelte";
+
+
+---
+
+<Layout title="Allgemeines zur Berechnungsmethode und Norm DIN 18599">
+
+<h1>Allgemeines zur Berechnungsmethode und Norm DIN 18599</h1>
+
+	<allgemeines18599 client:load />
+</Layout>
\ No newline at end of file

From fc76387d94a086d32167b6f0f41be5072e9e2edb Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 20:47:01 +0100
Subject: [PATCH 013/165] FAQ Submenue

---
 .../design/sidebars/cards/card-navigation.svelte     | 12 ++++++++++++
 .../index.astro                                      |  0
 2 files changed, 12 insertions(+)
 rename src/pages/faq/{Allgemeines zur Berechnungsmethode und Norm DIN 18599 => allgemeines-18599}/index.astro (100%)

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index 35246e98..c0d8ea2b 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -171,6 +171,18 @@ if(innerWidth>1024){
   </ul>
 </div>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
+  <a href={undefined} class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+  <ul class="dropdown-content faq">
+    {#if innerWidth < 1023}
+    <li><a href="index">FAQ Energieausweise</a></li>
+    {/if}
+    <li class="disc2"><a href="/faq/allgemeines18599/">Allgemeines zur Berechnungsmethode und Norm DIN 18599</a></li>
+    <li class="disc2"><a href="/faq/erstellungEnergieausweise/">Erstellung und Bearbeitung von Energieausweisen</a></li>
+  </ul>
+</div>
+
 <div class="nav-element">
 <a class="no-dropdown nav-element-child" href="/enev-zusammenfassung">EnEV Zusammenfassung - Archiv</a>
 </div>
diff --git a/src/pages/faq/Allgemeines zur Berechnungsmethode und Norm DIN 18599/index.astro b/src/pages/faq/allgemeines-18599/index.astro
similarity index 100%
rename from src/pages/faq/Allgemeines zur Berechnungsmethode und Norm DIN 18599/index.astro
rename to src/pages/faq/allgemeines-18599/index.astro

From 28eb1018c9feb1b514d350f82072604ec6996b4d Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 20:54:24 +0100
Subject: [PATCH 014/165] Pfad angepasst

---
 src/components/design/sidebars/cards/card-navigation.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index c0d8ea2b..e6d6b595 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -176,10 +176,10 @@ if(innerWidth>1024){
   <a href={undefined} class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
   <ul class="dropdown-content faq">
     {#if innerWidth < 1023}
-    <li><a href="index">FAQ Energieausweise</a></li>
+    <li><a href="/faq">FAQ Energieausweise</a></li>
     {/if}
-    <li class="disc2"><a href="/faq/allgemeines18599/">Allgemeines zur Berechnungsmethode und Norm DIN 18599</a></li>
-    <li class="disc2"><a href="/faq/erstellungEnergieausweise/">Erstellung und Bearbeitung von Energieausweisen</a></li>
+    <li class="disc2"><a href="/faq/allgemeines-18599/">Allgemeines zur Berechnungsmethode und Norm DIN 18599</a></li>
+    <li class="disc2"><a href="/faq/erstellung-energieausweise/">Erstellung und Bearbeitung von Energieausweisen</a></li>
   </ul>
 </div>
 

From b33ee796e1ebfdc88f1c42b70b5e87d4b9409dee Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 21:07:27 +0100
Subject: [PATCH 015/165] FAQ - Allgemeines

---
 .../design/content/allgemeines18599.svelte    | 78 ------------------
 .../sidebars/cards/card-navigation.svelte     |  2 +-
 src/pages/faq/allgemeines-18599/index.astro   | 81 ++++++++++++++++++-
 3 files changed, 79 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/design/content/allgemeines18599.svelte

diff --git a/src/components/design/content/allgemeines18599.svelte b/src/components/design/content/allgemeines18599.svelte
deleted file mode 100644
index 78fa30cd..00000000
--- a/src/components/design/content/allgemeines18599.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<div class="mt-12 m-auto w-[90%] relative">
-<div class="flex-row">
-
- <div class="bg-gray-100 p-6 rounded-md shadow-md max-w-4xl mx-auto">
-
-  <!-- Frage 1 -->
-  <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</h2>
-    <p class="text-gray-600 mt-2">
-      Die Energieeffizienzklasse kann sich durch die Umstellung auf die neue DIN 18599 verschlechtern. Diese Norm bewertet Randbedingungen wie die Qualität der Anlagentechnik und die Innentemperatur anders als die vorherige Norm. Dadurch können höhere Werte für den Endenergiebedarf entstehen.
-    </p>
-  </div>
-
-  <!-- Frage 2 -->
-  <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</h2>
-    <p class="text-gray-600 mt-2">
-      Die alte Methode (z. B. DIN V 4108) und die neue (DIN 18599) liefen eine Zeit lang parallel. Seit diesem Jahr ist die Berechnung nach der neuen DIN verpflichtend. Die neue Norm verwendet aktualisierte Berechnungsfaktoren und Randbedingungen, um eine einheitlichere Bewertung sicherzustellen.
-    </p>
-  </div>
-
-  <!-- Frage 3 -->
-  <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</h2>
-    <p class="text-gray-600 mt-2">
-      Das Online-System könnte noch mit der alten DIN arbeiten, während der Energieausweis, den Sie von uns erhalten haben, nach der neuen DIN berechnet wurde. Die Werte im Online-System werden derzeit aktualisiert.
-    </p>
-  </div>
-
-  <!-- Frage 4 -->
-  <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Seit wann gilt die neue Norm (DIN 18599)?</h2>
-    <p class="text-gray-600 mt-2">
-      Die DIN 18599 ist seit diesem Jahr (2024) für Energieausweise verpflichtend. Frühere Berechnungen nach der alten Norm sind nicht mehr gültig.
-    </p>
-  </div>
-
-  <!-- Frage 5 -->
-  <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Werden alle Energieausweise durch die neue Norm schlechter?</h2>
-    <p class="text-gray-600 mt-2">
-      Die meisten Gebäude werden durch die strengeren Bewertungsfaktoren der neuen Norm etwas schlechter eingestuft. Das betrifft insbesondere Gebäude mit älterer Heiztechnik oder weniger effizienter Anlagentechnik.
-    </p>
-  </div>
-
-  <!-- Frage 6 -->
-  <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</h2>
-    <p class="text-gray-600 mt-2">
-      Der Bedarfsausweis wird nach der Norm DIN 18599 erstellt. Diese berücksichtigt unter anderem:
-    </p>
-    <ul class="list-disc list-inside text-gray-600 mt-2">
-      <li>Gebäudegeometrie.</li>
-      <li>Dämmstandard.</li>
-      <li>Heiz- und Anlagentechnik.</li>
-      <li>Die Umstellung auf diese Berechnungsmethode ist eine gesetzliche Vorgabe.</li>
-    </ul>
-  </div>
-
-  <!-- Frage 7 -->
-  <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Warum wurden frühere Energieausweise schneller ausgestellt?</h2>
-    <p class="text-gray-600 mt-2">
-      Die früheren Berechnungsverfahren waren weniger komplex. Mit der Einführung der DIN 18599 wurde der Prozess anspruchsvoller, um präzisere und einheitlichere Ergebnisse zu gewährleisten.
-    </p>
-  </div>
-
-  <!-- Frage 8 -->
-  <div>
-    <h2 class="text-lg font-semibold text-gray-700">Was bedeutet DIN 18599, und warum ist sie wichtig?</h2>
-    <p class="text-gray-600 mt-2">
-      Die DIN 18599 ist eine standardisierte Berechnungsvorschrift, die eine einheitliche Bewertung von Energieeffizienz und Anlagentechnik gewährleistet. Sie wurde eingeführt, um genauere und vergleichbare Ergebnisse zu erzielen.
-    </p>
-  </div>
-</div>
-   
-</div>
-</div>
\ No newline at end of file
diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index e6d6b595..c53ae97a 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -173,7 +173,7 @@ if(innerWidth>1024){
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
-  <a href={undefined} class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+  <a href="/faq" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
   <ul class="dropdown-content faq">
     {#if innerWidth < 1023}
     <li><a href="/faq">FAQ Energieausweise</a></li>
diff --git a/src/pages/faq/allgemeines-18599/index.astro b/src/pages/faq/allgemeines-18599/index.astro
index 418bfee2..1b1457a7 100644
--- a/src/pages/faq/allgemeines-18599/index.astro
+++ b/src/pages/faq/allgemeines-18599/index.astro
@@ -1,8 +1,6 @@
 ---
 
 import Layout from "#layouts/Layout.astro";
-import allgemeines18599 from "#content/allgemeines18599.svelte";
-
 
 ---
 
@@ -10,5 +8,82 @@ import allgemeines18599 from "#content/allgemeines18599.svelte";
 
 <h1>Allgemeines zur Berechnungsmethode und Norm DIN 18599</h1>
 
-	<allgemeines18599 client:load />
+<div class="mt-12 m-auto w-[90%] relative">
+ <div class="flex-row">
+
+ <div class="bg-gray-100 p-6 rounded-md shadow-md max-w-4xl mx-auto">
+
+  <!-- Frage 1 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</h2>
+    <p class="text-gray-600 mt-2">
+      Die Energieeffizienzklasse kann sich durch die Umstellung auf die neue DIN 18599 verschlechtern. Diese Norm bewertet Randbedingungen wie die Qualität der Anlagentechnik und die Innentemperatur anders als die vorherige Norm. Dadurch können höhere Werte für den Endenergiebedarf entstehen.
+    </p>
+  </div>
+
+  <!-- Frage 2 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</h2>
+    <p class="text-gray-600 mt-2">
+      Die alte Methode (z. B. DIN V 4108) und die neue (DIN 18599) liefen eine Zeit lang parallel. Seit diesem Jahr ist die Berechnung nach der neuen DIN verpflichtend. Die neue Norm verwendet aktualisierte Berechnungsfaktoren und Randbedingungen, um eine einheitlichere Bewertung sicherzustellen.
+    </p>
+  </div>
+
+  <!-- Frage 3 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</h2>
+    <p class="text-gray-600 mt-2">
+      Das Online-System könnte noch mit der alten DIN arbeiten, während der Energieausweis, den Sie von uns erhalten haben, nach der neuen DIN berechnet wurde. Die Werte im Online-System werden derzeit aktualisiert.
+    </p>
+  </div>
+
+  <!-- Frage 4 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Seit wann gilt die neue Norm (DIN 18599)?</h2>
+    <p class="text-gray-600 mt-2">
+      Die DIN 18599 ist seit diesem Jahr (2024) für Energieausweise verpflichtend. Frühere Berechnungen nach der alten Norm sind nicht mehr gültig.
+    </p>
+  </div>
+
+  <!-- Frage 5 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Werden alle Energieausweise durch die neue Norm schlechter?</h2>
+    <p class="text-gray-600 mt-2">
+      Die meisten Gebäude werden durch die strengeren Bewertungsfaktoren der neuen Norm etwas schlechter eingestuft. Das betrifft insbesondere Gebäude mit älterer Heiztechnik oder weniger effizienter Anlagentechnik.
+    </p>
+  </div>
+
+  <!-- Frage 6 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</h2>
+    <p class="text-gray-600 mt-2">
+      Der Bedarfsausweis wird nach der Norm DIN 18599 erstellt. Diese berücksichtigt unter anderem:
+    </p>
+    <ul class="list-disc list-inside text-gray-600 mt-2">
+      <li>Gebäudegeometrie.</li>
+      <li>Dämmstandard.</li>
+      <li>Heiz- und Anlagentechnik.</li>
+      <li>Die Umstellung auf diese Berechnungsmethode ist eine gesetzliche Vorgabe.</li>
+    </ul>
+  </div>
+
+  <!-- Frage 7 -->
+  <div class="mb-4">
+    <h2 class="text-lg font-semibold text-gray-700">Warum wurden frühere Energieausweise schneller ausgestellt?</h2>
+    <p class="text-gray-600 mt-2">
+      Die früheren Berechnungsverfahren waren weniger komplex. Mit der Einführung der DIN 18599 wurde der Prozess anspruchsvoller, um präzisere und einheitlichere Ergebnisse zu gewährleisten.
+    </p>
+  </div>
+
+  <!-- Frage 8 -->
+  <div>
+    <h2 class="text-lg font-semibold text-gray-700">Was bedeutet DIN 18599, und warum ist sie wichtig?</h2>
+    <p class="text-gray-600 mt-2">
+      Die DIN 18599 ist eine standardisierte Berechnungsvorschrift, die eine einheitliche Bewertung von Energieeffizienz und Anlagentechnik gewährleistet. Sie wurde eingeführt, um genauere und vergleichbare Ergebnisse zu erzielen.
+    </p>
+  </div>
+</div>
+   
+</div>
+</div>
 </Layout>
\ No newline at end of file

From 0fe8a821c7cd4b70ac3e9951eebb3c87bb583932 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 21:15:11 +0100
Subject: [PATCH 016/165] Text formatiert

---
 src/pages/faq/allgemeines-18599/index.astro | 37 ++++++++++-----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/pages/faq/allgemeines-18599/index.astro b/src/pages/faq/allgemeines-18599/index.astro
index 1b1457a7..0c09ff34 100644
--- a/src/pages/faq/allgemeines-18599/index.astro
+++ b/src/pages/faq/allgemeines-18599/index.astro
@@ -11,55 +11,53 @@ import Layout from "#layouts/Layout.astro";
 <div class="mt-12 m-auto w-[90%] relative">
  <div class="flex-row">
 
- <div class="bg-gray-100 p-6 rounded-md shadow-md max-w-4xl mx-auto">
-
   <!-- Frage 1 -->
   <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Die Energieeffizienzklasse kann sich durch die Umstellung auf die neue DIN 18599 verschlechtern. Diese Norm bewertet Randbedingungen wie die Qualität der Anlagentechnik und die Innentemperatur anders als die vorherige Norm. Dadurch können höhere Werte für den Endenergiebedarf entstehen.
     </p>
   </div>
 
   <!-- Frage 2 -->
   <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Die alte Methode (z. B. DIN V 4108) und die neue (DIN 18599) liefen eine Zeit lang parallel. Seit diesem Jahr ist die Berechnung nach der neuen DIN verpflichtend. Die neue Norm verwendet aktualisierte Berechnungsfaktoren und Randbedingungen, um eine einheitlichere Bewertung sicherzustellen.
     </p>
   </div>
 
   <!-- Frage 3 -->
   <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Das Online-System könnte noch mit der alten DIN arbeiten, während der Energieausweis, den Sie von uns erhalten haben, nach der neuen DIN berechnet wurde. Die Werte im Online-System werden derzeit aktualisiert.
     </p>
   </div>
 
   <!-- Frage 4 -->
   <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Seit wann gilt die neue Norm (DIN 18599)?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Seit wann gilt die neue Norm (DIN 18599)?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Die DIN 18599 ist seit diesem Jahr (2024) für Energieausweise verpflichtend. Frühere Berechnungen nach der alten Norm sind nicht mehr gültig.
     </p>
   </div>
 
   <!-- Frage 5 -->
   <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Werden alle Energieausweise durch die neue Norm schlechter?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Werden alle Energieausweise durch die neue Norm schlechter?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Die meisten Gebäude werden durch die strengeren Bewertungsfaktoren der neuen Norm etwas schlechter eingestuft. Das betrifft insbesondere Gebäude mit älterer Heiztechnik oder weniger effizienter Anlagentechnik.
     </p>
   </div>
 
   <!-- Frage 6 -->
   <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Der Bedarfsausweis wird nach der Norm DIN 18599 erstellt. Diese berücksichtigt unter anderem:
     </p>
-    <ul class="list-disc list-inside text-gray-600 mt-2">
+    <ul class="list-disc list-inside text-gray-600 text-xl mt-2">
       <li>Gebäudegeometrie.</li>
       <li>Dämmstandard.</li>
       <li>Heiz- und Anlagentechnik.</li>
@@ -69,20 +67,19 @@ import Layout from "#layouts/Layout.astro";
 
   <!-- Frage 7 -->
   <div class="mb-4">
-    <h2 class="text-lg font-semibold text-gray-700">Warum wurden frühere Energieausweise schneller ausgestellt?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum wurden frühere Energieausweise schneller ausgestellt?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Die früheren Berechnungsverfahren waren weniger komplex. Mit der Einführung der DIN 18599 wurde der Prozess anspruchsvoller, um präzisere und einheitlichere Ergebnisse zu gewährleisten.
     </p>
   </div>
 
   <!-- Frage 8 -->
   <div>
-    <h2 class="text-lg font-semibold text-gray-700">Was bedeutet DIN 18599, und warum ist sie wichtig?</h2>
-    <p class="text-gray-600 mt-2">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Was bedeutet DIN 18599, und warum ist sie wichtig?</h2>
+    <p class="text-gray-600 text-xl mt-2">
       Die DIN 18599 ist eine standardisierte Berechnungsvorschrift, die eine einheitliche Bewertung von Energieeffizienz und Anlagentechnik gewährleistet. Sie wurde eingeführt, um genauere und vergleichbare Ergebnisse zu erzielen.
     </p>
   </div>
-</div>
    
 </div>
 </div>

From cff6fd7d3b4f1aceae6e96b66863dff542e77632 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 21:26:23 +0100
Subject: [PATCH 017/165] Pfad angepasst

---
 src/components/design/sidebars/cards/card-navigation.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index c53ae97a..93fa8e0e 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -173,7 +173,7 @@ if(innerWidth>1024){
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
-  <a href="/faq" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+  <a href="{'#'}" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
   <ul class="dropdown-content faq">
     {#if innerWidth < 1023}
     <li><a href="/faq">FAQ Energieausweise</a></li>
@@ -192,9 +192,6 @@ if(innerWidth>1024){
 <div class="nav-element">
 <a class="no-dropdown nav-element-child" href="/kundenbewertungen">Kundenbewertungen</a>
 </div>
-<div class="nav-element">
-<a class="no-dropdown nav-element-child" href="/faq">FAQ</a>
-</div>
 <div class="nav-element">
   <a class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"href="/fuer-entwickler">Für Entwickler</a>
 </div>

From 81f1244c3b6d75fa1ae84de6ffad92e1e49d65f3 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 23:43:25 +0100
Subject: [PATCH 018/165] Formatierung

---
 src/components/design/sidebars/cards/card-navigation.svelte | 2 +-
 src/pages/faq/allgemeines-18599/index.astro                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index 93fa8e0e..27f375ac 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -173,7 +173,7 @@ if(innerWidth>1024){
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
-  <a href="{'#'}" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+  <a href="{'/faq'}" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
   <ul class="dropdown-content faq">
     {#if innerWidth < 1023}
     <li><a href="/faq">FAQ Energieausweise</a></li>
diff --git a/src/pages/faq/allgemeines-18599/index.astro b/src/pages/faq/allgemeines-18599/index.astro
index 0c09ff34..5e5ca984 100644
--- a/src/pages/faq/allgemeines-18599/index.astro
+++ b/src/pages/faq/allgemeines-18599/index.astro
@@ -9,7 +9,7 @@ import Layout from "#layouts/Layout.astro";
 <h1>Allgemeines zur Berechnungsmethode und Norm DIN 18599</h1>
 
 <div class="mt-12 m-auto w-[90%] relative">
- <div class="flex-row">
+ <div class="flex-row rounded-2xl shadow-xl">
 
   <!-- Frage 1 -->
   <div class="mb-4">

From ce7df212fe116537a9011b6d10e6a13be3e4c9cd Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 23:57:25 +0100
Subject: [PATCH 019/165] Formatierung

---
 src/components/design/content/faq.svelte    | 14 +++++++-------
 src/pages/faq/allgemeines-18599/index.astro |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
index 6289e690..9159a1c0 100644
--- a/src/components/design/content/faq.svelte
+++ b/src/components/design/content/faq.svelte
@@ -3,7 +3,7 @@
 <div class="flex-row">
 
   <!-- Allgemeines -->
-  <div class="mb-6">
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-2xl font-semibold text-gray-700 mb-4">1. Allgemeines zur Berechnungsmethode und Norm DIN 18599</h2>
     <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</li>
@@ -18,7 +18,7 @@
   </div>
 
   <!-- Erstellung und Bearbeitung -->
-  <div class="mb-6">
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-2xl font-semibold text-gray-700 mb-4">2. Erstellung und Bearbeitung von Energieausweisen</h2>
     <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Warum dauert die Ausstellung meines Bedarfsausweises so lange?</li>
@@ -31,7 +31,7 @@
   </div>
 
   <!-- Eingabefehler und Korrekturen -->
-  <div class="mb-6">
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-2xl font-semibold text-gray-700 mb-4">3. Eingabefehler und Korrekturen</h2>
     <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Ich habe die Grundflächen korrigiert, aber der Energieausweis zeigt noch falsche Werte an. Was könnte das Problem sein?</li>
@@ -45,7 +45,7 @@
   </div>
 
   <!-- Anforderungen an Unterlagen und Fotos -->
-  <div class="mb-6">
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-2xl font-semibold text-gray-700 mb-4">4. Anforderungen an Unterlagen und Fotos</h2>
     <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Welche Fotos werden für den Energieausweis benötigt?</li>
@@ -55,7 +55,7 @@
   </div>
 
   <!-- Unterstützung und Kontakt -->
-  <div class="mb-6">
+   <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-2xl font-semibold text-gray-700 mb-4">5. Unterstützung und Kontakt</h2>
     <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Was muss ich tun, wenn ich die Berechnungen nicht verstehe?</li>
@@ -65,7 +65,7 @@
   </div>
 
   <!-- Energieverbrauch und Wärmepumpen -->
-  <div class="mb-6">
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-2xl font-semibold text-gray-700 mb-4">6. Energieverbrauch und Wärmepumpen</h2>
     <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Wie wird der Stromverbrauch bei einer Wärmepumpe im Energieausweis berücksichtigt?</li>
@@ -79,7 +79,7 @@
   </div>
 
   <!-- Versand und Dokumentation -->
-  <div>
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-2xl font-semibold text-gray-700 mb-4">7. Versand und Dokumentation</h2>
     <ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
       <li>Kann ich meinen Energieausweis erneut zugesandt bekommen?</li>
diff --git a/src/pages/faq/allgemeines-18599/index.astro b/src/pages/faq/allgemeines-18599/index.astro
index 5e5ca984..0c09ff34 100644
--- a/src/pages/faq/allgemeines-18599/index.astro
+++ b/src/pages/faq/allgemeines-18599/index.astro
@@ -9,7 +9,7 @@ import Layout from "#layouts/Layout.astro";
 <h1>Allgemeines zur Berechnungsmethode und Norm DIN 18599</h1>
 
 <div class="mt-12 m-auto w-[90%] relative">
- <div class="flex-row rounded-2xl shadow-xl">
+ <div class="flex-row">
 
   <!-- Frage 1 -->
   <div class="mb-4">

From 16e0cd9e5471864dc67eddba06b62dd80500e47d Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 00:04:04 +0100
Subject: [PATCH 020/165] Formatierung

---
 src/pages/faq/allgemeines-18599/index.astro | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/faq/allgemeines-18599/index.astro b/src/pages/faq/allgemeines-18599/index.astro
index 0c09ff34..cebfe5f5 100644
--- a/src/pages/faq/allgemeines-18599/index.astro
+++ b/src/pages/faq/allgemeines-18599/index.astro
@@ -12,7 +12,7 @@ import Layout from "#layouts/Layout.astro";
  <div class="flex-row">
 
   <!-- Frage 1 -->
-  <div class="mb-4">
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Die Energieeffizienzklasse kann sich durch die Umstellung auf die neue DIN 18599 verschlechtern. Diese Norm bewertet Randbedingungen wie die Qualität der Anlagentechnik und die Innentemperatur anders als die vorherige Norm. Dadurch können höhere Werte für den Endenergiebedarf entstehen.
@@ -20,7 +20,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 2 -->
-  <div class="mb-4">
+   <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Die alte Methode (z. B. DIN V 4108) und die neue (DIN 18599) liefen eine Zeit lang parallel. Seit diesem Jahr ist die Berechnung nach der neuen DIN verpflichtend. Die neue Norm verwendet aktualisierte Berechnungsfaktoren und Randbedingungen, um eine einheitlichere Bewertung sicherzustellen.
@@ -28,7 +28,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 3 -->
-  <div class="mb-4">
+    <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Das Online-System könnte noch mit der alten DIN arbeiten, während der Energieausweis, den Sie von uns erhalten haben, nach der neuen DIN berechnet wurde. Die Werte im Online-System werden derzeit aktualisiert.
@@ -36,7 +36,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 4 -->
-  <div class="mb-4">
+    <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Seit wann gilt die neue Norm (DIN 18599)?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Die DIN 18599 ist seit diesem Jahr (2024) für Energieausweise verpflichtend. Frühere Berechnungen nach der alten Norm sind nicht mehr gültig.
@@ -44,7 +44,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 5 -->
-  <div class="mb-4">
+    <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Werden alle Energieausweise durch die neue Norm schlechter?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Die meisten Gebäude werden durch die strengeren Bewertungsfaktoren der neuen Norm etwas schlechter eingestuft. Das betrifft insbesondere Gebäude mit älterer Heiztechnik oder weniger effizienter Anlagentechnik.
@@ -52,7 +52,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 6 -->
-  <div class="mb-4">
+    <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Der Bedarfsausweis wird nach der Norm DIN 18599 erstellt. Diese berücksichtigt unter anderem:
@@ -66,7 +66,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 7 -->
-  <div class="mb-4">
+    <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum wurden frühere Energieausweise schneller ausgestellt?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Die früheren Berechnungsverfahren waren weniger komplex. Mit der Einführung der DIN 18599 wurde der Prozess anspruchsvoller, um präzisere und einheitlichere Ergebnisse zu gewährleisten.
@@ -74,7 +74,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 8 -->
-  <div>
+    <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Was bedeutet DIN 18599, und warum ist sie wichtig?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Die DIN 18599 ist eine standardisierte Berechnungsvorschrift, die eine einheitliche Bewertung von Energieeffizienz und Anlagentechnik gewährleistet. Sie wurde eingeführt, um genauere und vergleichbare Ergebnisse zu erzielen.

From 292bf7ab52f80b2b62ceb006c5d5a3d3918cffe9 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 00:30:11 +0100
Subject: [PATCH 021/165] FAQ - Erstellung Energieausweis

---
 .../erstellung-energieausweise/index.astro    | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/pages/faq/erstellung-energieausweise/index.astro

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
new file mode 100644
index 00000000..ff111914
--- /dev/null
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -0,0 +1,69 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Erstellung und Bearbeitung von Energieausweisen">
+
+<h1>Erstellung und Bearbeitung von Energieausweisen</h1>
+
+<div class="mt-12 m-auto w-[90%] relative">
+ <div class="flex-row">
+
+   <!-- Frage 1 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum dauert die Ausstellung meines Bedarfsausweises so lange?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Die Verzögerungen können durch die Umstellung auf die neue Berechnungsmethode nach DIN 18599 entstehen. Diese ist deutlich komplexer und erfordert zusätzliche Schritte, die momentan noch nicht vollständig automatisiert sind. Daher müssen die Berechnungen in einigen Fällen manuell im Büro durchgeführt werden.
+    </p>
+  </div>
+
+  <!-- Frage 2 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Unter normalen Umständen wird ein Bedarfsausweis innerhalb weniger Werktage ausgestellt. Aktuell kann es jedoch aufgrund der neuen Berechnungsmethode zu längeren Bearbeitungszeiten kommen.
+    </p>
+  </div>
+
+  <!-- Frage 3 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Nach Absenden der vollständigen Daten inklusive Fotos wird Ihr Antrag in der Regel innerhalb weniger Werktage bearbeitet.
+    </p>
+  </div>
+
+  <!-- Frage 4 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Was kann ich tun, wenn ich den Energieausweis dringend benötige?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Falls der Energieausweis dringend benötigt wird, z. B. für einen Banktermin oder Kaufinteressenten, können Sie:
+    </p>
+    <ul class="list-disc list-inside text-gray-600 mt-2">
+      <li>Den Anbieter kontaktieren und die Dringlichkeit mitteilen.</li>
+      <li>Um eine bevorzugte Bearbeitung bitten.</li>
+      <li>Ein mögliches Vorabdatum erfragen.</li>
+    </ul>
+  </div>
+
+  <!-- Frage 5 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Kann ich den Energieausweis beschleunigen lassen?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      In Einzelfällen ist eine beschleunigte Bearbeitung möglich, z. B. bei einer drohenden Frist. Wenden Sie sich direkt an den Anbieter und klären Sie, ob dies realisierbar ist.
+    </p>
+  </div>
+
+  <!-- Frage 6 -->
+  <div>
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie werde ich über den Status meines Energieausweises informiert?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Der Status kann über die Vorgangsnummer oder per E-Mail-Abfrage beim Anbieter geprüft werden. Die Vorgangsnummer finden Sie in der E-Mail-Bestätigung.
+    </p>
+  </div>
+   
+</div>
+</div>
+</Layout>
\ No newline at end of file

From a5b1b26b4184b5777d0d58b5bfb0461b62ee8827 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 00:51:00 +0100
Subject: [PATCH 022/165] Eingabefehler und Korrekturen

---
 .../sidebars/cards/card-navigation.svelte     |  1 +
 .../erstellung-energieausweise/index.astro    |  2 +-
 src/pages/faq/formulareingabe/index.astro     | 72 +++++++++++++++++++
 3 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/faq/formulareingabe/index.astro

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index 27f375ac..f1539a8f 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -180,6 +180,7 @@ if(innerWidth>1024){
     {/if}
     <li class="disc2"><a href="/faq/allgemeines-18599/">Allgemeines zur Berechnungsmethode und Norm DIN 18599</a></li>
     <li class="disc2"><a href="/faq/erstellung-energieausweise/">Erstellung und Bearbeitung von Energieausweisen</a></li>
+    <li class="disc2"><a href="/faq/formulareingabe/">Eingabefehler und Korrekturen</a></li>
   </ul>
 </div>
 
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index ff111914..70f2a1ba 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -57,7 +57,7 @@ import Layout from "#layouts/Layout.astro";
   </div>
 
   <!-- Frage 6 -->
-  <div>
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
     <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie werde ich über den Status meines Energieausweises informiert?</h2>
     <p class="text-gray-600 text-xl mt-2">
       Der Status kann über die Vorgangsnummer oder per E-Mail-Abfrage beim Anbieter geprüft werden. Die Vorgangsnummer finden Sie in der E-Mail-Bestätigung.
diff --git a/src/pages/faq/formulareingabe/index.astro b/src/pages/faq/formulareingabe/index.astro
new file mode 100644
index 00000000..d50e9635
--- /dev/null
+++ b/src/pages/faq/formulareingabe/index.astro
@@ -0,0 +1,72 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Eingabefehler und Korrekturen">
+
+<h1>Eingabefehler und Korrekturen</h1>
+
+<div class="mt-12 m-auto w-[90%] relative">
+<div class="flex-row">
+
+<!-- Frage 1 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="font-semibold text-gray-700 text-xl">Ich habe die Grundflächen korrigiert, aber der Energieausweis zeigt noch falsche Werte an. Was könnte das Problem sein?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Stellen Sie sicher, dass Sie die Änderungen abgespeichert haben. Überprüfen Sie auch, ob alle notwendigen Daten wie Flächen, Materialien und Anlagen vollständig eingegeben wurden.
+    </p>
+  </div>
+
+  <!-- Frage 2 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="font-semibold text-gray-700 text-xl">Wie kann ich die Daten im System speichern?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Im Bearbeitungsmodus gibt es oben und unten Speicher-Buttons. Bitte stellen Sie sicher, dass Sie nach der Eingabe auf „Speichern“ klicken, damit die Änderungen übernommen werden.
+    </p>
+  </div>
+
+  <!-- Frage 3 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="font-semibold text-gray-700 text-xl">Warum werden in der Berechnung einige Werte nicht berücksichtigt?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Möglicherweise fehlen noch Angaben oder es wurden falsche Daten eingegeben. Beispielsweise sind vollständige Angaben zu Fensterflächen, Heizungsanlagen und Raumvolumen erforderlich, um korrekte Ergebnisse zu erzielen.
+    </p>
+  </div>
+
+  <!-- Frage 4 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="font-semibold text-gray-700 text-xl">Was passiert, wenn ich versehentlich Daten von einem anderen Objekt eingebe?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Bitte prüfen Sie vor der Eingabe, ob Sie die korrekte Objekt-ID verwenden. Sollte ein Fehler passiert sein, können Sie die Daten manuell korrigieren oder uns kontaktieren, um das Problem zu lösen.
+    </p>
+  </div>
+
+  <!-- Frage 5 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="font-semibold text-gray-700 text-xl">Ich habe mehrere Objekte im System. Wie stelle ich sicher, dass ich das richtige bearbeite?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Überprüfen Sie die Objekt-ID und den Standort (Adresse), bevor Sie Änderungen vornehmen. Im Zweifel können Sie die Übersicht im System nutzen, um das richtige Objekt zu identifizieren.
+    </p>
+  </div>
+
+  <!-- Frage 6 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="font-semibold text-gray-700 text-xl">Was tun, wenn das Volumen oder die Geometrie nicht korrekt berechnet wird?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Das könnte an falschen Eingaben bei den Gebäudemaßen liegen. Überprüfen Sie die Außenmaße des Gebäudes und passen Sie sie gegebenenfalls an. Bei Unsicherheiten können Sie uns gerne kontaktieren.
+    </p>
+  </div>
+
+  <!-- Frage 7 -->
+  <div>
+    <h2 class="font-semibold text-gray-700 text-xl">Kann ich die Daten nachträglich korrigieren?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Ja, Sie können Ihre Eingaben jederzeit überarbeiten. Änderungen, wie das Abziehen des Haushaltsstroms, können sowohl von Ihnen als auch von unserem Team vorgenommen werden.
+    </p>
+  </div>
+
+</div>
+</div>
+</Layout>
\ No newline at end of file

From 97f4b1f4972c4aea91633d5b92af51b824187a27 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 13:54:33 +0100
Subject: [PATCH 023/165] FAQ Sammlung

---
 src/pages/faq/index.astro | 68 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 7d4648b5..60825134 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -1,14 +1,74 @@
 ---
 
 import Layout from "#layouts/Layout.astro";
-import FAQ from "#content/faq.svelte";
 
 
 ---
 
-<Layout title="FAQ - IBCornelsen">
+<Layout title="FAQ - Sammmlung">
 
-<h1> FAQ – Energieausweise</h1>
+<h1> FAQ – Sammlung</h1>
 
-	<FAQ client:load />
+<div class="faq">
+  <div class="faq__section">
+    <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
+    <p class="faq__section-content">
+      Wenn die Geometrie Ihres Gebäudes nicht korrekt in die Online-Eingabe passt (z. B. wegen eines großen Anbaus oder einer untypischen Bauweise), müssen wir die Daten manuell im Büro bearbeiten. Dies verursacht zusätzliche Kosten, die in der Regel bei <span class="faq__section-highlight">290 Euro (inklusive MwSt.)</span> liegen.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
+    <p class="faq__section-content">
+      <ul class="list-disc list-inside">
+        <li>Grundrisspläne des Gebäudes, insbesondere:
+          <ul class="list-inside list-[circle]">
+            <li>Anbau</li>
+            <li>Altbau</li>
+          </ul>
+        </li>
+        <li>Baujahr der Gebäudeteile (z. B. Anbau von 1980).</li>
+        <li>Zusätzliche statische Dokumente nur auf Anfrage.</li>
+      </ul>
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Wie können die Pläne übermittelt werden?</h2>
+    <p class="faq__section-content">
+      Senden Sie die Pläne per E-Mail an:
+      <a href="mailto:info@online-energieausweis.org" class="faq__section-email">info@online-energieausweis.org</a>.
+      Bitte antworten Sie auf die letzte E-Mail, damit wir die <span class="faq__section-highlight">ID-Nummer</span> Ihres Falls direkt zuordnen können.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Was passiert mit der Rechnung?</h2>
+    <p class="faq__section-content">
+      Nach der Bearbeitung erhalten Sie eine <span class="faq__section-highlight">korrigierte Rechnung</span>, die den neuen Betrag (290 Euro) ausweist. Wenn Sie bereits eine Zahlung geleistet haben, wird lediglich der Differenzbetrag fällig.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
+    <p class="faq__section-content">
+      Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Wann erfolgt der Rückruf?</h2>
+    <p class="faq__section-content">
+      Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück, um diese abzustimmen.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Was passiert nach dem Versand der Pläne?</h2>
+    <p class="faq__section-content">
+      Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
+    </p>
+  </div>
+</div>
+	
 </Layout>
\ No newline at end of file

From f965b61e120fd95296adf2d9d2af40175f97c82a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:00:02 +0100
Subject: [PATCH 024/165] =?UTF-8?q?scss=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/faq/index.astro | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 60825134..69c21c7e 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -70,5 +70,34 @@ import Layout from "#layouts/Layout.astro";
     </p>
   </div>
 </div>
-	
+
+<style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.faq {
+  @apply space-y-6;
+
+  &__section {
+    @apply border-b pb-4;
+
+    &-title {
+      @apply text-xl font-bold text-gray-800 mb-2;
+    }
+
+    &-content {
+      @apply text-gray-600 text-base;
+    }
+
+    &-highlight {
+      @apply font-semibold text-gray-900;
+    }
+
+    &-email {
+      @apply text-blue-500 underline;
+    }
+  }
+}
+</style	
 </Layout>
\ No newline at end of file

From 18d6acc13b668e695fb941b3de11504804be5a8b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:06:16 +0100
Subject: [PATCH 025/165] SCSS angepasst

---
 src/pages/faq/index.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 69c21c7e..96241b83 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -83,11 +83,11 @@ import Layout from "#layouts/Layout.astro";
     @apply border-b pb-4;
 
     &-title {
-      @apply text-xl font-bold text-gray-800 mb-2;
+      @apply text-2xl font-bold text-gray-800 mb-2;
     }
 
     &-content {
-      @apply text-gray-600 text-base;
+      @apply text-gray-600 text-xl;
     }
 
     &-highlight {
@@ -95,7 +95,7 @@ import Layout from "#layouts/Layout.astro";
     }
 
     &-email {
-      @apply text-blue-500 underline;
+      @apply text-secondary underline;
     }
   }
 }

From be335160a880a72d46d96e6b71103812e11465e3 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:15:00 +0100
Subject: [PATCH 026/165] H1 angepasst

---
 src/pages/faq/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 96241b83..7893edea 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -7,7 +7,7 @@ import Layout from "#layouts/Layout.astro";
 
 <Layout title="FAQ - Sammmlung">
 
-<h1> FAQ – Sammlung</h1>
+<h1 class="text-3xl">FAQ – Sammlung</h1>
 
 <div class="faq">
   <div class="faq__section">

From 91275e1ded1b396ed6b76fa5574c84b59e6f5daa Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:17:14 +0100
Subject: [PATCH 027/165] Formatierung

---
 src/pages/faq/index.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 7893edea..08945227 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -9,6 +9,7 @@ import Layout from "#layouts/Layout.astro";
 
 <h1 class="text-3xl">FAQ – Sammlung</h1>
 
+<div class="mt-12 m-auto w-[90%] relative">
 <div class="faq">
   <div class="faq__section">
     <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
@@ -70,6 +71,7 @@ import Layout from "#layouts/Layout.astro";
     </p>
   </div>
 </div>
+</div>
 
 <style lang="scss">
 @tailwind base;

From acb65a74c2431e3a1f02c5753a8a4ea69703a6f3 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:27:19 +0100
Subject: [PATCH 028/165] =?UTF-8?q?Inhalt=20=C3=BCberarbeitet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/faq/index.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 08945227..7856c082 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -29,7 +29,6 @@ import Layout from "#layouts/Layout.astro";
           </ul>
         </li>
         <li>Baujahr der Gebäudeteile (z. B. Anbau von 1980).</li>
-        <li>Zusätzliche statische Dokumente nur auf Anfrage.</li>
       </ul>
     </p>
   </div>
@@ -54,13 +53,14 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
     <p class="faq__section-content">
       Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
+	  Getrennt wird nur wenn es sich um eine Mischgebäude (Wohnteil und Gewerbeteil) handelt. In diesem Fall werden zwei Energieausweise erstellt (Energieausweis für Wohngebäude und Energieausweis für Nichtwohngebäude).
     </p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Wann erfolgt der Rückruf?</h2>
     <p class="faq__section-content">
-      Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück, um diese abzustimmen.
+      Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
     </p>
   </div>
 

From a858ea4db49380f041535f4f23a999b7170cd535 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:05:03 +0100
Subject: [PATCH 029/165] =?UTF-8?q?FAQ=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/faq/index.astro | 62 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 7856c082..610408cb 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -11,6 +11,8 @@ import Layout from "#layouts/Layout.astro";
 
 <div class="mt-12 m-auto w-[90%] relative">
 <div class="faq">
+
+
   <div class="faq__section">
     <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
     <p class="faq__section-content">
@@ -53,7 +55,7 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
     <p class="faq__section-content">
       Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
-	  Getrennt wird nur wenn es sich um eine Mischgebäude (Wohnteil und Gewerbeteil) handelt. In diesem Fall werden zwei Energieausweise erstellt (Energieausweis für Wohngebäude und Energieausweis für Nichtwohngebäude).
+	  <span class="faq__section-highlight">Getrennt wird nur wenn es sich um eine Mischgebäude (Wohnteil und Gewerbeteil) handelt.</span> In diesem Fall werden zwei Energieausweise erstellt (Energieausweis für Wohngebäude und Energieausweis für Nichtwohngebäude).
     </p>
   </div>
 
@@ -70,6 +72,64 @@ import Layout from "#layouts/Layout.astro";
       Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
     </p>
   </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Was zählt zur beheizten Wohnfläche?</h2>
+    <p class="faq__section-content">
+      Beheizte Wohnfläche umfasst Flächen, die zu Wohnzwecken genutzt werden.  
+      Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der
+      <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.  
+      Flächen außerhalb des Hauses, wie halbe Terrassenflächen, müssen abgezogen werden.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Wie wird mit der energetischen Nutzfläche umgegangen?</h2>
+    <p class="faq__section-content">
+      Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.  
+      Diese Fläche wird bei Berechnungen wie dem Energieverbrauch berücksichtigt, da sie den Gesamtwert beeinflusst.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Wie werden Schrägen im Dachgeschoss berechnet?</h2>
+    <p class="faq__section-content">
+      - Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.  
+      - Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.  
+      - Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Was ist mit dem Dachinnenraum gemeint, und welche Unterlagen werden benötigt?</h2>
+    <p class="faq__section-content">
+      Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von:
+      <ul>
+        <li class="faq__section-content">Dachflächenfenstern und deren Laibungen</li>
+        <li class="faq__section-content">Sichtbaren Dämmungen oder Isolierungen</li>
+      </ul>
+      Diese Fotos helfen bei der Beurteilung des Dämmstandards und Modernisierungsoptionen.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Das Baujahr des Hauses ist unbekannt. Was soll ich tun?</h2>
+    <p class="faq__section-content">
+      - Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.  
+      - Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).  
+      - Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.
+    </p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Welche Modernisierungsempfehlungen gibt es für ein ausgebautes Dachgeschoss?</h2>
+    <p class="faq__section-content">
+      - Bei gut ausgebautem Dachgeschoss wird empfohlen, Dämmungen von außen im Rahmen einer Dachsanierung vorzunehmen.  
+      - Eine vollständige Erneuerung von innen ist oft teuer und nicht nachhaltig.
+    </p>
+  </div>
+
+
 </div>
 </div>
 

From eac083e35bafbd315e280bc2289a98025c7a50bc Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:36:14 +0100
Subject: [PATCH 030/165] Formatierung angepasst

---
 src/pages/faq/index.astro | 61 +++++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 610408cb..fdf36895 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -22,17 +22,12 @@ import Layout from "#layouts/Layout.astro";
 
   <div class="faq__section">
     <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
-    <p class="faq__section-content">
-      <ul class="list-disc list-inside">
-        <li>Grundrisspläne des Gebäudes, insbesondere:
-          <ul class="list-inside list-[circle]">
-            <li>Anbau</li>
-            <li>Altbau</li>
-          </ul>
-        </li>
-        <li>Baujahr der Gebäudeteile (z. B. Anbau von 1980).</li>
+    <p class="faq__section-content">Grundrisspläne des Gebäudes, insbesondere:</p>
+      <ul class="faq__list">
+      <li class="faq__list-item">Anbau</li>
+      <li class="faq__list-item">Altbau</li>
       </ul>
-    </p>
+	<p class="faq__section-content">Baujahr der Gebäudeteile (z. B. Anbau von 1980).</p>  
   </div>
 
   <div class="faq__section">
@@ -93,39 +88,40 @@ import Layout from "#layouts/Layout.astro";
 
   <div class="faq__section">
     <h2 class="faq__section-title">Wie werden Schrägen im Dachgeschoss berechnet?</h2>
-    <p class="faq__section-content">
-      - Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.  
-      - Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.  
-      - Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.
-    </p>
+    <ul class="faq__list">
+    <li class="faq__list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>  
+    <li class="faq__list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
+    <li class="faq__list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
+    </ul>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Was ist mit dem Dachinnenraum gemeint, und welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">
       Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von:
-      <ul>
-        <li class="faq__section-content">Dachflächenfenstern und deren Laibungen</li>
-        <li class="faq__section-content">Sichtbaren Dämmungen oder Isolierungen</li>
-      </ul>
+	  </p>
+     <ul class="faq__list">
+    <li class="faq__list-item">>Dachflächenfenstern und deren Laibungen</li>  
+    <li class="faq__list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
+     </ul>
+	 <p class="faq__section-content">
       Diese Fotos helfen bei der Beurteilung des Dämmstandards und Modernisierungsoptionen.
-    </p>
+	  </p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Das Baujahr des Hauses ist unbekannt. Was soll ich tun?</h2>
-    <p class="faq__section-content">
-      - Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.  
-      - Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).  
-      - Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.
-    </p>
+    <ul class="faq__list">
+    <li class="faq__list-item">Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.</li>  
+    <li class="faq__list-item">Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).</li>  
+    <li class="faq__list-item">Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.</li>
+    </ul>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Welche Modernisierungsempfehlungen gibt es für ein ausgebautes Dachgeschoss?</h2>
-    <p class="faq__section-content">
-      - Bei gut ausgebautem Dachgeschoss wird empfohlen, Dämmungen von außen im Rahmen einer Dachsanierung vorzunehmen.  
-      - Eine vollständige Erneuerung von innen ist oft teuer und nicht nachhaltig.
+    <p class="faq__section-content">Bei gut ausgebautem Dachgeschoss wird empfohlen, Dämmungen von außen im Rahmen einer Dachsanierung vorzunehmen.
+	Eine vollständige Erneuerung von innen ist oft teuer und nicht nachhaltig.
     </p>
   </div>
 
@@ -159,6 +155,15 @@ import Layout from "#layouts/Layout.astro";
     &-email {
       @apply text-secondary underline;
     }
+
+	&__list {
+    @apply list-disc pl-5 mt-2;
+  }
+
+  &__list-item {
+    @apply text-base text-gray-600;
+  }
+
   }
 }
 </style	

From 281f40f8d841c724a6ce156aef001f9d866e475a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:42:48 +0100
Subject: [PATCH 031/165] Formatierung

---
 src/pages/faq/index.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index fdf36895..d5de9b46 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -101,7 +101,7 @@ import Layout from "#layouts/Layout.astro";
       Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von:
 	  </p>
      <ul class="faq__list">
-    <li class="faq__list-item">>Dachflächenfenstern und deren Laibungen</li>  
+    <li class="faq__list-item">Dachflächenfenstern und deren Laibungen</li>  
     <li class="faq__list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
      </ul>
 	 <p class="faq__section-content">
@@ -157,11 +157,11 @@ import Layout from "#layouts/Layout.astro";
     }
 
 	&__list {
-    @apply list-disc pl-5 mt-2;
+    @apply list-disc pl-2 mt-2;
   }
 
   &__list-item {
-    @apply text-base text-gray-600;
+    @apply text-xl text-gray-600 list-disc pl-5 mt-2;
   }
 
   }

From a46322530fe4f84faedc8d55c05a670f90f9e98c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:54:48 +0100
Subject: [PATCH 032/165] Listen angepasst

---
 src/pages/faq/index.astro | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index d5de9b46..9fdde58e 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -23,9 +23,9 @@ import Layout from "#layouts/Layout.astro";
   <div class="faq__section">
     <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">Grundrisspläne des Gebäudes, insbesondere:</p>
-      <ul class="faq__list">
-      <li class="faq__list-item">Anbau</li>
-      <li class="faq__list-item">Altbau</li>
+      <ul class="faq__section-list">
+      <li class="faq__section-list-item">Anbau</li>
+      <li class="faq__section-list-item">Altbau</li>
       </ul>
 	<p class="faq__section-content">Baujahr der Gebäudeteile (z. B. Anbau von 1980).</p>  
   </div>
@@ -88,10 +88,10 @@ import Layout from "#layouts/Layout.astro";
 
   <div class="faq__section">
     <h2 class="faq__section-title">Wie werden Schrägen im Dachgeschoss berechnet?</h2>
-    <ul class="faq__list">
-    <li class="faq__list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>  
-    <li class="faq__list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
-    <li class="faq__list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
+    <ul class="faq__section-list">
+    <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>  
+    <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
+    <li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
     </ul>
   </div>
 
@@ -100,9 +100,9 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von:
 	  </p>
-     <ul class="faq__list">
-    <li class="faq__list-item">Dachflächenfenstern und deren Laibungen</li>  
-    <li class="faq__list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
+     <ul class="faq__section-list">
+    <li class="faq__section-list-item">Dachflächenfenstern und deren Laibungen</li>  
+    <li class="faq__section-list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
      </ul>
 	 <p class="faq__section-content">
       Diese Fotos helfen bei der Beurteilung des Dämmstandards und Modernisierungsoptionen.
@@ -111,10 +111,10 @@ import Layout from "#layouts/Layout.astro";
 
   <div class="faq__section">
     <h2 class="faq__section-title">Das Baujahr des Hauses ist unbekannt. Was soll ich tun?</h2>
-    <ul class="faq__list">
-    <li class="faq__list-item">Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.</li>  
-    <li class="faq__list-item">Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).</li>  
-    <li class="faq__list-item">Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.</li>
+    <ul class="faq__section-list">
+    <li class="faq__section-list-item">Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.</li>  
+    <li class="faq__section-list-item">Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).</li>  
+    <li class="faq__section-list-item">Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.</li>
     </ul>
   </div>
 
@@ -156,11 +156,11 @@ import Layout from "#layouts/Layout.astro";
       @apply text-secondary underline;
     }
 
-	&__list {
+	&-list {
     @apply list-disc pl-2 mt-2;
   }
 
-  &__list-item {
+  &-list-item {
     @apply text-xl text-gray-600 list-disc pl-5 mt-2;
   }
 

From 32965ec6d725c2ced3425605548004a9202c5aa0 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:00:32 +0100
Subject: [PATCH 033/165] Bulletpoints

---
 src/pages/faq/index.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 9fdde58e..5f3ff4e5 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -157,11 +157,11 @@ import Layout from "#layouts/Layout.astro";
     }
 
 	&-list {
-    @apply list-disc pl-2 mt-2;
+    @apply pl-2 mt-2;
   }
 
   &-list-item {
-    @apply text-xl text-gray-600 list-disc pl-5 mt-2;
+    @apply text-xl text-gray-600 list-disc;
   }
 
   }

From 20f980a1e66b3fc9a2ff1faade09b23d6e46c28c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:14:04 +0100
Subject: [PATCH 034/165] Liste

---
 src/pages/faq/index.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 5f3ff4e5..03d0f11c 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -157,11 +157,11 @@ import Layout from "#layouts/Layout.astro";
     }
 
 	&-list {
-    @apply pl-2 mt-2;
+    @apply pl-2 mt-2 list-disc;
   }
 
   &-list-item {
-    @apply text-xl text-gray-600 list-disc;
+    @apply text-xl text-gray-600;
   }
 
   }

From ac8839a1d4343733c6fce876a7a87c900973c706 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:18:13 +0100
Subject: [PATCH 035/165] Margin angepasst

---
 src/pages/faq/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 03d0f11c..f8e423ec 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -157,7 +157,7 @@ import Layout from "#layouts/Layout.astro";
     }
 
 	&-list {
-    @apply pl-2 mt-2 list-disc;
+    @apply pl-2 mt-2 list-disc ml-5;
   }
 
   &-list-item {

From b2f5f5b159def087bfb78a6557763f1e5795d92e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:29:05 +0100
Subject: [PATCH 036/165] =?UTF-8?q?Keywords=20eingef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/faq/index.astro | 59 +++++++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index f8e423ec..5d025cf6 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -10,24 +10,26 @@ import Layout from "#layouts/Layout.astro";
 <h1 class="text-3xl">FAQ – Sammlung</h1>
 
 <div class="mt-12 m-auto w-[90%] relative">
-<div class="faq">
 
+<div class="faq">
 
   <div class="faq__section">
     <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
     <p class="faq__section-content">
       Wenn die Geometrie Ihres Gebäudes nicht korrekt in die Online-Eingabe passt (z. B. wegen eines großen Anbaus oder einer untypischen Bauweise), müssen wir die Daten manuell im Büro bearbeiten. Dies verursacht zusätzliche Kosten, die in der Regel bei <span class="faq__section-highlight">290 Euro (inklusive MwSt.)</span> liegen.
     </p>
+    <p class="faq__section-keywords">Keywords: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">Grundrisspläne des Gebäudes, insbesondere:</p>
-      <ul class="faq__section-list">
+    <ul class="faq__section-list">
       <li class="faq__section-list-item">Anbau</li>
       <li class="faq__section-list-item">Altbau</li>
-      </ul>
-	<p class="faq__section-content">Baujahr der Gebäudeteile (z. B. Anbau von 1980).</p>  
+    </ul>
+    <p class="faq__section-content">Baujahr der Gebäudeteile (z. B. Anbau von 1980).</p>
+    <p class="faq__section-keywords">Keywords: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
   </div>
 
   <div class="faq__section">
@@ -37,6 +39,7 @@ import Layout from "#layouts/Layout.astro";
       <a href="mailto:info@online-energieausweis.org" class="faq__section-email">info@online-energieausweis.org</a>.
       Bitte antworten Sie auf die letzte E-Mail, damit wir die <span class="faq__section-highlight">ID-Nummer</span> Ihres Falls direkt zuordnen können.
     </p>
+    <p class="faq__section-keywords">Keywords: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
   </div>
 
   <div class="faq__section">
@@ -44,14 +47,16 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Nach der Bearbeitung erhalten Sie eine <span class="faq__section-highlight">korrigierte Rechnung</span>, die den neuen Betrag (290 Euro) ausweist. Wenn Sie bereits eine Zahlung geleistet haben, wird lediglich der Differenzbetrag fällig.
     </p>
+    <p class="faq__section-keywords">Keywords: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
     <p class="faq__section-content">
       Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
-	  <span class="faq__section-highlight">Getrennt wird nur wenn es sich um eine Mischgebäude (Wohnteil und Gewerbeteil) handelt.</span> In diesem Fall werden zwei Energieausweise erstellt (Energieausweis für Wohngebäude und Energieausweis für Nichtwohngebäude).
+      <span class="faq__section-highlight">Getrennt wird nur wenn es sich um eine Mischgebäude (Wohnteil und Gewerbeteil) handelt.</span> In diesem Fall werden zwei Energieausweise erstellt (Energieausweis für Wohngebäude und Energieausweis für Nichtwohngebäude).
     </p>
+    <p class="faq__section-keywords">Keywords: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
   </div>
 
   <div class="faq__section">
@@ -59,6 +64,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
     </p>
+    <p class="faq__section-keywords">Keywords: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
   </div>
 
   <div class="faq__section">
@@ -66,6 +72,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
     </p>
+    <p class="faq__section-keywords">Keywords: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
   </div>
 
   <div class="faq__section">
@@ -76,6 +83,7 @@ import Layout from "#layouts/Layout.astro";
       <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.  
       Flächen außerhalb des Hauses, wie halbe Terrassenflächen, müssen abgezogen werden.
     </p>
+    <p class="faq__section-keywords">Keywords: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
   </div>
 
   <div class="faq__section">
@@ -84,49 +92,54 @@ import Layout from "#layouts/Layout.astro";
       Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.  
       Diese Fläche wird bei Berechnungen wie dem Energieverbrauch berücksichtigt, da sie den Gesamtwert beeinflusst.
     </p>
+    <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Treppenhaus</p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Wie werden Schrägen im Dachgeschoss berechnet?</h2>
     <ul class="faq__section-list">
-    <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>  
-    <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
-    <li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
+      <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>  
+      <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
+      <li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
     </ul>
+    <p class="faq__section-keywords">Keywords: Schrägen, Dachgeschoss, Wohnfläche, Berechnung</p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Was ist mit dem Dachinnenraum gemeint, und welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">
       Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von:
-	  </p>
-     <ul class="faq__section-list">
-    <li class="faq__section-list-item">Dachflächenfenstern und deren Laibungen</li>  
-    <li class="faq__section-list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
-     </ul>
-	 <p class="faq__section-content">
+    </p>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Dachflächenfenstern und deren Laibungen</li>  
+      <li class="faq__section-list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
+    </ul>
+    <p class="faq__section-content">
       Diese Fotos helfen bei der Beurteilung des Dämmstandards und Modernisierungsoptionen.
-	  </p>
+    </p>
+    <p class="faq__section-keywords">Keywords: Dachinnenraum, Spitzboden, Dämmung, Fotos</p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Das Baujahr des Hauses ist unbekannt. Was soll ich tun?</h2>
     <ul class="faq__section-list">
-    <li class="faq__section-list-item">Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.</li>  
-    <li class="faq__section-list-item">Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).</li>  
-    <li class="faq__section-list-item">Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.</li>
+      <li class="faq__section-list-item">Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.</li>  
+      <li class="faq__section-list-item">Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).</li>  
+      <li class="faq__section-list-item">Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.</li>
     </ul>
+    <p class="faq__section-keywords">Keywords: Baujahr, Sanierung, Schätzung, Nachbarn</p>
   </div>
 
   <div class="faq__section">
     <h2 class="faq__section-title">Welche Modernisierungsempfehlungen gibt es für ein ausgebautes Dachgeschoss?</h2>
-    <p class="faq__section-content">Bei gut ausgebautem Dachgeschoss wird empfohlen, Dämmungen von außen im Rahmen einer Dachsanierung vorzunehmen.
-	Eine vollständige Erneuerung von innen ist oft teuer und nicht nachhaltig.
+    <p class="faq__section-content">
+      Bei gut ausgebautem Dachgeschoss wird empfohlen, Dämmungen von außen im Rahmen einer Dachsanierung vorzunehmen. Eine vollständige Erneuerung von innen ist oft teuer und nicht nachhaltig.
     </p>
+    <p class="faq__section-keywords">Keywords: Dachgeschoss, Modernisierung, Dämmung, Sanierung</p>
   </div>
 
-
 </div>
+
 </div>
 
 <style lang="scss">
@@ -156,6 +169,10 @@ import Layout from "#layouts/Layout.astro";
       @apply text-secondary underline;
     }
 
+ 	&-keywords {
+      @apply text-sm italic text-gray-500 mt-2;
+    }
+
 	&-list {
     @apply pl-2 mt-2 list-disc ml-5;
   }

From bffc3c194dd6fa308fba68630c9efae120ed7d34 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:48:55 +0100
Subject: [PATCH 037/165] Inhalt hochgeladen

---
 src/pages/faq/index.astro | 74 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 69 insertions(+), 5 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 5d025cf6..121a1001 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -90,19 +90,19 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="faq__section-title">Wie wird mit der energetischen Nutzfläche umgegangen?</h2>
     <p class="faq__section-content">
       Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.  
-      Diese Fläche wird bei Berechnungen wie dem Energieverbrauch berücksichtigt, da sie den Gesamtwert beeinflusst.
+      Diese Fläche wird bei Berechnung vom Endenergieverbrauch berücksichtigt, da sie den Gesamtwert beeinflusst.
     </p>
-    <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Treppenhaus</p>
+    <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
   </div>
 
   <div class="faq__section">
-    <h2 class="faq__section-title">Wie werden Schrägen im Dachgeschoss berechnet?</h2>
+    <h2 class="faq__section-title">Wie werden Flächen unter Dachschrägen im Dachgeschoss berechnet?</h2>
     <ul class="faq__section-list">
       <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>  
       <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
       <li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Schrägen, Dachgeschoss, Wohnfläche, Berechnung</p>
+    <p class="faq__section-keywords">Keywords: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
   </div>
 
   <div class="faq__section">
@@ -138,6 +138,70 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-keywords">Keywords: Dachgeschoss, Modernisierung, Dämmung, Sanierung</p>
   </div>
 
+<div class="faq__section">
+    <h2 class="faq__section-title">Was passiert, wenn die Zahlung bei der Online-Bestellung nicht funktioniert?</h2>
+    <p class="faq__section-content">
+      Wenn die Online-Zahlung aus irgendeinem Grund fehlschlägt (z. B. Fehlermeldung bei Sofortüberweisung oder technische Probleme), wird der Vorgang automatisch so behandelt, als hätten Sie auf Rechnung bestellt.
+    </p>
+    <p class="faq__section-keywords">Keywords: Zahlung, Fehlermeldung, Online-Bestellung, Rechnung</p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Welche Zahlungsmethoden stehen zur Verfügung?</h2>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item"><strong>Sofortüberweisung:</strong> Kann verwendet werden, jedoch kann es bei technischen Problemen zu einer Fehlermeldung kommen.</li>
+      <li class="faq__section-list-item"><strong>PayPal:</strong> Nur, wenn Sie ein PayPal-Konto haben.</li>
+      <li class="faq__section-list-item"><strong>Visa oder andere Kreditkarten:</strong> Sind ebenfalls möglich.</li>
+      <li class="faq__section-list-item"><strong>Rechnung:</strong> Falls keine andere Zahlungsmethode funktioniert, erhalten Sie die Rechnung mit den Zahlungsdetails nach der Lieferung.</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Zahlungsmethoden, Sofortüberweisung, PayPal, Kreditkarte, Rechnung</p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Wie erfahre ich, ob meine Bestellung erfolgreich war?</h2>
+    <p class="faq__section-content">
+      Nach Abschluss der Bestellung erhalten Sie automatisch eine <span class="faq__section-highlight">Bestätigungs-E-Mail</span>. Diese enthält Details zu Ihrer Bestellung.
+    </p>
+    <p class="faq__section-keywords">Keywords: Bestellung, Bestätigungs-E-Mail, Details</p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Was passiert nach der Bestellung, wenn ich auf Rechnung zahle?</h2>
+    <p class="faq__section-content">
+      Wenn Sie auf Rechnung zahlen (standardmäßig bei fehlgeschlagener Online-Zahlung):
+    </p>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Sie erhalten zunächst eine Bestätigungs-E-Mail.</li>
+      <li class="faq__section-list-item">Bei Lieferung bekommen Sie die Rechnung sowie eine Zahlungsaufforderung mit allen notwendigen Zahlungsdetails.</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Rechnung, Zahlungsaufforderung, Lieferung</p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Kann ich den Betrag nachträglich sofort überweisen?</h2>
+    <p class="faq__section-content">
+      Ja, sobald Sie die Rechnung erhalten, können Sie den Betrag sofort überweisen. Die Zahlungsdetails finden Sie in der E-Mail oder im Rechnungsschreiben.
+    </p>
+    <p class="faq__section-keywords">Keywords: Überweisung, Rechnung, Zahlungsdetails</p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Was sollte ich tun, wenn ich keine Bestätigungs-E-Mail erhalte?</h2>
+    <p class="faq__section-content">
+      Sollten Sie keine Bestätigungs-E-Mail erhalten, prüfen Sie bitte Ihren Spam-Ordner. Falls dort keine E-Mail zu finden ist, kontaktieren Sie unseren Kundenservice, um sicherzustellen, dass Ihre Bestellung korrekt verarbeitet wurde.
+    </p>
+    <p class="faq__section-keywords">Keywords: Bestätigungs-E-Mail, Spam-Ordner, Kundenservice</p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Wie kann ich sicherstellen, dass meine Zahlung erfolgreich durchgeführt wird?</h2>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Verwenden Sie eine unterstützte Zahlungsmethode (Sofortüberweisung, PayPal, Visa).</li>
+      <li class="faq__section-list-item">Falls es zu Fehlern kommt, folgen Sie den Anweisungen in der Bestätigungs-E-Mail und zahlen Sie per Rechnung.</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Zahlung, erfolgreich, Zahlungsmethoden, Rechnung</p>
+  </div>
+
 </div>
 
 </div>
@@ -183,5 +247,5 @@ import Layout from "#layouts/Layout.astro";
 
   }
 }
-</style	
+</style>	
 </Layout>
\ No newline at end of file

From ee2800bd0f985b03aa9b487ceff64e3fe5957b33 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:45:26 +0100
Subject: [PATCH 038/165] FAQ Inhalt

---
 src/pages/faq/index.astro | 74 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 121a1001..aca80173 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -202,6 +202,80 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-keywords">Keywords: Zahlung, erfolgreich, Zahlungsmethoden, Rechnung</p>
   </div>
 
+  <div class="faq__section">
+  <h2 class="faq__section-title">Welche gesetzlichen Vorgaben gelten für Verbrauchsdaten?</h2>
+  <p class="faq__section-content">
+    Verbrauchsdaten dürfen laut <span class="faq__section-highlight">GG24</span> nicht älter als <span class="faq__section-highlight">18 Monate</span> sein. Ältere Daten werden nicht akzeptiert und müssen aktualisiert werden.
+  </p>
+  <p class="faq__section-keywords">
+    Keywords: gesetzliche Vorgaben, Verbrauchszeiträume, Aktualisierung, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
+<div class="faq__section">
+  <h2 class="faq__section-title">Warum kam es zu Fehlermeldungen beim Weiterklicken?</h2>
+  <p class="faq__section-content">
+    Fehlermeldungen treten auf, wenn <span class="faq__section-highlight">Pflichtfelder</span> nicht korrekt ausgefüllt wurden. Solche Felder werden rot markiert und müssen korrigiert werden.
+  </p>
+  <p class="faq__section-keywords">
+    Keywords: Fehlermeldungen, Pflichtfelder, technische Probleme, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
+<div class="faq__section">
+  <h2 class="faq__section-title">Wie wird der Energieverbrauchsausweis geprüft?</h2>
+  <p class="faq__section-content">
+    Nach Abschluss der <span class="faq__section-keywords">Dateneingabe</span> und <span class="faq__section-keywords">Bezahlung</span> werden die Angaben manuell geprüft. Sind alle Daten korrekt, wird der Energieverbrauchsausweis ausgestellt.
+  </p>
+  <p class="faq__section-keywords">
+    Keywords: Prüfung, Energieverbrauchsausweis, manuelle Kontrolle, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
+<div class="faq__section">
+  <h2 class="faq__section-title">Welche Zahlungsmethoden stehen zur Verfügung?</h2>
+  <p class="faq__section-content">
+    Es kann entweder <span class="faq__section-highlight">online</span> (z. B. via PayPal) oder nachträglich per <span class="faq__section-highlight">Rechnung</span> bezahlt werden.
+  </p>
+  <p class="faq__section-keywords">
+    Keywords: Bezahlung, Zahlungsmethoden, PayPal, Rechnung, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
+<div class="faq__section">
+  <h2 class="faq__section-title">Wie erfolgt die Lieferung des Energieverbrauchsausweises?</h2>
+  <p class="faq__section-content">
+    Der Energieverbrauchsausweis wird nach erfolgreicher Prüfung an die angegebene <span class="faq__section-email">E-Mail-Adresse</span> versendet.
+  </p>
+  <p class="faq__section-keywords">
+    Keywords: Lieferung, E-Mail-Adresse, Versand, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
+<div class="faq__section">
+  <h2 class="faq__section-title">Was tun, wenn technische Probleme auftreten?</h2>
+  <p class="faq__section-content">
+    Bei technischen Schwierigkeiten sollte geprüft werden, ob alle <span class="faq__section-highlight">Pflichtfelder</span> ausgefüllt sind. Rot markierte Felder weisen auf fehlende Angaben hin.
+  </p>
+  <p class="faq__section-keywords">
+    Keywords: technische Probleme, Fehlermeldung, Pflichtfelder, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
+<div class="faq__section">
+  <h2 class="faq__section-title">Wie kann der Kundenservice kontaktiert werden?</h2>
+  <p class="faq__section-content">
+    Der Kundenservice ist über <span class="faq__section-highlight">E-Mail</span> oder telefonisch erreichbar und hilft bei Problemen oder offenen Fragen.
+  </p>
+  <ul class="faq__section-list">
+    <li class="faq__section-list-item">Telefon: 0800 123456</li>
+    <li class="faq__section-list-item">E-Mail: <span class="faq__section-email">support@example.com</span></li>
+  </ul>
+  <p class="faq__section-keywords">
+    Keywords: Kundenservice, Kontakt, Hilfe, E-Mail, Telefon, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
 </div>
 
 </div>

From bb078919f4f7ec30842dfba4d2d0c1e05f1f17aa Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 02:25:17 +0100
Subject: [PATCH 039/165] FAQ Inhalt

---
 src/pages/faq/index.astro | 60 ++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index aca80173..f4f9eb6a 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -149,12 +149,12 @@ import Layout from "#layouts/Layout.astro";
   <div class="faq__section">
     <h2 class="faq__section-title">Welche Zahlungsmethoden stehen zur Verfügung?</h2>
     <ul class="faq__section-list">
-      <li class="faq__section-list-item"><strong>Sofortüberweisung:</strong> Kann verwendet werden, jedoch kann es bei technischen Problemen zu einer Fehlermeldung kommen.</li>
-      <li class="faq__section-list-item"><strong>PayPal:</strong> Nur, wenn Sie ein PayPal-Konto haben.</li>
-      <li class="faq__section-list-item"><strong>Visa oder andere Kreditkarten:</strong> Sind ebenfalls möglich.</li>
-      <li class="faq__section-list-item"><strong>Rechnung:</strong> Falls keine andere Zahlungsmethode funktioniert, erhalten Sie die Rechnung mit den Zahlungsdetails nach der Lieferung.</li>
+      <li class="faq__section-list-item"><strong>Sofortüberweisung:</strong></li>
+      <li class="faq__section-list-item"><strong>PayPal:</strong></li>
+      <li class="faq__section-list-item"><strong>Visa, Mastercard</strong></li>
+      <li class="faq__section-list-item"><strong>Rechnungskauf</strong></li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Zahlungsmethoden, Sofortüberweisung, PayPal, Kreditkarte, Rechnung</p>
+    <p class="faq__section-keywords">Keywords: Zahlungsmethoden, Rechnugskauf, Sofortüberweisung, PayPal, Kreditkarte, Visa, Mastercard, Rechnung</p>
   </div>
 
   <div class="faq__section">
@@ -174,15 +174,16 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Sie erhalten zunächst eine Bestätigungs-E-Mail.</li>
       <li class="faq__section-list-item">Bei Lieferung bekommen Sie die Rechnung sowie eine Zahlungsaufforderung mit allen notwendigen Zahlungsdetails.</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Rechnung, Zahlungsaufforderung, Lieferung</p>
+    <p class="faq__section-keywords">Keywords: Rechnungskauf, Rechnung, Zahlungsaufforderung, Lieferung</p>
   </div>
 
   <div class="faq__section">
-    <h2 class="faq__section-title">Kann ich den Betrag nachträglich sofort überweisen?</h2>
+    <h2 class="faq__section-title">Kann ich den Betrag nachträglich überweisen?</h2>
     <p class="faq__section-content">
-      Ja, sobald Sie die Rechnung erhalten, können Sie den Betrag sofort überweisen. Die Zahlungsdetails finden Sie in der E-Mail oder im Rechnungsschreiben.
+    Sie können nach Erhalt der Bestätigungs-Email den Betrag über die enthaltenen Links bezahlen.
+      Alternativ überweisen Sie den Betrag , sobald Sie die Rechnung zusammen mit dem Originalausweis erhalten haben. Die Überweisungsdetails finden Sie in der E-Mail oder in der Rechnung.
     </p>
-    <p class="faq__section-keywords">Keywords: Überweisung, Rechnung, Zahlungsdetails</p>
+    <p class="faq__section-keywords">Keywords: Überweisung, Rechnungskauf, Rechnung, Zahlungsdetails</p>
   </div>
 
   <div class="faq__section">
@@ -190,22 +191,22 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Sollten Sie keine Bestätigungs-E-Mail erhalten, prüfen Sie bitte Ihren Spam-Ordner. Falls dort keine E-Mail zu finden ist, kontaktieren Sie unseren Kundenservice, um sicherzustellen, dass Ihre Bestellung korrekt verarbeitet wurde.
     </p>
-    <p class="faq__section-keywords">Keywords: Bestätigungs-E-Mail, Spam-Ordner, Kundenservice</p>
+    <p class="faq__section-keywords">Keywords: Bestellung, Bestätigungs-E-Mail, Spam-Ordner, Kundenservice</p>
   </div>
 
   <div class="faq__section">
-    <h2 class="faq__section-title">Wie kann ich sicherstellen, dass meine Zahlung erfolgreich durchgeführt wird?</h2>
-    <ul class="faq__section-list">
-      <li class="faq__section-list-item">Verwenden Sie eine unterstützte Zahlungsmethode (Sofortüberweisung, PayPal, Visa).</li>
-      <li class="faq__section-list-item">Falls es zu Fehlern kommt, folgen Sie den Anweisungen in der Bestätigungs-E-Mail und zahlen Sie per Rechnung.</li>
-    </ul>
-    <p class="faq__section-keywords">Keywords: Zahlung, erfolgreich, Zahlungsmethoden, Rechnung</p>
+    <h2 class="faq__section-title">Wie kann ich sicherstellen, dass meine Bestellung erfolgreich durchgeführt wurde?</h2>
+    <p class="faq__section-content">
+      Sollte es bei einer der online Zahlungsmethoden (Sofortüberweisung, PayPal, Visa, Mastercard) zu einem technischen Fehler kommen, wird die Bestellung trotdem ausgelöst.
+      Diese wird dann als Rechnungskauf behandelt, und Sie können den Betrag nach Lieferung überweisen.
+    </p>
+    <p class="faq__section-keywords">Keywords: Bestellung, Zahlung, Rechnungskauf, Zahlungsmethoden, Rechnung</p>
   </div>
 
   <div class="faq__section">
   <h2 class="faq__section-title">Welche gesetzlichen Vorgaben gelten für Verbrauchsdaten?</h2>
   <p class="faq__section-content">
-    Verbrauchsdaten dürfen laut <span class="faq__section-highlight">GG24</span> nicht älter als <span class="faq__section-highlight">18 Monate</span> sein. Ältere Daten werden nicht akzeptiert und müssen aktualisiert werden.
+    Verbrauchsdaten dürfen laut <span class="faq__section-highlight">GEG 2024</span> nicht älter als <span class="faq__section-highlight">18 Monate</span> sein. Ältere Daten werden nicht akzeptiert und müssen aktualisiert werden.
   </p>
   <p class="faq__section-keywords">
     Keywords: gesetzliche Vorgaben, Verbrauchszeiträume, Aktualisierung, Energieverbrauch, Ausweis-Erstellung
@@ -215,7 +216,7 @@ import Layout from "#layouts/Layout.astro";
 <div class="faq__section">
   <h2 class="faq__section-title">Warum kam es zu Fehlermeldungen beim Weiterklicken?</h2>
   <p class="faq__section-content">
-    Fehlermeldungen treten auf, wenn <span class="faq__section-highlight">Pflichtfelder</span> nicht korrekt ausgefüllt wurden. Solche Felder werden rot markiert und müssen korrigiert werden.
+    Fehlermeldungen treten auf, wenn <span class="faq__section-highlight">Pflichtfelder</span> nicht komplett ausgefüllt wurden. Solche Felder werden rot markiert und müssen ausgefüllt werden.
   </p>
   <p class="faq__section-keywords">
     Keywords: Fehlermeldungen, Pflichtfelder, technische Probleme, Energieverbrauch, Ausweis-Erstellung
@@ -225,7 +226,7 @@ import Layout from "#layouts/Layout.astro";
 <div class="faq__section">
   <h2 class="faq__section-title">Wie wird der Energieverbrauchsausweis geprüft?</h2>
   <p class="faq__section-content">
-    Nach Abschluss der <span class="faq__section-keywords">Dateneingabe</span> und <span class="faq__section-keywords">Bezahlung</span> werden die Angaben manuell geprüft. Sind alle Daten korrekt, wird der Energieverbrauchsausweis ausgestellt.
+    Nach Abschluss der <span class="faq__section-keywords">Dateneingabe</span> und <span class="faq__section-keywords">Bezahlung</span> werden die Angaben manuell geprüft. Sind alle Daten schlüssig, wird der Energieverbrauchsausweis ausgestellt.
   </p>
   <p class="faq__section-keywords">
     Keywords: Prüfung, Energieverbrauchsausweis, manuelle Kontrolle, Energieverbrauch, Ausweis-Erstellung
@@ -235,41 +236,42 @@ import Layout from "#layouts/Layout.astro";
 <div class="faq__section">
   <h2 class="faq__section-title">Welche Zahlungsmethoden stehen zur Verfügung?</h2>
   <p class="faq__section-content">
-    Es kann entweder <span class="faq__section-highlight">online</span> (z. B. via PayPal) oder nachträglich per <span class="faq__section-highlight">Rechnung</span> bezahlt werden.
+    Es kann entweder <span class="faq__section-highlight">online</span> (z. B. via PayPal, Kreditkarte, Sofort) oder nachträglich per <span class="faq__section-highlight">Rechnung</span> (Überweisung) bezahlt werden.
   </p>
   <p class="faq__section-keywords">
-    Keywords: Bezahlung, Zahlungsmethoden, PayPal, Rechnung, Energieverbrauch, Ausweis-Erstellung
+    Keywords: Bezahlung, Zahlungsmethoden, PayPal, Kreditkarte, Sofort, Rechnung, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
 <div class="faq__section">
   <h2 class="faq__section-title">Wie erfolgt die Lieferung des Energieverbrauchsausweises?</h2>
   <p class="faq__section-content">
-    Der Energieverbrauchsausweis wird nach erfolgreicher Prüfung an die angegebene <span class="faq__section-email">E-Mail-Adresse</span> versendet.
+    Der Energieverbrauchsausweis wird nach erfolgreicher Prüfung an die angegebene <span class="faq__section-email">E-Mail-Adresse</span> versendet. Auf Wunsch erfolgt gegen eine Gebühr zusätzlich der Postversand.
   </p>
   <p class="faq__section-keywords">
-    Keywords: Lieferung, E-Mail-Adresse, Versand, Energieverbrauch, Ausweis-Erstellung
+    Keywords: Lieferung, E-Mail-Adresse, Versand, Postversand, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
 <div class="faq__section">
-  <h2 class="faq__section-title">Was tun, wenn technische Probleme auftreten?</h2>
+  <h2 class="faq__section-title">Was tun, wenn bei klick auf "weiter" nichts passiert?</h2>
   <p class="faq__section-content">
-    Bei technischen Schwierigkeiten sollte geprüft werden, ob alle <span class="faq__section-highlight">Pflichtfelder</span> ausgefüllt sind. Rot markierte Felder weisen auf fehlende Angaben hin.
+    Bitte prüfen Sie, ob alle <span class="faq__section-highlight">Pflichtfelder</span> ausgefüllt sind.
+    Rot markierte Felder weisen auf fehlende Angaben hin. Wenn alle rot markierten Felder ausgefüllt sind kommen Sie nach klick auf "weiter" zu Schritt 2. (Kundendaten).
   </p>
   <p class="faq__section-keywords">
-    Keywords: technische Probleme, Fehlermeldung, Pflichtfelder, Energieverbrauch, Ausweis-Erstellung
+    Keywords: komme nicht weiter, Fehlermeldung, Pflichtfelder, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
 <div class="faq__section">
   <h2 class="faq__section-title">Wie kann der Kundenservice kontaktiert werden?</h2>
   <p class="faq__section-content">
-    Der Kundenservice ist über <span class="faq__section-highlight">E-Mail</span> oder telefonisch erreichbar und hilft bei Problemen oder offenen Fragen.
+    Der Kundenservice ist über <span class="faq__section-highlight">E-Mail</span> oder telefonisch (Mo - FR von 9 - 12 Uhr) erreichbar und hilft bei Problemen oder offenen Fragen.
   </p>
   <ul class="faq__section-list">
-    <li class="faq__section-list-item">Telefon: 0800 123456</li>
-    <li class="faq__section-list-item">E-Mail: <span class="faq__section-email">support@example.com</span></li>
+    <li class="faq__section-list-item">Telefon: 040-209 339 850</li>
+    <li class="faq__section-list-item">E-Mail: <span class="faq__section-email">info@online-energieausweis.org</span></li>
   </ul>
   <p class="faq__section-keywords">
     Keywords: Kundenservice, Kontakt, Hilfe, E-Mail, Telefon, Energieverbrauch, Ausweis-Erstellung

From ba045edc251df6503c8bfc255f8dce897f76ec21 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 02:36:07 +0100
Subject: [PATCH 040/165] Tag cloud

---
 src/pages/faq/index.astro | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index f4f9eb6a..800b48de 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -13,6 +13,30 @@ import Layout from "#layouts/Layout.astro";
 
 <div class="faq">
 
+<div class="keyword-cloud">
+  <span class="keyword-cloud__tag">Gebäudekonstruktion</span>
+  <span class="keyword-cloud__tag">Standard-Software</span>
+  <span class="keyword-cloud__tag">manuelle Bearbeitung</span>
+  <span class="keyword-cloud__tag">Zusatzkosten</span>
+  <span class="keyword-cloud__tag">Grundrisspläne</span>
+  <span class="keyword-cloud__tag">Baujahr</span>
+  <span class="keyword-cloud__tag">Pläne</span>
+  <span class="keyword-cloud__tag">Übermittlung</span>
+  <span class="keyword-cloud__tag">E-Mail</span>
+  <span class="keyword-cloud__tag">Rechnung</span>
+  <span class="keyword-cloud__tag">Differenzbetrag</span>
+  <span class="keyword-cloud__tag">Mischgebäude</span>
+  <span class="keyword-cloud__tag">Rückruf</span>
+  <span class="keyword-cloud__tag">Wohnfläche</span>
+  <span class="keyword-cloud__tag">energetische Nutzfläche</span>
+  <span class="keyword-cloud__tag">Dachgeschoss</span>
+  <span class="keyword-cloud__tag">Bauweise</span>
+  <span class="keyword-cloud__tag">Zahlungsmethoden</span>
+  <span class="keyword-cloud__tag">Bestätigungs-E-Mail</span>
+  <span class="keyword-cloud__tag">Kundenservice</span>
+  <span class="keyword-cloud__tag">Pflichtfelder</span>
+</div>
+
   <div class="faq__section">
     <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
     <p class="faq__section-content">
@@ -323,5 +347,18 @@ import Layout from "#layouts/Layout.astro";
 
   }
 }
+
+.keyword-cloud {
+  @apply flex flex-wrap gap-2 mt-6 p-4 bg-gray-50 rounded-lg shadow-md;
+
+  &__tag {
+    @apply bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-blue-200;
+    transition: all 0.3s ease-in-out;
+  }
+
+  &__tag:hover {
+    @apply shadow-md;
+  }
+}
 </style>	
 </Layout>
\ No newline at end of file

From fcdd9da3bd12985a5e70dc6693752d120e9f984b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 02:52:37 +0100
Subject: [PATCH 041/165] Filter

---
 src/pages/faq/index.astro | 75 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 800b48de..c4ed51af 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -5,6 +5,67 @@ import Layout from "#layouts/Layout.astro";
 
 ---
 
+<script>
+
+document.addEventListener("DOMContentLoaded", () => {
+  const tags = document.querySelectorAll(".keyword-cloud__tag");
+  const faqSections = document.querySelectorAll(".faq__section");
+
+  const selectedKeywords = new Set();
+
+  // Toggle keyword selection
+  tags.forEach((tag) => {
+    tag.addEventListener("click", () => {
+      const keyword = tag.dataset.keyword;
+
+      // Toggle keyword in the selected set
+      if (selectedKeywords.has(keyword)) {
+        selectedKeywords.delete(keyword);
+        tag.classList.remove("keyword-cloud__tag--active");
+      } else {
+        selectedKeywords.add(keyword);
+        tag.classList.add("keyword-cloud__tag--active");
+      }
+
+      // Update FAQ visibility
+      updateFaqVisibility();
+    });
+  });
+
+  const updateFaqVisibility = () => {
+    if (selectedKeywords.size === 0) {
+      // If no keywords are selected, show all sections
+      faqSections.forEach((section) => {
+        section.classList.remove("faq__section--visible");
+        section.classList.add("faq__section--visible");
+      });
+      return;
+    }
+
+    // Show only sections matching the selected keywords
+    faqSections.forEach((section) => {
+      const sectionKeywords = section.dataset.keywords.split(", ");
+      const hasMatch = [...selectedKeywords].some((keyword) =>
+        sectionKeywords.includes(keyword)
+      );
+
+      if (hasMatch) {
+        section.classList.add("faq__section--visible");
+        section.classList.remove("hidden");
+      } else {
+        section.classList.remove("faq__section--visible");
+        section.classList.add("hidden");
+      }
+    });
+  };
+});
+
+
+</script>
+
+
+
+
 <Layout title="FAQ - Sammmlung">
 
 <h1 class="text-3xl">FAQ – Sammlung</h1>
@@ -359,6 +420,20 @@ import Layout from "#layouts/Layout.astro";
   &__tag:hover {
     @apply shadow-md;
   }
+
+  &__tag--active {
+    @apply bg-blue-300 text-blue-900 font-bold;
+  }
 }
+
+.faq__section {
+  @apply hidden mt-4;
+
+  &--visible {
+    @apply block;
+  }
+}
+
 </style>	
+
 </Layout>
\ No newline at end of file

From 2632d5806589511cd424d73fe1c56a44feccd23b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 03:17:13 +0100
Subject: [PATCH 042/165] Tag Cloud

---
 src/pages/faq/index.astro | 84 +++++++++++++++------------------------
 1 file changed, 31 insertions(+), 53 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index c4ed51af..7e045453 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -75,30 +75,18 @@ document.addEventListener("DOMContentLoaded", () => {
 <div class="faq">
 
 <div class="keyword-cloud">
-  <span class="keyword-cloud__tag">Gebäudekonstruktion</span>
-  <span class="keyword-cloud__tag">Standard-Software</span>
-  <span class="keyword-cloud__tag">manuelle Bearbeitung</span>
-  <span class="keyword-cloud__tag">Zusatzkosten</span>
-  <span class="keyword-cloud__tag">Grundrisspläne</span>
-  <span class="keyword-cloud__tag">Baujahr</span>
-  <span class="keyword-cloud__tag">Pläne</span>
-  <span class="keyword-cloud__tag">Übermittlung</span>
-  <span class="keyword-cloud__tag">E-Mail</span>
-  <span class="keyword-cloud__tag">Rechnung</span>
-  <span class="keyword-cloud__tag">Differenzbetrag</span>
-  <span class="keyword-cloud__tag">Mischgebäude</span>
-  <span class="keyword-cloud__tag">Rückruf</span>
-  <span class="keyword-cloud__tag">Wohnfläche</span>
-  <span class="keyword-cloud__tag">energetische Nutzfläche</span>
-  <span class="keyword-cloud__tag">Dachgeschoss</span>
-  <span class="keyword-cloud__tag">Bauweise</span>
-  <span class="keyword-cloud__tag">Zahlungsmethoden</span>
-  <span class="keyword-cloud__tag">Bestätigungs-E-Mail</span>
-  <span class="keyword-cloud__tag">Kundenservice</span>
-  <span class="keyword-cloud__tag">Pflichtfelder</span>
+  <button class="keyword-cloud__tag" data-keyword="Gebäudekonstruktion">Gebäudekonstruktion</button>
+  <button class="keyword-cloud__tag" data-keyword="Standard-Software">Standard-Software</button>
+  <button class="keyword-cloud__tag" data-keyword="manuelle Bearbeitung">manuelle Bearbeitung</button>
+  <button class="keyword-cloud__tag" data-keyword="Zusatzkosten">Zusatzkosten</button>
+  <button class="keyword-cloud__tag" data-keyword="Grundrisspläne">Grundrisspläne</button>
+  <button class="keyword-cloud__tag" data-keyword="Rechnung">Rechnung</button>
+  <button class="keyword-cloud__tag" data-keyword="E-Mail">E-Mail</button>
+  <button class="keyword-cloud__tag" data-keyword="Dachgeschoss">Dachgeschoss</button>
+  <button class="keyword-cloud__tag" data-keyword="Pflichtfelder">Pflichtfelder</button>
 </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten">
     <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
     <p class="faq__section-content">
       Wenn die Geometrie Ihres Gebäudes nicht korrekt in die Online-Eingabe passt (z. B. wegen eines großen Anbaus oder einer untypischen Bauweise), müssen wir die Daten manuell im Büro bearbeiten. Dies verursacht zusätzliche Kosten, die in der Regel bei <span class="faq__section-highlight">290 Euro (inklusive MwSt.)</span> liegen.
@@ -106,9 +94,11 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau">
     <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
-    <p class="faq__section-content">Grundrisspläne des Gebäudes, insbesondere:</p>
+    <p class="faq__section-content">
+      Grundrisspläne des Gebäudes, insbesondere:
+    </p>
     <ul class="faq__section-list">
       <li class="faq__section-list-item">Anbau</li>
       <li class="faq__section-list-item">Altbau</li>
@@ -117,7 +107,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Pläne, Übermittlung, E-Mail, ID-Nummer">
     <h2 class="faq__section-title">Wie können die Pläne übermittelt werden?</h2>
     <p class="faq__section-content">
       Senden Sie die Pläne per E-Mail an:
@@ -127,7 +117,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Rechnung, korrigierte Rechnung, Differenzbetrag">
     <h2 class="faq__section-title">Was passiert mit der Rechnung?</h2>
     <p class="faq__section-content">
       Nach der Bearbeitung erhalten Sie eine <span class="faq__section-highlight">korrigierte Rechnung</span>, die den neuen Betrag (290 Euro) ausweist. Wenn Sie bereits eine Zahlung geleistet haben, wird lediglich der Differenzbetrag fällig.
@@ -135,16 +125,15 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude">
     <h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
     <p class="faq__section-content">
       Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
-      <span class="faq__section-highlight">Getrennt wird nur wenn es sich um eine Mischgebäude (Wohnteil und Gewerbeteil) handelt.</span> In diesem Fall werden zwei Energieausweise erstellt (Energieausweis für Wohngebäude und Energieausweis für Nichtwohngebäude).
     </p>
     <p class="faq__section-keywords">Keywords: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Rückruf, Informationen, Unterlagen, Kontaktzeiten">
     <h2 class="faq__section-title">Wann erfolgt der Rückruf?</h2>
     <p class="faq__section-content">
       Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
@@ -152,7 +141,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Pläne, Versand, Berechnung, Energieausweis, Rechnung">
     <h2 class="faq__section-title">Was passiert nach dem Versand der Pläne?</h2>
     <p class="faq__section-content">
       Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
@@ -160,47 +149,36 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus">
     <h2 class="faq__section-title">Was zählt zur beheizten Wohnfläche?</h2>
     <p class="faq__section-content">
-      Beheizte Wohnfläche umfasst Flächen, die zu Wohnzwecken genutzt werden.  
-      Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der
-      <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.  
-      Flächen außerhalb des Hauses, wie halbe Terrassenflächen, müssen abgezogen werden.
+      Beheizte Wohnfläche umfasst Flächen, die zu Wohnzwecken genutzt werden. Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.
     </p>
     <p class="faq__section-keywords">Keywords: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus">
     <h2 class="faq__section-title">Wie wird mit der energetischen Nutzfläche umgegangen?</h2>
     <p class="faq__section-content">
-      Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.  
-      Diese Fläche wird bei Berechnung vom Endenergieverbrauch berücksichtigt, da sie den Gesamtwert beeinflusst.
+      Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.
     </p>
     <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen">
     <h2 class="faq__section-title">Wie werden Flächen unter Dachschrägen im Dachgeschoss berechnet?</h2>
     <ul class="faq__section-list">
-      <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>  
-      <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>  
+      <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>
+      <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>
       <li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
     </ul>
     <p class="faq__section-keywords">Keywords: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
   </div>
 
-  <div class="faq__section">
+  <div class="faq__section" data-keywords="Dachinnenraum, Spitzboden, Dämmung, Fotos">
     <h2 class="faq__section-title">Was ist mit dem Dachinnenraum gemeint, und welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">
-      Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von:
-    </p>
-    <ul class="faq__section-list">
-      <li class="faq__section-list-item">Dachflächenfenstern und deren Laibungen</li>  
-      <li class="faq__section-list-item">Sichtbaren Dämmungen oder Isolierungen</li>  
-    </ul>
-    <p class="faq__section-content">
-      Diese Fotos helfen bei der Beurteilung des Dämmstandards und Modernisierungsoptionen.
+      Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von Dachflächenfenstern und deren Laibungen sowie sichtbaren Dämmungen oder Isolierungen.
     </p>
     <p class="faq__section-keywords">Keywords: Dachinnenraum, Spitzboden, Dämmung, Fotos</p>
   </div>
@@ -410,10 +388,10 @@ document.addEventListener("DOMContentLoaded", () => {
 }
 
 .keyword-cloud {
-  @apply flex flex-wrap gap-2 mt-6 p-4 bg-gray-50 rounded-lg shadow-md;
+  @apply flex flex-wrap gap-3 mt-1 p-4;
 
   &__tag {
-    @apply bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-blue-200;
+    @apply text-xl font-medium px-3 py-2 rounded-full hover:secondary border-1;
     transition: all 0.3s ease-in-out;
   }
 
@@ -422,7 +400,7 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   &__tag--active {
-    @apply bg-blue-300 text-blue-900 font-bold;
+    @apply font-bold;
   }
 }
 

From 8ce2d1e2e7460b8bced6ab471018ef33e046cad4 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 03:20:08 +0100
Subject: [PATCH 043/165] Fix

---
 src/pages/faq/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 7e045453..432a605b 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -391,7 +391,7 @@ document.addEventListener("DOMContentLoaded", () => {
   @apply flex flex-wrap gap-3 mt-1 p-4;
 
   &__tag {
-    @apply text-xl font-medium px-3 py-2 rounded-full hover:secondary border-1;
+    @apply text-xl font-medium px-3 py-2 rounded-full border-1;
     transition: all 0.3s ease-in-out;
   }
 

From 1fe556648d4ffc28b20fac3a255f03b7be963d4a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 03:23:39 +0100
Subject: [PATCH 044/165] border

---
 src/pages/faq/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 432a605b..a3166b6e 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -391,7 +391,7 @@ document.addEventListener("DOMContentLoaded", () => {
   @apply flex flex-wrap gap-3 mt-1 p-4;
 
   &__tag {
-    @apply text-xl font-medium px-3 py-2 rounded-full border-1;
+    @apply text-xl font-medium px-3 py-2 rounded-full border-2;
     transition: all 0.3s ease-in-out;
   }
 

From 74b38e02acc54409631c1bff6b034529ae568c7e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 03:32:36 +0100
Subject: [PATCH 045/165] FAQ

---
 src/pages/faq/index.astro | 121 ++++----------------------------------
 1 file changed, 11 insertions(+), 110 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index a3166b6e..7d0dc49c 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -2,70 +2,8 @@
 
 import Layout from "#layouts/Layout.astro";
 
-
 ---
 
-<script>
-
-document.addEventListener("DOMContentLoaded", () => {
-  const tags = document.querySelectorAll(".keyword-cloud__tag");
-  const faqSections = document.querySelectorAll(".faq__section");
-
-  const selectedKeywords = new Set();
-
-  // Toggle keyword selection
-  tags.forEach((tag) => {
-    tag.addEventListener("click", () => {
-      const keyword = tag.dataset.keyword;
-
-      // Toggle keyword in the selected set
-      if (selectedKeywords.has(keyword)) {
-        selectedKeywords.delete(keyword);
-        tag.classList.remove("keyword-cloud__tag--active");
-      } else {
-        selectedKeywords.add(keyword);
-        tag.classList.add("keyword-cloud__tag--active");
-      }
-
-      // Update FAQ visibility
-      updateFaqVisibility();
-    });
-  });
-
-  const updateFaqVisibility = () => {
-    if (selectedKeywords.size === 0) {
-      // If no keywords are selected, show all sections
-      faqSections.forEach((section) => {
-        section.classList.remove("faq__section--visible");
-        section.classList.add("faq__section--visible");
-      });
-      return;
-    }
-
-    // Show only sections matching the selected keywords
-    faqSections.forEach((section) => {
-      const sectionKeywords = section.dataset.keywords.split(", ");
-      const hasMatch = [...selectedKeywords].some((keyword) =>
-        sectionKeywords.includes(keyword)
-      );
-
-      if (hasMatch) {
-        section.classList.add("faq__section--visible");
-        section.classList.remove("hidden");
-      } else {
-        section.classList.remove("faq__section--visible");
-        section.classList.add("hidden");
-      }
-    });
-  };
-});
-
-
-</script>
-
-
-
-
 <Layout title="FAQ - Sammmlung">
 
 <h1 class="text-3xl">FAQ – Sammlung</h1>
@@ -74,19 +12,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
 <div class="faq">
 
-<div class="keyword-cloud">
-  <button class="keyword-cloud__tag" data-keyword="Gebäudekonstruktion">Gebäudekonstruktion</button>
-  <button class="keyword-cloud__tag" data-keyword="Standard-Software">Standard-Software</button>
-  <button class="keyword-cloud__tag" data-keyword="manuelle Bearbeitung">manuelle Bearbeitung</button>
-  <button class="keyword-cloud__tag" data-keyword="Zusatzkosten">Zusatzkosten</button>
-  <button class="keyword-cloud__tag" data-keyword="Grundrisspläne">Grundrisspläne</button>
-  <button class="keyword-cloud__tag" data-keyword="Rechnung">Rechnung</button>
-  <button class="keyword-cloud__tag" data-keyword="E-Mail">E-Mail</button>
-  <button class="keyword-cloud__tag" data-keyword="Dachgeschoss">Dachgeschoss</button>
-  <button class="keyword-cloud__tag" data-keyword="Pflichtfelder">Pflichtfelder</button>
-</div>
-
-  <div class="faq__section" data-keywords="Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
     <p class="faq__section-content">
       Wenn die Geometrie Ihres Gebäudes nicht korrekt in die Online-Eingabe passt (z. B. wegen eines großen Anbaus oder einer untypischen Bauweise), müssen wir die Daten manuell im Büro bearbeiten. Dies verursacht zusätzliche Kosten, die in der Regel bei <span class="faq__section-highlight">290 Euro (inklusive MwSt.)</span> liegen.
@@ -94,7 +20,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
   </div>
 
-  <div class="faq__section" data-keywords="Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau">
+  <div class="faq__section">
     <h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">
       Grundrisspläne des Gebäudes, insbesondere:
@@ -107,7 +33,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
   </div>
 
-  <div class="faq__section" data-keywords="Pläne, Übermittlung, E-Mail, ID-Nummer">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wie können die Pläne übermittelt werden?</h2>
     <p class="faq__section-content">
       Senden Sie die Pläne per E-Mail an:
@@ -117,7 +43,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
   </div>
 
-  <div class="faq__section" data-keywords="Rechnung, korrigierte Rechnung, Differenzbetrag">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was passiert mit der Rechnung?</h2>
     <p class="faq__section-content">
       Nach der Bearbeitung erhalten Sie eine <span class="faq__section-highlight">korrigierte Rechnung</span>, die den neuen Betrag (290 Euro) ausweist. Wenn Sie bereits eine Zahlung geleistet haben, wird lediglich der Differenzbetrag fällig.
@@ -125,7 +51,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
   </div>
 
-  <div class="faq__section" data-keywords="Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude">
+  <div class="faq__section">
     <h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
     <p class="faq__section-content">
       Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
@@ -133,7 +59,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
   </div>
 
-  <div class="faq__section" data-keywords="Rückruf, Informationen, Unterlagen, Kontaktzeiten">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wann erfolgt der Rückruf?</h2>
     <p class="faq__section-content">
       Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
@@ -141,7 +67,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
   </div>
 
-  <div class="faq__section" data-keywords="Pläne, Versand, Berechnung, Energieausweis, Rechnung">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was passiert nach dem Versand der Pläne?</h2>
     <p class="faq__section-content">
       Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
@@ -149,7 +75,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
   </div>
 
-  <div class="faq__section" data-keywords="Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was zählt zur beheizten Wohnfläche?</h2>
     <p class="faq__section-content">
       Beheizte Wohnfläche umfasst Flächen, die zu Wohnzwecken genutzt werden. Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.
@@ -157,7 +83,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
   </div>
 
-  <div class="faq__section" data-keywords="energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wie wird mit der energetischen Nutzfläche umgegangen?</h2>
     <p class="faq__section-content">
       Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.
@@ -165,7 +91,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
   </div>
 
-  <div class="faq__section" data-keywords="Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen">
+  <div class="faq__section">
     <h2 class="faq__section-title">Wie werden Flächen unter Dachschrägen im Dachgeschoss berechnet?</h2>
     <ul class="faq__section-list">
       <li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>
@@ -175,7 +101,7 @@ document.addEventListener("DOMContentLoaded", () => {
     <p class="faq__section-keywords">Keywords: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
   </div>
 
-  <div class="faq__section" data-keywords="Dachinnenraum, Spitzboden, Dämmung, Fotos">
+  <div class="faq__section">
     <h2 class="faq__section-title">Was ist mit dem Dachinnenraum gemeint, und welche Unterlagen werden benötigt?</h2>
     <p class="faq__section-content">
       Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von Dachflächenfenstern und deren Laibungen sowie sichtbaren Dämmungen oder Isolierungen.
@@ -387,31 +313,6 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 }
 
-.keyword-cloud {
-  @apply flex flex-wrap gap-3 mt-1 p-4;
-
-  &__tag {
-    @apply text-xl font-medium px-3 py-2 rounded-full border-2;
-    transition: all 0.3s ease-in-out;
-  }
-
-  &__tag:hover {
-    @apply shadow-md;
-  }
-
-  &__tag--active {
-    @apply font-bold;
-  }
-}
-
-.faq__section {
-  @apply hidden mt-4;
-
-  &--visible {
-    @apply block;
-  }
-}
-
 </style>	
 
 </Layout>
\ No newline at end of file

From 804ff5fb0b2705fbb8b47b20029e83025a5528a4 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 03:48:29 +0100
Subject: [PATCH 046/165] =?UTF-8?q?FAG=20GEG=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/faq/index.astro | 116 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 7d0dc49c..a55d253a 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -267,6 +267,122 @@ import Layout from "#layouts/Layout.astro";
   </p>
 </div>
 
+  <div class="faq__section" data-keywords="GEG, Gebäudeenergiegesetz, Energieeffizienz, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Was ist das Gebäudeenergiegesetz (GEG)?</h2>
+    <p class="faq__section-content">
+      Das GEG ist ein Gesetz, das die energetischen Anforderungen an Gebäude regelt. Es vereint frühere Regelungen wie die
+      <span class="faq__section-highlight">Energieeinsparverordnung (EnEV)</span>, das <span class="faq__section-highlight">EEWärmeG</span> und das
+      <span class="faq__section-highlight">EnEG</span> in einem einheitlichen Gesetz. Ziel ist es, den Klimaschutz zu fördern und die Energieeffizienz von Gebäuden zu steigern.
+    </p>
+    <p class="faq__section-keywords">Keywords: GEG, Gebäudeenergiegesetz, Energieeffizienz, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Betroffene, Neubauten, Bestandsgebäude, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Wer ist vom GEG betroffen?</h2>
+    <p class="faq__section-content">
+      Das GEG gilt für Neubauten, Bestandsgebäude, gemischt genutzte Gebäude sowie Wohn- und Nichtwohngebäude. Es betrifft sowohl Bauherren als auch Eigentümer, die wesentliche Umbauten planen oder ihre Heizungsanlagen erneuern müssen.
+    </p>
+    <p class="faq__section-keywords">Keywords: Betroffene, Neubauten, Bestandsgebäude, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Heizungen, 65%-Regel, Erneuerbare Energien, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Was bedeutet die 65%-Regel für Heizungen?</h2>
+    <p class="faq__section-content">
+      Ab <span class="faq__section-highlight">2024</span> müssen neu installierte Heizungen mindestens <span class="faq__section-highlight">65 %</span> ihres Wärmebedarfs aus erneuerbaren Energien decken. Betroffen sind unter anderem:
+    </p>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Wärmepumpen</li>
+      <li class="faq__section-list-item">Biomasseheizungen</li>
+      <li class="faq__section-list-item">Solarthermieanlagen</li>
+      <li class="faq__section-list-item">Hybridheizungen</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Heizungen, 65%-Regel, Erneuerbare Energien, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Heizkessel, Austauschpflicht, Ausnahmen, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Gibt es eine Austauschpflicht für alte Heizungen?</h2>
+    <p class="faq__section-content">
+      Heizkessel, die älter als <span class="faq__section-highlight">30 Jahre</span> sind und nicht der Brennwert- oder Niedertemperaturtechnik entsprechen, dürfen nicht weiter betrieben werden. Ausnahmen gelten für:
+    </p>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Selbstbewohnte Gebäude von Eigentümern, die vor 2002 eingezogen sind</li>
+      <li class="faq__section-list-item">Technisch unzumutbare Fälle</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Heizkessel, Austauschpflicht, Ausnahmen, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Neubauten, Effizienzhaus, EH55, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Welche Anforderungen gelten für Neubauten?</h2>
+    <p class="faq__section-content">
+      Neubauten müssen ab 2024 mindestens den Standard eines <span class="faq__section-highlight">Effizienzhauses 55 (EH 55)</span> erfüllen. Dazu gehören:
+    </p>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Strengere Anforderungen an die Gebäudehülle</li>
+      <li class="faq__section-list-item">Verpflichtung zum Einsatz erneuerbarer Energien</li>
+      <li class="faq__section-list-item">Verbesserte Dämmung</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Neubauten, Effizienzhaus, EH55, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Bestandsgebäude, Dämmung, Heizsysteme, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Was sind die Anforderungen für Bestandsgebäude?</h2>
+    <p class="faq__section-content">
+      Bestandsgebäude unterliegen neuen Vorgaben wie der Dämmung ungedämmter Dachböden oder oberster Geschossdecken, dem hydraulischen Abgleich von Heizsystemen und Modernisierungspflichten bei größeren Umbauten.
+    </p>
+    <p class="faq__section-keywords">Keywords: Bestandsgebäude, Dämmung, Heizsysteme, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Energieausweise, CO₂-Emissionen, Gültigkeit, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Was ändert sich bei Energieausweisen?</h2>
+    <p class="faq__section-content">
+      Energieausweise müssen detailliertere Informationen enthalten, wie CO₂-Emissionen und Sanierungsempfehlungen. Sie bleiben weiterhin <span class="faq__section-highlight">10 Jahre</span> gültig und müssen bei Verkauf oder Vermietung vorgelegt werden.
+    </p>
+    <p class="faq__section-keywords">Keywords: Energieausweise, CO₂-Emissionen, Gültigkeit, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Bußgelder, Verstöße, Energieeffizienz, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Welche Strafen drohen bei Verstößen?</h2>
+    <p class="faq__section-content">
+      Verstöße können mit Bußgeldern von bis zu <span class="faq__section-highlight">50.000 Euro</span> geahndet werden. Dazu gehören:
+    </p>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Verstöße gegen die Austauschpflicht alter Heizungen</li>
+      <li class="faq__section-list-item">Fehlende Dämmungen</li>
+      <li class="faq__section-list-item">Falsche Angaben im Energieausweis</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Bußgelder, Verstöße, Energieeffizienz, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Förderungen, KfW, BAFA, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Welche Förderungen gibt es?</h2>
+    <p class="faq__section-content">
+      Förderprogramme der <span class="faq__section-highlight">KfW</span> und des <span class="faq__section-highlight">BAFA</span> unterstützen Maßnahmen wie den Austausch alter Heizungen, Dämmungen und die Nutzung erneuerbarer Energien. Förderungen stehen für Sanierungen und Neubauten zur Verfügung.
+    </p>
+    <p class="faq__section-keywords">Keywords: Förderungen, KfW, BAFA, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="Ausnahmen, Denkmalschutz, kleine Gebäude, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Welche Ausnahmen gelten?</h2>
+    <p class="faq__section-content">
+      Das GEG sieht Ausnahmen vor, unter anderem für:
+    </p>
+    <ul class="faq__section-list">
+      <li class="faq__section-list-item">Denkmalschutzgebäude</li>
+      <li class="faq__section-list-item">Kleine Gebäude mit weniger als 50 m² Nutzfläche</li>
+      <li class="faq__section-list-item">Selbstbewohnte Gebäude, die vor 2002 bezogen wurden</li>
+    </ul>
+    <p class="faq__section-keywords">Keywords: Ausnahmen, Denkmalschutz, kleine Gebäude, GEG 2024, aktuelles GEG</p>
+  </div>
+
+  <div class="faq__section" data-keywords="GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG">
+    <h2 class="faq__section-title">Wo finde ich den Volltext des GEG?</h2>
+    <p class="faq__section-content">
+      Der vollständige Text ist verfügbar auf der Seite:
+      <a href="https://www.gesetze-im-internet.de/geg/GEG.pdf" class="faq__section-email">gesetze-im-internet.de</a>.
+    </p>
+    <p class="faq__section-keywords">Keywords: GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG</p>
+  </div>
+
 </div>
 
 </div>

From 27e45d0973aa98ff47e669d5a6796dbb85c4ad18 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 12:41:07 +0100
Subject: [PATCH 047/165] Glossar

---
 .../sidebars/cards/card-navigation.svelte     |   4 +
 src/pages/glossar/index.astro                 | 189 ++++++++++++++++++
 2 files changed, 193 insertions(+)
 create mode 100644 src/pages/glossar/index.astro

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index f1539a8f..0344092d 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -184,6 +184,10 @@ if(innerWidth>1024){
   </ul>
 </div>
 
+<div class="nav-element">
+  <a class="no-dropdown nav-element-child" href="/glossar">Glossar</a>
+  </div>
+
 <div class="nav-element">
 <a class="no-dropdown nav-element-child" href="/enev-zusammenfassung">EnEV Zusammenfassung - Archiv</a>
 </div>
diff --git a/src/pages/glossar/index.astro b/src/pages/glossar/index.astro
new file mode 100644
index 00000000..4f73043e
--- /dev/null
+++ b/src/pages/glossar/index.astro
@@ -0,0 +1,189 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Glossar">
+
+<h1 class="text-3xl">FAQ – Sammlung</h1>
+
+<div class="mt-12 m-auto w-[90%] relative">
+
+<div class="glossar">
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">A</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Altbau:</span> Älteres Gebäude, oft vor 1945 gebaut, das besondere bauliche und energetische Eigenschaften aufweist.<br>
+      <span class="glossar__section-highlight">Anbau:</span> Ein später hinzugefügter Teil eines Gebäudes, der oft andere Baujahre oder energetische Standards hat.<br>
+      <span class="glossar__section-highlight">Ausnahmen:</span> Besondere Regelungen, die bestimmte Gebäude oder Eigentümer von gesetzlichen Anforderungen befreien.<br>
+      <span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchs- oder Bedarfsdaten.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">B</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Baujahr:</span> Das Jahr, in dem ein Gebäude oder Gebäudeteil errichtet wurde. Relevant für energetische Bewertungen.<br>
+      <span class="glossar__section-highlight">Bestandsgebäude:</span> Bereits existierende Gebäude, die im Unterschied zu Neubauten besonderen Regelungen unterliegen.<br>
+      <span class="glossar__section-highlight">Bußgelder:</span> Finanzielle Strafen für Verstöße gegen gesetzliche Vorgaben, z. B. im Bereich der Energieeffizienz.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">D</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Dachgeschoss:</span> Oberste Etage eines Gebäudes, häufig mit Dachschrägen.<br>
+      <span class="glossar__section-highlight">Dachinnenraum:</span> Bereich unter dem Dach, der oft Dämmung und bauliche Besonderheiten aufweist.<br>
+      <span class="glossar__section-highlight">Dämmung:</span> Maßnahmen zur Verbesserung der Wärmeisolierung von Gebäuden.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">E</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">E-Mail:</span> Elektronische Kontaktmethode für die Übermittlung von Unterlagen oder für Kundenanfragen.<br>
+      <span class="glossar__section-highlight">Energieausweis:</span> Dokument, das den energetischen Zustand eines Gebäudes bewertet, basierend auf Verbrauchs- oder Bedarfsdaten.<br>
+      <span class="glossar__section-highlight">Energieverbrauch:</span> Gemessener oder geschätzter Energiebedarf eines Gebäudes zur Beheizung und Warmwasserbereitung.<br>
+      <span class="glossar__section-highlight">Energieverbrauchsausweis:</span> Eine Form des Energieausweises, die auf den tatsächlichen Verbrauchsdaten basiert.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">F</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung durch staatliche Programme (z. B. KfW, BAFA) für energetische Sanierungen oder Neubauten.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">G</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">GEG (Gebäudeenergiegesetz):</span> Gesetzliche Grundlage in Deutschland zur Regelung der energetischen Anforderungen an Gebäude.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">H</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Heizkessel:</span> Gerät zur Erzeugung von Heizwärme, das bestimmten energetischen Standards entsprechen muss.<br>
+      <span class="glossar__section-highlight">Heizsysteme:</span> Systeme, die Wärme in einem Gebäude bereitstellen, z. B. Zentralheizungen, Wärmepumpen.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">K</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Kundenservice:</span> Ansprechpartner für Probleme oder Fragen zur Ausweis-Erstellung und anderen Themen.<br>
+      <span class="glossar__section-highlight">Kontaktzeiten:</span> Zeitfenster, in denen der Kundenservice erreichbar ist.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">M</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Manuelle Bearbeitung:</span> Bearbeitung eines Energieausweises außerhalb der Standard-Software, oft aufgrund spezieller Gebäudekonstruktionen.<br>
+      <span class="glossar__section-highlight">Modernisierung:</span> Maßnahmen zur energetischen Verbesserung eines Gebäudes, z. B. Dämmung oder Heizungsaustausch.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">N</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Neubauten:</span> Gebäude, die nach den neuesten energetischen Standards errichtet werden.<br>
+      <span class="glossar__section-highlight">Nachbarn:</span> Potenzielle Informationsquelle für geschätzte Baujahre oder andere Daten.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">P</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Pflichtfelder:</span> Eingabefelder in einem Formular, die zwingend ausgefüllt werden müssen, um den Prozess abzuschließen.<br>
+      <span class="glossar__section-highlight">Pläne:</span> Baupläne oder Grundrisse, die für die Erstellung eines Energieausweises benötigt werden.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">R</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Rechnung:</span> Finanzielle Abrechnung für die Ausweis-Erstellung, inklusive eventueller Zusatzkosten.<br>
+      <span class="glossar__section-highlight">Rechnungskauf:</span> Zahlungsart, bei der die Bezahlung erst nach Erhalt der Rechnung erfolgt.<br>
+      <span class="glossar__section-highlight">Rückruf:</span> Telefonischer Kontakt durch den Anbieter, um fehlende Informationen oder Unterlagen zu klären.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">S</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Sanierung:</span> Bauliche Maßnahmen zur Verbesserung des baulichen oder energetischen Zustands eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Spam-Ordner:</span> Ordner in einem E-Mail-Postfach, in den automatisch gefilterte Nachrichten verschoben werden können.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">T</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Treppenhaus:</span> Teil eines Gebäudes, der nicht zur Wohnfläche, aber eventuell zur energetischen Nutzfläche zählt.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">U</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Unterlagen:</span> Dokumente wie Baupläne, die für die Erstellung eines Energieausweises erforderlich sind.
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">W</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Wohnfläche:</span> Fläche eines Gebäudes, die für Wohnzwecke genutzt wird. Beheizte Wohnfläche ist für die energetische Bewertung relevant.
+    </p>
+  </div>
+</div>
+
+</div>
+
+</div>
+
+<style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.glossar {
+  @apply space-y-6;
+
+  &__section {
+    @apply border-b pb-4;
+
+    &-title {
+      @apply text-2xl font-bold text-gray-800 mb-2;
+    }
+
+    &-content {
+      @apply text-gray-600 text-xl;
+    }
+
+    &-highlight {
+      @apply font-semibold text-gray-900;
+    }
+
+    &-email {
+      @apply text-secondary underline;
+    }
+
+	&-list {
+    @apply pl-2 mt-2 list-disc ml-5;
+  }
+
+  &-list-item {
+    @apply text-xl text-gray-600;
+  }
+
+  }
+}
+
+</style>	
+
+</Layout>
\ No newline at end of file

From 14c9d274f3fc242d5a441445da023d7a81cd6bdf Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 12:45:12 +0100
Subject: [PATCH 048/165] Glossar Titel

---
 src/pages/glossar/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/glossar/index.astro b/src/pages/glossar/index.astro
index 4f73043e..f96810db 100644
--- a/src/pages/glossar/index.astro
+++ b/src/pages/glossar/index.astro
@@ -6,7 +6,7 @@ import Layout from "#layouts/Layout.astro";
 
 <Layout title="Glossar">
 
-<h1 class="text-3xl">FAQ – Sammlung</h1>
+<h1 class="text-3xl">Glossar</h1>
 
 <div class="mt-12 m-auto w-[90%] relative">
 

From 65a12a72a529659c75a17732a89a20fa16ebb409 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 13:01:54 +0100
Subject: [PATCH 049/165] Glossar

---
 src/pages/faq/index.astro     | 76 +++++++++++++++++-----------------
 src/pages/glossar/index.astro | 78 +++++++++++++++--------------------
 2 files changed, 72 insertions(+), 82 deletions(-)

diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index a55d253a..df3bcbd9 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -17,7 +17,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Wenn die Geometrie Ihres Gebäudes nicht korrekt in die Online-Eingabe passt (z. B. wegen eines großen Anbaus oder einer untypischen Bauweise), müssen wir die Daten manuell im Büro bearbeiten. Dies verursacht zusätzliche Kosten, die in der Regel bei <span class="faq__section-highlight">290 Euro (inklusive MwSt.)</span> liegen.
     </p>
-    <p class="faq__section-keywords">Keywords: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
+    <p class="faq__section-keywords">Glossar: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
   </div>
 
   <div class="faq__section">
@@ -30,7 +30,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Altbau</li>
     </ul>
     <p class="faq__section-content">Baujahr der Gebäudeteile (z. B. Anbau von 1980).</p>
-    <p class="faq__section-keywords">Keywords: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
+    <p class="faq__section-keywords">Glossar: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
   </div>
 
   <div class="faq__section">
@@ -40,7 +40,7 @@ import Layout from "#layouts/Layout.astro";
       <a href="mailto:info@online-energieausweis.org" class="faq__section-email">info@online-energieausweis.org</a>.
       Bitte antworten Sie auf die letzte E-Mail, damit wir die <span class="faq__section-highlight">ID-Nummer</span> Ihres Falls direkt zuordnen können.
     </p>
-    <p class="faq__section-keywords">Keywords: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
+    <p class="faq__section-keywords">Glossar: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
   </div>
 
   <div class="faq__section">
@@ -48,7 +48,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Nach der Bearbeitung erhalten Sie eine <span class="faq__section-highlight">korrigierte Rechnung</span>, die den neuen Betrag (290 Euro) ausweist. Wenn Sie bereits eine Zahlung geleistet haben, wird lediglich der Differenzbetrag fällig.
     </p>
-    <p class="faq__section-keywords">Keywords: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
+    <p class="faq__section-keywords">Glossar: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
   </div>
 
   <div class="faq__section">
@@ -56,7 +56,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
     </p>
-    <p class="faq__section-keywords">Keywords: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
+    <p class="faq__section-keywords">Glossar: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
   </div>
 
   <div class="faq__section">
@@ -64,7 +64,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
     </p>
-    <p class="faq__section-keywords">Keywords: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
+    <p class="faq__section-keywords">Glossar: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
   </div>
 
   <div class="faq__section">
@@ -72,7 +72,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
     </p>
-    <p class="faq__section-keywords">Keywords: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
+    <p class="faq__section-keywords">Glossar: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
   </div>
 
   <div class="faq__section">
@@ -80,7 +80,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Beheizte Wohnfläche umfasst Flächen, die zu Wohnzwecken genutzt werden. Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.
     </p>
-    <p class="faq__section-keywords">Keywords: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
+    <p class="faq__section-keywords">Glossar: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
   </div>
 
   <div class="faq__section">
@@ -88,7 +88,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.
     </p>
-    <p class="faq__section-keywords">Keywords: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
+    <p class="faq__section-keywords">Glossar: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
   </div>
 
   <div class="faq__section">
@@ -98,7 +98,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>
       <li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
+    <p class="faq__section-keywords">Glossar: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
   </div>
 
   <div class="faq__section">
@@ -106,7 +106,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von Dachflächenfenstern und deren Laibungen sowie sichtbaren Dämmungen oder Isolierungen.
     </p>
-    <p class="faq__section-keywords">Keywords: Dachinnenraum, Spitzboden, Dämmung, Fotos</p>
+    <p class="faq__section-keywords">Glossar: Dachinnenraum, Spitzboden, Dämmung, Fotos</p>
   </div>
 
   <div class="faq__section">
@@ -116,7 +116,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).</li>  
       <li class="faq__section-list-item">Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Baujahr, Sanierung, Schätzung, Nachbarn</p>
+    <p class="faq__section-keywords">Glossar: Baujahr, Sanierung, Schätzung, Nachbarn</p>
   </div>
 
   <div class="faq__section">
@@ -124,7 +124,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Bei gut ausgebautem Dachgeschoss wird empfohlen, Dämmungen von außen im Rahmen einer Dachsanierung vorzunehmen. Eine vollständige Erneuerung von innen ist oft teuer und nicht nachhaltig.
     </p>
-    <p class="faq__section-keywords">Keywords: Dachgeschoss, Modernisierung, Dämmung, Sanierung</p>
+    <p class="faq__section-keywords">Glossar: Dachgeschoss, Modernisierung, Dämmung, Sanierung</p>
   </div>
 
 <div class="faq__section">
@@ -132,7 +132,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Wenn die Online-Zahlung aus irgendeinem Grund fehlschlägt (z. B. Fehlermeldung bei Sofortüberweisung oder technische Probleme), wird der Vorgang automatisch so behandelt, als hätten Sie auf Rechnung bestellt.
     </p>
-    <p class="faq__section-keywords">Keywords: Zahlung, Fehlermeldung, Online-Bestellung, Rechnung</p>
+    <p class="faq__section-keywords">Glossar: Zahlung, Fehlermeldung, Online-Bestellung, Rechnung</p>
   </div>
 
   <div class="faq__section">
@@ -143,7 +143,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item"><strong>Visa, Mastercard</strong></li>
       <li class="faq__section-list-item"><strong>Rechnungskauf</strong></li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Zahlungsmethoden, Rechnugskauf, Sofortüberweisung, PayPal, Kreditkarte, Visa, Mastercard, Rechnung</p>
+    <p class="faq__section-keywords">Glossar: Zahlungsmethoden, Rechnugskauf, Sofortüberweisung, PayPal, Kreditkarte, Visa, Mastercard, Rechnung</p>
   </div>
 
   <div class="faq__section">
@@ -151,7 +151,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Nach Abschluss der Bestellung erhalten Sie automatisch eine <span class="faq__section-highlight">Bestätigungs-E-Mail</span>. Diese enthält Details zu Ihrer Bestellung.
     </p>
-    <p class="faq__section-keywords">Keywords: Bestellung, Bestätigungs-E-Mail, Details</p>
+    <p class="faq__section-keywords">Glossar: Bestellung, Bestätigungs-E-Mail, Details</p>
   </div>
 
   <div class="faq__section">
@@ -163,7 +163,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Sie erhalten zunächst eine Bestätigungs-E-Mail.</li>
       <li class="faq__section-list-item">Bei Lieferung bekommen Sie die Rechnung sowie eine Zahlungsaufforderung mit allen notwendigen Zahlungsdetails.</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Rechnungskauf, Rechnung, Zahlungsaufforderung, Lieferung</p>
+    <p class="faq__section-keywords">Glossar: Rechnungskauf, Rechnung, Zahlungsaufforderung, Lieferung</p>
   </div>
 
   <div class="faq__section">
@@ -172,7 +172,7 @@ import Layout from "#layouts/Layout.astro";
     Sie können nach Erhalt der Bestätigungs-Email den Betrag über die enthaltenen Links bezahlen.
       Alternativ überweisen Sie den Betrag , sobald Sie die Rechnung zusammen mit dem Originalausweis erhalten haben. Die Überweisungsdetails finden Sie in der E-Mail oder in der Rechnung.
     </p>
-    <p class="faq__section-keywords">Keywords: Überweisung, Rechnungskauf, Rechnung, Zahlungsdetails</p>
+    <p class="faq__section-keywords">Glossar: Überweisung, Rechnungskauf, Rechnung, Zahlungsdetails</p>
   </div>
 
   <div class="faq__section">
@@ -180,7 +180,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Sollten Sie keine Bestätigungs-E-Mail erhalten, prüfen Sie bitte Ihren Spam-Ordner. Falls dort keine E-Mail zu finden ist, kontaktieren Sie unseren Kundenservice, um sicherzustellen, dass Ihre Bestellung korrekt verarbeitet wurde.
     </p>
-    <p class="faq__section-keywords">Keywords: Bestellung, Bestätigungs-E-Mail, Spam-Ordner, Kundenservice</p>
+    <p class="faq__section-keywords">Glossar: Bestellung, Bestätigungs-E-Mail, Spam-Ordner, Kundenservice</p>
   </div>
 
   <div class="faq__section">
@@ -189,7 +189,7 @@ import Layout from "#layouts/Layout.astro";
       Sollte es bei einer der online Zahlungsmethoden (Sofortüberweisung, PayPal, Visa, Mastercard) zu einem technischen Fehler kommen, wird die Bestellung trotdem ausgelöst.
       Diese wird dann als Rechnungskauf behandelt, und Sie können den Betrag nach Lieferung überweisen.
     </p>
-    <p class="faq__section-keywords">Keywords: Bestellung, Zahlung, Rechnungskauf, Zahlungsmethoden, Rechnung</p>
+    <p class="faq__section-keywords">Glossar: Bestellung, Zahlung, Rechnungskauf, Zahlungsmethoden, Rechnung</p>
   </div>
 
   <div class="faq__section">
@@ -198,7 +198,7 @@ import Layout from "#layouts/Layout.astro";
     Verbrauchsdaten dürfen laut <span class="faq__section-highlight">GEG 2024</span> nicht älter als <span class="faq__section-highlight">18 Monate</span> sein. Ältere Daten werden nicht akzeptiert und müssen aktualisiert werden.
   </p>
   <p class="faq__section-keywords">
-    Keywords: gesetzliche Vorgaben, Verbrauchszeiträume, Aktualisierung, Energieverbrauch, Ausweis-Erstellung
+    Glossar: gesetzliche Vorgaben, Verbrauchszeiträume, Aktualisierung, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
@@ -208,7 +208,7 @@ import Layout from "#layouts/Layout.astro";
     Fehlermeldungen treten auf, wenn <span class="faq__section-highlight">Pflichtfelder</span> nicht komplett ausgefüllt wurden. Solche Felder werden rot markiert und müssen ausgefüllt werden.
   </p>
   <p class="faq__section-keywords">
-    Keywords: Fehlermeldungen, Pflichtfelder, technische Probleme, Energieverbrauch, Ausweis-Erstellung
+    Glossar: Fehlermeldungen, Pflichtfelder, technische Probleme, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
@@ -218,7 +218,7 @@ import Layout from "#layouts/Layout.astro";
     Nach Abschluss der <span class="faq__section-keywords">Dateneingabe</span> und <span class="faq__section-keywords">Bezahlung</span> werden die Angaben manuell geprüft. Sind alle Daten schlüssig, wird der Energieverbrauchsausweis ausgestellt.
   </p>
   <p class="faq__section-keywords">
-    Keywords: Prüfung, Energieverbrauchsausweis, manuelle Kontrolle, Energieverbrauch, Ausweis-Erstellung
+    Glossar: Prüfung, Energieverbrauchsausweis, manuelle Kontrolle, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
@@ -228,7 +228,7 @@ import Layout from "#layouts/Layout.astro";
     Es kann entweder <span class="faq__section-highlight">online</span> (z. B. via PayPal, Kreditkarte, Sofort) oder nachträglich per <span class="faq__section-highlight">Rechnung</span> (Überweisung) bezahlt werden.
   </p>
   <p class="faq__section-keywords">
-    Keywords: Bezahlung, Zahlungsmethoden, PayPal, Kreditkarte, Sofort, Rechnung, Energieverbrauch, Ausweis-Erstellung
+    Glossar: Bezahlung, Zahlungsmethoden, PayPal, Kreditkarte, Sofort, Rechnung, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
@@ -238,7 +238,7 @@ import Layout from "#layouts/Layout.astro";
     Der Energieverbrauchsausweis wird nach erfolgreicher Prüfung an die angegebene <span class="faq__section-email">E-Mail-Adresse</span> versendet. Auf Wunsch erfolgt gegen eine Gebühr zusätzlich der Postversand.
   </p>
   <p class="faq__section-keywords">
-    Keywords: Lieferung, E-Mail-Adresse, Versand, Postversand, Energieverbrauch, Ausweis-Erstellung
+    Glossar: Lieferung, E-Mail-Adresse, Versand, Postversand, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
@@ -249,7 +249,7 @@ import Layout from "#layouts/Layout.astro";
     Rot markierte Felder weisen auf fehlende Angaben hin. Wenn alle rot markierten Felder ausgefüllt sind kommen Sie nach klick auf "weiter" zu Schritt 2. (Kundendaten).
   </p>
   <p class="faq__section-keywords">
-    Keywords: komme nicht weiter, Fehlermeldung, Pflichtfelder, Energieverbrauch, Ausweis-Erstellung
+    Glossar: komme nicht weiter, Fehlermeldung, Pflichtfelder, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
@@ -263,7 +263,7 @@ import Layout from "#layouts/Layout.astro";
     <li class="faq__section-list-item">E-Mail: <span class="faq__section-email">info@online-energieausweis.org</span></li>
   </ul>
   <p class="faq__section-keywords">
-    Keywords: Kundenservice, Kontakt, Hilfe, E-Mail, Telefon, Energieverbrauch, Ausweis-Erstellung
+    Glossar: Kundenservice, Kontakt, Hilfe, E-Mail, Telefon, Energieverbrauch, Ausweis-Erstellung
   </p>
 </div>
 
@@ -274,7 +274,7 @@ import Layout from "#layouts/Layout.astro";
       <span class="faq__section-highlight">Energieeinsparverordnung (EnEV)</span>, das <span class="faq__section-highlight">EEWärmeG</span> und das
       <span class="faq__section-highlight">EnEG</span> in einem einheitlichen Gesetz. Ziel ist es, den Klimaschutz zu fördern und die Energieeffizienz von Gebäuden zu steigern.
     </p>
-    <p class="faq__section-keywords">Keywords: GEG, Gebäudeenergiegesetz, Energieeffizienz, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: GEG, Gebäudeenergiegesetz, Energieeffizienz, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Betroffene, Neubauten, Bestandsgebäude, GEG 2024, aktuelles GEG">
@@ -282,7 +282,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Das GEG gilt für Neubauten, Bestandsgebäude, gemischt genutzte Gebäude sowie Wohn- und Nichtwohngebäude. Es betrifft sowohl Bauherren als auch Eigentümer, die wesentliche Umbauten planen oder ihre Heizungsanlagen erneuern müssen.
     </p>
-    <p class="faq__section-keywords">Keywords: Betroffene, Neubauten, Bestandsgebäude, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Betroffene, Neubauten, Bestandsgebäude, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Heizungen, 65%-Regel, Erneuerbare Energien, GEG 2024, aktuelles GEG">
@@ -296,7 +296,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Solarthermieanlagen</li>
       <li class="faq__section-list-item">Hybridheizungen</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Heizungen, 65%-Regel, Erneuerbare Energien, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Heizungen, 65%-Regel, Erneuerbare Energien, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Heizkessel, Austauschpflicht, Ausnahmen, GEG 2024, aktuelles GEG">
@@ -308,7 +308,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Selbstbewohnte Gebäude von Eigentümern, die vor 2002 eingezogen sind</li>
       <li class="faq__section-list-item">Technisch unzumutbare Fälle</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Heizkessel, Austauschpflicht, Ausnahmen, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Heizkessel, Austauschpflicht, Ausnahmen, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Neubauten, Effizienzhaus, EH55, GEG 2024, aktuelles GEG">
@@ -321,7 +321,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Verpflichtung zum Einsatz erneuerbarer Energien</li>
       <li class="faq__section-list-item">Verbesserte Dämmung</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Neubauten, Effizienzhaus, EH55, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Neubauten, Effizienzhaus, EH55, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Bestandsgebäude, Dämmung, Heizsysteme, GEG 2024, aktuelles GEG">
@@ -329,7 +329,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Bestandsgebäude unterliegen neuen Vorgaben wie der Dämmung ungedämmter Dachböden oder oberster Geschossdecken, dem hydraulischen Abgleich von Heizsystemen und Modernisierungspflichten bei größeren Umbauten.
     </p>
-    <p class="faq__section-keywords">Keywords: Bestandsgebäude, Dämmung, Heizsysteme, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Bestandsgebäude, Dämmung, Heizsysteme, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Energieausweise, CO₂-Emissionen, Gültigkeit, GEG 2024, aktuelles GEG">
@@ -337,7 +337,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Energieausweise müssen detailliertere Informationen enthalten, wie CO₂-Emissionen und Sanierungsempfehlungen. Sie bleiben weiterhin <span class="faq__section-highlight">10 Jahre</span> gültig und müssen bei Verkauf oder Vermietung vorgelegt werden.
     </p>
-    <p class="faq__section-keywords">Keywords: Energieausweise, CO₂-Emissionen, Gültigkeit, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Energieausweise, CO₂-Emissionen, Gültigkeit, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Bußgelder, Verstöße, Energieeffizienz, GEG 2024, aktuelles GEG">
@@ -350,7 +350,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Fehlende Dämmungen</li>
       <li class="faq__section-list-item">Falsche Angaben im Energieausweis</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Bußgelder, Verstöße, Energieeffizienz, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Bußgelder, Verstöße, Energieeffizienz, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Förderungen, KfW, BAFA, GEG 2024, aktuelles GEG">
@@ -358,7 +358,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="faq__section-content">
       Förderprogramme der <span class="faq__section-highlight">KfW</span> und des <span class="faq__section-highlight">BAFA</span> unterstützen Maßnahmen wie den Austausch alter Heizungen, Dämmungen und die Nutzung erneuerbarer Energien. Förderungen stehen für Sanierungen und Neubauten zur Verfügung.
     </p>
-    <p class="faq__section-keywords">Keywords: Förderungen, KfW, BAFA, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Förderungen, KfW, BAFA, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="Ausnahmen, Denkmalschutz, kleine Gebäude, GEG 2024, aktuelles GEG">
@@ -371,7 +371,7 @@ import Layout from "#layouts/Layout.astro";
       <li class="faq__section-list-item">Kleine Gebäude mit weniger als 50 m² Nutzfläche</li>
       <li class="faq__section-list-item">Selbstbewohnte Gebäude, die vor 2002 bezogen wurden</li>
     </ul>
-    <p class="faq__section-keywords">Keywords: Ausnahmen, Denkmalschutz, kleine Gebäude, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: Ausnahmen, Denkmalschutz, kleine Gebäude, GEG 2024, aktuelles GEG</p>
   </div>
 
   <div class="faq__section" data-keywords="GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG">
@@ -380,7 +380,7 @@ import Layout from "#layouts/Layout.astro";
       Der vollständige Text ist verfügbar auf der Seite:
       <a href="https://www.gesetze-im-internet.de/geg/GEG.pdf" class="faq__section-email">gesetze-im-internet.de</a>.
     </p>
-    <p class="faq__section-keywords">Keywords: GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG</p>
+    <p class="faq__section-keywords">Glossar: GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG</p>
   </div>
 
 </div>
diff --git a/src/pages/glossar/index.astro b/src/pages/glossar/index.astro
index f96810db..96305e0b 100644
--- a/src/pages/glossar/index.astro
+++ b/src/pages/glossar/index.astro
@@ -14,9 +14,9 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">A</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Altbau:</span> Älteres Gebäude, oft vor 1945 gebaut, das besondere bauliche und energetische Eigenschaften aufweist.<br>
-      <span class="glossar__section-highlight">Anbau:</span> Ein später hinzugefügter Teil eines Gebäudes, der oft andere Baujahre oder energetische Standards hat.<br>
-      <span class="glossar__section-highlight">Ausnahmen:</span> Besondere Regelungen, die bestimmte Gebäude oder Eigentümer von gesetzlichen Anforderungen befreien.<br>
+      <span class="glossar__section-highlight">Altbau:</span> Älteres Gebäude, oft vor 1945 gebaut.<br>
+      <span class="glossar__section-highlight">Anbau:</span> Erweiterung eines Gebäudes, häufig mit unterschiedlichem Baujahr oder energetischen Anforderungen.<br>
+      <span class="glossar__section-highlight">Ausnahmen:</span> Regelungen, die bestimmte Gebäude oder Eigentümer von gesetzlichen Anforderungen befreien.<br>
       <span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchs- oder Bedarfsdaten.
     </p>
   </div>
@@ -24,9 +24,10 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">B</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Baujahr:</span> Das Jahr, in dem ein Gebäude oder Gebäudeteil errichtet wurde. Relevant für energetische Bewertungen.<br>
-      <span class="glossar__section-highlight">Bestandsgebäude:</span> Bereits existierende Gebäude, die im Unterschied zu Neubauten besonderen Regelungen unterliegen.<br>
-      <span class="glossar__section-highlight">Bußgelder:</span> Finanzielle Strafen für Verstöße gegen gesetzliche Vorgaben, z. B. im Bereich der Energieeffizienz.
+      <span class="glossar__section-highlight">Baujahr:</span> Jahr der Errichtung eines Gebäudes oder Gebäudeteils.<br>
+      <span class="glossar__section-highlight">Berechnung:</span> Manuelle oder automatische Ermittlung des Energieverbrauchs oder Energiebedarfs.<br>
+      <span class="glossar__section-highlight">Bestandsgebäude:</span> Bereits existierende Gebäude, die vor Einführung aktueller energetischer Standards gebaut wurden.<br>
+      <span class="glossar__section-highlight">Bußgelder:</span> Finanzielle Strafen für Verstöße gegen gesetzliche Anforderungen, wie falsche Energieausweise oder fehlende Dämmungen.
     </p>
   </div>
 
@@ -34,32 +35,36 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="glossar__section-title">D</h2>
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Dachgeschoss:</span> Oberste Etage eines Gebäudes, häufig mit Dachschrägen.<br>
-      <span class="glossar__section-highlight">Dachinnenraum:</span> Bereich unter dem Dach, der oft Dämmung und bauliche Besonderheiten aufweist.<br>
-      <span class="glossar__section-highlight">Dämmung:</span> Maßnahmen zur Verbesserung der Wärmeisolierung von Gebäuden.
+      <span class="glossar__section-highlight">Dachinnenraum:</span> Bereich unter dem Dach, oft mit Dämmungen, Dachflächenfenstern und Laibungen.<br>
+      <span class="glossar__section-highlight">Dachschrägen:</span> Schräg verlaufende Flächen im Dachgeschoss, die bei der Wohnflächenberechnung berücksichtigt werden.<br>
+      <span class="glossar__section-highlight">Dämmung:</span> Maßnahmen zur Verbesserung der Wärmeisolierung eines Gebäudes.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">E</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">E-Mail:</span> Elektronische Kontaktmethode für die Übermittlung von Unterlagen oder für Kundenanfragen.<br>
-      <span class="glossar__section-highlight">Energieausweis:</span> Dokument, das den energetischen Zustand eines Gebäudes bewertet, basierend auf Verbrauchs- oder Bedarfsdaten.<br>
-      <span class="glossar__section-highlight">Energieverbrauch:</span> Gemessener oder geschätzter Energiebedarf eines Gebäudes zur Beheizung und Warmwasserbereitung.<br>
-      <span class="glossar__section-highlight">Energieverbrauchsausweis:</span> Eine Form des Energieausweises, die auf den tatsächlichen Verbrauchsdaten basiert.
+      <span class="glossar__section-highlight">E-Mail:</span> Elektronische Kommunikationsmethode zur Übermittlung von Daten oder Plänen.<br>
+      <span class="glossar__section-highlight">Energieausweis:</span> Dokument, das den energetischen Zustand eines Gebäudes beschreibt.<br>
+      <span class="glossar__section-highlight">Energieverbrauch:</span> Der gemessene oder geschätzte Energiebedarf eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Energetische Nutzfläche:</span> Beheizte Fläche eines Gebäudes, die nicht direkt zur Wohnfläche zählt.<br>
+      <span class="glossar__section-highlight">Endenergieverbrauch:</span> Der tatsächlich verbrauchte Energieanteil, der für die Beheizung oder Warmwasserbereitung genutzt wird.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">F</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung durch staatliche Programme (z. B. KfW, BAFA) für energetische Sanierungen oder Neubauten.
+      <span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung für energetische Sanierungen oder Neubauten, häufig durch KfW oder BAFA.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">G</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">GEG (Gebäudeenergiegesetz):</span> Gesetzliche Grundlage in Deutschland zur Regelung der energetischen Anforderungen an Gebäude.
+      <span class="glossar__section-highlight">GEG:</span> Gebäudeenergiegesetz, regelt die energetischen Anforderungen an Gebäude.<br>
+      <span class="glossar__section-highlight">Gebäudekonstruktion:</span> Die bauliche Struktur eines Gebäudes, z. B. Bauweise und Geometrie.<br>
+      <span class="glossar__section-highlight">Grundrisspläne:</span> Pläne, die die räumliche Anordnung eines Gebäudes zeigen.
     </p>
   </div>
 
@@ -67,85 +72,70 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="glossar__section-title">H</h2>
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Heizkessel:</span> Gerät zur Erzeugung von Heizwärme, das bestimmten energetischen Standards entsprechen muss.<br>
-      <span class="glossar__section-highlight">Heizsysteme:</span> Systeme, die Wärme in einem Gebäude bereitstellen, z. B. Zentralheizungen, Wärmepumpen.
+      <span class="glossar__section-highlight">Heizsysteme:</span> Systeme, die Wärme in einem Gebäude bereitstellen, z. B. Wärmepumpen oder Solarthermieanlagen.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">K</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Kundenservice:</span> Ansprechpartner für Probleme oder Fragen zur Ausweis-Erstellung und anderen Themen.<br>
-      <span class="glossar__section-highlight">Kontaktzeiten:</span> Zeitfenster, in denen der Kundenservice erreichbar ist.
+      <span class="glossar__section-highlight">Kundenservice:</span> Ansprechpartner für Fragen und Probleme rund um die Energieausweis-Erstellung.<br>
+      <span class="glossar__section-highlight">Kontaktzeiten:</span> Zeitfenster, in denen der Kundenservice erreichbar ist.<br>
+      <span class="glossar__section-highlight">Korrigierte Rechnung:</span> Eine überarbeitete Rechnung, die nach manueller Bearbeitung erstellt wird.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">M</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Manuelle Bearbeitung:</span> Bearbeitung eines Energieausweises außerhalb der Standard-Software, oft aufgrund spezieller Gebäudekonstruktionen.<br>
-      <span class="glossar__section-highlight">Modernisierung:</span> Maßnahmen zur energetischen Verbesserung eines Gebäudes, z. B. Dämmung oder Heizungsaustausch.
-    </p>
-  </div>
-
-  <div class="glossar__section">
-    <h2 class="glossar__section-title">N</h2>
-    <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Neubauten:</span> Gebäude, die nach den neuesten energetischen Standards errichtet werden.<br>
-      <span class="glossar__section-highlight">Nachbarn:</span> Potenzielle Informationsquelle für geschätzte Baujahre oder andere Daten.
+      <span class="glossar__section-highlight">Manuelle Bearbeitung:</span> Anpassung der Gebäudedaten, wenn diese nicht in die Standard-Software passen.<br>
+      <span class="glossar__section-highlight">Modernisierung:</span> Maßnahmen zur Verbesserung der Energieeffizienz eines Gebäudes.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">P</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Pflichtfelder:</span> Eingabefelder in einem Formular, die zwingend ausgefüllt werden müssen, um den Prozess abzuschließen.<br>
-      <span class="glossar__section-highlight">Pläne:</span> Baupläne oder Grundrisse, die für die Erstellung eines Energieausweises benötigt werden.
+      <span class="glossar__section-highlight">Pflichtfelder:</span> Formularfelder, die zwingend ausgefüllt werden müssen, um den Vorgang abzuschließen.<br>
+      <span class="glossar__section-highlight">Pläne:</span> Bauzeichnungen, die für die Erstellung eines Energieausweises erforderlich sind.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">R</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Rechnung:</span> Finanzielle Abrechnung für die Ausweis-Erstellung, inklusive eventueller Zusatzkosten.<br>
+      <span class="glossar__section-highlight">Rechnung:</span> Finanzielle Abrechnung für die Erstellung eines Energieausweises.<br>
       <span class="glossar__section-highlight">Rechnungskauf:</span> Zahlungsart, bei der die Bezahlung erst nach Erhalt der Rechnung erfolgt.<br>
-      <span class="glossar__section-highlight">Rückruf:</span> Telefonischer Kontakt durch den Anbieter, um fehlende Informationen oder Unterlagen zu klären.
+      <span class="glossar__section-highlight">Rückruf:</span> Telefonischer Kontakt durch den Anbieter zur Klärung offener Fragen.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">S</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Sanierung:</span> Bauliche Maßnahmen zur Verbesserung des baulichen oder energetischen Zustands eines Gebäudes.<br>
-      <span class="glossar__section-highlight">Spam-Ordner:</span> Ordner in einem E-Mail-Postfach, in den automatisch gefilterte Nachrichten verschoben werden können.
+      <span class="glossar__section-highlight">Sanierung:</span> Umfassende bauliche Maßnahmen zur Verbesserung der Energieeffizienz eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Spam-Ordner:</span> Ordner in einem E-Mail-Postfach, in dem automatisch gefilterte Nachrichten abgelegt werden.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">T</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Treppenhaus:</span> Teil eines Gebäudes, der nicht zur Wohnfläche, aber eventuell zur energetischen Nutzfläche zählt.
-    </p>
-  </div>
-
-  <div class="glossar__section">
-    <h2 class="glossar__section-title">U</h2>
-    <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Unterlagen:</span> Dokumente wie Baupläne, die für die Erstellung eines Energieausweises erforderlich sind.
+      <span class="glossar__section-highlight">Treppenhaus:</span> Bereich eines Gebäudes, der nicht zur Wohnfläche zählt, aber eventuell zur energetischen Nutzfläche gehört.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">W</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Wohnfläche:</span> Fläche eines Gebäudes, die für Wohnzwecke genutzt wird. Beheizte Wohnfläche ist für die energetische Bewertung relevant.
+      <span class="glossar__section-highlight">Wohnfläche:</span> Fläche eines Gebäudes, die für Wohnzwecke genutzt wird.<br>
+      <span class="glossar__section-highlight">Weiterklicken:</span> Navigation zum nächsten Schritt in einem Formular, die nur funktioniert, wenn alle Pflichtfelder ausgefüllt sind.
     </p>
   </div>
 </div>
 
 </div>
 
-</div>
-
 <style lang="scss">
 @tailwind base;
 @tailwind components;

From 3f6a6f4b5dfb799a66724d3747a720de813281fd Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 14:07:43 +0100
Subject: [PATCH 050/165] Korrekturen Glossar

---
 src/pages/glossar/index.astro | 39 +++++++++++++++++------------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/pages/glossar/index.astro b/src/pages/glossar/index.astro
index 96305e0b..d115f217 100644
--- a/src/pages/glossar/index.astro
+++ b/src/pages/glossar/index.astro
@@ -14,10 +14,10 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">A</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Altbau:</span> Älteres Gebäude, oft vor 1945 gebaut.<br>
-      <span class="glossar__section-highlight">Anbau:</span> Erweiterung eines Gebäudes, häufig mit unterschiedlichem Baujahr oder energetischen Anforderungen.<br>
+      <span class="glossar__section-highlight">Altbau:</span> Älteres Gebäude vor 1978 gebaut.<br>
+      <span class="glossar__section-highlight">Anbau:</span> Erweiterung eines Gebäudes, häufig mit unterschiedlichem Baujahr und energetischen Eigenschaften.<br>
       <span class="glossar__section-highlight">Ausnahmen:</span> Regelungen, die bestimmte Gebäude oder Eigentümer von gesetzlichen Anforderungen befreien.<br>
-      <span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchs- oder Bedarfsdaten.
+      <span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchswerten oder bedarfsorientiert gem. DIN 18599 anhand standardisierter Randbedingungen.
     </p>
   </div>
 
@@ -26,7 +26,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Baujahr:</span> Jahr der Errichtung eines Gebäudes oder Gebäudeteils.<br>
       <span class="glossar__section-highlight">Berechnung:</span> Manuelle oder automatische Ermittlung des Energieverbrauchs oder Energiebedarfs.<br>
-      <span class="glossar__section-highlight">Bestandsgebäude:</span> Bereits existierende Gebäude, die vor Einführung aktueller energetischer Standards gebaut wurden.<br>
+      <span class="glossar__section-highlight">Bestandsgebäude:</span> Bereits existierendes Gebäude, bei dem bei energetischen Sanierungsmaßnahmen andere Anforderungen (sanierter Altbau) gelten als bei Neubauten.<br>
       <span class="glossar__section-highlight">Bußgelder:</span> Finanzielle Strafen für Verstöße gegen gesetzliche Anforderungen, wie falsche Energieausweise oder fehlende Dämmungen.
     </p>
   </div>
@@ -34,28 +34,28 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">D</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Dachgeschoss:</span> Oberste Etage eines Gebäudes, häufig mit Dachschrägen.<br>
-      <span class="glossar__section-highlight">Dachinnenraum:</span> Bereich unter dem Dach, oft mit Dämmungen, Dachflächenfenstern und Laibungen.<br>
-      <span class="glossar__section-highlight">Dachschrägen:</span> Schräg verlaufende Flächen im Dachgeschoss, die bei der Wohnflächenberechnung berücksichtigt werden.<br>
-      <span class="glossar__section-highlight">Dämmung:</span> Maßnahmen zur Verbesserung der Wärmeisolierung eines Gebäudes.
+      <span class="glossar__section-highlight">Dachgeschoss:</span> Oberste Etage eines Gebäudes mit Dachschrägen oder als Staffelgeschoß.<br>
+      <span class="glossar__section-highlight">Dachinnenraum:</span> Unausgebauter und unbeheizter Bereich unter dem Dach z.B. Spitzboden oder Ausbaureserve.<br>
+      <span class="glossar__section-highlight">Dachschrägen:</span> Schräg verlaufende Flächen im ausgebauten Dachgeschoss. Die Flävhen unter den Schrägen können nur zur Hälfte bei der Wohnflächenberechnung angesetzt werden.<br>
+      <span class="glossar__section-highlight">Dämmung:</span> Wärmeisolierung eines Gebäudes.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">E</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">E-Mail:</span> Elektronische Kommunikationsmethode zur Übermittlung von Daten oder Plänen.<br>
-      <span class="glossar__section-highlight">Energieausweis:</span> Dokument, das den energetischen Zustand eines Gebäudes beschreibt.<br>
-      <span class="glossar__section-highlight">Energieverbrauch:</span> Der gemessene oder geschätzte Energiebedarf eines Gebäudes.<br>
-      <span class="glossar__section-highlight">Energetische Nutzfläche:</span> Beheizte Fläche eines Gebäudes, die nicht direkt zur Wohnfläche zählt.<br>
-      <span class="glossar__section-highlight">Endenergieverbrauch:</span> Der tatsächlich verbrauchte Energieanteil, der für die Beheizung oder Warmwasserbereitung genutzt wird.
+      <span class="glossar__section-highlight">E-Mail:</span> Elektronische Kommunikationsmethode zur alternativen Übermittlung von Daten oder Plänen.<br>
+      <span class="glossar__section-highlight">Energieausweis:</span> Dokument, das den energetischen Zustand eines Gebäudes beschreibt und anhand des Endenergiebedarfs oder Endenergieverbrauchs Gebäude vergleichbar machen soll.<br>
+      <span class="glossar__section-highlight">Energieverbrauch:</span> Der gemessene Verbrauch für Heizung und Warmwasser eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Energetische Nutzfläche:</span> Beheizte Fläche eines Gebäudes (Wohnfläche + beheizte Flächen die nicht zur Wohnfläche gehören).<br>
+      <span class="glossar__section-highlight">Endenergieverbrauch:</span>Klimabereinigter Mittelwert von 3 Verbrauchsjahren für Beheizung, Warmwasserbereitung und Kühlung (wenn vorhanden) pro m² und Jahr.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">F</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung für energetische Sanierungen oder Neubauten, häufig durch KfW oder BAFA.
+      <span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung für energetische Sanierungen oder Neubauten, häufig durch KfW oder BAFA. Z.B. Sanierungsfahrplan (ISFP) oder Bundesförderung für effiziente Gebäude.
     </p>
   </div>
 
@@ -64,7 +64,7 @@ import Layout from "#layouts/Layout.astro";
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">GEG:</span> Gebäudeenergiegesetz, regelt die energetischen Anforderungen an Gebäude.<br>
       <span class="glossar__section-highlight">Gebäudekonstruktion:</span> Die bauliche Struktur eines Gebäudes, z. B. Bauweise und Geometrie.<br>
-      <span class="glossar__section-highlight">Grundrisspläne:</span> Pläne, die die räumliche Anordnung eines Gebäudes zeigen.
+      <span class="glossar__section-highlight">Grundrisspläne:</span> Architektenzeichnungen die Wände, Räume, Fenster etc als Draufsicht zeigen.
     </p>
   </div>
 
@@ -81,7 +81,6 @@ import Layout from "#layouts/Layout.astro";
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Kundenservice:</span> Ansprechpartner für Fragen und Probleme rund um die Energieausweis-Erstellung.<br>
       <span class="glossar__section-highlight">Kontaktzeiten:</span> Zeitfenster, in denen der Kundenservice erreichbar ist.<br>
-      <span class="glossar__section-highlight">Korrigierte Rechnung:</span> Eine überarbeitete Rechnung, die nach manueller Bearbeitung erstellt wird.
     </p>
   </div>
 
@@ -96,7 +95,7 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">P</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Pflichtfelder:</span> Formularfelder, die zwingend ausgefüllt werden müssen, um den Vorgang abzuschließen.<br>
+      <span class="glossar__section-highlight">Pflichtfelder:</span> Formularfelder, die zwingend ausgefüllt werden müssen, um den Vorgang abzuschließen. Gebäudebilder sind ebenfalls obligatorisch, können aber noch nach der Bestellung hochgeladen werden.<br>
       <span class="glossar__section-highlight">Pläne:</span> Bauzeichnungen, die für die Erstellung eines Energieausweises erforderlich sind.
     </p>
   </div>
@@ -104,7 +103,7 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">R</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Rechnung:</span> Finanzielle Abrechnung für die Erstellung eines Energieausweises.<br>
+      <span class="glossar__section-highlight">Rechnung:</span> Finanzielle Abrechnung für die Erstellung eines Energieausweises. Wir zusammen mit dem Originalasweis verschickt.<br>
       <span class="glossar__section-highlight">Rechnungskauf:</span> Zahlungsart, bei der die Bezahlung erst nach Erhalt der Rechnung erfolgt.<br>
       <span class="glossar__section-highlight">Rückruf:</span> Telefonischer Kontakt durch den Anbieter zur Klärung offener Fragen.
     </p>
@@ -114,7 +113,7 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="glossar__section-title">S</h2>
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Sanierung:</span> Umfassende bauliche Maßnahmen zur Verbesserung der Energieeffizienz eines Gebäudes.<br>
-      <span class="glossar__section-highlight">Spam-Ordner:</span> Ordner in einem E-Mail-Postfach, in dem automatisch gefilterte Nachrichten abgelegt werden.
+      <span class="glossar__section-highlight">Spam-Ordner:</span> Ordner in einem E-Mail-Postfach, in dem automatisch gefilterte vermeintlich ungewollte Nachrichten abgelegt werden.
     </p>
   </div>
 
@@ -129,7 +128,7 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="glossar__section-title">W</h2>
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Wohnfläche:</span> Fläche eines Gebäudes, die für Wohnzwecke genutzt wird.<br>
-      <span class="glossar__section-highlight">Weiterklicken:</span> Navigation zum nächsten Schritt in einem Formular, die nur funktioniert, wenn alle Pflichtfelder ausgefüllt sind.
+      <span class="glossar__section-highlight">Weiterklicken:</span> Navigation zum nächsten Schritt im Formular, die nur funktioniert, wenn alle Pflichtfelder ausgefüllt sind.
     </p>
   </div>
 </div>

From 8f8d107acbec976d1b775c5689b5ab351966dfab Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 16:01:51 +0100
Subject: [PATCH 051/165] Glossar erweitert

---
 src/pages/glossar/index.astro | 57 +++++++++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/pages/glossar/index.astro b/src/pages/glossar/index.astro
index d115f217..6a928f0b 100644
--- a/src/pages/glossar/index.astro
+++ b/src/pages/glossar/index.astro
@@ -18,6 +18,8 @@ import Layout from "#layouts/Layout.astro";
       <span class="glossar__section-highlight">Anbau:</span> Erweiterung eines Gebäudes, häufig mit unterschiedlichem Baujahr und energetischen Eigenschaften.<br>
       <span class="glossar__section-highlight">Ausnahmen:</span> Regelungen, die bestimmte Gebäude oder Eigentümer von gesetzlichen Anforderungen befreien.<br>
       <span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchswerten oder bedarfsorientiert gem. DIN 18599 anhand standardisierter Randbedingungen.
+      <span class="glossar__section-highlight">Aktualisierung von Verbrauchsdaten:</span> Verbrauchsdaten dürfen laut GEG nicht älter als 18 Monate sein.<br>
+      <span class="glossar__section-highlight">Austauschpflicht für alte Heizkessel:</span> Heizungen, die älter als 30 Jahre sind und nicht der Brennwert- oder Niedertemperaturtechnik entsprechen, müssen ausgetauscht werden.
     </p>
   </div>
 
@@ -27,6 +29,8 @@ import Layout from "#layouts/Layout.astro";
       <span class="glossar__section-highlight">Baujahr:</span> Jahr der Errichtung eines Gebäudes oder Gebäudeteils.<br>
       <span class="glossar__section-highlight">Berechnung:</span> Manuelle oder automatische Ermittlung des Energieverbrauchs oder Energiebedarfs.<br>
       <span class="glossar__section-highlight">Bestandsgebäude:</span> Bereits existierendes Gebäude, bei dem bei energetischen Sanierungsmaßnahmen andere Anforderungen (sanierter Altbau) gelten als bei Neubauten.<br>
+      <span class="glossar__section-highlight">Blower-Door-Test:</span> Verfahren zur Überprüfung der Luftdichtheit eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Brennwertkessel:</span> Heizsystem, das die Wärme aus Abgasen effizienter nutzt.<br>
       <span class="glossar__section-highlight">Bußgelder:</span> Finanzielle Strafen für Verstöße gegen gesetzliche Anforderungen, wie falsche Energieausweise oder fehlende Dämmungen.
     </p>
   </div>
@@ -37,16 +41,23 @@ import Layout from "#layouts/Layout.astro";
       <span class="glossar__section-highlight">Dachgeschoss:</span> Oberste Etage eines Gebäudes mit Dachschrägen oder als Staffelgeschoß.<br>
       <span class="glossar__section-highlight">Dachinnenraum:</span> Unausgebauter und unbeheizter Bereich unter dem Dach z.B. Spitzboden oder Ausbaureserve.<br>
       <span class="glossar__section-highlight">Dachschrägen:</span> Schräg verlaufende Flächen im ausgebauten Dachgeschoss. Die Flävhen unter den Schrägen können nur zur Hälfte bei der Wohnflächenberechnung angesetzt werden.<br>
-      <span class="glossar__section-highlight">Dämmung:</span> Wärmeisolierung eines Gebäudes.
+      <span class="glossar__section-highlight">Dämmung:</span> Wärmeisolierung eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Dämmstoffe:</span> Materialien zur Reduzierung von Wärmeverlusten, z. B. Mineralwolle, EPS oder Holzfaserplatten.<br>
+      <span class="glossar__section-highlight">Dämmungspflichten:</span> Verpflichtung zur Dämmung bestimmter Gebäudeteile, z. B. Dachböden oder oberste Geschossdecken.<br>
+      <span class="glossar__section-highlight">Denkmalschutz-Ausnahmen:</span> Gebäude unter Denkmalschutz können von bestimmten GEG-Vorgaben ausgenommen sein.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">E</h2>
     <p class="glossar__section-content">
+       <span class="glossar__section-highlight">Effizienzhaus 55 (EH55):</span> Neubauten müssen ab 2024 diesen Standard erfüllen.<br>
       <span class="glossar__section-highlight">E-Mail:</span> Elektronische Kommunikationsmethode zur alternativen Übermittlung von Daten oder Plänen.<br>
       <span class="glossar__section-highlight">Energieausweis:</span> Dokument, das den energetischen Zustand eines Gebäudes beschreibt und anhand des Endenergiebedarfs oder Endenergieverbrauchs Gebäude vergleichbar machen soll.<br>
+      <span class="glossar__section-highlight">Endenergiebedarf:</span> Fiktonaler Energiebedarf ermittelt anhand standardisierter Randbedinghungen pro m² und Jahr.<br>
       <span class="glossar__section-highlight">Energieverbrauch:</span> Der gemessene Verbrauch für Heizung und Warmwasser eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Energiebedarf:</span> Theoretischer Energiebedarf eines Gebäudes, berechnet unter standardisierten Bedingungen.<br>
+      <span class="glossar__section-highlight">Energieeffizienzklasse:</span> Einstufung des Gebäudes in Effizienzklassen, z. B. A+ bis H.<br>
       <span class="glossar__section-highlight">Energetische Nutzfläche:</span> Beheizte Fläche eines Gebäudes (Wohnfläche + beheizte Flächen die nicht zur Wohnfläche gehören).<br>
       <span class="glossar__section-highlight">Endenergieverbrauch:</span>Klimabereinigter Mittelwert von 3 Verbrauchsjahren für Beheizung, Warmwasserbereitung und Kühlung (wenn vorhanden) pro m² und Jahr.
     </p>
@@ -55,7 +66,10 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">F</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung für energetische Sanierungen oder Neubauten, häufig durch KfW oder BAFA. Z.B. Sanierungsfahrplan (ISFP) oder Bundesförderung für effiziente Gebäude.
+      <span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung für energetische Sanierungen oder Neubauten, häufig durch KfW oder BAFA. Z.B. Sanierungsfahrplan (ISFP) oder Bundesförderung für effiziente Gebäude.<br>
+      <span class="glossar__section-highlight">Fördermittel:</span> Zuschüsse oder günstige Kredite für energetische Maßnahmen.<br>
+      <span class="glossar__section-highlight">Falsche Angaben:</span> Fehlerhafte oder irreführende Angaben im Energieausweis, die zu Bußgeldern führen können.
+
     </p>
   </div>
 
@@ -63,6 +77,8 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="glossar__section-title">G</h2>
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">GEG:</span> Gebäudeenergiegesetz, regelt die energetischen Anforderungen an Gebäude.<br>
+      <span class="glossar__section-highlight">Gültigkeitsdauer:</span> Ein Energieausweis ist 10 Jahre gültig.<br>
+      <span class="glossar__section-highlight">Gebäudeteile:</span> Unterteilung von Wohn- und Gewerbeteil für Mischgebäude. Zwei Energieausweise müssen erstellt werden.<br>
       <span class="glossar__section-highlight">Gebäudekonstruktion:</span> Die bauliche Struktur eines Gebäudes, z. B. Bauweise und Geometrie.<br>
       <span class="glossar__section-highlight">Grundrisspläne:</span> Architektenzeichnungen die Wände, Räume, Fenster etc als Draufsicht zeigen.
     </p>
@@ -71,6 +87,8 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">H</h2>
     <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Hydraulischer Abgleich:</span> Optimierung der Heizungsanlage zur gleichmäßigen Wärmeverteilung im Gebäude.<br>
+      <span class="glossar__section-highlight">Heizkosten:</span> Kosten, die durch den Energieverbrauch für Heizung und Warmwasser entstehen.<br>
       <span class="glossar__section-highlight">Heizkessel:</span> Gerät zur Erzeugung von Heizwärme, das bestimmten energetischen Standards entsprechen muss.<br>
       <span class="glossar__section-highlight">Heizsysteme:</span> Systeme, die Wärme in einem Gebäude bereitstellen, z. B. Wärmepumpen oder Solarthermieanlagen.
     </p>
@@ -79,8 +97,17 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">K</h2>
     <p class="glossar__section-content">
+      <span class="glossar__section-highlight">KfW-Förderung:</span> Unterstützung für energieeffiziente Neubauten oder Sanierungen.<br>
+      <span class="glossar__section-highlight">Kleine Gebäude unter 50 m²:</span> Gebäude mit weniger als 50 m² Nutzfläche fallen oft nicht unter die GEG-Vorgaben.<br>
       <span class="glossar__section-highlight">Kundenservice:</span> Ansprechpartner für Fragen und Probleme rund um die Energieausweis-Erstellung.<br>
-      <span class="glossar__section-highlight">Kontaktzeiten:</span> Zeitfenster, in denen der Kundenservice erreichbar ist.<br>
+      <span class="glossar__section-highlight">Kontaktzeiten:</span> Zeitfenster (Mo - Fr von 9 bis 12 Uhr), in denen der Kundenservice erreichbar ist.<br>
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">L</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Luftdichtheit:</span> Maß für die Abdichtung eines Gebäudes zur Einschätzung der Lüftungswärmeverluste.
     </p>
   </div>
 
@@ -88,7 +115,18 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="glossar__section-title">M</h2>
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Manuelle Bearbeitung:</span> Anpassung der Gebäudedaten, wenn diese nicht in die Standard-Software passen.<br>
-      <span class="glossar__section-highlight">Modernisierung:</span> Maßnahmen zur Verbesserung der Energieeffizienz eines Gebäudes.
+      <span class="glossar__section-highlight">Modernisierung:</span> Maßnahmen zur Verbesserung der Energieeffizienz eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Modernisierungsempfehlungen:</span> Vorschläge zur Verbesserung der Energieeffizienz eines Gebäudes.<br>
+      <span class="glossar__section-highlight">Mischgebäude:</span> Gebäude mit gemischter Nutzung, z. B. Wohn- und Geschäftshäuser.
+    
+    </p>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">O</h2>
+    <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Online-Energieausweis:</span> Möglichkeit, den Energieausweis digital und effizient zu erstellen unter https://online-energieausweis.org/.<br>
+      <span class="glossar__section-highlight">Oberste Geschossdecke:</span> Decke, die den oberen beheizten Raum vom nicht beheizten Dachraum trennt.
     </p>
   </div>
 
@@ -96,7 +134,9 @@ import Layout from "#layouts/Layout.astro";
     <h2 class="glossar__section-title">P</h2>
     <p class="glossar__section-content">
       <span class="glossar__section-highlight">Pflichtfelder:</span> Formularfelder, die zwingend ausgefüllt werden müssen, um den Vorgang abzuschließen. Gebäudebilder sind ebenfalls obligatorisch, können aber noch nach der Bestellung hochgeladen werden.<br>
-      <span class="glossar__section-highlight">Pläne:</span> Bauzeichnungen, die für die Erstellung eines Energieausweises erforderlich sind.
+      <span class="glossar__section-highlight">Pläne:</span> Bauzeichnungen, die für die Erstellung eines Energieausweises erforderlich sind.<br>
+      <span class="glossar__section-highlight">Primärenergiebedarf:</span> Endenergiebedarf multipliziert mit dem Primärenergiefaktor. Dadurch wird die Nachhaltigkeit bzw. Co2-Effizienz des Gebäudes dokumentiert.
+      
     </p>
   </div>
 
@@ -120,13 +160,18 @@ import Layout from "#layouts/Layout.astro";
   <div class="glossar__section">
     <h2 class="glossar__section-title">T</h2>
     <p class="glossar__section-content">
-      <span class="glossar__section-highlight">Treppenhaus:</span> Bereich eines Gebäudes, der nicht zur Wohnfläche zählt, aber eventuell zur energetischen Nutzfläche gehört.
+      <span class="glossar__section-highlight">Thermografie:</span> Verfahren, das Wärmeverluste eines Gebäudes mit einer Wärmebildkamera sichtbar macht.<br>
+      <span class="glossar__section-highlight">Treppenhäuser:</span> Gehören nicht zur Wohnfläche, können aber Teil der energetischen Nutzfläche sein.<br>
+      <span class="glossar__section-highlight">Transmissionswärmeverlust:</span> Wärmeverlust durch Bauteile wie Wände, Dächer oder Fenster.
     </p>
   </div>
 
   <div class="glossar__section">
     <h2 class="glossar__section-title">W</h2>
     <p class="glossar__section-content">
+      <span class="glossar__section-highlight">Wohngebäude:</span> Gebäude, die zu Wohnzwecken genutzt werden.<br>
+      <span class="glossar__section-highlight">Wärmebrücken:</span> Bauteile, die Wärme schneller nach außen leiten als die umliegenden Flächen.<br>
+      <span class="glossar__section-highlight">Wärmepumpen:</span> Heizsystem, das Umgebungswärme (z. B. aus Luft oder Erde) nutzt.<br>
       <span class="glossar__section-highlight">Wohnfläche:</span> Fläche eines Gebäudes, die für Wohnzwecke genutzt wird.<br>
       <span class="glossar__section-highlight">Weiterklicken:</span> Navigation zum nächsten Schritt im Formular, die nur funktioniert, wenn alle Pflichtfelder ausgefüllt sind.
     </p>

From 2724432e304d93a2b1f9890e0055a47a227fe3a9 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 16:06:42 +0100
Subject: [PATCH 052/165] Korrektur

---
 src/pages/glossar/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/glossar/index.astro b/src/pages/glossar/index.astro
index 6a928f0b..b75bddd9 100644
--- a/src/pages/glossar/index.astro
+++ b/src/pages/glossar/index.astro
@@ -17,7 +17,7 @@ import Layout from "#layouts/Layout.astro";
       <span class="glossar__section-highlight">Altbau:</span> Älteres Gebäude vor 1978 gebaut.<br>
       <span class="glossar__section-highlight">Anbau:</span> Erweiterung eines Gebäudes, häufig mit unterschiedlichem Baujahr und energetischen Eigenschaften.<br>
       <span class="glossar__section-highlight">Ausnahmen:</span> Regelungen, die bestimmte Gebäude oder Eigentümer von gesetzlichen Anforderungen befreien.<br>
-      <span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchswerten oder bedarfsorientiert gem. DIN 18599 anhand standardisierter Randbedingungen.
+      <span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchswerten oder bedarfsorientiert gem. DIN 18599 anhand standardisierter Randbedingungen.<br>
       <span class="glossar__section-highlight">Aktualisierung von Verbrauchsdaten:</span> Verbrauchsdaten dürfen laut GEG nicht älter als 18 Monate sein.<br>
       <span class="glossar__section-highlight">Austauschpflicht für alte Heizkessel:</span> Heizungen, die älter als 30 Jahre sind und nicht der Brennwert- oder Niedertemperaturtechnik entsprechen, müssen ausgetauscht werden.
     </p>

From de80ef3b4a5c14d9f6e8c0c2eda1b100818a2613 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 20:17:59 +0100
Subject: [PATCH 053/165] Widget

---
 src/pages/welcher-energieausweis/index.astro | 222 +++++++++++++++++++
 1 file changed, 222 insertions(+)
 create mode 100644 src/pages/welcher-energieausweis/index.astro

diff --git a/src/pages/welcher-energieausweis/index.astro b/src/pages/welcher-energieausweis/index.astro
new file mode 100644
index 00000000..c081aecf
--- /dev/null
+++ b/src/pages/welcher-energieausweis/index.astro
@@ -0,0 +1,222 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Welcher Energieausweis">
+
+<script>
+$(document).ready(function () {
+  // Initial setup: Reset all selections
+  $('.OEA_bitte').prop('selected', true);
+  $('#OEA_result').hide();
+
+  // Handle main type selection
+  $('#OEA_changeTyp').change(function () {
+    const chTyp = $('#OEA_changeTyp').val();
+    const chAnlass = $('#OEA_changeAnlass').val();
+
+    // Reset second-level options
+    $('.OEA_bitte').prop('selected', true);
+    $('.OEA_title2, .OEA_auswahl2').hide();
+
+    // Logic for Gewerbegebäude and Neubau
+    if (chTyp === 'Gewerbegebäude' || chAnlass === 'Neubau') {
+      if (chAnlass) $('#OEA_result').show();
+    } else if (chAnlass && chTyp) {
+      $('.OEA_title2, .OEA_auswahl2').show();
+      $('#OEA_result').hide();
+    }
+
+    // Update result
+    getResult();
+  });
+
+  // Handle secondary selection
+  $('.OEA_auswahl2').change(function () {
+    const baujahr = parseInt($('#changeBaujahr').val());
+    const einheiten = parseInt($('#changeEinheiten').val());
+    const status = parseInt($('#changeStatus').val());
+
+    const checkAusweis = baujahr + einheiten + status;
+    const chTyp = $('#OEA_changeTyp').val();
+
+    // Determine Ausweis type
+    if (checkAusweis === 3) {
+      const BA = `https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen.php?recode=${$('#recode').val()}`;
+      $('#OEA_result_text').html(
+        `Ihr Gebäude wurde vor 1978 gebaut, hat weniger als 5 Wohneinheiten und ist energetisch unsaniert. In diesem Fall benötigen Sie einen Bedarfsausweis.<br />
+         <div class="empfehlungen">
+           <a class="OEA_toUS" href="${BA}" target="_blank">Jetzt Bedarfsausweis online erstellen</a>
+         </div>`
+      );
+      $('#OEA_result').show();
+    } else {
+      getResult();
+      $('#OEA_result').show();
+    }
+  });
+
+  // General result update function
+  function getResult() {
+    const chTyp = $('#OEA_changeTyp').val();
+    const chAnlass = $('#OEA_changeAnlass').val();
+
+    // Example: Update based on Einfamilienhaus and Vermietung/Verkauf
+    if (chTyp === 'Einfamilienhaus' && chAnlass === 'Vermietung/Verkauf') {
+      const VA = `https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen.php?recode=${$('#recode').val()}`;
+      $('#OEA_result_text').html(
+        `Für Vermietung/Verkauf können Sie einen Verbrauchsausweis erstellen.<br />
+         <div class="empfehlungen">
+           <a class="OEA_toUS" href="${VA}" target="_blank">Jetzt Verbrauchsausweis online erstellen</a>
+         </div>`
+      );
+    }
+  }
+
+  // Additional listeners for other dropdowns
+  $('#OEA_changeAnlass').change(getResult);
+});
+</script
+
+<h1 class="text-3xl">Welcher Energieausweis?</h1>
+
+<div class="mt-12 m-auto w-[90%] relative">
+<div id="OEA_widget">
+  <input id="recode" type="hidden" value="widgetvorlage">
+
+  <div id="OEA_input">
+    <div class="OEA_item1">
+      <div class="OEA_title1">Gebäudetyp</div>
+      <select class="OEA_auswahl1" id="OEA_changeTyp">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="Einfamilienhaus">Einfamilienhaus</option>
+        <option value="Zweifamilienhaus">Zweifamilienhaus</option>
+        <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+        <option value="Gewerbegebäude">Gewerbegebäude</option>
+        <option value="Mischgebäude">Mischgebäude</option>
+      </select>
+    </div>
+
+    <div class="OEA_item2">
+      <div class="OEA_title1">Anlass</div>
+      <select class="OEA_auswahl1" id="OEA_changeAnlass">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
+        <option value="Modernisierung">Modernisierung</option>
+        <option value="Neubau">Neubau</option>
+        <option value="Erweiterung">Erweiterung</option>
+        <option value="Aushangpflicht">Aushangpflicht</option>
+      </select>
+    </div>
+
+    <div class="OEA_item3">
+      <div class="OEA_title2">Baujahr</div>
+      <select class="OEA_auswahl2" id="changeBaujahr">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="1">vor 1978</option>
+        <option value="0">nach 1977</option>
+      </select>
+    </div>
+
+    <div class="OEA_item4">
+      <div class="OEA_title2">Wohneinheiten</div>
+      <select class="OEA_auswahl2" id="changeEinheiten">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="1">bis 4 Wohneinheiten</option>
+        <option value="0">mehr als 4 Wohneinheiten</option>
+      </select>
+    </div>
+
+    <div class="OEA_item5">
+      <div class="OEA_title2">Sanierungsstatus</div>
+      <select class="OEA_auswahl2" id="changeStatus">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="0">saniert</option>
+        <option value="1">unsaniert</option>
+      </select>
+    </div>
+
+    <div class="OEA_item6 result">
+      <div id="OEA_result">
+        <div class="OEA_title3">Das Ergebnis Ihrer Anfrage:</div>
+        <p id="OEA_result_text"></p>
+      </div>
+    </div>
+
+    <div class="OEA_item7 referrer">
+      <div id="OEA_logo_referrer">
+        <img src="https://widgetvorlage-widget.online-energieausweis.org/img/logo.png" alt="Logo">
+      </div>
+    </div>
+
+    <div class="OEA_item8 ibcornelsen">
+      <div id="OEA_logo_IBC">
+        <a class="IBC_link" href="https://online-energieausweis.org?recode=widgetvorlage" title="IB Cornelsen">
+          <div id="IBC_LOGO">powered by</div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+
+<style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#OEA_widget {
+  @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
+
+  #OEA_input {
+    @apply space-y-4;
+
+    .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
+      @apply space-y-2;
+
+      .OEA_title1, .OEA_title2 {
+        @apply font-bold text-lg text-white p-2 rounded;
+      }
+    }
+
+    .OEA_title1 {
+      @apply bg-blue-900;
+    }
+
+    .OEA_title2 {
+      @apply bg-blue-300 text-blue-900;
+    }
+
+    .OEA_auswahl1, .OEA_auswahl2 {
+      @apply w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
+    }
+
+    #OEA_result {
+      @apply p-4 border-2 border-blue-300 rounded-lg text-gray-700;
+    }
+
+    .OEA_title3 {
+      @apply text-xl font-semibold text-blue-900;
+    }
+
+    #OEA_logo_referrer img {
+      @apply w-full max-w-xs mx-auto;
+    }
+
+    #IBC_LOGO {
+      @apply text-center text-gray-500 font-semibold text-sm mt-2;
+    }
+  }
+}
+
+select {
+    @apply w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-500;
+  }
+
+
+.empfehlungen a {
+    @apply text-blue-600 underline hover:text-blue-800 font-semibold;
+  }
+</style>

From fb957ceeb20edb53b15cac2765320ad3585510e5 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 20:34:16 +0100
Subject: [PATCH 054/165] Widget

---
 src/components/design/sidebars/cards/card-navigation.svelte     | 2 +-
 .../index.astro                                                 | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)
 rename src/pages/{welcher-energieausweis => energieausweis-erstellen}/index.astro (99%)

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index 0344092d..54a35e91 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -109,7 +109,7 @@ if(innerWidth>1024){
     
     <ul class="dropdown-content energieasusweis-erstellen">
       {#if innerWidth < 1023}
-      <li><a href="{'#'}">Energieausweis erstellen</a></li>
+      <li><a href="/energieausweis-erstellen">Energieausweis erstellen</a></li>
       {/if}
       <li class="disc2"><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis erstellen</a></li>
       <li class="disc2"><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis erstellen</a></li>
diff --git a/src/pages/welcher-energieausweis/index.astro b/src/pages/energieausweis-erstellen/index.astro
similarity index 99%
rename from src/pages/welcher-energieausweis/index.astro
rename to src/pages/energieausweis-erstellen/index.astro
index c081aecf..777827c7 100644
--- a/src/pages/welcher-energieausweis/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -4,6 +4,7 @@ import Layout from "#layouts/Layout.astro";
 
 ---
 
+
 <Layout title="Welcher Energieausweis">
 
 <script>

From 13f0cc5e94b19c0ae0651851692e3c726863ddad Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 20:39:28 +0100
Subject: [PATCH 055/165] widget

---
 src/components/design/sidebars/cards/card-navigation.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/card-navigation.svelte
index 54a35e91..dd4cc476 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -102,9 +102,9 @@ if(innerWidth>1024){
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
     {#if innerWidth > 1023}
-    <a href="{'#'}" class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href="/energieausweis-erstellen" class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {:else}
-    <a href={undefined} class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href="/energieausweis-erstellen" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {/if}
     
     <ul class="dropdown-content energieasusweis-erstellen">

From d766c23e2b8d8fc1951c31b1ee68e9e3b0f0923f Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 20:44:24 +0100
Subject: [PATCH 056/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 777827c7..69065d38 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -4,9 +4,6 @@ import Layout from "#layouts/Layout.astro";
 
 ---
 
-
-<Layout title="Welcher Energieausweis">
-
 <script>
 $(document).ready(function () {
   // Initial setup: Reset all selections
@@ -79,7 +76,11 @@ $(document).ready(function () {
   // Additional listeners for other dropdowns
   $('#OEA_changeAnlass').change(getResult);
 });
-</script
+</script>
+
+
+
+<Layout title="Welcher Energieausweis">
 
 <h1 class="text-3xl">Welcher Energieausweis?</h1>
 

From 200db63f44acfd30cbcb96cc679f378113f7848c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 21:01:41 +0100
Subject: [PATCH 057/165] widget

---
 .../energieausweis-erstellen/index.astro      | 83 +------------------
 1 file changed, 4 insertions(+), 79 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 69065d38..c3a62a7d 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -4,82 +4,6 @@ import Layout from "#layouts/Layout.astro";
 
 ---
 
-<script>
-$(document).ready(function () {
-  // Initial setup: Reset all selections
-  $('.OEA_bitte').prop('selected', true);
-  $('#OEA_result').hide();
-
-  // Handle main type selection
-  $('#OEA_changeTyp').change(function () {
-    const chTyp = $('#OEA_changeTyp').val();
-    const chAnlass = $('#OEA_changeAnlass').val();
-
-    // Reset second-level options
-    $('.OEA_bitte').prop('selected', true);
-    $('.OEA_title2, .OEA_auswahl2').hide();
-
-    // Logic for Gewerbegebäude and Neubau
-    if (chTyp === 'Gewerbegebäude' || chAnlass === 'Neubau') {
-      if (chAnlass) $('#OEA_result').show();
-    } else if (chAnlass && chTyp) {
-      $('.OEA_title2, .OEA_auswahl2').show();
-      $('#OEA_result').hide();
-    }
-
-    // Update result
-    getResult();
-  });
-
-  // Handle secondary selection
-  $('.OEA_auswahl2').change(function () {
-    const baujahr = parseInt($('#changeBaujahr').val());
-    const einheiten = parseInt($('#changeEinheiten').val());
-    const status = parseInt($('#changeStatus').val());
-
-    const checkAusweis = baujahr + einheiten + status;
-    const chTyp = $('#OEA_changeTyp').val();
-
-    // Determine Ausweis type
-    if (checkAusweis === 3) {
-      const BA = `https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen.php?recode=${$('#recode').val()}`;
-      $('#OEA_result_text').html(
-        `Ihr Gebäude wurde vor 1978 gebaut, hat weniger als 5 Wohneinheiten und ist energetisch unsaniert. In diesem Fall benötigen Sie einen Bedarfsausweis.<br />
-         <div class="empfehlungen">
-           <a class="OEA_toUS" href="${BA}" target="_blank">Jetzt Bedarfsausweis online erstellen</a>
-         </div>`
-      );
-      $('#OEA_result').show();
-    } else {
-      getResult();
-      $('#OEA_result').show();
-    }
-  });
-
-  // General result update function
-  function getResult() {
-    const chTyp = $('#OEA_changeTyp').val();
-    const chAnlass = $('#OEA_changeAnlass').val();
-
-    // Example: Update based on Einfamilienhaus and Vermietung/Verkauf
-    if (chTyp === 'Einfamilienhaus' && chAnlass === 'Vermietung/Verkauf') {
-      const VA = `https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen.php?recode=${$('#recode').val()}`;
-      $('#OEA_result_text').html(
-        `Für Vermietung/Verkauf können Sie einen Verbrauchsausweis erstellen.<br />
-         <div class="empfehlungen">
-           <a class="OEA_toUS" href="${VA}" target="_blank">Jetzt Verbrauchsausweis online erstellen</a>
-         </div>`
-      );
-    }
-  }
-
-  // Additional listeners for other dropdowns
-  $('#OEA_changeAnlass').change(getResult);
-});
-</script>
-
-
-
 <Layout title="Welcher Energieausweis">
 
 <h1 class="text-3xl">Welcher Energieausweis?</h1>
@@ -90,7 +14,8 @@ $(document).ready(function () {
 
   <div id="OEA_input">
     <div class="OEA_item1">
-      <div class="OEA_title1">Gebäudetyp</div>
+
+    <div class="OEA_title1">Gebäudetyp</div>
       <select class="OEA_auswahl1" id="OEA_changeTyp">
         <option value="" selected disabled>bitte auswählen</option>
         <option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -173,7 +98,7 @@ $(document).ready(function () {
   @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
 
   #OEA_input {
-    @apply space-y-4;
+    @apply space-y-4 flex-row;
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
       @apply space-y-2;
@@ -188,7 +113,7 @@ $(document).ready(function () {
     }
 
     .OEA_title2 {
-      @apply bg-blue-300 text-blue-900;
+      @apply bg-secondary;
     }
 
     .OEA_auswahl1, .OEA_auswahl2 {

From 0b631dcc631fb395b70943deca8967847dbaba0f Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 21:12:12 +0100
Subject: [PATCH 058/165] widget

---
 src/pages/energieausweis-erstellen/index.astro | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index c3a62a7d..a4c4c1f2 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -13,8 +13,8 @@ import Layout from "#layouts/Layout.astro";
   <input id="recode" type="hidden" value="widgetvorlage">
 
   <div id="OEA_input">
-    <div class="OEA_item1">
 
+    <div class="OEA_item1">
     <div class="OEA_title1">Gebäudetyp</div>
       <select class="OEA_auswahl1" id="OEA_changeTyp">
         <option value="" selected disabled>bitte auswählen</option>
@@ -107,13 +107,14 @@ import Layout from "#layouts/Layout.astro";
         @apply font-bold text-lg text-white p-2 rounded;
       }
     }
+    .OEA_item1, .OEA_item2 {@apply w-1/2;}
 
     .OEA_title1 {
       @apply bg-blue-900;
     }
 
     .OEA_title2 {
-      @apply bg-secondary;
+      @apply bg-primary;
     }
 
     .OEA_auswahl1, .OEA_auswahl2 {

From 9ff91b0a5bee5dc23d21cadba355dba609e04f7e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 21:16:04 +0100
Subject: [PATCH 059/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index a4c4c1f2..54717ce8 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -98,7 +98,7 @@ import Layout from "#layouts/Layout.astro";
   @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
 
   #OEA_input {
-    @apply space-y-4 flex-row;
+    @apply space-y-4 flex flex-row;
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
       @apply space-y-2;

From 84734650c6320abfeaa8b1b7a24448e02a6093e3 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 21:22:54 +0100
Subject: [PATCH 060/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 54717ce8..2c4931f3 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -107,7 +107,6 @@ import Layout from "#layouts/Layout.astro";
         @apply font-bold text-lg text-white p-2 rounded;
       }
     }
-    .OEA_item1, .OEA_item2 {@apply w-1/2;}
 
     .OEA_title1 {
       @apply bg-blue-900;

From 007aeeab00f5e96034b0c56559a38fed1c7992fe Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:05:59 +0100
Subject: [PATCH 061/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 2c4931f3..da160dbb 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -14,6 +14,7 @@ import Layout from "#layouts/Layout.astro";
 
   <div id="OEA_input">
 
+ <div class="OEA_zeile1">
     <div class="OEA_item1">
     <div class="OEA_title1">Gebäudetyp</div>
       <select class="OEA_auswahl1" id="OEA_changeTyp">
@@ -37,7 +38,10 @@ import Layout from "#layouts/Layout.astro";
         <option value="Aushangpflicht">Aushangpflicht</option>
       </select>
     </div>
+   </div>
 
+
+  <div class="OEA_zeile2">
     <div class="OEA_item3">
       <div class="OEA_title2">Baujahr</div>
       <select class="OEA_auswahl2" id="changeBaujahr">
@@ -64,6 +68,7 @@ import Layout from "#layouts/Layout.astro";
         <option value="1">unsaniert</option>
       </select>
     </div>
+   </div> 
 
     <div class="OEA_item6 result">
       <div id="OEA_result">
@@ -98,7 +103,7 @@ import Layout from "#layouts/Layout.astro";
   @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
 
   #OEA_input {
-    @apply space-y-4 flex flex-row;
+    @apply space-y-4;
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
       @apply space-y-2;
@@ -108,6 +113,10 @@ import Layout from "#layouts/Layout.astro";
       }
     }
 
+    .OEA_zeile1, .OEA_zeile2  {
+      @apply flex flex-row;
+    }
+
     .OEA_title1 {
       @apply bg-blue-900;
     }

From 42752864ea559647183f50b48e7b8b72dbd14306 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:10:28 +0100
Subject: [PATCH 062/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index da160dbb..65f460fa 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -103,10 +103,10 @@ import Layout from "#layouts/Layout.astro";
   @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
 
   #OEA_input {
-    @apply space-y-4;
+    @apply space-y-4 space-x-4;
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
-      @apply space-y-2;
+      @apply space-y-2 w-full;
 
       .OEA_title1, .OEA_title2 {
         @apply font-bold text-lg text-white p-2 rounded;

From c0bb656fd790645e7a00e0fc54867a67693e68cb Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:19:37 +0100
Subject: [PATCH 063/165] Widget

---
 .../energieausweis-erstellen/index.astro      | 25 +++++--------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 65f460fa..a3ea2338 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -76,21 +76,8 @@ import Layout from "#layouts/Layout.astro";
         <p id="OEA_result_text"></p>
       </div>
     </div>
-
-    <div class="OEA_item7 referrer">
-      <div id="OEA_logo_referrer">
-        <img src="https://widgetvorlage-widget.online-energieausweis.org/img/logo.png" alt="Logo">
-      </div>
-    </div>
-
-    <div class="OEA_item8 ibcornelsen">
-      <div id="OEA_logo_IBC">
-        <a class="IBC_link" href="https://online-energieausweis.org?recode=widgetvorlage" title="IB Cornelsen">
-          <div id="IBC_LOGO">powered by</div>
-        </a>
-      </div>
-    </div>
   </div>
+
 </div>
 </div>
 
@@ -103,13 +90,13 @@ import Layout from "#layouts/Layout.astro";
   @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
 
   #OEA_input {
-    @apply space-y-4 space-x-4;
+    @apply ;
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
-      @apply space-y-2 w-full;
+      @apply space-y-2 space-x-2 w-full;
 
       .OEA_title1, .OEA_title2 {
-        @apply font-bold text-lg text-white p-2 rounded;
+        @apply font-bold text-lg text-white p-1 rounded;
       }
     }
 
@@ -130,11 +117,11 @@ import Layout from "#layouts/Layout.astro";
     }
 
     #OEA_result {
-      @apply p-4 border-2 border-blue-300 rounded-lg text-gray-700;
+      @apply p-4 border-2 border-primary rounded-lg text-gray-700;
     }
 
     .OEA_title3 {
-      @apply text-xl font-semibold text-blue-900;
+      @apply text-xl font-semibold text-primary;
     }
 
     #OEA_logo_referrer img {

From a0ade46e76e39caa7ccb3227c68f99b014f07bb8 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:22:27 +0100
Subject: [PATCH 064/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index a3ea2338..f7e5478a 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -90,7 +90,6 @@ import Layout from "#layouts/Layout.astro";
   @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
 
   #OEA_input {
-    @apply ;
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
       @apply space-y-2 space-x-2 w-full;

From 4623aaa23b73ac1a5d760affb4ff61141d43a3c1 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:42:11 +0100
Subject: [PATCH 065/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index f7e5478a..8ebc2fac 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -91,18 +91,19 @@ import Layout from "#layouts/Layout.astro";
 
   #OEA_input {
 
+    .OEA_zeile1, .OEA_zeile2  {
+         @apply flex flex-row;
+  
+
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
       @apply space-y-2 space-x-2 w-full;
 
       .OEA_title1, .OEA_title2 {
-        @apply font-bold text-lg text-white p-1 rounded;
+        @apply font-bold text-lg text-white p-2 rounded;
       }
     }
-
-    .OEA_zeile1, .OEA_zeile2  {
-      @apply flex flex-row;
-    }
-
+   }
+  
     .OEA_title1 {
       @apply bg-blue-900;
     }
@@ -116,11 +117,11 @@ import Layout from "#layouts/Layout.astro";
     }
 
     #OEA_result {
-      @apply p-4 border-2 border-primary rounded-lg text-gray-700;
+      @apply p-4 border-2 border-secondary rounded-lg text-gray-700;
     }
 
     .OEA_title3 {
-      @apply text-xl font-semibold text-primary;
+      @apply text-xl font-semibold text-secondary;
     }
 
     #OEA_logo_referrer img {

From 5d7c3d0c477c0d1136da4903c7a853505e4e35c3 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:54:18 +0100
Subject: [PATCH 066/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 8ebc2fac..a8769216 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -87,7 +87,7 @@ import Layout from "#layouts/Layout.astro";
 @tailwind utilities;
 
 #OEA_widget {
-  @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
+  @apply bg-white p-3 rounded-lg shadow-lg;
 
   #OEA_input {
 
@@ -96,16 +96,16 @@ import Layout from "#layouts/Layout.astro";
   
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
-      @apply space-y-2 space-x-2 w-full;
+      @apply m-2 w-full;
 
       .OEA_title1, .OEA_title2 {
-        @apply font-bold text-lg text-white p-2 rounded;
+        @apply font-bold text-lg text-white p-2 m-2 rounded;
       }
     }
    }
   
     .OEA_title1 {
-      @apply bg-blue-900;
+      @apply bg-secondary;
     }
 
     .OEA_title2 {
@@ -113,11 +113,11 @@ import Layout from "#layouts/Layout.astro";
     }
 
     .OEA_auswahl1, .OEA_auswahl2 {
-      @apply w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
+      @apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
     }
 
     #OEA_result {
-      @apply p-4 border-2 border-secondary rounded-lg text-gray-700;
+      @apply p-4 m-4 border-2 border-secondary rounded-lg text-gray-700;
     }
 
     .OEA_title3 {

From ed589ad1ed2a0171db2e32cffc992ad9c5881866 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:02:59 +0100
Subject: [PATCH 067/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index a8769216..9e1fe8b2 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -96,10 +96,10 @@ import Layout from "#layouts/Layout.astro";
   
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
-      @apply m-2 w-full;
+      @apply w-full;
 
       .OEA_title1, .OEA_title2 {
-        @apply font-bold text-lg text-white p-2 m-2 rounded;
+        @apply font-bold text-lg text-white p-2 rounded w-full;
       }
     }
    }

From bc31e0d4ed2c20b9a8722f8f7493c701832c974c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:07:08 +0100
Subject: [PATCH 068/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 9e1fe8b2..e74d99b8 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -92,7 +92,7 @@ import Layout from "#layouts/Layout.astro";
   #OEA_input {
 
     .OEA_zeile1, .OEA_zeile2  {
-         @apply flex flex-row;
+         @apply flex flex-row space-x-2;
   
 
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {

From 22285f1cd98292a38c349cac7e2cc47246b80399 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:16:34 +0100
Subject: [PATCH 069/165] Widget

---
 .../energieausweis-erstellen/index.astro      | 25 ++++---------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index e74d99b8..6df71010 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -9,10 +9,11 @@ import Layout from "#layouts/Layout.astro";
 <h1 class="text-3xl">Welcher Energieausweis?</h1>
 
 <div class="mt-12 m-auto w-[90%] relative">
+
 <div id="OEA_widget">
   <input id="recode" type="hidden" value="widgetvorlage">
 
-  <div id="OEA_input">
+<div id="OEA_input">
 
  <div class="OEA_zeile1">
     <div class="OEA_item1">
@@ -72,7 +73,6 @@ import Layout from "#layouts/Layout.astro";
 
     <div class="OEA_item6 result">
       <div id="OEA_result">
-        <div class="OEA_title3">Das Ergebnis Ihrer Anfrage:</div>
         <p id="OEA_result_text"></p>
       </div>
     </div>
@@ -82,19 +82,19 @@ import Layout from "#layouts/Layout.astro";
 </div>
 
 <style lang="scss">
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 #OEA_widget {
-  @apply bg-white p-3 rounded-lg shadow-lg;
+  @apply bg-white p-3 rounded-lg shadow-lg space-y-2;
 
   #OEA_input {
 
     .OEA_zeile1, .OEA_zeile2  {
          @apply flex flex-row space-x-2;
   
-
     .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
       @apply w-full;
 
@@ -120,26 +120,11 @@ import Layout from "#layouts/Layout.astro";
       @apply p-4 m-4 border-2 border-secondary rounded-lg text-gray-700;
     }
 
-    .OEA_title3 {
-      @apply text-xl font-semibold text-secondary;
-    }
-
-    #OEA_logo_referrer img {
-      @apply w-full max-w-xs mx-auto;
-    }
-
-    #IBC_LOGO {
-      @apply text-center text-gray-500 font-semibold text-sm mt-2;
-    }
   }
 }
 
-select {
-    @apply w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-500;
-  }
-
-
 .empfehlungen a {
     @apply text-blue-600 underline hover:text-blue-800 font-semibold;
   }
+  
 </style>

From 8f301863970b666304e451dc9fcd9a29147b1af2 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:20:59 +0100
Subject: [PATCH 070/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 6df71010..4d745099 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -88,9 +88,10 @@ import Layout from "#layouts/Layout.astro";
 @tailwind utilities;
 
 #OEA_widget {
-  @apply bg-white p-3 rounded-lg shadow-lg space-y-2;
+  @apply bg-white p-3 rounded-lg shadow-lg;
+
+  #OEA_input {  @apply space-y-2;
 
-  #OEA_input {
 
     .OEA_zeile1, .OEA_zeile2  {
          @apply flex flex-row space-x-2;
@@ -126,5 +127,5 @@ import Layout from "#layouts/Layout.astro";
 .empfehlungen a {
     @apply text-blue-600 underline hover:text-blue-800 font-semibold;
   }
-  
+
 </style>

From 0038ae85b32cbf8abd0c13bd018219b674f0c79e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:25:51 +0100
Subject: [PATCH 071/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 4d745099..27e462e2 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -88,7 +88,7 @@ import Layout from "#layouts/Layout.astro";
 @tailwind utilities;
 
 #OEA_widget {
-  @apply bg-white p-3 rounded-lg shadow-lg;
+  @apply bg-light-grey p-4 rounded-xl shadow-xl;
 
   #OEA_input {  @apply space-y-2;
 
@@ -118,7 +118,7 @@ import Layout from "#layouts/Layout.astro";
     }
 
     #OEA_result {
-      @apply p-4 m-4 border-2 border-secondary rounded-lg text-gray-700;
+      @apply rounded-lg text-gray-700;
     }
 
   }

From cf3fee9678318f21e93ba75ca8ea487d5684e76d Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:29:55 +0100
Subject: [PATCH 072/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 27e462e2..79cd04fc 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -88,7 +88,7 @@ import Layout from "#layouts/Layout.astro";
 @tailwind utilities;
 
 #OEA_widget {
-  @apply bg-light-grey p-4 rounded-xl shadow-xl;
+  @apply bg-gray-100 p-4 rounded-xl shadow-xl;
 
   #OEA_input {  @apply space-y-2;
 

From 805adc19bada74b4224026ac14e555a4c04f9c4a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:35:35 +0100
Subject: [PATCH 073/165] widget

---
 src/pages/energieausweis-erstellen/index.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 79cd04fc..fd4cdead 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -88,7 +88,7 @@ import Layout from "#layouts/Layout.astro";
 @tailwind utilities;
 
 #OEA_widget {
-  @apply bg-gray-100 p-4 rounded-xl shadow-xl;
+  @apply bg-gray-100 p-4 shadow-xl;
 
   #OEA_input {  @apply space-y-2;
 
@@ -100,7 +100,7 @@ import Layout from "#layouts/Layout.astro";
       @apply w-full;
 
       .OEA_title1, .OEA_title2 {
-        @apply font-bold text-lg text-white p-2 rounded w-full;
+        @apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
       }
     }
    }

From 699d4d3df5089598c2170112f1a73804bf1de522 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:54:24 +0100
Subject: [PATCH 074/165] Widget

---
 .../energieausweis-erstellen/index.astro      | 665 +++++++++++++++++-
 1 file changed, 661 insertions(+), 4 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index fd4cdead..39bb9f9f 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -3,12 +3,43 @@
 import Layout from "#layouts/Layout.astro";
 
 ---
+<script lang="ts">
+	let gebaeudetyp: string = "";
+	let anlass: string = "";
+	let result: string = "";
+	let hasAushangpflicht: boolean = true;
+
+	$: result = gebaeudetyp + " " + anlass;
+
+	$: if (
+		gebaeudetyp == "Einfamilienhaus" ||
+		gebaeudetyp == "Zweifamilienhaus" ||
+		gebaeudetyp == "Mehrfamilienhaus"
+	) {
+		hasAushangpflicht = false;
+	} else if (
+		gebaeudetyp == "Gewerbegebäude" ||
+		gebaeudetyp == "Mischgebäude"
+	) {
+		hasAushangpflicht = true;
+	}
+
+	var VA =
+		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen";
+	var VANW =
+		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen";
+	var BA =
+		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen";
+	var BANW =
+		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen";
+</script>
+
 
 <Layout title="Welcher Energieausweis">
 
 <h1 class="text-3xl">Welcher Energieausweis?</h1>
 
-<div class="mt-12 m-auto w-[90%] relative">
+<div class="mt-12 m-auto w-[95%] relative">
 
 <div id="OEA_widget">
   <input id="recode" type="hidden" value="widgetvorlage">
@@ -18,7 +49,7 @@ import Layout from "#layouts/Layout.astro";
  <div class="OEA_zeile1">
     <div class="OEA_item1">
     <div class="OEA_title1">Gebäudetyp</div>
-      <select class="OEA_auswahl1" id="OEA_changeTyp">
+      <select class="OEA_auswahl1" id="OEA_changeTyp" bind:value={gebaeudetyp}>
         <option value="" selected disabled>bitte auswählen</option>
         <option value="Einfamilienhaus">Einfamilienhaus</option>
         <option value="Zweifamilienhaus">Zweifamilienhaus</option>
@@ -30,7 +61,7 @@ import Layout from "#layouts/Layout.astro";
 
     <div class="OEA_item2">
       <div class="OEA_title1">Anlass</div>
-      <select class="OEA_auswahl1" id="OEA_changeAnlass">
+      <select class="OEA_auswahl1" id="OEA_changeAnlass" bind:value={anlass}>
         <option value="" selected disabled>bitte auswählen</option>
         <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
         <option value="Modernisierung">Modernisierung</option>
@@ -73,7 +104,629 @@ import Layout from "#layouts/Layout.astro";
 
     <div class="OEA_item6 result">
       <div id="OEA_result">
-        <p id="OEA_result_text"></p>
+        
+        
+        
+        
+        
+        <div class="text-lg">
+		{#if gebaeudetyp == "Einfamilienhaus" && anlass == "Vermietung/Verkauf"}
+			<p>
+				Wenn Sie Ihr Einfamilienhaus vermieten oder verkaufen wollen,
+				haben Sie die Wahl zwischen einem <span class="hilite"
+					>Verbrauchsausweis</span
+				>
+				für
+				<span class="hilite">Wohngebäude</span> und einem
+				<span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
+				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
+				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
+				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
+				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
+				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
+				Abrechnugsjahre vorliegen, und es gab dazwischen keine
+				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
+				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
+				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
+				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
+				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
+				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
+				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
+				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
+				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg my-2" href={VA} target="_blank"
+				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+			>
+			(Empfehlung)<br />
+			<a class="btn btn-primary text-lg" href={BA} target="_blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Modernisierung"}
+			<p>
+				Wenn Sie bei Ihrem Einfamilienhaus eine Modernisierung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+				verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Neubau"}
+			<p>
+				Wenn Sie ein Einfamilienhaus bauen wollen, benötigen Sie einen <span
+					class="hilite">Bedarfsausweis</span
+				>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
+				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+				zu erstellen. Aus der EnEV-Berechnung kann später, nach
+				Fertigstellung, der Bedarfsausweis erstellt werden. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§3 EnEV"
+					target="blank">§3 EnEV</a
+				>
+				ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
+				müssen.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Erweiterung"}
+			<p>
+				Wenn Sie bei Ihrem Einfamilienhaus eine Erweiterung planen,
+				benötigen Sie einen
+				<span class="hilite">Bedarfsausweis</span> für
+				<span class="hilite">Wohngebäude</span>.<br /><br />In der
+				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+				verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Vermietung/Verkauf"}
+			<p>
+				Wenn Sie Ihr Zweifamilienhaus vermieten oder verkaufen wollen,
+				haben Sie die Wahl zwischen einem <span class="hilite"
+					>Verbrauchsausweis</span
+				>
+				für <span class="hilite">Wohngebäude</span> und einem
+				<span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
+				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
+				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
+				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
+				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
+				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
+				Abrechnugsjahre vorliegen, und es gab dazwischen keine
+				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
+				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
+				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
+				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
+				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
+				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
+				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
+				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
+				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={VA} target="blank"
+				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+			>
+			(Empfehlung)<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Modernisierung"}
+			<p>
+				Wenn Sie bei Ihrem Zweifamilienhaus eine Modernisierung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+				verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Neubau"}
+			<p>
+				Wenn Sie ein Zweifamilienhaus bauen wollen, benötigen Sie einen <span
+					class="hilite">Bedarfsausweis</span
+				>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
+				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+				zu erstellen. Aus der EnEV-Berechnung kann später, nach
+				Fertigstellung, der Bedarfsausweis erstellt werden. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§3 EnEV"
+					target="blank">§3 EnEV</a
+				> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
+				müssen.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Erweiterung"}
+			<p>
+				Wenn Sie bei Ihrem Zweifamilienhaus eine Erweiterung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+				verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Vermietung/Verkauf"}
+			<p>
+				Wenn Sie Ihr Mehrfamilienhaus vermieten oder verkaufen wollen,
+				haben Sie die Wahl zwischen einem <span class="hilite"
+					>Verbrauchsausweis</span
+				>
+				für <span class="hilite">Wohngebäude</span> und einem
+				<span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
+				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
+				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
+				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
+				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
+				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
+				Abrechnugsjahre vorliegen, und es gab dazwischen keine
+				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
+				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
+				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
+				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
+				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
+				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
+				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
+				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
+				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={VA} target="blank"
+				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+			>
+			(Empfehlung)<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Modernisierung"}
+			<p>
+				Wenn Sie bei Ihrem Mehrfamilienhaus eine Modernisierung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+				verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Neubau"}
+			Wenn
+			<p>
+				Sie ein Mehrfamilienhaus bauen wollen, benötigen Sie einen <span
+					class="hilite">Bedarfsausweis</span
+				>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
+				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+				zu erstellen. Aus der EnEV-Berechnung kann später, nach
+				Fertigstellung, der Bedarfsausweis erstellt werden. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§3 EnEV"
+					target="blank">§3 EnEV</a
+				> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
+				müssen.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Erweiterung"}
+			<p>
+				Wenn Sie bei Ihrem Mehrfamilienhaus eine Erweiterung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+				verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Vermietung/Verkauf"}
+			<p>
+				Wenn Sie Ihr Gewerbegebäude vermieten oder verkaufen wollen,
+				haben Sie die Wahl zwischen einem <span class="hilite"
+					>Verbrauchsausweis</span
+				>
+				für <span class="hilite">Gewerbegebäude</span> und einem
+				<span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
+				Vermietung oder Verkauf Ihrer Gewerbeimmobilie können Sie den
+				einfacheren Energieausweis (Verbrauchsausweis) erstellen lassen.
+				Der gewerbliche Verbrauchsausweis benötigt als
+				Berechnungsgrundlage den Stromverbrauch und den
+				Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
+				Jahre der Heizenergieabrechnugen und der Stromabrechnung des
+				Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
+				vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
+				dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
+				keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
+				während dieses Zeitraums durchgeführt worden sein. Wenn diese
+				Voraussetzungen nicht vorliegen, oder keine vollständigen
+				Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
+				sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
+				werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={VANW} target="blank"
+				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+			>
+			(Empfehlung)<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Modernisierung"}
+			<p>
+				Wenn Sie bei Ihrem Gewerbegebäude eine Modernisierung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
+				der aktuellen EnEV ist geregelt, wie bei Änderungen im
+				Baubestand zu verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Neubau"}
+			<p>
+				Wenn Sie ein Gewerbegebäude bauen wollen, benötigen Sie einen <span
+					class="hilite">Bedarfsausweis</span
+				>
+				für <span class="hilite">Gewerbe</span>.<br /><br />Bei
+				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+				zu erstellen. Aus der EnEV-Berechnung kann später, nach
+				Fertigstellung, der Bedarfsausweis erstellt werden. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§4 EnEV"
+					target="blank">§4 EnEV</a
+				> ist geregelt welche Anforderungen für Gewerbegebäude eingehalten
+				werden müssen.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Erweiterung"}
+			<p>
+				Wenn Sie bei Ihrem Gewerbegebäude eine Erweiterung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
+				der aktuellen EnEV ist geregelt, wie bei Änderungen im
+				Baubestand zu verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Aushangpflicht"}
+			<p>
+				Bei starkem Publikumsverkehr in Ihrem Gewerbegebäude benötigen
+				Sie einen
+				<span class="hilite">Verbrauchsausweis</span> für
+				<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={VANW} target="blank"
+				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+			> (Empfehlung)
+		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Vermietung/Verkauf"}
+			<p>
+				Wenn Sie Ihr Mischgebäude vermieten oder verkaufen wollen, haben
+				Sie für den nichtgewerblichen Teil die Wahl zwischen einem
+				<span class="hilite">Verbrauchsausweis</span> für
+				<span class="hilite">Wohngebäude</span>
+				und einem <span class="hilite">Bedarfsausweis</span> für
+				<span class="hilite">Wohngebäude</span>
+				und für den gewerblichen Teil die Wahl zwischen einem
+				<span class="hilite">Verbrauchsausweis</span>
+				für <span class="hilite">Gewerbegebäude</span> und einem
+				<span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Gewerbegebäude</span>.<br /><br /><span
+					class="red">Für den nichtgewerblichen Teil gilt:</span
+				><br />In den meisten Fällen können Sie bei Vermietung oder
+				Verkauf Ihrer Immobilie den einfacheren Energieausweis
+				(Verbrauchsausweis) erstellen lassen. Dieser Ausweis ist
+				verbrauchsorientiert und benötigt als Berechnungsgrundlage 3
+				zusammenhängende Jahre der Heizenergieabrechnugen des Gebäudes.
+				Wenn Ihnen also diese 3 Abrechnugsjahre vorliegen, und es gab
+				dazwischen keine grundlegenden Sanierungsmaßnahmen bzw.
+				Heizungsaustausch, dann steht der Nutzung eines
+				Verbrauchsausweises nichts im Weg.<br /><br />Laut EnEV gibt es
+				nur eine rechtliche Ausnahme, bei der es nicht zulässig ist
+				einen Verbrauchsausweis bei Vermietung oder Verkauf zu
+				verwenden. Dies ist dann der Fall, wenn Ihr Gebäude gänzlich
+				unsaniert ist, vor 1978 gebaut wurde und weniger als 5
+				Wohneinheiten besitzt. In diesem Fall oder bei unvollständigen
+				Verbrauchsabrechnungen (z.B. bei Leerstand), sollte ein
+				Bedarfsausweis für Wohngebäude erstellt werden.<br /><span
+					class="red">Für den gewerblichen Teil gilt:</span
+				><br />Bei Vermietung oder Verkauf Ihrer Gewerbeimmobilie können
+				Sie den einfacheren Energieausweis (Verbrauchsausweis) erstellen
+				lassen. Der gewerbliche Verbrauchsausweis benötigt als
+				Berechnungsgrundlage den Stromverbrauch und den
+				Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
+				Jahre der Heizenergieabrechnugen und der Stromabrechnung des
+				Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
+				vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
+				dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
+				keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
+				während dieses Zeitraums durchgeführt worden sein. Wenn diese
+				Voraussetzungen nicht vorliegen, oder keine vollständigen
+				Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
+				sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
+				werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={VA} target="blank"
+				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+			>
+			(Empfehlung)
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+			<br />
+			<a class="btn btn-primary text-lg" href={VANW} target="blank"
+				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+			>
+			(Empfehlung)
+			<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Modernisierung"}
+			<p>
+				Wenn Sie bei Ihrem Mischgebäude eine Modernisierung planen,
+				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Wohngebäude</span> und einen
+				<span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
+				der aktuellen EnEV ist geregelt, wie bei Änderungen im
+				Baubestand zu verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+			<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Neubau"}
+			<p>
+				Wenn Sie ein Mischgebäude bauen wollen, benötigen Sie einen <span
+					class="hilite">Bedarfsausweis</span
+				>
+				für <span class="hilite">Wohngebäude</span> und einen
+				<span class="hilite">Bedarfsausweis</span>
+				für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
+				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+				zu erstellen. Aus der EnEV-Berechnung kann später, nach
+				Fertigstellung, der Bedarfsausweis erstellt werden. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§3 EnEV"
+					target="blank">§3 EnEV</a
+				>
+				ist geregelt welche Anforderungen für Wohngebäude, und in
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§4 EnEV"
+					target="blank">§4 EnEV</a
+				> welche Anforderungen für Gewerbegebäude eingehalten werden müssen.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+			<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Erweiterung"}
+			<p>
+				Wenn Sie bei Ihrem Mischgebäude eine Erweiterung planen,
+				benötigen Sie einen
+				<span class="hilite">Bedarfsausweis</span> für
+				<span class="hilite">Wohngebäude</span>
+				und einen <span class="hilite">Bedarfsausweis</span> für
+				<span class="hilite">Gewerbegebäude</span>.<br /><br />In der
+				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+				verfahren ist. In
+				<a
+					href="https://online-energieausweis.org/enev/"
+					title="§9 EnEV"
+					target="blank">§9 EnEV</a
+				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+				ein Bedarfsausweis erstellt werden.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={BA} target="blank"
+				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+			>
+			<br />
+			<a class="btn btn-primary text-lg" href={BANW} target="blank"
+				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
+			>
+		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Aushangpflicht"}
+			<p>
+				Bei starkem Publikumsverkehr in Ihrem Mischgebäude benötigen Sie
+				einen <span class="hilite">Verbrauchsausweis</span> für
+				<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
+			</p>
+			<br />
+			<a class="btn btn-primary text-lg" href={VANW} target="blank"
+				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+			> (Empfehlung)
+		{/if}
+	</div>
+        
+        
+        
+        
       </div>
     </div>
   </div>
@@ -128,4 +781,8 @@ import Layout from "#layouts/Layout.astro";
     @apply text-blue-600 underline hover:text-blue-800 font-semibold;
   }
 
+  .hilite {
+		@apply font-bold;
+	}
+
 </style>

From 05e0d7cc5a514e77cb0b00b1ea25b2cbd6bd0760 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:08:52 +0100
Subject: [PATCH 075/165] Widget

---
 src/components/Widget2.svelte                 | 777 ++++++++++++++++++
 .../energieausweis-erstellen/index.astro      | 776 +----------------
 2 files changed, 779 insertions(+), 774 deletions(-)
 create mode 100644 src/components/Widget2.svelte

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
new file mode 100644
index 00000000..eec583bf
--- /dev/null
+++ b/src/components/Widget2.svelte
@@ -0,0 +1,777 @@
+<script lang="ts">
+	let gebaeudetyp: string = "";
+	let anlass: string = "";
+	let result: string = "";
+	let hasAushangpflicht: boolean = true;
+
+	$: result = gebaeudetyp + " " + anlass;
+
+	$: if (
+		gebaeudetyp == "Einfamilienhaus" ||
+		gebaeudetyp == "Zweifamilienhaus" ||
+		gebaeudetyp == "Mehrfamilienhaus"
+	) {
+		hasAushangpflicht = false;
+	} else if (
+		gebaeudetyp == "Gewerbegebäude" ||
+		gebaeudetyp == "Mischgebäude"
+	) {
+		hasAushangpflicht = true;
+	}
+
+	var VA =
+		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen";
+	var VANW =
+		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen";
+	var BA =
+		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen";
+	var BANW =
+		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen";
+</script>
+
+    <div id="OEA_widget">
+      <input id="recode" type="hidden" value="widgetvorlage">
+    
+    <div id="OEA_input">
+    
+     <div class="OEA_zeile1">
+        <div class="OEA_item1">
+        <div class="OEA_title1">Gebäudetyp</div>
+          <select class="OEA_auswahl1" id="OEA_changeTyp" bind:value={gebaeudetyp}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="Einfamilienhaus">Einfamilienhaus</option>
+            <option value="Zweifamilienhaus">Zweifamilienhaus</option>
+            <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+            <option value="Gewerbegebäude">Gewerbegebäude</option>
+            <option value="Mischgebäude">Mischgebäude</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item2">
+          <div class="OEA_title1">Anlass</div>
+          <select class="OEA_auswahl1" id="OEA_changeAnlass" bind:value={anlass}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
+            <option value="Modernisierung">Modernisierung</option>
+            <option value="Neubau">Neubau</option>
+            <option value="Erweiterung">Erweiterung</option>
+            <option value="Aushangpflicht">Aushangpflicht</option>
+          </select>
+        </div>
+       </div>
+    
+    
+      <div class="OEA_zeile2">
+        <div class="OEA_item3">
+          <div class="OEA_title2">Baujahr</div>
+          <select class="OEA_auswahl2" id="changeBaujahr">
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="1">vor 1978</option>
+            <option value="0">nach 1977</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item4">
+          <div class="OEA_title2">Wohneinheiten</div>
+          <select class="OEA_auswahl2" id="changeEinheiten">
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="1">bis 4 Wohneinheiten</option>
+            <option value="0">mehr als 4 Wohneinheiten</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item5">
+          <div class="OEA_title2">Sanierungsstatus</div>
+          <select class="OEA_auswahl2" id="changeStatus">
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="0">saniert</option>
+            <option value="1">unsaniert</option>
+          </select>
+        </div>
+       </div> 
+    
+        <div class="OEA_item6 result">
+          <div id="OEA_result">
+            
+            
+            
+            
+            
+            <div class="text-lg">
+            {#if gebaeudetyp == "Einfamilienhaus" && anlass == "Vermietung/Verkauf"}
+                <p>
+                    Wenn Sie Ihr Einfamilienhaus vermieten oder verkaufen wollen,
+                    haben Sie die Wahl zwischen einem <span class="hilite"
+                        >Verbrauchsausweis</span
+                    >
+                    für
+                    <span class="hilite">Wohngebäude</span> und einem
+                    <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In den
+                    meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
+                    Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
+                    erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
+                    benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
+                    Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
+                    Abrechnugsjahre vorliegen, und es gab dazwischen keine
+                    grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
+                    steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
+                    /><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
+                    es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
+                    oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
+                    Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
+                    weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
+                    unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
+                    sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg my-2" href={VA} target="_blank"
+                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+                >
+                (Empfehlung)<br />
+                <a class="btn btn-primary text-lg" href={BA} target="_blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Modernisierung"}
+                <p>
+                    Wenn Sie bei Ihrem Einfamilienhaus eine Modernisierung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+                    verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Neubau"}
+                <p>
+                    Wenn Sie ein Einfamilienhaus bauen wollen, benötigen Sie einen <span
+                        class="hilite">Bedarfsausweis</span
+                    >
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
+                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
+                    Fertigstellung, der Bedarfsausweis erstellt werden. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§3 EnEV"
+                        target="blank">§3 EnEV</a
+                    >
+                    ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
+                    müssen.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Erweiterung"}
+                <p>
+                    Wenn Sie bei Ihrem Einfamilienhaus eine Erweiterung planen,
+                    benötigen Sie einen
+                    <span class="hilite">Bedarfsausweis</span> für
+                    <span class="hilite">Wohngebäude</span>.<br /><br />In der
+                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+                    verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Vermietung/Verkauf"}
+                <p>
+                    Wenn Sie Ihr Zweifamilienhaus vermieten oder verkaufen wollen,
+                    haben Sie die Wahl zwischen einem <span class="hilite"
+                        >Verbrauchsausweis</span
+                    >
+                    für <span class="hilite">Wohngebäude</span> und einem
+                    <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In den
+                    meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
+                    Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
+                    erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
+                    benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
+                    Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
+                    Abrechnugsjahre vorliegen, und es gab dazwischen keine
+                    grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
+                    steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
+                    /><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
+                    es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
+                    oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
+                    Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
+                    weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
+                    unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
+                    sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={VA} target="blank"
+                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+                >
+                (Empfehlung)<br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Modernisierung"}
+                <p>
+                    Wenn Sie bei Ihrem Zweifamilienhaus eine Modernisierung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+                    verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Neubau"}
+                <p>
+                    Wenn Sie ein Zweifamilienhaus bauen wollen, benötigen Sie einen <span
+                        class="hilite">Bedarfsausweis</span
+                    >
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
+                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
+                    Fertigstellung, der Bedarfsausweis erstellt werden. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§3 EnEV"
+                        target="blank">§3 EnEV</a
+                    > ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
+                    müssen.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Erweiterung"}
+                <p>
+                    Wenn Sie bei Ihrem Zweifamilienhaus eine Erweiterung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+                    verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Vermietung/Verkauf"}
+                <p>
+                    Wenn Sie Ihr Mehrfamilienhaus vermieten oder verkaufen wollen,
+                    haben Sie die Wahl zwischen einem <span class="hilite"
+                        >Verbrauchsausweis</span
+                    >
+                    für <span class="hilite">Wohngebäude</span> und einem
+                    <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In den
+                    meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
+                    Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
+                    erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
+                    benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
+                    Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
+                    Abrechnugsjahre vorliegen, und es gab dazwischen keine
+                    grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
+                    steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
+                    /><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
+                    es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
+                    oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
+                    Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
+                    weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
+                    unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
+                    sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={VA} target="blank"
+                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+                >
+                (Empfehlung)<br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Modernisierung"}
+                <p>
+                    Wenn Sie bei Ihrem Mehrfamilienhaus eine Modernisierung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+                    verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Neubau"}
+                Wenn
+                <p>
+                    Sie ein Mehrfamilienhaus bauen wollen, benötigen Sie einen <span
+                        class="hilite">Bedarfsausweis</span
+                    >
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
+                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
+                    Fertigstellung, der Bedarfsausweis erstellt werden. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§3 EnEV"
+                        target="blank">§3 EnEV</a
+                    > ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
+                    müssen.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Erweiterung"}
+                <p>
+                    Wenn Sie bei Ihrem Mehrfamilienhaus eine Erweiterung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
+                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+                    verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Vermietung/Verkauf"}
+                <p>
+                    Wenn Sie Ihr Gewerbegebäude vermieten oder verkaufen wollen,
+                    haben Sie die Wahl zwischen einem <span class="hilite"
+                        >Verbrauchsausweis</span
+                    >
+                    für <span class="hilite">Gewerbegebäude</span> und einem
+                    <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
+                    Vermietung oder Verkauf Ihrer Gewerbeimmobilie können Sie den
+                    einfacheren Energieausweis (Verbrauchsausweis) erstellen lassen.
+                    Der gewerbliche Verbrauchsausweis benötigt als
+                    Berechnungsgrundlage den Stromverbrauch und den
+                    Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
+                    Jahre der Heizenergieabrechnugen und der Stromabrechnung des
+                    Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
+                    vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
+                    dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
+                    keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
+                    während dieses Zeitraums durchgeführt worden sein. Wenn diese
+                    Voraussetzungen nicht vorliegen, oder keine vollständigen
+                    Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
+                    sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
+                    werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={VANW} target="blank"
+                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+                >
+                (Empfehlung)<br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Modernisierung"}
+                <p>
+                    Wenn Sie bei Ihrem Gewerbegebäude eine Modernisierung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
+                    der aktuellen EnEV ist geregelt, wie bei Änderungen im
+                    Baubestand zu verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Neubau"}
+                <p>
+                    Wenn Sie ein Gewerbegebäude bauen wollen, benötigen Sie einen <span
+                        class="hilite">Bedarfsausweis</span
+                    >
+                    für <span class="hilite">Gewerbe</span>.<br /><br />Bei
+                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
+                    Fertigstellung, der Bedarfsausweis erstellt werden. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§4 EnEV"
+                        target="blank">§4 EnEV</a
+                    > ist geregelt welche Anforderungen für Gewerbegebäude eingehalten
+                    werden müssen.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Erweiterung"}
+                <p>
+                    Wenn Sie bei Ihrem Gewerbegebäude eine Erweiterung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
+                    der aktuellen EnEV ist geregelt, wie bei Änderungen im
+                    Baubestand zu verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Aushangpflicht"}
+                <p>
+                    Bei starkem Publikumsverkehr in Ihrem Gewerbegebäude benötigen
+                    Sie einen
+                    <span class="hilite">Verbrauchsausweis</span> für
+                    <span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={VANW} target="blank"
+                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+                > (Empfehlung)
+            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Vermietung/Verkauf"}
+                <p>
+                    Wenn Sie Ihr Mischgebäude vermieten oder verkaufen wollen, haben
+                    Sie für den nichtgewerblichen Teil die Wahl zwischen einem
+                    <span class="hilite">Verbrauchsausweis</span> für
+                    <span class="hilite">Wohngebäude</span>
+                    und einem <span class="hilite">Bedarfsausweis</span> für
+                    <span class="hilite">Wohngebäude</span>
+                    und für den gewerblichen Teil die Wahl zwischen einem
+                    <span class="hilite">Verbrauchsausweis</span>
+                    für <span class="hilite">Gewerbegebäude</span> und einem
+                    <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Gewerbegebäude</span>.<br /><br /><span
+                        class="red">Für den nichtgewerblichen Teil gilt:</span
+                    ><br />In den meisten Fällen können Sie bei Vermietung oder
+                    Verkauf Ihrer Immobilie den einfacheren Energieausweis
+                    (Verbrauchsausweis) erstellen lassen. Dieser Ausweis ist
+                    verbrauchsorientiert und benötigt als Berechnungsgrundlage 3
+                    zusammenhängende Jahre der Heizenergieabrechnugen des Gebäudes.
+                    Wenn Ihnen also diese 3 Abrechnugsjahre vorliegen, und es gab
+                    dazwischen keine grundlegenden Sanierungsmaßnahmen bzw.
+                    Heizungsaustausch, dann steht der Nutzung eines
+                    Verbrauchsausweises nichts im Weg.<br /><br />Laut EnEV gibt es
+                    nur eine rechtliche Ausnahme, bei der es nicht zulässig ist
+                    einen Verbrauchsausweis bei Vermietung oder Verkauf zu
+                    verwenden. Dies ist dann der Fall, wenn Ihr Gebäude gänzlich
+                    unsaniert ist, vor 1978 gebaut wurde und weniger als 5
+                    Wohneinheiten besitzt. In diesem Fall oder bei unvollständigen
+                    Verbrauchsabrechnungen (z.B. bei Leerstand), sollte ein
+                    Bedarfsausweis für Wohngebäude erstellt werden.<br /><span
+                        class="red">Für den gewerblichen Teil gilt:</span
+                    ><br />Bei Vermietung oder Verkauf Ihrer Gewerbeimmobilie können
+                    Sie den einfacheren Energieausweis (Verbrauchsausweis) erstellen
+                    lassen. Der gewerbliche Verbrauchsausweis benötigt als
+                    Berechnungsgrundlage den Stromverbrauch und den
+                    Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
+                    Jahre der Heizenergieabrechnugen und der Stromabrechnung des
+                    Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
+                    vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
+                    dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
+                    keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
+                    während dieses Zeitraums durchgeführt worden sein. Wenn diese
+                    Voraussetzungen nicht vorliegen, oder keine vollständigen
+                    Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
+                    sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
+                    werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={VA} target="blank"
+                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
+                >
+                (Empfehlung)
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+                <br />
+                <a class="btn btn-primary text-lg" href={VANW} target="blank"
+                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+                >
+                (Empfehlung)
+                <br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Modernisierung"}
+                <p>
+                    Wenn Sie bei Ihrem Mischgebäude eine Modernisierung planen,
+                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Wohngebäude</span> und einen
+                    <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
+                    der aktuellen EnEV ist geregelt, wie bei Änderungen im
+                    Baubestand zu verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+                <br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Neubau"}
+                <p>
+                    Wenn Sie ein Mischgebäude bauen wollen, benötigen Sie einen <span
+                        class="hilite">Bedarfsausweis</span
+                    >
+                    für <span class="hilite">Wohngebäude</span> und einen
+                    <span class="hilite">Bedarfsausweis</span>
+                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
+                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
+                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
+                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
+                    Fertigstellung, der Bedarfsausweis erstellt werden. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§3 EnEV"
+                        target="blank">§3 EnEV</a
+                    >
+                    ist geregelt welche Anforderungen für Wohngebäude, und in
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§4 EnEV"
+                        target="blank">§4 EnEV</a
+                    > welche Anforderungen für Gewerbegebäude eingehalten werden müssen.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+                <br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Erweiterung"}
+                <p>
+                    Wenn Sie bei Ihrem Mischgebäude eine Erweiterung planen,
+                    benötigen Sie einen
+                    <span class="hilite">Bedarfsausweis</span> für
+                    <span class="hilite">Wohngebäude</span>
+                    und einen <span class="hilite">Bedarfsausweis</span> für
+                    <span class="hilite">Gewerbegebäude</span>.<br /><br />In der
+                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
+                    verfahren ist. In
+                    <a
+                        href="https://online-energieausweis.org/enev/"
+                        title="§9 EnEV"
+                        target="blank">§9 EnEV</a
+                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
+                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
+                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
+                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
+                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
+                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
+                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
+                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
+                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
+                    ein Bedarfsausweis erstellt werden.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={BA} target="blank"
+                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
+                >
+                <br />
+                <a class="btn btn-primary text-lg" href={BANW} target="blank"
+                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
+                >
+            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Aushangpflicht"}
+                <p>
+                    Bei starkem Publikumsverkehr in Ihrem Mischgebäude benötigen Sie
+                    einen <span class="hilite">Verbrauchsausweis</span> für
+                    <span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
+                </p>
+                <br />
+                <a class="btn btn-primary text-lg" href={VANW} target="blank"
+                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
+                > (Empfehlung)
+            {/if}
+        </div>
+            
+            
+            
+            
+          </div>
+        </div>
+      </div>
+    
+    </div>
+    
+    
+    <style lang="scss">
+    
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    
+    #OEA_widget {
+      @apply bg-gray-100 p-4 shadow-xl;
+    
+      #OEA_input {  @apply space-y-2;
+    
+    
+        .OEA_zeile1, .OEA_zeile2  {
+             @apply flex flex-row space-x-2;
+      
+        .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
+          @apply w-full;
+    
+          .OEA_title1, .OEA_title2 {
+            @apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
+          }
+        }
+       }
+      
+        .OEA_title1 {
+          @apply bg-secondary;
+        }
+    
+        .OEA_title2 {
+          @apply bg-primary;
+        }
+    
+        .OEA_auswahl1, .OEA_auswahl2 {
+          @apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
+        }
+    
+        #OEA_result {
+          @apply rounded-lg text-gray-700;
+        }
+    
+      }
+    }
+    
+    .empfehlungen a {
+        @apply text-blue-600 underline hover:text-blue-800 font-semibold;
+      }
+    
+      .hilite {
+            @apply font-bold;
+        }
+    
+    </style>
+    
\ No newline at end of file
diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 39bb9f9f..f743529f 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,38 +1,9 @@
 ---
 
 import Layout from "#layouts/Layout.astro";
+import Widget2 from "#components/Widget2.svelte";
 
 ---
-<script lang="ts">
-	let gebaeudetyp: string = "";
-	let anlass: string = "";
-	let result: string = "";
-	let hasAushangpflicht: boolean = true;
-
-	$: result = gebaeudetyp + " " + anlass;
-
-	$: if (
-		gebaeudetyp == "Einfamilienhaus" ||
-		gebaeudetyp == "Zweifamilienhaus" ||
-		gebaeudetyp == "Mehrfamilienhaus"
-	) {
-		hasAushangpflicht = false;
-	} else if (
-		gebaeudetyp == "Gewerbegebäude" ||
-		gebaeudetyp == "Mischgebäude"
-	) {
-		hasAushangpflicht = true;
-	}
-
-	var VA =
-		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen";
-	var VANW =
-		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen";
-	var BA =
-		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen";
-	var BANW =
-		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen";
-</script>
 
 
 <Layout title="Welcher Energieausweis">
@@ -40,749 +11,6 @@ import Layout from "#layouts/Layout.astro";
 <h1 class="text-3xl">Welcher Energieausweis?</h1>
 
 <div class="mt-12 m-auto w-[95%] relative">
-
-<div id="OEA_widget">
-  <input id="recode" type="hidden" value="widgetvorlage">
-
-<div id="OEA_input">
-
- <div class="OEA_zeile1">
-    <div class="OEA_item1">
-    <div class="OEA_title1">Gebäudetyp</div>
-      <select class="OEA_auswahl1" id="OEA_changeTyp" bind:value={gebaeudetyp}>
-        <option value="" selected disabled>bitte auswählen</option>
-        <option value="Einfamilienhaus">Einfamilienhaus</option>
-        <option value="Zweifamilienhaus">Zweifamilienhaus</option>
-        <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
-        <option value="Gewerbegebäude">Gewerbegebäude</option>
-        <option value="Mischgebäude">Mischgebäude</option>
-      </select>
-    </div>
-
-    <div class="OEA_item2">
-      <div class="OEA_title1">Anlass</div>
-      <select class="OEA_auswahl1" id="OEA_changeAnlass" bind:value={anlass}>
-        <option value="" selected disabled>bitte auswählen</option>
-        <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
-        <option value="Modernisierung">Modernisierung</option>
-        <option value="Neubau">Neubau</option>
-        <option value="Erweiterung">Erweiterung</option>
-        <option value="Aushangpflicht">Aushangpflicht</option>
-      </select>
-    </div>
-   </div>
-
-
-  <div class="OEA_zeile2">
-    <div class="OEA_item3">
-      <div class="OEA_title2">Baujahr</div>
-      <select class="OEA_auswahl2" id="changeBaujahr">
-        <option value="" selected disabled>bitte auswählen</option>
-        <option value="1">vor 1978</option>
-        <option value="0">nach 1977</option>
-      </select>
-    </div>
-
-    <div class="OEA_item4">
-      <div class="OEA_title2">Wohneinheiten</div>
-      <select class="OEA_auswahl2" id="changeEinheiten">
-        <option value="" selected disabled>bitte auswählen</option>
-        <option value="1">bis 4 Wohneinheiten</option>
-        <option value="0">mehr als 4 Wohneinheiten</option>
-      </select>
-    </div>
-
-    <div class="OEA_item5">
-      <div class="OEA_title2">Sanierungsstatus</div>
-      <select class="OEA_auswahl2" id="changeStatus">
-        <option value="" selected disabled>bitte auswählen</option>
-        <option value="0">saniert</option>
-        <option value="1">unsaniert</option>
-      </select>
-    </div>
-   </div> 
-
-    <div class="OEA_item6 result">
-      <div id="OEA_result">
-        
-        
-        
-        
-        
-        <div class="text-lg">
-		{#if gebaeudetyp == "Einfamilienhaus" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Einfamilienhaus vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für
-				<span class="hilite">Wohngebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-				Abrechnugsjahre vorliegen, und es gab dazwischen keine
-				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg my-2" href={VA} target="_blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BA} target="_blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Einfamilienhaus eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Einfamilienhaus bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				>
-				ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-				müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Einfamilienhaus eine Erweiterung planen,
-				benötigen Sie einen
-				<span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Zweifamilienhaus vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-				Abrechnugsjahre vorliegen, und es gab dazwischen keine
-				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VA} target="blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Zweifamilienhaus eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Zweifamilienhaus bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-				müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Zweifamilienhaus eine Erweiterung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Mehrfamilienhaus vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-				Abrechnugsjahre vorliegen, und es gab dazwischen keine
-				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VA} target="blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Mehrfamilienhaus eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Neubau"}
-			Wenn
-			<p>
-				Sie ein Mehrfamilienhaus bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-				müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Mehrfamilienhaus eine Erweiterung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Gewerbegebäude vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für <span class="hilite">Gewerbegebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
-				Vermietung oder Verkauf Ihrer Gewerbeimmobilie können Sie den
-				einfacheren Energieausweis (Verbrauchsausweis) erstellen lassen.
-				Der gewerbliche Verbrauchsausweis benötigt als
-				Berechnungsgrundlage den Stromverbrauch und den
-				Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
-				Jahre der Heizenergieabrechnugen und der Stromabrechnung des
-				Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
-				vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
-				dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
-				keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
-				während dieses Zeitraums durchgeführt worden sein. Wenn diese
-				Voraussetzungen nicht vorliegen, oder keine vollständigen
-				Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
-				sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
-				werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Gewerbegebäude eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-				der aktuellen EnEV ist geregelt, wie bei Änderungen im
-				Baubestand zu verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Gewerbegebäude bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Gewerbe</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§4 EnEV"
-					target="blank">§4 EnEV</a
-				> ist geregelt welche Anforderungen für Gewerbegebäude eingehalten
-				werden müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Gewerbegebäude eine Erweiterung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-				der aktuellen EnEV ist geregelt, wie bei Änderungen im
-				Baubestand zu verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Aushangpflicht"}
-			<p>
-				Bei starkem Publikumsverkehr in Ihrem Gewerbegebäude benötigen
-				Sie einen
-				<span class="hilite">Verbrauchsausweis</span> für
-				<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			> (Empfehlung)
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Mischgebäude vermieten oder verkaufen wollen, haben
-				Sie für den nichtgewerblichen Teil die Wahl zwischen einem
-				<span class="hilite">Verbrauchsausweis</span> für
-				<span class="hilite">Wohngebäude</span>
-				und einem <span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Wohngebäude</span>
-				und für den gewerblichen Teil die Wahl zwischen einem
-				<span class="hilite">Verbrauchsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br /><span
-					class="red">Für den nichtgewerblichen Teil gilt:</span
-				><br />In den meisten Fällen können Sie bei Vermietung oder
-				Verkauf Ihrer Immobilie den einfacheren Energieausweis
-				(Verbrauchsausweis) erstellen lassen. Dieser Ausweis ist
-				verbrauchsorientiert und benötigt als Berechnungsgrundlage 3
-				zusammenhängende Jahre der Heizenergieabrechnugen des Gebäudes.
-				Wenn Ihnen also diese 3 Abrechnugsjahre vorliegen, und es gab
-				dazwischen keine grundlegenden Sanierungsmaßnahmen bzw.
-				Heizungsaustausch, dann steht der Nutzung eines
-				Verbrauchsausweises nichts im Weg.<br /><br />Laut EnEV gibt es
-				nur eine rechtliche Ausnahme, bei der es nicht zulässig ist
-				einen Verbrauchsausweis bei Vermietung oder Verkauf zu
-				verwenden. Dies ist dann der Fall, wenn Ihr Gebäude gänzlich
-				unsaniert ist, vor 1978 gebaut wurde und weniger als 5
-				Wohneinheiten besitzt. In diesem Fall oder bei unvollständigen
-				Verbrauchsabrechnungen (z.B. bei Leerstand), sollte ein
-				Bedarfsausweis für Wohngebäude erstellt werden.<br /><span
-					class="red">Für den gewerblichen Teil gilt:</span
-				><br />Bei Vermietung oder Verkauf Ihrer Gewerbeimmobilie können
-				Sie den einfacheren Energieausweis (Verbrauchsausweis) erstellen
-				lassen. Der gewerbliche Verbrauchsausweis benötigt als
-				Berechnungsgrundlage den Stromverbrauch und den
-				Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
-				Jahre der Heizenergieabrechnugen und der Stromabrechnung des
-				Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
-				vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
-				dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
-				keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
-				während dieses Zeitraums durchgeführt worden sein. Wenn diese
-				Voraussetzungen nicht vorliegen, oder keine vollständigen
-				Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
-				sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
-				werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VA} target="blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			>
-			(Empfehlung)
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Mischgebäude eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span> und einen
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-				der aktuellen EnEV ist geregelt, wie bei Änderungen im
-				Baubestand zu verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Mischgebäude bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span> und einen
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				>
-				ist geregelt welche Anforderungen für Wohngebäude, und in
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§4 EnEV"
-					target="blank">§4 EnEV</a
-				> welche Anforderungen für Gewerbegebäude eingehalten werden müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Mischgebäude eine Erweiterung planen,
-				benötigen Sie einen
-				<span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Wohngebäude</span>
-				und einen <span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Gewerbegebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Aushangpflicht"}
-			<p>
-				Bei starkem Publikumsverkehr in Ihrem Mischgebäude benötigen Sie
-				einen <span class="hilite">Verbrauchsausweis</span> für
-				<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			> (Empfehlung)
-		{/if}
-	</div>
-        
-        
-        
-        
-      </div>
-    </div>
-  </div>
-
-</div>
+<Widget2 client:load />
 </div>
 
-<style lang="scss">
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-#OEA_widget {
-  @apply bg-gray-100 p-4 shadow-xl;
-
-  #OEA_input {  @apply space-y-2;
-
-
-    .OEA_zeile1, .OEA_zeile2  {
-         @apply flex flex-row space-x-2;
-  
-    .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
-      @apply w-full;
-
-      .OEA_title1, .OEA_title2 {
-        @apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
-      }
-    }
-   }
-  
-    .OEA_title1 {
-      @apply bg-secondary;
-    }
-
-    .OEA_title2 {
-      @apply bg-primary;
-    }
-
-    .OEA_auswahl1, .OEA_auswahl2 {
-      @apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
-    }
-
-    #OEA_result {
-      @apply rounded-lg text-gray-700;
-    }
-
-  }
-}
-
-.empfehlungen a {
-    @apply text-blue-600 underline hover:text-blue-800 font-semibold;
-  }
-
-  .hilite {
-		@apply font-bold;
-	}
-
-</style>

From cea26d570d6d3a76c4a23963e84abd62456f79ee Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:12:38 +0100
Subject: [PATCH 076/165] Widget

---
 src/pages/energieausweis-erstellen/index.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index f743529f..786ef465 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -14,3 +14,5 @@ import Widget2 from "#components/Widget2.svelte";
 <Widget2 client:load />
 </div>
 
+</Layout>
+

From f8c92474b80407045b010e0bbc8a5b2e49e7a4aa Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:23:16 +0100
Subject: [PATCH 077/165] Widget

---
 src/components/Widget2.svelte | 666 +---------------------------------
 1 file changed, 5 insertions(+), 661 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index eec583bf..e3f188b4 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -1,35 +1,5 @@
-<script lang="ts">
-	let gebaeudetyp: string = "";
-	let anlass: string = "";
-	let result: string = "";
-	let hasAushangpflicht: boolean = true;
-
-	$: result = gebaeudetyp + " " + anlass;
-
-	$: if (
-		gebaeudetyp == "Einfamilienhaus" ||
-		gebaeudetyp == "Zweifamilienhaus" ||
-		gebaeudetyp == "Mehrfamilienhaus"
-	) {
-		hasAushangpflicht = false;
-	} else if (
-		gebaeudetyp == "Gewerbegebäude" ||
-		gebaeudetyp == "Mischgebäude"
-	) {
-		hasAushangpflicht = true;
-	}
-
-	var VA =
-		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen";
-	var VANW =
-		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen";
-	var BA =
-		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen";
-	var BANW =
-		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen";
-</script>
-
-    <div id="OEA_widget">
+     
+     <div id="OEA_widget">
       <input id="recode" type="hidden" value="widgetvorlage">
     
     <div id="OEA_input">
@@ -92,633 +62,10 @@
     
         <div class="OEA_item6 result">
           <div id="OEA_result">
-            
-            
-            
-            
-            
-            <div class="text-lg">
-            {#if gebaeudetyp == "Einfamilienhaus" && anlass == "Vermietung/Verkauf"}
-                <p>
-                    Wenn Sie Ihr Einfamilienhaus vermieten oder verkaufen wollen,
-                    haben Sie die Wahl zwischen einem <span class="hilite"
-                        >Verbrauchsausweis</span
-                    >
-                    für
-                    <span class="hilite">Wohngebäude</span> und einem
-                    <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-                    meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-                    Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-                    erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-                    benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-                    Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-                    Abrechnugsjahre vorliegen, und es gab dazwischen keine
-                    grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-                    steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-                    /><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-                    es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-                    oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-                    Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-                    weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-                    unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-                    sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg my-2" href={VA} target="_blank"
-                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-                >
-                (Empfehlung)<br />
-                <a class="btn btn-primary text-lg" href={BA} target="_blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Modernisierung"}
-                <p>
-                    Wenn Sie bei Ihrem Einfamilienhaus eine Modernisierung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-                    verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Neubau"}
-                <p>
-                    Wenn Sie ein Einfamilienhaus bauen wollen, benötigen Sie einen <span
-                        class="hilite">Bedarfsausweis</span
-                    >
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
-                    Fertigstellung, der Bedarfsausweis erstellt werden. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§3 EnEV"
-                        target="blank">§3 EnEV</a
-                    >
-                    ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-                    müssen.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Erweiterung"}
-                <p>
-                    Wenn Sie bei Ihrem Einfamilienhaus eine Erweiterung planen,
-                    benötigen Sie einen
-                    <span class="hilite">Bedarfsausweis</span> für
-                    <span class="hilite">Wohngebäude</span>.<br /><br />In der
-                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-                    verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Vermietung/Verkauf"}
-                <p>
-                    Wenn Sie Ihr Zweifamilienhaus vermieten oder verkaufen wollen,
-                    haben Sie die Wahl zwischen einem <span class="hilite"
-                        >Verbrauchsausweis</span
-                    >
-                    für <span class="hilite">Wohngebäude</span> und einem
-                    <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-                    meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-                    Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-                    erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-                    benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-                    Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-                    Abrechnugsjahre vorliegen, und es gab dazwischen keine
-                    grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-                    steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-                    /><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-                    es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-                    oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-                    Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-                    weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-                    unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-                    sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={VA} target="blank"
-                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-                >
-                (Empfehlung)<br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Modernisierung"}
-                <p>
-                    Wenn Sie bei Ihrem Zweifamilienhaus eine Modernisierung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-                    verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Neubau"}
-                <p>
-                    Wenn Sie ein Zweifamilienhaus bauen wollen, benötigen Sie einen <span
-                        class="hilite">Bedarfsausweis</span
-                    >
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
-                    Fertigstellung, der Bedarfsausweis erstellt werden. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§3 EnEV"
-                        target="blank">§3 EnEV</a
-                    > ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-                    müssen.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Erweiterung"}
-                <p>
-                    Wenn Sie bei Ihrem Zweifamilienhaus eine Erweiterung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-                    verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Vermietung/Verkauf"}
-                <p>
-                    Wenn Sie Ihr Mehrfamilienhaus vermieten oder verkaufen wollen,
-                    haben Sie die Wahl zwischen einem <span class="hilite"
-                        >Verbrauchsausweis</span
-                    >
-                    für <span class="hilite">Wohngebäude</span> und einem
-                    <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-                    meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-                    Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-                    erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-                    benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-                    Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-                    Abrechnugsjahre vorliegen, und es gab dazwischen keine
-                    grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-                    steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-                    /><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-                    es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-                    oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-                    Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-                    weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-                    unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-                    sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={VA} target="blank"
-                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-                >
-                (Empfehlung)<br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Modernisierung"}
-                <p>
-                    Wenn Sie bei Ihrem Mehrfamilienhaus eine Modernisierung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-                    verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Neubau"}
-                Wenn
-                <p>
-                    Sie ein Mehrfamilienhaus bauen wollen, benötigen Sie einen <span
-                        class="hilite">Bedarfsausweis</span
-                    >
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
-                    Fertigstellung, der Bedarfsausweis erstellt werden. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§3 EnEV"
-                        target="blank">§3 EnEV</a
-                    > ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-                    müssen.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Erweiterung"}
-                <p>
-                    Wenn Sie bei Ihrem Mehrfamilienhaus eine Erweiterung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-                    verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Vermietung/Verkauf"}
-                <p>
-                    Wenn Sie Ihr Gewerbegebäude vermieten oder verkaufen wollen,
-                    haben Sie die Wahl zwischen einem <span class="hilite"
-                        >Verbrauchsausweis</span
-                    >
-                    für <span class="hilite">Gewerbegebäude</span> und einem
-                    <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
-                    Vermietung oder Verkauf Ihrer Gewerbeimmobilie können Sie den
-                    einfacheren Energieausweis (Verbrauchsausweis) erstellen lassen.
-                    Der gewerbliche Verbrauchsausweis benötigt als
-                    Berechnungsgrundlage den Stromverbrauch und den
-                    Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
-                    Jahre der Heizenergieabrechnugen und der Stromabrechnung des
-                    Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
-                    vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
-                    dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
-                    keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
-                    während dieses Zeitraums durchgeführt worden sein. Wenn diese
-                    Voraussetzungen nicht vorliegen, oder keine vollständigen
-                    Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
-                    sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
-                    werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={VANW} target="blank"
-                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-                >
-                (Empfehlung)<br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Modernisierung"}
-                <p>
-                    Wenn Sie bei Ihrem Gewerbegebäude eine Modernisierung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-                    der aktuellen EnEV ist geregelt, wie bei Änderungen im
-                    Baubestand zu verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Neubau"}
-                <p>
-                    Wenn Sie ein Gewerbegebäude bauen wollen, benötigen Sie einen <span
-                        class="hilite">Bedarfsausweis</span
-                    >
-                    für <span class="hilite">Gewerbe</span>.<br /><br />Bei
-                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
-                    Fertigstellung, der Bedarfsausweis erstellt werden. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§4 EnEV"
-                        target="blank">§4 EnEV</a
-                    > ist geregelt welche Anforderungen für Gewerbegebäude eingehalten
-                    werden müssen.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Erweiterung"}
-                <p>
-                    Wenn Sie bei Ihrem Gewerbegebäude eine Erweiterung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-                    der aktuellen EnEV ist geregelt, wie bei Änderungen im
-                    Baubestand zu verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Aushangpflicht"}
-                <p>
-                    Bei starkem Publikumsverkehr in Ihrem Gewerbegebäude benötigen
-                    Sie einen
-                    <span class="hilite">Verbrauchsausweis</span> für
-                    <span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={VANW} target="blank"
-                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-                > (Empfehlung)
-            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Vermietung/Verkauf"}
-                <p>
-                    Wenn Sie Ihr Mischgebäude vermieten oder verkaufen wollen, haben
-                    Sie für den nichtgewerblichen Teil die Wahl zwischen einem
-                    <span class="hilite">Verbrauchsausweis</span> für
-                    <span class="hilite">Wohngebäude</span>
-                    und einem <span class="hilite">Bedarfsausweis</span> für
-                    <span class="hilite">Wohngebäude</span>
-                    und für den gewerblichen Teil die Wahl zwischen einem
-                    <span class="hilite">Verbrauchsausweis</span>
-                    für <span class="hilite">Gewerbegebäude</span> und einem
-                    <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Gewerbegebäude</span>.<br /><br /><span
-                        class="red">Für den nichtgewerblichen Teil gilt:</span
-                    ><br />In den meisten Fällen können Sie bei Vermietung oder
-                    Verkauf Ihrer Immobilie den einfacheren Energieausweis
-                    (Verbrauchsausweis) erstellen lassen. Dieser Ausweis ist
-                    verbrauchsorientiert und benötigt als Berechnungsgrundlage 3
-                    zusammenhängende Jahre der Heizenergieabrechnugen des Gebäudes.
-                    Wenn Ihnen also diese 3 Abrechnugsjahre vorliegen, und es gab
-                    dazwischen keine grundlegenden Sanierungsmaßnahmen bzw.
-                    Heizungsaustausch, dann steht der Nutzung eines
-                    Verbrauchsausweises nichts im Weg.<br /><br />Laut EnEV gibt es
-                    nur eine rechtliche Ausnahme, bei der es nicht zulässig ist
-                    einen Verbrauchsausweis bei Vermietung oder Verkauf zu
-                    verwenden. Dies ist dann der Fall, wenn Ihr Gebäude gänzlich
-                    unsaniert ist, vor 1978 gebaut wurde und weniger als 5
-                    Wohneinheiten besitzt. In diesem Fall oder bei unvollständigen
-                    Verbrauchsabrechnungen (z.B. bei Leerstand), sollte ein
-                    Bedarfsausweis für Wohngebäude erstellt werden.<br /><span
-                        class="red">Für den gewerblichen Teil gilt:</span
-                    ><br />Bei Vermietung oder Verkauf Ihrer Gewerbeimmobilie können
-                    Sie den einfacheren Energieausweis (Verbrauchsausweis) erstellen
-                    lassen. Der gewerbliche Verbrauchsausweis benötigt als
-                    Berechnungsgrundlage den Stromverbrauch und den
-                    Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
-                    Jahre der Heizenergieabrechnugen und der Stromabrechnung des
-                    Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
-                    vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
-                    dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
-                    keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
-                    während dieses Zeitraums durchgeführt worden sein. Wenn diese
-                    Voraussetzungen nicht vorliegen, oder keine vollständigen
-                    Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
-                    sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
-                    werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={VA} target="blank"
-                    >Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-                >
-                (Empfehlung)
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-                <br />
-                <a class="btn btn-primary text-lg" href={VANW} target="blank"
-                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-                >
-                (Empfehlung)
-                <br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Modernisierung"}
-                <p>
-                    Wenn Sie bei Ihrem Mischgebäude eine Modernisierung planen,
-                    benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Wohngebäude</span> und einen
-                    <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-                    der aktuellen EnEV ist geregelt, wie bei Änderungen im
-                    Baubestand zu verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-                <br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Neubau"}
-                <p>
-                    Wenn Sie ein Mischgebäude bauen wollen, benötigen Sie einen <span
-                        class="hilite">Bedarfsausweis</span
-                    >
-                    für <span class="hilite">Wohngebäude</span> und einen
-                    <span class="hilite">Bedarfsausweis</span>
-                    für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
-                    genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-                    vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-                    zu erstellen. Aus der EnEV-Berechnung kann später, nach
-                    Fertigstellung, der Bedarfsausweis erstellt werden. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§3 EnEV"
-                        target="blank">§3 EnEV</a
-                    >
-                    ist geregelt welche Anforderungen für Wohngebäude, und in
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§4 EnEV"
-                        target="blank">§4 EnEV</a
-                    > welche Anforderungen für Gewerbegebäude eingehalten werden müssen.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-                <br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Erweiterung"}
-                <p>
-                    Wenn Sie bei Ihrem Mischgebäude eine Erweiterung planen,
-                    benötigen Sie einen
-                    <span class="hilite">Bedarfsausweis</span> für
-                    <span class="hilite">Wohngebäude</span>
-                    und einen <span class="hilite">Bedarfsausweis</span> für
-                    <span class="hilite">Gewerbegebäude</span>.<br /><br />In der
-                    aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-                    verfahren ist. In
-                    <a
-                        href="https://online-energieausweis.org/enev/"
-                        title="§9 EnEV"
-                        target="blank">§9 EnEV</a
-                    > der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-                    Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-                    beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-                    werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-                    wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-                    kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-                    Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-                    durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-                    nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-                    ein Bedarfsausweis erstellt werden.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={BA} target="blank"
-                    >Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-                >
-                <br />
-                <a class="btn btn-primary text-lg" href={BANW} target="blank"
-                    >Jetzt Bedarfsausweis Gewerbe online anfragen</a
-                >
-            {:else if gebaeudetyp == "Mischgebäude" && anlass == "Aushangpflicht"}
-                <p>
-                    Bei starkem Publikumsverkehr in Ihrem Mischgebäude benötigen Sie
-                    einen <span class="hilite">Verbrauchsausweis</span> für
-                    <span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
-                </p>
-                <br />
-                <a class="btn btn-primary text-lg" href={VANW} target="blank"
-                    >Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-                > (Empfehlung)
-            {/if}
-        </div>
-            
-            
-            
-            
           </div>
         </div>
-      </div>
-    
+      
+    </div>
     </div>
     
     
@@ -768,10 +115,7 @@
     .empfehlungen a {
         @apply text-blue-600 underline hover:text-blue-800 font-semibold;
       }
-    
-      .hilite {
-            @apply font-bold;
-        }
+
     
     </style>
     
\ No newline at end of file

From ffcc992b0aabb314f11659c2771c0b4e6d40bb2f Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:27:06 +0100
Subject: [PATCH 078/165] Widget

---
 src/components/Widget2.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index e3f188b4..7b45ecc4 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -7,7 +7,7 @@
      <div class="OEA_zeile1">
         <div class="OEA_item1">
         <div class="OEA_title1">Gebäudetyp</div>
-          <select class="OEA_auswahl1" id="OEA_changeTyp" bind:value={gebaeudetyp}>
+          <select class="OEA_auswahl1" id="OEA_changeTyp">
             <option value="" selected disabled>bitte auswählen</option>
             <option value="Einfamilienhaus">Einfamilienhaus</option>
             <option value="Zweifamilienhaus">Zweifamilienhaus</option>
@@ -19,7 +19,7 @@
     
         <div class="OEA_item2">
           <div class="OEA_title1">Anlass</div>
-          <select class="OEA_auswahl1" id="OEA_changeAnlass" bind:value={anlass}>
+          <select class="OEA_auswahl1" id="OEA_changeAnlass">
             <option value="" selected disabled>bitte auswählen</option>
             <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
             <option value="Modernisierung">Modernisierung</option>

From c483d1d73d38efc54950b9cd62819598bde687e6 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:59:37 +0100
Subject: [PATCH 079/165] Widget

---
 src/components/Widget2.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 7b45ecc4..3a4e4f2b 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -1,4 +1,6 @@
-     
+
+<script lang="ts">import Layout from "#layouts/Layout.astro";</script>
+
      <div id="OEA_widget">
       <input id="recode" type="hidden" value="widgetvorlage">
     
@@ -62,6 +64,7 @@
     
         <div class="OEA_item6 result">
           <div id="OEA_result">
+            <BannerPrice client:load />
           </div>
         </div>
       

From 8d20866ec5ce90339f65ba32798b8e0cb4c001a1 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 01:08:42 +0100
Subject: [PATCH 080/165] widget

---
 src/components/Widget2.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 3a4e4f2b..54ce0b37 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -1,5 +1,5 @@
 
-<script lang="ts">import Layout from "#layouts/Layout.astro";</script>
+<script lang="ts">import BannerPrice from "#content/banner-saeule.svelte";</script>
 
      <div id="OEA_widget">
       <input id="recode" type="hidden" value="widgetvorlage">
@@ -32,7 +32,6 @@
         </div>
        </div>
     
-    
       <div class="OEA_zeile2">
         <div class="OEA_item3">
           <div class="OEA_title2">Baujahr</div>
@@ -119,6 +118,5 @@
         @apply text-blue-600 underline hover:text-blue-800 font-semibold;
       }
 
-    
     </style>
     
\ No newline at end of file

From 81957ab2055d4a503c4a6dbdf3bd097574183824 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 01:27:37 +0100
Subject: [PATCH 081/165] Widget

---
 src/components/Widget2.svelte | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 54ce0b37..11f57ebd 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -1,5 +1,29 @@
 
-<script lang="ts">import BannerPrice from "#content/banner-saeule.svelte";</script>
+<script lang="ts">
+
+import BannerPrice from "#content/banner-saeule.svelte";
+
+
+  let selectedType: string = "";
+  let selectedReason: string = "";
+  let showResult: boolean = false;
+
+  function handleTypeChange(event: Event) {
+    selectedType = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function handleReasonChange(event: Event) {
+    selectedReason = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function updateResultVisibility() {
+    // Die Bedingung, um das Ergebnis anzuzeigen
+    showResult = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
+  }
+
+</script>
 
      <div id="OEA_widget">
       <input id="recode" type="hidden" value="widgetvorlage">
@@ -9,7 +33,7 @@
      <div class="OEA_zeile1">
         <div class="OEA_item1">
         <div class="OEA_title1">Gebäudetyp</div>
-          <select class="OEA_auswahl1" id="OEA_changeTyp">
+        <select class="OEA_auswahl1" id="OEA_changeTyp" on:change={handleTypeChange}>
             <option value="" selected disabled>bitte auswählen</option>
             <option value="Einfamilienhaus">Einfamilienhaus</option>
             <option value="Zweifamilienhaus">Zweifamilienhaus</option>
@@ -21,7 +45,7 @@
     
         <div class="OEA_item2">
           <div class="OEA_title1">Anlass</div>
-          <select class="OEA_auswahl1" id="OEA_changeAnlass">
+          <select class="OEA_auswahl1" id="OEA_changeAnlass" on:change={handleReasonChange}>
             <option value="" selected disabled>bitte auswählen</option>
             <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
             <option value="Modernisierung">Modernisierung</option>
@@ -61,11 +85,14 @@
         </div>
        </div> 
     
+        {#if showResult}
         <div class="OEA_item6 result">
           <div id="OEA_result">
             <BannerPrice client:load />
           </div>
         </div>
+      {/if}
+
       
     </div>
     </div>

From 5922079fca6bee89ddd4e57cdeb344a488c24152 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 01:36:14 +0100
Subject: [PATCH 082/165] Widget

---
 src/components/Widget2.svelte | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 11f57ebd..d92b8243 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -2,7 +2,7 @@
 <script lang="ts">
 
 import BannerPrice from "#content/banner-saeule.svelte";
-
+import { fade } from 'svelte/transition';
 
   let selectedType: string = "";
   let selectedReason: string = "";
@@ -85,15 +85,15 @@ import BannerPrice from "#content/banner-saeule.svelte";
         </div>
        </div> 
     
-        {#if showResult}
-        <div class="OEA_item6 result">
-          <div id="OEA_result">
+      {#if showResult}
+      <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <div id="OEA_result" class="bg-white p-4 shadow-md rounded">
             <BannerPrice client:load />
-          </div>
         </div>
-      {/if}
+      </div>
+    {/if}
+
 
-      
     </div>
     </div>
     
@@ -145,5 +145,13 @@ import BannerPrice from "#content/banner-saeule.svelte";
         @apply text-blue-600 underline hover:text-blue-800 font-semibold;
       }
 
+      .result {
+    @apply opacity-0 transition-opacity duration-1000 ease-in-out;
+  }
+
+  .result[style*="opacity: 1"] {
+    @apply opacity-100;
+  }
+
     </style>
     
\ No newline at end of file

From 89eb72655d8195667092e80629d5888254917adc Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 01:45:05 +0100
Subject: [PATCH 083/165] Widget

---
 src/components/Widget2.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index d92b8243..509e8561 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -87,9 +87,9 @@ import { fade } from 'svelte/transition';
     
       {#if showResult}
       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <div id="OEA_result" class="bg-white p-4 shadow-md rounded">
+        
             <BannerPrice client:load />
-        </div>
+        
       </div>
     {/if}
 

From 79d0433060fd11ba119562e1250e9565187f9873 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 01:52:32 +0100
Subject: [PATCH 084/165] Widget

---
 src/components/Widget2.svelte | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 509e8561..07d70065 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -85,15 +85,18 @@ import { fade } from 'svelte/transition';
         </div>
        </div> 
     
-      {#if showResult}
+     
+
+    {#if showResult}
       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        
-            <BannerPrice client:load />
-        
+        <div id="OEA_result" class="bg-white p-4 shadow-md rounded">
+          <p class="text-gray-800">
+            Sie haben "Einfamilienhaus" und "Vermietung/Verkauf" ausgewählt.
+          </p>
+        </div>
       </div>
     {/if}
 
-
     </div>
     </div>
     

From 68fbb9ec6a9d094d822d1881a9621e11f091eddc Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 02:02:44 +0100
Subject: [PATCH 085/165] Widget

---
 src/components/Widget2.svelte | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 07d70065..9d5d3e57 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -85,7 +85,14 @@ import { fade } from 'svelte/transition';
         </div>
        </div> 
     
-     
+       {#if showResult}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+         
+             <BannerPrice client:load />
+         
+       </div>
+     {/if}
+ 
 
     {#if showResult}
       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
@@ -141,20 +148,20 @@ import { fade } from 'svelte/transition';
           @apply rounded-lg text-gray-700;
         }
     
+        .OEA_item6 {
+        
+        .result {
+         @apply opacity-0 transition-opacity duration-1000 ease-in-out;
+        }
+
+        .result[style*="opacity: 1"] {
+        @apply opacity-100;
+        }
+        }
+
       }
     }
     
-    .empfehlungen a {
-        @apply text-blue-600 underline hover:text-blue-800 font-semibold;
-      }
-
-      .result {
-    @apply opacity-0 transition-opacity duration-1000 ease-in-out;
-  }
-
-  .result[style*="opacity: 1"] {
-    @apply opacity-100;
-  }
 
     </style>
     
\ No newline at end of file

From a45997f50f60f2843ac1377c8aed80b28e0798f9 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 02:08:31 +0100
Subject: [PATCH 086/165] Widget

---
 src/components/Widget2.svelte | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 9d5d3e57..a0a7f354 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -92,17 +92,6 @@ import { fade } from 'svelte/transition';
          
        </div>
      {/if}
- 
-
-    {#if showResult}
-      <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <div id="OEA_result" class="bg-white p-4 shadow-md rounded">
-          <p class="text-gray-800">
-            Sie haben "Einfamilienhaus" und "Vermietung/Verkauf" ausgewählt.
-          </p>
-        </div>
-      </div>
-    {/if}
 
     </div>
     </div>
@@ -148,7 +137,7 @@ import { fade } from 'svelte/transition';
           @apply rounded-lg text-gray-700;
         }
     
-        .OEA_item6 {
+        .OEA_item6 { @apply w-[60] relative;
         
         .result {
          @apply opacity-0 transition-opacity duration-1000 ease-in-out;

From 27f800f508adc3f2bf4db2284ae83f4ba0dddd79 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 10:01:02 +0100
Subject: [PATCH 087/165] Produkte

---
 src/components/Widget2.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index a0a7f354..28343015 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -1,7 +1,10 @@
 
 <script lang="ts">
 
-import BannerPrice from "#content/banner-saeule.svelte";
+import VApromo from "#sidebarCards/card-VA-promo.svelte";
+import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
+import BApromo from "#sidebarCards/card-BA-promo.svelte";
+import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
 import { fade } from 'svelte/transition';
 
   let selectedType: string = "";
@@ -85,13 +88,14 @@ import { fade } from 'svelte/transition';
         </div>
        </div> 
     
-       {#if showResult}
+      
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-         
-             <BannerPrice client:load />
-         
+        {#if showResult} <VApromo client:load /> {/if}
+        {#if showResult} <BApromo client:load /> {/if}
+        {#if showResult} <VAGpromo client:load /> {/if}
+        {#if showResult} <BAGpromo client:load /> {/if}
        </div>
-     {/if}
+    
 
     </div>
     </div>
@@ -137,7 +141,7 @@ import { fade } from 'svelte/transition';
           @apply rounded-lg text-gray-700;
         }
     
-        .OEA_item6 { @apply w-[60] relative;
+        .OEA_item6 { @apply w-full flex flex-row;
         
         .result {
          @apply opacity-0 transition-opacity duration-1000 ease-in-out;

From 63aa2aa37249abfdebd41db7f1737ec144bc45b4 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 10:17:25 +0100
Subject: [PATCH 088/165] Widget

---
 src/components/Widget2.svelte | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 28343015..fb8c9450 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -88,14 +88,29 @@ import { fade } from 'svelte/transition';
         </div>
        </div> 
     
-      
+       {#if showResult}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        {#if showResult} <VApromo client:load /> {/if}
-        {#if showResult} <BApromo client:load /> {/if}
-        {#if showResult} <VAGpromo client:load /> {/if}
-        {#if showResult} <BAGpromo client:load /> {/if}
+        <VApromo client:load /> 
        </div>
-    
+       {/if}
+
+       {#if showResult}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <BApromo client:load />
+       </div>
+       {/if}
+
+       {#if showResult}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <VAGpromo client:load />
+       </div>
+       {/if}
+
+       {#if showResult}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <BAGpromo client:load />
+       </div>
+       {/if}
 
     </div>
     </div>
@@ -141,7 +156,7 @@ import { fade } from 'svelte/transition';
           @apply rounded-lg text-gray-700;
         }
     
-        .OEA_item6 { @apply w-full flex flex-row;
+        .OEA_item6 { @apply w-full flex flex-row space-x-2 mt-5;
         
         .result {
          @apply opacity-0 transition-opacity duration-1000 ease-in-out;

From 20eb27952b73b0c5c83e60ea1bbb9e2cef2e7868 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 10:27:39 +0100
Subject: [PATCH 089/165] Widget

---
 src/components/Widget2.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index fb8c9450..9eb5dfaf 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -88,6 +88,7 @@ import { fade } from 'svelte/transition';
         </div>
        </div> 
     
+       <div class="OEA_zeile2">
        {#if showResult}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
         <VApromo client:load /> 
@@ -111,6 +112,7 @@ import { fade } from 'svelte/transition';
         <BAGpromo client:load />
        </div>
        {/if}
+      </div>
 
     </div>
     </div>
@@ -156,7 +158,7 @@ import { fade } from 'svelte/transition';
           @apply rounded-lg text-gray-700;
         }
     
-        .OEA_item6 { @apply w-full flex flex-row space-x-2 mt-5;
+        .OEA_item6 { @apply w-full;
         
         .result {
          @apply opacity-0 transition-opacity duration-1000 ease-in-out;

From e4fe56b59456ef0d835ae6f4cc5b37666864b1fc Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 10:34:33 +0100
Subject: [PATCH 090/165] Widget

---
 src/components/Widget2.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 9eb5dfaf..bb00f74a 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -88,7 +88,7 @@ import { fade } from 'svelte/transition';
         </div>
        </div> 
     
-       <div class="OEA_zeile2">
+       <div class="OEA_zeile3">
        {#if showResult}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
         <VApromo client:load /> 
@@ -158,7 +158,12 @@ import { fade } from 'svelte/transition';
           @apply rounded-lg text-gray-700;
         }
     
-        .OEA_item6 { @apply w-full;
+
+        .OEA_zeile3  {
+          @apply flex flex-row space-x-2 mt-5;
+        }
+
+        .OEA_item6 {
         
         .result {
          @apply opacity-0 transition-opacity duration-1000 ease-in-out;

From 6f2d8f86ba5949a2f9cf9e9d99eba5a665072468 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 10:45:56 +0100
Subject: [PATCH 091/165] Widget

---
 src/components/Widget2.svelte | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index bb00f74a..75fba831 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -9,7 +9,10 @@ import { fade } from 'svelte/transition';
 
   let selectedType: string = "";
   let selectedReason: string = "";
-  let showResult: boolean = false;
+  let showVA: boolean = false;
+  let showBA: boolean = false;
+  let showVAG: boolean = false;
+  let showBAG: boolean = false;
 
   function handleTypeChange(event: Event) {
     selectedType = (event.target as HTMLSelectElement).value;
@@ -23,7 +26,10 @@ import { fade } from 'svelte/transition';
 
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
-    showResult = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
+    showVA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
+    showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
+    showVAG = selectedType === "Gewerbegebäude" && selectedReason === "Vermietung/Verkauf";
+    showBAG = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
   }
 
 </script>
@@ -89,25 +95,25 @@ import { fade } from 'svelte/transition';
        </div> 
     
        <div class="OEA_zeile3">
-       {#if showResult}
+       {#if showVA}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
         <VApromo client:load /> 
        </div>
        {/if}
 
-       {#if showResult}
+       {#if showBA}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
         <BApromo client:load />
        </div>
        {/if}
 
-       {#if showResult}
+       {#if showVAG}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
         <VAGpromo client:load />
        </div>
        {/if}
 
-       {#if showResult}
+       {#if showBAG}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
         <BAGpromo client:load />
        </div>

From be505995670751260cac4e2b8d3ce637cd4d1554 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 10:54:14 +0100
Subject: [PATCH 092/165] Widget

---
 src/components/Widget2.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 75fba831..26dee6ac 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -166,7 +166,7 @@ import { fade } from 'svelte/transition';
     
 
         .OEA_zeile3  {
-          @apply flex flex-row space-x-2 mt-5;
+          @apply flex flex-row space-x-3 p-3;
         }
 
         .OEA_item6 {

From 52adb2ac68a20896927802514e7eaf713565abac Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 11:02:05 +0100
Subject: [PATCH 093/165] Widget

---
 src/components/Widget2.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 26dee6ac..a84a157d 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -166,7 +166,7 @@ import { fade } from 'svelte/transition';
     
 
         .OEA_zeile3  {
-          @apply flex flex-row space-x-3 p-3;
+          @apply flex flex-row space-x-3 pt-6 self-center;
         }
 
         .OEA_item6 {

From dafb98be657f965b50568735e559bfdc7c496b23 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 11:11:20 +0100
Subject: [PATCH 094/165] Widget

---
 src/components/Widget2.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index a84a157d..446273aa 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -166,7 +166,7 @@ import { fade } from 'svelte/transition';
     
 
         .OEA_zeile3  {
-          @apply flex flex-row space-x-3 pt-6 self-center;
+          @apply flex flex-row space-x-4 pt-6 items-center justify-center;
         }
 
         .OEA_item6 {

From 48a7755c229a548ab1c304ebbacaf48df4032d86 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 12:09:01 +0100
Subject: [PATCH 095/165] Widget

---
 src/components/Widget2.svelte | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 446273aa..ac2c15d1 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -9,7 +9,10 @@ import { fade } from 'svelte/transition';
 
   let selectedType: string = "";
   let selectedReason: string = "";
-  let showVA: boolean = false;
+  let selectedUnits: string = "";
+  let selectedStatus: string = "";
+  let selectedYear: string = "";
+
   let showBA: boolean = false;
   let showVAG: boolean = false;
   let showBAG: boolean = false;
@@ -24,9 +27,36 @@ import { fade } from 'svelte/transition';
     updateResultVisibility();
   }
 
+  function handleUnitsChange(event: Event) {
+    selectedUnits = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function handleStatusChange(event: Event) {
+    selectedStatus = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function handleYearChange(event: Event) {
+    selectedYear = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
+  const allowedReason = ["Vermietung/Verkauf", "sonstiges"];
+
+  // Logik für die Anzeige von showVA
+let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+
+// Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
+if (selectedYear  === "vor 1978") {
+  showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
+}
+
+
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
-    showVA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
+    showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
     showVAG = selectedType === "Gewerbegebäude" && selectedReason === "Vermietung/Verkauf";
     showBAG = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
@@ -61,6 +91,7 @@ import { fade } from 'svelte/transition';
             <option value="Neubau">Neubau</option>
             <option value="Erweiterung">Erweiterung</option>
             <option value="Aushangpflicht">Aushangpflicht</option>
+            <option value="sonstiges">sonstiges z.B. Bank</option>
           </select>
         </div>
        </div>

From d29a0cdc473630614459f3aae662d09e041a9318 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 12:20:26 +0100
Subject: [PATCH 096/165] Widget

---
 src/components/Widget2.svelte | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index ac2c15d1..c715b44b 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -43,20 +43,18 @@ import { fade } from 'svelte/transition';
   }
 
   const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
-  const allowedReason = ["Vermietung/Verkauf", "sonstiges"];
+  const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
 
   // Logik für die Anzeige von showVA
 let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
 
-// Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
-if (selectedYear  === "vor 1978") {
-  showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
-}
-
-
   function updateResultVisibility() {
+    
     // Die Bedingung, um das Ergebnis anzuzeigen
-    showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+    
+    // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
+    if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");}
+  
     showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
     showVAG = selectedType === "Gewerbegebäude" && selectedReason === "Vermietung/Verkauf";
     showBAG = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";

From b8f632794a01ea871507d4236d24f51587648a9b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 12:26:06 +0100
Subject: [PATCH 097/165] Widget

---
 src/components/Widget2.svelte | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index c715b44b..2f9d6c12 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -47,14 +47,12 @@ import { fade } from 'svelte/transition';
 
   // Logik für die Anzeige von showVA
 let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+// Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
+if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");}
 
   function updateResultVisibility() {
-    
     // Die Bedingung, um das Ergebnis anzuzeigen
-    
-    // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
-    if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");}
-  
+    showVA;
     showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
     showVAG = selectedType === "Gewerbegebäude" && selectedReason === "Vermietung/Verkauf";
     showBAG = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";

From 2bfebae15bd6455809d271a0122bdbd83c3f18ec Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 12:37:56 +0100
Subject: [PATCH 098/165] Widget

---
 src/components/Widget2.svelte | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 2f9d6c12..bb8985d7 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -46,13 +46,14 @@ import { fade } from 'svelte/transition';
   const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
 
   // Logik für die Anzeige von showVA
-let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
-// Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
-if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");}
-
+    let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+ 
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
-    showVA;
+     
+    // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
+     if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");}
+    
     showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
     showVAG = selectedType === "Gewerbegebäude" && selectedReason === "Vermietung/Verkauf";
     showBAG = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
@@ -95,7 +96,7 @@ if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr a
       <div class="OEA_zeile2">
         <div class="OEA_item3">
           <div class="OEA_title2">Baujahr</div>
-          <select class="OEA_auswahl2" id="changeBaujahr">
+          <select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
             <option value="" selected disabled>bitte auswählen</option>
             <option value="1">vor 1978</option>
             <option value="0">nach 1977</option>
@@ -104,7 +105,7 @@ if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr a
     
         <div class="OEA_item4">
           <div class="OEA_title2">Wohneinheiten</div>
-          <select class="OEA_auswahl2" id="changeEinheiten">
+          <select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
             <option value="" selected disabled>bitte auswählen</option>
             <option value="1">bis 4 Wohneinheiten</option>
             <option value="0">mehr als 4 Wohneinheiten</option>
@@ -113,7 +114,7 @@ if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr a
     
         <div class="OEA_item5">
           <div class="OEA_title2">Sanierungsstatus</div>
-          <select class="OEA_auswahl2" id="changeStatus">
+          <select class="OEA_auswahl2" id="changeStatus" on:change={handleUnitsChange}>
             <option value="" selected disabled>bitte auswählen</option>
             <option value="0">saniert</option>
             <option value="1">unsaniert</option>

From d9e45b6d0ffd0c2ac8b94bf674797bb06c2174db Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 12:42:49 +0100
Subject: [PATCH 099/165] Widget

---
 src/components/Widget2.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index bb8985d7..266591c6 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -114,7 +114,7 @@ import { fade } from 'svelte/transition';
     
         <div class="OEA_item5">
           <div class="OEA_title2">Sanierungsstatus</div>
-          <select class="OEA_auswahl2" id="changeStatus" on:change={handleUnitsChange}>
+          <select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
             <option value="" selected disabled>bitte auswählen</option>
             <option value="0">saniert</option>
             <option value="1">unsaniert</option>

From cbea351298755063c478c23a8957704695d214b4 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:02:18 +0100
Subject: [PATCH 100/165] Widget

---
 src/components/Widget2.svelte | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 266591c6..2f91602b 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -45,15 +45,22 @@ import { fade } from 'svelte/transition';
   const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
   const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
 
-  // Logik für die Anzeige von showVA
-    let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+  
  
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
      
+    // Logik für die Anzeige von showVA
+    let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
-     if (selectedYear  === "vor 1978") {showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");}
-    
+     if (selectedYear  === "vor 1978") {
+      showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
+    }
+    else
+    {
+      showVA;
+    }
+
     showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
     showVAG = selectedType === "Gewerbegebäude" && selectedReason === "Vermietung/Verkauf";
     showBAG = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";

From d6b4e7f118076ba64f628f5cabf6b09eca03a9d2 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:11:03 +0100
Subject: [PATCH 101/165] Widget

---
 src/components/Widget2.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 2f91602b..04bab6e3 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -44,21 +44,21 @@ import { fade } from 'svelte/transition';
 
   const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
   const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
+  // Logik für die Anzeige von showVA
+  let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
 
   
  
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
      
-    // Logik für die Anzeige von showVA
-    let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
      if (selectedYear  === "vor 1978") {
       showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
     }
     else
     {
-      showVA;
+      showVA = showVA;
     }
 
     showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";

From bfff51a966942968b2395d67b0e9326af775e3b9 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:22:16 +0100
Subject: [PATCH 102/165] Widget

---
 src/components/Widget2.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 04bab6e3..161d324b 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -105,8 +105,8 @@ import { fade } from 'svelte/transition';
           <div class="OEA_title2">Baujahr</div>
           <select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
             <option value="" selected disabled>bitte auswählen</option>
-            <option value="1">vor 1978</option>
-            <option value="0">nach 1977</option>
+            <option value="vor 1978">vor 1978</option>
+            <option value="nach 1977">nach 1977</option>
           </select>
         </div>
     
@@ -114,8 +114,8 @@ import { fade } from 'svelte/transition';
           <div class="OEA_title2">Wohneinheiten</div>
           <select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
             <option value="" selected disabled>bitte auswählen</option>
-            <option value="1">bis 4 Wohneinheiten</option>
-            <option value="0">mehr als 4 Wohneinheiten</option>
+            <option value="bis 4 Wohneinheiten">bis 4 Wohneinheiten</option>
+            <option value="mehr als 4 Wohneinheiten">mehr als 4 Wohneinheiten</option>
           </select>
         </div>
     
@@ -123,8 +123,8 @@ import { fade } from 'svelte/transition';
           <div class="OEA_title2">Sanierungsstatus</div>
           <select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
             <option value="" selected disabled>bitte auswählen</option>
-            <option value="0">saniert</option>
-            <option value="1">unsaniert</option>
+            <option value="saniert">saniert</option>
+            <option value="unsaniert">unsaniert</option>
           </select>
         </div>
        </div> 

From 313b378d82fd72a57e2006431ce8191e1c9b20bd Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:28:46 +0100
Subject: [PATCH 103/165] Widget

---
 src/components/Widget2.svelte | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 161d324b..94158298 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -44,14 +44,12 @@ import { fade } from 'svelte/transition';
 
   const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
   const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
-  // Logik für die Anzeige von showVA
-  let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
-
   
- 
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
      
+    // Logik für die Anzeige von showVA
+    let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
      if (selectedYear  === "vor 1978") {
       showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");

From dbdaa0c52e9df4ecbdb8b6bd24637ecc75773742 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:32:59 +0100
Subject: [PATCH 104/165] Widget

---
 src/components/Widget2.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 94158298..11314e87 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -16,6 +16,7 @@ import { fade } from 'svelte/transition';
   let showBA: boolean = false;
   let showVAG: boolean = false;
   let showBAG: boolean = false;
+  let showVA: boolean = false;
 
   function handleTypeChange(event: Event) {
     selectedType = (event.target as HTMLSelectElement).value;
@@ -48,15 +49,13 @@ import { fade } from 'svelte/transition';
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
      
-    // Logik für die Anzeige von showVA
-    let showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
      if (selectedYear  === "vor 1978") {
-      showVA = showVA && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
+      showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
     }
     else
     {
-      showVA = showVA;
+      showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     }
 
     showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";

From a5c65293502ee594db7d7f02f372a29eb6043b2b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 15:11:28 +0100
Subject: [PATCH 105/165] Widget

---
 src/components/Widget2.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 11314e87..63fe445c 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -44,7 +44,9 @@ import { fade } from 'svelte/transition';
   }
 
   const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
+  const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
   const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
+  // const allowedReasonBau = ["Modernisierung", "Neubau", "Erweiterung"];
   
   function updateResultVisibility() {
     // Die Bedingung, um das Ergebnis anzuzeigen
@@ -58,9 +60,9 @@ import { fade } from 'svelte/transition';
       showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     }
 
-    showBA = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
-    showVAG = selectedType === "Gewerbegebäude" && selectedReason === "Vermietung/Verkauf";
-    showBAG = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
+    showBA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+    showVAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
+    showBAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
   }
 
 </script>

From bfaf3f75ac60d9bfb5862e4da0bd3b5653982714 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 15:39:27 +0100
Subject: [PATCH 106/165] Widget

---
 src/components/Widget2.svelte                 |  2 +-
 .../design/content/card-BA-widget.svelte      |  0
 .../design/content/card-BAG-widget.svelte     |  0
 .../design/content/card-VA-widget.svelte      | 25 +++++++++++++++++++
 .../design/content/card-VAG-widget.svelte     |  0
 5 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/design/content/card-BA-widget.svelte
 create mode 100644 src/components/design/content/card-BAG-widget.svelte
 create mode 100644 src/components/design/content/card-VA-widget.svelte
 create mode 100644 src/components/design/content/card-VAG-widget.svelte

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 63fe445c..37601363 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -1,7 +1,7 @@
 
 <script lang="ts">
 
-import VApromo from "#sidebarCards/card-VA-promo.svelte";
+import VApromo from "card-VA-promo.svelte";
 import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
 import BApromo from "#sidebarCards/card-BA-promo.svelte";
 import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/design/content/card-BAG-widget.svelte b/src/components/design/content/card-BAG-widget.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
new file mode 100644
index 00000000..41e616f6
--- /dev/null
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-VA-promo" 
+	class="	box card bg-white px-6 py-4 mb-5">
+
+	<div class="grid">
+
+	<h2>Verbrauchsausweis Wohngebäude</h2>
+	<hr class="mb-4">
+	<img class="w-[40%] justify-self-left !min-w-[500px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+	<p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
+	<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
+			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+					hover:bg-primary
+			" >jetzt online erstellen</a>
+	</div>
+</div>
+
+
+<style lang="scss">
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/design/content/card-VAG-widget.svelte b/src/components/design/content/card-VAG-widget.svelte
new file mode 100644
index 00000000..e69de29b

From 25117c5270027268facd58426725ebb19819f9ab Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 15:45:45 +0100
Subject: [PATCH 107/165] Widget

---
 src/components/Widget2.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
index 37601363..7bfd4e1a 100644
--- a/src/components/Widget2.svelte
+++ b/src/components/Widget2.svelte
@@ -1,10 +1,10 @@
 
 <script lang="ts">
 
-import VApromo from "card-VA-promo.svelte";
-import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
-import BApromo from "#sidebarCards/card-BA-promo.svelte";
-import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
+import VApromo from  "#content/card-VA-widget.svelte";
+import VAGpromo from "#content/card-VAG-widget.svelte";
+import BApromo from  "#content/card-BA-widget.svelte";
+import BAGpromo from  "#content/card-BAG-widget.svelte";
 import { fade } from 'svelte/transition';
 
   let selectedType: string = "";

From d38853efab8d97eb9a48ed22b17f7a7d3305ed9a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:00:03 +0100
Subject: [PATCH 108/165] Widget neu!!

---
 src/components/Widget.svelte                  | 908 ++++--------------
 src/components/Widget2.svelte                 | 222 -----
 .../design/content/card-BA-widget.svelte      |  24 +
 .../design/content/card-BAG-widget.svelte     |  25 +
 .../design/content/card-VA-widget.svelte      |   3 +-
 .../design/content/card-VAG-widget.svelte     |  25 +
 .../energieausweis-erstellen/index.astro      |   2 +-
 7 files changed, 286 insertions(+), 923 deletions(-)
 delete mode 100644 src/components/Widget2.svelte

diff --git a/src/components/Widget.svelte b/src/components/Widget.svelte
index 51b684e8..7bfd4e1a 100644
--- a/src/components/Widget.svelte
+++ b/src/components/Widget.svelte
@@ -1,710 +1,222 @@
+
 <script lang="ts">
-	let gebaeudetyp: string = "";
-	let anlass: string = "";
-	let result: string = "";
-	let hasAushangpflicht: boolean = true;
 
-	$: result = gebaeudetyp + " " + anlass;
+import VApromo from  "#content/card-VA-widget.svelte";
+import VAGpromo from "#content/card-VAG-widget.svelte";
+import BApromo from  "#content/card-BA-widget.svelte";
+import BAGpromo from  "#content/card-BAG-widget.svelte";
+import { fade } from 'svelte/transition';
 
-	$: if (
-		gebaeudetyp == "Einfamilienhaus" ||
-		gebaeudetyp == "Zweifamilienhaus" ||
-		gebaeudetyp == "Mehrfamilienhaus"
-	) {
-		hasAushangpflicht = false;
-	} else if (
-		gebaeudetyp == "Gewerbegebäude" ||
-		gebaeudetyp == "Mischgebäude"
-	) {
-		hasAushangpflicht = true;
-	}
+  let selectedType: string = "";
+  let selectedReason: string = "";
+  let selectedUnits: string = "";
+  let selectedStatus: string = "";
+  let selectedYear: string = "";
+
+  let showBA: boolean = false;
+  let showVAG: boolean = false;
+  let showBAG: boolean = false;
+  let showVA: boolean = false;
+
+  function handleTypeChange(event: Event) {
+    selectedType = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function handleReasonChange(event: Event) {
+    selectedReason = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function handleUnitsChange(event: Event) {
+    selectedUnits = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function handleStatusChange(event: Event) {
+    selectedStatus = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  function handleYearChange(event: Event) {
+    selectedYear = (event.target as HTMLSelectElement).value;
+    updateResultVisibility();
+  }
+
+  const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
+  const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
+  const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
+  // const allowedReasonBau = ["Modernisierung", "Neubau", "Erweiterung"];
+  
+  function updateResultVisibility() {
+    // Die Bedingung, um das Ergebnis anzuzeigen
+     
+    // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
+     if (selectedYear  === "vor 1978") {
+      showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
+    }
+    else
+    {
+      showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+    }
+
+    showBA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+    showVAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
+    showBAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
+  }
 
-	var VA =
-		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen";
-	var VANW =
-		"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen";
-	var BA =
-		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen";
-	var BANW =
-		"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen";
 </script>
 
-<div class="border p-4 rounded-lg bg-base-200 border-base-300 my-4">
-	<div class="w-full grid grid-cols-2 gap-4">
-		<div>
-			<div>Gebäudetyp</div>
-			<select
-				class="select select-bordered text-base-content text-lg px-4 py-2"
-				bind:value={gebaeudetyp}
-			>
-				<option value="" selected disabled>Bitte Auswählen</option>
-				<option value="Einfamilienhaus">Einfamilienhaus</option>
-				<option value="Zweifamilienhaus">Zweifamilienhaus</option>
-				<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
-				<option value="Gewerbegebäude">Gewerbegebäude</option>
-				<option value="Mischgebäude">Mischgebäude</option>
-			</select>
-		</div>
+     <div id="OEA_widget">
+      <input id="recode" type="hidden" value="widgetvorlage">
+    
+    <div id="OEA_input">
+    
+     <div class="OEA_zeile1">
+        <div class="OEA_item1">
+        <div class="OEA_title1">Gebäudetyp</div>
+        <select class="OEA_auswahl1" id="OEA_changeTyp" on:change={handleTypeChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="Einfamilienhaus">Einfamilienhaus</option>
+            <option value="Zweifamilienhaus">Zweifamilienhaus</option>
+            <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+            <option value="Gewerbegebäude">Gewerbegebäude</option>
+            <option value="Mischgebäude">Mischgebäude</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item2">
+          <div class="OEA_title1">Anlass</div>
+          <select class="OEA_auswahl1" id="OEA_changeAnlass" on:change={handleReasonChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
+            <option value="Modernisierung">Modernisierung</option>
+            <option value="Neubau">Neubau</option>
+            <option value="Erweiterung">Erweiterung</option>
+            <option value="Aushangpflicht">Aushangpflicht</option>
+            <option value="sonstiges">sonstiges z.B. Bank</option>
+          </select>
+        </div>
+       </div>
+    
+      <div class="OEA_zeile2">
+        <div class="OEA_item3">
+          <div class="OEA_title2">Baujahr</div>
+          <select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="vor 1978">vor 1978</option>
+            <option value="nach 1977">nach 1977</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item4">
+          <div class="OEA_title2">Wohneinheiten</div>
+          <select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="bis 4 Wohneinheiten">bis 4 Wohneinheiten</option>
+            <option value="mehr als 4 Wohneinheiten">mehr als 4 Wohneinheiten</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item5">
+          <div class="OEA_title2">Sanierungsstatus</div>
+          <select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="saniert">saniert</option>
+            <option value="unsaniert">unsaniert</option>
+          </select>
+        </div>
+       </div> 
+    
+       <div class="OEA_zeile3">
+       {#if showVA}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <VApromo client:load /> 
+       </div>
+       {/if}
 
-		<div>
-			<div>Anlass</div>
-			<select
-				class="select select-bordered text-base-content text-lg px-4 py-2"
-				bind:value={anlass}
-			>
-				<option value="" selected disabled>Bitte Auswählen</option>
-				<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
-				<option value="Modernisierung">Modernisierung</option>
-				<option value="Neubau">Neubau</option>
-				<option value="Erweiterung">Erweiterung</option>
-				{#if hasAushangpflicht}
-					<option value="Aushangpflicht" id="aP"
-						>Aushangpflicht</option
-					>
-				{/if}
-			</select>
-		</div>
-	</div>
+       {#if showBA}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <BApromo client:load />
+       </div>
+       {/if}
 
-	<br />
+       {#if showVAG}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <VAGpromo client:load />
+       </div>
+       {/if}
 
-	<div class="text-lg">
-		{#if gebaeudetyp == "Einfamilienhaus" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Einfamilienhaus vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für
-				<span class="hilite">Wohngebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-				Abrechnugsjahre vorliegen, und es gab dazwischen keine
-				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg my-2" href={VA} target="_blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BA} target="_blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Einfamilienhaus eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Einfamilienhaus bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				>
-				ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-				müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Einfamilienhaus eine Erweiterung planen,
-				benötigen Sie einen
-				<span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Zweifamilienhaus vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-				Abrechnugsjahre vorliegen, und es gab dazwischen keine
-				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VA} target="blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Zweifamilienhaus eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Zweifamilienhaus bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-				müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Zweifamilienhaus eine Erweiterung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Mehrfamilienhaus vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In den
-				meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
-				Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
-				erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
-				benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
-				Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
-				Abrechnugsjahre vorliegen, und es gab dazwischen keine
-				grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
-				steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
-				/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
-				es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
-				oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
-				Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
-				weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
-				unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
-				sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VA} target="blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Mehrfamilienhaus eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Neubau"}
-			Wenn
-			<p>
-				Sie ein Mehrfamilienhaus bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
-				müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Mehrfamilienhaus eine Erweiterung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Gewerbegebäude vermieten oder verkaufen wollen,
-				haben Sie die Wahl zwischen einem <span class="hilite"
-					>Verbrauchsausweis</span
-				>
-				für <span class="hilite">Gewerbegebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
-				Vermietung oder Verkauf Ihrer Gewerbeimmobilie können Sie den
-				einfacheren Energieausweis (Verbrauchsausweis) erstellen lassen.
-				Der gewerbliche Verbrauchsausweis benötigt als
-				Berechnungsgrundlage den Stromverbrauch und den
-				Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
-				Jahre der Heizenergieabrechnugen und der Stromabrechnung des
-				Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
-				vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
-				dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
-				keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
-				während dieses Zeitraums durchgeführt worden sein. Wenn diese
-				Voraussetzungen nicht vorliegen, oder keine vollständigen
-				Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
-				sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
-				werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			>
-			(Empfehlung)<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Gewerbegebäude eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-				der aktuellen EnEV ist geregelt, wie bei Änderungen im
-				Baubestand zu verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Gewerbegebäude bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Gewerbe</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§4 EnEV"
-					target="blank">§4 EnEV</a
-				> ist geregelt welche Anforderungen für Gewerbegebäude eingehalten
-				werden müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Gewerbegebäude eine Erweiterung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-				der aktuellen EnEV ist geregelt, wie bei Änderungen im
-				Baubestand zu verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Aushangpflicht"}
-			<p>
-				Bei starkem Publikumsverkehr in Ihrem Gewerbegebäude benötigen
-				Sie einen
-				<span class="hilite">Verbrauchsausweis</span> für
-				<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			> (Empfehlung)
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Vermietung/Verkauf"}
-			<p>
-				Wenn Sie Ihr Mischgebäude vermieten oder verkaufen wollen, haben
-				Sie für den nichtgewerblichen Teil die Wahl zwischen einem
-				<span class="hilite">Verbrauchsausweis</span> für
-				<span class="hilite">Wohngebäude</span>
-				und einem <span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Wohngebäude</span>
-				und für den gewerblichen Teil die Wahl zwischen einem
-				<span class="hilite">Verbrauchsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span> und einem
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br /><span
-					class="red">Für den nichtgewerblichen Teil gilt:</span
-				><br />In den meisten Fällen können Sie bei Vermietung oder
-				Verkauf Ihrer Immobilie den einfacheren Energieausweis
-				(Verbrauchsausweis) erstellen lassen. Dieser Ausweis ist
-				verbrauchsorientiert und benötigt als Berechnungsgrundlage 3
-				zusammenhängende Jahre der Heizenergieabrechnugen des Gebäudes.
-				Wenn Ihnen also diese 3 Abrechnugsjahre vorliegen, und es gab
-				dazwischen keine grundlegenden Sanierungsmaßnahmen bzw.
-				Heizungsaustausch, dann steht der Nutzung eines
-				Verbrauchsausweises nichts im Weg.<br /><br />Laut EnEV gibt es
-				nur eine rechtliche Ausnahme, bei der es nicht zulässig ist
-				einen Verbrauchsausweis bei Vermietung oder Verkauf zu
-				verwenden. Dies ist dann der Fall, wenn Ihr Gebäude gänzlich
-				unsaniert ist, vor 1978 gebaut wurde und weniger als 5
-				Wohneinheiten besitzt. In diesem Fall oder bei unvollständigen
-				Verbrauchsabrechnungen (z.B. bei Leerstand), sollte ein
-				Bedarfsausweis für Wohngebäude erstellt werden.<br /><span
-					class="red">Für den gewerblichen Teil gilt:</span
-				><br />Bei Vermietung oder Verkauf Ihrer Gewerbeimmobilie können
-				Sie den einfacheren Energieausweis (Verbrauchsausweis) erstellen
-				lassen. Der gewerbliche Verbrauchsausweis benötigt als
-				Berechnungsgrundlage den Stromverbrauch und den
-				Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
-				Jahre der Heizenergieabrechnugen und der Stromabrechnung des
-				Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
-				vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
-				dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
-				keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
-				während dieses Zeitraums durchgeführt worden sein. Wenn diese
-				Voraussetzungen nicht vorliegen, oder keine vollständigen
-				Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
-				sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
-				werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VA} target="blank"
-				>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
-			>
-			(Empfehlung)
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			>
-			(Empfehlung)
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Modernisierung"}
-			<p>
-				Wenn Sie bei Ihrem Mischgebäude eine Modernisierung planen,
-				benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Wohngebäude</span> und einen
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
-				der aktuellen EnEV ist geregelt, wie bei Änderungen im
-				Baubestand zu verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Neubau"}
-			<p>
-				Wenn Sie ein Mischgebäude bauen wollen, benötigen Sie einen <span
-					class="hilite">Bedarfsausweis</span
-				>
-				für <span class="hilite">Wohngebäude</span> und einen
-				<span class="hilite">Bedarfsausweis</span>
-				für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
-				genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
-				vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
-				zu erstellen. Aus der EnEV-Berechnung kann später, nach
-				Fertigstellung, der Bedarfsausweis erstellt werden. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§3 EnEV"
-					target="blank">§3 EnEV</a
-				>
-				ist geregelt welche Anforderungen für Wohngebäude, und in
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§4 EnEV"
-					target="blank">§4 EnEV</a
-				> welche Anforderungen für Gewerbegebäude eingehalten werden müssen.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Erweiterung"}
-			<p>
-				Wenn Sie bei Ihrem Mischgebäude eine Erweiterung planen,
-				benötigen Sie einen
-				<span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Wohngebäude</span>
-				und einen <span class="hilite">Bedarfsausweis</span> für
-				<span class="hilite">Gewerbegebäude</span>.<br /><br />In der
-				aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
-				verfahren ist. In
-				<a
-					href="https://online-energieausweis.org/enev/"
-					title="§9 EnEV"
-					target="blank">§9 EnEV</a
-				> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
-				Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
-				beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
-				werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
-				wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
-				kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
-				Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
-				durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
-				nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
-				ein Bedarfsausweis erstellt werden.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={BA} target="blank"
-				>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
-			>
-			<br />
-			<a class="btn btn-primary text-lg" href={BANW} target="blank"
-				>Jetzt Bedarfsausweis Gewerbe online anfragen</a
-			>
-		{:else if gebaeudetyp == "Mischgebäude" && anlass == "Aushangpflicht"}
-			<p>
-				Bei starkem Publikumsverkehr in Ihrem Mischgebäude benötigen Sie
-				einen <span class="hilite">Verbrauchsausweis</span> für
-				<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
-			</p>
-			<br />
-			<a class="btn btn-primary text-lg" href={VANW} target="blank"
-				>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
-			> (Empfehlung)
-		{/if}
-	</div>
+       {#if showBAG}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <BAGpromo client:load />
+       </div>
+       {/if}
+      </div>
 
-	<div>
-		<hr />
-		<div>
-			<div>
-				<a
-					href="https://online-energieausweis.org?aa=LOGO&recode=online-energieausweis.org"
-					title="IB Cornelsen"
-				>
-					<img
-						src="/images/header/logo-big.svg"
-						alt=""
-						width="100px"
-					/></a
-				>
-			</div>
-		</div>
-	</div>
-</div>
+    </div>
+    </div>
+    
+    
+    <style lang="scss">
+    
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    
+    #OEA_widget {
+      @apply bg-gray-100 p-4 shadow-xl;
+    
+      #OEA_input {  @apply space-y-2;
+    
+    
+        .OEA_zeile1, .OEA_zeile2  {
+             @apply flex flex-row space-x-2;
+      
+        .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
+          @apply w-full;
+    
+          .OEA_title1, .OEA_title2 {
+            @apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
+          }
+        }
+       }
+      
+        .OEA_title1 {
+          @apply bg-secondary;
+        }
+    
+        .OEA_title2 {
+          @apply bg-primary;
+        }
+    
+        .OEA_auswahl1, .OEA_auswahl2 {
+          @apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
+        }
+    
+        #OEA_result {
+          @apply rounded-lg text-gray-700;
+        }
+    
 
+        .OEA_zeile3  {
+          @apply flex flex-row space-x-4 pt-6 items-center justify-center;
+        }
 
-<style>
-	.hilite {
-		@apply font-bold;
-	}
-</style>
\ No newline at end of file
+        .OEA_item6 {
+        
+        .result {
+         @apply opacity-0 transition-opacity duration-1000 ease-in-out;
+        }
+
+        .result[style*="opacity: 1"] {
+        @apply opacity-100;
+        }
+        }
+
+      }
+    }
+    
+
+    </style>
+    
\ No newline at end of file
diff --git a/src/components/Widget2.svelte b/src/components/Widget2.svelte
deleted file mode 100644
index 7bfd4e1a..00000000
--- a/src/components/Widget2.svelte
+++ /dev/null
@@ -1,222 +0,0 @@
-
-<script lang="ts">
-
-import VApromo from  "#content/card-VA-widget.svelte";
-import VAGpromo from "#content/card-VAG-widget.svelte";
-import BApromo from  "#content/card-BA-widget.svelte";
-import BAGpromo from  "#content/card-BAG-widget.svelte";
-import { fade } from 'svelte/transition';
-
-  let selectedType: string = "";
-  let selectedReason: string = "";
-  let selectedUnits: string = "";
-  let selectedStatus: string = "";
-  let selectedYear: string = "";
-
-  let showBA: boolean = false;
-  let showVAG: boolean = false;
-  let showBAG: boolean = false;
-  let showVA: boolean = false;
-
-  function handleTypeChange(event: Event) {
-    selectedType = (event.target as HTMLSelectElement).value;
-    updateResultVisibility();
-  }
-
-  function handleReasonChange(event: Event) {
-    selectedReason = (event.target as HTMLSelectElement).value;
-    updateResultVisibility();
-  }
-
-  function handleUnitsChange(event: Event) {
-    selectedUnits = (event.target as HTMLSelectElement).value;
-    updateResultVisibility();
-  }
-
-  function handleStatusChange(event: Event) {
-    selectedStatus = (event.target as HTMLSelectElement).value;
-    updateResultVisibility();
-  }
-
-  function handleYearChange(event: Event) {
-    selectedYear = (event.target as HTMLSelectElement).value;
-    updateResultVisibility();
-  }
-
-  const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
-  const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
-  const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
-  // const allowedReasonBau = ["Modernisierung", "Neubau", "Erweiterung"];
-  
-  function updateResultVisibility() {
-    // Die Bedingung, um das Ergebnis anzuzeigen
-     
-    // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
-     if (selectedYear  === "vor 1978") {
-      showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
-    }
-    else
-    {
-      showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
-    }
-
-    showBA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
-    showVAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
-    showBAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
-  }
-
-</script>
-
-     <div id="OEA_widget">
-      <input id="recode" type="hidden" value="widgetvorlage">
-    
-    <div id="OEA_input">
-    
-     <div class="OEA_zeile1">
-        <div class="OEA_item1">
-        <div class="OEA_title1">Gebäudetyp</div>
-        <select class="OEA_auswahl1" id="OEA_changeTyp" on:change={handleTypeChange}>
-            <option value="" selected disabled>bitte auswählen</option>
-            <option value="Einfamilienhaus">Einfamilienhaus</option>
-            <option value="Zweifamilienhaus">Zweifamilienhaus</option>
-            <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
-            <option value="Gewerbegebäude">Gewerbegebäude</option>
-            <option value="Mischgebäude">Mischgebäude</option>
-          </select>
-        </div>
-    
-        <div class="OEA_item2">
-          <div class="OEA_title1">Anlass</div>
-          <select class="OEA_auswahl1" id="OEA_changeAnlass" on:change={handleReasonChange}>
-            <option value="" selected disabled>bitte auswählen</option>
-            <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
-            <option value="Modernisierung">Modernisierung</option>
-            <option value="Neubau">Neubau</option>
-            <option value="Erweiterung">Erweiterung</option>
-            <option value="Aushangpflicht">Aushangpflicht</option>
-            <option value="sonstiges">sonstiges z.B. Bank</option>
-          </select>
-        </div>
-       </div>
-    
-      <div class="OEA_zeile2">
-        <div class="OEA_item3">
-          <div class="OEA_title2">Baujahr</div>
-          <select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
-            <option value="" selected disabled>bitte auswählen</option>
-            <option value="vor 1978">vor 1978</option>
-            <option value="nach 1977">nach 1977</option>
-          </select>
-        </div>
-    
-        <div class="OEA_item4">
-          <div class="OEA_title2">Wohneinheiten</div>
-          <select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
-            <option value="" selected disabled>bitte auswählen</option>
-            <option value="bis 4 Wohneinheiten">bis 4 Wohneinheiten</option>
-            <option value="mehr als 4 Wohneinheiten">mehr als 4 Wohneinheiten</option>
-          </select>
-        </div>
-    
-        <div class="OEA_item5">
-          <div class="OEA_title2">Sanierungsstatus</div>
-          <select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
-            <option value="" selected disabled>bitte auswählen</option>
-            <option value="saniert">saniert</option>
-            <option value="unsaniert">unsaniert</option>
-          </select>
-        </div>
-       </div> 
-    
-       <div class="OEA_zeile3">
-       {#if showVA}
-       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <VApromo client:load /> 
-       </div>
-       {/if}
-
-       {#if showBA}
-       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <BApromo client:load />
-       </div>
-       {/if}
-
-       {#if showVAG}
-       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <VAGpromo client:load />
-       </div>
-       {/if}
-
-       {#if showBAG}
-       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <BAGpromo client:load />
-       </div>
-       {/if}
-      </div>
-
-    </div>
-    </div>
-    
-    
-    <style lang="scss">
-    
-    @tailwind base;
-    @tailwind components;
-    @tailwind utilities;
-    
-    #OEA_widget {
-      @apply bg-gray-100 p-4 shadow-xl;
-    
-      #OEA_input {  @apply space-y-2;
-    
-    
-        .OEA_zeile1, .OEA_zeile2  {
-             @apply flex flex-row space-x-2;
-      
-        .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
-          @apply w-full;
-    
-          .OEA_title1, .OEA_title2 {
-            @apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
-          }
-        }
-       }
-      
-        .OEA_title1 {
-          @apply bg-secondary;
-        }
-    
-        .OEA_title2 {
-          @apply bg-primary;
-        }
-    
-        .OEA_auswahl1, .OEA_auswahl2 {
-          @apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
-        }
-    
-        #OEA_result {
-          @apply rounded-lg text-gray-700;
-        }
-    
-
-        .OEA_zeile3  {
-          @apply flex flex-row space-x-4 pt-6 items-center justify-center;
-        }
-
-        .OEA_item6 {
-        
-        .result {
-         @apply opacity-0 transition-opacity duration-1000 ease-in-out;
-        }
-
-        .result[style*="opacity: 1"] {
-        @apply opacity-100;
-        }
-        }
-
-      }
-    }
-    
-
-    </style>
-    
\ No newline at end of file
diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index e69de29b..de71586a 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-BA-promo" 
+    class="	box card bg-white px-6 py-4 mb-5">
+
+    <div class="grid">
+
+    <h2>Bedarfssausweis Wohngebäude</h2>
+    <hr class="mb-4">
+    <img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+    <p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
+    <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >jetzt online erstellen</a>
+    </div>
+</div>
+
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/design/content/card-BAG-widget.svelte b/src/components/design/content/card-BAG-widget.svelte
index e69de29b..5d5cd42d 100644
--- a/src/components/design/content/card-BAG-widget.svelte
+++ b/src/components/design/content/card-BAG-widget.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-BA-G-promo" 
+class="	box card hidden bg-white px-6 py-4 mb-5
+        lg:block">
+
+<div class="grid">
+
+<h2>Bedarfssausweis Gewerbe</h2>
+<hr class="mb-4">
+<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
+<p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
+<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo" 
+        class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                hover:bg-primary
+        " >jetzt online erstellen</a>
+</div>
+</div>
+
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 41e616f6..77d2b2fc 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -9,7 +9,7 @@
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>
 	<hr class="mb-4">
-	<img class="w-[40%] justify-self-left !min-w-[500px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+	<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
 	<p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
 			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
@@ -21,5 +21,4 @@
 
 <style lang="scss">
 
-
 </style>
\ No newline at end of file
diff --git a/src/components/design/content/card-VAG-widget.svelte b/src/components/design/content/card-VAG-widget.svelte
index e69de29b..d07f792a 100644
--- a/src/components/design/content/card-VAG-widget.svelte
+++ b/src/components/design/content/card-VAG-widget.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-VA-G-promo" 
+	class="	box card bg-white px-6 py-4 mb-5">
+
+	<div class="grid">
+
+	<h2>Verbrauchsausweis Gewerbe</h2>
+	<hr class="mb-4">
+	<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
+	<p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
+	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
+			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+					hover:bg-primary
+			" >jetzt online erstellen</a>
+	</div>
+</div>
+
+
+<style lang="scss">
+
+
+</style>
diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 786ef465..6547839b 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,7 +1,7 @@
 ---
 
 import Layout from "#layouts/Layout.astro";
-import Widget2 from "#components/Widget2.svelte";
+import Widget2 from "#components/Widget.svelte";
 
 ---
 

From 7cf55353ae1a1fd054c4266eb32381b1d890428e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:14:32 +0100
Subject: [PATCH 109/165] Widget

---
 .../design/content/card-BA-widget.svelte      | 17 +++++++++----
 .../design/content/card-BAG-widget.svelte     | 25 ++++++++-----------
 .../design/content/card-VA-widget.svelte      |  6 ++---
 .../design/content/card-VAG-widget.svelte     |  6 ++---
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index de71586a..59ae774d 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -2,19 +2,26 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-promo" 
-    class="	box card bg-white px-6 py-4 mb-5">
-
+<div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5">
     <div class="grid">
 
     <h2>Bedarfssausweis Wohngebäude</h2>
     <hr class="mb-4">
-    <img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-    <p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
+    
+    <div class="flex flex-row">
+        <div>
+            <img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
+        </div>
+    </div>
+    
     <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
             class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                     hover:bg-primary
             " >jetzt online erstellen</a>
+
     </div>
 </div>
 
diff --git a/src/components/design/content/card-BAG-widget.svelte b/src/components/design/content/card-BAG-widget.svelte
index 5d5cd42d..1be073d1 100644
--- a/src/components/design/content/card-BAG-widget.svelte
+++ b/src/components/design/content/card-BAG-widget.svelte
@@ -2,21 +2,18 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-G-promo" 
-class="	box card hidden bg-white px-6 py-4 mb-5
-        lg:block">
+<div id ="card-BA-G-promo" class="box card bg-white px-6 py-4 mb-5">
+    <div class="grid">
 
-<div class="grid">
-
-<h2>Bedarfssausweis Gewerbe</h2>
-<hr class="mb-4">
-<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
-<p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
-<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo" 
-        class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
-                hover:bg-primary
-        " >jetzt online erstellen</a>
-</div>
+    <h2>Bedarfssausweis Gewerbe</h2>
+    <hr class="mb-4">
+    <img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
+    <p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
+    <a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >jetzt online erstellen</a>
+    </div>
 </div>
 
 
diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 77d2b2fc..34c3c6d8 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -2,15 +2,13 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-promo" 
-	class="	box card bg-white px-6 py-4 mb-5">
-
+<div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
 	<div class="grid">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>
 	<hr class="mb-4">
 	<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-	<p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
+	<p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
 			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
 					hover:bg-primary
diff --git a/src/components/design/content/card-VAG-widget.svelte b/src/components/design/content/card-VAG-widget.svelte
index d07f792a..5b1c3d7f 100644
--- a/src/components/design/content/card-VAG-widget.svelte
+++ b/src/components/design/content/card-VAG-widget.svelte
@@ -2,15 +2,13 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-G-promo" 
-	class="	box card bg-white px-6 py-4 mb-5">
-
+<div id ="card-VA-G-promo" class="box card bg-white px-6 py-4 mb-5">
 	<div class="grid">
 
 	<h2>Verbrauchsausweis Gewerbe</h2>
 	<hr class="mb-4">
 	<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
-	<p class="promo tracking-tighter text-3xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
+	<p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
 			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
 					hover:bg-primary

From 207caa103a85fefd4a03c1de1a020eb617bec22b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:20:52 +0100
Subject: [PATCH 110/165] Widget

---
 src/components/design/content/card-BA-widget.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index 59ae774d..aca34bf1 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -10,10 +10,10 @@
     
     <div class="flex flex-row">
         <div>
-            <img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <img class="justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
         </div>
         <div>
-        <p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
         </div>
     </div>
     

From 4141e210696cbcbf124494a6668887cc06e60b63 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:28:09 +0100
Subject: [PATCH 111/165] Widget

---
 src/components/design/content/card-BA-widget.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index aca34bf1..188a1b9b 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -8,9 +8,9 @@
     <h2>Bedarfssausweis Wohngebäude</h2>
     <hr class="mb-4">
     
-    <div class="flex flex-row">
+    <div class="flex flex-row mb-6">
         <div>
-            <img class="justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <img class="w-[100%]  justify-self-left !min-w-[50px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
         </div>
         <div>
         <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>

From 71412b4cae9727129a1935cd6c5b09bacbc500a5 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:46:55 +0100
Subject: [PATCH 112/165] Widget

---
 src/components/design/content/card-BA-widget.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index 188a1b9b..ea0b7b81 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -3,14 +3,14 @@
 </script>
 	
 <div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5">
-    <div class="grid">
+    <div class="">
 
     <h2>Bedarfssausweis Wohngebäude</h2>
-    <hr class="mb-4">
+    <hr class="mb-2">
     
-    <div class="flex flex-row mb-6">
+    <div class="flex flex-row mb-2 w-full items-end">
         <div>
-            <img class="w-[100%]  justify-self-left !min-w-[50px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
         </div>
         <div>
         <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>

From 3179e8d3a268375257ba9183c985696ebc15226e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:53:32 +0100
Subject: [PATCH 113/165] Widget

---
 src/components/design/content/card-BA-widget.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index ea0b7b81..a7ee480c 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -8,7 +8,7 @@
     <h2>Bedarfssausweis Wohngebäude</h2>
     <hr class="mb-2">
     
-    <div class="flex flex-row mb-2 w-full items-end">
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
         <div>
             <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
         </div>
@@ -16,6 +16,15 @@
         <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
         </div>
     </div>
+
+    <div class="white box">
+        <div class="variante">fundiert</div>
+        <div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad&nbsp;der&nbsp;Heizung.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung&nbsp;und&nbsp;Neubau.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und&nbsp;unsanierte&nbsp;Objekte.</div><div class="check">✔</div></div>
+        <div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen&nbsp;werden.</div><div class="check">✔</div></div>
+        <div class="services"><div>Objektive  Berechnung die für die Kreditunterlagen besser&nbsp;geeignet&nbsp;ist.</div><div class="check">✔</div></div>
+    </div>
     
     <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
             class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]

From 8c63274a22cddc2389e7129259706cd7cae1ee20 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:04:44 +0100
Subject: [PATCH 114/165] Widget

---
 .../design/content/card-BA-widget.svelte      | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index a7ee480c..f8f427e6 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -19,11 +19,11 @@
 
     <div class="white box">
         <div class="variante">fundiert</div>
-        <div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad&nbsp;der&nbsp;Heizung.</div><div class="check">✔</div></div>
-        <div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung&nbsp;und&nbsp;Neubau.</div><div class="check">✔</div></div>
-        <div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und&nbsp;unsanierte&nbsp;Objekte.</div><div class="check">✔</div></div>
-        <div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen&nbsp;werden.</div><div class="check">✔</div></div>
-        <div class="services"><div>Objektive  Berechnung die für die Kreditunterlagen besser&nbsp;geeignet&nbsp;ist.</div><div class="check">✔</div></div>
+        <div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig auch fürunsanierte Objekte.</div><div class="check">✔</div></div>
+        <div class="services"><div>Kann als Grundlage für ISFP dienen.</div><div class="check">✔</div></div>
+        <div class="services"><div>Objektivere  Berechnung.</div><div class="check">✔</div></div>
     </div>
     
     <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
@@ -36,5 +36,17 @@
 
 
 <style lang="scss">
+#card-BA-promo{
 
+
+.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
+
+.variante{@apply w-fit text-black justify-self-end mr-4}
+.variante{font-size: clamp(15px, 4vh, 24px)}
+
+.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
+.services:not(:last-child){@apply border-b-[1px] border-gray-200}
+.check{@apply self-center font-bold text-green-700}
+
+}
 </style>
\ No newline at end of file

From 9a7c1f58daec7c4c68e6b457fc439ee6aa98cbaa Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:14:39 +0100
Subject: [PATCH 115/165] Widget

---
 src/components/design/content/card-BA-widget.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index f8f427e6..fc896ae4 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -19,11 +19,11 @@
 
     <div class="white box">
         <div class="variante">fundiert</div>
-        <div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
-        <div class="services"><div>Zulässig bei Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
+        <div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
+        <div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
         <div class="services"><div>Zulässig auch fürunsanierte Objekte.</div><div class="check">✔</div></div>
         <div class="services"><div>Kann als Grundlage für ISFP dienen.</div><div class="check">✔</div></div>
-        <div class="services"><div>Objektivere  Berechnung.</div><div class="check">✔</div></div>
+        <div class="services"><div>Objektivere Berechnungsmethode.</div><div class="check">✔</div></div>
     </div>
     
     <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
@@ -39,12 +39,12 @@
 #card-BA-promo{
 
 
-.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
+.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6 shadow-saeule}
 
 .variante{@apply w-fit text-black justify-self-end mr-4}
-.variante{font-size: clamp(15px, 4vh, 24px)}
+.variante{@apply text-3xl}
 
-.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
+.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
 .services:not(:last-child){@apply border-b-[1px] border-gray-200}
 .check{@apply self-center font-bold text-green-700}
 

From 873f5117ae8c686a30293e45244f6d5e1c9a3073 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:21:28 +0100
Subject: [PATCH 116/165] Widget

---
 src/components/design/content/card-BA-widget.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index fc896ae4..3a04c0e5 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -18,7 +18,7 @@
     </div>
 
     <div class="white box">
-        <div class="variante">fundiert</div>
+        <div class="variante">fundiert (empfohlen)</div>
         <div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
         <div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
         <div class="services"><div>Zulässig auch fürunsanierte Objekte.</div><div class="check">✔</div></div>
@@ -41,12 +41,12 @@
 
 .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6 shadow-saeule}
 
-.variante{@apply w-fit text-black justify-self-end mr-4}
-.variante{@apply text-3xl}
+.variante{@apply w-fit text-black justify-self-end mr-3}
+.variante{@apply text-2xl}
 
 .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
 .services:not(:last-child){@apply border-b-[1px] border-gray-200}
-.check{@apply self-center font-bold text-green-700}
+.check{@apply justify-self-end font-bold text-green-700}
 
 }
 </style>
\ No newline at end of file

From 6775f5426377954c26fb735adf82b217ee65f6a6 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:23:02 +0100
Subject: [PATCH 117/165] Widget

---
 src/components/design/content/card-BA-widget.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index 3a04c0e5..7e680592 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -17,7 +17,7 @@
         </div>
     </div>
 
-    <div class="white box">
+    <div class="white">
         <div class="variante">fundiert (empfohlen)</div>
         <div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
         <div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
@@ -39,7 +39,7 @@
 #card-BA-promo{
 
 
-.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6 shadow-saeule}
+.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
 
 .variante{@apply w-fit text-black justify-self-end mr-3}
 .variante{@apply text-2xl}

From c0c92f1902936cffdb7604da703ba563c5928286 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:28:44 +0100
Subject: [PATCH 118/165] widget

---
 src/components/design/content/card-BA-widget.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index 7e680592..2e41b84d 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -21,16 +21,21 @@
         <div class="variante">fundiert (empfohlen)</div>
         <div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
         <div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
-        <div class="services"><div>Zulässig auch fürunsanierte Objekte.</div><div class="check">✔</div></div>
-        <div class="services"><div>Kann als Grundlage für ISFP dienen.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
+        <div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
         <div class="services"><div>Objektivere Berechnungsmethode.</div><div class="check">✔</div></div>
     </div>
     
-    <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
+            <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
             class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                     hover:bg-primary
             " >jetzt online erstellen</a>
 
+            <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>       
+
     </div>
 </div>
 

From a6ebe02a0131bf0f8ff28dc4a425d3ede4eae692 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:39:53 +0100
Subject: [PATCH 119/165] widget

---
 .../design/content/card-BA-widget.svelte      |  2 +-
 .../design/content/card-VA-widget.svelte      | 53 +++++++++++++++----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index 2e41b84d..6a66257c 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -10,7 +10,7 @@
     
     <div class="flex flex-row mb-2 mt-2 w-full items-end">
         <div>
-            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Bedarfsausweis"/>
         </div>
         <div>
         <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 34c3c6d8..2575f77f 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -6,17 +6,52 @@
 	<div class="grid">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>
-	<hr class="mb-4">
-	<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-	<p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
-	<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
-			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
-					hover:bg-primary
-			" >jetzt online erstellen</a>
+	<hr class="mb-2">
+
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
+        <div>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
+        </div>
+    </div>
+
+    <div class="white box">
+        <div class="variante">einfach</div>
+        <div class="services"><div>Berechnung anhand von 3 Jahresverbräuchen der Heizung.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
+        <div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978.</div><div class="check-no">✘</div></div>
+        <div class="services"><div>Abweichungen durch&nbsp;individuelles&nbsp;Heizverhalten.</div><div class="check-no">✘</div></div>
+        <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
+    </div>
+
+            <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
+                class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                        hover:bg-primary
+                " >jetzt online erstellen</a>
+            
+            <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-BA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>
+
 	</div>
 </div>
 
 
 <style lang="scss">
-
-</style>
\ No newline at end of file
+    #card-BA-promo{
+    
+    
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+    
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
+    
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
+    
+    }
+    </style>
\ No newline at end of file

From 61f63d66acea24eb64d8287ac515df26007a9bbd Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:41:01 +0100
Subject: [PATCH 120/165] Widget

---
 src/components/design/content/card-VA-widget.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 2575f77f..8d0be750 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -3,7 +3,7 @@
 </script>
 	
 <div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
-	<div class="grid">
+	<div class="">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>
 	<hr class="mb-2">
@@ -17,7 +17,7 @@
         </div>
     </div>
 
-    <div class="white box">
+    <div class="white">
         <div class="variante">einfach</div>
         <div class="services"><div>Berechnung anhand von 3 Jahresverbräuchen der Heizung.</div><div class="check">✔</div></div>
         <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>

From ce95401ad0996a62ec3933a2ce12e98f8d8946bb Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:47:07 +0100
Subject: [PATCH 121/165] Widget

---
 src/components/design/content/card-VA-widget.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 8d0be750..5477f5dd 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -19,7 +19,7 @@
 
     <div class="white">
         <div class="variante">einfach</div>
-        <div class="services"><div>Berechnung anhand von 3 Jahresverbräuchen der Heizung.</div><div class="check">✔</div></div>
+        <div class="services"><div>Grundlage sind 3 Jahresverbräuche der Heizung.</div><div class="check">✔</div></div>
         <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
         <div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978.</div><div class="check-no">✘</div></div>
         <div class="services"><div>Abweichungen durch&nbsp;individuelles&nbsp;Heizverhalten.</div><div class="check-no">✘</div></div>
@@ -41,7 +41,7 @@
 
 
 <style lang="scss">
-    #card-BA-promo{
+    #card-VA-promo{
     
     
     .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}

From 9b5791fb09b9f6092146eab2cd4b7987966ecf66 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:52:48 +0100
Subject: [PATCH 122/165] Widget

---
 src/components/design/content/card-VA-widget.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 5477f5dd..a580d46c 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -19,10 +19,10 @@
 
     <div class="white">
         <div class="variante">einfach</div>
-        <div class="services"><div>Grundlage sind 3 Jahresverbräuche der Heizung.</div><div class="check">✔</div></div>
+        <div class="services"><div>3 Jahresverbräuche der Heizung benötigt.</div><div class="check">✔</div></div>
         <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
         <div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978.</div><div class="check-no">✘</div></div>
-        <div class="services"><div>Abweichungen durch&nbsp;individuelles&nbsp;Heizverhalten.</div><div class="check-no">✘</div></div>
+        <div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
         <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
     </div>
 
@@ -52,6 +52,7 @@
     .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
     .services:not(:last-child){@apply border-b-[1px] border-gray-200}
     .check{@apply justify-self-end font-bold text-green-700}
+    .check-no{@apply justify-self-end font-bold text-red-700}
     
     }
     </style>
\ No newline at end of file

From d5163fcb7cd88db5f50371ef507b9ab8e63a315f Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 20:11:06 +0100
Subject: [PATCH 123/165] widget

---
 .../design/content/card-VA-widget.svelte       | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index a580d46c..66b9ce9e 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -25,16 +25,20 @@
         <div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
         <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
     </div>
-
-            <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
+            <div clas="flex w-full">
+                <div class="w-1/2">
+                    <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
                 class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                         hover:bg-primary
                 " >jetzt online erstellen</a>
-            
-            <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-BA-promo" 
-            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
-                    hover:bg-primary
-            " >zur Produktübersicht</a>
+                </div>
+                <div class="w-1/2">
+                    <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-BA-promo" 
+                    class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                            hover:bg-primary
+                    " >zur Produktübersicht</a>
+                </div>
+            </div>
 
 	</div>
 </div>

From 994f8da3fbd35cf6cd00952898c18ee73f524e63 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 20:19:44 +0100
Subject: [PATCH 124/165] widget

---
 src/components/design/content/card-VA-widget.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 66b9ce9e..96b6caea 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -28,13 +28,13 @@
             <div clas="flex w-full">
                 <div class="w-1/2">
                     <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
-                class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                class="text-center text-white font-[700] bg-secondary rounded-md mt-2 no-underline text-xl
                         hover:bg-primary
                 " >jetzt online erstellen</a>
                 </div>
                 <div class="w-1/2">
-                    <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-BA-promo" 
-                    class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
+                    class="text-center text-white font-[700] bg-primary rounded-md mt-2 no-underline text-xl
                             hover:bg-primary
                     " >zur Produktübersicht</a>
                 </div>

From e80993c730f39e20d79da01acb101372e045f6b5 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 20:34:08 +0100
Subject: [PATCH 125/165] widget

---
 src/components/design/content/card-VA-widget.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 96b6caea..a93f6828 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -25,16 +25,16 @@
         <div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
         <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
     </div>
-            <div clas="flex w-full">
+            <div clas="flex flex-row w-full">
                 <div class="w-1/2">
                     <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
-                class="text-center text-white font-[700] bg-secondary rounded-md mt-2 no-underline text-xl
+                class="w-full text-center text-white font-[700] bg-secondary rounded-md mt-2 no-underline text-sm
                         hover:bg-primary
                 " >jetzt online erstellen</a>
                 </div>
                 <div class="w-1/2">
                     <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
-                    class="text-center text-white font-[700] bg-primary rounded-md mt-2 no-underline text-xl
+                    class="w-full text-center text-white font-[700] bg-primary rounded-md mt-2 no-underline text-sm
                             hover:bg-primary
                     " >zur Produktübersicht</a>
                 </div>

From 92585da56fbfaca63b07f0261ed94c2a31a3df31 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 20:40:12 +0100
Subject: [PATCH 126/165] widget

---
 src/components/design/content/card-VA-widget.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index a93f6828..bbb19fe2 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
+<div id ="card-VA-promo" class="box card bg-white mb-5">
 	<div class="">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>

From 4a20303ab102056c2e944ed87b5c08ad0cba7b8f Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 20:50:13 +0100
Subject: [PATCH 127/165] widget

---
 .../design/content/card-BA-widget.svelte      |  2 +-
 .../design/content/card-VA-widget.svelte      | 23 ++++++++-----------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index 6a66257c..f7b16dcb 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5">
+<div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5"> 
     <div class="">
 
     <h2>Bedarfssausweis Wohngebäude</h2>
diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index bbb19fe2..33d046f5 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -25,20 +25,15 @@
         <div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
         <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
     </div>
-            <div clas="flex flex-row w-full">
-                <div class="w-1/2">
-                    <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
-                class="w-full text-center text-white font-[700] bg-secondary rounded-md mt-2 no-underline text-sm
-                        hover:bg-primary
-                " >jetzt online erstellen</a>
-                </div>
-                <div class="w-1/2">
-                    <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
-                    class="w-full text-center text-white font-[700] bg-primary rounded-md mt-2 no-underline text-sm
-                            hover:bg-primary
-                    " >zur Produktübersicht</a>
-                </div>
-            </div>
+            <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >jetzt online erstellen</a>
+
+            <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>
 
 	</div>
 </div>

From 65e93383c7c54002626c0e1ef7bc7031a5d47bde Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 20:53:57 +0100
Subject: [PATCH 128/165] widget

---
 src/components/design/content/card-VA-widget.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
index 33d046f5..0baabee1 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-promo" class="box card bg-white mb-5">
+<div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5"> 
 	<div class="">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>

From 628d1adfe65d515fd9a3918590bf3073b3238fff Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 21:17:38 +0100
Subject: [PATCH 129/165] widget

---
 .../design/content/card-BA-widget.svelte      | 21 ++++---
 .../design/content/card-BAG-widget.svelte     | 54 ++++++++++++++----
 .../design/content/card-VAG-widget.svelte     | 57 +++++++++++++++----
 3 files changed, 99 insertions(+), 33 deletions(-)

diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/card-BA-widget.svelte
index f7b16dcb..3980145b 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -23,9 +23,8 @@
         <div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
         <div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
         <div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
-        <div class="services"><div>Objektivere Berechnungsmethode.</div><div class="check">✔</div></div>
+        <div class="services"><div>Objektivere Berechnungsmethode nach DIN 18599.</div><div class="check">✔</div></div>
     </div>
-    
             <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
             class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                     hover:bg-primary
@@ -41,17 +40,17 @@
 
 
 <style lang="scss">
-#card-BA-promo{
+    #card-BA-promo{
 
 
-.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
 
-.variante{@apply w-fit text-black justify-self-end mr-3}
-.variante{@apply text-2xl}
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
 
-.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
-.services:not(:last-child){@apply border-b-[1px] border-gray-200}
-.check{@apply justify-self-end font-bold text-green-700}
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
 
-}
-</style>
\ No newline at end of file
+    }
+    </style>
\ No newline at end of file
diff --git a/src/components/design/content/card-BAG-widget.svelte b/src/components/design/content/card-BAG-widget.svelte
index 1be073d1..f1a4c426 100644
--- a/src/components/design/content/card-BAG-widget.svelte
+++ b/src/components/design/content/card-BAG-widget.svelte
@@ -2,21 +2,55 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-G-promo" class="box card bg-white px-6 py-4 mb-5">
-    <div class="grid">
+<div id ="card-BAG-promo" class="box card bg-white px-6 py-4 mb-5"> 
+	<div class="">
 
-    <h2>Bedarfssausweis Gewerbe</h2>
-    <hr class="mb-4">
-    <img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
-    <p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
-    <a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo" 
+	<h2>Bedarfsausweis Gewerbe</h2>
+	<hr class="mb-2">
+
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
+        <div>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
+        </div>
+    </div>
+
+    <div class="white">
+        <div class="variante">einfach</div>
+        <div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
+        <div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>
+        <div class="services"><div>Objektiveres, besser vergleichbares Ergebnis.</div><div class="check-no">✔</div></div>
+    </div>
+            <a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo" 
             class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                     hover:bg-primary
             " >jetzt online erstellen</a>
-    </div>
+
+            <a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>
+
+	</div>
 </div>
 
 
 <style lang="scss">
-
-</style>
\ No newline at end of file
+    #card-BAG-promo{
+    
+    
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+    
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
+    
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
+    .check-no{@apply justify-self-end font-bold text-red-700}
+    
+    }
+    </style>
\ No newline at end of file
diff --git a/src/components/design/content/card-VAG-widget.svelte b/src/components/design/content/card-VAG-widget.svelte
index 5b1c3d7f..abd7a744 100644
--- a/src/components/design/content/card-VAG-widget.svelte
+++ b/src/components/design/content/card-VAG-widget.svelte
@@ -2,22 +2,55 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-G-promo" class="box card bg-white px-6 py-4 mb-5">
-	<div class="grid">
+<div id ="card-VAG-promo" class="box card bg-white px-6 py-4 mb-5"> 
+	<div class="">
 
 	<h2>Verbrauchsausweis Gewerbe</h2>
-	<hr class="mb-4">
-	<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
-	<p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
-	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
-			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
-					hover:bg-primary
-			" >jetzt online erstellen</a>
+	<hr class="mb-2">
+
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
+        <div>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
+        </div>
+    </div>
+
+    <div class="white">
+        <div class="variante">einfach</div>
+        <div class="services"><div>3 Jahresverbräuche von Heizung Gebäudestrom nötig.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
+        <div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
+        <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
+    </div>
+            <a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >jetzt online erstellen</a>
+
+            <a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>
+
 	</div>
 </div>
 
 
 <style lang="scss">
-
-
-</style>
+    #card-VAG-promo{
+    
+    
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+    
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
+    
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
+    .check-no{@apply justify-self-end font-bold text-red-700}
+    
+    }
+    </style>
\ No newline at end of file

From d0f92b94489f1001a090bdd7bf19e6f7695a0182 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 21:25:56 +0100
Subject: [PATCH 130/165] widget

---
 src/components/Widget.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Widget.svelte b/src/components/Widget.svelte
index 7bfd4e1a..382f58db 100644
--- a/src/components/Widget.svelte
+++ b/src/components/Widget.svelte
@@ -52,12 +52,12 @@ import { fade } from 'svelte/transition';
     // Die Bedingung, um das Ergebnis anzuzeigen
      
     // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
-     if (selectedYear  === "vor 1978") {
-      showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
+    if (selectedYear  === "vor 1978") {
+    showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
     }
     else
     {
-      showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
+    showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
     }
 
     showBA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
@@ -67,7 +67,7 @@ import { fade } from 'svelte/transition';
 
 </script>
 
-     <div id="OEA_widget">
+     <div id="OEA_widget" class="box">
       <input id="recode" type="hidden" value="widgetvorlage">
     
     <div id="OEA_input">

From 8971fb26b0a066496901a01093c715882dde1d10 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Sun, 8 Dec 2024 21:44:41 +0100
Subject: [PATCH 131/165] widget

---
 src/components/Widget.svelte                         | 2 +-
 src/components/design/content/card-BAG-widget.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Widget.svelte b/src/components/Widget.svelte
index 382f58db..2ddd6156 100644
--- a/src/components/Widget.svelte
+++ b/src/components/Widget.svelte
@@ -67,7 +67,7 @@ import { fade } from 'svelte/transition';
 
 </script>
 
-     <div id="OEA_widget" class="box">
+     <div id="OEA_widget">
       <input id="recode" type="hidden" value="widgetvorlage">
     
     <div id="OEA_input">
diff --git a/src/components/design/content/card-BAG-widget.svelte b/src/components/design/content/card-BAG-widget.svelte
index f1a4c426..a420745d 100644
--- a/src/components/design/content/card-BAG-widget.svelte
+++ b/src/components/design/content/card-BAG-widget.svelte
@@ -18,7 +18,7 @@
     </div>
 
     <div class="white">
-        <div class="variante">einfach</div>
+        <div class="variante">fundiert (empfohlen)</div>
         <div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
         <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
         <div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>

From 82386ec878e64f2d0f6a11111444753ea8af5d86 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 14:57:33 +0100
Subject: [PATCH 132/165] CAD

---
 src/layouts/layoutCAD.astro                   |  88 ++++++++++++++
 .../energieausweis-erstellen/index.astro      | 109 +++++++++++++++++-
 2 files changed, 196 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/layoutCAD.astro

diff --git a/src/layouts/layoutCAD.astro b/src/layouts/layoutCAD.astro
new file mode 100644
index 00000000..b9f444d9
--- /dev/null
+++ b/src/layouts/layoutCAD.astro
@@ -0,0 +1,88 @@
+---
+import "../style/global.css";
+import "../../svelte-dialogs.config"
+import Header from "#header/Header.astro";
+import Footer from "#footer/Footer.astro";
+import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
+import SidebarRight from "#sidebarRight/SidebarRight.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+---
+
+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>
+			{title || "Simple CAD Program - Connected Lines"}
+		</title>
+    <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: crosshair;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+</head>
+
+	<body>
+		<container class="w-full max-w-[1920px]">
+		
+		<Header />
+
+		<main
+			class="w-full p-0 grid
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
+			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
+			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
+			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
+		">
+
+		<SidebarLeft />
+		
+		<article class="box grow rounded-tl-none">
+		<slot />
+		</article>
+		
+		<SidebarRight />
+
+		</main>
+	
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</body>
+</html>
+
+
diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 6547839b..7eb648df 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,6 +1,6 @@
 ---
 
-import Layout from "#layouts/Layout.astro";
+import Layout from "#layouts/LayoutCAD.astro";
 import Widget2 from "#components/Widget.svelte";
 
 ---
@@ -14,5 +14,112 @@ import Widget2 from "#components/Widget.svelte";
 <Widget2 client:load />
 </div>
 
+
+<div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
+
+  <script>
+    const canvas = document.getElementById('cadCanvas');
+    const ctx = canvas.getContext('2d');
+    const lineLog = document.getElementById('line-log');
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 5; // Size of each grid cell in pixels
+    let startX = null;
+    let startY = null;
+    let capturedLines = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value) {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid() {
+      ctx.beginPath();
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.lineWidth = 0.5;
+
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+      }
+
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+      }
+
+      ctx.stroke();
+    }
+
+    // Clear the canvas and reset logs
+    function clearCanvas() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog() {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
+        })
+        .join('');
+    }
+
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', (e) => {
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      if (startX !== null && startY !== null) {
+        // Draw the final line
+        drawLine(startX, startY, endX, endY);
+
+        // Capture the line details
+        capturedLines.push({ startX, startY, endX, endY });
+        updateLineLog();
+      }
+
+      // Update the start position for the next line
+      startX = endX;
+      startY = endY;
+    });
+
+    // Drawing functions
+    function drawLine(x1, y1, x2, y2) {
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
+  </script>
+
+
+
 </Layout>
 

From 692410768f5fbc63f0d1a1dec49a6a912a792fe3 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:09:37 +0100
Subject: [PATCH 133/165] CAD

---
 src/pages/energieausweis-erstellen/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 7eb648df..add723e1 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,6 +1,6 @@
 ---
 
-import Layout from "#layouts/LayoutCAD.astro";
+import Layout from "#layouts/layoutCAD.astro";
 import Widget2 from "#components/Widget.svelte";
 
 ---

From 95b5232c8b6faee32c96e3a60ac1359c76570639 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:16:53 +0100
Subject: [PATCH 134/165] CAD

---
 src/pages/energieausweis-erstellen/index.astro | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index add723e1..ab5ccc27 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -15,7 +15,7 @@ import Widget2 from "#components/Widget.svelte";
 </div>
 
 
-<div class="controls">
+ <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
@@ -29,7 +29,7 @@ import Widget2 from "#components/Widget.svelte";
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 5; // Size of each grid cell in pixels
+    const gridSize = 10; // Size of each grid cell in pixels (set to 10 for coarser grid)
     let startX = null;
     let startY = null;
     let capturedLines = [];
@@ -110,6 +110,8 @@ import Widget2 from "#components/Widget.svelte";
     // Drawing functions
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();

From c49410d2246fcd6965a26a4483a660ee1635721d Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:26:05 +0100
Subject: [PATCH 135/165] CAD

---
 .../energieausweis-erstellen/index.astro      | 53 +++++++++++++------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index ab5ccc27..6be1d25a 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -29,9 +29,9 @@ import Widget2 from "#components/Widget.svelte";
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 10; // Size of each grid cell in pixels (set to 10 for coarser grid)
-    let startX = null;
-    let startY = null;
+    const gridSize = 10; // Size of each grid cell in pixels
+    let lastEndPoint = null;
+    let lastStartPoint = null;
     let capturedLines = [];
 
     // Snap a coordinate to the nearest grid point
@@ -64,8 +64,8 @@ import Widget2 from "#components/Widget.svelte";
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
-      startX = null;
-      startY = null;
+      lastEndPoint = null;
+      lastStartPoint = null;
       drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
@@ -90,21 +90,43 @@ import Widget2 from "#components/Widget.svelte";
 
     // Mouse events
     canvas.addEventListener('mousedown', (e) => {
+      const clickX = snapToGrid(e.offsetX);
+      const clickY = snapToGrid(e.offsetY);
+
+      // Determine the starting point for the new line
+      let startX, startY;
+
+      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // Snap to the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
+      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
+        // Snap to the last starting point
+        startX = lastStartPoint.x;
+        startY = lastStartPoint.y;
+      } else if (!capturedLines.length) {
+        // First line can start anywhere
+        startX = clickX;
+        startY = clickY;
+      } else {
+        // If click doesn't match a valid connection, do nothing
+        return;
+      }
+
+      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      if (startX !== null && startY !== null) {
-        // Draw the final line
-        drawLine(startX, startY, endX, endY);
+      // Draw the line
+      drawLine(startX, startY, endX, endY);
 
-        // Capture the line details
-        capturedLines.push({ startX, startY, endX, endY });
-        updateLineLog();
-      }
+      // Update the last start and end points
+      lastStartPoint = { x: startX, y: startY };
+      lastEndPoint = { x: endX, y: endY };
 
-      // Update the start position for the next line
-      startX = endX;
-      startY = endY;
+      // Capture the line details
+      capturedLines.push({ startX, startY, endX, endY });
+      updateLineLog();
     });
 
     // Drawing functions
@@ -122,6 +144,5 @@ import Widget2 from "#components/Widget.svelte";
   </script>
 
 
-
 </Layout>
 

From 17f7530bb88c0c2cc4bcb8b1cac48b8df4c0d72b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:31:18 +0100
Subject: [PATCH 136/165] CAD

---
 src/pages/energieausweis-erstellen/index.astro | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 6be1d25a..2991466d 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -117,6 +117,11 @@ import Widget2 from "#components/Widget.svelte";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
+      // Avoid drawing a "point" as a line
+      if (startX === endX && startY === endY) {
+        return;
+      }
+
       // Draw the line
       drawLine(startX, startY, endX, endY);
 
@@ -143,6 +148,5 @@ import Widget2 from "#components/Widget.svelte";
     drawGrid(); // Draw the grid when the page loads
   </script>
 
-
 </Layout>
 

From 372d2c6a01533b70ff2e51fc7a3def4c511cf772 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:44:23 +0100
Subject: [PATCH 137/165] CAD

---
 .../energieausweis-erstellen/index.astro      | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 2991466d..3897060a 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -15,7 +15,7 @@ import Widget2 from "#components/Widget.svelte";
 </div>
 
 
- <div class="controls">
+<div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
@@ -30,9 +30,9 @@ import Widget2 from "#components/Widget.svelte";
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
     const gridSize = 10; // Size of each grid cell in pixels
-    let lastEndPoint = null;
-    let lastStartPoint = null;
     let capturedLines = [];
+    let lastEndPoint = null; // Tracks the end point of the last line
+    let firstStartPoint = null; // Tracks the start point of the first line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -65,7 +65,7 @@ import Widget2 from "#components/Widget.svelte";
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
       lastEndPoint = null;
-      lastStartPoint = null;
+      firstStartPoint = null;
       drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
@@ -96,20 +96,17 @@ import Widget2 from "#components/Widget.svelte";
       // Determine the starting point for the new line
       let startX, startY;
 
-      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // Snap to the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
-        // Snap to the last starting point
-        startX = lastStartPoint.x;
-        startY = lastStartPoint.y;
-      } else if (!capturedLines.length) {
-        // First line can start anywhere
+      if (!lastEndPoint) {
+        // For the first line, set the start point anywhere
         startX = clickX;
         startY = clickY;
+        firstStartPoint = { x: startX, y: startY }; // Save the first start point
+      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // For subsequent lines, start at the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
       } else {
-        // If click doesn't match a valid connection, do nothing
+        // If not a valid start point, do nothing
         return;
       }
 
@@ -117,16 +114,21 @@ import Widget2 from "#components/Widget.svelte";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Avoid drawing a "point" as a line
-      if (startX === endX && startY === endY) {
+      // The endpoint must be either:
+      // - A valid grid point
+      // - The start point of the first line
+      const isValidEndPoint =
+        (endX !== startX || endY !== startY) &&
+        (endX === firstStartPoint?.x && endY === firstStartPoint?.y);
+
+      if (!isValidEndPoint) {
         return;
       }
 
       // Draw the line
       drawLine(startX, startY, endX, endY);
 
-      // Update the last start and end points
-      lastStartPoint = { x: startX, y: startY };
+      // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
       // Capture the line details

From acb52828de7879c282b238ce0ede67c606f399d6 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:48:08 +0100
Subject: [PATCH 138/165] CAD

---
 .../energieausweis-erstellen/index.astro      | 39 ++++++++-----------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 3897060a..632a36da 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -30,9 +30,9 @@ import Widget2 from "#components/Widget.svelte";
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
     const gridSize = 10; // Size of each grid cell in pixels
+    let lastEndPoint = null;
+    let lastStartPoint = null;
     let capturedLines = [];
-    let lastEndPoint = null; // Tracks the end point of the last line
-    let firstStartPoint = null; // Tracks the start point of the first line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -65,7 +65,7 @@ import Widget2 from "#components/Widget.svelte";
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
       lastEndPoint = null;
-      firstStartPoint = null;
+      lastStartPoint = null;
       drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
@@ -96,17 +96,20 @@ import Widget2 from "#components/Widget.svelte";
       // Determine the starting point for the new line
       let startX, startY;
 
-      if (!lastEndPoint) {
-        // For the first line, set the start point anywhere
-        startX = clickX;
-        startY = clickY;
-        firstStartPoint = { x: startX, y: startY }; // Save the first start point
-      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // For subsequent lines, start at the last endpoint
+      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // Snap to the last endpoint
         startX = lastEndPoint.x;
         startY = lastEndPoint.y;
+      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
+        // Snap to the last starting point
+        startX = lastStartPoint.x;
+        startY = lastStartPoint.y;
+      } else if (!capturedLines.length) {
+        // First line can start anywhere
+        startX = clickX;
+        startY = clickY;
       } else {
-        // If not a valid start point, do nothing
+        // If click doesn't match a valid connection, do nothing
         return;
       }
 
@@ -114,21 +117,11 @@ import Widget2 from "#components/Widget.svelte";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // The endpoint must be either:
-      // - A valid grid point
-      // - The start point of the first line
-      const isValidEndPoint =
-        (endX !== startX || endY !== startY) &&
-        (endX === firstStartPoint?.x && endY === firstStartPoint?.y);
-
-      if (!isValidEndPoint) {
-        return;
-      }
-
       // Draw the line
       drawLine(startX, startY, endX, endY);
 
-      // Update the last endpoint
+      // Update the last start and end points
+      lastStartPoint = { x: startX, y: startY };
       lastEndPoint = { x: endX, y: endY };
 
       // Capture the line details

From 23af5d29a3b645841ca0b2c067d4b71b7c3eda3b Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:12:08 +0100
Subject: [PATCH 139/165] CAD

---
 .../energieausweis-erstellen/index.astro      | 129 +----------------
 .../erstellung-energieausweise/index.astro    | 136 +++++++++++++++++-
 2 files changed, 136 insertions(+), 129 deletions(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 632a36da..b52b4d4e 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,6 +1,6 @@
 ---
 
-import Layout from "#layouts/layoutCAD.astro";
+import Layout from "#layouts/layout.astro";
 import Widget2 from "#components/Widget.svelte";
 
 ---
@@ -15,133 +15,6 @@ import Widget2 from "#components/Widget.svelte";
 </div>
 
 
-<div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
-  </div>
-  <canvas id="cadCanvas" width="800" height="600"></canvas>
-  <div class="log">
-    <strong>Captured Lines:</strong>
-    <ul id="line-log"></ul>
-  </div>
-
-  <script>
-    const canvas = document.getElementById('cadCanvas');
-    const ctx = canvas.getContext('2d');
-    const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 10; // Size of each grid cell in pixels
-    let lastEndPoint = null;
-    let lastStartPoint = null;
-    let capturedLines = [];
-
-    // Snap a coordinate to the nearest grid point
-    function snapToGrid(value) {
-      return Math.round(value / gridSize) * gridSize;
-    }
-
-    // Draw the grid
-    function drawGrid() {
-      ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
-      ctx.lineWidth = 0.5;
-
-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, canvas.height);
-      }
-
-      // Draw horizontal lines
-      for (let y = 0; y <= canvas.height; y += gridSize) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(canvas.width, y);
-      }
-
-      ctx.stroke();
-    }
-
-    // Clear the canvas and reset logs
-    function clearCanvas() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines = [];
-      lastEndPoint = null;
-      lastStartPoint = null;
-      drawGrid(); // Redraw the grid after clearing
-      updateLineLog();
-    }
-
-    // Update the captured lines log
-    function updateLineLog() {
-      lineLog.innerHTML = capturedLines
-        .map((line, index) => {
-          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
-        })
-        .join('');
-    }
-
-    // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
-      const dx = x2 - x1;
-      const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
-    }
-
-    // Mouse events
-    canvas.addEventListener('mousedown', (e) => {
-      const clickX = snapToGrid(e.offsetX);
-      const clickY = snapToGrid(e.offsetY);
-
-      // Determine the starting point for the new line
-      let startX, startY;
-
-      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // Snap to the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
-        // Snap to the last starting point
-        startX = lastStartPoint.x;
-        startY = lastStartPoint.y;
-      } else if (!capturedLines.length) {
-        // First line can start anywhere
-        startX = clickX;
-        startY = clickY;
-      } else {
-        // If click doesn't match a valid connection, do nothing
-        return;
-      }
-
-      // Determine the endpoint
-      const endX = snapToGrid(e.offsetX);
-      const endY = snapToGrid(e.offsetY);
-
-      // Draw the line
-      drawLine(startX, startY, endX, endY);
-
-      // Update the last start and end points
-      lastStartPoint = { x: startX, y: startY };
-      lastEndPoint = { x: endX, y: endY };
-
-      // Capture the line details
-      capturedLines.push({ startX, startY, endX, endY });
-      updateLineLog();
-    });
-
-    // Drawing functions
-    function drawLine(x1, y1, x2, y2) {
-      ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
-
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
-  </script>
 
 </Layout>
 
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 70f2a1ba..14906f7f 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,6 +1,6 @@
 ---
 
-import Layout from "#layouts/Layout.astro";
+import Layout from "#layouts/layoutCAD.astro";
 
 ---
 
@@ -66,4 +66,138 @@ import Layout from "#layouts/Layout.astro";
    
 </div>
 </div>
+
+
+<div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
+
+  <script>
+    const canvas = document.getElementById('cadCanvas');
+    const ctx = canvas.getContext('2d');
+    const lineLog = document.getElementById('line-log');
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 10; // Size of each grid cell in pixels
+    let lastEndPoint = null;
+    let lastStartPoint = null;
+    let capturedLines = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value) {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid() {
+      ctx.beginPath();
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.lineWidth = 0.5;
+
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+      }
+
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+      }
+
+      ctx.stroke();
+    }
+
+    // Clear the canvas and reset logs
+    function clearCanvas() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      lastEndPoint = null;
+      lastStartPoint = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog() {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
+        })
+        .join('');
+    }
+
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', (e) => {
+      const clickX = snapToGrid(e.offsetX);
+      const clickY = snapToGrid(e.offsetY);
+
+      // Determine the starting point for the new line
+      let startX, startY;
+
+      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // Snap to the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
+      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
+        // Snap to the last starting point
+        startX = lastStartPoint.x;
+        startY = lastStartPoint.y;
+      } else if (!capturedLines.length) {
+        // First line can start anywhere
+        startX = clickX;
+        startY = clickY;
+      } else {
+        // If click doesn't match a valid connection, do nothing
+        return;
+      }
+
+      // Determine the endpoint
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      // Draw the line
+      drawLine(startX, startY, endX, endY);
+
+      // Update the last start and end points
+      lastStartPoint = { x: startX, y: startY };
+      lastEndPoint = { x: endX, y: endY };
+
+      // Capture the line details
+      capturedLines.push({ startX, startY, endX, endY });
+      updateLineLog();
+    });
+
+    // Drawing functions
+    function drawLine(x1, y1, x2, y2) {
+      ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
+  </script>
+
+
+
+
+
 </Layout>
\ No newline at end of file

From 0085a93f259a57a40449d8d25c19f53a5b820b20 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:15:51 +0100
Subject: [PATCH 140/165] CAD

---
 src/pages/energieausweis-erstellen/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index b52b4d4e..330ce7ed 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,6 +1,6 @@
 ---
 
-import Layout from "#layouts/layout.astro";
+import Layout from "#layouts/Layout.astro";
 import Widget2 from "#components/Widget.svelte";
 
 ---

From adc67c819ad60371ed5dc6c25d8e1deda9e850a0 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:23:45 +0100
Subject: [PATCH 141/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 14906f7f..f09335c3 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -83,9 +83,9 @@ import Layout from "#layouts/layoutCAD.astro";
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
     const gridSize = 10; // Size of each grid cell in pixels
-    let lastEndPoint = null;
-    let lastStartPoint = null;
     let capturedLines = [];
+    let lastEndPoint = null; // Tracks the end point of the last line
+    let firstStartPoint = null; // Tracks the start point of the first line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -118,7 +118,7 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
       lastEndPoint = null;
-      lastStartPoint = null;
+      firstStartPoint = null;
       drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
@@ -149,20 +149,17 @@ import Layout from "#layouts/layoutCAD.astro";
       // Determine the starting point for the new line
       let startX, startY;
 
-      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // Snap to the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
-        // Snap to the last starting point
-        startX = lastStartPoint.x;
-        startY = lastStartPoint.y;
-      } else if (!capturedLines.length) {
-        // First line can start anywhere
+      if (!lastEndPoint) {
+        // For the first line, set the start point anywhere
         startX = clickX;
         startY = clickY;
+        firstStartPoint = { x: startX, y: startY }; // Save the first start point
+      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // For subsequent lines, start at the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
       } else {
-        // If click doesn't match a valid connection, do nothing
+        // If not a valid start point, do nothing
         return;
       }
 
@@ -170,11 +167,21 @@ import Layout from "#layouts/layoutCAD.astro";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
+      // The endpoint must be either:
+      // - A valid grid point (different from the start point)
+      // - The start point of the first line
+      const isValidEndPoint =
+        (endX !== startX || endY !== startY) &&
+        (endX === firstStartPoint?.x && endY === firstStartPoint?.y);
+
+      if (!isValidEndPoint) {
+        return;
+      }
+
       // Draw the line
       drawLine(startX, startY, endX, endY);
 
-      // Update the last start and end points
-      lastStartPoint = { x: startX, y: startY };
+      // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
       // Capture the line details
@@ -196,8 +203,4 @@ import Layout from "#layouts/layoutCAD.astro";
     drawGrid(); // Draw the grid when the page loads
   </script>
 
-
-
-
-
 </Layout>
\ No newline at end of file

From 144b815ab48ccab3f83f99f9ad2d7702a7a1afe8 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:31:04 +0100
Subject: [PATCH 142/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 56 +++++++++----------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index f09335c3..d082cf88 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -81,11 +81,10 @@ import Layout from "#layouts/layoutCAD.astro";
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
     const gridSize = 10; // Size of each grid cell in pixels
     let capturedLines = [];
-    let lastEndPoint = null; // Tracks the end point of the last line
     let firstStartPoint = null; // Tracks the start point of the first line
+    let lastEndPoint = null; // Tracks the end point of the last line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -113,13 +112,13 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Clear the canvas and reset logs
+    // Clear the canvas and reset everything
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
-      lastEndPoint = null;
       firstStartPoint = null;
-      drawGrid(); // Redraw the grid after clearing
+      lastEndPoint = null;
+      drawGrid();
       updateLineLog();
     }
 
@@ -127,52 +126,51 @@ import Layout from "#layouts/layoutCAD.astro";
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
-          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
+          const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
         })
         .join('');
     }
 
-    // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+    // Calculate the length of a line
+    function calculateLineLength(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
+      return Math.sqrt(dx * dx + dy * dy);
     }
 
-    // Mouse events
+    // Mouse event for drawing lines
     canvas.addEventListener('mousedown', (e) => {
       const clickX = snapToGrid(e.offsetX);
       const clickY = snapToGrid(e.offsetY);
 
-      // Determine the starting point for the new line
+      // Determine starting point for the line
       let startX, startY;
 
       if (!lastEndPoint) {
-        // For the first line, set the start point anywhere
+        // First line can start anywhere
         startX = clickX;
         startY = clickY;
-        firstStartPoint = { x: startX, y: startY }; // Save the first start point
+        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
       } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // For subsequent lines, start at the last endpoint
+        // Subsequent lines must start at the last endpoint
         startX = lastEndPoint.x;
         startY = lastEndPoint.y;
       } else {
-        // If not a valid start point, do nothing
+        // Invalid starting point
         return;
       }
 
-      // Determine the endpoint
+      // Determine the end point
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // The endpoint must be either:
-      // - A valid grid point (different from the start point)
-      // - The start point of the first line
+      // Check if the end point is valid:
+      // - Must not be the same as the start point
+      // - Must be a valid grid point or the first start point
       const isValidEndPoint =
         (endX !== startX || endY !== startY) &&
-        (endX === firstStartPoint?.x && endY === firstStartPoint?.y);
+        ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || endX % gridSize === 0 && endY % gridSize === 0);
 
       if (!isValidEndPoint) {
         return;
@@ -181,7 +179,7 @@ import Layout from "#layouts/layoutCAD.astro";
       // Draw the line
       drawLine(startX, startY, endX, endY);
 
-      // Update the last endpoint
+      // Update the last end point
       lastEndPoint = { x: endX, y: endY };
 
       // Capture the line details
@@ -189,18 +187,18 @@ import Layout from "#layouts/layoutCAD.astro";
       updateLineLog();
     });
 
-    // Drawing functions
+    // Function to draw a line
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
+      ctx.strokeStyle = "#000000"; // Black lines
+      ctx.lineWidth = 2;
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
+    // Initialize the canvas
+    drawGrid();
   </script>
-
+  
 </Layout>
\ No newline at end of file

From 286fa429a5cef77e573ea277b498492dfa5ec61a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:39:34 +0100
Subject: [PATCH 143/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index d082cf88..09d8ba57 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -73,7 +73,7 @@ import Layout from "#layouts/layoutCAD.astro";
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
-    <strong>Captured Lines:</strong>
+    <strong>Captured Points and Lines:</strong>
     <ul id="line-log"></ul>
   </div>
 
@@ -122,10 +122,14 @@ import Layout from "#layouts/layoutCAD.astro";
       updateLineLog();
     }
 
-    // Update the captured lines log
+    // Update the captured points and lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
+          const isPoint = line.startX === line.endX && line.startY === line.endY;
+          if (isPoint) {
+            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
+          }
           const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
           return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
         })
@@ -139,50 +143,44 @@ import Layout from "#layouts/layoutCAD.astro";
       return Math.sqrt(dx * dx + dy * dy);
     }
 
-    // Mouse event for drawing lines
+    // Mouse event for drawing lines and points
     canvas.addEventListener('mousedown', (e) => {
       const clickX = snapToGrid(e.offsetX);
       const clickY = snapToGrid(e.offsetY);
 
-      // Determine starting point for the line
+      // Determine starting point for the line or point
       let startX, startY;
 
       if (!lastEndPoint) {
-        // First line can start anywhere
+        // For the first line or point, set the start point anywhere
         startX = clickX;
         startY = clickY;
         firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
       } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // Subsequent lines must start at the last endpoint
+        // For subsequent lines, start at the last endpoint
         startX = lastEndPoint.x;
         startY = lastEndPoint.y;
       } else {
-        // Invalid starting point
+        // Invalid starting point for a line
         return;
       }
 
-      // Determine the end point
+      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Check if the end point is valid:
-      // - Must not be the same as the start point
-      // - Must be a valid grid point or the first start point
-      const isValidEndPoint =
-        (endX !== startX || endY !== startY) &&
-        ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || endX % gridSize === 0 && endY % gridSize === 0);
-
-      if (!isValidEndPoint) {
-        return;
+      // Draw a point if the start and end are the same
+      if (startX === endX && startY === endY) {
+        drawPoint(startX, startY);
+      } else {
+        // Draw the line
+        drawLine(startX, startY, endX, endY);
       }
 
-      // Draw the line
-      drawLine(startX, startY, endX, endY);
-
-      // Update the last end point
+      // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
-      // Capture the line details
+      // Capture the line or point details
       capturedLines.push({ startX, startY, endX, endY });
       updateLineLog();
     });
@@ -197,8 +195,16 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
+    // Function to draw a point
+    function drawPoint(x, y) {
+      ctx.beginPath();
+      ctx.fillStyle = "#000000"; // Black point
+      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
+      ctx.fill();
+    }
+
     // Initialize the canvas
     drawGrid();
   </script>
-  
+
 </Layout>
\ No newline at end of file

From 06c39ec06087fc79fc9ba7659ff7afaf2ce35db4 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:54:28 +0100
Subject: [PATCH 144/165] CAD

---
 .../faq/erstellung-energieausweise/index.astro    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 09d8ba57..5bd5a18c 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -169,11 +169,22 @@ import Layout from "#layouts/layoutCAD.astro";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Draw a point if the start and end are the same
+      // Check if the end point is valid:
+      // - Must not be the same as the start point
+      // - Must be a valid grid point or the start point of the first line
+      const isValidEndPoint =
+        (endX !== startX || endY !== startY) &&
+        ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || true);
+
+      if (!isValidEndPoint) {
+        return;
+      }
+
+      // If it's a point, draw a point
       if (startX === endX && startY === endY) {
         drawPoint(startX, startY);
       } else {
-        // Draw the line
+        // Otherwise, draw the line
         drawLine(startX, startY, endX, endY);
       }
 

From f5cc39461cc30aec8bf4ef18876119a0c25e94f8 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:01:00 +0100
Subject: [PATCH 145/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 108 ++++++------------
 1 file changed, 32 insertions(+), 76 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 5bd5a18c..3d95006c 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -68,12 +68,12 @@ import Layout from "#layouts/layoutCAD.astro";
 </div>
 
 
-<div class="controls">
+ <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
-    <strong>Captured Points and Lines:</strong>
+    <strong>Captured Lines:</strong>
     <ul id="line-log"></ul>
   </div>
 
@@ -81,10 +81,11 @@ import Layout from "#layouts/layoutCAD.astro";
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
-    const gridSize = 10; // Size of each grid cell in pixels
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 5; // Size of each grid cell in pixels
+    let startX = null;
+    let startY = null;
     let capturedLines = [];
-    let firstStartPoint = null; // Tracks the start point of the first line
-    let lastEndPoint = null; // Tracks the end point of the last line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -112,110 +113,65 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Clear the canvas and reset everything
+    // Clear the canvas and reset logs
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
-      firstStartPoint = null;
-      lastEndPoint = null;
-      drawGrid();
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
 
-    // Update the captured points and lines log
+    // Update the captured lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
-          const isPoint = line.startX === line.endX && line.startY === line.endY;
-          if (isPoint) {
-            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
-          }
-          const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
         })
         .join('');
     }
 
-    // Calculate the length of a line
-    function calculateLineLength(x1, y1, x2, y2) {
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
-      return Math.sqrt(dx * dx + dy * dy);
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
     }
 
-    // Mouse event for drawing lines and points
+    // Mouse events
     canvas.addEventListener('mousedown', (e) => {
-      const clickX = snapToGrid(e.offsetX);
-      const clickY = snapToGrid(e.offsetY);
-
-      // Determine starting point for the line or point
-      let startX, startY;
-
-      if (!lastEndPoint) {
-        // For the first line or point, set the start point anywhere
-        startX = clickX;
-        startY = clickY;
-        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
-      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // For subsequent lines, start at the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else {
-        // Invalid starting point for a line
-        return;
-      }
-
-      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Check if the end point is valid:
-      // - Must not be the same as the start point
-      // - Must be a valid grid point or the start point of the first line
-      const isValidEndPoint =
-        (endX !== startX || endY !== startY) &&
-        ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || true);
-
-      if (!isValidEndPoint) {
-        return;
-      }
-
-      // If it's a point, draw a point
-      if (startX === endX && startY === endY) {
-        drawPoint(startX, startY);
-      } else {
-        // Otherwise, draw the line
+      if (startX !== null && startY !== null) {
+        // Draw the final line
         drawLine(startX, startY, endX, endY);
+
+        // Capture the line details
+        capturedLines.push({ startX, startY, endX, endY });
+        updateLineLog();
       }
 
-      // Update the last endpoint
-      lastEndPoint = { x: endX, y: endY };
-
-      // Capture the line or point details
-      capturedLines.push({ startX, startY, endX, endY });
-      updateLineLog();
+      // Update the start position for the next line
+      startX = endX;
+      startY = endY;
     });
 
-    // Function to draw a line
+    // Drawing functions
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black lines
-      ctx.lineWidth = 2;
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Function to draw a point
-    function drawPoint(x, y) {
-      ctx.beginPath();
-      ctx.fillStyle = "#000000"; // Black point
-      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
-      ctx.fill();
-    }
-
-    // Initialize the canvas
-    drawGrid();
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
   </script>
 
 </Layout>
\ No newline at end of file

From 1c10a1fa5beabc35e42d0bdbe0c651bd10400b6a Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:09:46 +0100
Subject: [PATCH 146/165] CAD

---
 src/pages/faq/erstellung-energieausweise/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 3d95006c..ca775963 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -82,7 +82,7 @@ import Layout from "#layouts/layoutCAD.astro";
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 5; // Size of each grid cell in pixels
+    const gridSize = 10; // Size of each grid cell in pixels
     let startX = null;
     let startY = null;
     let capturedLines = [];

From b8664397297c6b6e6afb866afac86d6526789c97 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:25:17 +0100
Subject: [PATCH 147/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index ca775963..ccf80877 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -113,15 +113,25 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Clear the canvas and reset logs
     function clearCanvas() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines = [];
-      startX = null;
-      startY = null;
-      drawGrid(); // Redraw the grid after clearing
-      updateLineLog();
-    }
+  // Löscht den gesamten Canvas
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // Setzt die Liste der gezeichneten Linien und Punkte zurück
+  capturedLines = [];
+  firstStartPoint = null;
+  lastEndPoint = null;
+
+  // Zeichnet das Raster neu
+  drawGrid();
+
+  // Aktualisiert das Log, um es zu leeren
+  updateLineLog();
+}
+    
+
+
+
 
     // Update the captured lines log
     function updateLineLog() {

From 953c7e052085219d08a80a0ca0605fa8f20186f1 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:37:43 +0100
Subject: [PATCH 148/165] CAD

---
 src/layouts/layoutCAD.astro                   | 29 ------------------
 .../erstellung-energieausweise/index.astro    | 30 +++++++++++++++++++
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/layouts/layoutCAD.astro b/src/layouts/layoutCAD.astro
index b9f444d9..152a79e0 100644
--- a/src/layouts/layoutCAD.astro
+++ b/src/layouts/layoutCAD.astro
@@ -24,35 +24,6 @@ const { title } = Astro.props;
 		<title>
 			{title || "Simple CAD Program - Connected Lines"}
 		</title>
-    <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      border: 1px solid #ccc;
-      cursor: crosshair;
-    }
-    .controls {
-      margin: 10px;
-    }
-    .controls button {
-      margin-right: 5px;
-    }
-    .log {
-      margin: 10px;
-      width: 800px;
-      max-height: 150px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      padding: 10px;
-      background: #f9f9f9;
-    }
-  </style>
 </head>
 
 	<body>
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index ccf80877..89958dda 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -184,4 +184,34 @@ import Layout from "#layouts/layoutCAD.astro";
     drawGrid(); // Draw the grid when the page loads
   </script>
 
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: crosshair;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+
 </Layout>
\ No newline at end of file

From a2af6c92496a4562874ab11a272c289098b1b740 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:51:41 +0100
Subject: [PATCH 149/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 148 ++++++++++++------
 1 file changed, 103 insertions(+), 45 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 89958dda..1f334b6b 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -68,12 +68,12 @@ import Layout from "#layouts/layoutCAD.astro";
 </div>
 
 
- <div class="controls">
+  <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
-    <strong>Captured Lines:</strong>
+    <strong>Captured Points and Lines:</strong>
     <ul id="line-log"></ul>
   </div>
 
@@ -81,11 +81,10 @@ import Layout from "#layouts/layoutCAD.astro";
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
     const gridSize = 10; // Size of each grid cell in pixels
-    let startX = null;
-    let startY = null;
     let capturedLines = [];
+    let firstStartPoint = null; // Tracks the start point of the first line
+    let lastEndPoint = null; // Tracks the end point of the last line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -113,75 +112,134 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
+    // Clear the canvas and reset everything
     function clearCanvas() {
-  // Löscht den gesamten Canvas
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      firstStartPoint = null;
+      lastEndPoint = null;
+      drawGrid();
+      updateLineLog();
+    }
 
-  // Setzt die Liste der gezeichneten Linien und Punkte zurück
-  capturedLines = [];
-  firstStartPoint = null;
-  lastEndPoint = null;
-
-  // Zeichnet das Raster neu
-  drawGrid();
-
-  // Aktualisiert das Log, um es zu leeren
-  updateLineLog();
-}
-    
-
-
-
-
-    // Update the captured lines log
+    // Update the captured points and lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
-          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
+          const isPoint = line.startX === line.endX && line.startY === line.endY;
+          if (isPoint) {
+            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
+          }
+          const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
         })
         .join('');
     }
 
-    // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+    // Calculate the length of a line
+    function calculateLineLength(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
+      return Math.sqrt(dx * dx + dy * dy);
     }
 
-    // Mouse events
+    // Mouse move event for snapping the cursor to the grid
+    canvas.addEventListener('mousemove', (e) => {
+      const mouseX = snapToGrid(e.offsetX);
+      const mouseY = snapToGrid(e.offsetY);
+
+      // Clear the canvas and redraw the grid
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawGrid();
+
+      // Redraw all existing lines and points
+      redrawLinesAndPoints();
+
+      // Draw a marker at the snapped position
+      drawCursorMarker(mouseX, mouseY);
+    });
+
+    // Draw a marker to represent the snapped cursor position
+    function drawCursorMarker(x, y) {
+      ctx.beginPath();
+      ctx.fillStyle = "#ff0000"; // Red marker for cursor
+      ctx.arc(x, y, 4, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+
+    // Redraw all existing lines and points
+    function redrawLinesAndPoints() {
+      for (const line of capturedLines) {
+        if (line.startX === line.endX && line.startY === line.endY) {
+          drawPoint(line.startX, line.startY);
+        } else {
+          drawLine(line.startX, line.startY, line.endX, line.endY);
+        }
+      }
+    }
+
+    // Mouse event for drawing lines and points
     canvas.addEventListener('mousedown', (e) => {
+      const clickX = snapToGrid(e.offsetX);
+      const clickY = snapToGrid(e.offsetY);
+
+      // Determine starting point for the line or point
+      let startX, startY;
+
+      if (!lastEndPoint) {
+        // For the first line or point, set the start point anywhere
+        startX = clickX;
+        startY = clickY;
+        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
+      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // For subsequent lines, start at the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
+      } else {
+        // Invalid starting point for a line
+        return;
+      }
+
+      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      if (startX !== null && startY !== null) {
-        // Draw the final line
+      // If it's a point, draw a point
+      if (startX === endX && startY === endY) {
+        drawPoint(startX, startY);
+      } else {
+        // Otherwise, draw the line
         drawLine(startX, startY, endX, endY);
-
-        // Capture the line details
-        capturedLines.push({ startX, startY, endX, endY });
-        updateLineLog();
       }
 
-      // Update the start position for the next line
-      startX = endX;
-      startY = endY;
+      // Update the last endpoint
+      lastEndPoint = { x: endX, y: endY };
+
+      // Capture the line or point details
+      capturedLines.push({ startX, startY, endX, endY });
+      updateLineLog();
     });
 
-    // Drawing functions
+    // Function to draw a line
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
+      ctx.strokeStyle = "#000000"; // Black lines
+      ctx.lineWidth = 2;
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
+    // Function to draw a point
+    function drawPoint(x, y) {
+      ctx.beginPath();
+      ctx.fillStyle = "#000000"; // Black point
+      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
+      ctx.fill();
+    }
+
+    // Initialize the canvas
+    drawGrid();
   </script>
 
   <style>

From 4e49f21b91ca59a7276d764e9194e535f6d9209e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 21:00:17 +0100
Subject: [PATCH 150/165] CD

---
 .../faq/erstellung-energieausweise/index.astro   | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 1f334b6b..4521a5dc 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -204,14 +204,6 @@ import Layout from "#layouts/layoutCAD.astro";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // If it's a point, draw a point
-      if (startX === endX && startY === endY) {
-        drawPoint(startX, startY);
-      } else {
-        // Otherwise, draw the line
-        drawLine(startX, startY, endX, endY);
-      }
-
       // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
@@ -230,14 +222,6 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Function to draw a point
-    function drawPoint(x, y) {
-      ctx.beginPath();
-      ctx.fillStyle = "#000000"; // Black point
-      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
-      ctx.fill();
-    }
-
     // Initialize the canvas
     drawGrid();
   </script>

From bc395b249ef1d2cd1cc7aac159de8bd172b7cb4c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 21:15:17 +0100
Subject: [PATCH 151/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 305 ++++++++----------
 1 file changed, 128 insertions(+), 177 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 4521a5dc..c1661fdb 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,95 +1,75 @@
 ---
+import { useState, useEffect } from "react";
+
+interface Line {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+}
+
+let gridSize: number = 10;
+let capturedLines: Line[] = [];
+let firstStartPoint: { x: number; y: number } | null = null;
+let lastEndPoint: { x: number; y: number } | null = null;
+let snappedCursor: { x: number | null; y: number | null } = { x: null, y: null };
+
+// Utility: Snap a value to the grid
+function snapToGrid(value: number): number {
+  return Math.round(value / gridSize) * gridSize;
+}
+---
 
-import Layout from "#layouts/layoutCAD.astro";
-
----
-
-<Layout title="Erstellung und Bearbeitung von Energieausweisen">
-
-<h1>Erstellung und Bearbeitung von Energieausweisen</h1>
-
-<div class="mt-12 m-auto w-[90%] relative">
- <div class="flex-row">
-
-   <!-- Frage 1 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum dauert die Ausstellung meines Bedarfsausweises so lange?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Die Verzögerungen können durch die Umstellung auf die neue Berechnungsmethode nach DIN 18599 entstehen. Diese ist deutlich komplexer und erfordert zusätzliche Schritte, die momentan noch nicht vollständig automatisiert sind. Daher müssen die Berechnungen in einigen Fällen manuell im Büro durchgeführt werden.
-    </p>
-  </div>
-
-  <!-- Frage 2 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Unter normalen Umständen wird ein Bedarfsausweis innerhalb weniger Werktage ausgestellt. Aktuell kann es jedoch aufgrund der neuen Berechnungsmethode zu längeren Bearbeitungszeiten kommen.
-    </p>
-  </div>
-
-  <!-- Frage 3 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Nach Absenden der vollständigen Daten inklusive Fotos wird Ihr Antrag in der Regel innerhalb weniger Werktage bearbeitet.
-    </p>
-  </div>
-
-  <!-- Frage 4 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Was kann ich tun, wenn ich den Energieausweis dringend benötige?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Falls der Energieausweis dringend benötigt wird, z. B. für einen Banktermin oder Kaufinteressenten, können Sie:
-    </p>
-    <ul class="list-disc list-inside text-gray-600 mt-2">
-      <li>Den Anbieter kontaktieren und die Dringlichkeit mitteilen.</li>
-      <li>Um eine bevorzugte Bearbeitung bitten.</li>
-      <li>Ein mögliches Vorabdatum erfragen.</li>
-    </ul>
-  </div>
-
-  <!-- Frage 5 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Kann ich den Energieausweis beschleunigen lassen?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      In Einzelfällen ist eine beschleunigte Bearbeitung möglich, z. B. bei einer drohenden Frist. Wenden Sie sich direkt an den Anbieter und klären Sie, ob dies realisierbar ist.
-    </p>
-  </div>
-
-  <!-- Frage 6 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie werde ich über den Status meines Energieausweises informiert?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Der Status kann über die Vorgangsnummer oder per E-Mail-Abfrage beim Anbieter geprüft werden. Die Vorgangsnummer finden Sie in der E-Mail-Bestätigung.
-    </p>
-  </div>
-   
-</div>
-</div>
-
-
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CAD Program with Astro</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: none;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+</head>
+<body>
   <div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
+    <button id="clearButton">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
     <strong>Captured Points and Lines:</strong>
-    <ul id="line-log"></ul>
+    <ul id="lineLog"></ul>
   </div>
 
-  <script>
-    const canvas = document.getElementById('cadCanvas');
-    const ctx = canvas.getContext('2d');
-    const lineLog = document.getElementById('line-log');
-    const gridSize = 10; // Size of each grid cell in pixels
-    let capturedLines = [];
-    let firstStartPoint = null; // Tracks the start point of the first line
-    let lastEndPoint = null; // Tracks the end point of the last line
-
-    // Snap a coordinate to the nearest grid point
-    function snapToGrid(value) {
-      return Math.round(value / gridSize) * gridSize;
-    }
+  <script lang="ts">
+    const canvas = document.getElementById("cadCanvas") as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+    const lineLog = document.getElementById("lineLog") as HTMLUListElement;
+    const clearButton = document.getElementById("clearButton") as HTMLButtonElement;
 
     // Draw the grid
     function drawGrid() {
@@ -112,59 +92,12 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Clear the canvas and reset everything
-    function clearCanvas() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines = [];
-      firstStartPoint = null;
-      lastEndPoint = null;
-      drawGrid();
-      updateLineLog();
-    }
-
-    // Update the captured points and lines log
-    function updateLineLog() {
-      lineLog.innerHTML = capturedLines
-        .map((line, index) => {
-          const isPoint = line.startX === line.endX && line.startY === line.endY;
-          if (isPoint) {
-            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
-          }
-          const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
-        })
-        .join('');
-    }
-
-    // Calculate the length of a line
-    function calculateLineLength(x1, y1, x2, y2) {
-      const dx = x2 - x1;
-      const dy = y2 - y1;
-      return Math.sqrt(dx * dx + dy * dy);
-    }
-
-    // Mouse move event for snapping the cursor to the grid
-    canvas.addEventListener('mousemove', (e) => {
-      const mouseX = snapToGrid(e.offsetX);
-      const mouseY = snapToGrid(e.offsetY);
-
-      // Clear the canvas and redraw the grid
+    // Redraw the grid, lines, and cursor marker
+    function redrawAll() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       drawGrid();
-
-      // Redraw all existing lines and points
       redrawLinesAndPoints();
-
-      // Draw a marker at the snapped position
-      drawCursorMarker(mouseX, mouseY);
-    });
-
-    // Draw a marker to represent the snapped cursor position
-    function drawCursorMarker(x, y) {
-      ctx.beginPath();
-      ctx.fillStyle = "#ff0000"; // Red marker for cursor
-      ctx.arc(x, y, 4, 0, 2 * Math.PI);
-      ctx.fill();
+      drawCursorMarker(snappedCursor.x, snappedCursor.y);
     }
 
     // Redraw all existing lines and points
@@ -178,13 +111,52 @@ import Layout from "#layouts/layoutCAD.astro";
       }
     }
 
+    // Draw a line
+    function drawLine(x1: number, y1: number, x2: number, y2: number) {
+      ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black lines
+      ctx.lineWidth = 2;
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Draw a point
+    function drawPoint(x: number, y: number) {
+      ctx.beginPath();
+      ctx.fillStyle = "#000000"; // Black point
+      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
+      ctx.fill();
+    }
+
+    // Draw a marker to represent the snapped cursor position
+    function drawCursorMarker(x: number | null, y: number | null) {
+      if (x === null || y === null) return; // Don't draw if no position is set
+      ctx.beginPath();
+      ctx.fillStyle = "#ff0000"; // Red marker for cursor
+      ctx.arc(x, y, 4, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+
+    // Mouse move event for snapping the cursor to the grid
+    canvas.addEventListener("mousemove", (e: MouseEvent) => {
+      const mouseX = snapToGrid(e.offsetX);
+      const mouseY = snapToGrid(e.offsetY);
+
+      // Update the snapped cursor position
+      snappedCursor = { x: mouseX, y: mouseY };
+
+      // Redraw everything to reflect the new cursor position
+      redrawAll();
+    });
+
     // Mouse event for drawing lines and points
-    canvas.addEventListener('mousedown', (e) => {
+    canvas.addEventListener("mousedown", (e: MouseEvent) => {
       const clickX = snapToGrid(e.offsetX);
       const clickY = snapToGrid(e.offsetY);
 
       // Determine starting point for the line or point
-      let startX, startY;
+      let startX: number, startY: number;
 
       if (!lastEndPoint) {
         // For the first line or point, set the start point anywhere
@@ -204,6 +176,14 @@ import Layout from "#layouts/layoutCAD.astro";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
+      // If it's a point, draw a point
+      if (startX === endX && startY === endY) {
+        drawPoint(startX, startY);
+      } else {
+        // Otherwise, draw the line
+        drawLine(startX, startY, endX, endY);
+      }
+
       // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
@@ -212,48 +192,19 @@ import Layout from "#layouts/layoutCAD.astro";
       updateLineLog();
     });
 
-    // Function to draw a line
-    function drawLine(x1, y1, x2, y2) {
-      ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black lines
-      ctx.lineWidth = 2;
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
+    // Clear the canvas and reset everything
+    clearButton.addEventListener("click", () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      firstStartPoint = null;
+      lastEndPoint = null;
+      snappedCursor = { x: null, y: null };
+      drawGrid();
+      lineLog.innerHTML = ""; // Clear log
+    });
 
-    // Initialize the canvas
+    // Initialize
     drawGrid();
   </script>
-
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      border: 1px solid #ccc;
-      cursor: crosshair;
-    }
-    .controls {
-      margin: 10px;
-    }
-    .controls button {
-      margin-right: 5px;
-    }
-    .log {
-      margin: 10px;
-      width: 800px;
-      max-height: 150px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      padding: 10px;
-      background: #f9f9f9;
-    }
-  </style>
-
-</Layout>
\ No newline at end of file
+</body>
+</html>
\ No newline at end of file

From 88fdd8e4440dd23a236f62a92291e3cfcfef8160 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 21:25:50 +0100
Subject: [PATCH 152/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 224 ++++++++----------
 1 file changed, 98 insertions(+), 126 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index c1661fdb..262af7e1 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,30 +1,12 @@
 ---
-import { useState, useEffect } from "react";
-
-interface Line {
-  startX: number;
-  startY: number;
-  endX: number;
-  endY: number;
-}
-
-let gridSize: number = 10;
-let capturedLines: Line[] = [];
-let firstStartPoint: { x: number; y: number } | null = null;
-let lastEndPoint: { x: number; y: number } | null = null;
-let snappedCursor: { x: number | null; y: number | null } = { x: null, y: null };
-
-// Utility: Snap a value to the grid
-function snapToGrid(value: number): number {
-  return Math.round(value / gridSize) * gridSize;
-}
+const gridSize = 10; // Rastergröße in Pixeln
 ---
 
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CAD Program with Astro</title>
+  <title>Simple CAD Program - Grid Size 10</title>
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -36,7 +18,7 @@ function snapToGrid(value: number): number {
     }
     canvas {
       border: 1px solid #ccc;
-      cursor: none;
+      cursor: crosshair;
     }
     .controls {
       margin: 10px;
@@ -62,29 +44,36 @@ function snapToGrid(value: number): number {
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
     <strong>Captured Points and Lines:</strong>
-    <ul id="lineLog"></ul>
+    <ul id="line-log"></ul>
   </div>
 
-  <script lang="ts">
-    const canvas = document.getElementById("cadCanvas") as HTMLCanvasElement;
-    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-    const lineLog = document.getElementById("lineLog") as HTMLUListElement;
-    const clearButton = document.getElementById("clearButton") as HTMLButtonElement;
+  <script>
+    const canvas = document.getElementById('cadCanvas');
+    const ctx = canvas.getContext('2d');
+    const lineLog = document.getElementById('line-log');
+    let capturedLines = [];
+    let firstStartPoint = null; // Startpunkt der ersten Linie
+    let lastEndPoint = null; // Endpunkt der letzten Linie
 
-    // Draw the grid
+    // Koordinate an Raster ausrichten
+    function snapToGrid(value) {
+      return Math.round(value / ${gridSize}) * ${gridSize};
+    }
+
+    // Raster zeichnen
     function drawGrid() {
       ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.strokeStyle = "#e0e0e0"; // Rasterlinienfarbe
       ctx.lineWidth = 0.5;
 
-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
+      // Vertikale Linien
+      for (let x = 0; x <= canvas.width; x += ${gridSize}) {
         ctx.moveTo(x, 0);
         ctx.lineTo(x, canvas.height);
       }
 
-      // Draw horizontal lines
-      for (let y = 0; y <= canvas.height; y += gridSize) {
+      // Horizontale Linien
+      for (let y = 0; y <= canvas.height; y += ${gridSize}) {
         ctx.moveTo(0, y);
         ctx.lineTo(canvas.width, y);
       }
@@ -92,119 +81,102 @@ function snapToGrid(value: number): number {
       ctx.stroke();
     }
 
-    // Redraw the grid, lines, and cursor marker
-    function redrawAll() {
+    // Canvas zurücksetzen und Raster neu zeichnen
+    function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      firstStartPoint = null;
+      lastEndPoint = null;
       drawGrid();
-      redrawLinesAndPoints();
-      drawCursorMarker(snappedCursor.x, snappedCursor.y);
+      updateLineLog();
     }
 
-    // Redraw all existing lines and points
-    function redrawLinesAndPoints() {
-      for (const line of capturedLines) {
-        if (line.startX === line.endX && line.startY === line.endY) {
-          drawPoint(line.startX, line.startY);
-        } else {
-          drawLine(line.startX, line.startY, line.endX, line.endY);
-        }
+    // Log der Linien aktualisieren
+    function updateLineLog() {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          const isPoint = line.startX === line.endX && line.startY === line.endY;
+          if (isPoint) {
+            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
+          }
+          const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
+        })
+        .join('');
+    }
+
+    // Länge einer Linie berechnen
+    function calculateLineLength(x1, y1, x2, y2) {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      return Math.sqrt(dx * dx + dy * dy);
+    }
+
+    // Ereignis: Linie oder Punkt zeichnen
+    canvas.addEventListener('mousedown', (e) => {
+      const clickX = snapToGrid(e.offsetX);
+      const clickY = snapToGrid(e.offsetY);
+
+      // Startpunkt bestimmen
+      let startX, startY;
+
+      if (!lastEndPoint) {
+        // Erster Punkt kann beliebig sein
+        startX = clickX;
+        startY = clickY;
+        firstStartPoint = { x: startX, y: startY };
+      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // Folgende Punkte müssen an den letzten Endpunkt anschließen
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
+      } else {
+        return; // Ungültiger Punkt
       }
-    }
 
-    // Draw a line
-    function drawLine(x1: number, y1: number, x2: number, y2: number) {
+      // Endpunkt bestimmen
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      // Punkt oder Linie zeichnen
+      if (startX === endX && startY === endY) {
+        drawPoint(startX, startY);
+      } else {
+        drawLine(startX, startY, endX, endY);
+      }
+
+      // Endpunkt aktualisieren
+      lastEndPoint = { x: endX, y: endY };
+
+      // Linie oder Punkt im Log erfassen
+      capturedLines.push({ startX, startY, endX, endY });
+      updateLineLog();
+    });
+
+    // Linie zeichnen
+    function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black lines
+      ctx.strokeStyle = "#000000"; // Schwarze Linien
       ctx.lineWidth = 2;
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Draw a point
-    function drawPoint(x: number, y: number) {
+    // Punkt zeichnen
+    function drawPoint(x, y) {
       ctx.beginPath();
-      ctx.fillStyle = "#000000"; // Black point
-      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
+      ctx.fillStyle = "#000000"; // Schwarze Punkte
+      ctx.arc(x, y, 3, 0, 2 * Math.PI);
       ctx.fill();
     }
 
-    // Draw a marker to represent the snapped cursor position
-    function drawCursorMarker(x: number | null, y: number | null) {
-      if (x === null || y === null) return; // Don't draw if no position is set
-      ctx.beginPath();
-      ctx.fillStyle = "#ff0000"; // Red marker for cursor
-      ctx.arc(x, y, 4, 0, 2 * Math.PI);
-      ctx.fill();
-    }
-
-    // Mouse move event for snapping the cursor to the grid
-    canvas.addEventListener("mousemove", (e: MouseEvent) => {
-      const mouseX = snapToGrid(e.offsetX);
-      const mouseY = snapToGrid(e.offsetY);
-
-      // Update the snapped cursor position
-      snappedCursor = { x: mouseX, y: mouseY };
-
-      // Redraw everything to reflect the new cursor position
-      redrawAll();
-    });
-
-    // Mouse event for drawing lines and points
-    canvas.addEventListener("mousedown", (e: MouseEvent) => {
-      const clickX = snapToGrid(e.offsetX);
-      const clickY = snapToGrid(e.offsetY);
-
-      // Determine starting point for the line or point
-      let startX: number, startY: number;
-
-      if (!lastEndPoint) {
-        // For the first line or point, set the start point anywhere
-        startX = clickX;
-        startY = clickY;
-        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
-      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // For subsequent lines, start at the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else {
-        // Invalid starting point for a line
-        return;
-      }
-
-      // Determine the endpoint
-      const endX = snapToGrid(e.offsetX);
-      const endY = snapToGrid(e.offsetY);
-
-      // If it's a point, draw a point
-      if (startX === endX && startY === endY) {
-        drawPoint(startX, startY);
-      } else {
-        // Otherwise, draw the line
-        drawLine(startX, startY, endX, endY);
-      }
-
-      // Update the last endpoint
-      lastEndPoint = { x: endX, y: endY };
-
-      // Capture the line or point details
-      capturedLines.push({ startX, startY, endX, endY });
-      updateLineLog();
-    });
-
-    // Clear the canvas and reset everything
-    clearButton.addEventListener("click", () => {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines = [];
-      firstStartPoint = null;
-      lastEndPoint = null;
-      snappedCursor = { x: null, y: null };
+    // Event: Canvas initialisieren
+    window.addEventListener('load', () => {
       drawGrid();
-      lineLog.innerHTML = ""; // Clear log
     });
 
-    // Initialize
-    drawGrid();
+    // Event: Canvas leeren
+    document.getElementById('clearButton').addEventListener('click', clearCanvas);
   </script>
 </body>
 </html>
\ No newline at end of file

From b8d0c10c7673e53d0e07289b8659af4cc45d3d4e Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 21:32:58 +0100
Subject: [PATCH 153/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 153 ++++++++++++------
 1 file changed, 106 insertions(+), 47 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 262af7e1..425c2ae5 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,12 +1,73 @@
 ---
-const gridSize = 10; // Rastergröße in Pixeln
----
 
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Simple CAD Program - Grid Size 10</title>
+import Layout from "#layouts/layoutCAD.astro";
+
+---
+
+<Layout title="Erstellung und Bearbeitung von Energieausweisen">
+
+<h1>Erstellung und Bearbeitung von Energieausweisen</h1>
+
+<div class="mt-12 m-auto w-[90%] relative">
+ <div class="flex-row">
+
+   <!-- Frage 1 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum dauert die Ausstellung meines Bedarfsausweises so lange?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Die Verzögerungen können durch die Umstellung auf die neue Berechnungsmethode nach DIN 18599 entstehen. Diese ist deutlich komplexer und erfordert zusätzliche Schritte, die momentan noch nicht vollständig automatisiert sind. Daher müssen die Berechnungen in einigen Fällen manuell im Büro durchgeführt werden.
+    </p>
+  </div>
+
+  <!-- Frage 2 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Unter normalen Umständen wird ein Bedarfsausweis innerhalb weniger Werktage ausgestellt. Aktuell kann es jedoch aufgrund der neuen Berechnungsmethode zu längeren Bearbeitungszeiten kommen.
+    </p>
+  </div>
+
+  <!-- Frage 3 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Nach Absenden der vollständigen Daten inklusive Fotos wird Ihr Antrag in der Regel innerhalb weniger Werktage bearbeitet.
+    </p>
+  </div>
+
+  <!-- Frage 4 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Was kann ich tun, wenn ich den Energieausweis dringend benötige?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Falls der Energieausweis dringend benötigt wird, z. B. für einen Banktermin oder Kaufinteressenten, können Sie:
+    </p>
+    <ul class="list-disc list-inside text-gray-600 mt-2">
+      <li>Den Anbieter kontaktieren und die Dringlichkeit mitteilen.</li>
+      <li>Um eine bevorzugte Bearbeitung bitten.</li>
+      <li>Ein mögliches Vorabdatum erfragen.</li>
+    </ul>
+  </div>
+
+  <!-- Frage 5 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Kann ich den Energieausweis beschleunigen lassen?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      In Einzelfällen ist eine beschleunigte Bearbeitung möglich, z. B. bei einer drohenden Frist. Wenden Sie sich direkt an den Anbieter und klären Sie, ob dies realisierbar ist.
+    </p>
+  </div>
+
+  <!-- Frage 6 -->
+  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
+    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie werde ich über den Status meines Energieausweises informiert?</h2>
+    <p class="text-gray-600 text-xl mt-2">
+      Der Status kann über die Vorgangsnummer oder per E-Mail-Abfrage beim Anbieter geprüft werden. Die Vorgangsnummer finden Sie in der E-Mail-Bestätigung.
+    </p>
+  </div>
+   
+</div>
+</div>
+
+
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -36,10 +97,10 @@ const gridSize = 10; // Rastergröße in Pixeln
       background: #f9f9f9;
     }
   </style>
-</head>
-<body>
+
+
   <div class="controls">
-    <button id="clearButton">Clear</button>
+    <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
@@ -51,29 +112,30 @@ const gridSize = 10; // Rastergröße in Pixeln
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
+    const gridSize = 10; // Size of each grid cell in pixels
     let capturedLines = [];
-    let firstStartPoint = null; // Startpunkt der ersten Linie
-    let lastEndPoint = null; // Endpunkt der letzten Linie
+    let firstStartPoint = null; // Tracks the start point of the first line
+    let lastEndPoint = null; // Tracks the end point of the last line
 
-    // Koordinate an Raster ausrichten
+    // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
-      return Math.round(value / ${gridSize}) * ${gridSize};
+      return Math.round(value / gridSize) * gridSize;
     }
 
-    // Raster zeichnen
+    // Draw the grid
     function drawGrid() {
       ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Rasterlinienfarbe
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
       ctx.lineWidth = 0.5;
 
-      // Vertikale Linien
-      for (let x = 0; x <= canvas.width; x += ${gridSize}) {
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
         ctx.moveTo(x, 0);
         ctx.lineTo(x, canvas.height);
       }
 
-      // Horizontale Linien
-      for (let y = 0; y <= canvas.height; y += ${gridSize}) {
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
         ctx.moveTo(0, y);
         ctx.lineTo(canvas.width, y);
       }
@@ -81,7 +143,7 @@ const gridSize = 10; // Rastergröße in Pixeln
       ctx.stroke();
     }
 
-    // Canvas zurücksetzen und Raster neu zeichnen
+    // Clear the canvas and reset everything
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
@@ -91,7 +153,7 @@ const gridSize = 10; // Rastergröße in Pixeln
       updateLineLog();
     }
 
-    // Log der Linien aktualisieren
+    // Update the captured points and lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
@@ -105,78 +167,75 @@ const gridSize = 10; // Rastergröße in Pixeln
         .join('');
     }
 
-    // Länge einer Linie berechnen
+    // Calculate the length of a line
     function calculateLineLength(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
       return Math.sqrt(dx * dx + dy * dy);
     }
 
-    // Ereignis: Linie oder Punkt zeichnen
+    // Mouse event for drawing lines and points
     canvas.addEventListener('mousedown', (e) => {
       const clickX = snapToGrid(e.offsetX);
       const clickY = snapToGrid(e.offsetY);
 
-      // Startpunkt bestimmen
+      // Determine starting point for the line or point
       let startX, startY;
 
       if (!lastEndPoint) {
-        // Erster Punkt kann beliebig sein
+        // For the first line or point, set the start point anywhere
         startX = clickX;
         startY = clickY;
-        firstStartPoint = { x: startX, y: startY };
+        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
       } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // Folgende Punkte müssen an den letzten Endpunkt anschließen
+        // For subsequent lines, start at the last endpoint
         startX = lastEndPoint.x;
         startY = lastEndPoint.y;
       } else {
-        return; // Ungültiger Punkt
+        // Invalid starting point for a line
+        return;
       }
 
-      // Endpunkt bestimmen
+      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Punkt oder Linie zeichnen
+      // If it's a point, draw a point
       if (startX === endX && startY === endY) {
         drawPoint(startX, startY);
       } else {
+        // Otherwise, draw the line
         drawLine(startX, startY, endX, endY);
       }
 
-      // Endpunkt aktualisieren
+      // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
-      // Linie oder Punkt im Log erfassen
+      // Capture the line or point details
       capturedLines.push({ startX, startY, endX, endY });
       updateLineLog();
     });
 
-    // Linie zeichnen
+    // Function to draw a line
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Schwarze Linien
+      ctx.strokeStyle = "#000000"; // Black lines
       ctx.lineWidth = 2;
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Punkt zeichnen
+    // Function to draw a point
     function drawPoint(x, y) {
       ctx.beginPath();
-      ctx.fillStyle = "#000000"; // Schwarze Punkte
-      ctx.arc(x, y, 3, 0, 2 * Math.PI);
+      ctx.fillStyle = "#000000"; // Black point
+      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
       ctx.fill();
     }
 
-    // Event: Canvas initialisieren
-    window.addEventListener('load', () => {
-      drawGrid();
-    });
-
-    // Event: Canvas leeren
-    document.getElementById('clearButton').addEventListener('click', clearCanvas);
+    // Initialize the canvas
+    drawGrid();
   </script>
-</body>
-</html>
\ No newline at end of file
+
+</Layout>
\ No newline at end of file

From 8d9ee48855b641368acd9f3889e145357a4d6575 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 21:45:06 +0100
Subject: [PATCH 154/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 98 ++++++-------------
 1 file changed, 32 insertions(+), 66 deletions(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 425c2ae5..ca6751f1 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -68,7 +68,7 @@ import Layout from "#layouts/layoutCAD.astro";
 </div>
 
 
-  <style>
+   <style>
     body {
       font-family: Arial, sans-serif;
       display: flex;
@@ -98,13 +98,12 @@ import Layout from "#layouts/layoutCAD.astro";
     }
   </style>
 
-
   <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
-    <strong>Captured Points and Lines:</strong>
+    <strong>Captured Lines:</strong>
     <ul id="line-log"></ul>
   </div>
 
@@ -112,10 +111,11 @@ import Layout from "#layouts/layoutCAD.astro";
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
-    const gridSize = 10; // Size of each grid cell in pixels
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 5; // Size of each grid cell in pixels
+    let startX = null;
+    let startY = null;
     let capturedLines = [];
-    let firstStartPoint = null; // Tracks the start point of the first line
-    let lastEndPoint = null; // Tracks the end point of the last line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -143,99 +143,65 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Clear the canvas and reset everything
+    // Clear the canvas and reset logs
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
-      firstStartPoint = null;
-      lastEndPoint = null;
-      drawGrid();
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
 
-    // Update the captured points and lines log
+    // Update the captured lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
-          const isPoint = line.startX === line.endX && line.startY === line.endY;
-          if (isPoint) {
-            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
-          }
-          const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
         })
         .join('');
     }
 
-    // Calculate the length of a line
-    function calculateLineLength(x1, y1, x2, y2) {
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
-      return Math.sqrt(dx * dx + dy * dy);
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
     }
 
-    // Mouse event for drawing lines and points
+    // Mouse events
     canvas.addEventListener('mousedown', (e) => {
-      const clickX = snapToGrid(e.offsetX);
-      const clickY = snapToGrid(e.offsetY);
-
-      // Determine starting point for the line or point
-      let startX, startY;
-
-      if (!lastEndPoint) {
-        // For the first line or point, set the start point anywhere
-        startX = clickX;
-        startY = clickY;
-        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
-      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // For subsequent lines, start at the last endpoint
-        startX = lastEndPoint.x;
-        startY = lastEndPoint.y;
-      } else {
-        // Invalid starting point for a line
-        return;
-      }
-
-      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // If it's a point, draw a point
-      if (startX === endX && startY === endY) {
-        drawPoint(startX, startY);
-      } else {
-        // Otherwise, draw the line
+      if (startX !== null && startY !== null) {
+        // Draw the final line
         drawLine(startX, startY, endX, endY);
+
+        // Capture the line details
+        capturedLines.push({ startX, startY, endX, endY });
+        updateLineLog();
       }
 
-      // Update the last endpoint
-      lastEndPoint = { x: endX, y: endY };
-
-      // Capture the line or point details
-      capturedLines.push({ startX, startY, endX, endY });
-      updateLineLog();
+      // Update the start position for the next line
+      startX = endX;
+      startY = endY;
     });
 
-    // Function to draw a line
+    // Drawing functions
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black lines
-      ctx.lineWidth = 2;
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Function to draw a point
-    function drawPoint(x, y) {
-      ctx.beginPath();
-      ctx.fillStyle = "#000000"; // Black point
-      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
-      ctx.fill();
-    }
-
-    // Initialize the canvas
-    drawGrid();
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
   </script>
 
 </Layout>
\ No newline at end of file

From e595b5d4c43ea3994cecfa300de9af92730b71f8 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:11:34 +0100
Subject: [PATCH 155/165] CAD

---
 src/components/CAD.svelte                     | 145 +++++++++++++
 src/layouts/layoutCAD.astro                   |  59 -----
 .../energieausweis-erstellen/index.astro      |   4 +-
 .../erstellung-energieausweise/index.astro    | 201 +-----------------
 4 files changed, 154 insertions(+), 255 deletions(-)
 create mode 100644 src/components/CAD.svelte
 delete mode 100644 src/layouts/layoutCAD.astro

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
new file mode 100644
index 00000000..66cd29e4
--- /dev/null
+++ b/src/components/CAD.svelte
@@ -0,0 +1,145 @@
+ <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: crosshair;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+
+  <div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
+
+  <script type="ts">
+    
+    const canvas = document.getElementById('cadCanvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    const lineLog = document.getElementById('line-log') as HTMLUListElement;
+    const pixelToMeter: number = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize: number = 5; // Size of each grid cell in pixels
+    let startX: number | null = null;
+    let startY: number | null = null;
+
+    interface Line {
+      startX: number;
+      startY: number;
+      endX: number;
+      endY: number;
+    }
+
+    const capturedLines: Line[] = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value: number): number {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid(): void {
+      ctx.beginPath();
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.lineWidth = 0.5;
+
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+      }
+
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+      }
+
+      ctx.stroke();
+    }
+
+    // Clear the canvas and reset logs
+    function clearCanvas(): void {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines.length = 0;
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog(): void {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
+        })
+        .join('');
+    }
+
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1: number, y1: number, x2: number, y2: number): number {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', (e: MouseEvent): void => {
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      if (startX !== null && startY !== null) {
+        // Draw the final line
+        drawLine(startX, startY, endX, endY);
+
+        // Capture the line details
+        capturedLines.push({ startX, startY, endX, endY });
+        updateLineLog();
+      }
+
+      // Update the start position for the next line
+      startX = endX;
+      startY = endY;
+    });
+
+    // Drawing functions
+    function drawLine(x1: number, y1: number, x2: number, y2: number): void {
+      ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
+  </script>
+
diff --git a/src/layouts/layoutCAD.astro b/src/layouts/layoutCAD.astro
deleted file mode 100644
index 152a79e0..00000000
--- a/src/layouts/layoutCAD.astro
+++ /dev/null
@@ -1,59 +0,0 @@
----
-import "../style/global.css";
-import "../../svelte-dialogs.config"
-import Header from "#header/Header.astro";
-import Footer from "#footer/Footer.astro";
-import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
-import SidebarRight from "#sidebarRight/SidebarRight.astro";
-import { NotificationWrapper } from "@ibcornelsen/ui";
-
-export interface Props {
-	title: string;
-}
-
-const { title } = Astro.props;
-
----
-
-<!DOCTYPE html>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>
-			{title || "Simple CAD Program - Connected Lines"}
-		</title>
-</head>
-
-	<body>
-		<container class="w-full max-w-[1920px]">
-		
-		<Header />
-
-		<main
-			class="w-full p-0 grid
-			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
-			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
-			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
-			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
-			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
-		">
-
-		<SidebarLeft />
-		
-		<article class="box grow rounded-tl-none">
-		<slot />
-		</article>
-		
-		<SidebarRight />
-
-		</main>
-	
-		<Footer />
-		<NotificationWrapper client:load />
-	</container>
-	</body>
-</html>
-
-
diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 330ce7ed..e637bdd1 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,7 +1,7 @@
 ---
 
 import Layout from "#layouts/Layout.astro";
-import Widget2 from "#components/Widget.svelte";
+import Widget from "#components/Widget.svelte";
 
 ---
 
@@ -11,7 +11,7 @@ import Widget2 from "#components/Widget.svelte";
 <h1 class="text-3xl">Welcher Energieausweis?</h1>
 
 <div class="mt-12 m-auto w-[95%] relative">
-<Widget2 client:load />
+<Widget client:load />
 </div>
 
 
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index ca6751f1..3c26193d 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,207 +1,20 @@
 ---
 
-import Layout from "#layouts/layoutCAD.astro";
+import Layout from "#layouts/Layout.astro";
+import CAD from "#components/CAD.svelte";
 
 ---
 
-<Layout title="Erstellung und Bearbeitung von Energieausweisen">
 
-<h1>Erstellung und Bearbeitung von Energieausweisen</h1>
+<Layout title="Welcher Energieausweis">
 
-<div class="mt-12 m-auto w-[90%] relative">
- <div class="flex-row">
+<h1 class="text-3xl">Welcher Energieausweis?</h1>
 
-   <!-- Frage 1 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum dauert die Ausstellung meines Bedarfsausweises so lange?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Die Verzögerungen können durch die Umstellung auf die neue Berechnungsmethode nach DIN 18599 entstehen. Diese ist deutlich komplexer und erfordert zusätzliche Schritte, die momentan noch nicht vollständig automatisiert sind. Daher müssen die Berechnungen in einigen Fällen manuell im Büro durchgeführt werden.
-    </p>
-  </div>
-
-  <!-- Frage 2 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Unter normalen Umständen wird ein Bedarfsausweis innerhalb weniger Werktage ausgestellt. Aktuell kann es jedoch aufgrund der neuen Berechnungsmethode zu längeren Bearbeitungszeiten kommen.
-    </p>
-  </div>
-
-  <!-- Frage 3 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Nach Absenden der vollständigen Daten inklusive Fotos wird Ihr Antrag in der Regel innerhalb weniger Werktage bearbeitet.
-    </p>
-  </div>
-
-  <!-- Frage 4 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Was kann ich tun, wenn ich den Energieausweis dringend benötige?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Falls der Energieausweis dringend benötigt wird, z. B. für einen Banktermin oder Kaufinteressenten, können Sie:
-    </p>
-    <ul class="list-disc list-inside text-gray-600 mt-2">
-      <li>Den Anbieter kontaktieren und die Dringlichkeit mitteilen.</li>
-      <li>Um eine bevorzugte Bearbeitung bitten.</li>
-      <li>Ein mögliches Vorabdatum erfragen.</li>
-    </ul>
-  </div>
-
-  <!-- Frage 5 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Kann ich den Energieausweis beschleunigen lassen?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      In Einzelfällen ist eine beschleunigte Bearbeitung möglich, z. B. bei einer drohenden Frist. Wenden Sie sich direkt an den Anbieter und klären Sie, ob dies realisierbar ist.
-    </p>
-  </div>
-
-  <!-- Frage 6 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie werde ich über den Status meines Energieausweises informiert?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Der Status kann über die Vorgangsnummer oder per E-Mail-Abfrage beim Anbieter geprüft werden. Die Vorgangsnummer finden Sie in der E-Mail-Bestätigung.
-    </p>
-  </div>
-   
-</div>
+<div class="mt-12 m-auto w-[95%] relative">
+<CAD client:load />
 </div>
 
 
-   <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      border: 1px solid #ccc;
-      cursor: crosshair;
-    }
-    .controls {
-      margin: 10px;
-    }
-    .controls button {
-      margin-right: 5px;
-    }
-    .log {
-      margin: 10px;
-      width: 800px;
-      max-height: 150px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      padding: 10px;
-      background: #f9f9f9;
-    }
-  </style>
 
-  <div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
-  </div>
-  <canvas id="cadCanvas" width="800" height="600"></canvas>
-  <div class="log">
-    <strong>Captured Lines:</strong>
-    <ul id="line-log"></ul>
-  </div>
+</Layout>
 
-  <script>
-    const canvas = document.getElementById('cadCanvas');
-    const ctx = canvas.getContext('2d');
-    const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 5; // Size of each grid cell in pixels
-    let startX = null;
-    let startY = null;
-    let capturedLines = [];
-
-    // Snap a coordinate to the nearest grid point
-    function snapToGrid(value) {
-      return Math.round(value / gridSize) * gridSize;
-    }
-
-    // Draw the grid
-    function drawGrid() {
-      ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
-      ctx.lineWidth = 0.5;
-
-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, canvas.height);
-      }
-
-      // Draw horizontal lines
-      for (let y = 0; y <= canvas.height; y += gridSize) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(canvas.width, y);
-      }
-
-      ctx.stroke();
-    }
-
-    // Clear the canvas and reset logs
-    function clearCanvas() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines = [];
-      startX = null;
-      startY = null;
-      drawGrid(); // Redraw the grid after clearing
-      updateLineLog();
-    }
-
-    // Update the captured lines log
-    function updateLineLog() {
-      lineLog.innerHTML = capturedLines
-        .map((line, index) => {
-          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
-        })
-        .join('');
-    }
-
-    // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
-      const dx = x2 - x1;
-      const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
-    }
-
-    // Mouse events
-    canvas.addEventListener('mousedown', (e) => {
-      const endX = snapToGrid(e.offsetX);
-      const endY = snapToGrid(e.offsetY);
-
-      if (startX !== null && startY !== null) {
-        // Draw the final line
-        drawLine(startX, startY, endX, endY);
-
-        // Capture the line details
-        capturedLines.push({ startX, startY, endX, endY });
-        updateLineLog();
-      }
-
-      // Update the start position for the next line
-      startX = endX;
-      startY = endY;
-    });
-
-    // Drawing functions
-    function drawLine(x1, y1, x2, y2) {
-      ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
-
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
-  </script>
-
-</Layout>
\ No newline at end of file

From 625ed56b5077e499a6c51a393a0e64256a7af8fa Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:27:02 +0100
Subject: [PATCH 156/165] CAD

---
 src/components/CAD.svelte                     | 33 +-------
 src/layouts/cadLayout.astro                   | 83 +++++++++++++++++++
 .../erstellung-energieausweise/index.astro    |  4 +-
 3 files changed, 87 insertions(+), 33 deletions(-)
 create mode 100644 src/layouts/cadLayout.astro

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index 66cd29e4..8ba546a6 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -1,33 +1,4 @@
- <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      border: 1px solid #ccc;
-      cursor: crosshair;
-    }
-    .controls {
-      margin: 10px;
-    }
-    .controls button {
-      margin-right: 5px;
-    }
-    .log {
-      margin: 10px;
-      width: 800px;
-      max-height: 150px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      padding: 10px;
-      background: #f9f9f9;
-    }
-  </style>
-
+ 
   <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
@@ -38,7 +9,7 @@
   </div>
 
   <script type="ts">
-    
+
     const canvas = document.getElementById('cadCanvas') as HTMLCanvasElement;
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
     const lineLog = document.getElementById('line-log') as HTMLUListElement;
diff --git a/src/layouts/cadLayout.astro b/src/layouts/cadLayout.astro
new file mode 100644
index 00000000..e897e2be
--- /dev/null
+++ b/src/layouts/cadLayout.astro
@@ -0,0 +1,83 @@
+---
+import "../style/global.css";
+import "../../svelte-dialogs.config"
+import Header from "#header/Header.astro";
+import Footer from "#footer/Footer.astro";
+import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
+import SidebarRight from "#sidebarRight/SidebarRight.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple CAD Program - Thick Black Lines</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: crosshair;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+</head>
+
+<body>
+		<container class="w-full max-w-[1920px]">
+		
+		<Header />
+
+		<main
+			class="w-full p-0 grid
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
+			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
+			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
+			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
+		">
+
+		<SidebarLeft />
+		
+		<article class="box grow rounded-tl-none">
+		<slot />
+		</article>
+		
+		<SidebarRight />
+
+		</main>
+	
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</body>
+</html>
\ No newline at end of file
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 3c26193d..a5b7607d 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -6,9 +6,9 @@ import CAD from "#components/CAD.svelte";
 ---
 
 
-<Layout title="Welcher Energieausweis">
+<Layout title="CAD">
 
-<h1 class="text-3xl">Welcher Energieausweis?</h1>
+<h1 class="text-3xl">CAD</h1>
 
 <div class="mt-12 m-auto w-[95%] relative">
 <CAD client:load />

From c5be86bcb18a92729c245bd00273ffd71413fcb1 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:33:24 +0100
Subject: [PATCH 157/165] CAD

---
 src/components/CAD.svelte | 52 +++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index 8ba546a6..5b6a2636 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -8,32 +8,32 @@
     <ul id="line-log"></ul>
   </div>
 
-  <script type="ts">
+  <div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
 
-    const canvas = document.getElementById('cadCanvas') as HTMLCanvasElement;
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-    const lineLog = document.getElementById('line-log') as HTMLUListElement;
-    const pixelToMeter: number = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize: number = 5; // Size of each grid cell in pixels
-    let startX: number | null = null;
-    let startY: number | null = null;
-
-    interface Line {
-      startX: number;
-      startY: number;
-      endX: number;
-      endY: number;
-    }
-
-    const capturedLines: Line[] = [];
+  <script>
+    const canvas = document.getElementById('cadCanvas');
+    const ctx = canvas.getContext('2d');
+    const lineLog = document.getElementById('line-log');
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 5; // Size of each grid cell in pixels
+    let startX = null;
+    let startY = null;
+    let capturedLines = [];
 
     // Snap a coordinate to the nearest grid point
-    function snapToGrid(value: number): number {
+    function snapToGrid(value) {
       return Math.round(value / gridSize) * gridSize;
     }
 
     // Draw the grid
-    function drawGrid(): void {
+    function drawGrid() {
       ctx.beginPath();
       ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
       ctx.lineWidth = 0.5;
@@ -54,9 +54,9 @@
     }
 
     // Clear the canvas and reset logs
-    function clearCanvas(): void {
+    function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines.length = 0;
+      capturedLines = [];
       startX = null;
       startY = null;
       drawGrid(); // Redraw the grid after clearing
@@ -64,17 +64,17 @@
     }
 
     // Update the captured lines log
-    function updateLineLog(): void {
+    function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
           const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
+          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
         })
         .join('');
     }
 
     // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1: number, y1: number, x2: number, y2: number): number {
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
       const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
@@ -82,7 +82,7 @@
     }
 
     // Mouse events
-    canvas.addEventListener('mousedown', (e: MouseEvent): void => {
+    canvas.addEventListener('mousedown', (e) => {
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
@@ -101,7 +101,7 @@
     });
 
     // Drawing functions
-    function drawLine(x1: number, y1: number, x2: number, y2: number): void {
+    function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
       ctx.strokeStyle = "#000000"; // Black color for lines
       ctx.lineWidth = 2; // Thicker lines

From 54cbeb856bf8f1a319f9581c855340aeee8b1fc7 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:37:49 +0100
Subject: [PATCH 158/165] CAD

---
 src/components/CAD.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index 5b6a2636..f56f79d0 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -68,7 +68,7 @@
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
           const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
+          return <li>line-log ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
         })
         .join('');
     }

From fafe43b98271b91fbcec2691ad8d8339a49b6cf3 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:45:07 +0100
Subject: [PATCH 159/165] CAD

---
 src/components/CAD.svelte | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index f56f79d0..3dc73f04 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -53,26 +53,6 @@
       ctx.stroke();
     }
 
-    // Clear the canvas and reset logs
-    function clearCanvas() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines = [];
-      startX = null;
-      startY = null;
-      drawGrid(); // Redraw the grid after clearing
-      updateLineLog();
-    }
-
-    // Update the captured lines log
-    function updateLineLog() {
-      lineLog.innerHTML = capturedLines
-        .map((line, index) => {
-          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return <li>line-log ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
-        })
-        .join('');
-    }
-
     // Calculate the length of a line in meters
     function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;

From 324c8f3dbeebad1a7649a32ee185a22145e26544 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:52:55 +0100
Subject: [PATCH 160/165] CAD

---
 src/components/CAD.svelte                     | 77 ------------------
 .../erstellung-energieausweise/index.astro    | 78 +++++++++++++++++++
 2 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index 3dc73f04..8d6bc22a 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -17,80 +17,3 @@
     <ul id="line-log"></ul>
   </div>
 
-  <script>
-    const canvas = document.getElementById('cadCanvas');
-    const ctx = canvas.getContext('2d');
-    const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 5; // Size of each grid cell in pixels
-    let startX = null;
-    let startY = null;
-    let capturedLines = [];
-
-    // Snap a coordinate to the nearest grid point
-    function snapToGrid(value) {
-      return Math.round(value / gridSize) * gridSize;
-    }
-
-    // Draw the grid
-    function drawGrid() {
-      ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
-      ctx.lineWidth = 0.5;
-
-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, canvas.height);
-      }
-
-      // Draw horizontal lines
-      for (let y = 0; y <= canvas.height; y += gridSize) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(canvas.width, y);
-      }
-
-      ctx.stroke();
-    }
-
-    // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
-      const dx = x2 - x1;
-      const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
-    }
-
-    // Mouse events
-    canvas.addEventListener('mousedown', (e) => {
-      const endX = snapToGrid(e.offsetX);
-      const endY = snapToGrid(e.offsetY);
-
-      if (startX !== null && startY !== null) {
-        // Draw the final line
-        drawLine(startX, startY, endX, endY);
-
-        // Capture the line details
-        capturedLines.push({ startX, startY, endX, endY });
-        updateLineLog();
-      }
-
-      // Update the start position for the next line
-      startX = endX;
-      startY = endY;
-    });
-
-    // Drawing functions
-    function drawLine(x1, y1, x2, y2) {
-      ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
-
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
-  </script>
-
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index a5b7607d..b86ad8e2 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -3,6 +3,84 @@
 import Layout from "#layouts/Layout.astro";
 import CAD from "#components/CAD.svelte";
 
+<script>
+    const canvas = document.getElementById('cadCanvas');
+    const ctx = canvas.getContext('2d');
+    const lineLog = document.getElementById('line-log');
+    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize = 5; // Size of each grid cell in pixels
+    let startX = null;
+    let startY = null;
+    let capturedLines = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value) {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid() {
+      ctx.beginPath();
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.lineWidth = 0.5;
+
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+      }
+
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+      }
+
+      ctx.stroke();
+    }
+
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', (e) => {
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      if (startX !== null && startY !== null) {
+        // Draw the final line
+        drawLine(startX, startY, endX, endY);
+
+        // Capture the line details
+        capturedLines.push({ startX, startY, endX, endY });
+        updateLineLog();
+      }
+
+      // Update the start position for the next line
+      startX = endX;
+      startY = endY;
+    });
+
+    // Drawing functions
+    function drawLine(x1, y1, x2, y2) {
+      ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
+  </script>
+
+
 ---
 
 

From 1561d0a2c123683314f136e7cbeaaf1e0ef0a96c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:11:25 +0100
Subject: [PATCH 161/165] CAD

---
 src/components/CAD.svelte                     | 19 +------
 .../erstellung-energieausweise/index.astro    | 55 +++++++++++++------
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index 8d6bc22a..64d2f399 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -1,19 +1,2 @@
  
-  <div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
-  </div>
-  <canvas id="cadCanvas" width="800" height="600"></canvas>
-  <div class="log">
-    <strong>Captured Lines:</strong>
-    <ul id="line-log"></ul>
-  </div>
-
-  <div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
-  </div>
-  <canvas id="cadCanvas" width="800" height="600"></canvas>
-  <div class="log">
-    <strong>Captured Lines:</strong>
-    <ul id="line-log"></ul>
-  </div>
-
+  
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index b86ad8e2..799db7ac 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,9 +1,24 @@
 ---
 
-import Layout from "#layouts/Layout.astro";
-import CAD from "#components/CAD.svelte";
+import Layout from "#layouts/cadLayout.astro";
 
-<script>
+---
+
+
+<Layout title="CAD">
+
+<h1 class="text-3xl">CAD</h1>
+
+<div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
+
+  <script>
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
@@ -39,6 +54,26 @@ import CAD from "#components/CAD.svelte";
       ctx.stroke();
     }
 
+    // Clear the canvas and reset logs
+    function clearCanvas() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog() {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
+        })
+        .join('');
+    }
+
     // Calculate the length of a line in meters
     function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;
@@ -80,19 +115,5 @@ import CAD from "#components/CAD.svelte";
     drawGrid(); // Draw the grid when the page loads
   </script>
 
-
----
-
-
-<Layout title="CAD">
-
-<h1 class="text-3xl">CAD</h1>
-
-<div class="mt-12 m-auto w-[95%] relative">
-<CAD client:load />
-</div>
-
-
-
 </Layout>
 

From 7fd868ad2877d4cb09b3e4423a84883cfc88aff4 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:18:52 +0100
Subject: [PATCH 162/165] CAD

---
 src/pages/faq/erstellung-energieausweise/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 799db7ac..1a85dc40 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -69,7 +69,7 @@ import Layout from "#layouts/cadLayout.astro";
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
           const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
-          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
+         return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
         })
         .join('');
     }

From b1986b692ae31f6e3b9bd6c7749fe5177c77ecb6 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:22:35 +0100
Subject: [PATCH 163/165] CAD

---
 src/pages/faq/erstellung-energieausweise/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 1a85dc40..f2223024 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -23,7 +23,7 @@ import Layout from "#layouts/cadLayout.astro";
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 5; // Size of each grid cell in pixels
+    const gridSize = 20; // Size of each grid cell in pixels
     let startX = null;
     let startY = null;
     let capturedLines = [];

From 326b688a732206dd5b7461350bc10e49a220fe1d Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:32:34 +0100
Subject: [PATCH 164/165] CAD

---
 src/components/CAD.svelte                            | 2 --
 src/pages/faq/erstellung-energieausweise/index.astro | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)
 delete mode 100644 src/components/CAD.svelte

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
deleted file mode 100644
index 64d2f399..00000000
--- a/src/components/CAD.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
- 
-  
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index f2223024..b4096e2b 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -22,7 +22,7 @@ import Layout from "#layouts/cadLayout.astro";
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const pixelToMeter = 0.025; // Conversion factor: 1 pixel = 0.025 meter
     const gridSize = 20; // Size of each grid cell in pixels
     let startX = null;
     let startY = null;

From 9fea70a00a18faeb4dd9a577d00f225218213cf8 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Tue, 10 Dec 2024 02:02:32 +0100
Subject: [PATCH 165/165] CAD

---
 .../erstellung-energieausweise/index.astro    | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index b4096e2b..0ac8fbf8 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -111,6 +111,61 @@ import Layout from "#layouts/cadLayout.astro";
       ctx.stroke();
     }
 
+
+
+// Track whether we are actively drawing a temporary line
+let isMouseOverCanvas = false;
+
+// Event to draw a temporary line
+canvas.addEventListener('mousemove', (e) => {
+  if (!lastEndPoint || !isMouseOverCanvas) return;
+
+  const cursorX = snapToGrid(e.offsetX);
+  const cursorY = snapToGrid(e.offsetY);
+
+  // Clear the canvas (excluding the captured drawings)
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawGrid();
+
+  // Redraw all captured lines
+  capturedLines.forEach(line => {
+    drawLine(line.startX, line.startY, line.endX, line.endY);
+  });
+
+  // Draw the temporary line
+  drawTemporaryLine(lastEndPoint.x, lastEndPoint.y, cursorX, cursorY);
+});
+
+// Mouse enters canvas
+canvas.addEventListener('mouseenter', () => {
+  isMouseOverCanvas = true;
+});
+
+// Mouse leaves canvas
+canvas.addEventListener('mouseleave', () => {
+  isMouseOverCanvas = false;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawGrid();
+
+  // Redraw all captured lines
+  capturedLines.forEach(line => {
+    drawLine(line.startX, line.startY, line.endX, line.endY);
+  });
+});
+
+// Function to draw a temporary line
+function drawTemporaryLine(x1, y1, x2, y2) {
+  ctx.beginPath();
+  ctx.strokeStyle = "#aaaaaa"; // Light gray for the temporary line
+  ctx.lineWidth = 1;
+  ctx.setLineDash([5, 5]); // Dashed line
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+  ctx.setLineDash([]); // Reset to solid lines for permanent drawings
+}
+
+
     // Initialize canvas
     drawGrid(); // Draw the grid when the page loads
   </script>
