diff --git a/src/components/Widget.svelte b/src/components/Widget.svelte
index 51b684e8..2ddd6156 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/design/content/banner-saeule.svelte b/src/components/design/content/banner-saeule.svelte
index f4967e64..4a622de2 100644
--- a/src/components/design/content/banner-saeule.svelte
+++ b/src/components/design/content/banner-saeule.svelte
@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 
-<div class="mt-12 m-auto w-[90%] relative">
 
+<div class="mt-12 m-auto w-[90%] relative">
 <div id="saeulen">
 
     <div class="saeule">
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..3980145b
--- /dev/null
+++ b/src/components/design/content/card-BA-widget.svelte
@@ -0,0 +1,56 @@
+<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="">
+
+    <h2>Bedarfssausweis Wohngebäude</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_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>
+        </div>
+    </div>
+
+    <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>
+        <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 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
+            " >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>
+
+
+<style lang="scss">
+    #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
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..a420745d
--- /dev/null
+++ b/src/components/design/content/card-BAG-widget.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-BAG-promo" class="box card bg-white px-6 py-4 mb-5"> 
+	<div class="">
+
+	<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">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>
+        <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>
+
+            <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">
+    #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-VA-widget.svelte b/src/components/design/content/card-VA-widget.svelte
new file mode 100644
index 00000000..0baabee1
--- /dev/null
+++ b/src/components/design/content/card-VA-widget.svelte
@@ -0,0 +1,57 @@
+<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="">
+
+	<h2>Verbrauchsausweis Wohngebäude</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_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">
+        <div class="variante">einfach</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>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" 
+            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>
+
+
+<style lang="scss">
+    #card-VA-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
new file mode 100644
index 00000000..abd7a744
--- /dev/null
+++ b/src/components/design/content/card-VAG-widget.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<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-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">
+    #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
diff --git a/src/components/design/content/faq.svelte b/src/components/design/content/faq.svelte
new file mode 100644
index 00000000..9159a1c0
--- /dev/null
+++ b/src/components/design/content/faq.svelte
@@ -0,0 +1,91 @@
+
+<div class="mt-12 m-auto w-[90%] relative">
+<div class="flex-row">
+
+  <!-- Allgemeines -->
+  <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>
+      <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 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>
+      <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 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>
+      <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 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>
+      <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 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>
+      <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 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>
+      <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 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>
+      <li>Was passiert, wenn der Energieausweis nicht rechtzeitig fertiggestellt wird?</li>
+    </ul>
+  </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 b7ca6e72..9a8d186e 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -102,14 +102,14 @@ 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">
       {#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>
@@ -171,6 +171,23 @@ 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="{'/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>
+    {/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>
+
+<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>
@@ -180,9 +197,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>
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/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
new file mode 100644
index 00000000..e637bdd1
--- /dev/null
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -0,0 +1,20 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+import Widget from "#components/Widget.svelte";
+
+---
+
+
+<Layout title="Welcher Energieausweis">
+
+<h1 class="text-3xl">Welcher Energieausweis?</h1>
+
+<div class="mt-12 m-auto w-[95%] relative">
+<Widget client:load />
+</div>
+
+
+
+</Layout>
+
diff --git a/src/pages/faq/allgemeines-18599/index.astro b/src/pages/faq/allgemeines-18599/index.astro
new file mode 100644
index 00000000..cebfe5f5
--- /dev/null
+++ b/src/pages/faq/allgemeines-18599/index.astro
@@ -0,0 +1,86 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Allgemeines zur Berechnungsmethode und Norm DIN 18599">
+
+<h1>Allgemeines zur Berechnungsmethode und Norm DIN 18599</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 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-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.
+    </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">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-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.
+    </p>
+  </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">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-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:
+    </p>
+    <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>
+      <li>Die Umstellung auf diese Berechnungsmethode ist eine gesetzliche Vorgabe.</li>
+    </ul>
+  </div>
+
+  <!-- Frage 7 -->
+    <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.
+    </p>
+  </div>
+
+  <!-- Frage 8 -->
+    <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.
+    </p>
+  </div>
+   
+</div>
+</div>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
new file mode 100644
index 00000000..0ac8fbf8
--- /dev/null
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -0,0 +1,174 @@
+---
+
+import Layout from "#layouts/cadLayout.astro";
+
+---
+
+
+<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');
+    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;
+    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();
+    }
+
+
+
+// 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>
+
+</Layout>
+
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
diff --git a/src/pages/faq/index.astro b/src/pages/faq/index.astro
index 78f36a1b..df3bcbd9 100644
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -2,7 +2,433 @@
 
 import Layout from "#layouts/Layout.astro";
 
-
 ---
 
-<Layout title="FAQ - IBCornelsen"></Layout>
\ No newline at end of file
+<Layout title="FAQ - Sammmlung">
+
+<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>
+    <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">Glossar: 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">
+      <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>
+    <p class="faq__section-keywords">Glossar: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</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>
+    <p class="faq__section-keywords">Glossar: Pläne, Übermittlung, E-Mail, ID-Nummer</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>
+    <p class="faq__section-keywords">Glossar: 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.
+    </p>
+    <p class="faq__section-keywords">Glossar: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, 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 (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
+    </p>
+    <p class="faq__section-keywords">Glossar: Rückruf, Informationen, Unterlagen, Kontaktzeiten</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>
+    <p class="faq__section-keywords">Glossar: Pläne, Versand, Berechnung, Energieausweis, 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.
+    </p>
+    <p class="faq__section-keywords">Glossar: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</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.
+    </p>
+    <p class="faq__section-keywords">Glossar: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
+  </div>
+
+  <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>
+      <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">Glossar: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</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 Dachflächenfenstern und deren Laibungen sowie sichtbaren Dämmungen oder Isolierungen.
+    </p>
+    <p class="faq__section-keywords">Glossar: 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>
+    </ul>
+    <p class="faq__section-keywords">Glossar: 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>
+    <p class="faq__section-keywords">Glossar: 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">Glossar: 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></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">Glossar: Zahlungsmethoden, Rechnugskauf, Sofortüberweisung, PayPal, Kreditkarte, Visa, Mastercard, 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">Glossar: 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">Glossar: Rechnungskauf, Rechnung, Zahlungsaufforderung, Lieferung</p>
+  </div>
+
+  <div class="faq__section">
+    <h2 class="faq__section-title">Kann ich den Betrag nachträglich überweisen?</h2>
+    <p class="faq__section-content">
+    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">Glossar: Überweisung, Rechnungskauf, 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">Glossar: 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 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">Glossar: 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">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">
+    Glossar: 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 komplett ausgefüllt wurden. Solche Felder werden rot markiert und müssen ausgefüllt werden.
+  </p>
+  <p class="faq__section-keywords">
+    Glossar: 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 schlüssig, wird der Energieverbrauchsausweis ausgestellt.
+  </p>
+  <p class="faq__section-keywords">
+    Glossar: 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, Kreditkarte, Sofort) oder nachträglich per <span class="faq__section-highlight">Rechnung</span> (Überweisung) bezahlt werden.
+  </p>
+  <p class="faq__section-keywords">
+    Glossar: 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. Auf Wunsch erfolgt gegen eine Gebühr zusätzlich der Postversand.
+  </p>
+  <p class="faq__section-keywords">
+    Glossar: Lieferung, E-Mail-Adresse, Versand, Postversand, Energieverbrauch, Ausweis-Erstellung
+  </p>
+</div>
+
+<div class="faq__section">
+  <h2 class="faq__section-title">Was tun, wenn bei klick auf "weiter" nichts passiert?</h2>
+  <p class="faq__section-content">
+    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">
+    Glossar: 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 (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: 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">
+    Glossar: Kundenservice, Kontakt, Hilfe, E-Mail, Telefon, Energieverbrauch, Ausweis-Erstellung
+  </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">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">
+    <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">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">
+    <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">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">
+    <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">Glossar: 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">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">
+    <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">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">
+    <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">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">
+    <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">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">
+    <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">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">
+    <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">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">
+    <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">Glossar: GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG</p>
+  </div>
+
+</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-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;
+    }
+
+ 	&-keywords {
+      @apply text-sm italic text-gray-500 mt-2;
+    }
+
+	&-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
diff --git a/src/pages/glossar/index.astro b/src/pages/glossar/index.astro
new file mode 100644
index 00000000..b75bddd9
--- /dev/null
+++ b/src/pages/glossar/index.astro
@@ -0,0 +1,223 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Glossar">
+
+<h1 class="text-3xl">Glossar</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 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.<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>
+  </div>
+
+  <div class="glossar__section">
+    <h2 class="glossar__section-title">B</h2>
+    <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 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>
+
+  <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 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.<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>
+  </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. 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>
+
+  <div class="glossar__section">
+    <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>
+  </div>
+
+  <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>
+  </div>
+
+  <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 (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>
+
+  <div class="glossar__section">
+    <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.<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>
+
+  <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. 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.<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>
+
+  <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. 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>
+  </div>
+
+  <div class="glossar__section">
+    <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 vermeintlich ungewollte 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">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>
+  </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