Übersetzungen + Prüfbox Bezahlung

2023-08-31 23:12:18 +06:00
parent 0fac93486f
commit 7bf1b9a6c6
90 changed files with 3015 additions and 417 deletions
--- a/.astro-i18n/generated.d.ts
+++ b/.astro-i18n/generated.d.ts
@@ -0,0 +1,52 @@
+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 TranslationPath = "header.profil" | "header.kontakt" | "header.login"
+type TranslationOptions = { "header.profil": {} | undefined; "header.kontakt": {} | undefined; "header.login": {} | undefined; }
+
+declare module "astro-i18n" {
+	export * from "astro-i18n/"
+	
+	export function l<Uri extends RouteUri>(
+		route: Uri | string & {},
+		...args: Uri extends keyof RouteParams
+			? undefined extends RouteParams[Uri]
+				? [params?: Record<string, string>, targetLangCode?: LangCode, routeLangCode?: LangCode]
+				: [params: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode]
+			: [params?: Record<string, string>, targetLangCode?: LangCode, routeLangCode?: LangCode]
+	): string
+	
+	export function t<Path extends TranslationPath>(
+		path: Path | string & {},
+		...args: undefined extends TranslationOptions[Path]
+			? [options?: keyof TranslationOptions extends Path ? Record<string, unknown> : TranslationOptions[Path], langCode?: LangCode]
+			: [options: TranslationOptions[Path], langCode?: LangCode]
+	): string
+	
+	export function extractRouteLangCode(route: string): LangCode | undefined
+	
+	type Translation = string | { [translationKey: string]: string | Translation }
+	type Translations = { [langCode: string]: Record<string, Translation> }
+	type RouteTranslations = { [langCode: string]: Record<string, string> }
+	type InterpolationFormatter = (value: unknown, ...args: unknown[]) => string
+	class AstroI18n {
+		defaultLangCode: DefaultLangCode
+		supportedLangCodes: SupportedLangCode[]
+		showDefaultLangCode: boolean
+		translations: Translations
+		routeTranslations: RouteTranslations
+		get langCodes(): LangCode[]
+		get langCode(): LangCode
+		set langCode(langCode: LangCode)
+		get formatters(): Record<string, InterpolationFormatter>
+		init(Astro: { url: URL }, formatters?: Record<string, InterpolationFormatter>): void
+		addTranslations(translations: Translations): void
+		addRouteTranslations(routeTranslations: RouteTranslations): void
+		getFormatter(name: string): InterpolationFormatter | undefined
+		setFormatter(name: string, formatter: InterpolationFormatter): void
+		deleteFormatter(name: string): void
+	}
+	export const astroI18n: AstroI18n
+}
--- a/astro-i18next.config.mjs
+++ b/astro-i18next.config.mjs
@@ -0,0 +1,16 @@
+/** @type {import('astro-i18next').AstroI18nextConfig} */
+
+export default {
+	defaultLocale: "de",
+	locales: ["de", "en", "fr"],
+	showDefaultLocale: false,
+	routes: {
+		en: {
+			"verbrauchsausweis": "consumption-certificate",
+			"bedarfsausweis": "requirement-certificate"
+		},
+		fr: {
+			
+		}
+	}
+}
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,6 @@
 import { defineConfig } from "astro/config";
 import svelte from "@astrojs/svelte";
+import astroI18next from "astro-i18next";

 import tailwind from "@astrojs/tailwind";

