<header class="max-w-[1920px] w-full relative bg-white
md:bg-[url('/images/header/header-bg.jpg')] 
md:bg-cover md:grid md:grid-cols-2
lg:grid lg:grid-cols-3">



	<div class="
	justify-self-center px-2 py-2
	xs:px-6 xs:py-4
	md:px-4 md:py-4
	md:col-end-4 md:justify-self-end 
	xl:my-4 xl:mr-9 xl:p-0">

	
		<a href="/">
			<img class="
			w-full
			md:w-[350px]
			lg:w-[420px]" 
			src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
		</a>
		
		<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>

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