/**
 * singulary-ui/bewertung — mehrstufiger Immobilienbewertungs-Wizard (Startseite).
 * Unser Style: navy Fortschritt/Buttons/Slider, weiße Card, Inter, Tokens.
 */

/* --- Sektion: Void-Fix + full-bleed Inset (Muster von .fyh-bento) --- */
.fyh-bewertung {
	margin: 0;
	background: var(--wp--preset--color--surface);
	/* Einheitlicher Sektions-Rhythmus (spacing--50 symmetrisch) — konsistente
	   Lücke ~4–6rem zwischen allen Sektionen, kein doppeltes padding-Stapeln. */
	padding-block: var(--wp--preset--spacing--50, clamp( 2rem, 4vw, 3rem ));
	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 ) );
	scroll-margin-top: 5rem; /* flach — Padding jetzt klein, alte calc()-Kompensation entfällt */
}
.fyh-bewertung--base { background: var(--wp--preset--color--base); }

/* --- Grid-Schale GESPIEGELT (zur Abwechslung zu Suchprofil): Wizard LINKS · Text RECHTS --- */
.fyh-bewertung__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp( 2rem, 5vw, 4.5rem ); align-items: stretch; }
.fyh-bewertung__aside, .fyh-bewertung__form { min-width: 0; }
.fyh-bewertung__form { grid-column: 1; grid-row: 1; }
.fyh-bewertung__aside { grid-column: 2; grid-row: 1; }

/* --- Landshut-Panorama als ECHTER Hintergrund (Butterling-edel): Bild voll sichtbar,
   Ink-Scrim drüber, Text WEISS. Elevation-Shadow wie die Wizard-Card. --- */
