/* Pagina's per vak en plaats op klussure.nl (site/nl/vak*.php, plaats*.php).
   Prefixen: ks-seo- (bouwstenen uit kern/seo.php), ks-vk- (vak landelijk),
   ks-vpr- (vak per provincie), ks-vp- (vak per plaats), ks-pl- (plaatsen).
   Kleuren alleen via de variabelen uit basis.css. */

/* Kruimelpad */
.ks-seo-kruimel { margin-bottom: 14px; font-size: .88rem; }
.ks-seo-kruimel-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--ks-zacht); }
.ks-seo-kruimel-item + .ks-seo-kruimel-item::before { content: "/"; margin: 0 8px; color: var(--ks-lijn-sterk); }
.ks-seo-kruimel-link { display: inline-block; padding: 4px 0; color: var(--ks-zacht); }
.ks-seo-kruimel-link:hover { color: var(--ks-inkt); }

/* Kop zonder foto: titel links, formulier rechts, bovenaan gelijk */
.ks-seo-kop-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: start; }
.ks-vk-titel, .ks-vpr-titel, .ks-vp-titel, .ks-vks-titel, .ks-pl-titel { margin-bottom: 12px; max-width: 20ch; font-weight: 600; }
.ks-vk-lead, .ks-vpr-lead, .ks-vp-lead, .ks-vks-lead, .ks-pl-lead { margin-bottom: 0; }
@media (max-width: 900px) {
  .ks-seo-kop-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Kop met foto: grote foto van het vak, titel en formulier op een kaart
   erover (links onder). Op smal staat de kaart onder de foto. Geen sluier. */
.ks-seo-held { padding: 16px 0 8px; }
.ks-seo-held-beeld { position: relative; }
.ks-seo-held-foto { position: relative; margin: 0; overflow: hidden; aspect-ratio: 21 / 9; border-radius: var(--ks-rond-foto); background: var(--ks-foto); }
.ks-seo-held-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--ks-seo-held-y, 40%); }
/* Uitsnede per foto (kern/fotokader.php, ks_foto_kader): hoe hoog de foto in
   de brede kop staat, zodat hoofd en werk in beeld blijven. */
