/* KlusSure site (klussure.nl), beeldtaal w1 "Zoeken en ontdekken".
   Wit, inkt, dunne lijnen, foto's met afgeronde hoeken en de tekst direct
   eronder. Blauw alleen voor de ronde zoekknop (en in het logo). Alleen
   kleuren uit basis.css. Beweging alleen met transform en opacity.
   Klassen: ks-home- (voorpagina) en ks-site- (gedeeld binnen de site: de
   kleine zoekbalk in de kopbalk, de onderbalk, vragen, pagina's). */

/* §1 Gedeeld binnen de site ---------------------------------------------- */
main [id] { scroll-margin-top: calc(var(--ks-kop-totaal) + 16px); }
.ks-gebied-site .ks-main { padding-bottom: 0; }
.ks-gebied-site h1, .ks-gebied-site h2 { text-wrap: balance; }
.ks-gebied-site .ks-main p, .ks-gebied-site .ks-main li { text-wrap: pretty; }
/* Secties van de vak- en plaatspagina's: vaste ruimte boven en onder, de
   band als rustig vlak, de lead als inleiding onder de kop. */
.ks-site-sectie { padding: 56px 0; }
.ks-site-band { background: var(--ks-vlak); }
.ks-site-lead { font-size: 17px; line-height: 1.5; max-width: 56ch; margin: 12px 0 0; }
@media (max-width: 743px) {
  .ks-site-sectie { padding: 40px 0; }
  .ks-site-lead { font-size: 16px; }
}
/* Alle knoppen op de site even rond: dezelfde pilvorm als de zoekbalk. */
.ks-gebied-site .ks-knop { border-radius: 999px; }

/* Kopbalk van de site: logo links, menu en knoppen rechts, alles op één
   regel en even hoog (44 px). De kleine zoekbalk staat er alleen als hij
   past (vanaf 1440 px); op de voorpagina pas als de grote startbalk uit
   beeld is. Hij neemt geen plek in zolang hij weg is, dus het menu
   verschuift niet. */
.ks-gebied-site .ks-kopbalk-rij { gap: 24px; }
.ks-site-home .ks-kopbalk { border-bottom-color: transparent; transition: border-color .2s ease; }
html.ks-site-zoek-uit .ks-site-home .ks-kopbalk { border-bottom-color: var(--ks-lijn); }
.ks-gebied-site .ks-nav { flex: none; gap: 2px; margin-left: auto; font-size: 15px; font-weight: 500; }
.ks-gebied-site .ks-nav a { min-height: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap; line-height: 1; }
.ks-gebied-site .ks-kopbalk-rechts { gap: 8px; }
.ks-site-kop-plaats { min-height: 44px; padding: 0 18px; border-radius: 999px; border-color: var(--ks-lijn-sterk); white-space: nowrap; font-size: 15px; }

.ks-site-kopzoek {
  display: none; flex: 0 1 auto; min-width: 0; align-items: center; margin: 0 auto; min-height: 48px; padding: 0 8px 0 4px;
  background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: 999px;
  box-shadow: var(--ks-schaduw-zacht); color: var(--ks-inkt); text-decoration: none; font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}
.ks-site-kopzoek:hover { text-decoration: none; border-color: var(--ks-lijn-sterk); }
.ks-site-kopzoek:active { transform: scale(.98); }
.ks-site-kopzoek-deel { padding: 0 16px; line-height: 20px; color: var(--ks-zacht); white-space: nowrap; }
.ks-site-kopzoek-deel + .ks-site-kopzoek-deel { border-left: 1px solid var(--ks-lijn); }
.ks-site-kopzoek-wat { color: var(--ks-inkt); font-weight: 600; }
.ks-site-kopzoek-knop { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border-radius: 50%; background: var(--ks-inkt); color: var(--ks-achter); }
.ks-site-kopzoek-knop .ks-icoon { width: 16px; height: 16px; stroke-width: 2.5; }
.ks-site-kopzoek:focus-visible { outline-offset: 3px; }
@media (min-width: 1440px) {
  .ks-site-kopzoek { display: inline-flex; }
  .ks-site-home .ks-site-kopzoek { display: none; }
  html.ks-site-zoek-uit .ks-site-home .ks-site-kopzoek { display: inline-flex; animation: ks-site-op .25s var(--ks-veer); }
  .ks-gebied-site:not(.ks-site-home) .ks-site-kopzoek ~ .ks-nav,
  html.ks-site-zoek-uit .ks-site-home .ks-site-kopzoek ~ .ks-nav { margin-left: 0; }
}
@media (max-width: 1599px) { .ks-site-kopzoek-deel:nth-child(2) { display: none; } }

/* Zoek in uw regio (ks_site_regiozoek): plaats of postcode, in de kopbalk
   als er plek is en bovenin het menu op de telefoon. Zelfde pilvorm als de
   kleine zoekbalk, de ronde knop in blauw zoals de andere zoekknoppen. Op de
   voorpagina maakt hij plaats voor de kleine zoekbalk zodra die verschijnt. */
.ks-rgz {
  display: flex; align-items: center; flex: 0 1 260px; min-width: 0; min-height: 44px; padding: 0 4px 0 14px;
  background: var(--ks-paneel); border: 1px solid var(--ks-lijn-sterk); border-radius: 999px;
  color: var(--ks-inkt); transition: border-color .15s ease;
}
.ks-rgz:hover { border-color: var(--ks-zacht); }
.ks-rgz:focus-within { border-color: var(--ks-inkt); }
.ks-rgz-icoon { display: flex; flex: none; color: var(--ks-zacht); }
.ks-rgz-icoon .ks-icoon { width: 18px; height: 18px; }
.ks-rgz-veld {
  flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0 8px; border: 0; border-radius: 0;
  background: transparent; color: var(--ks-inkt); font: inherit; font-size: 15px; font-weight: 500;
  -webkit-appearance: none; appearance: none;
}
.ks-rgz-veld::placeholder { color: var(--ks-zacht); opacity: 1; font-weight: 500; }
.ks-rgz-veld:focus, .ks-rgz-veld:focus-visible { outline: none; box-shadow: none; }
.ks-rgz-veld::-webkit-search-cancel-button { cursor: pointer; }
.ks-rgz-knop {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--ks-merk); color: var(--ks-op-merk); cursor: pointer;
  transition: background-color .15s ease, transform .1s ease-out;
}
.ks-rgz-knop:hover { background: var(--ks-merk-hover); }
.ks-rgz-knop:active { transform: scale(.94); }
.ks-rgz-knop:focus-visible { outline: 2px solid var(--ks-inkt); outline-offset: 2px; }
.ks-rgz-knop .ks-icoon { width: 16px; height: 16px; stroke-width: 2.5; }
.ks-rgz-kop { display: none; }
@media (min-width: 1170px) {
  .ks-rgz-kop { display: flex; margin: 0 auto 0 0; }
  .ks-gebied-site .ks-rgz-kop ~ .ks-nav { margin-left: 0; }
}
@media (min-width: 1440px) {
  /* Buiten de voorpagina heeft de regiozoeker de plek van de kleine zoekbalk;
     op de voorpagina wisselen ze: de kleine zoekbalk pas als de startbalk
     uit beeld is. */
  .ks-gebied-site:not(.ks-site-home) .ks-site-kopzoek { display: none; }
  html.ks-site-zoek-uit .ks-site-home .ks-rgz-kop { display: none; }
}
/* Tussen telefoon en breed scherm past het veld niet: een ronde knop naar
   /plaatsen/, waar het grote zoekveld bovenaan staat. */
.ks-rgz-rond { display: none; }
@media (min-width: 980px) and (max-width: 1169px) {
  .ks-rgz-rond {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -16px;
    border: 1px solid var(--ks-lijn-sterk); border-radius: 50%; color: var(--ks-inkt); text-decoration: none;
    transition: background-color .15s ease, transform .1s ease-out;
  }
  .ks-rgz-rond:hover { background: var(--ks-vlak-sterk); text-decoration: none; }
  .ks-rgz-rond:active { transform: scale(.94); }
  .ks-rgz-rond .ks-icoon { width: 18px; height: 18px; }
  .ks-rgz-rond + .ks-site-thema { margin-left: -16px; }
}
.ks-rgz-menu { flex: none; margin: 2px 2px 8px; min-height: 48px; }
.ks-rgz-menu .ks-rgz-veld { font-size: 16px; }

/* Ronde knop licht of donker in de kopbalk. Het icoon toont wat u krijgt:
   de maan in licht, de zon in donker (ook bij automatisch donker). */
.ks-site-thema {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: 0; padding: 0;
  border: 1px solid var(--ks-lijn-sterk); border-radius: 50%; background: transparent; color: var(--ks-inkt); cursor: pointer;
  transition: background-color .15s ease, transform .1s ease-out;
}
/* Zonder JavaScript doet de knop niets: verborgen tot basis.js hem aanzet. */
.ks-site-thema[data-ks-wacht] { display: none; }
.ks-site-thema:hover { background: var(--ks-vlak-sterk); }
.ks-site-thema:active { transform: scale(.94); }
.ks-site-thema .ks-icoon { width: 18px; height: 18px; }
.ks-site-thema-zon { display: none; }
html[data-thema="donker"] .ks-site-thema-zon { display: block; }
html[data-thema="donker"] .ks-site-thema-maan { display: none; }
@media (prefers-color-scheme: dark) {
  html[data-thema="auto"] .ks-site-thema-zon, html:not([data-thema]) .ks-site-thema-zon { display: block; }
  html[data-thema="auto"] .ks-site-thema-maan, html:not([data-thema]) .ks-site-thema-maan { display: none; }
}
/* Menuknop op de telefoon even rond als de themaknop ernaast. */
.ks-gebied-site .ks-nav-mobiel summary { border-radius: 50%; border-color: var(--ks-lijn-sterk); }
@media (max-width: 743px) {
  .ks-site-thema { margin-left: auto; }
  .ks-gebied-site .ks-site-thema + .ks-nav-mobiel { margin-left: 8px; }
  .ks-gebied-site .ks-site-thema[data-ks-wacht] + .ks-nav-mobiel { margin-left: auto; }
}

/* Onderbalk op de telefoon: Zoeken, Plaatsen, Inloggen. */
.ks-site-tabbalk { display: none; }
@media (max-width: 743px) {
  .ks-gebied-site .ks-kopbalk-rechts { display: none; }
  .ks-gebied-site .ks-nav-mobiel { margin-left: auto; }
  .ks-gebied-site .ks-voet { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Cookiekeuze boven de tabbalk, zodat die bruikbaar blijft. */
  .ks-gebied-site .ks-site-tst { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ks-site-tabbalk {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--ks-paneel); border-top: 1px solid var(--ks-lijn-sterk);
    padding-bottom: env(safe-area-inset-bottom);
    view-transition-name: ks-site-tabbalk;
  }
  .ks-site-tabbalk ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
  .ks-site-tabbalk li { position: relative; }
  .ks-site-tabbalk a, .ks-site-tabbalk summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--ks-zacht);
    text-decoration: none; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ks-site-tabbalk summary::-webkit-details-marker { display: none; }
  .ks-site-tabbalk .ks-icoon { width: 22px; height: 22px; transition: transform .1s ease-out; }
  .ks-site-tabbalk a:active .ks-icoon, .ks-site-tabbalk summary:active .ks-icoon { transform: scale(.9); }
  .ks-site-tabbalk a:hover, .ks-site-tabbalk summary:hover, .ks-site-tabbalk details[open] summary { color: var(--ks-inkt); }
  .ks-site-tabbalk-merk { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; background: var(--ks-merk); color: var(--ks-op-merk); transition: transform .1s ease-out; }
  .ks-site-tabbalk-merk .ks-icoon { width: 18px; height: 18px; stroke-width: 2.5; }
  .ks-site-tabbalk a:active .ks-site-tabbalk-merk { transform: scale(.92); }
  .ks-site-tabbalk a:has(.ks-site-tabbalk-merk) { color: var(--ks-inkt); }
  .ks-site-tabbalk-menu { overscroll-behavior: contain;
    position: absolute; right: 8px; bottom: calc(100% + 8px); width: min(280px, calc(100vw - 16px));
    display: flex; flex-direction: column; padding: 6px;
    background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); box-shadow: var(--ks-schaduw-zacht);
    animation: ks-site-op .2s var(--ks-veer);
  }
  .ks-site-tabbalk-menu a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px 12px; border-radius: var(--ks-rond); font-size: 15px; color: var(--ks-inkt); }
  .ks-site-tabbalk-menu a:hover { background: var(--ks-vlak-sterk); }
  .ks-site-tabbalk-menu b { font-weight: 600; }
  .ks-site-tabbalk-menu span { font-size: 13px; color: var(--ks-zacht); }
}
@keyframes ks-site-op { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Kaarten en foto's die zacht verschijnen (site.js zet ks-site-wacht alleen
   op wat bij het laden nog onder de vouw staat, dus niets flitst). */
.ks-site-onthul.ks-site-wacht { opacity: 0; transform: translateY(12px); }
.ks-site-onthul { transition: opacity .3s ease, transform .4s var(--ks-veer); }
.ks-site-na1 { transition-delay: 50ms; }
.ks-site-na2 { transition-delay: 100ms; }
.ks-site-na3 { transition-delay: 150ms; }
.ks-site-na4 { transition-delay: 200ms; }
.ks-gebied-site .ks-foto img { transition: opacity .3s ease, transform .5s var(--ks-veer); }
.ks-gebied-site .ks-foto img.ks-site-laadt { opacity: 0; }

/* Link met tekst, onderstreept: geen knop, geen pijl. */
.ks-site-meer { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--ks-inkt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ks-site-meer:hover { text-decoration-thickness: 2px; }
/* Geen pijl achter elke link: de onderstreping zegt genoeg. */
.ks-site-meer .ks-icoon { display: none; }
.ks-site-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ks-site-noot { margin: 12px 0 0; color: var(--ks-zacht); font-size: 14px; }
.ks-site-tekst > p { max-width: 64ch; }
.ks-site-tekst > p:last-child { margin-bottom: 0; }
.ks-site-tekst > :first-child { margin-top: 0; }
.ks-site-smal { max-width: calc(var(--ks-smal) + 2 * var(--ks-zijmarge)); }

/* Wie ziet wat: tabel met Ja (bolletje) en Verborgen (slot). */
.ks-site-schema { width: 100%; border-collapse: collapse; font-size: 15px; }
.ks-site-schema th, .ks-site-schema td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--ks-lijn); text-align: left; vertical-align: middle; }
.ks-site-schema th:last-child, .ks-site-schema td:last-child { padding-right: 0; }
.ks-site-schema thead th { font-size: 14px; font-weight: 600; line-height: 1.35; vertical-align: bottom; padding-top: 0; }
.ks-site-schema tbody th { font-weight: 400; }
.ks-site-schema td { width: 30%; }
.ks-site-ja, .ks-site-nee { display: inline-flex; align-items: center; gap: 8px; }
.ks-site-nee { color: var(--ks-zacht); }
.ks-site-nee .ks-icoon, .ks-site-ja .ks-icoon { width: 16px; height: 16px; }

