/* Matma — Bausteine.
   Verwendet ausschliesslich Rollen aus colors_and_type.css.
   Kein Palettenwert, kein Hex, kein Seitenstreifen an Karten oder Zeilen. */

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

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

body {
	margin: 0;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.6;
	font-weight: 400;
}

img, svg, video { max-width: 100%; display: block; }

/* Jedes Bild trägt ein festes Seitenverhältnis. Der schwerste gemessene Befund der
   heutigen Seite ist ein Layoutsprung (CLS 1.74 Desktop, 63 % der Aufrufe schlecht),
   Ursache laut Google: Bilder ohne feste Masse. Das ist eine Eigenschaft der
   Bausteine, keine Optimierung danach. */
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	line-height: var(--display-leading);
	color: var(--text-heading);
	margin: 0 0 var(--space-m);
	text-wrap: balance;
}

h1 { font-size: var(--step-5); }
/* Nur wo eine Seite ohne Nebenspalte auftritt, darf der Titel die grösste Stufe nehmen. */
.titel-gross { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-s); }
p:last-child { margin-bottom: 0; }

.measure        { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

.lead {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--text-muted);
}

/* Eyebrow: Rolle, keine Zierde. Grotesk, halbfett, gesperrt — nie Versalien über
   jedem Block, sondern nur dort, wo eine Sektion benannt werden muss. */
.eyebrow {
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent-ink);
	margin: 0 0 var(--space-2xs);
}

.claim {
	font-family: var(--font-display);
	font-size: var(--step-1);
	color: var(--text-heading);
}
.claim b { color: var(--accent-ink); font-weight: inherit; }

/* ---------- Fläche und Raster ---------- */

