/* --- MapView Widget --- */

.kwl-map-view {
	--kwl-map-height: 400px;
	--kwl-map-radius: 8px;
	--kwl-map-grid-color: rgba(0, 0, 0, 0.1);
	--kwl-map-grid-text: rgba(0, 0, 0, 0.55);
	container-type: inline-size;
}

.kwl-map-view__header {
	margin-block-end: var(--kwl-space-sm);
}

.kwl-map-view__heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kwl-space-md);
	flex-wrap: wrap;
}

.kwl-map-view__header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm);
	flex-wrap: wrap;
}

.kwl-map-view__title {
	font-family: var(--kwl-font-heading);
	font-weight: var(--kwl-fw-semibold);
	font-size: var(--kwl-fsize-h3);
	line-height: var(--kwl-lh-heading);
	color: var(--kwl-text);
	padding-block-end: var(--kwl-space-sm, 0.5rem);
	flex: 1 1 auto;
	min-width: 0;
}

.kwl-map-view__desc {
	font-size: var(--kwl-fsize-body);
	color: var(--kwl-text-muted);
	margin-block-start: var(--kwl-space-xs);
}

/* --- Action-Buttons im Header (Export GPX/GeoJSON) --- */

.kwl-map-view__action-btn {
	border-radius: var(--kwl-radius-full, 9999px);
	padding: 0.5rem 0.875rem 0.5rem 0.75rem;
	gap: 0.375rem;
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	flex-shrink: 0;
}

.kwl-map-view__action-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

@container (min-width: 481px) {
	.kwl-map-view__action-btn {
		padding: 0.5rem 1rem 0.5rem 0.75rem;
		font-size: var(--kwl-fsize-small, 0.875rem);
	}
}

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

.kwl-map-view__container {
	position: relative;
	height: var(--kwl-map-height);
	border-radius: var(--kwl-map-radius);
	overflow: hidden;
	background-color: var(--kwl-bg-alt);
}

.kwl-map-view__container:focus-visible {
	outline: 3px solid var(--kwl-focus);
	outline-offset: 2px;
}

.kwl-map-view__canvas {
	width: 100%;
	height: 100%;
}

/* --- Skeleton / Fallback --- */

.kwl-map-view__skeleton {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kwl-bg-alt);
	color: var(--kwl-accent);
}

.kwl-map-view__skeleton svg {
	width: 48px;
	height: 48px;
	animation: kwl-map-skeleton-pulse 2.4s var(--kwl-ease-soft, ease-in-out) infinite;
	transform-origin: center bottom;
}

@keyframes kwl-map-skeleton-pulse {
	0%, 100% {
		opacity: 0.45;
		transform: scale(1) translateY(0);
	}
	50% {
		opacity: 0.95;
		transform: scale(1.1) translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kwl-map-view__skeleton svg {
		animation: none;
		opacity: 0.6;
	}
}

.kwl-map-view__canvas:has(.leaflet-container) .kwl-map-view__skeleton {
	display: none;
}

.kwl-map-view__fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-md);
	width: 100%;
	height: 100%;
	color: var(--kwl-text-muted);
	font-size: var(--kwl-fsize-small);
	text-align: center;
	padding: var(--kwl-space-md);
}

.kwl-map-view__fallback-text {
	margin: 0;
}

.kwl-map-view__fallback-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm);
	justify-content: center;
}

.kwl-map-view__retry-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs);
}

/* --- DSGVO Consent Overlay --- */

.kwl-map-view__consent {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--kwl-bg) 85%, transparent),
		color-mix(in srgb, var(--kwl-bg-alt) 90%, transparent)
	);
	backdrop-filter: blur(8px);
	border-radius: var(--kwl-map-radius);
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
}

.kwl-map-view__consent[hidden] {
	display: none;
}

.kwl-map-view__consent-inner {
	text-align: center;
	max-width: 400px;
	padding: var(--kwl-space-lg);
}

.kwl-map-view__consent-heading {
	font-family: var(--kwl-font-heading);
	font-weight: var(--kwl-fw-semibold);
	font-size: var(--kwl-fsize-h4);
	color: var(--kwl-text);
	margin-block-end: var(--kwl-space-xs);
}

