From fcc12f5a3ce15ed1dc652db076f902acf26b2a44 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Fri, 10 Jan 2025 18:01:46 +0100
Subject: [PATCH] =?UTF-8?q?Sanierungsfahrplan=20-=20Dach,=20Heizung,=20W?=
 =?UTF-8?q?=C3=A4nde=20fertiggestellt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sanierungsfahrplan/hausIconDach.svg       |   2 +-
 .../A12NutzenergiebedarfHeizung.svelte        |   4 +-
 .../SanierungsFahrplanBauteilTemplate.svelte  | 103 ---------------
 .../SanierungsFahrplanDachTemplate.svelte     | 103 +++++++++++++++
 .../SanierungsFahrplanHeizungTemplate.svelte  | 123 ++++++++++++++++++
 .../SanierungsFahrplanIstTemplate.svelte      |  70 +++++++++-
 .../SanierungsFahrplanWandTemplate.svelte     | 103 +++++++++++++++
 .../funktionMonatlicherBelastungsgrad.ts      |   2 +-
 src/pages/sanierungsfahrplan/dach/index.astro |   8 +-
 src/pages/sanierungsfahrplan/haus/index.astro |  19 +++
 .../sanierungsfahrplan/wände/index.astro      |  19 +++
 11 files changed, 445 insertions(+), 111 deletions(-)
 create mode 100644 src/components/design/content/SanierungsFahrplanDachTemplate.svelte
 create mode 100644 src/components/design/content/SanierungsFahrplanHeizungTemplate.svelte
 create mode 100644 src/components/design/content/SanierungsFahrplanWandTemplate.svelte
 create mode 100644 src/pages/sanierungsfahrplan/haus/index.astro
 create mode 100644 src/pages/sanierungsfahrplan/wände/index.astro

diff --git a/public/images/sanierungsfahrplan/hausIconDach.svg b/public/images/sanierungsfahrplan/hausIconDach.svg
index 6038bc0d..91f2a7b8 100644
--- a/public/images/sanierungsfahrplan/hausIconDach.svg
+++ b/public/images/sanierungsfahrplan/hausIconDach.svg
@@ -126,7 +126,7 @@
     <path
        id="path326"
        d="m 0,0 c 0,0 -9.582,0 -9.582,-9.583 v -65.648 h 113.179 v 65.648 c 0,0 0,9.583 -9.583,9.583 z"
-       style="fill:#b01419;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       style="fill:#b11c0cff;fill-opacity:1;fill-rule:nonzero;stroke:none"
        transform="matrix(0.35277776,0,0,-0.35277776,90.157792,121.44375)"
        clip-path="url(#clipPath327)" />
     <path
diff --git a/src/components/Tabellen/A12NutzenergiebedarfHeizung.svelte b/src/components/Tabellen/A12NutzenergiebedarfHeizung.svelte
index 5804315f..83c151b8 100644
--- a/src/components/Tabellen/A12NutzenergiebedarfHeizung.svelte
+++ b/src/components/Tabellen/A12NutzenergiebedarfHeizung.svelte
@@ -4,12 +4,12 @@
 	export let ausweis: BedarfsausweisWohnenClient;
 	export let gebaeude_aufnahme: GebaeudeAufnahmeClient;
 
-	import { BerechnungMonatlicherBelastungsgradT9 } from "#lib/Berechnungen/BedarfsausweisWohnen/BerechnungMonatlicherBelastungsgradT9.js";
+	import { funktionMonatlicherBelastungsgrad } from "#lib/Berechnungen/BedarfsausweisWohnen/funktionMonatlicherBelastungsgrad.js";
 
 	let interpolatedValues: { month: string, interpolatedValue: number }[] = [];
  
   $: {
-        const result = BerechnungMonatlicherBelastungsgradT9();
+        const result = funktionMonatlicherBelastungsgrad();
         interpolatedValues = result;
     }
 </script>
