.ff-osm-map {
	width: 100%;
}

.ff-osm-map__canvas {
	width: 100%;
	height: 450px;
	z-index: 1;
	position: relative;
}

/* Farbfilter wird per JS auf die Tile-Ebene angewendet, nicht auf Marker/Popups */
.ff-osm-map__canvas .leaflet-tile-pane {
	transition: filter 0.2s ease;
}

.ff-osm-marker-icon {
	color: var(--ff-osm-marker-color, #c0392b);
	font-size: var(--ff-osm-marker-size, 32px);
	line-height: 1;
	display: block;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

/* Leaflet setzt standardmässig eine weisse Box mit Rahmen um jedes divIcon –
   die überschreiben wir hier, damit nur unser Icon sichtbar bleibt. */
.leaflet-div-icon.ff-osm-marker,
.ff-osm-marker {
	background: transparent !important;
	border: none !important;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.ff-osm-popup__title {
	display: block;
	margin: 0 0 4px;
	font-weight: 600;
}

.ff-osm-popup__desc {
	display: block;
	margin: 0 0 6px;
}

.ff-osm-popup__link {
	display: inline-block;
	margin-top: 4px;
	text-decoration: underline;
}

.ff-osm-popup__gmaps {
	display: block;
	margin-top: 6px;
	font-size: 0.85em;
	text-decoration: underline;
	opacity: 0.8;
}

.leaflet-popup-content-wrapper,
.maplibregl-popup-content {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.maplibregl-popup-content {
	padding: 14px 18px;
}

/* =========================================================
 * Zoom-Steuerung (+/-) — Grundstyling + Farb-Hooks für Normal/Hover/Aktiv
 * ========================================================= */

/* Leaflet: nutzt von Haus aus Text-Zeichen "+"/"−", direkt über color/background
   stylebar (die Elementor-Controls setzen color/background-color direkt). */
.leaflet-control-zoom a {
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* MapLibre: Standard-Icons sind Hintergrundbilder (nicht farbig steuerbar) -
   wir blenden sie aus und zeichnen stattdessen "+"/"−" als Text, damit die
   gleichen Farb-Controls wie bei Leaflet funktionieren. */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
	background-image: none !important;
}

.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-zoom-out {
	position: relative;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.maplibregl-ctrl-zoom-in::before,
.maplibregl-ctrl-zoom-out::before {
	content: '+';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: inherit;
	pointer-events: none;
}

.maplibregl-ctrl-zoom-out::before {
	content: '−';
}

.ff-osm-map__error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	background: rgba(255, 255, 255, 0.92);
	color: #b91c1c;
	font-size: 14px;
	line-height: 1.5;
	z-index: 5;
}