/* ------------------------------------------------------------------
   spaetere-auffaelligkeit.zuchtprogramm.com
   Farbwelt aus den Bildern: tiefes Braun als Grundfläche, Kupferrot
   als Lampenlicht, Creme als Schrift.
   Typografie: eine Grotesk mit sehr geringem Gradunterschied —
   Überschrift und Fließtext liegen dicht beieinander. Die Seite
   spricht leise; das ist beim heikelsten Thema des Projekts eine
   inhaltliche Entscheidung.
   Layout: stufenweise wachsende Einrückung der Abschnitte.
   Effekt: der Lichtkegel liegt auf dem Abschnitt, den man liest.
   ------------------------------------------------------------------ */

*
{
	box-sizing: border-box;
}

:root
{
	--braun: #211710;
	--braun2: #17100b;
	--braun3: #3a2a1e;
	--kupfer: #b56a3c;
	--kupfer2: #d99a68;
	--creme: #ece0cd;

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

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

body
{
	margin: 0;
	background: var(--braun);
	color: var(--creme);
	font: 400 clamp(1.02rem, .99rem + .28vw, 1.13rem)/1.85 var(--sans);
}

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

a
{
	color: inherit;
}

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

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

.kopf
{
	padding: clamp(3rem, 8vw, 5.4rem) 0 clamp(2.2rem, 5vw, 3.2rem);
}

.kopf__marke
{
	margin: 0 0 clamp(1.4rem, 4vw, 2.2rem);
	font-size: .7rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--kupfer2);
}

h1
{
	margin: 0;
	max-width: 26ch;
	font-weight: 600;
	font-size: clamp(1.35rem, 1.1rem + 1.25vw, 1.95rem);
	line-height: 1.42;
	letter-spacing: -.005em;
}

.kopf__unter
{
	max-width: 39rem;
	margin: 1.5rem 0 0;
	color: #cdbfa9;
}

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

.voll
{
	margin: 0;
}

.voll img
{
	width: 100%;
}

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

/* --- Abschnitte mit wachsender Einrückung ----------------------------- */

.stufe
{
	position: relative;
	padding: clamp(2.4rem, 6vw, 4rem) 0;
}

.stufe__inhalt
{
	position: relative;
	z-index: 1;
	max-width: 38rem;
}

@media (min-width: 62rem)
{
	.stufe--1 .stufe__inhalt { margin-left: 0; }
	.stufe--2 .stufe__inhalt { margin-left: 4rem; }
	.stufe--3 .stufe__inhalt { margin-left: 8rem; }
	.stufe--4 .stufe__inhalt { margin-left: 12rem; }
	.stufe--5 .stufe__inhalt { margin-left: 8rem; }
}

/* der Lichtkegel */
.stufe::before
{
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 70% at 38% 45%, rgba(181, 106, 60, .26), rgba(181, 106, 60, 0) 70%);
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
}

.stufe.hell::before
{
	opacity: 1;
}

h2
{
	margin: 0 0 1rem;
	max-width: 24ch;
	font-weight: 600;
	font-size: clamp(1.18rem, 1.05rem + .7vw, 1.5rem);
	line-height: 1.35;
}

h2 span
{
	display: block;
	font-weight: 400;
	font-size: .7rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--kupfer2);
	margin-bottom: .5rem;
}

p
{
	max-width: 38rem;
}

.wichtig
{
	margin: 1.6rem 0 0;
	padding: 1.1rem 1.3rem;
	border-left: 3px solid var(--kupfer);
	background: rgba(236, 224, 205, .05);
	font-size: 1rem;
	line-height: 1.72;
}

.zitat
{
	margin: 1.6rem 0 0;
	padding: 0 0 0 1.3rem;
	border-left: 1px solid var(--braun3);
	font-style: italic;
	color: #d8cab4;
}

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

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

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

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

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

.zeus
{
	background: var(--braun2);
}

.knopf
{
	display: inline-block;
	margin-top: clamp(1.6rem, 4vw, 2.2rem);
	padding: .9rem 2.1rem;
	background: var(--kupfer);
	color: #17100b;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
}

.knopf:hover,
.knopf:focus
{
	background: var(--kupfer2);
}

.betreuung
{
	margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--braun3);
	font-size: .96rem;
	line-height: 1.75;
}

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

