---
import "../style/global.css";
import "../../svelte-dialogs.config"
import Header from "#header/Header_1.astro";
import Footer from "#footer/Footer.astro";
import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
import SidebarRight from "#sidebarRight/SidebarRight_1.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."
		/>
		<title>
			{title || "Energieausweis online erstellen - Online Energieausweis"}
		</title>
	</head>

	<body>
	<container class="w-full max-w-[1920px]">
		
		<Header />

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

		<SidebarLeft />
		
		<article class="box grow rounded-tl-none">
		<slot />
		</article>
		
		<SidebarRight />

		</main>
	
		<Footer />
		<NotificationWrapper client:load />
	</container>
	</body>
</html>


