/* ROS REAL – Baustein uebersicht (Design v46, Auftrag BL).
   Inhalt: Kopfzeile, Ansichten (Raster, Liste, Karte), leerer Zustand,
   Merkzettel, Suchagent. Nur Tokens aus main.css verwenden, keine Hex-Werte. */

/* ===== Kopfzeile ===== */

/* Vergleich Prototyp 23.09.: Abstände wie magazin.css (.kopfzeile 26–46 / 18–30, Titel 8 unter
   der Versalzeile, Einführung 10 darunter). */
.kopfzeile {
	padding: clamp(26px, 3.4vw, 46px) var(--rand) clamp(18px, 2.4vw, 30px);
}

.kopfzeile .klein {
	margin: 0;
}
.kopfzeile .utitel { margin-top: 8px; }

.utitel {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 1.02;
	color: var(--tinte);
}

.utitel.lang {
	font-size: clamp(27px, 3.4vw, 49px);
}

.einfuehrung {
	margin: 10px 0 0;
	max-width: 56ch;
	font-family: var(--serif);
	font-size: var(--g5);
	line-height: 1.6;
	color: var(--grau);
}

.uebersicht__nachwort {
	margin: 0;
	padding: 0 var(--rand) var(--block);
	max-width: 65ch;
	font: 400 var(--t2)/1.6 var(--sans);
	color: var(--grau);
}
@media (max-width: 767px) {
	.kopfzeile .einfuehrung {
		font: 400 var(--t3)/1.6 var(--sans);
	}
}

/* ===== Werkzeug-Zeile (Filterband + Ansicht-Umschalter) ===== */

.uebersicht__werkzeug {
	position: relative;
}

.uebersicht__sicht {
	position: absolute;
	right: var(--rand);
	display: flex;
	align-items: center;
	min-height: 44px;
}

.sicht {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.sicht a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 400 var(--t3)/1.6 var(--sans);
	color: var(--grau);
	text-decoration: none;
}

