2024-12-04 12:50:39 +00:00
18 changed files with 1248 additions and 668 deletions
--- a/.github/workflows/dev-pipeline.yml
+++ b/.github/workflows/dev-pipeline.yml
@@ -1,5 +1,5 @@
 name: Dev Pipeline
- 
+
 on:
  pull_request:
    branches: [main]
@@ -19,7 +19,7 @@ jobs:
          port: 22
          script: |
            cd ~/online-energieausweis
-            git reset --hard HEAD
+            git reset --hard origin/main
            git clean -f -d
            git pull origin main
            git status
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
    "body-scroll-lock": "^4.0.0-beta.0",
    "buffer": "^6.0.3",
    "bun": "^1.1.34",
+    "caniuse-lite": "^1.0.30001684",
    "csvtojson": "^2.0.10",
    "express": "^4.21.1",
    "flag-icons": "^6.15.0",
@@ -44,10 +45,10 @@
    "i18next-http-backend": "^2.6.2",
    "js-cookie": "^3.0.5",
    "js-interpolate": "^1.0.1",
-    "postcss-nested": "^7.0.2",
    "katex": "^0.16.11",
    "moment": "^2.30.1",
    "moment-timezone": "^0.5.46",
+    "postcss-nested": "^7.0.2",
    "radix-svelte-icons": "^1.0.0",
    "sass": "^1.80.6",
    "svelte": "^3.59.2",
--- a/public/images/header/logo-IBC-big.svg
+++ b/public/images/header/logo-IBC-big.svg
@@ -1,30 +1,32 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="uuid-de1e7f63-0c42-470b-9cfb-9abb297e0f12" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 111.4 123.9">
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 143 163.6">
  <!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142)  -->
  <defs>
    <style>
      .st0 {
-        fill: #3d46a3;
-      }
-
-      .st0, .st1 {
-        fill-rule: evenodd;
-      }
-
-      .st2 {
-        fill: #3b459d;
+        display: none;
+        fill: #878787;
      }

      .st1 {
-        fill: #848b91;
+        fill: #445096;
+      }
+
+      .st2 {
+        fill: #c6c6c6;
      }
    </style>
  </defs>
-  <g id="uuid-82d1ab86-69f5-424d-b90e-8bdf256bee5f">
-    <path id="uuid-cd6aa3b9-6f05-490c-8ef2-3571588b94a7" class="st1" d="M99.9,93.2c3.9,1,7.7,1.9,11.5,2.9,0,3.9-.8,7.4-3.7,10.2-2.3,2.2-5.1,3.1-8.2,3.1-5.9,0-11.8,0-17.7,0-7,0-11-5.1-11.6-10.7,0-.8-.1-1.7-.1-2.5,0-13.2,0-26.3,0-39.5,0-3.6,1.1-6.8,3.6-9.4,2.1-2.2,4.8-3.2,7.8-3.2,6.1,0,12.1,0,18.1,0,7.8.1,10.9,5.4,11.6,10.8,0,.8.1,1.7.2,2.5-3.8,1-7.7,2-11.5,3,0-.3,0-.6-.1-.9-.2-2.2-1.6-3.6-3.8-3.8-.8,0-1.7,0-2.5,0-2.5,0-4.9,0-7.4,0-.5,0-1,0-1.5.1-2.1.4-3.1,1.7-3.1,4.1,0,1.5,0,3.8,0,3.8v29.9c0,3.1,3.7,4.2,3.7,4.2.3,0,.9.2,1.3.2h8.7c2.8,0,4.2-1.3,4.5-4.1,0-.2,0-.3,0-.5"/>
-    <path id="uuid-7c380c1e-6c63-46da-a6e6-562299827e44" class="st0" d="M35.6,70.1c0,.4.3.7.7.7h10.5c.3,0,.6,0,.9,0,2.1-.2,3.3-1.6,3.4-3.7,0-2.6,0-5.2,0-7.9,0-2-1.1-3.2-2.9-3.6-.4,0-.9-.1-1.3-.1-3.5,0-6.9,0-10.4,0s-.5,0-.8,0v14.7h0ZM35.6,97.2c0,.4.2.7.4.7h.2c3.7,0,7.4,0,11,0,2.4,0,3.9-1.5,3.9-3.9,0-2.5,0-5,0-7.4,0-2.8-1.4-4.2-4.2-4.2h-10.8c-.2,0-.5.3-.5.7v14.2h0ZM21.1,109.4v-10.8c0-.4.3-.7.7-.7h1.5c.4,0,.7-.3.7-.7v-41.2c0-.4-.3-.7-.7-.7h-1.5c-.4,0-.7-.3-.7-.7v-10.3c0-.4.3-.7.7-.7h28.8c7.8,0,11.4,5.3,11.8,10.9.3,4.6.2,9.2,0,13.8-.1,3.2-1.6,5.9-4.3,8.1.4.3.7.4,1,.7,2.5,2.6,3.4,5.8,3.5,9.3,0,3.9.1,7.9-.2,11.8-.3,4.2-2.1,7.7-5.9,9.8-1.5.8-3.2,1.2-4.9,1.3-10.1,0-20.1,0-30.2,0s-.2,0-.3,0"/>
-    <path id="uuid-0d8d7c4b-cae8-4bbd-9433-4cfb06ef99b2" class="st0" d="M11.8,108.7c0,.4-.3.7-.7.7H1c-.4,0-.7-.3-.7-.7V44.4c0-.4.3-.7.7-.7h10.1c.4,0,.7.3.7.7v64.3h0Z"/>
-    <path id="uuid-0c4facb8-29f9-41ca-a997-e50d301bb8a6" class="st0" d="M111.1,117.2c.2,0,.4.3.4.7v5.3c0,.4-.2.7-.4.7H.6c-.2,0-.4-.3-.4-.7v-5.3c0-.4.2-.7.4-.7h110.5Z"/>
-    <path id="uuid-e70966d7-5260-4673-943b-995e2f50ff74" class="st2" d="M54.5.4c-.5,0-1.1.2-1.7.6C35.6,11.8,18.5,22.6,1.3,33.4c-1.1.7-1.4,1.4-1,2.5h13.8c13-8.1,25.9-16.2,38.9-24.4,1.2-.8,2.2-.7,3.3,0,13.6,8.2,27.2,16.3,40.8,24.5h14.2c.3-1,.2-1.8-.9-2.4C92.3,22.6,74.3,11.8,56.2.9c-.6-.3-1.1-.5-1.7-.5"/>
+  <path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5s3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7h.1Z"/>
+  <g>
+    <path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2h0Z"/>
+    <path class="st1" d="M84.3,128c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11.2ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0ZM70,125.4v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8h0Z"/>
+    <path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/>
+    <path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/>
+    <path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/>
+    <path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/>
+    <path class="st2" d="M124.5,130.2h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7s-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7v.2Z"/>
+    <polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
+    <path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
  </g>
 </svg>
--- a/server.ts
+++ b/server.ts
@@ -1,7 +1,5 @@
 import express from 'express';
 import { handler as ssrHandler } from './dist/server/entry.mjs';
-import https from "https"
-import * as fs from "fs"


 const app = express();
@@ -13,21 +11,4 @@ app.listen(80, function() {
 	console.log('Server started on http://localhost:80');
 });

-const privateKey = fs.readFileSync('/etc/letsencrypt/live/ibcornelsen.de/privkey.pem', 'utf8');
-const certificate = fs.readFileSync('/etc/letsencrypt/live/ibcornelsen.de/cert.pem', 'utf8');
-
-if (privateKey && certificate) {
-	https.createServer({
-		key: privateKey,
-		cert: certificate
-	}, app).listen(443, function() {
-		console.log('Server started on https://localhost:443');
-	});
-} else {
-	console.error('No SSL certificate found');
-}
-
-
-
-

