/**
 * singulary-ui/immobilien — Objekt-Listing. Kaskade: Basis, dann Karten-Varianten (--cta/--soon/--add),
 * dann Layout-Varianten (is-grid/is-browser); gleiche Spezifität, gewinnen nur durch spätere Position.
 */

/* --- Section (full-bleed, Inset wie Butterling) --------------------------- */
.fyh-objsection {
	background: var(--wp--preset--color--base);
	padding-block: var(--wp--custom--layout--section-space, clamp(4rem, 5.5vw, 5rem));
	padding-left: var(--wp--custom--layout--gutter, clamp( 1.5rem, 5vw, 6rem ));
	padding-right: var(--wp--custom--layout--gutter, clamp( 1.5rem, 5vw, 6rem ));
}

/* Die Startseiten-Variante folgt derselben zentrierten Site-Shell wie Navbar
   und Hero. Archiv/Grid behalten ihre bewusst dichtere 1248px-Leseachse. */
.fyh-objsection:not( .is-grid ):not( .is-browser ) {
	--fyh-shell-width: min( 100vw, var(--wp--custom--layout--shell-max, 1512px) );
	--fyh-shell-offset: max( 0px, calc( ( 100vw - var(--fyh-shell-width) ) / 2 ) );
	padding-left: calc( var(--fyh-shell-offset) + var(--wp--style--root--padding-left, clamp( 1.25rem, 5vw, 6rem ) ) );
	padding-right: calc( var(--fyh-shell-offset) + var(--wp--style--root--padding-right, clamp( 1.25rem, 5vw, 6rem ) ) );
}

/* --- Kopf (Eyebrow / two-tone H2 / Link) ---------------------------------- */
.fyh-objhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.fyh-objhead__copy { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; max-width: 58rem; }
.fyh-objhead__eyebrow { --sgui-rubric-margin: 0; }
.fyh-objhead__title { margin: 0; max-width: 36ch; font-size: var(--wp--custom--type--section-size, clamp(1.875rem, 3vw, 2.5rem)); line-height: var(--wp--custom--type--section-leading, 1.15); font-weight: var(--wp--custom--type--section-weight, 650); letter-spacing: var(--wp--custom--type--section-tracking, -.025em); text-wrap: balance; }
.fyh-h2soft { color: var(--wp--preset--color--muted); }
.fyh-objlink { margin: 0; }
.fyh-objlink a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--ink); }


/* --- Carousel (bricht full-bleed aus dem Section-Inset aus) --------------- */
.fyh-listings {
	--fyh-shell-width: min( 100vw, var(--wp--custom--layout--shell-max, 1512px) );
	--fyh-content-width: max(
		0px,
		calc(
			var(--fyh-shell-width)
			- var(--wp--style--root--padding-left, clamp( 1.25rem, 5vw, 6rem ))
			- var(--wp--style--root--padding-right, clamp( 1.25rem, 5vw, 6rem ))
		)
	);
	--fyh-inset: max( 0px, calc( ( var(--fyh-shell-width) - var(--fyh-content-width) ) / 2 ) );
	--fyh-track-inset: calc(
		var(--fyh-shell-offset)
		+ var(--wp--style--root--padding-left, clamp( 1.25rem, 5vw, 6rem ))
	);
	display: flex;
	gap: 24px;
	box-sizing: border-box;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-top: 0; /* Abstand kommt vom Kopf (falls vorhanden), s.u. */
	scrollbar-width: none;
	/* Die erste Karte startet auf der Navbar-/Hero-Achse. Der Scrollport selbst
	   ist aber full-bleed, damit Karten auf beiden Seiten vollstaendig aus dem
	   Viewport laufen und nicht an der Inhaltskante abgeschnitten werden. */
	width: 100vw;
	max-width: none;
	margin-left: calc( -1 * var(--fyh-track-inset) );
	padding: 6px var(--fyh-track-inset) 12px;
	scroll-padding-inline: var(--fyh-track-inset);
}
.fyh-listings::after { content: ""; flex: 0 0 0; }
.fyh-listings::-webkit-scrollbar { height: 0; }
.fyh-objhead + .fyh-listings { margin-top: clamp( 1.5rem, 2.4vw, 2rem ); }

