diff --git a/public/placeholder.png b/public/placeholder.png
new file mode 100644
index 00000000..0b9b73ab
Binary files /dev/null and b/public/placeholder.png differ
diff --git a/src/components/Ausweis/AusweisPreviewContainer.svelte b/src/components/Ausweis/AusweisPreviewContainer.svelte
index 3afc1cd0..6c9fab18 100644
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -11,7 +11,7 @@
 		GebaeudeClient,
 		UploadedGebaeudeBild,
 		VerbrauchsausweisWohnenClient,
-	} from "./types";
+	} from "./types.js";
 
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let gebaeude: GebaeudeClient;
@@ -35,6 +35,7 @@
 				name={"gebaeude_image"}
 				kategorie={Enums.BilderKategorie.Gebaeude}
 				max={1}
+				min={1}
 				bind:gebaeude
 				bind:images
 				bind:ausweis
diff --git a/src/components/Ausweis/Ausweisart.svelte b/src/components/Ausweis/Ausweisart.svelte
index 9e6c3758..4d1ba599 100644
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -44,6 +44,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			class="rounded-e-none"
 			name="ausstellgrund"
 			placeholder="Anlass"
+			bind:value={ausweis.ausstellgrund}
 			required
 		>
 			<option disabled selected value={false}>Bitte auswählen</option>
diff --git a/src/components/Ausweis/BilderZusatzsysteme.svelte b/src/components/Ausweis/BilderZusatzsysteme.svelte
index 3ffc2ca1..628b66fa 100644
--- a/src/components/Ausweis/BilderZusatzsysteme.svelte
+++ b/src/components/Ausweis/BilderZusatzsysteme.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-import HelpLabel from "#labels/HelpLabel.svelte";
-import Inputlabel from "#labels/InputLabel.svelte";
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
 
 	import HeizungImage from "./HeizungImage.svelte";
 	import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
