Initial Commit

.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

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"
+});

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"
+	}
+}

public/images/slidejs/arrow.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg id="Layer_1" style="enable-background:new 0 0 64 64;" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#134563;}
+</style><g><g id="Icon-Chevron-Left" transform="translate(237.000000, 335.000000)"><polyline class="st0" id="Fill-35" points="-218.7,-308.6 -216.7,-310.6 -205,-298.8 -193.3,-310.6 -191.3,-308.6 -205,-294.9      -218.7,-308.6    "/></g></g></svg>

src/components/Footer.astro

@@ -0,0 +1,8 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<div class="flex flex-row justify-between px-4 items-center">
+	<a href="/impressum.php">Impressum und Datenschutz</a>
+	<a class="" href="/">© {currentYear} IB Cornelsen Hamburg.</a>
+</div>

src/components/Header.astro

@@ -0,0 +1,36 @@
+---
+---
+
+<header class="header">
+	<div class="headmargin">
+		<img
+			src="/images/header/header-bg.jpg"
+			class="headerBackgroundImage"
+			alt="Hintergrund - Rollen Architektenpapier"
+		/>
+		<div class="branding">
+			<img
+				src="/images/header/logo-big.png"
+				class="header-logo"
+				alt="IBCornelsen - Logo"
+				onclick="window.location.href = '/'"
+			/>
+			<h2 class="MajorHeading">Energieausweis online erstellen</h2>
+			<h2 class="MajorHeading smaller">Energieausweise nach aktueller GEG</h2>
+		</div>
+	</div>
+
+	<div class="nav-head">
+		<a
+			class="headerButton"
+			href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+			>Energieausweis&nbsp;erstellen</a
+		>
+		<a class="headerButton" href="/energieausweis-kontakt.php">Kontakt</a>
+		<a class="headerButton" href="/agb.php">AGB</a>
+		<a class="headerButton" href="/user/energieausweis-login">Login</a>
+		<a class="hamburger_menu"
+			><img src="/images/hamburger.png" alt="hamburger" /></a
+		>
+	</div>
+</header>

src/components/SidebarLeft.astro