/* --- Karte ---------------------------------------------------------------- */
.fyh-listing { box-sizing: border-box; position: relative; flex: 0 0 clamp(270px, 29%, 390px); height: 448px; border-radius: var(--wp--custom--radius--md, 16px); overflow: hidden; display: flex; align-items: flex-end; scroll-snap-align: start; scroll-snap-stop: always; text-decoration: none; transition: transform .4s ease; }
.fyh-objsection:not( .is-grid ):not( .is-browser ) .fyh-listing { height: 476px; }
.fyh-listing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.fyh-listing:hover img { transform: scale(1.05); }
.fyh-listing__scrim { position: absolute; inset: 0; background: var(--wp--custom--ui--scrim); z-index: 1; }
.fyh-listing__body {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	grid-template-areas:
		"location location"
		"title title"
		"price area";
	align-items: start;
	gap: 8px 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	color: #fff;
}
.fyh-listing__price {
	grid-area: price;
	align-self: end;
	min-width: 0;
	color: rgba( 255, 255, 255, .88 );
	font-size: .7rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .015em;
	filter: var(--wp--custom--glow--soft);
}
.fyh-listing__loc {
	grid-area: location;
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	filter: var(--wp--custom--glow--soft);
}
.fyh-listing__title {
	grid-area: title;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0;
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.375;
	letter-spacing: -.025em;
	filter: var(--wp--custom--glow--soft);
}
.fyh-listing__area {
	grid-area: area;
	align-self: end;
	justify-self: end;
	font-size: .7rem;
	line-height: 1.5;
	color: rgba( 255, 255, 255, .85 );
	filter: var(--wp--custom--glow--soft);
}

/* --- Badges ---------------------------------------------------------------
   Status tags on the photo: the shadcn Badge primitive with the line's geometry
   (button radius, caps label). Its pill utilities are !important, so the tag
   overrides geometry the same way and recolours through the badge tokens.
   Verkaufte Bilder bleiben voll in Farbe – nur das Tag markiert den Status. */
