/* Okloq – Nederlandse pagina's in het ontwerp van oktober 2026 (design system "Okloq huisstijl").
   Bovenop okloq.css: dezelfde kop, voet en kleurvariabelen; hier alleen wat het nieuwe ontwerp extra nodig heeft.
   De inhoud gebruikt inline stijlen met var(--…), zodat licht en donker vanzelf volgen. */

:root {
  --n-tekst: #334155;
  --n-gedempt: #475569;
  --n-lijn-sterk: #d8cfc1;
  --n-vlak: #f3e7dc;
  --n-vlak-licht: #fcfaf7;
  --n-accent-diep: #7a331a;
  --n-accent-licht: #e9d5c8;
  --n-op-accent: #fcefe8;
  --n-groen: #0f766e;
  --n-groen-zacht: #ddf0ea;
  --n-schaduw: rgba(30, 41, 59, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --n-tekst: #e7e0d7;
    --n-gedempt: #cfc6bb;
    --n-lijn-sterk: #4a423b;
    --n-vlak: #2f2621;
    --n-vlak-licht: #231e1b;
    --n-accent-diep: #f6c3ab;
    --n-accent-licht: #4a3328;
    --n-op-accent: #2a1d17;
    --n-groen: #5fc9b7;
    --n-groen-zacht: #1f3532;
    --n-schaduw: rgba(0, 0, 0, 0.45);
  }
}
:root[data-thema="donker"] {
  --n-tekst: #e7e0d7;
  --n-gedempt: #cfc6bb;
  --n-lijn-sterk: #4a423b;
  --n-vlak: #2f2621;
  --n-vlak-licht: #231e1b;
  --n-accent-diep: #f6c3ab;
  --n-accent-licht: #4a3328;
  --n-op-accent: #2a1d17;
  --n-groen: #5fc9b7;
  --n-groen-zacht: #1f3532;
  --n-schaduw: rgba(0, 0, 0, 0.45);
}

.nieuw { font-size: 17px; line-height: 1.6; }
.nieuw h1, .nieuw h2, .nieuw h3 { text-wrap: balance; }
.nieuw p { margin: 0; }
.nieuw img, .nieuw video { max-width: 100%; }

/* hover zoals in het ontwerp */
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 12px 32px var(--n-schaduw); }
.btn { transition: transform .15s ease, filter .15s ease; }
.btn:hover { transform: translateY(-1px); filter: brightness(.94); }
a.lift, a.btn { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .lift, .btn { transition: none; }
  .lift:hover, .btn:hover { transform: none; }
}

/* veelgestelde vragen */
.nieuw details > summary { cursor: pointer; }
.nieuw details > summary::marker { color: var(--accent); }

/* formulieren uit okloq.css krijgen de vorm van het ontwerp */
.nieuw .formulier .invoer { border-radius: 12px; min-height: 50px; }
.nieuw .formulier textarea.invoer { min-height: 120px; }
.nieuw .formulier .knop-hoofd { min-height: 54px; padding-inline: 30px; }

/* telefoon: zijmarge 16px en kaarten naar één kolom (de rasters gebruiken al auto-fit) */
@media (max-width: 560px) {
  .nieuw section { padding-left: 16px !important; padding-right: 16px !important; }
}