Formular upDate

public/images/icons/info-mark.svg

@@ -30,7 +30,7 @@
   </defs>
   <!-- Generator: Adobe Illustrator 28.7.3, SVG Export Plug-In . SVG Version: 1.2.0 Build 164)  -->
   <g>
-    <g id="Ebene_4">
+    <g id="Ebene_4" class="cls-3">
       <rect class="cls-4" width="25" height="38"/>
     </g>
     <g id="Ebene_1">

src/components/Ausweis/Warmwasseranteil.svelte

@@ -17,10 +17,9 @@
 	<div class="input-standard order-1 md:order-1 xl:order-1">
 		<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>
 
-<div class="ring-1 ring-gray-500/50 h-[38px] grid grid-cols-[80px_1fr] items-center py-[6px] px-[10px]">
+<div class="input-checkboxen">
-	
+
-<div class="grid grid-cols-[20px_40px] items-center">
+<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
-	<label for="warmwasser_enthalten">Ja</label>
 	<input
 	type="checkbox"
 	class="checkbox"
@@ -28,10 +27,10 @@
 	data-test="warmwasser_enthalten"
 	bind:checked={ausweis.warmwasser_enthalten}
 	/>
+    <label for="warmwasser_enthalten">Ja</label>
 </div>
 
-<div class="grid grid-cols-[100px_40px] items-center">
+<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
-	<label for="warmwasser_anteil_bekannt">Anteil bekannt</label>
 	<input
 	type="checkbox"
 	class="checkbox"
@@ -40,18 +39,154 @@
 	bind:checked={ausweis.warmwasser_anteil_bekannt}
 	disabled={!ausweis.warmwasser_enthalten}
 />
+    <label for="warmwasser_anteil_bekannt">Anteil bekannt</label>
 </div>
 
-
 </div>
 
 <div class="help-label">
 	<HelpLabel>
-		Bitte geben Sie hier die Straße und Hausnummer des Gebäudes ein.
+		TEXT FEHLT
 	</HelpLabel>
 </div>
 
-
-</div>
 </div>
 
+
+<!-- % Anteil Warmwasser -->
+
+<div class="input-standard order-2 md:order-2 xl:order-2">
+	<Inputlabel title="% Anteil Warmwasser"></Inputlabel>
+
+    <input
+    name="anteil_warmwasser_1"
+    data-test="anteil_warmwasser_1"
+    maxlength="2"
+    type="number"
+    bind:value={ausweis.anteil_warmwasser_1}
+    disabled={!ausweis.warmwasser_anteil_bekannt || 
+        !ausweis.warmwasser_enthalten}
+    autocomplete="off"
+    />
+
+		<div class="help-label">
+				<HelpLabel>
+					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
+				</HelpLabel>
+			</div>
+</div>
+
+
+<!--zusätzliche Heizquelle -->
+
+<div class="input-standard order-3 md:order-3 xl:order-3">
+	<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
+
+    <input
+    name="anteil_warmwasser_2"
+    data-test="anteil_warmwasser_2"
+    maxlength="3"
+    type="number"
+    autocomplete="off"
+    bind:value={ausweis.anteil_warmwasser_2}
+    disabled={!ausweis.zusaetzliche_heizquelle ||
+        !ausweis.warmwasser_anteil_bekannt ||
+        !ausweis.warmwasser_enthalten}
+    />
+
+		<div class="help-label">
+				<HelpLabel>
+					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+					von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
+					ein Anteil von 18% angenommen.
+				</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
+    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>
+</div>
+
+<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
+
+<input
+    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>
+</div>
+
+<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
+<input
+    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>
+</div>
+
+<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
+
+<input
+    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>
+</div>
+
+</div>
+
+<div class="help-label">
+    <HelpLabel>
+        Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+        von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
+        ein Anteil von 18% angenommen.
+    </HelpLabel>
+
+</div>
+
+</div>
+
+
+
+
+
+
+
+</div>
+
+
+
+
+
+
+
+
+
+
+
+

src/style/formular.css

@@ -16,7 +16,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]}
-.bereich-box {@apply w-full bg-gray-500/10 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;
+.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;
 	/*background: linear-gradient(
@@ -31,7 +31,12 @@
 
 
 .input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2}
-.help-label{@apply rounded-e-sm ring-1 ring-black/15}
+.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}