2024-12-04 12:50:39 +00:00
28 changed files with 1527 additions and 488 deletions
--- a/public/images/header/logo-IBC-big.svg
+++ b/public/images/header/logo-IBC-big.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 143 163.6">
+  <!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142)  -->
+  <defs>
+    <style>
+      .st0 {
+        display: none;
+        fill: #878787;
+      }
+
+      .st1 {
+        fill: #445096;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5,2,2.3,3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7Z"/>
+  <g>
+    <path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2Z"/>
+    <path class="st1" d="M84.3,128c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8ZM70,125.4v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8Z"/>
+    <path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/>
+    <path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/>
+    <path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/>
+    <path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/>
+    <path class="st1" d="M124.5,130.2h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7-2.7-3-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7Z"/>
+    <polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
+    <path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
+  </g>
+</svg>
--- a/src/components/design/content/banner-saeule.svelte
+++ b/src/components/design/content/banner-saeule.svelte
@@ -2,6 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>

+<div class="mt-12 m-auto w-[90%] relative">
+
 <div id="saeulen">

    <div class="saeule">
@@ -9,23 +11,29 @@
            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
            <div class="name">Verbrauchsausweis<br>Wohngebäude</div> 
        </div>   
+
+        <div class="white box">
+            <div class="variante">einfach</div>
+            <div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als&nbsp;18&nbsp;Monate&nbsp;sein.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung oder Verkauf Ihres&nbsp;Immobilienobjektes.</div><div class="check">✔</div></div>
+			<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978 gebaut mit weniger&nbsp;als&nbsp;5&nbsp;Wohnungen.</div><div class="check-no">✘</div></div>
+			<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet. Starke Abweichungen durch&nbsp;individuelles&nbsp;Heizverhalten.</div><div class="check-no">✘</div></div>
+			<div class="services"><div>Wird nicht immer bei den Banken für die Kreditunterlagen&nbsp;akzeptiert.</div><div class="check-no">✘</div></div>
+        </div>
+
        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
+            <div class="price">
+                ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
        </div>
+
        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
+            <div class="cta">jetzt online erstellen</div> 
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
        </div>
    </div>

@@ -34,99 +42,75 @@
            <img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
            <div class="name">Verbrauchsausweis<br>Gewerbe</div> 
        </div>   
+
+        <div class="white box">
+            <div class="variante">fundiert</div>
+            <div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad&nbsp;der&nbsp;Heizung.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung&nbsp;und&nbsp;Neubau.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und&nbsp;unsanierte&nbsp;Objekte.</div><div class="check">✔</div></div>
+			<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen&nbsp;werden.</div><div class="check">✔</div></div>
+			<div class="services"><div>Objektive  Berechnung die für die Kreditunterlagen besser&nbsp;geeignet&nbsp;ist.</div><div class="check">✔</div></div>
+        </div>
+
        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
+            <div class="price">
+                ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
        </div>
+
        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
+            <div class="cta">jetzt online erstellen</div> 
        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
+        </div>
+
    </div>

-    <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
-            <div class="name">Bedarfsausweis<br>Wohngebäude</div> 
-        </div>   
-        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
-        </div>
-        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
-        </div>
-    </div>

-    <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
-            <div class="name">Bedarfsausweis<br>Gewerbe</div> 
-        </div>   
-        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
-        </div>
-        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
-        </div>
-    </div>
+</div>

 </div>

 <style lang="scss">

-#saeulen{@apply grid grid-cols-[1fr] gap-4 
-    lg:grid-cols-[1fr,1fr,1fr]
-    xl:grid-cols-[1fr,1fr,1fr,1fr];
-.saeule{@apply grid;
-img{@apply w-full justify-self-center mb-1 min-h-[50px] }
-.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
+
+
+#saeulen{@apply 
+    grid grid-cols-[1fr] gap-y-3 gap-x-6
+    lg:grid-cols-2
+    xl:grid-cols-2;
+
+
+.saeule{@apply grid grid-rows-subgrid row-span-10;
+img{@apply justify-self-center mb-1 w-[50%] }
+
+
+.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
 .name{@apply w-full}
-.name{font-size: clamp(15px, 2vh, 18px)}
-.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
-.ab{@apply leading-[1]}
-.mwst{@apply leading-[auto]}
-.price{font-size: clamp(15px, 5vh, 50px)}
-.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]} 
-.white{@apply border-x-[1px] border-gray-500 text-center text-black p-4}
-.services{@apply py-2}
-.services:first-child{@apply font-bold}
-.services:nth-child(even){@apply bg-white}
-.services:not(:last-child){@apply border-b-[1px] border-gray-300}
-.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
+.name{font-size: clamp(15px, 3vh, 18px)}
+
+.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
+
+.variante{@apply w-fit text-black justify-self-end mr-4}
+.variante{font-size: clamp(15px, 4vh, 24px)}
+
+.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
+.services:not(:last-child){@apply border-b-[1px] border-gray-200}
+.check{@apply self-center font-bold text-green-700}
+.check-no{@apply self-center font-bold text-red-700}
+
+
+
+.orange{@apply bg-primary text-white text-center rounded-md p-4 relative shadow-saeule ring-primary ring-1}
+.price{font-size: clamp(15px, 3vh, 28px)}
+.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
+
+
+
+.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-4 shadow-saeule ring-secondary ring-1}
 }

 }
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -1,25 +1,22 @@
-<header class="max-w-[1920px] w-full relative bg-white
-md:bg-[url('/images/header/header-bg.jpg')] 
-md:bg-cover md:grid md:grid-cols-2
-lg:grid lg:grid-cols-3">
+---
+import Login from "#sidebarCards/card-login.svelte";
+---
+
+<header>
+
+<div class="max-w-[1920px] w-full grid relative bg-white
+
+sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
+md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
+
+lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
+xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
+2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">



-	<div class="
-	justify-self-center px-2 py-2
-	xs:px-6 xs:py-4
-	md:px-4 md:py-4
-	md:col-end-4 md:justify-self-end 
-	xl:my-4 xl:mr-9 xl:p-0">
-
-	
-		<a href="/">
-			<img class="
-			w-full
-			md:w-[350px]
-			lg:w-[420px]" 
-			src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
-		</a>
+<!---
+		lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
 		
 		<h2 class="text-secondary font-normal absolute
 					top-1 right-2 text-[1.1rem]
@@ -37,26 +34,52 @@ lg:grid lg:grid-cols-3">
 					md:top-[2.5rem] md:right-4 md:text-[0.9rem]
 					xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
 					Energieausweise nach aktuellem GEG
-		</h2>
+		</h2> -->
 		
+
+
+
+
+<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[auto_auto] gap-6 pt-[0px]">
+
+	<div class="self-start justify-self-start">
+
+		<a href="/index_1">
+			<img class="w-full max-w-[75px]" 
+			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
+		</a>
 	</div>

+	<div class="self-stretch justify-self-start">
+	<div class="text-secondary
+	lg:[font-size:_clamp(15px,3vw,26px)]
+	lg:leading-[2rem]
+	xl:[font-size:_clamp(15px,3vw,36px)] 
+	xl:leading-[4.5rem] pt-[0px]">
+	Energieausweis online erstellen</div>
+	<div class="text-primary 
+	lg:[font-size:_clamp(15px,3vw,20px)] 
+	lg:leading-[2rem]
+	xl:[font-size:_clamp(15px,3vw,24px)] 
+	xl:leading-[0.5rem] pl-[1px]">
+	Energieausweise nach aktuellem GEG</div>
+	</div>
+
+
+</div>
+
+<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
+		<Login client:load />
+		</div>
+
+
+</div>
+
 	<div class="col-start-1 col-span-3">
 		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
