:root
{
	--kobalt: #1240c8;
	--kobalt-tief: #0a2585;
	--kalk: #f3efe6;
	--rot: #cf3324;
	--rot-hell: #ff9b83;
	--tinte: #101b3a;
	--rand: clamp(1.1rem, 4vw, 3.4rem);
}

*
{
	box-sizing: border-box;
}

html
{
	-webkit-text-size-adjust: 100%;
}

body
{
	margin: 0;
	background: var(--kobalt);
	color: var(--kalk);
	font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
	line-height: 1.62;
	overflow-x: hidden;
}

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

a
{
	color: inherit;
}

.bahn
{
	max-width: 74rem;
	margin: 0 auto;
	padding-inline: var(--rand);
}

/* ---------- Typografie: jede Überschrift springt in die zweite Zeile ---------- */

h1, h2
{
	margin: 0 0 0.7em;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

h1
{
	font-size: clamp(2.35rem, 1.1rem + 5.6vw, 5rem);
}

h2
{
	font-size: clamp(1.7rem, 1.05rem + 2.5vw, 2.85rem);
}

.ab
{
	display: block;
	margin-inline-start: 1.6ch;
	color: var(--rot);
}

.kopf .ab,
.merk .ab,
.schluss .ab
{
	color: var(--rot-hell);
}

.marke
{
	display: block;
	margin-bottom: 1.1rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--rot);
}

.kopf .marke
{
	color: var(--rot-hell);
}

p
{
	margin: 0 0 1.15em;
	max-width: 40rem;
}

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

/* ---------- Kopf ---------- */

.kopf
{
	padding-block: clamp(2.4rem, 7vw, 5.2rem) 0;
}

.kopf__unter
{
	font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.3rem);
	max-width: 36rem;
	color: #dfe6ff;
}

.kopf__bild
{
	margin: clamp(2rem, 6vw, 4rem) 0 0;
}

.kopf__bild img
{
	width: 100%;
}

.kopf__bild figcaption
{
	margin-top: 0.9rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: #cfd9ff;
	max-width: 34rem;
}

/* ---------- Sprunghöhen: nichts steht auf einer Grundlinie ---------- */

.stufe
{
	padding-block: clamp(2.6rem, 8vw, 5.4rem);
}

.stufe__gitter
{
	display: grid;
	gap: clamp(1.4rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	align-items: start;
}

.stufe__gitter > *
{
	min-width: 0;
}

.karte
{
	background: var(--kalk);
	color: var(--tinte);
	padding: clamp(1.5rem, 4vw, 2.9rem);
	border-top: 6px solid var(--rot);
}

.karte--breit
{
	max-width: 46rem;
}

.bildfeld figcaption
{
	margin-top: 0.85rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: #d8e0ff;
}

.bildfeld img
{
	width: 100%;
}

/* Der Höhenversatz selbst — erst ab genug Breite, sonst stapelt alles ruhig. */

.hoch,
.tief,
.mitte
{
	--y: 0rem;
}

@media (min-width: 62rem)
{
	.hoch  { --y: -3.6rem; }
	.tief  { --y:  3.2rem; }
	.mitte { --y: -1.4rem; }

	.stufe
	{
		padding-block: clamp(3rem, 7vw, 5rem);
	}
}

.spring
{
	transform: translateY(var(--y, 0rem));
}

/* ---------- Flächenwechsel ---------- */

.tiefblau
{
	background: var(--kobalt-tief);
}

.merk
{
	padding-block: clamp(3rem, 9vw, 6rem);
}

.merk p
{
	margin: 0;
	max-width: 44rem;
	font-size: clamp(1.35rem, 0.95rem + 1.9vw, 2.15rem);
	line-height: 1.24;
	font-weight: 700;
	letter-spacing: -0.012em;
}

.merk p span
{
	display: block;
	margin-top: 1.1rem;
	margin-inline-start: 1.6ch;
	font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.1rem);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	color: #cfd9ff;
}

/* ---------- Liste im Prüfabschnitt ---------- */

.punkte
{
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.punkte li
{
	position: relative;
	padding-left: 2.1rem;
	margin-bottom: 0.95rem;
	max-width: 38rem;
}

.punkte li:last-child
{
	margin-bottom: 0;
}

.punkte li::before
{
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 1.2rem;
	height: 3px;
	background: var(--rot);
}

/* ---------- Schluss ---------- */

.schluss
{
	padding-block: clamp(3rem, 9vw, 6rem);
}

.schluss__gitter
{
	display: grid;
	gap: clamp(1.8rem, 5vw, 3.4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	align-items: start;
}

.schluss__gitter > *
{
	min-width: 0;
}

.knopf
{
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.95rem 1.7rem;
	background: var(--rot);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 4px solid #8f1d12;
}

.knopf:hover,
.knopf:focus
{
	background: #e0402f;
}

.siegel
{
	margin: 0;
	background: var(--kalk);
	padding: clamp(1.2rem, 3vw, 2rem);
}

.siegel img
{
	width: min(15rem, 100%);
	margin-inline: auto;
}

.siegel figcaption
{
	margin-top: 1rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--tinte);
}

/* ---------- Querlinks: ein Sprungband ---------- */

.themen
{
	padding-block: clamp(2.8rem, 8vw, 5rem);
	background: var(--kobalt-tief);
}

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

.themen h2
{
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
	color: var(--kalk);
}

.themenliste
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.7rem 0.9rem;
	margin: 2.4rem 0 0;
	padding: 0;
	list-style: none;
}

