diff --git a/src/components/design/content/WidgetCardTemplate.svelte b/src/components/design/content/WidgetCardTemplate.svelte
index 82c03298..a2a5e26f 100644
--- a/src/components/design/content/WidgetCardTemplate.svelte
+++ b/src/components/design/content/WidgetCardTemplate.svelte
@@ -6,68 +6,94 @@
 	export let href: string;
 	export let src: string;
 	export let alt: string;
+	export let empfehlung: string;
 </script>
 
-<div class="box card bg-white px-6 py-4 mb-5 mt-5">
-	<div>
-		<h2>{name}</h2>
+
+
+
+		<div class="relative">
+		<h2 class="titel">{name}</h2>
+		{#if empfehlung=="ja"}
+		<div class="empfehlung bg-red-700 text-[0.75rem] text-white absolute right-12 top-1 px-2 py-1 rounded-full rotate-[5deg]">Empfelung</div>
+		{/if}
+		</div>
+
 		<hr class="mb-2" />
 
-		<div class="flex flex-row mb-2 mt-2 w-full items-end">
-			<div>
+		<div class="titelPic grid grid-cols-[25%_1fr_25%] items-center mb-0 mt-0 w-full">
+			
+			<div class="">
 				<img
-					class="w-[50%] !min-w-[50px]"
+					class="w-[100%] justify-self-start"
 					{src}
 					{alt}
 				/>
 			</div>
-			<div>
-				<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
-					ab<span class="promo pl-2"
-						>{price}</span
-					>€
+			
+			<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 class="variante justify-self-end">{variant}</div>
+
+			
+
 		</div>
 
-		<div class="white">
-			<div class="variante">{variant}</div>
+
+
+
+
+		<div class="white grid grid-rows-subgrid row-span-6 relative">
 			{#each services as [service, check]}
-			<div class="services">
-				<span>{service}</span>
+			<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="flex flex-row flex-wrap justify-center">
+
+
+
+
+		<div class="w-full grid grid-cols-2 gap-2">
 			<a
 				{href}
-				class="w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+				class="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-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
-                    hover:bg-primary
+				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>
-	</div>
-</div>
 
-<style lang="scss">
-	.white {
-		@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
+
+
+
+
+
+
+
+<style lang="postcss">
+	.titel {@apply [font-size:_clamp(14px,1.5vw,18px)] 
+		pr-12 text-left
 	}
-
 	.variante {
-		@apply text-2xl w-fit text-black justify-self-end mr-3;
+		@apply -mt-2 text-xl w-fit text-black justify-self-end;
 	}
 
 	.services {
-		@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
+		@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)];
 	}
 	.services:not(:last-child) {
 		@apply border-b-[1px] border-gray-200;
diff --git a/src/components/widgets/WelcherAusweisWidget_1.svelte b/src/components/widgets/WelcherAusweisWidget_1.svelte
new file mode 100644
index 00000000..d0b0f2a8
--- /dev/null
+++ b/src/components/widgets/WelcherAusweisWidget_1.svelte
@@ -0,0 +1,405 @@
+<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
+
+	$: {
+		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");
+		}
+	}
+
+
+function row3col(){
+    var x = document.getElementById('anlass').value;
+    if(allowedReason.includes(x)){
+    document.getElementById('firstrow').classList.remove('grid-cols-2');
+    document.getElementById('firstrow').classList.add('grid-cols-3');
+    }else{
+    document.getElementById('firstrow').classList.remove('grid-cols-3');
+    document.getElementById('firstrow').classList.add('grid-cols-2');    
+    }
+}
+
+
+
+function getDivs(){
+let anzahl;
+if(showVerbrauchsausweis){console.log('1');anzahl=2;}
+if(allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)){console.log('2');anzahl=2;}
+if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('3');anzahl=2;}
+if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('4');anzahl=4;}
+
+var cols 		= 'grid-cols-'+anzahl
+console.log(cols);
+if(anzahl==1){
+
+}else if(anzahl==2) {
+	var x = document.getElementById('thirdrow')?.children;
+	console.log(x);
+	for (let i = 0; i < x.length; i++) {
+			x[i].classList.remove('col-span-1');
+			x[i].classList.add('col-span-2');
+}
+
+}else if(anzahl==4) {
+	var x = document.getElementById('thirdrow')?.children;
+	console.log(x);
+		for (let i = 0; i < x.length; i++) {
+			x[i].classList.remove('col-span-2');
+			x[i].classList.add('col-span-1');
+}
+}
+
+}
+
+</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={row3col} on:change={getDivs}
+				>
+					<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={getDivs}
+				>
+					<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="auswahl">
+				<div class="titel">Sanierungsstand</div>
+				<select 
+					on:change={getDivs}
+					class="selectfeld"
+					bind:value={sanierungsstatus}
+				>
+					<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 id="secondrow" class="secondrow">	
+			<div class="auswahl">
+				<div class="titel">Baujahr</div>
+				<select
+					class="selectfeld"
+					bind:value={baujahr}
+				>
+					<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}
+					>
+						<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="auswahl">
+				<div class="titel">Wohneinheiten</div>
+				<select
+					class="selectfeld"
+					bind:value={einheiten}
+				>
+					<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"
+					bind:value={leerStand}
+				>
+					<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 id="thirdrow" class="thirdrow">
+			{#if showVerbrauchsausweis}
+
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Verbrauchsausweis Wohngebäude"
+					price={PRICES.VerbrauchsausweisWohnen[0]}
+					src="/images/right-sidebar/wohngebaeude.svg"
+					alt="Wohnhaus Verbrauchsausweis"
+					variant="einfach"
+					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="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+
+
+
+			{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Bedarfsausweis Wohngebäude"
+					price={PRICES.BedarfsausweisWohnen[0]}
+					src="/images/right-sidebar/wohngebaeude.svg"
+					alt="Wohnhaus Bedarfsausweis"
+					variant="fundiert"
+					empfehlung="ja"
+					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="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Verbrauchsausweis Gewerbegebäude"
+					price={PRICES.VerbrauchsausweisGewerbe[0]}
+					src="/images/right-sidebar/gewerbegebaeude.svg"
+					alt="Gewerbe Verbrauchsausweis"
+					variant="einfach"
+					services={[
+						
+						["3&nbsp;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],
+                        ["xxx", false],
+					]}
+					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/" 
+				></WidgetCardTemplate>
+				
+				</div>
+			{/if}
+
+			{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="GEG-Nachweis Gewerbegebäude"
+					price={PRICES.BedarfsausweisGewerbe[0]}
+					src="/images/right-sidebar/gewerbegebaeude.svg"
+					alt="Gewerbe Bedarfsausweis"
+					variant="Bauvorlage"
+					services={[
+						
+						["xxx", true],
+						["xxx", true],
+						["xxx", false],
+						["xxx", false],
+                        ["xxx", false],
+					]}
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				></WidgetCardTemplate>
+				
+				</div>
+			{/if}
+
+			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Bedarfsausweis Gewerbegebäude"
+					price={PRICES.BedarfsausweisGewerbe[0]}
+					src="/images/right-sidebar/gewerbegebaeude.svg"
+					alt="Gewerbe Bedarfsausweis"
+					variant="fundiert"
+					empfehlung="ja"
+					services={[
+						
+						["Mehrzonenmodell nach DIN 18599.", true],
+						["Zulässig bei Vermietung oder Verkauf.", true],
+						["Grundlage für Sanierung-Varianten.", false],
+						["Objektiveres, besser vergleichbares Ergebnis.", false],
+                        ["xxx", false],
+					]}
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+
+@font-face {
+	font-family: 'Heron';
+	font-weight: 700;
+	font-style: normal;
+	font-display:swap;
+	src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
+  }
+
+  @font-face {
+	font-family: 'Antique Olive Compact bold';
+	font-weight: 700;
+	font-style: normal;
+	font-display:swap;
+	src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
+  }
+
+
+*{font-family: "Heron";}
+
+#OEA_widget {
+	@apply w-full min-w-[640px] max-w-[1920px] p-[10px];
+
+.firstrow{@apply grid grid-cols-2 gap-x-4 gap-y-2;
+
+.titel{@apply text-white  font-sans font-bold bg-[#444f94] 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-4 gap-x-4 gap-y-2 mt-4;
+
+.titel{@apply text-black font-sans 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}
+
+}
+
+.thirdrow{@apply grid grid-cols-4 gap-x-4 gap-y-2;
+
+.produktbox{@apply grid grid-rows-subgrid col-span-2 row-span-12 ring-1 ring-black/15 rounded-sm bg-white 
+	px-2 py-2 mt-5;
+
+
+}
+
+}
+
+
+}
+
+
+
+
+
+
+
+
+			
+
+			
+	
+			
+
+		
+
+			
+		
+	
+</style>
diff --git a/src/layouts/WidgetLayout_1.astro b/src/layouts/WidgetLayout_1.astro
new file mode 100644
index 00000000..7facef38
--- /dev/null
+++ b/src/layouts/WidgetLayout_1.astro
@@ -0,0 +1,23 @@
+---
+
+---
+
+<!DOCTYPE html>
+<html lang="de">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
+		<meta
+			name="description"
+			content="IB Cornelsen - Widget"
+		/>
+		<title>
+			IB Cornelsen - Widget
+		</title>
+	</head>
+
+	<body>
+		<slot />
+	</body>
+</html>
\ No newline at end of file
diff --git a/src/pages/widgets/[vermittler].astro b/src/pages/widgets/[vermittler].astro
index dc4d1e6d..d6a04040 100644
--- a/src/pages/widgets/[vermittler].astro
+++ b/src/pages/widgets/[vermittler].astro
@@ -1,6 +1,7 @@
 ---
 
-import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
+import Layout from "#layouts/WidgetLayout_1.astro";
+import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget_1.svelte";
 
 const { vermittler } = Astro.params;