From 9d0e64a548b0716372c98bdd4aa7ef55c154661a Mon Sep 17 00:00:00 2001
From: Robert Jagtiani <all@robert-jagtiani.de>
Date: Sun, 1 Dec 2024 16:05:40 +0100
Subject: [PATCH] sauelen und header

---
 public/images/header/logo-IBC-big.svg         |  32 ++--
 .../design/content/banner-saeule.svelte       | 172 ++++++++----------
 src/components/design/header/Header.astro     |  73 ++++----
 .../design/sidebars/cards/card-login.svelte   |  11 +-
 src/lib/constants.ts                          |   2 +-
 src/pages/index.astro                         |   2 +-
 tailwind.config.cjs                           |   3 +-
 7 files changed, 143 insertions(+), 152 deletions(-)

diff --git a/public/images/header/logo-IBC-big.svg b/public/images/header/logo-IBC-big.svg
index 34378f2e..b49c1d1d 100644
--- a/public/images/header/logo-IBC-big.svg
+++ b/public/images/header/logo-IBC-big.svg
@@ -1,30 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="uuid-de1e7f63-0c42-470b-9cfb-9abb297e0f12" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 111.4 123.9">
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 143 163.6">
   <!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142)  -->
   <defs>
     <style>
       .st0 {
-        fill: #3d46a3;
-      }
-
-      .st0, .st1 {
-        fill-rule: evenodd;
-      }
-
-      .st2 {
-        fill: #3b459d;
+        display: none;
+        fill: #878787;
       }
 
       .st1 {
-        fill: #848b91;
+        fill: #445096;
       }
     </style>
   </defs>
-  <g id="uuid-82d1ab86-69f5-424d-b90e-8bdf256bee5f">
-    <path id="uuid-cd6aa3b9-6f05-490c-8ef2-3571588b94a7" class="st1" d="M99.9,93.2c3.9,1,7.7,1.9,11.5,2.9,0,3.9-.8,7.4-3.7,10.2-2.3,2.2-5.1,3.1-8.2,3.1-5.9,0-11.8,0-17.7,0-7,0-11-5.1-11.6-10.7,0-.8-.1-1.7-.1-2.5,0-13.2,0-26.3,0-39.5,0-3.6,1.1-6.8,3.6-9.4,2.1-2.2,4.8-3.2,7.8-3.2,6.1,0,12.1,0,18.1,0,7.8.1,10.9,5.4,11.6,10.8,0,.8.1,1.7.2,2.5-3.8,1-7.7,2-11.5,3,0-.3,0-.6-.1-.9-.2-2.2-1.6-3.6-3.8-3.8-.8,0-1.7,0-2.5,0-2.5,0-4.9,0-7.4,0-.5,0-1,0-1.5.1-2.1.4-3.1,1.7-3.1,4.1,0,1.5,0,3.8,0,3.8v29.9c0,3.1,3.7,4.2,3.7,4.2.3,0,.9.2,1.3.2h8.7c2.8,0,4.2-1.3,4.5-4.1,0-.2,0-.3,0-.5"/>
-    <path id="uuid-7c380c1e-6c63-46da-a6e6-562299827e44" class="st0" d="M35.6,70.1c0,.4.3.7.7.7h10.5c.3,0,.6,0,.9,0,2.1-.2,3.3-1.6,3.4-3.7,0-2.6,0-5.2,0-7.9,0-2-1.1-3.2-2.9-3.6-.4,0-.9-.1-1.3-.1-3.5,0-6.9,0-10.4,0s-.5,0-.8,0v14.7h0ZM35.6,97.2c0,.4.2.7.4.7h.2c3.7,0,7.4,0,11,0,2.4,0,3.9-1.5,3.9-3.9,0-2.5,0-5,0-7.4,0-2.8-1.4-4.2-4.2-4.2h-10.8c-.2,0-.5.3-.5.7v14.2h0ZM21.1,109.4v-10.8c0-.4.3-.7.7-.7h1.5c.4,0,.7-.3.7-.7v-41.2c0-.4-.3-.7-.7-.7h-1.5c-.4,0-.7-.3-.7-.7v-10.3c0-.4.3-.7.7-.7h28.8c7.8,0,11.4,5.3,11.8,10.9.3,4.6.2,9.2,0,13.8-.1,3.2-1.6,5.9-4.3,8.1.4.3.7.4,1,.7,2.5,2.6,3.4,5.8,3.5,9.3,0,3.9.1,7.9-.2,11.8-.3,4.2-2.1,7.7-5.9,9.8-1.5.8-3.2,1.2-4.9,1.3-10.1,0-20.1,0-30.2,0s-.2,0-.3,0"/>
-    <path id="uuid-0d8d7c4b-cae8-4bbd-9433-4cfb06ef99b2" class="st0" d="M11.8,108.7c0,.4-.3.7-.7.7H1c-.4,0-.7-.3-.7-.7V44.4c0-.4.3-.7.7-.7h10.1c.4,0,.7.3.7.7v64.3h0Z"/>
-    <path id="uuid-0c4facb8-29f9-41ca-a997-e50d301bb8a6" class="st0" d="M111.1,117.2c.2,0,.4.3.4.7v5.3c0,.4-.2.7-.4.7H.6c-.2,0-.4-.3-.4-.7v-5.3c0-.4.2-.7.4-.7h110.5Z"/>
-    <path id="uuid-e70966d7-5260-4673-943b-995e2f50ff74" class="st2" d="M54.5.4c-.5,0-1.1.2-1.7.6C35.6,11.8,18.5,22.6,1.3,33.4c-1.1.7-1.4,1.4-1,2.5h13.8c13-8.1,25.9-16.2,38.9-24.4,1.2-.8,2.2-.7,3.3,0,13.6,8.2,27.2,16.3,40.8,24.5h14.2c.3-1,.2-1.8-.9-2.4C92.3,22.6,74.3,11.8,56.2.9c-.6-.3-1.1-.5-1.7-.5"/>
+  <path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5,2,2.3,3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7Z"/>
+  <g>
+    <path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2Z"/>
+    <path class="st1" d="M84.3,128c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8ZM70,125.4v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8Z"/>
+    <path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/>
+    <path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/>
+    <path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/>
+    <path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/>
+    <path class="st1" d="M124.5,130.2h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7-2.7-3-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7Z"/>
+    <polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
+    <path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
   </g>
 </svg>
