/*
	GUI - G u I Versicherungsmakler GmbH, Graz.

	Ein Gewerbemakler verkauft Verlaesslichkeit. Die Seite ist deshalb hell, ruhig und
	typografisch, nicht effektvoll: heller Grund, kraeftige Schrift, viel Luft, EINE
	Akzentfarbe. Wer hier landet, entscheidet ueber die Haftpflicht seines Betriebs -
	er will lesen koennen, nicht bewundern.

	Keine Bibliothek, keine fremdgehostete Schrift, keine Abhaengigkeit. Satoshi liegt
	unter /fonts/ auf dem eigenen Server: kein Request an Fontshare oder Google, damit
	ohne Einwilligung keine Besucher-IP an einen Dritten geht (LG Muenchen I,
	20.01.2022, Az. 3 O 17493/20).

	Die Dateien sind die unveraenderten Originale aus dem Fontshare-Paket. Die ITF Free
	Font License erlaubt Self-Hosting ausdruecklich (§01), untersagt aber Subsetting
	und Formatkonvertierung (§02). Lizenztext: public/fonts/LICENSE-Satoshi-FFL.txt
*/

@font-face {
	font-family: 'Satoshi';
	src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Satoshi';
	src: url('/fonts/Satoshi-VariableItalic.woff2') format('woff2');
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

/*
	FARBEN: nach dem EFM-Auftritt.

	Aus dem Stylesheet von efm.at ausgezaehlt, nicht geschaetzt: #143056 kommt dort
	96-mal vor und ist die Hausfarbe, #f38d04 37-mal als Akzent, dazu die hellen
	blaugrauen Flaechen (#eaeff4, #f2f4f6) und die Linientoene (#aabfd2, #cfd9e3).

	EINE REGEL, DIE NICHT GEBROCHEN WERDEN DARF: das Orange ist KEINE Textfarbe.
	Auf Weiss liegt es bei 2,44:1 - die Schwelle fuer Fliesstext ist 4,5:1. Es taugt
	als Flaeche (mit marineblauer Schrift darauf: 5,43:1) oder als Text auf
	Marineblau, sonst nirgends. Auch nicht "nur fuer die Ueberschrift".

	Alle hier gesetzten Paare sind nachgerechnet:
	  Marineblau auf Weiss      13,23:1   AAA
	  Marineblau auf Hellgrau   12,00:1   AAA
	  Fliesstext auf Hellgrau    6,20:1   AA
	  Marineblau auf Orange      5,43:1   AA
	  Weiss auf Marineblau      13,23:1   AAA
*/
:root {
	color-scheme: light;
	--grund: #f2f4f6;
	--flaeche: #ffffff;
	--flaeche-warm: #eaeff4;

	--text: #143056;
	--text-leise: #4a5c74;
	--linie: #cfd9e3;
	--linie-stark: #aabfd2;

	/*
		Akzent ist das Blau der eigenen Bildmarke (#09548c aus gui.svg), nicht das
		EFM-Navy. Die beiden liegen mit 1,68:1 zu nah beieinander, um nebeneinander
		als zwei Toene zu wirken - eines muss fuehren. Text bleibt Navy (tiefer,
		13,23:1), Akzent und Bildmarke tragen das GUI-Blau (7,90:1 auf Weiss).
	*/
	--akzent: #09548c;
	--akzent-hell: #0a6aad;
	--akzent-flaeche: #dae8f4;

	/* Signalfarbe. NUR als Flaeche - siehe Regel oben. */
	--signal: #f38d04;
	--signal-tief: #e07f00;

	--spalte: 68rem;
	--schrift: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font-family: var(--schrift);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.bahn {
	width: min(var(--spalte), calc(100% - 3rem));
	margin-inline: auto;
}

/* ------------------------------------------------------------------ Kopfzeile */

.kopf {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--grund) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--linie);
}

.kopf .bahn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 72px;
}

.marke {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	color: var(--text);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/*
	Die Bildmarke ohne Traeger, direkt in der Akzentfarbe.

	Vorher sass sie weiss auf einer Kachel im GUI-Blau. Weiss braucht einen Traeger,
	aber die Kachel setzte einen kraeftigen Farbblock in eine sonst ruhige Kopfzeile -
	und stand als einziges Element mit fester Farbe neben einer Seite, die die
	Helligkeit wechselt.

	Ohne Kachel erbt die Marke ueber currentColor die Akzentfarbe: #09548c auf hellem
	Grund (7,90:1) und im Dunkelmodus das hellere #8fb4d9 (8,01:1). Sie geht damit in
	beiden Faellen mit, statt einen Fremdkoerper zu bilden.

	Die Originaldatei mit fest eingebranntem Blau bleibt unter /gui.svg und dient als
	Favicon und zum Weitergeben.
*/
.marke .zeichen {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	align-self: center;
	color: var(--akzent);
}

.marke b { font-size: 1.35rem; }

.marke span {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-leise);
}

.navigation {
	display: flex;
	gap: 1.6rem;
	font-size: 0.92rem;
}

.navigation a {
	color: var(--text-leise);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.navigation a:hover {
	color: var(--text);
	border-bottom-color: var(--akzent);
}

/* ------------------------------------------------------------------ Aufschlag */

.aufschlag { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }

.aufschlag h1 {
	margin: 0 0 1.2rem;
	font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
	font-weight: 700;
	max-width: 18ch;
}

.aufschlag .fuehrung {
	margin: 0;
	max-width: 54ch;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	color: var(--text-leise);
}

.marker {
	display: inline-block;
	margin-bottom: 1.4rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--linie-stark);
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--akzent);
	background: var(--akzent-flaeche);
	border-color: var(--linie-stark);
}

.knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 2.2rem;
}

.knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
}

.knopf-voll {
	/* Orange traegt hier eine Flaeche, keinen Text - die Schrift darauf ist
	   marineblau (5,43:1). Weisse Schrift auf diesem Orange waere 2,44:1. */
	background: var(--signal);
	color: var(--akzent);
}

.knopf-voll:hover { background: var(--signal-tief); }

.knopf-leer {
	border-color: var(--linie-stark);
	color: var(--text);
}

.knopf-leer:hover { border-color: var(--akzent); color: var(--akzent); }

/* --------------------------------------------------------- Marke im Aufschlag */

.aufschlag-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.6rem;
	align-items: center;
}

