Merge remote-tracking branch 'origin/UMBE' into dev-moritz

2025-01-21 12:34:40 +07:00
parent 01b701c392 cf2cddbd85
commit 5a551c0f33
31 changed files with 2510 additions and 918 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}
@@ -39,19 +32,38 @@
 				bind:gebaeude
 				bind:images
 				bind:ausweis
-			/>
+			>TEST</ImageGrid>
+			</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">
 			
-		<div class="flex flex-row gap-4">
+			<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>
+
+		<div class="flex flex-row gap-4 mt-4">
 			<AnsichtsausweisButton {ausweis} />
 			<DatenblattButton {ausweis} />
 		</div>
+
+
+
 	</div>
+
 </div>
+
+
+<style lang="postcss">
+
+</style>
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -24,6 +24,9 @@
 		| VerbrauchsausweisGewerbeClient
 		| BedarfsausweisWohnenClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
+
+	export let Energieausweis;
+	console.log('HALLO:'+Energieausweis);
 </script>

 <div id="ausweisart" class="bereich-box grid
@@ -70,22 +73,73 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
 		>
 			<option disabled selected value={false}>Bitte auswählen</option>
+
+			{#if Energieausweis=="Verbrauchsausweis Wohngebäude"}
 			<option value="Einfamilienhaus">Einfamilienhaus</option>
-			<option value="Freistehendes Einfamilienhaus"
-				>Freistehendes Einfamilienhaus</option
-			>
-			<option value="Freistehendes Zweifamilienhaus"
-				>Freistehendes Zweifamilienhaus</option
-			>
+			<option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
+			<option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>
 			<option value="Doppelhaushälfte">Doppelhaushälfte</option>
 			<option value="Reihenendhaus">Reihenendhaus</option>
 			<option value="Reihenmittelhaus">Reihenmittelhaus</option>
 			<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
-			<option value="Wohn- und Geschäftshaus"
-				>Wohn- und Geschäftshaus</option
-			>
+			<option value="Wohn- und Geschäftshaus">Wohn- und Geschäftshaus</option>
 			<option value="Atrium-Bungalow">Atrium-Bungalow</option>
 			<option value="Winkelbungalow">Winkelbungalow</option>
+
+			{:else if Energieausweis=="Verbrauchsausweis Gewerbe"}
+			<option value="Verwaltungsgebäude (allgemein)">Verwaltungsgebäude (allgemein)</option>
+			<option value="Parlaments- und Gerichtsgebäude">Parlaments- und Gerichtsgebäude</option>
+			<option value="Ministerien u. Ämter u. Behörden">Ministerien u. Ämter u. Behörden</option>
+			<option value="Polizeidienstgebäude">Polizeidienstgebäude</option>
+			<option value="Gebäude für öffentliche Bereitschaftsdienste">Gebäude für öffentliche Bereitschaftsdienste</option>
+			<option value="Feuerwehrdienstgebäude">Feuerwehrdienstgebäude</option>
+			<option value="Bürogebäude">Bürogebäude</option>
+			<option value="Bürogebäude - überwiegend Großraumbüros">Bürogebäude - überwiegend Großraumbüros</option>
+			<option value="Bankgebäude">Bankgebäude</option>
+			<option value="Hochschule und Forschung (allgemein)">Hochschule und Forschung (allgemein)</option>
+			<option value="Gebäude für Lehre">Gebäude für Lehre</option>
+			<option value="Institute für Lehre und Forschung">Institute für Lehre und Forschung</option>
+			<option value="Gebäude für Forschung ohne Lehre">Gebäude für Forschung ohne Lehre</option>
+			<option value="Laborgebäude">Laborgebäude</option>
+			<option value="Gesundheitswesen (allgemein)">Gesundheitswesen (allgemein)</option>
+			<option value="Krankenhäuser (ohne Forschung und Lehre)">Krankenhäuser (ohne Forschung und Lehre)</option>
+			<option value="Krankenhäuser (ohne Forschung und Lehre) &amp; teilstationäre Versorgung">Krankenhäuser (ohne Forschung und Lehre) &amp; teilstationäre Versorgung</option>
+			<option value="Medizinische Einrichtungen für nicht stationäre Versorgung">Medizinische Einrichtungen für nicht stationäre Versorgung</option>
+			<option value="Gebäude für Reha">Gebäude für Reha</option>
+			<option value="Bildungseinrichtungen (allgemein)">Bildungseinrichtungen (allgemein)</option>
+			<option value="Schulen">Schulen</option>
+			<option value="Kinderbetreuungseinrichtungen">Kinderbetreuungseinrichtungen</option>
+			<option value="Kultureinrichtungen (allgemein)">Kultureinrichtungen (allgemein)</option>
+			<option value="Bibliotheken/Archive">Bibliotheken/Archive</option>
+			<option value="Ausstellungsgebäude">Ausstellungsgebäude</option>
+			<option value="Veranstaltungsgebäude">Veranstaltungsgebäude</option>
+			<option value="Gemeinschafts-/Gemeindehäuser">Gemeinschafts-/Gemeindehäuser</option>
+			<option value="Opern/Theater">Opern/Theater</option>
+			<option value="Sporteinrichtungen (allgemein)">Sporteinrichtungen (allgemein)</option>
+			<option value="Sporthallen">Sporthallen</option>
+			<option value="Fitnessstudios">Fitnessstudios</option>
+			<option value="Schwimmhallen">Schwimmhallen</option>
+			<option value="Gebäude für Sportaußenanlagen">Gebäude für Sportaußenanlagen</option>
+			<option value="Verpflegungseinrichtungen (allgemein)">Verpflegungseinrichtungen (allgemein)</option>
+			<option value="Beherbergungsstätten (allgemein)">Beherbergungsstätten (allgemein)</option>
+			<option value="Hotels/Pensionen">Hotels/Pensionen</option>
+			<option value="Jugendherbergen u. Ferienhäuser">Jugendherbergen u. Ferienhäuser</option>
+			<option value="Gaststätten">Gaststätten</option>
+			<option value="Mensen u. Kantinen">Mensen u. Kantinen</option>
+			<option value="Gewerbliche und industrielle Gebäude (allgemein)">Gewerbliche und industrielle Gebäude (allgemein)</option>
+			<option value="Gewerbliche und industrielle Gebäude - schwere Arbeit">Gewerbliche und industrielle Gebäude - schwere Arbeit</option>
+			<option value="Gewerbliche und industrielle Gebäude - Mischung aus leichter u. schwerer Arbeit">Gewerbliche und industrielle Gebäude - Mischung aus leichter u. schwerer Arbeit</option>
+			<option value="Gewerbliche und industrielle Gebäude - leichte Arbeit">Gewerbliche und industrielle Gebäude - leichte Arbeit</option>
+			<option value="Gebäude für Lagerung">Gebäude für Lagerung</option>
+			<option value="Verkaufsstätten (allgemein)">Verkaufsstätten (allgemein)</option>
+			<option value="Kaufhäuser">Kaufhäuser</option>
+			<option value="Kaufhauszentren/Einkaufszentren">Kaufhauszentren/Einkaufszentren</option>
+			<option value="Märkte">Märkte</option>
+			<option value="Märkte mit sehr hohem Anteil von Kühlung für Lebensmittel">Märkte mit sehr hohem Anteil von Kühlung für Lebensmittel</option>
+			<option value="Läden">Läden</option>
+			<option value="Läden mit sehr hohem Anteil von Kühlung für Lebensmittel">Läden mit sehr hohem Anteil von Kühlung für Lebensmittel</option>
+			<option value="Fernmeldetechnik">Fernmeldetechnik</option>	
+			{/if}
 		</select>

 		<div class="help-label">
--- 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/Progressbar.svelte
+++ b/src/components/Ausweis/Progressbar.svelte
@@ -21,12 +21,12 @@

 <div class="phase">
 	<div class="point">2</div>
-	<div class="">Prüfung</div>
+	<div class="">Kundendaten</div>
 </div>

 <div class="phase justify-self-end">
 	<div class="point">3</div>
-	<div class="">Kaufabschluss</div>
+	<div class="">Kaufbestätigung</div>
 </div>

 </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/Ausweis/SanierungszustandHeizungsanlage.svelte
+++ b/src/components/Ausweis/SanierungszustandHeizungsanlage.svelte
@@ -14,7 +14,7 @@
            VerbrauchsausweisWohnenClient,
        } from "./types.js";
        import { boolean } from "astro:schema";
-            import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
+        import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
    
        export let gebaeude: GebaeudeClient;
        export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
