/* Stadtteil-Cards: scrollbare Peek-Row, Karten-Visual, Token-Farben. */
.sgui-lagecards {
	padding-block: var(--wp--custom--layout--section-space, clamp(4rem, 5.5vw, 5rem));
}

.sgui-lagecards__inner {
	max-width: min(var(--wp--custom--layout--shell-max, 1512px), 100%);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.25rem) var(--wp--style--root--padding-right, 1.25rem);
}

.sgui-lagecards__row {
	display: flex;
	gap: clamp(0.8rem, 1.6vw, 1.15rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: 0.35rem 1.1rem;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent) transparent;
}

.sgui-lagecard {
	position: relative;
	display: flex;
	flex: 0 0 clamp(232px, 23vw, 276px);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	scroll-snap-align: start;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: var(--wp--preset--color--ink, #1b1b1b);
	text-decoration: none;
	transition: transform 220ms ease;
}


.sgui-lagecard:focus-visible {
	outline: 2px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand));
	outline-offset: 3px;
}

.sgui-lagecard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}

@media (hover: hover) {
	.sgui-lagecard:hover .sgui-lagecard__img {
		transform: scale(1.06);
	}
}

/* Fallback ohne Foto: Karten-Visual auf der dunklen Media-Card-Flaeche. */

.sgui-lagecard__map {
	position: absolute;
	inset: 4% 3% 26% 3%;
	display: flex;
	align-items: center;
}

.sgui-lagecard__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Photo cards carry the hero's flat ink layer; the dark map fallback needs none. */
.sgui-lagecard__scrim {
	position: absolute;
	inset: 0;
	background: var(--wp--custom--ui--scrim);
	pointer-events: none;
}

.sgui-lagecard--map .sgui-lagecard__scrim {
	background: none;
}

.sgui-lagecard__body {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name name"
		"dir cta";
	gap: 0.3rem 0.75rem;
	align-items: end;
	margin-top: auto;
	width: 100%;
	padding: 2.8rem 1rem 1rem;
	color: #fff;
}

.sgui-lagecard__name {
	grid-area: name;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.35;
}

.sgui-lagecard__dir {
	grid-area: dir;
	min-width: 0;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.45;
	color: rgb(255 255 255 / 0.84);
}

.sgui-lagecard__cta {
	grid-area: cta;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	justify-self: end;
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
}

.sgui-lagecard__cta svg {
	width: 0.85em;
	height: 0.85em;
	transition: transform 200ms ease;
}

@media (hover: hover) {
	.sgui-lagecard:hover .sgui-lagecard__cta svg {
		transform: translateX(3px);
	}
}

/* Kompakt-Einsatz in Prose-Spalten (Hub/Detail): Sektions-Padding raus. */
.fyh-legalprose .sgui-lagecards,
.fyh-service-content .sgui-lagecards {
	padding-block: 0.5rem 0;
}

.fyh-legalprose .sgui-lagecards__inner,
.fyh-service-content .sgui-lagecards__inner {
	padding-inline: 0;
}

/* Attribution: leise, rechts oben ueber Row/Karte. */
.sgui-lagecards__attribution {
	margin: 0 0 0.35rem;
	text-align: right;
	font-size: .6875rem;
}

.sgui-lagecards__attribution a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	opacity: 0.75;
}

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

/* --- Split-Layout: grosse Karte links (sticky), Cards rechts im Seitenfluss --- */
.sgui-lagesplit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

body.admin-bar { --sgui-admin-offset: var(--wp-admin--admin-bar--height, 32px); }

.sgui-lagesplit__map {
	position: sticky;
	top: calc( var(--fyh-nav-height, 76px) + var(--sgui-admin-offset, 0px) + clamp( 2rem, 3vw, 3rem ) );
}

/* The map stands directly on the section ground: no frame, no tinted panel. */
.sgui-lagesplit__map .sgui-lagen__svg {
	display: block;
	width: 100%;
	height: auto;
}

.sgui-lagecards.is-split > .sgui-lagecards__inner > .fyh-objhead {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Attribution bleibt Teil des Kartenkopfs. Tooltips liegen im shadcn-Portal. */

.sgui-lagesplit__map .sgui-lagecards__attribution {
	text-align: right;
	margin-top: 0.25rem;
}

.sgui-lagesplit__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.7rem, 1.4vw, 1rem);
	max-height: none;
	overflow: visible;
	padding: 0.3rem 0.4rem 0.3rem 0.1rem;
}

.sgui-lagesplit__cards .sgui-lagecard {
	flex: initial;
	width: 100%;
}

/* Wide screens: three compact card columns beside the sticky map, so the map column
   stays company to the cards instead of a tall empty strip. */
