@font-face {
	font-family: "Lato";
	src: url("fonts/lato-v25-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-display: block;
}
@font-face {
	font-family: "Montserrat";
	src: url("fonts/montserrat-v31-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
	/* Variante "Röhren-Amber" */
	--bg: #0d0b09;
	--panel: #15120f;
	--line: rgba(255, 244, 230, .12);
	--text: #d8d0c5;
	--muted: #968c80;
	--white: #fffaf3;
	--accent: #f5a524;
	--tint-1: rgba(217, 119, 6, .55);
	--tint-2: rgba(180, 83, 9, .25);
	--tint-3: rgba(13, 11, 9, .8);

	/* Variante "Violett" (vorher):
	--bg: #0b0b10; --panel: #121218; --line: rgba(255, 255, 255, .1);
	--text: #cfd2d9; --muted: #8b8f9a; --white: #fff; --accent: #c084fc;
	--tint-1: rgba(147, 51, 234, .55); --tint-2: rgba(192, 38, 211, .25); --tint-3: rgba(11, 11, 16, .75);
	*/
}

html { color-scheme: dark; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: Lato, ui-sans-serif, system-ui, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-weight: 500; color: var(--white); margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }

/* ---------- Landing ---------- */
.split { display: grid; grid-template-columns: 1fr; min-height: 100svh; }

.photo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38svh;
	background: url("hero.jpg") center / cover no-repeat;
	isolation: isolate;
}
.photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(160deg, var(--tint-1), var(--tint-2) 55%, var(--tint-3)),
		rgba(0, 0, 0, .3);
}
.photo img { width: min(340px, 62%); height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); }

.panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 1.5rem 2rem;
}
.panel-inner { max-width: 34rem; width: 100%; margin: auto 0; }

.eyebrow { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.25rem; }
.panel h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 1rem; }
.sub { font-size: 1.125rem; color: var(--muted); margin: 0 0 2.5rem; }

.links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.links li { border-bottom: 1px solid var(--line); }
.links a, .links .static {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.1rem .25rem;
	text-decoration: none;
	transition: background .2s, padding .2s;
}
.links a:hover, .links a:focus-visible { background: rgba(255, 255, 255, .04); padding-left: .75rem; }
.links .ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--accent);
}
.links .ico svg { width: 1.25rem; height: 1.25rem; }
.links small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.links strong { display: block; font-weight: 400; font-size: 1.15rem; color: var(--white); line-height: 1.35; }

.meta { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-size: .9rem; color: var(--muted); }
.social { display: flex; flex: none; gap: .75rem; }
.social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--white);
	color: #000;
	transition: background .2s, color .2s;
}
.social a:hover, .social a:focus-visible { background: var(--accent); }
.social svg { width: 1.15rem; height: 1.15rem; }

.foot {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	font-size: .8rem;
	color: var(--muted);
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}
.panel .foot { padding-top: 1.25rem; }
.foot nav { display: flex; gap: 1.25rem; text-transform: uppercase; letter-spacing: .08em; }
.foot a { text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--white); }

@media (min-width: 900px) {
	.split { grid-template-columns: 1.05fr 1fr; }
	.photo { position: sticky; top: 0; height: 100svh; }
	.panel { padding: 4rem 4.5rem 2.5rem; }
}

/* ---------- Legal pages ---------- */
.bar { border-bottom: 1px solid var(--line); background: var(--panel); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; }
.bar img { height: 2.5rem; width: auto; }
.bar a.back { text-decoration: none; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.bar a.back:hover, .bar a.back:focus-visible { color: var(--white); }

.wrap { max-width: 56rem; margin: 0 auto; }
.legal { padding: 4rem 1.5rem 5rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.2rem; margin: 2.5rem 0 .75rem; }
.legal p { margin: 0 0 1rem; max-width: 44rem; }
.legal a { color: var(--accent); }
.legal a:hover { color: var(--white); }
.legal .wko img { border-radius: 4px; background: #fff; margin-bottom: 1rem; }

.legal-foot { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem 2rem; }