@@ -10,22 +10,23 @@ import Inputlabel from "#labels/InputLabel.svelte";
 	//import Label from "../Label.svelte";
 
 	import {
-	GebaeudeAufnahmeClient,
+		GebaeudeAufnahmeClient,
 		GebaeudeClient,
 		UploadedGebaeudeBild,
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
-    import { boolean } from "astro:schema";
-		import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
+	import { boolean } from "astro:schema";
+	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
-	export let ausweis: VerbrauchsausweisWohnenClient
+	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let images: UploadedGebaeudeBild[];
-
 </script>
 
-<div id="sanierungszustand" class="bereich-box grid 
+<div
+	id="sanierungszustand"
+	class="bereich-box grid
 grid-cols-1 gap-x-4 gap-y-2
 
 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
@@ -33,28 +34,96 @@ md:grid-cols-2 md:gap-x-6 md:gap-y-8
 
 xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
-">
-
-<SanierungsOption label="Zentral/Etage" name="zentralheizung" help="Bitte anklicken wenn die Heizwärme <strong>zentral erzeugt</strong> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu." value="ZH" bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}></SanierungsOption>
-<SanierungsOption label="Einzelofen" name="einzelofen" help="Bei <strong>dezentraler Erzeugung</strong> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu." value="EO" bind:checked={gebaeude_aufnahme_allgemein.einzelofen}></SanierungsOption>
-<SanierungsOption label="Durchlauferhitzer (elektrisch)" name="durchlauf_erhitzer" help="Wenn <strong>dezentrale</strong> elektrische <strong>Warmwassererzeugung</strong> vorhanden ist" value="DH" bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}></SanierungsOption>
-<SanierungsOption label="Standardkessel" name="standard_kessel" help="Gemeint sind Konstanttemperaturkessel und ältere Gebläse- oder Feststoffkessel" value="SK" bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}></SanierungsOption>
-<SanierungsOption label="Solarsystem für Warmwasser" name="solarsystem_warmwasser" help="Solarpanele auf dem Dach zur <strong>alternativen Warmwassererzeugung</strong> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik." value="SSWW" bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}></SanierungsOption>
-<SanierungsOption label="Wärmepumpe" name="waermepumpe" help="Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <strong>Umgebungsluft, dem Erdreich oder Grundwasser</strong> nutzbar macht." value="WP" bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}></SanierungsOption>
-<SanierungsOption label="Niedertemperaturkessel" name="niedertemperatur_kessel" help="Heizkessel der mit <strong>niedrigen Vorlauftemperaturen</strong> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt." value="NK" bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}></SanierungsOption>
-<SanierungsOption label="Brennwertkessel" name="brennwert_kessel" help="Hat einen besonders <strong>hohen Wirkungsgrad</strong> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}></SanierungsOption>
-<SanierungsOption label="Warmwasserrohre gedämmt" name="warmwasser_rohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen." value="BWK" bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}></SanierungsOption>
-<SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen.ext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
-<SanierungsOption label="Zirkulation" name="zirkulation" help="Kreislauf von Heizungs- oder Warmwasser <strong>innerhalb eines Leitungssystems</strong>, um eine gleichmäßige Wärmeverteilung sicherzustellen." value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
-<SanierungsOption label="Photovoltaik auf dem Dach" name="photovoltaik" help="Direkte Umwandlung von Sonnenlicht in <strong>elektrische Energie</strong> mittels Solarzellen, die den photoelektrischen Effekt nutzen." value="PV" bind:checked={gebaeude_aufnahme_allgemein.photovotaik}></SanierungsOption>
+"
+>
+	<SanierungsOption
+		label="Zentral/Etage"
+		name="zentralheizung"
+		help="Bitte anklicken wenn die Heizwärme <strong>zentral erzeugt</strong> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu."
+		value="ZH"
+		bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Einzelofen"
+		name="einzelofen"
+		help="Bei <strong>dezentraler Erzeugung</strong> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu."
+		value="EO"
+		bind:checked={gebaeude_aufnahme_allgemein.einzelofen}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Durchlauferhitzer (elektrisch)"
+		name="durchlauf_erhitzer"
+		help="Wenn <strong>dezentrale</strong> elektrische <strong>Warmwassererzeugung</strong> vorhanden ist"
+		value="DH"
+		bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Standardkessel"
+		name="standard_kessel"
+		help="Gemeint sind Konstanttemperaturkessel und ältere Gebläse- oder Feststoffkessel"
+		value="SK"
+		bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Solarsystem für Warmwasser"
+		name="solarsystem_warmwasser"
+		help="Solarpanele auf dem Dach zur <strong>alternativen Warmwassererzeugung</strong> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik."
+		value="SSWW"
+		bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Wärmepumpe"
+		name="waermepumpe"
+		help="Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <strong>Umgebungsluft, dem Erdreich oder Grundwasser</strong> nutzbar macht."
+		value="WP"
+		bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Niedertemperaturkessel"
+		name="niedertemperatur_kessel"
+		help="Heizkessel der mit <strong>niedrigen Vorlauftemperaturen</strong> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt."
+		value="NK"
+		bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Brennwertkessel"
+		name="brennwert_kessel"
+		help="Hat einen besonders <strong>hohen Wirkungsgrad</strong> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt."
+		value="BWK"
+		bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Warmwasserrohre gedämmt"
+		name="warmwasser_rohre_gedaemmt"
+		help="Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen."
+		value="BWK"
+		bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Heizungsrohre gedämmt"
+		name="heizungsrohre_gedaemmt"
+		help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <strong>dunklen Ummantelungen</strong> (Manschetten) zu erkennen.ext"
+		value="HRGD"
+		bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Zirkulation"
+		name="zirkulation"
+		help="Kreislauf von Heizungs- oder Warmwasser <strong>innerhalb eines Leitungssystems</strong>, um eine gleichmäßige Wärmeverteilung sicherzustellen."
+		value="ZK"
+		bind:checked={gebaeude_aufnahme_allgemein.zirkulation}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Photovoltaik auf dem Dach"
+		name="photovoltaik"
+		help="Direkte Umwandlung von Sonnenlicht in <strong>elektrische Energie</strong> mittels Solarzellen, die den photoelektrischen Effekt nutzen."
+		value="PV"
+		bind:checked={gebaeude_aufnahme_allgemein.photovoltaik}
+	></SanierungsOption>
 </div>
 
 <HeizungImage bind:images bind:ausweis bind:gebaeude />
 
-<style lang="postcss">
-
-</style>
-
 <!--
 	<HelpLabel title="Heizungsanlage (bitte immer zutreffendes ankreuzen) *">
 		Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
@@ -286,3 +355,5 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 
 -->
 
+<style lang="postcss">
+</style>
diff --git a/src/components/Ausweis/DaemmungImage.svelte b/src/components/Ausweis/DaemmungImage.svelte
index d331ec65..2138cc84 100644
--- a/src/components/Ausweis/DaemmungImage.svelte
+++ b/src/components/Ausweis/DaemmungImage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
 	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -59,6 +59,6 @@
 			Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 2 Bilder hoch:</strong>
 		</p>
-		<ImageGrid max={4} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
+		<ImageGrid max={4} min={2} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
 	</div>
 </div>
diff --git a/src/components/Ausweis/FensterImage.svelte b/src/components/Ausweis/FensterImage.svelte
index a1fe6f9a..956915ef 100644
--- a/src/components/Ausweis/FensterImage.svelte
+++ b/src/components/Ausweis/FensterImage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
 	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -55,6 +55,6 @@
 			Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
 		</p>
-		<ImageGrid max={4} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
+		<ImageGrid max={4} min={1} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
 	</div>
 </div>
diff --git a/src/components/Ausweis/HeizungImage.svelte b/src/components/Ausweis/HeizungImage.svelte
index 8f164c22..448cfacf 100644
--- a/src/components/Ausweis/HeizungImage.svelte
+++ b/src/components/Ausweis/HeizungImage.svelte
@@ -51,6 +51,6 @@
 			Ihrem Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
 		</p>
