/* home.css — layout only for the Startseite (tokens only; no colours, no new sizes, no !important).
   Owner: page builder (home). Loaded after theme.css on `/` only. */

/* 01 · Hero: reserve room at the bottom for the feature band's heading pill. */
.home-hero .hero__inner { padding-bottom: calc(var(--overlap) + 3.25rem + clamp(56px, 8vh, 96px)); }

/* Phone first: below 62em and on desktop screens up to 960 px high the call button (with its free-consultation
   note) comes straight after the lead, the checks follow — the button stays in the first screen. */
@media (max-width: 61.99em), (min-width: 62em) and (max-height: 960px) {
	.home-hero .hero__cta { order: 1; margin-top: var(--sp-5); }
	.home-hero .hero__note { order: 1; }
	.home-hero .hero__checks { order: 2; }
}
@media (min-width: 62em) and (max-height: 960px) {
	.home-hero .hero__inner { padding-top: clamp(40px, 7vh, 96px); }
}

/* 02 · Feature band: the H2 pill sits on the hero's dark bottom, the plate still overlaps the photo. */
.home-featureband { margin-top: calc(-1 * var(--overlap) - 3.25rem); }
.home-featureband__title { display: flex; margin: 0 auto 14px; }

/* 03 · Intro: the inline number keeps its line. */
.home-intro__tel { white-space: nowrap; }

/* 04 · Services: the closing line under the gallery. */
.home-services__more { max-width: 62ch; margin: var(--sp-7) auto 0; text-align: center; color: var(--c-text); }

/* 05 · Router: five tiles = 3 + 2 on tablets (never a lone fifth tile), 5 in a row from 68.75em (cardrow--5). */
@media (min-width: 37.5em) and (max-width: 68.74em) {
	.home-router .cardrow__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.home-router .cardrow__item { grid-column: span 2; }
	.home-router .cardrow__item:nth-child(n+4) { grid-column: span 3; }
}

/* 07 · Triptych: the panel texts are long — on phones the panel grows so the text stays on the dark gradient. */
@media (max-width: 30em) {
	.home-tuerwelten .triptych__panel { min-height: 620px; }
}
/* Tablets (stacked panels): landscape panels instead of three very tall portraits. */
@media (min-width: 40em) and (max-width: 56.24em) {
	.home-tuerwelten .triptych__panel { aspect-ratio: 4 / 3; }
}

/* 08 · Steps: five steps = 3 + 2 on small desktops (900–1099 px), the row-end connector is dropped. */
@media (min-width: 56.25em) and (max-width: 68.74em) {
	.home-steps .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.home-steps .step { grid-column: span 2; }
	.home-steps .step:nth-child(n+4) { grid-column: span 3; }
	.home-steps .step:nth-child(3)::after { display: none; }
}

/* 09 · Promises: head in a left column, 2 × 2 cards on the right. */
.home-promises__head { margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.home-promises__more { margin: 0; color: var(--c-muted); }
@media (min-width: 75em) {
	.home-promises__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
	.home-promises__head { position: sticky; top: calc(var(--header-h-s) + 32px); margin-bottom: 0; }
}

/* 10 · Before/after: each column = photo + caption + note; the arrow stays centred on the photos. */
.home-ba__pair { container-type: inline-size; align-items: start; }
.home-ba__note { margin-top: var(--sp-5); }
.home-ba__note h3 { display: flex; align-items: center; gap: 12px; }
.home-ba__note p { margin-top: var(--sp-3); color: var(--c-muted); }
@media (min-width: 40em) {
	.home-ba__pair .ba__arrow { top: calc((100cqi - clamp(18px, 3vw, 40px)) * .1875); }
}

/* 12 · FAQ: one call hint under the accordion. */
.home-faq__call { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: var(--sp-6); text-align: center; color: var(--c-text); }