2025-02-15 08:38:22 +00:00
22 changed files with 755 additions and 483 deletions
--- a/public/images/widget/gewerbegebaeude.svg
+++ 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>
--- a/public/images/widget/wohngebaeude.svg
+++ 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>
--- 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">
--- 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">
--- 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>
--- 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]}
--- 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]}
--- 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]}
--- 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]}
--- a/src/components/design/content/WidgetCardTemplate_ORG.svelte
+++ b/src/components/design/content/WidgetCardTemplate_ORG.svelte
@@ -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>
--- a/src/components/widgets/WelcherAusweisWidget.svelte
+++ b/src/components/widgets/WelcherAusweisWidget.svelte
@@ -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>
--- a/src/components/widgets/WelcherAusweisWidget_IBC.svelte
+++ 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>
--- a/src/components/widgets/WidgetCardTemplate_IBC.svelte
+++ 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>
--- a/src/components/widgets/immowelt/WelcherAusweisWidget_immowelt.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";
--- a/src/components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte
+++ b/src/components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte
--- a/src/lib/Berechnungen/BedarfsausweisWohnen/funktionPrimaerenergieFaktorenKraftWaermekopplungT108.ts
+++ 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;
+
+}
--- 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>

--- 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
 		>

--- 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 -->
--- 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>
--- 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
--- 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;
 ---