2025-01-20 16:47:47 +00:00
15 changed files with 760 additions and 246 deletions
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import AnsichtsausweisButton from "#components/AnsichtsausweisButton.svelte";
 	import DatenblattButton from "#components/DatenblattButton.svelte";
-	import HelpLabel from "#components/HelpLabel.svelte";
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
 	import ImageGrid from "#components/ImageGrid.svelte";
 	import {
 	Enums,
@@ -20,17 +21,9 @@

 <div class="grid grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="box card mb-0">
-
-		
-			<div class="form-group col-md-12 nopad">
-				<HelpLabel title="Gebäudebild Bildupload :">
-					Wenn vorhanden können Sie ein Gebäudefoto (Außenansicht)
-					hochladen.
-				</HelpLabel>
-				<hr class="trenner_form_100" />
-			</div>
+	<div class="box card mb-0 relative">

+			<div>
 			<ImageGrid
 				name={"gebaeude_image"}
 				kategorie={Enums.BilderKategorie.Gebaeude}
@@ -40,18 +33,37 @@
 				bind:images
 				bind:ausweis
 			/>
-		
+			</div>
+
 	</div>

 	<div class="box card mb-0">
-		<HelpLabel title="Ansichtsausweis & Datenblatt :">
-			Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
-		</HelpLabel>
-		<hr class="trenner_form_100" />
+		<div class="input-standard mt-0">
+			
+			<input type="text" class="bg-[#e5e7eb]"
+			value="Vorschau: Ausweis und Datenblatt"
+			/>
+		
+				<div class="help-label">
+						<HelpLabel>
+							Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
+						</HelpLabel>
+					</div>

-		<div class="flex flex-row gap-4">
+		</div>
+
+		<div class="flex flex-row gap-4 mt-4">
 			<AnsichtsausweisButton {ausweis} />
 			<DatenblattButton {ausweis} />
 		</div>
+
+
+
 	</div>
+
 </div>
+
+
+<style lang="postcss">
+
+</style>
--- a/src/components/Ausweis/ButtonSpaeterHilfe.svelte
+++ b/src/components/Ausweis/ButtonSpaeterHilfe.svelte
@@ -13,7 +13,7 @@
 	
 	<div></div>

-	<button class="invisible button" on:click={automatischAusfüllen} type="button"
+	<button class="button" on:click={automatischAusfüllen} type="button"
 	>Automatisch Ausfüllen
 	</button>

--- a/src/components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte
+++ b/src/components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte
@@ -0,0 +1,28 @@
+<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="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">
+	
+	<button class="button justify-self-start">Zurück</button>
+
+	<div></div>
+	
+	<button class="button">Speichern</button>
+
+	<button class="button"><a href="/kaufabschluss?uid=b27f02b4-e7a8-4c2e-bb19-1d0e39edf634" class="text-white">Zum Kaufabschluss</a></button
+		>
+
+		
+	</div>
--- a/src/components/Ausweis/Pruefung.svelte
+++ b/src/components/Ausweis/Pruefung.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    export let bereich: string;
+	export let title: string;
+	export let bullets: string;
+</script>
+
+<div class="">
+    <strong>{bereich} - {title}</strong>
+    <div class="mt-4 mb-6">
+       
+        {#each bullets as [bullet, check]}
+			<div class="bullets grid grid-cols-[1fr_40px] items-center border-b-[1px] border-b-black/10">
+				<span>{@html bullet}</span>
+				<div class="justify-self-end" class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
+			</div>
+			{/each}
+
+    </div>
+</div>
+
+
+<style lang="postcss">
+
+.check{@apply self-center font-bold text-green-700}
+.check-no{@apply self-center font-bold text-red-700}
+
+</style>
--- a/src/components/UploadImages.svelte
+++ b/src/components/UploadImages.svelte
@@ -90,7 +90,7 @@
 {#if images.filter((image) => image.kategorie === kategorie).length === max}
 	<span class="bg-base-200 border px-4 py-2">Maximale Anzahl Bilder wurde erreicht.</span>
 {:else if max > 1}
-	<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} multiple on:change={getAllImages} />
+	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} multiple on:change={getAllImages} />
 {:else}
-	<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} on:change={getAllImages} />
+	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} on:change={getAllImages} />
 {/if}
