Merge pull request #298 from IBCornelsen/main

Update Jens

src/components/Ausweis/Ansprechpartner.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
+
+	export let user: BenutzerClient;
+
+</script>
+
+<div id="ansprechpartner" class="bereich-box grid 
+grid-cols-1 gap-x-4 gap-y-8
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
+">
+
+<!-- Anrede * 
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+	<Inputlabel title="Anrede *"></Inputlabel>
+
+    <select name="anrede" bind:value={user.anrede}>
+        <option>bitte auswählen</option>
+        <option value="Herr">Herr</option>
+        <option value="Frau">Frau</option>
+        <option value="Frau">Frau</option>
+    </select>
+
+		<div class="help-label">
+				<HelpLabel>
+					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>
+</div>-->
+
+
+<!-- Vorname * -->
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+	<Inputlabel title="Vorname *"></Inputlabel>
+
+    <input
+    name="vorname"
+    type="text"
+    bind:value={user.vorname}
+    required
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte Geben Sie hier den Vornamen des Ansprechpartners&nbsp;ein.
+				</HelpLabel>
+			</div>
+</div>
+
+
+<!-- Nachname * -->
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+	<Inputlabel title="Nachname *"></Inputlabel>
+
+    <input
+    name="name"
+    type="text"
+    bind:value={user.name}
+    required
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte Geben Sie hier den Nachnamen des Ansprechpartners&nbsp;ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Telefon & Email * -->
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+	<Inputlabel title="Telefonnummer *"></Inputlabel>
+
+    <input
+    name="telefon"
+    bind:value={user.telefon}
+    type="text"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte Geben Sie hier die Telefonnummer des Ansprechpartners&nbsp;ein.
+				</HelpLabel>
+			</div>
+</div>
+
+
+
+
+
+</div>

src/components/Ausweis/Ausweisart.svelte

@@ -26,7 +26,6 @@
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 
 	export let Energieausweis;
-	console.log('HALLO:'+Energieausweis);
 </script>
 
 <div id="ausweisart" class="bereich-box grid
@@ -74,7 +73,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		>
 			<option disabled selected value={false}>Bitte auswählen</option>
 
