/* Groenhuis Rekenhulp · front-end · v4-componenten, alles onder .ghr (SPEC 7.5).
   Kleuren uit ACSS met de hex van v4 als reserve. Lokale knoppen: --k (dakhoek), --rc/--rw (ring), --p (schuif). */

/* ---------- 1. Tokens en thema's ---------- */
.ghr{
  --ghr-nacht:var(--primary-ultra-dark,#161E00);--ghr-primary:var(--primary,#A0C02E);--ghr-lime:var(--primary-light,#C8EA60);
  --ghr-lime-zacht:var(--primary-ultra-light,#E5FF9F);--ghr-olijf:var(--primary-semi-dark,#4E6300);--ghr-geel:var(--secondary,#FFED00);
  --ghr-geel-licht:var(--secondary-light,#FFFAB3);--ghr-paneel:var(--accent-ultra-light,#F3F6EF);--ghr-salie-licht:var(--accent-light,#DCE3CF);
  --ghr-salie:var(--accent-semi-dark,#627042);--ghr-tekst:var(--text-color,#495A6C);--ghr-wit:var(--white,#fff);
  --ghr-lijn:color-mix(in oklch,var(--ghr-nacht) 20%,transparent);--ghr-lijn-zacht:color-mix(in oklch,var(--ghr-nacht) 10%,transparent);
  --ghr-sans:var(--text-font-family,Avenir,"Avenir Next",Figtree,system-ui,sans-serif);
  --ghr-kopfont:var(--heading-font-family,Avenir,"Avenir Next",Figtree,system-ui,sans-serif);
  --ghr-mono:"IBM Plex Mono","GHR Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ghr-trapfont:var(--ghr-kopfont);--ghr-trapgewicht:300;--ghr-ease:cubic-bezier(.2,.7,.2,1);
  --ghr-ruimte-xs:var(--space-xs,.85rem);--ghr-ruimte-s:var(--space-s,1.2rem);--ghr-ruimte-m:var(--space-m,1.5rem);--ghr-ruimte-l:var(--space-l,2rem);
  --ghr-tekst-s:var(--text-s,.9375rem);--ghr-tekst-m:var(--text-m,1rem);--ghr-tekst-l:var(--text-l,1.125rem);--ghr-tekst-xl:var(--text-xl,1.25rem);
  --ghr-h2:var(--h2,clamp(1.5rem,2.14vw + 1.02rem,2.625rem));--ghr-sticky:96px;
  /* semantisch, per thema */
  --ghr-fg:var(--ghr-nacht);--ghr-txt:var(--ghr-tekst);--ghr-zacht:var(--ghr-salie);--ghr-ring:var(--ghr-lijn);--ghr-scheid:var(--ghr-lijn-zacht);
  --ghr-tegel:var(--ghr-wit);--ghr-tegel-hover:var(--ghr-paneel);--ghr-sel-bg:var(--ghr-nacht);--ghr-sel-fg:var(--ghr-wit);--ghr-sel-ic:var(--ghr-olijf);
  --ghr-focus:var(--ghr-nacht);--ghr-kader:var(--ghr-paneel);--ghr-raster:color-mix(in oklch,var(--ghr-nacht) 7%,transparent);--ghr-naadkleur:color-mix(in oklch,var(--ghr-nacht) 18%,transparent);
  --ghr-ic-a:var(--ghr-geel);
  container:ghr / inline-size;position:relative;box-sizing:border-box;inline-size:100%;
  font-family:var(--ghr-sans);font-size:var(--ghr-tekst-m);line-height:1.5;color:var(--ghr-txt);text-align:start;
}
.ghr--paneel{background:var(--ghr-paneel);padding:var(--ghr-ruimte-m);--ghr-kader:var(--ghr-wit);--ghr-tegel-hover:color-mix(in oklch,var(--ghr-nacht) 5%,var(--ghr-paneel))}
.ghr--nacht{background:var(--ghr-nacht);padding:var(--ghr-ruimte-m);
  --ghr-fg:var(--ghr-wit);--ghr-txt:rgb(255 255 255 / .78);--ghr-zacht:rgb(255 255 255 / .62);--ghr-ring:rgb(255 255 255 / .32);--ghr-scheid:rgb(255 255 255 / .14);
  --ghr-tegel:transparent;--ghr-tegel-hover:rgb(255 255 255 / .07);--ghr-sel-bg:var(--ghr-lime);--ghr-sel-fg:var(--ghr-nacht);--ghr-sel-ic:var(--ghr-geel-licht);
  --ghr-focus:var(--ghr-lime);--ghr-kader:var(--ghr-nacht);--ghr-raster:rgb(255 255 255 / .05);--ghr-naadkleur:rgb(255 255 255 / .4);--ghr-ic-a:var(--ghr-olijf)}

/* ---------- 2. Reset binnen .ghr ---------- */
.ghr *,.ghr *::before,.ghr *::after{box-sizing:border-box}
.ghr :where(h2,h3,h4,p,ul,ol,dl,dd,fieldset,legend,figure){margin:0;padding:0}
.ghr :where(ul,ol){list-style:none}
.ghr fieldset{border:0;min-inline-size:0}
.ghr :where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit;margin:0}
.ghr :where(button,input,textarea,select,a,summary,label){border-radius:0}
.ghr :where(a){color:inherit}
.ghr [hidden]{display:none!important}
.ghr .ghr-ic,.ghr .ghr-ui{display:block;flex:none;overflow:visible}
.ghr .ghr-ic .ghr-ic-a{fill:var(--ghr-ic-a,var(--ghr-geel))}
.ghr-vh,.ghr-sr{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ---------- 3. Kop, kicker, tag, hoeknummer ---------- */
.ghr-kop{display:grid;gap:var(--ghr-ruimte-xs);margin-block-end:var(--ghr-ruimte-l);max-inline-size:46rem}
.ghr-kicker{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.2 var(--ghr-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ghr-fg)}
.ghr-kicker::before{content:"";flex:none;inline-size:24px;block-size:24px;margin-inline-start:-6px;margin-block-start:-2px;background:var(--ghr-primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 15L12 9M12 9L18 15'/%3E%3C/svg%3E") center/24px 24px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 15L12 9M12 9L18 15'/%3E%3C/svg%3E") center/24px 24px no-repeat}
.ghr--nacht .ghr-kicker::before{background:var(--ghr-lime)}
.ghr-kicker__nr{color:var(--ghr-zacht)}
.ghr-kicker__nr::after{content:"/";margin-inline:6px 2px}
.ghr .ghr-titel{margin:0;font-family:var(--ghr-kopfont);font-size:var(--ghr-h2);font-weight:300;line-height:1.1;letter-spacing:-.02em;color:var(--ghr-fg);text-wrap:balance}
.ghr-intro{max-inline-size:60ch;font-size:var(--ghr-tekst-m);color:var(--ghr-txt)}
.ghr-tag{--k:6px;display:inline-flex;align-items:center;block-size:24px;padding:0 10px 0 8px;font:500 11px/1 var(--ghr-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--ghr-nacht);background:var(--ghr-paneel);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%)}
.ghr-tag--geel{background:var(--ghr-geel)}
.ghr-hnr{--k:6px;position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;inline-size:36px;block-size:36px;font:500 12px/1 var(--ghr-mono);letter-spacing:.04em;color:var(--ghr-wit)}
.ghr-hnr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ghr-nacht);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);transition:clip-path .35s var(--ghr-ease),background-color .25s}
.ghr-hnr::after{content:"";position:absolute;z-index:-2;inline-size:50%;block-size:50%;inset-inline-start:-4px;inset-block-end:-4px;background:var(--ghr-geel);clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%);opacity:0;transition:opacity .3s,transform .35s var(--ghr-ease)}
.ghr--nacht .ghr-hnr{color:var(--ghr-nacht)}.ghr--nacht .ghr-hnr::before{background:var(--ghr-wit)}
.ghr-stap.is-klaar .ghr-hnr{color:var(--ghr-nacht)}.ghr-stap.is-klaar .ghr-hnr::before{background:var(--ghr-lime)}
.ghr-stap:focus-within .ghr-hnr::after,.ghr-stap.is-actief .ghr-hnr::after{opacity:1}

/* ---------- 4. Keuzemenu ---------- */
.ghr-kiezer{margin-block-end:var(--ghr-ruimte-l)}
.ghr-kiezer__rij{display:grid;border-block-start:1px solid var(--ghr-fg)}
.ghr-kiezer__li{border-block-end:1px solid var(--ghr-scheid)}
.ghr-kiezer__item{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;gap:12px;min-block-size:52px;padding:12px 8px 12px 6px;color:var(--ghr-fg);text-decoration:none;transition:background-color .25s}
.ghr-kiezer__ic--48,.ghr-kiezer__nr,.ghr-kiezer__sub,.ghr-kiezer__vink{display:none}
.ghr-kiezer__ic--24 .ghr-ic{inline-size:24px;block-size:24px}
.ghr-kiezer__t{display:grid;gap:2px;min-inline-size:0}
.ghr-kiezer__naam{font-size:var(--ghr-tekst-s);font-weight:500;line-height:1.3}
.ghr-kiezer__pijl,.ghr-kiezer__vink{grid-column:3;grid-row:1;transition:transform .35s var(--ghr-ease)}
.ghr-kiezer__item .ghr-ui{inline-size:24px;block-size:24px}
.ghr-kiezer__item:hover{background:var(--ghr-tegel-hover)}
.ghr-kiezer__item:hover .ghr-kiezer__pijl{transform:translateX(4px)}
.ghr-kiezer__item:focus-visible{outline:2px solid var(--ghr-focus);outline-offset:-2px}
.ghr-kiezer__item[aria-selected="true"]::before{content:"";position:absolute;inset-block:-1px;inset-inline-start:0;inline-size:3px;background:var(--ghr-fg)}
.ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__naam{font-weight:600}
.ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__pijl{display:none}
.ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__vink{display:block;color:var(--ghr-primary)}
.ghr:not(.ghr-js) .ghr-kiezer__vink{display:none}
@container ghr (min-width:48rem){
  .ghr-kiezer__rij{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;border:0}
  .ghr-kiezer__li{border:0;display:grid}
  .ghr-kiezer__item{--k:20px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;align-items:start;gap:var(--ghr-ruimte-s) 8px;min-block-size:9rem;padding:var(--ghr-ruimte-m);background:var(--ghr-tegel-kiezer,var(--ghr-paneel));clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);transition:clip-path .35s var(--ghr-ease),background-color .25s,color .25s}
  .ghr--paneel .ghr-kiezer__item{--ghr-tegel-kiezer:var(--ghr-wit)}
  .ghr--nacht .ghr-kiezer__item{--ghr-tegel-kiezer:rgb(255 255 255 / .06)}
  .ghr-kiezer__ic--24,.ghr-kiezer__pijl,.ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__vink{display:none}
  .ghr-kiezer__ic--48{display:block;grid-column:1;grid-row:1}
  .ghr-kiezer__ic--48 .ghr-ic{inline-size:48px;block-size:48px}
  .ghr-kiezer__ic--48 .ghr-ic-a{transition:transform .4s var(--ghr-ease)}
  .ghr-kiezer__nr{display:block;grid-column:2;grid-row:1;font:500 11px/1 var(--ghr-mono);letter-spacing:.1em;color:var(--ghr-zacht)}
  .ghr-kiezer__t{grid-column:1 / -1;grid-row:3;gap:4px}
  .ghr-kiezer__naam{font-family:var(--ghr-kopfont);font-size:var(--ghr-tekst-l);font-weight:500;line-height:1.2}
  .ghr-kiezer__sub{display:block;font-size:var(--ghr-tekst-s);line-height:1.4;color:var(--ghr-txt)}
  .ghr-kiezer__item:hover{--k:30px;background:var(--ghr-tegel-kiezer,var(--ghr-paneel))}
  .ghr-kiezer__item:hover .ghr-ic-a{transform:translate(-2px,2px)}
  .ghr-kiezer__item:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ghr-focus),inset 0 0 0 4px var(--ghr-wit)}
  .ghr-kiezer__item[aria-selected="true"]{--ghr-ic-a:var(--ghr-geel);background:var(--ghr-nacht);color:var(--ghr-wit);box-shadow:inset 0 -3px 0 var(--ghr-lime)}
  .ghr-kiezer__item[aria-selected="true"]::before{display:none}
  .ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__naam{font-weight:500}
  .ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__sub{color:rgb(255 255 255 / .74)}
  .ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__nr{color:var(--ghr-lime)}
  .ghr-kiezer__item[aria-selected="true"]:focus-visible{box-shadow:inset 0 0 0 3px var(--ghr-lime)}
  .ghr--nacht .ghr-kiezer__item[aria-selected="true"]{--ghr-ic-a:var(--ghr-geel-licht);background:var(--ghr-lime);color:var(--ghr-nacht);box-shadow:inset 0 -3px 0 var(--ghr-wit)}
  .ghr--nacht .ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__sub{color:var(--ghr-nacht)}
  .ghr--nacht .ghr-kiezer__item[aria-selected="true"] .ghr-kiezer__nr{color:var(--ghr-olijf)}
  .ghr--nacht .ghr-kiezer__item:not([aria-selected="true"]) .ghr-ic{color:var(--ghr-wit)}
}