/* Vragen als uitklapbare regels met dunne lijnen. */
.ks-site-vragen { border-top: 1px solid var(--ks-lijn); }
.ks-site-vraag { border-bottom: 1px solid var(--ks-lijn); }
.ks-site-vraag > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 60px; padding: 14px 0; font-size: 16px; font-weight: 600; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.ks-site-vraag > summary::-webkit-details-marker { display: none; }
.ks-site-vraag > summary .ks-icoon { flex: none; width: 20px; height: 20px; transition: transform .2s var(--ks-veer); }
.ks-site-vraag > summary:hover > span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ks-site-vraag[open] > summary .ks-icoon { transform: rotate(45deg); }
.ks-site-vraag-antwoord { padding: 0 44px 20px 0; max-width: 68ch; }
.ks-site-vraag[open] .ks-site-vraag-antwoord { animation: ks-site-op .25s var(--ks-veer); }
.ks-site-vraag-antwoord p { margin: 0 0 12px; }
.ks-site-vraag-antwoord p:last-child { margin-bottom: 0; }

/* §2 Voorpagina ------------------------------------------------------------ */
/* Startbalk: zwevend en volledig afgerond, in drie delen, met een ronde
   zoekknop. Gecentreerd onder de foto en hooguit 900 px breed. Rondom
   dezelfde binnenruimte (--ks-home-zoek-rand), dus een actief veld en de knop
   raken nooit de rand. De tekst staat in elk veld even ver in
   (--ks-home-zoek-in); het uitklappaneel gebruikt dezelfde maat, zodat "Vak",
   "Kies een vak" en de eerste kolom vakken op één lijn beginnen. Op de
   telefoon één afgeronde knop die de velden openklapt. */
.ks-home-start { padding: 4px 0 24px; }
.ks-home-zoek {
  --ks-home-zoek-rand: 12px; --ks-home-zoek-in: 24px; --ks-home-zoek-hoog: 58px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .9fr) auto; align-items: center;
  max-width: 900px; margin: 0 auto; padding: var(--ks-home-zoek-rand);
  background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: 999px;
  box-shadow: var(--ks-schaduw-zoek);
}
.ks-home-zoek-deel {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: var(--ks-home-zoek-hoog); padding: 6px var(--ks-home-zoek-in); border-radius: 999px; cursor: pointer;
  transition: background-color .15s ease;
}
.ks-home-zoek-deel:hover { background: var(--ks-vlak-sterk); }
.ks-home-zoek-deel:focus-within { background: var(--ks-vlak-sterk); }
.ks-home-zoek-deel + .ks-home-zoek-deel::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--ks-lijn); }
.ks-home-zoek-deel:hover::before, .ks-home-zoek-deel:hover + .ks-home-zoek-deel::before,
.ks-home-zoek-deel:focus-within::before, .ks-home-zoek-deel:focus-within + .ks-home-zoek-deel::before { opacity: 0; }
.ks-home-zoek-label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.ks-home-zoek input, .ks-home-zoek select {
  width: 100%; min-width: 0; margin: 0; padding: 2px 0 0; border: 0; background: transparent;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ks-inkt);
  outline: none; -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.ks-home-zoek select { cursor: pointer; }
.ks-home-zoek select:invalid { color: var(--ks-zacht); }
.ks-home-zoek select option { background: var(--ks-paneel); color: var(--ks-inkt); }
.ks-home-zoek input::placeholder { color: var(--ks-zacht); opacity: 1; }
.ks-home-zoek-deel:has(:focus-visible) { outline: 2px solid var(--ks-rand); outline-offset: -2px; }
.ks-home-zoek-knop { gap: 8px; min-height: var(--ks-home-zoek-hoog); margin-left: 8px; padding: 0 24px 0 20px; border-radius: 999px; font-size: 16px; }
.ks-home-zoek-knop .ks-icoon { width: 20px; height: 20px; stroke-width: 2.5; }
.ks-home-zoekknop { display: none; }

@media (max-width: 743px) {
  .ks-home-start { padding: 4px 0 12px; }
  .ks-home-zoekknop {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 20px;
    background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: 999px; box-shadow: var(--ks-schaduw-zacht);
    color: var(--ks-inkt); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .1s ease-out;
  }
  .ks-home-zoekknop:active { transform: scale(.98); }
  .ks-home-zoekknop .ks-icoon { width: 20px; height: 20px; }
  .ks-home-zoekknop b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
  .ks-home-zoekknop span span { display: block; font-size: 13px; line-height: 1.3; color: var(--ks-zacht); }
  /* De velden verschijnen als het formulier het doel van de link is (#start),
     of als site.js hem opent. Zonder script werkt de link dus ook. */
  .ks-home-zoek {
    display: none; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: none; padding: 12px;
    border-radius: 20px;
  }
  .ks-home-zoek:target, .ks-home-zoek.ks-home-open, .ks-home-zoek:focus-within { display: grid; animation: ks-site-op .25s var(--ks-veer); }
  html:not(.ks-home-spot-aan) .ks-home-start:has(.ks-home-zoek:target, .ks-home-zoek.ks-home-open, .ks-home-zoek:focus-within) .ks-home-zoekknop { display: none; }
  .ks-home-zoek-deel { min-height: 60px; padding: 8px 16px; border: 1px solid var(--ks-rand); border-radius: 12px; background: var(--ks-paneel); }
  .ks-home-zoek-deel + .ks-home-zoek-deel::before { display: none; }
  .ks-home-zoek input, .ks-home-zoek select { font-size: 16px; }
  .ks-home-zoek-knop { width: 100%; min-height: 52px; margin-left: 0; border-radius: 12px; }
}

/* Spotlight: een tik of klik in de zoekbalk haalt hem naar voren, de pagina
   erachter vervaagt. De plek houdt zijn hoogte (de balk: 58 + 2 x 12 + 2 x 1
   px), zodat er niets verspringt. site.js zet html.ks-home-spot-aan; zonder
   script blijft het de gewone balk. De hoek van de open balk loopt even ver
   om als de velden erin (halve veldhoogte + binnenruimte + rand). Alleen de
   vakkenlijst schuift als het scherm laag is; de velden en de knop blijven
   staan en houden hun binnenruimte. */
.ks-home-zoek-plek { min-height: 84px; }
.ks-home-spot-sluier {
  position: fixed; inset: 0; z-index: 40; background: var(--ks-spot-sluier);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html.ks-home-spot-aan { overflow: hidden; }
html.ks-home-spot-aan .ks-home-zoek {
  position: fixed; z-index: 41; top: max(24px, 9vh); left: 50%; transform: translateX(-50%);
  width: min(900px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - max(48px, 18vh)); max-height: calc(100dvh - max(48px, 18vh));
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: calc(var(--ks-home-zoek-hoog) / 2 + var(--ks-home-zoek-rand) + 1px);
}
.ks-home-zoek { view-transition-name: ks-home-zoek; }
::view-transition-group(ks-home-zoek) { animation-duration: .38s; animation-timing-function: var(--ks-veer); }
html.ks-home-spot-anim .ks-home-spot-sluier { animation: ks-home-spot-vaag .2s ease-out; }
html.ks-home-spot-anim .ks-home-zoek { animation: ks-home-spot-in .3s var(--ks-veer); }
@keyframes ks-home-spot-vaag { from { opacity: 0; } to { opacity: 1; } }
@keyframes ks-home-spot-in { from { opacity: .5; transform: translate(-50%, 12px) scale(.98); } to { opacity: 1; transform: translateX(-50%); } }
.ks-home-spot {
  grid-column: 1 / -1; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin-top: var(--ks-home-zoek-rand); padding: 14px var(--ks-home-zoek-in) 8px; border-top: 1px solid var(--ks-lijn);
}
.ks-home-spot-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ks-home-spot-titel { margin: 0; font-size: 13px; font-weight: 600; color: var(--ks-zacht); }
/* Het kruisje schuift zijn halve knoprand naar buiten: het icoon zelf staat
   dan op de rechterlijn, even ver van de rand als "Vak" links. */
.ks-home-spot-dicht {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-right: -9px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ks-inkt); cursor: pointer;
}
.ks-home-spot-dicht:hover { background: var(--ks-vlak-sterk); }
.ks-home-spot-dicht .ks-icoon { width: 18px; height: 18px; }
/* De vlakken van de vakken steken links en rechts 12 px uit, zodat de namen
   zelf op de lijn van "Vak" en "Kies een vak" staan. */
