:root
{
	--papier:  #f7f7f5;
	--papier-2:#ececeb;
	--nacht:   #1b2a4a;
	--nacht-2: #132038;
	--signal:  #d4622a;
	--signal-2:#e8834f;
	--grau:    #6b7280;
	--grau-2:  #9aa1ac;

	--sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--mono: "SF Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
}

*
{
	box-sizing: border-box;
}

html,
body
{
	max-width: 100%;
	overflow-x: clip;
}

body
{
	margin: 0;
	background: var(--papier);
	color: #1a1c20;
	font-family: var(--sans);
	font-size: clamp(1rem, .95rem + .32vw, 1.12rem);
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
}

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

.bahn
{
	width: min(90%, 72rem);
	margin: 0 auto;
}

.schmal
{
	max-width: 38rem;
}

/* ---------- Titel: die Zahl im Zentrum ---------- */

.kopf
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(96vh, 48rem);
	padding: clamp(3rem, 8vw, 6rem) 0;
	background: var(--nacht);
	color: var(--papier);
}

.zitat
{
	max-width: 30rem;
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
	padding-left: 1.2rem;
	border-left: 2px solid var(--signal);
	font-family: var(--mono);
	font-size: clamp(.88rem, .85rem + .25vw, 1rem);
	line-height: 1.65;
	color: var(--grau-2);
}

.grossezahl
{
	display: block;
	font-family: var(--sans);
	font-size: clamp(6rem, 2rem + 22vw, 20rem);
	font-weight: 700;
	line-height: .82;
	letter-spacing: -.06em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

h1
{
	max-width: 24ch;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 1.4rem;
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: #fff;
}

.kopf > .bahn > p:last-child
{
	max-width: 34rem;
	margin: 0;
	font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem);
	color: var(--grau-2);
}

/* ---------- Abschnitte ---------- */

section
{
	padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.marke
{
	margin: 0 0 1rem;
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--signal);
}

h2
{
	margin: 0 0 1.5rem;
	font-size: clamp(1.65rem, 1.2rem + 2.1vw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.028em;
	color: var(--nacht);
}

p
{
	margin: 0 0 1.2rem;
	text-wrap: pretty;
}

p:last-child
{
	margin-bottom: 0;
}

.lead
{
	font-size: clamp(1.18rem, 1.05rem + .7vw, 1.6rem);
	line-height: 1.42;
	letter-spacing: -.012em;
	color: var(--nacht);
}

strong
{
	font-weight: 700;
	color: var(--nacht);
}

/* ---------- Frage-Antwort-Folge ---------- */

.fragen
{
	margin: 3rem 0 0;
	border-top: 1px solid rgba(27,42,74,.16);
}

.fragen > div
{
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: .6rem 3rem;
	padding: 2rem 0;
	border-bottom: 1px solid rgba(27,42,74,.16);
}

.fragen h3
{
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--nacht);
}

.fragen p
{
	margin: 0;
	color: #414651;
}

@media (max-width: 46rem)
{
	.fragen > div
	{
		grid-template-columns: 1fr;
		gap: .5rem;
	}
}

/* ---------- Bild in voller Breite ---------- */

.bildstreifen
{
	padding: 0;
}

.bildstreifen figure
{
	margin: 0;
}

.bildstreifen img
{
	width: 100%;
	height: auto;
}

.bildstreifen figcaption
{
	padding: 1.1rem 0 0;
	font-family: var(--mono);
	font-size: .82rem;
	line-height: 1.6;
	color: var(--grau);
}

/* ---------- Was der Test nicht sieht ---------- */

.blind
{
	background: var(--nacht);
	color: var(--papier);
}

.blind h2
{
	color: #fff;
}

.blind .lead
{
	color: #fff;
}

.blind p
{
	color: var(--grau-2);
}

.blind strong
{
	color: #fff;
}

.liste
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: 1px;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
	background: rgba(247,247,245,.16);
	border: 1px solid rgba(247,247,245,.16);
}

.liste li
{
	min-width: 0;
	padding: 1.4rem 1.5rem;
	background: var(--nacht);
	font-size: .98rem;
	line-height: 1.45;
}

.liste li span
{
	display: block;
	margin-bottom: .3rem;
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .1em;
	color: var(--signal-2);
}

/* ---------- Die grosse Null ---------- */

.nullzeile
{
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(247,247,245,.2);
}

.nullzahl
{
	flex: none;
	font-size: clamp(4.5rem, 2rem + 11vw, 10rem);
	font-weight: 700;
	line-height: .8;
	letter-spacing: -.06em;
	color: var(--signal);
	font-variant-numeric: tabular-nums;
}

.nullzeile p
{
	margin: 0;
	max-width: 30rem;
	font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
	line-height: 1.42;
	color: #fff;
}

/* ---------- Zehn sinnvolle Tests ---------- */

.sinnvoll
{
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: test;
	border-top: 1px solid rgba(27,42,74,.16);
}

.sinnvoll li
{
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 20rem) minmax(0, 1fr);
	gap: .3rem 1.5rem;
	align-items: baseline;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(27,42,74,.16);
	counter-increment: test;
}

.sinnvoll li::before
{
	content: counter(test, decimal-leading-zero);
	font-family: var(--mono);
	font-size: .78rem;
	color: var(--signal);
}

.sinnvoll b
{
	font-weight: 700;
	color: var(--nacht);
}

.sinnvoll span
{
	font-size: .96rem;
	color: #414651;
}

@media (max-width: 48rem)
{
	.sinnvoll li
	{
		grid-template-columns: 2.2rem 1fr;
	}

	.sinnvoll span
	{
		grid-column: 2;
	}
}

/* ---------- Siegel ---------- */

