.swsk-map { position: relative; width: 100%; margin: 0 auto; }
.swsk-map__bg { display: block; width: 100%; height: auto; }

.swsk-hotspot { position: absolute; transform: translate(-50%, -50%); line-height: 0; cursor: pointer; z-index: 1; }
.swsk-hotspot > img { display: block; width: 100%; height: auto; transition: transform .15s ease; }
.swsk-hotspot:hover, .swsk-hotspot:focus-visible, .swsk-hotspot.is-open { z-index: 10; }
.swsk-hotspot:hover > img, .swsk-hotspot:focus-visible > img, .swsk-hotspot.is-open > img { transform: scale(1.15); }
.swsk-hotspot:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.swsk-tooltip {
	position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
	width: max-content; max-width: 240px; padding: 12px 14px;
	background: #fff; color: #222; border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
	font-size: 14px; line-height: 1.45; text-align: left; cursor: auto;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility .15s;
}
/* Usynlig bro så musen kan nå over i tooltippen uden at den lukker */
.swsk-tooltip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.swsk-tooltip--below { bottom: auto; top: calc(100% + 10px); }
.swsk-tooltip--below::after { top: auto; bottom: 100%; }
.swsk-tooltip--left { left: 0; transform: none; }
.swsk-tooltip--right { left: auto; right: 0; transform: none; }

@media (hover: hover) {
	.swsk-hotspot:hover .swsk-tooltip { opacity: 1; visibility: visible; pointer-events: auto; }
}
.swsk-hotspot:focus-visible .swsk-tooltip,
.swsk-hotspot.is-open .swsk-tooltip { opacity: 1; visibility: visible; pointer-events: auto; }

.swsk-tooltip__title { display: block; margin-bottom: 4px; font-size: 15px; }
.swsk-tooltip__text p { margin: 0 0 6px; }
.swsk-tooltip__link { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.swsk-hotspot > img, .swsk-tooltip { transition: none; }
}