/* klusin.nl · de stijl van de website.
   Kleuren en maten komen uit klusin-app/merk/tokens.js en het merkboek v2.0.
   Wit is de grond, navy is de inkt, amber is de actie. Eén amber per scherm.
   Alles hangt onder .kl, zodat een WordPress-thema er niet tussen komt. */

@font-face{font-family:"Geist";src:url(fonts/Geist-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/Geist-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/Geist-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/Geist-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --kl-papier:#FFFFFF; --kl-vlak:#F4F6FA; --kl-lijn:#DCE1E9; --kl-lijn-hard:#C3CAD6;
  --kl-inkt:#0B1220; --kl-inkt-zacht:#1E2A44; --kl-gedempt:#5A6479; --kl-flauw:#8E96A6;
  --kl-amber:#FBBF24; --kl-amber-diep:#8A5A00; --kl-amber-tint:#FEF3D3;
  --kl-blauw:#1D5FD6; --kl-blauw-tint:#E8F3FF; --kl-groen:#137A4C; --kl-groen-tint:#E4F6ED;
  --kl-koraal:#C0392B; --kl-koraal-tint:#FDEBE6;
  --kl-op-navy:#C9D1DF; --kl-op-navy-zacht:#8E96A6; --kl-navy-lijn:#1E2A44;
  --kl-r:9px; --kl-r-groot:16px; --kl-breed:1180px; --kl-kop:68px; --kl-goot:16px;
  --kl-schaduw:0 1px 2px rgba(11,18,32,.05),0 18px 40px -18px rgba(11,18,32,.22);
  --kl-letter:"Geist",ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
}

/* ------------------------------------------------------------------ basis */
.kl,.kl *,.kl *::before,.kl *::after{box-sizing:border-box}
html.kl-html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kl-kop) + 16px)}
body.kl{margin:0;background:var(--kl-papier);color:var(--kl-inkt);font-family:var(--kl-letter);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.kl h1,.kl h2,.kl h3,.kl h4,.kl p,.kl ul,.kl ol,.kl figure,.kl blockquote,.kl dl,.kl dd{margin:0}
.kl ul,.kl ol{padding:0;list-style:none}
.kl a{color:inherit}
.kl img,.kl svg{display:block;max-width:100%}
.kl button{font:inherit;color:inherit}
.kl .cijfers,.kl time,.kl .kl-bedrag{font-variant-numeric:tabular-nums}
.kl :focus-visible{outline:3px solid var(--kl-blauw);outline-offset:3px;border-radius:4px}
.kl .kl-verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kl-overslaan{position:absolute;left:16px;top:-60px;z-index:100;background:var(--kl-papier);color:var(--kl-inkt);
  padding:12px 16px;border-radius:var(--kl-r);font-weight:600;text-decoration:none}
.kl-overslaan:focus{top:12px}

.kl-binnen{width:100%;max-width:var(--kl-breed);margin:0 auto;padding:0 var(--kl-goot)}
@media (min-width:760px){:root{--kl-goot:32px}}

/* ------------------------------------------------------------------ letters */
.kl-label{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--kl-gedempt)}
.kl-h1{font-size:clamp(40px,7.2vw,78px);line-height:1.02;letter-spacing:-.038em;font-weight:600;text-wrap:balance}
.kl-h1--kleiner{font-size:clamp(36px,5.6vw,60px)}
.kl-h2{font-size:clamp(30px,4.4vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.kl-h3{font-size:21px;line-height:1.25;letter-spacing:-.015em;font-weight:600}
.kl-lead{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--kl-inkt-zacht);max-width:40em;text-wrap:pretty}
.kl-tekst{color:var(--kl-inkt-zacht);text-wrap:pretty}
.kl-klein{font-size:14px;color:var(--kl-gedempt)}
.kl-kop-groep{display:grid;gap:14px;max-width:46em}
.kl-kop-groep--midden{margin:0 auto;text-align:center;justify-items:center}

/* ------------------------------------------------------------------ knoppen */
.kl-knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;
  border-radius:var(--kl-r);font-weight:600;font-size:17px;line-height:1.1;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease;text-align:center}
.kl-knop:active{transform:translateY(1px)}
.kl-knop--hoofd{background:var(--kl-amber);color:var(--kl-inkt)}
.kl a.kl-knop--hoofd{color:var(--kl-inkt)}
.kl-knop--hoofd:hover{background:#F5B40F}
.kl-knop--lijn{background:var(--kl-papier);color:var(--kl-inkt);border-color:var(--kl-lijn-hard)}
.kl-knop--lijn:hover{border-color:var(--kl-inkt)}
.kl-knop--op-navy{background:transparent;color:var(--kl-papier);border-color:rgba(255,255,255,.34)}
.kl-knop--op-navy:hover{border-color:var(--kl-papier)}
.kl-knop--klein{min-height:44px;padding:0 16px;font-size:15px}
.kl-knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.kl-pijllink{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:48px}
.kl-pijllink svg{width:18px;height:18px;transition:transform .15s ease}
.kl-pijllink:hover svg{transform:translateX(3px)}
.kl-pijllink:hover span{text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------------ de kop */
.kl-kop{position:sticky;top:0;z-index:50;background:var(--kl-inkt);color:var(--kl-papier)}
.admin-bar .kl-kop{top:32px}
@media (max-width:782px){.admin-bar .kl-kop{top:46px}}
@media (max-width:600px){.admin-bar .kl-kop{top:0}}
.kl-kop__binnen{display:flex;align-items:center;gap:20px;min-height:var(--kl-kop)}
.kl-logo{display:flex;align-items:center;min-height:48px;text-decoration:none;flex:none}
.kl-logo svg{height:23px;width:auto}
.kl-logo .kl-moer{transform-box:fill-box;transform-origin:center;will-change:transform}
.kl-nav{display:none;margin-left:auto}
.kl-nav ul{display:flex;gap:2px}
.kl-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--kl-op-navy);text-decoration:none;
  font-size:15px;font-weight:500;border-radius:8px}
.kl-nav a:hover{color:var(--kl-papier)}
.kl-nav a[aria-current="page"],.kl-nav a.is-hier{color:var(--kl-papier);box-shadow:inset 0 -2px 0 var(--kl-papier);border-radius:0}
.kl-kop__rechts{display:flex;align-items:center;gap:6px;margin-left:auto}
.kl-kop__inlog{display:none;align-items:center;min-height:48px;padding:0 10px;color:var(--kl-op-navy);text-decoration:none;font-size:15px;font-weight:500}
.kl-kop__inlog:hover{color:var(--kl-papier)}
.kl-menuknop{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:0;
  color:var(--kl-papier);cursor:pointer;border-radius:8px}
.kl-menuknop svg{width:24px;height:24px}
.kl-menuknop .dicht{display:none}
.kl-menuknop[aria-expanded="true"] .open{display:none}
.kl-menuknop[aria-expanded="true"] .dicht{display:block}
.kl-kop__knop{display:none}
@media (min-width:1040px){
  .kl-nav{display:block}
  .kl-kop__rechts{margin-left:8px}
  .kl-menuknop{display:none}
  .kl-kop__inlog{display:inline-flex}
  .kl-kop__knop{display:inline-flex}
}
/* Het menu op de telefoon: een eigen vel onder de kop, dat het scherm vult en zelf scrolt.
   De pagina erachter staat stil zolang het open is. */
.kl-mobiel{position:absolute;left:0;right:0;top:100%;height:calc(100vh - var(--kl-kop));height:calc(100dvh - var(--kl-kop));
  overflow-y:auto;overscroll-behavior:contain;background:var(--kl-inkt);border-top:1px solid var(--kl-navy-lijn);
  animation:kl-mobiel-in .2s ease-out}
.admin-bar .kl-mobiel{height:calc(100dvh - var(--kl-kop) - 46px)}
.kl-mobiel[hidden]{display:none}
@keyframes kl-mobiel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.kl-menu-open,html.kl-menu-open body{overflow:hidden}
.kl-mobiel__binnen{display:flex;flex-direction:column;min-height:100%;padding-top:8px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.kl-mobiel__lijst a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;
  color:var(--kl-papier);text-decoration:none;font-size:22px;font-weight:600;letter-spacing:-.015em;
  border-bottom:1px solid var(--kl-navy-lijn)}