.kwl-map-view__consent-text {
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-text-muted);
	line-height: var(--kwl-lh-body);
	margin-block-end: var(--kwl-space-md);
}

.kwl-map-view__consent-btn {
	min-height: 44px;
	min-width: 44px;
}

.kwl-map-view__consent-remember {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-xs);
	margin-block-start: var(--kwl-space-sm);
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-text-muted);
	cursor: pointer;
}

.kwl-map-view__consent-remember[hidden] {
	display: none;
}

.kwl-map-view__consent-checkbox {
	width: 24px;
	height: 24px;
	accent-color: var(--kwl-accent);
}

/* --- Two-Finger Touch Hint --- */

.kwl-map-view__touch-hint {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--kwl-text, #1a202c) 75%, transparent);
	color: var(--kwl-btn-text, #fff);
	font-size: var(--kwl-fsize-body);
	font-weight: var(--kwl-fw-medium);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--kwl-transition);
}

.kwl-map-view__touch-hint[hidden] {
	display: none;
}

.kwl-map-view__touch-hint.kwl-map-view__touch-hint--visible {
	opacity: 1;
}

/* --- Leaflet Overrides --- */

.kwl-map-view .leaflet-control-zoom a {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.kwl-map-view .leaflet-control-zoom a:focus-visible {
	outline: 3px solid var(--kwl-focus);
	outline-offset: 2px;
}

.kwl-map-view .leaflet-popup-content-wrapper {
	border-radius: var(--kwl-radius-md);
	box-shadow: var(--kwl-shadow-lg);
	font-family: var(--kwl-font-body);
}

.kwl-map-view .leaflet-popup-content {
	font-size: var(--kwl-fsize-small);
	line-height: var(--kwl-lh-body);
	color: var(--kwl-text);
}

/* --- Fullscreen Button --- */

.kwl-map-view__fullscreen-btn {
	position: absolute;
	top: var(--kwl-space-sm);
	right: var(--kwl-space-sm);
	z-index: 5;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kwl-bg);
	color: var(--kwl-text);
	border: 1px solid var(--kwl-border);
	border-radius: var(--kwl-radius-sm);
	cursor: pointer;
	box-shadow: var(--kwl-shadow-sm);
}

.kwl-map-view__fullscreen-btn svg,
.kwl-map-view__geolocation-btn svg,
.kwl-map-view__hotel-info-toggle svg,
.kwl-map-view__retry-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.kwl-map-view__fullscreen-btn:focus-visible {
	outline: 3px solid var(--kwl-focus);
	outline-offset: 2px;
}

@media (hover: hover) {
	.kwl-map-view__fullscreen-btn:hover {
		box-shadow: var(--kwl-shadow-md);
	}
}

/* --- Navigation Buttons --- */

.kwl-map-view__nav-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm);
	margin-block-start: var(--kwl-space-sm);
}

/* --- Geolocation Button --- */

.kwl-map-view__geolocation-btn {
	position: absolute;
	top: var(--kwl-space-sm);
	left: var(--kwl-space-sm);
	z-index: 5;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kwl-bg);
	color: var(--kwl-text);
	border: 1px solid var(--kwl-border);
	border-radius: var(--kwl-radius-sm);
	cursor: pointer;
	box-shadow: var(--kwl-shadow-sm);
}

.kwl-map-view__geolocation-btn:focus-visible {
	outline: 3px solid var(--kwl-focus);
	outline-offset: 2px;
}

.kwl-map-view__geolocation-btn--loading {
	opacity: 0.5;
	pointer-events: none;
}

@media (hover: hover) {
	.kwl-map-view__geolocation-btn:hover {
		box-shadow: var(--kwl-shadow-md);
	}
}

.kwl-map-view__geo-marker {
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--kwl-map-geo-color, #4285f4) 50%, transparent));
}

/* --- Route Stats --- */

.kwl-map-view__stats {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm);
	margin-block-start: var(--kwl-space-md);
}