@@ -0,0 +1,91 @@
+<div class="left-sidebar">
+	<nav>
+    <div class="nav-card">
+        <div class="card-menu-option dropdown">
+            <a href="/energieausweis-erstellen.php">Energieausweis erstellen</a>
+            <div class="dropdown-content">
+                <a href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php" class="card-menu-option">Verbrauchsausweis erstellen</a>
+				<a href="/energieausweis-erstellen/bedarfsausweis-erstellen.php" class="card-menu-option">Bedarfsausweis erstellen</a>
+				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php" class="card-menu-option">Verbrauchsausweis Gewerbe erstellen</a>
+				<a href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen.php" class="card-menu-option">Bedarfsausweis Gewerbe anfragen</a>
+            </div>
+        </div>
+        <a class="card-menu-option" href="energieausweis-welcher-energieausweis.php">Welcher Energieausweis ?</a>
+        <div class="card-menu-option dropdown">
+            <a href="/verbrauchsausweis/">Verbrauchsausweis</a>
+            <div class="dropdown-content">
+                <a href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude.php" class="card-menu-option">Verbrauchsausweis Wohngebäude</a>
+                <a href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php" class="card-menu-option">Verbrauchsausweis online erstellen</a>
+                <a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis.php" class="card-menu-option">Häufige Fragen zum Verbrauchsausweis</a>
+                <a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis.php" class="card-menu-option">Statistiken zum Verbrauchsausweis Wohngebäude</a>
+                <hr class="nav-hr">
+                <a href="/verbrauchsausweis/verbrauchsausweis-gewerbe.php" class="card-menu-option">Verbrauchsausweis Gewerbe</a>
+                <a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php" class="card-menu-option">Verbrauchsausweis Gewerbe online erstellen</a>
+                <a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe.php" class="card-menu-option">Häufige Fragen zum Verbrauchsausweis Gewerbe</a>
+                <a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe.php" class="card-menu-option">Statistiken zum Verbrauchsausweis Gewerbe</a>
+            </div>
+        </div>
+        <div class="card-menu-option dropdown">
+            <a href="/bedarfsausweis/">Bedarfsausweis</a>
+            <div class="dropdown-content">
+                <a href="/bedarfsausweis/bedarfsausweis-wohngebaeude.php" class="card-menu-option">Bedarfsausweis Wohngebäude</a>
+                <a href="/energieausweis-erstellen/bedarfsausweis-erstellen.php" class="card-menu-option">Bedarfsausweis online erstellen</a>
+                <a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis.php" class="card-menu-option">Häufige Fragen zum Bedarfsausweis</a>
+                <a href="/bedarfsausweis/statistiken-zum-bedarfsausweis.php" class="card-menu-option">Statistiken zum Bedarfsausweis Wohngebäude</a>
+                <hr class="nav-hr">
+                <a href="/bedarfsausweis/bedarfsausweis-gewerbe.php" class="card-menu-option">Bedarfsausweis Gewerbe</a>
+                <a href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen.php" class="card-menu-option">Bedarfsausweis Gewerbe anfragen</a>
+                <a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe.php" class="card-menu-option">Häufige Fragen zum Bedarfsausweis Gewerbe</a>
+            </div>
+        </div>
+        <div class="card-menu-option dropdown">
+            <a href="/">Energieausweis</a>
+            <div class="dropdown-content">
+                <a href="/energieausweis-pflicht.php" class="card-menu-option">Energieausweis Pflicht</a>
+                <a href="/energieausweis-kosten.php" class="card-menu-option">Energieausweis Kosten</a>
+                <a href="/energieausweis-haus.php" class="card-menu-option">Energieausweis Haus</a>
+            </div>
+        </div>
+        <a class="card-menu-option" href="/energieausweis-enev-geg.php">EnEV Zusammenfassung - Archiv</a>
+        <a class="card-menu-option" href="/energieausweis-aussteller.php">Energieausweis Aussteller</a>
+        <a class="card-menu-option" href="/energieausweis-kundenbewertungen.php">Kundenbewertungen</a>
+    </div>
+</nav>		
+		
+		
+		
+    <div class="infoCard">
+        <div class="flex-column align-center">
+            <img src="/images/right-sidebar/ing-niedersachsen.png" alt="Mitglied Ingenieurkammer Niedersachen"
+                style="height: 150px;margin-bottom: 25px; width: auto;">
+            <img src="/images/right-sidebar/mitglied-haendlerbund.png" alt="Mitglied im Händlerbund" style="width:auto;
+">
+        </div>
+    </div>
+    <div class="infoCard">
+        <div class="heading1">Was wird der Energieausweis kosten?</div>
+        <hr style="margin-bottom:15px;">
+        <ul>
+            <li>Verbrauchsausweis Wohngebäude<br>45€ inkl. MwSt.<hr></li>
+            <li>Bedarfsausweis Wohngebäude<br>75€ inkl. MwSt.<hr></li>
+            <li>Verbrauchsausweis Gewerbe<br>65€ inkl. MwSt.<hr></li>
+            <li>Bedarfsausweis Gewerbe<br>ab 300€ inkl. MwSt.<hr></li>
+            <li>EnEV-Nachweis Wohngebäude<br>ab 400€ inkl. MwSt.<hr></li>
+            <li>EnEV-Nachweis Gewerbe<br>ab 450€ inkl. MwSt.</li>
+        </ul>
+        <hr>
+    </div>
+    <div class="infoCard">
+        <div class="heading1">Zahlungsoptionen</div>
+        <hr style="margin-bottom:15px;">
+        <p style="text-align:center; font-size: 1.1em;">Ihre online Zahlungen werden sicher über eine SSL
+            Verschlüsselung abgewickelt.</p>
+        <hr style="margin-bottom:15px;">
+        <div class="align-center">
+            <img src="/images/left-sidebar/payment.png" alt="Bezahloptionen - Paypal, Visa, Kreditkarte...">
+        </div>
+    </div>
+
+
+
+</div>

src/components/SidebarRight.astro