.fyh-listing__badge {
	position: absolute; top: 16px; right: 16px; left: auto; z-index: 3;
	display: inline-flex; align-items: center;
	height: 28px !important; padding: 0 10px !important;
	border: 1px solid rgb( 255 255 255 / .22 ) !important;
	border-radius: var(--wp--custom--button--radius, 8px) !important;
	--secondary: color-mix( in srgb, var(--wp--preset--color--ink-deep) 72%, transparent );
	--secondary-foreground: #fff;
	background: var(--secondary); color: var(--secondary-foreground);
	-webkit-backdrop-filter: blur( 10px ); backdrop-filter: blur( 10px );
	font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em; line-height: 1; text-transform: uppercase;
}
.fyh-listing__badge--neu { border-color: transparent !important; --secondary: var(--wp--preset--color--base, #fff); --secondary-foreground: var(--wp--preset--color--ink); }

/* --- End-CTA-Karte: klare Markenflaeche als Abschluss der Schiene. --- */
/* Action tiles carry the brand through the media-card surface token; the arrow turns white. */
.fyh-listing.fyh-listing--cta { --foreground: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); color: #fff; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 28px; }
.fyh-listing.fyh-listing--cta:hover { --foreground: var(--wp--preset--color--navy); }
.fyh-cta__top { display: flex; flex-direction: column; gap: 12px; }
.fyh-cta__eyebrow { font-size: var(--wp--custom--type--label-size, .75rem); font-weight: var(--wp--custom--type--label-weight, 600); letter-spacing: var(--wp--custom--type--label-tracking, .08em); text-transform: uppercase; color: var(--wp--preset--color--on-dark-soft); }
.fyh-cta__title { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.fyh-cta__soft { color: var(--wp--preset--color--on-dark-soft); }
.fyh-cta__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fyh-cta__sub { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--on-dark-soft); max-width: 16em; }
/* brand carries the action on the ink tile, like the hero's primary button. */
.fyh-cta__arrow { flex-shrink: 0; width: 52px; height: 52px; border-radius: 999px; background: var(--wp--preset--color--base, #fff); color: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); display: flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.fyh-cta__arrow svg { width: 22px; height: 22px; }
.fyh-listing--cta:hover .fyh-cta__arrow { transform: translateX(3px); }

/* --- Coming-Soon-Karte (wenn 0 Objekte) ---------------------------------- */
.fyh-listing--soon { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--hairline); flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 28px; }
.fyh-soon__top { display: flex; flex-direction: column; gap: 12px; }
.fyh-soon__eyebrow { font-size: var(--wp--custom--type--label-size, .75rem); font-weight: var(--wp--custom--type--label-weight, 600); letter-spacing: var(--wp--custom--type--label-tracking, .08em); text-transform: uppercase; color: var(--wp--preset--color--brand); }
.fyh-soon__title { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--wp--preset--color--ink); }
.fyh-soon__sub { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--muted); max-width: 18em; }

/* --- "Eigene Immobilie anbieten"-Kachel (Butterling AddOwnTile) ----------- */
.fyh-listing--add {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 24px;
	text-align: center;
	/* Brand action tile like "Alle Angebote": the media-card primitive paints --foreground. */
	--foreground: var(--wp--custom--ui--primary, var(--wp--preset--color--brand));
	border: 0;
	color: #fff;
	overflow: visible;
}
.fyh-listing.fyh-listing--add:hover { --foreground: var(--wp--custom--ui--primary-hover); }
.fyh-add__plus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 999px;
	border: 1px solid rgb( 255 255 255 / .5 );
	background: transparent;
	color: #fff;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}
.fyh-add__plus svg { width: 24px; height: 24px; }
.fyh-listing--add:hover .fyh-add__plus { transform: scale( 1.1 ); background: #fff; color: var(--wp--custom--ui--primary); }
.fyh-add__eyebrow { margin-top: 1.1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgb( 255 255 255 / .74 ); }
.fyh-add__title { margin: .4rem 0 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.fyh-add__body { margin: .5rem 0 0; max-width: 22ch; font-size: .78rem; line-height: 1.45; color: rgb( 255 255 255 / .84 ); }
.fyh-add__link { display: inline-flex; align-items: center; gap: 4px; margin-top: .8rem; font-size: .72rem; font-weight: 600; color: #fff; transition: transform .2s ease; }
.fyh-add__link svg { width: 12px; height: 12px; }
.fyh-listing--add:hover .fyh-add__link { transform: translateX( 2px ); }

/* Mobil: Carousel-Karten breiter (270px wirkten schmal) — ~84vw, eine Karte
   dominiert, die nächste lugt als Peek rein. Nur Carousel (Grid hat flex:none). */
@media ( max-width: 640px ) {
	.fyh-objsection:not( .is-grid ) .fyh-listing { flex-basis: 84vw; }
}

/* --- Grid-Variante (statt Carousel ein Raster) ----------------------------- */
.fyh-objsection.is-grid .fyh-listings {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	width: auto;
	max-width: none;
	margin-left: 0;
	padding: 6px 0 0;
	overflow: visible;
	scroll-snap-type: none;
}
.fyh-objsection.is-grid .fyh-listings::after { content: none; }
.fyh-objsection.is-grid .fyh-listing { flex: none; width: auto; }
@media ( max-width: 1023px ) {
	.fyh-objsection.is-grid .fyh-listings { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 639px ) {
	.fyh-objsection.is-grid .fyh-listings { grid-template-columns: 1fr; }
}

/* --- Browser-Layout (Archiv: Sticky-Filter-Rail links + Grid rechts) ------ */
.fyh-objsection.is-browser { padding-top: 2.25rem; }
.fyh-browser { display: grid; grid-template-columns: 220px minmax( 0, 1fr ); gap: 2rem; align-items: start; }
.fyh-browser [hidden] { display: none !important; }
.fyh-browser__main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
/* Im Browser-Grid 2 Spalten (Rail nimmt Platz), erst breit 3 */
.fyh-objsection.is-browser .fyh-listings { grid-template-columns: repeat( 2, 1fr ); }
@media ( min-width: 1280px ) {
	.fyh-objsection.is-browser .fyh-listings { grid-template-columns: repeat( 3, 1fr ); }
}
/* Schmale Phones: 2 Spalten quetschen die Karten-Titel — eine Spalte, volle Breite. */
@media ( max-width: 559px ) {
	.fyh-objsection.is-browser .fyh-listings { grid-template-columns: 1fr; }
}

/* Rail */
/* Sticky filter rail never outgrows the window: long filter lists scroll inside the rail
   (the side padding keeps the hover pills of .fyh-opt unclipped). */
.fyh-rail { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 1.2rem; max-height: calc( 100vh - 8rem ); max-height: calc( 100dvh - 8rem ); margin-inline: -10px; padding-inline: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix( in srgb, var(--wp--preset--color--ink) 18%, transparent ) transparent; }
.fyh-rail__head { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: color-mix( in srgb, var(--wp--preset--color--ink) 72%, transparent ); }
.fyh-rail__reset { border: 0; background: none; padding: 0; font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--wp--preset--color--muted); cursor: pointer; }
.fyh-rail__reset:hover { color: var(--wp--preset--color--ink); }
.fyh-rail__sec { display: flex; flex-direction: column; }
.fyh-rail__label { margin: 0 0 .45rem; font-size: var(--wp--custom--type--label-size, .75rem); font-weight: var(--wp--custom--type--label-weight, 600); letter-spacing: var(--wp--custom--type--label-tracking, .12em); text-transform: uppercase; color: color-mix( in srgb, var(--wp--preset--color--ink) 48%, transparent ); }


.fyh-rail__live { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; border: 1px solid var(--wp--preset--color--hairline); border-radius: 10px; font-size: .78rem; color: var(--wp--preset--color--muted); }
.fyh-rail__live strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.fyh-rail__pulse { display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.fyh-rail__pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--custom--status--ok); animation: fyhPulse 1.6s ease-out infinite; }
@keyframes fyhPulse { 0% { box-shadow: 0 0 0 0 rgba( 26, 127, 55, .45 ); } 70% { box-shadow: 0 0 0 6px rgba( 26, 127, 55, 0 ); } 100% { box-shadow: 0 0 0 0 rgba( 26, 127, 55, 0 ); } }

/* Brand action tile on the media-card primitive, like the add tile: it paints --foreground. */
.fyh-rail__cta { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; --foreground: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); text-decoration: none; transition: transform .2s ease; }
.fyh-rail__cta-eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-soft); }
.fyh-rail__cta-title { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.fyh-rail__cta-body { font-size: .74rem; line-height: 1.45; color: var(--wp--preset--color--on-dark-soft); }
.fyh-rail__cta-link { margin-top: .25rem; font-size: .72rem; font-weight: 600; }

/* Mobile-Chips (ersetzen die Rail unter 1024px) */
.fyh-chips { display: none; flex-direction: column; gap: .5rem; }
.fyh-chips__row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fyh-chips__row::-webkit-scrollbar { display: none; }
.fyh-chip { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: .42rem .85rem; border: 1px solid var(--wp--preset--color--hairline); border-radius: 999px; background: #fff; font: inherit; font-size: .74rem; font-weight: 600; color: color-mix( in srgb, var(--wp--preset--color--ink) 75%, transparent ); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.fyh-chip.is-active { background: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); border-color: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); color: var(--wp--custom--ui--primary-foreground, #fff); }
.fyh-chip__count { font-size: .6875rem; font-weight: 600; opacity: .65; font-variant-numeric: tabular-nums; }

/* Leerzustand nach Filterung */
.fyh-browser__empty { padding: 2.5rem 1.5rem; border: 1px dashed var(--wp--preset--color--hairline); border-radius: var(--wp--custom--radius--md, 16px); text-align: center; color: var(--wp--preset--color--muted); }
.fyh-browser__empty p { margin: 0 0 .8rem; }
.fyh-browser__empty button { border: 0; border-radius: 999px; padding: .55rem 1.2rem; background: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); color: var(--wp--custom--ui--primary-foreground, #fff); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }

@media ( max-width: 1023px ) {
	.fyh-browser { grid-template-columns: 1fr; }
	.fyh-rail { display: none; }
	.fyh-chips { display: flex; }
}

/* Ohne Objekte erhält der Hinweis eine kompakte Zeile statt leerer Fotokarten. */
.fyh-listings.is-empty { flex-wrap: wrap; }
/* The carousel's end spacer would take one gap from the second card. */
.fyh-listings.is-empty::after { content: none; }
.fyh-objsection .fyh-listings.is-empty .fyh-listing {
	flex: 1 1 20rem;
	height: auto;
	min-height: 14rem;
	max-width: none;
	gap: 1.25rem;
}
.fyh-listings.is-empty .fyh-soon__title,
.fyh-listings.is-empty .fyh-cta__title { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }

/* Phone: the seller tile follows the listings. */
@media ( max-width: 900px ) {
	.fyh-objsection.is-browser .fyh-listing--add { order: 99; }
}