.wrap {
	max-width: var(--page);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.band { padding-block: var(--rhythm); background: var(--surface); }

/* Erste Sektion nach der Kopfzeile: oben ruhiger, damit der Einstieg ins Bild passt. */
.band--einstieg { padding-block: var(--space-xl) var(--rhythm); }
.band--muted { background: var(--surface-muted); }
.band--card  { background: var(--surface-card); }

/* Vollflächiges Blau — das Gegenstück der Imagebroschüre. Der Themenbereich setzt
   `color` selbst, sonst erben Kinder die helle Tinte und stehen dunkel auf dunkel. */
.band--deep {
	background: var(--surface-deep);
	color: var(--text-on-deep);
}
.band--deep h1, .band--deep h2, .band--deep h3, .band--deep h4 { color: var(--heading-on-deep); }
.band--deep .lead     { color: var(--text-on-deep); opacity: 0.86; }
.band--deep .eyebrow  { color: var(--accent-on-deep); }
.band--deep a         { color: var(--text-on-deep); }

.split {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 60rem) {
	.split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
	.split--wide-right { grid-template-columns: 5fr 7fr; }
	.split--wide-left  { grid-template-columns: 7fr 5fr; }
}

.cols {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

/* ---------- Bild ---------- */

.bild {
	display: block;
	width: 100%;
	object-fit: cover;
	background: var(--surface-muted);
	border-radius: var(--radius);
}
.bild--breit  { aspect-ratio: 16 / 9; }
.bild--quer   { aspect-ratio: 3 / 2; }
.bild--hoch   { aspect-ratio: 3 / 4; }
.bild--hero   { aspect-ratio: 3 / 2; }
@media (min-width: 60rem) { .bild--hero { aspect-ratio: 3 / 4; } }
.bild--feld   { aspect-ratio: 1 / 1; }

/* Hartkantiges Bildraster, wie in der Imagebroschüre: randlos aneinander, keine
   Rundung, keine Schatten. */
.mosaik {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}
.mosaik > * { min-width: 0; }
.mosaik__luecke { background: var(--surface-card); }

/* ---------- Knopf ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.72em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}

.btn--primaer {
	background: var(--surface-deep);
	color: var(--text-on-deep);
}
.btn--primaer:hover { background: var(--surface-deep-strong); color: var(--text-on-deep); }

.btn--zweit {
	background: transparent;
	color: var(--text-heading);
	border-color: var(--line-strong);
}
.btn--zweit:hover { border-color: var(--surface-deep); }

/* Auf blauer Fläche: Gold füllt nicht, Gold rahmt. Gold als Fläche mit Text darauf
   fällt in jeder Kombination durch (Weiss 2.17:1, Blau 4.49:1). */
.btn--invers {
	background: transparent;
	color: var(--text-on-deep);
	border-color: var(--accent-on-deep);
}
.btn--invers:hover { background: var(--accent-on-deep); color: var(--surface-deep); }

/* ---------- Bubble — der Störer aus dem CD-Handbuch, S. 5 ---------- */

.bubble {
	display: grid;
	place-content: center;
	text-align: center;
	aspect-ratio: 1;
	width: 8.5rem;
	padding: 1rem;
	border-radius: var(--radius-bubble);
	background: var(--surface-deep);
	color: var(--text-on-deep);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--step--1);
	line-height: 1.25;
	text-decoration: none;
	transform: rotate(-8deg);
}
.bubble b { display: block; color: var(--accent-on-deep); font-weight: 700; }

/* Auf Farbflächen mit weisser Outline. Breite: ein 32stel des Durchmessers. */
.bubble--outline {
	box-shadow: 0 0 0 calc(8.5rem * var(--bubble-outline)) var(--surface-card);
}

.bubble--gross { width: 11rem; font-size: var(--step-0); }
.bubble--gross.bubble--outline {
	box-shadow: 0 0 0 calc(11rem * var(--bubble-outline)) var(--surface-card);
}

/* Schwebender Kontakt-Knopf. Bleibt Bubble, wird nicht zum Standardknopf. */
.bubble--schwebend {
	position: fixed;
	right: var(--gutter);
	bottom: var(--gutter);
	width: 6.5rem;
	transform: none;
	box-shadow: var(--shadow-float);
	z-index: 40;
}

/* ---------- Marke und Status ---------- */

.marke {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.85em;
	border-radius: var(--radius-pill);
	background: var(--surface-muted);
	color: var(--text);
	font-size: var(--step--1);
	font-weight: 700;
	line-height: 1.4;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.28em 0.8em;
	border-radius: var(--radius-pill);
	font-size: var(--step--1);
	font-weight: 700;
	line-height: 1.4;
	background: var(--surface-card);
	border: 1px solid var(--line);
}
.status::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
}
.status--frei       { color: var(--p-frei); }
.status--reserviert { color: var(--p-reserviert); }
.status--vergeben   { color: var(--p-vergeben); }

/* ---------- Objektkarte ---------- */

.objekt {
	display: flex;
	flex-direction: column;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.16s;
}
.objekt:hover { border-color: var(--surface-deep); }

.objekt__medien { position: relative; }
.objekt__status { position: absolute; left: var(--space-s); top: var(--space-s); }
.objekt__koerper { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.objekt__ort   { font-size: var(--step--1); font-weight: 700; color: var(--accent-ink); }
.objekt__titel { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); color: var(--text-heading); line-height: 1.2; margin: 0; }
.objekt__preis { font-weight: 700; margin-top: auto; padding-top: var(--space-s); }

/* Eckdaten — Fläche, Zimmer, Baujahr. Definitionsliste, nicht Tabelle. */
.eckdaten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
	margin: 0;
	font-size: var(--step--1);
	color: var(--text-muted);
}
.eckdaten div { display: flex; gap: 0.4em; }
.eckdaten dt { font-weight: 400; }
.eckdaten dd { margin: 0; font-weight: 700; color: var(--text); }

/* Eckdatenleiste der Objektseite: breiter, ruhiger, ohne Kartenrand. */
.fakten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-m);
	padding: var(--space-l) 0;
	border-block: 1px solid var(--line);
	margin: 0;
}
.fakten div { display: flex; flex-direction: column; gap: 0.15em; }
.fakten dt { font-size: var(--step--1); color: var(--text-muted); }
.fakten dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--display-weight); color: var(--text-heading); line-height: 1.1; }

/* ---------- Wohnungsspiegel ---------- */