--- a/src/components/design/content/banner-saeule.svelte
+++ b/src/components/design/content/banner-saeule.svelte
@@ -1,171 +1,119 @@
 <script>
- import { PRICES } from "#lib/constants";
- import VApromo from "#sidebarCards/card-VA-promo.svelte";
- import BApromo from "#sidebarCards/card-BA-promo.svelte";
+	import { PRICES } from "#lib/constants";
 </script>


+<div class="mt-12 m-auto w-[90%] relative">
 <div id="saeulen">
+
    <div class="saeule">
-      <VApromo client:load /> 
-        <div class="white">
-          <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
-            <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
-              einfach
-              <br/>
-            </p>
-          </div>
-          <div class="lg:w-full flex flex-row w-full items-end h-auto">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Einfache Berechnung anhand von 3
-                  Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</p>
-            </div>
-            <div class="lg:w-1/6 w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
-          <div class="lg:w-full flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">
-                Zulässig bei Vermietung
-                <br/>
-                oder Verkauf Ihres Immobilienobjektes.
-              </p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
-          <div class="lg:w-full flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Unzulässig bei unsanierten Gebäuden vor
-                  1978 gebaut mit weniger als 5 Wohnungen.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="kreuz">✘</p>
-            </div>
-          </div>
-          <div class="lg:w-full flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Für bauliche und energetische Maßnahmen
-                  ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="kreuz">✘</p>
-            </div>
-          </div>
-          <div class="lg:w-full flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Wird nicht immer bei den Banken für die
-                  Kreditunterlagen akzeptiert.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="kreuz">✘</p>
-            </div>
-          </div>
+        <div class="blue-top">
+            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <div class="name">Verbrauchsausweis<br>Wohngebäude</div> 
+        </div>   
+
+        <div class="white box">
+            <div class="variante">einfach</div>
+            <div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als&nbsp;18&nbsp;Monate&nbsp;sein.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung oder Verkauf Ihres&nbsp;Immobilienobjektes.</div><div class="check">✔</div></div>
+			<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978 gebaut mit weniger&nbsp;als&nbsp;5&nbsp;Wohnungen.</div><div class="check-no">✘</div></div>
+			<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet. Starke Abweichungen durch&nbsp;individuelles&nbsp;Heizverhalten.</div><div class="check-no">✘</div></div>
+			<div class="services"><div>Wird nicht immer bei den Banken für die Kreditunterlagen&nbsp;akzeptiert.</div><div class="check-no">✘</div></div>
        </div>
+
        <div class="orange">
-          zur Produktübersicht
+            <div class="price">
+                ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
        </div>
+
        <div class="blue-bottom">
-            jetzt sofort Energieausweis<br>online erstellen
+            <div class="cta">jetzt online erstellen</div> 
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
        </div>
    </div>

    <div class="saeule">
-      <BApromo client:load /> 
-       
-        <div class="white">
-          <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
-            <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
-              fundiert
-              <br/>
-            </p>
-          </div>
-          <div class="lg:w-full flex flex-row w-full items-end h-auto">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Berechnung anhand der
-                  Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</p>
-            </div>
-            <div class="lg:w-1/6 w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
-          <div class="lg:w-full flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Zulässig bei Vermietung, Verkauf,
-                  Modernisierung und Neubau.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
-          <div class="lg:w-full flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Zulässig für alle Gebäude, insbesondere
-                  alte und unsanierte Objekte.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
-          <div class="lg:w-full flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Kann als Grundlage für Sanierungsvarianten
-                  sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
-          <div class="flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Objektive&nbsp; Berechnung die für die
-                  Kreditunterlagen besser geeignet ist.</p>
-            </div>
-            <div class="items-end w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
+        <div class="blue-top">
+            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
+            <div class="name">Bedarfssausweis<br>Wohngebäude</div> 
+        </div>   
+
+        <div class="white box">
+            <div class="variante">fundiert</div>
+            <div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad&nbsp;der&nbsp;Heizung.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung&nbsp;und&nbsp;Neubau.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und&nbsp;unsanierte&nbsp;Objekte.</div><div class="check">✔</div></div>
+			<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen&nbsp;werden.</div><div class="check">✔</div></div>
+			<div class="services"><div>Objektive  Berechnung die für die Kreditunterlagen besser&nbsp;geeignet&nbsp;ist.</div><div class="check">✔</div></div>
        </div>
-        
+
        <div class="orange">
-            zur Produktübersicht
+            <div class="price">
+                ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
        </div>
-        
+
        <div class="blue-bottom">
-            jetzt sofort Energieausweis<br>online erstellen
+            <div class="cta">jetzt online erstellen</div> 
        </div>
-    
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
+        </div>
+
    </div>
+
+
 </div>

-<style lang="scss">  
-#saeulen{@apply grid grid-cols-[1fr] gap-4 
-    sm:grid-cols-[1fr,1fr]
-    md:grid-cols-[1fr,1fr]
-    lg:grid-cols-[1fr,1fr]
-    xl:grid-cols-[1fr,1fr];
-.saeule{@apply grid;
-img{@apply w-1/2 justify-self-center mb-1 mt-3 min-h-[30px] }
-.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
+</div>
+
+<style lang="scss">
+
+
+
+#saeulen{@apply 
+    grid grid-cols-[1fr] gap-y-3 gap-x-6
+    lg:grid-cols-2
+    xl:grid-cols-2;
+
+
+.saeule{@apply grid grid-rows-subgrid row-span-10;
+img{@apply justify-self-center mb-1 w-[50%] }
+
+
+.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
 .name{@apply w-full}
-.name{font-size: clamp(15px, 2vh, 18px)}
-.orange{@apply bg-primary text-white text-center font-bold rounded-t-md p-2 relative}
-.ab{@apply leading-[1]}
-.mwst{@apply leading-[auto]}
-.price{font-size: clamp(15px, 5vh, 50px)}
-.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]} 
-.white{@apply border-x-[1px] border-gray-500 text-left text-black p-4}
-.services{@apply py-2}
-.services:first-child{@apply font-bold}
-.services:nth-child(even){@apply bg-white}
-.services:not(:last-child){@apply border-b-[1px] border-gray-300}
-.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
-.kreuz{@apply mb-4 text-2xl text-center text-primary mt-4 font-medium}
-.haken{@apply mb-4 text-2xl text-center text-secondary mt-4 font-medium}
-.produkttext{@apply mb-4 text-lg text-center mt-4}
+.name{font-size: clamp(15px, 3vh, 18px)}
+
+.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
+
+.variante{@apply w-fit text-black justify-self-end mr-4}
+.variante{font-size: clamp(15px, 4vh, 24px)}
+
+.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
+.services:not(:last-child){@apply border-b-[1px] border-gray-200}
+.check{@apply self-center font-bold text-green-700}
+.check-no{@apply self-center font-bold text-red-700}
+
+
+
+.orange{@apply bg-primary text-white text-center rounded-md p-4 relative shadow-saeule ring-primary ring-1}
+.price{font-size: clamp(15px, 3vh, 28px)}
+.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
+
+
+
+.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-4 shadow-saeule ring-secondary ring-1}
 }

 }
+
+
 </style>
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -1,18 +1,24 @@
 ---
 import Login from "#sidebarCards/card-login.svelte";
-
 ---


 <header>