/* ---------- 5. Paneel en raster ---------- */
.ghr-paneel+.ghr-paneel{margin-block-start:var(--ghr-ruimte-l);padding-block-start:var(--ghr-ruimte-l);border-block-start:1px solid var(--ghr-scheid)}
.ghr-paneel__kop{display:grid;gap:6px;margin-block-end:var(--ghr-ruimte-m)}
.ghr .ghr-paneel__titel{margin:0;font-family:var(--ghr-kopfont);font-size:var(--ghr-tekst-xl);font-weight:400;line-height:1.25;color:var(--ghr-fg)}
.ghr-paneel__intro{font-size:var(--ghr-tekst-s)}
.ghr-raster{display:grid;gap:var(--ghr-ruimte-l)}
.ghr-invoer{container:ghrin / inline-size;display:grid;gap:var(--ghr-ruimte-l);min-inline-size:0}
.ghr-zij{display:grid;gap:var(--ghr-ruimte-m);align-content:start;min-inline-size:0}
@container ghr (min-width:60rem){
  .ghr-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .ghr-zij.is-plakt{position:sticky;inset-block-start:var(--ghr-sticky)}
}

/* ---------- 6. Stappen en velden ---------- */
.ghr-stap{display:grid;gap:var(--ghr-ruimte-m)}
.ghr-stap__kop{display:flex;align-items:center;gap:14px;float:none;inline-size:100%;margin-block-end:var(--ghr-ruimte-m);font-family:var(--ghr-kopfont);font-size:var(--ghr-tekst-xl);font-weight:400;line-height:1.25;letter-spacing:-.01em;color:var(--ghr-fg)}
.ghr-stap__velden{display:grid;gap:var(--ghr-ruimte-m)}
.ghr-veld{display:grid;gap:10px;min-inline-size:0}
.ghr-label{display:block;font-size:var(--ghr-tekst-s);font-weight:500;line-height:1.35;color:var(--ghr-fg)}
legend.ghr-label{float:left;inline-size:100%;margin-block-end:10px}
legend.ghr-label+*{clear:both}
.ghr-hulp{font-size:var(--ghr-tekst-s);line-height:1.5;color:var(--ghr-txt);max-inline-size:62ch}
.ghr-info{padding-inline-start:12px;box-shadow:inset 2px 0 0 var(--ghr-primary)}
.ghr-fout{display:flex;align-items:flex-start;gap:6px;font-size:var(--ghr-tekst-s);font-weight:500;line-height:1.4;color:var(--ghr-fg)}
.ghr-fout .ghr-ui{inline-size:16px;block-size:16px;margin-block-start:2px;color:var(--ghr-fg)}

