Template für Box mit Bulletpoints erstellt (z.B. für "Folgende Punkte ändern sich")

src/components/design/content/ProduktVergleich.svelte

@@ -103,13 +103,13 @@ img{@apply justify-self-center mb-1 w-[75%] }
 
 
 
-.orange{@apply bg-primary text-white text-center rounded-md p-2 relative shadow-saeule ring-primary ring-1}
+.orange{@apply bg-primary text-white text-center rounded-md p-1 relative shadow-saeule ring-primary ring-1}
 .price{font-size: clamp(15px, 3vh, 28px)}
 .blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
 
 
 
-.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-2 shadow-saeule ring-secondary ring-1}
+.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-1 shadow-saeule ring-secondary ring-1}
 }
 
 }

src/components/design/content/TextboxCardTemplate.svelte

@@ -0,0 +1,47 @@
+
+<script lang="ts">
+	export let TitelName: string;
+	export let BulletPoints: [string, boolean][];
+</script>
+
+<div class="border rounded-xl">
+	<div class="flex flex-row w-full bg-secondary rounded-t-3xl pl-5 pt-1 pb-1">
+			<h3 class="text-white">{TitelName}</h3>
+	</div>
+
+	<div class="bg-white">
+		<div class="white">
+			{#each BulletPoints as [point]}
+			<div class="services">
+				<ul class="custom-list pl-6 space-y-2"><li>{point}</li></ul>
+			</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	.white {
+		@apply text-center text-black p-6;
+	}
+
+	.services {
+		@apply text-start py-2;
+	}
+	.services:not(:last-child) {
+		@apply border-b-[0px] border-gray-300;
+	}
+
+	.custom-list {
+  @apply list-none pl-6; /* Entfernt Standardpunkte */
+
+  li {
+    @apply relative text-gray-700 text-lg list-none; /* Entfernt Standardpunkte */
+
+    &::before {
+      @apply absolute left-[-1.5rem] top-[0.4rem] w-3 h-3 bg-primary content-[""];
+      /* Quadrat mit `w-2`, `h-2`, orange Hintergrund */
+    }
+  }
+}
+</style>

src/components/widgets/WelcherAusweisWidget.svelte

@@ -77,6 +77,7 @@
 				</select>
 			</div>
 
+			{#if allowedReason.includes(anlass)}
 			<div class="OEA_item2">
 				<div class="OEA_title1">Sanierungsstand</div>
 				<select
@@ -85,14 +86,15 @@
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="saniert">saniert</option>
-					<option value="neubau">Neubau</option>
 					<option value="unsaniert">unsaniert</option>
 				</select>
 			</div>
+			{/if}
 
 		</div>
 
-		<div class="OEA_zeile2">
+		{#if allowedReason.includes(anlass)}
+		<div class="OEA_zeile2">	
 			<div class="OEA_item3">
 				<div class="OEA_title2">Baujahr</div>
 				<select
@@ -148,8 +150,8 @@
 					>
 				</select>
 			</div>
-
 		</div>
+		{/if}
 
 		<div class="OEA_zeile3">
 			{#if showVerbrauchsausweis}
@@ -274,7 +276,7 @@
 
 <style lang="scss">
 	#OEA_widget {
-		@apply bg-gray-100 p-4 shadow-xl;
+		@apply bg-gray-200 p-4 shadow-xl rounded-xl;
 
 		#OEA_input {
 			@apply space-y-2;
@@ -290,8 +292,11 @@
 				.OEA_item5 {
 					@apply w-full;
 
-					.OEA_title1,
+					
 					.OEA_title2 {
+						@apply font-bold text-lg text-gray-700 p-1.5 pl-2 rounded w-full;
+					}
+					.OEA_title1 {
 						@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
 					}
 				}
@@ -302,7 +307,7 @@
 			}
 
 			.OEA_title2 {
-				@apply bg-primary;
+				@apply bg-gray-400;
 			}
 
 			.OEA_auswahl1,

src/pages/index.astro

@@ -2,30 +2,47 @@
 import Layout from "#layouts/Layout.astro";
 import ProduktVergleich from "#content/ProduktVergleich.svelte";
 import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
+import { BoxWithHeading } from "@ibcornelsen/ui";
+import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
 
 ---
 
 <Layout title="Energieausweis online erstellen - Online Energieausweis">
 <article>
 	<h1>Ihr Partner für Energieausweise und GEG Nachweise</h1>
-	<p>Ob für <span class="font-bold">Vermietung, Verkauf, Modernisierung, Neubau</span> oder zur <span class="font-bold">Vorlage bei Ihrer Bank</span> - 
-		wir erstellen den passenden <span class="font-bold">Energieausweis</span> oder <span class="font-bold">GEG-Nachweis</span> für Ihr Objekt.
-		 Mit <span class="font-bold">18 Jahren Erfahrung</span> sind wir der richtige Ansprechpartner
+	<p>Ob für <span>Vermietung, Verkauf, Modernisierung, Neubau</span> oder zur <span>Vorlage bei Ihrer Bank</span> - 
+		wir erstellen den passenden <span>Energieausweis</span> oder <span>GEG-Nachweis</span> für Ihr Objekt.
+		 Mit <span>18 Jahren Erfahrung</span> sind wir der richtige Ansprechpartner
 		 für Hauseigentümer, Bauherren, Makler und Verwalter.</p>
-		 <h2>Machen Sie hier den <span class="font-bold">online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
+		 <br>
+		 <h2>Machen Sie hier den <span>online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
 <article>		 
 		 
 	<WelcherAusweisWidget client:load/>
 	
 <article>
-	<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span class="font-bold">GEG 2024</span>. Mit uns profitieren Sie von:</h2>		 
-		<ul>
-			<li>Rechtssicherer Bearbeitung</li>
-			<li>Langjähriger Erfahrung</li>
-			<li>Schneller und preiswerter <span class="font-bold">Online Erstellung</span>.</li>
-		</ul>
+	<br>
+	<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span>GEG 2024</span>. Mit uns profitieren Sie von:</h2>		 
+	<p>
+			Rechtssicherer Bearbeitung <span class="text-green-700;">✔</span>&nbsp;&nbsp;&nbsp;
+			Langjähriger Erfahrung <span class="text-green-700;">✔</span>&nbsp;&nbsp;&nbsp;
+			Schneller <span>online Erstellung </span><span class="text-green-700;">✔</span>
+	</p>
 </article>
+<br>
+<h2>GEG gilt ab 1. Mai 2021 und löst die EnEV ab</h2>
+<TextboxCardTemplate
+					TitelName="Folgende Punkte ändern sich:"
+					BulletPoints={[
+						
+						["Erhöhte Sorgfaltspflicht bei der Erstellung der Energieausweise. Zur Einschätzung von Modernisierungsempfehlungen sind jetzt Fotos relevanter Gebäudebereiche erforderlich. Dazu zählen Dach, Fenster, Heizung und Außenwand. Diese Maßnahmen sorgen für präzisere Bewertungen und Modernisierungsvorschläge.", true],
+						["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.", true],
+						["Die lokal erzeugte Energie durch PV-Anlagen wird besser berücksichtigt. Bis zu 45 % des Jahres-Primärenergiebedarfs können durch selbst erzeugten Strom abgezogen werden. Das fördert die Nutzung erneuerbarer Energien und reduziert den Gesamtenergiebedarf.", false],
+						["Im Energieausweis müssen nun verpflichtend die CO2-Emissionen des Gebäudes angegeben werden. Diese neue Regelung erhöht die Transparenz hinsichtlich der Klimawirkung und unterstützt Eigentümer bei der Planung nachhaltiger Maßnahmen.", false],
+					]}
+				></TextboxCardTemplate>
 
+<br>
 <h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Wohngebäude:</h2>		 
 
 	<ProduktVergleich />
@@ -33,28 +50,6 @@ import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
 <h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Gewerbegebäude:</h2>		 	
 
 
-<article>
-
-	<h2 class="text-2xl font-semibold text-blue-600 mb-4">Erhöhte Sorgfaltspflichten und neue Anforderungen</h2>
-	<ul class="list-disc list-inside mb-6">
-		<li class="mb-2">
-			<span class="font-semibold">Erhöhte Sorgfaltspflicht:</span> Zur Einschätzung von Modernisierungsempfehlungen sind jetzt Fotos relevanter Gebäudebereiche erforderlich. Dazu zählen Dach, Fenster, Heizung und Außenwand. Diese Maßnahmen sorgen für präzisere Bewertungen und Modernisierungsvorschläge.
-		</li>
-		<li class="mb-2">
-			<span class="font-semibold">Primärenergiefaktoren gemäß GEG (§22):</span> Die Primärenergiefaktoren sind nun gesetzlich im Gebäudeenergiegesetz geregelt. Das schafft mehr Transparenz und Nachvollziehbarkeit bei der Ermittlung des Gebäudekennwerts. Auch die Nutzung von Biogas aus dem Erdgasnetz wird nun angemessen berücksichtigt.
-		</li>
-		<li class="mb-2">
-			<span class="font-semibold">Berücksichtigung von Photovoltaik:</span> Die lokal erzeugte Energie durch PV-Anlagen wird besser berücksichtigt. Bis zu 45 % des Jahres-Primärenergiebedarfs können durch selbst erzeugten Strom abgezogen werden. Das fördert die Nutzung erneuerbarer Energien und reduziert den Gesamtenergiebedarf.
-		</li>
-		<li class="mb-2">
-			<span class="font-semibold">Verpflichtende CO2-Angaben:</span> Im Energieausweis müssen nun verpflichtend die CO2-Emissionen des Gebäudes angegeben werden. Diese neue Regelung erhöht die Transparenz hinsichtlich der Klimawirkung und unterstützt Eigentümer bei der Planung nachhaltiger Maßnahmen.
-		</li>
-	</ul>
-
-</article>
-
-
-
 </Layout>
 
 

src/style/global.css

@@ -71,13 +71,15 @@ article {
 	hr {@apply mb-4 mt-4;}
 
 	h1 {@apply text-4xl font-normal mb-2;}
-	h2 {@apply text-2xl font-normal mb-2;}
-	h3 {@apply text-xl font-normal mb-2;}
+	h2{@apply text-2xl font-normal mb-2;}
+	h3 {@apply text-xl font-normal ml-1;}
 	
 	a {@apply text-blue-700 font-medium text-lg;}
 	p {@apply text-lg font-normal mb-2;}
-	li {@apply text-lg font-normal ;}
-	ul {@apply list-disc list-inside mb-3;}
+	li {@apply text-lg font-normal list-disc}
+	ul {@apply list-inside mb-3;}
+	span {@apply text-secondary font-bold;}
+	
 	
 }