Merge pull request #228 from IBCornelsen/main

Update Jens

src/components/Ausweis/Ausweisart.svelte

@@ -28,8 +28,7 @@
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 </script>
 
-<div
+<div id="ausweisart" class="bereich-box grid
-	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
@@ -47,6 +46,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			placeholder="Anlass"
 			required
 		>
+			<option disabled selected value={false}>Bitte auswählen</option>
 			{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
 				<option value={ausstellgrund}>{name}</option>
 			{/each}
@@ -68,7 +68,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			required
 			bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
 		>
-			<option disabled>Bitte auswählen</option>
+			<option disabled selected value={false}>Bitte auswählen</option>
 			<option value="Einfamilienhaus">Einfamilienhaus</option>
 			<option value="Freistehendes Einfamilienhaus"
 				>Freistehendes Einfamilienhaus</option

src/components/Ausweis/BilderZusatzsysteme.svelte

@@ -1,24 +1,90 @@
 <script lang="ts">
-	import HelpLabel from "../HelpLabel.svelte";
+    import HelpLabel from "#labels/HelpLabel.svelte";
+    import Inputlabel from "#labels/InputLabel.svelte";
+
 	import HeizungImage from "./HeizungImage.svelte";
 	import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
 	import DaemmungImage from "./DaemmungImage.svelte";
 	import FensterImage from "./FensterImage.svelte";
-	import Label from "../Label.svelte";
+
+	//import Label from "../Label.svelte";
+
 	import {
 	GebaeudeAufnahmeClient,
 		GebaeudeClient,
 		UploadedGebaeudeBild,
 		VerbrauchsausweisWohnenClient,
 	} from "./types";
+    import { boolean } from "astro:schema";
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 	export let ausweis: VerbrauchsausweisWohnenClient
 	export let images: UploadedGebaeudeBild[];
+
+ var sanierungsoptionen =[
+    
+    {"id":1,"name":"zentralheizung","value":"ZH","bindchecked":"gebaeude_aufnahme_allgemein.zentralheizung","label":"Zentral/Etage"},
+    {"id":2,"name":"einzelofen","value":"EO","bindchecked":"{gebaeude_aufnahme_allgemein.einzelofen}","label":"Einzelofen"},
+    {"id":3,"name":"durchlauf_erhitzer","value":"DH","bindchecked":"{gebaeude_aufnahme_allgemein.durchlauf_erhitzer}","label":"Durchlauferhitzer"},
+    {"id":4,"name":"standard_kessel","value":"SK","bindchecked":"{gebaeude_aufnahme_allgemein.standard_kessel}","label":"Standardkessel"},
+    {"id":5,"name":"solarsystem_warmwasser","value":"SSWW","bindchecked":"{gebaeude_aufnahme_allgemein.solarsystem_warmwasser}","label":"Solarsystem für Warmwasser"},
+    {"id":6,"name":"waermepumpe","value":"WP","bindchecked":"{gebaeude_aufnahme_allgemein.waermepumpe}","label":"Wärmepumpe"},
+    
+    {"id":7,"name":"niedertemperatur_kessel","value":"NK","bindchecked":"{gebaeude_aufnahme_allgemein.niedertemperatur_kessel}","label":"Niedertemperaturkessel"},
+    {"id":8,"name":"brennwert_kessel","value":"BWK","bindchecked":"{gebaeude_aufnahme_allgemein.brennwert_kessel}","label":"Brennwertkessel"},
+    {"id":9,"name":"warmwasser_rohre_gedaemmt","value":"BWK","bindchecked":"{gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}","label":"Warmwasserrohre gedämmt"},
+    {"id":10,"name":"heizungsrohre_gedaemmt","value":"HRGD","bindchecked":"{gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}","label":"Heizungsrohre gedämmt"},
+    {"id":11,"name":"zirkulation","value":"ZK","bindchecked":"{gebaeude_aufnahme_allgemein.zirkulation}","label":"Zirkulation"},
+    {"id":12,"name":"raum_temperatur_regler","value":"RTR","bindchecked":"{gebaeude_aufnahme_allgemein.raum_temperatur_regler}","label":"Raumtemperaturregler"}
+    ];
+
+
 </script>
 
-<div class="GRB3">
+<div id="sanierungszustand" class="bereich-box grid 
+grid-cols-1 gap-x-4 gap-y-2
+
+sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
+md:grid-cols-2 md:gap-x-6 md:gap-y-8
+
+xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
+2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
+">
+
+
+{#each sanierungsoptionen as item}
+
+	<div class="grid grid-cols-[40px_1fr] items-center justify-items-start h-[38px] ring-1 ring-black/15 bg-white order-{item.id} active:bg-green-100" >
+
+		<input
+				id="{item.name}"
+				type="checkbox"
+				class="checkbox w-full"
+				name="{item.name}"
+				bind:checked={item.bindchecked}
+				value="{item.value}"
+			/>
+		<label class="w-full" for="{item.name}">{item.label}</label>
+
+	</div>
+
+
+
+{/each}
+
+</div>
+
+<HeizungImage bind:images bind:ausweis bind:gebaeude />
+
+<style lang="postcss">
+label{@apply cursor-pointer}
+.check-input{@apply grid grid-cols-[max-content_max-content] gap-2 items-center}
+	
+</style>
+
+<!--
+
 	<HelpLabel title="Heizungsanlage (bitte zutreffendes ankreuzen) *">
 		Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
 		einschätzen zu können. Bitte setzen Sie den Haken wenn zutreffend. Das
@@ -28,142 +94,6 @@
 	</HelpLabel>
 	<hr />
 
-	<div class="grid grid-cols-4">
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="zentralheizung"
-					bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}
-					value="ZH"
-				/>Zentral/Etage</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="einzelofen"
-					bind:checked={gebaeude_aufnahme_allgemein.einzelofen}
-					value="EO"
-				/>Einzelöfen</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="durchlauf_erhitzer"
-					bind:checked={gebaeude_aufnahme_allgemein.durchlauf_erhitzer}
-					value="DH"
-				/>Durchlauferhitzer</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="standard_kessel"
-					bind:checked={gebaeude_aufnahme_allgemein.standard_kessel}
-					value="SK"
-				/>Standardkessel</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="solarsystem_warmwasser"
-					bind:checked={gebaeude_aufnahme_allgemein.solarsystem_warmwasser}
-					value="SSWW"
-				/>Solarsystem für Warmwasser</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="waermepumpe"
-					bind:checked={gebaeude_aufnahme_allgemein.waermepumpe}
-					value="WP"
-				/>Wärmepumpe</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="niedertemperatur_kessel"
-					bind:checked={gebaeude_aufnahme_allgemein.niedertemperatur_kessel}
-					value="NK"
-				/>Niedertemperaturkessel</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="brennwert_kessel"
-					bind:checked={gebaeude_aufnahme_allgemein.brennwert_kessel}
-					value="BWK"
-				/>Brennwertkessel</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="warmwasser_rohre_gedaemmt"
-					bind:checked={gebaeude_aufnahme_allgemein.warmwasser_rohre_gedaemmt}
-					value="WRGD"
-				/>Warmwasserrohre gedämmt</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="heizungsrohre_gedaemmt"
-					bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}
-					value="HRGD"
-				/>Heizungsrohre gedämmt</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="zirkulation"
-					bind:checked={gebaeude_aufnahme_allgemein.zirkulation}
-					value="ZK"
-				/>Zirkulation</label
-			>
-		</div>
-		<div class="form-group col-md-3 mw1">
-			<label class="checkbox-inline"
-				><input
-					type="checkbox"
-					class="checkbox"
-					name="raum_temperatur_regler"
-					bind:checked={gebaeude_aufnahme_allgemein.raum_temperatur_regler}
-					value="RTR"
-				/>Raumtemperaturregler</label
-			>
-		</div>
-	</div>
-</div>
-
 <hr />
 
 <HeizungImage bind:images bind:ausweis bind:gebaeude />