.kl-mobiel__lijst svg{width:20px;height:20px;flex:none;color:var(--kl-op-navy-zacht);transition:transform .15s ease}
.kl-mobiel__lijst a:active svg{transform:translateX(3px)}
.kl-mobiel__lijst span{display:inline-flex;align-items:center;gap:10px}
.kl-mobiel__lijst a[aria-current="page"] span::after,.kl-mobiel__lijst a.is-hier span::after{content:"";width:7px;height:7px;
  border-radius:50%;background:var(--kl-papier)}
.kl .kl-mobiel__label{margin:32px 0 12px;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--kl-op-navy-zacht)}
.kl-mobiel__chips{display:flex;flex-wrap:wrap;gap:8px}
.kl-mobiel__chips a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;color:var(--kl-papier);text-decoration:none;font-size:15px;font-weight:500}
.kl-mobiel__chips a[aria-current="page"]{background:var(--kl-papier);color:var(--kl-inkt);border-color:var(--kl-papier)}
.kl-mobiel__onder{display:grid;gap:12px;margin-top:auto;padding-top:32px}
.kl-mobiel__onder .kl-knop{width:100%}
.kl-mobiel__klein{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:4px}
.kl-mobiel__klein a{display:inline-flex;align-items:center;min-height:44px;color:var(--kl-op-navy);text-decoration:none;font-size:15px}
.kl-mobiel__klein a:hover{color:var(--kl-papier)}
@media (prefers-reduced-motion:reduce){.kl-mobiel{animation:none}}
@media (min-width:1040px){.kl-mobiel{display:none!important}}

/* ------------------------------------------------------------------ blokken */
.kl-blok{padding:72px 0}
.kl-blok--vlak{background:var(--kl-vlak)}
.kl-blok--krap{padding:48px 0}
@media (min-width:760px){.kl-blok{padding:112px 0}.kl-blok--krap{padding:64px 0}}
.kl-blok + .kl-blok:not(.kl-blok--vlak):not(.kl-na-scheur){padding-top:0}

/* De afgescheurde rand: het papier van het ene blok scheurt af boven het volgende. De tanden zijn
   21 px breed en 8,4 px diep, uit BON in tokens.js. Omlaag aan de uiteinden, omhoog ertussen. */
.kl-scheur{position:relative;height:9px;margin:0;background:var(--kl-naar,var(--kl-vlak))}
.kl-scheur::before{content:"";position:absolute;inset:0;background:var(--kl-van,var(--kl-papier));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 0H21V9L10.5 0L0 9Z'/%3E%3C/svg%3E") 0 0/21px 9px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 0H21V9L10.5 0L0 9Z'/%3E%3C/svg%3E") 0 0/21px 9px repeat-x}
.kl-scheur--naar-wit{--kl-van:var(--kl-vlak);--kl-naar:var(--kl-papier)}
.kl-scheur--naar-navy{--kl-van:var(--kl-papier);--kl-naar:var(--kl-inkt)}
.kl-scheur--vlak-naar-navy{--kl-van:var(--kl-vlak);--kl-naar:var(--kl-inkt)}

/* ------------------------------------------------------------------ de held */
.kl-held{padding:48px 0 72px;position:relative}
.kl-held__grid{display:grid;gap:48px;align-items:center}
.kl-held__tekst{display:grid;gap:22px;align-content:start}
.kl-held__noot{font-size:15px;color:var(--kl-gedempt);max-width:34em}
.kl-held__beeld{position:relative;display:flex;justify-content:center;min-height:520px}
.kl-held--pagina{padding:56px 0 64px}
.kl-held--pagina .kl-held__tekst{max-width:50em}
.kl-kruimel{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--kl-gedempt)}
.kl-kruimel a{color:var(--kl-gedempt);text-decoration:none}
.kl-kruimel a:hover{color:var(--kl-inkt);text-decoration:underline}
@media (min-width:960px){
  .kl-held{padding:72px 0 104px}
  .kl-held__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px}
  .kl-held--pagina{padding:88px 0 80px}
}
.kl-held__zwevend{position:absolute;z-index:2;width:min(270px,70%)}
.kl-held__zwevend--links{left:0;bottom:36px}
.kl-held__zwevend--rechts{right:0;top:40px}
@media (min-width:1200px){.kl-held__zwevend--rechts{right:-36px;top:18px}.kl-held__zwevend--links{left:-24px;bottom:28px}}
@media (max-width:559px){.kl-held__zwevend{display:none}}

/* ------------------------------------------------------------------ vakken-strook */
.kl-strook{display:flex;flex-wrap:wrap;gap:8px}
.kl-strook a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--kl-lijn);border-radius:999px;
  text-decoration:none;font-weight:500;font-size:15px;background:var(--kl-papier);transition:border-color .15s ease}
.kl-strook a:hover{border-color:var(--kl-inkt)}

/* ------------------------------------------------------------------ kaarten en tegels */
.kl-raster{display:grid;gap:14px}
@media (min-width:700px){.kl-raster--2{grid-template-columns:repeat(2,1fr)}.kl-raster--3{grid-template-columns:repeat(2,1fr)}.kl-raster--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kl-raster--3{grid-template-columns:repeat(3,1fr)}.kl-raster--4{grid-template-columns:repeat(4,1fr)}}
.kl-kaart{background:var(--kl-papier);border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);padding:24px;display:grid;gap:8px;align-content:start}
.kl-blok--vlak .kl-kaart{border-color:transparent;box-shadow:0 1px 2px rgba(11,18,32,.04)}
.kl-kaart__icoon{width:44px;height:44px;border-radius:12px;background:var(--kl-vlak);display:grid;place-items:center;margin-bottom:8px}
.kl-blok--vlak .kl-kaart__icoon{background:var(--kl-vlak)}
.kl-kaart__icoon svg{width:24px;height:24px}
.kl-kaart p{color:var(--kl-inkt-zacht)}
.kl-tegel{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--kl-papier);border:1px solid var(--kl-lijn);
  border-radius:var(--kl-r-groot);overflow:hidden;text-decoration:none;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.kl-tegel:hover{border-color:var(--kl-inkt);transform:translateY(-2px);box-shadow:var(--kl-schaduw)}
.kl-tegel__beeld{background:var(--kl-vlak);height:200px;overflow:hidden;position:relative;border-bottom:1px solid var(--kl-lijn)}
.kl-tegel__beeld .kl-mini{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:236px;display:flex;justify-content:center}
.kl-tegel__tekst{padding:20px 22px 22px;display:grid;gap:6px;align-content:start}
.kl-tegel__tekst p{color:var(--kl-inkt-zacht);font-size:16px}
.kl-tegel__nr{font-size:13px;font-weight:600;color:var(--kl-gedempt);letter-spacing:.05em}
.kl-tegel__pijl{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;font-size:15px}
.kl-tegel__pijl svg{width:16px;height:16px}