.spiegel { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.spiegel caption { text-align: left; color: var(--text-muted); font-size: var(--step--1); padding-bottom: var(--space-s); }
.spiegel th, .spiegel td { text-align: left; padding: var(--space-xs) var(--space-s); border-bottom: 1px solid var(--line); }
.spiegel thead th {
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--text-muted);
	border-bottom-color: var(--line-strong);
	position: sticky;
	top: 0;
	background: var(--surface-card); /* muss deckend sein — Rollenflächen können getönt sein */
}
.spiegel tbody tr:hover { background: var(--surface-muted); }
.spiegel td:last-child, .spiegel th:last-child { text-align: right; }
.spiegel__wohnung { font-weight: 700; color: var(--text-heading); }
.spiegel__huelle { overflow-x: auto; background: var(--surface-card); border: 1px solid var(--line); }

/* ---------- Ansprechperson ---------- */

.person {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-m);
	align-items: center;
	padding: var(--space-l);
	background: var(--surface-card);
	border: 1px solid var(--line);
}
.person__bild { width: 5.5rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-bubble); }
.person__rolle { font-size: var(--step--1); color: var(--text-muted); }
.person__name  { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-heading); margin: 0; }

/* ---------- Vertrauensleiste ---------- */

.trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-l) var(--space-xl);
}
.trust img { height: 3rem; width: auto; opacity: 0.85; }
.band--deep .trust img { opacity: 0.9; }

/* Farbige Auszeichnungen sind Bildmarken, keine Wortmarken — sie vertragen kein
   Umfärben. Auf blauer Fläche bekommen sie eine helle Unterlage; die SVIT-Logos
   liegen als Negativfassung vor und stehen direkt auf dem Blau. */
.trust__chip {
	display: inline-flex;
	align-items: center;
	background: var(--surface-card);
	padding: 0.75rem 1.1rem;
}

/* ---------- Formular ---------- */

.formular { display: grid; gap: var(--space-m); }
.feld { display: grid; gap: var(--space-3xs); }
.feld > span { font-size: var(--step--1); font-weight: 700; }
.feld input, .feld textarea, .feld select {
	font: inherit;
	font-size: var(--step-0);
	padding: 0.7em 0.9em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface-card);
	color: var(--text);
	width: 100%;
}
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
	outline: 2px solid var(--surface-deep);
	outline-offset: 1px;
}
.feld--paar { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .feld--paar { grid-template-columns: 1fr 1fr; } }

/* ---------- Kopf- und Fusszeile ---------- */

.topnav {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--surface-card);
	border-bottom: 1px solid var(--line);
}
.topnav__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	min-height: 4.5rem;
}
.topnav__marke img { height: 1.9rem; width: auto; }
.topnav__menue { display: flex; align-items: center; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
.topnav__menue a {
	text-decoration: none;
	font-weight: 700;
	font-size: var(--step-0);
	padding: 0.35em 0;
	color: var(--text);
	border-bottom: 2px solid transparent;
}
.topnav__menue a:hover { border-bottom-color: var(--accent); }
.topnav__menue a.is-aktiv { color: var(--text-heading); border-bottom-color: var(--surface-deep); }
@media (max-width: 55rem) { .topnav__menue { display: none; } }

/* Fusszeile in Sand, nicht in Blau: die tiefe Fläche bleibt der Kopfzeile und
   einzelnen Akzenten. Tinte auf Sand 200 hält 11.9:1, Blau darauf 8.7:1. */
.fuss { background: var(--p-sand-200); color: var(--text); padding-block: var(--space-2xl) var(--space-l); }
.fuss h4 { color: var(--text-heading); font-size: var(--step-0); }
.fuss a { color: var(--text); text-decoration: none; opacity: 1; }
.fuss a:hover { color: var(--text-heading); text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.fuss__unten {
	margin-top: var(--space-xl);
	padding-top: var(--space-m);
	border-top: 1px solid var(--p-sand-300);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	justify-content: space-between;
	font-size: var(--step--1);
	opacity: 0.8;
}

/* ---------- Hinweiszeile — jede Seite weist sich als Lösungsskizze aus ---------- */

.skizze {
	background: var(--surface-deep-strong);
	color: var(--text-on-deep);
	font-size: var(--step--1);
	text-align: center;
	padding: var(--space-2xs) var(--gutter);
}
.skizze b { color: var(--text-on-deep); }

/* ---------- Umschalter für die Vorführung ---------- */

.regler {
	position: fixed;
	left: var(--gutter);
	bottom: var(--gutter);
	z-index: 50;
	display: flex;
	gap: var(--space-2xs);
	padding: var(--space-2xs);
	background: var(--surface-card);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-float);
	font-size: var(--step--1);
}
.regler button {
	font: inherit;
	font-weight: 700;
	border: 0;
	border-radius: var(--radius-pill);
	padding: 0.4em 0.9em;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
}
.regler button[aria-pressed="true"] { background: var(--surface-deep); color: var(--text-on-deep); }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; }
}

