diff --git a/public/images/right-sidebar/UMBE_gewerbegebaeude.svg b/public/images/right-sidebar/gewerbegebaeude.svg
similarity index 100%
rename from public/images/right-sidebar/UMBE_gewerbegebaeude.svg
rename to public/images/right-sidebar/gewerbegebaeude.svg
diff --git a/public/images/right-sidebar/UMBE_wohngebaeude.svg b/public/images/right-sidebar/wohngebaeude.svg
similarity index 100%
rename from public/images/right-sidebar/UMBE_wohngebaeude.svg
rename to public/images/right-sidebar/wohngebaeude.svg
diff --git a/src/components/Ausweis/BilderZusatzsysteme.svelte b/src/components/Ausweis/BilderZusatzsysteme.svelte
index 739ac969..7dd83cfb 100644
--- a/src/components/Ausweis/BilderZusatzsysteme.svelte
+++ b/src/components/Ausweis/BilderZusatzsysteme.svelte
@@ -1,24 +1,90 @@
 <script lang="ts">
-	import HelpLabel from "../HelpLabel.svelte";
+    import HelpLabel from "#labels/HelpLabel.svelte";
+    import Inputlabel from "#labels/InputLabel.svelte";
+
 	import HeizungImage from "./HeizungImage.svelte";
 	import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
 	import DaemmungImage from "./DaemmungImage.svelte";
 	import FensterImage from "./FensterImage.svelte";
-	import Label from "../Label.svelte";
+
+	//import Label from "../Label.svelte";
+
 	import {
 	GebaeudeAufnahmeClient,
 		GebaeudeClient,
 		UploadedGebaeudeBild,
 		VerbrauchsausweisWohnenClient,
 	} from "./types";
+    import { boolean } from "astro:schema";
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 	export let ausweis: VerbrauchsausweisWohnenClient
 	export let images: UploadedGebaeudeBild[];
+
+ var sanierungsoptionen =[
+    
+    {"id":1,"name":"zentralheizung","value":"ZH","bindchecked":"gebaeude_aufnahme_allgemein.zentralheizung","label":"Zentral/Etage"},
+    {"id":2,"name":"einzelofen","value":"EO","bindchecked":"{gebaeude_aufnahme_allgemein.einzelofen}","label":"Einzelofen"},
+    {"id":3,"name":"durchlauf_erhitzer","value":"DH","bindchecked":"{gebaeude_aufnahme_allgemein.durchlauf_erhitzer}","label":"Durchlauferhitzer"},
+    {"id":4,"name":"standard_kessel","value":"SK","bindchecked":"{gebaeude_aufnahme_allgemein.standard_kessel}","label":"Standardkessel"},
+    {"id":5,"name":"solarsystem_warmwasser","value":"SSWW","bindchecked":"{gebaeude_aufnahme_allgemein.solarsystem_warmwasser}","label":"Solarsystem für Warmwasser"},
+    {"id":6,"name":"waermepumpe","value":"WP","bindchecked":"{gebaeude_aufnahme_allgemein.waermepumpe}","label":"Wärmepumpe"},
+    
+    {"id":7,"name":"niedertemperatur_kessel","value":"NK","bindchecked":"{gebaeude_aufnahme_allgemein.niedertemperatur_kessel}","label":"Niedertemperaturkessel"},
+    {"id":8,"name":"brennwert_kessel","value":"BWK","bindchecked":"{gebaeude_aufnahme_allgemein.brennwert_kessel}","label":"Brennwertkessel"},
+    {"id":9,"name":"warmwasser_rohre_gedaemmt","value":"BWK","bindchecked":"{gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}","label":"Warmwasserrohre gedämmt"},
+    {"id":10,"name":"heizungsrohre_gedaemmt","value":"HRGD","bindchecked":"{gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}","label":"Heizungsrohre gedämmt"},
+    {"id":11,"name":"zirkulation","value":"ZK","bindchecked":"{gebaeude_aufnahme_allgemein.zirkulation}","label":"Zirkulation"},
+    {"id":12,"name":"raum_temperatur_regler","value":"RTR","bindchecked":"{gebaeude_aufnahme_allgemein.raum_temperatur_regler}","label":"Raumtemperaturregler"}
+    ];
+
+
 </script>
 