-			{#if Energieausweis=="Verbrauchsausweis Wohngebäude"}
+			{#if Energieausweis=="Verbrauchsausweis Wohngebäude" || Energieausweis=="Bedarfsausweis Wohngebäude"}
 			<option value="Einfamilienhaus">Einfamilienhaus</option>
 			<option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
 			<option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>

src/components/Ausweis/Bezahlung.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
+    import ZipSearch from "#components/PlzSuche.svelte";
+ 
+    import { Enums } from "@ibcornelsen/database/client";
+	import PaymentOption from "#components/PaymentOption.svelte";
+
+    export let selectedPaymentType: Bezahlmethoden =
+    Enums.Bezahlmethoden.paypal;
+
+
+
+</script>
+
+
+<div id="bezahlung" class="bereich-box grid 
+grid-cols-5 justify-around justify-items-center items-center">
+
+<PaymentOption
+				paymentType={Enums.Bezahlmethoden.paypal}
+				bind:selectedPaymentType
+				name={"PayPal"}
+				icon={"/images/paypal.png"}
+			></PaymentOption>
+			<PaymentOption
+				paymentType={Enums.Bezahlmethoden.sofort}
+				bind:selectedPaymentType
+				name={"Sofort"}
+				icon={"/images/sofort.png"}
+			></PaymentOption>
+			<PaymentOption
+				paymentType={Enums.Bezahlmethoden.giropay}
+				bind:selectedPaymentType
+				name={"Giropay"}
+				icon={"/images/giropay.png"}
+			></PaymentOption>
+			<PaymentOption
+				paymentType={Enums.Bezahlmethoden.creditcard}
+				bind:selectedPaymentType
+				name={"Kreditkarte"}
+				icon={"/images/creditcard.png"}
+			></PaymentOption>
+			<PaymentOption
+				paymentType={Enums.Bezahlmethoden.rechnung}
+				bind:selectedPaymentType
+				name={"Rechnung"}
+				icon={"/images/rechnung.png"}
+			></PaymentOption>
+
+
+
+
+
+</div>

src/components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte

@@ -21,7 +21,7 @@
 	
 	<button class="button">Speichern</button>
 
-	<button class="button"><a href="/kaufabschluss?uid=b27f02b4-e7a8-4c2e-bb19-1d0e39edf634" class="text-white">Zum Kaufabschluss</a></button
+	<button class="button">kostenpflichtig bestellen</button
 		>
 
 		

src/components/Ausweis/GebaeudeDaten.svelte

@@ -41,7 +41,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 <!-- PLZ / ORT -->
 
-<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
+<div class="grid grid-cols-[2fr_6fr] gap-x-4 order-2 md:order-2 xl:order-2 relative">
 
 <div class="input-noHelp">
 	<Inputlabel title="PLZ *"></Inputlabel>
@@ -73,6 +73,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		</div>
 </div>
 
+
+
 </div>
 
 <!-- Wohnfläche m² * -->

src/components/Ausweis/GebaeudeVolumen.svelte

@@ -0,0 +1,320 @@
+<script lang="ts">
+    
+import HelpLabel from "#components/HelpLabel.svelte";
+import Label from "#components/Label.svelte";
+
+export let ausweis: BedarfsausweisWohnenClient;
+
+const arrayRange = (start: number, stop: number, step: number) =>
+		Array.from(
+			{ length: (stop - start) / step + 1 },
+			(value, index) => start + index * step
+		);
+
+</script>
+
+
+<div class="grid grid-cols-[3fr_2fr] gap-4">
+    <div class="GRB3 gap-4">
+        <HelpLabel
+            title="Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe"
+            >Hier wählen Sie Ihren passenden Grundriss aus, und tragen
+            die entsprechenden Maße unten ein. Bitte berücksichtigen Sie
+            nur den Grundriss der zum beheizten Gebäude gehört. Garagen
+            oder Schuppen die an das Haus herangebaut sind aber keine
+            Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel
+        >
+
+        <div class="grid grid-cols-4 gap-4">
+            <div>
+                <HelpLabel title="Anzahl Vollgeschosse *"
+                    >Bitte geben Sie hier die Anzahl der Vollgeschosse
+                    an. Keller und Dachgeschoss mit Schrägen zählen
+                    nicht dazu.</HelpLabel
+                >
+                <input
+                    name="anzahl_vollgeschosse"
+                    bind:value={ausweis.anzahl_vollgeschosse}
+                    type="number"
+                    required
+                />
+            </div>
+
+            <div>
+                <HelpLabel title="Geschosshöhe *"
+                    >Bitte geben Sie hier die Geschosshöhe (lichte
+                    Raumhöhe + Deckenstärke) des Gebäudes ein. Bei
+                    unterschiedlichen Geschosshöhen bilden Sie einen
+                    Mittelwert.</HelpLabel
+                >
+                <select
+                    name="geschosshoehe"
+                    bind:value={ausweis.geschosshoehe}
+                    required
+                >
+                    <option>Bitte auswählen</option>
+                    {#each arrayRange(2.1, 4.5, 0.1) as step}
+                        <option value={step}>{step.toFixed(2)} m</option
+                        >
+                    {/each}
+                </select>
+            </div>
+
+            <div>
+                <HelpLabel title="Gaubenanzahl"
+                    >Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
+                    die Anzahl ein.</HelpLabel
+                >
+                <input
+                    name="anzahl_gauben"
+                    bind:value={ausweis.anzahl_gauben}
+                    type="number"
+                />
+            </div>
+
+            <div>
+                <HelpLabel title="Breite aller Gauben in m"
+                    >Bitte geben Sie hier die Gesamtbreite aller Gauben
+                    in m ein.</HelpLabel
+                >
+                <select
+                    name="breite_gauben"
+                    bind:value={ausweis.breite_gauben}
+                >
+                    <option>Bitte auswählen</option>
+                    {#each arrayRange(0.5, 10, 0.1) as step}
+                        <option value={step}>{step.toFixed(2)} m</option
+                        >
+                    {/each}
+                </select>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-4 gap-4">
+            <img src="/images/r.png" alt="rechteck" />
+            <img src="/images/l.png" alt="l-form" />
+            <img src="/images/t.png" alt="t-form" />
+            <img src="/images/u.png" alt="u-form" />
+        </div>
+
+        <div class="grid grid-cols-6 gap-4">
+            <div>
+                <HelpLabel title="A"
+                    >Bitte Eingabe in m. Punkt statt Komma verwenden
+                    z.B.: 10.40 (Eingabebeispiel)</HelpLabel
+                >
+                <input
+                    name="masse_a"
+                    type="number"
+                    bind:value={ausweis.masse_a}
+                />
+            </div>
+            <div>
+                <Label>B</Label>
+                <input
+                    name="masse_b"
+                    type="number"
+                    bind:value={ausweis.masse_b}
+                />
+            </div>
+            <div>
+                <Label>C</Label>
+                <input
+                    name="masse_c"
+                    type="number"
+                    bind:value={ausweis.masse_c}
+                />
+            </div>
+            <div>
+                <Label>D</Label>
+                <input
+                    name="masse_d"
+                    type="number"
+                    bind:value={ausweis.masse_d}
+                />
+            </div>
+            <div>
+                <Label>E</Label>
+                <input
+                    name="masse_e"
+                    type="number"
+                    bind:value={ausweis.masse_e}
+                />
+            </div>
+            <div>
+                <Label>F</Label>
+                <input
+                    name="masse_f"
+                    type="number"
+                    bind:value={ausweis.masse_f}
+                />
+            </div>
+        </div>
+
+        <div class="grid grid-cols-3 gap-4">
+            <div>
+                <Label>Fensterfläche Südost bis Südwest in m²</Label>
+                <input
+                    name="fensterflaeche_so_sw"
+                    bind:value={ausweis.fensterflaeche_so_sw}
+                    type="number"
+                />
+            </div>
+            <div>
+                <Label>Fensterfläche Nordwest bis Nordost in m²</Label>
+                <input
+                    name="fensterflaeche_nw_no"
+                    bind:value={ausweis.fensterflaeche_nw_no}
+                    type="number"
+                />
+            </div>
+            <div>
+                <Label>Außenwandfläche an unbeheizten Vorbau</Label>
+                <input
+                    name="aussenwandflaeche_unbeheizt"
+                    bind:value={ausweis.aussenwandflaeche_unbeheizt}
+                    type="number"
+                />
+            </div>
+        </div>
+    </div>
+    <div class="GRB3">
+        <HelpLabel title="Außenflächen, U-Werte und Volumen"
+            >Die wärmeübertragende Umfassungsflächen sind die
+            Hüllflächen des beheizten Gebäudes die an die Außenluft bzw.
+            an unbeheizte Vorbauten grenzen. Wenn Ihnen die
+            Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können
+            Sie die Eingabe direkt vornehmen. Hier können Sie auch das
+            von den Umfassungsflächen eingeschlossene Volumen des
+            Gebäudes eingeben. Die ermittelten Werte der
+            Berechnungshilfe können hier präzisiert werden.</HelpLabel
+        >
+        <div class="flex flex-row items-center gap-4">
+            <Label>Tabellenwerte manuell ändern</Label>
+            <input
+                type="checkbox"
+                bind:checked={ausweis.tabellenwerte_aendern}
+                name="tabellenwerte_aendern"
+            />
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div>
+                <Label>Dachfläche in m²</Label>
+                <input
+                    name="dachflaeche"
+                    bind:value={ausweis.dachflaeche}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+            <div>
+                <Label>U-Wert in W/m²K</Label>
+                <input
+                    name="dach_u_wert"
+                    bind:value={ausweis.dach_u_wert}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div>
+                <Label>Geschoßdecke in m²</Label>
+                <input
+                    name="deckenflaeche"
+                    bind:value={ausweis.deckenflaeche}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+            <div>
+                <Label>U-Wert in W/m²K</Label>
+                <input
+                    name="decke_u_wert"
+                    bind:value={ausweis.decke_u_wert}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div>
+                <Label>Außenwand in m²</Label>
+                <input
+                    name="aussenwand_flaeche"
+                    bind:value={ausweis.aussenwand_flaeche}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+            <div>
+                <Label>U-Wert in W/m²K</Label>
+                <input
+                    name="aussenwand_u_wert"
+                    bind:value={ausweis.aussenwand_u_wert}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div>
+                <Label>Fußboden in m²</Label>
+                <input
+                    name="fussboden_flaeche"
+                    bind:value={ausweis.fussboden_flaeche}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+            <div>
+                <Label>U-Wert in W/m²K</Label>
+                <input
+                    name="fussboden_u_wert"
+                    bind:value={ausweis.fussboden_u_wert}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+            </div>
+        </div>
+
+        <div>
+            <Label
+                >Das von den Flächen eingeschlossene Gebäudevolumen in
+                m³</Label
+            >
+            <input
+                name="volumen"
+                type="number"
+                bind:value={ausweis.volumen}
+                readonly={!ausweis.tabellenwerte_aendern}
+            />
+        </div>
+
+        <div>
+            <Label>Blower-Door-Test erfolgreich durchgeführt</Label>
+            <div class="flex flex-row gap-4">
+                <label class="radio-inline"
+                    ><input
+                        type="radio"
+                        value={true}
+                        bind:group={ausweis.dicht}
+                        name="dichtheit"
+                    />Ja</label
+                >
+                <label class="radio-inline"
+                    ><input
+                        type="radio"
+                        value={false}
+                        bind:group={ausweis.dicht}
+                        name="dichtheit"
+                    />Nein</label
+                >
+            </div>
+        </div>
+    </div>
+</div>

src/components/Ausweis/Rechnungsadresse.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
+    import ZipSearch from "#components/PlzSuche.svelte";
+
+	export let user: BenutzerClient;
+
+	let rechnung: inferProcedureInput<
+		AppRouter["v1"]["rechnungen"]["erstellen"]
+	> = {
+		email: user.email,
+		empfaenger: user.vorname + " " + user.name,
+		strasse: user.adresse,
+		plz: user.plz,
+		ort: user.ort,
+		versand_empfaenger: user.vorname + " " + user.name,
+		versand_strasse: user.adresse,
+		versand_plz: user.plz,
+		versand_ort: user.ort,
+		telefon: user.telefon,
+	};
+
+
+
+
+</script>
+
+<div id="rechnungsadresse" class="bereich-box grid 
+grid-cols-1 gap-x-4 gap-y-8
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
+">
+
+<!-- Empfänger * -->
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+	<Inputlabel title="Rechnungs-Empfänger *"></Inputlabel>
+
+    <input
+    name="rechnung_empfaenger"
+    type="text"
+    bind:value={rechnung.empfaenger}
+    required
+    data-rule-maxlength="100"
+    data-msg-maxlength="max. 100 Zeichen"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie den Empfänger ein, auf den die Rechnung ausgestellt wird.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Straße, Hausnummer * -->
+
+<div class="input-standard order21 md:order-2 xl:order-2">
+	<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
+
+					<input
+						name="rechnung_strasse"
+						bind:value={rechnung.strasse}
+						type="text"
+						required
+						data-rule-maxlength="40"
+						data-msg-maxlength="max. 40 Zeichen"
+					/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Strasse und Hausnummer, so wie Sie auf der Rechnung erscheinen soll, ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- PLZ / ORT -->
+
+<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-3 md:order-3 xl:order-3">
+
+<div class="input-noHelp">
+	<Inputlabel title="PLZ *"></Inputlabel>
+    <ZipSearch
+    name="rechnung_plz"
+    bind:zip={rechnung.plz}
+    bind:city={rechnung.ort}
+/>
+
+
+</div>
+
+<div class="input-standard">
+	<Inputlabel title="Ort *"></Inputlabel>
+	
+    <input
+    name="rechnung_ort"
+    readonly
+    type="text"
+    required
+    value={rechnung.ort}
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die PLZ des Ortes, so wie Sie auf der Rechnung erscheinen soll, ein.
+				</HelpLabel>
+		</div>
+</div>
+
+</div>
+
+<!-- Zusatzzeile -->
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+	<Inputlabel title="Zusatzzeile"></Inputlabel>
+
+    <input
+    name="rechnung_zusatzzeile"
+    bind:value={rechnung.zusatzzeile}
+    type="text"
+    data-rule-maxlength="80"
+    data-msg-maxlength="max. 80 Zeichen"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie, falls erforderlich, zusätzliche nformationen ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- E-mail -->
+
+<div class="input-standard order-5 md:order-5 xl:order-5">
+	<Inputlabel title="E-mail *"></Inputlabel>
+
+    <input
+    name="rechnung_email"
+    bind:value={rechnung.email}
+    type="email"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die E-Mail Adresse des Rechnungsempfängers ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Telefon 
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+	<Inputlabel title="Telefon *"></Inputlabel>
+
+    <input
+    name="rechnung_telefon"
+    bind:value={rechnung.telefon}
+    type="text"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Telefonnummer des Rechnungsempfängers ein.
+				</HelpLabel>
+			</div>
+</div>
+-->
+
+<div class="col-span-3 order-7 md:order-7 xl:order-7">
+
+    <div class="grid grid-cols-[25px_max-content] items-center justify-items-start">
+
+        <input
+        id="abweichende_versand_adresse"
+        class="w-[15px] h-[15px]"
+        type="checkbox"
+        name="abweichende_versand_adresse"
+        bind:checked={rechnung.abweichende_versand_adresse}
+    />
+
+    <label for="abweichende_versand_adresse" class="cursor-pointer"
+    >abweichende Versandadresse</label>
+
+    </div>
+
+</div>
+
+{#if rechnung.abweichende_versand_adresse}
+
+<!-- Versand Empfänger * -->
+
+<div class="input-standard order-8 md:order-8 xl:order-8">
+	<Inputlabel title="Versand-Empfänger *"></Inputlabel>
+
+	<input
+	name="versand_empfaenger"
+	type="text"
+	readonly={!rechnung.abweichende_versand_adresse}
+	bind:value={rechnung.versand_empfaenger}
+	required
+	data-rule-maxlength="100"
+	data-msg-maxlength="max. 100 Zeichen"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie den Namen des Versand-Empfängers ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Versand Straße, Hausnummer * -->
+
+<div class="input-standard order-9 md:order-9 xl:order-9">
+	<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
+
+	<input
+	name="versand_strasse"
+	type="text"
+	readonly={!rechnung.abweichende_versand_adresse}
+	bind:value={rechnung.versand_strasse}
+	required
+	data-rule-maxlength="40"
+	data-msg-maxlength="max. 40 Zeichen"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Versand-Empfänger Strasse und Hausnummer ein, an die die Rechnung versandt wird.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- PLZ / ORT -->
+
+<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-10 md:order-10 xl:order-10">
+
+<div class="input-noHelp">
+	<Inputlabel title="PLZ *"></Inputlabel>
+    <ZipSearch
+	name="versand_plz"
+	readonly={!rechnung.abweichende_versand_adresse}
+	bind:zip={rechnung.versand_plz}
+	bind:city={rechnung.versand_ort}
+/>
+
+
+</div>
+
+<div class="input-standard">
+	<Inputlabel title="Ort *"></Inputlabel>
+	
+    <input
+	name="versand_ort"
+	type="text"
+	readonly
+	required
+	bind:value={rechnung.versand_ort}
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Versand-Empfänger PLZ des Ortes ein, an den die Rechnung versandt wird.
+				</HelpLabel>
+		</div>
+</div>
+
+</div>
+
+<!-- Zusatzzeile -->
+
+<div class="input-standard order-11 md:order-11 xl:order-11">
+	<Inputlabel title="Zusatzzeile"></Inputlabel>
+
+	<input
+	name="versand_zusatzzeile"
+	type="text"
+	readonly={!rechnung.abweichende_versand_adresse}
+	bind:value={rechnung.versand_zusatzzeile}
+	data-rule-maxlength="80"
+	data-msg-maxlength="max. 80 Zeichen"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie, falls erforderlich, zusätzliche nformationen ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- E-mail -->
+
+<div class="input-standard order-12 md:order-12 xl:order-12">
+	<Inputlabel title="E-mail *"></Inputlabel>
+
+    <input
+    name="rechnung_email"
+    bind:value={rechnung.email}
+    type="email"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die E-Mail Adresse des Versand-Empfängers ein.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Telefon 
+
+<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
+	<Inputlabel title="Telefon *"></Inputlabel>
+
+    <input
+    name="rechnung_telefon"
+    bind:value={rechnung.telefon}
+    type="text"
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie die Telefonnummer des Versand-Empfängers ein.
+				</HelpLabel>
+			</div>
+</div>
+-->
+
+{/if }
+
+</div>

src/components/PaymentOption.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Bezahlmethoden } from "@ibcornelsen/database/client";
+    import Input from "radix-svelte-icons/src/lib/icons/Input.svelte";
 
 	export let name: string;
 	export let icon: string;
@@ -7,9 +8,26 @@
 	export let selectedPaymentType: Bezahlmethoden;
 </script>
 
-<button type="button" data-test={paymentType} class="flex flex-col items-center cursor-pointer" class:bg-gray-100={paymentType == selectedPaymentType} on:click={() => selectedPaymentType = paymentType}>
+<div>
+
+<input type="radio" data-test={paymentType} id={paymentType} name="paymentType" on:change={() => selectedPaymentType = paymentType} />
+
+<label for={paymentType}>
+	<div class="grid grid-rows-[1fr_20px] justify-items-center items-center cursor-pointer">
+		<img src={icon} alt={name} />
+		{name}
+	</div>
+</label>
+
+</div>
+
+<!--
+	<button type="button"  class="bg-white px-4 py-2" on:click={() => selectedPaymentType = paymentType}>
+	<div class="grid grid-rows-[max-content-max-content] w-fit">
 	<img src={icon} alt={name} />
 	<span aria-label={name}>
 		{name}
 	</span>
+	</div>
 	</button>
+-->

src/components/PlzSuche.svelte

@@ -45,9 +45,10 @@
 			}
 		}
 	}
+
 </script>
 
-<div class="relative" use:clickOutside={() => {
+<div class="" use:clickOutside={() => {
 	hideZipDropdown = true;
 }}>
 	
@@ -67,9 +68,9 @@
 		maxlength="5"
 	/>
 
-	<div data-test="plz-container" class="absolute top-[calc(100%+4px)] left-0 w-full bg-white py-2 shadow-md rounded-lg" hidden={hideZipDropdown}>
+	<div data-test="plz-container" class="absolute top-[calc(100%+4px)] left-0 z-10 bg-white py-2 shadow-md rounded-lg" hidden={hideZipDropdown}>
 		{#each zipCodes as zipCode}
-			<div class="hover:bg-gray-100 cursor-pointer px-2 py-0.5" tabindex="-1" on:click={() => {
+			<div class="hover:bg-gray-100 cursor-pointer px-2 py-0.5 text-nowrap" tabindex="-1" on:click={() => {
 				zip = zipCode.plz;
 				city = zipCode.stadt;
 				hideZipDropdown = true;

src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte

@@ -1,12 +1,26 @@
 <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 ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	//import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import { PRICES } from "#lib/constants";
+
+	import Bereich from "#components/labels/Bereich.svelte";
+
+	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
+	import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
+	import GebaeudeVolumen from "#components/Ausweis/GebaeudeVolumen.svelte";
+
+	import SanierungszustandHeizungsanlage from "#components/Ausweis/SanierungszustandHeizungsanlage.svelte";
+	import SanierungszustandFensterTueren from "#components/Ausweis/SanierungszustandFensterTueren.svelte";
+	import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
+	import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";
+
 	import Label from "#components/Label.svelte";
 	import HelpLabel from "#components/HelpLabel.svelte";
 	import ZipSearch from "#components/PlzSuche.svelte";
+
 	import { hotWaterProductionTypes } from "./HotWaterProductionTypes.js";
 	import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
@@ -17,12 +31,14 @@
 		BenutzerClient,
 		UploadedGebaeudeBild,
 	} from "#components/Ausweis/types.js";
-	import Bereich from "#components/labels/Bereich.svelte";
+
 	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
 
 	export let ausweis: BedarfsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;
 
+	let Energieausweis = "Bedarfsausweis Wohngebäude";
+
 	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
 	let gebaeude =
 		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
@@ -145,33 +161,45 @@
 	}
 </script>
 
-<div class="grid grid-cols-2 gap-x-8 px-4 items-center">
-	<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
-		<Progressbar progress={0} />
-	</div>
+<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
 
-	<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
+2xl:grid-cols-2 2xl:gap-x-8
+">
+
+<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
 		bind:gebaeude_aufnahme_allgemein
 		bind:gebaeude
 	/>
 </div>
+
+<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
+		
+	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
+	<h2 class="text-primary text-xl">{Energieausweis} {PRICES.BedarfsausweisWohnen[0]} €</h2>
+	<ProgressBar progress={0} />
 </div>
 
+</div>
+
+<form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+	<div id="formular-box" class="formular-boxen ring-0">
+
+
 		<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
 
-<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
-	<div id="formular-box" class="formular-boxen ring-0">
+		<!-- A Prüfung der Ausweisart -->
+
 		<Bereich bereich="A" title="Prüfung der Ausweisart">
 			<Ausweisart
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
+				{Energieausweis}
 			/>
 		</Bereich>
 
-
 		<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
 
 		<Bereich
@@ -180,445 +208,20 @@ title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgesc
 			><GebaeudeDaten bind:gebaeude_aufnahme_allgemein /></Bereich
 		>
 		
-		<hr />
+		<!-- C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen -->
+
 		<Bereich
-			bereich="B"
-			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp und Gebäudeteil"
+			bind:ausweis
+			bereich="C"
+			title="Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen"
 			>
-			<div class="GRB">
-				<div>
-					<HelpLabel title="Straße, Hausnummer *"
-						>Bitte geben Sie hier die Straße und Hausnummer des
-						Gebäudes ein.</HelpLabel
-					>
-					<div>
-						<input
-							name="objekt_strasse"
-							class=" strasse"
-							type="text"
-							bind:value={ausweis.objekt_strasse}
-							required
+				<GebaeudeVolumen
+				bind:ausweis
 				/>
-					</div>
-				</div>
-
-				<ZipSearch
-					bind:zip={ausweis.objekt_plz}
-					bind:city={ausweis.objekt_ort}
-					name="zip"
-				/>
-
-				<div>
-					<HelpLabel title="Ort *"
-						>Ort des Gebäudes wird automatisch ermittelt.</HelpLabel
-					>
-					<div>
-						<input
-							name="objekt_ort"
-							type="text"
-							bind:value={ausweis.objekt_ort}
-						/>
-					</div>
-				</div>
-
-				<div>
-					<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="wohnflaeche"
-							type="number"
-							required
-							bind:value={ausweis.wohnflaeche}
-						/>
-					</div>
-				</div>
-
-				<div>
-					<HelpLabel title="Gebäudetyp *"
-						>Bitte wählen Sie hier den Gebäudetyp aus.
-					</HelpLabel>
-					<div>
-						<select
-							name="objekt_typ"
-							bind:value={ausweis.objekt_typ}
-							required
-						>
-							<option>Bitte auswählen</option>
-							<option value="Einfamilienhaus">
-								Einfamilienhaus</option
-							>
-							<option value="Freistehendes Einfamilienhaus">
-								Freistehendes Einfamilienhaus</option
-							>
-							<option value="Freistehendes Zweifamilienhaus">
-								Freistehendes Zweifamilienhaus</option
-							>
-							<option value="Doppelhaushälfte">
-								Doppelhaushälfte</option
-							>
-							<option value="Reihenendhaus">
-								Reihenendhaus</option
-							>
-							<option value="Reihenmittelhaus">
-								Reihenmittelhaus</option
-							>
-							<option value="Mehrfamilienhaus">
-								Mehrfamilienhaus</option
-							>
-							<option value="Wohn- und Geschäftshaus">
-								Wohn- und Geschäftshaus</option
-							>
-							<option value="Atrium-Bungalow">
-								Atrium-Bungalow</option
-							>
-							<option value="Winkelbungalow">
-								Winkelbungalow</option
-							>
-						</select>
-					</div>
-				</div>
-
-				<div>
-					<HelpLabel title="Gebäudeteil *"
-						>Bitte geben Sie hier den Gebäudeteil ein. In den
-						meisten Fällen handelt es sich um das Gesamtgebäude.
-						Sollte es sich allerdings um ein Gebäude mit mehr als
-						10% Gewerbeanteil handeln, so sollten 2 Ausweise
-						erstellt werden. In diesem Fall wählen Sie Gebäudeteil
-						'Wohnen' bzw. Gebäudeteil 'Gewerbe'.</HelpLabel
-					>
-					<div>
-						<select
-							name="objekt_gebaeudeteil"
-							bind:value={ausweis.objekt_gebaeudeteil}
-							required
-						>
-							<option>Bitte auswählen</option>
-							<option value="Gesamtgebäude">
-								Gesamtgebäude</option
-							>
-							<option value="Wohnen"> Wohnen</option>
-						</select>
-					</div>
-				</div>
-			</div>
 		</Bereich>
 
 		<hr />
-		<Label
-			>C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und
-			Gebäudevolumen</Label
-		>
-		<div class="grid grid-cols-[3fr_2fr] gap-4">
-			<div class="GRB3 gap-4">
-				<HelpLabel
-					title="Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe"
-					>Hier wählen Sie Ihren passenden Grundriss aus, und tragen
-					die entsprechenden Maße unten ein. Bitte berücksichtigen Sie
-					nur den Grundriss der zum beheizten Gebäude gehört. Garagen
-					oder Schuppen die an das Haus herangebaut sind aber keine
-					Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel
-				>
 
-				<div class="grid grid-cols-4 gap-4">
-					<div>
-						<HelpLabel title="Anzahl Vollgeschosse *"
-							>Bitte geben Sie hier die Anzahl der Vollgeschosse
-							an. Keller und Dachgeschoss mit Schrägen zählen
-							nicht dazu.</HelpLabel
-						>
-						<input
-							name="anzahl_vollgeschosse"
-							bind:value={ausweis.anzahl_vollgeschosse}
-							type="number"
-							required
-						/>
-					</div>
-
-					<div>
-						<HelpLabel title="Geschosshöhe *"
-							>Bitte geben Sie hier die Geschosshöhe (lichte
-							Raumhöhe + Deckenstärke) des Gebäudes ein. Bei
-							unterschiedlichen Geschosshöhen bilden Sie einen
-							Mittelwert.</HelpLabel
-						>
-						<select
-							name="geschosshoehe"
-							bind:value={ausweis.geschosshoehe}
-							required
-						>
-							<option>Bitte auswählen</option>
-							{#each arrayRange(2.1, 4.5, 0.1) as step}
-								<option value={step}>{step.toFixed(2)} m</option
-								>
-							{/each}
-						</select>
-					</div>
-
-					<div>
-						<HelpLabel title="Gaubenanzahl"
-							>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
-							die Anzahl ein.</HelpLabel
-						>
-						<input
-							name="anzahl_gauben"
-							bind:value={ausweis.anzahl_gauben}
-							type="number"
-						/>
-					</div>
-
-					<div>
-						<HelpLabel title="Breite aller Gauben in m"
-							>Bitte geben Sie hier die Gesamtbreite aller Gauben
-							in m ein.</HelpLabel
-						>
-						<select
-							name="breite_gauben"
-							bind:value={ausweis.breite_gauben}
-						>
-							<option>Bitte auswählen</option>
-							{#each arrayRange(0.5, 10, 0.1) as step}
-								<option value={step}>{step.toFixed(2)} m</option
-								>
-							{/each}
-						</select>
-					</div>
-				</div>
-
-				<div class="grid grid-cols-4 gap-4">
-					<img src="/images/r.png" alt="rechteck" />
-					<img src="/images/l.png" alt="l-form" />
-					<img src="/images/t.png" alt="t-form" />
-					<img src="/images/u.png" alt="u-form" />
-				</div>
-
-				<div class="grid grid-cols-6 gap-4">
-					<div>
-						<HelpLabel title="A"
-							>Bitte Eingabe in m. Punkt statt Komma verwenden
-							z.B.: 10.40 (Eingabebeispiel)</HelpLabel
-						>
-						<input
-							name="masse_a"
-							type="number"
-							bind:value={ausweis.masse_a}
-						/>
-					</div>
-					<div>
-						<Label>B</Label>
-						<input
-							name="masse_b"
-							type="number"
-							bind:value={ausweis.masse_b}
-						/>
-					</div>
-					<div>
-						<Label>C</Label>
-						<input
-							name="masse_c"
-							type="number"
-							bind:value={ausweis.masse_c}
-						/>
-					</div>
-					<div>
-						<Label>D</Label>
-						<input
-							name="masse_d"
-							type="number"
-							bind:value={ausweis.masse_d}
-						/>
-					</div>
-					<div>
-						<Label>E</Label>
-						<input
-							name="masse_e"
-							type="number"
-							bind:value={ausweis.masse_e}
-						/>
-					</div>
-					<div>
-						<Label>F</Label>
-						<input
-							name="masse_f"
-							type="number"
-							bind:value={ausweis.masse_f}
-						/>
-					</div>
-				</div>
-
-				<div class="grid grid-cols-3 gap-4">
-					<div>
-						<Label>Fensterfläche Südost bis Südwest in m²</Label>
-						<input
-							name="fensterflaeche_so_sw"
-							bind:value={ausweis.fensterflaeche_so_sw}
-							type="number"
-						/>
-					</div>
-					<div>
-						<Label>Fensterfläche Nordwest bis Nordost in m²</Label>
-						<input
-							name="fensterflaeche_nw_no"
-							bind:value={ausweis.fensterflaeche_nw_no}
-							type="number"
-						/>
-					</div>
-					<div>
-						<Label>Außenwandfläche an unbeheizten Vorbau</Label>
-						<input
-							name="aussenwandflaeche_unbeheizt"
-							bind:value={ausweis.aussenwandflaeche_unbeheizt}
-							type="number"
-						/>
-					</div>
-				</div>
-			</div>
-			<div class="GRB3">
-				<HelpLabel title="Außenflächen, U-Werte und Volumen"
-					>Die wärmeübertragende Umfassungsflächen sind die
-					Hüllflächen des beheizten Gebäudes die an die Außenluft bzw.
-					an unbeheizte Vorbauten grenzen. Wenn Ihnen die
-					Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können
-					Sie die Eingabe direkt vornehmen. Hier können Sie auch das
-					von den Umfassungsflächen eingeschlossene Volumen des
-					Gebäudes eingeben. Die ermittelten Werte der
-					Berechnungshilfe können hier präzisiert werden.</HelpLabel
-				>
-				<div class="flex flex-row items-center gap-4">
-					<Label>Tabellenwerte manuell ändern</Label>
-					<input
-						type="checkbox"
-						bind:checked={ausweis.tabellenwerte_aendern}
-						name="tabellenwerte_aendern"
-					/>
-				</div>
-
-				<div class="grid grid-cols-2 gap-4">
-					<div>
-						<Label>Dachfläche in m²</Label>
-						<input
-							name="dachflaeche"
-							bind:value={ausweis.dachflaeche}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-					<div>
-						<Label>U-Wert in W/m²K</Label>
-						<input
-							name="dach_u_wert"
-							bind:value={ausweis.dach_u_wert}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-				</div>
-
-				<div class="grid grid-cols-2 gap-4">
-					<div>
-						<Label>Geschoßdecke in m²</Label>
-						<input
-							name="deckenflaeche"
-							bind:value={ausweis.deckenflaeche}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-					<div>
-						<Label>U-Wert in W/m²K</Label>
-						<input
-							name="decke_u_wert"
-							bind:value={ausweis.decke_u_wert}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-				</div>
-
-				<div class="grid grid-cols-2 gap-4">
-					<div>
-						<Label>Außenwand in m²</Label>
-						<input
-							name="aussenwand_flaeche"
-							bind:value={ausweis.aussenwand_flaeche}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-					<div>
-						<Label>U-Wert in W/m²K</Label>
-						<input
-							name="aussenwand_u_wert"
-							bind:value={ausweis.aussenwand_u_wert}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-				</div>
-
-				<div class="grid grid-cols-2 gap-4">
-					<div>
-						<Label>Fußboden in m²</Label>
-						<input
-							name="fussboden_flaeche"
-							bind:value={ausweis.fussboden_flaeche}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-					<div>
-						<Label>U-Wert in W/m²K</Label>
-						<input
-							name="fussboden_u_wert"
-							bind:value={ausweis.fussboden_u_wert}
-							readonly={!ausweis.tabellenwerte_aendern}
-							type="number"
-						/>
-					</div>
-				</div>
-
-				<div>
-					<Label
-						>Das von den Flächen eingeschlossene Gebäudevolumen in
-						m³</Label
-					>
-					<input
-						name="volumen"
-						type="number"
-						bind:value={ausweis.volumen}
-						readonly={!ausweis.tabellenwerte_aendern}
-					/>
-				</div>
-
-				<div>
-					<Label>Blower-Door-Test erfolgreich durchgeführt</Label>
-					<div class="flex flex-row gap-4">
-						<label class="radio-inline"
-							><input
-								type="radio"
-								value={true}
-								bind:group={ausweis.dicht}
-								name="dichtheit"
-							/>Ja</label
-						>
-						<label class="radio-inline"
-							><input
-								type="radio"
-								value={false}
-								bind:group={ausweis.dicht}
-								name="dichtheit"
-							/>Nein</label
-						>
-					</div>
-				</div>
-			</div>
-		</div>
-		<hr />
 		<Label
 			>D - Eingabe der Fensterflächen und Konstruktion von Dach, Wänden
 			und Boden</Label
@@ -1352,20 +955,62 @@ title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgesc
 				/>
 			</div>
 		</div>
-		<hr />
-		<Label
-			>G - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
-			Gebäudes</Label
+	
+
+				<!-- F Angaben zur Heizungsanlage -->
+
+				<Bereich bereich="F" title="Angaben zur Heizunganlage"
+				><SanierungszustandHeizungsanlage
+					bind:images
+					bind:gebaeude
+					bind:gebaeude_aufnahme_allgemein
+					bind:ausweis
+				/></Bereich
 			>
-		<BilderZusatzsysteme
-			{ausweis}
-			{gebaeude}
-			{gebaeude_aufnahme_allgemein}
-			{images}
-		/>
-		<hr />
-		<div class="flex flex-row justify-between">
-			<button class="button">Weiter</button>
-		</div>
+	
+			<!-- G Angaben zur Fenster, Dachfenster und Türen -->
+	
+			<Bereich bereich="G" title="Angaben zu Fenster, Dachfenster und Türen"
+				><SanierungszustandFensterTueren
+					bind:images
+					bind:gebaeude
+					bind:gebaeude_aufnahme_allgemein
+					bind:ausweis
+				/></Bereich
+			>
+			<!-- H Angaben zur Wärmedammung -->
+	
+			<Bereich bereich="H" title="Angaben zur Wärmedämmung"
+				><SanierungszustandWaermedammung
+					bind:images
+					bind:gebaeude
+					bind:gebaeude_aufnahme_allgemein
+					bind:ausweis
+				/></Bereich
+			>
+	
+			<!-- I Gebäudebild und Energieausweis PDF Vorschau  -->
+	
+			<Bereich bereich="I" title="Gebäudebild und Energieausweis PDF Vorschau"
+				><AusweisPreviewContainer
+					bind:images
+					bind:ausweis
+					bind:gebaeude
+				/></Bereich
+			>
+
+	
+		<ButtonWeiterHilfe {spaeterWeitermachen}
+		bind:ausweis
+		bind:images
+		bind:user
+		bind:gebaeude
+		bind:gebaeude_aufnahme_allgemein
+		>
+		</ButtonWeiterHilfe>
+		
+
+
+
 	</div>
 </form>

src/modules/KundendatenModule.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
 	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
+	import Bereich from "#labels/Bereich.svelte";
+	import Ansprechpartner from "#components/Ausweis/Ansprechpartner.svelte";
+	import Rechnungsadresse from "#components/Ausweis/Rechnungsadresse.svelte";
+	import Bezahlung from "#components/Ausweis/Bezahlung.svelte";
+
 	import Pruefung from "#components/Ausweis/Pruefung.svelte";
 	import ButtonZurueckSpeichernKaufabschluss from "#components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte";
 
@@ -19,10 +24,6 @@
 	export let user: BenutzerClient;
 	export let ausweis: VerbrauchsausweisWohnenClient;
 
-	export let bereich;
-	export let title;
-	export let bullets;
-
 	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
 	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
 
@@ -40,7 +41,7 @@
 			selected: false,
 		},
 		{
-			name: "Same Day Service <br>Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag",
+			name: "Same Day Service - Bestellung Werktags vor <b>12:00 Uhr</b><br>Ausstellung bis <b>18:00 Uhr</b> am gleichen Tag",
 			id: Enums.Service.SameDay,
 			price: 29,
 			selected: false,
@@ -98,7 +99,6 @@
 
 2xl:grid-cols-2 2xl:gap-x-8
 ">
-
 <div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
 	<PerformanceScore
 		bind:ausweis
@@ -107,6 +107,7 @@
 	/>
 </div>
 
+
 <div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
 		
 	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
@@ -120,15 +121,103 @@
 <form id="formInput-2" on:submit={speichern}>
 	<div id="formular-box" class="formular-boxen ring-0">
 
-		<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2 mb-6">
-			<div class="formular-abschnitt1">€</div>
-			<div class="formular-abschnitt2">Prüfung, Leistungsbeschreibung und Kosten</div>
+
+		<Bereich
+			bind:user
+			bereich="1"
+			title="Eingabe des Ansprechpartners -> {user.email}"
+			>
+			<Ansprechpartner 
+			bind:user
+		/></Bereich
+		>
+
+		<Bereich
+			bind:user
+			bereich="2"
+			title="Rechnungsadresse"
+			>
+			<Rechnungsadresse 
+			bind:user
+		/></Bereich
+		>
+
+		<Bereich
+			bind:selectedPaymentType
+			bereich="3"
+			title="Bezahlmethode"
+			>
+			<Bezahlung 
+			bind:selectedPaymentType
+		/></Bereich
+		>
+
+
+
+		<div class="grid grid-cols-2 gap-x-6 my-6">	
+			
+		<div class="zusaetze bereich-box bg-white ">
+
+			<h3>Zusatzleistungen:</h3>
+			
+					{#each services as service}
+
+					<div class="zusatz">
+						
+							<input
+									type="checkbox"
+									bind:checked={service.selected}
+								/>
+								<div class="text-right pr-6"><b>{@html service.price} €</b> inkl. Mwst</div>
+								<div>{@html service.name}</div>
+							
+					</div>
+					{/each}
+			
+
 	</div>
 
 
-		<div class="grid grid-cols-[2fr_3fr] gap-8">
+	<div class=" bereich-box bg-white ring-primary/50 ring-2" >
 
-			<div class="bereich-box pr-12">
+		<h3>Kosten:</h3>
+
+		<div class="ProduktKostenTabelle">
+	
+	
+			<div class="zeile betrag">
+				<div>Netto-Preis Energieausweis</div><div>:</div><div class="text-right"><b>{(price * 0.81).toFixed(2) + " €"}</b></div>
+			</div>
+	
+			<div class="zeile betrag">
+				<div>Zusatzleistung	(Prüfung Mehraufwand)
+				</div><div>:</div><div class="text-right"><b>0.00 €</b></div>
+			</div>
+	
+			<div class="zeile betrag">
+				<div>19% gesetzl. MwSt.	
+				</div><div>:</div><div class="text-right"><b>{(price * 0.19).toFixed(2) + " €"}</b></div>
+			</div>
+			<div class="zeile betrag mt-4">
+				<div><b>Preis inkl. MwSt.</b>	
+				</div><div>:</div><div class="text-right"><b>{price.toFixed(2) + " €"}</b></div>
+			</div>
+			<div class="zeile betrag mt-4 items-center">
+				<div><b>Bezahlmethode</b>	
+				</div><div>:</div><div class="justify-self-end">
+					<img src="images/{selectedPaymentType}.png" alt="{selectedPaymentType}" />
+				</div>
+			</div>
+	
+		</div>
+	
+	</div>
+
+</div>
+
+<ButtonZurueckSpeichernKaufabschluss />
+			
+			<div class="bereich-box pr-12 mt-6">
 				
 				<Pruefung 
 					bereich="A"
@@ -194,114 +283,10 @@
 			</div>
 
 			
-
-			<div class="grid grid-rows-3 gap-y-6">
-
-				<div class="bereich-box bg-white ring-primary/50 ring-4" >
-
-					<div class="ProduktKostenTabelle">
-						<div class="zeile">
-							<div>Produkt</div><div>:</div><div>Verbrauchsausweis</div>
-						</div>
-						<div class="zeile">
-							<div>Beschreibung</div><div>:</div>
-							<div class="col-span-2">Registrierung beim DiBt<br />
-								Prüfung durch Diplom Ingenieur<br />
-								Energieausweis Vorschau als PDF<br />
-							</div>
-						</div>
-						<div class="zeile betrag">
-							<div>Netto-Preis</div><div>:</div><div class="text-right"><b>{(price * 0.81).toFixed(2) + " €"}</b></div>
-						</div>
-						<div class="zeile betrag">
-							<div>19% gesetzl. MwSt.	
-							</div><div>:</div><div class="text-right"><b>{(price * 0.19).toFixed(2) + " €"}</b></div>
-						</div>
-						<div class="zeile betrag">
-							<div><b>Preis inkl. MwSt.</b>	
-							</div><div>:</div><div class="text-right"><b>{price.toFixed(2) + " €"}</b></div>
-						</div>
-
-					</div>
-	
-				</div>
-
-
-		<div class="varianten bereich-box bg-white">
-				<h3>Hiermit bestelle ich folgende Version des Energieausweises:</h3>
-
-
-
-				<div class="variante">
-		
-					<input
-						type="radio"
-						bind:group={basePrice}
-						value={prices[0]}
-						name="Preis"
-						checked
-					/>
-					<div class="text-right pr-4"><b>{prices[0]} €</b> inkl. MwSt.</div>
-					<div>Verbrauchsausweis online als PDF per E-Mail</div>
-				</div>
-				
-
-				<div class="variante">
-
-					<input
-						type="radio"
-						bind:group={basePrice}
-						value={prices[1]}
-						name="Preis"
-					/>
-					<div class="text-right pr-4"><b>{prices[1]} €</b> inkl. MwSt.</div>
-					<div>Verbrauchsausweis online inkl. Beratung als PDF per E-Mail</div>
-				</div>
-
-				<div class="variante">
-
-					<input
-						type="radio"
-						bind:group={basePrice}
-						value={prices[2]}
-						name="Preis"
-					/>
-					<div class="text-right pr-4"><b>{prices[2]} €</b> inkl. MwSt.</div>
-					<div>Verbrauchsausweis offline als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</div>
-				</div>
 	</div>
 
 
 
-		<div class="zusaetze bereich-box bg-white">
-
-				<h3>Zusatzleistungen</h3>
-				
-						{#each services as service}
-
-						<div class="zusatz">
-							
-								<input
-										type="checkbox"
-										bind:checked={service.selected}
-									/>
-									<div class="text-right pr-6"><b>{@html service.price} €</b> inkl. Mwst</div>
-									<div>{@html service.name}</div>
-								
-						</div>
-						{/each}
-				
-
-		</div>
-
-
-			
-	</div>
-</div>
-
-</div>
-	
-<ButtonZurueckSpeichernKaufabschluss />
 	
 
 </form>
@@ -311,10 +296,8 @@
 h3{@apply text-[1.25rem] ml-0 font-bold mb-6}
 
 	.ProduktKostenTabelle{@apply block;
-	.zeile{@apply grid grid-cols-[10rem_2rem_5rem_1fr];}
-	.zeile:nth-child(3){@apply mt-6}
-	.zeile:nth-child(5){@apply mt-6}
-	.betrag{@apply font-bold text-[1.25rem]}
+	.zeile{@apply grid grid-cols-[19rem_1rem_5rem_1fr];}
+	.betrag{@apply font-bold text-[1.15rem]}
 	}
 
 .varianten{@apply block;

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

@@ -1,13 +1,9 @@
 <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 { PRICES } from "#lib/constants";
 
 	import Bereich from "#labels/Bereich.svelte";
-	//import HelpLabel from "#labels/HelpLabel.svelte";
-	//import Inputlabel from "#labels/InputLabel.svelte";
-	//import Label from "#components/Label.svelte";
 
 	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
 	import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
@@ -24,8 +20,6 @@
 	import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
 	import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";
 
-	//import ZipSearch from "#components/PlzSuche.svelte";
-
 	import {
 		RawNotificationWrapper,
 		RawNotification,

src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro

@@ -1,6 +1,6 @@
 ---
 
-import AusweisLayout from "#layouts/AusweisLayout.astro";
+import AusweisLayout from "#layouts/AusweisLayoutDaten.astro";
 import BedarfsausweisWohnenModule from "#modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte";
 import { BedarfsausweisWohnenClient } from "#components/Ausweis/types";
 import { createCaller } from "#lib/caller";

src/style/global.css

@@ -53,6 +53,7 @@ input, select, textarea{
 }
 
 input[type="text"],
+input[type="email"], 
 input[type="number"], 
 input[type="password"], 
 input[type="file"],