@@ -0,0 +1,126 @@
+<div class="right-sidebar">
+	<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
+		</h2>
+		<hr style="margin-bottom:15px;" />
+		<div class="flex-row justify-between">
+			<div class="flex-column align-left">
+				<p>Telefonische Beratung unter</p>
+				<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
+					<a href="tel:+4940209339850">040 / 209 339 850</a>
+				</h2>
+			</div>
+			<img
+				src="images/right-sidebar/telefon-1.png"
+				style="width:70px; height: 73px;"
+				alt="Telefon - Rufen sie uns an."
+			/>
+		</div>
+	</div>
+
+	<div class="infoCard">
+		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
+			Bitte bewerten Sie uns!
+		</h2>
+		<hr style="margin-bottom:15px;" />
+		<div
+			class="review-widget_net"
+			data-uuid="d908c994-f1f2-4ab6-bad1-b2d3538086e7"
+			data-template="7"
+			data-filter=""
+			data-lang="de"
+			data-theme="light"
+		>
+			<a href="https://www.review-widget.net/" target="_blank" rel="noopener"
+				><img
+					src="https://grwapi.net/assets/spinner/spin.svg"
+					title="Google Review Widget"
+					alt="Review Widget"
+				/></a>
+		</div><script async src="https://grwapi.net/widget.min.js"></script>
+		<hr />
+	</div>
+
+	<div class="infoCard">
+		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
+			Verbrauchsausweis für Wohngebäude
+		</h2>
+		<hr style="margin-bottom:15px;" />
+		<div class="flex-column align-center">
+			<img
+				src="images/right-sidebar/wohnhaus-1.png"
+				alt="Verbrauchsausweis ab 45€ für Wohngebäude."
+			/>
+			<a
+				href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+				class="large-button">Jetzt Verbrauchsausweis erstellen</a
+			>
+		</div>
+	</div>
+
+	<div class="infoCard">
+		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
+			Welche Häuser benötigen einen Energieausweis?
+		</h2>
+		<hr style="margin-bottom:15px;" />
+		<ul>
+			<li>Wohngebäude &gt; 50m² mit dauerhaftem Aufenthalt<hr /></li>
+			<li>Nichtwohngebäude &gt; 50m² mit dauerhaftem Aufenthalt<hr /></li>
+			<li>Beheizte Gebäude &gt; 50m²<hr /></li>
+			<li>Neubauten<hr /></li>
+			<li>Anbauten &gt; 50 m²<hr /></li>
+			<li>Sanierung mit Austausch der Heizungsanlage</li>
+		</ul>
+		<hr />
+	</div>
+	<div class="infoCard">
+		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
+			Bedarfsausweis für Wohngebäude
+		</h2>
+		<hr style="margin-bottom:15px;" />
+		<div class="flex-column align-center">
+			<img
+				src="images/right-sidebar/wohnhaus-ba-1.png"
+				alt="Bedarfsausweis ab 75€ für Wohngebäude"
+			/>
+			<a
+				href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+				class="large-button">Jetzt Bedarfsausweis erstellen</a
+			>
+		</div>
+	</div>
+	<div class="infoCard">
+		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
+			Welcher Energieausweis ist der richtige?
+		</h2>
+		<hr style="margin-bottom:15px;" />
+		<ul>
+			<li>
+				Verbrauchsausweis bei Vermietung, Verkauf und Aushang (Baujahr nach 1977
+				bzw. saniert).<hr />
+			</li>
+			<li>
+				Bedarfsausweis bei Neubau, Sanierung, Erweiterung und
+				Fördermittelantrag.
+			</li>
+		</ul>
+		<hr />
+	</div>
+	<div class="infoCard">
+		<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
+			Verbrauchsausweis für Gewerbe
+		</h2>
+		<hr style="margin-bottom:15px;" />
+		<div class="flex-column align-center">
+			<img
+				src="images/right-sidebar/gewerbe-1.png"
+				alt="Verbrauchsausweis Gewerbe für 65€"
+			/>
+			<a
+				href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php"
+				class="large-button">Jetzt Verbrauchsausweis erstellen</a
+			>
+		</div>
+	</div>
+</div>

