:root{
  --bg:#F4F5F1;--paper:#FFFFFF;--soft:#E9ECE6;--ink:#16201C;--ink-2:#44504A;--ink-3:#6A756F;--line:#D7DBD4;
  --tape:#F2C41C;--tape-deep:#C99A00;--tape-ink:#1A1604;--pine:#27493D;--pine-ink:#EAF1ED;
  --good:#2B7548;--good-bg:#E1F0E6;--bad:#B3342A;--bad-bg:#F8E3E0;
  --stage:#E3E7E0;--shadow:0 1px 2px rgba(20,30,25,.06),0 10px 30px rgba(20,30,25,.08);
  --f-d:"Barlow Condensed","Arial Narrow",sans-serif;--f-b:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;--f-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#111614;--paper:#181E1B;--soft:#202724;--ink:#E6EAE6;--ink-2:#B4BCB6;--ink-3:#8A948E;--line:#2C3430;
  --pine:#1E3A30;--pine-ink:#DDE9E3;--good:#6DC391;--good-bg:#1A3325;--bad:#F07366;--bad-bg:#3B201C;--stage:#1A201D;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#111614;--paper:#181E1B;--soft:#202724;--ink:#E6EAE6;--ink-2:#B4BCB6;--ink-3:#8A948E;--line:#2C3430;
  --pine:#1E3A30;--pine-ink:#DDE9E3;--good:#6DC391;--good-bg:#1A3325;--bad:#F07366;--bad-bg:#3B201C;--stage:#1A201D;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-b);padding-inline:16px}
a{color:inherit}
img,svg,canvas{max-width:100%}
.w{max-width:1160px;margin:0 auto}
h1,h2,h3{text-wrap:balance;hyphens:manual;overflow-wrap:normal}
h1.wrap-any,h2.wrap-any,h3.wrap-any{overflow-wrap:anywhere}
p,li,summary{overflow-wrap:break-word}
h1{font:800 clamp(44px,7.4vw,86px)/.92 var(--f-d);text-transform:uppercase;letter-spacing:-.005em;margin:0 0 20px}
h2{font:800 clamp(32px,4.6vw,52px)/.98 var(--f-d);text-transform:uppercase;margin:0 0 14px}
h3{font:700 22px/1.1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px}
p{margin:0 0 14px;max-width:62ch}
.eyebrow{font:600 13px/1 var(--f-m);letter-spacing:.04em;color:var(--ink-3);margin-bottom:14px;display:block}
.demo-bar{margin:0 -16px;padding:8px 16px;background:var(--tape);color:var(--tape-ink);font:500 13.5px/1.4 var(--f-b);text-align:center}
/* nav */
.nav{display:flex;align-items:center;gap:22px;padding-block:18px;position:relative}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo-mark{display:block;flex:none;width:28px;height:22.4px;margin-right:-4px;transform:rotate(-6deg)}
.logo-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo.logo-stack{flex-direction:column;align-items:flex-start;gap:0;font-size:34px}.logo-stack .logo-mark{width:.85em;height:.68em;margin:0 0 -.17em -.085em}.logo-stack .logo-name{font-size:1em}
.logo-name{font:800 22px/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
.nav-links{display:flex;gap:20px;margin-left:auto}
.nav-links a{text-decoration:none;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:8px}
.nav .menu-btn{display:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--f-b);padding:14px 20px;border-radius:8px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--tape);color:var(--tape-ink)}
.btn-primary:hover{background:#FFD23A}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-sm{padding:10px 14px;font-size:14.5px}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--tape-deep);outline-offset:2px}
.btn svg{width:18px;height:18px}
svg.i{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px;align-items:center;padding-block:28px 56px}
.hero .lede{font-size:20px;color:var(--ink-2);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 22px}
.specs{display:flex;flex-wrap:wrap;gap:8px}
.spec{font:500 13px/1 var(--f-m);border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.stage{position:relative;aspect-ratio:5/4;width:100%;border-radius:14px;background:var(--stage);overflow:hidden;box-shadow:var(--shadow)}
.stage canvas{display:block;width:100%!important;height:100%!important}
.hero-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;color-scheme:normal;opacity:0;transition:opacity .5s ease}
.hero-frame.on{opacity:1}
.stage-tag,.stage-dim{z-index:1;pointer-events:none}
.stage-tag{position:absolute;left:12px;bottom:12px;font:500 12px/1.3 var(--f-m);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:7px 9px;color:var(--ink-2)}
.stage-dim{position:absolute;right:12px;top:12px;font:500 12px/1 var(--f-m);background:var(--tape);color:var(--tape-ink);border-radius:3px;padding:5px 7px}
.stage-seg{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;gap:2px;padding:3px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stage-seg button{border:0;background:transparent;border-radius:6px;padding:7px 12px;font:600 13.5px/1 var(--f-b);color:var(--ink-2);cursor:pointer}
.stage-seg button:hover{color:var(--ink)}
.stage-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
@media (max-width:480px){.stage-dim{display:none}}
.stage-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px}
/* sections */
section.band{padding-block:72px;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end;margin-bottom:36px}
.sec-head p{color:var(--ink-2)}
.sec-head.stack{grid-template-columns:minmax(0,1fr);gap:4px;justify-items:center;text-align:center}
.sec-head.stack h2{max-width:30ch;margin-inline:auto}
.sec-head.stack p{max-width:78ch;margin-inline:auto}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
.steps li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 18px;counter-increment:s;display:flex;flex-direction:column}
.steps li::before{content:counter(s);font:500 12px/1 var(--f-m);color:var(--tape-ink);background:var(--tape);border-radius:3px;padding:5px 7px;align-self:flex-start;margin-bottom:14px}
.steps p{font-size:15.5px;color:var(--ink-2);margin:0}
/* Homepage: stroomkit, waterkit, zaagkit, isolatiekit, boodschappenlijsten, nachtstand, camper-eisen (src/kits-block.html) */
#kits{--k-stroom:#C99A00;--k-water:#1F6FB2;--k-hout:#9A6B3C;--bp-hout:#D9A867;--k-iso:#6B4FA3;--bp-iso:#B7A1E6;--bp:#1D3A32;--bp-ink:#E9F0EC;--bp-dim:rgba(233,240,236,.74);--bp-faint:rgba(233,240,236,.5);--bp-line:rgba(233,240,236,.22);--bp-grid:rgba(233,240,236,.06);--bp-stroom:#F2C41C;--bp-water:#6DB2EC;--bp-hot:#F07B69}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #kits{--k-stroom:#F2C41C;--k-water:#6DB2EC;--k-hout:#D9A867;--k-iso:#B7A1E6;--bp:#15291F}}
:root[data-theme="dark"] #kits{--k-stroom:#F2C41C;--k-water:#6DB2EC;--k-hout:#D9A867;--k-iso:#B7A1E6;--bp:#15291F}
.kits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.kits{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* breed scherm: stroom, water en zaag naast elkaar, de isolatiekit op de tweede rij over de hele breedte in drie kolommen:
   kop en uitleg, werktekening, boodschappenlijst (tot 1100 px twee bij twee, op een telefoon onder elkaar) */
@media (min-width:1101px){
  .kit.iso{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto 1fr;column-gap:32px;align-items:start}
  .kit.iso .kit-band{grid-column:1/-1}
  .kit.iso .kit-more{display:contents}
  .kit.iso .kit-h{grid-column:1;grid-row:2}.kit.iso .kit-desc{grid-column:1;grid-row:3}.kit.iso .kit-foot{grid-column:1;grid-row:4}.kit.iso .kit-uitleg{grid-column:1;grid-row:5}
  .kit.iso .kit-bp{grid-column:2;grid-row:2/span 4}
  .kit.iso .kit-lbl{grid-column:3;grid-row:2;align-self:end}.kit.iso ul{grid-column:3;grid-row:3/span 2}}
.kit{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0 24px 22px;display:grid;gap:18px;min-width:0}
.kit.stroom{--kc:var(--k-stroom);--bc:var(--bp-stroom)}
.kit.water{--kc:var(--k-water);--bc:var(--bp-water)}
.kit.hout{--kc:var(--k-hout);--bc:var(--bp-hout)}
.kit.iso{--kc:var(--k-iso);--bc:var(--bp-iso)}
.kit-band{height:6px;background:var(--kc);margin:0 -24px 6px}
.kit-h{margin:0;font:inherit;text-transform:none;letter-spacing:0}
.kit-tog{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;border:0;background:none;padding:0;color:var(--ink);text-align:left;font:inherit;cursor:default}
.kit .kic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--kc);color:var(--paper)}
.kit .kic svg{width:22px;height:22px;margin:0;color:inherit;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.kit-ttl{display:grid;min-width:0}
.kit-name{font:800 30px/1 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.kit-sub{font:500 12.5px/1.3 var(--f-m);color:var(--ink-3);margin-top:4px}
.kit-chev{display:none;width:22px;height:22px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.kit-desc{color:var(--ink-2);margin:0;font-size:16.5px}
.kit-more{display:grid;gap:12px;min-width:0}
.kit-bp{margin:0 0 6px;border-radius:10px;border-top:3px solid var(--bc);color:var(--bp-ink);padding:14px 14px 0;display:grid;gap:10px;min-width:0;background-color:var(--bp);background-image:linear-gradient(var(--bp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bp-grid) 1px,transparent 1px);background-size:18px 18px}
.kit-bp figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font:500 11px/1.3 var(--f-m);color:var(--bp-faint);letter-spacing:.04em}
.kit-bp .kit-bp-t{font:700 15px/1 var(--f-d);letter-spacing:.08em;color:var(--bp-ink);text-transform:uppercase}
.kit-schem{display:block;width:100%;height:auto;max-width:100%}
.kit-schem .bx{fill:var(--bp);stroke:var(--bp-ink);stroke-width:1.3}
.kit-schem .bx.opt{stroke:var(--bp-faint);stroke-dasharray:4 3}
.kit-schem .bx.hot{stroke:var(--bp-hot)}
.kit-schem .stock{fill:none;stroke:var(--bp-line);stroke-width:1}
.kit.hout .kit-schem .bx{fill:rgba(217,168,103,.28);stroke:var(--bp-hout);stroke-width:1}
.kit-schem .kist{fill:none;stroke:var(--bp-stroom);stroke-dasharray:5 4;stroke-width:1.2}
.kit-schem .ln{fill:none;stroke:var(--bc);stroke-width:1.8}
.kit-schem .ln.hot{stroke:var(--bp-hot)}
.kit-schem .ln.opt{stroke:var(--bp-faint);stroke-dasharray:4 3}
.kit-schem text{font-family:var(--f-m);fill:var(--bp-ink);text-anchor:middle}
.kit-schem .t1{font-size:10.5px;font-weight:600;text-transform:uppercase}
.kit-schem .t2{font-size:9px;fill:var(--bp-dim)}
.kit-schem .dim{fill:var(--bp-faint)}
.kit-schem .kl{font-size:8.5px;font-weight:600;letter-spacing:.08em;fill:var(--bp-stroom);text-anchor:start;text-transform:uppercase}
.kit-schem .lg{font-size:9px;text-anchor:start;fill:var(--bp-dim)}
.kit-schem .lg.end{text-anchor:end}
.kit-schem .lg.mid{text-anchor:middle}
/* isolatiekit: doorsnede van de wand (plaatstaal, isolatie, spouw, betimmering; op een spant de koudebrug) */
.kit.iso .kit-schem .bx{fill:rgba(183,161,230,.45);stroke:var(--bp-iso);stroke-width:1}
.kit.iso .kit-schem .pl{fill:var(--bp-ink)}
/* spouw: klasse spw, niet sp (dat is het speldje uit src/speldjes.css, 44 × 44 px, en dat gold ook voor deze rect) */
.kit.iso .kit-schem .spw{fill:none;stroke:var(--bp-line);stroke-dasharray:3 3}
.kit.iso .kit-schem .mp{fill:rgba(217,168,103,.35);stroke:var(--bp-hout);stroke-width:1}
.kit.iso .kit-schem .rib{fill:rgba(240,123,105,.18);stroke:var(--bp-hot);stroke-width:1;stroke-dasharray:4 3}
.kit-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--bp-line);margin:0 -14px}
.kit-read div{padding:10px 14px 12px;border-left:1px solid var(--bp-line);min-width:0}
.kit-read div:first-child{border-left:0}
.kit-read dt{font:500 10px/1.2 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--bp-faint)}
.kit-read dd{font:600 14px/1.3 var(--f-m);color:var(--bp-ink);margin:4px 0 0;font-variant-numeric:tabular-nums}
.kit-lbl{display:block;font:500 12px/1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.kit ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px}
.kit li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;font-size:15.5px;line-height:1.35;border-top:1px solid var(--line)}
.kit li:first-child{border-top:0}
.kit li::before{content:"";width:16px;height:16px;border:1.5px solid var(--ink-3);border-radius:3px}
.kit .chip{font:600 10.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-radius:3px;white-space:nowrap}
.kit .chip.vast{background:var(--pine);color:var(--pine-ink)}
.kit .chip.calc{background:var(--tape);color:var(--tape-ink)}
.kit .chip.keus{color:var(--ink-2);border:1px solid var(--line)}
.kit-foot{display:flex;align-items:center;gap:8px;margin:0;font:500 13px/1.3 var(--f-m);color:var(--ink-3)}
.kit-foot svg{width:16px;height:16px;margin:0;flex:none;fill:none;stroke:currentColor;stroke-width:2;color:inherit}
.kits-more svg{width:30px;height:30px;margin-bottom:14px;color:var(--ink)}
.kits-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.kits-more>div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.kits-more>div.soon{background:transparent;border-style:dashed}
.kits-more p{font-size:15.5px;color:var(--ink-2);margin:0}
.kit-go{display:inline-block;margin-top:12px;font-size:15.5px;font-weight:600}
/* uitlegpagina over de isolatiekit (src/isolatie_uitleg.py), voorlopig alleen in het Nederlands */
.kit-uitleg{margin:0;font-size:15.5px;font-weight:600}
.kit-soon{font:500 12px/1 var(--f-m);letter-spacing:.02em;text-transform:none;border:1px solid var(--line);border-radius:4px;padding:5px 7px;color:var(--ink-2);vertical-align:middle;margin-left:6px}
/* wet- en regelgeving alleen in het Nederlands en Duits (NL, DE, AT) */
html:not([lang="nl"]):not([lang="de"]) .only-nl-de{display:none}
@media (max-width:760px){
  .kits{grid-template-columns:minmax(0,1fr)}
  .kit{padding:0 18px 18px;gap:14px}.kit-band{margin:0 -18px 4px}.kit-name{font-size:26px}
  .kit-tog{cursor:pointer}.kit-tog:focus-visible{outline:2px solid var(--tape-deep);outline-offset:4px;border-radius:6px}
  .kit-chev{display:block}.kit.open .kit-chev{transform:rotate(180deg)}
  .kit:not(.open){padding-bottom:16px}
  .kit:not(.open) .kit-more,.kit:not(.open) .kit-desc{display:none}
}
@media (max-width:420px){.kit-read{grid-template-columns:minmax(0,1fr)}.kit-read div{border-left:0;border-top:1px solid var(--bp-line)}.kit-read div:first-child{border-top:0}}
@media (prefers-reduced-motion:reduce){.kit-chev{transition:none}}
/* Homepage: keuringseisen (src/eisen-block.html). Per taal alleen het eigen land: Nederlands = Nederland, Duits = Duitsland en
   Oostenrijk; in andere talen verborgen (.only-nl-de in kits.css). De eisen zelf staan niet op de site, alleen in de builder. */