/* ---------- Baufortschritt ---------- */

.zeitstrahl {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-m);
	counter-reset: none;
}
@media (min-width: 55rem) {
	.zeitstrahl { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
}

.zeitstrahl__punkt {
	display: grid;
	gap: 0.2em;
	padding-top: var(--space-m);
	border-top: 2px solid var(--line);
	padding-right: var(--space-m);
	position: relative;
	color: var(--text-muted);
}
.zeitstrahl__punkt::before {
	content: "";
	position: absolute;
	top: calc(-0.5rem - 1px);
	left: 0;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--surface);
	border: 2px solid var(--line-strong);
}
.zeitstrahl__punkt b { color: var(--text); font-weight: 700; }
.zeitstrahl__punkt span { font-size: var(--step--1); }

.zeitstrahl__punkt.is-erledigt { border-top-color: var(--surface-deep); }
.zeitstrahl__punkt.is-erledigt::before { background: var(--surface-deep); border-color: var(--surface-deep); }
.zeitstrahl__punkt.is-erledigt b { color: var(--text-heading); }

.zeitstrahl__punkt.is-laufend { border-top-color: var(--accent); }
.zeitstrahl__punkt.is-laufend::before { background: var(--accent); border-color: var(--accent); }
.zeitstrahl__punkt.is-laufend b { color: var(--text-heading); }

details summary::-webkit-details-marker { color: var(--accent-ink); }

/* ---------- Logins — sekundärer Einstieg zu drei Fremdplattformen ----------
   Mieterinfocenter, Stockwerkeigentümer und die Matma ImmoApp laufen alle auf
   app.immodigi.ch, also beim Partner. Sie sind Verweise, keine Integration —
   und die Ziele wechseln, sobald Matma den Partner verlässt. Der Baustein hält
   sie deshalb bewusst als austauschbare Liste, nicht als eingebaute Funktion.

   Rang: sekundär. Der Login konkurriert nie mit «Immobilien finden» oder
   «Bewertung anfordern» — er bedient, wer schon Kunde ist. */

.logins {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.login {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	padding: var(--space-m);
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.16s;
}
.login:hover { border-color: var(--surface-deep); }
.login__name { font-weight: 700; color: var(--text-heading); }
.login__wer  { display: block; font-weight: 400; font-size: var(--step--1); color: var(--text-muted); }

/* Pfeil nach aussen — diese Ziele verlassen die Seite. */
.login::after {
	content: "↗";
	flex: none;
	font-size: var(--step-1);
	line-height: 1;
	color: var(--accent-ink);
}

.band--deep .login {
	background: transparent;
	border-color: var(--line-on-deep);
	color: var(--text-on-deep);
}
.band--deep .login:hover { border-color: var(--accent-on-deep); }
.band--deep .login__name { color: var(--text-on-deep); }
.band--deep .login__wer  { color: var(--text-on-deep); opacity: 0.75; }
.band--deep .login::after { color: var(--accent-on-deep); }

/* In der Kopfzeile: ein Knopf zweiten Rangs, der die drei Ziele aufklappt. */
.topnav__logins { position: relative; }
.topnav__logins > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1.1em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: var(--step-0);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}
.topnav__logins > summary::-webkit-details-marker { display: none; }
.topnav__logins > summary::after { content: "▾"; font-size: 0.8em; }
.topnav__logins[open] > summary { border-color: var(--surface-deep); }
.topnav__logins__blatt {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 35;
	min-width: 19rem;
	display: grid;
	gap: var(--space-2xs);
	padding: var(--space-s);
	background: var(--surface-card);
	border: 1px solid var(--line-strong);
	box-shadow: var(--shadow-float);
}