.ks-seo-held-y0 { --ks-seo-held-y: 0%; }
.ks-seo-held-y5 { --ks-seo-held-y: 5%; }
.ks-seo-held-y10 { --ks-seo-held-y: 10%; }
.ks-seo-held-y15 { --ks-seo-held-y: 15%; }
.ks-seo-held-y20 { --ks-seo-held-y: 20%; }
.ks-seo-held-y25 { --ks-seo-held-y: 25%; }
.ks-seo-held-y30 { --ks-seo-held-y: 30%; }
.ks-seo-held-y35 { --ks-seo-held-y: 35%; }
.ks-seo-held-y40 { --ks-seo-held-y: 40%; }
.ks-seo-held-y45 { --ks-seo-held-y: 45%; }
.ks-seo-held-y50 { --ks-seo-held-y: 50%; }
.ks-seo-held-y55 { --ks-seo-held-y: 55%; }
.ks-seo-held-y60 { --ks-seo-held-y: 60%; }
.ks-seo-held-y65 { --ks-seo-held-y: 65%; }
.ks-seo-held-y70 { --ks-seo-held-y: 70%; }
.ks-seo-held-y75 { --ks-seo-held-y: 75%; }
.ks-seo-held-y80 { --ks-seo-held-y: 80%; }
.ks-seo-held-y85 { --ks-seo-held-y: 85%; }
.ks-seo-held-y90 { --ks-seo-held-y: 90%; }
.ks-seo-held-y95 { --ks-seo-held-y: 95%; }
.ks-seo-held-y100 { --ks-seo-held-y: 100%; }
.ks-seo-held-kaart { position: absolute; left: 32px; bottom: 32px; width: min(520px, calc(100% - 64px)); padding: 28px 28px 24px; background: var(--ks-paneel); color: var(--ks-inkt); border-radius: var(--ks-rond-foto); }
/* Staat het werk links op de foto, dan de kaart rechts. */
.ks-seo-held-rechts .ks-seo-held-kaart { left: auto; right: 32px; }
.ks-seo-held-kaart .ks-site-lead { font-size: 1.02rem; line-height: 1.5; color: var(--ks-zacht); }
.ks-seo-held-kaart .ks-seo-vorm-plat { margin-top: 20px; padding: 0; }
@media (max-width: 1100px) {
  .ks-seo-held-foto { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  .ks-seo-held-foto { aspect-ratio: 16 / 10; }
  .ks-seo-held-kaart { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 16px 0; padding: 22px 20px 20px; }
  .ks-seo-held-rechts .ks-seo-held-kaart { right: auto; }
}
@media (max-width: 480px) {
  .ks-seo-held { padding-top: 8px; }
  .ks-seo-held-foto { aspect-ratio: 4 / 3; }
  .ks-seo-held-kaart { margin: -40px 10px 0; }
}

/* Formulier klus plaatsen */
.ks-seo-vorm { padding: 22px; }
.ks-seo-vorm-rij { display: flex; align-items: flex-end; gap: 12px; }
.ks-seo-vorm-veld { flex: 1 1 160px; min-width: 0; }
.ks-seo-vorm-knop { flex: 0 0 auto; }
.ks-seo-vorm-noot { margin-bottom: 0; }
@media (max-width: 480px) {
  .ks-seo-vorm { padding: 18px; }
  .ks-seo-vorm-rij { flex-direction: column; align-items: stretch; }
  .ks-seo-vorm-veld { flex-basis: auto; }
}

/* Sectiekoppen */
.ks-vk-sectiekop, .ks-vpr-sectiekop, .ks-vp-sectiekop, .ks-pl-sectiekop { margin-bottom: 20px; }
.ks-vk-subkop, .ks-vp-subkop { font-size: 1.05rem; margin: 24px 0 12px; }
.ks-vp-linkblok > .ks-vp-subkop { margin-top: 0; }
.ks-vk-alinea, .ks-vp-alinea { line-height: 1.65; }

/* Drie stappen: vlak, met een icoon, zoals de stappen op /hoe-het-werkt/ */
.ks-seo-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.ks-seo-stap { border-top: 1px solid var(--ks-lijn); padding-top: 18px; }
.ks-seo-stap-kop { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.ks-seo-stap-icoon { flex: none; width: 22px; height: 22px; color: var(--ks-merk); }
.ks-seo-stap-tekst { margin: 0; color: var(--ks-zacht); }
@media (max-width: 760px) {
  .ks-seo-stappen { grid-template-columns: minmax(0, 1fr); }
}

/* Twee blokken met plaatsdata, even hoog */
.ks-vp-regio-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ks-vp-blok { padding: 22px; height: 100%; }
.ks-vp-blokkop { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; margin-bottom: 14px; }
.ks-vp-blokicoon { width: 22px; height: 22px; color: var(--ks-zacht); flex: 0 0 auto; }
.ks-vp-getal { font-size: 2rem; font-weight: 600; line-height: 1; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.ks-vp-bloktekst { margin-bottom: 8px; }
.ks-vp-bron { margin: 0; }
@media (max-width: 760px) {
  .ks-vp-regio-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Prijzen */
.ks-seo-prijzen-bedrag { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-seo-prijzen-noot { margin-top: 10px; }

/* Vragen */
.ks-seo-vragen { border-top: 1px solid var(--ks-lijn); }
.ks-seo-vraag { border-bottom: 1px solid var(--ks-lijn); }
.ks-seo-vraag-kop { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ks-seo-vraag-kop::-webkit-details-marker { display: none; }
.ks-seo-vraag-kop::after { content: "+"; color: var(--ks-zacht); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.ks-seo-vraag[open] > .ks-seo-vraag-kop::after { content: "\2212"; }
.ks-seo-vraag-tekst { margin: 0 0 16px; color: var(--ks-zacht); line-height: 1.6; }

/* Lijsten met links in kolommen */
.ks-seo-links { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: 32px; }
.ks-seo-links-item { break-inside: avoid; padding: 5px 0; }
.ks-seo-links-a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ks-inkt); }
.ks-seo-links-a:hover { color: var(--ks-inkt); text-decoration-color: var(--ks-inkt); text-decoration-thickness: 2px; }
.ks-vp-links-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.ks-vp-links-raster .ks-seo-links { columns: 1; }
.ks-vp-kleine { margin: 0; line-height: 1.6; }
.ks-vpr-noot { margin: 20px 0 0; }

/* Kosten per vak (ks-vks-) */
.ks-vks-sectiekop { margin-bottom: 20px; }
.ks-vks-subkop { font-size: 1.05rem; margin: 28px 0 10px; }
.ks-vks-factoren { margin: 0 0 20px; padding-left: 1.2em; }
.ks-vks-factor { padding: 3px 0; }
.ks-vks-alinea { line-height: 1.65; }

/* Andere vakken op de vakpagina: één rij, Alle vakken erachter */
.ks-seo-links.ks-vk-vaklijst { columns: auto; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ks-vk-vaklijst .ks-seo-links-item { padding: 0; }

/* Alle vakken (ks-vkn-): eerst fototegels met icoon en naam op een label in
   de foto, daarna de vakken zonder foto als compacte regel. Eén lijst. */
.ks-vkn-titel { margin-bottom: 12px; font-weight: 600; }
.ks-vkn-lead { margin-bottom: 0; max-width: 62ch; }
.ks-vkn-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.ks-vkn-item { min-width: 0; }
.ks-vkn-item-regel { align-self: start; }
.ks-vkn-fotokaart { display: flex; flex-direction: column; gap: 10px; color: var(--ks-inkt); text-decoration: none; }
.ks-vkn-fotokaart:hover { color: var(--ks-inkt); text-decoration: none; }
.ks-vkn-foto { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ks-rond-foto); background: var(--ks-foto); }
.ks-vkn-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-vkn-label { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; background: var(--ks-paneel); color: var(--ks-inkt); border-radius: 10px; font-weight: 600; line-height: 1.25; }
.ks-vkn-labelicoon { flex: none; width: 18px; height: 18px; color: var(--ks-merk); }
.ks-vkn-labelnaam { min-width: 0; overflow-wrap: anywhere; }
.ks-vkn-fotokaart:hover .ks-vkn-labelnaam { text-decoration: underline; text-decoration-thickness: 2px; }
.ks-vkn-regel { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--ks-lijn); color: var(--ks-inkt); text-decoration: none; }
.ks-vkn-regel:hover { color: var(--ks-inkt); text-decoration: none; }
.ks-vkn-regel:hover .ks-vkn-naam { text-decoration: underline; text-decoration-thickness: 2px; }
.ks-vkn-icoon { width: 22px; height: 22px; color: var(--ks-merk); flex: 0 0 auto; margin-top: 1px; }
.ks-vkn-regeltekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ks-vkn-naam { font-weight: 600; }
.ks-vkn-kort { color: var(--ks-zacht); font-size: .94rem; line-height: 1.45; }
@media (max-width: 1000px) {
  .ks-vkn-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 600px) {
  .ks-vkn-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ks-vkn-item-foto { margin-bottom: 24px; }
  .ks-vkn-foto { aspect-ratio: 16 / 10; }
}

/* Blok voor vakmensen onder aan een vakpagina */
.ks-seo-vakman-rij { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-top: 1px solid var(--ks-lijn); }
.ks-seo-vakman-icoon { flex: none; width: 24px; height: 24px; color: var(--ks-merk); }
.ks-seo-vakman-tekst { flex: 1 1 auto; min-width: 0; }
.ks-seo-vakman-kop { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.ks-seo-vakman-p { margin: 0; color: var(--ks-zacht); max-width: 62ch; }
.ks-seo-vakman-knop { flex: none; }
@media (max-width: 760px) {
  .ks-seo-vakman-rij { flex-wrap: wrap; align-items: flex-start; }
  .ks-seo-vakman-tekst { flex-basis: calc(100% - 44px); }
  .ks-seo-vakman-knop { margin-left: 44px; }
}

/* Kaart van Nederland (ks-nlk-, kern/kaart.php): zee als zacht blauw vlak,
   provincies licht blauw met een lijn in de kleur van de pagina ertussen,
   stippen in KlusSure-blauw voor plaatsen met een pagina. Kleuren gemengd uit
   de variabelen van basis.css, zodat licht en donker vanzelf kloppen.
   kaart.js voegt een naamkaartje toe bij aanwijzen. */
.ks-nlk {
  --ks-nlk-zee: color-mix(in srgb, var(--ks-merk) 4%, var(--ks-achter));
  --ks-nlk-land: color-mix(in srgb, var(--ks-merk) 15%, var(--ks-kaart));
  --ks-nlk-land-hover: color-mix(in srgb, var(--ks-merk) 30%, var(--ks-kaart));
  position: relative; margin: 0; padding: 12px; background: var(--ks-nlk-zee); border: 1px solid var(--ks-lijn); border-radius: var(--ks-rond-foto); overflow: hidden;
}
.ks-nlk-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ks-nlk-provs { stroke: var(--ks-achter); stroke-linejoin: round; }
.ks-nlk-prov { fill: var(--ks-nlk-land); transition: fill .15s ease-out; }
.ks-nlk-prov-rest { fill: var(--ks-vlak-sterk); }
.ks-nlk-prov-actief { fill: var(--ks-nlk-land-hover); }
.ks-nlk-link { cursor: pointer; }
.ks-nlk-link:hover .ks-nlk-prov, .ks-nlk-link:focus-visible .ks-nlk-prov, .ks-nlk-prov-licht { fill: var(--ks-nlk-land-hover); }
.ks-nlk-link:focus-visible { outline: none; }
.ks-nlk-link:focus-visible .ks-nlk-prov { stroke: var(--ks-inkt); }
.ks-nlk-straal { fill: var(--ks-merk); fill-opacity: .08; stroke: var(--ks-merk); stroke-opacity: .55; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.ks-nlk-stip { fill: var(--ks-merk); stroke: var(--ks-achter); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transition: transform .15s ease-out, opacity .15s ease-out; }
.ks-nlk-stip-hier { fill: var(--ks-inkt); stroke-width: 2; }
.ks-nlk-link:hover .ks-nlk-stip, .ks-nlk-link:focus-visible .ks-nlk-stip { fill: var(--ks-inkt); transform: scale(1.7); }
.ks-nlk-stip-gevonden { transform: scale(1.8); }
.ks-nlk-stip-gedimd { opacity: .2; }
.ks-nlk-namen { pointer-events: none; }
.ks-nlk-provnaam { fill: var(--ks-zacht); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .78em; paint-order: stroke; stroke: var(--ks-nlk-land); stroke-width: 3px; stroke-linejoin: round; }
.ks-nlk-plaatsnaam { fill: var(--ks-inkt); font-weight: 600; paint-order: stroke; stroke: var(--ks-nlk-land); stroke-linejoin: round; }
.ks-nlk-plaatsnaam-hier { font-size: 1.15em; }
.ks-nlk-tip { position: absolute; z-index: 2; left: 0; top: 0; padding: 5px 10px; border-radius: var(--ks-rond); background: var(--ks-inkt); color: var(--ks-achter); font-size: .85rem; font-weight: 600; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); box-shadow: var(--ks-schaduw-zacht); }
.ks-nlk-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ks-nlk-stip, .ks-nlk-prov { transition: none; } }

/* /plaatsen/ (site/nl/plaatsen.php): kop met zoeken links en de grote kaart
   rechts, daaronder per provincie een kaart met de plaatsen. */
.ks-pl-held { padding: 16px 0 48px; }
.ks-pl-held-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 56px; align-items: start; }
.ks-pl-held .ks-pl-titel { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.02em; max-width: 14ch; }
.ks-pl-held .ks-pl-lead { max-width: 46ch; }
.ks-pl-zoek { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 6px 6px 6px 48px; background: var(--ks-paneel); border: 1px solid var(--ks-rand); border-radius: 999px; box-shadow: var(--ks-schaduw-zoek); max-width: 520px; }
.ks-pl-zoek:focus-within { border-color: var(--ks-inkt); }
.ks-pl-zoek-icoon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; color: var(--ks-zacht); }
.ks-pl-zoekveld { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ks-inkt); font: inherit; font-size: 1.05rem; padding: 10px 0; outline: none; }
.ks-pl-zoekveld::-webkit-search-cancel-button { cursor: pointer; }
.ks-pl-zoekknop { border-radius: 999px; flex: none; }
.ks-pl-zoekmelding { margin: 12px 0 0; min-height: 1.4em; color: var(--ks-zacht); font-size: .92rem; max-width: 520px; }
.ks-pl-zoekmelding:empty { margin: 0; min-height: 0; }
.ks-pl-feiten { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--ks-zacht); font-size: .95rem; }
.ks-pl-feit { display: flex; align-items: center; gap: 8px; }
.ks-pl-feit-icoon { width: 18px; height: 18px; color: var(--ks-merk); }
.ks-pl-held-kaart { max-width: 560px; width: 100%; justify-self: end; }
.ks-pl-kaartnoot { margin: 10px 0 0; text-align: center; }
.ks-pl-leeg { margin: 0; }
.ks-pl-provraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ks-pl-provkaart { padding: 20px 22px; scroll-margin-top: calc(var(--ks-kop-totaal, 64px) + 16px); transition: border-color .15s ease-out; }
.ks-pl-provkaart:target, .ks-pl-provkaart-licht { border-color: var(--ks-merk); }
.ks-pl-provkaart[hidden] { display: none; }
.ks-pl-provkop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1.05rem; margin: 0 0 10px; }
.ks-pl-provtal { color: var(--ks-zacht); font-size: .85rem; font-weight: 500; }
.ks-seo-links.ks-pl-plaatslijst { columns: 2 120px; column-gap: 20px; }
.ks-pl-plaatslijst .ks-seo-links-item { padding: 3px 0; }
.ks-pl-plaatslijst .ks-seo-links-item[hidden] { display: none; }
.ks-pl-burenraster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 48px; align-items: center; }
.ks-pl-cirkelnoot { margin: -8px 0 16px; }
.ks-pl-burenraster .ks-seo-links { columns: 2 160px; }