@@ -382,3 +312,6 @@
 >
 
 <AusweisPreviewContainer bind:images bind:ausweis bind:gebaeude />
+
+-->
+

src/components/Ausweis/GebaeudeDaten.svelte

@@ -10,7 +10,7 @@
 
 </script>
 
-<div id="B" class="bereich-box grid 
+<div id="gebaeudedaten" 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
@@ -41,9 +41,9 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 <!-- PLZ / ORT -->
 
-<div class="grid grid-cols-[2fr_3fr] order-2 md:order-2 xl:order-2">
+<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
 
-<div class="input-standard">
+<div class="input-noHelp">
 	<Inputlabel title="PLZ *"></Inputlabel>
 	
 	<ZipSearch
@@ -112,7 +112,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		required
 		bind:value={gebaeude_aufnahme_allgemein.keller}
 	>
-			<option disabled>Bitte auswählen</option>
+			<option disabled selected value={false}>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>
@@ -136,7 +136,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 		bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
 		required
 	>
-			<option disabled>Bitte auswählen</option>
+			<option disabled selected value={false}>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>

src/components/Ausweis/HeizungImage.svelte

@@ -8,9 +8,9 @@
 	export let gebaeude: GebaeudeClient;
 </script>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-2 gap-x-6 mt-6">
-	<div class="rounded-lg border-4 p-4 bg-white">
+	<div class="box card">
-		<input type="file" class="image_upload" multiple />
+
 
 		<p class="font-bold mb-2">
 			<span class="text-red-500">WICHTIG:</span>
@@ -27,25 +27,13 @@
 			Energieausweis.
 		</p>
 		<br />
-		<ol>
+		<ol class="">
 			<li>1.Bild : Heizungsraum mit Heizkessel bzw. Heizungsanlage*</li>
-			<li>
+			<li>2.Bild : <em>(wenn möglich, Warmwasserleitungen bzw. die Heizungsrohre)</em></li>
-				2.Bild : <em
+			<li>3.Bild : <em>(wenn möglich, Detailbild des Wärmeerzeugers bzw. Heizkessel)</em></li>
-					>(wenn möglich, Warmwasserleitungen bzw. die Heizungsrohre)</em
+			<li>4.Bild : <em>(wenn möglich, Bild des Typenschildes der Heizung)</em></li>
-				>
-			</li>
-			<li>
-				3.Bild : <em
-					>(wenn möglich, Detailbild des Wärmeerzeugers bzw.
-					Heizkessel)</em
-				>
-			</li>
-			<li>
-				4.Bild : <em
-					>(wenn möglich, Bild des Typenschildes der Heizung)</em
-				>
-			</li>
 		</ol>
+		<br>
 		<p>* erforderliches Bild</p>
 		<br />
 		<p>
@@ -56,7 +44,7 @@
 		</p>
 	</div>
 
-	<div class="rounded-lg border-4 p-4 bg-white">
+	<div class="box card">
 		<p>
 			Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf
 			Ihrem Energieausweis!<br />

src/components/Ausweis/LueftungundLeerstand.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+
+	import HelpLabel from "#labels/HelpLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
+
+    export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
+
+</script>
+
+<div id="lueftungundleerstand" 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
+">
+
+
+
+<!-- Gebäudeteil -->
+
+<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
+
+    <div class="input-standard">
+        <Inputlabel title="Gebäudeteil *"></Inputlabel>
+    
+        <select
+        name="gebaeudeteil"
+        data-test="gebaeudeteil"
+        bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
+        required
+        >
+        <option disabled selected value={false}>Bitte auswählen</option>
+        <option value="Gesamtgebäude">Gesamtgebäude</option>
+        <option value="Wohnen">Wohnen</option>
+        </select>
+    
+            <div class="help-label">
+                    <HelpLabel>
+                        Bitte geben Sie hier den Gebäudeteil ein. In den meisten
+                        Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
+                        allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
+                        handeln, so sollten 2 Ausweise erstellt werden. In diesem
+                        Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
+                        'Gewerbe'.
+                    </HelpLabel>
+                </div>
+    </div>
+
+<div class="input-standard">
+	<Inputlabel title="Leerstand in %"></Inputlabel>
+	
+    <input
+    name="leerstand"
+    data-test="leerstand"
+    maxlength="2"
+    type="number"
+    bind:value={gebaeude_aufnahme_allgemein.leerstand}
+/>
+
+		<div class="help-label">
+				<HelpLabel>
+					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
+					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
+					wären dann ca. 11%.
+				</HelpLabel>
+		</div>
+</div>
+
+</div>
+
+<!-- Lüftung -->
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+	<Inputlabel title="Lüftung durch *"></Inputlabel>
+
+    <select
+    name="lueftung"
+    data-test="lueftung"
+    required
+    bind:value={gebaeude_aufnahme_allgemein.lueftung}
+    >
+    <option disabled selected value={false}>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 den Gebäudeteil ein. In den meisten
+					Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
+					allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
+					Bitte geben Sie hier ein ob über die Fenster natürlich
+					belüftet wird oder über eine Lüftungsanlage.
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Kühlung -->
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+	<Inputlabel title="Anlage Kühlung *"></Inputlabel>
+
+    <select
+    name="kuehlung"
+    data-test="kuehlung"
+    required
+    bind:value={gebaeude_aufnahme_allgemein.kuehlung}
+    >
+    <option disabled selected value={false}>Bitte auswählen</option>
+    <option value="1">vorhanden</option>
+    <option value="0">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>
+
+
+
+
+
+
+
+
+
+
+</div>

