Merge pull request #420 from IBCornelsen/main

get main

public/images/form-l.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="63.5mm" height="73.73mm" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 209">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_5" data-name="Ebene 5">
+    <rect class="cls-1" x="5.5" width="169" height="209"/>
+  </g>
+  <g id="Ebene_3" data-name="Ebene 3">
+    <image width="180" height="209" transform="translate(0 0)" xlink:href="data:image/png;base64,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"/>
+  </g>
+</svg>

public/images/form-r.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="63.5mm" height="73.73mm" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 209">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_5" data-name="Ebene 5">
+    <rect class="cls-1" x="5.5" width="169" height="209"/>
+  </g>
+  <g id="Ebene_4" data-name="Ebene 4">
+    <image width="180" height="209" transform="translate(0 0)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAADRCAYAAABl9JjbAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kTtIw1AUhv+mFh9UFO0g4pChOlkQFXGUKhbBQmkrtOpgctMXNGlIUlwcBdeCg4/FqoOLs64OroIg+ABxcnRSdJESz00KLWK8cLgf/73/z7nnAkK9zFSzYwJQNctIxqJiJrsqdr6iGwH0Uw1IzNTjqcU0PNfXPXx8v4vwLO97f65eJWcywCcSzzHdsIg3iGc2LZ3zPnGIFSWF+Jx43KAGiR+5Lrv8xrngsMAzQ0Y6OU8cIhYLbSy3MSsaKvE0cVhRNcoXMi4rnLc4q+Uqa/bJXxjMaSsprlONIIYlxJGACBlVlFCGhQjtGikmknQe9fAPO/4EuWRylcDIsYAKVEiOH/wPfs/WzE9NuknBKBB4se2PUaBzF2jUbPv72LYbJ4D/GbjSWv5KHZj9JL3W0sJHQN82cHHd0uQ94HIHGHrSJUNyJD+VkM8D72f0TVlg8BboWXPn1jzH6QOQplkt3wAHh8BYgbLXPd7d1T63f+805/cDDsFyfxOiTQ4AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfkCQUQHxZeZ3nIAAAALHRFWHRDb21tZW50AEZpbGUgd3JpdHRlbiBieSBBZG9iZSBQaG90b3Nob3A/IDQuMFGAuAkAAAJzSURBVHja7d3PbmFhGMDh9xzsLYSbcAdiM0s7vY5ZWomNWLgIO4lr4JasWEqIbzZ0OkabNq0/h+dJGgmtyDk/X18kvggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHhcmUPApc3n818RESmll06n87tQQWdZliIi8jyP/X5/vC5SSs7sM62Uh3P+9tyXSqXY7XbH6wqzmKZ+v69ezhoOhykiLtZHfok7bbVazhxntdvtwj1mqzM3ayR3bHkkgkbQIGgQNAgaQYOgQdAgaBA0ggZBg6BB0CBoBA2CBkGDoEHQCBoEDYIGQYOgETQIGgQNggZBI+iD45YTH9zuqFIY6eTyo9+Bqzdi5MAMbeSg8M7MzsnIwb2NHNk3H8S5v0+j0Si63W6s1+u/Vx72rON5VavVWCwW0ev1vtrep5W/MkqcbJb47rOs0WhEs9lUL/+ZzWZ38R88fXIMMXJw05HjWy8KbXeMZx8U6X1oL/zw7EMj97pCwy0JGkGDoEHQIGgEDYIGQYOgQdAIGgQNggZBg6ARNAgaBA2CBkEjaBA0CBoEDYJG0CBoEDTcZdCTycQ3kHLWdDq9aBuX+DLnVK/Xo1arxXa7/feGlCLPc9/8/wTObRJVLpdjtVrFcrk83a/nx5R/+g7H43FsNpvY7XbHjYZeL8X8PLIsi/1+/xr1sYFSqRSVSiUGg4GDBAA/M0Yetr17+wOFnSHt4chjrdCCvj4frPBQyg7B1VdpMEODGdoMDfDOCu19aAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgcv4AtNGVUtf+RMwAAAAASUVORK5CYII="/>
+  </g>
+</svg>

public/images/form-t.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="63.5mm" height="73.73mm" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 209">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_5" data-name="Ebene 5">
+    <rect class="cls-1" x="5.5" width="169" height="209"/>
+  </g>
+  <g id="Ebene_1" data-name="Ebene 1">
+    <image width="180" height="209" transform="translate(0 0)" xlink:href="data:image/png;base64,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"/>
+  </g>
+</svg>

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -26,7 +26,7 @@
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="box card mb-0 relative">
+	<div class="box mb-0 relative p-2 sm:px-8">
 
 		
 			<ImageGrid
