/* ------------------------------------------------------------------
   hundetagebuch.qualzuchtpraevention.com
   Farbwelt aus den Bildern: Aquamarin aus dem Studiohintergrund,
   Papierweiß, ein tiefes Blaugrün als Text. Klar, freundlich, hell.
   Layout: der Gesprächsverlauf als Hauptmotiv.
   Typografie: Kapitälchen in den Überschriften.
   Effekt: die Nachrichten erscheinen nacheinander.
   ------------------------------------------------------------------ */

*
{
	box-sizing: border-box;
}

:root
{
	--papier: #fbfbf8;
	--papier2: #f0f2ee;
	--aqua: #6fc9c2;
	--aqua2: #a9e0da;
	--aquatief: #2f7d78;
	--tief: #17322f;
	--mittel: #5c706d;
	--linie: #d5ddd9;

	--bahn: 72rem;
	--eng: 39rem;
	--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

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

body
{
	margin: 0;
	background: var(--papier);
	color: var(--tief);
	font: 400 clamp(1rem, .96rem + .22vw, 1.1rem)/1.68 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.2rem, 4.5vw, 3.2rem);
}

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

.titel
{
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.4rem);
}

.titel__marke
{
	margin: 0;
	font: 400 .76rem/1 var(--mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--aquatief);
}

h1
{
	margin: clamp(1.4rem, 3vw, 2rem) 0 0;
	font-weight: 500;
	font-variant: small-caps;
	font-feature-settings: "smcp" 1;
	letter-spacing: .01em;
	font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.4rem);
	line-height: 1.1;
	max-width: 20ch;
}

.titel__unter
{
	max-width: 44rem;
	margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
	font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem);
	line-height: 1.6;
	color: #2c4643;
}

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

.breitbild
{
	margin: 0;
	padding: 0 clamp(1.2rem, 4.5vw, 3.2rem);
	max-width: var(--bahn);
	margin-inline: auto;
}

.breitbild img
{
	width: 100%;
	border-radius: 3px;
}

figcaption
{
	padding: .75rem 0 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--mittel);
}

/* --- Abschnitte --------------------------------------------------- */

section
{
	padding: clamp(2.8rem, 7vw, 5rem) 0;
}

section.eng
{
	padding-top: clamp(2rem, 5vw, 3.4rem);
}

h2
{
	margin: 0 0 1.3rem;
	font-weight: 500;
	font-variant: small-caps;
	font-feature-settings: "smcp" 1;
	font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: .01em;
}

p
{
	max-width: var(--eng);
}

.weit p
{
	max-width: 46rem;
}

/* --- die drei Sätze ----------------------------------------------- */

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

