Merge pull request #326 from IBCornelsen/main

Update

Makefile

@@ -1,9 +1,9 @@
-.PHONY: dev database api online-energieausweis all prod bun-install-database bun-install-api
+.PHONY: dev database online-energieausweis all prod bun-install-database # api bun-install-api
 
 online-energieausweis:
 	bun run dev --host
 
-dev: online-energieausweis api database
+dev: database online-energieausweis # api
 
 database:
 	$(MAKE) -C ../database dev
@@ -13,19 +13,19 @@ bun-install-database:
 	bun link
 	bun install
 
-bun-install-api: bun-install-database
-	cd ../api
-	bun install
-	bun link @ibcornelsen/database
+# bun-install-api: bun-install-database
+# 	cd ../api
+# 	bun install
+# 	bun link @ibcornelsen/database
 
-api:
-	$(MAKE) -C ../api dev
+# api:
+# 	$(MAKE) -C ../api dev
 
 all:
 	mkdir -p ~/logs
 	bun run dev 2>&1 | tee ~/logs/`date '+%d-%m-%Y_%H:%M:%S'`.log
 
-prod: bun-install-api bun-install-database
+prod: bun-install-database # bun-install-api
 	mkdir -p ~/logs
 	mkdir -p ~/persistent/online-energieausweis
 	
@@ -37,11 +37,11 @@ prod: bun-install-api bun-install-database
 	fi
 	
 # Auch die API sollte bereits laufen
-	@if [ $$(pm2 pid api) -eq "0" ]; then \
-		cd ../api; \
-		$(MAKE) prod; \
-		cd ../online-energieausweis; \
-	fi
+# @if [ $$(pm2 pid api) -eq "0" ]; then \
+# 	cd ../api; \
+# 	$(MAKE) prod; \
+# 	cd ../online-energieausweis; \
+# fi
 
 	- rm -f ~/online-energieausweis/.env;
 	- touch ~/online-energieausweis/.env;

bun.lock

@@ -8,7 +8,6 @@
         "@astrojs/node": "^8.3.4",
         "@astrojs/svelte": "^2.2.0",
         "@astrojs/tailwind": "^3.1.3",
-        "@ibcornelsen/api": "link:@ibcornelsen/api",
         "@ibcornelsen/database": "link:@ibcornelsen/database",
         "@ibcornelsen/ui": "^0.0.2",
         "@mollie/api-client": "^4.1.0",
@@ -255,8 +254,6 @@
 
     "@humanwhocodes/object-schema": ["@humanwhocodes/object-schema@1.2.1", "", {}, "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="],
 
-    "@ibcornelsen/api": ["@ibcornelsen/api@link:@ibcornelsen/api", {}],
-
     "@ibcornelsen/database": ["@ibcornelsen/database@link:@ibcornelsen/database", {}],
 
     "@ibcornelsen/ui": ["@ibcornelsen/ui@0.0.2", "", { "dependencies": { "@astrojs/svelte": "^2.1.1", "cookiejs": "^2.1.2", "knex": "^2.4.2", "moment": "^2.29.4", "svelte": "^3.54.0", "svelte-preprocess": "^5.0.1", "tailwindcss": "^3.0.24", "uuid": "^9.0.0", "zod": "^3.21.4" } }, "sha512-TF29f0uY6MqxQszEySKRI5RJa1FmHCqaY5SjcIJjbI/9MjUL3tB/u9m+o7t/SpzPRNT419/HMdXSo7uOATX2Aw=="],