/* ------------------------------------------------------------------ probleem: de lekken */
.kl-lekken{display:grid;gap:12px;margin-top:40px}
@media (min-width:760px){.kl-lekken{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.kl-lekken{grid-template-columns:repeat(4,1fr)}}
.kl-lek{background:var(--kl-papier);border-radius:var(--kl-r-groot);padding:22px;display:grid;gap:6px;align-content:start}
.kl-lek b{font-size:18px;font-weight:600}
.kl-lek span{color:var(--kl-inkt-zacht);font-size:16px}
.kl-lek__nr{font-size:13px;font-weight:600;color:var(--kl-gedempt)}

/* ------------------------------------------------------------------ statuspil */
.kl-pil{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;font-size:12px;font-weight:600;
  line-height:1;padding:5px 10px 5px 8px;white-space:nowrap;vertical-align:middle}
.kl-pil svg{width:10px;height:10px;flex:none;fill:currentColor}
.kl-pil--gepland{background:var(--kl-vlak);color:var(--kl-inkt-zacht);border-color:var(--kl-gedempt)}
.kl-pil--blauw{background:var(--kl-blauw-tint);color:var(--kl-blauw);border-color:var(--kl-blauw)}
.kl-pil--groen{background:var(--kl-groen-tint);color:var(--kl-groen);border-color:var(--kl-lijn)}
.kl-pil--navy{background:var(--kl-inkt);color:var(--kl-papier);border-color:var(--kl-inkt)}
.kl-pil--open{background:var(--kl-amber-tint);color:var(--kl-amber-diep);border-color:#F0DFA8}
.kl-pil--koraal{background:var(--kl-koraal-tint);color:var(--kl-koraal);border-color:var(--kl-koraal)}
.kl-pil--grijs{background:var(--kl-vlak);color:var(--kl-gedempt);border-color:var(--kl-lijn)}

/* ------------------------------------------------------------------ de bon */
.kl-bon{width:100%;filter:drop-shadow(0 12px 20px rgba(11,18,32,.10)) drop-shadow(0 1px 1px rgba(11,18,32,.06))}
.kl-bon + .kl-voorbeeld{margin-top:10px}
.kl-bon__vel{background:var(--kl-papier);border-radius:16px 16px 0 0;padding:22px 22px 18px}
.kl-bon__rand{height:9px;background:var(--kl-papier)}
.kl-bon__kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--kl-lijn)}
.kl-bon__kop > div > b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.kl-bon__kop > div > span{display:block;font-size:13px;color:var(--kl-gedempt)}
.kl-bon__kop > .kl-pil,.kl-bon__kop > .kl-wissel{flex:none}
.kl-bon__nr{font-size:12px;font-weight:600;color:var(--kl-gedempt);letter-spacing:.05em;text-align:right;white-space:nowrap}
.kl-bonrij{padding:12px 0;border-bottom:1px solid var(--kl-lijn)}
.kl-bonrij:last-child{border-bottom:0}
.kl-bonrij__kop{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.kl-bonrij__kop .kl-label{font-size:11px}
.kl-bonrij__inhoud{margin-top:6px;font-size:14px;color:var(--kl-inkt-zacht);display:grid;gap:4px}
.kl-bonrij__inhoud blockquote{border-left:2px solid var(--kl-inkt);padding-left:10px;color:var(--kl-inkt);font-size:15px}
.kl-bonrij__meta{font-size:12px;color:var(--kl-gedempt)}
.kl-bonregel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.kl-bonregel .kl-bedrag,.kl-regel .kl-bedrag{white-space:nowrap;flex:none}
.kl-bonregel > .kl-pil{flex:none}
.kl-bonregel b{font-weight:600}
.kl-bonregel--totaal{border-top:1px solid var(--kl-lijn);padding-top:6px;margin-top:2px;font-weight:600;color:var(--kl-inkt)}
.kl-bon__handtekening{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--kl-gedempt)}
.kl-bon__handtekening svg{width:88px;height:28px;color:var(--kl-inkt)}
.kl-bon--klein .kl-bon__vel{padding:16px 16px 14px}
.kl-bon--klein .kl-bon__kop b{font-size:15px}

/* ------------------------------------------------------------------ de bon die zichzelf invult
   De basis is de volle bon met de vijf stappen ernaast: zo ziet wie geen javascript heeft of minder
   beweging wil het. Met javascript wordt het een podium dat blijft staan terwijl je scrollt. */
.kl-bonscroll{position:relative}
.kl-bonscroll__podium{display:grid;gap:24px;padding:16px 0}
.kl-bonscroll__bonplek{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:0}
.kl-bonscroll__bon{width:min(420px,100%);transform-origin:top center}
.kl-bonscroll__stappen{position:relative;display:grid;gap:8px}
.kl-bonstap{background:var(--kl-papier);border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);padding:16px 18px;display:grid;gap:4px}
.kl-bonstap__nr{font-size:12px;font-weight:600;color:var(--kl-gedempt);letter-spacing:.06em}
.kl-bonstap > b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.kl-bonstap p{font-size:15px;color:var(--kl-inkt-zacht)}
.kl-bonscroll__voortgang{display:none;gap:6px;margin-top:10px}
.kl-bonscroll__voortgang i{flex:1;height:3px;border-radius:3px;background:var(--kl-lijn)}
.kl-bonscroll__voortgang i.is-aan{background:var(--kl-inkt)}
.kl-bonscroll__kop{padding-top:8px}
@media (min-width:960px){
  .kl-bonscroll__podium{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:64px}
}

.kl-bonscroll.is-levend{height:270vh}
.kl-bonscroll.is-levend .kl-bonscroll__podium{position:sticky;top:var(--kl-kop);height:calc(100vh - var(--kl-kop));height:calc(100svh - var(--kl-kop));
  grid-template-rows:auto minmax(0,1fr);gap:14px;padding:14px 0 16px;overflow:hidden}
.kl-bonscroll.is-levend .kl-bonscroll__stappen{display:grid;min-height:0}
.kl-bonscroll.is-levend .kl-bonstap{grid-area:1/1;position:relative;inset:auto;opacity:0;pointer-events:none;
  transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.kl-bonscroll.is-levend .kl-bonstap.is-aan{pointer-events:auto}
.kl-bonscroll.is-levend .kl-bonstap.is-aan{opacity:1;transform:none}
.kl-bonscroll.is-levend .kl-bonscroll__voortgang{display:flex}
.kl-bonscroll.is-levend .kl-bonrij[data-stap]{display:none}
.kl-bonscroll.is-levend .kl-bonrij[data-stap].is-zichtbaar{display:block;animation:kl-rij .45s ease both}
.kl-bonscroll.is-levend .kl-bonrij.is-dicht .kl-bonrij__inhoud{display:none}
@keyframes kl-rij{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:960px){
  .kl-bonscroll.is-levend{height:340vh}
  .kl-bonscroll.is-levend .kl-bonscroll__podium{grid-template-rows:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:64px;padding:24px 0}
  .kl-bonscroll.is-levend .kl-bonscroll__stappen{display:grid;gap:8px;min-height:0;grid-auto-rows:auto}
  .kl-bonscroll.is-levend .kl-bonstap{grid-area:auto;position:relative;inset:auto;opacity:.38;pointer-events:auto;transform:none;border-color:transparent;background:transparent;padding:14px 18px;
    transition:opacity .3s ease,background-color .3s ease,border-color .3s ease}
  .kl-bonscroll.is-levend .kl-bonstap.is-aan{opacity:1;background:var(--kl-papier);border-color:var(--kl-lijn);box-shadow:0 1px 2px rgba(11,18,32,.04)}
  .kl-bonscroll.is-levend .kl-bonstap.is-voorbij{opacity:.62}
  .kl-bonscroll.is-levend .kl-bonscroll__voortgang{display:none}
  .kl-bonscroll.is-levend .kl-bonscroll__bonplek{align-items:center;height:100%}
  .kl-bonscroll.is-levend .kl-bonrij.is-dicht .kl-bonrij__inhoud{display:grid}
}

/* ------------------------------------------------------------------ de vak-kiezer */
.kl-vakkiezer{display:grid;gap:22px}
.kl-chips{display:flex;flex-wrap:wrap;gap:8px}
.kl-chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--kl-lijn-hard);
  background:var(--kl-papier);font-weight:500;font-size:15px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.kl-chip:hover{border-color:var(--kl-inkt)}
.kl-chip[aria-checked="true"]{background:var(--kl-inkt);border-color:var(--kl-inkt);color:var(--kl-papier)}
.kl-chip[aria-checked="true"]::before{content:"";width:8px;height:8px;background:var(--kl-papier);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.kl-vakkaart{display:grid;gap:14px;background:var(--kl-papier);border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);padding:22px;transition:opacity .2s ease}
.kl-vakkaart.is-wissel{opacity:.35}
.kl-vakkaart__kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--kl-lijn)}
.kl-vakkaart__kop > div > b{font-size:19px;font-weight:600;letter-spacing:-.01em;display:block}
.kl-vakkaart__kop > div > span{font-size:14px;color:var(--kl-gedempt);display:block}
.kl-vakkaart__kop > .kl-pil,.kl-vakkaart__kop > .kl-kenteken{flex:none}
.kl-vakkaart__delen{display:grid;gap:18px}
@media (min-width:760px){.kl-vakkaart__delen{grid-template-columns:1fr 1fr}.kl-vakkiezer--groot .kl-vakkaart{padding:28px}}
.kl-vakdeel{display:grid;gap:8px;align-content:start}
.kl-vakdeel ul{display:grid;gap:0}
.kl-regel{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--kl-lijn);font-size:15px}
.kl-regel:last-child{border-bottom:0}
.kl-regel small{display:block;color:var(--kl-gedempt);font-size:13px}
.kl-vakdeel ul.kl-lijstje,.kl-lijstje{display:flex;flex-wrap:wrap;gap:6px}
.kl-lijstje li{border:1px solid var(--kl-lijn);border-radius:8px;padding:4px 10px;font-size:14px;background:var(--kl-vlak)}
.kl-vakkaart__voet{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;font-size:13px;color:var(--kl-gedempt);border-top:1px solid var(--kl-lijn);padding-top:12px}
.kl-kenteken{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;border:1.5px solid var(--kl-inkt);border-radius:5px;padding:2px 7px;letter-spacing:.04em;background:var(--kl-papier)}