/* ---------- Navigation mit Unterebene ---------- */

.topnav__menue > li { position: relative; }

.topnav__unter {
	position: absolute;
	left: 0;
	top: calc(100% + 0.5rem);
	z-index: 35;
	min-width: 15rem;
	display: none;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: var(--space-2xs) 0;
	list-style: none;
	background: var(--surface-card);
	border: 1px solid var(--line-strong);
	box-shadow: var(--shadow-float);
}
.topnav__menue > li:hover > .topnav__unter,
.topnav__menue > li:focus-within > .topnav__unter { display: grid; }

.topnav__unter a {
	display: block;
	padding: var(--space-2xs) var(--space-s);
	border-bottom: 0;
	font-weight: 400;
	white-space: nowrap;
}
.topnav__unter a:hover { background: var(--surface-muted); border-bottom: 0; }

/* ---------- Vertrauensleiste: Fassung nach Untergrund ----------
   Die SVIT-Logos liegen einfarbig vor. Auf heller Fläche die dunkle Fassung,
   auf blauer Fläche die weisse. Ein Negativlogo auf Sand ist unsichtbar —
   die Datei ist da, das Logo nicht. Deshalb zwei Dateien, nicht ein Filter. */

.trust__hell { display: none; }
.band--deep .trust__hell,
.trust--auf-tief .trust__hell { display: block; }
.band--deep .trust__dunkel,
.trust--auf-tief .trust__dunkel { display: none; }

/* ---------- Zone: Fassungswechsel innerhalb einer Seite ----------
   [data-fassung] wirkt auf jedem Element, nicht nur auf dem Wurzelelement — die
   Rollen kaskadieren in den Teilbaum. Was nicht mitkommt, ist die Fläche: body
   hat seinen Hintergrund schon gesetzt. Die Zone setzt ihn deshalb selbst.

   Zweck: eine Seite kann geerdet bleiben und trotzdem dort Luft holen, wo es um
   Menschen geht. Sand trägt die Eigentümerstrecke, Papier die Suchstrecke. */

.zone {
	background: var(--surface);
	color: var(--text);
}

/* ---------- Haftende Kopfzeile mit Milchglas ----------
   Das Webkonzept führt «Sticky Navigation» als A-Priorität. Milchglas ist hier
   berechtigt, weil unter der Leiste Bilder durchlaufen — über einer flachen
   Füllung kostet backdrop-filter nur Kontrast und gewinnt nichts.

   Der Kontrast muss ohne die Unschärfe halten: die Fläche ist zu 82 % deckend,
   nicht durchsichtig mit Weichzeichner. Wo backdrop-filter fehlt, bleibt sie
   lesbar. */

.topnav--haftend {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--surface-card) 82%, transparent);
	border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.topnav--haftend {
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		backdrop-filter: blur(14px) saturate(1.4);
	}
}

/* Auf tiefer Fläche kippt die Tönung mit — dunkler tönen, nicht aufhellen. */
.topnav--haftend.topnav--tief {
	background: color-mix(in srgb, var(--surface-deep) 78%, transparent);
	color: var(--text-on-deep);
	border-bottom-color: var(--line-on-deep);
}
.topnav--haftend.topnav--tief .topnav__menue a { color: var(--text-on-deep); }
.topnav--haftend.topnav--tief .topnav__menue a:hover { border-bottom-color: var(--accent-on-deep); }

/* Die Leiste verdichtet sich beim Scrollen. Nur Polsterung und Logo bewegen sich,
   nie die Höhe des Inhalts darunter — sonst entsteht genau der Layoutsprung,
   der auf der heutigen Seite der schwerste Befund ist. */
