🖼️ Bilderupload in Components ausgelagert.

src/components/Ausweis/Ausweisart.astro

@@ -0,0 +1,152 @@
+---
+import HelpLabel from "../HelpLabel.astro";
+
+---
+
+<div class="GRB">
+	<!-- Anlass für Energieausweis -->
+	<div class="flex flex-col">
+		<label class="control-label CHECK"
+			>Anlass für Energieausweis *
+		</label>
+		<div
+			class="grid grid-cols-3 items-center"
+		>
+			<label class="radio-inline rfs">
+				<input
+					type="radio"
+					value="Neubau"
+					name="IGanlass"
+				/>Neubau</label
+			>
+			<label class="radio-inline rfs"
+				><input
+					type="radio"
+					value="Vermietung"
+					checked
+					name="IGanlass"
+				/>Vermietung</label
+			>
+			<label class="radio-inline rfs"
+				><input
+					type="radio"
+					value="Verkauf"
+					name="IGanlass"
+				/>Verkauf</label
+			>
+			<br />
+			<label class="radio-inline rfs"
+				><input
+					type="radio"
+					value="Modernisierung"
+					name="IGanlass"
+				/>Modernisierung</label
+			>
+			<label class="radio-inline rfs"
+				><input
+					type="radio"
+					value="Sonstiges"
+					name="IGanlass"
+				/>Sonstiges</label
+			>
+		</div>
+	</div>
+
+	<!-- Baujahr Heizung -->
+	<div class="form-group col-md-2">
+		<HelpLabel title="Baujahr Heizung *">
+			Bitte geben Sie hier das Baujahr der
+			Heizungsanlage ein. Sollten
+			unterschiedliche Baujahre vorliegen,
+			dann geben Sie einen Zeitbereich ein <br
+			/>z.B. 1994-2001.
+		</HelpLabel>
+		<div>
+			<input
+				id="IGheizung"
+				name="IGheizung"
+				maxlength="20"
+				class="form-control input-md"
+				type="text"
+				required
+				autocomplete="off"
+				data-msg="Pflichtfeld"
+			/>
+		</div>
+	</div>
+
+	<!-- Baujahr -->
+	<div class="form-group col-md-2">
+		<HelpLabel title="Baujahr Gebäude *">
+			Bitte geben Sie hier das Baujahr des
+			Gebäudes ein. Sollte eine eine
+			grundlegende Sanierung von Dach,
+			Fenster und Heizung stattgefunden
+			haben, dann berücksichtigen Sie das
+			in dem Sie bei Sanierungsstatus
+			-saniert- angeben.
+		</HelpLabel>
+		<div>
+			<input
+				id="IGbaujahr"
+				name="IGbaujahr"
+				maxlength="20"
+				class="form-control input-md CHECK"
+				type="text"
+				required
+				autocomplete="off"
+				data-msg="Pflichtfeld"
+			/>
+		</div>
+	</div>
+
+	<!-- Anzahl der Wohnungen -->
+	<div class="form-group col-md-2">
+		<HelpLabel title="Anz Wohnungen *">
+			Bitte geben Sie hier die Anzahl der
+			Wohnungen ein, die sich im Gebäude
+			befinden.
+		</HelpLabel>
+		<div>
+			<input
+				id="IGanzahl"
+				name="IGanzahl"
+				class="form-control input-md zahlen"
+				type="text"
+				required
+				autocomplete="off"
+				data-msg="Pflichtfeld"
+				maxlength="3"
+			/>
+		</div>
+	</div>
+
+	<!-- Dachgeschoss -->
+	<div class="form-group col-md-2">
+		<HelpLabel title="Sanierungsstatus *">
+			Bitte geben Sie an ob das Gebäude
+			energetisch saniert oder unsaniert
+			ist. Wenn das Dach mindestens 12 cm
+			gedämmt und Heizung sowie Fenster
+			nicht älter als 30 Jahre sind,
+			können Sie saniert auswählen.
+		</HelpLabel>
+		<div>
+			<select
+				id="IGsan"
+				name="IGsan"
+				class="form-control"
+				required
+				data-msg="Pflichtfeld"
+			>
+				<option>Bitte auswählen</option>
+				<option value="san"
+					>saniert</option
+				>
+				<option value="unsan"
+					>unsaniert</option
+				>
+			</select>
+		</div>
+	</div>
+</div>