-					lg:h-[14px] xl:h-[18px]">
-
-			<!-- <a
-				class="header-button hidden md:block"
-				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
-				>Energieausweis erstellen</a
-			>
-			<a class="header-button hidden md:block" href="/kontakt"
-				>Kontakt</a
-			>
-			<a class="header-button hidden md:block" href="/agb">AGB</a>
-				-->
-				
-		</div>
+					lg:h-[12px] xl:h-[12px]"></div>
+		<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
+					lg:h-[0px] xl:h-[0px]"></div>			
 	</div>

 </header>
--- a/src/components/design/header/Header_1.astro
+++ b/src/components/design/header/Header_1.astro
@@ -0,0 +1,68 @@
+<header class="max-w-[1920px] w-full relative bg-white
+md:bg-[url('/images/header/header-bg.jpg')] 
+md:bg-cover md:grid md:grid-cols-2
+lg:grid lg:grid-cols-3">
+
+
+
+	<div class="
+	justify-self-center px-2 py-2
+	xs:px-6 xs:py-4
+	md:px-4 md:py-4
+	md:col-end-4 md:justify-self-end 
+	xl:my-4 xl:mr-9 xl:p-0">
+
+	
+		<a href="/">
+			<img class="
+			w-full
+			md:w-[350px]
+			lg:w-[420px]" 
+			src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
+		</a>
+		
+		<h2 class="text-secondary font-normal absolute
+					top-1 right-2 text-[1.1rem]
+					xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
+					
+					md:top-[1.25rem] md:right-4 md:text-[1.1rem]
+					xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
+					Energieausweis online erstellen
+		</h2>
+				
+		<h2	class="text-primary font-normal absolute 
+					top-[1.6rem] right-2 text-[0.85rem]
+					xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
+					
+					md:top-[2.5rem] md:right-4 md:text-[0.9rem]
+					xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
+					Energieausweise nach aktuellem GEG
+		</h2>
+		
+	</div>
+
+	<div class="col-start-1 col-span-3">
+		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
+					lg:h-[14px] xl:h-[18px]">
+
+			<!-- <a
+				class="header-button hidden md:block"
+				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
+				>Energieausweis erstellen</a
+			>
+			<a class="header-button hidden md:block" href="/kontakt"
+				>Kontakt</a
+			>
+			<a class="header-button hidden md:block" href="/agb">AGB</a>
+				-->
+				
+		</div>
+	</div>
+
+</header>
+
+<style>
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
+</style>
--- a/src/components/design/sidebars/cards/card-BA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/card-BA-G-promo.svelte
@@ -10,16 +10,13 @@ class="	box card hidden bg-white px-6 py-4 mb-5

 <h2>Bedarfssausweis Gewerbe</h2>
 <hr class="mb-4">
-<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-
+<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
+<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
 <a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo" 
        class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                hover:bg-primary
        " >jetzt Bedarfssausweis erstellen</a>
 </div>
-
-<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">300</span>€</p>
-
 </div>


--- a/src/components/design/sidebars/cards/card-BA-promo.svelte
+++ b/src/components/design/sidebars/cards/card-BA-promo.svelte
@@ -3,23 +3,19 @@
 </script>
 	
 <div id ="card-BA-promo" 
-class="	box card hidden bg-white px-6 py-4 mb-5
-        lg:block">
+class="	box card bg-white px-6 py-4 mb-5">

 <div class="grid">

 <h2>Bedarfssausweis Wohngebäude</h2>
 <hr class="mb-4">
-<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-
+<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
 <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
        class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                hover:bg-primary
        " >jetzt Bedarfssausweis erstellen</a>
 </div>
-
-<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
-
 </div>


--- a/src/components/design/sidebars/cards/card-VA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/card-VA-G-promo.svelte
@@ -3,23 +3,19 @@
 </script>
 	
 <div id ="card-VA-G-promo" 
-	class="	box card hidden bg-white px-6 py-4 mb-5
-			lg:block">
+	class="	box card bg-white px-6 py-4 mb-5">

 	<div class="grid">

 	<h2>Verbrauchsausweis Gewerbe</h2>
 	<hr class="mb-4">
-	<img class="w-[80%] 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] mb-[1rem]" 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]
 					hover:bg-primary
 			" >jetzt Verbrauchsausweis erstellen</a>
 	</div>
-
-	<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
-
 </div>


--- a/src/components/design/sidebars/cards/card-VA-promo.svelte
+++ b/src/components/design/sidebars/cards/card-VA-promo.svelte
@@ -3,23 +3,19 @@
 </script>
 	
 <div id ="card-VA-promo" 
-	class="	box card hidden bg-white px-6 py-4 mb-5
-			lg:block">
+	class="	box card bg-white px-6 py-4 mb-5">

 	<div class="grid">

 	<h2>Verbrauchsausweis Wohngebäude</h2>
 	<hr class="mb-4">
-	<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-
+	<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+	<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
 			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
 					hover:bg-primary
 			" >jetzt Verbrauchsausweis erstellen</a>
 	</div>
-
-	<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
-
 </div>


