/* Singulary Lagen — GEMEINSAME Karten-Basis (Flaechen, Abstufungen,
   Labels, Punkte, Tooltip, Attribution). Wird von BEIDEN Blocks als
   Style-Dependency geladen — Block-CSS enthaelt nur Block-Spezifisches.
   Lektion 20.07.: verstreute Basis-Styles = kaputte Seiten, sobald nur
   EIN Block auf der Seite ist. */

.sgui-lagen__area {
	fill: var(--wp--custom--map--shade--s-0, color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 30%, var(--wp--preset--color--base, #fff)));
	stroke: var(--wp--preset--color--base, #fff);
	stroke-width: 2.5;
	stroke-linejoin: round;
	transition: fill 160ms ease, stroke-width 160ms ease, opacity 160ms ease, filter 160ms ease;
}

/* Index-stabile Navy-Abstufungen aus dem globalen Theme-Vertrag. */
.sgui-lagen__area--s0 { fill: var(--wp--custom--map--shade--s-0, color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 30%, 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--navy, #0f2a43) 46%, 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--navy, #0f2a43) 62%, 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--navy, #0f2a43) 76%, var(--wp--preset--color--base, #fff))); }

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

/* 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--navy, #0f2a43));
	stroke: #fff;
	stroke-width: 5;
	filter: drop-shadow( 0 6px 7px rgba( 15, 42, 67, .34 ) );
	opacity: 1;
}

.sgui-lagen a:hover .sgui-lagen__area.is-active,
.sgui-lagen a:focus-visible .sgui-lagen__area.is-active,
.sgui-lagesplit__map a:hover .sgui-lagen__area.is-active,
.sgui-lagesplit__map a:focus-visible .sgui-lagen__area.is-active {
	fill: color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 88%, #fff);
}

/* 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( a:hover ) a:not( :hover ) .sgui-lagen__area,
.sgui-lagesplit__map:has( a:focus-visible ) a:not( :focus-visible ) .sgui-lagen__area,
.sgui-lagesplit__map:has( .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, #1a2434) 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, #1a2434) 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, #1a2434) 55%, transparent);
	stroke-width: 3;
	pointer-events: none;
}

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

/* Tooltip (view.js): Ink-Panel, folgt dem Zeiger. */
.sgui-lagen__tooltip {
	position: absolute;
	z-index: 5;
	display: none;
	flex-direction: column;
	gap: 0.12rem;
	max-width: 230px;
	padding: 0.6rem 0.8rem;
	border-radius: 12px;
	background: var(--wp--preset--color--ink, #1a2434);
	color: #fff;
	font-size: 0.8rem;
	line-height: 1.35;
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 65%, transparent);
	pointer-events: none;
	transform: translateY(-100%);
}

.sgui-lagen__tooltip.is-visible {
	display: flex;
}

.sgui-lagen__tooltip.is-flipped {
	transform: translate(-100%, -100%);
}

.sgui-lagen__tooltip strong {
	font-size: 0.9rem;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.sgui-lagen__tooltip span {
	color: rgb(255 255 255 / 0.72);
}

.sgui-lagen__tooltip em {
	margin-top: 0.15rem;
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 650;
	color: rgb(255 255 255 / 0.85);
}

/* Attribution: ODbL-Minimalform, leise. */
.sgui-lagen__attribution a,
.sgui-lagecards__attribution a {
	color: var(--wp--preset--color--muted, #808080);
	text-decoration: none;
	opacity: 0.75;
}

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