/**
 * singulary-ui/immobilien — datengetriebenes Objekt-Listing.
 * Nutzt dieselben Karten-Klassen wie das statische listings-Block (identische
 * Optik); hier self-contained, damit der Block auch ohne listings auf einer
 * Seite korrekt aussieht. Tokens aus theme.json.
 *
 * ORDNUNG = KASKADE: erst Basis (Section/Kopf/Carousel/Karte/Badges), dann
 * Karten-Varianten (--cta/--soon/--add), dann Layout-Varianten (is-grid/
 * is-browser). Varianten-Regeln haben gleiche Spezifität wie die Basis und
 * gewinnen nur durch spätere Position — nichts davor einsortieren!
 */

/* --- Section (full-bleed, Inset wie Butterling) --------------------------- */
.fyh-objsection {
	background: var(--wp--preset--color--base);
	padding-top: 3.5rem;
	padding-bottom: 4rem;
	padding-left: max(var(--wp--style--root--padding-left, 1.5rem), calc((100vw - 1248px) / 2));
	padding-right: max(var(--wp--style--root--padding-right, 1.5rem), calc((100vw - 1248px) / 2));
}

/* --- 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; }
.fyh-objhead__eyebrow { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.fyh-objhead__title { margin: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.14; font-weight: 800; letter-spacing: -0.02em; }
.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); }

.fyh-obj-empty { margin: 44px 0 0; color: var(--wp--preset--color--muted); font-size: 1rem; }

/* --- Carousel (bricht full-bleed aus dem Section-Inset aus) --------------- */
.fyh-listings {
	--fyh-inset: max(var(--wp--style--root--padding-left, 1.5rem), calc((100vw - 1248px) / 2));
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-top: 0; /* Abstand kommt vom Kopf (falls vorhanden), s.u. */
	scrollbar-width: none;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 6px 0 12px var(--fyh-inset);
	scroll-padding-left: var(--fyh-inset);
}
.fyh-listings::after { content: ""; flex: 0 0 var(--fyh-inset); }
.fyh-listings::-webkit-scrollbar { height: 0; }
.fyh-objhead + .fyh-listings { margin-top: 44px; }