--- a/src/components/design/sidebars/cards/card-login.svelte
+++ b/src/components/design/sidebars/cards/card-login.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { loginClient } from "#lib/login";
+	import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
+	import { fade } from "svelte/transition";
+
+	let email: string;
+	let passwort: string;
+
+	async function login(e: SubmitEvent) {
+		console.log(e);
+		
+		e.preventDefault();
+		const response = await loginClient(email, passwort);
+
+		if (response === null) {
+			errorHidden = false;
+		} else {
+			window.location.href = "/dashboard";
+		}
+	}
+
+	let errorHidden = true;
+</script>
+
+<div
+	id="card-login">
+
+	<div>
+
+	
+		<form on:submit={login}>
+			<div class="grid grid-cols-[1fr_1fr] gap-2">
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="text"
+				placeholder="nutzer@email.com"
+				name="email"
+				bind:value={email}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="password"
+				minlength="8"
+				placeholder="********"
+				name="passwort"
+				bind:value={passwort}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			{#if !errorHidden}
+			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+				<CrossCircled size={24} />
+				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
+			</div>
+			{/if}
+		
+</div>
+<div class="grid grid-cols-[3fr_2fr] gap-2">
+
+			<div class="w-full text-left self-center">
+				<a
+					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
+					href="/auth/signup">Registrieren</a
+				> /
+				<a
+					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
+					href="/auth/passwort-vergessen">Passwort vergessen</a
+				>
+			</div>
+
+			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
+
+		</div>
+		</form>
+
+		
+
+		<div></div>
+	</div>
+</div>
+
+<style lang="postcss">
+
+
+</style>
--- a/src/components/design/sidebars/cards/SidebarWidgetLogin.svelte
+++ b/src/components/design/sidebars/cards/SidebarWidgetLogin.svelte
@@ -93,4 +93,4 @@
 </div>

 <style lang="scss">
-</style>
+</style>
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -97,7 +97,7 @@ if(innerWidth>1024){



-<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 lg:block"> 
+<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block"> 

  <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
    {#if innerWidth > 1023}
--- a/src/components/design/sidebars/right/SidebarRight.astro
+++ b/src/components/design/sidebars/right/SidebarRight.astro
@@ -1,5 +1,4 @@
 ---
-import Login from "#sidebarCards/SidebarWidgetLogin.svelte";
 import Contact from "#sidebarCards/card-contact.svelte";
 import Review from "#sidebarCards/card-review.svelte";
 import VApromo from "#sidebarCards/card-VA-promo.svelte";
@@ -11,13 +10,13 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
 <div class="hidden
            xl:flex xl:flex-col xl:grow
            ">
-    <Login client:load />
+
    <Contact client:load />
    <Review client:load />
-    <VApromo client:load />
    <VAGpromo client:load />
-    <BApromo client:load />
    <BAGpromo client:load />
+    <VApromo client:load />
+    <BApromo client:load />  
 </div>


--- a/src/components/design/sidebars/right/SidebarRight_1.astro
+++ b/src/components/design/sidebars/right/SidebarRight_1.astro
@@ -0,0 +1,25 @@
+---
+import Login from "#sidebarCards/card-login_1.svelte";
+import Contact from "#sidebarCards/card-contact.svelte";
+import Review from "#sidebarCards/card-review.svelte";
+import VApromo from "#sidebarCards/card-VA-promo.svelte";
+import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
+import BApromo from "#sidebarCards/card-BA-promo.svelte";
+import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
+---
+
+<div class="hidden
+            xl:flex xl:flex-col xl:grow
+            ">
+            
+    <Login client:load />
+    <Contact client:load />
+    <Review client:load />
+    <VApromo client:load />
+    <VAGpromo client:load />
+    <BApromo client:load />
+    <BAGpromo client:load />
+</div>
+
+
+</div>
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -1,5 +1,6 @@
 ---
 import "../style/global.css";
+import "../style/formular.css";
 import "../../svelte-dialogs.config"
 import Header from "#header/Header.astro";
 import Footer from "#footer/Footer.astro";
@@ -75,7 +76,7 @@ const { title } = Astro.props;

 		<SidebarLeft />
 		
-		<article class="box grow">
+		<article class="box grow rounded-tl-none">
 		<slot />
 		</article>

@@ -149,25 +150,9 @@ article {
 		text-indent: -9999px;
 	}

-	.GRB {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}

-	.yellow-box {
-		@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-[rgba(252,234,187,0.2)];
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}
+
+

 	.GRB3 {
 		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -13,7 +13,6 @@ export interface Props {

 const { title } = Astro.props;

-
 ---

 <!DOCTYPE html>
@@ -38,8 +37,8 @@ const { title } = Astro.props;

 		<main
 			class="w-full p-0 grid
-			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1
-			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
 			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
 			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
 			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
@@ -47,7 +46,7 @@ const { title } = Astro.props;

 		<SidebarLeft />
 		
-		<article class="box grow">
+		<article class="box grow rounded-tl-none">
 		<slot />
 		</article>
 		
--- a/src/layouts/Layout_1.astro
+++ b/src/layouts/Layout_1.astro
@@ -0,0 +1,63 @@
+---
+import "../style/global.css";
+import "../../svelte-dialogs.config"
+import Header from "#header/Header_1.astro";
+import Footer from "#footer/Footer.astro";
+import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
+import SidebarRight from "#sidebarRight/SidebarRight_1.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+---
+
+<!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="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<title>
+			{title || "Energieausweis online erstellen - Online Energieausweis"}
+		</title>
+	</head>
+
+	<body>
+	<container class="w-full max-w-[1920px]">
+		
+		<Header />
+
+		<main
+			class="w-full p-0 grid
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
+			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
+			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
+			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
+		">
+
+		<SidebarLeft />
+		
+		<article class="box grow rounded-tl-none">
+		<slot />
+		</article>
+		
+		<SidebarRight />
+
+		</main>
+	
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</body>
+</html>
+
+
--- a/src/lib/Berechnungen/BedarfsausweisWohnen/BedarfsausweisWohnen_18599.ts
+++ b/src/lib/Berechnungen/BedarfsausweisWohnen/BedarfsausweisWohnen_18599.ts
@@ -0,0 +1,145 @@
+import { BedarfsausweisWohnenClient } from "#components/Ausweis/types";
+import { Enums } from "@ibcornelsen/database/client";
+import moment from "moment";
+
+export function energetischeNutzflaecheBedarfsausweisWohnen_18599(
+	ausweis: BedarfsausweisWohnenClient
+): number {
+	if (!ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten) {
+		return 0
+	}
+
+
+}
+
+export async function endEnergieBedarfBedarfsausweis_18599(
+	ausweis: BedarfsausweisWohnenClient
+) {
+	if (!ausweis.gebaeude_aufnahme_allgemein || !ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten) {
+		return null;
+	}
+
+	
+
+	
+	let endEnergieBedarfGesamt;
+	let primaerEnergieBedarfGesamt;
+	let co2EmissionenGesamt;
+
+		// Energieeffizienzklasse
+		let energieEffizienzKlasse = "";
+		if (endEnergieVerbrauchGesamt < 30) {
+			energieEffizienzKlasse = 'A+';
+		}else if (endEnergieVerbrauchGesamt < 50) {
+			energieEffizienzKlasse = 'A';
+		}else if (endEnergieVerbrauchGesamt < 75) {
+			energieEffizienzKlasse = 'B';
+		}else if (endEnergieVerbrauchGesamt < 100) {
+			energieEffizienzKlasse = 'C';
+		}else if (endEnergieVerbrauchGesamt < 130) {
+			energieEffizienzKlasse = 'D';
+		}else if (endEnergieVerbrauchGesamt < 160) {
+			energieEffizienzKlasse = 'E';
+		}else if (endEnergieVerbrauchGesamt < 200) {
+			energieEffizienzKlasse = 'F';
+		}else if (endEnergieVerbrauchGesamt < 250) {
+			energieEffizienzKlasse = 'G';
+		}else if (endEnergieVerbrauchGesamt >= 250) {
+			energieEffizienzKlasse = 'H';
+		}
+
+
+	return {
+		brennstoff_1: brennstoff_1,
+		brennstoff_2: brennstoff_2,
+		klimafaktoren: klimafaktoren,
+		kuehlungsZuschlag: Math.round(kuehlungsZuschlag),
+		durchschnittsKlimafaktor: Math.round(durchschnittsKlimafaktor),
+		ausweis: ausweis,
+
+		anteil_heizung_1: 1 - (ausweis.anteil_warmwasser_1 || 0) / 100,
+		anteil_heizung_2: 1 - (ausweis.anteil_warmwasser_2 || 0) / 100,
+
+		verbrauch_1_kwh: Math.round(
+			(ausweis.verbrauch_1 || 0) * brennstoff_1.umrechnungsfaktor
+		),
+		verbrauch_2_kwh: Math.round(
+			(ausweis.verbrauch_2 || 0) * brennstoff_1.umrechnungsfaktor
+		),
+		verbrauch_3_kwh: Math.round(
+			(ausweis.verbrauch_3 || 0) * brennstoff_1.umrechnungsfaktor
+		),
+		verbrauch_4_kwh: Math.round(
+			(ausweis.verbrauch_4 || 0) * brennstoff_2.umrechnungsfaktor
+		),
+		verbrauch_5_kwh: Math.round(
+			(ausweis.verbrauch_5 || 0) * brennstoff_2.umrechnungsfaktor
+		),
+		verbrauch_6_kwh: Math.round(
+			(ausweis.verbrauch_6 || 0) * brennstoff_2.umrechnungsfaktor
+		),
+
+		energetischeNutzflaeche: energetischeNutzflaeche,
+		leerstand: leerstand,
+		leerstandsZuschlagHeizung: Math.round(leerstandsZuschlagHeizung),
+		leerstandsZuschlagWarmwasser: Math.round(leerstandsZuschlagWarmwasser),
+		endEnergieVerbrauchLeerstandsZuschlag: Math.round(
+			endEnergieVerbrauchLeerstandsZuschlag
+		),
+		endEnergieVerbrauchKuehlungsZuschlag: Math.round(
+			endEnergieVerbrauchKuehlungsZuschlag
+		),
+		coeeffkg: co2EmissionenGesamt,
+		energieVerbrauchGesamt_1: Math.round(energieVerbrauchGesamt_1),
+		energieVerbrauchGesamt_2: Math.round(energieVerbrauchGesamt_2),
+		energieVerbrauchWarmwasser_1: Math.round(energieVerbrauchWarmwasser_1),
+		energieVerbrauchWarmwasser_2: Math.round(energieVerbrauchWarmwasser_2),
+		energieVerbrauchHeizung_1: energieVerbrauchHeizung_1,
+		energieVerbrauchHeizung_2: energieVerbrauchHeizung_2,
+		anteil_warmwasser_1: (ausweis.anteil_warmwasser_1 || 0) / 100,
+		anteil_warmwasser_2: (ausweis.anteil_warmwasser_2 || 0) / 100,
+
+		energieVerbrauchHeizungBereinigt_1: Math.round(
+			energieVerbrauchHeizungBereinigt_1
+		),
+		energieVerbrauchHeizungBereinigt_2: Math.round(
+			energieVerbrauchHeizungBereinigt_2
+		),
+		durchschnittsEnergieVerbrauchHeizungBereingt: Math.round(
+			durchschnittsEnergieVerbrauchHeizungBereingt
+		),
+		faktorDurchschnittsEnergieVerbrauchHeizungBereinigt: Math.round(
+			faktorDurchschnittsEnergieVerbrauchHeizungBereinigt
+		),
+
+		endEnergieVerbrauch_1: Math.round(endEnergieVerbrauch_1),
+		endEnergieVerbrauch_2: Math.round(endEnergieVerbrauch_2),
+
+		primaerEnergieVerbrauch_1: Math.round(primaerEnergieVerbrauch_1),
+		primaerEnergieVerbrauch_2: Math.round(primaerEnergieVerbrauch_2),
+
+		primaerEnergieVerbrauchLeerstandsZuschlag: Math.round(
+			primaerEnergieVerbrauchLeerstandsZuschlag
+		),
+		primaerEnergieVerbrauchKuehlungsZuschlag: Math.round(
+			primaerEnergieVerbrauchKuehlungsZuschlag
+		),
+
+		primaerfaktorww,
+		primaerfaktorww_1,
+
+		co2Emissionen_1: co2Emissionen_1,
+		co2Emissionen_2: co2Emissionen_2,
+
+		co2EmissionenLeerstandsZuschlag: co2EmissionenLeerstandsZuschlag,
+		co2EmissionenKuehlungsZuschlag: co2EmissionenKuehlungsZuschlag,
+
+		co2EmissionenGesamt: Math.round(co2EmissionenGesamt),
+
+		endEnergieVerbrauchGesamt: Math.round(endEnergieVerbrauchGesamt),
+		primaerEnergieVerbrauchGesamt: Math.round(
+			primaerEnergieVerbrauchGesamt
+		),
+		energieEffizienzKlasse
+	};
+}
--- a/src/lib/XML/getEmpfehlungen.ts
+++ b/src/lib/XML/getEmpfehlungen.ts
@@ -32,7 +32,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 		empfehlungen.push({
 			"title"       : "Erneuerung der Fenster",
 			"description" : "Alte und undichte Fenster mit Wärmeschutzfenstern auswechseln.",
-			"anlagenteil" : "Fenster"
+			"anlagenteil" : "Fenster",
+			"amortisationszeit" : "15 Jahre",
+			"kosten" : "3 €"
 		});
 	}

@@ -40,13 +42,17 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 		empfehlungen.push({
 			"title"       : "Zusätzliche Dämmung des Fußbodens des kalten Dachraumes",
 			"description" : "Beim Einbringen sollten mindestens 16cm Dämmstoff verarbeitet werden. Das Einsparpotenzial ist für jeden zusätzlichen cm Dämmung sehr hoch.",
-			"anlagenteil" : "Dach"
+			"anlagenteil" : "Dach",
+			"amortisationszeit" : "5 Jahre",
+			"kosten" : "1 €"
 		});
 	} else if (Dachgeschoss == Enums.Heizungsstatus.BEHEIZT && !Dachgeschoss_gedaemmt) {
 		empfehlungen.push({
 			"title"       : "Zusätzliche Dämmung des Daches bzw. Dachraumes",
 			"description" : "Beim Einbringen sollten mindestens 16cm Dämmstoff, wenn möglich, verarbeitet werden. Das Einsparpotenzial ist für jeden zusätzlichen cm Dämmung sehr hoch.",
-			"anlagenteil" : "Dach"
+			"anlagenteil" : "Dach",
+			"amortisationszeit" : "10 Jahre",
+			"kosten" : "2 €"
 		});
 	}

@@ -54,7 +60,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 		empfehlungen.push({
 			"title"       : "Außenwand zusätzl. dämmen (z.B. Wärmedämmverbundsystem, Einblasdämmung, Dämmputz)",
 			"description" : "Beim WDVS sollte man mit Dämmstärken ab 12cm planen. Bei zweischaligem Mauerwerk Luftschicht mit Einblasdämmung füllen. Bei historischen Fassaden kommt u.U. eine Innendämmung in Betracht",
-			"anlagenteil" : "Außenwand gg. Außenluft"
+			"anlagenteil" : "Außenwand gg. Außenluft",
+			"amortisationszeit" : "30 Jahre",
+			"kosten" : "6 €"
 		});
 	}

@@ -64,7 +72,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 		empfehlungen.push({
 			"title"       : "Anlagentechnik",
 			"description" : "Prüfen Sie, ob Sie bei einer Umrüstung auf einen regenerativen Anteil von 65% kommen. Bei energetisch sanierten Gebäuden z.B. Wärmepumpe. Bei unsanieten Gebäuden Fernwärmeanschluss.",
-			"anlagenteil" : "Wärmeerzeuger"
+			"anlagenteil" : "Wärmeerzeuger",
+			"amortisationszeit" : "10 Jahre",
+			"kosten" : "2 €"
 		});
 	}

@@ -72,13 +82,17 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 		empfehlungen.push({
 			"title"       : "Nachträgliche Dämmung der Kellerdecke",
 			"description" : "Je nach Deckenhöhe, den vorhandenen Raum voll ausnutzen. Das Einsparpotenzial für jeden zusätzlichen cm Dämmung sehr hoch.",
-			"anlagenteil" : "Kellerdecke"
+			"anlagenteil" : "Kellerdecke",
+			"amortisationszeit" : "5 Jahre",
+			"kosten" : "1 €"
 		});
 	} else if (!Kellerwand_gedaemmt && Keller == Enums.Heizungsstatus.BEHEIZT) {
 		empfehlungen.push({
 			"title"       : "Nachträgliche Dämmung der Kellerwände",
 			"description" : "Man sollte mit Dämmstärken ab 12cm planen. Das Einsparpotenzial für jeden zusätzlichen cm Dämmung sehr hoch.",
-			"anlagenteil" : "Außenwand gg. Erdreich"
+			"anlagenteil" : "Außenwand gg. Erdreich",
+			"amortisationszeit" : "30 Jahre",
+			"kosten" : "6 €"
 		});
 	}

