/*
 * AC Interaktive Rechtslage Karte — SVG coloring, legend, search, pan/zoom chrome,
 * plus the mobile bottom-sheet variant of the shared modal (scoped to map-triggered
 * openings via #ac-detail-modal.ac-lmap-sheet, see ac-legal-map.js).
 *
 * Status fills use !important deliberately: downloaded SVG maps almost always carry
 * their own inline fill="" attributes and internal <style> rules; the status color
 * must win over both.
 */

.ac-lmap-root {
	--ac-lmap-c-bg: #f5f7f6;
	--ac-lmap-c-full: #2e6741;
	--ac-lmap-c-legal: #7fb069;
	--ac-lmap-c-decrim: #e2b93b;
	--ac-lmap-c-illegal: #c0392b;
	--ac-lmap-c-nodata: #d5dbd8;
	--ac-lmap-c-stroke: #ffffff;
	--ac-lmap-usa-mark: #1c6bc0;
	font-family: 'Amiko', sans-serif;
}

/* Suchfeld */
.ac-lmap-search {
	margin-bottom: 14px;
}

.ac-lmap-search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ac-lmap-select {
	width: 100%;
	max-width: 420px;
	padding: 12px 14px;
	font-family: 'Amiko', sans-serif;
	font-size: 1rem;
	color: #1c2421;
	background-color: #fff;
	border: 1px solid #e0e4e2;
	border-radius: 10px;
	cursor: pointer;
}

