From 1aa586308458aa4d6281f7634361a0d74638f8b7 Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:10:43 +0100
Subject: [PATCH] Test

---
 .../design/content/banner-saeule.svelte       | 294 ++++++++++--------
 1 file changed, 156 insertions(+), 138 deletions(-)

diff --git a/src/components/design/content/banner-saeule.svelte b/src/components/design/content/banner-saeule.svelte
index ff36aa64..0422405b 100644
--- a/src/components/design/content/banner-saeule.svelte
+++ b/src/components/design/content/banner-saeule.svelte
@@ -115,7 +115,7 @@
 
     <div class="saeule">
         <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
+            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
             <div class="name">Bedarfsausweis<br>Gewerbe</div> 
         </div>   
         <div class="orange">
@@ -151,158 +151,176 @@
             w-full h-full mb-4"/>
       </div>
     </div>
-    <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
-      <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-0">
-        einfach
+    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
+      <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
+        <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
+          einfach
+          <br/>
+        </p>
+      </div>
+      <div class="lg:w-full flex flex-row w-full items-end h-auto">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-red-800 mt-4 font-medium decoration-black">✔</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">
+              Nicht zulässig bei unsanierten
+              <br/>
+              Gebäuden die vor 1978 gebaut
+              <br/>
+              wurden und weniger als 5
+              <br/>
+              Wohneinheiten haben.
+            </span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-yellow-600 mt-4 font-medium">✘</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">
+              Für bauliche und energetische
+              <br/>
+              Maßnahmen ungeeignet.
+            </span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">
+              Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
+              <br/>
+            </span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
+        </div>
+      </div>
+    </div>
+    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-600 h-auto justify-center
+        items-center">
+      <p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
+        ab {PRICES.BedarfsausweisWohnen[0]} inkl. MwSt
         <br/>
       </p>
     </div>
-    <div class="lg:w-full flex flex-row w-full items-end h-auto">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-black mt-4 font-medium decoration-black">✔</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">
-            Nicht zulässig bei unsanierten
-            <br/>
-            Gebäuden die vor 1978 gebaut
-            <br/>
-            wurden und weniger als 5
-            <br/>
-            Wohneinheiten haben.
-          </span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">
-            Für bauliche und energetische
-            <br/>
-            Maßnahmen ungeeignet.
-          </span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">
-            Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
-            <br/>
-          </span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
-      </div>
-    </div>
   </div>
   <div class="flex lg:flex-col flex-col w-1/2 rounded-none shadow-* ml-4 pl-4 pt-4 pr-4 pb-4 border-0">
     <div class="lg:w-full w-full rounded-2xl shadow-xl mb-6 text-white bg-indigo-800 h-auto justify-center
         items-center">
       <p class="mb-4 text-2xl text-center text-white mt-4 font-bold">Bedarfsausweis Wohngebäude</p>
       <div class="lg:h-1/2 lg:w-1/2 flex flex-wrap w-1/2 mb-6 bg-indigo-800 h-1/2 ml-8">
-        <img src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
+        <img src="https://ibcornelsen.de/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
             w-full h-full mb-4"/>
       </div>
     </div>
-    <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
-      <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-0">
-        fundiert
+    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
+      <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
+        <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
+          fundiert
+          <br/>
+        </p>
+      </div>
+      <div class="lg:w-full flex flex-row w-full items-end h-auto">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-red-800 mt-4 font-medium decoration-black">✔</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">
+              Nicht zulässig bei unsanierten
+              <br/>
+              Gebäuden die vor 1978 gebaut
+              <br/>
+              wurden und weniger als 5
+              <br/>
+              Wohneinheiten haben.
+            </span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-yellow-600 mt-4 font-medium">✘</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">
+              Für bauliche und energetische
+              <br/>
+              Maßnahmen ungeeignet.
+            </span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
+        </div>
+      </div>
+      <div class="lg:w-full flex flex-row items-end w-full">
+        <div class="lg:w-5/6 w-5/6">
+          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
+            <span class="s-jv164Nce4e8Q">
+              Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
+              <br/>
+            </span>
+          </p>
+        </div>
+        <div class="lg:w-1/6 items-end w-1/6 h-16">
+          <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
+        </div>
+      </div>
+    </div>
+    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-600 h-auto justify-center
+        items-center">
+      <p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
+        ab {PRICES.BedarfsausweisWohnen[0]} inkl. MwSt
         <br/>
       </p>
     </div>
-    <div class="lg:w-full flex flex-row w-full items-end h-auto">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-black mt-4 font-medium decoration-black">✔</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">
-            Nicht zulässig bei unsanierten
-            <br/>
-            Gebäuden die vor 1978 gebaut
-            <br/>
-            wurden und weniger als 5
-            <br/>
-            Wohneinheiten haben.
-          </span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">
-            Für bauliche und energetische
-            <br/>
-            Maßnahmen ungeeignet.
-          </span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
-      </div>
-    </div>
-    <div class="lg:w-full flex flex-row items-end w-full">
-      <div class="lg:w-5/6 w-5/6">
-        <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-          <span class="s-jv164Nce4e8Q">
-            Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
-            <br/>
-          </span>
-        </p>
-      </div>
-      <div class="lg:w-1/6 items-end w-1/6 h-16">
-        <p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
-      </div>
-    </div>
   </div>
 </div>