src/components/Ausweis/Verbrauch.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
-	import HelpLabel from "../HelpLabel.svelte";
+    import HelpLabel from "#labels/HelpLabel.svelte";
-	import moment from "moment";
+    import Inputlabel from "#labels/InputLabel.svelte";
+	import Verbrauchslabel from "#labels/VerbrauchsLabel.svelte";
+	import VerbrauchsHelpLabel from "#labels/VerbrauchsHelpLabel.svelte";
+	
 	import Label from "../Label.svelte";
+
+	import moment from "moment";
 	import fuelList from "./brennstoffListe.js";
 	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
 	import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types.js";
@@ -9,6 +14,7 @@
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 	export let ausweis: VerbrauchsausweisWohnenClient;
+
 	// Wir dürfen bis zu 4.5 Jahre alte Klimafaktoren benutzen, also nehmen wir alle Monate seitdem und generieren daraus die Auswahl.
 	// Allerdings müssen wir auch berücksichtigen, dass wir drei folgende Jahre brauchen, also
 	// kann der Nutzer nur 36 + 18 Monate zurückgehen.
@@ -62,345 +68,446 @@
 	}
 
 	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
+
+
 </script>
 
 
+
+
+<div id="verbrauch" 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
+">
+
+<!-- primäre Heizquellen -->
+
+<div class="input-standard order-1 md:order-1 xl:order-1">
+	<Inputlabel title="Heizquellen"></Inputlabel>
+
+<div class="input-checkboxen">
+
+	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
+		<input
+			id="primaere_heizquelle"
+			type="checkbox"
+			class="checkbox"
+			name="primaere_heizquelle"
+			checked="checked"
+			onclick="return false"
+		/>
+		<label for="primaere_heizquelle" >primäre Heizquelle</label>
+	</div>
+
 	
-<div>
+	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
-		<div class="grid grid-cols-[40px_1fr] mb-4 xl:mb-0">
+		{#if !ausweis.zusaetzliche_heizquelle}
-
+		<input
-			<input
+			id="zusaetzliche_heizquelle_1"
-				type="checkbox"
+			type="checkbox"
-				class="checkbox w-[20px] h-[20px] self-center -mt-1"
+			class="checkbox"
-				name="zusaetzliche_heizquelle"
+			name="zusaetzliche_heizquelle_1"
-				bind:checked={ausweis.zusaetzliche_heizquelle}
+			bind:checked={ausweis.zusaetzliche_heizquelle}
-			/>
+		/>
-
+	    <label for="zusaetzliche_heizquelle_1" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
-			<div class="w-[150px]">
+		{/if}
-			<HelpLabel title="zusätzliche Heizquelle">
+	</div>
-				Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
-				zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
-				Verbrauchszeiträume wie bei der primären Heizung verwendet
-				werden.
-			</HelpLabel>
-			</div>
-		
-		</div>
-		<input class="hidden xl:invisible xl:block"/>
-		<div class="grid grid-cols-[40px_120px] gap-x-1 items-center">
-			<div></div>
-			<span>Zeitraum:</span>
-		</div>
-
-			<div class="grid grid-cols-[30px_1fr_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
-				
-				<span class="">von</span>
-
-				<select
-					name="energieverbrauch_zeitraum_monat"
-					class="rounded-tr-none rounded-br-none w-full m-0"
-					bind:value={month}
-					required
-				>
-					<option>Monat</option>
-					{#if year !== null}
-						{#each availableDates.filter(date => date.year == year) as date}
-							<option value={date.month}>{monthNames[date.month]}</option>
-						{/each}
-					{:else}
-						{#each Array.from(availableDates.reduce((a,c) => {
-							a.add(c.month);
-							return a;
-						}, new Set())) as month}
-							<option value={month}>{monthNames[month]}</option>
-						{/each}
-					{/if}
-				</select>
-
-				<select
-					name="energieverbrauch_zeitraum_jahr"
-					class="rounded-tl-none rounded-bl-none w-full m-0"
-					bind:value={year}
-					required
-				>
-					<option>Jahr</option>
-					{#each Array.from(availableDates.reduce((a,c) => {
-						a.add(c.year);
-						return a;
-					}, new Set())) as year}
-						<option value={year}>{year}</option>
-					{/each}
-				</select>
-
-				
-				<span class="">bis</span>
-						
-				<input
-						
-						value={moment(ausweis.startdatum)
-							.add("1", "year")
-							.format("MM.Y")}
-						readonly
-				/>
-				
-			</div>
-
-
-			<div class="invisible">
-				<span>leer</span>
-			</div>
-
-			<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
-
-				<div></div>
-		
-				<span class="justify-self-center">von</span>
-
-					<input
-						class="klima text-right"
-						value={moment(ausweis.startdatum)
-							.add("1", "year")
-							.format("MM.Y")}
-						readonly
-					/>
-				
-					<span class="justify-self-center">bis</span>
-
-						<input
-							value={moment(ausweis.startdatum)
-								.add("2", "years")
-								.format("MM.Y")}
-							readonly
-						/>
-				
-			</div>
-
-			<div class="invisible">
-				<span>leer</span>
-			</div>
-		
-			<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
-
-				<div></div>
-
-				<span class="justify-self-center">von</span>
-
-				<input
-					class="klima text-right"
-					value={moment(ausweis.startdatum)
-						.add("2", "years")
-						.format("MM.Y")}
-					readonly
-				/>
-
-				<span class="justify-self-center">bis</span>
-
-				<input
-					value={moment(ausweis.startdatum)
-						.add("3", "years")
-						.format("MM.Y")}
-					readonly
-				/>
-		
-
-			</div>
 
 </div>
 
+<div class="help-label">
+	<HelpLabel>
+		TEXT FEHLT
+	</HelpLabel>
+</div>
 
-<div class="grid grid-cols-2 gap-x-6">
+</div>
 
-<div>
+<!-- Zeitraum 1 -->
 
-	<div class="grid grid-cols-[3fr_2fr] gap-x-2"> 
+<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
 