-<div class="GRB3">
+<div id="sanierungszustand" class="bereich-box grid 
+grid-cols-1 gap-x-4 gap-y-2
+
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+md:grid-cols-2 md:gap-x-6 md:gap-y-8
+
+xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
+2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
+">
+
+
+{#each sanierungsoptionen as item}
+
+	<div class="grid grid-cols-[40px_1fr] items-center justify-items-start h-[38px] ring-1 ring-black/15 bg-white order-{item.id} active:bg-green-100" >
+
+		<input
+				id="{item.name}"
+				type="checkbox"
+				class="checkbox w-full"
+				name="{item.name}"
+				bind:checked={item.bindchecked}
+				value="{item.value}"
+			/>
+		<label class="w-full" for="{item.name}">{item.label}</label>
+
+	</div>
+
+
+
+{/each}
+
+</div>
+
+<HeizungImage bind:images bind:ausweis bind:gebaeude />
+
+<style lang="postcss">
+label{@apply cursor-pointer}
+.check-input{@apply grid grid-cols-[max-content_max-content] gap-2 items-center}
+	
+</style>
+
+<!--
+
 	<HelpLabel title="Heizungsanlage (bitte zutreffendes ankreuzen) *">
 		Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
 		einschätzen zu können. Bitte setzen Sie den Haken wenn zutreffend. Das
@@ -28,142 +94,6 @@
 	</HelpLabel>
 	<hr />
 
-	<div class="grid grid-cols-4">
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="zentralheizung"
-					bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}
-					value="ZH"
-				/>Zentral/Etage</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="einzelofen"
-					bind:checked={gebaeude_aufnahme_allgemein.einzelofen}
-					value="EO"
-				/>Einzelöfen</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="durchlauf_erhitzer"
-					bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}
-					value="DH"
-				/>Durchlauferhitzer</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="standard_kessel"
-					bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}
-					value="SK"
-				/>Standardkessel</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="solarsystem_warmwasser"
-					bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}
-					value="SSWW"
-				/>Solarsystem für Warmwasser</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="waermepumpe"
-					bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}
-					value="WP"
-				/>Wärmepumpe</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="niedertemperatur_kessel"
-					bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}
-					value="NK"
-				/>Niedertemperaturkessel</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="brennwert_kessel"
-					bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}
-					value="BWK"
-				/>Brennwertkessel</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="warmwasser_rohre_gedaemmt"
-					bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}
-					value="WRGD"
-				/>Warmwasserrohre gedämmt</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="heizungsrohre_gedaemmt"
-					bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}
-					value="HRGD"
-				/>Heizungsrohre gedämmt</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="zirkulation"
-					bind:checked={gebaeude_aufnahme_allgemein.zirkulation}
-					value="ZK"
-				/>Zirkulation</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="raum_temperatur_regler"
-					bind:checked={gebaeude_aufnahme_allgemein.raum_temperatur_regler}
-					value="RTR"
-				/>Raumtemperaturregler</label
-			>
-		</div>
-	</div>
-</div>
-
 <hr />
 
 <HeizungImage bind:images bind:ausweis bind:gebaeude />
@@ -382,3 +312,6 @@
 >
 
 <AusweisPreviewContainer bind:images bind:ausweis bind:gebaeude />
+
+-->
+
diff --git a/src/components/Ausweis/HeizungImage.svelte b/src/components/Ausweis/HeizungImage.svelte
index 60196515..325158f6 100644
--- a/src/components/Ausweis/HeizungImage.svelte
+++ b/src/components/Ausweis/HeizungImage.svelte
@@ -8,9 +8,9 @@
 	export let gebaeude: GebaeudeClient;
 </script>
 