.siegel
{
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: clamp(1.8rem, 4vw, 3.5rem);
	align-items: center;
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid rgba(27,42,74,.16);
}

.siegel a
{
	display: block;
	transition: transform .3s cubic-bezier(.16,.8,.3,1), opacity .3s ease;
}

.siegel a:hover,
.siegel a:focus-visible
{
	transform: scale(1.04);
	opacity: .88;
}

.siegel img
{
	width: 100%;
	height: auto;
}

.siegel h3
{
	margin: 0 0 .7rem;
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--signal);
}

.siegel p
{
	max-width: 34rem;
	font-size: 1rem;
	color: #414651;
}

@media (max-width: 40rem)
{
	.siegel
	{
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.siegel img
	{
		width: 8.5rem;
	}
}

/* ---------- Kontrollcode ---------- */

.pruef
{
	margin-top: 2.5rem;
	padding: 1.7rem 1.9rem;
	background: var(--nacht);
	color: var(--papier);
}

.pruef p
{
	margin: 0;
	font-size: 1rem;
	color: rgba(247,247,245,.85);
}

.pruef strong
{
	color: #fff;
}

.knopf
{
	display: inline-block;
	margin-top: 2.4rem;
	padding: 1rem 2.3rem;
	background: var(--signal);
	color: #fff;
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .25s ease;
}

.knopf:hover,
.knopf:focus-visible
{
	background: var(--signal-2);
}

/* ---------- Weitere Themen: nummerierte Zeilen ---------- */

.themen:not(:has(a))
{
	display: none;
}

.themen
{
	background: var(--papier-2);
}

.themen ol
{
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: nr;
}

.themen li
{
	border-bottom: 1px solid rgba(27,42,74,.14);
}

.themen li:not([hidden])
{
	counter-increment: nr;
}

.themen li[hidden]
{
	display: none;
}

.themen a
{
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1rem;
	padding: 1.1rem 0;
	color: var(--nacht);
	text-decoration: none;
	transition: color .2s ease;
}

.themen a::before
{
	content: counter(nr, decimal-leading-zero);
	font-family: var(--mono);
	font-size: .8rem;
	color: var(--signal);
}

.themen a:hover,
.themen a:focus-visible
{
	color: var(--signal);
}

/* ---------- Fuß: zentriert unter Haarlinie ---------- */

footer
{
	padding: 3rem 0 3.5rem;
	background: var(--nacht-2);
	color: rgba(247,247,245,.58);
	font-family: var(--mono);
	font-size: .76rem;
	line-height: 1.9;
	text-align: center;
}

footer .bahn
{
	max-width: 46rem;
}

footer hr
{
	width: 3rem;
	margin: 0 auto 2rem;
	border: 0;
	border-top: 1px solid var(--signal);
}

footer p
{
	margin: 0 0 1.2rem;
}

footer b
{
	color: rgba(247,247,245,.9);
	font-weight: 400;
}

footer a
{
	color: rgba(247,247,245,.9);
	text-decoration: none;
	border-bottom: 1px solid rgba(212,98,42,.6);
	transition: color .2s ease, border-color .2s ease;
}

footer a:hover,
footer a:focus-visible
{
	color: var(--signal-2);
	border-color: var(--signal-2);
}

footer address
{
	margin-top: 1.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(247,247,245,.14);
	font-style: normal;
}

/* ---------- Effekt ---------- */

.auf
{
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity .8s ease, transform .8s cubic-bezier(.16,.8,.3,1);
}

.auf.da
{
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce)
{
	.auf
	{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Weitersagen: die Botschaft als Zitat, darunter schlichte Links ---------- */

.weitersagen
{
	background: var(--papier);
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.4rem, 7vw, 5.6rem);
}

.weitersagen__zitat
{
	margin: 0 0 2rem;
	padding-left: 1.2rem;
	border-left: 2px solid var(--signal);
	max-width: 34rem;
}

.weitersagen__zitat p
{
	margin: 0;
	font-size: clamp(1.08rem, 1rem + .6vw, 1.4rem);
	line-height: 1.5;
	color: var(--nacht);
}

.weitersagen__links
{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 2rem;
}

.weitersagen__links a,
.weitersagen__links button
{
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .3rem 0;
	background: none;
	border: 0;
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .06em;
	line-height: 1.4;
	color: var(--nacht);
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(27,42,74,.3);
	cursor: pointer;
}

.weitersagen__links a:hover,
.weitersagen__links a:focus-visible,
.weitersagen__links button:hover,
.weitersagen__links button:focus-visible
{
	color: var(--signal);
	text-decoration-color: var(--signal);
}

.weitersagen__links svg
{
	width: 1rem;
	height: 1rem;
	flex: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--grau-2);
}

/* ---------- Mitscrollende Leiste: links, Icons ohne Kasten ---------- */

.spur
{
	display: none;
}

@media (min-width: 86rem)
{
	.spur
	{
		display: grid;
		gap: .9rem;
		position: fixed;
		left: max(1rem, calc((100vw - 72rem) / 2 - 3.2rem));
		top: 42%;
		z-index: 30;
		padding-left: .55rem;
		border-left: 1px solid rgba(27,42,74,.2);
	}

	.spur a,
	.spur button
	{
		display: block;
		padding: 0;
		background: none;
		border: 0;
		line-height: 0;
		color: var(--grau);
		cursor: pointer;
		transition: color .2s ease;
	}

	.spur svg
	{
		width: 1.15rem;
		height: 1.15rem;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.spur a:hover,
	.spur a:focus-visible,
	.spur button:hover,
	.spur button:focus-visible,
	.spur .kopiert
	{
		color: var(--signal);
	}
}

/* Die zwei JavaScript-Elemente bleiben ohne Skript verborgen */
.weitersagen__links [hidden],
.spur [hidden]
{
	display: none;
}