/* ------------------------------------------------------------------
   welpen-besichtigen.qualzuchtpraevention.com
   Farbwelt aus den Bildern: kühles Betongrau als Grundfläche,
   Stroh und helles Holz als Wärme, Tiefblau als Signal.
   Bewusst grau-dominant — die Nachbarseiten sind warm-dominant.
   Layout: Mosaik aus unterschiedlich großen Beobachtungskacheln.
   ------------------------------------------------------------------ */

:root
{
	--beton:   #dcdad5;
	--beton-h: #eceae6;
	--stroh:   #c9a961;
	--holz:    #9a7b4f;
	--tief:    #23262a;
	--blau:    #2f4f6b;
	--blau-h:  #6b93b4;
	--text:    #2b2e32;
	--leise:   #6e7278;

	--bahn: 74rem;
	--kond: "Oswald", "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}

*, *::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(--beton-h);
	color: var(--text);
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
	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: 640; }

.bahn { width: min(100% - 2.4rem, var(--bahn)); margin-inline: auto; }
.schmal { max-width: 39rem; }
section { padding-block: clamp(3.4rem, 7vw, 6.5rem); }

/* Titel: kondensierte Versalien, sehr schwer */
h1, h2
{
	margin: 0 0 1.2rem;
	font-family: var(--kond);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: .01em;
}

h1 { font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.8rem); max-width: 16ch; }
h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); max-width: 20ch; }

.marke
{
	margin: 0 0 1rem;
	font-family: var(--kond);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--blau);
}

.gross { font-size: clamp(1.08rem, 1rem + .6vw, 1.4rem); line-height: 1.55; max-width: 38ch; color: var(--leise); }

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

.kopf { background: var(--beton); padding-block: clamp(3rem, 6vw, 5rem); }

.kopf__raster { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; grid-template-columns: 1fr; }

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

.kopf figure { margin: 0; }
.kopf img { width: 100%; }

/* ============ Das Mosaik der Beobachtungen ===================== */

.mosaik
{
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
}

@media (min-width: 50rem)
{
	.mosaik { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); }
	.kachel--gross { grid-column: span 4; }
	.kachel--klein { grid-column: span 2; }
	.kachel--halb  { grid-column: span 3; }
}

.kachel
{
	padding: 1.5rem 1.6rem;
	background: #fff;
	border-top: 3px solid var(--blau);
	transform: rotate(-.35deg);
	transition: transform .6s cubic-bezier(.24,.7,.3,1), opacity .6s ease;
}

.kachel:nth-child(even) { transform: rotate(.3deg); }
.kachel.da { transform: rotate(0deg); }

.kein-js .kachel { transform: none; }

.kachel--bild { padding: 0; border-top: 0; overflow: hidden; }
.kachel--bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

