Cookie Fehler

Ausweis ohne Pfeile und Bedarfsausweis Nachricht überarbeitet.
Update Makefile
2024-11-20 12:24:04 +11:00 · 2024-11-20 12:15:19 +11:00 · 2024-11-14 15:23:18 +11:00 · 2024-11-14 15:08:07 +11:00 · 2024-11-14 15:05:25 +11:00 · 2024-11-13 13:29:44 +11:00
159 changed files with 2104991 additions and 1261 deletions
--- a/.github/workflows/build-and-test.yml
+++ b/.github/workflows/build-and-test.yml
@@ -1,20 +0,0 @@
-name: Build and Test
-
-on:
-  push:
-    branches: [ dev ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Build the application
-      uses: actions/checkout@v3
-    - uses: oven-sh/setup-bun@v1
-      with:
-        bun-version: "latest"
-    - run: bun install
-    - run: bun run build
-    - run: bun run test:unit
-    - run: bun run test:e2e
--- a/.github/workflows/dev-pipeline.yml
+++ b/.github/workflows/dev-pipeline.yml
@@ -1,27 +1,26 @@
 name: Dev Pipeline

 on:
+  pull_request:
+    branches: [main]
  push:
-    branches: [ dev ]
+    branches: [main]

 jobs:
-  build:
+  deploy:
    runs-on: ubuntu-latest
-
    steps:
-    - name: Deploy dev changes.
-      uses: appleboy/ssh-action@master
-      with:
-        host: "212.227.155.91"
-        username: "root"
-        password: "!2Zc727cI1"
-        port: 22
-        script: |
-          cd ~/apps/online-energieausweis
-          git reset --hard HEAD
-          git clean -f -d
-          git pull origin main
-          git status
-          npm install -g bun
-          bun install
-          bash build.sh
+      - uses: actions/checkout@v2
+      - uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.DEV_HOST }}
+          username: ${{ secrets.DEV_USERNAME }}
+          password: ${{ secrets.DEV_PASSWORD }}
+          port: 22
+          script: |
+            cd ~/online-energieausweis
+            git reset --hard HEAD
+            git clean -f -d
+            git pull origin main
+            git status
+            make prod
--- a/.github/workflows/prod-pipeline.yml
+++ b/.github/workflows/prod-pipeline.yml
@@ -1,27 +0,0 @@
-name: Production Deployment
-
-on:
-  release:
-    types: [ created ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Deploy to production.
-      uses: appleboy/ssh-action@master
-      with:
-        host: "212.227.155.91"
-        username: "root"
-        password: "!2Zc727cI1"
-        port: 22
-        script: |
-          cd ~/apps/online-energieausweis
-          git reset --hard HEAD
-          git clean -f -d
-          git pull origin main
-          git status
-          npm install -g bun
-          bun install
-          bash build.sh
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,9 @@ dist/
 # generated types
 .astro/

+# log files
+logs/
+
 # dependencies
 node_modules/

--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,16 @@
+
+
 {
 	"i18n-ally.localesPaths": [
 		"public/locales"
-	]
+	],
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"css.lint.unknownAtRules": "ignore",
+	"scss.lint.unknownAtRules": "ignore",
+	"less.lint.unknownAtRules": "ignore"
+}
+	"workbench.colorCustomizations": {
+		"minimap.background": "#00000000",
+		"scrollbar.shadow": "#00000000"
+	}
 }
--- a/GEG24_Wohngebaeude_ohne_pfeile.pdf
+++ b/GEG24_Wohngebaeude_ohne_pfeile.pdf
--- a/GEG_2024_Gesetzestext.pdf
+++ b/GEG_2024_Gesetzestext.pdf
--- a/Kontrollsystem-GEG-2023-V1_0.ts
+++ b/Kontrollsystem-GEG-2023-V1_0.ts
--- a/Kontrollsystem-GEG-2023-V1_0_zod.ts
+++ b/Kontrollsystem-GEG-2023-V1_0_zod.ts
--- a/Kontrollsystem-GEG-2023_V1.schema.json
+++ b/Kontrollsystem-GEG-2023_V1.schema.json
--- a/Kontrollsystem-GEG-2024_V1.schema.json
+++ b/Kontrollsystem-GEG-2024_V1.schema.json
--- a/54
+++ b/54
@@ -0,0 +1,54 @@
+.PHONY: dev database api online-energieausweis all prod bun-install-database bun-install-api
+
+online-energieausweis:
+	bun run dev
+
+dev: online-energieausweis api database
+
+database:
+	$(MAKE) -C ../database dev
+
+bun-install-database:
+	cd ../database
+	bun link
+	bun install
+
+bun-install-api: bun-install-database
+	cd ../api
+	bun install
+	bun link @ibcornelsen/database
+
+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
+	bun install
+	bun pm trust @ibcornelsen/database
+	mkdir -p ~/logs
+	mkdir -p ~/persistent/online-energieausweis
+	
+# Wir müssen sichergehen, dass der Database Container läuft, sonst können wir ihn nicht linken.
+	@if [ ! $$(docker ps | grep database | wc -l) -gt 0 ]; then \
+		cd ../database; \
+		$(MAKE) prod; \
+		cd ../online-energieausweis; \
+	fi
+	
+# Auch die API sollte bereits laufen
+	@if [ $$(pm2 pid api) -eq "0" ]; then \
+		cd ../api; \
+		$(MAKE) prod; \
+		cd ../online-energieausweis; \
+	fi
+
+	- rm -f ~/online-energieausweis/.env;
+	- touch ~/online-energieausweis/.env;
+	- echo "PRIVATE_KEY=$(cat /etc/letsencrypt/live/ibcornelsen.de/privkey.pem | base64 | tr -d '\n')" >> ~/online-energieausweis/.env;
+	- echo "CERTIFICATE=$(cat /etc/letsencrypt/live/ibcornelsen.de/fullchain.pem | base64 | tr -d '\n')" >> ~/online-energieausweis/.env;
+
+	- pm2 delete online-energieausweis
+	pm2 start --name "online-energieausweis" --log ~/logs/`date '+%d-%m-%Y_%H:%M:%S'`.log --time  bun -- astro dev
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,29 +1,39 @@
 import { defineConfig } from "astro/config";
 import svelte from "@astrojs/svelte";
 // import astroI18next from "astro-i18next";
-
 import tailwind from "@astrojs/tailwind";
-
-// https://astro.build/config
 import node from "@astrojs/node";
-
-// https://astro.build/config
 import mdx from "@astrojs/mdx";

+import { fileURLToPath } from "url";
+
 // https://astro.build/config 
 export default defineConfig({
-  integrations: [/*astroI18next(),*/svelte(), tailwind(), mdx()],
+  integrations: [svelte(), tailwind(), mdx()],
  outDir: "./dist",
  output: "server",
-	vite: {
-		optimizeDeps: {
-			exclude: ["@ibcornelsen/api", "@ibcornelsen/database"]
-		}
-	},
+  vite: {
+    optimizeDeps: {
+      exclude: ["@ibcornelsen/api", "@ibcornelsen/database"]
+    },
+    resolve: {
+      alias: {
+        "#": fileURLToPath(new URL("./src", import.meta.url))
+      }
+    },
+		ssr: {
+			noExternal: ["@pdfme/generator", "@pdfme/common", "@pdfme/schemas"]
+		},
+    build: {
+      commonjsOptions: {
+        transformMixedEsModules: false
+      }
+    }
+  },
  adapter: node({
    mode: "middleware"
  }),
-	server: {
-		port: 3000
-	}
+  server: {
+    port: 3000
+  }
 });
--- a/build.sh
+++ b/build.sh
@@ -9,50 +9,63 @@ DB_USER="main"
 DB_PASSWORD="hHMP8cd^N3SnzGRR"
 DB_PORT=5432

-git_pull_force() {
-	git reset --hard HEAD
-	git clean -f -d
-	git pull origin main
-}
+# Wir gehen davon aus, dass die Änderungen bereits von GitHub gepullt wurden
+# Dieses Skript ist nur dafür gedacht, von GitHub bei einer Automation
+# ausgeführt zu werden. Außerdem würde es nicht wirklich Sinn ergeben, wenn das
+# Build Skript sich die Änderungen am build Skript holen würde...
+# Wir müssen alle lokalen Pakete verlinken

-# Zuerst müssen wir neue Änderungen von GitHub pullen.
-cd ~/apps/$APP_NAME
-git_pull_force;
+# --------------------------------- Database --------------------------------- #

-# Dann bauen wir das Docker Image unserer Application
-cd ~/apps/$APP_NAME
-docker stop $APP_NAME
-docker rm $APP_NAME
-docker build -t $APP_NAME .
+cd ../database
+bun link
+bun install

-# SECTION: Startup jobs zu crontab hinzufügen.
-# Erstmal den cronfile leeren.
-crontab -r;
+# ------------------------------------ API ----------------------------------- #

-# Alle builds schlagen fehl wenn die Datenbank nicht da ist, also muss der Container zuerst gebaut werden.
-(crontab -l ; echo "@reboot sudo ~/database/build.sh &") | crontab -;
-(crontab -l ; echo "@reboot sudo ~/apps/online-energieausweis/build.sh &") | crontab -;
-(crontab -l ; echo "@reboot sudo ~/apps/layout-tool/build.sh &") | crontab -;
+cd ../api
+bun install
+bun link @ibcornelsen/database

-# Wir legen ein persistent directory an
-PERSISTENT_DIR="${HOME}/persistent/online-energieausweis";
+# ------------------------------------ APP ----------------------------------- #
+
+cd ../$APP_NAME
+bun install
+bun link @ibcornelsen/database
+
+# Jeder unserer Applikationen hat ein Verzeichnis in dem alle Dateien dauerhaft,
+# Versionsunabhängig gespeichert werden. Dieses legen wir hier an, falls es noch
+# nicht existiert.
+PERSISTENT_DIR="${HOME}/persistent/${APP_NAME}";
 mkdir -p $PERSISTENT_DIR;

-# Wir legen einen .env file für unsere letsencrypt keys an.
-rm -f ~/apps/$APP_NAME/.env;
-touch ~/apps/$APP_NAME/.env;
-echo "PRIVATE_KEY=$(cat /etc/letsencrypt/live/ibcornelsen.de/privkey.pem | base64 | tr -d '\n')" >> ~/apps/$APP_NAME/.env;
-echo "CERTIFICATE=$(cat /etc/letsencrypt/live/ibcornelsen.de/fullchain.pem | base64 | tr -d '\n')" >> ~/apps/$APP_NAME/.env;
+# TODO: Wir legen hier die .env Datei an, die die SSL Zertifikate enthält.
+rm -f ~/$APP_NAME/.env;
+touch ~/$APP_NAME/.env;
+echo "PRIVATE_KEY=$(cat /etc/letsencrypt/live/ibcornelsen.de/privkey.pem | base64 | tr -d '\n')" >> ~/$APP_NAME/.env;
+echo "CERTIFICATE=$(cat /etc/letsencrypt/live/ibcornelsen.de/fullchain.pem | base64 | tr -d '\n')" >> ~/$APP_NAME/.env;

-# Und starten unsere App wieder.
-docker run -d --name $APP_NAME --link $DB_CONTAINER_NAME \
-	-v "${PERSISTENT_DIR}:/persistent" \
-	-p "${APP_PORT}:80" \
-	-e DB_CONNECTION=postgresql://${DB_USER}:${DB_PASSWORD}@${DB_CONTAINER_NAME}:${DB_PORT}/${DB_NAME} \
-	-e DB_PORT=${DB_PORT} \
-	--env-file ~/apps/${APP_NAME}/.env \
-	$APP_NAME;
+# Wir müssen sichergehen, dass der Database Container läuft, sonst können wir ihn nicht linken.
+if [ ! $((docker ps | grep $DB_CONTAINER_NAME) | wc -l) -gt 0 ]; then
+	cd ../database;
+	bash build.sh;
+	cd ../$APP_NAME;
+fi

-# Crontab Updaten
-cd ~/$APP_NAME
-crontab .crontab
+# Auch die API sollte bereits laufen
+if [ $(pm2 pid api) -eq "0" ]; then
+	cd ../api;
+	make prod;
+	cd ../$APP_NAME;
+fi
+
+# Jetzt wo wir alle Vorbereitungen getroffen haben, starten wir das Docker Image und linken es mit der Datenbank.
+# docker run -d --name $APP_NAME --link $DB_CONTAINER_NAME \
+# 	-v "${PERSISTENT_DIR}:/persistent" \
+# 	-v "./node_modules/@ibcornelsen/database:/${APP_NAME}/node_modules/@ibcornelsen/database" \
+# 	-v "./node_modules/@ibcornelsen/api:/${APP_NAME}/node_modules/@ibcornelsen/api" \
+# 	-v "./node_modules/@ibcornelsen/ui:/${APP_NAME}/node_modules/@ibcornelsen/ui" \
+# 	-p "${APP_PORT}:3000" \
+# 	$APP_NAME;
+
+make prod
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -20,7 +20,7 @@ services:
    extends:
      file: ../api/docker-compose.yml
      service: ibcornelsen-api
-  ibcornelsen-database:
+  database:
    extends:
      file: ../database/docker-compose.yml
