Verbrauchsausweis Gewerbe + Bedarfsausweis

src/components/Ausweis/Ausweisart.svelte

@@ -111,7 +111,7 @@
 
 	<!-- Anzahl der Wohnungen -->
 	<div class="form-group col-md-2">
-		<HelpLabel title="Anz Wohnungen *">
+		<HelpLabel title="Anzahl Wohnungen *">
 			Bitte geben Sie hier die Anzahl der
 			Wohnungen ein, die sich im Gebäude
 			befinden.

src/components/Ausweis/Kundendaten.svelte

@@ -26,7 +26,7 @@
 			target="_self"
 			novalidate
 			class="w-full"
-			action="./kaufabschluss"
+			action="/kaufabschluss"
 		>
 			<fieldset>
 				<div class="GRB3">

src/components/Ausweis/PerformanceScore.svelte

@@ -2,6 +2,36 @@
 	export let performance: number;
 
 	let maxPerformance = 250;
+
+	/**
+	 * We use linear interpolation to scale the value between the given boundaries.
+	*/
+	function centerValueBetweenBoundaries(value: number, newMinimum: number, newMaximum: number, oldMinimum: number = 0, oldMaximum: number = 100): number {
+		// Calculate the center point of the current range
+		const center = (oldMinimum + oldMaximum) / 2;
+
+		// Shift the value to be centered around zero
+		const shiftedValue = value - center;
+
+		// Calculate the current range width
+		const rangeWidth = oldMaximum - oldMinimum;
+
+		// Calculate the new range width
+		const newRangeWidth = newMaximum - newMinimum;
+
+		// Calculate the scaling factor
+		const scalingFactor = newRangeWidth / rangeWidth;
+
+		// Scale the shifted value to fit within the new range
+		const scaledValue = shiftedValue * scalingFactor;
+
+		// Shift the scaled value back to the center of the new range
+		const centeredValue = scaledValue + ((newMaximum + newMinimum) / 2);
+
+		return centeredValue;
+	}
+
+	$: translation = Math.min(100, performance / maxPerformance * 100);
 </script>
 
 <div class="w-full rounded-lg border border-[#ffcc03] relative p-2">
@@ -11,7 +41,7 @@
 		width="20px"
 		src="/images/pfeil2.png"
 		alt=""
-		style="left: {Math.min(100, performance / maxPerformance * 100)}%;"
+		style="left: {translation}%; transform: translateX({centerValueBetweenBoundaries(translation, 50, -150, 0, 100)}%)"
 	/>
 	<img
 		class="absolute bottom-1"

src/components/Ausweis/Verbrauch.svelte

@@ -37,20 +37,24 @@
 
 	export let calorificValueFactor: number;
 
-	$: conversionFactor = fuelList.find((x) => {
+	$: conversionFactor =
-		return x.energietraeger == fuel && x.einheit == unit
+		fuelList.find((x) => {
-	})?.umrechnungsfaktor || 1;
+			return x.energietraeger == fuel && x.einheit == unit;
+		})?.umrechnungsfaktor || 1;
 