.ks-home-spot-vakken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; margin: 0 -12px; padding: 0; list-style: none; }
.ks-home-spot-vak {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ks-inkt); font: inherit; font-size: 15px; line-height: 1.3; text-align: left; cursor: pointer;
  transition: background-color .12s ease;
}
.ks-home-spot-vak:hover { background: var(--ks-vlak-sterk); }
.ks-home-spot-vak[aria-pressed="true"] { background: var(--ks-vlak-sterk); font-weight: 600; }
.ks-home-spot-vink { flex: none; width: 16px; height: 16px; visibility: hidden; }
.ks-home-spot-vak[aria-pressed="true"] .ks-home-spot-vink { visibility: visible; }
.ks-home-spot-geen, .ks-home-spot-voet { margin: 12px 0 0; font-size: 13px; color: var(--ks-zacht); }
/* Zoekveld boven de vakken en de knop "Alle vakken tonen" (bij veel vakken). */
.ks-home-spot-zoek { position: relative; margin: 0 0 10px; }
.ks-home-spot-zoek-icoon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ks-zacht); pointer-events: none; }
.ks-home-zoek .ks-home-spot-zoek-veld {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px 14px 10px 42px; border: 1px solid var(--ks-rand); border-radius: 12px;
  background: var(--ks-paneel); color: var(--ks-inkt); font: inherit; font-size: 16px;
}
.ks-home-spot-zoek-veld::placeholder { color: var(--ks-zacht); opacity: 1; }
.ks-home-zoek .ks-home-spot-zoek-veld:focus { outline: 2px solid var(--ks-merk); outline-offset: 1px; border-color: transparent; }
.ks-home-spot-scheiding { grid-column: 1 / -1; margin: 10px 12px 4px; padding-top: 12px; border-top: 1px solid var(--ks-lijn); font-size: 13px; font-weight: 600; color: var(--ks-zacht); }
.ks-home-spot-scheiding[hidden], .ks-home-spot-vakken > li[hidden], .ks-home-spot-alle[hidden] { display: none; }
.ks-home-spot-alle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 0 -12px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ks-inkt); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ks-home-spot-alle:hover { background: var(--ks-vlak-sterk); }
.ks-home-spot-alle-icoon { width: 16px; height: 16px; transform: rotate(90deg); }
/* Stap 2 en 3 in het paneel: één vraag groot, met een groot veld. */
.ks-home-spot-stap[hidden] { display: none; }
.ks-home-spot-stapnr { margin: 0; font-size: 13px; font-weight: 600; color: var(--ks-zacht); }
.ks-home-spot-vraag { display: block; margin: 4px 0 16px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--ks-inkt); }
.ks-home-zoek .ks-home-spot-veld {
  display: block; width: 100%; margin: 0; padding: 16px 18px; border: 1px solid var(--ks-rand); border-radius: 16px;
  background: var(--ks-paneel); color: var(--ks-inkt); font: inherit; font-size: 20px; line-height: 1.4;
}
.ks-home-spot-veld::placeholder { color: var(--ks-zacht); opacity: 1; }
.ks-home-zoek .ks-home-spot-veld:focus { outline: 2px solid var(--ks-merk); outline-offset: 1px; border-color: transparent; }
.ks-home-spot-tekst { min-height: 140px; resize: vertical; }
.ks-home-zoek .ks-home-spot-pc { max-width: 280px; font-size: 24px; letter-spacing: .02em; text-transform: uppercase; }
.ks-home-spot-pc::placeholder { text-transform: none; }
.ks-home-spot-hulp { margin: 10px 0 0; font-size: 14px; color: var(--ks-zacht); }
/* Stap "wanneer": drie keuzes als vlakken, en bij eigen momenten de velden. */
.ks-home-spot-wanneer { margin: 0; padding: 0; border: 0; min-width: 0; }
.ks-home-spot-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ks-home-spot-keuze {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--ks-rand); border-radius: 16px;
  background: var(--ks-paneel); color: var(--ks-inkt); cursor: pointer; transition: border-color .12s ease, background-color .12s ease;
}
.ks-home-spot-keuze:hover { background: var(--ks-vlak-sterk); }
.ks-home-spot-keuze:has(:checked) { border-color: var(--ks-merk); box-shadow: inset 0 0 0 1px var(--ks-merk); }
.ks-home-spot-keuze:has(:focus-visible) { outline: 2px solid var(--ks-merk); outline-offset: 2px; }
.ks-home-zoek .ks-home-spot-radio { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.ks-home-spot-keuze-ikoon { display: inline-flex; width: 24px; height: 24px; color: var(--ks-merk); }
.ks-home-spot-keuze-ikoon svg { width: 24px; height: 24px; }
.ks-home-spot-keuze-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; color: var(--ks-zacht); }
.ks-home-spot-keuze-tekst b { font-size: 16px; font-weight: 600; color: var(--ks-inkt); }
.ks-home-spot-mom[hidden] { display: none; }
.ks-home-spot-mom { margin-top: 16px; }
.ks-home-spot-mom .ks-home-spot-hulp { margin: 0 0 10px; }
.ks-home-spot-knoppen { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.ks-home-spot-knoppen .ks-knop { min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 16px; }
@media (max-width: 1127px) { .ks-home-spot-vakken { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 743px) {
  .ks-home-zoek-plek { min-height: 0; }
  /* Telefoon: de spotlight vult het scherm, velden bovenaan, vakken eronder.
     Hier schuift het hele vlak. Titel, veldteksten en vaknamen beginnen
     allemaal 17 px binnen de velden (rand + 16 px), het kruisje staat
     even ver van rechts. */
  html.ks-home-spot-aan .ks-home-zoek {
    display: grid; top: 0; left: 0; right: 0; bottom: 0; transform: none; width: auto; max-height: none;
    grid-template-rows: none; overflow: auto; overscroll-behavior: contain;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; align-content: start;
  }
  html.ks-home-spot-anim .ks-home-zoek { animation: ks-site-op .25s var(--ks-veer); }
  html.ks-home-spot-aan .ks-home-spot { display: contents; }
  .ks-home-spot-kop { order: -1; margin: 0; padding: 0 17px; }
  .ks-home-spot-titel { font-size: 15px; color: var(--ks-inkt); }
  .ks-home-spot-vakken { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 0; }
  .ks-home-spot-vak { padding: 0 17px; }
  .ks-home-spot-geen, .ks-home-spot-voet { padding: 0 17px; }
  .ks-home-spot-zoek { order: -1; margin: 12px 0 0; padding: 0 1px; }
  .ks-home-spot-scheiding { margin: 10px 17px 4px; }
  .ks-home-spot-alle { margin: 4px 0 0 5px; }
  .ks-home-spot-groot { padding: 8px 17px 0; }
  .ks-home-spot-groot .ks-home-spot-kop { padding: 0; }
  .ks-home-spot-vraag { margin: 8px 0 12px; font-size: 24px; }
  .ks-home-spot-knoppen .ks-knop { flex: 1; }
  .ks-home-spot-keuzes { grid-template-columns: 1fr; gap: 8px; }
  .ks-home-spot-keuze { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  /* Telefoon: bij stap 2 en 3 alleen die vraag groot; de balk erboven valt weg. */
  html.ks-home-spot-aan .ks-home-zoek.ks-home-spot-verder > .ks-home-zoek-deel, html.ks-home-spot-aan .ks-home-zoek.ks-home-spot-verder > .ks-home-zoek-knop { display: none; }
}

/* Grote foto met de kop op een kaart erover (zoals Flitsmeister): de kaart
   heeft de kleur van een paneel, dus de tekst is in licht en donker leesbaar
   zonder sluier of verloop over de foto. */
.ks-home-held { padding: 16px 0 0; }
.ks-home-held-beeld { position: relative; display: flex; align-items: flex-end; aspect-ratio: 21 / 9; padding: 32px; }
/* Slider: de foto's liggen op elkaar en vervagen in elkaar. Alleen de
   actieve dia is zichtbaar; zonder JS is dat de eerste.
   De nieuwe dia vervaagt boven de oude; de oude blijft vol staan tot de
   nieuwe er helemaal is, zodat er nooit achtergrond doorschemert. */
.ks-home-dias { position: absolute; inset: 0; isolation: isolate; overflow: hidden; border-radius: var(--ks-rond-groot); background: var(--ks-foto); }
.ks-home-dia { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transition: opacity 0s linear .8s, visibility 0s linear .8s; }
.ks-home-dia-actief { z-index: 1; opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s linear 0s; }
.ks-home-held-foto { position: absolute; inset: 0; border-radius: 0; }
.ks-home-held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ks-home-dia:first-child .ks-home-held-foto img { object-position: 50% 12%; }
/* Eigen brede kopfoto (21:9): het onderwerp staat rechts van het midden. */
.ks-home-dia .ks-home-held-foto.ks-home-held-breed img { object-position: 50% 50%; }
/* Label met het vak linksboven op de foto, zoals op de vaktegels. */
.ks-home-dia-label { position: absolute; top: 24px; left: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; background: var(--ks-paneel); color: var(--ks-inkt); border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.ks-home-dia-label:hover { color: var(--ks-inkt); text-decoration: none; background: var(--ks-vlak); }
.ks-home-dia-icoon { width: 20px; height: 20px; color: var(--ks-merk); flex: none; }
/* Bediening rechtsonder: vorige, stippen, volgende, stilzetten. */
.ks-home-dia-bediening { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--ks-paneel); color: var(--ks-inkt); border-radius: 999px; }
.ks-home-dia-bediening[hidden] { display: none; }
.ks-home-dia-knop { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ks-inkt); cursor: pointer; }
.ks-home-dia-knop:hover { background: var(--ks-vlak-sterk); }
.ks-home-dia-knop .ks-icoon { width: 20px; height: 20px; }
.ks-home-dia-knop .ks-home-dia-speel { display: none; width: 16px; height: 16px; }
.ks-home-dia-stil .ks-home-dia-pauze { display: none; }
.ks-home-dia-stil .ks-home-dia-speel { display: block; }
.ks-home-dia-stippen { display: inline-flex; align-items: center; padding: 0 4px; }
.ks-home-dia-stip { position: relative; width: 24px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ks-home-dia-stip::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: var(--ks-rand); transition: width .25s ease, margin .25s ease, background-color .25s ease; }
.ks-home-dia-stip:hover::before { background: var(--ks-zacht); }
.ks-home-dia-stip[aria-current="true"]::before { width: 16px; margin-left: -8px; background: var(--ks-inkt); }
.ks-home-held-kaart { position: relative; z-index: 1; max-width: 520px; padding: 28px 32px; background: var(--ks-paneel); color: var(--ks-inkt); border-radius: var(--ks-rond-groot); }
.ks-home-held-icoon, .ks-site-held-icoon { display: block; width: 28px; height: 28px; margin-bottom: 12px; color: var(--ks-merk); }
.ks-home-held-h1 { margin: 0; font-size: var(--ks-t-1); line-height: 1.12; font-weight: 600; letter-spacing: 0; }
.ks-home-held-tekst { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--ks-zacht); }
.ks-home-held + .ks-home-start { padding-top: 24px; }
/* Tot 1023 px staat de kaart onder de foto: daarboven is de foto hoog
   genoeg om het vaklabel vrij te houden van de kaart. */
@media (max-width: 1023px) {
  .ks-home-held-beeld { display: block; aspect-ratio: auto; padding: 0; }
  .ks-home-dias { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .ks-home-held-kaart { max-width: none; margin: -48px 16px 0; padding: 22px 22px 24px; }
  /* De kaart schuift 48 px over de onderkant van de foto: de bediening staat
     rechts net boven de kaart, zodat hij geen hoofden bovenin afdekt. */
  .ks-home-dia-label { top: 16px; left: 16px; }
  .ks-home-dia-bediening { right: 16px; bottom: 64px; }
  .ks-home-dia .ks-home-held-foto.ks-home-held-breed img { object-position: 68% 50%; }
  /* Per kopfoto waar het onderwerp staat (home.php, vierde getal per dia). */
  .ks-home-dia .ks-home-held-breed.ks-home-held-x65 img { object-position: 65% 50%; }
  .ks-home-dia .ks-home-held-breed.ks-home-held-x70 img { object-position: 70% 50%; }
  .ks-home-dia .ks-home-held-breed.ks-home-held-x75 img { object-position: 75% 50%; }
  .ks-home-dia .ks-home-held-breed.ks-home-held-x80 img { object-position: 80% 50%; }
}
@media (max-width: 743px) {
  .ks-home-held { padding-top: 8px; }
  .ks-home-dias { aspect-ratio: 4 / 3; border-radius: 12px; }
  .ks-home-held-kaart { margin: -40px 12px 0; border-radius: 12px; }
  .ks-home-held-tekst { font-size: 16px; }
  .ks-home-held + .ks-home-start { padding-top: 16px; }
  /* Smal: vegen en stippen; vorige en volgende vallen weg. */
  .ks-home-dia-label { top: 12px; left: 12px; min-height: 40px; padding: 6px 12px 6px 10px; font-size: 14px; }
  .ks-home-dia-icoon { width: 18px; height: 18px; }
  .ks-home-dia-bediening { right: 12px; bottom: 52px; }
  .ks-home-dia-bediening [data-ks-dia-vorige], .ks-home-dia-bediening [data-ks-dia-volgende] { display: none; }
  .ks-home-dia-knop { width: 32px; height: 32px; }
  .ks-home-dia-stip { width: 24px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-home-dia, .ks-home-dia-actief, .ks-home-dia-stip::before { transition: none; }
}

/* Kop over de volle breedte (zoals Starlink): de foto's vullen de hele
   breedte, met een egale donkere laag erover (--ks-held-sluier, geen
   verloop), zodat de witte tekst op elke foto leesbaar blijft. In het
   midden de kop met een woord dat met de foto meewisselt, en de zoekbalk.
   Een klik in de balk opent de spotlight (hierboven): de pagina vervaagt
   en alleen de balk staat scherp. De sectie zelf krijgt geen z-index, zodat
   de spotlight boven de kopbalk blijft. */
.ks-home-vol {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: clamp(580px, calc(100vh - var(--ks-kop-totaal)), 780px);
  min-height: clamp(580px, calc(100svh - var(--ks-kop-totaal)), 780px);
  padding: 64px 0 112px; background: var(--ks-band); color: var(--ks-op-foto);
}
.ks-home-vol .ks-home-vol-dias { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; background: var(--ks-band); }
.ks-home-vol-foto::after { content: ""; position: absolute; inset: 0; background: var(--ks-held-sluier); }
.ks-home-vol .ks-home-dia .ks-home-vol-foto img { object-position: 50% 45%; }
.ks-home-vol .ks-home-dia .ks-home-vol-foto.ks-home-held-breed img { object-position: 60% 50%; }
.ks-home-vol-inhoud { position: relative; text-align: center; }
.ks-home-vol-boven { margin: 0 0 14px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ks-op-foto-zacht); }
.ks-home-vol-h1 {
  margin: 0; font-size: clamp(32px, 6.2vw, 76px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em;
  text-wrap: balance;
}
.ks-home-vol-vast { display: block; }
/* Alle woorden liggen in één cel op elkaar; alleen het actieve is zichtbaar
   en schuift zacht omhoog in beeld. De cel is zo breed als het langste
   woord, dus de kop verspringt niet. */
.ks-home-vol-wissel { display: grid; justify-items: center; }
/* Overgang: de nieuwe foto schuift er zacht overheen, de oude schuift een
   stukje mee en wordt donkerder (diepte zonder verloop). Het woord komt van
   onder in beeld en vervaagt in, het oude gaat omhoog en vervaagt uit. Wat
   wacht, staat onzichtbaar klaar en springt zonder overgang terug. */
.ks-home-vol { --ks-home-vol-gang: cubic-bezier(.65, 0, .25, 1); }
.ks-home-vol-woord { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(45%); transition: none; }
.ks-home-vol-woord-actief, .ks-home-vol-woord.ks-home-vol-weg { visibility: visible; transition: transform .75s var(--ks-home-vol-gang), opacity .45s ease; }
.ks-home-vol-woord-actief { opacity: 1; transform: none; transition-delay: .12s; }
.ks-home-vol-woord.ks-home-vol-weg { opacity: 0; transform: translateY(-45%); }
.ks-home-vol-terug .ks-home-vol-woord:not(.ks-home-vol-woord-actief):not(.ks-home-vol-weg) { transform: translateY(-45%); }
.ks-home-vol-terug .ks-home-vol-woord.ks-home-vol-weg { transform: translateY(45%); }
.ks-home-vol .ks-home-dia { opacity: 1; visibility: hidden; transform: translateX(100%); transition: none; }
.ks-home-vol .ks-home-dia-actief, .ks-home-vol .ks-home-dia.ks-home-vol-weg { visibility: visible; transition: transform .9s var(--ks-home-vol-gang), filter .9s var(--ks-home-vol-gang); }
.ks-home-vol .ks-home-dia-actief { z-index: 1; transform: none; }
.ks-home-vol .ks-home-dia.ks-home-vol-weg { z-index: 0; transform: translateX(-28%); filter: brightness(.45); }
.ks-home-vol.ks-home-vol-terug .ks-home-dia:not(.ks-home-dia-actief):not(.ks-home-vol-weg) { transform: translateX(-100%); }
.ks-home-vol.ks-home-vol-terug .ks-home-dia.ks-home-vol-weg { transform: translateX(28%); }
/* De foto die in beeld staat, zoomt heel langzaam iets uit. */
.ks-home-vol .ks-home-dia-actief .ks-home-vol-foto img { animation: ks-home-vol-zoom 6s ease-out both; }
@keyframes ks-home-vol-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.ks-home-vol-tekst { max-width: 600px; margin: 18px auto 0; font-size: 19px; line-height: 1.5; color: var(--ks-op-foto-zacht); }
.ks-home-vol .ks-home-vol-start { margin-top: 36px; padding: 0; color: var(--ks-inkt); text-align: left; }
.ks-home-vol .ks-home-zoek { box-shadow: 0 12px 40px var(--ks-foto-tekstschaduw); border-color: transparent; }
.ks-home-vol-label {
  position: absolute; z-index: 1; left: max(var(--ks-zijmarge), calc((100% - var(--ks-breed)) / 2 + var(--ks-zijmarge))); bottom: 28px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px;
  background: var(--ks-paneel); color: var(--ks-inkt); border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.ks-home-vol-label:hover { color: var(--ks-inkt); text-decoration: none; background: var(--ks-vlak); }
.ks-home-vol-label-icoon { flex: none; width: 18px; height: 18px; color: var(--ks-merk); }
@media (max-width: 743px) {
  .ks-home-vol { min-height: 560px; padding: 40px 0 96px; }
  .ks-home-vol-boven { margin-bottom: 10px; font-size: 16px; }
  .ks-home-vol-tekst { margin-top: 14px; font-size: 17px; }
  .ks-home-vol .ks-home-vol-start { margin-top: 28px; }
  .ks-home-vol .ks-home-zoekknop { min-height: 60px; border-color: transparent; }
  .ks-home-vol-label { left: 16px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-home-vol .ks-home-vol-woord, .ks-home-vol .ks-home-dia { transition: none !important; transform: none !important; filter: none !important; }
  .ks-home-vol .ks-home-dia-actief .ks-home-vol-foto img { animation: none; }
  .ks-home-vol .ks-home-vol-weg { visibility: hidden; }
}

.ks-home-h2 { margin: 0 0 20px; font-size: var(--ks-t-2); line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.ks-home-h2 .ks-icoon { width: 24px; height: 24px; margin-right: 10px; vertical-align: -3px; color: var(--ks-merk); }
.ks-home-anders { margin: 20px 0 0; font-size: 15px; color: var(--ks-zacht); }
.ks-home-anders .ks-site-meer { display: inline; min-height: 0; }
.ks-home-klein { margin: 12px 0 0; font-size: 13px; color: var(--ks-zacht); }

/* Nu open: echte open klussen, alleen vak, grootte, plaats en stand. */
.ks-home-buurt { padding: 48px 0 8px; }
.ks-home-buurt-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 20px; }
.ks-home-buurt-kop .ks-home-h2 { margin: 0 0 6px; }
.ks-home-buurt-uitleg { margin: 0; max-width: 60ch; color: var(--ks-zacht); font-size: 15px; }
.ks-home-buurt-pc { display: flex; align-items: center; gap: 8px; }
.ks-home-buurt-pc label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ks-home-buurt-pc input {
  width: 120px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ks-rand); border-radius: 999px;
  background: var(--ks-paneel); color: var(--ks-inkt); font: inherit; font-size: 16px;
}
.ks-home-buurt-pc input::placeholder { color: var(--ks-zacht); opacity: 1; }
.ks-home-buurt-pc .ks-knop { min-height: 44px; border-radius: 999px; }
.ks-home-buurt-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 0; list-style: none; }
.ks-home-buurt-klus { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-home-buurt-foto { flex: none; width: 64px; height: 64px; border-radius: 12px; }
/* Icoon van het vak in plaats van de foto als die al in het raster staat. */
.ks-home-buurt-icoon { display: grid; place-items: center; background: var(--ks-vlak); color: var(--ks-merk); }
.ks-home-buurt-icoon .ks-icoon { width: 28px; height: 28px; }
.ks-home-buurt-tekst { min-width: 0; }
.ks-home-buurt-tekst p { margin: 0; }
.ks-home-buurt-vak { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ks-home-buurt-vak span { font-weight: 400; color: var(--ks-zacht); }
.ks-home-buurt-waar { display: flex; align-items: flex-start; gap: 4px; font-size: 14px; line-height: 1.4; }
.ks-home-buurt-waar .ks-icoon { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--ks-zacht); }
.ks-home-buurt-stand { font-size: 13px; line-height: 1.4; color: var(--ks-zacht); }
.ks-home-buurt-voet { margin: 16px 0 0; font-size: 14px; color: var(--ks-zacht); }
@media (max-width: 1127px) { .ks-home-buurt-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 743px) {
  .ks-home-buurt { padding-top: 36px; }
  .ks-home-buurt-lijst { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ks-home-buurt-pc { width: 100%; }
  .ks-home-buurt-pc input { flex: 1; width: auto; min-width: 0; }
}

.ks-home-buurt-stand span { display: block; }

/* Secties onder het raster. */
.ks-home-sectie { padding: 56px 0; }
.ks-home-twee { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 72px; align-items: start; }
.ks-home-twee-kop > p { margin: 0; }
@media (max-width: 899px) { .ks-home-twee { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .ks-home-sectie { padding: 56px 0; } }
.ks-home-buurt + .ks-home-sectie { margin-top: 16px; }

/* Wat u moet weten: drie foto's, elk met een kaart met icoon erover. */
.ks-home-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ks-home-feit { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; overflow: hidden; border-radius: var(--ks-rond-groot); }
.ks-home-feit-foto { position: absolute; inset: 0; border-radius: var(--ks-rond-groot); }
.ks-home-feit-foto img { width: 100%; height: 100%; object-fit: cover; }
.ks-home-feit-kaart { position: relative; min-height: 196px; margin: 12px; padding: 18px 20px 20px; background: var(--ks-paneel); border-radius: 12px; }
.ks-home-feit-icoon { width: 22px; height: 22px; color: var(--ks-merk); margin-bottom: 10px; }
.ks-home-feit h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 600; }
.ks-home-feit p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ks-zacht); }
@media (max-width: 899px) {
  .ks-home-feiten { grid-template-columns: minmax(0, 1fr); }
  .ks-home-feit { min-height: 400px; }
}
@media (max-width: 743px) {
  .ks-home-feit { min-height: 360px; border-radius: 12px; }
  .ks-home-feit-foto { border-radius: 12px; }
  .ks-home-feit-kaart { min-height: 0; margin: 8px; padding: 16px; border-radius: 10px; }
}

/* Voor vakmensen: grote foto met een kaart met de vaste bedragen erover. */
.ks-home-vm { position: relative; display: flex; align-items: center; min-height: 560px; padding: 32px; overflow: hidden; border-radius: var(--ks-rond-groot); }
.ks-home-vm-foto { position: absolute; inset: 0; border-radius: var(--ks-rond-groot); }
.ks-home-vm-foto img { width: 100%; height: 100%; object-fit: cover; }
.ks-home-vm-kaart { position: relative; width: 100%; max-width: 480px; padding: 28px 32px; background: var(--ks-paneel); border-radius: var(--ks-rond-groot); }
.ks-home-vm-kaart > p { margin: 0 0 20px; color: var(--ks-zacht); }
.ks-home-vm-kaart > .ks-home-vm-gratis { margin: 0 0 8px; color: var(--ks-inkt); font-weight: 600; }
.ks-home-vm-kaart .ks-site-knoppen { margin-top: 20px; }
.ks-home-prijzen { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.ks-home-prijzen caption { text-align: left; padding: 0 0 8px; font-size: 14px; font-weight: 600; }
.ks-home-prijzen th, .ks-home-prijzen td { padding: 11px 0; border-top: 1px solid var(--ks-lijn); text-align: left; font-weight: 400; }
.ks-home-prijzen tr:last-child th, .ks-home-prijzen tr:last-child td { border-bottom: 1px solid var(--ks-lijn); }
.ks-home-prijzen td { text-align: right; font-weight: 600; white-space: nowrap; }
@media (max-width: 743px) {
  .ks-home-sectie { padding: 40px 0; }
  .ks-home-vm { display: block; min-height: 0; padding: 0; border-radius: 0; overflow: visible; }
  .ks-home-vm-foto { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
  .ks-home-vm-kaart { width: auto; max-width: none; margin: -40px 12px 0; padding: 20px; border-radius: 12px; }
  .ks-site-vraag > summary { font-size: 15px; gap: 16px; }
  .ks-site-vraag-antwoord { padding-right: 0; }
}

/* §3 Sitepagina's ---------------------------------------------------------- */
/* Kop van een sitepagina: compact en links, een kruimelpad erboven. */
.ks-site-kop { padding-top: 32px; padding-bottom: 32px; }
.ks-site-kop .ks-h1 { max-width: 22ch; font-size: 32px; }
.ks-site-kop .ks-lead { margin: 12px 0 0; max-width: 56ch; font-size: 17px; color: var(--ks-inkt); }
.ks-site-kop .ks-site-knoppen { margin-top: 24px; }
.ks-site-kopregel { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 24px; }
.ks-site-onderkop { margin: 8px 0 0; max-width: 56ch; }

/* Rijen: kop links, inhoud rechts, een dunne lijn ertussen. */
.ks-site-blokken > .ks-blok { padding: 40px 0; gap: 16px 72px; }
.ks-site-blok-kop { font-size: var(--ks-t-2); line-height: 1.2; font-weight: 600; letter-spacing: 0; margin: 0; }
.ks-site-blok-tekst { margin: 8px 0 0; max-width: 38ch; }
/* Op breed blijft de kop van een lang blok staan terwijl de inhoud schuift. */
@media (min-width: 881px) {
  .ks-site-blok-zij, .ks-site-blokken > .ks-blok > :first-child { position: sticky; top: calc(var(--ks-kop-totaal) + 24px); }
}

/* Eén lijn per scheiding: een lijst direct onder de bloklijn krijgt geen
   eigen bovenlijn, de laatste regel van een blok geen onderlijn. */
.ks-site-blokken > .ks-blok > :is(.ks-lijst, .ks-genummerd),
.ks-site-blokken > .ks-blok > div > :is(.ks-lijst, .ks-genummerd):first-child { border-top: 0; }
.ks-site-blokken > .ks-blok > :is(.ks-lijst, .ks-genummerd) > li:first-child,
.ks-site-blokken > .ks-blok > div > :is(.ks-lijst, .ks-genummerd):first-child > li:first-child { padding-top: 0; }
.ks-site-blokken > .ks-blok > :is(.ks-lijst, .ks-genummerd):last-child > li:last-child,
.ks-site-blokken > .ks-blok > div:last-child > :is(.ks-lijst, .ks-genummerd):last-child > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Kop van een sitepagina met een grote foto en de tekst op een kaart erover,
   net als op de voorpagina. */
.ks-site-held { padding: 16px 0 8px; }
/* Het beeld houdt 21:9 maar groeit mee als de kaart hoger is, zodat de
   kaart nooit buiten de foto steekt. */
.ks-site-held-beeld { position: relative; display: flex; align-items: flex-end; aspect-ratio: 21 / 9; padding: 32px; }
.ks-site-held-foto { position: absolute; inset: 0; border-radius: var(--ks-rond-groot); }
/* Staat het werk links op de kopfoto, dan de kaart rechts (alleen breed). */
.ks-site-held-rechts { justify-content: flex-end; }
.ks-site-held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ks-site-held-kaart { position: relative; max-width: 560px; padding: 28px 32px; background: var(--ks-paneel); color: var(--ks-inkt); border-radius: var(--ks-rond-groot); }
.ks-site-held-h1 { margin: 0; font-size: var(--ks-t-1); line-height: 1.12; font-weight: 600; letter-spacing: 0; }
.ks-site-held-tekst { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--ks-zacht); }
.ks-site-held-kaart .ks-site-knoppen { margin-top: 20px; }
.ks-site-held-noot { margin: 14px 0 0; font-size: 14px; color: var(--ks-zacht); }
@media (max-width: 1127px) {
  .ks-site-held-beeld { display: block; aspect-ratio: auto; padding: 0; }
  .ks-site-held-foto { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .ks-site-held-kaart { max-width: none; margin: -56px 16px 0; padding: 22px 22px 24px; }
}
@media (max-width: 743px) {
  .ks-site-held { padding-top: 8px; }
  .ks-site-held-foto { aspect-ratio: 4 / 3; border-radius: 12px; }
  .ks-site-held-kaart { margin: -40px 12px 0; border-radius: 12px; }
  .ks-site-held-tekst { font-size: 16px; }
}

/* Stappen als regels met een icoon ervoor, zonder nummers. */
.ks-site-stappen { list-style: none; margin: 0; padding: 0; }
.ks-site-stappen > li { padding: 20px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-site-stappen > li:first-child { padding-top: 0; }
.ks-site-stappen > li:last-child { border-bottom: 0; padding-bottom: 0; }
.ks-site-stappen h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.ks-site-stappen h3 .ks-icoon { flex: none; width: 22px; height: 22px; color: var(--ks-merk); }
.ks-site-stappen p { margin: 0 0 8px; max-width: 64ch; }
.ks-site-stappen p:last-child { margin-bottom: 0; }
.ks-site-tekst-p { margin: 0 0 16px; max-width: 64ch; }

/* Voorbeeld van de klantpagina: tijdlijn op een licht vlak. */
.ks-site-voorbeeld { margin: 0; padding: 24px; background: var(--ks-vlak); border-radius: var(--ks-rond-groot); }
.ks-site-voorbeeld-kop { margin: 0 0 16px; font-size: 13px; font-weight: 600; color: var(--ks-zacht); }
.ks-site-voorbeeld .ks-tijdlijn { margin: 0; }

/* Voor vakmensen: prijzen en certificaten. */
.ks-site-vvm-prijzen th, .ks-site-vvm-prijzen td { white-space: normal; vertical-align: middle; }
.ks-site-vvm-prijzen tbody th { font-weight: 600; white-space: nowrap; }
.ks-site-vvm-prijzen td { color: var(--ks-zacht); }
.ks-site-vvm-prijzen td.ks-site-vvm-prijs { color: var(--ks-inkt); font-size: 17px; font-weight: 600; }
.ks-site-vvm-noten { margin: 16px 0 0; border-top: 0; }
.ks-site-vvm-cert-wrap { margin-top: 32px; }
.ks-site-vvm-cert td { white-space: normal; }

/* Veelgestelde vragen: links naar de groepen. */
.ks-site-naar { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 16px; }

/* Open cijfers: getallen met een lijn erboven. */
.ks-site-oc-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ks-site-oc-tegel { display: flex; flex-direction: column; padding-top: 16px; border-top: 1px solid var(--ks-lijn); }
.ks-site-oc-label { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.ks-site-oc-waarde { display: flex; align-items: flex-end; min-height: 36px; margin: 0 0 8px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: 0; }
.ks-site-oc-waarde.ks-site-oc-onbekend { font-size: 17px; line-height: 1.4; font-weight: 500; letter-spacing: 0; color: var(--ks-zacht); }
.ks-site-oc-uitleg { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ks-zacht); }
/* Label, waarde en uitleg op dezelfde hoogte in elke tegel van een rij,
   ook als een label over twee regels loopt. */
@supports (grid-template-rows: subgrid) {
  .ks-site-oc-tegel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .ks-site-oc-label { align-self: start; }
}
.ks-site-oc-status { padding: 20px 24px; background: var(--ks-vlak); border-radius: var(--ks-rond-groot); }
.ks-site-oc-titel { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.ks-site-oc-bijgewerkt { margin-top: 24px; }

/* Slot onder een pagina: vakken als kleine foto's om meteen te beginnen. */
.ks-site-slot-rij { display: flex; align-items: center; justify-content: space-between; gap: 16px 48px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.ks-site-slot-rij .ks-h2 { font-size: 22px; }
.ks-site-slot-rij .ks-site-knoppen { flex: none; }

/* Privacy en voorwaarden: smalle tekstkolom. */
.ks-site-jur-kop .ks-melding { margin-bottom: 24px; }
.ks-site-jur-kop .ks-h1 { max-width: none; }
.ks-site-jur-versie { margin: 12px 0 0; color: var(--ks-zacht); font-size: 14px; }
.ks-site-jur { padding-bottom: 80px; }
.ks-site-jur-inhoud { padding: 0 0 8px; border-top: 1px solid var(--ks-lijn); }
.ks-site-jur-inhoud-kop { font-size: 14px; font-weight: 600; letter-spacing: 0; margin: 0; padding: 16px 0 4px; }
.ks-site-jur-inhoud ol { margin: 0; padding: 0; list-style: none; counter-reset: ks-site-jur; columns: 2; column-gap: 40px; }
.ks-site-jur-inhoud li { counter-increment: ks-site-jur; break-inside: avoid; border-bottom: 1px solid var(--ks-lijn); }
.ks-site-jur-inhoud a { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--ks-inkt); text-decoration: none; font-size: 15px; }
.ks-site-jur-inhoud a::before { content: counter(ks-site-jur); color: var(--ks-zacht); font-variant-numeric: tabular-nums; min-width: 20px; }
.ks-site-jur-inhoud a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ks-site-jur-tekst h2 { font-size: 22px; line-height: 1.25; letter-spacing: 0; margin: 48px 0 12px; }
.ks-site-jur-tekst h3 { font-size: 17px; margin: 28px 0 8px; }
.ks-site-jur-tekst h2 + h3 { margin-top: 12px; }
.ks-site-jur-tekst ul { padding-left: 1.2em; }
.ks-site-jur-tekst li { margin-bottom: 8px; }
.ks-site-jur-tekst .ks-tabel-wrap { margin: 8px 0 24px; }
.ks-site-jur-tabel th, .ks-site-jur-tabel td { white-space: normal; }

/* Juridische documenten (06-11-2026): artikelen, gegevens en pdf-knop. */
.ks-site-jur-pad { margin: 0 0 16px; font-size: 14px; }
.ks-site-jur-pad a { color: var(--ks-zacht); }
.ks-site-jur-acties { margin: 20px 0 0; }
.ks-site-jur-pdf .ks-icoon { width: 18px; height: 18px; }
.ks-site-jur-nr { display: block; margin-bottom: 2px; color: var(--ks-zacht); font-size: 13px; font-weight: 600; }
.ks-site-jur-leden { padding-left: 1.6em; }
.ks-site-jur-leden > li { margin-bottom: 8px; padding-left: 4px; }
.ks-site-jur-leden > li::marker { color: var(--ks-zacht); font-variant-numeric: tabular-nums; }
.ks-site-jur-gegevens, .ks-site-jur-begrippen { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 0 24px; margin: 12px 0 16px; border-top: 1px solid var(--ks-lijn); }
.ks-site-jur-gegevens dt, .ks-site-jur-gegevens dd, .ks-site-jur-begrippen dt, .ks-site-jur-begrippen dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-site-jur-gegevens dt, .ks-site-jur-begrippen dt { color: var(--ks-zacht); font-weight: 600; }
.ks-site-jur-invullen { padding: 1px 6px; border: 1px dashed var(--ks-rand); border-radius: 4px; color: var(--ks-zacht); font-size: 14px; white-space: nowrap; }
.ks-site-jur-status { margin: 0 0 12px; font-weight: 600; }
.ks-site-jur-onder h2 { margin-top: 56px; }

/* Overzicht /voorwaarden/: vier documenten, kaarten even hoog. */
.ks-site-jur-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ks-site-jur-doc { position: relative; display: flex; flex-direction: column; height: 100%; padding: 24px; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); }
.ks-site-jur-doc:hover { border-color: var(--ks-lijn-sterk); }
.ks-site-jur-doc-icoon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: var(--ks-rond); background: var(--ks-vlak); color: var(--ks-inkt); }
.ks-site-jur-doc-icoon .ks-icoon { width: 20px; height: 20px; }
.ks-site-jur-doc-kop { margin: 0 0 6px; font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.ks-site-jur-doc-kop a { color: var(--ks-inkt); text-decoration: none; }
/* De hele kaart klikt naar het document; de pdf-link ligt erboven. */
.ks-site-jur-doc-kop a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ks-site-jur-doc-kop a:focus-visible { outline: none; }
.ks-site-jur-doc:has(.ks-site-jur-doc-kop a:focus-visible) { outline: 2px solid var(--ks-focus); outline-offset: 2px; }
.ks-site-jur-doc-tekst { margin: 0 0 16px; color: var(--ks-zacht); font-size: 15px; }
.ks-site-jur-doc-versie { margin: auto 0 0; color: var(--ks-zacht); font-size: 13px; }
.ks-site-jur-doc-pdf { position: absolute; z-index: 1; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); color: var(--ks-inkt); font-size: 14px; font-weight: 600; text-decoration: none; background: var(--ks-paneel); }
.ks-site-jur-doc-pdf:hover { background: var(--ks-vlak-sterk); border-color: var(--ks-inkt); }
.ks-site-jur-doc-pdf .ks-icoon { width: 16px; height: 16px; }

/* Cookiebanner (kern/juridisch.php, toestemming.js). Rustig blok onderin,
   weigeren en accepteren even groot naast elkaar. Geen sluier over de
   pagina: de site blijft gewoon bruikbaar. */
.ks-site-tst { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.ks-site-tst[hidden] { display: none; }
.ks-site-tst-binnen { pointer-events: auto; width: 100%; max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 24px; background: var(--ks-paneel); color: var(--ks-inkt); border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-foto); box-shadow: var(--ks-schaduw-zoek); }
.ks-site-tst-kop { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.ks-site-tst-tekst { margin: 0; color: var(--ks-zacht); font-size: 14px; line-height: 1.5; }
.ks-site-tst-tekst a { color: var(--ks-inkt); }
.ks-site-tst-doelen { display: grid; gap: 8px; margin-top: 12px; }
.ks-site-tst-doelen[hidden] { display: none; }
.ks-site-tst-doel { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); font-size: 14px; line-height: 1.45; color: var(--ks-zacht); cursor: pointer; }
.ks-site-tst-doel strong { color: var(--ks-inkt); font-weight: 600; }
.ks-site-tst-vink { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ks-merk); }
.ks-site-tst-knoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ks-site-tst-zelf { margin-right: auto; min-height: 44px; font-size: 15px; }
.ks-site-tst-knop { min-height: 44px; min-width: 120px; padding: 0 16px; font-size: 15px; }
.ks-site-tst-knop[hidden], .ks-site-tst-zelf[hidden] { display: none; }
.ks-site-tst-wijzig[data-ks-wacht] { display: none; }


@media (max-width: 960px) {
  .ks-site-oc-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .ks-site-blokken > .ks-blok { padding: 32px 0; gap: 16px; }
  .ks-site-blok-tekst { max-width: none; }
  .ks-site-kop-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 743px) {
  .ks-site-kop { padding-top: 24px; padding-bottom: 24px; }
  .ks-site-kop .ks-h1 { font-size: 26px; }
  .ks-site-kop .ks-lead { font-size: 16px; }
  .ks-site-naar { flex-direction: column; }
  .ks-site-oc-waarde { font-size: 28px; }
  .ks-site-jur-inhoud ol { columns: 1; }
  .ks-site-jur-docs { grid-template-columns: minmax(0, 1fr); }
  .ks-site-jur-gegevens, .ks-site-jur-begrippen { grid-template-columns: minmax(0, 1fr); }
  .ks-site-jur-gegevens dt, .ks-site-jur-begrippen dt { padding-bottom: 0; border-bottom: 0; }
  .ks-site-jur-gegevens dd, .ks-site-jur-begrippen dd { padding-top: 2px; }
  .ks-site-tst { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .ks-site-tst-binnen { padding: 16px; max-height: calc(100vh - 16px); }
  .ks-site-tst-knoppen { display: grid; grid-template-columns: 1fr 1fr; }
  .ks-site-tst-zelf { grid-column: 1 / -1; grid-row: 2; margin: 0; justify-self: center; }
  .ks-site-tst-knop[data-ks-tst-keuze="zelf"] { grid-column: 1 / -1; }
  .ks-site-tst-knop { min-width: 0; }
  .ks-site-jur-tekst h2 { font-size: 20px; margin-top: 40px; }
  .ks-site-slot-rij { flex-direction: column; align-items: stretch; }
  .ks-site-slot-rij .ks-knop, .ks-site-kop .ks-knop { width: 100%; }
  .ks-site-slot-rij .ks-site-knoppen, .ks-site-kop .ks-site-knoppen { flex-direction: column; align-items: stretch; }
  .ks-site-schema { font-size: 14px; }
  .ks-site-schema td { width: auto; }
}
@media (max-width: 600px) {
  .ks-site-oc-raster { gap: 28px 16px; }
  .ks-site-vvm-prijzen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ks-site-vvm-prijzen, .ks-site-vvm-prijzen tbody { display: block; }
  .ks-site-vvm-prijzen tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--ks-lijn); }
  .ks-site-vvm-prijzen tbody tr:first-child { border-top: 1px solid var(--ks-lijn); }
  .ks-site-vvm-prijzen tbody th, .ks-site-vvm-prijzen td { padding: 0; border: 0; }
  .ks-site-vvm-prijzen td.ks-site-vvm-prijs { grid-column: 2; grid-row: 1; }
  .ks-site-vvm-prijzen td:not(.ks-site-vvm-prijs) { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-site-onthul.ks-site-wacht { opacity: 1; transform: none; }
  .ks-gebied-site .ks-foto img.ks-site-laadt { opacity: 1; }
  .ks-site-kopzoek:active, .ks-home-zoekknop:active { transform: none; }
  html.ks-home-spot-anim .ks-home-spot-sluier, html.ks-home-spot-anim .ks-home-zoek { animation: none; }
  .ks-site-thema:active { transform: none; }
  ::view-transition-group(ks-home-zoek) { animation: none; }
}

/* Live zoeken in de vakkenlijst (/vakken/). Grote ronde balk die onder de
   kopbalk blijft staan; de lijst filtert tijdens het typen (site.js vakFilter). */
.ks-site-vakfilter { position: sticky; top: var(--ks-kop-totaal); z-index: 5; margin: 0 0 24px; padding: 12px 0; background: var(--ks-achter); }
.ks-site-vakfilter-balk { position: relative; display: flex; align-items: center; max-width: 640px; }
.ks-site-vakfilter-icoon { position: absolute; left: 20px; width: 20px; height: 20px; color: var(--ks-zacht); pointer-events: none; }
.ks-site-vakfilter-veld {
  width: 100%; min-height: 56px; padding: 0 20px 0 52px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil);
  background: var(--ks-paneel); color: var(--ks-inkt); font: inherit; font-size: 17px;
  transition: border-color .15s ease;
}
.ks-site-vakfilter-veld::placeholder { color: var(--ks-zacht); }
.ks-site-vakfilter-veld:hover { border-color: var(--ks-rand); }
.ks-site-vakfilter-veld:focus-visible { outline: none; border-color: var(--ks-inkt); box-shadow: 0 0 0 1px var(--ks-inkt); }
.ks-site-vakfilter-aantal { min-height: 20px; margin: 10px 0 0 20px; font-size: 14px; color: var(--ks-zacht); }
.ks-site-vakfilter-leeg { padding: 24px; border-radius: var(--ks-rond-groot); background: var(--ks-vlak); }
.ks-site-vakfilter-leeg p { margin: 0 0 12px; }
.ks-site-vakfilter-leeg[hidden] { display: none; }
[data-ks-vakfilter-item][hidden] { display: none; }
@media (max-width: 743px) {
  .ks-site-vakfilter { margin-bottom: 16px; padding: 8px 0; }
  .ks-site-vakfilter-veld { min-height: 52px; font-size: 16px; }
}

/* Afdrukken en pdf van de juridische documenten (tools/pdf.mjs): alleen de
   tekst, geen banner, tabbalk of knoppen. Kleuren licht via basis.css. */
@media print {
  .ks-site-tst, .ks-site-tabbalk, .ks-site-jur-acties, .ks-site-jur-pad, .ks-overslaan { display: none !important; }
  .ks-gebied-site .ks-voet { padding-bottom: 0; }
  .ks-site-jur-kop { padding-top: 0; }
  .ks-site-jur-kop .ks-melding { border: 1px solid var(--ks-lijn-sterk); }
  .ks-site-jur-tekst section { break-inside: auto; }
  .ks-site-jur-tekst h2 { break-after: avoid; break-inside: avoid; margin-top: 28px; font-size: 17px; }
  .ks-site-jur-tabel th, .ks-site-jur-tabel td { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
  .ks-site-jur-tekst li, .ks-site-jur-gegevens dd, .ks-site-jur-begrippen dd { break-inside: avoid; }
  .ks-site-jur-gegevens, .ks-site-jur-begrippen { grid-template-columns: 34% minmax(0, 1fr); font-size: 13px; }
  .ks-site-jur-gegevens dt, .ks-site-jur-begrippen dt, .ks-site-jur-gegevens dd, .ks-site-jur-begrippen dd { padding: 6px 0; border-bottom: 1px solid var(--ks-lijn); }
  .ks-site-jur-tekst h2 + p, .ks-site-jur-tekst p, .ks-site-jur-tekst li { font-size: 13px; }
  .ks-site-kop .ks-h1 { font-size: 26px; }
  .ks-site-kop .ks-lead { font-size: 14px; }
  .ks-site-jur-inhoud ol { columns: 2; }
  .ks-site-jur-inhoud a { min-height: 28px; font-size: 13px; }
  .ks-site-jur { padding-bottom: 0; }
  .ks-tabel-wrap { overflow: visible; }
  a { color: inherit; }
}

/* Actiepagina /actie/<code>/ (site/nl/actie.php), om te delen op Facebook. */
.ks-act-held { padding: 16px 0 8px; }
.ks-act-held-beeld { position: relative; display: flex; align-items: flex-end; min-height: 560px; padding: 32px; }
.ks-act-held-foto { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: var(--ks-rond-groot); background: var(--ks-foto); }
.ks-act-held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ks-act-held-kaart { position: relative; max-width: 580px; padding: 32px 36px; background: var(--ks-paneel); color: var(--ks-inkt); border-radius: var(--ks-rond-groot); }
.ks-act-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ks-merk); }
.ks-act-label svg { width: 18px; height: 18px; }
.ks-act-h1 { margin: 0; font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; }
.ks-act-lead { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--ks-zacht); }
.ks-act-knop { margin-top: 22px; }
.ks-act-noot { margin: 12px 0 0; font-size: 14px; color: var(--ks-zacht); }
.ks-act-sectie { padding: 56px 0; }
.ks-act-sectie-vlak { background: var(--ks-vlak); }
.ks-act-h2 { margin: 0 0 8px; font-size: var(--ks-t-2, 1.75rem); line-height: 1.2; font-weight: 600; }
.ks-act-tekst { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ks-zacht); }
.ks-act-klein { margin-top: 14px; font-size: 14px; }
.ks-act-tekst a { color: var(--ks-inkt); }
.ks-act-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.ks-act-kaart { display: flex; flex-direction: column; padding: 24px; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); }
.ks-act-kaart-icoon { width: 26px; height: 26px; margin-bottom: 14px; color: var(--ks-merk); }
.ks-act-kaart h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.ks-act-kaart p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ks-zacht); }
.ks-act-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 64px; align-items: start; }
.ks-act-stappen { margin: 0; padding: 0; list-style: none; }
.ks-act-stappen > li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-act-stappen > li:first-child { padding-top: 0; }
.ks-act-stappen > li:last-child { border-bottom: 0; padding-bottom: 0; }
.ks-act-stap-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ks-inkt); color: var(--ks-achter); font-size: 15px; font-weight: 600; }
.ks-act-stappen h3 { margin: 4px 0 4px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.ks-act-stappen p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ks-zacht); }
.ks-act-prijzen { width: 100%; border-collapse: collapse; font-size: 17px; }
.ks-act-prijzen th, .ks-act-prijzen td { padding: 14px 0; border-bottom: 1px solid var(--ks-lijn); text-align: left; font-weight: 400; }
.ks-act-prijzen td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-act-regels { margin: 0; padding: 0 0 0 20px; font-size: 16px; line-height: 1.55; }
.ks-act-regels li + li { margin-top: 8px; }
.ks-act-slot { padding: 48px 0 64px; border-top: 1px solid var(--ks-lijn); }
.ks-act-slot-rij { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ks-act-slot .ks-act-knop { margin-top: 0; flex: none; }
@media (max-width: 899px) {
  .ks-act-held-beeld { display: block; min-height: 0; padding: 0; }
  .ks-act-held-foto { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .ks-act-held-kaart { max-width: none; margin: -48px 12px 0; padding: 24px 22px 26px; }
  .ks-act-kaarten { grid-template-columns: minmax(0, 1fr); }
  .ks-act-twee { grid-template-columns: minmax(0, 1fr); }
  .ks-act-sectie { padding: 40px 0; }
  .ks-act-slot-rij { flex-direction: column; align-items: stretch; }
}
@media (max-width: 599px) {
  .ks-act-held { padding-top: 8px; }
  .ks-act-held-foto { border-radius: 12px; }
  .ks-act-held-kaart { border-radius: 12px; }
  .ks-act-lead { font-size: 16px; }
  .ks-act-knop { width: 100%; }
}

/* Openbare bedrijfspagina /bedrijf/{naam}-{id}/ (site/nl/bedrijf.php). */
.ks-bd-kop-rij { display: flex; align-items: center; gap: 24px; }
.ks-bd-logo { flex: 0 0 auto; display: flex; }
.ks-bd-werk .ks-vf-strook { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.ks-bd-kop-tekst { min-width: 0; }
.ks-bd-naam { overflow-wrap: anywhere; }
.ks-bd-onder { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; color: var(--ks-zacht); font-size: 16px; }
.ks-bd-score { margin: 12px 0 0; }
.ks-bd-score .ks-ster .ks-icoon { width: 20px; height: 20px; }
.ks-bd-score .ks-sterren-getal { font-size: 17px; }
.ks-bd-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 32px 48px; align-items: start; }
.ks-bd-hoofd { min-width: 0; }
.ks-bd-h2 { font-size: 24px; line-height: 1.25; font-weight: 600; margin: 0 0 16px; }
.ks-bd-h3 { font-size: 17px; line-height: 1.3; font-weight: 600; margin: 24px 0 10px; }
.ks-bd-controle .ks-bd-h3, .ks-bd-verdeling .ks-bd-h3, .ks-bd-uitleg .ks-bd-h3 { margin-top: 0; }
.ks-bd-over { margin: 0; max-width: 70ch; line-height: 1.55; overflow-wrap: anywhere; }
.ks-bd-vakken { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ks-bd-vak { min-height: 32px; text-decoration: none; color: var(--ks-inkt); }
.ks-bd-vak:hover { border-color: var(--ks-inkt); }
.ks-bd-vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ks-bd-vinkjes li { display: flex; gap: 8px; align-items: flex-start; }
.ks-bd-vinkjes .ks-icoon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--ks-inkt); }
.ks-bd-noot { margin: 16px 0 0; font-size: 15px; color: var(--ks-zacht); }
.ks-bd-knop { margin-top: 16px; width: 100%; }
.ks-bd-reviews { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ks-lijn); }
.ks-bd-review { padding: 20px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-bd-deel { margin-top: 16px; }
.ks-bd-deel .ks-bd-h3 { margin-top: 0; }
.ks-bd-deel-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ks-bd-deel-rij { display: flex; flex-direction: column; gap: 2px; }
.ks-bd-deel-naam { font-size: 15px; color: var(--ks-zacht); }
.ks-bd-review-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ks-bd-review-wie { margin: 0; font-size: 15px; color: var(--ks-zacht); }
.ks-bd-review-tekst { margin: 10px 0 0; max-width: 70ch; line-height: 1.55; overflow-wrap: anywhere; }
.ks-bd-reactie { margin: 14px 0 0; padding: 12px 16px; border-left: 2px solid var(--ks-lijn-sterk); background: var(--ks-vlak); border-radius: 0 var(--ks-rond) var(--ks-rond) 0; }
.ks-bd-reactie-kop { margin: 0; font-size: 14px; font-weight: 600; }
.ks-bd-reactie-tekst { margin: 4px 0 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ks-bd-paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.ks-bd-zij { display: grid; gap: 24px; }
.ks-bd-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ks-bd-balk { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 10px; align-items: center; font-size: 14px; }
.ks-bd-balk-ster { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.ks-bd-balk-ster .ks-icoon { width: 13px; height: 13px; color: var(--ks-inkt); fill: var(--ks-inkt); }
.ks-bd-balk-n { text-align: right; color: var(--ks-zacht); font-variant-numeric: tabular-nums; }
.ks-bd-balk-meter { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--ks-lijn); overflow: hidden; }
.ks-bd-balk-meter::-webkit-progress-bar { background: var(--ks-lijn); border-radius: 4px; }
.ks-bd-balk-meter::-webkit-progress-value { background: var(--ks-inkt); border-radius: 4px; }
.ks-bd-balk-meter::-moz-progress-bar { background: var(--ks-inkt); border-radius: 4px; }
.ks-bd-uitleglijst { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
@media (max-width: 743px) {
  .ks-bd-kop-rij { gap: 16px; align-items: flex-start; }
  .ks-bd-logo .ks-vf-logo-groot { width: 64px; height: 64px; font-size: 22px; }
  .ks-bd-werk .ks-vf-strook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-bd-raster { grid-template-columns: minmax(0, 1fr); }
}
/* Prestatiescore en medailles op de bedrijfspagina (onderdelen ks-md- uit basis.css) */
.ks-bd-medailles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }

/* Melden en contact (/melden/) */
.ks-site-mld-knop .ks-icoon { width: 18px; height: 18px; }

/* Voorpagina: gecontroleerde bedrijven en de nieuwste reviews (ks-vt-). */
.ks-vt-kop { max-width: 72ch; margin-bottom: 24px; }
.ks-vt-kop .ks-home-h2 { margin-bottom: 8px; }
.ks-vt-uitleg { margin: 0; color: var(--ks-zacht); line-height: 1.55; }
.ks-vt-bedrijven { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ks-vt-bedrijf { display: flex; flex-direction: column; gap: 12px; height: 100%; margin: 0; }
.ks-vt-bedrijf-kop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ks-vt-bedrijf-kop .ks-vf-logo-klein { width: 48px; height: 48px; font-size: 16px; }
.ks-vt-bedrijf-tekst { min-width: 0; }
.ks-vt-naam { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.ks-vt-naam a { color: var(--ks-inkt); text-decoration: none; }
.ks-vt-naam a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ks-vt-onder { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font-size: 14px; color: var(--ks-zacht); }
.ks-vt-score { margin: 0; min-height: 24px; }
.ks-vt-vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.ks-vt-vinkjes li { display: flex; gap: 8px; align-items: flex-start; }
.ks-vt-vinkjes .ks-icoon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--ks-inkt); }
.ks-vt-medailles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ks-vt-meer { margin-top: auto; align-self: flex-start; }
.ks-vt-h3 { margin: 40px 0 16px; font-size: 20px; line-height: 1.3; font-weight: 600; }
.ks-vt-reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.ks-vt-review { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ks-lijn); }
.ks-vt-citaat { margin: 0; }
.ks-vt-citaat p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.ks-vt-wie, .ks-vt-over { margin: 0; font-size: 14px; color: var(--ks-zacht); }
.ks-vt-over a { color: var(--ks-inkt); font-weight: 600; }
.ks-vt-noot { margin: 28px 0 0; max-width: 72ch; font-size: 15px; color: var(--ks-zacht); line-height: 1.5; }
.ks-vt-noot a { color: var(--ks-inkt); }
@media (max-width: 1023px) {
  .ks-vt-bedrijven, .ks-vt-reviews { grid-template-columns: minmax(0, 1fr); }
}

/* Live strook onder de kop (ks-live-, kern/spiegel.php): echte, anonieme
   gebeurtenissen. Zonder JS een rij; met JS (ks-live-js) één bericht tegelijk
   dat zacht wisselt. Bij minder beweging staat alles stil. */
.ks-live { border-bottom: 1px solid var(--ks-lijn); background: var(--ks-kaart); }
.ks-live-binnen { display: flex; align-items: center; gap: 12px 20px; min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
.ks-live-kop { display: flex; align-items: center; gap: 8px; flex: none; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ks-live-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--ks-groen); }
.ks-live-lijst { display: flex; gap: 8px 24px; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ks-live-lijst::-webkit-scrollbar { display: none; }
.ks-live-item { display: flex; align-items: center; gap: 8px; flex: none; font-size: 14px; line-height: 1.4; white-space: nowrap; }
.ks-live-icoon { flex: none; width: 16px; height: 16px; color: var(--ks-merk); }
.ks-live-wanneer { color: var(--ks-zacht); }
.ks-live-js .ks-live-lijst { display: grid; overflow: hidden; }
.ks-live-js .ks-live-item { grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; visibility: hidden; }
.ks-live-js .ks-live-item.ks-live-aan { opacity: 1; transform: none; visibility: visible; }
.ks-live-tekst { min-width: 0; }
.ks-live-js .ks-live-tekst { overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .ks-live-js .ks-live-stip { animation: ks-live-stip 2.4s ease-in-out infinite; }
}
@keyframes ks-live-stip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 599px) {
  .ks-live-binnen { gap: 10px; }
  .ks-live-koptekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ks-live-item { font-size: 13px; }
  .ks-live-js .ks-live-item { white-space: normal; }
  .ks-live-js .ks-live-tekst { overflow: visible; }
}

/* Net afgerond (ks-rw-, kern/spiegel.php): werk van gecontroleerde bedrijven,
   anoniem. Kaarten als een advertentie: foto of vakicoon boven, tekst onder.
   Voorpagina en plaatspagina's. */
.ks-rw-kop { margin: 0 0 6px; }
.ks-rw-uitleg { margin: 0 0 20px; max-width: 64ch; color: var(--ks-zacht); font-size: 15px; line-height: 1.5; }
.ks-rw-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ks-rw-item { display: flex; min-width: 0; }
.ks-rw-kaart { display: flex; flex-direction: column; width: 100%; color: var(--ks-inkt); text-decoration: none; }
.ks-rw-kaart:hover .ks-rw-vak, .ks-rw-kaart:focus-visible .ks-rw-vak { text-decoration: underline; text-underline-offset: 3px; }
.ks-rw-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ks-rond-foto); background: var(--ks-vlak); }
.ks-rw-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-rw-icoon { display: grid; place-items: center; color: var(--ks-merk); }
.ks-rw-icoon .ks-icoon { width: 40px; height: 40px; }
.ks-rw-tekst { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; min-width: 0; }
.ks-rw-vak { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ks-rw-vak span { font-weight: 400; color: var(--ks-zacht); }
.ks-rw-waar { display: flex; align-items: flex-start; gap: 4px; font-size: 14px; line-height: 1.4; }
.ks-rw-waar .ks-icoon { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--ks-zacht); }
.ks-rw-door { font-size: 13px; line-height: 1.4; color: var(--ks-zacht); overflow-wrap: anywhere; }
@media (max-width: 1023px) { .ks-rw-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 519px) { .ks-rw-lijst { gap: 12px; } .ks-rw-icoon .ks-icoon { width: 32px; height: 32px; } }

