/* Ladesäulen – Ausgabe über [ladesaeulen]
--------------------------------------------------
   Karte, Marker und Popup wie bei [baustellen].
   Selektoren bewusst zweistufig (.sww-ladesaeulen davor): sowohl die
   Elementor-Kit-Styles als auch leaflet.css (wird erst zur Laufzeit
   nachgeladen) würden sonst gewinnen.
-------------------------------------------------- */

/* Volle Breite erzwingen: Anders als bei [baustellen] gibt es keine Tabelle,
   die dem Widget eine Breite gibt – in einem Elementor-Flex-Container mit
   Richtung "Reihe" schrumpft es sonst auf 0 px und die Karte bleibt leer.
   Gilt für das Widget selbst (Flex-Kind) und alle Wrapper darunter. */
.e-con .elementor-element.elementor-widget-shortcode:has(.sww-ladesaeulen) {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

.elementor-widget-shortcode:has(.sww-ladesaeulen) .elementor-widget-container,
.elementor-shortcode:has(> .sww-ladesaeulen) {
	width: 100%;
}

.sww-ladesaeulen {
	width: 100%;
	--sww-ladesaeulen-map-height: 700px;
	--sww-ladesaeulen-radius: 40px;
}

/* Karte
-------------------------------------------------- */

.sww-ladesaeulen .sww-ladesaeulen__map-wrap {
	position: relative;
	height: var(--sww-ladesaeulen-map-height);
	border-radius: var(--sww-ladesaeulen-radius);
	overflow: hidden;
	z-index: 10 !important;
}

.sww-ladesaeulen .sww-ladesaeulen__map {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.sww-ladesaeulen .leaflet-container {
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
}

/* Marker: Pin in secondary, Innenkreis in Weiß */
.sww-ladesaeulen .sww-ladesaeulen__marker.leaflet-div-icon {
	border: 0;
	background: none;
}

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

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

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

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

.sww-ladesaeulen .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-secondary);
}

.sww-ladesaeulen .sww-ladesaeulen__popup {
	display: flex;
	flex-direction: column;
}

.sww-ladesaeulen .sww-ladesaeulen__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 Ladesäulen angelegt sind */
.sww-ladesaeulen .sww-ladesaeulen__leer {
	margin: 0;
	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);
}

/* Breakpoints (Elementor: Laptop 1200, Tablet 1024, Mobil 767)
-------------------------------------------------- */

@media (max-width: 1200px) {

	.sww-ladesaeulen {
		--sww-ladesaeulen-map-height: 600px;
	}
}

@media (max-width: 1024px) {

	.sww-ladesaeulen {
		--sww-ladesaeulen-map-height: 500px;
	}
}

@media (max-width: 767px) {

	.sww-ladesaeulen {
		--sww-ladesaeulen-map-height: 400px;
		--sww-ladesaeulen-radius: 30px;
	}
}