/* pagina/landing.css — /kozijnen/ (landing, ronde 2 · jury 4). Prefix .kz-. Alleen compositie: de componenten (.s-*) staan in site.css.
   Opbouw volgt de offerte: omslag p1 → brief p2 → pakket p3 → huis rondom p4 → route p15 → afspraken p16 → slot p17.
   Eén karaktervol project door de hele pagina: de fictieve voorbeeldvilla (schilddak, dakkapel, erker, uitbouw, overkapping),
   per hoofdstuk een eigen shot: omslag driekwart vóór (draait rond) · H1 de schuifpui van dichtbij · H2 frontaal in de zon ·
   H3 driekwart per gevel · slot bij nacht van rechtsachter. Nooit twee keer dezelfde camerahoek.
   Desktop-maten op 1440 × 900: vel x 130–1310, binnenmarge 64 → inhoud x 194–1246. Mobiel: smal vel, alleen buitenlijn + hoeken. */

/* ---------------------------------------------------------------- tokens (alleen op deze pagina)
   Tekst onder 18 px krijgt "inkt-goud" (#7E6224 ≈ 4,9:1) en grijs #6B655C (≈ 5,1:1); het lichte goud blijft voor ornamenten,
   grote cursieven en lijnen. */
.kz{--dgoud:#7E6224;--grijs2:#6B655C;--kz-licht-goud:#B08A32;--kz-nacht:#171B36;--kz-halo:0 0 2px var(--rijst),0 0 3px var(--rijst),0 0 6px var(--rijst),1px 1px 0 var(--rijst),-1px -1px 0 var(--rijst),1px -1px 0 var(--rijst),-1px 1px 0 var(--rijst)}
.kz .s-omslag__sub em,.kz .s-h2 em,.kz .kz-held__onderschrift em{color:var(--kz-licht-goud)}
.kz .s-brief__tekst > p:first-child::first-letter{color:var(--kz-licht-goud)}

.kz-br{display:none}
.kz-br--altijd{display:block}
@media (min-width:768px){.kz-br{display:block}}
.kz-nw{white-space:nowrap}
.kz-alleen-klein{display:none!important}
@media (max-width:767px){.kz-alleen-groot{display:none!important}.kz-alleen-klein{display:inline-flex!important}}

/* ================================================================ CHROOM (lokaal; wensen aan het fundament: ronde2/wensen-landing.md) */
@media (min-width:1024px){
  .kz .s-merk__tekst{align-content:center}
  .kz .s-merk__tag{display:block;max-height:1.4em;overflow:hidden;transition:opacity .2s var(--ease),max-height .22s var(--ease),margin .22s var(--ease)}
  html.s-ingeklapt .kz .s-merk__tag{max-height:0;margin-top:0}
}
@media (max-width:1023px){
  .kz .s-kop__acties{align-items:center;gap:8px}
  .kz .s-lijstknop{width:48px;min-width:48px;height:48px;padding:0}
  .kz .s-menuknop{width:48px;height:48px}
}
@media (max-width:767px){
  .kz .s-actiebalk{--s-actiebalk-h:60px}
  .kz .s-actiebalk .s-knop{min-height:48px;height:48px;box-shadow:none}
  .kz .s-actiebalk .s-knop--goud{box-shadow:inset 0 1px 0 rgba(255,250,232,.65),inset 0 -1px 0 var(--dgoud)}
  .kz .s-actiebalk.kz-weg{transform:translateY(110%)}
}
/* focus: de ring van de subnav valt binnen de scrollstrook (nooit afgekapt), in de hoofdnav dicht op het woord */
.kz .s-subnav a:focus-visible{outline-offset:-4px}
.kz .s-nav a:focus-visible{outline-offset:2px}
@media (max-width:767px) and (max-height:700px){.kz .s-actiebalk{--s-actiebalk-h:56px}.kz .s-actiebalk .s-knop{min-height:48px;height:48px}}
/* elke sectie met absolute lagen is haar eigen stapel: niets tekent ooit over de sticky kop/subnav/actiebalk */
.kz main > section{position:relative;isolation:isolate;z-index:0}

/* ================================================================ PINS — munt boven het glas, dunne gouden aanwijslijn naar een stip midden op het glas */
.kz .kz-pin{width:30px;height:30px;translate:-50% calc(-100% - 22px);font-size:.8125rem}
.kz .kz-pin::before{left:50%;top:100%;width:9px;height:26px;margin-left:-4.5px;
  background:linear-gradient(var(--dgoud),var(--dgoud)) 50% 0/1.5px calc(100% - 7px) no-repeat,
             radial-gradient(circle at 50% calc(100% - 4.5px),#FBF1D6 0 2px,var(--dgoud) 2.4px 3.6px,rgba(251,241,214,.85) 3.8px 4.4px,transparent 4.6px)}
.kz .kz-pin::after{inset:-7px}                                     /* tikvlak 44 × 44 rond de munt */
.kz .kz-pin.is-actief::before{background:linear-gradient(var(--rood),var(--rood)) 50% 0/1.5px calc(100% - 7px) no-repeat,
  radial-gradient(circle at 50% calc(100% - 4.5px),#FBE3DD 0 2px,var(--rood) 2.4px 3.6px,rgba(251,241,214,.85) 3.8px 4.4px,transparent 4.6px)}
.kz .kz-pin .s-pin__tip{z-index:4}
@media (max-width:767px){
  .kz .kz-pin{width:36px;height:36px;font-size:.9375rem;translate:-50% calc(-100% - 18px)}
  .kz .kz-pin::before{height:22px}
  .kz .kz-pin::after{inset:-4px}
  .kz .kz-pin .s-pin__tip{font-size:.875rem;letter-spacing:.1em}
}
/* smal: deze munt hangt ónder zijn glas (steel omhoog), zodat buren elkaar nooit raken */
@media (max-width:440px){
  .kz .kz-pin.kz-pin--onder-smal{translate:-50% 18px}
  .kz .kz-pin.kz-pin--onder-smal::before{top:auto;bottom:100%;height:18px;background:linear-gradient(var(--dgoud),var(--dgoud)) 50% 100%/1.5px calc(100% - 7px) no-repeat,
    radial-gradient(circle at 50% 4.5px,#FBF1D6 0 2px,var(--dgoud) 2.4px 3.6px,rgba(251,241,214,.85) 3.8px 4.4px,transparent 4.6px)}
  .kz .kz-pin--onder-smal .s-pin__tip{top:calc(100% + 10px);bottom:auto}
}

/* ================================================================ OMSLAG — één gesloten compositie binnen 100svh − kop */
.kz-omslag{padding-block:12px 0;overflow:clip}
.kz-omslag__houder{position:relative}
.kz-omslag__vel{display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:clip;padding:22px 18px 30px}
.kz-omslag__watermerk{right:-14%;bottom:4%;left:auto;top:auto;width:min(80vw,420px);opacity:.045}
.kz-omslag__bergen{left:1px;right:1px;bottom:1px;height:clamp(90px,14vw,170px)}
.kz-omslag__mist{left:-10%;right:-10%;bottom:8%;height:30%;background:radial-gradient(ellipse 46% 50% at 30% 60%,rgba(var(--rijst-rgb),.9),rgba(var(--rijst-rgb),0) 70%),radial-gradient(ellipse 40% 44% at 76% 54%,rgba(var(--rijst-rgb),.75),rgba(var(--rijst-rgb),0) 70%)}
.kz-omslag__den{bottom:10px;width:clamp(46px,5.4vw,72px)}
.kz-omslag__den--l{left:clamp(10px,2vw,30px)}
.kz-omslag__den--r{right:clamp(10px,2vw,30px);scale:-1 1}
.kz-omslag__tak{z-index:3;top:-8px;right:-34px;width:150px}
@media (max-width:767px){.kz-omslag__tak{width:124px;top:-26px;right:-30px}.kz-omslag__bloesem{width:46vw;height:40%}}

.kz-omslag__teken{order:1;display:flex;align-items:center;gap:14px;font-size:34px;line-height:1;margin-bottom:16px}
.kz-omslag__teken .s-kalli--v{writing-mode:horizontal-tb;letter-spacing:.06em;opacity:.88}
.kz-omslag__zegel{width:26px;height:26px;rotate:-4deg}

/* mobiel: de tekstkolom valt uiteen zodat de volgorde woord → huis → knop wordt */
.kz-omslag__tekst{display:contents}
.kz-omslag__kicker{order:2;margin-bottom:10px}
.kz-sep::before{content:"·";display:inline-block;margin:0 .42em 0 .12em;color:var(--kz-licht-goud)}   /* .2 + letter-spacing ≈ .5: optisch gelijk */
.kz-omslag h1{order:3;margin:0 0 4px}
.kz-omslag__kicker,.kz-omslag h1,.kz-omslag__lijn,.kz-omslag__meta,.kz-omslag__teken{position:relative;z-index:2}
.kz-omslag__beeld{order:4;position:relative;margin:4px -12px 0;isolation:isolate}
.kz-omslag__totaal{order:5;max-width:none;margin-top:22px}
.kz-omslag__lijn{order:6;margin:26px 0 20px}
.kz-omslag__meta{order:7}

/* de zon: het centrale gebaar (zoals offerte p1), ± 60 % van de heldbreedte, gecentreerd achter het huis */
.kz-omslag__zon{position:absolute;z-index:-1;left:50%;top:44%;width:min(88%,560px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 50%,rgba(0,0,0,.55) 66%,transparent 84%);mask-image:linear-gradient(#000 50%,rgba(0,0,0,.55) 66%,transparent 84%);
  background:radial-gradient(circle at 50% 46%,rgba(250,236,196,.98) 0,rgba(246,226,172,.94) 38%,rgba(240,214,150,.78) 58%,rgba(232,202,132,.40) 68.5%,rgba(232,202,132,0) 70.5%)}
.kz-omslag__huis{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.kz-draai{position:relative;margin:0}
.kz-draai img,.kz-draai canvas{width:100%;height:auto;display:block}
.kz-draai > canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.kz-draai.is-actief > canvas{opacity:1}
.kz-draai.is-actief > picture{visibility:hidden}
.kz-omslag__pins{transition:opacity .3s var(--ease)}
.kz-draai[data-gedraaid] + .s-pins{opacity:0;pointer-events:none;transition-duration:.15s}
.kz-omslag__huis.is-sleepbaar{cursor:grab}
.kz-omslag__huis.is-slepen{cursor:grabbing}
/* nevel: zacht in én uit (geen afgekapte rand), alleen binnen het beeld; het kader blijft er altijd boven */
.kz-omslag__nevel{left:0;right:0;height:30%;bottom:18px;opacity:1;
  background:linear-gradient(rgba(var(--rijst-rgb),0),rgba(var(--rijst-rgb),.78) 55%,rgba(var(--rijst-rgb),.78) 70%,rgba(var(--rijst-rgb),0));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.kz-omslag__bijschrift{position:relative;z-index:2;margin:-6px auto 0;max-width:40ch;text-align:center;font:italic 400 1rem/1.35 var(--f-serif);color:var(--grijs1);text-wrap:balance}
.kz-klik,.kz-sleep,.kz-rond{display:none}
/* tijdens de rondgang of na slepen (nummers weg) klopt "tik op een nummer" niet: dan de sleepinstructie */
.kz-omslag__beeld:has(.is-rondje) .kz-tik,.kz-omslag__beeld:has(.is-rondje) .kz-klik,.kz-omslag__beeld:has(.is-rondje) .kz-sleep,
.kz-omslag__beeld:has([data-gedraaid]) .kz-tik,.kz-omslag__beeld:has([data-gedraaid]) .kz-klik,.kz-omslag__beeld:has([data-gedraaid]) .kz-sleep{display:none!important}
.kz-omslag__beeld:has(.is-rondje) .kz-rond,.kz-omslag__beeld:has([data-gedraaid]) .kz-rond{display:inline}
/* ronde 3 (CLS 0): de twee bijschriften (tik/klik en de sleepinstructie) staan in één rastercel en wisselen met visibility:
   het bijschrift is altijd zo hoog als de langste variant, er schuift niets (was: 21 px verschuiving, CLS 0,03–0,21) */
.kz-omslag__bijschrift{display:grid}
.kz-bs-a,.kz-omslag__bijschrift > .kz-rond{grid-area:1/1}
.kz-omslag__bijschrift > .kz-rond{display:inline;visibility:hidden}
.kz-omslag__beeld:has(.is-rondje) .kz-bs-a,.kz-omslag__beeld:has([data-gedraaid]) .kz-bs-a{visibility:hidden}
.kz-omslag__beeld:has(.is-rondje) .kz-omslag__bijschrift > .kz-rond,.kz-omslag__beeld:has([data-gedraaid]) .kz-omslag__bijschrift > .kz-rond{visibility:visible}
@media (pointer:fine){.kz-tik{display:none}.kz-klik{display:inline}html.js-beweeg .kz-sleep{display:inline}}
@media (max-width:767px){.kz-pin--groot{display:none!important}}

.kz-omslag__totaalzegel{position:absolute;top:-16px;right:-14px;width:40px;height:40px;rotate:-5deg;z-index:2}
.kz-omslag__acties{display:grid;gap:4px}
.kz-omslag__knop{font-size:.875rem;letter-spacing:.12em;padding-inline:14px calc(14px - .12em)}
.kz-omslag__acties .s-pijllink{justify-self:start}
.kz-omslag__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.kz-omslag__meta > div{display:grid;gap:2px}
.kz-omslag__meta dd{margin:0;font-size:.9375rem;line-height:1.45;color:var(--inkt2)}

@media (min-width:768px) and (max-width:1023px){
  .kz-omslag__vel{padding:32px 40px 44px}
  .kz-omslag__beeld{margin-inline:0}
  .kz-omslag__totaal{max-width:420px}
  .kz-omslag__tak{width:300px}
}

/* desktop: de villa domineert het vel (± 60 % van de breedte) met de zon groot erachter; het woord KOZIJNEN schuift onder het huis in
   de grond/mist (zoals OFFERTE op p1), het totaalkader rechtsonder met lucht eronder. Breedte schaalt mee met de schermhoogte. */
@media (min-width:1024px){
  .kz-omslag{padding-top:24px}
  .kz-omslag__vel{--bw:clamp(600px,calc((100svh - 136px) * 1.02),940px);
    grid-template-columns:72px minmax(0,1fr) 340px;grid-template-rows:auto auto;column-gap:24px;row-gap:0;padding:14px 32px 40px}
  .kz-omslag__tekst{display:block;grid-column:1 / 3;grid-row:2;align-self:start;position:relative;z-index:2;padding-right:24px;margin-top:calc(var(--bw) * -.12)}
  .kz-omslag__kicker{margin-bottom:10px}
  .kz-omslag h1{margin:0}
  .kz-omslag .s-omslag__woord{font-size:clamp(64px,6.2vw,90px)}
  .kz-omslag .s-omslag__sub{margin-top:6px;font-size:1.75rem}
  .kz-omslag__lijn{margin:14px 0 14px}
  .kz-omslag__meta{display:grid;grid-template-columns:repeat(2,max-content);gap:0 48px}
  .kz-omslag__teken{grid-column:1;grid-row:1;align-self:start;flex-direction:column;gap:16px;margin:20px 0 0;font-size:68px}
  .kz-omslag__teken .s-kalli--v{writing-mode:vertical-rl;letter-spacing:.04em}
  .kz-omslag__zegel{width:30px;height:30px}
  .kz-omslag__beeld{grid-column:2 / 4;grid-row:1;justify-self:end;width:min(var(--bw),100%);margin:0 -12px 0 0}
  .kz-omslag__zon{left:52%;top:61%;width:78%}
  .kz-omslag__nevel{height:18%;bottom:6%}
  /* instructie rechtsonder in de grond, boven het totaalkader; nooit tegen het woord */
  .kz-omslag__bijschrift{position:absolute;right:4%;bottom:1%;margin:0;max-width:24ch;text-align:right;font-size:1rem;line-height:1.35}
  .kz-omslag__totaal{grid-column:3;grid-row:2;align-self:start;z-index:3;width:340px;max-width:none;margin-top:18px}
  .kz-omslag__tak{width:400px;right:-84px;top:-22px}   /* kruist de bovenlijn ± 80 px vóór de hoek; het hoekornament blijft vrij */
  .kz-omslag__watermerk{right:-4%;bottom:-2%;width:380px}
  .kz-omslag__den{bottom:14px}
  .kz-omslag__den--l{left:auto;right:480px}
}
@media (min-width:1024px) and (max-height:760px){.kz-omslag .s-omslag__woord{font-size:62px}.kz-omslag__lijn{margin:10px 0}}
/* eindkeuring: het hele vel (vier hoekornamenten) past op 1440 × 900 onder de kop; het aanvraagkaartje staat rechtsonder tegen de voetlijn
   in het vel, de sleepinstructie linksboven in de lucht */
@media (min-width:1024px){
  .kz-omslag__totaal{grid-row:1 / 3;align-self:end;margin:0 0 0;width:320px}
  .kz-omslag__bijschrift{right:auto;left:3%;top:4%;bottom:auto;text-align:left}
}

/* openingsscène: zon stijgt, nummers stempelen; tijdens een draai wijken ze en komen ze terug met dezelfde tik */
html.js-beweeg .kz-omslag__zon{animation:kz-zon 1.1s var(--s-ease-inkt) .05s backwards}
html.js-beweeg .kz-omslag__pins .s-pin{animation:kz-pin .34s var(--s-ease-stempel) calc(.2s + var(--i,0) * 70ms) backwards}
html.js-beweeg .kz-draai:not([data-gedraaid]) + .s-pins .s-pin{animation:kz-pin .3s var(--s-ease-stempel) calc(var(--i,0) * 50ms) backwards}
@keyframes kz-zon{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
@keyframes kz-pin{from{opacity:0;scale:1.35;rotate:-10deg}to{opacity:1;scale:1;rotate:0deg}}
.kz-omslag{--kz-sy:0;--kz-mx:0;--kz-my:0}
html.js-beweeg .kz-omslag [data-kz-diepte]{transform:translate3d(calc(var(--kz-mx) * var(--d,0) * 70px),calc(var(--kz-sy) * var(--d,0) * 1px + var(--kz-my) * var(--d,0) * 40px),0);will-change:transform}

/* ronde 3: scrollparallax van de omslag op de compositor (BEWEGING.md §5: scroll-gedreven, letterlijke waarden in de keyframes).
   Zelfde uitslag als vroeger (min(scrollY, 1200) × diepte px), maar zonder --kz-sy per frame op de hele omslag. De muis (desktop)
   blijft via transform; translate en transform tellen bij elkaar op. Zonder ondersteuning: landing.js zet --kz-sy zoals eerst. */
@supports (animation-timeline:scroll()){
  html.js-beweeg .kz-omslag [data-kz-diepte]{animation:linear both kz-plx-14;animation-timeline:scroll(root);animation-range:0px 1200px}
  html.js-beweeg .kz-omslag [data-kz-diepte=".32"]{animation-name:kz-plx-32}
  html.js-beweeg .kz-omslag [data-kz-diepte=".2"]{animation-name:kz-plx-20}
  html.js-beweeg .kz-omslag [data-kz-diepte=".16"]{animation-name:kz-plx-16}
  html.js-beweeg .kz-omslag [data-kz-diepte=".1"]{animation-name:kz-plx-10}
  html.js-beweeg .kz-omslag [data-kz-diepte="-.06"]{animation-name:kz-plx-m06}
  /* de zon is gecentreerd met translate en stijgt bij het laden op (kz-zon): beide animaties naast elkaar */
  html.js-beweeg .kz-omslag .kz-omslag__zon[data-kz-diepte]{animation:kz-zon 1.1s var(--s-ease-inkt) .05s backwards,kz-plx-zon linear both;
    animation-timeline:auto,scroll(root);animation-range:normal,0px 1200px}
}
@supports (animation-timeline:scroll()){
  /* de tak waait (s-wind, site.css) én schuift mee: beide animaties; buiten beeld alleen de wind uit */
  html.js-beweeg .kz-omslag .s-wind[data-kz-diepte]{animation:s-wind var(--b-p-tak) var(--b-e-wind) infinite alternate,kz-plx-m06 linear both;
    animation-timeline:auto,scroll(root);animation-range:normal,0px 1200px}
  html.js-beweeg .kz-omslag .s-wind.is-rust[data-kz-diepte],html.b-verborgen .kz-omslag .s-wind[data-kz-diepte]{animation-name:none,kz-plx-m06}
}
@keyframes kz-plx-zon{from{translate:-50% -50%}to{translate:-50% calc(-50% + 192px)}}
@keyframes kz-plx-32{from{translate:0 0}to{translate:0 384px}}
@keyframes kz-plx-20{from{translate:0 0}to{translate:0 240px}}
@keyframes kz-plx-16{from{translate:0 0}to{translate:0 192px}}
@keyframes kz-plx-14{from{translate:0 0}to{translate:0 168px}}
@keyframes kz-plx-10{from{translate:0 0}to{translate:0 120px}}
@keyframes kz-plx-m06{from{translate:0 0}to{translate:0 -72px}}
html.b-rustig .kz-omslag [data-kz-diepte]{animation:none}

/* ================================================================ BLOESEM — het bewegingssysteem (.b-scene > .b-bloesem): af en toe één blaadje van de tak, onder de tekstlaag */
.kz-omslag__bloesem{left:auto;bottom:auto;top:24px;right:20px;width:min(420px,60vw);height:60%}

/* ================================================================ STEMPEL — zegels en medaillons komen neer met een kleine tik (alleen met beweging) */
html.js-beweeg [data-kz-stempel]:not(.is-gestempeld){opacity:.6}
html.js-beweeg [data-kz-stempel].is-gestempeld{animation:kz-stempel .46s var(--s-ease-stempel) var(--kz-v,0s) both}
@keyframes kz-stempel{0%{opacity:.6;scale:1.35;rotate:-10deg}45%{opacity:1;scale:.94;rotate:2deg}70%{scale:1.03}100%{opacity:1;scale:1;rotate:0deg}}

/* ================================================================ BEWIJSBAND — drie zegels van één optische maat (40 × 40) op één raster */
.kz-bewijs{padding-block:clamp(14px,2vw,24px) 0}
.kz-bewijsband .s-bewijsband__item{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;row-gap:4px;align-items:start}
.kz-bewijsband__zegel{grid-row:1 / span 3;width:40px;height:40px;rotate:-3deg}
.kz-bewijsband .s-bewijsband__titel{align-self:center;min-height:40px;display:flex;align-items:center;line-height:1.3;font-size:1rem}
.kz-bewijsband .s-bewijsband__tekst{grid-column:2}
.kz-bewijsband__link{grid-column:2;font-size:.875rem;letter-spacing:.18em}
@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .kz-bewijsband{grid-template-rows:auto 1fr auto}
    .kz-bewijsband .s-bewijsband__item{grid-row:span 3;grid-template-rows:subgrid}
  }
}
@media (min-width:900px){.kz-bewijsband .s-bewijsband__titel{font-size:.9375rem}.kz-bewijsband__link{font-size:.8125rem}}
@media (max-width:767px){.kz-bewijsband .s-bewijsband__item{padding-block:16px}.kz-bewijsband .s-bewijsband__tekst{font-size:.9375rem}}

/* ================================================================ HOOFDSTUKKEN — vel, titelblok, folio */
.kz-hfd{padding-block:clamp(14px,2vw,28px)}
.kz-bewijs + .kz-hfd{padding-top:clamp(20px,2.6vw,36px)}
.kz-vel{display:grid;grid-template-columns:minmax(0,1fr);padding:30px 18px 22px;overflow:clip}
@media (max-width:767px){
  .kz-hfd > .s-container--vel,.kz-slot > .s-container--vel{padding-inline:10px}
  .kz-vel::after,.kz-slot__vel::after{display:none}
}
@media (min-width:768px){.kz-vel{padding:48px 48px 28px}}
@media (min-width:1024px){.kz-vel{padding:56px 64px 30px}}

.kz-kop__titel{margin:4px 0 0;text-wrap:balance}

/* mono-metaregel (6 groepen · 20 typen · 4 kleuren): flex-items, punt als ::after met gelijke lucht; landing.js verbergt de punt
   aan een regeleinde (.kz-regeleinde). Zonder JS: de punt staat altijd achter een item, nooit aan het begin van een regel. */
.kz .kz-meta{display:flex;flex-wrap:wrap;row-gap:2px;margin-top:2px}
.kz .kz-meta > span{white-space:nowrap}
.kz .kz-meta > span + span::before{content:none}
.kz .kz-meta > span:not(:last-child)::after{content:"·";display:inline-block;width:1.9em;text-align:center;color:var(--kz-licht-goud)}
.kz .kz-meta > span.kz-regeleinde::after{visibility:hidden}

.kz-kolomkop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0;padding-bottom:10px;border-bottom:1px solid rgba(var(--inkt-rgb),.82);
  font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
@media (min-width:768px){.kz-kolomkop{font-size:.8125rem;letter-spacing:.3em}}
.kz-kolomkop__aantal{font:400 .875rem/1 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--grijs1)}

/* folio binnen de rand; mobiel alleen "HOOFDSTUK n / 6" gecentreerd tussen twee lijnen */
.kz .kz-folio{margin:clamp(30px,3.4vw,44px) 0 0;font-size:.75rem}
.kz .s-folio__lijn{white-space:nowrap}
.kz .s-folio__nr img{width:16px;height:16px;margin-right:8px;vertical-align:-3px}
@media (max-width:767px){
  .kz .kz-folio{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;font-size:.875rem}
  .kz .kz-folio .s-folio__site{display:none}
  .kz .kz-folio .s-folio__lijn{grid-column:1;font-size:0;gap:0}
  .kz .kz-folio .s-folio__lijn::before{display:none}
  .kz .kz-folio .s-folio__nr{grid-column:2;grid-row:1}
  .kz .kz-folio::after{content:"";grid-column:3;grid-row:1;height:1px;background:linear-gradient(90deg,var(--lijn-goud),transparent)}
  .kz .kz-folio .s-folio__lijn::after{background:linear-gradient(90deg,transparent,var(--lijn-goud))}
}
.kz .s-zegel-nr img{width:30px;height:30px;rotate:-3deg}
.kz .s-zegel-nr > span{white-space:nowrap}
.kz .s-titelblok__rubriek{flex-wrap:nowrap}
@media (max-width:389px){
  .kz .s-titelblok__rubriek{gap:12px}.kz .s-titelblok__rubriek .s-kicker{letter-spacing:.14em}
  .kz .s-zegel-nr__tot{display:none}
  .kz-leg{gap:0 8px;padding-inline:4px}
  .kz-leg .s-codelabel{min-width:44px}
  .kz-leg__extra{display:none}
}

/* plaat: een render in een gouden lijst met hoekornamenten (zoals de beeldpagina's van de offerte) */
.kz-plaat{margin:0;display:grid;gap:12px}
.kz-plaat__lijst{display:block;--h:30px;padding:12px;background:var(--rijst);box-shadow:0 26px 44px -26px rgba(var(--inkt-rgb),.5)}
.kz-plaat__lijst picture{display:block;box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.35)}
.kz-plaat img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.kz-plaat__bijschrift{display:flex;align-items:center;justify-content:center;gap:12px;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt2)}
.kz-plaat__plek{font:italic 400 1.0625rem/1.3 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--grijs1)}
@media (min-width:768px){.kz-plaat__bijschrift{font-size:.75rem;letter-spacing:.28em}}

/* groot beeld op een zonneschijf (offerte p3 "Alles in één keer") */
.kz-held{position:relative;isolation:isolate;margin:0 0 clamp(28px,3.6vw,48px);display:grid;justify-items:center}
.kz-held__zon{position:absolute;z-index:-1;left:calc(50% - min(35%,280px));top:-6%;width:min(70%,560px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 48%,rgba(0,0,0,.5) 64%,transparent 80%);mask-image:linear-gradient(#000 48%,rgba(0,0,0,.5) 64%,transparent 80%);
  background:radial-gradient(circle at 50% 48%,rgba(250,238,204,.96) 0,rgba(244,226,180,.86) 42%,rgba(235,211,150,.52) 62%,rgba(226,196,124,.2) 69.5%,rgba(226,196,124,0) 71%)}
.kz-held__bergen{position:absolute;z-index:-1;left:0;right:0;bottom:22%;height:34%;pointer-events:none;opacity:.32;
  background:url('../../kit/afgeleid/bergen-ver-web.webp?v=5988c592') center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.kz-held__nevel{left:0;right:0;bottom:46px;height:26%;z-index:1;opacity:1;background:linear-gradient(rgba(var(--rijst-rgb),0),rgba(var(--rijst-rgb),.82) 55%,rgba(var(--rijst-rgb),.82) 72%,rgba(var(--rijst-rgb),0));-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.kz-held__beeld{position:relative;width:min(100%,860px)}
.kz-held__beeld img{width:100%;height:auto}
.kz-held__onderschrift{position:relative;z-index:2;max-width:56ch;margin:6px auto 0;text-align:center;font:italic 400 1.1875rem/1.45 var(--f-serif);color:var(--inkt2);text-wrap:balance}
@media (min-width:1024px){.kz-held{margin-top:-20px}.kz-held__onderschrift{font-size:1.375rem}}

/* ================================================================ 壹 BRIEF (p2) — brief, oogopslag, citaat met zegel, de pui als plaat */
.kz-brief__vel{grid-template-areas:"kop" "plaat" "brief" "oog" "uitloop" "folio"}
.kz-brief__kop{grid-area:kop;margin-bottom:18px}
.kz-brief__plaat{grid-area:plaat;margin:4px 4px 30px}
.kz-brief__links{grid-area:brief;min-width:0}
.kz-brief__rechts{grid-area:oog;margin-top:34px}
.kz-brief__uitloop{grid-area:uitloop;display:grid;gap:12px;margin-top:30px}
.kz-brief__vel > .kz-folio{grid-area:folio}
.kz-brief__brief .s-brief__tekst{font:400 1.1875rem/1.62 var(--f-serif);color:var(--inkt2);hyphens:auto;-webkit-hyphens:auto}
@media (min-width:768px){.kz-brief__brief .s-brief__tekst{font-size:1.3125rem;line-height:1.6;text-align:justify;text-wrap:pretty}}
.kz-brief__brief .s-brief__tekst > p{margin:0 0 .9em}
.kz-brief__brief .s-brief__aanhef{font-size:1.375rem}
.kz-brief__brief .s-brief__tekst > p:last-child{margin-bottom:0}
.kz-brief__lees{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:2px 0 0;padding:0;border:0;background:none;cursor:pointer;
  font:500 .875rem/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.kz-brief__lees .s-ico{width:16px;height:16px;color:var(--dgoud);transition:transform .25s var(--ease)}
.kz-brief__lees[aria-expanded=true] .s-ico{transform:rotate(180deg)}
@media (max-width:767px){.kz-brief__brief.is-ingekort .kz-brief__meer{display:none}}
@media (min-width:768px){.kz-brief__lees{display:none!important}}
.kz-brief__groet{margin:22px 0 0;font:italic 400 1.25rem/1.4 var(--f-serif);color:var(--inkt2)}

.kz-handtekeningen{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:16px}
.kz-handtekening{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;row-gap:2px;align-items:center}
.kz-handtekening .s-handtekening__foto{grid-row:1 / span 3;width:72px;height:72px;padding:5px}
.kz-handtekening__naam{font:italic 400 1.625rem/1.1 var(--f-serif);color:var(--inkt);white-space:nowrap}
.kz-handtekening__rol{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--grijs2)}
.kz-handtekening__actie{justify-self:start;min-height:44px}
.kz-handtekening--melvin{position:relative}
.kz-handtekening__zegel{position:absolute;right:0;bottom:8px;display:block;width:40px;height:40px;rotate:-6deg}
@media (min-width:560px){
  .kz-handtekeningen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;align-items:start}
}
@media (min-width:1024px){
  .kz-handtekening{grid-template-columns:88px minmax(0,1fr);column-gap:18px}
  .kz-handtekening .s-handtekening__foto{width:88px;height:88px}
  .kz-handtekening__naam{font-size:1.75rem}
  .kz-handtekening__rol{font-size:.75rem;letter-spacing:.3em}
}

.kz-oog__titel{margin:0 0 14px;font:400 1.5rem/1.1 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.kz-oog__titel small{display:block;margin-top:12px;font:500 .875rem/1 var(--f-zh);letter-spacing:.4em;color:var(--dgoud)}
.kz-oog__lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;margin:0}
.kz-oog__rij{position:relative;display:grid;align-content:start;gap:3px;padding:14px 0 16px;border-top:1px solid rgba(var(--dgoud-rgb),.3)}
.kz-oog__ico{position:absolute;right:0;top:14px;display:grid;place-items:center;width:30px;height:30px;color:var(--kz-licht-goud)}
.kz-oog__ico .s-ico{width:26px;height:26px;stroke-width:1.2}
.kz-oog__waarde small{font-size:max(.875rem,.38em);letter-spacing:.2em;margin-right:.35em;vertical-align:.62em;color:var(--grijs1)}
.kz-oog__rij dt{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2)}
.kz-oog__rij dd{margin:0}
.kz-oog__waarde{font:300 2rem/1.05 var(--f-kop);letter-spacing:.02em;color:var(--inkt);font-variant-numeric:lining-nums}
.kz-oog__toel{font-size:.9375rem;line-height:1.4;color:var(--grijs1)}
.kz-oog__rij--inzet{align-content:center}
.kz-oog__inzet{display:grid;justify-items:center;gap:8px;text-align:center}
.kz-oog__medaillon{--d:96px}
.kz-oog__inzet .s-bijschrift{margin:0;font-size:1rem;line-height:1.3}
@media (min-width:768px){
  .kz-oog__waarde{font-size:2.5rem}
  .kz-oog__rij dt{font-size:.75rem;letter-spacing:.3em}
}
@media (min-width:1024px){
  .kz-oog__lijst{grid-template-columns:minmax(0,1fr)}
  .kz-oog__rij{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:13px 0 14px}
  .kz-oog__rij dt,.kz-oog__toel{grid-column:1}
  .kz-oog__rij .kz-oog__waarde{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;font-size:2.75rem;margin-right:50px;white-space:nowrap}
  .kz-oog__ico{top:50%;translate:0 -50%}
  .kz-oog__rij--inzet{grid-template-columns:minmax(0,1fr);padding-top:22px}
  .kz-oog__inzet{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:18px;text-align:left}
  .kz-oog__medaillon{--d:112px}
}

.kz-brief__citaat{position:relative;margin:0;max-width:30ch;padding-top:4px;font:italic 400 1.375rem/1.4 var(--f-serif);color:var(--inkt2);text-wrap:balance}
.kz-brief__citaat p{margin:0}
.kz-brief__citaatzegel{display:block;width:36px;height:36px;margin-bottom:14px;rotate:-5deg}
.kz-brief__acties{display:flex;flex-wrap:wrap;gap:0 28px}

@media (min-width:768px){.kz-brief__plaat{margin-inline:12px}}
@media (min-width:1024px){
  .kz-brief__vel{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;
    grid-template-areas:
      "kop kop kop kop kop kop kop . oog oog oog oog"
      "brief brief brief brief brief brief brief . oog oog oog oog"
      "uitloop uitloop uitloop uitloop plaat plaat plaat plaat plaat plaat plaat plaat"
      "folio folio folio folio folio folio folio folio folio folio folio folio"}
  .kz-brief__kop{margin-bottom:26px}
  .kz-brief__rechts{margin-top:4px}
  /* de plaat grijpt in de brief: hij begint onder de handtekeningkolom (± 56 px hoger dan de rij) */
  .kz-brief__plaat{margin:34px 0 0 24px;align-self:start;position:relative;z-index:1}
  .kz-brief__uitloop{align-self:start;margin:96px 0 0;gap:18px}
  .kz-brief__citaat{font-size:1.625rem}
}

/* ================================================================ 贰 PAKKET (p3) */
.kz-pakket__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
@media (min-width:1024px){.kz-pakket__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px}}
.kz-groepen__lijst{list-style:none;margin:0;padding:0}
.kz-groepen__lijst li{border-bottom:1px solid rgba(var(--dgoud-rgb),.28)}
.kz-groep{display:grid;grid-template-columns:72px 30px minmax(0,1fr) 18px;align-items:center;gap:0 14px;min-height:84px;padding:8px 4px;text-decoration:none;color:inherit;
  transition:background-color var(--duur-kort) var(--ease)}
.kz-groep:hover{background:rgba(var(--goud-rgb),.07)}
/* elk productbeeld in hetzelfde vak, op één optische as (midden onder) */
.kz-groep__beeld{display:flex;align-items:flex-end;justify-content:center;width:72px;height:64px}
.kz-groep__beeld picture{display:contents}
.kz-groep__beeld img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.kz-groep__getal{font:300 2rem/1 var(--f-kop);color:var(--inkt);text-align:right;font-variant-numeric:lining-nums}
.kz-groep__tekst{display:grid;gap:2px;min-width:0}
.kz-groep__naam{font:500 1rem/1.2 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.kz-groep__sub{font-size:.9375rem;line-height:1.35;color:var(--grijs1)}
.kz-groep__codes{font:400 .875rem/1.3 var(--f-mono);color:var(--dgoud);letter-spacing:.02em}
.kz-groep__pijl{width:18px;height:18px;color:var(--dgoud);transition:transform var(--duur-kort) var(--ease)}
.kz-groep:hover .kz-groep__pijl{transform:translateX(3px)}
@media (min-width:768px){
  .kz-groep{grid-template-columns:104px 44px minmax(0,1fr) 18px;gap:0 18px;min-height:104px}
  .kz-groep__beeld{width:104px;height:84px}
  .kz-groep__getal{font-size:2.75rem}
  .kz-groep__tekst{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .kz-groep__naam,.kz-groep__sub{grid-column:1}
  .kz-groep__codes{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:.8125rem;text-align:right;white-space:nowrap}
}
.kz-keuzes{display:grid;align-content:start}
.kz-keuze{padding:18px 0 20px;border-bottom:1px solid rgba(var(--dgoud-rgb),.28)}
.kz-keuze__kop{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:500 .9375rem/1.2 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.kz-keuze__nr{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--dgoud);font:400 .875rem/1 var(--f-mono);letter-spacing:0;color:var(--dgoud)}
.kz-keuze__tekst,.kz-keuze__noot{margin:0;font-size:.9375rem;line-height:1.5;color:var(--grijs1)}
.kz-keuze__noot{margin-top:10px;font:italic 400 1rem/1.4 var(--f-serif)}
.kz-stalen{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0 0 0 4px}   /* 4 px = de staalring: buitenrand op de kolomlijn */
.kz-staal{display:grid;justify-items:start;gap:3px;min-height:44px;text-decoration:none;color:inherit}
.kz-staal__vlak{width:100%;max-width:72px;aspect-ratio:9/6;border-radius:2px;
  background:linear-gradient(145deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.05) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.18) 100%),var(--staal);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 0 3px var(--rijst),0 0 0 4px rgba(var(--dgoud-rgb),.35),0 4px 10px rgba(var(--inkt-rgb),.18);transition:transform var(--duur-kort) var(--ease)}
.kz-staal--licht .kz-staal__vlak{box-shadow:inset 0 0 0 1px rgba(var(--inkt-rgb),.22),0 0 0 3px var(--rijst),0 0 0 4px rgba(var(--dgoud-rgb),.35),0 4px 10px rgba(var(--inkt-rgb),.12)}
.kz-staal:hover .kz-staal__vlak{transform:translateY(-2px)}
.kz-staal__code{margin-top:6px;font:400 .875rem/1 var(--f-mono);color:var(--inkt)}
.kz-staal__naam{font-size:.875rem;line-height:1.2;color:var(--grijs1)}
.kz-schemas{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.kz-schemas li{display:grid;justify-items:center;gap:6px;font:500 .875rem/1.2 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs1)}
@media (min-width:768px){.kz-schemas li{font-size:.75rem}}
.kz-schemas svg{width:56px;height:46px;fill:none;stroke:var(--inkt);stroke-width:1.4}
.kz-glas{fill:rgba(var(--goud-rgb),.10);stroke-width:1}
.kz-streep{stroke:var(--kz-licht-goud);stroke-width:.9;stroke-dasharray:2.5 2}
.kz-pijl{stroke:var(--kz-licht-goud);stroke-width:1.2}
.kz-lijstbalk{display:grid;grid-template-columns:auto minmax(0,1fr) 18px;align-items:center;gap:16px;min-height:60px;margin-top:22px;padding:0 20px;
  background:var(--inkt);color:var(--rijst);text-decoration:none;box-shadow:inset 0 0 0 4px var(--inkt),inset 0 0 0 5px rgba(var(--goud-rgb),.55)}
.kz-lijstbalk__label{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--goud)}
@media (min-width:768px){.kz-lijstbalk__label{font-size:.75rem;letter-spacing:.3em}}
.kz-lijstbalk__waarde{justify-self:end;font:400 1rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.kz-lijstbalk .s-ico{width:18px;height:18px;color:var(--goud);transition:transform var(--duur-kort) var(--ease)}
.kz-lijstbalk:hover .s-ico{transform:translateX(3px)}
.kz-lijstbalk:focus-visible{outline:2px solid var(--dgoud);outline-offset:3px}

.kz-model{margin-top:clamp(36px,4.4vw,56px);padding:clamp(24px,3vw,34px) clamp(14px,3vw,36px) clamp(24px,3vw,32px)}
.kz-model__kop{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;margin:-10px 0 18px}
.kz-model__kop .s-kicker,.kz-model__kop p{margin:0}
.kz-model__link{margin-left:auto}
.kz-model__tekst{font-size:.9375rem;color:var(--grijs1)}
.kz-model__inzetten{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px;margin:0;padding:0}
@media (min-width:900px){.kz-model__inzetten{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kz-groepen__alle{margin:14px 0 0}
@media (max-width:767px){.kz-model{display:none}}
.kz-model__inzetten li{display:grid;justify-items:center;text-align:center;gap:4px}
.kz-inzet{--d:88px;margin-bottom:10px}
@media (min-width:768px){.kz-inzet{--d:112px}}
.kz .s-inzet picture{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.kz .s-inzet img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:50% 45%;border-radius:50%}
.kz-oog__medaillon img{object-position:50% 38%}
.kz-inzet img{transform:scale(1.18)}
.kz-model__naam{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.18em;padding-left:.18em;text-transform:uppercase;color:var(--inkt)}
.kz-model__code{font:400 .875rem/1.2 var(--f-mono);color:var(--grijs1)}
.kz-model__plek{font-family:var(--f-tekst);font-weight:400}
@media (min-width:768px){.kz-model__naam,.kz-model__code{font-size:.8125rem}}
.kz-verder{margin:22px 0 0}
.kz-verder--midden{text-align:center}

/* ================================================================ 叁 HET HUIS RONDOM (p4) */
.kz-rondom__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1024px){.kz-rondom__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:44px;align-items:start}}
.kz-rondom__band{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.kz-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid rgba(var(--dgoud-rgb),.35)}
@media (min-width:768px){.kz-tabs{display:flex;gap:4px}}
.kz-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 12px;border:0;background:none;cursor:pointer;
  font:500 .875rem/1 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs1);-webkit-tap-highlight-color:transparent}
@media (min-width:768px){.kz-tab{padding:0 16px 0 10px;font-size:.8125rem;letter-spacing:.2em}}
.kz-tab::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--goud);transform:scaleX(0);transition:transform .3s var(--ease)}
.kz-tab[aria-selected=true]{color:var(--inkt)}
.kz-tab[aria-selected=true]::after{transform:scaleX(1)}
.kz-tab:hover{color:var(--inkt)}
.kz-tab:focus-visible{outline:2px solid var(--dgoud);outline-offset:-2px}
.kz-tab__kalli{width:20px;height:20px;flex:none;background:currentColor;opacity:.62;-webkit-mask:var(--k) center/contain no-repeat;mask:var(--k) center/contain no-repeat}
.kz-tab[aria-selected=true] .kz-tab__kalli{background:var(--rood);opacity:1}
.kz-tab--voor{--k:url('../../kit/svg/kalli/qian.svg?v=10bceaff')}
.kz-tab--achter{--k:url('../../kit/svg/kalli/hou.svg?v=b407e67f')}
.kz-tab--links{--k:url('../../kit/svg/kalli/zuo.svg?v=864e29c8')}
.kz-tab--rechts{--k:url('../../kit/svg/kalli/you.svg?v=ee723f07')}
@media (max-width:767px){.kz-tab{flex-direction:column;gap:3px;min-height:56px;padding:6px 2px;letter-spacing:.1em}.kz-tab__kalli{width:18px;height:18px}}
.kz-gevels{position:relative;aspect-ratio:var(--ar);margin-top:18px}
@media (max-width:767px){
  .kz-gevels{margin-inline:-14px}
  .kz-gevel .kz-pin{width:30px;height:30px;font-size:.875rem;translate:-50% calc(-100% - 16px)}
  .kz-gevel .kz-pin::before{height:20px}
  .kz-gevel .kz-pin::after{inset:-7px}
}
.kz-gevels__zon{position:absolute;left:50%;top:44%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(250,238,204,.85) 0,rgba(244,226,180,.7) 44%,rgba(235,211,150,.36) 63%,rgba(226,196,124,0) 70.5%)}
.kz-gevel{position:absolute;inset:0;--kz-richting:1}
.kz-gevel__vlak{position:relative;width:100%;height:100%}
.kz-gevel__vlak > picture{position:absolute;inset:0}
.kz-gevel__vlak img{width:100%;height:100%;object-fit:contain}
.kz-gevel .s-pins{z-index:2}
.kz-rondom__raster.is-js .kz-gevel{opacity:0;transform:translate3d(calc(var(--kz-richting,1) * 18px),0,0);transition:opacity .5s var(--s-ease-inkt),transform .6s var(--s-ease-inkt)}
.kz-rondom__raster.is-js .kz-gevel.is-actief{opacity:1;transform:none}
.kz-rondom__raster.is-js .kz-gevel.is-weg{opacity:0;transform:translate3d(calc(var(--kz-richting,1) * -18px),0,0)}
.kz-rondom__raster.is-js .kz-gevel.is-binnen{transition:none}
.kz-gevel[hidden]{display:block;visibility:hidden}
.kz-gevel[hidden] .s-pin{display:none}
.kz-gevel .s-pin.is-actief{background:radial-gradient(circle at 38% 32%,#E46A5B,var(--rood) 62%,#7E1F17);border-color:#7E1F17;color:var(--zegeltekst)}
.kz-rondom__noot{margin:8px 0 0;text-align:center}
.kz-rondom__zij{display:grid;align-content:start}
.kz-legenda{list-style:none;margin:0;padding:0}
.kz-legenda li{border-bottom:1px solid rgba(var(--dgoud-rgb),.22)}
.kz-leg{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;gap:0 12px;width:100%;min-height:46px;padding:6px 8px 6px 6px;border:0;background:none;
  text-align:left;cursor:pointer;color:var(--inkt2);font:400 .9375rem/1.25 var(--f-tekst);position:relative;-webkit-tap-highlight-color:transparent}
.kz-leg::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--goud);transform:scaleY(0);transition:transform .25s var(--ease)}
.kz-leg[aria-pressed=true]{background:rgba(var(--goud-rgb),.10);color:var(--inkt)}
.kz-leg[aria-pressed=true]::before{transform:scaleY(1)}
.kz-leg:hover{background:rgba(var(--goud-rgb),.07)}
.kz-leg:focus-visible{outline:2px solid var(--dgoud);outline-offset:-2px}
.kz-leg__nr{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#F6E7BD,var(--goud) 58%,var(--kz-licht-goud));
  box-shadow:inset 0 0 0 1px var(--kz-licht-goud),inset 0 0 0 3px rgba(var(--rijst-rgb),.45);font:400 .8125rem/1 var(--f-mono);color:var(--inkt)}
