From 0e5a74725e2536544a16337faedc8d0aabdb1ffd Mon Sep 17 00:00:00 2001
From: Robert Jagtiani <all@robert-jagtiani.de>
Date: Sat, 22 Feb 2025 03:08:48 +0100
Subject: [PATCH] Bedarfsausweis

---
 .../Ausweis/AngabenZurHeizunganlage.svelte    | 385 +++++++++
 src/components/Ausweis/DaemmungImage.svelte   |   2 +-
 src/components/Ausweis/FensterImage.svelte    |   2 +-
 src/components/Ausweis/Fensterflaechen.svelte | 372 +++++++++
 src/components/Ausweis/GebaeudeVolumen.svelte | 443 ++++++++--
 src/components/Ausweis/HeizungImage.svelte    |   2 +-
 .../KellerDachgeschossLueftungKuehlung.svelte | 202 +++++
 .../SanierungszustandHeizungsanlage.svelte    |   9 +-
 .../BedarfsausweisWohnenModule.svelte         | 779 +-----------------
 .../VerbrauchsausweisGewerbeModule.svelte     |   1 +
 .../VerbrauchsausweisWohnenModule.svelte      |   1 +
 src/pages/widgets/[vermittler].astro          |   2 +-
 12 files changed, 1388 insertions(+), 812 deletions(-)
 create mode 100644 src/components/Ausweis/AngabenZurHeizunganlage.svelte
 create mode 100644 src/components/Ausweis/Fensterflaechen.svelte
 create mode 100644 src/components/Ausweis/KellerDachgeschossLueftungKuehlung.svelte