/* Kaart op de vakpagina en per provincie */
.ks-vk-kaartraster, .ks-vpr-kaartraster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 48px; align-items: start; }
.ks-vk-kaartlijsten > .ks-vk-subkop:first-child { margin-top: 0; }
.ks-vk-kaartlijsten .ks-seo-links, .ks-vpr-kaartlijst .ks-seo-links { columns: 2 180px; }
.ks-vpr-kaartraster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

/* Kaart op de pagina vak per plaats: naast de twee blokken */
.ks-vp-regio-met-kaart { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); }
.ks-vp-kaart { padding: 0; }
.ks-vp-kaart .ks-nlk-svg { height: 100%; }

@media (max-width: 1000px) {
  .ks-vp-regio-met-kaart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-vp-regio-met-kaart .ks-vp-kaart { grid-column: 1 / -1; }
  .ks-vp-kaart .ks-nlk-svg { aspect-ratio: 5 / 4; height: auto; }
}
@media (max-width: 900px) {
  .ks-pl-held-raster, .ks-pl-burenraster, .ks-vk-kaartraster, .ks-vpr-kaartraster { grid-template-columns: minmax(0, 1fr); }
  .ks-pl-held-kaart { justify-self: center; max-width: 440px; }
  .ks-pl-provraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-vk-kaart { max-width: 360px; }
}
@media (max-width: 760px) {
  .ks-vp-regio-met-kaart { grid-template-columns: minmax(0, 1fr); }
  .ks-pl-provraster { grid-template-columns: minmax(0, 1fr); }
}