.sicht a.an {
	color: var(--tinte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

/* Handy: Ansicht in dieselbe Zeile wie Filter/Zähler; „Liste“ erst ab Desktop. */
@media (max-width: 1023px) {
	.sicht {
		gap: 16px;
	}

	.sicht .sicht__liste {
		display: none;
	}

	.uebersicht__sicht {
		top: 0;
	}
}

/* Desktop: Umschalter auf die Höhe der Auswahlen rücken
   (Etikett 19 px + Abstand 8 px + Rand 20 px = 47 px). */
@media (min-width: 1024px) {
	.uebersicht__sicht {
		top: 47px;
	}
}

/* ===== Raster ===== */

.raster,
.merken__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* TC 22.09.: wie Prototyp 3/2/1 */
	gap: var(--block) var(--el);
	padding: 0 var(--rand) var(--abs);
}

@media (max-width: 1023px) {
	.raster,
	.merken__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.raster,
	.merken__liste {
		grid-template-columns: 1fr;
	}
}

/* Sehr breite Bildschirme: vier Kacheln, Inhalt zentriert begrenzt (Messrunde Nr 5). */
@media (min-width: 2200px) {
	.raster,
	.merken__liste {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: 2096px;
		margin-inline: auto;
	}
}

/* ===== Liste ===== */

.liste {
	padding: 0 0 var(--abs);
}

/* ===== Kartenansicht ===== */

/* Kartenansicht füllt genau den Rest des Fensters (Design v46, E2).
   --kopf-h setzt assets/js/uebersicht.js aus der Kopfhöhe. */
body.ansicht-karte {
	height: 100dvh;
	overflow: hidden;
}

.uebersicht[data-ansicht="karte"] {
	display: flex;
	flex-direction: column;
	height: calc(100dvh - var(--kopf-h, 62px));
	min-height: 0;
	overflow: hidden;
}

.uebersicht[data-ansicht="karte"] .kopfzeile {
	display: none;
}

.klayout {
	display: grid;
	grid-template-columns: 470px minmax(0, 1fr);
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border-top: 1px solid var(--linie);
}

.kliste {
	overflow-y: auto;
	overscroll-behavior: contain;
	border-right: 1px solid var(--linie);
	background: var(--papier);
}

.kfeld {
	position: relative;
	min-height: 0;
	overflow: hidden;
	background: var(--kartengrund);
}

.kfeld #rr-map,
.kfeld .maplibregl-map {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.kgriff {
	display: none;
}

/* Handy: Karte füllt die Fläche, Liste als Blatt von unten mit Griff. */
@media (max-width: 1023px) {
	.klayout {
		display: block;
		position: relative;
	}

	.kfeld {
		position: absolute;
		inset: 0;
	}

	.kliste {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 55;
		height: 100dvh;
		border-right: 0;
		border-top: 1px solid var(--linie);
		overflow-y: auto;
		transform: translateY(calc(100% - 96px));
		transition: transform .3s var(--lang);
	}

	.kliste.auf {
		transform: translateY(0);
	}

	.kliste.zieht {
		transition: none;
	}

	.kgriff {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 12px 16px 14px;
		background: var(--papier);
		cursor: pointer;
		touch-action: none;
	}

	.kgriff i {
		width: 40px;
		height: 4px;
		background: var(--linie);
	}

	.kgriff b {
		font-family: var(--serif);
		font-weight: 400;
		font-size: var(--g5);
		line-height: 1.4;
		color: var(--tinte);
	}

	.kgriff span {
		font: 400 var(--t3)/1.6 var(--sans);
		color: var(--grau);
	}
}

/* ===== Leerer Zustand ===== */

.zustand {
	padding: var(--block) var(--rand) var(--abs);
	max-width: 64ch;
}

.zustand h2 {
	margin: 0 0 12px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--g4);
	line-height: 1.6;
	color: var(--tinte);
}

.zustand .hinw {
	margin: 0 0 20px;
	font: 400 var(--t2)/1.6 var(--sans);
	color: var(--grau);
}

.zustand .wege,
.merken__leer .wege {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
}

.agentweg {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--linie);
}

.agentweg .asatz {
	margin: 0 0 16px;
	font: 400 var(--t2)/1.6 var(--sans);
	color: var(--grau);
}

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

/* ===== Merkzettel ===== */

.merken__werkzeug {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--el);
	padding: 18px var(--rand);
	border-bottom: 1px solid var(--linie);
}

.gemerktzahl {
	font: 400 var(--t3)/1.6 var(--sans);
	color: var(--tinte);
}

.merkkopf {
	padding: clamp(24px, 3vw, 40px) var(--rand) var(--block);
}

.merkkopf h2 {
	margin: 0 0 8px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(28px, 3.1vw, 44px);
	line-height: 1.6;
	color: var(--tinte);
}

.mzahl {
	font: 400 var(--t3)/1.6 var(--sans);
	color: var(--grau);
}

.merken__leer {
	padding: 0 var(--rand) var(--abs);
}

.merken__leer p {
	margin: 0 0 20px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(20px, 1.9vw, 27px);
	line-height: 1.6;
	color: var(--tinte);
}

/* Status bleibt im normalen Dokumentfluss zwischen Kopf und Merkliste. */
.merken__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 var(--rand) var(--el);
	color: var(--grau);
}

.merken__status[hidden] { display: none; }

.merken__meldung {
	margin: 0;
	font: 400 var(--t2)/1.6 var(--sans);
	color: var(--grau);
}

.merken__status--fehler .merken__meldung { color: var(--fehler); }

.merken__wiederholen {
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blau);
	font: 400 var(--t2)/1.2 var(--sans);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
	cursor: pointer;
}

/* Der Speicherhinweis wird vom Skript im Merkzettel eingefügt, nie schwebend. */
.merken .merken-speicherhinweis {
	margin: 0 var(--rand) var(--el);
	max-width: 64ch;
}

/* ===== Seitenblättern ===== */