-      service: ibcornelsen-database
+      service: database
--- a/install.sh
+++ b/install.sh
@@ -0,0 +1,15 @@
+git clone https://github.com/IBCornelsen/online-energieausweis
+git clone https://github.com/IBCornelsen/database
+git clone https://github.com/IBCornelsen/api
+
+cd ./database
+bun link
+bun install
+
+cd ../api
+bun link
+bun install
+
+cd ../online-energieausweis
+bun link
+bun install
--- a/notes/ausweis-erstellung.md
+++ b/notes/ausweis-erstellung.md
@@ -0,0 +1,19 @@
+# Ausweis Erstellung
+
+Wenn ein neuer Nutzer auf unsere Seite kommt und einen Ausweis erstellen möchte muss er sich nicht unbedingt sofort registrieren. Um den Kunden ein reibungsloses Erlebnis zu bieten versuchen wir den Nutzer automatisch anzulegen, allerdings kann es sein, dass der Ausweis nicht weiter bearbeitet wird. In diesem Fall müssen wir den Ausweis nach einer Zeit wieder löschen, damit er nicht für immer in unserer Datenbank bleibt.
+
+```tefcha
+Nutzer Kommt auf unsere Seite
+
+if Nutzer ist eingeloggt
+	Ausweis wird erstellt und Nutzer zugewiesen
+else
+	Ausweis erstellen
+	-> Schritt 2
+	if Nutzer registriert sich
+		Ausweis wird verknüpft
+	else
+		Ausweis nach einer Woche gelöscht
+	
+usw...
+```
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
  "type": "module",
  "scripts": {
    "dev": "bun astro dev",
-    "build": "bun --bun astro build",
-    "preview": "bun --bun astro preview",
+    "build": "bun astro build",
+    "preview": "bun astro preview",
    "astro": "astro",
    "test:e2e": "cypress run",
    "test:unit": "bun test",
@@ -17,67 +17,60 @@
  },
  "private": true,
  "dependencies": {
-    "@astrojs/mdx": "^0.18.4",
-    "@astrojs/node": "^5.1.4",
+    "@astrojs/mdx": "^3.1.9",
+    "@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": "^3.7.0",
-    "@pdfme/common": "^3.2.3",
-    "@pdfme/generator": "^3.2.3",
-    "@pdfme/ui": "^3.2.3",
-    "@trpc/client": "^10.45.0",
-    "@trpc/server": "^10.45.0",
-    "astro": "^2.5.1",
+    "@pdfme/common": "^5.1.7",
+    "@pdfme/generator": "^5.1.7",
+    "@pdfme/ui": "^5.1.7",
+    "@trpc/client": "^10.45.2",
+    "@trpc/server": "^10.45.2",
+    "astro": "^4.16.10",
    "astro-i18next": "1.0.0-beta.21",
-    "astro-spa": "^1.3.9",
    "body-scroll-lock": "^4.0.0-beta.0",
    "buffer": "^6.0.3",
-    "bun": "^1.0.2",
-    "cookiejs": "^2.1.2",
+    "bun": "^1.1.34",
    "csvtojson": "^2.0.10",
-    "esbuild": "^0.18.17",
-    "express": "^4.18.2",
-    "flag-icons": "^6.9.2",
-    "fontkit": "^2.0.2",
-    "i18next": "^23.4.1",
-    "i18next-fs-backend": "^2.1.5",
-    "i18next-http-backend": "^2.2.1",
-    "jimp": "^0.22.8",
+    "express": "^4.21.1",
+    "flag-icons": "^6.15.0",
+    "fontkit": "^2.0.4",
+    "i18next": "^23.16.5",
+    "i18next-fs-backend": "^2.3.2",
+    "i18next-http-backend": "^2.6.2",
    "js-cookie": "^3.0.5",
-    "jwt-simple": "^0.5.6",
-    "katex": "^0.16.7",
-    "knex": "^2.4.2",
-    "moment": "^2.29.4",
-    "pg": "^8.11.0",
+    "js-interpolate": "^1.0.1",
+    "katex": "^0.16.11",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.46",
    "radix-svelte-icons": "^1.0.0",
-    "sass": "^1.62.1",
-    "svelte": "^3.59.1",
+    "sass": "^1.80.6",
+    "svelte": "^3.59.2",
    "svelte-dialogs": "^1.2.2",
-    "svelte-preprocess": "^5.0.3",
-    "svelte-ripple-action": "^1.0.5",
-    "svelte-tabs": "^1.1.0",
-    "tailwindcss": "^3.3.2",
+    "svelte-preprocess": "^5.1.4",
+    "svelte-ripple-action": "^1.0.6",
+    "tailwindcss": "^3.4.14",
    "trpc-openapi": "^1.2.0",
-    "uuid": "^9.0.0",
-    "vite-tsconfig-paths": "^4.2.0",
-    "zod": "^3.22.4"
+    "uuid": "^9.0.1",
+    "zod": "^3.23.8"
  },
  "devDependencies": {
-    "@faker-js/faker": "^8.3.1",
-    "@tailwindcss/typography": "^0.5.10",
+    "@faker-js/faker": "^8.4.1",
+    "@tailwindcss/typography": "^0.5.15",
    "@types/body-scroll-lock": "^3.1.2",
-    "@types/fontkit": "^2.0.6",
+    "@types/fontkit": "^2.0.7",
    "@types/js-cookie": "^3.0.6",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "bun-types": "^1.0.22",
-    "cypress": "^13.6.2",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "bun-types": "^1.1.34",
+    "cypress": "^13.15.2",
    "cypress-file-upload": "^5.0.8",
-    "daisyui": "^4.6.0",
+    "daisyui": "^4.12.14",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "prettier": "^2.8.8",
--- a/public/fonts/Antique
+++ b/public/fonts/Antique
--- a/Compact.woff2Zone.Identifier
+++ b/Compact.woff2Zone.Identifier
--- a/public/fonts/Antique-Olive-Std-Compact_3864.ttf
+++ b/public/fonts/Antique-Olive-Std-Compact_3864.ttf
--- a/public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier
+++ b/public/fonts/Antique-Olive-Std-Compact_3864.ttfZone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\all\Downloads\antique-olive-std.zip
--- a/public/fonts/HeronSans-Light.woff2
+++ b/public/fonts/HeronSans-Light.woff2
--- a/public/fonts/HeronSans-Light.woff2Zone.Identifier
+++ b/public/fonts/HeronSans-Light.woff2Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.eot
+++ b/public/fonts/HeronSans-Regular.eot
--- a/public/fonts/HeronSans-Regular.eotZone.Identifier
+++ b/public/fonts/HeronSans-Regular.eotZone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.ttf
+++ b/public/fonts/HeronSans-Regular.ttf
--- a/public/fonts/HeronSans-Regular.ttfZone.Identifier
+++ b/public/fonts/HeronSans-Regular.ttfZone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.woff
+++ b/public/fonts/HeronSans-Regular.woff
--- a/public/fonts/HeronSans-Regular.woff2
+++ b/public/fonts/HeronSans-Regular.woff2
--- a/public/fonts/HeronSans-Regular.woff2Zone.Identifier
+++ b/public/fonts/HeronSans-Regular.woff2Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSans-Regular.woffZone.Identifier
+++ b/public/fonts/HeronSans-Regular.woffZone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/fonts/HeronSansCond-SemiBold.woff2
+++ b/public/fonts/HeronSansCond-SemiBold.woff2
--- a/public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier
+++ b/public/fonts/HeronSansCond-SemiBold.woff2Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\all\Downloads\font (1).zip
--- a/public/images/header/UMBE_IBC-logo.ai
+++ b/public/images/header/UMBE_IBC-logo.ai
--- a/public/images/header/UMBE_IBC-logo.svg
+++ b/public/images/header/UMBE_IBC-logo.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-47fa9869-0485-4cc8-baa7-a95e76b06552" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520.36 163.25">
+  <defs>
+    <style>
+      .uuid-92c00f1f-4426-4074-bca2-c6271f6d612c {
+        fill: #878787;
+      }
+
+      .uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7 {
+        fill: #445096;
+      }
+    </style>
+  </defs>
+  <path class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" d="m19.04,143.74H4.66V62.52h14.38v81.22Z"/>
+  <path class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" d="m85.78,127.21c0,4.79-1.27,8.69-3.8,11.71-2.74,3.15-6.43,4.72-11.09,4.72h-36.45v-14.38h3.59v-52.37h-3.59v-14.38h36.45c4.65,0,8.35,1.58,11.09,4.72,2.53,3.01,3.8,6.91,3.8,11.71v10.99c0,5.96-1.82,10.3-5.44,13.04,3.63,3.01,5.44,7.43,5.44,13.25v10.99Zm-14.38-36.04v-9.34c0-3.22-1.71-4.83-5.13-4.83h-13.86v19h14.07c3.29,0,4.93-1.61,4.93-4.83Zm0,33.37v-9.24c0-1.44-.46-2.62-1.39-3.54s-2.11-1.39-3.54-1.39h-14.07v19h13.86c3.42,0,5.13-1.61,5.13-4.83Z"/>
+  <path class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" d="m180.38,82.09h-16.06c-3.68,0-6.59,1.23-8.64,3.66-2.03,2.4-3.06,5.46-3.06,9.1v36.14c0,3.64,1.03,6.7,3.06,9.1,2.06,2.43,4.96,3.66,8.64,3.66h16.06c3.68,0,6.58-1.23,8.64-3.66,2.03-2.4,3.06-5.49,3.06-9.19v-35.95c0-3.7-1.03-6.8-3.06-9.19-2.06-2.43-4.97-3.66-8.64-3.66Zm-.23,14.95v31.74c0,2.09-.99,3.02-3.21,3.02h-9.08c-2.29,0-3.31-.93-3.31-3.02v-31.74c0-2.09,1.02-3.02,3.31-3.02h9.08c2.22,0,3.21.93,3.21,3.02Z"/>
+  <path class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" d="m238.17,115.66c2.28-2.15,3.44-5.07,3.44-8.67v-12.24c0-3.38-.91-6.24-2.71-8.5-2.15-2.76-5.28-4.16-9.28-4.16h-27.48v61.65h11.93v-24.86h5.84l9.18,24.86h12.78l-9.42-25.19c2.22-.47,4.14-1.44,5.71-2.89Zm-8.49-18.42v6.41c0,2.29-.93,3.31-3.02,3.31h-12.58v-12.92h12.58c2.09,0,3.02.99,3.02,3.21Z"/>
+  <polygon class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" points="279.2 115 262.79 82.09 251.67 82.09 251.67 143.74 263.6 143.74 263.6 110.73 280.1 143.74 291.13 143.74 291.13 82.09 279.2 82.09 279.2 115"/>
+  <polygon class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" points="302.42 143.74 338.21 143.74 338.21 131.81 314.35 131.81 314.35 118.88 331.18 118.88 331.18 106.95 314.35 106.95 314.35 94.02 338.21 94.02 338.21 82.09 302.42 82.09 302.42 143.74"/>
+  <polygon class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" points="358.97 82.09 347.04 82.09 347.04 143.74 380.37 143.74 380.37 131.81 358.97 131.81 358.97 82.09"/>
+  <path class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" d="m414.23,82.09h-15.78c-3.68,0-6.63,1.3-8.78,3.85-1.94,2.27-2.92,5.23-2.92,8.81v10.04c0,6.66,3.56,10.97,10.63,12.84l13.93,2.77c2.03.51,2.98,1.84,2.98,4.19v3.82c0,2.32-1.14,3.4-3.59,3.4h-8.6c-2.32,0-3.4-1.17-3.4-3.69v-.79l-11.93,2.98v.48c0,3.9,1.07,7.06,3.17,9.4,2.12,2.35,5.06,3.55,8.73,3.55h15.01c8.34,0,12.56-4.39,12.56-13.04v-8.13c0-4.02-.92-7.14-2.72-9.28-1.61-1.94-4.23-3.36-7.81-4.23l-14.28-2.76c-1.86-.56-2.72-1.74-2.72-3.72v-5.35c0-2.22,1.05-3.21,3.4-3.21h8.32c2.65,0,3.88,1.2,3.88,3.79v.79l11.93-2.98v-.48c0-3.56-.91-6.55-2.71-8.88-2.09-2.76-5.21-4.16-9.28-4.16Z"/>
+  <polygon class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" points="436.27 143.74 472.06 143.74 472.06 131.81 448.2 131.81 448.2 118.88 465.03 118.88 465.03 106.95 448.2 106.95 448.2 94.02 472.06 94.02 472.06 82.09 436.27 82.09 436.27 143.74"/>
+  <polygon class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" points="508.42 82.09 508.42 115 492.02 82.09 480.89 82.09 480.89 143.74 492.82 143.74 492.82 110.73 509.33 143.74 520.36 143.74 520.36 82.09 508.42 82.09"/>
+  <path class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" d="m19.04,76.89v-14.38h3.68v14.38h-3.68Z"/>
+  <path class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" d="m.98,76.89v-14.38h3.68v14.38H.98Z"/>
+  <path class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" d="m19.04,143.74v-14.38h3.68v14.38h-3.68Z"/>
+  <path class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" d="m.98,143.74v-14.38h3.68v14.38H.98Z"/>
+  <path class="uuid-92c00f1f-4426-4074-bca2-c6271f6d612c" d="m125.96,129.36h-11.81c-3.56,0-5.34-1.64-5.34-4.93v-43.14c0-3.29,1.78-4.93,5.34-4.93h11.81c3.63,0,5.44,1.92,5.44,5.75h13.06c.01-7.39-.04-12.68-2.74-15.66-2.71-2.98-6.42-4.47-11.14-4.47h-21.05c-5.07,0-8.93,1.71-11.6,5.13-2.33,2.88-3.49,6.61-3.49,11.19v49.09c0,4.59,1.16,8.32,3.49,11.19,2.67,3.42,6.54,5.13,11.6,5.13h21.05c4.72,0,8.44-1.49,11.14-4.47,2.7-2.98,2.75-8.27,2.74-15.66h-13.06c0,3.83-1.81,5.75-5.44,5.75Z"/>
+  <polygon class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" points="91.86 13.59 72.72 0 53.59 13.59 .98 51.58 20.12 51.58 72.72 13.59 125.33 51.58 144.46 51.58 91.86 13.59"/>
+  <path class="uuid-3ec9ac84-c90e-408d-a733-809f91ec0ac7" d="m0,163.25v-9.33h520.36v9.33H0Z"/>
+</svg>
--- a/public/images/header/UMBE_logo-big.svg
+++ b/public/images/header/UMBE_logo-big.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-de1e7f63-0c42-470b-9cfb-9abb297e0f12" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.06 123.91">
+  <defs>
+    <style>
+      .uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac {
+        fill: #3d46a3;
+      }
+
+      .uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac, .uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd {
+        fill-rule: evenodd;
+      }
+
+      .uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd {
+        fill: #848b91;
+      }
+
+      .uuid-437b8d44-715a-4bf2-8481-68132d40d3d1 {
+        fill: #3b459d;
+      }
+    </style>
+  </defs>
+  <g id="uuid-82d1ab86-69f5-424d-b90e-8bdf256bee5f" data-name="g5671">
+    <path id="uuid-cd6aa3b9-6f05-490c-8ef2-3571588b94a7" data-name="path5677" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m99.93,93.22c3.87.98,7.67,1.93,11.49,2.9-.04,3.86-.82,7.4-3.68,10.17-2.28,2.21-5.11,3.09-8.21,3.1-5.91.03-11.81,0-17.72.01-7,.01-11.01-5.12-11.63-10.69-.09-.84-.12-1.69-.12-2.54,0-13.17-.03-26.35,0-39.53,0-3.58,1.08-6.81,3.6-9.45,2.13-2.23,4.84-3.17,7.85-3.19,6.05-.05,12.09-.08,18.13,0,7.76.11,10.93,5.38,11.61,10.8.1.82.13,1.65.2,2.54-3.85,1-7.66,1.99-11.53,2.99-.04-.35-.08-.63-.11-.92-.19-2.18-1.57-3.6-3.76-3.8-.82-.08-1.65-.08-2.48-.09-2.47-.01-4.94-.01-7.41,0-.49,0-.99.03-1.47.13-2.07.4-3.09,1.74-3.11,4.11-.02,1.48,0,3.78,0,3.78,0,.37,0,.97,0,1.33v28.55c0,3.1,3.75,4.22,3.75,4.22.35.1.94.19,1.31.19h8.7c2.79,0,4.23-1.3,4.52-4.08.01-.15.05-.31.09-.53"/>
+    <path id="uuid-b7a5e321-3bac-4878-8e16-b5a91ac6964f" data-name="path5679" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m211.34,64.04c0-.37.3-.67.67-.67h6.75c.37,0,.67.3.67.67v44.72c0,.37-.3.67-.67.67h-.27c-2.05,0-4.11,0-6.16,0-.34,0-.52-.08-.68-.4-3.19-6.37-6.4-12.73-9.6-19.09-1.09-2.17-2.18-4.34-3.28-6.5l-.06-.12c-.13-.21-.24-.08-.24.29v25.13c0,.37-.3.67-.67.67h-6.76c-.37,0-.67-.3-.67-.67v-44.72c0-.37.3-.67.67-.67h.52c1.96,0,3.91.01,5.87-.01.44,0,.66.14.85.53,4.22,8.42,8.45,16.83,12.68,25.24.09.17.18.34.38.49v-25.54Z"/>
+    <path id="uuid-14d91d42-52e1-4383-912b-718d5552121d" data-name="path5681" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m397.06,108.76c0,.37-.3.67-.67.67,0,0-3.92,0-6.19-.02-.17,0-.39-.22-.49-.39-1.31-2.57-2.6-5.14-3.9-7.71-2.99-5.94-5.99-11.88-8.98-17.82l-.07-.13c-.13-.22-.25-.1-.25.27v25.09c0,.37-.3.67-.67.67h-6.77c-.37,0-.67-.3-.67-.67v-44.71c0-.37.29-.67.64-.67,2.13,0,4.26.01,6.4-.01.47,0,.69.15.89.56,4.25,8.49,8.52,16.97,12.78,25.45l.04.09c.1.18.17.03.17-.34v-25.03c0-.37.3-.67.67-.67h6.37c.37,0,.67.3.67.67v44.71Z"/>
+    <path id="uuid-5673c601-d2a1-4ccc-9646-350f9c0c153c" data-name="path5683" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m162.87,81.63c0,.37.19.68.41.7h.17c3.14,0,6.28,0,9.42,0,1.76,0,2.81-1.02,2.84-2.78.02-1.76.03-3.52,0-5.27-.03-1.87-.99-2.78-2.86-2.79-3.14,0-8.75,0-8.75,0h-.95c-.15,0-.28.3-.28.67v9.48Zm-.02,8.83v18.26c0,.37-.3.67-.67.67h-6.77c-.37,0-.67-.3-.67-.67v-45.32c.1-.02.21-.06.33-.06,6.81,0,13.63,0,20.44,0,5.36,0,8.25,4.29,8.33,8.38.07,3.67.06,7.35,0,11.02-.06,3.49-2.61,6.54-6.05,7.37-.3.07-.61.13-.99.22,2.36,6.38,6.83,18.45,6.83,18.45.13.34-.07.62-.44.62h-8.05c-.49-1.31-.99-2.63-1.48-3.96-1.81-4.84-3.61-9.69-5.43-14.52-.07-.19-.32-.44-.48-.45-1.6-.03-3.19-.02-4.89-.02"/>
+    <path id="uuid-53215661-af4c-482b-aabe-0c99430e6b10" data-name="path5685" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m140.12,87.07v-12.52c0-2.14-.93-3.07-3.08-3.07-2.19,0-4.39,0-6.58,0-2.31,0-3.25.94-3.26,3.23,0,7.8,0,15.6,0,23.41,0,.3,0,.6.05.89.19,1.27.91,2.01,2.18,2.23.33.06.67.09,1,.09,2.18,0,4.35,0,6.52,0,2.22,0,3.15-.93,3.16-3.13v-11.13Zm-21.01-.68c0-4.72,0-9.44,0-14.16,0-1.62.32-3.18,1.07-4.63,1.42-2.7,3.68-4.17,6.71-4.23,4.52-.08,9.05-.11,13.57,0,4.15.11,7.01,2.88,7.6,7.08.1.68.15,1.38.15,2.07,0,9.3,0,18.6,0,27.91,0,1.62-.28,3.18-1,4.65-1.36,2.78-3.65,4.25-6.7,4.31-4.56.09-9.12.07-13.69,0-3.85-.05-6.91-2.9-7.54-6.9-.12-.72-.17-1.45-.17-2.18-.01-4.64,0-9.28,0-13.92"/>
+    <path id="uuid-937e127c-2f65-47a9-a395-3fa2a236bc9d" data-name="path5687" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m318.19,74.78c-.02-.2-.03-.35-.04-.51-.21-1.69-1.23-2.72-2.94-2.75-2.43-.06-4.86-.05-7.29,0-1.59.04-2.49.91-2.58,2.51-.08,1.61-.08,3.24,0,4.85.09,1.6,1.12,2.64,2.69,2.93,3.51.67,7.02,1.31,10.52,2.03,2.2.46,4.22,1.31,5.73,3.09,1.16,1.36,1.82,2.97,1.87,4.71.1,3.55.28,7.13-.05,10.64-.45,4.66-3.4,7.07-8.11,7.13-4.15.04-8.29.02-12.44.01-4.49-.01-7.62-2.77-8.22-7.23-.08-.57-.08-1.14-.14-1.71-.03-.33.12-.45.41-.52,2.52-.63,5.05-1.26,7.66-1.92.03.2.07.38.08.57.18,1.71.95,2.61,2.66,2.67,2.54.09,5.1.07,7.64-.03,1.55-.06,2.44-1.06,2.52-2.62.06-1.3.06-2.61,0-3.91-.09-1.67-1.11-2.73-2.85-3.07-3.25-.64-6.51-1.25-9.76-1.93-2.47-.51-4.7-1.49-6.39-3.46-1.38-1.61-1.94-3.51-1.96-5.58-.03-2.92-.06-5.85,0-8.77.08-3.4,1.49-6.09,4.54-7.77,1.09-.6,2.31-.8,3.55-.8,4.27-.01,8.54-.02,12.8,0,2.22.01,4.2.68,5.75,2.36,1.73,1.88,2.43,4.16,2.46,6.68,0,.16-.2.43-.35.48-2.5.66-5,1.28-7.51,1.92-.05.01-.12,0-.24-.01"/>
+    <path id="uuid-e21f2cfb-411b-47e9-92a5-77307d1bfbcb" data-name="path5689" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m332.82,64.04c0-.37.3-.67.67-.67h27.74c.37,0,.67.3.67.67v6.78c0,.37-.3.67-.67.67h-19.6c-.37,0-.67.3-.67.67v9.51c0,.37.3.67.67.67h11.43c.37,0,.67.3.67.67v6.79c0,.37-.3.67-.67.67h-11.42c-.37,0-.67.3-.67.67v9.55c0,.37.3.67.67.67h19.6c.37,0,.67.3.67.67v6.74c0,.37-.3.67-.67.67h-27.74c-.37,0-.67-.3-.67-.67v-44.69Z"/>
+    <path id="uuid-bb067a0a-0347-44e8-8866-09b23461da83" data-name="path5691" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m225.99,64.04c0-.37.3-.67.67-.67h27.74c.37,0,.67.3.67.67v6.77c0,.37-.3.67-.67.67h-19.63c-.37,0-.67.3-.67.67v9.53c0,.37.3.67.67.67h11.45c.37,0,.67.3.67.67v6.77c0,.37-.3.67-.67.67h-11.44c-.37,0-.67.3-.67.67v9.55c0,.37.3.67.67.67h19.63c.37,0,.67.3.67.67v6.75c0,.37-.3.67-.67.67h-27.74c-.37,0-.67-.3-.67-.67v-44.69Z"/>
+    <path id="uuid-bcbd012e-62b7-41a4-ac44-152f7811e7ac" data-name="path5693" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m262.25,109.4c-.37,0-.67-.3-.67-.67v-44.69c0-.37.3-.67.67-.67h6.75c.37,0,.67.3.67.67v36.62c0,.37.3.67.67.67h19.66c.37,0,.67.3.67.67v6.73c0,.37-.3.67-.67.67h-27.75Z"/>
+    <path id="uuid-7c380c1e-6c63-46da-a6e6-562299827e44" data-name="path5695" class="uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac" d="m35.62,70.1c0,.37.3.67.67.67h10.47c.31,0,.61,0,.92-.03,2.07-.18,3.35-1.55,3.4-3.74.05-2.62.05-5.24,0-7.87-.03-2.01-1.07-3.22-2.95-3.6-.44-.09-.88-.14-1.33-.14-3.46-.01-6.91,0-10.38,0-.27,0-.53.02-.8.03v14.67Zm.01,27.11c0,.37.16.69.36.72h.16c3.68,0,7.36.03,11.04,0,2.45-.02,3.86-1.47,3.89-3.95.03-2.48.02-4.96,0-7.44-.01-2.77-1.42-4.16-4.19-4.17-3.46,0-9.7,0-9.7,0h-1.11c-.25,0-.45.3-.45.67v14.18Zm-14.49,12.16v-10.83c0-.37.3-.67.67-.67h1.49c.37,0,.67-.3.67-.67v-41.21c0-.37-.3-.67-.67-.67h-1.47c-.37,0-.67-.3-.67-.67v-10.31c0-.37.3-.67.67-.67h.31c9.51,0,19.03,0,28.54,0,7.85,0,11.41,5.3,11.81,10.93.32,4.58.19,9.2.02,13.79-.12,3.2-1.57,5.89-4.3,8.12.37.26.72.45.99.72,2.5,2.6,3.42,5.85,3.47,9.34.06,3.93.11,7.87-.16,11.79-.3,4.18-2.07,7.67-5.95,9.77-1.52.83-3.18,1.25-4.9,1.26-10.07.03-20.15.02-30.21.02-.08,0-.16-.03-.29-.06"/>
+    <path id="uuid-0d8d7c4b-cae8-4bbd-9433-4cfb06ef99b2" data-name="path5697" class="uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac" d="m11.78,108.73c0,.37-.3.67-.67.67H.99c-.37,0-.67-.3-.67-.67V44.42c0-.37.3-.67.67-.67h10.13c.37,0,.67.3.67.67v64.31Z"/>
+    <path id="uuid-0c4facb8-29f9-41ca-a997-e50d301bb8a6" data-name="path5707" class="uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac" d="m395.33,117.25c.76,0,1.38.3,1.38.67v5.33c0,.37-.62.67-1.38.67H1.55c-.76,0-1.38-.3-1.38-.67v-5.33c0-.37.62-.67,1.38-.67h393.78Z"/>
+    <path id="uuid-e70966d7-5260-4673-943b-995e2f50ff74" data-name="path5713" class="uuid-437b8d44-715a-4bf2-8481-68132d40d3d1" d="m50.17.41c-.5,0-1.03.21-1.58.58C32.8,11.81,17.01,22.61,1.17,33.36c-1,.68-1.31,1.36-.96,2.5h12.71c11.93-8.13,23.88-16.25,35.79-24.42,1.1-.76,2.01-.74,3.08-.04,12.53,8.17,25.05,16.31,37.58,24.46h13.08c.3-1.05.17-1.76-.83-2.42C84.96,22.63,68.36,11.8,51.71.95c-.54-.35-1.04-.55-1.54-.54"/>
+  </g>
+</svg>
--- a/public/images/pattern.png
+++ b/public/images/pattern.png
--- a/public/images/right-sidebar/UMBE_gewerbe-1.svg
+++ b/public/images/right-sidebar/UMBE_gewerbe-1.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 272 112">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #445096;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #c6c6c6;
+      }
+
+      .cls-4 {
+        display: none;
+      }
+
+      .cls-3 {
+        fill: #ff7d26;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_1" data-name="Ebene 1">
+    <g class="cls-4">
+      <path class="cls-1" d="M63.1,66L104.8,11.6l52.2,63.6s72.2,24.3,98.8-11.4l-26.6-38.8-27.2-4.4V0h-19.8v39.7h-7.1v-22.8L102.5,4l-39.4,62Z"/>
+      <polygon class="cls-1" points="73.5 39.1 92.7 14.2 48.4 14.2 11.1 72.9 50 19.2 73.5 39.1"/>
+      <g>
+        <rect class="cls-2" x="91.5" y="35.3" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="104.3" y="35.3" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="91.5" y="49.5" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="104.3" y="49.5" width="11.3" height="12.7"/>
+      </g>
+      <g>
+        <rect class="cls-2" x="41.9" y="35.4" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="49" y="35.4" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="41.9" y="45.3" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="49" y="45.3" width="5.7" height="8.5"/>
+      </g>
+    </g>
+    <path class="cls-3" d="M273,66c-1.3,6-4.1,11.6-7.5,16.7-3.5,5.1-7.8,9.7-12.7,13.5-4.9,3.9-10.4,6.9-16.2,9.3-5.8,2.3-11.8,3.9-17.9,5-12.3,2-24.7,1.6-36.9-.2-12.1-1.8-24-5-35.4-9.3,11.9,2.6,23.8,4.9,35.8,6,6,.5,12,.9,18,.8,6,0,11.9-.5,17.8-1.5,11.7-1.9,23.1-5.9,32.8-12.8,4.8-3.4,9.2-7.5,13-12.1,3.8-4.6,7-9.8,9.2-15.5Z"/>
+    <path class="cls-3" d="M1,87.9c5-3.1,10.5-5.6,16-7.8,5.6-2.2,11.3-3.9,17.1-5.4,11.6-2.9,23.6-4.6,35.6-5,12-.4,24.1.3,36.1,2.2,6,.9,11.9,2.2,17.7,3.6,2.9.7,5.9,1.5,8.7,2.4,2.8.8,5.6,1.6,8.4,2.4,5.6,1.6,11.2,3.1,16.8,4.4,5.6,1.4,11.3,2.6,16.9,3.7,11.3,2.1,22.7,3.5,34,3.3,11.3-.2,22.5-2.1,32.5-7.4,2.5-1.3,4.9-2.8,7.2-4.4,2.3-1.7,4.4-3.6,6.6-5.5,4.2-4,7.8-8.6,11.2-13.5-2.2,5.5-5.1,10.7-8.8,15.6-3.6,4.8-8.1,9.1-13.2,12.6-5.1,3.5-10.8,6.1-16.7,8-5.9,1.9-12,3-18.1,3.5-12.2,1.1-24.4.1-36.3-1.6-11.9-1.8-23.6-4.6-35-7.8-2.9-.8-5.8-1.7-8.6-2.5-2.8-.9-5.5-1.6-8.3-2.4-5.5-1.5-11.1-2.8-16.8-3.8-11.3-2.2-22.7-3.5-34.2-3.9-11.5-.4-23.1,0-34.6,1.6-5.8.7-11.5,1.7-17.2,3-2.9.6-5.7,1.3-8.5,2.1-2.8.8-5.6,1.6-8.4,2.6Z"/>
+  </g>
+  <g id="Ebene_3" data-name="Ebene 3">
+    <path class="cls-1" d="M107.8,67.6V.1l-32.3,11v54.6c10.8-.3,21.6.4,32.3,1.9Z"/>
+    <path class="cls-1" d="M251.4,67.4c0-6.7,0-45.9,0-45.9l-26.8-6.8v67.1s12.9-.9,26.1-12.8.7-1,.7-1.6Z"/>
+    <g>
+      <polygon class="cls-1" points="111.7 9 111.7 .8 221.3 21.7 221.3 28.4 111.7 9"/>
+      <polygon class="cls-1" points="112.3 23.6 112.3 14.7 221.3 32.1 221.3 38 112.3 23.6"/>
+      <polygon class="cls-1" points="112.3 37.8 112.3 28.9 221.3 40.9 221.3 46.8 112.3 37.8"/>
+      <polygon class="cls-1" points="112.3 52.1 112.3 43.2 221.3 50.2 221.3 56.1 112.3 52.1"/>
+      <polygon class="cls-1" points="112.3 65.4 112.3 56.6 221.3 59.2 221.3 65.1 112.3 65.4"/>
+      <path class="cls-1" d="M126.5,71.3c2.8.7,5.7,1.5,8.4,2.3,1.1.3,2.2.6,3.3.9l83.1.6v-5.9l-109-.7h0c4.8.8,9.6,1.7,14.3,2.8Z"/>
+    </g>
+    <g>
+      <polygon class="cls-1" points="20.1 50.4 20 44.6 72.8 21 72.8 40.6 20.1 50.4"/>
+      <polygon class="cls-1" points="72.8 55.9 20.3 61.7 20.2 54 72.8 45 72.8 55.9"/>
+      <path class="cls-1" d="M52.6,67.9c6.7-1.1,13.4-1.8,20.2-2.1v-5.2l-52.4,4.4.2,7.9,32.1-4.9Z"/>
+    </g>
+  </g>
+</svg>
--- a/public/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg
+++ b/public/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg
@@ -0,0 +1,39 @@
+<?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: #fff;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #ff7d26;
+      }
+    </style>
+  </defs>
+  <g id="Wellen">
+    <path class="cls-2" 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-2" 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-1" d="M102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
+    <path class="cls-1" 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-1" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
+      <polygon class="cls-1" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
+      <polygon class="cls-1" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
+      <polygon class="cls-1" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
+      <polygon class="cls-1" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
+      <path class="cls-1" 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-1" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
+      <polygon class="cls-1" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
+      <path class="cls-1" 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>
--- a/public/images/right-sidebar/UMBE_gewerbegebaeude.svg
+++ b/public/images/right-sidebar/UMBE_gewerbegebaeude.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
+  <defs>
+    <style>
+      .uuid-31b37071-25c8-4180-bba8-979a017d54db {
+        fill: #fff;
+      }
+
+      .uuid-17f03b4e-e1d1-4987-9bff-ade6fe52d6f9 {
+        fill: #ff7d26;
+      }
+
+      .uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8 {
+        fill: #445096;
+      }
+    </style>
+  </defs>
+  <g id="uuid-9fbd4d12-41cf-439b-ac20-79a8a6d86a8c" data-name="Wellen">
+    <path class="uuid-17f03b4e-e1d1-4987-9bff-ade6fe52d6f9" 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="uuid-17f03b4e-e1d1-4987-9bff-ade6fe52d6f9" 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="uuid-7329def7-567e-4920-b714-6e743891010b" data-name="Wohngebaeude">
+    <g>
+      <path class="uuid-31b37071-25c8-4180-bba8-979a017d54db" 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="uuid-31b37071-25c8-4180-bba8-979a017d54db" 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="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="90.51" y="35.34" width="11.33" height="12.75"/>
+        <rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="103.26" y="35.34" width="11.33" height="12.75"/>
+        <rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="90.51" y="49.51" width="11.33" height="12.75"/>
+        <rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="103.26" y="49.51" width="11.33" height="12.75"/>
+      </g>
+      <g>
+        <rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="40.93" y="35.41" width="5.67" height="8.5"/>
+        <rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="48.02" y="35.41" width="5.67" height="8.5"/>
+        <rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="40.93" y="45.33" width="5.67" height="8.5"/>
+        <rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="48.02" y="45.33" width="5.67" height="8.5"/>
+      </g>
+    </g>
+  </g>
+  <g id="uuid-a8b79e96-2fac-427e-b8b7-d3d0001eccc1" data-name="Gewerbegebaeude">
+    <path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" d="m102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
+    <path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" 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="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
+      <polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
+      <polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
+      <polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
+      <polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
+      <path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" 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="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
+      <polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
+      <path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" 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>
--- a/public/images/right-sidebar/UMBE_telefon-1.svg
+++ b/public/images/right-sidebar/UMBE_telefon-1.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-30bfcab6-bf04-4c4b-b8c9-a63fbc68588a" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 98.11 100.64">
+  <image width="100" height="104" transform="translate(0 -.91)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABoCAYAAAAHIFUvAAAG9ElEQVR4nO2da4hVVRTHx0dTvsjUHgZF2YdKpSyEyrGsBGsKsaaXZg8zIrKMXpSYpJ8Uow9RqdWXJgyDCCojykgwew0k9DbIrCl6Z1a2psYeTv/F3jMcz9zXOXevs/a+sz/8EGfunL3X+s29c84+a6/T1NPT0xTxB/UJ9ELLJh4GVoJPwd+gJ1C+B0+DlmCFYPJzwB4PkumaR0FzUEIw4VbwnwfJk2J9MEIw2ZHgRw+SJk1bKEIWCyXgT/BbTiTm0xGKkBcFgn8DDK5jTjcJSTkkBCEfCwS+GywFt+XgdvC6kJDJIQjpFAreR6ZEIX4RhXhGsEI6GwBqGCGa83EYV3sU4hFRiGdEIZ4x4IXg544C55NZNa7pAiwKcSwErx0BbgUflQj+vVoTEIXUKQSvGQoWkbkRVOm8nxcKJ0QhQkLwvUHgMrCjiogkme5FRCE1CsHXZ4BtGUT0wnchB0UhjoTg/8eDF3KISDI6CqlTCP49FDwC/q1TBjM8CqlDCFgCfncggtmpFFdDCXHJ8ijEHyE7wYgopPZJTwC/CMngj7yTFGMLRwgmdjC4H+wVktEFztCSEYwQMlfYXNHxk+DH1M9gqqaMIIRgMueRTIVJku3gOG0ZXgvBJCaCl4VFMBvBKG0R3grB4OPAGnJzYVcJrgnmGqzCl0eCEIJBm8GdJFeSmeQHcLZ28r0VggHbwOcFiGA2gyO0E2/jPgiMBuPBMZZnS8z5TPs6ZoiYEBz8VJIrvyz1EbWiUkAFSRgCbgaf5IzjH7AJTHcmBAc70r419xUkg0+XZ3nwjuCP5Zcc/oItqksIDjAc3EfmAqwIEcxr/AugLcPGv1rgXd93IZtlIsPAPWT+mBYloptMVboXZ1FkVhm6BeLcmEkIfmAm+LJAEUwHmKQtIZWHWUKx7qlZCF68jIrdA9hl3xW5N90ICrlWKu6qQsgUFawr+F3BHKud+Ao5uUgo5r21CHlIQUaPZEIdCDlaKO53KgrBC27UkOG7EJsbiX2RV5cVgm9OJpkziUYRwtdf3ziMmbs+9J1FpgcbDN7VkhGCEJsnXiZ5rs5Y/yBzwrTfqkN6oIWaMkIRknq3XAAWZGA+OAcMK3XM5MF5SeDrKESXpJBrtGWEJIRMWxD+jeez0fYMPAFWgZnVhLytLSMUIWQa5rjo0bIVjO8nBF88QVtEKEIwx7PIbT8v7g82Mi1kibaIEISQWb3Iew+kEivSQt7UFhGIkJOF4t7RJ4TMLUhvWuppJ72KkCuE4t6XFDJdW0JAQq6UjpsHuUVbQkBCWoTi/jYp5GFtCQEJ4XLYaptN87AmKWSTtoRQhFgpVzmOeRcl6gV4gA+0JYQkxEq5i9xUZX5HqeJwPniRRQsNIcRK4brlB8lcbb+fAW5qwPXOXOHZrx6ZD1xkOU/DCJGiSVtAyELI3D/iJfgpGZhEFTqURiH5RBxIpliwnjMuboQwOwqpXwZXbr7lMOZ700KKqs1tFCFrBeI+NylEcs9fQwnB/MaQqVx3HfcrSSHbtSUEJKRVKO6upJBXtSUEJGSBdNxxLSubkNlCcXcnhVyvLSEgIXzNIXEStDUpZKq2hFCEWCnPCMR9SVLIAWQegKIuIxAhvOU7S5vBajyWPH7vIPV2bRswQmy+xpKpr6rnFJjLiHjj6H67w3oHmK8tIiQhCTG8xW0amX0jtXIhOIXK7CTuPTAvB/yqLSM0IRIkba/SlhGSEDIPwrwDbADPZ+RxMi1vh1YSwn+sSj33IgrpL2Oeo1x9SKlmz+mBlkYhVWW4fhBmJxhTTggXzUmUSjaEEDI3pCT6uawuKcQOyne01G7raie9ihCpi+gvygqxA88lpfsk2kmvImSudNyVBpd64mXIQuapCbET4OXmQguxtZNeJR+nCcX9VU1C7CRmkNttwCEL4T5ZEvswH6hZiJ0IX6M8OdCF2Fxc7Dhm/mUfl0lIYjLcpm7LQBZi83AD+MtBvJ+BE5PHzjuh08FTJLBsr53sDDngvifLybSo3ZKiVHnuNvu9zTZ3vOu5OX3ceifFW4O5+eVaa3vACKmSl/YSsam0iR1l3z2Xk3lwV7Xnl++OQgSF5Jh4ZxTiuRDKvpTtI6VOjYMV0qhEISXgVQdeze73tysKKV7IejDWjsvL6NeRm2uJKCQH3KmiX1EBmTPBKERByMIy43NzaOlHagQlRPqpO71cWmEORRUJ1vRYcW0hEh0+S7GuzPjTChqfKbuv0CchiwtKBlcYtqbGPpxKP4tdgo5ac6IthNfCXHRmqwW+Jc2dRO8m05ZvV4HvjrYghFgprstqfCPTM93VhVgpc8g8+1w7ea7h3vn9lti9F2KlcGnmSjI9CL1pqJYD3rvO3apb8uRBXUQkCvGa/wG2XdzngACtIgAAAABJRU5ErkJggg=="/>
+</svg>
--- a/public/images/right-sidebar/UMBE_user-icon.svg
+++ b/public/images/right-sidebar/UMBE_user-icon.svg
--- a/public/images/right-sidebar/UMBE_wohngebaeude-weiss.svg
+++ b/public/images/right-sidebar/UMBE_wohngebaeude-weiss.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: #fff;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #ff7d26;
+      }
+    </style>
+  </defs>
+  <g id="Wellen">
+    <path class="cls-2" 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-2" 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-1" 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-1" 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-1" x="90.51" y="35.34" width="11.33" height="12.75"/>
+        <rect class="cls-1" x="103.26" y="35.34" width="11.33" height="12.75"/>
+        <rect class="cls-1" x="90.51" y="49.51" width="11.33" height="12.75"/>
+        <rect class="cls-1" x="103.26" y="49.51" width="11.33" height="12.75"/>
+      </g>
+      <g>
+        <rect class="cls-1" x="40.93" y="35.41" width="5.67" height="8.5"/>
+        <rect class="cls-1" x="48.02" y="35.41" width="5.67" height="8.5"/>
+        <rect class="cls-1" x="40.93" y="45.33" width="5.67" height="8.5"/>
+        <rect class="cls-1" x="48.02" y="45.33" width="5.67" height="8.5"/>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/public/images/right-sidebar/UMBE_wohngebaeude.svg
+++ b/public/images/right-sidebar/UMBE_wohngebaeude.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 272 112">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #445096;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #c6c6c6;
+      }
+
+      .cls-4 {
+        display: none;
+      }
+
+      .cls-3 {
+        fill: #ff7d26;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_4" data-name="Ebene 4">
+    <path class="cls-3" d="M272,66c-1.3,6-4,11.6-7.4,16.7-3.4,5.1-7.7,9.7-12.6,13.5-4.8,3.9-10.3,6.9-16,9.3-5.7,2.3-11.7,3.9-17.8,5-12.2,2-24.5,1.6-36.6-.2-12-1.8-23.8-5-35.1-9.3,11.8,2.6,23.6,4.9,35.5,6,5.9.5,11.9.9,17.8.8,5.9,0,11.8-.5,17.7-1.5,11.6-1.9,22.9-5.9,32.5-12.8,4.8-3.4,9.2-7.5,12.9-12.1,3.7-4.6,6.9-9.8,9.1-15.5Z"/>
+    <path class="cls-3" d="M1,87.9c5-3.1,10.5-5.6,16-7.8,5.6-2.2,11.3-3.9,17.1-5.4,11.6-2.9,23.6-4.6,35.6-5,12-.4,24.1.3,36.1,2.2,6,.9,11.9,2.2,17.7,3.6,2.9.7,5.9,1.5,8.7,2.4,2.8.8,5.6,1.6,8.4,2.4,5.6,1.6,11.2,3.1,16.8,4.4,5.6,1.4,11.3,2.6,16.9,3.7,11.3,2.1,22.7,3.5,34,3.3,11.3-.2,22.5-2.1,32.5-7.4,2.5-1.3,4.9-2.8,7.2-4.4,2.3-1.7,4.4-3.6,6.6-5.5,4.2-4,7.8-8.6,11.2-13.5-2.2,5.5-5.1,10.7-8.8,15.6-3.6,4.8-8.1,9.1-13.2,12.6-5.1,3.5-10.8,6.1-16.7,8-5.9,1.9-12,3-18.1,3.5-12.2,1.1-24.4.1-36.3-1.6-11.9-1.8-23.6-4.6-35-7.8-2.9-.8-5.8-1.7-8.6-2.5-2.8-.9-5.5-1.6-8.3-2.4-5.5-1.5-11.1-2.8-16.8-3.8-11.3-2.2-22.7-3.5-34.2-3.9-11.5-.4-23.1,0-34.6,1.6-5.8.7-11.5,1.7-17.2,3-2.9.6-5.7,1.3-8.5,2.1-2.8.8-5.6,1.6-8.4,2.6Z"/>
+  </g>
+  <g id="Ebene_1" data-name="Ebene 1">
+    <g>
+      <path class="cls-1" d="M63.1,66L104.8,11.6l52.2,63.6s72.2,24.3,98.8-11.4l-26.6-38.8-27.2-4.4V0h-19.8v39.7h-7.1v-22.8L102.5,4l-39.4,62Z"/>
+      <polygon class="cls-1" points="73.5 39.1 92.7 14.2 48.4 14.2 11.1 72.9 50 19.2 73.5 39.1"/>
+      <g>
+        <rect class="cls-2" x="91.5" y="35.3" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="104.3" y="35.3" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="91.5" y="49.5" width="11.3" height="12.7"/>
+        <rect class="cls-2" x="104.3" y="49.5" width="11.3" height="12.7"/>
+      </g>
+      <g>
+        <rect class="cls-2" x="41.9" y="35.4" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="49" y="35.4" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="41.9" y="45.3" width="5.7" height="8.5"/>
+        <rect class="cls-2" x="49" y="45.3" width="5.7" height="8.5"/>
+      </g>
+    </g>
+  </g>
+  <g id="Ebene_3" data-name="Ebene 3" class="cls-4">
+    <path class="cls-1" d="M103.4,67.3V.5l-34.3,10.8v54c11.4-.3,22.9.4,34.3,1.9Z"/>
+    <path class="cls-1" d="M255.8,65.2c0-6.6,0-45.4,0-45.4l-24.9-6.7v66.4s12-.8,24.2-12.7c.4-.4.7-1,.7-1.6Z"/>
+    <g>
+      <polygon class="cls-1" points="107.6 9.3 107.6 1.2 227.7 21.8 227.7 28.5 107.6 9.3"/>
+      <polygon class="cls-1" points="108.2 23.8 108.2 15 227.7 32.2 227.7 38 108.2 23.8"/>
+      <polygon class="cls-1" points="108.2 37.8 108.2 29 227.7 40.9 227.7 46.7 108.2 37.8"/>
+      <polygon class="cls-1" points="108.2 52 108.2 43.2 227.7 50.1 227.7 56 108.2 52"/>
+      <polygon class="cls-1" points="108.2 65.2 108.2 56.4 227.7 59 227.7 64.9 108.2 65.2"/>
+      <path class="cls-1" d="M123.8,70.9c3.1.7,6.2,1.5,9.2,2.3,1.2.3,2.4.6,3.6.9l91.1.5v-5.9l-119.4-.7h0c5.2.8,10.5,1.7,15.6,2.8Z"/>
+    </g>
+    <g>
+      <polygon class="cls-1" points="10.3 50.2 10.2 44.5 66.3 21.2 66.3 40.6 10.3 50.2"/>
+      <polygon class="cls-1" points="66.3 55.7 10.6 61.5 10.4 53.8 66.3 44.9 66.3 55.7"/>
+      <path class="cls-1" d="M44.9,67.6c7.1-1.1,14.2-1.8,21.4-2.1v-5.2l-55.6,4.3.2,7.8,34-4.9Z"/>
+    </g>
+  </g>
+</svg>
--- a/public/images/right-sidebar/UMBE_wohnhaus-1.svg
+++ b/public/images/right-sidebar/UMBE_wohnhaus-1.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 112">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #445096;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #c6c6c6;
+      }
+
+      .cls-3 {
+        fill: #ff7d26;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" 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-1" 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-2" x="90.51" y="35.34" width="11.33" height="12.75"/>
+      <rect class="cls-2" x="103.26" y="35.34" width="11.33" height="12.75"/>
+      <rect class="cls-2" x="90.51" y="49.51" width="11.33" height="12.75"/>
+      <rect class="cls-2" x="103.26" y="49.51" width="11.33" height="12.75"/>
+    </g>
+    <g>
+      <rect class="cls-2" x="40.93" y="35.41" width="5.67" height="8.5"/>
+      <rect class="cls-2" x="48.02" y="35.41" width="5.67" height="8.5"/>
+      <rect class="cls-2" x="40.93" y="45.33" width="5.67" height="8.5"/>
+      <rect class="cls-2" x="48.02" y="45.33" width="5.67" height="8.5"/>
+    </g>
+  </g>
+  <path class="cls-3" d="M272,66.01c-1.3,5.97-4.08,11.58-7.49,16.72-3.48,5.11-7.77,9.7-12.68,13.54-4.88,3.88-10.4,6.93-16.15,9.32-5.78,2.35-11.83,3.94-17.94,4.98-12.27,1.95-24.74,1.59-36.85-.24-12.13-1.81-23.98-5.03-35.36-9.32,11.89,2.6,23.79,4.87,35.77,6.03,5.99.54,11.98.93,17.96.81,5.98-.06,11.94-.48,17.8-1.48,11.71-1.85,23.11-5.93,32.8-12.75,4.83-3.42,9.24-7.47,12.99-12.12,3.76-4.64,6.97-9.81,9.16-15.48Z"/>
+  <path class="cls-3" 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"/>
+</svg>
--- a/public/images/right-sidebar/icon_wohnhaus_01.ai
+++ b/public/images/right-sidebar/icon_wohnhaus_01.ai
--- a/public/images/right-sidebar/promo-boxes.ai
+++ b/public/images/right-sidebar/promo-boxes.ai
--- a/public/images/right-sidebar/user-icon.psd
+++ b/public/images/right-sidebar/user-icon.psd
--- a/src/client/lib/UMBE_card_navigation.js
+++ b/src/client/lib/UMBE_card_navigation.js
--- a/src/client/lib/bilderHochladen.ts
+++ b/src/client/lib/bilderHochladen.ts
@@ -0,0 +1,65 @@
+import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+import { Enums } from "@ibcornelsen/database/client";
+import { addNotification, updateNotification } from "@ibcornelsen/ui";
+import { client } from "src/trpc";
+
+export async function bilderHochladen(images: (UploadedGebaeudeBild & { base64?: string })[], gebaeude_uid: string) {
+	if (images.length == 0) {
+		return images;
+	}
+
+	// Wenn Bilder hochgeladen werden konvertieren wir sie zu base64, das heißt, dass die base64 Eigenschaft bei diesen Bildern
+	// existiert. Das müssen wir TypeScript nur wissen lassen, damit es uns in Ruhe lässt.
+	const imagesToUpload = images.filter(image => !image.uid || image.update) as unknown as { base64: string, kategorie: string, uid?: string, update: boolean }[];
+
+	if (imagesToUpload.length == 0) {
+		return images;
+	}
+
+	// Alle Bilder hochladen
+	const notification = addNotification({
+		dismissable: false,
+		message: "Bilder hochladen.",
+		subtext: `${imagesToUpload.length} Bilder werden hochgeladen, bitte haben sie Geduld.`,
+		timeout: 0,
+		type: "info"
+	})
+	for (let i = 0; i < imagesToUpload.length; i++) {
+		const image = imagesToUpload[i];
+
+		try {
+			if (image.update) {
+				await client.v1.bilder.update.mutate({
+					uid: image.uid as string,
+					base64: image.base64,
+					kategorie: image.kategorie as Enums.BilderKategorie
+				})
+			} else {
+				const response = await client.v1.bilder.upload.mutate({
+					base64: image.base64,
+					kategorie: image.kategorie as Enums.BilderKategorie,
+					gebaeude_uid
+				})
+	
+				image.uid = response.uid
+			}
+
+			updateNotification(notification, {
+				dismissable: true,
+				message: "Bild hochgeladen.",
+				subtext: `${i + 1}/${imagesToUpload.length} Bildern wurden erfolgreich hochgeladen.`,
+				timeout: 3000
+			})
+		} catch (e) {
+			updateNotification(notification, {
+				dismissable: true,
+				message: "Bild konnte nicht hochgeladen werden.",
+				subtext: `Eines ihrer Bilder konnte nicht hochgeladen werden. Wir haben bereits ein Ticket erstellt und melden uns so schnell wie möglich bei ihnen.`,
+				timeout: 15000,
+				type: "error"
+			})
+		}
+	}
+
+	return images;
+}
--- a/src/client/lib/validateAccessToken.ts
+++ b/src/client/lib/validateAccessToken.ts
@@ -1,6 +1,6 @@
 import Cookies from "js-cookie";
-import { API_ACCESS_TOKEN_COOKIE_NAME, API_REFRESH_TOKEN_COOKIE_NAME, API_UID_COOKIE_NAME } from "../../lib/constants";
-import { client } from "src/trpc";
+import { API_ACCESS_TOKEN_COOKIE_NAME, API_REFRESH_TOKEN_COOKIE_NAME, API_UID_COOKIE_NAME } from "#lib/constants.js";
+import { client } from "../../trpc.js";
 import moment from "moment";


--- a/src/client/lib/verbrauchsausweisWohnenSpeichern.ts
+++ b/src/client/lib/verbrauchsausweisWohnenSpeichern.ts
@@ -0,0 +1,86 @@
+import {
+	BenutzerClient,
+	GebaeudeAufnahmeClient,
+	GebaeudeClient,
+	UploadedGebaeudeBild,
+	VerbrauchsausweisWohnenClient,
+} from "#components/Ausweis/types";
+
+import { exclude } from "#lib/exclude";
+import { client } from "src/trpc";
+import { bilderHochladen } from "./bilderHochladen";
+import { addNotification } from "@ibcornelsen/ui";
+
+export async function verbrauchsausweisWohnenSpeichern(
+	ausweis: VerbrauchsausweisWohnenClient,
+	gebaeude: GebaeudeClient,
+	gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient,
+	images: (UploadedGebaeudeBild & { base64?: string })[],
+	user: BenutzerClient
+) {
+	if (ausweis.uid) {
+		// Anscheinend wurde der Ausweis bereits erstellt und hat eine UID.
+		// Jetzt müssen wir ihn nun nur noch abspeichern.
+		try {
+			await client.v1.verbrauchsausweisWohnen[2016].speichern.mutate({
+				...ausweis,
+				gebaeude_aufnahme_allgemein: {
+					...exclude(
+						gebaeude_aufnahme_allgemein,
+						["erstellungsdatum", "events", "ausstellungsdatum", "rechnungen"]
+					),
+					gebaeude_stammdaten: {
+						...exclude(gebaeude, [
+							"gebaeude_bilder",
+						]),
+					},
+				},
+			});
+
+			images = await bilderHochladen(images, gebaeude.uid);
+
+			return  { uid: ausweis.uid, gebaeude_uid: gebaeude.uid, gebaeude_aufnahme_uid: gebaeude_aufnahme_allgemein.uid };
+		} catch (e) {
+			// TODO: Ticket mit Fehldermeldung abschicken.
+		}
+	} else {
+		// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
+		try {
+			const response =
+				await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
+					...ausweis,
+					gebaeude_aufnahme_allgemein: {
+						...gebaeude_aufnahme_allgemein,
+						gebaeude_stammdaten: {
+							...gebaeude,
+						},
+					},
+				});
+
+			images = await bilderHochladen(images, response.gebaeude_uid);
+
+			return response;
+		} catch (e: any) {
+			await client.v1.tickets.erstellen.mutate({
+				titel: "Ausweis konnte nicht gespeichert werden",
+				beschreibung: e.stack,
+				email: user.email ?? "",
+				metadata: JSON.stringify({
+					ausweis,
+				}),
+			});
+			// TODO: Ticket mit Fehldermeldung abschicken.
+		}
+	}
+
+	addNotification({
+		dismissable: false,
+		message:
+			"Ausweis konnte nicht gespeichert werden, bitte versuchen sie es erneut.",
+		subtext:
+			"Sollte das Problem weiterhin bestehen, kontaktieren sie bitte den Support.",
+		timeout: 6000,
+		type: "error",
+	});
+	return null;
+}
--- a/src/components/AnsichtsausweisButton.svelte
+++ b/src/components/AnsichtsausweisButton.svelte
@@ -1,17 +1,10 @@
 <script lang="ts">
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { Buffer } from "buffer";
-	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";

