From ea9bba258649e978675f64f0a2b5bff40b5e6438 Mon Sep 17 00:00:00 2001
From: Robert Jagtiani <all@robert-jagtiani.de>
Date: Fri, 3 Jan 2025 00:54:36 +0100
Subject: [PATCH 1/2] progress, performance & buttons

---
 public/images/header/logo-IBC-white.svg       |  23 ++++
 .../Ausweis/ButtonSpaeterHilfe.svelte         |  35 +++---
 .../Ausweis/ButtonWeiterHilfe.svelte          |  37 ++++++
 src/components/Ausweis/HeizungImage.svelte    |   2 +-
 src/components/Ausweis/Hilfe.svelte           | 107 +++++++++++-------
 .../Ausweis/PerformanceScore.svelte           |   7 +-
 src/components/Ausweis/Progressbar.svelte     |  50 ++++----
 .../design/header/AusweisHeader.astro         |  86 ++++++++++++++
 .../design/header/HeaderLogin.svelte          |   4 +-
 src/components/design/header/Header_1.astro   |  68 -----------
 .../design/sidebars/cards/cardLogin.svelte    |   2 +-
 src/components/labels/BereichLabel.svelte     |   4 +-
 src/layouts/AusweisLayout.astro               |  46 +++++++-
 src/layouts/Layout.astro                      |  30 ++---
 .../VerbrauchsausweisWohnenModule.svelte      |  78 +++++++------
 src/style/formular.css                        |   4 +-
 src/style/global.css                          |   4 +-
 tailwind.config.cjs                           |   3 +-
 18 files changed, 383 insertions(+), 207 deletions(-)
 create mode 100644 public/images/header/logo-IBC-white.svg
 create mode 100644 src/components/Ausweis/ButtonWeiterHilfe.svelte
 create mode 100644 src/components/design/header/AusweisHeader.astro
 delete mode 100644 src/components/design/header/Header_1.astro

diff --git a/public/images/header/logo-IBC-white.svg b/public/images/header/logo-IBC-white.svg
new file mode 100644
index 00000000..30a811a9
--- /dev/null
+++ b/public/images/header/logo-IBC-white.svg
@@ -0,0 +1,23 @@
+<?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">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #dae6f7;
+      }
+    </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="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/src/components/Ausweis/ButtonSpaeterHilfe.svelte b/src/components/Ausweis/ButtonSpaeterHilfe.svelte
index 075016c3..4fd4c46c 100644
--- a/src/components/Ausweis/ButtonSpaeterHilfe.svelte
+++ b/src/components/Ausweis/ButtonSpaeterHilfe.svelte
@@ -6,23 +6,26 @@
 
 <!-- Später weitermachen / Hilfe anfordern -->
 
-<div
-	class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
-grid-cols-1
-xs:grid-cols-2
-"
->
-	<div class="md:justify-self-start">
-		<button class="button" type="button" on:click={spaeterWeitermachen}
-			>Später Weitermachen
-		</button>
-	</div>
 
-	<div class="md:justify-self-end"><Hilfe /></div>
-</div>
 
-<div class="mt-2 px-4">
-	<button class="button" on:click={automatischAusfüllen} type="button"
-		>Automatisch Ausfüllen
+
+<div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
+	
+	<div></div>
+
+	<button class="invisible button" on:click={automatischAusfüllen} type="button"
+	>Automatisch Ausfüllen
 	</button>
+
+	<Hilfe />
+
+	<button class="button"  type="button" on:click={spaeterWeitermachen}
+	>Später Weitermachen
+	</button>
+
+
 </div>
+
+
+
+
diff --git a/src/components/Ausweis/ButtonWeiterHilfe.svelte b/src/components/Ausweis/ButtonWeiterHilfe.svelte
new file mode 100644
index 00000000..5337f042
--- /dev/null
+++ b/src/components/Ausweis/ButtonWeiterHilfe.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import AusweisWeiter from "#modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+    
+	export let ausweis;
+	export let images;
+	export let user;
+	export let gebaeude;
+	export let gebaeude_aufnahme_allgemein;
+
+	export let spaeterWeitermachen;
+
+</script>
+
+
+<div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
+	
+	<div></div>
+	
+	<Hilfe />
+
+	<button class="button"  type="button" on:click={spaeterWeitermachen}
+	>Später Weitermachen
+	</button>
+
+		<div class="">
+			<AusweisWeiter
+				bind:ausweis
+				bind:images
+				bind:user
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+			></AusweisWeiter>
+		</div>
+
+		
+	</div>
\ No newline at end of file
diff --git a/src/components/Ausweis/HeizungImage.svelte b/src/components/Ausweis/HeizungImage.svelte
index 448cfacf..33f77641 100644
--- a/src/components/Ausweis/HeizungImage.svelte
+++ b/src/components/Ausweis/HeizungImage.svelte
@@ -10,7 +10,7 @@
 
 <div class="grid grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="box card mb-0">