.seiten {
	padding: 0 var(--rand) var(--abs);
}

.seiten .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0 2px;
	padding: 0 6px;
	font: 400 var(--t3)/1 var(--sans);
	color: var(--grau);
	text-decoration: none;
}

.seiten .page-numbers.current {
	color: var(--tinte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

.seiten a.page-numbers:hover {
	color: var(--tinte);
}

/* ===== Suchagent-Dialog ===== */

.suchagent .objz {
	margin: 0 0 14px;
	font-family: var(--serif);
	font-size: var(--g6);
	line-height: 1.6;
	color: var(--grau);
}

.suchagent .agentsuche {
	margin: 0 0 22px;
	font: 400 var(--t3)/1.5 var(--sans);
	color: var(--tinte);
}

.suchagent .agentsuche b {
	font-weight: 400;
}

/* Link in der Einwilligung (Rechtstext) im Markenblau, wie die übrigen Links. */
.suchagent .haken a {
	color: var(--blau);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

.suchagent__honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.suchagent__status {
	margin: 0 0 14px;
	font: 400 var(--t2)/1.6 var(--sans);
}

.suchagent__status:empty {
	display: none;
}

.suchagent__status--ok {
	color: var(--tinte);
}

.suchagent__status--fehler {
	color: var(--fehler);
}

/* ===== K2 – Messrunde 2 (Claude, 22.09.) ===== */
/* Nr 76: Ansicht-Umschalter sitzt jetzt im Band (filterbar.php); der frühere absolut
   gesetzte Umschalter bleibt nur für den Merkzettel. */
.uebersicht__werkzeug .uebersicht__sicht { display: none; }

/* Raster-Abstände wie Prototyp (Zeile 20–38, Spalte 18–34). */
.raster {
	gap: clamp(20px, 2.4vw, 38px) clamp(18px, 2.2vw, 34px);
}

/* Nr 83: große Bildschirme wie Prototyp – Inhalt 1900 bzw. 2240 breit, zentriert,
   ab 1700 vier Kacheln. Kartenansicht bleibt randlos. */
@media (min-width: 1700px) {
	body:not(.ansicht-karte) .uebersicht {
		max-width: 1900px;
		margin-inline: auto;
	}
	.raster,
	.merken__liste {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(26px, 2vw, 44px);
		max-width: none;
		margin-inline: 0;
	}
	.kachel .nm { font-size: clamp(26px, 1.7vw, 38px); }
	.kachel .sz,
	.kachel .pr,
	.kachel .eck { font-size: 15px; }
	.einfuehrung { font-size: 22px; }
}
@media (min-width: 2200px) {
	body:not(.ansicht-karte) .uebersicht { max-width: 2240px; }
	.raster,
	.merken__liste { gap: 48px; }
	.kachel .nm { font-size: 42px; }
	.kachel .sz,
	.kachel .pr,
	.kachel .eck { font-size: 16px; }
}

/* ===== K2 – Kartenansicht wie Prototyp (Messrunde 2 Nr 85–90, 93) =====
   Fester Kartenfuß 44 hoch am unteren Rand; Ansicht endet darüber.
   Geteilte Ansicht (Liste links, Karte rechts) ab 744 px Breite und 501 px Höhe sowie
   im Querformat (Höhe ≤ 500); nur Handy hoch behält das Blatt von unten. */
.uebersicht[data-ansicht="karte"] {
	height: calc(100dvh - var(--kopf-h, 62px) - 44px - env(safe-area-inset-bottom) - var(--wp-admin--admin-bar--height, 0px));
}
@media (min-width: 744px) and (min-height: 501px), (max-height: 500px) {
	.klayout {
		display: grid;
		grid-template-columns: clamp(320px, 34vw, 470px) minmax(0, 1fr);
		position: static;
	}
	.kfeld {
		position: relative;
		inset: auto;
	}
	.kliste,
	.kliste.auf {
		position: static;
		height: auto;
		transform: none;
		box-shadow: none;
		border-top: 0;
		border-right: 1px solid var(--linie);
		z-index: auto;
	}
	.kgriff { display: none !important; }
}
@media (max-height: 500px) {
	.klayout { grid-template-columns: minmax(290px, 40%) minmax(0, 1fr); }
	.uebersicht[data-ansicht="karte"] .aktivzeile { display: none; }
	.keintrag { padding: 10px var(--rand); }
	.keintrag .reihe { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
	.keintrag .nm { font-size: 19px; }
	.keintrag .sz,
	.keintrag .pr,
	.keintrag .eck { font-size: 13px; }
}
@media (min-width: 2200px) {
	.klayout { grid-template-columns: clamp(470px, 26vw, 620px) minmax(0, 1fr); }
	.keintrag .nm { font-size: 30px; }
}
/* Handy hoch: das Blatt endet über dem Kartenfuß und reicht geöffnet bis unter den Kopf. */
@media (max-width: 743px) and (min-height: 501px) {
	.kliste {
		bottom: calc(44px + env(safe-area-inset-bottom));
		height: calc(100dvh - var(--kopf-h, 62px) - 44px - env(safe-area-inset-bottom));
	}
}

/* ===== K2 Paket 2 – Übersicht, leeres Ergebnis, Merkzettel (Messrunde 2 Nr 78, 81, 82, 94, 95) ===== */
/* Raster mit Abstand zur Aktivzeile wie Prototyp (26–46 oben, 56–104 unten). */
.raster,
.merken__liste {
	padding-top: clamp(26px, 3.4vw, 46px);
	padding-bottom: clamp(56px, 7vw, 104px);
}
/* Nr 78: geringe Höhe (Handy quer) – Kopfzeile nur mit Titel, eng. */
@media (max-height: 500px) {
	.kopfzeile { padding: 10px var(--rand) 8px; }
	.kopfzeile .klein,
	.kopfzeile .einfuehrung { display: none; }
}
/* Nr 81/82: leeres Ergebnis wie Prototyp – Titel 24–34, Hinweis 15, Knöpfe 48 hoch,
   Suchagent-Weg unter feiner Linie, höchstens 56 Zeichen breit. */
.zustand {
	display: grid;
	gap: 14px;
	justify-items: start;
	max-width: none;
	padding: calc(clamp(26px, 3.4vw, 46px) + clamp(28px, 4vw, 56px)) var(--rand) clamp(56px, 7vw, 104px);
}
.zustand h2 {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.6;
}
.zustand .hinw {
	margin: 0;
	font: 400 var(--t2)/1.6 var(--sans);
}
.zustand .wege,
.merken__leer .wege { gap: 12px; }
.zustand .wege .knopf,
.merken__leer .wege .knopf {
	min-height: 48px;
	padding: 12px 20px;
	font: 400 var(--t2)/1.6 var(--sans);
}
.zustand .agentweg {
	display: grid;
	gap: 14px;
	justify-items: start;
	width: 100%;
	max-width: 56ch;
	margin-top: 8px;
	padding-top: 22px;
}
.zustand .agentweg .asatz { margin: 0; }
.zustand .agentweg .wege { margin: 0; }
/* Nr 94/95: Merkzettel – Zahl rechts neben dem Titel, leerer Zustand mit Prototyp-Abständen. */
.merkkopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	padding: clamp(24px, 3vw, 40px) var(--rand) 8px;
}
.merkkopf h2 {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.6;
}
.merken__leer {
	display: grid;
	gap: 14px;
	justify-items: start;
	padding: calc(clamp(26px, 3.4vw, 46px) + clamp(28px, 4vw, 56px)) var(--rand) clamp(56px, 7vw, 104px);
}
.merken__leer p { margin: 0; }
.merken__leer .wege { margin: 0; }
.merken__leer[hidden] { display: none; }
/* K2 Nachmessung Paket 2: leere Merkliste ohne Rasterabstand; Kopfzeile quer oben 18 wie Prototyp. */
.merken__liste:empty { padding: 0; }
@media (max-height: 500px) {
	.kopfzeile { padding-top: 18px; }
}

/* K2 Paket 3 – Suchagent wie Prototyp (Nr 114/115): „Suche speichern“ volle Breite, Hinweis darunter. */
.suchagent .knopf[type="submit"] {
	width: 100%;
	min-height: 52px;
	margin-top: 8px;
	justify-content: center;
	font-size: var(--t1);
}
.suchagent .kleind {
	margin: 10px 0 0;
	font: 400 13px/1.6 var(--sans);
	color: var(--grau);
}
.suchagent .agentsuche {
	padding: 12px 14px;
	background: var(--stein);
}
.suchagent .feld { margin-top: 22px; }
/* K2 (R1 Nr 27): Merkzettel mit Filterleiste – Hinweis, wenn kein gemerktes Objekt zu den Filtern passt. */
.merken__keins {
	grid-column: 1 / -1;
	margin: 0;
	font: 400 clamp(20px, 2vw, 27px)/1.6 var(--serif);
	color: var(--tinte);
}

/* ===== K3 – Kartenansicht: Liste und Karte gekoppelt (Prototyp v46) ===== */
.keintrag--karte { cursor: pointer; position: relative; }
.keintrag--karte:hover,
.keintrag--karte.hover { background: color-mix(in srgb, var(--papier-tief) 60%, transparent); }
.keintrag--karte:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.keintrag--karte.aktiv { background: var(--papier-tief); box-shadow: inset 3px 0 0 var(--blau); }
.keintrag--karte.aktiv .reihe { grid-template-columns: minmax(0, 1fr); }
.keintrag--karte.aktiv .bild { aspect-ratio: 3 / 2; }
.keintrag--karte.aktiv .bild.leer .folgt { font-size: 22px; }
.keintrag--karte.aktiv .nm { font-size: 29px; }
.keintrag--karte .tasten { display: none; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.keintrag--karte.aktiv .tasten { display: flex; }
.keintrag--karte .tasten .prim,
.keintrag--karte .tasten .zweit {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	font: 400 var(--t3)/1 var(--sans);
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
}
.keintrag--karte .tasten .prim { background: var(--blau); color: var(--papier); border: 0; }
.keintrag--karte .tasten .zweit { background: var(--papier); color: var(--tinte); border: 1px solid color-mix(in srgb, var(--tinte) 18%, transparent); }
@media (pointer: coarse) {
	.keintrag--karte .tasten .prim,
	.keintrag--karte .tasten .zweit { min-height: 44px; }
}
/* Handy-Blatt: mittlere Stufe (halbe Höhe). */
@media (max-width: 1023px) {
	.kliste.halb { transform: translateY(50%); }
}

/* ===== K3 – Merkzettel: Entfernen mit Rückgängig (Prototyp v46) ===== */
.merken .kachelhuelle { position: relative; }
.merken .kachelhuelle .entf {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	min-height: 40px;
	padding: 8px 12px;
	background: var(--papier);
	border: 1px solid var(--linie);
	font: 400 13px/1 var(--sans);
	color: var(--tinte);
	cursor: pointer;
}
.merken .kachelhuelle .entf:hover { border-color: var(--tinte); }
@media (pointer: coarse) { .merken .kachelhuelle .entf { min-height: 44px; } }
.rueck {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 60;
	display: none;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	background: var(--blau);
	color: var(--papier);
	font: 400 var(--t3)/1.4 var(--sans);
	transform: translateX(-50%);
}
.rueck.an { display: flex; }
.rueck button {
	min-height: 44px;
	background: none;
	border: 0;
	font: inherit;
	color: var(--papier);
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	cursor: pointer;
}
.rueck button:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
/* Im Merkzettel ersetzt „Entfernen“ den Merken-Knopf an derselben Stelle. */
.merken .kachelhuelle:has(.entf) .merkknopf { display: none; }