/** singulary-ui/immobilie-galerie — Embla-Karussell: zentriertes Bild, 64% Slide-Breite, Loop, Lightbox. */

.fyh-carousel { position: relative; margin: 0; }
/* Detailseite: Galerie ist erstes Root-Kind — WPs Root-blockGap wuerde
   sonst einen weissen Streifen ueber die Bilder legen (Gesetz 9). */
.wp-site-blocks > .fyh-carousel { margin-block-start: 0; }

/* Leer-Zustand (keine Bilder) — neutrale Fläche statt kaputtem Overlap. */
.fyh-carousel--empty .fyh-carousel__placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px;
	height: clamp( 360px, 52vh, 560px );
	margin: 0 clamp( 16px, 4vw, 48px );
	border-radius: var(--wp--custom--radius--lg, 28px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
}
.fyh-carousel--empty .fyh-carousel__placeholder svg { width: 46px; height: 46px; opacity: .65; }
.fyh-carousel--empty .fyh-carousel__placeholder span { font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
.fyh-carousel__viewport { overflow: hidden; }
.fyh-carousel__container {
	display: flex;
	margin-left: -16px;
	touch-action: pan-y pinch-zoom;
}
.fyh-carousel__slide {
	flex: 0 0 64%;
	min-width: 0;
	/* Voller Button-Reset: UA gibt Buttons padding 1px 6px — das 6px-padding-right
	   war der weiße Rand rechts im Single-Hero-Modus. Alle Seiten explizit. */
	padding: 0 0 0 16px;
	border: 0;
	background: none;
	cursor: pointer;
}
.fyh-carousel__slide img {
	width: 100%;
	height: clamp( 440px, 74vh, 860px );
	object-fit: cover;
	display: block;
	border-radius: var(--wp--custom--radius--lg, 28px);
	background: var(--wp--preset--color--surface);
	opacity: .72;
	transition: opacity .45s ease;
	box-shadow: 0 14px 44px -18px rgba( 14,14,14,.4 );
}
.fyh-carousel__slide.is-active img { opacity: 1; }
.fyh-carousel__slide.is-active { cursor: zoom-in; }

/* 1 Bild → HERO-Behandlung: full-bleed Hintergrundbild wie der Startseiten-Hero
   (kein Card-Look, kein Peek/Dimmen; Bottom-Radius wie .fyh-hero). */
.fyh-carousel--single { margin-top: 0; }
.fyh-carousel--single .fyh-carousel__container { margin-left: 0; }
.fyh-carousel--single .fyh-carousel__slide { flex: 0 0 100%; padding-left: 0; cursor: zoom-in; }
.fyh-carousel--single .fyh-carousel__slide img {
	opacity: 1;
	height: clamp( 30rem, 74vh, 54rem );
	border-radius: 0 0 var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px)) var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px));
	box-shadow: none;
}

.fyh-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px; height: 44px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--ink) 8%, transparent );
	background: #fff;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 8px 24px -10px rgba( 14, 14, 14, .42 );
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	z-index: 3;
	transition: transform .2s ease, box-shadow .2s ease;
}
.fyh-carousel__arrow svg { display: block; width: 18px; height: 18px; }
.fyh-carousel__arrow:hover { transform: translateY( -50% ) scale( 1.04 ); box-shadow: 0 10px 28px -10px rgba( 14, 14, 14, .5 ); }
.fyh-carousel__arrow:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.fyh-carousel__arrow--prev { left: clamp( 8px, 17.5%, 240px ); }
.fyh-carousel__arrow--next { right: clamp( 8px, 17.5%, 240px ); }

@media ( max-width: 781px ) {
	.fyh-carousel__slide { flex: 0 0 93%; }
	.fyh-carousel--single .fyh-carousel__slide { flex: 0 0 100%; }
	.fyh-carousel__slide img { height: clamp( 360px, 78vw, 620px ); }
	.fyh-carousel--single .fyh-carousel__slide img { height: clamp( 22rem, 58vh, 34rem ); }
	.fyh-carousel__arrow { width: 38px; height: 38px; }
	.fyh-carousel__arrow svg { width: 16px; height: 16px; }
	.fyh-carousel__arrow--prev { left: 6px; }
	.fyh-carousel__arrow--next { right: 6px; }
}

/* --- Grundriss-Variante (--plans): Sektion im Content-Flow statt Hero ---
   Plaene sind Dokumente: contain statt cover, weisser Karten-Grund,
   moderate Hoehe. Heading im Apple-Pass-Stil. */
.fyh-carousel--plans { margin: clamp( 2.5rem, 5vw, 4rem ) 0 0; }
.fyh-carousel--plans .fyh-carousel__heading {
	margin: 0 0 1.1rem;
	font-size: clamp( 1.45rem, 2.4vw, 1.9rem );
	font-weight: 600;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--ink);
}
.fyh-carousel--plans .fyh-carousel__slide img {
	height: clamp( 300px, 44vh, 460px );
	object-fit: contain;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md, 16px);
	box-shadow: 0 10px 30px -20px rgba( 14, 14, 14, .35 );
}
/* Auch im Single-Fall bleibt der Plan eine Karte, nie Hero-Vollbild. */
.fyh-carousel--plans.fyh-carousel--single { margin-top: clamp( 2.5rem, 5vw, 4rem ); }
.fyh-carousel--plans.fyh-carousel--single .fyh-carousel__slide img {
	height: clamp( 300px, 44vh, 460px );
	border-radius: var(--wp--custom--radius--lg, 28px);
}