-<div class="flex flex-row max-w-[1920px] w-full bg-white p-2">
+<div class="max-w-[1920px] w-full grid relative bg-white
+
+sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
+md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
+
+lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
+xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
+2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">



 	
 <!---
-		
+		lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
 		
 		<h2 class="text-secondary font-normal absolute
 					top-1 right-2 text-[1.1rem]
@@ -32,41 +38,50 @@ import Login from "#sidebarCards/card-login.svelte";
 					Energieausweise nach aktuellem GEG
 		</h2> -->
 		
-<div class="flex flex row mb-1 items-end w-1/4 md:w-1/2 2xl:w-4/6">
-	<div class="ml-5 mr-3">
-		<a href="/index_1">
-			<img class="w-[95px]" 
+
+
+
+
+<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[110px_auto] gap-6 pt-[0px]">
+
+	<div class="self-start justify-self-start">
+
+		<a href="/">
+			<img class="w-full absolute top-2 left-6 max-w-[94px]" 
 			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
 		</a>
 	</div>
-	<div class="pb-1.5 hidden md:block"><h1 class="text-secondary font-bold text-2xl lg:text-3xl">
-		Energieausweise online erstellen
-	</h1>
+
+	<div class="self-center justify-self-start mt-[10px]">
+	<div class="text-secondary
+	lg:[font-size:_clamp(15px,3vw,26px)]
+	lg:leading-[2rem]
+	xl:[font-size:_clamp(15px,3vw,36px)] 
+	xl:leading-[4.5rem] pt-[0px]">
+	Energieausweis online erstellen</div>
+	<div class="text-primary 
+	lg:[font-size:_clamp(15px,3vw,20px)] 
+	lg:leading-[2rem]
+	xl:[font-size:_clamp(15px,3vw,24px)] 
+	xl:leading-[0.5rem] pl-[1px]">
+	Energieausweise nach aktuellem GEG</div>
 	</div>
+
+
 </div>

-<div class="w-3/4 md:w-1/2 2xl:w-2/6 2xl:hidden"><Login client:load /></div>
-<div class="2xl:w-2/6 hidden 2xl:block 2xl:flex 2xl:mb-2.5 2xl:items-end 2xl:justify-center"><div class="2xl:pl-20"><h2 class="text-secondary font-bold text-4xl">nach GEG 2024</h2></div></div>
+<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
+		<Login client:load />
+		</div>


 </div>

 	<div class="col-start-1 col-span-3">
 		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
-					lg:h-[14px] xl:h-[18px]">
-
-			<!--- <a
-				class="header-button hidden md:block"
-				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
-				>Energieausweis erstellen</a
-			>
-			<a class="header-button hidden md:block" href="/kontakt"
-				>Kontakt</a
-			>
-			<a class="header-button hidden md:block" href="/agb">AGB</a>-->
-				
-				
-		</div>
+					lg:h-[12px] xl:h-[12px]"></div>
+		<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
+					lg:h-[0px] xl:h-[0px]"></div>			
 	</div>

 </header>
--- a/src/components/design/sidebars/cards/card-login.svelte
+++ b/src/components/design/sidebars/cards/card-login.svelte
@@ -23,47 +23,43 @@
 </script>

 <div
-	id="card-login"
-	class="box card bg-white px-2 py-2
-			lg:block lg:ring-2 lg:ring-secondary/50"
->
+	id="card-login">
+
 	<div>

 	
 		<form on:submit={login}>