.topnav--haftend .topnav__innen {
	min-height: 5rem;
	transition: min-height 0.25s ease;
}
.topnav--haftend.is-verdichtet .topnav__innen { min-height: 3.75rem; }
.topnav--haftend .topnav__marke img { transition: height 0.25s ease; height: 2.1rem; }
.topnav--haftend.is-verdichtet .topnav__marke img { height: 1.6rem; }

/* ---------- Verlaufsunschärfe am oberen Rand ----------
   Statt einer harten Kante zwischen Leiste und Inhalt: mehrere Schichten mit
   wachsendem Weichzeichner, jede über eine Maske auf ihr Band begrenzt. Der
   Übergang wird dadurch stufenlos, ohne WebGL und ohne Bild.

   Rein dekorativ: pointer-events aus, aria-hidden im Markup. */

.verlaufsunschaerfe {
	position: fixed;
	inset: 0 0 auto 0;
	height: 7rem;
	z-index: 25;
	pointer-events: none;
}
.verlaufsunschaerfe > i {
	position: absolute;
	inset: 0;
	display: block;
}
.verlaufsunschaerfe > i:nth-child(1) { backdrop-filter: blur(1px);  -webkit-backdrop-filter: blur(1px);  mask-image: linear-gradient(to bottom, #000 0%,   #000 20%,  transparent 40%); }
.verlaufsunschaerfe > i:nth-child(2) { backdrop-filter: blur(2px);  -webkit-backdrop-filter: blur(2px);  mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 50%, transparent 70%); }
.verlaufsunschaerfe > i:nth-child(3) { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);  mask-image: linear-gradient(to bottom, transparent 30%, #000 50%, #000 70%, transparent 90%); }
.verlaufsunschaerfe > i:nth-child(4) { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  mask-image: linear-gradient(to bottom, transparent 50%, #000 70%, #000 90%, transparent 100%); }
.verlaufsunschaerfe > i:nth-child(5) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); mask-image: linear-gradient(to bottom, transparent 70%, #000 90%, transparent 100%); }

/* ---------- Einblenden beim Scrollen ----------
   Nur transform und opacity — beides läuft auf der Grafikkarte und verschiebt
   kein Layout. Der Platz ist vorher reserviert, es gibt also keinen Sprung.

   Der Startzustand steht in einer @media-Abfrage: ohne JavaScript oder bei
   reduzierter Bewegung ist alles von Anfang an sichtbar. Nie Inhalt hinter
   einer Animation verstecken, die nicht läuft. */

@media (prefers-reduced-motion: no-preference) {
	.js-bewegt .enthuellen {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.js-bewegt .enthuellen.is-da {
		opacity: 1;
		transform: none;
	}
	.js-bewegt .enthuellen--spaet { transition-delay: 0.1s; }
	.js-bewegt .enthuellen--spaeter { transition-delay: 0.2s; }
}

/* Bild atmet beim Überfahren — der Rahmen bleibt stehen, nur das Bild wächst. */
.bild-rahmen { overflow: hidden; }
.bild-rahmen > .bild { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.objekt:hover .bild-rahmen > .bild,
.bild-rahmen:hover > .bild { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Beitrag ----------
   Der Blog ist bei Matma kein Blog, sondern das GEO-Werkzeug. Auslöser des ganzen
   Projekts war «SEO/GEO sowie KI-Auslesbarkeit», und Lighthouse misst heute
   Agentic Browsing 0 von 2. Ein Objektinserat kann nicht zitiert werden — es ist
   nach vier Wochen weg. Ein Beitrag kann.

   Jeder Baustein hier beantwortet dieselbe Frage: gibt eine Maschine diesen
   Absatz als Antwort aus? */

.beitrag {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 62rem) {
	.beitrag { grid-template-columns: 16rem minmax(0, 1fr); }
	.beitrag__inhalt { position: sticky; top: 7rem; }
}

.beitrag__kopf { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-l); }
.beitrag__signatur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-s);
	font-size: var(--step--1);
	color: var(--text-muted);
}
.beitrag__signatur img { width: 2.25rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-bubble); }
.beitrag__signatur b { color: var(--text); font-weight: 700; }

/* Die Kurzfassung steht vor allem anderen. Ein KI-System zitiert den ersten
   inhaltlichen Absatz — ist der eine Hinführung, wird nichts zitiert. */
.kurzfassung {
	background: var(--surface-muted);
	padding: var(--space-l);
	margin-bottom: var(--space-l);
}
.kurzfassung > p:first-child {
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--accent-ink);
	margin-bottom: var(--space-2xs);
}
.kurzfassung > p:last-child { font-size: var(--step-1); line-height: 1.5; }

/* Inhaltsverzeichnis: gibt der Maschine die Gliederung und dem Menschen den Ausstieg. */
.beitrag__inhalt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.beitrag__inhalt a { display: block; text-decoration: none; font-size: var(--step--1); color: var(--text-muted); padding: 0.15em 0; }
.beitrag__inhalt a:hover { color: var(--text-heading); }
.beitrag__inhalt a.is-da { color: var(--text-heading); font-weight: 700; }

.beitrag__text > * + * { margin-top: var(--space-m); }
.beitrag__text h2 { font-size: var(--step-2); margin-top: var(--space-xl); }
.beitrag__text p, .beitrag__text li { max-width: var(--measure); }
.beitrag__text blockquote {
	margin: 0;
	padding: var(--space-m) 0;
	border-block: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.3;
	color: var(--text-heading);
}

/* Fragen: der ergiebigste Baustein für maschinelle Auslesbarkeit, weil jede
   Frage samt Antwort für sich zitierbar ist. */
.fragen { display: grid; border-top: 1px solid var(--line); }
.fragen details { border-bottom: 1px solid var(--line); padding-block: var(--space-s); }
.fragen summary {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--space-m);
	color: var(--text-heading);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--accent-ink); font-weight: 400; }
