/*
 * Karten-Seite (v2 templates/page-karte.php <style> + ksb-karte.css «Multi-Layer»): Seitenleiste mit Filtern,
 * Vollbild-Karte, Ergebnisliste. Kopf bleibt oben, Karte füllt den Rest (Flex statt gemessener Kopfhöhe).
 */

@layer pages {
	body.ist-karte {
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
	}

	body.ist-karte .site-header {
		position: relative;
		top: 0;
	}

	/* WP-Adminleiste (nur angemeldet) schiebt die Seite um 32px bzw. 46px nach unten */
	body.ist-karte.admin-bar {
		height: calc(100dvh - 32px);
	}

	@media (max-width: 782px) {
		body.ist-karte.admin-bar {
			height: calc(100dvh - 46px);
		}
	}

	.map-page {
		position: relative;
		display: grid;
		grid-template-columns: 380px 1fr;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}

	.map-page.ist-liste-offen {
		grid-template-columns: 380px 1fr 280px;
	}

	/* ── Seitenleiste ────────────────────────────────────────────────── */
	.filter-sidebar {
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;
		background: var(--ksb-paper);
		border-right: 1px solid var(--ksb-line);
	}

	.filter-sidebar::before {
		content: "";
		flex-shrink: 0;
		height: 3px;
		background: var(--ksb-green);
	}

	.sidebar-search {
		position: relative;
		z-index: 10;
		flex-shrink: 0;
		padding: 20px 28px 18px;
		background: var(--ksb-paper);
		border-bottom: 1px solid var(--ksb-line);
	}

	.sidebar-search h1 {
		margin: 0 0 6px;
		font-size: var(--ksb-fs-lg);
		font-weight: 400;
		line-height: 1.1;
	}

	.sidebar-search .sub {
		margin: 0 0 var(--ksb-space-2);
		font-size: var(--ksb-fs-sm);
		line-height: 1.4;
		color: var(--ksb-ink-soft);
	}

	.sidebar-search .sub strong {
		font-weight: 600;
		color: var(--ksb-green);
	}

	.ksb-layer-controls {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ksb-space-2);
		padding: 10px 0 14px;
	}

	.ksb-layer-toggle {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: var(--ksb-space-2) var(--ksb-space-4);
		font-size: var(--ksb-fs-sm);
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		color: var(--ksb-ink);
		background: var(--ksb-paper);
		border: 1.5px solid var(--ksb-line);
		border-radius: var(--ksb-radius-sm);
		cursor: pointer;
		user-select: none;
		transition: border-color var(--ksb-transition), background var(--ksb-transition), color var(--ksb-transition);
	}

	.ksb-layer-toggle input {
		width: 15px;
		height: 15px;
		margin: 0;
		accent-color: var(--ksb-green);
		cursor: pointer;
	}

	.ksb-layer-toggle:hover {
		background: var(--ksb-cream);
		border-color: var(--ksb-green);
	}

	.ksb-layer-toggle:has(input:checked) {
		color: var(--ksb-green-deep);
		background: var(--ksb-green-pale);
		border-color: var(--ksb-green);
	}

	.ksb-layer-toggle--orte input {
		accent-color: var(--ksb-pin-ort-rand);
	}

	.ksb-layer-toggle--orte:hover,
	.ksb-layer-toggle--orte:has(input:checked) {
		color: var(--ksb-pin-ort-text);
		background: rgb(241 196 15 / .10);
		border-color: var(--ksb-pin-ort-rand);
	}

	.ksb-layer-toggle.is-gesperrt {
		color: var(--ksb-ink-soft);
		background: var(--ksb-cream);
		border-color: var(--ksb-line);
		cursor: not-allowed;
		opacity: .75;
	}

	.ksb-layer-toggle.is-gesperrt input {
		cursor: not-allowed;
	}

	.ksb-orte-subfilter {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: var(--ksb-space-1);
		padding: var(--ksb-space-2) 0 14px;
		border-top: 1px solid var(--ksb-line-soft);
	}

	.ksb-orte-subfilter[hidden] {
		display: none;
	}

	.ksb-orte-subfilter label {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 5px 11px;
		font-size: var(--ksb-fs-xs);
		font-weight: 500;
		line-height: 1;
		color: var(--ksb-ink-soft);
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-sm);
		cursor: pointer;
	}

	.ksb-orte-subfilter label:has(input:checked) {
		color: var(--ksb-pin-ort-text);
		background: rgb(241 196 15 / .10);
		border-color: var(--ksb-pin-ort-rand);
	}

	.ksb-orte-subfilter input {
		width: 13px;
		height: 13px;
		margin: 0;
		accent-color: var(--ksb-pin-ort-rand);
	}

	.search-input {
		position: relative;
		margin-top: var(--ksb-space-1);
	}

	.search-input .icon {
		position: absolute;
		top: 50%;
		left: 11px;
		color: var(--ksb-ink-soft);
		transform: translateY(-50%);
		pointer-events: none;
	}

	.search-input input {
		width: 100%;
		padding: 11px var(--ksb-space-3) 11px 36px;
		font-size: var(--ksb-fs-ui);
		line-height: 1;
		color: var(--ksb-ink);
		background: var(--ksb-cream);
		border: 1px solid var(--ksb-line-strong);
		border-radius: var(--ksb-radius-sm);
		transition: border-color var(--ksb-transition), background var(--ksb-transition);
	}

	.search-input input:focus {
		background: var(--ksb-paper);
		border-color: var(--ksb-green);
	}

	.search-input input::placeholder {
		color: var(--ksb-ink-soft);
	}

	.ort-treffer {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 100;
		margin: var(--ksb-space-1) 0 0;
		padding: 6px 0;
		list-style: none;
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-md);
		box-shadow: 0 8px 24px rgb(0 0 0 / .12);
	}

	.ort-treffer button,
	.ort-treffer__meldung {
		display: block;
		width: 100%;
		padding: 10px 14px;
		font-size: var(--ksb-fs-ui);
		text-align: left;
		color: var(--ksb-ink);
		background: none;
		border: 0;
		border-radius: 0;
	}

	.ort-treffer button:hover,
	.ort-treffer button:focus-visible {
		background: var(--ksb-cream);
		box-shadow: none;
	}

	.ort-treffer__meldung {
		color: var(--ksb-ink-soft);
	}

	.radius-row {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 10px;
		margin-top: 10px;
	}

	.radius-row__label {
		font-size: var(--ksb-fs-sm);
		font-weight: 500;
		color: var(--ksb-ink-soft);
	}

	.radius-row input[type="range"] {
		width: 100%;
		accent-color: var(--ksb-green);
	}

	.radius-row__val {
		min-width: 46px;
		font-size: var(--ksb-fs-sm);
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		color: var(--ksb-green);
	}

	.ksb-reset-ort {
		display: block;
		padding: 6px 0 0;
		font-size: var(--ksb-fs-xs);
		text-decoration: underline;
		text-underline-offset: 2px;
		color: var(--ksb-ink-soft);
		background: none;
		border: 0;
	}

	.ksb-reset-ort[hidden] {
		display: none;
	}

	.filter-scroll {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}

	.filter-group {
		padding: 22px 28px var(--ksb-space-5);
	}

	.filter-group[hidden] {
		display: none;
	}

	.filter-group-label {
		display: flex;
		align-items: center;
		gap: var(--ksb-space-2);
		margin: 0 0 var(--ksb-space-4);
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: var(--ksb-ls-eyebrow);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.filter-group-label::before {
		content: "";
		flex-shrink: 0;
		width: 3px;
		height: 12px;
		background: var(--ksb-green);
		border-radius: 2px;
		opacity: .5;
	}

	.filter-footer {
		display: flex;
		flex-shrink: 0;
		flex-direction: column;
		gap: 10px;
		padding: 20px 28px var(--ksb-space-5);
		background: var(--ksb-paper);
		border-top: 1px solid var(--ksb-line);
		box-shadow: 0 -6px 20px rgb(60 55 30 / .07);
	}

	.filter-footer .apply {
		display: block;
		width: 100%;
		padding: 13px 20px;
		font-size: var(--ksb-fs-ui);
		font-weight: 600;
		line-height: 1;
		letter-spacing: .02em;
		text-align: center;
		text-decoration: none;
		color: var(--ksb-paper);
		background: var(--ksb-green);
		border: 0;
		border-radius: var(--ksb-radius-card);
		transition: background var(--ksb-transition), transform .12s;
	}

	.filter-footer .apply:hover {
		background: var(--ksb-green-deep);
		transform: translateY(-1px);
	}

	.filter-footer .apply[hidden] {
		display: none;
	}

	.filter-footer .reset {
		padding: var(--ksb-space-1) 0;
		font-size: var(--ksb-fs-sm);
		font-weight: 500;
		text-decoration: underline;
		text-decoration-color: var(--ksb-line-strong);
		text-underline-offset: 3px;
		color: var(--ksb-ink-soft);
		background: transparent;
		border: 0;
	}

	.filter-footer .reset:hover {
		color: var(--ksb-ink);
	}

	/* ── Kartenbereich ───────────────────────────────────────────────── */
	.map-area {
		position: relative;
		min-height: 0;
		overflow: hidden;
		background: var(--ksb-cream);
	}

	.ksb-multilayer-map {
		position: absolute;
		inset: 0;
	}

	.karte-noscript {
		position: absolute;
		inset: auto 0 0;
		z-index: 5;
		margin: 0;
		padding: var(--ksb-space-4);
		text-align: center;
		background: var(--ksb-paper);
	}

	.sidebar-toggle,
	.panel-toggle {
		position: absolute;
		z-index: 1000;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		color: var(--ksb-paper);
		background: var(--ksb-green);
		border: 0;
		border-radius: var(--ksb-radius-sm);
		box-shadow: 0 2px 10px rgb(0 0 0 / .20);
		transition: background var(--ksb-transition);
	}

	.sidebar-toggle:hover,
	.panel-toggle:hover {
		background: var(--ksb-green-deep);
	}

	.sidebar-toggle {
		top: 14px;
		left: 14px;
		display: none;
		width: 44px;
		height: 44px;
	}

	.panel-toggle {
		top: var(--ksb-space-3);
		right: var(--ksb-space-3);
		min-height: 44px; /* Tap-Fläche */
		padding: 9px 14px;
		font-size: var(--ksb-fs-xs);
		font-weight: 700;
		line-height: 1;
	}

	.sidebar-backdrop {
		position: absolute;
		inset: 0;
		z-index: 90;
		background: rgb(0 0 0 / .35);
	}

	.sidebar-backdrop[hidden] {
		display: none;
	}

	/* ── Ergebnisliste ───────────────────────────────────────────────── */
	.results-panel {
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;
		background: var(--ksb-paper);
		border-left: 1px solid var(--ksb-line);
	}

	.results-panel[hidden] {
		display: none;
	}

	.results-panel-header {
		display: flex;
		flex-shrink: 0;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--ksb-space-2);
		padding: var(--ksb-space-3) 14px 10px;
		font-size: var(--ksb-fs-sm);
		font-weight: 600;
		border-bottom: 1px solid var(--ksb-line);
	}

	.results-sort-select {
		padding: 6px 10px;
		font-size: var(--ksb-fs-xs);
		font-weight: 500;
		color: var(--ksb-ink);
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line-strong);
		border-radius: var(--ksb-radius-sm);
	}

	.results-panel-list {
		flex: 1;
		overflow-y: auto;
	}

	.result-card {
		display: block;
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid var(--ksb-line);
		transition: background .12s;
	}

	.result-card:hover {
		background: var(--ksb-cream);
	}

	.result-card__img {
		width: 100%;
		height: 150px;
		object-fit: cover;
	}

	.result-card__ohne-bild {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		font-size: 28px;
		background: var(--ksb-cream);
	}

	.result-card__body {
		padding: var(--ksb-space-3) var(--ksb-space-4) 14px;
	}

	.result-card__name {
		margin: 0 0 var(--ksb-space-1);
		font-size: var(--ksb-fs-ui);
		font-weight: 600;
		line-height: 1.3;
	}

	.result-card__meta {
		margin: 0 0 var(--ksb-space-2);
		font-size: 11px;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--ksb-ink-soft);
	}

	.rc-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ksb-space-1);
		margin: 6px 0;
	}

	.rc-chip {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		padding: 2px 6px;
		font-size: 11px;
		line-height: 1.3;
		background: var(--ksb-cream);
		border: 1px solid var(--ksb-line);
		border-radius: 3px;
	}

	.rc-chip__lbl {
		color: var(--ksb-ink-soft);
	}

	.rc-chip__val {
		font-weight: 500;
		color: var(--ksb-ink);
	}

	.result-card__cta {
		display: inline-block;
		padding: 5px var(--ksb-space-3);
		font-size: 11px;
		font-weight: 600;
		line-height: 1.4;
		color: var(--ksb-paper);
		background: var(--ksb-green);
		border-radius: var(--ksb-radius-sm);
	}

	.result-card-empty {
		padding: 28px 18px;
		font-size: var(--ksb-fs-sm);
		line-height: 1.5;
		text-align: center;
		color: var(--ksb-ink-soft);
	}

	/* ── Reiter Karte/Liste (nur mobil sichtbar) ─────────────────────── */
	.view-tabs {
		display: none;
		flex-shrink: 0;
		padding: 0 var(--ksb-space-4);
		background: var(--ksb-paper);
		border-bottom: 1px solid var(--ksb-line);
	}

	.view-tabs__tab {
		flex: 1;
		min-height: 44px; /* Tap-Fläche */
		padding: 14px var(--ksb-space-2);
		font-family: var(--ksb-font-text);
		font-size: var(--ksb-fs-ui);
		font-weight: 600;
		line-height: 1;
		color: var(--ksb-ink-soft);
		background: transparent;
		border: 0;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}

	.view-tabs__tab:hover {
		color: var(--ksb-ink);
	}

	.view-tabs__tab[aria-selected="true"] {
		color: var(--ksb-green);
		border-bottom-color: var(--ksb-green);
	}

	@media (max-width: 1100px) {
		.map-page,
		.map-page.ist-liste-offen {
			grid-template-columns: 300px 1fr;
		}

		.map-page.ist-liste-offen {
			grid-template-columns: 300px 1fr 240px;
		}
	}

	@media (max-width: 900px) {
		.map-page,
		.map-page.ist-liste-offen {
			grid-template-columns: 1fr;
		}

		.filter-sidebar {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1100;
			width: min(380px, 100%);
			height: 100%;
			visibility: hidden;
			box-shadow: 4px 0 20px rgb(0 0 0 / .15);
			transform: translateX(-100%);
			transition: transform .22s ease, visibility 0s linear .22s;
		}

		.map-page.ist-filter-offen .filter-sidebar {
			visibility: visible;
			transform: translateX(0);
			transition: transform .22s ease, visibility 0s linear 0s;
		}

		.sidebar-backdrop {
			z-index: 1050;
		}

		.sidebar-toggle {
			display: inline-flex;
		}

		.panel-toggle,
		.results-panel {
			display: none;
		}

		.results-panel:not([hidden]) {
			display: none;
		}

		/* Reiter «Karte | Liste (N)» wie v2 (Klasse ist-ansicht-liste setzt karte.js) */
		.view-tabs {
			display: flex;
		}

		.map-page.ist-ansicht-liste .results-panel {
			position: absolute;
			inset: 0;
			z-index: 1080;   /* über Karte und Leaflet-Knöpfen (1000), unter Filter-Overlay (1100) */
			display: flex;
			border-left: 0;
		}

		.map-page.ist-ansicht-liste .results-panel-header {
			padding-inline: var(--ksb-space-4);
		}

		.map-page.ist-ansicht-liste .results-sort-select {
			min-height: 44px; /* Tap-Fläche */
			font-size: var(--ksb-fs-sm);
		}

		.map-page.ist-ansicht-liste .results-panel-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			align-content: start;
		}

		.map-page.ist-ansicht-liste .result-card {
			border-right: 1px solid var(--ksb-line);
		}

		.map-page.ist-ansicht-liste .result-card-empty {
			grid-column: 1 / -1;
		}
	}

	@media (max-width: 600px) {
		.filter-sidebar {
			width: 100%;
		}

		.sidebar-search {
			padding: var(--ksb-space-4) 18px 14px;
		}

		.filter-group,
		.filter-footer {
			padding-inline: 18px;
		}
	}
}