@@ -44,7 +44,7 @@
 
 	</div>
 
-	<div class="box card mb-0">
+	<div class="box mb-0 p-2 sm:px-8">
 		<div class="input-standard">
 			
 			<input type="text"  
@@ -60,7 +60,7 @@
 
 		</div>
 
-		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+		<div class="grid grid-cols-1 xs:grid-cols-2 gap-4 mt-4">
 			<AnsichtsausweisButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 			<DatenblattButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 		</div>

src/components/Ausweis/DaemmungImage.svelte

@@ -8,7 +8,7 @@
 	export let objekt: ObjektClient;
 </script>
 
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6 p-2 sm:px-0">
 	
 	<div class="md:box md:card mb-0 bereich-box">
 

src/components/Ausweis/FensterImage.svelte

@@ -8,7 +8,7 @@
 	export let objekt: ObjektClient;
 </script>
 
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6 p-2 sm:px-0">
 	
 	<div class="md:box md:card mb-0 bereich-box">
 

src/components/Ausweis/GebaeudeVolumen.svelte

@@ -14,31 +14,40 @@ const arrayRange = (start: number, stop: number, step: number) =>
 <div
 id="superBereich2"
 class="grid w-full items-start
-grid-cols-1 gap-x-4 gap-y-8
+grid-cols-1 gap-x-4 gap-y-4
 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="bereich-box col-span-2">
-    <div class="w-full grid grid-cols-4 gap-4 justify-between justify-items-center items-center">
+    <div class="w-full grid grid-cols-2 sm:grid-cols-4 gap-4 justify-between justify-items-center items-center">
-        <img src="/images/r.png" alt="rechteck" />
+        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-r.svg" alt="rechteck"/></div>
-        <img src="/images/l.png" alt="l-form" />
+        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-l.svg" alt="l-form" /></div>
-        <img src="/images/t.png" alt="t-form" />
+        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-t.svg" alt="t-form" /></div>
-        <img src="/images/u.png" alt="u-form" />
+        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-u.svg" alt="u-form" /></div>
     </div>
 </div>
 
-<div>
+<div class="col-span-2 xl:col-span-1">
 
 <div
 	id="Berechnungshilfe2"
 	class="bereich-box grid w-full
-grid-cols-1 gap-x-4 gap-y-8
+grid-cols-2 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 col-span-2 sm:col-span-3">
+    <h4 class="m-0 font-bold p-1 pt-2 min-h-[38px] ring-1 bg-white ring-black/15 rounded-sm;">Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe</h4>
+    <div class="help-label">
+        <HelpLabel>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>
+</div>
+
 <div class="input-standard order-1 md:order-1 xl:order-1">
     <Inputlabel title="A"></Inputlabel>
 
@@ -218,15 +227,48 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 
 </div>
 
+<div class="bereich-box col-span-2 xl:col-span-1">
 <div
 	id="Berechnungstabelle"
-	class="bereich-box grid w-full 
+	class="grid w-full 
-grid-cols-1 gap-x-4 gap-y-8
+grid-cols-2 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
+xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8 xl:col-span-1 
 "
 >
+<div class="input-standard col-span-2">
+   <h4 class="m-0 font-bold p-1 pt-2 min-h-[38px] ring-1 bg-white ring-black/15 rounded-sm ">Außenflächen, U-Werte und Volumen</h4>
+   <div class="help-label">
+    <HelpLabel>Die wärmeübertragende Umfassungsflächen sind die Hüllflächen des beheizten Gebäudes die an die Außenluft bzw. an unbeheizte Vorbauten grenzen. 
+        Wenn Ihnen die Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können Sie die Eingabe direkt vornehmen. 
+        Hier können Sie auch das von den Umfassungsflächen eingeschlossene Volumen des Gebäudes eingeben. 
+        Die ermittelten Werte der Berechnungshilfe können hier präzisiert werden.</HelpLabel>
+</div>
+</div>
 
+<div class="input-standard col-span-2">
+    <Inputlabel title="Tabellenwerte"></Inputlabel>
+
+ <div class="input-checkboxen">
+        <div
+            class="grid grid-cols-[25px_max-content] items-center justify-items-start"
+        >
+     
+        <input
+            id="tabellenwerte_aendern"
+            type="checkbox"
+            bind:checked={ausweis.tabellenwerte_aendern}
+            name="tabellenwerte_aendern"
+        />
+            <label for="tabellenwerte_aendern">Tabellenwerte manuell ändern</label>
+        </div>
+
+    </div>
+
+    <div class="help-label">
+        <HelpLabel></HelpLabel>
+    </div>
+</div>
 
 <div class="input-standard order-1 md:order-1 xl:order-1">
     <Inputlabel title="Dachfläche in m²"></Inputlabel>