@media (max-width:767px){.kz-leg__nr{font-size:.875rem;width:28px;height:28px}}
.kz-leg .s-codelabel{justify-self:start;min-width:52px;justify-content:center;text-transform:none}
.kz-leg__naam{min-width:0}
.kz-leg__maat{font:400 .875rem/1 var(--f-mono);color:var(--grijs1);white-space:nowrap}
.kz-minis{margin-top:20px}
.kz-mini{display:grid;grid-template-columns:132px minmax(0,1fr);gap:4px 18px;align-items:center}
@media (min-width:768px){.kz-mini{grid-template-columns:176px minmax(0,1fr)}}
.kz-mini.is-in{animation:kz-mini .45s var(--s-ease-inkt)}
@keyframes kz-mini{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kz-mini__beeld{margin:0;aspect-ratio:4/3;padding:4px;background:var(--rijst);box-shadow:0 0 0 1px var(--lijn-goud),0 6px 16px rgba(var(--inkt-rgb),.12)}
.kz-mini__beeld picture,.kz-mini__beeld img{display:block;width:100%;height:100%;object-fit:cover}
.kz-mini__tekst{display:grid;gap:2px;justify-items:start;min-width:0}
.kz-mini__titel{margin:0;font:500 1rem/1.2 var(--f-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--inkt)}
.kz-mini__meta{margin:0;font:400 .875rem/1.3 var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--grijs2)}
@media (min-width:768px){.kz-mini__meta{font-size:.75rem}}
.kz-mini__maat{margin:6px 0 0;font:400 .9375rem/1.2 var(--f-mono);color:var(--inkt);white-space:nowrap}
.kz-mini .s-pijllink{margin-top:2px}
.kz-rondom__knop{margin-top:24px}
@media (max-width:1023px){.kz-rondom__knop{width:100%}}
@media (min-width:1024px){.kz-rondom__knop{justify-self:start}}

