From 7286226ef5bb4348e17f9c145258043c6fc084cc Mon Sep 17 00:00:00 2001
From: Robert Jagtiani <all@robert-jagtiani.de>
Date: Sun, 26 Jan 2025 13:55:34 +0100
Subject: [PATCH] KundenDaten

---
 public/images/giropay.png                     | Bin 0 -> 4260 bytes
 src/components/Ausweis/Ansprechpartner.svelte | 100 ++++++
 src/components/Ausweis/Bezahlung.svelte       |  54 +++
 .../Ausweis/Rechnungsadresse.svelte           | 326 ++++++++++++++++++
 src/components/PaymentOption.svelte           |   4 +-
 src/modules/KundendatenModule.svelte          | 223 ++++++------
 src/style/global.css                          |   3 +-
 7 files changed, 587 insertions(+), 123 deletions(-)
 create mode 100644 public/images/giropay.png
 create mode 100644 src/components/Ausweis/Ansprechpartner.svelte
 create mode 100644 src/components/Ausweis/Bezahlung.svelte
 create mode 100644 src/components/Ausweis/Rechnungsadresse.svelte

diff --git a/public/images/giropay.png b/public/images/giropay.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ed87f5e06e2d18f2712d7dc78e3c01daf7713b6
GIT binary patch
literal 4260
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
P{*Pd7VM{A8b3gPi<8$$P

literal 0
HcmV?d00001

diff --git a/src/components/Ausweis/Ansprechpartner.svelte b/src/components/Ausweis/Ansprechpartner.svelte
new file mode 100644
index 00000000..5af4997b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Ausweis/Bezahlung.svelte b/src/components/Ausweis/Bezahlung.svelte
new file mode 100644
index 00000000..1378f228
--- /dev/null
+++ b/src/components/Ausweis/Bezahlung.svelte
@@ -0,0 +1,54 @@
+<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/mastercard.png"}
+			></PaymentOption>
+			<PaymentOption
+				paymentType={Enums.Bezahlmethoden.rechnung}
+				bind:selectedPaymentType
+				name={"Rechnung"}
+				icon={"/images/rechnung.png"}
+			></PaymentOption>
+
+
+
+
+
+</div>
\ No newline at end of file
diff --git a/src/components/Ausweis/Rechnungsadresse.svelte b/src/components/Ausweis/Rechnungsadresse.svelte
new file mode 100644
index 00000000..4eb1eeba
--- /dev/null
+++ b/src/components/Ausweis/Rechnungsadresse.svelte
@@ -0,0 +1,326 @@
+<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-2 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="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 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="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 Versand-Empfänger Strasse und Hausnummer ein, an die die Rechnung versandt wird.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- PLZ / ORT -->
+
+<div class="grid grid-cols-2 gap-x-4 order-10 md:order-10 xl:order-10">
+
+<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 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="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-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>
\ No newline at end of file
diff --git a/src/components/PaymentOption.svelte b/src/components/PaymentOption.svelte
index 3e6a3ca5..2021eb2b 100644
--- a/src/components/PaymentOption.svelte
+++ b/src/components/PaymentOption.svelte
@@ -7,9 +7,11 @@
 	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}>
+<button type="button" data-test={paymentType} class="bg-white" class:bg-gray-100={paymentType == selectedPaymentType} 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>
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index 322c0e59..07571785 100644
--- a/src/modules/KundendatenModule.svelte
+++ b/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 || {};
 
@@ -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,101 @@
 <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>
-		</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-[2fr_3fr] gap-8">
+
+		<div class="grid grid-cols-2 gap-x-6 my-6">	
 			
-			<div class="bereich-box pr-12">
+		<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=" bereich-box bg-white ring-primary/50 ring-2" >
+
+		<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">
+				<div><b>Bezahlmethode</b>	
+				</div><div>:</div><div class="text-left"><b>{selectedPaymentType}</b></div>
+			</div>
+	
+		</div>
+	
+	</div>
+
+</div>
+
+<ButtonZurueckSpeichernKaufabschluss />
+			
+			<div class="bereich-box pr-12 mt-6">
 				
 				<Pruefung 
 					bereich="A"
@@ -193,115 +280,11 @@
 
 			</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 +294,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;
diff --git a/src/style/global.css b/src/style/global.css
index 739fc696..d5750d4b 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -52,7 +52,8 @@ input, select, textarea{
 	@apply py-1.5 px-2.5 w-full outline-none;
 }
 
-input[type="text"], 
+input[type="text"],
+input[type="email"], 
 input[type="number"], 
 input[type="password"], 
 input[type="file"],