diff --git a/.gitignore b/.gitignore
index 5271c4c5..5a26c926 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,7 @@ bun.lockb
 
 # macOS-specific files
 .DS_Store
+
+public/fonts/
+
+*.Identifier
diff --git a/Makefile b/Makefile
index a6393fe3..82b60cbe 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
 .PHONY: dev database api online-energieausweis all prod bun-install-database bun-install-api
 
 online-energieausweis:
-	bun run dev
+	bun run dev --host
 
 dev: online-energieausweis api database
 
diff --git a/public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier b/public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier
deleted file mode 100644
index 23631344..00000000
--- a/public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\antique-olive-std.zip
diff --git a/public/fonts/HeronSans-Light.woff2Zone.Identifier b/public/fonts/HeronSans-Light.woff2Zone.Identifier
deleted file mode 100644
index ceb1d4ac..00000000
--- a/public/fonts/HeronSans-Light.woff2Zone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
diff --git a/public/fonts/HeronSans-Regular.eotZone.Identifier b/public/fonts/HeronSans-Regular.eotZone.Identifier
deleted file mode 100644
index ceb1d4ac..00000000
--- a/public/fonts/HeronSans-Regular.eotZone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
diff --git a/public/fonts/HeronSans-Regular.ttfZone.Identifier b/public/fonts/HeronSans-Regular.ttfZone.Identifier
deleted file mode 100644
index ceb1d4ac..00000000
--- a/public/fonts/HeronSans-Regular.ttfZone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
diff --git a/public/fonts/HeronSans-Regular.woff2Zone.Identifier b/public/fonts/HeronSans-Regular.woff2Zone.Identifier
deleted file mode 100644
index ceb1d4ac..00000000
--- a/public/fonts/HeronSans-Regular.woff2Zone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
diff --git a/public/fonts/HeronSans-Regular.woffZone.Identifier b/public/fonts/HeronSans-Regular.woffZone.Identifier
deleted file mode 100644
index ceb1d4ac..00000000
--- a/public/fonts/HeronSans-Regular.woffZone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
diff --git a/public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier b/public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier
deleted file mode 100644
index ceb1d4ac..00000000
--- a/public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\all\Downloads\font (1).zip
diff --git a/src/components/Ausweis/Ausweisart.svelte b/src/components/Ausweis/Ausweisart.svelte
index fe7ef99a..dd6ac3ed 100644
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 
-console.log('Hallo Welt');
-
 	import HelpLabel from "#labels/HelpLabel.svelte";
 	import Inputlabel from "#labels/InputLabel.svelte";
 
@@ -28,12 +26,14 @@ console.log('Hallo Welt');
 
 
 
-<div class="bereich-box grid 
+<div class="bereich-box relative 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
 ">
 
+
+
 <!-- Anlass für Energieausweis -->
 
 <div class="input-standard order-1 md:order-1 xl:order-1">
diff --git a/src/components/Ausweis/GebaeudeDaten.svelte b/src/components/Ausweis/GebaeudeDaten.svelte
index a80fd260..e79804f2 100644
--- 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
diff --git a/src/components/design/content/card-BAG-widget.svelte b/src/components/design/content/cardBAGwidget.svelte
similarity index 97%
rename from src/components/design/content/card-BAG-widget.svelte
rename to src/components/design/content/cardBAGwidget.svelte
index a420745d..2886abf8 100644
--- a/src/components/design/content/card-BAG-widget.svelte
+++ b/src/components/design/content/cardBAGwidget.svelte
@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BAG-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-BAG-promo" class="box card"> 
 	<div class="">
 
 	<h2>Bedarfsausweis Gewerbe</h2>
