/* ------------------------------------------------------------------
   farbverduennung
   Farbwelt aus den Bildern: warmes Papier, Umbra, Karamell,
   Kupferorange als Signal. Bewusst warm und hell — die Schwesterseite
   merle-verpaarung ist nachtblau und kühl.
   Typografie: weit gesperrte Grotesk-Minuskeln als Titel,
   Monospace für alles Genetische.
   ------------------------------------------------------------------ */

:root
{
	--papier:  #f7f3ec;
	--papier2: #efe8dd;
	--karamell:#d9c4a3;
	--umbra:   #2e241c;
	--umbra2:  #453629;
	--kupfer:  #b5612a;
	--kupfer-h:#d4813f;
	--text:    #3a2f26;
	--leise:   #7a6a5b;

	--bahn: 76rem;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }

body
{
	margin: 0;
	background: var(--papier);
	color: var(--text);
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: clamp(1rem, .95rem + .3vw, 1.13rem);
	line-height: 1.7;
	font-weight: 390;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.2em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }

.bahn { width: min(100% - 2.4rem, var(--bahn)); margin-inline: auto; }
.schmal { max-width: 40rem; }

section { padding-block: clamp(3.6rem, 7.5vw, 7rem); }

/* ---- Titel: weit gesperrte Minuskeln --------------------------- */

h1, h2
{
	margin: 0 0 1.3rem;
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: .085em;
	text-transform: lowercase;
}

h1 { font-size: clamp(1.75rem, .95rem + 3.5vw, 3.9rem); letter-spacing: .06em; max-width: 20ch; }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.8vw, 2.3rem); max-width: 24ch; }

h1 b { font-weight: 500; color: var(--kupfer); }

h3
{
	margin: 0 0 .45rem;
	font-size: 1.02rem;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
}

.marke
{
	margin: 0 0 1.1rem;
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kupfer);
}

/* Genetik-Kürzel überall gleich ausgezeichnet */
.gen
{
	font-family: var(--mono);
	font-size: .92em;
	background: var(--papier2);
	border-bottom: 2px solid var(--karamell);
	padding: .08em .34em;
	white-space: nowrap;
}

.nacht .gen { background: rgba(247,243,236,.1); border-bottom-color: var(--kupfer); }

.gross
{
	font-size: clamp(1.12rem, 1.02rem + .6vw, 1.45rem);
	line-height: 1.5;
	max-width: 34ch;
}

/* ==================== Kopf ===================================== */

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

.kopf__vor { max-width: 44ch; color: var(--leise); margin-top: 1.5rem; }

.kopf figure
{
	margin: clamp(2.2rem, 4.5vw, 3.5rem) 0 0;
}

.kopf figcaption
{
	margin-top: .85rem;
	font-size: .85rem;
	color: var(--leise);
	max-width: 52ch;
}

/* ============ Bildstrecke: drei Hunde nebeneinander ============ */

.strecke
{
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

@media (min-width: 48rem) { .strecke { grid-template-columns: repeat(3, 1fr); } }

.strecke figure { margin: 0; }
.strecke img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.strecke figcaption { margin-top: .8rem; font-size: .9rem; }

.strecke .art
{
	display: inline-block;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .18em .55em;
	margin-bottom: .5rem;
	border: 1px solid var(--karamell);
	color: var(--leise);
}

.strecke .art--verduennt { border-color: var(--kupfer); color: var(--kupfer); }

/* ============ CDA: Textspalte mit umflossenem Bild ============= */

.cda { background: var(--papier2); }

.cda__block, .umfluss { max-width: 46rem; }

.umfluss figure
{
	margin: 0 0 1rem;
	max-width: 100%;
}

@media (min-width: 46rem)
{
	.umfluss figure
	{
		float: right;
		width: 19rem;
		margin: .4rem 0 1.2rem 2.2rem;
		shape-outside: margin-box;
	}
}

.umfluss figcaption
{
	margin-top: .7rem;
	font-size: .82rem;
	color: var(--leise);
}

.cda__block::after, .umfluss::after { content: ""; display: block; clear: both; }

/* Das Vergleichspaar — betroffen neben unauffällig, gleiche Größe */

.paar
{
	clear: both;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: clamp(2.2rem, 4vw, 3.2rem);
	max-width: 54rem;
}

@media (min-width: 44rem) { .paar { grid-template-columns: 1fr 1fr; } }

.paar figure { margin: 0; }

.paar img
{
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid rgba(46,36,28,.14);
}

.paar figcaption { margin-top: .8rem; font-size: .88rem; line-height: 1.5; }

.paar .art
{
	display: inline-block;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .18em .55em;
	margin-bottom: .5rem;
	border: 1px solid var(--karamell);
	color: var(--leise);
}

.paar .art--betroffen { border-color: var(--kupfer); color: var(--kupfer); }

.merksatz
{
	clear: both;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: 1.4rem 0 0;
	border-top: 3px solid var(--umbra);
	font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem);
	line-height: 1.42;
	max-width: 40rem;
	letter-spacing: -.005em;
}

/* ============ Was auch die richtige Verpaarung offen lässt ====== */

.offen { background: var(--papier2); }

.offen__raster
{
	display: grid;
	gap: clamp(1.8rem, 4vw, 3.4rem);
	grid-template-columns: 1fr;
	margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
	align-items: start;
}

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

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