@@ -11,7 +12,7 @@ import mdx from "@astrojs/mdx";

 // https://astro.build/config
 export default defineConfig({
-  integrations: [svelte(), tailwind(), mdx()],
+  integrations: [astroI18next(),svelte(), tailwind(), mdx()],
  outDir: "./dist",
  output: "server",
  adapter: node({
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
 		"test:e2e": "cypress run",
 		"test:unit": "vitest",
 		"format": "prettier --write .",
-		"build:production": "astro build && node server.js"
+		"build:production": "astro build && node server.js",
+		"i18n:generate": "npx astro-i18next generate"
 	},
 	"private": true,
 	"dependencies": {
@@ -20,9 +21,16 @@
 		"@astrojs/svelte": "^2.2.0",
 		"@astrojs/tailwind": "^3.1.3",
 		"@ibcornelsen/ui": "^0.0.2",
+		"@mollie/api-client": "^3.7.0",
 		"astro": "^2.5.1",
+		"astro-i18next": "1.0.0-beta.21",
 		"cookiejs": "^2.1.2",
+		"esbuild": "^0.18.17",
 		"express": "^4.18.2",
+		"flag-icons": "^6.9.2",
+		"i18next": "^23.4.1",
+		"i18next-fs-backend": "^2.1.5",
+		"i18next-http-backend": "^2.2.1",
 		"jimp": "^0.22.8",
 		"jwt-simple": "^0.5.6",
 		"katex": "^0.16.7",
@@ -34,6 +42,7 @@
 		"svelte-preprocess": "^5.0.3",
 		"tailwindcss": "^3.3.2",
 		"uuid": "^9.0.0",
+		"vite-tsconfig-paths": "^4.2.0",
 		"zod": "^3.21.4"
 	},
 	"devDependencies": {
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -0,0 +1,7 @@
+{
+	"header": {
+		"profil": "Profil",
+		"kontakt": "Kontakt",
+		"login": "Login"
+	}
+}
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -0,0 +1,7 @@
+{
+	"header": {
+		"profil": "Profile",
+		"kontakt": "Contact Us",
+		"login": "Log in"
+	}
+}
--- a/public/locales/fr/translation.json
+++ b/public/locales/fr/translation.json
@@ -0,0 +1,7 @@
+{
+  "header": {
+    "kontakt": "Nous contacter",
+    "login": "Se connecter",
+    "profil": "Profil"
+  }
+}
--- a/schema/Ausweis.ts
+++ b/schema/Ausweis.ts
@@ -0,0 +1,15 @@
+import { Energiekennwert } from "./Energiekennwert";
+
+export interface Ausweis  {
+	ausweisart: "Verbrauchsausweis" | "Bedarfsausweis" | "Verbrauchsausweis Nichtwohngebäude",
+	energiekennwerte: Energiekennwert[],
+	erstellungsdatum: string,
+	// Ausstellungsgrund des Ausweises
+	ausstellgrund: "Vermietung" | "Verkauf" | "Neubau" | "Sonstiges",
+	// Gültigkeitsdatum des Ausweises
+	gueltig_bis: string,
+	// Baujahr des Gebäudes, es können ebenfalls mehrere Baujahre angegeben werden.
+	baujahr_gebaeude: number[] | number,
+	// Baujahr der Anlagentechnik, es können ebenfalls mehrere Baujahre oder mehrere Baujahre für mehrere Anlagen angegeben werden.
+	baujahr_anlage: number[] | number | number[][],
+}
--- a/schema/Energiekennwert.ts
+++ b/schema/Energiekennwert.ts
@@ -0,0 +1,9 @@
+export interface Energiekennwert {
+	verbraeuche: number[],
+	energietraeger_einheit: string,
+	energietraeger: string,
+	// Anteil Warmwasser am Heizverbrauch in Prozent
+	anteil_warmwasser: number,
+	zeitraum_start: string,
+	zeitraum_ende: string,
+}
--- a/schema/Gebaeude.ts
+++ b/schema/Gebaeude.ts
@@ -0,0 +1,7 @@
+export interface Gebaeude {
+	objekt_typ: string,
+	objekt_plz: string,
+	objekt_ort: string,
+	objekt_strasse: string,
+
+}
--- a/src/components/AnsichtsausweisButton.svelte
+++ b/src/components/AnsichtsausweisButton.svelte
@@ -5,14 +5,10 @@

 	export let ausweis: Verbrauchsausweis | Bedarfsausweis | VerbrauchsausweisGewerbe;

-	function viewAusweis() {
 	const base64 = btoa(JSON.stringify(ausweis));
-
-		window.open(`/pdf/ansichtsausweis?base64=${base64}`, "_blank");
-	}
 </script>

-<button class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6" on:click={viewAusweis}>
+<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/datenblatt?base64={base64}">
 	<img src="/images/ausweis.webp" alt="Ausweis" />
 	<span class="text-black font-medium text-lg">Ansichtsausweis</span>
-</button>
+</a>
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -2,9 +2,9 @@
 	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
 	import { VerbrauchsausweisGewerbe } from "src/lib/Ausweis/VerbrauchsausweisGewerbe";
 	import { Bedarfsausweis } from "src/lib/Ausweis/Bedarfsausweis";
-	import AnsichtsausweisButton from "~/components/AnsichtsausweisButton.svelte";
-	import DatenblattButton from "~/components/DatenblattButton.svelte";
-	import HelpLabel from "~/components/HelpLabel.svelte";
+	import AnsichtsausweisButton from "#components/AnsichtsausweisButton.svelte";
+	import DatenblattButton from "#components/DatenblattButton.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";

 	export let ausweis:
 		| Verbrauchsausweis
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
 	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
 	import { Gebaeude } from "src/lib/Gebaeude";
-	import HelpLabel from "~/components/HelpLabel.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
 	import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
 	import { addNotification, deleteNotification } from "@ibcornelsen/ui";
 	import TagInput from "../TagInput.svelte";
 	import { writable } from "svelte/store";

 	export let gebaeude: Gebaeude;
-
-	$: ausweis = gebaeude.ausweis || new Verbrauchsausweis();
+	export let ausweis: Verbrauchsausweis;

 	let baujahr = writable(gebaeude.baujahr);
-	let baujahrAnlage = writable(gebaeude.ausweis.baujahr_anlage);
+	let baujahrAnlage = writable(ausweis.baujahr_anlage);
 </script>

 <div class="GRB">
--- a/src/components/Ausweis/Kundendaten.svelte
+++ b/src/components/Ausweis/Kundendaten.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import ProgressBar from "~/components/Ausweis/Progressbar.svelte";
-	import HelpLabel from "~/components/HelpLabel.svelte";
+	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
 	import ZipSearch from "../ZIPSearch.svelte";
+	import Label from "../Label.svelte";
+	import PriceContainer from "#components/Kaufabschluss/PriceContainer.svelte";

 	let deliveryAddress: boolean = false;

@@ -10,11 +12,21 @@

 	let invoiceAddressCity: string = "";
 	let invoiceAddressZipCode: string = "";
+
+	export let paymentType:
+		| "paypal"
+		| "kreditkarte"
+		| "giropay"
+		| "sofort"
+		| "rechnung"
+		| "sepa" = "paypal";
+
+	let agbAkzeptiert: boolean;
+	let datenschutzAkzeptiert: boolean;
 </script>

-<div class="col-12">
-	<div class="row">
-		<div class="flex flex-row gap-8 items-center mb-8">
+<div class="w-full px-8">
+	<div class="flex flex-row gap-8 items-center mb-8 w-3/5">
 		<div class="flex flex-col w-full">
 			<h1>Verbrauchsausweis erstellen - 45€</h1>
 			<ProgressBar progress={50} />
@@ -28,14 +40,15 @@
 		class="w-full"
 		action="/kaufabschluss"
 	>
-			<fieldset>
+		<fieldset class="flex flex-row gap-8">
+			<div class="w-3/5">
 				<div class="GRB3">
 					<HelpLabel title="Ansprechpartner" />
 					<hr />
 					<div class="grid grid-cols-5 gap-4">
 						<!-- Anrede -->
 						<div>
-							<label>Anrede *</label>
+							<Label>Anrede *</Label>
 							<div>
 								<select name="Aanrede" class="">
 									<option>bitte auswählen</option>
@@ -47,29 +60,25 @@

 						<!-- Vorname -->
 						<div>
-							<label>Vorname *</label>
+							<Label>Vorname *</Label>
 							<input name="Avorname" type="text" required />
 						</div>

 						<!-- Nachname -->
 						<div>
-							<label>Nachname *</label>
+							<Label>Nachname *</Label>
 							<input name="Anachname" type="text" required />
 						</div>

 						<!-- Telefon -->
 						<div>
-							<label>Telefon</label>
-							<input
-								name="Atelefon"
-								class=""
-								type="text"
-							/>
+							<Label>Telefon</Label>
+							<input name="Atelefon" class="" type="text" />
 						</div>

 						<!-- Email -->
 						<div>
-							<label>E-Mail *</label>
+							<Label>E-Mail *</Label>
 							<input name="Aemail" type="email" required />
 						</div>
 					</div>
@@ -84,7 +93,7 @@

 					<div class="grid grid-cols-5 gap-4">
 						<div>
-							<label>Empfänger *</label>
+							<Label>Empfänger *</Label>
 							<input
 								name="Rempfaenger"
 								type="text"
@@ -96,7 +105,7 @@

 						<!-- Zusatzzeile -->
 						<div>
-							<label>Zusatzzeile</label>
+							<Label>Zusatzzeile</Label>
 							<input
 								name="Rzusatzzeile"
 								type="text"
@@ -107,7 +116,7 @@

 						<!-- Strasse -->
 						<div>
-							<label>Straße, Hausnummer *</label>
+							<Label>Straße, Hausnummer *</Label>
 							<input
 								name="Rstrasse"
 								type="text"
@@ -118,27 +127,33 @@
 						</div>

 						<!-- PLZ -->
-						<ZipSearch name="vplz" bind:zip={invoiceAddressZipCode} bind:city={invoiceAddressCity}></ZipSearch>
+						<ZipSearch
+							name="vplz"
+							bind:zip={invoiceAddressZipCode}
+							bind:city={invoiceAddressCity}
+						/>

 						<!-- Ort -->
 						<div>
-							<label>Ort *</label>
-							<input name="Rort" readonly type="text" required value={invoiceAddressCity} />
+							<Label>Ort *</Label>
+							<input
+								name="Rort"
+								readonly
+								type="text"
+								required
+								value={invoiceAddressCity}
+							/>
 						</div>

 						<!-- Telefon -->
 						<div>
-							<label>Telefon</label>
-							<input
-								name="Rtelefon"
-								class=""
-								type="text"
-							/>
+							<Label>Telefon</Label>
+							<input name="Rtelefon" class="" type="text" />
 						</div>

 						<!-- Email -->
 						<div>
-							<label>E-Mail</label>
+							<Label>E-Mail</Label>
 							<input name="Remail" type="email" />
 						</div>
 					</div>
@@ -157,14 +172,12 @@
 								id="deliveryAddress"
 								bind:checked={deliveryAddress}
 							/>
-							<label for="deliveryAddress"
-								>Abweichende Versandadresse</label
-							>
+							<Label>Abweichende Versandadresse</Label>
 						</div>

 						<!-- Empfänger -->
 						<div>
-							<label>Empfänger *</label>
+							<Label>Empfänger *</Label>
 							<input
 								name="Vempfaenger"
 								type="text"
@@ -177,7 +190,7 @@

 						<!-- Zusatzzeile -->
 						<div>
-							<label>Zusatzzeile</label>
+							<Label>Zusatzzeile</Label>
 							<input
 								name="Vzusatzzeile"
 								type="text"
@@ -189,7 +202,7 @@

 						<!-- Strasse -->
 						<div>
-							<label>Straße, Hausnummer *</label>
+							<Label>Straße, Hausnummer *</Label>
 							<input
 								name="Vstrasse"
 								type="text"
@@ -201,12 +214,169 @@
 						</div>

 						<!-- PLZ -->
-						<ZipSearch name="rplz" readonly={!deliveryAddress} bind:zip={mailAddressZipCode} bind:city={mailAddressCity}></ZipSearch>
+						<ZipSearch
+							name="rplz"
+							readonly={!deliveryAddress}
+							bind:zip={mailAddressZipCode}
+							bind:city={mailAddressCity}
+						/>

 						<!-- Ort -->
 						<div>
-							<label>Ort *</label>
-							<input name="Vort" type="text" readonly required value={mailAddressCity} />
+							<Label>Ort *</Label>
+							<input
+								name="Vort"
+								type="text"
+								readonly
+								required
+								value={mailAddressCity}
+							/>
+						</div>
+					</div>
+				</div>
+
+				<hr />
+
+				<div class="yellow-box">
+					<h4>Bitte wählen sie ihre Bezahlmethode aus.</h4>
+					<div class="flex flex-row gap-4">
+						<div class="w-1/2">
+							<div>
+								<div class="payment-option-card">
+									<img
+										src="/images/paypal.png"
+										alt="PayPal"
+									/>
+									<div
+										class="payment-option-label"
+										aria-label="Zahlen mit PayPal"
+									>
+										Zahlen mit PayPal
+									</div>
+								</div>
+								<div class="payment-option-card">
+									<img
+										src="/images/giropay.png"
+										alt="Giropay"
+									/>
+									<div
+										class="payment-option-label"
+										aria-label="Zahlen mit Giropay"
+									>
+										Zahlen mit Giropay
+									</div>
+								</div>
+								<div class="payment-option-card">
+									<img
+										src="/images/sofort.png"
+										alt="Sofort"
+									/>
+									<div
+										class="payment-option-label"
+										aria-label="Zahlen mit Sofort"
+									>
+										Zahlen mit Sofort
+									</div>
+								</div>
+							</div>
+							<div>
+								<div class="payment-option-card">
+									<img
+										src="/images/mastercard.png"
+										alt="Mastercard"
+									/>
+									<div
+										class="payment-option-label"
+										aria-label="Zahlen mit Kreditkarte"
+									>
+										Zahlen mit Kreditkarte
+									</div>
+								</div>
+								<div class="payment-option-card">
+									<img
+										src="/images/rechnung.png"
+										alt="Rechnung"
+									/>
+									<div
+										class="payment-option-label"
+										aria-label="Zahlen mit Rechnung"
+									>
+										Zahlen mit Rechnung
+									</div>
+								</div>
+								<div class="payment-option-card">
+									<img src="/images/sepa.png" alt="SEPA" />
+									<div
+										class="payment-option-label"
+										aria-label="Zahlen mit SEPA über PayPal"
+									>
+										SEPA über PayPal
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="w-1/2">
+							<div class="flex-row justify-between">
+								<h5>{paymentType}</h5>
+								<img
+									src="../../images/{paymentType ==
+									'kreditkarte'
+										? 'mastercard'
+										: paymentType}.png"
+									class="payment-option-logo"
+								/>
+							</div>
+							{#if paymentType == "rechnung"}
+								<p>
+									Sobald sie AGB und Datenschutzerklärung
+									gelesen und akzeptiert haben können sie den
+									Kauf fortsetzen. Durch das Klicken auf
+									'Kostenpflichtig Bestellen' wird ihnen eine
+									Email mit weiteren Informationen über ihren
+									Kauf zugeschickt, von der aus sie den
+									Bezahlvorgang abschließen können.
+								</p>
+							{:else}
+								<p>
+									Sobald sie AGB und Datenschutzerklärung
+									gelesen und akzeptiert haben können sie den
+									Kauf fortsetzen. Durch das Klicken auf
+									'Kostenpflichtig Bestellen' werden sie zu <strong
+										>{paymentType}</strong
+									> weitergeleitet.
+								</p>
+							{/if}
+							<div class="column">
+								<div class="flex-row center">
+									<input type="checkbox" bind:checked={agbAkzeptiert} />
+									<label for="accept-agb"
+										>Ich erkläre mich mit den <a
+											href="https://online-energieausweis.org/agb.php"
+											>AGB</a
+										> vom Ingenieur-Büro Cornelsen einverstanden.</label
+									>
+								</div>
+								<div class="flex-row center">
+									<input
+										type="checkbox"
+										bind:checked={datenschutzAkzeptiert}
+									/>
+									<label for="accept-datenschutz"
+										>Ich erkläre mich mit der <a
+											href="https://online-energieausweis.org/impressum.php"
+											>Datenschutzerklärung</a
+										>
+										und
+										<a
+											href="https://online-energieausweis.org/agb.php#widerruf"
+											>Widerrufsbelehrung</a
+										> vom Ingenieur-Büro Cornelsen einverstanden.</label
+									>
+								</div>
+							</div>
+							<button class="pay-button" disabled={!agbAkzeptiert || !datenschutzAkzeptiert}
+								>Kostenpflichtig Bestellen</button
+							>
 						</div>
 					</div>
 				</div>
@@ -214,13 +384,15 @@
 				<hr />

 				<div class="flex flex-row w-full justify-between">
-					<button>Zurück</button>
-					<button>Weiter</button>
+					<button class="button">Zurück</button>
+				</div>
+			</div>
+			<div class="w-2/5">
+				<PriceContainer prices={[45, 60, 160]} />
 			</div>
 		</fieldset>
 	</form>
 </div>
-</div>

 <style>
 	input,
@@ -237,4 +409,20 @@
 		border: 1px solid #ced4da;
 		border-radius: 0.25rem;
 	}
+
+	.pay-button {
+		@apply w-full px-4 py-3 text-center flex items-center justify-center bg-gray-500 text-white rounded-md cursor-not-allowed mt-4 select-none no-underline font-semibold;
+	}
+
+	.pay-button:hover {
+		@apply no-underline;
+	}
+
+	.pay-button:not([disabled]) {
+		@apply cursor-pointer bg-yellow-500;
+	}
+
+	.pay-button:not([disabled]):hover {
+		@apply bg-yellow-600;
+	}
 </style>
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -26,6 +26,7 @@
 	];

 	export let gebaeude: Gebaeude;
+	export let ausweis: Verbrauchsausweis;

 	const fuelMap: Record<string, string[]> = {};
 	for (const fuel of fuelList) {
@@ -37,8 +38,6 @@
 	let month: string = "01";
 	let year: string = "2018";

-	$: ausweis = gebaeude.ausweis || new Verbrauchsausweis();
-
 	$: {
 		if (month && year) {
 			ausweis.kennwerte.zeitraum = moment(`${month}.01.${year}`);
--- a/src/components/AusweisCard.svelte
+++ b/src/components/AusweisCard.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import HorizontalDots from "./Icons/HorizontalDots.svelte";
-	import type { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
-	import Katex from "./Katex.svelte";
+	import HorizontalDots from "#components/Icons/HorizontalDots.svelte";
+	import type { Verbrauchsausweis } from "#lib/Ausweis/Verbrauchsausweis";
 	import moment from "moment";
-	import Cross from "./Icons/Cross.svelte";
-	import { Dachgeschoss } from "src/lib/Ausweis/types";
+	import Cross from "#components/Icons/Cross.svelte";
+	import { Dachgeschoss } from "#lib/Ausweis/types";

 	interface Service {
 		name: string;
--- a/src/components/Bedarfsausweis/BedarfsausweisContent.svelte
+++ b/src/components/Bedarfsausweis/BedarfsausweisContent.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-	import Progressbar from "~/components/Ausweis/Progressbar.svelte";
-	import Hilfe from "~/components/Ausweis/Hilfe.svelte";
-	import 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 PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	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 { hotWaterProductionTypes } from "./HotWaterProductionTypes";
 	import { Bedarfsausweis } from "src/lib/Ausweis/Bedarfsausweis";
 	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
--- a/src/components/DatenblattButton.svelte
+++ b/src/components/DatenblattButton.svelte
@@ -5,14 +5,10 @@

 	export let ausweis: Verbrauchsausweis | Bedarfsausweis | VerbrauchsausweisGewerbe;

-	function viewDatenblatt() {
 	const base64 = btoa(JSON.stringify(ausweis));
-
-		window.open(`/pdf/datenblatt?base64=${base64}`, "_blank");
-	}
 </script>

-<button class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6" on:click={viewDatenblatt}>
+<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/datenblatt?base64={base64}">
 	<img src="/images/datenblatt.webp" alt="Datenblatt" />
 	<span class="text-black font-medium text-lg">Datenblatt</span>
-</button>
+</a>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,5 +1,9 @@
 ---
+import i18next from "i18next";
+import {localizeUrl} from "astro-i18next"
+import { t } from "i18next";
 import { isLoggedIn } from "../lib/UI/isLoggedIn";
+import LanguageDropdown from "./LanguageDropdown.svelte";

 const loggedIn = isLoggedIn(Astro);
 ---
@@ -16,22 +20,56 @@ const loggedIn = isLoggedIn(Astro);
 				src="/images/header/logo-big.png"
 				class="header-logo"
 				alt="IBCornelsen - Logo"
-				onclick="window.location.href = '/'"
+				onclick="
+				window.location.href = '/'
+"
 			/>
-			<h2 class="text-secondary font-semibold text-2xl absolute top-8 right-0">Energieausweis online erstellen</h2>
-			<h2 class="text-primary font-semibold text-xl absolute top-16 right-0">Energieausweise nach aktueller GEG</h2>
+			<h2
+				class="text-secondary font-semibold text-2xl absolute top-8 right-0"
+			>
+				Energieausweis online erstellen
+			</h2>
+			<h2
+				class="text-primary font-semibold text-xl absolute top-16 right-0"
+			>
+				Energieausweise nach aktueller GEG
+			</h2>
 		</div>
 	</div>

 	<div class="nav-head">
+		<LanguageDropdown
+			countries={[
+				{ iso: "de", flag: "de", name: "Deutsch" },
+				{ iso: "en", flag: "us", name: "English" },
+				{ iso: "fr", flag: "fr", name: "Français" },
+			]}
+			localized={i18next.languages.map(l => {
+				return { lang: l, path: localizeUrl(Astro.request.url, l)};
+			})}
+			current={i18next.language}
+			client:load
+		/>
 		<a
 			class="headerButton"
 			href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
 			>Energieausweis erstellen</a
 		>
-		<a class="headerButton" href="/energieausweis-kontakt.php">Kontakt</a>
+		<a class="headerButton" href="/energieausweis-kontakt.php"
+			>{t("header.kontakt")}</a
+		>
 		<a class="headerButton" href="/agb">AGB</a>
-		{loggedIn ? <a class="headerButton" href="/user">Profil</a> : <a class="headerButton" href="/login">Login</a>}
+		{
+			loggedIn ? (
+				<a class="headerButton" href="/user">
+					{t("header.profil")}
+				</a>
+			) : (
+				<a class="headerButton" href="/login">
+					{t("header.login")}
+				</a>
+			)
+		}
 		<a class="hamburger_menu"
 			><img src="/images/hamburger.png" alt="hamburger" /></a
 		>
--- a/src/components/Kaufabschluss/Kaufabschluss.svelte
+++ b/src/components/Kaufabschluss/Kaufabschluss.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import ProgressBar from "~/components/Ausweis/Progressbar.svelte";
-	import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-	import PriceContainer from "~/components/Kaufabschluss/PriceContainer.svelte";
-	import KundendatenContainer from "~/components/Kaufabschluss/KundendatenContainer.svelte";
+	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	import PriceContainer from "#components/Kaufabschluss/PriceContainer.svelte";
+	import KundendatenContainer from "#components/Kaufabschluss/KundendatenContainer.svelte";

 	const prices = [45, 60, 160];
 </script>
@@ -22,9 +21,9 @@

 			<KundendatenContainer />

-			<div class="GRB">
+			<div class="yellow-box">
 				<h4>Bitte wählen sie ihre Bezahlmethode aus.</h4>
-				<div class="flex-row justify-between">
+				<div class="flex flex-row gap-4">
 					<div>
 						<div class="payment-option-card">
 							<img src="/images/paypal.png" alt="PayPal" />
@@ -90,9 +89,5 @@
 			</div>
 		</div>
 	</fieldset>
-	<div class="form-group col-md-12">
-		<div class="form-group col-md-6" style="text-align:left; ">
-			<a class="button" href="/verbrauchsausweis">Daten ändern</a>
-		</div>
-	</div>
+		<button class="button">Daten ändern</button>
 </form>
--- a/src/components/Kaufabschluss/KundendatenContainer.svelte
+++ b/src/components/Kaufabschluss/KundendatenContainer.svelte
@@ -1,72 +1,71 @@
-<div class="GRB">
-	<table>
-		<tr>
-			<td>Kunde<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td>Telefon<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td>E-Mail<input type="text" readonly /></td>
-		</tr>
+<script lang="ts">
+	import Label from "../Label.svelte";
+</script>

-		<tr>
-			<td colspan="1">
+<div class="yellow-box flex flex-col gap-2">
+	<div>
+		<Label>Kunde</Label>
+		<input type="text" readonly />
+	</div>
+	<div>
+		<Label>Telefon</Label>
+		<input type="text" readonly />
+	</div>
+	<div>
+		<Label>E-Mail</Label>
+		<input type="text" readonly />
+	</div>
 	<hr />
-			</td>
-		</tr>

-		<tr>
-			<td> Rechnungsempfänger<input type="text" readonly /></td>
-		</tr>
-
-		<tr>
-			<td> Zusatzzeile<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td> Strasse<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td> Telefon<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td>
-				E-Mail<input type="text" readonly />
-			</td>
-		</tr>
-		<tr>
-			<td> PLZ und Ort<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td>
-				<hr />
-			</td>
-		</tr>
-		<tr>
-			<td>Versandempfänger<input type="text" readonly /> </td>
-		</tr>
-		<tr>
-			<td>Zusatzzeile<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td>Strasse<input type="text" readonly /></td>
-		</tr>
-		<tr>
-			<td>PLZ und Ort<input type="text" readonly /></td>
-		</tr>
-	</table>
+	<div>
+		<Label>Rechnungsempfänger</Label>
+		<input type="text" readonly />
 	</div>

-<style>
-	table tr {
-		@apply border-none;
-	}
+	<div>
+		<Label>Zusatzzeile</Label>
+		<input type="text" readonly />
+	</div>

-	table, td, tr {
-		@apply border-0 p-2;
-	}
+	<div>
+		<Label>Strasse</Label>
+		<input type="text" readonly />
+	</div>

-	tr:not(:last-child) {
-		@apply border-b border-b-[rgba(0,0,0,0.1)];
-	}
-</style>
+	<div>
+		<Label>Telefon</Label>
+		<input type="text" readonly />
+	</div>
+
+	<div>
+		<Label>E-Mail</Label>
+		<input type="text" readonly />
+	</div>
+
+	<div>
+		<Label>PLZ und Ort</Label>
+		<input type="text" readonly />
+	</div>
+
+	<hr />
+
+	<div>
+		<Label>Versandempfänger</Label>
+		<input type="text" readonly />
+	</div>
+
+	<div>
+		<Label>Zusatzzeile</Label>
+		<input type="text" readonly />
+	</div>
+
+	<div>
+		<Label>Strasse</Label>
+		<input type="text" readonly />
+	</div>
+
+	<div>
+		<Label>PLZ und Ort</Label>
+		<input type="text" readonly />
+	</div>
+</div>
--- a/src/components/Kaufabschluss/PriceContainer.svelte
+++ b/src/components/Kaufabschluss/PriceContainer.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import AnsichtsausweisButton from "../AnsichtsausweisButton.svelte";
-	import DatenblattButton from "../DatenblattButton.svelte";
-
 	export let prices: number[];

 	let basePrice: number = prices[0];
@@ -10,21 +7,88 @@
 	let SameDayService: boolean;
 	let TelephoneAdvice: boolean;

-	$: price = basePrice + (Printing ? 9 : 0) + (Aushang ? 10 : 0) + (SameDayService ? 29 : 0) + (TelephoneAdvice ? 75 : 0);
+	$: price =
+		basePrice +
+		(Printing ? 9 : 0) +
+		(Aushang ? 10 : 0) +
+		(SameDayService ? 29 : 0) +
+		(TelephoneAdvice ? 75 : 0);
 </script>

-<div class="GRB">
+<div>
+	<div class="yellow-box flex flex-col gap-4">
+		<div class="flex flex-col gap-2 test-box">
+			<strong>A - Prüfung der Ausweisart</strong>
+			<div>
+				<span>Vermietung, Verkauf oder sonstiges</span>
+			<span>Baujahr Heizung nicht kleiner als Baujahr Gebäude</span><span
+				>Baujahr nach 1977 oder saniert oder mehr als 4 Wohneinheiten</span
+			><span>Heizung min. 3 Jahre alt</span><span
+				>Verbrauchsausweis zulässig</span
+			>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2 test-box">
+			<strong>B - Prüfung der Adresse, Wohnfläche, Keller und Dach</strong
+			>
+			<div>
+				<span>PLZ gültig</span><span>Klimafaktorern</span><span
+				>Wohnfläche passt zu Wohneinheiten</span
+			>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2 test-box">
+			<strong>C - Prüfung der Verbrauchsangaben</strong>
+			<div>
+				<span>Verbrauchsmenge schlüssig</span><span
+				>Verbrauchsabweichung im Rahmen</span
+			><span>Endenergieverbrauch schlüssig</span>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2 test-box">
+			<strong
+				>D - Prüfung Warmwasser und alternative Energieversorgung</strong
+			>
+			<div>
+				<span>Warmwasseranteil schlüssig</span>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2 test-box">
+			<strong
+				>E - Prüfung von Gebäudetyp, Lüftung, Kühlung und Leerstand</strong
+			>
+			<div>
+				<span>Leerstand nicht größer als 30%</span>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2 test-box">
+			<strong
+				>F - Prüfung des Sanierungsstandes und der Gebäudebilder</strong
+			>
+			<div>
+				<span>Mindestens ein Bild pro Abschnitt vorhanden</span><span
+				>Angaben zum Sanierungsstand vorhanden</span
+			><span
+				>Bei Baujahr vor 1978 Dach oder Geschossdecke min. 12 cm gedämmt</span
+			>
+			</div>
+		</div>
+	</div>
+	<hr />
+	<div class="yellow-box flex flex-col gap-4">
 		<table>
 			<tr>
 				<td><strong>Produkt:</strong></td>
-			<td><strong>Verbrauchsausweis</strong></td>
+				<td
+					><div class="bg-white p-2 border border-gray-300">
+						Verbrauchsausweis
+					</div></td
+				>
 			</tr>
 			<tr>
 				<td><strong>Beschreibung:</strong></td>
 				<td>
-				<div
-					style="background-color: #fff; padding:1em; border:1px solid #ccc;"
-				>
+					<div class="bg-white p-2 border border-gray-300">
 						Registrierung beim DiBt<br />
 						Prüfung durch Diplom Ingenieur<br />
 						Energieausweis Vorschau als PDF<br />
@@ -34,25 +98,31 @@
 			<tr>
 				<td>Netto-Preis</td>
 				<td
-				><strong>{(price * 0.81).toFixed(2) + "€"}</strong></td
+					><div class="bg-white p-2 border border-gray-300">
+						{(price * 0.81).toFixed(2) + "€"}
+					</div></td
 				>
 			</tr>
 			<tr>
 				<td>19% gesetzl. MwSt.</td>
 				<td
-				><strong>{(price * 0.19).toFixed(2) + "€"}</strong></td
+					><div class="bg-white p-2 border border-gray-300">
+						{(price * 0.19).toFixed(2) + "€"}
+					</div></td
 				>
 			</tr>
 			<tr>
 				<td>Preis inkl. MwSt.</td>
 				<td
-				><strong>{price + "€"}</strong>
+					><div class="bg-white p-2 border border-gray-300">
+						<strong>{price + "€"}</strong>
+					</div>
 				</td>
 			</tr>
 		</table>
-
+	</div>
 	<hr />
-	<div>
+	<div class="yellow-box flex flex-col gap-4">
 		<strong
 			>Hiermit bestelle ich folgende Version des Energieausweises:<br
 			/></strong
@@ -65,7 +135,13 @@
 					per E-Mail</td
 				>
 				<td
-					><input type="radio"  bind:group={basePrice} value={prices[0]} name="Preis"  checked />
+					><input
+						type="radio"
+						bind:group={basePrice}
+						value={prices[0]}
+						name="Preis"
+						checked
+					/>
 				</td>
 			</tr>
 			<tr>
@@ -73,19 +149,34 @@
 					>Verbrauchsausweis online inkl. Beratung für {prices[1]}
 					€ inkl. MwSt. als PDF per E-Mail</td
 				>
-				<td><input type="radio" bind:group={basePrice} value={prices[1]} name="Preis" /> </td>
+				<td
+					><input
+						type="radio"
+						bind:group={basePrice}
+						value={prices[1]}
+						name="Preis"
+					/>
+				</td>
 			</tr><tr>
 				<td
 					>Verbrauchsausweis offline für {prices[2]} € inkl. MwSt. als
 					PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
 				>
-				<td><input type="radio" bind:group={basePrice} value={prices[2]} name="Preis" /></td>
+				<td
+					><input
+						type="radio"
+						bind:group={basePrice}
+						value={prices[2]}
+						name="Preis"
+					/></td
+				>
 			</tr>
 		</table>
 	</div>

 	<hr />

+	<div class="yellow-box flex flex-col gap-4">
 		<table>
 			<strong>Zusatzleistungen:<br /></strong>

@@ -105,8 +196,8 @@
 			</tr>
 			<tr>
 				<td
-				>Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben) für
-				10€ inkl. MwSt.</td
+					>Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben)
+					für 10€ inkl. MwSt.</td
 				>
 				<td
 					><input
@@ -120,7 +211,8 @@
 			<tr>
 				<td
 					>Same Day Service (Bestellung Werktags vor 12:00 Uhr -
-				Ausstellung bis 18:00 Uhr am gleichen Tag) für 29€ inkl. MwSt.</td
+					Ausstellung bis 18:00 Uhr am gleichen Tag) für 29€ inkl.
+					MwSt.</td
 				>
 				<td
 					><input
@@ -132,7 +224,9 @@
 				</td>
 			</tr>
 			<tr>
-			<td>Telefonische Energieeffizienzberatung für 75€ inkl. MwSt.</td>
+				<td
+					>Telefonische Energieeffizienzberatung für 75€ inkl. MwSt.</td
+				>
 				<td
 					><input
 						type="checkbox"
@@ -143,11 +237,11 @@
 				</td>
 			</tr>
 		</table>
-
-	<hr />
-
-	<div class="flex flex-row gap-4">
-		<AnsichtsausweisButton />
-		<DatenblattButton />
 	</div>
 </div>
+
+<style>
+	.test-box div {
+		@apply flex flex-col gap-1.5;
+	}
+</style>
--- a/src/components/LanguageDropdown.svelte
+++ b/src/components/LanguageDropdown.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import "/node_modules/flag-icons/css/flag-icons.min.css";
+
+	export let open = false;
+	export let countries: { iso: string; name: string, flag: string }[] = [];
+	export let current: string;
+	export let localized: {lang: string, path: string}[];
+</script>
+
+<div class="relative">
+	<button on:click={() => open = !open} class="py-1 px-2.5 rounded-lg bg-white hover:bg-gray-100 shadow-md">
+		<span class={`fi fis fi-${countries.find((x) => x.iso == current)?.flag}`} />
+	</button>
+	{#if open}
+		<div class="absolute right-0 top-full z-10 rounded-lg grid grid-cols-2 gap-2 bg-white w-[240px] shadow-md">
+			{#each countries as country}
+				<button on:click={() => {
+					let path = localized.find((l) => l.lang === country.iso)?.path;
+					if (!path) return;
+					window.location.href = path;
+				}} class="block hover:bg-gray-100 cursor-pointer p-4 rounded-lg w-full text-center">
+					<span class={`fi fis fi-${country.flag}`} />
+					<span>{country.name}</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
--- a/src/components/LoginView.svelte
+++ b/src/components/LoginView.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
+	import i18next, { t } from "i18next";
+	import HttpApi from "i18next-http-backend";
 	import cookie from "cookiejs";
 	import { addNotification } from "@ibcornelsen/ui";

+	i18next.use(HttpApi).init({
+		lng: i18next.language,
+		fallbackLng: "de",
+		backend: {
+			loadPath: "/locales/{{lng}}/{{ns}}.json",
+		}
+	})
+
 	let email: string;
 	let password: string;

@@ -18,7 +28,7 @@

 		if (json.success == true) {
 			const options = {
-				domain: ".ibcornelsen.de",
+				//domain: ".ibcornelsen.de",
 				path: "/",
 				expires: json.data.expires
 			}
--- a/src/components/SidebarLeft.astro
+++ b/src/components/SidebarLeft.astro
@@ -1,3 +1,7 @@
+---
+import { localizePath } from "astro-i18next"
+---
+
 <div class="flex flex-col gap-6">
 	<nav>
 		<div class="nav-card">
@@ -6,9 +10,9 @@
 					>Energieausweis erstellen</a
 				>
 				<div class="dropdown-content">
-					<a href="/verbrauchsausweis">Verbrauchsausweis erstellen</a>
-					<a href="/bedarfsausweis">Bedarfsausweis erstellen</a>
-					<a href="/verbrauchsausweis-gewerbe"
+					<a href={localizePath("/verbrauchsausweis")}>Verbrauchsausweis erstellen</a>
+					<a href={localizePath("/bedarfsausweis")}>Bedarfsausweis erstellen</a>
+					<a href={localizePath("/verbrauchsausweis-gewerbe")}
 						>Verbrauchsausweis Gewerbe erstellen</a
 					>
 					<a href="/bedarfsausweis-gewerbe"
--- a/src/components/SidebarRight.astro
+++ b/src/components/SidebarRight.astro
@@ -12,7 +12,7 @@
 				</h2>
 			</div>
 			<img
-				src="images/right-sidebar/telefon-1.png"
+				src="/images/right-sidebar/telefon-1.png"
 				style="width:70px; height: 73px;"
 				alt="Telefon - Rufen sie uns an."
 			/>
@@ -49,7 +49,7 @@
 		<hr style="margin-bottom:15px;" />
 		<div class="flex-column align-center">
 			<img
-				src="images/right-sidebar/wohnhaus-1.png"
+				src="/images/right-sidebar/wohnhaus-1.png"
 				alt="Verbrauchsausweis ab 45€ für Wohngebäude."
 			/>
 			<a
@@ -81,7 +81,7 @@
 		<hr style="margin-bottom:15px;" />
 		<div class="flex-column align-center">
 			<img
-				src="images/right-sidebar/wohnhaus-ba-1.png"
+				src="/images/right-sidebar/wohnhaus-ba-1.png"
 				alt="Bedarfsausweis ab 75€ für Wohngebäude"
 			/>
 			<a
@@ -114,7 +114,7 @@
 		<hr style="margin-bottom:15px;" />
 		<div class="flex-column align-center">
 			<img
-				src="images/right-sidebar/gewerbe-1.png"
+				src="/images/right-sidebar/gewerbe-1.png"
 				alt="Verbrauchsausweis Gewerbe für 65€"
 			/>
 			<a
--- a/src/components/UserSidebarLeft.astro
+++ b/src/components/UserSidebarLeft.astro
@@ -1,5 +1,5 @@
 ---
-import Settings from "~/components/Icons/Settings.svelte";
+import Settings from "#components/Icons/Settings.svelte";
 import Home from "./Icons/Home.svelte";
 ---

--- a/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte
+++ b/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-	import Progressbar from "~/components/Ausweis/Progressbar.svelte";
-	import Hilfe from "~/components/Ausweis/Hilfe.svelte";
-	import HelpLabel from "~/components/HelpLabel.svelte";
-	import Verbrauch from "~/components/Ausweis/Verbrauch.svelte";
-	import Label from "~/components/Label.svelte";
-	import Ausweisart from "~/components/Ausweis/Ausweisart.svelte";
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
+	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import Label from "#components/Label.svelte";
+	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import ZipSearch from "../ZIPSearch.svelte";
 	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
 	import moment from "moment";
@@ -17,13 +17,11 @@
 	import { AuditType, hidden } from "./audits/hidden";
 	import { auditBedarfsausweisBenoetigt } from "./audits/BedarfsausweisBenoetigt";
 	import { auditVerbrauchAbweichung } from "./audits/VerbrauchAbweichung";
-	import { Popup } from "@ibcornelsen/ui";

 	export let uid: string = "";

-	gebaeude.set(new Gebaeude());
-	$gebaeude.ausweis = new Verbrauchsausweis();
-	$gebaeude.ausweis.gebaeude = $gebaeude;
+	let gebaeude = new Gebaeude();
+	let ausweis = new Verbrauchsausweis();
 	if (uid) {
 		async () => {
 			const result = await fetch(`/api/verbrauchsausweis?uid=${uid}`, {
@@ -33,34 +31,34 @@
 			const json = await result.json();

 			if (json.success) {
-				gebaeude.set(new Gebaeude(json.data.gebaeude));
-				$gebaeude.ausweis = new Verbrauchsausweis(json.data.ausweis);
-				$gebaeude.ausweis.gebaeude = $gebaeude;
+				gebaeude = new Gebaeude(json.data.gebaeude);
+				ausweis = new Verbrauchsausweis(json.data.ausweis);
 			}
 		};
 	}

-	$: ausweis = $gebaeude.ausweis || new Verbrauchsausweis();
-
 	function automatischAusfüllen() {
-		$gebaeude.baujahr = [1962];
+		gebaeude.baujahr = [1962];
 		ausweis.baujahr_anlage = [1952];
-		$gebaeude.saniert = true;
-		$gebaeude.einheiten = 1;
+		gebaeude.saniert = true;
+		gebaeude.einheiten = 1;
 		ausweis.ausstellgrund = "Vermietung";
 		ausweis.kennwerte.verbrauch_1 = 15000;
 		ausweis.kennwerte.verbrauch_2 = 14000;
 		ausweis.kennwerte.verbrauch_3 = 16000;
-		$gebaeude.wohnflaeche = 152;
-		$gebaeude.keller_beheizt = true;
+		gebaeude.wohnflaeche = 152;
+		gebaeude.keller_beheizt = true;
 		ausweis.kennwerte.energietraeger_1 = "Erdgas H";
 		ausweis.kennwerte.einheit_1 = "kWh";
 		ausweis.kennwerte.anteil_warmwasser_1 = 18;
 		ausweis.kennwerte.zeitraum = moment("12.01.2019");
-		$gebaeude.plz = "21039";
-		$gebaeude.ort = "Hamburg";
-		$gebaeude.strasse = "Curslacker Deich 170";
-		$gebaeude.gebaeudeteil = "Gesamtgebäude";
+		gebaeude.plz = "21039";
+		gebaeude.ort = "Hamburg";
+		gebaeude.strasse = "Curslacker Deich 170";
+		gebaeude.gebaeudeteil = "Gesamtgebäude";
+
+		gebaeude = gebaeude;
+		ausweis = ausweis;
 	}
 </script>

@@ -93,7 +91,7 @@

 		<Label>A - Prüfung der Ausweisart</Label>

-		<Ausweisart bind:gebaeude={$gebaeude} />
+		<Ausweisart bind:gebaeude={gebaeude} bind:ausweis={ausweis} />

 		<hr />

@@ -118,7 +116,7 @@
 						required
 						data-msg-minlength="min. 5 Zeichen"
 						data-msg-maxlength="max. 40 Zeichen"
-						bind:value={$gebaeude.strasse}
+						bind:value={gebaeude.strasse}
 					/>
 				</div>
 			</div>
@@ -126,8 +124,8 @@
 			<!-- PLZ -->
 			<div class="form-group col-md-4 PLZ">
 				<ZipSearch
-					bind:zip={$gebaeude.plz}
-					bind:city={$gebaeude.ort}
+					bind:zip={gebaeude.plz}
+					bind:city={gebaeude.ort}
 					name="zip"
 				/>
 			</div>
@@ -141,7 +139,7 @@
 					<input
 						name="IGort"
 						readonly={true}
-						bind:value={$gebaeude.ort}
+						bind:value={gebaeude.ort}
 						type="text"
 					/>
 				</div>
@@ -163,7 +161,7 @@
 						autocomplete="off"
 						data-rule-minlength="2"
 						data-msg-minlength="min. 2 Zeichen"
-						bind:value={$gebaeude.wohnflaeche}
+						bind:value={gebaeude.wohnflaeche}
 					/>
 				</div>
 			</div>
@@ -175,7 +173,7 @@
 					<select
 						name="IGkeller"
 						required
-						bind:value={$gebaeude.keller_beheizt}
+						bind:value={gebaeude.keller_beheizt}
 					>
 						<option>Bitte auswählen</option>
 						<option value={false}>nicht vorhanden</option>
@@ -204,7 +202,7 @@
 		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>

 		<div class="GRB">
-			<Verbrauch bind:gebaeude={$gebaeude} />
+			<Verbrauch bind:gebaeude={gebaeude} bind:ausweis={ausweis} />
 		</div>

 		<hr />
@@ -278,7 +276,7 @@
 						><input
 							type="checkbox"
 							name="IGversorgungssysteme1"
-							bind:checked={$gebaeude.energiequelle_2_nutzung[0]}
+							bind:checked={gebaeude.energiequelle_2_nutzung[0]}
 							value="Heizung"
 						/>Heizung</label
 					>
@@ -286,7 +284,7 @@
 						><input
 							type="checkbox"
 							name="IGversorgungssysteme2"
-							bind:checked={$gebaeude.energiequelle_2_nutzung[1]}
+							bind:checked={gebaeude.energiequelle_2_nutzung[1]}
 							value="Warmwasser"
 						/>Warmwasser</label
 					>
@@ -294,7 +292,7 @@
 						><input
 							type="checkbox"
 							name="IGversorgungssysteme3"
-							bind:checked={$gebaeude.energiequelle_2_nutzung[2]}
+							bind:checked={gebaeude.energiequelle_2_nutzung[2]}
 							value="Lüftung"
 						/>Lüftung</label
 					>
@@ -302,7 +300,7 @@
 						><input
 							type="checkbox"
 							name="IGversorgungssysteme4"
-							bind:checked={$gebaeude.energiequelle_2_nutzung[3]}
+							bind:checked={gebaeude.energiequelle_2_nutzung[3]}
 							value="Kühlung"
 						/>Kühlung</label
 					>
@@ -441,7 +439,7 @@
 			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
 			Gebäudes</Label
 		>
-		<BilderZusatzsysteme gebaeude={$gebaeude} />
+		<BilderZusatzsysteme gebaeude={gebaeude} />
 		<hr />
 		<div class="flex flex-row justify-between">
 			<Hilfe />
@@ -450,11 +448,6 @@
 	</fieldset>
 </form>

-<Popup hidden={false} heading={"Einen Kurzen Moment"}>
-	<p>Moin! Wir bitten sie um einen kurzen Augenblick, um ein paar Fragen zu beantworten und unseren Service zu verbessern.</p>
-	<span>1. Sind sie zufrieden mit der Gestaltung unserer Webseite?</span>
-	<textarea placeholder="Kommentar..."></textarea>
-</Popup>

 <RawNotificationWrapper>
 	{#each Object.entries($notifications) as [uid, notification] (uid)}
@@ -463,7 +456,7 @@
 		</RawNotification>
 	{/each}

-	{#if auditBedarfsausweisBenoetigt($gebaeude)}
+	{#if auditBedarfsausweisBenoetigt(gebaeude)}
 		<RawNotification
 			notification={{
 				message: "Bedarfsausweis benötigt!",
@@ -479,7 +472,7 @@
 		</RawNotification>
 	{/if}

-	{#if auditHeizungGebaeudeBaujahr($gebaeude)}
+	{#if auditHeizungGebaeudeBaujahr(gebaeude)}
 		<RawNotification
 			notification={{
 				message: "Plausibilitätsprüfung",
@@ -488,7 +481,7 @@
 				dismissable: true,
 				onUserDismiss: () => {
 					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
-					$gebaeude = $gebaeude;
+					gebaeude = gebaeude;
 				},
 				type: "warning",
 			}}
@@ -498,7 +491,7 @@
 		</RawNotification>
 	{/if}

-	{#if auditVerbrauchAbweichung($gebaeude).length > 0}
+	{#if auditVerbrauchAbweichung(gebaeude).length > 0}
 		<RawNotification
 			notification={{
 				message: "Plausibilitätsprüfung",
@@ -507,14 +500,14 @@
 				dismissable: true,
 				onUserDismiss: () => {
 					hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
-					$gebaeude = $gebaeude;
+					gebaeude = gebaeude;
 				},
 				type: "warning",
 			}}
 		>
 			Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(
-				$gebaeude
-			)[0]} und {auditVerbrauchAbweichung($gebaeude)[1]} beträgt mehr als 25%
+				gebaeude
+			)[0]} und {auditVerbrauchAbweichung(gebaeude)[1]} beträgt mehr als 25%
 			und sie haben keinen Leerstand angegeben. Sind sie sich sicher, dass
 			das stimmt?
 		</RawNotification>
--- a/src/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte
+++ b/src/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-	import Progressbar from "~/components/Ausweis/Progressbar.svelte";
-	import Hilfe from "~/components/Ausweis/Hilfe.svelte";
-	import HelpLabel from "~/components/HelpLabel.svelte";
-	import Verbrauch from "~/components/Ausweis/Verbrauch.svelte";
-	import Label from "~/components/Label.svelte";
-	import Ausweisart from "~/components/Ausweis/Ausweisart.svelte";
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
+	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import Label from "#components/Label.svelte";
+	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import ZipSearch from "../ZIPSearch.svelte";
 	import { buildingTypes } from "./BuildingTypes";
 	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,3 @@
 /// <reference types="astro/client" />
+
+/// <reference path="../.astro-i18n/generated.d.ts" />
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -131,6 +131,16 @@ const schema = JSON.stringify({
 		);
 	}

+	.yellow-box {
+		@apply border-2 border-[#ffcc03] p-4 rounded-lg;
+		background: linear-gradient(
+			135deg,
+			rgba(252, 234, 187, 1) 0%,
+			rgba(253, 235, 189, 1) 52%,
+			rgba(251, 223, 147, 1) 100%
+		);
+	}
+
 	.GRB3 {
 		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
 		background: linear-gradient(
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,7 @@
 ---
+import i18next from "i18next";
+import { HeadHrefLangs } from "astro-i18next/components";
+
 import "../style/global.scss";
 import Footer from "../components/Footer.astro";
 import Header from "../components/Header.astro";
@@ -39,7 +42,7 @@ const schema = JSON.stringify({
 ---

 <!DOCTYPE html>
-<html lang="en">
+<html lang={i18next.language}>
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
@@ -94,7 +97,7 @@ const schema = JSON.stringify({
 			class="grid gap-6 p-6 grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full"
 		>
 			<SidebarLeft />
-			<article class="mainContent">
+			<article>
 				<slot />
 			</article>
 			<SidebarRight />
--- 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/fuelList";

 export function getHeizungswerte(
 	energietraeger: string,
--- 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/fuelList";

 export const getHeizwertfaktorClient = function(energietraeger: string, einheit: string): {
 	coe: number,
--- a/src/lib/server/Klimafaktoren.ts
+++ b/src/lib/server/Klimafaktoren.ts
@@ -1,3 +1,3 @@
 export async function getKlimafaktorenServer(date: Date, zip: string) {
 	
-};
+}
--- a/src/pages/api/image.json.ts
+++ b/src/pages/api/image.json.ts
@@ -91,7 +91,7 @@ export const put: APIRoute = async ({ request }) => {
 		return ActionFailedError();
 	}

-	const location = path.join("uploads", `${result[0].uid}.jpg`);
+	const location = path.join("/persistent/uploads", `${result[0].uid}.jpg`);

 	const buffer = await jimpResult.getBufferAsync(jimp.MIME_JPEG)

--- a/src/pages/api/login.ts
+++ b/src/pages/api/login.ts
@@ -18,6 +18,9 @@ export const post: APIRoute = async ({ request }) => {

 	const user = await User.fromEmail(body.email);

+	console.log(user);
+	
+
 	if (!user) {
 		return error(["Invalid email or password."]);
 	}
--- a/src/pages/bedarfsausweis-gewerbe/index.astro
+++ b/src/pages/bedarfsausweis-gewerbe/index.astro
--- a/src/pages/bedarfsausweis/index.astro
+++ b/src/pages/bedarfsausweis/index.astro
@@ -1,8 +1,9 @@
 ---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent.svelte";

-import AusweisLayout from "~/layouts/AusweisLayout.astro";
-
-import BedarfsausweisContent from "~/components/Bedarfsausweis/BedarfsausweisContent.svelte";
+changeLanguage("de");
 ---
 <AusweisLayout title="Bedarfsausweis erstellen | IBCornelsen">
 	<BedarfsausweisContent client:load></BedarfsausweisContent>
--- a/src/pages/developers/index.astro
+++ b/src/pages/developers/index.astro
@@ -1,6 +1,8 @@
 ---
-import Layout from "~/layouts/Layout.astro"
+import { changeLanguage } from "i18next";
+import Layout from "#layouts/Layout.astro";

+changeLanguage("de");
 ---

 <Layout title="Für Entwickler - IBCornelsen">
--- a/src/pages/en/bedarfsausweis/index.astro
+++ b/src/pages/en/bedarfsausweis/index.astro
@@ -0,0 +1,10 @@
+---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent.svelte";
+
+changeLanguage("en");
+---
+<AusweisLayout title="Bedarfsausweis erstellen | IBCornelsen">
+	<BedarfsausweisContent client:load></BedarfsausweisContent>
+</AusweisLayout>
--- a/src/pages/en/consumption-certificate/erstellen.astro
+++ b/src/pages/en/consumption-certificate/erstellen.astro
@@ -0,0 +1,6 @@
+---
+import Page from "../../verbrauchsausweis/erstellen.astro"
+const { props } = Astro
+---
+
+<Page {...props} />
--- a/src/pages/en/consumption-certificate/index.astro
+++ b/src/pages/en/consumption-certificate/index.astro
@@ -0,0 +1,6 @@
+---
+import Page from "../../verbrauchsausweis/index.astro"
+const { props } = Astro
+---
+
+<Page {...props} />
--- a/src/pages/en/developers/index.astro
+++ b/src/pages/en/developers/index.astro
@@ -0,0 +1,11 @@
+---
+import { changeLanguage } from "i18next";
+import Layout from "#layouts/Layout.astro";
+
+changeLanguage("en");
+---
+
+<Layout title="Für Entwickler - IBCornelsen">
+	<h1>Warum das IBCornelsen?</h1>
+	<p>Unser Unternehmen bietet eine weite Auswahl an Schnittstellen und damit einhergehenden Daten. Unsere API bietet uneingeschränkten Zugang zu Immobilien, Verbrauchsdaten und vielem Weiteren.</p>
+</Layout>
--- a/src/pages/en/faq/index.astro
+++ b/src/pages/en/faq/index.astro
@@ -0,0 +1,8 @@
+---
+import { changeLanguage } from "i18next";
+import Layout from "#layouts/Layout.astro";
+
+changeLanguage("en");
+---
+
+<Layout title="FAQ - IBCornelsen"></Layout>
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -0,0 +1,366 @@
+---
+import { changeLanguage } from "i18next";
+import { BoxWithHeading } from "@ibcornelsen/ui";
+import Widget from "#components/Widget.svelte";
+import Layout from "#layouts/Layout.astro";
+import FeatureCard from "#components/FeatureCard.svelte";
+
+changeLanguage("en");
+---
+
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
+	<h1>Energieausweis online erstellen</h1>
+
+	<Widget client:load />
+
+	<h2>GEG gilt ab 1. Mai 2021 und löst die EnEV ab</h2>
+	<BoxWithHeading heading="Folgende Punkte ändern sich:">
+		<ul>
+			<li>
+				Erhöhte Sorgfaltspflicht bei der Erstellung der Energieausweise.
+				Insbesondere zur Einschätzung der Modernisierungsempfehlungen
+				werden jetzt Fotos der relevanten Bereiche von Dach, Fenster,
+				Heizung und Außenwand benötigt.
+			</li>
+			<li>
+				Die Primärenergiefaktoren zur Ermittlung des Gebäudekennwerts
+				werden jetzt direkt im GEG (§22 Primärenergiefaktoren) geregelt.
+				Dadurch wird mehr Transparenz und Nachvollziehbarkeit
+				geschaffen. Auch findet die Verwendung von Biogas aus dem
+				Erdgasnetz jetzt angemessen Berücksichtigung.
+			</li>
+			<li>
+				Die lokale Erzeugung von Strom über eine PV-Anlage wird besser
+				berücksichtigt und kann vom Jahres-Primärenergiebedarf abgezogen
+				werden (bis 45%).
+			</li>
+			<li>
+				Die Angabe der CO2-Emission des Gebäudes im Energieausweis wird
+				verplichtend eingeführt.
+			</li>
+		</ul>
+	</BoxWithHeading>
+
+	<h2>
+		Energieausweis nach aktueller GEG (vormals EnEV) geprüft vom Diplom
+		Ingenieur
+	</h2>
+	<div class="right-img">
+		<img
+			title="Energieausweis online erstellen"
+			src="images/Bedarfsausweis-Wohngebaeude-Beispiel.jpg"
+			alt="Energieausweis online erstellen"
+		/>
+	</div>
+	<hr />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"
+		>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.
+	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
+	folgender Nummer: 040/209 339 850 zur Verfügung.
+	<hr />Mit dem <strong>Energieausweis</strong> werden Wohngebäude und Nichtwohngebäude
+	nach den Vorgaben der Energieeinsparverordnung <a
+		href="/enev-zusammenfassung">EnEV</a
+	>
+	energetisch bewertet. Das <a href="https://www.dibt.de/" target="blank"
+		>DIBt</a
+	>
+	(Deutsches Institut für Bautechnik) regelt die Grundsätze zur Ausstellung, Berechnung
+	und der Qualitätssicherung. Der Energieausweis beschreibt die entsprechenden
+	Energiekennwerte auf einer Farbskala, grün (A+/Effizienzhaus), gelb (D) und rot
+	(H / unsaniert). Es wird grundsätzlich zwischen zwei Energieausweisarten unterschieden:
+	<hr />
+	<div
+		style="border-left: 5px solid #f5b68c; border-right: 5px solid #f5b68c;"
+	>
+		<ul id="start_ul">
+			<li>
+				Der verbrauchsbasierte Energieausweis wird als <a
+					title="Verbrauchsausweis"
+					href="/verbrauchsausweis/"
+					><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"
+					>Energieausweis online erstellen</a
+				>
+				<hr />
+			</li>
+			<li>
+				Der bedarfsbasierte Energieausweis wird als <a
+					title="Bedarfsausweis"
+					href="/bedarfsausweis/"><strong>Bedarfsausweis</strong></a
+				>bezeichnet. Dies ist der „große“ Energieausweis und kann immer
+				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"
+					>Energieausweis online erstellen</a
+				>
+			</li>
+		</ul>
+	</div>
+	<hr />
+	<div class="grid grid-cols-3 gap-4">
+		<FeatureCard heading="Verbrauchsausweis Wohngebäude" price={45} href="/verbrauchsausweis">
+			<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>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
+			<div class="rpt_feature">Registrierung beim DiBt</div>
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
+			<div class="rpt_feature">rechtssicher nach aktueller EnEV</div>
+			<div class="rpt_feature">telefonische Beratung</div>
+		</FeatureCard>
+		<FeatureCard heading="Bedarfsausweis Wohngebäude" price={75} href="/bedarfsausweis">
+			<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>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
+			<div class="rpt_feature">Registrierung beim DiBt</div>
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
+			<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">
+			<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>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
+			<div class="rpt_feature">Registrierung beim DiBt</div>
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
+			<div class="rpt_feature">rechtssicher nach aktueller EnEV</div>
+			<div class="rpt_feature">telefonische Beratung</div>
+		</FeatureCard>
+	</div>
+	<hr />
+
+	<h2>Unterschied: Verbrauchsausweis und Bedarfsausweis</h2> Grundsätzlich unterscheidet
+	man beim Energieausweis zwischen Verbrauchsausweis und Bedarfsausweis.<h3>
+		Was ist ein Verbrauchsausweis?
+	</h3>
+	Der Verbrauchsausweis gibt den Energieverbrauch der Gebäudebewohner in den vergangenen
+	drei Jahren für Heizung und Warmwasserbereitung an. Um den <a
+		href="/enev-zusammenfassung#§-19-EnEV"
+		>Energieverbrauchskennwert zu ermitteln</a
+	>, wird der tatsächliche Energieverbrauch mithilfe eines standortbezogenen
+	Klimafaktors bereinigt. Der Durchschnittswert wird dann durch die sogenannte
+	energetische Gebäudenutzfläche (An) geteilt. So führt beispielsweise ein
+	hoher Verbrauch in einem einzelnen harten Winter nicht zu einer schlechteren
+	Beurteilung des Gebäudes. Der tatsächliche Energieverbrauch in einem Gebäude
+	oder einer Wohnung kann aufgrund des Witterungseinflusses vom
+	Energieverbrauchskennwert abweichen.Das Ergebnis im Verbrauchsausweis ist
+	stark vom individuellen Nutzungsverhalten der Bewohner abhängig. Wird in
+	einem energetisch schlechten Gebäude kaum geheizt, so kann der
+	Energieausweis trotzdem sehr gut ausfallen.<h3>
+		Was ist ein Bedarfsausweis?
+	</h3> Der Bedarfsausweis entsteht auf Grundlage einer technischen <a
+		href="/enev-zusammenfassung#§-18-EnEV"
+		>Analyse der Bausubstanz und der Heizungsanlage eines Gebäudes</a
+	> und ist unabhängig vom individuellen Nutzerverhalten. Die Farbverlaufsskala
+	im Bedarfsausweis weist zwei verschiedene Werte aus, die sehr unterschiedlich
+	ausfallen können – einen Wert für den Endenergiebedarf und einen für den Primärenergiebedarf.
+	Zusätzlich wird noch ein Kennwert für die energetische Qualität der Gebäudehülle
+	dargestellt.Der Energiebedarf gibt die nach technischen Regeln berechnete, vom
+	konkreten Gebäude jährlich benötigte Energiemenge für Heizung, Lüftung und Warmwasserbereitung
+	an. Dabei werden bei der Berechnung standardisierte Randbedingungen – beispielsweise
+	eine Innentemperatur von 19 Grad im beheizten Bereich des Gebäudes – zugrunde
+	gelegt. Am Endenergiebedarf sollten sich Hausbewohner orientieren, wenn sie ihren
+	künftigen Energieverbrauch und die Energiekosten abschätzen wollen.Der Primärenergiebedarf
+	bildet die Gesamtenergieeffizienz eines Gebäudes ab. Er berücksichtigt neben
+	der Endenergie auch die so genannte „Vorkette“ (Erkundung, Gewinnung, Verteilung,
+	Umwandlung) der jeweils eingesetzten Energieträger (z.B. Heizöl, Gas, Strom,
+	erneuerbare Energien).Besonders niedrig fällt der Primärenergiebedarf aus, wenn
+	erneuerbare Energien (solare Strahlungsenergie, Geothermie, Energie aus Biomasse)
+	für die Energieversorgung im Gebäude eingesetzt werden. Am Primärenergiebedarf
+	können Verbraucher erkennen, wie umweltfreundlich ihr Gebäude ist.<h3>
+		Fazit – Verbrauchsausweis / Bedarfsausweis
+	</h3> Geht es um den tatsächlichen Verbrauch der Energie, der den Aufwand für
+	Heizung und zentrale Warmwasserbereitung der vergangenen drei Jahre berücksichtigt,
+	wird der Energieverbrauchskennwert für den Verbrauchsausweis ermittelt. Bei gewerblichen
+	Objekten wird zusätzlich der Verbrauch für Beleuchtung und Klimatisierung mit
+	eingerechnet. Anhand der Zeiträume und der Lage des Gebäudes (Postleitzahl) werden
+	diese Daten ausgewertet und sowohl zeit-, als auch klimabereinigt zur Bewertung
+	der vorhandenen energetischen Qualität herangezogen.Für das Ausstellen des Bedarfsausweis
+	wird der rechnerische Energiebedarf unter standardisierten Randbedingungen benötigt.
+	Daten rund um Bausubstanz, Gebäudehülle und Heizanlage fließen in die Berechnung
+	mit ein. Bedarfsausweise widerspiegeln die tatsächliche energetische Qualität
+	eines Gebäudes damit wesentlich besser als die Verbrauchsausweise.
+
+	<hr />
+	<div class="start_infobox" title="Verbrauchsausweis Wohngebäude">
+		<div class="start_infobox_inside IB_VA_WG">
+			<img
+				alt="Energieausweis online erstellen - Verbrauchsausweis"
+				title="Energieausweis online erstellen - Verbrauchsausweis"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis.png"
+			/>
+			<div class="title">Verbrauchsausweis Wohngebäude</div>
+			<hr />
+			<ul>
+				<li>
+					3 zusammenhängende Heizenergieverbräuche müssen eingegeben
+					werden.
+				</li>
+				<li>
+					Wohnfläche, Baujahr Gebäude und Baujahr Heizung müssen
+					eingegeben werden.
+				</li>
+				<li>
+					<div class="start_infobox_link">
+						<a
+							title="Verbrauchsausweis"
+							href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude.php"
+							>Verbrauchsausweis</a
+						>
+						bei fast allen Gebäuden möglich. (Baujahr &gt; 1977 - Vermietung/Verkauf)
+					</div>
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					title="Verbrauchsausweis erstellen"
+					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+					>Jetzt Verbrauchsausweis erstellen</a
+				>
+			</div>
+		</div>
+	</div>
+	<div class="start_infobox BA-WG" title="Bedarfssausweis Wohngebäude">
+		<div class="start_infobox_inside">
+			<img
+				alt="Energieausweis online erstellen - Bedarfsausweis"
+				title="Energieausweis online erstellen - Bedarfsausweis"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis.png"
+			/>
+			<div class="title">Bedarfsausweis Wohngebäude</div>
+			<hr />
+			<ul>
+				<li>
+					Die verwendete Heizungsanlage (Standardkessel,
+					Brennwertkessel, etc.) muß eingegeben werden.
+				</li>
+				<li>
+					Grundrissgeometrie sowie Baujahr Heizung und Gebäude müssen
+					eingegeben werden.
+				</li>
+				<li>
+					<a
+						title="Bedarfsausweis"
+						href="/bedarfsausweis/bedarfsausweis-wohngebaeude.php"
+						>Bedarfsausweis</a
+					> bei allen Gebäuden möglich. Die Berechnung ist umfangreicher
+					und besser vergleichbar.
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					title="Bedarfsausweis erstellen"
+					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+					>Jetzt Bedarfsausweis erstellen</a
+				>
+			</div>
+		</div>
+	</div>
+	<div class="start_infobox VANW_WG" title="Bedarfsausweis Gewerbe">
+		<div class="start_infobox_inside">
+			<img
+				alt="Energieausweis online erstellen - Bedarfsausweis Gewerbe"
+				title="Energieausweis online erstellen - Bedarfsausweis Gewerbe"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis-gewerbe.png"
+			/>
+			<div class="title">Bedarfsausweis Gewerbe</div>
+			<hr />
+			<ul>
+				<li>
+					Aktuelle Grundriss- und Ansichtspläne werden für die
+					Zonierung benötigt.
+				</li>
+				<li>
+					Baubeschreibung (z.B. aus der Baugenehmigung) mit Angabe der
+					verwendeten Baustoffe und TGA.
+				</li>
+				<li>
+					Angabe vom Baujahr der Heizung, Gebäude und Klimaanlage.
+				</li>
+				<li>
+					<a
+						title="Bedarfsausweis Gewerbe"
+						href="/bedarfsausweis/bedarfsausweis-gewerbe.php"
+						>Bedarfsausweis Gewerbe</a
+					> bei allen Nichtwohngebäuden möglich (kann immmer verwendet
+					werden).
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen.php"
+					title="Bedarfsausweis Gewerbe anfragen"
+					>Jetzt Bedarfsausweis Gewerbe anfragen</a
+				>
+			</div>
+		</div>
+	</div>
+
+	<hr />
+	<h2>Energieausweis online erstellen</h2> Soll Wohneigentum veräußert oder bauliches
+	Teileigentum zum Erwerb angeboten werden, muss dem möglichen Käufer oder Leasingnehmer
+	auf Verlangen unverzüglich ein
+	<a href="enev-zusammenfassung#§-16a-EnEV">Energieausweis gezeigt werden</a>.
+	In den meisten Fällen ist hier ein Verbrauchsausweis ausreichend. Auch
+	Mietern oder Pächtern soll der Energieausweis unmittelbaren Aufschluss über
+	die energetischen Bedingungen des Gebäudes aufzeigen.Kommt der Anbieter der
+	offerierten Immobilie diesem Auftrag nach der Energieeinsparverordnung nicht
+	nach, drohen Bußgelder bis zu 15 000 Euro. Als Ausnahmen gelten Gebäude mit
+	nicht mehr als 50 m² Fläche sowie Baudenkmäler (<a
+		href="enev-zusammenfassung#§-16-EnEV">§ 16 Abs. 4 EnEV</a
+	>).Die Deutsche Energie-Agentur GmbH (<a
+		href="https://www.dena.de/"
+		target="blank">dena</a
+	>) empfiehlt bei Wohngebäuden generell den Bedarfsausweis. Er erlaubt eine
+	nutzerunabhängige Bewertung des Gebäudes. Zusätzlich können bei der
+	Erstellung eines Bedarfsausweises die Empfehlungen für Modernisierungen auf
+	der Basis einer technischen Analyse des Gebäudes ermittelt werden.
+	<hr />
+	<h2>Zusammenfassung: Was ist ein Energieausweis?</h2>
+	<ul id="start_ul_1">
+		<li>
+			Der Gesetzgeber hat zwei Arten des Energieausweises bestimmt: Den
+			Verbrauchsausweis und den Bedarfsausweis.
+		</li>
+		<li>
+			Je nach Gebäudeart, Baujahr, Nutzungsart gilt es verschiedene
+			Kriterien für den Energieausweis zu beachten.
+		</li>
+		<li>
+			Der Energieausweis ist ein Mittel, das als Starter für
+			Energiesparmaßnahmen definiert werden kann.
+		</li>
+		<li>
+			Mit Hilfe des Energieausweises kann sich der Marktwert einer
+			Immobilie erhöhen.
+		</li>
+		<li>
+			Der Energieausweis offenbart bauliche Mängel, die eine
+			Energieverschwendung mit sich bringen.
+		</li>
+		<li>
+			Im Energieausweis werden Sanierungs- bzw. Modernisierungsvorschläge
+			dokumentiert.
+		</li>
+		<li>
+			Anhand des Energiepasses lässt sich der energetische Zustand
+			verschiedener Gebäude miteinander vergleichen.
+		</li>
+	</ul>
+</Layout>
--- a/src/pages/en/kaufabschluss.astro
+++ b/src/pages/en/kaufabschluss.astro
@@ -0,0 +1,11 @@
+---
+import { changeLanguage } from "i18next";
+import Kaufabschluss from "#components/Kaufabschluss/Kaufabschluss.svelte";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+
+changeLanguage("en");
+---
+
+<AusweisLayout title="Kaufabschluss Verbrauchsausweis - IBCornelsen">
+	<Kaufabschluss client:load></Kaufabschluss>
+</AusweisLayout>
--- a/src/pages/en/kundendaten.astro
+++ b/src/pages/en/kundendaten.astro
@@ -0,0 +1,12 @@
+---
+import { changeLanguage } from "i18next";
+import Kundendaten from "#components/Ausweis/Kundendaten.svelte";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+
+changeLanguage("en");
+---
+
+<AusweisLayout title="Kundendaten Aufnehmen - IBCornelsen">
+	<Kundendaten client:load></Kundendaten>
+</AusweisLayout>
+
--- a/src/pages/en/login.astro
+++ b/src/pages/en/login.astro
@@ -0,0 +1,19 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import LoginView from "../../components/LoginView.svelte";
+import Layout from "../../layouts/Layout.astro";
+
+changeLanguage("en");
+
+const token = Astro.cookies.get("token").value;
+const expires = Astro.cookies.get("expires").number();
+const now = moment().unix();
+if (token && now < expires) {
+    return Astro.redirect(`/user`);
+}
+---
+
+<Layout title="Login">
+	<LoginView client:only></LoginView>
+</Layout>
--- a/src/pages/en/logout.astro
+++ b/src/pages/en/logout.astro
@@ -0,0 +1,9 @@
+---
+import { changeLanguage } from "i18next";
+
+changeLanguage("en");
+
+Astro.cookies.delete("token");
+Astro.cookies.delete("expires");
+return Astro.redirect("/");
+---
--- a/src/pages/en/pdf/ansichtsausweis.astro
+++ b/src/pages/en/pdf/ansichtsausweis.astro
@@ -0,0 +1,247 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import { Ausweis } from "src/lib/Ausweis";
+import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+import Checkbox from "#components/Checkbox.svelte";
+import PDFHeader from "#components/PDF/PDFHeader.svelte";
+import PDFSectionHeader from "#components/PDF/PDFSectionHeader.svelte";
+import PDFLayout from "#layouts/PDFLayout.astro";
+
+changeLanguage("en");
+
+const base64 = Astro.url.searchParams.get("base64");
+if (!base64) {
+    return Astro.redirect("/404");
+}
+const ausweis = Verbrauchsausweis.fromBase64(base64);
+if (!ausweis) {
+    return Astro.redirect("/404");
+}
+---
+
+<PDFLayout title="Ansichtsausweis">
+	<div class="flex flex-col gap-20">
+		<div class="flex flex-col gap-2">
+			<PDFHeader></PDFHeader>
+			<PDFSectionHeader number={1}>
+				<p class="text-xs">
+					Gültig bis: <span
+						>{
+							moment().add("10", "years").locale("de").format("DD. MMM. YYYY")
+						}</span>
+				</p>
+				<p class="text-xs">Ausweis ID <span>1293819</span></p>
+				<p class="text-xs">
+					Registriernummer wird nach Zahlungseingang vergeben
+				</p>
+			</PDFSectionHeader>
+			<div
+				class="border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg"
+			>
+				<h2>Gebäude</h2>
+				<div class="flex flex-col">
+					<div class="flex flex-row">
+						<table>
+							<tr>
+								<td>Gebäudetyp</td>
+								<td>{ausweis.objekt_typ}</td>
+							</tr>
+							<tr>
+								<td>Adresse</td>
+								<td>{ausweis.objekt_strasse}</td>
+							</tr>
+							<tr>
+								<td>Gebäudeteil</td>
+								<td>{ausweis.objekt_gebaeudeteil}</td>
+							</tr>
+							<tr>
+								<td>Baujahr Gebäude ³</td>
+								<td>{ausweis.baujahr_gebaeude}</td>
+							</tr>
+							<tr>
+								<td
+									>Baujahr Wärmeerzeuger <sup>3</sup>
+									<sup>4</sup></td
+								>
+								<td>{ausweis.baujahr_anlage}</td>
+							</tr>
+							<tr>
+								<td>Anzahl Wohnungen</td>
+								<td>{ausweis.anzahl_einheiten}</td>
+							</tr>
+							<tr>
+								<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
+								<td>
+									<table>
+										<tr>
+											<td>192m²</td>
+											<td
+												class="flex flex-row items-center h-full w-full gap-2 pl-2"
+											>
+												<input type="checkbox" />
+												nach § 19 EnEV aus der Wohnfläche ermittelt
+											</td>
+										</tr>
+									</table>
+								</td>
+							</tr>
+							<tr>
+								<td
+									>Wesentliche Energieträger für<br /> Heizung und
+									Warmwasser <sup>3</sup></td
+								>
+								<td>Erdgas, BraunkohleBraunkohle, Strommix</td>
+							</tr>
+						</table>
+						<div class="w-[35%]">
+							<img src="" alt="" />
+						</div>
+					</div>
+					<div>
+						<table></table>
+					</div>
+				</div>
+			</div>
+			<div class="box">
+				<h2>
+					Hinweise zu den Angaben über die energetische Qualität des
+					Gebäudes
+				</h2>
+				<div class="bg-white w-full">
+					<p>
+						Die energetische Qualität eines Gebäudes kann durch die
+						Berechnung des <strong>Energiebedarfs</strong> unter Annahme
+						von standardisierten Randbedingungen oder durch die Auswertung
+						des <strong>Energieverbrauchs</strong> ermittelt werden. Als
+						Bezugsfläche dient die energetische Gebäudenutzfläche nach der
+						EnEV, die sich in der Regel von den allgemeinen Wohnflächenangaben
+						unterscheidet. Die angegebenen Vergleichswerte sollen überschlägige
+						Vergleiche ermöglichen (<strong
+							>Erläuterungen - siehe Seite 5</strong
+						>). Teil des Energieausweises sind die
+						Modernisierungsempfehlungen (Seite 4).
+					</p>
+					<Checkbox checked={true}>
+						Der Energieausweis wurde auf der Grundlage von Berechnungen
+						des <strong>Energiebedarfs</strong> erstellt (Energiebedarfsausweis).
+						Die Ergebnisse sind auf <strong>Seite 2</strong> dargestellt.
+						Zusätzliche Informationen zum Verbrauch sind freiwillig.
+					</Checkbox>
+					<Checkbox checked={false}>
+						Der Energieausweis wurde auf der Grundlage von Auswertungen
+						des <strong>Energieverbrauchs</strong> erstellt (Energieverbrauchsausweis).
+						Die Ergebnisse sind auf <strong>Seite 3</strong> dargestellt.
+					</Checkbox>
+					<div class="flex flex-row justify-between items-center w-[80%]">
+						<p>Datenerhebung Bedarf/Verbrauch durch</p>
+						<Checkbox checked={true}>Eigentümer</Checkbox>
+						<Checkbox checked={false}>Aussteller</Checkbox>
+					</div>
+					<Checkbox>
+						Dem Energieausweis sind zusätzliche Informationen zur
+						energetischen Qualität beigefügt (freiwillige Angabe).
+					</Checkbox>
+				</div>
+			</div>
+			<div class="box">
+				<h2>Hinweise zur Verwendung des Energieausweises</h2>
+				<p class="bg-white">
+					Der Energieausweis dient lediglich der Information. Die Angaben
+					im Energieausweis beziehen sich auf das gesamte Wohngebäude oder
+					den oben bezeichneten Gebäudeteil. Der Energieausweis ist
+					lediglich dafür gedacht, einen überschlägigen Vergleich von
+					Gebäuden zu ermöglichen.
+				</p>
+			</div>
+			<div class="flex flex-row gap-2">
+				<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
+					<p>Aussteller:</p>
+				</div>
+				<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20"></div>
+			</div>
+			<div class="flex flex-row flex-wrap">
+				<p>
+					<sup>1</sup> Datum der angewendeten EnEV, gegebenenfalls angewendeten
+					Änderungsverordnung zur EnEV
+				</p>
+				<p>
+					<sup>2</sup> Bei nicht rechtzeitiger Zuteilung der Registriernummer
+					(§ 17 Absatz 4 Satz 4 und 5 EnEV) ist das Datum der Antragstellung
+					einzutragen; die Registriernummer ist nach deren Eingang nachträglich
+					einzusetzen.
+				</p>
+				<p><sup>3</sup> Mehrfachangaben möglich</p>
+				<p><sup>4</sup> bei Wärmenetzen Baujahr der Übergabestation</p>
+			</div>
+		</div>
+	
+		<div class="flex flex-col gap-2">
+			<PDFHeader></PDFHeader>
+			<PDFSectionHeader number={2}>
+				<p>Berechneter Energiebedarf des Gebäudes</p>
+			</PDFSectionHeader>
+			<div
+				class="box"
+			>
+				<h2>Energiebedarf</h2>
+				<div class="bg-white w-full flex flex-col">
+					<div class="flex flex-col items-end text-center">
+						<div class="flex flex-row">
+							<span class="bg-gray-300 p-0.5">200</span>
+							<span>kg/(m²a)</span>
+						</div>
+						<span>CO² Treibhausgas Emissionen</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</PDFLayout>
+
+<style is:global>
+	table {
+		@apply w-full h-full;
+	}
+
+	td > table td {
+		@apply px-0 py-0 border-t-0 border-b-0;
+	}
+
+	td:has(table) {
+		@apply p-0;
+	}
+
+	td > table td:first-child {
+		@apply border-l-0;
+	}
+
+	td > table td:last-child {
+		@apply border-r-0;
+	}
+
+	td {
+		@apply border border-black px-1 text-xs py-0.5;
+	}
+
+	td:not(:first-child) {
+		@apply bg-white;
+	}
+
+	h2 {
+		@apply font-bold text-sm;
+	}
+
+	p,
+	label {
+		@apply text-xs;
+	}
+
+	.box {
+		@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
+	}
+
+	.box > * {
+		@apply px-1 py-0.5;
+	}
+</style>
--- a/src/pages/en/pdf/datenblatt.astro
+++ b/src/pages/en/pdf/datenblatt.astro
@@ -0,0 +1,253 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+import { Dachgeschoss } from "src/lib/Ausweis/types";
+import Checkbox from "#components/Checkbox.svelte";
+import DatenblattFooter from "#components/DatenblattFooter.svelte";
+import DatenblattHeader from "#components/DatenblattHeader.svelte";
+import PDFHeader from "#components/PDF/PDFHeader.svelte";
+import PDFSectionHeader from "#components/PDF/PDFSectionHeader.svelte";
+import PDFLayout from "#layouts/PDFLayout.astro";
+
+changeLanguage("en");
+
+const base64 = Astro.url.searchParams.get("base64");
+if (!base64) {
+    return Astro.redirect("/404");
+}
+const ausweis = Verbrauchsausweis.fromBase64(base64);
+if (!ausweis) {
+    return Astro.redirect("/404");
+}
+---
+
+<PDFLayout title="Datenblatt">
+	<div class="flex flex-col gap-20">
+		<div class="flex flex-col gap-4">
+			<DatenblattHeader></DatenblattHeader>
+			<div class="px-12 py-20 flex flex-col gap-2">
+				<div class="flex flex-row justify-between items-center">
+					<h2>Datenblatt Energieausweis</h2>
+					<h2>Ausweis ID: </h2>
+				</div>
+				<h3>Gebäudedaten:</h3>
+				<p>Adresse: {ausweis.objekt_strasse}, {ausweis.objekt_plz} {ausweis.objekt_ort}</p>
+				<div class="flex justify-between">
+					<Checkbox checked={ausweis.ausstellgrund == "Neubau"}>Neubau</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Vermietung" || ausweis.ausstellgrund == "Verkauf"}>Vermietung/Verkauf</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Modernisierung"}>Modernisierung</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Sonstiges"}>Sonstiges</Checkbox>
+				</div>
+				<div class="flex justify-between gap-4">
+					<table>
+						<tbody><tr>
+							<td>Baujahr Gebäude:</td>
+							<td>{ausweis.baujahr_gebaeude}</td>
+						</tr>
+						<tr>
+							<td>Baujahr Heizung:</td>
+							<td>{ausweis.baujahr_anlage}</td>
+						</tr>
+						<tr>
+							<td>Wohnfläche:</td>
+							<td>{ausweis.wohnflaeche}</td>
+						</tr>
+						<tr>
+							<td>Lüftungskonzept:</td>
+							<td>{ausweis.lueftungskonzept}</td>
+						</tr>
+						<tr>
+							<td>Gebäudetyp:</td>
+							<td>{ausweis.objekt_typ}</td>
+						</tr></tbody>
+					</table>
+					<table>
+						<tbody><tr>
+							<td>Dachgeschoss:</td>
+							<td>{ausweis.dachgeschoss == Dachgeschoss.BEHEIZT ? "Beheizt" : (ausweis.dachgeschoss == Dachgeschoss.UNBEHEIZT ? "Unbeheizt" : "Nicht Vorhanden")}</td>
+						</tr>
+						<tr>
+							<td>Beheizter Keller:</td>
+							<td>{ausweis.keller_beheizt ? "Ja" : "Nein"}</td>
+						</tr>
+						<tr>
+							<td>Wohnungen:</td>
+							<td>{ausweis.anzahl_einheiten}</td>
+						</tr>
+						<tr>
+							<td>Anlage zur Kühlung:</td>
+							<td>{ausweis.wird_gekuehlt ? "Ja" : "Nein"}</td>
+						</tr>
+						<tr>
+							<td>Leerstand:</td>
+							<td>{ausweis.leerstand}%</td>
+						</tr></tbody>
+						
+					</table>
+				</div>
+				<div class="flex flex-row gap-8">
+					<div class="flex flex-col">
+						<h2>Heizverbrauch</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("3", "years").format("MM.YYYY")}</p>
+						</div>
+					</div>
+					<div class="flex flex-col">
+						<h2>{ausweis.energietraeger_1}</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_1_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_2_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_3_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+					</div>
+				</div>
+				<div class="flex flex-row gap-8">
+					<div class="flex flex-col">
+						<h2>Heizverbrauch (Heizwert)</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("3", "years").format("MM.YYYY")}</p>
+						</div>
+					</div>
+					<div class="flex flex-col">
+						<h2>{ausweis.energietraeger_1}</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_1_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_2_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_3_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+					</div>
+				</div>
+				<p>Warmwasser enthalten: {ausweis.warmwasser_enthalten ? "Ja" : "Nein"}</p>
+			</div>
+			
+			<DatenblattFooter></DatenblattFooter>
+		</div>
+		<div class="flex flex-col gap-4">
+			<DatenblattHeader></DatenblattHeader>
+			<div class="px-12 py-20 flex flex-col gap-2">
+				<h2>Modernisierungsstand</h2>
+				<h3>Heizungsanlage</h3>
+				<div class="grid grid-cols-3">
+					<Checkbox checked={ausweis.versorgungssysteme[0]}>Zentral/Etage</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[1]}>Einzelöfen</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[2]}>Durchlauferhitzer</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[3]}>Standardkessel</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[4]}>Solarsystem für Warmwasser</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[5]}>Wärmepumpe</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[6]}>Niedertemperaturkessel</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[7]}>Brennwertkessel/Therme</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[8]}>Warmwasserrohre gedämmt</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[9]}>Heizungsrohre gedämmt</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[10]}>Zirkulation</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[11]}>Raumtemperraturregler</Checkbox>
+				</div>
+				<h3>Fenster/Dachfenster/Türen</h3>
+				<div class="grid grid-cols-3">
+					<Checkbox checked={ausweis.fenster_dach[0]}>Einfachglas</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[1]}>Doppelverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[2]}>Isolierverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[3]}>Dreifachverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[4]}>Alle Fenster dicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[5]}>Fenster teilweise undicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[6]}>Alle Türen dicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[7]}>Türen teilweise undicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[8]}>Rolladenkästen gedämmt</Checkbox>
+				</div>
+				<h3>Wärmedämmung</h3>
+				<div class="grid grid-cols-2">
+					<Checkbox checked={ausweis.daemmung[0]}>Außenwand gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[1]}>Kelleraußenwand gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[2]}>Kellerdecke gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[3]}>Dachgeschoss gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[4]}>Oberste Geschossdecke gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[5]}>Oberste Geschossdecke min. 12cm gedämmt</Checkbox>
+				</div>
+				<Checkbox checked={true}>Die Angaben sind richtig und entsprechen dem aktuellen Stand.</Checkbox>
+				<Checkbox checked={true}>Ich habe die AGB gelesen und akzeptiert.</Checkbox>
+				<p>Die Angaben auf diesem Datenblatt wurden uns übermittelt und werden zur Berechnung und
+					Ausstellung des Ausweises herangezogen.</p>
+			</div>
+			<DatenblattFooter></DatenblattFooter>
+		</div>
+	</div>
+</PDFLayout>
+
+<style is:global>
+	table {
+		@apply w-full h-full;
+	}
+
+	td > table td {
+		@apply px-0 py-0 border-t-0 border-b-0;
+	}
+
+	td:has(table) {
+		@apply p-0;
+	}
+
+	td > table td:first-child {
+		@apply border-l-0;
+	}
+
+	td > table td:last-child {
+		@apply border-r-0;
+	}
+
+	td {
+		@apply border border-black px-1 text-xs py-0.5;
+	}
+
+	td:not(:first-child) {
+		@apply bg-white;
+	}
+
+	h2 {
+		@apply font-bold text-sm;
+	}
+
+	p,
+	label {
+		@apply text-xs;
+	}
+
+	.box {
+		@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
+	}
+
+	.box > * {
+		@apply px-1 py-0.5;
+	}
+</style>
--- a/src/pages/en/requirement-certificate/index.astro
+++ b/src/pages/en/requirement-certificate/index.astro
@@ -0,0 +1,6 @@
+---
+import Page from "../../bedarfsausweis/index.astro"
+const { props } = Astro
+---
+
+<Page {...props} />
--- a/src/pages/en/signup.astro
+++ b/src/pages/en/signup.astro
@@ -0,0 +1,19 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import RegisterView from "../../components/RegisterView.svelte";
+import Layout from "../../layouts/Layout.astro";
+
+changeLanguage("en");
+
+const token = Astro.cookies.get("token").value;
+const expires = Astro.cookies.get("expires").number();
+const now = moment().unix();
+if (token && now < expires) {
+    return Astro.redirect("/user");
+}
+---
+
+<Layout title="Login">
+	<RegisterView client:only></RegisterView>
+</Layout>
--- a/src/pages/en/user/index.astro
+++ b/src/pages/en/user/index.astro
@@ -0,0 +1,38 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import { decodeToken } from "#lib/JsonWebToken";
+import { User } from "#lib/User";
+import UserLayout from "#layouts/UserLayout.astro";
+import AusweisCard from "#components/AusweisCard.svelte";
+import { Verbrauchsausweis } from "#lib/Ausweis/Verbrauchsausweis";
+
+changeLanguage("en");
+
+const token = Astro.cookies.get("token").value;
+const expires = Astro.cookies.get("expires").number();
+const now = moment().unix();
+if (!token || now > expires) {
+    Astro.cookies.delete("token");
+    Astro.cookies.delete("expires");
+    return Astro.redirect(`/login`);
+}
+const parsed = decodeToken(token);
+const user = await User.fromUID(parsed.uid);
+if (!user) {
+    Astro.cookies.delete("token");
+    Astro.cookies.delete("expires");
+    return Astro.redirect(`/login`);
+}
+---
+
+<UserLayout title="Dashboard">
+	<h1>Willkommen zurück <b>{user.email}</b></h1>
+
+	<h2>Ihre Ausweise</h2>
+	<div class="grid grid-flow-row grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+		<AusweisCard client:load hidden={true} i={0} ausweis={new Verbrauchsausweis()}></AusweisCard>
+		<AusweisCard client:load hidden={true} i={1} ausweis={new Verbrauchsausweis()}></AusweisCard>
+		<AusweisCard client:load hidden={true} i={2} ausweis={new Verbrauchsausweis()}></AusweisCard>
+	</div>
+</UserLayout>
--- a/src/pages/en/verbrauchsausweis-gewerbe/index.astro
+++ b/src/pages/en/verbrauchsausweis-gewerbe/index.astro
@@ -0,0 +1,11 @@
+---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import VerbrauchsausweisGewerbeContent from "#components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte";
+
+changeLanguage("en");
+---
+
+<AusweisLayout title="Verbrauchsausweis Gewerbe erstellen | IBCornelsen">
+	<VerbrauchsausweisGewerbeContent client:load></VerbrauchsausweisGewerbeContent>
+</AusweisLayout>
--- a/src/pages/en/verbrauchsausweis/erstellen.astro
+++ b/src/pages/en/verbrauchsausweis/erstellen.astro
@@ -0,0 +1,8 @@
+---
+import { changeLanguage } from "i18next";
+
+changeLanguage("en");
+
+console.log(Object.fromEntries(new URLSearchParams(await Astro.request.text())));
+return Astro.redirect("/kundendaten");
+---
--- a/src/pages/en/verbrauchsausweis/index.astro
+++ b/src/pages/en/verbrauchsausweis/index.astro
@@ -0,0 +1,13 @@
+---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import VerbrauchsausweisContent from "#components/Verbrauchsausweis/VerbrauchsausweisContent.svelte";
+
+changeLanguage("en");
+
+const uid = Astro.cookies.get("ausweis_uid").value;
+---
+
+<AusweisLayout title="Verbrauchsausweis erstellen">
+	<VerbrauchsausweisContent client:load uid={uid} />
+</AusweisLayout>
--- a/src/pages/faq/index.astro
+++ b/src/pages/faq/index.astro
@@ -1,6 +1,8 @@
 ---
