/* ──────────────────────────────────────────────────────────────────────
   Pipfold-Landing.

   Die Palette ist aus dem Spiel abgelesen (build/shots/menu.png): der
   dunkle Tisch (#23140c), das Holz des Kastens (#6d3f1c), der grüne Filz
   (#3d6248), die cremefarbene Klappe (#f2e3c4) und die Tinte der Zahlen
   (#2a1a10). Anders als bei Tidyfall darf es hier weich sein — das Spiel
   ist ein 3D-Kasten mit Rundungen, Schatten und warmem Licht, eine
   Landing aus harten Kanten würde daneben stehen.

   ⚠️ Zwei Töne sind AUSDRÜCKLICH keine Textfarben:
   --holz (#6d3f1c) hat auf Pergament nur 4,0:1 und --linie erst recht
   nicht. Für leisen Text steht --leise bereit (geprüft ≥ 4,5:1 in beiden
   Fassungen), alles andere ist Grafik. Tidyfall hat genau diesen Fehler
   einmal gemacht und musste nachziehen.

   Der dunkle Modus ist der Normalfall des Spiels (der Kasten liegt auf
   einem dunklen Tisch); die helle Fassung ist die Klappenseite.
   ────────────────────────────────────────────────────────────────────── */
:root {
	/* Rohtöne aus dem Spiel — Grafikwerte, nicht direkt Textfarben. */
	--tisch: #23140c;
	--holz: #6d3f1c;
	--filz: #3d6248;
	--klappe: #f2e3c4;
	--tinte: #2a1a10;

	--grund: #efe1c6;
	--schrift: #2a1a10;
	--leise: #6a4a2c;
	--linie: #cdb188;
	--feld: #e5d3b0;
	--akzent: #7c4210;
	--umgekehrt-grund: #2a1a10;
	--umgekehrt-schrift: #f6ead2;

	--breit: 62rem;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rund: 10px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--grund: #1e1109;
		--schrift: #f4e7cf;
		--leise: #c0a682;
		--linie: #4d3320;
		--feld: #2b190e;
		--akzent: #e5b569;
		--umgekehrt-grund: #f2e3c4;
		--umgekehrt-schrift: #2a1a10;
	}
}

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

/* scroll-padding = Höhe der klebenden Kopfleiste. Unter 44rem bricht sie auf
   zwei Zeilen um, dann braucht es mehr — sonst steht die Sprungmarke darunter. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8rem; }
@media (min-width: 44rem) { html { scroll-padding-top: 5rem; } }

body {
	margin: 0;
	background: var(--grund);
	color: var(--schrift);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.6;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* Sprungmarke für die Tastatur — die Seite beginnt mit einer Kopfleiste. */
.sprung {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--grund);
	color: var(--schrift);
	padding: .75rem 1rem;
	border: 2px solid var(--schrift);
	border-radius: var(--rund);
	z-index: 10;
}
.sprung:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.mitte { width: min(100% - 2.5rem, var(--breit)); margin-inline: auto; }

/* Kleine Grossbuchstaben-Etiketten — im Spiel steht so die Zeile über dem
   Kasten („Klappen 1–9 · zwei Würfel"). */
.etikett {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--leise);
	margin: 0 0 .5rem;
}