src/components/Ausweis/DaemmungImage.astro

@@ -0,0 +1,53 @@
+<div class="grid grid-cols-2 gap-4">
+	<div class="rounded-lg border-4 p-4 bg-white">
+		<input type="file" class="image_upload" name="daemmung[]" multiple />
+
+		<p class="font-bold mb-2">
+			<span class="text-red-500">WICHTIG:</span>
+			Bild Upload - Wärmedämmung (2 bis 4 Bilder)
+		</p>
+
+		<p>
+			Seit Mai 2021 wird das neue Gebäudeenergiegesetz (GEG) in
+			Deutschland angewendet. Daher werden von nun an Bilder vom Gebäude
+			zur Einschätzung der Modernisierungsempfehlungen benötigt. Hierfür
+			müssen laut Gesetzgeber Detailbilder vom Sanierungszustand bzw. der
+			Gebäudehülle und der Anlagentechnik (Wärmeerzeuger etc.) zur
+			Verfügung gestellt werden. Diese Bilder erscheinen nicht auf Ihrem
+			Energieausweis.
+		</p>
+		<br />
+		<ol>
+			<li>1.Bild : Detailbild Dach bzw. des Dachinnenraums*</li>
+			<li>
+				2.Bild : <em
+					>(weiteres Detailbild Dach bzw. des Dachinnenraums)</em
+				>
+			</li>
+			<li>3.Bild : Detailbild der Außenwand*</li>
+			<li>
+				4.Bild : <em>(weiteres Detailbild der Außenwand)</em>
+			</li>
+		</ol>
+		<p>* erforderliches Bild</p>
+		<br />
+		<p>
+			Idealerweise sollte Dämmung oder nicht vorhandene Dämmung gut zu
+			erkennen sein. Sollte aufgrund der Verkleidung bzw. Verschalung, der
+			Dämmzustand nicht erkennbar sein, reicht ein Bild vom ausgebauten
+			Dachgeschoss und/oder ein Außenbild vom Dach-Wandanschluss. Sollte
+			beim Detailbild der Außenwand aufgrund des Wandaufbaus die Dämmung
+			nicht erkennbar sein, reicht ein normales Bild der Außenwand
+			und/oder vom Dach-Wandanschluss.
+		</p>
+	</div>
+
+	<div class="rounded-lg border-4 p-4 bg-white">
+		<p>
+			Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
+			Energieausweis!<br />
+			<strong>Bitte laden Sie hier mind. 2 Bilder hoch:</strong>
+		</p>
+		<div class="image_container"></div>
+	</div>
+</div>

src/components/Ausweis/FensterImage.astro

@@ -0,0 +1,50 @@
+<div class="grid grid-cols-2 gap-4">
+	<div class="rounded-lg border-4 p-4 bg-white">
+		<input type="file" class="image_upload" name="fenster[]" multiple />
+
+		<p class="font-bold mb-2">
+			<span class="text-red-500">WICHTIG:</span>
+			Bild Upload - Fenster/Dachfenster/Türen (1 bis 4 Bilder)
+		</p>
+
+		<p>
+			Seit Mai 2021 wird das neue Gebäudeenergiegesetz (GEG) in
+			Deutschland angewendet. Daher werden von nun an Bilder vom Gebäude
+			zur Einschätzung der Modernisierungsempfehlungen benötigt. Hierfür
+			müssen laut Gesetzgeber Detailbilder vom Sanierungszustand bzw. der
+			Gebäudehülle und der Anlagentechnik (Wärmeerzeuger etc.) zur
+			Verfügung gestellt werden. Diese Bilder erscheinen nicht auf Ihrem
+			Energieausweis.
+		</p>
+		<br />
+		<ol>
+			<li>1. Bild : Exemplarisches Bild eines Fensters*</li>
+			<li>
+				2.Bild : <em>(Im Baualter abweichendes Fenster)</em>
+			</li>
+			<li>
+				3.Bild : <em>(Im Baualter abweichendes Fenster)</em>
+			</li>
+			<li>
+				4.Bild : <em>(wenn möglich, Bild der Haustür)</em>
+			</li>
+		</ol>
+		<p>* erforderliches Bild</p>
+		<br />
+		<p>
+			Wenn eine Fensterart bzw. Fensterqualität verbaut wurde, reicht ein
+			exemplarisches Bild, sonst pro Art ein Bild. Wenn möglich eine
+			Großaufnahme des Fensters bzw. des Fensterfalzes. Idealerweise
+			sollte der Datumsaufdruck am Verglasungsrahmen zu erkennen sein.
+		</p>
+	</div>
+
+	<div class="rounded-lg border-4 p-4 bg-white">
+		<p>
+			Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
+			Energieausweis!<br />
+			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
+		</p>
+		<div class="image_container"></div>
+	</div>
+</div>