-import Layout from "~/layouts/Layout.astro"
+import { changeLanguage } from "i18next";
+import Layout from "#layouts/Layout.astro";

+changeLanguage("de");
 ---

 <Layout title="FAQ - IBCornelsen"></Layout>
--- a/src/pages/fr/bedarfsausweis/index.astro
+++ b/src/pages/fr/bedarfsausweis/index.astro
@@ -0,0 +1,10 @@
+---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent.svelte";
+
+changeLanguage("fr");
+---
+<AusweisLayout title="Bedarfsausweis erstellen | IBCornelsen">
+	<BedarfsausweisContent client:load></BedarfsausweisContent>
+</AusweisLayout>
--- a/src/pages/fr/developers/index.astro
+++ b/src/pages/fr/developers/index.astro
@@ -0,0 +1,11 @@
+---
+import { changeLanguage } from "i18next";
+import Layout from "#layouts/Layout.astro";
+
+changeLanguage("fr");
+---
+
+<Layout title="Für Entwickler - IBCornelsen">
+	<h1>Warum das IBCornelsen?</h1>
+	<p>Unser Unternehmen bietet eine weite Auswahl an Schnittstellen und damit einhergehenden Daten. Unsere API bietet uneingeschränkten Zugang zu Immobilien, Verbrauchsdaten und vielem Weiteren.</p>
+</Layout>
--- a/src/pages/fr/faq/index.astro
+++ b/src/pages/fr/faq/index.astro
@@ -0,0 +1,8 @@
+---
+import { changeLanguage } from "i18next";
+import Layout from "#layouts/Layout.astro";
+
+changeLanguage("fr");
+---
+
+<Layout title="FAQ - IBCornelsen"></Layout>
--- a/src/pages/fr/index.astro
+++ b/src/pages/fr/index.astro
@@ -0,0 +1,366 @@
+---
+import { changeLanguage } from "i18next";
+import { BoxWithHeading } from "@ibcornelsen/ui";
+import Widget from "#components/Widget.svelte";
+import Layout from "#layouts/Layout.astro";
+import FeatureCard from "#components/FeatureCard.svelte";
+
+changeLanguage("fr");
+---
+
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
+	<h1>Energieausweis online erstellen</h1>
+
+	<Widget client:load />
+
+	<h2>GEG gilt ab 1. Mai 2021 und löst die EnEV ab</h2>
+	<BoxWithHeading heading="Folgende Punkte ändern sich:">
+		<ul>
+			<li>
+				Erhöhte Sorgfaltspflicht bei der Erstellung der Energieausweise.
+				Insbesondere zur Einschätzung der Modernisierungsempfehlungen
+				werden jetzt Fotos der relevanten Bereiche von Dach, Fenster,
+				Heizung und Außenwand benötigt.
+			</li>
+			<li>
+				Die Primärenergiefaktoren zur Ermittlung des Gebäudekennwerts
+				werden jetzt direkt im GEG (§22 Primärenergiefaktoren) geregelt.
+				Dadurch wird mehr Transparenz und Nachvollziehbarkeit
+				geschaffen. Auch findet die Verwendung von Biogas aus dem
+				Erdgasnetz jetzt angemessen Berücksichtigung.
+			</li>
+			<li>
+				Die lokale Erzeugung von Strom über eine PV-Anlage wird besser
+				berücksichtigt und kann vom Jahres-Primärenergiebedarf abgezogen
+				werden (bis 45%).
+			</li>
+			<li>
+				Die Angabe der CO2-Emission des Gebäudes im Energieausweis wird
+				verplichtend eingeführt.
+			</li>
+		</ul>
+	</BoxWithHeading>
+
+	<h2>
+		Energieausweis nach aktueller GEG (vormals EnEV) geprüft vom Diplom
+		Ingenieur
+	</h2>
+	<div class="right-img">
+		<img
+			title="Energieausweis online erstellen"
+			src="images/Bedarfsausweis-Wohngebaeude-Beispiel.jpg"
+			alt="Energieausweis online erstellen"
+		/>
+	</div>
+	<hr />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"
+		>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.
+	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
+	folgender Nummer: 040/209 339 850 zur Verfügung.
+	<hr />Mit dem <strong>Energieausweis</strong> werden Wohngebäude und Nichtwohngebäude
+	nach den Vorgaben der Energieeinsparverordnung <a
+		href="/enev-zusammenfassung">EnEV</a
+	>
+	energetisch bewertet. Das <a href="https://www.dibt.de/" target="blank"
+		>DIBt</a
+	>
+	(Deutsches Institut für Bautechnik) regelt die Grundsätze zur Ausstellung, Berechnung
+	und der Qualitätssicherung. Der Energieausweis beschreibt die entsprechenden
+	Energiekennwerte auf einer Farbskala, grün (A+/Effizienzhaus), gelb (D) und rot
+	(H / unsaniert). Es wird grundsätzlich zwischen zwei Energieausweisarten unterschieden:
+	<hr />
+	<div
+		style="border-left: 5px solid #f5b68c; border-right: 5px solid #f5b68c;"
+	>
+		<ul id="start_ul">
+			<li>
+				Der verbrauchsbasierte Energieausweis wird als <a
+					title="Verbrauchsausweis"
+					href="/verbrauchsausweis/"
+					><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"
+					>Energieausweis online erstellen</a
+				>
+				<hr />
+			</li>
+			<li>
+				Der bedarfsbasierte Energieausweis wird als <a
+					title="Bedarfsausweis"
+					href="/bedarfsausweis/"><strong>Bedarfsausweis</strong></a
+				>bezeichnet. Dies ist der „große“ Energieausweis und kann immer
+				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"
+					>Energieausweis online erstellen</a
+				>
+			</li>
+		</ul>
+	</div>
+	<hr />
+	<div class="grid grid-cols-3 gap-4">
+		<FeatureCard heading="Verbrauchsausweis Wohngebäude" price={45} href="/verbrauchsausweis">
+			<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>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
+			<div class="rpt_feature">Registrierung beim DiBt</div>
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
+			<div class="rpt_feature">rechtssicher nach aktueller EnEV</div>
+			<div class="rpt_feature">telefonische Beratung</div>
+		</FeatureCard>
+		<FeatureCard heading="Bedarfsausweis Wohngebäude" price={75} href="/bedarfsausweis">
+			<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>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
+			<div class="rpt_feature">Registrierung beim DiBt</div>
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
+			<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">
+			<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>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
+			<div class="rpt_feature">Registrierung beim DiBt</div>
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
+			<div class="rpt_feature">rechtssicher nach aktueller EnEV</div>
+			<div class="rpt_feature">telefonische Beratung</div>
+		</FeatureCard>
+	</div>
+	<hr />
+
+	<h2>Unterschied: Verbrauchsausweis und Bedarfsausweis</h2> Grundsätzlich unterscheidet
+	man beim Energieausweis zwischen Verbrauchsausweis und Bedarfsausweis.<h3>
+		Was ist ein Verbrauchsausweis?
+	</h3>
+	Der Verbrauchsausweis gibt den Energieverbrauch der Gebäudebewohner in den vergangenen
+	drei Jahren für Heizung und Warmwasserbereitung an. Um den <a
+		href="/enev-zusammenfassung#§-19-EnEV"
+		>Energieverbrauchskennwert zu ermitteln</a
+	>, wird der tatsächliche Energieverbrauch mithilfe eines standortbezogenen
+	Klimafaktors bereinigt. Der Durchschnittswert wird dann durch die sogenannte
+	energetische Gebäudenutzfläche (An) geteilt. So führt beispielsweise ein
+	hoher Verbrauch in einem einzelnen harten Winter nicht zu einer schlechteren
+	Beurteilung des Gebäudes. Der tatsächliche Energieverbrauch in einem Gebäude
+	oder einer Wohnung kann aufgrund des Witterungseinflusses vom
+	Energieverbrauchskennwert abweichen.Das Ergebnis im Verbrauchsausweis ist
+	stark vom individuellen Nutzungsverhalten der Bewohner abhängig. Wird in
+	einem energetisch schlechten Gebäude kaum geheizt, so kann der
+	Energieausweis trotzdem sehr gut ausfallen.<h3>
+		Was ist ein Bedarfsausweis?
+	</h3> Der Bedarfsausweis entsteht auf Grundlage einer technischen <a
+		href="/enev-zusammenfassung#§-18-EnEV"
+		>Analyse der Bausubstanz und der Heizungsanlage eines Gebäudes</a
+	> und ist unabhängig vom individuellen Nutzerverhalten. Die Farbverlaufsskala
+	im Bedarfsausweis weist zwei verschiedene Werte aus, die sehr unterschiedlich
+	ausfallen können – einen Wert für den Endenergiebedarf und einen für den Primärenergiebedarf.
+	Zusätzlich wird noch ein Kennwert für die energetische Qualität der Gebäudehülle
+	dargestellt.Der Energiebedarf gibt die nach technischen Regeln berechnete, vom
+	konkreten Gebäude jährlich benötigte Energiemenge für Heizung, Lüftung und Warmwasserbereitung
+	an. Dabei werden bei der Berechnung standardisierte Randbedingungen – beispielsweise
+	eine Innentemperatur von 19 Grad im beheizten Bereich des Gebäudes – zugrunde
+	gelegt. Am Endenergiebedarf sollten sich Hausbewohner orientieren, wenn sie ihren
+	künftigen Energieverbrauch und die Energiekosten abschätzen wollen.Der Primärenergiebedarf
+	bildet die Gesamtenergieeffizienz eines Gebäudes ab. Er berücksichtigt neben
+	der Endenergie auch die so genannte „Vorkette“ (Erkundung, Gewinnung, Verteilung,
+	Umwandlung) der jeweils eingesetzten Energieträger (z.B. Heizöl, Gas, Strom,
+	erneuerbare Energien).Besonders niedrig fällt der Primärenergiebedarf aus, wenn
+	erneuerbare Energien (solare Strahlungsenergie, Geothermie, Energie aus Biomasse)
+	für die Energieversorgung im Gebäude eingesetzt werden. Am Primärenergiebedarf
+	können Verbraucher erkennen, wie umweltfreundlich ihr Gebäude ist.<h3>
+		Fazit – Verbrauchsausweis / Bedarfsausweis
+	</h3> Geht es um den tatsächlichen Verbrauch der Energie, der den Aufwand für
+	Heizung und zentrale Warmwasserbereitung der vergangenen drei Jahre berücksichtigt,
+	wird der Energieverbrauchskennwert für den Verbrauchsausweis ermittelt. Bei gewerblichen
+	Objekten wird zusätzlich der Verbrauch für Beleuchtung und Klimatisierung mit
+	eingerechnet. Anhand der Zeiträume und der Lage des Gebäudes (Postleitzahl) werden
+	diese Daten ausgewertet und sowohl zeit-, als auch klimabereinigt zur Bewertung
+	der vorhandenen energetischen Qualität herangezogen.Für das Ausstellen des Bedarfsausweis
+	wird der rechnerische Energiebedarf unter standardisierten Randbedingungen benötigt.
+	Daten rund um Bausubstanz, Gebäudehülle und Heizanlage fließen in die Berechnung
+	mit ein. Bedarfsausweise widerspiegeln die tatsächliche energetische Qualität
+	eines Gebäudes damit wesentlich besser als die Verbrauchsausweise.
+
+	<hr />
+	<div class="start_infobox" title="Verbrauchsausweis Wohngebäude">
+		<div class="start_infobox_inside IB_VA_WG">
+			<img
+				alt="Energieausweis online erstellen - Verbrauchsausweis"
+				title="Energieausweis online erstellen - Verbrauchsausweis"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis.png"
+			/>
+			<div class="title">Verbrauchsausweis Wohngebäude</div>
+			<hr />
+			<ul>
+				<li>
+					3 zusammenhängende Heizenergieverbräuche müssen eingegeben
+					werden.
+				</li>
+				<li>
+					Wohnfläche, Baujahr Gebäude und Baujahr Heizung müssen
+					eingegeben werden.
+				</li>
+				<li>
+					<div class="start_infobox_link">
+						<a
+							title="Verbrauchsausweis"
+							href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude.php"
+							>Verbrauchsausweis</a
+						>
+						bei fast allen Gebäuden möglich. (Baujahr &gt; 1977 - Vermietung/Verkauf)
+					</div>
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					title="Verbrauchsausweis erstellen"
+					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+					>Jetzt Verbrauchsausweis erstellen</a
+				>
+			</div>
+		</div>
+	</div>
+	<div class="start_infobox BA-WG" title="Bedarfssausweis Wohngebäude">
+		<div class="start_infobox_inside">
+			<img
+				alt="Energieausweis online erstellen - Bedarfsausweis"
+				title="Energieausweis online erstellen - Bedarfsausweis"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis.png"
+			/>
+			<div class="title">Bedarfsausweis Wohngebäude</div>
+			<hr />
+			<ul>
+				<li>
+					Die verwendete Heizungsanlage (Standardkessel,
+					Brennwertkessel, etc.) muß eingegeben werden.
+				</li>
+				<li>
+					Grundrissgeometrie sowie Baujahr Heizung und Gebäude müssen
+					eingegeben werden.
+				</li>
+				<li>
+					<a
+						title="Bedarfsausweis"
+						href="/bedarfsausweis/bedarfsausweis-wohngebaeude.php"
+						>Bedarfsausweis</a
+					> bei allen Gebäuden möglich. Die Berechnung ist umfangreicher
+					und besser vergleichbar.
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					title="Bedarfsausweis erstellen"
+					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+					>Jetzt Bedarfsausweis erstellen</a
+				>
+			</div>
+		</div>
+	</div>
+	<div class="start_infobox VANW_WG" title="Bedarfsausweis Gewerbe">
+		<div class="start_infobox_inside">
+			<img
+				alt="Energieausweis online erstellen - Bedarfsausweis Gewerbe"
+				title="Energieausweis online erstellen - Bedarfsausweis Gewerbe"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis-gewerbe.png"
+			/>
+			<div class="title">Bedarfsausweis Gewerbe</div>
+			<hr />
+			<ul>
+				<li>
+					Aktuelle Grundriss- und Ansichtspläne werden für die
+					Zonierung benötigt.
+				</li>
+				<li>
+					Baubeschreibung (z.B. aus der Baugenehmigung) mit Angabe der
+					verwendeten Baustoffe und TGA.
+				</li>
+				<li>
+					Angabe vom Baujahr der Heizung, Gebäude und Klimaanlage.
+				</li>
+				<li>
+					<a
+						title="Bedarfsausweis Gewerbe"
+						href="/bedarfsausweis/bedarfsausweis-gewerbe.php"
+						>Bedarfsausweis Gewerbe</a
+					> bei allen Nichtwohngebäuden möglich (kann immmer verwendet
+					werden).
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen.php"
+					title="Bedarfsausweis Gewerbe anfragen"
+					>Jetzt Bedarfsausweis Gewerbe anfragen</a
+				>
+			</div>
+		</div>
+	</div>
+
+	<hr />
+	<h2>Energieausweis online erstellen</h2> Soll Wohneigentum veräußert oder bauliches
+	Teileigentum zum Erwerb angeboten werden, muss dem möglichen Käufer oder Leasingnehmer
+	auf Verlangen unverzüglich ein
+	<a href="enev-zusammenfassung#§-16a-EnEV">Energieausweis gezeigt werden</a>.
+	In den meisten Fällen ist hier ein Verbrauchsausweis ausreichend. Auch
+	Mietern oder Pächtern soll der Energieausweis unmittelbaren Aufschluss über
+	die energetischen Bedingungen des Gebäudes aufzeigen.Kommt der Anbieter der
+	offerierten Immobilie diesem Auftrag nach der Energieeinsparverordnung nicht
+	nach, drohen Bußgelder bis zu 15 000 Euro. Als Ausnahmen gelten Gebäude mit
+	nicht mehr als 50 m² Fläche sowie Baudenkmäler (<a
+		href="enev-zusammenfassung#§-16-EnEV">§ 16 Abs. 4 EnEV</a
+	>).Die Deutsche Energie-Agentur GmbH (<a
+		href="https://www.dena.de/"
+		target="blank">dena</a
+	>) empfiehlt bei Wohngebäuden generell den Bedarfsausweis. Er erlaubt eine
+	nutzerunabhängige Bewertung des Gebäudes. Zusätzlich können bei der
+	Erstellung eines Bedarfsausweises die Empfehlungen für Modernisierungen auf
+	der Basis einer technischen Analyse des Gebäudes ermittelt werden.
+	<hr />
+	<h2>Zusammenfassung: Was ist ein Energieausweis?</h2>
+	<ul id="start_ul_1">
+		<li>
+			Der Gesetzgeber hat zwei Arten des Energieausweises bestimmt: Den
+			Verbrauchsausweis und den Bedarfsausweis.
+		</li>
+		<li>
+			Je nach Gebäudeart, Baujahr, Nutzungsart gilt es verschiedene
+			Kriterien für den Energieausweis zu beachten.
+		</li>
+		<li>
+			Der Energieausweis ist ein Mittel, das als Starter für
+			Energiesparmaßnahmen definiert werden kann.
+		</li>
+		<li>
+			Mit Hilfe des Energieausweises kann sich der Marktwert einer
+			Immobilie erhöhen.
+		</li>
+		<li>
+			Der Energieausweis offenbart bauliche Mängel, die eine
+			Energieverschwendung mit sich bringen.
+		</li>
+		<li>
+			Im Energieausweis werden Sanierungs- bzw. Modernisierungsvorschläge
+			dokumentiert.
+		</li>
+		<li>
+			Anhand des Energiepasses lässt sich der energetische Zustand
+			verschiedener Gebäude miteinander vergleichen.
+		</li>
+	</ul>
+</Layout>
--- a/src/pages/fr/kaufabschluss.astro
+++ b/src/pages/fr/kaufabschluss.astro
@@ -0,0 +1,11 @@
+---
+import { changeLanguage } from "i18next";
+import Kaufabschluss from "#components/Kaufabschluss/Kaufabschluss.svelte";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+
+changeLanguage("fr");
+---
+
+<AusweisLayout title="Kaufabschluss Verbrauchsausweis - IBCornelsen">
+	<Kaufabschluss client:load></Kaufabschluss>
+</AusweisLayout>
--- a/src/pages/fr/kundendaten.astro
+++ b/src/pages/fr/kundendaten.astro
@@ -0,0 +1,12 @@
+---
+import { changeLanguage } from "i18next";
+import Kundendaten from "#components/Ausweis/Kundendaten.svelte";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+
+changeLanguage("fr");
+---
+
+<AusweisLayout title="Kundendaten Aufnehmen - IBCornelsen">
+	<Kundendaten client:load></Kundendaten>
+</AusweisLayout>
+
--- a/src/pages/fr/login.astro
+++ b/src/pages/fr/login.astro
@@ -0,0 +1,19 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import LoginView from "../../components/LoginView.svelte";
+import Layout from "../../layouts/Layout.astro";
+
+changeLanguage("fr");
+
+const token = Astro.cookies.get("token").value;
+const expires = Astro.cookies.get("expires").number();
+const now = moment().unix();
+if (token && now < expires) {
+    return Astro.redirect(`/user`);
+}
+---
+
+<Layout title="Login">
+	<LoginView client:only></LoginView>
+</Layout>
--- a/src/pages/fr/logout.astro
+++ b/src/pages/fr/logout.astro
@@ -0,0 +1,9 @@
+---
+import { changeLanguage } from "i18next";
+
+changeLanguage("fr");
+
+Astro.cookies.delete("token");
+Astro.cookies.delete("expires");
+return Astro.redirect("/");
+---
--- a/src/pages/fr/pdf/ansichtsausweis.astro
+++ b/src/pages/fr/pdf/ansichtsausweis.astro
@@ -0,0 +1,247 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import { Ausweis } from "src/lib/Ausweis";
+import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+import Checkbox from "#components/Checkbox.svelte";
+import PDFHeader from "#components/PDF/PDFHeader.svelte";
+import PDFSectionHeader from "#components/PDF/PDFSectionHeader.svelte";
+import PDFLayout from "#layouts/PDFLayout.astro";
+
+changeLanguage("fr");
+
+const base64 = Astro.url.searchParams.get("base64");
+if (!base64) {
+    return Astro.redirect("/404");
+}
+const ausweis = Verbrauchsausweis.fromBase64(base64);
+if (!ausweis) {
+    return Astro.redirect("/404");
+}
+---
+
+<PDFLayout title="Ansichtsausweis">
+	<div class="flex flex-col gap-20">
+		<div class="flex flex-col gap-2">
+			<PDFHeader></PDFHeader>
+			<PDFSectionHeader number={1}>
+				<p class="text-xs">
+					Gültig bis: <span
+						>{
+							moment().add("10", "years").locale("de").format("DD. MMM. YYYY")
+						}</span>
+				</p>
+				<p class="text-xs">Ausweis ID <span>1293819</span></p>
+				<p class="text-xs">
+					Registriernummer wird nach Zahlungseingang vergeben
+				</p>
+			</PDFSectionHeader>
+			<div
+				class="border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg"
+			>
+				<h2>Gebäude</h2>
+				<div class="flex flex-col">
+					<div class="flex flex-row">
+						<table>
+							<tr>
+								<td>Gebäudetyp</td>
+								<td>{ausweis.objekt_typ}</td>
+							</tr>
+							<tr>
+								<td>Adresse</td>
+								<td>{ausweis.objekt_strasse}</td>
+							</tr>
+							<tr>
+								<td>Gebäudeteil</td>
+								<td>{ausweis.objekt_gebaeudeteil}</td>
+							</tr>
+							<tr>
+								<td>Baujahr Gebäude ³</td>
+								<td>{ausweis.baujahr_gebaeude}</td>
+							</tr>
+							<tr>
+								<td
+									>Baujahr Wärmeerzeuger <sup>3</sup>
+									<sup>4</sup></td
+								>
+								<td>{ausweis.baujahr_anlage}</td>
+							</tr>
+							<tr>
+								<td>Anzahl Wohnungen</td>
+								<td>{ausweis.anzahl_einheiten}</td>
+							</tr>
+							<tr>
+								<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
+								<td>
+									<table>
+										<tr>
+											<td>192m²</td>
+											<td
+												class="flex flex-row items-center h-full w-full gap-2 pl-2"
+											>
+												<input type="checkbox" />
+												nach § 19 EnEV aus der Wohnfläche ermittelt
+											</td>
+										</tr>
+									</table>
+								</td>
+							</tr>
+							<tr>
+								<td
+									>Wesentliche Energieträger für<br /> Heizung und
+									Warmwasser <sup>3</sup></td
+								>
+								<td>Erdgas, BraunkohleBraunkohle, Strommix</td>
+							</tr>
+						</table>
+						<div class="w-[35%]">
+							<img src="" alt="" />
+						</div>
+					</div>
+					<div>
+						<table></table>
+					</div>
+				</div>
+			</div>
+			<div class="box">
+				<h2>
+					Hinweise zu den Angaben über die energetische Qualität des
+					Gebäudes
+				</h2>
+				<div class="bg-white w-full">
+					<p>
+						Die energetische Qualität eines Gebäudes kann durch die
+						Berechnung des <strong>Energiebedarfs</strong> unter Annahme
+						von standardisierten Randbedingungen oder durch die Auswertung
+						des <strong>Energieverbrauchs</strong> ermittelt werden. Als
+						Bezugsfläche dient die energetische Gebäudenutzfläche nach der
+						EnEV, die sich in der Regel von den allgemeinen Wohnflächenangaben
+						unterscheidet. Die angegebenen Vergleichswerte sollen überschlägige
+						Vergleiche ermöglichen (<strong
+							>Erläuterungen - siehe Seite 5</strong
+						>). Teil des Energieausweises sind die
+						Modernisierungsempfehlungen (Seite 4).
+					</p>
+					<Checkbox checked={true}>
+						Der Energieausweis wurde auf der Grundlage von Berechnungen
+						des <strong>Energiebedarfs</strong> erstellt (Energiebedarfsausweis).
+						Die Ergebnisse sind auf <strong>Seite 2</strong> dargestellt.
+						Zusätzliche Informationen zum Verbrauch sind freiwillig.
+					</Checkbox>
+					<Checkbox checked={false}>
+						Der Energieausweis wurde auf der Grundlage von Auswertungen
+						des <strong>Energieverbrauchs</strong> erstellt (Energieverbrauchsausweis).
+						Die Ergebnisse sind auf <strong>Seite 3</strong> dargestellt.
+					</Checkbox>
+					<div class="flex flex-row justify-between items-center w-[80%]">
+						<p>Datenerhebung Bedarf/Verbrauch durch</p>
+						<Checkbox checked={true}>Eigentümer</Checkbox>
+						<Checkbox checked={false}>Aussteller</Checkbox>
+					</div>
+					<Checkbox>
+						Dem Energieausweis sind zusätzliche Informationen zur
+						energetischen Qualität beigefügt (freiwillige Angabe).
+					</Checkbox>
+				</div>
+			</div>
+			<div class="box">
+				<h2>Hinweise zur Verwendung des Energieausweises</h2>
+				<p class="bg-white">
+					Der Energieausweis dient lediglich der Information. Die Angaben
+					im Energieausweis beziehen sich auf das gesamte Wohngebäude oder
+					den oben bezeichneten Gebäudeteil. Der Energieausweis ist
+					lediglich dafür gedacht, einen überschlägigen Vergleich von
+					Gebäuden zu ermöglichen.
+				</p>
+			</div>
+			<div class="flex flex-row gap-2">
+				<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
+					<p>Aussteller:</p>
+				</div>
+				<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20"></div>
+			</div>
+			<div class="flex flex-row flex-wrap">
+				<p>
+					<sup>1</sup> Datum der angewendeten EnEV, gegebenenfalls angewendeten
+					Änderungsverordnung zur EnEV
+				</p>
+				<p>
+					<sup>2</sup> Bei nicht rechtzeitiger Zuteilung der Registriernummer
+					(§ 17 Absatz 4 Satz 4 und 5 EnEV) ist das Datum der Antragstellung
+					einzutragen; die Registriernummer ist nach deren Eingang nachträglich
+					einzusetzen.
+				</p>
+				<p><sup>3</sup> Mehrfachangaben möglich</p>
+				<p><sup>4</sup> bei Wärmenetzen Baujahr der Übergabestation</p>
+			</div>
+		</div>
+	
+		<div class="flex flex-col gap-2">
+			<PDFHeader></PDFHeader>
+			<PDFSectionHeader number={2}>
+				<p>Berechneter Energiebedarf des Gebäudes</p>
+			</PDFSectionHeader>
+			<div
+				class="box"
+			>
+				<h2>Energiebedarf</h2>
+				<div class="bg-white w-full flex flex-col">
+					<div class="flex flex-col items-end text-center">
+						<div class="flex flex-row">
+							<span class="bg-gray-300 p-0.5">200</span>
+							<span>kg/(m²a)</span>
+						</div>
+						<span>CO² Treibhausgas Emissionen</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</PDFLayout>
+
+<style is:global>
+	table {
+		@apply w-full h-full;
+	}
+
+	td > table td {
+		@apply px-0 py-0 border-t-0 border-b-0;
+	}
+
+	td:has(table) {
+		@apply p-0;
+	}
+
+	td > table td:first-child {
+		@apply border-l-0;
+	}
+
+	td > table td:last-child {
+		@apply border-r-0;
+	}
+
+	td {
+		@apply border border-black px-1 text-xs py-0.5;
+	}
+
+	td:not(:first-child) {
+		@apply bg-white;
+	}
+
+	h2 {
+		@apply font-bold text-sm;
+	}
+
+	p,
+	label {
+		@apply text-xs;
+	}
+
+	.box {
+		@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
+	}
+
+	.box > * {
+		@apply px-1 py-0.5;
+	}
+</style>
--- a/src/pages/fr/pdf/datenblatt.astro
+++ b/src/pages/fr/pdf/datenblatt.astro
@@ -0,0 +1,253 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+import { Dachgeschoss } from "src/lib/Ausweis/types";
+import Checkbox from "#components/Checkbox.svelte";
+import DatenblattFooter from "#components/DatenblattFooter.svelte";
+import DatenblattHeader from "#components/DatenblattHeader.svelte";
+import PDFHeader from "#components/PDF/PDFHeader.svelte";
+import PDFSectionHeader from "#components/PDF/PDFSectionHeader.svelte";
+import PDFLayout from "#layouts/PDFLayout.astro";
+
+changeLanguage("fr");
+
+const base64 = Astro.url.searchParams.get("base64");
+if (!base64) {
+    return Astro.redirect("/404");
+}
+const ausweis = Verbrauchsausweis.fromBase64(base64);
+if (!ausweis) {
+    return Astro.redirect("/404");
+}
+---
+
+<PDFLayout title="Datenblatt">
+	<div class="flex flex-col gap-20">
+		<div class="flex flex-col gap-4">
+			<DatenblattHeader></DatenblattHeader>
+			<div class="px-12 py-20 flex flex-col gap-2">
+				<div class="flex flex-row justify-between items-center">
+					<h2>Datenblatt Energieausweis</h2>
+					<h2>Ausweis ID: </h2>
+				</div>
+				<h3>Gebäudedaten:</h3>
+				<p>Adresse: {ausweis.objekt_strasse}, {ausweis.objekt_plz} {ausweis.objekt_ort}</p>
+				<div class="flex justify-between">
+					<Checkbox checked={ausweis.ausstellgrund == "Neubau"}>Neubau</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Vermietung" || ausweis.ausstellgrund == "Verkauf"}>Vermietung/Verkauf</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Modernisierung"}>Modernisierung</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Sonstiges"}>Sonstiges</Checkbox>
+				</div>
+				<div class="flex justify-between gap-4">
+					<table>
+						<tbody><tr>
+							<td>Baujahr Gebäude:</td>
+							<td>{ausweis.baujahr_gebaeude}</td>
+						</tr>
+						<tr>
+							<td>Baujahr Heizung:</td>
+							<td>{ausweis.baujahr_anlage}</td>
+						</tr>
+						<tr>
+							<td>Wohnfläche:</td>
+							<td>{ausweis.wohnflaeche}</td>
+						</tr>
+						<tr>
+							<td>Lüftungskonzept:</td>
+							<td>{ausweis.lueftungskonzept}</td>
+						</tr>
+						<tr>
+							<td>Gebäudetyp:</td>
+							<td>{ausweis.objekt_typ}</td>
+						</tr></tbody>
+					</table>
+					<table>
+						<tbody><tr>
+							<td>Dachgeschoss:</td>
+							<td>{ausweis.dachgeschoss == Dachgeschoss.BEHEIZT ? "Beheizt" : (ausweis.dachgeschoss == Dachgeschoss.UNBEHEIZT ? "Unbeheizt" : "Nicht Vorhanden")}</td>
+						</tr>
+						<tr>
+							<td>Beheizter Keller:</td>
+							<td>{ausweis.keller_beheizt ? "Ja" : "Nein"}</td>
+						</tr>
+						<tr>
+							<td>Wohnungen:</td>
+							<td>{ausweis.anzahl_einheiten}</td>
+						</tr>
+						<tr>
+							<td>Anlage zur Kühlung:</td>
+							<td>{ausweis.wird_gekuehlt ? "Ja" : "Nein"}</td>
+						</tr>
+						<tr>
+							<td>Leerstand:</td>
+							<td>{ausweis.leerstand}%</td>
+						</tr></tbody>
+						
+					</table>
+				</div>
+				<div class="flex flex-row gap-8">
+					<div class="flex flex-col">
+						<h2>Heizverbrauch</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("3", "years").format("MM.YYYY")}</p>
+						</div>
+					</div>
+					<div class="flex flex-col">
+						<h2>{ausweis.energietraeger_1}</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_1_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_2_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_3_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+					</div>
+				</div>
+				<div class="flex flex-row gap-8">
+					<div class="flex flex-col">
+						<h2>Heizverbrauch (Heizwert)</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("3", "years").format("MM.YYYY")}</p>
+						</div>
+					</div>
+					<div class="flex flex-col">
+						<h2>{ausweis.energietraeger_1}</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_1_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_2_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_3_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+					</div>
+				</div>
+				<p>Warmwasser enthalten: {ausweis.warmwasser_enthalten ? "Ja" : "Nein"}</p>
+			</div>
+			
+			<DatenblattFooter></DatenblattFooter>
+		</div>
+		<div class="flex flex-col gap-4">
+			<DatenblattHeader></DatenblattHeader>
+			<div class="px-12 py-20 flex flex-col gap-2">
+				<h2>Modernisierungsstand</h2>
+				<h3>Heizungsanlage</h3>
+				<div class="grid grid-cols-3">
+					<Checkbox checked={ausweis.versorgungssysteme[0]}>Zentral/Etage</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[1]}>Einzelöfen</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[2]}>Durchlauferhitzer</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[3]}>Standardkessel</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[4]}>Solarsystem für Warmwasser</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[5]}>Wärmepumpe</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[6]}>Niedertemperaturkessel</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[7]}>Brennwertkessel/Therme</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[8]}>Warmwasserrohre gedämmt</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[9]}>Heizungsrohre gedämmt</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[10]}>Zirkulation</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[11]}>Raumtemperraturregler</Checkbox>
+				</div>
+				<h3>Fenster/Dachfenster/Türen</h3>
+				<div class="grid grid-cols-3">
+					<Checkbox checked={ausweis.fenster_dach[0]}>Einfachglas</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[1]}>Doppelverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[2]}>Isolierverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[3]}>Dreifachverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[4]}>Alle Fenster dicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[5]}>Fenster teilweise undicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[6]}>Alle Türen dicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[7]}>Türen teilweise undicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[8]}>Rolladenkästen gedämmt</Checkbox>
+				</div>
+				<h3>Wärmedämmung</h3>
+				<div class="grid grid-cols-2">
+					<Checkbox checked={ausweis.daemmung[0]}>Außenwand gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[1]}>Kelleraußenwand gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[2]}>Kellerdecke gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[3]}>Dachgeschoss gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[4]}>Oberste Geschossdecke gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[5]}>Oberste Geschossdecke min. 12cm gedämmt</Checkbox>
+				</div>
+				<Checkbox checked={true}>Die Angaben sind richtig und entsprechen dem aktuellen Stand.</Checkbox>
+				<Checkbox checked={true}>Ich habe die AGB gelesen und akzeptiert.</Checkbox>
+				<p>Die Angaben auf diesem Datenblatt wurden uns übermittelt und werden zur Berechnung und
+					Ausstellung des Ausweises herangezogen.</p>
+			</div>
+			<DatenblattFooter></DatenblattFooter>
+		</div>
+	</div>
+</PDFLayout>
+
+<style is:global>
+	table {
+		@apply w-full h-full;
+	}
+
+	td > table td {
+		@apply px-0 py-0 border-t-0 border-b-0;
+	}
+
+	td:has(table) {
+		@apply p-0;
+	}
+
+	td > table td:first-child {
+		@apply border-l-0;
+	}
+
+	td > table td:last-child {
+		@apply border-r-0;
+	}
+
+	td {
+		@apply border border-black px-1 text-xs py-0.5;
+	}
+
+	td:not(:first-child) {
+		@apply bg-white;
+	}
+
+	h2 {
+		@apply font-bold text-sm;
+	}
+
+	p,
+	label {
+		@apply text-xs;
+	}
+
+	.box {
+		@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
+	}
+
+	.box > * {
+		@apply px-1 py-0.5;
+	}
+</style>
--- a/src/pages/fr/signup.astro
+++ b/src/pages/fr/signup.astro
@@ -0,0 +1,19 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import RegisterView from "../../components/RegisterView.svelte";
+import Layout from "../../layouts/Layout.astro";
+
+changeLanguage("fr");
+
+const token = Astro.cookies.get("token").value;
+const expires = Astro.cookies.get("expires").number();
+const now = moment().unix();
+if (token && now < expires) {
+    return Astro.redirect("/user");
+}
+---
+
+<Layout title="Login">
+	<RegisterView client:only></RegisterView>
+</Layout>
--- a/src/pages/fr/user/index.astro
+++ b/src/pages/fr/user/index.astro
@@ -0,0 +1,38 @@
+---
+import { changeLanguage } from "i18next";
+import moment from "moment";
+import { decodeToken } from "#lib/JsonWebToken";
+import { User } from "#lib/User";
+import UserLayout from "#layouts/UserLayout.astro";
+import AusweisCard from "#components/AusweisCard.svelte";
+import { Verbrauchsausweis } from "#lib/Ausweis/Verbrauchsausweis";
+
+changeLanguage("fr");
+
+const token = Astro.cookies.get("token").value;
+const expires = Astro.cookies.get("expires").number();
+const now = moment().unix();
+if (!token || now > expires) {
+    Astro.cookies.delete("token");
+    Astro.cookies.delete("expires");
+    return Astro.redirect(`/login`);
+}
+const parsed = decodeToken(token);
+const user = await User.fromUID(parsed.uid);
+if (!user) {
+    Astro.cookies.delete("token");
+    Astro.cookies.delete("expires");
+    return Astro.redirect(`/login`);
+}
+---
+
+<UserLayout title="Dashboard">
+	<h1>Willkommen zurück <b>{user.email}</b></h1>
+
+	<h2>Ihre Ausweise</h2>
+	<div class="grid grid-flow-row grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+		<AusweisCard client:load hidden={true} i={0} ausweis={new Verbrauchsausweis()}></AusweisCard>
+		<AusweisCard client:load hidden={true} i={1} ausweis={new Verbrauchsausweis()}></AusweisCard>
+		<AusweisCard client:load hidden={true} i={2} ausweis={new Verbrauchsausweis()}></AusweisCard>
+	</div>
+</UserLayout>
--- a/src/pages/fr/verbrauchsausweis-gewerbe/index.astro
+++ b/src/pages/fr/verbrauchsausweis-gewerbe/index.astro
@@ -0,0 +1,11 @@
+---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import VerbrauchsausweisGewerbeContent from "#components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte";
+
+changeLanguage("fr");
+---
+
+<AusweisLayout title="Verbrauchsausweis Gewerbe erstellen | IBCornelsen">
+	<VerbrauchsausweisGewerbeContent client:load></VerbrauchsausweisGewerbeContent>
+</AusweisLayout>
--- a/src/pages/fr/verbrauchsausweis/erstellen.astro
+++ b/src/pages/fr/verbrauchsausweis/erstellen.astro
@@ -0,0 +1,8 @@
+---
+import { changeLanguage } from "i18next";
+
+changeLanguage("fr");
+
+console.log(Object.fromEntries(new URLSearchParams(await Astro.request.text())));
+return Astro.redirect("/kundendaten");
+---
--- a/src/pages/fr/verbrauchsausweis/index.astro
+++ b/src/pages/fr/verbrauchsausweis/index.astro
@@ -0,0 +1,13 @@
+---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import VerbrauchsausweisContent from "#components/Verbrauchsausweis/VerbrauchsausweisContent.svelte";
+
+changeLanguage("fr");
+
+const uid = Astro.cookies.get("ausweis_uid").value;
+---
+
+<AusweisLayout title="Verbrauchsausweis erstellen">
+	<VerbrauchsausweisContent client:load uid={uid} />
+</AusweisLayout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,11 @@
 ---
