.is-v1 { --dk-map-fill: var(--dk-v1); }
.is-v2 { --dk-map-fill: var(--dk-v2); }
.is-v3 { --dk-map-fill: var(--dk-v3); }
.is-v4 { --dk-map-fill: var(--dk-v4); }
.is-v5 { --dk-map-fill: var(--dk-v5); }
.is-local { --dk-map-fill: var(--dk-v-local); }
.is-none { --dk-map-fill: var(--dk-v-none); }

.dk-map__dot {
	display: inline-block;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--dk-map-fill, var(--dk-v-none));
	box-shadow: inset 0 0 0 1px rgb(37 28 24 / 0.12);
}

.dk-map {
	position: relative;
	container-type: inline-size;
}

.dk-map__stage {
	position: relative;
	height: clamp(380px, 62cqi, 620px);
	overflow: hidden;
	background:
		radial-gradient(ellipse 65% 60% at 52% 46%, color-mix(in srgb, var(--dk-surface) 70%, transparent), transparent 72%),
		radial-gradient(ellipse 40% 35% at 85% 85%, color-mix(in srgb, var(--dk-border) 70%, transparent), transparent 80%),
		linear-gradient(165deg, color-mix(in srgb, var(--dk-bg-alt) 88%, transparent), color-mix(in srgb, var(--dk-border) 55%, var(--dk-bg-alt) 88%)),
		url("../../map/relief.webp");
	background-repeat: no-repeat;
	background-size: auto, auto, auto, cover;
	background-position: center, center, center, center 38%;
}

.dk-map__canvas {
	position: absolute;
	inset: 0;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.dk-map__canvas:focus-visible {
	outline: 2px solid var(--dk-brown);
	outline-offset: -4px;
}

.dk-map.is-zoomed .dk-map__canvas {
	touch-action: none;
}

.dk-map.is-dragging .dk-map__canvas {
	cursor: grabbing;
}

.dk-map.is-loading .dk-map__canvas {
	opacity: 0.55;
	transition: opacity 0.2s;
}

.dk-map__canvas > svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.dk-map__status,
.dk-map__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	margin: 0;
	padding: 24px;
	color: var(--dk-muted);
	font-size: 0.875rem;
	text-align: center;
}

.dk-map__fallback p {
	max-width: 36em;
	margin: 0;
}

.dk-map__fallback p:first-child {
	color: var(--dk-text);
	font-weight: 600;
}

.dk-map-svg path {
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
}

.dk-map-gemeinden path {
	fill: var(--dk-map-fill, var(--dk-v-none));
	fill-opacity: 0.84;
	stroke: color-mix(in srgb, var(--dk-map-fill, var(--dk-v-none)) 62%, var(--dk-text));
	stroke-width: 0.5px;
}

.dk-map:is([data-layer="kt"], [data-layer="sg"]) .dk-map-gemeinden path {
	stroke: var(--dk-map-fill, var(--dk-v-none));
	stroke-width: 0.8px;
}

.dk-map-lakes path {
	fill: color-mix(in srgb, var(--dk-v2) 20%, var(--dk-surface));
	stroke: color-mix(in srgb, var(--dk-v2) 38%, var(--dk-surface));
	stroke-width: 0.6px;
	pointer-events: none;
}

.dk-map-cantons path {
	fill: none;
	stroke: color-mix(in srgb, var(--dk-text) 58%, transparent);
	stroke-width: 1.1px;
	pointer-events: none;
}

.dk-map[data-layer="sg"] .dk-map-cantons path {
	stroke: color-mix(in srgb, var(--dk-text) 22%, transparent);
	stroke-width: 0.8px;
}

.dk-map-country path {
	fill: none;
	stroke: color-mix(in srgb, var(--dk-text) 72%, transparent);
	stroke-width: 1.5px;
	pointer-events: none;
}

.dk-map-relief {
	opacity: 0.95;
	pointer-events: none;
}

.dk-map-labels {
	pointer-events: none;
}

.dk-map-label circle {
	r: 3px;
	fill: var(--dk-text);
	stroke: var(--dk-surface);
	stroke-width: 1.5px;
}

.dk-map-label text {
	fill: var(--dk-text);
	font-family: var(--dk-font-sans);
	font-size: 12.5px;
	font-weight: 700;
	paint-order: stroke;
	stroke: color-mix(in srgb, var(--dk-surface) 92%, transparent);
	stroke-width: 3.5px;
	stroke-linejoin: round;
}

.dk-map-hl path {
	fill: none;
	pointer-events: none;
}

.dk-map-hl__hover {
	stroke: var(--dk-text);
	stroke-width: 2px;
}

.dk-map-hl__select {
	stroke: var(--dk-brown);
	stroke-width: 3px;
}

