/* Stadtteil-Cards: scrollbare Peek-Row, Karten-Visual, Token-Farben. */
.sgui-lagecards {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.sgui-lagecards__inner {
	max-width: min(90rem, 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, #1a2434) 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, #1a2434) 10%, transparent);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: linear-gradient(135deg, var(--wp--preset--color--ink, #1a2434), color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 78%, #3a4a66));
	text-decoration: none;
	box-shadow: 0 8px 24px -14px color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 35%, transparent);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

@media (hover: hover) {
	.sgui-lagecard:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 55%, transparent);
	}
}

.sgui-lagecard:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink, #1a2434);
	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 hellem Grund, Body bleibt lesbar. */
.sgui-lagecard--map {
	background: linear-gradient(165deg, color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 5%, var(--wp--preset--color--base, #fff)), color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 16%, var(--wp--preset--color--surface, #f5f5f7)));
}

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

.sgui-lagecard--map .sgui-lagecard__svg {
	filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 22%, transparent));
}

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

.sgui-lagecard__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 28%, color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 14%, transparent) 48%, color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 94%, transparent) 100%);
	pointer-events: none;
}

.sgui-lagecard--map .sgui-lagecard__scrim {
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 96%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 55%, transparent) 55%, transparent 100%);
}

.sgui-lagecard__body {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"chip chip"
		"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__chip {
	grid-area: chip;
	display: inline-flex;
	align-items: center;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.85);
	filter: var(--wp--custom--glow--soft, drop-shadow(0 1px 1px rgb(0 0 0 / .6)));
}

.sgui-lagecard__name {
	grid-area: name;
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -0.025em;
	line-height: 1.35;
	text-shadow: var(--wp--custom--glow--title, 0 1px 2px rgb(0 0 0 / .6));
}

.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);
	filter: var(--wp--custom--glow--soft, drop-shadow(0 1px 1px rgb(0 0 0 / .6)));
}

.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;
	filter: var(--wp--custom--glow--soft, drop-shadow(0 1px 1px rgb(0 0 0 / .6)));
}

.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: 0.62rem;
}

