/* /ict-ondersteuning/: alleen wat site.css niet heeft. Tokens uit site.css. */

/* Klussen: genummerde rijen in twee kolommen, lijn erboven, geen kaarten. */
.klussen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); counter-reset: klus; }
.klussen > li { margin: 0; padding: 1.4rem 0 1.5rem 3.2rem; border-top: 1px solid var(--rule); position: relative; counter-increment: klus; }
.klussen > li::before { content: counter(klus, decimal-leading-zero); position: absolute; left: 0; top: 1.55rem; font: 500 .8rem var(--mono); color: var(--oranje-tekst); }
.klussen h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.klussen p { margin: 0; color: var(--muted); max-width: 46ch; }
.klussen__noot { margin-top: var(--sp-xl); max-width: 70ch; }
@media (max-width: 760px) { .klussen { grid-template-columns: 1fr; } }

/* Vergelijking op afstand / op locatie. */
.vergelijk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); margin-top: var(--sp-xl); }
.vergelijk h3 { font: 500 .8rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--oranje-tekst); margin: 0 0 .6rem; }
.vergelijk .specs li { font-size: .95rem; }
.vergelijk .specs li > span:first-child { color: var(--muted); }
.vergelijk .specs li > span:last-child { text-align: right; font-weight: 600; }
.vergelijk__noot { margin-top: var(--sp-lg); color: var(--ink-2); max-width: 60ch; }
@media (max-width: 520px) { .vergelijk { grid-template-columns: 1fr; } }

/* Zes werkbonnen: 3 x 2 in plaats van 5 + 1 met een leeg vlak. */
@media (min-width: 760px) { .prijzen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Stappen op donker: .stappen p (site.css) zet --muted, te weinig contrast op nacht. */
.section--nacht .stappen p { color: var(--op-nacht-2); }