.kwl-map-view__stat-card {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md);
	padding: var(--kwl-space-md);
	width: 100%;
	box-sizing: border-box;
	font-size: var(--kwl-fsize-small);
}

.kwl-map-view__stat-info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-xs) var(--kwl-space-lg);
	margin: 0;
	align-items: baseline;
}

.kwl-map-view__stat-pair {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.kwl-map-view__stat-info dt {
	color: var(--kwl-text-muted);
	font-weight: var(--kwl-fw-medium);
}

.kwl-map-view__stat-info dd {
	margin: 0;
	color: var(--kwl-text);
	font-weight: var(--kwl-fw-semibold);
	font-variant-numeric: tabular-nums;
}

.kwl-map-view__stat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm);
}

.kwl-map-view__stat-actions:empty {
	display: none;
}

.kwl-map-view__stat-actions > * {
	flex: 1 1 160px;
	justify-content: center;
	text-align: center;
}

/* --- POI List --- */

.kwl-map-view__poi-list {
	margin-block-start: var(--kwl-space-sm);
	border: 1px solid var(--kwl-border);
	border-radius: var(--kwl-radius-md);
	overflow: hidden;
}

.kwl-map-view__poi-list summary {
	padding: var(--kwl-space-sm) var(--kwl-space-md);
	font-weight: var(--kwl-fw-medium);
	font-size: var(--kwl-fsize-small);
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.kwl-map-view__poi-list summary:focus-visible {
	outline: 3px solid var(--kwl-focus);
	outline-offset: -3px;
}

.kwl-map-view__poi-list section {
	border-block-start: 1px solid var(--kwl-border);
}

.kwl-map-view__poi-heading {
	margin: 0;
	padding: var(--kwl-space-xs) var(--kwl-space-md);
	font-size: var(--kwl-fsize-caption);
	font-weight: var(--kwl-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-wide, 0.05em);
	color: var(--kwl-text-muted);
	background: var(--kwl-bg-alt);
}

.kwl-map-view__poi-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kwl-map-view__poi-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--kwl-space-sm);
	padding: var(--kwl-space-xs) var(--kwl-space-md);
	min-height: 44px;
	font-size: var(--kwl-fsize-small);
	border-block-end: 1px solid var(--kwl-border);
}

.kwl-map-view__poi-list li:last-child {
	border-block-end: none;
}

.kwl-map-view__poi-list a {
	color: var(--kwl-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kwl-map-view__poi-list a:focus-visible {
	outline: 3px solid var(--kwl-focus);
	outline-offset: 2px;
}

.kwl-map-view__poi-addr {
	flex-basis: 100%;
	color: var(--kwl-text-muted);
	font-size: var(--kwl-fsize-caption);
}

.kwl-map-view__poi-dist {
	margin-inline-start: auto;
	padding: 1px var(--kwl-space-xs);
	font-size: var(--kwl-fsize-caption);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--kwl-accent);
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 10%, transparent);
	border-radius: var(--kwl-radius-sm);
}

/* --- Skip Link --- */

.kwl-map-view__skip:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
	position: static;
	padding: var(--kwl-space-xs) var(--kwl-space-sm);
	background: var(--kwl-bg);
	color: var(--kwl-primary);
	font-size: var(--kwl-fsize-small);
	border: 2px solid var(--kwl-focus);
	border-radius: var(--kwl-radius-sm);
}

/* §447: Dark-Mode-Tile-Filter — OSM Standard wird via CSS-Filter dezent abgedunkelt
   statt einen eigenen Dark-Tile-Provider zu nutzen. Vorteil: deutsche Labels +
   volle Detailtiefe + dunklerer Look ohne Verlust an Zugänglichkeit. */
.kwl-map-view__container[data-tile-mode="dark"] .leaflet-tile-pane {
	filter: brightness(0.85) saturate(0.78) hue-rotate(-8deg);
}

/* --- Dark Mode --- */