src/components/Ausweis/HeizungImage.astro

@@ -0,0 +1,57 @@
+<div class="grid grid-cols-2 gap-4">
+	<div class="rounded-lg border-4 p-4 bg-white">
+		<input type="file" class="image_upload" name="heizung[]" multiple />
+
+		<p class="font-bold mb-2">
+			<span class="text-red-500">WICHTIG:</span>
+			Bild Upload - Heizungsanlage bzw. des Wärmeerzeugers (1 bis 4 Bilder)
+		</p>
+
+		<p>
+			Seit Mai 2021 wird das neue Gebäudeenergiegesetz (GEG) in
+			Deutschland angewendet. Daher werden von nun an Bilder vom Gebäude
+			zur Einschätzung der Modernisierungsempfehlungen benötigt. Hierfür
+			müssen laut Gesetzgeber Detailbilder vom Sanierungszustand bzw. der
+			Gebäudehülle und der Anlagentechnik (Wärmeerzeuger etc.) zur
+			Verfügung gestellt werden. Diese Bilder erscheinen nicht auf Ihrem
+			Energieausweis.
+		</p>
+		<br />
+		<ol>
+			<li>1.Bild : Heizungsraum mit Heizkessel bzw. Heizungsanlage*</li>
+			<li>
+				2.Bild : <em
+					>(wenn möglich, Warmwasserleitungen bzw. die Heizungsrohre)</em
+				>
+			</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>
+		<p>* erforderliches Bild</p>
+		<br />
+		<p>
+			Idealerweise sollte der Heizungsraum mit Heizkessel bzw.
+			Heizungsanlage fotografiert werden. Die Warmwasserleitungen bzw. die
+			Heizungsrohre sollten gut sichtbar sein und vorhandene bzw. nicht
+			vorhandene Dämmung sollte erkennbar sein.
+		</p>
+	</div>
+
+	<div class="rounded-lg border-4 p-4 bg-white">
+		<p>
+			Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
+			Energieausweis!<br />
+			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
+		</p>
+		<div class="image_container"></div>
+	</div>
+</div>

src/components/Ausweis/Hilfe.astro

@@ -1,3 +1,18 @@
+---
+import HelpLabel from "../HelpLabel.astro";
+
+---
+
+<HelpLabel title="">Wir helfen Ihnen bei der Eingabe. Kurze Fragen zum Formular oder der Ausweisart werden kostenfrei telefonisch beantwortet (bis 5min). Bitte kontaktieren Sie uns unter 040/209339850. Gerne nehmen wir Ihnen die Arbeit ab - Fordern Sie unseren Offline Service an und klicken auf -Hilfe anfordern-</HelpLabel>
+<input
+	class="button"
+	onclick="javascript:toggle('hilfean')"
+	style="background-color: #31448e;width:100%;"
+	id="hilfeaw"
+	type="button"
+	value="Hilfe anfordern"
+/>
+
 <div class="form-group col-md-12" id="hilfean">
 	<div class="form-group col-md-12 pop_help">
 
@@ -5,21 +20,21 @@
 			Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen haben. Kurze Fragen zum Formular oder der Ausweisart werden kostenfrei telefonisch unter <a href="tel:+4940209339850">040/209339850</a> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre Auswahl und klicken auf weiter:
 		</div>
 
