Tooltips Verbrauchsausweis, Formularfelder getauscht, Funktion Belastungsgrad

src/pages/geg-2024/index.astro

@@ -6,6 +6,7 @@ import Layout from "#layouts/Layout.astro";
 
 <Layout title="GEG 2024">
 
+
 <h1>GEG 2024 - Formelsammlung</h1>
 
 <div class="container mx-auto max-w-screen-md py-8">
@@ -115,4 +116,68 @@ import Layout from "#layouts/Layout.astro";
     </section>
   </div>
 
+  <div class="formula-container">
+    <h1>Monatlicher Belastungsgrad T90</h1>
+    <p>Die folgende Formel berechnet den monatlichen Belastungsgrad aus Tabelle 17 (Zeitkonstante 90):</p>
+    <div class="formula">
+      <div>
+        <span>monatlicherBelastungsgradT90</span> = <span>wertZwei</span> -
+      </div>
+      <div class="fraction">
+        <span class="numerator">
+          (<span>wertZwei</span> - <span>wertEins</span>) &times; (<span>maxHeizlast</span> - <span>maxHeizlastEins</span>)
+        </span>
+        <span class="denominator">
+          <span>maxHeizlastZwei</span> - <span>maxHeizlastEins</span>
+        </span>
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    .formula-container {
+      background: #fff;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      max-width: 800px;
+      margin: 20px auto;
+      font-family: Arial, sans-serif;
+      line-height: 1.6;
+    }
+  
+    h1 {
+      text-align: center;
+      color: #333;
+    }
+  
+    .formula {
+      font-size: 1.2rem;
+      line-height: 2rem;
+      margin-top: 20px;
+    }
+  
+    .fraction {
+      display: inline-block;
+      text-align: center;
+      vertical-align: middle;
+    }
+  
+    .fraction .numerator {
+      border-bottom: 1px solid #000;
+      display: block;
+      padding-bottom: 5px;
+      margin-bottom: 5px;
+    }
+  
+    .fraction .denominator {
+      display: block;
+    }
+  
+    span {
+      font-family: "Courier New", Courier, monospace;
+    }
+  </style>
+
 </Layout>