/*
	Die Buehne traegt die Perspektive. Ohne sie waere jede Drehung eine flache
	Scherung - die Teile wuerden sich beim Drehen NICHT gegeneinander verschieben,
	und genau darauf beruht der Effekt.
*/
/*
	AUF SCHMALEN GERAETEN STEHT DIE MARKE OBEN.

	Im Markup steht sie hinter dem Text, weil sie dort hingehoert: sie ist Schmuck, und
	ein Vorlesegeraet soll die Ueberschrift zuerst antreffen. Sichtbar gehoert sie aber
	nach oben - sonst faengt die Seite mit einer Textwand an, und das Zeichen taucht
	erst nach den Knoepfen auf, wo es niemand mehr mit der Marke verbindet.

	`order: -1` loest das rein optisch: die Vorlesereihenfolge bleibt Ueberschrift,
	Text, Knoepfe. Zulaessig ist das hier, weil die Marke aria-hidden ist und keine
	Information traegt - bei bedienbaren Elementen waere ein Auseinanderfallen von
	Seh- und Tastaturreihenfolge ein Fehler.

	Kleiner als nebenstehend: oben eingerueckt darf sie die Ueberschrift nicht aus dem
	ersten Bildschirm draengen.
*/
.buehne {
	order: -1;
	perspective: 900px;
	perspective-origin: 50% 50%;
	display: grid;
	place-items: center;
	width: clamp(112px, 30vw, 168px);
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	color: var(--akzent);
}

.marke-3d {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	/* Ruhelage: leicht geneigt, damit auch ohne Bewegung Tiefe zu sehen ist. */
	transform: rotateX(-7deg) rotateY(-10deg);
}

.teil {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/*
	Der Kreis liegt VOR dem Koerper. Der Abstand ist der ganze Punkt: er laesst die
	beiden Teile beim Drehen auseinanderlaufen, weil die Perspektive Naeheres staerker
	verschiebt. Im Logo ist der Kreis bereits abgeloest - hier wird daraus Tiefe.
*/
.koerper { transform: translateZ(0); }
.kreis { transform: translateZ(26px); }

/*
	DIE TRENNUNG ZWISCHEN DEN TEILEN.

	Beide Teile tragen dieselbe Farbe. Wandert der Kreis beim Schwenken ueber den
	Koerper, verschmelzen sie ohne Kante zu einer Flaeche - der raeumliche Eindruck
	kippt genau dann, wenn er am staerksten sein sollte.

	Die Kontur in der Grundfarbe der Seite stellt die Luecke wieder her, die im Logo
	ohnehin zwischen Kreis und Koerper liegt. `paint-order: stroke fill` legt sie unter
	die Fuellung: der sichtbare Kreis behaelt seine Groesse, die Kontur wirkt nur nach
	aussen.

	Warum hier und nicht als Attribut im SVG: var() ist in SVG-Praesentationsattributen
	nicht verlaesslich unterstuetzt. Ausserdem folgt die Farbe so dem Dunkelmodus mit.
*/
.kreis circle {
	stroke: var(--grund);
	stroke-width: 26;
	paint-order: stroke fill;
}

/*
	Die Schattenfarbe steht ebenfalls hier, weil flood-color eine CSS-Eigenschaft ist.
	Im Dunkelmodus waere ein dunkler Schatten auf dunklem Grund unsichtbar - dort
	uebernimmt die Kontur die Trennung, und der Schatten wird nur noch angedeutet.
*/
.koerper feDropShadow { flood-color: #0b2036; flood-opacity: 0.22; }
.kreis feDropShadow { flood-color: #0b2036; flood-opacity: 0.38; }

@media (prefers-color-scheme: light) {
	.koerper feDropShadow { flood-color: #000000; flood-opacity: 0.45; }
	.kreis feDropShadow { flood-color: #000000; flood-opacity: 0.6; }
}

/*
	BEWEGUNG NUR, WENN SIE ERWUENSCHT IST.

	Die Animation entsteht innerhalb von `no-preference` - sie wird also gar nicht
	erst angelegt, statt sie nachtraeglich abzuschalten. Wer sie spaeter nachtraeglich
	abschalten muesste, vergisst die naechste.

	Kein voller Umlauf: die Marke ist nicht spiegelsymmetrisch, ihre Rueckseite waere
	ein seitenverkehrtes Logo. 26 Grad nach jeder Seite reichen fuer die Tiefe und
	lassen sie nie hochkant stehen.
*/
@media (prefers-reduced-motion: no-preference) {
	.marke-3d {
		animation: wenden 19s ease-in-out infinite;
	}
}

@keyframes wenden {
	0% { transform: rotateX(-7deg) rotateY(-26deg); }
	50% { transform: rotateX(-4deg) rotateY(26deg); }
	100% { transform: rotateX(-7deg) rotateY(-26deg); }
}

/* Ab hier stehen Text und Marke nebeneinander. */
@media (min-width: 820px) {
	.aufschlag-raster {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 3.5rem;
	}

	/* Nebeneinander steht sie ohnehin oben - die Umsortierung faellt weg. */
	.buehne {
		order: 0;
		width: clamp(220px, 26vw, 320px);
		margin-inline: 0;
	}
}

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

section { padding-block: clamp(3rem, 6vw, 5rem); }

section + section { border-top: 1px solid var(--linie); }

.ueberschrift {
	margin: 0 0 0.6rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	letter-spacing: -0.025em;
	font-weight: 700;
}

.beschriftung {
	margin: 0 0 0.8rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--akzent);
}

.einleitung {
	margin: 0 0 2.4rem;
	max-width: 58ch;
	color: var(--text-leise);
}

/*
	Das Produktraster darf nicht in die Breite laufen.

	Es sind zwei Karten mit je drei Zeilen Text. Im normalen Raster nehmen sie je die
	halbe Seitenbreite ein und wirken leer. Die Obergrenze von 24rem haelt sie in einer
	lesbaren Breite, der Rest bleibt Weissraum - und kommt ein drittes Produkt dazu,
	fuegt es sich ohne Aenderung daneben.
*/
/*
	DIESELBE LEHRE WIE BEI DEN SPARTEN, EINE ETAGE HOEHER.

	Das gemeinsame Raster mit Haarlinien-Hintergrund funktioniert nur, wenn die Reihe
	voll wird. Auf einem breiten Bildschirm passen hier drei Spalten, es gibt aber
	zwei Produkte - die dritte Zelle blieb als graues Rechteck neben den Karten
	stehen und sah aus wie eine fehlende Karte. Also: eigener Rahmen je Karte, echter
	Abstand dazwischen. Kommt ein drittes Produkt dazu, fuegt es sich ohne Aenderung
	ein; bleibt es bei zweien, endet die Reihe einfach.
*/
.raster.produkte {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 24rem));
	justify-content: start;
	gap: 0.9rem;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.raster.produkte .karte {
	border: 1px solid var(--linie);
	border-radius: 10px;
}

/*
	GRUPPENUEBERSCHRIFT - die fehlende Zwischenebene.

	Vorher standen "Was wir versichern", "Privat" und "Gewerbe und Industrie" alle drei
	als kleine Grossbuchstaben-Beschriftung da. Damit lagen Abschnitt und Untergruppe
	optisch gleichauf, und zehn Karten wirkten wie ein einziger Block. Die Gruppe
	bekommt deshalb eine eigene Groesse und eine Linie, die den Schnitt sichtbar macht.

	Dass Privat der erste Schwerpunkt ist, sagt die Reihenfolge - Privat steht oben,
	Gewerbe darunter. Ein zusaetzliches Etikett am Gewerbe braucht es dafuer nicht;
	es haette die Sparte kleiner gemacht, als sie ist.
*/
.gruppe {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 2.8rem 0 1.1rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--linie);
	font-size: 1.15rem;
	font-weight: 650;
	letter-spacing: -0.02em;
}

/* Die erste Gruppe schliesst direkt an die Einleitung an, dort braucht es keinen
   zweiten Schnitt. */
.einleitung + .gruppe {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ------------------------------------------------------------------ Karten */

/*
	min() im minmax: ohne das erzwingt die Mindestbreite eine Spalte, die breiter sein
	kann als der Behaelter - auf einem 320px-Geraet laeuft das Raster dann waagrecht
	aus dem Bild, und die ganze Seite laesst sich seitlich schieben. Mit min(...,100%)
	schrumpft die Spalte im Zweifel auf die verfuegbare Breite.
*/
.raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
	border-radius: 10px;
	overflow: hidden;
}

.karte {
	background: var(--flaeche);
	padding: 1.6rem;
}

.karte h3,
.karte h4 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.karte p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text-leise);
}