-<div class="grid grid-cols-2 gap-4">
-	<div class="rounded-lg border-4 p-4 bg-white">
-		<input type="file" class="image_upload" multiple />
+<div class="grid grid-cols-2 gap-x-6 mt-6">
+	<div class="box card">
+
 
 		<p class="font-bold mb-2">
 			<span class="text-red-500">WICHTIG:</span>
@@ -27,25 +27,13 @@
 			Energieausweis.
 		</p>
 		<br />
-		<ol>
+		<ol class="">
 			<li>1.Bild : Heizungsraum mit Heizkessel bzw. Heizungsanlage*</li>
-			<li>
-				2.Bild : <em
-					>(wenn möglich, Warmwasserleitungen bzw. die Heizungsrohre)</em
-				>
-			</li>
-			<li>
-				3.Bild : <em
-					>(wenn möglich, Detailbild des Wärmeerzeugers bzw.
-					Heizkessel)</em
-				>
-			</li>
-			<li>
-				4.Bild : <em
-					>(wenn möglich, Bild des Typenschildes der Heizung)</em
-				>
-			</li>
+			<li>2.Bild : <em>(wenn möglich, Warmwasserleitungen bzw. die Heizungsrohre)</em></li>
+			<li>3.Bild : <em>(wenn möglich, Detailbild des Wärmeerzeugers bzw. Heizkessel)</em></li>
+			<li>4.Bild : <em>(wenn möglich, Bild des Typenschildes der Heizung)</em></li>
 		</ol>
+		<br>
 		<p>* erforderliches Bild</p>
 		<br />
 		<p>
@@ -56,7 +44,7 @@
 		</p>
 	</div>
 
-	<div class="rounded-lg border-4 p-4 bg-white">
+	<div class="box card">
 		<p>
 			Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf
 			Ihrem Energieausweis!<br />
diff --git a/src/components/Ausweis/Verbrauch.svelte b/src/components/Ausweis/Verbrauch.svelte
index 41f46cd4..a8173d73 100644
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -70,10 +70,6 @@
 	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
 
 
-function labelClick(event: any){
-var x = event.target.previousElementSibling;
-x.click(); 
-}
 </script>
 
 
@@ -94,6 +90,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
 		<input
+			id="primaere_heizquelle"
 			type="checkbox"
 			class="checkbox"
 			name="primaere_heizquelle"
