.poi-map {
	width: 100%;
	min-height: 300px;
	z-index: 0; /* unter Theme-Overlays/Sticky-Headers halten */
}

.poi-map-filter {
	background: #fff;
	padding: 8px 10px;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.3 );
	font: 13px/1.5 sans-serif;
	max-height: 320px;
	overflow: auto;
}

.poi-map-filter label {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	white-space: nowrap;
}

.poi-map-filter input {
	margin: 0 2px 0 0;
}

.poi-map-filter__count {
	margin-left: auto;
	padding-left: 6px;
	color: #787c82;
	font-variant-numeric: tabular-nums;
}

.poi-map-filter__master {
	font-weight: 700;
}

.poi-map-filter__sep {
	border: 0;
	border-top: 1px solid #e0e0e0;
	margin: 6px 0;
}

/* Höhere Spezifität als Leaflets ".leaflet-bar a { display:block }". */
.leaflet-bar a.poi-reset__btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.poi-reset__btn svg {
	display: block;
}

.poi-map-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid #fff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
}

/* POI-Marker mit Font-Awesome-Icon (farbiger Kreis) */
.poi-divicon {
	background: none;
	border: 0;
}

.poi-marker {
	/* zähmt das ACSS-[data-icon]-Sizing der FA-SVGs auf Leaflet-Markern */
	--icon-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.4 );
	color: #fff;
	font-size: 15px; /* Fallback ohne ACSS (FA = 1em) */
	line-height: 1;
}

.poi-marker--nearby {
	--icon-size: 0.72rem;
	opacity: 0.6;
	width: 24px;
	height: 24px;
	font-size: 12px;
}

/* Straßen-Detailseite */
.poi-strasse-fakten {
	border-collapse: collapse;
	margin: 1em 0;
}

.poi-strasse-fakten th {
	text-align: left;
	padding: 0.3em 0.9em 0.3em 0;
	white-space: nowrap;
	vertical-align: top;
}

.poi-strasse-fakten td {
	padding: 0.3em 0;
}

.poi-strasse-poiliste {
	margin: 0 0 1em;
}

/* Fokus-Tooltip: dauerhaft offenes Label des dargestellten POI (Single-POI-Karte) */
.leaflet-tooltip.poi-tip--focus {
	font-weight: 600;
	padding: 3px 8px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: #1f2937;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
}
.leaflet-tooltip.poi-tip--focus::before { border-top-color: #fff; }

/* ===== [poi_karte_hero] – Karte mit überlappendem Schild ===== */
.poi-karte-hero {
	position: relative;
}
.poi-karte-hero.has-schild {
	/* Platz links, damit das Schild hineinragen kann, ohne aus der Seite zu laufen */
	padding-inline-start: clamp( 2.5rem, 6%, 5rem );
}
.poi-karte-hero__map .poi-map,
.poi-karte-hero__map .leaflet-container {
	border-radius: 20px;
	box-shadow: 0 22px 50px -16px rgba( 15, 40, 80, 0.45 );
	overflow: hidden;
}
.poi-karte-hero__schild {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	transform: translateY( -50% ) rotate( -4deg );
	inline-size: clamp( 150px, 24%, 300px );
	margin: 0;
	z-index: 5;
	filter: drop-shadow( 0 14px 22px rgba( 0, 0, 0, 0.4 ) );
	transition: transform 0.3s ease;
}
.poi-karte-hero__schild img,
.poi-karte-hero__schild .poi-ortstafel {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.poi-karte-hero:hover .poi-karte-hero__schild {
	transform: translateY( -50% ) rotate( -2deg ) scale( 1.03 );
}

/* Schild-Position über Modifier (z. B. große Stadtteilkarte: unten links, damit
 * die Zoom-/Layer-Buttons oben links frei bleiben). */
.poi-karte-hero--unten-links .poi-karte-hero__schild {
	inset-block-start: auto;
	inset-block-end: 1rem;
	transform: rotate( -4deg );
}
.poi-karte-hero--unten-links:hover .poi-karte-hero__schild {
	transform: rotate( -2deg ) scale( 1.03 );
}
.poi-karte-hero--oben-links .poi-karte-hero__schild {
	inset-block-start: 1rem;
	inset-block-end: auto;
	transform: rotate( -4deg );
}
.poi-karte-hero--oben-links:hover .poi-karte-hero__schild {
	transform: rotate( -2deg ) scale( 1.03 );
}

@media ( max-width: 768px ) {
	.poi-karte-hero.has-schild {
		padding-inline-start: 0;
	}
	/* Auf Mobil/schmal UNTEN links über die Karte legen statt seitlich rausragen
	 * (oben links sitzen die Zoom-Buttons; unten rechts die Attribution). */
	.poi-karte-hero__schild {
		inline-size: 42%;
		inset-inline-start: 0.6rem;
		inset-block-start: auto;
		inset-block-end: 0.6rem;
		transform: rotate( -4deg );
	}
	.poi-karte-hero:hover .poi-karte-hero__schild {
		transform: rotate( -2deg ) scale( 1.03 );
	}
}

/* ===== Stadtweite Übersicht: Ortstafel-Marker je Stadtteil ===== */
.poi-ot-marker,
.poi-ot-label {
	background: transparent; /* Leaflet-divIcon-Default (weißer Kasten) aus */
	border: 0;
	cursor: pointer;
}
.poi-ot-marker img {
	display: block;
	/* Größe steuert die Leaflet-iconSize; !important schlägt Leaflets
	 * „.leaflet-marker-pane img { width:auto }" (sonst Originalgröße ~300px). */
	width: 100% !important;
	height: auto !important;
	/* Theme/ACSS runden Bilder global ab – die Tafel hat ihre eigene Form. */
	border-radius: 0 !important;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.4 ) );
	transform-origin: center bottom;
	transition: transform 0.15s ease;
}
/* Klein in der Übersicht, beim Drüberfahren lesbar groß (16 px → 160 px;
 * Quelle ist „medium" ≈ 300 px, bleibt also scharf). --zoom setzt poi-map.js,
 * sobald die Maus irgendwo im Stadtteil steht (nicht erst überm Schild). */
.poi-ot-marker:hover img,
.poi-ot-marker--zoom img {
	transform: scale( 10 );
}
.poi-ot-label {
	font-weight: 700;
	color: #1a4971;
	text-align: center;
	white-space: nowrap;
	text-shadow: 0 0 4px #fff, 0 1px 2px #fff;
}

/* Lade-/Fehlerhinweis über der Karte (setStatus in poi-map.js). Liegt über
 * den Kacheln, aber unter den Leaflet-Controls; beim Laden nicht klickbar. */
.poi-map__status {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX( -50% );
	max-width: calc( 100% - 24px );
	z-index: 800;
	background: rgba( 255, 255, 255, 0.92 );
	color: #1a202c;
	font-size: 14px;
	line-height: 1.4;
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.poi-map__status--error {
	background: #fbeaea;
	color: #8a1c1c;
	pointer-events: auto;
	white-space: normal;
}