-		<ImageGrid name={"heizung_image"} kategorie={Enums.BilderKategorie.Heizung} max={4} bind:gebaeude bind:images bind:ausweis />
+		<ImageGrid name={"heizung_image"} kategorie={Enums.BilderKategorie.Heizung} max={4} min={1} bind:gebaeude bind:images bind:ausweis />
 	</div>
 </div>
diff --git a/src/components/Ausweis/Verbrauch.svelte b/src/components/Ausweis/Verbrauch.svelte
index a8173d73..5b640a1c 100644
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
-    import HelpLabel from "#labels/HelpLabel.svelte";
-    import Inputlabel from "#labels/InputLabel.svelte";
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
 	import Verbrauchslabel from "#labels/VerbrauchsLabel.svelte";
 	import VerbrauchsHelpLabel from "#labels/VerbrauchsHelpLabel.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 {
+		GebaeudeAufnahmeClient,
+		GebaeudeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./types.js";
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
@@ -38,9 +42,15 @@
 		"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");
-	
+	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(),
@@ -54,7 +64,6 @@
 		fuelMap[fuel[0]] = fuelMap[fuel[0]] || [];
 		fuelMap[fuel[0]].push(fuel[1]);
 	}
-	
 
 	let month = ausweis.startdatum?.getMonth() || null;
 	let year = ausweis.startdatum?.getFullYear() || null;
@@ -63,451 +72,500 @@
 		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();
+			ausweis.startdatum = moment()
+				.set("month", month)
+				.set("year", year)
+				.startOf("month")
+				.add(2, "days")
+				.toDate();
 		}
 	}
 
 	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
-
-
 </script>
 
-
-
-
-<div id="verbrauch" class="bereich-box grid 
+<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 -->
 
-<!-- primäre Heizquellen -->
+	<div class="input-standard order-1 md:order-1 xl:order-1">
+		<Inputlabel title="Heizquellen"></Inputlabel>
 
-<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="checked"
-			onclick="return false"
-		/>
-		<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" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
-		{/if}
-	</div>
-
-</div>
-
-<div class="help-label">
-	<HelpLabel>
-		TEXT FEHLT
-	</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
-		>
-		<option disabled>Monat</option>
-		{#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 month}
-				<option value={month}>{monthNames[month]}</option>
-			{/each}
-		{/if}
-	</select>
-	
-	<div class="help-label">
-		<HelpLabel>
-			TEXT FEHLT
-		</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
-	>
-	<option disabled>Jahr</option>
-	{#each Array.from(availableDates.reduce((a,c) => {
-		a.add(c.year);
-		return a;
-	}, new Set())) as year}
-		<option value={year}>{year}</option>
-	{/each}
-	</select>
-	
-			<div class="help-label">
-				<HelpLabel>
-					TEXT FEHLT
-				</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
+		<div class="input-checkboxen">
+			<div
+				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
 			>
