:root
{
	--ocker:      #d8a03e;
	--ocker-tief: #b8822c;
	--papier:     #f5eeda;
	--papier-2:   #ebe0c4;
	--tinte:      #241a0e;
	--tinte-2:    #4d3d24;
	--blau:       #1d3f7a;
	--blau-hell:  #7fa3d8;

	--serif:   "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--grotesk: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

*
{
	box-sizing: border-box;
}

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

body
{
	margin: 0;
	background: var(--ocker);
	color: var(--tinte);
	font-family: var(--grotesk);
	font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

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

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

a
{
	color: inherit;
}

strong
{
	font-weight: 700;
}

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

.schmal
{
	max-width: 39rem;
}

/* ---------- Typografie: Serif-Kapitälchen als Titel ---------- */

h1,
h2
{
	font-family: var(--serif);
	font-weight: 400;
	font-variant: small-caps;
	letter-spacing: .04em;
	line-height: 1.12;
	margin: 0 0 1.4rem;
}

h1
{
	font-size: clamp(2.1rem, 1rem + 4.6vw, 4.3rem);
}

h2
{
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
}

h3
{
	margin: 0 0 .5rem;
	font-family: var(--grotesk);
	font-size: 1.1rem;
	font-weight: 700;
}

.marke
{
	margin: 0 0 1.3rem;
	font-family: var(--grotesk);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--blau);
}

.gross
{
	font-family: var(--serif);
	font-size: clamp(1.2rem, 1.08rem + .75vw, 1.65rem);
	line-height: 1.45;
}

/* ---------- Bilder wie ins Zuchtbuch eingeklebt ---------- */

.eingeklebt
{
	margin: 0;
	background: var(--papier);
	padding: clamp(.6rem, 1.4vw, 1rem);
	box-shadow: 0 1px 0 rgba(36,26,14,.18), 0 10px 24px rgba(36,26,14,.14);
}

.eingeklebt img
{
	width: 100%;
}

.eingeklebt figcaption
{
	margin-top: .8rem;
	padding: 0 .2rem .2rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--tinte-2);
}

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

.kopf
{
	padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.kopf__raster
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: clamp(1.8rem, 4vw, 3.5rem);
	align-items: center;
}

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

.kopf p
{
	max-width: 30rem;
	font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem);
}

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

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

/* ---------- Der Merksatz ---------- */

.satz
{
	background: var(--tinte);
	color: var(--papier);
	text-align: center;
}

.satz p
{
	margin: 0 auto;
	max-width: 20ch;
	font-family: var(--serif);
	font-variant: small-caps;
	font-size: clamp(1.9rem, 1rem + 4vw, 3.9rem);
	line-height: 1.1;
	letter-spacing: .04em;
	color: #fff;
}

.satz span
{
	display: block;
	margin-top: 1.6rem;
	font-family: var(--grotesk);
	font-size: .7rem;
	font-variant: normal;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--blau-hell);
}

/* ---------- Die Ahnentafel auf Papier ---------- */

.tafelteil
{
	background: var(--papier);
}

.tafel
{
	margin-top: clamp(2.2rem, 5vw, 3.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.8rem);
	align-items: stretch;
}

.gen
{
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.gen__kopf
{
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tinte-2);
	padding-bottom: .5rem;
	border-bottom: 1px solid rgba(36,26,14,.28);
	margin-bottom: .3rem;
}

.feld
{
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 3.1rem;
	padding: .55rem .8rem;
	border: 1px solid rgba(36,26,14,.3);
	font-size: .88rem;
	line-height: 1.3;
	background: rgba(255,255,255,.5);
}

.feld--bekannt
{
	border-color: var(--blau);
	border-left-width: 4px;
	background: #fff;
	font-weight: 700;
}

/* die hinteren Generationen haben vier bzw. acht Felder — schmaler setzen,
   damit die Spalten gleich hoch bleiben wie in einer gedruckten Ahnentafel */
.gen--dicht .feld
{
	min-height: 2.3rem;
	padding: .3rem .6rem;
	font-size: .78rem;
	line-height: 1.25;
}

/* das Elterntier ohne Papiere — bekannt, aber der Zweig endet hier */
.feld--quelle
{
	border-color: var(--blau);
	border-left-width: 4px;
	border-style: dashed;
	background: rgba(29,63,122,.07);
	font-weight: 700;
	color: var(--blau);
}

/* die Lücke: gestrichelt, leer, ohne Text */
.feld--leer
{
	border-style: dashed;
	border-color: rgba(36,26,14,.32);
	background: transparent;
	color: rgba(36,26,14,.42);
	font-style: italic;
}

.tafel__hinweis
{
	margin-top: 1.8rem;
	font-size: .88rem;
	color: var(--tinte-2);
	max-width: 44rem;
}

/* Aufbau der Tafel beim Hereinscrollen, Spalte für Spalte */
.tafel .gen
{
	opacity: 0;
	transform: translateY(.8rem);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.25,1);
}

.tafel.auf .gen
{
	opacity: 1;
	transform: none;
}

.tafel.auf .gen:nth-child(2) { transition-delay: .14s; }
.tafel.auf .gen:nth-child(3) { transition-delay: .28s; }
.tafel.auf .gen:nth-child(4) { transition-delay: .42s; }

.kein-js .tafel .gen
{
	opacity: 1;
	transform: none;
}

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

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

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

.folge
{
	margin: 1.8rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: schritt;
}

.folge li
{
	position: relative;
	padding: 0 0 1.1rem 2.6rem;
	counter-increment: schritt;
}

.folge li::before
{
	content: counter(schritt);
	position: absolute;
	left: 0;
	top: .15rem;
	width: 1.7rem;
	height: 1.7rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--blau);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
}