--- a/src/components/design/content/WidgetCardTemplate.svelte
+++ b/src/components/design/content/WidgetCardTemplate.svelte
@@ -104,4 +104,5 @@
 	.check-no {
 		@apply justify-self-end font-bold text-red-700;
 	}
+
 </style>
--- a/src/layouts/AusweisLayoutDaten.astro
+++ b/src/layouts/AusweisLayoutDaten.astro
@@ -32,7 +32,7 @@ console.log(scroll);
 		document.getElementById('performance-box').style.maxWidth = "688.5px";
 		document.getElementById('progress-box').style.maxWidth = "688.5px";

-		document.getElementById('formInput')?.classList.add('2xl:mt-[370px]');
+		document.getElementById('formInput-1')?.classList.add('2xl:mt-[370px]');
 		


@@ -44,7 +44,7 @@ console.log(scroll);
 		
 		document.getElementById('skala').style.borderBottom = "none";

-		document.getElementById('formInput')?.classList.remove('2xl:mt-[370px]');
+		document.getElementById('formInput-1')?.classList.remove('2xl:mt-[370px]');



--- a/src/layouts/AusweisLayoutPruefung.astro
+++ b/src/layouts/AusweisLayoutPruefung.astro
@@ -0,0 +1,120 @@
+---
+import "../style/global.css";
+import "../style/formular.css";
+import "../../svelte-dialogs.config"
+import Header from "#header/AusweisHeader.astro";
+import Footer from "#footer/Footer.astro";
+import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
+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."
+		/>
+		<link rel="canonical" href="https://online-energieausweis.org/" />
+
+		<meta property="og:locale" content="de_DE" />
+		<meta property="og:type" content="website" />
+		<meta
+			property="og:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			property="og:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta property="og:url" content="https://online-energieausweis.org/" />
+		<meta property="og:site_name" content="Energieausweis online erstellen" />
+
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta
+			name="twitter:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta
+			name="twitter:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			name="twitter:image"
+			content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
+		/>
+		<title>
+			{title || 'Energieausweis online erstellen - Online Energieausweis'}
+		</title>
+	</head>
+
+	<body>
+			
+		<Header />
+	
+		<main
+			class="w-full p-0 grid
+			xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
+			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
+			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
+			2xl:grid-cols-[minmax(300px,300px)1fr] 2xl:gap-5 2xl:p-6
+		">
+
+		<SidebarLeft />
+
+		<article class="box rounded-tl-none p-2 lg:p-12">
+		<slot />
+		</article>
+ 
+		</main>
+	
+		<Footer />
+
+
+		
+		<NotificationWrapper client:load />
+
+	</body>
+</html>
+
+<style is:global lang="postcss">
+	body {
+		min-height: 100vh;
+		width:100%;
+	}
+
+	article {
+		p, h1, h2, h3, h4, h5, h6 {
+			@apply text-base-content;
+		}
+	}
+
+
+
+
+	.headline {
+		@apply text-lg;
+	}
+
+	.radio-inline {
+		@apply flex flex-row gap-2;
+	}
+
+	.checkbox-inline {
+		@apply flex flex-row gap-2;
+	}
+
+</style>
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
 	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	import Pruefung from "#components/Ausweis/Pruefung.svelte";
+	import ButtonZurueckSpeichernKaufabschluss from "#components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte";
+
 	import type { Bezahlmethoden } from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client";
 	import { dialogs } from "svelte-dialogs";
@@ -15,27 +19,34 @@
 	export let user: BenutzerClient;
 	export let ausweis: VerbrauchsausweisWohnenClient;