-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: GebaeudeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient;

-	let base64: string = "";
-	$: {
-		if (ausweis && gebaeude) {
-			base64 = Buffer.from(JSON.stringify({...ausweis, gebaeude_stammdaten: gebaeude}), "utf-8").toString("base64");
-		}
-	}
+	$: base64 = Buffer.from(JSON.stringify(ausweis), "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/ansichtsausweis?base64={base64}">
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -5,8 +5,6 @@
 	import ImageGrid from "../ImageGrid.svelte";
 	import {
 	Enums,
-		type BedarfsausweisWohnen,
-		type VerbrauchsausweisGewerbe,
 	} from "@ibcornelsen/database/client";

 	import {
@@ -15,12 +13,8 @@
 		VerbrauchsausweisWohnenClient,
 	} from "./types";

-	export let ausweis:
-		| VerbrauchsausweisWohnenClient
-		| VerbrauchsausweisGewerbe
-		| BedarfsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let gebaeude: GebaeudeClient;
-
 	export let images: UploadedGebaeudeBild[] = [];
 </script>

@@ -53,8 +47,8 @@
 		<hr class="trenner_form_100" />

 		<div class="flex flex-row gap-4">
-			<AnsichtsausweisButton {ausweis} {gebaeude} />
-			<DatenblattButton {ausweis} {gebaeude} />
+			<AnsichtsausweisButton {ausweis} />
+			<DatenblattButton {ausweis} />
 		</div>
 	</div>
 </div>
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -139,7 +139,7 @@
 				required
 				bind:value={gebaeude_aufnahme_allgemein.saniert}
 			>
-				<option disabled>Bitte auswählen</option>
+				<option disabled selected value={false}>Bitte auswählen</option>
 				<option value={true}>saniert</option>
 				<option value={false}>unsaniert</option>
 			</select>
--- a/src/components/Ausweis/BilderZusatzsysteme.svelte
+++ b/src/components/Ausweis/BilderZusatzsysteme.svelte
@@ -5,10 +5,6 @@
 	import DaemmungImage from "./DaemmungImage.svelte";
 	import FensterImage from "./FensterImage.svelte";
 	import Label from "../Label.svelte";
-	import type {
-		BedarfsausweisWohnen,
-		VerbrauchsausweisGewerbe,
-	} from "@ibcornelsen/database/client";
 	import {
 	GebaeudeAufnahmeClient,
 		GebaeudeClient,
@@ -18,10 +14,7 @@

 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
-	export let ausweis:
-		| VerbrauchsausweisWohnenClient
-		| VerbrauchsausweisGewerbe
-		| BedarfsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnenClient
 	export let images: UploadedGebaeudeBild[];
 </script>

@@ -388,4 +381,4 @@
 	als PDF anschauen</Label
 >

-<AusweisPreviewContainer {ausweis} {gebaeude} />
+<AusweisPreviewContainer bind:images bind:ausweis bind:gebaeude />
--- a/src/components/Ausweis/PerformanceScore.svelte
+++ b/src/components/Ausweis/PerformanceScore.svelte
@@ -1,17 +1,31 @@
 <script lang="ts">
 	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
 	import ThickArrowDown from "radix-svelte-icons/src/lib/icons/ThickArrowDown.svelte";
-	import { BedarfsausweisWohnenClient, GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types";
+	import {
+		BedarfsausweisWohnenClient,
+		GebaeudeAufnahmeClient,
+		GebaeudeClient,
+		VerbrauchsausweisGewerbeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./types";
 	import ThickArrowUp from "radix-svelte-icons/src/lib/icons/ThickArrowUp.svelte";

 	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
+	export let gebaeude: GebaeudeClient;

 	let maxPerformance = 250;

 	/**
 	 * We use linear interpolation to scale the value between the given boundaries.
-	*/
-	function centerValueBetweenBoundaries(value: number, newMinimum: number, newMaximum: number, oldMinimum: number = 0, oldMaximum: number = 100): number {
+	 */
+	function centerValueBetweenBoundaries(
+		value: number,
+		newMinimum: number,
+		newMaximum: number,
+		oldMinimum: number = 0,
+		oldMaximum: number = 100
+	): number {
 		// Calculate the center point of the current range
 		const center = (oldMinimum + oldMaximum) / 2;

@@ -31,33 +45,62 @@
 		const scaledValue = shiftedValue * scalingFactor;

 		// Shift the scaled value back to the center of the new range
-		const centeredValue = scaledValue + ((newMaximum + newMinimum) / 2);
+		const centeredValue = scaledValue + (newMaximum + newMinimum) / 2;

 		return centeredValue;
 	}

-
 	let translation_1 = 0;
 	let translation_2 = 0;
 	$: {
 		(async () => {
-			const result = (await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis));
+			const result = await endEnergieVerbrauchVerbrauchsausweis_2016({
+				...ausweis,
+				gebaeude_aufnahme_allgemein: {
+					...gebaeude_aufnahme_allgemein,
+					gebaeude_stammdaten: gebaeude,
+				},
+			});
+
+			console.log(result, ausweis);

 			if (!result) {
-				return
+				return;
 			}
-			//const primaerEnergieVerbrauch = (await ausweis.primaerEnergieBedarf);
-			translation_1 = Math.max(0, Math.min(100, result.endEnergieVerbrauchGesamt / maxPerformance * 100))
-			//translation_2 = Math.max(0, Math.min(100, primaerEnergieVerbrauch / maxPerformance * 100))
-		})()
+			translation_1 = Math.max(
+				0,
+				Math.min(
+					100,
+					(result.endEnergieVerbrauchGesamt / maxPerformance) * 100
+				)
+			);
+			translation_2 = Math.max(0, Math.min(100, result.primaerEnergieVerbrauchGesamt / maxPerformance * 100))
+		})();
 	}
-
 </script>

 <div class="w-full rounded-lg border-[#ffcc03] border-2 relative p-2">
-	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
-	<ThickArrowDown size={28} class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
-	style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(translation_1, 50, -150, 0, 100)}%)" />
-	<ThickArrowUp size={28} class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
-	style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(translation_2, 50, -150, 0, 100)}%)" />
+	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
+	<ThickArrowDown
+		size={28}
+		class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
+		style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
+			translation_1,
+			50,
+			-150,
+			0,
+			100
+		)}%)"
+	/>
+	<ThickArrowUp
+		size={28}
+		class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
+		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
+			translation_2,
+			50,
+			-150,
+			0,
+			100
+		)}%)"
+	/>
 </div>
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -4,13 +4,20 @@
 	import Label from "../Label.svelte";
 	import fuelList from "./brennstoffListe";
 	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung";
