/* ROS REAL – Baustein kopf-fuss (Design v46): Kopf, Handy-Menü, Fuß.
   Nur Tokens aus main.css, keine Hex-Werte. Landing = body.landing (Kopf/Fuß über der Karte). */

/* ===== Kopf ===== */
/* Logo und Bedienung behalten beim Öffnen des mobilen Menüs ihre Position. */
.mkopf,
.mmenue {
	--kopf-abstand-oben: 12px;
	--kopf-abstand-seite: clamp(18px, 4vw, 64px);
}

.mkopf {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: var(--kopf-abstand-oben) var(--kopf-abstand-seite);
	background: color-mix(in srgb, var(--papier) 95%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in srgb, var(--tinte) 12%, transparent);
	font-family: var(--sans);
	font-size: var(--t3);
}

.mkopf a {
	color: inherit;
	text-decoration: none;
}

.mlogo {
	display: flex;
	align-items: center;
	white-space: nowrap;
	min-width: 44px;
	min-height: 44px;
}

.rr-logo {
	display: block;
	line-height: 0;
}

.rr-logo img {
	display: block;
	width: 188px;
	height: auto;
}

.rr-logo__voll {
	display: none !important;
}

/* Im Seitenkopf trägt die kompakte Wortmarke die Marke. Die Vollfassung mit
   Unterzeile bleibt für Unterlagen erhalten und wird hier nicht kleingerechnet. */
.rr-logo__wortmarke {
	display: block !important;
}

.mnav ul {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mnav a {
	color: var(--grau);
}

.mnav a:hover,
.mnav a[aria-current="page"] {
	color: var(--tinte);
}

.mspr {
	display: flex;
	gap: 6px;
	align-items: baseline;
	white-space: nowrap;
	font-size: var(--t3);
	color: var(--grau);
}

.mspr b {
	font-weight: 400;
	color: var(--tinte);
}

.mspr [aria-disabled="true"] {
	color: var(--grau);
}

.mburger,
.mmenue .schliessen {
	font: 400 var(--t3)/var(--zh-text) var(--sans);
	background: none;
	border: 0;
	padding: 8px 0;
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	text-align: right;
	white-space: nowrap;
}

.mburger {
	display: none;
	color: var(--tinte);
}

/* ===== Handy-Menü ===== */
.mmenue {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: var(--kopf-abstand-oben) var(--kopf-abstand-seite) 18px;
	background: var(--papier);
	font-family: var(--sans);
	overflow-y: auto;
}

.mmenue[hidden] {
	display: none;
}

.mmenue .zeile {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 44px;
}

.mmenue .rr-logo img {
	width: 188px;
}

.mmenue nav ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmenue nav a {
	font-family: var(--serif);
	font-size: var(--g4);
	line-height: 1.6;
	color: var(--tinte);
	text-decoration: none;
	padding: 8px 0;
}

.mmenue .schliessen {
	color: var(--grau);
}

.mmenue__sprache {
	border-top: 1px solid var(--linie);
	padding-top: 18px;
}

.mmenue__sprache .mspr {
	min-height: 44px;
	align-items: center;
	gap: 16px;
	font-size: var(--t2);
}

.mmenue .rest {
	margin-top: auto;
	display: grid;
	gap: 6px;
	font-size: var(--t3);
	color: var(--grau);
}

.mmenue .rest a {
	position: relative;
	color: var(--grau);
}
/* Audit 23.09.: Telefon/E-Mail im Handy-Menü 44 px Trefferfläche (Zeilenabstand 6 px bleibt). */
.mmenue .rest a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

/* ===== Fuß (alle Seiten außer Landing) ===== */
body:not(.landing) .mfuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 28px;
	flex-wrap: wrap;
	padding: 22px clamp(20px, 4.4vw, 63px) calc(22px + env(safe-area-inset-bottom));
	background: var(--blau);
	font: 400 var(--t3)/1.4 var(--sans);
	color: color-mix(in srgb, var(--papier) 62%, transparent);
}

