---
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
---

<header id="header">

<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0

grid-cols-1
sm:grid-cols-1 
md:grid-cols-1

lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">

<div class="justify-self-center xs:justify-self-start">

<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
md:gap-y-4
lg:px-0 lg:gap-x-4">

<div class="ml-4 mb-2 mt-2 mr-4">
	<a href="/">
		<img id="header-logo" class="w-109 
		xs:max-w-[109px] 
		sm:max-w-[109px]
		md:max-w-[109px] md:ml-6
		lg:max-w-[109px] lg:ml-0
		xl:max-w-[109px] xl:ml-0
		" 
		src="/images/header/logo_immowelt.svg" alt="Immowelt-Logo"/>
	</a>
</div>

<div class="text-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
	<div id="header-text-2" class="text-color:#303038ff justify-self-center
	xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
	lg:[font-size:_clamp(15px,3vw,20px)] 
	lg:leading-[2rem]
	xl:[font-size:_clamp(15px,3vw,24px)] 
	xl:leading-[0.5rem]">
	Hier komfortabel und einfach online den <b>Verbrauchsausweis Wohnen</b> bestellen
	</div>
	</div>
</div>
</div>





<div class="w-full justify-self-center">
	<HeaderLogin client:load  />
</div>

</div>




</div>

	<div class="col-start-1 col-span-3">
		<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-gray-200 h-[30px]
					lg:h-[30px] xl:h-[30px]"></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>