/* Karte – Ausgabe über [karte]
--------------------------------------------------
   Selektoren bewusst zweistufig (.sww-karte davor): sowohl die
   Elementor-Kit-Styles als auch leaflet.css (wird erst zur Laufzeit
   nachgeladen) würden sonst gewinnen.

   Die Höhe kommt aus dem Shortcode-Attribut und steht als Inline-Variable
   am Wrapper.
-------------------------------------------------- */

.sww-karte {
	--sww-karte-height: 540px;
	--sww-karte-radius: 40px;
}

.sww-karte .sww-karte__wrap {
	position: relative;
	height: var(--sww-karte-height);
	border-radius: var(--sww-karte-radius);
	overflow: hidden;
	z-index: 10 !important;
}

.sww-karte .sww-karte__map {
	width: 100%;
	height: 100%;
}

/* Marker */
.sww-karte .sww-karte__marker.leaflet-div-icon {
	border: 0;
	background: none;
}

.sww-karte .sww-karte__marker svg {
	display: block;
	width: 24px;
	height: 34px;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.sww-karte .sww-karte__marker svg path {
	fill: var(--e-global-color-secondary);
}

.sww-karte .sww-karte__marker svg circle {
	fill: var(--e-global-color-ffffff, #fff);
}

/* Popup */
.sww-karte .leaflet-popup-content-wrapper {
	border-radius: 20px;
	background-color: var(--e-global-color-ffffff, #fff);
}

.sww-karte .leaflet-popup-content {
	margin: 14px 18px;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	color: var(--e-global-color-text);
}

.sww-karte .sww-karte__popup {
	display: flex;
	flex-direction: column;
}

.sww-karte .sww-karte__popup-titel {
	font-family: var(--e-global-typography-od2xcdl-font-family), Sans-serif;
	font-size: var(--e-global-typography-od2xcdl-font-size);
	font-weight: var(--e-global-typography-od2xcdl-font-weight);
	line-height: var(--e-global-typography-od2xcdl-line-height);
	color: var(--e-global-color-secondary);
}

/* Hinweis, wenn keine Koordinaten gefunden wurden (nur für Redakteure) */
.sww-karte .sww-karte__hinweis {
	margin: 0;
	padding: 20px;
	border-radius: var(--sww-karte-radius);
	background-color: var(--e-global-color-f7fbef);
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	color: var(--e-global-color-text);
}

@media (max-width: 767px) {

	.sww-karte {
		--sww-karte-radius: 30px;
	}
}