/* ------------------------------------------------------------------ de dag */
.kl-dag{display:grid;gap:24px}
.kl-schakel{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--kl-lijn-hard);border-radius:12px;padding:4px;background:var(--kl-papier);justify-self:start}
.kl-schakel button{min-height:48px;padding:0 18px;border:0;border-radius:9px;background:none;font-weight:600;font-size:15px;cursor:pointer;color:var(--kl-inkt-zacht)}
.kl-schakel button[aria-pressed="true"]{background:var(--kl-inkt);color:var(--kl-papier)}
.kl-dag__lijn{display:grid;gap:10px;position:relative}
.kl-dag__rij{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:stretch}
.kl-dag__tijd{font-size:14px;font-weight:600;color:var(--kl-gedempt);padding-top:14px}
.kl-dag__blok{border-radius:12px;padding:14px 16px;background:var(--kl-papier);border:1px solid var(--kl-lijn);display:grid;gap:3px;position:relative;overflow:hidden}
.kl-dag__blok b{font-size:16px;font-weight:600}
.kl-dag__blok span{font-size:15px;color:var(--kl-inkt-zacht)}
.kl-dag__blok[data-soort="avond"]{background:var(--kl-inkt);border-color:var(--kl-inkt)}
.kl-dag__blok[data-soort="avond"] b{color:var(--kl-papier)}
.kl-dag__blok[data-soort="avond"] span{color:var(--kl-op-navy)}
.kl-dag__blok[data-soort="vrij"]{background:repeating-linear-gradient(135deg,var(--kl-papier) 0 10px,var(--kl-vlak) 10px 20px);border-style:dashed;border-color:var(--kl-lijn-hard)}
.kl-dag [data-met]{display:none}
.kl-dag.is-met [data-met]{display:grid}
.kl-dag.is-met [data-zonder]{display:none}
.kl-dag__blok{animation:kl-rij .35s ease both}

/* ------------------------------------------------------------------ meescrollen met een telefoon
   Zonder javascript staat bij elk stuk tekst zijn eigen telefoon. Met javascript blijft op een
   groot scherm één telefoon staan en wisselt het scherm erin mee met de tekst. */
.kl-mee{display:grid;gap:48px}
.kl-mee__telplek{display:none}
.kl-mee__stuk{display:grid;gap:14px;align-content:center}
.kl-mee__stuk .kl-tel{margin-top:10px}
.kl-mee__nr{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--kl-inkt);color:var(--kl-papier);font-weight:600;font-size:15px}
.kl-mee__stuk .kl-pijllink{justify-self:start}
@media (min-width:960px){
  .kl-mee{gap:72px}
  .kl-mee__stuk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:center;align-content:start}
  .kl-mee__stuk > :not(.kl-tel){grid-column:1}
  .kl-mee__stuk > .kl-tel{grid-column:2;grid-row:1 / span 5;margin-top:0}
  .kl-mee.is-levend{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
  .kl-mee.is-levend .kl-mee__stuk{grid-template-columns:none;min-height:72vh;padding:40px 0;opacity:.35;transition:opacity .35s ease;align-content:center}
  .kl-mee.is-levend .kl-mee__stuk > *{grid-column:auto}
  .kl-mee.is-levend .kl-mee__stuk.is-aan{opacity:1}
  .kl-mee.is-levend .kl-mee__stuk > .kl-tel{display:none}
  .kl-mee.is-levend .kl-mee__telplek{display:flex;justify-content:center;position:sticky;top:calc(var(--kl-kop) + 5vh);height:calc(90vh - var(--kl-kop));align-items:center}
  .kl-mee__telplek .kl-tel{max-height:100%}
}