-	$: calorificValueFactor = fuelList.find((x) => {
+	$: calorificValueFactor =
-		return x.energietraeger == fuel && x.einheit == unit
+		fuelList.find((x) => {
-	})?.heizwertfaktor || 1;
+			return x.energietraeger == fuel && x.einheit == unit;
+		})?.heizwertfaktor || 1;
 
 	async function fetchClimateFactors() {
-		const url = `/api/climate_factor?start=${month}.01.${year}&end=${month}.01.${year + 2}&accuracy=years&zip=21039`;
+		const url = `/api/climate_factor?start=${month}.01.${year}&end=${month}.01.${
+			year + 2
+		}&accuracy=years&zip=21039`;
 
 		fetch(url)
-			.then(response => response.json())
+			.then((response) => response.json())
-			.then(result => {
+			.then((result) => {
 				climateFactors = Object.values(result.data);
 			});
 	}
@@ -58,9 +62,9 @@
 	const fuelMap: Record<string, string[]> = {};
 	for (const fuel of fuelList) {
 		fuelMap[fuel.energietraeger] = fuelMap[fuel.energietraeger] || [];
-		fuelMap[fuel.energietraeger].push(fuel.einheit)
+		fuelMap[fuel.energietraeger].push(fuel.einheit);
 	}
-	
+
 	let fuel: string = fuelList[0].energietraeger;
 	let unit: string = fuelList[0].einheit;
 </script>
@@ -80,7 +84,7 @@
 				bind:checked={additionalHeating}
 			/>
 		</div>
-		
+
 		<div>
 			<HelpLabel title="Brennstoff *">
 				<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
@@ -125,7 +129,11 @@
 				vor. Pellets oder Brennholz in SRm (Schüttraummetern).
 			</HelpLabel>
 			<div>
-				<select name="energietraeger_einheit_heizquelle_1" required bind:value={unit}>
+				<select
+					name="energietraeger_einheit_heizquelle_1"
+					required
+					bind:value={unit}
+				>
 					<option>Bitte auswählen</option>
 					{#each fuelMap[fuel] as unit}
 						<option value={unit}>{unit}</option>
@@ -200,7 +208,7 @@
 			<div class="column">
 				<span>von</span>
 				<input
-					class="klima "
+					class="klima"
 					value={moment(`${month}.01.${year}`)
 						.add("1", "year")
 						.format("MM.Y")}
@@ -210,7 +218,7 @@
 			<div class="column">
 				<span>von</span>
 				<input
-					class="klima "
+					class="klima"
 					value={moment(`${month}.01.${year}`)
 						.add("2", "years")
 						.format("MM.Y")}
@@ -255,8 +263,7 @@
 				<span>Verbrauch</span>
 				<input
 					name="energieverbrauch_1_heizquelle_1"
-					class="input-md zahlen "
+					type="number"
-					type="text"
 					bind:value={energyConsumption[0]}
 					required
 				/>
@@ -265,8 +272,7 @@
 				<span>Verbrauch</span>
 				<input
 					name="energieverbrauch_2_heizquelle_1"
-					class="input-md zahlen "
+					type="number"
-					type="text"
 					bind:value={energyConsumption[1]}
 					required
 				/>
@@ -275,8 +281,7 @@
 				<span>Verbrauch</span>
 				<input
 					name="energieverbrauch_3_heizquelle_1"
-					class="input-md zahlen "
+					type="number"
-					type="text"
 					bind:value={energyConsumption[2]}
 					required
 				/>
@@ -287,8 +292,7 @@
 				<span>Verbrauch</span>
 				<input
 					name="energieverbrauch_1_heizquelle_2"
-					class="input-md zahlen "
+					type="number"
-					type="text"
 					bind:value={additionalEnergyConsumption[0]}
 					disabled={!additionalHeating}
 				/>
@@ -297,8 +301,7 @@
 				<span>Verbrauch</span>
 				<input
 					name="energieverbrauch_2_heizquelle_2"
-					class="input-md zahlen "
+					type="number"
-					type="text"
 					bind:value={additionalEnergyConsumption[1]}
 					disabled={!additionalHeating}
 				/>
@@ -307,8 +310,7 @@
 				<span>Verbrauch</span>
 				<input
 					name="energieverbrauch_3_heizquelle_2"
-					class="input-md zahlen "
+					type="number"
-					type="text"
 					bind:value={additionalEnergyConsumption[2]}
 					disabled={!additionalHeating}
 				/>

src/components/Bedarfsausweis/HotWaterProductionTypes.ts

@@ -0,0 +1,28 @@
+export const hotWaterProductionTypes = [
+	"Konstanttemperatur-Kessel bis 1986",
+	"Konstanttemperatur-Kessel von 1987 bis 1994",
+	"Konstanttemperatur-Kessel ab 1995",
+	"Niedertemperatur-Kessel bis 1986",
+	"Niedertemperatur-Kessel von 1987 bis 1994",
+	"Niedertemperatur-Kessel ab 1995",
+	"Brennwert-Kessel bis 1986",
+	"Brennwert-Kessel von 1987 bis 1994",
+	"Brennwert-Kessel ab 1995",
+	"Brennwertkessel verbessert ab 1999",
+	"Elektro-Wärmepumpe (Außenluft) ab 1995",
+	"Elektro-Wärmepumpe (Erdreich) von 1979 bis 1994",
+	"Elektro-Wärmepumpe (Erdreich) ab 1995",
+	"Elektro-Wärmepumpe (Grundwasser) ab 1995",
+	"Fernwärme-Übergabestation",
+	"zentraler elektrischer Speicher",
+	"gasbefeuerter Speicher",
+	"Therme (Umlaufwasserheizer) bis 1994",
+	"Therme (Umlaufwasserheizer) ab 1995",
+	"Brennwert-Therme ab 1995",
+	"dezentraler elektrischer Kleinspeicher",
+	"dezentraler elektrischer Durchlauferhitzer",
+	"dezentraler Gas-Durchlauferhitzer bis 1994",
+	"dezentraler Gas-Durchlauferhitzer ab 1995",
+	"Elektro-Wärmepumpe (Außenluft) von 1979 bis 1994",
+	"Elektro-Wärmepumpe (Grundwasser) von 1979 bis 1994"
+]

src/components/Kaufabschluss/Kaufabschluss.svelte

@@ -0,0 +1,130 @@
+<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";
+
+	const prices = [45, 60, 160];
+</script>
+
+<div class="gap-8 items-center mb-8 grid grid-cols-2">
+	<div>
+		<h1>Verbrauchsausweis erstellen - 45€</h1>
+		<ProgressBar progress={100} />
+	</div>
+	<div />
+</div>
+
+<form action="FORM/transfer/VA_3to4.php" method="POST" novalidate>
+	<fieldset>
+		<div class="grid grid-cols-2 gap-6">
+			<PriceContainer {prices} />
+
+			<KundendatenContainer />
+
+			<div class="GRB">
+				<h4>Bitte wählen sie ihre Bezahlmethode aus.</h4>
+				<div class="flex-row justify-between">
+					<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>
+		</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>
+</form>
+
+<style>
+	:global(.GRB) {
+		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
+		background: linear-gradient(
+			135deg,
+			rgba(252, 234, 187, 1) 0%,
+			rgba(253, 235, 189, 1) 52%,
+			rgba(251, 223, 147, 1) 100%
+		);
+	}
+
+	:global(.headline) {
+		@apply text-lg;
+	}
+
+	:global(.radio-inline) {
+		@apply flex flex-row gap-2;
+	}
+
+	:global(.checkbox-inline) {
+		@apply flex flex-row gap-2;
+	}
+
+	:global(input[type="checkbox"]) {
+		width: auto;
+	}
+
+	:global(table, td) {
+		@apply border-none;
+	}
+</style>

src/components/Kaufabschluss/PriceContainer.svelte

@@ -5,19 +5,19 @@
 	export let prices: number[];
 
 	let basePrice: number = prices[0];
-	let Qualitätsdruck: boolean;
+	let Printing: boolean;
 	let Aushang: boolean;
 	let SameDayService: boolean;
-	let TelefonischeBeratung: boolean;
+	let TelephoneAdvice: boolean;
 
-	$: price = basePrice + (Qualitätsdruck ? 9 : 0) + (Aushang ? 10 : 0) + (SameDayService ? 29 : 0) + (TelefonischeBeratung ? 75 : 0);
+	$: price = basePrice + (Printing ? 9 : 0) + (Aushang ? 10 : 0) + (SameDayService ? 29 : 0) + (TelephoneAdvice ? 75 : 0);
 </script>
 
 <div class="GRB">
 	<table>
 		<tr>
 			<td><strong>Produkt:</strong></td>
-			<td><input type="text" value="Verbrauchsausweis" readonly /> </td>
+			<td><strong>Verbrauchsausweis</strong></td>
 		</tr>
 		<tr>
 			<td><strong>Beschreibung:</strong></td>
@@ -34,42 +34,19 @@
 		<tr>
 			<td>Netto-Preis</td>
 			<td
-				><input
+				><strong>{(price * 0.81).toFixed(2) + "€"}</strong></td
-					style="width:100%;text-align:right;"
-					type="text"
-					id="Preisnetto"
-					name="Preisnetto"
-					value={(price * 0.81).toFixed(2) + "€"}
-					readonly
-				/></td
 			>
 		</tr>
 		<tr>
 			<td>19% gesetzl. MwSt.</td>
 			<td
-				><input
+				><strong>{(price * 0.19).toFixed(2) + "€"}</strong></td
-					style="width:100%;text-align:right;"
-					type="text"
-					id="Preismwst"
-					name="Preismwst"
-					value={(price * 0.19).toFixed(2) + "€"}
-					readonly
-				/></td
 			>
 		</tr>
 		<tr>
 			<td>Preis inkl. MwSt.</td>
 			<td
-				><input
+				><strong>{price + "€"}</strong>
-					style="width:100%;text-align:right;font-weight:bold;"
-					type="text"
-					id="Preisbrutto"
-					name="Preisbrutto"
-					value={price + "€"}
-					readonly
-				/>
-
-				<input type="hidden" id="Preiskomplett" name="Preiskomplett" />
 			</td>
 		</tr>
 	</table>
@@ -121,7 +98,7 @@
 				><input
 					type="checkbox"
 					class="IGZusatzleistung"
-					bind:checked={Qualitätsdruck}
+					bind:checked={Printing}
 					name="QD"
 				/>
 			</td>
@@ -160,7 +137,7 @@
 				><input
 					type="checkbox"
 					class="IGZusatzleistung"
-					bind:checked={TelefonischeBeratung}
+					bind:checked={TelephoneAdvice}
 					name="NA"
 				/>
 			</td>

src/components/Label.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+	export let name: string = "";
+</script>
+
 <div class="flex flex-row justify-between mb-2">
-	<label class="text-base font-medium"><slot></slot></label>
+	<label class="text-base font-medium" for={name}><slot></slot></label>
 </div>

src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-	import ProgressBar from "~/components/Ausweis/Progressbar.svelte";
+	import Progressbar from "~/components/Ausweis/Progressbar.svelte";
 	import Hilfe from "~/components/Ausweis/Hilfe.svelte";
 	import HelpLabel from "~/components/HelpLabel.svelte";
 	import Verbrauch from "~/components/Ausweis/Verbrauch.svelte";
@@ -11,6 +11,7 @@
 	import DaemmungImage from "~/components/Ausweis/DaemmungImage.svelte";
 	import AusweisPreviewContainer from "~/components/Ausweis/AusweisPreviewContainer.svelte";
 	import { calculateEnergyPerformanceScore } from "./energyPerformanceCalculation";
+	import ZipSearch from "../ZIPSearch.svelte";
 
 	let additionalHeating: boolean = false;
 	let heatedWaterIncluded: boolean = false;
@@ -25,34 +26,48 @@
 
 	let area = 0;
 	let energyPerformance = 0;
+	let zip: string = "";
+	let city: string = "";
 
 	$: {
-		energyPerformance = calculateEnergyPerformanceScore(energyConsumption, additionalEnergyConsumption, heatedWaterPortion, climateFactors, area * (hasCellar ? 1.35 : 1.2), conversionFactor, calorificValueFactor);
+		energyPerformance = calculateEnergyPerformanceScore(
-		console.log(energyPerformance)
+			energyConsumption,
+			additionalEnergyConsumption,
+			heatedWaterPortion,
+			climateFactors,
+			area * (hasCellar ? 1.35 : 1.2),
+			conversionFactor,
+			calorificValueFactor
+		);
 	}
 
 	let constructionYear: number;
 	let apartmentCount: number;
-	let certificateReason: "Vermietung" | "Neubau" | "Verkauf" | "Modernisierung" | "Sonstiges";
+	let certificateReason:
+		| "Vermietung"
+		| "Neubau"
+		| "Verkauf"
+		| "Modernisierung"
+		| "Sonstiges";
 	let sanitationStatus: boolean;
 
 	let needsRequirementCertificate: boolean = false;
 
-	$: needsRequirementCertificate = (
+	$: needsRequirementCertificate =
 		(constructionYear < 1978 &&
-		apartmentCount <= 4 &&
+			apartmentCount <= 4 &&
 			sanitationStatus == false &&
-			(certificateReason == "Vermietung" || certificateReason == "Sonstiges")) ||
+			(certificateReason == "Vermietung" ||
-			certificateReason == "Neubau" ||
+				certificateReason == "Sonstiges")) ||
+		certificateReason == "Neubau" ||
 		certificateReason == "Modernisierung" ||
-		certificateReason == "Verkauf"
+		certificateReason == "Verkauf";
-	)
 </script>
 
 <div class="flex flex-row gap-8 items-center mb-8">
 	<div class="flex flex-col w-full">
 		<h1>Verbrauchsausweis erstellen - 45€</h1>
-		<ProgressBar progress={0} />
+		<Progressbar progress={0} />
 	</div>
 
 	<PerformanceScore performance={energyPerformance} />
@@ -73,9 +88,17 @@
 			<Label>A - Prüfung der Ausweisart</Label>
 		</div>
 
-		<Ausweisart bind:constructionYear bind:apartmentCount bind:certificateReason bind:sanitationStatus />
+		<Ausweisart
+			bind:constructionYear
+			bind:apartmentCount
+			bind:certificateReason
+			bind:sanitationStatus
+		/>
 
-		<div class="flex flex-col p-4" class:hidden={!needsRequirementCertificate}>
+		<div
+			class="flex flex-col p-4"
+			class:hidden={!needsRequirementCertificate}
+		>
 			<div class="form-group col-md-9">
 				<HelpLabel
 					title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
@@ -88,7 +111,9 @@
 			</div>
 
 			<div class="form-group col-md-3">
-				<a class="button" href="/bedarfsausweis">Bedarfsausweis erstellen</a>
+				<a class="button" href="/bedarfsausweis"
+					>Bedarfsausweis erstellen</a
+				>
 			</div>
 		</div>
 
@@ -101,104 +126,91 @@
 			>
 		</div>
 
-		<div class="col-md-12">
+		<div class="GRB">
-			<div class="GRB">
+			<!-- Strasse -->
-				<!-- Strasse -->
+			<div class="form-group col-md-4">
-				<div class="form-group col-md-4">
+				<HelpLabel title="Straße, Hausnummer *">
-					<HelpLabel title="Straße, Hausnummer *">
+					Bitte geben Sie hier die Straße und Hausnummer des
-						Bitte geben Sie hier die Straße und Hausnummer des
+					Gebäudes ein.
-						Gebäudes ein.
+				</HelpLabel>
-					</HelpLabel>
+				<div>
-					<div>
+					<input
-						<input
+						name="IGstrasse"
-							name="IGstrasse"
+						class="input-md strasse"
-							class="input-md strasse"
+						type="text"
-							type="text"
+						autocomplete="off"
-							autocomplete="off"
+						required
-							required
+						data-msg-minlength="min. 5 Zeichen"
-							data-msg-minlength="min. 5 Zeichen"
+						data-msg-maxlength="max. 40 Zeichen"
-							data-msg-maxlength="max. 40 Zeichen"
+					/>
-						/>
-					</div>
 				</div>
+			</div>
 
-				<!-- PLZ -->
+			<!-- PLZ -->
-				<div class="form-group col-md-4 PLZ">
+			<div class="form-group col-md-4 PLZ">
-					<HelpLabel title="PLZ *">
+				<ZipSearch bind:zip bind:city name="zip" />
-						Bitte geben Sie hier die PLZ des Gebäudes ein.
+			</div>
-					</HelpLabel>
-					<div>
-						<input
-							name="IGplz"
-							class="input-md klima CHECK"
-							type="text"
-							required
-							autocomplete="off"
-							maxlength="5"
-						/>
-						<div />
-					</div>
-				</div>
 
-				<!-- IGort: readonly entfernt - Nelson -->
+			<!-- IGort: readonly entfernt - Nelson -->
-				<div class="form-group col-md-4">
+			<div class="form-group col-md-4">
-					<HelpLabel title="Ort *">
+				<HelpLabel title="Ort *">
-						Ort des Gebäudes wird automatisch ermittelt.
+					Ort des Gebäudes wird automatisch ermittelt.
-					</HelpLabel>
+				</HelpLabel>
-					<div>
+				<div>
-						<input
+					<input
-							name="IGort"
+						name="IGort"
-							class="input-md buchstaben"
+						class="input-md buchstaben"
-							type="text"
+						readonly={true}
-						/>
+						bind:value={city}
-					</div>
+						type="text"
+					/>
 				</div>
-				<!-- Wohnfläche -->
+			</div>
-				<div class="form-group col-md-4">
+			<!-- Wohnfläche -->
-					<HelpLabel title="Wohnfläche m² *">
+			<div class="form-group col-md-4">
-						Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
+				<HelpLabel title="Wohnfläche m² *">
-						Dabei handelt es sich um die Wohnfläche abzüglich
+					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
-						vorhandener Flächen die sich außerhalb des Gebäudes
+					Dabei handelt es sich um die Wohnfläche abzüglich
-						befinden. (Balkone, Terassen,etc.).
+					vorhandener Flächen die sich außerhalb des Gebäudes
-					</HelpLabel>
+					befinden. (Balkone, Terassen,etc.).
-					<div>
+				</HelpLabel>
-						<input
+				<div>
-							name="IGflaeche"
+					<input
-							maxlength="4"
+						name="IGflaeche"
-							class="input-md zahlen CHECK"
+						maxlength="4"
-							required
+						type="number"
-							autocomplete="off"
+						required
-							data-rule-minlength="2"
+						autocomplete="off"
-							data-msg-minlength="min. 2 Zeichen"
+						data-rule-minlength="2"
-							bind:value={area}
+						data-msg-minlength="min. 2 Zeichen"
-						/>
+						bind:value={area}
-					</div>
+					/>
 				</div>
+			</div>
 
-				<!-- Keller -->
+			<!-- Keller -->
-				<div class="form-group col-md-4">
+			<div class="form-group col-md-4">
-					<Label>Keller *</Label>
+				<Label>Keller *</Label>
-					<div>
+				<div>
-						<select name="IGkeller" class="CHECK" required bind:value={hasCellar}>
+					<select name="IGkeller" required bind:value={hasCellar}>
-							<option>Bitte auswählen</option>
+						<option>Bitte auswählen</option>
-							<option value={false}>nicht vorhanden</option>
+						<option value={false}>nicht vorhanden</option>
-							<option value={false}>unbeheizt</option>
+						<option value={false}>unbeheizt</option>
-							<option value={true}>beheizt</option>
+						<option value={true}>beheizt</option>
-						</select>
+					</select>
-					</div>
 				</div>
+			</div>
 
-				<!-- Dachgeschoss -->
+			<!-- Dachgeschoss -->
-				<div class="form-group col-md-4">
+			<div class="form-group col-md-4">
-					<Label>Dachgeschoss *</Label>
+				<Label>Dachgeschoss *</Label>
-					<div>
+				<div>
-						<select name="IGdach" class="form-control" required>
+					<select name="IGdach" class="form-control" required>
-							<option>Bitte auswählen</option>
+						<option>Bitte auswählen</option>
-							<option value="dnein">nicht vorhanden</option>
+						<option value="dnein">nicht vorhanden</option>
-							<option value="dub">unbeheizt</option>
+						<option value="dub">unbeheizt</option>
-							<option value="dbh">beheizt</option>
+						<option value="dbh">beheizt</option>
-						</select>
+					</select>
-					</div>
 				</div>
 			</div>
 		</div>
@@ -210,7 +222,14 @@
 		</div>
 
 		<div class="GRB">
-			<Verbrauch bind:additionalHeating bind:energyConsumption bind:additionalEnergyConsumption bind:climateFactors bind:conversionFactor bind:calorificValueFactor />
+			<Verbrauch
+				bind:additionalHeating
+				bind:energyConsumption
+				bind:additionalEnergyConsumption
+				bind:climateFactors
+				bind:conversionFactor
+				bind:calorificValueFactor
+			/>
 		</div>
 
 		<hr />
@@ -247,7 +266,6 @@
 				<input
 					name="IGwarmwasser"
 					maxlength="2"
-					class="input-md zahlen CHECK"
 					type="text"
 					bind:value={heatedWaterPortion}
 					disabled={!heatedWaterIncluded}
@@ -264,7 +282,6 @@
 				<input
 					name="IGwarmwasser2"
 					maxlength="3"
-					class="input-md zahlen"
 					type="text"
 					autocomplete="off"
 					disabled={!additionalHeating}
@@ -443,7 +460,6 @@
 					<input
 						name="IGleer"
 						maxlength="2"
-						class="input-md zahlen"
 						type="text"
 						autocomplete="off"
 					/>
@@ -768,12 +784,10 @@
 
 		<hr />
 
-		<div class="form-group col-md-12">
+		<Label
-			<Label
+			>G - Hier können Sie ein Gebäudebild hochladen und sich Ihren
-				>G - Hier können Sie ein Gebäudebild hochladen und sich Ihren
+			Energieausweis als PDF anschauen</Label
-				Energieausweis als PDF anschauen</Label
+		>
-			>
-		</div>
 
 		<AusweisPreviewContainer />
 
@@ -784,25 +798,25 @@
 	</fieldset>
 </form>
 
-<style is:global>
+<style>
 	:global(.GRB) {
 		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
 		background: linear-gradient(
-		135deg,
+			135deg,
-		rgba(252, 234, 187, 1) 0%,
+			rgba(252, 234, 187, 1) 0%,
-		rgba(253, 235, 189, 1) 52%,
+			rgba(253, 235, 189, 1) 52%,
-		rgba(251, 223, 147, 1) 100%
+			rgba(251, 223, 147, 1) 100%
-	);
+		);
 	}
 
 	:global(.GRB3) {
 		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
 		background: linear-gradient(
-		135deg,
+			135deg,
-		rgba(252, 234, 187, 1) 0%,
+			rgba(252, 234, 187, 1) 0%,
-		rgba(253, 235, 189, 1) 52%,
+			rgba(253, 235, 189, 1) 52%,
-		rgba(251, 223, 147, 1) 100%
+			rgba(251, 223, 147, 1) 100%
-	);
+		);
 	}
 
 	:global(.headline) {

src/components/Verbrauchsausweis/energyPerformanceCalculation.ts

@@ -31,7 +31,7 @@ export function calculateEnergyPerformanceScore(
 		heatingPortion * (energyConsumptionKWh[2] + additionalEnergyConsumptionKWh[2]) * climateFactors[2] +
 		(waterHeatingPortion / 100) * (energyConsumptionKWh[2] + additionalEnergyConsumptionKWh[2])) /
 	3 /
-	area;
+	(area || 1);
 }
 
 function convertEnergyConsumptionToKWh(consumption: number, conversionFactor: number, calorificValueFactor: number): number {

src/components/VerbrauchsausweisGewerbe/BuildingTypes.ts

@@ -0,0 +1,118 @@
+export const buildingTypes = [
+	"Hotels ohne Stern, Pensionen, Gasthäuser, Hotels garni",
+	"Hotels mit 1 und 2 Sternen",
+	"Hotels mit 3 Sterne",
+	"Hotels mit 4 und 5 Sternen",
+	"Gästehäuser, Vereinsheime",
+	"Studentenwohnheime",
+	"Ausschankwirtschaft",
+	"Speisegaststätte/Restaurant",
+	"Kantinen/Mensen",
+	"Kino",
+	"Opernhäuser, Theatergebäude",
+	"Saalbauten, Stadthallen",
+	"Spielcasinos",
+	"Freizeitzentren, Jugendhäuser, Gemeindehäuser",
+	"Sporthallen",
+	"Mehrzweckhallen",
+	"Schwimmhallen, Hallenbäder",
+	"Sportheim (Vereinsheim)",
+	"Handel Non-food bis 300 qm",
+	"Handel Non-food bis 2000 qm",
+	"Handel Food bis 300 qm",
+	"Handel Food bis 2000 qm",
+	"Kaufhäuser, Warenhäuser, Einkaufszentren über 2000 qm",
+	"Krankenhäuser bis 250 Betten",
+	"Krankenhäuser von 251 bis 450 Betten",
+	"Krankenhäuser von 451 bis 650 Betten",
+	"Krankenhäuser von 651 bis 1000 Betten",
+	"Krankenhäuser mit über 1000 Betten",
+	"Flughafen, Terminal",
+	"Flughafen, Frachthallen",
+	"Flughafen, Wartung/Hangar",
+	"Flughafen, Werkstätten",
+	"Tiefgaragen, Parkhäuser",
+	"Bürogebäude, nur beheizt",
+	"Bürogebäude, temperiert, mech. belüftet",
+	"Bürogebäude mit Vollklimaanlage",
+	"Parlamentsgebäude",
+	"Gerichtsgebäude < 3.500",
+	"Gerichtsgebäude > 3.500",
+	"Verwaltungsgebäude < 3.500",
+	"Verwaltungsgebäude > 3.500",
+	"Ministerien",
+	"Ämtergebäude < 3.500",
+	"Ämtergebäude > 3.500",
+	"Krankenkassengebäude, Rathäuser, Sozialämter",
+	"Finanzämter < 3.500",
+	"Finanzämter > 3.500",
+	"Verwaltungsgebäude mit höherer techn. Ausstattung1",
+	"Polizeidienstgebäude < 3.500",
+	"Polizeidienstgebäude > 3.500",
+	"Polizeiinspektionen, Kommissariate, Kriminalämter, Reviere < 3.500",
+	"Polizeiinspektionen, Kommissariate, Kriminalämter, Reviere > 3.500",
+	"Zollämter, -Stationen, Grenzabfertigung",
+	"Rechenzentren",
+	"Gebäude für wissenschaftliche Lehre",
+	"Hörsaalgebäude",
+	"Institutsgebäude für Lehre und Forschung < 3.500",
+	"Institutsgebäude für Lehre und Forschung > 3.500",
+	"Institutsgebäude I < 3.500",
+	"Institutsgebäude I > 3.500",
+	"Institutsgebäude II *",
+	"Institutsgebäude III *",
+	"Institutsgebäude IV *",
+	"Institutsgebäude V *",
+	"Institutsgebäude für Forschung und Untersuchung",
+	"Fachhochschulen",
+	"Gebäude des Gesundheitswesens",
+	"Krankenhäuser und Unikliniken für Akutkranke",
+	"Schulen < 3.500",
+	"Schulen > 3.500",
+	"Allgemeinbildende Schulen < 3.500",
+	"Allgemeinbildende Schulen > 3.500",
+	"Grundschulen < 3.500",
+	"Grundschulen > 3.500",
+	"Hauptschulen",
+	"Realschulen",
+	"Gymnasien",
+	"Gesamtschulen",
+	"Berufsbildende Schulen < 3.500",
+	"Berufsbildende Schulen > 3.500",
+	"Sonderschulen",
+	"Kindertagesstätten",
+	"Weiterbildungseinrichtungen",
+	"Sportbauten",
+	"Hallen (ohne Schwimmhallen)",
+	"Schwimmhallen",
+	"Gebäude für Sportplatz- und Freibade anlagen",
+	"Gebäude für Freibadeanlagen einschl. Außenanlagen",
+	"Gemeinschaftsstätten < 3.500",
+	"Gemeinschaftsstätten > 3.500",
+	"Gemeinschaftsunterkünfte",
+	"Betreuungseinrichtungen",
+	"Gaststätten",
+	"Mensen",
+	"Beherbergungsstätten",
+	"Gebäude für Produktion, Werkstätten, Lagergebäude < 3.500",
+	"Gebäude für Produktion, Werkstätten, Lagergebäude > 3.500",
+	"Land- und forstwirtschaftliche Produktionsstätten",
+	"Verkaufsstätten",
+	"Betriebs- und Werkstätten",
+	"Gebäude für Lagerung",
+	"Garagengebäude",
+	"Gebäude für öffentliche Bereitschaftsdienste < 3.500",
+	"Gebäude für öffentliche Bereitschaftsdienste > 3.500",
+	"Straßenmeistereien",
+	"Bauhöfe",
+	"Feuerwehren",
+	"THW-Höfe",
+	"Bauwerke für technische Zwecke",
+	"Gebäude für kulturelle und musische Zwecke < 3.500",
+	"Gebäude für kulturelle und musische Zwecke > 3.500",
+	"Ausstellungsgebäude",
+	"Bibliotheksgebäude",
+	"Veranstaltungsgebäude",
+	"Gemeinschaftshäuser",
+	"Justizvollzugsanstalten",
+];

src/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte

@@ -0,0 +1,905 @@
+<script lang="ts">
+	import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "~/components/Ausweis/Progressbar.svelte";
+	import Hilfe from "~/components/Ausweis/Hilfe.svelte";
+	import HelpLabel from "~/components/HelpLabel.svelte";
+	import Verbrauch from "~/components/Ausweis/Verbrauch.svelte";
+	import Label from "~/components/Label.svelte";
+	import Ausweisart from "~/components/Ausweis/Ausweisart.svelte";
+	import HeizungImage from "~/components/Ausweis/HeizungImage.svelte";
+	import FensterImage from "~/components/Ausweis/FensterImage.svelte";
+	import DaemmungImage from "~/components/Ausweis/DaemmungImage.svelte";
+	import AusweisPreviewContainer from "~/components/Ausweis/AusweisPreviewContainer.svelte";
+	import ZipSearch from "../ZIPSearch.svelte";
+	import { buildingTypes } from "./BuildingTypes";
+
+	let additionalHeating: boolean = false;
+	let heatedWaterIncluded: boolean = false;
+	let heatedWaterPortion: number = 18;
+	let hasCellar: boolean = false;
+	let conversionFactor: number = 0;
+	let calorificValueFactor: number = 0;
+
+	let energyConsumption = [0, 0, 0];
+	let additionalEnergyConsumption = [0, 0, 0];
+	let climateFactors = [0, 0, 0];
+
+	let area = 0;
+	let energyPerformance = 0;
+	let zip: string = "";
+	let city: string = "";
+
+	let constructionYear: number;
+	let apartmentCount: number;
+	let certificateReason:
+		| "Vermietung"
+		| "Neubau"
+		| "Verkauf"
+		| "Modernisierung"
+		| "Sonstiges";
+	let sanitationStatus: boolean;
+
+	let needsRequirementCertificate: boolean = false;
+
+	$: needsRequirementCertificate =
+		(constructionYear < 1978 &&
+			apartmentCount <= 4 &&
+			sanitationStatus == false &&
+			(certificateReason == "Vermietung" ||
+				certificateReason == "Sonstiges")) ||
+		certificateReason == "Neubau" ||
+		certificateReason == "Modernisierung" ||
+		certificateReason == "Verkauf";
+</script>
+
+<div class="flex flex-row gap-8 items-center mb-8">
+	<div class="flex flex-col w-full">
+		<h1>Verbrauchsausweis Gewerbe erstellen - 65€</h1>
+		<Progressbar progress={0} />
+	</div>
+
+	<PerformanceScore performance={energyPerformance} />
+</div>
+
+<form method="post" action="/verbrauchsausweis/erstellen">
+	<fieldset
+		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
+	>
+		<div class="flex flex-row justify-between">
+			<a class="button" href="/speichern">Später Weitermachen</a>
+			<Hilfe />
+		</div>
+
+		<hr />
+
+		<div>
+			<Label>A - Prüfung der Ausweisart</Label>
+		</div>
+
+		<Ausweisart
+			bind:constructionYear
+			bind:apartmentCount
+			bind:certificateReason
+			bind:sanitationStatus
+		/>
+		<div
+			class="flex flex-col p-4"
+			class:hidden={!needsRequirementCertificate}
+		>
+			<div class="form-group col-md-9">
+				<HelpLabel
+					title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
+				>
+					Der Bedarfsausweis ist die etwas umfangreichere Berechnung.
+					Sie benötigen z.B. Länge, Breite und Geschoßhöhe des
+					Gebäudes. Auch müssen genauere Angaben zur Anlagentechnik
+					gemacht werden.
+				</HelpLabel>
+			</div>
+
+			<div>
+				<a class="button" href="/bedarfsausweis"
+					>Bedarfsausweis erstellen</a
+				>
+			</div>
+		</div>
+		<hr />
+		<div>
+			<Label
+				>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche,
+				Kellerund Dachgeschoss</Label
+			>
+		</div>
+
+		<div class="GRB">
+			<!-- Strasse -->
+			<div class="form-group col-md-4">
+				<HelpLabel title="Straße, Hausnummer *">
+					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+					ein.
+				</HelpLabel>
+				<div>
+					<input
+						name="IGstrasse"
+						class="input-md strasse"
+						type="text"
+						autocomplete="off"
+						required
+						data-msg-minlength="min. 5 Zeichen"
+						data-msg-maxlength="max. 40 Zeichen"
+					/>
+				</div>
+			</div>
+
+			<!-- PLZ -->
+			<div class="form-group col-md-4 PLZ">
+				<ZipSearch bind:zip bind:city name="zip" />
+			</div>
+
+			<!-- IGort: readonly entfernt - Nelson -->
+			<div class="form-group col-md-4">
+				<HelpLabel title="Ort *">
+					Ort des Gebäudes wird automatisch ermittelt.
+				</HelpLabel>
+				<div>
+					<input
+						name="IGort"
+						class="input-md buchstaben"
+						readonly={true}
+						bind:value={city}
+						type="text"
+					/>
+				</div>
+			</div>
+			<!-- Wohnfläche -->
+			<div class="form-group col-md-4">
+				<HelpLabel title="Wohnfläche m² *">
+					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
+					Dabei handelt es sich um die Wohnfläche abzüglich
+					vorhandener Flächen die sich außerhalb des Gebäudes
+					befinden. (Balkone, Terassen,etc.).
+				</HelpLabel>
+				<div>
+					<input
+						name="IGflaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={area}
+					/>
+				</div>
+			</div>
+
+			<!-- Keller -->
+			<div class="form-group col-md-4">
+				<Label>Keller *</Label>
+				<div>
+					<select name="IGkeller" required bind:value={hasCellar}>
+						<option>Bitte auswählen</option>
+						<option value={false}>nicht vorhanden</option>
+						<option value={false}>unbeheizt</option>
+						<option value={true}>beheizt</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Dachgeschoss -->
+			<div class="form-group col-md-4">
+				<Label>Dachgeschoss *</Label>
+				<div>
+					<select name="IGdach" class="form-control" required>
+						<option>Bitte auswählen</option>
+						<option value="dnein">nicht vorhanden</option>
+						<option value="dub">unbeheizt</option>
+						<option value="dbh">beheizt</option>
+					</select>
+				</div>
+			</div>
+		</div>
+		<!-- 2-container-close -->
+		<hr />
+		<div>
+			<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
+		</div>
+
+		<div class="GRB">
+			<Verbrauch
+				bind:additionalHeating
+				bind:energyConsumption
+				bind:additionalEnergyConsumption
+				bind:climateFactors
+				bind:conversionFactor
+				bind:calorificValueFactor
+			/>
+		</div>
+		<hr />
+		<div>
+			<div>
+				<div class="GRB">
+					<!-- Anteil WW enthalten -->
+					<div class="flex flex-col">
+						<div class="flex flex-row gap-6">
+							<label class="radio-inline"
+								><input
+									type="checkbox"
+									class="IGwwbool"
+									name="IGwwbool"
+									bind:checked={heatedWaterIncluded}
+								/>Warmwasser im Verbrauch enthalten</label
+							>
+						</div>
+					</div>
+
+					<!-- Warmwasser Antel -->
+					<div class="form-group col-md-2">
+						<HelpLabel title="% Anteil Warmwasser">
+							Wenn bekannt geben Sie den Anteil der
+							Warmwasser-Versorgung hier ein. Standardmäßig wird
+							ein Anteil von 18% angenommen.
+						</HelpLabel>
+
+						<input
+							name="IGwarmwasser"
+							maxlength="2"
+							type="text"
+							bind:value={heatedWaterPortion}
+							disabled={!heatedWaterIncluded}
+							autocomplete="off"
+						/>
+					</div>
+
+					<div class="form-group col-md-2">
+						<HelpLabel title="zusätzliche Heizquelle">
+							Wenn bekannt geben Sie den Anteil der
+							Warmwasser-Versorgung von der zusätzlichen
+							Heizquelle hier ein. Standardmäßig wird ein Anteil
+							von 18% angenommen.
+						</HelpLabel>
+						<input
+							name="IGwarmwasser2"
+							maxlength="3"
+							type="text"
+							autocomplete="off"
+							disabled={!additionalHeating}
+						/>
+					</div>
+
+					<!-- Alternative Energieversorgungssyteme -->
+					<div class="form-group col-md-5">
+						<HelpLabel
+							title="Alternative Energieversorgungssysteme genutzt für "
+						>
+							Bitte setzen Sie den Haken falls nachhaltige
+							CO2-Effiziente Heizungssysteme vorhanden sind. Das
+							wäre beispielsweise bei Pelletofen, Wärmepumpe,
+							BHKW, Solarsystem, etc. der Fall.
+						</HelpLabel>
+						<div class="flex flex-row gap-4">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGversorgungssysteme1"
+									value="Heizung"
+								/>Heizung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGversorgungssysteme2"
+									value="Warmwasser"
+								/>Warmwasser</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGversorgungssysteme3"
+									value="Lüftung"
+								/>Lüftung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGversorgungssysteme4"
+									value="Kühlung"
+								/>Kühlung</label
+							>
+						</div>
+					</div>
+				</div>
+				<!-- 2-container-close -->
+				<hr />
+				<div>
+					<label
+						class="headline"
+						id="headlineg"
+						style="font-size:18px;text-align:left;"
+						>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung,
+						Kühlung und Leerstand</label
+					>
+				</div>
+				<div>
+					<div class="GRB">
+						<div>
+							<!-- Gebäudetyp -->
+							<div>
+								<label class="control-label" for="objekt_typ"
+									>Gebäudetyp * <span
+										class="help1"
+										data-toggle="tooltip"
+										data-html="true"
+										title="
+  <div class='TT'>
+  Bitte wählen Sie hier den Gebäudetyp aus. 
+  </div>"
+									>
+										<img
+											src="FORM/img/question-mark.png"
+											alt="question mark"
+											class="mark20"
+										/>
+									</span>
+								</label>
+								<div>
+									<select
+										id="objekt_typ"
+										name="objekt_typ"
+										class="form-control vergleichswert CHECK"
+										required
+										autocomplete="off"
+										data-msg="Pflichtfeld"
+									>
+										{#each buildingTypes as type}
+											<option value={type}>{type}</option>
+										{/each}
+									</select>
+								</div>
+							</div>
+							<!-- Gebäudeteil -->
+							<div>
+								<label class="control-label"
+									>Gebäudeteil *
+									<span
+										class="help1"
+										data-toggle="tooltip"
+										data-html="true"
+										title="
+  <div class='TT'>
+  Bitte geben Sie hier den Gebäudeteil ein. In den meisten Fällen handelt es sich um das Gesamtgebäude. Sollte es sich allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil handeln, so sollten 2 Ausweise erstellt werden. In diesem Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil 'Gewerbe'.
+  </div>"
+									>
+										<img
+											src="/energieausweis-erstellen/FORM/img/question-mark.png"
+											alt="question mark"
+											class="mark20"
+										/>
+									</span>
+								</label>
+								<div>
+									<select
+										id="IGeil"
+										name="objekt_gebaeudeteil"
+										class="form-control"
+										required
+										autocomplete="off"
+										data-msg="Pflichtfeld"
+									>
+										<option>Bitte auswählen</option>
+										<option value="Gesamtgebäude">
+											Gesamtgebäude</option
+										>
+										<option value="Wohnen"> Wohnen</option>
+									</select>
+								</div>
+							</div>
+							<!-- Lüftung -->
+							<div class="form-group col-md-2">
+								<label
+									class="control-label"
+									for="lueftungskonzept"
+									>Lüftung durch *
+									<span
+										class="help1"
+										data-toggle="tooltip"
+										data-html="true"
+										title="
+  <div class='TT'>
+  Bitte geben Sie hier ein ob über die Fenster natürlich belüftet wird oder über eine Lüftungsanlage.
+  </div>"
+									>
+										<img
+											src="/energieausweis-erstellen/FORM/img/question-mark.png"
+											alt="question mark"
+											class="mark20"
+										/>
+									</span>
+								</label>
+								<div>
+									<select
+										id="lueftungskonzept"
+										name="lueftungskonzept"
+										class="form-control"
+										required
+										autocomplete="off"
+										data-msg="Pflichtfeld"
+									>
+										<option> Bitte auswählen</option>
+										<option value="Fensterlüftung">
+											Fensterlüftung</option
+										>
+										<option value="Schachtlüftung">
+											Schachtlüftung</option
+										>
+										<option
+											value="Lüftungsanlage ohne Wärmerückgewinnung"
+										>
+											Lüftungsanlage ohne
+											Wärmerückgewinnung</option
+										>
+										<option
+											value="Lüftungsanlage mit Wärmerückgewinnung"
+										>
+											Lüftungsanlage mit
+											Wärmerückgewinnung</option
+										>
+									</select>
+								</div>
+							</div>
+							<!-- Lüftung -->
+							<div class="form-group col-md-2">
+								<label class="control-label" for="wird_gekuehlt"
+									>Anlage Kühlung *
+									<span
+										class="help1"
+										data-toggle="tooltip"
+										data-html="true"
+										title="
+  <div class='TT'>
+  Bitte geben Sie an ob das Gebäude im Sommer zusätzlich gekühlt wird.
+  </div>"
+									>
+										<img
+											src="/energieausweis-erstellen/FORM/img/question-mark.png"
+											alt="question mark"
+											class="mark20"
+										/>
+									</span>
+								</label>
+								<div>
+									<select
+										id="wird_gekuehlt"
+										name="wird_gekuehlt"
+										class="form-control"
+										required
+										autocomplete="off"
+										data-msg="Pflichtfeld"
+									>
+										<option> Bitte auswählen</option>
+										<option value="1"> vorhanden</option>
+										<option value="0">
+											nicht vorhanden</option
+										>
+									</select>
+								</div>
+							</div>
+							<!-- Leerstand -->
+							<div class="form-group col-md-2">
+								<label class="control-label" for="leerstand"
+									>Leerstand in %
+									<span
+										class="help1"
+										data-toggle="tooltip"
+										data-html="true"
+										title="
+  <div class='TT'>
+  Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes (3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten wären dann ca. 11%.
+  </div>"
+									>
+										<img
+											src="/energieausweis-erstellen/FORM/img/question-mark.png"
+											alt="question mark"
+											class="mark20"
+										/>
+									</span>
+								</label>
+								<div>
+									<input
+										id="leerstand"
+										name="leerstand"
+										maxlength="2"
+										class="form-control input-md zahlen"
+										type="text"
+										autocomplete="off"
+										data-msg="Pflichtfeld"
+									/>
+								</div>
+							</div>
+						</div>
+						<!-- 2-row-close -->
+					</div>
+				</div>
+				<!-- 2-container-close -->
+				<hr />
+				<div class="form-group col-md-12">
+					<Label
+						>F - Bitte prüfen Sie hier die Angaben zum
+						Sanierungszustand des Gebäudes</Label
+					>
+				</div>
+
+				<div class="GRB3">
+					<HelpLabel
+						title="Heizungsanlage (bitte zutreffendes ankreuzen) *"
+					>
+						Wir benötigen diese Angaben um den allgemeinen
+						Modernisierungsstand einschätzen zu können. Bitte setzen
+						Sie den Haken wenn zutreffend. Das seit Mai 2021 gültige
+						GEG erfordert eine genauere Prüfung anhand von Fotos.
+						Bitte laden Sie ein oder mehrere Fotos der
+						Heizungsanlage bzw. des Heizungsraums hoch.
+					</HelpLabel>
+					<hr />
+
+					<div class="grid grid-cols-4">
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage1"
+									value="ZH"
+								/>Zentral/Etage</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage2"
+									value="EO"
+								/>Einzelöfen</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage3"
+									value="DH"
+								/>Durchlauferhitzer</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage4"
+									value="SK"
+								/>Standardkessel</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage5"
+									value="SSWW"
+								/>Solarsystem für Warmwasser</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage6"
+									value="WP"
+								/>Wärmepumpe</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage7"
+									value="NK"
+								/>Niedertemperaturkessel</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage8"
+									value="BWK"
+								/>Brennwertkessel</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage9"
+									value="WRGD"
+								/>Warmwasserrohre gedämmt</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage10"
+									value="HRGD"
+								/>Heizungsrohre gedämmt</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage11"
+									value="ZK"
+								/>Zirkulation</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGheizungsanlage12"
+									value="RTR"
+								/>Raumtemperaturregler</label
+							>
+						</div>
+					</div>
+				</div>
+
+				<hr />
+
+				<HeizungImage />
+
+				<hr />
+
+				<div class="GRB3">
+					<HelpLabel
+						title="Fenster/Dachfenster/Türen (bitte zutreffendes ankreuzen):*"
+					>
+						Wir benötigen diese Angaben um den allgemeinen
+						Modernisierungsstand einschätzen zu können. Bitte setzen
+						Sie den Haken wenn zutreffend.
+					</HelpLabel>
+					<hr />
+
+					<div class="grid grid-cols-4">
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach1"
+									value="EG"
+								/>Einfachglas</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach2"
+									value="DF"
+								/>Doppelverglasung</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach3"
+									value="IVG"
+								/>Isolierverglasung</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach4"
+									value="PHF"
+								/>Dreifachverglasung</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach5"
+									value="FD"
+								/>Alle Fenster dicht</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach6"
+									value="FTUD"
+								/>Fenster teilweise undicht</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach7"
+									value="TD"
+								/>Alle Türen dicht</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach8"
+									value="TUD"
+								/>Türen teilweise undicht</label
+							>
+						</div>
+						<div class="form-group col-md-3">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGfensterdach9"
+									value="RKD"
+								/>Rollladenkästen gedämmt, luftdicht</label
+							>
+						</div>
+					</div>
+				</div>
+
+				<hr />
+
+				<FensterImage />
+
+				<hr />
+
+				<div class="GRB3">
+					<div class="form-group col-md-12">
+						<HelpLabel
+							title="Wärmedämmung (bitte zutreffendes ankreuzen) *"
+						>
+							Wir benötigen diese Angaben um den allgemeinen
+							Modernisierungsstand einschätzen zu können. Bitte
+							setzen Sie den Haken wenn zutreffend. Das seit Mai
+							2021 gültige GEG erfordert eine genauere Prüfung
+							anhand von Fotos. Bitte laden Sie ein oder mehrere
+							Fotos der Außenwand und des Dachbereiches hoch.
+						</HelpLabel>
+						<hr />
+					</div>
+
+					<div class="grid grid-cols-4">
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGwaermedaemmung1"
+									value="AWD"
+								/>Außenwand gedämmt</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGwaermedaemmung2"
+									value="KWD"
+								/>Kelleraußenwand gedämmt</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGwaermedaemmung3"
+									value="KDD"
+								/>Kellerdecke gedämmt</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGwaermedaemmung4"
+									value="DGD"
+								/>Dachgeschoss gedämmt</label
+							>
+						</div>
+						<div class="form-group col-md-3 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGwaermedaemmung5"
+									value="OGDDW"
+								/>Oberste Geschossdecke gedämmt</label
+							>
+						</div>
+						<div class="form-group col-md-6 mw1">
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="IGwaermedaemmung6"
+									value="OGDD"
+								/>Oberste Geschossdecke min. 12cm gedämmt</label
+							>
+						</div>
+					</div>
+				</div>
+
+				<hr />
+
+				<DaemmungImage />
+
+				<hr />
+
+				<Label
+					>G - Hier können Sie ein Gebäudebild hochladen und sich
+					Ihren Energieausweis als PDF anschauen</Label
+				>
+
+				<AusweisPreviewContainer />
+
+				<div class="flex flex-row justify-between">
+					<Hilfe />
+					<button formnovalidate>Weiter</button>
+				</div>
+			</div>
+		</div>
+	</fieldset>
+</form>
+
+<style>
+	:global(.GRB) {
+		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
+		background: linear-gradient(
+			135deg,
+			rgba(252, 234, 187, 1) 0%,
+			rgba(253, 235, 189, 1) 52%,
+			rgba(251, 223, 147, 1) 100%
+		);
+	}
+
+	:global(.GRB3) {
+		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
+		background: linear-gradient(
+			135deg,
+			rgba(252, 234, 187, 1) 0%,
+			rgba(253, 235, 189, 1) 52%,
+			rgba(251, 223, 147, 1) 100%
+		);
+	}
+
+	:global(.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%
+		);
+	}
+
+	:global(.headline) {
+		@apply text-lg;
+	}
+
+	:global(.radio-inline) {
+		@apply flex flex-row gap-2;
+	}
+
+	:global(.checkbox-inline) {
+		@apply flex flex-row gap-2;
+	}
+
+	:global(input[type="checkbox"]) {
+		width: auto;
+	}
+</style>

src/components/ZIPSearch.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ZIPInformation } from "src/lib/ZIPInformation";
+	import Label from "./Label.svelte";
 
 	export let name: string;
 	export let readonly: boolean = false;
@@ -43,7 +44,7 @@
 <div class="relative" use:clickOutside={() => {
 	hideZipDropdown = true;
 }}>
-	<label for={name}>PLZ *</label>
+	<Label name={name}>PLZ *</Label>
 	<input
 		name={name}
 		id={name}

src/pages/bedarfsausweis-gewerbe/kaufabschluss.astro

@@ -1,427 +0,0 @@
----
-const prices = [45, 60, 160];
----
-if ($ausweisart == 'VA') {
-	$P1 = 45;
-	$P2 = 60;
-	$P3 = 160;
-	$P7 = 15;
-	$jsfile = 'VA-inputs.js';
-	$Produkt1 = 'Verbrauchsausweis online für ' . $P1 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt2 = 'Verbrauchsausweis online inkl. Beratung für ' . $P2 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt3 = 'Verbrauchsausweis offline für ' . $P3 . ' € inkl. MwSt. als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)';
-	$datena = '../energieausweis-erstellen/verbrauchsausweis-erstellen.php';
-	$Produkt = 'Verbrauchsausweis';
-}
-if ($ausweisart == 'VANW') {
-	$P1 = 65;
-	$P2 = 80;
-	$P3 = 360;
-	$P7 = 15;
-	$jsfile = 'VANW-inputs.js';
-	$Produkt1 = 'Verbrauchsausweis Gewerbe online für ' . $P1 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt2 = 'Verbrauchsausweis Gewerbe online inkl. Beratung für ' . $P2 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt3 = 'Verbrauchsausweis Gewerbe offline für ' . $P3 . ' € inkl. MwSt. als PDF per E-Mail(Sie schicken uns 3 Verbrauchsabrechnungen)';
-	$datena = '../energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php';
-	$Produkt = 'Verbrauchsausweis Gewerbe';
-}
-if ($ausweisart == 'BA') {
-	$P1 = 75;
-	$P2 = 95;
-	$P7 = 15;
-	$jsfile = 'BA-inputs.js';
-	$Produkt1 = 'Bedarfsausweis online für ' . $P1 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt2 = 'Bedarfsausweis online inkl. Beratung für ' . $P2 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt3 = "";
-	$datena = '../energieausweis-erstellen/bedarfsausweis-erstellen.php';
-	$Produkt = 'Bedarfsausweis';
-}
-$Produkt7 = 'Ausweiskorrektur für ' . $P7 . ' € inkl. MwSt.';
-
-?>
-
-
-<Layout>
-			<div id="wrapper">
-				<div style="padding:0px;">
-					<?php // include_once "$ROOT/public/energieausweis-erstellen/FORM/kaufabschluss-before.php"; ?>
-					<br>
-
-					<div class="col-md-12" id="view">
-						<div id="progress-VA_01" class="row">
-
-							<div id="progress" class="col-md-6" style="width:100%;position:relative;">
-
-								<h1 class="FORM_H1"><?php echo $headART; ?></h1>
-
-								<div class="progressC" style="display:inline-block;position:relative;">
-
-									<div class="progress">
-										<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
-									</div>
-
-									<div>
-										<a href="#">
-											<div class="progress-nr" style="left:0;">1</div>
-										</a>
-										<div class="progress-txt" style="left:-5%;">Gebäudedaten</div>
-									</div>
-
-									<div>
-										<a href="#">
-											<div class="progress-nr" style="left:50%;">2</div>
-										</a>
-										<div class="progress-txt" style="left:45%;">Kundendaten</div>
-									</div>
-
-									<div>
-										<a href="#">
-											<div class="progress-nr" style="left:100%;">3</div>
-										</a>
-										<div class="progress-txt" style="left:94%;">Kaufabschluss</div>
-									</div>
-								</div>
-
-							</div>
-
-							<?php include_once "$ROOT/public/energieausweis-erstellen/FORM/pfeil-view.php"; ?>
-
-							<div id="wrapper-input">
-
-
-								<form id="VA-abschluss" action="FORM/transfer/VA_3to4.php" method="POST" novalidate>
-									<fieldset>
-
-										<div class="col-md-12 EQ-TOP">
-											<div class="row">
-
-
-												<div class="col-md-6 EQ">
-													<div class="GRB">
-
-														<table class="tb_AB">
-															<tr>
-																<td><strong>Produkt:</strong></td>
-																<td><input style="width:100%;" type="text" value="<?php echo $Produkt; ?>" readonly>
-																</td>
-															</tr>
-															<tr>
-																<td><strong>Beschreibung:</strong></td>
-																<td>
-																	<div style="background-color: #fff; padding:1em; border:1px solid #ccc;">
-
-																		Registrierung beim DiBt<br />
-																		Prüfung durch Diplom Ingenieur<br />
-																		Energieausweis Vorschau als PDF<br />
-																	</div>
-																</td>
-															</tr>
-															<tr>
-																<td>Netto-Preis</td>
-																<td><input style="width:100%;text-align:right;" type="text" id="Preisnetto" name="Preisnetto" readonly></td>
-															</tr>
-															<tr>
-																<td>19% gesetzl. MwSt.</td>
-																<td><input style="width:100%;text-align:right;" type="text" id="Preismwst" name="Preismwst" readonly></td>
-															</tr>
-															<tr>
-																<td>Preis inkl. MwSt.</td>
-																<td><input style="width:100%;text-align:right;font-weight:bold;" type="text" id="Preisbrutto" name="Preisbrutto" readonly>
-
-																	<input type="hidden" id="Preiskomplett" name="Preiskomplett" />
-																</td>
-															</tr>
-
-
-
-
-
-														</table>
-
-													</div>
-
-													<hr class="trenner_form" />
-													<div class="GRB">
-
-														<div>
-
-															<strong>Hiermit bestelle ich folgende Version des
-																Energieausweises:<br></strong>
-
-															<table class="ka_zl">
-																<tr>
-																	<td>Verbrauchsausweis online für {prices[0]} € inkl. MwSt. als PDF per E-Mail</td>
-																	<td><input type="radio" id="Preis1" name="Preis" value="<?php echo $P1; ?>" checked/>
-																	</td>
-																</tr>
-																<tr>
-																	<td>Verbrauchsausweis online inkl. Beratung für {prices[1]} € inkl. MwSt. als PDF per E-Mail</td>
-																	<td><input type="radio" id="Preis2" name="Preis" value="<?php echo $P2; ?>" <?php if (session()->get("hilfe") == 1) { echo "checked"; } ?>/>
-																	</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' name='Preis'/>
-																	</td>
-																</tr>
-																<tr>
-																	<?php if (session()->get("hilfe") == 4 and $ausweisart == 'VANW') {
-																		echo "<td>Bedarfsausweis Gewerbe offline ab 476 € inkl. MwSt. als PDF per E-Mail (Sie schicken uns Grundriss- und Ansichtspläne zur Angebotserstellung zu)</td>
-<td><input type=\"radio\" id=\"Preis4\" name=\"Preis\" value=\"476\"  CHECKED /></td>
-</tr>
-<tr>";
-																	} ?>
-
-																</tr>
-															</table>
-														</div>
-													</div>
-
-
-													<hr class="trenner_form" />
-
-													<div class="GRB">
-
-														<table class="ka_zl">
-															<strong>Zusatzleistungen:<br></strong>
-
-															<tr>
-																<td>Qualitätsdruck per Post (zusätzlich zur PDF Version)
-																	für 9€ inkl. MwSt.</td>
-																<td><input type="checkbox" class="IGZusatzleistung" id="QD" name="QD" value="x">
-																</td>
-															</tr>
-															<tr>
-																<td>Aushang (für öffentliche Gebäude gesetzlich
-																	vorgeschrieben) für 10€ inkl. MwSt.</td>
-																<td><input type="checkbox" class="IGZusatzleistung" id="AH" name="AH" value="x">
-																</td>
-															</tr>
-															<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>
-																<td><input type="checkbox" class="IGZusatzleistung" id="SD" name="SD" value="x">
-																</td>
-															</tr>
-															<tr>
-																<td>Telefonische Energieeffizienzberatung für 75€ inkl.
-																	MwSt.</td>
-																<td><input type="checkbox" class="IGZusatzleistung" id="NA" name="NA" value="x">
-																</td>
-															</tr>
-
-														</table>
-													</div>
-
-
-
-													<hr class="trenner_form" />
-
-													<div class="GRB">
-
-
-														<a href='/energieausweis-erstellen/datenblatt.php?id=<?php echo $ausweis->public_id ?>' target="_blank">
-															<div class="pdf-datenblatt">
-																<img class="button-img" src="FORM/img/datenblatt.png" alt="Datenblatt">
-																<span style="color:black;font-weight:bold;">Datenblatt
-																</span>
-															</div>
-														</a>
-
-														<a href='/energieausweis-erstellen/ansichtsausweis.php?id=<?php echo $ausweis->public_id ?>' target="_blank">
-															<div class="pdf-anzeigen">
-																<img class="button-img" src="FORM/img/ausweis.png" alt="Ausweis">
-																<span style="color:black;font-weight:bold;">Ansichtsausweis
-																</span>
-															</div>
-														</a>
-														<div style="clear:both;"></div>
-
-													</div>
-
-
-
-												</div>
-
-
-
-
-
-												<div class="col-md-6 EQ">
-													<div class="GRB2">
-
-														<table class="tb_AB">
-															<tr>
-																<td>Kunde<input style="width:100%;" type="text" value="<?php echo prop($user, "anrede") . " " . prop($user, "vorname") . " " . prop($user, "name"); ?>" readonly>
-																</td>
-															</tr>
-															<tr>
-																<td>Telefon<input style="width:100%;" type="text" value="<?php echo prop($user, "phone"); ?>" readonly></td>
-															</tr>
-															<tr>
-																<td>E-Mail<input style="width:100%;" type="text" value="<?php echo prop($user, "email"); ?>" readonly>
-																</td>
-															</tr>
-
-															<tr>
-																<td colspan="1">
-																	<hr class="trenner_form" />
-																</td>
-															</tr>
-
-															<tr>
-																<td <?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Rechnungsempfänger<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['name']; ?>" readonly></td>
-															</tr>
-
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Zusatzzeile<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['zusatzzeile']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Strasse<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['adresse']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Telefon<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['telefon']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	E-Mail<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['email']; ?>" readonly>
-																	</td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	PLZ und Ort<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['plz'] . " " . $rechnung_adresse['ort']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?> colspan="1">
-																	<hr class="trenner_form" />
-																	</td>
-															</tr>
-															<tr>
-																<td>Versandempfänger<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "name"); ?>" readonly>
-																</td>
-															</tr>
-															<tr>
-																<td>Zusatzzeile<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "zusatzzeile"); ?>" readonly></td>
-															</tr>
-															<tr>
-																<td>Strasse<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "adresse"); ?>" readonly></td>
-															</tr>
-															<tr>
-																<td>PLZ und Ort<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "plz") . " " . prop($versand_adresse, "ort"); ?>" readonly></td>
-															</tr>
-
-
-														</table>
-
-													</div>
-												</div>
-
-											</div>
-										</div>
-
-
-
-
-										<hr class="trenner_form" />
-
-
-
-										<div style="gap: 30px; display: flex; flex-direction: row; padding: 0 15px;">
-											<div class="GRB gap-md column" style="width: 100%;" id="payment-option-container">
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/local-payment.min.js"></script>
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/client.min.js"></script>
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/paypal-checkout.min.js"></script>
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/hosted-fields.min.js"></script>
-												<input type="hidden" name="payment_id" id="payment_id_input">
-												<input type="hidden" name="payment_nonce" id="payment_nonce_input">
-												<input type="hidden" name="payment_type" id="payment_type_input">
-												<script>
-													const UNIQUE_CUSTOMER_ID = "<?php echo $ausweis->public_id ?>";
-													const BILLING_NAME = "<?php echo $rechnung_adresse['name']; ?>";
-												</script>
-												<script src="/energieausweis-erstellen/FORM/js/braintree-payment.js" async defer></script>
-												<h4>Bitte wählen sie ihre Bezahlmethode aus.</h2>
-													<div class="flex-row justify-between">
-														<div class="column gap-md">
-															<div class="payment-option-card" id="paypal-button">
-																<img src="../../images/paypal.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit PayPal">Zahlen mit PayPal</div>
-															</div>
-															<div class="payment-option-card" id="giropay-button">
-																<img src="../../images/giropay.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Giropay">Zahlen mit Giropay</div>
-															</div>
-															<div class="payment-option-card" id="sofort-button">
-																<img src="../../images/sofort.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Sofort">Zahlen mit Sofort</div>
-															</div>
-														</div>
-														<div class="column gap-md">
-															<div class="payment-option-card" id="kreditkarte-button">
-																<img src="../../images/mastercard.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Kreditkarte">Zahlen mit Kreditkarte</div>
-															</div>
-															<div class="payment-option-card" id="rechnung-button">
-																<img src="../../images/rechnung.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Rechnung">Zahlen mit Rechnung</div>
-															</div>
-															<div class="payment-option-card" id="sepa-button">
-																<img src="../../images/sepa.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit SEPA über PayPal">SEPA über PayPal</div>
-															</div>
-														</div>
-														
-													</div>
-													
-											</div>
-											<div class="GRB" style="width: 100%; padding: 15px;" id="payment-information-box"></div>
-										</div>
-									<hr class="trenner_form" />
-
-										<div class="form-group col-md-12">
-											<div class="row">
-												<div class="form-group col-md-6 " style="text-align:left; ">"
-
-													<div class="form-group col-md-6 " style="text-align:left; ">
-													<a class="weiterbutton" style="background-color: #31448e;" href=<?php echo $datena; ?>>Daten ändern</a>
-													</div>
-												</div>
-
-
-
-												<?php // TODO: FIX REGNUMMER include("$ROOT/public/energieausweis-erstellen/FORM/scripts/REGNUMMER.php"); 
-												?>
-
-
-											</div>
-										</div>
-
-
-
-									</fieldset>
-								</form>
-
-
-
-							</div>
-						</div>
-					</div>
-				</Layout>