.mfuss .c b {
	font-weight: 400;
}

.mfuss .c .kurz {
	display: none;
}

.mfuss .r ul {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mfuss .r button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

body:not(.landing) .mfuss .r a,
body:not(.landing) .mfuss .r button {
	color: color-mix(in srgb, var(--papier) 88%, transparent);
	text-decoration: none;
}

body:not(.landing) .mfuss .r a:hover,
body:not(.landing) .mfuss .r button:hover {
	color: var(--papier);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

/* ===== Fuß (Landing) ===== */
body.landing .mfuss {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 28px;
	min-height: calc(44px + env(safe-area-inset-bottom));
	padding: 0 clamp(20px, 4.4vw, 63px) env(safe-area-inset-bottom);
	background: linear-gradient(to top, color-mix(in srgb, var(--kartengrund) 90%, transparent), transparent);
	font: 400 var(--t4)/1.4 var(--sans);
	color: color-mix(in srgb, var(--papier) 62%, transparent);
}

body.landing .mfuss .c {
	white-space: nowrap;
	min-width: 0;
}

body.landing .mfuss .r {
	flex: none;
}

body.landing .mfuss .r ul {
	gap: 24px;
}

body.landing .mfuss .r a,
body.landing .mfuss .r button {
	color: color-mix(in srgb, var(--papier) 88%, transparent);
	text-decoration: none;
}

body.landing .mfuss .r a:hover,
body.landing .mfuss .r button:hover {
	color: var(--papier);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

body.landing .mfuss .mhinweis {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-size: 11px;
	color: color-mix(in srgb, var(--papier) 50%, transparent);
	white-space: nowrap;
}

/* ===== Kopf (Landing): über der Karte, Verlauf aus dem Kartengrund ===== */
body.landing .mkopf {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--kartengrund) 90%, transparent), transparent);
	border-bottom: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding-bottom: 26px;
}

body.landing .mkopf .mnav a:hover,
body.landing .mkopf .mnav a[aria-current="page"],
body.landing .mkopf .mspr,
body.landing .mkopf .mspr b,
body.landing .mkopf .mspr [aria-disabled="true"],
body.landing .mkopf .mburger {
	color: var(--papier);
}

body.landing .mkopf .mnav a {
	color: color-mix(in srgb, var(--papier) 78%, transparent);
}

/* ===== Trefferflächen (B.14) ===== */
.mlogo,
.mnav a,
.mburger,
.mmenue nav a,
.mfuss .r a,
.mfuss .r button {
	position: relative;
}

.mlogo::after,
.mnav a::after,
.mburger::after,
.mmenue nav a::after,
.mfuss .r a::after,
.mfuss .r button::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(44px, calc(100% + 16px));
	height: 44px;
	transform: translate(-50%, -50%);
}

/* ===== Responsiv ===== */
@media (max-width: 1020px) {
	.rr-logo img,
	.mmenue .rr-logo img {
		width: 180px;
	}

	.mnav {
		display: none;
	}

	.mkopf .mspr {
		display: none;
	}

	.mburger {
		display: block;
	}
}

@media (max-width: 640px) {
	.rr-logo img,
	.mmenue .rr-logo img {
		width: 144px;
	}
}

@media (max-width: 420px) {
	.mkopf {
		gap: 14px;
	}
}

@media (min-width: 768px) {
	.mnav a::after {
		display: none;
	}
}

@media (max-width: 767px) {
	body:not(.landing) .mfuss {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 10px;
	}

	/* Kurzform nur auf der Landing (Bauanleitung: übrige Seiten zeigen bei 393 px den vollen Namen). */
	body.landing .mfuss .c .lang {
		display: none;
	}

	body.landing .mfuss .c .kurz {
		display: inline;
	}

	body.landing .mfuss {
		gap: 14px;
	}

	body.landing .mfuss .r ul {
		gap: 18px;
	}

	body.landing .mfuss .mhinweis {
		top: auto;
		bottom: 100%;
		transform: translateX(-50%);
		line-height: 16px;
	}
}