/* ------------------------------------------------------------------ de telefoon */
.kl-tel{--b:300px;width:var(--b);max-width:100%;aspect-ratio:300/620;background:#0B1220;border-radius:46px;padding:10px;
  box-shadow:0 0 0 1px #1E2A44 inset,0 30px 60px -24px rgba(11,18,32,.45),0 10px 20px -10px rgba(11,18,32,.25);position:relative;flex:none;margin:0 auto;isolation:isolate}
.kl-tel__scherm{position:relative;height:100%;border-radius:37px;overflow:hidden;background:var(--kl-papier)}
.kl-tel__balk{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 26px;
  font-size:12px;font-weight:600;z-index:3;background:linear-gradient(var(--kl-papier) 70%,rgba(255,255,255,0))}
.kl-tel__balk::after{content:"";position:absolute;left:50%;top:9px;width:84px;height:22px;border-radius:12px;background:#0B1220;transform:translateX(-50%)}
.kl-tel__balk i{display:flex;gap:4px;align-items:center}
.kl-tel__balk i::before{content:"";width:16px;height:9px;border:1.5px solid currentColor;border-radius:3px}
.kl-tel__laag{position:absolute;inset:0;padding-top:34px;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;overflow:hidden}
.kl-tel__laag.is-aan{opacity:1;visibility:visible}
/* Een kleine telefoon is dezelfde telefoon, kleiner getekend: de schermen blijven op 300 px opgebouwd. */
.kl-tel--klein{zoom:.787}

/* ------------------------------------------------------------------ de app, nagebouwd (schermen) */
.a{font-size:12px;line-height:1.4;color:var(--kl-inkt);height:100%;display:flex;flex-direction:column;background:var(--kl-papier)}
.a *{font-variant-numeric:tabular-nums}
.a :where(svg){width:14px;height:14px;flex:none}
.a-rij > :last-child:not(div){flex:none;white-space:nowrap}
.a-kop{padding:10px 16px 12px;display:grid;gap:2px}
.a-kop--terug{grid-template-columns:18px 1fr;column-gap:8px;align-items:start;border-bottom:1px solid var(--kl-lijn)}
.a-kop--terug svg{width:16px;height:16px;margin-top:3px}
.a-kop b{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.a-kop--groot b{font-size:19px}
.a-kop span{font-size:11px;color:var(--kl-gedempt)}
.a-label{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--kl-gedempt);padding:12px 16px 6px}
.a-rij{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 16px;border-top:1px solid var(--kl-lijn)}
.a-rij > div{min-width:0}
.a-rij b{font-weight:600;font-size:12.5px;display:block}
.a-rij small{display:block;font-size:10.5px;color:var(--kl-gedempt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a .kl-pil{font-size:9.5px;padding:3px 7px 3px 6px;gap:4px}
.a .kl-pil svg{width:8px;height:8px}
.a-open{font-weight:600;font-size:11px;display:flex;align-items:center;gap:2px;white-space:nowrap}
.a-open svg{width:12px;height:12px}
.a-knop{margin:10px 16px;min-height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:12.5px;border:1px solid var(--kl-lijn-hard);background:var(--kl-papier)}
.a-knop svg{width:14px;height:14px}
.a-knop--amber{background:var(--kl-amber);border-color:var(--kl-amber)}
.a-knop--groen{background:var(--kl-groen-tint);border-color:var(--kl-groen);color:var(--kl-groen)}
.a-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 2px}
.a-knoppen .a-knop{margin:0;min-height:32px;font-size:11.5px}
.a-melding{margin:6px 12px;padding:10px 12px;border:1px solid var(--kl-inkt);border-radius:8px;display:grid;gap:3px;font-size:11px}
.a-melding b{font-size:12px}
.a-melding--koraal{border-color:var(--kl-koraal);background:var(--kl-koraal-tint)}
.a-kaart{margin:6px 12px;border:1px solid var(--kl-lijn);border-radius:9px;padding:10px 12px;display:grid;gap:4px}
.a-veld{margin:4px 16px;display:grid;gap:3px}
.a-veld label{font-size:10.5px;font-weight:600;color:var(--kl-inkt-zacht)}
.a-veld div{border:1px solid var(--kl-lijn-hard);border-radius:7px;min-height:32px;display:flex;align-items:center;padding:0 10px;font-size:12.5px}
.a-veld div.is-groot{font-size:16px;font-weight:600;letter-spacing:.06em;min-height:40px;border-color:var(--kl-inkt);border-width:1.5px}
.a-veld small{font-size:10px;color:var(--kl-gedempt)}
.a-veldrij{display:grid;grid-template-columns:1fr 1fr;gap:0}
.a-stapper{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--kl-lijn);padding:8px 6px 6px}
.a-stapper span{display:grid;justify-items:center;gap:3px;font-size:9px;color:var(--kl-gedempt)}
.a-stapper span i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--kl-lijn-hard);display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:600}
.a-stapper span.is-klaar i{background:var(--kl-groen);border-color:var(--kl-groen)}
.a-stapper span.is-klaar i::after{content:"";width:6px;height:3px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translate(1px,-1px)}
.a-stapper span.is-hier{color:var(--kl-inkt);font-weight:600}
.a-stapper span.is-hier i{background:var(--kl-inkt);border-color:var(--kl-inkt);color:#fff}
.a-sectie{padding:10px 16px;border-bottom:1px solid var(--kl-lijn);display:grid;gap:6px}
.a-sectie__kop{display:flex;justify-content:space-between;align-items:center;gap:6px}
.a-sectie__kop b{display:flex;align-items:center;gap:7px;font-size:13px}
.a-sectie__kop b i{width:17px;height:17px;border-radius:50%;background:var(--kl-inkt);color:#fff;font-style:normal;font-size:9.5px;display:grid;place-items:center}
.a-citaat{border-left:2px solid var(--kl-inkt);padding-left:8px;font-size:12px}
.a-bedrag{display:flex;justify-content:space-between;font-size:11.5px;padding:2px 0}
.a-bedrag--tot{font-weight:600;border-top:1px solid var(--kl-lijn);padding-top:5px;margin-top:2px}
.a-onder{margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--kl-lijn);padding:6px 4px 10px;background:var(--kl-papier)}
.a-onder span{display:grid;justify-items:center;gap:2px;font-size:8.5px;color:var(--kl-gedempt)}
.a-onder span svg{width:16px;height:16px}
.a-onder span.is-hier{color:var(--kl-inkt);font-weight:600}
.a-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.a-chips span{border:1px solid var(--kl-lijn);border-radius:6px;padding:1px 6px;font-size:9.5px;background:var(--kl-vlak)}
.a-blok{margin:0 10px 6px 44px;border-radius:8px;border:1px solid var(--kl-lijn);border-left:3px solid var(--kl-inkt);padding:7px 9px;display:grid;gap:2px;position:relative}
.a-blok b{font-size:11.5px}
.a-blok small{font-size:10px;color:var(--kl-gedempt)}
.a-blok--vrij{border:1px dashed var(--kl-lijn-hard);background:var(--kl-vlak)}
.a-blok--koraal{border-color:var(--kl-koraal);border-left-color:var(--kl-koraal)}
.a-blok__tijd{position:absolute;left:-36px;top:6px;font-size:9.5px;color:var(--kl-gedempt)}
.a-rit{margin:0 10px 6px 44px;font-size:10px;color:var(--kl-gedempt);display:flex;gap:5px;align-items:center}
.a-rit svg{width:13px;height:13px}
.a-qr{width:72px;height:72px;border:1px solid var(--kl-lijn);border-radius:6px;padding:5px;background:#fff}
.a-teken{height:54px;border:1px dashed var(--kl-lijn-hard);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--kl-inkt)}
.a-teken svg{width:120px;height:36px}
.a-balk{height:5px;border-radius:5px;background:var(--kl-lijn);overflow:hidden}
.a-balk i{display:block;height:100%;background:var(--kl-inkt)}
.a-vink{display:flex;gap:8px;align-items:center;padding:8px 16px;border-top:1px solid var(--kl-lijn);font-size:12px}
.a-vink i{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--kl-lijn-hard)}
.a-vink i.is-klaar{background:var(--kl-groen);border-color:var(--kl-groen)}
.a-vink i.is-klaar::after{content:"";width:6px;height:3px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translate(1px,-1px)}
.a-vink span{flex:1}
.a-vink small{color:var(--kl-gedempt);font-size:10px}

/* ------------------------------------------------------------------ keten, afspraken, niet */
.kl-keten{display:grid;gap:10px;counter-reset:stap}
@media (min-width:900px){.kl-keten{grid-template-columns:repeat(5,1fr)}}
.kl-keten li{counter-increment:stap;background:var(--kl-papier);border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);padding:20px;display:grid;gap:6px;align-content:start}
.kl-keten li::before{content:counter(stap);width:30px;height:30px;border-radius:50%;background:var(--kl-inkt);color:var(--kl-papier);
  font-weight:600;font-size:14px;display:grid;place-items:center;margin-bottom:6px}
.kl-keten b{font-size:18px;font-weight:600}
.kl-keten p{font-size:15px;color:var(--kl-inkt-zacht)}
.kl-afspraken{display:grid;gap:0;margin-top:40px}
@media (min-width:900px){.kl-afspraken{grid-template-columns:repeat(3,1fr);gap:40px}}
.kl-afspraak{padding:24px 0;border-top:2px solid var(--kl-inkt);display:grid;gap:10px;align-content:start}
.kl-afspraak__nr{font-size:13px;font-weight:600;color:var(--kl-gedempt)}
.kl-afspraak h3{font-size:24px;letter-spacing:-.02em}
.kl-afspraak p{color:var(--kl-inkt-zacht)}
.kl-welniet{display:grid;gap:14px;margin-top:36px}
@media (min-width:860px){.kl-welniet{grid-template-columns:1fr 1fr}}
.kl-welniet__kolom{background:var(--kl-papier);border-radius:var(--kl-r-groot);border:1px solid var(--kl-lijn);padding:24px;display:grid;gap:10px;align-content:start}
.kl-welniet__kolom li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--kl-lijn);color:var(--kl-inkt-zacht)}
.kl-welniet__kolom li:first-child{border-top:0}
.kl-welniet__kolom li svg{width:18px;height:18px;flex:none;margin-top:3px}

/* ------------------------------------------------------------------ zelf instellen / negen stappen */
.kl-negen{display:grid;gap:0;counter-reset:n;border-top:1px solid var(--kl-lijn)}
@media (min-width:860px){.kl-negen{grid-template-columns:1fr 1fr;column-gap:40px}.kl-duo .kl-negen{grid-template-columns:1fr}}
.kl-negen li{counter-increment:n;display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--kl-lijn)}
.kl-negen li::before{content:counter(n);grid-row:span 2;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--kl-inkt);display:grid;place-items:center;font-weight:600;font-size:14px}
.kl-negen b{font-weight:600}
.kl-negen span{color:var(--kl-gedempt);font-size:15px}

/* ------------------------------------------------------------------ vakpagina: jouw dag */
.kl-scenes{display:grid;gap:12px;margin-top:32px}
@media (min-width:860px){.kl-scenes{grid-template-columns:repeat(3,1fr)}}
.kl-scene{background:var(--kl-papier);border-radius:var(--kl-r-groot);padding:22px;display:grid;gap:8px;border:1px solid var(--kl-lijn);align-content:start}
.kl-blok--vlak .kl-scene{border-color:transparent}
.kl-scene time{font-size:28px;font-weight:600;letter-spacing:-.02em}
.kl-scene p{color:var(--kl-inkt-zacht)}

/* ------------------------------------------------------------------ twee kolommen met beeld */
.kl-duo{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.kl-duo{grid-template-columns:1fr 1fr;gap:72px}.kl-duo--om > :first-child{order:2}}

