:root
{
	--creme: #f4efe6;
	--creme-tief: #eae2d4;
	--tinte: #221e1b;
	--tinte-weich: #4d453d;
	--gruen: #1f8f2c;
	--linie: rgba(34,30,27,.16);

	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

*
{
	box-sizing: border-box;
}

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

body
{
	margin: 0;
	background: var(--creme);
	color: var(--tinte);
	font-family: var(--serif);
	font-size: clamp(1.02rem, .55vw + .9rem, 1.14rem);
	line-height: 1.66;
	overflow-x: clip;
}

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

p
{
	margin: 0 0 1.1em;
}

a
{
	color: inherit;
}

/* ---------- Grundraster ---------- */

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

.eng
{
	max-width: 34rem;
}

.marke
{
	margin: 0 0 1.4rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-family: var(--serif);
	font-variant-numeric: lining-nums;
	color: var(--gruen);
}

.marke--hell
{
	color: #7fd08b;
}

h1, h2, h3
{
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.015em;
	margin: 0;
}

/* ---------- Titel ---------- */

.titel
{
	padding: clamp(3.5rem, 9vw, 7rem) 0 0;
}

.titel h1
{
	font-size: clamp(2.3rem, 6.4vw, 4.6rem);
	max-width: 20ch;
}

.titel h1 .zeile
{
	display: block;
}

.titel h1 em
{
	font-style: italic;
	color: var(--gruen);
}

.titel__vor
{
	max-width: 46rem;
}

.titel__nach
{
	margin-top: 2.2rem;
	max-width: 30rem;
	font-size: 1.06rem;
	color: var(--tinte-weich);
}

/* Bild ragt über die Sektionsgrenze in die dunkle Fläche hinein */
.titel__bild
{
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	margin-bottom: calc(-1 * clamp(3rem, 8vw, 7rem));
	position: relative;
	z-index: 2;
}

.titel__bild img
{
	width: 100%;
	border-radius: 3px;
}

/* ---------- Dunkle Fläche: die Pflicht ---------- */

.pflicht
{
	background: var(--tinte);
	color: var(--creme);
	padding: calc(clamp(3rem, 8vw, 7rem) + clamp(3.5rem, 8vw, 6rem)) 0 clamp(3.5rem, 8vw, 6rem);
}

.pflicht h2
{
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	max-width: 22ch;
	margin-bottom: 1.6rem;
}

.pflicht p
{
	color: rgba(244,239,230,.84);
}

.pflicht__paar
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	margin-top: 2.5rem;
}

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

.merk
{
	border-top: 1px solid rgba(244,239,230,.28);
	padding-top: 1.2rem;
}

.merk b
{
	display: block;
	font-weight: 400;
	font-size: 1.25rem;
	margin-bottom: .45rem;
	color: #fff;
}

.merk p
{
	margin: 0;
	font-size: .98rem;
}

/* ---------- TierChip ---------- */