/* ---------- 7. Keuzetegels ---------- */
.ghr-tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ghr-tegel{--k:12px;--rc:var(--ghr-ring);--rw:1px;--c:var(--ghr-tegel);position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-block-size:64px;padding:12px 14px;color:var(--ghr-fg);cursor:pointer;
  background:linear-gradient(to bottom left,transparent 50%,var(--rc) 50%,var(--rc) calc(50% + var(--rw)),transparent calc(50% + var(--rw))) right top/var(--k) var(--k) no-repeat,var(--c);box-shadow:inset 0 0 0 var(--rw) var(--rc);
  clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);transition:clip-path .3s var(--ghr-ease),background-color .2s,color .2s}
.ghr-tegel__t{font-size:var(--ghr-tekst-s);font-weight:500;line-height:1.3}
.ghr-tegel__hulp{font-size:13px;line-height:1.4;color:var(--ghr-txt)}
.ghr-tegel__glief{display:grid;place-items:center;min-inline-size:40px;block-size:28px;padding:0 6px;font:500 12px/1 var(--ghr-mono);letter-spacing:.06em;color:var(--ghr-nacht);background:var(--ghr-paneel)}
.ghr--nacht .ghr-tegel__glief{background:rgb(255 255 255 / .9)}
.ghr-tegel:hover{--k:16px;--c:var(--ghr-tegel-hover)}
.ghr-tegel:has(input:checked),.ghr-tegel.is-gekozen{--c:var(--ghr-sel-bg);--rc:var(--ghr-sel-bg);--ghr-ic-a:var(--ghr-sel-ic);color:var(--ghr-sel-fg)}
.ghr-tegel:has(input:checked) .ghr-tegel__hulp,.ghr-tegel.is-gekozen .ghr-tegel__hulp{color:inherit;opacity:.82}
.ghr-tegel:has(input:checked) .ghr-tegel__glief,.ghr-tegel.is-gekozen .ghr-tegel__glief{background:var(--ghr-lime);color:var(--ghr-nacht)}
.ghr--nacht .ghr-tegel:has(input:checked) .ghr-tegel__glief,.ghr--nacht .ghr-tegel.is-gekozen .ghr-tegel__glief{background:var(--ghr-nacht);color:var(--ghr-lime)}
.ghr-tegel:has(input:focus-visible),.ghr-tegel.is-focus{--rc:var(--ghr-focus);--rw:2px;box-shadow:inset 0 0 0 2px var(--ghr-focus),inset 0 0 0 4px var(--ghr-wit)}
.ghr-tegel:has(input:checked:focus-visible){--rc:var(--ghr-lime);box-shadow:inset 0 0 0 3px var(--ghr-lime)}
.ghr--nacht .ghr-tegel:has(input:checked:focus-visible){--rc:var(--ghr-wit);box-shadow:inset 0 0 0 3px var(--ghr-wit)}
.ghr-tegels--kort{grid-template-columns:repeat(5,minmax(0,1fr))}
.ghr-tegels--kort .ghr-tegel{align-items:center;min-block-size:52px;padding:8px 4px}
.ghr-tegels--kort .ghr-tegel__glief{background:none;color:inherit;font-size:15px;min-inline-size:0}
.ghr-tegels--kort .ghr-tegel:has(input:checked) .ghr-tegel__glief{background:none;color:inherit}
.ghr-tegels:not(.ghr-tegels--kort)>.ghr-tegel:last-child:nth-child(odd){grid-column:1 / -1}
.ghr-tegels:has(.ghr-tegel__glief):not(.ghr-tegels--kort){grid-template-columns:repeat(3,minmax(0,1fr))}
.ghr-tegels:has(.ghr-tegel__glief) .ghr-tegel{align-items:center;text-align:center;padding:10px 6px}
.ghr-tegels:has(.ghr-tegel__glief):not(.ghr-tegels--kort)>.ghr-tegel:last-child:nth-child(odd){grid-column:auto}
.ghr-tegel:has(.ghr-tegel__kort) .ghr-tegel__lang{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ghr-tegel__kort{display:inline}
@container ghrin (min-width:34rem){
  .ghr-tegels--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ghr-tegels--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ghr-tegels.ghr-tegels--3>.ghr-tegel:last-child:nth-child(odd),.ghr-tegels.ghr-tegels--4>.ghr-tegel:last-child:nth-child(odd){grid-column:auto}
  .ghr-tegel:has(.ghr-tegel__kort) .ghr-tegel__lang{position:static;inline-size:auto;block-size:auto;overflow:visible;clip-path:none;white-space:normal}
  .ghr-tegel .ghr-tegel__kort{display:none}
}

/* ---------- 8. Schakelaar ---------- */
.ghr-schakel{--k:8px;display:flex;flex-wrap:wrap;inline-size:fit-content;max-inline-size:100%;box-shadow:inset 0 0 0 1px var(--ghr-ring);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);
  background:linear-gradient(to bottom left,transparent 50%,var(--ghr-ring) 50%,var(--ghr-ring) calc(50% + 1px),transparent calc(50% + 1px)) right top/var(--k) var(--k) no-repeat,var(--ghr-tegel)}
