diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..46086a3a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# vscode
+.vscode
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# lockfile
+pnpm-lock.yaml
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/astro.config.mjs b/astro.config.mjs
new file mode 100644
index 00000000..7f03590e
--- /dev/null
+++ b/astro.config.mjs
@@ -0,0 +1,13 @@
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+import svelte from "@astrojs/svelte";
+
+// https://astro.build/config
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+ integrations: [svelte(), tailwind()],
+ outDir: "./dist"
+});
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..6e669050
--- /dev/null
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "online-energieausweis",
+ "version": "0.0.1",
+ "license": "GPL V3.0",
+ "type": "module",
+ "scripts": {
+ "dev": "astro dev",
+ "build": "astro build",
+ "preview": "astro preview",
+ "astro": "astro",
+ "test:e2e": "cypress run",
+ "test:unit": "vitest",
+ "format": "prettier --write ."
+ },
+ "private": true,
+ "dependencies": {
+ "@astrojs/svelte": "^2.0.2",
+ "@astrojs/tailwind": "^3.1.0",
+ "astro": "^2.0.16",
+ "svelte": "^3.54.0",
+ "tailwindcss": "^3.0.24",
+ "vitest": "^0.29.2"
+ },
+ "devDependencies": {
+ "@typescript-eslint/eslint-plugin": "^5.36.1",
+ "@typescript-eslint/parser": "^5.36.1",
+ "astro": "^2.1.2",
+ "eslint": "~8.15.0",
+ "eslint-config-prettier": "8.1.0",
+ "prettier": "^2.8.4",
+ "sass": "^1.58.3",
+ "svelte-preprocess": "^5.0.1",
+ "typescript": "^4.9.5"
+ }
+}
diff --git a/public/favicon.jpg b/public/favicon.jpg
new file mode 100644
index 00000000..410a1522
Binary files /dev/null and b/public/favicon.jpg differ
diff --git a/public/images/1.jpeg b/public/images/1.jpeg
new file mode 100644
index 00000000..b9328968
Binary files /dev/null and b/public/images/1.jpeg differ
diff --git a/public/images/2.jpg b/public/images/2.jpg
new file mode 100644
index 00000000..bc609420
Binary files /dev/null and b/public/images/2.jpg differ
diff --git a/public/images/3.jpg b/public/images/3.jpg
new file mode 100644
index 00000000..d2268021
Binary files /dev/null and b/public/images/3.jpg differ
diff --git a/public/images/4.jpeg b/public/images/4.jpeg
new file mode 100644
index 00000000..740bbdc9
Binary files /dev/null and b/public/images/4.jpeg differ
diff --git a/public/images/Bedarfsausweis-Gewerbe-Farbskala.png b/public/images/Bedarfsausweis-Gewerbe-Farbskala.png
new file mode 100644
index 00000000..26a7d6d6
Binary files /dev/null and b/public/images/Bedarfsausweis-Gewerbe-Farbskala.png differ
diff --git a/public/images/Bedarfsausweis-Wohngebaeude-Beispiel.jpg b/public/images/Bedarfsausweis-Wohngebaeude-Beispiel.jpg
new file mode 100644
index 00000000..8df7dad3
Binary files /dev/null and b/public/images/Bedarfsausweis-Wohngebaeude-Beispiel.jpg differ
diff --git a/public/images/Bedarfsausweis-Wohngebaeude-Einsparpotentiale.gif b/public/images/Bedarfsausweis-Wohngebaeude-Einsparpotentiale.gif
new file mode 100644
index 00000000..7fc6e234
Binary files /dev/null and b/public/images/Bedarfsausweis-Wohngebaeude-Einsparpotentiale.gif differ
diff --git a/public/images/Bedarfsausweis-Wohngebäude-Energieverluste.jpg b/public/images/Bedarfsausweis-Wohngebäude-Energieverluste.jpg
new file mode 100644
index 00000000..2ab31535
Binary files /dev/null and b/public/images/Bedarfsausweis-Wohngebäude-Energieverluste.jpg differ
diff --git a/public/images/DIA_BA_Wohn.png b/public/images/DIA_BA_Wohn.png
new file mode 100644
index 00000000..e5983ca1
Binary files /dev/null and b/public/images/DIA_BA_Wohn.png differ
diff --git a/public/images/DIA_VA_Gewerbe.png b/public/images/DIA_VA_Gewerbe.png
new file mode 100644
index 00000000..7f6751ba
Binary files /dev/null and b/public/images/DIA_VA_Gewerbe.png differ
diff --git a/public/images/DIA_VA_Wohn.png b/public/images/DIA_VA_Wohn.png
new file mode 100644
index 00000000..11f78372
Binary files /dev/null and b/public/images/DIA_VA_Wohn.png differ
diff --git a/public/images/Endenergiebedaf-Primaerenergiebedarf-Farbskala.png b/public/images/Endenergiebedaf-Primaerenergiebedarf-Farbskala.png
new file mode 100644
index 00000000..bc301a90
Binary files /dev/null and b/public/images/Endenergiebedaf-Primaerenergiebedarf-Farbskala.png differ
diff --git a/public/images/Endenergieverbrauch-Primaerenergieverbrauch-Farbskala.png b/public/images/Endenergieverbrauch-Primaerenergieverbrauch-Farbskala.png
new file mode 100644
index 00000000..95311ebe
Binary files /dev/null and b/public/images/Endenergieverbrauch-Primaerenergieverbrauch-Farbskala.png differ
diff --git a/public/images/Endenergieverbrauch-Waerme-Endenergieverbrauch-Strom-Farbskala.png b/public/images/Endenergieverbrauch-Waerme-Endenergieverbrauch-Strom-Farbskala.png
new file mode 100644
index 00000000..43a5fdb3
Binary files /dev/null and b/public/images/Endenergieverbrauch-Waerme-Endenergieverbrauch-Strom-Farbskala.png differ
diff --git a/public/images/IB-Cornelsen.png b/public/images/IB-Cornelsen.png
new file mode 100644
index 00000000..ba082f9e
Binary files /dev/null and b/public/images/IB-Cornelsen.png differ
diff --git a/public/images/IBC-Icon.jpg b/public/images/IBC-Icon.jpg
new file mode 100644
index 00000000..e49790ff
Binary files /dev/null and b/public/images/IBC-Icon.jpg differ
diff --git a/public/images/KL_engel-voelkers.png b/public/images/KL_engel-voelkers.png
new file mode 100644
index 00000000..412bf05d
Binary files /dev/null and b/public/images/KL_engel-voelkers.png differ
diff --git a/public/images/KL_grossmann_und_berger.png b/public/images/KL_grossmann_und_berger.png
new file mode 100644
index 00000000..44f62d4e
Binary files /dev/null and b/public/images/KL_grossmann_und_berger.png differ
diff --git a/public/images/KL_hafenmakler-zelle.png b/public/images/KL_hafenmakler-zelle.png
new file mode 100644
index 00000000..6c414448
Binary files /dev/null and b/public/images/KL_hafenmakler-zelle.png differ
diff --git a/public/images/KL_redos.png b/public/images/KL_redos.png
new file mode 100644
index 00000000..7aa4908e
Binary files /dev/null and b/public/images/KL_redos.png differ
diff --git a/public/images/KL_wentzel_dr.png b/public/images/KL_wentzel_dr.png
new file mode 100644
index 00000000..69596a09
Binary files /dev/null and b/public/images/KL_wentzel_dr.png differ
diff --git a/public/images/SKALA-910-v2.png b/public/images/SKALA-910-v2.png
new file mode 100644
index 00000000..c5a11cc9
Binary files /dev/null and b/public/images/SKALA-910-v2.png differ
diff --git a/public/images/SKALA-910-v3.png b/public/images/SKALA-910-v3.png
new file mode 100644
index 00000000..686e54f8
Binary files /dev/null and b/public/images/SKALA-910-v3.png differ
diff --git a/public/images/SKALA-910.png b/public/images/SKALA-910.png
new file mode 100644
index 00000000..28cd50da
Binary files /dev/null and b/public/images/SKALA-910.png differ
diff --git a/public/images/SKALA.png b/public/images/SKALA.png
new file mode 100644
index 00000000..37a70508
Binary files /dev/null and b/public/images/SKALA.png differ
diff --git a/public/images/STAT_VA-G_01.png b/public/images/STAT_VA-G_01.png
new file mode 100644
index 00000000..88e88916
Binary files /dev/null and b/public/images/STAT_VA-G_01.png differ
diff --git a/public/images/STAT_VA-G_02a.png b/public/images/STAT_VA-G_02a.png
new file mode 100644
index 00000000..a661cf27
Binary files /dev/null and b/public/images/STAT_VA-G_02a.png differ
diff --git a/public/images/VA-01.jpg b/public/images/VA-01.jpg
new file mode 100644
index 00000000..6412fa4e
Binary files /dev/null and b/public/images/VA-01.jpg differ
diff --git a/public/images/VA-02.jpg b/public/images/VA-02.jpg
new file mode 100644
index 00000000..1de60618
Binary files /dev/null and b/public/images/VA-02.jpg differ
diff --git a/public/images/Verbrauchsausweis-Wohngebaeude-Beispiel.jpg b/public/images/Verbrauchsausweis-Wohngebaeude-Beispiel.jpg
new file mode 100644
index 00000000..5da6d9a9
Binary files /dev/null and b/public/images/Verbrauchsausweis-Wohngebaeude-Beispiel.jpg differ
diff --git a/public/images/Verbrauchsausweis-Wohngebaeude-Datenblatt.jpg b/public/images/Verbrauchsausweis-Wohngebaeude-Datenblatt.jpg
new file mode 100644
index 00000000..8335efe0
Binary files /dev/null and b/public/images/Verbrauchsausweis-Wohngebaeude-Datenblatt.jpg differ
diff --git a/public/images/bedarfsausweis-endenergiebedarf.jpg b/public/images/bedarfsausweis-endenergiebedarf.jpg
new file mode 100644
index 00000000..5ca54cc2
Binary files /dev/null and b/public/images/bedarfsausweis-endenergiebedarf.jpg differ
diff --git a/public/images/beispiel-waermedaemmung-gebaeudehuelle.jpg b/public/images/beispiel-waermedaemmung-gebaeudehuelle.jpg
new file mode 100644
index 00000000..20e51e88
Binary files /dev/null and b/public/images/beispiel-waermedaemmung-gebaeudehuelle.jpg differ
diff --git a/public/images/beispiel-waermedaemmung-hinterlueftet-gebaeudehuelle.jpg b/public/images/beispiel-waermedaemmung-hinterlueftet-gebaeudehuelle.jpg
new file mode 100644
index 00000000..8844e27d
Binary files /dev/null and b/public/images/beispiel-waermedaemmung-hinterlueftet-gebaeudehuelle.jpg differ
diff --git a/public/images/building.png b/public/images/building.png
new file mode 100644
index 00000000..cf227883
Binary files /dev/null and b/public/images/building.png differ
diff --git a/public/images/crop.png b/public/images/crop.png
new file mode 100644
index 00000000..d9adb2e1
Binary files /dev/null and b/public/images/crop.png differ
diff --git a/public/images/cropped-IBC-Icon-1-180x180.jpg b/public/images/cropped-IBC-Icon-1-180x180.jpg
new file mode 100644
index 00000000..629517d8
Binary files /dev/null and b/public/images/cropped-IBC-Icon-1-180x180.jpg differ
diff --git a/public/images/cropped-IBC-Icon-1-192x192.jpg b/public/images/cropped-IBC-Icon-1-192x192.jpg
new file mode 100644
index 00000000..410a1522
Binary files /dev/null and b/public/images/cropped-IBC-Icon-1-192x192.jpg differ
diff --git a/public/images/cropped-IBC-Icon-1-270x270.jpg b/public/images/cropped-IBC-Icon-1-270x270.jpg
new file mode 100644
index 00000000..0df05efd
Binary files /dev/null and b/public/images/cropped-IBC-Icon-1-270x270.jpg differ
diff --git a/public/images/cropped-IBC-Icon-1-32x32.jpg b/public/images/cropped-IBC-Icon-1-32x32.jpg
new file mode 100644
index 00000000..4ccec8f6
Binary files /dev/null and b/public/images/cropped-IBC-Icon-1-32x32.jpg differ
diff --git a/public/images/delete.png b/public/images/delete.png
new file mode 100644
index 00000000..06a1766a
Binary files /dev/null and b/public/images/delete.png differ
diff --git a/public/images/diplom-ingenieur-jens-cornelsen.jpg b/public/images/diplom-ingenieur-jens-cornelsen.jpg
new file mode 100644
index 00000000..f6f030c5
Binary files /dev/null and b/public/images/diplom-ingenieur-jens-cornelsen.jpg differ
diff --git a/public/images/energieausweis-online-erstellen-verbrauchsausweis-gewerbe.png b/public/images/energieausweis-online-erstellen-verbrauchsausweis-gewerbe.png
new file mode 100644
index 00000000..d74a5ea2
Binary files /dev/null and b/public/images/energieausweis-online-erstellen-verbrauchsausweis-gewerbe.png differ
diff --git a/public/images/energieausweis-online-erstellen-verbrauchsausweis.png b/public/images/energieausweis-online-erstellen-verbrauchsausweis.png
new file mode 100644
index 00000000..ebad59bd
Binary files /dev/null and b/public/images/energieausweis-online-erstellen-verbrauchsausweis.png differ
diff --git a/public/images/hamburger.png b/public/images/hamburger.png
new file mode 100644
index 00000000..32346e62
Binary files /dev/null and b/public/images/hamburger.png differ
diff --git a/public/images/header/header-bg.jpg b/public/images/header/header-bg.jpg
new file mode 100644
index 00000000..6f339531
Binary files /dev/null and b/public/images/header/header-bg.jpg differ
diff --git a/public/images/header/logo-big.png b/public/images/header/logo-big.png
new file mode 100644
index 00000000..ab3777e7
Binary files /dev/null and b/public/images/header/logo-big.png differ
diff --git a/public/images/icon_gewerbe_plan_01.png b/public/images/icon_gewerbe_plan_01.png
new file mode 100644
index 00000000..b94a9c2f
Binary files /dev/null and b/public/images/icon_gewerbe_plan_01.png differ
diff --git a/public/images/icon_wohnhaus_plan_01.png b/public/images/icon_wohnhaus_plan_01.png
new file mode 100644
index 00000000..a6f73227
Binary files /dev/null and b/public/images/icon_wohnhaus_plan_01.png differ
diff --git a/public/images/left-sidebar/payment.gif b/public/images/left-sidebar/payment.gif
new file mode 100644
index 00000000..179ff08b
Binary files /dev/null and b/public/images/left-sidebar/payment.gif differ
diff --git a/public/images/left-sidebar/payment.jpg b/public/images/left-sidebar/payment.jpg
new file mode 100644
index 00000000..5d0e94a2
Binary files /dev/null and b/public/images/left-sidebar/payment.jpg differ
diff --git a/public/images/left-sidebar/payment.png b/public/images/left-sidebar/payment.png
new file mode 100644
index 00000000..a00ee104
Binary files /dev/null and b/public/images/left-sidebar/payment.png differ
diff --git a/public/images/marker.png b/public/images/marker.png
new file mode 100644
index 00000000..8328455f
Binary files /dev/null and b/public/images/marker.png differ
diff --git a/public/images/mastercard.png b/public/images/mastercard.png
new file mode 100644
index 00000000..b2442b5a
Binary files /dev/null and b/public/images/mastercard.png differ
diff --git a/public/images/no.png b/public/images/no.png
new file mode 100644
index 00000000..b80a9632
Binary files /dev/null and b/public/images/no.png differ
diff --git a/public/images/objects/broker-1.png b/public/images/objects/broker-1.png
new file mode 100644
index 00000000..8a40925d
Binary files /dev/null and b/public/images/objects/broker-1.png differ
diff --git a/public/images/objects/energy-1.png b/public/images/objects/energy-1.png
new file mode 100644
index 00000000..81563818
Binary files /dev/null and b/public/images/objects/energy-1.png differ
diff --git a/public/images/objects/marker-1.png b/public/images/objects/marker-1.png
new file mode 100644
index 00000000..98aab598
Binary files /dev/null and b/public/images/objects/marker-1.png differ
diff --git a/public/images/ok.png b/public/images/ok.png
new file mode 100644
index 00000000..57094533
Binary files /dev/null and b/public/images/ok.png differ
diff --git a/public/images/pattern.png b/public/images/pattern.png
new file mode 100644
index 00000000..91a2f88a
Binary files /dev/null and b/public/images/pattern.png differ
diff --git a/public/images/payment.jpg b/public/images/payment.jpg
new file mode 100644
index 00000000..5d0e94a2
Binary files /dev/null and b/public/images/payment.jpg differ
diff --git a/public/images/paypal.png b/public/images/paypal.png
new file mode 100644
index 00000000..e34a4d5c
Binary files /dev/null and b/public/images/paypal.png differ
diff --git a/public/images/pdf-icon.png b/public/images/pdf-icon.png
new file mode 100644
index 00000000..d310ba79
Binary files /dev/null and b/public/images/pdf-icon.png differ
diff --git a/public/images/pfeil.png b/public/images/pfeil.png
new file mode 100644
index 00000000..c0c86f87
Binary files /dev/null and b/public/images/pfeil.png differ
diff --git a/public/images/pfeil2.png b/public/images/pfeil2.png
new file mode 100644
index 00000000..869918cb
Binary files /dev/null and b/public/images/pfeil2.png differ
diff --git a/public/images/question-mark.png b/public/images/question-mark.png
new file mode 100644
index 00000000..3b1b2d77
Binary files /dev/null and b/public/images/question-mark.png differ
diff --git a/public/images/rechnung.png b/public/images/rechnung.png
new file mode 100644
index 00000000..8deb0448
Binary files /dev/null and b/public/images/rechnung.png differ
diff --git a/public/images/right-sidebar/gewerbe-1.png b/public/images/right-sidebar/gewerbe-1.png
new file mode 100644
index 00000000..d4a868bb
Binary files /dev/null and b/public/images/right-sidebar/gewerbe-1.png differ
diff --git a/public/images/right-sidebar/ing-niedersachsen.png b/public/images/right-sidebar/ing-niedersachsen.png
new file mode 100644
index 00000000..fe46170d
Binary files /dev/null and b/public/images/right-sidebar/ing-niedersachsen.png differ
diff --git a/public/images/right-sidebar/mitglied-haendlerbund.png b/public/images/right-sidebar/mitglied-haendlerbund.png
new file mode 100644
index 00000000..a5067c30
Binary files /dev/null and b/public/images/right-sidebar/mitglied-haendlerbund.png differ
diff --git a/public/images/right-sidebar/palme-1.png b/public/images/right-sidebar/palme-1.png
new file mode 100644
index 00000000..7b11be7d
Binary files /dev/null and b/public/images/right-sidebar/palme-1.png differ
diff --git a/public/images/right-sidebar/telefon-1.png b/public/images/right-sidebar/telefon-1.png
new file mode 100644
index 00000000..9635ee21
Binary files /dev/null and b/public/images/right-sidebar/telefon-1.png differ
diff --git a/public/images/right-sidebar/wohnhaus-1.png b/public/images/right-sidebar/wohnhaus-1.png
new file mode 100644
index 00000000..f67d5f3f
Binary files /dev/null and b/public/images/right-sidebar/wohnhaus-1.png differ
diff --git a/public/images/right-sidebar/wohnhaus-ba-1.png b/public/images/right-sidebar/wohnhaus-ba-1.png
new file mode 100644
index 00000000..19caef4d
Binary files /dev/null and b/public/images/right-sidebar/wohnhaus-ba-1.png differ
diff --git a/public/images/rotate-left.png b/public/images/rotate-left.png
new file mode 100644
index 00000000..a73ce76d
Binary files /dev/null and b/public/images/rotate-left.png differ
diff --git a/public/images/rotate-right.png b/public/images/rotate-right.png
new file mode 100644
index 00000000..14048a02
Binary files /dev/null and b/public/images/rotate-right.png differ
diff --git a/public/images/sepa.png b/public/images/sepa.png
new file mode 100644
index 00000000..c7faae3a
Binary files /dev/null and b/public/images/sepa.png differ
diff --git a/public/images/slidejs/arrow.svg b/public/images/slidejs/arrow.svg
new file mode 100644
index 00000000..dc4c5706
--- /dev/null
+++ b/public/images/slidejs/arrow.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/public/images/sofort.png b/public/images/sofort.png
new file mode 100644
index 00000000..d8411848
Binary files /dev/null and b/public/images/sofort.png differ
diff --git a/public/images/test1.jpg b/public/images/test1.jpg
new file mode 100644
index 00000000..64d063e0
Binary files /dev/null and b/public/images/test1.jpg differ
diff --git a/public/images/verbrauchsausweis-endenergiebedarf.jpg b/public/images/verbrauchsausweis-endenergiebedarf.jpg
new file mode 100644
index 00000000..5ca54cc2
Binary files /dev/null and b/public/images/verbrauchsausweis-endenergiebedarf.jpg differ
diff --git a/public/images/zoom-in.png b/public/images/zoom-in.png
new file mode 100644
index 00000000..b7b856c4
Binary files /dev/null and b/public/images/zoom-in.png differ
diff --git a/public/images/zoom-out.png b/public/images/zoom-out.png
new file mode 100644
index 00000000..d5b48756
Binary files /dev/null and b/public/images/zoom-out.png differ
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 00000000..91a92e9b
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,8 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 00000000..eb3e631a
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,36 @@
+---
+---
+
+
diff --git a/src/components/SidebarLeft.astro b/src/components/SidebarLeft.astro
new file mode 100644
index 00000000..f1d3caca
--- /dev/null
+++ b/src/components/SidebarLeft.astro
@@ -0,0 +1,91 @@
+
\ No newline at end of file
diff --git a/src/components/SidebarRight.astro b/src/components/SidebarRight.astro
new file mode 100644
index 00000000..790d4cbb
--- /dev/null
+++ b/src/components/SidebarRight.astro
@@ -0,0 +1,126 @@
+
diff --git a/src/components/Widget.astro b/src/components/Widget.astro
new file mode 100644
index 00000000..223473d4
--- /dev/null
+++ b/src/components/Widget.astro
@@ -0,0 +1,75 @@
+
\ No newline at end of file
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 00000000..f964fe0c
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
new file mode 100644
index 00000000..fbcf8a1e
--- /dev/null
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,104 @@
+---
+import "../style/global.scss"
+import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
+import SidebarLeft from '../components/SidebarLeft.astro';
+import SidebarRight from '../components/SidebarRight.astro';
+
+export interface Props {
+ title: string;
+}
+
+const { title } = Astro.props;
+
+const schema = JSON.stringify({
+ '@context': 'http://schema.org',
+ '@type': 'Corporation',
+ name: 'IB Cornelsen',
+ alternateName: 'online-energieausweis.org',
+ url: 'https://online-energieausweis.org',
+ logo: 'https://online-energieausweis.org/ib-cornelsen.png',
+ address: {
+ '@type': 'PostalAddress',
+ streetAddress: 'Katendeich 5A',
+ addressLocality: 'Hamburg',
+ postalCode: '21035',
+ addressCountry: 'Deutschland',
+ email: 'info@online-energieausweis.org',
+ },
+ contactPoint: {
+ '@type': 'ContactPoint',
+ telephone: '+49-040-209339850',
+ faxNumber: '+49-040-209339859',
+ contactType: 'customer service',
+ areaServed: 'DE',
+ availableLanguage: 'German',
+ },
+});
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title || 'Energieausweis online erstellen - Online Energieausweis'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
new file mode 100644
index 00000000..ac4e8577
--- /dev/null
+++ b/src/pages/index.astro
@@ -0,0 +1,446 @@
+---
+import Widget from '../components/Widget.astro';
+import Layout from '../layouts/Layout.astro';
+---
+
+
+ Energieausweis online erstellen
+
+
+
+ GEG gilt ab 1. Mai 2021 und löst die EnEV ab
+
+
Folgende Punkte ändern sich:
+
+
+ Erhöhte Sorgfaltspflicht bei der Erstellung der Energieausweise.
+ Insbesondere zur Einschätzung der Modernisierungsempfehlungen werden
+ jetzt Fotos der relevanten Bereiche von Dach, Fenster, Heizung und
+ Außenwand benötigt.
+
+
+ Die Primärenergiefaktoren zur Ermittlung des Gebäudekennwerts werden
+ jetzt direkt im GEG (§22 Primärenergiefaktoren) geregelt. Dadurch wird
+ mehr Transparenz und Nachvollziehbarkeit geschaffen. Auch findet die
+ Verwendung von Biogas aus dem Erdgasnetz jetzt angemessen
+ Berücksichtigung.
+
+
+ Die lokale Erzeugung von Strom über eine PV-Anlage wird besser
+ berücksichtigt und kann vom Jahres-Primärenergiebedarf abgezogen werden
+ (bis 45%).
+
+
+ Die Angabe der CO2-Emission des Gebäudes im Energieausweis wird
+ verplichtend eingeführt.
+
+
+
+
+
+ Energieausweis nach aktueller GEG (vormals EnEV) geprüft vom Diplom
+ Ingenieur
+
+
+
+
+ Sie möchten Ihren Energieausweis online erstellen ? Auf
+ dieser Seite finden Sie alle nötigen Informationen hierzu. Sollten Sie sich
+ nicht sicher sein welchen Energieausweis Sie benötigen, können Sie sich bei uns umfassend informieren. Wir haben fürs
+ Sie alle wichtigen Informationen rund um die GEG und zur
+ Energieausweis Pflicht zusammengetragen.
+ Zusätzlich haben wir die entscheidenden Informationen auf übersichtlichen Merkblättern
+ im PDF Format zum Download zusammengefasst. Sollten Sie noch Fragen zum Thema Energieausweis
+ online erstellen haben, stehen wir Ihnen gerne telefonisch unter folgender Nummer:
+ 040/209 339 850 zur Verfügung.
+ Mit dem Energieausweis werden Wohngebäude und Nichtwohngebäude
+ nach den Vorgaben der Energieeinsparverordnung EnEV
+ energetisch bewertet. Das DIBt
+ (Deutsches Institut für Bautechnik) regelt die Grundsätze zur Ausstellung, Berechnung
+ und der Qualitätssicherung. Der Energieausweis beschreibt die entsprechenden Energiekennwerte
+ auf einer Farbskala, grün (A+/Effizienzhaus), gelb (D) und rot (H / unsaniert).
+ Es wird grundsätzlich zwischen zwei Energieausweisarten unterschieden:
+
+
+
+
+ Der verbrauchsbasierte Energieausweis wird als Verbrauchsausweis bezeichnet. Dies ist der „kleine“ Energieausweis und kann bei Vermietung
+ und Verkauf in den meisten Fällen verwendet werden. Hier gehts direkt zum
+ Eingabeformular → Energieausweis online erstellen
+
+
+
+ Der bedarfsbasierte Energieausweis wird als Bedarfsausweis bezeichnet. Dies ist der „große“ Energieausweis und kann immer
+ verwendet werden. Bei Neubau und Modernisierung ist er zwingend
+ vorgeschrieben. Hier gehts direkt zum Eingabeformular → Energieausweis online erstellen
+
+
+
+
+
+
Energieausweis online erstellen
+
+
+
+
+ Verbrauchsausweis
Wohngebäude
+
+
+
Unsere Leistungen:
+
+ Prüfung durch Diplom Ingenieur
+
+
+ Energieausweis Vorschau als PDF
+
+
+ Ausweisdokument als PDF per E-Mail
+
+
+ Registrierung beim DiBt
+
+
+ Bearbeitung innhalb 24h
+
+
+ rechtssicher nach aktueller EnEV
+
+
+ telefonische Beratung
+
+
+
+
+
+ Bedarfsausweis
Wohngebäude
+
+
+
inkl. 19% MwSt
+
+ € 75
+
+
+
Unsere Leistungen:
+
+ Prüfung durch Diplom Ingenieur
+
+
+ Energieausweis Vorschau als PDF
+
+
+ Ausweisdokument als PDF per E-Mail
+
+
+ Registrierung beim DiBt
+
+
+ Bearbeitung innhalb 24h
+
+
+ rechtssicher nach aktueller EnEV
+
+
+ telefonische Beratung
+
+
+
+
+
+ Verbrauchsausweis
Gewerbe
+
+
+
Unsere Leistungen:
+
+ Prüfung durch Diplom Ingenieur
+
+
+ Energieausweis Vorschau als PDF
+
+
+ Ausweisdokument als PDF per E-Mail
+
+
+ Registrierung beim DiBt
+
+
+ Bearbeitung innhalb 24h
+
+
+ rechtssicher nach aktueller EnEV
+
+
+ telefonische Beratung
+
+
+
+
+
+
+
+ Unterschied: Verbrauchsausweis und Bedarfsausweis Grundsätzlich unterscheidet
+ man beim Energieausweis zwischen Verbrauchsausweis und Bedarfsausweis.
+ Was ist ein Verbrauchsausweis?
+
+ Der Verbrauchsausweis gibt den Energieverbrauch der Gebäudebewohner in den vergangenen
+ drei Jahren für Heizung und Warmwasserbereitung an. Um den Energieverbrauchskennwert zu ermitteln , wird der tatsächliche Energieverbrauch mithilfe eines standortbezogenen
+ Klimafaktors bereinigt. Der Durchschnittswert wird dann durch die sogenannte
+ energetische Gebäudenutzfläche (An) geteilt. So führt beispielsweise ein hoher
+ Verbrauch in einem einzelnen harten Winter nicht zu einer schlechteren
+ Beurteilung des Gebäudes. Der tatsächliche Energieverbrauch in einem Gebäude
+ oder einer Wohnung kann aufgrund des Witterungseinflusses vom
+ Energieverbrauchskennwert abweichen.Das Ergebnis im Verbrauchsausweis ist
+ stark vom individuellen Nutzungsverhalten der Bewohner abhängig. Wird in einem
+ energetisch schlechten Gebäude kaum geheizt, so kann der Energieausweis
+ trotzdem sehr gut ausfallen.Was ist ein Bedarfsausweis? Der Bedarfsausweis
+ entsteht auf Grundlage einer technischen Analyse der Bausubstanz und der Heizungsanlage eines Gebäudes und ist unabhängig vom individuellen Nutzerverhalten. Die Farbverlaufsskala im
+ Bedarfsausweis weist zwei verschiedene Werte aus, die sehr unterschiedlich ausfallen
+ können – einen Wert für den Endenergiebedarf und einen für den Primärenergiebedarf.
+ Zusätzlich wird noch ein Kennwert für die energetische Qualität der Gebäudehülle
+ dargestellt.Der Energiebedarf gibt die nach technischen Regeln berechnete, vom
+ konkreten Gebäude jährlich benötigte Energiemenge für Heizung, Lüftung und Warmwasserbereitung
+ an. Dabei werden bei der Berechnung standardisierte Randbedingungen – beispielsweise
+ eine Innentemperatur von 19 Grad im beheizten Bereich des Gebäudes – zugrunde gelegt.
+ Am Endenergiebedarf sollten sich Hausbewohner orientieren, wenn sie ihren künftigen
+ Energieverbrauch und die Energiekosten abschätzen wollen.Der Primärenergiebedarf
+ bildet die Gesamtenergieeffizienz eines Gebäudes ab. Er berücksichtigt neben der
+ Endenergie auch die so genannte „Vorkette“ (Erkundung, Gewinnung, Verteilung, Umwandlung)
+ der jeweils eingesetzten Energieträger (z.B. Heizöl, Gas, Strom, erneuerbare Energien).Besonders
+ niedrig fällt der Primärenergiebedarf aus, wenn erneuerbare Energien (solare Strahlungsenergie,
+ Geothermie, Energie aus Biomasse) für die Energieversorgung im Gebäude eingesetzt
+ werden. Am Primärenergiebedarf können Verbraucher erkennen, wie umweltfreundlich
+ ihr Gebäude ist.Fazit – Verbrauchsausweis / Bedarfsausweis Geht es um
+ den tatsächlichen Verbrauch der Energie, der den Aufwand für Heizung und zentrale
+ Warmwasserbereitung der vergangenen drei Jahre berücksichtigt, wird der Energieverbrauchskennwert
+ für den Verbrauchsausweis ermittelt. Bei gewerblichen Objekten wird zusätzlich
+ der Verbrauch für Beleuchtung und Klimatisierung mit eingerechnet. Anhand der Zeiträume
+ und der Lage des Gebäudes (Postleitzahl) werden diese Daten ausgewertet und sowohl
+ zeit-, als auch klimabereinigt zur Bewertung der vorhandenen energetischen Qualität
+ herangezogen.Für das Ausstellen des Bedarfsausweis wird der rechnerische Energiebedarf
+ unter standardisierten Randbedingungen benötigt. Daten rund um Bausubstanz, Gebäudehülle
+ und Heizanlage fließen in die Berechnung mit ein. Bedarfsausweise widerspiegeln
+ die tatsächliche energetische Qualität eines Gebäudes damit wesentlich besser als
+ die Verbrauchsausweise.
+
+
+
+
+
+
Verbrauchsausweis Wohngebäude
+
+
+
+ 3 zusammenhängende Heizenergieverbräuche müssen eingegeben werden.
+
+
+ Wohnfläche, Baujahr Gebäude und Baujahr Heizung müssen eingegeben
+ werden.
+
+
+
+
Verbrauchsausweis
+ bei fast allen Gebäuden möglich. (Baujahr > 1977 - Vermietung/Verkauf)
+
+
+
+
+
+
+
+
+
+
Bedarfsausweis Wohngebäude
+
+
+
+ Die verwendete Heizungsanlage (Standardkessel, Brennwertkessel, etc.)
+ muß eingegeben werden.
+
+
+ Grundrissgeometrie sowie Baujahr Heizung und Gebäude müssen eingegeben
+ werden.
+
+
+ Bedarfsausweis bei allen Gebäuden möglich. Die Berechnung ist umfangreicher und besser
+ vergleichbar.
+
+
+
+
+
+
+
+
+
Bedarfsausweis Gewerbe
+
+
+
+ Aktuelle Grundriss- und Ansichtspläne werden für die Zonierung
+ benötigt.
+
+
+ Baubeschreibung (z.B. aus der Baugenehmigung) mit Angabe der
+ verwendeten Baustoffe und TGA.
+
+ Angabe vom Baujahr der Heizung, Gebäude und Klimaanlage.
+
+ Bedarfsausweis Gewerbe bei allen Nichtwohngebäuden möglich (kann immmer verwendet werden).
+
+
+
+
+
+
+
+ Energieausweis online erstellen Soll Wohneigentum veräußert oder bauliches
+ Teileigentum zum Erwerb angeboten werden, muss dem möglichen Käufer oder Leasingnehmer
+ auf Verlangen unverzüglich ein
+ Energieausweis gezeigt werden . In den meisten Fällen ist hier ein Verbrauchsausweis ausreichend. Auch
+ Mietern oder Pächtern soll der Energieausweis unmittelbaren Aufschluss über
+ die energetischen Bedingungen des Gebäudes aufzeigen.Kommt der Anbieter der
+ offerierten Immobilie diesem Auftrag nach der Energieeinsparverordnung nicht
+ nach, drohen Bußgelder bis zu 15 000 Euro. Als Ausnahmen gelten Gebäude mit
+ nicht mehr als 50 m² Fläche sowie Baudenkmäler (§ 16 Abs. 4 EnEV ).Die Deutsche Energie-Agentur GmbH (dena ) empfiehlt bei Wohngebäuden generell den Bedarfsausweis. Er erlaubt eine
+ nutzerunabhängige Bewertung des Gebäudes. Zusätzlich können bei der Erstellung
+ eines Bedarfsausweises die Empfehlungen für Modernisierungen auf der Basis
+ einer technischen Analyse des Gebäudes ermittelt werden.
+
+ Zusammenfassung: Was ist ein Energieausweis?
+
+
+ Der Gesetzgeber hat zwei Arten des Energieausweises bestimmt: Den
+ Verbrauchsausweis und den Bedarfsausweis.
+
+
+ Je nach Gebäudeart, Baujahr, Nutzungsart gilt es verschiedene Kriterien
+ für den Energieausweis zu beachten.
+
+
+ Der Energieausweis ist ein Mittel, das als Starter für
+ Energiesparmaßnahmen definiert werden kann.
+
+
+ Mit Hilfe des Energieausweises kann sich der Marktwert einer Immobilie
+ erhöhen.
+
+
+ Der Energieausweis offenbart bauliche Mängel, die eine
+ Energieverschwendung mit sich bringen.
+
+
+ Im Energieausweis werden Sanierungs- bzw. Modernisierungsvorschläge
+ dokumentiert.
+
+
+ Anhand des Energiepasses lässt sich der energetische Zustand verschiedener
+ Gebäude miteinander vergleichen.
+
+
+
diff --git a/src/style/576.scss b/src/style/576.scss
new file mode 100644
index 00000000..d95ce6f7
--- /dev/null
+++ b/src/style/576.scss
@@ -0,0 +1,2031 @@
+header {
+ background-color: #fff;
+}
+
+body {
+ background-color: #fff;
+ background-image: url(../images/pattern.png);
+ background-repeat: repeat;
+ background-attachment: fixed;
+}
+
+.hide-on-mobile {
+ display: none;
+}
+
+/*-----------------------------------------------------------------*/
+/*- -*/
+/*- General Styles & Structure -*/
+/*- (min-width: 0px) and (max-width: 575.98px) -*/
+/*-----------------------------------------------------------------*/
+
+.content {
+ width: 100%;
+ padding: 0px;
+ margin: 0px auto;
+ display: grid;
+ column-gap: 20px;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: auto;
+}
+
+.stretch-2 {
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 4;
+ grid-area: 1/1/1/4;
+}
+
+.mainContent {
+ position: relative;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ background-color: rgb(255, 255, 255);
+ margin-top: 0px;
+ padding: 0% 2%;
+ width: calc(100% - 4%);
+}
+
+.only-form-mainContent {
+
+ padding: 20px 10px;
+ width: calc(100% - 4px);
+}
+
+.mainContent * {
+ box-sizing: border-box;
+}
+
+.left-sidebar {
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ grid-area: 1/1/1/3;
+ padding-top: 0px;
+ margin-top: 0px;
+ width: 100%;
+}
+
+.right-sidebar {
+ display: none;
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 3;
+ grid-area: 1/1/1/3;
+ padding-top: 0px;
+ margin-top: 0px;
+ width: 100%;
+}
+
+.mainContent h1 {
+ font-size: 1.7rem;
+ font-weight: 500;
+ line-height: 1.2rem;
+ width: 100%;
+ text-align: center;
+ margin: 1em 0em;
+}
+
+.mainContent h2 {
+ font-weight: normal;
+ font-size: 1rem;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 1em 0em;
+}
+
+.mainContent h2::before {
+ content: "";
+ width: 12px;
+ height: 12px;
+ border-radius: 4px;
+ background: #f5b691;
+ position: absolute;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
+ left: -20px;
+ top: 10px;
+}
+
+.mainContent h3 {
+ font-weight: normal;
+ font-size: 1rem;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 1em 0em;
+}
+
+.mainContent a {
+ color: #3A4AB5;
+ text-decoration: none;
+ display: inline;
+}
+
+.mainContent a:hover {
+ text-decoration: underline;
+}
+
+.mainContent p {
+ line-height: 1.7em;
+ padding-right: 1em;
+ font-size: 1.1em;
+ text-transform: none;
+}
+
+
+
+footer a {
+ display: inline;
+ color: #fff;
+ text-decoration: none;
+ font-size: 14px;
+}
+
+
+/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
+/*- Branding: -*/
+/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
+
+.headmargin {
+ margin-bottom: 40px;
+ display: block;
+ width: 100%;
+ min-height: 40px;
+ padding: 0 0 10px 0;
+}
+
+.headerBackgroundImage {
+ position: absolute;
+ top: 0;
+ height: 110px;
+ width: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.branding {
+ display: block;
+ margin-right: auto;
+ margin-left: auto;
+ min-height: 40px;
+ max-width: 90%;
+ position: relative;
+ padding: 30px 0px;
+ height: auto;
+}
+
+.header-logo {
+ position: absolute;
+ top: 10px;
+ right: 0px;
+ left: auto;
+ width: 220px;
+ cursor: pointer;
+}
+
+.MajorHeading {
+ color: rgb(58, 74, 181);
+ font-weight: 500;
+ font-size: 12px;
+ position: absolute;
+ top: 22px;
+ right: 0px;
+ line-height: 1.3em;
+}
+
+.MajorHeading.smaller {
+ color: rgb(255, 125, 38);
+ margin-top: 59px;
+ font-size: 15px;
+ font-weight: 500;
+}
+
+.nav-head {
+ background-color: #444F94;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-right: 4%;
+}
+
+.headerButton {
+ width: auto;
+ font-size: 14px;
+ font-weight: 500;
+ color: rgb(255, 255, 255);
+ height: 40px;
+ max-height: 100%;
+ padding-bottom: 0px;
+ padding-top: 0px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: #444F94;
+}
+
+header a {
+ display: block;
+ padding: 8px 8px;
+ text-align: center;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+ text-decoration: none;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.headerButton:hover {
+ color: #ffffff;
+ text-decoration: none;
+ background-color: #ff7d26;
+}
+
+
+
+.headerButton.active {
+ background-color: rgb(58, 74, 181);
+}
+
+
+
+
+
+
+
+
+
+/*-----------------------------------------------------------------*/
+
+
+/*- -*/
+
+.justify-between {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+#OEA_widget {
+ background-color: #f9f8f7 !important;
+}
+
+* {
+ box-sizing: unset;
+}
+
+::after,
+::before {
+ box-sizing: border-box;
+}
+
+hr {
+ border: none;
+ border-bottom: 1px solid #CECECE;
+ margin: 1em 0 1em 0;
+}
+
+ul hr {
+ margin: .5em 0 !important;
+}
+
+.nopad {
+ padding: 0 !important;
+}
+
+.nomar {
+ margin: 0 !important;
+}
+
+.bezpix {
+ width: 4em !important;
+}
+
+.rplg-box {
+ position: relative;
+ margin: 2px;
+ color: #777;
+ border: 1px solid #ededed;
+ background-color: #fafafa;
+ border-radius: 4px;
+ padding: 20px;
+}
+
+.rplg .rplg-review-avatar {
+ display: block;
+ width: 56px;
+ height: 56px;
+ font-style: italic;
+ padding: 0;
+ margin: 0 10px 0 0;
+ border-radius: 50%;
+ vertical-align: middle;
+ -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
+ box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
+}
+
+.rplg .rplg-social-logo svg {
+ display: block;
+ width: 20px;
+ height: 20px;
+ background: transparent;
+ border-radius: 50%;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+.rplgsw-wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ overflow: hidden
+}
+
+.rplg-box * {
+ margin-bottom: 0 !important;
+}
+
+.rplg-links a {
+ font-size: 14px;
+ margin-right: 15px;
+ text-decoration: none;
+}
+
+.rplg-links a:hover {
+ color: rgb(255, 125, 38);
+}
+
+.rplg .rplg-stars svg {
+ width: 18px !important;
+ height: 18px !important;
+ margin: 0 4px 0 0 !important;
+ vertical-align: middle !important;
+}
+
+.rplg-stars {
+ margin-bottom: 0 !important;
+}
+
+.rplg-row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.rplg-trim {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.rplg .rplg-biz-rating .rplg-biz-score {
+ display: inline-block;
+ color: #e7711b;
+ font-size: 18px;
+ font-weight: 600;
+ margin: 0 8px 0 0;
+ vertical-align: middle;
+}
+
+
+/*
+
+Login - Hausbox
+
+*/
+
+.haus_info_box {
+ width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ text-decoration: none;
+}
+
+.haus_info_box * {
+ margin: 0;
+}
+
+.haus_info_box img {
+ border-radius: 50%;
+ width: 100%;
+ max-width: 80px;
+ max-height: 80px;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.haus_info_box input {
+ width: auto;
+}
+
+.haus_info_box label {
+ margin-left: 10px;
+}
+
+.haus_info_box a {
+ margin-bottom: 5px;
+ cursor: pointer;
+}
+
+.haus-box {
+ border-radius: 8px;
+ -webkit-box-shadow: 0 0 .5em #ccc;
+ box-shadow: 0 0 .5em #ccc;
+ width: 300px !important;
+}
+
+.haus-box * {
+ margin-bottom: 0 !important;
+}
+
+.title-box {
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ background: rgb(255, 125, 38);
+ padding: 10px;
+}
+
+.title-box p {
+ color: #fff;
+ font-weight: 600;
+ line-height: 1.2em !important;
+}
+
+.image-box {
+ width: auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ gap: 10px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 10px;
+}
+
+.image-box img {
+ width: 100%;
+ border-radius: 8px;
+ max-height: 150px;
+}
+
+.ampel-img {
+ height: 100px;
+ width: 35px !important;
+ -webkit-box-shadow: 0 0 .5em #ccc;
+ box-shadow: 0 0 .5em #ccc;
+}
+
+.haus-content {
+ padding: 0 10px 10px 10px;
+}
+
+.haus-content table {
+ width: 100%;
+ margin-top: 10px;
+ border: none;
+}
+
+.haus-content th {
+ border: none;
+ font-weight: 400;
+ text-align: left;
+ padding: 0;
+ width: 50%;
+}
+
+.energieausweis-img {
+ width: 33%;
+ -webkit-box-shadow: 0 0 .5em #ccc;
+ box-shadow: 0 0 .5em #ccc;
+}
+
+.energieausweis-img img {
+ width: 100%;
+}
+
+.kbutton {
+ background-color: #31448e;
+ padding: 10px 20px;
+ color: #ffffff;
+ border: none;
+ font-size: 16px;
+ cursor: pointer;
+ font-weight: normal;
+ border-radius: 1em;
+ -webkit-box-shadow: .1em .1em .2em #bbb;
+ box-shadow: .1em .1em .2em #bbb;
+}
+
+.kbutton:focus {
+ background-color: #384da3;
+}
+
+
+/*
+
+Input, textarea styling (forms)
+
+*/
+
+select {
+ width: 100%;
+ color: #666;
+ background-color: #fafafa;
+ border: 1px solid #ccc;
+ padding: 10px 15px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: auto;
+ margin: 0;
+ font-size: 1rem;
+ margin-right: 20px;
+ font-weight: 100;
+}
+
+label {
+ margin-bottom: 10px;
+ text-align: left;
+ font-size: .8em;
+ font-weight: 600;
+ line-height: 1.5;
+ color: #212529;
+}
+
+textarea {
+ resize: vertical;
+}
+
+input,
+textarea {
+ width: 100%;
+ color: #666;
+ background-color: #fafafa;
+ border: 1px solid #ccc;
+ padding: 10px 15px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ height: auto;
+ margin: 0;
+ font-size: 1rem;
+ font-weight: 100;
+ outline: none;
+}
+
+.button-success {
+ color: #fff;
+ background: #28a745;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ padding: .375rem .75rem;
+ border-radius: 4px;
+ border: none;
+ font-size: 1rem;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+.button-success:hover {
+ background: #218838;
+}
+
+
+
+* {
+ margin: 0;
+ padding: 0;
+ font-family: Abel, Roboto, sand-serif;
+}
+
+.image-list {
+ text-align: center;
+ margin-top: 2em;
+}
+
+.right-sidebar img,
+.left-sidebar img {
+ width: 100%;
+ height: auto;
+}
+
+.clear {
+ clear: both;
+}
+
+.alignleft {
+ display: inline;
+ float: left;
+ margin-right: 1.5em;
+}
+
+.caption-text {
+ font-size: 75%;
+ padding-top: 5px;
+ opacity: .8;
+}
+
+.image-list img {
+ margin: 20px;
+}
+
+.haus_ul2 li::before {
+ content: url(../images/no.png);
+ position: absolute;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ width: 1.3em;
+ height: auto;
+ background: none;
+ left: -.6em;
+ top: .3em;
+}
+
+.kost-tbl {
+ width: 100%;
+ margin: 0 0 2em 0;
+ -webkit-box-shadow: .2em .2em .4em #ccc;
+ box-shadow: .2em .2em .4em #ccc;
+}
+
+.haus_ul1,
+.haus_ul2 {
+ list-style-type: none;
+ padding: 0;
+ margin: 0 0 0 2em;
+}
+
+.haus_ul1 li,
+.haus_ul2 li {
+ position: relative;
+ font-size: 1.1em;
+ padding: .3em .3em .3em 1.3em;
+}
+
+.haus_ul1 li::before {
+ content: url(../images/ok.png);
+ position: absolute;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ width: 1.3em;
+ height: auto;
+ background: none;
+ left: -.6em;
+ top: .3em;
+}
+
+.kost-tbl thead td {
+ background-color: #ddd;
+ color: #000 !important;
+ font-weight: normal;
+ font-size: 1.4em;
+}
+
+.kost-tbl td {
+ font-size: 1.1em;
+}
+
+table {
+ border-collapse: collapse;
+}
+
+tr {
+ border: 0;
+}
+
+th,
+td {
+ padding: 8px;
+}
+
+table,
+th,
+td {
+ border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.grid-3 {
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 20px;
+}
+
+
+
+.start_infobox_img {
+ float: right;
+ width: 23% !important;
+ margin-left: 1em;
+}
+
+.EA-SC-kosten-inside,
+.EA-SC-pflicht-inside,
+.EA-SC-welcher-inside,
+.EA-SC-gebaude-inside,
+.EA-SC-telefon-inside,
+.start_infobox_inside,
+.teaser_payment_inside,
+.teaser_credible_inside {
+ padding: 1em;
+}
+
+.start_infobox_button a:hover {
+ background-color: #ff7d26;
+ color: #fff !important;
+ padding: .15em 1em .15em 1em;
+ border-radius: .8em;
+ font-size: 1.3em;
+ font-weight: 600;
+ -webkit-box-shadow: .1em .1em .2em #bbb;
+ box-shadow: .1em .1em .2em #bbb;
+}
+
+.start_infobox_button a {
+ background-color: #3a4ab5;
+ color: #fff !important;
+ padding: .2em 1em .2em 1em;
+ border-radius: .8em;
+ font-size: 1.3em;
+ font-weight: 600;
+ -webkit-box-shadow: .1em .1em .2em #bbb;
+ box-shadow: .1em .1em .2em #bbb;
+}
+
+.start_infobox_button {
+ width: 100%;
+ text-align: right;
+}
+
+.start_infobox {
+ width: 100%;
+ margin: 2em auto;
+ border: 2px dotted #ff7d26;
+ border-radius: 1em;
+ -webkit-box-shadow: 0 0 .5em #ccc;
+ box-shadow: 0 0 .5em #ccc;
+}
+
+.start_infobox ul li::before {
+ content: "";
+ left: -1em;
+ top: 8px;
+ width: 7px;
+ height: 7px;
+ background-color: #ddd;
+ position: absolute;
+ border-radius: .1em;
+}
+
+.start_infobox .title,
+.start_infobox h2 {
+ color: #ff7d26 !important;
+ margin: 0;
+ font-size: 1.4em;
+ margin-bottom: -.3em;
+ position: relative;
+ padding-left: 1.7em;
+}
+
+.start_infobox .title::before,
+.start_infobox h2::before {
+ content: "";
+ left: .5em;
+ top: .5em;
+ width: 13px;
+ height: 13px;
+ background-color: #ff7d26;
+ position: absolute;
+ border-radius: 50%;
+}
+
+.right-img {
+ float: right;
+ margin: 0 0 2em 2em;
+ position: relative;
+}
+
+.buynow {
+ position: absolute;
+ top: 5em;
+ left: 0;
+}
+
+.downer {
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: 1fr 20px 1fr;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+}
+
+.pdf {
+ position: relative;
+ padding: 0 0 .5em 3.5em;
+ text-align: left !important;
+}
+
+.pdf::before {
+ content: url(/images/pdf-icon.png);
+ left: 0;
+ top: 0;
+ position: absolute;
+}
+
+.bedarfsausweis-wohngebaeude-beispiel,
+.verbrauchsausweis-wohngebaeude-beispiel {
+ width: 100%;
+ margin: 0 .5% 2em .5%;
+ font-size: 1.1em;
+ padding: .5em .5%;
+ float: left;
+ text-align: center;
+ border-top-left-radius: 1em;
+ border-top-right-radius: 1em;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 1em;
+ -webkit-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ border: 2px dotted #ff7d26;
+ -webkit-box-shadow: 0 0 0 #ccc;
+ box-shadow: 0 0 0 #ccc;
+}
+
+.buynow-btn {
+ background-color: #4251a3;
+ border-radius: 1em;
+ padding: .2em 1em;
+ -webkit-box-shadow: .1em .1em .2em #bbb;
+ box-shadow: .1em .1em .2em #bbb;
+ white-space: nowrap;
+ border: 2px solid #fff;
+ color: #fff !important;
+ font-weight: bold;
+ font-size: 1.5em;
+}
+
+.buynow-btn:hover {
+ background-color: #ff7d26;
+ -webkit-box-shadow: .1em .1em .2em #bbb;
+ box-shadow: .1em .1em .2em #bbb;
+ white-space: nowrap;
+}
+
+.form-control {
+ display: block;
+ width: 100%;
+ height: calc(2.25rem + 2px);
+ padding: .375rem .75rem;
+ font-size: 1rem;
+ line-height: 1.5;
+ color: #495057;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid #ced4da;
+ border-radius: .25rem;
+}
+
+.row * {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+#OEA_typ,
+#OEA_anlass,
+#OEA_Baujahr,
+#OEA_Wohneinheiten,
+#OEA_Sanierung {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ line-height: 1.2;
+ font-family: "Abel", sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+}
+
+.row {
+ display: -ms-flexbox;
+
+ display: -webkit-box;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-right: -15px;
+ margin-left: -15px;
+}
+
+.flex-row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.align-center {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+.flex-column {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.right-sidebar img,
+.left-sidebar img {
+ width: 100%;
+ height: auto;
+}
+
+.right-sidebar .large-button,
+.left-sidebar .large-button {
+ white-space: pre-wrap;
+ text-align: center;
+}
+
+block {
+ display: block;
+ position: relative;
+ min-height: 40px;
+ min-width: 40px;
+ width: 100%;
+ padding: 0 0 10px 0;
+}
+
+section {
+ display: block;
+ width: 100%;
+ min-width: 40px;
+ min-height: 40px;
+ padding: 0 0 10px 0;
+}
+
+cbutton {
+ display: block;
+ background: #5087c5;
+ color: #fff;
+ padding: 8px 15px;
+ text-align: center;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+
+
+:root {
+ --theme-primary: #fff;
+ --theme-orange: rgb(255, 125, 38);
+ --theme-blue: rgb(58, 74, 181);
+ --theme-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ --std-font: Abel, Roboto, sand-serif;
+}
+
+
+
+.section_1>*:nth-child(1) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+}
+
+.section_1>*:nth-child(2) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 2;
+}
+
+.section_1>*:nth-child(3) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 3;
+}
+
+.block_2 {
+ width: 450px;
+ margin: auto;
+}
+
+.heading_1 {
+ font-size: 28px;
+ font-family: Abel, Roboto, sand-serif;
+ font-weight: 600;
+ text-align: center;
+ color: rgb(58, 74, 181);
+}
+
+.heading_2 {
+ font-size: 14px;
+ text-align: center;
+ font-family: Abel, Roboto, sand-serif;
+ color: rgb(133, 133, 194);
+}
+
+.block_3 {
+ padding: 0px;
+ margin: 0px;
+}
+
+.formInput {
+ padding: 8px 20px;
+ width: 100%;
+ outline: none;
+ font-size: 14px;
+ font-family: Abel, Roboto, sand-serif;
+ color: rgb(133, 133, 194);
+ border-style: solid;
+ border-width: 1px;
+ border-color: rgb(219, 219, 219);
+ border-radius: 2px;
+}
+
+.heading_3 {
+ font-size: 12px;
+ font-family: Abel, Roboto, sand-serif;
+ margin-bottom: 5px;
+ font-weight: 600;
+ color: rgb(107, 105, 156);
+}
+
+.block_4 {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: start;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ width: inherit;
+ padding: 0px;
+ margin: 20px 0px 0px;
+}
+
+.block_5 {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ width: 100%;
+ padding: 0px;
+ margin: 0px;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: start;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.confirmButton {
+ font-size: 16px;
+ color: rgb(255, 255, 255);
+ font-family: Abel, Roboto, sand-serif;
+ text-transform: uppercase;
+ font-weight: 600;
+ width: 100%;
+ padding-right: 0px;
+ padding-left: 0px;
+ margin-top: 30px;
+ border-radius: 2px;
+ background-color: rgb(58, 74, 181);
+}
+
+.heading_4 {
+ color: rgb(255, 255, 255);
+ font-family: Abel, Roboto, sand-serif;
+ font-size: 28px;
+}
+
+.paragraph_1 {
+ margin-top: 10px;
+ color: rgb(242, 242, 247);
+ font-family: Abel, Roboto, sand-serif;
+ font-size: 14px;
+ line-height: 1.4em;
+}
+
+.faq-list-block {
+ border-left: 5px solid #f5b68c;
+ border-right: 5px solid #f5b68c;
+}
+
+.faq-list-block ul li {
+ margin: 0;
+}
+
+.faq-list-block ul li::before {
+ content: "\276F";
+ color: rgb(58, 74, 181);
+ top: 0;
+ background: none;
+ font-size: 0.9em;
+}
+
+.login_form {
+ max-width: 500px;
+ margin: 0 auto;
+}
+
+input[type="submit"] {
+ cursor: pointer;
+}
+
+.pflicht-list {
+ margin-bottom: 3em;
+ background-color: #fff;
+ border-radius: 1em;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ font-size: 1.1em;
+}
+
+.pflicht-list ul {
+ padding: 1em 2em 1em 1em;
+ list-style-type: none;
+ border: 0;
+ margin-bottom: 0;
+}
+
+.pflicht-list ul li {
+ position: relative;
+ margin: 5px 0;
+}
+
+.underline {
+ border-top-left-radius: 1em;
+ border-top-right-radius: 1em;
+ margin-bottom: 1em;
+ color: #fff;
+ background-color: rgb(58, 74, 181);
+ padding-left: 3em;
+}
+
+content {
+ max-width: 1920px;
+ padding: 0 5% 10px 5%;
+ min-height: 67.8vh;
+ margin: 10px auto;
+ display: -ms-grid;
+ display: grid;
+ -webkit-column-gap: 20px;
+ -moz-column-gap: 20px;
+ column-gap: 20px;
+ -ms-grid-columns: 2fr 20px 6fr 20px 2fr;
+ grid-template-columns: 2fr 6fr 2fr;
+ -ms-grid-rows: auto;
+ grid-template-rows: auto;
+}
+
+content>*:nth-child(1) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+}
+
+content>*:nth-child(2) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 3;
+}
+
+content>*:nth-child(3) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 5;
+}
+
+#start_ul {
+ padding: 0 2em 0 1em;
+ margin-bottom: 0;
+}
+
+.rpt_plans_3 {
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: 32% 1.9% 32% 1.9% 32%;
+ grid-template-columns: repeat(3, 32%);
+ grid-gap: 1.9%;
+}
+
+.rpt_plan img {
+ width: 50%;
+ margin: 15px auto;
+ height: auto;
+}
+
+.rpt_title {
+ color: #fff;
+ /*width: calc(100% - 36px);*/
+ font-size: 1.2em;
+ text-align: center;
+ font-weight: bold;
+ line-height: 1.2em;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 14px 18px;
+ background: #4251a3;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ border-top-left-radius: .4em;
+ border-top-right-radius: .4em;
+ margin-bottom: 0;
+}
+
+.rpt_price {
+ padding: 6px 10px;
+ text-align: center;
+ color: #fff;
+ text-shadow: 1px 2px 7px rgba(0, 0, 0, .6);
+ font-size: 5em;
+ font-weight: bold;
+ padding-bottom: .2em;
+ margin-bottom: 0;
+}
+
+.rpt_feature {
+ font-size: 16px;
+ padding: 6px 16px;
+ border-bottom: 1px dotted lightgrey;
+ width: calc(100% - 32px);
+ right: 16px;
+ line-height: 2em;
+ margin: 0;
+ text-align: center;
+ word-wrap: break-word;
+ color: #000;
+}
+
+.rpt_feature:first-of-type {
+ font-size: 1.4em;
+}
+
+.rpt_foot {
+ /*width: calc(100% - 60px);*/
+ display: block;
+ padding: 10px 30px;
+ border-top: whitesmoke solid 2px;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ text-align: center;
+ color: white !important;
+ font-size: 20px;
+ text-decoration: none;
+ font-weight: 300;
+ background: #4251a3;
+ margin-bottom: 0;
+}
+
+.rpt_foot:hover {
+ background: #ff7d26;
+}
+
+.rpt_head {
+ background: #ff7d26;
+ border-top: 2px solid #fff;
+ width: 100%;
+}
+
+.rpt_recurrence {
+ font-size: 1em;
+ font-weight: 300;
+ line-height: 18px;
+ padding: 20px 40px 10px;
+ color: #fff;
+ text-align: center;
+ margin-bottom: 0;
+}
+
+.rpt_currency {
+ position: relative;
+ top: -44px;
+ left: -10px;
+ font-size: 35px;
+ line-height: 0;
+}
+
+.rpt_plan br {
+ height: 0;
+ margin: 0;
+}
+
+.rpt_plan {
+ width: 100%;
+ min-width: 152px;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ border-radius: .4em;
+ background: #f5f5f5;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+#start_ul li::before,
+#start_ul_1 li::before {
+ content: "";
+ left: 0;
+ top: 8px;
+ width: 7px;
+ height: 7px;
+ background-color: #ddd;
+ position: absolute;
+ border-radius: .1em;
+}
+
+.widget_nav ul li {
+ margin: 0;
+ padding: 0;
+}
+
+.widget_nav ul li::hover a {
+ color: #0056b3;
+ text-decoration: underline;
+}
+
+.widget_nav ul li a {
+ text-decoration: none;
+ margin: 0 5px;
+}
+
+.widget_nav ul li::before {
+ display: none;
+}
+
+.toUS {
+ margin-bottom: 0;
+}
+
+.ul_enev li::before {
+ display: none;
+}
+
+/* NOTE: Right Sidebar */
+.infoCard {
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ background: rgba(255, 255, 255, 0.4);
+ border-radius: 1em;
+ padding: 1em;
+ margin-bottom: 1.5em;
+}
+
+.large-button {
+ background: #3a4ab5;
+ color: #fff;
+ padding: .2em 1em .2em 1em;
+ border-radius: .8em;
+ font-size: 1em;
+ font-weight: 600;
+ text-decoration: none;
+ -webkit-box-shadow: 0.1em 0.1em 0.2em #bbb;
+ box-shadow: 0.1em 0.1em 0.2em #bbb;
+ margin-top: 10px;
+ white-space: nowrap;
+}
+
+.large-button:hover {
+ background: #ff7d26;
+ text-decoration: underline;
+}
+
+.infoCard h1,
+.infoCard .heading1 {
+ font-size: 1.2em;
+ font-weight: bold;
+ font-family: Abel, Roboto, sand-serif;
+ color: #3a4ab5;
+}
+
+/* NOTE: */
+ul {
+ margin-left: 1em;
+ list-style: disc;
+ font-weight: 400;
+ line-height: 1.5;
+ color: #212529;
+}
+
+ul li {
+ padding-left: 1.2em;
+ list-style-type: none;
+ position: relative;
+ padding-bottom: 2px;
+ font-size: 1.05em;
+ margin-bottom: 5px !important;
+}
+
+ul li::before {
+ content: '';
+ width: 10px;
+ height: 10px;
+ left: 0;
+ top: 7px;
+ margin-left: 0;
+ background: #ff7d26;
+ position: absolute;
+ border-radius: .1em;
+}
+
+.img-subtitle {
+ color: #777;
+ font-style: italic;
+ font-size: 1em;
+ text-align: center;
+}
+
+h3 {
+ font-weight: normal;
+ font-size: 1.3rem;
+ line-height: 1.4rem;
+ margin: 1em 0 .5em 0;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+h3::before {
+ content: "";
+ width: 10px;
+ height: 10px;
+ border-radius: 4px;
+ background: #ddd;
+ position: absolute;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
+ left: -20px;
+}
+
+footer {
+ background: rgb(255, 125, 38);
+ height: 40px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 30px;
+ width: auto;
+ color: #fff;
+ position: relative;
+ bottom: 0;
+}
+
+#pwtester {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ margin: 10px 0 0 0;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+#pwtester span {
+ display: block;
+ width: 24%;
+ height: 4px;
+ border-radius: 4px;
+ background: #B7B7B7;
+}
+
+.objekt_card {
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
+ -ms-grid-rows: 375px 5px 125px;
+ grid-template-rows: 375px 125px;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ background: #fff;
+ margin: 0 auto;
+ text-decoration: none;
+ color: #000;
+ border-radius: 5px;
+ grid-row-gap: 5px;
+ max-width: 1100px;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ margin-bottom: 30px;
+}
+
+.objekt_card>*:nth-child(1) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+}
+
+.objekt_card>*:nth-child(2) {
+ -ms-grid-row: 1;
+ -ms-grid-column: 2;
+}
+
+.objekt_card>*:nth-child(3) {
+ -ms-grid-row: 3;
+ -ms-grid-column: 1;
+}
+
+.objekt_card>*:nth-child(4) {
+ -ms-grid-row: 3;
+ -ms-grid-column: 2;
+}
+
+body .objekt_card:first-of-type {
+ margin-top: 30px;
+}
+
+.objekt_typetag {
+ position: absolute;
+ left: 12px;
+ top: 12px;
+ color: #fff;
+ font-size: 14px;
+ background: rgb(51, 51, 51);
+ padding: 3px 10px;
+ border-radius: 15px;
+ border: 1px solid rgb(104, 104, 104);
+ z-index: 2;
+ cursor: auto;
+}
+
+.objekt_previewImage {
+ -o-object-fit: contain;
+ object-fit: contain;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.objekt_previewImage img {
+ width: 100%;
+ border-top-left-radius: 5px;
+}
+
+.objekt_description {
+ padding: 20px;
+}
+
+.objekt_description h1 {
+ font-size: 20px;
+ font-weight: 300;
+ margin-bottom: 15px;
+}
+
+.objekt_description p,
+.objekt_makler h2 {
+ font-size: 14px;
+ font-weight: 300;
+ margin-bottom: 10px;
+}
+
+.objekt_makler {
+ margin: 0 20px 20px 20px;
+ padding-left: 20px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-top: 1px solid rgb(223, 223, 223);
+}
+
+.objekt_images {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ border-bottom-left-radius: 5px;
+}
+
+.objekt_images img {
+ margin-left: 5px;
+ width: 33%;
+}
+
+.objekt_images img:nth-child(1) {
+ border-bottom-left-radius: 5px;
+ margin-left: 0;
+}
+
+.objekt_makler h3 {
+ color: rgb(168, 168, 168);
+ font-size: 12px;
+ font-weight: 400;
+ margin-bottom: 5px;
+}
+
+/* NOTE MAKLER SYSTEM */
+.card_container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.makler_card {
+ background: #fff;
+ border-radius: 5px;
+ width: 600px;
+ height: 300px;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+}
+
+.justify_left {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+/*
+* Real estate search.
+*/
+.expose {
+ margin: 40px 0;
+}
+
+.expose-container {
+ max-width: 1000px;
+ margin-top: 50px;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: 12px;
+}
+
+.expose * {
+ font-family: sans-serif;
+}
+
+.expose h1 {
+ font-size: 42px;
+ text-align: center;
+ font-weight: 600;
+ font-family: Abel, sans-serif;
+}
+
+.center-small {
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* CATEGORY: Expose */
+.content_block {
+ padding: 20px;
+}
+
+.inner {
+ max-width: 1200px;
+ width: 100%;
+ margin: 20px auto;
+ height: 100%;
+ display: -ms-grid;
+ display: grid;
+ grid-template-areas: "main detail""main info";
+ -ms-grid-columns: 3.8fr 20px 1.2fr;
+ grid-template-columns: 3.8fr 1.2fr;
+ -ms-grid-rows: 250px 20px auto;
+ grid-template-rows: 250px auto;
+ grid-gap: 20px;
+}
+
+.detail_sticky {
+ -ms-grid-row: 1;
+ -ms-grid-column: 3;
+ width: calc(100% - 40px);
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ grid-area: detail;
+}
+
+.text_container {
+ -ms-grid-row: 1;
+ -ms-grid-row-span: 3;
+ -ms-grid-column: 1;
+ grid-area: main;
+ background: #fff;
+ border-radius: 8px;
+}
+
+.info_container {
+ -ms-grid-row: 3;
+ -ms-grid-column: 3;
+ grid-area: info;
+ background: #fff;
+ border-radius: 8px;
+}
+
+.detail_sticky,
+.info_container,
+.text_container {
+ -webkit-box-shadow: 0 0 4px 0 rgb(210, 210, 210);
+ box-shadow: 0 0 4px 0 rgb(210, 210, 210);
+}
+
+.image_slideshow {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-right: 10px;
+ gap: 10px;
+ overflow: hidden;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ --image-width: 1200px;
+ --image-margin: 6px;
+ --image-height: 500px;
+ --focused-height: 530px;
+ --image-shadow: 1px 1px 2px 1px rgba(24, 24, 24, 0.178);
+ position: relative;
+}
+
+.image_slideshow img {
+ width: 1200px;
+ height: 500px;
+ -o-object-fit: cover;
+ object-fit: cover;
+ border-radius: 8px;
+ -webkit-transition: all .4s ease;
+ -o-transition: all .4s ease;
+ transition: all .4s ease;
+ -webkit-box-shadow: 1px 1px 2px 1px rgba(24, 24, 24, 0.178);
+ box-shadow: 1px 1px 2px 1px rgba(24, 24, 24, 0.178);
+}
+
+.image_slideshow .control_wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ position: absolute;
+ width: calc(1200px + 60px);
+ height: 500px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-transition: all 0.4s ease;
+ -o-transition: all 0.4s ease;
+ transition: all 0.4s ease;
+}
+
+.image_slideshow .img_wrapper {
+ position: relative;
+ width: 1200px;
+ height: 530px;
+ /*margin: 0 6px;*/
+ -webkit-transition: all 0.4s ease;
+ -o-transition: all 0.4s ease;
+ transition: all 0.4s ease;
+}
+
+.image_slideshow .image_focused {
+ height: 530px;
+}
+
+.image_slideshow .image_button {
+ background: #fff;
+ padding: 20px;
+ font-size: 22px;
+ border-radius: 50%;
+ height: 16px;
+ width: 16px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ color: #000;
+ -webkit-transition: all .3s ease;
+ -o-transition: all .3s ease;
+ transition: all .3s ease;
+ cursor: pointer;
+ -webkit-box-shadow: 1px 1px 2px 1px rgba(24, 24, 24, 0.178);
+ box-shadow: 1px 1px 2px 1px rgba(24, 24, 24, 0.178);
+}
+
+.image_slideshow .image_button:hover {
+ color: #fff;
+ background: #202427;
+}
+
+/*
+ Profile page styling
+*/
+.profile_container {
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: 2fr 20px 1fr;
+ grid-template-columns: 2fr 1fr;
+ grid-gap: 20px;
+ -ms-grid-rows: auto;
+ grid-template-rows: auto;
+ grid-template-areas: "profile_info menu_buttons"". menu_buttons";
+}
+
+.profile_container>div {
+ border-radius: 8px;
+ width: 100%;
+ min-height: 100px;
+ background: #ffffff;
+}
+
+.span-2 {
+ -ms-grid-row: 1;
+ -ms-grid-row-span: 2;
+ -ms-grid-column: 1;
+ grid-area: 1/1/span 2 / 1;
+}
+
+.slim {
+ width: 180px !important;
+}
+
+.flex-row {
+ display: flex;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.slim-image-editor {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.not_uploaded {
+ position: absolute;
+ width: auto;
+ height: auto;
+ padding: 1px 8px;
+ border-radius: 4px;
+ background: red;
+ top: 5px;
+ right: 5px;
+ font-size: 14px;
+ color: #fff;
+}
+
+.slim-popover {
+ position: fixed !important;
+ left: 0;
+ width: 100%;
+ top: 0 !important;
+ height: 100% !important;
+}
+
+.bild-screen {
+ width: auto !important;
+}
+
+.image_container {
+ display: contents;
+ grid-gap: 10px;
+ width: min-content !important;
+ max-width: 100% !important;
+}
+
+.image_upload_placeholder {
+ background: #fcf6e5;
+ border: 1px solid #ffcc03;
+ padding: 4px 12px;
+ color: #000;
+ font-size: 16px;
+ font-weight: 500;
+ border-radius: 8px;
+ transition: all 0.2s ease;
+ cursor: pointer;
+ user-select: none;
+}
+
+.image_upload_placeholder:hover {
+ background: #fff2bc;
+}
+
+/* Don't show actual upload box, that's what placeholders are for */
+.image_upload {
+ display: none;
+}
+
+
+.login-container {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+@media only screen and (max-width: 1650px) {
+ .container-ausweis > .flex-row:nth-child(2) {
+ flex-direction: column !important;
+ }
+}
\ No newline at end of file
diff --git a/src/style/768.scss b/src/style/768.scss
new file mode 100644
index 00000000..31a2b095
--- /dev/null
+++ b/src/style/768.scss
@@ -0,0 +1,66 @@
+@media (min-width: 576px) and (max-width: 767.98px) {
+
+ /*-----------------------------------------------------------------*/
+ /*- -*/
+ /*- General Styles & Structure -*/
+ /*- (min-width: 576px) and (max-width: 767.98px) -*/
+ /*-----------------------------------------------------------------*/
+ .content {
+ max-width: 1920px;
+ display: grid;
+ column-gap: 0px;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ }
+
+ .mainContent {
+ display: block;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ background-color: rgb(255, 255, 255);
+ margin-top: 0px;
+ padding: 20px 1.5%;
+ }
+
+ .stretch-2 {
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 1;
+ grid-area: 1/1/1/4 !important;
+ width: calc(100% - 3%);
+ }
+
+ .only-form-mainContent {
+ padding: 20px 1% !important;
+ width: 100%;
+ }
+
+ .left-sidebar {
+ display: block;
+ max-width: 940px;
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ grid-area: 1/1/1/1;
+ padding-top: 0px;
+ margin-top: 0px;
+ width: 100%;
+ }
+
+ .right-sidebar {
+ display: block;
+ max-width: 940px;
+ -ms-grid-row: 1;
+ -ms-grid-column: 3;
+ grid-area: 1/3/1/3;
+ padding-top: 0px;
+ margin-top: 0px;
+ width: 100%;
+ }
+
+ .login-container {
+ grid-template-columns: 1fr !important;
+ }
+
+}
+
+/* END QUERY */
\ No newline at end of file
diff --git a/src/style/992.scss b/src/style/992.scss
new file mode 100644
index 00000000..446ec840
--- /dev/null
+++ b/src/style/992.scss
@@ -0,0 +1,480 @@
+@media (min-width: 992px) and (max-width: 10000px) {
+ /*-----------------------------------------------------------------*/
+ /*- -*/
+ /*- General Styles & Structure -*/
+ /*- (min-width: 992px) and (max-width: 10000px) -*/
+ /*-----------------------------------------------------------------*/
+
+.hide-on-mobile {
+ display: block !important;
+}
+
+.content {
+ max-width: 1920px;
+ width: 100%;
+ padding: 0 2% 10px 2%;
+ margin: 20px auto;
+ display: grid;
+ column-gap: 20px;
+ grid-template-columns: 2fr 6fr 2fr;
+ grid-template-rows: auto;
+ }
+ .mainContent {
+ display: block;
+ position: relative;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ background-color: rgb(255, 255, 255);
+ margin-top: 0px;
+ padding: 20px 5%;
+
+
+ }
+ .stretch-2 {
+ -ms-grid-row: 1;
+ -ms-grid-column: 2;
+ -ms-grid-column-span: 2;
+ grid-area: 1/2/1/2;
+ width: calc(100% - 4%);
+
+ }
+ .only-form-mainContent {
+ padding: 20px 1% !important;
+ width: calc(100% - 0%) !important;
+ grid-area: 1/2/1/4;
+
+
+ }
+
+ .only-login-mainContent {
+ padding: 20px 1% !important;
+ width: calc(100% - 0%) !important;
+ grid-area: 1/2/1/4;
+
+
+ }
+
+ .left-sidebar {
+ display: block;
+ max-width: 940px;
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ grid-area: 1/1/1/1;
+ padding-top: 0px;
+ margin-top: 0px;
+ width: 100%;
+ }
+ .right-sidebar {
+ display: block;
+ max-width: 940px;
+ -ms-grid-row: 1;
+ -ms-grid-column: 3;
+ grid-area: 1/3/1/3;
+ padding-top: 0px;
+ margin-top: 0px;
+ width: 100%;
+ }
+ .mainContent h1 {
+ margin-top:0;
+ font-size: 2.5rem;
+ font-weight: 500;
+ line-height: 1.2;
+ width: 100%;
+ text-align: left;
+ }
+ .mainContent h2 {
+ font-weight: normal;
+ font-size: 1.6rem;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 1em 0em !important;
+ }
+ .mainContent h2::before {
+ content: "";
+ width: 12px;
+ height: 12px;
+ border-radius: 4px;
+ background: #f5b691;
+ position: absolute;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
+ left: -20px;
+ top: 10px;
+ }
+ .mainContent h2 {
+ left: 20px;
+ padding-right: 20px;
+ }
+ .mainContent h3 {
+ left: 20px;
+ }
+ .mainContent a {
+ color: #3A4AB5;
+ text-decoration: none;
+ display: inline;
+ }
+ .mainContent a:hover {
+ text-decoration: underline;
+ }
+ .mainContent p {
+ line-height: 1.7em;
+ padding-right: 1em;
+ font-size: 1.1em;
+ text-transform: none;
+ }
+
+
+ /*-----------------------------------------------------------------*/
+ /*- -*/
+ /*- Branding: -*/
+ /*- (min-width: 992px) and (max-width: 10000px) -*/
+ /*-----------------------------------------------------------------*/
+ .headmargin {
+ margin-bottom: 110px;
+ display: block;
+ width: 100%;
+ min-height: 100px;
+ padding: 0 0 10px 0;
+ }
+ .headerBackgroundImage {
+ position: absolute;
+ top: 0;
+ height: 210px;
+ width: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ }
+ .branding {
+ display: block;
+ margin-right: auto;
+ margin-left: auto;
+ min-height: 40px;
+ max-width: 96%;
+ position: relative;
+ padding: 30px 0px;
+ height: auto;
+ }
+ .header-logo {
+ position: absolute;
+ top: 30px;
+ right: 0px;
+ left: auto;
+ width: 500px;
+ cursor: pointer;
+ }
+ .MajorHeading {
+ color: rgb(58, 74, 181);
+ font-weight: 500;
+ font-size: 26px;
+ position: absolute;
+ top: 30px;
+ right: 0px;
+ line-height: 1.3em;
+ }
+ .MajorHeading.smaller {
+ color: rgb(255, 125, 38);
+ margin-top: 35px;
+ font-size: 20px;
+ font-weight: 600;
+ }
+ .nav-head {
+ background-color: rgb(255, 125, 38);
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-right: 1.2%;
+
+ }
+ .headerButton {
+ width: auto;
+ font-size: 18px;
+ font-weight: 500;
+ color: rgb(255, 255, 255);
+ background-color: rgb(255, 125, 38);
+ height: 40px;
+ max-height: 100%;
+ padding-bottom: 0px;
+ padding-top: 0px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ }
+
+header a {
+ display: block;
+ padding: 8px 15px;
+ text-align: center;
+ width: -webkit-min-content;
+ width: -moz-min-content;
+ width: min-content;
+ text-decoration: none;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+ .headerButton:hover {
+ color: #ffffff;
+ text-decoration: none;
+ background-color: rgb(58, 74, 181);
+ }
+
+ .headerButton.active {
+ background-color: rgb(58, 74, 181);
+ }
+
+ .hamburger_menu {
+ display: none !important;
+ }
+
+ nav{
+ margin-top:0px;
+ }
+
+
+ .nav-card {
+ width: 100%;
+ height: auto;
+ position: relative;
+ background-color: #fff;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ margin-bottom: 1.5em;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ z-index: 1;
+ }
+
+ .card-menu-option {
+ padding: 10px 20px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ text-decoration: none !important;
+ width: auto;
+ cursor: pointer;
+ border-bottom: 1px solid #fff;
+ font-weight: 500;
+ font-size: 1.1em;
+ color: #000;
+ background-color:#fff;
+ border-left:0px solid #fff;
+ border-right:0px solid #fff;
+ }
+
+ .nav-card .card-menu-option:first-child{
+ border-top:0px solid #fff;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ }
+
+ .nav-card .card-menu-option:last-child{
+ border-bottom:0px solid #fff;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ }
+
+
+ .nav-card .card-menu-option a{
+ text-decoration: none;
+ color: #000;
+ }
+
+ .nav-card .card-menu-option:hover > a{
+ color: #fff;
+ }
+
+ .nav-card .card-menu-option:hover{
+ background-color:#ff7d26;
+ color: #fff;
+ text-decoration: none;
+ }
+
+ .active{
+ background-color:none;
+ opacity:1;
+ transition: none;
+ }
+
+
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ background-color:#EFEFEF;
+ left: 100%;
+ top: -1px;
+ -webkit-box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+ z-index:1;
+ }
+
+ .nav-hr {
+ display: block;
+ border: 1px solid #ff7d26;
+ margin: 0em 0;
+ height: 0px;
+ }
+
+ .dropdown-content>.card-menu-option {
+ display: block;
+ width: 22em;
+ background-color:#EFEFEF !important;
+ color: #000 !important;
+ font-size: 17px;
+ font-weight: normal;
+ border-left:0px solid #fff;
+ border-right:1px solid #fff;
+ border-bottom: 1px solid #fff;
+ }
+
+ .dropdown-content>.card-menu-option:first-child {
+ border-top: 1px solid #fff;
+ }
+
+ .dropdown-content>.card-menu-option:last-child {
+ border-bottom: 1px solid #fff;
+ }
+
+ .dropdown-content>.card-menu-option:hover {
+ background-color:#444f94 !important;
+ color:#fff !important;
+ }
+
+ .active{
+ background-color:#FFF !important;
+ color:#000 !important;
+ opacity:1;
+ }
+
+ .active:hover{
+ background-color:#ff7d26 !important;
+ color:#FFF !important;
+ }
+
+ .droparrow1::after {
+ transform:translate(0, -50%) rotate(0deg) !important;
+ transition: none !important;
+ }
+
+
+ .dropdown::after {
+ content: "\276F";
+ position: absolute;
+ top: 20px;
+ right: 10px;
+ font-size: 14px;
+ font-weight: 300;
+ transform:translate(0, -50%) rotate(0deg);
+ transition: transform 0.25s;
+ }
+
+
+ footer a {
+ font-size:18px;
+ line-height: 40px;
+ display: inline;
+ color: #fff;
+ text-decoration: none;
+ margin:0 2em;
+}
+
+ .grw-net-widget{width:100% !important}
+
+
+
+ /*-----------------------------------------------------------------*/
+ /*- -*/
+
+
+
+
+
+
+ } /* END QUERY */
+
+/**
+* SECTION: User Interface - Ausweis style
+*/
+
+.container-ausweis {
+ display: flex;
+ flex-direction: column;
+ background: #fff;
+ box-shadow: 0 0 16px 2px rgba(0,0,0,0.1);
+ padding: 20px;
+ border-radius: 8px;
+ width: 100%;
+ gap: 10px;
+}
+
+.container-ausweis a {
+ cursor: pointer;
+ color:rgb(58, 74, 181) !important;
+ text-decoration: none;
+}
+
+.container-ausweis h4 {
+ font-size: 24px;
+ font-weight: normal;
+}
+
+.container-ausweis h5 {
+ font-size: 18px;
+}
+
+.login-container {
+ grid-area: 4/1/4/3;
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(2,1fr);
+ grid-template-rows: auto;
+}
+
+.energieausweis-img {
+ width: 100%;
+ height: min-content;
+ max-width: 80px;
+}
+
+/**
+* SECTION: Popups
+*/
+
+
+.popup-bottom {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ min-height: 50px;
+ width: 100%;
+ background-color: rgb(255, 125, 38);
+ color: #fff;
+ text-align: center;
+ padding: 10px 20px;
+ z-index: 10;
+ font-size: 20px;
+ font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/style/global.scss b/src/style/global.scss
new file mode 100644
index 00000000..ea0205dd
--- /dev/null
+++ b/src/style/global.scss
@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+@import './left_navigation';
+@import './576';
+@import './768';
+@import './992';
+
+@import "./smaller-768";
\ No newline at end of file
diff --git a/src/style/left_navigation.scss b/src/style/left_navigation.scss
new file mode 100644
index 00000000..5a357722
--- /dev/null
+++ b/src/style/left_navigation.scss
@@ -0,0 +1,152 @@
+@media (min-width: 0px) and (max-width: 575.98px) {
+ .fixedHead {
+ left: 0px;
+ position: fixed;
+ top: 0px;
+ width: 100%;
+ z-index: 10;
+ }
+ .hamburger_menu {
+ align-items: center;
+ display: block;
+ display: -ms-flexbox;
+ display: -webkit-box;
+ justify-content: center;
+ ms-flex-align: center;
+ ms-flex-pack: center;
+ webkit-box-align: center;
+ webkit-box-pack: center;
+ }
+ .hamburger_menu img {
+ height: 20px;
+ width: 20px;
+ }
+ .nav-card {
+ background-color: #444f94;
+ display: flex;
+ display: -ms-flexbox;
+ display: -webkit-box;
+ flex-direction: column;
+ ms-flex-direction: column;
+ opacity: 0;
+ transition: opacity 0.75s;
+ webkit-box-direction: normal;
+ webkit-box-orient: vertical;
+ z-index: 5;
+ overflow: hidden;
+ }
+ .visible {
+ align-content: stretch;
+ align-items: stretch;
+ border-top: 1px solid #fff;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ margin-left: 0%;
+ min-height: 85%;
+ opacity: 1;
+ padding: 5% 3% 15%;
+ position: absolute;
+ width: 100%;
+ top:149px;
+ }
+
+ .mob-align {
+ width: 95% !important;
+ margin: 0 auto;
+ }
+
+ .nav-head-blue {
+ background-color: #444f94 !important;
+ }
+ .menuIN {
+ display: none !important;
+ }
+ .dropdown {
+ position: relative;
+ }
+ .card-menu-option.dropdown:not(.active):hover .dropdown-content {
+ display: none !important;
+ }
+ .card-menu-option {
+ background-color: #ff7d26;
+ border-bottom: 1px solid #fff;
+ border-left: 1px solid #fff;
+ border-right: 1px solid #fff;
+ color: #fff;
+ cursor: pointer;
+ font-size: 1.1em;
+ font-weight: 500;
+ moz-user-select: none;
+ ms-user-select: none;
+ padding: 10px 20px;
+ text-decoration: none !important;
+ user-select: none;
+ webkit-user-select: none;
+ width: auto;
+ }
+ .nav-card .card-menu-option:first-child {
+ border-top: 1px solid #fff;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ }
+ .nav-card .card-menu-option:last-child {
+ border-bottom: 1px solid #fff;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ }
+ .nav-card .card-menu-option a {
+ color: #fff;
+ text-decoration: none;
+ }
+ .nav-card .card-menu-option:hover > a {
+ color: #fff;
+ }
+ .nav-card .card-menu-option:hover {
+ background-color: #444f94;
+ color: #fff;
+ text-decoration: none;
+ }
+ .active {
+ background-color: #444f94;
+ opacity: 1;
+ transition: opacity 0.75s;
+ }
+ .dropdown-content {
+ border: none !important;
+ border-radius: 8px;
+ box-shadow: none !important;
+ display: none;
+ margin: 10px 0;
+ position: relative !important;
+ webkit-box-shadow: none !important;
+ }
+ .dropdown-content:hover {
+ display: none;
+ }
+ .dropdown-content hr {
+ display: none;
+ }
+ .dropdown-content > .card-menu-option {
+ background-color: #dae6f7 !important;
+ border-bottom: 1px solid #fff;
+ color: #303030 !important;
+ display: block;
+ font-size: 17px;
+ font-weight: normal;
+ }
+ .droparrow1::after {
+ transform: translate(0, -50%) rotate(90deg) !important;
+ transition: transform 0.25s;
+ }
+ .dropdown::after {
+ content: "\276F";
+ font-size: 14px;
+ font-weight: 300;
+ position: absolute;
+ right: 10px;
+ top: 20px;
+ transform: translate(0, -50%) rotate(0deg);
+ transition: transform 0.25s;
+ }
+}
diff --git a/src/style/smaller-768.scss b/src/style/smaller-768.scss
new file mode 100644
index 00000000..5c437a72
--- /dev/null
+++ b/src/style/smaller-768.scss
@@ -0,0 +1,9 @@
+/*=============================================
+= Target Everything below 768px =
+=============================================*/
+
+@media only screen and (max-width: 768px) {
+ .filter-bar {
+ flex-wrap: wrap;
+ }
+}
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 00000000..79f059b7
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,6 @@
+import { vitePreprocess } from "@astrojs/svelte";
+import preprocess from "svelte-preprocess";
+
+export default {
+ preprocess: [vitePreprocess(), preprocess()],
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 00000000..256139e3
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+ theme: {
+ extend: {
+ colors: {
+ primary: "rgb(255, 125, 38)",
+ secondary: "rgb(68, 79, 148)",
+ "gray-primary": "rgb(146, 151, 153)",
+ bg: "white",
+ "status-error": "red",
+ "status-success": "green",
+ },
+ },
+ },
+ darkMode: "class",
+ plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..763d5a76
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ // Enable top-level await, and other modern ESM features
+ "target": "ESNext",
+ "module": "ESNext",
+ // Enable node-style module resolution, for things like npm package imports
+ "moduleResolution": "node",
+ // Enable JSON imports
+ "resolveJsonModule": true,
+ // Enable stricter transpilation for better output
+ "isolatedModules": true,
+ // Astro directly run TypeScript code, no transpilation needed
+ "noEmit": true,
+ // Report an error when importing a file using a casing different from the casing on disk
+ "forceConsistentCasingInFileNames": true,
+ // Properly support importing CJS modules in ESM
+ "esModuleInterop": true,
+ // Skip typechecking libraries and .d.ts files
+ "skipLibCheck": true,
+ // Enable strict mode
+ "strict": true,
+ // Error when a value import is only used as a type
+ "importsNotUsedAsValues": "error"
+ }
+}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 00000000..b01a2638
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,8 @@
+///
+import { getViteConfig } from "astro/config";
+
+export default getViteConfig({
+ test: {
+ globals: true,
+ },
+});