/* Shared map base, loaded as style dependency by both blocks (a block alone on the page must still render). */

.sgui-lagen__area {
	fill: var(--wp--custom--map--shade--s-0, color-mix(in srgb, var(--wp--preset--color--brand, #801518) 6%, var(--wp--preset--color--base, #fff)));
	/* Printed-map contrast: ink borders at a fixed screen width, whatever the map size. */
	stroke: var(--wp--custom--map--stroke, var(--wp--preset--color--ink, #1b1b1b));
	stroke-width: var(--wp--custom--map--stroke-width, 1.25px);
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	transition: fill 160ms ease, stroke-width 160ms ease, opacity 160ms ease, filter 160ms ease;
}

/* Index-stabile, helle Marken-Stufen; Tinten-Konturen trennen die Stadtteile. */
.sgui-lagen__area--s0 { fill: var(--wp--custom--map--shade--s-0, color-mix(in srgb, var(--wp--preset--color--brand, #801518) 6%, var(--wp--preset--color--base, #fff))); }
.sgui-lagen__area--s1 { fill: var(--wp--custom--map--shade--s-1, color-mix(in srgb, var(--wp--preset--color--brand, #801518) 10%, var(--wp--preset--color--base, #fff))); }
.sgui-lagen__area--s2 { fill: var(--wp--custom--map--shade--s-2, color-mix(in srgb, var(--wp--preset--color--brand, #801518) 14%, var(--wp--preset--color--base, #fff))); }
.sgui-lagen__area--s3 { fill: var(--wp--custom--map--shade--s-3, color-mix(in srgb, var(--wp--preset--color--brand, #801518) 18%, var(--wp--preset--color--base, #fff))); }

.sgui-lagen__area.is-active {
	fill: var(--wp--custom--map--shade--active, var(--wp--preset--color--brand, #801518));
}

/* Hover/Sync-Hervorhebung (Karte-Links, Split-Hover, Card-Sync). */
.sgui-lagen a:hover .sgui-lagen__area,
.sgui-lagen a:focus-visible .sgui-lagen__area,
.sgui-lagesplit__map a:hover .sgui-lagen__area,
.sgui-lagesplit__map a:focus-visible .sgui-lagen__area,
.sgui-lagen__area.is-hover {
	fill: var(--wp--custom--map--shade--active, var(--wp--preset--color--brand, #801518));
	stroke: var(--wp--custom--map--stroke, var(--wp--preset--color--ink, #1b1b1b));
	stroke-width: 2px;
	opacity: 1;
}

.sgui-lagen :where(a):hover .sgui-lagen__area.is-active,
.sgui-lagen :where(a):focus-visible .sgui-lagen__area.is-active,
.sgui-lagesplit__map :where(a):hover .sgui-lagen__area.is-active,
.sgui-lagesplit__map :where(a):focus-visible .sgui-lagen__area.is-active {
	fill: var(--wp--custom--map--shade--hover, var(--wp--preset--color--navy, #5a0e11));
}

/* Ein aktives Gebiet liest sich sofort: die Nachbarflaechen treten nur waehrend
   Hover/Fokus bzw. Card-Sync zurueck, der ruhige Grundzustand bleibt erhalten. */
.sgui-lagesplit__map:has( :where(a):hover ) :where(a):not( :hover ) .sgui-lagen__area,
.sgui-lagesplit__map:has( :where(a):focus-visible ) :where(a):not( :focus-visible ) .sgui-lagen__area,
.sgui-lagesplit__map:has( :where(.sgui-lagen__area).is-hover ) .sgui-lagen__area:not( .is-hover ) {
	opacity: .56;
}

.sgui-lagen__label {
	fill: color-mix(in srgb, var(--wp--preset--color--ink) 78%, transparent);
	font-family: inherit;
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -0.01em;
	pointer-events: none;
	paint-order: stroke;
	stroke: color-mix(in srgb, var(--wp--preset--color--base, #fff) 82%, transparent);
	stroke-width: 5;
}

.sgui-lagen__label.is-active {
	fill: #fff;
	stroke: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}

/* Punkt-Marker fuer Kern-Stadtteile ohne Label-Platz. */
.sgui-lagen__dot {
	fill: var(--wp--preset--color--base, #fff);
	stroke: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	stroke-width: 3;
	pointer-events: none;
}

.sgui-lagen__dot.is-active {
	fill: var(--wp--preset--color--ink);
	stroke: #fff;
}

/* Ein Objekt als Pin: frei in Markenfarbe, vermittelt gedämpft. Nie klickbar, die Fläche bleibt das Ziel. */
.sgui-lagen__point {
	fill: var(--wp--preset--color--brand, #801518);
	stroke: var(--wp--preset--color--base, #fff);
	stroke-width: 1.5px;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow( 0 1px 1.5px rgb( 0 0 0 / .28 ) );
	pointer-events: none;
}

.sgui-lagen__point.is-sold {
	fill: color-mix( in srgb, var(--wp--preset--color--ink, #1b1b1b) 55%, var(--wp--preset--color--base, #fff) );
}

/* Attribution: Quelle der Geometrie, leise. */
.sgui-lagen__attribution a,
.sgui-lagecards__attribution a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	opacity: 0.75;
}

.sgui-lagen__attribution a:hover,
.sgui-lagecards__attribution a:hover {
	text-decoration: underline;
	opacity: 1;
}