+	<div id="getWidth" class="box card mb-0">
 
 
 		<p class="font-bold mb-2">
diff --git a/src/components/Ausweis/Hilfe.svelte b/src/components/Ausweis/Hilfe.svelte
index 99152ca6..cce9fb9d 100644
--- a/src/components/Ausweis/Hilfe.svelte
+++ b/src/components/Ausweis/Hilfe.svelte
@@ -1,15 +1,24 @@
 <script lang="ts">
+	import { PRICES } from "#lib/constants";
+	
 	let showHelp: boolean = false;
+
 </script>
 
 <div>
 	<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
-		>Hilfe anfordern</button
-	>
+		>Hilfe anfordern</button>
+</div>
 
-	{#if showHelp}
-		<div>
-			<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"
@@ -20,41 +29,61 @@
 				Auswahl und klicken auf weiter:
 			</div>
 
-			<div class="flex flex-row justify-between mx-4 my-2">
-				<div class="form-group col-md-7">
-					Verbrauchsausweis online inkl. ausführlicher telefonischer
-					Beratung für 60 € inkl. MwSt.
-				</div>
-				<div class="form-group col-md-5">
-					<input
-						type="radio"
-						class="IGanlass"
-						id="Produkttb1"
-						value="ptb"
-						name="Produkt"
-					/>
-				</div>
-			</div>
-			<div class="flex flex-row justify-between mx-4 my-2">
-				<div class="form-group col-md-7">
-					Verbrauchsausweis offline für 180 € inkl. MwSt. (Sie
-					schicken uns 3 Verbrauchsabrechnungen zu)
-				</div>
-				<div class="form-group col-md-5">
-					<input
-						type="radio"
-						class="IGanlass"
-						id="Produktof1"
-						value="pof"
-						name="Produkt"
-					/>
-				</div>
-			</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="ptb"
+					name="Produkt"
+				/>
+		
+				<div class="justify-self-stretch">
+					Verbrauchsausweis online inkl. ausführlicher telefonischer Beratung  
+				</div>
+
+				<div class="text-right">
+					<b>{PRICES.VerbrauchsausweisWohnen[1]} €</b> inkl. MwSt.
+				</div>
 
-			<div style="text-align:right;">
-				<button>Weiter</button>
 			</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="pof"
+					name="Produkt"
+				/>
+		
+				<div>
+					Verbrauchsausweis offline (Sie schicken uns 3 Verbrauchsabrechnungen zu)  
+				</div>
+
+				<div class="text-right">
+					<b>{PRICES.VerbrauchsausweisWohnen[2]} €</b> inkl. MwSt.
+				</div>
+
+			</div>
+
+			<hr class="m-0">
+
+			<button class="button">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>
-	{/if}
+				
+			
 </div>
+
+
+
+
+
+	{/if}
+
diff --git a/src/components/Ausweis/PerformanceScore.svelte b/src/components/Ausweis/PerformanceScore.svelte
index fa61287b..93ed3cd7 100644
--- a/src/components/Ausweis/PerformanceScore.svelte
+++ b/src/components/Ausweis/PerformanceScore.svelte
@@ -78,9 +78,8 @@
 		})();
 	}
 </script>
-
-
-	<img class="" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
+<div class="self-center relative">
+	<img id="skalaImage" class="w-full" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
 	<ThickArrowDown
 		size={28}
 		class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
@@ -103,4 +102,4 @@
 			100
 		)}%)"
 	/>
-
+</div>
diff --git a/src/components/Ausweis/Progressbar.svelte b/src/components/Ausweis/Progressbar.svelte
index 72abecec..def70d3d 100644
--- a/src/components/Ausweis/Progressbar.svelte
+++ b/src/components/Ausweis/Progressbar.svelte
@@ -3,33 +3,39 @@
 </script>
 
 