-	import type { VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types";

-	let availableYears = [
-		2018, 2019,
-	];
-	let availableMonths = [
+	export let gebaeude: GebaeudeClient;
+	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient;
+	// 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
+	// kann der Nutzer nur 36 + 18 Monate zurückgehen.
+	let availableDates: {
+		year: number;
+		month: number;
+	}[] = [];
+
+	let monthNames = [
 		"Januar",
 		"Februar",
 		"März",
@@ -25,9 +32,15 @@
 		"Dezember",
 	];

-	export let gebaeude: GebaeudeClient;
-	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe;
+	const startDate = moment(ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()).subtract(4, "years").subtract(6, "months");
+	const endDate = moment(ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()).subtract(3, "years");
+	
+	for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
+		availableDates.push({
+			year: m.year(),
+			month: m.month(),
+		});
+	}

 	const fuelMap: Record<string, string[]> = {};
 	for (const fuel of fuelList) {
@@ -36,14 +49,15 @@
 		fuelMap[fuel[0]].push(fuel[1]);
 	}
 	
-	let month: string = "01";
-	let year: string = "2018";
+
+	let month = ausweis.startdatum?.getMonth() || null;
+	let year = ausweis.startdatum?.getFullYear() || null;

 	$: {
-		if (month && year) {
-			ausweis.startdatum = moment(`${month}.01.${year}`).toDate();
-			console.log(ausweis.startdatum);
-			
+		if (typeof month === "number" && typeof year === "number") {
+			// Wir addieren einfach 2 Tage auf das Datum, falls der Nutzer außerhalb Deutschlands und in einer anderen Zeitzone ist.
+			// NOTE: Das ist eine grauenvolle Lösung aber alle anderen funktionieren irgendwie nicht...
+			ausweis.startdatum = moment().set("month", month).set("year", year).startOf("month").add(2, "days").toDate();
 		}
 	}

@@ -170,9 +184,18 @@
 					required
 				>
 					<option>auswählen</option>
-					{#each availableMonths as m, i}
-						<option value={i + 1}>{m}</option>
-					{/each}
+					{#if year !== null}
+						{#each availableDates.filter(date => date.year == year) as date}
+							<option value={date.month}>{monthNames[date.month]}</option>
+						{/each}
+					{:else}
+						{#each Array.from(availableDates.reduce((a,c) => {
+							a.add(c.month);
+							return a;
+						}, new Set())) as month}
+							<option value={month}>{monthNames[month]}</option>
+						{/each}
+					{/if}
 				</select>

 				<select
@@ -182,8 +205,11 @@
 					required
 				>
 					<option>auswählen</option>
-					{#each availableYears as y}
-						<option value={y}>{y}</option>
+					{#each Array.from(availableDates.reduce((a,c) => {
+						a.add(c.year);
+						return a;
+					}, new Set())) as year}
+						<option value={year}>{year}</option>
 					{/each}
 				</select>
 			</div>
@@ -242,7 +268,7 @@
 		</div>
 		<div class="flex flex-col gap-2">
 			<div class="column">
-				<span>Verbrauch</span>
+				<span>Verbrauch *</span>
 				<input
 					name="verbrauch_1"
 					type="number"
@@ -252,7 +278,7 @@
 				/>
 			</div>
 			<div class="column">
-				<span>Verbrauch</span>
+				<span>Verbrauch *</span>
 				<input
 					name="verbrauch_2"
 					type="number"
@@ -262,7 +288,7 @@
 				/>
 			</div>
 			<div class="column">
-				<span>Verbrauch</span>
+				<span>Verbrauch *</span>
 				<input
 					name="verbrauch_3"
 					type="number"
--- a/src/components/Ausweis/types.ts
+++ b/src/components/Ausweis/types.ts
@@ -2,11 +2,9 @@ import { AppRouter } from "@ibcornelsen/api";
 import { Benutzer, GebaeudeBilder } from "@ibcornelsen/database/client";
 import { inferProcedureInput, inferProcedureOutput } from "@trpc/server";