\ No newline at end of file
diff --git a/src/components/design/content/banner-saeule.svelte b/src/components/design/content/banner-saeule.svelte
index 46e53345..e810a9ea 100644
--- a/src/components/design/content/banner-saeule.svelte
+++ b/src/components/design/content/banner-saeule.svelte
@@ -2,6 +2,8 @@
 	import { PRICES } from "#lib/constants";
 </script>
 
+<div class="mt-12 m-auto w-[90%] relative">
+
 <div id="saeulen">
 
     <div class="saeule">
@@ -9,23 +11,29 @@
             <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
             <div class="name">Verbrauchsausweis<br>Wohngebäude</div> 
         </div>   
+
+        <div class="white box">
+            <div class="variante">einfach</div>
+            <div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als&nbsp;18&nbsp;Monate&nbsp;sein.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung oder Verkauf Ihres&nbsp;Immobilienobjektes.</div><div class="check">✔</div></div>
+			<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978 gebaut mit weniger&nbsp;als&nbsp;5&nbsp;Wohnungen.</div><div class="check-no">✘</div></div>
+			<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet. Starke Abweichungen durch&nbsp;individuelles&nbsp;Heizverhalten.</div><div class="check-no">✘</div></div>
+			<div class="services"><div>Wird nicht immer bei den Banken für die Kreditunterlagen&nbsp;akzeptiert.</div><div class="check-no">✘</div></div>
+        </div>
+
         <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
+            <div class="price">
+                ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
         </div>
+
         <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
+            <div class="cta">jetzt online erstellen</div> 
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
         </div>
     </div>
 