--- a/src/components/Ausweis/StromVerbrauch.svelte
+++ b/src/components/Ausweis/StromVerbrauch.svelte
@@ -0,0 +1,688 @@
+<script lang="ts">
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
+	import Verbrauchslabel from "#labels/VerbrauchsLabel.svelte";
+	import StromVerbrauchslabel from "#labels/StromVerbrauchslabel.svelte";
+	import VerbrauchsHelpLabel from "#labels/VerbrauchsHelpLabel.svelte";
+	import StromVerbrauchsHelpLabel from "#labels/StromVerbrauchsHelpLabel.svelte";
+	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
+	
+
+	import Label from "../Label.svelte";
+
+	import moment from "moment";
+	import fuelList from "./brennstoffListe.js";
+	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
+	import {
+		GebaeudeAufnahmeClient,
+		GebaeudeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./types.js";
+	import { addNotification } from "#components/Notifications/shared.js";
+
+	export let gebaeude: GebaeudeClient;
+	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient;
+
+	// Wir dürfen bis zu 4.5 Jahre alte Klimafaktoren benutzen, also nehmen wir alle Monate seitdem und generieren daraus die Auswahl.
+	// Allerdings müssen wir auch berücksichtigen, dass wir drei folgende Jahre brauchen, also
+	// kann der Nutzer nur 36 + 18 Monate zurückgehen.
+	let availableDates: {
+		year: number;
+		month: number;
+	}[] = [];
+
+	let monthNames = [
+		"Januar",
+		"Februar",
+		"März",
+		"April",
+		"Mai",
+		"Juni",
+		"Juli",
+		"August",
+		"September",
+		"Oktober",
+		"November",
+		"Dezember",
+	];
+
+	const startDate = moment(
+		ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()
+	)
+		.subtract(4, "years")
+		.subtract(6, "months");
+	const endDate = moment(
+		ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()
+	).subtract(3, "years");
+
+	for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
+		availableDates.push({
+			year: m.year(),
+			month: m.month(),
+		});
+	}
+
+	const fuelMap: Record<string, string[]> = {};
+	for (const fuel of fuelList) {
+		// fuelMap[fuel.energietraeger] = ...
+		fuelMap[fuel[0]] = fuelMap[fuel[0]] || [];
+		fuelMap[fuel[0]].push(fuel[1]);
+	}
+
+	let month = ausweis.startdatum?.getMonth();
+	let year = ausweis.startdatum?.getFullYear();
+
+	$: {
+		if (typeof month === "number" && typeof year === "number") {
+			// Wir addieren einfach 2 Tage auf das Datum, falls der Nutzer außerhalb Deutschlands und in einer anderen Zeitzone ist.
+			// NOTE: Das ist eine grauenvolle Lösung aber alle anderen funktionieren irgendwie nicht...
+			ausweis.startdatum = moment()
+				.set("month", month)
+				.set("year", year)
+				.startOf("month")
+				.add(2, "days")
+				.toDate();
+		}
+	}
+
+	$: {
+		console.log(month, year);
+		
+		if ((availableDates.filter(date => date.month === month && date.year === year).length === 0) && typeof month === "number" && typeof year === "number") {
+			addNotification({
+				message: "Monat nicht verfügbar.",
+				subtext: "Der ausgewählte Monat ist in diesem Jahr nicht verfügbar, bitte wählen sie einen neuen Start Monat.",
+				dismissable: true,
+				type: "warning",
+				timeout: 0,
+				uid: "monat_nicht_verfuegbar",
+				selector: "select[name='energieverbrauch_zeitraum_monat']"
+			})
+		}
+	}
+
+	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
+</script>
+
+<div
+	id="verbrauch"
+	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
+"
+>
+	<!-- primäre Heizquellen -->
+
+	<div class="input-standard order-1 md:order-1 xl:order-1">
+		<Inputlabel title="Heizquellen"></Inputlabel>
+
+		<div class="input-checkboxen">
+			<div
+				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
+			>
+				<input
+					id="primaere_heizquelle"
+					type="checkbox"
+					class="checkbox"
+					name="primaere_heizquelle"
+					checked={true}
+				/>
+				<label for="primaere_heizquelle">primäre Heizquelle</label>
+			</div>
+
+			<div
+				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
+			>
+				{#if !ausweis.zusaetzliche_heizquelle}
+					<input
+						id="zusaetzliche_heizquelle_1"
+						type="checkbox"
+						class="checkbox"
+						name="zusaetzliche_heizquelle_1"
+						bind:checked={ausweis.zusaetzliche_heizquelle}
+					/>
+					<label
+						for="zusaetzliche_heizquelle_1"
+						class="cursor-pointer">zusätzliche Heizquelle</label
+					>
+				{/if}
+			</div>
+		</div>
+
+		<div class="help-label">
+			<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b> 
+				(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben. 
+				Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der 
+			Verbräuche öffnet sich dann.</HelpLabel>
+		</div>
+	</div>
+
+	<!-- Zeitraum 1 -->
+
+	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
+		<div class="input-standard">
+			<Inputlabel title="Start-Monat *"></Inputlabel>
+
+			<select
+				name="energieverbrauch_zeitraum_monat"
+				class="rounded-tr-none rounded-br-none w-full m-0"
+				bind:value={month}
+				required
+			>
+				{#if year !== null}
+					{#each availableDates.filter((date) => date.year == year) as date}
+						<option value={date.month}
+							>{monthNames[date.month]}</option
+						>
+					{/each}
+				{:else}
+					{#each Array.from(availableDates.reduce((a, c) => {
+							a.add(c.month);
+							return a;
+						}, new Set())) as availableMonth}
+						<option
+							value={availableMonth}
+							selected={month === availableMonth}
+							>{monthNames[availableMonth]}</option
+						>
+					{/each}
+				{/if}
+			</select>
+
+			<div class="help-label">
+				<HelpLabel>Bitte geben Sie hier den <b>Startmonat der ersten Verbrauchsperiode</b> ein. Es sind nur Monate auswählbar, 
+					die im zulässigen Zeitraum (Endzeitpunkt von Jahr 3 darf nicht älter als 18 Monate sein) liegen. Wählen Sie ein 
+					aktuellerses Jahr um alle Monate zu sehen.
+					</HelpLabel>
+			</div>
+		</div>
+
+		<div class="input-standard">
+			<Inputlabel title="Start-Jahr *"></Inputlabel>
+
+			<select
+				name="energieverbrauch_zeitraum_jahr"
+				class="rounded-tl-none rounded-bl-none w-full m-0"
+				bind:value={year}
+				required
+			>
+				{#each Array.from(availableDates.reduce((a, c) => {
+						a.add(c.year);
+						return a;
+					}, new Set())) as year}
+					<option
+						value={year}
+						selected={ausweis.startdatum?.getFullYear() === year}
+						>{year}</option
+					>
+				{/each}
+			</select>
+
+			<div class="help-label">
+				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
+					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
+			</div>
+		</div>
+	</div>
+
+	<!-- primäre Brennstoff und Einheiten * -->
+
+	<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
+		<div class="input-standard">
+			<Inputlabel title="primär Brennstoff *"></Inputlabel>
+
+			<select
+				class="rounded-e-none"
+				name="brennstoff_1"
+				bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
+				required
+			>
+				<option disabled selected value={false}>Bitte auswählen</option>
+				{#each Object.keys(fuelMap) as fuel}
+					<option value={fuel}>{fuel}</option>
+				{/each}
+			</select>
+
+			<div class="help-label">
+				<HelpLabel>
+					<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
+					<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
+					<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
+					<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
+					<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
+					<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
+					<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie 
+						den Primärenergiefaktor bei Ihrem Energieversorger</strong>  (meistens mit regenartivem Anteil)<br/>
+					<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
+					<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
+				</HelpLabel>
+			</div>
+		</div>
+
+		<div class="input-standard">
+			<Inputlabel title="Einheit *"></Inputlabel>
+
+			<select
+				class="rounded-s-none"
+				name="einheit_1"
+				bind:value={ausweis.einheit_1}
+				disabled={!gebaeude_aufnahme_allgemein.brennstoff_1}
+				required
+			>
+				<option disabled selected value={false}>Bitte auswählen</option>
+				{#each fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : [] as unit}
+					<option value={unit}>{unit}</option>
+				{/each}
+			</select>
+
+			<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an. 
+					Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
+					Litern vor. Pellets oder Brennholz in kg.
+				</HelpLabel>
+			</div>
+		</div>
+	</div>
+
+	<!-- Verbrauch 1 -->
+
+	<div class="input-standard order-4 md:order-4 xl:order-4">
+		<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
+
+		<input
+			name="verbrauch_1"
+			type="number"
+			class:linked={abweichung.indexOf(1) > -1}
+			bind:value={ausweis.verbrauch_1}
+			required
+		/>
+
+		<div class="VerbrauchsEinheit">
+			{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
+		</div>
+
+		<div class="help-label">
+			<HelpLabel>
+				<VerbrauchsHelpLabel
+					bind:ausweis
+					bind:gebaeude_aufnahme_allgemein
+					addYear={1}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
+
+	<!-- Verbrauch 2 -->
+
+	<div class="input-standard order-5 md:order-5 xl:order-5">
+		<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
+
+		<input
+			name="verbrauch_2"
+			type="number"
+			class:linked={abweichung.indexOf(2) > -1}
+			bind:value={ausweis.verbrauch_2}
+			required
+		/>
+		<div class="VerbrauchsEinheit">
+			{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
+		</div>
+
+		<div class="help-label">
+			<HelpLabel>
+				<VerbrauchsHelpLabel
+					bind:ausweis
+					bind:gebaeude_aufnahme_allgemein
+					addYear={2}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
+
+	<!-- Verbrauch 3 -->
+
+	<div class="input-standard order-6 md:order-6 xl:order-6">
+		<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
+
+		<input
+			name="verbrauch_3"
+			type="number"
+			class:linked={abweichung.indexOf(3) > -1}
+			bind:value={ausweis.verbrauch_3}
+			required
+		/>
+		<div class="VerbrauchsEinheit">
+			{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
+		</div>
+
+		<div class="help-label">
+			<HelpLabel>
+				<VerbrauchsHelpLabel
+					bind:ausweis
+					bind:gebaeude_aufnahme_allgemein
+					addYear={3}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
+
+	{#if ausweis.zusaetzliche_heizquelle}
+		<div
+			class="col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"
+		></div>
+
+		<!-- zusätzliche Heizquelle -->
+
+		<div class="input-standard order-7 md:order-7 xl:order-7">
+			<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
+
+			<div class="input-checkboxen">
+				<div
+					class="grid grid-cols-[40px_max-content] items-center justify-items-start"
+				>
+					<input
+						id="zusaetzliche_heizquelle"
+						type="checkbox"
+						class="checkbox"
+						name="zusaetzliche_heizquelle"
+						bind:checked={ausweis.zusaetzliche_heizquelle}
+					/>
+					<label for="zusaetzliche_heizquelle" class="cursor-pointer"
+						>zusätzliche Heizquelle</label
+					>
+				</div>
+			</div>
+
+			<div class="help-label">
+				<HelpLabel>Hier sind die <b>Verbräuche einer zusätzlichen Heizquelle</b> 
+					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben</HelpLabel>
+			</div>
+		</div>
+
+		<div class="input-standard order-8 md:order-8 xl:order-8"></div>
+
+		<!-- zusätzlicher Brennstoff und Einheiten *  -->
+
+		<div class="grid grid-cols-2 gap-x-4 order-9 md:order-9 xl:order-9">
+			<div class="input-standard">
+				<Inputlabel title="zusätzlicher Brennstoff *"></Inputlabel>
+
+				<select
+					class="rounded-e-none"
+					name="brennstoff_2"
+					bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
+					required
+				>
+					<option disabled selected value={false}
+						>Bitte auswählen</option
+					>
+					{#each Object.keys(fuelMap) as fuel}
+						<option value={fuel}>{fuel}</option>
+					{/each}
+				</select>
+
+				<div class="help-label">
+					<HelpLabel>
+					<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
+					<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
+					<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
+					<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
+					<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
+					<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
+					<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie 
+						den Primärenergiefaktor bei Ihrem Energieversorger</strong>  (meistens mit regenartivem Anteil)<br/>
+					<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
+					<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
+					</HelpLabel>
+				</div>
+			</div>
+
+			<div class="input-standard">
+				<Inputlabel title="Einheit *"></Inputlabel>
+
+				<select
+					class="rounded-s-none"
+					name="einheit_2"
+					bind:value={ausweis.einheit_2}
+					disabled={!gebaeude_aufnahme_allgemein.brennstoff_2}
+					required
+				>
+					<option disabled selected value={false}
+						>Bitte auswählen</option
+					>
+					{#each fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : [] as unit}
+						<option value={unit}>{unit}</option>
+					{/each}
+				</select>
+
+				<div class="help-label">
+					<HelpLabel>
+					Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an. 
+					Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
+					Litern vor. Pellets oder Brennholz in kg.
+					</HelpLabel>
+				</div>
+			</div>
+		</div>
+
+		<!-- Verbrauch 4 -->
+
+		<div class="input-standard order-10 md:order-10 xl:order-10">
+			<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
+
+			<input
+				name="verbrauch_4"
+				type="number"
+				bind:value={ausweis.verbrauch_4}
+				class:linked={abweichung.indexOf(4) > -1}
+			/>
+			<div class="VerbrauchsEinheit">
+				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
+			</div>
+
+			<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel
+						bind:ausweis
+						bind:gebaeude_aufnahme_allgemein
+						addYear={1}
+						heizquelle={2}
+					></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+		</div>
+
+		<!-- Verbrauch 5 -->
+
+		<div class="input-standard order-11 md:order-11 xl:order-11">
+			<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
+
+			<input
+				name="verbrauch_5"
+				type="number"
+				bind:value={ausweis.verbrauch_5}
+				class:linked={abweichung.indexOf(5) > -1}
+			/>
+			<div class="VerbrauchsEinheit">
+				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
+			</div>
+
+			<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel
+						bind:ausweis
+						bind:gebaeude_aufnahme_allgemein
+						addYear={2}
+						heizquelle={2}
+					></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+		</div>
+
+		<!-- Verbrauch 6 -->
+
+		<div class="input-standard order-12 md:order-12 xl:order-12">
+			<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
+
+			<input
+				name="verbrauch_6"
+				type="number"
+				bind:value={ausweis.verbrauch_6}
+				class:linked={abweichung.indexOf(6) > -1}
+			/>
+			<div class="VerbrauchsEinheit">
+				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
+			</div>
+
+			<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel
+						bind:ausweis
+						bind:gebaeude_aufnahme_allgemein
+						addYear={3}
+						heizquelle={2}
+					></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+		</div>
+
+	{/if}
+
+	
+	<div
+	class="col-span-3 order-[13] md:order-[13] xl:order-[13] h-[4px] bg-white mt-[-10px]"
+></div>
+
+<!-- StromVerbrauch 1 -->
+
+<div class="input-standard order-[14] md:order-[14] xl:order-[14]">
+	<StromVerbrauchslabel bind:ausweis addYear={1}></StromVerbrauchslabel>
+
+		<input
+			name="strom_1"
+			type="number"
+			bind:value={ausweis.strom_1}
+			required
+		/>
+
+	<div class="VerbrauchsEinheit">
+		kWh
+	</div>
+
+	<div class="help-label">
+		<HelpLabel>
+			<StromVerbrauchsHelpLabel
+				bind:ausweis
+				bind:gebaeude_aufnahme_allgemein
+				addYear={1}
+				heizquelle={1}
+			></StromVerbrauchsHelpLabel>
+		</HelpLabel>
+	</div>
+</div>
+
+<!-- StromVerbrauch 2 -->
+
+<div class="input-standard order-[15] md:order-[15] xl:order-[15]">
+	<StromVerbrauchslabel bind:ausweis addYear={2}></StromVerbrauchslabel>
+
+		<input
+			name="strom_2"
+			type="number"
+			bind:value={ausweis.strom_2}
+			required
+		/>
+	<div class="VerbrauchsEinheit">
+		kWh
+	</div>
+
+	<div class="help-label">
+		<HelpLabel>
+			<StromVerbrauchsHelpLabel
+				bind:ausweis
+				bind:gebaeude_aufnahme_allgemein
+				addYear={2}
+				heizquelle={1}
+			></StromVerbrauchsHelpLabel>
+		</HelpLabel>
+	</div>
+</div>
+
+<!-- StromVerbrauch 3 -->
+
+<div class="input-standard order-[16] md:order-[16] xl:order-[16]">
+	<StromVerbrauchslabel bind:ausweis addYear={3}></StromVerbrauchslabel>
+
+		<input
+			name="strom_3"
+			type="number"
+			bind:value={ausweis.strom_3}
+			required
+		/>
+	<div class="VerbrauchsEinheit">
+		kWh
+	</div>
+
+	<div class="help-label">
+		<HelpLabel>
+			<StromVerbrauchsHelpLabel
+				bind:ausweis
+				bind:gebaeude_aufnahme_allgemein
+				addYear={3}
+				heizquelle={1}
+			></StromVerbrauchsHelpLabel>
+		</HelpLabel>
+	</div>
+</div>
+
+
+</div>
+
+<div class="bereich-box mt-6 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
+"
+>
+
+<div class="col-span-3 -mb-12">Enthält Stromverbrauch für:</div>
+
+<!-- Enthält Stromverbrauch für: -->
+
+<SanierungsOption label="Heizung" name="stromverbrauch_enthaelt_heizung" help="" bind:checked={gebaeude_aufnahme_allgemein.stromverbrauch_enthaelt_heizung}></SanierungsOption>
+<SanierungsOption label="Warmwasser " name="stromverbrauch_enthaelt_warmwasser" help="" bind:checked={gebaeude_aufnahme_allgemein.stromverbrauch_enthaelt_warmwasser}></SanierungsOption>
+<SanierungsOption label="Lüftung " name="stromverbrauch_enthaelt_lueftung" help="" bind:checked={gebaeude_aufnahme_allgemein.stromverbrauch_enthaelt_lueftung}></SanierungsOption>
+<SanierungsOption label="Beleuchtung" name="stromverbrauch_enthaelt_beleuchtung" help="" bind:checked={gebaeude_aufnahme_allgemein.stromverbrauch_enthaelt_beleuchtung}></SanierungsOption>
+<SanierungsOption label="Kühlung" name="stromverbrauch_enthaelt_kuehlung" help="" bind:checked={gebaeude_aufnahme_allgemein.stromverbrauch_enthaelt_kuehlung}></SanierungsOption>
+
+<div class="input-standard">
+	<Inputlabel title="Sonstige"></Inputlabel>
+
+		<input
+			name="strom_3"
+			type="number"
+			bind:value={ausweis.strom_3}
+			required
+		/>
+
+	<div class="help-label">
+		<HelpLabel>
+		
+		</HelpLabel>
+	</div>
+</div>
+
+
+</div>
+
+<style lang="postcss">
+	.VerbrauchsEinheit {
+		@apply absolute right-[4rem];
+	}
+</style>
--- a/src/components/Ausweis/ThermischeKuehlung.svelte
+++ b/src/components/Ausweis/ThermischeKuehlung.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+
+import HelpLabel from "#labels/HelpLabel.svelte";
+import Inputlabel from "#labels/InputLabel.svelte";
+
+export let ausweis;
+
+$: {
+	if (!ausweis.warmwasser_enthalten) {
+		ausweis.warmwasser_anteil_bekannt = false;
+	}
+}
+
+
+</script>
+
+<div id="thermischekuehlung" class="bereich-box mt-6 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
+	">
+
+
+	<div class="input-standard order-1 md:order-1 xl:order-1">
+	<Inputlabel title="Thermische Kühlung im Heizverbrauch enthalten"></Inputlabel>
+
+    <div class="input-row items-center gap-2">
+
+<div class="grid grid-cols-[max-content_40px] gap-x-2 items-center justify-items-start">
+	<input
+    id="kuehlung_enthalten"
+	type="checkbox"
+	class="checkbox"
+	name="kuehlung_enthalten"
+	data-test="kuehlung_enthalten"
+	bind:checked={ausweis.kuehlung_enthalten}
+	/>
+    <label for="kuehlung_enthalten" class="cursor-pointer">Ja</label>
+</div>
+
+</div>
+
+<div class="help-label">
+	<HelpLabel>
+		TEXT FEHLT
+	</HelpLabel>
+</div>
+
+</div>
+
+
+<!-- % Anteil Warmwasser -->
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+	<Inputlabel title="% Anteil Warmwasser"></Inputlabel>
+
+    <input
+    name="anteil_kuehlung_1"
+    data-test="anteil_kuehlung_1"
+    maxlength="2"
+    type="number"
+    bind:value={ausweis.anteil_kuehlung_1}
+    disabled={!ausweis.kuehlung_enthalten || 
+        !ausweis.kuehlung_enthalten}
+    autocomplete="off"
+    />
+
+		<div class="help-label">
+				<HelpLabel>
+					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
+				</HelpLabel>
+			</div>
+</div>
+
+
+<!--zusätzliche Heizquelle -->
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+	<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
+
+    <input
+    name="anteil_kuehlung_2"
+    data-test="anteil_kuehlung_2"
+    maxlength="3"
+    type="number"
+    autocomplete="off"
+    bind:value={ausweis.anteil_kuehlung_2}
+    disabled={!ausweis.zusaetzliche_heizquelle ||
+        !ausweis.kuehlung_enthalten}
+    />
+
+		<div class="help-label">
+				<HelpLabel>
+					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+					von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
+					ein Anteil von 18% angenommen.
+				</HelpLabel>
+		</div>
+</div>
+
+
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -188,7 +188,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			</select>

 			<div class="help-label">
-				<HelpLabel>Bitte geben Sie hier den <b>Startmonat der ersten Verbruachsperiode</b> ein. Es sind nur Monate auswählbar, 
+				<HelpLabel>Bitte geben Sie hier den <b>Startmonat der ersten Verbrauchsperiode</b> ein. Es sind nur Monate auswählbar, 
 					die im zulässigen Zeitraum (Endzeitpunkt von Jahr 3 darf nicht älter als 18 Monate sein) liegen. Wählen Sie ein 
 					aktuellerses Jahr um alle Monate zu sehen.
 					</HelpLabel>
@@ -217,7 +217,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			</select>

 			<div class="help-label">
-				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbruachsperiode</b> ein. Weitere Zeitangaben müssen nichht
+				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
 					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
 			</div>
 		</div>
--- a/src/components/Ausweis/Warmwasseranteil.svelte
+++ b/src/components/Ausweis/Warmwasseranteil.svelte
@@ -175,9 +175,7 @@ $: {

 <div class="help-label">
    <HelpLabel>
-        Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
-        von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
-        ein Anteil von 18% angenommen.
+     
    </HelpLabel>

 </div>
--- a/src/components/ImageGrid.svelte
+++ b/src/components/ImageGrid.svelte
@@ -36,7 +36,7 @@
 </script>

 <div class="flex flex-col gap-4">
-	<UploadImages {name} {kategorie} {max} {min} bind:upload bind:gebaeude bind:images bind:ausweis />
+	<UploadImages {name} {kategorie} {max} {min} bind:upload bind:gebaeude bind:images bind:ausweis><slot /></UploadImages>
 	<div class="grid grid-cols-2 gap-2">
 		{#each images as image, i}
 			{#if image.kategorie == kategorie}
--- a/src/components/Tabellen/A12NutzenergiebedarfHeizung.svelte
+++ b/src/components/Tabellen/A12NutzenergiebedarfHeizung.svelte
@@ -13,10 +13,10 @@
  let maximalerWaermestrom = 2500;

  let waermeQuellen = {
-    Januar: 400,
-    Februar: 300,
-    März: 340,
-    April: 360,
+    Januar: 100,
+    Februar: 100,
+    März: 100,
+    April: 650,
    Mai: 400,
    Juni: 450,
    Juli: 450,
@@ -45,7 +45,57 @@
  let waermequellensenkenverhaeltnisNovember = 0;
  let waermequellensenkenverhaeltnisDezember = 0;
    
+  let faktorBelastungJanuar = 0; 
+  let faktorBelastungFebruar = 0;
+  let faktorBelastungMärz = 0;
+  let faktorBelastungApril = 0;
+  let faktorBelastungMai = 0;
+  let faktorBelastungJuni = 0;
+  let faktorBelastungJuli = 0;
+  let faktorBelastungAugust = 0;
+  let faktorBelastungSeptember = 0;
+  let faktorBelastungOktober = 0;
+  let faktorBelastungNovember = 0;
+  let faktorBelastungDezember = 0;

+  let monatlicheBelastungJanuar = 0;
+  let monatlicheBelastungFebruar = 0;
+  let monatlicheBelastungMärz = 0;
+  let monatlicheBelastungApril = 0;
+  let monatlicheBelastungMai = 0;
+  let monatlicheBelastungJuni = 0;
+  let monatlicheBelastungJuli = 0;
+  let monatlicheBelastungAugust = 0;
+  let monatlicheBelastungSeptember = 0;
+  let monatlicheBelastungOktober = 0;
+  let monatlicheBelastungNovember = 0;
+  let monatlicheBelastungDezember = 0;
+  
+  let heizstundenJanuar = 0;
+  let heizstundenFebruar = 0;
+  let heizstundenMärz = 0;
+  let heizstundenApril = 0;
+  let heizstundenMai = 0;
+  let heizstundenJuni = 0;
+  let heizstundenJuli = 0;
+  let heizstundenAugust = 0;
+  let heizstundenSeptember = 0;
+  let heizstundenOktober = 0;
+  let heizstundenNovember = 0;
+  let heizstundenDezember = 0;
+
+  let nutzenergieHeizungJanuar = 0;
+  let nutzenergieHeizungFebruar = 0;
+  let nutzenergieHeizungMärz = 0;
+  let nutzenergieHeizungApril = 0;
+  let nutzenergieHeizungMai = 0;
+  let nutzenergieHeizungJuni = 0;
+  let nutzenergieHeizungJuli = 0;
+  let nutzenergieHeizungAugust = 0;
+  let nutzenergieHeizungSeptember = 0;
+  let nutzenergieHeizungOktober = 0;
+  let nutzenergieHeizungNovember = 0;
+  let nutzenergieHeizungDezember = 0;
   
  let waermeSenken = {
    Januar: 0,
@@ -179,6 +229,58 @@
    ausnutzungsgradNovember = funktionAusnutzungsgrad(waermequellensenkenverhaeltnisNovember, zeitkonstante, "alleMonate");
    ausnutzungsgradDezember = funktionAusnutzungsgrad(waermequellensenkenverhaeltnisDezember, zeitkonstante, "alleMonate");

+    faktorBelastungJanuar = Math.max(1 - (waermequellensenkenverhaeltnisJanuar * ausnutzungsgradJanuar), 0);
+    faktorBelastungFebruar = Math.max(1 - (waermequellensenkenverhaeltnisFebruar * ausnutzungsgradFebruar), 0);
+    faktorBelastungMärz = Math.max(1 - (waermequellensenkenverhaeltnisMärz * ausnutzungsgradMärz), 0);
+    faktorBelastungApril = Math.max(1 - (waermequellensenkenverhaeltnisApril * ausnutzungsgradApril), 0);
+    faktorBelastungMai = Math.max(1 - (waermequellensenkenverhaeltnisMai * ausnutzungsgradMai), 0);
+    faktorBelastungJuni = Math.max(1 - (waermequellensenkenverhaeltnisJuni * ausnutzungsgradJuni), 0);
+    faktorBelastungJuli = Math.max(1 - (waermequellensenkenverhaeltnisJuli * ausnutzungsgradJuli), 0);
+    faktorBelastungAugust = Math.max(1 - (waermequellensenkenverhaeltnisAugust * ausnutzungsgradAugust), 0);
+    faktorBelastungSeptember = Math.max(1 - (waermequellensenkenverhaeltnisSeptember * ausnutzungsgradSeptember), 0);
+    faktorBelastungOktober = Math.max(1 - (waermequellensenkenverhaeltnisOktober * ausnutzungsgradOktober), 0);
+    faktorBelastungNovember = Math.max(1 - (waermequellensenkenverhaeltnisNovember * ausnutzungsgradNovember), 0);
+    faktorBelastungDezember = Math.max(1 - (waermequellensenkenverhaeltnisDezember * ausnutzungsgradDezember), 0);
+
+    monatlicheBelastungJanuar = belastungsgrade.Januar * faktorBelastungJanuar;
+    monatlicheBelastungFebruar = belastungsgrade.Februar * faktorBelastungFebruar;
+    monatlicheBelastungMärz = belastungsgrade.März * faktorBelastungMärz;
+    monatlicheBelastungApril = belastungsgrade.April * faktorBelastungApril;
+    monatlicheBelastungMai = belastungsgrade.Mai * faktorBelastungMai;
+    monatlicheBelastungJuni = belastungsgrade.Juni * faktorBelastungJuni;
+    monatlicheBelastungJuli = belastungsgrade.Juli * faktorBelastungJuli;
+    monatlicheBelastungAugust = belastungsgrade.August * faktorBelastungAugust;
+    monatlicheBelastungSeptember = belastungsgrade.September * faktorBelastungSeptember;
+    monatlicheBelastungOktober = belastungsgrade.Oktober * faktorBelastungOktober;
+    monatlicheBelastungNovember = belastungsgrade.November * faktorBelastungNovember;
+    monatlicheBelastungDezember = belastungsgrade.Dezember * faktorBelastungDezember;
+
+    if (monatlicheBelastungJanuar > 0.05) {heizstundenJanuar = 31 * 24;} else {heizstundenJanuar = (monatlicheBelastungJanuar / 0.05) * 31 * 24;}
+    if (monatlicheBelastungFebruar > 0.05) {heizstundenFebruar = 28 * 24;} else {heizstundenFebruar = (monatlicheBelastungFebruar / 0.05) * 28 * 24;}
+    if (monatlicheBelastungMärz > 0.05) {heizstundenMärz = 31 * 24;} else {heizstundenMärz = (monatlicheBelastungMärz / 0.05) * 31 * 24;}
+    if (monatlicheBelastungApril > 0.05) {heizstundenApril = 30 * 24;} else {heizstundenApril = (monatlicheBelastungApril / 0.05) * 30 * 24;}
+    if (monatlicheBelastungMai > 0.05) {heizstundenMai = 31 * 24;} else {heizstundenMai = (monatlicheBelastungMai / 0.05) * 31 * 24;}
+    if (monatlicheBelastungJuni > 0.05) {heizstundenJuni = 30 * 24;} else {heizstundenJuni = (monatlicheBelastungJuni / 0.05) * 30 * 24;}
+    if (monatlicheBelastungJuli > 0.05) {heizstundenJuli = 31 * 24;} else {heizstundenJuli = (monatlicheBelastungJuli / 0.05) * 31 * 24;}
+    if (monatlicheBelastungAugust > 0.05) {heizstundenAugust = 31 * 24;} else {heizstundenAugust = (monatlicheBelastungAugust / 0.05) * 31 * 24;}
+    if (monatlicheBelastungSeptember > 0.05) {heizstundenSeptember = 30 * 24;} else {heizstundenSeptember = (monatlicheBelastungSeptember / 0.05) * 30 * 24;}
+    if (monatlicheBelastungOktober > 0.05) {heizstundenOktober = 31 * 24;} else {heizstundenOktober = (monatlicheBelastungOktober / 0.05) * 31 * 24;}
+    if (monatlicheBelastungNovember > 0.05) {heizstundenNovember = 30 * 24;} else {heizstundenNovember = (monatlicheBelastungNovember / 0.05) * 30 * 24;}
+    if (monatlicheBelastungDezember > 0.05) {heizstundenDezember = 31 * 24;} else {heizstundenDezember = (monatlicheBelastungDezember / 0.05) * 31 * 24;}
+
+    nutzenergieHeizungJanuar = waermeSenken.Januar * faktorBelastungJanuar * heizstundenJanuar / 1000;
+    nutzenergieHeizungFebruar = waermeSenken.Februar * faktorBelastungFebruar * heizstundenFebruar / 1000;
+    nutzenergieHeizungMärz = waermeSenken.März * faktorBelastungMärz * heizstundenMärz / 1000;
+    nutzenergieHeizungApril = waermeSenken.April * faktorBelastungApril * heizstundenApril / 1000;
+    nutzenergieHeizungMai = waermeSenken.Mai * faktorBelastungMai * heizstundenMai / 1000;
+    nutzenergieHeizungJuni = waermeSenken.Juni * faktorBelastungJuni * heizstundenJuni / 1000;
+    nutzenergieHeizungJuli = waermeSenken.Juli * faktorBelastungJuli * heizstundenJuli / 1000;
+    nutzenergieHeizungAugust = waermeSenken.August * faktorBelastungAugust * heizstundenAugust / 1000;
+    nutzenergieHeizungSeptember = waermeSenken.September * faktorBelastungSeptember * heizstundenSeptember / 1000;
+    nutzenergieHeizungOktober = waermeSenken.Oktober * faktorBelastungOktober * heizstundenOktober / 1000;
+    nutzenergieHeizungNovember = waermeSenken.November * faktorBelastungNovember * heizstundenNovember / 1000;
+    nutzenergieHeizungDezember = waermeSenken.Dezember * faktorBelastungDezember * heizstundenDezember / 1000;
+
  }
 </script>

@@ -237,12 +339,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.Januar)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.Januar)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisJanuar}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisJanuar*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradJanuar*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungJanuar*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungJanuar*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenJanuar)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungJanuar)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">28</td>
@@ -253,12 +355,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.Februar)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.Februar)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisFebruar}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisFebruar*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradFebruar*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungFebruar*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungFebruar*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenFebruar)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungFebruar)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">31</td>
@@ -269,12 +371,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.März)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.März)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisMärz}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisMärz*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradMärz*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungMärz*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungMärz*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenMärz)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungMärz)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">30</td>
@@ -285,12 +387,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.April)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.April)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisApril}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisApril*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradApril*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungApril*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungApril*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenApril)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungApril)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">31</td>
@@ -301,12 +403,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.Mai)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.Mai)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisMai}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisMai*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradMai*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungMai*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungMai*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenMai)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungMai)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">30</td>
@@ -317,12 +419,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.Juni)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.Juni)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisJuni}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisJuni*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradJuni*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungJuni*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungJuni*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenJuni)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungJuni)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">31</td>
@@ -333,12 +435,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.Juli)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.Juli)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisJuli}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisJuli*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradJuli*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungJuli*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungJuli*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenJuli)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungJuli)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">31</td>
@@ -349,12 +451,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.August)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.August)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisAugust}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisAugust*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradAugust*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungAugust*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungAugust*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenAugust)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungAugust)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">30</td>
@@ -365,12 +467,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.September)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.September)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisSeptember}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisSeptember*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradSeptember*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungSeptember*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungSeptember*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenSeptember)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungSeptember)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">31</td>
@@ -381,12 +483,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.Oktober)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.Oktober)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisOktober}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisOktober*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradOktober*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungOktober*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungOktober*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenOktober)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungOktober)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">30</td>
@@ -397,12 +499,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.November)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.November)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisNovember}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisNovember*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradNovember*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungNovember*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungNovember*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenNovember)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungNovember)}</td>
      </tr>
      <tr>
        <td class="border border-gray-300 px-2 py-1 bg-gray-100">31</td>