src/pages/bedarfsausweis/index.astro

@@ -0,0 +1,55 @@
+---
+
+import AusweisLayout from "~/layouts/AusweisLayout.astro";
+
+import BedarfsausweisContent from "~/components/Bedarfsausweis/BedarfsausweisContent.svelte";
+---
+<!-- <div class="form-group col-12 col-md-12" style="padding:0;">
+	<div>
+		<div class="row">
+			<div class="form-group col-12 col-md-6">
+				<div class="form-group col-12 col-md-6">
+					<label class="control-label" style="min-width:265px;">
+						<span class="help1" data-toggle="tooltip" data-html="true" title="<div class='TT'>Es werden keine Personenbezogenen Daten gespeichert. Es werden nur die Eingabedaten zum Gebäude auf dieser Formularseite gespeichert.</div>">
+							<img src="/energieausweis-erstellen/FORM/img/question-mark.png" alt="question mark" class="mark20">
+						</span></label>
+					<button type="submit" class="weiterbutton" formaction="speichern.php" formnovalidate></button>
+				</div>
+			</div>
+			<div class="form-group col-12 col-md-6">
+				<div class="form-group col-12 col-md-6 offset-md-6">
+					<label class="control-label">
+						<span class="help1" data-toggle="tooltip" data-html="true" title="<div class='TT'>Wir helfen Ihnen bei der Eingabe. Kurze Fragen zum Formular oder der Ausweisart werden kostenfrei telefonisch beantwortet (bis 5min). Bitte kontaktieren Sie uns unter 040/209339850. Gerne nehmen wir Ihnen die Arbeit ab - Fordern Sie unseren Offline Service an und klicken auf -Hilfe anfordern- </div>">
+							<img src="/energieausweis-erstellen/FORM/img/question-mark.png" alt="question mark" class="mark20">
+						</span>
+					</label>
+					<input class="weiterbutton" onclick="javascript:toggle('hilfean')" style="background-color: #31448e;width:100%;" id="hilfeaw" type="button" value="Hilfe anfordern">
+					<script type='module' src='/energieausweis-erstellen/FORM/js/auto-fill.js' async defer></script>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group col-md-12" id="hilfean" style="display: none">
+		<div class="form-group col-md-12 pop_help">
+			<div class="form-group col-md-12">
+				Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen haben. Kurze
+				Fragen zum Formular oder der Ausweisart werden kostenfrei telefonisch unter <a href="tel:+4940209339850">040/209339850</a> beantwortet (bis 5min). Sollten
+				Sie Unterstützung bei der Erstellung benötgen oder lieber die Arbeit von unserem
+				Ingenieurbüro erledigen lassen, bieten wir Ihnen folgende Hilfen an. Bitte
+				treffen Sie Ihre Auswahl und klicken auf weiter:
+			</div>
+			<div class="row" style="margin:0em 0em 0em 2em;">
+				<div class="form-group col-md-7">Bedarfsausweis online inkl. ausführlicher telefonischer Beratung für 95€ inkl. MwSt.</div>
+				<div class="form-group col-md-5"><input type="radio" class="ausstellgrund" value="1" name="hilfe"></div>
+			</div>
+			<div class="form-group col-md-12" style="text-align:right;">
+				<button type="submit" class="weiterbutton">Kundendaten</button>
+			</div>
+		</div>
+	</div>
+</div> -->
+
+<AusweisLayout title="Bedarfsausweis erstellen | IBCornelsen">
+	<BedarfsausweisContent></BedarfsausweisContent>
+</AusweisLayout>

