Verbrauchsausweis Gewerbe

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -32,7 +32,7 @@
 				bind:gebaeude
 				bind:images
 				bind:ausweis
-			/>
+			>TEST</ImageGrid>
 			</div>
 
 	</div>

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 Wohnen"}
 			<option value="Einfamilienhaus">Einfamilienhaus</option>
-			<option value="Freistehendes Einfamilienhaus"
+			<option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
-				>Freistehendes Einfamilienhaus</option
+			<option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</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"
+			<option value="Wohn- und Geschäftshaus">Wohn- und Geschäftshaus</option>
-				>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">

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>

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;

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>

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

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>

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>

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}

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}
+<div>
 	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} multiple on:change={getAllImages} />
+	<slot />
+</div>
 {:else}
+<div>
 	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} on:change={getAllImages} />
+	<slot />
+</div>
 {/if}

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>

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>

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>

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
+		<Bereich bereich="A" title="Prüfung der Ausweisart">
-			class="flex flex-col p-4"
+			<Ausweisart
-			class:hidden={!false}
+				bind:gebaeude
-		>
+				bind:gebaeude_aufnahme_allgemein
-			<div class="form-group col-md-9">
+				bind:ausweis
-				<HelpLabel
+				{Energieausweis}
-					title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
+			/>
-				>
+		</Bereich>
-					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>
 
-			<div class="form-group col-md-3">
+		<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
-				<a class="button" href="/bedarfsausweis"
+
-					>Bedarfsausweis erstellen</a
+		<Bereich
-				>
+			bereich="B"
-			</div>
+			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
-		</div>
-		<hr />
-		<div>
-			<Label
-				>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche,
-				Kellerund Dachgeschoss</Label
 			>
+			<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">
+			<ButtonWeiterHilfe {spaeterWeitermachen}
-			<!-- Strasse -->
+			bind:ausweis
-			<div class="form-group col-md-4">
+			bind:images
-				<HelpLabel title="Straße, Hausnummer *">
+			bind:user
-					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+			bind:gebaeude
-					ein.
+			bind:gebaeude_aufnahme_allgemein
-				</HelpLabel>
+			>
-				<div>
+			</ButtonWeiterHilfe>
-					<input
-						name="adresse"
-						type="text"
-						autocomplete="off"
-						required
-						minlength="5"
-						maxlength="40"
-						bind:value={gebaeude.adresse}
-					/>
-				</div>
-			</div>
 		
-			<!-- 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>

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

@@ -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,7 +206,7 @@
 <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>
+	<h2 class="text-primary text-xl">{Energieausweis} {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
 	<ProgressBar progress={0} />
 </div>
 
@@ -214,8 +217,6 @@
 <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 -->
@@ -225,6 +226,7 @@
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
+				{Energieausweis}
 			/>
 		</Bereich>
 

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