@@ -413,12 +515,12 @@
        </td>
        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermeSenken.Dezember)}</td>
        <td class="border border-gray-300 px-2 py-1 bg-yellow-100">{Math.round(waermeQuellen.Dezember)}</td>
-        <td class="border-2 border-gray-600 px-2 py-1">{waermequellensenkenverhaeltnisDezember}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(waermequellensenkenverhaeltnisDezember*1000)/1000}</td>
        <td class="border border-gray-300 px-2 py-1 bg-blue-100">{Math.round(ausnutzungsgradDezember*1000)/1000}</td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
-        <td class="border-2 border-gray-600 px-2 py-1"></td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(faktorBelastungDezember*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(monatlicheBelastungDezember*1000)/1000}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(heizstundenDezember)}</td>
+        <td class="border-2 border-gray-600 px-2 py-1">{Math.round(nutzenergieHeizungDezember)}</td>
      </tr>
      <tr class="text-center h-10">
        <th colspan="9" class="border border-gray-300 p-2 text-left">Spalte 9:&nbsp;&nbsp;(8) &gt; 0,05 → (9) = d<sub>mth</sub> · 24 &nbsp;&nbsp;&nbsp;
--- a/src/components/UploadImages.svelte
+++ b/src/components/UploadImages.svelte
@@ -90,7 +90,13 @@
 {#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} />
+<div>
+	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} multiple on:change={getAllImages} />
+	<slot />
+</div>
 {:else}