.sgui-lagecards__attribution a {
	color: var(--wp--preset--color--muted, #808080);
	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;
}

.sgui-lagesplit__map {
	position: sticky;
	top: calc( var(--fyh-nav-height, 76px) + clamp( 1.5rem, 2.5vw, 2.25rem ) );
}

.sgui-lagesplit__map .sgui-lagen__svg {
	display: block;
	width: 100%;
	height: auto;
	padding: clamp(0.8rem, 1.6vw, 1.25rem);
	border: 1px solid var(--wp--custom--map--border, color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 13%, transparent));
	border-radius: var(--wp--custom--radius--lg, 28px);
	background: var(--wp--custom--map--surface, color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 4%, var(--wp--preset--color--base, #fff)));
	box-shadow: var(--wp--custom--map--shadow, 0 26px 60px -44px rgba(15,42,67,.58));
}

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

/* Sticky ist zugleich der Positionierungs-Kontext fuer den Tooltip. */

.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%;
}

/* Mobil: Split faellt auf Karte oben + horizontale Row zurueck. */
@media (max-width: 899px) {
	.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, #1a2434) 10%, var(--wp--preset--color--base, #fff)); }
.sgui-lagecard__svg .sgui-lagen__area--s1 { fill: color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 16%, var(--wp--preset--color--base, #fff)); }
.sgui-lagecard__svg .sgui-lagen__area--s2 { fill: color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 24%, var(--wp--preset--color--base, #fff)); }
.sgui-lagecard__svg .sgui-lagen__area--s3 { fill: color-mix(in srgb, var(--wp--preset--color--ink, #1a2434) 32%, var(--wp--preset--color--base, #fff)); }

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

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

/* Zwei kompakte Jobs unter der Split-Karte: Kaufen + Verkaufen. */
.sgui-lagesplit__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 0.8rem;
}

.sgui-lagesplit__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.7rem;
	min-width: 0;
	min-height: 7.25rem;
	padding: 0.95rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 10%, transparent);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: linear-gradient(120deg, var(--wp--preset--color--navy, #0f2a43), color-mix(in srgb, var(--wp--preset--color--navy, #0f2a43) 84%, #3a5874));
	color: #fff;
	box-shadow: 0 16px 38px -30px rgba(15, 42, 67, .7);
}

.sgui-lagesplit__cta:only-child {
	grid-column: 1 / -1;
}

.sgui-lagesplit__cta--buy {
	border: 1px solid var(--wp--preset--color--hairline, #d9dce1);
	background: var(--wp--preset--color--surface, #f5f5f7);
	color: var(--wp--preset--color--ink, #1a2434);
}

.sgui-lagesplit__cta--buy .sgui-lagesplit__cta-eyebrow {
	color: var(--wp--preset--color--ink, #1a2434);
}

.sgui-lagesplit__cta--buy .sgui-lagesplit__cta-title {
	color: var(--wp--preset--color--ink, #1a2434);
}

.sgui-lagesplit__cta-copy {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.sgui-lagesplit__cta-eyebrow {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.65);
}

.sgui-lagesplit__cta-title {
	color: #fff;
	font-size: clamp(0.92rem, 1.25vw, 1.04rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.sgui-lagesplit__cta-actions {
	margin-top: auto;
}

.sgui-lagesplit__cta-actions .wp-block-button__link {
	min-height: 2.5rem;
	padding: 0.65rem 1rem;
	font-size: 0.8rem;
}

@media (max-width: 720px) {
	.sgui-lagesplit__actions {
		grid-template-columns: 1fr;
	}

	.sgui-lagesplit__cta {
		min-height: 0;
	}
}

/* --- Sven-Anordnung (mapSide=right): Kopf + Cards links, Karte rechts. --- */
.sgui-lagesplit--map-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	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 .fyh-objhead__title {
	font-size: clamp(1.7rem, 2.6vw, 2.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;
}

/* Zwei Spalten bleiben auch auf Wide-Desktop bewusst bestehen: drei kurze
   Reihen nehmen der bounded-sticky Karte ihren Scrollweg. */
.sgui-lagesplit__all {
	margin: 1.1rem 0 0;
}

.sgui-lagesplit--map-right .sgui-lagesplit__map {
	position: sticky;
	top: calc( var(--fyh-nav-height, 76px) + clamp( 1.5rem, 2.5vw, 2.25rem ) );
	align-self: start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: fit-content;
	min-height: 0;
}

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

	.sgui-lagesplit--map-right .sgui-lagesplit__map {
		position: static;
		min-height: 0;
		margin-bottom: 1.1rem;
	}

	.sgui-lagesplit--map-right .sgui-lagesplit__cards {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-block: 0.35rem 1rem;
	}

	.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: 0.6rem;
}

.sgui-lagesplit__mapeyebrow {
	margin: 0;
	font-size: clamp(1.05rem, 1.35vw, 1.22rem);
	font-weight: 700;
	letter-spacing: 0.11em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy, #0f2a43);
}

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

/* 21.07. (2. Wende): Karten-Inhalt vertikal ZENTRIERT zur Card-Spalte —
   'Karte oben' liess unten 200px+ Leerraum (User: Raum besser fuellen). */
.sgui-lagesplit--map-right .sgui-lagesplit__map {
	justify-content: center;
}

/* Ein Sticky-Element muss niedriger als sein sichtbarer Raum sein. Auf sehr
   kurzen Desktop-Viewports bleibt die Karte deshalb bewusst im Seitenfluss. */
@media (min-width: 900px) and (max-height: 720px) {
	.sgui-lagesplit--map-right .sgui-lagesplit__map {
		position: static;
	}
}