/* ── Sectie-styling per paginadeel; class-namen = sectie-id in index.html ── */

/* Header + navigatie: blijft in beeld bij scrollen */
.site-header {
  background: var(--bg-donker);
  border-bottom: 2px solid var(--gietijzer);
  position: sticky; top: 0; z-index: 50;
}
.site-header .kader {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px;
}
.site-header nav { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.site-header nav a {
  font-family: var(--font-kop); font-weight: 500; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tekst-op-donker); text-decoration: none;
}
.site-header nav a:not(.knop) { position: relative; padding-bottom: 4px; }
.site-header nav a:not(.knop)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--actie); transform: scaleX(0); transform-origin: left;
  transition: transform var(--overgang);
}
.site-header nav a:not(.knop):hover { color: var(--tekst-op-donker); }
.site-header nav a:not(.knop):hover::after,
.site-header nav a.actief::after { transform: scaleX(1); }
.site-header nav a.actief { color: var(--actie); }
.site-header nav .knop { padding: 10px 16px; font-size: 14px; }
@media (max-width: 920px) { .site-header { position: static; } }

/* Paginakop voor subpagina's: zelfde donkere stijl, minder hoog */
.pagina-kop { --sectie-ruimte: 72px; }
.pagina-kop .intro { max-width: 720px; }

/* Hero */
.hero { --sectie-ruimte: 116px; }
.hero .kader {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: clamp(40px, 5vw, 72px); align-items: center;
}
@media (max-width: 880px) { .hero .kader { grid-template-columns: 1fr; } }

/* Feitenkaart: licht blok met beeldmerk-balk als onderrand */
.hero-feiten {
  background: var(--werkbank); color: var(--tekst);
  border-bottom: var(--balk) solid var(--actie);
  padding: 30px 32px 22px;
}
.hero-feiten .label {
  display: inline-block;
  font-family: var(--font-kop); font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--asfalt); color: var(--werkbank);
  padding: 5px 12px;
}
.hero-feiten ul { list-style: none; margin: 16px 0 0; padding: 0; }
.hero-feiten li {
  font-size: 17px; padding: 11px 0 11px 26px; position: relative;
  border-bottom: 1px solid var(--krijt);
}
.hero-feiten li::before { content: "\2014"; position: absolute; left: 0; color: var(--actie); font-weight: 700; }
.hero-feiten li:last-child { border-bottom: 0; }

/* Herkenning: situatiekaarten met "wat er verandert"-blok */
.herkenning-rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px; margin-top: 44px;
}
/* Kaart heeft een eigen lichte achtergrond: tekstkleur nooit van de sectie erven */
.situatiekaart { border: var(--rand-dik); background: var(--wit); color: var(--tekst); padding: 26px; display: flex; flex-direction: column; }
.situatiekaart h3 { margin-bottom: 10px; }
.situatiekaart .situatie { color: var(--tekst-secundair); font-size: 17px; flex: 1; }
.situatiekaart .flip {
  margin-top: 18px; padding: 14px 16px; background: var(--werkbank);
  border-left: 6px solid var(--oker); font-size: 17px;
}
.situatiekaart .flip strong { font-family: var(--font-kop); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--tekst); }

.teaser-voet { margin-top: 32px; }

/* Werkwijze-kort (home): drie compacte blokken naast elkaar */
.werkwijze-kort-rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; margin-top: 44px;
}
.stap-kort { border-top: var(--rand-dik); padding-top: 18px; }
.stap-kort h3 { margin: 12px 0 8px; }
.stap-kort p { color: var(--tekst-secundair); font-size: 17px; }

/* Stapnummers: donker cijfer met beeldmerk-balk eronder */
.stap-kort .nummer, .stap .nummer {
  font-family: var(--font-kop); font-weight: 600; line-height: 1; color: var(--tekst);
}
.stap-kort .nummer { font-size: 40px; }
.stap .nummer { font-size: 52px; }
.stap-kort .nummer::after, .stap .nummer::after {
  content: ""; display: block; width: 44px; height: var(--balk);
  background: var(--actie); margin-top: 10px;
}

/* Werkwijze: drie genummerde stappen */
.werkwijze-stappen { display: grid; gap: 0; margin-top: 44px; border-top: var(--rand-dun); }
.stap {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px; padding: 34px 0; border-bottom: var(--rand-dun);
}
.stap h3 { margin-bottom: 8px; }
.stap p { color: var(--tekst-secundair); max-width: 640px; }
@media (max-width: 560px) { .stap { grid-template-columns: 1fr; gap: 12px; } }

/* Afspraken: zakelijke lijst op donker */
.afspraken ol { list-style: none; margin: 44px 0 0; padding: 0; counter-reset: afspraak; }
.afspraken li {
  counter-increment: afspraak;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 22px;
  padding: 22px 0; border-bottom: 1px solid var(--potlood);
  font-size: 19px; color: var(--tekst-op-donker); max-width: 820px;
}
.afspraken li::before {
  content: counter(afspraak, decimal-leading-zero);
  font-family: var(--font-kop); font-weight: 600; font-size: 30px;
  line-height: 1; color: var(--actie);
}

/* Over ons — bewust kort */
.overons p { max-width: 680px; }

/* Contact */
.contact h2 { max-width: 640px; }
.contact .knoppenrij .knop--primair { background: var(--asfalt); color: var(--werkbank); }
.contact .knoppenrij .knop--primair:hover { background: var(--wit); color: var(--asfalt); }
.contact .gegevens { margin-top: 26px; font-size: 17px; }
.knoppenrij { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Footer: woordmerk, paginanavigatie en de werkbankrand onderaan */
.site-footer {
  background: var(--bg-blok-donker); color: var(--tekst-op-donker-2);
  border-bottom: var(--balk) solid var(--actie);
}
.site-footer .kader {
  display: flex; justify-content: space-between; align-items: center;
  gap: 22px 40px; flex-wrap: wrap; padding-top: 36px; padding-bottom: 36px;
}
.voet-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.voet-nav a, .voet-mail {
  font-family: var(--font-kop); font-weight: 500; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.site-footer a:hover { color: var(--actie); }