-			<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 Brennstoff; Heizöl wird aus schwer
-						entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
-						<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
-						unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
-						zu Erdgas L einen leicht höheren Methangehalt, und daher einen
-						etwas besseren Brennwert.<br /><br />
-						<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
-						bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
-						bleiben.<br /><br />
-						<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
-						Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
-						/><br />
-						<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
-						oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
-						werden.<br /><br />
-						<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
-						zerkleinertes Holz.<br /><br />
-						<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
-						über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
-						Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
-						Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
-						dezentral realisiert.<br /><br />
-						<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
-						<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><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. Erdgas wird meist auf der
-						Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
-						vor. Pellets oder Brennholz in SRm (Schüttraummetern).
-					</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}{:else}{ausweis.einheit_1}{/if}</div>
+				<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>
-					<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}{:else}{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}{:else}{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" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
+			<HelpLabel>TEXT FEHLT</HelpLabel>
+		</div>
 	</div>
 
-</div>
+	<!-- Zeitraum 1 -->
 
-<div class="help-label">
-	<HelpLabel>
-		TEXT FEHLT
-	</HelpLabel>
-</div>
+	<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>
 
-</div>
+			<select
+				name="energieverbrauch_zeitraum_monat"
+				class="rounded-tr-none rounded-br-none w-full m-0"
+				bind:value={month}
+				required
+			>
+				<option disabled>Monat</option>
+				{#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 month}
+						<option
+							value={month}
+							selected={ausweis.startdatum?.getMonth() === month}
+							>{monthNames[month]}</option
+						>
+					{/each}
+				{/if}
+			</select>
 
-<div class="input-standard order-8 md:order-8 xl:order-8">
-</div>
+			<div class="help-label">
+				<HelpLabel>TEXT FEHLT</HelpLabel>
+			</div>
+		</div>
 
-<!-- zusätzlicher Brennstoff und Einheiten *  -->
+		<div class="input-standard">
+			<Inputlabel title="Start-Jahr *"></Inputlabel>
 
-<div class="grid grid-cols-2 gap-x-4 order-9 md:order-9 xl:order-9">
+			<select
+				name="energieverbrauch_zeitraum_jahr"
+				class="rounded-tl-none rounded-bl-none w-full m-0"
+				bind:value={year}
+				required
+			>
+				<option disabled>Jahr</option>
+				{#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>TEXT FEHLT</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>
 
-	<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}
+				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>
+			<div class="help-label">
+				<HelpLabel>
 					<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
 					entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
 					<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
-					unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
-					zu Erdgas L einen leicht höheren Methangehalt, und daher einen
-					etwas besseren Brennwert.<br /><br />
-					<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
-					bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
-					bleiben.<br /><br />
-					<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
-					Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
-					/><br />
+					unterirdischen Lagerstätten vorkommt. Erdgas H hat im
+					Vergleich zu Erdgas L einen leicht höheren Methangehalt, und
+					daher einen etwas besseren Brennwert.<br /><br />
+					<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische,
+					die bei Raumtemperatur unter vergleichsweise geringem Druck
+					flüssig bleiben.<br /><br />
+					<b>Braunkohle:</b> Durch Druck und Luftabschluss von
+					organischen Substanzen entstandenes, bräunlich-schwarzes
+					Sedimentgestein.<br /><br />
 					<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
-					oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
-					werden.<br /><br />
+					oder überwiegend aus Holz oder Sägenebenprodukten
+					hergestellt werden.<br /><br />
 					<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
 					zerkleinertes Holz.<br /><br />
-					<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
-					über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
-					Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
-					Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
-					dezentral realisiert.<br /><br />
-					<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
-					<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
+					<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer
+					Energie über wärmegedämmte Rohrsysteme. Die Wärme wird dabei
+					örtlich von Heizwerken produziert oder besteht aus
+					Prozesswärme von BHKW's. Im Unterschied zu Fernwärme wird
+					Nahwärme in kleineren Einheiten dezentral realisiert.<br
+					/><br />
+					<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br
+					/>
+					<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br
+					/>
 				</HelpLabel>
-	            </div>
-	</div>
+			</div>
+		</div>
+
+		<div class="input-standard">
+			<Inputlabel title="Einheit *"></Inputlabel>
 
-	<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
+				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_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
-				<option value={unit}>{unit}</option>
-			{/each}
+				<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>
+			<div class="help-label">
+				<HelpLabel>
 					Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
-					Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
-					vor. Pellets oder Brennholz in SRm (Schüttraummetern).
+					Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
+					Litern vor. Pellets oder Brennholz in SRm
+					(Schüttraummetern).
 				</HelpLabel>
-	        </div>
+			</div>
+		</div>
 	</div>
 
-</div>
+	<!-- Verbrauch 1 -->
 
-<!-- Verbrauch 4 -->
+	<div class="input-standard order-4 md:order-4 xl:order-4">
+		<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
 
-<div class="input-standard order-10 md:order-10 xl:order-10">
-	<Verbrauchslabel bind:ausweis addYear=1></Verbrauchslabel>
+		<input
+			name="verbrauch_1"
+			type="number"
+			class:linked={abweichung.indexOf(1) > -1}
+			bind:value={ausweis.verbrauch_1}
+			required
+		/>
 
-	<input
-	name="verbrauch_4"
-	type="number"
-	bind:value={ausweis.verbrauch_4}
-	class:linked={abweichung.indexOf(4) > -1}
-/>
-<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
+		<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=2></VerbrauchsHelpLabel>
-				</HelpLabel>
-			</div>
-</div>
+			<HelpLabel>
+				<VerbrauchsHelpLabel
+					bind:ausweis
+					bind:gebaeude_aufnahme_allgemein
+					addYear={1}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
 
-<!-- Verbrauch 5 -->
+	<!-- Verbrauch 2 -->
 
-<div class="input-standard order-11 md:order-11 xl:order-11">
-	<Verbrauchslabel bind:ausweis addYear=2></Verbrauchslabel>
+	<div class="input-standard order-5 md:order-5 xl:order-5">
+		<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}{:else}{ausweis.einheit_2}{/if}</div>
+		<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=2></VerbrauchsHelpLabel>
-				</HelpLabel>
-			</div>
-</div>
+			<HelpLabel>
+				<VerbrauchsHelpLabel
+					bind:ausweis
+					bind:gebaeude_aufnahme_allgemein
+					addYear={2}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
 
-<!-- Verbrauch 6 -->
+	<!-- Verbrauch 3 -->
 
-<div class="input-standard order-12 md:order-12 xl:order-12">
-	<Verbrauchslabel bind:ausweis addYear=3></Verbrauchslabel>
+	<div class="input-standard order-6 md:order-6 xl:order-6">
+		<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}{:else}{ausweis.einheit_2}{/if}</div>
+		<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>TEXT FEHLT</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 Brennstoff; Heizöl wird aus
+						schwer entflammbaren Anteilen des Erdöls hergestellt.<br
+						/><br />
+						<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
+						unterirdischen Lagerstätten vorkommt. Erdgas H hat im
+						Vergleich zu Erdgas L einen leicht höheren Methangehalt,
+						und daher einen etwas besseren Brennwert.<br /><br />
+						<b>Flüssiggas:</b> Meist Propan, Butan und deren
+						Gemische, die bei Raumtemperatur unter vergleichsweise
+						geringem Druck flüssig bleiben.<br /><br />
+						<b>Braunkohle:</b> Durch Druck und Luftabschluss von
+						organischen Substanzen entstandenes, bräunlich-schwarzes
+						Sedimentgestein.<br /><br />
+						<b>Holz-Pellets:</b> Stäbchenförmige Pellets die
+						vollständig oder überwiegend aus Holz oder
+						Sägenebenprodukten hergestellt werden.<br /><br />
+						<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
+						zerkleinertes Holz.<br /><br />
+						<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer
+						Energie über wärmegedämmte Rohrsysteme. Die Wärme wird
+						dabei örtlich von Heizwerken produziert oder besteht aus
+						Prozesswärme von BHKW's. Im Unterschied zu Fernwärme
+						wird Nahwärme in kleineren Einheiten dezentral
+						realisiert.<br /><br />
+						<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br
+						/><br />
+						<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br
+						/><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. Erdgas wird meist auf
+						der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens
+						in Litern vor. Pellets oder Brennholz in SRm
+						(Schüttraummetern).
+					</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=3 heizquelle=2></VerbrauchsHelpLabel>
+					<VerbrauchsHelpLabel
+						bind:ausweis
+						bind:gebaeude_aufnahme_allgemein
+						addYear={1}
+						heizquelle={2}
+					></VerbrauchsHelpLabel>
 				</HelpLabel>
 			</div>