.fragen details[open] summary::after { content: "–"; }
.fragen details > p { margin-top: var(--space-2xs); max-width: var(--measure); }

/* Beitragskarte für die Übersicht und für «Weiterlesen». */
.beitragskarte {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-m);
	background: var(--surface-card);
	border: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.16s;
}
.beitragskarte:hover { border-color: var(--surface-deep); }
.beitragskarte__thema { font-size: var(--step--1); font-weight: 700; color: var(--accent-ink); }
.beitragskarte__titel { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight); color: var(--text-heading); line-height: 1.2; margin: 0; }
.beitragskarte__fuss { margin-top: auto; padding-top: var(--space-s); font-size: var(--step--1); color: var(--text-muted); }

/* ---------- Kontaktblock ----------
   Wo ein Formular steht, steht eine Person daneben. Ein Formular allein ist ein
   Briefkasten — und die Marke verspricht das Gegenteil.

   Die Person steht LINKS und zuerst im Markup: wer nicht schreiben will, sieht
   die Nummer, bevor er ein Feld sieht. */

.kontaktblock {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 58rem) {
	.kontaktblock { grid-template-columns: 20rem minmax(0, 1fr); gap: var(--space-xl); }
}

.kontaktblock__person {
	display: grid;
	gap: var(--space-s);
	padding: var(--space-l);
	background: var(--surface-card);
	border: 1px solid var(--line);
}
.kontaktblock__person img {
	width: 6.5rem;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-bubble);
}
.kontaktblock__name { font-family: var(--font-display); font-size: var(--step-2); color: var(--text-heading); margin: 0; line-height: 1.1; }
.kontaktblock__rolle { font-size: var(--step--1); color: var(--text-muted); margin: 0; }

/* Nummer und Mail sind Handlungen, keine Fussnoten — sie stehen gross und
   antippbar, nicht als graue Zeile unter dem Namen. */