-	<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} on:change={getAllImages} />
+<div>
+	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} on:change={getAllImages} />
+	<slot />
+</div>
 {/if}
--- a/src/components/design/content/WidgetCardTemplate.svelte
+++ b/src/components/design/content/WidgetCardTemplate.svelte
@@ -6,68 +6,94 @@
 	export let href: string;
 	export let src: string;
 	export let alt: string;
+	export let empfehlung: string;
 </script>

-<div class="box card bg-white px-6 py-4 mb-5 mt-5">
-	<div>
-		<h2>{name}</h2>
+
+
+
+		<div class="relative">
+		<h2 class="titel">{name}</h2>
+		{#if empfehlung=="ja"}
+		<div class="empfehlung bg-red-700 text-[0.75rem] text-white absolute right-12 top-1 px-2 py-1 rounded-full rotate-[5deg]">Empfelung</div>
+		{/if}
+		</div>
+
 		<hr class="mb-2" />

-		<div class="flex flex-row mb-2 mt-2 w-full items-end">
-			<div>
+		<div class="titelPic grid grid-cols-[25%_1fr_25%] items-center mb-0 mt-0 w-full">
+			
+			<div class="">
 				<img
-					class="w-[50%] !min-w-[50px]"
+					class="w-[100%] justify-self-start"
 					{src}
 					{alt}
 				/>
 			</div>
-			<div>
-				<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
-					ab<span class="promo pl-2"
-						>{price}</span
-					>€
+			
+			<div class="justify-self-start">
+				<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
+					<span class="[font-family:Antique_Olive_Compact_bold]">
+						ab {price} €
+					</span> 
 				</p>
 			</div>
+
+			<div class="variante justify-self-end">{variant}</div>
+
+			
+
 		</div>

-		<div class="white">
-			<div class="variante">{variant}</div>
+
+
+
+
+		<div class="white grid grid-rows-subgrid row-span-6 relative">
 			{#each services as [service, check]}
-			<div class="services">
-				<span>{service}</span>
+			<div class="services grid grid-cols-[content-fit_1fr] items-center">
+				<span>{@html service}</span>
 				<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
 			</div>
 			{/each}
 		</div>
-		<div class="flex flex-row flex-wrap justify-center">
+
+
+
+
+		<div class="w-full grid grid-cols-2 gap-2">
 			<a
 				{href}
-				class="w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+				class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
                    hover:bg-primary
            ">jetzt online erstellen</a
 			>

 			<a
 				{href}
-				class="w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
-                    hover:bg-primary
+				class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline 
+                    hover:bg-secondary/15
            ">zur Produktübersicht</a
 			>
 		</div>
-	</div>
-</div>

-<style lang="scss">
-	.white {
-		@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
+
+
+
+
+
+
+
+<style lang="postcss">
+	.titel {@apply [font-size:_clamp(14px,1.5vw,18px)] 
+		pr-12 text-left
 	}
-
 	.variante {
-		@apply text-2xl w-fit text-black justify-self-end mr-3;
+		@apply -mt-2 text-xl w-fit text-black justify-self-end;
 	}

 	.services {
-		@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
+		@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)];
 	}
 	.services:not(:last-child) {
 		@apply border-b-[1px] border-gray-200;
@@ -78,4 +104,5 @@
 	.check-no {
 		@apply justify-self-end font-bold text-red-700;
 	}
+
 </style>
--- a/src/components/labels/StromVerbrauchsHelpLabel.svelte
+++ b/src/components/labels/StromVerbrauchsHelpLabel.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import moment from "moment";
+
+	export let addYear: number;
+	export let heizquelle: number;
+	export let gebaeude_aufnahme_allgemein;
+	export let ausweis;
+</script>
+
+{#if ausweis.startdatum}
+	Bitte geben Sie Ihren Stromvererbrauch in kWh von
+	<b
+		>{moment(ausweis.startdatum)
+			.add(addYear - 1, "year")
+			.format("MM.Y")}</b
+	>
+	bis <b>{moment(ausweis.startdatum).add(addYear, "year").format("MM.Y")}</b>
+	ein.
+{:else}
+	Bitte geben Sie zuerst einen Starttermin für Ihre Verbräuche, den Brennstoff
+	und die Einheit in die entsprechenden Felder ein. Danach können Sie hier die
+	Verbräuche für den angegebenen Zeitraum eintragen.
+{/if}
+
+<style lang="postcss">
+</style>
--- a/src/components/labels/StromVerbrauchslabel.svelte
+++ b/src/components/labels/StromVerbrauchslabel.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import moment from "moment";
+
+    export let addYear: number;
+    export let ausweis;
+
+  
+
+</script>
+
+
+<div class="absolute border-x-[1px] border-t-[1px] border-black/25 px-3 top-[-1.275rem] left-[0rem] text-[0.8rem] rounded-t-sm font-sans">
+{#if !ausweis.startdatum}
+Stromverbrauch von - bis
+{:else}
+Stromverbrauch von {moment(ausweis.startdatum).add((addYear-1), "year").format("MM.Y")} bis {moment(ausweis.startdatum).add((addYear), "year").format("MM.Y")}
+{/if}
+
+</div>
+
+
+
+
+
+
+
+<style lang="postcss">
+
+</style>
--- a/src/components/labels/VerbrauchsHelpLabel.svelte
+++ b/src/components/labels/VerbrauchsHelpLabel.svelte
@@ -8,12 +8,12 @@
 </script>

 {#if ausweis.startdatum}
-	Bitte geben Sie Ihre
+	Bitte geben Sie Ihren
 	{#if heizquelle == 1}
 		{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b>
 				{gebaeude_aufnahme_allgemein.brennstoff_1}
 			</b>{/if}
-		Verbräuche {#if ausweis.einheit_1}
+		Verbrauch {#if ausweis.einheit_1}
 			in <b>{ausweis.einheit_1} </b>{/if}
 	{:else if heizquelle == 2}
 		{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b>
--- a/src/components/widgets/WelcherAusweisWidget_1.svelte
+++ b/src/components/widgets/WelcherAusweisWidget_1.svelte
@@ -0,0 +1,405 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
+	import { PRICES } from "#lib/constants.js";
+
+	let gebaeudetyp: string;
+	let anlass: string;
+	let einheiten: string;
+	let sanierungsstatus: string;
+	let baujahr: string;
+	let heizungsAlter: string;
+	let leerStand: string;
+
+
+	const allowedTypes = [
+		"Einfamilienhaus",
+		"Zweifamilienhaus",
+		"Mehrfamilienhaus",
+		"Mischgebäude",
+	];
+	const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
+	const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
+
+	let showVerbrauchsausweis: boolean = false
+
+	$: {
+		if (baujahr === "vor 1978") {
+			showVerbrauchsausweis =
+				allowedReason.includes(anlass) &&
+				allowedTypes.includes(gebaeudetyp) &&
+				(einheiten === "mehr als 4 Wohneinheiten" ||
+					sanierungsstatus === "saniert") && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
+		} else {
+			showVerbrauchsausweis =
+				allowedReason.includes(anlass) &&
+				allowedTypes.includes(gebaeudetyp) && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
+		}
+	}
+
+
+function row3col(){
+    var x = document.getElementById('anlass').value;
+    if(allowedReason.includes(x)){
+    document.getElementById('firstrow').classList.remove('grid-cols-2');
+    document.getElementById('firstrow').classList.add('grid-cols-3');
+    }else{
+    document.getElementById('firstrow').classList.remove('grid-cols-3');
+    document.getElementById('firstrow').classList.add('grid-cols-2');    
+    }
+}
+
+
+
+function getDivs(){
+let anzahl;
+if(showVerbrauchsausweis){console.log('1');anzahl=2;}
+if(allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)){console.log('2');anzahl=2;}
+if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('3');anzahl=2;}
+if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('4');anzahl=4;}
+
+var cols 		= 'grid-cols-'+anzahl
+console.log(cols);
+if(anzahl==1){
+
+}else if(anzahl==2) {
+	var x = document.getElementById('thirdrow')?.children;
+	console.log(x);
+	for (let i = 0; i < x.length; i++) {
+			x[i].classList.remove('col-span-1');
+			x[i].classList.add('col-span-2');
+}
+
+}else if(anzahl==4) {
+	var x = document.getElementById('thirdrow')?.children;
+	console.log(x);
+		for (let i = 0; i < x.length; i++) {
+			x[i].classList.remove('col-span-2');
+			x[i].classList.add('col-span-1');
+}
+}
+
+}
+
+</script>
+
+<div id="OEA_widget">
+	<input id="recode" type="hidden" value="widgetvorlage" />
+
+	<div id="OEA_input">
+
+
+		<div id="firstrow" class="firstrow">
+
+			<div class="auswahl">
+				<div class="titel">Anlass</div>
+				<select
+                    id="anlass"
+					class="selectfeld"
+					bind:value={anlass} on:change={row3col} on:change={getDivs}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="Vermietung/Verkauf"
+						>Vermietung/Verkauf</option
+					>
+					<option value="Modernisierung">Modernisierung</option>
+					<option value="Neubau">Neubau</option>
+					<option value="Erweiterung">Erweiterung</option>
+					<option value="Aushangpflicht">Aushangpflicht</option>
+					<option value="sonstiges">sonstiges z.B. Bank</option>
+				</select>
+			</div>
+
+			<div class="auswahl">
+				<div class="titel">Gebäudetyp</div>
+				<select 
+					class="selectfeld"
+					bind:value={gebaeudetyp} on:change={getDivs}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="Einfamilienhaus">Einfamilienhaus</option>
+					<option value="Zweifamilienhaus">Zweifamilienhaus</option>
+					<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+					<option value="Gewerbegebäude">Gewerbegebäude</option>
+					<option value="Mischgebäude">Mischgebäude</option>
+				</select>
+			</div>
+
+			{#if allowedReason.includes(anlass)}
+			<div class="auswahl">
+				<div class="titel">Sanierungsstand</div>
+				<select 
+					on:change={getDivs}
+					class="selectfeld"
+					bind:value={sanierungsstatus}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="saniert">saniert</option>
+					<option value="unsaniert">unsaniert</option>
+				</select>
+			</div>
+			{/if}
+
+		</div>
+
+		{#if allowedReason.includes(anlass)}
+		<div id="secondrow" class="secondrow">	
+			<div class="auswahl">
+				<div class="titel">Baujahr</div>
+				<select
+					class="selectfeld"
+					bind:value={baujahr}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="vor 1978">vor 1978</option>
+					<option value="nach 1977">nach 1977</option>
+				</select>
+			</div>
+
+				<div class="auswahl">
+					<div class="titel">Heizungsalter</div>
+					<select
+						class="selectfeld"
+						bind:value={heizungsAlter}
+					>
+						<option value=">= 3" selected disabled>bitte auswählen</option>
+						<option value="< 3">jünger als 3 Jahre</option>
+						<option value=">= 3">3 Jahre oder älter</option>
+					</select>
+				</div>
+
+			<div class="auswahl">
+				<div class="titel">Wohneinheiten</div>
+				<select
+					class="selectfeld"
+					bind:value={einheiten}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="bis 4 Wohneinheiten"
+						>bis 4 Wohneinheiten</option
+					>
+					<option value="mehr als 4 Wohneinheiten"
+						>mehr als 4 Wohneinheiten</option
+					>
+				</select>
+			</div>
+
+			<div class="OEA_item4">
+				<div class="titel">Leerstand</div>
+				<select
+					class="selectfeld"
+					bind:value={leerStand}
+				>
+					<option value="bis 30" selected disabled>bitte auswählen</option>
+					<option value="bis 30"
+						>bis 30%</option
+					>
+					<option value="mehr als 30"
+						>mehr als 30%</option
+					>
+				</select>
+			</div>
+		</div>
+		{/if}
+
+		<div id="thirdrow" class="thirdrow">
+			{#if showVerbrauchsausweis}
+
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Verbrauchsausweis Wohngebäude"
+					price={PRICES.VerbrauchsausweisWohnen[0]}
+					src="/images/right-sidebar/wohngebaeude.svg"
+					alt="Wohnhaus Verbrauchsausweis"
+					variant="einfach"
+					services={[
+						["3&nbsp;Jahresverbräuche der Heizung benötigt.", true],
+						["Zulässig bei Vermietung oder Verkauf.", true],
+						["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
+						["Ungenau durch individuelles Heizverhalten.", false],
+						["Wird nicht immer bei den Banken akzeptiert.", false]
+					]}
+					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+
+
+
+			{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Bedarfsausweis Wohngebäude"
+					price={PRICES.BedarfsausweisWohnen[0]}
+					src="/images/right-sidebar/wohngebaeude.svg"
+					alt="Wohnhaus Bedarfsausweis"
+					variant="fundiert"
+					empfehlung="ja"
+					services={[
+						["Erfassung der Gebäudegeometrie.", true],
+						["Für Vermietung, Verkauf und Finanzierung.", true],
+						["Zulässig auch für unsanierte Objekte.", true],
+						["Kann als Grundlage für den ISFP dienen.", true],
+						["Objektivere Berechnungsmethode nach DIN 18599.", true],
+					]}
+					href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+
+			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Verbrauchsausweis Gewerbegebäude"
+					price={PRICES.VerbrauchsausweisGewerbe[0]}
+					src="/images/right-sidebar/gewerbegebaeude.svg"
+					alt="Gewerbe Verbrauchsausweis"
+					variant="einfach"
+					services={[
+						
+						["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
+						["Zulässig bei Vermietung oder Verkauf.", true],
+						["Für bauliche und energetische Maßnahmen ungeeignet.", false],
+						["Wird nicht immer bei den Banken akzeptiert.", false],
+                        ["xxx", false],
+					]}
+					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/" 
+				></WidgetCardTemplate>
+				
+				</div>
+			{/if}
+
+			{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="GEG-Nachweis Gewerbegebäude"
+					price={PRICES.BedarfsausweisGewerbe[0]}
+					src="/images/right-sidebar/gewerbegebaeude.svg"
+					alt="Gewerbe Bedarfsausweis"
+					variant="Bauvorlage"
+					services={[
+						
+						["xxx", true],
+						["xxx", true],
+						["xxx", false],
+						["xxx", false],
+                        ["xxx", false],
+					]}
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				></WidgetCardTemplate>
+				
+				</div>
+			{/if}
+
+			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
+				<div
+					class="produktbox"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="Bedarfsausweis Gewerbegebäude"
+					price={PRICES.BedarfsausweisGewerbe[0]}
+					src="/images/right-sidebar/gewerbegebaeude.svg"
+					alt="Gewerbe Bedarfsausweis"
+					variant="fundiert"
+					empfehlung="ja"
+					services={[
+						
+						["Mehrzonenmodell nach DIN 18599.", true],
+						["Zulässig bei Vermietung oder Verkauf.", true],
+						["Grundlage für Sanierung-Varianten.", false],
+						["Objektiveres, besser vergleichbares Ergebnis.", false],
+                        ["xxx", false],
+					]}
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				></WidgetCardTemplate>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+
+@font-face {
+	font-family: 'Heron';
+	font-weight: 700;
+	font-style: normal;
+	font-display:swap;
+	src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
+  }
+
+  @font-face {
+	font-family: 'Antique Olive Compact bold';
+	font-weight: 700;
+	font-style: normal;
+	font-display:swap;
+	src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
+  }
+
+
+*{font-family: "Heron";}
+
+#OEA_widget {
+	@apply w-full min-w-[640px] max-w-[1920px] p-[10px];
+
+.firstrow{@apply grid grid-cols-2 gap-x-4 gap-y-2;
+
+.titel{@apply text-white  font-sans font-bold bg-[#444f94] px-2 py-1 rounded-[0.25rem];}
+
+.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
+
+}
+
+.secondrow{@apply grid grid-cols-4 gap-x-4 gap-y-2 mt-4;
+
+.titel{@apply text-black font-sans font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
+    
+.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
+
+}
+
+.thirdrow{@apply grid grid-cols-4 gap-x-4 gap-y-2;
+
+.produktbox{@apply grid grid-rows-subgrid col-span-2 row-span-12 ring-1 ring-black/15 rounded-sm bg-white 
+	px-2 py-2 mt-5;
+
+
+}
+
+}
+
+
+}
+
+
+
+
+
+
+
+
+			
+
+			
+	
+			
+
+		
+
+			
+		
+	
+</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/layouts/WidgetLayout_1.astro
+++ b/src/layouts/WidgetLayout_1.astro
@@ -0,0 +1,23 @@
+---
+
+---
+
+<!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="IB Cornelsen - Widget"
+		/>
+		<title>
+			IB Cornelsen - Widget
+		</title>
+	</head>
+
+	<body>
+		<slot />
+	</body>
+</html>
--- 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 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>
+
+<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>

-	<div>
-		<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 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>
-				<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 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>

-				<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>
+
+		<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}
-							<tr>
-								<td>{service.name}</td>
-								<td
-									><input
+
+						<div class="zusatz">
+							
+								<input
 										type="checkbox"
-										class="checkbox checkbox-secondary"
 										bind:checked={service.selected}
 									/>
-								</td>
-							</tr>
+									<div class="text-right pr-6"><b>{@html service.price} €</b> inkl. Mwst</div>
+									<div>{@html service.name}</div>
+								
+						</div>
 						{/each}
-					</table>
-				</div>
-			</div>
-		</div>
-		<div class="flex flex-row justify-between mt-4">
-			<!-- TODO: Zurück implementieren -->
-			<button class="button w-min">Zurück</button>
-			<div class="flex flex-row gap-4">
-				<!-- TODO: Speichern implementieren -->
-				<button class="button">Speichern</button>
-				<button class="button" on:click={speichern}>Zum Kaufabschluss</button
-				>
-			</div>
+				
+
 		</div>
+
+
+			
 	</div>
 </div>

-<style>
-	.test-box div {
-		@apply flex flex-col gap-1.5;
+</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/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -1,9 +1,25 @@
 <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";
+
+	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";
+	import ThermischeKuehlung from "#components/Ausweis/ThermischeKuehlung.svelte";
+	import LueftungundLeerstand from "#components/Ausweis/LueftungundLeerstand.svelte";
+	import SanierungszustandHeizungsanlage from "#components/Ausweis/SanierungszustandHeizungsanlage.svelte";
+	import SanierungszustandFensterTueren from "#components/Ausweis/SanierungszustandFensterTueren.svelte";
+	import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
+	import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";
+	
+	import Bereich from "#labels/Bereich.svelte";
 	import HelpLabel from "#components/HelpLabel.svelte";
 	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import StromVerbrauch from "#components/Ausweis/StromVerbrauch.svelte";
 	import Label from "#components/Label.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import ZipSearch from "../../components/PlzSuche.svelte";
@@ -17,599 +33,178 @@
 	export let ausweis: VerbrauchsausweisGewerbeClient;
 	export let user: BenutzerClient = {} as BenutzerClient;

+	export let Energieausweis	=	"Verbrauchsausweis Gewerbe";
+
 	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
 	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
 	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];

 		function automatischAusfüllen() {
 	}
+
+	async function spaeterWeitermachen() {
+		const result = await verbrauchsausweisWohnenSpeichern(
+			ausweis,
+			gebaeude,
+			gebaeude_aufnahme_allgemein,
+			images,
+			user
+		);
+
+		if (result !== null) {
+			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+			// Sonst müsste er alles neu eingeben...
+			ausweis.uid = result.uid;
+			gebaeude.uid = result.gebaeude_uid;
+			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid;
+			window.history.pushState(
+				{},
+				"",
+				`${location.pathname}?uid=${result.uid}`
+			);
+			speichernOverlayHidden = false;
+		}
+	}
 </script>

-<div class="flex flex-row gap-8 items-center mb-8">
-	<div class="flex flex-col w-full">
-		<h1>Verbrauchsausweis Gewerbe erstellen - 65€</h1>
-		<Progressbar progress={0} />
-	</div>

-	<PerformanceScore bind:ausweis bind:gebaeude bind:gebaeude_aufnahme_allgemein />
+<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>

+<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">{Energieausweis} {PRICES.VerbrauchsausweisGewerbe[0]} €</h2>
+	<ProgressBar progress={0} />
+</div>
+
+</div>
+
+
+
 <!-- TODO: Submit implementieren in externer Datei wenn Verbrauchsausweis Wohnen fertig ist -->
-<form name="ausweis" on:submit={() => {}}>
-	<fieldset
-		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
-	>
-		<div class="flex flex-row justify-between">
-			<a class="button" href="/speichern">Später Weitermachen</a>
-			<div class="flex gap-4">
-				<Hilfe />
-				<button
-					on:click={automatischAusfüllen}
-					type="button"
-					class="button">Automatisch Ausfüllen</button
-				>
-			</div>
-		</div>

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

-		<Label>A - Prüfung der Ausweisart</Label>
+		<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />

-		<Ausweisart bind:ausweis bind:gebaeude bind:gebaeude_aufnahme_allgemein />
+		<!-- A Prüfung der Ausweisart -->

-		<div
-			class="flex flex-col p-4"
-			class:hidden={!false}
-		>
-			<div class="form-group col-md-9">
-				<HelpLabel
-					title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
-				>
-					Der Bedarfsausweis ist die etwas umfangreichere Berechnung.
-					Sie benötigen z.B. Länge, Breite und Geschoßhöhe des
-					Gebäudes. Auch müssen genauere Angaben zur Anlagentechnik
-					gemacht werden.
-				</HelpLabel>
-			</div>
+		<Bereich bereich="A" title="Prüfung der Ausweisart">
+			<Ausweisart
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+				{Energieausweis}
+			/>
+		</Bereich>

-			<div class="form-group col-md-3">
-				<a class="button" href="/bedarfsausweis"
-					>Bedarfsausweis erstellen</a
-				>
-			</div>
-		</div>
-		<hr />
-		<div>
-			<Label
-				>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche,
-				Kellerund Dachgeschoss</Label
+		<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
+
+		<Bereich
+			bereich="B"
+			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
 			>
+			<GebaeudeDaten 
+			bind:gebaeude_aufnahme_allgemein />
+			</Bereich
+		>
+
+		<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->
+
+		<Bereich
+			bereich="C"
+			title="Eingabe von 3 zusammenhängenden Verbrauchsjahren"
+			>
+			<StromVerbrauch
+			bind:gebaeude
+			bind:gebaeude_aufnahme_allgemein
+			bind:ausweis
+		/>
+			</Bereich>
+
+		<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->
+
+		<Bereich
+			bereich="D"
+			title="Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen"
+			>
+			<Warmwasseranteil bind:ausweis />
+			
+			<ThermischeKuehlung bind:ausweis />
+			</Bereich
+		>
+
+		<!-- E Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand -->
+
+		<Bereich
+			bereich="E"
+			title="Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand"
+			><LueftungundLeerstand bind:gebaeude_aufnahme_allgemein /></Bereich
+		>
+
+		<!-- F Angaben zur Heizungsanlage -->
+
+		<Bereich bereich="F" title="Angaben zur Heizunganlage"
+			><SanierungszustandHeizungsanlage
+				bind:images
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/></Bereich
+		>
+
+		<!-- G Angaben zur Fenster, Dachfenster und Türen -->
+
+		<Bereich bereich="G" title="Angaben zu Fenster, Dachfenster und Türen"
+			><SanierungszustandFensterTueren
+				bind:images
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/></Bereich
+		>
+		<!-- H Angaben zur Wärmedammung -->
+
+		<Bereich bereich="H" title="Angaben zur Wärmedämmung"
+			><SanierungszustandWaermedammung
+				bind:images
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/></Bereich
+		>
+
+		<!-- I Gebäudebild und Energieausweis PDF Vorschau  -->
+
+		<Bereich bereich="I" title="Gebäudebild und Energieausweis PDF Vorschau"
+			><AusweisPreviewContainer
+				bind:images
+				bind:ausweis
+				bind:gebaeude
+			/></Bereich>
+			
 		</div>			
 		
-		<div class="GRB">
-			<!-- Strasse -->
-			<div class="form-group col-md-4">
-				<HelpLabel title="Straße, Hausnummer *">
-					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
-					ein.
-				</HelpLabel>
-				<div>
-					<input
-						name="adresse"
-						type="text"
-						autocomplete="off"
-						required
-						minlength="5"
-						maxlength="40"
-						bind:value={gebaeude.adresse}
-					/>
-				</div>
-			</div>
+			<ButtonWeiterHilfe {spaeterWeitermachen}
+			bind:ausweis
+			bind:images
+			bind:user
+			bind:gebaeude
+			bind:gebaeude_aufnahme_allgemein
+			>
+			</ButtonWeiterHilfe>
 		
-			<!-- PLZ -->
-			<div class="form-group col-md-4 PLZ">
-				<ZipSearch
-					bind:zip={gebaeude.plz}
-					bind:city={gebaeude.ort}
-					name="plz"
-				/>
-			</div>
 		
-			<!-- IGort: readonly entfernt - Nelson -->
-			<div class="form-group col-md-4">
-				<HelpLabel title="Ort *">
-					Ort des Gebäudes wird automatisch ermittelt.
-				</HelpLabel>
-				<div>
-					<input
-						name="ort"
-						readonly
-						bind:value={gebaeude.ort}
-						type="text"
-					/>
-				</div>
-			</div>
-			<!-- Wohnfläche -->
-			<div class="form-group col-md-4">
-				<HelpLabel title="Wohnfläche m² *">
-					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
-					Dabei handelt es sich um die Wohnfläche abzüglich
-					vorhandener Flächen die sich außerhalb des Gebäudes
-					befinden. (Balkone, Terassen,etc.).
-				</HelpLabel>
-				<div>
-					<input
-						name="flaeche"
-						maxlength="4"
-						type="number"
-						required
-						autocomplete="off"
-						minlength="2"
-						bind:value={gebaeude.flaeche}
-					/>
-				</div>
-			</div>
-
-			<!-- Keller -->
-			<div class="form-group col-md-4">
-				<Label>Keller *</Label>
-				<div>
-					<select
-						name="keller"
-						required
-						bind:value={gebaeude.keller}
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
-						<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
-						<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Dachgeschoss -->
-			<div class="form-group col-md-4">
-				<Label>Dachgeschoss *</Label>
-				<div>
-					<select name="dachgeschoss" required>
-						<option disabled>Bitte auswählen</option>
-						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
-						<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
-						<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
-					</select>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-		<div>
-			<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
-		</div>
-
-		<div class="GRB">
-			<Verbrauch bind:ausweis bind:gebaeude bind:gebaeude_aufnahme_allgemein />
-		</div>
-		<hr>
-		<div class="flex flex-row gap-4">
-			<div class="GRB">
-				<div class="flex flex-col gap-4">
-					<div>
-						<HelpLabel title="Gebäudestrom">
-							Bitte geben Sie hier den Gesamtstromverbrauch der betrachteten Zeiträume in kWh ein. Bei dem Stromverbrauch der Heizung ist die Hilfsenergie gemeint, oder der Verbrauch von elektrischen Ergänzungsheizungen ( z.B. raumlufttechnische Anlagen).
-						</HelpLabel>
-					</div>
-					<div class="grid grid-cols-3 gap-4">
-						<div class="flex flex-col gap-2">
-							<div class="flex flex-row items-center gap-4">
-								<span>von</span>
-								<input
-									class="klima"
-									value={moment(ausweis.startdatum)
-										.format("MM.Y")}
-									readonly
-								/>
-							</div>
-							<div class="flex flex-row items-center gap-4">
-								<span>von</span>
-								<input
-									class="klima"
-									value={moment(ausweis.startdatum)
-										.add("1", "years")
-										.format("MM.Y")}
-									readonly
-								/>
-							</div>
-							<div class="flex flex-row items-center gap-4">
-								<span>von</span>
-								<input
-									class="klima"
-									value={moment(ausweis.startdatum)
-										.add("2", "years")
-										.format("MM.Y")}
-									readonly
-								/>
-							</div>
-						</div>
-						<div class="flex flex-col gap-2">
-							<div class="flex flex-row items-center gap-4">
-								<span>bis</span>
-								<input
-									class="klima"
-									value={moment(ausweis.startdatum)
-										.add("1", "years")
-										.format("MM.Y")}
-									readonly
-								/>
-							</div>
-							<div class="flex flex-row items-center gap-4">
-								<span>bis</span>
-								<input
-									class="klima"
-									value={moment(ausweis.startdatum)
-										.add("2", "years")
-										.format("MM.Y")}
-									readonly
-								/>
-							</div>
-							<div class="flex flex-row items-center gap-4">
-								<span>bis</span>
-								<input
-									class="klima"
-									value={moment(ausweis.startdatum)
-										.add("3", "years")
-										.format("MM.Y")}
-									readonly
-								/>
-							</div>
-						</div>
-						<div class="flex flex-col gap-2">
-							<div class="flex flex-row items-center gap-4">
-								<span>Verbrauch</span>
-								<input
-									name="strom_1"
-									type="number"
-									bind:value={ausweis.strom_1}
-									required
-								/>
-							</div>
-							<div class="flex flex-row items-center gap-4">
-								<span>Verbrauch</span>
-								<input
-									name="strom_2"
-									type="number"
-									bind:value={ausweis.strom_2}
-									required
-								/>
-							</div>
-							<div class="flex flex-row items-center gap-4">
-								<span>Verbrauch</span>
-								<input
-									name="strom_3"
-									type="number"
-									bind:value={ausweis.strom_3}
-									required
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="GRB">
-				<div class="flex flex-col gap-4 w-full">
-					<div>
-						<HelpLabel title="Enthält Stromverbrauch für">
-							Bitte geben Sie hier ein für welche technischen Gebäudekomponeten der Stromverbrauch angefallen ist. Sollte es zusätzliche Stromabnehmer geben die in dem angegebenen Verbrauch enthalten sind, dann setzen Sie den Haken bei Sonstige und benennen diese.
-						</HelpLabel>
-					</div>
-					<div class="flex flex-row gap-4 justify-between">
-						<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="stromverbrauch_enthaelt_heizung"
-									bind:checked={ausweis.stromverbrauch_enthaelt_heizung}
-								/>Heizung</label
-							>
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="stromverbrauch_enthaelt_warmwasser"
-									bind:checked={ausweis.stromverbrauch_enthaelt_warmwasser}
-								/>Warmwasser</label
-							>
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="stromverbrauch_enthaelt_lueftung"
-									bind:checked={ausweis.stromverbrauch_enthaelt_lueftung}
-								/>Lüftung</label
-							>
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="stromverbrauch_enthaelt_beleuchtung"
-									bind:checked={ausweis.stromverbrauch_enthaelt_beleuchtung}
-								/>Beleuchtung</label
-							>
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="stromverbrauch_enthaelt_kuehlung"
-									bind:checked={ausweis.stromverbrauch_enthaelt_kuehlung}
-								/>Kühlung</label
-							>
-					</div>
-					<label class="checkbox-inline"
-						>Sonstige:<input
-							type="text"
-							name="stromverbrauch_enthaelt_sonstige"
-							bind:value={ausweis.stromverbrauch_enthaelt_sonstige}
-						/></label
-					>
-				</div>
-			</div>
-		</div>
-		<hr />
-		<div>
-			<div>
-				<div class="GRB">
-					<!-- Anteil WW enthalten -->
-					<div class="flex flex-row items-center gap-6">
-						<label class="radio-inline"
-							><input
-								type="checkbox"
-								name="warmwasser_enthalten"
-								bind:checked={ausweis.warmwasser_enthalten}
-							/>Warmwasser im Heizverbrauch enthalten:*</label
-						>
-					</div>
-
-					<div class="flex flex-row gap-4">
-						<!-- Warmwasser Antel -->
-					<div class="form-group col-md-2">
-						<HelpLabel title="% Anteil Warmwasser">
-							Wenn bekannt geben Sie den Anteil der
-							Warmwasser-Versorgung hier ein. Standardmäßig wird
-							ein Anteil von 18% angenommen.
-						</HelpLabel>
-
-						<input
-							name="anteil_warmwasser_1"
-							maxlength="2"
-							type="number"
-							bind:value={ausweis.anteil_warmwasser_1}
-							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
-							autocomplete="off"
-						/>
-					</div>
-
-					<div class="form-group col-md-2">
-						<HelpLabel title="zusätzliche Heizquelle">
-							Wenn bekannt geben Sie den Anteil der
-							Warmwasser-Versorgung von der zusätzlichen
-							Heizquelle hier ein. Standardmäßig wird ein Anteil
-							von 18% angenommen.
-						</HelpLabel>
-						<input
-							name="anteil_warmwasser_2"
-							maxlength="2"
-							type="number"
-							bind:value={ausweis.anteil_warmwasser_2}
-							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
-							autocomplete="off"
-						/>
-					</div>
-					</div>
-
-					<!-- Alternative Energieversorgungssyteme -->
-					<div class="form-group col-md-5">
-						<HelpLabel
-							title="Alternative Energieversorgungssysteme genutzt für "
-						>
-							Bitte setzen Sie den Haken falls nachhaltige
-							CO2-Effiziente Heizungssysteme vorhanden sind. Das
-							wäre beispielsweise bei Pelletofen, Wärmepumpe,
-							BHKW, Solarsystem, etc. der Fall.
-						</HelpLabel>
-						<div class="flex flex-row gap-4">
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="alternative_heizung"
-									bind:checked={ausweis.alternative_heizung}
-									value="Heizung"
-								/>Heizung</label
-							>
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="alternative_warmwasser"
-									bind:checked={ausweis.alternative_warmwasser}
-									value="Warmwasser"
-								/>Warmwasser</label
-							>
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="alternative_lueftung"
-									bind:checked={ausweis.alternative_lueftung}
-									value="Lüftung"
-								/>Lüftung</label
-							>
-							<label class="checkbox-inline"
-								><input
-									type="checkbox"
-									name="alternative_kuehlung"
-									bind:checked={ausweis.alternative_kuehlung}
-									value="Kühlung"
-								/>Kühlung</label
-							>
-						</div>
-					</div>
-				</div>
-
-				<hr>
-				<div class="GRB">
-					<!-- Anteil WW enthalten -->
-					<div class="flex flex-row items-center gap-6">
-						<label class="radio-inline"
-							><input
-								type="checkbox"
-								name="kuehlung_enthalten"
-								bind:checked={ausweis.kuehlung_enthalten}
-							/>Thermische Kühlung im Heizverbrauch enthalten *</label
-						>
-					</div>
-
-					<!-- Warmwasser Antel -->
-					<div class="flex flex-row gap-4">
-						<div class="form-group col-md-2">
-							<HelpLabel title="% Anteil Warmwasser">
-								Wenn bekannt geben Sie den Anteil der
-								Warmwasser-Versorgung hier ein. Standardmäßig wird
-								ein Anteil von 18% angenommen.
-							</HelpLabel>
-	
-							<input
-								name="anteil_kuehlung_1"
-								maxlength="2"
-								type="number"
-								bind:value={ausweis.anteil_kuehlung_1}
-								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
-								autocomplete="off"
-							/>
-						</div>
-	
-						<div class="form-group col-md-2">
-							<HelpLabel title="zusätzliche Heizquelle">
-								Wenn bekannt geben Sie den Anteil der
-								Warmwasser-Versorgung von der zusätzlichen
-								Heizquelle hier ein. Standardmäßig wird ein Anteil
-								von 18% angenommen.
-							</HelpLabel>
-							<input
-								name="anteil_kuehlung_2"
-								maxlength="2"
-								type="number"
-								bind:value={ausweis.anteil_kuehlung_2}
-								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
-								autocomplete="off"
-							/>
-						</div>
-					</div>
-				</div>
-
-				<hr />
-				<div>
-					<Label
-						>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung,
-						Kühlung und Leerstand</Label
-					>
-				</div>
-				<div class="GRB grid grid-cols-5 gap-4">
-					<!-- Gebäudetyp -->
-					<div>
-						<HelpLabel title="Gebäudetyp *"
-							>Bitte wählen Sie hier den Gebäudetyp aus.
-						</HelpLabel>
-						<div>
-							<select name="gebaeudetyp" required>
-								{#each buildingTypes as type}
-									<option value={type} selected={gebaeude.gebaeudetyp == type}>{type}</option>
-								{/each}
-							</select>
-						</div>
-					</div>
-					<!-- Gebäudeteil -->
-					<div>
-						<HelpLabel title="Gebäudeteil *"
-							>Bitte geben Sie hier den Gebäudeteil ein. In den
-							meisten Fällen handelt es sich um das Gesamtgebäude.
-							Sollte es sich allerdings um ein Gebäude mit mehr
-							als 10% Gewerbeanteil handeln, so sollten 2 Ausweise
-							erstellt werden. In diesem Fall wählen Sie
-							Gebäudeteil 'Wohnen' bzw. Gebäudeteil 'Gewerbe'.</HelpLabel
-						>
-						<div>
-							<select name="gebaeudeteil" required>
-								<option disabled>Bitte auswählen</option>
-								<option value="Gesamtgebäude">
-									Gesamtgebäude</option
-								>
-								<option value="Wohnen"> Wohnen</option>
-							</select>
-						</div>
-					</div>
-					<!-- Lüftung -->
-					<div class="form-group col-md-2">
-						<HelpLabel title="Lüftung durch *"
-							>Bitte geben Sie hier ein ob über die Fenster
-							natürlich belüftet wird oder über eine
-							Lüftungsanlage.</HelpLabel
-						>
-						<div>
-							<select name="lueftung" required>
-								<option disabled>Bitte auswählen</option>
-								<option value="Fensterlüftung">
-									Fensterlüftung</option
-								>
-								<option value="Schachtlüftung">
-									Schachtlüftung</option
-								>
-								<option
-									value="Lüftungsanlage ohne Wärmerückgewinnung"
-								>
-									Lüftungsanlage ohne Wärmerückgewinnung</option
-								>
-								<option
-									value="Lüftungsanlage mit Wärmerückgewinnung"
-								>
-									Lüftungsanlage mit Wärmerückgewinnung</option
-								>
-							</select>
-						</div>
-					</div>
-					<!-- Lüftung -->
-					<div class="form-group col-md-2">
-						<HelpLabel title="Anlage Kühlung *"
-							>Bitte geben Sie an ob das Gebäude im Sommer
-							zusätzlich gekühlt wird.</HelpLabel
-						>
-						<div>
-							<select name="kuehlung" required>
-								<option disabled>Bitte auswählen</option>
-								<option value="1"> vorhanden</option>
-								<option value="0"> nicht vorhanden</option>
-							</select>
-						</div>
-					</div>
-					<!-- Leerstand -->
-					<div class="form-group col-md-2">
-						<HelpLabel title="Leerstand in %"
-							>Bitte geben Sie hier den Leerstand in % des
-							Gesamtzeitraumes (3 Jahre) ein. Zum Beispiel 4
-							Monate Leerstand in 36 Monaten wären dann ca. 11%.</HelpLabel
-						>
-						<div>
-							<input name="leerstand" maxlength="2" type="number" />
-						</div>
-					</div>
-				</div>
-
-				<hr />
-				<div class="form-group col-md-12">
-					<Label
-						>F - Bitte prüfen Sie hier die Angaben zum
-						Sanierungszustand des Gebäudes</Label
-					>
-				</div>
-
-				<BilderZusatzsysteme {ausweis} {gebaeude} bind:images bind:gebaeude_aufnahme_allgemein />
-
-				<div class="flex flex-row justify-between">
-					<Hilfe />
-					<button type="submit" class="button">Weiter</button>
-				</div>
-			</div>
-		</div>
-	</fieldset>
 </form>
--- 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";

@@ -66,6 +66,8 @@
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;

+	export let Energieausweis	=	"Verbrauchsausweis Wohngebäude";
+
 	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
 	let gebaeude =
 		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
@@ -169,6 +171,7 @@
 			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
 		}
 	}
+
 </script>

 <Overlay bind:hidden={speichernOverlayHidden}>
@@ -203,20 +206,17 @@
 <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} 
-	/>
+	<h2 class="text-primary text-xl">{Energieausweis} {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
+	<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">

-
-
 		<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />

 		<!-- A Prüfung der Ausweisart -->
@@ -226,6 +226,7 @@
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
+				{Energieausweis}
 			/>
 		</Bereich>

--- a/src/pages/energieausweis-erstellen/verbrauchsausweis-gewerbe/index.astro
+++ b/src/pages/energieausweis-erstellen/verbrauchsausweis-gewerbe/index.astro
@@ -1,6 +1,6 @@
 ---

-import AusweisLayout from "#layouts/AusweisLayout.astro";
+import AusweisLayout from "#layouts/AusweisLayoutDaten.astro";
 import VerbrauchsausweisGewerbeModule from "#modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte";
 import { VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 import { createCaller } from "#lib/caller";
--- 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/pages/widgets/[vermittler].astro
+++ b/src/pages/widgets/[vermittler].astro
@@ -1,6 +1,7 @@
 ---

-import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
+import Layout from "#layouts/WidgetLayout_1.astro";
+import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget_1.svelte";

 const { vermittler } = Astro.params;

--- 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;