/* --- Karte ---------------------------------------------------------------- */
.fyh-listing { box-sizing: border-box; position: relative; flex: 0 0 clamp(270px, 29%, 390px); height: 448px; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; scroll-snap-align: start; text-decoration: none; transition: transform .4s ease, box-shadow .4s ease; }
.fyh-listing:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,14,14,.12); }
.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: linear-gradient(180deg, transparent 30%, rgba(14,14,14,.9) 100%); z-index: 1; }
.fyh-listing__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 22px; color: #fff; }
.fyh-listing__price { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); font-size: 14px; font-weight: 600; }
.fyh-listing__loc { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); filter: var(--wp--custom--glow--soft); }
.fyh-listing__title { font-size: 18px; font-weight: 600; margin: 0; color: #fff; filter: var(--wp--custom--glow--soft); }
.fyh-listing__area { font-size: 13px; color: rgba(255,255,255,.85); }

/* --- Badges --------------------------------------------------------------- */
.fyh-listing__badge { position: absolute; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.fyh-listing__badge--neu { top: 16px; right: 16px; width: 54px; height: 54px; border-radius: 999px; background: var(--wp--preset--color--ink); color: #fff; border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.fyh-listing__badge--verkauft { top: 16px; left: 16px; height: 33px; padding: 0 16px; border-radius: 999px; background: var(--wp--preset--color--ink); color: #fff; text-transform: uppercase; display: flex; align-items: center; gap: 6px; box-shadow: 0 8px 22px -10px rgba( 16, 22, 34, .55 ); }
/* Verkaufte Bilder bleiben VOLL in Farbe (nicht grau/trübe) — nur der Banner markiert „verkauft". */
.fyh-listing__badge-ico { width: 13px; height: 13px; flex-shrink: 0; }

/* --- End-CTA-Karte (Ink, "Mehr Immobilien in Bayern") -------------------- */
.fyh-listing--cta { background: var(--wp--preset--color--ink); color: #fff; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 28px; }
.fyh-listing--cta:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,14,14,.18); }
.fyh-cta__top { display: flex; flex-direction: column; gap: 12px; }
.fyh-cta__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; 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: 800; 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; }
.fyh-cta__arrow { flex-shrink: 0; width: 52px; height: 52px; border-radius: 999px; background: #fff; color: var(--wp--preset--color--ink); 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 dashed var(--wp--preset--color--hairline); flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 28px; }
.fyh-listing--soon:hover { transform: none; box-shadow: none; }
.fyh-soon__top { display: flex; flex-direction: column; gap: 12px; }
.fyh-soon__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.fyh-soon__title { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; font-weight: 800; 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;
	background: rgba( 255, 255, 255, .55 );
	border: 2px dashed color-mix( in srgb, var(--wp--preset--color--ink) 22%, transparent );
	overflow: visible;
}
.fyh-listing--add:hover { border-color: var(--wp--preset--color--ink); background: #fff; }
.fyh-add__plus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 999px;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--ink) 25%, transparent );
	background: color-mix( in srgb, var(--wp--preset--color--ink) 8%, transparent );
	color: var(--wp--preset--color--ink);
	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: var(--wp--preset--color--ink); color: #fff; }
.fyh-add__eyebrow { margin-top: 1.1rem; font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: color-mix( in srgb, var(--wp--preset--color--ink) 60%, transparent ); }
.fyh-add__title { margin: .4rem 0 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--wp--preset--color--ink); }
.fyh-add__body { margin: .5rem 0 0; max-width: 22ch; font-size: .78rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
.fyh-add__link { display: inline-flex; align-items: center; gap: 4px; margin-top: .8rem; font-size: .72rem; font-weight: 600; color: var(--wp--preset--color--ink); 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 */
.fyh-rail { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.fyh-rail__head { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 700; 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 .35rem; font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: color-mix( in srgb, var(--wp--preset--color--ink) 45%, transparent ); }

.fyh-opt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 -8px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .84rem; text-align: left; color: color-mix( in srgb, var(--wp--preset--color--ink) 70%, transparent ); cursor: pointer; transition: background .15s ease, color .15s ease; }
.fyh-opt:hover { background: color-mix( in srgb, var(--wp--preset--color--ink) 3%, transparent ); color: var(--wp--preset--color--ink); }
.fyh-opt.is-active { background: color-mix( in srgb, var(--wp--preset--color--ink) 5%, transparent ); color: var(--wp--preset--color--ink); font-weight: 600; }
.fyh-opt__label { display: inline-flex; align-items: center; gap: 8px; }
.fyh-opt__dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix( in srgb, var(--wp--preset--color--ink) 15%, transparent ); transition: background .15s ease; }
.fyh-opt.is-active .fyh-opt__dot { background: var(--wp--preset--color--ink); }
.fyh-opt__count { font-size: .72rem; font-variant-numeric: tabular-nums; color: color-mix( in srgb, var(--wp--preset--color--ink) 38%, 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: 700; }
.fyh-rail__pulse { display: inline-flex; align-items: center; gap: 5px; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.fyh-rail__pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #1a7f37; 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 ); } }

.fyh-rail__cta { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border-radius: 14px; background: var(--wp--preset--color--ink); color: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.fyh-rail__cta:hover { transform: translateY( -2px ); box-shadow: 0 12px 28px rgba( 14, 14, 14, .18 ); }
.fyh-rail__cta-eyebrow { font-size: .56rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-soft); }
.fyh-rail__cta-title { font-size: .95rem; font-weight: 700; 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--preset--color--ink); border-color: var(--wp--preset--color--ink); color: #fff; }
.fyh-chip__count { font-size: .64rem; font-weight: 700; 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: 18px; 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--preset--color--ink); color: #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; }
}