-	<div class="progress-section">
-		<div class="w-full bg-gray-100 absolute h-3 rounded-lg">
+
+<div class="grid grid-cols-3 self-start">
+
+	<div class="col-span-3 relative">
+
+		<div class="w-[calc(100%-5rem)] ml-[2.5rem] absolute mt-[0.5rem] bg-gray-200  h-3 rounded-lg">
 			<div class="bg-green-600 left-0 h-3 absolute" style={`width: ${progress}%;`}></div>
 		</div>
-		<span>1</span>
-		<span>2</span>
-		<span>3</span>
-	</div>
+	
+	</div>	
 
-	<div class="flex flex-row justify-between">
-		<div>Gebäudedaten</div>
-		<div>Prüfung</div>
-		<div>Kaufabschluss</div>
-	</div>
+<div class="phase justify-self-start">
+	<div class="point">1</div>
+	<div class="">Gebäudedaten</div>
+</div>
+
+<div class="phase">
+	<div class="point">2</div>
+	<div class="">Prüfung</div>
+</div>
+
+<div class="phase justify-self-end">
+	<div class="point">3</div>
+	<div class="">Kaufabschluss</div>
+</div>
+
+</div>
 
 
-<style>
-	.progress-section {
-		@apply relative items-center flex flex-row justify-between px-0;
-	}
 
-	.progress-section span {
-		@apply rounded-full bg-green-600 items-center relative flex h-8 w-8 justify-center text-white font-semibold;
-	}
+<style lang="postcss">
+.phase{@apply grid grid-cols-1 items-center justify-items-center z-10;
+.point{@apply rounded-full w-8 h-8 text-white font-bold bg-secondary text-center pt-1 ring-white ring-4;}
+}
 
-	p {
-		padding: 0 !important;
-		@apply p-0;
-	}
 </style>
\ No newline at end of file
diff --git a/src/components/design/header/AusweisHeader.astro b/src/components/design/header/AusweisHeader.astro
new file mode 100644
index 00000000..42bc69cb
--- /dev/null
+++ b/src/components/design/header/AusweisHeader.astro
@@ -0,0 +1,86 @@
+---
+import HeaderLogin from "#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/header/HeaderLogin.svelte b/src/components/design/header/HeaderLogin.svelte
index 129f04e4..918839cd 100644
--- a/src/components/design/header/HeaderLogin.svelte
+++ b/src/components/design/header/HeaderLogin.svelte
@@ -22,7 +22,7 @@
 
 <div
 	id="card-login"
-	class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2"
+	class="rounded-none lg:rounded-lg lg:card lg:box lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2"
 >
 	<form on:submit={login}>
 		<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
@@ -62,7 +62,7 @@
 				</div>
 			{/if}
 
-			<button class="button self-center" type="submit">login</button>
+			<button id="LoginButton" class="button self-center" type="submit">login</button>
 		</div>
 
 		<div
diff --git a/src/components/design/header/Header_1.astro b/src/components/design/header/Header_1.astro
deleted file mode 100644
index 62409eea..00000000
--- a/src/components/design/header/Header_1.astro
+++ /dev/null
@@ -1,68 +0,0 @@
-<header class="max-w-[1920px] w-full relative bg-white
-md:bg-[url('/images/header/header-bg.jpg')] 
-md:bg-cover md:grid md:grid-cols-2
-lg:grid lg:grid-cols-3">
-
-
-
-	<div class="
-	justify-self-center px-2 py-2
-	xs:px-6 xs:py-4
-	md:px-4 md:py-4
-	md:col-end-4 md:justify-self-end 
-	xl:my-4 xl:mr-9 xl:p-0">
-
-	
-		<a href="/">
-			<img class="
-			w-full
-			md:w-[350px]
-			lg:w-[420px]" 
-			src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
-		</a>
-		
-		<h2 class="text-secondary font-normal absolute
-					top-1 right-2 text-[1.1rem]
-					xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
-					
-					md:top-[1.25rem] md:right-4 md:text-[1.1rem]
-					xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
-					Energieausweis online erstellen
-		</h2>
-				
-		<h2	class="text-primary font-normal absolute 
-					top-[1.6rem] right-2 text-[0.85rem]
-					xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
-					
-					md:top-[2.5rem] md:right-4 md:text-[0.9rem]
-					xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
-					Energieausweise nach aktuellem GEG
-		</h2>
-		
-	</div>
-
-	<div class="col-start-1 col-span-3">
-		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
-					lg:h-[14px] xl:h-[18px]">
-
-			<!-- <a
-				class="header-button hidden md:block"
-				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
-				>Energieausweis erstellen</a
-			>
-			<a class="header-button hidden md:block" href="/kontakt"
-				>Kontakt</a
-			>
-			<a class="header-button hidden md:block" href="/agb">AGB</a>
-				-->
-				
-		</div>
-	</div>
-
-</header>
-
-<style>
-	.header-button {
-		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
-	}
-</style>
\ No newline at end of file
diff --git a/src/components/design/sidebars/cards/cardLogin.svelte b/src/components/design/sidebars/cards/cardLogin.svelte
index 22d13e27..cb99ea29 100644
--- a/src/components/design/sidebars/cards/cardLogin.svelte
+++ b/src/components/design/sidebars/cards/cardLogin.svelte
@@ -87,7 +87,7 @@
 			>
 		</div>
 
