diff --git a/public/images/widget/gewerbegebaeude.svg b/public/images/widget/gewerbegebaeude.svg
new file mode 100644
index 00000000..b1187c37
--- /dev/null
+++ b/public/images/widget/gewerbegebaeude.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ff7d26;
+      }
+
+      .cls-2 {
+        fill: #445096;
+      }
+    </style>
+  </defs>
+  <g id="Wellen">
+    <path class="cls-1" d="M271,66.01c-1.29,5.97-4.05,11.58-7.44,16.72-3.45,5.11-7.71,9.7-12.58,13.54-4.84,3.88-10.32,6.93-16.02,9.32-5.73,2.35-11.73,3.94-17.8,4.98-12.17,1.95-24.54,1.59-36.56-.24-12.04-1.81-23.79-5.03-35.08-9.32,11.79,2.6,23.6,4.87,35.49,6.03,5.94.54,11.89.93,17.82.81,5.93-.06,11.84-.48,17.66-1.48,11.62-1.85,22.92-5.93,32.54-12.75,4.79-3.42,9.17-7.47,12.89-12.12,3.73-4.64,6.91-9.81,9.09-15.48Z"/>
+    <path class="cls-1" d="M0,87.93c5.04-3.14,10.5-5.58,16.05-7.75,5.56-2.17,11.29-3.9,17.08-5.42,11.63-2.86,23.59-4.58,35.64-5,12.04-.44,24.14.34,36.07,2.2,5.97.92,11.88,2.16,17.74,3.6,2.92.72,5.86,1.55,8.71,2.38,2.85.83,5.61,1.64,8.41,2.4,5.59,1.59,11.21,3.07,16.84,4.41,5.62,1.39,11.28,2.59,16.93,3.66,11.31,2.11,22.72,3.52,34.02,3.34,11.25-.23,22.53-2.12,32.47-7.4,2.49-1.29,4.9-2.77,7.2-4.44,2.3-1.67,4.45-3.55,6.55-5.53,4.16-3.99,7.81-8.6,11.16-13.48-2.24,5.48-5.15,10.75-8.81,15.56-3.65,4.83-8.15,9.1-13.22,12.64-5.12,3.47-10.81,6.13-16.72,8.01-5.91,1.89-12.03,2.97-18.13,3.53-12.24,1.1-24.42.14-36.31-1.64-11.9-1.82-23.57-4.56-35.04-7.76-2.87-.81-5.75-1.67-8.55-2.51-2.79-.85-5.52-1.61-8.31-2.36-5.54-1.51-11.15-2.75-16.78-3.85-11.27-2.16-22.72-3.47-34.23-3.89-11.51-.39-23.1.02-34.61,1.56-5.77.69-11.5,1.73-17.22,2.97-2.86.62-5.7,1.32-8.52,2.12-2.84.76-5.65,1.64-8.43,2.64Z"/>
+  </g>
+  <g id="Gewerbegebaeude">
+    <path class="cls-2" d="M102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
+    <path class="cls-2" d="M254.81,65.15c-.02-6.59,0-45.44,0-45.44l-24.88-6.69v66.43s11.96-.84,24.22-12.71c.42-.41.66-.99.65-1.6Z"/>
+    <g>
+      <polygon class="cls-2" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
+      <polygon class="cls-2" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
+      <polygon class="cls-2" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
+      <polygon class="cls-2" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
+      <polygon class="cls-2" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
+      <path class="cls-2" d="M122.76,70.93c3.1.69,6.21,1.48,9.24,2.28,1.2.32,2.39.63,3.57.94l91.08.55v-5.86l-119.43-.7h-.09c5.22.81,10.49,1.66,15.63,2.79Z"/>
+    </g>
+    <g>
+      <polygon class="cls-2" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
+      <polygon class="cls-2" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
+      <path class="cls-2" d="M43.86,67.57c7.08-1.11,14.25-1.82,21.44-2.12v-5.15l-55.63,4.35.17,7.82,34.02-4.9Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/widget/wohngebaeude.svg b/public/images/widget/wohngebaeude.svg
new file mode 100644
index 00000000..6fb83e9c
--- /dev/null
+++ b/public/images/widget/wohngebaeude.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 272 112">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #445096;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #c6c6c6;
+      }
+
+      .cls-4 {
+        display: none;
+      }
+
+      .cls-3 {
+        fill: #ff7d26;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_4" data-name="Ebene 4">
+    <path class="cls-3" d="M272,66c-1.3,6-4,11.6-7.4,16.7-3.4,5.1-7.7,9.7-12.6,13.5-4.8,3.9-10.3,6.9-16,9.3-5.7,2.3-11.7,3.9-17.8,5-12.2,2-24.5,1.6-36.6-.2-12-1.8-23.8-5-35.1-9.3,11.8,2.6,23.6,4.9,35.5,6,5.9.5,11.9.9,17.8.8,5.9,0,11.8-.5,17.7-1.5,11.6-1.9,22.9-5.9,32.5-12.8,4.8-3.4,9.2-7.5,12.9-12.1,3.7-4.6,6.9-9.8,9.1-15.5Z"/>
+    <path class="cls-3" d="M1,87.9c5-3.1,10.5-5.6,16-7.8,5.6-2.2,11.3-3.9,17.1-5.4,11.6-2.9,23.6-4.6,35.6-5,12-.4,24.1.3,36.1,2.2,6,.9,11.9,2.2,17.7,3.6,2.9.7,5.9,1.5,8.7,2.4,2.8.8,5.6,1.6,8.4,2.4,5.6,1.6,11.2,3.1,16.8,4.4,5.6,1.4,11.3,2.6,16.9,3.7,11.3,2.1,22.7,3.5,34,3.3,11.3-.2,22.5-2.1,32.5-7.4,2.5-1.3,4.9-2.8,7.2-4.4,2.3-1.7,4.4-3.6,6.6-5.5,4.2-4,7.8-8.6,11.2-13.5-2.2,5.5-5.1,10.7-8.8,15.6-3.6,4.8-8.1,9.1-13.2,12.6-5.1,3.5-10.8,6.1-16.7,8-5.9,1.9-12,3-18.1,3.5-12.2,1.1-24.4.1-36.3-1.6-11.9-1.8-23.6-4.6-35-7.8-2.9-.8-5.8-1.7-8.6-2.5-2.8-.9-5.5-1.6-8.3-2.4-5.5-1.5-11.1-2.8-16.8-3.8-11.3-2.2-22.7-3.5-34.2-3.9-11.5-.4-23.1,0-34.6,1.6-5.8.7-11.5,1.7-17.2,3-2.9.6-5.7,1.3-8.5,2.1-2.8.8-5.6,1.6-8.4,2.6Z"/>
+  </g>
+  <g id="Ebene_1" data-name="Ebene 1">
+    <g>
+      <path class="cls-1" d="M63.1,66L104.8,11.6l52.2,63.6s72.2,24.3,98.8-11.4l-26.6-38.8-27.2-4.4V0h-19.8v39.7h-7.1v-22.8L102.5,4l-39.4,62Z"/>
+      <polygon class="cls-1" points="73.5 39.1 92.7 14.2 48.4 14.2 11.1 72.9 50 19.2 73.5 39.1"/>
+      <g>
+        <rect class="cls-2" x="91.5" y="35.3" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="104.3" y="35.3" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="91.5" y="49.5" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="104.3" y="49.5" width="11.3" height="12.7"/>
+      </g>
+      <g>
+        <rect class="cls-2" x="41.9" y="35.4" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="49" y="35.4" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="41.9" y="45.3" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="49" y="45.3" width="5.7" height="8.5"/>
+      </g>
+    </g>
+  </g>
+  <g id="Ebene_3" data-name="Ebene 3" class="cls-4">
+    <path class="cls-1" d="M103.4,67.3V.5l-34.3,10.8v54c11.4-.3,22.9.4,34.3,1.9Z"/>
+    <path class="cls-1" d="M255.8,65.2c0-6.6,0-45.4,0-45.4l-24.9-6.7v66.4s12-.8,24.2-12.7c.4-.4.7-1,.7-1.6Z"/>
+    <g>
+      <polygon class="cls-1" points="107.6 9.3 107.6 1.2 227.7 21.8 227.7 28.5 107.6 9.3"/>
+      <polygon class="cls-1" points="108.2 23.8 108.2 15 227.7 32.2 227.7 38 108.2 23.8"/>
+      <polygon class="cls-1" points="108.2 37.8 108.2 29 227.7 40.9 227.7 46.7 108.2 37.8"/>
+      <polygon class="cls-1" points="108.2 52 108.2 43.2 227.7 50.1 227.7 56 108.2 52"/>
+      <polygon class="cls-1" points="108.2 65.2 108.2 56.4 227.7 59 227.7 64.9 108.2 65.2"/>
+      <path class="cls-1" d="M123.8,70.9c3.1.7,6.2,1.5,9.2,2.3,1.2.3,2.4.6,3.6.9l91.1.5v-5.9l-119.4-.7h0c5.2.8,10.5,1.7,15.6,2.8Z"/>
+    </g>
+    <g>
+      <polygon class="cls-1" points="10.3 50.2 10.2 44.5 66.3 21.2 66.3 40.6 10.3 50.2"/>
+      <polygon class="cls-1" points="66.3 55.7 10.6 61.5 10.4 53.8 66.3 44.9 66.3 55.7"/>
+      <path class="cls-1" d="M44.9,67.6c7.1-1.1,14.2-1.8,21.4-2.1v-5.2l-55.6,4.3.2,7.8,34-4.9Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/Ausweis/Ausweisart.svelte b/src/components/Ausweis/Ausweisart.svelte
index 986be682..0e3049ec 100644
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -145,7 +145,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 				Für einzelne Wohnungen kann kein Energieausweis ausgestellt werden.</HelpLabel>
 		</div>
 	</div>
-
+	{#if ausweisart=="VerbrauchsausweisWohnen"}
 	<!-- Anzahl der Wohnungen -->
 
 	<div class="input-standard order-3 md:order-5 xl:order-3">
@@ -170,7 +170,48 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			</HelpLabel>
 		</div>
 	</div>
+	{:else if ausweisart=="VerbrauchsausweisGewerbe"}
 
+	<!-- Baujahr Klimaanlage -->
+
+	<div class="input-standard order-3 md:order-5 xl:order-3">
+		<Inputlabel title="Baujahr Klimaanlage *"></Inputlabel>
+
+		<TagInput
+			name="baujahr_klimaanlage"
+			type="number"
+			onlyUnique={true}
+			minlength={4}
+			maxlength={4}
+			onFocusIn={() => {
+				addNotification({
+					message: "Info",
+					subtext:
+						"Wussten sie, dass sie weitere Jahre angeben können? Z.B. das Baujahr der Erneuerung wesentlicher Komponenten ihrer Heizung. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
+					dismissable: true,
+					uid: "KLIMAANLAGE_BAUJAHR",
+					timeout: 0,
+					type: "info",
+				});
+			}}
+			onFocusOut={() => {
+				deleteNotification("KLIMAANLAGE_BAUJAHR");
+			}}
+			className={auditHeizungGebaeudeBaujahr(aufnahme)
+				? "linked"
+				: ""}
+			bind:tags={aufnahme.baujahr_heizung}
+		/>
+
+		<div class="help-label">
+			<HelpLabel>
+				Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
+				unterschiedliche Baujahre vorliegen, können Sie mehrere Jahre eingeben.
+			</HelpLabel>
+		</div>
+	</div>
+
+	{/if}
 	<!-- Sanierungsstatus -->
 
 	<div class="input-standard order-4 md:order-2 xl:order-4">
diff --git a/src/components/Ausweis/GebaeudeDaten.svelte b/src/components/Ausweis/GebaeudeDaten.svelte
index 718ce950..db458d83 100644
--- a/src/components/Ausweis/GebaeudeDaten.svelte
+++ b/src/components/Ausweis/GebaeudeDaten.svelte
@@ -8,8 +8,9 @@
 	import { AufnahmeClient, ObjektClient } from "./types.js";
 
     export let aufnahme: AufnahmeClient;
-		export let objekt: ObjektClient;
-
+	export let objekt: ObjektClient;
+	
+	export let ausweisart: Enums.Ausweisart;
 </script>
 
 <div id="gebaeudedaten" class="bereich-box grid 
@@ -62,7 +63,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 	<input
 		name="ort"
 		data-test="ort"
-		readonly={true}
+		readonly={false}
 		bind:value={objekt.ort}
 		type="text"
 		/>
@@ -79,6 +80,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 </div>
 
+{#if ausweisart=="VerbrauchsausweisWohnen"}
 <!-- Wohnfläche m² * -->
 
 <div class="input-standard order-3 md:order-3 xl:order-3">
@@ -106,6 +108,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			</div>
 </div>
 
+{/if}
+
 <!-- Dachgeschoss *-->
 
 <div class="input-standard order-4 md:order-2 xl:order-4">
diff --git a/src/components/Ausweis/Progressbar.svelte b/src/components/Ausweis/Progressbar.svelte
index 85611f45..a9f3a740 100644
--- a/src/components/Ausweis/Progressbar.svelte
+++ b/src/components/Ausweis/Progressbar.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	export let progress: number = 0;
-	export let step1: string;
-	export let step2: string;
-	export let step3: string;
+	export let step1: string = '';
+	export let step2: string = '';
+	export let step3: string = '';
 </script>
 
 
@@ -16,6 +16,7 @@
 		</div>
 	
 	</div>	
+	
 <div class="phase justify-self-start">
 	<div class="{step1} point">1</div>
 	<div class="">Gebäudedaten</div>
diff --git a/src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte b/src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte
index 7da06032..018d635b 100644
--- a/src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte
+++ b/src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte
@@ -35,9 +35,9 @@
     {#each bullets as [bullet,online,premium,offline]}
     <div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
         <div class="justify-self-start pl-2">{@html bullet}</div>
-        <div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
-        <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
-        <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
+        <div class:check={online} class:check-no={!online}>{online ? "✔" : "⁃"}</div>
+        <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "⁃"}</div>
+        <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "⁃"}</div>
     </div>
     {/each}
     
@@ -79,7 +79,7 @@
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
         }
         .check-no {
-            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
+            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-black;
         }
     
     .price{@apply text-[1.25rem] sm:text-[2rem]}
diff --git a/src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte b/src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte
index e254e31e..83d6d548 100644
--- a/src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte
+++ b/src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte
@@ -35,9 +35,9 @@
     {#each bullets as [bullet,online,premium,offline]}
     <div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
         <div class="justify-self-start pl-2">{@html bullet}</div>
-        <div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
-        <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
-        <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
+        <div class:check={online} class:check-no={!online}>{online ? "✔" : "⁃"}</div>
+        <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "⁃"}</div>
+        <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "⁃"}</div>
     </div>
     {/each}
     