@@ -34,99 +42,75 @@
             <img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
             <div class="name">Verbrauchsausweis<br>Gewerbe</div> 
         </div>   
+
+        <div class="white box">
+            <div class="variante">fundiert</div>
+            <div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad&nbsp;der&nbsp;Heizung.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung&nbsp;und&nbsp;Neubau.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und&nbsp;unsanierte&nbsp;Objekte.</div><div class="check">✔</div></div>
+			<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen&nbsp;werden.</div><div class="check">✔</div></div>
+			<div class="services"><div>Objektive  Berechnung die für die Kreditunterlagen besser&nbsp;geeignet&nbsp;ist.</div><div class="check">✔</div></div>
+        </div>
+
         <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
+            <div class="price">
+                ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
         </div>
+
         <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
+            <div class="cta">jetzt online erstellen</div> 
         </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
+        </div>
+
     </div>
 
-    <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
-            <div class="name">Bedarfsausweis<br>Wohngebäude</div> 
-        </div>   
-        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
-        </div>
-        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
-        </div>
-    </div>
 
-    <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
-            <div class="name">Bedarfsausweis<br>Gewerbe</div> 
-        </div>   
-        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
-        </div>
-        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
-        </div>
-    </div>
+</div>
 
 </div>
 
 <style lang="scss">
 
-#saeulen{@apply grid grid-cols-[1fr] gap-4 
-    lg:grid-cols-[1fr,1fr,1fr]
-    xl:grid-cols-[1fr,1fr,1fr,1fr];
-.saeule{@apply grid;
-img{@apply w-full justify-self-center mb-1 min-h-[50px] }
-.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
+
+
+#saeulen{@apply 
+    grid grid-cols-[1fr] gap-y-3 gap-x-6
+    lg:grid-cols-2
+    xl:grid-cols-2;
+
+
+.saeule{@apply grid grid-rows-subgrid row-span-10;
+img{@apply justify-self-center mb-1 w-[50%] }
+
+
+.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
 .name{@apply w-full}
-.name{font-size: clamp(15px, 2vh, 18px)}
-.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
-.ab{@apply leading-[1]}
-.mwst{@apply leading-[auto]}
-.price{font-size: clamp(15px, 5vh, 50px)}
-.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]} 
-.white{@apply border-x-[1px] border-gray-500 text-center text-black p-4}
-.services{@apply py-2}
-.services:first-child{@apply font-bold}
-.services:nth-child(even){@apply bg-white}
-.services:not(:last-child){@apply border-b-[1px] border-gray-300}
-.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
+.name{font-size: clamp(15px, 3vh, 18px)}
+
+.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
+
+.variante{@apply w-fit text-black justify-self-end mr-4}
+.variante{font-size: clamp(15px, 4vh, 24px)}
+
+.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
+.services:not(:last-child){@apply border-b-[1px] border-gray-200}
+.check{@apply self-center font-bold text-green-700}
+.check-no{@apply self-center font-bold text-red-700}
+
+
+
+.orange{@apply bg-primary text-white text-center rounded-md p-4 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-4 shadow-saeule ring-secondary ring-1}
 }
 
 }
diff --git a/src/components/design/header/Header.astro b/src/components/design/header/Header.astro
index af5d9e4d..f0e6aceb 100644
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -7,17 +7,17 @@ import Login from "#sidebarCards/card-login.svelte";
 
 <div class="max-w-[1920px] w-full grid relative bg-white
 
-sm:grid-cols-[0px_1fr_minmax(450px,450px)] sm:pl-6 sm:pr-3 sm:py-2
-md:grid-cols-[0px_1fr_minmax(450px,450px)] md:pl-6 md:pr-3 md:py-2
-lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
-lg:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
-xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
-2xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
+sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
+md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
+
+lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
+xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
+2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
 
 
 
 <!---
-		
+		lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
 		
 		<h2 class="text-secondary font-normal absolute
 					top-1 right-2 text-[1.1rem]
@@ -37,21 +37,39 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
 					Energieausweise nach aktuellem GEG
 		</h2> -->
 		