-			<div class="">
-			
-				<div class="flex flex-row">
-					<input
-					class="my-1 rounded-md px-2 py-1 ring-1 w-full mr-1.5"
-					type="text"
-					placeholder="nutzer@email.com"
-					name="email"
-					bind:value={email}
-					on:focus={() => (errorHidden = true)}
-					required
-				/>
-				<input
-					class="my-1 rounded-md px-2 py-1 ring-1 w-full"
-					type="password"
-					minlength="8"
-					placeholder="********"
-					name="passwort"
-					bind:value={passwort}
-					on:focus={() => (errorHidden = true)}
-					required
-				/>
-				{#if !errorHidden}
-				<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
-					<CrossCircled size={24} />
-					<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
-				</div>
-				{/if}
+			<div class="grid grid-cols-[1fr_1fr] gap-2">
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="text"
+				placeholder="nutzer@email.com"
+				name="email"
+				bind:value={email}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="password"
+				minlength="8"
+				placeholder="********"
+				name="passwort"
+				bind:value={passwort}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			{#if !errorHidden}
+			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+				<CrossCircled size={24} />
+				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
 			</div>
-				
+			{/if}
 		
-			<div class="flex flex-row">
-			<div class="w-full text-center self-center">
+</div>
+<div class="grid grid-cols-[3fr_2fr] gap-2">
+
+			<div class="w-full text-left self-center">
 				<a
 					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
 					href="/auth/signup">Registrieren</a
@@ -74,9 +70,8 @@
 				>
 			</div>

-			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[35%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Login</button>
-			</div>
-			
+			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
+
 		</div>
 		</form>

--- a/src/components/design/sidebars/cards/card-navigation.svelte
+++ b/src/components/design/sidebars/cards/card-navigation.svelte
@@ -99,21 +99,22 @@ if(innerWidth>1024){

 <nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block"> 

+  <!-- 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="" class="nav-element-child xl:rounded-t-[.75rem] lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href="{'#'}" 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>
    {:else}
-    <a href="javascript:void(0)" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    <a href={undefined} class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    {/if}
    
    <ul class="dropdown-content energieasusweis-erstellen">
      {#if innerWidth < 1023}
-      <li><a href="">Energieausweis erstellen</a></li>
+      <li><a href="{'#'}">Energieausweis erstellen</a></li>
      {/if}
-      <li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis erstellen</a></li>
-      <li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis erstellen</a></li>
-      <li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe erstellen</a></li>
-      <li><a href="/energieausweis-erstellen/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe erstellen</a></li>
+      <li class="disc2"><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis erstellen</a></li>
+      <li class="disc2"><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis erstellen</a></li>
+      <li class="disc2"><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe erstellen</a></li>
+      <li class="disc2"><a href="/energieausweis-erstellen/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe erstellen</a></li>
    </ul>
  </div>

@@ -121,8 +122,9 @@ if(innerWidth>1024){
    <a class="no-dropdown nav-element-child" href="/welcher-energieausweis">Welcher Energieausweis?</a>
  </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="javascript:void(0)" class="nav-element-child">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+  <a href={undefined} class="nav-element-child">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    <ul class="dropdown-content verbrauchsausweis">
      {#if innerWidth < 1023}
      <li><a href="index">Verbrauchsausweis</a></li>
@@ -137,8 +139,9 @@ if(innerWidth>1024){
      <li><a href="index">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
  </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="javascript:void(0)" class="nav-element-child">Bedarfsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+  <a href={undefined} class="nav-element-child">Bedarfsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    <ul class="dropdown-content bedarfsausweis">
      {#if innerWidth < 1023}
      <li><a href="index">Bedarfsausweis</a></li>
@@ -155,15 +158,16 @@ if(innerWidth>1024){
 </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="javascript:void(0)" class="nav-element-child">Energieausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+  <a href={undefined} class="nav-element-child">Energieausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
  <ul class="dropdown-content energieausweis">
    {#if innerWidth < 1023}
    <li><a href="index">Energieausweis</a></li>
    {/if}
-    <li class=""><a href="index">Energieausweis Pflicht</a></li>
-    <li class=""><a href="index">Energieausweis Kosten</a></li>
-    <li class=""><a href="index">Energieausweis Haus</a></li>
+    <li><a href="index">Energieausweis Pflicht</a></li>
+    <li><a href="index">Energieausweis Kosten</a></li>
+    <li><a href="index">Energieausweis Haus</a></li>
  </ul>
 </div>

@@ -187,7 +191,20 @@ if(innerWidth>1024){
 </nav>


-<style>
+<style lang="scss">
+.nav-element-child{@apply before:bg-primary/50 before:rotate-[45deg];}
+.nav-element-child:hover{@apply before:bg-white;}
+
+.nav-element-child:before{
+  position:absolute;
+  content:' ';
+  top:22px;
+  left:10px;
+  width:5px;
+  height:5px;
+  border-radius:0%;
+}
+

 .dd-symbol::before{
  content:'❯';
--- a/src/components/design/sidebars/right/SidebarRight.astro
+++ b/src/components/design/sidebars/right/SidebarRight.astro
@@ -1,5 +1,4 @@
 ---
-import Login from "#sidebarCards/card-login_1.svelte";
 import Contact from "#sidebarCards/card-contact.svelte";
 import Review from "#sidebarCards/card-review.svelte";
 import VApromo from "#sidebarCards/card-VA-promo.svelte";
@@ -11,7 +10,7 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
 <div class="hidden
            xl:flex xl:flex-col xl:grow
            ">
-    <Login client:load />
+
    <Contact client:load />
    <Review client:load />
    <VAGpromo client:load />
--- a/src/layouts/AusweisLayout.astro
+++ b/src/layouts/AusweisLayout.astro
@@ -1,5 +1,6 @@
 ---
 import "../style/global.css";
+import "../style/formular.css";
 import "../../svelte-dialogs.config"
 import Header from "#header/Header.astro";
 import Footer from "#footer/Footer.astro";
@@ -87,7 +88,7 @@ const { title } = Astro.props;
 	</body>
 </html>

-<style is:global>
+<style is:global lang="scss">
 	body {
 		min-height: 100vh;
 	}
@@ -129,8 +130,16 @@ article {
 }

 	.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;
-		color: #fff !important;
+		@apply px-8 py-2 bg-secondary 
+		hover:bg-gradient-to-br from-secondary to-secondary-grad 
+		rounded-lg text-white
+		hover:shadow-lg transition-all 
+		hover:no-underline 
+		hover:ring-2
+		hover:ring-primary
+		active:bg-blue-900 text-center;
+
+
 	}

 	h3 {
@@ -149,25 +158,9 @@ article {
 		text-indent: -9999px;
 	}

-	.GRB {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}

-	.yellow-box {
-		@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-[rgba(252,234,187,0.2)];
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}
+
+

 	.GRB3 {
 		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
--- a/src/modules/Ausweise/ORG_VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/ORG_VerbrauchsausweisWohnenModule.svelte
@@ -0,0 +1,858 @@
+<script lang="ts">
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
+	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import Label from "#components/Label.svelte";
+	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
+	import moment from "moment";
+	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
+	import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
+	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
+	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
+	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
+	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
+	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
+	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
+	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
+	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
+	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
+	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
+	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
+	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
+	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
+	import { Enums } from "@ibcornelsen/database/client"
+	import Overlay from "#components/Overlay.svelte";
+	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
+	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
+	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
+		
+	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
+	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
+	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let user: BenutzerClient = {} as BenutzerClient;
+
+	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
+	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
+	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
+
+	async function spaeterWeitermachen() {
+		const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
+
+		if (result !== null) {
+			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+			// Sonst müsste er alles neu eingeben...
+			ausweis.uid = result.uid
+			gebaeude.uid = result.gebaeude_uid
+			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
+			window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
+			speichernOverlayHidden = false;
+		}
+	}
+
+	function automatischAusfüllen() {
+		gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
+		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
+		gebaeude_aufnahme_allgemein.saniert = true;
+		gebaeude_aufnahme_allgemein.einheiten = 1;
+		ausweis.ausstellgrund = "Vermietung";
+		ausweis.verbrauch_1 = 15000;
+		ausweis.verbrauch_2 = 14000;
+		ausweis.verbrauch_3 = 16000;
+		gebaeude_aufnahme_allgemein.flaeche = 152;
+		gebaeude_aufnahme_allgemein.nutzflaeche = 172;
+		ausweis.keller_beheizt = true;
+		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
+		ausweis.einheit_1 = "kWh";
+		ausweis.anteil_warmwasser_1 = 18;
+		ausweis.startdatum = moment("01.01.2019").toDate();
+		gebaeude_aufnahme_allgemein.plz = "21039";
+		gebaeude_aufnahme_allgemein.ort = "Hamburg";
+		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
+		gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";
+
+		gebaeude = gebaeude;
+		ausweis = ausweis;
+	}
+
+
+	async function ausweisAbschicken(e: SubmitEvent) {
+		if (e && e.preventDefault) e.preventDefault();
+		const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
+
+		if (result !== null) {
+			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+			// Sonst müsste er alles neu eingeben...
+			ausweis.uid = result.uid
+			gebaeude.uid = result.gebaeude_uid
+			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
+			window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
+			window.location.href = `/kundendaten?uid=${result.uid}`;
+		}
+	}
+
+	let waitOverlayHidden = true;
+	let speichernOverlayHidden = true;
+
+	$: {
+		if (gebaeude_aufnahme_allgemein.saniert 
+			&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt  === undefined
+			&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {
+
+			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
+			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
+		}
+	}
+</script>
+
+<Overlay bind:hidden={speichernOverlayHidden}>
+	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
+		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
+	</div>
+</Overlay>
+
+<Overlay bind:hidden={waitOverlayHidden}>
+	<p class="text-white font-semibold text-4xl">
+		Bitte warten sie, ihr Ausweis wird nun erstellt.
+	</p>
+</Overlay>
+
+<div class="flex flex-row gap-8 items-center mb-8">
+	<div class="flex flex-col w-full">
+		<h1>Verbrauchsausweis erstellen - 45€</h1>
+		<Progressbar progress={0} />
+	</div>
+
+	<PerformanceScore
+		bind:ausweis
+		bind:gebaeude_aufnahme_allgemein
+		bind:gebaeude
+	/>
+</div>
+
+<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+	<div class="yellow-box">
+		<div class="flex flex-row justify-between">
+			<button class="button" type="button" on:click={spaeterWeitermachen}
+				>Später Weitermachen</button
+			>
+			<div class="flex gap-4">
+				<Hilfe />
+				<button
+					on:click={automatischAusfüllen}
+					type="button"
+					class="button">Automatisch Ausfüllen</button
+				>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label>A - Prüfung der Ausweisart</Label>
+
+		<Ausweisart
+			bind:gebaeude
+			bind:gebaeude_aufnahme_allgemein
+			bind:ausweis
+		/>
+
+		<hr />
+
+		<Label
+			>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
+			Dachgeschoss</Label
+		>
+
+		<div class="GRB">
+			<!-- Strasse -->
+			<div class="form-group col-md-4">
+				<HelpLabel title="Straße, Hausnummer *">
+					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+					ein.
+				</HelpLabel>
+				<div>
+					<input
+						name="adresse"
+						data-test="adresse"
+						type="text"
+						autocomplete="off"
+						required
+						data-msg-minlength="min. 5 Zeichen"
+						data-msg-maxlength="max. 40 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.adresse}
+					/>
+				</div>
+			</div>
+
+			<!-- PLZ -->
+			<div class="form-group col-md-4 PLZ">
+				<ZipSearch
+					bind:zip={gebaeude_aufnahme_allgemein.plz}
+					bind:city={gebaeude_aufnahme_allgemein.ort}
+					name="plz"
+				/>
+			</div>
+
+			<div class="form-group col-md-4">
+				<HelpLabel title="Ort *">
+					Ort des Gebäudes wird automatisch ermittelt.
+				</HelpLabel>
+				<div>
+					<input
+						name="ort"
+						data-test="ort"
+						readonly={true}
+						bind:value={gebaeude_aufnahme_allgemein.ort}
+						type="text"
+					/>
+				</div>
+			</div>
+			<!-- Wohnfläche -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Wohnfläche m² *">
+					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
+					Dabei handelt es sich um die Wohnfläche abzüglich
+					vorhandener Flächen die sich außerhalb des Gebäudes
+					befinden. (Balkone, Terassen,etc.).
+				</HelpLabel>
+				<div>
+					<input
+						name="flaeche"
+						data-test="flaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.flaeche}
+					/>
+				</div>
+			</div>
+
+			<!-- Keller -->
+			<div class="form-group col-md-3">
+				<Label>Keller *</Label>
+				<div>
+					<select
+						name="keller"
+						data-test="keller"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.keller}
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
+							>nicht vorhanden</option
+						>
+						<option value={Enums.Heizungsstatus.UNBEHEIZT}
+							>unbeheizt</option
+						>
+						<option value={Enums.Heizungsstatus.BEHEIZT}
+							>beheizt</option
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Dachgeschoss -->
+			<div class="form-group col-md-3">
+				<Label>Dachgeschoss *</Label>
+				<div>
+					<select
+						name="dachgeschoss"
+						data-test="dachgeschoss"
+						bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
+						required
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
+							>nicht vorhanden</option
+						>
+						<option value={Enums.Heizungsstatus.UNBEHEIZT}
+							>unbeheizt</option
+						>
+						<option value={Enums.Heizungsstatus.BEHEIZT}
+							>beheizt</option
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Gesamtfläche -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gesamtfläche m²">
+					Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
+					(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
+					weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
+					beheizten Kellers). Diese Fläche wird dann im Energieausweis
+					als energetische Nutzfläche (An) ausgewiesen.
+				</HelpLabel>
+				<div>
+					<input
+						name="nutzflaeche"
+						data-test="nutzflaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
+
+		<div class="GRB">
+			<Verbrauch
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/>
+		</div>
+
+		<hr />
+
+		<Label
+			>D - Eingabe Warmwasseranteil und Verwendung von alternativen
+			Energieversorgungssystemen</Label
+		>
+
+		<div class="GRB">
+			<!-- Anteil WW enthalten -->
+			<div class="flex flex-col">
+				<div class="flex flex-row gap-4 items-center">
+					<input
+						type="checkbox"
+						class="checkbox"
+						name="warmwasser_enthalten"
+						data-test="warmwasser_enthalten"
+						bind:checked={ausweis.warmwasser_enthalten}
+					/>
+					<Label>Warmwasser im Verbrauch enthalten</Label>
+				</div>
+				<div class="flex flex-row gap-4 items-center">
+					<input
+						type="checkbox"
+						class="checkbox"
+						name="warmwasser_anteil_bekannt"
+						data-test="warmwasser_anteil_bekannt"
+						bind:checked={ausweis.warmwasser_anteil_bekannt}
+						disabled={!ausweis.warmwasser_enthalten}
+					/>
+					<Label>Anteil bekannt</Label>
+				</div>
+			</div>
+
+			<!-- Warmwasser Antel -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="% Anteil Warmwasser">
+					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
+					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
+				</HelpLabel>
+
+				<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>
+
+			<div class="form-group col-md-2">
+				<HelpLabel title="zusätzliche Heizquelle">
+					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>
+				<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>
+
+			<!-- Alternative Energieversorgungssyteme -->
+			<div class="form-group col-md-5">
+				<HelpLabel
+					title="Alternative Energieversorgungssysteme genutzt für "
+				>
+					Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
+					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
+					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
+				</HelpLabel>
+				<div class="flex flex-row gap-4">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_heizung"
+							data-test="alternative_heizung"
+							bind:checked={ausweis.alternative_heizung}
+							value="Heizung"
+						/>Heizung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_warmwasser"
+							data-test="alternative_warmwasser"
+							bind:checked={ausweis.alternative_warmwasser}
+							value="Warmwasser"
+						/>Warmwasser</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_lueftung"
+							data-test="alternative_lueftung"
+							bind:checked={ausweis.alternative_lueftung}
+							value="Lüftung"
+						/>Lüftung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_kuehlung"
+							data-test="alternative_kuehlung"
+							bind:checked={ausweis.alternative_kuehlung}
+							value="Kühlung"
+						/>Kühlung</label
+					>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label
+			>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
+			Leerstand</Label
+		>
+
+		<div class="GRB">
+			<!-- Gebäudetyp -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gebäudetyp *">
+					Bitte wählen Sie hier den Gebäudetyp aus.
+				</HelpLabel>
+				<div>
+					<select
+						name="gebaeudetyp"
+						data-test="gebaeudetyp"
+						bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
+						required
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="Einfamilienhaus">Einfamilienhaus</option>
+						<option value="Freistehendes Einfamilienhaus"
+							>Freistehendes Einfamilienhaus</option
+						>
+						<option value="Freistehendes Zweifamilienhaus"
+							>Freistehendes Zweifamilienhaus</option
+						>
+						<option value="Doppelhaushälfte"
+							>Doppelhaushälfte</option
+						>
+						<option value="Reihenendhaus">Reihenendhaus</option>
+						<option value="Reihenmittelhaus"
+							>Reihenmittelhaus</option
+						>
+						<option value="Mehrfamilienhaus"
+							>Mehrfamilienhaus</option
+						>
+						<option value="Wohn- und Geschäftshaus"
+							>Wohn- und Geschäftshaus</option
+						>
+						<option value="Atrium-Bungalow">Atrium-Bungalow</option>
+						<option value="Winkelbungalow">Winkelbungalow</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Gebäudeteil -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gebäudeteil *">
+					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>
+					<select
+						name="gebaeudeteil"
+						data-test="gebaeudeteil"
+						bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
+						required
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="Gesamtgebäude">Gesamtgebäude</option>
+						<option value="Wohnen">Wohnen</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Lüftung -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Lüftung durch *">
+					Bitte geben Sie hier ein ob über die Fenster natürlich
+					belüftet wird oder über eine Lüftungsanlage.
+				</HelpLabel>
+				<div>
+					<select
+						name="lueftung"
+						data-test="lueftung"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.lueftung}
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="Fensterlüftung">Fensterlüftung</option>
+						<option value="Schachtlüftung">Schachtlüftung</option>
+						<option value="Lüftungsanlage ohne Wärmerückgewinnung"
+							>Lüftungsanlage ohne Wärmerückgewinnung</option
+						>
+						<option value="Lüftungsanlage mit Wärmerückgewinnung"
+							>Lüftungsanlage mit Wärmerückgewinnung</option
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Lüftung -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Anlage Kühlung *">
+					Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
+					gekühlt wird.
+				</HelpLabel>
+				<div>
+					<select
+						name="kuehlung"
+						data-test="kuehlung"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.kuehlung}
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="1">vorhanden</option>
+						<option value="0">nicht vorhanden</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Leerstand -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Leerstand in %">
+					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>
+					<input
+						name="leerstand"
+						data-test="leerstand"
+						maxlength="2"
+						type="number"
+						bind:value={gebaeude_aufnahme_allgemein.leerstand}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label
+			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
+			Gebäudes</Label
+		>
+		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
+		<hr />
+		<div class="flex flex-row justify-between">
+			<Hilfe />
+			<button type="submit" class="button">Weiter</button>
+		</div>
+	</div>
+</form>
+
+<RawNotificationWrapper>
+	{#each Object.entries($notifications) as [uid, notification] (uid)}
+		<RawNotification notification={{ ...notification, uid }}>
+			{@html notification.subtext}
+		</RawNotification>
+	{/each}
+
+	{#if auditBedarfsausweisBenoetigt(ausweis, gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Bedarfsausweis benötigt!",
+				timeout: 0,
+				uid: "BEDARFSAUSWEIS",
+				dismissable: false,
+				type: "info",
+			}}
+		>
+			Sie benötigen einen Bedarfsausweis. <a href="/bedarfsausweis"
+				>Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort</a
+			>.
+		</RawNotification>
+	{/if}
+
+	{#await auditPlzNichtErkannt(gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "PLZ_NICHT_ERKANNT",
+					dismissable: false,
+					type: "warning",
+				}}
+			>
+				Die Postleitzahl konnte nicht zugeordnet werden. Bitte prüfen
+				Sie die Eingabe. Sollte die Postleitzahl korrekt eingegeben
+				sein, werden wir den Ort händisch zuordnen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
+					gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
+				},
+				type: "warning",
+			}}
+		>
+			Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
+			wurde. Sind sie sich sicher, dass das stimmt?
+		</RawNotification>
+	{/if}
+
+	{#if auditHeizungJuengerDreiJahre(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_JUENGER_DREI_JAHRE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Ihre Heizungsanlage ist jünger als 3 Jahre. Für den
+			Verbrauchsausweis müssen Sie mindestens 3 Verbrauchsjahre eingeben
+			die den aktuellen Stand des Gebäudes abbilden. Ein Verbrauchsausweis
+			ist daher nicht möglich. Bitte klicken Sie
+			<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den Bedarfsausweis
+			zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#if auditZeitraumAktuell(ausweis, gebaeude)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "ZEITRAUM_AKTUELL",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.ZEITRAUM_AKTUELL);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Verbrauchszeiträume sind nicht aktuell genug. Das Ende des
+			letzten Verbrauchszeitraumes darf nicht mehr als 18 Monate
+			zurückliegen. Ein Verbrauchsausweis ist mit diesen Zeiträumen daher
+			nicht möglich. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um
+			zum Eingabeformular für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#await auditKlimaFaktoren(ausweis, gebaeude) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "KLIMA_FAKTOREN",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.KLIMA_FAKTOREN);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Verbrauchszeiträume sind zu aktuell und es liegen noch keine
+				Klimafaktoren dazu vor. Bitte verschieben Sie die
+				Verbrauchszeiträume 1 Jahr nach hinten. Wenn das nicht möglich
+				ist, klicken Sie
+				<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den
+				Bedarfsausweis zu gelangen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnFlaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHN_FLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHN_FLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche ist viel zu klein. Bitte überprüfen Sie Ihre Eingabe
+			nochmal und stellen sicher, daß sich Ihre Angaben auf das gesamte
+			Gebäude beziehen.
+		</RawNotification>
+	{/if}
+
+	{#if auditWarmWasser(ausweis)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WARM_WASSER",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WARM_WASSER);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
+			scheint nicht ganz im Rahmen zu liegen.
+		</RawNotification>
+	{/if}
+
+	{#if auditLeerStand(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "LEER_STAND",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.LEER_STAND);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bei Leerstand größer als 30% darf kein Verbrauchsausweis ausgestellt
+			werden. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um zum Eingabeformular
+			für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+	
+	{#if auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein).length > 0}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "VERBRAUCH_ABWEICHUNG",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(
+				ausweis,
+				gebaeude_aufnahme_allgemein,
+			)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein)[1]} beträgt mehr
+			als 30% und sie haben keinen Leerstand angegeben. Sind sie sich sicher,
+			dass das stimmt?
+		</RawNotification>
+	{/if}
+
+	{#await auditEndEnergie(ausweis, gebaeude, gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "END_ENERGIE",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.END_ENERGIE);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Endenergie liegt außerhalb des normalen Rahmens. Bitte
+				nochmal überprüfen. Bei Passivhäusern oder ganz alten
+				unsanierten Gebäuden ist so eine Abweichung durchaus möglich.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnflaecheGroesserGesamtflaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche darf nicht größer als die Nutzfläche sein.
+		</RawNotification>
+	{/if}
+</RawNotificationWrapper>
+
+<style>
+	:global(input[type="number"]),
+	:global(input[type="text"]) {
+		@apply input input-bordered py-1.5 px-2 h-auto;
+	}
+
+	:global(input[type="number"]:disabled) {
+		@apply bg-gray-200 border border-gray-300;
+	}
+
+	:global(.linked) {
+		@apply border-2 border-red-400;
+	}
+</style>
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -119,7 +119,7 @@
 	</p>
 </Overlay>

-<div class="flex flex-row gap-8 items-center mb-8">
+<!-- <div class="flex flex-row gap-8 items-center mb-8">
 	<div class="flex flex-col w-full">
 		<h1>Verbrauchsausweis erstellen - 45€</h1>
 		<Progressbar progress={0} />
@@ -130,10 +130,12 @@
 		bind:gebaeude_aufnahme_allgemein
 		bind:gebaeude
 	/>
-</div>
+</div>-->

 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
-	<div class="yellow-box">
+
+	<div id="formular-box">
+		
 		<div class="flex flex-row justify-between">
 			<button class="button" type="button" on:click={spaeterWeitermachen}
 				>Später Weitermachen</button
@@ -307,285 +309,6 @@

 		<hr />

-		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
-
-		<div class="GRB">
-			<Verbrauch
-				bind:gebaeude
-				bind:gebaeude_aufnahme_allgemein
-				bind:ausweis
-			/>
-		</div>
-
-		<hr />
-
-		<Label
-			>D - Eingabe Warmwasseranteil und Verwendung von alternativen
-			Energieversorgungssystemen</Label
-		>
-
-		<div class="GRB">
-			<!-- Anteil WW enthalten -->
-			<div class="flex flex-col">
-				<div class="flex flex-row gap-4 items-center">
-					<input
-						type="checkbox"
-						class="checkbox"
-						name="warmwasser_enthalten"
-						data-test="warmwasser_enthalten"
-						bind:checked={ausweis.warmwasser_enthalten}
-					/>
-					<Label>Warmwasser im Verbrauch enthalten</Label>
-				</div>
-				<div class="flex flex-row gap-4 items-center">
-					<input
-						type="checkbox"
-						class="checkbox"
-						name="warmwasser_anteil_bekannt"
-						data-test="warmwasser_anteil_bekannt"
-						bind:checked={ausweis.warmwasser_anteil_bekannt}
-						disabled={!ausweis.warmwasser_enthalten}
-					/>
-					<Label>Anteil bekannt</Label>
-				</div>
-			</div>
-
-			<!-- Warmwasser Antel -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="% Anteil Warmwasser">
-					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
-					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
-				</HelpLabel>
-
-				<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>
-
-			<div class="form-group col-md-2">
-				<HelpLabel title="zusätzliche Heizquelle">
-					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>
-				<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>
-
-			<!-- Alternative Energieversorgungssyteme -->
-			<div class="form-group col-md-5">
-				<HelpLabel
-					title="Alternative Energieversorgungssysteme genutzt für "
-				>
-					Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
-					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
-					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
-				</HelpLabel>
-				<div class="flex flex-row gap-4">
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_heizung"
-							data-test="alternative_heizung"
-							bind:checked={ausweis.alternative_heizung}
-							value="Heizung"
-						/>Heizung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_warmwasser"
-							data-test="alternative_warmwasser"
-							bind:checked={ausweis.alternative_warmwasser}
-							value="Warmwasser"
-						/>Warmwasser</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_lueftung"
-							data-test="alternative_lueftung"
-							bind:checked={ausweis.alternative_lueftung}
-							value="Lüftung"
-						/>Lüftung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_kuehlung"
-							data-test="alternative_kuehlung"
-							bind:checked={ausweis.alternative_kuehlung}
-							value="Kühlung"
-						/>Kühlung</label
-					>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-
-		<Label
-			>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
-			Leerstand</Label
-		>
-
-		<div class="GRB">
-			<!-- Gebäudetyp -->
-			<div class="form-group col-md-3">
-				<HelpLabel title="Gebäudetyp *">
-					Bitte wählen Sie hier den Gebäudetyp aus.
-				</HelpLabel>
-				<div>
-					<select
-						name="gebaeudetyp"
-						data-test="gebaeudetyp"
-						bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
-						required
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="Einfamilienhaus">Einfamilienhaus</option>
-						<option value="Freistehendes Einfamilienhaus"
-							>Freistehendes Einfamilienhaus</option
-						>
-						<option value="Freistehendes Zweifamilienhaus"
-							>Freistehendes Zweifamilienhaus</option
-						>
-						<option value="Doppelhaushälfte"
-							>Doppelhaushälfte</option
-						>
-						<option value="Reihenendhaus">Reihenendhaus</option>
-						<option value="Reihenmittelhaus"
-							>Reihenmittelhaus</option
-						>
-						<option value="Mehrfamilienhaus"
-							>Mehrfamilienhaus</option
-						>
-						<option value="Wohn- und Geschäftshaus"
-							>Wohn- und Geschäftshaus</option
-						>
-						<option value="Atrium-Bungalow">Atrium-Bungalow</option>
-						<option value="Winkelbungalow">Winkelbungalow</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Gebäudeteil -->
-			<div class="form-group col-md-3">
-				<HelpLabel title="Gebäudeteil *">
-					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>
-					<select
-						name="gebaeudeteil"
-						data-test="gebaeudeteil"
-						bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
-						required
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="Gesamtgebäude">Gesamtgebäude</option>
-						<option value="Wohnen">Wohnen</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Lüftung -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Lüftung durch *">
-					Bitte geben Sie hier ein ob über die Fenster natürlich
-					belüftet wird oder über eine Lüftungsanlage.
-				</HelpLabel>
-				<div>
-					<select
-						name="lueftung"
-						data-test="lueftung"
-						required
-						bind:value={gebaeude_aufnahme_allgemein.lueftung}
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="Fensterlüftung">Fensterlüftung</option>
-						<option value="Schachtlüftung">Schachtlüftung</option>
-						<option value="Lüftungsanlage ohne Wärmerückgewinnung"
-							>Lüftungsanlage ohne Wärmerückgewinnung</option
-						>
-						<option value="Lüftungsanlage mit Wärmerückgewinnung"
-							>Lüftungsanlage mit Wärmerückgewinnung</option
-						>
-					</select>
-				</div>
-			</div>
-
-			<!-- Lüftung -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Anlage Kühlung *">
-					Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
-					gekühlt wird.
-				</HelpLabel>
-				<div>
-					<select
-						name="kuehlung"
-						data-test="kuehlung"
-						required
-						bind:value={gebaeude_aufnahme_allgemein.kuehlung}
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="1">vorhanden</option>
-						<option value="0">nicht vorhanden</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Leerstand -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Leerstand in %">
-					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>
-					<input
-						name="leerstand"
-						data-test="leerstand"
-						maxlength="2"
-						type="number"
-						bind:value={gebaeude_aufnahme_allgemein.leerstand}
-					/>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-
-		<Label
-			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
-			Gebäudes</Label
-		>
-		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
-		<hr />
-		<div class="flex flex-row justify-between">
-			<Hilfe />
-			<button type="submit" class="button">Weiter</button>
-		</div>
 	</div>
 </form>

@@ -843,16 +566,4 @@
 </RawNotificationWrapper>

 <style>
-	:global(input[type="number"]),
-	:global(input[type="text"]) {
-		@apply input input-bordered py-1.5 px-2 h-auto;
-	}
-
-	:global(input[type="number"]:disabled) {
-		@apply bg-gray-200 border border-gray-300;
-	}
-
-	:global(.linked) {
-		@apply border-2 border-red-400;
-	}
 </style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,8 +5,10 @@ import BannerPrice from "#content/banner-saeule.svelte";
 ---

 <Layout title="Energieausweis online erstellen - Online Energieausweis">
-	<h1 class="md:hidden">Energieausweis online erstellen</h1>
-	<BannerPrice client:load />
+
+	<h1>Unsere Ausweise im Detail:</h1>
+
+	<!-- <BannerPrice client:load /> -->
 </Layout>


--- a/src/pages/index_1.astro
+++ b/src/pages/index_1.astro
@@ -6,7 +6,7 @@ import BannerPrice from "#content/banner-saeule.svelte";

 <Layout title="Energieausweis online erstellen - Online Energieausweis">
 	<h1>Energieausweis online erstellen</h1>
-	<BannerPrice client:load />
+	<!-- <BannerPrice client:load /> -->
 </Layout>


--- a/src/style/formular.css
+++ b/src/style/formular.css
@@ -0,0 +1,41 @@
+
+
+.Phase_und_Skala{grid-area:phase_und_skala;}
+.Bereich_A{grid-area:a}
+.Bereich_B{grid-area:b}
+
+#formular-box{
+    @apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box;
+    /* background: linear-gradient(
+        135deg,
+        rgba(252, 234, 187, 1) 0%,
+        rgba(253, 235, 189, 1) 52%,
+        rgba(251, 223, 147, 1) 100%
+    ); */
+}
+
+
+.GRB {
+    @apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
+    /* background: linear-gradient(
+        135deg,
+        rgba(252, 234, 187, 1) 0%,
+        rgba(253, 235, 189, 1) 52%,
+        rgba(251, 223, 147, 1) 100%
+    ); */
+}
+
+/*
+	:global(input[type="number"]),
+	:global(input[type="text"]) {
+		@apply input input-bordered py-1.5 px-2 h-auto;
+	}
+
+	:global(input[type="number"]:disabled) {
+		@apply bg-gray-200 border border-gray-300;
+	}
+
+	:global(.linked) {
+		@apply border-2 border-red-400;
+	}
+		*/
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -104,7 +104,7 @@ article {
 }

 .nav-element:hover > .dropdown-content{ 
-	@apply 			lg:visible lg:opacity-100 lg:block lg:ml-[2px]
+	@apply 			lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
 }

 .nav-element:hover:first-child > .nav-element-child{
@@ -129,7 +129,7 @@ article {
 li 		{@apply 	text-sm  bg-white flex
 					xl:text-lg}

-li a	{@apply 	w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white bg-secondary
+li a	{@apply 	w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
 					lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary		
 	   				xl:text-lg}

--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,6 +1,5 @@
 import { vitePreprocess } from "@astrojs/svelte";
 import preprocess from "svelte-preprocess";
-
 export default {
 	preprocess: [vitePreprocess(), preprocess()],
 };
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -3,7 +3,7 @@ module.exports = {
 	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", "./node_modules/@ibcornelsen/ui/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
 	darkMode: "class",
 	plugins: 
-	[require("daisyui"), 
+	[
 	require("@tailwindcss/typography")],
 	important: true,
 	theme: {
@@ -11,14 +11,34 @@ module.exports = {
 			screens: {
 				xs: '480px'
 			},
+			content: {
+				'nav-disc': ' ',
+			  },

 			colors: {
+				'primary': '#ff7d26',
+				'primary-grad': '#ff7d26',
+				'primary-focus': '#ec6a13',
+				'primary-content': '#ffffff',
+
+				'secondary': '#444f94',
+				'secondary-grad': '#546AB2',
+				'secondary-focus': '#2f397f',
+				'secondary-content': '#ffffff',
+
+				'base-200': '#f9fafb',
+				'base-content': '#1e2734',
+				'box-heading': '#3A4AB5',
+
+				"formular-box": "rgba(252,234,187,0.2)",
+
 				"pdf-yellow-bright": "#f3cb00",
 				"pdf-yellow-light": "#fff6ca",
-				"box-heading": 'var(--box-heading)'
+
 			},
 			boxShadow: {
-				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
+				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
+				'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
 			  },
 			
 			gridTemplateColumns: {
@@ -37,104 +57,102 @@ module.exports = {
 			  }
 		},
 	},
-	daisyui: {
-		themes: [{
-			light: {
-				'primary': '#ff7d26',
-				'primary-focus': '#ec6a13',
-				'primary-content': '#ffffff',
+	//yui: {
+	//themes: [{
+	//	light: {
+	//		'primary': '#ff7d26',
+	//		'primary-focus': '#ec6a13',
+	//		'primary-content': '#ffffff',

-				'secondary': '#444f94',
-				'secondary-focus': '#2f397f',
-				'secondary-content': '#ffffff',
+	//		'secondary': '#444f94',
+	//		'secondary-focus': '#2f397f',
+	//		'secondary-content': '#ffffff',

-				'--box-heading': '#3A4AB5',
+	//		'accent': '#7b37cd',
+	//		'accent-focus': '#5f25a7',
+	//		'accent-content': '#ffffff',

-				'accent': '#7b37cd',
-				'accent-focus': '#5f25a7',
-				'accent-content': '#ffffff',
+	//		'neutral': '#3b424e',
+	//		'neutral-focus': '#2a2e37',
+	//		'neutral-content': '#ffffff',

-				'neutral': '#3b424e',
-				'neutral-focus': '#2a2e37',
-				'neutral-content': '#ffffff',
+	//		'base-100': '#ffffff',
+	//		'base-200': '#f9fafb',
+	//		'base-300': '#ced3d9',
+	//		'base-content': '#1e2734',

-				'base-100': '#ffffff',
-				'base-200': '#f9fafb',
-				'base-300': '#ced3d9',
-				'base-content': '#1e2734',
+	//		'info': '#0689f4',
+	//		'success': '#04b964',
+	//		"success-content": "#ffffff",
+	//		'warning': '#f49d1a',
+	//		"warning-content": "#ffffff",
+	//		'error': '#e43f3f',
+	//		"error-content": "#ffffff",

-				'info': '#0689f4',
-				'success': '#04b964',
-				"success-content": "#ffffff",
-				'warning': '#f49d1a',
-				"warning-content": "#ffffff",
-				'error': '#e43f3f',
-				"error-content": "#ffffff",
+	//		'--rounded-box': '1rem',
+	//		'--rounded-btn': '.5rem',
+	//		'--rounded-badge': '1.9rem',

-				'--rounded-box': '1rem',
-				'--rounded-btn': '.5rem',
-				'--rounded-badge': '1.9rem',
+	//		'--animation-btn': '.25s',
+	//		'--animation-input': '.2s',

-				'--animation-btn': '.25s',
-				'--animation-input': '.2s',
+	//		'--btn-text-case': 'normal',
+	//		'--navbar-padding': '.5rem',
+	//		'--border-btn': '1px'
+	//	},
+	//	'dark': {
+	//		'primary': '#ff7d26',
+	//		'primary-focus': '#ec6a13',
+	//		'primary-content': '#ffffff',

-				'--btn-text-case': 'normal',
-				'--navbar-padding': '.5rem',
-				'--border-btn': '1px'
-			},
-			'dark': {
-				'primary': '#ff7d26',
-				'primary-focus': '#ec6a13',
-				'primary-content': '#ffffff',
+	//		'secondary': '#444f94',
+	//		'secondary-focus': '#2f397f',
+	//		'secondary-content': '#ffffff',

-				'secondary': '#444f94',
-				'secondary-focus': '#2f397f',
-				'secondary-content': '#ffffff',
+	//		'--box-heading': '#3A4AB5',

-				'--box-heading': '#3A4AB5',
+	//		'accent': '#8c45e3',
+	//		'accent-focus': '#7532c8',
+	//		'accent-content': '#ffffff',

-				'accent': '#8c45e3',
-				'accent-focus': '#7532c8',
-				'accent-content': '#ffffff',
+	//		'neutral': '#2a2e37',
+	//		'neutral-focus': '#16181d',
+	//		'neutral-content': '#ffffff',

-				'neutral': '#2a2e37',
-				'neutral-focus': '#16181d',
-				'neutral-content': '#ffffff',
+	//		'base-100': '#3b424e',
+	//		'base-200': '#2a2e37',
+	//		'base-300': '#16181d',
+	//		'base-content': '#ebecf0',

-				'base-100': '#3b424e',
-				'base-200': '#2a2e37',
-				'base-300': '#16181d',
-				'base-content': '#ebecf0',
+	//		'info': '#0689f4',
+	//		'success': '#04b964',
+	//		'warning': '#f49d1a',
+	//		"warning-content": "#ffffff",
+	//		'error': '#ff6b6b',
+	//		"error-content": "#ffffff",
+	//		"pdf-yellow-bright": "#f3cb00",
+	//		"pdf-yellow-light": "#fff6ca",

-				'info': '#0689f4',
-				'success': '#04b964',
-				'warning': '#f49d1a',
-				"warning-content": "#ffffff",
-				'error': '#ff6b6b',
-				"error-content": "#ffffff",
-				"pdf-yellow-bright": "#f3cb00",
-				"pdf-yellow-light": "#fff6ca",
+	//		'--rounded-box': '1rem',
+	//		'--rounded-btn': '.5rem',
+	//		'--rounded-badge': '1.9rem',

-				'--rounded-box': '1rem',
-				'--rounded-btn': '.5rem',
-				'--rounded-badge': '1.9rem',
+	//		'--animation-btn': '.25s',
+	//		'--animation-input': '.2s',

-				'--animation-btn': '.25s',
-				'--animation-input': '.2s',
-
-				'--btn-text-case': 'uppercase',
-				'--navbar-padding': '.5rem',
-				'--border-btn': '1px',
-			}
-		}, ],
-		darkTheme: "dark", // name of one of the included themes for dark mode
-		base: true, // applies background color and foreground color for root element by default
-		styled: true, // include daisyUI colors and design decisions for all components
-		utils: true, // adds responsive and modifier utility classes
-		prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
-		logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
-		themeRoot: ":root", // The element that receives theme color CSS variables
-	},
+	//		'--btn-text-case': 'uppercase',
+	//		'--navbar-padding': '.5rem',
+	//		'--border-btn': '1px',
+	//	}
+	//}, ],
+	//darkTheme: "dark", // name of one of the included themes for dark mode
+	//base: true, // applies background color and foreground color for root element by default
+	//styled: true, // include daisyUI colors and design decisions for all components
+	//utils: true, // adds responsive and modifier utility classes
+	//prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+	//logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+	//themeRoot: ":root", // The element that receives theme color CSS variables
+	//},
 	fontSize: {
 		sm: '0.750rem',
 		base: '1rem',