src/pages/kaufabschluss.astro

@@ -0,0 +1,8 @@
+---
+	import Kaufabschluss from "~/components/Kaufabschluss/Kaufabschluss.svelte";
+import AusweisLayout from "~/layouts/AusweisLayout.astro";
+---
+
+<AusweisLayout title="Kaufabschluss Verbrauchsausweis - IBCornelsen">
+	<Kaufabschluss client:load></Kaufabschluss>
+</AusweisLayout>

src/pages/verbrauchsausweis-gewerbe/index.astro

@@ -0,0 +1,10 @@
+---
+
+import AusweisLayout from "~/layouts/AusweisLayout.astro";
+
+import VerbrauchsausweisGewerbeContent from "~/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte";
+---
+
+<AusweisLayout title="Verbrauchsausweis Gewerbe erstellen | IBCornelsen">
+	<VerbrauchsausweisGewerbeContent></VerbrauchsausweisGewerbeContent>
+</AusweisLayout>

src/pages/verbrauchsausweis-gewerbe/kaufabschluss.astro

@@ -1,427 +0,0 @@
----
-const prices = [45, 60, 160];
----
-if ($ausweisart == 'VA') {
-	$P1 = 45;
-	$P2 = 60;
-	$P3 = 160;
-	$P7 = 15;
-	$jsfile = 'VA-inputs.js';
-	$Produkt1 = 'Verbrauchsausweis online für ' . $P1 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt2 = 'Verbrauchsausweis online inkl. Beratung für ' . $P2 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt3 = 'Verbrauchsausweis offline für ' . $P3 . ' € inkl. MwSt. als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)';
-	$datena = '../energieausweis-erstellen/verbrauchsausweis-erstellen.php';
-	$Produkt = 'Verbrauchsausweis';
-}
-if ($ausweisart == 'VANW') {
-	$P1 = 65;
-	$P2 = 80;
-	$P3 = 360;
-	$P7 = 15;
-	$jsfile = 'VANW-inputs.js';
-	$Produkt1 = 'Verbrauchsausweis Gewerbe online für ' . $P1 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt2 = 'Verbrauchsausweis Gewerbe online inkl. Beratung für ' . $P2 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt3 = 'Verbrauchsausweis Gewerbe offline für ' . $P3 . ' € inkl. MwSt. als PDF per E-Mail(Sie schicken uns 3 Verbrauchsabrechnungen)';
-	$datena = '../energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php';
-	$Produkt = 'Verbrauchsausweis Gewerbe';
-}
-if ($ausweisart == 'BA') {
-	$P1 = 75;
-	$P2 = 95;
-	$P7 = 15;
-	$jsfile = 'BA-inputs.js';
-	$Produkt1 = 'Bedarfsausweis online für ' . $P1 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt2 = 'Bedarfsausweis online inkl. Beratung für ' . $P2 . ' € inkl. MwSt. als PDF per E-Mail';
-	$Produkt3 = "";
-	$datena = '../energieausweis-erstellen/bedarfsausweis-erstellen.php';
-	$Produkt = 'Bedarfsausweis';
-}
-$Produkt7 = 'Ausweiskorrektur für ' . $P7 . ' € inkl. MwSt.';
-
-?>
-
-
-<Layout>
-			<div id="wrapper">
-				<div style="padding:0px;">
-					<?php // include_once "$ROOT/public/energieausweis-erstellen/FORM/kaufabschluss-before.php"; ?>
-					<br>
-
-					<div class="col-md-12" id="view">
-						<div id="progress-VA_01" class="row">
-
-							<div id="progress" class="col-md-6" style="width:100%;position:relative;">
-
-								<h1 class="FORM_H1"><?php echo $headART; ?></h1>
-
-								<div class="progressC" style="display:inline-block;position:relative;">
-
-									<div class="progress">
-										<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
-									</div>
-
-									<div>
-										<a href="#">
-											<div class="progress-nr" style="left:0;">1</div>
-										</a>
-										<div class="progress-txt" style="left:-5%;">Gebäudedaten</div>
-									</div>
-
-									<div>
-										<a href="#">
-											<div class="progress-nr" style="left:50%;">2</div>
-										</a>
-										<div class="progress-txt" style="left:45%;">Kundendaten</div>
-									</div>
-
-									<div>
-										<a href="#">
-											<div class="progress-nr" style="left:100%;">3</div>
-										</a>
-										<div class="progress-txt" style="left:94%;">Kaufabschluss</div>
-									</div>
-								</div>
-
-							</div>
-
-							<?php include_once "$ROOT/public/energieausweis-erstellen/FORM/pfeil-view.php"; ?>
-
-							<div id="wrapper-input">
-
-
-								<form id="VA-abschluss" action="FORM/transfer/VA_3to4.php" method="POST" novalidate>
-									<fieldset>
-
-										<div class="col-md-12 EQ-TOP">
-											<div class="row">
-
-
-												<div class="col-md-6 EQ">
-													<div class="GRB">
-
-														<table class="tb_AB">
-															<tr>
-																<td><strong>Produkt:</strong></td>
-																<td><input style="width:100%;" type="text" value="<?php echo $Produkt; ?>" readonly>
-																</td>
-															</tr>
-															<tr>
-																<td><strong>Beschreibung:</strong></td>
-																<td>
-																	<div style="background-color: #fff; padding:1em; border:1px solid #ccc;">
-
-																		Registrierung beim DiBt<br />
-																		Prüfung durch Diplom Ingenieur<br />
-																		Energieausweis Vorschau als PDF<br />
-																	</div>
-																</td>
-															</tr>
-															<tr>
-																<td>Netto-Preis</td>
-																<td><input style="width:100%;text-align:right;" type="text" id="Preisnetto" name="Preisnetto" readonly></td>
-															</tr>
-															<tr>
-																<td>19% gesetzl. MwSt.</td>
-																<td><input style="width:100%;text-align:right;" type="text" id="Preismwst" name="Preismwst" readonly></td>
-															</tr>
-															<tr>
-																<td>Preis inkl. MwSt.</td>
-																<td><input style="width:100%;text-align:right;font-weight:bold;" type="text" id="Preisbrutto" name="Preisbrutto" readonly>
-
-																	<input type="hidden" id="Preiskomplett" name="Preiskomplett" />
-																</td>
-															</tr>
-
-
-
-
-
-														</table>
-
-													</div>
-
-													<hr class="trenner_form" />
-													<div class="GRB">
-
-														<div>
-
-															<strong>Hiermit bestelle ich folgende Version des
-																Energieausweises:<br></strong>
-
-															<table class="ka_zl">
-																<tr>
-																	<td>Verbrauchsausweis online für {prices[0]} € inkl. MwSt. als PDF per E-Mail</td>
-																	<td><input type="radio" id="Preis1" name="Preis" value="<?php echo $P1; ?>" checked/>
-																	</td>
-																</tr>
-																<tr>
-																	<td>Verbrauchsausweis online inkl. Beratung für {prices[1]} € inkl. MwSt. als PDF per E-Mail</td>
-																	<td><input type="radio" id="Preis2" name="Preis" value="<?php echo $P2; ?>" <?php if (session()->get("hilfe") == 1) { echo "checked"; } ?>/>
-																	</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' name='Preis'/>
-																	</td>
-																</tr>
-																<tr>
-																	<?php if (session()->get("hilfe") == 4 and $ausweisart == 'VANW') {
-																		echo "<td>Bedarfsausweis Gewerbe offline ab 476 € inkl. MwSt. als PDF per E-Mail (Sie schicken uns Grundriss- und Ansichtspläne zur Angebotserstellung zu)</td>
-<td><input type=\"radio\" id=\"Preis4\" name=\"Preis\" value=\"476\"  CHECKED /></td>
-</tr>
-<tr>";
-																	} ?>
-
-																</tr>
-															</table>
-														</div>
-													</div>
-
-
-													<hr class="trenner_form" />
-
-													<div class="GRB">
-
-														<table class="ka_zl">
-															<strong>Zusatzleistungen:<br></strong>
-
-															<tr>
-																<td>Qualitätsdruck per Post (zusätzlich zur PDF Version)
-																	für 9€ inkl. MwSt.</td>
-																<td><input type="checkbox" class="IGZusatzleistung" id="QD" name="QD" value="x">
-																</td>
-															</tr>
-															<tr>
-																<td>Aushang (für öffentliche Gebäude gesetzlich
-																	vorgeschrieben) für 10€ inkl. MwSt.</td>
-																<td><input type="checkbox" class="IGZusatzleistung" id="AH" name="AH" value="x">
-																</td>
-															</tr>
-															<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>
-																<td><input type="checkbox" class="IGZusatzleistung" id="SD" name="SD" value="x">
-																</td>
-															</tr>
-															<tr>
-																<td>Telefonische Energieeffizienzberatung für 75€ inkl.
-																	MwSt.</td>
-																<td><input type="checkbox" class="IGZusatzleistung" id="NA" name="NA" value="x">
-																</td>
-															</tr>
-
-														</table>
-													</div>
-
-
-
-													<hr class="trenner_form" />
-
-													<div class="GRB">
-
-
-														<a href='/energieausweis-erstellen/datenblatt.php?id=<?php echo $ausweis->public_id ?>' target="_blank">
-															<div class="pdf-datenblatt">
-																<img class="button-img" src="FORM/img/datenblatt.png" alt="Datenblatt">
-																<span style="color:black;font-weight:bold;">Datenblatt
-																</span>
-															</div>
-														</a>
-
-														<a href='/energieausweis-erstellen/ansichtsausweis.php?id=<?php echo $ausweis->public_id ?>' target="_blank">
-															<div class="pdf-anzeigen">
-																<img class="button-img" src="FORM/img/ausweis.png" alt="Ausweis">
-																<span style="color:black;font-weight:bold;">Ansichtsausweis
-																</span>
-															</div>
-														</a>
-														<div style="clear:both;"></div>
-
-													</div>
-
-
-
-												</div>
-
-
-
-
-
-												<div class="col-md-6 EQ">
-													<div class="GRB2">
-
-														<table class="tb_AB">
-															<tr>
-																<td>Kunde<input style="width:100%;" type="text" value="<?php echo prop($user, "anrede") . " " . prop($user, "vorname") . " " . prop($user, "name"); ?>" readonly>
-																</td>
-															</tr>
-															<tr>
-																<td>Telefon<input style="width:100%;" type="text" value="<?php echo prop($user, "phone"); ?>" readonly></td>
-															</tr>
-															<tr>
-																<td>E-Mail<input style="width:100%;" type="text" value="<?php echo prop($user, "email"); ?>" readonly>
-																</td>
-															</tr>
-
-															<tr>
-																<td colspan="1">
-																	<hr class="trenner_form" />
-																</td>
-															</tr>
-
-															<tr>
-																<td <?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Rechnungsempfänger<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['name']; ?>" readonly></td>
-															</tr>
-
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Zusatzzeile<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['zusatzzeile']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Strasse<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['adresse']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	Telefon<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['telefon']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	E-Mail<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['email']; ?>" readonly>
-																	</td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?>>
-																	PLZ und Ort<input style="width:100%;" type="text" value="<?php echo $rechnung_adresse['plz'] . " " . $rechnung_adresse['ort']; ?>" readonly></td>
-															</tr>
-															<tr>
-																<td<?php if ($_SESSION['recode'] == 'ohne-makler') {
-																		echo " style=\"display: none;\">";
-																	} ?> colspan="1">
-																	<hr class="trenner_form" />
-																	</td>
-															</tr>
-															<tr>
-																<td>Versandempfänger<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "name"); ?>" readonly>
-																</td>
-															</tr>
-															<tr>
-																<td>Zusatzzeile<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "zusatzzeile"); ?>" readonly></td>
-															</tr>
-															<tr>
-																<td>Strasse<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "adresse"); ?>" readonly></td>
-															</tr>
-															<tr>
-																<td>PLZ und Ort<input style="width:100%;" type="text" value="<?php echo prop($versand_adresse, "plz") . " " . prop($versand_adresse, "ort"); ?>" readonly></td>
-															</tr>
-
-
-														</table>
-
-													</div>
-												</div>
-
-											</div>
-										</div>
-
-
-
-
-										<hr class="trenner_form" />
-
-
-
-										<div style="gap: 30px; display: flex; flex-direction: row; padding: 0 15px;">
-											<div class="GRB gap-md column" style="width: 100%;" id="payment-option-container">
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/local-payment.min.js"></script>
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/client.min.js"></script>
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/paypal-checkout.min.js"></script>
-												<script src="https://js.braintreegateway.com/web/3.88.4/js/hosted-fields.min.js"></script>
-												<input type="hidden" name="payment_id" id="payment_id_input">
-												<input type="hidden" name="payment_nonce" id="payment_nonce_input">
-												<input type="hidden" name="payment_type" id="payment_type_input">
-												<script>
-													const UNIQUE_CUSTOMER_ID = "<?php echo $ausweis->public_id ?>";
-													const BILLING_NAME = "<?php echo $rechnung_adresse['name']; ?>";
-												</script>
-												<script src="/energieausweis-erstellen/FORM/js/braintree-payment.js" async defer></script>
-												<h4>Bitte wählen sie ihre Bezahlmethode aus.</h2>
-													<div class="flex-row justify-between">
-														<div class="column gap-md">
-															<div class="payment-option-card" id="paypal-button">
-																<img src="../../images/paypal.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit PayPal">Zahlen mit PayPal</div>
-															</div>
-															<div class="payment-option-card" id="giropay-button">
-																<img src="../../images/giropay.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Giropay">Zahlen mit Giropay</div>
-															</div>
-															<div class="payment-option-card" id="sofort-button">
-																<img src="../../images/sofort.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Sofort">Zahlen mit Sofort</div>
-															</div>
-														</div>
-														<div class="column gap-md">
-															<div class="payment-option-card" id="kreditkarte-button">
-																<img src="../../images/mastercard.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Kreditkarte">Zahlen mit Kreditkarte</div>
-															</div>
-															<div class="payment-option-card" id="rechnung-button">
-																<img src="../../images/rechnung.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit Rechnung">Zahlen mit Rechnung</div>
-															</div>
-															<div class="payment-option-card" id="sepa-button">
-																<img src="../../images/sepa.png" class="payment-option-logo">
-																<div class="payment-option-label" aria-label="Zahlen mit SEPA über PayPal">SEPA über PayPal</div>
-															</div>
-														</div>
-														
-													</div>
-													
-											</div>
-											<div class="GRB" style="width: 100%; padding: 15px;" id="payment-information-box"></div>
-										</div>
-									<hr class="trenner_form" />
-
-										<div class="form-group col-md-12">
-											<div class="row">
-												<div class="form-group col-md-6 " style="text-align:left; ">"
-
-													<div class="form-group col-md-6 " style="text-align:left; ">
-													<a class="weiterbutton" style="background-color: #31448e;" href=<?php echo $datena; ?>>Daten ändern</a>
-													</div>
-												</div>
-
-
-
-												<?php // TODO: FIX REGNUMMER include("$ROOT/public/energieausweis-erstellen/FORM/scripts/REGNUMMER.php"); 
-												?>
-
-
-											</div>
-										</div>
-
-
-
-									</fieldset>
-								</form>
-
-
-
-							</div>
-						</div>
-					</div>
-				</Layout>

