Sanierungsfahrplan - Dach, Heizung, Wände fertiggestellt

2025-01-10 18:01:46 +01:00
parent 9640b6a99f
commit fcc12f5a3c
11 changed files with 445 additions and 111 deletions
--- 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
--- 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>
--- 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>
--- a/src/components/design/content/SanierungsFahrplanDachTemplate.svelte
+++ 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>
--- a/src/components/design/content/SanierungsFahrplanHeizungTemplate.svelte
+++ 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>
--- 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>
--- a/src/components/design/content/SanierungsFahrplanWandTemplate.svelte
+++ 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>
--- 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"));
+console.log(crossInterpolate(25, 90, "Januar"));
--- 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>
--- a/src/pages/sanierungsfahrplan/haus/index.astro
+++ 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>
--- a/src/pages/sanierungsfahrplan/wände/index.astro
+++ 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>