@@ -79,7 +79,7 @@
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
         }
         .check-no {
-            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
+            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-black;
         }
     
     .price{@apply text-[1.25rem] sm:text-[2rem]}
diff --git a/src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte b/src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte
index f7f85af2..cca07262 100644
--- a/src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte
+++ b/src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte
@@ -35,9 +35,9 @@
     {#each bullets as [bullet,online,premium,offline]}
     <div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
         <div class="justify-self-start pl-2">{@html bullet}</div>
-        <div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
-        <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
-        <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
+        <div class:check={online} class:check-no={!online}>{online ? "✔" : "⁃"}</div>
+        <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "⁃"}</div>
+        <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "⁃"}</div>
     </div>
     {/each}
     
@@ -79,7 +79,7 @@
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
         }
         .check-no {
-            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
+            @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-black;
         }
     
     .price{@apply text-[1.25rem] sm:text-[2rem]}
diff --git a/src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte b/src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte
index 4bae90c3..865cd08d 100644
--- a/src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte
+++ b/src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte
@@ -35,9 +35,9 @@ bullets = [
 {#each bullets as [bullet,online,premium,offline]}
 <div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
     <div class="justify-self-start pl-2">{@html bullet}</div>
-    <div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
-    <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
-    <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
+    <div class:check={online} class:check-no={!online}>{online ? "✔" : "⁃"}</div>
+    <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "⁃"}</div>
+    <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "⁃"}</div>
 </div>
 {/each}
 