/* ── Kopf ────────────────────────────────────────────────────────── */
.kopf {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--grund);
	border-bottom: 1px solid var(--linie);
}
.kopf > div {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .75rem 0;
	flex-wrap: wrap;
}
.marke {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.marke svg { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.kopf nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.kopf nav a { font-size: .9375rem; color: var(--leise); text-decoration: none; border-bottom: 2px solid transparent; }
.kopf nav a:hover { color: var(--schrift); border-bottom-color: var(--akzent); }

/* ── Knöpfe ──────────────────────────────────────────────────────── */
/* Im Spielmenü ist genau ein Knopf gefüllt („Spielen"), der Rest steht
   dunkel daneben. Dasselbe hier: eine Hauptaktion je Fläche. */
.knopf {
	display: inline-block;
	padding: .9rem 1.6rem;
	border: 2px solid var(--linie);
	border-radius: var(--rund);
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
	background: var(--feld);
	color: var(--schrift);
}
.knopf.haupt { background: var(--umgekehrt-grund); color: var(--umgekehrt-schrift); border-color: var(--umgekehrt-grund); }
.knopf:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding: 3.5rem 0 2.5rem; }
.hero-satz { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .hero-satz { grid-template-columns: 1.15fr .85fr; } }

.hero h1 {
	font-size: clamp(2.25rem, 7vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 1rem;
}
.hero p.gross { font-size: 1.1875rem; margin: 0 0 1.75rem; max-width: 34rem; }
.taten { display: flex; gap: .75rem; flex-wrap: wrap; }

.merkzeile {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .5rem;
	padding: 0;
	margin: 1.75rem 0 0;
}
.merkzeile li {
	border: 1px solid var(--linie);
	border-radius: 999px;
	padding: .2rem .7rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--leise);
}

/* Der Rahmen um die Aufnahmen: der Kasten selbst hat eine Zarge, deshalb
   hier ein Rand aus Holzton statt eines schwebenden Bildes. */
.schirm { border: 1px solid var(--linie); border-radius: 14px; padding: .5rem; background: var(--feld); }
.schirm img { border-radius: 8px; }

/* Im Hero steht bewusst die QUERFORMAT-Aufnahme: der Kasten liegt quer, und
   eine hochkante Aufnahme daneben war zu zwei Dritteln leerer Tisch — sie hat
   die ganze Spalte gefüllt und trotzdem fast nichts gezeigt. Die hochkante
   Fassung steht jetzt in der Bilderreihe, wo sie als Format etwas erklärt.
   Gedeckelt auf 34rem, damit sie einspaltig auf grossen Schirmen nicht über
   ihre eigene Auflösung (960 px) hinaus hochskaliert wird. */
.hero .schirm { max-width: 34rem; margin-inline: auto; }

/* ── Abschnitte ──────────────────────────────────────────────────── */
section { padding: 3rem 0; border-top: 1px solid var(--linie); }
section h2 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; margin: 0 0 .75rem; }
section > .mitte > p { max-width: 42rem; }

.gitter { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2rem; }
.kachel { border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.25rem; background: var(--feld); }
.kachel h3 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.kachel p { margin: 0; font-size: .9375rem; color: var(--leise); }

/* Bilderreihe — waagerecht scrollbar, damit auf schmalen Schirmen nichts
   gestaucht wird. Ohne tabindex/role käme man mit der Tastatur nie an die
   hinteren Bilder. Die Aufnahmen sind echt (tools/schuesse.sh). */
/* ⚠️ In dieser Reihe stehen NUR Querformate (960×540). Ein Hochformat dazwischen
   ist doppelt so hoch und reisst ein Loch in die Zeile — gleiche Höhe statt
   gleicher Breite loest das nicht, dann steht das schmale Bild in einem viel zu
   weiten Rahmen. Die beiden hochkanten Aufnahmen stehen deshalb unten bei den
   Abschnitten, die sie erklaeren (.hochkant). */
.reihe { display: flex; gap: 1rem; overflow-x: auto; padding: 1.5rem .25rem .75rem; scroll-snap-type: x proximity; align-items: start; }
.reihe figure { margin: 0; flex: none; width: 30rem; max-width: 85vw; scroll-snap-align: start; }
.reihe figcaption { font-size: .8125rem; color: var(--leise); margin-top: .5rem; }

/* Hochkante Aufnahme neben dem Text, der sie erklaert. Auf schmalen Schirmen
   steht sie schlicht darueber; erst ab zwei Spalten wandert sie nach rechts. */
