/* ------------------------------------------------------------------
   grenzen-der-zucht.qualzuchtpraevention.com
   Farbwelt aus den Bildern: Lavendelgrau und Perlweiß, sehr weiches
   Licht, gedämpftes Pflaume als einziger Akzent. Nachdenklich, mild.
   Layout: sehr ruhige Einspalter, dazwischen eine Skala, die
   bewusst nicht bis zum Ende läuft.
   Typografie: Serif und Grotesk im selben Titel gemischt.
   Effekt: Sätze kommen aus der Unschärfe in die Schärfe.
   ------------------------------------------------------------------ */

*
{
	box-sizing: border-box;
}

:root
{
	--perl:    #f7f5f8;
	--lav:     #ddd9e3;
	--lav2:    #cbc5d4;
	--tief:    #2f2b36;
	--mittel:  #6d667a;
	--pflaume: #7a5f86;

	--bahn: 68rem;
	--eng: 38rem;
	--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(--lav);
	color: var(--tief);
	font: 400 clamp(1.02rem, .97rem + .25vw, 1.14rem)/1.72 var(--sans);
}

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

a
{
	color: inherit;
}

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

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

.titel
{
	background: var(--perl);
	padding: clamp(4rem, 11vw, 9rem) 0 clamp(2.6rem, 6vw, 4.4rem);
}

.titel__marke
{
	margin: 0;
	font: 400 .82rem/1 var(--sans);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mittel);
}

h1
{
	margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
	font-weight: 400;
	font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.8rem);
	line-height: 1.08;
	letter-spacing: -.01em;
	font-family: var(--sans);
	max-width: 22ch;
}

h1 i
{
	font-family: var(--serif);
	font-style: italic;
	color: var(--pflaume);
}

.titel__unter
{
	max-width: 42rem;
	margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
	font-size: clamp(1.08rem, 1rem + .4vw, 1.34rem);
	line-height: 1.6;
	color: #453f50;
}

/* --- Bildstreifen ------------------------------------------------- */

.streifen
{
	margin: 0;
	background: var(--perl);
}

.streifen img
{
	width: 100%;
	max-height: 74vh;
	object-fit: cover;
}

figcaption
{
	max-width: var(--bahn);
	margin: 0 auto;
	padding: .8rem clamp(1.3rem, 5vw, 3.5rem) 0;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--mittel);
}

/* --- Textblöcke --------------------------------------------------- */

.block
{
	padding: clamp(3rem, 8vw, 6rem) 0;
}

.block--perl
{
	background: var(--perl);
}

h2
{
	margin: 0 0 1.4rem;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.7rem);
	line-height: 1.2;
}

h2 i
{
	font-style: italic;
	color: var(--pflaume);
}

.block p
{
	max-width: var(--eng);
	margin: 0 0 1.15rem;
}

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

.gross
{
	max-width: 34ch;
	font-family: var(--serif);
	font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.4rem);
	line-height: 1.35;
	margin: 0;
}

.klein
{
	font-size: .93rem;
	color: var(--mittel);
}

/* --- die Skala ---------------------------------------------------- */

.skala
{
	background: var(--tief);
	color: var(--perl);
	padding: clamp(3rem, 8vw, 6rem) 0;
}

.skala h2
{
	color: var(--perl);
}

.skala p
{
	max-width: var(--eng);
	color: #ded9e6;
}

.balken
{
	margin: clamp(2.2rem, 5vw, 3.4rem) 0 0;
	height: 3.4rem;
	background: #423c4d;
	position: relative;
	overflow: hidden;
}

.balken__fuell
{
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--pflaume);
	transition: width 1.5s cubic-bezier(.16, .84, .28, 1);
}

.balken.da .balken__fuell
{
	width: 88%;
}

.kein-js .balken__fuell
{
	width: 88%;
	transition: none;
}

.balken__marke
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 88%;
	width: 2px;
	background: var(--perl);
}

.beschriftung
{
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 2rem;
	margin: .9rem 0 0;
	font-size: .84rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #c9c2d6;
}

.beschriftung span:last-child
{
	margin-left: auto;
	text-align: right;
}

.skala__nachsatz
{
	margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
	max-width: 44rem;
	font-size: .93rem;
	color: #b6aec5;
}

/* --- Doppelbild --------------------------------------------------- */

.paar
{
	padding: clamp(3rem, 8vw, 6rem) 0;
}

.paar__raster
{
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 54rem)
{
	.paar__raster
	{
		grid-template-columns: 1.05fr 1fr;
	}

	.paar--links figure
	{
		order: -1;
	}
}

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

.paar figure img
{
	width: 100%;
}

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

/* --- Gesetzeskasten ------------------------------------------------ */

.gesetz
{
	background: var(--perl);
	padding: clamp(3rem, 8vw, 6rem) 0;
}

.gesetz__inhalt
{
	max-width: 46rem;
	border-left: 3px solid var(--pflaume);
	padding-left: clamp(1.2rem, 3vw, 2.2rem);
}

blockquote
{
	margin: 0 0 1.3rem;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1rem + .6vw, 1.42rem);
	line-height: 1.5;
}

blockquote + p
{
	max-width: none;
}

cite
{
	display: block;
	margin-top: .8rem;
	font-family: var(--sans);
	font-style: normal;
	font-size: .84rem;
	letter-spacing: .04em;
	color: var(--mittel);
}

/* --- Warnung ------------------------------------------------------ */

.riegel
{
	background: var(--lav2);
	padding: clamp(3rem, 8vw, 5rem) 0;
}