@@ -259,7 +301,7 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 </div>
 
 <div class="input-standard order-3 md:order-3 xl:order-3">
-    <Inputlabel title="Geschoßdecke in m²"></Inputlabel>
+    <Inputlabel title="Geschoßdecke&nbsp;in&nbsp;m²"></Inputlabel>
 
     <input
                     name="deckenflaeche"
@@ -288,7 +330,6 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
     </div>
 </div>
 
-
 <div class="input-standard order-5 md:order-5 xl:order-5">
     <Inputlabel title="Außenwand in m²"></Inputlabel>
 
@@ -319,7 +360,6 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
     </div>
 </div>  
 
-
 <div class="input-standard order-7 md:order-7 xl:order-7">
     <Inputlabel title="Fußboden in m²"></Inputlabel>
 
@@ -350,8 +390,7 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
     </div>
 </div>  
 
-
+<div class="input-standard order-9 md:order-9 xl:order-9 col-span-2">
-<div class="input-standard order-9 md:order-9 xl:order-9">
     <Inputlabel title="eingeschlossenes Gebäudevolumen in m³"></Inputlabel>
 
     <input
@@ -366,11 +405,11 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
     </div>
 </div>  
 
-<div class="input-standard order-10 md:order-10 xl:order-10">
+<div class="input-standard order-10 md:order-10 xl:order-10 col-span-2">
     <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-[max-content_max-content] bg-white 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
@@ -404,6 +443,7 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
     </div>
 </div> 
 
+</div>
 </div>
 
 </div>

src/components/Ausweis/HeizungImage.svelte

@@ -8,7 +8,7 @@
 	export let gebaeude: ObjektClient;
 </script>
 
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6 p-2 sm:px-0">
 	
 	<div class="md:box md:card mb-0 bereich-box">
 

src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte

@@ -9,10 +9,12 @@
         ["Prüfung durch Dipl.&nbsp;Ing.<br>Registrierung beim DiBt<br>rechtssicher nach&nbsp;GEG",true, true],
         ["Originalausweis als&nbsp;PDF per&nbsp;<span class='text-nowrap'>E-Mail</span><br>Originalausweis per&nbsp;Post (zubuchbar)",true, true],
         ["Fotoupload<br>Dokumentenupload<br>(Pläne, Unterlagen)",true, true],
-        ["Prüfanmerkungen per&nbsp;<span class='text-nowrap'>E-Mail</span>",true, true],
+        ["Onlinefragebogen zum Gebäude",true, true],
         ["persönlicher&nbsp;Support",true, true],
-        ["Dokumentensichtung",false, true],
+        ["Dokumentensichtung<br>",false, true],
-        ["telefonische&nbsp;Beratung<br>persönlicher&nbsp;Energieberater",false, true],
+        ["telefonische Beratung<br>persönlicher Energieberater",false, true],
+        ["Vor-Ort Termin",false, true],
+
     ]
     
     
@@ -70,7 +72,7 @@
     .bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
     .bullet:nth-child(even){@apply bg-blue-100/40}
     .bullet:nth-child(2){@apply !border-t-[6px]}
-    .bullet:nth-child(8){@apply !border-b-[6px]}
+    .bullet:nth-child(9){@apply !border-b-[6px]}
     
     .check {
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;

src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte

@@ -10,13 +10,12 @@
         ["Originalausweis als&nbsp;PDF per&nbsp;<span class='text-nowrap'>E-Mail</span><br>Originalausweis per&nbsp;Post (zubuchbar)",true, true, true],
         ["Bearbeitung innerhalb 24&nbsp;Stunden<br>Selbsteingabe",true, true, false],
         ["Same&nbsp;day&nbsp;service (zubuchbar)",true, true, false],
-        ["Fotoupload",true, true, true],
+        ["Fotoupload<br>Dokumentenupload (Pläne, Bauunterlagen)",true, true, true],
         ["automatische Vorprüfung<br>Live&nbsp;Vorschau direkt bei&nbsp;Eingabe<br>Live&nbsp;Vorschauausweis vorab<br>Vorschauausweis per&nbsp;E-Mail<br>dynamische&nbsp;Eingabehilfe",true, true, false],
         ["Prüfanmerkungen per&nbsp;<span class='text-nowrap'>E-Mail</span>",true, true, false],
         ["persönlicher&nbsp;Support",true, true, true],
         ["telefonische&nbsp;Beratung<br>persönlicher&nbsp;Energieberater",false, true, true],
-        ["Dokumentenupload (Pläne, Unterlagen)",false, false, true],
+        ["Vor-Ort Termin",false, false, true],
-        ["Erstellung durch Dipl.&nbsp;Ing.",false, false, true],
     ]
     
     