.hochkant { margin: 0 0 1.5rem; max-width: 15rem; }
.hochkant figcaption { font-size: .8125rem; color: var(--leise); margin-top: .5rem; }
@media (min-width: 56rem) {
	.hochkant { float: right; margin: .25rem 0 1.5rem 2rem; }
}
/* Der Float darf nicht in den naechsten Abschnitt ragen — dessen Trennlinie
   laege sonst mitten im Bild. */
section > .mitte::after { content: ""; display: block; clear: both; }

/* ── Tabellen ────────────────────────────────────────────────────── */
.tabelle { overflow-x: auto; margin-top: 1.5rem; }
table { border-collapse: collapse; width: 100%; min-width: 24rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; font-size: .9375rem; }
th { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
td:first-child { font-weight: 700; }
/* Nur in der Steuerungstabelle stehen kurze Begriffe, die nicht brechen
   sollen; in der Regeltabelle steht in der ersten Spalte ganzer Satz. */
.tabelle.kurz td:first-child { white-space: nowrap; }

/* ── Regel-Kasten ────────────────────────────────────────────────── */
/* Die vier Sätze, die das ganze Spiel sind. Bewusst als nummerierte Liste
   mit grossen Ziffern — es sind Klappen mit Zahlen darauf. */
.regeln { counter-reset: regel; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .75rem; }
.regeln li {
	counter-increment: regel;
	position: relative;
	padding: .9rem 1rem .9rem 3.5rem;
	border: 1px solid var(--linie);
	border-radius: var(--rund);
	background: var(--feld);
	font-size: .9375rem;
}
.regeln li::before {
	content: counter(regel);
	position: absolute;
	left: .9rem;
	top: .8rem;
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 6px;
	background: var(--umgekehrt-grund);
	color: var(--umgekehrt-schrift);
	font-weight: 700;
	font-size: 1rem;
}

/* ── Holen ───────────────────────────────────────────────────────── */
/* Vier Wege, bewusst als 2×2 statt auto-fit: mit auto-fit passen drei in die
   Reihe und der vierte steht allein neben einer halben Leerzeile. */
.wege { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 44rem) { .wege { grid-template-columns: 1fr 1fr; } }
.weg { border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.25rem; display: flex; flex-direction: column; background: var(--feld); }
.weg h3 { margin: 0 0 .25rem; font-size: 1.125rem; }
.weg p { font-size: .9375rem; color: var(--leise); margin: 0 0 1rem; }
.weg ul { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .9375rem; }
.weg li { margin-bottom: .35rem; }
.weg .unten { margin-top: auto; }
.weg .knopf { display: block; text-align: center; padding: .7rem 1rem; font-size: 1rem; background: var(--grund); }
.weg .knopf.haupt { background: var(--umgekehrt-grund); }
.weg .dazu { font-size: .8125rem; color: var(--leise); margin: .6rem 0 0; }

/* Der Zertifikats-Fingerabdruck: in Achtergruppen gesetzt, damit man ihn
   ablesen und vergleichen kann, und umbruchfähig — sonst sprengt er auf
   schmalen Schirmen die Seitenbreite. */
.fingerabdruck {
	display: block;
	margin-top: .3rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .75rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
	color: var(--schrift);
}

/* ── Grenzen ─────────────────────────────────────────────────────── */
.grenzen { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--linie); max-width: 42rem; }
.grenzen li { border-bottom: 1px solid var(--linie); padding: .9rem 0; font-size: .9375rem; }
.grenzen b { display: block; }

/* ── Fuss ────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--linie); padding: 2.5rem 0 3.5rem; font-size: .9375rem; color: var(--leise); }
footer p { max-width: 42rem; }
footer a { color: var(--schrift); }
footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* Das Spiel kennt „ruhige Bewegung" als Einstellung; die Seite bewegt sich
   ohnehin nur beim weichen Scrollen — und das hier ab. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}