---
import "../style/global.css";
import "../style/formular.css";
import "../../svelte-dialogs.config"
import Header from "#components/design/header/AusweisHeader.astro";
import Footer from "#components/design/footer/Footer.astro";
import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";

export interface Props {
	title: string;
}

const { title } = Astro.props;
---


<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />

		<meta
			name="description"
			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
		/>
		<link rel="canonical" href="https://online-energieausweis.org/" />

		<meta property="og:locale" content="de_DE" />
		<meta property="og:type" content="website" />
		<meta
			property="og:title"
			content="Energieausweis online erstellen - Online Energieausweis"
		/>
		<meta
			property="og:description"
			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
		/>
		<meta property="og:url" content="https://online-energieausweis.org/" />
		<meta property="og:site_name" content="Energieausweis online erstellen" />

		<meta name="twitter:card" content="summary_large_image" />
		<meta
			name="twitter:description"
			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
		/>
		<meta
			name="twitter:title"
			content="Energieausweis online erstellen - Online Energieausweis"
		/>
		<meta
			name="twitter:image"
			content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
		/>
		<title>
			{title || 'Energieausweis online erstellen - Online Energieausweis'}
		</title>
	</head>

	<body>
			
		<Header />
	
		<main
			class="w-full p-0 grid
			xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
			2xl:grid-cols-[minmax(300px,300px)1fr] 2xl:gap-5 2xl:p-6
		">

		<SidebarLeft />

		<article class="box rounded-tl-none p-2 lg:p-12">
		<slot />
		</article>
 
		</main>
	
		<Footer />


		
		<NotificationWrapper client:load />

	</body>
</html>

<style is:global lang="postcss">
	body {
		min-height: 100vh;
		width:100%;
	}

	article {
		p, h1, h2, h3, h4, h5, h6 {
			@apply text-base-content;
		}
	}




	.headline {
		@apply text-lg;
	}

	.radio-inline {
		@apply flex flex-row gap-2;
	}

	.checkbox-inline {
		@apply flex flex-row gap-2;
	}

</style>