.ghr-schakel__optie{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-block-size:44px;padding:8px 16px;font-size:15px;font-weight:500;line-height:1.25;color:var(--ghr-fg);cursor:pointer;text-align:center;transition:background-color .2s,color .2s}
.ghr-schakel__optie+.ghr-schakel__optie{box-shadow:inset 1px 0 0 var(--ghr-ring)}
.ghr-schakel__optie:hover{background:var(--ghr-tegel-hover)}
.ghr-schakel__optie:has(input:checked),.ghr-schakel__optie.is-gekozen{background:var(--ghr-sel-bg);color:var(--ghr-sel-fg);box-shadow:none}
.ghr-schakel__optie:has(input:focus-visible){outline:2px solid var(--ghr-focus);outline-offset:-4px}
.ghr-schakel__optie:has(input:checked:focus-visible){outline-color:var(--ghr-lime)}
.ghr--nacht .ghr-schakel__optie:has(input:checked:focus-visible){outline-color:var(--ghr-nacht)}
.ghr-veld--klein .ghr-schakel__optie{min-block-size:44px;padding:6px 14px;font-family:var(--ghr-mono);font-size:13px}

/* ---------- 9. Schuif en getal ---------- */
.ghr-schuif{gap:8px}
.ghr-schuif__kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.ghr-schuif__kop .ghr-label{flex:1 1 12rem}
.ghr-getal{display:inline-flex;align-items:center;gap:8px;flex:none;block-size:44px;padding:0 12px 0 0;background:var(--ghr-wit);box-shadow:inset 0 0 0 1px var(--ghr-ring)}
.ghr--nacht .ghr-getal{box-shadow:none}
.ghr .ghr-getal__in{inline-size:8ch;block-size:44px;padding:0 4px 0 12px;border:0;background:transparent;font:500 16px/1 var(--ghr-mono);font-variant-numeric:tabular-nums;text-align:end;color:var(--ghr-nacht);box-shadow:none;outline:0;-moz-appearance:textfield;appearance:textfield}
.ghr-getal:focus-within{box-shadow:inset 0 0 0 2px var(--ghr-nacht);outline:3px solid var(--ghr-lime);outline-offset:0}
.ghr-veld.is-fout .ghr-getal{box-shadow:inset 0 0 0 2px var(--ghr-nacht)}
.ghr-eenheid{font:500 11px/1 var(--ghr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ghr-salie);white-space:nowrap}
.ghr .ghr-bereik{--p:50%;display:block;inline-size:100%;block-size:28px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.ghr-bereik::-webkit-slider-runnable-track{block-size:4px;background:linear-gradient(to right,var(--ghr-primary) var(--p),var(--ghr-scheid) var(--p))}
.ghr-bereik::-moz-range-track{block-size:4px;background:linear-gradient(to right,var(--ghr-primary) var(--p),var(--ghr-scheid) var(--p))}
.ghr-bereik::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:22px;block-size:22px;margin-block-start:-9px;border:0;border-radius:0;background:linear-gradient(225deg,transparent 5px,var(--ghr-fg) 5px)}
.ghr-bereik::-moz-range-thumb{inline-size:22px;block-size:22px;border:0;border-radius:0;background:linear-gradient(225deg,transparent 5px,var(--ghr-fg) 5px)}
.ghr-bereik:focus{outline:0}
.ghr-bereik:focus-visible{outline:2px solid var(--ghr-focus);outline-offset:4px}
.ghr-bereik:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--ghr-lime)}
.ghr-bereik:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--ghr-lime)}
.ghr-schuif__grenzen{display:flex;justify-content:space-between;margin-block-start:-4px;font:500 10.5px/1 var(--ghr-mono);letter-spacing:.06em;color:var(--ghr-zacht)}
.ghr:not(.ghr-js) .ghr-schuif__grenzen,.ghr:not(.ghr-js) .ghr-snel{display:none}
.ghr-snel{display:flex;flex-wrap:wrap;gap:8px}
.ghr-snel__knop{--k:6px;min-block-size:44px;padding:0 14px;border:0;font:500 13px/1 var(--ghr-mono);letter-spacing:.04em;color:var(--ghr-fg);background:linear-gradient(to bottom left,transparent 50%,var(--ghr-ring) 50%,var(--ghr-ring) calc(50% + 1px),transparent calc(50% + 1px)) right top/var(--k) var(--k) no-repeat,var(--ghr-tegel);box-shadow:inset 0 0 0 1px var(--ghr-ring);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);cursor:pointer}
.ghr-snel__knop:hover{background-color:var(--ghr-tegel-hover)}
.ghr-snel__knop[aria-pressed="true"]{background:var(--ghr-sel-bg);color:var(--ghr-sel-fg);box-shadow:none}
.ghr-snel__knop:focus-visible{outline:2px solid var(--ghr-focus);outline-offset:2px}