+	export let bereich;
+	export let title;
+	export let bullets;
+
+	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
+	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
+
 	let services = [
 		{
-			name: "Qualitätsdruck per Post (zusätzlich zur PDF Version) für 9€ inkl. MwSt.",
+			name: "Qualitätsdruck per Post (zusätzlich zur PDF Version)",
 			id: Enums.Service.Qualitaetsdruck,
 			price: 9,
 			selected: false,
 		},
 		{
-			name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben) für 10€ inkl. MwSt.",
+			name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben)",
 			id: Enums.Service.Aushang,
 			price: 10,
 			selected: false,
 		},
 		{
-			name: "Same Day Service (Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag) für 29€ inkl. MwSt.",
+			name: "Same Day Service <br>Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag",
 			id: Enums.Service.SameDay,
 			price: 29,
 			selected: false,
 		},
 		{
-			name: "Telefonische Energieeffizienzberatung für 75€ inkl. MwSt.",
+			name: "Telefonische Energieeffizienzberatung",
 			id: Enums.Service.Telefonberatung,
 			price: 75,
 			selected: false,
@@ -83,219 +94,240 @@
 	}
 </script>

-<div class="w-full px-8">
-	<div class="flex flex-row gap-8 items-center mb-8 w-full">
-		<div class="flex flex-col w-full">
-			<h1>Verbrauchsausweis erstellen - 45€</h1>
-			<ProgressBar progress={50} />
-		</div>
-	</div>
+<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4

-	<form on:submit={speichern}>
-		<div class="grid grid-cols-[1.5fr_2fr] gap-4">
-			<div
-				class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4"
-			>
-				<div class="flex flex-col gap-2 test-box">
-					<strong>A - Prüfung der Ausweisart</strong>
-					<div>
-						<span>Vermietung, Verkauf oder sonstiges</span>
-						<span
-							>Baujahr Heizung nicht kleiner als Baujahr Gebäude</span
-						><span
-							>Baujahr nach 1977 oder saniert oder mehr als 4
-							Wohneinheiten</span
-						><span>Heizung min. 3 Jahre alt</span><span
-							>Verbrauchsausweis zulässig</span
-						>
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 test-box">
-					<strong
-						>B - Prüfung der Adresse, Wohnfläche, Keller und Dach</strong
-					>
-					<div>
-						<span>PLZ gültig</span><span>Klimafaktorern</span><span
-							>Wohnfläche passt zu Wohneinheiten</span
-						>
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 test-box">
-					<strong>C - Prüfung der Verbrauchsangaben</strong>
-					<div>
-						<span>Verbrauchsmenge schlüssig</span><span
-							>Verbrauchsabweichung im Rahmen</span
-						><span>Endenergieverbrauch schlüssig</span>
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 test-box">
-					<strong
-						>D - Prüfung Warmwasser und alternative
-						Energieversorgung</strong
-					>
-					<div>
-						<span>Warmwasseranteil schlüssig</span>
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 test-box">
-					<strong
-						>E - Prüfung von Gebäudetyp, Lüftung, Kühlung und
-						Leerstand</strong
-					>
-					<div>
-						<span>Leerstand nicht größer als 30%</span>
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 test-box">
-					<strong
-						>F - Prüfung des Sanierungsstandes und der Gebäudebilder</strong
-					>
-					<div>
-						<span>Mindestens ein Bild pro Abschnitt vorhanden</span
-						><span>Angaben zum Sanierungsstand vorhanden</span><span
-							>Bei Baujahr vor 1978 Dach oder Geschossdecke min.
-							12 cm gedämmt</span
-						>
-					</div>
-				</div>
-			</div>
-			<div>
-				<div
-					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
-				>
-					<table>
-						<tr>
-							<td><strong>Produkt:</strong></td>
-							<td><div class="py-2">Verbrauchsausweis</div></td>
-						</tr>
-						<tr>
-							<td><strong>Beschreibung:</strong></td>
-							<td>
-								<div class="py-2">
-									Registrierung beim DiBt<br />
-									Prüfung durch Diplom Ingenieur<br />
-									Energieausweis Vorschau als PDF<br />
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td>Netto-Preis</td>
-							<td
-								><div class="py-2">
-									{(price * 0.81).toFixed(2) + "€"}
-								</div></td
-							>
-						</tr>
-						<tr>
-							<td>19% gesetzl. MwSt.</td>
-							<td
-								><div class="py-2">
-									{(price * 0.19).toFixed(2) + "€"}
-								</div></td
-							>
-						</tr>
-						<hr />
-						<tr>
-							<td>Preis inkl. MwSt.</td>
-							<td
-								><div class="py-2">
-									<strong>{price + "€"}</strong>
-								</div>
-							</td>
-						</tr>
-					</table>
-				</div>
-				<h3 class="font-semibold mt-8">
-					Hiermit bestelle ich folgende Version des Energieausweises:
-				</h3>
-				<div
-					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
-				>
-					<table>
-						<tr>
-							<td
-								>Verbrauchsausweis online für {prices[0]} € inkl.
-								MwSt. als PDF per E-Mail</td
-							>
-							<td
-								><input
-									type="radio"
-									class="radio radio-secondary"
-									bind:group={basePrice}
-									value={prices[0]}
-									name="Preis"
-									checked
-								/>
-							</td>
-						</tr>
-						<tr>
-							<td
-								>Verbrauchsausweis online inkl. Beratung für {prices[1]}
-								€ inkl. MwSt. als PDF per E-Mail</td
-							>
-							<td
-								><input
-									type="radio"
-									class="radio radio-secondary"
-									bind:group={basePrice}
-									value={prices[1]}
-									name="Preis"
-								/>
-							</td>
-						</tr><tr>
-							<td
-								>Verbrauchsausweis offline für {prices[2]} € inkl.
-								MwSt. als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
-							>
-							<td
-								><input
-									type="radio"
-									class="radio radio-secondary"
-									bind:group={basePrice}
-									value={prices[2]}
-									name="Preis"
-								/></td
-							>
-						</tr>
-					</table>
-				</div>
+2xl:grid-cols-2 2xl:gap-x-8
+">

