Säuelen und Header

src/components/design/content/banner-saeule.svelte

@@ -1,170 +1,119 @@
 <script>
 	import { PRICES } from "#lib/constants";
- import VApromo from "#sidebarCards/card-VA-promo.svelte";
- import BApromo from "#sidebarCards/card-BA-promo.svelte";
 </script>
 
+<div class="mt-12 m-auto w-[90%] relative">
+
 <div id="saeulen">
+
     <div class="saeule">
-      <VApromo client:load /> 
+        <div class="blue-top">
-        <div class="white">
+            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
-          <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
+            <div class="name">Verbrauchsausweis<br>Wohngebäude</div> 
-            <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="produkttext">Einfache Berechnung anhand von 3
-                  Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</p>
-            </div>
-            <div class="lg:w-1/6 w-1/6 h-16">
-              <p class="haken">✔</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="produkttext">
-                Zulässig bei Vermietung
-                <br/>
-                oder Verkauf Ihres Immobilienobjektes.
-              </p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</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="produkttext">Unzulässig bei unsanierten Gebäuden vor
-                  1978 gebaut mit weniger als 5 Wohnungen.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="kreuz">✘</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="produkttext">Für bauliche und energetische Maßnahmen
-                  ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="kreuz">✘</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="produkttext">Wird nicht immer bei den Banken für die
-                  Kreditunterlagen akzeptiert.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="kreuz">✘</p>
-            </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">
-          zur Produktübersicht
+            <div class="price">
+                ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
             </div>
+
+        </div>
+
         <div class="blue-bottom">
-            jetzt sofort Energieausweis<br>online erstellen
+            <div class="cta">jetzt online erstellen</div> 
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
         </div>
     </div>
 
     <div class="saeule">
-      <BApromo client:load /> 
+        <div class="blue-top">
+            <img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
+            <div class="name">Verbrauchsausweis<br>Gewerbe</div> 
+        </div>   
 
-        <div class="white">
+        <div class="white box">
-          <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
+            <div class="variante">fundiert</div>
-            <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
+            <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>
-              fundiert
+			<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung&nbsp;und&nbsp;Neubau.</div><div class="check">✔</div></div>
-              <br/>
+			<div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und&nbsp;unsanierte&nbsp;Objekte.</div><div class="check">✔</div></div>
-            </p>
+			<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>
+			<div class="services"><div>Objektive  Berechnung die für die Kreditunterlagen besser&nbsp;geeignet&nbsp;ist.</div><div class="check">✔</div></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="produkttext">Berechnung anhand der
-                  Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</p>
-            </div>
-            <div class="lg:w-1/6 w-1/6 h-16">
-              <p class="haken">✔</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="produkttext">Zulässig bei Vermietung, Verkauf,
-                  Modernisierung und Neubau.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</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="produkttext">Zulässig für alle Gebäude, insbesondere
-                  alte und unsanierte Objekte.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</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="produkttext">Kann als Grundlage für Sanierungsvarianten
-                  sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</p>
-            </div>
-            <div class="lg:w-1/6 items-end w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
-          <div class="flex flex-row items-end w-full">
-            <div class="lg:w-5/6 w-5/6">
-              <p class="produkttext">Objektive&nbsp; Berechnung die für die
-                  Kreditunterlagen besser geeignet ist.</p>
-            </div>
-            <div class="items-end w-1/6 h-16">
-              <p class="haken">✔</p>
-            </div>
-          </div>
         </div>
 
         <div class="orange">
-            zur Produktübersicht
+            <div class="price">
+                ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
         </div>
 
         <div class="blue-bottom">
-            jetzt sofort Energieausweis<br>online erstellen
+            <div class="cta">jetzt online erstellen</div> 
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
         </div>
 
     </div>
+
+
+</div>
+
 </div>
 
 <style lang="scss">
-#saeulen{@apply grid grid-cols-[1fr] gap-4 
+
-    sm:grid-cols-[1fr,1fr]
+
-    md:grid-cols-[1fr,1fr]
+
-    lg:grid-cols-[1fr,1fr]
+#saeulen{@apply 
-    xl:grid-cols-[1fr,1fr];
+    grid grid-cols-[1fr] gap-y-3 gap-x-6
-.saeule{@apply grid;
+    lg:grid-cols-2
-img{@apply w-1/2 justify-self-center mb-1 mt-3 min-h-[30px] }
+    xl:grid-cols-2;
-.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
+
+
+.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)}
+.name{font-size: clamp(15px, 3vh, 18px)}
-.orange{@apply bg-primary text-white text-center font-bold rounded-t-md p-2 relative}
+
-.ab{@apply leading-[1]}
+.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
-.mwst{@apply leading-[auto]}
+
-.price{font-size: clamp(15px, 5vh, 50px)}
+.variante{@apply w-fit text-black justify-self-end mr-4}
-.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]} 
+.variante{font-size: clamp(15px, 4vh, 24px)}
-.white{@apply border-x-[1px] border-gray-500 text-left text-black p-4}
+
-.services{@apply py-2}
+.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
-.services:first-child{@apply font-bold}
+.services:not(:last-child){@apply border-b-[1px] border-gray-200}
-.services:nth-child(even){@apply bg-white}
+.check{@apply self-center font-bold text-green-700}
-.services:not(:last-child){@apply border-b-[1px] border-gray-300}
+.check-no{@apply self-center font-bold text-red-700}
-.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
+
-.kreuz{@apply mb-4 text-2xl text-center text-primary mt-4 font-medium}
+
-.haken{@apply mb-4 text-2xl text-center text-secondary mt-4 font-medium}
+
-.produkttext{@apply mb-4 text-lg text-center mt-4}
+.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}
 }
 
 }