/* ---------- 10. Vinkje ---------- */
.ghr-vink{position:relative;display:flex;align-items:flex-start;gap:12px;min-block-size:44px;padding-block:11px;font-size:var(--ghr-tekst-s);line-height:1.45;color:var(--ghr-fg);cursor:pointer}
.ghr-vink__in{position:absolute;inline-size:22px;block-size:22px;margin:0;opacity:0;cursor:pointer}
.ghr-vink__box{display:grid;place-items:center;flex:none;inline-size:22px;block-size:22px;margin-block-start:-1px;background:var(--ghr-wit);box-shadow:inset 0 0 0 1.5px var(--ghr-nacht);color:var(--ghr-wit)}
.ghr-vink__box .ghr-ui{inline-size:16px;block-size:16px;opacity:0}
.ghr-vink__in:checked+.ghr-vink__box{background:var(--ghr-nacht)}
.ghr-vink__in:checked+.ghr-vink__box .ghr-ui{opacity:1}
.ghr--nacht .ghr-vink__in:checked+.ghr-vink__box{background:var(--ghr-lime);color:var(--ghr-nacht)}
.ghr-vink__in:focus-visible+.ghr-vink__box{outline:3px solid var(--ghr-lime);outline-offset:2px;box-shadow:inset 0 0 0 2px var(--ghr-nacht)}
.ghr-vink__t a{text-decoration:underline;text-underline-offset:2px}
.ghr-vink__hulp{display:block;font-weight:400;color:var(--ghr-txt)}

/* ---------- 11. Knoppen ---------- */
.ghr-knop{--k:12px;--bg:var(--ghr-nacht);--fg:var(--ghr-wit);--ic:var(--ghr-lime);--rc:transparent;--rw:0px;display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;block-size:52px;padding:0 20px 0 22px;border:0;color:var(--fg);font-family:var(--ghr-sans);font-size:var(--btn-font-size,17px);font-weight:var(--btn-font-weight,500);line-height:var(--btn-line-height,1);white-space:nowrap;text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,var(--k) 100%,0 calc(100% - var(--k)));
  background:linear-gradient(to bottom left,transparent 50%,var(--rc) 50%,var(--rc) calc(50% + var(--rw)),transparent calc(50% + var(--rw))) right top/var(--k) var(--k) no-repeat,linear-gradient(to top right,transparent 50%,var(--rc) 50%,var(--rc) calc(50% + var(--rw)),transparent calc(50% + var(--rw))) left bottom/var(--k) var(--k) no-repeat,var(--bg);
  box-shadow:inset 0 0 0 var(--rw) var(--rc);transition:clip-path .35s var(--ghr-ease),background-size .35s var(--ghr-ease),background-color .25s,color .25s}
.ghr-knop .ghr-ui{inline-size:24px;block-size:24px;color:var(--ic);transition:transform .35s var(--ghr-ease)}
.ghr-knop:hover{--k:18px;color:var(--fg)}
.ghr-knop:hover .ghr-ui{transform:translateX(4px)}
.ghr-knop[data-knop="mailen"]:hover .ghr-ui{transform:translate(2px,-2px)}
.ghr-knop:active{transform:translateY(1px)}
.ghr-knop:focus-visible{outline:0;--rc:var(--ghr-lime);--rw:3px}
.ghr-knop--lijn{--bg:transparent;--fg:var(--ghr-fg);--ic:var(--ghr-fg);--rc:var(--ghr-fg);--rw:2px}
.ghr-knop--lijn:hover{--bg:var(--ghr-nacht);--fg:var(--ghr-wit);--ic:var(--ghr-lime);--rc:var(--ghr-nacht)}
.ghr-knop--lijn:focus-visible{--bg:var(--ghr-lime);--fg:var(--ghr-nacht);--ic:var(--ghr-nacht);--rc:var(--ghr-nacht);--rw:3px}
.ghr-knop--lijnwit{--bg:transparent;--fg:var(--ghr-wit);--ic:var(--ghr-wit);--rc:rgb(255 255 255 / .7);--rw:2px}
.ghr-knop--lijnwit:hover{--bg:var(--ghr-wit);--fg:var(--ghr-nacht);--ic:var(--ghr-olijf);--rc:var(--ghr-wit)}
.ghr-knop--lijnwit:focus-visible{--rc:var(--ghr-lime);--rw:3px}
.ghr-knop--lime,.ghr--nacht .ghr-knop:not(.ghr-knop--lijn):not(.ghr-knop--lijnwit){--bg:var(--ghr-lime);--fg:var(--ghr-nacht);--ic:var(--ghr-nacht)}
.ghr--nacht .ghr-knop:not(.ghr-knop--lijn):not(.ghr-knop--lijnwit):focus-visible{--rc:var(--ghr-wit)}
.ghr--nacht .ghr-knop--lijn{--fg:var(--ghr-wit);--ic:var(--ghr-wit);--rc:rgb(255 255 255 / .7)}
.ghr--nacht .ghr-knop--lijn:hover{--bg:var(--ghr-wit);--fg:var(--ghr-nacht);--ic:var(--ghr-olijf)}
.ghr--nacht .ghr-knop--lijn:focus-visible{--bg:transparent;--fg:var(--ghr-wit);--ic:var(--ghr-wit);--rc:var(--ghr-lime)}
.ghr-knop--klein{--k:10px;block-size:44px;gap:10px;padding:0 16px 0 18px;font-size:15px}
.ghr-knop--klein:hover{--k:14px}
.ghr-knop.is-laden{pointer-events:none}
.ghr-knop.is-laden .ghr-ui{opacity:.4}
@keyframes ghr-laadhoek{0%,100%{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}50%{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}}
.ghr-knoppaar{--k:12px;--rc:transparent;--rw:0px;display:inline-flex;gap:4px;block-size:52px;padding:0;border:0;background:none;color:var(--ghr-wit);font-family:var(--ghr-sans);font-size:var(--btn-font-size,17px);font-weight:var(--btn-font-weight,500);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.ghr-knoppaar__t,.ghr-knoppaar__p{display:inline-flex;align-items:center;justify-content:center;transition:clip-path .35s var(--ghr-ease),background-size .35s var(--ghr-ease)}
.ghr-knoppaar__t{gap:10px;padding:0 22px 0 18px;color:var(--ghr-wit);background:linear-gradient(to top right,transparent 50%,var(--rc) 50%,var(--rc) calc(50% + var(--rw)),transparent calc(50% + var(--rw))) left bottom/var(--k) var(--k) no-repeat,var(--ghr-nacht);box-shadow:inset 0 0 0 var(--rw) var(--rc);clip-path:polygon(0 0,100% 0,100% 100%,var(--k) 100%,0 calc(100% - var(--k)))}
.ghr-knoppaar__t .ghr-ui{color:var(--ghr-lime)}
.ghr-knoppaar__p{inline-size:52px;flex:none;color:var(--ghr-nacht);background:linear-gradient(to bottom left,transparent 50%,var(--rc) 50%,var(--rc) calc(50% + var(--rw)),transparent calc(50% + var(--rw))) right top/var(--k) var(--k) no-repeat,var(--ghr-lime);box-shadow:inset 0 0 0 var(--rw) var(--rc);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%)}
.ghr-knoppaar .ghr-ui{inline-size:24px;block-size:24px;transition:transform .35s var(--ghr-ease)}
.ghr-knoppaar:hover{--k:18px;color:var(--ghr-wit)}
.ghr-knoppaar:hover .ghr-knoppaar__p .ghr-ui{transform:translateX(4px)}
.ghr-knoppaar:hover .ghr-knoppaar__t .ghr-ui{transform:scale(1.12)}
.ghr-knoppaar:active{transform:translateY(1px)}
.ghr-knoppaar:focus-visible{outline:0;--rw:3px}
.ghr-knoppaar:focus-visible .ghr-knoppaar__t{--rc:var(--ghr-lime)}
.ghr-knoppaar:focus-visible .ghr-knoppaar__p,.ghr--nacht .ghr-knoppaar:focus-visible .ghr-knoppaar__t{--rc:var(--ghr-nacht)}
.ghr--nacht .ghr-knoppaar__t{background-color:var(--ghr-lime);color:var(--ghr-nacht)}
.ghr--nacht .ghr-knoppaar__t .ghr-ui{color:var(--ghr-nacht)}
.ghr--nacht .ghr-knoppaar__p{background-color:var(--ghr-wit)}
.ghr-bereken{padding-block-start:4px}
.ghr.ghr-js .ghr-bereken{display:none}