.hinweis
{
	margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
	font-size: .87rem;
	line-height: 1.7;
	color: #a89380;
}

/* Das Siegel: klein und liegend, die Unterschrift daneben statt darunter —
   die Seite spricht leise, das Siegel soll nichts behaupten, was der Text
   gerade einschränkt. Cremefarbene Kachel, weil die schwarzen Linien des
   Siegels auf dem Braun verschwinden würden. */

.siegel
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.1rem, 3vw, 1.8rem);
	margin: clamp(1.8rem, 4vw, 2.4rem) 0 0;
	padding-top: clamp(1.6rem, 4vw, 2.2rem);
	border-top: 1px solid var(--braun3);
}

.siegel a
{
	flex: 0 0 auto;
	display: block;
	width: 9.5rem;
	max-width: 100%;
	padding: .8rem;
	background: var(--creme);
	text-decoration: none;
}

.siegel img
{
	width: 100%;
}

.siegel figcaption
{
	flex: 1 1 15rem;
	max-width: 26rem;
	margin: 0;
	padding: 0;
}

/* --- Querlinks: Zeilen, die beim Überfahren einrücken ------------------ */

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

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

.themenliste
{
	list-style: none;
	margin: clamp(1.4rem, 4vw, 2rem) 0 0;
	padding: 0;
	max-width: 46rem;
	font-size: .95rem;
}

.themenliste li
{
	border-bottom: 1px solid var(--braun3);
}

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

.themenliste a
{
	display: block;
	padding: .78rem 0;
	text-decoration: none;
	transition: padding-left .25s ease, color .25s ease;
}

.themenliste a:hover,
.themenliste a:focus
{
	padding-left: 1.1rem;
	color: var(--kupfer2);
}

/* --- Fuß: gestufte Bänder ---------------------------------------------- */

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

.fuss > div
{
	padding: 1.15rem 0;
}

.fuss .band1 { background: #1c130d; }
.fuss .band2 { background: #17100b; }
.fuss .band3 { background: #120c08; }

.fuss .band3
{
	padding-bottom: clamp(2.4rem, 6vw, 3.6rem);
}

.fuss b
{
	font-weight: 600;
	color: var(--kupfer2);
}

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

/* --- Weiterreichen: Flächen erst beim Überfahren -----------------------
   Die Seite spricht leise und arbeitet mit Licht statt mit Rahmen. Die
   Elemente stehen deshalb ohne Kontur da; die Fläche erscheint erst
   unter dem Zeiger, wie der Lichtkegel über den Abschnitten. */

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

.weiterreichen__satz
{
	max-width: 38rem;
	margin: 0;
	color: #cdbfa9;
}

.weiterreichen__reihe
{
	list-style: none;
	margin: clamp(1.4rem, 4vw, 2rem) -.9rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .2rem;
}

.weiterreichen__reihe li { min-width: 0; }

.weiterreichen__reihe a,
.weiterreichen__reihe button
{
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: .62rem .9rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--creme);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}

.weiterreichen__reihe a:hover,
.weiterreichen__reihe button:hover,
.weiterreichen__reihe a:focus-visible,
.weiterreichen__reihe button:focus-visible
{
	background: rgba(236, 224, 205, .07);
	color: var(--kupfer2);
}

.weiterreichen__reihe svg { flex: none; }

.weiterreichen__reihe [hidden] { display: none; }

/* --- Mitlaufende Leiste, links ---------------------------------------
   Die Bahn misst 62rem, die Abschnitte rücken nach rechts ein: links
   bleibt ab 1160 px durchgehend freier Rand. */

.leiste { display: none; }

@media (min-width: 1160px)
{
	.leiste
	{
		position: fixed;
		left: .8rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 40;
		display: grid;
		gap: .2rem;
	}

	.leiste__el
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 0;
		background: transparent;
		color: #8f7c6b;
		cursor: pointer;
		transition: background-color .3s ease, color .3s ease;
	}

	.leiste__el:hover,
	.leiste__el:focus-visible,
	.leiste__el.ist-kopiert
	{
		background: rgba(236, 224, 205, .07);
		color: var(--kupfer2);
	}

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

/* Nicht unterstützte Elemente hinterlassen keine leere Fläche. */
.weiterreichen__reihe li:has([hidden])
{
	display: none;
}