-		<div></div>
+	
 	</div>
 </div>
 
diff --git a/src/components/labels/BereichLabel.svelte b/src/components/labels/BereichLabel.svelte
index 134a6bc3..8c61093b 100644
--- a/src/components/labels/BereichLabel.svelte
+++ b/src/components/labels/BereichLabel.svelte
@@ -27,8 +27,9 @@
 		>
 			<div class="formular-abschnitt1">{bereich}</div>
 			<div class="formular-abschnitt2"><slot></slot></div>
+
 			<div
-				class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
+				class="justify-self-center self-center mr-[2px] cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
 				on:click={toggleBereich}
 			>
 				{#if open}
@@ -36,6 +37,7 @@
 				{:else}
 					+
 				{/if}
+
 			</div>
 		</div>
 	</div>
diff --git a/src/layouts/AusweisLayout.astro b/src/layouts/AusweisLayout.astro
index 5d774073..37067262 100644
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -2,7 +2,7 @@
 import "../style/global.css";
 import "../style/formular.css";
 import "../../svelte-dialogs.config"
-import Header from "#header/Header.astro";
+import Header from "#header/AusweisHeader.astro";
 import Footer from "#footer/Footer.astro";
 import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
 import { NotificationWrapper } from "@ibcornelsen/ui";
@@ -12,9 +12,49 @@ export interface Props {
 }
 
 const { title } = Astro.props;
-
-
 ---
+<script>
+window.addEventListener("scroll", (event) => {
+    let scroll = window.scrollY;
+
+
+
+console.log(scroll);
+	if(scroll>=400){
+
+		document.getElementById('skala')?.classList.add('2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20');
+		document.getElementById('skala')?.classList.remove('w-full');
+
+
+		document.getElementById('skala').style.borderBottom = "3px solid #e6e6e6";
+
+
+		document.getElementById('performance-box').style.maxWidth = "688.5px";
+		document.getElementById('progress-box').style.maxWidth = "688.5px";
+
+		document.getElementById('formInput')?.classList.add('2xl:mt-[370px]');
+		
+
+
+
+	}else{
+
+		document.getElementById('skala')?.classList.remove('2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20');
+		document.getElementById('skala')?.classList.add('w-full');
+		
+		document.getElementById('skala').style.borderBottom = "none";
+
+		document.getElementById('formInput')?.classList.remove('2xl:mt-[370px]');
+
+
+
+
+	}
+    
+
+});
+
+</script>
 
 <!DOCTYPE html>
 <html lang="de">
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c5b4545b..52779dad 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -15,6 +15,7 @@ const { title } = Astro.props;
 ---
 
 <script>
+/*
 window.addEventListener("scroll", (event) => {
     let scroll = window.scrollY;
 
@@ -25,19 +26,20 @@ window.addEventListener("scroll", (event) => {
 		document.getElementById('header').style.width = '100%';
 		document.getElementById('header').style.top = '0';
 
-		document.getElementById('header-grid')?.classList.add('2xl:py-0');
-		document.getElementById('header-grid')?.classList.remove('2xl:py-4')
-		document.getElementById('header-grid')?.classList.remove('bg-white');
+		document.getElementById('header-grid').classList.add('2xl:py-0');
+		document.getElementById('header-grid').classList.remove('2xl:py-4')
+		document.getElementById('header-grid').classList.remove('bg-white');
 
-		document.getElementById('header-grid')?.classList.add('bg-secondary');
-		document.getElementById('header-text-1')?.classList.add('text-white');
-		document.getElementById('header-text-1')?.classList.add('hidden');
-		document.getElementById('header-text-2')?.classList.add('hidden');
-		document.getElementById('header-line')?.classList.add('xl:h-[6px]');
+		document.getElementById('header-grid').classList.add('bg-secondary');
+		document.getElementById('header-text-1').classList.add('hidden');
+		document.getElementById('header-text-2').classList.add('hidden');
+		document.getElementById('header-line').classList.add('xl:h-[6px]');
+		document.getElementById('header-logo').src= '/images/header/logo-IBC-white.svg';
 		document.getElementById('header-logo').style.height = '62px';
-		document.getElementById('header-logo')?.classList.add('xl:bg-white','xl:px-2');
+		document.getElementById('header-logo').classList.add('xl:px-2','py-[5px]');
 ;
-		document.getElementById('card-login')?.classList.remove('lg:ring-2');
+		document.getElementById('card-login').classList.remove('lg:ring-2','box');
+		document.getElementById('LoginButton')?.classList.add('ring-[1px]','ring-white');
 		document.getElementById('passwort-vergessen')?.classList.add('hidden');
 
 		document.getElementById('main').style.marginTop = '211px';
@@ -53,15 +55,17 @@ window.addEventListener("scroll", (event) => {
 
 		document.getElementById('header-grid')?.classList.add('bg-white');
 		document.getElementById('header-grid')?.classList.remove('bg-secondary');
-
+		document.getElementById('header-text-1').classList.remove('hidden');
 		document.getElementById('header-text-1')?.classList.remove('text-white');
-		document.getElementById('header-text-1')?.classList.remove('hidden');
+		document.getElementById('header-text-1').classList.add('xl:leading-[4.5rem]');
 		document.getElementById('header-text-2')?.classList.remove('hidden');
 		document.getElementById('header-line')?.classList.remove('xl:h-[6px]');
+		document.getElementById('header-logo').src= '/images/header/logo-IBC-big.svg';
 		document.getElementById('header-logo').style.height = '107.53px';
 		document.getElementById('header-logo')?.classList.remove('xl:bg-white','xl:px-2');
 
 		document.getElementById('card-login')?.classList.add('lg:ring-2');
+		document.getElementById('LoginButton')?.classList.remove('ring-[1px]','ring-white');
 		document.getElementById('passwort-vergessen')?.classList.remove('hidden');
 
 		document.getElementById('main').style.marginTop = '0px';
@@ -70,7 +74,7 @@ window.addEventListener("scroll", (event) => {
     
 
 });
-
+*/
 </script>
 
 <!DOCTYPE html>
diff --git a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
index 92dd68c7..4657ba16 100644
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
 	import Progressbar from "#components/Ausweis/Progressbar.svelte";
-	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	//import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import { PRICES } from "#lib/constants";
 
 	import Bereich from "#labels/Bereich.svelte";
 	//import HelpLabel from "#labels/HelpLabel.svelte";
@@ -9,6 +10,7 @@
 	//import Label from "#components/Label.svelte";
 
 	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
+	import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
 	import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
@@ -55,7 +57,7 @@
 		UploadedGebaeudeBild,
 	} from "#components/Ausweis/types.js";
 	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
