diff --git a/public/images/header/logo-IBC-big.svg b/public/images/header/logo-IBC-big.svg
index deb47bca..e70ca61c 100644
--- a/public/images/header/logo-IBC-big.svg
+++ b/public/images/header/logo-IBC-big.svg
@@ -1,32 +1,23 @@
 <?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)  -->
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50.66mm" height="57.61mm" viewBox="0 0 143.6 163.3">
   <defs>
     <style>
-      .st0 {
-        display: none;
-        fill: #878787;
-      }
-
-      .st1 {
+      .cls-1 {
         fill: #445096;
       }
 
-      .st2 {
+      .cls-2 {
         fill: #c6c6c6;
       }
     </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.5s3,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.7h.1Z"/>
-  <g>
-    <path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2h0Z"/>
-    <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.2v11.2ZM70,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.8h0ZM70,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.8h0Z"/>
-    <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="st2" 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.7s-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.7v.2Z"/>
-    <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>
+  <path class="cls-1" d="M18.1,143.8H3.7V62.5h14.4v81.2h0v.1Z"/>
+  <path class="cls-1" d="M84.8,127.2c0,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.2v11.2h0ZM70.5,91.2v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0v-.1ZM70.5,124.6v-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.8h0v-.1Z"/>
+  <path class="cls-1" d="M18.1,76.9v-14.4h3.7v14.4h-3.7Z"/>
+  <path class="cls-1" d="M0,76.9v-14.4h3.7v14.4H0Z"/>
+  <path class="cls-1" d="M18.1,143.8v-14.4h3.7v14.4h-3.7Z"/>
+  <path class="cls-1" d="M0,143.8v-14.4h3.7v14.4H0Z"/>
+  <path class="cls-2" d="M125,129.4h-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.7s-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.7v.2h0Z"/>
+  <polygon class="cls-1" points="90.9 13.6 71.8 0 52.7 13.6 0 51.6 19.2 51.6 71.8 13.6 124.4 51.6 143.5 51.6 90.9 13.6"/>
+  <path class="cls-1" d="M.2,163.3v-9.3h143.4v9.3H.2Z"/>
 </svg>
\ No newline at end of file
diff --git a/public/images/header/logo-IBC-white.svg b/public/images/header/logo-IBC-white.svg
index 30a811a9..180ab3c9 100644
--- a/public/images/header/logo-IBC-white.svg
+++ b/public/images/header/logo-IBC-white.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143.6 163.3">
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50.66mm" height="57.61mm" viewBox="0 0 143.6 163.3">
   <defs>
     <style>
       .cls-1 {
@@ -12,7 +12,7 @@
     </style>
   </defs>
   <path class="cls-1" d="M18.1,143.8H3.7V62.5h14.4v81.2h0v.1Z"/>
-  <path class="cls-1" d="M84.8,127.2c0,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.2v11.2h0ZM70.5,91.2v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0v-.1ZM70.5,124.6v-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.8h0v-.1Z"/>
+  <path class="cls-1" d="M84.8,127.2c0,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.2v11.2h0ZM70.5,91.2v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0s0-.1,0-.1ZM70.5,124.6v-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.8h0v-.1Z"/>
   <path class="cls-1" d="M18.1,76.9v-14.4h3.7v14.4h-3.7Z"/>
   <path class="cls-1" d="M0,76.9v-14.4h3.7v14.4H0Z"/>
   <path class="cls-1" d="M18.1,143.8v-14.4h3.7v14.4h-3.7Z"/>
diff --git a/src/components/Ausweis/ButtonWeiterHilfe.svelte b/src/components/Ausweis/ButtonWeiterHilfe.svelte
index 62135516..8d5372ab 100644
--- a/src/components/Ausweis/ButtonWeiterHilfe.svelte
+++ b/src/components/Ausweis/ButtonWeiterHilfe.svelte
@@ -79,8 +79,8 @@
 	let loginOverlayHidden = true;
 </script>
 
-<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0 
-sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">
+<div class="grid grid-cols-1 gap-x-2 gap-y-1 self-start
+sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end">
 
 	<div></div>
 
@@ -90,85 +90,11 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
 		>
 	</div>
 	
-	{#if showHelp}
-		<div class="col-start-1 row-start-2 col-span-4 mt-4">
-			<div
-				class="bereich-box grid relative
-	grid-cols-1 gap-x-4 gap-y-4
-	
-	"
-			>
-				<div class="pr-12">
-					Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
-					haben. Kurze Fragen zum Formular oder der Ausweisart werden
-					kostenfrei telefonisch unter <a href="tel:+4940209339850"
-						>040/209339850</a
-					> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
-					benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
-					lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
-					Auswahl und klicken auf weiter:
-				</div>
-	
-				<hr class="m-0" />
-	
-				<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
-					<input
-						type="radio"
-						class=" accent-secondary w-[20px] h-[20px]"
-						id="Produkttb1"
-						value={Enums.AusweisTyp.Beratung}
-						name="Produkt"
-						bind:group={ausweistyp}
-					/>
-	
-					<div class="justify-self-stretch">
-						Verbrauchsausweis online inkl. ausführlicher telefonischer
-						Beratung
-					</div>
-	
-					<div class="text-right">
-						<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
-					</div>
-				</div>
-	
-				<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
-					<input
-						type="radio"
-						class=" accent-secondary w-[20px] h-[20px]"
-						id="Produktof1"
-						value={Enums.AusweisTyp.Offline}
-						name="Produkt"
-						bind:group={ausweistyp}
-					/>
-	
-					<div>
-						Verbrauchsausweis offline (Sie schicken uns 3
-						Verbrauchsabrechnungen zu)
-					</div>
-	
-					<div class="text-right">
-						<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
-					</div>
-				</div>
-	
-				<hr class="m-0" />
-	
-				<button class="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>
-	
-				<button
-					class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
-					type="button"
-					on:click={() => (showHelp = !showHelp)}>X</button
-				>
-			</div>
-		</div>
-	{/if}
-	
-
 	<button class="button" type="button" on:click={spaeterWeitermachen}
 		>Später Weitermachen
 	</button>
 
+
 	{#if showWeiter}
 	<div>
 		<Overlay bind:hidden={loginOverlayHidden}>
@@ -181,3 +107,76 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
 	</div>
 	{/if}
 </div>
+
+{#if showHelp}
+<div class="w-full col-start-1 row-start-2 sm:row-start-2 col-span-4 mt-4">
+	<div
+		class="bereich-box w-full 2xl:w-[50%] xs:mx-auto grid relative
+grid-cols-1 gap-x-2 gap-y-4
+
+"
+	>
+		<div class="pr-4 xs:pr-12">
+			Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
+			haben. Kurze Fragen zum Formular oder der Ausweisart werden
+			kostenfrei telefonisch unter <a href="tel:+4940209339850"
+				>040/209339850</a
+			> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
+			benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
+			lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
+			Auswahl und klicken auf weiter:
+		</div>
+
+		<hr class="m-0" />
+
+		<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
+			<input
+				type="radio"
+				class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
+				id="Produkttb1"
+				value={Enums.AusweisTyp.Beratung}
+				name="Produkt"
+				bind:group={ausweistyp}
+			/>
+
+			<div class="text-center xs:text-left justify-self-stretch">
+				Verbrauchsausweis online<br>inkl. ausführlicher&nbsp;telefonischer
+				Beratung
+			</div>
+
+			<div class="text-center xs:text-right">
+				<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
+			</div>
+		</div>
+
+		<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
+			<input
+				type="radio"
+				class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
+				id="Produktof1"
+				value={Enums.AusweisTyp.Offline}
+				name="Produkt"
+				bind:group={ausweistyp}
+			/>
+
+			<div class="text-center xs:text-left justify-self-stretch">
+				Verbrauchsausweis offline Sie schicken uns 3&nbsp;Verbrauchsabrechnungen&nbsp;zu)
+			</div>
+
+			<div class="text-center xs:text-right">
+				<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
+			</div>
+		</div>
+
+		<hr class="m-0" />
+
+		<button class="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>
+
+		<button
+			class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
+			type="button"
+			on:click={() => (showHelp = !showHelp)}>X</button
+		>
+	</div>
+</div>
+{/if}
diff --git a/src/components/Ausweis/PerformanceScore.svelte b/src/components/Ausweis/PerformanceScore.svelte
index d1872c59..a5dc68e0 100644
--- a/src/components/Ausweis/PerformanceScore.svelte
+++ b/src/components/Ausweis/PerformanceScore.svelte
@@ -83,6 +83,9 @@
 		})();
 	}
 </script>
+
+<div id="performance-box" class="order-2 sm:order-1 w-full box relative px-0 sm:px-4 self-stretch grid grid-cols-1">
+
 <div class="self-center relative">
 	{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
 		<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-wohnen.png" alt="Energieeffizienz Skala" />	
@@ -91,7 +94,7 @@
 	{/if}
 	<ThickArrowDown
 		size={28}
-		class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
+		class="fill-base-content absolute -top-1 sm:top-4 transition-left duration-1000 ease-in-out"
 		style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
 			translation_1,
 			50,
@@ -102,7 +105,7 @@
 	/>
 	<ThickArrowUp
 		size={28}
-		class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out"
+		class="fill-base-content absolute -bottom-1 sm:bottom-4 transition-left duration-1000 ease-in-out"
 		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
 			translation_2,
 			50,
@@ -112,3 +115,6 @@
 		)}%)"
 	/>
 </div>