/* ------------------------------------------------------------------ vorige en volgende */
.kl-verder{display:grid;gap:12px}
@media (min-width:760px){.kl-verder{grid-template-columns:1fr 1fr}}
.kl-verder a{display:grid;gap:4px;padding:22px 24px;border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);text-decoration:none;transition:border-color .15s ease}
.kl-verder a:hover{border-color:var(--kl-inkt)}
.kl-verder a span{font-size:13px;font-weight:600;color:var(--kl-gedempt);letter-spacing:.05em;text-transform:uppercase}
.kl-verder a b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.kl-verder a.is-volgende{text-align:right}

/* ------------------------------------------------------------------ komt eraan */
.kl-straks{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px dashed var(--kl-lijn-hard);border-radius:var(--kl-r-groot);background:var(--kl-papier)}
.kl-straks b{display:block}
.kl-straks p{color:var(--kl-inkt-zacht);font-size:16px}
.kl-straks .kl-pil{flex:none;margin-top:2px}

/* ------------------------------------------------------------------ vragen */
.kl-vragen{display:grid;gap:0;border-top:1px solid var(--kl-lijn);max-width:860px}
.kl-vraag{border-bottom:1px solid var(--kl-lijn)}
.kl-vraag summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;
  font-size:18px;font-weight:600;letter-spacing:-.01em}
.kl-vraag summary::-webkit-details-marker{display:none}
.kl-vraag summary svg{width:20px;height:20px;flex:none;transition:transform .2s ease}
.kl-vraag[open] summary svg{transform:rotate(45deg)}
.kl-vraag__antwoord{padding:0 0 22px;color:var(--kl-inkt-zacht);max-width:44em;display:grid;gap:10px}

/* ------------------------------------------------------------------ prijs */
.kl-prijskaart{max-width:520px}
.kl-prijs{display:flex;align-items:baseline;gap:8px;margin:6px 0 4px}
.kl-prijs b{font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1}
.kl-vinklijst{display:grid;gap:0}
.kl-vinklijst li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--kl-lijn);color:var(--kl-inkt-zacht)}
.kl-vinklijst li:first-child{border-top:0}
.kl-vinklijst svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--kl-groen)}

/* ------------------------------------------------------------------ formulier */
.kl-contact{display:grid;gap:40px;align-items:start}
@media (min-width:960px){.kl-contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}}
.kl-form{display:grid;gap:16px}
.kl-form__rij{display:grid;gap:16px}
@media (min-width:640px){.kl-form__rij{grid-template-columns:1fr 1fr}}
.kl-veld{display:grid;gap:6px}
.kl-veld label{font-size:14px;font-weight:600;color:var(--kl-inkt-zacht)}
.kl-veld input,.kl-veld textarea,.kl-veld select{font:inherit;font-size:17px;color:var(--kl-inkt);background:var(--kl-papier);border:1px solid var(--kl-lijn-hard);
  border-radius:var(--kl-r);min-height:56px;padding:12px 14px;width:100%}
.kl-veld textarea{min-height:132px;resize:vertical}
.kl-veld input:focus,.kl-veld textarea:focus{outline:3px solid var(--kl-blauw);outline-offset:1px;border-color:var(--kl-inkt)}
.kl-veld small{font-size:13px;color:var(--kl-gedempt)}
.kl-veld.is-fout input,.kl-veld.is-fout textarea{border-color:var(--kl-koraal)}
.kl-veld__fout{font-size:14px;color:var(--kl-koraal);font-weight:500}
.kl-lokveld{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.kl-bericht{padding:18px 20px;border-radius:var(--kl-r-groot);display:grid;gap:4px}
.kl-bericht--goed{background:var(--kl-groen-tint);border:1px solid var(--kl-groen)}
.kl-bericht--fout{background:var(--kl-koraal-tint);border:1px solid var(--kl-koraal)}
.kl-daarna{display:grid;gap:0;counter-reset:d}
.kl-daarna li{counter-increment:d;display:grid;grid-template-columns:36px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--kl-lijn)}
.kl-daarna li::before{content:counter(d);width:28px;height:28px;border-radius:50%;background:var(--kl-inkt);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.kl-gegevens{display:grid;gap:6px;margin-top:8px}
.kl-gegevens a{font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.kl-gegevens a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ lopende tekst (privacy, voorwaarden) */
.kl-lopend{max-width:720px;display:grid;gap:16px;color:var(--kl-inkt-zacht)}
.kl-lopend h2{font-size:24px;letter-spacing:-.02em;color:var(--kl-inkt);margin-top:20px}
.kl-lopend ul{display:grid;gap:6px;padding-left:20px;list-style:disc}
.kl-concept{padding:14px 18px;border-radius:var(--kl-r);background:var(--kl-amber-tint);color:var(--kl-amber-diep);font-weight:600;font-size:15px}

/* ------------------------------------------------------------------ het slot */
.kl-slot{background:var(--kl-vlak);padding:72px 0 88px}
.kl-slot .kl-bon{max-width:640px;margin:0 auto}
.kl-slot .kl-bon__vel{padding:40px 28px 34px;text-align:center;display:grid;gap:16px;justify-items:center}
.kl-slot .kl-bon__vel .kl-lead{max-width:30em}
@media (min-width:760px){.kl-slot{padding:112px 0 128px}.kl-slot .kl-bon__vel{padding:56px 56px 44px}}
.kl-slot__noot{font-size:14px;color:var(--kl-gedempt)}

/* ------------------------------------------------------------------ voorbeeld-label */
.kl-voorbeeld{font-size:13px;color:var(--kl-gedempt)}

/* ------------------------------------------------------------------ de voet */
.kl-voet{background:var(--kl-inkt);color:var(--kl-op-navy);font-size:15px;padding:56px 0 28px}
.kl-voet__grid{display:grid;gap:36px}
@media (min-width:860px){.kl-voet__grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px}}
.kl-voet__merk{display:grid;gap:14px;align-content:start}
.kl-voet__merk svg{height:24px;width:auto}
.kl-voet h2{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--kl-op-navy-zacht);margin-bottom:6px}
.kl-voet ul{display:grid}
.kl-voet a{color:var(--kl-op-navy);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.kl-voet a:hover{color:var(--kl-papier);text-decoration:underline;text-underline-offset:4px}
.kl-voet__onder{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--kl-navy-lijn);font-size:14px;color:var(--kl-op-navy-zacht)}

/* ------------------------------------------------------------------ rustig verschijnen */
.kl-reveal .kl-in:not(.is-in){opacity:0;transform:translateY(12px)}
.kl-reveal .kl-in{transition:opacity .3s ease,transform .3s ease}

@media (prefers-reduced-motion:reduce){
  .kl *,.kl *::before,.kl *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{.kl-kop,.kl-voet,.kl-slot{display:none}}

/* Een pil die bij een eerdere stap hoort, is zonder javascript verborgen. */
.kl-wissel{display:inline-flex}
.kl-wissel[data-tot]{display:none}

/* ------------------------------------------------------------------ 1.1 · samenhang
   Wat erbij kwam toen de site één verhaal werd: het probleem met wat Klusin eraan doet, de zes
   stappen in één rij, de ingang naar de rondleiding, de strook tussen de onderdelen, en de vragen
   in groepen. */

/* Het probleem, en wat Klusin eraan doet */
.kl-lek{grid-template-rows:auto auto 1fr auto}
.kl-lek__met{display:grid;gap:4px;margin-top:14px;padding-top:14px;border-top:1px solid var(--kl-lijn)}
.kl .kl-lek__met span{color:var(--kl-inkt);font-size:15px}
.kl .kl-lek__met .kl-lek__met-label{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--kl-groen)}

/* De zes stappen in één rij, bovenaan Hoe het werkt */
.kl-stappenrij{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:36px 0 14px;counter-reset:none}
@media (min-width:760px){.kl-stappenrij{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.kl-stappenrij{grid-template-columns:repeat(6,1fr)}}
.kl-stappenrij li{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--kl-lijn);border-radius:var(--kl-r);font-size:15px;font-weight:600;line-height:1.25}
.kl-stappenrij li span{font-size:12px;font-weight:600;color:var(--kl-gedempt)}