.karte .zeichen {
	display: block;
	margin-bottom: 0.9rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--akzent);
}

/*
	Pflichthinweis nach § 28 Z 3 MaklerG.

	Er darf nicht wie Kleingedrucktes aussehen: das Gesetz verlangt eine ausdrueckliche
	Mitteilung, und ausdruecklich heisst lesbar. Deshalb volle Textgroesse, eigene
	Flaeche und eine Kante in der Signalfarbe - dieselbe Aufmerksamkeit wie ein Hinweis,
	den man selbst gelesen haben will.
*/
.hinweis {
	margin: 1.6rem 0 0;
	padding: 1.1rem 1.3rem;
	border-left: 3px solid var(--signal);
	border-radius: 0 8px 8px 0;
	background: var(--flaeche-warm);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 62ch;
}

.hinweis strong { font-weight: 650; }

/* Knopf innerhalb einer Karte, fuer den Sprung zur Antragsstrecke. */
.karte-knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	padding: 0.6rem 1rem;
	border-radius: 6px;
	background: var(--signal);
	color: var(--akzent);
	font-size: 0.9rem;
	font-weight: 650;
	text-decoration: none;
}

.karte-knopf:hover { background: var(--signal-tief); }

/*
	Nur fuer Screenreader. Der Pfeil im Knopf sagt sehenden Nutzern, dass ein neuer Tab
	aufgeht - wer vorliest bekommt statt des Zeichens diesen Satz. Ein Link, der
	unangekuendigt das Fenster wechselt, ist ein bekanntes Aergernis.
*/
.verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------- Produktseite */

.zurueck {
	display: inline-block;
	margin-bottom: 1.4rem;
	font-size: 0.85rem;
	color: var(--text-leise);
	text-decoration: none;
}

.zurueck:hover { color: var(--akzent); }

.zweispalt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
	border-radius: 10px;
	overflow: hidden;
}

.liste {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text-leise);
}

.liste li + li { margin-top: 0.4rem; }

/* ------------------------------------------------------- Tarifkarten */

.tarife {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1rem;
}

.tarif {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--linie);
	border-radius: 10px;
	background: var(--flaeche);
}

.tarif h3 {
	margin: 0;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--akzent);
}

/*
	Die eine Zahl, auf die es ankommt - gross genug, um drei Karten nebeneinander in
	einem Blick zu vergleichen, ohne zu lesen. Genau das leistet eine Tabelle nicht.
*/
.tarif-zahl {
	margin: 0.7rem 0 0;
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--text);
}

.tarif-zahl span { font-size: 0.6em; font-weight: 600; }

.tarif-unter {
	margin: 0.2rem 0 1.1rem;
	font-size: 0.8rem;
	color: var(--text-leise);
}

.tarif-liste {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--text-leise);
	border-top: 1px solid var(--linie);
	padding-top: 1.1rem;
}

/*
	Haken und Strich stehen im ::before, nicht im Markup: sie sind Schmuck, und ein
	Screenreader soll nicht "Haken" vor jeden Punkt sprechen. Die enthaltene Leistung
	steht ohnehin im Text ("nicht versichert" ist ausgeschrieben), die Zeichen sind
	nur Beschleunigung fuers Auge - Farbe allein traegt hier keine Information.
*/
.tarif-liste li {
	display: grid;
	grid-template-columns: 1.1rem 1fr;
	gap: 0.5rem;
}

.tarif-liste li::before {
	content: '\2713';
	color: var(--akzent);
	font-weight: 700;
}

.tarif-liste li.nein::before { content: '\2013'; color: var(--linie-stark); }

/*
	Der Zusatz kommt auf eine eigene Zeile.

	Vorher lief er hinter den Text und rutschte je nach Breite allein in die naechste
	Zeile - das sah nach einem Umbruchfehler aus, nicht nach Absicht. Als eigene Zeile
	unter der Leistung ist klar, dass er dazugehoert und sie einschraenkt.
*/
.tarif-liste em {
	display: block;
	/*
		DER ZUSATZ MUSS IN DIE TEXTSPALTE.

		Das <li> ist ein Raster aus 1,1rem (Haken) und 1fr (Text). Der blanke Text
		wird zum ersten anonymen Rasterfeld, das <em> zum zweiten - und rutschte damit
		in Zeile zwei, Spalte eins: 1,1rem breit. Ergebnis waren vier Zeilen mit je
		einem Wort ("nach / 12 / Monaten / Wartezeit"), was wie ein Umbruchfehler
		aussah. Die ausdrueckliche Spaltenangabe setzt ihn unter den Text, wo er
		hingehoert.
	*/
	grid-column: 2;
	margin-top: 0.15rem;
	font-style: normal;
	font-size: 0.82em;
	color: var(--text-leise);
}

.tarif-fuerwen {
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--linie);
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--text);
}

/* ----------------------------------------------------------- WhatsApp-Weg */

/*
	Bewusst im Seitenstil, nicht im WhatsApp-Gruen.

	#25D366 mit weisser Schrift liegt bei rund 2:1 und waere als Knopf unlesbar. Das
	Zeichen traegt die Wiedererkennung, der Knopf traegt die Lesbarkeit - so bleibt er
	auch neben den anderen Knoepfen ruhig, statt aus der Seite zu springen.
*/
.wa { gap: 0.55rem; }

.wa-zeichen {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	fill: #25d366;
}