-</div> 
+		</div>
 
-{/if}
+		<!-- 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>
 
 <style lang="postcss">
-.VerbrauchsEinheit{@apply absolute right-[4rem]}
+	.VerbrauchsEinheit {
+		@apply absolute right-[4rem];
+	}
 </style>
diff --git a/src/components/ImageGrid.svelte b/src/components/ImageGrid.svelte
index 43210ecf..085eee7d 100644
--- a/src/components/ImageGrid.svelte
+++ b/src/components/ImageGrid.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import UploadImages from "./UploadImages.svelte";
 	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
-	import { RotateCounterClockwise, Trash } from "radix-svelte-icons";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
+	import { RotateCounterClockwise, Trash, Upload } from "radix-svelte-icons";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let max: number = 4;
+	export let min: number = 1;
 	export let name: string = "";
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 	export let gebaeude: GebaeudeClient;
@@ -23,16 +24,19 @@
 				ctx?.translate(img.height / 2, img.width / 2);
 				ctx?.rotate((-90 * Math.PI) / 180);
 				ctx?.drawImage(img, -img.width / 2, -img.height / 2);
-				image.base64 = canvas.toDataURL("image/webp");
-				image.update = true;
-				resolve(image)
+				const clone = Object.assign({}, image)
+				clone.base64 = canvas.toDataURL("image/webp");
+				clone.update = true;
+				resolve(clone)
 			};
 		})
 	}
+
+	let upload: () => void;
 </script>
 
 <div class="flex flex-col gap-4">