diff --git a/src/components/design/content/card-BA-widget.svelte b/src/components/design/content/cardBAwidget.svelte
similarity index 97%
rename from src/components/design/content/card-BA-widget.svelte
rename to src/components/design/content/cardBAwidget.svelte
index 3980145b..ad8431f3 100644
--- a/src/components/design/content/card-BA-widget.svelte
+++ b/src/components/design/content/cardBAwidget.svelte
@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-BA-promo" class="box card"> 
     <div class="">
 
     <h2>Bedarfssausweis Wohngebäude</h2>
diff --git a/src/components/design/content/card-VAG-widget.svelte b/src/components/design/content/cardVAGwidget.svelte
similarity index 97%
rename from src/components/design/content/card-VAG-widget.svelte
rename to src/components/design/content/cardVAGwidget.svelte
index abd7a744..7c57820c 100644
--- a/src/components/design/content/card-VAG-widget.svelte
+++ b/src/components/design/content/cardVAGwidget.svelte
@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VAG-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-VAG-promo" class="box card "> 
 	<div class="">
 
 	<h2>Verbrauchsausweis Gewerbe</h2>
diff --git a/src/components/design/content/card-VA-widget.svelte b/src/components/design/content/cardVAwidget.svelte
similarity index 97%
rename from src/components/design/content/card-VA-widget.svelte
rename to src/components/design/content/cardVAwidget.svelte
index 0baabee1..a47e9f56 100644
--- a/src/components/design/content/card-VA-widget.svelte
+++ b/src/components/design/content/cardVAwidget.svelte
@@ -2,7 +2,7 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5"> 
+<div id ="card-VA-promo" class="box card"> 
 	<div class="">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>
diff --git a/src/components/design/content/banner-saeule.svelte b/src/components/design/content/produktVergleich.svelte
similarity index 100%
rename from src/components/design/content/banner-saeule.svelte
rename to src/components/design/content/produktVergleich.svelte
diff --git a/src/components/design/header/Header.astro b/src/components/design/header/Header.astro
index c8bdb710..55ce74fa 100644
--- 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>
diff --git a/src/components/design/sidebars/cards/card-login.svelte b/src/components/design/header/headerLogin.svelte
similarity index 100%
rename from src/components/design/sidebars/cards/card-login.svelte
rename to src/components/design/header/headerLogin.svelte
diff --git a/src/components/design/sidebars/cards/card-review.svelte b/src/components/design/sidebars/cards/card-review.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/design/sidebars/cards/card-BA-G-promo.svelte b/src/components/design/sidebars/cards/cardBAGpromo.svelte
similarity index 89%
rename from src/components/design/sidebars/cards/card-BA-G-promo.svelte
rename to src/components/design/sidebars/cards/cardBAGpromo.svelte
index be852fcf..4d2d5ede 100644
--- a/src/components/design/sidebars/cards/card-BA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/cardBAGpromo.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">
 
diff --git a/src/components/design/sidebars/cards/card-BA-promo.svelte b/src/components/design/sidebars/cards/cardBApromo.svelte
similarity index 91%
rename from src/components/design/sidebars/cards/card-BA-promo.svelte
rename to src/components/design/sidebars/cards/cardBApromo.svelte
index 7a39700e..d94da9c0 100644
--- a/src/components/design/sidebars/cards/card-BA-promo.svelte
+++ b/src/components/design/sidebars/cards/cardBApromo.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">
 