/* Auf dem eigenen Knopf-Gruen waere das Zeichen nicht mehr zu sehen - dort erbt es
   die Schriftfarbe. */
.knopf-voll .wa-zeichen { fill: currentColor; }

/* --------------------------------------------------------- Anbieterlogos */

/*
	Die Logos liegen unter public/logos und werden von der eigenen Adresse geladen.
	Ein Hotlink auf hansemerkur.at oder helvetia.com wuerde die IP jedes Besuchers
	dorthin uebertragen, bevor er irgendetwas anklickt - dasselbe Problem, das wir bei
	den Schriften abgestellt haben.

	HanseMerkur liefert seine Bildmarke nur in Weiss aus; sie ist fuer die eigene
	gruene Flaeche gemacht. Auf hellem Grund waere sie unsichtbar, deshalb sitzt sie
	hier auf einer Kachel im Markengruen #005e52 - so verwendet die HanseMerkur sie
	selbst. Weiss darauf liegt bei 7,71:1. Das hellere #00a075 waere mit 3,34:1 zu
	schwach gewesen.

	Helvetia liefert sie mehrfarbig und auf hellem Grund lesbar - dort braucht es
	keine Kachel.
*/
.anbieter {
	display: inline-flex;
	align-items: center;
	height: 34px;
	margin-bottom: 1.1rem;
}

/*
	Seitenverhaeltnis festnageln.

	Vorher stand hier nur height:100% und width:auto. In einer Tabellenzelle schrumpft
	ein Flex-Kind aber, wenn der Platz knapp wird - das Logo wurde dabei zusammen-
	gequetscht. aspect-ratio haelt das Verhaeltnis, flex-shrink:0 verhindert das
	Schrumpfen, und object-fit sorgt dafuer, dass im Zweifel Rand entsteht statt
	Verzerrung.
*/
.anbieter img {
	display: block;
	height: 100%;
	width: auto;
	flex: 0 0 auto;
	object-fit: contain;
}

.anbieter img[src*='hansemerkur'] { aspect-ratio: 56.7 / 26.2; }
.anbieter img[src*='helvetia'] { aspect-ratio: 169.939 / 39.846; }

.anbieter { flex: 0 0 auto; }

.anbieter.gruene-kachel {
	padding: 7px 12px;
	border-radius: 6px;
	background: #005e52;
	height: 40px;
}

.anbieter.gruene-kachel img { height: 26px; }

/* In der Karte auf der Startseite kleiner, dort traegt sie nur die Herkunft. */
.karte .anbieter { height: 26px; margin-bottom: 0.9rem; }
.karte .anbieter.gruene-kachel { height: 30px; padding: 5px 9px; }
.karte .anbieter.gruene-kachel img { height: 20px; }

/* In der Vergleichstabelle ganz klein, ueber dem Produktnamen. */
.gegenueber .anbieter { height: 20px; margin: 0 0 0.35rem; }
.gegenueber .anbieter.gruene-kachel { height: 24px; padding: 4px 7px; }
.gegenueber .anbieter.gruene-kachel img { height: 16px; }

/* ------------------------------------------------------ Gegenueberstellung */

/*
	Die eigene Spalte tritt hervor.

	Der Vergleichsblock ist auf beiden Produktseiten derselbe Text - er wird aus
	src/_teile/vergleich-tier.html eingesetzt. Welche Spalte die aktuelle Seite meint,
	steht am umgebenden <section data-hier="...">, nicht im Baustein. So bleibt EINE
	Quelle, und trotzdem sieht der Leser sofort, wo er gerade ist.

	Hervorgehoben wird durch Flaeche und Schriftfarbe, nicht durch Farbe allein - wer
	Farben schlecht unterscheidet, erkennt die Spalte am Kontrast.
*/
/* Nur der Produktname, nicht das Logo-Element daneben. Ohne die Klasse traf die
   Regel auch <span class="anbieter"> und machte aus dem inline-flex einen Block. */
.vergleich-block .gegenueber thead th span.produkt {
	display: block;
	font-size: 0.9em;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
}

.vergleich-block[data-hier='tier-op'] .sp-tier-op,
.vergleich-block[data-hier='petcare'] .sp-petcare {
	background: var(--akzent-flaeche);
	color: var(--text);
	font-weight: 550;
}

/*
	DER SPALTENKOPF BLEIBT HELL.

	Vorher bekam die eigene Spalte einen dunkelblauen Kopf mit weisser Schrift. Das
	sah gut aus, bis die Anbieterlogos dazukamen: Helvetia liefert seine Bildmarke nur
	als Positiv-Fassung fuer helle Gruende - auf Dunkelblau war sie nicht mehr zu
	lesen, und die schwarze Wortmarke verschwand fast ganz.

	Die Hervorhebung liegt jetzt in einem Balken oben und der Schriftfarbe statt in
	der Flaeche. Das traegt genauso weit, funktioniert mit beiden Logos und bleibt
	auch fuer jemanden erkennbar, der Farben schlecht unterscheidet - der Zusatz
	"(diese Seite)" steht ohnehin daneben.
*/
.vergleich-block[data-hier='tier-op'] thead th.sp-tier-op,
.vergleich-block[data-hier='petcare'] thead th.sp-petcare {
	background: var(--akzent-flaeche);
	color: var(--akzent);
	box-shadow: inset 0 3px 0 0 var(--akzent);
}

/*
	Der Verweis zur anderen Seite sitzt im Spaltenkopf.

	Wer vergleicht, hat den Blick in der Spalte - und merkt genau dort, dass die andere
	Deckung besser passt. Der Weg dorthin gehoert deshalb an diese Stelle und nicht nur
	unter die Tabelle. Er erbt dieselbe Ausblendungsregel: in der eigenen Spalte waere
	er ein Verweis auf die Seite, auf der man schon steht.

	Kleiner und in normaler Schriftstaerke, damit er den Produktnamen nicht ueberlaeuft.
*/
.sp-link {
	display: inline-block;
	margin-top: 0.45rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--akzent);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.sp-link:hover { color: var(--akzent-hell); }

/*
	Der Verweis auf die eigene Seite faellt weg.

	Beide Verweise stehen im Baustein - welcher unpassend ist, weiss nur die Seite.
	Ausblenden statt zwei Fassungen zu pflegen: die Quelle bleibt eine.
	`display: none` statt Unsichtbarmachen, damit ihn auch Vorlesegeraete und die
	Tastaturbedienung nicht anlaufen.
*/
.vergleich-block[data-hier='tier-op'] .w-tier-op,
.vergleich-block[data-hier='petcare'] .w-petcare {
	display: none;
}

.wechsel { margin-top: 1.6rem; }

/* Der Hinweis, welche Spalte die eigene ist - fuer Vorlesegeraete, die keine
   Hintergrundfarbe kennen. */