/* ================================================================ 肆 ROUTE (p15) — inktkaart (Natural Earth 1:50m) + bewegende laag */
.kz-route__kaart{position:relative;margin:0 -8px}
@media (min-width:1024px){.kz-route__kaart{margin:0 -28px}}
.kz-kaart{position:relative}
.kz-kaart__venster{position:relative}
.kz-kaart__doek{position:relative;aspect-ratio:1783/1000;width:100%}
.kz-kaart__inkt{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 92%,transparent);mask-composite:intersect}
.kz-kaart__inkt,.kz-kaart__inkt img,.kz-kaart__lijnen{position:absolute;inset:0;width:100%;height:100%;display:block}
.kz-kaart__lijnen{overflow:visible}
.kz-kaart__spoor{fill:none;stroke:var(--kz-licht-goud);stroke-width:1.6;stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.55}
.kz-kaart__route{fill:none;stroke:var(--rood);stroke-width:2.6;stroke-dasharray:9 7;stroke-linecap:round}
.kz-kaart__maskerpad{fill:none;stroke:#fff;stroke-width:16;stroke-dasharray:1000;stroke-dashoffset:0}
.kz-kaart.is-scroll .kz-kaart__maskerpad{stroke-dashoffset:1000}
.kz-kaart__schip{position:absolute;left:12.6%;top:18%;z-index:3;width:46px;height:26px;margin:-22px 0 0 -23px;pointer-events:none;
  transform:rotate(var(--hoek,0deg)) scaleX(var(--zijde,-1));transform-origin:50% 80%}
.kz-kaart__schip[style*=translate]{left:0;top:0}   /* met JS: positie via translate (zie landing.js) */
.kz-kaart__schip svg{display:block;width:100%;height:100%;overflow:visible}
@media (prefers-reduced-motion:no-preference){.kz-kaart__kielzog{animation:kz-golf 2.4s linear infinite}}
@keyframes kz-golf{to{transform:translateX(-12px)}}
.kz-kaart__foshan{position:absolute;left:var(--fx);top:var(--fy);z-index:3;width:24px;height:24px;margin:-12px 0 0 -12px}
.kz-kaart__foshan::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(var(--dgoud-rgb),.7);box-shadow:0 0 0 4px rgba(var(--rijst-rgb),.6)}
.kz-kaart__zegel{display:block;width:24px;height:24px;rotate:-4deg}
.kz-kaart__label{position:absolute;z-index:3;display:grid;gap:2px;text-shadow:var(--kz-halo);pointer-events:none}
/* elk label op een vrij stuk papier (zoals de offerte): zachte cartouche, kustlijnen verdwijnen eronder */
.kz-kaart__label::before,.kz-kaart__zee::before{content:"";position:absolute;inset:-16px -30px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--rijst-rgb),.96) 70%,rgba(var(--rijst-rgb),0))}
.kz-kaart__zee--2r{white-space:normal;width:min-content;text-align:center;line-height:1.15}
.kz-kaart__label b{font:500 .9375rem/1.1 var(--f-kop);letter-spacing:.26em;text-transform:uppercase;color:var(--inkt)}
.kz-kaart__label small{font:500 .75rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--dgoud)}
/* Foshan: label links van de marker, 12 px vrij van de ring */
.kz-kaart__label--foshan{right:calc(100% - var(--fx) + 12px + 21px);top:var(--fy);translate:0 -58%;justify-items:end;text-align:right}
.kz-kaart__zh{font:400 1.5rem/1 var(--f-kalli);color:var(--rood);letter-spacing:.06em}
.kz-kaart__aankomst{position:absolute;left:var(--ax);top:var(--ay);z-index:3;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--rijst);box-shadow:inset 0 0 0 2px var(--inkt),0 0 0 4px rgba(var(--rijst-rgb),.8),0 0 0 5px rgba(var(--dgoud-rgb),.8)}
.kz-kaart__aankomst::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--rood);transform:scale(0);transition:transform .4s var(--s-ease-stempel)}
.kz-kaart.is-aangekomen .kz-kaart__aankomst::after,.kz-kaart:not(.is-scroll) .kz-kaart__aankomst::after{transform:scale(1)}
.kz-kaart__label--nl{left:calc(var(--ax) + 20px);top:var(--ay);translate:0 -50%;justify-items:start;text-align:left}
.kz-kaart__zee{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;z-index:2;isolation:isolate;white-space:nowrap;pointer-events:none;
  font:italic 400 1rem/1 var(--f-serif);letter-spacing:.06em;color:rgba(var(--inkt-rgb),.55);text-shadow:var(--kz-halo)}