.drei__raster
{
	display: grid;
	gap: clamp(1.4rem, 3.5vw, 2.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.drei__raster > div
{
	min-width: 0;
	padding-top: 1rem;
	border-top: 3px solid var(--aqua);
}

.drei__raster b
{
	display: block;
	margin-bottom: .45rem;
	font-size: 1.05rem;
}

.drei__raster p
{
	margin: 0;
	max-width: none;
	font-size: .96rem;
	color: #33504d;
}

/* --- das Wochenraster --------------------------------------------- */

.raster
{
	background: var(--tief);
	color: var(--papier);
}

.raster h2
{
	color: var(--papier);
}

.raster p
{
	color: #cddedb;
}

.verlauf
{
	display: grid;
	gap: .7rem;
	margin: clamp(2rem, 4.5vw, 3.2rem) 0 0;
	max-width: 46rem;
}

.blase
{
	max-width: min(30rem, 88%);
	margin: 0;
	padding: .85rem 1.15rem;
	border-radius: 1.1rem;
	font-size: .98rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .45s ease, transform .45s ease;
}

.verlauf.da .blase
{
	opacity: 1;
	transform: none;
}

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

.verlauf .blase--ki
{
	justify-self: start;
	background: #21403c;
	color: #e6f2f0;
	border-bottom-left-radius: .25rem;
}

.blase--ki b { color: var(--aqua2); }

.verlauf .blase--du
{
	justify-self: end;
	background: var(--aqua);
	color: #10201e;
	border-bottom-right-radius: .25rem;
}

.verlauf__fuss
{
	margin: 1.2rem 0 0;
	max-width: 42rem;
	font-size: .86rem;
	line-height: 1.6;
	color: #8fb3af;
}

.raster__satz
{
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	max-width: 34ch;
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.9rem);
	line-height: 1.35;
	color: var(--aqua2);
}

/* --- was die Anwendung sonst noch kann ---------------------------- */

.kann__raster
{
	display: grid;
	gap: clamp(1.4rem, 3.5vw, 2.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

.kann__raster > div
{
	min-width: 0;
	padding-left: 1.1rem;
	border-left: 3px solid var(--aqua);
}

.kann__raster b
{
	display: block;
	margin-bottom: .4rem;
	font-size: 1.05rem;
}

.kann__raster p
{
	margin: 0;
	max-width: none;
	font-size: .96rem;
	color: #33504d;
}

/* --- Bild-Text-Paare ---------------------------------------------- */

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

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

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

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

.paar figure img
{
	width: 100%;
	border-radius: 3px;
}

/* --- die Zahl ----------------------------------------------------- */

.zahl
{
	background: var(--aqua);
	color: var(--tief);
}

.zahl__raster
{
	display: grid;
	gap: clamp(1.2rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: center;
}

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

.zahl__gross
{
	margin: 0;
	font-size: clamp(4.5rem, 2rem + 12vw, 10rem);
	line-height: .85;
	font-weight: 500;
	letter-spacing: -.02em;
}

.zahl p
{
	max-width: 34rem;
	margin: 0;
}

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

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

/* Text links, Siegel rechts */
.zeus__raster
{
	display: grid;
	gap: clamp(2rem, 5vw, 3.6rem);
	align-items: start;
}

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

.zeus__text { min-width: 0; }

.zeus__siegel
{
	margin: 0;
	min-width: 0;
	max-width: 13rem;
}

.zeus__siegel img { width: 100%; }

.zeus__siegel figcaption
{
	margin-top: .8rem;
	padding: 0;
	font-size: .84rem;
	line-height: 1.5;
	text-align: center;
	color: var(--mittel);
}

.zeus__satz
{
	max-width: 32ch;
	margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
	font-size: clamp(1.3rem, 1.1rem + 1.1vw, 2rem);
	line-height: 1.35;
	color: var(--aquatief);
}

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

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

/* --- Querlinks: Zeilen mit Wochenmarke ---------------------------- */

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

.themenliste
{
	list-style: none;
	margin: clamp(1.4rem, 3vw, 2rem) 0 0;
	padding: 0;
	counter-reset: w;
	max-width: 62rem;
}

.themenliste li
{
	display: grid;
	grid-template-columns: 4.4rem 1fr;
	gap: .8rem;
	align-items: baseline;
	padding: .55rem 0;
	border-bottom: 1px solid var(--linie);
	font-size: .96rem;
}

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

.themenliste li:not([hidden])
{
	counter-increment: w;
}

.themenliste li::before
{
	content: "Nr. " counter(w, decimal-leading-zero);
	font: 400 .74rem/1.6 var(--mono);
	letter-spacing: .06em;
	color: var(--aquatief);
}

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

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

/* --- Fuß als Fußnotenapparat -------------------------------------- */

.fuss
{
	border-top: 3px solid var(--aqua);
	padding: clamp(2rem, 5vw, 3rem) 0 clamp(3rem, 7vw, 4.6rem);
	font-size: .86rem;
	line-height: 1.65;
	color: var(--mittel);
}

.fuss__spalten
{
	columns: 2 20rem;
	column-gap: clamp(1.6rem, 4vw, 3rem);
	max-width: 60rem;
}

.fuss__note
{
	break-inside: avoid;
	margin: 0 0 1rem;
	max-width: none;
	padding-left: 1.6rem;
	text-indent: -1.6rem;
}

.fuss__note sup
{
	color: var(--aquatief);
	font-weight: 700;
	margin-right: .4rem;
}

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

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

/* --- Weitergeben: Botschaft links, Elemente rechts ----------------- */

.weiter
{
	background: var(--papier2);
	padding-block: clamp(2.4rem, 6vw, 3.8rem);
}

.weiter__raster
{
	display: grid;
	gap: clamp(1.4rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}

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

.weiter__wort,
.weiter__elemente
{
	min-width: 0;
}

.weiter__marke
{
	margin: 0 0 .7rem;
	max-width: none;
	font: 400 .74rem/1 var(--mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--aquatief);
}

.weiter__satz
{
	margin: 0;
	max-width: 34rem;
	font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
	line-height: 1.55;
	color: #2c4643;
}

.weiter__elemente
{
	display: grid;
	gap: .1rem;
}

.weiter__el
{
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .6rem .2rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: .93rem;
	color: var(--tief);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid var(--linie);
}

.weiter__el[hidden]
{
	display: none;
}

.weiter__sym
{
	flex: none;
	color: var(--aquatief);
}

.weiter__el span
{
	border-bottom: 1px solid transparent;
}

.weiter__el:hover span,
.weiter__el:focus-visible span
{
	border-bottom-color: var(--aquatief);
}

.weiter__el:hover,
.weiter__el:focus-visible
{
	color: var(--aquatief);
}

.weiter__el:focus-visible
{
	outline: 2px solid var(--aqua);
	outline-offset: .2rem;
}

/* --- Leiste: rechts, kleine Kachelspalte in Papierweiß ------------- */

.leiste
{
	display: none;
}

@media (min-width: 92rem)
{
	.leiste
	{
		position: fixed;
		right: 1.5rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
		display: flex;
		flex-direction: column;
		gap: .25rem;
		padding: .45rem;
		background: var(--papier);
		border: 1px solid var(--linie);
		border-radius: 3px;
	}

	.leiste__el
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		height: 2.4rem;
		border: 0;
		border-radius: 3px;
		background: none;
		color: var(--mittel);
		cursor: pointer;
	}

	.leiste__el[hidden]
	{
		display: none;
	}

	.leiste__el:hover,
	.leiste__el:focus-visible,
	.leiste__el.ist-kopiert
	{
		background: var(--aqua);
		color: var(--tief);
	}

	.leiste__el:focus-visible
	{
		outline: 2px solid var(--aquatief);
		outline-offset: 1px;
	}
}