diff --git a/src/components/Ausweis/AngabenZurHeizunganlage.svelte b/src/components/Ausweis/AngabenZurHeizunganlage.svelte
new file mode 100644
index 00000000..f82f05fb
--- /dev/null
+++ b/src/components/Ausweis/AngabenZurHeizunganlage.svelte
@@ -0,0 +1,385 @@
+<script lang="ts">
+
+	import HelpLabel from "#components/labels/HelpLabel.svelte";
+	import Inputlabel from "#components/labels/InputLabel.svelte";
+
+    import { Enums } from "@ibcornelsen/database/client";
+    import { hotWaterProductionTypes } from "#modules/BedarfsausweisWohnen/HotWaterProductionTypes.js";
+    
+    export let ausweis;
+
+    const arrayRange = (start: number, stop: number, step: number) =>
+		Array.from(
+			{ length: (stop - start) / step + 1 },
+			(value, index) => start + index * step
+		);
+
+</script>
+
+<div id="fensterflaechen" class="mb-6 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-4 xl:gap-x-8 xl:gap-y-8
+"
+>
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+    <Inputlabel title="Energieträger *"></Inputlabel>
+
+    <select
+					name="energietraeger_1"
+					bind:value={ausweis.energietraeger_1}
+					required
+				>
+					<option>Bitte auswählen</option>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier den Energieträger der Heizung ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+    <Inputlabel title="Verteilung Warmwasser *"></Inputlabel>
+
+    <select
+					name="warmwasser_verteilung"
+					bind:value={ausweis.warmwasser_verteilung}
+				>
+					<option>Bitte auswählen</option>
+					<option value="zvmzbis1978"
+						>zentrale Verteilung mit Zirkulation (bis 1978)</option
+					>
+					<option value="zvmzngbis1978"
+						>zentrale Verteilung mit Zirkulation nachträglich
+						gedämmt (bis 1978)</option
+					>
+					<option value="zvmzvon1979bis1994"
+						>zentrale Verteilung mit Zirkulation (von 1979 - 1994)</option
+					>
+					<option value="zvmzab1995"
+						>zentrale Verteilung mit Zirkulation (ab 1994)</option
+					>
+					<option value="zvozbis1978"
+						>zentrale Verteilung ohne Zirkulation (bis 1978)</option
+					>
+					<option value="zvozngbis1978"
+						>zentrale Verteilung ohne Zirkulation nachträglich
+						gedämmt (bis 1978)</option
+					>
+					<option value="zvozvon1979bis1994"
+						>zentrale Verteilung ohne Zirkulation (von 1979 - 1994)</option
+					>
+					<option value="zvozab1995"
+						>zentrale Verteilung ohne Zirkulation (ab 1994)</option
+					>
+					<option value="dzsbis1994"
+						>dezentrales System (bis 1994)</option
+					>
+					<option value="dzsab1995"
+						>dezentrales System (ab 1995)</option
+					>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Warmwasserverteilung ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+    <Inputlabel title="Speicherung Warmwasser"></Inputlabel>
+
+    <select
+    name="warmwasser_speicherung"
+    bind:value={ausweis.warmwasser_speicherung}
+>
+    <option>Bitte auswählen</option>
+    <option value="zwwsath"
+        >zentrale Warmwasserspeicher außerhalb thermischer Hülle</option
+    >
+    <option value="zwwsith"
+        >zentrale Warmwasserspeicher innerhalb thermischer Hülle</option
+    >
+    <option value="gasbs">gasbefeuerter Speicher</option>
+    <option value="elks">Elektro-Kleinspeicher</option>
+</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier wenn vorhanden die Art des
+            Warmwasserspeichers ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+    <Inputlabel title="Erzeugung Warmwasser *"></Inputlabel>
+
+    <select
+					name="warmwasser_erzeugung"
+					bind:value={ausweis.warmwasser_erzeugung}
+					required
+				>
+					<option>Bitte auswählen</option>
+					{#each hotWaterProductionTypes as type, i}
+						<option value={i}>{type}</option>
+					{/each}
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Wärmeerzeugung für Warmwasser ein.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-5 md:order-5 xl:order-5">
+    <Inputlabel title="Übergabe Heizung *"></Inputlabel>
+
+    <select
+					name="heizung_zentral"
+					bind:value={ausweis.heizung_zentral}
+				>
+					<option>Bitte auswählen</option>
+					<option value={true}>Zentralheizung</option>
+					<option value={false}>Einzelfeuerstätte</option>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier ein ob es sich um Zentralheizung
+            handelt oder über Beheizung durch dezentrale Einzelöfen.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+    <Inputlabel title="Verteilung Heizung *"></Inputlabel>
+
+    <select
+    name="heizung_verteilung"
+    bind:value={ausweis.heizung_verteilung}
+>
+    <option>Bitte auswählen</option>
+    <option value="zv7055bis1978"
+        >zentrale Verteilung 70/55°C bis 1978</option
+    >
+    <option value="zv7055ngbis1978"
+        >zentrale Verteilung 70/55°C, nachträglich gedämmt bis
+        1978</option
+    >
+    <option value="zv7055von1979bis1994"
+        >zentrale Verteilung 70/55°C von 1979 bis 1994</option
+    >
+    <option value="zv7055ab1995"
+        >zentrale Verteilung 70/55°C ab 1995</option
+    >
+    <option value="zv5545bis1978"
+        >zentrale Verteilung 55/45°C bis 1978</option
+    >
+    <option value="zv5545ngbis1978"
+        >zentrale Verteilung 55/45°C, nachträglich gedämmt bis
+        1978</option
+    >
+    <option value="zv5545von1979bis1994"
+        >zentrale Verteilung 55/45°C von 1979 bis 1994</option
+    >
+    <option value="zv5545ab1995"
+        >zentrale Verteilung 55/45°C ab 1995</option
+    >
+    <option value="wwvertbis1978"
+        >Wohnungsweise Verteilung bis 1978</option
+    >
+    <option value="wwvertvon1979bis1994"
+        >Wohnungsweise Verteilung von 1979 bis 1994</option
+    >
+    <option value="wwvertab1995"
+        >Wohnungsweise Verteilung ab 1995</option
+    >
+    <option value="dezensys">dezentrales System</option>
+</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Verteilung der Heizung ein.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-7 md:order-7 xl:order-7">
+    <Inputlabel title="Speicherung Heizung"></Inputlabel>
+
+    <select
+					name="heizung_speicherung"
+					bind:value={ausweis.heizung_speicherung}
+				>
+					<option>Bitte auswählen</option>
+					<option value="elzs7055bis1994"
+						>El.-Zentralspeicher 70/55°C bis 1994</option
+					>
+					<option value="elzs7055ab1995"
+						>El.-Zentralspeicher 70/55°C ab 1995</option
+					>
+					<option value="puffs5545bis1994"
+						>Pufferspeicher El.-Wärmepumpe 55/45°C bis 1994</option
+					>
+					<option value="puffs5545ab1995"
+						>Pufferspeicher El.-Wärmepumpe 55/45°C ab 1995</option
+					>
+					<option value="puffshk7055bis1994"
+						>Pufferspeicher für Holzkessel 70/55°C bis 1994</option
+					>
+					<option value="puffshk7055ab1995"
+						>Pufferspeicher für Holzkessel 70/55°C ab 1995</option
+					>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier - wenn vorhanden - den Speicher der
+            Heizung ein.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-8 md:order-8 xl:order-8">
+    <Inputlabel title="Wärmeerzeugung Heizung *"></Inputlabel>
+
+    <select
+					name="waerme_erzeugung_heizung"
+					bind:value={ausweis.waerme_erzeugung_heizung}
+					required
+				>
+					<option>Bitte auswählen</option>
+					<option value="ktkesselbis1986h"
+						>Konstanttemperatur-Kessel bis 1986</option
+					>
+					<option value="ktkesselvon1987bis1994h"
+						>Konstanttemperatur-Kessel von 1987 bis 1994</option
+					>
+					<option value="ktkesselab1995h"
+						>Konstanttemperatur-Kessel ab 1995</option
+					>
+					<option value="ntkesselbis1986h"
+						>Niedertemperatur-Kessel bis 1986</option
+					>
+					<option value="ntkesselvon1987bis1994h"
+						>Niedertemperatur-Kessel von 1987 bis 1994</option
+					>
+					<option value="ntkesselab1995h"
+						>Niedertemperatur-Kessel ab 1995</option
+					>
+					<option value="bwkesselbis1986h"
+						>Brennwert-Kessel bis 1986</option
+					>
+					<option value="bwkesselvon1987bis1994h"
+						>Brennwert-Kessel von 1987 bis 1994</option
+					>
+					<option value="bwkesselab1995h"
+						>Brennwert-Kessel ab 1995</option
+					>
+					<option value="bwkesselab1999h"
+						>Brennwertkessel verbessert ab 1999</option
+					>
+					<option value="ewplhvon1979bis1994h"
+						>Elektro-Wärmepumpe (Außenluft) von 1979 bis 1994</option
+					>
+					<option value="ewplhab1995h"
+						>Elektro-Wärmepumpe (Außenluft) ab 1995</option
+					>
+					<option value="ewpemvon1979bis1994h"
+						>Elektro-Wärmepumpe (Erdreich) von 1979 bis 1994</option
+					>
+					<option value="ewpemab1995h"
+						>Elektro-Wärmepumpe (Erdreich) ab 1995</option
+					>
+					<option value="ewpgmvon1979bis1994h"
+						>Elektro-Wärmepumpe (Grundwasser) von 1979 bis 1994</option
+					>
+					<option value="ewpgmab1995h"
+						>Elektro-Wärmepumpe (Grundwasser) ab 1995</option
+					>
+					<option value="fwugsh">Fernwärme-Übergabestation</option>
+					<option value="zesh">zentraler elektrischer Speicher</option
+					>
+					<option value="thermebis1994h"
+						>Therme (Umlaufwasserheizer) bis 1994</option
+					>
+					<option value="thermeab1995h"
+						>Therme (Umlaufwasserheizer) ab 1995</option
+					>
+					<option value="bthermeab1995h"
+						>Brennwert-Therme ab 1995</option
+					>
+					<option value="oeleinzel"
+						>ölbefeuerte Einzelöfen mit Verdampfungsbrenner</option
+					>
+					<option value="kheinzel">Kohle- oder Holzofen</option>
+					<option value="greinzel">Gasraumheizer</option>
+					<option value="elnseinzelbis1994"
+						>Elektro-Nachtspeicherheizung bis 1994</option
+					>
+					<option value="elnseinzelab1995"
+						>Elektro-Nachtspeicherheizung ab 1995</option
+					>
+					<option value="eldirekt">Elektro-Direktheizgerät</option>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier den Wärmerzeuger der Heizung ein.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-9 md:order-9 xl:order-9">
+    <Inputlabel title="Energieträger Zusatzheizung"></Inputlabel>
+
+    <select
+					name="energietraeger_2"
+					bind:value={ausweis.energietraeger_2}
+					required
+				>
+					<option>Bitte auswählen</option>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier - wenn vorhanden - die Zusatzheizung
+            ein (z.B. Kamin, Pelletheizung).</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-10 md:order-10 xl:order-10">
+    <Inputlabel title="Anteil am Gesamtheizbedarf des Hauses"></Inputlabel>
+
+    <select
+					name="anteil_zusatzheizung"
+					bind:value={ausweis.anteil_zusatzheizung}
+				>
+					<option value="0" selected
+						>Anteil am Gesamtheizbedarf des Hauses</option
+					>
+					{#each arrayRange(0.01, 0.7, 0.01) as step}
+						<option value={step}>{step * 100}%</option>
+					{/each}
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier den prozentualen Anteil der
+            Zusatzheizung ein.</HelpLabel>
+    </div>
+</div>
+
+
+
+<div class="input-standard order-11 md:order-11 xl:order-11">
+    <Inputlabel title="Eingabe Solar Kollektorfläche in m²"></Inputlabel>
+
+    <input
+					name="kollektor_flaeche"
+					bind:value={ausweis.kollektor_flaeche}
+					type="number"
+				/>
+
+    <div class="help-label">
+        <HelpLabel>Wenn Sie ein Solarsystem für Warmwasser einsetzen geben Sie
+            bitte die Kollektorfläche an:</HelpLabel>
+    </div>
+</div>
+
+
+
+</div>
\ No newline at end of file
diff --git a/src/components/Ausweis/DaemmungImage.svelte b/src/components/Ausweis/DaemmungImage.svelte
index e1926614..a5fd4302 100644
--- a/src/components/Ausweis/DaemmungImage.svelte
+++ b/src/components/Ausweis/DaemmungImage.svelte
@@ -10,7 +10,7 @@
 
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="md:box md:card mb-0">
+	<div class="md:box md:card mb-0 bereich-box">
 
 
 		<div class="font-bold mb-2">
diff --git a/src/components/Ausweis/FensterImage.svelte b/src/components/Ausweis/FensterImage.svelte
index 73fd94fd..80776e6d 100644
--- a/src/components/Ausweis/FensterImage.svelte
+++ b/src/components/Ausweis/FensterImage.svelte
@@ -10,7 +10,7 @@
 
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="md:box md:card mb-0">
+	<div class="md:box md:card mb-0 bereich-box">
 
 		<div class="font-bold mb-2">
 			<span class="text-red-500">WICHTIG:</span>
diff --git a/src/components/Ausweis/Fensterflaechen.svelte b/src/components/Ausweis/Fensterflaechen.svelte
new file mode 100644
index 00000000..4df61d55
--- /dev/null
+++ b/src/components/Ausweis/Fensterflaechen.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+	import HelpLabel from "#components/labels/HelpLabel.svelte";
+	import Inputlabel from "#components/labels/InputLabel.svelte";
+
+    let fensterArten = {
+		Einfachverglasung: 5,
+		"Holzfenster Doppelverglasung": 2.7,
+		"Kunststofffenster Doppelverglasung": 3,
+		"Alu- oder Stahlfenster Doppelverglasung": 4.3,
+		"Fenster Doppelverglasung (ab 1995)": 1.8,
+		"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
+		"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
+		"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
+		"Passivhausfenster(U-Wert 0,7)": 0.7,
+		"Passivhausfenster(U-Wert 0,6)": 0.6,
+		"Fenster mit U-Wert 2,3": 2.3,
+		"Fenster mit U-Wert 1,6": 1.6,
+		"Fenster mit U-Wert 1,7": 1.7,
+		"Fenster mit U-Wert 1,3": 1.3,
+		"Fenster mit U-Wert 1": 1,
+	};
+
+    let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
+
+    export let ausweis;
+
+</script>
+
+
+<div id="fensterflaechen" 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-4 xl:gap-x-8 xl:gap-y-8
+"
+>
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+    <Inputlabel title="Fensterfläche 1 in m² *"></Inputlabel>
+
+    <input
+    name="fenster_flaeche_1"
+    bind:value={ausweis.fenster_flaeche_1}
+    type="number"
+    required
+    placeholder="0"
+/>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Fläche der Fenster ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+    <Inputlabel title="Art der Fenster *"></Inputlabel>
+
+    <select name="fenster_art_1" bind:value={ausweis.fenster_art_1}>
+        <option>bitte auswählen</option>
+        {#each Object.entries(fensterArten) as [name, value]}
+            <option {value}>{name}</option>
+        {/each}
+    </select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+    <Inputlabel title="Fensterfläche 2 in m² *"></Inputlabel>
+
+    <input
+		name="fenster_flaeche_2"
+	    type="number"
+		bind:value={ausweis.fenster_flaeche_2}
+				/>
+
+    <div class="help-label">
+        <HelpLabel>Wenn vorhanden geben Sie hier die Fläche der Fenster ein
+            die älter sind oder einen anderen U-Wert besitzen.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+    <Inputlabel title="Art der Fenster *"></Inputlabel>
+
+    <select
+    name="fenster_art_2"
+    bind:value={ausweis.fenster_art_2}
+    required
+>
+    <option>bitte auswählen</option>
+    {#each Object.entries(fensterArten) as [name, value]}
+        <option {value}>{name}</option>
+    {/each}
+</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-5 md:order-5 xl:order-5">
+    <Inputlabel title="Dachfenster in m² *"></Inputlabel>
+
+    <input
+					name="dachfenster_flaeche"
+					type="number"
+					bind:value={ausweis.dachfenster_flaeche}
+				/>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Fläche der Dachfenster ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+    <Inputlabel title="Art der Dachfenster *"></Inputlabel>
+
+    <select
+					name="dachfenster_art"
+					bind:value={ausweis.dachfenster_art}
+				>
+					<option>bitte auswählen</option>
+					{#each Object.entries(fensterArten) as [name, value]}
+						<option {value}>{name}</option>
+					{/each}
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-7 md:order-7 xl:order-7">
+    <Inputlabel title="Haustür in m² *"></Inputlabel>
+
+    <input
+					name="haustuer_flaeche"
+					type="number"
+					bind:value={ausweis.haustuer_flaeche}
+				/>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Fläche der Haustür ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-8 md:order-8 xl:order-8">
+    <Inputlabel title="Art der Tür *"></Inputlabel>
+
+    <select
+    name="haustuer_art"
+    bind:value={ausweis.haustuer_art}
+    required
+>
+    <option>bitte auswählen</option>
+    <option value="1.8">Standard (U-Wert 1,8)</option>
+    <option value="5">Ganz alte Tür (U-Wert 5,0)</option>
+    <option value="2.7">U-Wert 2,7</option>
+    <option value="3">U-Wert 3,0</option>
+    <option value="4.3">U-Wert 4,3</option>
+    <option value="1.1">U-Wert 1,1</option>
+    <option value="0.9">U-Wert 0,9</option>
+    <option value="0.85">U-Wert 0,85</option>
+    <option value="0.7">Passivhaustür (U-Wert 0,7)</option>
+    <option value="0.6">Passivhaustür (U-Wert 0,6)</option>
+    <option value="2.3">U-Wert 2,3</option>
+    <option value="1.6">U-Wert 1,6</option>
+    <option value="1.7">U-Wert 1,7</option>
+    <option value="1.3">U-Wert 1,3</option>
+    <option value="1">U-Wert 1,0</option>
+</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Art der Haustür ein.</HelpLabel>
+    </div>
+</div>
+
+
+</div>
+
+
+
+
+
+<div id="dachflaechen" class="mt-6 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-4 xl:gap-x-8 xl:gap-y-8
+"
+>
+
+
+
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+    <Inputlabel title="Bauart Dachfläche *"></Inputlabel>
+
+    <select
+					name="dach_bauart"
+					bind:value={ausweis.dach_bauart}
+					required
+				>
+					<option>bitte auswählen</option>
+					<option value="Massive Konstruktion"
+						>Massive Konstruktion (insbesondere Flachdächer)</option
+					>
+					<option value="Holzkonstruktion"
+						>Holzkonstruktion (insbesondere Steildächer)</option
+					>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Bauart der Dachfläche ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>
+
+    <select
+					name="dach_daemmung"
+					bind:value={ausweis.dach_daemmung}
+					required
+				>
+					<option>bitte auswählen</option>
+					{#each daemmungsBreiten as breite}
+						<option value={breite}>{breite * 100} cm</option>
+					{/each}
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+    <Inputlabel title="Bauart Geschossdecke *"></Inputlabel>
+
+    <select
+					name="decke_bauart"
+					bind:value={ausweis.decke_bauart}
+					required
+				>
+					<option>bitte auswählen</option>
+					<option value="Massive Konstruktion"
+						>Massive Konstruktion (insbesondere Flachdächer)</option
+					>
+					<option value="Holzkonstruktion"
+						>Holzkonstruktion (insbesondere Steildächer)</option
+					>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Bauart der Geschossdecke ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>
+
+    <select
+					name="decke_daemmung"
+					bind:value={ausweis.decke_daemmung}
+					required
+				>
+					<option>bitte auswählen</option>
+					{#each daemmungsBreiten as breite}
+						<option value={breite}>{breite * 100} cm</option>
+					{/each}
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-5 md:order-5 xl:order-5">
+    <Inputlabel title="Bauart Außenwand *"></Inputlabel>
+
+    <select
+					name="aussenwand_bauart"
+					bind:value={ausweis.aussenwand_bauart}
+					required
+				>
+					<option>bitte auswählen</option>
+					<option value="Massive Konstruktion"
+						>Massive Konstruktion (insbesondere Flachdächer)</option
+					>
+					<option value="Holzkonstruktion"
+						>Holzkonstruktion (insbesondere Steildächer)</option
+					>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Bauart der Außenwand ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>
+
+    <select
+					name="aussenwand_daemmung"
+					bind:value={ausweis.aussenwand_daemmung}
+					required
+				>
+					<option>bitte auswählen</option>
+					{#each daemmungsBreiten as breite}
+						<option value={breite}>{breite * 100} cm</option>
+					{/each}
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-7 md:order-7 xl:order-7">
+    <Inputlabel title="Bauart Fußboden *"></Inputlabel>
+
+    <select
+					name="boden_bauart"
+					bind:value={ausweis.boden_bauart}
+					required
+				>
+					<option>bitte auswählen</option>
+					<option value="Massive Konstruktion"
+						>Massive Konstruktion (insbesondere Flachdächer)</option
+					>
+					<option value="Holzkonstruktion"
+						>Holzkonstruktion (insbesondere Steildächer)</option
+					>
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die Bauart des Fußbodens ein.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-8 md:order-8 xl:order-8">
+    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>
+
+    <select
+					name="boden_daemmung"
+					bind:value={ausweis.boden_daemmung}
+					required
+				>
+					<option>bitte auswählen</option>
+					{#each daemmungsBreiten as breite}
+						<option value={breite}>{breite * 100} cm</option>
+					{/each}
+				</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
+    </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+</div>
\ No newline at end of file
diff --git a/src/components/Ausweis/GebaeudeVolumen.svelte b/src/components/Ausweis/GebaeudeVolumen.svelte
index 5715cbcd..c5ef389f 100644
--- a/src/components/Ausweis/GebaeudeVolumen.svelte
+++ b/src/components/Ausweis/GebaeudeVolumen.svelte
@@ -1,53 +1,164 @@
 <script lang="ts">
-    
-import HelpLabel from "#components/HelpLabel.svelte";
-import Label from "#components/Label.svelte";
-
-export let ausweis: BedarfsausweisWohnenClient;
+import HelpLabel from "#components/labels/HelpLabel.svelte";
+import Inputlabel from "#components/labels/InputLabel.svelte";
+export let ausweis;
 
 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
+id="superBereich2"
+class="grid w-full items-start
+grid-cols-1 gap-x-4 gap-y-8
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
+">
 
-        <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
+<div class="bereich-box col-span-2">
+    <div class="w-full grid grid-cols-4 gap-4 justify-between justify-items-center items-center">
+        <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>
+
+<div>
+
+<div
+	id="Berechnungshilfe2"
+	class="bereich-box grid w-full
+grid-cols-1 gap-x-4 gap-y-8
+sm:grid-cols-3 sm:gap-x-6 sm:gap-y-8
+xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
+"
+>
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+    <Inputlabel title="A"></Inputlabel>
+
+    <input
+    name="masse_a"
+    type="number"
+    bind:value={ausweis.masse_a}
+/>
+
+<div class="help-label">
+    <HelpLabel></HelpLabel>
+</div>
+</div>
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+    <Inputlabel title="B"></Inputlabel>
+
+    <input
+                    name="masse_b"
+                    type="number"
+                    bind:value={ausweis.masse_b}
+                />
+
+<div class="help-label">
+    <HelpLabel></HelpLabel>
+</div>
+</div>
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+    <Inputlabel title="C"></Inputlabel>
+
+    <input
+                    name="masse_c"
+                    type="number"
+                    bind:value={ausweis.masse_c}
+                />
+
+<div class="help-label">
+    <HelpLabel></HelpLabel>
+</div>
+</div>
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+    <Inputlabel title="D"></Inputlabel>
+
+    <input
+                    name="masse_d"
+                    type="number"
+                    bind:value={ausweis.masse_d}
+                />
+
+<div class="help-label">
+    <HelpLabel></HelpLabel>
+</div>
+
+</div>
+
+<div class="input-standard order-5 md:order-5 xl:order-5">
+    <Inputlabel title="E"></Inputlabel>
+
+    <input
+                    name="masse_e"
+                    type="number"
+                    bind:value={ausweis.masse_e}
+                />
+
+<div class="help-label">
+    <HelpLabel></HelpLabel>
+</div>
+
+</div>
+
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+    <Inputlabel title="F"></Inputlabel>
+
+    <input
+                    name="masse_f"
+                    type="number"
+                    bind:value={ausweis.masse_f}
+                />
+
+<div class="help-label">
+    <HelpLabel></HelpLabel>
+</div>
+
+</div>
+
+</div>
+
+<div
+	id="Berechnungshilfe1"
+	class="bereich-box grid w-full mt-6
+grid-cols-1 gap-x-4 gap-y-8
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
+"
+>
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+    <Inputlabel title="Anzahl Vollgeschosse *"></Inputlabel>
+
+    <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
+<div class="help-label">
+    <HelpLabel>Bitte geben Sie hier die Anzahl der Vollgeschosse
+        an. Keller und Dachgeschoss mit Schrägen zählen
+        nicht dazu.</HelpLabel>
+</div>
+</div>
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+    <Inputlabel title="Geschosshöhe *"></Inputlabel>
+
+    <select
                     name="geschosshoehe"
                     bind:value={ausweis.geschosshoehe}
                     required
@@ -58,26 +169,34 @@ const arrayRange = (start: number, stop: number, step: number) =>
                         >
                     {/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 class="help-label">
+    <HelpLabel>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>
+</div>
+</div>
 
-            <div>
-                <HelpLabel title="Breite aller Gauben in m"
-                    >Bitte geben Sie hier die Gesamtbreite aller Gauben
-                    in m ein.</HelpLabel
-                >
-                <select
+<div class="input-standard order-3 md:order-3 xl:order-3">
+    <Inputlabel title="Gaubenanzahl"></Inputlabel>
+
+    <input
+    name="anzahl_gauben"
+    bind:value={ausweis.anzahl_gauben}
+    type="number"
+/>
+
+<div class="help-label">
+    <HelpLabel>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
+        die Anzahl ein.</HelpLabel>
+</div>
+</div>
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+    <Inputlabel title="Breite aller Gauben in m"></Inputlabel>
+
+    <select
                     name="breite_gauben"
                     bind:value={ausweis.breite_gauben}
                 >
@@ -87,8 +206,222 @@ const arrayRange = (start: number, stop: number, step: number) =>
                         >
                     {/each}
                 </select>
-            </div>
-        </div>
+
+<div class="help-label">
+    <HelpLabel>Bitte geben Sie hier die Gesamtbreite aller Gauben
+        in m ein.</HelpLabel>
+</div>
+
+
+</div>
+</div>
+
+</div>
+
+<div
+	id="Berechnungstabelle"
+	class="bereich-box grid w-full 
+grid-cols-1 gap-x-4 gap-y-8
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
+"
+>
+
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+    <Inputlabel title="Dachfläche in m²"></Inputlabel>
+
+    <input
+    name="dachflaeche"
+    bind:value={ausweis.dachflaeche}
+    readonly={!ausweis.tabellenwerte_aendern}
+    type="number"
+/>
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>
+
+    <input
+                    name="dach_u_wert"
+                    bind:value={ausweis.dach_u_wert}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+    <Inputlabel title="Geschoßdecke in m²"></Inputlabel>
+
+    <input
+                    name="deckenflaeche"
+                    bind:value={ausweis.deckenflaeche}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>
+
+    <input
+    name="decke_u_wert"
+    bind:value={ausweis.decke_u_wert}
+    readonly={!ausweis.tabellenwerte_aendern}
+    type="number"
+/>
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>
+
+
+<div class="input-standard order-5 md:order-5 xl:order-5">
+    <Inputlabel title="Außenwand in m²"></Inputlabel>
+
+    <input
+                    name="aussenwand_flaeche"
+                    bind:value={ausweis.aussenwand_flaeche}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>
+
+    <input
+    name="aussenwand_u_wert"
+    bind:value={ausweis.aussenwand_u_wert}
+    readonly={!ausweis.tabellenwerte_aendern}
+    type="number"
+/>
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>  
+
+
+<div class="input-standard order-7 md:order-7 xl:order-7">
+    <Inputlabel title="Fußboden in m²"></Inputlabel>
+
+    <input
+                    name="fussboden_flaeche"
+                    bind:value={ausweis.fussboden_flaeche}
+                    readonly={!ausweis.tabellenwerte_aendern}
+                    type="number"
+                />
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-8 md:order-8 xl:order-8">
+    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>
+
+    <input
+    name="fussboden_u_wert"
+    bind:value={ausweis.fussboden_u_wert}
+    readonly={!ausweis.tabellenwerte_aendern}
+    type="number"
+/>
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>  
+
+
+<div class="input-standard order-9 md:order-9 xl:order-9">
+    <Inputlabel title="eingeschlossenes Gebäudevolumen in m³"></Inputlabel>
+
+    <input
+                name="volumen"
+                type="number"
+                bind:value={ausweis.volumen}
+                readonly={!ausweis.tabellenwerte_aendern}
+            />
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>  
+
+<div class="input-standard order-10 md:order-10 xl:order-10">
+    <Inputlabel title="Blower-Door-Test erfolgreich durchgeführt:"></Inputlabel>
+
+
+<div class="grid grid-cols-[max-content_max-content] gap-x-12 p-1 min-h-[38px] ring-1 ring-black/15 rounded-sm">
+    
+<div class="grid grid-cols-[25px_1fr] items-center justify-items-start">
+    <input
+    id="bow-yes"
+    type="radio"
+    value={true}
+    bind:group={ausweis.dicht}
+    name="dichtheit"
+/>
+    <label for="bow-yes" class="radio-inline">Ja</label>
+   
+
+    </div>
+
+<div class="grid grid-cols-[25px_1fr] items-center justify-items-start">
+    <input
+    id="bow-no"
+    type="radio"
+    value={false}
+    bind:group={ausweis.dicht}
+    name="dichtheit"
+    />
+<label for="bow-no" class="radio-inline">Nein</label>
+ 
+</div>
+
+</div>
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div> 
+
+</div>
+
+</div>
+
+
+
+<!--<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">
             <img src="/images/r.png" alt="rechteck" />
@@ -317,4 +650,6 @@ const arrayRange = (start: number, stop: number, step: number) =>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+-->
\ No newline at end of file
diff --git a/src/components/Ausweis/HeizungImage.svelte b/src/components/Ausweis/HeizungImage.svelte
index 3488c2fb..ea84f9cc 100644
--- a/src/components/Ausweis/HeizungImage.svelte
+++ b/src/components/Ausweis/HeizungImage.svelte
@@ -10,7 +10,7 @@
 
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="md:box md:card mb-0">
+	<div class="md:box md:card mb-0 bereich-box">
 
 		<div class="font-bold mb-2">
 			<span class="text-red-500">WICHTIG:</span>
diff --git a/src/components/Ausweis/KellerDachgeschossLueftungKuehlung.svelte b/src/components/Ausweis/KellerDachgeschossLueftungKuehlung.svelte
new file mode 100644
index 00000000..f0943d23
--- /dev/null
+++ b/src/components/Ausweis/KellerDachgeschossLueftungKuehlung.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+
+	import HelpLabel from "#components/labels/HelpLabel.svelte";
+	import Inputlabel from "#components/labels/InputLabel.svelte";
+
+    import { Enums } from "@ibcornelsen/database/client";
+
+    export let ausweis;
+
+</script>
+
+<div id="fensterflaechen" 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-4 xl:gap-x-8 xl:gap-y-8
+"
+>
+
+
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+    <Inputlabel title="Keller *"></Inputlabel>
+
+    <select
+							name="keller_beheizt"
+							bind:value={ausweis.keller_beheizt}
+							required
+						>
+							<option> Bitte auswählen</option>
+							<option value={false}> nicht vorhanden</option>
+							<option value={false}> unbeheizt</option>
+							<option value={true}> beheizt</option>
+						</select>
+
+    <div class="help-label">
+        <HelpLabel>Text fehlt.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+    <Inputlabel title="Dachgeschoss *"></Inputlabel>
+
+    <select
+    name="dachgeschoss"
+    bind:value={ausweis.dachgeschoss}
+    required
+>
+    <option> Bitte auswählen</option>
+    <option
+        value={Enums.Heizungsstatus.NICHT_VORHANDEN}
+    >
+        nicht vorhanden</option
+    >
+    <option value={Enums.Heizungsstatus.UNBEHEIZT}>
+        unbeheizt</option
+    >
+    <option value={Enums.Heizungsstatus.BEHEIZT}>
+        beheizt</option
+    >
+</select>
+
+    <div class="help-label">
+        <HelpLabel>Text fehlt.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+    <Inputlabel title="Lüftung erfolgt durch:"></Inputlabel>
+
+    <select
+							name="lueftungskonzept"
+							bind:value={ausweis.lueftungskonzept}
+							required
+						>
+							<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 class="help-label">
+        <HelpLabel>Bitte geben Sie hier ein ob über die Fenster natürlich
+            belüftet wird oder über eine Lüftungsanlage.</HelpLabel>
+    </div>
+</div>
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+    <Inputlabel title="Anlage zur Kühlung"></Inputlabel>
+
+    <select
+							name="wird_gekuehlt"
+							bind:value={ausweis.wird_gekuehlt}
+							required
+						>
+							<option> Bitte auswählen</option>
+							<option value={true}> vorhanden</option>
+							<option value={false}> nicht vorhanden</option>
+						</select>
+
+    <div class="help-label">
+        <HelpLabel>Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
+            gekühlt wird.</HelpLabel>
+    </div>
+</div>
+
+
+
+
+<!--Alternative Energieversorgungssyteme -->
+
+<div class="input-standard order-4 md:order-4 xl:order-4 sm:col-span-2 items-center">
+    <Inputlabel title="Alternative Energieversorgungssyteme"></Inputlabel>
+
+<div class="input-row items-center gap-2 lg:gap-20 xl:gap-24">
+
+<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
+    <input
+    id="alternative_heizung"
+    type="checkbox"
+    name="alternative_heizung"
+    data-test="alternative_heizung"
+    bind:checked={ausweis.alternative_heizung}
+    value="Heizung"
+    />
+    <label for="alternative_heizung" class="checkbox-inline cursor-pointer">Heizung</label>
+</div>
+
+<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
+
+    <input
+    id="alternative_warmwasser"
+    type="checkbox"
+    name="alternative_warmwasser"
+    data-test="alternative_warmwasser"
+    bind:checked={ausweis.alternative_warmwasser}
+    value="Warmwasser"
+    />
+    <label for="alternative_warmwasser" class="checkbox-inline cursor-pointer">Warmwasser</label>
+</div>
+
+<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
+<input
+    id="alternative_lueftung"
+    type="checkbox"
+    name="alternative_lueftung"
+    data-test="alternative_lueftung"
+    bind:checked={ausweis.alternative_lueftung}
+    value="Lüftung"
+/>
+<label for="alternative_lueftung" class="checkbox-inline cursor-pointer">Lüftung</label>
+</div>
+
+<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
+
+<input
+    id="alternative_kuehlung"
+    type="checkbox"
+    name="alternative_kuehlung"
+    data-test="alternative_kuehlung"
+    bind:checked={ausweis.alternative_kuehlung}
+    value="Kühlung"
+/>
+<label for="alternative_kuehlung" class="checkbox-inline cursor-pointer">Kühlung</label>
+</div>
+
+</div>
+
+<div class="help-label">
+    <HelpLabel>
+        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>
+
+</div>
+
+
+
+</div>
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Ausweis/SanierungszustandHeizungsanlage.svelte b/src/components/Ausweis/SanierungszustandHeizungsanlage.svelte
index 92d90bf6..e2731201 100644
--- a/src/components/Ausweis/SanierungszustandHeizungsanlage.svelte
+++ b/src/components/Ausweis/SanierungszustandHeizungsanlage.svelte
@@ -4,8 +4,6 @@
 
 	import HeizungImage from "./HeizungImage.svelte";
 
-	//import Label from "../Label.svelte";
-
 	import {
 		AufnahmeClient,
 		ObjektClient,
@@ -15,13 +13,20 @@
 	} from "./types.js";
 	import { boolean } from "astro:schema";
 	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";
+	import AngabenZurHeizunganlage from "#components/Ausweis/AngabenZurHeizunganlage.svelte";
 
 	export let objekt: ObjektClient;
 	export let aufnahme: AufnahmeClient;
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient;
 	export let images: UploadedGebaeudeBild[];
+
+	export let ausweisart: Enums.Ausweisart;
 </script>
 
+{#if ausweisart=="BedarfsausweisWohnen"}
+<AngabenZurHeizunganlage bind:ausweis/>
+{/if}
+
 <div
 	id="sanierungszustand"
 	class="bereich-box grid
diff --git a/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte b/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
index 5af4bb2d..5f663671 100644
--- a/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
+++ b/src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte
@@ -10,6 +10,8 @@
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
 	import GebaeudeVolumen from "#components/Ausweis/GebaeudeVolumen.svelte";
+	import Fensterflaechen  from "#components/Ausweis/Fensterflaechen.svelte";
+	import KellerDachgeschossLueftungKuehlung  from "#components/Ausweis/KellerDachgeschossLueftungKuehlung.svelte";
 
 	import SanierungszustandHeizungsanlage from "#components/Ausweis/SanierungszustandHeizungsanlage.svelte";
 	import SanierungszustandFensterTueren from "#components/Ausweis/SanierungszustandFensterTueren.svelte";
@@ -20,7 +22,7 @@
 	import HelpLabel from "#components/HelpLabel.svelte";
 	import ZipSearch from "#components/PlzSuche.svelte";
 
-	import { hotWaterProductionTypes } from "./HotWaterProductionTypes.js";
+	import { hotWaterProductionTypes } from "#modules/BedarfsausweisWohnen/HotWaterProductionTypes.js";
 	import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
 	import { BitChecker } from "src/lib/BitChecker.js";
@@ -208,769 +210,42 @@ lg:grid-cols-2 lg:gap-x-6
 		><GebaeudeDaten bind:aufnahme bind:objekt /></Bereich
 		>
 
-		<hr />
-		<Bereich
-			bereich="B"
-			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
-			><GebaeudeDaten bind:aufnahme bind:objekt /></Bereich
-		>
-		
-		<!-- C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen -->
+
+<!-- C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen -->
 
 		<Bereich
-			bereich="C"
-			title="Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen"
-			>
-				<GebaeudeVolumen
-				bind:ausweis
-				/>
-		</Bereich>
+		bereich="C"
+		title="Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen"
+		><GebaeudeVolumen bind:ausweis/></Bereich>
 
-		<hr />
 
-		<Label
-			>D - Eingabe der Fensterflächen und Konstruktion von Dach, Wänden
-			und Boden</Label
-		>
-		<div class="box grid grid-cols-4 gap-4">
-			<div>
-				<HelpLabel title="Fensterfläche 1 in m² *"
-					>Bitte geben Sie hier die Fläche der Fenster ein.</HelpLabel
-				>
-				<input
-					name="fenster_flaeche_1"
-					bind:value={ausweis.fenster_flaeche_1}
-					type="number"
-					required
-					placeholder="0"
-				/>
-			</div>
+<!-- D - Eingabe der Fensterflächen und Konstruktion von Dach, Wänden und Boden -->
 
-			<div>
-				<HelpLabel title="Art der Fenster *"
-					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
-				>
-				<select name="fenster_art_1" bind:value={ausweis.fenster_art_1}>
-					<option>bitte auswählen</option>
-					{#each Object.entries(fensterArten) as [name, value]}
-						<option {value}>{name}</option>
-					{/each}
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Fensterfläche 2 in m² *"
-					>Wenn vorhanden geben Sie hier die Fläche der Fenster ein
-					die älter sind oder einen anderen U-Wert besitzen.</HelpLabel
-				>
-				<input
-					name="fenster_flaeche_2"
-					type="number"
-					bind:value={ausweis.fenster_flaeche_2}
-				/>
-			</div>
-
-			<div>
-				<HelpLabel title="Art der Fenster *"
-					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
-				>
-				<select
-					name="fenster_art_2"
-					bind:value={ausweis.fenster_art_2}
-					required
-				>
-					<option>bitte auswählen</option>
-					{#each Object.entries(fensterArten) as [name, value]}
-						<option {value}>{name}</option>
-					{/each}
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Dachfenster in m² *"
-					>Bitte geben Sie hier die Fläche der Dachfenster ein.</HelpLabel
-				>
-				<input
-					name="dachfenster_flaeche"
-					type="number"
-					bind:value={ausweis.dachfenster_flaeche}
-				/>
-			</div>
-
-			<div>
-				<HelpLabel title="Art der Dachfenster *"
-					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
-				>
-				<select
-					name="dachfenster_art"
-					bind:value={ausweis.dachfenster_art}
-				>
-					<option>bitte auswählen</option>
-					{#each Object.entries(fensterArten) as [name, value]}
-						<option {value}>{name}</option>
-					{/each}
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Haustür in m² *"
-					>Bitte geben Sie hier die Fläche der Haustür ein.</HelpLabel
-				>
-				<input
-					name="haustuer_flaeche"
-					type="number"
-					bind:value={ausweis.haustuer_flaeche}
-				/>
-			</div>
-
-			<div>
-				<HelpLabel title="Art der Tür *"
-					>Bitte geben Sie hier die Art der Haustür ein.</HelpLabel
-				>
-				<select
-					name="haustuer_art"
-					bind:value={ausweis.haustuer_art}
-					required
-				>
-					<option>bitte auswählen</option>
-					<option value="1.8">Standard (U-Wert 1,8)</option>
-					<option value="5">Ganz alte Tür (U-Wert 5,0)</option>
-					<option value="2.7">U-Wert 2,7</option>
-					<option value="3">U-Wert 3,0</option>
-					<option value="4.3">U-Wert 4,3</option>
-					<option value="1.1">U-Wert 1,1</option>
-					<option value="0.9">U-Wert 0,9</option>
-					<option value="0.85">U-Wert 0,85</option>
-					<option value="0.7">Passivhaustür (U-Wert 0,7)</option>
-					<option value="0.6">Passivhaustür (U-Wert 0,6)</option>
-					<option value="2.3">U-Wert 2,3</option>
-					<option value="1.6">U-Wert 1,6</option>
-					<option value="1.7">U-Wert 1,7</option>
-					<option value="1.3">U-Wert 1,3</option>
-					<option value="1">U-Wert 1,0</option>
-				</select>
-			</div>
-		</div>
-
-		<hr />
-		<div class="box grid grid-cols-4 gap-4">
-			<div>
-				<HelpLabel title="Bauart Dachfläche *"
-					>Bitte geben Sie hier die Bauart der Dachfläche ein.</HelpLabel
-				>
-				<select
-					name="dach_bauart"
-					bind:value={ausweis.dach_bauart}
-					required
-				>
-					<option>bitte auswählen</option>
-					<option value="Massive Konstruktion"
-						>Massive Konstruktion (insbesondere Flachdächer)</option
-					>
-					<option value="Holzkonstruktion"
-						>Holzkonstruktion (insbesondere Steildächer)</option
-					>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="nachträgliche Dämmung"
-					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
-				>
-				<select
-					name="dach_daemmung"
-					bind:value={ausweis.dach_daemmung}
-					required
-				>
-					<option>bitte auswählen</option>
-					{#each daemmungsBreiten as breite}
-						<option value={breite}>{breite * 100} cm</option>
-					{/each}
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Bauart Geschossdecke *"
-					>Bitte geben Sie hier die Bauart der Geschossdecke ein.</HelpLabel
-				>
-				<select
-					name="decke_bauart"
-					bind:value={ausweis.decke_bauart}
-					required
-				>
-					<option>bitte auswählen</option>
-					<option value="Massive Konstruktion"
-						>Massive Konstruktion (insbesondere Flachdächer)</option
-					>
-					<option value="Holzkonstruktion"
-						>Holzkonstruktion (insbesondere Steildächer)</option
-					>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="nachträgliche Dämmung"
-					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
-				>
-				<select
-					name="decke_daemmung"
-					bind:value={ausweis.decke_daemmung}
-					required
-				>
-					<option>bitte auswählen</option>
-					{#each daemmungsBreiten as breite}
-						<option value={breite}>{breite * 100} cm</option>
-					{/each}
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Bauart Außenwand *"
-					>Bitte geben Sie hier die Bauart der Außenwand ein.</HelpLabel
-				>
-				<select
-					name="aussenwand_bauart"
-					bind:value={ausweis.aussenwand_bauart}
-					required
-				>
-					<option>bitte auswählen</option>
-					<option value="Massive Konstruktion"
-						>Massive Konstruktion (insbesondere Flachdächer)</option
-					>
-					<option value="Holzkonstruktion"
-						>Holzkonstruktion (insbesondere Steildächer)</option
-					>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="nachträgliche Dämmung"
-					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
-				>
-				<select
-					name="aussenwand_daemmung"
-					bind:value={ausweis.aussenwand_daemmung}
-					required
-				>
-					<option>bitte auswählen</option>
-					{#each daemmungsBreiten as breite}
-						<option value={breite}>{breite * 100} cm</option>
-					{/each}
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Bauart Fußboden *"
-					>Bitte geben Sie hier die Bauart des Fußbodens ein.</HelpLabel
-				>
-				<select
-					name="boden_bauart"
-					bind:value={ausweis.boden_bauart}
-					required
-				>
-					<option>bitte auswählen</option>
-					<option value="Massive Konstruktion"
-						>Massive Konstruktion (insbesondere Flachdächer)</option
-					>
-					<option value="Holzkonstruktion"
-						>Holzkonstruktion (insbesondere Steildächer)</option
-					>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="nachträgliche Dämmung"
-					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
-				>
-				<select
-					name="boden_daemmung"
-					bind:value={ausweis.boden_daemmung}
-					required
-				>
-					<option>bitte auswählen</option>
-					{#each daemmungsBreiten as breite}
-						<option value={breite}>{breite * 100} cm</option>
-					{/each}
-				</select>
-			</div>
-		</div>
-
-		<hr />
-		<Label>E - Angabe zu Keller, Dachgeschoss, Lüftung und Kühlung</Label>
-		<div class="box">
-			<div class="grid grid-cols-4 gap-4 w-full">
-				<div>
-					<label class="control-label" for="keller_beheizt"
-						>Keller *
-					</label>
-					<div>
-						<select
-							name="keller_beheizt"
-							bind:value={ausweis.keller_beheizt}
-							required
-						>
-							<option> Bitte auswählen</option>
-							<option value={false}> nicht vorhanden</option>
-							<option value={false}> unbeheizt</option>
-							<option value={true}> beheizt</option>
-						</select>
-					</div>
-				</div>
-
-				<div>
-					<label class="control-label" for="dachgeschoss"
-						>Dachgeschoss *
-					</label>
-					<div>
-						<select
-							name="dachgeschoss"
-							bind:value={ausweis.dachgeschoss}
-							required
-						>
-							<option> Bitte auswählen</option>
-							<option
-								value={Enums.Heizungsstatus.NICHT_VORHANDEN}
-							>
-								nicht vorhanden</option
-							>
-							<option value={Enums.Heizungsstatus.UNBEHEIZT}>
-								unbeheizt</option
-							>
-							<option value={Enums.Heizungsstatus.BEHEIZT}>
-								beheizt</option
-							>
-						</select>
-					</div>
-				</div>
-
-				<div>
-					<HelpLabel title="Lüftung erfolgt durch:"
-						>Bitte geben Sie hier ein ob über die Fenster natürlich
-						belüftet wird oder über eine Lüftungsanlage.</HelpLabel
-					>
-					<div>
-						<select
-							name="lueftungskonzept"
-							bind:value={ausweis.lueftungskonzept}
-							required
-						>
-							<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>
-
-				<div>
-					<HelpLabel title="Anlage zur Kühlung"
-						>Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
-						gekühlt wird.</HelpLabel
-					>
-					<div>
-						<select
-							name="wird_gekuehlt"
-							bind:value={ausweis.wird_gekuehlt}
-							required
-						>
-							<option> Bitte auswählen</option>
-							<option value={true}> vorhanden</option>
-							<option value={false}> nicht vorhanden</option>
-						</select>
-					</div>
-				</div>
-			</div>
-
-			<div>
-				<HelpLabel
-					title="Alternative Energieversorgungssyteme werden 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="grid grid-cols-4 gap-4 w-full">
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="energiequelle_2_nutzung_1"
-							bind:checked={ausweis.alternative_heizung}
-							value="Heizung"
-						/>Heizung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="energiequelle_2_nutzung_2"
-							bind:checked={ausweis.alternative_warmwasser}
-							value="Warmwasser"
-						/>Warmwasser</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="energiequelle_2_nutzung_3"
-							bind:checked={ausweis.alternative_lueftung}
-							value="Lüftung"
-						/>Lüftung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="energiequelle_2_nutzung_4"
-							bind:checked={ausweis.alternative_kuehlung}
-							value="Kühlung"
-						/>Kühlung</label
-					>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-		<Label>F - Eingabe der Heizungsanlage</Label>
-		<div class="box grid grid-cols-4 gap-4">
-			<div>
-				<HelpLabel title="Energieträger *"
-					>Bitte geben Sie hier den Energieträger der Heizung ein.</HelpLabel
-				>
-				<select
-					name="energietraeger_1"
-					bind:value={ausweis.energietraeger_1}
-					required
-				>
-					<option>Bitte auswählen</option>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Verteilung Warmwasser *"
-					>Bitte geben Sie hier die Warmwasserverteilung ein.</HelpLabel
-				>
-				<select
-					name="warmwasser_verteilung"
-					bind:value={ausweis.warmwasser_verteilung}
-				>
-					<option>Bitte auswählen</option>
-					<option value="zvmzbis1978"
-						>zentrale Verteilung mit Zirkulation (bis 1978)</option
-					>
-					<option value="zvmzngbis1978"
-						>zentrale Verteilung mit Zirkulation nachträglich
-						gedämmt (bis 1978)</option
-					>
-					<option value="zvmzvon1979bis1994"
-						>zentrale Verteilung mit Zirkulation (von 1979 - 1994)</option
-					>
-					<option value="zvmzab1995"
-						>zentrale Verteilung mit Zirkulation (ab 1994)</option
-					>
-					<option value="zvozbis1978"
-						>zentrale Verteilung ohne Zirkulation (bis 1978)</option
-					>
-					<option value="zvozngbis1978"
-						>zentrale Verteilung ohne Zirkulation nachträglich
-						gedämmt (bis 1978)</option
-					>
-					<option value="zvozvon1979bis1994"
-						>zentrale Verteilung ohne Zirkulation (von 1979 - 1994)</option
-					>
-					<option value="zvozab1995"
-						>zentrale Verteilung ohne Zirkulation (ab 1994)</option
-					>
-					<option value="dzsbis1994"
-						>dezentrales System (bis 1994)</option
-					>
-					<option value="dzsab1995"
-						>dezentrales System (ab 1995)</option
-					>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Speicherung Warmwasser"
-					>Bitte geben Sie hier wenn vorhanden die Art des
-					Warmwasserspeichers ein.</HelpLabel
-				>
-				<select
-					name="warmwasser_speicherung"
-					bind:value={ausweis.warmwasser_speicherung}
-				>
-					<option>Bitte auswählen</option>
-					<option value="zwwsath"
-						>zentrale Warmwasserspeicher außerhalb thermischer Hülle</option
-					>
-					<option value="zwwsith"
-						>zentrale Warmwasserspeicher innerhalb thermischer Hülle</option
-					>
-					<option value="gasbs">gasbefeuerter Speicher</option>
-					<option value="elks">Elektro-Kleinspeicher</option>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Erzeugung Warmwasser *"
-					>Bitte geben Sie hier die Wärmeerzeugung für Warmwasser ein.</HelpLabel
-				>
-				<select
-					name="warmwasser_erzeugung"
-					bind:value={ausweis.warmwasser_erzeugung}
-					required
-				>
-					<option>Bitte auswählen</option>
-					{#each hotWaterProductionTypes as type, i}
-						<option value={i}>{type}</option>
-					{/each}
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Übergabe Heizung *"
-					>Bitte geben Sie hier ein ob es sich um Zentralheizung
-					handelt oder über Beheizung durch dezentrale Einzelöfen.</HelpLabel
-				>
-				<select
-					name="heizung_zentral"
-					bind:value={ausweis.heizung_zentral}
-				>
-					<option>Bitte auswählen</option>
-					<option value={true}>Zentralheizung</option>
-					<option value={false}>Einzelfeuerstätte</option>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Verteilung Heizung *"
-					>Bitte geben Sie hier die Verteilung der Heizung ein.</HelpLabel
-				>
-				<select
-					name="heizung_verteilung"
-					bind:value={ausweis.heizung_verteilung}
-				>
-					<option>Bitte auswählen</option>
-					<option value="zv7055bis1978"
-						>zentrale Verteilung 70/55°C bis 1978</option
-					>
-					<option value="zv7055ngbis1978"
-						>zentrale Verteilung 70/55°C, nachträglich gedämmt bis
-						1978</option
-					>
-					<option value="zv7055von1979bis1994"
-						>zentrale Verteilung 70/55°C von 1979 bis 1994</option
-					>
-					<option value="zv7055ab1995"
-						>zentrale Verteilung 70/55°C ab 1995</option
-					>
-					<option value="zv5545bis1978"
-						>zentrale Verteilung 55/45°C bis 1978</option
-					>
-					<option value="zv5545ngbis1978"
-						>zentrale Verteilung 55/45°C, nachträglich gedämmt bis
-						1978</option
-					>
-					<option value="zv5545von1979bis1994"
-						>zentrale Verteilung 55/45°C von 1979 bis 1994</option
-					>
-					<option value="zv5545ab1995"
-						>zentrale Verteilung 55/45°C ab 1995</option
-					>
-					<option value="wwvertbis1978"
-						>Wohnungsweise Verteilung bis 1978</option
-					>
-					<option value="wwvertvon1979bis1994"
-						>Wohnungsweise Verteilung von 1979 bis 1994</option
-					>
-					<option value="wwvertab1995"
-						>Wohnungsweise Verteilung ab 1995</option
-					>
-					<option value="dezensys">dezentrales System</option>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Speicherung Heizung"
-					>Bitte geben Sie hier - wenn vorhanden - den Speicher der
-					Heizung ein.</HelpLabel
-				>
-				<select
-					name="heizung_speicherung"
-					bind:value={ausweis.heizung_speicherung}
-				>
-					<option>Bitte auswählen</option>
-					<option value="elzs7055bis1994"
-						>El.-Zentralspeicher 70/55°C bis 1994</option
-					>
-					<option value="elzs7055ab1995"
-						>El.-Zentralspeicher 70/55°C ab 1995</option
-					>
-					<option value="puffs5545bis1994"
-						>Pufferspeicher El.-Wärmepumpe 55/45°C bis 1994</option
-					>
-					<option value="puffs5545ab1995"
-						>Pufferspeicher El.-Wärmepumpe 55/45°C ab 1995</option
-					>
-					<option value="puffshk7055bis1994"
-						>Pufferspeicher für Holzkessel 70/55°C bis 1994</option
-					>
-					<option value="puffshk7055ab1995"
-						>Pufferspeicher für Holzkessel 70/55°C ab 1995</option
-					>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Wärmeerzeugung Heizung *"
-					>Bitte geben Sie hier den Wärmerzeuger der Heizung ein.</HelpLabel
-				>
-				<select
-					name="waerme_erzeugung_heizung"
-					bind:value={ausweis.waerme_erzeugung_heizung}
-					required
-				>
-					<option>Bitte auswählen</option>
-					<option value="ktkesselbis1986h"
-						>Konstanttemperatur-Kessel bis 1986</option
-					>
-					<option value="ktkesselvon1987bis1994h"
-						>Konstanttemperatur-Kessel von 1987 bis 1994</option
-					>
-					<option value="ktkesselab1995h"
-						>Konstanttemperatur-Kessel ab 1995</option
-					>
-					<option value="ntkesselbis1986h"
-						>Niedertemperatur-Kessel bis 1986</option
-					>
-					<option value="ntkesselvon1987bis1994h"
-						>Niedertemperatur-Kessel von 1987 bis 1994</option
-					>
-					<option value="ntkesselab1995h"
-						>Niedertemperatur-Kessel ab 1995</option
-					>
-					<option value="bwkesselbis1986h"
-						>Brennwert-Kessel bis 1986</option
-					>
-					<option value="bwkesselvon1987bis1994h"
-						>Brennwert-Kessel von 1987 bis 1994</option
-					>
-					<option value="bwkesselab1995h"
-						>Brennwert-Kessel ab 1995</option
-					>
-					<option value="bwkesselab1999h"
-						>Brennwertkessel verbessert ab 1999</option
-					>
-					<option value="ewplhvon1979bis1994h"
-						>Elektro-Wärmepumpe (Außenluft) von 1979 bis 1994</option
-					>
-					<option value="ewplhab1995h"
-						>Elektro-Wärmepumpe (Außenluft) ab 1995</option
-					>
-					<option value="ewpemvon1979bis1994h"
-						>Elektro-Wärmepumpe (Erdreich) von 1979 bis 1994</option
-					>
-					<option value="ewpemab1995h"
-						>Elektro-Wärmepumpe (Erdreich) ab 1995</option
-					>
-					<option value="ewpgmvon1979bis1994h"
-						>Elektro-Wärmepumpe (Grundwasser) von 1979 bis 1994</option
-					>
-					<option value="ewpgmab1995h"
-						>Elektro-Wärmepumpe (Grundwasser) ab 1995</option
-					>
-					<option value="fwugsh">Fernwärme-Übergabestation</option>
-					<option value="zesh">zentraler elektrischer Speicher</option
-					>
-					<option value="thermebis1994h"
-						>Therme (Umlaufwasserheizer) bis 1994</option
-					>
-					<option value="thermeab1995h"
-						>Therme (Umlaufwasserheizer) ab 1995</option
-					>
-					<option value="bthermeab1995h"
-						>Brennwert-Therme ab 1995</option
-					>
-					<option value="oeleinzel"
-						>ölbefeuerte Einzelöfen mit Verdampfungsbrenner</option
-					>
-					<option value="kheinzel">Kohle- oder Holzofen</option>
-					<option value="greinzel">Gasraumheizer</option>
-					<option value="elnseinzelbis1994"
-						>Elektro-Nachtspeicherheizung bis 1994</option
-					>
-					<option value="elnseinzelab1995"
-						>Elektro-Nachtspeicherheizung ab 1995</option
-					>
-					<option value="eldirekt">Elektro-Direktheizgerät</option>
-				</select>
-			</div>
-		</div>
-
-		<hr />
-		<div class="box grid grid-cols-4 gap-4">
-			<div>
-				<HelpLabel title="Energieträger Zusatzheizung"
-					>Bitte geben Sie hier - wenn vorhanden - die Zusatzheizung
-					ein (z.B. Kamin, Pelletheizung).</HelpLabel
-				>
-				<select
-					name="energietraeger_2"
-					bind:value={ausweis.energietraeger_2}
-					required
-				>
-					<option>Bitte auswählen</option>
-				</select>
-			</div>
-
-			<div>
-				<HelpLabel title="Anteil am Gesamtheizbedarf des Hauses"
-					>Bitte geben Sie hier den prozentualen Anteil der
-					Zusatzheizung ein.</HelpLabel
-				>
-				<select
-					name="anteil_zusatzheizung"
-					bind:value={ausweis.anteil_zusatzheizung}
-				>
-					<option value="0" selected
-						>Anteil am Gesamtheizbedarf des Hauses</option
-					>
-					{#each arrayRange(0.01, 0.7, 0.01) as step}
-						<option value={step}>{step * 100}%</option>
-					{/each}
-				</select>
-			</div>
-			<div>
-				Wenn Sie ein Solarsystem für Warmwasser einsetzen geben Sie
-				bitte die Kollektorfläche an:
-			</div>
-			<div class="form-group col-md-1">
-				<Label>Eingabe in m²</Label>
-				<input
-					name="kollektor_flaeche"
-					bind:value={ausweis.kollektor_flaeche}
-					type="number"
-				/>
-			</div>
-		</div>
+<Bereich
+bereich="D"
+title="Eingabe der Fensterflächen und Konstruktion von Dach, Wänden und Boden"
+><Fensterflaechen bind:ausweis/></Bereich>
 	
 
-				<!-- F Angaben zur Heizungsanlage -->
 
-			<Bereich bereich="F" title="Angaben zur Heizunganlage"
+<!-- E - Angabe zu Keller, Dachgeschoss, Lüftung und Kühlung -->
+
+<Bereich
+bereich="E"
+title="Angabe zu Keller, Dachgeschoss, Lüftung und Kühlung"
+><KellerDachgeschossLueftungKuehlung bind:ausweis/></Bereich>
+
+
+
+
+<!-- F Angaben zur Heizungsanlage -->
+<Bereich bereich="F" title="Angaben zur Heizunganlage"
 			><SanierungszustandHeizungsanlage
 				bind:images
 				bind:objekt
 				bind:aufnahme
 				bind:ausweis
+				{ausweisart}
 			/></Bereich
 			>
 	
@@ -1007,7 +282,7 @@ lg:grid-cols-2 lg:gap-x-6
 				/></Bereich
 			>
 
-		</div>
+
 		
 			<ButtonWeiterHilfe {spaeterWeitermachen}
 			bind:ausweis
diff --git a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
index 49fec9b2..513e1afe 100644
--- a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -222,6 +222,7 @@
 				bind:objekt
 				bind:aufnahme
 				bind:ausweis
+				{ausweisart}
 			/></Bereich
 		>
 
diff --git a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
index 5f6d2d91..5b1fb218 100644
--- a/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
@@ -258,6 +258,7 @@ const ausweisart = Enums.Ausweisart.VerbrauchsausweisWohnen
 				bind:objekt={objekt}
 				bind:aufnahme={aufnahme}
 				bind:ausweis
+				{ausweisart}
 			/></Bereich
 		>
 
diff --git a/src/pages/widgets/[vermittler].astro b/src/pages/widgets/[vermittler].astro
index e53f6545..c2cd88d8 100644
--- a/src/pages/widgets/[vermittler].astro
+++ b/src/pages/widgets/[vermittler].astro
@@ -12,7 +12,7 @@ const { vermittler } = Astro.params;
     </head>
     <body>
 
-        <WelcherAusweisWidget client:only/>
+        <WelcherAusweisWidget client:load/>
 
     </body>