/* Verder kijken: kleine kaarten naar de volgende laag */
.kl-routes{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:600px){.kl-routes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kl-routes{grid-template-columns:repeat(4,1fr)}}
.kl-route{position:relative;display:grid;gap:4px;min-height:88px;padding:18px 48px 18px 18px;border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);
  background:var(--kl-papier);color:var(--kl-inkt);text-decoration:none;transition:border-color .15s ease}
.kl-route:hover{border-color:var(--kl-inkt)}
.kl-route .kl-label{font-size:12px}
.kl-route b{font-size:17px;font-weight:600;line-height:1.25}
.kl-route__pijl{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--kl-gedempt)}
.kl-route__pijl svg{width:18px;height:18px;transition:transform .15s ease}
.kl-route:hover .kl-route__pijl svg{transform:translateX(3px)}

/* De strook met de acht onderdelen van de rondleiding */
.kl-strook--onderdelen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:32px;padding-bottom:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.kl-strook--onderdelen::-webkit-scrollbar{display:none}
.kl-strook--onderdelen a{flex:none;white-space:nowrap}
.kl-strook--onderdelen a[aria-current="page"]{background:var(--kl-inkt);border-color:var(--kl-inkt);color:var(--kl-papier)}
@media (min-width:1080px){.kl-strook--onderdelen{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}}

/* Vragen: naast de kop op de home, en in groepen op de vragenpagina */
@media (min-width:960px){.kl-duo--vragen{align-items:start;grid-template-columns:2fr 3fr}}
.kl-vraaggroepen{display:grid;gap:48px}
.kl-vraaggroep{display:grid;gap:14px}
.kl-vraaggroep .kl-h3{font-size:15px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--kl-gedempt)}

/* De rondleiding in het telefoonmenu: een laag dieper, onder Hoe het werkt */
.kl-mobiel__lijst li.is-sub a{min-height:52px;padding-left:18px;font-size:18px;font-weight:500;color:var(--kl-op-navy)}
.kl-mobiel__lijst li.is-sub a[aria-current="page"],.kl-mobiel__lijst li.is-sub a.is-hier{color:var(--kl-papier)}

/* Koppen in de voet zijn nu ook links. Ze mogen klein lijken, maar moeten raakbaar blijven. */
.kl-voet h2{margin-bottom:0;display:flex;align-items:center;min-height:44px}
.kl-voet h2 a{color:inherit;display:inline-flex;align-items:center;min-height:44px}

/* ------------------------------------------------------------------ 1.2 · eerst de zin
   Wat erbij kwam toen de site ging uitleggen in plaats van tonen: het bijschrift onder een
   scherm, het werk rondom de klus in drie fasen, wat de klant ervan merkt, en hoe je begint. */

/* Het bijschrift: de zin die zegt wat je op het scherm ernaast ziet */
.kl .kl-bijschrift{font-size:15px;line-height:1.5;color:var(--kl-gedempt);max-width:46em;
  padding-left:14px;border-left:2px solid var(--kl-lijn);text-wrap:pretty}

/* Onder de kop: het bijschrift bij de telefoon en de strook met de vakken */
.kl-held__onder{display:grid;gap:20px;justify-items:start;margin-top:32px}
.kl-held__onder .kl-strook{width:100%}
.kl-held__vaklabel{align-self:end}
@media (min-width:960px){
  .kl-held__onder{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px 64px;align-items:end;margin-top:12px}
  .kl-held__onder .kl-bijschrift{grid-column:2;grid-row:1}
  .kl-held__vaklabel{grid-column:1;grid-row:1}
  .kl-held__onder .kl-strook{grid-column:1/-1}
}

/* Het werk rondom je klus, in de drie fasen van een klus */
.kl-fasen{display:grid;gap:12px;margin-top:40px}
@media (min-width:820px){.kl-fasen{grid-template-columns:repeat(3,1fr);gap:14px}}
.kl-fase{display:flex;flex-direction:column;gap:16px;padding:26px 24px 20px;background:var(--kl-papier);
  border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot)}
.kl-fase > ul{display:grid;gap:16px}
.kl-fase li{display:grid;gap:3px;padding-left:20px;position:relative}
.kl-fase li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--kl-amber-tint);border:1px solid var(--kl-amber)}
.kl-fase li b{font-size:17px;font-weight:600;line-height:1.3}
.kl-fase li span{font-size:15px;line-height:1.45;color:var(--kl-inkt-zacht);text-wrap:pretty}
.kl-fase__link{margin-top:auto;padding-top:4px;border-top:1px solid var(--kl-lijn)}
.kl-fase__link .kl-pijllink{font-size:15px;min-height:44px}

/* Een kaart die naar een pagina leidt */
.kl-kaart--link{text-decoration:none;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.kl-kaart--link{display:flex;flex-direction:column;align-items:flex-start}
.kl-kaart--link .kl-h3{margin-bottom:8px}
.kl-kaart--link > .kl-tegel__pijl{margin-top:auto;padding-top:14px}
.kl-kaart--link:hover{border-color:var(--kl-inkt);transform:translateY(-2px);box-shadow:var(--kl-schaduw)}
.kl-blok--vlak .kl-kaart--link:hover{border-color:var(--kl-lijn-hard)}
.kl-kaart--link .kl-tegel__pijl{margin-top:12px}
.kl-kaart--link:hover .kl-tegel__pijl svg{transform:translateX(3px)}
.kl-kaart--link .kl-tegel__pijl svg{transition:transform .15s ease}

/* Zo begin je: drie stappen, genummerd */
.kl-beginnen{display:grid;gap:12px;counter-reset:none}
@media (min-width:820px){.kl-beginnen{grid-template-columns:repeat(3,1fr);gap:14px}}
.kl-beginnen li{display:grid;align-content:start;gap:6px;padding:26px 24px;border:1px solid var(--kl-lijn);
  border-radius:var(--kl-r-groot);background:var(--kl-papier)}
.kl-beginnen__nr{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--kl-amber-diep)}
.kl-beginnen li b{font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.kl-beginnen li span:not(.kl-beginnen__nr){color:var(--kl-inkt-zacht);font-size:16px;text-wrap:pretty}

/* Wat de klant ervan merkt, bij elke stap van het verhaal */
.kl .kl-merkt{font-size:16px;line-height:1.5;color:var(--kl-inkt-zacht);background:var(--kl-vlak);
  border-radius:var(--kl-r);padding:12px 16px;max-width:38em;text-wrap:pretty}
.kl-blok--vlak .kl-merkt{background:var(--kl-papier)}
.kl .kl-merkt b{color:var(--kl-inkt);font-weight:600}

/* Eén onderdeel op Wat er in Klusin zit: de zin links, het scherm rechts dat het bewijst */
.kl-onderdelen{display:grid;gap:56px;margin-top:40px}
@media (min-width:860px){.kl-onderdelen{gap:72px}}
.kl-onderdeel{display:grid;gap:28px;align-items:center;scroll-margin-top:calc(var(--kl-kop) + 24px)}
@media (min-width:860px){
  .kl-onderdeel{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
  .kl-onderdeel--om .kl-onderdeel__tekst{order:2}
}
.kl-onderdeel__tekst{display:grid;gap:14px;align-content:start}
.kl-onderdeel__beeld{display:grid;gap:16px;justify-items:center}
.kl-onderdeel__beeld .kl-bijschrift{justify-self:stretch}
.kl-punten{display:grid;gap:12px;margin-top:4px}
.kl-punten li{display:grid;gap:2px}
.kl-punten li b{font-size:17px;font-weight:600;line-height:1.3}
.kl-punten li div{display:grid;gap:8px}
.kl-punten li p{font-size:16px;color:var(--kl-inkt-zacht);line-height:1.5}

/* De sprongstrook bovenaan die pagina */
.kl-strook--onderdelen a .cijfers{color:var(--kl-gedempt);font-size:13px;font-weight:600}
.kl-strook--onderdelen a[aria-current="true"]{background:var(--kl-inkt);border-color:var(--kl-inkt);color:var(--kl-papier)}
.kl-strook--onderdelen a[aria-current="true"] .cijfers{color:var(--kl-amber)}

/* ------------------------------------------------------------------ 2.1 · hiërarchie
   Eén ding is de hoofdzaak: de klus. Dat blok heeft als enige een eigen ondergrond, grotere
   letters en meer lucht. Alle andere blokken zijn tekst op wit, in één smalle kolom.
   Er is nog één kleurwisseling op de hele pagina: de klus in, en de klus uit. */

/* De kop: rustiger. Geen zwevende bonnetjes, geen tweede knop, geen keuze. */
.kl-held--rustig{padding:44px 0 56px}
@media (min-width:960px){.kl-held--rustig{padding:72px 0 80px}}
.kl-held--rustig .kl-held__tekst{gap:18px}
.kl-held--rustig .kl-held__beeld{min-height:0}
.kl-held__voor{font-size:16px;color:var(--kl-gedempt)}
.kl-held__onder{display:grid;gap:18px;justify-items:start;margin-top:26px}
@media (min-width:960px){
  .kl-held__onder{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px 64px;align-items:start;margin-top:4px}
  .kl-held__onder .kl-bijschrift{grid-column:2}
}

/* Een blok dat alleen tekst is: één smalle kolom, geen kaarten, geen labeltje */
.kl-blok--smal .kl-binnen{max-width:860px}
.kl-verhaal{display:grid;gap:14px;margin-top:16px;max-width:36em}
.kl-verhaal p{color:var(--kl-inkt-zacht);font-size:17px;line-height:1.6;text-wrap:pretty}
.kl-verhaal b{color:var(--kl-inkt);font-weight:600}
.kl-verhaal .kl-klein{margin-top:8px;padding-top:14px;border-top:1px solid var(--kl-lijn);max-width:34em}

/* Het hart: het enige blok met een ondergrond, en het grootst */
.kl-hart{padding-top:64px;padding-bottom:72px}
@media (min-width:960px){.kl-hart{padding-top:88px;padding-bottom:96px}}
.kl-hart__kop{display:grid;gap:16px;max-width:44em}
.kl-h2--groot{font-size:clamp(34px,5.4vw,58px);line-height:1.04;letter-spacing:-.032em}
.kl-hart .kl-label{color:var(--kl-amber-diep)}
.kl-hart__voet{margin-top:28px}

/* De stappen naast het vel: geen nummering meer in woorden, alleen de bolletjes */
.kl-bonstap > b{display:block;font-size:clamp(20px,2.4vw,25px);line-height:1.2;letter-spacing:-.015em;font-weight:600}

/* De schakelaar hoort bij de klus, niet bij de kop */
.kl-schakelaar{display:grid;gap:10px;justify-items:start;width:100%}
.kl-schakelaar__reden{font-size:15px;color:var(--kl-gedempt);max-width:34em}
.kl-chips--links{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.kl-chips--links li{display:flex}
.kl .kl-chips--links a.kl-chip{text-decoration:none;color:var(--kl-inkt);background:var(--kl-papier)}
.kl-chips--links a.kl-chip[aria-current="true"]{background:var(--kl-inkt);border-color:var(--kl-inkt);color:var(--kl-papier)}
.kl-schakelaar__eerlijk{font-size:14px;line-height:1.5;color:var(--kl-gedempt);max-width:40em;
  padding-left:14px;border-left:2px solid var(--kl-lijn-hard);margin-top:4px}

/* Waarom Klusin: tekst links, één telefoon rechts */
@media (min-width:960px){.kl-duo--anders{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.kl-anders__beeld{display:grid;gap:16px;justify-items:center}
.kl-anders__beeld .kl-bijschrift{justify-self:stretch}

/* Het slot: de drie stappen en de knop, zonder aparte slotbon */
.kl-slotblok{padding-bottom:88px}
.kl-slotblok .kl-h2{margin-bottom:26px}
.kl-slotblok__actie{display:grid;gap:12px;justify-items:start;margin-top:32px}
.kl-slotblok__actie .kl-klein a{color:var(--kl-inkt);text-underline-offset:3px}
.kl-beginnen{display:grid;gap:12px}
@media (min-width:820px){.kl-beginnen{grid-template-columns:repeat(3,1fr);gap:14px}}
.kl-beginnen li{display:grid;align-content:start;gap:6px;padding:24px 22px;border:1px solid var(--kl-lijn);
  border-radius:var(--kl-r-groot);background:var(--kl-papier)}
.kl-beginnen__nr{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--kl-amber-diep)}
.kl-beginnen li b{font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.kl-beginnen li span:not(.kl-beginnen__nr){color:var(--kl-inkt-zacht);font-size:16px;text-wrap:pretty}

/* Het bijschrift onder een scherm */
.kl .kl-bijschrift{font-size:15px;line-height:1.5;color:var(--kl-gedempt);max-width:46em;
  padding-left:14px;border-left:2px solid var(--kl-lijn);text-wrap:pretty}

/* Wat de klant ervan merkt, bij elke stap van de klus */
.kl .kl-merkt{font-size:15px;line-height:1.5;color:var(--kl-gedempt);padding-left:14px;
  border-left:2px solid var(--kl-lijn-hard);max-width:38em;text-wrap:pretty;margin-top:4px}
.kl .kl-merkt b{display:inline;font-size:inherit;letter-spacing:0;color:var(--kl-inkt-zacht);font-weight:600}

/* De drie fasen op Wat er in Klusin zit staan op wit; alleen het slot heeft een ondergrond. */
.kl-blok--fase{padding-top:0}
.kl-blok--fase + .kl-blok--fase{padding-top:8px}
.kl-blok--fase .kl-kop-groep{padding-top:40px;border-top:1px solid var(--kl-lijn)}
.kl-blok--fase:first-of-type .kl-kop-groep{border-top:0;padding-top:0}

/* De fase van de klus: klein boven de stap, alleen waar een nieuwe fase begint */
.kl-bonstap__fase{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kl-amber-diep);display:block;margin-bottom:2px}

/* De voet van een site van zes pagina's: één regel links, vier links rechts. */
.kl-voet{padding:44px 0 24px}
.kl-voet__grid{align-items:start}
@media (min-width:860px){.kl-voet__grid{grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}}
.kl-voet__kolom h2{margin-bottom:10px}
.kl-voet__kolom ul{display:flex;flex-wrap:wrap;gap:4px 24px}
@media (max-width:859px){.kl-voet__kolom ul{flex-direction:column;gap:0}}
.kl-voet__merk p{max-width:34em}

/* 2.3.0 · de belofte onder de hoofdknop */
.kl-belofte{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;font-weight:600;color:var(--kl-inkt-zacht)}
.kl-belofte li{display:flex;align-items:center;gap:6px}
.kl-belofte svg{width:18px;height:18px;flex:none;color:var(--kl-groen)}

/* 2.4.0 · vier voordelen naast elkaar op breed, twee op middel, onder elkaar op de telefoon */
@media (min-width:700px){.kl-raster--vier{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.kl-raster--vier{grid-template-columns:repeat(4,1fr)}}

/* 2.5.0 · van bericht naar betaald, vijf voordelen, kosten en meebouwen */
.kl-tweede{margin:10px 0 0}
.kl-flow{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.kl-flow{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1080px){.kl-flow{grid-template-columns:repeat(7,1fr)}}
.kl-flow__stap{background:var(--kl-papier);border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);padding:16px;display:grid;gap:6px;align-content:start;position:relative}
.kl-flow__stap b{font-size:17px;color:var(--kl-inkt)}
.kl-flow__stap span:last-child{font-size:14px;line-height:1.45;color:var(--kl-gedempt)}
.kl-flow__nr{width:28px;height:28px;border-radius:999px;background:var(--kl-amber);color:var(--kl-inkt);display:grid;place-items:center;font-size:14px;font-weight:700}
@media (min-width:700px){.kl-raster--vijf{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.kl-raster--vijf{grid-template-columns:repeat(5,1fr)}}
.kl-kosten{background:var(--kl-papier);border:1px solid var(--kl-lijn);border-radius:var(--kl-r-groot);padding:32px;display:grid;gap:18px;max-width:760px}
.kl-meebouwen{display:grid;gap:28px;align-items:start}
@media (min-width:900px){.kl-meebouwen{grid-template-columns:1.4fr 1fr}}
.kl-meebouwen .kl-vinklijst a{color:var(--kl-inkt);text-decoration:underline;text-underline-offset:3px}

@media (min-width:1080px){.kl-raster--zes{grid-template-columns:repeat(3,1fr)}}