-<div></div>
 
-<div class="self-center justify-self-start
-		sm:justify-self-start
-		md:justify-self-start
-		lg:justify-self-center
-		xl:justify-self-center
-		2xl:justify-self-center">
-	<a href="/index_1">
-		<img class="w-[73px]" 
-		src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
-	</a>
+
+
+
+<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[auto_auto] gap-6 pt-[0px]">
+
+	<div class="self-start justify-self-start">
+
+		<a href="/index_1">
+			<img class="w-full max-w-[75px]" 
+			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
+		</a>
+	</div>
+
+	<div class="self-stretch justify-self-start">
+	<div class="text-secondary
+	lg:[font-size:_clamp(15px,3vw,26px)]
+	lg:leading-[2rem]
+	xl:[font-size:_clamp(15px,3vw,36px)] 
+	xl:leading-[4.5rem] pt-[0px]">
+	Energieausweis online erstellen</div>
+	<div class="text-primary 
+	lg:[font-size:_clamp(15px,3vw,20px)] 
+	lg:leading-[2rem]
+	xl:[font-size:_clamp(15px,3vw,24px)] 
+	xl:leading-[0.5rem] pl-[1px]">
+	Energieausweise nach aktuellem GEG</div>
+	</div>
+
+
 </div>
 
-<div class="w-[450px]">
+<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
 		<Login client:load />
 		</div>
 
@@ -60,20 +78,9 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
 
 	<div class="col-start-1 col-span-3">
 		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
-					lg:h-[14px] xl:h-[18px]">
-
-			<!-- <a
-				class="header-button hidden md:block"
-				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
-				>Energieausweis erstellen</a
-			>
-			<a class="header-button hidden md:block" href="/kontakt"
-				>Kontakt</a
-			>
-			<a class="header-button hidden md:block" href="/agb">AGB</a>
-				-->
-				
-		</div>
+					lg:h-[12px] xl:h-[12px]"></div>
+		<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
+					lg:h-[0px] xl:h-[0px]"></div>			
 	</div>
 
 </header>
diff --git a/src/components/design/sidebars/cards/card-login.svelte b/src/components/design/sidebars/cards/card-login.svelte
index ce82893a..f19e84e9 100644
--- a/src/components/design/sidebars/cards/card-login.svelte
+++ b/src/components/design/sidebars/cards/card-login.svelte
@@ -23,10 +23,8 @@
 </script>
 
 <div
-	id="card-login"
-	class="box card bg-white px-2 py-2
-			lg:block lg:ring-2 lg:ring-secondary/50"
->
+	id="card-login">
+
 	<div>
 
 	
@@ -58,7 +56,10 @@
 			</div>
 			{/if}
 		
-			<div class="w-full text-center self-center">
+</div>
+<div class="grid grid-cols-[3fr_2fr] gap-2">
+
+			<div class="w-full text-left self-center">
 				<a
 					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
 					href="/auth/signup">Registrieren</a
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index f8197aa9..97d5027f 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -10,7 +10,7 @@ export const API_UID_COOKIE_NAME = "uid";
 export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
 	// per E-Mail , inkl.Beratung, offline
 	BedarfsausweisWohnen: [135, 145, 290],
-	VerbrauchsausweisWohnen: [45, 55, 180],
+	VerbrauchsausweisWohnen: [55, 55, 180],
 	VerbrauchsausweisGewerbe: [85, 95, 360],
 	BedarfsausweisGewerbe: [300, 0, 0]
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d4d10fb5..2d2ff4f3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
 ---
 
 <Layout title="Energieausweis online erstellen - Online Energieausweis">
-	<h1>Energieausweis online erstellen</h1>
+	<h1>Unsere Ausweise im Detail:</h1>
 	<BannerPrice client:load />
 </Layout>
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 490949fe..d2d3f1cd 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -18,7 +18,8 @@ module.exports = {
 				"box-heading": 'var(--box-heading)'
 			},
 			boxShadow: {
-				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
+				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
+				'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
 			  },
 			
 			gridTemplateColumns: {