.ac-lmap-select:focus-visible {
	outline: 2px solid var( --ac-accent, #2e6741 );
	outline-offset: 2px;
}

/* Freitextsuche mit Vorschlagsliste */
.ac-lmap-typeahead {
	position: relative;
	width: 100%;
	max-width: 320px;
}

.ac-lmap-typeahead-input {
	width: 100%;
	padding: 12px 14px;
	font-family: 'Amiko', sans-serif;
	font-size: 1rem;
	color: #1c2421;
	background-color: #fff;
	border: 1px solid #e0e4e2;
	border-radius: 10px;
}

.ac-lmap-typeahead-input:focus-visible {
	outline: 2px solid var( --ac-accent, #2e6741 );
	outline-offset: 2px;
}

.ac-lmap-typeahead-list {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc( 100% + 4px );
	margin: 0;
	padding: 4px;
	list-style: none;
	background-color: #fff;
	border: 1px solid #e0e4e2;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba( 28, 36, 33, 0.14 );
	max-height: 280px;
	overflow-y: auto;
}

.ac-lmap-typeahead-list[hidden] {
	display: none;
}

.ac-lmap-typeahead-item {
	padding: 9px 12px;
	border-radius: 7px;
	font-family: 'Amiko', sans-serif;
	font-size: 0.95rem;
	color: #1c2421;
	cursor: pointer;
}

.ac-lmap-typeahead-item:hover,
.ac-lmap-typeahead-item--active {
	background-color: var( --ac-accent, #2e6741 );
	color: #fff;
}

/* Breadcrumb (Kontinente › Nordamerika › USA) */
.ac-lmap-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
	min-height: 24px;
	font-size: 0.92rem;
}

.ac-lmap-breadcrumb:empty {
	display: none;
}

/* Basis + alle States gepinnt, damit Theme/Kit-Regeln auf nackte button-Elemente
   (Rand, Pink, eigene Hover-Farben) hier nie durchschlagen. */
.ac-lmap-crumb {
	appearance: none;
	background: none !important;
	border: none !important;
	padding: 4px 2px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: var( --ac-accent, #2e6741 ) !important;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.ac-lmap-crumb:hover,
.ac-lmap-crumb:focus,
.ac-lmap-crumb:active {
	background: none !important;
	color: var( --ac-accent, #2e6741 ) !important;
	opacity: 0.75;
	outline: none;
}

.ac-lmap-crumb--current {
	color: #1c2421 !important;
	text-decoration: none;
	cursor: default;
}

.ac-lmap-crumb-sep {
	color: #5b6660;
}

/* Karte / Viewport */
.ac-lmap-viewport {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background-color: var( --ac-lmap-c-bg, #f5f7f6 );
	min-height: 120px;
}

.ac-lmap-viewport.ac-lmap-zoomed {
	cursor: grab;
}

.ac-lmap-stage {
	transform-origin: 0 0;
	line-height: 0;
}

/*
 * The bundled amCharts exports carry fixed width/height attributes and an inline
 * style="background-color:#2d2d2d" on the svg root — sizing comes from the
 * viewBox instead, and the dark canvas is neutralized (a stylesheet !important
 * beats an inline style without one).
 *
 * Fixed height (not max-height) is deliberate: the levels have very different
 * aspect ratios (continents ~2:1 wide, continent maps ~1:1), and the viewport
 * must not change size when drilling between them. The default xMidYMid-meet
 * preserveAspectRatio letterboxes each map centered inside this constant box.
 */
.ac-lmap-stage svg {
	display: block;
	width: 100%;
	height: var( --ac-lmap-maxh, 620px );
	margin: 0 auto;
	background-color: transparent !important;
}

.ac-lmap-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var( --ac-lmap-maxh, 620px );
	padding: 40px 20px;
	font-family: 'Amiko', sans-serif;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #5b6660;
}

.ac-lmap-loading--error {
	color: #b3261e;
}

/* Drill-Regionen (Kontinente; USA auf der Nordamerika-Karte) */
.ac-lmap-stage svg .ac-lmap-drill {
	fill: var( --ac-lmap-c-nodata ) !important;
	cursor: pointer;
	transition: fill 0.2s ease, filter 0.2s ease;
}

.ac-lmap-stage svg .ac-lmap-drill:hover,
.ac-lmap-stage svg .ac-lmap-drill:focus {
	fill: var( --ac-accent, #2e6741 ) !important;
	outline: none;
}

.ac-lmap-stage svg .ac-lmap-inactive {
	fill: #eceeed !important;
	pointer-events: none;
}

/*
 * Blüten-Kennzeichnung, Modi "stripes"/"dots" — Overlay-Klon über der Status-Farbe
 * (siehe ac-legal-map.js). pointer-events:none ist Pflicht: Klicks müssen das echte
 * Land darunter treffen.
 */
.ac-lmap-stage svg .ac-lmap-flowers-overlay {
	fill: url( #ac-lmap-flowerpat ) !important;
	stroke: none !important;
	pointer-events: none;
}

/*
 * Blüten-Kennzeichnung, Modus "border" — kein Overlay, stattdessen ein kräftiger
 * heller Rand direkt am Länderpfad, der es sichtbar aus der Fläche heraushebt.
 */
.ac-lmap-root.ac-lmap-flowers--border .ac-lmap-stage svg .ac-lmap-has-flowers {
	stroke: #ffffff !important;
	stroke-width: 1.6 !important;
	stroke-dasharray: 3 1.5 !important;
	paint-order: stroke;
}

/* Länder-Einfärbung nach Status */
.ac-lmap-stage svg .ac-lmap-region {
	stroke: var( --ac-lmap-c-stroke ) !important;
	stroke-width: 0.5;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.ac-lmap-stage svg .ac-lmap-st-nodata,
.ac-lmap-stage svg .ac-lmap-st-nodata * {
	fill: var( --ac-lmap-c-nodata ) !important;
}

.ac-lmap-stage svg .ac-lmap-st-full,
.ac-lmap-stage svg .ac-lmap-st-full * {
	fill: var( --ac-lmap-c-full ) !important;
}

.ac-lmap-stage svg .ac-lmap-st-legal,
.ac-lmap-stage svg .ac-lmap-st-legal * {
	fill: var( --ac-lmap-c-legal ) !important;
}

.ac-lmap-stage svg .ac-lmap-st-decrim,
.ac-lmap-stage svg .ac-lmap-st-decrim * {
	fill: var( --ac-lmap-c-decrim ) !important;
}

.ac-lmap-stage svg .ac-lmap-st-illegal,
.ac-lmap-stage svg .ac-lmap-st-illegal * {
	fill: var( --ac-lmap-c-illegal ) !important;
}

.ac-lmap-stage svg .ac-lmap-country {
	cursor: pointer;
}

.ac-lmap-stage svg .ac-lmap-country:hover,
.ac-lmap-stage svg .ac-lmap-country:focus {
	filter: brightness( 1.18 );
	outline: none;
}

.ac-lmap-stage svg .ac-lmap-country:focus-visible {
	filter: brightness( 1.18 ) drop-shadow( 0 0 3px rgba( 28, 36, 33, 0.7 ) );
}

/* Zoom-Buttons */
.ac-lmap-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 5;
}

.ac-lmap-zoom-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #1c2421 !important;
	background-color: #fff !important;
	border: 1px solid #e0e4e2 !important;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba( 28, 36, 33, 0.15 );
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ac-lmap-zoom-btn:hover,
.ac-lmap-zoom-btn:focus,
.ac-lmap-zoom-btn:active {
	background-color: var( --ac-accent, #2e6741 ) !important;
	color: #fff !important;
	border-color: var( --ac-accent, #2e6741 ) !important;
	outline: none;
}

/* Legende */
.ac-lmap-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	font-size: 0.9rem;
	color: #1c2421;
}

.ac-lmap-legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ac-lmap-legend-chip {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	flex-shrink: 0;
	border: 1px solid rgba( 28, 36, 33, 0.15 );
}

.ac-lmap-legend-chip--full { background-color: var( --ac-lmap-c-full ); }
.ac-lmap-legend-chip--legal { background-color: var( --ac-lmap-c-legal ); }
.ac-lmap-legend-chip--decrim { background-color: var( --ac-lmap-c-decrim ); }
.ac-lmap-legend-chip--illegal { background-color: var( --ac-lmap-c-illegal ); }
.ac-lmap-legend-chip--nodata { background-color: var( --ac-lmap-c-nodata ); }

/* Legenden-Chip spiegelt die auf der Karte gewählte Blüten-Darstellung
   (Streifen / Punkte / Rand). Basis neutral grau, da die Kennzeichnung über
   jeder Status-Farbe liegen kann. */
.ac-lmap-legend-chip--flowers {
	background-color: var( --ac-lmap-c-nodata );
}

.ac-lmap-flowers--stripes .ac-lmap-legend-chip--flowers {
	background-image: repeating-linear-gradient(
		45deg,
		rgba( 255, 255, 255, 0.85 ) 0,
		rgba( 255, 255, 255, 0.85 ) 2px,
		transparent 2px,
		transparent 5px
	);
}

.ac-lmap-flowers--dots .ac-lmap-legend-chip--flowers {
	background-image: radial-gradient( rgba( 255, 255, 255, 0.9 ) 30%, transparent 32% );
	background-size: 5px 5px;
}

.ac-lmap-flowers--border .ac-lmap-legend-chip--flowers {
	border: 2px dashed #ffffff;
	box-shadow: 0 0 0 1px var( --ac-lmap-c-nodata );
}

/* Modal-Inhalte (KPI-Kacheln, Präparate-Karten) — gerendert im geteilten
   Detail-Modal, daher hier und nicht in ac-modal.css, damit nur Karten-Seiten
   diese Regeln laden. */
.ac-lmap-kpis {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
	margin-bottom: 6px;
}

.ac-lmap-kpi {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background-color: #f5f7f6;
	border: 1px solid #e0e4e2;
	border-radius: 10px;
	min-width: 0;
}

.ac-lmap-kpi-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5b6660;
}

.ac-lmap-kpi-value {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1c2421;
	overflow-wrap: break-word;
}

/* Status als volle Kopfkachel in der jeweiligen Status-Farbe. */
.ac-lmap-kpi--status {
	grid-column: 1 / -1;
	border: none;
}

.ac-lmap-kpi--status .ac-lmap-kpi-label { color: rgba( 255, 255, 255, 0.85 ); }
.ac-lmap-kpi--status .ac-lmap-kpi-value { color: #fff; font-size: 1.15rem; }

.ac-lmap-kpi--st-full { background-color: var( --ac-lmap-c-full, #2e6741 ); }
.ac-lmap-kpi--st-legal { background-color: var( --ac-lmap-c-legal, #7fb069 ); }
.ac-lmap-kpi--st-illegal { background-color: var( --ac-lmap-c-illegal, #c0392b ); }
.ac-lmap-kpi--st-decrim { background-color: var( --ac-lmap-c-decrim, #e2b93b ); }
.ac-lmap-kpi--st-decrim .ac-lmap-kpi-label { color: rgba( 28, 36, 33, 0.7 ); }
.ac-lmap-kpi--st-decrim .ac-lmap-kpi-value { color: #1c2421; }

/* Blüten-Card (erste Kachel) leicht hervorgehoben — der zweite, für Patient:innen
   oft entscheidende Aspekt neben dem allgemeinen Status. */
.ac-lmap-kpi--flowers {
	background-color: #eef4f0;
	border-color: rgba( 46, 103, 65, 0.25 );
}

/* Medizin-Box: gemeinsamer Container für Zugang + Restriktionen, volle Breite. */
.ac-lmap-medbox {
	margin-top: 12px;
	padding: 16px 18px;
	background-color: #f5f7f6;
	border: 1px solid #e0e4e2;
	border-radius: 10px;
}

.ac-lmap-medbox-heading {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ac-accent, #2e6741 );
	margin-bottom: 12px;
}

.ac-lmap-medbox-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ac-lmap-medbox-label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	color: #1c2421;
	margin-bottom: 4px;
}

.ac-lmap-medbox-text {
	font-family: 'Amiko', sans-serif;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #555;
}

@media ( max-width: 560px ) {
	.ac-lmap-medbox-grid {
		gap: 12px;
	}
}

.ac-lmap-kpi--muted .ac-lmap-kpi-value {
	font-family: 'Amiko', sans-serif;
	font-weight: 400;
	font-size: 0.95rem;
	color: #5b6660;
}

.ac-lmap-kpi-yesno--yes { color: #2e6741; }
.ac-lmap-kpi-yesno--no { color: #c0392b; }

/* Präparate (+ Blüten-Foto) als Karten-Grid — fest 2 Spalten. */
.ac-lmap-prep-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 10px;
}

.ac-lmap-prep-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #e0e4e2;
	border-radius: 10px;
	font-family: 'Amiko', sans-serif;
	font-size: 0.9rem;
	color: #1c2421;
	min-width: 0;
	cursor: pointer;
}

.ac-lmap-prep-card:focus-visible {
	outline: 2px solid var( --ac-accent, #2e6741 );
	outline-offset: 2px;
}

/* Bild füllt die Kachel, zentriert beschnitten. */
.ac-lmap-prep-thumb {
	display: block;
	width: 100%;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #e0e4e2;
	flex-shrink: 0;
}

/* Präparat-Name als Tooltip über der Kachel — Desktop per Hover/Fokus, mobil
   per erstem Tap (Klasse via ac-legal-map.js). */
.ac-lmap-prep-card[data-name]::after {
	content: attr( data-name );
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	padding: 6px 12px;
	background-color: #1c2421;
	color: #fff;
	font-size: 0.8rem;
	line-height: 1.3;
	border-radius: 6px;
	white-space: nowrap;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 6;
}

.ac-lmap-prep-card[data-name]:hover::after,
.ac-lmap-prep-card[data-name]:focus-visible::after,
.ac-lmap-prep-card.ac-lmap-tooltip-open::after {
	opacity: 1;
}

/* Ohne Bild bleibt der Name direkt sichtbar (Text-Kachel, kein Tooltip). */
.ac-lmap-prep-card--text {
	padding: 12px 10px;
	cursor: default;
}

.ac-lmap-prep-card--text span {
	overflow-wrap: break-word;
	min-width: 0;
	text-align: center;
}

.ac-lmap-sources a {
	color: var( --ac-accent, #2e6741 );
	word-break: break-word;
}

/* Mobile: Karten-Modal als Bottom-Sheet. Nur aktiv, wenn das Modal von der Karte
   geöffnet wurde (Klasse via JS) — andere Widgets behalten das normale Dialog-Layout. */
@media ( max-width: 768px ) {
	.ac-lmap-prep-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ac-lmap-kpi-value {
		font-size: 0.9rem;
	}

	#ac-detail-modal.ac-lmap-sheet {
		padding: 20px;
		align-items: flex-start;
	}

	#ac-detail-modal.ac-lmap-sheet .ac-modal-content {
		width: 100%;
		max-width: 100%;
		margin: 8vh 0 0;
		border-radius: 16px 16px 0 0;
		animation: ac-lmap-sheet-in 0.3s ease-out;
	}

	#ac-detail-modal.ac-lmap-sheet .ac-modal-header {
		border-radius: 16px 16px 0 0;
	}

	.ac-lmap-compare-prep-grid .ac-lmap-prep-thumb {
		height: auto;
	}
}

@keyframes ac-lmap-sheet-in {
	from {
		transform: translateY( 40px );
		opacity: 0;
	}
	to {
		transform: translateY( 0 );
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#ac-detail-modal.ac-lmap-sheet .ac-modal-content {
		animation: none;
	}
}

/* Kopfzeile: View-Switcher links, Suchfeld rechts */
.ac-lmap-header-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 14px;
}

.ac-lmap-header-controls .ac-lmap-search {
	margin-bottom: 0;
}

/* View Switcher Container */
.ac-lmap-view-switcher {
	display: inline-flex;
	background-color: #f0f4f1;
	padding: 4px;
	border-radius: 10px;
}

/*
 * Switcher-Buttons — Basis UND alle States (:hover/:focus/:active) mit !important
 * gepinnt, damit die Theme/Elementor-Kit-Regeln für nackte <button>-Elemente
 * (rosa Default-Hover, Rand, Hintergrund) hier niemals durchschlagen.
 */
.ac-lmap-switch-btn {
	appearance: none;
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 8px 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: #5b6660 !important;
	border-radius: 8px;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.ac-lmap-switch-btn:hover,
.ac-lmap-switch-btn:focus,
.ac-lmap-switch-btn:active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #1c2421 !important;
	outline: none;
}

.ac-lmap-switch-btn--active,
.ac-lmap-switch-btn--active:hover,
.ac-lmap-switch-btn--active:focus,
.ac-lmap-switch-btn--active:active {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: var( --ac-accent, #2e6741 ) !important;
	box-shadow: 0 2px 6px rgba( 28, 36, 33, 0.05 ) !important;
}

.ac-lmap-switch-btn:focus-visible {
	outline: 2px solid var( --ac-accent, #2e6741 );
	outline-offset: 2px;
}

/*
 * USA-Markierung auf der Weltkarte (Drill-Modus) — per Elementor einstellbar
 * (usa_mark_style + usa_mark_color) und bewusst von der Blüten-Kennzeichnung
 * abgesetzt. Overlay-Klon liegt über der Status-Farbe; pointer-events aus, damit
 * der Klick weiter das echte US-Land (Drill) trifft. Füllung/Farbe je nach
 * Root-Klasse ac-lmap-usamark--<style>.
 */
.ac-lmap-stage svg .ac-lmap-usa-overlay {
	stroke: none !important;
	pointer-events: none;
}

/* Streifen / Streifen-Multi / Punkte: Musterfüllung. Die Muster-Elemente selbst
   tragen die Farbe (var() greift nur als CSS, nicht als reines SVG-Attribut). */
.ac-lmap-usamark--stripes .ac-lmap-stage svg .ac-lmap-usa-overlay,
.ac-lmap-usamark--stripes-multi .ac-lmap-stage svg .ac-lmap-usa-overlay,
.ac-lmap-usamark--dots .ac-lmap-stage svg .ac-lmap-usa-overlay {
	fill: url( #ac-lmap-usapat ) !important;
}

/* Dezent gehalten (niedrige Deckkraft), damit sich die USA-Markierung nicht auf den
   ersten Blick grob vom Rest der Karte abhebt. */
.ac-lmap-stage svg .ac-lmap-usapat-stripe {
	fill: var( --ac-lmap-usa-mark, #1c6bc0 );
	fill-opacity: 0.3;
}

.ac-lmap-stage svg .ac-lmap-usapat-dot {
	fill: var( --ac-lmap-usa-mark, #1c6bc0 );
	fill-opacity: 0.5;
}

/* „Streifen (alle Legendenfarben)" — je Streifen eine Status-Farbe (ohne Grau). */
.ac-lmap-stage svg .ac-lmap-usapat-band {
	fill-opacity: 0.9;
}

.ac-lmap-stage svg .ac-lmap-usapat-band--full { fill: var( --ac-lmap-c-full, #2e6741 ); }
.ac-lmap-stage svg .ac-lmap-usapat-band--legal { fill: var( --ac-lmap-c-legal, #7fb069 ); }
.ac-lmap-stage svg .ac-lmap-usapat-band--decrim { fill: var( --ac-lmap-c-decrim, #e2b93b ); }
.ac-lmap-stage svg .ac-lmap-usapat-band--illegal { fill: var( --ac-lmap-c-illegal, #c0392b ); }

/* Farbfläche: getönte Vollfüllung in der USA-Farbe. */
.ac-lmap-usamark--solid .ac-lmap-stage svg .ac-lmap-usa-overlay {
	fill: var( --ac-lmap-usa-mark, #1c6bc0 ) !important;
	fill-opacity: 0.4;
}

/* Kräftiger Rand: kein Overlay, stattdessen ein deutlicher Umriss am US-Land. */
.ac-lmap-usamark--border .ac-lmap-stage svg .ac-lmap-usa-marked {
	stroke: var( --ac-lmap-usa-mark, #1c6bc0 ) !important;
	stroke-width: 2 !important;
	paint-order: stroke;
}

/*
 * „USA als Bundesstaaten einbetten"-Modus: die verschachtelte usa.svg sitzt in der
 * Bounding-Box der Weltkarten-USA. Etwas kräftigere Grenzen, damit die einzelnen
 * Staaten trotz kleiner Darstellung unterscheidbar bleiben.
 */
.ac-lmap-stage svg .ac-lmap-usa-inline {
	/* viewBox ist aufs Festland verengt — Alaska/Hawaii-Insets liegen außerhalb
	   und werden hier sauber abgeschnitten (statt über Nachbarländer zu ragen). */
	overflow: hidden;
}

.ac-lmap-stage svg .ac-lmap-usa-inline .ac-lmap-region {
	stroke: var( --ac-lmap-c-stroke ) !important;
	stroke-width: 0.4;
	vector-effect: non-scaling-stroke;
}

@media ( max-width: 560px ) {
	.ac-lmap-header-controls {
		flex-direction: column;
		align-items: stretch;
	}
	.ac-lmap-view-switcher {
		width: 100%;
	}
	.ac-lmap-switch-btn {
		flex: 1;
		text-align: center;
	}
	.ac-lmap-typeahead,
	.ac-lmap-select {
		max-width: 100%;
	}
}

/* ===================================================================
 * VERGLEICHSMODUS (Länder-Vergleich)
 * =================================================================== */

.ac-lmap-compare-toggle {
	appearance: none;
	border: 1px solid #e0e4e2 !important;
	background: #ffffff !important;
	padding: 8px 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: #5b6660 !important;
	border-radius: 8px;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ac-lmap-compare-toggle:hover,
.ac-lmap-compare-toggle:focus {
	color: #1c2421 !important;
	border-color: #c7d0cb !important;
	outline: none;
}

.ac-lmap-compare-toggle:focus-visible {
	outline: 2px solid var( --ac-accent, #2e6741 );
	outline-offset: 2px;
}

/*
 * Kombinierte Selektoren (statt nur .ac-lmap-compare-toggle--active) sind hier
 * Pflicht: ".foo:hover"/".foo:focus" oben haben dieselbe Spezifität wie eine
 * einzelne Klasse, gewinnen also gegen ein alleinstehendes "--active" — nach
 * jedem Klick (Button bleibt danach in den meisten Browsern :focus) kippte der
 * Text dadurch auf das dunkle Hover-Grau, das auf dem grünen Active-Hintergrund
 * kaum lesbar ist. Gleiches Muster wie .ac-lmap-switch-btn--active.
 */
.ac-lmap-compare-toggle--active,
.ac-lmap-compare-toggle--active:hover,
.ac-lmap-compare-toggle--active:focus {
	background: var( --ac-accent, #2e6741 ) !important;
	border-color: var( --ac-accent, #2e6741 ) !important;
	color: #ffffff !important;
}

/* Kartenklick wählt statt zu öffnen — Cursor/Ring signalisieren das. */
.ac-lmap-compare-mode .ac-lmap-stage svg .ac-lmap-country {
	cursor: pointer;
}

.ac-lmap-compare-selected {
	stroke: var( --ac-accent, #2e6741 ) !important;
	stroke-width: 2.5px !important;
}

.ac-lmap-compare-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0;
	padding: 12px 16px;
	background-color: #f5f7f6;
	border: 1px solid #e0e4e2;
	border-radius: 10px;
}

/*
 * "display: flex" oben schlägt sonst das [hidden]-Attribut tot: Autoren-CSS
 * gewinnt gegen die UA-Stylesheet-Regel "[hidden] { display: none; }" auch bei
 * gleicher Herkunft nicht automatisch nach Spezifität, sondern die eigene
 * Klassenregel gilt einfach weiter — der Vergleichsbereich war dadurch schon
 * vor dem ersten Klick auf "Länder vergleichen" sichtbar. Diese Regel hat als
 * Klasse+Attribut höhere Spezifität als die reine Klassenregel und gewinnt.
 */
.ac-lmap-compare-bar[hidden] {
	display: none;
}

.ac-lmap-compare-hint {
	margin: 0;
	font-size: 0.85rem;
	color: #5b6660;
	flex: 1 1 auto;
}

.ac-lmap-compare-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
}

.ac-lmap-compare-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px 5px 12px;
	background-color: #ffffff;
	border: 1px solid var( --ac-accent, #2e6741 );
	border-radius: 999px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	color: #1c2421;
}

.ac-lmap-compare-chip-remove {
	appearance: none;
	border: none !important;
	background: rgba( 46, 103, 65, 0.12 ) !important;
	width: 18px;
	height: 18px;
	line-height: 16px;
	padding: 0;
	border-radius: 50%;
	color: var( --ac-accent, #2e6741 ) !important;
	font-size: 13px;
	cursor: pointer;
}

.ac-lmap-compare-chip-remove:hover {
	background: rgba( 46, 103, 65, 0.22 ) !important;
}

.ac-lmap-compare-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

.ac-lmap-compare-run,
.ac-lmap-compare-exit {
	appearance: none;
	border: none !important;
	padding: 8px 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: none !important;
}

.ac-lmap-compare-run {
	background: var( --ac-accent, #2e6741 ) !important;
	color: #ffffff !important;
}

.ac-lmap-compare-run:disabled {
	background: #d5dbd8 !important;
	color: #8a938e !important;
	cursor: not-allowed;
}

.ac-lmap-compare-exit {
	background: transparent !important;
	color: #5b6660 !important;
}

.ac-lmap-compare-exit:hover {
	color: #1c2421 !important;
}

@media ( max-width: 560px ) {
	.ac-lmap-compare-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.ac-lmap-compare-actions {
		margin-left: 0;
		justify-content: stretch;
	}
	.ac-lmap-compare-run,
	.ac-lmap-compare-exit {
		flex: 1;
	}
}

/* Das geteilte Modal ist standardmäßig auf einspaltigen Detail-Inhalt
   ausgelegt (siehe ac-modal.css) — mit 2–3 Vergleichs-Karten nebeneinander
   braucht es spürbar mehr Breite, sonst quetschen sich die Karten unnötig. */
.ac-modal-content:has( .ac-lmap-compare-cards ) {
	width: 90%;
	max-width: 1200px;
}

/* Vergleichs-Karten — gerendert innerhalb des geteilten Modals (siehe
   buildCompareCardsHtml() in ac-legal-map.js): eine Karte pro ausgewähltem
   Land statt einer Tabellenzeile pro Attribut, damit jedes Land als in sich
   geschlossener Block lesbar bleibt. Farb-/Radius-Vokabular bewusst im
   selben Stil wie .ac-lmap-medbox / .ac-lmap-kpi gehalten. */
.ac-lmap-compare-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 20px;
	align-items: start;
}

/* Bei genau 2 Karten lieber fest zweispaltig als eine sehr breite Karte neben
   einer schmalen (auto-fit würde ab ~480px Breite schon zweispaltig, das
   Ergebnis wirkt bei 2 Karten aber ausgewogener mit einem festen Split). */
.ac-lmap-compare-cards--2 {
	grid-template-columns: repeat( 2, minmax( 240px, 1fr ) );
}

/* Erzwingt einspaltig auf dem mobilen Bottom-Sheet — sonst würde die feste
   Zweispalten-Regel oben (.ac-lmap-compare-cards--2) zwei 240px-Karten auch
   auf einem ~320–400px schmalen Viewport nebeneinander pressen. */
@media ( max-width: 620px ) {
	.ac-lmap-compare-cards,
	.ac-lmap-compare-cards--2 {
		grid-template-columns: 1fr;
	}
}

.ac-lmap-compare-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	background-color: #ffffff;
	border: 1px solid #e0e4e2;
	border-radius: 12px;
}

.ac-lmap-compare-card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e0e4e2;
}

.ac-lmap-compare-card-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1c2421;
}

.ac-lmap-compare-card-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eef1ef;
}

.ac-lmap-compare-card-row:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* Präparate-Zeile: Label oben, Karten-Grid darunter über die volle Breite —
   die anderen Zeilen bleiben Label/Wert nebeneinander. */
.ac-lmap-compare-card-row--stack {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.ac-lmap-compare-card-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	color: #5b6660;
	white-space: nowrap;
}

.ac-lmap-compare-card-value {
	font-family: 'Amiko', sans-serif;
	font-size: 0.92rem;
	color: #1c2421;
	text-align: right;
}

.ac-lmap-compare-empty {
	margin: 0;
	color: #5b6660;
	font-style: italic;
	font-size: 0.88rem;
}

/* Präparate-Grid innerhalb einer Vergleichs-Karte: kleinere Kacheln als im
   Einzelland-Modal (dort volle Modal-Breite, hier eine von 2–3 Spalten),
   sonst exakt dieselbe .ac-lmap-prep-card-Kachel samt Hover-/Tap-Tooltip. */
.ac-lmap-compare-prep-grid {
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
}

/* Muss nach der Basisregel oben stehen: gleiche Spezifität, spätere Regel im
   Quelltext gewinnt bei einer Kaskaden-Kollision — sonst würde die generische
   768px-Regel für .ac-lmap-prep-grid weiter oben in der Datei diese hier
   überschreiben. Eigene, engere Breakpoint statt der 768px-Modal-Grenze, weil
   eine Vergleichs-Karte selbst bei größeren Viewports schon schmal ist (2–3
   Karten nebeneinander) und 3 Mini-Kacheln dort schnell zu eng wirken. */
@media ( max-width: 620px ) {
	.ac-lmap-compare-prep-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.ac-lmap-compare-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	color: #ffffff;
}

.ac-lmap-compare-badge--full { background-color: var( --ac-lmap-c-full, #2e6741 ); }
.ac-lmap-compare-badge--legal { background-color: var( --ac-lmap-c-legal, #7fb069 ); }
.ac-lmap-compare-badge--decrim { background-color: var( --ac-lmap-c-decrim, #e2b93b ); color: #1c2421; }
.ac-lmap-compare-badge--illegal { background-color: var( --ac-lmap-c-illegal, #c0392b ); }
.ac-lmap-compare-badge--nodata { background-color: var( --ac-lmap-c-nodata, #d5dbd8 ); color: #1c2421; }

.ac-lmap-compare-yesno--yes { color: #2e6741; font-weight: 600; }
.ac-lmap-compare-yesno--no { color: #c0392b; font-weight: 600; }