@@ -87,19 +101,25 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 			empfehlungen.push({
 				"title"       : "Anlagentechnik",
 				"description" : "Heizungsrohre und Warmwasserrohre dämmen",
-				"anlagenteil" : "Wärmeverteilung / -abgabe"
+				"anlagenteil" : "Wärmeverteilung / -abgabe",
+				"amortisationszeit" : "5 Jahre",
+				"kosten" : "1 €"
 			});
 		} else if (Warmwasserrohre_gedaemmt && !Heizungsrohre_gedaemmt) {
 			empfehlungen.push({
 				"title"       : "Anlagentechnik",
 				"description" : "Heizungsrohre dämmen",
-				"anlagenteil" : "Wärmeverteilung / -abgabe"
+				"anlagenteil" : "Wärmeverteilung / -abgabe",
+				"amortisationszeit" : "5 Jahre",
+				"kosten" : "1 €"
 			});
 		} else if (!Warmwasserrohre_gedaemmt && Heizungsrohre_gedaemmt) {
 			empfehlungen.push({
 				"title"       : "Anlagentechnik",
 				"description" : "Warmwasserrohre dämmen",
-				"anlagenteil" : "Wärmeverteilung / -abgabe"
+				"anlagenteil" : "Wärmeverteilung / -abgabe",
+				"amortisationszeit" : "5 Jahre",
+				"kosten" : "1 €"
 			});
 		}
 	}
