/* Öffentliche Vektorkarten (ohne Prepros-Compile wirksam) */
/*
 * Marker: MapLibre anchor = center → 1×1-Root = exakte Koordinate.
 * Ring + Punkt: nur left/top + margin (kein translate auf dem Ring → kein Konflikt mit MapLibre-Transform).
 */

.lp-map-marker {
	position       : relative;
	width          : 1px;
	height         : 1px;
	overflow       : visible;
	pointer-events : none;
	line-height    : 0;
	font-size      : 0;
	/* Ring/Punkt nutzen eigenes perspective() in transform — Pin bleibt unbeeinflusst */
}

.lp-map-marker__ring {
	position           : absolute;
	left               : 50%;
	top                : 50%;
	width              : 44px;
	height             : 44px;
	margin             : -22px 0 0 -22px;
	border-radius      : 50%;
	box-shadow         :
		0 0 0 1px rgba(0, 0, 0, 0.35),
		0 5px 14px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
	z-index            : 0;
	pointer-events     : none;
	transform          : perspective(100px) rotateX(48deg) scale(1);
	transform-origin   : center center;
	animation          : lp-map-pulse-ring 1.15s ease-out infinite;
	animation-delay    : 0.85s;
	opacity            : 0;
	backface-visibility: hidden;
}

.lp-map-marker__dot {
	position           : absolute;
	left               : 50%;
	top                : 50%;
	width              : 11px;
	height             : 11px;
	margin             : -5.5px 0 0 -5.5px;
	border-radius      : 50%;
	background         : radial-gradient(
		120% 80% at 50% 28%,
		rgba(255, 255, 255, 0.22) 0%,
		rgba(255, 255, 255, 0) 45%
	), rgba(0, 0, 0, 0.52);
	box-shadow         :
		0 3px 6px rgba(0, 0, 0, 0.28),
		inset 0 1px 1px rgba(255, 255, 255, 0.18);
	z-index            : 1;
	pointer-events     : none;
	transform          : perspective(100px) rotateX(48deg);
	transform-origin   : center center;
	backface-visibility: hidden;
}

/*
 * Pin: scharfe Ecke = BL des Quadrats (border-radius … 0 unten links), nicht Mitte unten.
 * Linker Rand bei 50% + margin-top -34px → untere linke Ecke exakt auf Koordinate (wie Punkt/Ring).
 */
.lp-map-marker__pin {
	position           : absolute;
	left               : 50%;
	top                : 50%;
	width              : 34px;
	height             : 34px;
	margin-left        : 0;
	margin-top         : -34px;
	z-index            : 2;
	pointer-events     : none;
}

.lp-map-marker__pin-body {
	position           : relative;
	width              : 100%;
	height             : 100%;
	background         : #800000;
	border-radius      : 50% 50% 50% 0;
	transform          : rotate(-45deg);
	transform-origin   : left bottom;
	box-shadow         : 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* Kopf der Nadel: optisch zentrieren (Quadrat ist um -45° gedreht, Kugelkopf sitzt schräg) */
.lp-map-marker__pin-icon {
	position           : absolute;
	left               : 58%;
	top                : 48%;
	width              : 26px;
	height             : 26px;
	margin             : -13px 0 0 -13px;
	transform          : rotate(45deg) translate(-1px, 2px);
	display            : flex;
	align-items        : center;
	justify-content    : center;
	border-radius      : 50%;
	background         : #f7e9da;
	font-size          : 16px;
	line-height        : 1;
	color              : #800000;
	z-index            : 1;
}

.lp-map-marker__pin-body.bounce {
	animation-name       : lp-map-pin-bounce;
	animation-fill-mode  : both;
	animation-duration   : 0.85s;
}

@keyframes lp-map-pulse-ring {
	0% {
		transform: perspective(100px) rotateX(48deg) scale(0.08);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		transform: perspective(100px) rotateX(48deg) scale(1.42);
		opacity: 0;
	}
}

@keyframes lp-map-pin-bounce {
	0% {
		opacity: 0;
		transform: rotate(-45deg) translateY(-18px);
	}
	60% {
		opacity: 1;
		transform: rotate(-45deg) translateY(6px);
	}
	80% {
		transform: rotate(-45deg) translateY(-3px);
	}
	100% {
		transform: rotate(-45deg) translateY(0);
	}
}

.map-row .map-wrapper .map.map-loaded:before,
.map-row .map-wrapper .lazy-map.map-loaded:before,
.map-row .map-wrapper .overview-map.map-loaded:before,
.map-row .map-wrapper .lazy-overview-map.map-loaded:before {
	display : none;
}

.maplibregl-popup.map-overview-popup {
	pointer-events : none;
}

.maplibregl-popup.map-overview-popup .maplibregl-popup-content {
	background-color : #800000;
	color            : #fff;
	font-size        : 13px;
	padding          : 0 5px;
	margin           : 0;
	min-width        : auto;
	transform        : translate(0, -8px);
	white-space      : nowrap;
}

.maplibregl-popup.map-overview-popup .maplibregl-popup-tip {
	display : none;
}