-		<div class="row" style="margin:0em 0em 0em 2em;">
+		<div class="flex flex-row justify-between mx-4 my-2">
 			<div class="form-group col-md-7">Verbrauchsausweis online inkl. ausführlicher telefonischer Beratung für 60 € inkl. MwSt.</div>
 			<div class="form-group col-md-5"><input type="radio" class="IGanlass" id="Produkttb1" value="ptb" name="Produkt"></div>
 		</div>
-		<div class="row" style="margin:0em 0em 0em 2em;">
+		<div class="flex flex-row justify-between mx-4 my-2">
 			<div class="form-group col-md-7">Verbrauchsausweis offline für 180 € inkl. MwSt. (Sie schicken uns 3 Verbrauchsabrechnungen zu)</div>
 			<div class="form-group col-md-5"><input type="radio" class="IGanlass" id="Produktof1" value="pof" name="Produkt"></div>
 		</div>
-		<div class="row" style="margin:0em 0em 0em 2em;">
+		<div class="flex flex-row justify-between mx-4 my-2">
 			<div class="form-group col-md-7">Bedarfsausweis offline für 290 € inkl. MwSt. (Sie schicken uns Grundriss- und Ansichtspläne zu)</div>
 			<div class="form-group col-md-5"><input type="radio" class="IGanlass" id="Produktbof1" value="pbof" name="Produkt"></div>
 		</div>
 
 		<div class="form-group col-md-12" style="text-align:right;">
-			<br><input class="weiterbutton cancel" style="background-color: #31448e;" id="weiterzl" type="submit" name="submit2" value="weiter" />
+			<button>Weiter</button>
 		</div>
 
 	</div>

src/components/Ausweis/PerformanceScore.svelte

@@ -1,20 +1,15 @@
-<div id="view_VA_01" class="col-md-6" style="padding:0px;">
-	<div class="VA_01">
-		<div id="movearea">
-			<div id="pfeil1">
+<div class="w-full rounded-lg border border-[#ffcc03] relative p-2">
+	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
 	<img
-					style="width:100%;"
-					src="/energieausweis-erstellen/FORM/img/pfeil2.png"
+		class="absolute top-2"
+		width="20px"
+		src="/images/pfeil2.png"
 		alt="pfeil"
 	/>
-			</div>
-			<div id="pfeil2">
 	<img
-					style="width:100%;"
-					src="/energieausweis-erstellen/FORM/img/pfeil.png"
+		class="absolute bottom-2"
+		width="20px"
+		src="/images/pfeil.png"
 		alt="pfeil"
 	/>
-			</div>
-		</div>
-	</div>
 </div>

src/components/Ausweis/Verbrauch.astro