.fyh-bewertung__aside.has-citybg { position: relative; overflow: hidden; border-radius: 24px; padding: clamp( 1.5rem, 3vw, 2.4rem ); display: flex; flex-direction: column; box-shadow: 0 34px 80px -40px rgba( 16, 22, 34, .55 ); }
.fyh-bewertung__aside.has-citybg::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: linear-gradient( 180deg, rgba( 26, 36, 52, .50 ) 0%, rgba( 26, 36, 52, .60 ) 50%, rgba( 26, 36, 52, .76 ) 100% ), var( --fyh-city );
	background-size: cover, cover; background-position: center 45%; background-repeat: no-repeat;
}
.fyh-bewertung__aside.has-citybg > * { position: relative; z-index: 1; }
/* Weißer Text auf dem Foto — sauber lesbar über dem Scrim */
.fyh-bewertung__aside.has-citybg .fyh-bewertung__eyebrow { color: rgba( 255, 255, 255, .78 ); filter: var(--wp--custom--glow--soft); }
.fyh-bewertung__aside.has-citybg .fyh-bewertung__h2 { color: #fff; }
/* Soft-Zeile als Apple-Silver-Gradient-Text — lesbar auf hellem UND dunklem Bildteil */
.fyh-bewertung__aside.has-citybg .fyh-bewertung__h2 span {
	background: linear-gradient( 180deg, #f7f8fa 0%, #d9dde3 55%, #b7bdc6 100% );
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	filter: drop-shadow( 0 1px 6px rgba( 16, 22, 34, .38 ) );
}
.fyh-bewertung__aside.has-citybg .fyh-bewertung__sub { color: rgba( 255, 255, 255, .9 ); filter: var(--wp--custom--glow--soft); }
.fyh-bewertung__aside.has-citybg .fyh-bewertung__trust li { color: #fff; }
.fyh-bewertung__aside.has-citybg .fyh-bewertung__check { color: #fff; background: rgba( 255, 255, 255, .16 ); -webkit-backdrop-filter: blur( 6px ); backdrop-filter: blur( 6px ); }
.fyh-bewertung__aside.has-citybg .fyh-bewertung__cityline { color: rgba( 255, 255, 255, .88 ); filter: var(--wp--custom--glow--soft); }
.fyh-bewertung__aside.has-citybg .fyh-bewertung__cityline svg { color: #fff; }
.fyh-bewertung__cityline { display: inline-flex; align-items: center; gap: .5rem; margin: clamp( 1.5rem, 3vw, 2rem ) 0 0; margin-top: auto; padding-top: clamp( 1.5rem, 3vw, 2rem ); font-size: clamp( .62rem, 1.2vw, .74rem ); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.fyh-bewertung__cityline svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--wp--preset--color--ink); }

/* --- Kopf: LINKS + two-tone (wie Immobilien/Leistungen) --- */
.fyh-bewertung__head { max-width: none; margin: 0 0 clamp( 1.5rem, 3.5vw, 2.25rem ); padding-inline: 0; text-align: left; }
.fyh-bewertung__eyebrow { margin: 0 0 .9rem; font-size: .8rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.fyh-bewertung__h2 { margin: 0; max-width: none; text-align: left; font-size: clamp( 1.7rem, 3.3vw, 2.5rem ); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: var(--wp--preset--color--ink); }
.fyh-bewertung__h2 span { color: var(--wp--preset--color--muted); }
.fyh-bewertung__sub { margin: 1.1rem 0 0; max-width: 46ch; text-align: left; font-size: 1.02rem; line-height: 1.6; color: var(--wp--preset--color--muted); }

/* --- Optionales Portrait (nur bei gesetzter portraitUrl) --- */
.fyh-bewertung__portrait { position: relative; margin: clamp( 1.5rem, 3.5vw, 2rem ) 0 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--wp--custom--radius--lg, 28px); background: var(--wp--preset--color--ink); }
.fyh-bewertung__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.fyh-bewertung__portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, color-mix( in srgb, var(--wp--preset--color--ink) 80%, transparent ) 0%, transparent 58% ); }
.fyh-bewertung__portraitCap { position: absolute; z-index: 1; left: clamp( 1rem, 3vw, 1.5rem ); bottom: clamp( 1rem, 3vw, 1.5rem ); display: flex; flex-direction: column; gap: .1rem; }
.fyh-bewertung__portraitCap b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--wp--preset--color--on-dark, #fff); }
.fyh-bewertung__portraitCap span { font-size: .82rem; color: var(--wp--preset--color--on-dark-soft, #bdbdbd); }

/* --- Trust-Liste --- */
.fyh-bewertung__trust { list-style: none; margin: clamp( 1.5rem, 3.5vw, 2rem ) 0 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.fyh-bewertung__trust li { display: flex; align-items: flex-start; gap: .7rem; font-size: 1rem; line-height: 1.45; font-weight: 500; color: var(--wp--preset--color--ink); }
.fyh-bewertung__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--wp--custom--radius--pill, 9999px); color: var(--wp--preset--color--ink); background: color-mix( in srgb, var(--wp--preset--color--ink) 8%, #fff ); }
.fyh-bewertung__check svg { width: 15px; height: 15px; }

/* --- Optionales Zitat (nur bei gesetztem quote) --- */
.fyh-bewertung__quote { margin: clamp( 1.5rem, 3.5vw, 2rem ) 0 0; padding-left: 1rem; border-left: 2px solid var(--wp--preset--color--ink); font-size: clamp( 1.05rem, 1.6vw, 1.2rem ); line-height: 1.5; font-weight: 500; font-style: normal; letter-spacing: -.01em; color: var(--wp--preset--color--ink); }

/* --- Signatur (Avatar + Mikro-Trust) + Response-Note --- */
.fyh-bewertung__sign { display: flex; align-items: center; gap: .75rem; margin: clamp( 1.5rem, 3.5vw, 2rem ) 0 0; padding-top: clamp( 1.25rem, 3vw, 1.6rem ); border-top: 1px solid var(--wp--preset--color--hairline); font-size: .9rem; line-height: 1.4; color: var(--wp--preset--color--muted); }
.fyh-bewertung__avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--wp--custom--radius--pill, 9999px); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark, #fff); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.fyh-bewertung__note { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: .84rem; color: var(--wp--preset--color--muted); }
.fyh-bewertung__note svg { width: 15px; height: 15px; flex-shrink: 0; }

/* --- Wizard-Card füllt die Spalte + floatet stärker (nur Wrapper-Override,
   .fyh-wiz__*-Interna byte-gleich; Elternselektor schlägt die Basisregel). --- */
/* Wizard-Karte vertikal ZENTRIERT zur (höheren) Foto-Box — Wrapper füllt via stretch */
.fyh-bewertung__form { display: flex; flex-direction: column; justify-content: center; }
.fyh-bewertung__form .fyh-wiz { max-width: none; width: 100%; margin: 0; box-shadow: 0 40px 100px -50px rgba( 14, 14, 14, .40 ); }

/* --- Mobile: sauber gestapelt (Kopf/Trust oben, Formular unten) --- */
@media ( max-width: 860px ) {
	.fyh-bewertung__grid { grid-template-columns: 1fr; gap: clamp( 1.75rem, 6vw, 2.5rem ); }
	/* Reverse-Platzierung aufheben → saubere DOM-Stapelung (Text/Kopf oben, Wizard unten) */
	.fyh-bewertung__aside, .fyh-bewertung__form { grid-column: auto; }
	.fyh-bewertung__h2 { font-size: clamp( 1.9rem, 7vw, 2.6rem ); }
	.fyh-bewertung__portrait { aspect-ratio: 16 / 9; }
}

/* --- Wizard-Card --- */
/* hidden-Attribut gewinnt gegen die display-Klassenregeln der Buttons/Nav. */
.fyh-wiz [hidden] { display: none !important; }

.fyh-wiz {
	max-width: 620px;
	margin-inline: auto;
	margin-top: clamp( 1.5rem, 4vw, 2.5rem );
	background: #fff;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 24px;
	box-shadow: 0 30px 80px -40px rgba( 14, 14, 14, .28 );
	padding: clamp( 1.5rem, 4vw, 2.5rem );
}

/* --- Fortschritt --- */
.fyh-wiz__bar { height: 6px; border-radius: 999px; background: var(--wp--preset--color--hairline); overflow: hidden; }
.fyh-wiz__barFill { display: block; height: 100%; width: 16%; border-radius: 999px; background: var(--wp--preset--color--ink); transition: width .45s cubic-bezier(.4,0,.2,1); }
.fyh-wiz__count { margin: .75rem 0 0; text-align: right; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--wp--preset--color--muted); }

/* --- Stage / Steps --- */
.fyh-wiz__stage { min-height: 200px; display: flex; flex-direction: column; justify-content: center; padding: .5rem 0 .25rem; }
.fyh-wiz__step { display: none; }
.fyh-wiz__step.is-active { display: block; animation: fyhWizIn .35s ease; }
@keyframes fyhWizIn { from { opacity: 0; transform: translateY( 8px ); } to { opacity: 1; transform: none; } }

.fyh-wiz__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: 999px; color: var(--wp--preset--color--ink); background: color-mix( in srgb, var(--wp--preset--color--ink) 8%, #fff ); }
.fyh-wiz__icon svg { width: 26px; height: 26px; }
.fyh-wiz__q { margin: 0 auto; max-width: 22ch; text-align: center; font-size: clamp( 1.35rem, 3vw, 1.75rem ); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: var(--wp--preset--color--ink); }
.fyh-wiz__hint { margin: .9rem auto 0; max-width: 38ch; text-align: center; font-size: .85rem; color: var(--wp--preset--color--muted); }

/* --- Auswahlkarten --- */
.fyh-wiz__cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.4rem; }
.fyh-wiz__card { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: .75rem 1rem; border: 1.5px solid var(--wp--preset--color--hairline); border-radius: 14px; font-weight: 600; font-size: .98rem; color: var(--wp--preset--color--ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.fyh-wiz__card:hover { border-color: var(--wp--preset--color--muted); }
.fyh-wiz__card input { position: absolute; opacity: 0; pointer-events: none; }
.fyh-wiz__card:has( input:checked ) { border-color: var(--wp--preset--color--ink); background: color-mix( in srgb, var(--wp--preset--color--ink) 6%, #fff ); transform: translateY( -1px ); }

/* --- Felder --- */
.fyh-wiz__fields, .fyh-wiz__grid { margin-top: 1.5rem; }
.fyh-wiz__grid { display: grid; gap: .35rem 1rem; margin-bottom: 1rem; }
.fyh-wiz__grid--2 { grid-template-columns: 1fr 1fr; }
.fyh-wiz__grid--strasse { grid-template-columns: 2fr 1fr; }
.fyh-wiz__grid--plz { grid-template-columns: 1fr 2fr; }
.fyh-wiz__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.fyh-wiz__grid .fyh-wiz__field { margin-bottom: 0; }
.fyh-wiz__field--sel { margin-top: 1.75rem; }
.fyh-wiz__field span { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--wp--preset--color--muted); }
.fyh-wiz__field input, .fyh-wiz__field select {
	border: 1px solid var(--wp--preset--color--hairline); border-radius: 12px; padding: .7rem .9rem;
	font: inherit; font-size: .95rem; color: var(--wp--preset--color--ink); background: #fff; width: 100%; box-sizing: border-box;
}
.fyh-wiz__field input:focus, .fyh-wiz__field select:focus { outline: 0; border-color: var(--wp--preset--color--ink); }

/* --- Number-Valuebox (Slider-Schritte) --- */
.fyh-wiz__valuebox { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.fyh-wiz__valuebox input {
	width: 7rem; text-align: center;
	border: 1.5px solid var(--wp--preset--color--hairline); border-radius: 14px; padding: .55rem .6rem;
	font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--wp--preset--color--ink); background: #fff;
	-moz-appearance: textfield;
}
.fyh-wiz__valuebox input::-webkit-outer-spin-button, .fyh-wiz__valuebox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fyh-wiz__valuebox input:focus { outline: 0; border-color: var(--wp--preset--color--ink); }
.fyh-wiz__unit { font-size: 1.1rem; font-weight: 700; color: var(--wp--preset--color--muted); }
.fyh-wiz__unit--pre { font-size: .95rem; font-weight: 600; }

/* --- Range-Slider (navy) --- */
.fyh-wiz__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin-top: 1.75rem; border-radius: 999px; background: var(--wp--preset--color--hairline); cursor: pointer; }
.fyh-wiz__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wp--preset--color--ink); border: 3px solid #fff; box-shadow: 0 2px 8px -1px rgba( 14, 14, 14, .4 ); cursor: pointer; }
.fyh-wiz__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--ink); border: 3px solid #fff; box-shadow: 0 2px 8px -1px rgba( 14, 14, 14, .4 ); cursor: pointer; }
.fyh-wiz__range:focus { outline: 0; }
.fyh-wiz__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix( in srgb, var(--wp--preset--color--ink) 22%, transparent ); }
.fyh-wiz__ticks { display: flex; justify-content: space-between; margin-top: .6rem; font-size: .78rem; color: var(--wp--preset--color--muted); }

/* --- Consent --- */
.fyh-wiz__consent { display: flex; align-items: flex-start; gap: 11px; margin: 1.5rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--wp--preset--color--muted); cursor: pointer; }
.fyh-wiz__consent input { margin-top: 2px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--wp--preset--color--ink); }
.fyh-wiz__consent a { color: var(--wp--preset--color--ink); font-weight: 600; }

