From a2dfcf626a54bb90d48a2cb3f9f5035959a6567b Mon Sep 17 00:00:00 2001
From: Moritz Utcke <62291876+Letsmoe@users.noreply.github.com>
Date: Wed, 31 May 2023 15:44:18 +0500
Subject: [PATCH] Update @ibcornelsen/ui + Style Improvements

---
 README.md                                     |   2 +-
 package.json                                  |   2 +-
 .../VerbrauchsausweisContent.svelte           |   2 +-
 src/layouts/UserLayout.astro                  |  25 +-
 src/pages/index.astro                         | 394 ++++++++----------
 src/style/576.scss                            |   9 +-
 src/style/global.scss                         |  31 +-
 7 files changed, 219 insertions(+), 246 deletions(-)

diff --git a/README.md b/README.md
index 9491a8b6..f77f7fd2 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
-# online-energieausweis
+# IBCornelsen Online Energieausweis
 
diff --git a/package.json b/package.json
index 749fe429..55165107 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
 		"@astrojs/node": "^5.1.4",
 		"@astrojs/svelte": "^2.2.0",
 		"@astrojs/tailwind": "^3.1.3",
-		"@ibcornelsen/ui": "^0.0.1",
+		"@ibcornelsen/ui": "^0.0.2",
 		"astro": "^2.5.1",
 		"cookiejs": "^2.1.2",
 		"express": "^4.18.2",
diff --git a/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte b/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte
index aa238e13..bedca411 100644
--- a/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte
+++ b/src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte
@@ -451,7 +451,7 @@
 </form>
 
 <Popup hidden={false} heading={"Einen Kurzen Moment"}>
-	<p>Moin! Wir bitten sie um einen kurzen Augenblick, um ein paar Fragen zu stellen und unseren Service zu verbessern.</p>
+	<p>Moin! Wir bitten sie um einen kurzen Augenblick, um ein paar Fragen zu beantworten und unseren Service zu verbessern.</p>
 	<span>1. Sind sie zufrieden mit der Gestaltung unserer Webseite?</span>
 	<textarea placeholder="Kommentar..."></textarea>
 </Popup>
diff --git a/src/layouts/UserLayout.astro b/src/layouts/UserLayout.astro
index 6a77a392..60095c5e 100644
--- a/src/layouts/UserLayout.astro
+++ b/src/layouts/UserLayout.astro
@@ -89,27 +89,4 @@ const schema = JSON.stringify({
 			</article>
 		</main>
 	</body>
-</html>
-
-<style is:global>
-	article {
-		@apply px-8 py-6 w-full relative bg-white;
-		box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
-	}
-
-	article h1 {
-		@apply text-4xl font-normal my-4;
-	}
-
-	article h2 {
-		@apply text-2xl font-normal my-4;
-	}
-
-	article h3 {
-		@apply text-xl font-normal my-2;
-	}
-
-	article a {
-		@apply text-blue-700 font-medium text-lg;
-	}
-</style>
+</html>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b76e3fff..8d7fc6e4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
-import {BoxWithHeading} from '@ibcornelsen/ui';
-import Widget from '../components/Widget.svelte';
-import Layout from '../layouts/Layout.astro';
+import { BoxWithHeading } from "@ibcornelsen/ui";
+import Widget from "../components/Widget.svelte";
+import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="Energieausweis online erstellen - Online Energieausweis">
@@ -14,21 +14,21 @@ import Layout from '../layouts/Layout.astro';
 		<ul>
 			<li>
 				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.
+				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.
+				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%).
+				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
@@ -48,17 +48,17 @@ import Layout from '../layouts/Layout.astro';
 			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"
+	<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.
+	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="/enev-zusammenfassung">EnEV</a
@@ -67,19 +67,22 @@ import Layout from '../layouts/Layout.astro';
 		>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:
+	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;">
+	<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
+					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
+				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
@@ -95,140 +98,103 @@ import Layout from '../layouts/Layout.astro';
 				vorgeschrieben. Hier gehts direkt zum Eingabeformular <br />→ <a
 					title="Energieausweis online erstellen - Bedarfsausweis"
 					href="/energieausweis-erstellen/bedarfsausweis-erstellen.php"
-					>Energieausweis online erstellen</a>
+					>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
-				>
+	<hr />
+	<div class="grid grid-cols-3 gap-4">
+		<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_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 class="rpt_head">
+				<div class="rpt_recurrence">inkl. 19% MwSt</div>
+				<div class="rpt_price">
+					<span class="rpt_currency">€</span>45
 				</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 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 style="clear:both;"></div>
-		<hr />
 	</div>
+	<hr />
 
 	<h2>Unterschied: Verbrauchsausweis und Bedarfsausweis</h2> Grundsätzlich unterscheidet
 	man beim Energieausweis zwischen Verbrauchsausweis und Bedarfsausweis.<h3>
@@ -240,45 +206,47 @@ import Layout from '../layouts/Layout.astro';
 		>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
+	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
+	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="/enev-zusammenfassung#§-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.
+	> 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.
+	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">
@@ -293,11 +261,12 @@ import Layout from '../layouts/Layout.astro';
 			<hr />
 			<ul>
 				<li>
-					3 zusammenhängende Heizenergieverbräuche müssen eingegeben werden.
+					3 zusammenhängende Heizenergieverbräuche müssen eingegeben
+					werden.
 				</li>
 				<li>
-					Wohnfläche, Baujahr Gebäude und Baujahr Heizung müssen eingegeben
-					werden.
+					Wohnfläche, Baujahr Gebäude und Baujahr Heizung müssen
+					eingegeben werden.
 				</li>
 				<li>
 					<div class="start_infobox_link">
@@ -314,7 +283,8 @@ import Layout from '../layouts/Layout.astro';
 				<a
 					title="Verbrauchsausweis erstellen"
 					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
-					>Jetzt Verbrauchsausweis erstellen</a>
+					>Jetzt Verbrauchsausweis erstellen</a
+				>
 			</div>
 		</div>
 	</div>
@@ -330,27 +300,28 @@ import Layout from '../layouts/Layout.astro';
 			<hr />
 			<ul>
 				<li>
-					Die verwendete Heizungsanlage (Standardkessel, Brennwertkessel, etc.)
-					muß eingegeben werden.
+					Die verwendete Heizungsanlage (Standardkessel,
+					Brennwertkessel, etc.) muß eingegeben werden.
 				</li>
 				<li>
-					Grundrissgeometrie sowie Baujahr Heizung und Gebäude müssen eingegeben
-					werden.
+					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.
+					> 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>
+					>Jetzt Bedarfsausweis erstellen</a
+				>
 			</div>
 		</div>
 	</div>
@@ -366,27 +337,31 @@ import Layout from '../layouts/Layout.astro';
 			<hr />
 			<ul>
 				<li>
-					Aktuelle Grundriss- und Ansichtspläne werden für die Zonierung
-					benötigt.
+					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>
+					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).
+					> 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>
+					>Jetzt Bedarfsausweis Gewerbe anfragen</a
+				>
 			</div>
 		</div>
 	</div>
