/* Emmcee Map Teaser */

.elementor-widget-emmcee-map-teaser,
.elementor-widget-emmcee-map-teaser > .elementor-widget-container {
	width: 100%;
	/* Ermöglicht Container Queries weiter unten: Das Stapeln von
	   Textfeld/Karte soll von der TATSÄCHLICHEN Breite dieses Widgets
	   abhängen, nicht von der Bildschirmbreite. Bei @media würde ein
	   schmal platziertes Widget (z. B. in einer halbbreiten Spalte)
	   auf großen Bildschirmen fälschlich in der Nebeneinander-Ansicht
	   bleiben, obwohl objektiv zu wenig Platz vorhanden ist. */
	container-type: inline-size;
	container-name: emmcee-map-teaser;
}

.emmcee-map-teaser {
	display: flex;
	align-items: stretch;
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
}

.emmcee-map-teaser * {
	box-sizing: border-box;
}

/* ---------- Textfeld ---------- */
.map-teaser-panel {
	flex: 1;
	background: #fcf4eb;
	border-radius: 20px;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
}

.map-teaser-heading {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 500;
	color: #433c38;
	line-height: 1.3;
}

.map-teaser-text {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.7;
	color: #5a5a5a;
}

.map-teaser-text p {
	margin: 0;
}

.map-teaser-legend {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.map-teaser-legend-item--reset {
	padding-bottom: 10px;
	margin-bottom: 2px;
	border-bottom: 1px solid rgba(67, 60, 56, 0.12);
}

.map-teaser-legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	border-radius: 8px;
	padding: 4px 6px;
	margin: -4px -6px;
	transition: background-color 0.15s ease;
}

.map-teaser-legend-item:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

.map-teaser-legend-item--active {
	background-color: rgba(160, 90, 60, 0.12);
}

.map-teaser-legend-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	flex-shrink: 0;
	line-height: 1;
}

.map-teaser-legend-icon i,
.map-teaser-legend-icon svg {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.map-teaser-legend-label {
	font-size: 14px;
	color: #433c38;
}

.map-teaser-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding: 13px 26px;
	border-radius: 999px;
	background-color: #a05a3c;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	width: fit-content;
	transition: background-color 0.2s ease;
}

.map-teaser-button:hover {
	background-color: #7c4429;
}

.map-teaser-button i,
.map-teaser-button svg {
	font-size: 13px;
	width: 13px;
	height: 13px;
	color: #ffffff;
}

/* ---------- Kartenbild ---------- */
.map-teaser-map {
	position: relative;
	/* Eigener Stacking-Context (position + z-index): ohne das hier
	   würden Leafletes interne Panes (Kacheln z-index 200, Marker 600,
	   Popups 700 ...) nicht innerhalb dieses Containers "eingesperrt"
	   bleiben, sondern ihre z-index-Werte mit Elementen AUSSERHALB
	   dieses Containers vergleichen (CSS-Stacking-Regel: z-index wirkt
	   nur innerhalb des nächsten Vorfahren, der selbst einen
	   Stacking-Context bildet). Ohne dieses z-index hier bildet
	   .map-teaser-map trotz position:relative KEINEN eigenen
	   Stacking-Context, wodurch Leafletes hohe interne z-index-Werte
	   nach oben "durchschlagen" und selbst über Geschwister-Elemente
	   mit eigenem z-index (wie die Namens-Labels) gemalt werden.
	*/
	z-index: 0;
	width: 55%;
	border-radius: 20px;
	overflow: hidden;
	flex-shrink: 0;
}

.map-teaser-map-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #e8e2d6;
	overflow: hidden !important;
}

.map-teaser-map-canvas .leaflet-tile-pane {
	filter: saturate(0.9);
}

.map-teaser-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #ffffff;
	color: #433c38;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.map-teaser-pin i,
.map-teaser-pin svg {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: inherit;
	fill: currentColor;
}

.map-teaser-pin--small {
	width: 24px;
	height: 24px;
}

.map-teaser-pin--large {
	width: 48px;
	height: 48px;
}

.map-teaser-pin-label {
	--map-teaser-label-bg: #ffffff;
	position: absolute;
	transform: translateY(-50%);
	background-color: var( --map-teaser-label-bg );
	color: #433c38;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	z-index: 1000;
}

.map-teaser-pin-label--left {
	left: 8px;
}

.map-teaser-pin-label--right {
	right: 8px;
}

.map-teaser-callout-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999;
}

/* ---------- Responsive ---------- */

/* Fallback für ältere Browser ohne Container-Query-Unterstützung:
   reagiert auf die Bildschirmbreite. Wird von der Container Query
   direkt darunter in modernen Browsern überschrieben/ergänzt, sobald
   das Widget selbst schmal genug ist – unabhängig von der
   Bildschirmbreite (wichtig bei Platzierung in einer schmalen Spalte
   auf einem großen Bildschirm, siehe Kommentar oben beim Wrapper). */
@media (max-width: 900px) {
	.emmcee-map-teaser {
		flex-direction: column;
		height: auto !important;
	}
	.map-teaser-map {
		width: 100%;
		height: 320px;
	}
}

@container emmcee-map-teaser (max-width: 700px) {
	.emmcee-map-teaser {
		flex-direction: column;
		height: auto !important;
	}
	.map-teaser-map {
		width: 100% !important;
		height: 320px;
	}
}

@media (max-width: 600px) {
	.map-teaser-panel {
		padding: 28px 24px;
	}
	.map-teaser-heading {
		font-size: 22px;
	}
	.map-teaser-map {
		height: 260px;
	}
}