@@ -107,12 +104,13 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
 		{#if !ausweis.zusaetzliche_heizquelle}
 		<input
+			id="zusaetzliche_heizquelle_1"
 			type="checkbox"
 			class="checkbox"
-			name="zusaetzliche_heizquelle"
+			name="zusaetzliche_heizquelle_1"
 			bind:checked={ausweis.zusaetzliche_heizquelle}
 		/>
-	    <label for="zusaetzliche_heizquelle" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
+	    <label for="zusaetzliche_heizquelle_1" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
 		{/if}
 	</div>
 
@@ -200,7 +198,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 	    <select 
 			class="rounded-e-none"
 			name="brennstoff_1" 
-			required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
+			bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
+			required
 			>
 			<option disabled selected value={false}>Bitte auswählen</option>
 			{#each Object.keys(fuelMap) as fuel}
@@ -244,9 +243,10 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		<select
 		class="rounded-s-none"
 		name="einheit_1"
+		bind:value={ausweis.einheit_1}
 		disabled={!gebaeude_aufnahme_allgemein.brennstoff_1}
 		required
-		bind:value={ausweis.einheit_1}
+		
 		>
 		
 		<option disabled selected value={false}>Bitte auswählen</option>
@@ -344,6 +344,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
 		<input
+			id="zusaetzliche_heizquelle"
 			type="checkbox"
 			class="checkbox"
 			name="zusaetzliche_heizquelle"
@@ -422,8 +423,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			<select
 			class="rounded-s-none"
 			name="einheit_2"
-			disabled={!ausweis.zusaetzliche_heizquelle}
 			bind:value={ausweis.einheit_2}
+			disabled={!gebaeude_aufnahme_allgemein.brennstoff_2}
 			required
 			>
 			<option disabled selected value={false}>Bitte auswählen</option>
diff --git a/src/components/Ausweis/Warmwasseranteil.svelte b/src/components/Ausweis/Warmwasseranteil.svelte
index 8928ecbd..cc71bed2 100644
--- a/src/components/Ausweis/Warmwasseranteil.svelte
+++ b/src/components/Ausweis/Warmwasseranteil.svelte
@@ -1,15 +1,9 @@
 <script lang="ts">
 
-    import HelpLabel from "#labels/HelpLabel.svelte";
-    import Inputlabel from "#labels/InputLabel.svelte";
-    
-    export let ausweis: VerbrauchsausweisWohnenClient;
-
-function labelClick(event){
-var x = event.target.previousElementSibling;
-x.click(); 
-}
+import HelpLabel from "#labels/HelpLabel.svelte";
+import Inputlabel from "#labels/InputLabel.svelte";
 
+export let ausweis;
 
 
 
@@ -25,21 +19,23 @@ x.click();
 	<div class="input-standard order-1 md:order-1 xl:order-1">
 	<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>
 
-<div class="input-checkboxen">
+    <div class="input-row items-center gap-2">
 
-<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
+<div class="grid grid-cols-[max-content_40px] gap-x-2 items-center justify-items-start">
 	<input
+    id="warmwasser_enthalten"
 	type="checkbox"
 	class="checkbox"
 	name="warmwasser_enthalten"
 	data-test="warmwasser_enthalten"
 	bind:checked={ausweis.warmwasser_enthalten}
 	/>
-    <label for="warmwasser_enthalten" class="cursor-pointer" on:click={() => labelClick(event)}>Ja</label>
+    <label for="warmwasser_enthalten" class="cursor-pointer">Ja</label>
 </div>
 
 <div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
 	<input
+    id="warmwasser_anteil_bekannt"
 	type="checkbox"
 	class="checkbox"
 	name="warmwasser_anteil_bekannt"
@@ -47,7 +43,7 @@ x.click();
 	bind:checked={ausweis.warmwasser_anteil_bekannt}
 	disabled={!ausweis.warmwasser_enthalten}
 />
-    <label for="warmwasser_anteil_bekannt" class="cursor-pointer" on:click={() => labelClick(event)}>Anteil bekannt</label>
+    <label for="warmwasser_anteil_bekannt" class="cursor-pointer">Anteil bekannt</label>
 </div>
 
 </div>
@@ -122,48 +118,52 @@ x.click();
 
 <div class="grid grid-cols-[max-content_40px] gap-2 items-center">
     <input
+    id="alternative_heizung"
     type="checkbox"
     name="alternative_heizung"
     data-test="alternative_heizung"
     bind:checked={ausweis.alternative_heizung}
     value="Heizung"
     />
-    <label for="alternative_heizung" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Heizung</label>
+    <label for="alternative_heizung" class="checkbox-inline cursor-pointer">Heizung</label>
 </div>
 
 <div class="grid grid-cols-[max-content_40px] gap-2 items-center">
 
 <input
+    id="alternative_warmwasser"
     type="checkbox"
     name="alternative_warmwasser"
     data-test="alternative_warmwasser"
     bind:checked={ausweis.alternative_warmwasser}
     value="Warmwasser"
     />
-    <label for="alternative_warmwasser" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Warmwasser</label>
+    <label for="alternative_warmwasser" class="checkbox-inline cursor-pointer">Warmwasser</label>
 </div>
 
 <div class="grid grid-cols-[max-content_40px] gap-2 items-center">
 <input
+    id="alternative_lueftung"
     type="checkbox"
     name="alternative_lueftung"
     data-test="alternative_lueftung"
     bind:checked={ausweis.alternative_lueftung}
     value="Lüftung"
 />
-<label for="alternative_lueftung" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Lüftung</label>
+<label for="alternative_lueftung" class="checkbox-inline cursor-pointer">Lüftung</label>
 </div>
 
 <div class="grid grid-cols-[max-content_40px] gap-2 items-center">
 
 <input
+    id="alternative_kuehlung"
     type="checkbox"
     name="alternative_kuehlung"
     data-test="alternative_kuehlung"
     bind:checked={ausweis.alternative_kuehlung}
     value="Kühlung"
 />
-<label for="alternative_kuehlung" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Kühlung</label>
+<label for="alternative_kuehlung" class="checkbox-inline cursor-pointer">Kühlung</label>
 </div>
 
 </div>
diff --git a/src/components/design/sidebars/cards/CardProduktSidebar.svelte b/src/components/design/sidebars/cards/CardProduktSidebar.svelte
new file mode 100644
index 00000000..23e16cff
--- /dev/null
+++ b/src/components/design/sidebars/cards/CardProduktSidebar.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let art: string;
+	export let price: number;
+</script>
+	
+<div id ="Card{art}Sidebar"
+	class="hidden lg:grid box card grid-cols-1 justify-items-center">
+
+
+
+	<h2>{art}</h2>
+
+	
+	<div >
+
+	{#if art=="Verbrauchsausweis Gewerbe"}
+	<img src="/images/right-sidebar/gewerbegebaeude.svg" alt="Verbrauchsausweis Gewerbe"/>
+	
+	{:else if art=="Bedarfsausweis Gewerbe"}
+	<img src="/images/right-sidebar/gewerbegebaeude.svg" alt="Bedarfsausweis Gewerbe"/>
+	
+	{:else if art=="Verbrauchsausweis Wohnen"}
+	<img src="/images/right-sidebar/wohngebaeude.svg" alt="Verbrauchsausweis Wohnen"/>
+
+	{:else if art=="Bedarfsausweis Wohnen"}
+	<img src="/images/right-sidebar/wohngebaeude.svg" alt="Bedarfsausweis Wohnen"/>
+	
+	{/if}
+
+	<div class="promo tracking-tighter text-[1.6rem] text-right text-gray-700 pr-32 -mt-5 mb-2">ab {price}€</div>
+
+	</div>
+
+	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" class="link">{art} jetzt&nbsp;erstellen</a>
+	
+	</div>
+
+<style lang="postcss">
+
+.link{@apply w-full text-white font-[700] bg-secondary rounded-md text-center px-3 py-1 no-underline [font-size:_clamp(8px,1vw,16px)] hover:bg-primary}
+
+</style>
diff --git a/src/components/design/sidebars/cards/cardContact.svelte b/src/components/design/sidebars/cards/cardContact.svelte
index 03a920e4..225f989b 100644
--- a/src/components/design/sidebars/cards/cardContact.svelte
+++ b/src/components/design/sidebars/cards/cardContact.svelte
@@ -1,20 +1,28 @@
 <div id ="cardContact" class="box card">
 	
-	<div class="grid grid-cols-[max-content,1fr]">
-		<div class="">
-		<h2>Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
-		<hr class="w-11/12"/>
-		<p>Telefonische Beratung unter</p>
-		<a class="text-lg font-bold text-box-heading" href="tel:+4940209339850">040 / 209 339 850</a>
+	<div class="grid grid-cols-[max-content,1fr] gap-x-2 border-b-[1px] pb-2 mb-4">
+		
+		<div class="self-stretch">
+		<h2 class="border-b-0 mb-4">Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
+		<p class="text-sm">telefonische Beratung</p>
 		</div>
-
-		<img class="w-[100px] !min-w-[100px] mt-[0px] justify-self-end" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
+		<img class="justify-self-end self-start" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
 	</div>
 
+<div>
+<div class="-mt-2">
+	
+	<a class="text-3xl font-bold" href="tel:+4940209339850">040 / 209 339 850</a>
+</div>
+
 </div>
 
 
-<style lang="scss">
+
+</div>
+
+
+<style lang="postcss">
 
 
 </style>
diff --git a/src/components/design/sidebars/cards/cardNavigation.svelte b/src/components/design/sidebars/cards/cardNavigation.svelte
index cc48ab73..abe6c18e 100644
--- a/src/components/design/sidebars/cards/cardNavigation.svelte
+++ b/src/components/design/sidebars/cards/cardNavigation.svelte
@@ -57,7 +57,7 @@ if(innerWidth>1024){
     const nodeList = document.querySelectorAll(".dropdown-content");
     for (let i = 0; i < nodeList.length; i++) {
     nodeList[i].classList.remove("show-dropdown-content");}
-    var element = document.getElementById("card-navigation");
+    var element = document.getElementById("cardNavigation");
     element.classList.toggle("hidden");
 
     const spans = this.children;
@@ -91,14 +91,16 @@ if(innerWidth>1024){
 
 
 
-<nav id="cardNavigation" class="cardNavigation box hidden ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"> 
+<nav id="cardNavigation" class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"> 
+
+  <div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Angebote</div>
 
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
     {#if innerWidth > 1023}
-    <a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl" >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href={undefined} class="nav-element-child" >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {:else}
-    <a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href={undefined} class="nav-element-child">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {/if}
     
     <ul class="dropdown-content energieasusweis-erstellen">
@@ -116,6 +118,8 @@ if(innerWidth>1024){
     <a class="no-dropdown nav-element-child" href="/welcher-energieausweis">Welcher Energieausweis?</a>
   </div>
 
+  <div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Produkte</div>
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
   <a href={undefined} class="nav-element-child">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
@@ -165,6 +169,8 @@ if(innerWidth>1024){
   </ul>
 </div>
 
+<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">FAQ & Hilfe</div>
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
   <a href="{'/faq'}" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
diff --git a/src/components/design/sidebars/cards/cardPriceiInfo.svelte b/src/components/design/sidebars/cards/cardPriceiInfo.svelte
index a30a1a97..72e4c287 100644
--- a/src/components/design/sidebars/cards/cardPriceiInfo.svelte
+++ b/src/components/design/sidebars/cards/cardPriceiInfo.svelte
@@ -6,7 +6,7 @@
 			
 <h2>Was wird der Energieausweis kosten?</h2>
 
-<hr class="trenner-h">
+
 <div>Verbrauchsausweis Wohngebäude</div>
 <div>ab&nbsp;<span class="price">{PRICES.VerbrauchsausweisWohnen[0]}€</span>&nbsp;inkl.&nbsp;MwSt.</div>
 
@@ -36,7 +36,6 @@
 
 <style lang="postcss">
 
-.trenner-h{@apply mb-4 bg-primary h-[2px]}
 .trenner{@apply my-2}
 .price{@apply font-bold}
 
diff --git a/src/components/design/sidebars/cards/cardVAGpromo.svelte b/src/components/design/sidebars/cards/cardVAGpromo.svelte
index 4eee4c2d..960251b9 100644
--- a/src/components/design/sidebars/cards/cardVAGpromo.svelte
+++ b/src/components/design/sidebars/cards/cardVAGpromo.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { PRICES } from "#lib/constants";
 </script>
 	
@@ -9,12 +9,12 @@
 
 	<h2>Verbrauchsausweis Gewerbe</h2>
 	<hr class="mb-4">
-	<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
+	<img class="w-[70%] justify-self-center !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
 	<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
-			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-gradient-to-br from-secondary to-secondary-grad rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
 					hover:bg-primary
-			" >jetzt Verbrauchsausweis erstellen</a>
+			" >Verbrauchsausweis sofort&nbsp;erstellen</a>
 	</div>
 </div>
 
diff --git a/src/components/design/sidebars/left/SidebarLeft.astro b/src/components/design/sidebars/left/SidebarLeft.astro
index 6b6fc38c..0358d28f 100644
--- a/src/components/design/sidebars/left/SidebarLeft.astro
+++ b/src/components/design/sidebars/left/SidebarLeft.astro
@@ -1,12 +1,18 @@
 ---
 import CardNavigation from "#sidebarCards/cardNavigation.svelte";
 import CardPriceiInfo from "#sidebarCards/cardPriceiInfo.svelte";
+import CardProduktSidebar from "#sidebarCards/CardProduktSidebar.svelte";
+
+import { PRICES } from "#lib/constants";
 ---
 
 
 <div class="">
 
 <CardNavigation client:load/>
+
+<CardProduktSidebar art="Verbrauchsausweis Gewerbe" price={PRICES.VerbrauchsausweisGewerbe[0]}></CardProduktSidebar>
 <CardPriceiInfo />
+<CardProduktSidebar art="Bedarfsausweis Wohnen" price={PRICES.BedarfsausweisWohnen[0]}></CardProduktSidebar>
 
 </div>
\ No newline at end of file
diff --git a/src/components/design/sidebars/right/SidebarRight.astro b/src/components/design/sidebars/right/SidebarRight.astro
index 2fd41fb6..a89da9a5 100644
--- a/src/components/design/sidebars/right/SidebarRight.astro
+++ b/src/components/design/sidebars/right/SidebarRight.astro
@@ -1,20 +1,21 @@
 ---
 import CardContact from "#sidebarCards/cardContact.svelte";
-import CardReview from "#sidebarCards/cardReview.svelte";
-import CardVApromo from "#sidebarCards/cardVApromo.svelte";
-import CardVAGpromo from "#sidebarCards/cardVAGpromo.svelte";
-import CardBApromo from "#sidebarCards/cardBApromo.svelte";
-import CardBAGpromo from "#sidebarCards/cardBAGpromo.svelte";
+import CardPriceiInfo from "#sidebarCards/cardPriceiInfo.svelte";
+import CardProduktSidebar from "#sidebarCards/CardProduktSidebar.svelte";
+
+import { PRICES } from "#lib/constants";
 ---
 
 <div class="hidden 2xl:block">
 
-    <CardContact />
-    <CardReview />
-    <CardVAGpromo />
-    <CardBAGpromo />
-    <CardVApromo />
-    <CardBApromo />  
+<CardContact />
+
+
+<CardProduktSidebar art="Verbrauchsausweis Wohnen" price={PRICES.VerbrauchsausweisWohnen[0]}></CardProduktSidebar>
+<CardPriceiInfo />
+<CardProduktSidebar art="Bedarfsausweis Gewerbe" price={PRICES.BedarfsausweisGewerbe[0]}></CardProduktSidebar>
+
+
 </div>
 
 
diff --git a/src/components/labels/VerbrauchsHelpLabel.svelte b/src/components/labels/VerbrauchsHelpLabel.svelte
index 295dfddc..8fc5b222 100644
--- a/src/components/labels/VerbrauchsHelpLabel.svelte
+++ b/src/components/labels/VerbrauchsHelpLabel.svelte
@@ -3,8 +3,8 @@
 
     export let addYear: number;
     export let heizquelle: number;
-    export let gebaeude_aufnahme_allgemein: object = {};
-	export let ausweis: object = {};;
+    export let gebaeude_aufnahme_allgemein;
+	export let ausweis;
 
 </script>
 
diff --git a/src/layouts/AusweisLayout.astro b/src/layouts/AusweisLayout.astro
index 469a72db..86e61d65 100644
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -71,12 +71,12 @@ const { title } = Astro.props;
 			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
 			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
 			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
-			2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-6
+			2xl:grid-cols-[minmax(300px,300px)1fr] 2xl:gap-5 2xl:p-6
 		">
 
 		<SidebarLeft />
 
-		<article class="box rounded-tl-none p-12">
+		<article class="box rounded-tl-none p-2 lg:p-12">
 		<slot />
 		</article>
  
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9c0adeef..5fa0c3ad 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -41,10 +41,10 @@ const { title } = Astro.props;
 		md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
 		lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
 		xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
-		2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-6
+		2xl:grid-cols-[minmax(300px,300px)1fr_minmax(300px,300px)] 2xl:gap-5 2xl:p-6
 		">
 
-		<SidebarLeft client:load/>
+		<SidebarLeft />
 		
 		<article class="box rounded-tl-none
 		xl:px-10 py-8">
diff --git a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
index 33bafb5b..2c8e6b9a 100644
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -236,6 +236,18 @@
 	<LueftungundLeerstand 
 	bind:gebaeude_aufnahme_allgemein
 />
+</div>
+
+<!-- F Angaben zum Sanierungszustand des Gebäudes -->
+
+<BereichLabel bereich="F">Angaben zum Sanierungszustand des Gebäudes</BereichLabel>
+<div class="collapseBereich">
+	<BilderZusatzsysteme
+	bind:images 
+	bind:gebaeude 
+	bind:gebaeude_aufnahme_allgemein 
+	bind:ausweis 
+/>
 </div>	
 
 
diff --git a/src/style/576.scss b/src/style/576.scss
index 65c43b52..92f3e840 100644
--- a/src/style/576.scss
+++ b/src/style/576.scss
@@ -1063,7 +1063,7 @@ content > *:nth-child(3) {
 /* NOTE: */
 article ul {
 	margin-left: 1em;
-	list-style: disc;
+	list-style: none;
 	font-weight: 400;
 	line-height: 1.5;
 	color: #212529;
diff --git a/src/style/formular.css b/src/style/formular.css
index afa19b24..37264093 100644
--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -33,10 +33,9 @@
 .input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2}
 .input-noHelp{@apply w-full grid grid-cols-[1fr] items-center relative mt-2}
 .input-checkboxen{@apply h-[38px] grid grid-cols-[1fr_1fr] gap-2 items-center ring-1 ring-black/15 rounded-sm bg-white}
+
 .input-row{@apply w-full min-h-[38px] grid grid-cols-[1fr_1fr] sm:grid-cols-[1fr_1fr_1fr_1fr] items-center py-[6px] px-[10px] ring-1 ring-black/15 rounded-sm bg-white }
 
-
-
 .help-label{@apply bg-black/15 rounded-e-sm ring-1 ring-black/15 self-stretch}
 
 
diff --git a/src/style/global.css b/src/style/global.css
index f1c9360d..e0df8b54 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -78,8 +78,8 @@ article {
 	
 	a {@apply text-blue-700 font-medium text-lg;}
 	p {@apply text-lg font-normal mb-2;}
-	li {@apply text-lg font-normal list-disc}
-	ul {@apply list-inside mb-3;}
+	li {@apply text-lg font-normal}
+	ul {@apply inline-block}
 	span {@apply text-secondary font-bold;}
 	
 	
@@ -99,7 +99,7 @@ article {
 .card:not(:last-child){@apply mb-5}
 .card{@apply bg-white px-6 py-4;
 
-	h2		{@apply text-lg font-bold text-box-heading leading-6}
+	h2		{@apply w-full [font-size:_clamp(8px,1.25vw,16px)] font-bold text-box-heading leading-6 pb-1 mb-4 border-b-[1px] border-primary/35}
 	hr		{@apply my-0}
 	p		{@apply text-lg}
 	a		{@apply text-lg}