+import { changeLanguage } from "i18next";
 import { BoxWithHeading } from "@ibcornelsen/ui";
-import Widget from "../components/Widget.svelte";
-import Layout from "../layouts/Layout.astro";
-import FeatureCard from "~/components/FeatureCard.svelte";
+import Widget from "#components/Widget.svelte";
+import Layout from "#layouts/Layout.astro";
+import FeatureCard from "#components/FeatureCard.svelte";
+
+changeLanguage("de");
 ---

 <Layout title="Energieausweis online erstellen - Online Energieausweis">
--- a/src/pages/kaufabschluss.astro
+++ b/src/pages/kaufabschluss.astro
@@ -1,6 +1,9 @@
 ---
-	import Kaufabschluss from "~/components/Kaufabschluss/Kaufabschluss.svelte";
-import AusweisLayout from "~/layouts/AusweisLayout.astro";
+import { changeLanguage } from "i18next";
+import Kaufabschluss from "#components/Kaufabschluss/Kaufabschluss.svelte";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+
+changeLanguage("de");
 ---

 <AusweisLayout title="Kaufabschluss Verbrauchsausweis - IBCornelsen">
--- a/src/pages/kundenbewertungen.mdx
+++ b/src/pages/kundenbewertungen.mdx
@@ -3,7 +3,7 @@ layout: ../layouts/Layout.astro
 title: Kundenbewertungen - online-energieausweis.org
 ---