@@ -77,7 +76,7 @@
     .bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
     .bullet:nth-child(even){@apply bg-blue-100/40}
     .bullet:nth-child(2){@apply !border-t-[6px]}
-    .bullet:nth-child(12){@apply !border-b-[6px]}
+    .bullet:nth-child(11){@apply !border-b-[6px]}
     
     .check {
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;

src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte

@@ -14,9 +14,7 @@
         ["automatische Vorprüfung<br>Live&nbsp;Vorschau direkt bei&nbsp;Eingabe<br>Live&nbsp;Vorschauausweis vorab<br>Vorschauausweis per&nbsp;E-Mail<br>dynamische&nbsp;Eingabehilfe",true, true, false],
         ["Prüfanmerkungen per&nbsp;<span class='text-nowrap'>E-Mail</span>",true, true, false],
         ["persönlicher&nbsp;Support",true, true, true],
-        ["telefonische&nbsp;Beratung<br>persönlicher&nbsp;Energieberater",false, true, true],
+        ["telefonische&nbsp;Beratung<br>persönlicher&nbsp;Energieberater",false, true, true]
-        ["Dokumentenupload (Verbrauchsabrechnungen)",false, false, true],
-        ["Erstellung durch Dipl.&nbsp;Ing.",false, false, true]
 
     ]
     
@@ -78,7 +76,7 @@
     .bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
     .bullet:nth-child(even){@apply bg-blue-100/40}
     .bullet:nth-child(2){@apply !border-t-[6px]}
-    .bullet:nth-child(12){@apply !border-b-[6px]}
+    .bullet:nth-child(10){@apply !border-b-[6px]}
     
     .check {
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;

src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte

@@ -15,9 +15,7 @@ bullets = [
     ["automatische Vorprüfung<br>Live&nbsp;Vorschau direkt bei&nbsp;Eingabe<br>Live&nbsp;Vorschauausweis vorab<br>Vorschauausweis per&nbsp;E-Mail<br>dynamische&nbsp;Eingabehilfe",true, true, false],
     ["Prüfanmerkungen per&nbsp;<span class='text-nowrap'>E-Mail</span>",true, true, false],
     ["persönlicher&nbsp;Support",false, true, true],
-    ["telefonische&nbsp;Beratung<br>persönlicher&nbsp;Energieberater",false, true, true],
+    ["telefonische&nbsp;Beratung<br>persönlicher&nbsp;Energieberater",false, true, true]
-    ["<br>Dokumentenupload<br>(Verbrauchsabrechnungen)",false, false, true],
-    ["Erstellung durch Dipl.&nbsp;Ing.",false, false, true]
 
 ]
 
@@ -79,7 +77,7 @@ bullets = [
 .bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
 .bullet:nth-child(even){@apply bg-blue-100/40}
 .bullet:nth-child(2){@apply !border-t-[6px]}
-.bullet:nth-child(12){@apply !border-b-[6px]}
+.bullet:nth-child(10){@apply !border-b-[6px]}
 
 .check {
 		@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;

src/components/design/footer/Footer.astro

@@ -4,9 +4,9 @@ const currentYear = new Date().getFullYear();
 
 <footer class="
 		
-				grid grid-cols-1 bg-primary lg:px-9 lg:py-1
+				grid grid-cols-1 bg-primary  mt-6
 				xs:grid-cols-2 
-				lg:grid-cols-4 lg:px-9 lg:py-1">
+				lg:grid-cols-4 lg:px-9 lg:py-1 lg:mt-0">
 
 	<div class="
 	justify-self-center

src/style/formular.css

@@ -15,14 +15,14 @@
 }
 
 .bereichs-label {
-	@apply px-4 sm:px-0 mt-6 mb-3;
+	@apply px-2 sm:px-4 sm:px-0 mt-6 mb-3;
 }
 
 .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;
+	@apply w-full bg-gray-500/10 rounded-sm xl:rounded-md border-2 border-gray-500/15 pt-6 pb-8 px-2 sm:px-4;
 
 	transform-origin: top center;
 	/*background: linear-gradient(