/**
 * POI/Stadtteil – Inhalts-Design, ACSS-nativ.
 *
 * Nutzt Automatic.css-Variablen (Farben/Spacing/Text/Radius) mit Fallbacks,
 * sodass es sich in ein ACSS-Theme einfügt und über das ACSS-Dashboard
 * umstellbar ist – aber auch ohne ACSS funktioniert.
 *
 * Wichtig (Icons): Font Awesome stempelt im SVG-Modus `data-icon` in jedes
 * SVG; ACSS' Icon-Framework greift daraufhin auf JEDES [data-icon] und zwingt
 * ihm --icon-size (Default M = 32px) auf. Wir setzen --icon-size daher gezielt
 * auf den Icon-Containern – das ist der ACSS-konforme Weg, statt mit !important
 * gegen die SVG-Größe zu kämpfen.
 */
.poi-content,
.poi-hero,
.poi-steckbrief,
.poi-fakten,
/* Design-Tokens global definieren, damit ALLE poi-* Komponenten sie erben
 * (poi-grid/poi-card/poi-strassen/poi-steckbrief … hängen NICHT in .poi-content).
 * Werte mappen auf ACSS-Variablen mit robusten Fallbacks. */
:root {
	/* Farben – ACSS-4-Palette (Fallbacks nur für den Betrieb ohne ACSS) */
	--poi-accent:   var( --primary, #2b6cb0 );
	--poi-ink:      var( --base-ultra-dark, #111827 );
	--poi-muted:    var( --base-semi-dark, #6b7280 );
	--poi-line:     var( --base-semi-light, #e5e7eb );
	--poi-soft:     var( --base-ultra-light, #f3f6fb );
	--poi-card-bg:  var( --white, #fff );
	--poi-good:     var( --success, #1a7f47 );
	--poi-bad:      var( --danger, #b42318 );
	--poi-warn-bg:  var( --warning-ultra-light, #fff4d6 );
	--poi-warn-ink: var( --warning-ultra-dark, #6b5500 );
	/* Typo – ACSS-Skala: Abschnittstitel, Zahlen-Displays, Fließtext */
	--poi-h:       var( --h3, 1.3rem );
	--poi-display: var( --text-xl, 1.45rem );
	--poi-lh:      var( --text-line-height, 1.65 );
	/* Raum/Form – ein Rhythmus für alle Blockteile */
	--poi-flow:    var( --content-gap, var( --space-l, 2rem ) );
	--poi-radius:  var( --radius, 14px );
}

/* Hero */
.poi-hero {
	margin-block: 0 var( --poi-flow );
}

.poi-hero__eyebrow {
	font-size: var( --text-xs, 0.75rem );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --poi-accent );
}

.poi-hero__title {
	margin: 0.15em 0 0.25em;
	font-size: var( --text-xxl, clamp( 1.9rem, 4vw, 2.6rem ) );
	line-height: 1.08;
	color: var( --poi-ink );
}

.poi-hero__meta {
	color: var( --poi-muted );
	font-size: var( --text-s, 0.95rem );
}

/* Steckbrief (Fakten als Definitionsliste) */
.poi-steckbrief {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 155px, 1fr ) );
	gap: var( --space-s, 0.9rem );
	margin-block: var( --poi-flow );
}

.poi-steckbrief__item {
	display: flex;
	flex-direction: column-reverse; /* Wert groß oben, Label klein darunter */
	justify-content: space-between; /* Label oben, Wert unten – einheitlich verankert */
	gap: var( --space-xs, 4px );
	min-width: 0; /* erlaubt Umbruch statt Überlauf in die Nachbarkachel */
	padding: var( --space-s, 0.9rem ) var( --space-m, 1.25rem );
	background: var( --poi-soft );
	border: 1px solid var( --poi-line );
	border-radius: var( --poi-radius );
	overflow: hidden;
}

.poi-steckbrief__value {
	margin: 0;
	font-size: var( --poi-display );
	font-weight: 700;
	line-height: 1.1;
	color: var( --poi-accent );
	overflow-wrap: anywhere; /* lange Werte (z. B. „45134, 45136") umbrechen */
}

.poi-steckbrief__unit {
	font-size: var( --text-xs, 0.8rem );
	font-weight: 600;
}

.poi-steckbrief__label {
	font-size: var( --text-xs, 0.75rem );
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --poi-muted );
	overflow-wrap: anywhere;
	hyphens: auto; /* lange Wörter wie „Bevölkerungsdichte" sauber trennen */
	hyphenate-limit-chars: 10 5 4; /* keine Fitzel-Trennungen (BE-VÖL-KE…) */
}

.poi-steckbrief__note {
	display: block;
	font-size: var( --text-xs, 0.7rem );
	font-weight: 400;
	color: var( --poi-muted );
}

/* Karte */
.poi-content .poi-map {
	margin-block: var( --poi-flow );
	border: 1px solid var( --poi-line );
	border-radius: var( --poi-radius );
	overflow: hidden;
}

/* Fließtext-Sektionen */
.poi-prose {
	margin-block: var( --poi-flow );
}

.poi-prose__heading {
	/* Abstand nach OBEN zum Vorabsatz (Namensherkunft/Geschichte folgen je
	 * einem Fließtext) – größer als der Abstand zum eigenen Folgeabsatz. */
	margin: var( --space-l, 2rem ) 0 var( --space-s, 0.6em );
	font-size: var( --poi-h );
	color: var( --poi-ink );
}
/* Erste Überschrift im Block braucht keinen Vorlauf. */
.poi-prose > .poi-prose__heading:first-child,
.poi-prose__body > .poi-prose__heading:first-child {
	margin-top: 0;
}

.poi-prose__body {
	line-height: var( --poi-lh );
}

.poi-prose__body > :first-child {
	margin-top: 0;
}

/* Straßennetz-Bezüge */
.poi-bezuege {
	margin-block: var( --poi-flow );
}

.poi-bezuege__title {
	margin: 0 0 var( --space-s, 0.6em );
	font-size: var( --poi-h );
	color: var( --poi-ink );
}

.poi-bezuege__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var( --space-xs, 6px ) var( --space-m, 1rem );
	margin: 0;
}

.poi-bezuege__label {
	font-weight: 600;
	color: var( --poi-muted );
}

.poi-bezuege__icon {
	--icon-size: 1rem;
	width: 1.1em;
	color: var( --poi-accent );
	text-align: center;
}

.poi-bezuege__value {
	margin: 0;
}

/* Straßen-Grid (Stadtteil-Startseite, mit Straßenschild-Foto) */
.poi-strassen {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: var( --space-s, 0.9rem );
	margin-block: var( --poi-flow );
	padding: 0;
	list-style: none;
}

.poi-strassen__link {
	display: flex;
	flex-direction: column;
	gap: var( --space-xs, 6px );
	text-decoration: none;
	color: var( --base-ultra-dark, #111827 );
}

.poi-strassen__img {
	display: block;
	width: 100%;
	/* Ortstafeln sind genormt 3:2 – Box exakt so, sonst werden die Schilder
	 * beschnitten und man liest nur Namensfragmente. contain = ganzes Schild. */
	aspect-ratio: 3 / 2;
	object-fit: contain;
	border-radius: var( --poi-radius );
	background: var( --base-ultra-light, #f3f6fb );
}

.poi-strassen__name {
	font-weight: 600;
}

.poi-strassen-gruppe {
	margin-block: var( --poi-flow );
}

/* POI-Grid (nach Kategorie) */
.poi-grid {
	margin-block: var( --poi-flow );
}

.poi-grid__titel {
	font-size: var( --poi-h );
	color: var( --base-ultra-dark, #111827 );
	margin: 0 0 var( --space-s, 0.6em );
}

.poi-grid__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: var( --space-s, 0.9rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* POI-Liste */
.poi-pois {
	margin-block: var( --poi-flow );
}

.poi-pois__title {
	margin: 0 0 var( --space-s, 0.6em );
	font-size: var( --poi-h );
	color: var( --poi-ink );
}

.poi-pois__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: var( --space-s, 0.9rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.poi-card {
	display: flex;
	align-items: center;
	gap: var( --space-xs, 10px );
	padding: var( --space-xs, 10px ) var( --space-s, 12px );
	background: var( --poi-card-bg );
	border: 1px solid var( --poi-line );
	border-radius: var( --poi-radius );
}

.poi-card__dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: var( --radius-circle, 50% );
	background: var( --poi-card-color, var( --poi-accent ) );
}

.poi-card__icon {
	/* zähmt das ACSS-[data-icon]-Sizing der FA-SVGs (siehe Kopf) */
	--icon-size: 1rem;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var( --radius-circle, 50% );
	background: var( --poi-card-color, var( --poi-accent ) );
	color: var( --white, #fff );
	font-size: 1rem; /* Fallback ohne ACSS (FA-Webfont/SVG = 1em) */
}

.poi-card__link {
	font-weight: 600;
	color: var( --poi-ink );
	text-decoration: none;
}

.poi-card__link:hover {
	color: var( --poi-accent );
}

.poi-card__cat {
	margin-left: auto;
	font-size: var( --text-xs, 0.72rem );
	color: var( --poi-muted );
	white-space: nowrap;
}

/* In der Nähe (Nahziele) */
.poi-nahziele {
	margin-block: var( --poi-flow );
}

.poi-nahziele__title {
	font-size: var( --poi-h );
	margin: 0 0 var( --space-s, 0.6em );
}

.poi-nahziele__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --space-xs, 0.4rem );
}

.poi-nahziel {
	display: grid;
	grid-template-columns: minmax( 9rem, auto ) 1fr auto;
	gap: 0.4rem 1rem;
	align-items: baseline;
	padding: 0.5rem 0;
	border-bottom: 1px solid var( --poi-line );
}

.poi-nahziel__cat {
	display: inline-flex;          /* Icon links neben der Beschriftung */
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	color: var( --poi-ink );
}

.poi-nahziel__icon {
	/* ACSS-[data-icon]-Sizing (Default 32px) auf Textgröße zähmen + inline */
	--icon-size: 1em;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: -0.125em;
	color: var( --poi-nahziel-color, var( --poi-accent ) );
}

.poi-nahziel__dist {
	color: var( --poi-muted );
	font-size: var( --text-xs, 0.85rem );
	white-space: nowrap;
}

.poi-nahziel__badge {
	display: inline-block;
	padding: 0.05em 0.5em;
	border-radius: 999px;
	background: var( --poi-soft );
	font-size: 0.85em;
}

.poi-nahziel__badge--schaetzung {
	background: var( --poi-warn-bg );
	/* Dunkles Ocker: ≥4,5:1 Kontrast (WCAG AA) auf dem hellen Gelb. */
	color: var( --poi-warn-ink );
}

@media ( max-width: 640px ) {
	.poi-nahziel {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
}

/* In X Gehminuten erreichbar (Isochrone-Liste) */
.poi-erreichbar {
	margin-block: var( --poi-flow );
}

.poi-erreichbar__title {
	font-size: var( --poi-h );
	margin: 0 0 var( --space-s, 0.6em );
}

.poi-erreichbar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --space-xs, 0.5rem );
}

.poi-erreichbar__item {
	display: grid;
	grid-template-columns: minmax( 10rem, auto ) 1fr;
	gap: 0.2rem 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var( --poi-line );
}

.poi-erreichbar__cat {
	display: inline-flex;          /* Icon links neben der Beschriftung */
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	color: var( --poi-ink );
}

.poi-erreichbar__icon {
	--icon-size: 1em;              /* ACSS-[data-icon]-Sizing zähmen */
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: -0.125em;
	color: var( --poi-nahziel-color, var( --poi-accent ) );
}

.poi-erreichbar__count {
	color: var( --poi-muted );
	font-weight: 400;
}

.poi-erreichbar__more {
	color: var( --poi-muted );
	font-size: var( --text-xs, 0.85rem );
}

@media ( max-width: 640px ) {
	.poi-erreichbar__item {
		grid-template-columns: 1fr;
	}
}

/* POI-Fakten: gepflegte Karte mit Zeilentrennern (Textwerte – passend zur
 * „Straßen-Optik", aber NICHT die großen Zahlen-Stat-Karten). */
.poi-fakten {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: baseline;
	margin-block: var( --poi-flow );
	padding: 0.25rem var( --space-m, 1.25rem );
	background: var( --poi-soft );
	border: 1px solid var( --poi-line );
	border-radius: var( --poi-radius );
}

.poi-fakten__row {
	display: contents;
}

.poi-fakten__label,
.poi-fakten__value {
	padding: 0.7rem 0;
	border-top: 1px solid var( --poi-line );
}

/* erste Zeile ohne Trennlinie */
.poi-fakten__row:first-child .poi-fakten__label,
.poi-fakten__row:first-child .poi-fakten__value {
	border-top: 0;
}

.poi-fakten__label {
	padding-inline-end: 1.5rem;
	font-size: var( --text-xs, 0.75rem );
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --poi-muted );
}

.poi-fakten__value {
	margin: 0;
	font-weight: 600;
	color: var( --poi-ink );
}

.poi-fakten__value a {
	color: var( --poi-accent );
}

@media ( max-width: 540px ) {
	.poi-fakten {
		grid-template-columns: 1fr;
	}
	.poi-fakten__row {
		display: block;
		padding: 0.6rem 0;
		border-top: 1px solid var( --poi-line );
	}
	.poi-fakten__row:first-child {
		border-top: 0;
	}
	.poi-fakten__label,
	.poi-fakten__value {
		padding: 0;
		border-top: 0;
	}
}

/* Single-POI: generierter Beschreibungstext (volle Breite wie der Rest –
 * eine eigene Lesebreite gehört an den Bricks-Container, nicht an einen Block). */
.poi-single-beschreibung { line-height: var( --poi-lh ); }
.poi-single-beschreibung p { margin: 0; }

/* Straße: generierte Beschreibung – volle Breite + Absatzabstand
 * (Lage/Fakten, Straßennetz, POIs stehen sonst ohne Luft aneinander). */
.poi-strasse-beschreibung {
	line-height: var( --poi-lh );
}
.poi-strasse-beschreibung p {
	margin: 0;
}
.poi-strasse-beschreibung p + p {
	margin-top: var( --space-s, 0.85rem );
}
/* Abstand zwischen redaktionellem und generiertem Block (getrennte divs). */
.poi-strasse-beschreibung + .poi-strasse-beschreibung {
	margin-top: var( --space-s, 0.85rem );
}

/* Stadtteil: Nachbarn-Zeile + Prosa */
.poi-nachbarn {
	margin-block: var( --poi-flow );
	font-size: var( --text-s, 0.95rem );
}
.poi-nachbarn__label {
	font-weight: 600;
	color: var( --poi-muted );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var( --text-xs, 0.75rem );
}
.poi-nachbarn__list a { color: var( --poi-accent ); }
.poi-nachbarn .poi-nachbar--extern { color: var( --poi-ink ); }
/* Volle Breite – die Breite steuerst du über den Bricks-Container; hier nur Zeilenhöhe. */
.poi-stadtteil-beschreibung { line-height: var( --poi-lh ); }

/* Stadtteil: Versorgungs-Kennzahlen */
.poi-versorgung {
	margin-block: var( --poi-flow );
}
.poi-versorgung__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	border: 1px solid var( --poi-line );
	border-radius: var( --poi-radius );
	overflow: hidden;
}
.poi-versorgung__item {
	display: grid;
	grid-template-columns: 3.5rem 1fr auto;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding: 0.7rem var( --space-m, 1.25rem );
	border-top: 1px solid var( --poi-line );
}
.poi-versorgung__item:first-child {
	border-top: 0;
}
.poi-versorgung__count {
	font-size: var( --poi-display );
	font-weight: 700;
	line-height: 1;
	color: var( --poi-accent );
	text-align: right;
}
.poi-versorgung__cat {
	font-weight: 600;
	color: var( --poi-ink );
}
.poi-versorgung__ratio {
	font-size: var( --text-s, 0.85rem );
	color: var( --poi-muted );
	white-space: nowrap;
}
@media ( max-width: 480px ) {
	.poi-versorgung__item {
		grid-template-columns: 3rem 1fr;
	}
	.poi-versorgung__ratio {
		grid-column: 2;
		white-space: normal;
	}
}

/* ===== Stadtteile-Kacheln (Mega-Menü) – als saubere Karten ===== */
.poi-stadtteile {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 132px, 1fr ) );
	gap: var( --space-s, 0.9rem );
	margin: 0;
	padding: 0;
	list-style: none;
}
.poi-stadtteile__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem;
	text-decoration: none;
	color: var( --poi-ink );
	background: var( --poi-card-bg );
	border: 1px solid var( --poi-line );
	border-radius: var( --poi-radius );
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.poi-stadtteile__link:hover {
	border-color: var( --poi-accent );
	box-shadow: 0 8px 20px -12px rgba( 15, 40, 80, 0.45 );
	transform: translateY( -2px );
}
.poi-stadtteile__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}
.poi-stadtteile__name {
	font-weight: 600;
	font-size: var( --text-s, 0.9rem );
	text-align: center;
	line-height: 1.2;
}
/* aktueller Stadtteil: dezent über Rahmen + Hintergrund, kein harter Outline ums Schild */
.poi-stadtteile__item.is-current .poi-stadtteile__link {
	border-color: var( --poi-accent );
	background: var( --poi-soft );
}
.poi-stadtteile__item.is-current .poi-stadtteile__name {
	color: var( --poi-accent );
}

/* Straßenverzeichnis-Teaser-Link */
.poi-strassen-link {
	display: inline-block;
	font-weight: 600;
	color: var( --poi-accent );
	text-decoration: none;
}
.poi-strassen-link:hover {
	text-decoration: underline;
}

/* Utility: erst ab Desktop sichtbar (z. B. Karten-Teaser im Mega-Menü) */
.poi-wide-only { display: none; }
@media ( min-width: 1024px ) {
	.poi-wide-only { display: block; }
}

/* ===== Rekorde (Superlative aus den Straßendaten) ===== */
.poi-rekorde__list {
	list-style: none;
	margin-block: var( --poi-flow );
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: var( --space-s, 0.9rem );
}
.poi-rekord {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: var( --space-s, 0.9rem ) var( --space-m, 1.25rem );
	background: var( --poi-soft );
	border: 1px solid var( --poi-line );
	border-radius: var( --poi-radius );
}
.poi-rekord__label {
	font-size: var( --text-xs, 0.75rem );
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --poi-muted );
}
.poi-rekord__top {
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}
.poi-rekord__top li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
}
.poi-rekord__value {
	font-weight: 700;
	color: var( --poi-accent );
	font-variant-numeric: tabular-nums;
}
/* Platz 1 groß, Plätze 2–3 kleiner/zurückgenommen */
.poi-rekord__top li:first-child .poi-rekord__value {
	font-size: var( --poi-display );
	line-height: 1.1;
}
.poi-rekord__top li:not( :first-child ) {
	font-size: var( --text-s, 0.85rem );
	opacity: 0.75;
}
.poi-rekord__strasse a {
	font-weight: 600;
	color: var( --poi-ink );
	text-decoration: none;
}
.poi-rekord__strasse a:hover {
	color: var( --poi-accent );
}
.poi-rekord__ort {
	color: var( --poi-muted );
	font-size: var( --text-s, 0.85rem );
}
.poi-rekord__ort::before {
	content: "· ";
}