/* Zo werkt KlusSure (voorpagina, voor klanten): vier stappen, elk met een
   nagebouwd scherm. Zonder JS of met minder beweging staat alles in de
   eindstand. Met JS (ks-home-hw-js) begint een stap gedimd en speelt hij af
   zodra hij in beeld komt (ks-home-hw-aan, site.js hoeWerkt). Op de telefoon
   een rij om te vegen. */
.ks-home-hw-intro { max-width: 64ch; margin-bottom: 28px; }
.ks-home-hw-intro .ks-home-h2 { margin-bottom: 8px; }
.ks-home-hw-intro p { margin: 0; color: var(--ks-zacht); line-height: 1.55; }
.ks-home-hw-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ks-home-hw-stap { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.ks-home-hw-tel { display: flex; flex-direction: column; height: 360px; padding: 10px; background: var(--ks-vlak); border: 1px solid var(--ks-lijn); border-radius: 28px; overflow: hidden; }
.ks-home-hw-balk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; font-size: 13px; font-weight: 600; color: var(--ks-inkt); }
.ks-home-hw-merk { display: inline-flex; align-items: center; gap: 6px; }
.ks-home-hw-merk .ks-icoon { width: 16px; height: 16px; color: var(--ks-merk); }
.ks-home-hw-pil { padding: 2px 8px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil); font-size: 11px; color: var(--ks-zacht); }
.ks-home-hw-scherm { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--ks-paneel); border-radius: 20px; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--ks-inkt); }
.ks-home-hw-scherm p { margin: 0; }
.ks-home-hw-label, .ks-home-hw-klein { font-size: 12px; font-weight: 600; color: var(--ks-zacht); }
.ks-home-hw-titel { font-size: 15px; font-weight: 600; }
.ks-home-hw-veld { padding: 9px 12px; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); }
.ks-home-hw-fotos { display: flex; gap: 8px; }
.ks-home-hw-foto { display: block; width: 72px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--ks-foto); }
.ks-home-hw-foto-plus { display: grid; place-items: center; width: 56px; height: 56px; border: 1px dashed var(--ks-lijn-sterk); border-radius: 10px; color: var(--ks-zacht); }
.ks-home-hw-foto-plus .ks-icoon { width: 20px; height: 20px; }
.ks-home-hw-knop { margin-top: auto; min-height: 40px; pointer-events: none; }
.ks-home-hw-teller { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ks-home-hw-teller > span { height: 6px; border-radius: var(--ks-rond-pil); background: var(--ks-merk); transform-origin: left center; }
.ks-home-hw-bedrijven { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.ks-home-hw-bedrijven li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--ks-vlak); border-radius: 12px; min-width: 0; }
.ks-home-hw-bedrijven b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-home-hw-bedrijven small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ks-zacht); }
.ks-home-hw-bedrijven small .ks-icoon { width: 13px; height: 13px; color: var(--ks-merk); }
.ks-home-hw-bedrijven li > span:last-child { min-width: 0; }
.ks-home-hw-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ks-vlak-sterk); color: var(--ks-inkt); }
.ks-home-hw-avatar .ks-icoon { width: 17px; height: 17px; }
.ks-home-hw-wie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ks-home-hw-toegelaten { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ks-rond-pil); background: var(--ks-groen-zacht); color: var(--ks-groen); font-size: 12px; font-weight: 600; }
.ks-home-hw-toegelaten .ks-icoon { width: 13px; height: 13px; }
.ks-home-hw-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.ks-home-hw-bel { align-self: flex-start; max-width: 88%; padding: 8px 12px; background: var(--ks-vlak); border: 1px solid var(--ks-lijn); border-radius: 14px 14px 14px 4px; overflow-wrap: anywhere; }
.ks-home-hw-bel-eigen { align-self: flex-end; background: var(--ks-inkt); border-color: var(--ks-inkt); color: var(--ks-achter); border-radius: 14px 14px 4px 14px; }
.ks-home-hw-bel .ks-chat-slot { cursor: default; }
.ks-home-hw-noot, .ks-home-hw-ok { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ks-zacht); }
.ks-home-hw-noot .ks-icoon { flex: none; width: 14px; height: 14px; }
.ks-home-hw-ok { padding: 8px 10px; background: var(--ks-groen-zacht); color: var(--ks-groen); border-radius: 10px; font-size: 13px; font-weight: 600; }
.ks-home-hw-ok .ks-icoon { flex: none; width: 16px; height: 16px; }
.ks-home-hw-momenten { display: flex; flex-wrap: wrap; gap: 6px; }
.ks-home-hw-moment { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil); font-size: 13px; font-weight: 600; }
.ks-home-hw-moment .ks-icoon { width: 14px; height: 14px; }
.ks-home-hw-moment-aan { background: var(--ks-inkt); border-color: var(--ks-inkt); color: var(--ks-achter); }
.ks-home-hw-rijen { margin: 0; padding: 2px 12px; background: var(--ks-vlak); border-radius: 12px; }
.ks-home-hw-rijen > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-home-hw-rijen > div:last-child { border-bottom: 0; }
.ks-home-hw-rijen dt { font-size: 13px; color: var(--ks-zacht); }
.ks-home-hw-rijen dd { display: grid; justify-items: end; margin: 0; font-size: 13px; font-weight: 600; }
.ks-home-hw-rijen dd > span { grid-area: 1 / 1; }
.ks-home-hw-dicht { opacity: 0; color: var(--ks-zacht); }
.ks-home-hw-dicht .ks-icoon { width: 14px; height: 14px; }
.ks-home-hw-prijs { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--ks-lijn); font-size: 13px; color: var(--ks-zacht); }
.ks-home-hw-prijs b { color: var(--ks-inkt); font-size: 15px; }
.ks-home-hw-spoor { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; }
.ks-home-hw-nr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ks-merk); color: var(--ks-op-merk); font-size: 14px; font-weight: 600; }
.ks-home-hw-lijn { position: relative; flex: 1; height: 2px; margin-right: -20px; border-radius: 2px; background: var(--ks-lijn); overflow: hidden; }
.ks-home-hw-lijn::after { content: ""; position: absolute; inset: 0; background: var(--ks-merk); transform-origin: left center; }
.ks-home-hw-kop { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.ks-home-hw-tekst { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ks-zacht); }
.ks-home-hw-knoppen { margin-top: 28px; align-items: center; }

