.sectie { padding: 5rem 0; }
.sectie-klein { padding-top: 3.5rem; }
@media (min-width: 768px) { .sectie { padding: 7rem 0; } .sectie-klein { padding-top: 4.5rem; } }

.oog { font: 500 12px/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--accent-zacht); }
.lede { font: 400 clamp(18px, 3.2vw, 21px)/1.6 var(--font-sans); color: var(--zacht); max-width: 40rem; }
.sectiekop { padding-bottom: .75rem; border-bottom: 1px solid var(--lijn); font: 500 12px/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .12em; color: var(--stil); }
h2.dash { font: 500 clamp(28px, 5vw, 36px)/1.15 var(--font-heading); letter-spacing: -.025em; color: var(--inkt); }

.vast { white-space: nowrap; }

.pad-kop .lede { margin-top: 1rem; }
.delen { margin-top: 3.5rem; display: grid; gap: 4rem; }
.deel { display: grid; gap: 1.75rem; }
.deel-nr { font: 500 13px/1 var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-zacht); margin-bottom: .75rem; }
.deel-kop h3 { font: 500 clamp(24px, 4vw, 30px)/1.2 var(--font-heading); letter-spacing: -.025em; color: var(--inkt); overflow-wrap: anywhere; }
.deel-regel { margin-top: .6rem; color: var(--zacht); max-width: 24rem; overflow-wrap: anywhere; }
.stappen { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 768px) {
  .deel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
  .deel-kop { position: sticky; top: 7rem; align-self: start; }
}

.stap-kaart { position: relative; padding: 1.5rem; }
.kaart-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kaart-top .stempel { margin-left: 0; }
.stap-nr { display: inline-flex; align-items: center; gap: .5rem; font: 400 13px/1 var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--accent-zacht); }
.stap-nr .ik { color: var(--azul); }
.stap-gepland .stap-nr .ik, .stap-gepland .chip-ico .ik { color: var(--stil); }
.stap-meta .chip-ico { padding: .375rem .625rem; }
.kaart-top .gelezen-stempel { margin-left: auto; }
.gelezen-stempel[hidden] { display: none; }
.stap-titel { font: 600 clamp(19px, 3vw, 22px)/1.3 var(--font-heading); letter-spacing: -.01em; color: var(--inkt); overflow-wrap: anywhere; transition: color 150ms cubic-bezier(.4, 0, .2, 1); }
.stap-titel a { color: inherit; text-decoration: none; }
.stap-onder { margin-top: .5rem; color: var(--zacht); overflow-wrap: anywhere; }
.stap-meta { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.stap-meta time { font: 400 12px/1 var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--stil); }
.kaart-link::after { content: ""; position: absolute; inset: 0; border-radius: 0 6px 6px 6px; }
.kaart-link:focus-visible { outline: none; }
.kaart-link:focus-visible::after { outline: 3px solid var(--azul); outline-offset: 2px; }
.kaart-klik:hover, .kaart-klik:focus-within { background: var(--veld-hoog); border-color: var(--lijn); }
.kaart-klik:hover .stap-titel, .kaart-klik:focus-within .stap-titel { color: var(--azul); }
.stap-gepland { background: none; border: 1px dashed var(--lijn); }
.stap-gepland .stap-titel { color: var(--zacht); font-weight: 500; }
.stap-gepland .stap-onder { color: var(--stil); }

.afspraken { background: var(--papier-2); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.afspraken-kop { display: grid; gap: 1.5rem; }
.afspraken .noot { margin-top: .75rem; font-size: 14px; color: var(--stil); }
.afspraken .meer { margin-top: 1.5rem; }
.beloftes { margin-top: 2.5rem; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); counter-reset: nr; }
.beloftes li { counter-increment: nr; background: var(--papier); border-radius: 0 6px 6px 6px; padding: 1.25rem 1.25rem 1.4rem; display: grid; gap: .5rem; align-content: start; }
.beloftes li::before { content: counter(nr, decimal-leading-zero); font: 400 13px/1 var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--accent-zacht); }
.beloftes strong { font: 600 18px/1.35 var(--font-heading); color: var(--inkt); }
.beloftes .status { justify-self: start; margin-top: .25rem; }
@media (min-width: 768px) { .afspraken-kop { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; } .beloftes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .beloftes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.velden-uitleg { margin-top: 1rem; color: var(--zacht); }
.velden { margin-top: 1.5rem; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.veld dt { font: 500 12px/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--accent-zacht); margin-bottom: .35rem; }
.veld dd { color: var(--zacht); font-size: 15px; }
@media (min-width: 700px) { .velden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; } }
@media (min-width: 1000px) { .velden { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.alles table { width: 100%; margin-top: .5rem; border-collapse: collapse; }
.alles th, .alles td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.alles th { font: 500 12px/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--stil); }
.alles td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--zacht); }
.alles td:nth-child(2) { color: var(--accent-zacht); font-weight: 500; overflow-wrap: break-word; }
.alles td:nth-child(3) { color: var(--zacht); white-space: nowrap; }
.alles td:nth-child(4) { font: 500 18px/1.35 var(--font-heading); overflow-wrap: anywhere; }
.alles td a { color: var(--inkt); text-decoration: none; }
.alles td a:hover, .alles td a:focus-visible { color: var(--azul); text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 560px) {
  .alles thead { display: none; }
  .alles tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
  .alles td, .alles tr:last-child td { border-bottom: 0; padding: 0; }
  .alles td:first-child { flex: none; }
  .alles td:nth-child(2), .alles td:nth-child(3) { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .alles td:nth-child(4) { flex: 1 0 100%; min-width: 0; margin-top: 4px; overflow-wrap: anywhere; }
}

.doemee { padding-bottom: 0; }
.drie { margin-top: 2.5rem; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.drie h3 { font: 600 20px/1.3 var(--font-heading); color: var(--inkt); margin-bottom: .5rem; }
.drie p { color: var(--zacht); }
@media (min-width: 768px) { .drie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 768px) { .drie.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }