/* KlusSure, ontwerpvariant "vet" (06-11-2026).
   Grote, zware koppen met strakke letterafstand, veel ruimte en opvallende
   knoppen: rechthoekig met een ronde hoek, vet en ruim. Voorbeeld was de
   stijl van Reshark, maar in de KlusSure-huisstijl: één accent (--ks-merk),
   kleuren alleen via de variabelen uit basis.css, dus de donkere modus gaat
   vanzelf mee. Alles staat onder html[data-ks-stijl="vet"] (thema.js zet
   dat), zodat het huidige ontwerp ongemoeid blijft. Laadt alleen waar
   ks_stijl_kiesbaar() waar is (beta, demo, lokaal). */

/* Plus Jakarta Sans (SIL Open Font License, zie fonts/OFL-plus-jakarta-sans.txt),
   variabel van 200 tot 800, alleen het Latijnse deel. */
@font-face {
  font-family: "KS Jakarta";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

html[data-ks-stijl="vet"] {
  --ks-font: "KS Jakarta", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ks-vet-kop: -.035em;
  --ks-vet-knop-rond: 12px;
}

/* Koppen: zwaar, strak, weinig regelafstand. */
html[data-ks-stijl="vet"] h1, html[data-ks-stijl="vet"] h2, html[data-ks-stijl="vet"] h3,
html[data-ks-stijl="vet"] .ks-h1, html[data-ks-stijl="vet"] .ks-h2 {
  font-weight: 800; letter-spacing: var(--ks-vet-kop);
}
html[data-ks-stijl="vet"] .ks-h1 { font-size: clamp(34px, 2.4vw + 20px, 52px); line-height: 1.04; }
html[data-ks-stijl="vet"] .ks-h2 { font-size: clamp(24px, 1.2vw + 18px, 34px); line-height: 1.1; }
html[data-ks-stijl="vet"] .ks-site-held-h1 { font-size: clamp(38px, 3.4vw + 20px, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -.04em; }
html[data-ks-stijl="vet"] .ks-home-h2 { margin-bottom: 28px; font-size: clamp(30px, 2.2vw + 18px, 48px); line-height: 1.04; font-weight: 800; letter-spacing: var(--ks-vet-kop); }
html[data-ks-stijl="vet"] .ks-home-h2 .ks-icoon { display: none; }

/* Knoppen: geen pil maar een blok met een ronde hoek, vet en ruim. De
   hoofdknop blijft KlusSure-blauw; de tweede knop krijgt een dikke lijn
   in de inktkleur. */
html[data-ks-stijl="vet"] .ks-knop {
  min-height: 54px; padding: 0 26px; border-width: 2px; border-radius: var(--ks-vet-knop-rond);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  transition: transform .15s var(--ks-veer), background-color .15s ease, border-color .15s ease;
}
html[data-ks-stijl="vet"] .ks-knop:hover { transform: translateY(-2px); }
html[data-ks-stijl="vet"] .ks-knop:active { transform: translateY(0) scale(.98); }
html[data-ks-stijl="vet"] .ks-knop-klein { min-height: 46px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
html[data-ks-stijl="vet"] .ks-knop-groot { min-height: 62px; padding: 0 32px; font-size: 17px; }
html[data-ks-stijl="vet"] .ks-knop-tweede { border-color: var(--ks-inkt); }
html[data-ks-stijl="vet"] .ks-knop-tweede:hover { background: var(--ks-inkt); color: var(--ks-achter); border-color: var(--ks-inkt); }
html[data-ks-stijl="vet"] .ks-knop[disabled]:hover, html[data-ks-stijl="vet"] .ks-knop[aria-disabled="true"]:hover { transform: none; }

/* Kopbalk: "Klus plaatsen" wordt de opvallende hoofdknop, net als de knop
   rechtsboven in het voorbeeld. */
html[data-ks-stijl="vet"] .ks-site-kop-plaats { background: var(--ks-merk); color: var(--ks-op-merk); border-color: var(--ks-merk); }
html[data-ks-stijl="vet"] .ks-site-kop-plaats:hover { background: var(--ks-merk-hover); color: var(--ks-op-merk); border-color: var(--ks-merk-hover); }

/* Voorpagina, kop over de volle breedte: links uitgelijnd, een veel grotere
   kop en ruimte eromheen. */
html[data-ks-stijl="vet"] .ks-home-vol { padding: 80px 0 120px; }
html[data-ks-stijl="vet"] .ks-home-vol-inhoud { text-align: left; }
html[data-ks-stijl="vet"] .ks-home-vol-boven { margin-bottom: 18px; font-size: 17px; font-weight: 600; letter-spacing: 0; }
html[data-ks-stijl="vet"] .ks-home-vol-h1 {
  max-width: 13ch; font-size: clamp(46px, 7.4vw, 104px); line-height: .98; font-weight: 800; letter-spacing: -.045em;
  text-wrap: balance;
}
html[data-ks-stijl="vet"] .ks-home-vol-wissel { justify-items: start; }
html[data-ks-stijl="vet"] .ks-home-vol-tekst { max-width: 34em; margin: 26px 0 0; font-size: 20px; line-height: 1.5; }
html[data-ks-stijl="vet"] .ks-home-vol .ks-home-vol-start { margin-top: 40px; }

/* Zoekbalk: geen pil maar een blok, met de knop "Verder" als opvallende
   blokknop. */
html[data-ks-stijl="vet"] .ks-home-zoek { max-width: 920px; margin: 0; border-radius: 20px; --ks-home-zoek-hoog: 60px; }
html[data-ks-stijl="vet"] .ks-home-zoek-deel { border-radius: 12px; }
html[data-ks-stijl="vet"] .ks-home-zoek-label { font-weight: 700; }
html[data-ks-stijl="vet"] .ks-home-zoek-knop { padding: 0 28px 0 22px; border-radius: var(--ks-vet-knop-rond); font-size: 17px; font-weight: 800; }
html[data-ks-stijl="vet"] .ks-home-zoek-knop:hover { transform: none; }
html[data-ks-stijl="vet"].ks-home-spot-aan .ks-home-zoek { border-radius: 20px; }

/* Het vaklabel linksonder op de foto: blok in plaats van pil. */
html[data-ks-stijl="vet"] .ks-home-vol-label { border-radius: 10px; font-weight: 700; }

/* Vaktegels: de naam op de foto vetter. */

@media (max-width: 743px) {
  html[data-ks-stijl="vet"] .ks-home-vol { padding: 48px 0 100px; }
  html[data-ks-stijl="vet"] .ks-home-vol-h1 { font-size: clamp(42px, 12.5vw, 60px); line-height: 1; }
  html[data-ks-stijl="vet"] .ks-home-vol-tekst { margin-top: 18px; font-size: 17px; }
  html[data-ks-stijl="vet"] .ks-home-vol .ks-home-vol-start { margin-top: 30px; }
  html[data-ks-stijl="vet"] .ks-home-zoekknop { min-height: 62px; border-radius: 14px; }
  html[data-ks-stijl="vet"] .ks-home-zoekknop b { font-weight: 700; }
  html[data-ks-stijl="vet"] .ks-home-zoek { border-radius: 18px; }
  html[data-ks-stijl="vet"] .ks-home-zoek-knop { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ks-stijl="vet"] .ks-knop, html[data-ks-stijl="vet"] .ks-knop:hover, html[data-ks-stijl="vet"] .ks-knop:active { transition: none; transform: none; }
}

/* Slotband boven de voet (ks_stijl_slotband): grote kop, twee knoppen en
   een korte regel eronder. Alleen in deze variant zichtbaar. */
.ks-vet-slot { display: none; }
html[data-ks-stijl="vet"] .ks-vet-slot { display: block; background: var(--ks-vlak); border-top: 1px solid var(--ks-lijn); }
.ks-vet-slot-binnen { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.ks-vet-slot-kop { max-width: 14ch; margin: 0; font-size: clamp(40px, 5.6vw, 84px); line-height: .98; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.ks-vet-slot-tekst { max-width: 36em; margin: 24px 0 0; font-size: 19px; line-height: 1.5; color: var(--ks-zacht); }
.ks-vet-slot-knoppen { margin-top: 36px; }
.ks-vet-slot-noot { margin: 16px 0 0; font-size: 14px; color: var(--ks-zacht); }

@media (max-width: 743px) {
  .ks-vet-slot-tekst { font-size: 17px; }
  .ks-vet-slot-knoppen .ks-knop { flex: 1 1 100%; }
}

/* Balk om te wisselen tussen de ontwerpen (ks_stijl_balk). Smal en rustig;
   de gekozen variant staat vet en onderstreept. */
.ks-stijl-balk { background: var(--ks-vlak-sterk); color: var(--ks-inkt); font-size: 13px; border-bottom: 1px solid var(--ks-lijn); }
.ks-stijl-balk-rij { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; min-height: 36px; }
.ks-stijl-balk-tekst { color: var(--ks-zacht); }
.ks-stijl-keuze { display: inline-flex; align-items: center; min-height: 36px; color: var(--ks-inkt); text-decoration: none; }
.ks-stijl-keuze:hover { text-decoration: underline; text-underline-offset: 3px; }
html:not([data-ks-stijl="vet"]) .ks-stijl-keuze-huidig,
html[data-ks-stijl="vet"] .ks-stijl-keuze-vet { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
@media print { .ks-stijl-balk { display: none; } }