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

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

/* 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;
}

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