+
+
 </style>

src/components/design/header/Header.astro

@@ -5,12 +5,19 @@ import Login from "#sidebarCards/card-login.svelte";
 
 <header>
 
-<div class="flex flex-row max-w-[1920px] w-full bg-white p-2">
+<div class="max-w-[1920px] w-full grid relative bg-white
+
+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]
@@ -30,41 +37,50 @@ import Login from "#sidebarCards/card-login.svelte";
 					Energieausweise nach aktuellem GEG
 		</h2> -->
 		
-<div class="flex flex row mb-1 items-end w-1/4 md:w-1/2 2xl:w-4/6">
+
-	<div class="ml-5 mr-3">
+
+
+
+<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-[95px]" 
+			<img class="w-full max-w-[75px]" 
 			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
 		</a>
 	</div>
-	<div class="pb-1.5 hidden md:block"><h1 class="text-secondary font-bold text-2xl lg:text-3xl">
+
-		Energieausweise online erstellen
+	<div class="self-stretch justify-self-start">
-	</h1>
+	<div class="text-secondary
-	</div>
+	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 class="w-3/4 md:w-1/2 2xl:w-2/6 2xl:hidden"><Login client:load /></div>
+
-<div class="2xl:w-2/6 hidden 2xl:block 2xl:flex 2xl:mb-2.5 2xl:items-end 2xl:justify-center"><div class="2xl:pl-20"><h2 class="text-secondary font-bold text-4xl">nach GEG 2024</h2></div></div>
+</div>
+
+<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
+		<Login client:load />
+		</div>
 
 
 </div>
 
 	<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]">
+					lg:h-[12px] xl:h-[12px]"></div>
-
+		<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
-			<!--- <a
+					lg:h-[0px] xl:h-[0px]"></div>			
-				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>
 	</div>
 
 </header>

src/components/design/sidebars/cards/card-login.svelte

@@ -23,19 +23,15 @@
 </script>
 
 <div
-	id="card-login"
+	id="card-login">
-	class="box card bg-white px-2 py-2
+
-			lg:block lg:ring-2 lg:ring-secondary/50"
->
 	<div>
 
 	
 		<form on:submit={login}>
-			<div class="">
+			<div class="grid grid-cols-[1fr_1fr] gap-2">
-			
-				<div class="flex flex-row">
 			<input
-					class="my-1 rounded-md px-2 py-1 ring-1 w-full mr-1.5"
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
 				type="text"
 				placeholder="nutzer@email.com"
 				name="email"
@@ -59,11 +55,11 @@
 				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
 			</div>
 			{/if}
+		
 </div>
+<div class="grid grid-cols-[3fr_2fr] gap-2">
 
-		
+			<div class="w-full text-left self-center">
-			<div class="flex flex-row">
-			<div class="w-full text-center self-center">
 				<a
 					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
 					href="/auth/signup">Registrieren</a
@@ -74,8 +70,7 @@
 				>
 			</div>
 
-			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[35%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Login</button>
+			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
-			</div>
 
 		</div>
 		</form>

src/components/design/sidebars/right/SidebarRight.astro

@@ -1,5 +1,4 @@
 ---
-import Login from "#sidebarCards/card-login_1.svelte";
 import Contact from "#sidebarCards/card-contact.svelte";
 import Review from "#sidebarCards/card-review.svelte";
 import VApromo from "#sidebarCards/card-VA-promo.svelte";
@@ -11,7 +10,7 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
 <div class="hidden
             xl:flex xl:flex-col xl:grow
             ">
-    <Login client:load />
+
     <Contact client:load />
     <Review client:load />
     <VAGpromo client:load />

tailwind.config.cjs

@@ -19,6 +19,7 @@ module.exports = {
 			},
 			boxShadow: {
 				'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
+				'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',				
 			  },
 			
 			gridTemplateColumns: {