-	<div>
+	<div class="input-standard">
-			<HelpLabel title="* Brennstoff">
+		<Inputlabel title="Start-Monat *"></Inputlabel>
-				<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
+	
-				entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
+		<select
-				<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
+		name="energieverbrauch_zeitraum_monat"
-				unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
+		class="rounded-tr-none rounded-br-none w-full m-0"
-				zu Erdgas L einen leicht höheren Methangehalt, und daher einen
+		bind:value={month}
-				etwas besseren Brennwert.<br /><br />
+		required
-				<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
+		>
-				bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
+		<option disabled>Monat</option>
-				bleiben.<br /><br />
+		{#if year !== null}
-				<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
+			{#each availableDates.filter(date => date.year == year) as date}
-				Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
+				<option value={date.month}>{monthNames[date.month]}</option>
-				/><br />
+			{/each}
-				<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
+		{:else}
-				oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
+			{#each Array.from(availableDates.reduce((a,c) => {
-				werden.<br /><br />
+				a.add(c.month);
-				<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
+				return a;
-				zerkleinertes Holz.<br /><br />
+			}, new Set())) as month}
-				<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
+				<option value={month}>{monthNames[month]}</option>
-				über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
+			{/each}
-				Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
+		{/if}
-				Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
+	</select>
-				dezentral realisiert.<br /><br />
+	
-				<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
+	<div class="help-label">
-				<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
+		<HelpLabel>
-			</HelpLabel>
+			TEXT FEHLT
-			<div>
+		</HelpLabel>
-				<select 
+	</div>
-					class="rounded-e-none"
+	
-					name="brennstoff_1" 
+	</div>
-					required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
+	
-					>
+	<div class="input-standard">
-
+		<Inputlabel title="Start-Jahr *"></Inputlabel>
-					<option disabled>Bitte auswählen</option>
+	
-					{#each Object.keys(fuelMap) as fuel}
+	<select
-						<option value={fuel}>{fuel}</option>
+	name="energieverbrauch_zeitraum_jahr"
-					{/each}
+	class="rounded-tl-none rounded-bl-none w-full m-0"
-				</select>
+	bind:value={year}
+	required
+	>
+	<option disabled>Jahr</option>
+	{#each Array.from(availableDates.reduce((a,c) => {
+		a.add(c.year);
+		return a;
+	}, new Set())) as year}
+		<option value={year}>{year}</option>
+	{/each}
+	</select>
+	
+			<div class="help-label">
+				<HelpLabel>
+					TEXT FEHLT
+				</HelpLabel>
 			</div>
 	
 	</div>
+	
+	</div>
 