.vergleich-block[data-hier='tier-op'] thead th.sp-tier-op::after,
.vergleich-block[data-hier='petcare'] thead th.sp-petcare::after {
	content: ' (diese Seite)';
	font-size: 0.72em;
	font-weight: 400;
	opacity: 0.85;
}

/* ------------------------------------------------- Begriff und Erklaerung */

/*
	Beschreibungsliste fuer die Maklerinformation.

	Zwei Spalten auf breiten Schirmen, damit der Begriff als Anker stehen bleibt und
	man die gesuchte Zeile findet, ohne fuenf Absaetze zu lesen. Auf schmalen Geraeten
	untereinander - nebeneinander bliebe fuer die Erklaerung zu wenig Platz.

	Die Trennlinien zwischen den Paaren machen aus dem Block eine Tabelle fuers Auge,
	ohne eine zu sein: das hier sind Begriffe mit Erklaerung, keine Messwerte.
*/
.angaben {
	margin: 1.6rem 0 0;
	display: grid;
	grid-template-columns: minmax(7rem, 10rem) 1fr;
	gap: 0;
}

.angaben dt {
	grid-column: 1;
	padding: 0.9rem 1rem 0.9rem 0;
	border-top: 1px solid var(--linie);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--akzent);
}

.angaben dd {
	grid-column: 2;
	margin: 0;
	padding: 0.9rem 0;
	border-top: 1px solid var(--linie);
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--text-leise);
	max-width: 58ch;
}

.angaben dd strong { color: var(--text); font-weight: 650; }

@media (max-width: 620px) {
	.angaben { grid-template-columns: 1fr; }
	.angaben dt { padding-bottom: 0.15rem; }
	.angaben dd { grid-column: 1; border-top: 0; padding-top: 0; }
}

/* ------------------------------------------------------- Aufklappbereich */

/*
	<details> statt eines Skripts: die vollstaendige Tabelle ist zum Nachpruefen da,
	nicht zum Entscheiden. Zugeklappt stoert sie nicht, aufgeklappt ist sie
	vollstaendig - und sie funktioniert auch, wenn kein JavaScript laeuft.
*/
.aufklapp {
	margin-top: 1.8rem;
	border: 1px solid var(--linie);
	border-radius: 10px;
	background: var(--flaeche);
}

.aufklapp > summary {
	padding: 0.9rem 1.2rem;
	cursor: pointer;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--akzent);
	list-style: none;
}

.aufklapp > summary::-webkit-details-marker { display: none; }

.aufklapp > summary::before {
	content: '+';
	display: inline-block;
	width: 1.1rem;
	font-weight: 700;
}

.aufklapp[open] > summary::before { content: '\2212'; }

.aufklapp > summary:hover { color: var(--akzent-hell); }

.aufklapp .tabellenrahmen { border: 0; border-top: 1px solid var(--linie); border-radius: 0; }

.aufklapp .fussnote { padding: 0 1.2rem 1.1rem; }

/*
	Die Vergleichstabelle laeuft auf schmalen Geraeten aus dem Bild. Sie bekommt
	deshalb einen eigenen Rollbereich - der Seitenkoerper selbst darf nie waagrecht
	rollen, das macht jede Seite unbenutzbar.
*/
.tabellenrahmen {
	overflow-x: auto;
	border: 1px solid var(--linie);
	border-radius: 10px;
	background: var(--flaeche);

	/*
		EIN SCHATTEN AN DER KANTE, SOLANGE DA NOCH ETWAS IST.

		Auf dem Telefon ist die Tabelle breiter als das Bild - die zweite
		Produktspalte steht rechts ausserhalb. Rollen kann man, aber nichts sagt es:
		die Tabelle sieht dann aus, als haette sie nur eine Spalte, und ein
		Produktvergleich mit einem Produkt ist keiner.

		Der Trick kommt ohne Skript aus: zwei Verlaeufe rollen mit dem Inhalt mit
		(`local`) und decken den Schatten ab, zwei stehen fest (`scroll`). Ist am Rand
		nichts mehr, schiebt sich die Abdeckung darueber und der Schatten verschwindet
		von selbst.
	*/
	background-image:
		linear-gradient(to right, var(--flaeche) 30%, transparent),
		linear-gradient(to left, var(--flaeche) 30%, transparent),
		linear-gradient(to right, rgba(11, 32, 54, 0.16), transparent),
		linear-gradient(to left, rgba(11, 32, 54, 0.16), transparent);
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.vergleich {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	min-width: 34rem;
}

.vergleich th,
.vergleich td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--linie);
	vertical-align: top;
}

.vergleich thead th {
	background: var(--flaeche-warm);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--akzent);
	white-space: nowrap;
}

.vergleich tbody th {
	font-weight: 550;
	color: var(--text);
}

.vergleich td { color: var(--text-leise); }

/* Fehlende Leistung sichtbar machen, aber nicht durch Farbe ALLEIN - der Text
   sagt es ohnehin, die Faerbung ist nur Verstaerkung. */
.vergleich td.nein { color: var(--text-leise); font-style: italic; }

.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td { border-bottom: 0; }

.fussnote {
	margin: 1rem 0 0;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--text-leise);
	max-width: 68ch;
}

.dokumente {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
	border-radius: 10px;
	overflow: hidden;
}

.dokumente li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.9rem 1.2rem;
	background: var(--flaeche);
	font-size: 0.93rem;
}

.dokumente span { font-size: 0.78rem; color: var(--text-leise); }

/* ------------------------------------------------------- Sparten, Schritte */

/*
	SPARTEN ALS EINZELN GERAHMTE FELDER.

	Zwei Anlaeufe waren daneben, aus zwei verschiedenen Gruenden:

	Zuerst lagen die Eintraege als Zellen in EINEM gerahmten Raster. Bei sieben
	Eintraegen in vier Spalten blieb eine Zelle leer - und im gemeinsamen Rahmen sah
	das aus wie ein fehlendes Kaestchen.

	Dann eine reine Liste mit Trennlinien. Das Loch war weg, aber der Abschnitt wirkte
	karg, und Name und Einordnung in einer Zeile liefen ineinander.

	Jetzt traegt jedes Feld seinen EIGENEN Rahmen, mit echtem Abstand dazwischen. Eine
	kurze letzte Reihe ist dann kein Loch, sondern einfach das Ende der Reihe - so wie
	bei jeder Kartenliste. Und die Zahl der Sparten darf sich aendern, ohne dass die
	Gestaltung nachgezogen werden muss.
*/
.sparten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
	gap: 0.8rem;
}

.sparten li {
	padding: 1rem 1.1rem;
	border: 1px solid var(--linie);
	border-radius: 9px;
	background: var(--flaeche);
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--text-leise);
}

/* Name auf eigener Zeile: in einer Zeile mit der Einordnung liefen beide ineinander,
   und bei schmalen Feldern brach es an unguenstiger Stelle um. */