diff --git a/src/components/design/content/SanierungsFahrplanBauteilTemplate.svelte b/src/components/design/content/SanierungsFahrplanBauteilTemplate.svelte
index a1d1e566..e69de29b 100644
--- a/src/components/design/content/SanierungsFahrplanBauteilTemplate.svelte
+++ b/src/components/design/content/SanierungsFahrplanBauteilTemplate.svelte
@@ -1,103 +0,0 @@
-<div class="bauteilBox">
-    <div class="farbBox">
-      <div class="labelBox">Farbklasse</div>
-        <div class="farbe"><div class="farbBalkenEins"></div></div>
-        <div class="farbe"><div class="farbBalkenZwei"></div></div>
-        <div class="farbe"><div class="farbBalkenDrei"></div></div>
-        <div class="farbe"><div class="farbBalkenVier"></div></div>
-        <div class="farbe"><div class="farbBalkenFuenf"></div></div>
-        <div class="farbe"><div class="farbBalkenAcht"></div></div>
-        <div class="farbe"><div class="farbBalkenNeun"></div></div>
-      </div>
-      <div class="inhaltsBox">
-        <div class="labelBox">U-Wert [W/(m²K)] / Beschreibung</div>
-        <div class="textZeileEins">≤ 0,12 / Sparrendach geneigt und stark hinterlüftet mit 20cm PUR/PIR-Hartschaum Aufsparrendämmung (hocheffiziente Dämmung mit WLG 0,024)</div>
-        <div class="textZeileZwei">≤ 0,14 / Sparrendach geneigt und stark hinterlüftet mit 18cm PUR/PIR-Hartschaum Aufsparrendämmung (hocheffiziente Dämmung mit WLG 0,024)</div>
-        <div class="textZeileDrei">≤ 0,24 / Sparrendach geneigt und hinterlüftet mit 18cm mineralischer Zwischensparren- <br>dämmung und 5 cm Untersparrendämmung (Standarddämmung mit WLG 0,04)</div>
-        <div class="textZeileVier">≤ 0,30 / Sparrendach geneigt und hinterlüftet mit 18cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
-        <div class="textZeileFuenf">≤ 0,50 / Sparrendach geneigt und hinterlüftet mit 12cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
-        <div class="textZeileAcht">≤ 0,80 / Sparrendach geneigt und hinterlüftet mit 5cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
-        <div class="textZeileNeun">> 0,80 / Sparrendach geneigt und hinterlüftet ungedämmt oder weniger als 5cm Zwischensparrendämmung (Standarddämmung mit WLG 0,04)</div>
-      </div>
-  </div>
-  
-<style lang="scss">
-
-.bauteilBox {
-  @apply w-2/3 grid gap-2 items-stretch border-2 p-4 mt-8;
-  grid-template-columns: 1fr 5fr; /* 1/6 for farbBox and 5/6 for inhaltsBox */
-}
-
-.farbe {
-  @apply flex justify-center items-center;
-}
-
-.labelBox {
-  @apply flex justify-start items-center text-lg font-bold;
-}
-
-.farbBalkenEins {
-  @apply flex w-full bg-effizienzFarbe-1 rounded-3xl h-6;
-}
-
-.farbBalkenZwei {
-  @apply flex w-full bg-effizienzFarbe-2 rounded-3xl h-6;
-}
-
-.farbBalkenDrei {
-  @apply flex w-full bg-effizienzFarbe-3 rounded-3xl h-6;
-}
-
-.farbBalkenVier {
-  @apply flex w-full bg-effizienzFarbe-4 rounded-3xl h-6;
-}
-
-.farbBalkenFuenf {
-  @apply flex w-full bg-effizienzFarbe-5 rounded-3xl h-6;
-}
-
-.farbBalkenAcht {
-  @apply flex w-full bg-effizienzFarbe-8 rounded-3xl h-6;
-}
-
-.farbBalkenNeun {
-  @apply flex w-full bg-effizienzFarbe-9 rounded-3xl h-6;
-}
-
-.inhaltsBox {
-  @apply grid grid-rows-8 gap-3 ml-3 pb-3;
-}
-
-.farbBox {
-  @apply grid grid-rows-8 gap-3 pb-3;
-}
-
-.textZeileEins {
-  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-1;
-}
-
-.textZeileZwei {
-  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-2;
-}
-
-.textZeileDrei {
-  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-3;
-}
-
-.textZeileVier {
-  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-4;
-}
-
-.textZeileFuenf {
-  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-5;
-}
-
-.textZeileAcht {
-  @apply flex justify-start items-center bg-white p-1 border-2 border-effizienzFarbe-8;
-}
-
-.textZeileNeun {
-  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-9;
-}
-
-</style>
\ No newline at end of file
diff --git a/src/components/design/content/SanierungsFahrplanDachTemplate.svelte b/src/components/design/content/SanierungsFahrplanDachTemplate.svelte
new file mode 100644
index 00000000..8845fec6
--- /dev/null
+++ b/src/components/design/content/SanierungsFahrplanDachTemplate.svelte
@@ -0,0 +1,103 @@
+<div class="bauteilBox">
+    <div class="farbBox">
+      <div class="labelBox">Farbklasse</div>
+        <div class="farbe"><div class="farbBalkenEins"></div></div>
+        <div class="farbe"><div class="farbBalkenZwei"></div></div>
+        <div class="farbe"><div class="farbBalkenDrei"></div></div>
+        <div class="farbe"><div class="farbBalkenVier"></div></div>
+        <div class="farbe"><div class="farbBalkenFuenf"></div></div>
+        <div class="farbe"><div class="farbBalkenAcht"></div></div>
+        <div class="farbe"><div class="farbBalkenNeun"></div></div>
+      </div>
+      <div class="inhaltsBox">
+        <div class="labelBox">U-Wert [W/(m²K)] / Beschreibung</div>
+        <div class="textZeileEins">≤ 0,12 / Sparrendach geneigt und stark hinterlüftet mit 20cm PUR/PIR-Hartschaum Aufsparrendämmung (hocheffiziente Dämmung mit WLG 0,024)</div>
+        <div class="textZeileZwei">≤ 0,14 / Sparrendach geneigt und stark hinterlüftet mit 18cm PUR/PIR-Hartschaum Aufsparrendämmung (hocheffiziente Dämmung mit WLG 0,024)</div>
+        <div class="textZeileDrei">≤ 0,24 / Sparrendach geneigt und hinterlüftet mit 18cm mineralischer Zwischensparren- <br>dämmung und 5 cm Untersparrendämmung (Standarddämmung mit WLG 0,04)</div>
+        <div class="textZeileVier">≤ 0,30 / Sparrendach geneigt und hinterlüftet mit 18cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
+        <div class="textZeileFuenf">≤ 0,50 / Sparrendach geneigt und hinterlüftet mit 12cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
+        <div class="textZeileAcht">≤ 0,80 / Sparrendach geneigt und hinterlüftet mit 5cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
+        <div class="textZeileNeun">> 0,80 / Sparrendach geneigt und hinterlüftet ungedämmt oder weniger als 5cm Zwischensparrendämmung (Standarddämmung mit WLG 0,04)</div>
+      </div>
+  </div>
+  
+<style lang="scss">
+
+.bauteilBox {
+  @apply grid gap-2 items-stretch p-4 mt-8;
+  grid-template-columns: 1fr 5fr; /* 1/6 for farbBox and 5/6 for inhaltsBox */
+}
+
+.farbe {
+  @apply flex justify-center items-center;
+}
+
+.labelBox {
+  @apply flex justify-start items-center text-lg font-bold;
+}
+
+.farbBalkenEins {
+  @apply flex w-full bg-effizienzFarbe-1 rounded-3xl h-6;
+}
+
+.farbBalkenZwei {
+  @apply flex w-full bg-effizienzFarbe-2 rounded-3xl h-6;
+}
+
+.farbBalkenDrei {
+  @apply flex w-full bg-effizienzFarbe-3 rounded-3xl h-6;
+}
+
+.farbBalkenVier {
+  @apply flex w-full bg-effizienzFarbe-4 rounded-3xl h-6;
+}
+
+.farbBalkenFuenf {
+  @apply flex w-full bg-effizienzFarbe-5 rounded-3xl h-6;
+}
+
+.farbBalkenAcht {
+  @apply flex w-full bg-effizienzFarbe-8 rounded-3xl h-6;
+}
+
+.farbBalkenNeun {
+  @apply flex w-full bg-effizienzFarbe-9 rounded-3xl h-6;
+}
+
+.inhaltsBox {
+  @apply grid grid-rows-8 gap-3 ml-3 pb-3;
+}
+
+.farbBox {
+  @apply grid grid-rows-8 gap-3 pb-3;
+}
+
+.textZeileEins {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-1;
+}
+
+.textZeileZwei {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-2;
+}
+
+.textZeileDrei {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-3;
+}
+
+.textZeileVier {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-4;
+}
+
+.textZeileFuenf {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-5;
+}
+
+.textZeileAcht {
+  @apply flex justify-start items-center bg-white p-1 border-2 border-effizienzFarbe-8;
+}
+
+.textZeileNeun {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-9;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/design/content/SanierungsFahrplanHeizungTemplate.svelte b/src/components/design/content/SanierungsFahrplanHeizungTemplate.svelte
new file mode 100644
index 00000000..cae915c5
--- /dev/null
+++ b/src/components/design/content/SanierungsFahrplanHeizungTemplate.svelte
@@ -0,0 +1,123 @@
+<div class="bauteilBox">
+    <div class="farbBox">
+      <div class="labelBox">Farbklasse</div>
+        <div class="farbe"><div class="farbBalkenEins"></div></div>
+        <div class="farbe"><div class="farbBalkenZwei"></div></div>
+        <div class="farbe"><div class="farbBalkenDrei"></div></div>
+        <div class="farbe"><div class="farbBalkenVier"></div></div>
+        <div class="farbe"><div class="farbBalkenFuenf"></div></div>
+        <div class="farbe"><div class="farbBalkenSechs"></div></div>
+        <div class="farbe"><div class="farbBalkenSieben"></div></div>
+        <div class="farbe"><div class="farbBalkenAcht"></div></div>
+        <div class="farbe"><div class="farbBalkenNeun"></div></div>
+      </div>
+      <div class="inhaltsBox">
+        <div class="labelBox">Effizienzzahl / Beschreibung</div>
+        <div class="textZeileEins">&#060; 0,4 / Hohe Effizienz / überwiegend erneuerbare Energieträger</div>
+        <div class="textZeileZwei">&#060; 0,7 / Hohe Effizienz / erneuerbare und fossile Energieträger</div>
+        <div class="textZeileDrei">&#060; 1,0 / Moderne Wärmeerzeuger mit fossilen Energieträgern und zusätzlich erneuerbaren Energien</div>
+        <div class="textZeileVier">&#060; 1,1 / Moderne Wärmeerzeuger mit fossilen Energieträgern</div>
+        <div class="textZeileFuenf">&#060; 1,2 / Wärmeerzeuger mit fossilen Energieträgern</div>
+        <div class="textZeileSechs">&#060; 1,3 / Mindestanforderung an neue Heizkessel</div>
+        <div class="textZeileSieben">&#060; 1,5 / Nicht mehr zeitgemäße Technik</div>
+        <div class="textZeileAcht">&#060; 1,6 / Ineffiziente Wärmeerzeuger</div>
+        <div class="textZeileNeun">> 1,6 / Ineffiziente Wärmeerzeuger mit sehr hohen Verlusten</div>
+      </div>
+  </div>
+  
+<style lang="scss">
+
+.bauteilBox {
+  @apply grid gap-2 items-stretch p-4 mt-8;
+  grid-template-columns: 1fr 5fr; /* 1/6 for farbBox and 5/6 for inhaltsBox */
+}
+
+.farbe {
+  @apply flex justify-center items-center;
+}
+
+.labelBox {
+  @apply flex justify-start items-center text-lg font-bold;
+}
+
+.farbBalkenEins {
+  @apply flex w-full bg-effizienzFarbe-1 rounded-3xl h-6;
+}
+
+.farbBalkenZwei {
+  @apply flex w-full bg-effizienzFarbe-2 rounded-3xl h-6;
+}
+
+.farbBalkenDrei {
+  @apply flex w-full bg-effizienzFarbe-3 rounded-3xl h-6;
+}
+
+.farbBalkenVier {
+  @apply flex w-full bg-effizienzFarbe-4 rounded-3xl h-6;
+}
+
+.farbBalkenFuenf {
+  @apply flex w-full bg-effizienzFarbe-5 rounded-3xl h-6;
+}
+
+.farbBalkenSechs {
+  @apply flex w-full bg-effizienzFarbe-6 rounded-3xl h-6;
+}
+
+.farbBalkenSieben {
+  @apply flex w-full bg-effizienzFarbe-7 rounded-3xl h-6;
+}
+
+.farbBalkenAcht {
+  @apply flex w-full bg-effizienzFarbe-8 rounded-3xl h-6;
+}
+
+.farbBalkenNeun {
+  @apply flex w-full bg-effizienzFarbe-9 rounded-3xl h-6;
+}
+
+.inhaltsBox {
+  @apply grid grid-rows-10 gap-3 ml-3 pb-3;
+}
+
+.farbBox {
+  @apply grid grid-rows-10 gap-3 pb-3;
+}
+
+.textZeileEins {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-1;
+}
+
+.textZeileZwei {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-2;
+}
+
+.textZeileDrei {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-3;
+}
+
+.textZeileVier {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-4;
+}
+
+.textZeileFuenf {
+  @apply flex justify-start items-center bg-white p-1 border-2 border-effizienzFarbe-5;
+}
+
+.textZeileSechs {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-6;
+}
+
+.textZeileSieben {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-7;
+}
+
+.textZeileAcht {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-8;
+}
+
+.textZeileNeun {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-9;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/design/content/SanierungsFahrplanIstTemplate.svelte b/src/components/design/content/SanierungsFahrplanIstTemplate.svelte
index 95030ad2..e32f9630 100644
--- a/src/components/design/content/SanierungsFahrplanIstTemplate.svelte
+++ b/src/components/design/content/SanierungsFahrplanIstTemplate.svelte
@@ -1,3 +1,23 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import SanierungsFahrplanDachTemplate from './SanierungsFahrplanDachTemplate.svelte';
+  import SanierungsFahrplanWandTemplate from './SanierungsFahrplanWandTemplate.svelte';
+  import SanierungsFahrplanHeizungTemplate from './SanierungsFahrplanHeizungTemplate.svelte';
+
+  let showPopup = false;
+  let popupContent = null;
+
+  function openPopup(content) {
+    popupContent = content;
+    showPopup = true;
+  }
+
+  function closePopup() {
+    showPopup = false;
+    popupContent = null;
+  }
+</script>
+
 <div class="beam">
   <img class="skalaBeam" src="/images/sanierungsfahrplan/skalaEnergieEffizienz.svg" alt="Skala Energieeffizienz"/>
 </div>
@@ -5,16 +25,19 @@
 <div class="wrapper">
     <!-- Wände -->
     <div class="card">
+      <button class="hausIcon-button" on:click={() => openPopup(SanierungsFahrplanWandTemplate)}>
       <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWaende.svg" alt="Hausiconwände"/>
+      </button>
       <div class="card-subtitle">*inklusive Kellerwänden</div>
     </div>
     <!-- Dach -->
     <div class="card" id="card">
+      <button class="hausIcon-button" on:click={() => openPopup(SanierungsFahrplanDachTemplate)}>
         <img
-          href="/sanierungsfahrplan/dach"
           class="hausIcon cursor-pointer"
           src="/images/sanierungsfahrplan/hausIconDach.svg"
           alt="Hausicondach"/>
+      </button>
       <div class="card-subtitle">oberer Gebäudeabschluss</div>
     </div>
     <!-- Lüftung -->
@@ -44,7 +67,9 @@
     </div>
     <!-- Heizung -->
     <div class="card">
+      <button class="hausIcon-button" on:click={() => openPopup(SanierungsFahrplanHeizungTemplate)}>
       <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconHeizung.svg" alt="Hausiconheizung"/>
+      </button>
       <div class="card-subtitle"></div>
     </div>
     <!-- Warmwasserverteilung -->
@@ -56,6 +81,26 @@
     </div>
   </div>
 
+  {#if showPopup}
+  <div class="popup-overlay">
+    <div class="popup-content" on:keydown|stopPropagation on:keyup|stopPropagation on:keypress|stopPropagation>
+      <button class="close-button" on:click={closePopup}>X</button>
+      {#if popupContent === SanierungsFahrplanDachTemplate}
+      <div class="popup-title">Dach</div>
+      <SanierungsFahrplanDachTemplate {closePopup} />
+    {/if}
+    {#if popupContent === SanierungsFahrplanWandTemplate}
+      <div class="popup-title">Wände</div>
+      <SanierungsFahrplanWandTemplate {closePopup} />
+    {/if}
+    {#if popupContent === SanierungsFahrplanHeizungTemplate}
+    <div class="popup-title">Heizung</div>
+    <SanierungsFahrplanHeizungTemplate {closePopup} />
+    {/if}
+    </div>
+  </div>
+{/if}
+
 <style lang="scss">
 
 .beam {
@@ -67,7 +112,7 @@
 
 
 .wrapper {
-  @apply grid grid-cols-3 gap-10 items-center justify-center px-10 m-6 py-10;
+  @apply grid grid-cols-3 gap-12 items-center justify-center px-10 m-6 py-10;
 }
 
 .card {
@@ -82,4 +127,25 @@
 .hausIcon {
   @apply w-full;}
 
+
+.popup-overlay {
+  @apply fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center;
+}
+
+.popup-content {
+  @apply w-1/2 bg-white p-4 rounded-lg shadow-lg relative;
+}
+
+.close-button {
+  @apply absolute top-3 right-3 bg-secondary text-white rounded-full p-2 cursor-pointer;
+}
+
+.popup-title {
+  @apply absolute top-6 left-8 text-3xl font-bold;
+}
+
+.hausIcon-button {
+  @apply w-full bg-transparent border-none p-0 m-0 cursor-pointer;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/design/content/SanierungsFahrplanWandTemplate.svelte b/src/components/design/content/SanierungsFahrplanWandTemplate.svelte
new file mode 100644
index 00000000..a1f0dabd
--- /dev/null
+++ b/src/components/design/content/SanierungsFahrplanWandTemplate.svelte
@@ -0,0 +1,103 @@
+<div class="bauteilBox">
+    <div class="farbBox">
+      <div class="labelBox">Farbklasse</div>
+        <div class="farbe"><div class="farbBalkenEins"></div></div>
+        <div class="farbe"><div class="farbBalkenZwei"></div></div>
+        <div class="farbe"><div class="farbBalkenDrei"></div></div>
+        <div class="farbe"><div class="farbBalkenVier"></div></div>
+        <div class="farbe"><div class="farbBalkenFuenf"></div></div>
+        <div class="farbe"><div class="farbBalkenAcht"></div></div>
+        <div class="farbe"><div class="farbBalkenNeun"></div></div>
+      </div>
+      <div class="inhaltsBox">
+        <div class="labelBox">U-Wert [W/(m²K)] / Beschreibung</div>
+        <div class="textZeileEins">≤ 0,15 / Gasbeton-Blockstein 30 cm mit 16 cm PUR/PIR-Hartschaum (hocheffiziente Dämmung mit WLG 0,028)</div>
+        <div class="textZeileZwei">≤ 0,20 / Gasbeton-Blockstein 30 cm mit 14 cm mineralischer Außendämung (WLG 0,035)</div>
+        <div class="textZeileDrei">≤ 0,24 / Gasbeton-Blockstein 30 cm mit 12 cm mineralischer Außendämung (WLG 0,04)</div>
+        <div class="textZeileVier">≤ 0,35 / Gasbeton-Blockstein 30 cm mit 10 cm mineralischer Außendämung (WLG 0,04)</div>
+        <div class="textZeileFuenf">≤ 0,50 / Gasbeton-Blockstein 30 cm mit 5 cm mineralischer Innendämung (WLG 0,04)</div>
+        <div class="textZeileAcht">≤ 0,80 / Gasbeton-Blockstein 30 cm, Dämmputz</div>
+        <div class="textZeileNeun">> 0,80 / Gasbeton-Blockstein 30 cm</div>
+      </div>
+  </div>
+  
+<style lang="scss">
+
+.bauteilBox {
+  @apply grid gap-2 items-stretch p-4 mt-8;
+  grid-template-columns: 1fr 5fr; /* 1/6 for farbBox and 5/6 for inhaltsBox */
+}
+
+.farbe {
+  @apply flex justify-center items-center;
+}
+
+.labelBox {
+  @apply flex justify-start items-center text-lg font-bold;
+}
+
+.farbBalkenEins {
+  @apply flex w-full bg-effizienzFarbe-1 rounded-3xl h-6;
+}
+
+.farbBalkenZwei {
+  @apply flex w-full bg-effizienzFarbe-2 rounded-3xl h-6;
+}
+
+.farbBalkenDrei {
+  @apply flex w-full bg-effizienzFarbe-3 rounded-3xl h-6;
+}
+
+.farbBalkenVier {
+  @apply flex w-full bg-effizienzFarbe-4 rounded-3xl h-6;
+}
+
+.farbBalkenFuenf {
+  @apply flex w-full bg-effizienzFarbe-5 rounded-3xl h-6;
+}
+
+.farbBalkenAcht {
+  @apply flex w-full bg-effizienzFarbe-8 rounded-3xl h-6;
+}
+
+.farbBalkenNeun {
+  @apply flex w-full bg-effizienzFarbe-9 rounded-3xl h-6;
+}
+
+.inhaltsBox {
+  @apply grid grid-rows-8 gap-3 ml-3 pb-3;
+}
+
+.farbBox {
+  @apply grid grid-rows-8 gap-3 pb-3;
+}
+
+.textZeileEins {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-1;
+}
+
+.textZeileZwei {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-2;
+}
+
+.textZeileDrei {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-3;
+}
+
+.textZeileVier {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-4;
+}
+
+.textZeileFuenf {
+  @apply flex justify-start items-center bg-white p-1 border-2 border-effizienzFarbe-5;
+}
+
+.textZeileAcht {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-8;
+}
+
+.textZeileNeun {
+  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-9;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/lib/Berechnungen/BedarfsausweisWohnen/funktionMonatlicherBelastungsgrad.ts b/src/lib/Berechnungen/BedarfsausweisWohnen/funktionMonatlicherBelastungsgrad.ts
index e4f6a77f..bd9e35d3 100644
--- a/src/lib/Berechnungen/BedarfsausweisWohnen/funktionMonatlicherBelastungsgrad.ts
+++ b/src/lib/Berechnungen/BedarfsausweisWohnen/funktionMonatlicherBelastungsgrad.ts
@@ -151,4 +151,4 @@ function crossInterpolate(heizlast: number, zeitkonstane: number, monat: string)
 	return interpolate(zeitkonstane)
 }
 
-console.log(crossInterpolate(0, 100, "Januar"));
\ No newline at end of file
+console.log(crossInterpolate(25, 90, "Januar"));
\ No newline at end of file
diff --git a/src/pages/sanierungsfahrplan/dach/index.astro b/src/pages/sanierungsfahrplan/dach/index.astro
index ded89dcf..bc7e9363 100644
--- a/src/pages/sanierungsfahrplan/dach/index.astro
+++ b/src/pages/sanierungsfahrplan/dach/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "#layouts/Layout.astro";
-import SanierungsFahrplanBauteilTemplate from "#components/design/content/SanierungsFahrplanBauteilTemplate.svelte";
+import SanierungsFahrplanDachTemplate from "#components/design/content/SanierungsFahrplanDachTemplate.svelte";
 
 ---
 
@@ -10,6 +10,10 @@ import SanierungsFahrplanBauteilTemplate from "#components/design/content/Sanier
 
     <h2>Überblick zum energetischen Istzustand des Daches ihres Hauses</h2>
 
-    <SanierungsFahrplanBauteilTemplate />
+    <hr>
+
+    <SanierungsFahrplanDachTemplate />
+
+    <hr>
 
 </Layout>
\ No newline at end of file
diff --git a/src/pages/sanierungsfahrplan/haus/index.astro b/src/pages/sanierungsfahrplan/haus/index.astro
new file mode 100644
index 00000000..d9d37753
--- /dev/null
+++ b/src/pages/sanierungsfahrplan/haus/index.astro
@@ -0,0 +1,19 @@
+---
+import Layout from "#layouts/Layout.astro";
+import SanierungsFahrplanHeizungTemplate from "#components/design/content/SanierungsFahrplanHeizungTemplate.svelte";
+
+---
+
+<Layout title="Sanierungsfahrplan - Heizung">
+
+    <h1>Heizung - energetischer Istzustand</h1>
+
+    <h2>Überblick zum energetischen Istzustand Ihrer Heizung</h2>
+
+    <hr>
+
+    <SanierungsFahrplanHeizungTemplate />
+
+    <hr>
+
+</Layout>
\ No newline at end of file
diff --git a/src/pages/sanierungsfahrplan/wände/index.astro b/src/pages/sanierungsfahrplan/wände/index.astro
new file mode 100644
index 00000000..1ef506be
--- /dev/null
+++ b/src/pages/sanierungsfahrplan/wände/index.astro
@@ -0,0 +1,19 @@
+---
+import Layout from "#layouts/Layout.astro";
+import SanierungsFahrplanWandTemplate from "#components/design/content/SanierungsFahrplanWandTemplate.svelte";
+
+---
+
+<Layout title="Sanierungsfahrplan - Wände">
+
+    <h1>Wände - energetischer Istzustand</h1>
+
+    <h2>Überblick zum energetischen Istzustand der Wände ihres Hauses</h2>
+
+    <hr>
+
+    <SanierungsFahrplanWandTemplate />
+
+    <hr>
+
+</Layout>
\ No newline at end of file