/* NL-loep: papierkleurig medaillon met de landsgrens; labels buiten de contour */
.kz-kaart__loep{position:relative;margin:18px auto 0;display:grid;justify-items:center;gap:10px;width:max-content;max-width:100%}
.kz-kaart__loepbeeld{position:relative;display:block;width:200px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--rijst);
  box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.8),0 0 0 6px var(--rijst),0 0 0 7px rgba(var(--dgoud-rgb),.5),0 16px 30px -16px rgba(var(--inkt-rgb),.45)}
.kz-kaart__loepbeeld img{position:absolute;left:50%;top:50%;width:132%;height:auto;max-width:none;translate:-52% -50%}
.kz-kaart__nlpunt{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%}
.kz-kaart__nlpunt--reek{left:calc(50% + (var(--rx) - 50%) * 1.32 - 2%);top:var(--ry);background:var(--rood);box-shadow:0 0 0 3px var(--rijst),0 0 0 4px var(--rood)}
.kz-kaart__nlpunt--aankomst{left:calc(50% + (var(--nx) - 50%) * 1.32 - 2%);top:var(--ny);background:var(--rijst);box-shadow:inset 0 0 0 2px var(--inkt)}
.kz-kaart__loep figcaption{display:grid;justify-items:center;gap:2px;text-align:center}
.kz-kaart__loep figcaption{text-shadow:var(--kz-halo)}
.kz-kaart__loep figcaption b{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.26em;text-transform:uppercase;color:var(--inkt)}
.kz-kaart__loep figcaption span{font:italic 400 1rem/1.3 var(--f-serif);color:var(--grijs1)}
.kz-kaart__onderschrift{margin:10px 0 0;text-align:center}
.kz-kaartinzet{display:none}
@media (min-width:768px){
  /* loep in het lege vlak boven Afrika (Sahara): verschijnt bij aankomst */
  .kz-kaart__loep{position:absolute;left:8%;top:55%;margin:0;z-index:4;transition:opacity .5s var(--ease),transform .6s var(--s-ease-inkt)}
  .kz-kaart.is-scroll:not(.is-aangekomen) .kz-kaart__loep{opacity:0;transform:scale(.7) translateY(10px)}
  .kz-kaart__loepbeeld{width:clamp(150px,15vw,200px)}
}
@media (min-width:1024px){
  .kz-kaartinzet{position:absolute;right:3%;top:5%;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;row-gap:4px;align-items:start;width:330px;pointer-events:none}
  .kz-kaartinzet__beeld{--d:112px;grid-row:1 / span 2}
  .kz-kaartinzet__label{align-self:end;margin-top:20px;font:500 .8125rem/1.2 var(--f-kop);letter-spacing:.28em;text-transform:uppercase;color:var(--dgoud)}
  .kz-kaartinzet__tekst{font:italic 400 1.0625rem/1.35 var(--f-serif);color:var(--inkt2);text-shadow:var(--kz-halo)}
  .kz-kaartinzet__label{text-shadow:var(--kz-halo)}
  .kz-kaartinzet::before{content:"";position:absolute;inset:-30px -40px -30px -30px;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(var(--rijst-rgb),.92) 40%,rgba(var(--rijst-rgb),0) 72%)}
}
/* mobiel: zonder beweging de hele route in één uitsnede (volle breedte). Met beweging (.is-pan, landing.js) blijft de kaart staan
   terwijl u scrolt en pant hij mee met het schip van Foshan naar Nederland (transform op het doek, 60 fps); een fasebalk benoemt het moment. */