src/components/Widget.astro

@@ -0,0 +1,75 @@
+<div id="wrapper" class="tingle-content-wrapper" style="border-radius:1em;border:4px solid #FF7D26;padding:15px;margin-top: 1em;background-color:#f9f8f7;">
+	<link rel="stylesheet" href="https://widget.ib-cornelsen.de/widgetvorlage/welcher-energieausweis/css/welcher-energieausweis-widget.css">
+	<link rel="stylesheet" href="https://widget.ib-cornelsen.de/widgetvorlage/welcher-energieausweis/css/tingle.css">
+	<div id="OEA_widget" style="padding:0px;">
+		<div id="OEA_input">
+			<div class="row" style="padding: 0 15px 15px 0;">
+				<div class="col-lg-6"> <input type="hidden" id="recode" name="recode" value="widgetvorlage">
+					<div id="OEA_typ">Gebäudetyp</div> <select class="form-control col-lg-12" id="changeTyp">
+						<option value="" selected="" disabled="">bitte auswählen</option>
+						<option value="Einfamilienhaus">Einfamilienhaus</option>
+						<option value="Zweifamilienhaus">Zweifamilienhaus</option>
+						<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+						<option value="Gewerbegebäude">Gewerbegebäude</option>
+						<option value="Mischgebäude">Mischgebäude</option>
+					</select>
+				</div>
+				<div class="col-lg-6 last">
+					<div id="OEA_anlass">Anlass</div> <select class="form-control col-lg-12" id="changeAnlass">
+						<option value="" selected="" disabled="">bitte auswählen</option>
+						<option value="Vermietung">Vermietung</option>
+						<option value="Verkauf">Verkauf</option>
+						<option value="Modernisierung">Modernisierung</option>
+						<option value="Neubau">Neubau</option>
+						<option value="Erweiterung">Erweiterung</option>
+						<option value="Aushangpflicht" id="aP" style="display: none;">Aushangpflicht
+						</option>
+					</select>
+				</div>
+				<div class="col-lg-4" style="display: none;">
+					<div id="OEA_Baujahr">Baujahr</div> <select class="form-control col-lg-12" id="changeBaujahr">
+						<option value="" selected="" disabled="">bitte auswählen</option>
+						<option value="vor 1978">vor 1978</option>
+						<option value="nach 1977">nach 1977</option>
+					</select>
+				</div>
+				<div class="col-lg-4" style="display: none;">
+					<div id="OEA_Wohneinheiten">Wohneinheiten</div> <select class="form-control col-lg-12" id="changeWohneinheit">
+						<option value="" selected="" disabled="">bitte auswählen</option>
+						<option value="weniger als 5">bis 4</option>
+						<option value="mehr als 4">mehr als 4</option>
+					</select>
+				</div>
+				<div class="col-lg-4 last" style="display: none;">
+					<div id="OEA_Sanierung">Sa­nie­rungs­sta­tus</div> <select class="form-control col-lg-12" id="changeSanierung">
+						<option value="" selected="" disabled="">bitte auswählen</option>
+						<option value="san">saniert</option>
+						<option value="unsan">unsaniert</option>
+					</select>
+				</div>
+			</div>
+		</div>
+		<div class="col-md-12" style="display: none;">
+			<div id="wrap_CTA">
+				<div id="thumb"><img src="https://widget.ib-cornelsen.de/widgetvorlage/welcher-energieausweis/img/thumb.png" alt="thumb">
+				</div>
+				<div id="OEA_cta" class="button"></div>
+			</div>
+			<div id="OEA_result"></div>
+		</div>
+		<div class="col-md-12" style="padding:0;">
+			<div id="OEA_powered">
+				<div id="logo2">
+					<p style="display:inline-block; vertical-align: text-top; padding-right: 0.5em;">powered by</p>
+					<a href="https://online-energieausweis.org?recode=widgetvorlage" title="IB Cornelsen" style="display:inline-block;">
+						<img alt="IB Cornelsen" src="https://widget.ib-cornelsen.de/OEA_WIDGETS/img/IBC-logo.svg" />
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="https://widget.ib-cornelsen.de/widgetvorlage/js/tingle/tingle.js"></script>
+	<script src="https://widget.ib-cornelsen.de/widgetvorlage/js/ausweis-oeffnen.js"></script>
+	<script src="https://widget.ib-cornelsen.de/widgetvorlage/js/welcher-energieausweis-widget.js">
+	</script>
+</div>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

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',
+	},
+});
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<script type="application/ld+json" set:html={schema}></script>
+		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
+		<link rel="stylesheet" href="style/main.css" />
+		<link rel="stylesheet" href="style/bootstrap.min.css" />
+
+		<meta
+			name="description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<link rel="canonical" href="https://online-energieausweis.org/" />
+
+		<meta property="og:locale" content="de_DE" />
+		<meta property="og:type" content="website" />
+		<meta
+			property="og:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			property="og:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta property="og:url" content="https://online-energieausweis.org/" />
+		<meta property="og:site_name" content="Energieausweis online erstellen" />
+
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta
+			name="twitter:description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<meta
+			name="twitter:title"
+			content="Energieausweis online erstellen - Online Energieausweis"
+		/>
+		<meta
+			name="twitter:image"
+			content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
+		/>
+		<title>
+			{title || 'Energieausweis online erstellen - Online Energieausweis'}
+		</title>
+	</head>
+
+	<body>
+		<Header />
+		<main class="content">
+			<SidebarLeft></SidebarLeft>
+			<article class="mainContent">
+				<slot />
+			</article>
+			<SidebarRight></SidebarRight>
+		</main>
+		<Footer />
+	</body>
+</html>
+
+<style is:global>
+	body {
+		min-height: 100vh;
+	}
+</style>