@media (prefers-color-scheme: dark) {
	.kwl-map-view__consent {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--kwl-bg) 90%, transparent),
			color-mix(in srgb, var(--kwl-bg-alt) 92%, transparent)
		);
	}

	.kwl-map-view .leaflet-popup-content-wrapper {
		background: var(--kwl-bg);
		color: var(--kwl-text);
	}

	.kwl-map-view .leaflet-popup-tip {
		background: var(--kwl-bg);
	}

	.kwl-map-view__fullscreen-btn,
	.kwl-map-view__geolocation-btn {
		background: var(--kwl-bg);
		border-color: var(--kwl-border);
		color: var(--kwl-text);
	}

	/* §444: Leaflet-Zoom-/Bar-Controls (Plus/Minus + alle Bar-Buttons) — Standard-Leaflet
	   rendert weiß auf weißem Hintergrund mit gold-getöntem Icon, was im Dark Mode auf
	   dunklen Tiles kaum sichtbar ist (BFSG-Problem). Wir spiegeln die Plugin-Tokens. */
	.kwl-map-view .leaflet-bar {
		background: var(--kwl-bg);
		border-color: var(--kwl-border);
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
	}

	.kwl-map-view .leaflet-bar a,
	.kwl-map-view .leaflet-bar a:link,
	.kwl-map-view .leaflet-bar a:visited {
		background-color: var(--kwl-bg);
		color: var(--kwl-text);
		border-bottom-color: var(--kwl-border);
	}

	.kwl-map-view .leaflet-bar a:hover,
	.kwl-map-view .leaflet-bar a:focus-visible {
		background-color: var(--kwl-bg-alt);
		color: var(--kwl-accent);
	}

	.kwl-map-view .leaflet-bar a.leaflet-disabled {
		background-color: var(--kwl-bg-alt);
		color: var(--kwl-text-muted);
		opacity: 0.6;
	}

	/* Attribution unten-rechts: Standard ist weiß-transparent → unleserlich auf hellen
	   Tiles, gerade so OK auf dunklen. Wir setzen plugin-konforme Dark-Tokens. */
	.kwl-map-view .leaflet-control-attribution {
		background: color-mix(in srgb, var(--kwl-bg) 88%, transparent);
		color: var(--kwl-text-muted);
	}

	.kwl-map-view .leaflet-control-attribution a {
		color: var(--kwl-text);
	}

	.kwl-map-view .leaflet-control-attribution a:hover,
	.kwl-map-view .leaflet-control-attribution a:focus-visible {
		color: var(--kwl-accent);
	}
}

/* --- Legend --- */

.kwl-map-view__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 8px);
	margin-block-start: var(--kwl-space-md, 16px);
}

.kwl-map-view__legend-item {
	all: unset;
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 4px);
	min-height: 44px;
	padding: var(--kwl-space-xs, 4px) var(--kwl-space-sm, 8px);
	border-radius: var(--kwl-radius-sm, 4px);
	border: 1px solid var(--kwl-border, #e2e8f0);
	cursor: pointer;
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-text, #1a202c);
	transition: opacity var(--kwl-transition, 200ms ease);
	box-sizing: border-box;
}

.kwl-map-view__legend-item[aria-checked="false"] {
	opacity: 0.35;
}

.kwl-map-view__legend-item:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-map-view__legend-swatch {
	width: 24px;
	height: 4px;
	border-radius: 2px;
	flex-shrink: 0;
}

.kwl-map-view__legend-type {
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	color: var(--kwl-text-muted, #64748b);
}

/* --- Category Filter --- */

.kwl-map-view__category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 8px);
	margin-block-start: var(--kwl-space-sm, 8px);
}

.kwl-map-view__category-filter:empty {
	display: none;
}

.kwl-map-view__filter-item {
	all: unset;
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 4px);
	min-height: 44px;
	padding: var(--kwl-space-xs, 4px) var(--kwl-space-sm, 8px);
	border-radius: var(--kwl-radius-sm, 4px);
	border: 1px solid var(--kwl-border, #e2e8f0);
	cursor: pointer;
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-text, #1a202c);
	transition: opacity var(--kwl-transition, 200ms ease);
	box-sizing: border-box;
}

