Verbrauchsausweis Basisfunktionalität

2023-04-04 11:23:36 +04:00
parent 3a1464dc44
commit f164d4c1e2
28 changed files with 1728 additions and 1310 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,16 +5,25 @@ services:
    container_name: online-energieausweis
    command: pnpm run dev --host
    links:
-      - db
+      - db:database
    environment:
      PORT: 3000
-      DB_CONNECTION: postgres://user:secure1@db/main
+      DB_CONNECTION: database
+      DB_PORT: 5432
      NODE_ENV: "development"
    ports:
      - 3000:3000
    volumes:
      - ./:/online-energieausweis
+    networks:
+      - postgres
  db:
    build: ../database
    ports:
      - "5436:5432"
+    networks:
+      - postgres
+
+networks:
+  postgres:
+    driver: bridge
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -1,9 +1,8 @@
---
-import AnsichtsausweisButton from "../AnsichtsausweisButton.svelte";
-import DatenblattButton from "../DatenblattButton.svelte";
-import HelpLabel from "../HelpLabel.astro";
-
---
+<script lang="ts">
+	import AnsichtsausweisButton from "~/components/AnsichtsausweisButton.svelte";
+	import DatenblattButton from "~/components/DatenblattButton.svelte";
+	import HelpLabel from "~/components/HelpLabel.svelte";
+</script>

 <div class="grid grid-cols-2 p-4 gap-4">
 			<div class="rounded-lg border-4 p-4 bg-white">
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -1,7 +1,11 @@
---
-import HelpLabel from "../HelpLabel.astro";
+<script lang="ts">
+	import HelpLabel from "~/components/HelpLabel.svelte";

---
+	export let constructionYear: number;
+	export let apartmentCount: number;
+	export let certificateReason: "Vermietung" | "Neubau" | "Verkauf" | "Modernisierung" | "Sonstiges";
+	export let sanitationStatus: boolean;
+</script>

 <div class="GRB">
 	<!-- Anlass für Energieausweis -->
@@ -10,43 +14,47 @@ import HelpLabel from "../HelpLabel.astro";
 			>Anlass für Energieausweis *
 		</label>
 		<div
-			class="grid grid-cols-3 items-center"
+			class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3"
 		>
-			<label class="radio-inline rfs">
+			<label class="radio-inline">
 				<input
 					type="radio"
 					value="Neubau"
 					name="IGanlass"
+					bind:group={certificateReason}
 				/>Neubau</label
 			>
-			<label class="radio-inline rfs"
+			<label class="radio-inline"
 				><input
 					type="radio"
 					value="Vermietung"
 					checked
 					name="IGanlass"
+					bind:group={certificateReason}
 				/>Vermietung</label
 			>
-			<label class="radio-inline rfs"
+			<label class="radio-inline"
 				><input
 					type="radio"
 					value="Verkauf"
 					name="IGanlass"
+					bind:group={certificateReason}
 				/>Verkauf</label
 			>
-			<br />
-			<label class="radio-inline rfs"
+			<label class="radio-inline"
 				><input
 					type="radio"
 					value="Modernisierung"
 					name="IGanlass"
+					bind:group={certificateReason}
 				/>Modernisierung</label
 			>
-			<label class="radio-inline rfs"
+			<label class="radio-inline"
 				><input
 					type="radio"
 					value="Sonstiges"
 					name="IGanlass"
+					bind:group={certificateReason}
 				/>Sonstiges</label
 			>
 		</div>
@@ -96,6 +104,7 @@ import HelpLabel from "../HelpLabel.astro";
 				required
 				autocomplete="off"
 				data-msg="Pflichtfeld"
+				bind:value={constructionYear}
 			/>
 		</div>
 	</div>
@@ -116,6 +125,7 @@ import HelpLabel from "../HelpLabel.astro";
 				required
 				autocomplete="off"
 				data-msg="Pflichtfeld"
+				bind:value={apartmentCount}
 				maxlength="3"
 			/>
 		</div>
@@ -137,16 +147,27 @@ import HelpLabel from "../HelpLabel.astro";
 				name="IGsan"
 				class="form-control"
 				required
-				data-msg="Pflichtfeld"
+				bind:value={sanitationStatus}
 			>
-				<option>Bitte auswählen</option>
-				<option value="san"
+				<option disabled>Bitte auswählen</option>
+				<option value={true}
 					>saniert</option
 				>
-				<option value="unsan"
+				<option value={false}
 					>unsaniert</option
 				>
 			</select>
 		</div>
 	</div>
 </div>
+
+<style>
+	input[type="radio"] {
+		width: 15px;
+		height: 15px;
+	}
+
+	.radio-inline {
+		@apply flex items-center;
+	}
+</style>
--- a/src/components/Ausweis/DaemmungImage.svelte
+++ b/src/components/Ausweis/DaemmungImage.svelte
--- a/src/components/Ausweis/FensterImage.svelte
+++ b/src/components/Ausweis/FensterImage.svelte
--- a/src/components/Ausweis/HeizungImage.svelte
+++ b/src/components/Ausweis/HeizungImage.svelte
@@ -1,6 +1,6 @@
 <div class="grid grid-cols-2 gap-4">
 	<div class="rounded-lg border-4 p-4 bg-white">
-		<input type="file" class="image_upload" name="heizung[]" multiple />
+		<input type="file" class="image_upload" multiple />

 		<p class="font-bold mb-2">
 			<span class="text-red-500">WICHTIG:</span>
