/* Ontwerp E — patronen die alleen de subpagina's (/diensten, /aanpak, /kosten) nodig
   hebben. Laadt na site.css. Zelfde 4:8-raster: links alleen de kop, rechts de inhoud. */

/* paginakop: alleen de zware kop, over de volle breedte; geen uitlegregel eronder */
.paginakop { padding: 48px 0 var(--section-y); }
.paginakop h1 { font-size: var(--text-h2); line-height: var(--leading-heading-open); overflow-wrap: break-word; }

/* een uitgeschreven laag of stap: kop links, onderdelen rechts */
.diep { padding-bottom: var(--section-y); }
.diep .rij { border-top: var(--rule-heavy) solid var(--navy); padding-top: 28px; }
.diep h2.kop { font-size: var(--text-h3); overflow-wrap: break-word; }
.diep .nr {
  display: block; margin-bottom: 16px;
  font-family: var(--font-heading); font-weight: 900; font-size: var(--text-numeral);
  line-height: 0.8; color: var(--purposium);
}
.diep .lede { font-size: var(--text-lead); line-height: 1.4; color: var(--navy); max-width: 40ch; }
.onderdeel { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--light-gray); }
.onderdeel h3 { font-size: var(--text-body); font-weight: 650; color: var(--navy); }
.onderdeel p { margin-top: 8px; max-width: 62ch; }

/* kosten */
.inleiding { font-size: var(--text-lead); line-height: 1.4; color: var(--navy); max-width: 40ch; margin-bottom: 40px; }
.prijs ul { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: 1rem; }
.prijs li { padding-top: 8px; border-top: 1px solid var(--soft-blue); }
.prijs > div:last-child li { border-top-color: var(--navy-line); color: var(--navy-text-muted); }
.factoren { list-style: none; margin-top: 18px; display: grid; gap: var(--joint); max-width: 62ch; }
.factoren li { padding-top: 14px; border-top: 1px solid var(--light-gray); font-size: var(--text-body); font-weight: 650; color: var(--navy); }
.vraag { padding: 24px 0 28px; border-top: 1px solid var(--light-gray); }
.vraag:first-child { border-top: 0; padding-top: 0; }
.vraag h3 { font-size: 1.375rem; font-weight: 650; color: var(--navy); line-height: 1.3; }
.vraag p { margin-top: 10px; max-width: 62ch; }

@media (max-width: 620px) {
  .paginakop { padding-top: 24px; }
  /* "automatiserings-" past op --text-h2 niet in 343px */
  .paginakop h1.lang { font-size: var(--text-h3); }
}