/* Subsidie bij een vak (ks_vak_subsidie_html, kern/vakken.php). */
.ks-vk-sub { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--ks-lijn); border-radius: 14px; background: var(--ks-vlak); }
.ks-vk-sub-kop { margin: 0 0 6px; font-weight: 600; }
.ks-vk-sub-tekst { margin: 0; }
.ks-vk-sub-bron { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ks-zacht); font-size: 14px; }

/* Gecontroleerde bedrijven bij een plaats (ks-bb-, kern/spiegel.php): kaarten
   naast elkaar, even hoog, logo links. Alleen vanaf drie bedrijven. */
.ks-bb-kop { margin-bottom: 8px; }
.ks-bb-lead { margin: 0 0 20px; max-width: 62ch; }
.ks-bb-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ks-bb-item { display: flex; }
.ks-bb-kaart { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 18px; color: var(--ks-inkt); text-decoration: none; transition: border-color .15s ease-out; }
.ks-bb-kaart:hover, .ks-bb-kaart:focus-visible { border-color: var(--ks-inkt); text-decoration: none; }
.ks-bb-logo { flex: none; width: 56px; height: 56px; display: flex; }
.ks-bb-logo img, .ks-bb-logo > * { width: 56px; height: 56px; border-radius: var(--ks-rond); }
.ks-bb-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ks-bb-naam { font-weight: 600; overflow-wrap: anywhere; }
.ks-bb-onder { color: var(--ks-zacht); font-size: .9rem; }
.ks-bb-score { font-size: .9rem; color: var(--ks-zacht); }
.ks-bb-vink { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ks-groen); }
.ks-bb-vink svg { width: 16px; height: 16px; }
/* Stukje uit de nieuwste review onder een bedrijf (ks_spiegel_laatste_review). */
.ks-bb-citaat { margin-top: 4px; font-size: .9rem; color: var(--ks-inkt); quotes: "\201C" "\201D"; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ks-bb-citaat::before { content: open-quote; }
.ks-bb-citaat::after { content: close-quote; }
@media (max-width: 900px) { .ks-bb-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ks-bb-lijst { grid-template-columns: minmax(0, 1fr); } }

/* Reviews van klanten bij een plaats (ks-prv-, kern/spiegel.php): alleen
   echte reviews van klanten met een afspraak. Kaarten even hoog. */
.ks-prv-kop { margin-bottom: 8px; }
.ks-prv-lead { margin: 0 0 20px; max-width: 62ch; }
.ks-prv-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ks-prv-item { display: flex; }
.ks-prv-kaart { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 0; padding: 18px; }
.ks-prv-tekst { margin: 0; flex: 1; }
.ks-prv-tekst p { margin: 0; overflow-wrap: anywhere; }
.ks-prv-onder { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .9rem; }
.ks-prv-bedrijf { font-weight: 600; color: var(--ks-inkt); }
.ks-prv-wanneer { color: var(--ks-zacht); }
@media (max-width: 700px) { .ks-prv-lijst { grid-template-columns: minmax(0, 1fr); } }

/* Prijsindicatie op een vak-plaatspagina (ks-vp-prijs). */
.ks-vp-prijs-lead { margin: -8px 0 16px; }
.ks-vp-prijs-meer { margin: 12px 0 0; }

/* Echte bv's en nv's die niet bij KlusSure staan (ks-vml-, kern/vermeldingen.php):
   rustiger dan de gecontroleerde bedrijven, altijd met het label Niet aangemeld. */
.ks-vml-kop { margin-bottom: 8px; }
.ks-vml-lead { margin: 0 0 20px; max-width: 62ch; }
.ks-vml-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ks-vml-item { display: flex; }
.ks-vml-kaart { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 16px; color: var(--ks-inkt); text-decoration: none; transition: border-color .15s ease-out; }
.ks-vml-kaart:hover, .ks-vml-kaart:focus-visible { border-color: var(--ks-inkt); text-decoration: none; }
.ks-vml-naam { font-weight: 600; overflow-wrap: anywhere; }
.ks-vml-onder { color: var(--ks-zacht); font-size: .9rem; }
.ks-vml-label { margin-top: 4px; font-size: .85rem; }
.ks-vml-noot { margin: 14px 0 0; }
@media (max-width: 900px) { .ks-vml-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ks-vml-lijst { grid-template-columns: minmax(0, 1fr); } }