@media (max-width: 359px) {
	body:not(.landing) .mfuss .r ul {
		gap: 28px 20px;
	}
}

/* TC 22.09.: Kartennachweis auf der Landing über der Fußzeile, damit er die Links nicht überdeckt (Wortlaut bleibt). */
body.landing .mfuss .mhinweis {
	top: auto;
	bottom: 100%;
	transform: translateX(-50%);
	max-width: calc(100vw - 40px);
	white-space: normal;
	text-align: center;
}
/* Nur eingeloggt: WordPress-Werkzeugleiste nicht über den festen Landing-Kopf legen. */
body.admin-bar.landing .mkopf { top: 32px; }
@media (max-width: 782px) { body.admin-bar.landing .mkopf { top: 46px; } }

/* ===== Korrektur K1 (Messrunde 1, Auftrag BS – von Claude umgesetzt, 22.09.) ===== */
/* Nr 3, 9: jede Fußverknüpfung als eigene 44-px-Fläche, ohne den Text zu verschieben. */
.mfuss .r a,
.mfuss .r button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.mfuss .r ul { row-gap: 0; }

/* Nr 7: Handy-Menü – jede Zeile volle Breite, 62 hoch. */
.mmenue nav a {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 62px;
	padding: 0;
}

/* Nr 8, 10: Landing-Fuß am Handy – © in Zeile 1, Links darunter (umbrechend), Kartennachweis als eigene Zeile im Fuß. */
@media (max-width: 767px) {
	body.landing .mfuss {
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0 18px;
		padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom));
	}
	body.landing .mfuss .c {
		flex: 1 1 100%;
		line-height: 28px;
	}
	body.landing .mfuss .r {
		flex: 1 1 100%;
		min-width: 0;
	}
	body.landing .mfuss .r ul {
		flex-wrap: wrap;
		gap: 0 18px;
	}
	body.landing .mfuss .mhinweis {
		position: static;
		order: 3;
		flex: 1 1 100%;
		transform: none;
		max-width: none;
		margin: 2px 0 0;
		text-align: left;
		white-space: normal;
	}
}

/* ===== K2 – Messrunde 2 (Claude, 22.09.) ===== */
/* Nr 56: Menülinks auf Touch-Tablets und Handy quer (Desktop-Navigation sichtbar)
   brauchen 44 px Trefferfläche – die unsichtbare Fläche aus B.14 gilt dort wieder. */
@media (pointer: coarse) and (min-width: 768px) {
	.mnav a::after { display: block; }
}
/* Nr 57: geringe Höhe (Handy quer) – Kopf klappt ein wie im Prototyp (8 px oben/unten). */
@media (max-height: 500px) {
	.mkopf,
	.mmenue {
		--kopf-abstand-oben: 8px;
		--kopf-abstand-seite: clamp(14px, 3vw, 28px);
	}
	body.landing .mkopf { padding-bottom: 26px; }
}
/* Nr 125: Handy-Menü – Zeilen wie Prototyp (8 px oben/unten, Zeilenhöhe 1,6);
   eingeloggt schiebt es sich unter die WordPress-Werkzeugleiste statt darunter zu verschwinden. */
.mmenue nav a {
	min-height: 0;
	padding: 8px 0;
}
body.admin-bar .mmenue { top: var(--wp-admin--admin-bar--height, 32px); }

/* Nr 60/61 (K2): Landing-Fuß. Kartennachweis immer als Zeile über dem Fuß (11 px, am Handy 10 px),
   eine Zeile breit, mittig. Am Handy ist der Fuß eine Zeile, 44 hoch: © links, Links rechts
   daneben – reichen sie nicht, lassen sie sich waagrecht wischen (alle Rechtslinks bleiben da). */