/* --- Navigation --- */
.fyh-wiz__nav { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--hairline); }
.fyh-wiz__back {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .8rem 1.1rem; border: 0; border-radius: 999px;
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink);
	font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.fyh-wiz__back svg { width: 18px; height: 18px; }
.fyh-wiz__back:hover { background: var(--wp--preset--color--hairline); }
.fyh-wiz__next, .fyh-wiz__submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	margin-left: auto; min-height: 52px; padding: 0 1.6rem;
	border: 0; border-radius: 999px; background: var(--wp--preset--color--ink); color: #fff;
	font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform .2s ease, opacity .2s ease;
}
.fyh-wiz__next svg { width: 18px; height: 18px; }
.fyh-wiz__next:hover, .fyh-wiz__submit:hover { transform: translateY( -1px ); opacity: .92; }
.fyh-wiz__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.fyh-wiz__status { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; line-height: 1.5; }
.fyh-wiz__status.is-ok { background: color-mix( in srgb, #1a7f37 12%, #fff ); color: #14692d; }
.fyh-wiz__status.is-err { background: color-mix( in srgb, #d3232a 10%, #fff ); color: #b3161c; display: flex; align-items: center; gap: .55rem; }
.fyh-wiz__status.is-err::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 999px; background: #d3232a; color: #fff; font-weight: 800; font-size: .8rem; }

/* Validierungs-Markierung (unser Style statt nativem Browser-Bubble). */
.fyh-wiz__field.is-invalid input, .fyh-wiz__field.is-invalid select, .fyh-wiz__field input.is-invalid, .fyh-wiz__field select.is-invalid { border-color: #d3232a; box-shadow: 0 0 0 3px color-mix( in srgb, #d3232a 14%, transparent ); }
.fyh-wiz__card.is-invalid { border-color: color-mix( in srgb, #d3232a 55%, var(--wp--preset--color--hairline) ); }

/* --- Erfolg --- */
.fyh-wiz__done { text-align: center; padding: 1.5rem 0; animation: fyhWizIn .35s ease; }
.fyh-wiz__done svg { width: 56px; height: 56px; margin: 0 auto 1rem; padding: 12px; border-radius: 999px; color: #14692d; background: color-mix( in srgb, #1a7f37 14%, #fff ); box-sizing: content-box; }
.fyh-wiz__done h3 { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--wp--preset--color--ink); }
.fyh-wiz__done p { margin: 0 auto; max-width: 40ch; color: var(--wp--preset--color--muted); line-height: 1.6; }

@media ( max-width: 520px ) {
	.fyh-wiz__cards { grid-template-columns: 1fr; }
	.fyh-wiz__grid--2 { grid-template-columns: 1fr 1fr; }
}