/* ---------- 12. Uitkomst ---------- */
.ghr-uitkomst{--k:20px;container:ghruit / inline-size;position:relative;isolation:isolate;display:grid;gap:var(--ghr-ruimte-m);padding:var(--ghr-ruimte-m);background-color:var(--ghr-kader);
  background-image:linear-gradient(to bottom,var(--ghr-raster) 1px,transparent 1px),linear-gradient(to right,var(--ghr-raster) 1px,transparent 1px);background-size:32px 32px;
  clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);scroll-margin-block-start:var(--ghr-sticky)}
.ghr--nacht .ghr-uitkomst{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18);background-image:linear-gradient(to bottom left,transparent 50%,rgb(255 255 255 / .18) 50%,rgb(255 255 255 / .18) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(to bottom,var(--ghr-raster) 1px,transparent 1px),linear-gradient(to right,var(--ghr-raster) 1px,transparent 1px);background-size:var(--k) var(--k),32px 32px,32px 32px;background-position:right top,0 0,0 0;background-repeat:no-repeat,repeat,repeat}
.ghr-uitkomst>*{position:relative;z-index:1;min-inline-size:0}
/* De naad loopt van de bovenrand tot achter het eerste blok van de daktrap en nooit over tekst (v4 M05). */
.ghr .ghr-uitkomst>.ghr-naad{--nx:78%;position:absolute;inset:0 auto auto var(--nx);z-index:0;inline-size:1px;block-size:calc(var(--ghr-ruimte-m) * 2 + 4.5rem);background:var(--ghr-naadkleur);pointer-events:none}
.ghr-naad__knoop{position:absolute;inset-block-start:0;inset-inline-start:.5px;inline-size:9px;block-size:9px;background:var(--ghr-fg);opacity:.55;transform:translate(-50%,-50%) rotate(45deg);transition:transform .45s var(--ghr-ease),opacity .3s}
.ghr-uitkomst:hover .ghr-naad__knoop{opacity:1;transform:translate(-50%,-50%) rotate(135deg)}
.ghr-uitkomst__kop{flex-wrap:wrap;row-gap:8px;outline:0}
.ghr-uitkomst__kop .ghr-tag{margin-inline-start:6px}
.ghr-leeg{max-inline-size:calc(78% - 2rem);font-size:var(--ghr-tekst-s);color:var(--ghr-txt)}
.ghr.ghr-js .ghr-leeg,.ghr:not(.ghr-js) [data-ghr-voorbeeld]{display:none}
.ghr-uitkomst__melding{display:flex;gap:10px;align-items:flex-start;font-size:var(--ghr-tekst-s);font-weight:500;color:var(--ghr-fg)}
.ghr-uitkomst__melding .ghr-ui{inline-size:24px;block-size:24px;color:var(--ghr-salie)}
.ghr-resultaat{display:grid;gap:var(--ghr-ruimte-m)}
/* Ongeldige invoer: het vorige resultaat blijft zichtbaar, gedimd. */
.ghr-uitkomst.is-verouderd .ghr-resultaat{opacity:.4;filter:grayscale(.6);transition:opacity .2s,filter .2s}
.ghr-noot{color:var(--ghr-txt)}

/* Daktrap */
.ghr-trap{display:grid;gap:4px}
.ghr-trap__blok{--k:24px;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:end;gap:6px 16px;min-block-size:5.5rem;padding:16px 18px;color:var(--ghr-nacht);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);transition:clip-path .35s var(--ghr-ease),background-color .3s}
.ghr-trap__blok:nth-child(2){margin-inline-start:16px}
.ghr-trap__blok:nth-child(3){margin-inline-start:32px}
.ghr-trap__blok--nacht{background:var(--ghr-nacht);color:var(--ghr-wit)}
.ghr-trap__blok--lime{background:var(--ghr-lime)}
.ghr-trap__blok--geel{background:var(--ghr-geel)}
.ghr-trap__blok--salie{background:var(--ghr-salie-licht)}
.ghr--nacht .ghr-trap__blok--nacht{background:var(--ghr-wit);color:var(--ghr-nacht)}
.ghr .ghr-trap__getal{display:flex;align-items:flex-start;gap:.06em;margin:0;font-family:var(--ghr-trapfont);font-size:clamp(2.25rem,11cqi,3.25rem);font-weight:var(--ghr-trapgewicht);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:inherit;white-space:nowrap}
.ghr-trap__pm{align-self:flex-start;margin-block-start:.1em;margin-inline-end:4px;font:500 13px/1 var(--ghr-mono);letter-spacing:0}
.ghr-trap__eh{position:static;margin-block-start:.12em;margin-inline-start:6px;font:500 12px/1.1 var(--ghr-mono);letter-spacing:.06em;text-transform:uppercase;white-space:normal;max-inline-size:9ch;vertical-align:baseline}
.ghr .ghr-trap__onder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline;margin:0;padding-block-end:2px}
.ghr-trap__nr{font:500 11px/1.4 var(--ghr-mono);letter-spacing:.1em}
.ghr-trap__lbl{font-size:var(--ghr-tekst-s);line-height:1.3}
@container ghruit (min-width:34rem){
  .ghr-trap{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch}
  .ghr-trap__blok{--k:32px;grid-template-columns:minmax(0,1fr);align-content:space-between;align-items:start;min-block-size:13rem;padding:20px 18px 18px;gap:var(--ghr-ruimte-l)}
  .ghr-trap__blok+.ghr-trap__blok{margin-inline-start:-1px}
  .ghr-trap__blok:nth-child(2){margin-block-start:32px}
  .ghr-trap__blok:nth-child(3){margin-block-start:64px}
  .ghr .ghr-trap__getal{flex-wrap:wrap;font-size:clamp(2rem,7cqi,3.75rem)}
  .ghr-trap__eh{max-inline-size:none;flex-basis:100%;margin-inline-start:0;margin-block-start:10px}
}
@container ghruit (max-width:24rem){.ghr-trap__blok{grid-template-columns:minmax(0,1fr);align-items:start;gap:12px}}
@media (prefers-reduced-motion:no-preference){.ghr-trap.is-nieuw .ghr-trap__blok{animation:ghr-trapk .35s var(--ghr-ease)}}
@keyframes ghr-trapk{50%{clip-path:polygon(0 0,calc(100% - var(--k) - 12px) 0,100% calc(var(--k) + 12px),100% 100%,0 100%)}}