.sparten b {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.95rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--text);
}

/*
	DIE VIER MAKLERPFLICHTEN ALS ABLAUF, NICHT ALS LISTE.

	Der Abschnitt beschreibt eine Reihenfolge - Aufnahme, Suche, Pruefung, Begleitung.
	Als Aufzaehlung stand das nur untereinander; die Verbindung war Behauptung, nicht
	sichtbar. Jetzt tragen nummerierte Marken eine durchgehende Linie: auf breiten
	Schirmen waagrecht, auf schmalen als Schiene links.

	Die Linie zeichnet jeder Punkt selbst nach rechts beziehungsweise nach unten, der
	letzte nicht. So bleibt sie exakt zwischen den Marken stehen und haengt nicht ueber
	den Rand hinaus - anders als eine durchgehende Linie hinter dem ganzen Block.

	Die Nummern kommen aus einem Zaehler, nicht aus dem Markup: beim Umsortieren
	stimmen sie dadurch von selbst.

	Reines CSS, kein Bild, kein Skript.
*/
.schritte {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: schritt;
	display: grid;
	gap: 1.7rem;
}

.schritte li {
	counter-increment: schritt;
	position: relative;
	padding-left: 3.4rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--text-leise);
	max-width: 62ch;
}

/* Die Marke. */
.schritte li::before {
	content: counter(schritt, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--linie-stark);
	background: var(--flaeche);
	color: var(--akzent);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* Die Schiene zum naechsten Punkt. */
.schritte li::after {
	content: '';
	position: absolute;
	left: 1.2rem;
	top: 2.5rem;
	bottom: -1.7rem;
	width: 1px;
	background: var(--linie);
}

.schritte li:last-child::after { display: none; }

.schritte b {
	display: block;
	margin-bottom: 0.15rem;
	font-weight: 650;
	color: var(--text);
}

/*
	Ab hier passen vier Spalten nebeneinander, und der Ablauf laeuft waagrecht.
	Darunter bleibt er senkrecht - vier Spalten auf einem Telefon waeren vier
	Wortsaeulen.
*/
@media (min-width: 900px) {
	.schritte {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.6rem;
	}

	.schritte li {
		padding-left: 0;
		padding-top: 3.3rem;
		max-width: none;
	}

	.schritte li::before { top: 0; }

	.schritte li::after {
		left: 2.6rem;
		right: -1.6rem;
		top: 1.2rem;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

/*
	DER ABLAUF BAUT SICH BEIM SCROLLEN AUF.

	Der Abschnitt beschreibt eine Reihenfolge - dann soll er sie auch zeigen: die
	Marken tauchen nacheinander auf, und die Linie dazwischen zieht sich jeweils zum
	naechsten Punkt. Wer scrollt, sieht die Kette entstehen statt fertig dazustehen.

	WARUM NICHT SCROLLGESTEUERT (`animation-timeline: view()`).

	Erst stand hier genau das: ein Zeitstrahl am <ol>, die vier Punkte mit
	verschobenen `animation-range`. Auf dem Papier die sauberere Loesung - kein
	Skript, laeuft beim Zurueckscrollen rueckwaerts. In der Praxis war sie nicht
	nachweisbar: `entry` dauert nur so viele Pixel, wie das Element hoch ist, bei
	einem flachen Ablauf also ein Wimpernschlag; `cover` spannt Fensterhoehe plus
	Elementhoehe, und die Staffelung war durch, bevor der Abschnitt lesbar war. Beide
	Fassungen sahen aus, als gaebe es keine Animation.

	Jetzt loest ein IntersectionObserver einmal aus, und die Staffelung laeuft ueber
	`animation-delay` in fester Zeit ab. Das ist vorhersagbar, in jedem Browser seit
	2019 dasselbe und - anders als der Zeitstrahl - ueberpruefbar.

	OHNE SKRIPT IST NICHTS UNSICHTBAR.

	Versteckt wird nur unter `[data-auftritt]`, und dieses Merkmal setzt das Skript
	selbst auf das <html>-Element, noch im <head>, vor dem ersten Bild. Laeuft kein
	Skript, faellt kein Merkmal an, und die Kette steht schlicht fertig da. Es gibt
	keinen Zustand, in dem Text auf `opacity: 0` haengenbleibt, weil ein Einblender
	ausgefallen ist. Bei `prefers-reduced-motion: reduce` setzt das Skript das
	Merkmal erst gar nicht.
*/
@media (prefers-reduced-motion: no-preference) {
	[data-auftritt] .schritte li { opacity: 0; }

	[data-auftritt] .schritte li::after {
		transform: scale(1, 0);
		transform-origin: top center;
	}

	/* Die Reihenfolge steckt im Zaehler, nicht in vier Regeln mit Sekunden drin. */
	.schritte li:nth-child(1) { --n: 0; }
	.schritte li:nth-child(2) { --n: 1; }
	.schritte li:nth-child(3) { --n: 2; }
	.schritte li:nth-child(4) { --n: 3; }

	[data-auftritt] .schritte.da li {
		animation: auftauchen 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
		animation-delay: calc(var(--n) * 0.14s);
	}

	/* Die Linie zieht erst los, wenn ihre Marke steht. */
	[data-auftritt] .schritte.da li::after {
		animation: ziehen-senkrecht 0.4s ease-out both;
		animation-delay: calc(var(--n) * 0.14s + 0.28s);
	}

	/* Waagrecht: von der Marke nach rechts zum naechsten Punkt. */
	@media (min-width: 900px) {
		[data-auftritt] .schritte li::after {
			transform: scale(0, 1);
			transform-origin: left center;
		}

		[data-auftritt] .schritte.da li::after { animation-name: ziehen-waagrecht; }
	}
}

/* Gedruckt wird der fertige Zustand, nie ein halb aufgebauter. */
@media print {
	.schritte li { opacity: 1 !important; animation: none !important; }
	.schritte li::after { transform: none !important; animation: none !important; }
}

@keyframes auftauchen {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/*
	Zwei Namen statt eines.

	Erst standen hier zwei @keyframes mit demselben Namen, eines davon in einer
	Medienabfrage. Das funktioniert zwar meistens, haengt aber von der Reihenfolge im
	Stylesheet ab - und wer die Datei spaeter umsortiert, verschiebt still das
	Verhalten. Mit zwei Namen ist eindeutig, welches gilt.
*/
@keyframes ziehen-senkrecht {
	from { transform: scale(1, 0); }
	to { transform: scale(1, 1); }
}

@keyframes ziehen-waagrecht {
	from { transform: scale(0, 1); }
	to { transform: scale(1, 1); }
}

/* ------------------------------------------------------------------ Ablauf */

.ablauf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 1.8rem;
	counter-reset: schritt;
}

.schritt { counter-increment: schritt; }

.schritt::before {
	content: counter(schritt, decimal-leading-zero);
	display: block;
	margin-bottom: 0.7rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--akzent);
}

.schritt h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 650;
}

.schritt p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--text-leise);
}