/* Afspelen: begintoestand alleen met JS en zolang de stap niet aan is. */
.ks-home-hw-aan .ks-home-hw-tel { transition: opacity .3s ease, transform .3s var(--ks-veer); }
.ks-home-hw-aan .ks-home-hw-nr { transition: transform .3s var(--ks-veer); }
.ks-home-hw-aan .ks-home-hw-lijn::after { transition: transform .3s ease 1.5s; }
.ks-home-hw-aan :is(.ks-home-hw-na1, .ks-home-hw-na2, .ks-home-hw-na3, .ks-home-hw-na4) { transition: opacity .3s ease, transform .3s var(--ks-veer); }
.ks-home-hw-aan .ks-home-hw-na1 { transition-delay: .3s; }
.ks-home-hw-aan .ks-home-hw-na2 { transition-delay: .6s; }
.ks-home-hw-aan .ks-home-hw-na3 { transition-delay: .9s; }
.ks-home-hw-aan .ks-home-hw-na4 { transition-delay: 1.2s; }
.ks-home-hw-aan .ks-home-hw-dicht { transition: opacity .2s ease .9s; }
.ks-home-hw-aan .ks-home-hw-moment-aan { transition: opacity .3s ease .3s, background-color .2s ease .3s, color .2s ease .3s, border-color .2s ease .3s; }
.ks-home-hw-js .ks-home-hw-stap:not(.ks-home-hw-aan) .ks-home-hw-tel { opacity: .45; transform: translateY(14px); }
.ks-home-hw-js .ks-home-hw-stap:not(.ks-home-hw-aan) .ks-home-hw-nr { transform: scale(.8); }
.ks-home-hw-js .ks-home-hw-stap:not(.ks-home-hw-aan) .ks-home-hw-lijn::after { transform: scaleX(0); }
.ks-home-hw-js .ks-home-hw-stap:not(.ks-home-hw-aan) :is(.ks-home-hw-na1, .ks-home-hw-na2, .ks-home-hw-na3, .ks-home-hw-na4) { opacity: 0; transform: translateY(8px); }
.ks-home-hw-js .ks-home-hw-stap:not(.ks-home-hw-aan) .ks-home-hw-teller > span { opacity: 1; transform: scaleX(0); }
.ks-home-hw-js .ks-home-hw-stap:not(.ks-home-hw-aan) .ks-home-hw-moment-aan { opacity: 1; transform: none; background: transparent; border-color: var(--ks-lijn-sterk); color: var(--ks-inkt); }
.ks-home-hw-js .ks-home-hw-stap:not(.ks-home-hw-aan) .ks-home-hw-dicht { opacity: 1; }