-				<h3 class="font-semibold mt-8">Zusatzleistungen</h3>
-				<div
-					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
-				>
-					<table>
-						{#each services as service}
-							<tr>
-								<td>{service.name}</td>
-								<td
-									><input
-										type="checkbox"
-										class="checkbox checkbox-secondary"
-										bind:checked={service.selected}
-									/>
-								</td>
-							</tr>
-						{/each}
-					</table>
-				</div>
-			</div>
-		</div>
-		<div class="flex flex-row justify-between">
-			<!-- TODO: Zurück implementieren -->
-			<button class="btn btn-secondary mt-4">Zurück</button>
-			<div class="flex flex-row gap-4">
-				<!-- TODO: Speichern implementieren -->
-				<button class="btn btn-secondary mt-4">Speichern</button>
-				<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button
-				>
-			</div>
-		</div>
-	</form>
+<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>

-<style>
-	.test-box div {
-		@apply flex flex-col gap-1.5;
+<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>
+
+</div>
+
+<form id="formInput-2" on:submit={speichern}>
+	<div id="formular-box" class="formular-boxen ring-0">
+
+		<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2 mb-6">
+			<div class="formular-abschnitt1">€</div>
+			<div class="formular-abschnitt2">Prüfung, Leistungsbeschreibung und Kosten</div>
+		</div>
+
+
+		<div class="grid grid-cols-[2fr_3fr] gap-8">
+			
+			<div class="bereich-box pr-12">
+				
+				<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 class="grid grid-rows-3 gap-y-6">
+
+				<div class="bereich-box bg-white ring-primary/50 ring-4" >
+
+					<div class="ProduktKostenTabelle">
+						<div class="zeile">
+							<div>Produkt</div><div>:</div><div>Verbrauchsausweis</div>
+						</div>
+						<div class="zeile">
+							<div>Beschreibung</div><div>:</div>
+							<div class="col-span-2">Registrierung beim DiBt<br />
+								Prüfung durch Diplom Ingenieur<br />
+								Energieausweis Vorschau als PDF<br />
+							</div>
+						</div>
+						<div class="zeile betrag">
+							<div>Netto-Preis</div><div>:</div><div class="text-right"><b>{(price * 0.81).toFixed(2) + " €"}</b></div>
+						</div>
+						<div class="zeile betrag">
+							<div>19% gesetzl. MwSt.	
+							</div><div>:</div><div class="text-right"><b>{(price * 0.19).toFixed(2) + " €"}</b></div>
+						</div>
+						<div class="zeile betrag">
+							<div><b>Preis inkl. MwSt.</b>	
+							</div><div>:</div><div class="text-right"><b>{price.toFixed(2) + " €"}</b></div>
+						</div>
+
+					</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>
+
+
+			
+	</div>
+</div>
+
+</div>
+	
+<ButtonZurueckSpeichernKaufabschluss />
+	
+
+</form>
+
+
+<style lang="postcss">
+h3{@apply text-[1.25rem] ml-0 font-bold mb-6}
+
+	.ProduktKostenTabelle{@apply block;
+	.zeile{@apply grid grid-cols-[10rem_2rem_5rem_1fr];}
+	.zeile:nth-child(3){@apply mt-6}
+	.zeile:nth-child(5){@apply mt-6}
+	.betrag{@apply font-bold text-[1.25rem]}
 	}
+
+.varianten{@apply block;
+	.variante{@apply grid grid-cols-[40px_8rem_1fr] items-start pb-4;
+		input{@apply mt-[5px]
+		}
+	}
+}
+
+.zusaetze{@apply block;
+.zusatz{@apply grid grid-cols-[40px_8rem_1fr] items-start pb-3;
+		input{@apply mt-[4px]
+		}
+	}
+}
 </style>
--- a/src/modules/KundendatenModule_org.svelte
+++ b/src/modules/KundendatenModule_org.svelte
@@ -0,0 +1,296 @@
+<script lang="ts">
+	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	import type { Bezahlmethoden } from "@ibcornelsen/database/client";
+	import { Enums } from "@ibcornelsen/database/client";
+	import { dialogs } from "svelte-dialogs";
+	import LoginDialog from "#components/LoginDialog.svelte";
+	import { PRICES } from "#lib/constants.js";
+	import {
+		BenutzerClient,
+		VerbrauchsausweisWohnenClient,
+	} from "#components/Ausweis/types.js";
+	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
+	import { client } from "src/trpc.js";
+
+	export let user: BenutzerClient;
+	export let ausweis: VerbrauchsausweisWohnenClient;
+
+	let services = [
+		{
+			name: "Qualitätsdruck per Post (zusätzlich zur PDF Version) für 9€ inkl. MwSt.",
+			id: Enums.Service.Qualitaetsdruck,
+			price: 9,
+			selected: false,
+		},
+		{
+			name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben) für 10€ inkl. MwSt.",
+			id: Enums.Service.Aushang,
+			price: 10,
+			selected: false,
+		},
+		{
+			name: "Same Day Service (Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag) für 29€ inkl. MwSt.",
+			id: Enums.Service.SameDay,
+			price: 29,
+			selected: false,
+		},
+		{
+			name: "Telefonische Energieeffizienzberatung für 75€ inkl. MwSt.",
+			id: Enums.Service.Telefonberatung,
+			price: 75,
+			selected: false,
+		},
+	];
+
+	export let selectedPaymentType: Bezahlmethoden =
+		Enums.Bezahlmethoden.paypal;
+
+	let prices: number[] = [];
+
+	if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
+		prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart];
+	}
+
+	let basePrice: number = prices[0];
+
+	$: price =
+		basePrice +
+		services.reduce(
+			(acc, service) => (service.selected && acc + service.price) || acc,
+			0
+		);
+
+	async function speichern(e: SubmitEvent) {
+		e.preventDefault();
+
+		// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
+		// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
+		if (!(await validateAccessTokenClient())) {
+			// TOOD: Auf Dialog umstellen.
+			const loggedIn = await dialogs.modal(LoginDialog);
+
+			if (!loggedIn) {
+				return false;
+			}
+		}
+
+		// Falls der Ausweis noch keine benutzer_id hat müssen wir ihn claimen, damit er dem jetzigen Nutzer zugewiesen wird...
+		await client.v1.verbrauchsausweisWohnen.claim.mutate({
+			uid: ausweis.uid,
+		});
+
+		window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
+	}
+</script>
+
+
+
+
+	<form on:submit={speichern}>
+		<div class="grid grid-cols-[1.5fr_2fr] gap-4">
+			<div
+				class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4"
+			>
+				<div class="flex flex-col gap-2 test-box">
+					<strong>A - Prüfung der Ausweisart</strong>
+					<div>
+						<span>Vermietung, Verkauf oder sonstiges</span>
+						<span
+							>Baujahr Heizung nicht kleiner als Baujahr Gebäude</span
+						><span
+							>Baujahr nach 1977 oder saniert oder mehr als 4
+							Wohneinheiten</span
+						><span>Heizung min. 3 Jahre alt</span><span
+							>Verbrauchsausweis zulässig</span
+						>
+					</div>
+				</div>
+				<div class="flex flex-col gap-2 test-box">
+					<strong
+						>B - Prüfung der Adresse, Wohnfläche, Keller und Dach</strong
+					>
+					<div>
+						<span>PLZ gültig</span><span>Klimafaktorern</span><span
+							>Wohnfläche passt zu Wohneinheiten</span
+						>
+					</div>
+				</div>
+				<div class="flex flex-col gap-2 test-box">
+					<strong>C - Prüfung der Verbrauchsangaben</strong>
+					<div>
+						<span>Verbrauchsmenge schlüssig</span><span
+							>Verbrauchsabweichung im Rahmen</span
+						><span>Endenergieverbrauch schlüssig</span>
+					</div>
+				</div>
+				<div class="flex flex-col gap-2 test-box">
+					<strong
+						>D - Prüfung Warmwasser und alternative
+						Energieversorgung</strong
+					>
+					<div>
+						<span>Warmwasseranteil schlüssig</span>
+					</div>
+				</div>
+				<div class="flex flex-col gap-2 test-box">
+					<strong
+						>E - Prüfung von Gebäudetyp, Lüftung, Kühlung und
+						Leerstand</strong
+					>
+					<div>
+						<span>Leerstand nicht größer als 30%</span>
+					</div>
+				</div>
+				<div class="flex flex-col gap-2 test-box">
+					<strong
+						>F - Prüfung des Sanierungsstandes und der Gebäudebilder</strong
+					>
+					<div>
+						<span>Mindestens ein Bild pro Abschnitt vorhanden</span
+						><span>Angaben zum Sanierungsstand vorhanden</span><span
+							>Bei Baujahr vor 1978 Dach oder Geschossdecke min.
+							12 cm gedämmt</span
+						>
+					</div>
+				</div>
+			</div>
+			<div>
+				<div
+					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
+				>
+					<table>
+						<tr>
+							<td><strong>Produkt:</strong></td>
+							<td><div class="py-2">Verbrauchsausweis</div></td>
+						</tr>
+						<tr>
+							<td><strong>Beschreibung:</strong></td>
+							<td>
+								<div class="py-2">
+									Registrierung beim DiBt<br />
+									Prüfung durch Diplom Ingenieur<br />
+									Energieausweis Vorschau als PDF<br />
+								</div>
+							</td>
+						</tr>
+						<tr>
+							<td>Netto-Preis</td>
+							<td
+								><div class="py-2">
+									{(price * 0.81).toFixed(2) + "€"}
+								</div></td
+							>
+						</tr>
+						<tr>
+							<td>19% gesetzl. MwSt.</td>
+							<td
+								><div class="py-2">
+									{(price * 0.19).toFixed(2) + "€"}
+								</div></td
+							>
+						</tr>
+						<hr />
+						<tr>
+							<td>Preis inkl. MwSt.</td>
+							<td
+								><div class="py-2">
+									<strong>{price + "€"}</strong>
+								</div>
+							</td>
+						</tr>
+					</table>
+				</div>
+				<h3 class="font-semibold mt-8">
+					Hiermit bestelle ich folgende Version des Energieausweises:
+				</h3>
+				<div
+					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
+				>
+					<table>
+						<tr>
+							<td
+								>Verbrauchsausweis online für {prices[0]} € inkl.
+								MwSt. als PDF per E-Mail</td
+							>
+							<td
+								><input
+									type="radio"
+									class="radio radio-secondary"
+									bind:group={basePrice}
+									value={prices[0]}
+									name="Preis"
+									checked
+								/>
+							</td>
+						</tr>
+						<tr>
+							<td
+								>Verbrauchsausweis online inkl. Beratung für {prices[1]}
+								€ inkl. MwSt. als PDF per E-Mail</td
+							>
+							<td
+								><input
+									type="radio"
+									class="radio radio-secondary"
+									bind:group={basePrice}
+									value={prices[1]}
+									name="Preis"
+								/>
+							</td>
+						</tr><tr>
+							<td
+								>Verbrauchsausweis offline für {prices[2]} € inkl.
+								MwSt. als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
+							>
+							<td
+								><input
+									type="radio"
+									class="radio radio-secondary"
+									bind:group={basePrice}
+									value={prices[2]}
+									name="Preis"
+								/></td
+							>
+						</tr>
+					</table>
+				</div>
+
+				<h3 class="font-semibold mt-8">Zusatzleistungen</h3>
+				<div
+					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
+				>
+					<table>
+						{#each services as service}
+							<tr>
+								<td>{service.name}</td>
+								<td
+									><input
+										type="checkbox"
+										class="checkbox checkbox-secondary"
+										bind:checked={service.selected}
+									/>
+								</td>
+							</tr>
+						{/each}
+					</table>
+				</div>
+			</div>
+		</div>
+		<div class="flex flex-row justify-between">
+			<!-- TODO: Zurück implementieren -->
+			<button class="btn btn-secondary mt-4">Zurück</button>
+			<div class="flex flex-row gap-4">
+				<!-- TODO: Speichern implementieren -->
+				<button class="btn btn-secondary mt-4">Speichern</button>
+				<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button
+				>
+			</div>
+		</div>
+	</form>
+
+
+<style>
+	.test-box div {
+		@apply flex flex-col gap-1.5;
+	}
+</style>
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.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";

@@ -204,15 +204,14 @@
 		
 	<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} 