@media (min-width: 1280px) {
	.sgui-lagesplit:not(.sgui-lagesplit--map-right) {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
	}
	.sgui-lagesplit:not(.sgui-lagesplit--map-right) .sgui-lagesplit__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Mobil: Split faellt auf Karte oben + horizontale Row zurueck. */
@media (max-width: 640px) {
	.sgui-lagesplit {
		display: block;
	}

	.sgui-lagesplit__map {
		position: static;
		margin-bottom: 1.1rem;
	}

	.sgui-lagesplit__cards {
		display: flex;
		gap: 0.8rem;
		max-height: none;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		padding-block: 0.35rem 1rem;
	}

	.sgui-lagesplit__cards .sgui-lagecard {
		flex: 0 0 min(78vw, 250px);
		scroll-snap-align: start;
	}
}

/* Mini-Visuals: Abstufungen dezenter halten (Karte traegt die Farbe). */
.sgui-lagecard__svg .sgui-lagen__area--s0 { fill: color-mix(in srgb, var(--wp--preset--color--ink) 10%, var(--wp--preset--color--base, #fff)); }
.sgui-lagecard__svg .sgui-lagen__area--s1 { fill: color-mix(in srgb, var(--wp--preset--color--ink) 16%, var(--wp--preset--color--base, #fff)); }
.sgui-lagecard__svg .sgui-lagen__area--s2 { fill: color-mix(in srgb, var(--wp--preset--color--ink) 24%, var(--wp--preset--color--base, #fff)); }
.sgui-lagecard__svg .sgui-lagen__area--s3 { fill: color-mix(in srgb, var(--wp--preset--color--ink) 32%, var(--wp--preset--color--base, #fff)); }

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

/* Mini maps on the ink card: quiet hairlines, the active district carries the accent. */
.sgui-lagecard__svg .sgui-lagen__area {
	stroke: color-mix(in srgb, var(--wp--preset--color--ink, #1b1b1b) 55%, transparent);
	stroke-width: .6px;
}

.sgui-lagecard__svg .sgui-lagen__dot {
	display: none;
}


/* --- Sven-Anordnung (mapSide=right): Kopf + Cards links, Karte rechts. --- */
.sgui-lagesplit--map-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.sgui-lagesplit--map-right .sgui-lagesplit__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sgui-lagesplit__head {
	margin-bottom: 1.35rem;
}

.sgui-lagesplit--map-right .sgui-lagesplit__cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-height: none;
	overflow: visible;
	padding: 0.2rem 0 0;
}

/* The whole card is the link at every width, so the squeezed text CTA drops out. */
.sgui-lagesplit--map-right .sgui-lagecard__cta {
	display: none;
}

.sgui-lagesplit--map-right .sgui-lagecard__body {
	grid-template-areas:
		"name name"
		"dir dir";
}

/* Wide screens: three compact photo cards per row next to the map. */
@media (min-width: 1280px) {
	.sgui-lagesplit--map-right .sgui-lagesplit__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Stacked, the map is supporting context: capped so it never outweighs the cards. */
@media (max-width: 640px) {
	.sgui-lagesplit__map .sgui-lagen__svg {
		max-height: min(60vh, 26rem);
	}
}

.sgui-lagesplit__all {
	margin: 1.1rem 0 0;
}

.sgui-lagesplit--map-right .sgui-lagesplit__map {
	position: static;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

@media (max-width: 640px) {
	.sgui-lagesplit--map-right {
		display: block;
	}

	/* Stacked, the map is its own sub-block: section rhythm above, link rhythm below. */
	.sgui-lagesplit--map-right .sgui-lagesplit__map {
		margin-block: clamp(2rem, 5vw, 2.5rem) 1.5rem;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__cards {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* The rail runs to both viewport edges; the first card stays on the section edge. */
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
		padding: 0.35rem var(--wp--style--root--padding-left, 1.5rem) 1rem;
		scroll-padding-inline: var(--wp--style--root--padding-left, 1.5rem);
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__cards .sgui-lagecard {
		flex: 0 0 min(70vw, 240px);
		scroll-snap-align: start;
	}
}

/* Karten-Kopfzeile (Butterling-Muster): Eyebrow links, Attribution rechts. */
.sgui-lagesplit__maphead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

/* The map heads its own column, so its rubric reads one step larger than a section label. */
.sgui-lagesplit__mapeyebrow {
	--sgui-rubric-margin: 0;
	--sgui-rubric-size: var(--wp--custom--type--label-size-lg, var(--wp--custom--type--label-size, .75rem));
}

.sgui-lagesplit__maphead .sgui-lagecards__attribution {
	margin: 0;
}

/* Facts under the map: count, area and how to use it, on one hairline, no box. */
.sgui-lagesplit__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	margin-top: clamp( 1rem, 2vw, 1.5rem );
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.sgui-lagesplit__stats {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgui-lagesplit__stats li {
	display: grid;
	gap: .15rem;
}

.sgui-lagesplit__stats strong {
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.sgui-lagesplit__stats span,
.sgui-lagesplit__hint {
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
	line-height: 1.45;
}

.sgui-lagesplit__hint {
	flex: 1 1 14rem;
	margin: 0;
	padding-left: 2rem;
	border-left: 1px solid var(--wp--preset--color--hairline);
}

.sgui-lagesplit__hint strong {
	display: block;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

@media ( max-width: 640px ) {
	.sgui-lagesplit__hint {
		padding-left: 0;
		border-left: 0;
	}
}

/* Side by side the map never outgrows the card column: it adds no height of its
   own (contain: size) and scales into the row the cards define. */
@media (min-width: 1280px) {
	.sgui-lagesplit--map-right .sgui-lagesplit__map {
		align-self: stretch;
		contain: size;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__map > .sgui-shadcn {
		flex: 1 1 0;
		min-height: 0;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__map .sgui-lagen__svg {
		width: 100%;
		height: 100%;
	}
}

/* Tablet (641–899px), Karte links: neben der Karte blieben nur ~180px je Card und
   die Metazeile brach Wort fuer Wort. Wie die rechte Variante stapeln Karte und
   Cards; die Karte ist Kontext (nicht sticky), die Cards laufen zweispaltig. */
@media (min-width: 641px) and (max-width: 899px) {
	.sgui-lagesplit:not(.sgui-lagesplit--map-right) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sgui-lagesplit:not(.sgui-lagesplit--map-right) .sgui-lagesplit__map {
		position: static;
	}
}

/* Below 1280px there is no room for two columns of cards beside the map: the cards take the
   full width in three columns and the map follows as a compact block, so no column stands empty. */
@media (min-width: 641px) and (max-width: 1279px) {
	.sgui-lagesplit.sgui-lagesplit--map-right {
		grid-template-columns: minmax(0, 1fr);
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The map follows as one compact band: map left, facts right. */
	.sgui-lagesplit--map-right .sgui-lagesplit__map {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(13rem, 1fr);
		grid-template-areas: "head head" "map facts";
		align-items: center;
		gap: 0 clamp(1.5rem, 4vw, 3rem);
		margin-top: clamp(1.5rem, 3vw, 2.5rem);
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__maphead {
		grid-area: head;
		margin-bottom: 1rem;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__map > :is(svg, .sgui-shadcn) {
		grid-area: map;
		min-width: 0;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__map .sgui-lagen__svg {
		max-height: 18rem;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__facts {
		grid-area: facts;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__hint {
		padding-left: 0;
		border-left: 0;
	}
}

/* Map left (hub pages): the sticky column fills its height with the facts and the district
   index; a long index (large cities) scrolls inside, the column never outgrows the window. */
@media (min-width: 900px) {
	.sgui-lagesplit:not(.sgui-lagesplit--map-right) .sgui-lagesplit__map {
		display: flex;
		flex-direction: column;
		max-height: calc( 100dvh - var(--fyh-nav-height, 76px) - var(--sgui-admin-offset, 0px) - clamp( 2rem, 3vw, 3rem ) - 1rem );
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.sgui-lagesplit:not(.sgui-lagesplit--map-right) .sgui-lagesplit__map > * {
		flex: none;
	}

	.sgui-lagesplit:not(.sgui-lagesplit--map-right) .sgui-lagesplit__map > .sgui-lagesplit__index {
		flex: 1 1 auto;
		min-height: 6rem;
	}
}

.sgui-lagesplit__index {
	display: grid;
	align-content: start;
	gap: .1rem;
	margin: 1.25rem 0 0;
	padding: 1rem 10px 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Full-width rows like the filter rail: name left, area right. */
.sgui-lagesplit__index .fyh-opt {
	width: calc(100% + 20px);
}

@media (max-width: 899px) {
	/* Stacked, every card is already on screen: the index would only repeat them. */
	.sgui-lagesplit__index {
		display: none;
	}
}

/* Closing tile: content instead of an empty slot in the last row, light instead of a photo. */
.sgui-lagecard--fill {
	border-color: var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--surface, #f5f5f7);
}

.sgui-lagecard--fill .sgui-lagecard__fill-icon {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--navy, var(--wp--preset--color--ink));
}

.sgui-lagecard--fill .sgui-lagecard__body,
.sgui-lagecard--fill .sgui-lagecard__name,
.sgui-lagecard--fill .sgui-lagecard__cta {
	color: var(--wp--preset--color--ink);
}

.sgui-lagecard--fill .sgui-lagecard__body {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "name" "dir" "cta";
}

.sgui-lagecard--fill .sgui-lagecard__dir {
	color: var(--wp--preset--color--muted);
	white-space: normal;
}