/* ============================================================
   Vertretungen-Karte – Frontend
   Hohe Spezifität + !important an kritischen Stellen, damit
   Theme-Styles das Popup nicht überschreiben.
   ============================================================ */

.vk-map {
	width: 100% !important;
	border-radius: 8px;
	overflow: hidden;
	z-index: 0;
	position: relative !important;
}

/* Marker */
.leaflet-marker-icon.vk-marker { background: none !important; border: none !important; }
.vk-marker svg {
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
	transition: transform .12s ease;
	transform-origin: 50% 100%;
}
.vk-marker:hover svg { transform: scale(1.18); }

/* Symbol- und Bild-Marker: gleicher Schatten + Hover wie das Dreieck */
.vk-marker.vk-marker-symbol svg,
.vk-marker.vk-marker-image img {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
	transition: transform .12s ease;
	transform-origin: 50% 100%;
}
.vk-marker.vk-marker-symbol:hover svg,
.vk-marker.vk-marker-image:hover img { transform: scale(1.15); }

/* ---------- Zentriertes Modal mit abgedunkeltem Karten-Overlay ---------- */
.vk-overlay {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	background: rgba(0, 0, 0, .45) !important;   /* abgedunkelter Hintergrund */
	z-index: 1000 !important;                    /* über Leaflet-Panes/Controls */
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
}
.vk-overlay.vk-open {
	opacity: 1;
	visibility: visible;
}

.vk-overlay .vk-modal {
	position: relative !important;
	background: #fff !important;
	color: #1a1a1a !important;
	border-radius: 14px !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .28) !important;
	width: min(420px, 100%) !important;
	max-height: calc(100% - 40px) !important;
	overflow: auto !important;
	transform: translateY(8px) scale(.98);
	transition: transform .18s ease;
}
.vk-overlay.vk-open .vk-modal { transform: translateY(0) scale(1); }

.vk-overlay .vk-modal-body {
	padding: 24px 26px !important;
	line-height: 1.55 !important;
	font-size: 14px !important;
}

/* Schließen-X mit großzügigem Padding */
.vk-overlay .vk-modal-close {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #999 !important;
	font-size: 26px !important;
	line-height: 40px !important;
	cursor: pointer !important;
	border-radius: 8px !important;
	transition: color .12s ease, background .12s ease !important;
}
.vk-overlay .vk-modal-close:hover {
	color: #333 !important;
	background: rgba(0, 0, 0, .05) !important;
}

/* Inhalt */
.vk-popup .vk-head {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 0 14px !important;
}
.vk-popup .vk-flag {
	flex: 0 0 auto !important;
	width: 30px !important;
	height: 20px !important;
	border-radius: 3px !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) !important;
	object-fit: cover !important;
	max-width: none !important;
}
.vk-popup h3 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #1a1a1a !important;
}
.vk-popup .vk-address {
	font-style: normal !important;
	color: #333 !important;
	margin: 0 !important;
}

/* Zeilen mit Icon + Wert */
.vk-popup .vk-line {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 0 0 10px !important;
}
.vk-popup .vk-line:last-child { margin-bottom: 0 !important; }
.vk-popup .vk-contact {
	margin-top: 14px !important;
	padding-top: 14px !important;
	border-top: 1px solid #eee !important;
}
.vk-popup .vk-fi {
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #e74010 !important;          /* Akzentfarbe für SVG-Icons */
	margin-top: 1px !important;
}
.vk-popup .vk-fi svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}
.vk-popup .vk-fi img {
	width: 20px !important;
	height: 20px !important;
	object-fit: contain !important;
	display: block !important;
}
.vk-popup .vk-val {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow-wrap: anywhere !important;
	color: #333 !important;
}
.vk-popup .vk-line-address .vk-address { flex: 1 1 auto !important; }
.vk-popup .vk-val a { color: inherit !important; text-decoration: none; }
.vk-popup .vk-val a:hover { text-decoration: underline; }