@@ -395,9 +370,8 @@ import Layout from '../layouts/Layout.astro';
 	<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="enev-zusammenfassung#§-16a-EnEV"
-		>Energieausweis gezeigt werden</a
-	>. In den meisten Fällen ist hier ein Verbrauchsausweis ausreichend. Auch
+	<a href="enev-zusammenfassung#§-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
@@ -408,9 +382,9 @@ import Layout from '../layouts/Layout.astro';
 		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.
+	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">
@@ -419,16 +393,16 @@ import Layout from '../layouts/Layout.astro';
 			Verbrauchsausweis und den Bedarfsausweis.
 		</li>
 		<li>
-			Je nach Gebäudeart, Baujahr, Nutzungsart gilt es verschiedene Kriterien
-			für den Energieausweis zu beachten.
+			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.
+			Mit Hilfe des Energieausweises kann sich der Marktwert einer
+			Immobilie erhöhen.
 		</li>
 		<li>
 			Der Energieausweis offenbart bauliche Mängel, die eine
@@ -439,8 +413,8 @@ import Layout from '../layouts/Layout.astro';
 			dokumentiert.
 		</li>
 		<li>
-			Anhand des Energiepasses lässt sich der energetische Zustand verschiedener
-			Gebäude miteinander vergleichen.
+			Anhand des Energiepasses lässt sich der energetische Zustand
+			verschiedener Gebäude miteinander vergleichen.
 		</li>
 	</ul>
 </Layout>
diff --git a/src/style/576.scss b/src/style/576.scss
index 2dcd16b6..57e598bc 100644
--- a/src/style/576.scss
+++ b/src/style/576.scss
@@ -688,7 +688,7 @@ table {
 
 .start_infobox ul li::before {
 	content: "";
-	left: -1em;
+	left: 0;
 	top: 8px;
 	width: 7px;
 	height: 7px;
@@ -1093,13 +1093,6 @@ content>*:nth-child(3) {
 	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%;
diff --git a/src/style/global.scss b/src/style/global.scss
index ccb39d2f..a62e8ed8 100644
--- a/src/style/global.scss
+++ b/src/style/global.scss
@@ -10,4 +10,33 @@
 @import './768';
 @import './992';
 
-@import "./smaller-768";
\ No newline at end of file
+@import "./smaller-768";
+
+article hr {
+	@apply mb-4 mt-4;
+}
+
+article {
+	@apply px-8 py-6 w-full relative bg-white;
+	box-shadow: rgb(162, 162, 162) 1px 1px 3px 1px;
+}
+
+article h1 {
+	@apply text-4xl font-normal my-4;
+}
+
+article h2 {
+	@apply text-2xl font-normal my-4;
+}
+
+article h3 {
+	@apply text-xl font-normal my-2;
+}
+
+article a {
+	@apply text-blue-700 font-medium text-lg;
+}
+
+article select {
+	@apply rounded-lg px-2 py-1.5 outline-none;
+}
\ No newline at end of file