/* Meldingen, tabel, uitleg */
.ghr-meldingen{display:grid;gap:10px}
.ghr-melding{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:var(--ghr-tekst-s);line-height:1.45;color:var(--ghr-fg)}
.ghr-melding .ghr-ui{inline-size:24px;block-size:24px;color:var(--ghr-salie)}
.ghr--nacht .ghr-melding .ghr-ui,.ghr--nacht .ghr-uitkomst__melding .ghr-ui{color:var(--ghr-lime)}
.ghr-spec{display:grid;gap:6px}
.ghr-spec__rij{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block-end:6px;border-block-end:1px solid var(--ghr-scheid)}
.ghr .ghr-spec dt{font:500 10.5px/1.6 var(--ghr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ghr-zacht)}
.ghr .ghr-spec dd{margin:0;font:500 13.5px/1.4 var(--ghr-mono);font-variant-numeric:tabular-nums;color:var(--ghr-fg);text-align:end}
.ghr-afgerond{margin-block-start:calc(var(--ghr-ruimte-m) * -.6);font-size:12px;color:var(--ghr-txt)}
.ghr-door__a{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;font-weight:500;color:var(--ghr-fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ghr-door__a .ghr-ui{inline-size:24px;block-size:24px;transition:transform .35s var(--ghr-ease)}
.ghr-door__a:hover .ghr-ui{transform:translateX(4px)}
.ghr-door__a:focus-visible{outline:2px solid var(--ghr-focus);outline-offset:2px}
.ghr-uitleg{border-block:1px solid var(--ghr-scheid)}
.ghr-uitleg__sum{display:flex;align-items:center;gap:10px;min-block-size:48px;font-weight:500;color:var(--ghr-fg);cursor:pointer;list-style:none}
.ghr-uitleg__sum::-webkit-details-marker{display:none}
.ghr-uitleg__sum::marker{content:""}
.ghr-uitleg__sum:focus-visible{outline:2px solid var(--ghr-focus);outline-offset:2px}
.ghr-uitleg__ic .ghr-ui{inline-size:24px;block-size:24px}
.ghr-uitleg__ic .ghr-ui--min,.ghr-uitleg[open] .ghr-uitleg__ic .ghr-ui--plus{display:none}
.ghr-uitleg[open] .ghr-uitleg__ic .ghr-ui--min{display:block}
.ghr-uitleg__in{display:grid;gap:12px;padding-block:4px 18px}
.ghr-uitleg__kop{font:500 11px/1.3 var(--ghr-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ghr-zacht);margin-block-start:6px}
.ghr-dakjes{display:grid;gap:8px;color:var(--ghr-fg)}
.ghr-dakjes>li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;font-size:var(--ghr-tekst-s);line-height:1.45}
.ghr-dakjes>li::before{content:"";inline-size:20px;block-size:20px;margin-block-start:calc((1.45em - 20px) / 2);background:var(--ghr-primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 15L12 9M12 9L18 15'/%3E%3C/svg%3E") center/20px 20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 15L12 9M12 9L18 15'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.ghr-dakjes--klein>li::before{background:var(--ghr-salie)}
.ghr--nacht .ghr-dakjes>li::before{background:var(--ghr-lime)}
.ghr-let{max-inline-size:60ch;font-size:var(--ghr-tekst-s);line-height:1.55;color:var(--ghr-txt)}
.ghr-acties{display:flex;flex-wrap:wrap;gap:12px}
.ghr:not(.ghr-js) button[data-ghr-open]{display:none}
@container ghruit (max-width:26rem){.ghr-acties{display:grid}.ghr-acties .ghr-knoppaar{display:flex}.ghr-acties .ghr-knoppaar__t{flex:1}.ghr-acties .ghr-knop{inline-size:100%}}

/* ---------- 13. Leadformulier en bedankt ---------- */
.ghr-aanvraag{container:ghraan / inline-size;scroll-margin-block-start:var(--ghr-sticky)}
.ghr-aanvraag__kaart{--k:20px;display:grid;gap:var(--ghr-ruimte-s);padding:var(--ghr-ruimte-m);color:var(--ghr-tekst);background:linear-gradient(to bottom left,transparent 50%,var(--ghr-lijn) 50%,var(--ghr-lijn) calc(50% + 1px),transparent calc(50% + 1px)) right top/var(--k) var(--k) no-repeat,var(--ghr-wit);box-shadow:inset 0 0 0 1px var(--ghr-lijn);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%)}
.ghr--nacht .ghr-aanvraag__kaart{--ghr-fg:var(--ghr-nacht);--ghr-txt:var(--ghr-tekst);--ghr-zacht:var(--ghr-salie);--ghr-focus:var(--ghr-nacht);--ghr-scheid:var(--ghr-lijn-zacht)}
.ghr--nacht .ghr-aanvraag__kaart .ghr-kicker::before{background:var(--ghr-primary)}
.ghr--nacht .ghr-aanvraag__kaart .ghr-knop:not(.ghr-knop--lijn){--bg:var(--ghr-nacht);--fg:var(--ghr-wit);--ic:var(--ghr-lime)}
.ghr--nacht .ghr-aanvraag__kaart .ghr-vink__in:checked+.ghr-vink__box{background:var(--ghr-nacht);color:var(--ghr-wit)}
.ghr-aanvraag__kop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-inline-end:8px}
.ghr-aanvraag__intro{font-size:var(--ghr-tekst-s)}
.ghr-sluit{display:grid;place-items:center;inline-size:44px;block-size:44px;margin:-10px -10px -10px 0;padding:0;border:0;background:none;color:var(--ghr-nacht);cursor:pointer}
.ghr-sluit .ghr-ui{inline-size:24px;block-size:24px;transition:transform .35s var(--ghr-ease)}
.ghr-sluit:hover .ghr-ui{transform:rotate(90deg)}
.ghr-sluit:focus-visible{outline:2px solid var(--ghr-nacht);outline-offset:-4px}
.ghr:not(.ghr-js) .ghr-sluit{display:none}
.ghr-foutlijst{display:grid;gap:6px;padding:12px 14px;font-size:var(--ghr-tekst-s);color:var(--ghr-nacht);background:var(--ghr-paneel);box-shadow:inset 3px 0 0 var(--ghr-nacht);outline:0}
.ghr-foutlijst:focus-visible{outline:2px solid var(--ghr-nacht);outline-offset:2px}
.ghr-foutlijst__kop{font-weight:500}
.ghr-foutlijst__lijst{display:grid;gap:4px}
.ghr-foutlijst a{text-decoration:underline;text-underline-offset:2px}
.ghr-lead{display:grid;gap:var(--ghr-ruimte-s)}
.ghr-lead__raster{display:grid;gap:var(--ghr-ruimte-s)}
.ghr-lv{display:grid;gap:6px;min-inline-size:0}
.ghr-lv__label{font-size:var(--ghr-tekst-s);font-weight:500;line-height:1.35;color:var(--ghr-nacht)}
.ghr-verplicht{font-weight:400;color:var(--ghr-tekst)}
.ghr .ghr-lv__in{inline-size:100%;block-size:52px;padding:0 14px;border:0;border-radius:0;background:var(--ghr-wit);color:var(--ghr-nacht);font-size:16px;line-height:1.4;box-shadow:inset 0 0 0 1px var(--ghr-lijn);outline:0;-webkit-appearance:none;appearance:none}
.ghr textarea.ghr-lv__in{block-size:auto;min-block-size:112px;padding:12px 14px;resize:vertical}
.ghr .ghr-lv__in:focus{box-shadow:inset 0 0 0 2px var(--ghr-nacht);outline:3px solid var(--ghr-lime);outline-offset:0}
.ghr .ghr-lv.is-fout .ghr-lv__in,.ghr .ghr-lv__in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--ghr-nacht)}
.ghr-lv--toestemming.is-fout .ghr-vink__box{box-shadow:inset 0 0 0 2.5px var(--ghr-nacht)}
.ghr-lead__vinken{display:grid;gap:2px}
.ghr-lead__fout{font-size:var(--ghr-tekst-s);font-weight:500;color:var(--ghr-nacht)}
@container ghraan (min-width:36rem){
  .ghr-lead__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ghr-lv--opmerking{grid-column:1 / -1}
}
.ghr-klaar{--k:20px;position:relative;isolation:isolate;display:grid;gap:var(--ghr-ruimte-s);justify-items:start;padding:var(--ghr-ruimte-m);background:var(--ghr-nacht);color:rgb(255 255 255 / .8);clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);outline:0}
.ghr-klaar>*{position:relative;z-index:1}
.ghr .ghr-klaar>.ghr-naad{--nx:84%;position:absolute;inset:0 auto auto var(--nx);z-index:0;inline-size:1px;block-size:calc(var(--ghr-ruimte-m) + 24px);background:rgb(255 255 255 / .3)}
.ghr-klaar .ghr-naad__knoop{background:var(--ghr-wit);opacity:1}
.ghr-klaar:focus-visible{box-shadow:inset 0 0 0 3px var(--ghr-lime)}
.ghr-klaar__ic .ghr-ui{inline-size:24px;block-size:24px;color:var(--ghr-lime)}
.ghr-klaar__t{font-family:var(--ghr-kopfont);font-size:var(--ghr-tekst-xl);font-weight:300;line-height:1.3;color:var(--ghr-wit)}
.ghr-adres{display:inline-block;max-inline-size:100%;overflow-wrap:anywhere}
.ghr-klaar .ghr-knop{white-space:normal;block-size:auto;min-block-size:44px;padding-block:10px;text-align:start}