.kz-kaart__plak{position:relative}
.kz-kaart__plakker{position:relative}
.kz-kaart__baan{display:none}
.kz-kaart__fase{display:none}
.kz-route__medaillons{display:contents}
.kz-nlinzet{display:none}
@media (max-width:767px){
  .kz-route__kaart{margin:0 -18px}
  .kz-kaart__loep{display:none}
  .kz-kaart__label b{font-size:.875rem;letter-spacing:.2em}
  .kz-kaart__label small{font-size:.875rem;letter-spacing:.12em}
  .kz-kaart__zh{font-size:1.125rem}
  .kz-kaart__zee{display:none}
  .kz-kaart__label--foshan small,.kz-kaart__label--nl small{display:none}
  .kz-kaart__schip{width:34px;height:20px;margin:-17px 0 0 -17px}
  .kz-kaart__onderschrift{padding-inline:18px}
  .kz-kaart.is-pan .kz-kaart__label small{display:block}
  .kz-kaart.is-pan .kz-kaart__zee{display:block;font-size:.9375rem}
  .kz-kaart__plak.is-pan .kz-kaart__plakker{position:sticky;top:calc(var(--s-kop-h) + env(safe-area-inset-top) + 8px);z-index:1}
  .kz-kaart__plak.is-pan .kz-kaart__baan{display:block;height:110svh}
  /* venster = het hele scherm tussen kop en actiebalk; het doek toont de band lat 64…6 (y 120–960), waar de route en beide eindpunten liggen */
  .kz-kaart.is-pan .kz-kaart__venster{height:max(420px,calc(100svh - var(--s-kop-h) - env(safe-area-inset-top) - 92px));overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent);mask-composite:intersect}
  /* eindkeuring: ingezoomd (1,4×) en de camera volgt het schip in x én y, zodat er altijd kust en zee in beeld zijn (nooit een scherm leeg binnenland) */
  .kz-kaart.is-pan .kz-kaart__doek{height:calc(140% * 1000 / 840);width:auto;will-change:transform;transform:translate3d(var(--kz-pan,0px),var(--kz-pany,-30%),0)}
  .kz-kaart__plak.is-pan .kz-kaart__fase{position:absolute;left:18px;right:18px;bottom:10px;z-index:4;display:flex;align-items:center;gap:12px;margin:0;padding:10px 14px;
    background:var(--rijst);box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.55),0 0 0 4px var(--rijst),0 0 0 5px rgba(var(--dgoud-rgb),.3),0 10px 24px -12px rgba(var(--inkt-rgb),.35)}
  .kz-kaart__fasenr{flex:none;display:grid;place-items:center;width:28px;height:28px;background:url('../../kit/svg/zegel/leeg.svg?v=648606df') center/100% 100% no-repeat;
    color:var(--rijst);font:500 .875rem/1 var(--f-mono)}
  .kz-kaart__fasetekst{font:italic 400 1.0625rem/1.3 var(--f-serif);color:var(--inkt)}
  /* ronde 3 (CLS 0): alle drie de fasezinnen staan in één rastercel; de balk is zo hoog als de langste en groeit nooit */
  .kz-kaart__fasetekst{display:grid}.kz-kaart__fasetekst > *{grid-area:1/1}.kz-kaart__fasemaat{visibility:hidden}
  /* medaillons onder de kaart: het schip en de aankomst in Brabant, naast elkaar */
  .kz-route__medaillons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin:26px 0 4px}
  .kz-kaartinzet,.kz-nlinzet{display:grid;justify-items:center;align-content:start;gap:6px;text-align:center}
  .kz-kaartinzet__beeld,.kz-nlinzet__beeld{--d:120px;margin-bottom:8px}
  .kz-kaartinzet__label{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
  .kz-kaartinzet__tekst{font:italic 400 1rem/1.35 var(--f-serif);color:var(--inkt2);text-wrap:balance}
}
@media (min-width:768px) and (max-width:1023px){.kz-kaart__plak + .kz-route__medaillons{display:contents}}
.kz-nlinzet__beeld{position:relative}
.kz-nlinzet__beeld img{transform:scale(1.06)}
.kz-nlinzet__punt{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--rood);box-shadow:0 0 0 3px var(--rijst),0 0 0 4px var(--rood)}
.kz-nlinzet__punt--aankomst{background:var(--rijst);box-shadow:inset 0 0 0 2px var(--inkt)}
.kz-stappen{margin-top:clamp(20px,3vw,32px)}
.kz-stappen > li{align-content:start}
@media (min-width:1024px){
  .kz-stappen{--ring:60px;gap:10px}
  .kz-stappen > li::before{width:calc(100% + 10px)}
  .kz-stappen .s-stappen-ring__titel{min-height:0}
  .kz-stappen .s-stappen-ring__tekst{max-width:18ch;margin-inline:auto;font-size:.875rem}
  .kz-stappen .s-stappen-ring__moment{white-space:nowrap;letter-spacing:.2em;font-size:.75rem}
}
/* actieve stap: dezelfde ringen als de andere zes + een gouden gloed (nooit een vale ring) */
.kz-stappen > li.is-actief .s-ring{box-shadow:inset 0 0 0 2px var(--dgoud),inset 0 0 0 5px var(--goudlicht),inset 0 0 0 6px var(--dgoud),0 0 0 4px rgba(var(--goud-rgb),.28)}

