---
import Login from "#sidebarCards/card-login.svelte";
---


<header>

<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]
					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="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[110px_auto] gap-6 pt-[0px]">

	<div class="self-start justify-self-start">

		<a href="/">
			<img class="w-full absolute top-2 left-6 max-w-[94px]" 
			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
		</a>
	</div>

	<div class="self-center justify-self-start mt-[10px]">
	<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>

	<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
					lg:h-[0px] xl:h-[0px]"></div>			
	</div>

</header>

<style>
	.header-button {
		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
	}
</style>