+
+
+</div>
\ No newline at end of file
diff --git a/src/components/Ausweis/Progressbar.svelte b/src/components/Ausweis/Progressbar.svelte
index f7754c0d..79f02fac 100644
--- a/src/components/Ausweis/Progressbar.svelte
+++ b/src/components/Ausweis/Progressbar.svelte
@@ -6,8 +6,16 @@
 	];
 	export let active: number;
 	export let progress: number = active / (steps.length - 1) * 100;
+	export let ausweisart;
+
+	import { PRICES } from "#lib/constants.js";
+	import { Enums } from "#lib/client/prisma.js";
 </script>
 
+<div id="progress-box" class="order-1 sm:order-2 w-full box relative px-4 pt-3 sm:py-3 text-center self-stretch">
+<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0 font-bold sm:font-normal">Energieausweis erstellen</h1>
+<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
+
 <div class="grid grid-cols-3 self-start justify-between">
 	<div class="col-span-3 relative">
 		<div
@@ -24,11 +32,12 @@
 	{#each steps as step, i}
 		<div class="phase">
 			<div class="point" class:active={i === active}>{i + 1}</div>
-			<div>{step}</div>
+			<div class="phaseTitel">{step}</div>
 		</div>
 	{/each}
 </div>
 
+</div>
 
 
 <style lang="postcss">
@@ -40,6 +49,7 @@
 		.active {
 			@apply bg-secondary;
 		}
+		.phaseTitel{@apply [font-size:_clamp(12px,1vw,18px)]}
 	}
 
 	:nth-child(1 of .phase) {
diff --git a/src/components/Ausweis/Rechnungsadresse.svelte b/src/components/Ausweis/Rechnungsadresse.svelte
index e3e0a20b..1f0b4868 100644
--- a/src/components/Ausweis/Rechnungsadresse.svelte
+++ b/src/components/Ausweis/Rechnungsadresse.svelte
@@ -19,12 +19,11 @@
 
 <div
 	id="rechnungsadresse"
-	class="bereich-box grid
+	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
-"
->
+">
 	<!-- Empfänger * -->
 
 	<div class="input-standard order-1 md:order-1 xl:order-1">
@@ -49,7 +48,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 	<!-- Straße, Hausnummer * -->
 
-	<div class="input-standard order21 md:order-2 xl:order-2">
+	<div class="input-standard order-2 md:order-2 xl:order-2">
 		<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
 
 		<input
@@ -135,26 +134,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		</div>
 	</div>
 
-	<!-- Telefon 
 
-<div class="input-standard order-6 md:order-6 xl:order-6">
-	<Inputlabel title="Telefon *"></Inputlabel>
-
-    <input
-    name="rechnung_telefon"
-    bind:value={rechnung.telefon}
-    type="text"
-/>
-
-		<div class="help-label">
-				<HelpLabel>
-					Bitte geben Sie die Telefonnummer des Rechnungsempfängers ein.
-				</HelpLabel>
-			</div>
-</div>
--->
-
-	<div class="col-span-3 order-7 md:order-7 xl:order-7">
+	<div class="sm:col-span-3 order-7 md:order-7 xl:order-7">
 		<div
 			class="grid grid-cols-[25px_max-content] items-center justify-items-start"
 		>
diff --git a/src/components/design/header/Header.astro b/src/components/design/header/Header.astro
index 59bf6a9a..fec0b503 100644
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -2,9 +2,9 @@
 import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
 ---
 
-<header id="header">
+<header id="header" class="hidden sm:block">
 
-<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
+<div id="header-grid" class="grid relative bg-white items-end gap-x-4 pt-4 px-0
 
 grid-cols-1
 sm:grid-cols-1 
@@ -14,16 +14,16 @@ lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
 xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
 2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
 
-<div class="justify-self-center xs:justify-self-start">
+<div class="justify-self-start">
 
-<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
+<div class="w-full grid grid-cols-[48px_1fr] px-2 gap-2 gap-y-1 self-end
 xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
 md:gap-y-4
 lg:px-0 lg:gap-x-4">
 
-<div class="self-start justify-self-start">
+<div class="justify-self-start">
 	<a href="/">
-		<img id="header-logo" class="w-full 
+		<img id="header-logo" class="w-full
 		xs:max-w-[64px] 
 		sm:max-w-[64px]
 		md:max-w-[64px] md:ml-6
@@ -34,33 +34,39 @@ lg:px-0 lg:gap-x-4">
 	</a>
 </div>
 
-<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
+<div class="self-end">
+	
+	<div id="header-text-1"class="text-secondary justify-self-start
+	[font-size:_clamp(16px,6vw,36px)]
+	xs:[font-size:_clamp(15px,6vw,36px)] xs:justify-self-start xs:leading-[3.5rem]
 	
-	<div id="header-text-1"class="text-secondary justify-self-center
-	xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
-
 	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 id="header-text-2"class="text-primary justify-self-center
-	xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
+	<div id="header-text-2"class="text-primary justify-self-start
+	[font-size:_clamp(10px,4vw,22px)] leading-[10px]
+
+	xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[1rem]
 
 	lg:[font-size:_clamp(15px,3vw,20px)] 
-	lg:leading-[2rem]
+
 	xl:[font-size:_clamp(15px,3vw,24px)] 
-	xl:leading-[0.5rem]">
+">
 	Energieausweise nach aktuellem GEG</div>
 	</div>
+
 </div>
 </div>
 
+
 <div class="w-full justify-self-center">
 	<HeaderLogin client:load  />
 </div>
 
+
 </div>
 
 
diff --git a/src/components/design/header/Header_ORG.astro b/src/components/design/header/Header_ORG.astro
new file mode 100644
index 00000000..59bf6a9a
--- /dev/null
+++ b/src/components/design/header/Header_ORG.astro
@@ -0,0 +1,82 @@
+---
+import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
+---
+
+<header id="header">
+
+<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
+
+grid-cols-1
+sm:grid-cols-1 
+md:grid-cols-1
+
+lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
+xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
+2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
+
+<div class="justify-self-center xs:justify-self-start">
+
+<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
+xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
+md:gap-y-4
+lg:px-0 lg:gap-x-4">
+
+<div class="self-start justify-self-start">
+	<a href="/">
+		<img id="header-logo" class="w-full 
+		xs:max-w-[64px] 
+		sm:max-w-[64px]
+		md:max-w-[64px] md:ml-6
+		lg:max-w-[64px] lg:ml-0
+		xl:max-w-[94px] xl:ml-0
+		" 
+		src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
+	</a>
+</div>
+
+<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
+	
+	<div id="header-text-1"class="text-secondary justify-self-center
+	xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
+
+	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 id="header-text-2"class="text-primary justify-self-center
+	xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
+
+	lg:[font-size:_clamp(15px,3vw,20px)] 
+	lg:leading-[2rem]
+	xl:[font-size:_clamp(15px,3vw,24px)] 
+	xl:leading-[0.5rem]">
+	Energieausweise nach aktuellem GEG</div>
+	</div>
+</div>
+</div>
+
+<div class="w-full justify-self-center">
+	<HeaderLogin client:load  />
+</div>
+
+</div>
+
+
+
+
+</div>
+
+	<div class="col-start-1 col-span-3">
+		<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-primary
+					lg:h-[12px] xl:h-[12px]"></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>
\ No newline at end of file
diff --git a/src/components/design/sidebars/cards/NavigationCard.svelte b/src/components/design/sidebars/cards/NavigationCard.svelte
index 421d0525..0e64d93a 100644
--- a/src/components/design/sidebars/cards/NavigationCard.svelte
+++ b/src/components/design/sidebars/cards/NavigationCard.svelte
@@ -65,6 +65,10 @@
 			for (let i = 0; i < rotate_list.length; i++) {
 				rotate_list[i].classList.remove("rotate-symbol");
 			}
+			const rotate_list1 = document.querySelectorAll(".dd-symbol-clone");
+			for (let i = 0; i < rotate_list1.length; i++) {
+				rotate_list1[i].classList.remove("rotate-symbol");
+			}
 		} else {
 			for (let i = 0; i < spans.length; i++) {
 				spans[i].classList.add("hamburger-swing-" + i);
@@ -75,21 +79,25 @@
 
 <svelte:window bind:innerWidth />
 
-<div
-	class="hamburger_menu py-1 px-2 bg-secondary
-            xs:px-4
-            lg:hidden"
->
-	<div
-		id="hamburger"
-		on:click={hamburger}
-		on:keydown={hamburger}
-		class="cursor-pointer"
-	>
+<div class="hamburger_menu py-1 px-2 bg-secondary xs:px-4 lg:hidden">
+	
+<div id="hamburger" class="cursor-pointer grid grid-cols-2 items-center">
+
+<div class="burger justify-self-start" 
+on:click={hamburger}
+on:keydown={hamburger}>
 		<span></span>
 		<span></span>
 		<span></span>
-	</div>
+</div>
+
+<div class="justify-self-end">
+	<a href="/">
+		<img id="header-logo" class="w-8 m-1"  src="/images/header/logo-IBC-white.svg" alt="IBCornelsen-Logo"/>
+	</a>
+</div>
+
+</div>
 </div>
 
 <nav
@@ -387,7 +395,7 @@
 	</div>
 
 	<div class="nav-element">
-		<a class="no-dropdown nav-element-child" href="/kundenbewertungen/"
+		<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
 			>Kundenbewertungen</a
 		>
 	</div>
diff --git a/src/components/design/sidebars/cards/NavigationCard_ORG.svelte b/src/components/design/sidebars/cards/NavigationCard_ORG.svelte
new file mode 100644
index 00000000..245ec4f8
--- /dev/null
+++ b/src/components/design/sidebars/cards/NavigationCard_ORG.svelte
@@ -0,0 +1,455 @@
+<script lang="ts">
+	let innerWidth: number;
+
+	function dropdown() {
+		if (innerWidth < 1024) {
+			const check_element = this.lastChild;
+
+			const rotate_list = document.querySelectorAll(".dd-symbol-clone");
+			const rotate_element = this.childNodes[0].children[0];
+
+			var first_check = check_element.classList.contains(
+				"show-dropdown-content"
+			);
+			const nodeList = document.querySelectorAll(".dropdown-content");
+
+			if (first_check == true) {
+				check_element.classList.remove("show-dropdown-content");
+				rotate_element.classList.toggle("rotate-symbol");
+			} else {
+				for (let i = 0; i < nodeList.length; i++) {
+					const element = nodeList[i];
+					element.classList.remove("show-dropdown-content");
+				}
+				for (let i = 0; i < rotate_list.length; i++) {
+					const element = rotate_list[i];
+					element.classList.remove("rotate-symbol");
+				}
+
+				check_element.classList.add("show-dropdown-content");
+				rotate_element.classList.add("rotate-symbol");
+			}
+		}
+	}
+
+	function hover() {
+		if (innerWidth > 1024) {
+			const check_element = this.firstChild.lastChild;
+			check_element.style.visibility = "visible";
+		}
+	}
+
+	function hoverout() {
+		if (innerWidth > 1024) {
+			const check_element = this.firstChild.lastChild;
+			check_element.style.visibility = "hidden";
+		}
+	}
+
+	function hamburger() {
+		const nodeList = document.querySelectorAll(".dropdown-content");
+		for (let i = 0; i < nodeList.length; i++) {
+			nodeList[i].classList.remove("show-dropdown-content");
+		}
+		var element = document.getElementById("cardNavigation");
+		element.classList.toggle("hidden");
+
+		const spans = this.children;
+		var first_check = spans[0].classList.contains("hamburger-swing-0");
+
+		if (first_check == true) {
+			for (let i = 0; i < spans.length; i++) {
+				spans[i].classList.remove("hamburger-swing-" + i);
+			}
+			const rotate_list = document.querySelectorAll(".dd-symbol");
+			for (let i = 0; i < rotate_list.length; i++) {
+				rotate_list[i].classList.remove("rotate-symbol");
+			}
+		} else {
+			for (let i = 0; i < spans.length; i++) {
+				spans[i].classList.add("hamburger-swing-" + i);
+			}
+		}
+	}
+</script>
+
+<svelte:window bind:innerWidth />
+
+<div
+	class="hamburger_menu py-1 px-2 bg-secondary
+            xs:px-4
+            lg:hidden"
+>
+	<div
+		id="hamburger" 
+		on:click={hamburger}
+		on:keydown={hamburger}
+		class="cursor-pointer"
+	>
+
+		<span></span>
+		<span></span>
+		<span></span>
+
+	</div>
+</div>
+
+<nav
+	id="cardNavigation"
+	class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"
+>
+	<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
+		Jetzt bestellen
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child" href="/welcher-energieausweis/"
+			>Welcher Energieausweis?</a
+		>
+	</div>
+
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		class="nav-element dropdown lg:dropdown-right"
+		on:click={dropdown}
+		on:keydown={dropdown}
+		on:mouseover={hover}
+		on:mouseleave={hoverout}
+	>
+		{#if innerWidth > 1023}
+			<a href={undefined} class="nav-element-child"
+				>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
+				><span class="dd-symbol">❯</span></a
+			>
+		{:else}
+			<a href={undefined} class="nav-element-child"
+				>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
+				><span class="dd-symbol">❯</span></a
+			>
+		{/if}
+
+		<ul class="dropdown-content energieasusweis-erstellen">
+			{#if innerWidth < 1023}
+				<li>
+					<a href="/energieausweis-erstellen"
+						>Energieausweis erstellen</a
+					>
+				</li>
+			{/if}
+			<li>
+				<a
+					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
+					>Verbrauchsausweis erstellen</a
+				>
+			</li>
+			<li>
+				<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
+					>Bedarfsausweis erstellen</a
+				>
+			</li>
+			<li>
+				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
+					>Verbrauchsausweis Gewerbe erstellen</a
+				>
+			</li>
+		</ul>
+	</div>
+
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		class="nav-element dropdown lg:dropdown-right"
+		on:click={dropdown}
+		on:keydown={dropdown}
+		on:mouseover={hover}
+		on:mouseleave={hoverout}
+	>
+		{#if innerWidth > 1023}
+			<a href={undefined} class="nav-element-child"
+				>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
+					class="dd-symbol">❯</span
+				></a
+			>
+		{:else}
+			<a href={undefined} class="nav-element-child"
+				>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
+					class="dd-symbol">❯</span
+				></a
+			>
+		{/if}
+
+		<ul class="dropdown-content angebot-anfragen">
+			{#if innerWidth < 1023}
+				<li>
+					<a href="/energieausweis-erstellen">Angebot anfragen</a>
+				</li>
+			{/if}
+			<li>
+				<a
+					href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen"
+					>Bedarfsausweis Gewerbe anfragen</a
+				>
+			</li>
+			<li>
+				<a href="/angebot-anfragen/geg-nachweis-wohnen-anfragen"
+					>GEG Nachweis Wohnen anfragen</a
+				>
+			</li>
+			<li>
+				<a href="/angebot-anfragen/geg-nachweis-gewerbe-anfragen"
+					>GEG Nachweis Gewerbe anfragen</a
+				>
+			</li>
+		</ul>
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
+			>Sanierungsfahrplan (iSFP)</a
+		>
+	</div>
+
+	<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
+		Produkte & Preise
+	</div>
+
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		class="nav-element dropdown lg:dropdown-right"
+		on:click={dropdown}
+		on:keydown={dropdown}
+		on:mouseover={hover}
+		on:mouseleave={hoverout}
+	>
+		<a href="/verbrauchsausweis/" class="nav-element-child"
+			>Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span
+				class="dd-symbol">❯</span
+			></a
+		>
+		<ul class="dropdown-content verbrauchsausweis">
+			{#if innerWidth < 1023}
+				<li><a href="index">Verbrauchsausweis</a></li>
+			{/if}
+			<li><a href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis Wohngebäude</a></li>
+			<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis online erstellen</a></li>
+			<li><a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis/">Häufige Fragen zum Verbrauchsausweis</a></li>
+			<li>
+				<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis/">Statistiken zum Verbrauchsausweis Wohngebäude</a
+				>
+			</li>
+			<li><a href="/verbrauchsausweis/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe</a></li>
+			<li>
+				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe online erstellen</a>
+			</li>
+			<li>
+				<a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe/">Häufige Fragen zum Verbrauchsausweis Gewerbe</a>
+			</li>
+			<li>
+				<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe/">Statistiken zum Verbrauchsausweis Gewerbe</a>
+			</li>
+		</ul>
+	</div>
+
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		class="nav-element dropdown lg:dropdown-right"
+		on:click={dropdown}
+		on:keydown={dropdown}
+		on:mouseover={hover}
+		on:mouseleave={hoverout}
+	>
+		<a href="/bedarfsausweis/" class="nav-element-child"
+			>Bedarfsausweis<span class="dd-symbol-clone">❯</span><span
+				class="dd-symbol">❯</span
+			></a
+		>
+		<ul class="dropdown-content bedarfsausweis">
+			{#if innerWidth < 1023}
+				<li><a href="/bedarfsausweis/">Bedarfsausweis</a></li>
+			{/if}
+			<li><a href="/bedarfsausweis/bedarfsausweis-wohngebaeude/">Bedarfsausweis Wohngebäude</a></li>
+			<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis online erstellen</a></li>
+			<li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis/">Häufige Fragen zum Bedarfsausweis</a></li>
+			<li>
+				<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis/">Statistiken zum Bedarfsausweis Wohngebäude</a>
+			</li>
+			<li><a href="/bedarfsausweis/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe</a></li>
+			<li><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen">Bedarfsausweis Gewerbe anfragen</a></li>
+			<li>
+				<a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe/">Häufige Fragen zum Bedarfsausweis Gewerbe</a>
+		</ul>
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
+			>Sanierungsfahrplan</a
+		>
+	</div>
+
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		class="nav-element dropdown lg:dropdown-right"
+		on:click={dropdown}
+		on:keydown={dropdown}
+		on:mouseover={hover}
+		on:mouseleave={hoverout}
+	>
+		<a href="/" class="nav-element-child"
+			>Energieausweis<span class="dd-symbol-clone">❯</span><span
+				class="dd-symbol">❯</span
+			></a
+		>
+		<ul class="dropdown-content energieausweis">
+			{#if innerWidth < 1023}
+				<li><a href="/energieausweis/">Energieausweis</a></li>
+			{/if}
+			<li><a href="/energieausweis/energieausweis-pflicht/">Energieausweis Pflicht</a></li>
+			<li><a href="/energieausweis/energieausweis-kosten/">Energieausweis Kosten</a></li>
+			<li><a href="/energieausweis/energieausweis-haus/">Energieausweis Haus</a></li>
+		</ul>
+	</div>
+
+	<!-- <div class="nav-element">
+		<a
+			class="no-dropdown nav-element-child"
+			href="/energieausweis-aussteller">Energieberater finden</a
+		>
+	</div> -->
+
+	<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
+		FAQ & Hilfe
+	</div>
+
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		class="nav-element dropdown lg:dropdown-right"
+		on:click={dropdown}
+		on:keydown={dropdown}
+		on:mouseover={hover}
+		on:mouseleave={hoverout}
+	>
+		{#if innerWidth > 1023}
+			<a href="/bestellprozess-energieausweis" class="nav-element-child"
+				>Bestellprozess Energieausweis<span class="dd-symbol-clone"
+					>❯</span
+				><span class="dd-symbol">❯</span></a
+			>
+		{:else}
+			<a href="/bestellprozess-energieausweis" class="nav-element-child"
+				>Bestellprozess Energieausweis<span class="dd-symbol-clone"
+					>❯</span
+				><span class="dd-symbol">❯</span></a
+			>
+		{/if}
+
+		<ul class="dropdown-content bestellprozess-energieausweis">
+			{#if innerWidth < 1023}
+				<li>
+					<a href="/bestellprozess-energieausweis"
+						>Bestellprozess Energieausweis</a
+					>
+				</li>
+			{/if}
+			<li>
+				<a
+					href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/"
+					>Merkblatt Verbrauchsausweis Wohnen</a
+				>
+			</li>
+			<li>
+				<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
+					>Merkblatt Bedarfsausweis Wohnen</a
+				>
+			</li>
+			<li>
+				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
+					>Merkblatt Verbrauchsausweis Gewerbe</a
+				>
+			</li>
+		</ul>
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child" href="/geg/"
+			>Gebäudeenergiegesetz (GEG)</a
+		>
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung/"
+			>EnEV Zusammenfassung - Archiv</a
+		>
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child" href="/faq/">FAQ</a>
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child" href="/glossar/">Glossar</a>
+	</div>
+
+	<div class="nav-element">
+		<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
+			>Kundenbewertungen</a
+		>
+	</div>
+	<!-- <div class="nav-element">
+		<a
+			class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"
+			href="/fuer-entwickler/">Für Entwickler</a
+		>
+	</div> -->
+</nav>
+
+<style lang="scss">
+	.dd-symbol::before {
+		content: "❯";
+		font-size: 0.95rem;
+		position: absolute;
+		top: 0px;
+		left: -7px;
+		animation-name: flim;
+		animation-duration: 2s;
+		animation-iteration-count: infinite;
+	}
+
+	.dd-symbol {
+		visibility: hidden;
+	}
+
+	.dd-symbol::after {
+		content: "❯";
+		font-size: 0.95rem;
+		position: absolute;
+		top: 0px;
+		right: -7px;
+		animation-name: flim;
+		animation-duration: 2s;
+		animation-delay: 1s;
+		animation-iteration-count: infinite;
+	}
+
+	@keyframes flim {
+		0% {
+			opacity: 0;
+		}
+		16.66% {
+			opacity: 0.25;
+		}
+		33.32% {
+			opacity: 0.5;
+		}
+		49.98% {
+			opacity: 0.75;
+		}
+		66.64% {
+			opacity: 0.5;
+		}
+		83.33% {
+			opacity: 0.25;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+</style>
diff --git a/src/layouts/AusweisLayoutDaten.astro b/src/layouts/AusweisLayoutDaten.astro
index 1cb6f21f..26f89450 100644
--- a/src/layouts/AusweisLayoutDaten.astro
+++ b/src/layouts/AusweisLayoutDaten.astro
@@ -2,7 +2,7 @@
 import "../style/global.css";
 import "../style/formular.css";
 import "../../svelte-dialogs.config";
-import Header from "#components/design/header/AusweisHeader.astro";
+import Header from "#components/design/header/Header.astro";
 import Footer from "#components/design/footer/Footer.astro";
 import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
 import { NotificationWrapper } from "@ibcornelsen/ui";
@@ -128,7 +128,7 @@ const { title } = Astro.props;
 		>
 			<SidebarLeft />
 
-			<article class="box rounded-tl-none p-2 lg:p-12">
+			<article class="">
 				<slot />
 			</article>
 		</main>
diff --git a/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte b/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
index 60631cfc..e3e87098 100644
--- a/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
+++ b/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
-	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
 	//import Hilfe from "#components/Ausweis/Hilfe.svelte";
 	import { PRICES } from "#lib/constants.js";
 
@@ -160,26 +160,23 @@
 </script>
 
 
-<div id="skala" class="bg-white grid grid-cols-1 p-4
+<div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4 
 
 lg:grid-cols-2 lg:gap-x-6
 ">
 
-<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
+
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
 		bind:objekt={objekt}
 		{ausweisart}
 	/>
-</div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
-		
-	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
-	<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[Enums.AusweisTyp.Standard]} €</h2>
-	<ProgressBar step1={'step'}/>
-</div>
+
+
+	<Progressbar active={0} {ausweisart}/>
+
 
 </div>
 
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index 3357fd12..9aaa85f6 100644
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -75,13 +75,13 @@
 			selected: false,
 		},
 		{
-			name: "Same Day Service - Bestellung Werktags vor <b>12:00 Uhr</b><br>Ausstellung bis <b>18:00 Uhr</b> am gleichen Tag",
+			name: "Same Day Service - Bestellung Werktags vor <b>12:00&nbsp;Uhr</b><br>Ausstellung bis <b>18:00&nbsp;Uhr</b> am gleichen Tag",
 			id: Enums.Service.SameDay,
 			price: 29,
 			selected: false,
 		},
 		{
-			name: "Telefonische Energieeffizienzberatung",
+			name: "Telefonische Energie-Effizienzberatung",
 			id: Enums.Service.Telefonberatung,
 			price: 75,
 			selected: false,
@@ -330,34 +330,22 @@
 
 <div
 	id="skala"
-	class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
+	class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 px-0 sm:p-4
 
 2xl:grid-cols-2 2xl:gap-x-8
 "
 >
 	{#if !gegAnfrage}
-		<div
-			id="performance-box"
-			class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1"
-		>
+		
 			<PerformanceScore
 				bind:ausweis
 				bind:aufnahme
 				bind:objekt
 				{ausweisart}
 			/>
-		</div>
 	{/if}
 
-	<div
-		id="progress-box"
-		class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch"
-	>
-		<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
-		<h2 class="text-primary text-xl">
-			{ausweisart}
-			{prices[ausweistyp]} €
-		</h2>
+	
 		{#if gegAnfrage}
 			<Progressbar
 				active={1}
@@ -367,7 +355,7 @@
 			<Progressbar active={1} />
 		{/if}
 	</div>
-</div>
+
 
 <form id="formInput-2" bind:this={form}>
 	<div id="formular-box" class="formular-boxen ring-0">
@@ -387,7 +375,7 @@
 				<div
 					id="bezahlung"
 					class="bereich-box grid
-grid-cols-5 justify-around justify-items-center items-center"
+grid-cols-3 sm:grid-cols-5 justify-around justify-items-center items-center"
 				>
 					<PaymentOption
 						bezahlmethode={Enums.Bezahlmethoden.paypal}
@@ -421,7 +409,7 @@ grid-cols-5 justify-around justify-items-center items-center"
 					></PaymentOption>
 				</div></Bereich
 			>
-			<div class="grid grid-cols-2 gap-x-6 my-6">
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 my-6">
 				<div class="zusaetze bereich-box bg-white">
 					<h3>Zusatzleistungen:</h3>
 
@@ -432,7 +420,7 @@ grid-cols-5 justify-around justify-items-center items-center"
 								bind:checked={service.selected}
 							/>
 							<div class="text-right pr-6">
-								<b>{@html service.price} €</b> inkl. Mwst
+								<b>{@html service.price} €</b> inkl.&nbsp;Mwst
 							</div>
 							<div>{@html service.name}</div>
 						</div>
@@ -493,24 +481,25 @@ grid-cols-5 justify-around justify-items-center items-center"
 		{/if}
 
 		<div
-			class="w-full grid grid-cols-[min-content_1fr_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
+			class="grid grid-cols-1 gap-x-2 gap-y-1 self-start mt-0
+sm:grid-cols-[min-content_min-content_min-content] sm:justify-self-end sm:mt-8"
 		>
-			<a class="button justify-self-start" href={zurueck}>Zurück</a>
+			<a class="order-3 sm:order-1 button cursor-pointer text-center sm:text-start" href={zurueck}>Zurück</a>
 
-			<div></div>
+			
 
-			<button class="button" type="button">Speichern</button>
+			<button class="order-2 button" type="button">Speichern</button>
 
 			{#if gegAnfrage}
 				<button
-					class="button cursor-pointer"
+					class="order-1 sm:order-2 button cursor-pointer"
 					type="button"
 					data-cy="bestellen"
 					on:click={anfordern}>Angebot anfordern</button
 				>
 			{:else}
 				<button
-					class="button cursor-pointer"
+					class="order-1 sm:order-2 button cursor-pointer"
 					data-cy="bestellen"
 					type="button"
 					on:click={bestellen}>Kostenpflichtig bestellen</button
@@ -529,146 +518,17 @@ grid-cols-5 justify-around justify-items-center items-center"
 
 <NotificationWrapper></NotificationWrapper>
 
-<!--
-		<div class="bereich-box pr-12 mt-6">
-			<Pruefung
-				bereich="A"
-				title="Prüfung der Ausweisart"
-				bullets={[
-					["Vermietung, Verkauf oder sonstiges.", false],
-					[
-						"Baujahr Heizung nicht kleiner als Baujahr Gebäude.",
-						false,
-					],
-					[
-						"Baujahr nach 1977 oder saniert oder mehr als 4 Wohneinheiten",
-						false,
-					],
-					["Heizung min. 3 Jahre alt.", false],
-					["Verbrauchsausweis zulässig.", false],
-				]}
-			></Pruefung>
 
-			<Pruefung
-				bereich="B"
-				title="Prüfung der Adresse, Wohnfläche, Keller und Dach"
-				bullets={[
-					["PLZ gültig.", false],
-					["Klimafaktorern.", false],
-					["Wohnfläche passt zu Wohneinheiten", false],
-				]}
-			></Pruefung>
-
-			<Pruefung
-				bereich="C"
-				title="Prüfung der Verbrauchsangaben"
-				bullets={[
-					["Verbrauchsmenge schlüssig.", false],
-					["Verbrauchsabweichung im Rahmen.", false],
-					["Endenergieverbrauch schlüssig", false],
-				]}
-			></Pruefung>
-
-			<Pruefung
-				bereich="D"
-				title="Prüfung Warmwasser und alternative Energieversorgung"
-				bullets={[
-					["Warmwasseranteil schlüssig.", false],
-					["Verbrauchsabweichung im Rahmen.", false],
-					["Endenergieverbrauch schlüssig", false],
-				]}
-			></Pruefung>
-
-			<Pruefung
-				bereich="E"
-				title="Prüfung von Gebäudetyp, Lüftung, Kühlung und Leerstand"
-				bullets={[["Leerstand nicht größer als 30%.", false]]}
-			></Pruefung>
-
-			<Pruefung
-				bereich="F"
-				title="Prüfung des Sanierungsstandes und der Gebäudebilder"
-				bullets={[
-					["Mindestens ein Bild pro Abschnitt vorhanden.", false],
-					["Angaben zum Sanierungsstand vorhanden.", false],
-					[
-						"Bei Baujahr vor 1978 Dach oder Geschossdecke min. 12 cm gedämmt.",
-						false,
-					],
-				]}
-			></Pruefung>
-		</div>
-	</div>
-
-	<div class="varianten bereich-box bg-white">
-		<h3>Hiermit bestelle ich folgende Version des Energieausweises:</h3>
-
-		<div class="variante">
-			<input
-				type="radio"
-				bind:group={basePrice}
-				value={prices[0]}
-				name="Preis"
-				checked
-			/>
-			<div class="text-right pr-4"><b>{prices[0]} €</b> inkl. MwSt.</div>
-			<div>Verbrauchsausweis online als PDF per E-Mail</div>
-		</div>
-
-		<div class="variante">
-			<input
-				type="radio"
-				bind:group={basePrice}
-				value={prices[1]}
-				name="Preis"
-			/>
-			<div class="text-right pr-4"><b>{prices[1]} €</b> inkl. MwSt.</div>
-			<div>
-				Verbrauchsausweis online inkl. Beratung als PDF per E-Mail
-			</div>
-		</div>
-
-		<div class="variante">
-			<input
-				type="radio"
-				bind:group={basePrice}
-				value={prices[2]}
-				name="Preis"
-			/>
-			<div class="text-right pr-4"><b>{prices[2]} €</b> inkl. MwSt.</div>
-			<div>
-				Verbrauchsausweis offline als PDF per E-Mail (Sie schicken uns 3
-				Verbrauchsabrechnungen)
-			</div>
-		</div>
-	</div>
-
-	<div class="zusaetze bereich-box bg-white">
-		<h3>Zusatzleistungen</h3>
-
-		{#each services as service}
-			<div class="zusatz">
-				<input type="checkbox" bind:checked={service.selected} />
-				<div class="text-right pr-6">
-					<b>{@html service.price} €</b> inkl. Mwst
-				</div>
-				<div>{@html service.name}</div>
-			</div>
-		{/each}
-	</div>
-<ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->
-
-<!-- <ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->
 
 <style lang="postcss">
 	h3 {
-		@apply text-[1.25rem] ml-0 font-bold mb-6;
+		@apply text-[1.25rem] ml-0 pl-0 font-bold mb-6;
 	}
 
 	.ProduktKostenTabelle {
-		@apply block;
+		@apply block mt-6 sm:mt-0;
 		.zeile {
-			@apply grid grid-cols-[19rem_1rem_5rem_1fr];
+			@apply grid grid-cols-[9rem_1rem_5rem_1fr] sm:grid-cols-[19rem_1rem_5rem_1fr];
 		}
 		.betrag {
 			@apply font-bold text-[1.15rem];
@@ -688,7 +548,7 @@ grid-cols-5 justify-around justify-items-center items-center"
 	.zusaetze {
 		@apply block;
 		.zusatz {
-			@apply grid grid-cols-[40px_8rem_1fr] items-start pb-3;
+			@apply grid grid-cols-[10px_6rem_1fr] sm:grid-cols-[40px_8rem_1fr] items-start pb-3;
 			input {
 				@apply mt-[4px];
 			}
diff --git a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
index 6bd367c8..3182e4b6 100644
--- a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -117,28 +117,23 @@
 </script>
 
 
-<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
+<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 px-0 sm:p-4
 
 2xl:grid-cols-2 2xl:gap-x-8
 ">
 
-<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
+
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
 		bind:objekt={objekt}
 		{ausweisart}
 	/>
+
+	<Progressbar active={0} {ausweisart}/>
 </div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
-		
-	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
-	<h2 class="text-primary text-xl">Verbrauchsausweis Gewerbe {PRICES.VerbrauchsausweisGewerbe[Enums.AusweisTyp.Standard]} €</h2>
-	<Progressbar active={0} />
-</div>
 
-</div>
 
 
 
diff --git a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
index 30560c2f..ab7b6b3a 100644
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
@@ -164,23 +164,22 @@ const ausweisart = Enums.Ausweisart.VerbrauchsausweisWohnen
 
 
 
-<div id="skala" class="bg-white grid grid-cols-1 p-4 lg:grid-cols-2 lg:gap-x-6">
+<div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4 lg:grid-cols-2 lg:gap-x-6">
+
 
-<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
 		bind:objekt={objekt}
 		{ausweisart}
 	/>
-</div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
-		
-	<h1 class="text-secondary text-3xl m-0">Energieausweis erstellen</h1>
-	<h2 class="text-primary text-xl">{ausweisart} {PRICES[ausweisart][ausweistyp]} €</h2>
-	<Progressbar active={0}/>
-</div>
+
+
+
+	<Progressbar active={0} {ausweisart}/>
+
+
 
 </div>
 
diff --git a/src/modules/angebot-anfragen/GEGNachweisGewerbeModule.svelte b/src/modules/angebot-anfragen/GEGNachweisGewerbeModule.svelte
index 5dc88cdf..ff0940a3 100644
--- a/src/modules/angebot-anfragen/GEGNachweisGewerbeModule.svelte
+++ b/src/modules/angebot-anfragen/GEGNachweisGewerbeModule.svelte
@@ -80,7 +80,7 @@
 >
 	<div
 		id="progress-box"
-		class="w-full box relative px-4 py-3 text-center order-2 self-stretch"
+		class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch"
 	>
 		<h1 class="text-secondary text-3xl m-0">GEG Nachweis Anfragen</h1>
 		<h2 class="text-primary text-xl">Verbrauchsausweis Wohnen</h2>
diff --git a/src/modules/angebot-anfragen/GEGNachweisWohnenModule.svelte b/src/modules/angebot-anfragen/GEGNachweisWohnenModule.svelte
index be9c4fee..17735613 100644
--- a/src/modules/angebot-anfragen/GEGNachweisWohnenModule.svelte
+++ b/src/modules/angebot-anfragen/GEGNachweisWohnenModule.svelte
@@ -81,7 +81,7 @@
 >
 	<div
 		id="progress-box"
-		class="w-full box relative px-4 py-3 text-center order-2 self-stretch"
+		class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch"
 	>
 		<h1 class="text-secondary text-3xl m-0">GEG Nachweis Anfragen</h1>
 		<h2 class="text-primary text-xl">GEG-Nachweis Wohngebäude</h2>
diff --git a/src/style/formular.css b/src/style/formular.css
index c1cd92eb..03689b75 100644
--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -3,7 +3,7 @@
 }
 
 .formular-boxen {
-	@apply w-full ml-[2px] ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg;
+	@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg;
 }
 
 .formular-abschnitt1 {
diff --git a/src/style/global.css b/src/style/global.css
index 924dd736..72ed0704 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -76,12 +76,16 @@ input:disabled, input:read-only {
 /*ARTICLE*/
 
 article {
-	@apply w-full relative bg-white px-0 py-0 z-0;
+	@apply w-full relative bg-white p-0 z-0 box rounded-tl-none sm:p-2 lg:p-12;
 
 	hr {@apply mb-4 mt-4 border-primary;}
 
-	h1 {@apply pl-2 sm:pl-0 text-4xl font-normal mb-2;}
-	h2{@apply pl-2 sm:pl-0 text-2xl font-normal mb-2;}
+	h1 {@apply pl-2 font-normal mb-2
+		 [font-size:_clamp(24px,1.5vw,36px)] leading-7 
+		 sm:text-4xl;}
+	h2 {@apply pl-2 font-normal mb-2
+		[font-size:_clamp(24px,1.5vw,36px)] leading-7 
+		sm:text-4xl;}
 	h3 {@apply pl-2 sm:pl-0 text-xl font-normal ml-1 mb-1;}
 	
 	a {@apply text-blue-700 font-medium inline;}
@@ -154,6 +158,7 @@ article {
 					xl:text-lg
 }
 
+
 .dropdown-content{
 		@apply		!relative z-[1] !p-0 !scale-100 hidden
 					lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
@@ -174,8 +179,9 @@ li:not(:first-child)	{@apply		!border-gray-200 !border-t-[1px]}
 
 #hamburger{
 	@apply my-1;
-	span 				{@apply  block h-[3px] w-6 bg-white !transition-all}
-	span:nth-child(2)	{@apply my-1}
+	.burger				{@apply w-6}
+	span 				{@apply  block h-[4px] bg-white !transition-all}
+	span:nth-child(2)	{@apply my-[3px]}
 }
 
 .hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px]  !transition-all duration-500}