From e96ac71d1d792931172baf1c00fbe488b656fae3 Mon Sep 17 00:00:00 2001
From: Robert Jagtiani <all@robert-jagtiani.de>
Date: Sat, 22 Feb 2025 18:47:22 +0100
Subject: [PATCH] kundendaten

---
 src/components/Ausweis/Progressbar.svelte     |   3 +-
 .../Ausweis/Rechnungsadresse.svelte           |  27 +--
 .../BedarfsausweisWohnenModule.svelte         |  10 +-
 src/modules/KundendatenModule.svelte          | 173 +++---------------
 .../VerbrauchsausweisGewerbeModule.svelte     |  10 +-
 .../VerbrauchsausweisWohnenModule.svelte      |  10 +-
 .../GEGNachweisGewerbeModule.svelte           |   2 +-
 .../GEGNachweisWohnenModule.svelte            |   2 +-
 8 files changed, 44 insertions(+), 193 deletions(-)

diff --git a/src/components/Ausweis/Progressbar.svelte b/src/components/Ausweis/Progressbar.svelte
index f7754c0d..2f152dc0 100644
--- a/src/components/Ausweis/Progressbar.svelte
+++ b/src/components/Ausweis/Progressbar.svelte
@@ -24,7 +24,7 @@
 	{#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>
@@ -40,6 +40,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/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte b/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
index 5f663671..aa7070ba 100644
--- a/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
+++ b/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
@@ -160,12 +160,12 @@
 </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">
+<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
@@ -174,10 +174,10 @@ lg:grid-cols-2 lg:gap-x-6
 	/>
 </div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
+<div id="progress-box" 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">Energiesausweis erstellen</h1>
-	<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[Enums.AusweisTyp.Standard]} €</h2>
+	<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
+	<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
 	<ProgressBar step1={'step'}/>
 </div>
 
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index c40e3a8d..79de75f3 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,7 +330,7 @@
 
 <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
 "
@@ -338,7 +338,7 @@
 	{#if !gegAnfrage}
 		<div
 			id="performance-box"
-			class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1"
+			class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1"
 		>
 			<PerformanceScore
 				bind:ausweis
@@ -351,13 +351,10 @@
 
 	<div
 		id="progress-box"
-		class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch"
+		class="w-full box relative px-0 sm: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>
+	<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
+	<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
 		{#if gegAnfrage}
 			<Progressbar
 				active={1}
@@ -387,7 +384,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 +418,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 +429,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 +490,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 +527,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 +557,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 513e1afe..61bcfe12 100644
--- a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -117,12 +117,12 @@
 </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">
+<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
@@ -131,10 +131,10 @@
 	/>
 </div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
+<div id="progress-box" class="w-full box relative px-0 sm: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>
+	<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
+	<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>>
 	<Progressbar active={0} />
 </div>
 
diff --git a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
index 5b1fb218..2cb08ae8 100644
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
@@ -164,9 +164,9 @@ 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">
+<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
 		bind:aufnahme={aufnahme}
@@ -175,10 +175,10 @@ const ausweisart = Enums.Ausweisart.VerbrauchsausweisWohnen
 	/>
 </div>
 
-<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
+<div id="progress-box" 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">Energieausweis erstellen</h1>
-	<h2 class="text-primary text-xl">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
+	<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
+	<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
 	<Progressbar active={0}/>
 </div>
 
diff --git a/src/modules/angebot-anfragen/GEGNachweisGewerbeModule.svelte b/src/modules/angebot-anfragen/GEGNachweisGewerbeModule.svelte
index b2503293..878da949 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 242632d8..3d84f463 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>