/* page-home.css: layout only (grid spans, spacing between own blocks). No new colour, font, radius or shadow: tokens from theme.css. */

/* services: the two acute services lead (2 big + 3 small on a 6-column grid) */
.home-services .pcard__x a{position:relative;z-index:2}
@media (min-width:600px) and (max-width:999px){
  .home-services .pcard:last-child{grid-column:1/-1}
  .home-services .pcard:last-child .pcard__media{aspect-ratio:21/9}
}
@media (min-width:1000px){
  .home-services .cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .home-services .pcard{grid-column:span 2}
  .home-services .pcard:nth-child(-n+2){grid-column:span 3}
  .home-services .pcard:nth-child(-n+2) .pcard__media{aspect-ratio:16/9}
  .home-services .pcard:nth-child(-n+2) .pcard__t{font-size:1.45rem}
}

/* process: sticky head on the left, rail on the right (the rail must stay ONE column, also with five steps) */
.home-flow .steps{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .home-flow>.wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .home-flow .sec__head{position:sticky;top:calc(var(--hdr-h) + 24px);margin:0}
}

/* problem router: 3 + 2 (the last two cards are wide) */
@media (min-width:600px) and (max-width:999px){
  .home-router .icard:last-child{grid-column:1/-1}
}
@media (min-width:1000px){
  .home-router .icards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .home-router .icard{grid-column:span 2}
  .home-router .icard:nth-child(n+4){grid-column:span 3}
}

/* local proof: spacing between split, type list and fact notice */
.home-local__types{margin-top:clamp(2.2rem,4.5vw,3.6rem)}
.home-local__fact{margin-top:clamp(1.6rem,3vw,2.4rem)}
.home-local .split__x p:last-child{margin-bottom:0}

/* free consultation: one centred card, single column */
.home-beratung .phoneblock{grid-template-columns:minmax(0,1fr);text-align:center}
.home-beratung .phoneblock__x,.home-beratung .phoneblock__note{max-width:40rem;margin-inline:auto}

/* closing line: raised dark card on the ink band */
.home-close .callrow{background:var(--brand-600)}

/* headings: keep "Treptow-Köpenick" in one piece */
.home-services .nw,.home-local .nw{white-space:nowrap}

/* local types: title on its own line above its sentence */
.home-local .ilist--check strong{display:block}

/* closing: headline left, line card right (stacked on phones) */
@media (min-width:900px){
  .home-close>.wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(2rem,5vw,4rem);align-items:center}
  .home-close .sec__head{margin:0}
}