Merge remote-tracking branch 'origin/UMBE' into UMBE

2024-12-14 06:36:41 +07:00
parent 7f429b2e60 315f646d0e
commit 283439d620
48 changed files with 3174 additions and 2937 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,7 @@ bun.lockb

 # macOS-specific files
 .DS_Store
+
+public/fonts/
+
+*.Identifier
--- a/public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier
+++ b/public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\antique-olive-std.zip
--- a/public/fonts/HeronSans-Light.woff2Zone.Identifier
+++ b/public/fonts/HeronSans-Light.woff2Zone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.eotZone.Identifier
+++ b/public/fonts/HeronSans-Regular.eotZone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.ttfZone.Identifier
+++ b/public/fonts/HeronSans-Regular.ttfZone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.woff2Zone.Identifier
+++ b/public/fonts/HeronSans-Regular.woff2Zone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.woffZone.Identifier
+++ b/public/fonts/HeronSans-Regular.woffZone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier
+++ b/public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	console.log("Hallo Welt");
+

 	import HelpLabel from "#labels/HelpLabel.svelte";
 	import Inputlabel from "#labels/InputLabel.svelte";
--- a/src/components/Ausweis/GebaeudeDaten.svelte
+++ b/src/components/Ausweis/GebaeudeDaten.svelte
@@ -10,7 +10,7 @@

 </script>

-<div class="bereich-box grid 
+<div id="B" class="bereich-box grid 
 grid-cols-1 gap-x-4 gap-y-8
 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
--- a/src/components/design/content/cardBAGwidget.svelte
+++ b/src/components/design/content/cardBAGwidget.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-BAG-promo" class="box card"> 
+	<div class="">
+
+	<h2>Bedarfsausweis Gewerbe</h2>
+	<hr class="mb-2">
+
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
+        <div>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
+        </div>
+    </div>
+
+    <div class="white">
+        <div class="variante">fundiert (empfohlen)</div>
+        <div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
+        <div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>
+        <div class="services"><div>Objektiveres, besser vergleichbares Ergebnis.</div><div class="check-no">✔</div></div>
+    </div>
+            <a href="./energieausweis-erstellen/bedarfsausweis-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 online erstellen</a>
+
+            <a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>
+
+	</div>
+</div>
+
+
+<style lang="scss">
+    #card-BAG-promo{
+    
+    
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+    
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
+    
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
+    .check-no{@apply justify-self-end font-bold text-red-700}
+    
+    }
+    </style>
--- a/src/components/design/content/cardBAwidget.svelte
+++ b/src/components/design/content/cardBAwidget.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-BA-promo" class="box card"> 
+    <div class="">
+
+    <h2>Bedarfssausweis Wohngebäude</h2>
+    <hr class="mb-2">
+    
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
+        <div>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Bedarfsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
+        </div>
+    </div>
+
+    <div class="white">
+        <div class="variante">fundiert (empfohlen)</div>
+        <div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
+        <div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
+        <div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
+        <div class="services"><div>Objektivere Berechnungsmethode nach DIN 18599.</div><div class="check">✔</div></div>
+    </div>
+            <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 online erstellen</a>
+
+            <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>       
+
+    </div>
+</div>
+
+
+<style lang="scss">
+    #card-BA-promo{
+
+
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
+
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
+
+    }
+    </style>
--- a/src/components/design/content/cardVAGwidget.svelte
+++ b/src/components/design/content/cardVAGwidget.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-VAG-promo" class="box card "> 
+	<div class="">
+
+	<h2>Verbrauchsausweis Gewerbe</h2>
+	<hr class="mb-2">
+
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
+        <div>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
+        </div>
+    </div>
+
+    <div class="white">
+        <div class="variante">einfach</div>
+        <div class="services"><div>3 Jahresverbräuche von Heizung Gebäudestrom nötig.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
+        <div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
+        <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
+    </div>
+            <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 online erstellen</a>
+
+            <a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>
+
+	</div>
+</div>
+
+
+<style lang="scss">
+    #card-VAG-promo{
+    
+    
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+    
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
+    
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
+    .check-no{@apply justify-self-end font-bold text-red-700}
+    
+    }
+    </style>
--- a/src/components/design/content/cardVAwidget.svelte
+++ b/src/components/design/content/cardVAwidget.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-VA-promo" class="box card"> 
+	<div class="">
+
+	<h2>Verbrauchsausweis Wohngebäude</h2>
+	<hr class="mb-2">
+
+    <div class="flex flex-row mb-2 mt-2 w-full items-end">
+        <div>
+            <img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+        </div>
+        <div>
+        <p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
+        </div>
+    </div>
+
+    <div class="white">
+        <div class="variante">einfach</div>
+        <div class="services"><div>3 Jahresverbräuche der Heizung benötigt.</div><div class="check">✔</div></div>
+        <div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
+        <div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978.</div><div class="check-no">✘</div></div>
+        <div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
+        <div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
+    </div>
+            <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 online erstellen</a>
+
+            <a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
+            class="	w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                    hover:bg-primary
+            " >zur Produktübersicht</a>
+
+	</div>
+</div>
+
+
+<style lang="scss">
+    #card-VA-promo{
+    
+    
+    .white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
+    
+    .variante{@apply w-fit text-black justify-self-end mr-3}
+    .variante{@apply text-2xl}
+    
+    .services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
+    .services:not(:last-child){@apply border-b-[1px] border-gray-200}
+    .check{@apply justify-self-end font-bold text-green-700}
+    .check-no{@apply justify-self-end font-bold text-red-700}
+    
+    }
+    </style>
--- a/src/components/design/content/produktVergleich.svelte
+++ b/src/components/design/content/produktVergleich.svelte
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -1,5 +1,5 @@
 ---