@media (max-width: 1023px) {
  .ks-home-hw-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .ks-home-hw-stap:nth-child(2n) .ks-home-hw-lijn { display: none; }
}
@media (max-width: 599px) {
  .ks-home-hw-rij { display: flex; gap: 14px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ks-home-hw-rij::-webkit-scrollbar { display: none; }
  .ks-home-hw-stap { flex: 0 0 82%; scroll-snap-align: start; }
  .ks-home-hw-stap:nth-child(2n) .ks-home-hw-lijn { display: block; }
  .ks-home-hw-lijn { margin-right: -14px; }
  .ks-home-hw-tel { height: auto; min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-home-hw-aan .ks-home-hw-tel, .ks-home-hw-aan .ks-home-hw-nr, .ks-home-hw-aan .ks-home-hw-lijn::after, .ks-home-hw-aan :is(.ks-home-hw-na1, .ks-home-hw-na2, .ks-home-hw-na3, .ks-home-hw-na4), .ks-home-hw-aan .ks-home-hw-dicht, .ks-home-hw-aan .ks-home-hw-moment-aan { transition: none; }
}
/* Zonder bedrijven op de site: de vaste regels als drie kaarten. */
.ks-vt-regels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ks-vt-regel { margin: 0; height: 100%; }
.ks-vt-regel h3 { margin: 12px 0 6px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.ks-vt-regel p { margin: 0; color: var(--ks-zacht); line-height: 1.5; }
.ks-vt-regel-icoon { width: 24px; height: 24px; color: var(--ks-inkt); }
.ks-vt-sociaal { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ks-vt-sociaal a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ks-inkt); font-weight: 600; }
.ks-vt-sociaal .ks-icoon { width: 20px; height: 20px; }
@media (max-width: 1023px) { .ks-vt-regels { grid-template-columns: minmax(0, 1fr); } }

/* Mega-actie: gratis voor klant en bedrijf (home.php, voor-vakmensen.php) */
.ks-home-gratis { padding: 24px 0 8px; }
.ks-home-gratis-vlak { padding: 28px 32px; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-groot); }
.ks-home-gratis-kop { margin: 0 0 20px; font-size: var(--ks-t-2); line-height: 1.2; font-weight: 600; color: var(--ks-inkt); }
.ks-home-gratis-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ks-home-gratis-deel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--ks-inkt); }
.ks-home-gratis-deel h3 svg { width: 22px; height: 22px; flex: none; color: var(--ks-merk); }
.ks-home-gratis-deel p { margin: 0; color: var(--ks-zacht); line-height: 1.5; }
.ks-home-gratis-deel a { color: var(--ks-inkt); font-weight: 600; }
@media (max-width: 720px) {
  .ks-home-gratis-vlak { padding: 20px; }
  .ks-home-gratis-twee { grid-template-columns: 1fr; gap: 18px; }
}
.ks-site-vvm-gratis-label { display: inline-block; margin: 0 0 14px; padding: 4px 10px; border: 1px solid var(--ks-lijn); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ks-merk); }