-	import AusweisWeiter from "./AusweisWeiter.svelte";
+	//import AusweisWeiter from "./AusweisWeiter.svelte";
 	import { Enums } from "@ibcornelsen/database/client";
 	import { OpenInNewWindow } from "radix-svelte-icons";
 
@@ -181,26 +183,42 @@
 	</p>
 </Overlay>
 
-<h1>Verbrauchsausweis erstellen - 45€</h1>
 
-<div class="grid grid-cols-2 gap-x-8 px-4 items-center">
-	<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
-		<Progressbar progress={0} />
-	</div>
 
-	<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
-		<PerformanceScore
-			bind:ausweis
-			bind:gebaeude_aufnahme_allgemein
-			bind:gebaeude
-		/>
-	</div>
+
+
+<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 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:gebaeude_aufnahme_allgemein
+		bind:gebaeude
+	/>
 </div>
 
-<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
+<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 Wohnen {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
+	<Progressbar progress={50} 
+	/>
+</div>
 
-<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+</div>
+
+
+
+<form id="formInput" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div id="formular-box" class="formular-boxen ring-0">
+
+
+
+		<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
+
 		<!-- A Prüfung der Ausweisart -->
 
 		<Bereich bereich="A" title="Prüfung der Ausweisart">
@@ -289,23 +307,19 @@
 			/></Bereich
 		>
 	</div>
-	<div
-		class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
-grid-cols-1
-xs:grid-cols-2"
-	>
-		<div class="md:justify-self-start">
-			<AusweisWeiter
-				bind:ausweis
-				bind:images
-				bind:user
-				bind:gebaeude
-				bind:gebaeude_aufnahme_allgemein
-			></AusweisWeiter>
-		</div>
 
-		<div class="md:justify-self-end"><Hilfe /></div>
-	</div>
+	<ButtonWeiterHilfe {spaeterWeitermachen}
+	bind:ausweis
+	bind:images
+	bind:user
+	bind:gebaeude
+	bind:gebaeude_aufnahme_allgemein
+	>
+	</ButtonWeiterHilfe>
+
+
+
+	
 </form>
 
 <RawNotificationWrapper>
diff --git a/src/style/formular.css b/src/style/formular.css
index 37264093..bf72302f 100644
--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -1,10 +1,10 @@
 
 #formular-box{@apply  bg-white;}
 
-.formular-boxen{@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
+.formular-boxen{@apply w-full ml-[2px] ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
 
 
-.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-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] ml-[2px] text-secondary/80 bg-black/15 ring-2  ring-black/30 rounded-sm font-bold;}
 .formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] pl-1 justify-self-start
 	md:[font-size:_clamp(20px,1.25vw,36px)]
 