.kwl-map-view__filter-item[aria-pressed="false"] {
	opacity: 0.35;
}

.kwl-map-view__filter-item:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-map-view__filter-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex-shrink: 0;
}

.kwl-map-view__filter-icon {
	width: 11px;
	height: 11px;
	color: #fff;
}

.kwl-map-view__filter-count {
	color: var(--kwl-text-muted, #64748b);
	font-variant-numeric: tabular-nums;
}

/* --- Elevation Profile --- */

.kwl-map-view__elevation-details {
	margin-block-start: var(--kwl-space-md, 16px);
	border: 1px solid var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-md, 8px);
	overflow: hidden;
}

.kwl-map-view__elevation-details:not(:has(.kwl-map-view__elevation > *)) {
	display: none;
}

.kwl-map-view__elevation-summary {
	padding: var(--kwl-space-sm, 8px) var(--kwl-space-md, 16px);
	font-weight: var(--kwl-fw-semibold, 600);
	font-size: var(--kwl-fsize-small);
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--kwl-text, #1a202c);
}

.kwl-map-view__elevation-summary:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: -3px;
}

.kwl-map-view__elevation-details[open] .kwl-map-view__elevation-summary {
	border-block-end: 1px solid var(--kwl-border, #e2e8f0);
}

.kwl-map-view__elevation-details .kwl-map-view__elevation {
	padding: 0 var(--kwl-space-md, 16px) var(--kwl-space-md, 16px);
	margin-block-start: 0;
}

.kwl-map-view__elevation:empty {
	display: none;
}

.kwl-map-view__elevation-chart {
	position: relative;
	margin-block-start: var(--kwl-space-md, 16px);
}

.kwl-map-view__elevation-label {
	display: block;
	font-weight: var(--kwl-fw-semibold, 600);
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-text, #1a202c);
	margin-block-end: var(--kwl-space-xs, 4px);
}

.kwl-map-view__elevation-canvas {
	width: 100%;
	height: 150px;
	display: block;
	border-radius: var(--kwl-radius-sm, 4px);
	background: var(--kwl-bg-alt);
}

.kwl-map-view__elevation-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 8px) var(--kwl-space-md, 16px);
	margin-block-start: var(--kwl-space-xs, 4px);
}

.kwl-map-view__elevation-stat {
	display: flex;
	flex-direction: column;
	font-size: var(--kwl-fsize-caption, 0.8125rem);
}