.kachel h3
{
	margin: 0 0 .5rem;
	font-family: var(--kond);
	font-size: 1.15rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.kachel p { margin: 0; font-size: .96rem; line-height: 1.55; }

.kachel--dunkel { background: var(--tief); color: #dcdfe3; border-top-color: var(--stroh); }
.kachel--dunkel h3 { color: #fff; }

/* ==================== Die Grenze ============================== */

.grenze { background: var(--tief); color: #dcdfe3; }
.grenze h2 { color: #fff; }
.grenze .marke { color: var(--blau-h); }
.grenze strong { color: #fff; }

.grenze__raster { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }

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

.spalte__kopf
{
	font-family: var(--kond);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding-bottom: .7rem;
	margin-bottom: 1.1rem;
	border-bottom: 2px solid var(--stroh);
	color: var(--stroh);
}

.spalte--rechts .spalte__kopf { border-bottom-color: var(--blau-h); color: var(--blau-h); }

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

.spalte li
{
	padding: .6rem 0 .6rem 1.4rem;
	position: relative;
	font-size: .97rem;
	line-height: 1.5;
	border-bottom: 1px solid rgba(220,223,227,.16);
}

.spalte li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .6rem; height: 2px; background: var(--stroh); }
.spalte--rechts li::before { background: var(--blau-h); }

.merksatz
{
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.3rem;
	border-top: 3px solid var(--stroh);
	font-family: var(--kond);
	font-size: clamp(1.3rem, 1.05rem + 1.5vw, 2.1rem);
	font-weight: 500;
	line-height: 1.22;
	text-transform: uppercase;
	max-width: 26ch;
	color: #fff;
}

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

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

.schritte { list-style: none; counter-reset: s; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; padding: 0; display: grid; gap: 1.1rem; max-width: 50rem; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; }
.schritte li::before { content: counter(s, decimal-leading-zero); font-family: var(--kond); font-weight: 600; color: var(--blau); }

.knopf
{
	display: inline-block; margin-top: clamp(1.8rem, 3.5vw, 2.4rem);
	padding: .9em 2.1em; background: var(--blau); color: #fff; text-decoration: none;
	font-family: var(--kond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	transition: background .25s ease;
}
.knopf:hover, .knopf:focus-visible { background: var(--tief); }

/* --- Das Siegel als eigene Kachel im Mosaik-Duktus ------------- */

.siegelkachel
{
	margin: clamp(2.2rem, 4.5vw, 3.2rem) 0 0;
	padding: 1.5rem 1.6rem;
	background: #fff;
	border-top: 3px solid var(--blau);
	max-width: 34rem;
	display: grid;
	gap: 1.2rem;
	grid-template-columns: 1fr;
	align-items: center;
	transform: rotate(.3deg);
	transition: transform .6s cubic-bezier(.24,.7,.3,1), opacity .6s ease;
}

@media (min-width: 34rem) { .siegelkachel { grid-template-columns: 8.5rem 1fr; gap: 1.5rem; } }

.siegelkachel.da { transform: rotate(0deg); }
.kein-js .siegelkachel { transform: none; }

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

.siegelkachel figcaption { font-size: .9rem; line-height: 1.5; }

.siegelkachel figcaption b
{
	display: block;
	margin-bottom: .4rem;
	font-family: var(--kond);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blau);
}

/* ============ Querlinks: Register mit Balken ================== */

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

.themenliste { list-style: none; margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; padding: 0; }
.themenliste li[hidden] { display: none; }

.themenliste a
{
	display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
	padding: .8rem 0; text-decoration: none;
	border-bottom: 1px solid rgba(43,46,50,.15);
	transition: padding-left .25s ease, color .25s ease;
}

.themenliste a::before
{
	content: ""; width: 1.6rem; height: 3px; background: var(--stroh); flex: none;
	transition: width .25s ease, background .25s ease;
}

.themenliste a:hover, .themenliste a:focus-visible { padding-left: .5rem; color: var(--blau); }
.themenliste a:hover::before, .themenliste a:focus-visible::before { width: 2.6rem; background: var(--blau); }

/* ==================== Fuss ==================================== */

.fuss { background: var(--tief); color: rgba(220,223,227,.76); padding-block: clamp(2.6rem, 5vw, 3.8rem); font-size: .85rem; line-height: 1.6; }
.fuss__raster { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .fuss__raster { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 3rem; } }
@media (min-width: 68rem) { .fuss__raster { grid-template-columns: repeat(4, 1fr); } }
.fuss b { display: block; color: #fff; font-family: var(--kond); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .55rem; }
.fuss a { color: #dcdfe3; }

.steig { opacity: 0; }
.steig.da { opacity: 1; }
.kein-js .steig { opacity: 1; }

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

/* ============ Mitgeben: Symbole oben, Beschriftung darunter =====
   Zweizeilig — alle Symbole stehen auf einer Höhe, die Wörter exakt
   darunter auf einer zweiten. Die feste Höhe der Zeichenzeile hält
   die Grundlinie der Beschriftungen bündig, gleich wie lang das
   Wort darunter ist. */

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

.mitgeben__satz
{
	max-width: 40rem;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
}

.mitgeben__tafel
{
	list-style: none;
	margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: .8rem;
	max-width: 52rem;
}

.mitgeben__tafel li { min-width: 0; }

.mitgeben__tafel a,
.mitgeben__tafel button
{
	display: grid;
	grid-template-rows: 2.6rem auto;
	align-items: center;
	justify-items: start;
	width: 100%;
	margin: 0;
	padding: .9rem 1rem 1rem;
	background: #fff;
	border: 0;
	border-top: 3px solid var(--stroh);
	font: inherit;
	text-align: left;
	text-decoration: none;
	color: var(--text);
	cursor: pointer;
	transition: border-top-color .25s ease, color .25s ease;
}

.mitgeben__tafel a:hover,
.mitgeben__tafel button:hover,
.mitgeben__tafel a:focus-visible,
.mitgeben__tafel button:focus-visible
{
	border-top-color: var(--blau);
	color: var(--blau);
}

.mitgeben__zeichen
{
	display: flex;
	align-items: center;
	height: 100%;
	color: var(--blau);
}

.mitgeben__tafel a:hover .mitgeben__zeichen,
.mitgeben__tafel button:hover .mitgeben__zeichen,
.mitgeben__tafel a:focus-visible .mitgeben__zeichen,
.mitgeben__tafel button:focus-visible .mitgeben__zeichen
{
	color: var(--tief);
}

.mitgeben__wort
{
	font-family: var(--kond);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.25;
}

.mitgeben__tafel [hidden] { display: none; }

/* ---- Mitlaufende Leiste, rechts ------------------------------
   Die Bahn misst 74rem; erst ab 1420 px bleibt rechts genug Rand. */

.spur { display: none; }

@media (min-width: 1420px)
{
	.spur
	{
		position: fixed;
		right: 1.2rem;
		top: 38%;
		z-index: 40;
		display: grid;
		gap: .45rem;
	}

	.spur__el
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.6rem;
		height: 2.6rem;
		padding: 0;
		border: 0;
		border-top: 3px solid var(--stroh);
		background: #fff;
		color: var(--blau);
		cursor: pointer;
		transition: border-top-color .25s ease, color .25s ease;
	}

	.spur__el:hover,
	.spur__el:focus-visible,
	.spur__el.ist-kopiert
	{
		border-top-color: var(--blau);
		color: var(--tief);
	}

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

/* Nicht unterstützte Elemente bekommen keine leere Spalte in der Tafel. */
.mitgeben__tafel li:has([hidden])
{
	display: none;
}