/**
 * Bewertungs-Wizard (Feature): Card, Schritte, Fortschritt, Slider, Buttons.
 * Wird von der Startseiten-Sektion und vom Dialog auf jeder Seite eingebettet.
 */

/* --- 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;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
}

/* --- Fortschritt --- */
.fyh-wiz__bar { height: 2px; 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--custom--ui--primary, var(--wp--preset--color--brand)); transition: width .45s cubic-bezier(.4,0,.2,1); }
.fyh-wiz__count { margin: 0 0 .625rem; text-align: left; font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--wp--preset--color--muted); }

/* --- Stage / Steps --- */
.fyh-wiz__stage { min-height: 200px; display: flex; flex-direction: column; justify-content: flex-start; padding: 1.75rem 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__q { margin: 0 0 1.25rem; text-align: left; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--wp--preset--color--ink); }
/* The hint reads as the question's second line: same axis, before the answers. */
.fyh-wiz__hint { margin: -.85rem 0 1.25rem; max-width: 48ch; text-align: left; 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; text-align: left; padding-block: .75rem; border: 1px solid var(--wp--preset--color--hairline); cursor: pointer; }
.fyh-wiz__card:hover { border-color: var(--wp--preset--color--muted); }
.fyh-wiz__card input { position: absolute; opacity: 0; pointer-events: none; }
/* Look (outline button, gap, radius, type) comes from the shadcn primitive in native-primitives.tsx;
   this file only adds what the primitive does not own. Property cards carry one outline icon. */
.fyh-wiz__card-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--wp--preset--color--muted); transition: color .15s ease; }
.fyh-wiz__card:hover .fyh-wiz__card-icon,
.fyh-wiz__card:has( input:checked ) .fyh-wiz__card-icon { color: var(--wp--custom--ui--primary, var(--wp--preset--color--ink)); }
.fyh-wiz__card:has( input:checked ) { border-color: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); background: var(--wp--custom--ui--primary-soft, color-mix( in srgb, var(--wp--preset--color--brand) 8%, #fff )); }
.fyh-wiz__card:has( input:focus-visible ),
.fyh-wiz__valuebox input:focus-visible,
.fyh-wiz__range:focus-visible,
.fyh-wiz__back:focus-visible,
.fyh-wiz__next:focus-visible,
.fyh-wiz__submit:focus-visible {
	outline: 3px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand, #801518));
	outline-offset: 3px;
}

/* --- Felder --- */
.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 { margin-bottom: 1rem; }
.fyh-wiz__grid .fyh-wiz__field { margin-bottom: 0; }

/* --- 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: 600; 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:not( :focus-visible ) { outline: 0; border-color: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); }
.fyh-wiz__unit { font-size: 1.1rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.fyh-wiz__unit--pre { font-size: .95rem; font-weight: 600; }

/* --- Range-Slider (theme primary) --- */
.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--custom--ui--primary, var(--wp--preset--color--brand)); border: 3px solid #fff; cursor: pointer; }
.fyh-wiz__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); border: 3px solid #fff; cursor: pointer; }
.fyh-wiz__range:focus:not( :focus-visible ) { outline: 0; }
.fyh-wiz__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--wp--custom--ui--ring, color-mix( in srgb, var(--wp--preset--color--brand) 28%, 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--custom--ui--primary, var(--wp--preset--color--brand)); }
.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: 1.5rem; }
.fyh-wiz__back {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .8rem 1.1rem; border: 0; border-radius: var(--wp--custom--button--radius, 8px);
	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: var(--wp--custom--button--radius, 8px); background: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); color: var(--wp--custom--ui--primary-foreground, #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 { opacity: .92; }
.fyh-wiz__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Validierungs-Markierung (unser Style statt nativem Browser-Bubble). */
.fyh-wiz__card.is-invalid { border-color: color-mix( in srgb, var(--wp--custom--status--err) 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: var(--wp--custom--status--ok-text); background: color-mix( in srgb, var(--wp--custom--status--ok) 14%, #fff ); box-sizing: content-box; }
.fyh-wiz__done h3 { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 600; 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; }
}