src/pages/verbrauchsausweis/erstellen.astro

@@ -3,5 +3,5 @@ console.log(Object.fromEntries(new URLSearchParams(await Astro.request.text())))
 
 
 
-return Astro.redirect("/verbrauchsausweis/kundendaten");
+return Astro.redirect("/kundendaten");
 ---

src/pages/verbrauchsausweis/kaufabschluss.astro

@@ -1,141 +0,0 @@
----
-import ProgressBar from "~/components/Ausweis/Progressbar.svelte";
-import PerformanceScore from "~/components/Ausweis/PerformanceScore.svelte";
-import AusweisLayout from "~/layouts/AusweisLayout.astro";
-import PriceContainer from "~/components/Kaufabschluss/PriceContainer.svelte";
-import KundendatenContainer from "~/components/Kaufabschluss/KundendatenContainer.svelte";
-
-const prices = [45, 60, 160];
----
-
-<AusweisLayout title="Kaufabschluss Verbrauchsausweis - IBCornelsen">
-	<div class="flex flex-row gap-8 items-center mb-8">
-		<div class="flex flex-col w-full">
-			<h1>Verbrauchsausweis erstellen - 45€</h1>
-			<ProgressBar progress={100} />
-		</div>
-
-		<PerformanceScore />
-	</div>
-
-	<form action="FORM/transfer/VA_3to4.php" method="POST" novalidate>
-		<fieldset>
-			<div class="grid grid-cols-2 gap-6">
-				<PriceContainer prices={prices} client:load />
-
-				<KundendatenContainer />
-
-				<div
-					class="GRB gap-md column"
-					style="width: 100%;"
-					id="payment-option-container"
-				>
-					<h4>Bitte wählen sie ihre Bezahlmethode aus.</h4>
-					<div class="flex-row justify-between">
-						<div class="column gap-md">
-							<div class="payment-option-card" id="paypal-button">
-								<img
-									src="../../images/paypal.png"
-									class="payment-option-logo"
-								/>
-								<div
-									class="payment-option-label"
-									aria-label="Zahlen mit PayPal"
-								>
-									Zahlen mit PayPal
-								</div>
-							</div>
-							<div
-								class="payment-option-card"
-								id="giropay-button"
-							>
-								<img
-									src="../../images/giropay.png"
-									class="payment-option-logo"
-								/>
-								<div
-									class="payment-option-label"
-									aria-label="Zahlen mit Giropay"
-								>
-									Zahlen mit Giropay
-								</div>
-							</div>
-							<div class="payment-option-card" id="sofort-button">
-								<img
-									src="../../images/sofort.png"
-									class="payment-option-logo"
-								/>
-								<div
-									class="payment-option-label"
-									aria-label="Zahlen mit Sofort"
-								>
-									Zahlen mit Sofort
-								</div>
-							</div>
-						</div>
-						<div class="column gap-md">
-							<div
-								class="payment-option-card"
-								id="kreditkarte-button"
-							>
-								<img
-									src="../../images/mastercard.png"
-									class="payment-option-logo"
-								/>
-								<div
-									class="payment-option-label"
-									aria-label="Zahlen mit Kreditkarte"
-								>
-									Zahlen mit Kreditkarte
-								</div>
-							</div>
-							<div
-								class="payment-option-card"
-								id="rechnung-button"
-							>
-								<img
-									src="../../images/rechnung.png"
-									class="payment-option-logo"
-								/>
-								<div
-									class="payment-option-label"
-									aria-label="Zahlen mit Rechnung"
-								>
-									Zahlen mit Rechnung
-								</div>
-							</div>
-							<div class="payment-option-card" id="sepa-button">
-								<img
-									src="../../images/sepa.png"
-									class="payment-option-logo"
-								/>
-								<div
-									class="payment-option-label"
-									aria-label="Zahlen mit SEPA über PayPal"
-								>
-									SEPA über PayPal
-								</div>
-							</div>
-						</div>
-					</div>
-				</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>
-	</form>
-</AusweisLayout>
-<style is:global>
-	.GRB {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-		background-color: rgba(252, 234, 187, 0.2);
-	}
-
-	table,
-	td {
-		@apply border-none;
-	}
-</style>