-	<div>
+<!-- primäre Brennstoff und Einheiten * -->
-			<HelpLabel title="* Einheit">
+
-				Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
+<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
-				Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
+
-				vor. Pellets oder Brennholz in SRm (Schüttraummetern).
+	<div class="input-standard">
-			</HelpLabel>
+	    <Inputlabel title="primär Brennstoff *"></Inputlabel>
+	
+	    <select 
+			class="rounded-e-none"
+			name="brennstoff_1" 
+			bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
+			required
+			>
+			<option disabled selected value={false}>Bitte auswählen</option>
+			{#each Object.keys(fuelMap) as fuel}
+				<option value={fuel}>{fuel}</option>
+			{/each}
+		</select>
+
+	            <div class="help-label">
+	                <HelpLabel>
+						<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
+						entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
+						<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
+						unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
+						zu Erdgas L einen leicht höheren Methangehalt, und daher einen
+						etwas besseren Brennwert.<br /><br />
+						<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
+						bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
+						bleiben.<br /><br />
+						<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
+						Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
+						/><br />
+						<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
+						oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
+						werden.<br /><br />
+						<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
+						zerkleinertes Holz.<br /><br />
+						<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
+						über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
+						Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
+						Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
+						dezentral realisiert.<br /><br />
+						<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
+						<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
+					</HelpLabel>
+	            </div>
+	</div>
+
+	<div class="input-standard">
+	    <Inputlabel title="Einheit *"></Inputlabel>
+	
+		<select
+		class="rounded-s-none"
+		name="einheit_1"
+		bind:value={ausweis.einheit_1}
+		disabled={!gebaeude_aufnahme_allgemein.brennstoff_1}
+		required
 		
+		>
+		
+		<option disabled selected value={false}>Bitte auswählen</option>
+		{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
+			<option value={unit}>{unit}</option>
+		{/each}
+	</select>
+
+	            <div class="help-label">
+	                <HelpLabel>
+						Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
+						Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
+						vor. Pellets oder Brennholz in SRm (Schüttraummetern).
+					</HelpLabel>
+	            </div>
+	</div>
+
+</div>
+
+<!-- Verbrauch 1 -->
+
+<div class="input-standard order-4 md:order-4 xl:order-4">
+	<Verbrauchslabel bind:ausweis addYear=1></Verbrauchslabel>
+
+	<input
+	name="verbrauch_1"
+	type="number"
+	class:linked={abweichung.indexOf(1) > -1}
+	bind:value={ausweis.verbrauch_1}
+	required
+/>
+
+<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
+
+
+		<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=1 heizquelle=1></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Verbrauch 2 -->
+
+<div class="input-standard order-5 md:order-5 xl:order-5">
+	<Verbrauchslabel bind:ausweis addYear=2></Verbrauchslabel>
+
+	<input
+	name="verbrauch_2"
+	type="number"
+	class:linked={abweichung.indexOf(2) > -1}
+	bind:value={ausweis.verbrauch_2}
+	required
+/>
+<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
+
+		<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=2 heizquelle=1></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Verbrauch 3 -->
+
+<div class="input-standard order-6 md:order-6 xl:order-6">
+	<Verbrauchslabel bind:ausweis addYear=3></Verbrauchslabel>
+
+	<input
+	name="verbrauch_3"
+	type="number"
+	class:linked={abweichung.indexOf(3) > -1}
+	bind:value={ausweis.verbrauch_3}
+	required
+/>
+<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
+
+		<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=3 heizquelle=1></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+</div>
+
+{#if ausweis.zusaetzliche_heizquelle}
+
+<div class="col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"></div>
+
+<!-- zusätzliche Heizquelle -->
+
+<div class="input-standard order-7 md:order-7 xl:order-7">
+	<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
+
+<div class="input-checkboxen">
+
+	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
+		<input
+			id="zusaetzliche_heizquelle"
+			type="checkbox"
+			class="checkbox"
+			name="zusaetzliche_heizquelle"
+
+			bind:checked={ausweis.zusaetzliche_heizquelle}
+		/>
+	    <label for="zusaetzliche_heizquelle" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
+	</div>
+
+</div>
+
+<div class="help-label">
+	<HelpLabel>
+		TEXT FEHLT
+	</HelpLabel>
+</div>
+
+</div>
+
+<div class="input-standard order-8 md:order-8 xl:order-8">
+</div>
+
+<!-- zusätzlicher Brennstoff und Einheiten *  -->
+
+<div class="grid grid-cols-2 gap-x-4 order-9 md:order-9 xl:order-9">
+
+	<div class="input-standard">
+	    <Inputlabel title="zusätzlicher Brennstoff *"></Inputlabel>
+	
 			<select
-					class="rounded-s-none"
+				class="rounded-e-none"
-					name="einheit_1"
+				name="brennstoff_2"
-					required
+				bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
-					bind:value={ausweis.einheit_1}	
+				required
 				>
-					<option disabled>Bitte auswählen</option>
+
-					{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
+				<option disabled selected value={false}>Bitte auswählen</option>
-						<option value={unit}>{unit}</option>
+				{#each Object.keys(fuelMap) as fuel}
-					{/each}
+					<option value={fuel}>{fuel}</option>
+				{/each}
 			</select>
-		
+
+	        <div class="help-label">
+	            <HelpLabel>
+					<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
+					entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
+					<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
+					unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
+					zu Erdgas L einen leicht höheren Methangehalt, und daher einen
+					etwas besseren Brennwert.<br /><br />
+					<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
+					bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
+					bleiben.<br /><br />
+					<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
+					Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
+					/><br />
+					<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
+					oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
+					werden.<br /><br />
+					<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
+					zerkleinertes Holz.<br /><br />
+					<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
+					über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
+					Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
+					Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
+					dezentral realisiert.<br /><br />
+					<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
+					<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
+				</HelpLabel>
+	            </div>
 	</div>
 
-	</div>
+	<div class="input-standard">
+	    <Inputlabel title="Einheit *"></Inputlabel>
 	
+			<select
+			class="rounded-s-none"
+			name="einheit_2"
+			bind:value={ausweis.einheit_2}
+			disabled={!gebaeude_aufnahme_allgemein.brennstoff_2}
+			required
+			>
+			<option disabled selected value={false}>Bitte auswählen</option>
+			{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
+				<option value={unit}>{unit}</option>
+			{/each}
+			</select>
 
-	<div>
+	        <div class="help-label">
-
+	            <HelpLabel>
-		
+					Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
-			<span>* Verbrauch</span>
+					Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
-			<input
+					vor. Pellets oder Brennholz in SRm (Schüttraummetern).
-				name="verbrauch_1"
+				</HelpLabel>
-				type="number"
+	        </div>
-				class:linked={abweichung.indexOf(1) > -1}
-				bind:value={ausweis.verbrauch_1}
-				required
-			/>
-		
-			<span>* Verbrauch</span>
-			<input
-				name="verbrauch_2"
-				type="number"
-				class:linked={abweichung.indexOf(2) > -1}
-				bind:value={ausweis.verbrauch_2}
-				required
-			/>
-		
-		
-			<span>* Verbrauch</span>
-			<input
-				name="verbrauch_3"
-				type="number"
-				class:linked={abweichung.indexOf(3) > -1}
-				bind:value={ausweis.verbrauch_3}
-				required
-			/>
-		
-
-	</div>
-		
-</div>			
-
-
-<div>
-
-	<div class="grid grid-cols-[3fr_2fr] gap-x-2"> 
-
-	<div>
-		
-		<Label>* Brennstoff</Label>
-				
-				<select
-					class="rounded-e-none"
-					name="brennstoff_2"
-					bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
-					disabled={!ausweis.zusaetzliche_heizquelle}
-					required
-				>
-					<option disabled> Bitte auswählen</option>
-					{#each Object.keys(fuelMap) as fuel}
-						<option value={fuel}>{fuel}</option>
-					{/each}
-				</select>
-	</div>
-			
-	<div>
-
-		<Label>* Einheit</Label>
-
-				<select
-					class="rounded-s-none"
-					name="einheit_2"
-					disabled={!ausweis.zusaetzliche_heizquelle}
-					bind:value={ausweis.einheit_2}
-					required
-				>
-					<option disabled>Bitte auswählen</option>
-					{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
-						<option value={unit}>{unit}</option>
-					{/each}
-				</select>		
-	</div>
-
-	</div>
-
-
-	<div>
-
-				<span>Verbrauch</span>
-				<input
-					name="verbrauch_4"
-					type="number"
-					bind:value={ausweis.verbrauch_4}
-					class:linked={abweichung.indexOf(4) > -1}
-					disabled={!ausweis.zusaetzliche_heizquelle}
-				/>
-			
-				<span>Verbrauch</span>
-				<input
-					name="verbrauch_5"
-					type="number"
-					bind:value={ausweis.verbrauch_5}
-					class:linked={abweichung.indexOf(5) > -1}
-					disabled={!ausweis.zusaetzliche_heizquelle}
-				/>
-		
-				<span>Verbrauch</span>
-				<input
-					name="verbrauch_6"
-					type="number"
-					bind:value={ausweis.verbrauch_6}
-					class:linked={abweichung.indexOf(6) > -1}
-					disabled={!ausweis.zusaetzliche_heizquelle}
-				/>
-
 	</div>
 
 </div>
 
+<!-- Verbrauch 4 -->
+
+<div class="input-standard order-10 md:order-10 xl:order-10">
+	<Verbrauchslabel bind:ausweis addYear=1></Verbrauchslabel>
+
+	<input
+	name="verbrauch_4"
+	type="number"
+	bind:value={ausweis.verbrauch_4}
+	class:linked={abweichung.indexOf(4) > -1}
+/>
+<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
+
+		<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=1 heizquelle=2></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
 </div>
 
+<!-- Verbrauch 5 -->
 
+<div class="input-standard order-11 md:order-11 xl:order-11">
+	<Verbrauchslabel bind:ausweis addYear=2></Verbrauchslabel>
 
+	<input
+	name="verbrauch_5"
+	type="number"
+	bind:value={ausweis.verbrauch_5}
+	class:linked={abweichung.indexOf(5) > -1}
+/>
+<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
+
+		<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=2 heizquelle=2></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+</div>
+
+<!-- Verbrauch 6 -->
+
+<div class="input-standard order-12 md:order-12 xl:order-12">
+	<Verbrauchslabel bind:ausweis addYear=3></Verbrauchslabel>
+
+	<input
+	name="verbrauch_6"
+	type="number"
+	bind:value={ausweis.verbrauch_6}
+	class:linked={abweichung.indexOf(6) > -1}
+/>
+<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
+
+		<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=3 heizquelle=2></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+</div> 
+
+{/if}
+
+</div>
 
 <style lang="postcss">
-
+.VerbrauchsEinheit{@apply absolute right-[4rem]}
-input[type="checkbox"] {@apply accent-secondary}
-
 </style>

src/components/Ausweis/Warmwasseranteil.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 
-    import HelpLabel from "#labels/HelpLabel.svelte";
+import HelpLabel from "#labels/HelpLabel.svelte";
-    import Inputlabel from "#labels/InputLabel.svelte";
+import Inputlabel from "#labels/InputLabel.svelte";
-    
+
-    export let ausweis: VerbrauchsausweisWohnenClient;
+export let ausweis;
+
+
 
 </script>
 
-<div id="B" class="bereich-box grid 
+<div id="warmwasser" 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
@@ -15,23 +17,25 @@
 
 
 	<div class="input-standard order-1 md:order-1 xl:order-1">
-		<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>
+	<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>
 
-<div class="input-checkboxen">
+    <div class="input-row items-center gap-2">
 
-<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
+<div class="grid grid-cols-[max-content_40px] gap-x-2 items-center justify-items-start">
 	<input
+    id="warmwasser_enthalten"
 	type="checkbox"
 	class="checkbox"
 	name="warmwasser_enthalten"
 	data-test="warmwasser_enthalten"
 	bind:checked={ausweis.warmwasser_enthalten}
 	/>
-    <label for="warmwasser_enthalten">Ja</label>
+    <label for="warmwasser_enthalten" class="cursor-pointer">Ja</label>
 </div>
 
 <div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
 	<input
+    id="warmwasser_anteil_bekannt"
 	type="checkbox"
 	class="checkbox"
 	name="warmwasser_anteil_bekannt"
@@ -39,7 +43,7 @@
 	bind:checked={ausweis.warmwasser_anteil_bekannt}
 	disabled={!ausweis.warmwasser_enthalten}
 />
-    <label for="warmwasser_anteil_bekannt">Anteil bekannt</label>
+    <label for="warmwasser_anteil_bekannt" class="cursor-pointer">Anteil bekannt</label>
 </div>
 
 </div>
@@ -114,48 +118,52 @@
 
 <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">Heizung</label>
+    <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">Warmwasser</label>
+    <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">Lüftung</label>
+<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">Kühlung</label>
+<label for="alternative_kuehlung" class="checkbox-inline cursor-pointer">Kühlung</label>
 </div>
 
 </div>

src/components/design/sidebars/cards/CardProduktSidebar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let art: string;
+	export let price: number;
+</script>
+	
+<div id ="Card{art}Sidebar"
+	class="hidden lg:grid box card grid-cols-1 justify-items-center">
+
+
+
+	<h2>{art}</h2>
+
+	
+	<div >
+
+	{#if art=="Verbrauchsausweis Gewerbe"}
+	<img src="/images/right-sidebar/gewerbegebaeude.svg" alt="Verbrauchsausweis Gewerbe"/>
+	
+	{:else if art=="Bedarfsausweis Gewerbe"}
+	<img src="/images/right-sidebar/gewerbegebaeude.svg" alt="Bedarfsausweis Gewerbe"/>
+	
+	{:else if art=="Verbrauchsausweis Wohnen"}
+	<img src="/images/right-sidebar/wohngebaeude.svg" alt="Verbrauchsausweis Wohnen"/>
+
+	{:else if art=="Bedarfsausweis Wohnen"}
+	<img src="/images/right-sidebar/wohngebaeude.svg" alt="Bedarfsausweis Wohnen"/>
+	
+	{/if}
+
+	<div class="promo tracking-tighter text-[1.6rem] text-right text-gray-700 pr-32 -mt-5 mb-2">ab {price}€</div>
+
+	</div>
+
+	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" class="link">{art} jetzt&nbsp;erstellen</a>
+	
+	</div>
+
+<style lang="postcss">
+
+.link{@apply w-full text-white font-[700] bg-secondary rounded-md text-center px-3 py-1 no-underline [font-size:_clamp(8px,1vw,16px)] hover:bg-primary}
+
+</style>

src/components/design/sidebars/cards/cardContact.svelte

@@ -1,20 +1,28 @@
 <div id ="cardContact" class="box card">
 	
-	<div class="grid grid-cols-[max-content,1fr]">
+	<div class="grid grid-cols-[max-content,1fr] gap-x-2 border-b-[1px] pb-2 mb-4">
-		<div class="">
+		
-		<h2>Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
+		<div class="self-stretch">
-		<hr class="w-11/12"/>
+		<h2 class="border-b-0 mb-4">Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
-		<p>Telefonische Beratung unter</p>
+		<p class="text-sm">telefonische Beratung</p>
-		<a class="text-lg font-bold text-box-heading" href="tel:+4940209339850">040 / 209 339 850</a>
 		</div>
-
+		<img class="justify-self-end self-start" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
-		<img class="w-[100px] !min-w-[100px] mt-[0px] justify-self-end" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
 	</div>
 
+<div>
+<div class="-mt-2">
+	
+	<a class="text-3xl font-bold" href="tel:+4940209339850">040 / 209 339 850</a>
+</div>
+
 </div>
 
 
-<style lang="scss">
+
+</div>
+
+
+<style lang="postcss">
 
 
 </style>

src/components/design/sidebars/cards/cardNavigation.svelte

@@ -57,7 +57,7 @@ if(innerWidth>1024){
     const nodeList = document.querySelectorAll(".dropdown-content");
     for (let i = 0; i < nodeList.length; i++) {
     nodeList[i].classList.remove("show-dropdown-content");}
-    var element = document.getElementById("card-navigation");
+    var element = document.getElementById("cardNavigation");
     element.classList.toggle("hidden");
 
     const spans = this.children;
@@ -91,14 +91,16 @@ if(innerWidth>1024){
 
 
 
-<nav id="cardNavigation" class="cardNavigation box hidden ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"> 
+<nav id="cardNavigation" class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"> 
+
+  <div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Angebote</div>
 
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->
   <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
     {#if innerWidth > 1023}
-    <a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl" >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href={undefined} class="nav-element-child" >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {:else}
-    <a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href={undefined} class="nav-element-child">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
     {/if}
     
     <ul class="dropdown-content energieasusweis-erstellen">
@@ -116,6 +118,8 @@ if(innerWidth>1024){
     <a class="no-dropdown nav-element-child" href="/welcher-energieausweis">Welcher Energieausweis?</a>
   </div>
 
+  <div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Produkte</div>
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
   <a href={undefined} class="nav-element-child">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
@@ -165,6 +169,8 @@ if(innerWidth>1024){
   </ul>
 </div>
 
+<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">FAQ & Hilfe</div>
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
   <a href="{'/faq'}" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>

src/components/design/sidebars/cards/cardPriceiInfo.svelte

@@ -6,7 +6,7 @@
 			
 <h2>Was wird der Energieausweis kosten?</h2>
 
-<hr class="trenner-h">
+
 <div>Verbrauchsausweis Wohngebäude</div>
 <div>ab&nbsp;<span class="price">{PRICES.VerbrauchsausweisWohnen[0]}€</span>&nbsp;inkl.&nbsp;MwSt.</div>
 
@@ -36,7 +36,6 @@
 
 <style lang="postcss">
 
-.trenner-h{@apply mb-4 bg-primary h-[2px]}
 .trenner{@apply my-2}
 .price{@apply font-bold}
 

src/components/design/sidebars/cards/cardVAGpromo.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { PRICES } from "#lib/constants";
 </script>
 	
@@ -9,12 +9,12 @@
 
 	<h2>Verbrauchsausweis Gewerbe</h2>
 	<hr class="mb-4">
-	<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
+	<img class="w-[70%] justify-self-center !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
 	<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
-			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-gradient-to-br from-secondary to-secondary-grad rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
 					hover:bg-primary
-			" >jetzt Verbrauchsausweis erstellen</a>
+			" >Verbrauchsausweis sofort&nbsp;erstellen</a>
 	</div>
 </div>
 

src/components/design/sidebars/left/SidebarLeft.astro

@@ -1,12 +1,18 @@
 ---
 import CardNavigation from "#sidebarCards/cardNavigation.svelte";
 import CardPriceiInfo from "#sidebarCards/cardPriceiInfo.svelte";
+import CardProduktSidebar from "#sidebarCards/CardProduktSidebar.svelte";
+
+import { PRICES } from "#lib/constants";
 ---
 
 
 <div class="">
 
 <CardNavigation client:load/>
+
+<CardProduktSidebar art="Verbrauchsausweis Gewerbe" price={PRICES.VerbrauchsausweisGewerbe[0]}></CardProduktSidebar>
 <CardPriceiInfo />
+<CardProduktSidebar art="Bedarfsausweis Wohnen" price={PRICES.BedarfsausweisWohnen[0]}></CardProduktSidebar>
 
 </div>

src/components/design/sidebars/right/SidebarRight.astro

@@ -1,20 +1,21 @@
 ---
 import CardContact from "#sidebarCards/cardContact.svelte";
-import CardReview from "#sidebarCards/cardReview.svelte";
+import CardPriceiInfo from "#sidebarCards/cardPriceiInfo.svelte";
-import CardVApromo from "#sidebarCards/cardVApromo.svelte";
+import CardProduktSidebar from "#sidebarCards/CardProduktSidebar.svelte";
-import CardVAGpromo from "#sidebarCards/cardVAGpromo.svelte";
+
-import CardBApromo from "#sidebarCards/cardBApromo.svelte";
+import { PRICES } from "#lib/constants";
-import CardBAGpromo from "#sidebarCards/cardBAGpromo.svelte";
 ---
 
 <div class="hidden 2xl:block">
 
-    <CardContact />
+<CardContact />
-    <CardReview />
+
-    <CardVAGpromo />
+
-    <CardBAGpromo />
+<CardProduktSidebar art="Verbrauchsausweis Wohnen" price={PRICES.VerbrauchsausweisWohnen[0]}></CardProduktSidebar>
-    <CardVApromo />
+<CardPriceiInfo />
-    <CardBApromo />  
+<CardProduktSidebar art="Bedarfsausweis Gewerbe" price={PRICES.BedarfsausweisGewerbe[0]}></CardProduktSidebar>
+
+
 </div>
 
 

src/components/labels/BereichLabel.svelte

@@ -4,22 +4,20 @@
 	
 function toggleBereich(event){
 
-
-
 	var x = event.target.parentNode.parentNode.parentNode;
 	var y = x.nextElementSibling;
 	var z = event.target.innerHTML;
 
-console.log(y);
-
 if(z=='-'){
 	//y.classList.remove('hidden');
 	y.style.maxHeight = '0px';
+	y.style.overflow = 'hidden';
 	event.target.innerHTML = "+";
 
 }else{
 	//y.classList.add('hidden');
 	y.style.maxHeight = '500px';
+	y.style.overflow = 'visible';
 	event.target.innerHTML = "-";
 }
 

src/components/labels/VerbrauchsHelpLabel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import moment from "moment";
+
+    export let addYear: number;
+    export let heizquelle: number;
+    export let gebaeude_aufnahme_allgemein;
+	export let ausweis;
+
+</script>
+
+
+
+{#if ausweis.startdatum}
+Bitte geben Sie Ihre
+{#if heizquelle==1}
+{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b> {gebaeude_aufnahme_allgemein.brennstoff_1} </b>{/if}
+Verbräuche {#if ausweis.einheit_1} in <b>{ausweis.einheit_1} </b>{/if}
+{:else if heizquelle==2}
+{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b> {gebaeude_aufnahme_allgemein.brennstoff_2} </b>{/if}
+Verbräuche {#if ausweis.einheit_2} in <b>{ausweis.einheit_2} </b>{/if}
+{/if}
+
+
+von <b>{moment(ausweis.startdatum).add((addYear-1), "year").format("MM.Y")}</b>
+bis <b>{moment(ausweis.startdatum).add((addYear), "year").format("MM.Y")}</b>
+ein.
+
+{:else}
+Bitte geben Sie zuerst einen Starttermin für Ihre Verbräuche, den Brennstoff und die Einheit in die entsprechenden Felder ein. Danach können Sie hier die Verbräuche für den angegebenen Zeitraum eintragen.
+{/if}
+
+
+
+<style lang="postcss">
+
+</style>

src/components/labels/VerbrauchsLabel.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import moment from "moment";
+
+    export let addYear: number;
+    export let ausweis;
+
+  
+
+</script>
+
+
+<div class="absolute border-x-[1px] border-t-[1px] border-black/25 px-3 top-[-1.275rem] left-[0rem] text-[0.8rem] rounded-t-sm font-sans">
+{#if !ausweis.startdatum}
+Verbrauch von - bis
+{:else}
+Verbrauch von {moment(ausweis.startdatum).add((addYear-1), "year").format("MM.Y")} bis {moment(ausweis.startdatum).add((addYear), "year").format("MM.Y")}
+{/if}
+
+</div>
+
+
+
+<style lang="postcss">
+
+</style>

src/layouts/AusweisLayout.astro

@@ -71,12 +71,12 @@ const { title } = Astro.props;
 			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
 			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
 			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
-			2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-6
+			2xl:grid-cols-[minmax(300px,300px)1fr] 2xl:gap-5 2xl:p-6
 		">
 
 		<SidebarLeft />
 
-		<article class="box rounded-tl-none">
+		<article class="box rounded-tl-none p-2 lg:p-12">
 		<slot />
 		</article>
  

src/layouts/Layout.astro

@@ -41,10 +41,10 @@ const { title } = Astro.props;
 		md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
 		lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
 		xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
-		2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-6
+		2xl:grid-cols-[minmax(300px,300px)1fr_minmax(300px,300px)] 2xl:gap-5 2xl:p-6
 		">
 
-		<SidebarLeft client:load/>
+		<SidebarLeft />
 		
 		<article class="box rounded-tl-none
 		xl:px-10 py-8">

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -4,15 +4,16 @@
 	import Hilfe from "#components/Ausweis/Hilfe.svelte";
 
 	import BereichLabel from "#labels/BereichLabel.svelte";
-	import HelpLabel from "#labels/HelpLabel.svelte";
+	//import HelpLabel from "#labels/HelpLabel.svelte";
-	import Inputlabel from "#labels/InputLabel.svelte";
+	//import Inputlabel from "#labels/InputLabel.svelte";
-	import Label from "#components/Label.svelte";
+	//import Label from "#components/Label.svelte";
 
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
 	import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
-	
 	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import LueftungundLeerstand from "#components/Ausweis/LueftungundLeerstand.svelte";
+	
 	//import ZipSearch from "#components/PlzSuche.svelte";
 	import moment from "moment";
 	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
@@ -204,7 +205,18 @@
 <BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
 <div class="collapseBereich">
 <GebaeudeDaten 
-		bind:gebaeude_aufnahme_allgemein
+	bind:gebaeude_aufnahme_allgemein
+/>
+</div>
+
+<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->
+
+<BereichLabel bereich="C">Eingabe von 3&nbsp;zusammenhängenden Verbrauchsjahren</BereichLabel>
+<div class="collapseBereich">
+	<Verbrauch 
+	bind:gebaeude
+	bind:gebaeude_aufnahme_allgemein
+	bind:ausweis
 />
 </div>
 
@@ -215,16 +227,38 @@
 	<Warmwasseranteil 
 	bind:ausweis
 />
-	
+</div>	
+
+<!-- E Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand -->
+
+<BereichLabel bereich="E">Eingabe&nbsp;von&nbsp;Gebäudeteil, Lüftung,&nbsp;Kühlung&nbsp;und&nbsp;Leerstand</BereichLabel>
+<div class="collapseBereich">
+	<LueftungundLeerstand 
+	bind:gebaeude_aufnahme_allgemein
+/>
+</div>
+
+<!-- F Angaben zum Sanierungszustand des Gebäudes -->
+
+<BereichLabel bereich="F">Angaben zum Sanierungszustand des Gebäudes</BereichLabel>
+<div class="collapseBereich">
+	<BilderZusatzsysteme
+	bind:images 
+	bind:gebaeude 
+	bind:gebaeude_aufnahme_allgemein 
+	bind:ausweis 
+/>
+</div>	
+
+
+
+
+
+
 
 
 </div>
 
-
-
-
-
-
 </form>
 
 <style lang="scss">

src/style/576.scss

@@ -1063,7 +1063,7 @@ content > *:nth-child(3) {
 /* NOTE: */
 article ul {
 	margin-left: 1em;
-	list-style: disc;
+	list-style: none;
 	font-weight: 400;
 	line-height: 1.5;
 	color: #212529;

src/style/formular.css

@@ -15,7 +15,7 @@
 
 .bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
 
-.collapseBereich{@apply overflow-hidden transition-all ease-in-out duration-200 h-[auto]}
+.collapseBereich{@apply transition-all ease-in-out duration-200 h-[auto]}
 .bereich-box {@apply w-full bg-gray-500/10 rounded-sm xl:rounded-md border-2 border-gray-500/15 pt-6 pb-8 px-4;
 
 	transform-origin: top center;
@@ -31,11 +31,11 @@
 
 
 .input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2}
+.input-noHelp{@apply w-full grid grid-cols-[1fr] items-center relative mt-2}
 .input-checkboxen{@apply h-[38px] grid grid-cols-[1fr_1fr] gap-2 items-center ring-1 ring-black/15 rounded-sm bg-white}
+
 .input-row{@apply w-full min-h-[38px] grid grid-cols-[1fr_1fr] sm:grid-cols-[1fr_1fr_1fr_1fr] items-center py-[6px] px-[10px] ring-1 ring-black/15 rounded-sm bg-white }
 
-
-
 .help-label{@apply bg-black/15 rounded-e-sm ring-1 ring-black/15 self-stretch}
 
 

src/style/global.css

@@ -58,8 +58,10 @@ body{
 }
 
 input[type="text"], input[type="number"], input[type="password"], select{
-	@apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
+@apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
-input[type="checkbox"]{@apply inline-block}
+
+input[type="checkbox"]{@apply inline-block accent-secondary}
+
 radio{@apply accent-primary}
 
 
@@ -76,8 +78,8 @@ article {
 	
 	a {@apply text-blue-700 font-medium text-lg;}
 	p {@apply text-lg font-normal mb-2;}
-	li {@apply text-lg font-normal list-disc}
+	li {@apply text-lg font-normal}
-	ul {@apply list-inside mb-3;}
+	ul {@apply inline-block}
 	span {@apply text-secondary font-bold;}
 	
 	
@@ -97,7 +99,7 @@ article {
 .card:not(:last-child){@apply mb-5}
 .card{@apply bg-white px-6 py-4;
 
-	h2		{@apply text-lg font-bold text-box-heading leading-6}
+	h2		{@apply w-full [font-size:_clamp(8px,1.25vw,16px)] font-bold text-box-heading leading-6 pb-1 mb-4 border-b-[1px] border-primary/35}
 	hr		{@apply my-0}
 	p		{@apply text-lg}
 	a		{@apply text-lg}