@@ -109,7 +129,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 		empfehlungen.push({
 			"title"       : "Wärmeerzeuger",
 			"description" : "Prüfen Sie den zusätzlichen Einbau einer Luft-Wasser-Wärmepumpe. Mit einem Pufferspeicher und einer 75°C-Vorlauftemperatur-Wärmepumpe kann ein relevanter Anteil der Wärmeerzeugung abgedeckt werden.",
-			"anlagenteil" : "Wärmeerzeuger"
+			"anlagenteil" : "Wärmeerzeuger",
+			"amortisationszeit" : "10 Jahre",
+			"kosten" : "2 €"
 		});
 	}

@@ -118,7 +140,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
 		empfehlungen.push({
 			"title"       : "Wärmeerzeuger",
 			"description" : "PV-Anlage auf das Dach (für Energieunterstützung)",
-			"anlagenteil" : "Wärmeerzeuger"
+			"anlagenteil" : "Wärmeerzeuger",
+			"amortisationszeit" : "10 Jahre",
+			"kosten" : "2 €"
 		});
 	}

--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -10,9 +10,9 @@ export const API_UID_COOKIE_NAME = "uid";
 export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
 	// per E-Mail , inkl.Beratung, offline
 	BedarfsausweisWohnen: [135, 145, 290],