diff --git a/src/components/design/sidebars/cards/card-contact.svelte b/src/components/design/sidebars/cards/cardContact.svelte
similarity index 88%
rename from src/components/design/sidebars/cards/card-contact.svelte
rename to src/components/design/sidebars/cards/cardContact.svelte
index 5a78ab3a..03a920e4 100644
--- a/src/components/design/sidebars/cards/card-contact.svelte
+++ b/src/components/design/sidebars/cards/cardContact.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="">
diff --git a/src/components/design/sidebars/cards/card-login_1.svelte b/src/components/design/sidebars/cards/cardLogin.svelte
similarity index 95%
rename from src/components/design/sidebars/cards/card-login_1.svelte
rename to src/components/design/sidebars/cards/cardLogin.svelte
index a46e0040..22d13e27 100644
--- a/src/components/design/sidebars/cards/card-login_1.svelte
+++ b/src/components/design/sidebars/cards/cardLogin.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]">
diff --git a/src/components/design/sidebars/cards/card-navigation.svelte b/src/components/design/sidebars/cards/cardNavigation.svelte
similarity index 95%
rename from src/components/design/sidebars/cards/card-navigation.svelte
rename to src/components/design/sidebars/cards/cardNavigation.svelte
index 53729895..cc48ab73 100644
--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/cardNavigation.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;
diff --git a/src/components/design/sidebars/cards/card-price-info.svelte b/src/components/design/sidebars/cards/cardPriceiInfo.svelte
similarity index 86%
rename from src/components/design/sidebars/cards/card-price-info.svelte
rename to src/components/design/sidebars/cards/cardPriceiInfo.svelte
index 067a5494..92b446a2 100644
--- a/src/components/design/sidebars/cards/card-price-info.svelte
+++ b/src/components/design/sidebars/cards/cardPriceiInfo.svelte
@@ -2,12 +2,8 @@
 	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]">
 <p>Verbrauchsausweis Wohngebäude</p>
@@ -29,13 +25,8 @@
 <p>ab&nbsp;450€ inkl.&nbsp;MwSt.</p>
 <hr class="mt-2">
 
-
-
-</div>
 </div>
 
 
 <style lang="scss">
-
-
 </style>
\ No newline at end of file
diff --git a/public/fonts/Antique Olive Std Compact.woff2Zone.Identifier b/src/components/design/sidebars/cards/cardReview.svelte
similarity index 100%
rename from public/fonts/Antique Olive Std Compact.woff2Zone.Identifier
rename to src/components/design/sidebars/cards/cardReview.svelte
diff --git a/src/components/design/sidebars/cards/card-VA-G-promo.svelte b/src/components/design/sidebars/cards/cardVAGpromo.svelte
similarity index 91%
rename from src/components/design/sidebars/cards/card-VA-G-promo.svelte
rename to src/components/design/sidebars/cards/cardVAGpromo.svelte
index 1b9283c6..4eee4c2d 100644
--- a/src/components/design/sidebars/cards/card-VA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/cardVAGpromo.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">
 
diff --git a/src/components/design/sidebars/cards/card-VA-promo.svelte b/src/components/design/sidebars/cards/cardVApromo.svelte
similarity index 91%
rename from src/components/design/sidebars/cards/card-VA-promo.svelte
rename to src/components/design/sidebars/cards/cardVApromo.svelte
index 2a062e12..7a3d8e45 100644
--- a/src/components/design/sidebars/cards/card-VA-promo.svelte
+++ b/src/components/design/sidebars/cards/cardVApromo.svelte
@@ -2,8 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 	
-<div id ="card-VA-promo" 
-	class="	box card bg-white px-6 py-4 mb-5">
+<div id ="cardVApromo" 
+	class="	box card">
 
 	<div class="grid">
 
diff --git a/src/components/design/sidebars/cards/navcard.astro b/src/components/design/sidebars/cards/navcard.astro
deleted file mode 100644
index b2b7afe4..00000000
--- a/src/components/design/sidebars/cards/navcard.astro
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/components/design/sidebars/left/SidebarLeft.astro b/src/components/design/sidebars/left/SidebarLeft.astro
index 7122a32c..6d5dbba2 100644
--- a/src/components/design/sidebars/left/SidebarLeft.astro
+++ b/src/components/design/sidebars/left/SidebarLeft.astro
@@ -1,12 +1,11 @@
 ---
-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 />
+<CardPriceiInfo />
 
-<Navigation client:load />
-<Preistabelle client:load />
 </div>