-	<UploadImages {name} {kategorie} {max} bind:gebaeude bind:images bind:ausweis />
+	<UploadImages {name} {kategorie} {max} {min} bind:upload bind:gebaeude bind:images bind:ausweis />
 	<div class="grid grid-cols-2 gap-2">
 		{#each images as image, i}
 			{#if image.kategorie == kategorie}
@@ -68,5 +72,26 @@
 				</div>
 			{/if}
 		{/each}
+
+		<!-- Wir zeigen Platzhalter an, damit der Nutzer sieht wie viele Bilder er hochladen soll -->
+		{#each { length: max - images.filter(image => image.kategorie === kategorie).length } as _, i}
+		<div class="relative group">
+			<img
+				src="/placeholder.png"
+				alt={kategorie}
+				class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
+				class:opacity-35={i >= min}
+			/>
+			<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
+				<button
+					type="button"
+					class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
+					on:click={upload}
+				>
+					<Upload size={20} color="#fff"></Upload>
+				</button>
+			</div>
+		</div>
+		{/each}
 	</div>
 </div>
\ No newline at end of file
diff --git a/src/components/UploadImages.svelte b/src/components/UploadImages.svelte
index 25c93826..bd8ed340 100644
--- a/src/components/UploadImages.svelte
+++ b/src/components/UploadImages.svelte
@@ -2,10 +2,11 @@
 	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 
 	export let max: number = 2;
+	export let min: number = 1;
 	export let name: string = ""
 
 	// Array of base64 encoded images read into the input.
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -77,10 +78,19 @@
 			reader.readAsArrayBuffer(file);
 		}
 	}
+
+	let fileUpload: HTMLInputElement;
+
+	export const upload = () => {
+		fileUpload.click()
+	}
 </script>
 
-{#if max > 1}
-	<input type="file" class="file-input file-input-ghost" {name} multiple on:change={getAllImages} />
+<!-- Falls die maximale Anzahl Bilder erreicht wurde grauen wir den input aus und zeigen einen Hilfstext -->
+{#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} />
 {:else}
-	<input type="file" class="file-input file-input-ghost" {name} on:change={getAllImages} />
+	<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} on:change={getAllImages} />
 {/if}
\ No newline at end of file
diff --git a/src/components/labels/VerbrauchsHelpLabel.svelte b/src/components/labels/VerbrauchsHelpLabel.svelte
index 8fc5b222..70408aa7 100644
--- a/src/components/labels/VerbrauchsHelpLabel.svelte
+++ b/src/components/labels/VerbrauchsHelpLabel.svelte
@@ -1,36 +1,41 @@
 <script lang="ts">
-    import moment from "moment";
+	import moment from "moment";
 
-    export let addYear: number;
-    export let heizquelle: number;
-    export let gebaeude_aufnahme_allgemein;
+	export let addYear: number;
+	export let heizquelle: number;
+	export let gebaeude_aufnahme_allgemein;
 	export let ausweis;
-
 </script>
 
-
-
 {#if ausweis.startdatum}
-Bitte geben Sie Ihre
-{#if heizquelle==1}
-{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b> {gebaeude_aufnahme_allgemein.brennstoff_1} </b>{/if}
-Verbräuche {#if ausweis.einheit_1} in <b>{ausweis.einheit_1} </b>{/if}
-{:else if heizquelle==2}
-{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b> {gebaeude_aufnahme_allgemein.brennstoff_2} </b>{/if}
-Verbräuche {#if ausweis.einheit_2} in <b>{ausweis.einheit_2} </b>{/if}
-{/if}
-
-
-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.
+	Bitte geben Sie Ihre
+	{#if heizquelle == 1}
+		{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b>
+				{gebaeude_aufnahme_allgemein.brennstoff_1}
+			</b>{/if}
+		Verbräuche {#if ausweis.einheit_1}
+			in <b>{ausweis.einheit_1} </b>{/if}
+	{:else if heizquelle == 2}
+		{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b>
+				{gebaeude_aufnahme_allgemein.brennstoff_2}
+			</b>{/if}
+		Verbräuche {#if ausweis.einheit_2}
+			in <b>{ausweis.einheit_2} </b>{/if}
+	{/if}
 
+	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.
+	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>
\ No newline at end of file
+</style>
diff --git a/src/modules/EmbeddedAuthFlowModule.svelte b/src/modules/EmbeddedAuthFlowModule.svelte
index e0827bba..3c44a654 100644
--- a/src/modules/EmbeddedAuthFlowModule.svelte
+++ b/src/modules/EmbeddedAuthFlowModule.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { loginClient } from "#lib/login";
+	import { loginClient } from "#lib/login.js";
 	import EmbeddedLoginModule from "./EmbeddedLoginModule.svelte"
 	import EmbeddedRegisterModule from "./EmbeddedRegisterModule.svelte"
 
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index aed4246f..0b3c17df 100644
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
 	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
-	import type {
-		Bezahlmethoden,
-	} from "@ibcornelsen/database/client";
+	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 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;
@@ -40,16 +45,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
 	export let selectedPaymentType: Bezahlmethoden =
 		Enums.Bezahlmethoden.paypal;
 
-	import { PRICES } from "#lib/constants";
-	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
-	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
-	import { client } from "src/trpc";
+	let prices: number[] = [];
 
-		let prices: number[] = []
-
-		if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
-			prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart]
-		}
+	if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
+		prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart];
+	}
 
 	let basePrice: number = prices[0];
 
@@ -61,7 +61,7 @@ import LoginDialog from "#components/LoginDialog.svelte";
 		);
 
 	async function speichern(e: SubmitEvent) {
-		e.preventDefault()
+		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.
@@ -76,13 +76,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
 
 		// 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
-		})
+			uid: ausweis.uid,
+		});
 
 		window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
 	}
-
-
 </script>
 
 <div class="w-full px-8">
@@ -95,7 +93,9 @@ import LoginDialog from "#components/LoginDialog.svelte";
 
 	<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="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>
@@ -160,15 +160,13 @@ import LoginDialog from "#components/LoginDialog.svelte";
 				</div>
 			</div>
 			<div>
-				<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
+				<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
-							>
+							<td><div class="py-2">Verbrauchsausweis</div></td>
 						</tr>
 						<tr>
 							<td><strong>Beschreibung:</strong></td>
@@ -196,7 +194,7 @@ import LoginDialog from "#components/LoginDialog.svelte";
 								</div></td
 							>
 						</tr>
-						<hr>
+						<hr />
 						<tr>
 							<td>Preis inkl. MwSt.</td>
 							<td
@@ -207,13 +205,17 @@ import LoginDialog from "#components/LoginDialog.svelte";
 						</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">
+				<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
+								>Verbrauchsausweis online für {prices[0]} € inkl.
+								MwSt. als PDF per E-Mail</td
 							>
 							<td
 								><input
@@ -242,8 +244,8 @@ import LoginDialog from "#components/LoginDialog.svelte";
 							</td>
 						</tr><tr>
 							<td
-								>Verbrauchsausweis offline für {prices[2]} € inkl. MwSt.
-								als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
+								>Verbrauchsausweis offline für {prices[2]} € inkl.
+								MwSt. als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
 							>
 							<td
 								><input
@@ -257,9 +259,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
 						</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">
+				<div
+					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
+				>
 					<table>
 						{#each services as service}
 							<tr>
@@ -276,7 +280,6 @@ import LoginDialog from "#components/LoginDialog.svelte";
 					</table>
 				</div>
 			</div>
-			
 		</div>
 		<div class="flex flex-row justify-between">
 			<!-- TODO: Zurück implementieren -->
@@ -284,7 +287,8 @@ import LoginDialog from "#components/LoginDialog.svelte";
 			<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>
+				<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button
+				>
 			</div>
 		</div>
 	</form>
diff --git a/src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte b/src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte
index 33660a0f..ec5c0feb 100644
--- a/src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { BenutzerClient, GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+	import { BenutzerClient, GebaeudeAufnahmeClient, GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
 	import { addNotification, updateNotification } from "@ibcornelsen/ui";
-	import { validateAccessTokenClient } from "../../client/lib/validateAccessToken";
-	import { client } from "src/trpc";
+	import { validateAccessTokenClient } from "../../client/lib/validateAccessToken.js";
+	import { client } from "src/trpc.js";
 	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
 	import Overlay from "#components/Overlay.svelte";
+	import { verbrauchsausweisWohnenSpeichern } from "#client/lib/verbrauchsausweisWohnenSpeichern.js";
 
 	export let gebaeude: GebaeudeClient;
 	export let images: UploadedGebaeudeBild[];
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let user: BenutzerClient;
+	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 
 	async function bilderHochladen() {
 		// Alle Bilder hochladen
@@ -82,16 +84,24 @@
 		} else {
 			// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
 			try {
-				const response = await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
-					ausweis,
-					gebaeude
-				})
-				ausweis.uid = response.uid;
-				gebaeude.uid = response.gebaeude_uid;
+				const response = await verbrauchsausweisWohnenSpeichern(ausweis,
+				gebaeude,
+				gebaeude_aufnahme_allgemein,
+				images,
+				user)
 
-				await bilderHochladen();
+				if (response !== null) {
+					await bilderHochladen();
+					// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+					// Sonst müsste er alles neu eingeben...
+					ausweis.uid = response.uid;
+					gebaeude.uid = response.gebaeude_uid;
+					gebaeude_aufnahme_allgemein.uid = response.gebaeude_aufnahme_uid;
+					
+					return true
+				}
 
-				return true;
+				return false;
 			} catch (e: any) {
 				await client.v1.tickets.erstellen.mutate({
 					titel: "Ausweis konnte nicht gespeichert werden",
@@ -121,6 +131,11 @@
 		const result = await ausweisSpeichern();
 
 		if (result === true) {
+			window.history.pushState(
+				{},
+				"",
+				`${location.pathname}?uid=${ausweis.uid}`
+			);
 			window.location.href = `/kundendaten?uid=${ausweis.uid}`;
 		}
 	}
@@ -134,4 +149,4 @@
 	</div>
 </Overlay>
 
-<button type="submit" class="button">Weiter</button>
\ No newline at end of file
+<button on:click={ausweisAbschicken} class="button">Weiter</button>
\ No newline at end of file
diff --git a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
index 72d00695..57fed4b2 100644
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
@@ -55,6 +55,8 @@
 		UploadedGebaeudeBild,
 	} from "#components/Ausweis/types.js";
 	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
+	import AusweisWeiter from "./AusweisWeiter.svelte";
+	import { Enums } from "@ibcornelsen/database/client";
 
 	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
 	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
@@ -99,6 +101,11 @@
 		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
 		gebaeude_aufnahme_allgemein.saniert = true;
 		gebaeude_aufnahme_allgemein.einheiten = 1;
+		gebaeude_aufnahme_allgemein.gebaeudetyp = "Einfamilienhaus"
+		gebaeude_aufnahme_allgemein.keller = Enums.Heizungsstatus.NICHT_VORHANDEN
+		gebaeude_aufnahme_allgemein.dachgeschoss = Enums.Heizungsstatus.NICHT_VORHANDEN
+		gebaeude_aufnahme_allgemein.lueftung = "Fensterlüftung"
+		gebaeude_aufnahme_allgemein.kuehlung = "1"
 		ausweis.ausstellgrund = "Vermietung";
 		ausweis.verbrauch_1 = 15000;
 		ausweis.verbrauch_2 = 14000;
@@ -106,10 +113,11 @@
 		gebaeude_aufnahme_allgemein.flaeche = 152;
 		gebaeude_aufnahme_allgemein.nutzflaeche = 172;
 		ausweis.keller_beheizt = true;
+		
 		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
 		ausweis.einheit_1 = "kWh";
 		ausweis.anteil_warmwasser_1 = 18;
-		ausweis.startdatum = moment("01.01.2019").toDate();
+		ausweis.startdatum = moment("01.01.2021").toDate();
 		gebaeude_aufnahme_allgemein.plz = "21039";
 		gebaeude_aufnahme_allgemein.ort = "Hamburg";
 		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
@@ -197,7 +205,7 @@
 
 
 
-<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+<form data-test="ausweis">
 	<div id="formular-box" class="formular-boxen ring-0">
 
 
@@ -313,28 +321,274 @@
 
 
 	</div>
-</form>
-
-<div
+	<div
 class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
 grid-cols-1
 xs:grid-cols-2"
 >
 
 <div class="md:justify-self-start">
-	<button 
-		type="submit" 
-		class="button"
-		>
-		Weiter
-	</button>
+	<AusweisWeiter bind:ausweis bind:images bind:user bind:gebaeude bind:gebaeude_aufnahme_allgemein></AusweisWeiter>
 	
 </div>
 
 <div class="md:justify-self-end"><Hilfe />
 </div>
 </div>
+</form>
 
+<RawNotificationWrapper>
+	{#each Object.entries($notifications) as [uid, notification] (uid)}
+		<RawNotification notification={{ ...notification, uid }}>
+			{@html notification.subtext}
+		</RawNotification>
+	{/each}
+
+	{#if auditBedarfsausweisBenoetigt(ausweis, gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Bedarfsausweis benötigt!",
+				timeout: 0,
+				uid: "BEDARFSAUSWEIS",
+				dismissable: false,
+				type: "info",
+			}}
+		>
+			Sie benötigen einen Bedarfsausweis. <a href="/bedarfsausweis"
+				>Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort</a
+			>.
+		</RawNotification>
+	{/if}
+
+	{#await auditPlzNichtErkannt(gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "PLZ_NICHT_ERKANNT",
+					dismissable: false,
+					type: "warning",
+				}}
+			>
+				Die Postleitzahl konnte nicht zugeordnet werden. Bitte prüfen
+				Sie die Eingabe. Sollte die Postleitzahl korrekt eingegeben
+				sein, werden wir den Ort händisch zuordnen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
+					gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
+				},
+				type: "warning",
+			}}
+		>
+			Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
+			wurde. Sind sie sich sicher, dass das stimmt?
+		</RawNotification>
+	{/if}
+
+	{#if auditHeizungJuengerDreiJahre(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_JUENGER_DREI_JAHRE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Ihre Heizungsanlage ist jünger als 3 Jahre. Für den
+			Verbrauchsausweis müssen Sie mindestens 3 Verbrauchsjahre eingeben
+			die den aktuellen Stand des Gebäudes abbilden. Ein Verbrauchsausweis
+			ist daher nicht möglich. Bitte klicken Sie
+			<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den Bedarfsausweis
+			zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#if auditZeitraumAktuell(ausweis, gebaeude)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "ZEITRAUM_AKTUELL",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.ZEITRAUM_AKTUELL);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Verbrauchszeiträume sind nicht aktuell genug. Das Ende des
+			letzten Verbrauchszeitraumes darf nicht mehr als 18 Monate
+			zurückliegen. Ein Verbrauchsausweis ist mit diesen Zeiträumen daher
+			nicht möglich. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um
+			zum Eingabeformular für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#await auditKlimaFaktoren(ausweis, gebaeude) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "KLIMA_FAKTOREN",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.KLIMA_FAKTOREN);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Verbrauchszeiträume sind zu aktuell und es liegen noch keine
+				Klimafaktoren dazu vor. Bitte verschieben Sie die
+				Verbrauchszeiträume 1 Jahr nach hinten. Wenn das nicht möglich
+				ist, klicken Sie
+				<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den
+				Bedarfsausweis zu gelangen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnFlaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHN_FLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHN_FLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche ist viel zu klein. Bitte überprüfen Sie Ihre Eingabe
+			nochmal und stellen sicher, daß sich Ihre Angaben auf das gesamte
+			Gebäude beziehen.
+		</RawNotification>
+	{/if}
+
+	{#if auditWarmWasser(ausweis)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WARM_WASSER",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WARM_WASSER);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
+			scheint nicht ganz im Rahmen zu liegen.
+		</RawNotification>
+	{/if}
+
+	{#if auditLeerStand(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "LEER_STAND",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.LEER_STAND);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bei Leerstand größer als 30% darf kein Verbrauchsausweis ausgestellt
+			werden. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um zum Eingabeformular
+			für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+	
+	{#if auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein).length > 0}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "VERBRAUCH_ABWEICHUNG",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(
+				ausweis,
+				gebaeude_aufnahme_allgemein,
+			)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein)[1]} beträgt mehr
+			als 30% und sie haben keinen Leerstand angegeben. Sind sie sich sicher,
+			dass das stimmt?
+		</RawNotification>
+	{/if}
+
+	{#await auditEndEnergie(ausweis, gebaeude, gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "END_ENERGIE",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.END_ENERGIE);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Endenergie liegt außerhalb des normalen Rahmens. Bitte
+				nochmal überprüfen. Bei Passivhäusern oder ganz alten
+				unsanierten Gebäuden ist so eine Abweichung durchaus möglich.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnflaecheGroesserGesamtflaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche darf nicht größer als die Nutzfläche sein.
+		</RawNotification>
+	{/if}
+</RawNotificationWrapper>
 
 <style lang="scss">
 </style>