-	VerbrauchsausweisWohnen: [45, 55, 180],
-	VerbrauchsausweisGewerbe: [85, 95, 360],
-	BedarfsausweisGewerbe: [300, 0, 0]
+	VerbrauchsausweisWohnen: [55, 75, 180],
+	VerbrauchsausweisGewerbe: [95, 115, 360],
+	BedarfsausweisGewerbe: [400, 0, 0]
 };

 export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> = {
--- a/src/lib/pdf/templates/GEG24_Wohngebaeude_ohne_pfeile.pdf
+++ b/src/lib/pdf/templates/GEG24_Wohngebaeude_ohne_pfeile.pdf
--- a/src/modules/Ausweise/ORG_VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/ORG_VerbrauchsausweisWohnenModule.svelte
@@ -0,0 +1,858 @@
+<script lang="ts">
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
+	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import Label from "#components/Label.svelte";
+	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
+	import moment from "moment";
+	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
+	import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
+	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
+	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
+	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
+	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
+	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
+	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
+	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
+	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
+	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
+	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
+	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
+	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
+	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
+	import { Enums } from "@ibcornelsen/database/client"
+	import Overlay from "#components/Overlay.svelte";
+	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
+	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
+	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
+		
+	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
+	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
+	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let user: BenutzerClient = {} as BenutzerClient;
+
+	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
+	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
+	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
+
+	async function spaeterWeitermachen() {
+		const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
+
+		if (result !== null) {
+			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+			// Sonst müsste er alles neu eingeben...
+			ausweis.uid = result.uid
+			gebaeude.uid = result.gebaeude_uid
+			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
+			window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
+			speichernOverlayHidden = false;
+		}
+	}
+
+	function automatischAusfüllen() {
+		gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
+		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
+		gebaeude_aufnahme_allgemein.saniert = true;
+		gebaeude_aufnahme_allgemein.einheiten = 1;
+		ausweis.ausstellgrund = "Vermietung";
+		ausweis.verbrauch_1 = 15000;
+		ausweis.verbrauch_2 = 14000;
+		ausweis.verbrauch_3 = 16000;
+		gebaeude_aufnahme_allgemein.flaeche = 152;
+		gebaeude_aufnahme_allgemein.nutzflaeche = 172;
+		ausweis.keller_beheizt = true;
+		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
+		ausweis.einheit_1 = "kWh";
+		ausweis.anteil_warmwasser_1 = 18;
+		ausweis.startdatum = moment("01.01.2019").toDate();
+		gebaeude_aufnahme_allgemein.plz = "21039";
+		gebaeude_aufnahme_allgemein.ort = "Hamburg";
+		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
+		gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";
+
+		gebaeude = gebaeude;
+		ausweis = ausweis;
+	}
+
+
+	async function ausweisAbschicken(e: SubmitEvent) {
+		if (e && e.preventDefault) e.preventDefault();
+		const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
+
+		if (result !== null) {
+			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+			// Sonst müsste er alles neu eingeben...
+			ausweis.uid = result.uid
+			gebaeude.uid = result.gebaeude_uid
+			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
+			window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
+			window.location.href = `/kundendaten?uid=${result.uid}`;
+		}
+	}
+
+	let waitOverlayHidden = true;
+	let speichernOverlayHidden = true;
+
+	$: {
+		if (gebaeude_aufnahme_allgemein.saniert 
+			&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt  === undefined
+			&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {
+
+			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
+			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
+		}
+	}
+</script>
+
+<Overlay bind:hidden={speichernOverlayHidden}>
+	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
+		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
+	</div>
+</Overlay>
+
+<Overlay bind:hidden={waitOverlayHidden}>
+	<p class="text-white font-semibold text-4xl">
+		Bitte warten sie, ihr Ausweis wird nun erstellt.
+	</p>
+</Overlay>
+
+<div class="flex flex-row gap-8 items-center mb-8">
+	<div class="flex flex-col w-full">
+		<h1>Verbrauchsausweis erstellen - 45€</h1>
+		<Progressbar progress={0} />
+	</div>
+
+	<PerformanceScore
+		bind:ausweis
+		bind:gebaeude_aufnahme_allgemein
+		bind:gebaeude
+	/>
+</div>
+
+<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+	<div class="yellow-box">
+		<div class="flex flex-row justify-between">
+			<button class="button" type="button" on:click={spaeterWeitermachen}
+				>Später Weitermachen</button
+			>
+			<div class="flex gap-4">
+				<Hilfe />
+				<button
+					on:click={automatischAusfüllen}
+					type="button"
+					class="button">Automatisch Ausfüllen</button
+				>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label>A - Prüfung der Ausweisart</Label>
+
+		<Ausweisart
+			bind:gebaeude
+			bind:gebaeude_aufnahme_allgemein
+			bind:ausweis
+		/>
+
+		<hr />
+
+		<Label
+			>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
+			Dachgeschoss</Label
+		>
+
+		<div class="GRB">
+			<!-- Strasse -->
+			<div class="form-group col-md-4">
+				<HelpLabel title="Straße, Hausnummer *">
+					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+					ein.
+				</HelpLabel>
+				<div>
+					<input
+						name="adresse"
+						data-test="adresse"
+						type="text"
+						autocomplete="off"
+						required
+						data-msg-minlength="min. 5 Zeichen"
+						data-msg-maxlength="max. 40 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.adresse}
+					/>
+				</div>
+			</div>
+
+			<!-- PLZ -->
+			<div class="form-group col-md-4 PLZ">
+				<ZipSearch
+					bind:zip={gebaeude_aufnahme_allgemein.plz}
+					bind:city={gebaeude_aufnahme_allgemein.ort}
+					name="plz"
+				/>
+			</div>
+
+			<div class="form-group col-md-4">
+				<HelpLabel title="Ort *">
+					Ort des Gebäudes wird automatisch ermittelt.
+				</HelpLabel>
+				<div>
+					<input
+						name="ort"
+						data-test="ort"
+						readonly={true}
+						bind:value={gebaeude_aufnahme_allgemein.ort}
+						type="text"
+					/>
+				</div>
+			</div>
+			<!-- Wohnfläche -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Wohnfläche m² *">
+					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
+					Dabei handelt es sich um die Wohnfläche abzüglich
+					vorhandener Flächen die sich außerhalb des Gebäudes
+					befinden. (Balkone, Terassen,etc.).
+				</HelpLabel>
+				<div>
+					<input
+						name="flaeche"
+						data-test="flaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.flaeche}
+					/>
+				</div>
+			</div>
+
+			<!-- Keller -->
+			<div class="form-group col-md-3">
+				<Label>Keller *</Label>
+				<div>
+					<select
+						name="keller"
+						data-test="keller"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.keller}
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
+							>nicht vorhanden</option
+						>
+						<option value={Enums.Heizungsstatus.UNBEHEIZT}
+							>unbeheizt</option
+						>
+						<option value={Enums.Heizungsstatus.BEHEIZT}
+							>beheizt</option
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Dachgeschoss -->
+			<div class="form-group col-md-3">
+				<Label>Dachgeschoss *</Label>
+				<div>
+					<select
+						name="dachgeschoss"
+						data-test="dachgeschoss"
+						bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
+						required
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
+							>nicht vorhanden</option
+						>
+						<option value={Enums.Heizungsstatus.UNBEHEIZT}
+							>unbeheizt</option
+						>
+						<option value={Enums.Heizungsstatus.BEHEIZT}
+							>beheizt</option
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Gesamtfläche -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gesamtfläche m²">
+					Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
+					(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
+					weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
+					beheizten Kellers). Diese Fläche wird dann im Energieausweis
+					als energetische Nutzfläche (An) ausgewiesen.
+				</HelpLabel>
+				<div>
+					<input
+						name="nutzflaeche"
+						data-test="nutzflaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
+
+		<div class="GRB">
+			<Verbrauch
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/>
+		</div>
+
+		<hr />
+
+		<Label
+			>D - Eingabe Warmwasseranteil und Verwendung von alternativen
+			Energieversorgungssystemen</Label
+		>
+
+		<div class="GRB">
+			<!-- Anteil WW enthalten -->
+			<div class="flex flex-col">
+				<div class="flex flex-row gap-4 items-center">
+					<input
+						type="checkbox"
+						class="checkbox"
+						name="warmwasser_enthalten"
+						data-test="warmwasser_enthalten"
+						bind:checked={ausweis.warmwasser_enthalten}
+					/>
+					<Label>Warmwasser im Verbrauch enthalten</Label>
+				</div>
+				<div class="flex flex-row gap-4 items-center">
+					<input
+						type="checkbox"
+						class="checkbox"
+						name="warmwasser_anteil_bekannt"
+						data-test="warmwasser_anteil_bekannt"
+						bind:checked={ausweis.warmwasser_anteil_bekannt}
+						disabled={!ausweis.warmwasser_enthalten}
+					/>
+					<Label>Anteil bekannt</Label>
+				</div>
+			</div>
+
+			<!-- Warmwasser Antel -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="% Anteil Warmwasser">
+					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
+				</HelpLabel>
+
+				<input
+					name="anteil_warmwasser_1"
+					data-test="anteil_warmwasser_1"
+					maxlength="2"
+					type="number"
+					bind:value={ausweis.anteil_warmwasser_1}
+					disabled={!ausweis.warmwasser_anteil_bekannt ||
+						!ausweis.warmwasser_enthalten}
+					autocomplete="off"
+				/>
+			</div>
+
+			<div class="form-group col-md-2">
+				<HelpLabel title="zusätzliche Heizquelle">
+					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+					von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
+					ein Anteil von 18% angenommen.
+				</HelpLabel>
+				<input
+					name="anteil_warmwasser_2"
+					data-test="anteil_warmwasser_2"
+					maxlength="3"
+					type="number"
+					autocomplete="off"
+					bind:value={ausweis.anteil_warmwasser_2}
+					disabled={!ausweis.zusaetzliche_heizquelle ||
+						!ausweis.warmwasser_anteil_bekannt ||
+						!ausweis.warmwasser_enthalten}
+				/>
+			</div>
+
+			<!-- Alternative Energieversorgungssyteme -->
+			<div class="form-group col-md-5">
+				<HelpLabel
+					title="Alternative Energieversorgungssysteme genutzt für "
+				>
+					Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
+					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
+					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
+				</HelpLabel>
+				<div class="flex flex-row gap-4">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_heizung"
+							data-test="alternative_heizung"
+							bind:checked={ausweis.alternative_heizung}
+							value="Heizung"
+						/>Heizung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_warmwasser"
+							data-test="alternative_warmwasser"
+							bind:checked={ausweis.alternative_warmwasser}
+							value="Warmwasser"
+						/>Warmwasser</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_lueftung"
+							data-test="alternative_lueftung"
+							bind:checked={ausweis.alternative_lueftung}
+							value="Lüftung"
+						/>Lüftung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_kuehlung"
+							data-test="alternative_kuehlung"
+							bind:checked={ausweis.alternative_kuehlung}
+							value="Kühlung"
+						/>Kühlung</label
+					>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label
+			>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
+			Leerstand</Label
+		>
+
+		<div class="GRB">
+			<!-- Gebäudetyp -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gebäudetyp *">
+					Bitte wählen Sie hier den Gebäudetyp aus.
+				</HelpLabel>
+				<div>
+					<select
+						name="gebaeudetyp"
+						data-test="gebaeudetyp"
+						bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
+						required
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="Einfamilienhaus">Einfamilienhaus</option>
+						<option value="Freistehendes Einfamilienhaus"
+							>Freistehendes Einfamilienhaus</option
+						>
+						<option value="Freistehendes Zweifamilienhaus"
+							>Freistehendes Zweifamilienhaus</option
+						>
+						<option value="Doppelhaushälfte"
+							>Doppelhaushälfte</option
+						>
+						<option value="Reihenendhaus">Reihenendhaus</option>
+						<option value="Reihenmittelhaus"
+							>Reihenmittelhaus</option
+						>
+						<option value="Mehrfamilienhaus"
+							>Mehrfamilienhaus</option
+						>
+						<option value="Wohn- und Geschäftshaus"
+							>Wohn- und Geschäftshaus</option
+						>
+						<option value="Atrium-Bungalow">Atrium-Bungalow</option>
+						<option value="Winkelbungalow">Winkelbungalow</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Gebäudeteil -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gebäudeteil *">
+					Bitte geben Sie hier den Gebäudeteil ein. In den meisten
+					Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
+					allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
+					handeln, so sollten 2 Ausweise erstellt werden. In diesem
+					Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
+					'Gewerbe'.
+				</HelpLabel>
+				<div>
+					<select
+						name="gebaeudeteil"
+						data-test="gebaeudeteil"
+						bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
+						required
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="Gesamtgebäude">Gesamtgebäude</option>
+						<option value="Wohnen">Wohnen</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Lüftung -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Lüftung durch *">
+					Bitte geben Sie hier ein ob über die Fenster natürlich
+					belüftet wird oder über eine Lüftungsanlage.
+				</HelpLabel>
+				<div>
+					<select
+						name="lueftung"
+						data-test="lueftung"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.lueftung}
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="Fensterlüftung">Fensterlüftung</option>
+						<option value="Schachtlüftung">Schachtlüftung</option>
+						<option value="Lüftungsanlage ohne Wärmerückgewinnung"
+							>Lüftungsanlage ohne Wärmerückgewinnung</option
+						>
+						<option value="Lüftungsanlage mit Wärmerückgewinnung"
+							>Lüftungsanlage mit Wärmerückgewinnung</option
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Lüftung -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Anlage Kühlung *">
+					Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
+					gekühlt wird.
+				</HelpLabel>
+				<div>
+					<select
+						name="kuehlung"
+						data-test="kuehlung"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.kuehlung}
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="1">vorhanden</option>
+						<option value="0">nicht vorhanden</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Leerstand -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Leerstand in %">
+					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
+					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
+					wären dann ca. 11%.
+				</HelpLabel>
+				<div>
+					<input
+						name="leerstand"
+						data-test="leerstand"
+						maxlength="2"
+						type="number"
+						bind:value={gebaeude_aufnahme_allgemein.leerstand}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label
+			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
+			Gebäudes</Label
+		>
+		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
+		<hr />
+		<div class="flex flex-row justify-between">
+			<Hilfe />
+			<button type="submit" class="button">Weiter</button>
+		</div>
+	</div>
+</form>
+
+<RawNotificationWrapper>
+	{#each Object.entries($notifications) as [uid, notification] (uid)}
+		<RawNotification notification={{ ...notification, uid }}>
+			{@html notification.subtext}
+		</RawNotification>
+	{/each}
+
+	{#if auditBedarfsausweisBenoetigt(ausweis, gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Bedarfsausweis benötigt!",
+				timeout: 0,
+				uid: "BEDARFSAUSWEIS",
+				dismissable: false,
+				type: "info",
+			}}
+		>
+			Sie benötigen einen Bedarfsausweis. <a href="/bedarfsausweis"
+				>Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort</a
+			>.
+		</RawNotification>
+	{/if}
+
+	{#await auditPlzNichtErkannt(gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "PLZ_NICHT_ERKANNT",
+					dismissable: false,
+					type: "warning",
+				}}
+			>
+				Die Postleitzahl konnte nicht zugeordnet werden. Bitte prüfen
+				Sie die Eingabe. Sollte die Postleitzahl korrekt eingegeben
+				sein, werden wir den Ort händisch zuordnen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
+					gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
+				},
+				type: "warning",
+			}}
+		>
+			Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
+			wurde. Sind sie sich sicher, dass das stimmt?
+		</RawNotification>
+	{/if}
+
+	{#if auditHeizungJuengerDreiJahre(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_JUENGER_DREI_JAHRE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Ihre Heizungsanlage ist jünger als 3 Jahre. Für den
+			Verbrauchsausweis müssen Sie mindestens 3 Verbrauchsjahre eingeben
+			die den aktuellen Stand des Gebäudes abbilden. Ein Verbrauchsausweis
+			ist daher nicht möglich. Bitte klicken Sie
+			<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den Bedarfsausweis
+			zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#if auditZeitraumAktuell(ausweis, gebaeude)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "ZEITRAUM_AKTUELL",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.ZEITRAUM_AKTUELL);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Verbrauchszeiträume sind nicht aktuell genug. Das Ende des
+			letzten Verbrauchszeitraumes darf nicht mehr als 18 Monate
+			zurückliegen. Ein Verbrauchsausweis ist mit diesen Zeiträumen daher
+			nicht möglich. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um
+			zum Eingabeformular für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#await auditKlimaFaktoren(ausweis, gebaeude) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "KLIMA_FAKTOREN",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.KLIMA_FAKTOREN);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Verbrauchszeiträume sind zu aktuell und es liegen noch keine
+				Klimafaktoren dazu vor. Bitte verschieben Sie die
+				Verbrauchszeiträume 1 Jahr nach hinten. Wenn das nicht möglich
+				ist, klicken Sie
+				<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den
+				Bedarfsausweis zu gelangen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnFlaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHN_FLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHN_FLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche ist viel zu klein. Bitte überprüfen Sie Ihre Eingabe
+			nochmal und stellen sicher, daß sich Ihre Angaben auf das gesamte
+			Gebäude beziehen.
+		</RawNotification>
+	{/if}
+
+	{#if auditWarmWasser(ausweis)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WARM_WASSER",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WARM_WASSER);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
+			scheint nicht ganz im Rahmen zu liegen.
+		</RawNotification>
+	{/if}
+
+	{#if auditLeerStand(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "LEER_STAND",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.LEER_STAND);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bei Leerstand größer als 30% darf kein Verbrauchsausweis ausgestellt
+			werden. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um zum Eingabeformular
+			für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+	
+	{#if auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein).length > 0}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "VERBRAUCH_ABWEICHUNG",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(
+				ausweis,
+				gebaeude_aufnahme_allgemein,
+			)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein)[1]} beträgt mehr
+			als 30% und sie haben keinen Leerstand angegeben. Sind sie sich sicher,
+			dass das stimmt?
+		</RawNotification>
+	{/if}
+
+	{#await auditEndEnergie(ausweis, gebaeude, gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "END_ENERGIE",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.END_ENERGIE);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Endenergie liegt außerhalb des normalen Rahmens. Bitte
+				nochmal überprüfen. Bei Passivhäusern oder ganz alten
+				unsanierten Gebäuden ist so eine Abweichung durchaus möglich.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnflaecheGroesserGesamtflaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche darf nicht größer als die Nutzfläche sein.
+		</RawNotification>
+	{/if}
+</RawNotificationWrapper>
+
+<style>
+	:global(input[type="number"]),
+	:global(input[type="text"]) {
+		@apply input input-bordered py-1.5 px-2 h-auto;
+	}
+
+	:global(input[type="number"]:disabled) {
+		@apply bg-gray-200 border border-gray-300;
+	}
+
+	:global(.linked) {
+		@apply border-2 border-red-400;
+	}
+</style>
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -119,7 +119,7 @@
 	</p>
 </Overlay>

-<div class="flex flex-row gap-8 items-center mb-8">
+<!-- <div class="flex flex-row gap-8 items-center mb-8">
 	<div class="flex flex-col w-full">
 		<h1>Verbrauchsausweis erstellen - 45€</h1>
 		<Progressbar progress={0} />
@@ -130,10 +130,12 @@
 		bind:gebaeude_aufnahme_allgemein
 		bind:gebaeude
 	/>
-</div>
+</div>-->

 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
-	<div class="yellow-box">
+
+	<div id="formular-box">
+		
 		<div class="flex flex-row justify-between">
 			<button class="button" type="button" on:click={spaeterWeitermachen}
 				>Später Weitermachen</button
@@ -307,285 +309,6 @@

 		<hr />

-		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
-
-		<div class="GRB">
-			<Verbrauch
-				bind:gebaeude
-				bind:gebaeude_aufnahme_allgemein
-				bind:ausweis
-			/>
-		</div>
-
-		<hr />
-
-		<Label
-			>D - Eingabe Warmwasseranteil und Verwendung von alternativen
-			Energieversorgungssystemen</Label
-		>
-
-		<div class="GRB">
-			<!-- Anteil WW enthalten -->
-			<div class="flex flex-col">
-				<div class="flex flex-row gap-4 items-center">
-					<input
-						type="checkbox"
-						class="checkbox"
-						name="warmwasser_enthalten"
-						data-test="warmwasser_enthalten"
-						bind:checked={ausweis.warmwasser_enthalten}
-					/>
-					<Label>Warmwasser im Verbrauch enthalten</Label>
-				</div>
-				<div class="flex flex-row gap-4 items-center">
-					<input
-						type="checkbox"
-						class="checkbox"
-						name="warmwasser_anteil_bekannt"
-						data-test="warmwasser_anteil_bekannt"
-						bind:checked={ausweis.warmwasser_anteil_bekannt}
-						disabled={!ausweis.warmwasser_enthalten}
-					/>
-					<Label>Anteil bekannt</Label>
-				</div>
-			</div>
-
-			<!-- Warmwasser Antel -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="% Anteil Warmwasser">
-					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
-					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
-				</HelpLabel>
-
-				<input
-					name="anteil_warmwasser_1"
-					data-test="anteil_warmwasser_1"
-					maxlength="2"
-					type="number"
-					bind:value={ausweis.anteil_warmwasser_1}
-					disabled={!ausweis.warmwasser_anteil_bekannt ||
-						!ausweis.warmwasser_enthalten}
-					autocomplete="off"
-				/>
-			</div>
-
-			<div class="form-group col-md-2">
-				<HelpLabel title="zusätzliche Heizquelle">
-					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
-					von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
-					ein Anteil von 18% angenommen.
-				</HelpLabel>
-				<input
-					name="anteil_warmwasser_2"
-					data-test="anteil_warmwasser_2"
-					maxlength="3"
-					type="number"
-					autocomplete="off"
-					bind:value={ausweis.anteil_warmwasser_2}
-					disabled={!ausweis.zusaetzliche_heizquelle ||
-						!ausweis.warmwasser_anteil_bekannt ||
-						!ausweis.warmwasser_enthalten}
-				/>
-			</div>
-
-			<!-- Alternative Energieversorgungssyteme -->
-			<div class="form-group col-md-5">
-				<HelpLabel
-					title="Alternative Energieversorgungssysteme genutzt für "
-				>
-					Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
-					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
-					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
-				</HelpLabel>
-				<div class="flex flex-row gap-4">
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_heizung"
-							data-test="alternative_heizung"
-							bind:checked={ausweis.alternative_heizung}
-							value="Heizung"
-						/>Heizung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_warmwasser"
-							data-test="alternative_warmwasser"
-							bind:checked={ausweis.alternative_warmwasser}
-							value="Warmwasser"
-						/>Warmwasser</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_lueftung"
-							data-test="alternative_lueftung"
-							bind:checked={ausweis.alternative_lueftung}
-							value="Lüftung"
-						/>Lüftung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_kuehlung"
-							data-test="alternative_kuehlung"
-							bind:checked={ausweis.alternative_kuehlung}
-							value="Kühlung"
-						/>Kühlung</label
-					>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-
-		<Label
-			>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
-			Leerstand</Label
-		>
-
-		<div class="GRB">
-			<!-- Gebäudetyp -->
-			<div class="form-group col-md-3">
-				<HelpLabel title="Gebäudetyp *">
-					Bitte wählen Sie hier den Gebäudetyp aus.
-				</HelpLabel>
-				<div>
-					<select
-						name="gebaeudetyp"
-						data-test="gebaeudetyp"
-						bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
-						required
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="Einfamilienhaus">Einfamilienhaus</option>
-						<option value="Freistehendes Einfamilienhaus"
-							>Freistehendes Einfamilienhaus</option
-						>
-						<option value="Freistehendes Zweifamilienhaus"
-							>Freistehendes Zweifamilienhaus</option
-						>
-						<option value="Doppelhaushälfte"
-							>Doppelhaushälfte</option
-						>
-						<option value="Reihenendhaus">Reihenendhaus</option>
-						<option value="Reihenmittelhaus"
-							>Reihenmittelhaus</option
-						>
-						<option value="Mehrfamilienhaus"
-							>Mehrfamilienhaus</option
-						>
-						<option value="Wohn- und Geschäftshaus"
-							>Wohn- und Geschäftshaus</option
-						>
-						<option value="Atrium-Bungalow">Atrium-Bungalow</option>
-						<option value="Winkelbungalow">Winkelbungalow</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Gebäudeteil -->
-			<div class="form-group col-md-3">
-				<HelpLabel title="Gebäudeteil *">
-					Bitte geben Sie hier den Gebäudeteil ein. In den meisten
-					Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
-					allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
-					handeln, so sollten 2 Ausweise erstellt werden. In diesem
-					Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
-					'Gewerbe'.
-				</HelpLabel>
-				<div>
-					<select
-						name="gebaeudeteil"
-						data-test="gebaeudeteil"
-						bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
-						required
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="Gesamtgebäude">Gesamtgebäude</option>
-						<option value="Wohnen">Wohnen</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Lüftung -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Lüftung durch *">
-					Bitte geben Sie hier ein ob über die Fenster natürlich
-					belüftet wird oder über eine Lüftungsanlage.
-				</HelpLabel>
-				<div>
-					<select
-						name="lueftung"
-						data-test="lueftung"
-						required
-						bind:value={gebaeude_aufnahme_allgemein.lueftung}
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="Fensterlüftung">Fensterlüftung</option>
-						<option value="Schachtlüftung">Schachtlüftung</option>
-						<option value="Lüftungsanlage ohne Wärmerückgewinnung"
-							>Lüftungsanlage ohne Wärmerückgewinnung</option
-						>
-						<option value="Lüftungsanlage mit Wärmerückgewinnung"
-							>Lüftungsanlage mit Wärmerückgewinnung</option
-						>
-					</select>
-				</div>
-			</div>
-
-			<!-- Lüftung -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Anlage Kühlung *">
-					Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
-					gekühlt wird.
-				</HelpLabel>
-				<div>
-					<select
-						name="kuehlung"
-						data-test="kuehlung"
-						required
-						bind:value={gebaeude_aufnahme_allgemein.kuehlung}
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="1">vorhanden</option>
-						<option value="0">nicht vorhanden</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Leerstand -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Leerstand in %">
-					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
-					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
-					wären dann ca. 11%.
-				</HelpLabel>
-				<div>
-					<input
-						name="leerstand"
-						data-test="leerstand"
-						maxlength="2"
-						type="number"
-						bind:value={gebaeude_aufnahme_allgemein.leerstand}
-					/>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-
-		<Label
-			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
-			Gebäudes</Label
-		>
-		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
-		<hr />
-		<div class="flex flex-row justify-between">
-			<Hilfe />
-			<button type="submit" class="button">Weiter</button>
-		</div>
 	</div>
 </form>

--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,8 +5,10 @@ import BannerPrice from "#content/banner-saeule.svelte";
 ---

 <Layout title="Energieausweis online erstellen - Online Energieausweis">
-	<h1>Energieausweis online erstellen</h1>
-	<BannerPrice client:load />
+
+	<h1>Unsere Ausweise im Detail:</h1>
+
+	<!-- <BannerPrice client:load /> -->
 </Layout>


--- a/src/pages/index_1.astro
+++ b/src/pages/index_1.astro
@@ -0,0 +1,14 @@
+---
+import Layout from "#layouts/Layout_1.astro";
+import BannerPrice from "#content/banner-saeule.svelte";
+
+---
+
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
+	<h1>Energieausweis online erstellen</h1>
+	<!-- <BannerPrice client:load /> -->
+</Layout>
+
+
+
+
--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -0,0 +1,26 @@
+
+
+.Phase_und_Skala{grid-area:phase_und_skala;}
+.Bereich_A{grid-area:a}
+.Bereich_B{grid-area:b}
+
+#formular-box{
+    @apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box;
+    /* background: linear-gradient(
+        135deg,
+        rgba(252, 234, 187, 1) 0%,
+        rgba(253, 235, 189, 1) 52%,
+        rgba(251, 223, 147, 1) 100%
+    ); */
+}
+
+
+.GRB {
+    @apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
+    /* background: linear-gradient(
+        135deg,
+        rgba(252, 234, 187, 1) 0%,
+        rgba(253, 235, 189, 1) 52%,
+        rgba(251, 223, 147, 1) 100%
+    ); */
+}
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -48,7 +48,7 @@


 body{
-	@apply /*bg-[url('/images/pattern.png')] bg-repeat bg-fixed */ max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
+	@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed  max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
 }


@@ -96,7 +96,7 @@ article {
 .no-dropdown, .no-dropdown:hover{@apply text-black no-underline}

 .nav-element:hover > .nav-element-child{ 
-    	@apply 		!bg-primary !text-white cursor-pointer 
+    	@apply 		!bg-primary !text-white cursor-pointer
 }

 .nav-element:hover > .nav-element-child .no-dropdown{ 
@@ -104,12 +104,12 @@ article {
 }

 .nav-element:hover > .dropdown-content{ 
-	@apply 			lg:visible lg:opacity-100 lg:block
+	@apply 			lg:visible lg:opacity-100 lg:block lg:ml-[2px]
 }

 .nav-element:hover:first-child > .nav-element-child{
    	@apply 		!rounded-none
-					xl:!rounded-tl-xl xl:!rounded-tr-none
+					lg:!rounded-tl-xl lg:!rounded-tr-none
 }

 .nav-element:hover:last-child > .nav-element-child{
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,6 +1,5 @@
 import { vitePreprocess } from "@astrojs/svelte";
 import preprocess from "svelte-preprocess";
-
 export default {
 	preprocess: [vitePreprocess(), preprocess()],
 };
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -13,12 +13,14 @@ module.exports = {
 			},

 			colors: {
+				"formular-box": "rgba(252,234,187,0.2)",
 				"pdf-yellow-bright": "#f3cb00",
 				"pdf-yellow-light": "#fff6ca",
 				"box-heading": 'var(--box-heading)'
 			},
 			boxShadow: {
-				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
+				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
+				'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
 			  },
 			
 			gridTemplateColumns: {