<script lang="ts">
	let { children } = $props();
</script>

<svelte:head>
	<meta charset="utf-8" />
	<title>vereins.haus — Vereinsverwaltung die einfach funktioniert</title>
	<meta name="description" content="Mobile-first Vereinsverwaltung mit SEPA-Beitragseinzug, Terminkalender und Mitgliederverwaltung. Kostenlos starten." />
	<meta name="robots" content="index, follow" />
	<link rel="canonical" href="https://vereins.haus" />
	<meta property="og:type" content="website" />
	<meta property="og:site_name" content="vereins.haus" />
	<meta property="og:locale" content="de_DE" />
	<meta property="og:title" content="vereins.haus — Vereinsverwaltung die einfach funktioniert" />
	<meta property="og:description" content="Mobile-first Vereinsverwaltung mit SEPA-Beitragseinzug, Terminkalender und Mitgliederverwaltung." />
</svelte:head>

{@render children()}

<style>
	:global(*) {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	:global(html) {
		color-scheme: light;
		font-size: 16px;
	}

	:global(body) {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		color: #1e293b;
		background: #f8fafc;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
	}

	:global(a) {
		color: inherit;
		text-decoration: none;
	}

	:global(button) {
		cursor: pointer;
		font-family: inherit;
	}

	:global(input, textarea, select) {
		font-family: inherit;
		font-size: 1rem;
	}
</style>