.dk-map-hl .dk-map-hl__pulse {
	fill: color-mix(in srgb, var(--dk-surface) 45%, transparent);
	stroke: var(--dk-brown);
	stroke-width: 3px;
	animation: dk-map-pulse 0.8s ease-out 3 both;
}

@keyframes dk-map-pulse {
	from {
		stroke-width: 12px;
		stroke-opacity: 0.1;
	}

	to {
		stroke-width: 3px;
		stroke-opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dk-map-hl .dk-map-hl__pulse {
		animation: none;
	}
}

.dk-map__controls {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dk-map__group,
.dk-map__legend-toggle,
.dk-map__locate,
.dk-map__tooltip {
	background: var(--dk-surface);
	border: 1px solid var(--dk-border);
	border-radius: var(--dk-radius);
	box-shadow: 0 1px 2px rgb(37 28 24 / 0.06), 0 4px 14px rgb(37 28 24 / 0.08);
}

.dk-map__group {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dk-map__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dk-text);
	cursor: pointer;
}

.dk-map__btn + .dk-map__btn {
	border-top: 1px solid var(--dk-border);
}

.dk-map__btn:hover,
.dk-map__btn[aria-expanded="true"] {
	background: var(--dk-brown-tint);
	color: var(--dk-brown);
}

.dk-map__btn:focus-visible {
	outline-offset: -3px;
}

.dk-map__locate {
	position: absolute;
	top: 12px;
	left: 58px;
	z-index: 4;
	width: 290px;
	padding: 12px;
}

.dk-map__locate[hidden] {
	display: none;
}

.dk-map__locate-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.dk-map__mine {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	margin-bottom: 10px;
	padding: 8px 10px;
	border: 1px solid var(--dk-brown);
	border-radius: var(--dk-radius-sm);
	background: var(--dk-brown-tint);
	color: var(--dk-brown);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.dk-map__mine[hidden] {
	display: none;
}

.dk-map__results {
	max-height: 240px;
	margin: 6px 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.dk-map__results:empty {
	display: none;
}

.dk-map__results button {
	display: grid;
	grid-template-columns: 3em 1fr auto;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	min-height: 38px;
	padding: 8px;
	border: 0;
	border-radius: var(--dk-radius-sm);
	background: none;
	color: var(--dk-text);
	font-size: 0.875rem;
	text-align: left;
	cursor: pointer;
}

.dk-map__results button:hover,
.dk-map__results button:focus-visible {
	background: var(--dk-brown-tint);
}

.dk-map__results small,
.dk-map__results-empty {
	color: var(--dk-muted);
	font-size: 0.8125rem;
}

.dk-map__results-empty {
	padding: 8px;
}

.dk-map__layers {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 3;
	max-width: calc(100% - 24px);
}

.dk-map__legend-toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 14px;
	color: var(--dk-text);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.dk-map__legend-toggle:hover,
.dk-map__legend-toggle[aria-expanded="true"] {
	border-color: var(--dk-brown-500);
}

.dk-map__legend {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 200px;
	padding: 12px 14px;
	background: color-mix(in srgb, var(--dk-surface) 96%, transparent);
	border: 1px solid var(--dk-border);
	border-radius: var(--dk-radius-lg);
	box-shadow: 0 1px 2px rgb(37 28 24 / 0.06), 0 4px 14px rgb(37 28 24 / 0.08);
}

.dk-map__legend.is-collapsed {
	display: none;
}

.dk-map__legend-title {
	margin: 0 0 6px;
	font-family: var(--dk-font-serif);
	font-size: 0.875rem;
	font-weight: 700;
}

.dk-map__legend-list {
	display: grid;
	gap: 3px;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	list-style: none;
}

.dk-map__legend-list li,
.dk-map__tooltip li {
	display: grid;
	grid-template-columns: 10px 1fr auto;
	align-items: center;
	gap: 8px;
	min-height: 20px;
}

.dk-map__share {
	color: var(--dk-muted);
	font-variant-numeric: tabular-nums;
}

.dk-map__credit {
	margin: 0;
	padding: 6px 12px 8px;
	color: var(--dk-muted);
	font-size: 0.6875rem;
	text-align: right;
}

.dk-map__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	min-width: 180px;
	max-width: 240px;
	padding: 10px 12px;
	font-size: 0.8125rem;
	pointer-events: none;
}

.dk-map__tooltip[hidden] {
	display: none;
}

.dk-map__tooltip-title {
	display: block;
	margin-bottom: 6px;
	font-family: var(--dk-font-serif);
	font-size: 0.9375rem;
}

.dk-map__tooltip ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-map__tooltip b {
	font-variant-numeric: tabular-nums;
}

.dk-map__tooltip-none {
	margin: 0;
	color: var(--dk-muted);
}

.dk-map__tooltip-count {
	margin: 6px 0 0;
	padding-top: 6px;
	border-top: 1px solid var(--dk-border);
	color: var(--dk-muted);
	font-size: 0.75rem;
}

.dk-map__panel-title {
	margin: 0 36px 2px 0;
	font-family: var(--dk-font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.dk-map__panel-sub {
	margin: 0;
	color: var(--dk-muted);
	font-size: 0.8125rem;
}

.dk-map__panel-kicker {
	margin: 14px 0 2px;
	color: var(--dk-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dk-map__panel-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-family: var(--dk-font-serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.dk-map__panel-top .dk-map__dot {
	width: 14px;
	height: 14px;
}

.dk-map__panel-top b {
	margin-left: auto;
	color: var(--dk-brown);
}

.dk-map__bars {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	list-style: none;
}

.dk-map__bars li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 3px 8px;
}

.dk-map__bars b {
	font-variant-numeric: tabular-nums;
}

.dk-map__bar {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(var(--dk-map-fill) 0 0) 0 0 / calc(var(--value, 0) * 1%) 100% no-repeat, var(--dk-bg-alt);
}

.dk-map__bar.is-none {
	--dk-map-fill: var(--dk-muted);
}

.dk-map__panel-none {
	margin: 14px 0 0;
	font-size: 0.875rem;
}

.dk-map__panel-count {
	margin: 12px 0 0;
	color: var(--dk-muted);
	font-size: 0.8125rem;
}

.dk-map__panel-actions {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}

@media (min-width: 960px) {
	.dk-map__panel {
		position: absolute;
		inset: 12px 12px auto auto;
		z-index: 6;
		width: 290px;
		max-height: calc(100% - 24px);
		margin: 0;
		padding: 16px 18px;
		box-shadow: 0 2px 4px rgb(37 28 24 / 0.06), 0 10px 28px rgb(37 28 24 / 0.14);
	}

	.dk-map__panel.is-left {
		inset: 12px auto auto 58px;
	}
}

@media (max-width: 959.98px) {
	.dk-map:not(.dk-map--mini) {
		margin-inline: calc(-1 * var(--dk-gutter));
	}

	.dk-map__stage {
		height: clamp(420px, 122cqi, 540px);
	}

	.dk-map__controls,
	.dk-map__group {
		flex-direction: row;
	}

	.dk-map__btn + .dk-map__btn {
		border-top: 0;
		border-left: 1px solid var(--dk-border);
	}

	.dk-map__locate {
		top: 64px;
		right: 12px;
		left: 12px;
		width: auto;
	}

	.dk-map__legend-toggle {
		display: none;
	}

	.dk-map__legend,
	.dk-map__legend.is-collapsed {
		position: static;
		display: block;
		width: auto;
		margin: 12px var(--dk-gutter) 0;
		box-shadow: var(--dk-shadow);
	}

	.dk-map__legend-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 16px;
	}

	.dk-map__credit {
		padding-inline: var(--dk-gutter);
	}

	.dk-map__panel-title {
		font-size: 1.375rem;
	}

	.dk-map__panel-actions {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

@media (pointer: coarse) {
	.dk-map__btn {
		width: 44px;
		height: 44px;
	}

	.dk-map__layers .dk-segmented__item,
	.dk-map__results button {
		min-height: 44px;
	}
}

@media (pointer: coarse) and (max-width: 959.98px) {
	.dk-map__locate {
		top: 70px;
	}
}

@media (pointer: coarse) and (min-width: 960px) {
	.dk-map__locate,
	.dk-map__panel.is-left {
		left: 66px;
	}
}

.dk-map--mini .dk-map__stage {
	height: auto;
	aspect-ratio: 1000 / 632;
	border-radius: var(--dk-radius);
}

.dk-map--mini .dk-map__canvas {
	cursor: default;
	touch-action: auto;
}

.dk-map--mini .dk-map-gemeinden path {
	fill: var(--dk-surface-warm);
	stroke: var(--dk-border);
	stroke-width: 0.35px;
}

.dk-map--mini .dk-map-gemeinden path.is-hl {
	fill: var(--dk-brown-500);
	stroke: color-mix(in srgb, var(--dk-brown-500) 75%, var(--dk-surface));
}

.dk-map--mini .dk-map-cantons path {
	stroke: color-mix(in srgb, var(--dk-muted) 45%, transparent);
	stroke-width: 0.6px;
}

.dk-map--mini .dk-map-country path {
	stroke: color-mix(in srgb, var(--dk-muted) 80%, transparent);
	stroke-width: 1px;
}

.dk-map--mini .dk-map-labels {
	display: none;
}

.dk-map--mini .dk-map__credit {
	padding: 4px 0 0;
	font-size: 0.625rem;
}