\ No newline at end of file
diff --git a/src/components/design/sidebars/right/SidebarRight.astro b/src/components/design/sidebars/right/SidebarRight.astro
index d835f63d..2fd41fb6 100644
--- 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>
 
 
diff --git a/src/components/design/sidebars/right/SidebarRight_1.astro b/src/components/design/sidebars/right/SidebarRight_1.astro
index fee43c2a..0bfced6b 100644
--- 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
diff --git a/src/components/labels/BereichLabel.svelte b/src/components/labels/BereichLabel.svelte
index d009e844..2c84d54e 100644
--- 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>
 
diff --git a/src/components/Widget.svelte b/src/components/widgets/welcherAusweisWidget.svelte
similarity index 94%
rename from src/components/Widget.svelte
rename to src/components/widgets/welcherAusweisWidget.svelte
index 2ddd6156..b1078f32 100644
--- a/src/components/Widget.svelte
+++ b/src/components/widgets/welcherAusweisWidget.svelte
@@ -1,10 +1,10 @@
 
 <script lang="ts">
 
-import VApromo from  "#content/card-VA-widget.svelte";
-import VAGpromo from "#content/card-VAG-widget.svelte";
-import BApromo from  "#content/card-BA-widget.svelte";
-import BAGpromo from  "#content/card-BAG-widget.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 selectedType: string = "";
@@ -131,25 +131,25 @@ import { fade } from 'svelte/transition';
        <div class="OEA_zeile3">
        {#if showVA}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <VApromo client:load /> 
+        <cardVAwidget client:load /> 
        </div>
        {/if}
 
        {#if showBA}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <BApromo client:load />
+        <cardBAwidget client:load />
        </div>
        {/if}
 
        {#if showVAG}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <VAGpromo client:load />
+        <cardVAGwidget client:load />
        </div>
        {/if}
 
        {#if showBAG}
        <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
-        <BAGpromo client:load />
+        <cardBAGwidget client:load />
        </div>
        {/if}
       </div>
diff --git a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
index 794de54e..877535af 100644
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -152,21 +152,25 @@
 <!-- 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
-	client:load
 />
- 
+</div>
+
+
 <!-- 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
-		client:load
 />
+</div>
+
+
 
 
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2c39d6f3..6c44f50a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "#layouts/Layout.astro";
-import BannerPrice from "#content/banner-saeule.svelte";
+import ProduktVergleich from "#content/produktVergleich.svelte";
 
 ---
 
@@ -8,7 +8,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
 
 	<h1>Unsere Ausweise im Detail:</h1>
 
-	<!-- <BannerPrice client:load /> -->
+	<!-- <ProduktVergleich /> -->
 </Layout>
 
 
diff --git a/src/pages/welcher-energieausweis.mdx b/src/pages/welcher-energieausweis.mdx
index a014fd6b..4a05c61f 100644
--- 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
 
diff --git a/src/style/formular.css b/src/style/formular.css
index 41b511c4..a8103f3b 100644
--- 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}
 
diff --git a/src/style/global.css b/src/style/global.css
index 6e880e29..9beef26c 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -66,7 +66,7 @@ radio{@apply accent-primary}
 /*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;}
 
@@ -89,14 +89,17 @@ article {
 			 
 }
 
-.card{
+.card:not(:last-child){@apply mb-5}
+.card{@apply bg-white px-6 py-4;
+
 	h2		{@apply text-lg font-bold text-box-heading leading-6}
-	hr		{@apply my-2}
+	hr		{@apply my-0}
 	p		{@apply text-lg}
 	a		{@apply text-lg}
 
 }
 
+
 /*SIDEBAR-LEFT*/
 
 /*NAVIGATION*/
@@ -143,7 +146,7 @@ li 		{@apply 	text-sm  bg-white flex
 					xl:text-lg}
 
 li a	{@apply 	w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
-					lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary		
+					lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
 	   				xl:text-lg}
 
 li:not(:first-child)	{@apply		!border-gray-200 !border-t-[1px]}
diff --git a/tsconfig.json b/tsconfig.json
index cbc1b34f..17f56b38 100644
--- 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"]
 	}