/* Blog: /blog/ en /blog/<slug>/ (kern/blog.php, site/nl/blog*.php) -------- */
.ks-blog-kop { padding-bottom: 8px; }
.ks-blog-overzicht { padding-bottom: 80px; }
.ks-blog-leeg { color: var(--ks-zacht); }
.ks-blog-groep { padding-top: 32px; }
.ks-blog-groepkop { margin: 0 0 16px; font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.ks-blog-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ks-blog-kaart { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); overflow: hidden; }
.ks-blog-kaart:hover { border-color: var(--ks-lijn-sterk); }
.ks-blog-kaart-foto { aspect-ratio: 3 / 2; background: var(--ks-vlak); }
.ks-blog-kaart-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-blog-kaart-tekst { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.ks-blog-kaart-meta { margin: 0 0 8px; color: var(--ks-zacht); font-size: 14px; }
.ks-blog-kaart-kop { margin: 0 0 8px; font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.ks-blog-kaart-kop a { color: var(--ks-inkt); text-decoration: none; }
.ks-blog-kaart-kop a::after { content: ""; position: absolute; inset: 0; }
.ks-blog-kaart-kop a:focus-visible { outline: none; }
.ks-blog-kaart:has(a:focus-visible) { outline: 2px solid var(--ks-focus); outline-offset: 2px; }
.ks-blog-kaart-intro { margin: 0; color: var(--ks-zacht); font-size: 15px; line-height: 1.5; }

.ks-blog-artkop { padding-top: 24px; padding-bottom: 8px; }
.ks-blog-kruimel { margin: 0 0 20px; font-size: 14px; color: var(--ks-zacht); }
.ks-blog-kruimel a { color: var(--ks-zacht); }
.ks-blog-meta { margin: 0 0 10px; color: var(--ks-zacht); font-size: 14px; }
.ks-blog-titel { max-width: 24ch; }
.ks-blog-intro { margin: 16px 0 0; max-width: none; }
.ks-blog-controle { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; color: var(--ks-zacht); font-size: 14px; }
.ks-blog-controle-icoon { width: 18px; height: 18px; flex: none; color: var(--ks-groen); }
.ks-blog-held { margin: 24px 0 0; aspect-ratio: 16 / 9; border-radius: var(--ks-rond-foto); overflow: hidden; background: var(--ks-vlak); }
.ks-blog-held-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-blog-lijf { padding-top: 8px; padding-bottom: 48px; }
.ks-blog-inhoud { margin: 32px 0 0; padding: 16px 20px; background: var(--ks-vlak); border-radius: var(--ks-rond-foto); }
.ks-blog-inhoud-kop { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.ks-blog-inhoud-lijst { margin: 0; padding-left: 1.3em; }
.ks-blog-inhoud-lijst li { margin: 4px 0; }
.ks-blog-inhoud-lijst a { color: var(--ks-inkt); }
.ks-blog-tekst { font-size: 17px; line-height: 1.65; }
.ks-blog-kop2 { margin: 48px 0 12px; font-size: 24px; line-height: 1.25; letter-spacing: 0; scroll-margin-top: 96px; }
.ks-blog-kop3 { margin: 28px 0 8px; font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.ks-blog-alinea { margin: 0 0 16px; }
.ks-blog-lijst, .ks-blog-stappen { margin: 0 0 20px; padding-left: 1.3em; }
.ks-blog-lijst li, .ks-blog-stappen li { margin-bottom: 8px; }
.ks-blog-link { color: var(--ks-inkt); text-underline-offset: 3px; }
.ks-blog-tabelwrap { margin: 8px 0 24px; }
.ks-blog-tabel { font-size: 15px; line-height: 1.45; }
.ks-blog-tabel th, .ks-blog-tabel td { white-space: normal; vertical-align: top; text-align: left; }
.ks-blog-kader { display: flex; gap: 12px; margin: 24px 0; padding: 16px 20px; border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); font-size: 16px; }
.ks-blog-kader p { margin: 0; }
.ks-blog-kader-icoon { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--ks-zacht); }
.ks-blog-bronnen { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--ks-lijn); }
.ks-blog-bronnen-kop { margin: 0 0 8px; font-size: 16px; letter-spacing: 0; }
.ks-blog-bronnen-lijst { margin: 0; padding-left: 1.4em; font-size: 15px; color: var(--ks-zacht); }
.ks-blog-bronnen-lijst li { margin: 6px 0; }
.ks-blog-bronnen-lijst a { color: var(--ks-inkt); overflow-wrap: anywhere; }
.ks-blog-actie { margin: 40px 0 0; padding: 24px; background: var(--ks-vlak); border-radius: var(--ks-rond-foto); }
.ks-blog-actie-kop { margin: 0 0 8px; font-size: 20px; letter-spacing: 0; }
.ks-blog-actie-tekst { margin: 0 0 16px; }
.ks-blog-vakken { margin: 24px 0 0; color: var(--ks-zacht); font-size: 15px; }
.ks-blog-vakken a { color: var(--ks-inkt); }
.ks-blog-verder { padding-top: 16px; padding-bottom: 80px; border-top: 1px solid var(--ks-lijn); }
.ks-blog-verder .ks-blog-groepkop { margin-top: 32px; }
/* Beroepengids (07-11-2026): diensten, vragen, plaatsen en het overzicht. */
.ks-blog-diensten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 24px; padding: 0; list-style: none; }
.ks-blog-dienst { display: flex; flex-direction: column; height: 100%; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); overflow: hidden; }
.ks-blog-dienst-img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--ks-vlak); }
.ks-blog-dienst-lijf { padding: 14px 16px; }
.ks-blog-dienst-kop { margin: 0 0 4px; font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.ks-blog-dienst-link { color: var(--ks-inkt); text-underline-offset: 3px; }
.ks-blog-dienst-tekst { margin: 0; color: var(--ks-zacht); font-size: 15px; line-height: 1.5; }
.ks-blog-vragen { margin: 8px 0 24px; border-top: 1px solid var(--ks-lijn); }
.ks-blog-vraag { border-bottom: 1px solid var(--ks-lijn); }
.ks-blog-vraag-kop { padding: 14px 0; font-weight: 600; cursor: pointer; }
.ks-blog-vraag-tekst { margin: 0 0 16px; }
.ks-blog-plaatslijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 15px; }
.ks-blog-beroepen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.ks-blog-beroep-link { display: block; padding: 10px 0; border-bottom: 1px solid var(--ks-lijn); color: var(--ks-inkt); text-decoration: none; }
.ks-blog-beroep-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ks-blog-beroepen-intro { margin: -8px 0 16px; color: var(--ks-zacht); }
@media (max-width: 960px) {
  .ks-blog-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-blog-beroepen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ks-blog-raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ks-blog-tekst { font-size: 16px; }
  .ks-blog-kop2 { font-size: 21px; margin-top: 40px; }
  .ks-blog-held { aspect-ratio: 4 / 3; }
  .ks-blog-diensten { grid-template-columns: minmax(0, 1fr); }
  .ks-blog-plaatslijst, .ks-blog-beroepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Voorpagina: vakken als rondjes in een rij om te vegen (07-11-2026).
   Op een telefoon loopt de rij door tot de rand van het scherm, zodat te
   zien is dat er meer is; op een groter scherm schuiven de pijlen (site.js). */
.ks-home-rond { padding: 32px 0 8px; }
.ks-home-rond-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.ks-home-rond-titel { margin: 0; }
.ks-home-rond-alles { flex: none; font-size: 15px; font-weight: 600; color: var(--ks-zacht); text-decoration: none; }
.ks-home-rond-alles:hover { color: var(--ks-inkt); text-decoration: underline; text-underline-offset: 4px; }
.ks-home-rond-houder { position: relative; }
.ks-home-rond-rij { display: flex; gap: 28px; margin: 0; padding: 4px 2px 6px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ks-home-rond-rij::-webkit-scrollbar { display: none; }
.ks-home-rond-item { flex: none; min-width: 132px; scroll-snap-align: start; }
.ks-home-rond-vak { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ks-inkt); text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ks-home-rond-vak:hover { color: var(--ks-inkt); text-decoration: none; }
.ks-home-rond-vak:focus-visible { outline: none; }
.ks-home-rond-vak:focus-visible .ks-home-rond-foto { outline: 2px solid var(--ks-focus); outline-offset: 3px; }
.ks-home-rond-foto { width: 132px; height: 132px; border-radius: 50%; background: var(--ks-vlak); }
.ks-home-rond-foto img { border-radius: 50%; }
@media (hover: hover) { .ks-home-rond-vak:hover .ks-home-rond-foto img { transform: scale(1.06); } }
.ks-home-rond-naam { font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.ks-home-rond-pijl { position: absolute; top: 46px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ks-lijn); border-radius: 50%; background: var(--ks-paneel); color: var(--ks-inkt); box-shadow: var(--ks-schaduw-zacht); cursor: pointer; }
.ks-home-rond-pijl[hidden] { display: none; }
.ks-home-rond-pijl:hover { background: var(--ks-vlak); }
.ks-home-rond-pijl .ks-icoon { width: 20px; height: 20px; }
.ks-home-rond-vorige { left: -14px; }
.ks-home-rond-volgende { right: -14px; }
@media (max-width: 743px) {
  .ks-home-rond { padding-top: 24px; }
  .ks-home-rond-kop { margin-bottom: 14px; }
  .ks-home-rond-rij { gap: 16px; margin: 0 calc(-1 * var(--ks-zijmarge)); padding-left: var(--ks-zijmarge); padding-right: var(--ks-zijmarge); scroll-padding-left: var(--ks-zijmarge); }
  .ks-home-rond-item { min-width: 84px; }
  .ks-home-rond-foto { width: 84px; height: 84px; }
  .ks-home-rond-vak { gap: 8px; }
  .ks-home-rond-naam { font-size: 13px; }
  .ks-home-rond-pijl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-home-rond-rij { scroll-behavior: auto; }
  .ks-home-rond-vak:hover .ks-home-rond-foto img { transform: none; }
}

/* Voet van de site (ks_voet_site): een donkere band in beide ontwerpen.
   De kleurvariabelen worden binnen de voet omgezet, zodat de themaknop,
   de cookieknop en de social-iconen vanzelf meegaan. Links het merk met de
   beloftes, rechts vier groepen; op de telefoon klappen de groepen in. */
.ks-gebied-site .ks-site-ft {
  --ks-inkt: var(--ks-op-band); --ks-zacht: var(--ks-op-band-zacht); --ks-lijn: var(--ks-rand); --ks-vlak: var(--ks-band); --ks-vlak-sterk: var(--ks-band);
  --ks-logo-inkt: var(--ks-op-band);
  background: var(--ks-band); color: var(--ks-op-band); border-top: 0; font-size: 15px;
}
.ks-site-ft-boven { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px 56px; padding: 64px 0 48px; }
.ks-site-ft-merk .ks-logo svg { height: 30px; }
.ks-site-ft-slogan { margin: 20px 0 0; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ks-op-band); }
.ks-site-ft-uitleg { max-width: 40ch; margin: 8px 0 0; line-height: 1.55; color: var(--ks-op-band-zacht); }
.ks-gebied-site .ks-site-ft-beloftes { display: grid; gap: 2px; margin: 24px 0 0; }
.ks-site-ft-beloftes li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; font-size: 14px; line-height: 1.45; color: var(--ks-op-band-zacht); }
.ks-site-ft-icoon { flex: none; width: 20px; height: 20px; color: var(--ks-op-band); }
.ks-site-ft-beloftes a { color: var(--ks-op-band); text-decoration: underline; text-underline-offset: 3px; }
.ks-site-ft-beloftes a:hover { text-decoration-thickness: 2px; }
.ks-site-ft-vertrouwen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.ks-site-ft-tp { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond-foto); color: var(--ks-op-band); text-decoration: none; transition: border-color .15s ease; }
.ks-site-ft-tp:hover, .ks-site-ft-tp:focus-visible { border-color: var(--ks-op-band); }
.ks-site-ft-tp-sterren { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ks-rond); border: 1px solid var(--ks-rand); }
.ks-site-ft-tp-ster { width: 18px; height: 18px; fill: currentColor; color: var(--ks-op-band); }
.ks-site-ft-tp-tekst { display: grid; line-height: 1.3; font-size: 14px; }
.ks-site-ft-tp-tekst b { font-weight: 700; }
.ks-site-ft-tp-tekst span { color: var(--ks-op-band-zacht); font-size: 13px; }
.ks-site-ft-tp-pijl { width: 18px; height: 18px; color: var(--ks-op-band-zacht); }

