/* ------------------------------------------------------------------
   zucht-als-beruf.zuchtprogramm.com
   Farbwelt aus den Bildern: tiefes Rot der Stallwand als Grundfläche,
   kühles Betongrau als zweite Fläche — der kalte Grauton hält die
   Seite von den warmen roten Seiten des Projekts fern.
   Typografie: Grotesk. Neu ist die Ausrichtung: Titel und alle
   Zwischentitel stehen rechtsbündig, der Fließtext linksbündig.
   Layout: rechtsbündige Einwürfe am rechten Rand gegen eine schmale
   Textspalte links, dazwischen zwei vollflächige Bildbänder.
   Effekt: der Vorwurf wird durchgestrichen — eine Linie zieht sich
   beim Scrollen durch den Satz.
   ------------------------------------------------------------------ */

*
{
	box-sizing: border-box;
}

:root
{
	--rot: #7c1e22;
	--rot2: #5d1418;
	--rot3: #a63b3a;
	--beton: #9a9c9b;
	--beton2: #6f7373;
	--hell: #eceae7;
	--dunkel: #23201f;

	--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

body
{
	margin: 0;
	background: var(--rot);
	color: var(--hell);
	font: 400 clamp(1.02rem, .98rem + .3vw, 1.13rem)/1.8 var(--sans);
}

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

a
{
	color: inherit;
}

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

section
{
	padding: clamp(2.6rem, 6vw, 4.4rem) 0;
}

/* --- Kopf mit durchgestrichenem Vorwurf -------------------------------- */

.kopf
{
	padding: clamp(2.8rem, 8vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
	text-align: right;
}

.marke
{
	margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
	font-size: .7rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #e5b9b6;
}

h1
{
	margin: 0 0 0 auto;
	max-width: 18ch;
	font-weight: 700;
	font-size: clamp(1.8rem, 1rem + 4vw, 3.3rem);
	line-height: 1.14;
	letter-spacing: -.015em;
	position: relative;
	display: inline-block;
}

h1::after
{
	content: "";
	position: absolute;
	left: 0;
	top: 52%;
	height: .16rem;
	width: 0;
	background: var(--hell);
	transition: width 1.4s cubic-bezier(.3, .7, .3, 1) .4s;
}

body.streichen h1::after
{
	width: 100%;
}

.kopf__unter
{
	max-width: 38rem;
	margin: clamp(1.6rem, 4vw, 2.4rem) 0 0 auto;
	color: #f0dcda;
}

/* --- Bildbänder --------------------------------------------------------- */

.band
{
	margin: 0;
}

.band img
{
	width: 100%;
}

figcaption
{
	max-width: 64rem;
	margin: 0 auto;
	padding: .8rem clamp(1.3rem, 5vw, 3rem) 0;
	font-size: .84rem;
	line-height: 1.6;
	color: #e3c4c2;
}

/* --- Einwurf-Layout ------------------------------------------------------ */

.teil
{
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 54rem)
{
	.teil
	{
		grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.teil__text
{
	min-width: 0;
	order: 2;
}

h2
{
	min-width: 0;
	order: 1;
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.25rem, 1rem + 1.3vw, 1.9rem);
	line-height: 1.18;
	letter-spacing: -.015em;
	text-align: right;
	align-self: start;
	color: #f3d6d4;
}

@media (min-width: 54rem)
{
	.teil__text { order: 1; }
	h2 { order: 2; }
}

p
{
	margin: 0 0 1.1rem;
}

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

.betonflaeche
{
	background: var(--beton);
	color: var(--dunkel);
}

.betonflaeche h2
{
	color: var(--rot2);
}

.betonflaeche figcaption
{
	color: #45403f;
}

.dunkler
{
	background: var(--rot2);
}

.gross
{
	max-width: 26ch;
	margin: 0 0 0 auto;
	font-weight: 700;
	font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
	line-height: 1.18;
	text-align: right;
	letter-spacing: -.02em;
}

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

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

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

/* --- Zwei Siegel, zwei Blickwinkel — rechtsbündig als Treppe ------------- */

.zweiblick
{
	margin-top: clamp(2.2rem, 5vw, 3.4rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: clamp(1.2rem, 3vw, 2.2rem);
}

.zweiblick figure
{
	margin: 0;
	width: min(100%, 17rem);
	border-top: .16rem solid var(--hell);
	padding-top: 1rem;
	text-align: right;
}

.zweiblick a
{
	display: block;
	background: var(--hell);
	padding: 1rem;
}

.zweiblick img
{
	width: 100%;
}

.zweiblick figcaption
{
	max-width: none;
	margin: 0;
	padding: .9rem 0 0;
	text-align: right;
	color: #f0dcda;
	font-size: .85rem;
	line-height: 1.55;
}

.zweiblick b
{
	display: block;
	margin-bottom: .4rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #e5b9b6;
}

@media (min-width: 54rem)
{
	.zweiblick figure:last-child
	{
		margin-top: 2.6rem;
	}
}

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

.betreuung b
{
	display: block;
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #e5b9b6;
}

/* --- Querlinks: dreispaltig mit rotem Schrägstrich ----------------------- */

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

.themenliste
{
	list-style: none;
	margin: clamp(1.4rem, 4vw, 2rem) 0 0;
	padding: 0;
	columns: 3 15rem;
	column-gap: clamp(1.4rem, 4vw, 2.6rem);
	font-size: .89rem;
}

.themenliste li
{
	break-inside: avoid;
	padding: .5rem 0;
	line-height: 1.5;
}

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

.themenliste li::before
{
	content: "/ ";
	color: var(--rot3);
	font-weight: 700;
}

.betonflaeche .themenliste li::before
{
	color: var(--rot);
}

.themenliste a
{
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.themenliste a:hover,
.themenliste a:focus
{
	border-bottom-color: currentColor;
}

/* --- Fuß: zwei invertierte Bänder ---------------------------------------- */

.fuss
{
	font-size: .86rem;
	line-height: 1.8;
}

.fuss__oben
{
	background: var(--beton2);
	color: var(--hell);
	padding: clamp(1.6rem, 4vw, 2.4rem) 0;
}

.fuss__unten
{
	background: var(--rot2);
	color: var(--hell);
	padding: clamp(1.6rem, 4vw, 2.4rem) 0 clamp(3rem, 7vw, 4.2rem);
}

.fuss b
{
	font-weight: 700;
	color: #f3d6d4;
}

.fuss__oben b
{
	color: #dfe0df;
}

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

/* --- Weitergeben: als Anmerkung gesetzt -----------------------------------
   Kein Kasten und keine Fläche. Der Satz steht rechtsbündig wie die
   Zwischentitel, die fünf Wege stehen darunter wie Fußnoten: klein, eng
   nebeneinander, durch einen roten Schrägstrich getrennt — dasselbe
   Zeichen, das die Themenliste führt.
   -------------------------------------------------------------------------- */

.anmerkung
{
	padding-bottom: clamp(2.6rem, 6vw, 4rem);
}

.anmerkung__satz
{
	max-width: 32ch;
	margin: 0 0 1.1rem auto;
	text-align: right;
	font-size: .95rem;
	line-height: 1.7;
	color: #f0dcda;
}

.anmerkung__wege
{
	margin: 0;
	padding-top: .9rem;
	border-top: 2px solid var(--rot3);
	text-align: right;
	font-size: .76rem;
	line-height: 2.1;
}

.anmerkung__wege a,
.anmerkung__wege button
{
	display: inline-flex;
	align-items: center;
	gap: .32rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--hell);
	text-decoration: none;
	cursor: pointer;
	transition: color .3s ease;
}

.anmerkung__wege a + a::before,
.anmerkung__wege a + button::before,
.anmerkung__wege button + button::before
{
	content: "/";
	margin: 0 .5rem 0 .55rem;
	color: var(--rot3);
	font-weight: 700;
}

.anmerkung__wege a:hover,
.anmerkung__wege button:hover,
.anmerkung__wege a:focus-visible,
.anmerkung__wege button:focus-visible
{
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .22em;
}

.anmerkung__wege svg
{
	width: .95rem;
	height: .95rem;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.anmerkung__wege [hidden]
{
	display: none;
}

/* --- Die mitlaufende Leiste: links, weil rechts die Zwischentitel und
   die Siegeltreppe stehen. Die Bahn misst 64rem samt Innenrand. --- */

.spur
{
	display: none;
}

@media (min-width: 78rem)
{
	.spur
	{
		display: grid;
		gap: .9rem;
		justify-items: center;
		position: fixed;
		left: clamp(1rem, 2.4vw, 2.4rem);
		bottom: clamp(1.6rem, 5vh, 3.4rem);
		z-index: 5;
	}

	.spur a,
	.spur button
	{
		display: block;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-left: 2px solid transparent;
		padding-left: .55rem;
		color: #e5b9b6;
		cursor: pointer;
		transition: color .3s ease, border-color .3s ease;
	}

	.spur a:hover,
	.spur button:hover,
	.spur a:focus-visible,
	.spur button:focus-visible
	{
		color: var(--hell);
		border-left-color: var(--hell);
	}

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

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

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