body.landing .mfuss .mhinweis {
	position: absolute;
	left: 50%;
	top: auto;
	bottom: 100%;
	order: 0;
	flex: none;
	width: max-content;
	max-width: calc(100vw - 2 * var(--rand));
	margin: 0;
	transform: translateX(-50%);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	white-space: normal;
}
@media (max-width: 767px) {
	body.landing .mfuss {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 14px;
		min-height: calc(44px + env(safe-area-inset-bottom));
		padding: 0 var(--rand) env(safe-area-inset-bottom);
	}
	body.landing .mfuss .c {
		flex: none;
		line-height: 1.4;
	}
	body.landing .mfuss .r {
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	body.landing .mfuss .r::-webkit-scrollbar { display: none; }
	body.landing .mfuss .r ul {
		flex-wrap: nowrap;
		gap: 0 18px;
		white-space: nowrap;
	}
	body.landing .mfuss .mhinweis { font-size: 10px; }
}

/* Nr 85/93 (K2): Kartenansicht – fester Kartenfuß 44 hoch (Prototyp), eine Zeile;
   Links rechts, bei Platzmangel waagrecht wischbar. */
body.ansicht-karte .mfuss {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px 28px;
	min-height: calc(44px + env(safe-area-inset-bottom));
	padding: 0 clamp(14px, 2vw, 28px) env(safe-area-inset-bottom);
	font-size: var(--t4);
}
body.ansicht-karte .mfuss .c {
	flex: none;
	white-space: nowrap;
}
body.ansicht-karte .mfuss .r {
	flex: 0 1 auto;
	margin-left: auto;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
body.ansicht-karte .mfuss .r::-webkit-scrollbar { display: none; }
body.ansicht-karte .mfuss .r ul {
	flex-wrap: nowrap;
	gap: 0 24px;
	white-space: nowrap;
}
@media (max-width: 767px) {
	body.ansicht-karte .mfuss .c .lang { display: none; }
	body.ansicht-karte .mfuss .c .kurz { display: inline; }
	body.ansicht-karte .mfuss .r ul { gap: 0 18px; }
}

/* Nr 55 (K2): eine Unterstreichung für alle (Prototyp v19 2) – 1 px, 5 px unter der Schrift,
   bei Hover und beim aktiven Menüpunkt, im Kopf, im Handy-Menü und im Fuß. */
.mnav a[aria-current="page"],
.mnav a:hover,
.mspr a:hover,
.mmenue nav a[aria-current="page"],
.mmenue nav a:hover,
.mmenue .rest a:hover {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}
@media (min-width: 768px) {
	/* Die 44-px-Flächen der Links ragen 8 px über den letzten Link – kein Wischen nötig. */
	body.ansicht-karte .mfuss .r { overflow: visible; }
}

/* R1 Nr 2 (K2): Fuß der Unterseiten wieder so niedrig wie im Prototyp (≥ 768: 62 hoch).
   Die Links sind 18 hoch; die 44-px-Trefferfläche liefert die unsichtbare Fläche aus B.14
   (::after). Umbrechende Linkreihen stehen 46 px auseinander (18 + 28), damit sich die
   Flächen nicht überdecken. Landing und Kartenansicht haben ihren eigenen Fuß. */
body:not(.landing):not(.ansicht-karte) .mfuss .r a,
body:not(.landing):not(.ansicht-karte) .mfuss .r button {
	display: inline-block;
	min-height: 0;
	line-height: 18px;
}
body:not(.landing):not(.ansicht-karte) .mfuss .r ul {
	row-gap: 28px;
	column-gap: 28px;
}

/* Kleine Tür als dezentes Wiedererkennungszeichen neben der Copyright-Zeile. */
.mfuss .c {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.mfuss__tuer {
	display: block;
	width: auto;
	height: 18px;
}
/* R1 Nr 4 (K2): Landing-Fuß ab 768 in 13 px wie die Unterseiten. */
@media (min-width: 768px) {
	body.landing .mfuss { font-size: 13px; }
}

/* ===== K3 (Thomas 22.09.): Kartennachweis IM Landing-Fuß, Fuß bleibt eine Zeile (44) ===== */
/* In der Zeile steht nur „© OpenStreetMap i“ gleich neben dem ©; ein Klick öffnet den vollen
   Nachweis als kleines Feld über dem Fuß (landing.js). */
body.landing .mfuss .c { order: 0; }
body.landing .mfuss .fnachweis { order: 1; position: relative; flex: none; margin-right: auto; }
body.landing .mfuss .r { order: 2; }
.fnachweis__knopf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	font: 400 11px/1 var(--sans);
	color: color-mix(in srgb, var(--papier) 62%, transparent); /* Audit 23.09.: 45 % gab 4,0:1 */
	cursor: pointer;
}
.fnachweis__knopf i {
	display: inline-grid;
	place-items: center;
	width: 13px;
	height: 13px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font: italic 400 10px/1 var(--serif);
}
.fnachweis__knopf:hover,
.fnachweis__knopf[aria-expanded="true"] { color: var(--papier); }
body.landing .mfuss .fnachweis .mhinweis {
	position: absolute;
	left: 0;
	right: auto;
	top: auto;
	bottom: calc(100% - 4px);
	width: max-content;
	max-width: min(420px, calc(100vw - 2 * var(--rand)));
	margin: 0;
	padding: 10px 14px;
	transform: none;
	background: var(--kartengrund);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--papier) 14%, transparent);
	font-size: 11px;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	color: color-mix(in srgb, var(--papier) 80%, transparent);
}
body.landing .mfuss .fnachweis .mhinweis[hidden] { display: none; }
@media (max-width: 767px) {
	.fnachweis__knopf { font-size: 11px; } /* Nachweis-Ausnahme: 11 px, nicht kleiner */
	/* Handy: Feld hängt am ganzen Fuß (Rand links/rechts), nicht am Knopf – sonst ragt es hinaus. */
	body.landing .mfuss .fnachweis { position: static; margin-right: 0; }
	body.landing .mfuss .fnachweis .mhinweis {
		left: var(--rand);
		right: var(--rand);
		bottom: calc(100% - 4px);
		width: auto;
		max-width: none;
	}
}