@@ -0,0 +1,360 @@
+---
+import HelpLabel from "../HelpLabel.astro";
+---
+
+<div class="w-full flex flex-col">
+	<div class="flex flex-row w-full justify-between">
+		<div class="form-group col-md-2">
+			<HelpLabel title="primäre Heizquelle">
+				Bitte geben Sie drei zusammenhängende Verbrauchsjahre der
+				Heizungsanlage ein. Wenn eine weitere Heizquelle vorhanden sein
+				sollte geben Sie diese rechts bei 'zusätzliche Heizquelle' ein.
+			</HelpLabel>
+			<input
+				type="checkbox"
+				tabindex="-1"
+				class="IGzus1verbrauch1"
+				value=""
+				checked
+				onclick="return false"
+			/>
+		</div>
+
+		<div class="form-group col-md-2">
+			<HelpLabel title="zusätzliche Heizquelle">
+				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 class="form-group col-md-2">
+			<HelpLabel title="Brennstoff *">
+				<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>
+				<select
+					id="energietraeger_1"
+					name="energietraeger_1"
+					class="form-control CHECK"
+					onfocus="IclearBRS()"
+					required
+					data-msg="Pflichtfeld"
+				>
+					<option id="BRSsel1" value="">Bitte auswählen</option>
+					<!-- TODO: Energieträger aus Datenbank holen -->
+				</select>
+			</div>
+		</div>
+
+		<div class="form-group col-md-2">
+			<HelpLabel title="Einheit *">
+				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>
+				<select
+					id="energietraeger_einheit_heizquelle_1"
+					name="energietraeger_einheit_heizquelle_1"
+					class="form-control CHECK"
+					required
+					data-msg="Pflichtfeld"
+				>
+					<option id="BRSE0" value="">Bitte auswählen</option>
+					<option id="BRSE1" value="kWh"> kWh</option>
+					<option id="BRSE2" value="m³">m³</option>
+					<option id="BRSE3" value="l">l</option>
+					<option id="BRSE4" value="kg">kg</option>
+					<option id="BRSE5" value="SRm"> SRm</option>
+				</select>
+			</div>
+		</div>
+
+		<div class="form-group col-md-2 v2T">
+			<label class="control-label" for="energietraeger_2"
+				>Brennstoff *
+			</label>
+			<div>
+				<select
+					id="energietraeger_2"
+					name="energietraeger_2"
+					class="form-control CHECK"
+					onfocus="IclearBRS1()"
+					disabled
+					required
+					data-msg="Pflichtfeld"
+				>
+					<option id="BRSsel2" value=""> Bitte auswählen</option>
+					<!-- TODO: Energieträger aus Datenbank holen -->
+				</select>
+			</div>
+		</div>
+
+		<div class="form-group col-md-2 v2T">
+			<label
+				class="control-label"
+				for="energietraeger_einheit_heizquelle_2"
+				>Einheit *
+			</label>
+			<div>
+				<select
+					id="energietraeger_einheit_heizquelle_2"
+					name="energietraeger_einheit_heizquelle_2"
+					class="form-control CHECK"
+					disabled
+					required
+					data-msg="Pflichtfeld"
+					style="margin-bottom: 0.5em !important;"
+				>
+					<option id="2BRSE0" value="">Bitte auswählen</option>
+					<option id="2BRSE1" value="kWh"> kWh</option>
+					<option id="2BRSE2" value="m³">m³</option>
+					<option id="2BRSE3" value="l">l</option>
+					<option id="2BRSE4" value="kg">kg</option>
+					<option id="2BRSE5" value="SRm"> SRm</option>
+				</select>
+			</div>
+		</div>
+	</div>
+
+	<div class="flex flex-row justify-between">
+		<div class="column-first">
+			<div class="input-group-addon">
+				<div class="bis bw">von</div>
+			</div>
+
+			<select
+				name="energieverbrauch_zeitraum_monat"
+				class="form-control rounded-tr-none rounded-br-none"
+				required
+				data-msg="Pflichtfeld"
+				style="font-family: 'Abel',sans-serif;"
+			>
+				<option value="">auswählen</option>
+				<option id="Januar" value="1">Januar</option>
+				<option id="Februar" value="2"> Februar</option>
+				<option id="März" value="3">März</option>
+				<option id="April" value="4">April</option>
+				<option id="Mai" value="5">Mai</option>
+				<option id="Juni" value="6">Juni</option>
+				<option id="Juli" value="7">Juli</option>
+				<option id="August" value="8">August</option>
+				<option id="September" value="9"> September</option>
+				<option id="Oktober" value="10"> Oktober</option>
+				<option id="November" value="11"> November</option>
+				<option id="Dezember" value="12"> Dezember</option>
+			</select>
+
+			<select
+				name="energieverbrauch_zeitraum_jahr"
+				class="form-control klima CHECK"
+				required
+				data-msg="Pflichtfeld"
+				style="font-family: 'Abel',sans-serif;"
+			>
+				<option value="">auswählen</option>
+				<option id="2010" value="2010"> 2010</option>
+				<option id="2011" value="2011"> 2011</option>
+				<option id="2012" value="2012"> 2012</option>
+				<option id="2013" value="2013"> 2013</option>
+				<option id="2014" value="2014"> 2014</option>
+				<option id="2015" value="2015"> 2015</option>
+				<option id="2016" value="2016"> 2016</option>
+				<option id="2017" value="2017"> 2017</option>
+				<option id="2018" value="2018"> 2018</option>
+				<option id="2019" value="2019"> 2019</option>
+			</select>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<div class="bis bw">bis</div>
+			</div>
+			<input
+				id="IGverbrauch1Y2"
+				tabindex="-1"
+				class="form-control"
+				value=""
+				readonly
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<span class="bis">Verbrauch</span>
+			</div>
+			<input
+				id="energieverbrauch_1_heizquelle_1"
+				name="energieverbrauch_1_heizquelle_1"
+				class="form-control input-md zahlen CHECK"
+				type="text"
+				value=""
+				required
+				data-msg="Pflichtfeld"
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<span class="bis">Verbrauch</span>
+			</div>
+			<input
+				id="energieverbrauch_1_heizquelle_2"
+				name="energieverbrauch_1_heizquelle_2"
+				class="form-control input-md zahlen CHECK"
+				type="text"
+				value=""
+				disabled
+			/>
+		</div>
+	</div>
+
+	<div class="flex flex-row justify-between">
+		<div class="column-first">
+			<div class="input-group-addon">
+				<div class="bis bw">von</div>
+			</div>
+			<input
+				id="IGverbrauch2M"
+				tabindex="-1"
+				class="form-control klima CHECK"
+				value=""
+				readonly
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<div class="bis bw">bis</div>
+			</div>
+			<input
+				id="IGverbrauch2Y2"
+				tabindex="-1"
+				class="form-control"
+				value=""
+				readonly
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<span class="bis">Verbrauch</span>
+			</div>
+			<input
+				id="energieverbrauch_2_heizquelle_1"
+				name="energieverbrauch_2_heizquelle_1"
+				class="form-control input-md zahlen CHECK"
+				type="text"
+				value=""
+				required
+				data-msg="Pflichtfeld"
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<span class="bis">Verbrauch</span>
+			</div>
+			<input
+				id="energieverbrauch_2_heizquelle_2"
+				name="energieverbrauch_2_heizquelle_2"
+				class="form-control input-md zahlen CHECK"
+				type="text"
+				value=""
+				disabled
+			/>
+		</div>
+	</div>
+
+	<div class="flex flex-row justify-between">
+		<div class="column-first">
+			<div class="input-group-addon">
+				<div class="bis bw">von</div>
+			</div>
+			<input
+				id="IGverbrauch3M"
+				tabindex="-1"
+				class="form-control klima CHECK"
+				value=""
+				readonly
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<div class="bis bw">bis</div>
+			</div>
+			<input
+				id="IGverbrauch3Y2"
+				tabindex="-1"
+				class="form-control"
+				value=""
+				readonly
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<span class="bis">Verbrauch</span>
+			</div>
+			<input
+				id="energieverbrauch_3_heizquelle_1"
+				name="energieverbrauch_3_heizquelle_1"
+				class="form-control input-md zahlen CHECK"
+				type="text"
+				value=""
+				required
+				data-msg="Pflichtfeld"
+			/>
+		</div>
+
+		<div class="column">
+			<div class="input-group-addon">
+				<span class="bis">Verbrauch</span>
+			</div>
+			<input
+				id="energieverbrauch_3_heizquelle_2"
+				name="energieverbrauch_3_heizquelle_2"
+				class="form-control input-md zahlen CHECK"
+				type="text"
+				value=""
+				disabled
+			/>
+		</div>
+	</div>
+</div>
+
+<style>
+	.column-first {
+		@apply flex flex-row items-center w-[300px];
+	}
+
+	.column {
+		@apply flex flex-row items-center gap-4;
+	}
+</style>

src/components/HelpLabel.astro

@@ -0,0 +1,35 @@
+---
+export type Props = {
+	title: string;
+};
+
+const { tooltip, title } = Astro.props;
+---
+
+<div class="flex flex-row justify-between mb-2">
+	<span>{title}</span>
+	<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
+		<img
+			src="/images/question-mark.png"
+			alt="?"
+			class="w-[25px] h-[25px]"
+		/>
+		<div class="tooltip">
+			<slot></slot>
+		</div>
+	</div>
+</div>
+
+<style>
+	span {
+		@apply text-sm font-semibold;
+	}
+
+	.tooltip {
+		@apply absolute left-0 translate-x-[-50%] max-w-[350px] w-max break-words invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)];
+	}
+
+	.tooltip-opener:hover .tooltip {
+		@apply visible;
+	}
+</style>

src/layouts/Layout.astro

@@ -103,7 +103,7 @@ const schema = JSON.stringify({
 	}
 
 	button, .button {
-		@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center;
+		@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center cursor-pointer;
 		color: #fff !important;
 	}