.kwl-map-view__elevation-stat-label {
	color: var(--kwl-text-muted, #64748b);
}

.kwl-map-view__elevation-stat-value {
	font-weight: var(--kwl-fw-semibold, 600);
	font-variant-numeric: tabular-nums;
}

.kwl-map-view__elevation-crosshair {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--kwl-accent, #BD9B5C);
	pointer-events: none;
	transform: translateX(-0.5px);
}

.kwl-map-view__elevation-crosshair[hidden] {
	display: none;
}

.kwl-map-view__elevation-tooltip {
	position: absolute;
	top: -4px;
	transform: translate(-50%, -100%);
	background: var(--kwl-text, #1a202c);
	color: var(--kwl-bg, #fff);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	padding: 2px 6px;
	border-radius: var(--kwl-radius-sm, 4px);
	pointer-events: none;
	white-space: nowrap;
}

.kwl-map-view__elevation-tooltip[hidden] {
	display: none;
}

/* --- Hover --- */

@media (hover: hover) {
	.kwl-map-view__legend-item:hover {
		border-color: var(--kwl-accent, #BD9B5C);
	}

	.kwl-map-view__filter-item:hover {
		border-color: var(--kwl-accent, #BD9B5C);
	}

	.kwl-map-view__elevation-canvas {
		cursor: crosshair;
	}
}

/* --- Hotel Infobox --- */

.kwl-map-view__hotel-info {
	position: relative;
	z-index: 5;
	max-width: 260px;
	background: var(--kwl-bg, #ffffff);
	border-radius: var(--kwl-radius-sm, 4px);
	box-shadow: var(--kwl-shadow-md);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-text, #1a202c);
}

.kwl-map-view__hotel-info-toggle {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 44px;
	min-width: 44px;
	cursor: pointer;
	font-size: 1.125rem;
	border-radius: var(--kwl-radius-sm, 4px);
	color: var(--kwl-primary, #00315d);
	box-sizing: border-box;
}

.kwl-map-view__hotel-info-toggle:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-map-view__hotel-info--open .kwl-map-view__hotel-info-toggle {
	border-bottom: 1px solid var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-sm, 4px) var(--kwl-radius-sm, 4px) 0 0;
}

.kwl-map-view__hotel-info-body {
	padding: var(--kwl-space-sm, 8px) var(--kwl-space-md, 16px) var(--kwl-space-md, 16px);
}

.kwl-map-view__hotel-info-body[hidden] {
	display: none;
}

.kwl-map-view__hotel-info-name {
	display: block;
	font-weight: var(--kwl-fw-semibold, 600);
	color: var(--kwl-text, #1a202c);
	margin-block-end: var(--kwl-space-xs, 4px);
}

.kwl-map-view__hotel-info-addr {
	color: var(--kwl-text-muted, #64748b);
	margin: 0 0 var(--kwl-space-xs, 4px);
}

.kwl-map-view__hotel-info-row {
	margin: 0 0 var(--kwl-space-xs, 4px);
}

.kwl-map-view__hotel-info-link {
	--kwl-link-color: var(--kwl-accent, #BD9B5C);
	--kwl-link-hover-color: var(--kwl-accent, #BD9B5C);
	--kwl-link-underline: underline;
	text-underline-offset: 2px;
}

.kwl-map-view__hotel-info-link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

@media (hover: hover) {
	.kwl-map-view__hotel-info-toggle:hover {
		color: var(--kwl-accent, #BD9B5C);
	}

	.kwl-map-view__hotel-info-link:hover,
	.kwl-map-view__nearby-link:hover {
		text-decoration: underline;
	}
}

/* --- Parking Marker --- */

.kwl-map-parking-marker {
	background: none;
	border: none;
}

.kwl-map-endpoint-marker {
	background: none;
	border: none;
}

/* --- Hotel-Logo-Marker (heller Kreis, Favicon zentriert, dezenter Gold-Ring) --- */

.kwl-map-hotel {
	background: none;
	border: none;
}

.kwl-map-hotel-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--kwl-accent, #BD9B5C);
	box-shadow: var(--kwl-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
	overflow: hidden;
}

.kwl-map-hotel-marker img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 50%;
	display: block;
}

.leaflet-marker-icon.kwl-map-hotel:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* --- Distance Badge --- */

.kwl-map-popup__badge {
	margin-block-start: var(--kwl-space-xs, 4px);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	color: var(--kwl-text-muted, #64748b);
}

/* --- Nearby --- */

.kwl-map-view__nearby {
	margin-block-start: var(--kwl-space-md, 16px);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-text-muted, #64748b);
}

.kwl-map-view__nearby strong {
	font-weight: var(--kwl-fw-semibold, 600);
	color: var(--kwl-text, #1a202c);
}

.kwl-map-view__nearby-link {
	--kwl-link-color: var(--kwl-accent, #BD9B5C);
	--kwl-link-hover-color: var(--kwl-accent, #BD9B5C);
	--kwl-link-underline: underline;
	text-underline-offset: 2px;
}

.kwl-map-view__nearby-link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-map-view__nearby-dist {
	color: var(--kwl-text-muted, #64748b);
}

/* --- Responsive (Container Query) --- */

@container (max-width: 400px) {
	.kwl-map-view__hotel-info {
		max-width: 200px;
	}

	.kwl-map-view__stat-info {
		flex-direction: column;
		gap: var(--kwl-space-xs);
	}

	.kwl-map-view__legend,
	.kwl-map-view__category-filter {
		flex-direction: column;
	}

	.kwl-map-view__elevation-canvas {
		height: 120px;
	}

	.kwl-map-view__elevation-stats {
		flex-direction: column;
		gap: var(--kwl-space-xs, 4px);
	}
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
	.kwl-map-view__touch-hint,
	.kwl-map-view__legend-item,
	.kwl-map-view__filter-item {
		transition: none;
	}
}

/* --- Dark Mode --- */

@media (prefers-color-scheme: dark) {
	.kwl-map-view {
		--kwl-map-grid-color: rgba(255, 255, 255, 0.12);
		--kwl-map-grid-text: rgba(255, 255, 255, 0.7);
	}

	.kwl-map-view__legend-item {
		border-color: var(--kwl-border, #4a5568);
		color: var(--kwl-text, #f7fafc);
	}

	.kwl-map-view__legend-type {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kwl-map-view__hotel-info {
		background: var(--kwl-bg, #1a202c);
		color: var(--kwl-text, #f7fafc);
		box-shadow: var(--kwl-shadow-md);
	}

	.kwl-map-view__hotel-info-toggle {
		color: var(--kwl-primary, #63b3ed);
	}

	.kwl-map-view__hotel-info--open .kwl-map-view__hotel-info-toggle {
		border-bottom-color: var(--kwl-border, #4a5568);
	}

	.kwl-map-view__hotel-info-name {
		color: var(--kwl-text, #f7fafc);
	}

	.kwl-map-view__hotel-info-addr {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kwl-map-popup__badge,
	.kwl-map-view__nearby,
	.kwl-map-view__nearby-dist {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kwl-map-view__nearby strong {
		color: var(--kwl-text, #f7fafc);
	}

	.kwl-map-view__poi-dist {
		color: var(--kwl-accent, #BD9B5C);
		background: rgba(189, 155, 92, 0.15);
	}

	.kwl-map-view__filter-item {
		border-color: var(--kwl-border, #4a5568);
		color: var(--kwl-text, #f7fafc);
	}

	.kwl-map-view__filter-count {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kwl-map-view__elevation-label {
		color: var(--kwl-text, #f7fafc);
	}

	.kwl-map-view__elevation-stat-label {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kwl-map-view__elevation-tooltip {
		background: var(--kwl-bg, #1a202c);
		color: var(--kwl-text, #f7fafc);
		box-shadow: var(--kwl-shadow-sm);
	}

	.kwl-map-view__elevation-details {
		border-color: var(--kwl-border, #4a5568);
	}

	.kwl-map-view__elevation-summary {
		color: var(--kwl-text, #f7fafc);
	}

	.kwl-map-view__elevation-details[open] .kwl-map-view__elevation-summary {
		border-block-end-color: var(--kwl-border, #4a5568);
	}
}

/* --- Print --- */

@media print {
	.kwl-map-view__header-actions,
	.kwl-map-view__consent,
	.kwl-map-view__fullscreen-btn,
	.kwl-map-view__touch-hint,
	.kwl-map-view__skip,
	.kwl-map-view__stat-actions,
	.kwl-map-view__hotel-info,
	.kwl-map-view__category-filter,
	.kwl-map-view__elevation-crosshair,
	.kwl-map-view__elevation-tooltip,
	.kwl-map-view__geolocation-btn {
		display: none;
	}

	.kwl-map-view__container {
		height: auto;
		min-height: 200px;
		overflow: visible;
	}

	.kwl-map-view__legend {
		display: flex;
	}

	.kwl-map-view__legend-item[aria-checked="false"] {
		display: none;
	}

	.kwl-map-view__stat-card {
		break-inside: avoid;
	}

	.kwl-map-view__poi-list {
		break-inside: avoid;
	}

	.kwl-map-view__poi-list[open] summary ~ * {
		display: block;
	}

	.kwl-map-view__elevation-chart {
		break-inside: avoid;
	}

	.kwl-map-view__elevation-canvas {
		height: 120px;
	}

	.kwl-map-view__elevation-details {
		break-inside: avoid;
	}

	.kwl-map-view__elevation-details[open] > .kwl-map-view__elevation {
		display: block;
	}
}

/* V4 Pink-Reset: zentral via [data-kwl-link] / [data-kwl-link-scope] auf .kwl-map-view (§281) */