.kontaktblock__wege { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.kontaktblock__wege a {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	font-size: var(--step-1);
	font-weight: 700;
	color: var(--text-heading);
	text-decoration: none;
	padding: 0.2em 0;
}
.kontaktblock__wege a:hover { text-decoration: underline; }
.kontaktblock__wege small { font-size: var(--step--1); font-weight: 400; color: var(--text-muted); }

.band--deep .kontaktblock__person { background: transparent; border-color: var(--line-on-deep); }
.band--deep .kontaktblock__name,
.band--deep .kontaktblock__wege a { color: var(--accent-on-deep); }
.band--deep .kontaktblock__rolle,
.band--deep .kontaktblock__wege small { color: var(--text-on-deep); opacity: 0.8; }

/* ---------- Kartenausschnitt ----------
   Leaflet mit OpenStreetMap-Kacheln. Zwei fremde Hosts sind nötig: unpkg.com für
   Skript und Stil, tile.openstreetmap.org für die Kacheln. Wo die blockiert sind
   — strenge CSP, Vorschauumgebungen — bleibt die Fläche sonst leer.

   Deshalb steht die Adresse IM Container, nicht darunter: fällt die Karte aus,
   bleibt die Auskunft stehen. Leaflet legt sich darüber, wenn es lädt. */

.karte {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--surface-muted);
	border: 1px solid var(--line);
	overflow: hidden;
}
@media (min-width: 58rem) { .karte { aspect-ratio: 21 / 9; } }

.karte__ersatz {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--space-2xs);
	text-align: center;
	padding: var(--space-l);
	color: var(--text-muted);
}
.karte__ersatz b { display: block; color: var(--text-heading); font-size: var(--step-1); }
.karte.is-geladen .karte__ersatz { display: none; }

/* Leaflet-Steuerung an die Marke angleichen — sonst sitzt ein fremdes Design
   mitten auf der Seite. */
.karte .leaflet-container { position: absolute; inset: 0; z-index: 1; font-family: var(--font-body); }
.karte .leaflet-control-zoom a {
	border-radius: 0;
	color: var(--text-heading);
	border-color: var(--line);
}
.karte .leaflet-popup-content-wrapper,
.karte .leaflet-popup-tip { border-radius: 0; background: var(--surface-card); color: var(--text); }

/* Ein gefüllter Knopf auf tiefer Fläche ist unsichtbar — die Füllung hat dieselbe
   Farbe wie der Grund. Statt das im Markup zu erwarten, fängt es die Rolle ab:
   auf .band--deep verhält sich der Hauptknopf wie der inverse. */
.band--deep .btn--primaer {
	background: transparent;
	color: var(--text-on-deep);
	border-color: var(--accent-on-deep);
}
.band--deep .btn--primaer:hover { background: var(--accent-on-deep); color: var(--surface-deep); }
.band--deep .btn--zweit { color: var(--text-on-deep); border-color: var(--line-on-deep); }
.band--deep .btn--zweit:hover { border-color: var(--accent-on-deep); }

/* ---------- Noevu-Nachweis in der Fusszeile ----------
   Jede Kundenseite trägt ihn, unter dem Copyright des Kunden. Zwei Verweise, die
   EINEN Satz bilden — dazwischen ein Leerzeichen, kein Trennzeichen.

   Der Hover sitzt auf dem Elternabsatz, nicht auf den einzelnen Verweisen: sie
   lesen sich als ein Satz, und ein Hover je Verweis würde ihn optisch zerreissen.

   Die Fusszeile steht hier auf tiefer Fläche, deshalb greifen die Rollen für
   tiefen Grund — gedämpftes Weiss als Ruhezustand, Gold beim Überfahren. */

.fuss-nachweis {
	margin-top: var(--space-2xs);
	font-size: var(--step--1);
	cursor: pointer;
}
.fuss-nachweis a {
	color: var(--text-muted);
	opacity: 1;
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}
.fuss-nachweis:hover a { color: var(--accent-ink); opacity: 1; text-decoration: underline; }

/* Auf heller Fusszeile — falls eine Variante sie hell setzt. */
.fuss--hell .fuss-nachweis a { color: var(--text-muted); opacity: 1; }
.fuss--hell .fuss-nachweis:hover a { color: var(--accent-ink); text-decoration: underline; }