---
import "../style/global.scss"
import "../../svelte-dialogs.config"
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import SidebarLeft from '../components/SidebarLeft.astro';

export interface Props {
	title: string;
}

const { title } = Astro.props;

const schema = JSON.stringify({
	'@context': 'http://schema.org',
	'@type': 'Corporation',
	name: 'IB Cornelsen',
	alternateName: 'online-energieausweis.org',
	url: 'https://online-energieausweis.org',
	logo: 'https://online-energieausweis.org/ib-cornelsen.png',
	address: {
		'@type': 'PostalAddress',
		streetAddress: 'Katendeich 5A',
		addressLocality: 'Hamburg',
		postalCode: '21035',
		addressCountry: 'Deutschland',
		email: 'info@online-energieausweis.org',
	},
	contactPoint: {
		'@type': 'ContactPoint',
		telephone: '+49-040-209339850',
		faxNumber: '+49-040-209339859',
		contactType: 'customer service',
		areaServed: 'DE',
		availableLanguage: 'German',
	},
});
---

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<script type="application/ld+json" set:html={schema}></script>
		<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="grid gap-6 p-6 grid-cols-[2fr,8fr] max-w-[1920px] w-full bg-base-100">
			<SidebarLeft></SidebarLeft>
			<article class="bg-base-200 rounded-lg border border-base-300 h-min">
				<slot />
			</article>
		</main>
		<Footer />
	</body>
</html>

<style is:global>
	body {
		min-height: 100vh;
	}

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

	article h1 {
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.2rem;
	width: 100%;
	text-align: center;
	margin: 1em 0em;
}

article a {
	color: #3a4ab5;
	text-decoration: none;
	display: inline;
}

article a:hover {
	text-decoration: underline;
}

article p {
	line-height: 1.7em;
	padding-right: 1em;
	font-size: 1.1em;
	text-transform: none;
}

article {
	@apply relative w-full rounded-lg border shadow-md px-6 py-8 bg-white;
}

	.button {
		@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center;
		color: #fff !important;
	}

	h3 {
		@apply text-xl font-medium mt-6 mb-4;
	}

	input, select, textarea, .input {
		@apply py-1.5 px-2.5 rounded-lg w-full outline-none text-base text-slate-800 border bg-white;
	}

	input:disabled, input:read-only, select:disabled {
		@apply bg-gray-200 border-gray-300;
	}

	input:disabled {
		text-indent: -9999px;
	}

	.GRB {
		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
		/* background: linear-gradient(
			135deg,
			rgba(252, 234, 187, 1) 0%,
			rgba(253, 235, 189, 1) 52%,
			rgba(251, 223, 147, 1) 100%
		); */
	}

	.yellow-box {
		@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-[rgba(252,234,187,0.2)];
		/* background: linear-gradient(
			135deg,
			rgba(252, 234, 187, 1) 0%,
			rgba(253, 235, 189, 1) 52%,
			rgba(251, 223, 147, 1) 100%
		); */
	}

	.GRB3 {
		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
		/* background: linear-gradient(
			135deg,
			rgba(252, 234, 187, 1) 0%,
			rgba(253, 235, 189, 1) 52%,
			rgba(251, 223, 147, 1) 100%
		); */
	}

	.box {
		@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
		/* background: linear-gradient(
			135deg,
			rgba(252, 234, 187, 1) 0%,
			rgba(253, 235, 189, 1) 52%,
			rgba(251, 223, 147, 1) 100%
		); */
	}

	.headline {
		@apply text-lg;
	}

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

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

</style>