/* ------------------------------------------------------------------ */
/* Sicherheit / Kriminalität (stadtweit, [poi_essen_sicherheit])       */
/* ------------------------------------------------------------------ */
.poi-sicherheit {
	margin-block: var( --poi-flow );
}
.poi-sicherheit__intro {
	font-size: var( --text-s, 0.95rem );
	line-height: var( --poi-lh );
	color: var( --poi-ink, #111827 );
	margin-block: 0 var( --poi-flow );
}
.poi-sicherheit__kennzahlen {
	margin-bottom: var( --space-m, 1.5rem );
}
.poi-sicherheit__trend {
	display: flex;
	align-items: center;
	gap: var( --space-m, 1rem );
	flex-wrap: wrap;
	margin-block: var( --poi-flow );
	padding: var( --space-s, 0.9rem ) var( --space-m, 1.25rem );
	background: var( --poi-soft, #f3f6fb );
	border-radius: var( --poi-radius );
}
.poi-sparkline {
	color: var( --poi-accent, #2b6cb0 );
	flex: 1 1 180px;
	min-width: 160px;
	height: 44px;
	display: block;
}
.poi-sicherheit__trend-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.poi-sicherheit__trend-title {
	font-size: var( --text-xs, 0.72rem );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --poi-muted, #6b7280 );
}
.poi-sicherheit__trend-span {
	font-size: var( --text-s, 0.95rem );
	font-weight: 600;
	color: var( --poi-ink, #111827 );
	font-variant-numeric: tabular-nums;
}
.poi-sicherheit__delikte {
	list-style: none;
	margin-block: var( --poi-flow );
	padding: 0;
	display: flex;
	flex-direction: column;
}
.poi-delikt {
	display: flex;
	align-items: baseline;
	gap: var( --space-s, 0.9rem );
	flex-wrap: wrap;
	padding: var( --space-xs, 9px ) 0;
	border-bottom: 1px solid var( --poi-line, #e5e7eb );
}
.poi-delikt__label {
	flex: 1 1 45%;
	font-weight: 600;
	color: var( --poi-ink, #111827 );
}
.poi-delikt__wert {
	font-variant-numeric: tabular-nums;
	font-size: var( --text-m, 1.05rem );
	color: var( --poi-ink, #111827 );
}
.poi-delikt__aq {
	font-size: var( --text-xs, 0.8rem );
	color: var( --poi-muted, #6b7280 );
}
.poi-delta {
	font-size: var( --text-xs, 0.8rem );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 600;
}
.poi-delta.is-good { color: var( --poi-good ); }
.poi-delta.is-bad  { color: var( --poi-bad ); }
.poi-sicherheit__quelle {
	font-size: var( --text-xs, 0.7rem );
	color: var( --poi-muted, #6b7280 );
	margin: var( --space-s, 1rem ) 0 0;
}
.poi-sicherheit__quelle a { color: inherit; }

/* ------------------------------------------------------------------ */
/* Straßen-Fortsetzung über Stadtteilgrenzen ([poi_strasse_fortsetzung]) */
/* ------------------------------------------------------------------ */
.poi-fortsetzung {
	margin-block: var( --poi-flow );
	padding: var( --space-s, 0.9rem ) var( --space-m, 1.25rem );
	background: var( --poi-soft, #f3f6fb );
	border-left: 3px solid var( --poi-accent, #2b6cb0 );
	border-radius: var( --poi-radius );
	font-size: var( --text-s, 0.95rem );
	line-height: var( --poi-lh );
}
.poi-fortsetzung__label { color: var( --poi-muted, #6b7280 ); }
.poi-fortsetzung__orte a { font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* POI-Grid: Titel-Icons zähmen + Karten mit Adresszeile               */
/* ------------------------------------------------------------------ */
.poi-grid__titel i,
.poi-pois__title i {
	--icon-size: 1em; /* ACSS/FA-Kit-Inflation zähmen (sonst Riesen-Icon) */
	font-size: 1em;
	width: 1em;
	height: 1em;
	margin-right: 0.45em;
	color: var( --poi-card-color, var( --poi-accent ) );
}
.poi-card__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.poi-card__addr {
	font-size: var( --text-xs, 0.75rem );
	color: var( --poi-muted, #6b7280 );
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* FA-SVG-Icons zähmen: Das Kit ersetzt <i> durch <svg data-icon>, und  */
/* ACSS dimensioniert [data-icon] via --icon-size (Default oft riesig).  */
/* Mit ACSS-eigenem Selektormuster + höherer Spezifität überstimmen.     */
/* ------------------------------------------------------------------ */
.poi-card__icon [data-icon]:is( svg, i, a ),
.poi-grid__titel [data-icon]:is( svg, i, a ),
.poi-pois__title [data-icon]:is( svg, i, a ) {
	--icon-size: 1em !important;
	width: 1em !important;
	height: 1em !important;
	font-size: 1em !important;
}
.poi-grid__titel [data-icon],
.poi-pois__title [data-icon] {
	margin-right: 0.4em;
	vertical-align: -0.05em;
	color: var( --poi-card-color, var( --poi-accent ) );
}

/* ------------------------------------------------------------------ */
/* Breadcrumbs ([poi_breadcrumbs]) + Kontext-Links ([poi_kontext])     */
/* ------------------------------------------------------------------ */
.poi-breadcrumbs {
	margin: var( --space-s, 0.75rem ) 0;
	font-size: var( --text-xs, 0.8rem );
	/* Straffe Zeile: sonst hängen ~6 px Leading unter den Glyphen und der
	 * optische Abstand zur Karte wirkt größer als der der Folge-Blöcke. */
	line-height: 1.2;
}
.poi-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0.6em;
	margin: 0;
	padding: 0;
}
.poi-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.6em;
}
.poi-breadcrumbs__item:not( :last-child )::after {
	content: "\203A"; /* › */
	color: var( --poi-muted, #6b7280 );
}
.poi-breadcrumbs a {
	color: var( --poi-muted, #6b7280 );
	text-decoration: none;
}
.poi-breadcrumbs a:hover {
	color: var( --poi-accent, #2b6cb0 );
}
.poi-breadcrumbs [aria-current] {
	color: var( --poi-ink, #111827 );
	font-weight: 600;
}

.poi-kontext {
	margin-block: var( --poi-flow );
}
.poi-kontext__titel {
	display: block;
	font-size: var( --text-xs, 0.72rem );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --poi-muted, #6b7280 );
	margin-bottom: var( --space-xs, 8px );
}
.poi-kontext__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-xs, 8px );
	margin: 0;
	padding: 0;
}
.poi-kontext__list a {
	display: inline-block;
	padding: 0.35em 0.85em;
	background: var( --poi-soft, #f3f6fb );
	border: 1px solid var( --poi-line, #e5e7eb );
	border-radius: 999px;
	color: var( --poi-ink, #111827 );
	text-decoration: none;
	font-size: var( --text-s, 0.9rem );
}
.poi-kontext__list a:hover {
	border-color: var( --poi-accent, #2b6cb0 );
	color: var( --poi-accent, #2b6cb0 );
}

/* Versorgungs-Kategorie verlinkt (unauffällig, Hover = Akzent) */
a.poi-versorgung__cat {
	color: inherit;
	text-decoration: none;
}
a.poi-versorgung__cat:hover {
	color: var( --poi-accent, #2b6cb0 );
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Komposit-Blöcke ([poi_stadtteil_block] usw.) + Stadtteil-Highlights  */
/* ------------------------------------------------------------------ */
.poi-block__part {
	margin-block: var( --poi-flow );
}
.poi-block__part:first-child {
	margin-top: 0;
}
.poi-highlights {
	font-size: var( --text-m, 1.05rem );
	line-height: var( --poi-lh );
	color: var( --poi-ink, #111827 );
}

/* Schmale Geräte (~360 px): Karten-Grids einspaltig, statt minmax-Spalten
 * unter ihre Mindestbreite zu quetschen. */
@media ( max-width: 400px ) {
	.poi-strassen,
	.poi-grid__list,
	.poi-pois__list,
	.poi-rekorde__list {
		grid-template-columns: 1fr;
	}
}

/* ===== Mega-Menü: Stadtteile als kompaktes Spalten-Panel (Header-Navi) =====
 * [poi_stadtteile_menu] – reine Textlinks. Grid mit Spaltenfluss statt CSS
 * columns: füllt die Panelbreite gleichmäßig und kann nicht in die
 * Nachbarspalte überlaufen; Spalten/Zeilen setzt der Shortcode als Custom
 * Properties (A–Z läuft je Spalte von oben nach unten). */
.poi-megamenu__list {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat( var( --poi-megamenu-zeilen, 13 ), auto );
	grid-template-columns: repeat( var( --poi-megamenu-spalten, 4 ), minmax( 0, 1fr ) );
	gap: 0.15em var( --space-m, 1.5rem );
	margin: 0;
	padding: 0;
	list-style: none;
}
.poi-megamenu__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}
.poi-megamenu__link {
	display: block;
	padding: 0.25em 0.5em;
	border-radius: var( --radius-s, 6px );
	font-size: var( --text-s, 0.95rem );
	line-height: 1.25;
	color: inherit;
	text-decoration: none;
	/* Lange Namen (Überruhr-Holthausen) umbrechen statt abschneiden/überlaufen. */
	overflow-wrap: break-word;
}
.poi-megamenu__link:hover,
.poi-megamenu__link:focus-visible {
	color: var( --poi-accent );
	background: var( --poi-soft );
}
.poi-megamenu__item.is-current > .poi-megamenu__link {
	font-weight: 700;
	color: var( --poi-accent );
}
/* Bricks/Frames-Mega-Menü (fr-mm-*): dessen Dropdown-Inhalt ist ein Grid und
 * würde den Shortcode in EINE Zelle quetschen (~450 px). Unser Panel soll
 * alle Spuren überspannen – live verifiziert am Header „Stadtteile". */
.brx-dropdown-content > .brxe-shortcode:has( > .poi-megamenu ) {
	grid-column: 1 / -1;
}
/* Schmale Viewports: Zeilenfluss (A–Z läuft dann zeilenweise) – robust,
 * ohne die Zeilenzahl neu rechnen zu müssen. */
@media ( max-width: 900px ) {
	.poi-megamenu__list {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 480px ) {
	.poi-megamenu__list {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ====================================================================== */
/* Design v2 „Editorial + Essen-Gelb" (überschreibt die Basis-Komponenten) */
/* Typografie statt Kästen: schwarze Toplines, große Ink-Zahlen, viel      */
/* Weißraum. Einziger Farbtupfer: das Ortstafel-Gelb – Marken-Konstante,   */
/* bewusst NICHT themebar (Schild-Farbe), alles andere ACSS-Tokens.        */
/* ====================================================================== */
:root {
	--poi-gelb: #f7c600;
	--poi-topline: 3px solid var( --poi-ink );
}

/* --- Abschnittstitel: fett, Ink, gelbe Marker-Unterstreichung --- */
.poi-prose__heading,
.poi-bezuege__title,
.poi-grid__titel,
.poi-pois__title,
.poi-nahziele__title,
.poi-erreichbar__title {
	display: table; /* Unterstreichung nur so breit wie der Text */
	font-weight: 800;
	color: var( --poi-ink );
	letter-spacing: -0.01em;
	line-height: 1.1;
	border-bottom: 0.16em solid var( --poi-gelb );
	padding-bottom: 0.12em;
}

/* --- Steckbrief: Topline statt Kachel, große Ink-Zahlen --- */
.poi-steckbrief {
	gap: var( --space-s, 0.9rem ) var( --space-l, 2rem );
}
.poi-steckbrief__item {
	background: none;
	border: 0;
	border-top: var( --poi-topline );
	border-radius: 0;
	padding: 0.6em 0 0;
	justify-content: flex-start;
	overflow: visible;
}
.poi-steckbrief__value {
	color: var( --poi-ink );
	font-size: var( --h2, 1.9rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.poi-steckbrief__unit {
	color: var( --poi-muted );
	font-weight: 600;
}
.poi-steckbrief__label {
	letter-spacing: 0.09em;
	font-weight: 600;
}

/* --- Versorgung: Zeitungs-Tabelle, Zahl als gelbes Badge --- */
.poi-versorgung__list {
	border: 0;
	border-radius: 0;
	border-top: var( --poi-topline );
	overflow: visible;
}
.poi-versorgung__item {
	padding-inline: 0;
	grid-template-columns: 3.2rem 1fr auto;
	align-items: center;
}
.poi-versorgung__count {
	font-size: var( --text-m, 1rem );
	color: var( --poi-ink );
	background: var( --poi-gelb );
	border-radius: 6px;
	padding: 0.1em 0.45em;
	font-variant-numeric: tabular-nums;
}
.poi-versorgung__cat {
	color: var( --poi-ink );
}

/* --- Rekorde: Topline-Spalten statt Soft-Kacheln --- */
.poi-rekorde__list {
	gap: var( --space-s, 0.9rem ) var( --space-l, 2rem );
}
.poi-rekord {
	background: none;
	border: 0;
	border-top: var( --poi-topline );
	border-radius: 0;
	padding: 0.6em 0 0;
}
.poi-rekord__value {
	color: var( --poi-ink );
}
.poi-rekord__top li:first-child .poi-rekord__value {
	font-size: var( --h3, 1.5rem );
	font-weight: 800;
	letter-spacing: -0.015em;
}

/* --- Fakten-Tabelle: ohne Kasten --- */
.poi-fakten {
	background: none;
	border: 0;
	border-top: var( --poi-topline );
	border-radius: 0;
	padding: 0;
}

/* --- POI-Karten: Listenzeilen statt Boxen (Kategorie-Punkt bleibt) --- */
.poi-card {
	background: none;
	border: 0;
	border-top: 1px solid var( --poi-line );
	border-radius: 0;
	padding: 0.55em 0;
}
.poi-grid__list,
.poi-pois__list {
	gap: 0 var( --space-l, 2rem );
}

/* --- Kontext-Pills: Outline-Ink, Hover füllt Gelb --- */
.poi-kontext__list a {
	background: none;
	border: 1.5px solid var( --poi-ink );
	color: var( --poi-ink );
	font-weight: 600;
	transition: background-color 0.15s ease;
}
.poi-kontext__list a:hover {
	background: var( --poi-gelb );
	border-color: var( --poi-ink );
	color: var( --poi-ink );
}

/* --- Nahziele: Schätzungs-Badge in Markenfarbe --- */
.poi-nahziel__badge--schaetzung {
	background: var( --poi-gelb );
	color: var( --poi-ink );
}

/* --- Hero-Eyebrow + Fortsetzung: Blau raus, Gelb/Ink rein --- */
.poi-hero__eyebrow {
	color: var( --poi-muted );
}
.poi-fortsetzung {
	background: none;
	border-left: 4px solid var( --poi-gelb );
	border-radius: 0;
	padding: 0.2em 0 0.2em var( --space-m, 1.25rem );
}

/* --- Sicherheit: Trendkasten entkasten --- */
.poi-sicherheit__trend {
	background: none;
	border-top: var( --poi-topline );
	border-radius: 0;
	padding: 0.6em 0 0;
}
.poi-sparkline {
	color: var( --poi-ink );
}

/* --- Mega-Menü: aktueller Stadtteil + Hover in Gelb --- */
.poi-megamenu__link:hover,
.poi-megamenu__link:focus-visible {
	background: var( --poi-soft );
	color: var( --poi-ink );
	box-shadow: inset 0 -0.16em 0 var( --poi-gelb );
}
.poi-megamenu__item.is-current > .poi-megamenu__link {
	color: var( --poi-ink );
	box-shadow: inset 0 -0.28em 0 var( --poi-gelb );
	border-radius: var( --radius-s, 6px ) var( --radius-s, 6px ) 0 0;
}

/* --- Stadtteile-Kacheln (Startseite): Schilder pur, ohne Box --- */
.poi-stadtteile__link {
	background: none;
	border: 0;
	padding: 0.4rem;
}
.poi-stadtteile__link:hover {
	box-shadow: none;
	transform: translateY( -2px );
}
.poi-stadtteile__link:hover .poi-stadtteile__name {
	box-shadow: inset 0 -0.32em 0 var( --poi-gelb );
}
.poi-stadtteile__item.is-current .poi-stadtteile__link {
	background: none;
	border: 0;
}
.poi-stadtteile__item.is-current .poi-stadtteile__name {
	color: var( --poi-ink );
	box-shadow: inset 0 -0.32em 0 var( --poi-gelb );
}

/* --- v2-Feinschliff: Links, Hierarchie, Luft --- */
:root {
	/* Editorial lebt von Weißraum: Sektionsabstand eine Stufe größer. */
	--poi-flow: var( --space-xl, 2.75rem );
}

/* Links in allen Plugin-Komponenten: Ink mit gelber Unterstreichung statt
 * Theme-Hellblau – DAS macht die Inhalte aus einem Guss. */
.poi-prose__body a,
.poi-highlights a,
.poi-nahziel a,
.poi-erreichbar a,
.poi-bezuege a,
.poi-fakten__value a,
.poi-versorgung a,
.poi-nachbarn__list a,
.poi-fortsetzung__orte a,
.poi-single-beschreibung a,
.poi-stadtteil-beschreibung a,
.poi-strasse-beschreibung a,
.poi-strassen-link {
	color: var( --poi-ink );
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var( --poi-gelb );
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.poi-prose__body a:hover,
.poi-highlights a:hover,
.poi-nahziel a:hover,
.poi-erreichbar a:hover,
.poi-bezuege a:hover,
.poi-fakten__value a:hover,
.poi-versorgung a:hover,
.poi-nachbarn__list a:hover,
.poi-fortsetzung__orte a:hover,
.poi-single-beschreibung a:hover,
.poi-stadtteil-beschreibung a:hover,
.poi-strasse-beschreibung a:hover,
.poi-strassen-link:hover {
	text-decoration-color: var( --poi-ink );
	text-decoration-thickness: 3px;
}

/* Highlights als Standfirst: größer, begrenzt, mit Luft. */
.poi-highlights {
	font-size: var( --text-l, 1.15rem );
	line-height: 1.55;
	max-inline-size: 75ch;
}

/* Nahziele: Hierarchie umdrehen – der POI-Name ist die Hauptinfo,
 * die Kategorie nur Einordnung. */
.poi-nahziel__cat {
	font-weight: 400;
	color: var( --poi-muted );
	font-size: var( --text-s, 0.9rem );
}
.poi-nahziel__icon {
	color: var( --poi-muted );
}

/* Lage im Straßennetz: Icon und Label sauber in einer Zeile. */
.poi-bezuege__label {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.poi-bezuege__icon {
	color: var( --poi-muted );
}

/* Steckbrief-Reihenfolge vereinheitlichen: beide Markup-Varianten (Label-
 * zuerst auf Straßenseiten, Wert-zuerst bei den Stadtteil-Zahlen) zeigen
 * das Label als Kicker OBEN und die Zahl darunter. */
.poi-steckbrief__item:has( > .poi-steckbrief__label:first-child ) {
	flex-direction: column;
}

/* Quellenzeile unter generierten Beschreibungen (Wikipedia/Stadt Essen):
 * bewusst dezent, NICHT im gelben Link-Stil der Inhalts-Links. */
.poi-quelle {
	margin-top: var( --space-m, 1.25rem );
	color: var( --poi-muted );
	font-size: var( --text-xs, 0.8rem );
}
.poi-quelle a {
	color: var( --poi-muted );
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var( --poi-line );
	background: none;
}
.poi-quelle a:hover {
	color: var( --poi-ink );
	background: none;
	text-decoration-color: var( --poi-muted );
}

/* ===== Stadtbezirks-Übersicht ([poi_bezirke]) ===== */
.poi-bezirke {
	list-style: none;
	margin-block: var( --poi-flow );
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: var( --space-l, 2rem ) var( --space-l, 2rem );
}
.poi-bezirk-card {
	border-top: 3px solid var( --bz-color, var( --poi-ink ) );
	padding-top: 0.7em;
}
.poi-bezirk-card__title {
	display: block;
	text-decoration: none;
	color: var( --poi-ink );
}
.poi-bezirk-card__nr {
	display: block;
	font-size: var( --text-xs, 0.75rem );
	letter-spacing: 0.07em;
	font-weight: 600;
	color: var( --poi-muted );
}
.poi-bezirk-card__name {
	display: block;
	font-size: var( --poi-h );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	overflow-wrap: break-word; /* lange Bezirksnamen umbrechen, nicht überlaufen */
}
.poi-bezirk-card__title:hover .poi-bezirk-card__name {
	box-shadow: inset 0 -0.16em 0 var( --poi-gelb, #f7c600 );
}
.poi-bezirk-card__stadtteile {
	margin: 0.55em 0 0;
	font-size: var( --text-s, 0.9rem );
	line-height: 1.7;
	color: var( --poi-muted );
}
.poi-bezirk-card__stadtteile a {
	color: var( --poi-ink );
	text-decoration: none;
}
.poi-bezirk-card__stadtteile a:hover {
	box-shadow: inset 0 -0.12em 0 var( --poi-gelb, #f7c600 );
}

/* Karten-Legende der Bezirks-Einfärbung */
.poi-bezirk-legend {
	background: rgba( 255, 255, 255, 0.92 );
	border-radius: 8px;
	padding: 6px 9px;
	font-size: 12px;
	line-height: 1.4;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
	max-width: 300px;
}
.poi-bezirk-legend__row {
	display: flex;
	align-items: flex-start; /* Swatch oben an der ersten Textzeile */
	gap: 6px;
	padding: 1px 0;
}
.poi-bezirk-legend__sw {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 2px;
	border-radius: 3px;
}
.poi-bezirk-legend__txt {
	min-width: 0; /* erlaubt Umbruch im Flex-Item */
	overflow-wrap: break-word;
}

/* Kopf der Bezirks-Übersicht (H1 + Intro) */
.poi-bezirke__head {
	margin-block: 0 var( --poi-flow );
	max-inline-size: 70ch;
}
.poi-bezirke__title {
	margin: 0 0 var( --space-xs, 0.3em );
}
.poi-bezirke__intro {
	margin: 0;
	color: var( --poi-muted );
	line-height: var( --poi-lh );
}

/* Bezirks-Marke auf der eingefärbten Übersicht (statt Stadtteil-Ortstafeln). */
.poi-bezirk-marker span {
	display: inline-block;
	padding: 2px 9px;
	background: rgba( 255, 255, 255, 0.94 );
	border: 2px solid #666;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	color: #14171c;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	cursor: pointer;
}
.poi-bezirk-marker:hover span {
	background: #14171c;
	color: #fff;
}