/* kosten — page layout only (BUILD-CONTRACT §4: tokens via var(--…), no colours, no !important). */

/* Hero: the statement + the call button sit on one plate beside the H1 (stacked below it on phones). */
.kosten-hero .hero__aside { margin-top: var(--sp-6); }
.kosten-hero__card { display: grid; gap: var(--sp-5); padding: clamp(24px, 3vw, 40px); }
.kosten-hero__card > * { margin: 0; }
/* .card p would shrink the statement — keep the brick's own size and ink. */
.kosten-hero__card .hero__statement { max-width: none; color: var(--c-heading); font-size: var(--fs-xl); line-height: 1.1; }
.kosten-hero__note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.kosten-hero__note .i { flex: none; width: 18px; height: 18px; }
@media (min-width: 62em) {
	.kosten-hero .hero__aside { margin-top: 0; }
	.kosten-hero .hero__inner { align-items: end; }
}

/* Promise cards: a calmer 2×2 measure, link line under them. */
.kosten-promises { max-width: 1040px; margin-inline: auto; }
.kosten-more { max-width: 62ch; margin: var(--sp-6) auto 0; }

/* Feature split: the typographic panel lines up with the top of the text and stays in view. */
@media (min-width: 56.25em) {
	.kosten-split { align-items: start; }
	.kosten-split .split__panel { position: sticky; top: calc(var(--admin-bar, 0px) + var(--header-h-s) + 24px); }
}

/* Price drivers: the odd fifth item closes the 2-column grid instead of leaving a hole. */
@media (min-width: 48em) {
	.kosten-treiber > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Yellow phone band: the yellow rule under the H2 would be invisible on yellow; the big number needs
   room, so text and phone card stack until the split is wide enough. */
.kosten-beratung .split__body h2::after { display: none; }
@media (min-width: 56.25em) and (max-width: 69.99em) {
	.kosten-beratung .split { grid-template-columns: minmax(0, 1fr); }
	.kosten-beratung .phone-block { max-width: 560px; }
}

/* Legal hint under the contrast pair: narrow, centred. */
.kosten-hinweis { max-width: 860px; margin: var(--sp-7) auto 0; align-items: center; }
.kosten-hinweis .notice__icon { width: 48px; height: 48px; }

/* Price FAQ: heading + phone stay beside the long answers on desktop. */
.kosten-faq__call { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kosten-faq > .faq { width: 100%; }
@media (min-width: 62em) {
	.kosten-faq { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
	.kosten-faq__head { position: sticky; top: calc(var(--admin-bar, 0px) + var(--header-h-s) + 24px); margin-bottom: 0; }
}

/* Five steps: one row only where each card has room; 3 + 2 on small laptops/tablets (no connectors there). */
@media (min-width: 56.25em) and (max-width: 74.99em) {
	.kosten-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.kosten-steps > .step { grid-column: span 2; }
	.kosten-steps > .step:nth-child(n+4) { grid-column: span 3; }
	.kosten-steps > .step:not(:last-child)::after { display: none; }
}