/* ---------- 14. Mobiele resultaatbalk ---------- */
.ghr--mini{container-type:normal;position:static;padding:0;background:none}
.ghr-mini{position:fixed;inset-inline:0;inset-block-end:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:56px;padding:6px 8px 6px 16px;padding-block-end:calc(6px + env(safe-area-inset-bottom));background:var(--ghr-nacht);color:var(--ghr-wit);transform:translateY(110%);visibility:hidden;transition:transform .35s var(--ghr-ease),visibility 0s .35s}
.ghr-mini.is-zichtbaar{transform:none;visibility:visible;transition:transform .35s var(--ghr-ease)}
.ghr-mini__t{display:grid;gap:2px;min-inline-size:0}
.ghr-mini__lbl{font:500 10.5px/1.2 var(--ghr-mono);letter-spacing:.08em;text-transform:uppercase;color:rgb(255 255 255 / .7)}
.ghr-mini__w{font:500 16px/1.2 var(--ghr-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ghr-mini .ghr-knop{--bg:var(--ghr-lime);--fg:var(--ghr-nacht);--ic:var(--ghr-nacht)}
.ghr-mini .ghr-knop:focus-visible{--rc:var(--ghr-wit)}

/* ---------- 15. Met JS ---------- */
.ghr.ghr-js .ghr-paneel:not([data-ghr-open]){display:none}
.ghr.ghr-js .ghr-paneel+.ghr-paneel{margin:0;padding:0;border:0}
.ghr.ghr-js .ghr-paneel__kop{display:none}
.ghr.ghr-js [data-ghr-verborgen]{display:none}

/* ---------- 16. Minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .ghr *,.ghr *::before,.ghr *::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}
  .ghr-mini{transition:none}
}
@media (prefers-reduced-motion:no-preference){.ghr-knop.is-laden{animation:ghr-laadhoek 1.4s var(--ghr-ease) infinite}}