/* ------------------------------------------------------------------ Kontakt */

.kontakt {
	background: var(--flaeche-warm);
	border-radius: 10px;
	padding: clamp(1.8rem, 4vw, 3rem);
}

.kontakt-daten {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: 0.95rem;
}

.kontakt-daten strong {
	display: inline-block;
	min-width: 6.5rem;
	font-weight: 600;
}

a { color: var(--akzent); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Fusszeile */

.fuss {
	border-top: 1px solid var(--linie);
	padding-block: 2.2rem 3rem;
	font-size: 0.86rem;
	color: var(--text-leise);
}

.fuss .bahn {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.fuss nav { display: flex; gap: 1.2rem; }

.fuss a { color: var(--text-leise); }

.fuss a:hover { color: var(--text); }

/* ------------------------------------------------------------------ Schmal */

@media (max-width: 700px) {
	.bahn { width: calc(100% - 2rem); }

	/*
		DIE NAVIGATION VERSCHWAND FRUEHER GANZ.

		`display: none` unter 640px hiess: auf dem Telefon gab es keinen Weg zu den
		Abschnitten - und Telefon ist bei einer Maklerseite die Mehrheit. Statt sie zu
		verstecken, wandert sie unter die Marke und darf waagrecht rollen, wenn die
		vier Punkte nicht nebeneinander passen. Kein Klappmenue, kein Skript.
	*/
	.kopf .bahn {
		height: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 0.7rem 0;
	}

	.navigation {
		gap: 1.1rem;
		margin-top: 0.6rem;
		overflow-x: auto;
		/* Verhindert, dass die Punkte umbrechen und die Leiste zweizeilig wird. */
		white-space: nowrap;
		scrollbar-width: none;
		font-size: 0.86rem;
	}

	.navigation::-webkit-scrollbar { display: none; }

	/*
		Vier Menuepunkte passen auf 390 Pixel nicht nebeneinander; "Kontakt" wurde
		mitten im Wort abgeschnitten und sah nach einem Fehler aus. Die weiche Kante
		sagt stattdessen: hier geht es weiter. Sie verschwindet am Ende der Leiste,
		weil die Maske mitrollt.
	*/
	.navigation {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
		padding-right: 2.2rem;
	}

	.aufschlag { padding-top: 2.4rem; }

	/* Knoepfe auf voller Breite: mit dem Daumen trifft man eine ganze Zeile
	   zuverlaessiger als zwei nebeneinanderstehende Kaestchen. */
	.knopfreihe { flex-direction: column; align-items: stretch; }
	.knopf { justify-content: center; }

	/* Der Aufschlag darf auf dem Telefon nicht die halbe erste Bildschirmseite
	   fuer Weissraum verbrauchen. */
	section { padding-block: 2.2rem; }

	.kontakt-daten strong { min-width: 0; display: block; }
}

/* ------------------------------------------------------------------ Dunkel */

/* ------------------------------------------------------ Berührungsgeräte */

/*
	GROESSERE ZIELE FUER DEN FINGER.

	Nachgemessen: der Kartenknopf kam auf 36px, die Navigationspunkte auf 30px, der
	Verweis in der Vergleichstabelle auf 17px. Empfohlen sind mindestens 44px - darunter
	trifft man mit dem Daumen daneben, und zwar besonders bei Verweisen, die eng
	nebeneinander stehen.

	`pointer: coarse` statt einer Breitenabfrage: entscheidend ist das Eingabegeraet,
	nicht die Fenstergroesse. Ein schmales Browserfenster am Rechner braucht keine
	groesseren Ziele, ein breites Tablet sehr wohl.

	Vergroessert wird ueber Polsterung, nicht ueber Schriftgroesse - das Schriftbild
	bleibt, nur die Trefferflaeche waechst.
*/
@media (pointer: coarse) {
	.navigation a { padding-block: 0.8rem; }

	.karte-knopf { padding: 0.85rem 1.2rem; }

	.sp-link {
		padding: 0.9rem 0;
		margin-top: 0.15rem;
	}

	.dokumente li { padding-block: 1.05rem; }

	/* Zwei Verweise direkt untereinander brauchen Abstand, sonst trifft der Daumen
	   den falschen. */
	.fuss nav { gap: 1.6rem; }
}

/*
	UMGEKEHRT ZUR SYSTEMEINSTELLUNG - UND ZWAR ABSICHTLICH.

	Die Bedingung lautet `light`, der Block darunter setzt aber die DUNKLE
	Fassung. Das ist kein Vertipper und bitte nicht "reparieren".

	Gewuenscht ist: tagsueber dunkel, nachts hell. Der Browser verraet einer
	Seite die Uhrzeit nicht, er verraet nur die Farbeinstellung des Geraets -
	und die steht tagsueber ueblicherweise auf Hell, nachts auf Dunkel. Diese
	Einstellung ist damit der einzige Anhaltspunkt fuer Tag und Nacht, den es
	ohne Skript gibt. Also wird sie gespiegelt.

	Der Vorteil, es an der Bedingung zu drehen statt an den Farbwerten: die
	Sonderregeln weiter unten - marineblaue Schrift auf Orange, weisse Kachel
	hinter Fremdlogos - gehoeren zur dunklen Fassung und wandern automatisch
	mit. Wer stattdessen die Farbwerte tauschen wuerde, muesste an jede dieser
	Regeln einzeln denken.

	Wer Geraet auf Hell stehen hat, sieht die dunkle Seite. Wer auf Dunkel
	steht, die helle. Ohne Einstellung meldet jeder Browser `light`, dieser
	Fall bekommt also ebenfalls die dunkle Fassung.
*/
@media (prefers-color-scheme: light) {
	:root {
		color-scheme: dark;
		--grund: #0e1b2b;
		--flaeche: #14243a;
		--flaeche-warm: #182b44;
		--text: #f2f4f6;
		--text-leise: #a9bdd4;
		--linie: #24384f;
		--linie-stark: #365070;
		--akzent: #8fb4d9;
		--akzent-hell: #b3cfea;
		--akzent-flaeche: #16283f;
	}
	/*
		Auf dunklem Grund traegt das Orange marineblaue Schrift wie im Hellen.

		Beide Orange-Knoepfe, nicht nur einer: --akzent kippt im Dunkelmodus auf ein
		helles Blau, und helles Blau auf Orange liegt bei rund 1,6:1. Der Knopf in der
		Produktkarte hatte genau das - er sah aus, als waere die Beschriftung
		ausgegraut.
	*/
	.knopf-voll,
	.karte-knopf { color: #0e1b2b; }

	/*
		HELVETIA BRAUCHT IM DUNKELN EINE KACHEL.

		Die Bildmarke kommt als Positiv-Fassung fuer helle Gruende: die Wortmarke ist
		schwarz. Auf dem dunklen Grund verschwand sie fast vollstaendig, uebrig blieb
		das rote Dreieck - ein Anbieterlogo, das man nicht lesen kann, ist keine
		Herkunftsangabe mehr.

		Also derselbe Weg wie bei der HanseMerkur, nur umgekehrt: die Marke bekommt
		ihren hellen Grund mit. Verlangt ist das ohnehin - fremde Marken duerfen nicht
		umgefaerbt werden, und ein Farbfilter waere genau das.
	*/
	.anbieter:not(.gruene-kachel) {
		box-sizing: content-box;
		padding: 4px 8px;
		border-radius: 6px;
		background: #fff;
	}

	.gegenueber .anbieter:not(.gruene-kachel) { padding: 3px 6px; }
}

/* ------------------------------------------------------------- Rechtstexte */

/*
	Impressum und Datenschutz sind Nachschlagetexte, keine Verkaufsseiten. Sie
	bekommen deshalb kein eigenes Aussehen, sondern die schmalste Fassung des
	bestehenden: eine Spalte, klare Zwischentitel, und fuer die Pflichtangaben
	dieselbe Begriffsliste (.angaben), die auf den Produktseiten die Eckdaten traegt.

	Eine Zeilenlaenge von 68 Zeichen statt der sonst 58: hier wird gelesen, um etwas
	nachzuschlagen, nicht ueberflogen.
*/
.rechtstext {
	padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.rechtstext h1 {
	margin: 0 0 0.7rem;
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.03em;
	font-weight: 700;
}

.rechtstext h2 {
	margin: 2.8rem 0 0.7rem;
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	letter-spacing: -0.015em;
	font-weight: 700;
	padding-top: 1.6rem;
	border-top: 1px solid var(--linie);
}

.rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }

.rechtstext h3 {
	margin: 1.8rem 0 0.5rem;
	font-size: 1rem;
	font-weight: 650;
}

.rechtstext p {
	margin: 0 0 0.9rem;
	max-width: 68ch;
	font-size: 0.97rem;
	line-height: 1.7;
	color: var(--text-leise);
}

.rechtstext p strong { color: var(--text); font-weight: 650; }

.rechtstext .angaben { margin-top: 1.2rem; }

.rechtstext ul {
	margin: 0 0 1rem;
	padding-left: 1.15rem;
	max-width: 68ch;
	font-size: 0.97rem;
	line-height: 1.7;
	color: var(--text-leise);
}

.rechtstext li + li { margin-top: 0.3rem; }

.rechtstext a {
	color: var(--akzent);
	text-underline-offset: 0.18em;
}

.rechtstext a:hover { color: var(--akzent-hell); }

/* Der Stand des Textes. Steht ueber allem, weil er die erste Frage beantwortet. */
.stand {
	margin: 0 0 2.2rem;
	font-size: 0.83rem;
	color: var(--text-leise);
}

/*
	Lange Zeichenketten ohne Leerzeichen - Firmenbuchnummern, GISA-Zahlen,
	Adressen von Behoerden - sprengen sonst auf einem Telefon die Spalte.
*/
.rechtstext .angaben dd { overflow-wrap: anywhere; }

/* ------------------------------------- Gegenueberstellung auf dem Telefon */

/*
	DIE TABELLE WIRD ZU KARTEN.

	Als Tabelle ist sie 34rem breit und passt auf kein Telefon. Sie rollte deshalb
	waagrecht - technisch richtig, praktisch schlecht: sichtbar war genau eine
	Produktspalte, und auf der PetCare-Seite war das ausgerechnet die des anderen
	Produkts. Ein Vergleich, bei dem man das eigene Produkt suchen muss, ist keiner.

	Jetzt wird jede Zeile zu einer Karte: oben das Merkmal, darunter beide Werte
	untereinander, jeder mit dem Produktnamen davor. Nichts ist mehr versteckt, und
	die Reihenfolge dreht sich je nach Seite - das eigene Produkt steht zuerst.

	Die Tabelle bleibt im Markup eine Tabelle. Vorlesegeraete bekommen dadurch
	weiterhin die Zuordnung Zeile/Spalte, obwohl das Aussehen ein anderes ist.
*/
@media (max-width: 640px) {
	.vergleich-block .tabellenrahmen {
		overflow-x: visible;
		background-image: none;
	}

	.gegenueber { min-width: 0; }

	.gegenueber,
	.gegenueber thead,
	.gegenueber tbody,
	.gegenueber tr,
	.gegenueber th,
	.gegenueber td {
		display: block;
	}

	/* Der Kopf traegt nur noch die beiden Verweise - die Zuordnung der Werte steht
	   ab jetzt in der Karte selbst. */
	.gegenueber thead tr {
		display: flex;
		gap: 0.9rem;
		border-bottom: 1px solid var(--linie);
	}

	.gegenueber thead th:first-child { display: none; }

	.gegenueber thead th {
		flex: 1 1 0;
		white-space: normal;
		border-bottom: 0;
	}

	.gegenueber tbody tr {
		display: grid;
		gap: 0.3rem;
		padding: 0.9rem 1rem;
		border-bottom: 1px solid var(--linie);
	}

	.gegenueber tbody tr:last-child { border-bottom: 0; }

	.gegenueber tbody th,
	.gegenueber tbody td {
		padding: 0;
		border: 0;
	}

	.gegenueber tbody th {
		order: 0;
		font-size: 0.74rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--akzent);
	}

	/*
		Die Flaechenhervorhebung der eigenen Spalte faellt hier weg: nebeneinander
		trug sie die Zuordnung, untereinander wuerde sie nur einen halben Streifen
		einfaerben. Der Produktname vor dem Wert sagt es jetzt ausdruecklich.
	*/
	.vergleich-block[data-hier='tier-op'] tbody td.sp-tier-op,
	.vergleich-block[data-hier='petcare'] tbody td.sp-petcare {
		background: none;
	}

	.gegenueber tbody td::before {
		font-weight: 650;
		color: var(--text);
	}

	.gegenueber tbody td.sp-tier-op::before { content: 'Tier-OP: '; }
	.gegenueber tbody td.sp-petcare::before { content: 'PetCare: '; }

	/* Das eigene Produkt zuerst. */
	.vergleich-block[data-hier='tier-op'] tbody td.sp-tier-op,
	.vergleich-block[data-hier='petcare'] tbody td.sp-petcare { order: 1; }

	.vergleich-block[data-hier='tier-op'] tbody td.sp-petcare,
	.vergleich-block[data-hier='petcare'] tbody td.sp-tier-op { order: 2; }
}