-import Diagram from "~/components/Reviews/Diagrams.astro";
+import Diagram from "#components/Reviews/Diagrams.astro";

 # Kundenbewertungen

--- a/src/pages/kundendaten.astro
+++ b/src/pages/kundendaten.astro
@@ -1,6 +1,9 @@
 ---
-import Kundendaten from "~/components/Ausweis/Kundendaten.svelte";
-import AusweisLayout from "~/layouts/AusweisLayout.astro";
+import { changeLanguage } from "i18next";
+import Kundendaten from "#components/Ausweis/Kundendaten.svelte";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+
+changeLanguage("de");
 ---

 <AusweisLayout title="Kundendaten Aufnehmen - IBCornelsen">
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -1,14 +1,16 @@
 ---
+import { changeLanguage } from "i18next";
 import moment from "moment";
 import LoginView from "../components/LoginView.svelte";
 import Layout from "../layouts/Layout.astro";

+changeLanguage("de");
+
 const token = Astro.cookies.get("token").value;
 const expires = Astro.cookies.get("expires").number();
-
 const now = moment().unix();
 if (token && now < expires) {
-	return Astro.redirect("/user");
+    return Astro.redirect(`/user`);
 }
 ---

--- a/src/pages/logout.astro
+++ b/src/pages/logout.astro
@@ -1,6 +1,9 @@
 ---