.riegel__zwei
{
	display: grid;
	gap: clamp(1.6rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.riegel__zwei > div
{
	min-width: 0;
	padding-top: 1.1rem;
	border-top: 2px solid var(--tief);
}

.riegel__zwei > div > b
{
	display: block;
	margin-bottom: .5rem;
}

.riegel__zwei p
{
	margin: 0;
	max-width: none;
	font-size: .98rem;
}

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

.zeus
{
	background: var(--perl);
	padding: clamp(3.4rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem);
}

.zeus p
{
	max-width: var(--eng);
	margin: 0 0 1.15rem;
}

.zeus__raster
{
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 54rem)
{
	.zeus__raster
	{
		grid-template-columns: 1fr auto;
	}
}

.zeus__text
{
	min-width: 0;
}

.zeus__siegel
{
	margin: 0;
	min-width: 0;
	max-width: 17rem;
	text-align: center;
}

.zeus__siegel img
{
	width: 100%;
}

.zeus__siegel figcaption
{
	max-width: none;
	margin: 0;
	padding: .9rem 0 0;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--mittel);
}

.zeus__satz
{
	max-width: 30ch;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	font-family: var(--serif);
	font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.2rem);
	line-height: 1.35;
	color: var(--pflaume);
}

.knopf
{
	display: inline-block;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: .95rem 1.8rem;
	background: var(--tief);
	color: var(--perl);
	font-size: .96rem;
	text-decoration: none;
	border-radius: 2rem;
}

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

/* --- Querlinks als Wolke ------------------------------------------ */

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

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

.themen h2
{
	margin-bottom: 1.8rem;
}

.themenliste
{
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 58rem;
}

.themenliste li
{
	margin: 0 0 .7rem;
	line-height: 1.35;
}

.themenliste li:nth-child(3n+1)
{
	font-size: 1.24rem;
}

.themenliste li:nth-child(3n+2)
{
	font-size: 1.02rem;
	padding-left: 2.2rem;
}

.themenliste li:nth-child(3n)
{
	font-size: .92rem;
	padding-left: 4.4rem;
	color: var(--mittel);
}

.themenliste a
{
	text-decoration: none;
	border-bottom: 1px solid var(--lav2);
}

.themenliste a:hover,
.themenliste a:focus
{
	border-bottom-color: var(--pflaume);
	color: var(--pflaume);
}

/* --- Fuß ---------------------------------------------------------- */

.fuss
{
	background: var(--lav);
	padding: clamp(2rem, 5vw, 3rem) 0 clamp(3.4rem, 7vw, 5rem);
	font-size: .87rem;
	line-height: 1.9;
	color: var(--mittel);
}

.fuss b
{
	display: block;
	color: var(--tief);
	font-weight: 400;
}

.fuss__gruppe + .fuss__gruppe
{
	margin-top: 1.6rem;
}

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

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

.weich
{
	opacity: 0;
	filter: blur(9px);
	transform: translateY(8px);
	transition: opacity .9s ease, filter .9s ease, transform .9s ease;
}

.weich.da
{
	opacity: 1;
	filter: none;
	transform: none;
}

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

@media (prefers-reduced-motion: reduce)
{
	.weich,
	.balken__fuell
	{
		transition: none;
	}
}

/* --- Weitergeben --------------------------------------------------
   Die Seite besteht aus durchgehenden Farbbändern. Der Teilen-Block
   ist deshalb selbst ein Band: eine getönte Fläche über die volle
   Breite, auf der Satz und Wege gemeinsam liegen. Der Satz mischt
   wie die Titel Grotesk und kursive Serif, die Wege sind runde
   Umrisse in der Form des Knopfs weiter oben.
   ------------------------------------------------------------------ */

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

.weitergeben__satz
{
	max-width: 44rem;
	margin: 0 0 clamp(1.5rem, 3.4vw, 2.2rem);
	font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
	line-height: 1.62;
}

.weitergeben__satz i
{
	font-family: var(--serif);
	font-style: italic;
	color: var(--pflaume);
}

.weitergeben__wege
{
	display: flex;
	flex-wrap: wrap;
	gap: .6rem .7rem;
}

.weitergeben__wege a,
.weitergeben__wege button
{
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .58rem 1.15rem;
	background: none;
	border: 1px solid var(--mittel);
	border-radius: 2rem;
	font: inherit;
	font-size: .9rem;
	line-height: 1.3;
	color: var(--tief);
	text-decoration: none;
	cursor: pointer;
	transition: background .4s ease, border-color .4s ease, color .4s ease;
}

.weitergeben__wege a:hover,
.weitergeben__wege button:hover,
.weitergeben__wege a:focus-visible,
.weitergeben__wege button:focus-visible
{
	background: var(--pflaume);
	border-color: var(--pflaume);
	color: var(--perl);
}

.weitergeben__wege svg
{
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.weitergeben__wege [hidden]
{
	display: none;
}

/* --- Die mitlaufende Leiste: links, runde Umrisse, sehr zurückhaltend.
   Die Bahn misst 68rem samt Innenrand; erst darüber ist links Platz. --- */

.saum
{
	display: none;
}

@media (min-width: 86rem)
{
	.saum
	{
		display: grid;
		gap: .7rem;
		position: fixed;
		left: clamp(1.2rem, 2.4vw, 2.4rem);
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
	}

	.saum a,
	.saum button
	{
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		margin: 0;
		padding: 0;
		background: var(--perl);
		border: 1px solid var(--lav2);
		border-radius: 50%;
		color: var(--mittel);
		cursor: pointer;
		transition: color .4s ease, border-color .4s ease;
	}

	.saum a:hover,
	.saum button:hover,
	.saum a:focus-visible,
	.saum button:focus-visible
	{
		color: var(--pflaume);
		border-color: var(--pflaume);
	}

	.saum svg
	{
		width: 1.1rem;
		height: 1.1rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.25;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

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

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