.ks-site-ft-groepen { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 32px 24px; align-content: start; }
.ks-site-ft-kop { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ks-op-band-zacht); list-style: none; cursor: default; pointer-events: none; }
.ks-site-ft-kop::-webkit-details-marker { display: none; }
.ks-site-ft-klap { display: none; width: 20px; height: 20px; transition: transform .2s ease; }
.ks-gebied-site .ks-site-ft-lijst { display: grid; gap: 0; }
.ks-site-ft-lijst a { display: inline-flex; align-items: center; min-height: 36px; padding: 2px 0; line-height: 1.35; color: var(--ks-op-band); text-decoration: none; }
.ks-site-ft-lijst a:hover, .ks-site-ft-lijst a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.ks-site-ft-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0 24px; border-top: 1px solid var(--ks-rand); color: var(--ks-op-band-zacht); font-size: 13px; }
.ks-site-ft-recht { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.ks-site-ft-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ks-site-ft-cookie { min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); color: var(--ks-op-band); font: inherit; font-size: 14px; cursor: pointer; }
.ks-site-ft-cookie:hover { border-color: var(--ks-op-band); }
.ks-site-ft .ks-thema-knop { color: var(--ks-op-band); }
.ks-site-ft .ks-thema-knop:hover { border-color: var(--ks-op-band); background: none; }

/* Ruimte onder de voet, zodat de knop Vraag het ons (rechtsonder vast)
   de themaknop niet bedekt. */
@media (min-width: 744px) {
  .ks-site-ft-onder { padding-bottom: 96px; }
}
@media (max-width: 1080px) {
  .ks-site-ft-boven { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 743px) {
  .ks-site-ft-boven { padding: 44px 0 24px; gap: 28px; }
  .ks-site-ft-slogan { font-size: 18px; }
  /* Op de telefoon klapbare groepen onder elkaar, met een lijn ertussen. */
  .ks-site-ft-groepen { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--ks-rand); }
  .ks-site-ft-groep { border-bottom: 1px solid var(--ks-rand); }
  .ks-site-ft-kop { min-height: 56px; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ks-op-band); cursor: pointer; pointer-events: auto; }
  .ks-site-ft-klap { display: block; }
  .ks-site-ft-groep[open] .ks-site-ft-klap { transform: rotate(180deg); }
  .ks-gebied-site .ks-site-ft-lijst { padding: 0 0 12px; }
  .ks-site-ft-lijst a { min-height: 44px; }
  .ks-site-ft-onder { flex-direction: column; align-items: flex-start; padding-top: 20px; }
  .ks-site-ft-recht { flex-direction: column; }
  .ks-site-ft-tp { width: 100%; }
  .ks-site-ft-tp-pijl { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-site-ft-klap, .ks-site-ft-tp { transition: none; }
}

/* Zo komt een klus bij u (/voor-vakmensen/, site/nl/blok-vakman-route.php):
   vier nagebouwde schermen vanuit de vakman gezien en een strook met wat elke
   stap kost. Werkt als het klantenblok: met JS (ks-vvm-rt-js) begint een stap
   gedimd en speelt hij af zodra hij in beeld komt (ks-vvm-rt-aan, site.js
   hoeWerkt); zonder JS of met minder beweging alles in de eindstand. Op de
   telefoon een rij om te vegen. */
.ks-vvm-rt { padding: 48px 0 24px; }
.ks-vvm-rt-intro { max-width: 64ch; margin-bottom: 28px; }
.ks-vvm-rt-h2 { margin: 0 0 8px; font-size: var(--ks-t-2); line-height: 1.2; font-weight: 600; letter-spacing: 0; color: var(--ks-inkt); }
.ks-vvm-rt-intro p { margin: 0; color: var(--ks-zacht); line-height: 1.55; }
.ks-vvm-rt-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ks-vvm-rt-stap { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.ks-vvm-rt-tel { display: flex; flex-direction: column; height: 360px; padding: 10px; background: var(--ks-vlak); border: 1px solid var(--ks-lijn); border-radius: 28px; overflow: hidden; }
.ks-vvm-rt-balk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; font-size: 13px; font-weight: 600; color: var(--ks-inkt); }
.ks-vvm-rt-merk { display: inline-flex; align-items: center; gap: 6px; }
.ks-vvm-rt-merk .ks-icoon { width: 16px; height: 16px; color: var(--ks-merk); }
.ks-vvm-rt-pil { padding: 2px 8px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil); font-size: 11px; color: var(--ks-zacht); }
.ks-vvm-rt-scherm { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--ks-paneel); border-radius: 20px; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--ks-inkt); }
.ks-vvm-rt-scherm p { margin: 0; }
.ks-vvm-rt-label { font-size: 12px; font-weight: 600; color: var(--ks-zacht); }
.ks-vvm-rt-titel { font-size: 15px; font-weight: 600; }
.ks-vvm-rt-veld { padding: 9px 12px; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond); font-size: 13px; }
.ks-vvm-rt-melding { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--ks-vlak); border: 1px solid var(--ks-lijn); border-radius: 14px; }
.ks-vvm-rt-melding-icoon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ks-merk); color: var(--ks-op-merk); }
.ks-vvm-rt-melding-icoon .ks-icoon { width: 16px; height: 16px; }
.ks-vvm-rt-melding-tekst { min-width: 0; }
.ks-vvm-rt-melding-tekst b { display: block; font-size: 13px; font-weight: 600; }
.ks-vvm-rt-melding-tekst small { display: block; font-size: 12px; color: var(--ks-zacht); }
.ks-vvm-rt-klus { display: flex; flex-direction: column; gap: 8px; }
.ks-vvm-rt-foto { display: block; width: 100%; height: 84px; object-fit: cover; border-radius: 12px; background: var(--ks-foto); }
.ks-vvm-rt-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ks-zacht); }
.ks-vvm-rt-meta .ks-icoon { flex: none; width: 14px; height: 14px; }
.ks-vvm-rt-rijen { margin: 0; padding: 2px 12px; background: var(--ks-vlak); border-radius: 12px; }
.ks-vvm-rt-rijen > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ks-lijn); }
.ks-vvm-rt-rijen > div:last-child { border-bottom: 0; }
.ks-vvm-rt-rijen dt { font-size: 13px; color: var(--ks-zacht); }
.ks-vvm-rt-rijen dd { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; font-size: 13px; font-weight: 600; text-align: right; min-width: 0; }
.ks-vvm-rt-rijen dd .ks-icoon { flex: none; width: 14px; height: 14px; color: var(--ks-zacht); }
.ks-vvm-rt-rijen dd:has(.ks-vvm-rt-open) { display: grid; justify-items: end; }
.ks-vvm-rt-rijen dd > span { grid-area: 1 / 1; }
.ks-vvm-rt-dicht { opacity: 0; color: var(--ks-zacht); }
.ks-vvm-rt-momenten { display: flex; flex-wrap: wrap; gap: 6px; }
.ks-vvm-rt-moment { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil); font-size: 13px; font-weight: 600; }
.ks-vvm-rt-knop { min-height: 40px; pointer-events: none; }
.ks-vvm-rt-wie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ks-vvm-rt-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ks-vlak-sterk); color: var(--ks-inkt); }
.ks-vvm-rt-avatar .ks-icoon { width: 17px; height: 17px; }
.ks-vvm-rt-toegelaten { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ks-rond-pil); background: var(--ks-groen-zacht); color: var(--ks-groen); font-size: 12px; font-weight: 600; }
.ks-vvm-rt-toegelaten .ks-icoon { width: 13px; height: 13px; }
.ks-vvm-rt-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.ks-vvm-rt-bel { align-self: flex-start; max-width: 88%; padding: 8px 12px; background: var(--ks-vlak); border: 1px solid var(--ks-lijn); border-radius: 14px 14px 14px 4px; overflow-wrap: anywhere; }
.ks-vvm-rt-bel-eigen { align-self: flex-end; background: var(--ks-inkt); border-color: var(--ks-inkt); color: var(--ks-achter); border-radius: 14px 14px 4px 14px; }
.ks-vvm-rt-bel .ks-chat-slot { cursor: default; }
.ks-vvm-rt-noot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ks-zacht); }
.ks-vvm-rt-noot .ks-icoon { flex: none; width: 14px; height: 14px; }
.ks-vvm-rt-ok { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--ks-groen-zacht); color: var(--ks-groen); border-radius: 10px; font-size: 13px; font-weight: 600; }
.ks-vvm-rt-ok .ks-icoon { flex: none; width: 16px; height: 16px; }
.ks-vvm-rt-prijs { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--ks-lijn); font-size: 13px; color: var(--ks-zacht); }
.ks-vvm-rt-prijs b { color: var(--ks-inkt); font-size: 15px; }
.ks-vvm-rt-spoor { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; }
.ks-vvm-rt-nr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ks-merk); color: var(--ks-op-merk); font-size: 14px; font-weight: 600; }
.ks-vvm-rt-lijn { position: relative; flex: 1; height: 2px; margin-right: -20px; border-radius: 2px; background: var(--ks-lijn); overflow: hidden; }
.ks-vvm-rt-lijn::after { content: ""; position: absolute; inset: 0; background: var(--ks-merk); transform-origin: left center; }
.ks-vvm-rt-kop { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ks-inkt); }
.ks-vvm-rt-tekst { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ks-zacht); }
/* Strook: wat elke stap kost. Vier keer gratis, dan de afspraak. */
.ks-vvm-rt-kosten { margin-top: 36px; padding: 20px 24px; background: var(--ks-paneel); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); }
.ks-vvm-rt-kosten-kop { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--ks-inkt); }
.ks-vvm-rt-kosten-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ks-vvm-rt-kosten-stap { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 12px; }
.ks-vvm-rt-kosten-stap::before { content: ""; position: absolute; top: 13px; left: 28px; right: 0; height: 2px; background: var(--ks-lijn); }
.ks-vvm-rt-kosten-stap:last-child::before { display: none; }
.ks-vvm-rt-kosten-punt { position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border: 1px solid var(--ks-lijn-sterk); border-radius: 50%; background: var(--ks-paneel); color: var(--ks-groen); }
.ks-vvm-rt-kosten-punt .ks-icoon { width: 15px; height: 15px; }
.ks-vvm-rt-kosten-stap-af .ks-vvm-rt-kosten-punt { background: var(--ks-merk); border-color: var(--ks-merk); color: var(--ks-op-merk); }
.ks-vvm-rt-kosten-wat { font-size: 14px; color: var(--ks-zacht); }
.ks-vvm-rt-kosten-prijs { font-size: 15px; font-weight: 600; color: var(--ks-inkt); }
/* Beweging */
.ks-vvm-rt-aan .ks-vvm-rt-tel { transition: opacity .3s ease, transform .3s var(--ks-veer); }
.ks-vvm-rt-aan .ks-vvm-rt-nr { transition: transform .3s var(--ks-veer); }
.ks-vvm-rt-aan .ks-vvm-rt-lijn::after { transition: transform .3s ease 1.5s; }
.ks-vvm-rt-aan :is(.ks-vvm-rt-na1, .ks-vvm-rt-na2, .ks-vvm-rt-na3, .ks-vvm-rt-na4) { transition: opacity .3s ease, transform .3s var(--ks-veer); }
.ks-vvm-rt-aan .ks-vvm-rt-na1 { transition-delay: .3s; }
.ks-vvm-rt-aan .ks-vvm-rt-na2 { transition-delay: .6s; }
.ks-vvm-rt-aan .ks-vvm-rt-na3 { transition-delay: .9s; }
.ks-vvm-rt-aan .ks-vvm-rt-na4 { transition-delay: 1.2s; }
.ks-vvm-rt-aan .ks-vvm-rt-dicht { transition: opacity .2s ease .6s; }
.ks-vvm-rt-js .ks-vvm-rt-stap:not(.ks-vvm-rt-aan) .ks-vvm-rt-tel { opacity: .45; transform: translateY(14px); }
.ks-vvm-rt-js .ks-vvm-rt-stap:not(.ks-vvm-rt-aan) .ks-vvm-rt-nr { transform: scale(.8); }
.ks-vvm-rt-js .ks-vvm-rt-stap:not(.ks-vvm-rt-aan) .ks-vvm-rt-lijn::after { transform: scaleX(0); }
.ks-vvm-rt-js .ks-vvm-rt-stap:not(.ks-vvm-rt-aan) :is(.ks-vvm-rt-na1, .ks-vvm-rt-na2, .ks-vvm-rt-na3, .ks-vvm-rt-na4) { opacity: 0; transform: translateY(8px); }
.ks-vvm-rt-js .ks-vvm-rt-stap:not(.ks-vvm-rt-aan) .ks-vvm-rt-dicht { opacity: 1; }
@media (max-width: 1023px) {
  .ks-vvm-rt-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .ks-vvm-rt-stap:nth-child(2n) .ks-vvm-rt-lijn { display: none; }
}
@media (max-width: 599px) {
  .ks-vvm-rt { padding: 32px 0 16px; }
  .ks-vvm-rt-rij { display: flex; gap: 14px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ks-vvm-rt-rij::-webkit-scrollbar { display: none; }
  .ks-vvm-rt-stap { flex: 0 0 82%; scroll-snap-align: start; }
  .ks-vvm-rt-stap:nth-child(2n) .ks-vvm-rt-lijn { display: block; }
  .ks-vvm-rt-lijn { margin-right: -14px; }
  .ks-vvm-rt-tel { height: auto; min-height: 340px; }
  .ks-vvm-rt-kosten { margin-top: 28px; padding: 18px 16px; }
  .ks-vvm-rt-kosten-rij { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ks-vvm-rt-kosten-stap { display: grid; grid-template-columns: 28px auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 0 14px; }
  .ks-vvm-rt-kosten-stap:last-child { padding-bottom: 0; }
  .ks-vvm-rt-kosten-stap::before { top: 28px; bottom: 0; left: 13px; right: auto; width: 2px; height: auto; }
  .ks-vvm-rt-kosten-punt { margin: 0; }
  .ks-vvm-rt-kosten-prijs { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-vvm-rt-aan .ks-vvm-rt-tel, .ks-vvm-rt-aan .ks-vvm-rt-nr, .ks-vvm-rt-aan .ks-vvm-rt-lijn::after, .ks-vvm-rt-aan :is(.ks-vvm-rt-na1, .ks-vvm-rt-na2, .ks-vvm-rt-na3, .ks-vvm-rt-na4), .ks-vvm-rt-aan .ks-vvm-rt-dicht { transition: none; }
}