/* ── Onderdelen: herbruikbare blokken die op meerdere pagina's staan ──
   Aanvulling op secties.css; class-namen = het onderdeel, niet de pagina. */

/* Voorbeeldkaart: wat een tool doet, met in/uit-tabel */
.voorbeeld { border: var(--rand-dik); background: var(--wit); padding: 0; margin-top: 28px; }
.voorbeeld:first-of-type { margin-top: 44px; }
.voorbeeld-kop { padding: 26px 28px 0; }
.voorbeeld-label {
  display: inline-block; font-family: var(--font-kop); font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--asfalt); color: var(--werkbank); padding: 4px 10px; margin-bottom: 14px;
}
.voorbeeld h3 { margin-bottom: 10px; }
.voorbeeld .situatie { color: var(--tekst-secundair); max-width: 660px; }
.voorbeeld .wat-het-doet { margin-top: 16px; max-width: 660px; }
.inuit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 26px; border-top: var(--rand-dun); }
@media (max-width: 560px) { .inuit { grid-template-columns: 1fr; } }
.inuit > div { padding: 22px 28px; }
.inuit > div + div { border-left: var(--rand-dun); }
.inuit .label {
  font-family: var(--font-kop); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tekst-secundair); display: block; margin-bottom: 8px;
}
.inuit p { font-size: 17px; }
@media (max-width: 560px) { .inuit > div + div { border-left: 0; border-top: var(--rand-dun); } }
.voorbeeld .opbrengst {
  border-top: var(--rand-dun); background: var(--werkbank);
  padding: 18px 28px; font-size: 17px; border-left: var(--accentbalk);
}
.voorbeeld .opbrengst strong {
  font-family: var(--font-kop); text-transform: uppercase;
  letter-spacing: .08em; font-size: 14px; margin-right: 6px;
}

/* Doorverwijzing naar een werkende voorbeeldtool, onder een voorbeeldkaart */
.voorbeeld-demo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  border-top: var(--rand-dun); background: var(--asfalt); padding: 22px 28px;
}
.voorbeeld-demo p { color: var(--tekst-op-donker-2); font-size: 16px; margin: 0; max-width: 460px; }

/* Genummerde inhoudsblokken (Wat het kost) */
.blokken { display: grid; gap: 0; margin-top: 44px; border-top: var(--rand-dun); }
.blok { padding: 30px 0; border-bottom: var(--rand-dun); max-width: 760px; }
.blok h3 { margin-bottom: 10px; }
.blok p { color: var(--tekst-secundair); }
.blok ul { margin: 14px 0 0; padding: 0; list-style: none; }
.blok li { padding: 8px 0 8px 26px; position: relative; color: var(--tekst-secundair); font-size: 17px; }
.blok li::before { content: "\2014"; position: absolute; left: 0; color: var(--actie); font-weight: 700; }
.blok .na-lijst { margin-top: 16px; }
.sectie--donker .blokken, .sectie--donker .blok { border-color: var(--potlood); }
.sectie--donker .blok p, .sectie--donker .blok li { color: var(--tekst-op-donker-2); }

/* Afbakening: wat we niet doen */
.niet-doen ul { list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; }
.niet-doen li {
  padding: 14px 0 14px 34px; position: relative; font-size: 18px;
  border-bottom: 1px solid var(--potlood);
}
.niet-doen li::before {
  content: "\00D7"; position: absolute; left: 0; top: 10px;
  font-family: var(--font-kop); font-size: 24px; line-height: 1; color: var(--signaal);
}

/* Vragenlijst zonder JavaScript */
.vragen { margin-top: 40px; max-width: 820px; border-top: var(--rand-dun); }
.vragen details { border-bottom: var(--rand-dun); }
.vragen summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font-family: var(--font-kop); font-weight: 500; font-size: 21px;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
  transition: color var(--overgang);
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: "+"; position: absolute; right: 0; top: 16px;
  font-family: var(--font-kop); font-size: 30px; line-height: 1; color: var(--actie);
}
.vragen details[open] summary::after { content: "\2013"; }
.vragen summary:hover { color: var(--signaal); }
.vragen details p { padding: 0 0 22px; color: var(--tekst-secundair); max-width: 680px; }
.sectie--donker .vragen summary { color: var(--tekst-op-donker); }
.sectie--donker .vragen details p { color: var(--tekst-op-donker-2); }
.sectie--donker .vragen, .sectie--donker .vragen details { border-color: var(--potlood); }

/* Contactformulier */
.formulier { margin-top: 40px; max-width: 640px; }
.veld { margin-bottom: 22px; }
.veld label {
  display: block; font-family: var(--font-kop); font-weight: 500; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.veld .hulp { font-family: var(--font-brood); font-size: 15px; letter-spacing: 0;
  text-transform: none; color: var(--tekst-secundair); display: block; margin-top: 4px; }
.veld input, .veld select, .veld textarea {
  width: 100%; font-family: var(--font-brood); font-size: 18px;
  padding: 13px 14px; border: var(--rand-dun); border-radius: var(--radius);
  background: var(--wit); color: var(--tekst);
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld ::placeholder { color: var(--potlood); opacity: .65; }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: 3px solid var(--asfalt); outline-offset: 2px;
}
.veld-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 22px; }
.formulier button { font-size: 17px; }
@media (max-width: 560px) { .formulier .knop { width: 100%; text-align: center; } }
.kleine-letter { margin-top: 18px; font-size: 15px; color: var(--tekst-secundair); max-width: 560px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Contactpagina: formulier links, verwachting rechts */
.contact-indeling { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 56px; align-items: start; }
@media (max-width: 820px) { .contact-indeling { grid-template-columns: 1fr; gap: 40px; } }
.wat-daarna { background: var(--wit); border: var(--rand-dik); border-bottom: var(--balk) solid var(--actie); padding: 28px; }
.wat-daarna ol { margin: 0; padding: 0; list-style: none; counter-reset: stap; }
.wat-daarna li {
  counter-increment: stap; position: relative; padding: 14px 0 14px 40px;
  font-size: 17px; border-bottom: 1px solid var(--krijt);
}
.wat-daarna li:last-child { border-bottom: 0; }
.wat-daarna li::before {
  content: counter(stap, decimal-leading-zero); position: absolute; left: 0; top: 15px;
  font-family: var(--font-kop); font-weight: 600; font-size: 19px; line-height: 1; color: var(--actie);
}
.liever-mailen { margin-top: 20px; font-size: 16px; color: var(--tekst-secundair); }

/* Groepskop binnen een lange lijst kaarten */
.groep { margin-top: 64px; }
.groep:first-of-type { margin-top: 24px; }
.groep > h2 { font-size: clamp(24px, 3vw, 32px); }
.groep > p { color: var(--tekst-secundair); margin-top: 10px; max-width: 680px; }