/* plekk.css — de gedeelde jas van plekk.studio (fase 3, #268). Laadt ná /plekk-tokens.css (2.0.0): kleuren, letter, maten en
   beweging komen daar vandaan. Bron: de goedgekeurde proto (proto/proto.css) en guide §5-§9; markup in partials/jas/.
   Wat hier staat, staat onder elke pagina in het nieuwe design: basis, knoppen en links, de header met het logo, het laadscherm,
   de hero in de mist, secties en koppen, het Plekk-kader, vragen, formulieren, de afsluiter en de footer in de nachtmist.
   het menu en de menu-overlay, Lenis (#281) en het startformulier (#282). Paginaspecifieke stijl staat in de pagina zelf of in een eigen
   bestand (de homepage: /assets/home.css).
   Hoofdstukken (§6.3): licht is de standaard. [data-chapter="nacht"] maakt een sectie nacht; plekk.js zet het ook op <html> zolang
   die sectie in beeld is, zodat het hele scherm in 0,5 s meekleurt. Zonder JS is alleen de sectie zelf nacht. */

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;background:var(--c-bg);scroll-padding-top:88px;
  transition:--c-bg 500ms var(--ease-page),--c-fg 500ms var(--ease-page),--c-fg-2 500ms var(--ease-page),--c-line 500ms var(--ease-page),
    --c-surface 500ms var(--ease-page),--c-acc 500ms var(--ease-page),--c-acc-vlak 500ms var(--ease-page)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Lenis (#281): zacht scrollen op desktop met een fijne aanwijzer; plekk.js zet hem aan. Uit zijn eigen lenis.css, plus: de browser mag niet
   ook nog eens zacht scrollen */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--c-bg);color:var(--c-fg);font-family:var(--f);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
h1,h2,h3,h4{margin:0;font-weight:400}
b,strong{font-weight:500}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
:focus-visible{outline:2px solid var(--c-fg);outline-offset:3px;border-radius:var(--r)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:300;background:var(--c-fg);color:var(--c-bg);padding:.6rem 1rem}
.defs{position:absolute;width:0;height:0;overflow:hidden}
[data-chapter="nacht"]:not(html){background:var(--c-bg);color:var(--c-fg)}

/* ---------- koppen ---------- */
.h2{font-size:var(--fs-h2);font-weight:var(--fw-licht);letter-spacing:var(--ls-kop);line-height:var(--lh-kop);text-wrap:balance;hyphens:manual}
.h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:1.15}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--c-fg-2)}

/* ---------- links en knoppen: één gebaar van 0,3 s ---------- */
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color var(--dur-2) var(--ease-snap)}
.link:hover{text-decoration-color:currentColor}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.95em 1.5em;background:var(--c-acc-vlak);color:var(--inkt);border:1px solid var(--c-acc-vlak);border-radius:var(--r);overflow:clip;
  font:500 1rem/1.2 var(--f);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-1) var(--ease-snap),color 300ms var(--ease-snap),border-color 300ms var(--ease-snap)}
.btn__fill{position:absolute;inset:0;background:var(--hov-bg);transform:scaleY(0);transform-origin:50% 100%;transition:transform 300ms var(--ease-move)}
.btn__label,.btn__arrow{position:relative}
.btn__arrow{display:inline-block;max-width:0;overflow:hidden;opacity:0;transition:max-width 300ms var(--ease-move),opacity 300ms var(--ease-snap),margin 300ms var(--ease-move)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--hov-fg);border-color:var(--c-fg)}
  .btn:hover .btn__fill{transform:scaleY(1)}
  .btn:hover .btn__arrow{max-width:1.4em;opacity:1;margin-left:.6em}
}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn--line{background:transparent;color:var(--c-fg);border-color:var(--c-fg)}
.btn--sm{min-height:40px;padding:.6em 1em;font-size:.9375rem}

