Weitere Tests, Besseres Typechecking, Alle Ausweise und Verbesserter Verbrauchsausweis Gewerbe

2024-01-14 22:35:22 +07:00
parent 3e9b312354
commit ceed5f7bb7
61 changed files with 1219 additions and 394 deletions
--- a/.astro-i18n/generated.d.ts
+++ b/.astro-i18n/generated.d.ts
@@ -1,8 +1,8 @@
 type DefaultLangCode = "de"
 type SupportedLangCode = "en" | "fr"
 type LangCode = DefaultLangCode | SupportedLangCode
-type RouteUri = | "/bedarfsausweis" | "/velopers" | "/faq" | "/pdf/ansichtsausweis" | "/pdf/datenblatt" | "/user" | "/verbrauchsausweis/erstellen" | "/verbrauchsausweis" | "/verbrauchsausweis-gewerbe" | "/" | "/kaufabschluss" | "/kundendaten" | "/login" | "/logout" | "/signup" 
-type RouteParams = {"/bedarfsausweis": undefined; "/velopers": undefined; "/faq": undefined; "/pdf/ansichtsausweis": undefined; "/pdf/datenblatt": undefined; "/user": undefined; "/verbrauchsausweis/erstellen": undefined; "/verbrauchsausweis": undefined; "/verbrauchsausweis-gewerbe": undefined; "/": undefined; "/kaufabschluss": undefined; "/kundendaten": undefined; "/login": undefined; "/logout": undefined; "/signup": undefined; }
+type RouteUri = | "/bedarfsausweis" | "/velopers" | "/faq" | "/pdf/ansichtsausweis" | "/pdf/datenblatt" | "/user" | "/energieausweis-erstellen/verbrauchsausweis-wohnenerstellen" | "/energieausweis-erstellen/verbrauchsausweis-wohnen" | "/energieausweis-erstellen/verbrauchsausweis-wohnen-gewerbe" | "/" | "/kaufabschluss" | "/kundendaten" | "/login" | "/logout" | "/signup" 
+type RouteParams = {"/bedarfsausweis": undefined; "/velopers": undefined; "/faq": undefined; "/pdf/ansichtsausweis": undefined; "/pdf/datenblatt": undefined; "/user": undefined; "/energieausweis-erstellen/verbrauchsausweis-wohnenerstellen": undefined; "/energieausweis-erstellen/verbrauchsausweis-wohnen": undefined; "/energieausweis-erstellen/verbrauchsausweis-wohnen-gewerbe": undefined; "/": undefined; "/kaufabschluss": undefined; "/kundendaten": undefined; "/login": undefined; "/logout": undefined; "/signup": undefined; }
 type TranslationPath = "header.profil" | "header.kontakt" | "header.login"
 type TranslationOptions = { "header.profil": {} | undefined; "header.kontakt": {} | undefined; "header.login": {} | undefined; }

