Update @ibcornelsen/ui + Style Improvements

README.md

@@ -1,2 +1,2 @@
-# online-energieausweis
+# IBCornelsen Online Energieausweis
 

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

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>

src/layouts/UserLayout.astro

@@ -90,26 +90,3 @@ const schema = JSON.stringify({
 		</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>

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
-import {BoxWithHeading} from '@ibcornelsen/ui';
+import { BoxWithHeading } from "@ibcornelsen/ui";
-import Widget from '../components/Widget.svelte';
+import Widget from "../components/Widget.svelte";
-import Layout from '../layouts/Layout.astro';
+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
+				Insbesondere zur Einschätzung der Modernisierungsempfehlungen
-				jetzt Fotos der relevanten Bereiche von Dach, Fenster, Heizung und
+				werden jetzt Fotos der relevanten Bereiche von Dach, Fenster,
-				Außenwand benötigt.
+				Heizung und Außenwand benötigt.
 			</li>
 			<li>
-				Die Primärenergiefaktoren zur Ermittlung des Gebäudekennwerts werden
+				Die Primärenergiefaktoren zur Ermittlung des Gebäudekennwerts
-				jetzt direkt im GEG (§22 Primärenergiefaktoren) geregelt. Dadurch wird
+				werden jetzt direkt im GEG (§22 Primärenergiefaktoren) geregelt.
-				mehr Transparenz und Nachvollziehbarkeit geschaffen. Auch findet die
+				Dadurch wird mehr Transparenz und Nachvollziehbarkeit
-				Verwendung von Biogas aus dem Erdgasnetz jetzt angemessen
+				geschaffen. Auch findet die Verwendung von Biogas aus dem
-				Berücksichtigung.
+				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
+				berücksichtigt und kann vom Jahres-Primärenergiebedarf abgezogen
-				(bis 45%).
+				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
+	<hr />Sie möchten Ihren <strong>Energieausweis online erstellen</strong>?
-	dieser Seite finden Sie alle nötigen Informationen hierzu. Sollten Sie sich
+	Auf dieser Seite finden Sie alle nötigen Informationen hierzu. Sollten Sie
-	nicht sicher sein <a href="/energieausweis-welcher-energieausweis.php"
+	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
+	im PDF Format zum Download zusammengefasst. Sollten Sie noch Fragen zum Thema
-	online erstellen haben, stehen wir Ihnen gerne telefonisch unter folgender Nummer:
+	Energieausweis online erstellen haben, stehen wir Ihnen gerne telefonisch unter
-	040/209 339 850 zur Verfügung.
+	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
+	und der Qualitätssicherung. Der Energieausweis beschreibt die entsprechenden
-	auf einer Farbskala, grün (A+/Effizienzhaus), gelb (D) und rot (H / unsaniert).
+	Energiekennwerte auf einer Farbskala, grün (A+/Effizienzhaus), gelb (D) und rot
-	Es wird grundsätzlich zwischen zwei Energieausweisarten unterschieden:
+	(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
+				und Verkauf in den meisten Fällen verwendet werden. Hier gehts direkt
-				Eingabeformular <br />→ <a
+				zum Eingabeformular <br />→ <a
 					title="Energieausweis online erstellen - Verbrauchsausweis"
 					href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
 					>Energieausweis online erstellen</a
@@ -95,14 +98,13 @@ 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="grid grid-cols-3 gap-4">
-		<div class="rpt_plans_3">
 		<div class="rpt_plan">
 			<div class="rpt_title">
 				<img
@@ -114,30 +116,18 @@ import Layout from '../layouts/Layout.astro';
 			</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 class="rpt_price">
+					<span class="rpt_currency">€</span>45
+				</div>
 			</div>
 			<div class="rpt_feature">Unsere Leistungen:</div>
-				<div class="rpt_feature">
+			<div class="rpt_feature">Prüfung durch Diplom Ingenieur</div>
-					Prüfung durch Diplom Ingenieur
+			<div class="rpt_feature">Energieausweis Vorschau als PDF</div>
-				</div>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
-				<div class="rpt_feature">
+			<div class="rpt_feature">Registrierung beim DiBt</div>
-					Energieausweis Vorschau als PDF
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
-				</div>
+			<div class="rpt_feature">rechtssicher nach aktueller EnEV</div>
-				<div class="rpt_feature">
+			<div class="rpt_feature">telefonische Beratung</div><a
-					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
@@ -153,30 +143,20 @@ import Layout from '../layouts/Layout.astro';
 				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_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">
+			<div class="rpt_feature">Prüfung durch Diplom Ingenieur</div>
-					Prüfung durch Diplom Ingenieur
+			<div class="rpt_feature">Energieausweis Vorschau als PDF</div>
-				</div>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
-				<div class="rpt_feature">
+			<div class="rpt_feature">Registrierung beim DiBt</div>
-					Energieausweis Vorschau als PDF
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
-				</div>
+			<div class="rpt_feature">rechtssicher nach aktueller EnEV</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
@@ -196,39 +176,25 @@ import Layout from '../layouts/Layout.astro';
 			</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 class="rpt_price">
+					<span class="rpt_currency">€</span>65
+				</div>
 			</div>
 			<div class="rpt_feature">Unsere Leistungen:</div>
-				<div class="rpt_feature">
+			<div class="rpt_feature">Prüfung durch Diplom Ingenieur</div>
-					Prüfung durch Diplom Ingenieur
+			<div class="rpt_feature">Energieausweis Vorschau als PDF</div>
-				</div>
+			<div class="rpt_feature">Ausweisdokument als PDF per E-Mail</div>
-				<div class="rpt_feature">
+			<div class="rpt_feature">Registrierung beim DiBt</div>
-					Energieausweis Vorschau als PDF
+			<div class="rpt_feature">Bearbeitung innhalb 24h</div>
-				</div>
+			<div class="rpt_feature">rechtssicher nach aktueller EnEV</div>
-				<div class="rpt_feature">
+			<div class="rpt_feature">telefonische Beratung</div><a
-					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>
@@ -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
+	energetische Gebäudenutzfläche (An) geteilt. So führt beispielsweise ein
-	Verbrauch in einem einzelnen harten Winter nicht zu einer schlechteren
+	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
+	stark vom individuellen Nutzungsverhalten der Bewohner abhängig. Wird in
-	energetisch schlechten Gebäude kaum geheizt, so kann der Energieausweis
+	einem energetisch schlechten Gebäude kaum geheizt, so kann der
-	trotzdem sehr gut ausfallen.<h3>Was ist ein Bedarfsausweis?</h3> Der Bedarfsausweis
+	Energieausweis trotzdem sehr gut ausfallen.<h3>
-	entsteht auf Grundlage einer technischen <a
+		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
+	> und ist unabhängig vom individuellen Nutzerverhalten. Die Farbverlaufsskala
-	Bedarfsausweis weist zwei verschiedene Werte aus, die sehr unterschiedlich ausfallen
+	im Bedarfsausweis weist zwei verschiedene Werte aus, die sehr unterschiedlich
-	können – einen Wert für den Endenergiebedarf und einen für den Primärenergiebedarf.
+	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.
+	eine Innentemperatur von 19 Grad im beheizten Bereich des Gebäudes – zugrunde
-	Am Endenergiebedarf sollten sich Hausbewohner orientieren, wenn sie ihren künftigen
+	gelegt. Am Endenergiebedarf sollten sich Hausbewohner orientieren, wenn sie ihren
-	Energieverbrauch und die Energiekosten abschätzen wollen.Der Primärenergiebedarf
+	künftigen Energieverbrauch und die Energiekosten abschätzen wollen.Der Primärenergiebedarf
-	bildet die Gesamtenergieeffizienz eines Gebäudes ab. Er berücksichtigt neben der
+	bildet die Gesamtenergieeffizienz eines Gebäudes ab. Er berücksichtigt neben
-	Endenergie auch die so genannte „Vorkette“ (Erkundung, Gewinnung, Verteilung, Umwandlung)
+	der Endenergie auch die so genannte „Vorkette“ (Erkundung, Gewinnung, Verteilung,
-	der jeweils eingesetzten Energieträger (z.B. Heizöl, Gas, Strom, erneuerbare Energien).Besonders
+	Umwandlung) der jeweils eingesetzten Energieträger (z.B. Heizöl, Gas, Strom,
-	niedrig fällt der Primärenergiebedarf aus, wenn erneuerbare Energien (solare Strahlungsenergie,
+	erneuerbare Energien).Besonders niedrig fällt der Primärenergiebedarf aus, wenn
-	Geothermie, Energie aus Biomasse) für die Energieversorgung im Gebäude eingesetzt
+	erneuerbare Energien (solare Strahlungsenergie, Geothermie, Energie aus Biomasse)
-	werden. Am Primärenergiebedarf können Verbraucher erkennen, wie umweltfreundlich
+	für die Energieversorgung im Gebäude eingesetzt werden. Am Primärenergiebedarf
-	ihr Gebäude ist.<h3>Fazit – Verbrauchsausweis / Bedarfsausweis</h3> Geht es um
+	können Verbraucher erkennen, wie umweltfreundlich ihr Gebäude ist.<h3>
-	den tatsächlichen Verbrauch der Energie, der den Aufwand für Heizung und zentrale
+		Fazit – Verbrauchsausweis / Bedarfsausweis
-	Warmwasserbereitung der vergangenen drei Jahre berücksichtigt, wird der Energieverbrauchskennwert
+	</h3> Geht es um den tatsächlichen Verbrauch der Energie, der den Aufwand für
-	für den Verbrauchsausweis ermittelt. Bei gewerblichen Objekten wird zusätzlich
+	Heizung und zentrale Warmwasserbereitung der vergangenen drei Jahre berücksichtigt,
-	der Verbrauch für Beleuchtung und Klimatisierung mit eingerechnet. Anhand der Zeiträume
+	wird der Energieverbrauchskennwert für den Verbrauchsausweis ermittelt. Bei gewerblichen
-	und der Lage des Gebäudes (Postleitzahl) werden diese Daten ausgewertet und sowohl
+	Objekten wird zusätzlich der Verbrauch für Beleuchtung und Klimatisierung mit
-	zeit-, als auch klimabereinigt zur Bewertung der vorhandenen energetischen Qualität
+	eingerechnet. Anhand der Zeiträume und der Lage des Gebäudes (Postleitzahl) werden
-	herangezogen.Für das Ausstellen des Bedarfsausweis wird der rechnerische Energiebedarf
+	diese Daten ausgewertet und sowohl zeit-, als auch klimabereinigt zur Bewertung
-	unter standardisierten Randbedingungen benötigt. Daten rund um Bausubstanz, Gebäudehülle
+	der vorhandenen energetischen Qualität herangezogen.Für das Ausstellen des Bedarfsausweis
-	und Heizanlage fließen in die Berechnung mit ein. Bedarfsausweise widerspiegeln
+	wird der rechnerische Energiebedarf unter standardisierten Randbedingungen benötigt.
-	die tatsächliche energetische Qualität eines Gebäudes damit wesentlich besser als
+	Daten rund um Bausubstanz, Gebäudehülle und Heizanlage fließen in die Berechnung
-	die Verbrauchsausweise.
+	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
+					Wohnfläche, Baujahr Gebäude und Baujahr Heizung müssen
-					werden.
+					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.)
+					Die verwendete Heizungsanlage (Standardkessel,
-					muß eingegeben werden.
+					Brennwertkessel, etc.) muß eingegeben werden.
 				</li>
 				<li>
-					Grundrissgeometrie sowie Baujahr Heizung und Gebäude müssen eingegeben
+					Grundrissgeometrie sowie Baujahr Heizung und Gebäude müssen
-					werden.
+					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
+					> bei allen Gebäuden möglich. Die Berechnung ist umfangreicher
-					vergleichbar.
+					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
+					Aktuelle Grundriss- und Ansichtspläne werden für die
-					benötigt.
+					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"
+	<a href="enev-zusammenfassung#§-16a-EnEV">Energieausweis gezeigt werden</a>.
-		>Energieausweis gezeigt werden</a
+	In den meisten Fällen ist hier ein Verbrauchsausweis ausreichend. Auch
-	>. 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
+	nutzerunabhängige Bewertung des Gebäudes. Zusätzlich können bei der
-	eines Bedarfsausweises die Empfehlungen für Modernisierungen auf der Basis
+	Erstellung eines Bedarfsausweises die Empfehlungen für Modernisierungen auf
-	einer technischen Analyse des Gebäudes ermittelt werden.
+	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
+			Je nach Gebäudeart, Baujahr, Nutzungsart gilt es verschiedene
-			für den Energieausweis zu beachten.
+			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
+			Mit Hilfe des Energieausweises kann sich der Marktwert einer
-			erhöhen.
+			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
+			Anhand des Energiepasses lässt sich der energetische Zustand
-			Gebäude miteinander vergleichen.
+			verschiedener Gebäude miteinander vergleichen.
 		</li>
 	</ul>
 </Layout>

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

src/style/global.scss

@@ -11,3 +11,32 @@
 @import './992';
 
 @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;
+}