+import { changeLanguage } from "i18next";
+
+changeLanguage("de");
+
 Astro.cookies.delete("token");
 Astro.cookies.delete("expires");
-
 return Astro.redirect("/");
 ---
--- a/src/pages/pdf/ansichtsausweis.astro
+++ b/src/pages/pdf/ansichtsausweis.astro
@@ -1,24 +1,23 @@
 ---
+import { changeLanguage } from "i18next";
 import moment from "moment";
 import { Ausweis } from "src/lib/Ausweis";
 import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
-import Checkbox from "~/components/Checkbox.svelte";
-import PDFHeader from "~/components/PDF/PDFHeader.svelte";
-import PDFSectionHeader from "~/components/PDF/PDFSectionHeader.svelte";
-import PDFLayout from "~/layouts/PDFLayout.astro";
+import Checkbox from "#components/Checkbox.svelte";
+import PDFHeader from "#components/PDF/PDFHeader.svelte";
+import PDFSectionHeader from "#components/PDF/PDFSectionHeader.svelte";
+import PDFLayout from "#layouts/PDFLayout.astro";
+
+changeLanguage("de");

 const base64 = Astro.url.searchParams.get("base64");
-
 if (!base64) {
-	return Astro.redirect("/404")
+    return Astro.redirect("/404");
 }