/* ===== Sprachumschalter DE · EN (inc/sprache.php, 22.09.) ===== */
/* Aktive Sprache in Tinte (Landing: Papier), die andere als Link in Grau mit 44-px-Trefferfläche. */
.mspr a {
	position: relative;
	color: var(--grau);
	text-decoration: none;
}
.mspr a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.mspr a:hover { color: var(--tinte); }
body.landing .mkopf .mspr a { color: color-mix(in srgb, var(--papier) 60%, transparent); }
body.landing .mkopf .mspr a:hover { color: var(--papier); }

/* Vergleich Prototyp 23.09.: Der Prototyp hat vier Fußlinks in einer Zeile, wir haben sechs
   (Rücktritt, Maklerinformationen, Cookie-Einstellungen). Am Handy zwei Reihen mit engerem
   Reihenabstand statt drei lockerer Reihen; die 44-px-Flächen bleiben. */
@media (max-width: 767px) {
	body:not(.landing) .mfuss .r ul { gap: 12px 24px; }
}

/* ===== Audit 23.09. (Claude): Landing-Fuß 768–1199 px ===== */
/* Voller Firmenname + „© OpenStreetMap“ + sechs Rechtslinks brauchen ~1100 px. Darunter lagen
   Name, Nachweis und Links übereinander bzw. ragten rechts hinaus. Jetzt wie am Handy:
   Kurzname, Links rechtsbündig und – wenn es nicht reicht – waagrecht wischbar. */