.offen__vertrag
{
	padding: clamp(1.3rem, 3vw, 2rem);
	background: var(--papier);
	border-left: 4px solid var(--kupfer);
}

.offen__vertrag h3
{
	margin: 0 0 .7rem;
	font-size: 1.12rem;
	line-height: 1.3;
}

.offen__vertrag p { font-size: .98rem; }

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

/* ==================== Regelblock, dunkel ======================= */

.nacht { background: var(--umbra); color: #ece3d7; }
.nacht h2 { color: #fff; }
.nacht .marke { color: var(--kupfer-h); }
.nacht strong { color: #fff; }

.regeln
{
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	max-width: 54rem;
}

.regeln li
{
	display: grid;
	grid-template-columns: 1fr;
	gap: .3rem 1.6rem;
	padding: 1.25rem 0;
	border-top: 1px solid rgba(236,227,215,.2);
}

@media (min-width: 44rem)
{
	.regeln li { grid-template-columns: 13rem 1fr; align-items: baseline; }
}

.regeln li:last-child { border-bottom: 1px solid rgba(236,227,215,.2); }

.regeln b { font-weight: 650; color: #fff; }

.regeln p { margin: 0; font-size: .97rem; color: rgba(236,227,215,.82); }

.vorbehalt
{
	margin-top: 1.6rem;
	font-size: .88rem;
	color: rgba(236,227,215,.62);
	max-width: 52rem;
}

/* ============ Die Verdünnungsskala (Signatureffekt) ============ */

.skala { text-align: left; }

.skala__leiste
{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: .35rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	max-width: 54rem;
}

.stufe
{
	aspect-ratio: 3 / 4;
	background: var(--voll);
	transition: background 1.1s cubic-bezier(.3,.7,.3,1);
	position: relative;
}

.skala.entleert .stufe { background: var(--duenn); }

.stufe span
{
	position: absolute;
	left: 0;
	bottom: -1.6rem;
	font-family: var(--mono);
	font-size: .62rem;
	letter-spacing: .06em;
	color: var(--leise);
}

.skala__fuss
{
	margin-top: 2.6rem;
	font-size: .9rem;
	color: var(--leise);
	max-width: 46rem;
}

/* ==================== ZEUS ==================================== */

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

.schritte
{
	list-style: none;
	counter-reset: s;
	margin: clamp(2rem, 4vw, 2.8rem) 0 0;
	padding: 0;
	display: grid;
	gap: 1.15rem;
	max-width: 50rem;
}

.schritte li
{
	counter-increment: s;
	position: relative;
	padding-left: 3.1rem;
}

.schritte li::before
{
	content: counter(s) ".";
	position: absolute;
	left: 0;
	top: .1em;
	font-family: var(--mono);
	font-size: .95rem;
	color: var(--kupfer);
}

.knopf
{
	display: inline-block;
	margin-top: clamp(1.8rem, 3.5vw, 2.5rem);
	padding: .95em 2em;
	background: var(--umbra);
	color: var(--papier);
	text-decoration: none;
	font-weight: 550;
	letter-spacing: .04em;
	transition: background .25s ease;
}

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

/* ---- Das Siegel: Eintrag auf Papier, mono beschriftet --------- */

.siegel
{
	margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
	padding: clamp(1.2rem, 2.6vw, 1.8rem);
	max-width: 44rem;
	background: var(--papier);
	border-left: 3px solid var(--kupfer);
	display: grid;
	gap: 1.2rem clamp(1.4rem, 3vw, 2.2rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 40rem) { .siegel { grid-template-columns: 9.5rem 1fr; } }

.siegel > a { display: block; }
.siegel img { width: 100%; }
.siegel figcaption a { color: var(--kupfer); }

.siegel figcaption { font-size: .92rem; line-height: 1.6; }

.siegel figcaption b
{
	display: block;
	margin-bottom: .5rem;
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kupfer);
}

/* ============ Querlinks: Spalte mit Farbabstufung ============== */

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

.themen__raster { display: grid; gap: 1.6rem clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }

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

.themenliste { list-style: none; margin: 0; padding: 0; }

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

.themenliste a
{
	display: grid;
	grid-template-columns: .55rem 1fr;
	gap: .9rem;
	align-items: center;
	padding: .68rem 0;
	text-decoration: none;
	font-size: .95rem;
	border-bottom: 1px solid rgba(46,36,28,.13);
	transition: color .2s ease;
}

/* der kleine Balken links wird von Zeile zu Zeile blasser */
.themenliste a::before
{
	content: "";
	height: 1.5rem;
	background: var(--umbra);
	transition: background .2s ease;
}

.themenliste li:nth-child(2) a::before { background: #4a3a2c; }
.themenliste li:nth-child(3) a::before { background: #66513e; }
.themenliste li:nth-child(4) a::before { background: #816951; }
.themenliste li:nth-child(5) a::before { background: #9a8067; }
.themenliste li:nth-child(6) a::before { background: #ae977f; }
.themenliste li:nth-child(7) a::before { background: #bfab95; }
.themenliste li:nth-child(8) a::before { background: #cdbca9; }
.themenliste li:nth-child(9) a::before { background: #d8cbbb; }
.themenliste li:nth-child(n+10) a::before { background: #e2d8cb; }

.themenliste a:hover, .themenliste a:focus-visible { color: var(--kupfer); }
.themenliste a:hover::before, .themenliste a:focus-visible::before { background: var(--kupfer); }

/* ==================== Fuss: tabellarisch ====================== */

.fuss
{
	background: var(--umbra);
	color: rgba(236,227,215,.78);
	padding-block: clamp(2.8rem, 5.5vw, 4.2rem);
	font-size: .85rem;
	line-height: 1.62;
}

.fuss dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 1.3rem; max-width: 58rem; }

@media (min-width: 46rem)
{
	.fuss dl { grid-template-columns: 11rem 1fr; gap: 1.1rem 2rem; }
	.fuss dt { text-align: right; }
}

.fuss dt
{
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--kupfer-h);
	padding-top: .18em;
}

.fuss dd { margin: 0; }

.fuss a { color: #ece3d7; }

/* ==================== Auftritt ================================ */

.steig { opacity: 0; transform: translateY(16px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,.68,.3,1); }
.steig.da { opacity: 1; transform: none; }
.kein-js .steig { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce)
{
	.steig { opacity: 1; transform: none; transition: none; }
	.stufe { transition: none; }
}

/* ============ Weitergeben ======================================
   Die Botschaft hängt am ersten Wort: es steht in der Monospace der
   Genetik-Kürzel und in Kupfer, der Rest läuft als normaler Satz
   weiter. Die Elemente darunter tragen denselben Rahmen wie die
   Bildmarken „verdünnt“ / „unverdünnt“ in der Bildstrecke. */

.weiter
{
	background: var(--papier2);
	padding-block: clamp(2.6rem, 5vw, 4rem);
}

.weiter__satz
{
	max-width: 46ch;
	margin: 0;
	font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem);
	line-height: 1.62;
}

.weiter__auftakt
{
	font-family: var(--mono);
	font-size: .84em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kupfer);
	padding-right: .15em;
}

.weiter__reihe
{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
	padding: 0;
	max-width: 54rem;
}

.weiter__reihe li { min-width: 0; }

.weiter__reihe a,
.weiter__reihe button
{
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .5rem .85rem;
	background: none;
	border: 1px solid var(--karamell);
	border-radius: 0;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--leise);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .22s ease, color .22s ease;
}

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

.weiter__reihe svg { flex: none; }

.weiter__reihe [hidden] { display: none; }

/* ---- Mitlaufende Leiste, rechts ------------------------------
   Die Bahn ist 76rem breit; erst darüber bleibt rechts Luft. */

/* Unter 1460 px laeuft die Leiste weiterhin mit, nur schmaler und dicht
   an der Kante. Die Papierfuellung weicht dabei einem Hauch; die Kontur
   in Karamell traegt die Form allein (Vorgabe des Nutzers vom
   08.08.2026: am Smartphone so durchsichtig wie moeglich). */
@media (max-width: 1459px)
{
	.rand
	{
		position: fixed;
		right: .4rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 40;
		display: grid;
		gap: .2rem;
	}

	.rand__el
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		background: rgba(247, 243, 236, .22);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		border: 1px solid var(--karamell);
		color: var(--umbra);
		cursor: pointer;
	}

	.rand__el svg
	{
		width: 16px;
		height: 16px;
	}

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

@media (min-width: 1460px)
{
	.rand
	{
		position: fixed;
		right: 1.4rem;
		top: 42%;
		z-index: 40;
		display: grid;
		gap: .4rem;
	}

	.rand__el
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		background: var(--papier);
		border: 1px solid var(--karamell);
		color: var(--leise);
		cursor: pointer;
		transition: border-color .22s ease, color .22s ease;
	}

	.rand__el:hover,
	.rand__el:focus-visible,
	.rand__el.ist-kopiert
	{
		border-color: var(--kupfer);
		color: var(--kupfer);
	}

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

/* Nicht unterstützte Elemente hinterlassen keine Lücke in der Reihe. */
.weiter__reihe li:has([hidden])
{
	display: none;
}

/* DRUCK:START */
/* ===================================================================
   DRUCKVORLAGE — universell für alle ZEUS-Landingpages
   Quelle: tools/druck.css · eingesetzt per tools/druck.py
   Nicht in der einzelnen index.css bearbeiten, sondern hier.

   Vorgabe des Nutzers vom 08.08.2026:
   Der Ausdruck soll aussehen wie die Seite am Bildschirm — voller
   Hintergrund, randlos. Ohne mitlaufende Teilen-Leiste, ohne den
   Block mit den Querverweisen. Impressum unten auf der letzten Seite.

   Deshalb greift diese Vorlage bewusst wenig ein: Sie schaltet nur
   ab, was auf Papier nicht funktioniert, und lässt das Design stehen.
   (Ein früherer Versuch mit `all: revert` erzeugte eine schlichte
   Lesefassung — sauber gebaut, aber nicht das, was gewollt ist.)
   =================================================================== */
@media print
{
	/* --- 1. Randlos ------------------------------------------------
	   Ohne Seitenrand laufen Farbflächen bis an die Blattkante.
	   Die Seiten bringen ihre eigenen Innenabstände mit. */
	@page
	{
		size: A4;
		margin: 0;
	}

	/* --- 2. Hintergründe wirklich drucken --------------------------
	   Browser lassen Flächen und Hintergrundbilder sonst weg. Auf den
	   dunklen Seiten stünde helle Schrift auf weißem Papier, also
	   nichts. `print-color-adjust: exact` erzwingt sie, ohne dass im
	   Druckdialog etwas angehakt werden muss. */
	*, *::before, *::after
	{
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	/* --- 3. Effekte abschalten -------------------------------------
	   31 Seiten blenden Inhalte per opacity/transform beim Scrollen
	   ein, einige klappen sie über `grid-template-rows: 0fr` mit
	   `overflow: hidden` auf. Auf Papier wird nicht gescrollt — ohne
	   diesen Block fehlen genau diese Stellen im Ausdruck. */
	*, *::before, *::after
	{
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		filter: none !important;
	}

	/* `clip-path` gehört nur eingeschränkt dazu: Manche Seiten schneiden
	   damit Bilder und Flächen zu — das ist Gestaltung und bleibt. Auf
	   Textelementen ist es dagegen immer ein Effekt, der auf das
	   Scroll-Ereignis wartet. Bei `naturstummelrute` stand deshalb im
	   PDF ein Formular, dessen vier Einträge fehlten: `clip-path:
	   inset(0 100% 0 0)` zog sie erst per JavaScript auf, und beim
	   Drucken wird nicht gescrollt. (08.08.2026) */
	p, li, h1, h2, h3, h4, h5, h6, span, i, b, em, strong,
	dd, dt, figcaption, td, th, blockquote
	{
		clip-path: none !important;
	}

	[class*="huelle"], [class*="klapp"], [class*="reveal"],
	[class*="einblend"], [class*="aufklapp"]
	{
		grid-template-rows: 1fr !important;
		overflow: visible !important;
		max-height: none !important;
	}

	/* --- 4. Was auf Papier nicht mitkommt --------------------------
	   Mitlaufende Teilen-Leiste, Empfehlungsblock und der Abschnitt
	   mit den Querverweisen. Letzterer wird beim Einbau mit
	   data-druck="aus" markiert, weil er auf jeder Seite anders heißt
	   und zwischen HTML-Kommentaren steht, die CSS nicht sieht. */
	/* Mitlaufende Leiste und Querverweise fallen weg. Der
	   Empfehlungsblock bleibt in seiner normalen Gestaltung: Die PDFs
	   sind laut Nutzer (08.08.2026) virtuelle Mappen zum Verschicken an
	   Zuechter und Interessenten, dort sind WhatsApp-, Facebook- und
	   E-Mail-Link anklickbar. Nur die beiden Knoepfe, die JavaScript
	   brauchen (Teilen, Link kopieren), gehen weg — die funktionieren
	   im PDF nicht. Ebenso der Link auf die folder.pdf (data-pdf):
	   Wer die Mappe liest oder den Ausdruck in der Hand haelt, hat sie
	   bereits. Die Querverweise fallen ebenfalls weg, die haben
	   in einer Mappe keinen Sinn. */
	/* ⚠ Hier stand `nav:has([data-teilen]), aside:has([data-teilen])`.
	   Das traf nicht nur die mitlaufende Leiste, sondern auf 41 von 51
	   Seiten auch die Teilen-Reihe im Empfehlungsblock — also genau die
	   Links, die in der Mappe anklickbar bleiben sollen. Die Leiste wird
	   jetzt von tools/druck.py im HTML markiert, weil nur dort
	   feststellbar ist, welches Element `position: fixed` traegt.
	   (08.08.2026) */
	[data-teilen], [data-kopieren], [data-pdf],
	[data-druck="aus"],
	.druck-weg
	{
		display: none !important;
	}


	/* --- 4b. Schrift kleiner als am Bildschirm ---------------------
	   Zwei Hebel nötig: `html { font-size }` erfasst alles, was in rem
	   angegeben ist; die Textelemente werden zusätzlich ausdrücklich
	   gesetzt, weil viele Seiten ihre Grade in clamp() mit vw-Anteil
	   angeben — die hängen an der Blattbreite und lassen sich anders
	   nicht drücken. (Ein Versuch über `zoom` blieb wirkungslos.) */
	html { font-size: 9px !important; }

	/* ⚠ Diese Liste muss vollständig sein. `html { font-size: 9px }`
	   drückt **jede** rem-Größe auf 56 %; wer hier fehlt, bleibt dort.
	   Am 08.08.2026 gemessen: Der Betreuungskasten mit Telefonnummer und
	   E-Mail (ein `div`) stand bei 8,6 px gegen 12,8 px Fließtext, der
	   Knopf „Zertifikat prüfen" (ein `a`) ebenso. Deshalb auch die
	   Inline- und Blockelemente, die Text tragen. */
	p, li, dd, dt, td, th, figcaption, blockquote, small, label, span
	{
		font-size: 9.6pt !important;
		line-height: 1.5 !important;
	}

	/* ⚠ Diese zweite Gruppe **ohne** `line-height`. Ein erster Versuch
	   hat beide Listen zusammengefasst — die Zeilenhöhe auf jedem `div`
	   traf auch die Container und trieb `hobbyzucht-recht` von 5 auf 6
	   und `farbverduennung` von 6 auf 9 Blätter. Die Schriftgröße allein
	   ist harmlos: Sie holt nur zurück, was `html { font-size: 9px }`
	   auf 56 % gedrückt hat. */
	div, a, b, strong, i, em, button, address, cite, q, time
	{
		font-size: 9.6pt !important;
	}

	h1 { font-size: 24pt !important; line-height: 1.12 !important; }
	h2 { font-size: 15pt !important; line-height: 1.2 !important; }
	h3 { font-size: 12pt !important; line-height: 1.28 !important; }
	h4, h5, h6 { font-size: 10.5pt !important; line-height: 1.3 !important; }

	/* ⚠ Überschriften sind oft aus Teilen gebaut — `<span class="zeile">`
	   für den Zeilenfall, `<em>` für das hervorgehobene Wort. Die Regel
	   oben trifft diese Teile und drückt damit den **Aufmacher** einer
	   Seite auf Fließtextgröße. Aufgefallen am 08.08.2026 bei
	   `welpen-registrieren`: „Jeder Welpe registriert. / Jeder Welpe
	   zertifiziert." stand so klein wie ein Absatz. Die Teile erben
	   deshalb die Größe ihrer Überschrift. */
	:is(h1, h2, h3, h4, h5, h6) :is(span, i, b, em, strong, small, label)
	{
		font-size: inherit !important;
		line-height: inherit !important;
	}

	/* Zahlen und Kicker, die als Gestaltungselement groß gesetzt sind,
	   dürfen größer bleiben, aber nicht mehr blattfüllend. */
	[class*="ziffer"], [class*="zahl"], [class*="nummer"]
	{
		font-size: 20pt !important;
	}

	/* --- 4c. Raster auflösen ---------------------------------------
	   Grid- und Flex-Container lassen sich im Druck nicht über einen
	   Seitenwechsel hinweg umbrechen: Passt der Container nicht mehr
	   auf das angefangene Blatt, wandert er komplett auf das nächste
	   und lässt eine fast leere Seite zurück. Als Block umbrechen sie
	   normal. Nebenwirkung, die hier erwünscht ist: Zweispaltiges
	   läuft einspaltig über die volle Breite, statt sich auf A4 in
	   eine schmale Spalte zu quetschen. */
	[class*="raster"], [class*="grid"], [class*="spalte"],
	[class*="zwei"], [class*="reihe"], [class*="flex"]
	{
		display: block !important;
	}

	/* --- 4d. Umbruchsperren lösen ----------------------------------
	   Chromium bricht Elemente mit `overflow: hidden` nicht über einen
	   Seitenwechsel: Passt ein solcher Abschnitt nicht mehr auf das
	   angefangene Blatt, wandert er als Ganzes auf das nächste und
	   lässt eine fast leere Seite zurück. Bei figure/img bleibt die
	   Sperre stehen, dort begrenzt sie den Bildausschnitt. */
	section, article, div, main, ul, ol
	{
		overflow: visible !important;
	}

	/* --- 4e. Satzspiegel für A4 verbreitern ------------------------
	   Die Seiten begrenzen ihre Textbreite für den Bildschirm (etwa
	   `max-width: 40rem` oder `24ch`). Auf A4 bleibt dadurch rechts ein
	   breiter leerer Streifen, und Bildunterschriften in zweispaltigen
	   Bereichen brechen über viele Zeilen um. Im Druck werden die
	   Begrenzungen aufgehoben und durch eine für A4 sinnvolle
	   Zeilenlänge ersetzt — ganz ohne Grenze würden die Zeilen über
	   110 Zeichen lang und wären schlecht lesbar.

	   ⚠ An dieser Regel hingen bis zum 08.08.2026 zwei ganz
	   verschiedene Dinge, und sie hat beide gleich behandelt:

	   - `max-width: 38rem` auf Absätzen und Unterblöcken ist eine
	     **Lesebreite** für den Bildschirm. Die muss im Druck weg,
	     sonst nutzt der Text nur zwei Drittel des Blattes.
	   - `width: min(90%, 76rem)` auf der Textbahn ist der
	     **Satzspiegel**. Der Seitenrand steckt in den 90 %.

	   `* { width: auto }` hat auch den zweiten Fall überschrieben —
	   auf 31 der 50 Seiten klebte der Text dadurch an der Blattkante
	   und einzelne Bilder liefen aus dem Blatt heraus. Deshalb jetzt
	   getrennt: Lesebreiten fallen überall, die Bahnbreite bleibt.

	   Bahnen der Bauart `max-width: 72rem; margin-inline: auto`
	   verlieren nichts: 72rem sind 1152 px und damit ohnehin breiter
	   als ein Blatt — ihr Rand kommt aus einem Innenabstand, und der
	   bleibt unangetastet. */
	*
	{
		max-width: none !important;
	}

	p, li, h1, h2, h3, h4, h5, h6,
	blockquote, figcaption, dd, dt, dl, ul, ol, table, figure
	{
		width: auto !important;
	}

	img, svg, video, picture, iframe { max-width: 100% !important; }

	/* Siegel und Logos dürfen nicht mitwachsen: ohne Begrenzung
	   skalieren sie auf volle Spaltenbreite und füllen ein halbes
	   Blatt. Am Bildschirm hält sie die Breite ihres Rasters klein,
	   die im Druck entfällt. */
	/* Auch die Hülle des Siegels schrumpft mit — sonst bleibt ein
	   blattbreiter Kasten um ein kleines Bild stehen. Bewusst ohne eigene
	   Maximalbreite: mit einer solchen waere der Kasten samt Innenabstand
	   schmaeler als das Bild, das dann herausragt. Das umgebende
	   figure bleibt breit, damit die Bildunterschrift über die volle
	   Breite laufen kann. */
	a:has(> img[src*="siegel"]), a:has(> img[src*="logo"]),
	div:has(> img[src*="siegel"]), span:has(> img[src*="siegel"]),
	picture:has(> img[src*="siegel"])
	{
		display: block !important;
		width: fit-content !important;
	}

	img[src*="siegel"], img[src*="logo"], img[src*="Zeus"],
	img[alt*="Siegel"], img[alt*="Logo"]
	{
		/* ⚠ `min(46mm, 100%)`, nicht `46mm`. Steht das Siegel in einer
		   schmalen Rasterspalte (bei `gentest-versprechen`
		   `minmax(0, 11rem)`, im Druck rund 26 mm), dann zwingt eine
		   feste Breite von 46 mm das Bild ueber seine Spalte hinaus —
		   es legt sich auf den Text daneben, und ganze Woerter
		   verschwinden darunter. Aufgefallen am 08.08.2026 auf Blatt 5.
		   Mit `min()` bleibt das Siegel klein genug fuer seine Spalte
		   und wird nur dort auf 46 mm gedeckelt, wo Platz ist. */
		max-width: min(46mm, 100%) !important;
		max-height: 46mm !important;
		width: auto !important;
		height: auto !important;
	}

	/* ⚠ Hier stand `max-width: 88ch`. Das war zu schmal gegriffen: 88ch
	   sind bei 9,6 pt rund 626 px, die Textbahn einer Seite ist auf A4
	   aber etwa 718 px breit. Auf jedem Absatz blieb dadurch rechts ein
	   Streifen von gut anderthalb Zentimetern leer — gemessen am
	   08.08.2026 an `fremder-deckruede`: 20 von 44 Textelementen bei
	   87 % ihrer Bahn, quer durch die Seite derselbe Wert. An Blattzahl
	   und Fuellgrad ist das unsichtbar, dem Auge faellt es sofort auf
	   (Beanstandung des Nutzers).

	   Die Grenze bleibt, aber als das, was sie sein soll: ein Schutz
	   davor, dass Text ohne eigene Bahn ueber die volle Blattbreite bis
	   an die Kante laeuft. 190 mm sind 718 px — breiter als jede
	   Textbahn, schmaler als das Blatt. Wo eine Bahn da ist, greift die
	   Regel nicht mehr; wo keine ist, faengt sie den Satz ab.

	   `margin-inline-start` muss mit: Oben nimmt die Vorlage allen
	   Elementen die `max-width`. Damit wird eine Zentrierung per
	   `margin: 0 auto`, die am Bildschirm folgenlos blieb, plötzlich
	   wirksam — die neue Grenze gibt ihr wieder etwas zu zentrieren.
	   Auf mindestens 9 Seiten stand dadurch einzelner Text eingerückt
	   neben dem übrigen Satz; bei `zuchttier-aus-dem-ausland` traf es
	   wegen `p { margin: 0 auto 1.3rem }` jeden Absatz. (08.08.2026) */
	p, li, blockquote, dd, dt, figcaption, td, th
	{
		max-width: 190mm !important;
		margin-inline-start: 0 !important;
	}

	/* --- 4f. Luft nach einem Seitenumbruch ------------------------
	   Nach einem erzwungenen Umbruch soll der Inhalt oben nicht an der
	   Blattkante kleben, sondern 12 mm Abstand haben. Der Abstand liegt
	   als Innenabstand am Folgeelement — dessen Hintergrund reicht
	   dadurch weiterhin randlos bis an die Kante, nur der Inhalt rueckt
	   nach unten. Ein Seitenrand ueber `@page` waere falsch: Der wuerde
	   den Hintergrund abschneiden.

	   Nutzung im seitenspezifischen Bereich:
	       .xyz     { break-after: page; }
	       .xyz + * { padding-top: 12mm; } */
	.druck-umbruch { break-after: page !important; }
	.druck-umbruch + * { padding-top: 12mm !important; }

	/* --- 5. Umbrüche ----------------------------------------------- */
	h1, h2, h3, h4 { break-after: avoid; }
	section, article, div, main { break-inside: auto !important; }
	figure, blockquote, tr, li, img { break-inside: avoid; }

	/* Listen bleiben als Ganzes zusammen — eine abgeschnittene
	   Aufzaehlung liest sich auf Papier falsch, weil der Leser die
	   ersten Punkte auf dem einen und den Rest auf dem naechsten Blatt
	   sucht. Passt eine Liste beim besten Willen nicht auf ein Blatt,
	   bricht der Renderer sie trotzdem — `avoid` ist ein Wunsch, kein
	   Verbot, es entsteht also keine leere Seite. */
	ul, ol, dl,
	[class*="stand"], [class*="liste"], [class*="punkte"], [class*="schritt"]
	{
		break-inside: avoid;
	}

	/* --- 6. Impressum unten auf der letzten Seite -------------------
	   Der Fuß bekommt ein eigenes Schlussblatt und wird darin nach
	   unten gedrückt. Anders ist „unten auf der letzten Seite" im
	   Browserdruck nicht zuverlässig zu erreichen: Endet der Inhalt
	   mitten auf einem Blatt, klebt ein normal fließender Fuß direkt
	   darunter statt an der Blattkante. */
	/* Impressum: zusammenhalten und kompakt setzen. Es ist Pflichttext,
	   der nicht am Stueck gelesen wird — kleiner gesetzt passt er auf
	   das Blatt, auf dem der Inhalt endet, statt ein eigenes zu
	   beanspruchen. */
	.fuss, body > footer
	{
		break-inside: avoid;
	}

	.fuss, .fuss *, body > footer, body > footer *
	{
		font-size: 7.4pt !important;
		line-height: 1.42 !important;
	}

	.fuss p, .fuss div, .fuss li,
	body > footer p, body > footer div, body > footer li
	{
		margin-top: 0 !important;
		margin-bottom: .8mm !important;
	}

	/* Kopf und Fuß der Lesefassung bleiben aus — die Seite bringt
	   ihren eigenen Kopf und ihr eigenes Impressum mit. */
	.druckkopf, .druckfuss { display: none !important; }

	/* --- 7. Ausblenden, zum Schluss -------------------------------
	   ⚠ Diese Liste steht bewusst ganz am Ende und wiederholt
	   Abschnitt 4. Grund: `[class*="spalte"] { display: block }` aus
	   Abschnitt 4c ist gleich stark (beide `!important`, beide eine
	   Attributauswahl) und stand weiter unten — bei gleicher Staerke
	   gewinnt die spaetere Regel. Heisst eine mitlaufende Leiste
	   `.teilen-spalte`, wurde sie dadurch wieder eingeblendet und
	   druckte auf jedem Blatt mit. (Befund 08.08.2026, zuletzt offen
	   bei `konzept-je-rasse`.) Was nicht mitkommt, kommt zuletzt. */
	[data-teilen], [data-kopieren], [data-pdf],
	[data-druck="aus"],
	.druck-weg
	{
		display: none !important;
	}
}

.druckkopf, .druckfuss { display: none; }
/* DRUCK:ENDE */

/* DRUCK-EIGEN:START */
/* Nur fuer diese Seite. Wird von tools/druck.py NIE ueberschrieben.
   Hier stehen die erzwungenen Seitenumbrueche und die Ausnahmen, die
   sich nicht universell formulieren lassen.

   Am 08.08.2026 geleert: Der vorherige Inhalt stammte aus einer
   falschen Gewichtung (Bilder verkleinern statt Umbrueche setzen)
   und flickte teils Vorlagenfehler, die inzwischen in
   tools/druck.css behoben sind. Der alte Stand steht in
   memory/archiv-druck-eigen.md — dort nachsehen, welche
   strukturellen Reparaturen diese Seite schon einmal brauchte.

   Neu aufgebaut am 08.08.2026 nach der Anleitung
   memory/anleitung-druck.md (erst messen, dann befestigen). */
@media print
{
	/* --- Strukturelle Reparaturen ---------------------------------

	   Kachelraster wiederherstellen (Befund 4c): Ohne diese Regeln
	   werden die quadratischen Kacheln (aspect-ratio: 1) zu
	   blattbreiten Quadraten und die Seite waechst um Blaetter.
	   Drei Hunde nebeneinander bzw. das Vergleichspaar betroffen /
	   unauffaellig — genau der Vergleich ist der Inhalt, die Bilder
	   gehoeren nebeneinander. */
	.strecke { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
	.paar    { display: grid !important; grid-template-columns: 1fr 1fr !important; }

	/* Das umflossene Detailbild: Die Vorlage setzt figure auf
	   width: auto (Satzspiegel-Regel 4e) — das Float verliert damit
	   seine 19-rem-Spalte und das quadratische Bild laeuft auf volle
	   Bahnbreite (~180 mm hoch). Am Schirm belegt es 41 % der Bahn;
	   das Verhaeltnis wird hier wiederhergestellt. */
	.umfluss figure { width: 41% !important; }

	/* Siegelkasten: Die Bildspalte des Grids ist 9,5 rem — bei der
	   9-px-Druckbasis nur 85 px. Das Siegel druckt aber 46 mm (Vorlage)
	   und ueberlappte den Text daneben. Spalte auf die Siegelbreite. */
	.siegel { grid-template-columns: 38mm 1fr !important; }
	.siegel img { max-width: 38mm !important; max-height: 38mm !important; }

	/* Die Ziffern der Schritte sind ein ::before mit .95rem — das
	   erfasst keine Rueckholliste der Vorlage, sie druckten mit 6,4 pt.
	   Bildschirmverhaeltnis: 86 % des Fliesstexts. */
	.schritte li::before { font-size: 8.3pt !important; }

	/* --- Seitenumbruecke: an den natuerlichen Naehten befestigt ----
	   Ohne eigene Umbrueche fielen die Blattwechsel bereits an vier
	   Naehte; hier werden sie festgeschrieben (Zaehlregel:
	   Umbrueche = Blattzahl - 1). Abstand nach dem Wechsel: 12 mm als
	   padding am Folgeelement; die Abschnitte 3 und 4 bringen ueber
	   ihr eigenes section-padding (~15 mm) schon genug mit. */

	/* Blatt 1 -> 2: nach dem Gen-Text ("... sieht man ihm aber nicht
	   an."), vor dem Detailbild mit eigener Bildunterschrift. Das
	   Float-Bild passt nicht mehr neben den Text auf Blatt 1 und
	   eroeffnet mit der Bildstrecke das zweite Blatt — der Bruch
	   befestigt genau den natuerlichen Fall. Abstand am inneren img,
	   weil padding am Umbruchtraeger am Blattanfang verworfen wird. */
	.umfluss figure { break-before: page; }
	.umfluss figure > img { margin-top: 12mm !important; }

	/* Blatt 2 -> 3: nach "Heilbar ist es nicht ...", vor dem
	   Vergleichspaar betroffen/unauffaellig. Kein ::before als
	   Abstandhalter — im Grid wuerde es zum ersten Rasterfeld. */
	.cda__block > p:nth-of-type(4) { break-after: page; }
	.paar { padding-top: 12mm !important; width: 90% !important; }

	/* Blatt 3 -> 4: Ende des dunklen Regelblocks. Damit der
	   Vorbehalt-Absatz noch mit auf das Blatt kommt, sind die
	   Vergleichskacheln oben leicht verkleinert (90 %) und der untere
	   Innenabstand des Regelblocks gekuerzt — sonst muss die Section
	   samt padding ueber die Blattkante und Chromium schiebt den
	   letzten Absatz allein auf ein neues Blatt. */
	.nacht { break-after: page; padding-bottom: 8mm !important; }

	/* Blatt 4 -> 5: Ende des Abschnitts "Was auch dann noch offen
	   bleibt", vor dem ZEUS-Block. */
	.offen { break-after: page; }

	/* Letztes Blatt: ZEUS-Block, Empfehlung und Impressum zusammen.
	   Dafuer fehlen ~25 mm: Siegel 46 -> 38 mm (hobbyzucht-Muster,
	   siehe oben) und die Innenabstaende von Empfehlungsblock und
	   Fuss im Druck gekuerzt — sonst wandert das Impressum allein
	   auf ein siebtes Blatt mit 253 mm Luft. */
	.weiter { padding-block: 5mm !important; }
	.fuss   { padding-block: 4mm !important; }

	/* Nahtschutz: nie mitten im Absatz umbrechen (Archiv-Befund:
	   ein Absatz brach zwischen zwei Blaettern mitten im Satz). */
	p { break-inside: avoid; }

	/* --- Schriftgrade zurueckstellen ------------------------------
	   Die Vorlage setzt div/a/b/span-Text pauschal auf 9,6 pt.
	   Gemessen bei 794 px Fensterbreite (Fliesstext = 17,58 px = 100 %):
	   die folgenden Elemente weichen am Bildschirm bewusst ab, das
	   Verhaeltnis wird hier wiederhergestellt. */

	/* Vorspann unter dem Titel: 120 % des Fliesstexts */
	.gross { font-size: 11.5pt !important; }

	/* Merksatz ueber dem Trennstrich: 123 %, engere Zeilen wie am Schirm */
	.merksatz { font-size: 11.8pt !important; line-height: 1.42 !important; }

	/* Mono-Etiketten (verduennt/unverduennt/betroffen, Siegel- und
	   Teilen-Beschriftung): am Schirm 62 % des Fliesstexts */
	.strecke .art, .paar .art,
	.siegel figcaption b,
	.weiter__reihe a, .weiter__reihe button { font-size: 5.9pt !important; }

	/* Beschriftung der Verduennungsskala: 56 % */
	.stufe span { font-size: 5.4pt !important; }

	/* Genetik-Kuerzel minimal kleiner als ihr Umfeld (92 %),
	   Auftakt-Wort des Empfehlungssatzes 84 % — wie am Schirm relativ */
	.gen { font-size: .92em !important; }
	.weiter__auftakt { font-size: .84em !important; }
}
/* DRUCK-EIGEN:ENDE */

/* Kennzeichnung künstlich erzeugter Bilder — AI Act, Art. 50 Abs. 4.
   Echter Text statt CSS-content: wird vorgelesen, ist durchsuchbar und
   skaliert mit. Die Werte sind mit !important gesichert, weil jede der
   54 Seiten ein eigenes Stylesheet hat und eine seiteneigene span-Regel
   die Kennzeichnung sonst unsichtbar färben kann — genau das ist beim
   Deutschen Spitz passiert (.tafel span setzte die Schrift dunkel). */
.kibild
{
	position: relative;
}

span.kibild
{
	display: block;
	line-height: 0;
}

.kibild .kimarke
{
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	z-index: 3;
	margin: 0 !important;
	padding: .18rem .34rem !important;
	background: rgba(0, 0, 0, .4) !important;
	color: #fff !important;
	font: 600 9px/1 system-ui, -apple-system, sans-serif !important;
	letter-spacing: .02em !important;
	text-transform: none !important;
	text-align: right !important;
	pointer-events: none;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* Im Druck begrenzt das Druck-Stylesheet die Bilder auf eine maximale Höhe
   (`max-height`, `width: auto`) und zentriert sie. Der Rahmen wäre dann breiter
   als das Bild und die Kennzeichnung säße daneben — deshalb schrumpft er hier
   auf die Bildgröße. */
@media print
{
	span.kibild
	{
		width: fit-content !important;
		max-width: 100% !important;
		margin-inline: auto !important;
	}
}
/* Randlose Bilder laufen im Druck bis an die Papierkante — dort würde das
   Etikett angeschnitten. Ein kleiner Innenabstand hält es auf der Seite. */
@media print
{
	.kibild .kimarke
	{
		top: 3mm !important;
		right: 3mm !important;
	}
}