-import Login from "#sidebarCards/card-login.svelte";
+import HeaderLogin from "#header/headerLogin.svelte";
 ---

 <header>
@@ -56,7 +56,7 @@ lg:px-0 lg:gap-x-4">
 </div>

 <div class="w-full justify-self-center">
-	<Login client:load />
+	<HeaderLogin  />
 </div>

 </div>
--- a/src/components/design/sidebars/cards/card-login.svelte
+++ b/src/components/design/sidebars/cards/card-login.svelte
--- a/src/components/design/sidebars/cards/card-review.svelte
+++ b/src/components/design/sidebars/cards/card-review.svelte
--- a/src/components/design/sidebars/cards/card-BA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/card-BA-G-promo.svelte
@@ -2,9 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-G-promo" 
-class="	box card hidden bg-white px-6 py-4 mb-5
-        lg:block">
+<div id ="cardBAGpromo" 
+class="	box card">

 <div class="grid">

--- a/src/components/design/sidebars/cards/card-BA-promo.svelte
+++ b/src/components/design/sidebars/cards/card-BA-promo.svelte
@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-promo" 
-class="	box card bg-white px-6 py-4 mb-5">
+<div id ="cardBApromo" 
+class="	box card">

 <div class="grid">

--- a/src/components/design/sidebars/cards/card-contact.svelte
+++ b/src/components/design/sidebars/cards/card-contact.svelte
@@ -1,4 +1,4 @@
-<div id ="card-contact" class="box card bg-white px-6 py-4 mb-5">
+<div id ="cardContact" class="box card">
 	
 	<div class="grid grid-cols-[max-content,1fr]">
 		<div class="">
--- a/src/components/design/sidebars/cards/card-login_1.svelte
+++ b/src/components/design/sidebars/cards/card-login_1.svelte
@@ -23,9 +23,8 @@
 </script>

 <div
