/* hausrat-einbruch — page layout only (tokens from theme.css; no colours, no new sizes). Owner: page builder b9. */

/* 01 Hero: the answer box sits beside the question on desktop (right column), after the lead on phones. */
.he-police { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--sp-5); max-width: 62ch; color: var(--c-heading); font-weight: 600; }
.he-police .i { flex: none; margin-top: .2em; color: var(--c-accent-text); }
.he-hero .hero__meta .chip { max-width: 100%; }
@media (min-width: 62em) {
	.he-hero .hero__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); column-gap: clamp(40px, 5vw, 80px); max-width: none; }
	.he-hero .hero__body > * { grid-column: 1; }
	.he-hero .hero__body > .answerbox { grid-column: 2; grid-row: 2 / span 6; align-self: start; max-width: none; margin-top: var(--sp-4); }
}

/* 04 Three rules: real h3 titles in the USP points, numbered order kept by the list. */
.he-rules__points .usp__point h3 { font-size: var(--fs-md); }
.he-rules__points .usp__point h3 + p { margin-top: var(--sp-1); }
@media (min-width: 62em) { .he-rules__points { grid-template-columns: 1fr; } }

/* 05 Order of tasks: sticky head left, vertical timeline right. */
.he-order { display: grid; gap: var(--sp-7); }
.he-order__steps { max-width: none; }
.he-order__steps .step__title { font-size: var(--fs-lg); }
.he-order__steps .step__n { flex: none; }
@media (min-width: 62em) {
	.he-order { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
	.he-order__head { position: sticky; top: calc(var(--admin-bar) + var(--header-h-s) + 96px); }
}

/* 06 What the Hausrat may pay: 3 + 2 mosaic, no orphan card. */
@media (min-width: 62em) {
	.he-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.he-mosaic > .card { grid-column: span 2; }
	.he-mosaic > .card:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 37.5em) and (max-width: 61.99em) {
	.he-mosaic > .card:last-child { grid-column: 1 / -1; }
}

/* 07 Hausrat or Wohngebäude: shared-door hint under the pair. */
.he-shared { max-width: 860px; margin: var(--sp-8) auto 0; }

/* 08 Conditions: two check lists side by side. */
.he-cond { display: grid; gap: var(--gap); }
@media (min-width: 56.25em) { .he-cond { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.he-cond__card .card__title { display: flex; align-items: center; gap: 10px; }
.he-cond__card .card__title .i { flex: none; width: 26px; height: 26px; color: var(--c-accent-text); }
.he-cond__card--warn .card__title .i { color: var(--danger); }
.he-cond__card .icon-list { margin-top: var(--sp-2); }
.he-cond__card .icon-list__body strong { font-size: var(--fs-md); }

/* 10 Router: h3 titles inside the icon list, closing hub line. */
.he-router__list h3 { font-size: var(--fs-lg); }
.he-router__list h3 + p { margin-top: var(--sp-1); }
.he-router__more { display: flex; align-items: flex-start; gap: 10px; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); color: var(--c-muted); }
.he-router__more .i { flex: none; margin-top: .2em; color: var(--c-accent-text); }
@media (min-width: 56.25em) { .he-router { align-items: start; } .he-router .split__media { position: sticky; top: calc(var(--admin-bar) + var(--header-h-s) + 96px); } }

/* 11 FAQ head sits centred over the narrow accordion. */
#faq .section-head { margin-inline: auto; max-width: 880px; }