-
 const ausweis = Verbrauchsausweis.fromBase64(base64);
-
 if (!ausweis) {
-	return Astro.redirect("/404")
+    return Astro.redirect("/404");
 }
-
 ---

 <PDFLayout title="Ansichtsausweis">
--- a/src/pages/pdf/datenblatt.astro
+++ b/src/pages/pdf/datenblatt.astro
@@ -1,26 +1,25 @@
 ---
+import { changeLanguage } from "i18next";
 import moment from "moment";
 import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
 import { Dachgeschoss } from "src/lib/Ausweis/types";
-import Checkbox from "~/components/Checkbox.svelte";
-import DatenblattFooter from "~/components/DatenblattFooter.svelte";
-import DatenblattHeader from "~/components/DatenblattHeader.svelte";
-import PDFHeader from "~/components/PDF/PDFHeader.svelte";
-import PDFSectionHeader from "~/components/PDF/PDFSectionHeader.svelte";
-import PDFLayout from "~/layouts/PDFLayout.astro";
+import Checkbox from "#components/Checkbox.svelte";
+import DatenblattFooter from "#components/DatenblattFooter.svelte";
+import DatenblattHeader from "#components/DatenblattHeader.svelte";
+import PDFHeader from "#components/PDF/PDFHeader.svelte";
+import PDFSectionHeader from "#components/PDF/PDFSectionHeader.svelte";
+import PDFLayout from "#layouts/PDFLayout.astro";
+
+changeLanguage("de");

 const base64 = Astro.url.searchParams.get("base64");