diff --git a/src/style/global.css b/src/style/global.css
index 5c9f4201..8af0519d 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -44,7 +44,7 @@ body{
 
 
 .button {
-	@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
+	@apply w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
 	hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
 }
 
@@ -69,7 +69,7 @@ input:disabled, input:read-only, select:disabled {
 /*ARTICLE*/
 
 article {
-	@apply w-full relative bg-white px-0 py-0;
+	@apply w-full relative bg-white px-0 py-0 z-0;
 
 	hr {@apply mb-4 mt-4;}
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8647aa41..a324930a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -45,7 +45,8 @@ module.exports = {
 			},
 			boxShadow: {
 				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
-				'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
+				'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',
+				'skala': '0px 3px 3px rgba(0, 0, 0, 0.1)',				
 			  },
 			
 			gridTemplateColumns: {

From 48099fed200b0291f4a889a17e4f9249b7b0b4e8 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Fri, 3 Jan 2025 13:43:28 +0100
Subject: [PATCH 2/2] Seit Widget extern angelegt

---
 .../widgets/WelcherAusweisWidget.svelte       | 10 ++---
 src/layouts/WidgetLayout.astro                | 44 +++++++++++++++++++
 src/pages/geg/index.astro                     | 24 ++++++++++
 src/pages/widget/index.astro                  | 12 +++++
 4 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/layouts/WidgetLayout.astro
 create mode 100644 src/pages/widget/index.astro

diff --git a/src/components/widgets/WelcherAusweisWidget.svelte b/src/components/widgets/WelcherAusweisWidget.svelte
index fc5e15c9..d820bcec 100644
--- a/src/components/widgets/WelcherAusweisWidget.svelte
+++ b/src/components/widgets/WelcherAusweisWidget.svelte
@@ -162,7 +162,7 @@
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Wohngebäude"
 					price={PRICES.VerbrauchsausweisWohnen[0]}
-					src="/images/right-sidebar/UMBE_wohngebaeude.svg"
+					src="/images/right-sidebar/wohngebaeude.svg"
 					alt="Wohnhaus Verbrauchsausweis"
 					variant="einfach"
 					services={[
@@ -185,7 +185,7 @@
 				<WidgetCardTemplate
 					name="Bedarfsausweis Wohngebäude"
 					price={PRICES.BedarfsausweisWohnen[0]}
-					src="/images/right-sidebar/UMBE_wohngebaeude.svg"
+					src="/images/right-sidebar/wohngebaeude.svg"
 					alt="Wohnhaus Bedarfsausweis"
 					variant="fundiert (empfohlen)"
 					services={[
@@ -208,7 +208,7 @@
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Gewerbe"
 					price={PRICES.VerbrauchsausweisGewerbe[0]}
-					src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
+					src="/images/right-sidebar/gewerbegebaeude.svg"
 					alt="Gewerbe Verbrauchsausweis"
 					variant="einfach"
 					services={[
@@ -232,7 +232,7 @@
 				<WidgetCardTemplate
 					name="GEG-Nachweis Gewerbe"
 					price={PRICES.BedarfsausweisGewerbe[0]}
-					src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
+					src="/images/right-sidebar/gewerbegebaeude.svg"
 					alt="Gewerbe Bedarfsausweis"
 					variant="Bauvorlage"
 					services={[
@@ -256,7 +256,7 @@
 				<WidgetCardTemplate
 					name="Bedarfsausweis Gewerbe"
 					price={PRICES.BedarfsausweisGewerbe[0]}
-					src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
+					src="/images/right-sidebar/gewerbegebaeude.svg"
 					alt="Gewerbe Bedarfsausweis"
 					variant="fundiert (empfohlen)"
 					services={[
diff --git a/src/layouts/WidgetLayout.astro b/src/layouts/WidgetLayout.astro
new file mode 100644
index 00000000..bdf93d9a
--- /dev/null
+++ b/src/layouts/WidgetLayout.astro
@@ -0,0 +1,44 @@
+---
+import "../style/global.css";
+import "../../svelte-dialogs.config"
+import { NotificationWrapper } from "@ibcornelsen/ui";
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+
+
+<!DOCTYPE html>
+<html lang="de">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
+		<meta
+			name="description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<title>
+			{title || "Energieausweis online erstellen - Online Energieausweis"}
+		</title>
+	</head>
+
+	<body>
+	
+		<main id="main"
+		class="w-full p-0">
+
+		
+		<article>
+		<slot />
+		</article>
+		
+
+		</main>
+	</body>
+</html>
+
+
diff --git a/src/pages/geg/index.astro b/src/pages/geg/index.astro
index 00578ccf..455a252f 100644
--- a/src/pages/geg/index.astro
+++ b/src/pages/geg/index.astro
@@ -702,4 +702,28 @@ Wenn ein zu errichtendes Gebäude Wärme aus einer gemeinsamen Heizungsanlage be
 Zusätzliche Wärmeverteil- und Warmwasserleitungen, die zur Verbindung der versorgten Gebäude verlegt werden, sind anteilig in die Berechnung der Wärmeverluste einzubeziehen.
 </p>
 
+<hr>
+
+<h2>§ 28 Anrechnung mechanisch betriebener Lüftungsanlagen</h2>
+
+<h3>(1) Voraussetzungen für die Anrechnung</h3>
+<p>
+Die Anrechnung der Wärmerückgewinnung oder einer regelungstechnisch verminderten Luftwechselrate bei mechanischen Lüftungsanlagen im Rahmen der Berechnung nach § 20 Absatz 1 oder 2 ist nur zulässig, wenn:
+</p>
+<ul>
+  <li>die Dichtheit des Gebäudes gemäß § 13 in Verbindung mit § 26 nachgewiesen ist,</li>
+  <li>die Lüftungsanlage über Einrichtungen verfügt, die eine Beeinflussung der Luftvolumenströme jeder Nutzeinheit durch den Nutzer ermöglichen, und</li>
+  <li>die aus der Abluft gewonnene Wärme vorrangig vor der vom Heizsystem bereitgestellten Wärme genutzt wird.</li>
+</ul>
+
+<h3>(2) Bestimmung der Kennwerte</h3>
+<p>
+Die bei der Anrechnung der Wärmerückgewinnung anzusetzenden Kennwerte der Lüftungsanlage müssen nach anerkannten Regeln der Technik ermittelt oder den allgemeinen bauaufsichtlichen Zulassungen der verwendeten Produkte entnommen werden.
+</p>
+
+<h3>(3) Ausnahme für kleine Wohngebäude</h3>
+<p>
+Für Wohngebäude mit nicht mehr als zwei Wohnungen, von denen eine nicht mehr als 50 Quadratmeter Gebäudenutzfläche hat, ist die Bedingung aus Absatz 1 Nummer 2 nicht anzuwenden.
+</p>
+
 </Layout>
\ No newline at end of file
diff --git a/src/pages/widget/index.astro b/src/pages/widget/index.astro
new file mode 100644
index 00000000..c7da26df
--- /dev/null
+++ b/src/pages/widget/index.astro
@@ -0,0 +1,12 @@
+---
+
+import Layout from "#layouts/WidgetLayout.astro";
+import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
+
+---
+
+<Layout title="Welcher Energieausweis? - Widget">
+
+<WelcherAusweisWidget client:load/>
+
+</Layout>