@media (min-width: 768px) and (max-width: 1199px) {
	body.landing .mfuss .c .lang { display: none; }
	body.landing .mfuss .c .kurz { display: inline; }
	body.landing .mfuss .c { flex: none; }
	body.landing .mfuss .fnachweis { margin-right: 0; }
	body.landing .mfuss .r {
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	body.landing .mfuss .r::-webkit-scrollbar { display: none; }
	body.landing .mfuss .r ul {
		flex-wrap: nowrap;
		width: max-content;
		margin-left: auto;
		white-space: nowrap;
	}
}

/* ===== Rechtliche Links: mobiles Fußmenü =====
   Ohne JavaScript bleibt die vorhandene Linkliste sichtbar. Mit JavaScript wird sie auf
   kleinen Ansichten als einzelnes, nach oben öffnendes Papierpanel bedient. */
.mfuss .r .mfuss__informationen {
	display: none;
}

@media (max-width: 1020px) {
	body .mfuss.mfuss--informationen-bereit {
		flex-wrap: nowrap;
		flex-direction: row;
		align-items: center;
	}
	body:not(.landing):not(.ansicht-karte) .mfuss.mfuss--informationen-bereit {
		position: relative;
	}
	.mfuss.mfuss--informationen-bereit .c {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
	}
	.mfuss.mfuss--informationen-bereit .c .lang {
		display: none;
	}
	.mfuss.mfuss--informationen-bereit .c .kurz {
		display: inline;
	}
	.mfuss.mfuss--informationen-bereit .r {
		position: static;
		flex: none;
		min-width: 0;
		margin-left: auto;
		overflow: visible;
	}
	body:not(.landing):not(.ansicht-karte) .mfuss.mfuss--informationen-bereit .r [data-fuss-informationen-auf],
	.mfuss.mfuss--informationen-bereit .mfuss__informationen {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 10px;
		min-width: 44px;
		min-height: 44px;
		padding: 0 4px;
		border: 0;
		background: none;
		font: 400 var(--t3)/1.4 var(--sans);
		color: color-mix(in srgb, var(--papier) 88%, transparent);
		cursor: pointer;
		white-space: nowrap;
	}
	.mfuss.mfuss--informationen-bereit .mfuss__informationen::after {
		content: "";
		position: static;
		left: auto;
		top: auto;
		display: block;
		width: 8px;
		height: 8px;
		margin: 0;
		box-sizing: border-box;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: rotate(225deg) translate(-3px, -3px);
		transition: transform .2s ease;
	}
	.mfuss.mfuss--informationen-bereit .mfuss__informationen[aria-expanded="true"]::after {
		transform: rotate(45deg) translateY(-3px);
	}
	.mfuss.mfuss--informationen-bereit .mfuss__informationen:hover,
	.mfuss.mfuss--informationen-bereit .mfuss__informationen[aria-expanded="true"] {
		color: var(--papier);
	}
	.mfuss.mfuss--informationen-bereit .mfuss__informationen:focus-visible,
	.mfuss.mfuss--informationen-bereit .r > ul a:focus-visible,
	.mfuss.mfuss--informationen-bereit .r > ul button:focus-visible {
		outline: 1px solid currentColor;
		outline-offset: 3px;
	}
	body .mfuss.mfuss--informationen-bereit .r > ul {
		position: absolute;
		right: var(--rand);
		bottom: calc(100% + 8px);
		z-index: 65;
		display: none;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		width: min(300px, calc(100vw - 2 * var(--rand)));
		max-height: 60vh;
		max-height: min(60dvh, 360px);
		margin: 0;
		padding: 8px 14px;
		overflow-y: auto;
		background: var(--papier);
		border: 1px solid var(--linie);
		color: var(--tinte);
		white-space: normal;
	}
	body:not(.landing):not(.ansicht-karte) .mfuss.mfuss--informationen-bereit .r > ul {
		gap: 0;
	}
	body.landing .mfuss.mfuss--informationen-bereit .r > ul,
	body.ansicht-karte .mfuss.mfuss--informationen-bereit .r > ul {
		box-shadow: 0 10px 36px color-mix(in srgb, var(--blau) 36%, transparent);
	}
	.mfuss.mfuss--informationen-bereit .r.ist-offen > ul {
		display: grid;
	}
	.mfuss.mfuss--informationen-bereit .r > ul li {
		min-width: 0;
		margin: 0;
		border-top: 1px solid var(--linie);
	}
	.mfuss.mfuss--informationen-bereit .r > ul li:first-child {
		border-top: 0;
	}
	body:not(.landing):not(.ansicht-karte) .mfuss.mfuss--informationen-bereit .r > ul a,
	body:not(.landing):not(.ansicht-karte) .mfuss.mfuss--informationen-bereit .r > ul button,
	.mfuss.mfuss--informationen-bereit .r > ul a,
	.mfuss.mfuss--informationen-bereit .r > ul button {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding: 0;
		background: none;
		border: 0;
		font: 400 var(--t3)/1.4 var(--sans);
		color: var(--tinte);
		text-align: left;
		text-decoration: none;
	}
	.mfuss.mfuss--informationen-bereit .r > ul a:hover,
	.mfuss.mfuss--informationen-bereit .r > ul button:hover {
		color: var(--grau);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: var(--unterstrich-abstand);
	}
	body.landing .mfuss.mfuss--informationen-bereit {
		flex-wrap: nowrap;
		gap: 8px;
		min-height: calc(44px + env(safe-area-inset-bottom));
		padding: 0 var(--rand) env(safe-area-inset-bottom);
	}
	body.landing .mfuss.mfuss--informationen-bereit .c {
		flex: none;
	}
	body.landing .mfuss.mfuss--informationen-bereit .r {
		order: 2;
		flex: none;
		margin-left: 0;
	}
	body.landing .mfuss.mfuss--informationen-bereit .fnachweis {
		position: static;
		order: 1;
		flex: none;
		margin: 0 auto;
		white-space: nowrap;
	}
	body.landing .mfuss.mfuss--informationen-bereit .fnachweis .mhinweis {
		left: var(--rand);
		right: var(--rand);
		width: auto;
		max-width: none;
	}
	body.landing .mfuss.mfuss--informationen-bereit .r > ul {
		background: var(--kartengrund);
		border-color: color-mix(in srgb, var(--papier) 14%, transparent);
		color: var(--papier);
	}
	body.landing .mfuss.mfuss--informationen-bereit .r > ul li {
		border-color: color-mix(in srgb, var(--papier) 14%, transparent);
	}
	body.landing .mfuss.mfuss--informationen-bereit .r > ul a,
	body.landing .mfuss.mfuss--informationen-bereit .r > ul button {
		color: color-mix(in srgb, var(--papier) 88%, transparent);
	}
	body.landing .mfuss.mfuss--informationen-bereit .r > ul a:hover,
	body.landing .mfuss.mfuss--informationen-bereit .r > ul button:hover {
		color: var(--papier);
	}
}

/* Kompakte Landing-Zeile: lesbare Schrift, volle Klickflächen, kein Umbruch.
   Auf den schmalsten Handys vertritt die Tür die ausgeschriebene Wortmarke. */
@media (max-width: 420px) {
	body.landing .mfuss.mfuss--informationen-bereit {
		gap: 4px;
		padding-left: 14px;
		padding-right: 14px;
	}
	body.landing .mfuss.mfuss--informationen-bereit .c { gap: 4px; }
	body.landing .mfuss.mfuss--informationen-bereit .mfuss__informationen {
		gap: 4px;
		padding: 0 2px;
		font-size: var(--t4);
	}
	body.landing .mfuss.mfuss--informationen-bereit .fnachweis__knopf {
		gap: 4px;
		white-space: nowrap;
	}
}
@media (max-width: 359px) {
	body.landing .mfuss.mfuss--informationen-bereit .c .kurz { display: none; }
}