.themenliste li
{
	display: block;
}

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

.themenliste li:nth-child(3n)   { margin-bottom: 1.7rem; }
.themenliste li:nth-child(3n+1) { margin-bottom: 0.5rem; }
.themenliste li:nth-child(4n)   { margin-bottom: 2.6rem; }

.themenliste a
{
	display: block;
	padding: 0.5rem 0.95rem;
	background: rgba(243, 239, 230, 0.09);
	border-bottom: 2px solid var(--rot-hell);
	font-size: 0.9rem;
	line-height: 1.35;
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.16, 1.2, 0.3, 1), background-color 0.25s ease;
}

.themenliste a:hover,
.themenliste a:focus
{
	background: var(--kalk);
	color: var(--tinte);
	transform: translateY(-0.4rem);
}

/* ---------- Fuß: hier setzt alles wieder auf ---------- */

.fuss
{
	background: var(--kalk);
	color: var(--tinte);
	padding-block: clamp(2.4rem, 6vw, 3.8rem);
	font-size: 0.87rem;
	line-height: 1.6;
}

.fuss__gitter
{
	display: grid;
	gap: clamp(1.4rem, 4vw, 2.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	align-items: end;
}

.fuss__block
{
	min-width: 0;
	padding-bottom: 0.9rem;
	border-bottom: 3px solid var(--rot);
}

.fuss__block:nth-child(1) { padding-top: 3.4rem; }
.fuss__block:nth-child(2) { padding-top: 0.6rem; }
.fuss__block:nth-child(3) { padding-top: 2rem; }

.fuss b
{
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rot);
}

.fuss a
{
	color: var(--tinte);
	text-decoration: none;
	border-bottom: 1px solid var(--rot);
}

/* ---------- Der Absprung ---------- */

@media (prefers-reduced-motion: no-preference)
{
	.js .spring
	{
		opacity: 0;
		transform: translateY(calc(var(--y, 0rem) + 3.4rem));
		transition: opacity 0.5s ease, transform 0.78s cubic-bezier(0.18, 1.32, 0.36, 1);
	}

	.js .spring.da
	{
		opacity: 1;
		transform: translateY(var(--y, 0rem));
	}
}

/* ---------- Weitergeben: fünf gleich große Felder im Raster ---------- */

.reichweite
{
	padding-block: clamp(2.8rem, 8vw, 5rem);
	background: var(--kobalt);
}

.reichweite h2
{
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
	color: var(--kalk);
}

.reichweite__satz
{
	max-width: 40rem;
	margin: 0 0 2rem;
	color: rgba(243, 239, 230, 0.86);
}

.reichweite__raster
{
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.reichweite__raster a,
.reichweite__raster button
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.4rem;
	min-height: 8.4rem;
	padding: 1.1rem;
	background: var(--kalk);
	color: var(--tinte);
	border: 0;
	border-top: 6px solid var(--rot);
	font: inherit;
	font-size: 0.87rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.reichweite__raster a:hover,
.reichweite__raster a:focus,
.reichweite__raster button:hover,
.reichweite__raster button:focus,
.reichweite__raster .kopiert
{
	background: #fff;
	border-top-color: var(--kobalt-tief);
}

.reichweite__raster svg
{
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--rot);
}

/* ---------- Mitscrollende Leiste: rechts, Spalte kleiner Kalkflächen ---------- */

.flanke
{
	display: none;
}

@media (min-width: 88rem)
{
	.flanke
	{
		display: grid;
		gap: 0.3rem;
		position: fixed;
		right: max(0.8rem, calc((100vw - 74rem) / 2 - 3.2rem));
		top: 50%;
		transform: translateY(-50%);
		z-index: 40;
	}

	.flanke a,
	.flanke button
	{
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		background: var(--kalk);
		border: 0;
		color: var(--tinte);
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease;
	}

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

	.flanke a:hover,
	.flanke a:focus,
	.flanke button:hover,
	.flanke button:focus,
	.flanke .kopiert
	{
		background: var(--rot);
		color: #fff;
	}
}

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