Merge pull request #202 from IBCornelsen/UMBE

Formular

src/components/HelpLabel.svelte

@@ -29,7 +29,7 @@
 
 
 	.tooltip {
-		@apply absolute -right-1 max-w-[100%] w-max break-words ring-2 ring-secondary/5 invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
+		@apply absolute -right-4 w-[240px] break-words ring-2 ring-secondary/5 invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
 	}
 
 	.tooltip-opener:hover .tooltip {

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -351,13 +351,132 @@ xs:grid-cols-2
 		</div>
 </div>
 
+		<BereichLabel bereich="d">Eingabe Warmwasseranteil und Verwendung von alternativenEnergieversorgungssystemen</BereichLabel>
+
+		<div class="bereich-box">
+
+
+	<!-- Anteil WW enthalten -->
+	<div class="flex flex-col">
+		<div class="flex flex-row gap-4 items-center">
+			<input
+				type="checkbox"
+				class="checkbox"
+				name="warmwasser_enthalten"
+				data-test="warmwasser_enthalten"
+				bind:checked={ausweis.warmwasser_enthalten}
+			/>
+			<Label>Warmwasser im Verbrauch enthalten</Label>
+		</div>
+		<div class="flex flex-row gap-4 items-center">
+			<input
+				type="checkbox"
+				class="checkbox"
+				name="warmwasser_anteil_bekannt"
+				data-test="warmwasser_anteil_bekannt"
+				bind:checked={ausweis.warmwasser_anteil_bekannt}
+				disabled={!ausweis.warmwasser_enthalten}
+			/>
+			<Label>Anteil bekannt</Label>
+		</div>
+	</div>
+
+	<!-- 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"
+			data-test="anteil_warmwasser_1"
+			maxlength="2"
+			type="number"
+			bind:value={ausweis.anteil_warmwasser_1}
+			disabled={!ausweis.warmwasser_anteil_bekannt ||
+				!ausweis.warmwasser_enthalten}
+			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"
+			data-test="anteil_warmwasser_2"
+			maxlength="3"
+			type="number"
+			autocomplete="off"
+			bind:value={ausweis.anteil_warmwasser_2}
+			disabled={!ausweis.zusaetzliche_heizquelle ||
+				!ausweis.warmwasser_anteil_bekannt ||
+				!ausweis.warmwasser_enthalten}
+		/>
+	</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"
+					data-test="alternative_heizung"
+					bind:checked={ausweis.alternative_heizung}
+					value="Heizung"
+				/>Heizung</label
+			>
+			<label class="checkbox-inline"
+				><input
+					type="checkbox"
+					name="alternative_warmwasser"
+					data-test="alternative_warmwasser"
+					bind:checked={ausweis.alternative_warmwasser}
+					value="Warmwasser"
+				/>Warmwasser</label
+			>
+			<label class="checkbox-inline"
+				><input
+					type="checkbox"
+					name="alternative_lueftung"
+					data-test="alternative_lueftung"
+					bind:checked={ausweis.alternative_lueftung}
+					value="Lüftung"
+				/>Lüftung</label
+			>
+			<label class="checkbox-inline"
+				><input
+					type="checkbox"
+					name="alternative_kuehlung"
+					data-test="alternative_kuehlung"
+					bind:checked={ausweis.alternative_kuehlung}
+					value="Kühlung"
+				/>Kühlung</label
+			>
+		</div>
+	</div>
+
+
+</div>
 
 
 
 
 		<hr />
 
-	</div>
+</div>
 </form>
 
 <RawNotificationWrapper>

src/modules/Ausweise/VerbrauchsausweisWohnenModule_V01.svelte

@@ -0,0 +1,736 @@
+<script lang="ts">
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
+	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import Label from "#components/Label.svelte";
+	import BereichLabel from "#components/BereichLabel.svelte";
+	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
+	import moment from "moment";
+	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
+	import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
+	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
+	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
+	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
+	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
+	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
+	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
+	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
+	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
+	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
+	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
+	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
+	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
+	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
+	import { Enums } from "@ibcornelsen/database/client"
+	import Overlay from "#components/Overlay.svelte";
+	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
+	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
+	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
+		
+	// 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...
+	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let user: BenutzerClient = {} as BenutzerClient;
+
+	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 || [];
+
+	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;
+		}
+	}
+
+	function automatischAusfüllen() {
+		gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
+		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
+		gebaeude_aufnahme_allgemein.saniert = true;
+		gebaeude_aufnahme_allgemein.einheiten = 1;
+		ausweis.ausstellgrund = "Vermietung";
+		ausweis.verbrauch_1 = 15000;
+		ausweis.verbrauch_2 = 14000;
+		ausweis.verbrauch_3 = 16000;
+		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();
+		gebaeude_aufnahme_allgemein.plz = "21039";
+		gebaeude_aufnahme_allgemein.ort = "Hamburg";
+		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
+		gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";
+
+		gebaeude = gebaeude;
+		ausweis = ausweis;
+	}
+
+
+	async function ausweisAbschicken(e: SubmitEvent) {
+		if (e && e.preventDefault) e.preventDefault();
+		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}`);
+			window.location.href = `/kundendaten?uid=${result.uid}`;
+		}
+	}
+
+	let waitOverlayHidden = true;
+	let speichernOverlayHidden = true;
+
+	$: {
+		if (gebaeude_aufnahme_allgemein.saniert 
+			&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt  === undefined
+			&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {
+
+			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
+			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
+		}
+	}
+</script>
+
+<Overlay bind:hidden={speichernOverlayHidden}>
+	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
+		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
+	</div>
+</Overlay>
+
+<Overlay bind:hidden={waitOverlayHidden}>
+	<p class="text-white font-semibold text-4xl">
+		Bitte warten sie, ihr Ausweis wird nun erstellt.
+	</p>
+</Overlay>
+
+<!-- <div class="flex flex-row gap-8 items-center mb-8">
+	<div class="flex flex-col w-full">
+		<h1>Verbrauchsausweis erstellen - 45€</h1>
+		<Progressbar progress={0} />
+	</div>
+
+	<PerformanceScore
+		bind:ausweis
+		bind:gebaeude_aufnahme_allgemein
+		bind:gebaeude
+	/>
+</div>-->
+
+<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+
+<div id="formular-box" class="formular-boxen ring-0">
+
+<div class="w-full grid gap-x-4 gap-y-2
+grid-cols-1
+xs:grid-cols-2
+">
+			<div class="md:justify-self-start"><button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button></div>
+			<div class="md:justify-self-end"><Hilfe /></div>
+
+	</div>
+
+	<div class="mt-2"><button class="button hidden" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
+		
+		<hr />
+
+		<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
+
+		<div class="bereich-box">
+
+		<Ausweisart
+			bind:gebaeude
+			bind:gebaeude_aufnahme_allgemein
+			bind:ausweis
+		/>
+
+</div>
+		<BereichLabel bereich="B">Eingabe der Gebäudeadresse -&nbsp;Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
+
+		<div class="bereich-box">
+
+	<div class="w-full grid 
+	grid-cols-bereich-B gap-x-4
+	xl:grid-cols-bereich-B-xl xl:gap-x-8
+	2xl:grid-cols-bereich-B-2xl 2xl:gap-x-8
+	">
+
+	<div class="grid grid-cols-1 gap-x-4
+	md:grid-cols-2 md:gap-x-6 md:mb-6
+	xl:mb-0
+	2xl:grid-cols-3 2xl:gap-x-6 
+	">
+
+			<!-- Strasse -->
+			<div class="md:col-span-2 2xl:col-span-1">
+				<HelpLabel title="* Straße, Hausnummer">
+					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+					ein.
+				</HelpLabel>
+				<div>
+					<input
+						name="adresse"
+						data-test="adresse"
+						type="text"
+						autocomplete="off"
+						required
+						data-msg-minlength="min. 5 Zeichen"
+						data-msg-maxlength="max. 40 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.adresse}
+					/>
+				</div>
+			</div>
+
+			<!-- PLZ -->
+			<div class="PLZ">
+				<Label>* PLZ</Label>
+				<ZipSearch
+					bind:zip={gebaeude_aufnahme_allgemein.plz}
+					bind:city={gebaeude_aufnahme_allgemein.ort}
+					name="plz"
+				/>
+			</div>
+
+			<!-- Ort -->
+			<div class="">
+				<HelpLabel title="* Ort">
+					Ort des Gebäudes wird automatisch ermittelt.
+				</HelpLabel>
+				<div>
+					<input
+						name="ort"
+						data-test="ort"
+						readonly={true}
+						bind:value={gebaeude_aufnahme_allgemein.ort}
+						type="text"
+					/>
+				</div>
+			</div>
+
+		</div>
+
+		<div class="grid grid-cols-1 gap-x-4
+		md:grid-cols-2 md:gap-x-6
+		2xl:grid-cols-4 2xl:gap-x-6
+		">
+
+			<!-- Wohnfläche -->
+			<div class="">
+				<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"
+						data-test="flaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.flaeche}
+					/>
+				</div>
+			</div>
+
+			<!-- Gesamtfläche -->
+			<div class="">
+				<HelpLabel title="&nbsp;&nbsp;Gesamtfläche m²">
+					Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
+					(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
+					weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
+					beheizten Kellers). Diese Fläche wird dann im Energieausweis
+					als energetische Nutzfläche (An) ausgewiesen.
+				</HelpLabel>
+				<div>
+					<input
+						name="nutzflaeche"
+						data-test="nutzflaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
+					/>
+				</div>
+			</div>			
+
+			<!-- Keller -->
+			<div class="">
+				<Label>* Keller</Label>
+				<div>
+					<select
+						name="keller"
+						data-test="keller"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.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="">
+				<Label>* Dachgeschoss</Label>
+				<div>
+					<select
+						name="dachgeschoss"
+						data-test="dachgeschoss"
+						bind:value={gebaeude_aufnahme_allgemein.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>
+
+
+	</div>
+
+</div>
+		<BereichLabel bereich="C">Eingabe von 3 zusammenhängenden Verbrauchsjahren</BereichLabel>
+
+		<div class="bereich-box">
+
+			<div class="w-full grid 
+			grid-cols-bereich-C gap-x-4 gap-y-8
+			xl:grid-cols-bereich-C-xl xl:gap-x-8 xl:gap-y-0
+			2xl:grid-cols-bereich-C-2xl 2xl:gap-x-8
+			">
+
+			<Verbrauch
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/>
+		</div>
+</div>
+
+		<BereichLabel bereich="d">Eingabe Warmwasseranteil und Verwendung von alternativenEnergieversorgungssystemen</BereichLabel>
+
+		<div class="bereich-box">
+
+
+	<!-- Anteil WW enthalten -->
+	<div class="flex flex-col">
+		<div class="flex flex-row gap-4 items-center">
+			<input
+				type="checkbox"
+				class="checkbox"
+				name="warmwasser_enthalten"
+				data-test="warmwasser_enthalten"
+				bind:checked={ausweis.warmwasser_enthalten}
+			/>
+			<Label>Warmwasser im Verbrauch enthalten</Label>
+		</div>
+		<div class="flex flex-row gap-4 items-center">
+			<input
+				type="checkbox"
+				class="checkbox"
+				name="warmwasser_anteil_bekannt"
+				data-test="warmwasser_anteil_bekannt"
+				bind:checked={ausweis.warmwasser_anteil_bekannt}
+				disabled={!ausweis.warmwasser_enthalten}
+			/>
+			<Label>Anteil bekannt</Label>
+		</div>
+	</div>
+
+	<!-- 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"
+			data-test="anteil_warmwasser_1"
+			maxlength="2"
+			type="number"
+			bind:value={ausweis.anteil_warmwasser_1}
+			disabled={!ausweis.warmwasser_anteil_bekannt ||
+				!ausweis.warmwasser_enthalten}
+			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"
+			data-test="anteil_warmwasser_2"
+			maxlength="3"
+			type="number"
+			autocomplete="off"
+			bind:value={ausweis.anteil_warmwasser_2}
+			disabled={!ausweis.zusaetzliche_heizquelle ||
+				!ausweis.warmwasser_anteil_bekannt ||
+				!ausweis.warmwasser_enthalten}
+		/>
+	</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"
+					data-test="alternative_heizung"
+					bind:checked={ausweis.alternative_heizung}
+					value="Heizung"
+				/>Heizung</label
+			>
+			<label class="checkbox-inline"
+				><input
+					type="checkbox"
+					name="alternative_warmwasser"
+					data-test="alternative_warmwasser"
+					bind:checked={ausweis.alternative_warmwasser}
+					value="Warmwasser"
+				/>Warmwasser</label
+			>
+			<label class="checkbox-inline"
+				><input
+					type="checkbox"
+					name="alternative_lueftung"
+					data-test="alternative_lueftung"
+					bind:checked={ausweis.alternative_lueftung}
+					value="Lüftung"
+				/>Lüftung</label
+			>
+			<label class="checkbox-inline"
+				><input
+					type="checkbox"
+					name="alternative_kuehlung"
+					data-test="alternative_kuehlung"
+					bind:checked={ausweis.alternative_kuehlung}
+					value="Kühlung"
+				/>Kühlung</label
+			>
+		</div>
+	</div>
+
+
+</div>
+
+
+
+
+		<hr />
+
+</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>
+</style>

src/style/formular.css

@@ -5,11 +5,18 @@
 .formular-abschnitt2{@apply text-[1.25rem] pl-1;}
 
 .bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
-.bereich-box {@apply w-full ring-0 ring-formular-rahmen py-4 px-4 bg-[rgba(252,_234,_187,_0.2)]
+.bereich-box {@apply w-full ring-0 ring-formular-rahmen py-4 px-4
 	border-y-2 border-formular-rahmen 
 	sm:ring-2 sm:px-2 sm:rounded-lg sm:border-none
 	md:px-4
 	;
+
+	background:linear-gradient(
+		135deg, 
+		rgba(252, 234, 187, 1) 0%, 
+		rgba(253, 235, 189, 1) 52%, 
+		rgba(251, 223, 147, 1) 100%);
+
 	/*background: linear-gradient(
         135deg,
         rgba(252, 234, 187, 1) 0%,