/* ---------- header: transparant, verdwijnt bij omlaag en komt terug bij omhoog; het logo altijd linksboven (#160) ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:2rem;height:72px;padding:0 max(var(--gutter),calc((100% - var(--container)) / 2 + var(--gutter)));
  color:var(--c-fg);transition:transform var(--dur-3) var(--ease-move)}
.nav.is-scrolled{background:var(--c-bg)}
.nav.is-hidden{transform:translateY(-100%)}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f);font-weight:var(--fw-merk);font-variation-settings:'wdth' 125;font-stretch:125%;font-size:1.5rem;letter-spacing:-.04em;text-decoration:none;line-height:1;transition:opacity var(--dur-3) var(--ease-snap)}
.nav__mail{margin-left:auto;font-size:.9375rem;white-space:nowrap;text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat right 100%/0 1px;transition:background-size var(--dur-2) var(--ease-move)}
.nav__mail:hover{background-position:left 100%;background-size:100% 1px}
.nav nav + .nav__mail{margin-left:0}
/* de knop in de header verschijnt pas als de hoofdknop van de pagina uit beeld is, en wijkt boven het formulier en de footer:
   nooit twee oranje knoppen in één scherm (§6.2) */
.nav__cta{display:none}
html.cta-on:not(.end-on) .nav__cta{display:inline-flex}
@media (max-width:980px){
  .nav{height:60px;gap:1rem}
  html.cta-on:not(.end-on) .nav__mail{display:none}
  html.cta-on:not(.end-on) .nav__cta{margin-left:auto}
}
@media (max-width:420px){.nav__cta{font-size:.875rem;padding:.55em .8em}}
/* het menu (partials/jas/nav.html, nav-knoppen.html, menu.html): op pagina's met een menu. Een landing laat de plekken leeg (#272) */
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:1.75rem;list-style:none;font-size:.9375rem}
.nav ul a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat right 100%/0 1px;transition:background-size var(--dur-2) var(--ease-move)}
.nav ul a:hover,.nav ul a[aria-current]{background-position:left 100%;background-size:100% 1px}
/* #161: een zilveren contactknop (een ingevulde mail), zilver als het blokje van het logo */
.nav__contact{display:inline-flex;align-items:center;min-height:40px;padding:.55em 1.1em;border-radius:var(--r);font:500 .9375rem/1 var(--f);color:var(--inkt);text-decoration:none;white-space:nowrap;
  background:linear-gradient(115deg,#EEF1F4 0%,#D3D9DF 30%,#9AA5B1 48%,#EEF1F4 62%,#AEB7C1 82%,#D3D9DF 100%);background-size:220% 100%;background-position:0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.2),0 1px 2px rgba(18,17,16,.2);transition:background-position .7s var(--ease-settle),transform var(--dur-1) var(--ease-snap)}
.nav__contact:hover{background-position:100% 0}
.nav__contact:active{transform:scale(.97)}
.nav__menu{display:none;background:none;border:0;padding:.6rem 0;font:500 1rem var(--f);color:inherit;cursor:pointer}
@media (max-width:980px){
  .nav nav,.nav:has(.nav__menu) .nav__mail,html.cta-on .nav:has(.nav__menu) .nav__cta{display:none}
  .nav__contact{margin-left:auto;min-height:36px;padding:.5em .9em;font-size:.875rem}
  .nav__menu{display:block}
}
.menu{position:fixed;inset:0;z-index:45;background:var(--nacht);color:var(--nacht-fg);display:grid;align-content:center;padding:88px var(--gutter) var(--gutter);clip-path:inset(0 0 100% 0)}
.menu[hidden]{display:none}
.menu ul{list-style:none}
.menu a{text-decoration:none}
.menu .m{display:block;overflow:clip}
.menu .m > span{display:block;font-size:clamp(2.6rem,11vw,5rem);font-weight:var(--fw-licht);letter-spacing:-.04em;line-height:1.08}
.menu__meta{margin-top:2rem;color:var(--nacht-fg-2)}
html.menu-open .nav{background:transparent;color:var(--nacht-fg)}
html.menu-open .mk--nav .mk__frame{fill:url(#mk-staal)}

/* ---------- het logo (#69, #70, #133): kader met open hoek, het blokje; in de header altijd zilver, het kader inkt op licht en staal op nacht ---------- */
.mk{display:block;overflow:visible}
.mk__frame{fill:var(--c-fg)}
.mk__blk{fill:var(--acc-vlak);transform-box:fill-box;transform-origin:50% 50%}
.mk--nav .mk__blk{fill:url(#mk-zilver)}
html[data-chapter="nacht"] .mk--nav .mk__frame{fill:url(#mk-staal)}
.logo .mk{width:1.6rem;height:1.6rem}
/* landen bij scrollen: los bij scrollen, landt als je stopt; zakt een fractie door en veert terug (eenheden van de viewBox) */
.nav .mk__blk{transition:transform .7s cubic-bezier(.34,1.5,.64,1)}
.nav.mk-los .mk__blk{transform:translate(18px,-38px);transition:transform .3s cubic-bezier(.16,1,.3,1)}

/* ---------- laadscherm "lijn" (#223, #249): alleen met data-intro, één keer per sessie; vangnet: weg na 3,4 s hoe dan ook ---------- */
.loader{position:fixed;inset:0;z-index:200;display:none;place-items:center;animation:loader-weg .35s 3.4s forwards}
html.js:not(.hero-seen) .loader{display:grid}
@keyframes loader-weg{to{opacity:0;visibility:hidden}}
.ld{position:absolute;inset:0}
.ld__bg{position:absolute;inset:0;background:var(--bot)}
.ld__lijn{position:absolute;left:50%;top:42%;width:0;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,#5C6670,#9AA5B1 50%,#4A535C)}
.ld__lock{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.3333em;font-family:var(--f);font-weight:var(--fw-merk);font-variation-settings:'wdth' 125;font-stretch:125%;font-size:clamp(3.25rem,10vw,8rem);letter-spacing:-.04em;line-height:1;color:var(--inkt);white-space:nowrap;transform-origin:0 0;will-change:transform}
.ld__lock .mk{width:1.0667em;height:1.0667em}
.ld__lock .mk__frame{fill:var(--inkt);opacity:0}
.ld__lock .mk__blk{fill:url(#mk-zilver);opacity:0}
.ld__w{opacity:0}
.ld__w span{display:inline-block;text-align:center}
.loader.is-klaar{display:none!important}
html.ld-vlucht .nav .logo{opacity:0}
@media (prefers-reduced-motion:reduce){.loader{display:none!important}}

/* ---------- hero in de mist (licht, #123): label met de zilveren streep, de kop als zin (#82), de lede, de hoofdknop ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(72px + clamp(2rem,6vh,4rem));padding-bottom:clamp(3rem,7vh,5rem)}
.hero > .wrap{position:relative;z-index:1;width:100%}
.mist{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.hero.no-gl{background:radial-gradient(60% 50% at 70% 35%,rgba(158,163,168,.42),transparent 70%),radial-gradient(50% 45% at 25% 80%,rgba(158,163,168,.3),transparent 70%),var(--bot)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.kruimel{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,4vh,2.5rem);font-size:var(--fs-meta);color:var(--c-fg-2)}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline;text-underline-offset:.24em}
.hero__label{grid-column:1 / -1;display:flex;align-items:center;gap:.9rem;font-size:.9375rem;line-height:1.4}
.hero__label > span:last-child{text-wrap:balance}
.stripe{flex:none;display:block;width:40px;height:2px;background:linear-gradient(90deg,#9AA5B1,#D3D9DF 55%,#6E7985);transform-origin:0 50%}
.hero__zin{grid-column:1 / span 11;margin-top:clamp(1rem,3vh,2rem);font-weight:var(--fw-merk);font-variation-settings:'wdth' 125;font-stretch:125%;font-size:clamp(2.3rem,5.2vw,5rem);letter-spacing:-.04em;line-height:.98;max-width:13em;text-wrap:balance;hyphens:manual}
.hero__body{grid-column:1 / span 7;margin-top:clamp(1.25rem,2.6vh,1.75rem)}
.hero__sub{font-size:var(--fs-lede);line-height:1.5;color:var(--c-fg-2);max-width:34em}
.hero__sub + .hero__sub{margin-top:.75rem}
.hero__sub strong{color:var(--c-fg)}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin-top:clamp(1.75rem,3.6vh,2.25rem)}
@media (max-width:900px){.hero__zin,.hero__body{grid-column:1 / -1}}
/* de korte hero van een kernpagina (/start, /prijzen, /diensten, /over-luuk): dezelfde mist, niet schermvullend */
.hero--kort{min-height:0;justify-content:flex-start;padding-top:calc(72px + clamp(3rem,9vh,6rem));padding-bottom:clamp(3rem,7vh,5rem)}
/* de mist loopt onderaan uit in de pagina; bij een schermvullende hero valt die rand onder de vouw, hier niet */
.hero--kort .mist{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero--kort.no-gl{background:radial-gradient(60% 50% at 70% 35%,rgba(158,163,168,.32),transparent 70%),var(--bot)}
@media (max-width:600px){.hero--kort{padding-top:calc(60px + 2.25rem);padding-bottom:2.5rem}}
@media (max-width:600px){
  .hero{padding-top:calc(60px + 1.5rem);padding-bottom:2.5rem}
  .kruimel{margin-bottom:1.1rem}
  .hero__zin{margin-top:.9rem}
  .hero__sub{font-size:1.0625rem}
  .hero__act{margin-top:1.5rem}
}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.hero-seen){--d0:1.55s}
  .js:not(.hero-seen) .stripe{transform:scaleX(0);animation:stripe .35s var(--ease-move) var(--d0) forwards}
}
@keyframes stripe{to{transform:scaleX(1)}}
@keyframes lift{from{opacity:0;transform:translateY(var(--dist-rise))}}

/* ---------- secties ---------- */
.sec{padding:var(--section) 0}
.sec + .sec{padding-top:0}
.sec--vlak{background:var(--c-surface)}
.sec--vlak + .sec{padding-top:var(--section)}
.sec + .sec--vlak{padding-top:var(--section)}
.kopkolom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem var(--gutter);align-items:start}
.kopkolom > .h2{grid-column:1 / span 5}
.kopkolom__tekst{grid-column:7 / span 6}
.kopkolom__tekst > p + p{margin-top:1rem}
.kopkolom__tekst p{color:var(--c-fg-2);max-width:38em}
.kopkolom__tekst p strong{color:var(--c-fg)}
@media (max-width:860px){.kopkolom > .h2,.kopkolom__tekst{grid-column:1 / -1}}
.kolommen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem var(--gutter)}
.kolommen h3{font-size:1.125rem;font-weight:500;padding-top:.9rem;border-top:1px solid var(--c-fg)}
.kolommen p{margin-top:.5rem;color:var(--c-fg-2);max-width:34em}
@media (max-width:700px){.kolommen{grid-template-columns:minmax(0,1fr)}}

/* koppen: regelmaskers, één keer (plekk.js); zonder JS of bij reduced-motion staat de kop er gewoon */
@media (prefers-reduced-motion:no-preference){
  .js:not(.motion-timeout) [data-reveal]:not(.is-split){visibility:hidden}
  [data-reveal] .rl{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
  [data-reveal] .rl > span{display:block;transform:translate3d(0,105%,0);transition:transform var(--dur-4) var(--ease-settle);transition-delay:calc(var(--i) * var(--stagger-line))}
  [data-reveal].in .rl > span{transform:none}
}

/* ---------- het Plekk-kader (#76, #139): het logo als object, met de open hoek rechtsboven en het blokje erin.
   Op licht een lijn in inkt met een oranje blokje; .kader--staal op nacht: staal met een zilveren blokje (§5.3). ---------- */
.kader{position:relative;--kr:clamp(14px,2vw,22px);--kd:1.5px;border:var(--kd) solid var(--c-fg);border-radius:var(--kr);padding:clamp(1.25rem,2.6vw,2.25rem) clamp(1rem,3vw,2.5rem)}
.kader::before,.kader::after{content:"";position:absolute;z-index:1;top:calc(-1 * var(--kd) - 1px);right:calc(-1 * var(--kd) - 1px);background:var(--c-bg)}
.kader::before{width:clamp(72px,12%,150px);height:calc(var(--kd) + 5px)}
.kader::after{width:calc(var(--kd) + 5px);height:clamp(60px,14%,110px)}
.kader__blk{position:absolute;z-index:2;top:calc(-1 * clamp(14px,1.6vw,22px));right:calc(-1 * clamp(10px,1.1vw,15px));width:clamp(26px,3vw,40px);aspect-ratio:1;border-radius:17%;background:var(--acc-vlak)}
.kader--staal{--kd:2px;border:0;background:linear-gradient(var(--c-bg),var(--c-bg)) padding-box,linear-gradient(180deg,#D2D8DE 0%,#99A3AE 38%,#6C7681 52%,#A9B2BB 70%,#7C8691 100%) border-box;border:var(--kd) solid transparent}
.kader--staal .kader__blk{background:linear-gradient(135deg,#EEF1F4,#9AA5B1 42%,#D3D9DF 56%,#6E7985);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.35)}

/* ---------- vragen (de proto: kop links, de lijst rechts) ---------- */
.faq__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2rem var(--gutter);align-items:start}
.faq__grid > .h2{grid-column:1 / span 5;position:sticky;top:112px}
.faq__list{grid-column:7 / span 6;border-bottom:1px solid var(--c-line)}
.faq details{border-top:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:1rem;align-items:center;padding:1.15rem 0;font-size:1.125rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:16px;height:16px;background:linear-gradient(currentColor,currentColor) center/16px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 16px no-repeat;transition:transform var(--dur-3) var(--ease-move)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2.5rem 1.4rem 0;color:var(--c-fg-2);max-width:40em}
@media (max-width:860px){.faq__grid > .h2,.faq__list{grid-column:1 / -1;position:static}}
@media (max-width:600px){.faq details p{padding-right:0}}

/* ---------- formulieren ---------- */
label{display:block;font-size:var(--fs-meta);color:var(--c-fg-2)}
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],textarea{display:block;width:100%;height:52px;padding:0 .9rem;font:400 1rem var(--f);color:var(--c-fg);background:var(--c-bg);border:1px solid var(--field);border-radius:var(--r)}
textarea{height:auto;min-height:6.5rem;padding:.75rem .9rem;line-height:1.5;resize:vertical}  /* #297: "Beschrijf je bedrijf" */
input::placeholder,textarea::placeholder{color:var(--c-fg-2);opacity:1}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--c-fg);outline-offset:1px}
.form__note,.opt,.hint{font-size:var(--fs-meta);color:var(--c-fg-2)}
.hint{display:block;margin-top:.35rem}

/* het startformulier (partials/start.html, #242, #243, #282): op /start en in de afsluiter van de homepage. Twee stappen, keuzes als chips */
.ask__step{border:0;margin:0;padding:0;display:grid;gap:1.1rem;min-width:0}
.ask__step[hidden]{display:none}
/* label{display:block} hierboven wint van het hidden-attribuut; in het formulier verbergt hidden altijd (de review bij een eerste website, #243) */
.ask [hidden]{display:none!important}
.ask legend{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:1.2;margin-bottom:.4rem;padding:0;color:var(--c-fg)}
.ask label > input,.ask label > textarea{margin-top:.4rem}
.ask .btn{justify-self:start}
.ask__terug{justify-self:start;background:none;border:0;padding:.25rem 0;font:inherit;font-size:var(--fs-meta);color:var(--c-fg-2);cursor:pointer;text-decoration:underline;text-underline-offset:.24em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;border:0;margin:0;padding:0;min-width:0}
.chips legend,.chips__label{float:left;width:100%;font-size:var(--fs-meta);color:var(--c-fg-2);margin:0 0 .5rem;padding:0}
.chips label{position:relative;color:var(--c-fg)}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem .95rem;border:1px solid var(--field);border-radius:var(--r);font-size:.9375rem;cursor:pointer;transition:background-color var(--dur-2) var(--ease-snap),color var(--dur-2) var(--ease-snap)}
.chips input:checked + span{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}
.chips input:focus-visible + span{outline:2px solid var(--c-fg);outline-offset:2px}
/* #340: de melding bij playbook met Compact, onder de budgetknoppen; inkt, geen nieuwe kleur (§6.2) */
.ask__melding{flex-basis:100%;margin:.35rem 0 0;font-size:.9375rem;line-height:1.5;color:var(--c-fg)}
.ask__status{min-height:1.5em;font-size:.9375rem;color:var(--c-fg-2)}
.ask__status.is-fout{color:var(--c-fg);font-weight:500}
.ask__done{padding:1.5rem 0;border-top:1px solid var(--c-line)}
.ask__done p + p{margin-top:.5rem;color:var(--c-fg-2)}
/* de pdf-route onder de bedankregel (#339, #352): de gids, de nieuwsbrief als los vinkje, de Compact-hint */
.ask__pdf{display:grid;gap:1.1rem;padding-bottom:1.5rem}
.ask__pdf[hidden]{display:none}
.ask__brief{display:grid;gap:.75rem;justify-items:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* formulieren buiten /start (fase 3 stap 7: /herroep, /dsa-melding): een kolom velden, keuzes met een lange tekst onder elkaar, een vinkje.
   Zelfde lijn, veld en focus als het startformulier; inkt op licht, geen nieuwe kleur (§6.2) */
.velden{display:grid;gap:1.1rem;align-content:start}
.art__tekst.velden > * + *{margin-top:0}
.velden label > input,.velden label > textarea{margin-top:.4rem}
.velden > .btn{justify-self:start;margin-top:.4rem}
.keuzes{display:grid;gap:.5rem;border:0;margin:0;padding:0;min-width:0}
.keuzes legend{font-size:var(--fs-meta);color:var(--c-fg-2);margin:0 0 .5rem;padding:0}
.keuzes label{position:relative;color:var(--c-fg)}
.keuzes input{position:absolute;left:1rem;top:1.05rem;width:.95rem;height:.95rem;margin:0;opacity:0;pointer-events:none}
.keuzes span{position:relative;display:block;padding:.8rem 1rem .8rem 2.65rem;border:1px solid var(--field);border-radius:var(--r);font-size:.9375rem;line-height:1.45;cursor:pointer;transition:border-color var(--dur-2) var(--ease-snap)}
.keuzes span::before{content:"";position:absolute;left:1rem;top:1.05rem;width:.95rem;height:.95rem;border:1px solid var(--c-fg);border-radius:50%;box-sizing:border-box;transition:box-shadow var(--dur-2) var(--ease-snap)}
.keuzes input:checked + span{border-color:var(--c-fg)}
.keuzes input:checked + span::before{box-shadow:inset 0 0 0 .2rem var(--c-bg),inset 0 0 0 1rem var(--c-fg)}
.keuzes input:focus-visible + span{outline:2px solid var(--c-fg);outline-offset:2px}
.vink{position:relative;display:block;padding-left:2rem;font-size:.9375rem;line-height:1.5;color:var(--c-fg);cursor:pointer}
.vink input{position:absolute;left:0;top:.2em;width:1.15rem;height:1.15rem;margin:0;opacity:0}
.vink span::before{content:"";position:absolute;left:0;top:.2em;width:1.15rem;height:1.15rem;border:1px solid var(--c-fg);border-radius:3px;box-sizing:border-box;background:var(--c-bg);transition:background-color var(--dur-2) var(--ease-snap)}
.vink span::after{content:"";position:absolute;left:.42rem;top:calc(.2em + .2rem);width:.32rem;height:.6rem;border:solid var(--c-bg);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.vink input:checked + span::before{background:var(--c-fg)}
.vink input:checked + span::after{opacity:1}
.vink input:focus-visible + span::before{outline:2px solid var(--c-fg);outline-offset:2px}

/* ---------- afsluiter (nacht): het mailadres groot, het nummer eronder (#168) ---------- */
.talk{padding:var(--section) 0 clamp(4rem,8vw,6rem)}
.talk__pre{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:1.2}
.talk__num{margin-top:clamp(1rem,2vw,1.5rem);font-weight:var(--fw-licht);font-variation-settings:'wdth' 125;font-stretch:125%;font-size:clamp(1.9rem,6.2vw,6.25rem);letter-spacing:-.045em;line-height:1}
.talk__num a{text-decoration:none;white-space:nowrap;background:linear-gradient(var(--c-acc-vlak),var(--c-acc-vlak)) no-repeat right 100%/0 .045em;transition:background-size var(--dur-4) var(--ease-move)}
.talk__num a:hover{background-position:left 100%;background-size:100% .045em}
.talk__tel{margin-top:1.1rem;font-size:clamp(1.125rem,1.7vw,1.5rem);letter-spacing:-.01em;color:var(--c-fg-2)}
.talk__tel a{text-decoration:none}
.talk__tekst{margin-top:clamp(2rem,4vw,3rem);max-width:36em;color:var(--c-fg-2)}

/* ---------- de nieuwsbrief boven de footer (guide §13.5, #351): één regel op nacht, het begin van de footer ----------
   De knop is een lijn, geen oranje vlak: de hoofdknop blijft de enige oranje knop (§6.2). Het vinkje en het veld zoals in de formulieren. */
.brief{padding:clamp(2.5rem,5vw,4rem) 0 0}
.brief__rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:1.5rem var(--gutter);align-items:start;padding-bottom:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--c-line)}
.brief__kop{max-width:22em;font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:1.25}
.brief__form{display:grid;gap:.9rem;min-width:0}
.brief__veld{display:flex;gap:.5rem;min-width:0}
.brief__veld input{flex:1 1 auto;min-width:0}
.brief__veld .btn{flex:0 0 auto}
.brief__status{min-height:1.5em;font-size:.9375rem;color:var(--c-fg-2)}
.brief__status.is-fout{color:var(--c-fg);font-weight:var(--fw-nadruk)}
/* hidden wint van display:flex en display:block hierboven (het formulier na het inschrijven, de staten op /nieuwsbrief) */
[data-nieuwsbrief] [hidden],[data-nieuwsbrief-bevestig] [hidden]{display:none!important}
@media (max-width:760px){.brief__rij{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.brief__veld{flex-direction:column}.brief__veld .btn{align-self:flex-start}}

/* ---------- footer in de mist op nacht (#234, #235): het logo als signatuur, de punt springt uit de naam in het kader ---------- */
.foot{position:relative;isolation:isolate;overflow:hidden;padding:clamp(4rem,9vw,7rem) 0 4.5rem;font-size:.9375rem;color:var(--c-fg-2)}
.foot > .wrap{position:relative;z-index:2}
.voet__mist,.voet__korrel{position:absolute;inset:0;pointer-events:none}
.voet__mist{z-index:0;display:block;width:100%;height:100%}
.voet__korrel{z-index:1;opacity:.09;mix-blend-mode:overlay;background-size:180px 180px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%);mask-image:linear-gradient(180deg,transparent,#000 25%);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html.voet-geen-gl .foot{background:radial-gradient(70% 70% at 50% 38%,#2A2B2D,var(--nacht) 70%)}
.sig{display:block;width:100%;height:auto;margin:0 0 clamp(3rem,6vw,5rem);overflow:visible}
.sig__frame,.sig__w{fill:var(--c-fg)}
.sig__w{font-family:var(--f);font-weight:var(--fw-merk);font-size:104px;letter-spacing:-5px;font-variation-settings:'wdth' 125;font-stretch:125%}
.sig__blk{fill:url(#mk-zilver)}
.foot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem var(--gutter);line-height:1.6}
.foot__grid a{text-decoration-color:color-mix(in srgb,currentColor 30%,transparent)}
.foot__jur{list-style:none}
@media (max-width:980px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- paginaovergang (0 KB JS) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:420ms var(--ease-exit) both vt-leave}
  ::view-transition-new(root){animation:760ms var(--ease-move) both vt-enter}
}
@keyframes vt-leave{to{opacity:0;transform:translateY(-2.5vh)}}
@keyframes vt-enter{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}