src/pages/index.astro

@@ -0,0 +1,446 @@
+---
+import Widget from '../components/Widget.astro';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
+	<h1>Energieausweis online erstellen</h1>
+
+	<Widget />
+
+	<h2>GEG gilt ab 1. Mai 2021 und löst die EnEV ab</h2>
+	<div class="pflicht-list">
+		<p class="underline">Folgende Punkte ändern sich:</p>
+		<ul>
+			<li contenteditable="true">
+				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.
+			</li>
+			<li>
+				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.
+			</li>
+			<li>
+				Die lokale Erzeugung von Strom über eine PV-Anlage wird besser
+				berücksichtigt und kann vom Jahres-Primärenergiebedarf abgezogen werden
+				(bis 45%).
+			</li>
+			<li>
+				Die Angabe der CO2-Emission des Gebäudes im Energieausweis wird
+				verplichtend eingeführt.
+			</li>
+		</ul>
+	</div>
+
+	<h2>
+		Energieausweis nach aktueller GEG (vormals EnEV) geprüft vom Diplom
+		Ingenieur
+	</h2>
+	<div class="right-img">
+		<img
+			title="Energieausweis online erstellen"
+			src="images/Bedarfsausweis-Wohngebaeude-Beispiel.jpg"
+			alt="Energieausweis online erstellen"
+		/>
+	</div>
+	<hr />Sie möchten Ihren <strong>Energieausweis online erstellen</strong>? Auf
+	dieser Seite finden Sie alle nötigen Informationen hierzu. Sollten Sie sich
+	nicht sicher sein <a href="/energieausweis-welcher-energieausweis.php"
+		>welchen Energieausweis</a
+	> 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
+	<a href="/energieausweis-pflicht.php">Energieausweis Pflicht</a> 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.
+	<hr />Mit dem <strong>Energieausweis</strong> werden Wohngebäude und Nichtwohngebäude
+	nach den Vorgaben der Energieeinsparverordnung <a
+		href="/energieausweis-enev-geg.php">EnEV</a
+	>
+	energetisch bewertet. Das <a href="https://www.dibt.de/" target="blank"
+		>DIBt</a
+	>
+	(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:
+	<hr />
+	<div style="border-left: 5px solid #f5b68c; border-right: 5px solid #f5b68c;">
+		<ul id="start_ul">
+			<li>
+				Der verbrauchsbasierte Energieausweis wird als <a
+					title="Verbrauchsausweis"
+					href="/verbrauchsausweis/"><strong>Verbrauchsausweis</strong></a
+				> bezeichnet. Dies ist der „kleine“ Energieausweis und kann bei Vermietung
+				und Verkauf in den meisten Fällen verwendet werden. Hier gehts direkt zum
+				Eingabeformular <br />→ <a
+					title="Energieausweis online erstellen - Verbrauchsausweis"
+					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+					>Energieausweis online erstellen</a
+				>
+				<hr />
+			</li>
+			<li>
+				Der bedarfsbasierte Energieausweis wird als <a
+					title="Bedarfsausweis"
+					href="/bedarfsausweis/"><strong>Bedarfsausweis</strong></a
+				>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 <br />→ <a
+					title="Energieausweis online erstellen - Bedarfsausweis"
+					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+					>Energieausweis online erstellen</a>
+			</li>
+		</ul>
+	</div>
+	<div class="hide-on-mobile">
+		<hr />
+		<h3>Energieausweis online erstellen</h3>
+		<div class="rpt_plans_3">
+			<div class="rpt_plan">
+				<div class="rpt_title">
+					<img
+						src="/images/icon_wohnhaus_plan_01.png"
+						class="rpt_icon rpt_icon_0"
+						alt="Energieausweis erstellen"
+					/>
+					Verbrauchsausweis<br />Wohngebäude
+				</div>
+				<div class="rpt_head">
+					<div class="rpt_recurrence">inkl. 19% MwSt</div>
+					<div class="rpt_price"><span class="rpt_currency">€</span>45</div>
+				</div>
+				<div class="rpt_feature">Unsere Leistungen:</div>
+				<div class="rpt_feature">
+					Prüfung durch Diplom Ingenieur
+				</div>
+				<div class="rpt_feature">
+					Energieausweis Vorschau als PDF
+				</div>
+				<div class="rpt_feature">
+					Ausweisdokument als PDF per E-Mail
+				</div>
+				<div class="rpt_feature">
+					Registrierung beim DiBt
+				</div>
+				<div class="rpt_feature">
+					Bearbeitung innhalb 24h
+				</div>
+				<div class="rpt_feature">
+					rechtssicher nach aktueller EnEV
+				</div>
+				<div class="rpt_feature">
+					telefonische Beratung
+				</div><a
+					target="_self"
+					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+					class="rpt_foot">jetzt sofort Energieausweis online erstellen</a
+				>
+			</div>
+			<div class="rpt_plan">
+				<div class="rpt_title rpt_title_1">
+					<img
+						src="/images/icon_wohnhaus_plan_01.png"
+						class="rpt_icon rpt_icon_1"
+						alt="Energieausweis erstellen"
+					/>
+					Bedarfsausweis<br />Wohngebäude
+				</div>
+				<div class="rpt_head rpt_head_1">
+					<div class="rpt_recurrence rpt_recurrence_1">inkl. 19% MwSt</div>
+					<div class="rpt_price rpt_price_1">
+						<span class="rpt_currency">€</span>75
+					</div>
+				</div>
+				<div class="rpt_feature">Unsere Leistungen:</div>
+				<div class="rpt_feature">
+					Prüfung durch Diplom Ingenieur
+				</div>
+				<div class="rpt_feature">
+					Energieausweis Vorschau als PDF
+				</div>
+				<div class="rpt_feature">
+					Ausweisdokument als PDF per E-Mail
+				</div>
+				<div class="rpt_feature">
+					Registrierung beim DiBt
+				</div>
+				<div class="rpt_feature">
+					Bearbeitung innhalb 24h
+				</div>
+				<div class="rpt_feature">
+					rechtssicher nach aktueller EnEV
+				</div>
+				<div class="rpt_feature rpt_feature_1-7">
+					telefonische Beratung
+				</div><a
+					target="_self"
+					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+					class="rpt_foot">jetzt sofort Energieausweis online erstellen</a
+				>
+			</div>
+			<div class="rpt_plan">
+				<div class="rpt_title rpt_title_2">
+					<img
+						src="/images/icon_gewerbe_plan_01.png"
+						class="rpt_icon rpt_icon_2"
+						alt="Energieausweis erstellen"
+					/>
+					Verbrauchsausweis<br />Gewerbe
+				</div>
+				<div class="rpt_head rpt_head_2">
+					<div class="rpt_recurrence">inkl. 19% MwSt</div>
+					<div class="rpt_price"><span class="rpt_currency">€</span>65</div>
+				</div>
+				<div class="rpt_feature">Unsere Leistungen:</div>
+				<div class="rpt_feature">
+					Prüfung durch Diplom Ingenieur
+				</div>
+				<div class="rpt_feature">
+					Energieausweis Vorschau als PDF
+				</div>
+				<div class="rpt_feature">
+					Ausweisdokument als PDF per E-Mail
+				</div>
+				<div class="rpt_feature">
+					Registrierung beim DiBt
+				</div>
+				<div class="rpt_feature">
+					Bearbeitung innhalb 24h
+				</div>
+				<div class="rpt_feature">
+					rechtssicher nach aktueller EnEV
+				</div>
+				<div class="rpt_feature">
+					telefonische Beratung
+				</div><a
+					target="_self"
+					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen.php"
+					class="rpt_foot">jetzt sofort Energieausweis online erstellen</a
+				>
+			</div>
+		</div>
+		<div style="clear:both;"></div>
+		<hr />
+	</div>
+
+	<h2>Unterschied: Verbrauchsausweis und Bedarfsausweis</h2> Grundsätzlich unterscheidet
+	man beim Energieausweis zwischen Verbrauchsausweis und Bedarfsausweis.<h3>
+		Was ist ein Verbrauchsausweis?
+	</h3>
+	Der Verbrauchsausweis gibt den Energieverbrauch der Gebäudebewohner in den vergangenen
+	drei Jahren für Heizung und Warmwasserbereitung an. Um den <a
+		href="/energieausweis-enev-geg.php#§-19-EnEV"
+		>Energieverbrauchskennwert zu ermitteln</a
+	>, 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.<h3>Was ist ein Bedarfsausweis?</h3> Der Bedarfsausweis
+	entsteht auf Grundlage einer technischen <a
+		href="/energieausweis-enev-geg.php#§-18-EnEV"
+		>Analyse der Bausubstanz und der Heizungsanlage eines Gebäudes</a
+	> 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.<h3>Fazit – Verbrauchsausweis / Bedarfsausweis</h3> 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.
+
+	<hr />
+	<div class="start_infobox" title="Verbrauchsausweis Wohngebäude">
+		<div class="start_infobox_inside IB_VA_WG">
+			<img
+				alt="Energieausweis online erstellen - Verbrauchsausweis"
+				title="Energieausweis online erstellen - Verbrauchsausweis"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis.png"
+			/>
+			<div class="title">Verbrauchsausweis Wohngebäude</div>
+			<hr />
+			<ul>
+				<li>
+					3 zusammenhängende Heizenergieverbräuche müssen eingegeben werden.
+				</li>
+				<li>
+					Wohnfläche, Baujahr Gebäude und Baujahr Heizung müssen eingegeben
+					werden.
+				</li>
+				<li>
+					<div class="start_infobox_link">
+						<a
+							title="Verbrauchsausweis"
+							href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude.php"
+							>Verbrauchsausweis</a
+						>
+						bei fast allen Gebäuden möglich. (Baujahr &gt; 1977 - Vermietung/Verkauf)
+					</div>
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					title="Verbrauchsausweis erstellen"
+					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
+					>Jetzt Verbrauchsausweis erstellen</a>
+			</div>
+		</div>
+	</div>
+	<div class="start_infobox BA-WG" title="Bedarfssausweis Wohngebäude">
+		<div class="start_infobox_inside">
+			<img
+				alt="Energieausweis online erstellen - Bedarfsausweis"
+				title="Energieausweis online erstellen - Bedarfsausweis"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis.png"
+			/>
+			<div class="title">Bedarfsausweis Wohngebäude</div>
+			<hr />
+			<ul>
+				<li>
+					Die verwendete Heizungsanlage (Standardkessel, Brennwertkessel, etc.)
+					muß eingegeben werden.
+				</li>
+				<li>
+					Grundrissgeometrie sowie Baujahr Heizung und Gebäude müssen eingegeben
+					werden.
+				</li>
+				<li>
+					<a
+						title="Bedarfsausweis"
+						href="/bedarfsausweis/bedarfsausweis-wohngebaeude.php"
+						>Bedarfsausweis</a
+					> bei allen Gebäuden möglich. Die Berechnung ist umfangreicher und besser
+					vergleichbar.
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					title="Bedarfsausweis erstellen"
+					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
+					>Jetzt Bedarfsausweis erstellen</a>
+			</div>
+		</div>
+	</div>
+	<div class="start_infobox VANW_WG" title="Bedarfsausweis Gewerbe">
+		<div class="start_infobox_inside">
+			<img
+				alt="Energieausweis online erstellen - Bedarfsausweis Gewerbe"
+				title="Energieausweis online erstellen - Bedarfsausweis Gewerbe"
+				class="start_infobox_img"
+				src="/images/energieausweis-online-erstellen-verbrauchsausweis-gewerbe.png"
+			/>
+			<div class="title">Bedarfsausweis Gewerbe</div>
+			<hr />
+			<ul>
+				<li>
+					Aktuelle Grundriss- und Ansichtspläne werden für die Zonierung
+					benötigt.
+				</li>
+				<li>
+					Baubeschreibung (z.B. aus der Baugenehmigung) mit Angabe der
+					verwendeten Baustoffe und TGA.
+				</li>
+				<li>Angabe vom Baujahr der Heizung, Gebäude und Klimaanlage.</li>
+				<li>
+					<a
+						title="Bedarfsausweis Gewerbe"
+						href="/bedarfsausweis/bedarfsausweis-gewerbe.php"
+						>Bedarfsausweis Gewerbe</a
+					> bei allen Nichtwohngebäuden möglich (kann immmer verwendet werden).
+				</li>
+			</ul>
+			<div class="start_infobox_button">
+				<a
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen.php"
+					title="Bedarfsausweis Gewerbe anfragen"
+					>Jetzt Bedarfsausweis Gewerbe anfragen</a>
+			</div>
+		</div>
+	</div>
+
+	<hr />
+	<h2>Energieausweis online erstellen</h2> 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
+	<a href="energieausweis-enev-geg.php#§-16a-EnEV"
+		>Energieausweis gezeigt werden</a
+	>. 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 (<a
+		href="energieausweis-enev-geg.php#§-16-EnEV">§ 16 Abs. 4 EnEV</a
+	>).Die Deutsche Energie-Agentur GmbH (<a
+		href="https://www.dena.de/"
+		target="blank">dena</a
+	>) 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.
+	<hr />
+	<h2>Zusammenfassung: Was ist ein Energieausweis?</h2>
+	<ul id="start_ul_1">
+		<li>
+			Der Gesetzgeber hat zwei Arten des Energieausweises bestimmt: Den
+			Verbrauchsausweis und den Bedarfsausweis.
+		</li>
+		<li>
+			Je nach Gebäudeart, Baujahr, Nutzungsart gilt es verschiedene Kriterien
+			für den Energieausweis zu beachten.
+		</li>
+		<li>
+			Der Energieausweis ist ein Mittel, das als Starter für
+			Energiesparmaßnahmen definiert werden kann.
+		</li>
+		<li>
+			Mit Hilfe des Energieausweises kann sich der Marktwert einer Immobilie
+			erhöhen.
+		</li>
+		<li>
+			Der Energieausweis offenbart bauliche Mängel, die eine
+			Energieverschwendung mit sich bringen.
+		</li>
+		<li>
+			Im Energieausweis werden Sanierungs- bzw. Modernisierungsvorschläge
+			dokumentiert.
+		</li>
+		<li>
+			Anhand des Energiepasses lässt sich der energetische Zustand verschiedener
+			Gebäude miteinander vergleichen.
+		</li>
+	</ul>
+</Layout>

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 */

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;
+}

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";

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;
+	}
+}