/* Cookiebanner (assets/js/cookiebanner.js). Accepteren en Alleen noodzakelijk even
   zwaar: beide gevuld, zelfde maat. Oranje met donkere tekst (6,2:1) in plaats van
   wit op oranje, dat haalt maar 3,2:1. */
.ckb{
  position:fixed;left:24px;bottom:24px;z-index:1000;
  width:min(560px,calc(100vw - 48px));
  background:linear-gradient(var(--orange),var(--orange)) top/100% 4px no-repeat,var(--white);color:var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.ckb__in{padding:26px 24px 24px}
.ckb__titel{font-family:"Bricolage Grotesque",serif;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5rem;color:var(--ink)}
.ckb__tekst{margin:0 0 1rem;font-size:.95rem;line-height:1.55;color:var(--muted)}
.ckb__tekst a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ckb__cats{display:grid;gap:.6rem;margin:0 0 1.1rem}
.ckb__cats[hidden]{display:none}
.ckb__cat{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer}
.ckb__cat input{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--ink);flex:none}
.ckb__cat b{display:block;font-size:.95rem}
.ckb__cat small{display:block;color:var(--muted);font-size:.85rem;line-height:1.45;margin-top:.15rem}
.ckb__knoppen{display:flex;flex-wrap:wrap;gap:.6rem}
.ckb__knoppen > *{flex:1 1 150px}
.ckb__knop{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.4rem;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.96rem;line-height:1;white-space:nowrap;
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);
  transition:background .2s;
}
.ckb__knop:hover{background:var(--paper-2)}
.ckb__knop--ja{background:var(--orange);box-shadow:none}
.ckb__knop--ja:hover{background:var(--gold)}
.ckb__knop--nee{background:var(--ink);color:#fff;box-shadow:none}
.ckb__knop--nee:hover{background:var(--ink-2)}
.ckb__knop:focus-visible,.ckb__tekst a:focus-visible,.ckb__cat input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ckb__knop--nee:focus-visible{outline-color:var(--orange-deep)}
/* Zolang de banner er staat: --ckb-ruimte is de hoogte die hij onderin afdekt.
   Gefocuste elementen scrollen boven de banner in beeld, en de donkere
   voetbalk loopt zo ver door dat ook de laatste links erboven komen. Met
   Shift+Tab komt een element juist bovenin in beeld; de scroll-padding-top
   houdt het dan onder de vaste menubalk vandaan (na scrollen 89px, op de
   homepage bij 320px breed 114px). Die ruimte vervangt zolang de banner er
   staat de scroll-margin-top van [id] (site.css); samen zouden ze velden met
   een id onder de banner duwen. */
html.ckb-open{scroll-padding-bottom:var(--ckb-ruimte,0px);scroll-padding-top:calc(120px + env(safe-area-inset-top))}
html.ckb-open [id]{scroll-margin-top:0}
html.ckb-open .ft1__balk::after{content:"";display:block;height:var(--ckb-ruimte,0px)}
@media (max-width: 760px){
  .ckb{left:0;bottom:0;width:100%;border-radius:var(--radius) var(--radius) 0 0;max-height:85vh;overflow:auto}
  .ckb__in{padding:22px 16px calc(20px + env(safe-area-inset-bottom))}
}
/* Lage schermen (320x568, telefoon liggend): kopbalk en banner laten samen
   anders te weinig ruimte over voor een gefocust veld. */
@media (max-height: 620px){
  .ckb__in{padding:16px 16px calc(14px + env(safe-area-inset-bottom))}
  .ckb__titel{font-size:1.15rem;margin-bottom:.35rem}
  .ckb__tekst{font-size:.875rem;line-height:1.45;margin-bottom:.75rem}
  .ckb__knoppen{gap:.5rem}
  .ckb__knop{padding:.7rem 1.1rem}
}