/* sjoelbox — Landing. Dieselbe Palette wie der Holztisch im Spiel,
   damit der Übergang von der Seite ins Spiel nicht springt. */
:root {
	--grund: #341a0a;
	--tiefer: #241206;
	--schrift: #f4efe6;
	--gedaempft: #c0a682;
	--licht: #f3ead0;
	--rand: rgba(243, 234, 208, 0.14);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--grund);
	color: var(--schrift);
	font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sprung {
	position: absolute; left: -9999px;
}
.sprung:focus { left: 8px; top: 8px; background: var(--licht); color: #341a0a; padding: 8px 12px; z-index: 9; }

header {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 18px 20px; max-width: 780px; margin: 0 auto;
}
.marke { margin: 0; font-weight: 650; letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; }
.marke a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.marke svg { flex: none; color: var(--licht); }
header nav { display: flex; gap: 18px; }
header nav a, footer a { color: var(--licht); text-decoration: none; border-bottom: 1px solid transparent; }
header nav a:hover, footer a:hover, main a:hover { border-bottom-color: currentColor; }
main a { color: var(--licht); }

main { max-width: 780px; margin: 0 auto; padding: 8px 20px 40px; }
section { padding: 26px 0; border-top: 1px solid var(--rand); }
section.kopf { border-top: 0; padding-top: 10px; }

h1 { font-size: clamp(28px, 6vw, 44px); line-height: 1.18; margin: 0 0 22px; letter-spacing: -0.015em; }
h2 { font-size: 21px; margin: 0 0 14px; }

.satz { font-size: 18px; margin: 0 0 26px; }
.satz strong { color: var(--licht); }

/* Aufnahmen bleiben in der Lesespalte — kein zweites Raster daneben.
   Der Film ist quadratisch und darf die Spalte nicht in die Höhe sprengen. */
.film { margin: 28px 0 0; max-width: 22rem; }
.film figcaption, .schauen figcaption {
	color: var(--gedaempft);
	font-size: 14px;
	margin: 8px 2px 0;
}
.aufnahme { margin: 22px 0 0; }
.schauen { display: grid; gap: 22px; margin-top: 8px; }

.schirm {
	border: 1px solid var(--rand);
	border-radius: 14px;
	padding: 6px;
	background: var(--tiefer);
}
.schirm img, .schirm video {
	border-radius: 8px;
	width: 100%;
	height: auto;
	display: block;
	background: var(--tiefer);
}
.schirm video { aspect-ratio: 1 / 1; object-fit: contain; }
.schauen .schirm img, .aufnahme .schirm img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

.knopf {
	display: inline-block; background: var(--licht); color: #341a0a;
	font-weight: 650; text-decoration: none; padding: 13px 26px; border-radius: 10px;
}
.knopf:hover { filter: brightness(1.07); border-bottom: 0; }
.dazu { color: var(--gedaempft); font-size: 15px; margin: 10px 0 0; }

ul { margin: 0; padding-left: 22px; }
li { margin-bottom: 10px; }
li b { color: var(--licht); font-weight: 650; }
.nicht li { list-style: none; margin-left: -22px; padding-left: 26px; position: relative; }
.nicht li::before { content: "—"; position: absolute; left: 4px; color: var(--gedaempft); }

.arbeit { color: var(--gedaempft); }
.arbeit strong { color: var(--schrift); }

footer {
	max-width: 780px; margin: 0 auto; padding: 26px 20px 44px;
	border-top: 1px solid var(--rand); color: var(--gedaempft); font-size: 15px;
}
footer p { margin: 0 0 8px; }
.fuss-zeilen { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}