@@ -79,7 +79,7 @@ bullets = [
 		@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
 	}
 	.check-no {
-		@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
+		@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-black;
 	}
 
 .price{@apply text-[1.25rem] sm:text-[2rem]}
diff --git a/src/components/design/content/WidgetCardTemplate_ORG.svelte b/src/components/design/content/WidgetCardTemplate_ORG.svelte
deleted file mode 100644
index 988ba6e0..00000000
--- a/src/components/design/content/WidgetCardTemplate_ORG.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script lang="ts">
-	export let price: number;
-	export let name: string;
-	export let variant: string;
-	export let services: [string, boolean][];
-	export let href: string;
-	export let src: string;
-	export let alt: string;
-	export let empfehlung: string;
-</script>
-
-		
-		<h2 class="titel">{name}</h2>
-		{#if empfehlung=="ja"}
-		<!--<div class="empfehlung">Empfehlung</div>-->
-		{/if}
-		
-
-		<div class="titelPic grid grid-cols-2 items-center mb-0 mt-0 w-full">
-			
-			<div style="">
-				<img
-					{src}
-					{alt}
-				/>
-			</div>
-			
-			<div class="justify-self-start">
-				<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
-					<span class="[font-family:Antique_Olive_Compact_bold]">
-						ab {price} €
-					</span> 
-				</p>
-			</div>
-
-		</div>
-
-
-		<div class="variante justify-self-end">{variant}</div>
-
-
-		<div class="white grid grid-rows-subgrid row-span-6 relative">
-			{#each services as [service, check]}
-			<div class="services grid grid-cols-[content-fit_1fr] items-center">
-				<span>{@html service}</span>
-				<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
-			</div>
-			{/each}
-		</div>
-
-
-
-
-		<div class="w-full grid grid-cols-2 gap-2">
-			<a
-				{href}
-				class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
-                    hover:bg-primary
-            ">jetzt online erstellen</a
-			>
-
-			<a
-				{href}
-				class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline 
-                    hover:bg-secondary/15
-            ">zur Produktübersicht</a
-			>
-		</div>
-
-
-
-
-
-
-
-
-<style lang="postcss">
-	.titel {@apply [font-size:_clamp(14px,1.5vw,18px)] 
-		pr-12 text-left
-	}
-	.empfehlung{@apply bg-red-700 text-[0.75rem] text-white  px-2 py-1 rounded-sm rotate-[5deg]}
-	.variante {
-		@apply -mt-2 text-xl w-fit text-black justify-self-end;
-	}
-
-	.services {
-		@apply text-start py-1 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>
diff --git a/src/components/widgets/WelcherAusweisWidget.svelte b/src/components/widgets/WelcherAusweisWidget.svelte
deleted file mode 100644
index 7d3d6fcc..00000000
--- a/src/components/widgets/WelcherAusweisWidget.svelte
+++ /dev/null
@@ -1,347 +0,0 @@
-<script lang="ts">
-	import { fade } from "svelte/transition";
-	import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
-	import { PRICES } from "#lib/constants.js";
-
-	let gebaeudetyp: string;
-	let anlass: string;
-	let einheiten: string;
-	let sanierungsstatus: string;
-	let baujahr: string;
-	let heizungsAlter: string;
-	let leerStand: string;
-
-
-	const allowedTypes = [
-		"Einfamilienhaus",
-		"Zweifamilienhaus",
-		"Mehrfamilienhaus",
-		"Mischgebäude",
-	];
-	const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
-	const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
-
-	let showVerbrauchsausweis: boolean = false
-
-	function postHeight() {
-		window.parent.postMessage(document.querySelector("html")?.offsetHeight, "*")
-	}
-
-	$: {
-		if (baujahr === "vor 1978") {
-			showVerbrauchsausweis =
-				allowedReason.includes(anlass) &&
-				allowedTypes.includes(gebaeudetyp) &&
-				(einheiten === "mehr als 4 Wohneinheiten" ||
-					sanierungsstatus === "saniert") && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
-		} else {
-			showVerbrauchsausweis =
-				allowedReason.includes(anlass) &&
-				allowedTypes.includes(gebaeudetyp) && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
-		}
-
-	}
-
-</script>
-
-
-
-<div id="OEA_widget">
-	<input id="recode" type="hidden" value="widgetvorlage" />
-
-	<div id="OEA_input">
-		<div class="OEA_zeile1">
-
-			<div class="OEA_item2">
-				<div class="OEA_title1">Anlass</div>
-				<select
-					class="OEA_auswahl1"
-					bind:value={anlass}
-					on:change={postHeight}
-				>
-					<option 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 class="OEA_item1">
-				<div class="OEA_title1">Gebäudetyp</div>
-				<select
-					class="OEA_auswahl1"
-					bind:value={gebaeudetyp}
-					on:change={postHeight}
-				>
-					<option 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>
-
-			{#if allowedReason.includes(anlass)}
-			<div class="OEA_item2">
-				<div class="OEA_title1">Sanierungsstand</div>
-				<select
-					class="OEA_auswahl2"
-					bind:value={sanierungsstatus}
-					on:change={postHeight}
-				>
-					<option selected disabled>bitte auswählen</option>
-					<option value="saniert">saniert</option>
-					<option value="unsaniert">unsaniert</option>
-				</select>
-			</div>
-			{/if}
-
-		</div>
-
-		{#if allowedReason.includes(anlass)}
-		<div class="OEA_zeile2">	
-			<div class="OEA_item3">
-				<div class="OEA_title2">Baujahr</div>
-				<select
-					class="OEA_auswahl2"
-					bind:value={baujahr}
-					on:change={postHeight}
-				>
-					<option 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_item3">
-					<div class="OEA_title2">Heizungsalter</div>
-					<select
-						class="OEA_auswahl2"
-						bind:value={heizungsAlter}
-						on:change={postHeight}
-					>
-						<option value=">= 3" selected disabled>bitte auswählen</option>
-						<option value="< 3">jünger als 3 Jahre</option>
-						<option value=">= 3">3 Jahre oder älter</option>
-					</select>
-				</div>
-
-			<div class="OEA_item4">
-				<div class="OEA_title2">Wohneinheiten</div>
-				<select
-					class="OEA_auswahl2"
-					bind:value={einheiten}
-					on:change={postHeight}
-				>
-					<option 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_item4">
-				<div class="OEA_title2">Leerstand</div>
-				<select
-					class="OEA_auswahl2"
-					bind:value={leerStand}
-					on:change={postHeight}
-				>
-					<option value="bis 30" selected disabled>bitte auswählen</option>
-					<option value="bis 30"
-						>bis 30%</option
-					>
-					<option value="mehr als 30"
-						>mehr als 30%</option
-					>
-				</select>
-			</div>
-		</div>
-		{/if}
-
-		<div class="OEA_zeile3">
-			{#if showVerbrauchsausweis}
-				<div
-					class="OEA_item6 result"
-				>
-				<WidgetCardTemplate
-					name="Verbrauchsausweis Wohngebäude"
-					price={PRICES.VerbrauchsausweisWohnen[0]}
-					src="/images/right-sidebar/wohngebaeude.svg"
-					alt="Wohnhaus Verbrauchsausweis"
-					variant="einfach"
-					services={[
-						["3 Jahresverbräuche der Heizung benötigt.", true],
-						["Zulässig bei Vermietung oder Verkauf.", true],
-						["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
-						["Ungenau durch individuelles Heizverhalten.", false],
-						["Wird nicht immer bei den Banken akzeptiert.", false]
-					]}
-					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
-				></WidgetCardTemplate>
-				</div>
-			{/if}
-
-			{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
-				<div
-					class="OEA_item6 result"
-				>
-				<WidgetCardTemplate
-					name="Bedarfsausweis Wohngebäude"
-					price={PRICES.BedarfsausweisWohnen[0]}
-					src="/images/right-sidebar/wohngebaeude.svg"
-					alt="Wohnhaus Bedarfsausweis"
-					variant="fundiert (empfohlen)"
-					services={[
-						["Erfassung der Gebäudegeometrie.", true],
-						["Für Vermietung, Verkauf und Finanzierung.", true],
-						["Zulässig auch für unsanierte Objekte.", true],
-						["Kann als Grundlage für den ISFP dienen.", true],
-						["Objektivere Berechnungsmethode nach DIN 18599.", true],
-					]}
-					href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
-				></WidgetCardTemplate>
-				</div>
-			{/if}
-
-			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
-				<div
-					class="OEA_item6 result"
-				>
-				<WidgetCardTemplate
-					name="Verbrauchsausweis Gewerbe"
-					price={PRICES.VerbrauchsausweisGewerbe[0]}
-					src="/images/right-sidebar/gewerbegebaeude.svg"
-					alt="Gewerbe Verbrauchsausweis"
-					variant="einfach"
-					services={[
-						
-						["3 Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
-						["Zulässig bei Vermietung oder Verkauf.", true],
-						["Für bauliche und energetische Maßnahmen ungeeignet.", false],
-						["Wird nicht immer bei den Banken akzeptiert.", false],
-					]}
-					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/" 
-				></WidgetCardTemplate>
-				
-				</div>
-			{/if}
-
-			{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
-				<div
-					class="OEA_item6 result"
-				>
-				<WidgetCardTemplate
-					name="GEG-Nachweis Gewerbe"
-					price={PRICES.BedarfsausweisGewerbe[0]}
-					src="/images/right-sidebar/gewerbegebaeude.svg"
-					alt="Gewerbe Bedarfsausweis"
-					variant="Bauvorlage"
-					services={[
-						
-						["xxx", true],
-						["xxx", true],
-						["xxx", false],
-						["xxx", false],
-					]}
-					href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
-				></WidgetCardTemplate>
-				
-				</div>
-			{/if}
-
-			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
-				<div
-					class="OEA_item6 result"
-				>
-				<WidgetCardTemplate
-					name="Bedarfsausweis Gewerbe"
-					price={PRICES.BedarfsausweisGewerbe[0]}
-					src="/images/right-sidebar/gewerbegebaeude.svg"
-					alt="Gewerbe Bedarfsausweis"
-					variant="fundiert (empfohlen)"
-					services={[
-						
-						["Mehrzonenmodell nach DIN 18599.", true],
-						["Zulässig bei Vermietung oder Verkauf.", true],
-						["Grundlage für Sanierungsvarianten.", false],
-						["Objektiveres, besser vergleichbares Ergebnis.", false],
-					]}
-					href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
-				></WidgetCardTemplate>
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
-
-<style lang="scss">
-	#OEA_widget {
-		@apply bg-gray-200 p-4 shadow-xl rounded-xl mb-6;
-
-		#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_title2 {
-						@apply font-bold text-lg text-gray-700 p-1.5 pl-2 rounded w-full;
-					}
-					.OEA_title1 {
-						@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
-					}
-				}
-			}
-
-			.OEA_title1 {
-				@apply bg-secondary;
-			}
-
-			.OEA_title2 {
-				@apply bg-gray-400;
-			}
-
-			.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 items-start justify-center;
-			}
-
-			.OEA_item6 {
-				.result {
-					@apply opacity-0 transition-opacity duration-1000 ease-in-out;
-				}
-
-				.result[style*="opacity: 1"] {
-					@apply opacity-100;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/components/widgets/WelcherAusweisWidget_IBC.svelte b/src/components/widgets/WelcherAusweisWidget_IBC.svelte
new file mode 100644
index 00000000..196b6edd
--- /dev/null
+++ b/src/components/widgets/WelcherAusweisWidget_IBC.svelte
@@ -0,0 +1,425 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import WidgetCardTemplate from "#components/widgets/WidgetCardTemplate_IBC.svelte";
+	import { PRICES } from "#lib/constants.js";
+	
+	let gebaeudetyp: string 				= "bitte auswählen";
+	let anlass: string 						= "bitte auswählen";
+	let einheiten: string					= "bitte auswählen";
+	let sanierungsstatus: string			= "bitte auswählen";
+	let baujahr: string						= "bitte auswählen";
+	let heizungsAlter: string				= "bitte auswählen";
+	let leerStand: string					= "bitte auswählen";
+
+	const twoBoxReason 						= ["Vermietung/Verkauf", "Aushangpflicht", "Sonstiges"];
+	const gewerbeHouse 						= ["Gewerbegebäude", "Mischgebäude"];
+
+
+	let ausnahme: boolean = false;
+	let oneBOX: boolean = false;
+	let threeBOX: boolean = false;	
+
+function getBoxes(){
+if(twoBoxReason.includes(anlass)){
+
+document.getElementById('firstrow')?.classList.remove('sm:grid-cols-2');
+document.getElementById('firstrow')?.classList.add('sm:grid-cols-3');
+}else{
+document.getElementById('firstrow')?.classList.remove('sm:grid-cols-3');
+document.getElementById('firstrow')?.classList.add('sm:grid-cols-2');
+}
+}
+
+function getCount(){
+if(oneBOX===true){
+	console.log('ONE');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
+	document.getElementById('thirdrow')?.classList.add('grid-cols-1');
+}else if(threeBOX===true){
+	console.log('THREE');
+	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
+
+	document.getElementById('thirdrow')?.classList.add('md:grid-cols-6');
+
+}
+
+else{
+	console.log('FOUR');
+	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
+	document.getElementById('thirdrow')?.classList.add('md:grid-cols-4');
+}
+
+}
+
+
+$: {
+ausnahme 	= 	((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
+            ? true 
+            : false;
+
+oneBOX 		=  	((ausnahme === true) && (gebaeudetyp != "Gewerbegebäude")) && (gebaeudetyp != "Mischgebäude") || 
+				((!twoBoxReason.includes(anlass)) && (gebaeudetyp != "Mischgebäude")) || 
+				((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
+            ? true 
+            : false;
+
+threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
+            ? true 
+            : false;
+			
+}
+
+</script>
+
+<div id="OEA_widget">
+	<input id="recode" type="hidden" value="widgetvorlage" />
+
+	<div id="OEA_input">
+
+
+		<div id="firstrow" class="firstrow">
+
+			<div class="auswahl">
+				<div class="titel">Anlass</div>
+				<select
+                    id="anlass"
+					class="selectfeld"
+					bind:value={anlass} on:change={getBoxes} on:change={getCount}
+				>
+					<option 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 class="auswahl">
+				<div class="titel">Gebäudetyp</div>
+				<select 
+					class="selectfeld"
+					bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
+				>
+					<option 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>
+
+			{#if twoBoxReason.includes(anlass)}
+			<div class="auswahl">
+				<div class="titel">Sanierungsstand</div>
+				<select 
+					class="selectfeld"	
+					bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
+					
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="saniert">saniert</option>
+					<option value="unsaniert">unsaniert</option>
+				</select>
+			</div>
+			{/if}
+
+		</div>
+
+		{#if twoBoxReason.includes(anlass)}
+		<div id="secondrow" class="secondrow">	
+			<div class="auswahl">
+				<div class="titel">Baujahr</div>
+				<select
+					id="baujahr"
+					class="selectfeld"
+					bind:value={baujahr} on:change={getCount}
+					
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="vor 1978">vor 1978</option>
+					<option value="nach 1977">nach 1977</option>
+				</select>
+			</div>
+
+				<div class="auswahl">
+					<div class="titel">Heizungsalter</div>
+					<select
+						class="selectfeld"
+						bind:value={heizungsAlter} on:change={getCount}
+					>
+						<option selected disabled>bitte auswählen</option>
+						<option value="< 3">jünger als 3 Jahre</option>
+						<option value=">= 3">3 Jahre oder älter</option>
+					</select>
+				</div>
+
+			<div class="auswahl">
+				<div class="titel">Wohneinheiten</div>
+				<select
+					class="selectfeld"
+					bind:value={einheiten} on:change={getCount}
+				>
+					<option 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_item4">
+				<div class="titel">Leerstand</div>
+				<select
+					class="selectfeld ausnahmen"
+					bind:value={leerStand} on:change={getCount}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="bis 30">bis 30%</option>
+					<option value="mehr als 30">mehr als 30%</option>
+				</select>
+			</div>
+		</div>
+		{/if}
+
+				<div id="thirdrow" class="thirdrow">
+			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
+
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 0 }}
+				>
+				<WidgetCardTemplate
+					name="Verbrauchsausweis Wohngebäude"
+					price={PRICES.VerbrauchsausweisWohnen[0]}
+					src="/images/widget/wohngebaeude.svg"
+					alt="Wohnhaus Verbrauchsausweis"
+					variant="einfach"
+					empfehlung="nein"
+					cta="jetzt&nbsp;online erstellen"
+					services={[
+						["3&nbsp;Jahresverbräuche der Heizung benötigt.", true],
+						["Zulässig bei Vermietung oder Verkauf.", true],
+						["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
+						["Ungenau durch individuelles Heizverhalten.", false],
+						["Wird nicht immer bei den Banken akzeptiert.", false]
+					]}
+					href_buy="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
+					href_overview="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+
+			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 0 }}
+				>
+				<WidgetCardTemplate
+					name="Bedarfsausweis Wohngebäude"
+					price={PRICES.BedarfsausweisWohnen[0]}
+					src="/images/widget/wohngebaeude.svg"
+					alt="Wohnhaus Bedarfsausweis"
+					variant="fundiert"
+					empfehlung="ja"
+					cta="jetzt&nbsp;online erstellen"
+					services={[
+						["Erfassung der Gebäudegeometrie.", true],
+						["Für Vermietung, Verkauf und Finanzierung.", true],
+						["Zulässig auch für unsanierte Objekte.", true],
+						["Kann als Grundlage für den ISFP dienen.", true],
+						["Objektivere Berechnungsmethode nach DIN 18599.", true],
+					]}
+					href_buy="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
+					href_overview="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+
+			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 0 }}
+				>
+				<WidgetCardTemplate
+					name="Verbrauchsausweis Gewerbegebäude"
+					price={PRICES.VerbrauchsausweisGewerbe[0]}
+					src="/images/widget/gewerbegebaeude.svg"
+					alt="Gewerbe Verbrauchsausweis"
+					variant="einfach"
+					empfehlung="nein"
+					cta="jetzt&nbsp;online erstellen"					
+					services={[
+						
+						["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom&nbsp;nötig.", true],
+						["Zulässig bei Vermietung oder Verkauf.", true],
+						["Für bauliche und energetische Maßnahmen ungeeignet.", false],
+						["Wird nicht immer bei den Banken akzeptiert.", false],
+                        ["Ungenau durch individuelles Heizverhalten", false],
+					]}
+					href_buy="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
+					href_overview="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
+				></WidgetCardTemplate>
+				
+				</div>
+			{/if}
+
+			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 0 }}
+				>
+				<WidgetCardTemplate
+					name="Bedarfsausweis Gewerbegebäude"
+					price={PRICES.BedarfsausweisGewerbe[0]}
+					src="/images/widget/gewerbegebaeude.svg"
+					alt="Gewerbe Bedarfsausweis"
+					variant="fundiert"
+					empfehlung="ja"
+					cta="Angebot anfragen"
+					services={[
+						
+						["Mehrzonenmodell nach DIN 18599.", true],
+						["Zulässig bei Vermietung oder Verkauf.", true],
+						["Grundlage für Sanierung-Varianten.", true],
+						["Objektiveres, besser vergleichbares Ergebnis.", true],
+                        ["Zulässig bei Leerstand oder fehlenden Verbräuchen", true],
+					]}
+					href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+					href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+
+			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
+			<div
+				class="produktbox"
+				transition:fade={{ duration: 0 }}
+			>
+			<WidgetCardTemplate
+				name="GEG-Nachweis Wohngebäude"
+				price=500
+				src="/images/widget/wohngebaeude.svg"
+				alt="Gewerbe Bedarfsausweis"
+				variant="Bauvorlage"
+				empfehlung="ja"
+				cta="Angebot anfragen"
+				services={[
+					
+					["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
+					["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
+					["Erstellung des Energieausweises nach Abschluss inklusive.", true],
+					["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
+					["Zonierung und Erstellung eines 3D Gebäudemodells.", true],
+				]}
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/" 
+
+			></WidgetCardTemplate>
+			
+			</div>
+			{/if}
+
+			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
+			<div
+				class="produktbox"
+				transition:fade={{ duration: 0 }}
+			>
+			<WidgetCardTemplate
+				name="GEG-Nachweis Gewerbegebäude"
+				price=800
+				src="/images/widget/gewerbegebaeude.svg"
+				alt="Gewerbe Bedarfsausweis"
+				variant="Bauvorlage"
+				empfehlung="ja"
+				cta="Angebot anfragen"
+				services={[
+					
+					["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
+					["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
+					["Erstellung des Energieausweises nach Abschluss inklusive.", true],
+					["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
+					["Mehrzonenmodell inkl. Erstellung eines 3D Gebäudemodells.", true],
+				]}
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
+			></WidgetCardTemplate>
+			
+			</div>
+			{/if}
+
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+
+*{font-family: "Heron";}
+
+#OEA_widget {
+	@apply min-w-[320px] max-w-[1920px] p-[0px]
+	sm:p-[0px];
+
+.firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
+	sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
+
+.titel{@apply text-white font-bold bg-secondary px-2 py-1 rounded-[0.25rem];}
+
+.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
+
+}
+
+.secondrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 mt-4
+	sm:grid-cols-4 sm:gap-x-4 sm:gap-y-2;
+
+.titel{@apply text-black font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
+    
+.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
+
+}
+
+#OEA_input{@apply grid}
+
+.thirdrow{@apply grid grid-cols-1 gap-x-4 gap-y-2 col-start-1
+	md:grid-cols-4 md:gap-x-4 md:gap-y-2;
+
+.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
+	px-2 py-2 mt-5;
+	box-shadow:2px 2px 8px rgba(0,0,0,0.25)
+
+
+}
+
+}
+
+
+}
+
+
+
+
+
+
+
+
+			
+
+			
+	
+			
+
+		
+
+			
+		
+	
+</style>
diff --git a/src/components/widgets/WidgetCardTemplate_IBC.svelte b/src/components/widgets/WidgetCardTemplate_IBC.svelte
new file mode 100644
index 00000000..0758f3d4
--- /dev/null
+++ b/src/components/widgets/WidgetCardTemplate_IBC.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	export let price: number;
+	export let name: string;
+	export let variant: string;
+	export let services: [string, boolean][];
+	export let href_buy: string;
+	export let href_overview: string;
+	export let src: string;
+	export let alt: string;
+	export let empfehlung: string;
+	export let cta: string;
+</script>
+
+
+{#if empfehlung=="ja"}
+<div class="empfehlung">Empfehlung</div>
+{/if}
+		<h2 class="titel sm:mb-2">{name}</h2>
+
+
+			<div class="sumCent">
+				<div class="variante">{variant}</div>
+				<img
+					class="image"
+					{src}
+					{alt}
+				/>
+				<div class="justify-self-start">
+					<p class="price">
+							ab {price} €					
+					</p>
+				</div>
+
+			</div>
+
+			<div class="sumCent buttoncols">	
+				<a
+					href="{href_buy}"
+					class="buttoncol">{cta}</a
+				>
+	
+				<a
+					href="{href_overview}"
+					class="buttoncol">Produkt-Übersicht</a
+				>
+	
+				</div>
+
+			<div class="sumRows forServices">
+			
+				{#each services as [service, check]}
+				<div class="services">
+					<span>{@html service}</span>
+					<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
+				</div>
+				{/each}
+	
+			</div>
+
+
+<style lang="postcss">
+
+
+
+.sumCent{@apply justify-self-center col-span-2}
+.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
+.forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}
+
+.image{@apply w-[75%] justify-self-center
+	md:w-[75%] md:pl-12}
+
+.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
+md:grid-cols-2 md:w-[auto]}
+
+.buttoncol{@apply mt-2 md:mt-0 text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
+hover:bg-primary hover:text-white}
+
+
+	.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4 text-nowrap;
+				font-family: "Antique Olive Compact bold";}
+
+
+
+	.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
+	.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
+	.variante {
+		@apply italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-primary rounded-md pl-[4px] pr-[6px] py-[0px];
+	}
+
+	.services {
+		@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center  md:grid-cols-[1fr_50px]
+	}
+	.services:not(:last-child) {
+		@apply border-b-[1px] border-gray-200;
+	}
+	.check {
+		@apply justify-self-end self-center font-bold text-green-700;
+	}
+	.check-no {
+		@apply justify-self-end self-center font-bold text-red-700;
+	}
+
+</style>
diff --git a/src/components/widgets/WelcherAusweisWidget_1.svelte b/src/components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte
similarity index 99%
rename from src/components/widgets/WelcherAusweisWidget_1.svelte
rename to src/components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte
index 67b3c65f..e91ee688 100644
--- a/src/components/widgets/WelcherAusweisWidget_1.svelte
+++ b/src/components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from "svelte/transition";
-	import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
+	import WidgetCardTemplate from "#components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte";
 	import { PRICES } from "#lib/constants.js";
 	
 	let gebaeudetyp: string 				= "bitte auswählen";
diff --git a/src/components/design/content/WidgetCardTemplate.svelte b/src/components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte
similarity index 100%
rename from src/components/design/content/WidgetCardTemplate.svelte
rename to src/components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte
diff --git a/src/lib/Berechnungen/BedarfsausweisWohnen/funktionPrimaerenergieFaktorenKraftWaermekopplungT108.ts b/src/lib/Berechnungen/BedarfsausweisWohnen/funktionPrimaerenergieFaktorenKraftWaermekopplungT108.ts
new file mode 100644
index 00000000..5d2edce3
--- /dev/null
+++ b/src/lib/Berechnungen/BedarfsausweisWohnen/funktionPrimaerenergieFaktorenKraftWaermekopplungT108.ts
@@ -0,0 +1,36 @@
+import { funktionDoppelteInterpolation } from "#lib/Berechnungen/BedarfsausweisWohnen/funktionDoppelteInterpolation.js";
+
+export function funktionPrimaerenergieFaktorenKraftWaermekopplungT108(suchSpalte: number, datenZeile: number) {
+
+    const dataBox = [
+        { SuchSpalte: [0.10], DatenSpalte: [1.171, 1.155, 1.139, 1.123, 1.108, 1.092, 1.076, 1.06, 1.044, 1.029] },
+        { SuchSpalte: [0.15], DatenSpalte: [1.165, 1.141, 1.117, 1.094, 1.07, 1.046, 1.023, 0.999, 0.975, 0.952] },
+        { SuchSpalte: [0.2], DatenSpalte: [1.159, 1.127, 1.096, 1.064, 1.033, 1.001, 0.97, 0.938, 0.906, 0.875] },
+        { SuchSpalte: [0.25], DatenSpalte: [1.153, 1.114, 1.074, 1.035, 0.995, 0.956, 0.916, 0.877, 0.837, 0.798] },
+        { SuchSpalte: [0.3], DatenSpalte: [1.147, 1.1, 1.052, 1.005, 0.958, 0.91, 0.863, 0.816, 0.768, 0.721] },
+        { SuchSpalte: [0.35], DatenSpalte: [1.141, 1.086, 1.031, 0.975, 0.92, 0.865, 0.81, 0.755, 0.699, 0.644] },
+        { SuchSpalte: [0.4], DatenSpalte: [1.135, 1.072, 1.009, 0.946, 0.883, 0.82, 0.757, 0.693, 0.63, 0.567] },
+        { SuchSpalte: [0.45], DatenSpalte: [1.129, 1.058, 0.987, 0.916, 0.845, 0.774, 0.703, 0.632, 0.561, 0.49] },
+        { SuchSpalte: [0.5], DatenSpalte: [1.123, 1.045, 0.966, 0.887, 0.808, 0.729, 0.65, 0.571, 0.492, 0.413] },
+        { SuchSpalte: [0.55], DatenSpalte: [1.117, 1.031, 0.944, 0.857, 0.77, 0.684, 0.597, 0.51, 0.423, 0.336] },
+        { SuchSpalte: [0.6], DatenSpalte: [1.112, 1.017, 0.922, 0.828, 0.733, 0.638, 0.544, 0.449, 0.354, 0.26] },
+        { SuchSpalte: [0.65], DatenSpalte: [1.106, 1.003, 0.901, 0.798, 0.695, 0.593, 0.49, 0.388, 0.285, 0.183] },
+        { SuchSpalte: [0.7], DatenSpalte: [1.1, 0.989, 0.879, 0.768, 0.658, 0.548, 0.437, 0.327, 0.216, 0.106] },
+        { SuchSpalte: [0.75], DatenSpalte: [1.094, 0.976, 0.857, 0.739, 0.62, 0.502, 0.384, 0.265, 0.147, 0.029] },
+        { SuchSpalte: [0.8], DatenSpalte: [1.088, 0.962, 0.835, 0.709, 0.583, 0.457, 0.331, 0.204, 0.078, 0] },
+        { SuchSpalte: [0.85], DatenSpalte: [1.082, 0.948, 0.814, 0.68, 0.546, 0.411, 0.277, 0.143, 0.009, 0] },
+        { SuchSpalte: [0.9], DatenSpalte: [1.076, 0.934, 0.792, 0.65, 0.508, 0.366, 0.224, 0.082, 0, 0] },
+        { SuchSpalte: [0.95], DatenSpalte: [1.07, 0.92, 0.77, 0.621, 0.471, 0.321, 0.171, 0.021, 0, 0] },
+        { SuchSpalte: [1], DatenSpalte: [1.064, 0.907, 0.749, 0.591, 0.433, 0.275, 0.118, 0, 0, 0] }
+    ];
+    
+
+
+
+
+    const dataZeile = [ { DatenZeile: [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1] } ];
+
+    const PrimaerenergieFaktorenKraftWaermekopplung = funktionDoppelteInterpolation(suchSpalte, datenZeile, dataZeile, dataBox);
+    return PrimaerenergieFaktorenKraftWaermekopplung;
+
+}
\ No newline at end of file
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index 4177c481..ec32cbff 100644
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -176,7 +176,7 @@
 		<h2 class="text-primary text-xl">
 			Verbrauchsausweis Wohnen {PRICES.VerbrauchsausweisWohnen[0]} €
 		</h2>
-		<Progressbar progress={0} step1={''} step2={'step'} step3={''}/>
+		<Progressbar step2={'step'}/>
 	</div>
 </div>
 
diff --git a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
index e1d2bfc1..8d048ec4 100644
--- a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
-	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
 	import { PRICES } from "#lib/constants.js";
 
 	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
@@ -85,7 +85,7 @@
 		
 	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
 	<h2 class="text-primary text-xl">Verbrauchsausweis Gewerbe {PRICES.VerbrauchsausweisGewerbe[0]} €</h2>
-	<ProgressBar progress={0} />
+	<Progressbar step1={'step'} />
 </div>
 
 </div>
@@ -106,7 +106,7 @@
 				bind:objekt
 				bind:aufnahme
 				bind:ausweis
-				{ausweisart}
+			{ausweisart}
 			/>
 		</Bereich>
 
@@ -118,7 +118,8 @@
 			>
 			<GebaeudeDaten 
 			bind:aufnahme
-			bind:objekt />
+			bind:objekt 
+			{ausweisart}/>
 			</Bereich
 		>
 
diff --git a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
index 5de3ea27..a0f1750f 100644
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
@@ -157,6 +157,8 @@
 	}
 
 const ausweisart: Enums.Ausweisart = "VerbrauchsausweisWohnen"
+
+
 </script>
 
 <Overlay bind:hidden={speichernOverlayHidden}>
@@ -193,7 +195,7 @@ lg:grid-cols-2 lg:gap-x-6
 		
 	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
 	<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
-	<Progressbar progress={0} step1={'step'} step2={''} step3={''}/>
+	<Progressbar step1={'step'}/>
 </div>
 
 </div>
@@ -203,7 +205,7 @@ lg:grid-cols-2 lg:gap-x-6
 <form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div id="formular-box" class="formular-boxen ring-0">
 
-		<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
+		<!--<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />-->
 
 		<!-- A Prüfung der Ausweisart -->
 
@@ -221,7 +223,10 @@ lg:grid-cols-2 lg:gap-x-6
 		<Bereich
 			bereich="B"
 			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
-			><GebaeudeDaten bind:aufnahme bind:objekt /></Bereich
+			><GebaeudeDaten 
+			bind:aufnahme 
+			bind:objekt 
+			{ausweisart}/></Bereich
 		>
 
 		<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1069f057..338df0f6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,7 +2,7 @@
 import Layout from "#layouts/Layout.astro";
 import ProduktVergleich from "#components/design/content/ProduktVergleich.svelte";
 import ProduktVergleichGewerbe from "#components/design/content/ProduktVergleichGewerbe.svelte";
-import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget.svelte";
+import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_IBC.svelte";
 import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
 
 ---
@@ -17,9 +17,9 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
 		 
 		 <h2>Machen Sie hier den <span>online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
 	 
-		 
+		 <div class="mt-4 mb-6">
 		<WelcherAusweisWidget client:load></WelcherAusweisWidget>
-
+		</div>
 	
 	<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span>GEG 2024</span>. Mit uns profitieren Sie von:</h2>		 
 	<p>
diff --git a/src/pages/welcher-energieausweis/index.astro b/src/pages/welcher-energieausweis/index.astro
index 6bead70d..7ac7f812 100644
--- a/src/pages/welcher-energieausweis/index.astro
+++ b/src/pages/welcher-energieausweis/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "#layouts/Layout.astro";
-import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget.svelte";
+import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_IBC.svelte";
 import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
 
 ---
@@ -11,7 +11,9 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
 <p>Falls Sie nicht wissen sollten welchen Energieausweis Sie benötigen, können Sie hier ganz einfach den Gebäudetyp 
   und Anlass bzw. Grund angeben. Als Ergebnis bekommen Sie den für Sie passenden Energieausweis angezeigt.</p>
 <h2>Machen Sie hier den Online Check, welcher Energieausweis der richtige ist:</h2>
+<div class="mt-4 mb-6">
 <WelcherAusweisWidget client:load/>
+</Layout>
 <h2>Verbrauchsausweis für Wohngebäude: Einfacher Energieausweis bei Vermietung und Verkauf</h2>
 <p>
     In den meisten Fällen können Sie bei der Vermietung oder dem Verkauf Ihrer Immobilie den
diff --git a/src/pages/widgets/[vermittler].astro b/src/pages/widgets/[vermittler].astro
index 57c08958..e53f6545 100644
--- a/src/pages/widgets/[vermittler].astro
+++ b/src/pages/widgets/[vermittler].astro
@@ -1,5 +1,5 @@
 ---
-import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_1.svelte";
+import WelcherAusweisWidget from "#components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte";
 const { vermittler } = Astro.params;
 ---