Säulen und Header

src/components/design/header/Header.astro

@@ -1,119 +1,92 @@
-<script>
+---
-	import { PRICES } from "#lib/constants";
+import Login from "#sidebarCards/card-login.svelte";
-</script>
 
-<div class="mt-12 m-auto w-[90%] relative">
+---
 
-<div id="saeulen">
+<header>
 
-    <div class="saeule">
+<div class="max-w-[1920px] w-full grid relative bg-white
-        <div class="blue-top">
-            <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">
+sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
-            <div class="variante">einfach</div>
+md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
-            <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">
+lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
-            <div class="price">
+xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
-                ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
-            </div>
 
-        </div>
 
-        <div class="blue-bottom">
-            <div class="cta">jetzt online erstellen</div> 
-        </div>
 
-        <div class="blue-bottom">
+<!---
-            <div class="cta">zur Produktübersicht</div> 
+		lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
-        </div>
+		
-    </div>
+		<h2 class="text-secondary font-normal absolute
+					top-1 right-2 text-[1.1rem]
+					xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
+					
+					md:top-[1.25rem] md:right-4 md:text-[1.1rem]
+					xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
+					Energieausweis online erstellen
+		</h2>
+				
+		<h2	class="text-primary font-normal absolute 
+					top-[1.6rem] right-2 text-[0.85rem]
+					xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
+					
+					md:top-[2.5rem] md:right-4 md:text-[0.9rem]
+					xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
+					Energieausweise nach aktuellem GEG
+		</h2> -->
+		
 
-    <div class="saeule">
-        <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 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="price">
-                ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
-            </div>
 
-        </div>
+<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="blue-bottom">
+	<div class="self-start justify-self-start">
-            <div class="cta">jetzt online erstellen</div> 
-        </div>
 
-        <div class="blue-bottom">
+		<a href="/index_1">
-            <div class="cta">zur Produktübersicht</div> 
+			<img class="w-full max-w-[75px]" 
-        </div>
+			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
+		</a>
+	</div>
 
-    </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] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
+		<Login client:load />
+		</div>
+
+
 </div>
 
-<style lang="scss">
+	<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-[12px] xl:h-[12px]"></div>
-
+		<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
-#saeulen{@apply 
+					lg:h-[0px] xl:h-[0px]"></div>			
-    grid grid-cols-[1fr] gap-y-3 gap-x-6
+	</div>
-    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, 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}
-}
-
-}
 
+</header>
 
+<style>
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
 </style>

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 />