/* ================================================================ 伍 AFSPRAKEN (p16) */
.kz-afspraken__boven{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1024px){.kz-afspraken__boven{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:48px;align-items:center}
  .kz-afspraken__boven .kz-afspraken__lijsten{grid-template-columns:minmax(0,1fr)!important;gap:30px}}
.kz-papieren{margin:0 -6px;display:grid;gap:6px}
.kz-papieren img{width:100%;height:auto}
.kz-papieren .s-bijschrift{margin:0;text-align:center}
.kz-papieren__knop{justify-self:center;min-height:44px;border:0;background:none;cursor:pointer;padding:0}
.kz-papieren picture{transition:transform .6s var(--s-ease-inkt)}
@media (pointer:fine){.kz-papieren:hover picture{transform:perspective(1400px) rotateX(4deg) rotateY(-5deg) translateY(-4px)}}
/* de prijsopgave van dichtbij: kantelt het beeld in (3D), papier op een donkere wade */
.kz-blad{width:min(92vw,600px);max-height:92svh;padding:0;border:0;background:none;overflow:visible;color:var(--inkt)}
.kz-blad::backdrop{background:rgba(23,27,54,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.kz-blad__balk{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.kz-blad__titel{margin:0;font:500 .875rem/1.2 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--rijst)}
.kz-blad__sluit{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(214,178,98,.7);border-radius:50%;background:rgba(23,27,54,.4);color:var(--rijst);font:300 1.75rem/1 var(--f-kop);cursor:pointer}
.kz-blad__vel{max-height:calc(92svh - 120px);overflow:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);background:#F8F3E8}
.kz-blad__vel img{display:block;width:100%;height:auto}
.kz-blad__noot{margin:10px 0 0;font:italic 400 1rem/1.4 var(--f-serif);color:rgba(var(--rijst-rgb),.9);text-align:center}
@media (prefers-reduced-motion:no-preference){.kz-blad[open] .kz-blad__vel{animation:kz-blad .7s var(--s-ease-inkt) both}}
@keyframes kz-blad{from{opacity:0;transform:perspective(1600px) rotateX(18deg) rotateZ(-3deg) translateY(40px) scale(.92)}to{opacity:1;transform:none}}
@media (min-width:1024px){.kz-papieren{margin:-10px -20px 0 -24px}}
.kz-afspraken__lijsten{display:grid;gap:28px}
.kz-niet-kop{color:var(--rood)}
.kz-afspraken__onder{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:clamp(28px,3.4vw,44px)}
.kz-afspraken__tabel{margin:0}
.kz-afspraken__teken{display:grid;justify-items:center;align-content:center;gap:12px;text-align:center}
.kz-afspraken__zegel{width:64px;height:64px;rotate:-4deg}
.kz-afspraken__zin{margin:0;max-width:22ch;font:italic 400 1.25rem/1.35 var(--f-serif);color:var(--inkt2)}
.kz-afspraken__knop{margin-top:4px}
@media (min-width:1024px){
  .kz-afspraken__onder{grid-template-columns:minmax(0,1fr) 340px;column-gap:48px;align-items:center}
  .kz-afspraken__knop{white-space:nowrap}
  .kz-afspraken__teken{padding-left:40px;border-left:1px solid rgba(var(--dgoud-rgb),.3);min-height:100%}
}

/* ================================================================ 陆 VRAGEN — medaillon; tak steekt over de kaderlijn (zoals de omslag) */
.kz-vragen__houder{position:relative}
.kz-vragen__tak{z-index:1;top:-20px;right:24px;width:210px;opacity:.85}   /* binnen het kader, achter 诚信 */
/* .kz-vragen__bloesem verwijderd (ronde 3): het lege blok stond in de flow en gaf ± 420 px leeg papier vóór het slot */
@media (max-width:767px){.kz-vragen__tak,.kz-vragen__bloesem{display:none!important}}
.kz-vragen__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media (min-width:1024px){.kz-vragen__raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:64px;align-items:center}}
.kz-vragen__medaillon{margin:0;display:grid;justify-items:center;gap:14px;text-align:center}
.kz-medaillon{--d:200px;padding:7px;box-shadow:0 0 0 1px rgba(176,138,50,.8),0 0 0 6px var(--rijst),0 0 0 7px var(--lijn-goud),0 18px 36px -14px rgba(var(--inkt-rgb),.35)}
@media (min-width:768px){.kz-medaillon{--d:260px}}
@media (min-width:1024px){.kz-medaillon{--d:300px}}
.kz-vragen__medaillon .s-bijschrift{margin:0;max-width:30ch}
.kz-medaillon picture{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.kz-medaillon img{transform:scale(1.12)}
@media (max-width:767px){.kz-medaillon{--d:168px}.kz-vragen__medaillon .s-bijschrift{display:none}}
.kz-faq summary{grid-template-columns:30px minmax(0,1fr) 28px;gap:12px}
.kz-faq summary > span:nth-child(2){text-wrap:balance}
.kz .s-bijschrift,.kz-slot__tekst,.kz-kop__lead{text-wrap:pretty}
.kz-faq__nr{font:400 .875rem/1 var(--f-mono);color:var(--dgoud)}
.kz-faq details[open] .kz-faq__nr{color:var(--rood)}
.kz-faq .s-faq__antwoord{margin-left:42px;padding-left:16px;border-left:1px solid var(--lijn-goud)}
@media (max-width:767px){.kz-faq .s-faq__antwoord{margin-left:12px}}

/* ================================================================ SLOT (p17) — eigen vel; onderaan een bewust nachtpaneel binnen gouden lijnen */
.kz-slot{padding-top:clamp(14px,2vw,28px);padding-bottom:clamp(20px,3vw,40px);text-align:center}
.kz-slot__vel{padding:22px 14px 22px;overflow:clip}
@media (min-width:768px){.kz-slot__vel{padding:40px 40px 30px}}
@media (min-width:1024px){.kz-slot__vel{padding:44px 48px 30px}}
.kz-slot__tekstblok{display:grid;justify-items:center;padding:clamp(34px,4vw,52px) 6px 0}
.kz-slot .s-slot__logo{display:block;width:80px;height:80px}
.kz-slot .s-slot__citaat{max-width:40ch}
.kz-slot__titel{text-wrap:balance}
.kz-slot__tekst{max-width:56ch;margin:14px auto 0;color:var(--grijs1)}
.kz-slot__wie{margin-right:8px;font:400 .9375rem/1 var(--f-tekst);color:var(--grijs1)}
.kz-slot__contact{gap:0 22px}
@media (max-width:767px){.kz-slot__contact{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:28px}
  .kz-slot__contact a{display:grid;justify-items:center;gap:2px;min-height:48px;padding:4px 0}
  .kz-slot__contact .kz-slot__wie{margin:0;font-size:.875rem}
  .kz-slot__contact .kz-slot__mail{grid-column:1 / -1;display:inline-flex;justify-self:center}}
.kz-slot__contact .kz-slot__mail{font:600 1rem/1.2 var(--f-tekst);letter-spacing:0}
.kz-slot__folio{text-align:left}

/* het nachtpaneel: een plaat binnen het vel (het vel loopt er met zijn eigen lijnen omheen), met een eigen fijne dubbele goudlijn
   en vier gelijke hoekornamenten; maan, sterren, twee inktbergruggen, mist als horizon en een zachte weerspiegeling op de grond */
.kz-nacht{position:relative;margin:0;aspect-ratio:1/1.05;overflow:hidden;isolation:isolate;background:var(--kz-nacht);
  box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.45),0 28px 50px -30px rgba(23,27,54,.7)}
@media (min-width:600px){.kz-nacht{aspect-ratio:16/10}}
@media (min-width:1024px){.kz-nacht{aspect-ratio:2/1}}
.kz-nacht > *{position:absolute;pointer-events:none}
.kz-nacht svg{max-width:none}
.kz-nacht__hemel{inset:0;background:
  radial-gradient(ellipse 60% 40% at 50% 78%,rgba(190,120,80,.30),rgba(190,120,80,0) 70%),
  linear-gradient(180deg,#0F1330 0%,#171C3D 34%,#232852 60%,#2F3159 76%,#2A2D52 100%)}
.kz-nacht__sterren{inset:0 0 45% 0;opacity:.7;background-image:
  radial-gradient(1px 1px at 12% 18%,#F6EBD0 50%,transparent 51%),radial-gradient(1px 1px at 27% 8%,#F6EBD0 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 38% 26%,#F6EBD0 50%,transparent 51%),radial-gradient(1px 1px at 55% 12%,#F6EBD0 50%,transparent 51%),
  radial-gradient(1px 1px at 63% 32%,#F6EBD0 50%,transparent 51%),radial-gradient(1.3px 1.3px at 86% 22%,#F6EBD0 50%,transparent 51%),
  radial-gradient(1px 1px at 92% 9%,#F6EBD0 50%,transparent 51%),radial-gradient(1px 1px at 6% 40%,#F6EBD0 50%,transparent 51%),
  radial-gradient(1px 1px at 46% 6%,#F6EBD0 50%,transparent 51%),radial-gradient(1.2px 1.2px at 74% 14%,#F6EBD0 50%,transparent 51%)}
.kz-nacht__maan{right:13%;top:14%;width:clamp(40px,5vw,72px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,#FBF4E2 0,#F1E4C2 55%,#E6D3A6 70%,#E6D3A6 100%);
  box-shadow:0 0 30px 8px rgba(246,232,196,.22),0 0 90px 30px rgba(246,232,196,.10)}
.kz-nacht__berg{left:-6%;width:112%;max-width:none}
.kz-nacht__berg--1{bottom:-2%;height:66%;fill:#2E3462;opacity:.9}
.kz-nacht__berg--2{bottom:8%;height:32%;fill:#1E2346}
/* de grond: een brede, licht gewelfde vlakte waar het huis op staat (geen zwevend huis); de bovenrand lost op in mist */
.kz-nacht__grond{left:-12%;right:-12%;bottom:-2px;height:24%;z-index:1;border-radius:50% 50% 0 0 / 34% 34% 0 0;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,#3A3F6E 0,#262B52 45%,#171B38 100%);box-shadow:0 -10px 24px 6px rgba(120,120,170,.16)}
.kz-nacht__poel{left:24%;right:18%;bottom:6%;height:18%;z-index:1;border-radius:50%;opacity:0;transition:opacity 2s var(--s-ease-inkt) .6s;background:radial-gradient(closest-side,rgba(255,190,110,.32),rgba(255,190,110,0) 100%)}
.kz-nacht.is-aan .kz-nacht__poel,html:not(.js-beweeg) .kz-nacht__poel{opacity:1}
.kz-nacht__mist{left:-20%;right:-20%;border-radius:50%;filter:blur(18px);background:radial-gradient(closest-side,rgba(var(--rijst-rgb),.15),rgba(var(--rijst-rgb),0) 100%)}
.kz-nacht__mist--1{bottom:34%;height:20%}
.kz-nacht__mist--2{bottom:12%;height:22%;left:-30%;right:10%}
.kz-nacht__mist--3{bottom:-8%;height:20%;z-index:2;background:radial-gradient(closest-side,rgba(var(--rijst-rgb),.14),rgba(var(--rijst-rgb),0) 100%)}
@media (prefers-reduced-motion:no-preference){
  .kz-nacht__mist--1{animation:kz-drijf 22s ease-in-out infinite alternate}
  .kz-nacht__mist--2{animation:kz-drijf 28s ease-in-out -9s infinite alternate-reverse}
}
@keyframes kz-drijf{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,0,0)}}
.kz-nacht__huis{left:50%;bottom:9%;z-index:2;width:min(100%,780px);translate:-50% 0;
  -webkit-box-reflect:below -6px linear-gradient(transparent 76%,rgba(0,0,0,.14))}
@media (min-width:600px){.kz-nacht__huis{width:min(68%,780px);bottom:8%}}
.kz-nacht__huis picture,.kz-nacht__huis img{display:block;width:100%;height:auto}
.kz-nacht__licht{position:absolute;inset:0}
html.js-beweeg .kz-nacht__licht{opacity:0;transition:opacity 1.8s var(--s-ease-inkt) .3s}
html.js-beweeg .kz-nacht.is-aan .kz-nacht__licht{opacity:1}
/* fijne dubbele goudlijn met vier gelijke hoeken (het s-kader van het fundament, op nacht getint) */
.kz-nacht__kader{inset:12px;z-index:3;--h:30px;--lijn-buiten:rgba(214,178,98,.8);--lijn-binnen:rgba(214,178,98,.42)}
.kz-nacht__kader::before{filter:brightness(1.35)}
.kz-nacht__zegel{right:calc(12px + 6%);bottom:calc(12px + 7%);z-index:4;width:44px;height:44px;rotate:-4deg}
@media (min-width:768px){.kz-nacht__zegel{width:56px;height:56px}}
.kz .s-voet{margin-top:0}


/* ================================================================ REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .kz-gevel,.kz-tab::after{transition:none!important}
  .kz-rondom__raster.is-js .kz-gevel{transform:none!important}
  .kz-mini.is-in{animation:none}
  .kz-omslag [data-kz-diepte],[data-kz-zweef],[data-kz-nachtlaag]{transform:none!important}
  .kz-bloesem{display:none!important}
}
/* kicker: altijd één regel met ≥ 16 px lucht tot het binnenkader */
@media (max-width:440px){.kz-omslag__kicker{letter-spacing:.16em}}
@media (max-width:400px){.kz-omslag__kicker{letter-spacing:.1em}}
@media (max-width:767px){.kz-omslag__totaalzegel{top:-18px;right:26px;width:36px;height:36px}}
@media (max-width:389px){
  .kz-lijstbalk{gap:10px;padding:0 14px}.kz-lijstbalk__label{letter-spacing:.14em}.kz-lijstbalk__waarde{letter-spacing:0}
  .kz-omslag__totaal{padding:20px 16px 18px}
  .kz-omslag__knop{letter-spacing:.06em;padding-inline:10px}
  .kz-omslag__acties .s-pijllink{letter-spacing:.12em}
}
@media (max-width:359px){
  .kz-inzet{--d:76px}
  .kz-model{padding-inline:10px}
  .kz-model__inzetten{column-gap:6px}
}

/* ================================================================ MOBIEL COMPACT */
@media (max-width:767px){
  .kz-brief__citaat{font-size:1.25rem}
  .kz-brief__uitloop{margin-top:26px}
  .kz-groep__sub{display:none}
  .kz-groep{min-height:72px}
}

/* ================================================================ EINDKEURING — atmosfeer per hoofdstukvel (zoals elke PDF-pagina) en
   kalligrafie op PDF-formaat (± 120 px per teken op desktop). Lagen op lage dekking, nooit over een teken, kop of hoekornament. */
/* hoofdstukbalk en atmosfeer: zie eenheid.css (één opbouw voor alle pagina's) */
@media (min-width:1024px){.kz-vragen__tak{display:none}}
/* slot: inktnacht i.p.v. marineblauw — diep inkt naar warm bruingrijs, bergen in grijswaarden, maan in de goudtint van de zon, papiertextuur in multiply */
.kz{--kz-nacht:#1D1A17}
.kz-nacht{box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.45),0 28px 50px -30px rgba(29,26,23,.7)}
.kz-nacht::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply;opacity:.35;
  background:url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat}
.kz-nacht__hemel{background:radial-gradient(ellipse 60% 40% at 50% 78%,rgba(214,160,90,.26),rgba(214,160,90,0) 70%),
  linear-gradient(180deg,#141210 0%,#1D1A17 36%,#2A2520 62%,#3A3229 82%,#342D25 100%)}
.kz-nacht__maan{background:radial-gradient(circle at 42% 40%,#F8E7B8 0,#EBCF83 55%,#DDBA62 74%,#C9A24B 100%);
  box-shadow:0 0 30px 8px rgba(235,207,131,.22),0 0 90px 30px rgba(235,207,131,.10)}
.kz-nacht__berg--1{fill:#3B3631}
.kz-nacht__berg--2{fill:#262220}
.kz-nacht__grond{background:radial-gradient(ellipse 60% 70% at 50% 0%,#4A4138 0,#302A24 45%,#1D1A17 100%);box-shadow:0 -10px 24px 6px rgba(200,170,120,.12)}
/* brief op de iPhone: de hele brief (hij is kort genoeg), groet ná de tekst; geen onnodige afbrekingen in linkse tekst; 龍 direct achter de naam */
@media (max-width:767px){
  .kz-brief__brief.is-ingekort .kz-brief__meer{display:block}
  .kz-brief__lees{display:none!important}
}
@media (max-width:440px){.kz-brief__brief .s-brief__tekst{hyphens:manual;-webkit-hyphens:manual}}
@media (max-width:559px){.kz-handtekening__zegel{right:auto;bottom:auto;left:calc(72px + 16px + 186px);top:2px;width:34px;height:34px}}
/* omslag mobiel: blaadjes vallen rechts van de tekstkolom en onder de tekstlaag; de zon begint lager zodat de ondertitel op papier staat */
@media (max-width:767px){
  .kz-omslag__bloesem{z-index:1;width:34vw;right:4px;top:120px}
  .kz-omslag__kicker,.kz-omslag h1{z-index:3}
  .kz-omslag__zon{top:50%}
}
@media (max-width:400px){.kz-omslag__tak{right:-60px;width:110px}}
/* renders lopen met een alfamasker in het papier uit (donkere vlakken worden transparant, niet zwart); de nevel is alleen nog een vleugje */
.kz-held__beeld img{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 97%);mask-image:linear-gradient(180deg,#000 72%,transparent 97%)}
.kz-held__nevel{opacity:.45}
/* hoofdstuk 3: de zon loopt bovenaan zacht uit onder de tablijn i.p.v. ertegen afgekapt te worden */
.kz-gevels__zon{top:47%;-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 22%);mask-image:linear-gradient(180deg,transparent 4%,#000 22%)}

/* held-regie (jury ronde 3): het omslagzegel stempelt via data-b="stempel"; de omhulling krijgt de maat van het zegel */
.kz-omslag__teken [data-b=stempel]{width:26px;rotate:-4deg}
.kz-omslag__teken [data-b=stempel] > .kz-omslag__zegel{width:100%;height:auto;rotate:0deg}
@media (min-width:1024px){.kz-omslag__teken [data-b=stempel]{width:30px}}