-
 if (!base64) {
-	return Astro.redirect("/404")
+    return Astro.redirect("/404");
 }
-
 const ausweis = Verbrauchsausweis.fromBase64(base64);
-
 if (!ausweis) {
-	return Astro.redirect("/404")
+    return Astro.redirect("/404");
 }
-
 ---

 <PDFLayout title="Datenblatt">
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -1,11 +1,13 @@
 ---
+import { changeLanguage } from "i18next";
 import moment from "moment";
 import RegisterView from "../components/RegisterView.svelte";
 import Layout from "../layouts/Layout.astro";

+changeLanguage("de");
+
 const token = Astro.cookies.get("token").value;
 const expires = Astro.cookies.get("expires").number();
-
 const now = moment().unix();
 if (token && now < expires) {
    return Astro.redirect("/user");
--- a/src/pages/user/index.astro
+++ b/src/pages/user/index.astro
@@ -1,30 +1,29 @@
 ---
+import { changeLanguage } from "i18next";
 import moment from "moment";
-import { decodeToken } from "../../lib/JsonWebToken";
-import { User } from "../../lib/User";
-import UserLayout from "~/layouts/UserLayout.astro";
-import AusweisCard from "~/components/AusweisCard.svelte";
-import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+import { decodeToken } from "#lib/JsonWebToken";
+import { User } from "#lib/User";
+import UserLayout from "#layouts/UserLayout.astro";
+import AusweisCard from "#components/AusweisCard.svelte";
+import { Verbrauchsausweis } from "#lib/Ausweis/Verbrauchsausweis";
+
+changeLanguage("de");

 const token = Astro.cookies.get("token").value;
 const expires = Astro.cookies.get("expires").number();
-
 const now = moment().unix();
 if (!token || now > expires) {
    Astro.cookies.delete("token");
    Astro.cookies.delete("expires");
-	return Astro.redirect("/login");
+    return Astro.redirect(`/login`);
 }
-
 const parsed = decodeToken(token);
 const user = await User.fromUID(parsed.uid);
-
 if (!user) {
    Astro.cookies.delete("token");
    Astro.cookies.delete("expires");
-	return Astro.redirect("/login");
+    return Astro.redirect(`/login`);
 }
-
 ---

 <UserLayout title="Dashboard">
--- a/src/pages/verbrauchsausweis-gewerbe/index.astro
+++ b/src/pages/verbrauchsausweis-gewerbe/index.astro
@@ -1,8 +1,9 @@
 ---
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import VerbrauchsausweisGewerbeContent from "#components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte";

-import AusweisLayout from "~/layouts/AusweisLayout.astro";
-
-import VerbrauchsausweisGewerbeContent from "~/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte";
+changeLanguage("de");
 ---

 <AusweisLayout title="Verbrauchsausweis Gewerbe erstellen | IBCornelsen">
--- a/src/pages/verbrauchsausweis/erstellen.astro
+++ b/src/pages/verbrauchsausweis/erstellen.astro
@@ -1,7 +1,8 @@
 ---
-console.log(Object.fromEntries(new URLSearchParams(await Astro.request.text())))
-
+import { changeLanguage } from "i18next";

+changeLanguage("de");

+console.log(Object.fromEntries(new URLSearchParams(await Astro.request.text())));
 return Astro.redirect("/kundendaten");
 ---
--- a/src/pages/verbrauchsausweis/index.astro
+++ b/src/pages/verbrauchsausweis/index.astro
@@ -1,6 +1,9 @@
 ---
-import AusweisLayout from "~/layouts/AusweisLayout.astro";
-import VerbrauchsausweisContent from "~/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte";
+import { changeLanguage } from "i18next";
+import AusweisLayout from "#layouts/AusweisLayout.astro";
+import VerbrauchsausweisContent from "#components/Verbrauchsausweis/VerbrauchsausweisContent.svelte";
+
+changeLanguage("de");

 const uid = Astro.cookies.get("ausweis_uid").value;
 ---
--- a/src/pages/welcher-energieausweis.mdx
+++ b/src/pages/welcher-energieausweis.mdx
@@ -4,7 +4,7 @@ title: Welcher Energieausweis?
 ---

 import { BoxWithHeading } from "@ibcornelsen/ui";
-import Widget from "~/components/Widget.svelte";
+import Widget from "#components/Widget.svelte";

 # Welcher Energieausweis ist der richtige?

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,8 +21,9 @@
 		"strict": true,
 		"baseUrl": ".",
 		"paths": {
-			"~/components/*": ["./src/components/*"],
-			"~/layouts/*": ["./src/layouts/*"]
+			"#lib/*": ["./src/lib/*"],
+			"#components/*": ["./src/components/*"],
+			"#layouts/*": ["./src/layouts/*"]
 		}
 	}
 }
--- a/uploads/17693546-b281-40f2-a7b8-dcd4159245e4.jpg
+++ b/uploads/17693546-b281-40f2-a7b8-dcd4159245e4.jpg