-	/>
+	<ProgressBar progress={0} />
 </div>

 </div>



-<form id="formInput" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+<form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div id="formular-box" class="formular-boxen ring-0">


--- a/src/pages/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/index.astro
+++ b/src/pages/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/index.astro
@@ -1,5 +1,5 @@
 ---
-import AusweisLayout from "#layouts/AusweisLayout.astro";
+import AusweisLayout from "#layouts/AusweisLayoutDaten.astro";
 import VerbrauchsausweisWohnenModule from "#modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte";
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 import { createCaller } from "#lib/caller";
--- a/src/pages/kaufabschluss.astro
+++ b/src/pages/kaufabschluss.astro
@@ -1,7 +1,7 @@
 ---

 import KaufabschlussModule from "#modules/KaufabschlussModule.svelte";
-import AusweisLayout from "#layouts/AusweisLayout.astro";
+import AusweisLayout from "#layouts/AusweisLayoutPruefung.astro";
 import { Enums } from "@ibcornelsen/database/client";
 import { createCaller } from "#lib/caller";

--- a/src/pages/kundendaten.astro
+++ b/src/pages/kundendaten.astro
@@ -1,7 +1,7 @@
 ---

 import KundendatenModule from "#modules/KundendatenModule.svelte";
-import AusweisLayout from "#layouts/AusweisLayout.astro";
+import AusweisLayout from "#layouts/AusweisLayoutPruefung.astro";
 import { Enums } from "@ibcornelsen/database/client";
 import { createCaller } from "#lib/caller";

--- a/src/style/global.css
+++ b/src/style/global.css
@@ -55,12 +55,11 @@ input, select, textarea{
 input[type="text"], 
 input[type="number"], 
 input[type="password"], 
+input[type="file"],
 select{
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm}

-input[type="checkbox"]{@apply inline-block accent-secondary}
-
-radio{@apply accent-primary}
+input[type="checkbox"],input[type="radio"]{@apply inline-block accent-secondary h-[13px]}

 input:disabled, input:read-only, select:disabled {
 	@apply bg-gray-200 border-gray-500/15;