/* Partnerkarte auf /channel-partner/.
   Gegenstueck zu assets/js/channel-partner-map.js.

   Alle Werte kommen aus den CSS-Variablen des Design-Systems — die
   Markerfarben sind dieselben Tokens wie die Kopfzeile der Kachel
   (.cp-card[data-tier=...] .cp-card-cert-label). */

#cp-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-md);
	background: var(--color-superlight);
	z-index: 0;
}

/* Leaflet setzt seine eigene Schrift; die Site hat eine. */
.leaflet-container {
	font-family: var(--font-body);
	font-size: var(--text-14);
	background: var(--color-superlight);
}

/* ── Marker ── */

.cp-pin {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid var(--color-white);
	background: var(--color-text-meta);
	box-shadow: var(--shadow-card-sm, 0 2px 6px rgba(10, 16, 29, .25));
	transition: transform var(--duration-xs) var(--ease-smooth);
}

.cp-pin--gold { background: var(--cp-tier-gold); }
.cp-pin--blue { background: var(--color-blue); }
.cp-pin--silver,
.cp-pin--system { background: var(--color-text-meta); }

/* Filialen kleiner und mit hellerem Kern — erkennbar untergeordnet,
   aber in der Stufenfarbe ihres Partners. */
.cp-pin--branch {
	width: 14px;
	height: 14px;
	border-width: 2px;
	opacity: .75;
}

.leaflet-marker-icon:hover .cp-pin,
.leaflet-marker-icon:focus-visible .cp-pin {
	transform: scale(1.18);
}

/* ── Popup ── */

.leaflet-popup-content-wrapper {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-sm, 0 6px 24px rgba(10, 16, 29, .18));
}

.leaflet-popup-content {
	margin: var(--sp-16);
	min-width: 200px;
}

.cp-popup {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.cp-popup-cert {
	font-family: var(--font-heading);
	font-weight: var(--fw-label);
	font-size: var(--text-12);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-meta);
}

.cp-popup-cert--gold { color: var(--cp-tier-gold); }
.cp-popup-cert--blue { color: var(--color-blue); }

.cp-popup-name {
	font-family: var(--font-heading);
	font-weight: var(--fw-subheading);
	font-size: var(--text-18);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-dark-blue);
}

.cp-popup-role {
	font-family: var(--font-heading);
	font-weight: var(--fw-subheading);
	font-size: var(--text-12);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-meta);
}

.cp-popup-address,
.cp-popup-infobox {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-body);
	font-size: var(--text-14);
	line-height: 1.5;
	color: var(--color-text-body);
}

.cp-popup-infobox > :first-child { margin-top: 0; }
.cp-popup-infobox > :last-child { margin-bottom: 0; }

.cp-popup-country {
	font-weight: var(--fw-semibold);
	color: var(--color-dark-blue);
}

.cp-popup-link {
	font-family: var(--font-heading);
	font-weight: var(--fw-subheading);
	font-size: var(--text-14);
	color: var(--color-blue);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.cp-popup-link:hover { color: var(--color-dark-blue); }
}

/* ── Leerzustand ── */

#cp-map.is-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-white) 70%, transparent);
	pointer-events: none;
	z-index: 500;
}

/* ── Kachel, deren Marker gerade offen ist ── */

.cp-card.is-map-active {
	border-color: var(--color-blue);
	box-shadow: var(--shadow-card-sm);
}