/*
 * Berater page — theme-side fixes over the page's inline GreenShift styles.
 * (The page content block carries its own <style>; these rules use one extra
 * level of specificity (.sisa-berater …) so they win regardless of load order.)
 */

/* The four step sections must be SEPARATE white cards with archive-grey gaps
   (design page-berater.jsx:118 puts the flex gap on the <form>). The inline CSS
   gaps .sisa-berater but not the form, so the steps fused into one 900px panel. */
.sisa-berater .sisa-berater__form { display: flex; flex-direction: column; gap: 18px; }

/* Results totals strip renders 5 cells (Personen · Tage · Pakete · kcal/Tag ·
   Total) — the inline grid said repeat(4,1fr) and orphaned "Total" onto its own
   row. Design (page-berater.jsx:275) is a single 5-column row. */
.sisa-berater .sisa-bres__totals { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 781px) {
	.sisa-berater .sisa-berater__form { gap: 14px; }
	/* Re-declare the inline mobile layout (our higher-specificity desktop rule
	   would otherwise also win here), with the design's Total spanning the row. */
	.sisa-berater .sisa-bres__totals { grid-template-columns: 1fr 1fr; }
	.sisa-berater .sisa-bres__totals > div:last-child { grid-column: span 2; }
}

/* Interactive states — chips and steppers had no hover/active feedback. */
.sisa-berater .sisa-chip,
.sisa-berater .sisa-stepper__btn { transition: border-color .12s, background-color .12s, color .12s; }
.sisa-berater .sisa-chip:hover { border-color: var(--sisa-ink, #1a1a1a); }
.sisa-berater .sisa-stepper__btn:hover:not(:disabled) { background: var(--sisa-ink, #1a1a1a); color: #fff; }

/* Selected chip: the page's inline GreenShift style fills the active chip solid
   near-black (var(--sb-emphasis)) with white text — too heavy against the light
   card. Soften to a warm yellow tint + ink text + yellow border; the filled
   yellow checkbox (kept from the inline rule) remains the strong "selected"
   signal. Two theme classes + the attribute out-specify the inline `.sisa-chip[…]`. */
.sisa-berater .sisa-chip[aria-pressed="true"] {
	background: rgba(244, 212, 53, .16);       /* --sisa-yellow @ ~16% */
	color: var(--sisa-ink, #1a1a1a);
	border-color: var(--sisa-yellow, #f4d435);
}

/* Recommendation line items link to their products (sisa-berater.js). */
.sisa-berater .sisa-bres__name-link { color: inherit; text-decoration: none; }
.sisa-berater .sisa-bres__name-link:hover { text-decoration: underline; text-decoration-color: var(--sisa-yellow, #f4d435); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Mobile: the hero/intro panel keeps its desktop inline padding (48/60) and the
   H1 clamp bottoms out at ~30px — design is 32/22 padding with a 36px title
   (page-berater.jsx:69,73). .sisa-berater-hero is set on the group in the page
   content. */
@media (max-width: 781px) {
	.sisa-berater-hero { padding: 32px 22px !important; }
	.sisa-berater-hero h1 { font-size: 36px !important; }
}