.folge li:last-child
{
	padding-bottom: 0;
}

/* ---------- ZEUS ---------- */

.zeus
{
	background: var(--tinte);
	color: var(--papier);
}

.zeus h2
{
	color: #fff;
}

.zeus .marke
{
	color: var(--blau-hell);
}

.zeus p
{
	color: rgba(245,238,218,.85);
}

/* Die beiden Siegel als Eintragskette am blauen Rand — dieselbe Randspalte,
   mit der auch die Ahnentafel ihre bekannten Felder markiert. Oben die
   Voraussetzung beim Elterntier, darunter, kleiner beginnend und größer
   endend, das Ergebnis beim Welpen. */

.kette
{
	margin: clamp(2.4rem, 5vw, 3.4rem) 0 0;
	max-width: 32rem;
	border-left: 2px solid var(--blau);
	padding-left: clamp(1.1rem, 3vw, 1.9rem);
}

.kette__stufe
{
	margin: 0;
}

.kette__gen
{
	margin: 0 0 .8rem;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--blau-hell);
	border-bottom: 1px solid rgba(127,163,216,.35);
	padding-bottom: .5rem;
}

/* die Siegel sind schwarze Linien — auf der dunklen Fläche stehen sie
   wie die Bilder oben auf hellem Papier, eingeklebt */
.kette__blatt
{
	display: block;
	background: var(--papier);
	padding: clamp(.6rem, 1.4vw, .95rem);
	box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.3);
}

.kette__blatt img
{
	width: 100%;
}

.kette__stufe--voraus .kette__blatt { width: min(9.5rem, 46vw); }
.kette__stufe--ergebnis .kette__blatt { width: min(13rem, 62vw); }

.kette figcaption
{
	margin-top: .9rem;
	font-size: .82rem;
	line-height: 1.55;
	color: rgba(245,238,218,.78);
}

/* der Schritt von der einen Zeile zur nächsten */
.kette__ab
{
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 1.5rem 0;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--blau-hell);
}

.kette__ab::before
{
	content: "";
	width: 2.6rem;
	height: 1px;
	background: var(--blau-hell);
	flex: none;
}

.knopf
{
	display: inline-block;
	margin-top: 1.8rem;
	padding: .95rem 2.2rem;
	background: var(--blau);
	color: #fff;
	text-decoration: none;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.knopf:hover
{
	background: #16305d;
}

/* ---------- Querlinks: Fließband mit senkrechten Strichen ---------- */

.themen
{
	background: var(--ocker-tief);
	padding: clamp(2.5rem, 6vw, 4rem) 0;
}

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

.themen h2
{
	font-family: var(--grotesk);
	font-variant: normal;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(36,26,14,.65);
	margin-bottom: 1.2rem;
}

.strich
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem 0;
}

.strich li
{
	min-width: 0;
	display: flex;
	align-items: center;
}

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

/* der senkrechte Trennstrich zwischen den Einträgen */
.strich li:not([hidden]) + li:not([hidden])::before
{
	content: "";
	width: 1px;
	height: 1.1em;
	margin: 0 1rem;
	background: rgba(36,26,14,.42);
	flex: none;
}

.strich a
{
	text-decoration: none;
	font-size: .95rem;
	color: var(--tinte);
	border-bottom: 1px solid transparent;
}

.strich a:hover
{
	border-bottom-color: var(--tinte);
}

/* ---------- Impressum als schmale Randspalte ---------- */

.fuss
{
	padding: clamp(2.5rem, 6vw, 4rem) 0 3.5rem;
}

.fuss__raster
{
	display: grid;
	grid-template-columns: minmax(min(16rem, 100%), 20rem) 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
}

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

.fuss__spalte
{
	font-size: .8rem;
	line-height: 1.75;
	color: var(--tinte-2);
	border-left: 2px solid var(--blau);
	padding-left: 1.2rem;
}

.fuss__spalte p
{
	margin-bottom: 1rem;
}

.fuss b
{
	display: block;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blau);
}

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

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

/* ---------- Bewegung ---------- */

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

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

.kein-js .steig
{
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce)
{
	.steig,
	.tafel .gen
	{
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------- Weitergeben: großer Satz, kleine Elemente darunter ---------- */

.weiter
{
	background: var(--papier);
	padding: clamp(2.6rem, 6vw, 4.2rem) 0;
}

.weiter__satz
{
	margin: 0;
	max-width: 26ch;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
	line-height: 1.18;
	letter-spacing: .01em;
	color: var(--tinte);
}

.weiter__reihe
{
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem 2.4rem;
	margin-top: clamp(1.8rem, 4vw, 2.6rem);
	padding-top: 1.4rem;
	border-top: 1px solid rgba(36, 26, 14, .22);
}

.weiter__el
{
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--grotesk);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--tinte-2);
	text-decoration: none;
	cursor: pointer;
}

.weiter__el[hidden]
{
	display: none;
}

.weiter__sym
{
	color: var(--blau);
}

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

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

/* ---------- Leiste: rechts, Randspalte am blauen Strich ---------- */

.leiste
{
	display: none;
}

@media (min-width: 95rem)
{
	.leiste
	{
		position: fixed;
		right: .9rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
		display: flex;
		flex-direction: column;
		gap: .55rem;
		padding: .8rem .7rem;
		background: var(--papier);
		border-left: 2px solid var(--blau);
	}

	.leiste__el
	{
		display: block;
		padding: 0;
		border: 0;
		background: none;
		color: var(--tinte-2);
		cursor: pointer;
	}

	.leiste__el[hidden]
	{
		display: none;
	}

	.leiste__el:hover,
	.leiste__el:focus-visible,
	.leiste__el.ist-kopiert
	{
		color: var(--blau);
	}

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