--- a/cypress/e2e/VerbrauchsausweisGewerbe/erstellen.cy.ts
+++ b/cypress/e2e/VerbrauchsausweisGewerbe/erstellen.cy.ts
@@ -0,0 +1,272 @@
+import fuelList from "#components/Ausweis/brennstoffListe";
+import { faker } from "@faker-js/faker";
+import { Enums } from "@ibcornelsen/database/client";
+import "cypress-file-upload"
+
+describe("Verbrauchsausweis erstellen Schritt 1", () => {
+	it("erstellt einen neuen Verbrauchsausweis Wohngebäude.", () => {
+		cy.visit("/energieausweis-erstellen/verbrauchsausweis-gewerbe");
+
+		cy.wait(1000);
+
+		// Wir überprüfen, ob alle Ausstelgründe vorhanden sind, diese sollten genau so viele sein wie in der Datenbank vorhanden sind.
+		cy.get("input[name='ausstellgrund']")
+			.should("have.length", Object.values(Enums.Ausstellgrund).length)
+			.eq(
+				faker.number.int({
+					min: 0,
+					max: Object.values(Enums.Ausstellgrund).length - 1,
+				})
+			)
+			.check();
+
+		// Jetzt Füllen wir das Baujahr vom Gebäude aus.
+		cy.get("input[name='baujahr_gebaeude']")
+			.should("have.attr", "type", "number")
+			.type(
+				faker.number.int({ min: 1900, max: 2021 }).toString() +
+					"{enter}",
+				{ delay: 50 }
+			);
+
+		// Jetzt Füllen wir das Baujahr der Heizung aus.
+		cy.get("input[name='baujahr_heizung']")
+			.should("have.attr", "type", "number")
+			.type(
+				faker.number.int({ min: 1900, max: 2021 }).toString() +
+					"{enter}",
+				{ delay: 50 }
+			);
+
+		// Anzahl Einheiten
+		cy.get("input[name='einheiten']")
+			.should("have.attr", "type", "number")
+			.type(faker.number.int({ min: 1, max: 5 }).toString());
+
+		// Sanierungsstatus
+		cy.get("select[name='saniert']").select(
+			Math.random() > 0.5 ? "true" : "false"
+		);
+
+		// Adresse
+		cy.get("input[name='adresse']").type(faker.location.streetAddress());
+
+		// Postleitzahl
+		cy.get("input[name='plz']").type(
+			faker.location.zipCode({
+				format: "#####",
+			})
+		);
+
+		// TODO: Ort - Dieser wird aus der Datenbank abgefragt, wir müssen also warten, bis der Dropdown da ist.
+
+		// Flaeche
+		cy.get("input[name='flaeche']")
+			.should("have.attr", "type", "number")
+			.type(faker.number.int({ min: 50, max: 1000 }).toString());
+
+		// Keller
+		cy.get("select[name='keller']").find("option:not([disabled])").should("have.length", Object.values(Enums.Heizungsstatus).length).parent().select(faker.number.int({
+			max: Object.values(Enums.Heizungsstatus).length,
+			min: 1
+		}));
+
+		// Dachgeschoss
+		cy.get("select[name='dachgeschoss']").find("option:not([disabled])").should("have.length", Object.values(Enums.Heizungsstatus).length).parent().select(faker.number.int({
+			max: Object.values(Enums.Heizungsstatus).length,
+			min: 1
+		}));
+
+		// Brennstoff und Einheit 1
+		const brennstoffKombo = fuelList[faker.number.int({ min: 0, max: fuelList.length - 1 })];
+
+		cy.get("select[name='brennstoff_1']").select(brennstoffKombo[0]);
+		cy.get("select[name='einheit_1']").select(brennstoffKombo[1]);
+
+		// Verbrauchszeitraum
+		cy.get("select[name='energieverbrauch_zeitraum_monat']").select(faker.number.int({ min: 1, max: 12 }).toString());
+		cy.get("select[name='energieverbrauch_zeitraum_jahr']").select(faker.number.int({ min: 2018, max: 2019 }).toString());
+
+		// Verbrauch
+		cy.get("input[name='verbrauch_1']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+		cy.get("input[name='verbrauch_2']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+		cy.get("input[name='verbrauch_3']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+
+		
+		const zusaetzlicheHeizquelle = Math.random() > 0.5;
+
+		if (zusaetzlicheHeizquelle) {
+			cy.get("input[name='zusaetzliche_heizquelle']").check();
+
+			// Brennstoff und Einheit 2
+			const brennstoffKombo2 = fuelList[faker.number.int({ min: 0, max: fuelList.length - 1 })];
+
+			cy.get("select[name='brennstoff_2']").select(brennstoffKombo2[0]);
+			cy.get("select[name='einheit_2']").select(brennstoffKombo2[1]);
+
+			// Verbrauch
+			cy.get("input[name='verbrauch_4']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+			cy.get("input[name='verbrauch_5']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+			cy.get("input[name='verbrauch_6']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+		}
+
+		// Gebäudestrom
+		cy.get("input[name='strom_1']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+		cy.get("input[name='strom_2']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+		cy.get("input[name='strom_3']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
+
+		// Stromverbrauch Enthält
+		if (Math.random() > 0.5) cy.get("input[name='stromverbrauch_enthaelt_heizung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='stromverbrauch_enthaelt_warmwasser']").check();
+		if (Math.random() > 0.5) cy.get("input[name='stromverbrauch_enthaelt_lueftung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='stromverbrauch_enthaelt_beleuchtung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='stromverbrauch_enthaelt_kuehlung']").check();
+
+		// Warmwasser enthalten und bekannt
+		const warmwasserEnthalten = Math.random() > 0.5;
+		const anteilBekannt = Math.random() > 0.5;
+
+		if (warmwasserEnthalten) {
+			cy.get("input[name='warmwasser_enthalten']").check();			
+
+			if (anteilBekannt) {
+				// Der Anteil ist bekannt, wir müssen ihn also angeben.
+				cy.get("input[name='warmwasser_anteil_bekannt']").check();
+
+				cy.get("input[name='anteil_warmwasser_1']").type(faker.number.int({ min: 0, max: 50 }).toString());
+
+				if (zusaetzlicheHeizquelle) {
+					// Zusätzliche Heizquelle existiert, also müssen wir auch hier den Anteil angeben.
+					cy.get("input[name='anteil_warmwasser_1']").type(faker.number.int({ min: 0, max: 50 }).toString());
+				}
+			}
+		}
+
+		// Thermische Kühlung enthalten
+		const kuehlungEnthalten = Math.random() > 0.5;
+
+		if (kuehlungEnthalten) {
+			cy.get("input[name='kuehlung_enthalten']").check();			
+
+			cy.get("input[name='anteil_kuehlung_1']").type(faker.number.int({ min: 0, max: 50 }).toString());
+
+			if (zusaetzlicheHeizquelle) {
+				// Zusätzliche Heizquelle existiert, also müssen wir auch hier den Anteil angeben.
+				cy.get("input[name='anteil_kuehlung_2']").type(faker.number.int({ min: 0, max: 50 }).toString());
+			}
+		}
+
+		// Alternative Energieversorgungssysteme
+		if (Math.random() > 0.5) cy.get("input[name='alternative_heizung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='alternative_warmwasser']").check();
+		if (Math.random() > 0.5) cy.get("input[name='alternative_lueftung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='alternative_kuehlung']").check();
+
+		// Gebäudetyp
+		cy.get("select[name='gebaeudetyp']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='gebaeudetyp']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Gebäudeteil
+		cy.get("select[name='gebaeudeteil']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='gebaeudeteil']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Lüftung
+		cy.get("select[name='lueftung']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='lueftung']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Kühlung
+		cy.get("select[name='kuehlung']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='kuehlung']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Leerstand
+		cy.get("input[name='leerstand']").should("have.attr", "type", "number").type(faker.number.int({ min: 0, max: 30 }).toString());
+
+		// Heizungsanlage Daten
+		if (Math.random() > 0.5) cy.get("input[name='zentralheizung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='einzelofen']").check();
+		if (Math.random() > 0.5) cy.get("input[name='durchlauf_erhitzer']").check();
+		if (Math.random() > 0.5) cy.get("input[name='standard_kessel']").check();
+		if (Math.random() > 0.5) cy.get("input[name='solarsystem_warmwasser']").check();
+		if (Math.random() > 0.5) cy.get("input[name='waermepumpe']").check();
+		if (Math.random() > 0.5) cy.get("input[name='niedertemperatur_kessel']").check();
+		if (Math.random() > 0.5) cy.get("input[name='brennwert_kessel']").check();
+		if (Math.random() > 0.5) cy.get("input[name='warmwasser_rohre_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='heizungsrohre_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='zirkulation']").check();
+		if (Math.random() > 0.5) cy.get("input[name='raum_temperatur_regler']").check();
+
+		// Heizungsanlage Bilder
+		cy.get("input[name='heizung_image']").should("have.attr", "type", "file").attachFile("images/heizungsanlage/1.jpeg", { subjectType: "input" });
+		cy.get("input[name='heizung_image']").should("have.attr", "type", "file").attachFile("images/heizungsanlage/2.jpeg", { subjectType: "input" });
+
+		// Fenster Daten
+		if (Math.random() > 0.5) cy.get("input[name='einfach_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='doppel_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='isolier_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='dreifach_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='fenster_dicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='fenster_teilweise_undicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='tueren_dicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='tueren_undicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='rolllaeden_kaesten_gedaemmt']").check();
+
+		// Fenster Bilder
+		cy.get("input[name='fenster_image']").should("have.attr", "type", "file").attachFile("images/fenster/1.jpeg", { subjectType: "input" });
+		cy.get("input[name='fenster_image']").should("have.attr", "type", "file").attachFile("images/fenster/2.jpeg", { subjectType: "input" });
+
+		// Wärmedämmung Daten
+		if (Math.random() > 0.5) cy.get("input[name='aussenwand_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='keller_wand_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='keller_decke_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='dachgeschoss_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='oberste_geschossdecke_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='oberste_geschossdecke_min_12cm_gedaemmt']").check();
+
+		// Wärmedämmung Bilder
+		cy.get("input[name='daemmung_image']").should("have.attr", "type", "file").attachFile("images/daemmung/1.jpeg", { subjectType: "input" });
+		cy.get("input[name='daemmung_image']").should("have.attr", "type", "file").attachFile("images/daemmung/2.jpeg", { subjectType: "input" });
+
+		// Gebäude Bild
+		cy.get("input[name='gebaeude_image']").should("have.attr", "type", "file").attachFile("images/gebaeude/1.jpeg", { subjectType: "input" });
+
+		// Jetzt können wir den Verbrauchsausweis erstellen.
+		cy.get("form[name='ausweis'] button[type='submit']").click({ force: true });
+
+		// Wir sind nicht eingeloggt also sollte jetzt ein Login Screen erscheinen.
+		// Wir klicken auf registrieren und erstellen einen neuen Benutzer, danach loggen wir uns mit diesem ein.
+		cy.get("button[name='registrieren']").click();
+
+		const email = faker.internet.email();
+		const passwort = faker.internet.password();
+		const vorname = faker.person.firstName();
+		const nachname = faker.person.lastName();
+
+		cy.get("form[name='signup'] input[name='email']").should("be.visible").should("have.attr", "type", "email").type(email);
+		cy.get("form[name='signup'] input[name='passwort']").should("be.visible").should("have.attr", "type", "password").type(passwort);
+		cy.get("form[name='signup'] input[name='vorname']").should("be.visible").should("have.attr", "type", "text").type(vorname);
+		cy.get("form[name='signup'] input[name='nachname']").should("be.visible").should("have.attr", "type", "text").type(nachname);
+
+		cy.get("form[name='signup'] button[type='submit']").click();
+
+		// Wir sind jetzt registriert und können uns nun einloggen.
+		// Die Email sollte automatisch eingetragen sein, da wir uns gerade registriert haben.
+		cy.get("form[name='login'] input[name='email']").should("be.visible").should("have.attr", "type", "email").should("contain.value", email);
+		cy.get("form[name='login'] input[name='passwort']").should("be.visible").should("have.attr", "type", "password").type(passwort);
+
+		cy.get("form[name='login'] button[type='submit']").click();
+
+		// Der Ausweis sollte jetzt schon erstellt worden sein.
+	});	
+});
--- a/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts
+++ b/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts
@@ -1,10 +1,11 @@
-import fuelList from "#components/Ausweis/fuelList";
+import fuelList from "#components/Ausweis/brennstoffListe";
 import { faker } from "@faker-js/faker";
 import { Enums } from "@ibcornelsen/database/client";
+import "cypress-file-upload"

 describe("Verbrauchsausweis erstellen Schritt 1", () => {
 	it("erstellt einen neuen Verbrauchsausweis Wohngebäude.", () => {
-		cy.visit("/verbrauchsausweis");
+		cy.visit("/energieausweis-erstellen/verbrauchsausweis-wohnen");

 		cy.wait(1000);

@@ -108,5 +109,138 @@ describe("Verbrauchsausweis erstellen Schritt 1", () => {
 			cy.get("input[name='verbrauch_5']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
 			cy.get("input[name='verbrauch_6']").type(faker.number.int({ min: 4000, max: 15000 }).toString());
 		}
+
+		// Warmwasser enthalten und bekannt
+		const warmwasserEnthalten = Math.random() > 0.5;
+		const anteilBekannt = Math.random() > 0.5;
+
+		if (warmwasserEnthalten) {
+			cy.get("input[name='warmwasser_enthalten']").check();			
+
+			if (anteilBekannt) {
+				// Der Anteil ist bekannt, wir müssen ihn also angeben.
+				cy.get("input[name='warmwasser_anteil_bekannt']").check();
+
+				cy.get("input[name='anteil_warmwasser_1']").type(faker.number.int({ min: 0, max: 50 }).toString());
+
+				if (zusaetzlicheHeizquelle) {
+					// Zusätzliche Heizquelle existiert, also müssen wir auch hier den Anteil angeben.
+					cy.get("input[name='anteil_warmwasser_2']").type(faker.number.int({ min: 0, max: 50 }).toString());
+				}
+			}
+		}
+
+		// Alternative Energieversorgungssysteme
+		if (Math.random() > 0.5) cy.get("input[name='alternative_heizung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='alternative_warmwasser']").check();
+		if (Math.random() > 0.5) cy.get("input[name='alternative_lueftung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='alternative_kuehlung']").check();
+
+		// Gebäudetyp
+		cy.get("select[name='gebaeudetyp']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='gebaeudetyp']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Gebäudeteil
+		cy.get("select[name='gebaeudeteil']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='gebaeudeteil']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Lüftung
+		cy.get("select[name='lueftung']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='lueftung']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Kühlung
+		cy.get("select[name='kuehlung']").then(($dropdown) => {
+			const options = $dropdown.find('option');
+			// Select the option at the random index
+			cy.get("select[name='kuehlung']").select(options.eq(faker.number.int({ min: 1, max: options.length - 1 })).val() as string);
+		});
+
+		// Leerstand
+		cy.get("input[name='leerstand']").should("have.attr", "type", "number").type(faker.number.int({ min: 0, max: 30 }).toString());
+
+		// Heizungsanlage Daten
+		if (Math.random() > 0.5) cy.get("input[name='zentralheizung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='einzelofen']").check();
+		if (Math.random() > 0.5) cy.get("input[name='durchlauf_erhitzer']").check();
+		if (Math.random() > 0.5) cy.get("input[name='standard_kessel']").check();
+		if (Math.random() > 0.5) cy.get("input[name='solarsystem_warmwasser']").check();
+		if (Math.random() > 0.5) cy.get("input[name='waermepumpe']").check();
+		if (Math.random() > 0.5) cy.get("input[name='niedertemperatur_kessel']").check();
+		if (Math.random() > 0.5) cy.get("input[name='brennwert_kessel']").check();
+		if (Math.random() > 0.5) cy.get("input[name='warmwasser_rohre_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='heizungsrohre_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='zirkulation']").check();
+		if (Math.random() > 0.5) cy.get("input[name='raum_temperatur_regler']").check();
+
+		// Heizungsanlage Bilder
+		cy.get("input[name='heizung_image']").should("have.attr", "type", "file").attachFile("images/heizungsanlage/1.jpeg", { subjectType: "input" });
+		cy.get("input[name='heizung_image']").should("have.attr", "type", "file").attachFile("images/heizungsanlage/2.jpeg", { subjectType: "input" });
+
+		// Fenster Daten
+		if (Math.random() > 0.5) cy.get("input[name='einfach_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='doppel_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='isolier_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='dreifach_verglasung']").check();
+		if (Math.random() > 0.5) cy.get("input[name='fenster_dicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='fenster_teilweise_undicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='tueren_dicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='tueren_undicht']").check();
+		if (Math.random() > 0.5) cy.get("input[name='rolllaeden_kaesten_gedaemmt']").check();
+
+		// Fenster Bilder
+		cy.get("input[name='fenster_image']").should("have.attr", "type", "file").attachFile("images/fenster/1.jpeg", { subjectType: "input" });
+		cy.get("input[name='fenster_image']").should("have.attr", "type", "file").attachFile("images/fenster/2.jpeg", { subjectType: "input" });
+
+		// Wärmedämmung Daten
+		if (Math.random() > 0.5) cy.get("input[name='aussenwand_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='keller_wand_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='keller_decke_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='dachgeschoss_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='oberste_geschossdecke_gedaemmt']").check();
+		if (Math.random() > 0.5) cy.get("input[name='oberste_geschossdecke_min_12cm_gedaemmt']").check();
+
+		// Wärmedämmung Bilder
+		cy.get("input[name='daemmung_image']").should("have.attr", "type", "file").attachFile("images/daemmung/1.jpeg", { subjectType: "input" });
+		cy.get("input[name='daemmung_image']").should("have.attr", "type", "file").attachFile("images/daemmung/2.jpeg", { subjectType: "input" });
+
+		// Gebäude Bild
+		cy.get("input[name='gebaeude_image']").should("have.attr", "type", "file").attachFile("images/gebaeude/1.jpeg", { subjectType: "input" });
+
+		// Jetzt können wir den Verbrauchsausweis erstellen.
+		cy.get("form[name='ausweis'] button[type='submit']").click({ force: true });
+
+		// Wir sind nicht eingeloggt also sollte jetzt ein Login Screen erscheinen.
+		// Wir klicken auf registrieren und erstellen einen neuen Benutzer, danach loggen wir uns mit diesem ein.
+		cy.get("button[name='registrieren']").click();
+
+		const email = faker.internet.email();
+		const passwort = faker.internet.password();
+		const vorname = faker.person.firstName();
+		const nachname = faker.person.lastName();
+
+		cy.get("form[name='signup'] input[name='email']").should("be.visible").should("have.attr", "type", "email").type(email);
+		cy.get("form[name='signup'] input[name='passwort']").should("be.visible").should("have.attr", "type", "password").type(passwort);
+		cy.get("form[name='signup'] input[name='vorname']").should("be.visible").should("have.attr", "type", "text").type(vorname);
+		cy.get("form[name='signup'] input[name='nachname']").should("be.visible").should("have.attr", "type", "text").type(nachname);
+
+		cy.get("form[name='signup'] button[type='submit']").click();
+
+		// Wir sind jetzt registriert und können uns nun einloggen.
+		// Die Email sollte automatisch eingetragen sein, da wir uns gerade registriert haben.
+		cy.get("form[name='login'] input[name='email']").should("be.visible").should("have.attr", "type", "email").should("contain.value", email);
+		cy.get("form[name='login'] input[name='passwort']").should("be.visible").should("have.attr", "type", "password").type(passwort);
+
+		cy.get("form[name='login'] button[type='submit']").click();
+
+		// Der Ausweis sollte jetzt schon erstellt worden sein.
 	});	
 });
--- a/cypress/e2e/auth/index.cy.ts
+++ b/cypress/e2e/auth/index.cy.ts
@@ -35,4 +35,10 @@ describe('Benutzer Authentifizierung', () => {
 		cy.getCookie(API_ACCESS_TOKEN_COOKIE_NAME).should("exist")
 		cy.getCookie(API_REFRESH_TOKEN_COOKIE_NAME).should("exist")
 	})
+
+	it("meldet einen Nutzer ab und leitet auf die Login Seite weiter", () => {
+		cy.visit("/auth/logout")
+
+		cy.url().should("include", "/auth/login")
+	})
 })
--- a/cypress/fixtures/images/daemmung/1.jpeg
+++ b/cypress/fixtures/images/daemmung/1.jpeg
--- a/cypress/fixtures/images/daemmung/2.jpeg
+++ b/cypress/fixtures/images/daemmung/2.jpeg
--- a/cypress/fixtures/images/fenster/1.jpeg
+++ b/cypress/fixtures/images/fenster/1.jpeg
--- a/cypress/fixtures/images/fenster/2.jpeg
+++ b/cypress/fixtures/images/fenster/2.jpeg
--- a/cypress/fixtures/images/gebaeude/1.jpeg
+++ b/cypress/fixtures/images/gebaeude/1.jpeg
--- a/cypress/fixtures/images/heizungsanlage/1.jpeg
+++ b/cypress/fixtures/images/heizungsanlage/1.jpeg
--- a/cypress/fixtures/images/heizungsanlage/2.jpeg
+++ b/cypress/fixtures/images/heizungsanlage/2.jpeg
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,7 +14,7 @@ services:
      - ./node_modules/@ibcornelsen/ui:/online-energieausweis/node_modules/@ibcornelsen/ui
      - ./node_modules/@ibcornelsen/database:/online-energieausweis/node_modules/@ibcornelsen/database
      - ./node_modules/@ibcornelsen/api:/online-energieausweis/node_modules/@ibcornelsen/api
-      - ./persistent:/persistent
+      - ../api/persistent:/persistent
  ibcornelsen-api:
    extends:
      file: ../api/docker-compose.yml
--- a/package.json
+++ b/package.json
@@ -64,7 +64,9 @@
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.59.6",
    "@typescript-eslint/parser": "^5.59.6",
+    "bun-types": "^1.0.22",
    "cypress": "^13.6.2",
+    "cypress-file-upload": "^5.0.8",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "prettier": "^2.8.8",
--- a/src/components/AnsichtsausweisButton.svelte
+++ b/src/components/AnsichtsausweisButton.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { Buffer } from "buffer";
+	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";

-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: GebaeudeStammdaten;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;

 	let base64: string = "";
 	$: {
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -2,14 +2,26 @@
 	import AnsichtsausweisButton from "#components/AnsichtsausweisButton.svelte";
 	import DatenblattButton from "#components/DatenblattButton.svelte";
 	import HelpLabel from "#components/HelpLabel.svelte";
-
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: GebaeudeStammdaten;
-
 	import ImageGrid from "../ImageGrid.svelte";
-	import type { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import {
+	Enums,
+		type BedarfsausweisWohnen,
+		type VerbrauchsausweisGewerbe,
+	} from "@ibcornelsen/database/client";

-	let images: (File & { data: string })[] = [];
+	import {
+		GebaeudeClient,
+		UploadedGebaeudeBild,
+		VerbrauchsausweisWohnenClient,
+	} from "./types";
+
+	export let ausweis:
+		| VerbrauchsausweisWohnenClient
+		| VerbrauchsausweisGewerbe
+		| BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
+
+	export let images: UploadedGebaeudeBild[] = [];
 </script>

 <div class="grid grid-cols-2 p-4 gap-4">
@@ -23,7 +35,14 @@
 				<hr class="trenner_form_100" />
 			</div>

-			<ImageGrid max={1} bind:images bind:ausweis />
+			<ImageGrid
+				name={"gebaeude_image"}
+				kategorie={Enums.BilderKategorie.Gebaeude}
+				max={1}
+				bind:gebaeude
+				bind:images
+				bind:ausweis
+			/>
 		</div>
 	</div>

--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -6,14 +6,13 @@
 	import { writable } from "svelte/store";
 	import type {
 		BedarfsausweisWohnen,
-		GebaeudeStammdaten,
 		VerbrauchsausweisGewerbe,
-		VerbrauchsausweisWohnen,
 	} from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client"
+	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types";

-	export let gebaeude: GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;

 	$: baujahrHeizung = writable(gebaeude.baujahr_heizung || []);
 	$: baujahr = writable(gebaeude.baujahr_gebaeude || []);
@@ -66,7 +65,7 @@
 				className={auditHeizungGebaeudeBaujahr(gebaeude)
 					? "linked"
 					: ""}
-				bind:tags={baujahrHeizung}
+				bind:tags={gebaeude.baujahr_heizung}
 			/>
 		</div>
 	</div>
@@ -101,7 +100,7 @@
 				className={auditHeizungGebaeudeBaujahr(gebaeude)
 					? "linked"
 					: ""}
-				bind:tags={baujahr}
+				bind:tags={gebaeude.baujahr_gebaeude}
 			/>
 		</div>
 	</div>
--- a/src/components/Ausweis/BilderZusatzsysteme.svelte
+++ b/src/components/Ausweis/BilderZusatzsysteme.svelte
@@ -5,10 +5,12 @@
 	import DaemmungImage from "./DaemmungImage.svelte";
 	import FensterImage from "./FensterImage.svelte";
 	import Label from "../Label.svelte";
-	import type { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";

-	export let gebaeude: GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let images: UploadedGebaeudeBild[]
 </script>


@@ -27,7 +29,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage1"
+					name="zentralheizung"
 					bind:checked={gebaeude.zentralheizung}
 					value="ZH"
 				/>Zentral/Etage</label
@@ -37,7 +39,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage2"
+					name="einzelofen"
 					bind:checked={gebaeude.einzelofen}
 					value="EO"
 				/>Einzelöfen</label
@@ -47,7 +49,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage3"
+					name="durchlauf_erhitzer"
 					bind:checked={gebaeude.durchlauf_erhitzer}
 					value="DH"
 				/>Durchlauferhitzer</label
@@ -57,7 +59,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage4"
+					name="standard_kessel"
 					bind:checked={gebaeude.standard_kessel}
 					value="SK"
 				/>Standardkessel</label
@@ -67,7 +69,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage5"
+					name="solarsystem_warmwasser"
 					bind:checked={gebaeude.solarsystem_warmwasser}
 					value="SSWW"
 				/>Solarsystem für Warmwasser</label
@@ -77,7 +79,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage6"
+					name="waermepumpe"
 					bind:checked={gebaeude.waermepumpe}
 					value="WP"
 				/>Wärmepumpe</label
@@ -87,7 +89,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage7"
+					name="niedertemperatur_kessel"
 					bind:checked={gebaeude.niedertemperatur_kessel}
 					value="NK"
 				/>Niedertemperaturkessel</label
@@ -97,7 +99,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage8"
+					name="brennwert_kessel"
 					bind:checked={gebaeude.brennwert_kessel}
 					value="BWK"
 				/>Brennwertkessel</label
@@ -107,7 +109,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage9"
+					name="warmwasser_rohre_gedaemmt"
 					bind:checked={gebaeude.warmwasser_rohre_gedaemmt}
 					value="WRGD"
 				/>Warmwasserrohre gedämmt</label
@@ -117,7 +119,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage10"
+					name="heizungsrohre_gedaemmt"
 					bind:checked={gebaeude.heizungsrohre_gedaemmt}
 					value="HRGD"
 				/>Heizungsrohre gedämmt</label
@@ -127,7 +129,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage11"
+					name="zirkulation"
 					bind:checked={gebaeude.zirkulation}
 					value="ZK"
 				/>Zirkulation</label
@@ -137,7 +139,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGheizungsanlage12"
+					name="raum_temperatur_regler"
 					bind:checked={gebaeude.raum_temperatur_regler}
 					value="RTR"
 				/>Raumtemperaturregler</label
@@ -148,7 +150,7 @@

 <hr />

-<HeizungImage bind:ausweis />
+<HeizungImage bind:images bind:ausweis bind:gebaeude />

 <hr />

@@ -166,7 +168,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach1"
+					name="einfach_verglasung"
 					bind:checked={gebaeude.einfach_verglasung}
 					value="EG"
 				/>Einfachglas</label
@@ -176,7 +178,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach2"
+					name="doppel_verglasung"
 					bind:checked={gebaeude.doppel_verglasung}
 					value="DF"
 				/>Doppelverglasung</label
@@ -186,7 +188,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach3"
+					name="isolier_verglasung"
 					bind:checked={gebaeude.isolier_verglasung}
 					value="IVG"
 				/>Isolierverglasung</label
@@ -196,7 +198,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach4"
+					name="dreifach_verglasung"
 					bind:checked={gebaeude.dreifach_verglasung}
 					value="PHF"
 				/>Dreifachverglasung</label
@@ -206,7 +208,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach5"
+					name="fenster_dicht"
 					bind:checked={gebaeude.fenster_dicht}
 					value="FD"
 				/>Alle Fenster dicht</label
@@ -216,7 +218,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach6"
+					name="fenster_teilweise_undicht"
 					bind:checked={gebaeude.fenster_teilweise_undicht}
 					value="FTUD"
 				/>Fenster teilweise undicht</label
@@ -226,7 +228,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach7"
+					name="tueren_dicht"
 					bind:checked={gebaeude.tueren_dicht}
 					value="TD"
 				/>Alle Türen dicht</label
@@ -236,7 +238,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach8"
+					name="tueren_undicht"
 					bind:checked={gebaeude.tueren_undicht}
 					value="TUD"
 				/>Türen teilweise undicht</label
@@ -246,7 +248,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGfensterdach9"
+					name="rolllaeden_kaesten_gedaemmt"
 					bind:checked={gebaeude.rolllaeden_kaesten_gedaemmt}
 					value="RKD"
 				/>Rollladenkästen gedämmt, luftdicht</label
@@ -257,7 +259,7 @@

 <hr />

-<FensterImage bind:ausweis />
+<FensterImage bind:images bind:ausweis bind:gebaeude />

 <hr />

@@ -278,7 +280,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGwaermedaemmung1"
+					name="aussenwand_gedaemmt"
 					bind:checked={gebaeude.aussenwand_gedaemmt}
 					value="AWD"
 				/>Außenwand gedämmt</label
@@ -288,7 +290,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGwaermedaemmung2"
+					name="keller_wand_gedaemmt"
 					bind:checked={gebaeude.keller_wand_gedaemmt}
 					value="KWD"
 				/>Kelleraußenwand gedämmt</label
@@ -298,7 +300,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGwaermedaemmung3"
+					name="keller_decke_gedaemmt"
 					bind:checked={gebaeude.keller_decke_gedaemmt}
 					value="KDD"
 				/>Kellerdecke gedämmt</label
@@ -308,7 +310,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGwaermedaemmung4"
+					name="dachgeschoss_gedaemmt"
 					bind:checked={gebaeude.dachgeschoss_gedaemmt}
 					value="DGD"
 				/>Dachgeschoss gedämmt</label
@@ -318,7 +320,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGwaermedaemmung5"
+					name="oberste_geschossdecke_gedaemmt"
 					bind:checked={gebaeude.oberste_geschossdecke_gedaemmt}
 					value="OGDDW"
 				/>Oberste Geschossdecke gedämmt</label
@@ -328,7 +330,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
-					name="IGwaermedaemmung6"
+					name="oberste_geschossdecke_min_12cm_gedaemmt"
 					bind:checked={gebaeude.oberste_geschossdecke_min_12cm_gedaemmt}
 					value="OGDD"
 				/>Oberste Geschossdecke min. 12cm gedämmt</label
@@ -339,7 +341,7 @@

 <hr />

-<DaemmungImage bind:ausweis />
+<DaemmungImage bind:images bind:ausweis bind:gebaeude />

 <hr />

--- a/src/components/Ausweis/DaemmungImage.svelte
+++ b/src/components/Ausweis/DaemmungImage.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";

-	let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let images: UploadedGebaeudeBild[] = [];
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
 </script>

 <div class="grid grid-cols-2 gap-4">
@@ -56,6 +58,6 @@
 			Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 2 Bilder hoch:</strong>
 		</p>
-		<ImageGrid max={4} bind:images bind:ausweis></ImageGrid>
+		<ImageGrid max={4} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
 	</div>
 </div>
--- a/src/components/Ausweis/FensterImage.svelte
+++ b/src/components/Ausweis/FensterImage.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";

-	let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let images: UploadedGebaeudeBild[] = [];
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
 </script>

 <div class="grid grid-cols-2 gap-4">
@@ -53,6 +55,6 @@
 			Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
 		</p>
-		<ImageGrid max={4} bind:images bind:ausweis></ImageGrid>
+		<ImageGrid max={4} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
 	</div>
 </div>
--- a/src/components/Ausweis/HeizungImage.svelte
+++ b/src/components/Ausweis/HeizungImage.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";

-	let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let images: UploadedGebaeudeBild[] = [];
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
 </script>

 <div class="grid grid-cols-2 gap-4">
@@ -60,6 +62,6 @@
 			Ihrem Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
 		</p>
-		<ImageGrid max={4} bind:images bind:ausweis />
+		<ImageGrid name={"heizung_image"} kategorie={Enums.BilderKategorie.Heizung} max={4} bind:gebaeude bind:images bind:ausweis />
 	</div>
 </div>
--- a/src/components/Ausweis/PerformanceScore.svelte
+++ b/src/components/Ausweis/PerformanceScore.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
-	import type { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import { BedarfsausweisWohnenClient, GebaeudeClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types";

-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: GebaeudeStammdaten;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
+	export let gebaeude: GebaeudeClient;

 	let maxPerformance = 250;

--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -2,9 +2,10 @@
 	import HelpLabel from "../HelpLabel.svelte";
 	import moment from "moment";
 	import Label from "../Label.svelte";
-	import fuelList from "./fuelList";
+	import fuelList from "./brennstoffListe";
 	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung";
-	import type { GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import type { VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types";

 	let availableYears = [
 		2018, 2019,
@@ -24,8 +25,8 @@
 		"Dezember",
 	];

-	export let gebaeude: GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe;
+	export let gebaeude: GebaeudeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe;

 	const fuelMap: Record<string, string[]> = {};
 	for (const fuel of fuelList) {
--- a/src/components/Ausweis/brennstoffListe.ts
+++ b/src/components/Ausweis/brennstoffListe.ts
--- a/src/components/Ausweis/types.ts
+++ b/src/components/Ausweis/types.ts
@@ -0,0 +1,68 @@
+import { AppRouter } from "@ibcornelsen/api";
+import { GebaeudeBilder } from "@ibcornelsen/database/client";
+import { inferProcedureInput } from "@trpc/server";
+
+export type UploadedGebaeudeBild = Omit<
+	GebaeudeBilder,
+	"id" | "gebaeude_stammdaten_id" | "uid"
+> &
+	({ base64: string; uid?: string });
+
+
+/**
+ * Das ist der Typescript Type für den Verbrauchsausweis Wohnen mit allen Feldern die
+ * von der API erwartet werden. Das Backend wird dem Client nur diese Daten zur Verfügung stellen.
+ * Hiermit kann sichergestellt werden, dass eine Funktion auf dem Client mit den richtigen Daten
+ * ausgeführt werden kann.
+ * @date 1/14/2024 - 3:33:33 PM
+ *
+ * @export
+ * @typedef {VerbrauchsausweisWohnenClient}
+ */
+export type VerbrauchsausweisWohnenClient = inferProcedureInput<
+	AppRouter["v1"]["verbrauchsausweisWohnen"]["2016"]["speichern"]
+>["ausweis"];
+
+/**
+ * Das ist der Typescript Type für den Verbrauchsausweis Gewerbe mit allen Feldern die
+ * von der API erwartet werden. Das Backend wird dem Client nur diese Daten zur Verfügung stellen.
+ * Hiermit kann sichergestellt werden, dass eine Funktion auf dem Client mit den richtigen Daten
+ * ausgeführt werden kann.
+ * @date 1/14/2024 - 3:33:33 PM
+ *
+ * @export
+ * @typedef {VerbrauchsausweisWohnenClient}
+ */
+export type VerbrauchsausweisGewerbeClient = inferProcedureInput<
+	AppRouter["v1"]["verbrauchsausweisGewerbe"]["2016"]["speichern"]
+>["ausweis"];
+
+/**
+ * Das ist der Typescript Type für den Verbrauchsausweis Gewerbe mit allen Feldern die
+ * von der API erwartet werden. Das Backend wird dem Client nur diese Daten zur Verfügung stellen.
+ * Hiermit kann sichergestellt werden, dass eine Funktion auf dem Client mit den richtigen Daten
+ * ausgeführt werden kann.
+ * @date 1/14/2024 - 3:33:33 PM
+ *
+ * @export
+ * @typedef {VerbrauchsausweisWohnenClient}
+ */
+export type BedarfsausweisWohnenClient = inferProcedureInput<
+	AppRouter["v1"]["bedarfsausweisWohen"]["2016"]["speichern"]
+>["ausweis"];
+
+
+
+/**
+ * Das ist der Typescript Type für die Gebäude Stammdaten mit allen Feldern die
+ * von der API erwartet werden. Das Backend wird dem Client nur diese Daten zur Verfügung stellen.
+ * Hiermit kann sichergestellt werden, dass eine Funktion auf dem Client mit den richtigen Daten
+ * ausgeführt werden kann.
+ * @date 1/14/2024 - 3:33:33 PM
+ *
+ * @export
+ * @typedef {GebaeudeClient}
+ */
+export type GebaeudeClient = inferProcedureInput<
+	AppRouter["v1"]["verbrauchsausweisWohnen"]["2016"]["speichern"]
+>["gebaeude"];
--- a/src/components/Bedarfsausweis/BedarfsausweisContent.svelte
+++ b/src/components/Bedarfsausweis/BedarfsausweisContent.svelte
@@ -5,7 +5,7 @@
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import Label from "#components/Label.svelte";
 	import HelpLabel from "#components/HelpLabel.svelte";
-	import ZipSearch from "#components/ZIPSearch.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
 	import { hotWaterProductionTypes } from "./HotWaterProductionTypes";
 	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
@@ -115,7 +115,7 @@
 	<PerformanceScore {ausweis} />
 </div>

-<form action="FORM/transfer/VA_1to2.php" enctype="multipart/form-data">
+<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
 	<fieldset
 		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
 	>
--- a/src/components/DatenblattButton.svelte
+++ b/src/components/DatenblattButton.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { Buffer } from "buffer";
+	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";

-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: GebaeudeStammdaten;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;

 	let base64: string = "";
 	$: {
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,6 +3,6 @@ const currentYear = new Date().getFullYear();
 ---

 <div class="flex flex-row justify-between px-4 items-center bg-primary py-2">
-	<a class="text-white font-medium text-lg" href="/impressum.php">Impressum und Datenschutz</a>
+	<a class="text-white font-medium text-lg" href="/impressum">Impressum und Datenschutz</a>
 	<a class="text-white font-medium text-lg" href="/">© {currentYear} IB Cornelsen Hamburg.</a>
 </div>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -48,10 +48,10 @@ const valid = await validateAccessTokenServer(Astro)
 		/> -->
 		<a
 			class="headerButton"
-			href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+			href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
 			>Energieausweis erstellen</a
 		>
-		<a class="headerButton" href="/energieausweis-kontakt.php"
+		<a class="headerButton" href="/kontakt"
 			>Kontakt</a
 		>
 		<a class="headerButton" href="/agb">AGB</a>
--- a/src/components/ImageGrid.svelte
+++ b/src/components/ImageGrid.svelte
@@ -1,20 +1,25 @@
 <script lang="ts">
 	import UploadImages from "./UploadImages.svelte";
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";

-	export let images: (File & { data: string })[] = [];
+	export let images: UploadedGebaeudeBild[] = [];
 	export let max: number = 4;
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let name: string = "";
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
+	export let kategorie: Enums.BilderKategorie
 </script>

 <div class="flex flex-col gap-4">
-	<UploadImages {max} bind:images bind:ausweis />
+	<UploadImages {name} {kategorie} {max} bind:gebaeude bind:images bind:ausweis />
 	<div class="grid grid-cols-2 gap-2">
 		{#each images as image, i}
+			{#if image.kategorie == kategorie}
 				<div class="relative group">
 					<img
-					src={image.data}
-					alt={image.name}
+						src={image.base64}
+						alt={kategorie}
 						class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
 					/>
 					<button
@@ -28,6 +33,7 @@
 						R
 					</button>
 				</div>
+			{/if}
 		{/each}
 	</div>
 </div>
--- a/src/components/Kaufabschluss/Kaufabschluss.svelte
+++ b/src/components/Kaufabschluss/Kaufabschluss.svelte
@@ -14,7 +14,7 @@
 	<div />
 </div>

-<form action="FORM/transfer/VA_3to4.php" method="POST" novalidate>
+<form action="FORM/transfer/VA_3to4" method="POST" novalidate>
 	<fieldset>
 		<div class="grid grid-cols-2 gap-6">
 			<PriceContainer {prices} />
--- a/src/components/ZIPSearch.svelte
+++ b/src/components/ZIPSearch.svelte
--- a/src/components/SidebarLeft.astro
+++ b/src/components/SidebarLeft.astro
@@ -2,13 +2,13 @@
 	<nav>
 		<div class="nav-card">
 			<div class="card-menu-option dropdown">
-				<a href="/energieausweis-erstellen.php"
+				<a href="/energieausweis-erstellen"
 					>Energieausweis erstellen</a
 				>
 				<div class="dropdown-content">
-					<a href="/verbrauchsausweis">Verbrauchsausweis erstellen</a>
+					<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">Verbrauchsausweis erstellen</a>
 					<a href="/bedarfsausweis">Bedarfsausweis erstellen</a>
-					<a href="/verbrauchsausweis-gewerbe"
+					<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe"
 						>Verbrauchsausweis Gewerbe erstellen</a
 					>
 					<a href="/bedarfsausweis-gewerbe"
@@ -20,38 +20,38 @@
 				>Welcher Energieausweis ?</a
 			>
 			<div class="card-menu-option dropdown">
-				<a href="/verbrauchsausweis/">Verbrauchsausweis</a>
+				<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">Verbrauchsausweis</a>
 				<div class="dropdown-content">
 					<a
-						href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude.php"
+						href="/energieausweis-erstellen/verbrauchsausweis-wohnenverbrauchsausweis-wohngebaeude"
 						>Verbrauchsausweis Wohngebäude</a
 					>
 					<a
-						href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+						href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
 						>Verbrauchsausweis online erstellen</a
 					>
 					<a
-						href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis.php"
+						href="/energieausweis-erstellen/verbrauchsausweis-wohnenhaeufige-fragen-zum-verbrauchsausweis"
 						>Häufige Fragen zum Verbrauchsausweis</a
 					>
 					<a
-						href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis.php"
+						href="/energieausweis-erstellen/verbrauchsausweis-wohnenstatistiken-zum-verbrauchsausweis"
 						>Statistiken zum Verbrauchsausweis Wohngebäude</a
 					>
 					<hr class="nav-hr" />
-					<a href="/verbrauchsausweis/verbrauchsausweis-gewerbe.php"
+					<a href="/energieausweis-erstellen/verbrauchsausweis-wohnenverbrauchsausweis-gewerbe"
 						>Verbrauchsausweis Gewerbe</a
 					>
 					<a
-						href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php"
+						href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen"
 						>Verbrauchsausweis Gewerbe online erstellen</a
 					>
 					<a
-						href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe.php"
+						href="/energieausweis-erstellen/verbrauchsausweis-wohnenhaeufige-fragen-zum-verbrauchsausweis-gewerbe"
 						>Häufige Fragen zum Verbrauchsausweis Gewerbe</a
 					>
 					<a
-						href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe.php"
+						href="/energieausweis-erstellen/verbrauchsausweis-wohnenstatistiken-zum-verbrauchsausweis-gewerbe"
 						>Statistiken zum Verbrauchsausweis Gewerbe</a
 					>
 				</div>
@@ -59,30 +59,30 @@
 			<div class="card-menu-option dropdown">
 				<a href="/bedarfsausweis/">Bedarfsausweis</a>
 				<div class="dropdown-content">
-					<a href="/bedarfsausweis/bedarfsausweis-wohngebaeude.php"
+					<a href="/bedarfsausweis/bedarfsausweis-wohngebaeude"
 						>Bedarfsausweis Wohngebäude</a
 					>
 					<a
-						href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+						href="/energieausweis-erstellen/bedarfsausweis-erstellen"
 						>Bedarfsausweis online erstellen</a
 					>
 					<a
-						href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis.php"
+						href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis"
 						>Häufige Fragen zum Bedarfsausweis</a
 					>
-					<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis.php"
+					<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis"
 						>Statistiken zum Bedarfsausweis Wohngebäude</a
 					>
 					<hr class="nav-hr" />
-					<a href="/bedarfsausweis/bedarfsausweis-gewerbe.php"
+					<a href="/bedarfsausweis/bedarfsausweis-gewerbe"
 						>Bedarfsausweis Gewerbe</a
 					>
 					<a
-						href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen.php"
+						href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen"
 						>Bedarfsausweis Gewerbe anfragen</a
 					>
 					<a
-						href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe.php"
+						href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe"
 						>Häufige Fragen zum Bedarfsausweis Gewerbe</a
 					>
 				</div>
@@ -90,13 +90,13 @@
 			<div class="card-menu-option dropdown">
 				<a href="/">Energieausweis</a>
 				<div class="dropdown-content">
-					<a href="/energieausweis-pflicht.php"
+					<a href="/energieausweis-pflicht"
 						>Energieausweis Pflicht</a
 					>
-					<a href="/energieausweis-kosten.php"
+					<a href="/energieausweis-kosten"
 						>Energieausweis Kosten</a
 					>
-					<a href="/energieausweis-haus.php">Energieausweis Haus</a>
+					<a href="/energieausweis-haus">Energieausweis Haus</a>
 				</div>
 			</div>
 			<a class="card-menu-option" href="/enev-zusammenfassung"
--- a/src/components/SidebarRight.astro
+++ b/src/components/SidebarRight.astro
@@ -53,7 +53,7 @@
 				alt="Verbrauchsausweis ab 45€ für Wohngebäude."
 			/>
 			<a
-				href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
 				class="large-button">Jetzt Verbrauchsausweis erstellen</a
 			>
 		</div>
@@ -85,7 +85,7 @@
 				alt="Bedarfsausweis ab 75€ für Wohngebäude"
 			/>
 			<a
-				href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+				href="/energieausweis-erstellen/bedarfsausweis-erstellen"
 				class="large-button">Jetzt Bedarfsausweis erstellen</a
 			>
 		</div>
@@ -118,7 +118,7 @@
 				alt="Verbrauchsausweis Gewerbe für 65€"
 			/>
 			<a
-				href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php"
+				href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen"
 				class="large-button">Jetzt Verbrauchsausweis erstellen</a
 			>
 		</div>
--- a/src/components/TagInput.svelte
+++ b/src/components/TagInput.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-	import { Writable, writable } from "svelte/store";
-
 	let tag = "";

-	export let tags: Writable<any[]> = writable([]);
+	export let tags: any[] = [];
 	export let addKeys: number[] = [13, 32];
 	export let maxTags: number = Infinity;
 	export let onlyUnique: boolean = false;
@@ -22,7 +20,7 @@
 	export let className: string = "";

 	function addTag(tag: string) {
-		if ((onlyUnique && $tags.indexOf(tag) > -1) || maxTags == $tags.length) {
+		if ((onlyUnique && tags.indexOf(tag) > -1) || maxTags == tags.length) {
 			tag = "";
 			return;
 		}
@@ -31,16 +29,11 @@
 			return;
 		}

-		tags.update(value => {
-			return [...value, tag].sort((a,b) => a-b);
-		})
+		tags = [...tags, tag].sort((a,b) => a-b);
 	}

 	function removeTag(i: number) {
-		tags.update(value => {
-			value.splice(i, 1)
-			return value;
-		})
+		tags = tags.filter((_, index) => index !== i);
 	}

 	function onKeydown(e: KeyboardEvent) {
@@ -50,7 +43,7 @@
 			tag = "";
 		} else if (removeKeys.indexOf(e.keyCode) > -1 && tag.length == 0) {
 			e.preventDefault();
-			removeTag($tags.length - 1);
+			removeTag(tags.length - 1);
 			tag = ""
 		}
 	}
@@ -60,8 +53,8 @@
 	class="flex flex-row gap-1 input"
 	style="padding: 0 !important;"
 >
-	{#if $tags.length > 0}
-		{#each $tags as tag, i}
+	{#if tags.length > 0}
+		{#each tags as tag, i}
 			<button class="rounded-lg bg-white px-1.5 border flex flex-row items-center justify-between gap-2" type="button" on:click={onTagClick(tag)}>
 				{tag}
 				{#if !disable && !readonly}
--- a/src/components/UploadImages.svelte
+++ b/src/components/UploadImages.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";

 	export let max: number = 2;
+	export let name: string = ""

 	// Array of base64 encoded images read into the input.
-	export let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+
+	export let images: UploadedGebaeudeBild[] = [];
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let gebaeude: GebaeudeClient;
+	export let kategorie: Enums.BilderKategorie;

 	function getAllImages(this: HTMLInputElement) {
 		const files = this.files || [];
@@ -41,7 +46,7 @@
 				let blob = new Blob([reader.result as ArrayBuffer]);
 				let url = URL.createObjectURL(blob);
 				let image = new Image();
-				image.onload = () => {
+				image.onload = async () => {
 					// Create a new canvas with the desired output size
 					const canvas = document.createElement("canvas");
 					canvas.width = image.naturalWidth;
@@ -57,26 +62,9 @@
 					// Get the scaled-down data from the canvas in the desired output format and quality
 					const dataURL = canvas.toDataURL("image/jpeg", 0.8);

-					
-					fetch("/api/image.json", {
-						method: "PUT",
-						body: JSON.stringify({
-							data: dataURL.split(';base64,')[1],
-							name: file.name,
-							kategorie: "",
-							gebaeude_uid: ausweis.gebaeude_stammdaten_id
-						})
-					}).then(response => response.json()).then(json => {
-						if (json.success === false) {
-							return
-						}
-
-						images.push({ ...file, data: dataURL as string } as (File & { data: string }));
+					images.push({ base64: dataURL as string, kategorie });
 					images = images;
 					
-						ausweis.uid = json.data.gebaeude_uid;
-					})
-					

 					if (i == (Math.min(files.length, max) - 1)) {
 						this.value = "";
@@ -92,7 +80,7 @@
 </script>

 {#if max > 1}
-	<input type="file" multiple on:change={getAllImages} />
+	<input type="file" {name} multiple on:change={getAllImages} />
 {:else}
-	<input type="file" on:change={getAllImages} />
+	<input type="file" {name} on:change={getAllImages} />
 {/if}
--- a/src/components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.ts
+++ b/src/components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.ts
@@ -1,6 +1,6 @@
-import type { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
+import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";

-export function auditBedarfsausweisBenoetigt(ausweis: VerbrauchsausweisWohnen, gebaeude: GebaeudeStammdaten): boolean {
+export function auditBedarfsausweisBenoetigt(ausweis: VerbrauchsausweisWohnenClient, gebaeude: GebaeudeClient): boolean {

 	if (gebaeude.baujahr_gebaeude && gebaeude.baujahr_gebaeude.length > 0) {
 		return (
--- a/src/components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.ts
+++ b/src/components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.ts
@@ -1,7 +1,7 @@
+import { GebaeudeClient } from "#components/Ausweis/types";
 import { AuditType, hidden } from "../audits/hidden";
-import type { GebaeudeStammdaten } from "@ibcornelsen/database/client";

-export function auditHeizungGebaeudeBaujahr(gebaeude: GebaeudeStammdaten): boolean {
+export function auditHeizungGebaeudeBaujahr(gebaeude: GebaeudeClient): boolean {
 	if ((gebaeude.baujahr_heizung && gebaeude.baujahr_heizung.length > 0) && (gebaeude.baujahr_gebaeude && gebaeude.baujahr_gebaeude.length > 0)) {
 		return gebaeude.baujahr_heizung[0] > 1500 &&
 	gebaeude.baujahr_gebaeude[0] > 1500 &&
--- a/src/components/Verbrauchsausweis/audits/VerbrauchAbweichung.ts
+++ b/src/components/Verbrauchsausweis/audits/VerbrauchAbweichung.ts
@@ -1,7 +1,7 @@
+import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 import { AuditType, hidden } from "./hidden";
-import type { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";

-export function auditVerbrauchAbweichung(ausweis: VerbrauchsausweisWohnen, gebaeude: GebaeudeStammdaten): number[] {
+export function auditVerbrauchAbweichung(ausweis: VerbrauchsausweisWohnenClient, gebaeude: GebaeudeClient): number[] {
 	if (gebaeude.leerstand && (gebaeude.leerstand > 0)) {
 		return [];
 	}
@@ -30,7 +30,5 @@ export function auditVerbrauchAbweichung(ausweis: VerbrauchsausweisWohnen, gebae
 }

 function getAbweichung(x: number, y: number): number {
-	console.log(x, y, Math.abs((x - y) / ((x + y) / 2)));
-	
 	return Math.abs((x - y) / ((x + y) / 2));
 }
--- a/src/components/Verbrauchsausweis/shared.ts
+++ b/src/components/Verbrauchsausweis/shared.ts
@@ -1,4 +0,0 @@
-import { Gebaeude } from "src/lib/Gebaeude";
-import { Writable, writable } from "svelte/store";
-
-export const gebaeude: Writable<Gebaeude> = writable();
--- a/src/lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.ts
+++ b/src/lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.ts
@@ -1,14 +1,14 @@
+import { VerbrauchsausweisWohnenClient, GebaeudeClient } from "#components/Ausweis/types";
+import { getKlimafaktoren } from "#lib/Klimafaktoren";
 import { getHeizwertfaktor } from "#lib/server/Heizwertfaktor";
 import type {
 	GebaeudeStammdaten,
 	VerbrauchsausweisWohnen,
 } from "@ibcornelsen/database/client";
-import moment from "moment";
-import { client } from "src/trpc";

 export function energetischeNutzflaecheVerbrauchsausweisWohnen_2016(
-	ausweis: VerbrauchsausweisWohnen & {
-		gebaeude_stammdaten: GebaeudeStammdaten;
+	ausweis: VerbrauchsausweisWohnenClient & {
+		gebaeude_stammdaten: GebaeudeClient;
 	}
 ): number {
 	let faktorKeller = 1.2;
@@ -20,25 +20,25 @@ export function energetischeNutzflaecheVerbrauchsausweisWohnen_2016(
 }

 export async function endEnergieVerbrauchVerbrauchsausweis_2016(
-	ausweis: VerbrauchsausweisWohnen & {
-		gebaeude_stammdaten: GebaeudeStammdaten;
+	ausweis: VerbrauchsausweisWohnenClient & {
+		gebaeude_stammdaten: GebaeudeClient;
 	}
 ) {
 	if (!ausweis.gebaeude_stammdaten.plz || !ausweis.startdatum) {
 		return null
 	}

+	let klimafaktoren: Awaited<ReturnType<typeof getKlimafaktoren>>;
+
 	try {
-		const klimafaktoren = await client.v1.klimafaktoren.query({
-				plz: ausweis.gebaeude_stammdaten.plz,
-				genauigkeit: "years",
-				startdatum: ausweis.startdatum,
-				enddatum: moment(ausweis.startdatum).add(2, "years").toDate()
-			})
+		klimafaktoren = await getKlimafaktoren(ausweis.startdatum, ausweis.gebaeude_stammdaten.plz)
 	} catch (e) {
 		return null
 	}

+	if (!klimafaktoren) {
+		return null
+	}
 	

 	// Endenergieverbrauch
--- a/src/lib/Heizungswerte.ts
+++ b/src/lib/Heizungswerte.ts
@@ -1,4 +1,4 @@
-import fuelList from "#components/Ausweis/fuelList";
+import fuelList from "#components/Ausweis/brennstoffListe";

 export function getHeizungswerte(
 	energietraeger: string,
--- a/src/lib/caller.ts
+++ b/src/lib/caller.ts
@@ -5,10 +5,11 @@ export const createCaller = function (opts: any) {
 	// 1. create a caller-function for your router
 	const createCaller = t.createCallerFactory(appRouter);
 	
+	const token = Buffer.from(opts.cookies.get(API_ACCESS_TOKEN_COOKIE_NAME).value ?? "", "utf-8").toString("base64");
 	// 2. create a caller using your `Context`
 	return createCaller({
-		authorization: opts.cookies.get(API_ACCESS_TOKEN_COOKIE_NAME).value ?? "",
-		ip: opts.clientAddress,
+		authorization: `Bearer ${token}`,
+		ip: "",
 		req: opts.request
 	});
 }
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -2,6 +2,7 @@ import { Enums } from "@ibcornelsen/database/client";

 export const API_ACCESS_TOKEN_COOKIE_NAME = "accessToken";
 export const API_REFRESH_TOKEN_COOKIE_NAME = "refreshToken";
+export const API_UID_COOKIE_NAME = "uid";

 /**
 * Ein Objekt welches alle definierten Preise für unsere Basisprodukte enthält.
--- a/src/lib/server/Heizwertfaktor.ts
+++ b/src/lib/server/Heizwertfaktor.ts
@@ -1,4 +1,4 @@
-import fuelList from "#components/Ausweis/fuelList";
+import fuelList from "#components/Ausweis/brennstoffListe";

 export const getHeizwertfaktor = function(energietraeger: string, einheit: string): {
 	coe: number,
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -6,30 +6,69 @@
 	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
 	import Label from "#components/Label.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
-	import ZipSearch from "#components/ZIPSearch.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
 	import moment from "moment";
 	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
-	import { RawNotificationWrapper, RawNotification, notifications, addNotification } from "@ibcornelsen/ui";
+	import { RawNotificationWrapper, RawNotification, notifications, addNotification, updateNotification } from "@ibcornelsen/ui";
 	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
 	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden";
 	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt";
 	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung";
-	import type { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client"
 	import { client } from "src/trpc";
 	import Overlay from "#components/Overlay.svelte";
 	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
 	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
 	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
+	import { UploadedGebaeudeBild, VerbrauchsausweisWohnenClient, GebaeudeClient } from "#components/Ausweis/types";
 	
-	export let uid: string | null = null;
-	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen = {
-		ausweisart: Enums.Ausweisart.VerbrauchsausweisWohnen
-	} as VerbrauchsausweisWohnen;
+	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
+	export let images: UploadedGebaeudeBild[] = [];
+	export let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
 	
-	console.log(Enums);
+	async function uploadImages() {
+		// Alle Bilder hochladen
+		for (let i = 0; i < images.length; i++) {
+			const image = images[i];
+			if (image.uid) {
+				// Bild wurde bereits hochgeladen, wir müssen es also nicht nochmal hochladen.
+				continue
+			}

+			const notification = addNotification({
+				dismissable: false,
+				message: "Bilder hochladen.",
+				subtext: `Bild ${i + 1}/${images.length} wird hochgeladen, bitte haben sie Geduld.`,
+				timeout: 0,
+				type: "info"
+			})
+
+			try {
+				const response = await client.v1.bilder.upload.mutate({
+					base64: image.base64,
+					kategorie: image.kategorie,
+					gebaeude_uid: gebaeude.uid
+				})
+
+				image.uid = response.uid
+
+				updateNotification(notification, {
+					dismissable: true,
+					message: "Bild hochgeladen.",
+					subtext: `Bild ${i + 1}/${images.length} wurde erfolgreich hochgeladen.`,
+					timeout: 4000
+				})
+			} catch (e) {
+				updateNotification(notification, {
+					dismissable: true,
+					message: "Bild konnte nicht hochgeladen werden.",
+					subtext: `Bild ${i + 1}/${images.length} konnte nicht hochgeladen werden, wir haben bereits ein Ticket erstellt und melden uns so schnell wie möglich bei ihnen.`,
+					timeout: 150000,
+					type: "error"
+				})
+			}
+		}
+	}

 	async function ausweisSpeichern() {
 		// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
@@ -41,16 +80,17 @@

 		loginOverlayHidden = true;

-		if (uid) {
+		if (ausweis.uid) {
 			// Anscheinend wurde der Ausweis bereits erstellt und hat eine UID.
 			// Jetzt müssen wir ihn nun nur noch abspeichern.
 			try {
 				await client.v1.verbrauchsausweisWohnen[2016].speichern.mutate({
 					ausweis,
-					gebaeude,
-					uid
+					gebaeude
 				})

+				await uploadImages();
+
 				return true;
 			} catch (e) {
 				addNotification({
@@ -64,12 +104,18 @@
 			}
 		} else {
 			// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
+			console.log(ausweis, gebaeude);
+			
 			try {
 				const response = await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
 					ausweis,
 					gebaeude
 				})
-				uid = response.uid
+				ausweis.uid = response.uid;
+				gebaeude.uid = response.gebaeude_uid;
+
+				await uploadImages();
+
 				return true;
 			} catch (e) {
 				addNotification({
@@ -88,7 +134,7 @@
 		const result = await ausweisSpeichern();

 		if (result === true) {
-			window.history.pushState({}, "", `/verbrauchsausweis?uid=${uid}`);
+			window.history.pushState({}, "", `/verbrauchsausweis?uid=${ausweis.uid}`);
 			speichernOverlayHidden = false;
 		}
 	}
@@ -118,11 +164,12 @@
 	}


-	async function ausweisAbschicken() {
+	async function ausweisAbschicken(e: SubmitEvent) {
+		e.preventDefault()
 		const result = await ausweisSpeichern();

 		if (result === true) {
-			window.location.href = `/kundendaten?uid=${uid}`;
+			window.location.href = `/kundendaten?uid=${ausweis.uid}`;
 		}
 	}

@@ -139,7 +186,7 @@

 <Overlay bind:hidden={speichernOverlayHidden}>
 	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
-		<AusweisGespeichertModule {uid}></AusweisGespeichertModule>
+		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
 	</div>
 </Overlay>

@@ -156,12 +203,12 @@
 	<PerformanceScore bind:ausweis bind:gebaeude />
 </div>

-<div>
+<form on:submit={ausweisAbschicken} name="ausweis">
 	<div
 		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
 	>
 		<div class="flex flex-row justify-between">
-			<button class="button" on:click={spaeterWeitermachen}>Später Weitermachen</button>
+			<button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button>
 			<div class="flex gap-4">
 				<Hilfe />
 				<button
@@ -388,7 +435,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_kuehlung	"
+							name="alternative_kuehlung"
 							bind:checked={ausweis.alternative_kuehlung}
 							value="Kühlung"
 						/>Kühlung</label
@@ -411,8 +458,8 @@
 					Bitte wählen Sie hier den Gebäudetyp aus.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudetyp" required autocomplete="off">
-						<option>Bitte auswählen</option>
+					<select name="gebaeudetyp" required>
+						<option disabled>Bitte auswählen</option>
 						<option value="Einfamilienhaus">Einfamilienhaus</option>
 						<option value="Freistehendes Einfamilienhaus"
 							>Freistehendes Einfamilienhaus</option
@@ -450,8 +497,8 @@
 					'Gewerbe'.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudeteil" class="" required autocomplete="off">
-						<option>Bitte auswählen</option>
+					<select name="gebaeudeteil" required>
+						<option disabled>Bitte auswählen</option>
 						<option value="Gesamtgebäude">Gesamtgebäude</option>
 						<option value="Wohnen">Wohnen</option>
 					</select>
@@ -468,10 +515,9 @@
 					<select
 						name="lueftung"
 						required
-						autocomplete="off"
 						bind:value={gebaeude.lueftung}
 					>
-						<option>Bitte auswählen</option>
+						<option disabled>Bitte auswählen</option>
 						<option value="Fensterlüftung">Fensterlüftung</option>
 						<option value="Schachtlüftung">Schachtlüftung</option>
 						<option value="Lüftungsanlage ohne Wärmerückgewinnung"
@@ -493,12 +539,10 @@
 				<div>
 					<select
 						name="kuehlung"
-						class=""
 						required
-						autocomplete="off"
 						bind:value={gebaeude.kuehlung}
 					>
-						<option>Bitte auswählen</option>
+						<option disabled>Bitte auswählen</option>
 						<option value="1">vorhanden</option>
 						<option value="0">nicht vorhanden</option>
 					</select>
@@ -516,8 +560,7 @@
 					<input
 						name="leerstand"
 						maxlength="2"
-						type="text"
-						autocomplete="off"
+						type="number"
 						bind:value={gebaeude.leerstand}
 					/>
 				</div>
@@ -530,14 +573,14 @@
 			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
 			Gebäudes</Label
 		>
-		<BilderZusatzsysteme {gebaeude} {ausweis} />
+		<BilderZusatzsysteme {images} {gebaeude} {ausweis} />
 		<hr />
 		<div class="flex flex-row justify-between">
 			<Hilfe />
-			<button class="button" on:click={ausweisAbschicken}>Weiter</button>
+			<button type="submit" class="button">Weiter</button>
 		</div>
 	</div>
-</div>
+</form>


 <RawNotificationWrapper>
--- a/src/modules/EmbeddedLoginModule.svelte
+++ b/src/modules/EmbeddedLoginModule.svelte
@@ -7,7 +7,8 @@

 	export let onLogin: (response: Awaited<ReturnType<typeof loginClient>>) => void;

-	async function login() {
+	async function login(e: SubmitEvent) {
+		e.preventDefault()
 		const response = await loginClient(data.email, data.passwort)

 		if (response === null) {
@@ -24,14 +25,14 @@
 	}
 </script>

-<div style="width:50%;margin: 0 auto">
+<form style="width:50%;margin: 0 auto" on:submit={login} name="login">
 	<h1>Login</h1>
 	<div class="flex flex-col gap-4">
 		<div>
 			<h4>Email</h4>
 			<input
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
-				type="text"
+				type="email"
 				placeholder="Email"
 				name="email"
 				bind:value={data.email}
@@ -44,15 +45,15 @@
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 				type="password"
 				placeholder="********"
-				name="password"
+				name="passwort"
 				bind:value={data.passwort}
 				required
 			/>
 		</div>
-		<button class="button" on:click={login}>Einloggen</button>
+		<button class="button" type="submit">Einloggen</button>
 		<div class="flex-row justify-between" style="margin-top: 10px">
-			<button on:click={() => navigate("signup")}>Registrieren</button>
+			<button on:click={() => navigate("signup")} name="registrieren">Registrieren</button>
 			<a href="/user/passwort_vergessen">Passwort Vergessen?</a>
 		</div>
 	</div>
-</div>
+</form>
--- a/src/modules/EmbeddedRegisterModule.svelte
+++ b/src/modules/EmbeddedRegisterModule.svelte
@@ -9,7 +9,8 @@
 	let vorname: string;
 	let name: string;

-	async function login() {
+	async function signUp(e: SubmitEvent) {
+		e.preventDefault()
 		try {
 			const response = await client.v1.benutzer.erstellen.mutate({
 				email,
@@ -36,7 +37,7 @@
 	}
 </script>

-<div style="width:50%;margin: 0 auto">
+<form style="width:50%;margin: 0 auto" name="signup" on:submit={signUp}>
 	<h1>Registrieren</h1>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-row gap-4 w-full">
@@ -45,6 +46,7 @@
 				<input
 					type="text"
 					placeholder="Vorname"
+					name="vorname"
 					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 					bind:value={vorname}
 					required
@@ -55,6 +57,7 @@
 				<input
 					type="text"
 					placeholder="Nachname"
+					name="nachname"
 					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 					bind:value={name}
 					required
@@ -64,8 +67,9 @@
 		<div>
 			<h4>Email</h4>
 			<input
-				type="text"
+				type="email"
 				placeholder="Email"
+				name="email"
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 				bind:value={email}
 				required
@@ -76,15 +80,16 @@
 			<input
 				type="password"
 				placeholder="********"
+				name="passwort"
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 				bind:value={passwort}
 				required
 			/>
 		</div>
-		<button class="button" on:click={login}>Registrieren</button>
+		<button class="button" type="submit">Registrieren</button>
 		<div class="flex-row justify-between" style="margin-top: 10px">
 			<button on:click={() => navigate("login")}>Einloggen</button>
 			<a href="/user/passwort_vergessen">Passwort Vergessen?</a>
 		</div>
 	</div>
-</div>
+</form>
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
 	import HelpLabel from "#components/HelpLabel.svelte";
-	import ZipSearch from "../components/ZIPSearch.svelte";
+	import ZipSearch from "../components/PlzSuche.svelte";
 	import Label from "../components/Label.svelte";
 	import PriceContainer from "#components/Kaufabschluss/PriceContainer.svelte";
 	import type { BedarfsausweisWohnen, Benutzer, Bezahlmethoden, Rechnungen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
@@ -325,7 +325,7 @@
 									<input type="checkbox" bind:checked={agbAkzeptiert} />
 									<label for="accept-agb"
 										>Ich erkläre mich mit den <a
-											href="https://online-energieausweis.org/agb.php"
+											href="https://online-energieausweis.org/agb"
 											>AGB</a
 										> vom Ingenieur-Büro Cornelsen einverstanden.</label
 									>
@@ -337,12 +337,12 @@
 									/>
 									<label for="accept-datenschutz"
 										>Ich erkläre mich mit der <a
-											href="https://online-energieausweis.org/impressum.php"
+											href="https://online-energieausweis.org/impressum"
 											>Datenschutzerklärung</a
 										>
 										und
 										<a
-											href="https://online-energieausweis.org/agb.php#widerruf"
+											href="https://online-energieausweis.org/agb#widerruf"
 											>Widerrufsbelehrung</a
 										> vom Ingenieur-Büro Cornelsen einverstanden.</label
 									>
--- a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -6,33 +6,16 @@
 	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
 	import Label from "#components/Label.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
-	import ZipSearch from "../../components/ZIPSearch.svelte";
+	import ZipSearch from "../../components/PlzSuche.svelte";
 	import { buildingTypes } from "./BuildingTypes";
 	import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
-	import { GebaeudeStammdaten, VerbrauchsausweisGewerbe, Enums } from "@ibcornelsen/database/client";
+	import { Enums } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient } from "#components/Ausweis/types";

-	export let uid: string | null = null;
-	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisGewerbe = {
-		ausweisart: Enums.Ausweisart.VerbrauchsausweisGewerbe
-	} as VerbrauchsausweisGewerbe;
-
-	let additionalHeating: boolean = false;
-	let heatedWaterIncluded: boolean = false;
-	let heatedWaterPortion: number = 18;
-
-	let needsRequirementCertificate: boolean = false;
-
-	$: needsRequirementCertificate =
-		(gebaeude.baujahr_gebaeude[0] < 1978 &&
-			(gebaeude.einheiten || 0) <= 4 &&
-			gebaeude.saniert == false &&
-			(ausweis.ausstellgrund == "Vermietung" ||
-				ausweis.ausstellgrund == "Sonstiges")) ||
-		ausweis.ausstellgrund == "Neubau" ||
-		ausweis.ausstellgrund == "Modernisierung" ||
-		ausweis.ausstellgrund == "Verkauf";
+	export let images: UploadedGebaeudeBild[] = [];
+	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
+	export let ausweis: VerbrauchsausweisGewerbeClient = {} as VerbrauchsausweisGewerbeClient;

 		function automatischAusfüllen() {
 		gebaeude.baujahr_gebaeude = [1962];
@@ -65,10 +48,11 @@
 		<Progressbar progress={0} />
 	</div>

-	<PerformanceScore bind:ausweis />
+	<PerformanceScore bind:ausweis bind:gebaeude />
 </div>

-<form method="post" action="/verbrauchsausweis/erstellen">
+<!-- TODO: Submit implementieren in externer Datei wenn Verbrauchsausweis Wohnen fertig ist -->
+<form name="ausweis" on:submit={() => {}}>
 	<fieldset
 		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
 	>
@@ -92,7 +76,7 @@

 		<div
 			class="flex flex-col p-4"
-			class:hidden={!needsRequirementCertificate}
+			class:hidden={!false}
 		>
 			<div class="form-group col-md-9">
 				<HelpLabel
@@ -128,13 +112,12 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="IGstrasse"
-						class=" strasse"
+						name="adresse"
 						type="text"
 						autocomplete="off"
 						required
-						data-msg-minlength="min. 5 Zeichen"
-						data-msg-maxlength="max. 40 Zeichen"
+						minlength="5"
+						maxlength="40"
 						bind:value={gebaeude.adresse}
 					/>
 				</div>
@@ -145,7 +128,7 @@
 				<ZipSearch
 					bind:zip={gebaeude.plz}
 					bind:city={gebaeude.ort}
-					name="zip"
+					name="plz"
 				/>
 			</div>

@@ -157,7 +140,7 @@
 				<div>
 					<input
 						name="ort"
-						readonly={true}
+						readonly
 						bind:value={gebaeude.ort}
 						type="text"
 					/>
@@ -178,8 +161,7 @@
 						type="number"
 						required
 						autocomplete="off"
-						data-rule-minlength="2"
-						data-msg-minlength="min. 2 Zeichen"
+						minlength="2"
 						bind:value={gebaeude.flaeche}
 					/>
 				</div>
@@ -194,7 +176,7 @@
 						required
 						bind:value={gebaeude.keller}
 					>
-						<option>Bitte auswählen</option>
+						<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>
@@ -207,7 +189,7 @@
 				<Label>Dachgeschoss *</Label>
 				<div>
 					<select name="dachgeschoss" required>
-						<option>Bitte auswählen</option>
+						<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>
@@ -224,24 +206,181 @@
 		<div class="GRB">
 			<Verbrauch bind:ausweis bind:gebaeude />
 		</div>
+		<hr>
+		<div class="flex flex-row gap-4">
+			<div class="GRB">
+				<div class="flex flex-col gap-4">
+					<div>
+						<HelpLabel title="Gebäudestrom">
+							Bitte geben Sie hier den Gesamtstromverbrauch der betrachteten Zeiträume in kWh ein. Bei dem Stromverbrauch der Heizung ist die Hilfsenergie gemeint, oder der Verbrauch von elektrischen Ergänzungsheizungen ( z.B. raumlufttechnische Anlagen).
+						</HelpLabel>
+					</div>
+					<div class="grid grid-cols-3 gap-4">
+						<div class="flex flex-col gap-2">
+							<div class="flex flex-row items-center gap-4">
+								<span>von</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>von</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("1", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>von</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("2", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+						</div>
+						<div class="flex flex-col gap-2">
+							<div class="flex flex-row items-center gap-4">
+								<span>bis</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("1", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>bis</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("2", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>bis</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("3", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+						</div>
+						<div class="flex flex-col gap-2">
+							<div class="flex flex-row items-center gap-4">
+								<span>Verbrauch</span>
+								<input
+									name="strom_1"
+									type="number"
+									bind:value={ausweis.strom_1}
+									required
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>Verbrauch</span>
+								<input
+									name="strom_2"
+									type="number"
+									bind:value={ausweis.strom_2}
+									required
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>Verbrauch</span>
+								<input
+									name="strom_3"
+									type="number"
+									bind:value={ausweis.strom_3}
+									required
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="GRB">
+				<div class="flex flex-col gap-4 w-full">
+					<div>
+						<HelpLabel title="Enthält Stromverbrauch für">
+							Bitte geben Sie hier ein für welche technischen Gebäudekomponeten der Stromverbrauch angefallen ist. Sollte es zusätzliche Stromabnehmer geben die in dem angegebenen Verbrauch enthalten sind, dann setzen Sie den Haken bei Sonstige und benennen diese.
+						</HelpLabel>
+					</div>
+					<div class="flex flex-row gap-4 justify-between">
+						<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_heizung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_heizung}
+								/>Heizung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_warmwasser"
+									bind:checked={ausweis.stromverbrauch_enthaelt_warmwasser}
+								/>Warmwasser</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_lueftung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_lueftung}
+								/>Lüftung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_beleuchtung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_beleuchtung}
+								/>Beleuchtung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_kuehlung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_kuehlung}
+								/>Kühlung</label
+							>
+					</div>
+					<label class="checkbox-inline"
+						>Sonstige:<input
+							type="text"
+							name="stromverbrauch_enthaelt_sonstige"
+							bind:value={ausweis.stromverbrauch_enthaelt_sonstige}
+						/></label
+					>
+				</div>
+			</div>
+		</div>
 		<hr />
 		<div>
 			<div>
 				<div class="GRB">
 					<!-- Anteil WW enthalten -->
-					<div class="flex flex-col">
-						<div class="flex flex-row gap-6">
+					<div class="flex flex-row items-center gap-6">
 						<label class="radio-inline"
 							><input
 								type="checkbox"
-									class="IGwwbool"
-									name="IGwwbool"
-									bind:checked={heatedWaterIncluded}
-								/>Warmwasser im Verbrauch enthalten</label
+								name="warmwasser_enthalten"
+								bind:checked={ausweis.warmwasser_enthalten}
+							/>Warmwasser im Heizverbrauch enthalten:*</label
 						>
 					</div>
-					</div>

+					<div class="flex flex-row gap-4">
 						<!-- Warmwasser Antel -->
 					<div class="form-group col-md-2">
 						<HelpLabel title="% Anteil Warmwasser">
@@ -251,11 +390,11 @@
 						</HelpLabel>

 						<input
-							name="IGwarmwasser"
+							name="anteil_warmwasser_1"
 							maxlength="2"
-							type="text"
-							bind:value={heatedWaterPortion}
-							disabled={!heatedWaterIncluded}
+							type="number"
+							bind:value={ausweis.anteil_warmwasser_1}
+							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
 							autocomplete="off"
 						/>
 					</div>
@@ -268,13 +407,15 @@
 							von 18% angenommen.
 						</HelpLabel>
 						<input
-							name="IGwarmwasser2"
-							maxlength="3"
-							type="text"
+							name="anteil_warmwasser_2"
+							maxlength="2"
+							type="number"
+							bind:value={ausweis.anteil_warmwasser_2}
+							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
 							autocomplete="off"
-							disabled={!additionalHeating}
 						/>
 					</div>
+					</div>

 					<!-- Alternative Energieversorgungssyteme -->
 					<div class="form-group col-md-5">
@@ -290,28 +431,32 @@
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme1"
+									name="alternative_heizung"
+									bind:checked={ausweis.alternative_heizung}
 									value="Heizung"
 								/>Heizung</label
 							>
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme2"
+									name="alternative_warmwasser"
+									bind:checked={ausweis.alternative_warmwasser}
 									value="Warmwasser"
 								/>Warmwasser</label
 							>
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme3"
+									name="alternative_lueftung"
+									bind:checked={ausweis.alternative_lueftung}
 									value="Lüftung"
 								/>Lüftung</label
 							>
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme4"
+									name="alternative_kuehlung"
+									bind:checked={ausweis.alternative_kuehlung}
 									value="Kühlung"
 								/>Kühlung</label
 							>
@@ -319,6 +464,57 @@
 					</div>
 				</div>

+				<hr>
+				<div class="GRB">
+					<!-- Anteil WW enthalten -->
+					<div class="flex flex-row items-center gap-6">
+						<label class="radio-inline"
+							><input
+								type="checkbox"
+								name="kuehlung_enthalten"
+								bind:checked={ausweis.kuehlung_enthalten}
+							/>Thermische Kühlung im Heizverbrauch enthalten *</label
+						>
+					</div>
+
+					<!-- Warmwasser Antel -->
+					<div class="flex flex-row gap-4">
+						<div class="form-group col-md-2">
+							<HelpLabel title="% Anteil Warmwasser">
+								Wenn bekannt geben Sie den Anteil der
+								Warmwasser-Versorgung hier ein. Standardmäßig wird
+								ein Anteil von 18% angenommen.
+							</HelpLabel>
+	
+							<input
+								name="anteil_kuehlung_1"
+								maxlength="2"
+								type="number"
+								bind:value={ausweis.anteil_kuehlung_1}
+								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
+								autocomplete="off"
+							/>
+						</div>
+	
+						<div class="form-group col-md-2">
+							<HelpLabel title="zusätzliche Heizquelle">
+								Wenn bekannt geben Sie den Anteil der
+								Warmwasser-Versorgung von der zusätzlichen
+								Heizquelle hier ein. Standardmäßig wird ein Anteil
+								von 18% angenommen.
+							</HelpLabel>
+							<input
+								name="anteil_kuehlung_2"
+								maxlength="2"
+								type="number"
+								bind:value={ausweis.anteil_kuehlung_2}
+								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
+								autocomplete="off"
+							/>
+						</div>
+					</div>
+				</div>
+
 				<hr />
 				<div>
 					<Label
@@ -333,9 +529,9 @@
 							>Bitte wählen Sie hier den Gebäudetyp aus.
 						</HelpLabel>
 						<div>
-							<select name="objekt_typ" required>
+							<select name="gebaeudetyp" required>
 								{#each buildingTypes as type}
-									<option value={type}>{type}</option>
+									<option value={type} selected={gebaeude.gebaeudetyp == type}>{type}</option>
 								{/each}
 							</select>
 						</div>
@@ -351,8 +547,8 @@
 							Gebäudeteil 'Wohnen' bzw. Gebäudeteil 'Gewerbe'.</HelpLabel
 						>
 						<div>
-							<select name="objekt_gebaeudeteil" required>
-								<option>Bitte auswählen</option>
+							<select name="gebaeudeteil" required>
+								<option disabled>Bitte auswählen</option>
 								<option value="Gesamtgebäude">
 									Gesamtgebäude</option
 								>
@@ -368,8 +564,8 @@
 							Lüftungsanlage.</HelpLabel
 						>
 						<div>
-							<select name="lueftungskonzept" required>
-								<option> Bitte auswählen</option>
+							<select name="lueftung" required>
+								<option disabled>Bitte auswählen</option>
 								<option value="Fensterlüftung">
 									Fensterlüftung</option
 								>
@@ -396,8 +592,8 @@
 							zusätzlich gekühlt wird.</HelpLabel
 						>
 						<div>
-							<select name="wird_gekuehlt" required>
-								<option>Bitte auswählen</option>
+							<select name="kuehlung" required>
+								<option disabled>Bitte auswählen</option>
 								<option value="1"> vorhanden</option>
 								<option value="0"> nicht vorhanden</option>
 							</select>
@@ -411,7 +607,7 @@
 							Monate Leerstand in 36 Monaten wären dann ca. 11%.</HelpLabel
 						>
 						<div>
-							<input name="leerstand" maxlength="2" type="text" />
+							<input name="leerstand" maxlength="2" type="number" />
 						</div>
 					</div>
 				</div>
@@ -424,11 +620,11 @@
 					>
 				</div>

-				<BilderZusatzsysteme {ausweis} {gebaeude} />
+				<BilderZusatzsysteme {ausweis} {gebaeude} bind:images />

 				<div class="flex flex-row justify-between">
 					<Hilfe />
-					<button formnovalidate>Weiter</button>
+					<button type="submit" class="button">Weiter</button>
 				</div>
 			</div>
 		</div>
--- a/src/pages/auth/logout.astro
+++ b/src/pages/auth/logout.astro
@@ -1,9 +1,8 @@
 ---
+import { API_ACCESS_TOKEN_COOKIE_NAME, API_REFRESH_TOKEN_COOKIE_NAME, API_UID_COOKIE_NAME } from "#lib/constants";

-
-
-
-Astro.cookies.delete("token");
-Astro.cookies.delete("expires");
-return Astro.redirect("/");
+Astro.cookies.delete(API_ACCESS_TOKEN_COOKIE_NAME);
+Astro.cookies.delete(API_REFRESH_TOKEN_COOKIE_NAME);
+Astro.cookies.delete(API_UID_COOKIE_NAME);
+return Astro.redirect("/auth/login");
 ---
--- a/src/pages/energieausweis-erstellen/bedarfsausweis-wohnen/index.astro
+++ b/src/pages/energieausweis-erstellen/bedarfsausweis-wohnen/index.astro
--- a/src/pages/energieausweis-erstellen/verbrauchsausweis-gewerbe/index.astro
+++ b/src/pages/energieausweis-erstellen/verbrauchsausweis-gewerbe/index.astro
--- a/src/pages/energieausweis-erstellen/verbrauchsausweis-wohnen/index.astro
+++ b/src/pages/energieausweis-erstellen/verbrauchsausweis-wohnen/index.astro
@@ -0,0 +1,51 @@
+---
+
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import VerbrauchsausweisWohnenModule from "#modules/Ausweise/VerbrauchsausweisWohnenModule.svelte";
+import { prisma } from "@ibcornelsen/database/server";
+import { exclude } from "#lib/exclude";
+import { UploadedGebaeudeBild, VerbrauchsausweisWohnenClient, GebaeudeClient } from "#components/Ausweis/types";
+import { createCaller } from "#lib/caller";
+
+const uid = Astro.url.searchParams.get("uid");
+let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
+let gebaeude: GebaeudeClient = {} as GebaeudeClient;
+let images: UploadedGebaeudeBild[] = [];
+
+if (uid) {
+	const request = await prisma.verbrauchsausweisWohnen.findUnique({
+		where: { uid },
+		include: {
+			gebaeude_stammdaten: true
+		}
+	})
+
+	if (request) {
+		const { gebaeude_stammdaten, ...rest } = request;
+		const gebaeudeBilder = await prisma.gebaeudeBilder.findMany({
+			where: { gebaeude_stammdaten_id: gebaeude_stammdaten.id },
+		});
+		
+		images = (await Promise.all(gebaeudeBilder.map(async bild => {
+			try {
+				const response = await createCaller(Astro).v1.bilder.getBase64({uid: bild.uid});
+				return {
+					base64: `data:image/webp;charset=utf-8;base64, ${response.base64}`,
+					uid: bild.uid,
+					kategorie: bild.kategorie
+				}
+			} catch (error) {
+				return null
+			}
+		}))).filter(x => x !== null) as UploadedGebaeudeBild[];
+
+		ausweis = exclude(rest, ["id", "gebaeude_stammdaten_id", "ausweisart", "benutzer_id", "rechnungen_id"]) satisfies VerbrauchsausweisWohnenClient;
+		gebaeude = exclude(request.gebaeude_stammdaten, ["id", "benutzer_id"]) satisfies GebaeudeClient;
+	}
+}
+
+---
+
+<AusweisLayout title="Verbrauchsausweis erstellen">
+	<VerbrauchsausweisWohnenModule client:load images={images} ausweis={ausweis} gebaeude={gebaeude} />
+</AusweisLayout>
--- a/src/pages/fuer-entwickler/index.astro
+++ b/src/pages/fuer-entwickler/index.astro
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -53,11 +53,11 @@ import FeatureCard from "#components/FeatureCard.svelte";
 		/>
 	</div>Sie möchten Ihren <strong>Energieausweis online erstellen</strong>?
 	Auf dieser Seite finden Sie alle nötigen Informationen hierzu. Sollten Sie
-	sich nicht sicher sein <a href="/energieausweis-welcher-energieausweis.php"
+	sich nicht sicher sein <a href="/energieausweis-welcher-energieausweis"
 		>welchen Energieausweis</a
 	> Sie benötigen, können Sie sich bei uns umfassend informieren. Wir haben fürs
 	Sie alle wichtigen Informationen rund um die GEG und zur
-	<a href="/energieausweis-pflicht.php">Energieausweis Pflicht</a> zusammengetragen.
+	<a href="/energieausweis-pflicht">Energieausweis Pflicht</a> zusammengetragen.
 	Zusätzlich haben wir die entscheidenden Informationen auf übersichtlichen Merkblättern
 	im PDF Format zum Download zusammengefasst. Sollten Sie noch Fragen zum Thema
 	Energieausweis online erstellen haben, stehen wir Ihnen gerne telefonisch unter
@@ -81,13 +81,13 @@ import FeatureCard from "#components/FeatureCard.svelte";
 			<li>
 				Der verbrauchsbasierte Energieausweis wird als <a
 					title="Verbrauchsausweis"
-					href="/verbrauchsausweis/"
+					href="/energieausweis-erstellen/verbrauchsausweis-wohnen"
 					><strong>Verbrauchsausweis</strong></a
 				> bezeichnet. Dies ist der „kleine“ Energieausweis und kann bei Vermietung
 				und Verkauf in den meisten Fällen verwendet werden. Hier gehts direkt
 				zum Eingabeformular <br />→ <a
 					title="Energieausweis online erstellen - Verbrauchsausweis"
-					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+					href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
 					>Energieausweis online erstellen</a
 				>
 				<hr />
@@ -100,7 +100,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 				verwendet werden. Bei Neubau und Modernisierung ist er zwingend
 				vorgeschrieben. Hier gehts direkt zum Eingabeformular <br />→ <a
 					title="Energieausweis online erstellen - Bedarfsausweis"
-					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+					href="/energieausweis-erstellen/bedarfsausweis-erstellen"
 					>Energieausweis online erstellen</a
 				>
 			</li>
@@ -108,7 +108,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 	</div>
 	<hr />
 	<div class="grid grid-cols-3 gap-4">
-		<FeatureCard heading="Verbrauchsausweis Wohngebäude" price={45} href="/verbrauchsausweis">
+		<FeatureCard heading="Verbrauchsausweis Wohngebäude" price={45} href="/energieausweis-erstellen/verbrauchsausweis-wohnen">
 			<div class="rpt_feature">Unsere Leistungen:</div>
 			<div class="rpt_feature">Prüfung durch Diplom Ingenieur</div>
 			<div class="rpt_feature">Energieausweis Vorschau als PDF</div>
@@ -128,7 +128,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 			<div class="rpt_feature">rechtssicher nach aktueller EnEV</div>
 			<div class="rpt_feature">telefonische Beratung</div>
 		</FeatureCard>
-		<FeatureCard heading="Verbrauchsausweis Gewerbe" price={65} href="/verbrauchsausweis-gewerbe">
+		<FeatureCard heading="Verbrauchsausweis Gewerbe" price={65} href="/energieausweis-erstellen/verbrauchsausweis-gewerbe">
 			<div class="rpt_feature">Unsere Leistungen:</div>
 			<div class="rpt_feature">Prüfung durch Diplom Ingenieur</div>
 			<div class="rpt_feature">Energieausweis Vorschau als PDF</div>
@@ -217,7 +217,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 					<div class="start_infobox_link">
 						<a
 							title="Verbrauchsausweis"
-							href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude.php"
+							href="/energieausweis-erstellen/verbrauchsausweis-wohnenverbrauchsausweis-wohngebaeude"
 							>Verbrauchsausweis</a
 						>
 						bei fast allen Gebäuden möglich. (Baujahr &gt; 1977 - Vermietung/Verkauf)
@@ -227,7 +227,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 			<div class="start_infobox_button">
 				<a
 					title="Verbrauchsausweis erstellen"
-					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+					href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
 					>Jetzt Verbrauchsausweis erstellen</a
 				>
 			</div>
@@ -255,7 +255,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 				<li>
 					<a
 						title="Bedarfsausweis"
-						href="/bedarfsausweis/bedarfsausweis-wohngebaeude.php"
+						href="/bedarfsausweis/bedarfsausweis-wohngebaeude"
 						>Bedarfsausweis</a
 					> bei allen Gebäuden möglich. Die Berechnung ist umfangreicher
 					und besser vergleichbar.
@@ -264,7 +264,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 			<div class="start_infobox_button">
 				<a
 					title="Bedarfsausweis erstellen"
-					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+					href="/energieausweis-erstellen/bedarfsausweis-erstellen"
 					>Jetzt Bedarfsausweis erstellen</a
 				>
 			</div>
@@ -295,7 +295,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 				<li>
 					<a
 						title="Bedarfsausweis Gewerbe"
-						href="/bedarfsausweis/bedarfsausweis-gewerbe.php"
+						href="/bedarfsausweis/bedarfsausweis-gewerbe"
 						>Bedarfsausweis Gewerbe</a
 					> bei allen Nichtwohngebäuden möglich (kann immmer verwendet
 					werden).
@@ -303,7 +303,7 @@ import FeatureCard from "#components/FeatureCard.svelte";
 			</ul>
 			<div class="start_infobox_button">
 				<a
-					href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen.php"
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen"
 					title="Bedarfsausweis Gewerbe anfragen"
 					>Jetzt Bedarfsausweis Gewerbe anfragen</a
 				>
--- a/src/pages/kontakt.astro
+++ b/src/pages/kontakt.astro
--- a/src/pages/verbrauchsausweis/index.astro
+++ b/src/pages/verbrauchsausweis/index.astro
@@ -1,36 +0,0 @@
---
-
-import AusweisLayout from "#layouts/AusweisLayout.astro";
-import VerbrauchsausweisWohnenModule from "#modules/Ausweise/VerbrauchsausweisWohnenModule.svelte";
-import { GebaeudeStammdaten, VerbrauchsausweisWohnen, prisma } from "@ibcornelsen/database/server";
-import { exclude } from "#lib/exclude";
-
-// TODO: In eigene Datei auslagern und in den Frontend Dateien verwenden.
-type VerbrauchsausweisWohnenIDStripped = Omit<VerbrauchsausweisWohnen, "id" | "gebaeude_stammdaten_id" | "ausweisart" | "benutzer_id" | "rechnungen_id">;
-
-const uid = Astro.url.searchParams.get("uid");
-let ausweis: VerbrauchsausweisWohnenIDStripped = {} as VerbrauchsausweisWohnen;
-// TODO: Hiervon auch eine ID Stripped Version erstellen.
-let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
-
-if (uid) {
-	const request = await prisma.verbrauchsausweisWohnen.findUnique({
-		where: { uid },
-		include: {
-			gebaeude_stammdaten: true
-		}
-	})
-
-	if (request) {
-		const { gebaeude_stammdaten, ...rest } = request;
-		// TODO: `uid` kann als Key wieder hinzugefügt werden, dadurch können wir es uns sparen, `uid` nochmal extra mitzugeben.
-		ausweis = exclude(rest, ["id", "uid", "gebaeude_stammdaten_id", "ausweisart", "benutzer_id", "rechnungen_id"]);
-		gebaeude = exclude(request.gebaeude_stammdaten, ["id", "uid", "benutzer_id"]) as GebaeudeStammdaten;
-	}
-}
-
---
-
-<AusweisLayout title="Verbrauchsausweis erstellen">
-	<VerbrauchsausweisWohnenModule client:load uid={uid} ausweis={ausweis} gebaeude={gebaeude} />
-</AusweisLayout>
--- a/tests/bilder/upload.test.ts
+++ b/tests/bilder/upload.test.ts
@@ -0,0 +1,89 @@
+import { Enums } from "@ibcornelsen/database/client";
+import { test, describe, expect } from "bun:test";
+import {faker} from "@faker-js/faker";
+import { client } from "src/trpc";
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
+import type { AppRouter } from '@ibcornelsen/api';
+import { Buffer } from 'buffer';
+
+describe("Bilder hochladen", async () => {
+	
+	// Erstmal lesen wir ein Bild ein, mit dem wir testen können
+	const arrayBuffer = await Bun.file("cypress/fixtures/images/daemmung/1.jpeg").arrayBuffer();
+	const buffer = Buffer.from(arrayBuffer)
+	const base64 = buffer.toString("base64");
+
+	// Im Browser hätten wir noch einen Mime Type vor dem base64-String
+	const base64WithMimeType = "data:image/jpeg;base64," + base64;
+
+	// Wir müssen uns einloggen, da wir für das Hochladen von Bildern einen Access Token brauchen
+	const email = faker.internet.email();
+	const passwort = faker.internet.password();
+	const signUpResponse = await client.v1.benutzer.erstellen.mutate({
+		email,
+		passwort,
+		name: faker.person.lastName(),
+		vorname: faker.person.firstName(),
+	})
+
+	// Jetzt loggen wir uns ein
+	const loginResponse = await client.v1.benutzer.getRefreshToken.query({
+		email,
+		passwort,
+	})
+
+	// Wir brauchen den Access Token
+	const accessToken = loginResponse.accessToken;
+
+	// Der Default Client versucht den Cookie zu lesen, das geht hier natürlich nicht
+	const newClient = createTRPCProxyClient<AppRouter>({
+		links: [
+			httpBatchLink({
+				url: 'http://localhost:3001/',
+				headers() {
+					if (!accessToken) return {};
+	
+					const buffer = Buffer.from(accessToken, 'utf-8');
+					const base64 = buffer.toString('base64')
+	
+					return {
+						'Authorization': `Bearer ${base64}`,
+					};
+				},
+			}),
+		],
+	});
+
+	// Wir brauchen noch ein Gebäude, damit wir das Bild hochladen können
+	const gebaeude = await newClient.v1.gebaeude.erstellen.mutate({})
+
+	// Jetzt laden wir das Bild hoch
+	const image = await newClient.v1.bilder.upload.mutate({
+		base64: base64WithMimeType,
+		gebaeude_uid: gebaeude.uid,
+		kategorie: Enums.BilderKategorie.Daemmung,
+	})
+
+	test("sollte ohne Fehler hochladen", async () => {
+		expect(image).toHaveProperty("uid");
+		expect(image.uid).toBeTypeOf("string")
+	})
+
+	test("bild sollte in der Datenbank und abrufbar sein", async () => {
+		const bild = await newClient.v1.bilder.getBase64.query({ uid: image.uid });
+
+		expect(bild).toHaveProperty("base64");
+		expect(bild.base64).toBeTypeOf("string");
+		expect(bild.base64).toEqual(base64);
+	})
+
+	test("bild sollte entfernbar sein", async () => {
+		const response = await newClient.v1.bilder.entfernen.mutate({ uid: image.uid });
+
+		expect(response).toBeEmpty();
+
+		// Einmal nachschauen ob es tatächlich gelöscht wurde
+		expect(newClient.v1.bilder.getBase64.query({ uid: image.uid })).rejects.toThrow()
+	})
+
+});
--- a/tests/verbrauchsausweis/end-energie-verbrauch.test.ts
+++ b/tests/verbrauchsausweis/end-energie-verbrauch.test.ts
@@ -1,18 +0,0 @@
-import { test, expect } from "bun:test";
-import { Verbrauchsausweis } from "#lib/Ausweis/Verbrauchsausweis";
-
-/**
- * Wir erstellen einen neuen Verbrauchsausweis um unsere Tests durchzuführen.
- */
-const ausweis = new Verbrauchsausweis();
-
-ausweis.ausstellgrund = "Vermietung";
-ausweis.baujahr_heizung = [1998];
-ausweis.verbrauch_1 = 10000;
-ausweis.verbrauch_2 = 10000;
-ausweis.verbrauch_3 = 10000;
-
-
-test("Endenergieverbrauch", async () => {
-	
-});
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,7 @@
 			"#components/*": ["./src/components/*"],
 			"#layouts/*": ["./src/layouts/*"],
 			"#modules/*": ["./src/modules/*"],
-		}
+		},
+		"types": ["cypress", "cypress-file-upload", "bun-types"]
 	}
 }