--- a/src/components/Ausweis/Hilfe.astro
+++ b/src/components/Ausweis/Hilfe.astro
@@ -1,41 +0,0 @@
---
-import HelpLabel from "../HelpLabel.astro";
-
---
-
-<HelpLabel title="">Wir helfen Ihnen bei der Eingabe. Kurze Fragen zum Formular oder der Ausweisart werden kostenfrei telefonisch beantwortet (bis 5min). Bitte kontaktieren Sie uns unter 040/209339850. Gerne nehmen wir Ihnen die Arbeit ab - Fordern Sie unseren Offline Service an und klicken auf -Hilfe anfordern-</HelpLabel>
-<input
-	class="button"
-	onclick="javascript:toggle('hilfean')"
-	style="background-color: #31448e;width:100%;"
-	id="hilfeaw"
-	type="button"
-	value="Hilfe anfordern"
-/>
-
-<div class="form-group col-md-12" id="hilfean">
-	<div class="form-group col-md-12 pop_help">
-
-		<div class="form-group col-md-12">
-			Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen haben. Kurze Fragen zum Formular oder der Ausweisart werden kostenfrei telefonisch unter <a href="tel:+4940209339850">040/209339850</a> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre Auswahl und klicken auf weiter:
-		</div>
-
-		<div class="flex flex-row justify-between mx-4 my-2">
-			<div class="form-group col-md-7">Verbrauchsausweis online inkl. ausführlicher telefonischer Beratung für 60 € inkl. MwSt.</div>
-			<div class="form-group col-md-5"><input type="radio" class="IGanlass" id="Produkttb1" value="ptb" name="Produkt"></div>
-		</div>
-		<div class="flex flex-row justify-between mx-4 my-2">
-			<div class="form-group col-md-7">Verbrauchsausweis offline für 180 € inkl. MwSt. (Sie schicken uns 3 Verbrauchsabrechnungen zu)</div>
-			<div class="form-group col-md-5"><input type="radio" class="IGanlass" id="Produktof1" value="pof" name="Produkt"></div>
-		</div>
-		<div class="flex flex-row justify-between mx-4 my-2">
-			<div class="form-group col-md-7">Bedarfsausweis offline für 290 € inkl. MwSt. (Sie schicken uns Grundriss- und Ansichtspläne zu)</div>
-			<div class="form-group col-md-5"><input type="radio" class="IGanlass" id="Produktbof1" value="pbof" name="Produkt"></div>
-		</div>
-
-		<div class="form-group col-md-12" style="text-align:right;">
-			<button>Weiter</button>
-		</div>
-
-	</div>
-</div>
--- a/src/components/Ausweis/Hilfe.svelte
+++ b/src/components/Ausweis/Hilfe.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	let showHelp: boolean = false;
+</script>
+
+<div>
+	<button type="button" on:click={() => (showHelp = !showHelp)}
+		>Hilfe anfordern</button
+	>
+
+	{#if showHelp}
+		<div>
+			<div>
+				Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
+				haben. Kurze Fragen zum Formular oder der Ausweisart werden
+				kostenfrei telefonisch unter <a href="tel:+4940209339850"
+					>040/209339850</a
+				> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
+				benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
+				lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
+				Auswahl und klicken auf weiter:
+			</div>
+
+			<div class="flex flex-row justify-between mx-4 my-2">
+				<div class="form-group col-md-7">
+					Verbrauchsausweis online inkl. ausführlicher telefonischer
+					Beratung für 60 € inkl. MwSt.
+				</div>
+				<div class="form-group col-md-5">
+					<input
+						type="radio"
+						class="IGanlass"
+						id="Produkttb1"
+						value="ptb"
+						name="Produkt"
+					/>
+				</div>
+			</div>
+			<div class="flex flex-row justify-between mx-4 my-2">
+				<div class="form-group col-md-7">
+					Verbrauchsausweis offline für 180 € inkl. MwSt. (Sie
+					schicken uns 3 Verbrauchsabrechnungen zu)
+				</div>
+				<div class="form-group col-md-5">
+					<input
+						type="radio"
+						class="IGanlass"
+						id="Produktof1"
+						value="pof"
+						name="Produkt"
+					/>
+				</div>
+			</div>
+			<div class="flex flex-row justify-between mx-4 my-2">
+				<div class="form-group col-md-7">
+					Bedarfsausweis offline für 290 € inkl. MwSt. (Sie schicken
+					uns Grundriss- und Ansichtspläne zu)
+				</div>
+				<div class="form-group col-md-5">
+					<input
+						type="radio"
+						class="IGanlass"
+						id="Produktbof1"
+						value="pbof"
+						name="Produkt"
+					/>
+				</div>
+			</div>
+
+			<div style="text-align:right;">
+				<button>Weiter</button>
+			</div>
+		</div>
+	{/if}
+</div>
--- a/src/components/Ausweis/PerformanceScore.svelte
+++ b/src/components/Ausweis/PerformanceScore.svelte
@@ -1,15 +1,22 @@
+<script lang="ts">
+	export let performance: number;
+
+	let maxPerformance = 250;
+</script>
+
 <div class="w-full rounded-lg border border-[#ffcc03] relative p-2">
 	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
 	<img
-		class="absolute top-2"
+		class="absolute top-1 transition-left duration-700 ease-in-out"
 		width="20px"
 		src="/images/pfeil2.png"
-		alt="pfeil"
+		alt=""
+		style="left: {Math.min(100, performance / maxPerformance * 100)}%;"
 	/>
 	<img
-		class="absolute bottom-2"
+		class="absolute bottom-1"
 		width="20px"
 		src="/images/pfeil.png"
-		alt="pfeil"
+		alt=""
 	/>
 </div>
--- a/src/components/Ausweis/Progressbar.svelte
+++ b/src/components/Ausweis/Progressbar.svelte
@@ -1,10 +1,6 @@
---
-export type Props = {
-	progress: number
-}
-
-const { progress } = Astro.props;
---
+<script lang="ts">
+	export let progress: number = 0;
+</script>

 <div class="flex flex-col relative">
 	<div class="progress-section">
--- a/src/components/Ausweis/Verbrauch.astro
+++ b/src/components/Ausweis/Verbrauch.astro
@@ -1,331 +0,0 @@
---
-import HelpLabel from "../HelpLabel.astro";
---
-
-<div class="w-full flex flex-col gap-2">
-	<div class="flex flex-row w-full justify-between">
-		<div class="form-group col-md-2">
-			<HelpLabel title="primäre Heizquelle">
-				Bitte geben Sie drei zusammenhängende Verbrauchsjahre der
-				Heizungsanlage ein. Wenn eine weitere Heizquelle vorhanden sein
-				sollte geben Sie diese rechts bei 'zusätzliche Heizquelle' ein.
-			</HelpLabel>
-			<input
-				type="checkbox"
-				tabindex="-1"
-				class="IGzus1verbrauch1"
-				value=""
-				checked
-				onclick="return false"
-			/>
-		</div>
-
-		<div class="form-group col-md-2">
-			<HelpLabel title="zusätzliche Heizquelle">
-				Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
-				zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
-				Verbrauchszeiträume wie bei der primären Heizung verwendet
-				werden.
-			</HelpLabel>
-		</div>
-
-		<div class="form-group col-md-2">
-			<HelpLabel title="Brennstoff *">
-				<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>
-				<select
-					id="energietraeger_1"
-					name="energietraeger_1"
-					class="form-control CHECK"
-					onfocus="IclearBRS()"
-					required
-					data-msg="Pflichtfeld"
-				>
-					<option id="BRSsel1" value="">Bitte auswählen</option>
-					<!-- TODO: Energieträger aus Datenbank holen -->
-				</select>
-			</div>
-		</div>
-
-		<div class="form-group col-md-2">
-			<HelpLabel title="Einheit *">
-				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>
-				<select
-					id="energietraeger_einheit_heizquelle_1"
-					name="energietraeger_einheit_heizquelle_1"
-					class="form-control CHECK"
-					required
-					data-msg="Pflichtfeld"
-				>
-					<option id="BRSE0" value="">Bitte auswählen</option>
-					<option id="BRSE1" value="kWh"> kWh</option>
-					<option id="BRSE2" value="m³">m³</option>
-					<option id="BRSE3" value="l">l</option>
-					<option id="BRSE4" value="kg">kg</option>
-					<option id="BRSE5" value="SRm"> SRm</option>
-				</select>
-			</div>
-		</div>
-
-		<div class="form-group col-md-2 v2T">
-			<label class="control-label" for="energietraeger_2"
-				>Brennstoff *
-			</label>
-			<div>
-				<select
-					id="energietraeger_2"
-					name="energietraeger_2"
-					class="form-control CHECK"
-					onfocus="IclearBRS1()"
-					disabled
-					required
-					data-msg="Pflichtfeld"
-				>
-					<option id="BRSsel2" value=""> Bitte auswählen</option>
-					<!-- TODO: Energieträger aus Datenbank holen -->
-				</select>
-			</div>
-		</div>
-
-		<div class="form-group col-md-2 v2T">
-			<label
-				class="control-label"
-				for="energietraeger_einheit_heizquelle_2"
-				>Einheit *
-			</label>
-			<div>
-				<select
-					id="energietraeger_einheit_heizquelle_2"
-					name="energietraeger_einheit_heizquelle_2"
-					class="form-control CHECK"
-					disabled
-					required
-					data-msg="Pflichtfeld"
-					style="margin-bottom: 0.5em !important;"
-				>
-					<option id="2BRSE0" value="">Bitte auswählen</option>
-					<option id="2BRSE1" value="kWh"> kWh</option>
-					<option id="2BRSE2" value="m³">m³</option>
-					<option id="2BRSE3" value="l">l</option>
-					<option id="2BRSE4" value="kg">kg</option>
-					<option id="2BRSE5" value="SRm"> SRm</option>
-				</select>
-			</div>
-		</div>
-	</div>
-
-	<div class="flex flex-row justify-between">
-		<div class="column-first grid grid-cols-2">
-			<span>von</span>
-			<select
-				name="energieverbrauch_zeitraum_monat"
-				class="form-control rounded-tr-none rounded-br-none w-full"
-				required
-			>
-				<option value="">auswählen</option>
-				<option id="Januar" value="1">Januar</option>
-				<option id="Februar" value="2"> Februar</option>
-				<option id="März" value="3">März</option>
-				<option id="April" value="4">April</option>
-				<option id="Mai" value="5">Mai</option>
-				<option id="Juni" value="6">Juni</option>
-				<option id="Juli" value="7">Juli</option>
-				<option id="August" value="8">August</option>
-				<option id="September" value="9"> September</option>
-				<option id="Oktober" value="10"> Oktober</option>
-				<option id="November" value="11"> November</option>
-				<option id="Dezember" value="12"> Dezember</option>
-			</select>
-
-			<select
-				name="energieverbrauch_zeitraum_jahr"
-				class="form-control rounded-tl-none rounded-bl-none w-full"
-				required
-			>
-				<option value="">auswählen</option>
-				<option id="2010" value="2010"> 2010</option>
-				<option id="2011" value="2011"> 2011</option>
-				<option id="2012" value="2012"> 2012</option>
-				<option id="2013" value="2013"> 2013</option>
-				<option id="2014" value="2014"> 2014</option>
-				<option id="2015" value="2015"> 2015</option>
-				<option id="2016" value="2016"> 2016</option>
-				<option id="2017" value="2017"> 2017</option>
-				<option id="2018" value="2018"> 2018</option>
-				<option id="2019" value="2019"> 2019</option>
-			</select>
-		</div>
-
-		<div class="column">
-			<span>bis</span>
-			<input
-				id="IGverbrauch1Y2"
-				tabindex="-1"
-				class="form-control"
-				value=""
-				readonly
-			/>
-		</div>
-
-		<div class="column">
-			<span>Verbrauch</span>
-			<input
-				id="energieverbrauch_1_heizquelle_1"
-				name="energieverbrauch_1_heizquelle_1"
-				class="form-control input-md zahlen CHECK"
-				type="text"
-				value=""
-				required
-				data-msg="Pflichtfeld"
-			/>
-		</div>
-
-		<div class="column">
-			<span>Verbrauch</span>
-			<input
-				id="energieverbrauch_1_heizquelle_2"
-				name="energieverbrauch_1_heizquelle_2"
-				class="form-control input-md zahlen CHECK"
-				type="text"
-				value=""
-				disabled
-			/>
-		</div>
-	</div>
-
-	<div class="flex flex-row justify-between">
-		<div class="column-first">
-			<span>von</span>
-			<input
-				id="IGverbrauch2M"
-				tabindex="-1"
-				class="form-control klima CHECK"
-				value=""
-				readonly
-			/>
-		</div>
-
-		<div class="column">
-			<span>bis</span>
-			<input
-				id="IGverbrauch2Y2"
-				tabindex="-1"
-				class="form-control"
-				value=""
-				readonly
-			/>
-		</div>
-
-		<div class="column">
-			<span>Verbrauch</span>
-			<input
-				id="energieverbrauch_2_heizquelle_1"
-				name="energieverbrauch_2_heizquelle_1"
-				class="form-control input-md zahlen CHECK"
-				type="text"
-				value=""
-				required
-				data-msg="Pflichtfeld"
-			/>
-		</div>
-
-		<div class="column">
-			<span>Verbrauch</span>
-			<input
-				id="energieverbrauch_2_heizquelle_2"
-				name="energieverbrauch_2_heizquelle_2"
-				class="form-control input-md zahlen CHECK"
-				type="text"
-				value=""
-				disabled
-			/>
-		</div>
-	</div>
-
-	<div class="flex flex-row justify-between">
-		<div class="column-first">
-			<span>von</span>
-			<input
-				id="IGverbrauch3M"
-				tabindex="-1"
-				class="form-control klima CHECK"
-				value=""
-				readonly
-			/>
-		</div>
-
-		<div class="column">
-			<span>bis</span>
-			<input
-				id="IGverbrauch3Y2"
-				tabindex="-1"
-				class="form-control"
-				value=""
-				readonly
-			/>
-		</div>
-
-		<div class="column">
-			<span>Verbrauch</span>
-			<input
-				id="energieverbrauch_3_heizquelle_1"
-				name="energieverbrauch_3_heizquelle_1"
-				class="form-control input-md zahlen CHECK"
-				type="text"
-				value=""
-				required
-				data-msg="Pflichtfeld"
-			/>
-		</div>
-
-		<div class="column">
-			<span>Verbrauch</span>
-			<input
-				id="energieverbrauch_3_heizquelle_2"
-				name="energieverbrauch_3_heizquelle_2"
-				class="form-control input-md zahlen CHECK"
-				type="text"
-				value=""
-				disabled
-			/>
-		</div>
-	</div>
-</div>
-
-<style>
-	.column-first {
-		@apply flex flex-row items-center w-[300px] gap-4;
-	}
-
-	.column {
-		@apply flex flex-row items-center gap-4;
-	}
-</style>
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -0,0 +1,324 @@
+<script lang="ts">
+	import HelpLabel from "../HelpLabel.svelte";
+	import moment from "moment";
+	import Label from "../Label.svelte";
+	import fuelList from "./fuelList";
+
+	let availableYears = [
+		2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019,
+	];
+	let availableMonths = [
+		"Januar",
+		"Februar",
+		"März",
+		"April",
+		"Mai",
+		"Juni",
+		"Juli",
+		"August",
+		"September",
+		"Oktober",
+		"November",
+		"Dezember",
+	];
+
+	let month: number = 1;
+	let year: number = availableYears[0];
+
+	export let additionalHeating: boolean = false;
+	// Verbräuche aller drei Verbrauchsjahre der primären Energiequelle
+	export let energyConsumption: number[] = [0, 0, 0];
+	// Verbräuche aller drei Verbrauchsjahre der sekundären Energiequelle
+	export let additionalEnergyConsumption: number[] = [0, 0, 0];
+
+	export let climateFactors: number[];
+
+	export let conversionFactor: number;
+
+	export let calorificValueFactor: number;
+
+	$: conversionFactor = fuelList.find((x) => {
+		return x.energietraeger == fuel && x.einheit == unit
+	})?.umrechnungsfaktor || 1;
+
+	$: calorificValueFactor = fuelList.find((x) => {
+		return x.energietraeger == fuel && x.einheit == unit
+	})?.heizwertfaktor || 1;
+
+	async function fetchClimateFactors() {
+		const url = `/api/climate_factor?start=${month}.01.${year}&end=${month}.01.${year + 2}&accuracy=years&zip=21039`;
+
+		fetch(url)
+			.then(response => response.json())
+			.then(result => {
+				climateFactors = Object.values(result.data);
+			});
+	}
+
+	const fuelMap: Record<string, string[]> = {};
+	for (const fuel of fuelList) {
+		fuelMap[fuel.energietraeger] = fuelMap[fuel.energietraeger] || [];
+		fuelMap[fuel.energietraeger].push(fuel.einheit)
+	}
+	
+	let fuel: string = fuelList[0].energietraeger;
+	let unit: string = fuelList[0].einheit;
+</script>
+
+<div class="w-full flex flex-col gap-4">
+	<div class="w-full grid grid-cols-[1fr_1fr_1fr_1fr_1fr] gap-6">
+		<div>
+			<HelpLabel title="zusätzliche Heizquelle">
+				Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
+				zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
+				Verbrauchszeiträume wie bei der primären Heizung verwendet
+				werden.
+			</HelpLabel>
+			<input
+				type="checkbox"
+				class="IGzus1verbrauch1"
+				bind:checked={additionalHeating}
+			/>
+		</div>
+		
+		<div>
+			<HelpLabel title="Brennstoff *">
+				<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>
+				<select name="energietraeger_1" required bind:value={fuel}>
+					<option>Bitte auswählen</option>
+					{#each Object.keys(fuelMap) as fuel}
+						<option value={fuel}>{fuel}</option>
+					{/each}
+				</select>
+			</div>
+		</div>
+
+		<div>
+			<HelpLabel title="Einheit *">
+				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>
+				<select name="energietraeger_einheit_heizquelle_1" required bind:value={unit}>
+					<option>Bitte auswählen</option>
+					{#each fuelMap[fuel] as unit}
+						<option value={unit}>{unit}</option>
+					{/each}
+				</select>
+			</div>
+		</div>
+
+		<div>
+			<Label>Brennstoff *</Label>
+			<div>
+				<select
+					name="energietraeger_2"
+					disabled={!additionalHeating}
+					required
+				>
+					<option> Bitte auswählen</option>
+					<!-- TODO: Energieträger aus Datenbank holen -->
+				</select>
+			</div>
+		</div>
+
+		<div>
+			<Label>Einheit *</Label>
+			<div>
+				<select
+					name="energietraeger_einheit_heizquelle_2"
+					disabled={!additionalHeating}
+					required
+				>
+					<option>Bitte auswählen</option>
+					<option value="kWh"> kWh</option>
+					<option value="m³">m³</option>
+					<option value="l">l</option>
+					<option value="kg">kg</option>
+					<option value="SRm"> SRm</option>
+				</select>
+			</div>
+		</div>
+	</div>
+
+	<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6">
+		<div class="flex flex-col gap-2">
+			<div class="column">
+				<span>von</span>
+				<select
+					name="energieverbrauch_zeitraum_monat"
+					class="rounded-tr-none rounded-br-none w-full m-0"
+					bind:value={month}
+					on:change={fetchClimateFactors}
+					required
+				>
+					<option>auswählen</option>
+					{#each availableMonths as m, i}
+						<option value={i + 1}>{m}</option>
+					{/each}
+				</select>
+
+				<select
+					name="energieverbrauch_zeitraum_jahr"
+					class="rounded-tl-none rounded-bl-none w-full m-0"
+					bind:value={year}
+					on:change={fetchClimateFactors}
+					required
+				>
+					<option>auswählen</option>
+					{#each availableYears as y}
+						<option value={y}>{y}</option>
+					{/each}
+				</select>
+			</div>
+			<div class="column">
+				<span>von</span>
+				<input
+					class="klima "
+					value={moment(`${month}.01.${year}`)
+						.add("1", "year")
+						.format("MM.Y")}
+					readonly
+				/>
+			</div>
+			<div class="column">
+				<span>von</span>
+				<input
+					class="klima "
+					value={moment(`${month}.01.${year}`)
+						.add("2", "years")
+						.format("MM.Y")}
+					readonly
+				/>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2">
+			<div class="column">
+				<span>bis</span>
+				<input
+					class="form-control"
+					value={moment(`${month}.01.${year}`)
+						.add("1", "year")
+						.format("MM.Y")}
+					readonly
+				/>
+			</div>
+			<div class="column">
+				<span>bis</span>
+				<input
+					class="form-control"
+					value={moment(`${month}.01.${year}`)
+						.add("2", "years")
+						.format("MM.Y")}
+					readonly
+				/>
+			</div>
+			<div class="column">
+				<span>bis</span>
+				<input
+					class="form-control"
+					value={moment(`${month}.01.${year}`)
+						.add("3", "years")
+						.format("MM.Y")}
+					readonly
+				/>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2">
+			<div class="column">
+				<span>Verbrauch</span>
+				<input
+					name="energieverbrauch_1_heizquelle_1"
+					class="input-md zahlen "
+					type="text"
+					bind:value={energyConsumption[0]}
+					required
+				/>
+			</div>
+			<div class="column">
+				<span>Verbrauch</span>
+				<input
+					name="energieverbrauch_2_heizquelle_1"
+					class="input-md zahlen "
+					type="text"
+					bind:value={energyConsumption[1]}
+					required
+				/>
+			</div>
+			<div class="column">
+				<span>Verbrauch</span>
+				<input
+					name="energieverbrauch_3_heizquelle_1"
+					class="input-md zahlen "
+					type="text"
+					bind:value={energyConsumption[2]}
+					required
+				/>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2">
+			<div class="column">
+				<span>Verbrauch</span>
+				<input
+					name="energieverbrauch_1_heizquelle_2"
+					class="input-md zahlen "
+					type="text"
+					bind:value={additionalEnergyConsumption[0]}
+					disabled={!additionalHeating}
+				/>
+			</div>
+			<div class="column">
+				<span>Verbrauch</span>
+				<input
+					name="energieverbrauch_2_heizquelle_2"
+					class="input-md zahlen "
+					type="text"
+					bind:value={additionalEnergyConsumption[1]}
+					disabled={!additionalHeating}
+				/>
+			</div>
+			<div class="column">
+				<span>Verbrauch</span>
+				<input
+					name="energieverbrauch_3_heizquelle_2"
+					class="input-md zahlen "
+					type="text"
+					bind:value={additionalEnergyConsumption[2]}
+					disabled={!additionalHeating}
+				/>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.column {
+		@apply flex flex-row items-center gap-4;
+	}
+</style>
--- a/src/components/Ausweis/fuelList.ts
+++ b/src/components/Ausweis/fuelList.ts
@@ -0,0 +1,290 @@
+export default [
+	{
+		energietraeger: "Heizöl EL",
+		einheit: "l",
+		umrechnungsfaktor: 10.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.06,
+		coe: 0.310,
+	},
+	{
+		energietraeger: "Erdgas H",
+		einheit: "m³",
+		umrechnungsfaktor: 10.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.11,
+		coe: 0.240,
+	},
+	{
+		energietraeger: "Holz-Pellets",
+		einheit: "kg",
+		umrechnungsfaktor: 5.0,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Brennholz",
+		einheit: "kg",
+		umrechnungsfaktor: 4.1,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Flüssiggas",
+		einheit: "kg",
+		umrechnungsfaktor: 13.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.09,
+		coe: 0.270,
+	},
+	{
+		energietraeger: "Braunkohle",
+		einheit: "kg",
+		umrechnungsfaktor: 5.5,
+		primärenergiefaktor: 1.2,
+		heizwertfaktor: 1.07,
+		coe: 0.430,
+	},
+	{
+		energietraeger: "Holzhackschnitzel",
+		einheit: "SRm",
+		umrechnungsfaktor: 650.0,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Strommix",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 2.4,
+		heizwertfaktor: 1.00,
+		coe: 0.560,
+	},
+	{
+		energietraeger: "Fernwärme KWK FB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.7,
+		heizwertfaktor: 1.00,
+		coe: 0.300,
+	},
+	{
+		energietraeger: "Nahwärme KWK FB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.7,
+		heizwertfaktor: 1.00,
+		coe: 0.300,
+	},
+	{
+		energietraeger: "Heizöl EL",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.06,
+		coe: 0.310,
+	},
+	{
+		energietraeger: "Erdgas H",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.11,
+		coe: 0.240,
+	},
+	{
+		energietraeger: "Holz-Pellets",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Brennholz",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Flüssiggas",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.09,
+		coe: 0.270,
+	},
+	{
+		energietraeger: "Braunkohle",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.2,
+		heizwertfaktor: 1.07,
+		coe: 0.430,
+	},
+	{
+		energietraeger: "Holzhackschnitzel",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Flüssiggas",
+		einheit: "l",
+		umrechnungsfaktor: 7.3,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.09,
+		coe: 0.270,
+	},
+	{
+		energietraeger: "Brennholz",
+		einheit: "m³",
+		umrechnungsfaktor: 2000.0,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Flüssiggas",
+		einheit: "m³",
+		umrechnungsfaktor: 26.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.09,
+		coe: 0.270,
+	},
+	{
+		energietraeger: "Erdgas L",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.11,
+		coe: 0.240,
+	},
+	{
+		energietraeger: "Brennholz",
+		einheit: "SRm",
+		umrechnungsfaktor: 800.0,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Koks",
+		einheit: "kg",
+		umrechnungsfaktor: 8.3,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.02,
+		coe: 0.400,
+	},
+	{
+		energietraeger: "Erdgas L",
+		einheit: "m³",
+		umrechnungsfaktor: 9.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.11,
+		coe: 0.240,
+	},
+	{
+		energietraeger: "Koks",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.02,
+		coe: 0.400,
+	},
+	{
+		energietraeger: "Holzhackschnitzel",
+		einheit: "kg",
+		umrechnungsfaktor: 3.8,
+		primärenergiefaktor: 0.2,
+		heizwertfaktor: 1.08,
+		coe: 0.020,
+	},
+	{
+		energietraeger: "Nahwärme HKW EB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.1,
+		heizwertfaktor: 1.00,
+		coe: 0.060,
+	},
+	{
+		energietraeger: "Nahwärme HKW FB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.3,
+		heizwertfaktor: 1.00,
+		coe: 0.400,
+	},
+	{
+		energietraeger: "Nahwärme KWK EB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.0,
+		heizwertfaktor: 1.00,
+		coe: 0.040,
+	},
+	{
+		energietraeger: "Fernwärme KWK EB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.0,
+		heizwertfaktor: 1.00,
+		coe: 0.040,
+	},
+	{
+		energietraeger: "Fernwärme HKW FB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.3,
+		heizwertfaktor: 1.00,
+		coe: 0.400,
+	},
+	{
+		energietraeger: "Fernwärme HKW EB",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 0.1,
+		heizwertfaktor: 1.00,
+		coe: 0.060,
+	},
+	{
+		energietraeger: "Erdgas",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.11,
+		coe: 0.240,
+	},
+	{
+		energietraeger: "Heizöl",
+		einheit: "kWh",
+		umrechnungsfaktor: 1.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.06,
+		coe: 0.310,
+	},
+	{
+		energietraeger: "Heizöl",
+		einheit: "l",
+		umrechnungsfaktor: 10.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.06,
+		coe: 0.310,
+	},
+	{
+		energietraeger: "Erdgas",
+		einheit: "m³",
+		umrechnungsfaktor: 9.0,
+		primärenergiefaktor: 1.1,
+		heizwertfaktor: 1.11,
+		coe: 0.240,
+	},
+];
--- a/src/components/HelpLabel.svelte
+++ b/src/components/HelpLabel.svelte
@@ -1,10 +1,7 @@
---
-export type Props = {
-	title: string;
-};
-
-const { tooltip, title } = Astro.props;
---
+<script lang="ts">
+	export let title: string;
+	export let tooltip: string = "";
+</script>

 <div class="flex flex-row justify-between mb-2">
 	<label>{title}</label>
--- a/src/components/Label.svelte
+++ b/src/components/Label.svelte
@@ -0,0 +1,3 @@
+<div class="flex flex-row justify-between mb-2">
+	<label class="text-base font-medium"><slot></slot></label>
+</div>
--- a/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte
+++ b/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte
@@ -0,0 +1,823 @@
+<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 Ausweisart from "~/components/Ausweis/Ausweisart.svelte";
+	import HeizungImage from "~/components/Ausweis/HeizungImage.svelte";
+	import FensterImage from "~/components/Ausweis/FensterImage.svelte";
+	import DaemmungImage from "~/components/Ausweis/DaemmungImage.svelte";
+	import AusweisPreviewContainer from "~/components/Ausweis/AusweisPreviewContainer.svelte";
+	import { calculateEnergyPerformanceScore } from "./energyPerformanceCalculation";
+
+	let additionalHeating: boolean = false;
+	let heatedWaterIncluded: boolean = false;
+	let heatedWaterPortion: number = 18;
+	let hasCellar: boolean = false;
+	let conversionFactor: number = 0;
+	let calorificValueFactor: number = 0;
+
+	let energyConsumption = [0, 0, 0];
+	let additionalEnergyConsumption = [0, 0, 0];
+	let climateFactors = [0, 0, 0];
+
+	let area = 0;
+	let energyPerformance = 0;
+
+	$: {
+		energyPerformance = calculateEnergyPerformanceScore(energyConsumption, additionalEnergyConsumption, heatedWaterPortion, climateFactors, area * (hasCellar ? 1.35 : 1.2), conversionFactor, calorificValueFactor);
+		console.log(energyPerformance)
+	}
+
+	let constructionYear: number;
+	let apartmentCount: number;
+	let certificateReason: "Vermietung" | "Neubau" | "Verkauf" | "Modernisierung" | "Sonstiges";
+	let sanitationStatus: boolean;
+
+	let needsRequirementCertificate: boolean = false;
+
+	$: needsRequirementCertificate = (
+		(constructionYear < 1978 &&
+		apartmentCount <= 4 &&
+			sanitationStatus == false &&
+			(certificateReason == "Vermietung" || certificateReason == "Sonstiges")) ||
+			certificateReason == "Neubau" ||
+		certificateReason == "Modernisierung" ||
+		certificateReason == "Verkauf"
+	)
+</script>
+
+<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 performance={energyPerformance} />
+</div>
+
+<form method="post" action="/verbrauchsausweis/erstellen">
+	<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>
+			<Hilfe />
+		</div>
+
+		<hr />
+
+		<div class="form-group col-md-12">
+			<Label>A - Prüfung der Ausweisart</Label>
+		</div>
+
+		<Ausweisart bind:constructionYear bind:apartmentCount bind:certificateReason bind:sanitationStatus />
+
+		<div class="flex flex-col p-4" class:hidden={!needsRequirementCertificate}>
+			<div class="form-group col-md-9">
+				<HelpLabel
+					title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
+				>
+					Der Bedarfsausweis ist die etwas umfangreichere Berechnung.
+					Sie benötigen z.B. Länge, Breite und Geschoßhöhe des
+					Gebäudes. Auch müssen genauere Angaben zur Anlagentechnik
+					gemacht werden.
+				</HelpLabel>
+			</div>
+
+			<div class="form-group col-md-3">
+				<a class="button" href="/bedarfsausweis">Bedarfsausweis erstellen</a>
+			</div>
+		</div>
+
+		<hr />
+
+		<div class="form-group col-md-12">
+			<Label
+				>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche,
+				Kellerund Dachgeschoss</Label
+			>
+		</div>
+
+		<div class="col-md-12">
+			<div class="GRB">
+				<!-- Strasse -->
+				<div class="form-group col-md-4">
+					<HelpLabel title="Straße, Hausnummer *">
+						Bitte geben Sie hier die Straße und Hausnummer des
+						Gebäudes ein.
+					</HelpLabel>
+					<div>
+						<input
+							name="IGstrasse"
+							class="input-md strasse"
+							type="text"
+							autocomplete="off"
+							required
+							data-msg-minlength="min. 5 Zeichen"
+							data-msg-maxlength="max. 40 Zeichen"
+						/>
+					</div>
+				</div>
+
+				<!-- PLZ -->
+				<div class="form-group col-md-4 PLZ">
+					<HelpLabel title="PLZ *">
+						Bitte geben Sie hier die PLZ des Gebäudes ein.
+					</HelpLabel>
+					<div>
+						<input
+							name="IGplz"
+							class="input-md klima CHECK"
+							type="text"
+							required
+							autocomplete="off"
+							maxlength="5"
+						/>
+						<div />
+					</div>
+				</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="IGort"
+							class="input-md buchstaben"
+							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="IGflaeche"
+							maxlength="4"
+							class="input-md zahlen CHECK"
+							required
+							autocomplete="off"
+							data-rule-minlength="2"
+							data-msg-minlength="min. 2 Zeichen"
+							bind:value={area}
+						/>
+					</div>
+				</div>
+
+				<!-- Keller -->
+				<div class="form-group col-md-4">
+					<Label>Keller *</Label>
+					<div>
+						<select name="IGkeller" class="CHECK" required bind:value={hasCellar}>
+							<option>Bitte auswählen</option>
+							<option value={false}>nicht vorhanden</option>
+							<option value={false}>unbeheizt</option>
+							<option value={true}>beheizt</option>
+						</select>
+					</div>
+				</div>
+
+				<!-- Dachgeschoss -->
+				<div class="form-group col-md-4">
+					<Label>Dachgeschoss *</Label>
+					<div>
+						<select name="IGdach" class="form-control" required>
+							<option>Bitte auswählen</option>
+							<option value="dnein">nicht vorhanden</option>
+							<option value="dub">unbeheizt</option>
+							<option value="dbh">beheizt</option>
+						</select>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<div class="form-group col-md-12">
+			<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
+		</div>
+
+		<div class="GRB">
+			<Verbrauch bind:additionalHeating bind:energyConsumption bind:additionalEnergyConsumption bind:climateFactors bind:conversionFactor bind:calorificValueFactor />
+		</div>
+
+		<hr />
+
+		<div class="form-group col-md-12">
+			<Label
+				>D - Eingabe Warmwasseranteil und Verwendung von alternativen
+				Energieversorgungssystemen</Label
+			>
+		</div>
+
+		<div class="GRB">
+			<!-- Anteil WW enthalten -->
+			<div class="flex flex-col">
+				<div class="flex flex-row gap-6">
+					<label class="radio-inline"
+						><input
+							type="checkbox"
+							class="IGwwbool"
+							name="IGwwbool"
+							bind:checked={heatedWaterIncluded}
+						/>Warmwasser im Verbrauch enthalten</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="IGwarmwasser"
+					maxlength="2"
+					class="input-md zahlen CHECK"
+					type="text"
+					bind:value={heatedWaterPortion}
+					disabled={!heatedWaterIncluded}
+					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="IGwarmwasser2"
+					maxlength="3"
+					class="input-md zahlen"
+					type="text"
+					autocomplete="off"
+					disabled={!additionalHeating}
+				/>
+			</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="IGversorgungssysteme1"
+							value="Heizung"
+						/>Heizung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGversorgungssysteme2"
+							value="Warmwasser"
+						/>Warmwasser</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGversorgungssysteme3"
+							value="Lüftung"
+						/>Lüftung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGversorgungssysteme4"
+							value="Kühlung"
+						/>Kühlung</label
+					>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<div class="form-group col-md-12">
+			<Label
+				>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
+				Leerstand</Label
+			>
+		</div>
+
+		<div class="GRB">
+			<!-- Gebäudetyp -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gebäudetyp *">
+					Bitte wählen Sie hier den Gebäudetyp aus.
+				</HelpLabel>
+				<div>
+					<select
+						name="IGtyp"
+						class="form-control"
+						required
+						autocomplete="off"
+					>
+						<option>Bitte auswählen</option>
+						<option value="Einfamilienhaus">Einfamilienhaus</option>
+						<option value="Freistehendes Einfamilienhaus"
+							>Freistehendes Einfamilienhaus</option
+						>
+						<option value="Freistehendes Zweifamilienhaus"
+							>Freistehendes Zweifamilienhaus</option
+						>
+						<option value="Doppelhaushälfte"
+							>Doppelhaushälfte</option
+						>
+						<option value="Reihenendhaus">Reihenendhaus</option>
+						<option value="Reihenmittelhaus"
+							>Reihenmittelhaus</option
+						>
+						<option value="Mehrfamilienhaus"
+							>Mehrfamilienhaus</option
+						>
+						<option value="Wohn- und Geschäftshaus"
+							>Wohn- und Geschäftshaus</option
+						>
+						<option value="Atrium-Bungalow">Atrium-Bungalow</option>
+						<option value="Winkelbungalow">Winkelbungalow</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Gebäudeteil -->
+			<div class="form-group col-md-3">
+				<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="IGteil"
+						class="form-control"
+						required
+						autocomplete="off"
+					>
+						<option>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="IGlueftung"
+						class="form-control"
+						required
+						autocomplete="off"
+					>
+						<option>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="IGkuehlung"
+						class="form-control"
+						required
+						autocomplete="off"
+					>
+						<option>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="IGleer"
+						maxlength="2"
+						class="input-md zahlen"
+						type="text"
+						autocomplete="off"
+					/>
+				</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>
+
+		<div class="GRB3">
+			<HelpLabel title="Heizungsanlage (bitte zutreffendes ankreuzen) *">
+				Wir benötigen diese Angaben um den allgemeinen
+				Modernisierungsstand einschätzen zu können. Bitte setzen Sie den
+				Haken wenn zutreffend. Das seit Mai 2021 gültige GEG erfordert
+				eine genauere Prüfung anhand von Fotos. Bitte laden Sie ein oder
+				mehrere Fotos der Heizungsanlage bzw. des Heizungsraums hoch.
+			</HelpLabel>
+			<hr />
+
+			<div class="grid grid-cols-4">
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage1"
+							value="ZH"
+						/>Zentral/Etage</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage2"
+							value="EO"
+						/>Einzelöfen</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage3"
+							value="DH"
+						/>Durchlauferhitzer</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage4"
+							value="SK"
+						/>Standardkessel</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage5"
+							value="SSWW"
+						/>Solarsystem für Warmwasser</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage6"
+							value="WP"
+						/>Wärmepumpe</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage7"
+							value="NK"
+						/>Niedertemperaturkessel</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage8"
+							value="BWK"
+						/>Brennwertkessel</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage9"
+							value="WRGD"
+						/>Warmwasserrohre gedämmt</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage10"
+							value="HRGD"
+						/>Heizungsrohre gedämmt</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage11"
+							value="ZK"
+						/>Zirkulation</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGheizungsanlage12"
+							value="RTR"
+						/>Raumtemperaturregler</label
+					>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<HeizungImage />
+
+		<hr />
+
+		<div class="GRB3">
+			<HelpLabel
+				title="Fenster/Dachfenster/Türen (bitte zutreffendes ankreuzen):*"
+			>
+				Wir benötigen diese Angaben um den allgemeinen
+				Modernisierungsstand einschätzen zu können. Bitte setzen Sie den
+				Haken wenn zutreffend.
+			</HelpLabel>
+			<hr />
+
+			<div class="grid grid-cols-4">
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach1"
+							value="EG"
+						/>Einfachglas</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach2"
+							value="DF"
+						/>Doppelverglasung</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach3"
+							value="IVG"
+						/>Isolierverglasung</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach4"
+							value="PHF"
+						/>Dreifachverglasung</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach5"
+							value="FD"
+						/>Alle Fenster dicht</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach6"
+							value="FTUD"
+						/>Fenster teilweise undicht</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach7"
+							value="TD"
+						/>Alle Türen dicht</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach8"
+							value="TUD"
+						/>Türen teilweise undicht</label
+					>
+				</div>
+				<div class="form-group col-md-3">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGfensterdach9"
+							value="RKD"
+						/>Rollladenkästen gedämmt, luftdicht</label
+					>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<FensterImage />
+
+		<hr />
+
+		<div class="GRB3">
+			<div class="form-group col-md-12">
+				<HelpLabel
+					title="Wärmedämmung (bitte zutreffendes ankreuzen) *"
+				>
+					Wir benötigen diese Angaben um den allgemeinen
+					Modernisierungsstand einschätzen zu können. Bitte setzen Sie
+					den Haken wenn zutreffend. Das seit Mai 2021 gültige GEG
+					erfordert eine genauere Prüfung anhand von Fotos. Bitte
+					laden Sie ein oder mehrere Fotos der Außenwand und des
+					Dachbereiches hoch.
+				</HelpLabel>
+				<hr />
+			</div>
+
+			<div class="grid grid-cols-4">
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGwaermedaemmung1"
+							value="AWD"
+						/>Außenwand gedämmt</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGwaermedaemmung2"
+							value="KWD"
+						/>Kelleraußenwand gedämmt</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGwaermedaemmung3"
+							value="KDD"
+						/>Kellerdecke gedämmt</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGwaermedaemmung4"
+							value="DGD"
+						/>Dachgeschoss gedämmt</label
+					>
+				</div>
+				<div class="form-group col-md-3 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGwaermedaemmung5"
+							value="OGDDW"
+						/>Oberste Geschossdecke gedämmt</label
+					>
+				</div>
+				<div class="form-group col-md-6 mw1">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="IGwaermedaemmung6"
+							value="OGDD"
+						/>Oberste Geschossdecke min. 12cm gedämmt</label
+					>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<DaemmungImage />
+
+		<hr />
+
+		<div class="form-group col-md-12">
+			<Label
+				>G - Hier können Sie ein Gebäudebild hochladen und sich Ihren
+				Energieausweis als PDF anschauen</Label
+			>
+		</div>
+
+		<AusweisPreviewContainer />
+
+		<div class="flex flex-row justify-between">
+			<Hilfe />
+			<button formnovalidate>Weiter</button>
+		</div>
+	</fieldset>
+</form>
+
+<style is:global>
+	:global(.GRB) {
+		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
+		background: linear-gradient(
+		135deg,
+		rgba(252, 234, 187, 1) 0%,
+		rgba(253, 235, 189, 1) 52%,
+		rgba(251, 223, 147, 1) 100%
+	);
+	}
+
+	:global(.GRB3) {
+		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
+		background: linear-gradient(
+		135deg,
+		rgba(252, 234, 187, 1) 0%,
+		rgba(253, 235, 189, 1) 52%,
+		rgba(251, 223, 147, 1) 100%
+	);
+	}
+
+	:global(.headline) {
+		@apply text-lg;
+	}
+
+	:global(.radio-inline) {
+		@apply flex flex-row gap-2;
+	}
+
+	:global(.checkbox-inline) {
+		@apply flex flex-row gap-2;
+	}
+
+	:global(input[type="checkbox"]) {
+		width: auto;
+	}
+</style>
--- a/src/components/Verbrauchsausweis/energyPerformanceCalculation.ts
+++ b/src/components/Verbrauchsausweis/energyPerformanceCalculation.ts
@@ -0,0 +1,39 @@
+
+/**
+ * 
+ * @param energyConsumption Ein Array aus allen Verbräuchen der drei Verbrauchsjahre für die primäre Energiequelle
+ * @param additionalEnergyConsumption Ein Array aus allen Verbräuchen der drei Verbrauchsjahre für die sekundäre Energiequelle
+ * @param waterHeatingPortion Der Anteil den Warmwasser am Energieverbrauch ausgemacht hat
+ * @param climateFactors Ein Array aus drei Klimafaktoren für die Verbrauchsjahre
+ * @param area Die Nutzfläche des Gebäudes
+ * @param conversionFactor Der Umrechnungsfaktor des Energieträgers
+ * @param calorificValueFactor Der Heizwertfaktor des Energieträgers
+ * @returns Den Performance Wert den das Gebäude erzielt hat.
+ */
+export function calculateEnergyPerformanceScore(
+	energyConsumption: number[],
+	additionalEnergyConsumption: number[],
+	waterHeatingPortion: number,
+	climateFactors: number[],
+	area: number,
+	conversionFactor: number,
+	calorificValueFactor: number
+): number {
+	// Alle Werte müssen in kWh umgerechnet werden.
+	let energyConsumptionKWh = energyConsumption.map((x) => convertEnergyConsumptionToKWh(x, conversionFactor, calorificValueFactor))
+	let additionalEnergyConsumptionKWh = additionalEnergyConsumption.map((x) => convertEnergyConsumptionToKWh(x, conversionFactor, calorificValueFactor))
+	let heatingPortion = 1 - (waterHeatingPortion / 100);
+
+	return (heatingPortion * (energyConsumptionKWh[0] + additionalEnergyConsumptionKWh[0]) * climateFactors[0] +
+		(waterHeatingPortion / 100) * (energyConsumptionKWh[0] + additionalEnergyConsumptionKWh[0]) +
+		heatingPortion * (energyConsumptionKWh[1] + additionalEnergyConsumptionKWh[1]) * climateFactors[1] +
+		(waterHeatingPortion / 100) * (energyConsumptionKWh[1] + additionalEnergyConsumptionKWh[1]) +
+		heatingPortion * (energyConsumptionKWh[2] + additionalEnergyConsumptionKWh[2]) * climateFactors[2] +
+		(waterHeatingPortion / 100) * (energyConsumptionKWh[2] + additionalEnergyConsumptionKWh[2])) /
+	3 /
+	area;
+}
+
+function convertEnergyConsumptionToKWh(consumption: number, conversionFactor: number, calorificValueFactor: number): number {
+ return (consumption * conversionFactor) / calorificValueFactor;
+}
--- a/src/components/Verbrauchsausweis/index.ts
+++ b/src/components/Verbrauchsausweis/index.ts
@@ -0,0 +1 @@
+export { default as VerbrauchsausweisContent } from "./VerbrauchsausweisContent.svelte"
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -101,7 +101,7 @@ const schema = JSON.stringify({
 		min-height: 100vh;
 	}

-	button, .button {
+	button, .button, button[type="button"] {
 		@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center;
 		color: #fff !important;
 	}
@@ -110,11 +110,15 @@ const schema = JSON.stringify({
 		@apply text-xl font-medium mt-6 mb-4;
 	}

-	input {
-		@apply py-2 px-4 w-full outline-none text-lg text-slate-800 border;
+	input, select, textarea {
+		@apply py-1.5 px-2.5 rounded-lg w-full outline-none text-base text-slate-800 border;
+	}
+
+	input:disabled, input:read-only, select:disabled {
+		@apply bg-gray-200 border-gray-300;
 	}

 	input:disabled {
-		@apply bg-gray-100 border-gray-300;
+		text-indent: -9999px;
 	}
 </style>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -112,7 +112,7 @@ const schema = JSON.stringify({
 	}

 	input {
-		@apply py-2 px-4 w-full outline-none text-lg text-slate-800 border;
+		@apply py-1 px-2 w-full rounded-lg outline-none text-lg text-slate-800 border;
 	}

 	label {
--- a/src/lib/Klimafaktoren/getClimateFactor.ts
+++ b/src/lib/Klimafaktoren/getClimateFactor.ts
@@ -0,0 +1,29 @@
+import moment, { Moment } from "moment";
+import { db } from "../shared";
+
+export async function getClimateFactor(dates: Moment[], zip: string): Promise<number[][] | null> {
+	const formattedDates = dates.map(date => {
+		let d = moment(date).format("MM_YYYY");
+		return `d_${d} as ${d}`
+	});
+
+	if (dates.length == 0) {
+		return null;
+	}
+	if (zip.length !== 5 && zip.length !== 4) {
+		return null;
+	}
+	
+	let result;
+	try {
+		result = await db<number[][]>("climate_factors").select(formattedDates).where("zip", zip).first();
+	} catch(e) {
+		return null;
+	}
+
+	if (!result) {
+		return null;
+	}
+
+	return result;
+}
--- a/src/lib/Klimafaktoren/index.ts
+++ b/src/lib/Klimafaktoren/index.ts
--- a/src/lib/shared.ts
+++ b/src/lib/shared.ts
@@ -4,8 +4,8 @@ export function dbOpen(): Knex {
 	const db = knex({
 		client: 'pg',
 		connection: {
-			host : '127.0.0.1',
-			port : 5436,
+			host : process.env.DB_CONNECTION,
+			port : Number(process.env.DB_PORT),
 			user : 'main',
 			password : 'hHMP8cd^N3SnzGRR',
 			database : 'main'
--- a/src/pages/api/climate_factor/index.ts
+++ b/src/pages/api/climate_factor/index.ts
@@ -0,0 +1,54 @@
+import type { APIRoute } from "astro";
+import moment from "moment";
+import { ActionFailedError, InvalidDataError, MissingPropertyError, error, success } from "src/lib/APIResponse";
+import { getClimateFactor } from "src/lib/Klimafaktoren/getClimateFactor";
+
+export const get: APIRoute = async function({ request }) {
+	const body = Object.fromEntries(new URLSearchParams(request.url.split("?")[1]))
+
+	if (!body.start || !body.end) {
+		return MissingPropertyError(["start", "end"]);
+	}
+
+	let accuracy = body.accuracy || "months";
+
+	if (accuracy !== "months" && accuracy !== "years") {
+		return error(["Accuracy must be either 'months' or 'years'."])
+	}
+
+	if (!body.zip) {
+		return error(["Invalid ZIP Code, must be 4 or 5 characters long."])
+	}
+
+	let start = moment(body.start);
+	let end = moment(body.end);
+	
+	if (!start.isValid()) {
+		return error(["Invalid start date given."]);
+	}
+
+	if (!end.isValid()) {
+		return error(["Invalid end date given."]);
+	}
+
+	if (start.isSameOrAfter(end)) {
+		return error(["Start date not before end date."])
+	}
+
+	const intervals = [];
+	
+	let currentDate = start.clone();
+	while (currentDate.isSameOrBefore(end)) {
+		let copy = currentDate.clone();
+		intervals.push(copy);
+		currentDate.add(1, accuracy);
+	}
+
+	const climateFactors = await getClimateFactor(intervals, body.zip);
+
+	if (!climateFactors) {
+		return ActionFailedError();
+	}
+
+	return success(climateFactors);
+}
--- a/src/pages/verbrauchsausweis/erstellen.astro
+++ b/src/pages/verbrauchsausweis/erstellen.astro
@@ -0,0 +1,3 @@
+---
+console.log(Object.fromEntries(new URLSearchParams(await Astro.request.text())))
+---
--- a/src/pages/verbrauchsausweis/index.astro
+++ b/src/pages/verbrauchsausweis/index.astro
@@ -1,15 +1,6 @@
 ---
-import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-import ProgressBar from "~/components/Ausweis/ProgressBar.astro";
-import Hilfe from "~/components/Ausweis/Hilfe.astro";
 import AusweisLayout from "~/layouts/AusweisLayout.astro";
-import HelpLabel from "~/components/HelpLabel.astro";
-import Verbrauch from "~/components/Ausweis/Verbrauch.astro";
-import Ausweisart from "~/components/Ausweis/Ausweisart.astro";
-import HeizungImage from "~/components/Ausweis/HeizungImage.astro";
-import FensterImage from "~/components/Ausweis/FensterImage.astro";
-import DaemmungImage from "~/components/Ausweis/DaemmungImage.astro";
-import AusweisPreviewContainer from "~/components/Ausweis/AusweisPreviewContainer.astro";
+import VerbrauchsausweisContent from "~/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte";
 /**
 * include('scripts/dbcon.php');
 ini_set('session.cookie_secure', "1");
@@ -59,879 +50,5 @@ if ($_SESSION["username"] == TEST_USER_NAME) {
 ---

 <AusweisLayout title="Verbrauchsausweis erstellen">
-	<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 />
-	</div>
-
-	<form method="post" enctype="multipart/form-data">
-		<fieldset
-			class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
-		>
-			<Hilfe />
-
-			<hr />
-
-			<div class="form-group col-md-12">
-				<label class="headline">A - Prüfung der Ausweisart</label>
-			</div>
-
-			<Ausweisart />
-
-			<div class="flex flex-col p-4">
-				<div class="form-group col-md-9">
-					<HelpLabel
-						title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
-					>
-						Der Bedarfsausweis ist die etwas umfangreichere
-						Berechnung. Sie benötigen z.B. Länge, Breite und
-						Geschoßhöhe des Gebäudes. Auch müssen genauere Angaben
-						zur Anlagentechnik gemacht werden.
-					</HelpLabel>
-				</div>
-
-				<div class="form-group col-md-3">
-					<a class="button">Bedarfsausweis erstellen</a>
-				</div>
-			</div>
-
-			<hr />
-
-			<div class="form-group col-md-12">
-				<label class="headline"
-					>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche,
-					Keller und Dachgeschoss</label
-				>
-			</div>
-
-			<div class="col-md-12">
-				<div class="GRB">
-					<!-- Strasse -->
-					<div class="form-group col-md-4">
-						<HelpLabel title="Straße, Hausnummer *">
-							Bitte geben Sie hier die Straße und Hausnummer des
-							Gebäudes ein.
-						</HelpLabel>
-						<div>
-							<input
-								id="IGstrasse"
-								name="IGstrasse"
-								class="form-control input-md strasse"
-								type="text"
-								autocomplete="off"
-								required
-								data-msg="Pflichtfeld"
-								data-msg-minlength="min. 5 Zeichen"
-								data-msg-maxlength="max. 40 Zeichen"
-							/>
-						</div>
-					</div>
-
-					<!-- PLZ -->
-					<div class="form-group col-md-4 PLZ">
-						<HelpLabel title="PLZ *">
-							Bitte geben Sie hier die PLZ des Gebäudes ein.
-						</HelpLabel>
-						<div>
-							<input
-								id="IGplz"
-								name="IGplz"
-								class="form-control input-md klima CHECK"
-								type="text"
-								required
-								autocomplete="off"
-								data-msg="Pflichtfeld"
-								maxlength="5"
-							/>
-							<div id="PLZ_list"></div>
-						</div>
-					</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="IGort"
-								id="IGort"
-								class="form-control input-md buchstaben"
-								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
-								id="IGflaeche"
-								name="IGflaeche"
-								maxlength="4"
-								class="form-control input-md zahlen CHECK"
-								required
-								autocomplete="off"
-								data-msg="Pflichtfeld"
-								data-rule-minlength="2"
-								data-msg-minlength="min. 2 Zeichen"
-							/>
-						</div>
-					</div>
-
-					<!-- Keller -->
-					<div class="form-group col-md-4">
-						<label for="IGkeller">Keller *</label>
-						<div>
-							<select
-								id="IGkeller"
-								name="IGkeller"
-								class="form-control CHECK"
-								required
-								data-msg="Pflichtfeld"
-							>
-								<option>Bitte auswählen</option>
-								<option value="1.2">nicht vorhanden</option>
-								<option value="1.2">unbeheizt</option>
-								<option value="1.35">beheizt</option>
-							</select>
-						</div>
-					</div>
-
-					<!-- Dachgeschoss -->
-					<div class="form-group col-md-4">
-						<label for="IGdach">Dachgeschoss *</label>
-						<div>
-							<select
-								id="IGdach"
-								name="IGdach"
-								class="form-control"
-								required
-								data-msg="Pflichtfeld"
-							>
-								<option>Bitte auswählen</option>
-								<option value="dnein">nicht vorhanden</option>
-								<option value="dub">unbeheizt</option>
-								<option value="dbh">beheizt</option>
-							</select>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<hr />
-
-			<div class="form-group col-md-12">
-				<label class="headline"
-					>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</label
-				>
-			</div>
-
-			<div class="GRB">
-				<Verbrauch />
-			</div>
-
-			<hr />
-
-			<div class="form-group col-md-12">
-				<label class="headline"
-					>D - Eingabe Warmwasseranteil und Verwendung von
-					alternativen Energieversorgungssystemen</label
-				>
-			</div>
-
-			<div class="GRB">
-				<!-- Anteil WW enthalten -->
-				<div class="flex flex-col">
-					<label>Warmwasser im Verbrauch enthalten *</label>
-					<div class="flex flex-row gap-6">
-						<label class="radio-inline"
-							><input
-								type="radio"
-								class="IGwwbool"
-								id="IGwwbool1"
-								name="IGwwbool"
-								value="0"
-							/> Nein</label
-						>
-						<label class="radio-inline"
-							><input
-								type="radio"
-								class="IGwwbool"
-								id="IGwwbool2"
-								name="IGwwbool"
-								value="1"
-							/> Ja</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
-						id="IGwarmwasser"
-						name="IGwarmwasser"
-						maxlength="2"
-						class="form-control input-md zahlen CHECK"
-						type="text"
-						readonly
-						autocomplete="off"
-						data-msg="Pflichtfeld"
-					/>
-				</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
-						id="IGwarmwasserw"
-						name="IGwarmwasser2"
-						maxlength="3"
-						class="form-control input-md zahlen"
-						type="text"
-						autocomplete="off"
-						data-msg="Pflichtfeld"
-						disabled
-					/>
-				</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"
-								class="IGversorgungssysteme"
-								id="IGversorgungssysteme1"
-								name="IGversorgungssysteme1"
-								value="Heizung"
-							/>Heizung</label
-						>
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGversorgungssysteme2"
-								name="IGversorgungssysteme2"
-								value="Warmwasser"
-							/>Warmwasser</label
-						>
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGversorgungssysteme3"
-								name="IGversorgungssysteme3"
-								value="Lüftung"
-							/>Lüftung</label
-						>
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGversorgungssysteme4"
-								name="IGversorgungssysteme4"
-								value="Kühlung"
-							/>Kühlung</label
-						>
-					</div>
-				</div>
-			</div>
-
-			<hr />
-
-			<div class="form-group col-md-12">
-				<label class="headline"
-					>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung
-					und Leerstand</label
-				>
-			</div>
-
-			<div class="GRB">
-				<!-- Gebäudetyp -->
-				<div class="form-group col-md-3">
-					<HelpLabel title="Gebäudetyp *">
-						Bitte wählen Sie hier den Gebäudetyp aus.
-					</HelpLabel>
-					<div>
-						<select
-							id="IGtyp"
-							name="IGtyp"
-							class="form-control"
-							required
-							autocomplete="off"
-							data-msg="Pflichtfeld"
-						>
-							<option>Bitte auswählen</option>
-							<option value="Einfamilienhaus"
-								>Einfamilienhaus</option
-							>
-							<option value="Freistehendes Einfamilienhaus"
-								>Freistehendes Einfamilienhaus</option
-							>
-							<option value="Freistehendes Zweifamilienhaus"
-								>Freistehendes Zweifamilienhaus</option
-							>
-							<option value="Doppelhaushälfte"
-								>Doppelhaushälfte</option
-							>
-							<option value="Reihenendhaus">Reihenendhaus</option>
-							<option value="Reihenmittelhaus"
-								>Reihenmittelhaus</option
-							>
-							<option value="Mehrfamilienhaus"
-								>Mehrfamilienhaus</option
-							>
-							<option value="Wohn- und Geschäftshaus"
-								>Wohn- und Geschäftshaus</option
-							>
-							<option value="Atrium-Bungalow"
-								>Atrium-Bungalow</option
-							>
-							<option value="Winkelbungalow"
-								>Winkelbungalow</option
-							>
-						</select>
-					</div>
-				</div>
-
-				<!-- Gebäudeteil -->
-				<div class="form-group col-md-3">
-					<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
-							id="IGeil"
-							name="IGteil"
-							class="form-control"
-							required
-							autocomplete="off"
-							data-msg="Pflichtfeld"
-						>
-							<option>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
-							id="IGlueftung"
-							name="IGlueftung"
-							class="form-control"
-							required
-							autocomplete="off"
-							data-msg="Pflichtfeld"
-						>
-							<option>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
-							id="IGkuehlung"
-							name="IGkuehlung"
-							class="form-control"
-							required
-							autocomplete="off"
-							data-msg="Pflichtfeld"
-						>
-							<option>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
-							id="IGleer"
-							name="IGleer"
-							maxlength="2"
-							class="form-control input-md zahlen"
-							type="text"
-							autocomplete="off"
-							data-msg="Pflichtfeld"
-						/>
-					</div>
-				</div>
-			</div>
-
-			<hr />
-
-			<div class="form-group col-md-12">
-				<label class="headline"
-					>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand
-					des Gebäudes</label
-				>
-			</div>
-
-			<div class="GRB3">
-				<HelpLabel
-					title="Heizungsanlage (bitte zutreffendes ankreuzen) *"
-				>
-					Wir benötigen diese Angaben um den allgemeinen
-					Modernisierungsstand einschätzen zu können. Bitte setzen Sie
-					den Haken wenn zutreffend. Das seit Mai 2021 gültige GEG
-					erfordert eine genauere Prüfung anhand von Fotos. Bitte
-					laden Sie ein oder mehrere Fotos der Heizungsanlage bzw. des
-					Heizungsraums hoch.
-				</HelpLabel>
-				<hr />
-
-				<div class="grid grid-cols-4">
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage1"
-								name="IGheizungsanlage1"
-								value="ZH"
-							/>Zentral/Etage</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage2"
-								name="IGheizungsanlage2"
-								value="EO"
-							/>Einzelöfen</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage3"
-								name="IGheizungsanlage3"
-								value="DH"
-							/>Durchlauferhitzer</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage4"
-								name="IGheizungsanlage4"
-								value="SK"
-							/>Standardkessel</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage5"
-								name="IGheizungsanlage5"
-								value="SSWW"
-							/>Solarsystem für Warmwasser</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage6"
-								name="IGheizungsanlage6"
-								value="WP"
-							/>Wärmepumpe</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage7"
-								name="IGheizungsanlage7"
-								value="NK"
-							/>Niedertemperaturkessel</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage8"
-								name="IGheizungsanlage8"
-								value="BWK"
-							/>Brennwertkessel</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage9"
-								name="IGheizungsanlage9"
-								value="WRGD"
-							/>Warmwasserrohre gedämmt</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage10"
-								name="IGheizungsanlage10"
-								value="HRGD"
-							/>Heizungsrohre gedämmt</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage11"
-								name="IGheizungsanlage11"
-								value="ZK"
-							/>Zirkulation</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGheizungsanlage12"
-								name="IGheizungsanlage12"
-								value="RTR"
-							/>Raumtemperaturregler</label
-						>
-					</div>
-				</div>
-			</div>
-
-			<hr />
-
-			<HeizungImage />
-
-			<hr />
-
-			<div class="GRB3">
-				<HelpLabel
-					title="Fenster/Dachfenster/Türen (bitte zutreffendes ankreuzen):*"
-				>
-					Wir benötigen diese Angaben um den allgemeinen
-					Modernisierungsstand einschätzen zu können. Bitte setzen Sie
-					den Haken wenn zutreffend.
-				</HelpLabel>
-				<hr />
-
-				<div class="grid grid-cols-4">
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach1"
-								name="IGfensterdach1"
-								value="EG"
-							/>Einfachglas</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach2"
-								name="IGfensterdach2"
-								value="DF"
-							/>Doppelverglasung</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach3"
-								name="IGfensterdach3"
-								value="IVG"
-							/>Isolierverglasung</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach4"
-								name="IGfensterdach4"
-								value="PHF"
-							/>Dreifachverglasung</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach5"
-								name="IGfensterdach5"
-								value="FD"
-							/>Alle Fenster dicht</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach6"
-								name="IGfensterdach6"
-								value="FTUD"
-							/>Fenster teilweise undicht</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach7"
-								name="IGfensterdach7"
-								value="TD"
-							/>Alle Türen dicht</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach8"
-								name="IGfensterdach8"
-								value="TUD"
-							/>Türen teilweise undicht</label
-						>
-					</div>
-					<div class="form-group col-md-3">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								id="IGfensterdach9"
-								name="IGfensterdach9"
-								value="RKD"
-							/>Rollladenkästen gedämmt, luftdicht</label
-						>
-					</div>
-				</div>
-			</div>
-
-			<hr />
-
-			<FensterImage />
-
-			<hr />
-
-			<div class="GRB3">
-				<div class="form-group col-md-12">
-					<HelpLabel
-						title="Wärmedämmung (bitte zutreffendes ankreuzen) *"
-					>
-						Wir benötigen diese Angaben um den allgemeinen
-						Modernisierungsstand einschätzen zu können. Bitte setzen
-						Sie den Haken wenn zutreffend. Das seit Mai 2021 gültige
-						GEG erfordert eine genauere Prüfung anhand von Fotos.
-						Bitte laden Sie ein oder mehrere Fotos der Außenwand und
-						des Dachbereiches hoch.
-					</HelpLabel>
-					<hr />
-				</div>
-
-				<div class="grid grid-cols-4">
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								name="IGwaermedaemmung1"
-								value="AWD"
-							/>Außenwand gedämmt</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								name="IGwaermedaemmung2"
-								value="KWD"
-							/>Kelleraußenwand gedämmt</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								name="IGwaermedaemmung3"
-								value="KDD"
-							/>Kellerdecke gedämmt</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								name="IGwaermedaemmung4"
-								value="DGD"
-							/>Dachgeschoss gedämmt</label
-						>
-					</div>
-					<div class="form-group col-md-3 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								name="IGwaermedaemmung5"
-								value="OGDDW"
-							/>Oberste Geschossdecke gedämmt</label
-						>
-					</div>
-					<div class="form-group col-md-6 mw1">
-						<label class="checkbox-inline"
-							><input
-								type="checkbox"
-								class="IGversorgungssysteme"
-								name="IGwaermedaemmung6"
-								value="OGDD"
-							/>Oberste Geschossdecke min. 12cm gedämmt</label
-						>
-					</div>
-				</div>
-			</div>
-
-			<hr />
-
-			<DaemmungImage />
-
-			<hr />
-
-			<div class="form-group col-md-12">
-				<label class="headline"
-					>G - Hier können Sie ein Gebäudebild hochladen und sich
-					Ihren Energieausweis als PDF anschauen</label
-				>
-			</div>
-
-			<AusweisPreviewContainer />
-
-			<hr />
-
-			<Hilfe />
-		</fieldset>
-	</form>
+	<VerbrauchsausweisContent client:load></VerbrauchsausweisContent>
 </AusweisLayout>
-
-<style is:global>
-	.GRB {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
-		background-color: rgba(252, 234, 187, 0.2);
-	}
-
-	.GRB3 {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-	}
-
-	.headline {
-		@apply text-lg;
-	}
-
-	.radio-inline {
-		@apply flex flex-row gap-2;
-	}
-
-	.checkbox-inline {
-		@apply flex flex-row gap-2;
-	}
-
-	input[type="checkbox"] {
-		width: auto;
-	}
-</style>
--- a/src/pages/verbrauchsausweis/kaufabschluss.astro
+++ b/src/pages/verbrauchsausweis/kaufabschluss.astro
@@ -1,5 +1,5 @@
 ---
-import ProgressBar from "~/components/Ausweis/ProgressBar.astro";
+import ProgressBar from "~/components/Ausweis/Progressbar.svelte";
 import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
 import AusweisLayout from "~/layouts/AusweisLayout.astro";
 import PriceContainer from "~/components/Kaufabschluss/PriceContainer.svelte";
--- a/src/pages/verbrauchsausweis/kundendaten.astro
+++ b/src/pages/verbrauchsausweis/kundendaten.astro
@@ -1,7 +1,7 @@
 ---
 import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-import ProgressBar from "~/components/Ausweis/ProgressBar.astro";
-import HelpLabel from "~/components/HelpLabel.astro";
+import ProgressBar from "~/components/Ausweis/Progressbar.svelte";
+import HelpLabel from "~/components/HelpLabel.svelte";
 import AusweisLayout from "~/layouts/AusweisLayout.astro";
 ---
				`@@ -0,0 +1 @@`
				`export { default as VerbrauchsausweisContent } from "./VerbrauchsausweisContent.svelte"`