html:not([lang="nl"]) .only-nl{display:none}
html:not([lang="de"]) .only-de{display:none}
.eisen-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.eisen-copy h2{margin-bottom:16px}
.eisen-copy>p{color:var(--ink-2);font-size:17px;margin:0 0 18px}
.eisen-pts{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.eisen-pts li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:16.5px;line-height:1.4}
.eisen-pts li::before{content:"";width:20px;height:20px;margin-top:1px;border-radius:5px;background:var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAF1ED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/15px no-repeat}
.eisen-cta{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.eisen-cta span{font:500 13px/1.35 var(--f-m);color:var(--ink-3)}
.eisen-cards{display:grid;gap:14px}
.eis{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:grid;gap:8px;min-width:0}
.eis h3{display:flex;align-items:center;gap:12px;margin:0;font:800 30px/1 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.eis-flag{display:grid;grid-template-rows:repeat(3,1fr);width:30px;height:20px;flex:none;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.eis.nl .eis-flag i:nth-child(1){background:#AE1C28}.eis.nl .eis-flag i:nth-child(2){background:#FFFFFF}.eis.nl .eis-flag i:nth-child(3){background:#21468B}
.eis.de .eis-flag i:nth-child(1){background:#000000}.eis.de .eis-flag i:nth-child(2){background:#DD0000}.eis.de .eis-flag i:nth-child(3){background:#FFCE00}
.eis.at .eis-flag i:nth-child(1),.eis.at .eis-flag i:nth-child(3){background:#C8102E}.eis.at .eis-flag i:nth-child(2){background:#FFFFFF}
.eis-cc{margin-left:auto;font:600 12px/1 var(--f-m);letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:4px 6px}
.eis-sub{margin:0;font:500 13px/1.35 var(--f-m);color:var(--ink-3)}
/* afgeschermde checklist: alleen lege regels, geen echte eisen in de HTML */
.eis-skel{display:grid;margin-top:6px;border-top:1px solid var(--line);-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.eis-skel i{display:grid;grid-template-columns:18px var(--w);gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.eis-skel i::before{content:"";width:18px;height:18px;border-radius:4px;border:1.5px solid var(--line)}
.eis-skel i::after{content:"";height:10px;border-radius:5px;background:var(--soft)}
.eis-lock{display:flex;align-items:center;gap:8px;justify-self:start;margin:-34px 0 0;position:relative;background:var(--tape);color:var(--tape-ink);border-radius:999px;padding:7px 14px 7px 11px;font:600 13.5px/1.2 var(--f-b)}
.eis-lock svg{width:16px;height:16px;flex:none}
@media (max-width:960px){.eisen-wrap{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:760px){.eis{padding:18px}.eis h3{font-size:26px}.eisen-cta .btn{flex:1 1 100%;text-align:center}}
/* Find My Van op de homepage (src/findmyvan-home.html): tekst + voorbeeldvragen uit de vragenlijst, met een hartje.
   Breed: de visual links, de tekst rechts; gestapeld eerst de tekst. */
#findmyvan{--fh-heart:#D8434A;--fh-heart-bg:#FBE4E4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #findmyvan{--fh-heart:#FF7B80;--fh-heart-bg:#3B2022}}
:root[data-theme="dark"] #findmyvan{--fh-heart:#FF7B80;--fh-heart-bg:#3B2022}
.fmvh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.fmvh-text{order:2}
.fmvh-visual{order:1;padding:18px}
.fmvh-lede{font-size:18px;color:var(--ink-2)}
.fmvh-points{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:16px}
.fmvh-points li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px}
.fmvh-points .n{grid-row:span 2;font:600 12.5px/1.6 var(--f-m);color:var(--ink-3)}
.fmvh-points b{font:700 16.5px/1.3 var(--f-b)}
.fmvh-points .t{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.fmvh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.fmvh-q{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:24px 26px 20px}
.fmvh-q .i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fmvh-heart{position:absolute;top:-22px;right:-16px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--fh-heart-bg);color:var(--fh-heart);box-shadow:var(--shadow);transform:rotate(8deg)}
.fmvh-heart .i{width:28px;height:28px;fill:currentColor;stroke:none}
.fmvh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-right:30px}
.fmvh-mono{font:600 11.5px/1 var(--f-m);letter-spacing:.07em;color:var(--ink-3);white-space:nowrap}
.fmvh-dots{display:flex;gap:4px}
.fmvh-dots i{width:16px;height:4px;border-radius:2px;background:var(--soft)}
.fmvh-dots i.on{background:var(--ink)}
.fmvh-k{display:block;font:600 11.5px/1 var(--f-m);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.fmvh-qt{font:800 30px/1 var(--f-d);text-transform:uppercase;margin:0 0 16px;max-width:none}
.fmvh-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fmvh-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:600 13.5px/1.25 var(--f-b);color:var(--ink-2);border:1.5px solid var(--line);border-radius:12px;padding:14px 8px 12px}
.fmvh-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.fmvh-opt .gl{width:56px;height:auto;display:block}
.fmvh-opt .gl .body{fill:var(--paper);stroke:var(--ink-3);stroke-width:1.2}
.fmvh-opt .gl .cab{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.fmvh-opt .gl .bed{fill:#E9C46A;stroke:rgba(22,32,28,.45);stroke-width:.6}
.fmvh-opt.on .gl .body,.fmvh-opt.on .gl .cab{stroke:var(--ink)}
.fmvh-opt .fav{position:absolute;top:-10px;right:-8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--fh-heart);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.fmvh-opt .fav .i{width:15px;height:15px;fill:currentColor;stroke:none}
.fmvh-rows{display:grid;margin-top:16px;border-top:1px solid var(--line)}
.fmvh-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px 0;border-bottom:1px solid var(--line)}
.fmvh-row:last-child{border-bottom:0;padding-bottom:2px}
.fmvh-row .ri{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink-2)}
.fmvh-row .ri .i{width:18px;height:18px}
.fmvh-row .ri.bike{background:var(--good-bg);color:var(--good)}
.fmvh-row .rq{flex:1 1 150px;font:500 14.5px/1.3 var(--f-b);color:var(--ink-2)}
.fmvh-row .ra{font:600 12.5px/1 var(--f-m);padding:7px 10px;border-radius:999px;background:var(--soft);color:var(--ink);white-space:nowrap}
@media (max-width:980px){
  .fmvh{grid-template-columns:minmax(0,1fr);gap:24px}
  .fmvh-text,.fmvh-visual{order:0}
}
@media (max-width:560px){
  .fmvh-visual{padding:16px 4px 4px}
  .fmvh-q{padding:20px 16px 16px}
  .fmvh-qt{font-size:26px}
  .fmvh-opt{padding:12px 4px 10px;font-size:12.5px}
  .fmvh-opt .gl{width:46px}
  .fmvh-heart{width:50px;height:50px;top:-18px;right:-8px}
  .fmvh-dots{gap:3px}
  .fmvh-dots i{width:9px}
  .fmvh-row{flex-wrap:nowrap}
  .fmvh-row .rq{flex:1 1 0;min-width:0}
}
/* Slogan "Je eerste stap naar totale vrijheid" (12 talen): groen blok hoog op de homepage (direct onder de keuringseisen,
   in talen zonder dat blok direct onder de kits) en de pagina Account maken */
section#vrijheid{border-top:0;padding-top:0}
.cta.cta-free{position:relative;overflow:hidden;align-items:flex-end;gap:28px 40px;padding:56px;background:var(--pine);color:var(--pine-ink)}
.cta.cta-free::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(234,241,237,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(234,241,237,.06) 1px,transparent 1px);background-size:22px 22px}
.cta.cta-free>div{position:relative;min-width:0}
.cta-eye{display:block;font:600 13px/1.3 var(--f-m);letter-spacing:.04em;color:var(--pine-ink);opacity:.72}
.cta.cta-free h2.slogan{margin:14px 0 0;max-width:15ch;font-size:clamp(44px,6.2vw,80px);line-height:.92;color:var(--pine-ink)}
.cta.cta-free .slogan-hl{color:var(--tape)}
.cta-act{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.cta-note{font:500 13px/1.3 var(--f-m);color:var(--pine-ink);opacity:.72}
#authSlogan{margin:0 0 14px;font-size:clamp(44px,5.6vw,76px);line-height:.92}
#authSlogan .slogan-hl{background:linear-gradient(transparent 58%,var(--tape) 58%,var(--tape) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:760px){.cta.cta-free{padding:36px 22px}.cta-act{align-items:stretch;width:100%}.cta-act .btn{white-space:normal;text-align:center}}
/* Hero gestapeld (tablet en telefoon): het 3D-voorbeeld direct onder de knoppen, de specs eronder.
   De tekstkolom doet niet mee in het raster (display:contents), zodat eyebrow, kop, lede, knoppen en specs losse rijen worden. */
@media (max-width:980px){
  .hero{row-gap:0}
  .hero>div:first-child{display:contents}
  .hero>div:last-child{order:1}
  .hero .specs{order:2;margin-top:18px}
}
/* telefoon: minder lucht tussen de specs, de lijn en de eerste sectie */
@media (max-width:760px){
  .hero{padding-bottom:32px}
  .hero+section.band{padding-top:48px}
}
/* ---------- Nieuwe homepage (src/home-<taal>.html, alle 12 talen): techniekblok en "Zo neemt de builder je mee" ---------- */
/* Sinds november 2026 in elke taal de nieuwe blokken (.only-<taal>, .nh); de oude blokken (.oh) staan nergens meer.
   .only-nl en .only-de verbergt src/eisen.css; Noors heeft lang="nb" */
.oh{display:none!important}
html:not([lang="en"]) .only-en,html:not([lang="fr"]) .only-fr,html:not([lang="es"]) .only-es,html:not([lang="pt"]) .only-pt,
html:not([lang="pl"]) .only-pl,html:not([lang="ro"]) .only-ro,html:not([lang="ru"]) .only-ru,html:not([lang="fi"]) .only-fi,
html:not([lang="sv"]) .only-sv,html:not([lang="nb"]) .only-no{display:none}
.hn .sec-head p{max-width:34em}
.hn-mono{display:block;font:500 13px/1.3 var(--f-m);color:var(--ink-3);margin-bottom:4px}
.hn-tech{display:flex;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.hn-tech-fig{flex:3 1 520px;min-width:0;margin:0;background:var(--stage);display:flex;align-items:center;justify-content:center;padding:clamp(16px,3vw,36px)}
.hn-tech-img{position:relative;width:100%;max-width:640px}
.hn-tech-img img{display:block;width:100%;height:auto;border-radius:10px}
.hn-pin{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(20,30,25,.3);display:flex;align-items:center;justify-content:center}
.hn-pin svg,.hn-ic svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hn-pin.stroom svg,.hn-ic.stroom svg{stroke:#1A1604}
.hn-pin.water,.hn-ic.water{background:#2A6FC4}.hn-pin.stroom,.hn-ic.stroom{background:#F2C41C}.hn-pin.kabels,.hn-ic.kabels{background:#3A4440}
.hn-pin.isolatie,.hn-ic.isolatie{background:#7B62B8}.hn-pin.zaag,.hn-ic.zaag{background:#C2502F}
.hn-hint{position:absolute;background:#16201C;color:#fff;font:600 13px/1.2 var(--f-b);padding:7px 11px;border-radius:8px;white-space:nowrap;box-shadow:0 4px 14px rgba(20,30,25,.25)}
.hn-tech-list{flex:2 1 340px;min-width:0;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column}
.hn-tech-list ul{list-style:none;margin:0;padding:0}
.hn-tech-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--soft)}
.hn-tech-list li:last-child{border-bottom:0}
.hn-ic{flex:none;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.hn-tech-list h3{margin:0;font:800 21px/1.1 var(--f-d);text-transform:uppercase}
.hn-tech-list p{margin:2px 0 0;font-size:16px;color:var(--ink-2)}
.hn-soon{margin:auto 0 0;padding-top:16px;border-top:1px dashed var(--line);font-size:15px;color:var(--ink-2)}
.hn-soon b{color:var(--ink)}
.hn-more{display:inline-block;margin-top:14px;font-weight:600;color:var(--ink)}
.hn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:20px}
.hn-steps>li{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.hn-step-img{position:relative;aspect-ratio:16/10;background:var(--stage);overflow:hidden}
.hn-step-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hn-step-img.bp{background:#1D3A32}
.hn-step-img.bp img{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}
.hn-step-img.night{background:#0E1412}
.hn-step-img.soft{background:var(--soft)}
.hn-step-img.soft img{inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain}
.hn-tag{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:6px;background:var(--tape);color:var(--tape-ink);font:600 12px/1 var(--f-m);padding:5px 9px;border-radius:4px}
.hn-tag.night{right:auto;left:14px;background:rgba(14,20,18,.75);color:#F2C41C}
.hn-tag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hn-alert{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);background:#B3342A;color:#fff;font:600 14px/1.2 var(--f-b);padding:8px 14px;border-radius:99px;white-space:nowrap}
.hn-alert span{overflow:hidden;text-overflow:ellipsis}
.hn-alert svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hn-step-txt{display:flex;gap:16px;padding:22px 24px 26px}
.hn-n{flex:none;width:32px;height:32px;border-radius:8px;background:var(--tape);color:var(--tape-ink);font:800 19px/1 var(--f-d);display:flex;align-items:center;justify-content:center}
.hn-step-txt h3{margin:2px 0 6px;font:700 26px/1 var(--f-d);text-transform:uppercase}
.hn-step-txt p{margin:0;color:var(--ink-2)}
.hn-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:32px}
.hn-cta .hn-more{margin-top:0}
.hn-compare{margin:18px 0 0;font-size:15px;color:var(--ink-3)}
.hn-compare a{font-weight:600;color:var(--ink)}
/* prijzen: in elke taal dezelfde korte lijsten (build.py, PRICES); de volledige vergelijking staat op de prijzenpagina */
/* label "Compleet pakket" op de rand van de kaart, zodat de drie titels op één lijn staan */
#prijzen .price{position:relative}
#prijzen .price .tag{position:absolute;top:-12px;left:22px;margin:0}
.faq-all{margin:18px 0 0;font-weight:600}
@media (max-width:760px){.hn-hint{display:none}}
/* telefoon: het blok Handleidingen (src/home-handleidingen.html) staat tussen de hero en het techniekblok, ook als het verborgen is,
   dus .hero+section.band uit hero.css raakt het techniekblok niet: hier dezelfde ruimte erboven, in elke taal (ook nl: #techniek) */
@media (max-width:760px){html[lang="nl"] .hero~#techniek,html[lang="de"] .hero~#techniek-de,html[lang="en"] .hero~#techniek-en,html[lang="fr"] .hero~#techniek-fr,
html[lang="es"] .hero~#techniek-es,html[lang="pt"] .hero~#techniek-pt,html[lang="pl"] .hero~#techniek-pl,html[lang="ro"] .hero~#techniek-ro,
html[lang="ru"] .hero~#techniek-ru,html[lang="fi"] .hero~#techniek-fi,html[lang="sv"] .hero~#techniek-sv,html[lang="nb"] .hero~#techniek-no{padding-top:48px}}
/* stap 4: de boodschappenlijst als HTML (src/lijstkaart.py), zodat hij op de telefoon leesbaar blijft */
.hn-step-img.lk-box{aspect-ratio:auto;min-height:0;display:flex;align-items:center;padding:16px}
.hn-step-img.lk-box .bl{flex:1;min-width:0;background:var(--paper)}
.hn-step-img.lk-box .bl-kits{grid-template-columns:1fr 1fr}
.hn-step-img.lk-box .bl-kit{background:var(--soft)}
@media (max-width:480px){.hn-step-img.lk-box{padding:10px}.hn-step-img.lk-box .bl{padding:12px;gap:10px}.hn-step-img.lk-box .bl-kit{padding:10px}
.hn-step-img.lk-box .bl-kt b{font-size:16px}.hn-step-img.lk-box .bl-ki{display:none}.hn-step-img.lk-box .bl-sum{font-size:11px}}
.hn-step-img.lk-box .bl-kit .bl-bar{background:var(--paper)}.hn-step-img.lk-box .bl-tot .bl-bar{background:var(--soft)}

.bl{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;font-family:var(--f-b)}
.bl b{font-weight:800}
.bl-h{display:flex;align-items:center;gap:12px}
.bl-ic{flex:none;width:40px;height:40px;border-radius:10px;background:#1D3A32;display:flex;align-items:center;justify-content:center}
.bl-ic svg,.bl-ki svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-h b,.bl-kt b{display:block;font:800 20px/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.bl small{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.bl-kits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}
.bl-kit{background:var(--paper);border-radius:10px;border-top:4px solid var(--c);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.bl-kt{display:flex;align-items:center;gap:10px}
.bl-ki{flex:none;width:30px;height:30px;border-radius:7px;background:var(--c);display:flex;align-items:center;justify-content:center}
.bl-ki svg{width:16px;height:16px}
.bl-bar{height:7px;border-radius:99px;background:var(--soft);overflow:hidden}.bl-bar i{display:block;height:100%;background:var(--c)}
.bl-sum,.bl-tot p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 10px;font:500 13px/1.3 var(--f-m);color:var(--ink-2)}
.bl-sum span,.bl-tot p span{white-space:nowrap}.bl-sum span:last-child{margin-left:auto}
.bl-tot{margin-left:auto;width:min(100%,320px);display:flex;flex-direction:column;gap:6px}
.bl-tot .bl-bar{--c:#1D3A32;background:var(--paper)}
.bl-tot p:first-of-type{font:700 15px/1.2 var(--f-b);color:var(--ink);align-items:baseline}.bl-tot p:first-of-type b{font:800 24px/1 var(--f-d)}
/* ---------- Homepage: Handleidingen en bouwpakketten op maat (src/home-handleidingen.html, november 2026) ----------
   Direct onder de hero, in alle 12 talen. Dezelfde groene kop en beelden als Mijn account → Bouwplannen (.bpl-hero in
   src/handleidingen-site.css); voorbeeld en keuzes: onderzoek/home-handleidingen/. */
section.band.hh{border-top:0;padding-top:8px}
.hh-kaart{--groen:#1D3A32;--blad:#F4F3EE;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:8px 40px;
  background:var(--groen);color:#F1F4F1;border-radius:24px;padding:44px 0 0 48px;overflow:hidden}
.hh-kaart::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.hh img{display:block;max-width:100%;height:auto}
.hh-tx{position:relative;min-width:0;display:grid;gap:20px;align-content:center;padding-bottom:8px}
.hh-boven{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.hh-nieuw{display:inline-block;background:var(--tape);color:#16201C;font:800 20px/1 var(--f-d);text-transform:uppercase;letter-spacing:.03em;padding:8px 12px 6px;border-radius:4px;transform:rotate(-4deg);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.hh-oog{font:600 12px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#CFE0D8}
.hh-h{margin:0;font:800 clamp(44px,5.2vw,72px)/.92 var(--f-d);text-transform:uppercase;letter-spacing:-.01em;color:#fff;max-width:none;overflow-wrap:break-word;hyphens:auto}
.hh-h mark{background:none;color:var(--tape)}
.hh-lead{margin:0;font:400 18px/1.55 var(--f-b);color:#D6E2DC;max-width:46ch}
.hh-kits{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hh-kits li{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font:600 14px/1 var(--f-b);color:#fff}
.hh-ic{width:26px;height:26px;border-radius:99px;display:grid;place-items:center}
.hh-ic svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hh-ic.water{background:#2A6FC4}.hh-ic.stroom{background:#F2C41C}.hh-ic.stroom svg{stroke:#16201C}.hh-ic.isolatie{background:#7B62B8}.hh-ic.zaag{background:#C2502F}
.hh-cta{display:flex;flex-wrap:wrap;gap:10px}
.hh-prijs{white-space:nowrap}
.hh-cta .btn .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-left:6px}
.hh .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.hh .btn-ghost:hover{background:rgba(255,255,255,.08)}
.hh-feit{list-style:none;margin:4px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px}
.hh-feit li{display:grid;gap:4px;font:500 13px/1.3 var(--f-b);color:#B9CBC2;max-width:16ch}
.hh-feit b{font:800 30px/1 var(--f-d);color:#fff}
/* de stapel beelden: blad met tekening, zaaglijst, telefoon met Stap voor stap */
.hh-vis{position:relative;min-height:470px}
.hh-blad{position:absolute;left:0;top:10px;width:88%;background:var(--blad);border-radius:16px 0 0 16px;padding:14px 14px 10px;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotate(-2deg);transform-origin:left top}
.hh-blad-k{display:block;font:600 11px/1 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:#6A756F;padding:4px 4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-blad img{border-radius:10px;width:100%}
.hh-zaag{position:absolute;left:-26px;bottom:6px;width:256px;background:#fff;color:#16201C;border-radius:14px;padding:12px 14px;box-shadow:0 20px 40px rgba(0,0,0,.35);transform:rotate(1.5deg)}
.hh-zaag-k{display:block;font:700 15px/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.hh-zaag table{width:100%;border-collapse:collapse;font:500 13px/1.2 var(--f-b)}
.hh-zaag td{padding:6px 0;border-top:1px solid #E4E6E0}
.hh-zaag td:last-child{text-align:right;white-space:nowrap;padding-left:8px;font-family:var(--f-m);font-size:12px;color:#44504A}
.hh-zaag td i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--tape);color:#16201C;border:1.5px solid #16201C;font:700 10.5px/1 var(--f-m)}
.hh-tel{position:absolute;right:28px;top:40px;width:212px;aspect-ratio:9/18.6;background:#0E1412;border-radius:34px;padding:9px;box-shadow:0 34px 70px rgba(0,0,0,.45),inset 0 0 0 1.5px #39433F;transform:rotate(3deg)}
.hh-tel-in{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#EBEDE8;position:relative}
.hh-tel-in::before{content:"";position:absolute;top:7px;left:50%;width:62px;height:18px;margin-left:-31px;border-radius:99px;background:#0E1412;z-index:1}
.hh-tel-in img{width:100%;margin-top:26px}
/* onderaan: de meubels met een handleiding */
.hh-meubels{grid-column:1/-1;min-width:0;position:relative;margin:28px 0 0 -48px;padding:20px 48px 24px;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.12)}
.hh-mk{display:block;margin-bottom:12px;font:600 12px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#CFE0D8}
.hh-meubels ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.hh-meubels li{position:relative;display:grid;align-content:start;gap:6px;background:var(--blad);border-radius:12px;padding:6px 6px 9px}
.hh-meubels img{width:100%;aspect-ratio:396/282;object-fit:cover;border-radius:8px}
.hh-meubels .hh-nm{font:600 13px/1.2 var(--f-b);color:#16201C;padding:0 4px;overflow-wrap:break-word;hyphens:auto}
.hh-meubels em{position:absolute;left:11px;top:11px;display:inline-flex;align-items:center;gap:4px;font:600 10.5px/1 var(--f-b);font-style:normal;background:#16201C;color:#fff;border-radius:99px;padding:4px 8px 4px 6px}
.hh-meubels em svg{width:9px;height:9px;fill:var(--tape)}
@media (max-width:1060px){
  .hh-kaart{grid-template-columns:minmax(0,1fr);padding:36px 0 0 28px}
  .hh-tx{padding-right:28px}
  .hh-vis{min-height:420px}
  .hh-meubels{margin-left:-28px;padding:18px 28px 22px}
  .hh-meubels ul{grid-template-columns:repeat(7,150px);overflow-x:auto;scrollbar-width:none;margin-right:-28px;padding-right:28px;scroll-snap-type:x mandatory}
  .hh-meubels ul::-webkit-scrollbar{display:none}
  .hh-meubels li{scroll-snap-align:start}
}
/* telefoon */
@media (max-width:760px){
  section.band.hh{padding-top:0}
  .hh-kaart{border-radius:18px;padding:22px 0 0 18px;gap:14px}
  .hh-tx{gap:13px;padding-right:18px}
  .hh-nieuw{font-size:17px;padding:7px 10px 5px}
  .hh-oog{font-size:10.5px}
  .hh-h{font-size:clamp(32px,10.5vw,42px)}
  .hh-lead{font-size:15.5px;line-height:1.45}
  .hh-kits{gap:6px}.hh-kits li{font-size:13px;gap:6px;padding:4px 9px 4px 4px}.hh-ic{width:22px;height:22px}.hh-ic svg{width:13px;height:13px}
  .hh-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .hh-cta .btn{justify-content:center;min-height:48px;white-space:normal;text-align:center}
  .hh-feit{display:none}
  .hh-vis{min-height:250px;overflow:hidden}
  .hh-blad{width:84%;top:8px;padding:9px 9px 6px;border-radius:12px 0 0 12px}
  .hh-blad-k{font-size:9px;padding:2px 2px 6px}
  .hh-zaag{left:0;bottom:12px;width:168px;padding:8px 10px;border-radius:11px}
  .hh-zaag-k{font-size:13px;margin-bottom:4px}
  .hh-zaag table{font-size:11px}.hh-zaag td{padding:4px 0}.hh-zaag td:last-child{font-size:10px}
  .hh-zaag td i{width:16px;height:16px;font-size:9px}
  .hh-zaag tr:nth-child(n+4){display:none}
  .hh-tel{width:118px;right:12px;top:4px;border-radius:22px;padding:6px}
  .hh-tel-in{border-radius:17px}
  .hh-tel-in::before{width:36px;height:11px;margin-left:-18px;top:5px}
  .hh-tel-in img{margin-top:18px}
  .hh-meubels{margin:0 0 0 -18px;padding:14px 0 18px 18px}
  .hh-mk{font-size:10.5px;margin-bottom:10px}
  .hh-meubels ul{grid-template-columns:repeat(7,118px);gap:8px;margin-right:0;padding-right:18px}
  .hh-meubels .hh-nm{font-size:12px}
}
/* smalle telefoon: de telefoon kleiner, zodat de zaaglijst leesbaar blijft */
@media (max-width:380px){
  .hh-tel{width:96px;right:8px;border-radius:18px;padding:5px}
  .hh-tel-in{border-radius:14px}
  .hh-zaag{width:150px}
}
/* ---------- Mijn account: uitleg bij Boodschappenlijsten en Find My Van (src/mijn-uitleg.html, src/mijn-uitleg.js) ----------
   Bovenop de stijl van Bouwplannen voor Gratis en Maandelijks (.bpl in src/handleidingen-site.css). De werktekeningen en de lijstjes
   per kit zijn die van de homepage (.kit, .kit-bp in src/kits.css); hun kleuren staan daar op #kits, hier op .lu. */
.lu{--k-stroom:#C99A00;--k-water:#1F6FB2;--k-hout:#9A6B3C;--k-iso:#6B4FA3;--bp:#1D3A32;--bp-ink:#E9F0EC;--bp-dim:rgba(233,240,236,.74);--bp-faint:rgba(233,240,236,.5);
  --bp-line:rgba(233,240,236,.22);--bp-grid:rgba(233,240,236,.06);--bp-stroom:#F2C41C;--bp-water:#6DB2EC;--bp-hout:#D9A867;--bp-iso:#B7A1E6;--fh-heart:#D8434A;--fh-heart-bg:#FBE4E4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lu{--k-stroom:#F2C41C;--k-water:#6DB2EC;--k-hout:#D9A867;--k-iso:#B7A1E6;--bp:#15291F;--fh-heart:#FF7B80;--fh-heart-bg:#3B2022}}
:root[data-theme="dark"] .lu{--k-stroom:#F2C41C;--k-water:#6DB2EC;--k-hout:#D9A867;--k-iso:#B7A1E6;--bp:#15291F;--fh-heart:#FF7B80;--fh-heart-bg:#3B2022}
.bpl-hero .bpl-noot{color:#D6E2DC;text-align:left}
.lu .bpl-cta .btn>span{display:inline}
/* lange woorden (boodschappenlijst, Einkaufsliste) niet afbreken: iets kleiner */
.lu .bpl-h1{hyphens:manual}
.lu-lijsten .bpl-h1{font-size:clamp(36px,4.4vw,60px)}

/* kop Boodschappenlijsten: de werktekening van de stroomkit als blad, een stukje lijst met vinkjes en prijzen, de telefoon */
.lu-blad{position:absolute;left:0;top:14px;width:84%;transform:rotate(-2deg);transform-origin:left top;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.lu-blad .kit{background:none;border:0;padding:0;display:block;overflow:visible}
.lu-blad .kit-bp{margin:0;border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--bc)}
.lu-blad .kit-read{display:none}
.lu-lijst{width:272px;bottom:18px}
.lu-lijst td:first-child{width:28px}
.lu-lijst td i{background:#fff!important;border-color:#9AA39E!important;border-radius:5px!important}
.lu-lijst tr.ok td i{background:var(--tape)!important;border-color:#16201C!important}
.lu-lijst tr.ok td i::after{content:"✓";font:700 11px/1 var(--f-b);color:#16201C}
.lu-lijst tr.ok td:nth-child(2){text-decoration:line-through;color:#7C8680}
.lu-lijst td:nth-child(2){font-size:12.5px}
.lu-lijst td:last-child{white-space:nowrap;padding-left:8px}

/* de vier kits: band, naam, werktekening en wat er op de lijst komt (van de homepage); twee naast elkaar, op de telefoon opzij vegen */
.lu-kits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lu-kits .kit{gap:14px;align-content:start;padding:0 20px 20px}
.lu-kits .kit-band{margin:0 -20px 4px}
.lu-kit-h{display:flex;align-items:center;gap:12px}
.lu-kit-h b{display:block;font:800 22px/1 var(--f-d);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.lu-kit-h small{display:block;margin-top:4px;font:400 14px/1.35 var(--f-b);color:var(--ink-2)}
.lu-kits .kit-lbl{font:600 11px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lu-kits .kit-bp{margin:0}
.lu-kits .kit li{font-size:14.5px;padding:9px 11px}

/* kop Find My Van: de vraagkaart van de homepage en de telefoon met het resultaat */
.lu-q{position:absolute;left:0;top:30px;width:78%;transform:rotate(-2deg);transform-origin:left top}
.lu-q .fmvh-q{box-shadow:0 30px 60px rgba(0,0,0,.35);color:var(--ink)}
.lu-fmv-vis .bpl-tel{top:70px}
.lu-k-kaart{background:#EEF0EB}
.lu .lu-k-kaart>img{object-fit:cover;object-position:center top}
.lu-k-test{display:grid;align-items:center;padding:18px;background:var(--blad)}
.lu-k-test ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lu-k-test li{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #E1E3DD;color:#16201C}
.lu-k-test li b{font:800 26px/1 var(--f-d)}
.lu-k-test li span{order:-1;font:600 10.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#6A756F}
.lu-pas2 .bpl-prijs span{max-width:24ch}
.lu-pas2 .bpl-pas-r{justify-items:center}
.lu-alt{background:none;border:0;padding:4px 6px;cursor:pointer;font:600 14px/1.3 var(--f-b);color:#16201C;text-decoration:underline;text-underline-offset:3px}

/* de isolatiekit staat op de homepage over de hele breedte (src/kits.css); hier gewoon een van de vier */
@media (min-width:1101px){
  .lu-kits .kit.iso{grid-column:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;column-gap:0}
  .lu-kits .kit.iso>*{grid-column:auto!important;grid-row:auto!important}
}
@media (max-width:760px){
  .lu-blad{width:80%;top:8px}
  .lu-blad .kit-bp{padding:8px 8px 0;gap:6px}
  .lu-blad .kit-bp figcaption{font-size:9px}.lu-blad .kit-bp .kit-bp-t{font-size:11px}
  .lu-lijst{width:178px;bottom:10px}
  .lu-lijst tr:nth-child(n+4){display:none}
  .lu-lijst td:nth-child(2){font-size:11px}
  .lu-lijst td i{width:15px!important;height:15px!important}
  .lu-q{width:86%;top:8px}
  .lu-q .fmvh-q{padding:12px 12px 10px;transform:scale(.62);transform-origin:left top;width:160%}
  .lu-fmv-vis .bpl-tel{top:20px}
  /* de kits: om opzij te vegen, zoals Zo ziet het eruit */
  .lu-kits{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:86%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;scrollbar-width:none}
  .lu-kits::-webkit-scrollbar{display:none}
  .lu-kits>*{scroll-snap-align:start}
  .lu-kits .kit{padding:0 14px 14px;gap:10px}
  .lu-kits .kit-band{margin:0 -14px 2px}
  .lu-kit-h b{font-size:19px}.lu-kit-h small{font-size:13px}
  .lu-kits .kit li{font-size:13px;padding:7px 9px}
  .lu-kits .kit-read{display:none}
  .lu-lijsten .bpl-h1{font-size:clamp(30px,9.4vw,40px)}
  .lu-k-test{padding:12px}.lu-k-test li{padding:8px 10px}.lu-k-test li b{font-size:20px}
}
/* ---------- Beurzenbanner en knop Beurzen (src/beurzenbanner.py, src/beurzen-banner.js) ---------- */
/* Banner: gele lichtkrant onder de menubalk van de homepage, over de volle breedte (body heeft 16px rand) */
.bb{display:block;margin-inline:-16px;background:#F2C41C;color:#1A1604;border-block:1px solid rgba(0,0,0,.07);text-decoration:none;outline-offset:-3px}
body.buiten-home .bb{display:none}   /* alleen op de homepage zelf, niet bij inloggen of in Mijn account */
.bb .s-beurs{--c:#2A6FC4}.bb .s-zelfbouw{--c:#C2502F}.bb .s-offroad{--c:#7B62B8}.bb .s-treffen{--c:#2B7548}
.bb-w{display:flex;align-items:center;height:46px;max-width:1192px;margin:0 auto;padding-inline:16px}
.bb-kop{flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:7px;background:#16201C;color:#fff;font:700 14px/1 var(--f-b)}
.bb-kop svg{width:17px;height:17px;fill:none;stroke:#F2C41C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-kort{display:none}
.bb-band{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.bb-rij{display:flex;width:max-content}
.bb.loopt .bb-rij{animation:bb-loop var(--duur,60s) linear infinite}
.bb:hover .bb-rij,.bb:focus-visible .bb-rij{animation-play-state:paused}
.bb-item{display:inline-flex;align-items:center;gap:8px;padding:0 20px;font:600 14.5px/46px var(--f-b);white-space:nowrap}
.bb-item i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.bb-item small{font:500 12.5px/1 var(--f-m);opacity:.75}
.bb-item em{font:700 11.5px/1 var(--f-m);font-style:normal;letter-spacing:.04em;background:#16201C;color:#F2C41C;padding:4px 6px;border-radius:4px}
.bb-naar{flex:none;display:flex;align-items:center;gap:6px;padding-left:14px;font:700 14px/1 var(--f-b);white-space:nowrap}
.bb-naar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.bb:hover .bb-naar svg{transform:translateX(3px)}
@keyframes bb-loop{to{transform:translateX(-50%)}}
@media (max-width:700px){
  .bb-w{height:42px;padding-inline:12px}
  .bb-kop{height:28px;padding:0 9px;font-size:13px}
  .bb-label{display:none}.bb-kort{display:inline}
  .bb-item{font-size:13.5px;line-height:42px;padding:0 16px}
  .bb-naar span{display:none}
}

@media (prefers-reduced-motion:reduce){.bb.loopt .bb-rij{animation:none}}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.feat div{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat svg{width:28px;height:28px;margin-bottom:14px;color:var(--ink)}
.feat p{font-size:15.5px;color:var(--ink-2);margin:0}
.feat .n{font:500 13px var(--f-m);color:var(--ink-3);display:block;margin-top:10px}
.bp-split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:40px;align-items:center}
.bp-h{font-size:clamp(40px,5.2vw,66px);line-height:.92;margin:0 0 18px}
.bp-text p{color:var(--ink-2)}
.bp{--bp:#1D3A32;background-color:var(--bp);background-image:linear-gradient(rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(rgba(233,240,236,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.035) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;border-radius:16px;padding:18px 16px 14px;color:#E9F0EC}
.bp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bp-svg{display:block;width:100%;height:auto}
@media (max-width:700px){.bp-svg{min-width:640px}}
@media (min-width:700px){.bp-hint{display:none}}
.bp-dim{font:500 12px var(--f-m);fill:#F2C41C}
.bp-note{font:400 11.5px var(--f-m);fill:rgba(233,240,236,.8)}
.bp-title{font:700 18px var(--f-d);letter-spacing:.08em;text-transform:uppercase;fill:#E9F0EC}
.bp-stamp{font:800 26px var(--f-d);letter-spacing:.04em;fill:#F2C41C}
.bp-figs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.bp-figs li{font:500 13px/1 var(--f-m);border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:var(--ink-2);background:var(--paper)}
.bp-figs b{color:var(--ink);font-weight:600}
.bp-hint{font:400 12.5px var(--f-m);color:rgba(233,240,236,.65);margin:10px 0 0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bp{--bp:#15291F}}
:root[data-theme="dark"] .bp{--bp:#15291F}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.price{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column}
.price.hl{border:2px solid var(--ink);box-shadow:var(--shadow)}
.price .tag{align-self:flex-start;font:600 12px/1 var(--f-b);background:var(--tape);color:var(--tape-ink);padding:5px 8px;border-radius:4px;margin-bottom:12px}
.price .amt{font:800 52px/1 var(--f-d);margin:6px 0 2px}
.price .per{font-size:14.5px;color:var(--ink-3);margin-bottom:18px}
.price ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.price li{display:flex;gap:9px;font-size:15.5px;line-height:1.4}
.price li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--good)}
.price li.off{color:var(--ink-3)}.price li.off svg{color:var(--ink-3)}
/* De vier bouwpakketten als tegels (alleen in de Projectpas): prijzenblok op de homepage (src/build.py), Abonnement in Mijn account
   (src/account-block.js, bpkKits) en de pagina's Prijzen (src/paginas.py). Kleuren en iconen als het kitsblok (src/kits.css). */
:root{--bpk-stroom:#A87F00;--bpk-water:#1F6FB2;--bpk-hout:#8A5E30;--bpk-iso:#6B4FA3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bpk-stroom:#F2C41C;--bpk-water:#6DB2EC;--bpk-hout:#D9A867;--bpk-iso:#B7A1E6}}
:root[data-theme="dark"]{--bpk-stroom:#F2C41C;--bpk-water:#6DB2EC;--bpk-hout:#D9A867;--bpk-iso:#B7A1E6}
/* ul.bpk-kits: zwaarder dan .price ul en .price li van het prijzenblok (flex onder elkaar) */
ul.bpk-kits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:none}
ul.bpk-kits > li{display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.1;padding:8px 2px 7px;border-radius:9px;font:600 12.5px/1.1 var(--f-b);background:var(--bg);border:1px solid var(--line);color:var(--ink);text-align:center;min-width:0;overflow-wrap:anywhere}
ul.bpk-kits svg{width:18px;height:18px;margin:0;flex:none;color:inherit;fill:none;stroke:var(--bpk);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bpk-stroom{--bpk:var(--bpk-stroom)}.bpk-water{--bpk:var(--bpk-water)}.bpk-hout{--bpk:var(--bpk-hout)}.bpk-iso{--bpk:var(--bpk-iso)}
li.bpk-li{display:block!important;margin:-2px 0 2px 27px}
.pl-feats li.off{color:var(--ink-3)}.pl-feats li.off svg{color:var(--ink-3)}

.price li sup{font-size:.75em;margin-left:1px}.fineprint.fn{margin-top:6px}
.price li.soon{color:var(--ink-2);font-style:italic}.price li.soon svg{color:var(--ink-3)}
.price li.peis{display:none}html[lang="nl"]:not([data-land]) .price li.peis-nl,html[lang="nl"][data-land="nl"] .price li.peis-nl,html[lang="de"]:not([data-land]) .price li.peis-de,html[lang="de"][data-land="de"] .price li.peis-de,html[lang="de"][data-land="at"] .price li.peis-at{display:flex}
.fineprint{font-size:14px;color:var(--ink-3);margin-top:16px}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font:600 18px/1.35 var(--f-b)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 24px/1 var(--f-m);color:var(--ink-3)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding-bottom:10px}
.cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:40px;border-radius:16px;background:var(--tape);color:var(--tape-ink)}
.cta h2{margin:0;color:var(--tape-ink)}
.cta .btn-ink{background:var(--tape-ink);color:var(--tape)}
body.only-list #navLinks,body.only-list #menuBtn,body.only-list #navAccount,body.only-list #navSignup,body.only-list footer.site>div:nth-child(2),body.only-list footer.site>div:nth-child(3){display:none}
body.only-list .nav-cta{margin-left:auto}
body.in-account #navLinks,body.in-account #menuBtn,body.in-account #navAccount,body.in-account #navSignup{display:none}
body.in-account .nav-cta{margin-left:auto}
body.only-list a.logo:not([href]){cursor:default}
footer.site{padding-block:44px 36px;border-top:1px solid var(--line);margin-top:72px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;font-size:15px}
footer.site .foot-pitch{color:var(--ink-3);font-size:15px;line-height:1.55;margin:14px 0 0;max-width:46ch;text-wrap:pretty}.social{display:flex;gap:8px;align-items:center;margin:0}.social.blok{margin-top:16px}.social a[href]{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#D7DBD4);color:inherit;text-decoration:none;padding:0}.social a[href]:hover,.social a[href]:focus-visible{border-color:currentColor}
footer.site h4{font:700 14px/1 var(--f-d);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:4px 0 12px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer.site a{text-decoration:none;color:var(--ink-2)}
footer.site .legal{grid-column:1/-1;color:var(--ink-3);font-size:13.5px;border-top:1px solid var(--line);padding-top:18px}
/* auth */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:start;padding-block:40px 20px}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px 26px;box-shadow:var(--shadow)}
.tabs{display:flex;gap:4px;background:var(--soft);border-radius:9px;padding:4px;margin-bottom:22px}
.tabs button{flex:1;border:0;background:transparent;border-radius:6px;padding:10px;font:700 15px/1 var(--f-b);color:var(--ink-2);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:14px;font-weight:600}
.field input{font:400 16px/1.2 var(--f-b);padding:12px 13px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--ink)}
.field select{font:400 16px/1.2 var(--f-b);padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}.field select:focus{outline:none;border-color:var(--ink)}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg)}.seg label{position:relative;cursor:pointer}.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.seg span{display:block;padding:8px 16px;border-radius:7px;font-size:15.5px;color:var(--ink-2)}.seg input:checked+span{background:var(--ink);color:var(--bg)}.seg input:focus-visible+span{outline:2px solid var(--tape-deep);outline-offset:2px}
.set-row{max-width:340px}
.field .err{font-size:13.5px;color:var(--bad)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);margin:4px 0 18px}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-4px 0 18px;font-size:14.5px}
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--tape-deep);text-underline-offset:3px;cursor:pointer;font:inherit}
.g-terms{margin:10px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.4;text-align:center}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:13.5px;margin:18px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.w100{width:100%}
.launch-note{background:var(--tape);color:var(--tape-ink);border-radius:10px;padding:14px 18px;margin:0 0 22px;font-size:16.5px;line-height:1.45}.launch-note strong{font:800 19px/1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;margin-right:6px}
.notice .link{color:inherit;text-decoration:underline;font-weight:600}
.notice{border-radius:8px;padding:11px 13px;font-size:14.5px;margin-bottom:16px}
.notice.ok{background:var(--good-bg);color:var(--good)}.notice.bad{background:var(--bad-bg);color:var(--bad)}
.auth-side ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.auth-side li{display:flex;gap:10px;color:var(--ink-2)}
.auth-side li svg{width:20px;height:20px;flex:none;color:var(--good);margin-top:3px}
/* account */
.acct{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;padding-block:32px 20px}
.trialbar{background:var(--paper);border:1px solid var(--tape);border-radius:12px;padding:14px 16px;margin:0 0 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center}
.trialbar .tb-txt{display:grid;gap:4px;min-width:0}
.trialbar strong{font:800 18px/1.1 var(--f-d);text-transform:uppercase;letter-spacing:.03em}
.trialbar span{color:var(--ink-3);font:500 13px/1.4 var(--f-m)}
.trialbar.over{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.trialbar.over span{color:var(--line)}
.tb-meter{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tb-meter i{height:6px;border-radius:3px;background:var(--tape)}
.tb-meter i.used{background:var(--line)}
.dcard .plan{position:relative}
.tbadge{position:absolute;top:10px;left:10px;font:700 11px/1 var(--f-d);letter-spacing:.07em;text-transform:uppercase;border-radius:4px;padding:5px 7px 4px;background:var(--tape);color:var(--tape-ink)}
.tbadge.ro{background:var(--ink);color:var(--bg)}
.dcard.new.locked{font:inherit;color:var(--ink-3);display:flex;flex-direction:column;text-align:center;padding:20px}
.dcard.new.locked span{color:var(--ink-2);font-weight:700}
.dcard.new.locked .lk{width:44px;height:44px;border-radius:10px;background:var(--soft);display:grid;place-items:center}
.dcard.new.locked .lk svg{width:20px;height:20px;color:var(--tape-deep)}
.dcard.new.locked:hover{border-color:var(--tape-deep)}
.side-nav button .lk{margin-left:auto;display:inline-grid;place-items:center;background:var(--tape);border-radius:4px;padding:3px 4px}
.side-nav button .lk svg{width:11px;height:11px;color:var(--tape-ink)}
.price li.off span{color:var(--ink-3)}
@media (max-width:560px){.trialbar{grid-template-columns:minmax(0,1fr)}.trialbar .btn{justify-self:start}}
/* Find My Van in het accountmenu: TIP-label op het menu-item, tipkaart bij Mijn ontwerpen, slot (proefversie) */
.side-nav .navtip{margin-left:auto;font:700 10.5px/1 var(--f-d);letter-spacing:.08em;background:var(--tape);color:var(--tape-ink);border-radius:4px;padding:4px 6px 3px}
.side-nav button[aria-current="page"] .navtip{background:var(--soft);color:var(--ink-2)}
.fmv-tipcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;background:var(--paper);border:1px solid var(--tape);border-left:6px solid var(--tape);border-radius:12px;padding:16px 46px 16px 16px;margin:0 0 18px}
.fmv-tipcard .tc-ic{width:44px;height:44px;border-radius:10px;background:var(--pine);color:var(--pine-ink);display:grid;place-items:center}
.fmv-tipcard .tc-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fmv-tipcard .tc-l{display:block;font:600 11.5px/1 var(--f-m);letter-spacing:.07em;color:var(--tape-deep);margin-bottom:5px}
.fmv-tipcard strong{display:block;font:800 22px/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
.fmv-tipcard p{margin:4px 0 0;color:var(--ink-2);font-size:14.5px;max-width:none}
.fmv-tipcard .tc-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.fmv-tipcard .tc-x:hover{background:var(--soft);color:var(--ink)}
.fmv-tipcard .tc-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:640px){.fmv-tipcard{grid-template-columns:auto minmax(0,1fr)}.fmv-tipcard .btn{grid-column:1/-1;justify-self:start}}
.side-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:16px;align-self:start}
.side-nav button{display:flex;gap:10px;align-items:center;text-align:left;border:0;background:transparent;border-radius:8px;padding:11px 12px;font:600 15.5px/1 var(--f-b);color:var(--ink-2);cursor:pointer}
.side-nav button svg{width:18px;height:18px}
.side-nav button[aria-current="page"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.side-nav hr{border:0;border-top:1px solid var(--line);margin:8px 0}
/* Community Campfire in Mijn account (src/mijn-campfire.js): rood getal met ongelezen seintjes in het menu en het overzicht,
   groen label op een gedeeld ontwerp in Mijn ontwerpen. De rest van de stijl laadt met js/campfire.js (src/campfire.css). */
.side-nav .cf-badge,.ah-cfn{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font:700 11.5px/20px var(--f-m);text-align:center;flex:none}
.side-nav .cf-badge[hidden]{display:none}
.side-nav .navtip:has(+ .cf-badge:not([hidden])){display:none}   /* met ongelezen seintjes alleen het rode getal, niet ook TIP */
.ah-ic.cf{background:#2A3550;color:#FFD9A0}
/* het kampvuurtje flakkert (in het menu van het overzicht en bij Aan het kampvuur), niet bij Beweging beperken */
.ah-ic.cf svg path:first-child,.ah-kv .ah-dk-ic svg path:first-child{transform-box:fill-box;transform-origin:50% 100%;animation:cfIcVlam 1.7s ease-in-out infinite alternate}
@keyframes cfIcVlam{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.93,1.07) skewX(-4deg)}65%{transform:scale(1.05,.94) skewX(3deg)}100%{transform:scale(.97,1.04) skewX(-1deg)}}
@media (prefers-reduced-motion:reduce){.ah-ic.cf svg path:first-child,.ah-kv .ah-dk-ic svg path:first-child{animation:none}}
.dcard .cf-gedeeld{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:4px;padding:3px 9px 3px 6px;border-radius:999px;background:var(--good-bg);color:var(--good);font:600 12px/1.3 var(--f-m)}
.dcard .cf-gedeeld svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dcard .acts{flex-wrap:wrap}
/* Handleidingen en Projectpas Pro op de site (src/account-block.js, src/mijn-overzicht.js, prijskaarten in src/build.py).
   In alle talen en achter de functie 'bouwplan'. Het bouwplan is Nederlands, Duits of Engels; .hd-en (de regel dat de handleidingen
   Engels zijn) staat alleen in de andere talen. */
html[lang="nl"] .hd-en,html[lang="de"] .hd-en,html[lang="en"] .hd-en{display:none!important}
/* voortgang van het bouwplan: onder je laatste ontwerp, op de ontwerpkaart */
.hd-voortgang{display:grid;gap:5px;margin-top:10px;max-width:440px;font:500 13.5px/1.35 var(--f-b);color:var(--ink-2)}
.hd-voortgang b{color:var(--ink);font-weight:600}
.hd-voortgang.kort{margin:10px 0 2px;padding:10px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font-size:13px}
.hd-bar{display:block;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.hd-bar i{display:block;height:100%;background:var(--good);border-radius:3px}
/* Mijn account → Bouwplannen */
.hd-intro{color:var(--ink-2);margin:-4px 0 18px;max-width:62ch}
/* blok Projectpas (of Pro) onder de meubels: de groene blauwdruk van Mijn account (.ah-bp in src/mijn-overzicht.css), keuze van Jeremy op 5 november 2026 */
.hd-pro{--bp:#1D3A32;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;color:#E9F0EC;border-radius:14px;padding:16px 18px;margin:0 0 18px;background-color:var(--bp);
  background-image:linear-gradient(rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(rgba(233,240,236,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.035) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hd-pro{--bp:#15291F}}
:root[data-theme="dark"] .hd-pro{--bp:#15291F}
.hd-pro b{color:#fff}
.hd-pro>div{flex:1 1 300px;min-width:0}
.hd-pro b{font:700 22px/1.1 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.hd-pro p{margin:4px 0 0;opacity:.82;font-size:14.5px}
.hd-pro-tag,.pro-tag{display:inline-block;background:var(--tape);color:var(--tape-ink);font:700 11px/1 var(--f-b);letter-spacing:.06em;padding:5px 7px;border-radius:5px;margin-right:8px;vertical-align:.25em}
.hd-cards{display:grid;gap:14px}
.hd-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:10px}
.hd-card-h{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.hd-card-h>div{min-width:0}
.hd-card-h b{display:block;font:600 17px/1.25 var(--f-b)}
.hd-card-h .mt{font:500 12.5px var(--f-m);color:var(--ink-3)}
.hd-rows{list-style:none;margin:0;padding:0}
.hd-rows li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.hd-n{font:600 12px var(--f-m);color:var(--ink-3)}
.hd-t{min-width:0;font:500 15px/1.3 var(--f-b)}
.hd-t small{display:block;color:var(--ink-3);font:500 12px var(--f-m);margin-top:2px}
.hd-t .hd-bar{margin-top:6px;max-width:240px}
.hd-chip{font:600 12px/1 var(--f-m);padding:6px 8px;border-radius:6px;background:var(--soft);color:var(--ink-2);white-space:nowrap}
.hd-chip.ok{background:var(--good-bg);color:var(--good)}
.hd-chip.pro{background:var(--tape);color:var(--tape-ink)}
.hd-acts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.hd-note{color:var(--ink-3);font-size:14px;margin:0}
/* Mijn account → Bouwplannen in de opbouw van voorbeeld B3 (renderBouwplannen): links de ontwerpen, rechts het gekozen ontwerp in een
   wit kader met de meubels en onderaan de plattegrond; telefoon (≤ 760 px): de ontwerpen als rij om opzij te vegen, meubels onder elkaar */
.hdb{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:22px;align-items:start}
.hdb-lijst{display:grid;gap:8px;min-width:0}
.hdb-kop{font:600 11.5px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 4px 2px}
.hdb-rij{display:grid;gap:8px}
.hdb-ont{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:76px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.hdb-ont.leeg{border-style:dashed}
.hdb-ont[aria-pressed="true"]{border:2px solid var(--ink);padding:9px;box-shadow:0 2px 0 var(--ink)}
.hdb-th{display:block;width:84px;height:54px;border-radius:8px;overflow:hidden;background:var(--soft)}
.hdb-th img,.hdb-th svg{display:block;width:100%;height:100%;object-fit:cover}
.hdb-tx{display:grid;gap:3px;min-width:0}
.hdb-tx b{font:600 15px/1.25 var(--f-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdb-tx small{font:500 12px/1.3 var(--f-m);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdb-mini{display:flex;align-items:center;gap:8px;margin-top:2px}
.hdb-mini .hd-bar{flex:1;height:5px}
.hdb-mini em{font:600 11px/1 var(--f-m);font-style:normal;color:var(--ink-2);white-space:nowrap}
.hdb-det{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.hdb-h{display:grid;gap:4px;padding:20px 22px;border-bottom:1px solid var(--line)}
.hdb-h h3{margin:0;font:700 24px/1.15 var(--f-b);text-wrap:balance}
.hdb-h .mt,.hdb-mk .mt{font:500 12.5px var(--f-m);color:var(--ink-3)}
.hdb-meubels{display:grid;gap:14px;padding:20px 22px 22px}
.hdb-mk{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px}
.hdb-mk h4{margin:0;font:800 22px/1 var(--f-d);text-transform:uppercase}
.hdb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px}
.hdb-m{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.hdb-img{position:relative;padding:8px 8px 0}
.hdb-img img{display:block;width:100%;height:auto;aspect-ratio:396/282;border-radius:10px}
.hdb-vid{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:5px;background:#16201C;color:#fff;border-radius:99px;padding:4px 10px 4px 8px;font:600 12px/1.2 var(--f-b)}
.hdb-vid svg{width:11px;height:11px;fill:currentColor}
.hdb-soon{background:#fff;color:#44504A;border:1px dashed #6A756F}
.hdb-mb{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;flex:1}
.hdb-mr{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hdb-n{font:600 11px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hdb-t{font:700 16px/1.25 var(--f-b);text-wrap:balance}
.hdb-p{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--f-m);color:var(--ink-2)}
.hdb-p .hd-bar{flex:1}
.hdb-p span:last-child{white-space:nowrap}
.hdb-acts{margin-top:auto;padding-top:4px;display:grid;gap:4px}
.hdb-acts .btn{width:100%;justify-content:center}
.hdb-gratis{background:none;border:0;padding:6px;min-height:32px;font:500 13.5px var(--f-b);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hdb-meubels .hd-pro,.hdb-meubels .notice{margin:0}
.hdb-leeg{display:grid;gap:12px;justify-items:start;padding:20px 22px}
.hdb-leeg p{margin:0;color:var(--ink-2);max-width:56ch}
.hdb-fig{margin:0;border-top:1px solid var(--line);background:var(--soft)}
.hdb-fig>img,.hdb-fig>svg{display:block;width:100%;max-height:380px;object-fit:contain}
.hdb-fig figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;padding:8px 22px;background:var(--paper);border-top:1px solid var(--line);font:500 12.5px var(--f-m);color:var(--ink-3)}
.hdb-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:none;border:0;padding:0;font:600 15px var(--f-b);color:var(--ink);cursor:pointer}
.hdb-link .i{width:16px;height:16px}
@media (max-width:760px){
  .hdb{grid-template-columns:minmax(0,1fr);gap:16px}
  .hdb-rij{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scroll-snap-type:x proximity}
  .hdb-ont{flex:0 0 150px;grid-template-columns:minmax(0,1fr);gap:7px;padding:7px 7px 9px;align-items:start;scroll-snap-align:start}
  .hdb-ont[aria-pressed="true"]{padding:6px 6px 8px}
  .hdb-th{width:100%;height:84px}
  .hdb-tx b{white-space:normal;height:2.5em;overflow:hidden;font-size:14px}
  .hdb-tx small{display:none}
  .hdb-h,.hdb-meubels,.hdb-leeg{padding-left:14px;padding-right:14px}
  .hdb-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .hdb-m{display:grid;grid-template-columns:118px minmax(0,1fr);padding:10px;gap:10px 12px;align-items:center}
  .hdb-img{padding:0;grid-row:1/4;align-self:center}
  .hdb-m{row-gap:4px}
  .hdb-img img{border-radius:8px}
  .hdb-vid{left:6px;top:auto;bottom:6px;padding:3px 7px 3px 6px;font-size:10.5px}
  .hdb-mb{display:contents}
  .hdb-mr,.hdb-t,.hdb-p{grid-column:2}
  .hdb-acts{grid-column:1/-1;padding-top:0}
  .hdb-fig figcaption{padding:6px 14px}
}
/* bestelpagina: afstand van het herroepingsrecht en de handleidingen op de kaart */
.order-afstand{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;padding:13px 14px;margin:0 0 14px;font-size:15px;line-height:1.45;cursor:pointer}
.order-afstand input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.order-hd-ontwerp{margin:6px 0 4px;font-size:14px;opacity:.85}
.order-hd{list-style:none;margin:0 0 6px;padding:0}
.order-hd li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(233,240,236,.16);font-size:15px}
.order-hd s{opacity:.6;margin-right:4px}
.order-hd-korting{margin:4px 0 8px;font-size:13px;opacity:.8}
/* prijskaarten: Projectpas Pro met geel label, en dan vier kaarten naast elkaar */
.price.pro{border-color:var(--ink)}
.price.pro h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price.pro h3 .pro-tag{margin:0;vertical-align:0}
.price .btn-pro{background:var(--tape);color:var(--tape-ink);border-color:var(--tape)}
@media (min-width:1100px){.prices:has(.price.pro:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}.prices:has(.price.pro:not([hidden])) ul.bpk-kits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px) and (max-width:1099px){.prices:has(.price.pro:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Projectpas Pro: de handleidingen als tegels (zoals de bouwpakketten, src/bouwpakket.css) */
ul.bpk-kits.hd-kits{grid-template-columns:repeat(3,minmax(0,1fr))}
ul.bpk-kits.hd-kits > li{--bpk:var(--ink-2)}
/* Projectpas met de functie 'handleidingen-pas' (HD_BLOK in src/build.py, voorbeeld A van 5 november 2026): de handleidingen als
   tekeningen uit het bouwplan, een zwarte stip bij de meubels met een bouwvideo. Zolang dit blok te zien is, worden de bouwpakketten
   in dezelfde kaart een rij kleine labels; zonder de functie blijven het de grote tegels. */
.price li.hd-blok{display:block;margin:2px 0 0}
.hd-blok-h{display:flex;gap:9px}
.hd-blok-h small{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-2);margin-top:1px}
.hd-blok-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
.hd-blok-m{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--paper)}
.hd-blok-m img{display:block;width:100%;height:auto;aspect-ratio:396/282;object-fit:cover;background:#F4F3EF}
.hd-blok-m>span{font:600 11.5px/1.15 var(--f-b);text-align:center;padding:4px 2px 5px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.hd-blok i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#191C1A;flex:none}
.hd-blok i svg{width:9px;height:9px;margin:0 0 0 1.5px;fill:#fff;stroke:none;color:#fff}
.hd-blok-m i{position:absolute;top:5px;right:5px}
.price:has(li.hd-blok:not([hidden])) ul.bpk-kits:not(.hd-kits){display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;margin:-3px 0 2px}
.price:has(li.hd-blok:not([hidden])) ul.bpk-kits:not(.hd-kits)>li{flex:none;flex-direction:row;gap:4px;padding:2px 7px 2px 5px;border-radius:999px;font:600 11.5px/1.3 var(--f-b);color:var(--ink-2)}
.price:has(li.hd-blok:not([hidden])) ul.bpk-kits:not(.hd-kits) svg{width:12px;height:12px;stroke-width:2.2}

/* ---------- Bouwplannen voor Gratis en Maandelijks: uitleg met de Projectpas (bplHTML in src/account-block.js, 6 november 2026) ----------
   Groene kop met echte beelden uit het bouwplan, Zo werkt het, Zo ziet het eruit, de meubels en de Projectpas; licht en donker,
   op de telefoon zo compact dat het blok zonder ontwerpen in drie schermen past. Voorbeeld: onderzoek/bouwplannen-leeg/. */
.bpl{--groen:#1D3A32;--groen-2:#26493F;--blad:#F4F3EE;display:grid;gap:56px;margin-top:8px}
.bpl img{display:block;max-width:100%;height:auto}
.bpl .btn .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 1 · hero: links de tekst, rechts het bouwplan als stapel (blad met tekening, zaaglijst, telefoon) op een groene ondergrond */
.bpl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;background:var(--groen);color:#F1F4F1;border-radius:24px;padding:48px 0 48px 48px;overflow:hidden;position:relative}
.bpl-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.bpl-hero-tx{position:relative;min-width:0;display:grid;gap:20px;align-content:center}
.bpl-tag{display:inline-flex;align-items:center;gap:8px;justify-self:start;font:600 12px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#CFE0D8;border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:8px 12px}
.bpl-tag i{width:7px;height:7px;border-radius:50%;background:var(--tape)}
.bpl-h1{margin:0;font:800 clamp(44px,5.4vw,72px)/.92 var(--f-d);text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.bpl-h1 mark{background:none;color:var(--tape)}
.bpl-h1{overflow-wrap:break-word;hyphens:auto}
.bpl-lead{margin:0;font:400 18px/1.55 var(--f-b);color:#D6E2DC;max-width:44ch}
.bpl-cta{display:flex;flex-wrap:wrap;gap:10px}
.bpl-hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.bpl-feit{list-style:none;margin:8px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px}
.bpl-feit li{display:grid;gap:4px;font:500 13px/1.3 var(--f-b);color:#B9CBC2;max-width:16ch}
.bpl-feit b{font:800 30px/1 var(--f-d);color:#fff}

.bpl-hero-vis{position:relative;min-height:470px}
.bpl-blad{position:absolute;left:0;top:10px;width:88%;background:var(--blad);border-radius:16px 0 0 16px;padding:14px 14px 10px;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotate(-2deg);transform-origin:left top}
.bpl-blad-k{display:block;font:600 11px/1 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:#6A756F;padding:4px 4px 10px}
.bpl-blad img{border-radius:10px;width:100%}
.bpl-zaag{position:absolute;left:-26px;bottom:6px;width:256px;background:#fff;color:#16201C;border-radius:14px;padding:12px 14px;box-shadow:0 20px 40px rgba(0,0,0,.35);transform:rotate(1.5deg)}
.bpl-zaag-k{display:block;font:700 15px/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.bpl-zaag table,.bpl-k-tab table{width:100%;border-collapse:collapse;font:500 13px/1.2 var(--f-b)}
.bpl-zaag td{padding:6px 0;border-top:1px solid #E4E6E0}
.bpl-zaag td:last-child{text-align:right;font-family:var(--f-m);font-size:12px;color:#44504A}
.bpl i{font-style:normal}
.bpl-zaag td i,.bpl-k-tab td i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--tape);color:#16201C;border:1.5px solid #16201C;font:700 10.5px/1 var(--f-m)}
.bpl-tel{position:absolute;right:28px;top:40px;width:212px;aspect-ratio:9/18.6;background:#0E1412;border-radius:34px;padding:9px;box-shadow:0 34px 70px rgba(0,0,0,.45),inset 0 0 0 1.5px #39433F;transform:rotate(3deg)}
.bpl-tel-in{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#EBEDE8;position:relative}
.bpl-tel-in::before{content:"";position:absolute;top:7px;left:50%;width:62px;height:18px;margin-left:-31px;border-radius:99px;background:#0E1412;z-index:1}
.bpl-tel-in img{width:100%;margin-top:26px}

/* koppen van de secties */
.bpl-sec{display:grid;gap:22px}
.bpl-sk .eyebrow{margin-bottom:8px}
.bpl-h2{margin:0;font:800 clamp(28px,3.2vw,38px)/1 var(--f-d);text-transform:uppercase;color:var(--ink)}

/* 2 · zo werkt het: drie stappen met een stippellijn ertussen */
.bpl-stap{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.bpl-stap li{position:relative;display:grid;gap:10px;align-content:start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px}
.bpl-stap li:not(:last-child)::after{content:"";position:absolute;right:-17px;top:44px;width:18px;border-top:2px dashed var(--ink-3);z-index:1}
.bpl-nr{position:absolute;right:18px;top:14px;font:800 56px/1 var(--f-d);color:var(--line)}
.bpl-stap svg{width:44px;height:44px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;background:var(--tape);border-radius:12px;padding:6px;box-sizing:content-box}
.bpl-stap b{font:700 19px/1.2 var(--f-b);color:var(--ink);margin-top:6px}
.bpl-stap p{margin:0;font:400 15px/1.5 var(--f-b);color:var(--ink-2)}

/* 3 · zo ziet het eruit */
.bpl-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bpl-k{margin:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.bpl-k-img{position:relative;aspect-ratio:4/3;background:var(--blad);border-bottom:1px solid var(--line);overflow:hidden}
.bpl-k-img>img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.bpl-k-tab{padding:16px 16px 0;color:#16201C}
.bpl-k-tab th{text-align:left;font:600 10.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#6A756F;padding:0 6px 8px 0}
.bpl-k-tab td{padding:7px 6px 7px 0;border-top:1px solid #E1E3DD}
.bpl-k-tab td:nth-child(3){font-family:var(--f-m);font-size:12px}
.bpl-k-tab td:last-child{color:#6A756F;text-align:right}
.bpl-k-vid video{width:100%;height:100%;object-fit:cover;object-position:100% center;transform:scale(1.14);transform-origin:right center;display:block;background:var(--blad)}
.bpl-k-vid .bpl-vid{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;background:#16201C;color:#fff;border-radius:99px;padding:5px 11px 5px 9px;font:600 12px/1.2 var(--f-b)}
.bpl-k-vid .bpl-vid svg{width:11px;height:11px;fill:var(--tape)}
.bpl-k figcaption{display:grid;gap:6px;padding:16px 18px 20px}
.bpl-k figcaption b{font:700 17px/1.25 var(--f-b);color:var(--ink)}
.bpl-k figcaption span{font:400 14.5px/1.5 var(--f-b);color:var(--ink-2)}

/* 4 · meubels */
.bpl-meubels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.bpl-meubels li{position:relative;display:grid;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px 8px 12px}
.bpl-meubels img{width:100%;aspect-ratio:396/282;object-fit:cover;border-radius:9px}
.bpl-meubels span{font:600 14px/1.25 var(--f-b);color:var(--ink);padding:0 4px}
.bpl-meubels em{position:absolute;left:14px;top:14px;font:600 11px/1 var(--f-b);font-style:normal;background:#16201C;color:#fff;border-radius:99px;padding:4px 8px}

/* hero: link naar de Projectpas onder de knoppen */
.bpl-paslink{justify-self:start;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:-6px;font:600 14.5px/1.3 var(--f-b);color:var(--tape);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.bpl-paslink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 5 · Projectpas: geel blok, links naam en prijs, midden wat erin zit, rechts de knop */
.bpl-pas{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px 36px;align-items:center;background:var(--tape);color:#16201C;border-radius:22px;padding:30px 34px;margin-bottom:8px;scroll-margin-top:90px}
.bpl-pas-l{display:grid;gap:10px}
.bpl-pas-tag{justify-self:start;font:600 11.5px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;background:#16201C;color:var(--tape);border-radius:99px;padding:6px 10px}
.bpl-pas h3{margin:0;font:800 34px/.95 var(--f-d);text-transform:uppercase;max-width:11ch}
.bpl-prijs{margin:0;display:flex;align-items:center;gap:12px}
.bpl-prijs b{font:800 44px/1 var(--f-d)}
.bpl-prijs span{font:500 13px/1.35 var(--f-b);color:#3A3612}
.bpl-pas-lijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bpl-pas-lijst li{position:relative;padding-left:30px;font:600 15.5px/1.4 var(--f-b)}
.bpl-pas-lijst li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#16201C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23F2C41C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.bpl-pas-r{display:grid;gap:10px;justify-items:center}
.bpl-pas .btn{background:#16201C;color:#fff;font-size:17px;padding:16px 24px}
.bpl-pas-alt{font:500 13.5px/1.3 var(--f-b);color:#3A3612;text-decoration:underline;text-underline-offset:3px}

/* hint "veeg voor meer" alleen op de telefoon */
.bpl-veeg{display:none;font:500 12px/1 var(--f-m);color:var(--ink-3)}
.bpl-sk{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 12px}
.bpl-sk>div{display:grid}

/* tablet */
@media (max-width:1060px){
  .bpl-hero{grid-template-columns:1fr;padding:36px 28px 0}
  .bpl-hero-vis{min-height:420px;margin:0 -28px 0 0}
  .bpl-meubels{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bpl-pas{grid-template-columns:auto minmax(0,1fr)}
  .bpl-pas-r{grid-column:1/-1;justify-items:start;grid-auto-flow:column;align-items:center;gap:18px}
}

/* telefoon: elk blok zo veel mogelijk in één scherm (390 × 844) */
@media (max-width:760px){
  .bpl{gap:30px;margin-top:0}
  .bpl-sec{gap:12px}
  .bpl-sk .eyebrow{margin-bottom:4px;font-size:12px}
  .bpl-h2{font-size:26px}

  /* hero: kleiner, de beelden lager en platter, de feiten als één regel */
  .bpl-hero{border-radius:18px;padding:22px 18px 0;gap:14px}
  .bpl-hero-tx{gap:12px}
  .bpl-tag{font-size:10.5px;padding:6px 10px}
  .bpl-h1{font-size:clamp(32px,10.5vw,40px)}
  .bpl-lead{font-size:15px;line-height:1.45}
  .bpl-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .bpl-cta .btn{padding:12px 14px;font-size:15px;min-height:46px}
  .bpl-paslink{margin-top:0;font-size:13.5px}
  .bpl-feit{display:none}
  .bpl-hero-vis{min-height:250px;margin:0 -18px 0 0}
  .bpl-blad{width:84%;top:8px;padding:9px 9px 6px;border-radius:12px 0 0 12px}
  .bpl-blad-k{font-size:9px;padding:2px 2px 6px}
  .bpl-zaag{left:0;bottom:12px;width:168px;padding:8px 10px;border-radius:11px}
  .bpl-zaag-k{font-size:13px;margin-bottom:4px}
  .bpl-zaag table{font-size:11px}.bpl-zaag td{padding:4px 0}.bpl-zaag td:last-child{font-size:10px}
  .bpl-zaag td i{width:16px;height:16px;font-size:9px}
  .bpl-zaag tr:nth-child(n+4){display:none}
  .bpl-tel{width:118px;right:12px;top:4px;border-radius:22px;padding:6px}
  .bpl-tel-in{border-radius:17px}
  .bpl-tel-in::before{width:36px;height:11px;margin-left:-18px;top:5px}
  .bpl-tel-in img{margin-top:18px}

  /* zo werkt het: drie regels met het pictogram links */
  .bpl-stap{grid-template-columns:1fr;gap:8px}
  .bpl-stap li{grid-template-columns:40px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:12px 14px;border-radius:14px}
  .bpl-stap li:not(:last-child)::after{right:auto;left:33px;top:auto;bottom:-9px;width:0;height:8px;border-top:0;border-left:2px dashed var(--ink-3)}
  .bpl-stap svg{grid-row:1/3;width:28px;height:28px;padding:6px;border-radius:10px}
  .bpl-stap b{margin:0;font-size:16px;align-self:end}
  .bpl-stap p{font-size:13.5px;line-height:1.4}
  .bpl-nr{display:none}

  /* zo ziet het eruit: kaarten om opzij te vegen, platter */
  .bpl-drie{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;scrollbar-width:none}
  .bpl-drie::-webkit-scrollbar{display:none}
  .bpl-drie>*{scroll-snap-align:start}
  .bpl-k{border-radius:14px}
  .bpl-k-img{aspect-ratio:16/11}
  .bpl-k-tab{padding:10px 12px 0}
  .bpl-k-tab table{font-size:12px}.bpl-k-tab td{padding:5px 4px 5px 0}
  .bpl-k-tab td i{width:17px;height:17px;font-size:9px}
  .bpl-k figcaption{padding:10px 12px 12px;gap:3px}
  .bpl-k figcaption b{font-size:15px}
  .bpl-k figcaption span{font-size:13px;line-height:1.4}

  /* meubels: twee rijen om opzij te vegen */
  .bpl-meubels{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-columns:31%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;scrollbar-width:none}
  .bpl-meubels::-webkit-scrollbar{display:none}
  .bpl-meubels li{scroll-snap-align:start;gap:5px;padding:5px 5px 8px;border-radius:11px}
  .bpl-meubels img{border-radius:7px}
  .bpl-meubels span{font-size:12px;padding:0 2px}
  .bpl-meubels em{left:9px;top:9px;font-size:9.5px;padding:3px 6px}
  .bpl-veeg{display:block}

  /* Projectpas */
  .bpl-pas{grid-template-columns:1fr;gap:14px;padding:20px 18px;border-radius:18px}
  .bpl-pas-l{grid-template-columns:1fr auto;align-items:end;gap:8px 12px}
  .bpl-pas-tag{grid-column:1/-1}
  .bpl-pas h3{font-size:28px}
  .bpl-prijs{display:grid;gap:2px;justify-items:end;text-align:right}
  .bpl-prijs b{font-size:36px}
  .bpl-prijs span{font-size:11.5px}
  .bpl-pas-lijst{gap:7px}
  .bpl-pas-lijst li{font-size:14px;padding-left:28px}
  .bpl-pas-r{grid-auto-flow:row;justify-items:stretch;gap:8px}
  .bpl-pas .btn{width:100%;padding:15px}
  .bpl-pas-alt{justify-self:center}
}

/* Gratis en Maandelijks met ontwerpen: de stappen die je al deed, je bouwplannen in het blok, de noot bij overstappen */
.bpl-stap b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.bpl-gedaan{display:none;align-items:center;gap:4px;font:600 11px/1 var(--f-m);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--good);background:var(--good-bg);border-radius:99px;padding:4px 8px}
.bpl-gedaan::before{content:"✓"}
.bpl-stap li.klaar .bpl-gedaan{display:inline-flex}
.bpl-stap li.klaar svg{background:var(--good-bg);stroke:var(--good)}
.bpl-jouw{scroll-margin-top:90px}
.bpl-jouw .hd-pro{display:none}
.bpl-noot{margin:0;font:500 12.5px/1.35 var(--f-b);color:#3A3612;text-align:center;max-width:30ch}
/* in Je bouwplannen geen koopknop per meubel (die staat in de kop en in het Projectpas-blok; renderBouwplannen), de gratis eerste stap als knop */
.bpl-jouw .hdb-gratis{border:1.5px solid var(--ink);border-radius:8px;text-decoration:none;font:700 14px/1 var(--f-b);color:var(--ink);padding:10px 12px;min-height:40px}
@media (max-width:760px){
  /* telefoon: elk meubel één regel (beeld links, knop rechts eronder), zonder de grote plattegrond (die staat al klein bij het ontwerp) */
  .bpl-jouw .hdb-fig{display:none}
  .bpl-jouw .hdb-m{grid-template-columns:96px minmax(0,1fr);padding:8px;gap:3px 10px}
  .bpl-jouw .hdb-img{grid-row:1/5}
  .bpl-jouw .hdb-acts{grid-column:2;justify-items:start}
  .bpl-jouw .hdb-gratis{padding:7px 10px;min-height:32px;font-size:12.5px;width:auto}
  .bpl-jouw .hdb-p{font-size:11px}
  .bpl-jouw .hdb-t{font-size:14.5px}
}
.bpl-hero .bpl-noot{color:#D6E2DC;text-align:left;max-width:none}
/* zaaglijst in de kop: ruimte na de letter, maten op één regel (ook met de langere Duitse namen) */
.bpl-zaag td:first-child,.bpl-k-tab td:first-child{width:26px}
.bpl-zaag td:last-child,.bpl-k-tab td:nth-child(3){white-space:nowrap;padding-left:8px}
.bpl-zaag td:nth-child(2){line-height:1.15}
/* Mijn account → Hulp en vragen (src/account-block.js, database: supabase/beheer.sql).
   Computer: Stel een vraag bovenaan, daaronder de vragen links en het gesprek rechts (samen hooguit 940 px, het gesprek
   hooguit 580 px zodat de regels leesbaar blijven). Telefoon: lijst, formulier en gesprek als losse schermen. */
.field textarea{font:400 16px/1.45 var(--f-b);padding:12px 13px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-height:130px;resize:vertical;width:100%;box-sizing:border-box}
.field textarea:focus{outline:none;border-color:var(--ink)}
.hl2{max-width:940px}
.hl2 .btn svg{width:18px;height:18px;flex:none}
.hl-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-6px 0 16px}
.hl-top p{margin:0;max-width:none;color:var(--ink-2);font-size:16px}
.hl-top .btn{flex:none}
.hl-cols{display:flex;gap:20px;align-items:stretch}
.hl-qs,.hl-pane{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;height:600px}
.hl-qs{flex:0 1 340px;min-width:280px}
.hl-pane{flex:1 1 420px;min-width:0;max-width:580px}
.hl-qh{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 16px;border-bottom:1px solid var(--soft)}
.hl-qh b{font-size:16px}
.hl-n{min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--tape);color:var(--tape-ink);font:600 11px/1 var(--f-m)}
.hl-list{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto}
.hl-list>li+li{border-top:1px solid var(--soft)}
.hl-row{position:relative;display:flex;flex-direction:column;gap:5px;width:100%;padding:14px 18px 14px 20px;background:var(--paper);border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.hl-row:hover{background:var(--bg)}
.hl-row.on{background:var(--soft)}
.hl-row.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--tape)}
.hl-rt{display:flex;align-items:center;gap:8px;min-width:0}
.hl-rt .mt{flex:1;min-width:0;font:500 11.5px/1.3 var(--f-m);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--tape)}
.hl-row .sj{font-weight:700;font-size:15.5px;line-height:1.25;overflow-wrap:anywhere}
.hl-row .ls{font-size:13.5px;line-height:1.35;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hl2 .pill{flex:none;font:600 10.5px/1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;padding:4px 8px 3px}
.pill.hl-st-wacht{background:var(--tape);color:var(--tape-ink)}
.pill.hl-st-opgelost{background:var(--good-bg);color:var(--good)}
.hl-wait{color:var(--ink-3);padding:16px;margin:0}
.hl-none,.hl-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--ink-3);font-size:15px;line-height:1.4}
.hl-none b,.hl-empty b{color:var(--ink);font-size:16.5px}
.hl-none svg,.hl-empty svg{width:34px;height:34px;color:var(--ink-3);margin-bottom:4px}
/* gesprek */
.hl-conv{flex:1;min-height:0;display:flex;flex-direction:column}
.hl-ch{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.hl-ct{display:flex;flex-direction:column;gap:6px;min-width:0}
.hl-ct b{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.hl-cm{display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--f-m);color:var(--ink-3)}
.hl-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:18px}
.hl-msgs .notice{margin:0}
.hl-msg{align-self:flex-start;max-width:85%;border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper);border:1px solid var(--line);box-sizing:border-box}
.hl-msg small{display:block;font:500 11.5px/1.3 var(--f-m);color:var(--ink-3);margin-bottom:4px;white-space:normal}
.hl-msg.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:#FFF6D1;border-color:#F2DE8A;color:#16201C}
.hl-msg.me small{color:#5E6A63}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl-msg.me{background:#3A3315;border-color:#6B5A17;color:var(--ink)}:root:not([data-theme="light"]) .hl-msg.me small{color:var(--ink-3)}}
:root[data-theme="dark"] .hl-msg.me{background:#3A3315;border-color:#6B5A17;color:var(--ink)}
:root[data-theme="dark"] .hl-msg.me small{color:var(--ink-3)}
.hl-done{align-self:center;margin-top:4px}
.hl-reply{flex:none;display:flex;align-items:flex-end;gap:10px;padding:12px;border-top:1px solid var(--soft);background:var(--paper)}
.hl-reply textarea{flex:1;min-width:0;min-height:48px;max-height:180px;font:400 16px/1.45 var(--f-b);padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);resize:vertical;box-sizing:border-box}
.hl-reply textarea:focus{outline:none;border-color:var(--ink)}
.hl-reply .btn{min-height:48px}
.hl-reply .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* formulier */
.hl-form{flex:1;min-height:0;overflow-y:auto;padding:20px 22px}
.hl-form h3{margin:0 0 14px}
.hl-form .lbl{font-size:14px;font-weight:600}
.hl-form .seg{display:flex}
.hl-form .fineprint{margin:0 0 14px}
.hl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hl-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-6px 0 6px -8px;padding:0 12px 0 4px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:600 15.5px/1 var(--f-b);cursor:pointer}
.hl-back svg{width:20px;height:20px}
.hl-askbar{display:none}
/* telefoon: drie schermen na elkaar */
@media (max-width:980px){
  .hl-top .btn{display:none}
  .hl-top{margin:-4px 0 18px}
  .hl-cols{display:block}
  .hl-qs,.hl-pane{height:auto;border-radius:12px}
  .hl-qs .hl-list{overflow:visible}
  .hl-v-new>.acct-head,.hl-v-conv>.acct-head,.hl-v-list .hl-pane,.hl-v-new .hl-qs,.hl-v-conv .hl-qs,.hl-v-new .hl-top,.hl-v-conv .hl-top{display:none}
  .hl-v-list .hl-askbar{display:block;position:sticky;bottom:0;z-index:3;margin:16px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--bg) 30%)}
  .hl-askbar .btn{width:100%;min-height:52px}
  .hl-v-new .hl-pane,.hl-v-conv .hl-pane{border:0;background:transparent;overflow:visible}
  .hl-form{padding:0;overflow:visible}
  .hl-form h3{font:800 34px/.95 var(--f-d);text-transform:uppercase;margin:4px 0 18px}
  .hl-form .hl-foot{position:sticky;bottom:0;z-index:3;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
  .hl-form .hl-foot .btn{flex:1;min-height:52px}
  .hl-v-conv .hl-conv{min-height:calc(100svh - 150px)}
  .hl-v-conv .hl-ch{position:sticky;top:0;z-index:3;flex-direction:column;align-items:flex-start;gap:2px;margin:0 -16px;padding:6px 16px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
  .hl-v-conv .hl-ch .hl-back{margin:0 0 0 -8px}
  .hl-msgs{overflow:visible;padding:18px 0}
  .hl-msg{max-width:88%}
  .hl-v-conv .hl-reply{position:sticky;bottom:0;z-index:3;margin:0 -16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
  .hl-reply .btn span{display:none}
  .hl-reply .btn{padding:0 15px}
}
/* Welkom na het bevestigen van het e-mailadres (src/auth-block.js, welcome()): een groot venster met confetti */
.welcome-dlg{border:0;padding:0;border-radius:18px;width:min(460px,calc(100% - 32px));background:var(--paper);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.35);text-align:center;overflow:hidden}
.welcome-dlg::backdrop{background:rgba(12,20,16,.55)}
.welcome-dlg .wl-top{background:var(--pine);color:var(--pine-ink);padding:30px 24px 22px}
.welcome-dlg .wl-mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--tape);color:var(--tape-ink);margin-bottom:14px}
.welcome-dlg .wl-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.welcome-dlg h2{font:800 clamp(30px,7vw,40px)/.98 var(--f-d);text-transform:uppercase;margin:0;color:inherit}
.welcome-dlg .wl-body{padding:20px 24px 24px}
.welcome-dlg .wl-ok{display:inline-flex;align-items:center;gap:8px;background:var(--good-bg);color:var(--good);font:600 15px/1.3 var(--f-b);padding:8px 14px;border-radius:999px;margin:0 0 12px}
.welcome-dlg p{margin:0 0 20px;color:var(--ink-2);font-size:16.5px;max-width:none}
.welcome-dlg .btn{width:100%}
.welcome-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147483000}
@media (prefers-reduced-motion:reduce){.welcome-confetti{display:none}}
/* Persoonlijke korting (beheer → Korting geven) en de vraag om tips, nieuws en aanbiedingen per mail (src/account-block.js) */
.trialbar.kt-bar{border-color:var(--tape);box-shadow:inset 4px 0 0 var(--tape)}
.kt-plan{margin:0 0 18px;display:grid;gap:6px;line-height:1.45}
.kt-plan ul{margin:0;padding-left:18px}
.kt-plan blockquote{margin:4px 0 0;padding:6px 0 6px 12px;border-left:3px solid currentColor;color:var(--ink-2)}
.kt-vraag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;line-height:1.45}
.kt-vraag .kt-knop{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.kt-afmeld .notice{margin:16px 0 0}
/* Kortingscode van een partner op de bestelpagina (src/account-block.js → orderCodeHTML, supabase/partners.sql). De plan-kaart is donker. */
.order-code{display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.4}
.order-code-link{align-self:flex-start;background:none;border:0;padding:0;font:inherit;color:#E9F0EC;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.order-code-link:focus-visible,.order-code-form button:focus-visible{outline:2px solid var(--tape);outline-offset:2px}
.order-code-form{display:flex;gap:8px}
.order-code-form input{flex:1;min-width:0;font:600 16px/1.2 var(--f-b);text-transform:uppercase;letter-spacing:.04em;color:#16201C;background:#F7F9F6;border:1px solid rgba(233,240,236,.4);border-radius:8px;padding:10px 12px}
.order-code-form input:focus{outline:2px solid var(--tape);outline-offset:1px}
.order-code-form button{flex:none;font:600 15px/1 var(--f-b);color:var(--tape-ink);background:var(--tape);border:0;border-radius:8px;padding:0 14px;cursor:pointer}
.order-code-form button:disabled{opacity:.6;cursor:default}
.order-code-ok{color:#E9F0EC}
.order-code-msg{margin:0;color:rgba(233,240,236,.74)}
.order-code-msg.bad{color:#FFB4A8}
/* Reviews (src/reviews.js): de vraag om je mening op het overzicht van Mijn account, je review, Instellingen en de homepage */
.ah-review:empty{display:none}
.rv-vraag{display:flex;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:0 0 18px}
.rv-links{flex:1 1 320px;min-width:0;background:var(--pine);color:var(--pine-ink);padding:26px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
.rv-eye{font:500 12px/1.2 var(--f-m);letter-spacing:.08em;text-transform:uppercase;opacity:.82}
.rv-links h2{margin:0;font:800 clamp(30px,4vw,38px)/1 var(--f-d);text-transform:uppercase;color:inherit}
.rv-links p{margin:0;font-size:16px;line-height:1.55}
.rv-quote{margin:4px 0 0;padding:14px 16px;background:rgba(255,255,255,.08);border-radius:12px}
.rv-quote blockquote{margin:0;font-size:15px;line-height:1.5}
.rv-quote figcaption{margin-top:6px;font:500 13px var(--f-m);opacity:.82}
.rv-tagrij{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.rv-tag{background:var(--tape);color:var(--tape-ink);font:800 15px/1 var(--f-d);letter-spacing:.03em;text-transform:uppercase;padding:7px 10px;border-radius:6px}
.rv-geldig{font-size:13.5px;opacity:.85}
.rv-form{flex:2 1 400px;min-width:0;padding:26px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px}
.rv-form .field textarea{font:400 16px/1.5 var(--f-b);padding:12px 13px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-height:110px;resize:vertical;width:100%;box-sizing:border-box}
.rv-form .field textarea:focus{outline:none;border-color:var(--ink)}
.rv-teller{display:block;margin-top:5px;font:500 12.5px/1.3 var(--f-m);color:var(--ink-3)}.rv-teller.ok{color:var(--good)}
.rv-sterren{border:0;padding:0;margin:0 0 12px;min-width:0}
.rv-sterren legend{font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.rv-sterrij{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.rv-ster{width:48px;height:48px;border:0;background:transparent;padding:4px;border-radius:8px;cursor:pointer;color:var(--ink)}
.rv-ster svg{width:38px;height:38px;display:block;fill:none;stroke:var(--ink-3);stroke-width:1.3;stroke-linejoin:round}
.rv-ster.on svg{fill:var(--tape);stroke:var(--tape-deep);stroke-width:1.2}
.rv-ster:hover svg{stroke:var(--ink)}.rv-ster:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.rv-stertxt{margin-left:8px;font:500 13px var(--f-m);color:var(--ink-3)}
.rv-ok{margin:2px 0 14px}.rv-ok small{display:block;color:var(--ink-3);font-size:13.5px;margin-top:2px}
.rv-form .notice{margin:0 0 12px}
.rv-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.rv-knoppen .link{min-height:44px;color:var(--ink-2)}
.rv-dank{margin:0 0 14px}
.rv-mijn{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.rv-mijn .rv-eye{margin:0;color:var(--ink-3);opacity:1;font-weight:500}
.rv-st{display:inline-flex;gap:2px}.rv-st svg{fill:none;stroke:var(--ink-3);stroke-width:1.3;stroke-linejoin:round}.rv-st svg.on{fill:var(--tape);stroke:var(--tape-deep);stroke-width:1.2}
.rv-mkop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.rv-datum{font:500 12.5px var(--f-m);color:var(--ink-3)}
.rv-mtekst{margin:0;font-size:15.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.rv-wie{font-size:14px;color:var(--ink-2)}
.rv-okrij{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px;font-size:14px}
.rv-okrij .link{min-height:44px}
.rv-panel .rv-mijn{margin:12px 0 0;background:var(--bg)}
.rv-mob .rv-mijn{margin:0 0 10px}
@media (max-width:640px){.rv-links,.rv-form{padding:18px}.rv-ster{width:46px;height:46px;padding:3px}.rv-knoppen .btn{width:100%}.rv-knoppen{justify-content:center}}
/* homepage: Wat bouwers zeggen (een blok per taal, src/build.py → REVIEWS_HOME) */
.rvh-head p{margin:10px 0 0;color:var(--ink-2);max-width:34em}
.rvh-gem{justify-self:end;display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 20px}
.rvh-gem:empty{display:none}
.rvh-g{font:800 54px/1 var(--f-d)}
.rvh-gr{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2)}
.rvh-st{display:inline-flex;gap:2px}
.rvh-gem path.leeg{fill:none;stroke:var(--ink-3);stroke-width:1.3;stroke-linejoin:round}.rvh-gem path.vol{fill:var(--tape);stroke:var(--tape-deep);stroke-width:1.2;stroke-linejoin:round}
.rvh-kaart .rvh-st svg path{fill:none;stroke:var(--ink-3);stroke-width:1.3;stroke-linejoin:round}.rvh-kaart .rvh-st svg.on path{fill:var(--tape);stroke:var(--tape-deep);stroke-width:1.2}
.rvh-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.rvh-kaart{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.rvh-kaart blockquote{margin:0;font-size:17px;line-height:1.55;flex:1;white-space:pre-line;overflow-wrap:anywhere}
.rvh-kaart figcaption{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.rvh-wie{font-weight:600}.rvh-wie span{font-weight:400;color:var(--ink-3)}
.rvh-k{align-self:flex-start;font:500 11.5px/1.3 var(--f-m);color:var(--ink-2);background:var(--soft);border-radius:6px;padding:4px 8px}
.rvh-uitleg{margin:28px 0 0;max-width:760px;font-size:14px;line-height:1.55;color:var(--ink-3)}.rvh-uitleg b{color:var(--ink-2);font-weight:600}
@media (max-width:860px){.rvh-gem{justify-self:start}}
@media (max-width:640px){.rvh-lijst{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}.rvh-kaart{flex:0 0 min(300px,84%);scroll-snap-align:start;padding:18px}.rvh-kaart blockquote{font-size:16px}.rvh-g{font-size:44px}}
/* Mijn account: het overzicht (src/mijn-overzicht.js). Geen menu meer naast de onderdelen: elk onderdeel opent schermvullend
   met bovenaan ‹ Mijn account. Het menu links (.side-nav) blijft verborgen in de pagina staan als bron voor het overzicht. */
.acct{grid-template-columns:minmax(0,1fr)}
.acct .side-nav{display:none}
@media (max-width:980px){.acct{padding-top:14px}}
.acct.fmv-focus .acct-back{display:none}
/* schuiven tussen overzicht en onderdeel */
.acct-panes{position:relative;min-width:0}
.ah-leaving{position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.ah-clip{overflow-x:clip}
@media (min-width:981px){#pane-profile,#pane-settings{max-width:820px}}
.acct-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0 0 8px -8px;padding:0 12px 0 4px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:600 15.5px/1 var(--f-b);cursor:pointer}
.acct-back svg{width:20px;height:20px}
@media (max-width:980px){#pane-home{max-width:600px}}
/* begroeting: de voornaam groot; past hij niet, dan maakt fitHeads() de kop kleiner (de groet zelf blijft 26 px) */
.ah{display:flex;flex-direction:column;gap:4px;margin:0 0 20px;font:800 56px/.9 var(--f-d);text-transform:uppercase;letter-spacing:.005em;text-wrap:initial}
.ah .ah-g{font:700 26px/1 var(--f-d);letter-spacing:.01em;color:var(--ink-2)}
.ah .ah-n{white-space:nowrap}
.ah.wrap-any .ah-n{white-space:normal}
/* laatste ontwerp */
.ah-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ah-stage{position:relative;height:244px;background:linear-gradient(180deg,var(--stage),var(--soft))}
.ah-stage.ah-wait{display:grid;place-items:center;color:var(--ink-3);font-size:15px}
.ah-thumb{position:absolute;inset:40px 16px 14px;display:grid;place-items:center;transition:opacity .4s}
.ah-thumb img,.ah-thumb svg{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px}
.ah-thumb svg{width:100%;height:100%}
.ah-3d{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s;background:transparent;touch-action:pan-y}
.ah-stage.is3d .ah-3d{opacity:1}
.ah-stage.is3d .ah-thumb{opacity:0}
.ah-snap{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s .5s}
.ah-stage.has-snap .ah-thumb{opacity:0}
.ah-stage.is3d .ah-snap{opacity:0}
.ah-chip{position:absolute;top:12px;left:12px;max-width:calc(100% - 24px);z-index:1;pointer-events:none;font:600 11px/1.2 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 10px 5px}
.ah-meta{padding:13px 14px 14px;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--soft)}
.ah-meta .nm{font:700 18px/1.2 var(--f-b);overflow-wrap:anywhere}
.ah-meta .mt{font:500 12.5px/1.35 var(--f-m);color:var(--ink-3)}
.ah-acts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ah-acts .btn,.ah-bp .btn{width:100%;min-height:52px;white-space:normal;text-align:center;line-height:1.2}
.ah-acts .btn svg,.ah-bp .btn svg{width:18px;height:18px;flex:none}
.ah-all{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.ah-count{font:600 12px/1 var(--f-m);background:var(--soft);color:var(--ink-2);border-radius:999px;padding:4px 8px 3px}
/* nog geen ontwerp: blauwdruk van een lege van */
.ah-bp{--bp:#1D3A32;border-radius:16px;overflow:hidden;padding:16px 16px 18px;color:#E9F0EC;box-shadow:var(--shadow);background-color:var(--bp);
  background-image:linear-gradient(rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(rgba(233,240,236,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.035) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ah-bp{--bp:#15291F}}
:root[data-theme="dark"] .ah-bp{--bp:#15291F}
.ah-bp .ah-no{display:block;font:600 11.5px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:rgba(233,240,236,.75)}
.ah-van{display:block;width:100%;height:auto;margin-top:12px}
.ah-bp h2{margin:14px 0 16px;font:800 30px/.95 var(--f-d);text-transform:uppercase;color:#fff;max-width:none}
/* menu in groepen */
.ah-menu{display:flex;flex-direction:column;margin-top:10px}
.ah-gt{padding:18px 4px 8px;font:600 11.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ah-list{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ah-row{width:100%;min-height:66px;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 14px;border:0;background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.ah-row+.ah-row{border-top:1px solid var(--soft)}
.ah-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--soft);color:var(--ink)}
.ah-ic.pine{background:var(--pine);color:var(--pine-ink)}
.ah-ic svg{width:20px;height:20px}
.ah-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ah-tx b{font:600 16px/1.2 var(--f-b);overflow-wrap:break-word}
.ah-tx small{font:400 14px/1.3 var(--f-b);color:var(--ink-3)}
.ah-tag{flex:none;font:700 10.5px/1 var(--f-d);letter-spacing:.08em;background:var(--tape);color:var(--tape-ink);border-radius:4px;padding:4px 6px 3px}
.ah-lk{flex:none;display:inline-grid;place-items:center;background:var(--tape);border-radius:4px;padding:3px 4px}
.ah-lk svg{width:11px;height:11px;color:var(--tape-ink)}
/* telefoon: Jouw profiel en Aan het kampvuur midden in Mijn project (homeDuoPlaats); nog niet geladen = de lijst loopt gewoon door */
.ah-duo-plek .ah-duo{margin:16px 0}
.ah-list:has(+.ah-duo-plek>.ah-duo[hidden]):has(+.ah-duo-plek+.ah-list){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.ah-duo-plek:has(>.ah-duo[hidden])+.ah-list{border-top-color:var(--soft);border-top-left-radius:0;border-top-right-radius:0}
.ah-chev{width:18px;height:18px;color:var(--ink-3);flex:none}
.ah-out{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;margin-top:24px;border:1.5px solid var(--line);border-radius:8px;background:transparent;color:var(--ink-2);font:600 16px/1 var(--f-b);cursor:pointer}
.ah-out svg{width:20px;height:20px}
/* computer: het ontwerp links, het menu rechts */
@media (min-width:981px){
  .ah{gap:6px;margin-bottom:28px;font-size:80px;line-height:.88}
  .ah .ah-g{font-size:30px}
  .ah-body{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
  .ah-top{flex:999 1 560px;min-width:0}
  .ah-side{flex:1 1 340px;min-width:0;display:flex;flex-direction:column}
  .ah-menu{margin-top:0}
  .ah-menu .ah-gt:first-child{padding-top:0}
  .ah-out{width:auto;align-self:flex-start;min-height:44px;margin-top:14px;padding:0 12px 0 6px;border:0;justify-content:flex-start}
  .ah-row:hover{background:var(--bg)}
}
.ah-wide{border-radius:16px}
.ah-wide .ah-stage{height:auto;aspect-ratio:12/7}
.ah-wide .ah-thumb{inset:48px 24px 24px}
.ah-wide .ah-chip{top:16px;left:16px;font-size:11.5px;padding:7px 11px 6px}
.ah-stage.ah-empty{background:var(--stage)}
.ah-stage.ah-empty .ah-thumb{inset:18% 16% 14%}
.ah-stage.ah-empty .ah-thumb svg{width:100%;height:auto}
.ah-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:20px 22px;border-top:1px solid var(--soft)}
.ah-foot .ah-meta{padding:0;border:0;min-width:0;flex:1 1 240px}
.ah-foot .ah-meta .nm{font-size:20px}
.ah-foot .ah-meta .mt{font-size:13px}
.ah-foot h2{margin:0;font:800 34px/.95 var(--f-d);text-transform:uppercase;max-width:none;flex:1 1 260px}
.ah-foot .btn{min-height:52px;padding:0 24px;flex:none}
.ah-foot .btn svg{width:18px;height:18px}
/* artikelen onder het overzicht (homeArticlesHTML) */
.ah-arts{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.ah-arts .ah-eb{display:block;margin-bottom:10px;font:600 11.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ah-arts h2{margin:0;font:800 34px/.95 var(--f-d);text-transform:uppercase;max-width:none}
.ah-arts>p{margin:10px 0 0;color:var(--ink-2);font-size:16px;max-width:60ch}
.ah-art-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
.ah-art{--k:#6A756F;display:grid;grid-template-columns:104px minmax(0,1fr);gap:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none}
.ah-art.k-builder{--k:#1D3A32}.ah-art.k-isolatie{--k:#6E54A3}.ah-art.k-stroom{--k:#A07800}.ah-art.k-water{--k:#2E6FB7}.ah-art.k-keuring{--k:#2F6B55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ah-art.k-builder{--k:#8FC4AC}:root:not([data-theme="light"]) .ah-art.k-isolatie{--k:#A994DA}:root:not([data-theme="light"]) .ah-art.k-stroom{--k:#E2B83A}:root:not([data-theme="light"]) .ah-art.k-water{--k:#78A9E2}:root:not([data-theme="light"]) .ah-art.k-keuring{--k:#6DC391}}
:root[data-theme="dark"] .ah-art.k-builder{--k:#8FC4AC}:root[data-theme="dark"] .ah-art.k-isolatie{--k:#A994DA}:root[data-theme="dark"] .ah-art.k-stroom{--k:#E2B83A}:root[data-theme="dark"] .ah-art.k-water{--k:#78A9E2}:root[data-theme="dark"] .ah-art.k-keuring{--k:#6DC391}
.ah-art-pic{position:relative;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 14%,var(--paper));color:var(--k)}
.ah-art-pic svg{width:84%;height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ah-art-pic svg .ac{stroke:var(--tape);stroke-width:2.8}
.ah-soon{position:absolute;top:8px;left:8px;font:600 9.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink-2);border-radius:999px;padding:5px 7px 4px}
.ah-art-tx{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px;min-width:0}
.ah-cat{font:600 10.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--k)}
.ah-art-tx b{font:700 16.5px/1.2 var(--f-b);overflow-wrap:break-word;hyphens:auto}
.ah-lead{font-size:14px;line-height:1.4;color:var(--ink-2)}
.ah-min{margin-top:2px;font:500 12px/1 var(--f-m);color:var(--ink-3)}
a.ah-art:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a.ah-art:focus-visible{outline:2px solid var(--tape-deep);outline-offset:2px}
.ah-soon.ah-first{background:var(--tape);color:var(--tape-ink)}
.ah-art.soon .ah-art-tx b,.ah-art.soon .ah-lead{color:var(--ink-2)}
@media (min-width:981px){
  .ah-arts{margin-top:96px;padding-top:40px}
  .ah-arts .ah-eb{font-size:12px;margin-bottom:12px}
  .ah-arts h2{font-size:48px;line-height:.92}
  .ah-arts>p{font-size:17px;margin-top:12px}
  .ah-art-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:28px}
  .ah-art{display:flex;flex-direction:column;border-radius:14px;box-shadow:0 1px 2px rgba(20,30,25,.05);transition:transform .2s ease,box-shadow .2s ease}
  .ah-art-pic{aspect-ratio:16/10}
  .ah-art-pic svg{width:78%}
  .ah-soon{top:12px;left:auto;right:12px;font-size:10.5px;padding:6px 9px 5px}
  .ah-art-tx{flex:1;gap:8px;padding:16px 18px 18px}
  .ah-cat{font-size:11px}
  .ah-art-tx b{font-size:19px}
  .ah-lead{flex:1;font-size:15px;line-height:1.45}
  .ah-min{margin-top:6px;font-size:12.5px}
  a.ah-art:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  /* het eerste artikel (Zo werkt de builder) over de volle breedte, beeld links en tekst rechts */
  .ah-art.top{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ah-art.top .ah-art-pic{aspect-ratio:auto;min-height:230px}
  .ah-art.top .ah-art-pic svg{width:56%}
  .ah-art.top .ah-soon{left:16px;right:auto;top:16px}
  .ah-art.top .ah-art-tx{justify-content:center;padding:32px 40px 32px 36px;gap:10px}
  .ah-art.top .ah-art-tx b{font:800 40px/.95 var(--f-d);text-transform:uppercase}
  .ah-art.top .ah-lead{flex:none;font-size:17px;max-width:34em}
}
@media (min-width:981px) and (prefers-reduced-motion:reduce){a.ah-art:hover{transform:none}}
/* Speldjes en avatars van het Community Campfire (src/speldjes.js), en in het overzicht van Mijn account de blokken Jouw profiel en
   Aan het kampvuur onder je laatste ontwerp (src/mijn-overzicht.js). Staat in de stijl van de site zelf, zodat het overzicht ze
   kan tonen zonder het Campfire te laden. */

/* ---------- avatar: een sticker zoals het logo ---------- */
.cf-avt{--bg:#F2C41C;--fg:#1A1604;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s,36px);height:var(--s,36px);border-radius:24%;
  background:var(--bg);color:var(--fg);box-shadow:0 0 0 calc(var(--s,36px) * .06) #fff,0 calc(var(--s,36px) * .05) calc(var(--s,36px) * .14) rgba(10,16,13,.28);overflow:hidden}
.cf-avt::before{content:"";position:absolute;left:14%;right:14%;top:0;height:16%;opacity:.5;background:repeating-linear-gradient(90deg,currentColor 0 6%,transparent 6% 19%);clip-path:polygon(0 0,100% 0,100% 100%,0 60%)}
.cf-avt svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:8%}
.cf-avt b{font:800 calc(var(--s,36px) * .42)/1 var(--f-d);margin-top:8%;letter-spacing:.02em}
.cf-avt.klein{--s:24px}.cf-avt.mid{--s:36px}.cf-avt.groot{--s:72px}

/* ---------- speldje: rond emaille speldje met een metalen rand ---------- */
/* --e emaille (groep), --r rand en icoon, --rd de dikte van het metaal eronder */
.sp{--s:44px;--e:#2A6FC4;--r:#F2C41C;--rd:#B98C00;position:relative;flex:none;display:inline-grid;place-items:center;width:var(--s);height:var(--s);box-sizing:border-box;
  border-radius:50%;background:var(--e);color:var(--r);border:max(2px,calc(var(--s) / 16)) solid var(--r);
  box-shadow:0 max(2px,calc(var(--s) / 30)) 0 var(--rd),0 calc(var(--s) / 9) calc(var(--s) / 4.5) rgba(20,30,25,.22)}
.sp::before{content:"";position:absolute;inset:max(2px,calc(var(--s) / 22));border-radius:50%;border:max(1px,calc(var(--s) / 46)) solid var(--r)}
.sp::after{content:"";position:absolute;top:9%;left:17%;width:34%;height:16%;border-radius:50%;background:rgba(255,255,255,.22);transform:rotate(-28deg)}
.sp svg{position:relative;width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.sp b{position:relative;font:800 calc(var(--s) * .46)/1 var(--f-d);color:#F2C41C}
.sp.g-maken{--e:#2A6FC4}.sp.g-kampvuur{--e:#C2502F}.sp.g-onderweg{--e:#2F6B55}.sp.g-profiel{--e:#7B62B8}.sp.g-geheim{--e:#16201C}
.sp.brons{--r:#D0915E;--rd:#7A4A24}.sp.zilver{--r:#D5DBE0;--rd:#8E979F}.sp.goud{--r:#E9C766;--rd:#9C7420}
.sp.open{background:var(--soft);color:var(--ink-3);border:2px dashed var(--ink-3);box-shadow:none}
.sp.open::before{border:1px dashed var(--line)}.sp.open::after{display:none}
.sp.open.g-geheim{background:#16201C;border:max(2px,calc(var(--s) / 16)) solid #6A756F;box-shadow:0 2px 0 #44504A}
.sp.open.g-geheim::before{border-color:#44504A;border-style:solid}
.sp-tag{display:inline-block;font:600 10.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px 3px;border-radius:4px;background:var(--good-bg);color:var(--good)}
.sp-tag.brons{background:#F3DFCC;color:#6E3F1C}.sp-tag.zilver{background:#E6EAEE;color:#3F4A55}.sp-tag.goud{background:#FBEFC8;color:#6E5000}
.sp-tag.nieuw{background:var(--tape);color:var(--tape-ink)}

/* ---------- overzicht: Jouw profiel en Aan het kampvuur ---------- */
.ah-top{display:flex;flex-direction:column;gap:24px}
.ah-duo{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px}
/* profiel een derde, kampvuur twee derde (naast elkaar zolang er plek is, anders onder elkaar) */
.ah-duo .ah-prof{flex:1 1 230px}.ah-duo .ah-kv{flex:2 1 460px}
.ah-prof .ah-dk-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-prof .ah-dk-t h2{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-duo[hidden]{display:none}
.ah-dk{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ah-dk-kop{display:flex;align-items:center;gap:12px;padding:14px 10px 12px 18px}
.ah-dk-kop .cf-avt{--s:44px}
.ah-dk-ic{flex:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--pine);color:var(--tape)}
.ah-dk-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ah-dk-t{flex:1;min-width:0}
.ah-dk-t span{display:block;margin-bottom:4px;font:600 10.5px/1.1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ah-dk-t h2{margin:0;font:800 24px/.95 var(--f-d);text-transform:uppercase;max-width:none;overflow-wrap:anywhere}
.ah-dk-l{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:700 15px/1 var(--f-b);cursor:pointer}
.ah-dk-l svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ah-dk-l:hover{background:var(--bg)}
/* wie je bent: je tekst en je antwoorden op Over jezelf (hier geen speldjes) */
.ah-wie{min-height:136px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:14px 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft)}
.ah-bio{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ah-over{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ah-over li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:7px 10px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.ah-over small{font:600 10px/1.1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ah-over b{font:700 14px/1.25 var(--f-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-over-leeg{display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 14px;border:1.5px dashed var(--line);border-radius:10px;background:var(--paper);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.ah-over-leeg b{font:700 15px/1.2 var(--f-b)}
.ah-over-leeg span{font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.ah-over-leeg:hover{border-color:var(--ink-3)}
.ah-dk-voet{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 18px 14px;font:500 11.5px/1.3 var(--f-m);text-transform:uppercase;color:var(--ink-3)}
.ah-dk-voet .btn{min-height:44px}
/* kampvuur: drie kaarten op dezelfde stippenondergrond als de Keuze van My Campervan in het Campfire (.cf-uit in src/campfire.css);
   alleen het icoon heeft de paarse kleur van het menu (#2A3550) */
.ah-kv .ah-dk-ic{background:#2A3550;color:#FFD9A0}
.ah-tafel{--uit-1:#F1F3EE;--uit-2:#E7EBE4;--uit-stip:rgba(22,32,28,.10);
  flex:1;min-height:164px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line);
  background:radial-gradient(var(--uit-stip) 1px,transparent 1.3px) 0 0/12px 12px,linear-gradient(160deg,var(--uit-1) 0%,var(--uit-2) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ah-tafel{--uit-1:#1D2521;--uit-2:#161D1A;--uit-stip:rgba(233,240,236,.07)}}
:root[data-theme="dark"] .ah-tafel{--uit-1:#1D2521;--uit-2:#161D1A;--uit-stip:rgba(233,240,236,.07)}
/* nog niets van anderen: je eigen kaart of een voorbeeld, zwevend en glanzend, tussen twee lege plekken, met een korte tekst */
.ah-solo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;width:100%}
.ah-solo-k{position:relative;display:flex;align-items:center;justify-content:center;padding:6px 0}
.ah-mk-plek{flex:none;width:86px;height:120px;border-radius:7px;border:1.5px dashed var(--ink-3);background:var(--paper);opacity:.55}
.ah-mk-plek:first-child{transform:rotate(-9deg) translateX(14px)}.ah-mk-plek:last-child{transform:rotate(9deg) translateX(-14px)}
.ah-tafel .ah-mk.solo{z-index:1;transform:none;animation:ahZweef 3.6s ease-in-out infinite;box-shadow:0 10px 22px rgba(10,16,13,.35),0 0 0 1px rgba(255,217,160,.25)}
.ah-tafel .ah-mk.solo:hover,.ah-tafel .ah-mk.solo:focus-visible{animation-play-state:paused}
.ah-mk-glans{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,rgba(156,245,230,.22) 52%,transparent 66%);
  background-size:250% 100%;background-position:120% 0;mix-blend-mode:screen;animation:ahGlans 4.2s ease-in-out infinite}
@keyframes ahZweef{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes ahGlans{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.ah-solo-t{flex:1 1 170px;max-width:28ch;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.ah-solo-t b{font:800 20px/1 var(--f-d);text-transform:uppercase;color:var(--ink)}
.ah-solo-t .ah-dk-l{margin-left:-6px}
/* kaart 2 uit het Campfire (src/campfire-kaart.css) in het klein: achtergrond, rand, naam en zegel per niveau */
.ah-mk{--b1:#21483A;--b2:#15291F;--b3:#0E1D16;--tk:#F2C41C;position:relative;flex:none;width:98px;height:137px;padding:0;border:0;border-radius:7px;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 30%,var(--b1) 0%,var(--b2) 60%,var(--b3) 100%);box-shadow:0 6px 14px rgba(10,16,13,.32),0 1px 3px rgba(10,16,13,.25);
  transition:transform .2s ease}
.ah-mk:nth-child(1){transform:rotate(-5deg) translateY(3px)}.ah-mk:nth-child(2){transform:translateY(-3px)}.ah-mk:nth-child(3){transform:rotate(5deg) translateY(3px)}
.ah-mk:hover,.ah-mk:focus-visible{transform:translateY(-6px) rotate(0) scale(1.04)}
.ah-mk::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.07) 1px,transparent 1px);background-size:4px 4px}
.ah-mk-l{position:absolute;inset:4px;border-radius:5px;border:1.5px solid var(--tk);opacity:.9}
.ah-mk-in{position:absolute;inset:9px 9px 8px;display:flex;flex-direction:column;gap:4px;text-align:left}
.ah-mk-top{display:flex;align-items:center;justify-content:space-between;gap:3px}
.ah-mk-pips{display:inline-flex;gap:2px}
.ah-mk-pips i{width:4px;height:4px;transform:rotate(45deg);background:rgba(233,240,236,.22)}
.ah-mk-pips i.aan{background:var(--tk)}
.ah-mk-hart{display:inline-flex;align-items:center;gap:2px;padding:1px 3px;border-radius:3px;background:rgba(255,120,130,.18);box-shadow:inset 0 0 0 1px rgba(255,143,149,.5);color:#fff;font:800 10.5px/1 var(--f-d)}
.ah-mk-hart svg{width:8px;height:8px;fill:#FF8F95}
.ah-mk-naam{font:800 13.5px/.9 var(--f-d);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.ah-mk-ph{position:relative;flex:1;margin:0 -10px}
.ah-mk-ph img{position:absolute;left:50%;top:50%;width:120%;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.ah-mk-voet{display:flex;align-items:center;justify-content:space-between;gap:3px;font:500 7px/1.1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;color:rgba(233,240,236,.75)}
.ah-mk-voet span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-mk-z{flex:none;width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.5);background:conic-gradient(#ff8a8a,#ffe08a,#9dff8a,#8afff2,#8aa2ff,#e58aff,#ff8a8a)}
.ah-mk.schets{--b1:#2C3532;--b2:#1E2522;--b3:#151A18;--tk:#C9D3CE}.ah-mk.schets .ah-mk-l{border-style:dashed;opacity:.55}.ah-mk.schets .ah-mk-z{background:transparent;box-shadow:inset 0 0 0 1px rgba(233,240,236,.55)}
.ah-mk.regenboog{--tk:#9CF5E6}
.ah-mk.regenboog .ah-mk-l{border-color:transparent;border-image:linear-gradient(120deg,#ff8a8a,#ffe08a,#9dff8a,#8afff2,#8aa2ff,#e58aff,#ff8a8a) 1}
.ah-mk.zilver{--b1:#33474F;--b2:#1A262C;--b3:#10181C;--tk:#E3EAEE}
.ah-mk.zilver .ah-mk-l{border-color:transparent;border-image:linear-gradient(135deg,#F4F7F9,#7D8891 25%,#FFFFFF 45%,#8E9AA3 65%,#E8EEF2 85%,#7D8891) 1}
.ah-mk.zilver .ah-mk-z{background:conic-gradient(#FFFFFF,#9AA7B0,#F4F7F9,#7D8891,#E8EEF2,#FFFFFF)}
.ah-mk.goud{--b1:#3D3518;--b2:#1D1A0E;--b3:#110F07;--tk:#F3DC7A}
.ah-mk.goud .ah-mk-l{border:2px solid transparent;border-image:linear-gradient(135deg,#9C7420,#F3DC7A 22%,#C8962A 44%,#FFF1A6 62%,#B9862A 80%,#E9C766) 1;box-shadow:0 0 6px rgba(243,220,122,.35)}
.ah-mk.goud .ah-mk-naam{color:#F3DC7A}
.ah-mk.goud .ah-mk-z{background:conic-gradient(#FFF1A6,#C8962A,#F3DC7A,#9C7420,#FFF1A6)}
@media (prefers-reduced-motion:reduce){.ah-mk{transition:none}.ah-tafel .ah-mk.solo,.ah-mk-glans{animation:none}}
@media (max-width:380px){.ah-mk{width:88px;height:123px}.ah-tafel{gap:6px;padding:12px 8px}}
/* Mijn account op de telefoon: Instellingen en Gegevens als lijsten met rijen en onderbladen (src/mijn-mobiel.js) */
.mm-lead{margin:-10px 0 4px;color:var(--ink-3);font-size:15px}
.mm-list{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mm-row{width:100%;min-height:62px;display:flex;align-items:center;gap:14px;padding:11px 12px 11px 14px;border:0;background:var(--paper);color:var(--ink);text-align:left;font:inherit;cursor:pointer;box-sizing:border-box}
.mm-row+.mm-row,.mm-seg+.mm-row{border-top:1px solid var(--soft)}
.mm-row.mm-static{cursor:default;min-height:52px;padding-bottom:4px}
.mm-ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--soft);color:var(--ink)}
.mm-ic svg{width:18px;height:18px}
.mm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mm-tx b{font:600 16px/1.2 var(--f-b);overflow-wrap:anywhere}
.mm-tx small{font:400 14px/1.3 var(--f-b);color:var(--ink-3);overflow-wrap:anywhere}
.mm-val{flex:none;max-width:42%;font:500 15px/1.2 var(--f-b);color:var(--ink-2);text-align:right;overflow-wrap:anywhere}
.mm-chev{width:18px;height:18px;flex:none;color:var(--ink-3)}
.mm-bad .mm-tx b{color:var(--bad)}
.mm-bad .mm-ic{background:var(--bad-bg);color:var(--bad)}
/* weergave: drie knoppen naast elkaar */
.mm-seg{display:flex;gap:4px;margin:0 12px 12px;padding:4px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.mm-seg label{flex:1;position:relative;min-width:0}
.mm-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.mm-seg span{display:grid;place-items:center;min-height:40px;padding:0 6px;border-radius:7px;font:600 14.5px/1.15 var(--f-b);color:var(--ink-2);text-align:center;hyphens:auto}
.mm-seg input:checked+span{background:var(--ink);color:var(--bg)}
.mm-seg input:focus-visible+span{outline:2px solid var(--tape-deep);outline-offset:2px}
/* schakelaar: tips en nieuws */
.mm-switch{position:relative}
.mm-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mm-sw{flex:none;position:relative;width:48px;height:28px;border-radius:14px;background:var(--line);transition:background .2s}
.mm-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.mm-switch input:checked~.mm-sw{background:var(--good)}
.mm-switch input:checked~.mm-sw::after{transform:translateX(20px)}
.mm-switch input:focus-visible~.mm-sw{outline:2px solid var(--tape-deep);outline-offset:2px}
.mm-foot{margin:12px 4px 0;font-size:14px;color:var(--ink-3)}
/* gegevens: wie je bent */
.mm-me{display:flex;align-items:center;gap:14px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:6px}
.mm-av{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--pine);color:var(--pine-ink);font:800 22px/1 var(--f-d);letter-spacing:.02em}
.mm-me .mm-tx b{font-size:18px}
.mm-since{font:500 12.5px/1.3 var(--f-m)!important;margin-top:2px}
/* onderblad */
dialog.mm-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:600px;max-height:88vh;max-height:88svh;box-sizing:border-box;padding:6px 20px calc(20px + env(safe-area-inset-bottom,0px));border:0;border-radius:18px 18px 0 0;background:var(--paper);color:var(--ink);overflow-y:auto;box-shadow:0 -10px 40px rgba(0,0,0,.2)}
dialog.mm-sheet[open]{animation:mm-up .28s cubic-bezier(.2,.7,.2,1)}
dialog.mm-sheet::backdrop{background:rgba(15,22,19,.45)}
@keyframes mm-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){dialog.mm-sheet[open]{animation:none}}
.mm-grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 8px}
.mm-sh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.mm-sh b{font:800 26px/1 var(--f-d);text-transform:uppercase}
.mm-x{width:44px;height:44px;flex:none;display:grid;place-items:center;margin-right:-10px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.mm-x svg{width:20px;height:20px}
.mm-note{margin:0 0 14px;color:var(--ink-2);font-size:15px}
.mm-sb .field input{font-size:16px}
.mm-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 4px;border-top:1px solid var(--soft);cursor:pointer;font:500 16.5px/1.2 var(--f-b)}
.mm-opt:first-child{border-top:0}
.mm-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mm-opt span{flex:1}
.mm-ok{width:20px;height:20px;color:var(--good);visibility:hidden}
.mm-opt input:checked~.mm-ok{visibility:visible}
.mm-opt input:checked+span{font-weight:700}
.mm-opt input:focus-visible+span{outline:2px solid var(--tape-deep);outline-offset:3px;border-radius:4px}
.mm-wide{width:100%;min-height:52px;margin-top:8px}
.mm-del{background:var(--bad)!important;color:#fff!important}
/* Mijn account: de kleine campervan die kriskras over het scherm rijdt (src/mijn-rijden.js). Achter alles, niet aanklikbaar. */
.mc-rit{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;--mc-trk:rgba(68,80,74,.2)}
.mc-rit.on{opacity:1;visibility:visible;transition:opacity .4s}
.mc-rit svg{display:block;width:100%;height:100%}
.mc-rit-tread{stroke:var(--mc-trk)}
.mc-rit-shd{fill:rgba(22,32,28,.22);transform-box:fill-box;transform-origin:center;animation:mc-rit-shd .46s ease-in-out infinite}
.mc-rit-roll{transform-box:fill-box;transform-origin:center;animation:mc-rit-roll 1.9s ease-in-out infinite}
.mc-rit-bnc{transform-box:fill-box;transform-origin:center;animation:mc-rit-bnc .46s ease-in-out infinite}
.mc-rit:not(.on) *{animation-play-state:paused}
@keyframes mc-rit-bnc{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes mc-rit-shd{0%,100%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(1px,2px) scale(.95);opacity:.7}}
@keyframes mc-rit-roll{0%,100%{transform:translateY(-2.5px) rotate(-1.4deg)}50%{transform:translateY(2.5px) rotate(1.4deg)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mc-rit{--mc-trk:rgba(230,234,230,.13)}}
:root[data-theme="dark"] .mc-rit{--mc-trk:rgba(230,234,230,.13)}
@media (prefers-reduced-motion:reduce){.mc-rit{display:none}}
/* Melding Nieuw speldje (src/speldmelding.js): telefoon bovenaan over de volle breedte, computer rechtsonder. Een meter rond het
   speldje loopt vol, het speldje draait om, een balkje onderaan telt de 5 seconden af. */
.sm{position:fixed;z-index:55;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:14px;box-sizing:border-box;
  padding:14px 8px 20px 14px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 44px -16px rgba(10,16,13,.45),0 2px 6px rgba(10,16,13,.12);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;text-align:left}
.sm[hidden]{display:none}
.sm[data-kant="boven"]{top:calc(env(safe-area-inset-top,0px) + 12px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px))}
.sm[data-kant="rechts"]{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:380px;max-width:calc(100vw - 48px)}
/* meter met het speldje */
.sm-meter{position:relative;width:72px;height:72px}
.sm-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.sm-baan{fill:none;stroke:var(--line);stroke-width:3.5}
.sm-boog{fill:none;stroke:var(--tape);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:207.35;stroke-dashoffset:207.35}
.sm.klaar .sm-boog{stroke-dashoffset:0}
.sm-stralen{position:absolute;inset:0;pointer-events:none}
.sm-stralen i{position:absolute;left:50%;top:50%;width:3px;height:9px;margin:-4.5px 0 0 -1.5px;border-radius:2px;background:var(--tape);opacity:0}
.sm-draai{position:absolute;inset:9px;transform-style:preserve-3d}
.sm-kant{position:absolute;inset:0;display:grid;place-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.sm-voor{transform:rotateY(180deg)}
.sm.klaar .sm-draai{transform:rotateY(180deg)}
.sm-meter{perspective:320px}
/* tekst */
.sm-tekst{min-width:0}
.sm-kop{margin:0;font:600 11px/1.2 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sm-naam{margin:3px 0 5px;font:800 22px/1 var(--f-d);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.sm-regel{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:14px;line-height:1.3;color:var(--ink-2)}
.sm-tel{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:top;font:500 14px/1.3 var(--f-m);color:var(--ink);font-variant-numeric:tabular-nums}
.sm-rol{display:flex;flex-direction:column}
.sm-rol span{display:block;height:1.3em}
.sm.klaar .sm-rol{transform:translateY(-50%)}
.sm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sm-bekijk{min-height:32px;padding:2px 4px;margin:-6px 0;border:0;background:none;color:var(--ink);font:700 14px/1 var(--f-b);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--tape);text-decoration-thickness:2px;text-underline-offset:3px}
.sm-sluit{align-self:start;width:40px;height:40px;margin:-6px 0 0;border:0;border-radius:10px;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.sm-sluit:hover{background:var(--soft);color:var(--ink)}
.sm-sluit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sm button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* aftellen */
.sm-tijd{position:absolute;left:14px;right:14px;bottom:8px;height:3px;border-radius:3px;background:var(--tape);transform-origin:left center}
.acct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.acct-head h2{margin:0}
.designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.dcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.dcard .plan{background:linear-gradient(180deg,var(--stage),var(--soft));padding:0;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.dcard .plan svg{width:calc(100% - 28px);height:auto}
.dcard .plan img{display:block;width:100%;height:100%;object-fit:cover}
.dcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.dcard .nm{font-weight:700}
.dcard .mt{font:400 12.5px var(--f-m);color:var(--ink-3)}
.dcard .acts{display:flex;gap:8px;margin-top:10px}
.dcard.new{border-style:dashed;align-items:center;justify-content:center;min-height:220px;background:transparent;cursor:pointer;color:var(--ink-2);text-decoration:none;gap:8px;font-weight:600}
.dcard.new svg{width:28px;height:28px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 22px;margin-bottom:16px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:10px 16px;margin:0}
.kv dt{color:var(--ink-3);font-size:15px}.kv dd{margin:0;font-weight:600}
.pill{display:inline-block;font:600 12.5px/1 var(--f-b);padding:6px 9px;border-radius:999px;background:var(--soft);color:var(--ink-2)}
.meter{height:8px;background:var(--soft);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.meter i{display:block;height:100%;background:var(--ink);border-radius:99px}
.danger{border-color:var(--bad)}
.danger h3{color:var(--bad)}
/* bestelpagina: betaalgegevens links, plan-kaart in blauwdrukstijl rechts; smal eerst de kaart */
#pane-plan{container-type:inline-size}
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.order-intro{margin:-8px 0 18px;color:var(--ink-2);font-size:16.5px}
.order-terms{font-size:14.5px;color:var(--ink-2);margin:0 0 14px}
.order-btn{display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;padding:16px 18px}
.order-btn svg{width:18px;height:18px;flex:none;stroke-width:2.2}
.order-safe{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--ink-3)}
.order-safe svg{width:15px;height:15px;flex:none;color:var(--good)}
.order-card{--bp:#1D3A32;border-radius:16px;padding:24px;color:#E9F0EC;background-color:var(--bp);background-image:linear-gradient(rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(rgba(233,240,236,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.035) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;display:flex;flex-direction:column;gap:18px;position:sticky;top:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .order-card{--bp:#15291F}}
:root[data-theme="dark"] .order-card{--bp:#15291F}
.order-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.order-card-eyebrow{font:500 12px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:rgba(233,240,236,.74)}
.order-card-tag{background:var(--tape);color:var(--tape-ink);font:700 12px/1 var(--f-b);border-radius:4px;padding:5px 8px;text-transform:uppercase;letter-spacing:.04em}
.order-card-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.order-card-price b{font:800 64px/.9 var(--f-d)}
.order-card-price span{font-size:16px;color:rgba(233,240,236,.74)}
.order-card-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.4}
.order-card-feats li{display:flex;gap:10px;align-items:flex-start}
.order-card-feats svg{width:18px;height:18px;flex:none;color:var(--tape);stroke-width:2.6;margin-top:1px}
.order-card-sum{border-top:1px solid rgba(233,240,236,.22);padding-top:16px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.order-card-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.order-card-row>span:first-child{color:rgba(233,240,236,.74)}
.order-card-total>span:first-child{font:500 12.5px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#E9F0EC}
.order-card-total strong{font-size:26px;font-weight:700;white-space:nowrap}
.order-card-vat{font-size:13.5px;color:rgba(233,240,236,.74)}
.order-switch{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:#E9F0EC;background:rgba(233,240,236,.08);border:1px solid rgba(233,240,236,.22);border-radius:10px;padding:13px 15px;cursor:pointer}
.order-switch:hover{background:rgba(233,240,236,.14)}
.order-switch:focus-visible{outline:2px solid var(--tape);outline-offset:2px}
.order-switch>span{display:flex;flex-direction:column;gap:2px}
.order-switch b{font-size:15.5px;font-weight:600}
.order-switch span span{font-size:14px;color:rgba(233,240,236,.74)}
.order-switch svg{width:18px;height:18px;flex:none}
@container (max-width:760px){.order-grid{grid-template-columns:minmax(0,1fr);gap:18px}.order-card{order:-1;position:static;padding:20px}.order-card-price b{font-size:56px}}
/* Abonnement: stand van je plan in blauwdrukstijl, daaronder Maandelijks en de Projectpas naast elkaar, dan de facturen */
.pl-status{--bp:#1D3A32;border-radius:16px;padding:28px;color:#E9F0EC;background-color:var(--bp);background-image:linear-gradient(rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.07) 1px,transparent 1px),linear-gradient(rgba(233,240,236,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,240,236,.035) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;display:flex;flex-wrap:wrap;gap:28px 36px;margin-bottom:36px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pl-status{--bp:#15291F}}
:root[data-theme="dark"] .pl-status{--bp:#15291F}
.pl-now{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.pl-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pl-eye,.pl-box-t{font:500 12px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:rgba(233,240,236,.74)}
.pl-tag{background:var(--tape);color:var(--tape-ink);font:700 12px/1 var(--f-b);border-radius:4px;padding:5px 8px;text-transform:uppercase;letter-spacing:.04em}
.pl-big{font:800 64px/.9 var(--f-d);text-transform:uppercase;overflow-wrap:anywhere}
.pl-sub{margin:0;font-size:16px;line-height:1.5;color:rgba(233,240,236,.86);max-width:46ch}
.pl-meter{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.pl-bar{height:8px;background:rgba(233,240,236,.16);border-radius:99px;overflow:hidden}
.pl-bar i{display:block;height:100%;background:var(--tape);border-radius:99px}
.pl-ends{display:flex;justify-content:space-between;gap:12px;font:500 12.5px/1.2 var(--f-m);color:rgba(233,240,236,.74)}
.pl-box{flex:1 1 280px;min-width:0;align-self:flex-start;background:rgba(233,240,236,.06);border:1px solid rgba(233,240,236,.16);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.pl-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15.5px;line-height:1.35}
.pl-box li{display:flex;gap:10px}
.pl-box li svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--tape)}
.pl-box.on li svg{stroke-width:2.6}
.pl-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px 24px;margin-bottom:18px}
.pl-head h3{margin:0;font-size:34px;line-height:1;font-weight:800;letter-spacing:0}
.pl-head p{margin:8px 0 0;color:var(--ink-2);font-size:16.5px}
.pl-vat{font:500 12.5px/1.2 var(--f-m);color:var(--ink-3)}
.pl-cards{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.pl-card{flex:1 1 320px;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column}
.pl-card.hl{border:2px solid var(--ink);box-shadow:var(--shadow)}
.pl-card .tag{align-self:flex-start;font:600 12px/1 var(--f-b);background:var(--tape);color:var(--tape-ink);padding:5px 8px;border-radius:4px;margin-bottom:12px}
.pl-card h3{margin:0;letter-spacing:.01em}
.pl-amt{font:800 52px/1 var(--f-d);margin:10px 0 4px}
.pl-per{font-size:14.5px;color:var(--ink-3);margin-bottom:18px}
.pl-card .btn{min-height:48px}
.pl-hint{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--ink-2);text-align:center}
.pl-note{margin:0;padding:12px 14px;border-radius:8px;background:var(--soft);color:var(--ink-2);font-size:14.5px;line-height:1.45}
.pl-note.ok{background:var(--good-bg);color:var(--good);font-weight:600}
.pl-sep{border-top:1px solid var(--line);margin:22px 0 16px}
.pl-lbl{font:600 12px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.pl-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pl-feats:not(:last-child){margin-bottom:24px}
.pl-feats li{display:flex;gap:10px;font-size:15.5px;line-height:1.4}
.pl-feats li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--good)}
.pl-feats li.soon{color:var(--ink-3)}.pl-feats li.soon svg{color:var(--tape-deep)}
.pl-feats sup{font-size:.75em;margin-left:1px}
.pl-calc{margin-top:auto;background:var(--bg);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px}
.pl-calc .pl-lbl{margin:0}
.pl-cmp{display:flex;flex-direction:column;gap:6px}
.pl-row{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--ink-2)}
.pl-row b{color:var(--ink);white-space:nowrap}
.pl-cbar{height:10px;background:var(--soft);border-radius:99px;overflow:hidden}
.pl-cbar i{display:block;height:100%;border-radius:99px;background:var(--ink-3)}
.pl-cbar i.pas{background:var(--tape)}
.pl-calc p{margin:2px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.pl-fn{font-size:14px;color:var(--ink-3);margin:14px 0 28px;line-height:1.5}
.pl-bill{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-bottom:16px}
.pl-bill-ic{width:44px;height:44px;border-radius:10px;background:var(--soft);display:grid;place-items:center;flex:none}
.pl-bill-ic svg{width:20px;height:20px;color:var(--ink-2)}
.pl-bill-txt{flex:1 1 260px;min-width:0}
.pl-bill h3{margin:0;font-size:20px}
.pl-bill p{margin:4px 0 0;color:var(--ink-2);font-size:15.5px}
.pl-bill .btn{min-height:44px}
@container (max-width:560px){.pl-status{padding:22px 20px}.pl-big{font-size:52px}.pl-card{padding:22px 20px}}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:9px;font-size:15px;z-index:50;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
/* taalkeuze */
.lang{position:relative}
.lang-btn{gap:8px;padding-inline:11px}
svg.flag{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.16);flex:none;display:block}
.lang-btn .code{font:600 13px/1 var(--f-m);letter-spacing:.05em}
.lang-btn .chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;width:228px;max-height:min(72vh,580px);overflow:auto}
.lang-opt{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;text-decoration:none;border:0;background:transparent;padding:9px 10px;border-radius:8px;cursor:pointer;font:500 16px/1.2 var(--f-b);color:var(--ink);text-align:left}
.lang-opt:hover,.lang-opt:focus-visible{background:var(--soft);outline:none}
.lang-opt[aria-checked="true"]{background:var(--soft);font-weight:700}
.lang-opt svg.flag{width:24px;height:16px}
.taalbalk{background:var(--ink);color:var(--paper);font:500 14.5px/1.35 var(--f-b)}.taalbalk .w{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding-block:8px}.taalbalk a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}.taalbalk button{margin-left:auto;background:none;border:0;color:inherit;font:400 22px/1 var(--f-b);cursor:pointer;padding:2px 6px}
.lang-opt .lc{margin-left:auto;font:500 12px/1 var(--f-m);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
@media (max-width:1100px){.nav{gap:16px}.nav-links{gap:16px}}
@media (max-width:560px){.lang-btn .code{display:none}.nav-cta{gap:6px}.nav-cta .btn-sm{padding-inline:11px}}
@media (max-width:360px){.logo-name{font-size:19px}}
@media (max-width:980px){
  .bp-split{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero,.sec-head,.auth{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat,.prices{grid-template-columns:minmax(0,1fr)}
  footer.site{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  footer.site>div:first-child{grid-column:1/-1}
  .acct{grid-template-columns:minmax(0,1fr)}
  .side-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .side-nav hr{display:none}
}
/* menu klapt eerder in: sommige talen hebben lange navigatieteksten; .nav.compact zet het script als de balk niet op één regel past */
.nav-acc{display:none}
.nav.compact .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px;z-index:20;box-shadow:var(--shadow)}
.nav.compact .nav-links.open{display:flex}
.nav.compact .nav-links a{padding:12px}
.nav.compact .menu-btn{display:inline-flex}
.nav.compact .nav-cta{margin-left:auto}
.nav-cta,.nav-links{flex-wrap:nowrap}
.nav-links a,.nav-cta .btn{white-space:nowrap}
@media (max-width:1080px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px;z-index:20;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px}
  .nav .menu-btn{display:inline-flex}
  .nav .nav-cta{margin-left:auto}
}
@media (max-width:560px){
  .nav{gap:12px}
  .menu-btn .menu-lbl{display:none}
  .menu-btn{padding-inline:11px}
  .nav-cta #navAccount{display:none}
  .nav-links .nav-acc{display:block;border-top:1px solid var(--line);margin-top:4px;font-weight:700;color:var(--ink)}
  .lang-btn .chev{display:none}
}
@media (max-width:760px){
  .nav-cta .btn-primary{display:none}
  .steps{grid-template-columns:minmax(0,1fr)}
  .cta{padding:28px 22px}
  .kv{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
html{scroll-behavior:smooth}