cypress.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
 		setupNodeEvents(on, config) {
 				on("file:preprocessor", vitePreprocessor({
 					optimizeDeps: {
-						exclude: ["@ibcornelsen/api", "@ibcornelsen/database"]
+						exclude: ["@ibcornelsen/database"]
 					},
 					resolve: {
 						alias: {

docker-compose.yml

@@ -13,7 +13,7 @@ services:
       - ./:/online-energieausweis
       - ./node_modules/@ibcornelsen/ui:/online-energieausweis/node_modules/@ibcornelsen/ui
       - ./node_modules/@ibcornelsen/database:/online-energieausweis/node_modules/@ibcornelsen/database
-      - ./node_modules/@ibcornelsen/api:/online-energieausweis/node_modules/@ibcornelsen/api
+      # - ./node_modules/@ibcornelsen/api:/online-energieausweis/node_modules/@ibcornelsen/api
       - ./node_modules/radix-svelte-icons:/online-energieausweis/node_modules/radix-svelte-icons
       - ../api/persistent:/persistent
   ibcornelsen-api:

package.json

@@ -22,7 +22,6 @@
     "@astrojs/node": "^8.3.4",
     "@astrojs/svelte": "^2.2.0",
     "@astrojs/tailwind": "^3.1.3",
-    "@ibcornelsen/api": "link:@ibcornelsen/api",
     "@ibcornelsen/database": "link:@ibcornelsen/database",
     "@ibcornelsen/ui": "^0.0.2",
     "@mollie/api-client": "^4.1.0",

public/images/immowelt/gewerbegebaeude_immowelt.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fc0;
+      }
+
+      .cls-2 {
+        fill: #222;
+      }
+    </style>
+  </defs>
+  <g id="Wellen">
+    <path class="cls-1" d="M271,66.01c-1.29,5.97-4.05,11.58-7.44,16.72-3.45,5.11-7.71,9.7-12.58,13.54-4.84,3.88-10.32,6.93-16.02,9.32-5.73,2.35-11.73,3.94-17.8,4.98-12.17,1.95-24.54,1.59-36.56-.24-12.04-1.81-23.79-5.03-35.08-9.32,11.79,2.6,23.6,4.87,35.49,6.03,5.94.54,11.89.93,17.82.81,5.93-.06,11.84-.48,17.66-1.48,11.62-1.85,22.92-5.93,32.54-12.75,4.79-3.42,9.17-7.47,12.89-12.12,3.73-4.64,6.91-9.81,9.09-15.48Z"/>
+    <path class="cls-1" d="M0,87.93c5.04-3.14,10.5-5.58,16.05-7.75,5.56-2.17,11.29-3.9,17.08-5.42,11.63-2.86,23.59-4.58,35.64-5,12.04-.44,24.14.34,36.07,2.2,5.97.92,11.88,2.16,17.74,3.6,2.92.72,5.86,1.55,8.71,2.38,2.85.83,5.61,1.64,8.41,2.4,5.59,1.59,11.21,3.07,16.84,4.41,5.62,1.39,11.28,2.59,16.93,3.66,11.31,2.11,22.72,3.52,34.02,3.34,11.25-.23,22.53-2.12,32.47-7.4,2.49-1.29,4.9-2.77,7.2-4.44,2.3-1.67,4.45-3.55,6.55-5.53,4.16-3.99,7.81-8.6,11.16-13.48-2.24,5.48-5.15,10.75-8.81,15.56-3.65,4.83-8.15,9.1-13.22,12.64-5.12,3.47-10.81,6.13-16.72,8.01-5.91,1.89-12.03,2.97-18.13,3.53-12.24,1.1-24.42.14-36.31-1.64-11.9-1.82-23.57-4.56-35.04-7.76-2.87-.81-5.75-1.67-8.55-2.51-2.79-.85-5.52-1.61-8.31-2.36-5.54-1.51-11.15-2.75-16.78-3.85-11.27-2.16-22.72-3.47-34.23-3.89-11.51-.39-23.1.02-34.61,1.56-5.77.69-11.5,1.73-17.22,2.97-2.86.62-5.7,1.32-8.52,2.12-2.84.76-5.65,1.64-8.43,2.64Z"/>
+  </g>
+  <g id="Gewerbegebaeude">
+    <path class="cls-2" d="M102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
+    <path class="cls-2" d="M254.81,65.15c-.02-6.59,0-45.44,0-45.44l-24.88-6.69v66.43s11.96-.84,24.22-12.71c.42-.41.66-.99.65-1.6Z"/>
+    <g>
+      <polygon class="cls-2" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
+      <polygon class="cls-2" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
+      <polygon class="cls-2" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
+      <polygon class="cls-2" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
+      <polygon class="cls-2" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
+      <path class="cls-2" d="M122.76,70.93c3.1.69,6.21,1.48,9.24,2.28,1.2.32,2.39.63,3.57.94l91.08.55v-5.86l-119.43-.7h-.09c5.22.81,10.49,1.66,15.63,2.79Z"/>
+    </g>
+    <g>
+      <polygon class="cls-2" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
+      <polygon class="cls-2" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
+      <path class="cls-2" d="M43.86,67.57c7.08-1.11,14.25-1.82,21.44-2.12v-5.15l-55.63,4.35.17,7.82,34.02-4.9Z"/>
+    </g>
+  </g>
+</svg>

public/images/immowelt/immowelt.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 109 32" xmlns="http://www.w3.org/2000/svg" class="css-1qno6kt"><title>immowelt Startseite</title><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#323232" d="M12.736 4.664C5.568 4.664.664 9.384.664 16.008c0 6.608 4.92 11.328 12.072 11.328h35.16c7.152 0 12.273-4.72 12.273-11.328 0-6.624-5.104-11.344-12.273-11.344z"></path><path fill="#fc0" d="M47.896 4.664c7.169 0 12.273 4.72 12.273 11.344 0 6.608-5.12 11.328-12.273 11.328h48.2c7.153 0 12.241-4.72 12.241-11.328 0-6.624-5.072-11.344-12.24-11.344z"></path><path fill="#fff" d="M12.264 7.784c-.864 0-1.536.664-1.536 1.512 0 .808.672 1.464 1.536 1.464.848 0 1.52-.672 1.52-1.464a1.513 1.513 0 0 0-1.52-1.512zm39.153 5.952c1.431 0 2.351 1.008 2.351 2.552 0 1.52-.952 2.56-2.352 2.56-1.392 0-2.344-1.04-2.344-2.56 0-1.512.952-2.552 2.344-2.552zM10.975 11.64v9.288h2.56V11.64zm9.48-.248c-1.128 0-2.096.48-2.68 1.288v-1.04h-2.4v9.288h2.56v-6.096c.328-.656 1.024-1.112 1.712-1.112.896 0 1.536.704 1.536 1.728v5.48h2.56v-6.096c.28-.656 1-1.112 1.728-1.112.896 0 1.496.704 1.496 1.728v5.48h2.56v-5.96c0-2.184-1.408-3.576-3.6-3.576-1.144 0-2.08.424-2.84 1.36-.6-.904-1.504-1.36-2.632-1.36zm15.832 0c-1.128 0-2.096.48-2.68 1.288v-1.04h-2.4v9.288h2.56v-6.096c.336-.656 1.024-1.112 1.712-1.112.896 0 1.536.704 1.536 1.728v5.48h2.56v-6.096c.28-.656 1.008-1.112 1.728-1.112.904 0 1.504.704 1.504 1.728v5.48h2.552v-5.96c0-2.184-1.408-3.576-3.6-3.576-1.144 0-2.08.424-2.84 1.36-.6-.904-1.496-1.36-2.632-1.36zm15.128 0c-2.823 0-4.904 2.08-4.904 4.896 0 2.824 2.08 4.904 4.904 4.904 2.849 0 4.912-2.064 4.912-4.904 0-2.848-2.048-4.896-4.912-4.896z"></path><path fill="#323232" d="M90.977 17.792c0 .648.28.968.863.968.249 0 .497-.056.729-.16l.312 2.128c-.456.216-1.024.32-1.625.32-1.8 0-2.887-1.072-2.887-2.888V8.608h2.608zM71.192 11.64l2.129 5.488 1.735-5.488h2.592l-3.016 9.288h-2.575l-2.177-5.816-2.135 5.816h-2.577L62.12 11.64h2.736l1.72 5.512 2.128-5.512zm28.257 6.696c-.44.28-.88.424-1.392.424-.816 0-1.288-.44-1.288-1.184v-3.664h3.16V11.64h-3.16V9.4h-2.616v2.24h-1.76v2.272h1.76v3.896c0 2.08 1.376 3.384 3.567 3.384 1.009 0 1.873-.248 2.649-.76zm-21.697-2.048c0-2.816 2.072-4.88 4.857-4.88 2.72 0 4.504 1.904 4.504 4.848 0 .32 0 .632-.033.88h-6.792c.289 1.152 1.169 1.848 2.392 1.848.92 0 1.64-.384 2.104-1.104l1.785 1.424c-.784 1.16-2.192 1.888-3.872 1.888-2.84 0-4.945-2.096-4.945-4.904zm6.857-1.016c-.208-1.072-.984-1.712-2.048-1.712-1.08 0-1.904.664-2.224 1.712z"></path><path fill="#fff" d="M96.073 28H12.736c-3.72 0-6.912-1.232-9.176-3.368C1.296 22.496 0 19.48 0 16.008c0-3.48 1.296-6.496 3.56-8.64C5.816 5.232 9.008 4 12.736 4h83.337C103.553 4 109 8.968 109 16.008 109 23.032 103.536 28 96.072 28zm0-.664H12.736c-7.152 0-12.072-4.72-12.072-11.328 0-6.624 4.904-11.344 12.072-11.344h83.337c7.168 0 12.264 4.72 12.264 11.344 0 6.608-5.112 11.328-12.264 11.328z"></path></g></svg>

public/images/immowelt/wohngebaeude_immowelt.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fc0;
+      }
+
+      .cls-2 {
+        fill: #222;
+      }
+
+      .cls-3 {
+        fill: #c6c6c6;
+      }
+    </style>
+  </defs>
+  <g id="Wellen">
+    <path class="cls-1" d="M271,66.01c-1.29,5.97-4.05,11.58-7.44,16.72-3.45,5.11-7.71,9.7-12.58,13.54-4.84,3.88-10.32,6.93-16.02,9.32-5.73,2.35-11.73,3.94-17.8,4.98-12.17,1.95-24.54,1.59-36.56-.24-12.04-1.81-23.79-5.03-35.08-9.32,11.79,2.6,23.6,4.87,35.49,6.03,5.94.54,11.89.93,17.82.81,5.93-.06,11.84-.48,17.66-1.48,11.62-1.85,22.92-5.93,32.54-12.75,4.79-3.42,9.17-7.47,12.89-12.12,3.73-4.64,6.91-9.81,9.09-15.48Z"/>
+    <path class="cls-1" d="M0,87.93c5.04-3.14,10.5-5.58,16.05-7.75,5.56-2.17,11.29-3.9,17.08-5.42,11.63-2.86,23.59-4.58,35.64-5,12.04-.44,24.14.34,36.07,2.2,5.97.92,11.88,2.16,17.74,3.6,2.92.72,5.86,1.55,8.71,2.38,2.85.83,5.61,1.64,8.41,2.4,5.59,1.59,11.21,3.07,16.84,4.41,5.62,1.39,11.28,2.59,16.93,3.66,11.31,2.11,22.72,3.52,34.02,3.34,11.25-.23,22.53-2.12,32.47-7.4,2.49-1.29,4.9-2.77,7.2-4.44,2.3-1.67,4.45-3.55,6.55-5.53,4.16-3.99,7.81-8.6,11.16-13.48-2.24,5.48-5.15,10.75-8.81,15.56-3.65,4.83-8.15,9.1-13.22,12.64-5.12,3.47-10.81,6.13-16.72,8.01-5.91,1.89-12.03,2.97-18.13,3.53-12.24,1.1-24.42.14-36.31-1.64-11.9-1.82-23.57-4.56-35.04-7.76-2.87-.81-5.75-1.67-8.55-2.51-2.79-.85-5.52-1.61-8.31-2.36-5.54-1.51-11.15-2.75-16.78-3.85-11.27-2.16-22.72-3.47-34.23-3.89-11.51-.39-23.1.02-34.61,1.56-5.77.69-11.5,1.73-17.22,2.97-2.86.62-5.7,1.32-8.52,2.12-2.84.76-5.65,1.64-8.43,2.64Z"/>
+  </g>
+  <g id="Wohngebaeude">
+    <g>
+      <path class="cls-2" d="M62.1,66.01L103.83,11.59l52.17,63.63s72.22,24.35,98.81-11.35l-26.6-38.82-27.22-4.45V0h-19.83v39.66h-7.08v-22.76L101.52,4.02l-39.42,61.99Z"/>
+      <polygon class="cls-2" points="72.53 39.06 91.66 14.16 47.37 14.16 10.07 72.88 49 19.22 72.53 39.06"/>
+      <g>
+        <rect class="cls-3" x="90.51" y="35.34" width="11.33" height="12.75"/>
+        <rect class="cls-3" x="103.26" y="35.34" width="11.33" height="12.75"/>
+        <rect class="cls-3" x="90.51" y="49.51" width="11.33" height="12.75"/>
+        <rect class="cls-3" x="103.26" y="49.51" width="11.33" height="12.75"/>
+      </g>
+      <g>
+        <rect class="cls-3" x="40.93" y="35.41" width="5.67" height="8.5"/>
+        <rect class="cls-3" x="48.02" y="35.41" width="5.67" height="8.5"/>
+        <rect class="cls-3" x="40.93" y="45.33" width="5.67" height="8.5"/>
+        <rect class="cls-3" x="48.02" y="45.33" width="5.67" height="8.5"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/astro-typesafe-api-caller.ts

@@ -8,8 +8,8 @@ export const createCaller = createCallerFactory({
     "auth/access-token": await import("../src/pages/api/auth/access-token.ts"),
     "auth/forgot-password": await import("../src/pages/api/auth/forgot-password.ts"),
     "auth/refresh-token": await import("../src/pages/api/auth/refresh-token.ts"),
-    "bedarfsausweis-wohnen": await import("../src/pages/api/bedarfsausweis-wohnen/index.ts"),
     "bilder/[uid]": await import("../src/pages/api/bilder/[uid].ts"),
+    "bedarfsausweis-wohnen": await import("../src/pages/api/bedarfsausweis-wohnen/index.ts"),
     "objekt": await import("../src/pages/api/objekt/index.ts"),
     "rechnung": await import("../src/pages/api/rechnung/index.ts"),
     "ticket": await import("../src/pages/api/ticket/index.ts"),
@@ -19,6 +19,7 @@ export const createCaller = createCallerFactory({
     "verbrauchsausweis-gewerbe": await import("../src/pages/api/verbrauchsausweis-gewerbe/index.ts"),
     "verbrauchsausweis-wohnen/[uid]": await import("../src/pages/api/verbrauchsausweis-wohnen/[uid].ts"),
     "verbrauchsausweis-wohnen": await import("../src/pages/api/verbrauchsausweis-wohnen/index.ts"),
+    "webhooks/mollie": await import("../src/pages/api/webhooks/mollie.ts"),
     "objekt/[uid]/bilder": await import("../src/pages/api/objekt/[uid]/bilder.ts"),
     "objekt/[uid]": await import("../src/pages/api/objekt/[uid]/index.ts"),
 })

src/client/lib/ausweisSpeichern.ts

@@ -1,16 +1,17 @@
 
 import { api } from "astro-typesafe-api/client"
-
 import { exclude } from "#lib/exclude.js";
 import Cookies from "js-cookie";
 import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
-import { AufnahmeClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient,  } from "#components/Ausweis/types.js";
+import { AufnahmeClient, BedarfsausweisWohnenClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient,  } from "#components/Ausweis/types.js";
+import { Enums } from "@ibcornelsen/database/client";
 
-export async function verbrauchsausweisWohnenSpeichern(
-	ausweis: VerbrauchsausweisWohnenClient,
+export async function ausweisSpeichern(
+	ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient,
 	objekt: ObjektClient,
 	aufnahme: AufnahmeClient,
-	bilder: (UploadedGebaeudeBild & { base64?: string })[]
+	bilder: (UploadedGebaeudeBild & { base64?: string })[],
+	ausweisart: Enums.Ausweisart
 ) {
 	if (objekt.uid) {
 		await api.objekt._uid.PATCH.fetch({
@@ -61,8 +62,21 @@ export async function verbrauchsausweisWohnenSpeichern(
 		aufnahme.uid = uid
 	}
 
+	let patchRoute: any;
+	let putRoute: any;
+	if (ausweisart == Enums.Ausweisart.VerbrauchsausweisWohnen) {
+		patchRoute = api["verbrauchsausweis-wohnen"]._uid.PATCH
+		putRoute = api["verbrauchsausweis-wohnen"].PUT
+	} else if (ausweisart == Enums.Ausweisart.VerbrauchsausweisGewerbe) {
+		patchRoute = api["verbrauchsausweis-gewerbe"]._uid.PATCH
+		putRoute = api["verbrauchsausweis-gewerbe"].PUT
+	} else if (ausweisart == Enums.Ausweisart.BedarfsausweisWohnen) {
+		patchRoute = api["bedarfsausweis-wohnen"]._uid.PATCH
+		putRoute = api["bedarfsausweis-wohnen"].PUT
+	}
+
 	if (ausweis.uid) {
-		await api["verbrauchsausweis-wohnen"]._uid.PATCH.fetch({
+		await patchRoute.fetch({
 			...exclude(ausweis, ["uid"])
 		}, {
 			params: {
@@ -73,7 +87,7 @@ export async function verbrauchsausweisWohnenSpeichern(
 			}
 		})
 	} else {
-		const { uid } = await api["verbrauchsausweis-wohnen"].PUT.fetch({
+		const { uid } = await putRoute.fetch({
 			ausweis,
 			uid_aufnahme: aufnahme.uid
 		}, {

src/components/AnsichtsausweisButton.svelte

@@ -1,13 +1,43 @@
 <script lang="ts">
 	import { Buffer } from "buffer";
-	import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { AufnahmeClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
+	import { Enums } from "@ibcornelsen/database/client";
 
 	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let objekt: ObjektClient;
+	export let aufnahme: AufnahmeClient;
+	export let bilder: UploadedGebaeudeBild[];
+	export let ausweisart: Enums.Ausweisart
 
-	$: base64 = Buffer.from(JSON.stringify(ausweis), "utf-8").toString("base64")
+	function openWindowWithPost(url: string, data: Record<string, any>) {
+    var form = document.createElement("form");
+    form.target = "_blank";
+    form.method = "POST";
+    form.action = url;
+    form.style.display = "none";
+
+    for (var key in data) {
+        var input = document.createElement("input");
+        input.type = "hidden";
+        input.name = key;
+        input.value = data[key];
+        form.appendChild(input);
+    }
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+}
 </script>
 
-<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/ansichtsausweis?base64={base64}">
+<button class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" on:click={() => {
+	openWindowWithPost("/pdf/ansichtsausweis", {
+		ausweis: JSON.stringify(ausweis),
+		aufnahme: JSON.stringify(aufnahme),
+		objekt: JSON.stringify(objekt),
+		bilder: JSON.stringify(bilder),
+		ausweisart
+	})
+}}>
 	<img src="/images/ausweis.webp" alt="Ausweis" />
 	<span class="text-black font-medium text-lg">Ansichtsausweis</span>
-</a>
+</button>

src/components/Ausweis/Ansprechpartner.svelte

@@ -14,27 +14,17 @@ sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 ">
 
-<!-- Anrede * 
-
+<!-- Anrede *  -->
+<!-- 
 <div class="input-standard order-3 md:order-3 xl:order-3">
 	<Inputlabel title="Anrede *"></Inputlabel>
 
     <select name="anrede" bind:value={user.anrede}>
-        <option>bitte auswählen</option>
+        <option disabled selected>bitte auswählen</option>
         <option value="Herr">Herr</option>
         <option value="Frau">Frau</option>
-        <option value="Frau">Frau</option>
     </select>
-
-		<div class="help-label">
-				<HelpLabel>
-					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>
-</div>-->
+</div> -->
 
 
 <!-- Vorname * -->

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -9,14 +9,19 @@
 	} from "@ibcornelsen/database/client";
 
 	import {
+	AufnahmeClient,
+	BedarfsausweisWohnenClient,
 		ObjektClient,
 		UploadedGebaeudeBild,
+		VerbrauchsausweisGewerbeClient,
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
 
-	export let ausweis: VerbrauchsausweisWohnenClient;
-	export let gebaeude: ObjektClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
+	export let aufnahme: AufnahmeClient;
+	export let objekt: ObjektClient;
 	export let images: UploadedGebaeudeBild[] = [];
+	export let ausweisart: Enums.Ausweisart;
 </script>
 
 <div class="grid grid-cols-2 gap-x-6 mt-6">
@@ -29,7 +34,7 @@
 				kategorie={Enums.BilderKategorie.Gebaeude}
 				max={1}
 				min={1}
-				bind:gebaeude
+				bind:objekt
 				bind:images
 				bind:ausweis
 			>
@@ -55,9 +60,9 @@
 
 		</div>
 
-		<div class="flex flex-row gap-4 mt-4">
-			<AnsichtsausweisButton {ausweis} />
-			<DatenblattButton {ausweis} />
+		<div class="grid 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/Ausweisart.svelte

@@ -70,7 +70,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			required
 			bind:value={aufnahme.gebaeudetyp}
 		>
-			<option disabled selected value={false}>Bitte auswählen</option>
+			<option disabled selected>Bitte auswählen</option>
 
 			{#if ausweisart=="VerbrauchsausweisWohnen"}
 			<option value="Einfamilienhaus">Einfamilienhaus</option>

src/components/Ausweis/ButtonWeiterHilfe.svelte

@@ -3,17 +3,21 @@
 	import Hilfe from "#components/Ausweis/Hilfe.svelte";
 	import {
 		AufnahmeClient,
+		BedarfsausweisWohnenClient,
 		BenutzerClient,
 		ObjektClient,
 		UploadedGebaeudeBild,
+		VerbrauchsausweisGewerbeClient,
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
+	import { Enums } from "@ibcornelsen/database/client";
 
-	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
 	export let bilder: UploadedGebaeudeBild[];
 	export let user: BenutzerClient;
 	export let objekt: ObjektClient;
 	export let aufnahme: AufnahmeClient;
+	export let ausweisart: Enums.Ausweisart
 
 	export let spaeterWeitermachen;
 </script>
@@ -36,6 +40,7 @@
 			bind:user
 			bind:objekt
 			bind:aufnahme
+			{ausweisart}
 		></AusweisWeiter>
 	</div>
 </div>

src/components/Ausweis/ButtonZurueckSpeichernKaufabschluss.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-</script>
-
-<div
-	class="w-full grid grid-cols-[min-content_1fr_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
->
-	<button class="button justify-self-start">Zurück</button>
-
-	<div></div>
-
-	<button class="button">Speichern</button>
-
-	<button class="button">kostenpflichtig bestellen</button>
-</div>

src/components/Ausweis/DaemmungImage.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
+	import { Enums } from "@ibcornelsen/database/client";
+	import { BedarfsausweisWohnenClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: ObjektClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
+	export let objekt: ObjektClient;
 </script>
 
 <div class="grid grid-cols-2 gap-x-6 mt-6">
@@ -66,7 +66,7 @@
 		kategorie={Enums.BilderKategorie.Daemmung} 
 		bind:images 
 		bind:ausweis 
-		bind:gebaeude
+		bind:objekt
 		>
 	TEXT FEHLT
 	</ImageGrid>

src/components/Ausweis/FensterImage.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
+	import { Enums } from "@ibcornelsen/database/client";
+	import { BedarfsausweisWohnenClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: ObjektClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
+	export let objekt: ObjektClient;
 </script>
 
 <div class="grid grid-cols-2 gap-x-6 mt-6">
@@ -62,7 +62,7 @@
 		kategorie={Enums.BilderKategorie.Fenster} 
 		bind:images 
 		bind:ausweis 
-		bind:gebaeude
+		bind:objekt
 		>
 		TEXT FEHLT
 	</ImageGrid>

src/components/Ausweis/HeizungImage.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
+	import { Enums } from "@ibcornelsen/database/client";
+	import { BedarfsausweisWohnenClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
 	export let gebaeude: ObjektClient;
 </script>
 
@@ -57,7 +57,7 @@
 		kategorie={Enums.BilderKategorie.Heizung} 
 		max={4} 
 		min={1} 
-		bind:gebaeude 
+		bind:objekt={gebaeude} 
 		bind:images 
 		bind:ausweis 
 		>

src/components/Ausweis/PerformanceScore.svelte

@@ -9,12 +9,20 @@
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
 	import ThickArrowUp from "radix-svelte-icons/src/lib/icons/ThickArrowUp.svelte";
+	import { Enums } from "@ibcornelsen/database/client";
+	import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016 } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016.js";
 
-	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
 	export let aufnahme: AufnahmeClient;
 	export let objekt: ObjektClient;
+	export let ausweisart: Enums.Ausweisart;
 
-	let maxPerformance = 250;
+	let maxPerformance = {
+		[Enums.Ausweisart.VerbrauchsausweisGewerbe]: 1000,
+		[Enums.Ausweisart.VerbrauchsausweisWohnen]: 250,
+		[Enums.Ausweisart.BedarfsausweisWohnen]: 250,
+		[Enums.Ausweisart.BedarfsausweisGewerbe]: 250
+	}[ausweisart];
 
 	/**
 	 * We use linear interpolation to scale the value between the given boundaries.
@@ -54,13 +62,12 @@
 	let translation_2 = 0;
 	$: {
 		(async () => {
-			const result = await endEnergieVerbrauchVerbrauchsausweis_2016({
-				...ausweis,
-				aufnahme: {
-					...aufnahme,
-					objekt: objekt,
-				},
-			});
+			let result;
+			if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen) {
+				result = await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt);
+			} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
+				result = await endEnergieVerbrauchVerbrauchsausweisGewerbe_2016(ausweis, aufnahme, objekt);
+			}
 
 			if (!result) {
 				return;
@@ -77,7 +84,11 @@
 	}
 </script>
 <div class="self-center relative">
-	<img id="skalaImage" class="w-full" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
+	{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
+		<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-wohnen.png" alt="Energieeffizienz Skala" />	
+	{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
+		<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-gewerbe.png" alt="Energieeffizienz Skala" />
+	{/if}
 	<ThickArrowDown
 		size={28}
 		class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"

src/components/Ausweis/Rechnungsadresse.svelte

@@ -6,19 +6,7 @@
 	import { BenutzerClient, RechnungClient } from "./types.js";
 
 	export let user: BenutzerClient;
-
-	let rechnung: RechnungClient = {
-		email: user.email,
-		empfaenger: user.vorname + " " + user.name,
-		strasse: user.adresse,
-		plz: user.plz,
-		ort: user.ort,
-		versand_empfaenger: user.vorname + " " + user.name,
-		versand_strasse: user.adresse,
-		versand_plz: user.plz,
-		versand_ort: user.ort,
-		telefon: user.telefon,
-	};
+	export let rechnung: Partial<RechnungClient>;
 
 
 

src/components/Ausweis/SanierungszustandFensterTueren.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
-        import HelpLabel from "#components/labels/HelpLabel.svelte";
-        import Inputlabel from "#components/labels/InputLabel.svelte";
+	import HelpLabel from "#components/labels/HelpLabel.svelte";
+	import Inputlabel from "#components/labels/InputLabel.svelte";
 
-        import FensterImage from "./FensterImage.svelte";
+	import FensterImage from "./FensterImage.svelte";
 
-        //import Label from "../Label.svelte";
+	//import Label from "../Label.svelte";
 
-        import {
-        AufnahmeClient,
-            ObjektClient,
-            UploadedGebaeudeBild,
-            VerbrauchsausweisWohnenClient,
-        } from "./types.js";
-        import { boolean } from "astro:schema";
-            import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
+	import {
+		AufnahmeClient,
+		ObjektClient,
+		UploadedGebaeudeBild,
+		VerbrauchsausweisGewerbeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./types.js";
+	import { boolean } from "astro:schema";
+	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";
 
-        export let gebaeude: ObjektClient;
-        export let aufnahme: AufnahmeClient;
-        export let ausweis: VerbrauchsausweisWohnenClient
-        export let images: UploadedGebaeudeBild[];
+	export let objekt: ObjektClient;
+	export let aufnahme: AufnahmeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient;
+	export let images: UploadedGebaeudeBild[];
+</script>
 
-    
-</script>
-    
+<div
+	id="sanierungszustand"
+	class="bereich-box grid
     grid-cols-1 gap-x-4 gap-y-2
     
     sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
@@ -30,25 +32,74 @@
     
     xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
     2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
-    2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
+    "
+>
+	<SanierungsOption
+		label="Einfachglas"
+		name="einfach_verglasung"
+		help=""
+		value="EG"
+		bind:checked={aufnahme.einfach_verglasung}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Doppelverglasung"
+		name="doppel_verglasung"
+		help=""
+		value="DF"
+		bind:checked={aufnahme.doppel_verglasung}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Dreifachverglasung"
+		name="dreifach_verglasung"
+		help=""
+		value="PHF"
+		bind:checked={aufnahme.dreifach_verglasung}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Isolierverglasung"
+		name="isolier_verglasung"
+		help=""
+		value="IVG"
+		bind:checked={aufnahme.isolier_verglasung}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Alle Fenster dicht"
+		name="fenster_dicht"
+		help=""
+		value="FD"
+		bind:checked={aufnahme.fenster_dicht}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Fenster teilweise undicht"
+		name="fenster_teilweise_undicht"
+		help=""
+		value="FTUD"
+		bind:checked={aufnahme.fenster_teilweise_undicht}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Rollladenkästen gedämmt, luftdicht"
+		name="rolllaeden_kaesten_gedaemmt"
+		help=""
+		value="TUD"
+		bind:checked={aufnahme.rolllaeden_kaesten_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Alle Türen dicht"
+		name="tueren_dicht"
+		help=""
+		value="TD"
+		bind:checked={aufnahme.tueren_dicht}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Türen teilweise undicht"
+		name="tueren_undicht"
+		help=""
+		value="TUD"
+		bind:checked={aufnahme.tueren_undicht}
+	></SanierungsOption>
+</div>
 
-    
-    <SanierungsOption label="Einfachglas" name="einfach_verglasung" help="" value="EG" bind:checked={aufnahme.einfach_verglasung}></SanierungsOption>
-    <SanierungsOption label="Doppelverglasung" name="doppel_verglasung" help="" value="DF" bind:checked={aufnahme.doppel_verglasung}></SanierungsOption>
-    <SanierungsOption label="Dreifachverglasung" name="dreifach_verglasung" help="" value="PHF" bind:checked={aufnahme.dreifach_verglasung}></SanierungsOption>
-    <SanierungsOption label="Isolierverglasung" name="isolier_verglasung" help="" value="IVG" bind:checked={aufnahme.isolier_verglasung}></SanierungsOption>
-    <SanierungsOption label="Alle Fenster dicht" name="fenster_dicht" help="" value="FD" bind:checked={aufnahme.fenster_dicht}></SanierungsOption>
-    <SanierungsOption label="Fenster teilweise undicht" name="fenster_teilweise_undicht" help="" value="FTUD" bind:checked={aufnahme.fenster_teilweise_undicht}></SanierungsOption>
-    <SanierungsOption label="Rollladenkästen gedämmt, luftdicht" name="rolllaeden_kaesten_gedaemmt" help="" value="TUD" bind:checked={aufnahme.rolllaeden_kaesten_gedaemmt}></SanierungsOption>
-    <SanierungsOption label="Alle Türen dicht" name="tueren_dicht" help="" value="TD" bind:checked={aufnahme.tueren_dicht}></SanierungsOption>
-    <SanierungsOption label="Türen teilweise undicht" name="tueren_undicht" help="" value="TUD" bind:checked={aufnahme.tueren_undicht}></SanierungsOption>
-    
-    </div>
-    
-    <FensterImage bind:images bind:ausweis bind:gebaeude />
-    
-    <style lang="postcss">
-    
+<FensterImage bind:images bind:ausweis bind:objekt />
 
 <!--
             Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
@@ -162,4 +213,5 @@
     
     -->
 
-    
+<style lang="postcss">
+</style>

src/components/Ausweis/SanierungszustandHeizungsanlage.svelte

@@ -10,14 +10,15 @@
 		AufnahmeClient,
 		ObjektClient,
 		UploadedGebaeudeBild,
+		VerbrauchsausweisGewerbeClient,
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
 	import { boolean } from "astro:schema";
 	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";
 
-	export let gebaeude: ObjektClient;
+	export let objekt: ObjektClient;
 	export let aufnahme: AufnahmeClient;
-	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient;
 	export let images: UploadedGebaeudeBild[];
 </script>
 
@@ -119,7 +120,7 @@
 	></SanierungsOption>
 </div>
 
-<HeizungImage bind:images bind:ausweis bind:gebaeude />
+<HeizungImage bind:images bind:ausweis bind:gebaeude={objekt} />
 
 <!--
     

src/components/Ausweis/SanierungszustandWaermedammung.svelte

@@ -1,29 +1,30 @@
 <script lang="ts">
-        import HelpLabel from "#components/labels/HelpLabel.svelte";
-        import Inputlabel from "#components/labels/InputLabel.svelte";
+	import DaemmungImage from "./DaemmungImage.svelte";
 
-        import DaemmungImage from "./DaemmungImage.svelte";
+	//import Label from "../Label.svelte";
 
+	import {
+		AufnahmeClient,
+		BedarfsausweisWohnenClient,
+		ObjektClient,
+		UploadedGebaeudeBild,
+		VerbrauchsausweisGewerbeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./types.js";
+	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";
 
-        //import Label from "../Label.svelte";
+	export let objekt: ObjektClient;
+	export let aufnahme: AufnahmeClient;
+	export let ausweis:
+		| VerbrauchsausweisWohnenClient
+		| VerbrauchsausweisGewerbeClient
+		| BedarfsausweisWohnenClient;
+	export let images: UploadedGebaeudeBild[];
+</script>
 
-        import {
-        AufnahmeClient,
-            ObjektClient,
-            UploadedGebaeudeBild,
-            VerbrauchsausweisWohnenClient,
-        } from "./types.js";
-        import { boolean } from "astro:schema";
-            import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
-    
-        export let gebaeude: ObjektClient;
-        export let aufnahme: AufnahmeClient;
-        export let ausweis: VerbrauchsausweisWohnenClient
-        export let images: UploadedGebaeudeBild[];
-    
-    
-</script>
-    
+<div
+	id="sanierungszustand"
+	class="bereich-box grid
     grid-cols-1 gap-x-4 gap-y-2
     
     sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
@@ -31,21 +32,53 @@
     
     xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
     2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
-    2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
+    "
+>
+	<SanierungsOption
+		label="Außenwand gedämmt"
+		name="aussenwand_gedaemmt"
+		help=""
+		value="AWD"
+		bind:checked={aufnahme.aussenwand_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Kelleraußenwand gedämmt"
+		name="keller_wand_gedaemmt"
+		help=""
+		value="KWD"
+		bind:checked={aufnahme.keller_wand_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Kellerdecke gedämmt"
+		name="keller_decke_gedaemmt"
+		help=""
+		value="KDD"
+		bind:checked={aufnahme.keller_decke_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Dachgeschoss gedämmt"
+		name="dachgeschoss_gedaemmt"
+		help=""
+		value="DGD"
+		bind:checked={aufnahme.dachgeschoss_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Oberste Geschossdecke gedämmt"
+		name="oberste_geschossdecke_gedaemmt"
+		help=""
+		value="DGD"
+		bind:checked={aufnahme.oberste_geschossdecke_gedaemmt}
+	></SanierungsOption>
+	<SanierungsOption
+		label="Oberste Geschossdecke min. 12cm gedämmt"
+		name="oberste_geschossdecke_min_12cm_gedaemmt"
+		help=""
+		value="DGD"
+		bind:checked={aufnahme.oberste_geschossdecke_min_12cm_gedaemmt}
+	></SanierungsOption>
+</div>
 
-    
-    <SanierungsOption label="Außenwand gedämmt" name="aussenwand_gedaemmt" help="" value="AWD" bind:checked={aufnahme.aussenwand_gedaemmt}></SanierungsOption>
-    <SanierungsOption label="Kelleraußenwand gedämmt" name="keller_wand_gedaemmt" help="" value="KWD" bind:checked={aufnahme.keller_wand_gedaemmt}></SanierungsOption>
-    <SanierungsOption label="Kellerdecke gedämmt" name="keller_decke_gedaemmt" help="" value="KDD" bind:checked={aufnahme.keller_decke_gedaemmt}></SanierungsOption>
-    <SanierungsOption label="Dachgeschoss gedämmt" name="dachgeschoss_gedaemmt" help="" value="DGD" bind:checked={aufnahme.dachgeschoss_gedaemmt}></SanierungsOption>
-    <SanierungsOption label="Oberste Geschossdecke gedämmt" name="oberste_geschossdecke_gedaemmt" help="" value="DGD" bind:checked={aufnahme.oberste_geschossdecke_gedaemmt}></SanierungsOption>
-    <SanierungsOption label="Oberste Geschossdecke min. 12cm gedämmt" name="oberste_geschossdecke_min_12cm_gedaemmt" help="" value="DGD" bind:checked={aufnahme.oberste_geschossdecke_min_12cm_gedaemmt}></SanierungsOption>
-   
-    </div>
-
-    <DaemmungImage bind:images bind:ausweis bind:gebaeude />
-
-    <style lang="postcss">
+<DaemmungImage bind:images bind:ausweis bind:objekt />
 <!--
     <div class="GRB3">
         <div class="form-group col-md-12">
@@ -72,4 +105,5 @@
     
     -->
 
-    
+<style lang="postcss">
+</style>

src/components/Ausweis/StromVerbrauch.svelte

@@ -16,13 +16,13 @@
 	import {
 		AufnahmeClient,
 		ObjektClient,
-		VerbrauchsausweisWohnenClient,
+		VerbrauchsausweisGewerbeClient,
 	} from "./types.js";
 	import { addNotification } from "#components/Notifications/shared.js";
 
-	export let gebaeude: ObjektClient;
+	export let objekt: ObjektClient;
 	export let aufnahme: AufnahmeClient;
-	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let ausweis: VerbrauchsausweisGewerbeClient;
 
 	// Wir dürfen bis zu 4.5 Jahre alte Klimafaktoren benutzen, also nehmen wir alle Monate seitdem und generieren daraus die Auswahl.
 	// Allerdings müssen wir auch berücksichtigen, dass wir drei folgende Jahre brauchen, also
@@ -48,12 +48,12 @@
 	];
 
 	const startDate = moment(
-		ausweis.aufnahme.erstellungsdatum || Date.now()
+		aufnahme.erstellungsdatum || Date.now()
 	)
 		.subtract(4, "years")
 		.subtract(6, "months");
 	const endDate = moment(
-		ausweis.aufnahme.erstellungsdatum || Date.now()
+		aufnahme.erstellungsdatum || Date.now()
 	).subtract(3, "years");
 
 	for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
@@ -102,7 +102,7 @@
 		}
 	}
 
-	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
+	$: abweichung = auditVerbrauchAbweichung(ausweis, aufnahme);
 </script>
 
 <div
@@ -137,14 +137,15 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			>
 				{#if !ausweis.zusaetzliche_heizquelle}
 					<input
-						id="zusaetzliche_heizquelle_1"
+						id="zusaetzliche_heizquelle"
 						type="checkbox"
 						class="checkbox"
-						name="zusaetzliche_heizquelle_1"
+						name="zusaetzliche_heizquelle"
+						data-cy="zusaetzliche_heizquelle"
 						bind:checked={ausweis.zusaetzliche_heizquelle}
 					/>
 					<label
-						for="zusaetzliche_heizquelle_1"
+						for="zusaetzliche_heizquelle"
 						class="cursor-pointer">zusätzliche Heizquelle</label
 					>
 				{/if}
@@ -236,6 +237,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			<select
 				class="rounded-e-none"
 				name="brennstoff_1"
+				data-cy="brennstoff_1"
 				bind:value={aufnahme.brennstoff_1}
 				required
 			>
@@ -267,6 +269,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			<select
 				class="rounded-s-none"
 				name="einheit_1"
+				data-cy="einheit_1"
 				bind:value={ausweis.einheit_1}
 				disabled={!aufnahme.brennstoff_1}
 				required
@@ -416,6 +419,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 				<select
 					class="rounded-e-none"
 					name="brennstoff_2"
+					data-cy="brennstoff_2"
 					bind:value={aufnahme.brennstoff_2}
 					required
 				>
@@ -449,6 +453,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 				<select
 					class="rounded-s-none"
 					name="einheit_2"
+					data-cy="einheit_2"
 					bind:value={ausweis.einheit_2}
 					disabled={!aufnahme.brennstoff_2}
 					required
@@ -655,19 +660,19 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 <!-- Enthält Stromverbrauch für: -->
 
-<SanierungsOption label="Heizung" name="stromverbrauch_enthaelt_heizung" help="" bind:checked={aufnahme.stromverbrauch_enthaelt_heizung}></SanierungsOption>
-<SanierungsOption label="Warmwasser " name="stromverbrauch_enthaelt_warmwasser" help="" bind:checked={aufnahme.stromverbrauch_enthaelt_warmwasser}></SanierungsOption>
-<SanierungsOption label="Lüftung " name="stromverbrauch_enthaelt_lueftung" help="" bind:checked={aufnahme.stromverbrauch_enthaelt_lueftung}></SanierungsOption>
-<SanierungsOption label="Beleuchtung" name="stromverbrauch_enthaelt_beleuchtung" help="" bind:checked={aufnahme.stromverbrauch_enthaelt_beleuchtung}></SanierungsOption>
-<SanierungsOption label="Kühlung" name="stromverbrauch_enthaelt_kuehlung" help="" bind:checked={aufnahme.stromverbrauch_enthaelt_kuehlung}></SanierungsOption>
+<SanierungsOption label="Heizung" name="stromverbrauch_enthaelt_heizung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_heizung}></SanierungsOption>
+<SanierungsOption label="Warmwasser " name="stromverbrauch_enthaelt_warmwasser" help="" bind:checked={ausweis.stromverbrauch_enthaelt_warmwasser}></SanierungsOption>
+<SanierungsOption label="Lüftung " name="stromverbrauch_enthaelt_lueftung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_lueftung}></SanierungsOption>
+<SanierungsOption label="Beleuchtung" name="stromverbrauch_enthaelt_beleuchtung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_beleuchtung}></SanierungsOption>
+<SanierungsOption label="Kühlung" name="stromverbrauch_enthaelt_kuehlung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_kuehlung}></SanierungsOption>
 
 <div class="input-standard">
 	<Inputlabel title="Sonstige"></Inputlabel>
 
 		<input
-			name="strom_3"
+			name="stromverbrauch_enthaelt_sonstige"
 			type="number"
-			bind:value={ausweis.strom_3}
+			bind:value={ausweis.stromverbrauch_enthaelt_sonstige}
 			required
 		/>
 

src/components/Ausweis/Verbrauch.svelte

@@ -3,9 +3,6 @@
 	import Inputlabel from "#components/labels/InputLabel.svelte";
 	import Verbrauchslabel from "#components/labels/VerbrauchsLabel.svelte";
 	import VerbrauchsHelpLabel from "#components/labels/VerbrauchsHelpLabel.svelte";
-
-	import Label from "../Label.svelte";
-
 	import moment from "moment";
 	import fuelList from "./brennstoffListe.js";
 	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
@@ -16,7 +13,7 @@
 	} from "./types.js";
 	import { addNotification } from "#components/Notifications/shared.js";
 
-	export let gebaeude: ObjektClient;
+	export let objekt: ObjektClient;
 	export let aufnahme: AufnahmeClient;
 	export let ausweis: VerbrauchsausweisWohnenClient;
 
@@ -43,14 +40,13 @@
 		"Dezember",
 	];
 
-	const startDate = moment(
-		aufnahme.erstellungsdatum || Date.now()
-	)
+	const startDate = moment(aufnahme.erstellungsdatum || Date.now())
 		.subtract(4, "years")
 		.subtract(6, "months");
-	const endDate = moment(
-		aufnahme.erstellungsdatum || Date.now()
-	).subtract(3, "years");
+	const endDate = moment(aufnahme.erstellungsdatum || Date.now()).subtract(
+		3,
+		"years"
+	);
 
 	for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
 		availableDates.push({
@@ -85,20 +81,27 @@
 	$: {
 		console.log(month, year);
 
-		if ((availableDates.filter(date => date.month === month && date.year === year).length === 0) && typeof month === "number" && typeof year === "number") {
+		if (
+			availableDates.filter(
+				(date) => date.month === month && date.year === year
+			).length === 0 &&
+			typeof month === "number" &&
+			typeof year === "number"
+		) {
 			addNotification({
 				message: "Monat nicht verfügbar.",
-				subtext: "Der ausgewählte Monat ist in diesem Jahr nicht verfügbar, bitte wählen sie einen neuen Start Monat.",
+				subtext:
+					"Der ausgewählte Monat ist in diesem Jahr nicht verfügbar, bitte wählen sie einen neuen Start Monat.",
 				dismissable: true,
 				type: "warning",
 				timeout: 0,
 				uid: "monat_nicht_verfuegbar",
-				selector: "select[name='energieverbrauch_zeitraum_monat']"
-			})
+				selector: "select[name='energieverbrauch_zeitraum_monat']",
+			});
 		}
 	}
 
-	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
+	$: abweichung = auditVerbrauchAbweichung(ausweis, aufnahme);
 </script>
 
 <div
@@ -110,24 +113,37 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 "
 >
 	<!-- primäre Heizquellen -->
+	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
+		<div class="input-standard">
+			<Inputlabel title="Heizquellen"></Inputlabel>
 
-	<div class="input-standard order-1 md:order-1 xl:order-1">
-		<Inputlabel title="Heizquellen"></Inputlabel>
+			<div class="input-checkboxen">
+				<div
+					class="grid grid-cols-[40px_max-content] items-center justify-items-start"
+				>
+					<input
+						id="primaere_heizquelle"
+						type="checkbox"
+						class="checkbox"
+						name="primaere_heizquelle"
+						checked={true}
+					/>
+					<label for="primaere_heizquelle">primäre Heizquelle</label>
+				</div>
 	
-		<div class="input-checkboxen">
-			<div
-				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
-			>
-				<input
-					id="primaere_heizquelle"
-					type="checkbox"
-					class="checkbox"
-					name="primaere_heizquelle"
-					checked={true}
-				/>
-				<label for="primaere_heizquelle">primäre Heizquelle</label>
 			</div>
 	
+			<div class="help-label">
+				<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b> 
+					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben. 
+					Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der 
+				Verbräuche öffnet sich dann.</HelpLabel>
+			</div>
+		</div>
+
+		<div class="input-standard">
+			<Inputlabel title="Heizquellen"></Inputlabel>
+			<div class="input-checkboxen">
 			<div
 				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
 			>
@@ -146,16 +162,15 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 					>
 				{/if}
 			</div>
-		</div>
-
-		<div class="help-label">
-			<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b> 
-				(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben. 
-				Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der 
-			Verbräuche öffnet sich dann.</HelpLabel>
+			</div>
+			<div class="help-label">
+				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
+					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
+			</div>
 		</div>
 	</div>
 	
+
 	<!-- Zeitraum 1 -->
 
 	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
@@ -189,10 +204,13 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			</select>
 
 			<div class="help-label">
-				<HelpLabel>Bitte geben Sie hier den <b>Startmonat der ersten Verbrauchsperiode</b> ein. Es sind nur Monate auswählbar, 
-					die im zulässigen Zeitraum (Endzeitpunkt von Jahr 3 darf nicht älter als 18 Monate sein) liegen. Wählen Sie ein 
-					aktuellerses Jahr um alle Monate zu sehen.
-					</HelpLabel>
+				<HelpLabel
+					>Bitte geben Sie hier den <b
+						>Startmonat der ersten Verbrauchsperiode</b
+					> ein. Es sind nur Monate auswählbar, die im zulässigen Zeitraum
+					(Endzeitpunkt von Jahr 3 darf nicht älter als 18 Monate sein)
+					liegen. Wählen Sie ein aktuellerses Jahr um alle Monate zu sehen.
+				</HelpLabel>
 			</div>
 		</div>
 
@@ -218,8 +236,12 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			</select>
 
 			<div class="help-label">
-				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
-					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
+				<HelpLabel
+					>Bitte geben Sie das <b
+						>Startjahr der ersten Verbrauchsperiode</b
+					> ein. Weitere Zeitangaben müssen nichht gemacht werden, da alle
+					3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel
+				>
 			</div>
 		</div>
 	</div>
@@ -244,16 +266,24 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 			<div class="help-label">
 				<HelpLabel>
-					<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
-					<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
-					<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
-					<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
-					<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
-					<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
-					<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie 
-						den Primärenergiefaktor bei Ihrem Energieversorger</strong>  (meistens mit regenartivem Anteil)<br/>
-					<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
-					<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
+					<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br />
+					<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br />
+					<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im
+					Flüssiggastank gelagert<br />
+					<b>Braunkohle:</b> Fester fossiler Brennstoff<br />
+					<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer
+					(nachwachsender) Brennstoff<br />
+					<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br />
+					<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz -
+					<strong
+						>erfragen Sie den Primärenergiefaktor bei Ihrem
+						Energieversorger</strong
+					>
+					(meistens mit regenartivem Anteil)<br />
+					<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br
+					/>
+					<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br
+					/>
 				</HelpLabel>
 			</div>
 		</div>
@@ -276,9 +306,10 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 			<div class="help-label">
 				<HelpLabel>
-					Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an. 
-					Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
-					Litern vor. Pellets oder Brennholz in kg.
+					Bitte geben Sie die Einheit ein. Die Liste passt sich
+					entsprechend des ausgeählten Brennstoffes an. Erdgas wird
+					meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt
+					meistens in Litern vor. Pellets oder Brennholz in kg.
 				</HelpLabel>
 			</div>
 		</div>
@@ -397,8 +428,13 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			</div>
 
 			<div class="help-label">
-				<HelpLabel>Hier sind die <b>Verbräuche einer zusätzlichen Heizquelle</b> 
-					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben</HelpLabel>
+				<HelpLabel
+					>Hier sind die <b
+						>Verbräuche einer zusätzlichen Heizquelle</b
+					>
+					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel
+					etc.) einzugeben</HelpLabel
+				>
 			</div>
 		</div>
 
@@ -427,16 +463,24 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 				<div class="help-label">
 					<HelpLabel>
-					<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
-					<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
-					<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
-					<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
-					<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
-					<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
-					<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie 
-						den Primärenergiefaktor bei Ihrem Energieversorger</strong>  (meistens mit regenartivem Anteil)<br/>
-					<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
-					<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
+						<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br />
+						<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br />
+						<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im
+						Flüssiggastank gelagert<br />
+						<b>Braunkohle:</b> Fester fossiler Brennstoff<br />
+						<b>Holz-Pellets:</b> Stäbchenförmige Pellets -
+						erneuerbarer (nachwachsender) Brennstoff<br />
+						<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br />
+						<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz -
+						<strong
+							>erfragen Sie den Primärenergiefaktor bei Ihrem
+							Energieversorger</strong
+						>
+						(meistens mit regenartivem Anteil)<br />
+						<b>Strommix:</b> Meist bei Wärmepumpe oder
+						Nachtspeicher.<br />
+						<b>Koks:</b> stark kohlenstoffhaltiger fossiler
+						Brennstoff.<br />
 					</HelpLabel>
 				</div>
 			</div>
@@ -462,9 +506,11 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 
 				<div class="help-label">
 					<HelpLabel>
-					Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an. 
-					Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
-					Litern vor. Pellets oder Brennholz in kg.
+						Bitte geben Sie die Einheit ein. Die Liste passt sich
+						entsprechend des ausgeählten Brennstoffes an. Erdgas
+						wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl
+						liegt meistens in Litern vor. Pellets oder Brennholz in
+						kg.
 					</HelpLabel>
 				</div>
 			</div>

src/components/Ausweis/types.ts

@@ -51,7 +51,11 @@ export type VerbrauchsausweisWohnenClient = OmitKeys<
 export type VerbrauchsausweisGewerbeClient = OmitKeys<
 	VerbrauchsausweisGewerbe,
 	"id" | "aufnahme_id" | "benutzer_id"
->;
+> & {
+	uid_objekt: string,
+	uid_aufnahme: string,
+	uid_benutzer?: string
+};
 
 /**
  * Das ist der Typescript Type für den Verbrauchsausweis Gewerbe mit allen Feldern die
@@ -66,7 +70,11 @@ export type VerbrauchsausweisGewerbeClient = OmitKeys<
 export type BedarfsausweisWohnenClient = OmitKeys<
 	BedarfsausweisWohnen,
 	"id" | "aufnahme_id" | "benutzer_id"
->;
+> & {
+	uid_objekt: string,
+	uid_aufnahme: string,
+	uid_benutzer?: string
+};
 
 /**
  * Das ist der Typescript Type für die Gebäude Stammdaten mit allen Feldern die

src/components/Dashboard/DashboardAusweis.svelte

@@ -132,7 +132,7 @@
 			<!-- TODO: Metrics für den Fortschritt festlegen -->
 			<span class="text-sm font-semibold text-base-content">{progress}%</span>
 		</div>
-		{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis)}
+		{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt)}
 
 		{:then calculations}
 		<div class="flex flex-col gap-2">

src/components/DatenblattButton.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
 	import { Buffer } from "buffer";
-	import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { AufnahmeClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
 
 	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let objekt: ObjektClient;
+	export let aufnahme: AufnahmeClient;
+	export let bilder: UploadedGebaeudeBild[];
 
-	$: base64 = Buffer.from(JSON.stringify(ausweis), "utf-8").toString("base64");
+	$: base64Ausweis = Buffer.from(JSON.stringify(ausweis), "utf-8").toString("base64")
+	$: base64Aufnahme = Buffer.from(JSON.stringify(aufnahme), "utf-8").toString("base64")
+	$: base64Objekt = Buffer.from(JSON.stringify(objekt), "utf-8").toString("base64")
+	$: base64Bilder = Buffer.from(JSON.stringify(bilder), "utf-8").toString("base64")
 </script>
 
-<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/datenblatt?base64={base64}">
+<a class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" target="_blank" href="/pdf/datenblatt?ausweis={base64Ausweis}&objekt=${base64Objekt}&aufnahme={base64Aufnahme}&bilder={base64Bilder}">
 	<img src="/images/datenblatt.webp" alt="Datenblatt" />
 	<span class="text-black font-medium text-lg">Datenblatt</span>
 </a>

src/components/ImageGrid.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import UploadImages from "./UploadImages.svelte";
-	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
+	import type { Enums } from "@ibcornelsen/database/client";
+	import { BedarfsausweisWohnenClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
 	import { RotateCounterClockwise, Trash, Upload } from "radix-svelte-icons";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let max: number = 4;
 	export let min: number = 1;
 	export let name: string = "";
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: ObjektClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
+	export let objekt: ObjektClient;
 	export let kategorie: Enums.BilderKategorie
 
 	async function rotateImage(image: UploadedGebaeudeBild): Promise<UploadedGebaeudeBild> {
@@ -36,7 +36,7 @@
 </script>
 
 <div class="flex flex-col gap-4">
-	<UploadImages {name} {kategorie} {max} {min} bind:upload bind:gebaeude bind:images bind:ausweis><slot /></UploadImages>
+	<UploadImages {name} {kategorie} {max} {min} bind:upload bind:objekt bind:images bind:ausweis><slot /></UploadImages>
 	<div class="grid grid-cols-2 gap-2">
 		{#each images as image, i}
 			{#if image.kategorie == kategorie}

src/components/PaymentOption.svelte

@@ -10,7 +10,7 @@
 
 <div>
 
-<input type="radio" data-test={paymentType} id={paymentType} name="paymentType" on:change={() => selectedPaymentType = paymentType} />
+<input type="radio" data-cy={paymentType} id={paymentType} name="paymentType" on:change={() => selectedPaymentType = paymentType} />
 
 <label for={paymentType}>
 	<div class="grid grid-rows-[1fr_20px] justify-items-center items-center cursor-pointer">

src/components/UploadImages.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import HelpLabel from "#components/labels/HelpLabel.svelte";
-	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
+	import type { Enums } from "@ibcornelsen/database/client";
 
 	export let max: number = 2;
 	export let min: number = 1;
 	export let name: string = ""
 
 	// Array of base64 encoded images read into the input.
-	import { ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
+	import { BedarfsausweisWohnenClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: ObjektClient;
+	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
+	export let objekt: ObjektClient;
 	export let kategorie: Enums.BilderKategorie;
 
 	function getAllImages(this: HTMLInputElement) {
@@ -36,7 +36,7 @@
 
 			const reader = new FileReader();
 
-			reader.onload = (ev) => {
+			reader.onload = () => {
 				if (reader.readyState != reader.DONE) {
 					return;
 				}

src/components/Verbrauchsausweis/audits/EndEnergie.ts

@@ -3,7 +3,7 @@ import { AuditType, hidden } from "./hidden.js";
 import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
 import { getKlimafaktoren } from "#lib/Klimafaktoren.js";
 
-export async function auditEndEnergie(ausweis: VerbrauchsausweisWohnenClient, gebaeude: ObjektClient, aufnahme: AufnahmeClient): Promise<boolean> {
+export async function auditEndEnergie(ausweis: VerbrauchsausweisWohnenClient, objekt: ObjektClient, aufnahme: AufnahmeClient): Promise<boolean> {
     if (hidden.has(AuditType.END_ENERGIE)) {
         return false;
     }
@@ -11,9 +11,9 @@ export async function auditEndEnergie(ausweis: VerbrauchsausweisWohnenClient, ge
     if (aufnahme){
         if (aufnahme.flaeche && ausweis.verbrauch_1 && ausweis.verbrauch_2 && ausweis.verbrauch_3) {
             try {
-                const response = await getKlimafaktoren(ausweis.startdatum, gebaeude.plz);
+                const response = await getKlimafaktoren(ausweis.startdatum, objekt.plz);
                 // Alle Klimfaktoren konnten abgefragt werden.
-                const eevva = await endEnergieVerbrauchVerbrauchsausweis_2016({...ausweis, aufnahme: {...aufnahme, objekt: gebaeude}});
+                const eevva = await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt);
                 if (eevva){
                     if (eevva?.endEnergieVerbrauchGesamt <= 45 || eevva?.endEnergieVerbrauchGesamt >= 500) {
                         return true;

src/components/Verbrauchsausweis/audits/VerbrauchAbweichung.ts

@@ -1,8 +1,8 @@
 import { AufnahmeClient, ObjektClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
 import { AuditType, hidden } from "./hidden.js";
 
-export function auditVerbrauchAbweichung(ausweis: VerbrauchsausweisWohnenClient, gebaeude: AufnahmeClient): number[] {
-	if (gebaeude.leerstand && (gebaeude.leerstand > 0)) {
+export function auditVerbrauchAbweichung(ausweis: VerbrauchsausweisWohnenClient, aufnahme: AufnahmeClient): number[] {
+	if (aufnahme.leerstand && (aufnahme.leerstand > 0)) {
 		return [];
 	}
 

src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte

@@ -26,7 +26,7 @@
     
     <div id="ProduktUebersichtBedarfssausweisGewerbe">
     
-    <div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
+    <div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
         
     <div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]"> 
         <div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>      
@@ -82,6 +82,6 @@
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
         }
     
-    .price{@apply text-[1.15rem] sm:text-[1.5rem]}
+    .price{@apply text-[1.25rem] sm:text-[2rem]}
     
     </style>

src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte

@@ -26,7 +26,7 @@
     
     <div id="ProduktUebersichtBedarfssausweisWohnen">
     
-    <div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
+    <div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
         
     <div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]"> 
         <div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>      
@@ -82,6 +82,6 @@
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
         }
     
-    .price{@apply text-[1.15rem] sm:text-[1.5rem]}
+    .price{@apply text-[1.25rem] sm:text-[2rem]}
     
     </style>

src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte

@@ -26,7 +26,7 @@
     
     <div id="ProduktUebersichtVerbrauchsausweisGewerbe">
     
-    <div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
+    <div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
         
     <div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]"> 
         <div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>      
@@ -82,6 +82,6 @@
             @apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
         }
     
-    .price{@apply text-[1.15rem] sm:text-[1.5rem]}
+    .price{@apply text-[1.25rem] sm:text-[2rem]}
     
     </style>

src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte

@@ -26,7 +26,7 @@ bullets = [
 
 <div id="ProduktUebersichtVerbrauchsausweisWohnen">
 
-<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
+<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
     
 <div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]"> 
     <div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>      
@@ -82,6 +82,6 @@ bullets = [
 		@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
 	}
 
-.price{@apply text-[1.15rem] sm:text-[1.5rem]}
+.price{@apply text-[1.25rem] sm:text-[2rem]}
 
 </style>

src/components/design/content/WidgetCardTemplate.svelte

@@ -11,39 +11,41 @@
 </script>
 
 
-		
-
-
-
-		<h2 class="titel">{name}</h2>
-
-		{#if empfehlung=="ja"}
-		<!--<div class="empfehlung">Empfehlung</div>-->
-		{/if}
-		
+{#if empfehlung=="ja"}
+<div class="empfehlung">Empfehlung</div>
+{/if}
+		<h2 class="titel sm:mb-2">{name}</h2>
 
 
 			<div class="sumCent">
+				<div class="variante">{variant}</div>
 				<img
 					class="image"
 					{src}
 					{alt}
 				/>
 				<div class="justify-self-start">
-					<p class="promo">
-						<span class="[font-family:Antique_Olive_Compact_bold]">
+					<p class="price">
 							ab {price} €					
-						</span> 
 					</p>
 				</div>
 
 			</div>
 
+			<div class="sumCent buttoncols">	
+				<a
+					href="{href_buy}"
+					class="buttoncol">jetzt&nbsp;online erstellen</a
+				>
 	
+				<a
+					href="{href_overview}"
+					class="buttoncol">Produkt-Übersicht</a
+				>
 	
-			<!--<div class="sumCent variante justify-self-end">{variant}</div>-->
+				</div>
 
-			<div class="sumCent sumRows forServices">
+			<div class="sumRows forServices">
 			
 				{#each services as [service, check]}
 				<div class="services">
@@ -55,65 +57,46 @@
 			</div>
 
 
-
-			<div class="sumCent buttoncols">	
-			<a
-				href="{href_buy}"
-				class="buttoncol">jetzt&nbsp;online erstellen</a
-			>
-
-			<a
-				href="{href_overview}"
-				class="buttoncol">Produktübersicht</a
-			>
-
-			</div>
-
-
-
-
-
-
 <style lang="postcss">
 
 
 
-.sumCent{@apply justify-self-center col-span-2 md:mb-6}
-.sumRows{@apply hidden md:grid grid-rows-subgrid row-span-5}
-.forServices{@apply w-full md:w-auto}
+.sumCent{@apply justify-self-center col-span-2}
+.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
+.forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}
 
 .image{@apply w-[75%] justify-self-center
 	md:w-[75%] md:pl-12}
 
-.buttoncols{@apply grid grid-cols-1 gap-x-10 w-full
+.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
 md:grid-cols-2 md:w-[auto]}
 
-.buttoncol{@apply mt-[0.5rem] text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
-hover:bg-primary}
+.buttoncol{@apply mt-2 md:mt-0 text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
+hover:bg-[#222222] hover:text-white}
 
 
-	.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
+	.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4 text-nowrap;
 				font-family: "Antique Olive Compact bold";}
 
 
 
 	.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
-	.empfehlung{@apply bg-red-700 text-[0.75rem] text-white  px-2 py-1 rounded-sm rotate-[5deg]}
+	.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
 	.variante {
-		@apply col-span-2 -mt-2 text-xl w-fit text-black justify-self-end;
+		@apply italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-[#ffcc00] rounded-md pl-[4px] pr-[6px] py-[0px];
 	}
 
 	.services {
-		@apply hidden w-full text-start py-1 md:grid grid-cols-[1fr_minmax(25px,50px)] items-center;
+		@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center  md:grid-cols-[1fr_50px]
 	}
 	.services:not(:last-child) {
 		@apply border-b-[1px] border-gray-200;
 	}
 	.check {
-		@apply justify-self-end font-bold text-green-700;
+		@apply justify-self-end self-center font-bold text-green-700;
 	}
 	.check-no {
-		@apply justify-self-end font-bold text-red-700;
+		@apply justify-self-end self-center font-bold text-red-700;
 	}
 
 </style>

src/components/design/header/AusweisHeader_immowelt.astro

@@ -0,0 +1,60 @@
+---
+import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
+---
+
+<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
+
+	<div class="grid grid-cols-[min-content_1fr] items-center">
+		
+
+	<div class="w-[150px] h-[80px]">
+	<div class="w-full h-full grid grid-col-1 justify-items-center items-center">
+	<img class="w-[109px]" src="/images/immowelt/immowelt.svg" alt="immowelt"/>
+	</div>	
+	</div>
+
+<div>
+
+<ul class="navlist">
+<li><button>Verbrauchsausweis</button></li>
+<li><button>Bedarfssausweis</button></li>
+<li><button>Verbrauchsausweis Gewerbe</button></li>
+</ul>
+
+</div>
+
+</div>
+
+
+
+</header>
+
+<div class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover" style="background-image: url('/images/immowelt/hero-desktop.webp'); 
+background-repeat:no-repeat; background-position:right;">
+</div>
+
+<style lang="postcss">
+
+@font-face {
+    font-family: "immo Sans";
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+}
+
+
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
+
+	.navlist{@apply block sm:flex pl-[1.75rem];}
+	.navlist li{@apply flex md:pr-[6px]}
+	.navlist li button{@apply text-[0.75rem] md:text-[1rem]  text-[#646464] sm:p-2 text-left
+		hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
+		font-family: "immo Sans";
+		font-weight:400;}
+
+</style>

src/components/widgets/WelcherAusweisWidget_1.svelte

@@ -3,7 +3,6 @@
 	import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
 	import { PRICES } from "#lib/constants.js";
 	
-	
 	let gebaeudetyp: string 				= "bitte auswählen";
 	let anlass: string 						= "bitte auswählen";
 	let einheiten: string					= "bitte auswählen";
@@ -16,29 +15,66 @@
 	const gewerbeHouse 						= ["Gewerbegebäude", "Mischgebäude"];
 
 
+	let ausnahme: boolean = false;
+	let oneBOX: boolean = false;
+	let threeBOX: boolean = false;	
+
 function getBoxes(){
 if(twoBoxReason.includes(anlass)){
 
-document.getElementById('firstrow')?.classList.remove('md:grid-cols-2');
-document.getElementById('firstrow')?.classList.add('md:grid-cols-3');
+document.getElementById('firstrow')?.classList.remove('sm:grid-cols-2');
+document.getElementById('firstrow')?.classList.add('sm:grid-cols-3');
 }else{
+document.getElementById('firstrow')?.classList.remove('sm:grid-cols-3');
+document.getElementById('firstrow')?.classList.add('sm:grid-cols-2');
+}
+}
 
-document.getElementById('firstrow')?.classList.remove('md:grid-cols-3');
-document.getElementById('firstrow')?.classList.add('md:grid-cols-2');
+function getCount(){
+if(oneBOX===true){
+	console.log('ONE');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
+	document.getElementById('thirdrow')?.classList.add('grid-cols-1');
+}else if(threeBOX===true){
+	console.log('THREE');
+	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
+
+	document.getElementById('thirdrow')?.classList.add('md:grid-cols-6');
+
+}
+
+else{
+	console.log('FOUR');
+	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
+	document.getElementById('thirdrow')?.classList.add('md:grid-cols-4');
 }
 
 }
 
 
-	let ausnahme: boolean = false
-
 $: {
-		
-		ausnahme = ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert")) 
+ausnahme 	= 	((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
             ? true 
             : false;
+
+oneBOX 		=  	((ausnahme === true) && (gebaeudetyp != "Gewerbegebäude")) && (gebaeudetyp != "Mischgebäude") || 
+				((!twoBoxReason.includes(anlass)) && (gebaeudetyp != "Mischgebäude")) || 
+				((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
+            ? true 
+            : false;
+
+threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
+            ? true 
+            : false;
+			
 }
 
+
+
+
 </script>
 
 
@@ -56,7 +92,7 @@ $: {
 				<select
                     id="anlass"
 					class="selectfeld"
-					bind:value={anlass} on:change={getBoxes}
+					bind:value={anlass} on:change={getBoxes} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Vermietung/Verkauf"
@@ -74,7 +110,7 @@ $: {
 				<div class="titel">Gebäudetyp</div>
 				<select 
 					class="selectfeld"
-					bind:value={gebaeudetyp} on:change={getBoxes}
+					bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -90,7 +126,7 @@ $: {
 				<div class="titel">Sanierungsstand</div>
 				<select 
 					class="selectfeld"	
-					bind:value={sanierungsstatus} on:change={getBoxes}
+					bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
 					
 				>
 					<option selected disabled>bitte auswählen</option>
@@ -109,7 +145,7 @@ $: {
 				<select
 					id="baujahr"
 					class="selectfeld"
-					bind:value={baujahr}
+					bind:value={baujahr} on:change={getCount}
 					
 				>
 					<option selected disabled>bitte auswählen</option>
@@ -122,7 +158,7 @@ $: {
 					<div class="titel">Heizungsalter</div>
 					<select
 						class="selectfeld"
-						bind:value={heizungsAlter}
+						bind:value={heizungsAlter} on:change={getCount}
 					>
 						<option selected disabled>bitte auswählen</option>
 						<option value="< 3">jünger als 3 Jahre</option>
@@ -134,7 +170,7 @@ $: {
 				<div class="titel">Wohneinheiten</div>
 				<select
 					class="selectfeld"
-					bind:value={einheiten}
+					bind:value={einheiten} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="bis 4 Wohneinheiten"
@@ -150,7 +186,7 @@ $: {
 				<div class="titel">Leerstand</div>
 				<select
 					class="selectfeld ausnahmen"
-					bind:value={leerStand}
+					bind:value={leerStand} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="bis 30">bis 30%</option>
@@ -165,12 +201,12 @@ $: {
 
 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Wohngebäude"
 					price={PRICES.VerbrauchsausweisWohnen[0]}
-					src="/images/right-sidebar/wohngebaeude.svg"
+					src="/images/immowelt/wohngebaeude_immowelt.svg"
 					alt="Wohnhaus Verbrauchsausweis"
 					variant="einfach"
 					empfehlung="nein"
@@ -190,12 +226,12 @@ $: {
 			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Wohngebäude"
 					price={PRICES.BedarfsausweisWohnen[0]}
-					src="/images/right-sidebar/wohngebaeude.svg"
+					src="/images/immowelt/wohngebaeude_immowelt.svg"
 					alt="Wohnhaus Bedarfsausweis"
 					variant="fundiert"
 					empfehlung="ja"
@@ -212,21 +248,21 @@ $: {
 				</div>
 			{/if}
 
-			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (ausnahme === false)}
+			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Gewerbegebäude"
 					price={PRICES.VerbrauchsausweisGewerbe[0]}
-					src="/images/right-sidebar/gewerbegebaeude.svg"
+					src="/images/immowelt/gewerbegebaeude_immowelt.svg"
 					alt="Gewerbe Verbrauchsausweis"
 					variant="einfach"
 					empfehlung="nein"					
 					services={[
 						
-						["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
+						["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom&nbsp;nötig.", true],
 						["Zulässig bei Vermietung oder Verkauf.", true],
 						["Für bauliche und energetische Maßnahmen ungeeignet.", false],
 						["Wird nicht immer bei den Banken akzeptiert.", false],
@@ -242,12 +278,12 @@ $: {
 			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Gewerbegebäude"
 					price={PRICES.BedarfsausweisGewerbe[0]}
-					src="/images/right-sidebar/gewerbegebaeude.svg"
+					src="/images/immowelt/gewerbegebaeude_immowelt.svg"
 					alt="Gewerbe Bedarfsausweis"
 					variant="fundiert"
 					empfehlung="ja"
@@ -268,12 +304,12 @@ $: {
 			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
 			<div
 				class="produktbox"
-				transition:fade={{ duration: 200 }}
+				transition:fade={{ duration: 0 }}
 			>
 			<WidgetCardTemplate
 				name="GEG-Nachweis Wohngebäude"
 				price={PRICES.BedarfsausweisGewerbe[0]}
-				src="/images/right-sidebar/gewerbegebaeude.svg"
+				src="/images/immowelt/gewerbegebaeude_immowelt.svg"
 				alt="Gewerbe Bedarfsausweis"
 				variant="Bauvorlage"
 				empfehlung="nein"
@@ -285,7 +321,8 @@ $: {
 					["xxx", false],
 					["xxx", false],
 				]}
-				href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/" 
 
 			></WidgetCardTemplate>
 			
@@ -295,12 +332,12 @@ $: {
 			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
 			<div
 				class="produktbox"
-				transition:fade={{ duration: 200 }}
+				transition:fade={{ duration: 0 }}
 			>
 			<WidgetCardTemplate
 				name="GEG-Nachweis Gewerbegebäude"
 				price={PRICES.BedarfsausweisGewerbe[0]}
-				src="/images/right-sidebar/gewerbegebaeude.svg"
+				src="/images/immowelt/gewerbegebaeude_immowelt.svg"
 				alt="Gewerbe Bedarfsausweis"
 				variant="Bauvorlage"
 				empfehlung="nein"
@@ -312,7 +349,8 @@ $: {
 					["xxx", false],
 					["xxx", false],
 				]}
-				href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
 			></WidgetCardTemplate>
 			
 			</div>
@@ -324,14 +362,6 @@ $: {
 
 <style lang="postcss">
 
-@font-face {
-	font-family: 'Heron';
-	font-weight: 700;
-	font-style: normal;
-	font-display:swap;
-	src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
-  }
-
   @font-face {
 	font-family: 'Antique Olive Compact bold';
 	font-weight: 700;
@@ -340,8 +370,26 @@ $: {
 	src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
   }
 
+  @font-face {
+    font-family: "immo Sans";
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+}
 
-*{font-family: "Heron";}
+@font-face {
+    font-family: "immo Sans Bold";
+    src: url('/fonts/Immo-Sans/immoSans-Bold.eot');
+    src: url('/fonts/Immo-Sans/immoSans-Bold.eot?#iefix') format('embedded-opentype'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff2') format('woff2'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff') format('woff');
+    font-style: normal;
+    font-weight: 700;
+}
+
+
+*{font-family: "immo Sans";}
 
 #OEA_widget {
 	@apply min-w-[320px] max-w-[1920px] p-[4px]
@@ -350,7 +398,7 @@ $: {
 .firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
 	sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
 
-.titel{@apply text-white  font-sans font-bold bg-[#444f94] px-2 py-1 rounded-[0.25rem];}
+.titel{@apply text-black font-bold bg-[#ffcc00] px-2 py-1 rounded-[0.25rem];}
 
 .selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
 
@@ -359,13 +407,15 @@ $: {
 .secondrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 mt-4
 	sm:grid-cols-4 sm:gap-x-4 sm:gap-y-2;
 
-.titel{@apply text-black font-sans font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
+.titel{@apply text-black font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
     
 .selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
 
 }
 
-.thirdrow{@apply grid grid-cols-2 gap-x-4 gap-y-2
+#OEA_input{@apply grid}
+
+.thirdrow{@apply grid grid-cols-1 gap-x-4 gap-y-2 col-start-1
 	md:grid-cols-4 md:gap-x-4 md:gap-y-2;
 
 .produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg