/* ------------------------------------------------------------------
   naturstummelrute.zuchtprogramm.com
   Farbwelt aus den Bildern: sehr dunkles Bordeaux als Grundfläche,
   Leinen als Schrift- und Flächenfarbe.
   Typografie: eine Serif — neu ist der Satz: der Fließtext läuft
   zweispaltig wie in einem Dokument, die Überschriften laufen über
   beide Spalten.
   Layout: Dokumentensatz mit einem Musterformular als Hauptmotiv.
   Effekt: die Tintenlinie läuft durch die Musterzeilen, die
   Einträge werden sichtbar.
   ------------------------------------------------------------------ */

*
{
	box-sizing: border-box;
}

:root
{
	--bordeaux: #4a1620;
	--bordeaux2: #350f17;
	--bordeaux3: #7b2a36;
	--leinen: #e6dcc7;
	--leinen2: #c3b696;
	--tinte: #2b1013;

	--serif: Iowan Old Style, "Palatino Linotype", Palatino, Georgia, serif;
	--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

body
{
	margin: 0;
	background: var(--bordeaux);
	color: var(--leinen);
	font: 400 clamp(1rem, .96rem + .3vw, 1.1rem)/1.78 var(--serif);
}

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

a
{
	color: inherit;
}

.satz
{
	max-width: 60rem;
	margin: 0 auto;
	padding: 0 clamp(1.3rem, 5vw, 3rem);
}

section
{
	padding: clamp(2.4rem, 6vw, 4.2rem) 0;
}

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

.kopf
{
	padding: clamp(2.8rem, 8vw, 5rem) 0 clamp(1.8rem, 4vw, 2.6rem);
	border-bottom: 1px solid var(--bordeaux3);
}

.marke
{
	margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
	font-family: var(--sans);
	font-size: .69rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--leinen2);
}

h1
{
	margin: 0;
	max-width: 21ch;
	font-weight: 400;
	font-size: clamp(1.8rem, 1rem + 3.6vw, 3.1rem);
	line-height: 1.14;
}

.vorspann
{
	max-width: 40rem;
	margin: clamp(1.4rem, 3.5vw, 2rem) 0 0;
	color: #d6c9ae;
}

/* --- Zweispaltiger Dokumentensatz ------------------------------------- */

h2
{
	margin: 0 0 1.1rem;
	font-family: var(--sans);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--leinen2);
}

.spalten
{
	columns: 2 20rem;
	column-gap: clamp(1.8rem, 4vw, 3.2rem);
	orphans: 3;
	widows: 3;
}

.spalten p
{
	margin: 0 0 1.05rem;
}

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

.gross
{
	max-width: 28ch;
	margin: 0;
	font-size: clamp(1.35rem, 1rem + 1.8vw, 2.15rem);
	line-height: 1.24;
}

/* --- Bilder ------------------------------------------------------------ */

.voll
{
	margin: 0;
}

.voll img
{
	width: 100%;
}

figcaption
{
	max-width: 60rem;
	margin: 0 auto;
	padding: .75rem clamp(1.3rem, 5vw, 3rem) 0;
	font-family: var(--sans);
	font-size: .84rem;
	line-height: 1.6;
	color: var(--leinen2);
}

.zwei
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: clamp(1.6rem, 4vw, 2.8rem);
	align-items: center;
}

.zwei figure
{
	margin: 0;
	min-width: 0;
}

.zwei figcaption
{
	max-width: none;
	margin: 0;
	padding: .6rem 0 0;
}

.zwei > div
{
	min-width: 0;
}

/* --- Das Musterformular ------------------------------------------------ */

.formular
{
	background: var(--leinen);
	color: var(--tinte);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	max-width: 42rem;
	margin: clamp(1.8rem, 4vw, 2.4rem) 0 0;
}

.formular b
{
	display: block;
	font-family: var(--sans);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #7b2a36;
	margin-bottom: 1.2rem;
}

.zeile
{
	margin: 0 0 1.1rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid #b9ab8b;
	font-size: .98rem;
	line-height: 1.6;
}

.zeile span
{
	display: block;
	font-family: var(--sans);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a7c60;
	margin-bottom: .2rem;
}

.zeile i
{
	display: inline-block;
	font-style: normal;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.1s ease;
}

.formular.da .zeile i,
.kein-js .zeile i
{
	clip-path: inset(0 0 0 0);
}

.formular.da .zeile:nth-child(3) i { transition-delay: .35s; }
.formular.da .zeile:nth-child(4) i { transition-delay: .7s; }
.formular.da .zeile:nth-child(5) i { transition-delay: 1.05s; }

.formular__unter
{
	margin: 0;
	font-family: var(--sans);
	font-size: .84rem;
	line-height: 1.65;
	color: #6d5f48;
}

/* --- Siegel: als Beiblatt im Dokumentensatz ---------------------------- */

.beiblatt
{
	background: var(--leinen);
	color: var(--tinte);
	max-width: 42rem;
	margin: clamp(1.8rem, 4vw, 2.4rem) 0 0;
	padding: clamp(1.4rem, 3.5vw, 2.2rem);
	display: grid;
	gap: clamp(1rem, 3vw, 1.8rem);
	align-items: center;
}

@media (min-width: 40rem)
{
	.beiblatt
	{
		grid-template-columns: 10rem minmax(0, 1fr);
	}
}

.beiblatt a
{
	display: block;
	max-width: 10rem;
}

.beiblatt img
{
	width: 100%;
}

.beiblatt figcaption
{
	font-size: .92rem;
	line-height: 1.66;
}

.beiblatt figcaption b
{
	display: block;
	font-family: var(--sans);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #7b2a36;
	margin-bottom: .5rem;
}

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

.knopf
{
	display: inline-block;
	margin-top: clamp(1.4rem, 3.5vw, 2rem);
	padding: .9rem 2.1rem;
	background: var(--leinen);
	color: var(--bordeaux2);
	font-family: var(--sans);
	font-size: .93rem;
	font-weight: 700;
	text-decoration: none;
}

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

.betreuung
{
	max-width: 40rem;
	margin: clamp(1.4rem, 3.5vw, 2rem) 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--bordeaux3);
	font-family: var(--sans);
	font-size: .92rem;
	line-height: 1.7;
}

.betreuung b
{
	display: block;
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--leinen2);
}

/* --- Querlinks: dreispaltig, Unterstreichung wird dicker ---------------- */

.themen
{
	background: var(--bordeaux2);
}

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

.themenliste
{
	list-style: none;
	margin: clamp(1.4rem, 4vw, 2rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: clamp(.9rem, 2.4vw, 1.6rem);
	font-family: var(--sans);
	font-size: .88rem;
}

.themenliste li
{
	min-width: 0;
	line-height: 1.5;
}

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

.themenliste a
{
	text-decoration: none;
	border-bottom: 1px solid var(--bordeaux3);
	transition: border-bottom-width .15s ease;
}

.themenliste a:hover,
.themenliste a:focus
{
	border-bottom: 4px solid var(--leinen2);
}

/* --- Fuß: Formularzeilen ------------------------------------------------ */

.fuss
{
	background: var(--leinen);
	color: var(--tinte);
	padding: clamp(2.4rem, 6vw, 3.6rem) 0 clamp(3rem, 7vw, 4.4rem);
	font-family: var(--sans);
	font-size: .85rem;
	line-height: 1.7;
}

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

.fuss__feld
{
	min-width: 0;
	border-bottom: 1px dotted #a3957a;
	padding-bottom: .5rem;
}

.fuss__feld b
{
	display: block;
	font-size: .66rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8a7c60;
}

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

/* --- Weitergeben --------------------------------------------------------
   Der Block ist oben und unten von einer gestrichelten Linie eingefasst,
   wie ein Abschnitt, der aus einem Formular herausgetrennt wird. Sonst
   keine Fläche, keine Rahmen an den Seiten.
   ------------------------------------------------------------------------ */

.umlauf
{
	padding-top: 0;
}

.umlauf__feld
{
	border-top: 1px dashed var(--leinen2);
	border-bottom: 1px dashed var(--leinen2);
	padding: clamp(1.5rem, 3.6vw, 2.3rem) 0;
}

.umlauf__satz
{
	max-width: 42rem;
	margin: 0;
	line-height: 1.7;
}

.umlauf__wege
{
	margin: clamp(1.2rem, 2.8vw, 1.8rem) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem 1.6rem;
	font-family: var(--sans);
}

.umlauf__wege a,
.umlauf__wege button
{
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--leinen);
	text-decoration: none;
	cursor: pointer;
	transition: color .3s ease;
}

.umlauf__wege a:hover,
.umlauf__wege button:hover,
.umlauf__wege a:focus-visible,
.umlauf__wege button:focus-visible
{
	color: var(--leinen2);
}

.umlauf__wege svg
{
	width: 1rem;
	height: 1rem;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.umlauf__wege [hidden]
{
	display: none;
}

/* --- Die mitlaufende Leiste: links, eine Heftung am Rand des Dokuments.
   Der Satzspiegel misst 60rem samt Innenrand. --- */

.heft
{
	display: none;
}

@media (min-width: 80rem)
{
	.heft
	{
		display: grid;
		gap: 1.3rem;
		justify-items: center;
		position: fixed;
		left: clamp(1.1rem, 2.6vw, 2.6rem);
		top: 46%;
		transform: translateY(-46%);
		padding-left: .9rem;
		border-left: 1px dashed var(--bordeaux3);
		z-index: 5;
	}

	.heft a,
	.heft button
	{
		display: block;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		color: var(--leinen2);
		cursor: pointer;
		transition: color .3s ease;
	}

	.heft a:hover,
	.heft button:hover,
	.heft a:focus-visible,
	.heft button:focus-visible
	{
		color: var(--leinen);
	}

	.heft svg
	{
		width: 1.2rem;
		height: 1.2rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.heft [hidden]
	{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.umlauf__wege a,
	.umlauf__wege button,
	.heft a,
	.heft button
	{
		transition: none;
	}
}