-export type UploadedGebaeudeBild = Omit<
-	GebaeudeBilder,
-	"id" | "gebaeude_stammdaten_id" | "uid"
-> &
-	({ base64: string; uid?: string });
+export type UploadedGebaeudeBild = inferProcedureOutput<
+AppRouter["v1"]["verbrauchsausweisWohnen"]["get"]
+>["gebaeude_aufnahme_allgemein"]["gebaeude_stammdaten"]["gebaeude_bilder"][0] & { base64?: string, update?: boolean };


 /**
--- a/src/components/AusweisPruefenBox.svelte
+++ b/src/components/AusweisPruefenBox.svelte
@@ -5,24 +5,24 @@
 	VerbrauchsausweisWohnenClient,
 	} from "./Ausweis/types.js";
 	import AusweisPruefenTooltip from "./AusweisPruefenTooltip.svelte";
-	import { addNotification } from "./NotificationProvider/shared";
+	import { addNotification } from "./NotificationProvider/shared.js";
+	import { CheckCircled, CrossCircled, Image } from "radix-svelte-icons";
+	import ChevronDown from "radix-svelte-icons/src/lib/icons/ChevronDown.svelte";
+	

 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let calculations: Awaited<
 		ReturnType<typeof endEnergieVerbrauchVerbrauchsausweis_2016>
 	>;

+	console.log(ausweis);
+
 	const gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein
 	

 	const ausweisArt = "VA"; // TODO: Das ist ein Platzhalter, hier muss die Ausweisart aus dem Ausweisobjekt kommen

-
-
-	try {
-		// TODO: In Zukunft sollen die Bilder von unserer API kommen, das ist allerdings noch nicht ganz fertig.
-		// images = JSON.parse(ausweis.images)
-	} catch (e) {}
+	const images = ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten.gebaeude_bilder;

 	let verbrauchWWGesamt_1 = "";
 	let verbrauchWWGesamt_2 = "";
@@ -158,13 +158,13 @@
 			if (gebaeude_aufnahme_allgemein.solarsystem_warmwasser) {
 				// Wenn Warmwasser Anteil unbekannt und Solarsystem
 				verbrauchWWGesamt_1 =
-					calculations?.energetische_nutzfläche +
+					calculations?.energetischeNutzflaeche +
 					" m² x 12 kWh/m² x 3 Jahre";
 				solarsystemWarmwasser = "Solarsystem Warmwasser";
 			} else {
 				// Wenn Warmwasser Anteil unbekannt und **kein** Solarsystem
 				verbrauchWWGesamt_1 =
-					calculations?.energetische_nutzfläche +
+					calculations?.energetischeNutzflaeche +
 					" m² x 20 kWh/m² x 3 Jahre";
 				solarsystemWarmwasser = "kein Solarsystem Warmwasser";
 			}
@@ -174,14 +174,14 @@

 		tooltip3Z1 = "Wohnfläche in m²";
 		tooltip3Z2 =
-		gebaeude_aufnahme_allgemein.faktorKeller +
+		ausweis.faktorKeller +
 			" x " +
 			gebaeude_aufnahme_allgemein.flaeche +
 			" m² Energetische Nutzfläche (Keller " +
 			ausweis.keller_beheizt +
 			" ) in m²";
 			table3Z1 = gebaeude_aufnahme_allgemein.flaeche;
-			table3Z2 = calculations?.energetische_nutzfläche;
+			table3Z2 = calculations?.energetischeNutzflaeche;

 	
 		tooltip4Z1 =
@@ -261,7 +261,7 @@
 	
 	
 		tooltip8Z1 =
-			calculations?.energetische_nutzfläche +
+			calculations?.energetischeNutzflaeche +
 			" m² x 6 kWh/m² x 3 Jahre >> Kühlungszuschlag in kWh";
 		tooltip8Z2 = "";
 		table8Z1 = calculations?.kuehlungsZuschlag;
@@ -277,7 +277,7 @@
 			" + " +
 			calculations?.energieVerbrauchHeizungBereinigt_2 +
 			") / (3 * " +
-			calculations?.energetische_nutzfläche +
+			calculations?.energetischeNutzflaeche +
 			") >> Durchschnittsverbrauch Heizung in kWh";
 		table9Z1 =
 			calculations?.faktorDurchschnittsEnergieVerbrauchHeizungBereinigt;
@@ -288,7 +288,7 @@
 				"faktorDurchschnittsEnergieVerbrauchHeizungBereinigt"
 			] +
 			" x " +
-			calculations.leerstand +
+			calculations?.leerstand +
 			" x (" +
 			calculations.energieVerbrauchHeizungBereinigt_1 +
 			" + " +
@@ -304,21 +304,13 @@
 		table10Z1 = calculations?.leerstandsZuschlagHeizung;
 		table10Z2 = calculations?.leerstandsZuschlagWarmwasser;

-		tooltip11Z1 =
-			"(" +
-			calculations?.energieVerbrauchHeizungBereinigt_1 +
-			" + " +
-			calculations?.energieVerbrauchWarmwasser_1 +
-			") / (3 Jahre x " +
-			calculations?.energetische_nutzfläche +
-			")  Endenergieverbrauch 1 in kWh/m²a";
 		tooltip11Z2 =
 			"(" +
 			calculations?.energieVerbrauchHeizungBereinigt_2 +
 			" + " +
 			calculations?.energieVerbrauchWarmwasser_2 +
 			") / (3 Jahre x " +
-			calculations?.energetische_nutzfläche +
+			calculations?.energetischeNutzflaeche +
 			")  Endenergieverbrauch 2 in kWh/m²a";
 		table11Z1 = calculations?.endEnergieVerbrauch_1;
 		table11Z2 = calculations?.endEnergieVerbrauch_2;
@@ -333,7 +325,7 @@
 			" x " +
 			calculations?.primaerfaktorww +
 			")) / (3 Jahre x " +
-			calculations?.energetische_nutzfläche +
+			calculations?.energetischeNutzflaeche +
 			")  Primärenergieverbrauch 1 in kWh/m²a";
 		tooltip12Z2 =
 			"((" +
@@ -345,7 +337,7 @@
 			" x " +
 			calculations?.primaerfaktorww_1 +
 			")) / (3 Jahre x " +
-			calculations?.energetische_nutzfläche +
+			calculations?.energetischeNutzflaeche +
 			") Primärenergieverbrauch 2 in kWh/m²a";
 		table12Z1 = calculations?.primaerEnergieVerbrauch_1;
 		table12Z2 = calculations?.primaerEnergieVerbrauch_2;
@@ -356,13 +348,13 @@
 			" + " +
 			calculations?.leerstandsZuschlagWarmwasser +
 			") / (3 Jahre x " +
-			calculations?.energetische_nutzfläche +
+			calculations?.energetischeNutzflaeche +
 			") Endenergieverbrauch Leerstand in kWh/m²a";
 		tooltip13Z2 =
 			"(" +
 			calculations?.kuehlungsZuschlag +
 			") / (3 Jahre x " +
-			calculations?.energetische_nutzfläche +
+			calculations?.energetischeNutzflaeche +
 			") Endenergieverbrauch Kühlung in kWh/m²a";
 		table13Z1 = calculations?.endEnergieVerbrauchLeerstandsZuschlag;
 		table13Z2 = calculations?.endEnergieVerbrauchKuehlungsZuschlag;
@@ -448,328 +440,433 @@

 		ausweis = ausweis;
 	}
+
+	let bilderModal: HTMLDialogElement;
+	let infoVisible = false;
 </script>

-<table class="table table-row border">
-	<tbody>
-		<tr>
-			<td width="30px"
-				><img
-					src="{StatusIcon}"
-					alt="Status"
-					class="w-8 h-8 max-w-8 max-h-8"
-				/>{zurueckGestellt}</td
-			>
-			<td width="150px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{gebaeude_aufnahme_allgemein.adresse} {gebaeude_aufnahme_allgemein.plz} {gebaeude_aufnahme_allgemein.ort}</span>
-						<br>
-						<span>{gebaeude_aufnahme_allgemein.gebaeudetyp}, Einheiten: {gebaeude_aufnahme_allgemein.einheiten}</span>
-					</div>
-					<span>{ausweisArt} - {ausweis.uid.split("-")[0]}</span>
-					<span>{moment(gebaeude_aufnahme_allgemein.erstellungsdatum).format("DD.MM.YYYY")}</span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="35px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>Baujahr Gebäude / Baujahr Heizung</span>
-					</div>
-					<span>{gebaeude_aufnahme_allgemein.baujahr_gebaeude.join(", ")}</span>
-						<span>{gebaeude_aufnahme_allgemein.baujahr_heizung.join(", ")}</span>
-				</AusweisPruefenTooltip>
-				<div class="tooltip" data-tip="">
-					
-				</div></td
-			>
-			<td width="45px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>Wohnfläche in m²</span>
-						<br>
-						<span>{gebaeude_aufnahme_allgemein.faktorKeller} x {gebaeude_aufnahme_allgemein.flaeche}m² Energetische Nutzfläche (Keller {gebaeude_aufnahme_allgemein.keller}) in m²</span>
-					</div>
-					<span>{gebaeude_aufnahme_allgemein.flaeche}</span>
-					<span><strong>{calculations?.energetische_nutzfläche}</strong></span>
-				</AusweisPruefenTooltip>
-				</td
-			>
-			<td width="90px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip4Z1}</span>
-						<br>
-						<span>{tooltip4Z2}</span>
-					</div>
-					<span>{table4Z1}</span>
-					<span>{table4Z2}</span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="70px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip5Z1}</span>
-						<br>
-						<span>{tooltip5Z2}</span>
-						<br>
-						<span>{tooltip5Z3}</span>
-					</div>
-					<span>{table5Z1}</span>
-					<span>{table5Z2}</span>
-				</AusweisPruefenTooltip>
-				</td
-			>
-			<td width="50px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip6Z1}</span>
-						<br>
-						<span>{tooltip6Z2}</span>
-					</div>
-					<span><strong>{table6Z1}</strong></span>
-					<span><strong>{table6Z2}</strong></span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="90px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip7Z1}</span>
-						<br>
-						<span>{tooltip7Z2}</span>
-					</div>
-					<span>{table7Z1}</span>
-					<span>{table7Z2}</span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="60px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip8Z1}</span>
-						<br>
-						<span>{tooltip8Z2}</span>
-					</div>
-					<span>{table8Z1}</span>
-					<span>{table8Z2}</span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="50px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip9Z1}</span>
-						<br>
-						<span>{tooltip9Z2}</span>
-					</div>
-					<span>{table9Z1}</span>
-					<span><strong>{table9Z2}</strong></span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="100px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip10Z1}</span>
-						<br>
-						<span>{tooltip10Z2}</span>
-					</div>
-					<span>{table10Z1}</span>
-					<span>{table10Z2}</span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="110px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip11Z1}</span>
-						<br>
-						<span>{tooltip11Z2}</span>
-					</div>
-					<span>{table11Z1}</span>
-					<span>{table11Z2}</span>
-				</AusweisPruefenTooltip></td
-			>
-			<td width="50px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip12Z1}</span>
-						<br>
-						<span>{tooltip12Z2}</span>
-					</div>
-					<span>{table12Z1}</span>
-					<span>{table12Z2}</span>
-				</AusweisPruefenTooltip>
-				</td
-			>
-			<td width="60px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip13Z1}</span>
-						<br>
-						<span>{tooltip13Z2}</span>
-					</div>
-					<span>{table13Z1}</span>
-					<span>{table13Z2}</span>
-				</AusweisPruefenTooltip>
-				</td
-			>
-			<td width="45px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip14Z1}</span>
-						<br>
-						<span>{tooltip14Z2}</span>
-					</div>
-					<span>{table14Z1}</span>
-					<span>{table14Z2}</span>
-				</AusweisPruefenTooltip>
-				</td
-			>
-			<td width="45px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip15Z1}</span>
-						<br>
-						<span>{tooltip15Z2}</span>
-					</div>
-					<span><strong>{table15Z1}</strong></span>
-					<span><strong>{table15Z2}</strong></span>
-				</AusweisPruefenTooltip>
-				</td
-			>
-			<td width="50px"
-				>
-				<AusweisPruefenTooltip>
-					<div slot="tooltip">
-						<span>{tooltip16Z1}</span>
-						<br>
-						<span>{tooltip16Z2}</span>
-					</div>
-					<span><strong>{table16Z1}</strong></span>
-					<span><strong>{table16Z2}</strong></span>
-				</AusweisPruefenTooltip>
-				</td
-			>
-			<td title="Gebäudebilder anzeigen" width="35px"
-				><div
-					class="imagePreview"
-					data-imagePreview="{imagePreview}"
-				>
-					<img
-						src="/images/dashboard/SymbolBilder.svg"
-						alt="Gebäudebilder"
-						width="35"
-						height="35"
-					/>
-				</div></td
-			>
-			<td width="30px"
-				><div class="checkTextPreviewButton">
-					<img src="{symbolPruefung}" alt="Boxpruefung" />
-					<div
-						class="checkTextPreview"
-						style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 450px; z-index:9999;"
+<div class="border rounded-box">
+	<table class="table table-row">
+		<tbody>
+			<tr>
+				<td><button on:click={() => infoVisible = !infoVisible}><ChevronDown size={22} class="transition-all {infoVisible ? "" : "rotate-180"}"></ChevronDown></button></td>
+				<td class="w-6 px-2"
 					>
-						{gebaeude_aufnahme_allgemein.prueftext}
+					{#if gebaeude_aufnahme_allgemein.erledigt}
+						<div class="tooltip" data-tip="Ausweis wurde ausgestellt">
+							<div class="rounded-full w-6 h-6 bg-success"></div>
+						</div>
+					{:else if gebaeude_aufnahme_allgemein.bestellt}
+						<div class="tooltip" data-tip="Ausweis wurde bestellt">
+							<div class="rounded-full w-6 h-6 bg-warning"></div>
+						</div>
+					{:else}
+						<div class="tooltip" data-tip="Ausweis ist in Bearbeitung">
+							<div class="rounded-full w-6 h-6 bg-error"></div>
+						</div>
+					{/if}
+					</td
+				>
+				<td width="150px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{gebaeude_aufnahme_allgemein.adresse} {gebaeude_aufnahme_allgemein.plz} {gebaeude_aufnahme_allgemein.ort}</span>
+							<br>
+							<span>{gebaeude_aufnahme_allgemein.gebaeudetyp}, Einheiten: {gebaeude_aufnahme_allgemein.einheiten}</span>
+						</div>
+						<span>{ausweisArt} - {gebaeude_aufnahme_allgemein.id}</span>
+						<span>{moment(gebaeude_aufnahme_allgemein.erstellungsdatum).format("DD.MM.YYYY")}</span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="35px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>Baujahr Gebäude / Baujahr Heizung</span>
+						</div>
+						<span>{gebaeude_aufnahme_allgemein.baujahr_gebaeude.join(", ")}</span>
+							<span>{gebaeude_aufnahme_allgemein.baujahr_heizung.join(", ")}</span>
+					</AusweisPruefenTooltip>
+					<div class="tooltip" data-tip="">
+						
+					</div></td
+				>
+				<td width="45px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>Wohnfläche in m²</span>
+							<br>
+							<span>{ausweis.faktorKeller} x {gebaeude_aufnahme_allgemein.flaeche}m² Energetische Nutzfläche (Keller {gebaeude_aufnahme_allgemein.keller}) in m²</span>
+						</div>
+						<span>{gebaeude_aufnahme_allgemein.flaeche}</span>
+						<span><strong>{calculations?.energetischeNutzflaeche}</strong></span>
+					</AusweisPruefenTooltip>
+					</td
+				>
+				<td width="90px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip4Z1}</span>
+							<br>
+							<span>{tooltip4Z2}</span>
+						</div>
+						<span>{table4Z1}</span>
+						<span>{table4Z2}</span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="70px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip5Z1}</span>
+							<br>
+							<span>{tooltip5Z2}</span>
+							<br>
+							<span>{tooltip5Z3}</span>
+						</div>
+						<span>{table5Z1}</span>
+						<span>{table5Z2}</span>
+					</AusweisPruefenTooltip>
+					</td
+				>
+				<td width="50px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip6Z1}</span>
+							<br>
+							<span>{tooltip6Z2}</span>
+						</div>
+						<span><strong>{table6Z1}</strong></span>
+						<span><strong>{table6Z2}</strong></span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="90px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip7Z1}</span>
+							<br>
+							<span>{tooltip7Z2}</span>
+						</div>
+						<span>{table7Z1}</span>
+						<span>{table7Z2}</span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="60px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip8Z1}</span>
+							<br>
+							<span>{tooltip8Z2}</span>
+						</div>
+						<span>{table8Z1}</span>
+						<span>{table8Z2}</span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="50px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip9Z1}</span>
+							<br>
+							<span>{tooltip9Z2}</span>
+						</div>
+						<span>{table9Z1}</span>
+						<span><strong>{table9Z2}</strong></span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="100px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip10Z1}</span>
+							<br>
+							<span>{tooltip10Z2}</span>
+						</div>
+						<span>{table10Z1}</span>
+						<span>{table10Z2}</span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="110px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>({calculations?.energieVerbrauchHeizungBereinigt_1} + {calculations?.energieVerbrauchWarmwasser_1}) / (3 Jahre x {calculations?.energetischeNutzflaeche}) Endenergieverbrauch 1 in kWh/m²a</span>
+							<br>
+							<span>{tooltip11Z2}</span>
+						</div>
+						<span>{table11Z1}</span>
+						<span>{table11Z2}</span>
+					</AusweisPruefenTooltip></td
+				>
+				<td width="50px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip12Z1}</span>
+							<br>
+							<span>{tooltip12Z2}</span>
+						</div>
+						<span>{table12Z1}</span>
+						<span>{table12Z2}</span>
+					</AusweisPruefenTooltip>
+					</td
+				>
+				<td width="60px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip13Z1}</span>
+							<br>
+							<span>{tooltip13Z2}</span>
+						</div>
+						<span>{table13Z1}</span>
+						<span>{table13Z2}</span>
+					</AusweisPruefenTooltip>
+					</td
+				>
+				<td width="45px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip14Z1}</span>
+							<br>
+							<span>{tooltip14Z2}</span>
+						</div>
+						<span>{table14Z1}</span>
+						<span>{table14Z2}</span>
+					</AusweisPruefenTooltip>
+					</td
+				>
+				<td width="45px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip15Z1}</span>
+							<br>
+							<span>{tooltip15Z2}</span>
+						</div>
+						<span><strong>{table15Z1}</strong></span>
+						<span><strong>{table15Z2}</strong></span>
+					</AusweisPruefenTooltip>
+					</td
+				>
+				<td width="50px"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{tooltip16Z1}</span>
+							<br>
+							<span>{tooltip16Z2}</span>
+						</div>
+						<span><strong>{table16Z1}</strong></span>
+						<span><strong>{table16Z2}</strong></span>
+					</AusweisPruefenTooltip>
+					</td
+				>
+				<td title="Gebäudebilder anzeigen"
+					><!-- Open the modal using ID.showModal() method -->
+	<button class="btn btn-square" on:click={() => bilderModal.showModal()}><Image size={22}></Image></button>
+	<dialog bind:this={bilderModal} class="modal">
+		<div class="modal-box flex flex-row gap-4 items-center justify-center">
+			{#if images.length === 0}
+				<div class="flex flex-col gap-4 items-center justify-center">
+					<p>Für diesen Ausweis sind noch keine Bilder vorhanden.</p>
+					<button class="btn btn-primary" tabindex="0">Erinnerung Verschicken</button>
+				</div>
+			{:else}
+				{#each images as image}
+					<div>
+						<h2 class="text-lg mb-4 font-bold">{image.kategorie}</h2>
+						<img src="/bilder/{image.uid}.webp">
 					</div>
-				</div></td
-			>
-			<td title="Ausweis anzeigen" width="50px"
-				><a
-					class="energieausweis-img"
-					href="/pdf/ansichtsausweis?uid={ausweis.uid}"
-					target="_blank"
-					><img
-						src="/images/dashboard/ausweis.jpg"
-						alt="Energieausweis"
-					/></a
-				></td
-			>
-			<td title="Datenblatt anzeigen" width="50px"
-				><a
-					class="energieausweis-img"
-					href="/pdf/datenblatt?uid={ausweis.uid}"
-					target="_blank"
-					><img
-						src="/images/dashboard/datenblatt.jpg"
-						alt="Datenblatt"
-					/></a
-				></td
-			>
-			<td
-				title="Ausweis stornieren und Zahlung wenn erforderlich automatisch zurückbuchen"
-				class="w-4 p-1"
-				><button
-					class="btn btn-xs btn-ghost"
-					on:click={() => stornieren(ausweis)}>S</button
-				></td
-			>
-			<td title="Ausweis ausstellen" class="w-4 p-1"
-				><button
-					class="btn btn-xs btn-ghost"
-					on:click={() => ausweisAusstellen('{gebaeude_aufnahme_allgemein.uid}')}>A</button
-				></td
-			>
-			<td
-				title="Ausweis ausstellen und per Post verschicken"
-				class="w-4 p-1"
-				><button
-					class="btn btn-xs btn-ghost"
-					on:click={() => ausweisAusstellenPost('{gebaeude_aufnahme_allgemein.uid}')}>P</button
-				></td
-			>
-			<td
-				title="E-Mail an Kunden schicken mit Erläuterungen warum der Ausweis noch nicht ausgestellt werden kann."
-				class="w-4 p-1"
-				><button
-					class="btn btn-xs btn-ghost"
-					on:click={() => ausweisnichtAusstellen('{gebaeude_aufnahme_allgemein.uid}')}>N</button
-				></td
-			>
-			<td
-				title="Bestellbestätigung nochmal schicken (Zahlung nicht erfolgreich)"
-				class="w-4 p-1"
-				><button
-					class="btn btn-xs btn-ghost"
-					on:click={() => bestellBestaetigung('{gebaeude_aufnahme_allgemein.uid}')}>B</button
-				></td
-			>
-			<td
-				title="E-Mail an Kunden schicken mit Erinnerung die Bestellung abzuschließen."
-				class="w-4 p-1"
-				><button
-					class="btn btn-xs btn-ghost"
-					on:click={() => erinnern('{gebaeude_aufnahme_allgemein.uid}')}
-					>E</button
-				></td
-			>
-			<td
-				title="Zum Formular mit allen Eingabedaten."
-				class="w-4 p-1"
-				><a
-					class="btn btn-xs btn-ghost"
-					target="_blank"
-					href="/energieausweis-erstellen/gespeichert?id={gebaeude_aufnahme_allgemein.uid}">F</a
-				></td
-			>
-			{@html gebaeude_aufnahme_allgemein.kontrolldatei
-				? `<td title="XML-Datei an das DiBT verschicken." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click="xmlAbschicken('{gebaeude_aufnahme_allgemein.uid}')">X</button></td>`
-				: ""}
-			{@html !gebaeude_aufnahme_allgemein.registriernummer
-				? `<td title="Registriernummer vom DiBT anfordern." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click="registriernummerAnfordern('{gebaeude_aufnahme_allgemein.uid}')">R</button></td>`
-				: ""}
-		</tr>
-	</tbody>
-</table>
+				{/each}
+			{/if}
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	</dialog></td
+				>
+				<td class="w-[30px]"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{gebaeude_aufnahme_allgemein.prueftext}</span>
+						</div>
+						{#if gebaeude_aufnahme_allgemein.boxpruefung}
+							<CheckCircled size={22}></CheckCircled>
+						{:else}
+							<CrossCircled size={22}></CrossCircled>
+						{/if}
+					</AusweisPruefenTooltip></td
+				>
+				<td title="Ausweis anzeigen" class="w-[50px]"
+					><a
+						class="energieausweis-img"
+						href="/pdf/ansichtsausweis?uid={ausweis.uid}"
+						target="_blank"
+						><img
+							src="/images/dashboard/ausweis.jpg"
+							alt="Energieausweis"
+							class="w-full h-8"
+						/></a
+					></td
+				>
+				<td title="Datenblatt anzeigen" width="50px"
+					><a
+						class="energieausweis-img"
+						href="/pdf/datenblatt?uid={ausweis.uid}"
+						target="_blank"
+						><img
+							src="/images/dashboard/datenblatt.jpg"
+							alt="Datenblatt"
+						/></a
+					></td
+				>
+				<td
+					title="Ausweis stornieren und Zahlung wenn erforderlich automatisch zurückbuchen"
+					class="w-4 p-1"
+					><button
+						class="btn btn-xs btn-ghost"
+						on:click={() => stornieren(ausweis)}>S</button
+					></td
+				>
+				<td title="Ausweis ausstellen" class="w-4 p-1"
+					><button
+						class="btn btn-xs btn-ghost"
+						on:click={() => ausweisAusstellen(gebaeude_aufnahme_allgemein.uid)}>A</button
+					></td
+				>
+				<td
+					title="Ausweis ausstellen und per Post verschicken"
+					class="w-4 p-1"
+					><button
+						class="btn btn-xs btn-ghost"
+						on:click={() => ausweisAusstellenPost(gebaeude_aufnahme_allgemein.uid)}>P</button
+					></td
+				>
+				<td
+					title="E-Mail an Kunden schicken mit Erläuterungen warum der Ausweis noch nicht ausgestellt werden kann."
+					class="w-4 p-1"
+					><button
+						class="btn btn-xs btn-ghost"
+						on:click={() => ausweisnichtAusstellen(gebaeude_aufnahme_allgemein.uid)}>N</button
+					></td
+				>
+				<td
+					title="Bestellbestätigung nochmal schicken (Zahlung nicht erfolgreich)"
+					class="w-4 p-1"
+					><button
+						class="btn btn-xs btn-ghost"
+						on:click={() => bestellBestaetigung(gebaeude_aufnahme_allgemein.uid)}>B</button
+					></td
+				>
+				<td
+					title="E-Mail an Kunden schicken mit Erinnerung die Bestellung abzuschließen."
+					class="w-4 p-1"
+					><button
+						class="btn btn-xs btn-ghost"
+						on:click={() => erinnern(gebaeude_aufnahme_allgemein.uid)}
+						>E</button
+					></td
+				>
+				<td
+					title="Zum Formular mit allen Eingabedaten."
+					class="w-4 p-1"
+					><a
+						class="btn btn-xs btn-ghost"
+						target="_blank"
+						href="/energieausweis-erstellen/gespeichert?id={gebaeude_aufnahme_allgemein.uid}">F</a
+					></td
+				>
+				{#if gebaeude_aufnahme_allgemein.kontrolldatei}
+					<td title="XML-Datei an das DiBT verschicken." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click={() => {
+						xmlAbschicken(gebaeude_aufnahme_allgemein.uid)
+					}}>X</button></td>
+				{/if}
+				{#if !gebaeude_aufnahme_allgemein.registriernummer}
+					<td title="Registriernummer vom DiBT anfordern." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click={() => {
+						registriernummerAnfordern(gebaeude_aufnahme_allgemein.uid)
+					}}>R</button></td>
+				{/if}
+			</tr>
+		</tbody>
+	</table>
+
+	<div class:hidden={!infoVisible} class:block={infoVisible} class="py-4 border-t">
+		<div class="grid grid-cols-[2fr_1fr] prose max-w-full">
+			<div class="border-r px-8">
+				<h3 class="mt-0">Wichtige Daten</h3>
+				<table>
+					<tbody>
+						<tr>
+							<td>Angewendete Berechnungsformel</td>
+							<td><strong>EnEV 2016</strong></td>
+						</tr>
+						<tr>
+							<td>Berechnungsergebnis</td>
+							<td>{calculations?.endEnergieVerbrauchGesamt}kWh/m2/A - Energieeffizienzklasse <strong>{calculations?.energieEffizienzKlasse}</strong></td>
+						</tr>
+						<tr>
+							<td>Informationen des Nutzers</td>
+							<td>{gebaeude_aufnahme_allgemein.boxpruefung}</td>
+						</tr>
+						<tr>
+							<td>UID</td>
+							<td><strong><pre>{ausweis.uid}</pre></strong></td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="px-8">
+				<h3 class="mt-0">Ereignisse</h3>
+				<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
+					<li>
+						<div class="timeline-middle">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
+						</div>
+						<div class="timeline-start md:text-end mb-10">
+							<time class="font-mono italic">{moment(ausweis.erstellungsdatum).format("DD.MM.YYYY - HH:mm")} Uhr</time>
+							<div class="text-lg font-black">Ausweis erstellt</div>
+						</div>
+						<hr/>
+					</li>
+					{#each ausweis.gebaeude_aufnahme_allgemein.events as event, i}
+						<li>
+							<hr />
+							<div class="timeline-middle">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
+							</div>
+							<div class="mb-10" class:timeline-end={i % 2 == 0} class:timeline-start={i % 2 == 1}>
+								<time class="font-mono italic">{moment(event.date).format("DD.MM.YYYY - HH:mm")} Uhr</time>
+								<div class="text-lg font-black">{event.title}</div>
+								{event.description || ""}
+							</div>
+							<hr />
+						</li>
+					{/each}
+					{#if ausweis.erledigt}
+					<li>
+						<hr />
+						<div class="timeline-middle">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
+						</div>
+						<div class="mb-10 timeline-end">
+							<time class="font-mono italic">{moment(ausweis.ausstellungsdatum).format("DD.MM.YYYY - HH:mm")} Uhr</time>
+							<div class="text-lg font-black">Ausweis ausgestellt</div>
+							{ausweis.registriernummer ? `Registriernummer: ${ausweis.registriernummer}` : ""}
+						</div>
+						<hr />
+					</li>
+					{/if}
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/components/Dashboard/DashboardAusweis.svelte
+++ b/src/components/Dashboard/DashboardAusweis.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import {
 	VerbrauchsausweisWohnenClient,
-	} from "#components/Ausweis/types";
+	} from "#components/Ausweis/types.js";
 	import moment from "moment";
 	import { dialogs } from "svelte-dialogs";
 	import {
@@ -11,10 +11,8 @@
 		Pencil2,
 		QuestionMarkCircled,
 	} from "radix-svelte-icons";
-	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
-	import { client } from "src/trpc";
-	import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
-	import { number } from "zod";
+	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
+	import { client } from "src/trpc.js";
 		
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let progress: number;
@@ -62,7 +60,7 @@
 <div class="card lg:card-side bg-base-200 card-bordered border-base-300">
 	{#if ausweis.gebaeude_aufnahme_allgemein.storniert}
 		<div class="absolute top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.7)] z-[5] rounded-lg select-none">
-			<h1 class="absolute -rotate-[25deg] text-7xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]">Storniert</h1>
+			<h1 class="absolute -rotate-[25deg] text-5xl md:text-7xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]">Storniert</h1>
 		</div>
 	{/if}
 	<figure class="lg:w-1/2">
@@ -78,7 +76,7 @@
 				<DotsVertical size={15} />
 			</button>
 			<ul
-				tabindex="0"
+				tabindex="-1"
 				class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64 gap-2"
 			>
 				<li>
@@ -97,15 +95,15 @@
 			</ul>
 		</div>
 		<div class="flex flex-row flex-wrap gap-2">
-			{#if ausweis.ausweisart == "VerbrauchsausweisWohnen"}
+			{#if ausweis.gebaeude_aufnahme_allgemein.ausweisart == "VerbrauchsausweisWohnen"}
 			<div class="badge badge-accent font-semibold">
 				Verbrauchsausweis Wohnen
 			</div>
-			{:else if ausweis.ausweisart == "BedarfsausweisWohnen"}
+			{:else if ausweis.gebaeude_aufnahme_allgemein.ausweisart == "BedarfsausweisWohnen"}
 			<div class="badge badge-accent font-semibold">
 				Bedarfsausweis Wohnen
 			</div>
-			{:else if ausweis.ausweisart == "VerbrauchsausweisGewerbe"}
+			{:else if ausweis.gebaeude_aufnahme_allgemein.ausweisart == "VerbrauchsausweisGewerbe"}
 			<div class="badge badge-accent font-semibold">
 				Verbrauchsausweis Gewerbe
 			</div>
@@ -159,11 +157,17 @@
 						: "N/A"}</span
 				>
 			</div>
+			<div class="flex flex-row justify-between">
+				<span>ID</span>
+				<span class="font-bold text-base-content"
+					>{ausweis.uid.split("-")[0]}</span
+				>
+			</div>
 		</div>
 		{/await}
 		<div class="card-actions justify-end mt-8">
 			<a class="btn btn-primary" href="/energieausweis-erstellen/verbrauchsausweis-wohnen?uid={ausweis.uid}">Bearbeiten</a>
-			<a class="btn btn-ghost" title="PDF Herunterladen" target="_blank" href="/pdf/ansichtsausweis?ausweis_uid={ausweis.uid}">
+			<a class="btn btn-ghost" title="PDF Herunterladen" target="_blank" href="/pdf/ansichtsausweis?uid={ausweis.uid}">
 				<Download size={22} />
 			</a>
 		</div>
--- a/src/components/Dashboard/DashboardSidebar.svelte
+++ b/src/components/Dashboard/DashboardSidebar.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { ripple } from "svelte-ripple-action";
 	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
-	import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed } from "radix-svelte-icons"
+	import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed, HamburgerMenu } from "radix-svelte-icons"
 	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
 	import DashboardNotification from "./DashboardNotification.svelte";
 	import { notifications } from "#components/NotificationProvider/shared";
 	import ThemeController from "#components/ThemeController.svelte";
 	import { BenutzerClient } from "#components/Ausweis/types";
+	import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";

 	export let lightTheme: boolean;
 	export let benutzer: BenutzerClient;
@@ -15,10 +16,29 @@
 		center: false,
 		color: lightTheme ? "rgba(233,233,233,0.1)" : "rgba(113, 128, 150, 0.1)",
 	};
+
+	let headerOpen = false;
 </script>

-<aside class="hidden md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
-	<a href="/" class="px-8"
+<header class="fixed top-0 left-0 w-full h-16 flex items-center justify-between px-4 border-b z-20">
+	<button on:click={() => headerOpen = !headerOpen}>
+		{#if headerOpen}
+		<Cross1 size={28}></Cross1>
+	{:else}
+		<HamburgerMenu size={28}></HamburgerMenu>
+	{/if}
+	</button>
+	<a href="/" class="block md:hidden"
+		><img
+			src="/images/header/logo-big.svg"
+			class="w-24"
+			alt="IBCornelsen - Logo"
+		/></a
+	>
+</header>
+
+<aside class:hidden={!headerOpen} class="fixed left-0 top-16 w-full h-[calc(100%-4rem)] flex z-30 md:relative md:h-auto md:w-auto md:top-0 md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
+	<a href="/" class="px-8 hidden md:block"
 		><img
 			src="/images/header/logo-big.svg"
 			class="w-36"
@@ -26,7 +46,7 @@
 		/></a
 	>

-	<div class="menu flex flex-col gap-2 mt-12 px-0">
+	<div class="menu flex flex-col gap-2 mt-0 md:mt-12 px-0">
 		<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
 			<Home width={22} height={22} />
 			Home
--- a/src/components/DatenblattButton.svelte
+++ b/src/components/DatenblattButton.svelte
@@ -1,17 +1,10 @@
 <script lang="ts">
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { Buffer } from "buffer";
-	import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { VerbrauchsausweisWohnenClient } from "./Ausweis/types";

-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let gebaeude: GebaeudeClient;
+	export let ausweis: VerbrauchsausweisWohnenClient;

-	let base64: string = "";
-	$: {
-		if (ausweis && gebaeude) {
-			base64 = Buffer.from(JSON.stringify({...ausweis, gebaeude_stammdaten: gebaeude}), "utf-8").toString("base64");
-		}
-	}
+	$: base64 = Buffer.from(JSON.stringify(ausweis), "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/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,10 +1,10 @@
 ---
-import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
 import ThemeController from "./ThemeController.svelte";

 const valid = await validateAccessTokenServer(Astro)

-const lightTheme = Astro.cookies.get("theme").value === "light";
+const lightTheme = Astro.cookies.get("theme")?.value === "light";
 ---

 <header>
--- a/src/components/ImageGrid.svelte
+++ b/src/components/ImageGrid.svelte
@@ -2,6 +2,7 @@
 	import UploadImages from "./UploadImages.svelte";
 	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { RotateCounterClockwise, Trash } from "radix-svelte-icons";

 	export let images: UploadedGebaeudeBild[] = [];
 	export let max: number = 4;
@@ -9,6 +10,25 @@
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 	export let gebaeude: GebaeudeClient;
 	export let kategorie: Enums.BilderKategorie
+
+	async function rotateImage(image: UploadedGebaeudeBild): Promise<UploadedGebaeudeBild> {
+		return new Promise((resolve, reject) => {
+			let img = new Image();
+			img.src = image.base64 ? image.base64 : `/bilder/${image.uid}.webp`;
+			img.onload = () => {
+				let canvas = document.createElement("canvas");
+				let ctx = canvas.getContext("2d");
+				canvas.width = img.height;
+				canvas.height = img.width;
+				ctx?.translate(img.height / 2, img.width / 2);
+				ctx?.rotate((-90 * Math.PI) / 180);
+				ctx?.drawImage(img, -img.width / 2, -img.height / 2);
+				image.base64 = canvas.toDataURL("image/webp");
+				image.update = true;
+				resolve(image)
+			};
+		})
+	}
 </script>

 <div class="flex flex-col gap-4">
@@ -18,20 +38,33 @@
 			{#if image.kategorie == kategorie}
 				<div class="relative group">
 					<img
-						src="/bilder/{image.uid}.webp"
+						src={image.base64 ? image.base64 : `/bilder/${image.uid}.webp`}
 						alt={kategorie}
-						class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
+						class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
 					/>
-					<button
+					<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
+						<button
 						type="button"
-						class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full w-[30px] h-[30px] p-2 bg-[rgba(0,0,0,0.4)]"
+						class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
 						on:click={() => {
 							delete images[i];
 							images = images.filter((x) => x);
 						}}
 					>
-						R
+						<Trash size={20} color="#fff"></Trash>
 					</button>
+					<button
+						type="button"
+						class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
+						on:click={async () => {
+							let image = await rotateImage(images[i]);
+							images[i] = image;
+							images = images
+						}}
+					>
+						<RotateCounterClockwise size={20} color="#fff"></RotateCounterClockwise>
+					</button>
+					</div>
 				</div>
 			{/if}
 		{/each}
--- a/src/components/Notifications/Notification.svelte
+++ b/src/components/Notifications/Notification.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import RawNotification from "./RawNotification.svelte";
-import { Notification } from "./shared";
+import { Notification } from "./shared.js";

 	export let notification: Notification & { uid: string };
 </script>
--- a/src/components/Notifications/NotificationWrapper.svelte
+++ b/src/components/Notifications/NotificationWrapper.svelte
@@ -2,7 +2,7 @@
 	import Notification from "./Notification.svelte";
 	import RawNotificationWrapper from "./RawNotificationWrapper.svelte";

-	import { notifications } from "./shared";
+	import { notifications } from "./shared.js";
 </script>

 <RawNotificationWrapper>
--- a/src/components/Notifications/RawNotification.svelte
+++ b/src/components/Notifications/RawNotification.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Notification, deleteNotification } from "./shared";
+	import { Notification, deleteNotification } from "./shared.js";
 	import { fly } from "svelte/transition";

 	export let notification: Partial<Notification> & { uid: string };
--- a/src/components/Notifications/index.ts
+++ b/src/components/Notifications/index.ts
@@ -0,0 +1,9 @@
+import Notification from "./Notification.svelte";
+export { Notification };
+import NotificationWrapper from "./NotificationWrapper.svelte";
+export { NotificationWrapper };
+import RawNotificationWrapper from "./RawNotificationWrapper.svelte";
+export { RawNotificationWrapper };
+import RawNotification from "./RawNotification.svelte";
+export { RawNotification };
+export * from "./shared.js";
--- a/src/components/SidebarLeft.astro
+++ b/src/components/SidebarLeft.astro
@@ -2,7 +2,7 @@
 	<nav>
 		<div class="nav-card">
 			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
-				<a href="/energieausweis-erstellen"
+				<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen"
 					>Energieausweis erstellen</a
 				>
 				<div class="dropdown-content">
--- a/src/components/SidebarRight.astro
+++ b/src/components/SidebarRight.astro
@@ -1,4 +1,15 @@
+---
+import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
+import SidebarWidgetLogin from "./SidebarWidgetLogin.svelte";
+import SidebarWidgetProfile from "./SidebarWidgetProfile.svelte"
+
+const loggedin = await validateAccessTokenServer(Astro)
+---
+
 <div class="flex flex-col gap-4">
+	{ !loggedin ? 
+		<SidebarWidgetLogin client:load></SidebarWidgetLogin> : <SidebarWidgetProfile></SidebarWidgetProfile>}
+
 	<div class="infoCard">
 		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
 			Rufen Sie uns an<br /> Wir sind gerne für Sie da
--- a/src/components/SidebarWidgetLogin.svelte
+++ b/src/components/SidebarWidgetLogin.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { loginClient } from "#lib/login";
+	import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
+	import { fade } from "svelte/transition";
+
+	let email: string;
+	let passwort: string;
+
+	async function login(e: SubmitEvent) {
+		console.log(e);
+		
+		e.preventDefault();
+		const response = await loginClient(email, passwort);
+
+		if (response === null) {
+			errorHidden = false;
+		} else {
+			window.location.href = "/dashboard";
+		}
+	}
+
+	let errorHidden = true;
+</script>
+
+<div
+	id="card-login"
+	class="box card hidden bg-white px-6 py-4 mb-5
+			lg:block"
+>
+	<div class="grid">
+		<div class="grid grid-cols-[2rem,1fr,1fr]">
+			<img
+				class="w-6 align-middle"
+				src="/images/right-sidebar/UMBE_user-icon.svg"
+				alt="user-icon"
+			/>
+			<h2 class="text-secondary">Kunden Login</h2>
+			<div class="justify-self-end text-secondary">
+				<a
+					class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
+					href="">Kontakt</a
+				>
+				/
+				<a
+					class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
+					href="">AGB</a
+				>
+			</div>
+		</div>
+		<hr class="mb-4" />
+		<form on:submit={login}>
+			<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}
+			<button class="my-1 rounded-md px-2 py-1 ring-1 w-full bg-secondary text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
+		</form>
+
+		<div class="grid grid-cols-[1fr,1fr]">
+			<a
+				class="justify-self-start text-sm font-bold no-underline hover:text-primary"
+				href="/auth/signup">Registrieren</a
+			>
+			<a
+				class="justify-self-end text-sm font-bold no-underline hover:text-primary"
+				href="/auth/passwort-vergessen">Passwort vergessen</a
+			>
+		</div>
+
+		<div></div>
+	</div>
+</div>
+
+<style lang="scss">
+</style>
--- a/src/components/SidebarWidgetProfile.svelte
+++ b/src/components/SidebarWidgetProfile.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+<div
+	id="card-login"
+	class="box card hidden bg-white px-6 py-4
+			lg:block"
+>
+<a href="/dashboard">Profil</a>
+</div>
--- a/src/components/Tickets/TicketButton.svelte
+++ b/src/components/Tickets/TicketButton.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { dialogs } from "svelte-dialogs";
+	import TicketPopup from "./TicketPopup.svelte";
+	import { addNotification } from "@ibcornelsen/ui";
+
+	async function showTicketPopup() {
+		const success = await dialogs.modal(TicketPopup);
+
+		if (success) {
+			dialogs.alert({
+				title: "Ticket erstellt",
+				text: "Ihr Support Ticket wurde erfolgreich erstellt. Wir werden uns schnellstmöglich um ihre Angelegenheit kümmern. Vielen Dank für ihre Geduld.",
+				dismissButtonText: "Schließen",
+				dismissButtonClass: "btn btn-primary",
+				dialogClass: "modal-box",
+				headerClass: "bg-base-100 text-center",
+				titleClass: "text-base-content text-xl font-medium",
+				dividerClass: "hidden",
+				footerClass: "bg-base-100 justify-center gap-4 mt-4",
+			});
+		} else {
+			dialogs.alert({
+				title: "Ticket erstellen fehlgeschlagen",
+				text: "Leider ist beim erstellen des Tickets ein Fehler aufgetreten. Bitte versuchen sie es später erneut oder kontaktieren sie uns direkt per email unter info@ib-cornelsen.de.",
+				dismissButtonText: "Schließen",
+				dismissButtonClass: "btn btn-error",
+				dialogClass: "modal-box",
+				headerClass: "bg-base-100 text-center",
+				titleClass: "text-base-content text-xl font-medium",
+				dividerClass: "hidden",
+				footerClass: "bg-base-100 justify-center gap-4 mt-4",
+			});
+		}
+	}
+</script>
+
+<button
+	class="btn btn-primary fixed bottom-0 right-8 rounded-b-none rounded-t-xl w-48 h-12 text-xl hover:h-14 transition-all"
+	on:click={showTicketPopup}
+	>Support Ticket</button
+>
--- a/src/components/Tickets/TicketPopup.svelte
+++ b/src/components/Tickets/TicketPopup.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { addNotification } from "#components/Notifications/shared";
+	import { client } from "src/trpc";
+	import { getClose } from "svelte-dialogs";
+
+	const close = getClose();
+
+	async function createTicket(e: SubmitEvent) {
+		e.preventDefault();
+		try {
+			await client.v1.tickets.erstellen.mutate({
+				beschreibung: description,
+				email: email,
+				metadata: {
+					category: category,
+					phone: phone,
+				},
+				titel: title,
+			})
+			// Ticket wurde erfolgreich erstellt
+			close(true)
+		} catch (e) {
+			// Beim erstellen des Tickets ist ein Fehler aufgetreten, das ist ja mal ironisch...
+			close(false)
+		}
+	}
+
+	let category = "";
+	let title = "";
+	let description = "";
+	let email = "";
+	let phone = "";
+</script>
+
+<form class="max-w-lg" on:submit={createTicket}>
+	<h1 class="text-2xl font-semibold mb-6">Ticket erstellen</h1>
+	<p class="mb-6">
+		Vielen Dank, dass sie sich die Zeit nehmen ein Support Ticket zu
+		erstellen. Wir werden uns schnellstmöglich um ihre Angelegenheit
+		kümmern. Hier können sie alle Details eintragen und uns ihr Problem
+		schildern.
+	</p>
+	<div class="flex flex-col gap-4">
+		<div>
+			<h4>Kategorie *</h4>
+			<select class="select select-bordered" bind:value={category}>
+				<option value="" disabled selected>Bitte Auswählen</option>
+				<option value="Verständnisproblem">Verständnisproblem</option>
+				<option value="Technischer Fehler">Technischer Fehler</option>
+				<option value="Feature anfordern">Feature anfordern</option>
+				<option value="Fehlende Funktionalität"
+					>Fehlende Funktionalität</option
+				>
+			</select>
+		</div>
+		<div>
+			<h4>Überschrift *</h4>
+			<input
+				class="input input-bordered"
+				type="text"
+				placeholder="Überschrift in einem Satz"
+				name="title"
+				bind:value={title}
+				required
+			/>
+		</div>
+		<div>
+			<h4>Beschreibung *</h4>
+			<textarea
+				cols="10"
+				rows="5"
+				class="textarea textarea-bordered"
+				placeholder="Schildern sie hier ihre Erfahrung"
+				bind:value={description}
+				required
+			></textarea>
+		</div>
+		<div class="flex flex-row gap-4">
+			<div class="w-full">
+				<h4>Email Adresse *</h4>
+				<input
+					class="input input-bordered"
+					type="email"
+					placeholder="Ihre Email Adresse"
+					name="email"
+					bind:value={email}
+					required
+				/>
+			</div>
+			<div class="w-full">
+				<h4>Telefonnummer</h4>
+				<input
+					class="input input-bordered"
+					type="tel"
+					placeholder="Ihre Telefonnumer"
+					name="phone"
+					bind:value={phone}
+					required
+				/>
+			</div>
+		</div>
+		<button class="btn btn-primary" type="submit">Abschicken</button>
+	</div>
+</form>
--- a/src/components/UMBE_Footer.astro
+++ b/src/components/UMBE_Footer.astro
@@ -0,0 +1,21 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="
+		
+				grid grid-cols-1 bg-primary lg:px-9 lg:py-1
+				lg:grid-cols-4 lg:px-9 lg:py-1">
+
+	<div class="
+	justify-self-center
+	md:col-end-2 md:justify-self-start md:px-4">
+		<a class=" text-white font-bold text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">Impressum und Datenschutz</a>
+	</div>
+	<div class="
+	justify-self-center
+	md:col-end-5 md:justify-self-end md:px-6">	
+		<a class=" text-white font-bold text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">© {currentYear} IB Cornelsen Hamburg</a>
+	</div>
+
+</footer>
--- a/src/components/UMBE_Header.astro
+++ b/src/components/UMBE_Header.astro
@@ -0,0 +1,67 @@
+<header class="max-w-[1920px] w-full relative bg-white
+md:bg-[url('/images/header/header-bg.jpg')] md:bg-cover md:grid md:grid-cols-2
+lg:grid lg:grid-cols-3">
+
+
+
+	<div class="
+	justify-self-center px-2 py-2
+	xs:px-6 xs:py-4
+	md:px-4 md:py-4
+	md:col-end-4 md:justify-self-end 
+	xl:my-4 xl:mr-9 xl:p-0">
+
+	
+		<a href="/">
+			<img class="
+			w-full
+			md:w-[350px]
+			lg:w-[420px]" 
+			src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
+		</a>
+		
+		<h2 class="text-secondary font-normal absolute
+					top-1 right-2 text-[1.1rem]
+					xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
+					
+					md:top-[1.25rem] md:right-4 md:text-[1.1rem]
+					xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
+					Energieausweis online erstellen
+		</h2>
+				
+		<h2	class="text-primary font-normal absolute 
+					top-[1.6rem] right-2 text-[0.85rem]
+					xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
+					
+					md:top-[2.5rem] md:right-4 md:text-[0.9rem]
+					xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
+					Energieausweise nach aktuellem GEG
+		</h2>
+		
+	</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>
+	</div>
+
+</header>
+
+<style>
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
+</style>
--- a/src/components/UMBE_SidebarLeft.astro
+++ b/src/components/UMBE_SidebarLeft.astro
@@ -0,0 +1,14 @@
+---
+import Navigation from "#components/UMBE_card-navigation.svelte";
+import Preistabelle from "#components/UMBE_card-price-info.svelte";
+
+---
+
+<div class="flex flex-col grow">
+
+<Navigation client:load />
+
+<Preistabelle client:load />
+
+
+</div>
--- a/src/components/UMBE_SidebarRight.astro
+++ b/src/components/UMBE_SidebarRight.astro
@@ -0,0 +1,25 @@
+---
+import Login from "#components/SidebarWidgetLogin.svelte";
+import Contact from "#components/UMBE_card-contact.svelte";
+import Review from "#components/UMBE_card-review.svelte";
+import VApromo from "#components/UMBE_card-VA-promo.svelte";
+import VAGpromo from "#components/UMBE_card-VA-G-promo.svelte";
+import BApromo from "#components/UMBE_card-BA-promo.svelte";
+import BAGpromo from "#components/UMBE_card-BA-G-promo.svelte";
+---
+
+<div class="hidden
+            xl:flex xl:flex-col xl:grow
+            ">
+
+    <Login client:load />
+    <Contact client:load />
+    <Review client:load />
+    <VApromo client:load />
+    <VAGpromo client:load />
+    <BApromo client:load />
+    <BAGpromo client:load />
+</div>
+
+
+</div>
--- a/src/components/UMBE_banner-saeule.svelte
+++ b/src/components/UMBE_banner-saeule.svelte
@@ -0,0 +1,28 @@
+<div class="grid grid-cols-[1fr,1fr,1fr,1fr] gap-4" >
+
+    <div class="grid">
+        <div>
+            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <div class="h-[200px] bg-primary rounded-md mb-1"></div>
+        </div>   
+    </div>
+    <div class="grid">
+        <div>
+            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
+            <div class="h-[200px] bg-primary rounded-md mb-1"></div>
+        </div>
+    </div>
+    <div class="grid">
+        <div>
+            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
+            <div class="h-[200px] bg-primary rounded-md mb-1"></div>
+        </div>
+    </div>
+    <div class="grid">
+        <div>
+            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
+            <div class="h-[200px] bg-primary rounded-md mb-1"></div>
+        </div>
+    </div>
+
+</div>
--- a/src/components/UMBE_card-BA-G-promo.svelte
+++ b/src/components/UMBE_card-BA-G-promo.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-BA-G-promo" 
+class="	box card hidden bg-white px-6 py-4 mb-5
+        lg:block">
+
+<div class="grid">
+
+<h2>Bedarfssausweis Gewerbe</h2>
+<hr class="mb-4">
+<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+
+<a href="#" id="link-BA-promo" 
+        class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                hover:bg-primary
+        " >jetzt Bedarfssausweis erstellen</a>
+</div>
+
+<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">300</span>€</p>
+
+</div>
+
+
+<style lang="scss">
+
+</style>
--- a/src/components/UMBE_card-BA-promo.svelte
+++ b/src/components/UMBE_card-BA-promo.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-BA-promo" 
+class="	box card hidden bg-white px-6 py-4 mb-5
+        lg:block">
+
+<div class="grid">
+
+<h2>Bedarfssausweis Wohngebäude</h2>
+<hr class="mb-4">
+<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+
+<a href="#" id="link-BA-promo" 
+        class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+                hover:bg-primary
+        " >jetzt Bedarfssausweis erstellen</a>
+</div>
+
+<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
+
+</div>
+
+
+<style lang="scss">
+
+</style>
--- a/src/components/UMBE_card-VA-G-promo.svelte
+++ b/src/components/UMBE_card-VA-G-promo.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-VA-G-promo" 
+	class="	box card hidden bg-white px-6 py-4 mb-5
+			lg:block">
+
+	<div class="grid">
+
+	<h2>Verbrauchsausweis Gewerbe</h2>
+	<hr class="mb-4">
+	<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
+
+	<a href="#" id="link-VA-promo" 
+			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+					hover:bg-primary
+			" >jetzt Verbrauchsausweis erstellen</a>
+	</div>
+
+	<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
+
+</div>
+
+
+<style lang="scss">
+
+
+</style>
--- a/src/components/UMBE_card-VA-promo.svelte
+++ b/src/components/UMBE_card-VA-promo.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+	
+<div id ="card-VA-promo" 
+	class="	box card hidden bg-white px-6 py-4 mb-5
+			lg:block">
+
+	<div class="grid">
+
+	<h2>Verbrauchsausweis Wohngebäude</h2>
+	<hr class="mb-4">
+	<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+
+	<a href="" id="link-VA-promo" 
+			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
+					hover:bg-primary
+			" >jetzt Verbrauchsausweis erstellen</a>
+	</div>
+
+	<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
+
+</div>
+
+
+<style lang="scss">
+
+
+</style>
--- a/src/components/UMBE_card-contact.svelte
+++ b/src/components/UMBE_card-contact.svelte
@@ -0,0 +1,20 @@
+<div id ="card-contact" class="box card bg-white px-6 py-4 mb-5">
+	
+	<div class="grid grid-cols-[max-content,1fr]">
+		<div class="">
+		<h2>Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
+		<hr class="w-11/12"/>
+		<p>Telefonische Beratung unter</p>
+		<a class="text-lg font-bold text-box-heading" href="tel:+4940209339850">040 / 209 339 850</a>
+		</div>
+
+		<img class="w-[100px] !min-w-[100px] mt-[0px] justify-self-end" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
+	</div>
+
+</div>
+
+
+<style lang="scss">
+
+
+</style>
--- a/src/components/UMBE_card-navigation.svelte
+++ b/src/components/UMBE_card-navigation.svelte
@@ -0,0 +1,231 @@
+<script>
+let innerWidth
+
+function dropdown(){
+
+const innerWidth = window.innerWidth;
+console.log(innerWidth);
+if(innerWidth<1024){
+   
+    const check_element     = this.lastChild;
+    
+    const rotate_list       = document.querySelectorAll(".dd-symbol-clone");
+    const rotate_element    = this.childNodes[0].children[0];
+
+    console.log(rotate_element);
+
+    var first_check = check_element.classList.contains("show-dropdown-content");
+    const nodeList = document.querySelectorAll(".dropdown-content");
+    
+    if(first_check == true){
+    check_element.classList.remove("show-dropdown-content");
+    rotate_element.classList.toggle("rotate-symbol");
+    
+    }else{
+      for (let i = 0; i < nodeList.length; i++) {
+        const element = nodeList[i];
+        element.classList.remove("show-dropdown-content");
+        
+      }
+      for (let i = 0; i < rotate_list.length; i++) {
+        const element = rotate_list[i];
+        element.classList.remove("rotate-symbol");
+      }
+
+    check_element.classList.add("show-dropdown-content");
+    rotate_element.classList.add("rotate-symbol");
+    }
+  }
+
+}
+
+function hover(){
+const innerWidth = window.innerWidth;
+console.log(innerWidth);
+if(innerWidth>1024){
+    const check_element     = this.firstChild.lastChild;
+    console.log(check_element);
+    check_element.style.visibility = "visible";
+  }
+}
+
+function hoverout(){
+const innerWidth = window.innerWidth;
+console.log(innerWidth);
+if(innerWidth>1024){
+    const check_element     = this.firstChild.lastChild;
+    console.log(check_element);
+    check_element.style.visibility = "hidden";
+  }
+}
+
+  function hamburger(){
+    const nodeList = document.querySelectorAll(".dropdown-content");
+    for (let i = 0; i < nodeList.length; i++) {
+    nodeList[i].classList.remove("show-dropdown-content");}
+    var element = document.getElementById("card-navigation");
+    element.classList.toggle("hidden");
+
+    const spans = this.children;
+    var first_check = spans[0].classList.contains("hamburger-swing-0");
+    
+    if(first_check == true){
+      for (let i = 0; i < spans.length; i++)
+      {spans[i].classList.remove("hamburger-swing-"+i);} 
+      const rotate_list     = document.querySelectorAll(".dd-symbol");
+      for (let i = 0; i < rotate_list.length; i++)
+      {rotate_list[i].classList.remove("rotate-symbol");}     
+      }else{
+      for (let i = 0; i < spans.length; i++)
+      {spans[i].classList.add("hamburger-swing-"+i);} }
+}
+</script>
+
+<svelte:window bind:innerWidth />
+
+
+<div class="hamburger_menu py-1 px-2 bg-secondary
+            xs:px-6
+            lg:hidden">
+
+              <div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+</div>
+
+
+
+<nav id="card-navigation" class="card-navigation hidden box lg:block"> 
+
+  <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]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
+    {:else}
+    <a href="#" 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>
+      {/if}
+      <li><a href="">Verbrauchsausweis erstellen</a></li>
+      <li><a href="">Bedarfsausweis erstellen</a></li>
+      <li><a href="">Verbrauchsausweis Gewerbe erstellen</a></li>
+      <li><a href="">Bedarfsausweis Gewerbe erstellen</a></li>
+    </ul>
+  </div>
+
+  <div class="nav-element dropdown">
+    <div class="nav-element-child">Welcher Energieausweis?</div>
+  </div>
+
+<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
+  <a href="#" 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="">Verbrauchsausweis</a></li>
+      {/if}
+      <li><a href="">Verbrauchsausweis Wohngebäude</a></li>
+      <li><a href="">Verbrauchsausweis online erstellen</a></li>
+      <li><a href="">Häufige Fragen zum Verbrauchsausweis</a></li>
+      <li><a href="">Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
+      <li><a href="">Verbrauchsausweis Gewerbe</a></li>
+      <li><a href="">Verbrauchsausweis Gewerbe online erstellen</a></li>
+      <li><a href="">Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
+      <li><a href="">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
+  </div>
+
+<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
+  <a href="#" 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="">Bedarfsausweis</a></li>
+      {/if}
+      <li><a href="">Bedarfsausweis Wohngebäude</a></li>
+      <li><a href="">Bedarfsausweis online erstellen</a></li>
+      <li><a href="">Häufige Fragen zum Bedarfsausweis</a></li>
+      <li><a href="">Statistiken zum Bedarfsausweis Wohngebäude</a></li>
+      <li><a href="">Bedarfsausweis Gewerbe</a></li>
+      <li><a href="">Bedarfsausweis Gewerbe online erstellen</a></li>
+      <li><a href="">Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
+      <li><a href="">Statistiken zum Bedarfsausweis Gewerbe</a></li>
+    </ul>
+</div>
+
+
+<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
+  <a href="#" 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="">Energieausweis</a></li>
+    {/if}
+    <li class=""><a href="">Energieausweis Pflicht</a></li>
+    <li class=""><a href="">Energieausweis Kosten</a></li>
+    <li class=""><a href="">Energieausweis Haus</a></li>
+  </ul>
+</div>
+
+<div class="nav-element dropdown">
+  <div class="nav-element-child">EnEV Zusammenfassung - Archiv</div>
+</div>
+<div class="nav-element dropdown">
+  <div class="nav-element-child">Energieausweis Aussteller</div>
+</div>
+<div class="nav-element dropdown">
+  <div class="nav-element-child">Kundenbewertungen</div>
+</div>
+<div class="nav-element dropdown">
+  <div class="nav-element-child">FAQ</div>
+</div>
+<div class="nav-element dropdown">
+  <div class="nav-element-child xl:!rounded-b-xl">Für Entwickler</div>
+</div>
+
+
+</nav>
+
+
+<style>
+
+
+
+.dd-symbol::before{
+  content:'❯';
+  font-size:0.95rem;
+  position:absolute;
+  top:0px;
+  left:-7px;
+  animation-name: flim;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+}
+
+.dd-symbol{visibility: hidden;}
+
+.dd-symbol::after{
+  content:'❯';
+  font-size:0.95rem;
+  position:absolute;
+  top:0px;
+  right:-7px;
+  animation-name: flim;
+  animation-duration: 2s;
+  animation-delay: 1s;
+  animation-iteration-count: infinite;
+}
+
+  @keyframes flim{
+  0%   {opacity: 0;}
+  16.66%  {opacity: 0.25;}
+  33.32%  {opacity: 0.5;}
+  49.98%  {opacity: 0.75;}
+  66.64% {opacity: 0.5;}
+  83.33% {opacity: 0.25;}
+  100% {opacity: 0;}
+}
+
+
+
+</style>
--- a/src/components/UMBE_card-price-info.svelte
+++ b/src/components/UMBE_card-price-info.svelte
@@ -0,0 +1,41 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+
+<div 	id ="card-price-info" 
+		class="	box card hidden bg-white px-6 py-4 mt-5
+				lg:block">
+	
+<div class="grid grid-cols-[max-content]">
+		
+<h2>Was wird der Energieausweis kosten?</h2>
+<hr class="mb-4 bg-primary h-[2px]">
+<p>Verbrauchsausweis Wohngebäude</p>
+<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
+<hr>
+<p>Bedarfsausweis Wohngebäude</p>
+<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
+<hr>
+<p>Verbrauchsausweis Gewerbe</p>
+<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
+<hr>
+<p>Bedarfsausweis Gewerbe</p>
+<p>ab 300€ inkl. MwSt.</p>
+<hr>
+<p>GEG-Nachweis Wohngebäude</p>
+<p>ab 400€ inkl. MwSt.</p>
+<hr>
+<p>GEG-Nachweis Gewerbe</p>
+<p>ab 450€ inkl. MwSt.</p>
+<hr class="mt-2">
+
+
+
+</div>
+</div>
+
+
+<style lang="scss">
+
+
+</style>
--- a/src/components/UMBE_card-review.svelte
+++ b/src/components/UMBE_card-review.svelte
--- a/src/components/UMBE_navcard.astro
+++ b/src/components/UMBE_navcard.astro
@@ -0,0 +1,96 @@
+
+<script>
+
+
+</script>
+
+
+<div class="">
+
+<details  class="dropdown block xl:dropdown-right">
+    <summary  class="btn rounded-none w-full justify-start">Energieausweis erstellen<span class="absolute right-[20px]">❯</span></summary>
+    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
+      <li class=""><a>Verbrauchsausweis erstellen</a></li>
+      <li class=""><a>Bedarfsausweis erstellen</a></li>
+      <li class=""><a>Verbrauchsausweis Gewerbe erstellen</a></li>
+      <li class=""><a>Bedarfsausweis Gewerbe erstellen</a></li>
+    </ul>
+</details>
+
+<details  class="dropdown block">
+    <summary  class="btn rounded-none w-full justify-start">Welcher Energieausweis?</summary>
+</details>
+
+<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
+    <summary  class="btn rounded-none w-full justify-start">Verbrauchsausweis<span class="absolute right-[20px]">❯</span></summary>
+    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
+      <li class=""><a>Verbrauchsausweis Wohngebäude</a></li>
+      <li class=""><a>Verbrauchsausweis online erstellen</a></li>
+      <li class=""><a>Häufige Fragen zum Verbrauchsausweis</a></li>
+      <li class=""><a>Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
+      <li class=""><a>Verbrauchsausweis Gewerbe</a></li>
+      <li class=""><a>Verbrauchsausweis Gewerbe online erstellen</a></li>
+      <li class=""><a>Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
+      <li class=""><a>Statistiken zum Verbrauchsausweis Gewerbe</a></li>
+    </ul>
+</details>
+<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
+    <summary  class="btn rounded-none w-full justify-start">Bedarfsausweis<span class="absolute right-[20px]">❯</span></summary>
+    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
+      <li class=""><a>Bedarfsausweis Wohngebäude</a></li>
+      <li class=""><a>Bedarfsausweis online erstellen</a></li>
+      <li class=""><a>Häufige Fragen zum Bedarfsausweis</a></li>
+      <li class=""><a>Statistiken zum Bedarfsausweis Wohngebäude</a></li>
+      <li class=""><a>Bedarfsausweis Gewerbe</a></li>
+      <li class=""><a>Bedarfsausweis Gewerbe online erstellen</a></li>
+      <li class=""><a>Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
+      <li class=""><a>Statistiken zum Bedarfsausweis Gewerbe</a></li>
+    </ul>
+</details>
+<details  class="dropdown block xl:dropdown-hover xl:dropdown-right">
+    <summary  class="btn rounded-none w-full justify-start">Energieausweis<span class="absolute right-[20px]">❯</span></summary>
+    <ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
+      <li class=""><a>Energieausweis Pflicht</a></li>
+      <li class=""><a>Energieausweis Kosten</a></li>
+      <li class=""><a>Energieausweis Haus</a></li>
+    </ul>
+</details>
+<details  class="dropdown block">
+    <summary  class="btn rounded-none w-full justify-start">EnEV Zusammenfassung - Archiv</summary>
+</details>
+<details  class="dropdown block">
+    <summary  class="btn rounded-none w-full justify-start">Energieausweis Aussteller</summary>
+</details>
+<details  class="dropdown block">
+    <summary  class="btn rounded-none w-full justify-start">Kundenbewertungen</summary>
+</details>
+
+
+</div>
+
+<style>
+
+.dd-cont{
+    @apply !relative lg:!absolute;
+    li{
+    @apply w-max  
+    }
+}
+
+summary{
+    @apply text-black !text-[1.1rem] !font-normal
+    
+}
+details:hover > summary { 
+    @apply !bg-primary !text-white
+}
+details:hover > details.dd-cont { 
+    @apply !visible
+}
+
+
+
+
+
+
+</style>
--- a/src/components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.ts
+++ b/src/components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.ts
@@ -1,17 +1,22 @@
-import { GebaeudeAufnahmeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+import { GebaeudeAufnahmeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";

 export function auditBedarfsausweisBenoetigt(ausweis: VerbrauchsausweisWohnenClient, gebaeude: GebaeudeAufnahmeClient): boolean {
+	if (ausweis.ausstellgrund == "Neubau" || ausweis.ausstellgrund == "Modernisierung") {
+		return true;
+	}
+
+	if (gebaeude.saniert == true && ( gebaeude.dachgeschoss_gedaemmt == false || gebaeude.oberste_geschossdecke_gedaemmt == false)){
+		return true;
+	}

 	if (gebaeude.baujahr_gebaeude && gebaeude.baujahr_gebaeude.length > 0) {
 		return (
 			(gebaeude.baujahr_gebaeude[0] < 1978 &&
-				(gebaeude.einheiten || 0) <= 4 &&
-				gebaeude.saniert == false &&
+				(gebaeude.einheiten !== null && gebaeude.einheiten <= 4) &&
+				(gebaeude.saniert == false ) &&
 				(ausweis.ausstellgrund == "Vermietung" ||
 					ausweis.ausstellgrund == "Sonstiges" ||
-					ausweis.ausstellgrund == "Verkauf")) ||
-			ausweis.ausstellgrund == "Neubau" ||
-			ausweis.ausstellgrund == "Modernisierung"
+					ausweis.ausstellgrund == "Verkauf"))	
 		);
 	}

--- a/src/components/Verbrauchsausweis/audits/EndEnergie.ts
+++ b/src/components/Verbrauchsausweis/audits/EndEnergie.ts
@@ -0,0 +1,27 @@
+import { GebaeudeClient, VerbrauchsausweisWohnenClient, GebaeudeAufnahmeClient } from "#components/Ausweis/types";
+import { AuditType, hidden } from "./hidden";
+import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
+import { getKlimafaktoren } from "#lib/Klimafaktoren";
+
+export async function auditEndEnergie(ausweis: VerbrauchsausweisWohnenClient, gebaeude: GebaeudeClient, gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient): Promise<boolean> {
+    if (hidden.has(AuditType.END_ENERGIE)) {
+        return false;
+    }
+    //sobald Fläche, Klimafaktoren und alle Verbrauchsjahre eingegeben wurden.
+    if (gebaeude_aufnahme_allgemein){
+        if (gebaeude_aufnahme_allgemein.flaeche && ausweis.verbrauch_1 && ausweis.verbrauch_2 && ausweis.verbrauch_3) {
+            try {
+                const response = await getKlimafaktoren(ausweis.startdatum, gebaeude.plz);
+                // Alle Klimfaktoren konnten abgefragt werden.
+                const eevva = await endEnergieVerbrauchVerbrauchsausweis_2016({...ausweis, gebaeude_aufnahme_allgemein: {...gebaeude_aufnahme_allgemein, gebaeude_stammdaten: gebaeude}});
+                if (eevva){
+                    if (eevva?.endEnergieVerbrauchGesamt <= 45 || eevva?.endEnergieVerbrauchGesamt >= 500) {
+                        return true;
+                    }
+                }
+            } catch (e) {
+            }
+        }
+    }
+    return false;
+}
--- a/src/components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.ts
+++ b/src/components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.ts
@@ -1,11 +1,14 @@
 import { GebaeudeAufnahmeClient } from "#components/Ausweis/types";
+import { AuditType, hidden } from "../audits/hidden";

-export function auditHeizungJuengerDreiJahre(gebaeude: GebaeudeAufnahmeClient ): boolean {
+export function auditHeizungJuengerDreiJahre(gebaeude: GebaeudeAufnahmeClient): boolean {

 	if (gebaeude.baujahr_heizung && gebaeude.baujahr_heizung.length > 0) {
-		return (
-			(gebaeude.baujahr_heizung.sort()[0] >= (new Date().getFullYear())-3)
-		);
+		if (!hidden.has(AuditType.HEIZUNG_JUENGER_DREI_JAHRE)) {
+			return (
+				(gebaeude.baujahr_heizung.sort()[0] >= (new Date().getFullYear()) - 3)
+			);
+		}
 	}

 	return false
--- a/src/components/Verbrauchsausweis/audits/KlimaFaktoren.ts
+++ b/src/components/Verbrauchsausweis/audits/KlimaFaktoren.ts
@@ -1,8 +1,5 @@
 import { GebaeudeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 import { AuditType, hidden } from "./hidden";
-import { prisma } from "@ibcornelsen/database/server";
-import { client } from "src/trpc";
-import moment from "moment";
 import { getKlimafaktoren } from "#lib/Klimafaktoren";

 export async function auditKlimaFaktoren(ausweis: VerbrauchsausweisWohnenClient, gebaeude: GebaeudeClient): Promise<boolean> {
--- a/src/components/Verbrauchsausweis/audits/LeerStand.ts
+++ b/src/components/Verbrauchsausweis/audits/LeerStand.ts
@@ -1,7 +1,8 @@
 import { GebaeudeAufnahmeClient } from "#components/Ausweis/types";
+import { AuditType, hidden } from "./hidden";

-export function auditLeerStand(gebaeude: GebaeudeAufnahmeClient ): boolean {
-	if (gebaeude.leerstand ) {
+export function auditLeerStand(gebaeude: GebaeudeAufnahmeClient): boolean {
+	if (gebaeude.leerstand && !hidden.has(AuditType.LEER_STAND)) {
 		return (
 			(gebaeude.leerstand > 30)
 		);
--- a/src/components/Verbrauchsausweis/audits/PlzNichtErkannt.ts
+++ b/src/components/Verbrauchsausweis/audits/PlzNichtErkannt.ts
@@ -0,0 +1,23 @@
+import { GebaeudeAufnahmeClient } from "#components/Ausweis/types";
+import { client } from "src/trpc";
+import { memoize } from "src/lib/Memoization";
+import { AuditType, hidden } from "../audits/hidden";
+
+export const auditPlzNichtErkannt = memoize(async (gebaeude: GebaeudeAufnahmeClient) => {
+    if (gebaeude.plz) {
+        if (gebaeude.plz.length == 5) {
+            try {
+                const result = await client.v1.postleitzahlen.query({ plz: gebaeude.plz, limit: 1 });
+								
+                if (result.length > 0) {
+                    return false;
+                }
+            } catch (e) {
+                if (!hidden.has(AuditType.PLZ_NICHT_ERKANNT)){
+                    return true;
+                }
+            }
+        }
+    }
+    return false
+});
--- a/src/components/Verbrauchsausweis/audits/VerbrauchAbweichung.ts
+++ b/src/components/Verbrauchsausweis/audits/VerbrauchAbweichung.ts
@@ -10,19 +10,19 @@ export function auditVerbrauchAbweichung(ausweis: VerbrauchsausweisWohnenClient,
 		return [];
 	}

-	if (getAbweichung(ausweis.verbrauch_1 || 0, ausweis.verbrauch_2 || 0) > 0.25) {
+	if (getAbweichung(ausweis.verbrauch_1 || 0, ausweis.verbrauch_2 || 0) > 0.30) {
 		return [1, 2];
 	}

-	if (getAbweichung(ausweis.verbrauch_2 || 0, ausweis.verbrauch_3 || 0) > 0.25) {
+	if (getAbweichung(ausweis.verbrauch_2 || 0, ausweis.verbrauch_3 || 0) > 0.30) {
 		return [2, 3];
 	}

-	if (getAbweichung(ausweis.verbrauch_4 || 0, ausweis.verbrauch_5 || 0) > 0.25) {
+	if (getAbweichung(ausweis.verbrauch_4 || 0, ausweis.verbrauch_5 || 0) > 0.30) {
 		return [4, 5];
 	}

-	if (getAbweichung(ausweis.verbrauch_5 || 0, ausweis.verbrauch_6 || 0) > 0.25) {
+	if (getAbweichung(ausweis.verbrauch_5 || 0, ausweis.verbrauch_6 || 0) > 0.30) {
 		return [5, 6];
 	}

--- a/src/components/Verbrauchsausweis/audits/WarmWasser.ts
+++ b/src/components/Verbrauchsausweis/audits/WarmWasser.ts
@@ -1,11 +1,14 @@
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+import { AuditType, hidden } from "./hidden";

 export function auditWarmWasser(ausweis: VerbrauchsausweisWohnenClient): boolean {

 	if (ausweis.warmwasser_anteil_bekannt && ausweis.warmwasser_enthalten && ausweis.anteil_warmwasser_1) {
-		return (
-			ausweis.anteil_warmwasser_1 <= 6 || ausweis.anteil_warmwasser_1 >= 35
-		);
+		if (!hidden.has(AuditType.WARM_WASSER)){
+			return (
+				ausweis.anteil_warmwasser_1 <= 6 || ausweis.anteil_warmwasser_1 >= 35
+			);
+		}
 	}

 	return false
--- a/src/components/Verbrauchsausweis/audits/WohnFlaeche.ts
+++ b/src/components/Verbrauchsausweis/audits/WohnFlaeche.ts
@@ -1,11 +1,13 @@
 import { GebaeudeAufnahmeClient } from "#components/Ausweis/types";
+import { AuditType, hidden } from "./hidden";

 export function auditWohnFlaeche(gebaeude: GebaeudeAufnahmeClient ): boolean {
 	if (gebaeude.einheiten && gebaeude.flaeche ) {
-        
-		return (
-			(gebaeude.flaeche < gebaeude.einheiten * 30)
-		);
+        if (!hidden.has(AuditType.WOHN_FLAECHE)){
+			return (
+				(gebaeude.flaeche < gebaeude.einheiten * 30)
+			);
+		}
 	}

 	return false
--- a/src/components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.ts
+++ b/src/components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.ts
@@ -0,0 +1,10 @@
+import { GebaeudeAufnahmeClient } from "#components/Ausweis/types";
+import { AuditType, hidden } from "../audits/hidden";
+
+export function auditWohnflaecheGroesserGesamtflaeche(gebaeude: GebaeudeAufnahmeClient ): boolean {
+	if (gebaeude.flaeche && gebaeude.nutzflaeche){
+        return (gebaeude.flaeche > gebaeude.nutzflaeche && !hidden.has(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE));
+    }
+
+    return false;
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Moritz Utcke	f600670e60	Cookie Fehler	2024-11-20 12:24:04 +11:00
Moritz Utcke	60c6785abd	Ausweis ohne Pfeile und Bedarfsausweis Nachricht überarbeitet.	2024-11-20 12:15:19 +11:00
Moritz Utcke	39c681cd51	Update Makefile	2024-11-14 15:23:18 +11:00
Moritz Utcke	a242774e8b	Workflow Update	2024-11-14 15:08:07 +11:00
Moritz Utcke	9fe5e0b8f6	Notification Wrapper auf Lokale Version gesetzt anstatt @ibcornelsen/ui, Config upgedated und Ansichtsausweis repariert.	2024-11-14 15:05:25 +11:00
Moritz Utcke	c6b31acd9c	Cookie Fehler	2024-11-13 13:29:44 +11:00
Moritz Utcke	ec309bfd7c	Update Makefile und VerbrauchsausweisWohnenModule aufgeräumt.	2024-11-13 12:25:01 +11:00
Moritz Utcke	a84d9f2c97	Update Makefile	2024-11-13 11:23:46 +11:00
Moritz Utcke	b0201c250f	mdx Seiten wieder in pages gepackt und Dependencies upgedated.	2024-11-11 12:15:01 +11:00
Moritz Utcke	754f6ab47a	Sidebar überarbeitet Layout nach den Vorgabenvon Umbe angepasst	2024-11-06 12:55:28 +11:00
Moritz Utcke	6e9857c582	Update build.sh	2024-11-06 12:31:27 +11:00
Moritz Utcke	fcd187e875	Update Makefile	2024-11-06 12:19:19 +11:00
Moritz Utcke	726c88da87	Update Makefile	2024-11-06 12:15:00 +11:00
Moritz Utcke	53fa0c12ca	build.sh verbessert	2024-11-06 12:02:57 +11:00
Moritz Utcke	592ee531ba	Merge pull request #7 from IBCornelsen/UMBE Änderungen am Design durch Umbe	2024-11-06 11:28:14 +11:00
Moritz Utcke	a36619fa07	Merge branch 'main' into UMBE	2024-11-06 11:27:20 +11:00
Moritz Utcke	2b7387c5f7	.xopp entfernt	2024-11-06 11:17:46 +11:00
Moritz Utcke	655e7e992c	Update src/trpc.ts	2024-11-04 17:30:37 +11:00
Moritz Utcke	9dd1a55940	Update src/trpc.ts	2024-11-04 17:27:38 +11:00
Moritz Utcke	5d4a2cee96	Update Makefile	2024-11-04 17:16:07 +11:00
Moritz Utcke	d9f9f1df34	Update environment api route	2024-11-04 17:13:28 +11:00
Moritz Utcke	36ceef2729	Logfiles	2024-11-04 16:48:02 +11:00
Moritz Utcke	c42046eb00	Update package.json	2024-11-04 16:29:39 +11:00
Moritz Utcke	da9ffec877	Makefile	2024-11-04 15:15:10 +11:00
Moritz Utcke	e113aa5c61	Kontrollsystem GEG Dateien	2024-09-25 17:46:09 +09:30
Moritz Utcke	e290f9e231	Network Fix Alte deps entfernt, import Pfade angepasst und das Netzwerk Problem das Umbe hatte provisorisch gelöst.	2024-08-17 12:24:22 +08:00
Robert Jagtiani	4468871552	UMBE-new	2024-05-23 18:04:20 +02:00
Moritz Utcke	766e0b125a	Update build file	2024-05-15 16:29:39 +07:00
Moritz Utcke	d1c7ce8e6f	Verbrauchsausweis Wohnen 2024 hinzugefügt	2024-05-15 16:24:23 +07:00
Robert Jagtiani	b5ed22589f	Update Template Files	2024-04-16 00:05:35 +02:00
Moritz Utcke	069bc53ce5	Merge branch 'main' of https://github.com/IBCornelsen/online-energieausweis	2024-03-26 11:05:15 +07:00
Moritz Utcke	fc9fb73872	Ansichtsausweis + Verbrauchsausweis Wohnen Test	2024-03-26 11:05:08 +07:00
Moritz Utcke	2769580d2f	Merge pull request #6 from IBCornelsen/49-plausibilittsprfung--saniert-autochec 49 Plausibilitätsprüfung / Saniert: Autocheck Dämmung abwählbar machen	2024-03-21 20:50:31 +07:00
Carl Mahnke	d6d141a229	Checkboxen Gedämmt nur setzen wenn initial (undefined)	2024-03-21 14:45:35 +01:00
Moritz Utcke	12d7f11c1b	Empfehlungen und Ansichtsausweis	2024-03-20 12:12:35 +07:00
Moritz Utcke	19d83c286e	Klimafaktoren respektiert erstellungsdatum	2024-03-19 11:52:44 +07:00
Moritz Utcke	5b6fbf686b	Merge branch 'main' of https://github.com/IBCornelsen/online-energieausweis	2024-03-18 18:14:38 +07:00
Moritz Utcke	7bc549dfc4	Merge branch 'main' of https://github.com/IBCornelsen/online-energieausweis	2024-03-18 18:14:32 +07:00
Moritz Utcke	4bfc4c4baf	Merge branch 'main' of https://github.com/IBCornelsen/online-energieausweis	2024-03-18 18:12:28 +07:00
Moritz Utcke	3997f288fa	Update build skript	2024-03-18 18:12:22 +07:00
Moritz Utcke	a1a0a8e2d9	Merge pull request #5 from IBCornelsen/21-alle-plausibilittsprfungen-mit-infota 21 Alle Plausibilitätsprüfungen mit Infotabs fertigstellen. Dazu gehört auch die Prüfung Verbrauchsausweis zulässig/möglich. Das müssten die selben Prüfalgorithmen wie die unserer Prüfbox sein >> zusammenfassen in einem Skript	2024-03-18 18:01:26 +07:00
Moritz Utcke	0b735bcf4e	Merge branch 'main' into 21-alle-plausibilittsprfungen-mit-infota	2024-03-18 18:01:13 +07:00
Carl Mahnke	cc5032e0e1	Ticket Plausibilitätsprüfung	2024-03-18 11:45:05 +01:00
Moritz Utcke	8af5ed39b1	Zu bind umgedingstet	2024-03-18 17:31:36 +07:00
Moritz Utcke	25171210a5	Ansichtsausweis Verbrauch	2024-03-18 10:17:02 +07:00
Moritz Utcke	28a3f9b57c	Merge branch 'main' of https://github.com/IBCornelsen/online-energieausweis	2024-03-18 09:46:49 +07:00
Moritz Utcke	63ae424665	Designer getPageCursor implementiert	2024-03-18 09:46:41 +07:00
Moritz Utcke	eb41d87f1c	Bilder base64 Admin fix	2024-03-18 09:46:06 +07:00
Moritz Utcke	b45206290f	Bilder Rotieren	2024-03-16 11:01:25 +07:00
Robert Jagtiani	0815957448	Kommentar zu den Preisen	2024-03-14 16:18:26 +01:00
UMBENOMENA	9bc5a11a89	Merge pull request #4 from IBCornelsen/main UMBE updaten	2024-03-14 16:06:40 +01:00
UMBENOMENA	c3d9913cc7	Merge pull request #3 from IBCornelsen/UMBE UMBE files für Templates	2024-03-14 16:00:26 +01:00
Robert Jagtiani	918b470639	UMBE files für Templates	2024-03-14 15:55:12 +01:00
Moritz Utcke	df8fa9cce1	Ausweis ohne Nutzer Referenz speichern	2024-03-13 09:52:18 +07:00
Moritz Utcke	39f4435386	Bugfixes und Verbesserungen Fast alle gelisteten Probleme in https://trello.com/c/GKZotNZV werden hiermit behoben.	2024-03-12 12:20:18 +07:00
Moritz Utcke	80d62ffdc2	Bilder im Formular anzeigen	2024-03-12 11:27:35 +07:00
Moritz Utcke	8c188a54fa	Startdatum Auswahl gefixt	2024-03-12 11:22:40 +07:00
Moritz Utcke	e994383317	Automatische Berechnung Test Automatische Prüfung der Berechnung durch Vergleich mit alten Ergebnissen auf alten Ausweisen.	2024-03-11 10:04:23 +07:00
Moritz Utcke	02e108140a	Verbrauchsausweis Wohnen Berechnung Test	2024-03-10 18:19:44 +07:00
Moritz Utcke	538fc7eb01	User Tickets	2024-03-08 14:46:58 +07:00
Moritz Utcke	976afd1cd4	Verbrauchsausweis Wohnen Skripte ausgelagert.	2024-03-07 08:54:54 +07:00
Moritz Utcke	f679f215cc	Dev pipeline und build Skript	2024-03-06 08:54:42 +07:00
Moritz Utcke	9964fded85	Merge branch 'main' of https://github.com/IBCornelsen/online-energieausweis	2024-03-04 14:12:41 +07:00
Moritz Utcke	4f479b9c6c	Build getestet + MDX Erstmal entfernt	2024-03-04 14:11:47 +07:00
Jens Cornelsen	00e283a01c	faktorKeller, ausweisart Skripe angepasst	2024-03-02 15:00:59 +01:00
Moritz Utcke	26058e3205	Mobile Seite schön gemacht und generelle Verbesserungen	2024-03-01 14:33:13 +07:00
Moritz Utcke	db7cc9af33	Dashboard Startseite	2024-02-29 14:33:38 +07:00
Moritz Utcke	f2be7a36bd	Events Fix	2024-02-29 11:24:02 +07:00
Moritz Utcke	022fe20524	Ausweis Prüfen und Email	2024-02-29 11:09:23 +07:00
Moritz Utcke	0341ea4526	Merge pull request #2 from IBCornelsen/VAOnScreenTests VA On-Screen Checks	2024-02-29 08:39:55 +07:00