.chip
{
	padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.chip__raster
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

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

.chip__bild img
{
	width: 100%;
	border-radius: 3px;
}

.chip h2
{
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	margin-bottom: 1.4rem;
	max-width: 18ch;
}

.logo
{
	margin: 0 0 1.8rem;
}

.logo img
{
	width: min(15rem, 70%);
}

.logo figcaption
{
	margin-top: .7rem;
	font-size: .84rem;
	color: var(--tinte-weich);
	max-width: 26rem;
}

/* ---------- Auffächernde Karten ---------- */

.stapel
{
	background: var(--creme-tief);
	padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.stapel h2
{
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	margin-bottom: 2.8rem;
	max-width: 24ch;
}

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

.karte
{
	min-width: 0;
	background: #fffdf9;
	border: 1px solid var(--linie);
	border-radius: 3px;
	padding: clamp(1.6rem, 3vw, 2.2rem);
	position: relative;
	/* Ausgangslage des Auffächerns — ohne JS bleibt sie so und stört nicht */
	transition: transform .7s cubic-bezier(.2,.7,.25,1), opacity .7s ease;
}

.karte__zahl
{
	display: block;
	font-size: .78rem;
	letter-spacing: .2em;
	color: var(--gruen);
	margin-bottom: 1rem;
	font-variant-numeric: lining-nums;
}

.karte b
{
	display: block;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.25;
	margin-bottom: .7rem;
}

.karte p
{
	margin: 0;
	font-size: .97rem;
	color: var(--tinte-weich);
}

/* Der Effekt: gestapelt liegend, fächert beim Hereinscrollen auf */
.faecher .karte
{
	transform: translateY(2.2rem) rotate(-1.4deg);
	opacity: 0;
}

.faecher .karte:nth-child(2)
{
	transform: translateY(2.2rem) rotate(.9deg);
}

.faecher .karte:nth-child(3)
{
	transform: translateY(2.2rem) rotate(-.5deg);
}

.faecher.auf .karte
{
	transform: none;
	opacity: 1;
}

.faecher.auf .karte:nth-child(2)
{
	transition-delay: .13s;
}

.faecher.auf .karte:nth-child(3)
{
	transition-delay: .26s;
}

/* ---------- Was der Käufer sieht ---------- */

.sicht
{
	padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.sicht__raster
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

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

.sicht h2
{
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	margin-bottom: 1.4rem;
	max-width: 20ch;
}

.sicht__bild img
{
	width: 100%;
	border-radius: 3px;
}

.zitat
{
	margin: 2rem 0 0;
	padding-left: 1.4rem;
	border-left: 3px solid var(--gruen);
	font-size: 1.12rem;
	font-style: italic;
	color: var(--tinte);
}

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

/* ---------- Siegel und Prüfung ---------- */

.zert
{
	background: var(--tinte);
	color: var(--creme);
	padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.zert__raster
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

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

.zert h2
{
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	margin-bottom: 1.4rem;
}

.zert p
{
	color: rgba(244,239,230,.84);
}

/* heller Kreis, damit das schwarz-grüne Siegel auf der dunklen Fläche trägt */
.siegel
{
	margin: 0;
	justify-self: center;
}

.siegel a
{
	display: block;
	width: min(15rem, 62vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--creme);
	padding: 1.1rem;
}

.siegel img
{
	width: 100%;
}

.knopf
{
	display: inline-block;
	margin-top: .6rem;
	padding: .85rem 1.7rem;
	background: var(--gruen);
	color: #fff;
	text-decoration: none;
	border-radius: 2px;
	font-size: .96rem;
	letter-spacing: .02em;
}

.knopf:hover
{
	background: #1a7524;
}

/* ---------- Querlinks als Register mit Punktführung ---------- */

.themen
{
	padding: clamp(3rem, 7vw, 5rem) 0;
	background: var(--creme-tief);
}

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

.themen h2
{
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 2rem;
	color: var(--tinte-weich);
}

.register
{
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: clamp(2rem, 5vw, 4rem);
}

.register li
{
	break-inside: avoid;
	margin-bottom: .9rem;
}

.register a
{
	display: flex;
	align-items: baseline;
	gap: .5rem;
	text-decoration: none;
	font-size: .98rem;
	line-height: 1.35;
}

/* Punktführung wie in einem Inhaltsverzeichnis */
.register a::after
{
	content: "";
	flex: 1 1 auto;
	border-bottom: 1px dotted rgba(34,30,27,.42);
	transform: translateY(-.22em);
	min-width: 1.5rem;
}

.register a:hover span
{
	color: var(--gruen);
}

@media (max-width: 40rem)
{
	.register
	{
		columns: 1;
	}
}

/* ---------- Impressum, tabellarisch ---------- */

.fuss
{
	padding: clamp(3rem, 7vw, 4.5rem) 0 3.5rem;
	font-size: .88rem;
	color: var(--tinte-weich);
}

.fuss dl
{
	margin: 0;
	display: grid;
	grid-template-columns: minmax(min(9rem, 40%), max-content) 1fr;
	gap: .55rem clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	max-width: 46rem;
}

.fuss dt
{
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(34,30,27,.5);
}

.fuss dd
{
	margin: 0;
	min-width: 0;
}

.fuss dd a
{
	color: var(--tinte);
	text-decoration: underline;
	text-decoration-color: var(--gruen);
	text-underline-offset: .18em;
}

.fuss__linie
{
	border: 0;
	border-top: 1px solid var(--linie);
	margin: 0 0 2.2rem;
}

.fuss__schluss
{
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--linie);
	font-size: .8rem;
	max-width: 46rem;
}

/* ---------- Scroll-Effekt: Titelzeilen erscheinen zeilenweise ---------- */

.zeile
{
	opacity: 0;
	transform: translateY(.5em);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.25,1);
}

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

.steig
{
	opacity: 0;
	transform: translateY(1.3rem);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1);
}

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

/* Ohne JS und bei reduzierter Bewegung ist alles sofort sichtbar */
.kein-js .zeile,
.kein-js .steig,
.kein-js .faecher .karte
{
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce)
{
	.zeile,
	.steig,
	.faecher .karte,
	.faecher .karte:nth-child(2),
	.faecher .karte:nth-child(3)
	{
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------- Weitergeben: Zeilen mit Symbol an der linken Kante ---------- */

.weiter
{
	padding: clamp(2.6rem, 6vw, 4rem) 0;
}

.weiter__satz
{
	max-width: 34rem;
	margin: 0;
	color: var(--tinte-weich);
}

.weiter__spalte
{
	margin-top: clamp(1.6rem, 4vw, 2.4rem);
	max-width: 26rem;
	border-top: 1px solid var(--linie);
}

.weiter__el
{
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: .8rem 0;
	border: 0;
	border-bottom: 1px solid var(--linie);
	background: none;
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--tinte);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.weiter__el[hidden]
{
	display: none;
}

.weiter__sym
{
	flex: none;
	box-sizing: content-box;
	padding: .48rem;
	border: 1px solid var(--linie);
	border-radius: 50%;
	color: var(--gruen);
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.weiter__el:hover .weiter__sym,
.weiter__el:focus-visible .weiter__sym
{
	background: var(--gruen);
	border-color: var(--gruen);
	color: #fff;
}

.weiter__el:hover span,
.weiter__el:focus-visible span
{
	color: var(--gruen);
}

.weiter__el:focus-visible
{
	outline: 2px solid var(--gruen);
	outline-offset: .25rem;
}

/* ---------- Leiste: links, Kreise in einer Spalte ---------- */

.leiste
{
	display: none;
}

@media (min-width: 95rem)
{
	.leiste
	{
		position: fixed;
		left: 1rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
		display: flex;
		flex-direction: column;
		gap: .45rem;
	}

	.leiste__el
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.6rem;
		height: 2.6rem;
		border: 1px solid var(--linie);
		border-radius: 50%;
		background: var(--creme);
		color: var(--tinte-weich);
		cursor: pointer;
		transition: background .3s ease, border-color .3s ease, color .3s ease;
	}

	.leiste__el[hidden]
	{
		display: none;
	}

	.leiste__el:hover,
	.leiste__el:focus-visible,
	.leiste__el.ist-kopiert
	{
		background: var(--gruen);
		border-color: var(--gruen);
		color: #fff;
	}

	.leiste__el:focus-visible
	{
		outline: 2px solid var(--gruen);
		outline-offset: 2px;
	}
}