-	id="card-login"
-	class="box card hidden bg-white px-6 py-4 mb-5
-			lg:block lg:ring-2 lg:ring-secondary/50"
+	id="cardLogin"
+	class="box card"
 >
 	<div class="grid">
 		<div class="grid grid-cols-[2rem,1fr,1fr]">
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -91,14 +91,14 @@ if(innerWidth>1024){



-<nav id="card-navigation" class="card-navigation hidden box ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block"> 
+<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"> 

  <!-- 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 lg:rounded-t-lg xl:rounded-t-xl" >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    {:else}
-    <a href={undefined} class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <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>
    {/if}
    
    <ul class="dropdown-content energieasusweis-erstellen">
@@ -201,8 +201,6 @@ if(innerWidth>1024){

 <style lang="scss">

-
-
 .dd-symbol::before{
  content:'❯';
  font-size:0.95rem;
--- a/src/components/design/sidebars/cards/card-price-info.svelte
+++ b/src/components/design/sidebars/cards/card-price-info.svelte
@@ -2,11 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>

-<div 	id ="card-price-info" 
-		class="	box card hidden bg-white px-4 py-2 mt-5
-				lg:block">
-	
-<div class="">
+<div 	id ="cardPreisinfo" class="box card hidden lg:block">
 			
 <h2>Was wird der Energieausweis kosten?</h2>
 <hr class="mb-4 bg-primary h-[2px]">
@@ -29,13 +25,8 @@
 <p>ab&nbsp;450€ inkl.&nbsp;MwSt.</p>
 <hr class="mt-2">

-
-
-</div>
 </div>


 <style lang="scss">
-
-
 </style>
--- a/src/components/design/sidebars/cards/cardReview.svelte
+++ b/src/components/design/sidebars/cards/cardReview.svelte
--- a/src/components/design/sidebars/cards/card-VA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/card-VA-G-promo.svelte
@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-G-promo" 
-	class="	box card bg-white px-6 py-4 mb-5">
+<div id ="cardVAGpromo" 
+	class="	box card">

 	<div class="grid">

--- a/src/components/design/sidebars/cards/card-VA-promo.svelte
+++ b/src/components/design/sidebars/cards/card-VA-promo.svelte
@@ -2,6 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
+<div id ="cardVApromo" class="	box card">
+
 <div id="card-VA-promo" class="	box card bg-white px-6 py-4 mb-5">
 	<div class="grid">
 		<h2>Verbrauchsausweis Wohngebäude</h2>
@@ -25,5 +27,7 @@
 	</div>
 </div>

+</div>
+
 <style lang="scss">
 </style>
--- a/src/components/design/sidebars/cards/navcard.astro
+++ b/src/components/design/sidebars/cards/navcard.astro
@@ -1,96 +0,0 @@
-
-<script>
-
-
-</script>
-
-
-<div class="">
-
-<details  class="dropdown block xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Energieausweis erstellen<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Verbrauchsausweis erstellen</a></li>
-      <li class=""><a>Bedarfsausweis erstellen</a></li>
-      <li class=""><a>Verbrauchsausweis Gewerbe erstellen</a></li>
-      <li class=""><a>Bedarfsausweis Gewerbe erstellen</a></li>
-    </ul>
-</details>
-
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">Welcher Energieausweis?</summary>
-</details>
-
-<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Verbrauchsausweis<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Verbrauchsausweis Wohngebäude</a></li>
-      <li class=""><a>Verbrauchsausweis online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Verbrauchsausweis</a></li>
-      <li class=""><a>Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
-      <li class=""><a>Verbrauchsausweis Gewerbe</a></li>
-      <li class=""><a>Verbrauchsausweis Gewerbe online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
-      <li class=""><a>Statistiken zum Verbrauchsausweis Gewerbe</a></li>
-    </ul>
-</details>
-<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Bedarfsausweis<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Bedarfsausweis Wohngebäude</a></li>
-      <li class=""><a>Bedarfsausweis online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Bedarfsausweis</a></li>
-      <li class=""><a>Statistiken zum Bedarfsausweis Wohngebäude</a></li>
-      <li class=""><a>Bedarfsausweis Gewerbe</a></li>
-      <li class=""><a>Bedarfsausweis Gewerbe online erstellen</a></li>
-      <li class=""><a>Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
-      <li class=""><a>Statistiken zum Bedarfsausweis Gewerbe</a></li>
-    </ul>
-</details>
-<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
-    <summary  class="btn rounded-none w-full justify-start">Energieausweis<span class="absolute right-[20px]">❯</span></summary>
-    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
-      <li class=""><a>Energieausweis Pflicht</a></li>
-      <li class=""><a>Energieausweis Kosten</a></li>
-      <li class=""><a>Energieausweis Haus</a></li>
-    </ul>
-</details>
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">EnEV Zusammenfassung - Archiv</summary>
-</details>
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">Energieausweis Aussteller</summary>
-</details>
-<details  class="dropdown block">
-    <summary  class="btn rounded-none w-full justify-start">Kundenbewertungen</summary>
-</details>
-
-
-</div>
-
-<style>
-
-.dd-cont{
-    @apply !relative lg:!absolute;
-    li{
-    @apply w-max  
-    }
-}
-
-summary{
-    @apply text-black !text-[1.1rem] !font-normal
-    
-}
-details:hover > summary { 
-    @apply !bg-primary !text-white
-}
-details:hover > details.dd-cont { 
-    @apply !visible
-}
-
-
-
-
-
-
-</style>
--- a/src/components/design/sidebars/left/SidebarLeft.astro
+++ b/src/components/design/sidebars/left/SidebarLeft.astro
@@ -1,12 +1,12 @@
 ---
-import Navigation from "#sidebarCards/card-navigation.svelte";
-import Preistabelle from "#sidebarCards/card-price-info.svelte";
+import CardNavigation from "#sidebarCards/cardNavigation.svelte";
+import CardPriceiInfo from "#sidebarCards/cardPriceiInfo.svelte";
+---

---

 <div class="">

+<CardNavigation client:load/>
+<CardPriceiInfo />

-<Navigation client:load />
-<Preistabelle client:load />
 </div>
--- a/src/components/design/sidebars/right/SidebarRight.astro
+++ b/src/components/design/sidebars/right/SidebarRight.astro
@@ -1,22 +1,20 @@
 ---
-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";
+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";
 ---

-<div class="hidden
-            xl:flex xl:flex-col xl:grow
-            ">
+<div class="hidden 2xl:block">

-    <Contact client:load />
-    <Review client:load />
-    <VAGpromo client:load />
-    <BAGpromo client:load />
-    <VApromo client:load />
-    <BApromo client:load />  
+    <CardContact />
+    <CardReview />
+    <CardVAGpromo />
+    <CardBAGpromo />
+    <CardVApromo />
+    <CardBApromo />  
 </div>


--- a/src/components/design/sidebars/right/SidebarRight_1.astro
+++ b/src/components/design/sidebars/right/SidebarRight_1.astro
@@ -1,11 +1,11 @@
 ---
-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";
+import Login from "#sidebarCards/cardlogin_1.svelte";
+import Contact from "#sidebarCards/cardcontact.svelte";
+import Review from "#sidebarCards/cardreview.svelte";
+import VApromo from "#sidebarCards/cardVApromo.svelte";
+import VAGpromo from "#sidebarCards/cardVAGpromo.svelte";
+import BApromo from "#sidebarCards/cardBApromo.svelte";
+import BAGpromo from "#sidebarCards/cardBAGpromo.svelte";
 ---

 <div class="hidden
--- a/src/components/labels/BereichLabel.svelte
+++ b/src/components/labels/BereichLabel.svelte
@@ -1,5 +1,30 @@
 <script lang="ts">
 	export let bereich: string;
+
+	
+function toggleBereich(event){
+
+
+
+	var x = event.target.parentNode.parentNode.parentNode;
+	var y = x.nextElementSibling;
+	var z = event.target.innerHTML;
+
+console.log(y);
+
+if(z=='-'){
+	//y.classList.remove('hidden');
+	y.style.maxHeight = '0px';
+	event.target.innerHTML = "+";
+
+}else{
+	//y.classList.add('hidden');
+	y.style.maxHeight = '500px';
+	event.target.innerHTML = "-";
+}
+
+}
+
 </script>


@@ -7,10 +32,10 @@
 <div class="bereichs-label">

 <div>
-	<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2">
+	<div class="grid grid-cols-[max-content_1fr_40px] items-center justify-items-start gap-2">
 	<div class="formular-abschnitt1">{bereich}</div>
 	<div class="formular-abschnitt2"><slot></slot></div>
-	<!--<div class="justify-self-end"><img src="/images/icons/toggle-icon.svg" alt="toggle-icon" class="w-[25px] rotate-[90deg]"/></div>-->
+	<div id="BereichToggle" class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm" on:click={() => toggleBereich(event)}>-</div>
 	</div>
 </div>

--- a/src/components/widgets/welcherAusweisWidget.svelte
+++ b/src/components/widgets/welcherAusweisWidget.svelte
@@ -3,11 +3,19 @@
 	import WidgetCardTemplate from "./design/content/WidgetCardTemplate.svelte";
 	import { PRICES } from "#lib/constants.js";

+<<<<<<< HEAD:src/components/widgets/welcherAusweisWidget.svelte
+import cardVAwidget from  "#content/cardVAwidget.svelte";
+import cardVAGwidget from "#content/cardVAGwidget.svelte";
+import cardBAwidget from  "#content/cardBAwidget.svelte";
+import cardBAGwidget from  "#content/cardBAGwidget.svelte";
+import { fade } from 'svelte/transition';
+=======
 	let gebaeudetyp: string;
 	let anlass: string;
 	let einheiten: string;
 	let sanierungsstatus: string;
 	let baujahr: string;
+>>>>>>> origin/UMBE:src/components/Widget.svelte

 	const allowedTypes = [
 		"Einfamilienhaus",
@@ -35,6 +43,94 @@
 	}
 </script>

+<<<<<<< HEAD:src/components/widgets/welcherAusweisWidget.svelte
+     <div id="OEA_widget">
+      <input id="recode" type="hidden" value="widgetvorlage">
+    
+    <div id="OEA_input">
+    
+     <div class="OEA_zeile1">
+        <div class="OEA_item1">
+        <div class="OEA_title1">Gebäudetyp</div>
+        <select class="OEA_auswahl1" id="OEA_changeTyp" on:change={handleTypeChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="Einfamilienhaus">Einfamilienhaus</option>
+            <option value="Zweifamilienhaus">Zweifamilienhaus</option>
+            <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+            <option value="Gewerbegebäude">Gewerbegebäude</option>
+            <option value="Mischgebäude">Mischgebäude</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item2">
+          <div class="OEA_title1">Anlass</div>
+          <select class="OEA_auswahl1" id="OEA_changeAnlass" on:change={handleReasonChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
+            <option value="Modernisierung">Modernisierung</option>
+            <option value="Neubau">Neubau</option>
+            <option value="Erweiterung">Erweiterung</option>
+            <option value="Aushangpflicht">Aushangpflicht</option>
+            <option value="sonstiges">sonstiges z.B. Bank</option>
+          </select>
+        </div>
+       </div>
+    
+      <div class="OEA_zeile2">
+        <div class="OEA_item3">
+          <div class="OEA_title2">Baujahr</div>
+          <select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="vor 1978">vor 1978</option>
+            <option value="nach 1977">nach 1977</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item4">
+          <div class="OEA_title2">Wohneinheiten</div>
+          <select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="bis 4 Wohneinheiten">bis 4 Wohneinheiten</option>
+            <option value="mehr als 4 Wohneinheiten">mehr als 4 Wohneinheiten</option>
+          </select>
+        </div>
+    
+        <div class="OEA_item5">
+          <div class="OEA_title2">Sanierungsstatus</div>
+          <select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
+            <option value="" selected disabled>bitte auswählen</option>
+            <option value="saniert">saniert</option>
+            <option value="unsaniert">unsaniert</option>
+          </select>
+        </div>
+       </div> 
+    
+       <div class="OEA_zeile3">
+       {#if showVA}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <cardVAwidget client:load /> 
+       </div>
+       {/if}
+
+       {#if showBA}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <cardBAwidget client:load />
+       </div>
+       {/if}
+
+       {#if showVAG}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <cardVAGwidget client:load />
+       </div>
+       {/if}
+
+       {#if showBAG}
+       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <cardBAGwidget client:load />
+       </div>
+       {/if}
+      </div>
+=======
 <div id="OEA_widget">
 	<input id="recode" type="hidden" value="widgetvorlage" />

@@ -86,6 +182,7 @@
 					<option value="nach 1977">nach 1977</option>
 				</select>
 			</div>
+>>>>>>> origin/UMBE:src/components/Widget.svelte

 			<div class="OEA_item4">
 				<div class="OEA_title2">Wohneinheiten</div>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -44,7 +44,7 @@ const { title } = Astro.props;
 		2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-6
 		">

-		<SidebarLeft />
+		<SidebarLeft client:load/>
 		
 		<article class="box rounded-tl-none p-6">
 		<slot />
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -188,24 +188,26 @@
 			>
 		</div>

-		<!-- A Prüfung der Ausweisart -->
+<!-- A Prüfung der Ausweisart -->
+<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
+<div class="collapseBereich">
+<Ausweisart
+	bind:gebaeude
+	bind:gebaeude_aufnahme_allgemein
+	bind:ausweis
+/>
+</div>

-		<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
-		<Ausweisart
-			bind:gebaeude
-			bind:gebaeude_aufnahme_allgemein
-			bind:ausweis
-		/>
+<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->

-		<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
+<BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
+<div class="collapseBereich">
+<GebaeudeDaten 
+		bind:gebaeude_aufnahme_allgemein
+/>
+</div>

-		<BereichLabel bereich="B"
-			>Eingabe&nbsp;der&nbsp;Gebäudeadresse -
-			Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel
-		>

-		<GebaeudeDaten bind:gebaeude_aufnahme_allgemein />
-	</div>
 </form>

 <style lang="scss">
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "#layouts/Layout.astro";
-import BannerSaeule from "#content/BannerSaeule.svelte";
+import ProduktVergleich from "#content/produktVergleich.svelte";

 ---

@@ -8,7 +8,7 @@ import BannerSaeule from "#content/BannerSaeule.svelte";

 	<h1>Unsere Ausweise im Detail:</h1>

-	<BannerSaeule client:load />
+	<!-- <ProduktVergleich /> -->
 </Layout>


--- a/src/pages/welcher-energieausweis.mdx
+++ b/src/pages/welcher-energieausweis.mdx
@@ -4,7 +4,7 @@ title: "Welcher Energieausweis?"
 ---

 import { BoxWithHeading } from "@ibcornelsen/ui";
-import Widget from "#components/Widget.svelte";
+import WelcherAusweisWidget from "#widgets/welcherAusweisWidget.svelte";

 # Welcher Energieausweis ist der richtige?

@@ -14,7 +14,7 @@ Falls Sie nicht wissen sollten welchen Energieausweis Sie benötigen, können Si
 hier ganz einfach den Gebäudetyp und die entsprechende Maßnahme angeben und
 bekommen als Ergebnis, den für Sie pasenden Energieausweis angezeigt.

-<Widget client:load />
+<WelcherAusweisWidget />

 ## Bei Vermietung und Verkauf Ihres Wohnhauses ist der Verbrauchsausweis Wohngebäude ausreichend

--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -5,12 +5,20 @@


 .formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
-.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] md:[font-size:_clamp(20px,1.25vw,36px)] pl-1;}
+.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] pl-1 justify-self-start
+	md:[font-size:_clamp(20px,1.25vw,36px)]
+
+
+	
+	
+	}

 .bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}

+.collapseBereich{@apply overflow-hidden transition-all ease-in-out duration-200 h-[auto]}
 .bereich-box {@apply w-full bg-gray-500/10 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;

+	transform-origin: top center;
 	/*background: linear-gradient(
        135deg,
        rgba(252, 234, 187, 1) 0%,
@@ -20,6 +28,8 @@
    ); */
 }

+
+
 .input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2}
 .help-label{@apply rounded-e-sm ring-1 ring-black/15}

--- a/src/style/global.css
+++ b/src/style/global.css
@@ -66,7 +66,7 @@ radio {
 /*ARTICLE*/

 article {
-	@apply w-full relative bg-white min-h-screen px-0 py-0;
+	@apply w-full relative bg-white px-0 py-0;

 	hr {
 		@apply mb-4 mt-4;
@@ -112,6 +112,7 @@ article {
 	}
 }

+
 /*SIDEBAR-LEFT*/

 /*NAVIGATION*/
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,7 +37,8 @@
 			"#sidebarRight/*": ["./src/components/design/sidebars/right/*"],

 			"#ausweise/*": ["./src/pages/energieausweis-erstellen/*"],
-			"#labels/*": ["./src/components/labels/*"]
+			"#labels/*": ["./src/components/labels/*"],
+			"#widgets/*": ["./src/components/widgets/*"]
 		},
 		"types": ["cypress", "cypress-file-upload", "bun-types", "svelte"]
 	}