/* ===== Creazion huisstijl ===== */
:root{
  --navy:#172743; --navy-d:#051b33; --navy-2:#24365a;
  --coral:#f08467; --pink:#ee82b2; --paars:#be7db4; --geel:#fdc420; --oranje:#eba44e;
  --blauw:#3470b6; --blauw-l:#597bbc; --lime:#cfdc6d; --groen:#92c889; --teal:#6dbf9c; --cyaan:#61c1c6;
  --regenboog:linear-gradient(90deg,#61c1c6,#6dbf9c,#cfdc6d,#fdc420,#eba44e,#f08467,#ee82b2,#be7db4,#597bbc,#3470b6);

  --bg:#f5f6f9; --kaart:#fff; --lijn:#e3e6ec; --lijn2:#d2d7e0;
  --tekst:#172743; --zacht:#5b6679; --zachter:#8b94a5;
  --accent:#3470b6; --accent-d:#285c99; --accent-l:#e8f0fa;
  --ok:#0f8a4b; --ok-l:#e3f5ec; --warn:#a86400; --warn-l:#fff4dc; --fout:#c62828; --fout-l:#fdeaea;
  --info:#0e6f94; --info-l:#e3f4f8;
  --r:12px; --r-s:8px;
  --schaduw:0 1px 2px rgba(23,39,67,.05),0 6px 18px rgba(23,39,67,.06);
  --kop:78px;
  --cyaan-ink:#00a0e3; --magenta-ink:#e5007d; --geel-ink:#ffe500; --key-ink:#1d1d1b;
  --kopfont:Lexend,Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14.5px;color:var(--tekst);background:var(--bg);-webkit-font-smoothing:antialiased;min-width:1100px}
.menuknop,.mandmobiel{display:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.2;font-family:var(--kopfont);font-weight:600;letter-spacing:-.01em}
h1{font-size:28px}
h2{font-size:20px}
h3{font-size:16px}
p{margin:0 0 10px;line-height:1.55}
.zacht{color:var(--zacht)}
.klein{font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.verborgen{display:none!important}

/* ===== kop ===== */
header.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--lijn)}
header.top .bar{height:var(--kop);display:flex;align-items:center;gap:28px;padding:0 32px;max-width:1440px;margin:0 auto}
.logolink{display:block;line-height:0}
.logo{display:block;height:52px;width:auto}
nav.hoofd{display:flex;gap:4px;align-items:center;margin-left:auto}
nav.hoofd a,nav.hoofd button{padding:9px 14px;border-radius:var(--r-s);text-decoration:none;color:var(--zacht);font-weight:600;white-space:nowrap;border:0;background:none;cursor:pointer}
nav.hoofd a:hover,nav.hoofd button:hover{background:var(--bg);color:var(--tekst)}
nav.hoofd a.actief{background:var(--navy);color:#fff}
nav.hoofd a.inlogknop{margin-left:10px;border:1px solid var(--lijn2);color:var(--tekst);display:inline-flex;align-items:center;gap:8px}
nav.hoofd a.inlogknop:before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat}
nav.hoofd a.inlogknop:hover{border-color:var(--zachter)}
nav.hoofd a.inlogknop.actief{border-color:var(--navy);color:#fff}
.teller{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--pink);color:#fff;font-size:11px;line-height:18px;text-align:center}
nav.hoofd a.actief .teller{background:#fff;color:var(--navy)}

#app{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto;width:100%;padding:28px 32px 56px;max-width:1440px;margin:0 auto}

/* ===== knoppen & velden ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 18px;border-radius:var(--r-s);border:1px solid transparent;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s}
.btn.primair{background:var(--navy);color:#fff}
.btn.primair:hover{background:var(--navy-2)}
.btn.accent{background:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-d)}
.btn.ghost{background:#fff;border-color:var(--lijn2)}
.btn.ghost:hover{border-color:var(--zachter)}
.btn.gevaar{background:#fff;border-color:#f0c4c4;color:var(--fout)}
.btn.gevaar:hover{background:var(--fout-l)}
.btn.gevaar.vol{background:var(--fout);color:#fff;border-color:var(--fout)}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.groot{height:50px;padding:0 24px;font-size:16px;font-family:var(--kopfont)}
.btn.breed{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkknop{background:none;border:0;padding:0;color:var(--accent);font-weight:600;cursor:pointer}

.veld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.veld label,.veldlabel{font-weight:600;font-size:13px}
.veld .hint{font-size:12px;color:var(--zacht)}
.inv,.veld input:not([type=checkbox]):not([type=radio]),.veld select,.veld textarea{height:40px;padding:0 12px;border:1px solid var(--lijn2);border-radius:var(--r-s);background:#fff;outline:none;width:100%}
.veld textarea{height:auto;min-height:70px;padding:9px 12px;resize:vertical;line-height:1.45}
.inv:focus,.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,112,182,.15)}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vink{display:flex;gap:9px;align-items:flex-start;cursor:pointer;line-height:1.45;margin:4px 0 14px;font-size:13px}
.vink input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent)}
.vlieg{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ===== kaarten & layout ===== */
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw)}
.kaart .kb{padding:22px 24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.split>.paneel{min-width:0}
.plak{position:sticky;top:calc(var(--kop) + 20px)}
.paneel-scroll{max-height:calc(100vh - var(--kop) - 150px);overflow:auto}
.leegpaneel{padding:60px 20px;text-align:center;color:var(--zachter)}
.leegpaneel b{display:block;color:var(--zacht);font-size:15px;margin-bottom:4px}

/* stappen */
.stap{margin-bottom:22px}
.stapkop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.stapnr{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--kopfont);font-weight:600;color:#fff;font-size:14px}
.stapkop h2{font-size:18px}
.stapkop .zacht{margin-left:auto;font-size:13px}

/* productkeuze */
.prodkeuze{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pk{position:relative;border:2px solid var(--lijn);border-radius:var(--r);background:#fff;cursor:pointer;overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s,transform .12s}
.pk:hover{border-color:var(--lijn2);transform:translateY(-1px)}
.pk.gekozen{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,112,182,.15)}
.pk.gekozen:after{content:"✓";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.pk .beeld{height:120px;background:linear-gradient(160deg,#f7f8fb,#eceff4);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--lijn)}
.pk .beeld img{max-width:100%;max-height:100%;object-fit:contain}
.pk .beeld svg{height:96px}
.pk .inh{padding:11px 13px 13px}
.pk b{display:block;font-family:var(--kopfont);font-weight:600;font-size:14.5px;margin-bottom:2px}
.pk .spec{font-size:12px;color:var(--zacht);margin-bottom:6px}
.pk .vanaf{font-size:12px;color:var(--zacht)}
.pk .vanaf strong{font-size:15px;color:var(--tekst)}

/* upload */
.dropzone{border:2px dashed var(--lijn2);border-radius:var(--r);padding:26px;text-align:center;cursor:pointer;background:#fff;transition:border-color .12s,background .12s}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-l)}
.dropzone b{display:block;font-size:15px;margin:8px 0 3px;font-family:var(--kopfont);font-weight:600}
.dropzone span{font-size:12.5px;color:var(--zacht)}
.dropzone svg{width:34px;height:34px;color:var(--accent)}
.bestandlijst{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.bestandlijst li{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--lijn);border-radius:var(--r-s);background:#fff}
.bestandlijst .thumb{flex:none;width:46px;height:46px;border-radius:6px;object-fit:cover;background:#eef1f5}
.bestandlijst .ext{flex:none;width:46px;height:46px;border-radius:6px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.bestandlijst .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.bestandlijst .gr{font-size:12px;color:var(--zacht);white-space:nowrap}
.bestandlijst .x{border:0;background:none;color:var(--zachter);cursor:pointer;font-size:20px;line-height:1;padding:0 4px}
.bestandlijst .x:hover{color:var(--fout)}
.voortgang{height:4px;background:var(--lijn);border-radius:2px;overflow:hidden;width:90px}
.voortgang i{display:block;height:100%;background:var(--accent);width:0;transition:width .15s}

/* aantal */
.aantalrij{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.aantalrij input{font-size:20px!important;font-weight:700;height:52px!important;width:200px!important;font-family:var(--kopfont)}
.snel{display:flex;gap:6px;flex-wrap:wrap}
.snel button{border:1px solid var(--lijn2);background:#fff;border-radius:20px;padding:6px 12px;cursor:pointer;font-weight:600;font-size:12.5px;color:var(--zacht)}
.snel button:hover,.snel button.aan{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}

/* samenvatting */
.samenv-prod{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.samenv-prod .beeld{width:64px;height:64px;flex:none;border-radius:10px;background:linear-gradient(160deg,#f7f8fb,#eceff4);display:flex;align-items:center;justify-content:center;border:1px solid var(--lijn)}
.samenv-prod .beeld svg{height:50px}.samenv-prod .beeld img{max-width:100%;max-height:100%;object-fit:contain}
.staffel{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:13.5px}
.staffel th,.staffel td{padding:7px 10px;border-bottom:1px solid var(--lijn);text-align:left}
.staffel th{font-size:11.5px;color:var(--zacht);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.staffel .r{text-align:right}
.staffel tr.hit td{background:var(--accent-l);font-weight:700}
.staffel tr.hit td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.prijsblok{background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 20px;margin-bottom:16px;position:relative;overflow:hidden}
.prijsblok:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--regenboog)}
.prijsblok .regel{display:flex;justify-content:space-between;padding:3px 0;color:#b9c3d6}
.prijsblok .regel b{color:#fff;font-weight:600}
.prijsblok .totaal{border-top:1px solid #33456a;margin-top:8px;padding-top:10px;font-size:15px;color:#fff;align-items:baseline}
.prijsblok .totaal b{font-size:26px;font-weight:700;font-family:var(--kopfont)}
.prijsblok .incl{font-size:12px;color:#93a0b8;text-align:right}
.prijsblok.leeg{background:#eef1f6;color:var(--zacht)}
.prijsblok.leeg:before{display:none}
.tip{display:flex;gap:10px;align-items:center;background:var(--warn-l);color:#6e4300;border-radius:var(--r-s);padding:9px 12px;font-size:13px;margin-top:12px}
.tip button{margin-left:auto}
.melding{border-radius:var(--r-s);padding:11px 13px;font-size:13px;margin-bottom:14px;line-height:1.45}
.melding.fout{background:var(--fout-l);color:var(--fout)}
.melding.info{background:var(--info-l);color:#0b5772}
.melding.ok{background:var(--ok-l);color:var(--ok)}
.controle{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:5px;font-size:13px}
.controle li{display:flex;gap:8px;align-items:center;color:var(--zachter)}
.controle li:before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--lijn2);flex:none}
.controle li.ok{color:var(--tekst)}
.controle li.ok:before{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat}

/* ===== tabellen (verstelbare kolommen) ===== */
.werkbalk{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.werkbalk .inv{width:230px}
.werkbalk select.inv{width:auto}
.paginakop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.paginakop p{margin:4px 0 0;color:var(--zacht)}
.tw{overflow:auto;border:1px solid var(--lijn);border-radius:var(--r);background:#fff}
table.tbl{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:100%}
.tbl th,.tbl td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--lijn);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl td{font-size:13.5px}
.tbl th{position:sticky;top:0;background:#f7f8fb;font-size:11.5px;font-weight:700;color:var(--zacht);text-transform:uppercase;letter-spacing:.04em;z-index:1;user-select:none}
.tbl th .rz{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:2}
.tbl th .rz:after{content:"";position:absolute;left:4px;top:25%;height:50%;width:1px;background:var(--lijn2)}
.tbl th .rz:hover:after,body.rekken .tbl th .rz:after{background:var(--accent);width:2px}
.tbl .r{text-align:right}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:#fafbfd}
.tbl tbody tr.sel td{background:var(--accent-l)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.leeg td{text-align:center;color:var(--zachter);padding:40px;cursor:default;background:#fff!important}
body.rekken,body.rekken *{cursor:col-resize!important;user-select:none!important}

/* statuslabels */
.st{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.st:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.nieuw{background:var(--info-l);color:var(--info)}
.st.bezig{background:var(--warn-l);color:var(--warn)}
.st.ok{background:var(--ok-l);color:var(--ok)}
.st.grijs{background:#eceff3;color:var(--zacht)}
.st.fout{background:var(--fout-l);color:var(--fout)}
.st.accent{background:#fbe8f1;color:#b4417a}

/* detail */
.dkop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.dkop h2{font-size:22px}
.dgrid{display:grid;grid-template-columns:140px 1fr;gap:7px 14px;margin-bottom:14px}
.dgrid dt{color:var(--zacht);font-size:13px}
.dgrid dd{margin:0;font-weight:500;word-break:break-word}
.sectie{border-top:1px solid var(--lijn);padding-top:15px;margin-top:6px;margin-bottom:12px}
.sectie>h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);margin-bottom:10px;font-family:Inter,sans-serif;font-weight:700}
.knoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pre{white-space:pre-wrap}
.staffeled{width:100%;border-collapse:collapse}
.staffeled th{text-align:left;font-size:12px;color:var(--zacht);padding:0 6px 6px 0;font-weight:600}
.staffeled td{padding:0 6px 6px 0}
.staffeled input{height:34px!important}

/* inloggen beheer */
.login{max-width:420px;margin:60px auto}
.login .kb{padding:30px}
.login h2{margin-bottom:6px}
.login form>p{color:var(--zacht);margin-bottom:20px}

/* modal & toast */
.modal-achter{position:fixed;inset:0;background:rgba(5,27,51,.5);display:flex;align-items:center;justify-content:center;z-index:100;animation:fade .12s}
.modal{background:#fff;border-radius:14px;width:440px;max-width:calc(100vw - 32px);padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{font-size:17px;margin-bottom:10px}
.modal p{color:var(--zacht)}
.modal .acties{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
#toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--navy);color:#fff;padding:11px 16px;border-radius:var(--r-s);box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:400px;animation:fade .15s;font-weight:500}
.toast.fout{background:var(--fout)}
.toast.ok{border-left:4px solid var(--teal)}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.laden-scherm{min-height:50vh;display:flex;align-items:center;justify-content:center}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--lijn);border-top-color:var(--accent);animation:draai .7s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
.succes{max-width:620px;margin:30px auto;text-align:center}
.succes .kb{padding:44px 40px}
.succes .vinkrond{width:68px;height:68px;border-radius:50%;background:var(--ok-l);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:32px;font-weight:800}
.succes .knoppen{justify-content:center;margin-top:22px}
.setup{max-width:620px;margin:80px auto;padding:30px}
.setup code{background:#eef0f3;padding:2px 6px;border-radius:4px}

/* ===== CMYK-elementen ===== */
.cmyk-streep{display:flex;height:5px}
.cmyk-streep i{flex:1}
.cmyk-streep i:nth-child(1),.c{--ink:var(--cyaan-ink)}
.cmyk-streep i:nth-child(2),.m{--ink:var(--magenta-ink)}
.cmyk-streep i:nth-child(3),.y{--ink:var(--geel-ink)}
.cmyk-streep i:nth-child(4),.k{--ink:var(--key-ink)}
.cmyk-streep i{background:var(--ink)}

/* intro (licht, boven) */
.intro{background:#fff;border-bottom:1px solid var(--lijn);position:relative;overflow:hidden}
.intro:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(23,39,67,.07) 1.2px,transparent 1.6px);background-size:14px 14px;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 80%);mask-image:linear-gradient(90deg,transparent 35%,#000 80%)}
.intro .in{position:relative;max-width:1440px;margin:0 auto;padding:38px 32px 40px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.intro-tekst{max-width:880px}
.intro .label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);background:var(--bg);border:1px solid var(--lijn);border-radius:20px;padding:6px 12px 6px 10px;margin-bottom:16px}
.intro .label i{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.intro .label i:last-of-type{margin-right:5px}
.intro h1{font-size:42px;line-height:1.1;letter-spacing:-.02em;font-weight:700}
.intro h1 .nadruk{background:linear-gradient(90deg,var(--cyaan-ink),var(--magenta-ink) 55%,#f39200);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p{color:var(--zacht);font-size:16px;margin:14px 0 0;max-width:640px}
.intro .usp{list-style:none;padding:0;margin:20px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.intro .usp li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:7px 14px 7px 10px;font-weight:600;font-size:13.5px}
.intro .usp i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
/* CMYK-rozet: overlappende inktcirkels (subtractief mengen) */
.rozet{position:relative;width:250px;height:230px;flex:none;margin-right:20px}
.rozet span{position:absolute;width:128px;height:128px;border-radius:50%;background:var(--ink);mix-blend-mode:multiply;opacity:.88}
.rozet .c{left:20px;top:10px}
.rozet .m{left:102px;top:10px}
.rozet .y{left:61px;top:80px}
.rozet .k{width:46px;height:46px;left:184px;top:150px;opacity:1}

/* stapnummers in CMYK */
.stapnr{background:var(--ink)}
.stapnr.y{color:var(--key-ink)}

/* smalle balk onderaan met NAW */
footer.voet{background:var(--navy-d);color:#aeb8ca;margin-top:auto;font-size:12.5px}
footer.voet .cmyk-streep{height:3px}
footer.voet .in{max-width:1440px;margin:0 auto;padding:10px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
footer.voet .in span{display:inline-flex;align-items:center}
footer.voet .in span+span:not(.rechts):before{content:"·";margin:0 10px;color:#5d6a82}
footer.voet b{color:#fff;font-weight:600}
footer.voet a{color:#fff;text-decoration:none}
footer.voet a:hover{text-decoration:underline}
footer.voet .rechts{margin-left:auto;color:#7f8ca4}

/* ===== website-pagina's ===== */
.c{--tint:#e3f4fc;--ink-d:#0087c1}
.m{--tint:#fde4f0;--ink-d:#c8006c}
.y{--tint:#fff8c6;--ink-d:#9a8400}
.k{--tint:#e9eaee;--ink-d:#1d1d1b}
main.site{padding-top:8px}
.paginaband{background:#fff;border-bottom:1px solid var(--lijn);position:relative;overflow:hidden}
.paginaband:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(23,39,67,.07) 1.2px,transparent 1.6px);background-size:14px 14px;-webkit-mask-image:linear-gradient(90deg,transparent 45%,#000 85%);mask-image:linear-gradient(90deg,transparent 45%,#000 85%)}
.paginaband .in{position:relative;max-width:1440px;margin:0 auto;padding:30px 32px 32px}
.paginaband .label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);background:var(--bg);border:1px solid var(--lijn);border-radius:20px;padding:6px 12px 6px 10px;margin-bottom:12px}
.paginaband .label i{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.paginaband .label i:last-of-type{margin-right:5px}
.paginaband h1{font-size:34px;font-weight:700;letter-spacing:-.02em}
.paginaband p{color:var(--zacht);font-size:15.5px;margin:10px 0 0;max-width:720px}

.blok{margin:34px 0}
.blokkop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.blokkop h2,.blok>h2{font-size:24px;font-weight:700}
.meer{color:var(--accent);font-weight:600;text-decoration:none}
.meer:hover{text-decoration:underline}
.twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}

.kaarten3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ikaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:22px;box-shadow:var(--schaduw);border-top:4px solid var(--ink)}
.ikaart h3{font-size:17px;margin:14px 0 6px}
.ikaart p{color:var(--zacht);margin:0}
.iic{width:46px;height:46px;border-radius:12px;background:var(--tint);color:var(--ink-d);display:flex;align-items:center;justify-content:center;flex:none}
.iic svg{width:26px;height:26px}

.stappen4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.s4{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:22px 20px;box-shadow:var(--schaduw)}
.s4nr{position:absolute;top:16px;right:18px;font-family:var(--kopfont);font-weight:700;font-size:28px;color:var(--tint);-webkit-text-stroke:1px var(--ink-d);opacity:.55}
.s4 .s4ic{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
.s4.y .s4ic{color:var(--key-ink)}
.s4 .s4ic svg{width:24px;height:24px}
.s4 h3{font-size:16px;margin:14px 0 6px}
.s4 p{color:var(--zacht);margin:0;font-size:14px}

.prodraster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pkaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:var(--schaduw);transition:transform .12s,box-shadow .12s}
.pkaart:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,39,67,.1)}
.pkaart .beeld{height:160px;background:linear-gradient(160deg,#f7f8fb,#eceff4);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--lijn)}
.pkaart .beeld svg{height:124px}.pkaart .beeld img{max-width:100%;max-height:100%;object-fit:contain}
.pkaart .inh{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pkaart b{font-family:var(--kopfont);font-weight:600;font-size:15.5px}
.pkaart .spec{font-size:12.5px;color:var(--zacht)}
.pkaart .vanaf{font-size:12.5px;color:var(--zacht);margin-top:auto;padding-top:8px}
.pkaart .vanaf strong{font-size:16px;color:var(--tekst)}
.pkaart .btn{margin-top:10px;align-self:flex-start}

.ctaband{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:26px 28px;box-shadow:var(--schaduw);position:relative;overflow:hidden}
.ctaband:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--cyaan-ink) 0 25%,var(--magenta-ink) 0 50%,var(--geel-ink) 0 75%,var(--key-ink) 0)}
.ctaband h2{font-size:21px;font-weight:700}
.ctaband p{color:var(--zacht);margin:6px 0 0}
.ctaband .btn{margin-left:auto}
.ctaic{width:56px;height:56px;border-radius:14px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ctaic svg{width:30px;height:30px}

.tekstblok{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:26px 28px;box-shadow:var(--schaduw)}
.tekstblok h2{font-size:22px;font-weight:700;margin-bottom:12px}
.tekstblok p{color:#3d4a60;font-size:15px}
.cmykuitleg{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:26px 28px;box-shadow:var(--schaduw);display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:center}
.inktrij{grid-column:1/-1;display:flex;gap:10px}
.inktrij span{flex:1;height:64px;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--kopfont);font-weight:700;font-size:26px;display:flex;align-items:center;justify-content:center}
.inktrij span.y{color:var(--key-ink)}
.cmykuitleg dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:8px 0 0}
.cmykuitleg dt{font-weight:700;display:flex;align-items:center;gap:8px}
.cmykuitleg dt:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink)}
.cmykuitleg dd{margin:0;color:var(--zacht)}
.rozet.klein{width:150px;height:140px;margin:0}
.rozet.klein span{width:84px;height:84px}
.rozet.klein .c{left:8px;top:6px}.rozet.klein .m{left:58px;top:6px}.rozet.klein .y{left:33px;top:50px}

.feiten{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feit{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:18px;box-shadow:var(--schaduw)}
.feit b{display:block;font-family:var(--kopfont);font-weight:600;font-size:15px}
.feit span{color:var(--zacht);font-size:13px}

.contactgrid{align-items:stretch}
.contactinfo{display:flex;flex-direction:column;gap:16px}
.cregel{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--lijn);line-height:1.5}
.cregel:last-child{border-bottom:0}
.cregel .iic{width:40px;height:40px;border-radius:10px;background:var(--accent-l);color:var(--accent)}
.cregel .iic svg{width:22px;height:22px}
.cregel a{color:var(--accent);font-weight:600;text-decoration:none}
.kaartvak{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw);flex:1;display:flex;flex-direction:column;min-height:240px}
.kaartvak iframe{border:0;width:100%;flex:1;min-height:220px;display:block}
.kaartvak a{padding:9px 14px;color:var(--accent);font-weight:600;text-decoration:none;border-top:1px solid var(--lijn)}

/* ===== bestelpagina compact (alles op één scherm) ===== */
main.bestel{padding-top:16px;padding-bottom:24px}
.bestel .split{gap:18px}
.bestel .plak{top:calc(var(--kop) + 12px)}
.bestelvak{padding:16px 18px}
.bestel .stap{margin:0;padding:12px 0;border-top:1px solid var(--lijn)}
.bestel .stap:first-child{border-top:0;padding-top:0}
.bestel #samenv+.stap{border-top:1px solid var(--lijn);margin-top:12px}
.bestel .stapkop{margin-bottom:8px;gap:10px}
.bestel .stapnr{width:24px;height:24px;font-size:12.5px}
.bestel .stapkop h2{font-size:15.5px}
.bestel .prodkeuze{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}
.bestel .pk{flex-direction:row;align-items:center;border-width:1.5px}
.bestel .pk .beeld{width:58px;height:58px;flex:none;border-bottom:0;border-right:1px solid var(--lijn)}
.bestel .pk .beeld svg{height:46px}
.bestel .pk .inh{padding:7px 10px;min-width:0}
.bestel .pk b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bestel .pk .spec{font-size:11.5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bestel .pk .vanaf{font-size:11.5px;white-space:nowrap}.bestel .pk .vanaf strong{font-size:13px}
.bestel .pk.gekozen:after{top:5px;right:5px;width:18px;height:18px;font-size:10px}
.bestel .dropzone{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px}
.bestel .dropzone svg{width:28px;height:28px;flex:none}
.bestel .dropzone b{margin:0 0 2px;font-size:14px}
.bestel .dropzone span{font-size:12px}
.bestel .bestandlijst{margin-top:6px;gap:4px}
.bestel .bestandlijst li{padding:4px 8px;gap:10px}
.bestel .bestandlijst .thumb,.bestel .bestandlijst .ext{width:32px;height:32px}
.bestel .aantalrij{flex-wrap:nowrap;align-items:center;gap:10px}
.bestel .aantalrij input{width:120px!important;height:42px!important;font-size:18px!important;flex:none}
.bestel .snel{gap:5px}
.bestel .snel button{padding:5px 10px;font-size:12px}
.bestel .snel em{font-style:normal;color:var(--ok);font-weight:700}
.bestel .snel button.aan em{color:inherit}
.bestel .tip{margin-top:8px;padding:7px 10px;font-size:12.5px}
.samenkop{font-size:17px!important;margin-bottom:10px}
.bestel .samenv-prod{margin-bottom:10px;gap:12px}
.bestel .samenv-prod .beeld{width:46px;height:46px}
.bestel .samenv-prod .beeld svg{height:36px}
.bestel .samenv-prod b{font-family:var(--kopfont);font-size:15px}
.bestel .prijsblok{padding:12px 16px;margin-bottom:0}
.bestel .prijsblok .regel{padding:2px 0;font-size:13.5px}
.bestel .prijsblok .totaal{margin-top:6px;padding-top:8px}
.bestel .prijsblok .totaal b{font-size:22px}
.bestel .prijsblok.leeg{font-size:13.5px}
.bestel .veld{margin-bottom:8px;gap:3px}
.bestel .veld label{font-size:12.5px}
.bestel .veld input:not([type=checkbox]){height:36px}
.bestel .rij{gap:10px}
.bestel .vink{margin:2px 0 10px;font-size:12.5px}
.bestel .btn.groot{height:46px}
.btn.bijna{opacity:.85}

/* rechterkolom extra compact */
.bestel .samenv-prod{margin-bottom:8px;gap:10px;align-items:center}
.bestel .samenv-prod .beeld{width:36px;height:36px;border-radius:8px}
.bestel .samenv-prod .beeld svg{height:28px}
.bestel .samenv-prod b{font-size:14px}
.bestel .samenv-prod .pinfo{font-size:12px;line-height:1.35}
.prijsblok.mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px}
.prijsblok.mini .pr-l{display:flex;flex-direction:column;font-size:12.5px;color:#b9c3d6;line-height:1.45}
.prijsblok.mini .pr-r{text-align:right;display:flex;flex-direction:column;line-height:1.2}
.prijsblok.mini .pr-r b{font-family:var(--kopfont);font-size:20px;color:#fff}
.prijsblok.mini .pr-r span{font-size:11.5px;color:#93a0b8}
.bestel .prijsblok.leeg{padding:9px 14px;font-size:12.5px}
.bestel #samenv+.stap{margin-top:10px;padding-top:10px}
.bestel #orderform .stapkop{margin-bottom:6px}
.bestel #orderform .veld{margin-bottom:6px}
.bestel #orderform .rij{gap:8px}
.bestel #orderform .veld input{height:34px;font-size:13.5px;padding:0 10px}
.bestel #orderform .vink{margin:2px 0 8px;font-size:12px}
.bestel #orderform .vink input{width:14px;height:14px}
.bestel #orderform .btn.groot{height:40px;font-size:15px}
.bestel .notitie{margin:6px 0 0;text-align:center;font-size:11.5px;color:var(--zachter)}

/* staffel als kleine tabel naast het aantal */
.bestel .aantalrij{align-items:flex-start;gap:16px}
.aantalinvoer{display:flex;flex-direction:column;gap:4px;flex:none}
.staffelmini{flex:1;border-collapse:collapse;font-size:13px;border:1px solid var(--lijn);border-radius:var(--r-s);overflow:hidden;background:#fff}
.staffelmini th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--zacht);font-weight:600;text-align:left;padding:4px 10px;background:#f7f8fb;border-bottom:1px solid var(--lijn)}
.staffelmini td{padding:3px 10px;border-bottom:1px solid var(--lijn)}
.staffelmini tr:last-child td{border-bottom:0}
.staffelmini .r{text-align:right}
.staffelmini tbody tr{cursor:pointer}
.staffelmini tbody tr:hover td{background:#fafbfd}
.staffelmini tbody tr.aan td{background:var(--accent-l);font-weight:700}
.staffelmini tbody tr.aan td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

.bestel .stap{padding:10px 0}
.bestel .dropzone{padding:10px 14px}
.bestel .tip{margin-top:6px;padding:5px 10px}
.bestel .tip .btn.sm{height:28px}

/* groene + onder tabellen/regels */
.plusknop{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:10px 0 0 4px;border-radius:50%;border:0;background:#1f9d55;color:#fff;font-size:24px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(31,157,85,.35)}
.plusknop:hover{background:#178246}
.plusknop.klein{width:28px;height:28px;font-size:19px;margin:4px 0 0}
/* tabs per soort op de bestelpagina */
.soorttabs{display:inline-flex;gap:4px;margin-left:auto;background:#eef1f5;border-radius:20px;padding:3px}
.soorttabs button{border:0;background:none;border-radius:16px;padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--zacht);cursor:pointer}
.soorttabs button.actief{background:#fff;color:var(--tekst);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ===== ERP-maatvoering (zoals Kreuwel ERP: compact, gelijke hoogtes) ===== */
:root{--kop:60px;--veldh:26px}
body{font-size:13px}
h1{font-size:20px} h2{font-size:15px} h3{font-size:14px}
.logo{height:40px}
header.top .bar{gap:18px;padding:0 24px}
nav.hoofd a,nav.hoofd button{padding:6px 10px;font-size:13px}
main{padding:14px 24px 28px}
.paginakop{margin-bottom:10px;align-items:center}
.paginakop h1{display:flex;align-items:center;gap:8px}
.btn{height:28px;padding:0 12px;font-size:13px;border-radius:6px}
.btn.groot{height:34px;padding:0 16px;font-size:14px}
.btn.sm{height:24px;padding:0 9px;font-size:12px}
.veld{gap:2px;margin-bottom:7px}
.veld label,.veldlabel{font-size:12px}
.veld .hint{font-size:11.5px}
.inv,.veld input:not([type=checkbox]):not([type=radio]),.veld select{height:var(--veldh);padding:0 8px;font-size:13px;border-radius:5px}
.veld textarea{min-height:54px;padding:5px 8px;font-size:13px;border-radius:5px}
.rij{gap:8px}
.vink{font-size:12.5px;margin:2px 0 8px}
.kaart .kb{padding:14px 16px}
.split{gap:14px}
.tbl th,.tbl td{padding:0 8px;height:26px;line-height:26px}
.tbl td{font-size:12.5px}
.tbl th{font-size:11px}
.st{padding:1px 8px;font-size:11.5px;line-height:18px}
.werkbalk{margin-bottom:8px}
.werkbalk .inv{width:200px}
.dkop{margin-bottom:10px}.dkop h2{font-size:17px}
.dgrid{grid-template-columns:120px 1fr;gap:3px 12px;margin-bottom:8px}
.dgrid dt{font-size:12px}.dgrid dd{font-size:12.5px}
.sectie{padding-top:10px;margin-bottom:8px}
.sectie>h4{margin-bottom:6px}
.bestandlijst li{padding:3px 8px}
.bestandlijst .ext,.bestandlijst .thumb{width:30px;height:30px}
.staffeled input{height:var(--veldh)!important}
.toast{padding:8px 14px;font-size:13px}
.info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--lijn2);color:var(--zacht);font:600 11px/1 Inter,sans-serif;font-style:italic;cursor:help;vertical-align:middle}
.tw{max-height:calc(100vh - var(--kop) - 130px)}
#lijst.smal{max-width:640px}
.login{margin:40px auto}.login .kb{padding:22px}

/* website-pagina's mee compacter */
.intro .in{padding:26px 24px 28px}
.intro h1{font-size:32px}
.intro p{font-size:14.5px;margin-top:10px}
.rozet{transform:scale(.8);transform-origin:right center}
.paginaband .in{padding:20px 24px 22px}
.paginaband h1{font-size:26px}
.paginaband p{font-size:14px}
.blok{margin:22px 0}
.blokkop h2,.blok>h2{font-size:19px}
.ikaart,.s4{padding:16px}
.ikaart h3,.s4 h3{font-size:15px;margin:10px 0 4px}
.ikaart p,.s4 p,.tekstblok p{font-size:13px}
.iic,.s4 .s4ic{width:38px;height:38px}
.iic svg{width:22px;height:22px}
.ctaband{padding:18px 20px}
.ctaband h2{font-size:17px}
.tekstblok,.cmykuitleg{padding:18px 20px}
.tekstblok h2{font-size:18px}
.pkaart .beeld{height:120px}.pkaart .beeld svg{height:94px}
.feit{padding:12px}
footer.voet .in{padding:7px 24px}

/* bestelpagina in ERP-maat */
main.bestel{padding-top:12px}
.bestel .stapkop h2{font-size:14px}
.bestel .stapnr{width:22px;height:22px;font-size:12px}
.bestel .pk .beeld{width:50px;height:50px}.bestel .pk .beeld svg{height:40px}
.bestel .pk b{font-size:13px}
.bestel .aantalrij input{height:var(--veldh)!important;width:110px!important;font-size:15px!important}
.bestel #orderform .veld input{height:var(--veldh);font-size:13px}
.bestel #orderform .btn.groot{height:34px;font-size:14px}
.bestel .dropzone{padding:8px 12px}
.bestel .dropzone svg{width:24px;height:24px}
.bestel .dropzone b{font-size:13px}
.staffelmini td{padding:0 10px;height:24px}
.staffelmini th{padding:0 10px;height:24px}

/* ===== venster (product/soort openen) ===== */
body.geen-scroll{overflow:hidden}
.venster-achter{position:fixed;inset:0;background:rgba(5,27,51,.45);display:flex;align-items:center;justify-content:center;z-index:90;animation:fade .12s}
.venster{background:#fff;border-radius:10px;width:min(980px,calc(100vw - 40px));max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.venster.smal{width:min(460px,calc(100vw - 40px))}
.venster-kop{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--lijn);background:#f7f8fb}
.venster-kop h2{font-size:15px}
.venster-x{border:0;background:none;font-size:22px;line-height:1;color:var(--zacht);cursor:pointer;padding:0 4px}
.venster-x:hover{color:var(--fout)}
.venster-body{padding:14px 16px;overflow:auto}
.prodform{display:grid;grid-template-columns:1.15fr 1fr;gap:6px 22px}
.prodform h4,.venster-body form>h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);margin:0 0 8px;font-family:Inter,sans-serif;font-weight:700;display:flex;align-items:center;gap:6px}
.vkol{min-width:0}
.vvoet{grid-column:1/-1;display:flex;gap:8px;align-items:center;border-top:1px solid var(--lijn);padding-top:10px;margin-top:4px}
.modal-achter{z-index:120}

footer.voet .voetlogo{width:22px;height:22px;border-radius:5px;margin-right:8px}

/* bedrukkingskeuze */
.bedrukrij{display:flex;align-items:center;gap:12px;margin-top:10px}
.bedrukrij .veldlabel{font-size:12px;color:var(--zacht);font-weight:600}
.bedruk{display:flex;gap:8px;flex:1}
.bedruk button{flex:1;display:flex;align-items:center;gap:10px;text-align:left;border:1.5px solid var(--lijn2);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.bedruk button:hover:not(:disabled){border-color:var(--zachter)}
.bedruk button.aan{border-color:var(--accent);background:var(--accent-l)}
.bedruk button:disabled{opacity:.45;cursor:not-allowed}
.bedruk .bi{width:28px;height:28px;border-radius:7px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--navy);flex:none}
.bedruk button.aan .bi{background:#fff;color:var(--accent)}
.bedruk .bi svg{width:18px;height:18px}
.bedruk b{display:block;font-size:13px}
.bedruk small{display:block;font-size:11.5px;color:var(--zacht)}
.optlabel{display:inline-block;font:600 11px/16px Inter,sans-serif;padding:0 6px;border-radius:4px;background:var(--accent-l);color:var(--accent);vertical-align:middle;margin-left:4px}
/* twee staffels naast elkaar in het productvenster */
.staffelduo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stkop{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12.5px}
.stkop svg{width:16px;height:16px;color:var(--accent)}
.staffeled th{font-size:11px}
.staffeled td:last-child{width:30px}

/* printkwaliteit */
.bestandlijst .nm small{display:block;font-size:11px;color:var(--zachter);font-weight:400}
.dpi{font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px;white-space:nowrap}
.dpi.top{background:var(--ok-l);color:var(--ok)}
.dpi.goed{background:#eaf5e1;color:#4c7a12}
.dpi.matig{background:var(--warn-l);color:var(--warn)}
.dpi.laag{background:var(--fout-l);color:var(--fout)}
.dpiwaarschuwing .melding{margin:6px 0 0;padding:6px 10px;font-size:12px}
.melding.waarsch{background:var(--warn-l);color:#6e4300}
/* live voorbeeld */
.samenv-top{display:flex;gap:12px;align-items:stretch}
.voorbeeld{width:96px;flex:none;background:linear-gradient(160deg,#f7f8fb,#eceff4);border:1px solid var(--lijn);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px}
.voorbeeld svg{width:90px;height:112px}
.vbnote{font-size:9.5px;color:var(--zachter);text-align:center;line-height:1.2}
.samenv-rechts{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.bestel .samenv-rechts .samenv-prod{margin:0}
/* USP-rij en scenariotegels */
.uspband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 0}
.usp{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:10px 12px}
.usp b{display:block;font-size:13px}
.usp small{display:block;font-size:11.5px;color:var(--zacht)}
.usp .iic{width:34px;height:34px}
.usp .iic svg{width:19px;height:19px}
.scenario4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.scen{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:14px;text-decoration:none;position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s}
.scen:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink)}
.scen:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,39,67,.1)}
.scen .iic{margin-bottom:6px}
.scen b{font-family:var(--kopfont);font-size:15px;font-weight:600}
.scen small{color:var(--zacht);font-size:12.5px;line-height:1.4}
.scen .pijl{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--accent)}
/* productfoto in beheer */
.fotovak{display:flex;gap:10px;align-items:center}
.fotothumb{width:64px;height:64px;border:1px solid var(--lijn);border-radius:8px;background:linear-gradient(160deg,#f7f8fb,#eceff4);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.fotothumb img{max-width:100%;max-height:100%;object-fit:contain}.fotothumb svg{height:52px}

/* ===== ontwerper (kaal, volledig scherm) ===== */
body.ow-modus{overflow:hidden}
body.ow-modus #app{min-height:100vh}
.ow{display:grid;grid-template-columns:60px 216px minmax(0,1fr) 64px;height:100vh;background:#eef1f5;transition:grid-template-columns .18s}
.ow.dicht{grid-template-columns:60px 0 minmax(0,1fr) 64px}
.ow-bar{background:#fff;border-right:1px solid var(--lijn);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:4px;z-index:2}
.ow-c{display:block;margin-bottom:12px}
.ow-c img{width:36px;height:36px;border-radius:9px;display:block}
.ow-bar button{width:54px;border:0;background:none;border-radius:10px;padding:7px 0 5px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--zacht);cursor:pointer;font-size:9.5px;font-weight:600}
.ow-bar button svg{width:22px;height:22px}
.ow-bar button:hover{background:var(--bg);color:var(--tekst)}
.ow-bar button.aan{background:var(--accent-l);color:var(--accent)}
.ow-bar-onder{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px}
.ow-paneel{background:#fff;border-right:1px solid var(--lijn);overflow:auto;padding:12px 10px 18px;min-width:0}
.ow.dicht .ow-paneel{padding:0;overflow:hidden;border:0}
.ow-paneel h3{font-size:15px;margin-bottom:10px}
.ow-paneel h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);margin:14px 0 6px;font-family:Inter,sans-serif;font-weight:700}
.ow-prod{display:flex;flex-direction:column;gap:6px}
.ow-prod button,.ow-lijst button{display:flex;align-items:center;gap:10px;border:1.5px solid var(--lijn);background:#fff;border-radius:8px;padding:5px 8px;cursor:pointer;text-align:left}
.ow-prod button.aan,.ow-lijst button.aan{border-color:var(--accent);background:var(--accent-l)}
.ow-pb{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--bg);overflow:hidden}
.ow-pb svg{height:32px}.ow-pb img{max-width:100%;max-height:100%;object-fit:contain}
.ow-prod b{display:block;font-size:13px}.ow-prod small{font-size:11.5px;color:var(--zacht)}
.ow-seg{display:flex;background:#eef1f5;border-radius:8px;padding:3px;gap:3px}
.ow-seg button{flex:1;border:0;background:none;border-radius:6px;padding:5px 8px;font-weight:600;font-size:12.5px;color:var(--zacht);cursor:pointer}
.ow-seg button.aan{background:#fff;color:var(--tekst);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.ow-seg button:disabled{opacity:.4;cursor:not-allowed}
.ow-seg.klein{flex:none}.ow-seg.klein button{padding:3px 10px}
.ow-maat{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:12px 0 0;font-size:12px}
.ow-maat dt{color:var(--zacht)}.ow-maat dd{margin:0;font-weight:600}
.ow-drop{border:2px dashed var(--lijn2);border-radius:10px;padding:14px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.ow-drop:hover,.ow-drop.over{border-color:var(--accent);background:var(--accent-l)}
.ow-drop svg{width:26px;height:26px;color:var(--accent)}
.ow-drop b{font-size:13px}.ow-drop small{font-size:11.5px;color:var(--zacht)}
.ow-lijst{display:flex;flex-direction:column;gap:5px}
.ow-lijst img{width:34px;height:34px;object-fit:cover;border-radius:5px;flex:none}
.ow-lijst span{flex:1;min-width:0;font-size:12.5px;overflow-wrap:anywhere}
.ow-tt{flex:none!important;width:34px;height:34px;border-radius:5px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.ow-dpi{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:10px}
.ow-dpi.top{background:var(--ok-l);color:var(--ok)}.ow-dpi.goed{background:#eaf5e1;color:#4c7a12}
.ow-dpi.matig{background:var(--warn-l);color:var(--warn)}.ow-dpi.laag{background:var(--fout-l);color:var(--fout)}
.ow-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.ow-knoppen button{border:1px solid var(--lijn2);background:#fff;border-radius:6px;padding:5px 6px;font-size:12px;font-weight:600;cursor:pointer}
.ow-knoppen button:hover{border-color:var(--zachter)}
.ow-knoppen button.aan{border-color:var(--accent);background:var(--accent-l);color:var(--accent)}
.ow-schakel{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:12px}
.ow-schakel input{display:none}
.ow-schakel span{width:36px;height:20px;border-radius:10px;background:#cfd5de;position:relative;transition:background .15s;flex:none}
.ow-schakel span:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ow-schakel input:checked+span{background:var(--accent)}
.ow-schakel input:checked+span:after{left:18px}
.ow-uit{opacity:.45}
.ow-kleuren{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ow-kleuren button{aspect-ratio:1;border-radius:7px;border:1px solid var(--lijn2);cursor:pointer}
.ow-kleuren button.aan{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.ow-kleuren.klein{grid-template-columns:repeat(12,1fr);gap:3px;margin-top:6px}
.ow-kleuren.klein button{border-radius:4px}
.ow-picker{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;cursor:pointer}
.ow-picker input{width:34px;height:28px;border:1px solid var(--lijn2);border-radius:6px;padding:0;background:none;cursor:pointer}
.ow-picker code{font-size:11.5px;color:var(--zacht)}
.ow-picker.klein{margin:0}
.ow-tip{font-size:11.5px;color:var(--zachter);margin-top:10px}
.ow-plus{width:34px;height:34px;border-radius:50%;border:0;background:#1f9d55;color:#fff;font-size:22px;cursor:pointer;margin-bottom:10px;box-shadow:0 2px 6px rgba(31,157,85,.35)}
.ow-paneel textarea,.ow-paneel select{width:100%;border:1px solid var(--lijn2);border-radius:6px;padding:5px 8px;font-size:13px;margin-bottom:8px}
.ow-paneel select{height:28px;padding:0 6px}
.ow-rij{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px;font-size:12px}
.ow-rij label{display:flex;align-items:center;gap:8px;flex:1}
.ow-rij input[type=range]{flex:1;accent-color:var(--accent)}
.ow-werk{position:relative;overflow:hidden;min-width:0}
.ow-werk canvas{display:block;touch-action:none}
.ow-zoom{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:3px;box-shadow:var(--schaduw)}
.ow-zoom button{border:0;background:none;min-width:28px;height:26px;border-radius:13px;font-size:15px;font-weight:600;cursor:pointer;color:var(--tekst);padding:0 8px}
.ow-zoom button:hover{background:var(--bg)}
.ow-zoom button[data-z="0"]{font-size:12px}
.ow-zoom span{min-width:46px;text-align:center;font-size:12px;font-weight:600;color:var(--zacht)}
.ow-laagbalk{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);z-index:4;white-space:nowrap;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:4px 6px;box-shadow:var(--schaduw)}
.ow-laagbalk button{border:0;background:none;width:30px;height:28px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:700}
.ow-laagbalk button:hover{background:var(--bg)}
.ow-laagbalk button.aan{background:var(--accent-l)}
.ow-laagbalk button.weg:hover{background:var(--fout-l)}
.ow-lbl{font-size:12px;font-weight:600;color:var(--zacht);padding:0 6px}
.ow-3d{background:#fff;border-left:1px solid var(--lijn);display:flex;flex-direction:column;padding:12px 14px;gap:8px;min-width:0}
.ow-3dkop{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.ow-3dkop button{border:1px solid var(--lijn2);background:#fff;border-radius:6px;width:28px;height:26px;cursor:pointer;font-size:14px;color:var(--zacht)}
.ow-3dkop button.aan{color:var(--accent);border-color:var(--accent);background:var(--accent-l)}
#ow3d{width:100%;height:auto;aspect-ratio:300/360;background:radial-gradient(circle at 50% 40%,#fff,#eef1f5 70%);border-radius:10px;cursor:grab}
#ow3d:active{cursor:grabbing}
.ow-best{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.ow-pr b{display:block;font-size:14px}.ow-pr span{font-size:12px;color:var(--zacht)}
.ow-bestel{height:38px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.ow-bestel:hover{background:var(--accent-d)}
.ow-bestel:disabled{opacity:.6}
.ow-leeg{padding:60px;text-align:center;color:var(--zacht)}
.staffeled.zones{table-layout:fixed}
.staffeled.zones th:first-child,.staffeled.zones td:first-child{width:36%}
.staffeled.zones th:last-child,.staffeled.zones td:last-child{width:32px}

/* CMYK-kiezer */
.ow-cmyk{display:flex;gap:10px;align-items:stretch}
.ow-cmyk-voorbeeld{width:34px;border-radius:7px;border:1px solid var(--lijn2);flex:none}
.ow-cmyk-rijen{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.ow-cmyk-rij{display:flex;align-items:center;gap:6px;font-size:12px}
.ow-cmyk-rij b{width:12px;text-align:center}
.ow-cmyk-rij input[type=range]{flex:1;min-width:0;height:4px;appearance:none;-webkit-appearance:none;border-radius:2px;background:linear-gradient(90deg,#fff,var(--ink));outline:none;border:1px solid var(--lijn2)}
.ow-cmyk-rij input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--navy);cursor:pointer}
.ow-cmyk-rij input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--navy);cursor:pointer}
.ow-cmyk-rij input[type=number]{width:44px;height:24px;border:1px solid var(--lijn2);border-radius:5px;padding:0 4px;font-size:12px;text-align:right}
.ow-cmyk-rij span{color:var(--zacht);font-size:11px}
.ow-cmyk-rij.c{--ink:#00a0e3}.ow-cmyk-rij.m{--ink:#e5007d}.ow-cmyk-rij.y{--ink:#ffe500}.ow-cmyk-rij.k{--ink:#1d1d1b}
.ow-cmyk.klein{margin-top:8px}
.ow-cmyk-code{font:600 11.5px/1.4 ui-monospace,Menlo,monospace;color:var(--zacht);margin-top:6px}

.ow-code{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px}
.ow-code span{color:var(--zacht);white-space:nowrap}
.ow-code input{flex:1;min-width:0;height:26px;border:1px solid var(--lijn2);border-radius:5px;padding:0 7px;font:600 12px ui-monospace,Menlo,monospace}
.ow-code input.fout{border-color:var(--fout);background:var(--fout-l)}

.ow-schakel em{font-style:normal}

/* lettertypekeuze met direct voorbeeld */
.ow-fonts{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.ow-fonts button{border:1.5px solid var(--lijn);background:#fff;border-radius:7px;padding:6px 7px 4px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:1px;min-width:0}
.ow-fonts button:hover{border-color:var(--zachter)}
.ow-fonts button.aan{border-color:var(--accent);background:var(--accent-l)}
.ow-fonts span{font-size:14px;line-height:1.25;color:var(--tekst);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-fonts small{font-size:10.5px;color:var(--zacht)}

.ow-bar-scheid{width:30px;height:1px;background:var(--lijn);margin:8px 0}
.ow-bar button:disabled{opacity:.35;cursor:not-allowed;background:none!important;color:var(--zacht)!important}

/* 3D-voorbeeld: klein in de hoek, groot bij aanwijzen */
.ow-3dmini{position:absolute;right:5px;bottom:6px;width:54px;height:74px;background:radial-gradient(circle at 50% 40%,#fff,#e9edf2 75%);border:1px solid var(--lijn);border-radius:14px;box-shadow:0 6px 20px rgba(23,39,67,.14);overflow:hidden;z-index:5;transition:width .22s ease,height .22s ease,box-shadow .22s;cursor:grab}
.ow-3dmini.groot{width:min(800px,calc(100vw - 260px));height:calc(100vh - 24px);box-shadow:0 20px 60px rgba(23,39,67,.3);z-index:7;background:radial-gradient(circle at 50% 38%,#fff,#e6eaf0 78%)}
.ow-3dmini canvas{width:100%;height:100%;display:block;object-fit:contain;touch-action:none}
.ow-3dmini:active{cursor:grabbing}
.ow-3dlabel{position:absolute;left:10px;top:8px;font:700 11px Inter,sans-serif;color:var(--zacht);letter-spacing:.06em;pointer-events:none}
.ow-3dmini #owauto{position:absolute;right:42px;top:8px;width:26px;height:24px;border:1px solid var(--lijn2);border-radius:6px;background:#fff;color:var(--zacht);cursor:pointer;font-size:13px;opacity:0;transition:opacity .15s}
.ow-3dmini.groot #owauto{opacity:1}
.ow-3dmini #owauto.aan{color:var(--accent);border-color:var(--accent);background:var(--accent-l)}
.ow-3dhint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11px;color:var(--zachter);opacity:0;transition:opacity .15s;pointer-events:none}
.ow-3dmini.groot .ow-3dhint{opacity:1}
/* bestelknop zwevend rechtsboven */
.ow-inlog{width:54px;border-radius:10px;padding:7px 0 5px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--zacht);font-size:9.5px;font-weight:600;text-decoration:none}
.ow-inlog svg{width:22px;height:22px}.ow-inlog:hover{background:var(--bg);color:var(--tekst)}
.ow-let{color:#b45309}
.ow-vr{width:30px;height:30px;border-radius:50%;flex:none;background-size:cover;background-position:center;border:1px solid var(--lijn)}
.ow-lijst .ow-vr{flex:none}
.ow-vfoto{display:flex;align-items:center;gap:8px;border:1px solid var(--lijn);border-radius:8px;padding:5px 6px;margin-bottom:6px}
.ow-vfoto img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.ow-vfoto span{flex:1;min-width:0;font-size:12px;overflow-wrap:anywhere}
.ow-vfoto button{border:0;background:none;color:var(--zacht);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
.ow-vfoto button:hover{background:var(--bg);color:var(--tekst)}
.ow-knoppen .ow-breed{grid-column:1/-1}
.ow-knoppen button.aan{border-color:var(--accent);background:var(--accent-l);color:var(--accent)}

/* ===== ontwerper: op de beker, ideeën, sjablonen, drukcheck, sfeer ===== */
.ow-werk .ow-groot{position:absolute;inset:0;width:100%;height:100%;display:none;cursor:grab;touch-action:none}
.ow-werk.w3d .ow-groot{display:block}
.ow-werk.w3d #owcanvas,.ow-werk.w3d .ow-3dmini,.ow-werk.w3d .ow-z2d{display:none}
.ow-hint3d{display:none;position:absolute;left:50%;top:12px;transform:translateX(-50%);font-size:11.5px;color:var(--zachter);white-space:nowrap;pointer-events:none}
.ow-werk.w3d .ow-hint3d{display:block}
.ow-z2d{display:flex;align-items:center;gap:2px}
.ow-weerg{display:flex;background:var(--bg);border-radius:14px;padding:2px;margin-right:4px}
.ow-weerg button{font-size:12px!important;height:24px!important;border-radius:12px!important;color:var(--zacht)!important;padding:0 12px!important}
.ow-weerg button.aan{background:#fff!important;color:var(--accent)!important;box-shadow:0 1px 3px rgba(23,39,67,.15)}
.ow-zoom .ow-sfeerknop{font-size:12px;margin-left:4px;border-left:1px solid var(--lijn)!important;border-radius:0 13px 13px 0}
.ow-tip0{margin:0 0 10px}
.ow-kl{display:flex;align-items:center;gap:6px;margin:10px 0 8px}
.ow-kl span{width:22px;height:22px;border-radius:50%;border:1px solid var(--lijn)}
.ow-kl small{font-size:11.5px;color:var(--zachter);margin-left:4px}
.ow-tegels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ow-tegels button{border:1.5px solid var(--lijn);background:linear-gradient(#fff,#f1f4f8);border-radius:10px;padding:4px 4px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.ow-tegels button:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(52,112,182,.18)}
.ow-tegels canvas{width:100%;height:auto;display:block}
.ow-tegels span{font-size:11.5px;font-weight:600;color:var(--tekst);text-align:center;line-height:1.25}
.ow-aantal{display:flex;flex-direction:column;font-size:10.5px;color:var(--zacht);font-weight:600;gap:1px}
.ow-aantal input{width:78px;height:28px;border:1px solid var(--lijn2);border-radius:6px;padding:0 6px;font:600 13px Inter,sans-serif;text-align:right}
.ow-werk .ow-pr span b{color:var(--tekst);font-size:12px}
.ow-check{height:30px;border-radius:15px;border:1px solid;padding:0 10px;font:700 12px Inter,sans-serif;cursor:pointer;white-space:nowrap;background:#fff}
.ow-check.ok{color:#15803d;border-color:#86efac;background:#f0fdf4}
.ow-check.let{color:#b45309;border-color:#fcd34d;background:#fffbeb}
.ow-check.fout{color:#b91c1c;border-color:#fca5a5;background:#fef2f2}
.ow-checklijst{position:absolute;right:calc(100% + 10px);top:10px;width:340px;background:#fff;border:1px solid var(--lijn);border-radius:10px;box-shadow:0 10px 30px rgba(23,39,67,.18);padding:10px;display:flex;flex-direction:column;gap:6px;z-index:6}
.ow-checklijst>b{font-size:13px}
.ow-checklijst button{display:flex;gap:8px;align-items:flex-start;text-align:left;border:0;background:var(--bg);border-radius:8px;padding:7px 8px;cursor:pointer;font-size:12px;line-height:1.35;color:var(--tekst)}
.ow-checklijst button:hover{background:var(--accent-l)}
.ow-checklijst button i{font-style:normal;font-weight:700;width:16px;flex:none;text-align:center}
.ow-checklijst button.c-fout i{color:#b91c1c}.ow-checklijst button.c-let i{color:#b45309}.ow-checklijst button.c-info i{color:var(--accent)}
.ow-checklijst span{overflow-wrap:anywhere}
.ow-okt{font-size:12px;color:#15803d;margin:0}
.ow-sfeer{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.ow-sfeer.verborgen{display:none}
.ow-sfeerkaart{background:#fff;border-radius:14px;padding:14px;max-width:min(1100px,96vw);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ow-sfeerkop{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ow-sfeerkop b{font-size:15px}
.ow-sfr{flex:1}
.ow-sfeerkop .ow-bestel{height:34px;padding:0 14px;font-size:13px}
.ow-sfx{border:0;background:var(--bg);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px}
.ow-sfeerkaart canvas{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 160px);aspect-ratio:16/10;border-radius:10px;margin:0 auto}
.ow-werk .ow-pr span b{display:inline}
.ow-check.leeg{color:var(--zacht);border-color:var(--lijn2);background:#fff}
.ow-werk.heeftsel .ow-hint3d{display:none}
.ow-3dmini #ow3dsluit{position:absolute;right:8px;top:8px;width:28px;height:24px;border:1px solid var(--lijn2);border-radius:6px;background:#fff;color:var(--tekst);cursor:pointer;font-size:13px;opacity:0;pointer-events:none;transition:opacity .15s}
.ow-3dmini.groot #ow3dsluit{opacity:1;pointer-events:auto}
.ow-3dmini.groot #ow3dsluit:hover{background:var(--bg)}
.ow-3dmini.groot .ow-3dlabel{font-size:12px}
.ow-3dmini #ow3d{width:100%;height:100%;max-width:none;aspect-ratio:auto}
/* ===== gereedschapsbalk rechts ===== */
.ow-rbar{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px;display:grid;grid-template-columns:1fr;gap:2px;align-content:start;border-top:1px solid var(--lijn)}
.ow-rbar.verborgen{display:none}
.ow-rbar button{min-width:0;border:0;background:none;border-radius:8px;padding:4px 1px 3px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--zacht);cursor:pointer;font-size:9.5px;font-weight:600;line-height:1.1;text-align:center;white-space:nowrap}
.ow-rbar button svg{width:17px;height:17px}
.ow-rbar button:hover:not(:disabled){background:var(--bg);color:var(--tekst)}
.ow-rbar button.aan{background:var(--accent-l);color:var(--accent)}
.ow-rbar button:disabled{opacity:.35;cursor:not-allowed}
.ow-rbar button.weg:hover:not(:disabled){background:var(--fout-l);color:#b91c1c}
.ow-rbar button.ow-rklaar{grid-column:1/-1;flex-direction:row;justify-content:center;gap:6px;background:var(--accent);color:#fff;padding:8px 0;font-size:12px}
.ow-rbar button.ow-rklaar:hover{background:var(--accent-d)!important;color:#fff!important}
.ow-rsep{grid-column:1/-1;height:1px;background:var(--lijn);margin:3px 2px}
.ow-rdpi,.ow-rlbl{grid-column:1/-1;text-align:center;font-size:11px;font-weight:700;margin-bottom:2px;padding:4px 2px;border-radius:6px}
.ow-rlbl{color:var(--zacht);background:var(--bg)}
.ow-rtitel{grid-column:1/-1;text-align:center;font-size:11px;font-weight:700;color:#e6007e;margin:2px 0}
.ow-snijhint{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:#1f2937;color:#fff;font-size:12px;padding:7px 14px;border-radius:18px;z-index:6;white-space:nowrap;box-shadow:var(--schaduw)}
.ow-snijhint.verborgen{display:none}
.ow-pipet{border:1px solid var(--lijn2);background:#fff;border-radius:6px;width:30px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--zacht);flex:none;margin-left:4px}
.ow-pipet:hover{color:var(--accent);border-color:var(--accent)}
.ow-pipet svg{width:16px;height:16px}
.ow-werk.pipet canvas{cursor:crosshair!important}
.ow-sfwrap{position:relative}
.ow-sfwrap canvas{cursor:grab;touch-action:none}
.ow-sfdraai{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border-radius:18px;padding:3px 6px;box-shadow:0 2px 10px rgba(0,0,0,.18);font-size:12px;font-weight:600;color:var(--zacht)}
.ow-sfdraai button{border:0;background:var(--bg);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:15px;color:var(--tekst)}
.ow-sfdraai button:hover{background:var(--accent-l);color:var(--accent)}

/* ===== rechterbalk: bestellen + gereedschap + 3D ===== */
.ow-rechts{background:#fff;border-left:1px solid var(--lijn);display:flex;flex-direction:column;min-height:0;position:relative;z-index:6}
.ow-rechts .ow-best{margin:0;padding:6px 4px;display:flex;flex-direction:column;gap:6px;position:relative}
.ow-rechts .ow-pr{font-size:12px}.ow-rechts .ow-pr b{display:inline;font-size:14px}.ow-rechts .ow-pr span{font-size:11.5px;color:var(--zacht)}
.ow-rechts .ow-aantal{flex-direction:row;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px}
.ow-rechts .ow-aantal input{width:74px}
.ow-prijs{font-size:12px;color:var(--zacht);line-height:1.45}
.ow-prijs b{color:var(--tekst)}
.ow-prijs .ow-tot b{font-size:15px}.ow-prijs .ow-tot span{font-size:11px;color:var(--zacht)}
.ow-prijs small{font-size:11px;color:var(--zachter)}
.ow-brij{display:flex;flex-direction:column;gap:5px}
.ow-rechts .ow-check{height:28px;border-radius:7px;padding:0 6px;width:100%}
.ow-rechts .ow-bestel{height:36px;font-size:13px;white-space:nowrap;width:100%}
.ow-3dplek{height:84px;flex:none;border-top:1px solid var(--lijn)}
.ow.w3d .ow-3dplek{display:none}
.ow-rleeg{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;color:var(--zachter);padding:24px 8px}
.ow-rleeg svg{width:26px;height:26px}
.ow-rbar .ow-rsep{margin:2px 6px}
.ow-zoom button,.ow-weerg button{white-space:nowrap}
.ow-rechts .ow-aantal input{height:28px}
.ow-bar button span,.ow-inlog span{font-size:9px}
.ow-rechts .ow-pr b{font-size:13.5px}

/* smalle rechterbalk */
.ow-bestelik{height:auto!important;padding:7px 0 5px!important;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5px!important;border-radius:9px!important;width:100%}
.ow-bestelik svg{width:20px;height:20px}
.ow-checkik{height:auto!important;padding:4px 0 3px!important;display:flex;flex-direction:column;align-items:center;gap:0;font-size:9px!important;border-radius:9px!important;width:100%;white-space:normal;line-height:1.15}
.ow-checkik b{font-size:13px}
.ow-checkik em{display:none}
.ow-rdpi{font-size:11px;line-height:1.1;padding:3px 0}
.ow-rdpi small{display:block;font-size:8.5px;font-weight:600;opacity:.8}
.ow-rbar button{padding:2px 0 1px;gap:1px}
.ow-rbar button span{font-size:9px}
.ow-rleeg{font-size:9.5px;padding:14px 2px}
.ow-3dmini:not(.groot) .ow-3dlabel{top:3px;left:5px;font-size:8.5px}
.ow-3dmini:not(.groot){border-radius:9px}
body.ow-modus #toasts{right:76px}
/* bestelpagina vanuit de ontwerper: samenvatting */
.owterug{margin-left:auto}
.owsamen{display:flex;gap:16px;align-items:flex-start;margin:4px 0 12px}
.owsamen-beeld{width:170px;flex:none;background:radial-gradient(circle at 50% 40%,#fff,#eef1f5 75%);border:1px solid var(--lijn);border-radius:12px;padding:6px}
.owsamen-beeld img,.owsamen-beeld svg{width:100%;height:auto;display:block}
.owsamen-tekst{flex:1;min-width:0;font-size:13px}
.owsamen-tekst b{font-size:15px}
.owsamen-lijst,.owsamen-best{margin:6px 0 0;padding-left:16px;color:var(--zacht);font-size:12.5px;line-height:1.5}
.owsamen-best li{overflow-wrap:anywhere}
.owsamen-kop{margin-top:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--zachter)}
.voorbeeld img.vb3d{width:100%;height:100%;object-fit:contain}
/* ===== winkelmand ===== */
nav.hoofd a.mandknop{display:inline-flex;align-items:center;gap:5px;margin-left:8px;border:1px solid var(--lijn2);color:var(--tekst)}
nav.hoofd a.mandknop svg{width:18px;height:18px}
nav.hoofd a.mandknop span{background:var(--accent);color:#fff;border-radius:10px;font-size:11px;font-weight:700;padding:0 6px;line-height:18px}
nav.hoofd a.mandknop.verborgen{display:none}
.mandnieuw{margin-left:auto}
.manditem{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--lijn)}
.manditem:first-child{border-top:0;padding-top:4px}
.mand3d{width:150px;flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;background:radial-gradient(circle at 50% 40%,#fff,#eef1f5 75%);border:1px solid var(--lijn);border-radius:12px;padding:4px}
.mand3d canvas{width:100%;height:auto;cursor:grab;touch-action:none}
.mand3d span{font-size:10px;color:var(--zachter)}
.mandinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mandkop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mandkop b{font-size:15px}
.mandopt{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-l);border-radius:10px;padding:1px 8px}
.mandrij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.mandrij label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.mandrij input{width:90px;height:30px;border:1px solid var(--lijn2);border-radius:6px;padding:0 8px;font:600 13px Inter,sans-serif;text-align:right}
.mandrij small{font-size:11px;color:var(--zachter)}
.mandprijs{margin-left:auto;text-align:right;display:flex;flex-direction:column}
.mandprijs b{font-size:16px}
.mandknoppen{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.gevaartekst{color:var(--fout)!important}
.mandleeg svg{width:40px;height:40px;color:var(--zachter);display:block;margin:0 auto 6px}
.ow-mandlink{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0 3px;border-radius:9px;color:var(--tekst);text-decoration:none;font-size:9px;font-weight:700;position:relative;background:var(--bg)}
.ow-mandlink svg{width:18px;height:18px}
.ow-mandlink i{position:absolute;top:2px;right:8px;background:var(--accent);color:#fff;font-style:normal;font-size:9px;border-radius:8px;padding:0 4px;line-height:14px}
nav.hoofd a.mandknop svg{display:block;flex:none;min-width:18px}
nav.hoofd a.mandknop.actief{color:#fff;border-color:var(--navy)}
.ow-rij>span{white-space:nowrap;font-size:11.5px;flex:none}
.ow-rij label{min-width:0}
.ow-rij label input[type=range]{min-width:0;width:100%}
.ow-code input{min-width:0}
.ow-cmyk-rij input[type=number]{width:42px}
.ow-witknop{width:100%;border:1px solid var(--lijn2);background:#fff;border-radius:9px;padding:4px 0 3px;display:flex;flex-direction:column;align-items:center;gap:1px;font:700 9px Inter,sans-serif;color:var(--zacht);cursor:pointer;margin-top:5px}
.ow-witknop svg{width:18px;height:18px}
.ow-witknop.aan{color:var(--tekst);border-color:var(--tekst);background:var(--bg)}
/* lettertype-pulldown */
.ow-fkeus{position:relative;margin-bottom:8px}
.ow-fknop{width:100%;height:36px;display:flex;align-items:center;gap:6px;padding:0 9px;border:1.5px solid var(--lijn);border-radius:8px;background:#fff;cursor:pointer;color:var(--tekst)}
.ow-fknop:hover,.ow-fknop.open{border-color:var(--accent)}
.ow-fknop span{flex:1;min-width:0;text-align:left;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-fknop svg{flex:none;transition:transform .15s}.ow-fknop.open svg{transform:rotate(180deg)}
.ow-fmenu{position:absolute;left:0;right:0;top:40px;z-index:30;background:#fff;border:1px solid var(--lijn);border-radius:9px;box-shadow:0 10px 28px rgba(23,39,67,.18);padding:7px}
.ow-fmenu input{width:100%;height:30px;border:1.5px solid var(--lijn);border-radius:7px;padding:0 8px;font-size:13px;box-sizing:border-box}
.ow-fmenu input:focus{outline:none;border-color:var(--accent)}
.ow-fcat{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0}
.ow-fcat button{border:1px solid var(--lijn);background:#fff;border-radius:20px;font-size:10.5px;padding:2px 7px;cursor:pointer;color:var(--zacht);white-space:nowrap}
.ow-fcat button.aan{background:var(--accent);border-color:var(--accent);color:#fff}
.ow-flijst{max-height:290px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;margin:0 -3px;padding:0 3px}
.ow-flijst button{border:0;background:none;text-align:left;padding:6px 8px;border-radius:6px;cursor:pointer;min-width:0}
.ow-flijst button span{display:block;font-size:17px;line-height:1.25;color:var(--tekst);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-flijst button:hover{background:var(--accent-l)}
.ow-flijst button.aan{background:var(--accent-l);box-shadow:inset 3px 0 0 var(--accent)}
/* transparant (uitgespaard) */
.ow-transknop{display:flex;align-items:center;gap:7px;height:28px;padding:0 9px 0 4px;margin:2px 0 8px;border:1.5px solid var(--lijn);border-radius:7px;background:#fff;cursor:pointer;font-size:12px;color:var(--tekst)}
.ow-transknop i{width:20px;height:20px;border-radius:4px;border:1px solid #c4cbd5;background:repeating-conic-gradient(#e3e7ed 0 25%,#fff 0 50%) 0 0/10px 10px}
.ow-transknop.aan{border-color:var(--accent);background:var(--accent-l)}
/* tekst direct bewerken */
.ow-inline{position:absolute;z-index:6;resize:none;overflow:hidden;text-align:center;background:rgba(255,255,255,.9);border:1.5px dashed var(--accent);border-radius:4px;padding:4px 6px;box-sizing:border-box;outline:none;white-space:pre;box-shadow:0 4px 14px rgba(23,39,67,.15)}
.ow-cmyk-rij input[type=number]{width:40px;padding:0 4px;-moz-appearance:textfield;appearance:textfield}
.ow-cmyk-rij input[type=number]::-webkit-inner-spin-button,.ow-cmyk-rij input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* met/zonder wit: mini-voorbeeld */
.ow-witvb{position:relative;width:26px;height:18px;border-radius:4px;border:1px solid #c4cbd5;overflow:hidden;background:repeating-conic-gradient(#d5dae2 0 25%,#fff 0 50%) 0 0/8px 8px;display:block}
.ow-witvb b{position:absolute;inset:3px 5px;border-radius:50%;background:#e6007e;opacity:.45;mix-blend-mode:multiply}
.ow-witknop.aan .ow-witvb b{opacity:1;mix-blend-mode:normal;box-shadow:0 0 0 2px #fff}
/* rechterbalk: altijd zonder scrollen */
.ow-rbar{overflow:hidden}
.ow-rbar.k1{gap:0;padding:2px 4px}
.ow-rbar.k1 button{padding:1px 0}.ow-rbar.k1 button svg{width:15px;height:15px}.ow-rbar.k1 button span{font-size:8.5px}
.ow-rbar.k1 .ow-rsep{margin:1px 6px}.ow-rbar.k1 .ow-rdpi,.ow-rbar.k1 .ow-rlbl{padding:2px 0;margin-bottom:1px}
/* rechterbalk: iconen als echte knoppen */
.ow-rbar{gap:3px;padding:5px 5px}
.ow-rbar button{background:#f5f7fa;border:1px solid var(--lijn);border-radius:8px;padding:5px 0 4px;color:var(--tekst);box-shadow:0 1px 0 rgba(23,39,67,.04)}
.ow-rbar button:hover:not(:disabled){background:#fff;border-color:var(--accent);color:var(--accent)}
.ow-rbar button:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.ow-rbar button.aan{background:var(--accent-l);border-color:var(--accent);color:var(--accent)}
.ow-rbar button.weg{color:#b91c1c}
.ow-rbar button.weg:hover:not(:disabled){border-color:#e5a3a3}
.ow-rbar button:disabled{opacity:.4}
.ow-rbar .ow-rsep{margin:3px 4px}
.ow-rbar.k1{gap:2px;padding:3px 5px}.ow-rbar.k1 button{padding:2px 0}.ow-rbar.k1 .ow-rsep{margin:1px 4px}
/* meldingen in de ontwerper: bovenin het midden */
body.ow-modus #toasts{top:14px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);align-items:center}
body.ow-modus .toast{text-align:center}
/* rechterbalk te laag: twee kolommen met tekst, balk iets breder */
.ow.rbreed{grid-template-columns:60px 216px minmax(0,1fr) 116px}
.ow.dicht.rbreed{grid-template-columns:60px 0 minmax(0,1fr) 116px}
.ow-rbar.k2{grid-template-columns:1fr 1fr;gap:3px}
.ow-rbar.k2 button{padding:4px 0 3px}.ow-rbar.k2 button span{font-size:8.5px}
.ow-rbar.k3 button{padding:1px 0}.ow-rbar.k3 button svg{width:14px;height:14px}.ow-rbar.k3 button span{font-size:8px}
/* bredere rechterbalk: 3D-voorbeeld vult de breedte */
.ow.minibreed .ow-3dplek{height:var(--plek,84px)}
.ow.minibreed .ow-3dmini:not(.groot){width:calc(100% - 10px);height:calc(var(--plek,84px) - 12px)}
.ow-bestelik{font-size:9px!important;letter-spacing:-.15px;white-space:nowrap}
/* afbeelding in het werkvlak slepen */
.ow-werk.sleepin::after{content:'Laat los om je afbeelding toe te voegen';position:absolute;inset:10px;border:2.5px dashed var(--accent);border-radius:14px;background:rgba(232,240,250,.82);display:flex;align-items:center;justify-content:center;font:600 17px Inter,sans-serif;color:var(--accent);z-index:20;pointer-events:none}
/* optie onderaan de rechterbalk: rond houden */
.ow-ropt{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px 4px;border:1px dashed var(--lijn2);border-radius:8px;background:#fafbfc;cursor:pointer;text-align:center;line-height:1.15}
.ow-ropt input{margin:0;width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
.ow-ropt b{display:block;font-size:9px;color:var(--tekst)}
.ow-ropt small{display:block;font-size:8px;color:var(--zacht);margin-top:1px}
.ow-ropt.aan{border-style:solid;border-color:var(--accent);background:var(--accent-l)}
.ow-ropt.uit{opacity:.45;cursor:not-allowed}
.ow-rbar.k2 .ow-ropt{flex-direction:row;justify-content:center;gap:5px;text-align:left}
/* vaste rode uitleg bij 'rond houden' */
.ow-kegelmelding{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);width:min(640px,calc(100% - 40px));box-sizing:border-box;background:#fef2f2;border:1.5px solid #dc2626;color:#991b1b;font-size:12.5px;line-height:1.4;padding:9px 14px;border-radius:10px;z-index:6;box-shadow:0 4px 14px rgba(185,28,28,.15);pointer-events:none}
.ow-kegelmelding b{color:#b91c1c}
.ow-kegelmelding.verborgen{display:none}
.ow-werk.w3d .ow-kegelmelding{bottom:70px}
/* 3D opslaan als afbeelding */
.ow-3dmini #ow3dsave{position:absolute;right:76px;top:8px;height:24px;padding:0 9px;display:flex;align-items:center;gap:5px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;font:600 12px Inter,sans-serif;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
.ow-3dmini.groot #ow3dsave{opacity:1;pointer-events:auto}
.ow-3dmini #ow3dsave:hover{background:var(--accent-d)}
.ow-3dmini #ow3dsave:disabled{opacity:.6}
/* orders: lijst boven, details onder (versleepbare deling) */
.split.vert{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--boven,50%) 12px minmax(0,1fr);gap:0;height:calc(100vh - var(--kop) - 112px);align-items:stretch}
.split.vert>.paneel{min-height:0;overflow:auto}
.split.vert>.paneel.boven{display:flex;flex-direction:column}
.split.vert>.paneel.boven #lijst{flex:1;min-height:0;overflow:auto}
.split.vert>.paneel.onder>.kaart{min-height:100%;box-sizing:border-box}
.sleepdeling{cursor:row-resize;position:relative;touch-action:none}
.sleepdeling::after{content:'';position:absolute;left:50%;top:50%;width:54px;height:4px;margin:-2px 0 0 -27px;border-radius:3px;background:var(--lijn2)}
.sleepdeling:hover::after{background:var(--accent)}
.split.vert #detail .kb{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start}
.split.vert #detail .kb>.dkop{grid-column:1/-1}
.split.vert #detail .kb>.ovb{grid-row:2/span 2}
.split.vert #detail .kb>.sectie{border-top:0;padding-top:4px}
.ovb{display:flex;flex-direction:column;gap:10px}
.ovb figure{margin:0;background:#f6f8fb;border:1px solid var(--lijn);border-radius:10px;padding:8px;text-align:center}
.ovb img{max-width:100%;max-height:260px;display:block;margin:0 auto;object-fit:contain}
.ovb img:not([src]){height:120px}
.ovb figcaption{font-size:11px;color:var(--zacht);margin-top:4px}
/* winkelmand: 3D vult het hele vak */
.mand3d{width:190px;padding:6px 6px 4px;align-self:stretch;min-height:220px}
.mand3d canvas{flex:1;min-height:0;width:100%;height:100%;object-fit:contain}
/* ================= creatief: hero, laag voor laag, inspiratie, proefpakket ================= */
.intro .in{padding-top:30px;padding-bottom:30px}
.intro-tekst{max-width:640px}
.czhero-wrap{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(440px,38vw)}
.czhero{position:relative;flex:none;width:100%;height:min(470px,41vw);outline:none;border-radius:28px;background:radial-gradient(circle at 50% 42%,#ffffff 0%,#f1f4f8 55%,#e3e8ef 100%);box-shadow:inset 0 0 0 1px var(--lijn)}
.czhero:before{content:"";position:absolute;inset:-14px;border-radius:36px;z-index:-1;background:conic-gradient(from 200deg,#00a0e3,#e5007d,#ffe500,#231f20,#00a0e3);opacity:.18;filter:blur(18px)}
.czhero-c{display:block;width:100%;height:100%}
.czhero-label{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:5px 12px 5px 9px;font:600 12.5px Inter,sans-serif;color:var(--tekst);white-space:nowrap;box-shadow:0 4px 14px rgba(23,39,67,.08)}
.czhero-label span{width:8px;height:8px;border-radius:50%}.czhero-label span:nth-child(4){margin-right:5px}
.czhero-label .c{background:#00a0e3}.czhero-label .m{background:#e5007d}.czhero-label .y{background:#ffe500}.czhero-label .k{background:#231f20}
.czhero-mini{margin-top:14px;font-size:13.5px}.czhero-mini a{color:var(--accent);font-weight:600;text-decoration:none}.czhero-mini a:hover{text-decoration:underline}
/* laag voor laag */
.czlagen{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:34px 36px;min-height:520px}
.czl-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:44px;align-items:center}
.czl-tekst .label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);margin-bottom:10px}
.czl-tekst .label i{width:9px;height:9px;border-radius:50%}.czl-tekst .label i.c{background:#00a0e3}.czl-tekst .label i.m{background:#e5007d}.czl-tekst .label i.y{background:#ffe500}.czl-tekst .label i.k{background:#231f20;margin-right:5px}
.czl-tekst h2{font-size:30px;margin-bottom:8px}
.czl-stappen{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:6px}
.czl-stap{display:flex;gap:12px;align-items:flex-start;padding:9px 12px;border-radius:12px;opacity:.45;transition:opacity .25s,background .25s}
.czl-stap.klaar{opacity:.8}.czl-stap.aan{opacity:1;background:var(--bg)}
.czl-stap b{display:block;font-size:14.5px}.czl-stap small{color:var(--zacht);font-size:12.5px;line-height:1.35}
.czl-bol{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px Inter,sans-serif;color:#fff;background:#231f20}
.czl-stap.w .czl-bol{background:#fff;color:var(--tekst);border:1.5px solid var(--lijn2)}.czl-stap.c .czl-bol{background:#00a0e3}.czl-stap.m .czl-bol{background:#e5007d}.czl-stap.y .czl-bol{background:#ffe500;color:#231f20}
.czl-beeld{position:relative}
.czl-stapel{position:relative;aspect-ratio:221.5/105;border-radius:14px;overflow:hidden;background:repeating-conic-gradient(#e6eaf0 0 25%,#fff 0 50%) 0 0/18px 18px;box-shadow:0 18px 40px rgba(23,39,67,.14),inset 0 0 0 1px var(--lijn)}
.czl-wit{position:absolute;inset:0;background:#fff;opacity:0}
.czl-laag{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;opacity:0;transition:opacity .15s linear}
.czl-onder{text-align:center;font-size:12px;color:var(--zacht);margin-top:10px}
/* inspiratie */
.paginatitel{margin-bottom:18px}.paginatitel h1{font-size:34px;margin:6px 0}
.paginatitel .label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.paginatitel .label i{width:9px;height:9px;border-radius:50%}.paginatitel .label i.c{background:#00a0e3}.paginatitel .label i.m{background:#e5007d}.paginatitel .label i.y{background:#ffe500}.paginatitel .label i.k{background:#231f20;margin-right:5px}
.czfilter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.czfilter button{border:1px solid var(--lijn2);background:#fff;border-radius:20px;padding:7px 15px;font:600 13px Inter,sans-serif;color:var(--zacht);cursor:pointer}
.czfilter button.aan{background:var(--navy);border-color:var(--navy);color:#fff}
.czraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.czraster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.czkaart{background:#fff;border:1px solid var(--lijn);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.czkaart:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(23,39,67,.12)}
.czkaart[hidden]{display:none}
.czkaart-beeld{aspect-ratio:300/330;background:radial-gradient(circle at 50% 40%,#fff,#eef1f5 75%);display:flex;align-items:center;justify-content:center}
.czkaart-beeld img{width:100%;height:100%;object-fit:contain}
.czkaart-beeld img:not([src]){visibility:hidden}
.czkaart-inh{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.czkaart-cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.czkaart-inh b{font-size:15px;margin-bottom:6px}
/* proefpakket */
.czproefband{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 34px;border-radius:20px;color:#fff;background:linear-gradient(120deg,var(--navy) 0%,#24365a 55%,#3a2a5a 100%);position:relative;overflow:hidden}
.czproefband:after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:conic-gradient(#00a0e3,#e5007d,#ffe500,#00a0e3);opacity:.25;filter:blur(30px)}
.czproefband h2{color:#fff;margin-bottom:6px}.czproefband p{color:rgba(255,255,255,.82);max-width:640px}
.czproefband .btn{position:relative;z-index:1;flex:none}
.czproef{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:44px;align-items:start}
.czproef-tekst h1{font-size:36px;margin:8px 0 12px}
.czproef-tekst .label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.czproef-tekst .label i{width:9px;height:9px;border-radius:50%}.czproef-tekst .label i.c{background:#00a0e3}.czproef-tekst .label i.m{background:#e5007d}.czproef-tekst .label i.y{background:#ffe500}.czproef-tekst .label i.k{background:#231f20;margin-right:5px}
.czvinken{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px}
.czvinken li{padding-left:28px;position:relative}.czvinken li:before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--accent-l);color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.czproef-form h2{margin-bottom:12px}.czproef-form textarea{min-height:80px}
.czbedankt{text-align:center;padding:30px 20px}.czbedankt-ic{width:54px;height:54px;border-radius:50%;background:var(--ok-l);color:var(--ok);font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.czbedankt p{margin:8px 0 16px}
/* ontwerper sluiten (rechtsboven) */
.ow-sluit{position:absolute;top:10px;right:12px;z-index:8;width:36px;height:36px;border-radius:50%;border:1px solid var(--lijn2);background:#fff;color:var(--tekst);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(23,39,67,.1)}
.ow-sluit:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* bestellen: twee routes */
.tweeweg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.tw-optie{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--lijn);border-radius:12px;background:#fff;color:inherit;text-decoration:none;min-width:0}
.tw-optie svg{width:26px;height:26px;flex:none}
.tw-optie div{display:flex;flex-direction:column;gap:2px;min-width:0}.tw-optie b{font-size:14.5px}.tw-optie span{font-size:12.5px;color:var(--zacht);line-height:1.35}
.tw-optie.aan{border-color:#00a0e3;box-shadow:inset 3px 0 0 #00a0e3}
a.tw-optie:hover{border-color:#00a0e3;background:#f7fbfe}.tw-optie i{margin-left:auto;font-style:normal;font-size:18px;color:#00a0e3}
@media(max-width:760px){.tweeweg{grid-template-columns:1fr}}
.bestel .voorbeeld{width:120px}.bestel .voorbeeld svg{width:110px;height:136px}

/* hero: pijlen en ontwerpstrip */
.czhero-pijl{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--lijn);background:rgba(255,255,255,.92);color:var(--tekst);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(23,39,67,.10);transition:transform .15s,background .15s;z-index:2}
.czhero-pijl svg{width:20px;height:20px}.czhero-pijl.l{left:12px}.czhero-pijl.r{right:12px}
.czhero-pijl:hover{background:#fff;transform:translateY(-50%) scale(1.08);color:#00a0e3}
.czhero:focus-visible{box-shadow:inset 0 0 0 2px #00a0e3}
.czhero-label{pointer-events:auto}
.czhero-maak{margin-left:8px;border:0;background:#00a0e3;color:#fff;font:600 11.5px Inter,sans-serif;border-radius:12px;padding:3px 9px;cursor:pointer}.czhero-maak:hover{background:#0088c2}
.czhero-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;width:100%}
.czhero-strip button{border:1px solid var(--lijn);background:#fff;border-radius:10px;padding:5px 6px 4px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.czhero-strip button:hover{transform:translateY(-2px);border-color:#9fd6ef}
.czhero-strip button.aan{border-color:#00a0e3;box-shadow:0 0 0 2px rgba(0,160,227,.25)}
.czhero-strip canvas{display:block;width:100%;aspect-ratio:96/112;clip-path:polygon(4% 0,96% 0,82% 100%,18% 100%);background:#eef1f5}

/* spoedlevering */
.spoedvak{border:1px solid var(--lijn);border-radius:12px;padding:10px 12px;margin:12px 0 4px;background:#fff}
.spoedvak.aan{border-color:#e5007d;background:#fff6fb}
.spoedkeuze{display:flex;align-items:center;gap:10px;cursor:pointer}
.spoedkeuze input{width:18px;height:18px;accent-color:#e5007d;flex:none}
.sp-ic{width:30px;height:30px;border-radius:8px;background:#fde3f1;color:#e5007d;display:flex;align-items:center;justify-content:center;flex:none}.sp-ic svg{width:18px;height:18px}
.sp-t{display:flex;flex-direction:column;min-width:0}.sp-t b{font-size:14px}.sp-t small{font-size:12px;color:var(--zacht)}
.spoedinfo{margin-top:10px;padding-top:10px;border-top:1px dashed #f3b6d6;font-size:12.5px;color:var(--zacht)}
.spoedinfo label{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--tekst)}.spoedinfo input{max-width:170px}
.spoedinfo p{margin:8px 0 0;line-height:1.4}
.prijsblok.spoed{background:linear-gradient(135deg,#7a0045,#b0006a)}
.spoedmelding{background:#fff6fb;border:1px solid #f3b6d6;border-radius:10px;padding:10px 14px;color:#7a0045;font-size:14px}
.spoedlabel{display:inline-block;background:#e5007d;color:#fff;font:700 10px Inter,sans-serif;letter-spacing:.04em;border-radius:5px;padding:2px 5px;vertical-align:middle}
.spoedlabel.groot{font-size:12px;padding:3px 8px;margin-left:6px}

/* prijscategorieën: keuze in de winkelmand */
.levvak{margin:12px 0 4px}
.levkop{font-size:12px;font-weight:700;color:var(--zacht);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.levopties{display:grid;gap:8px}.levopties.n3{grid-template-columns:repeat(3,1fr)}.levopties.n2{grid-template-columns:repeat(2,1fr)}
.levoptie{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:8px;align-items:center;text-align:left;border:1px solid var(--lijn);background:#fff;border-radius:12px;padding:9px 11px;cursor:pointer;min-width:0;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.levoptie svg{width:20px;height:20px;grid-row:1;color:var(--zachter)}
.levoptie b{font-size:14px;min-width:0}.levoptie .lv-p{grid-column:1/3;font-weight:700;font-size:15px;margin-top:3px}.levoptie small{grid-column:1/3;font-size:11.5px;color:var(--zacht);line-height:1.3;overflow-wrap:anywhere}
.levoptie:hover{border-color:#9fd6ef}
.levoptie.aan{border-color:#00a0e3;box-shadow:0 0 0 2px rgba(0,160,227,.22)}.levoptie.aan svg{color:#00a0e3}
.levoptie.spoed.aan{border-color:#e5007d;box-shadow:0 0 0 2px rgba(229,0,125,.2)}.levoptie.spoed.aan svg{color:#e5007d}
.levoptie.budget.aan{border-color:#1f9d55;box-shadow:0 0 0 2px rgba(31,157,85,.2)}.levoptie.budget.aan svg{color:#1f9d55}
.levvak .spoedinfo{background:#fff6fb;border:1px solid #f3b6d6;border-radius:10px;padding:10px 12px;margin-top:8px}
.spoedlabel.budget{background:#1f9d55}
/* beheer: staffels per categorie onder elkaar */
.staffelduo{grid-template-columns:1fr!important}
.staffeled.niv{table-layout:fixed}.staffeled.niv th:last-child,.staffeled.niv td:last-child{width:34px}
.staffeled.niv th.nb{color:#1f9d55}.staffeled.niv th.ns{color:#e5007d}

.levopties.n4{grid-template-columns:repeat(2,1fr)}
.levoptie.superspoed.aan{border-color:#7b2ff7;box-shadow:0 0 0 2px rgba(123,47,247,.2)}.levoptie.superspoed.aan svg{color:#7b2ff7}
.spoedinfo .ss-tekst{display:block;color:#5b1fb8;margin-bottom:6px}.spoedinfo .ss-tekst:empty{display:none}.spoedinfo.super .sp-datum{display:none}
.spoedinfo.super{background:#f6f1ff;border-color:#d4c2fb}
.spoedlabel.superspoed{background:#7b2ff7}
.staffeled.niv th{white-space:nowrap}.staffeled.niv th.nss{color:#7b2ff7}

/* =====================================================================
   MOBIEL (telefoon en kleine tablet) · website en winkelmand
   ===================================================================== */
@media (max-width:820px){
  body{min-width:0;font-size:15px}
  main{padding:14px 16px 32px}
  /* kop met menuknop */
  header.top .bar{height:60px;padding:0 12px 0 16px;gap:10px}
  .logo{height:38px}
  .menuknop{display:flex;margin-left:auto;width:42px;height:42px;border:1px solid var(--lijn2);border-radius:10px;background:#fff;align-items:center;justify-content:center;color:var(--tekst);cursor:pointer}
  .menuknop svg{width:22px;height:22px}
  nav.hoofd{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;border-bottom:1px solid var(--lijn);box-shadow:0 12px 24px rgba(23,39,67,.12);flex-direction:column;align-items:stretch;padding:8px 12px 12px;gap:2px;margin:0}
  header.top.menuopen nav.hoofd{display:flex}
  nav.hoofd a,nav.hoofd button{padding:12px 14px;font-size:15px}
  nav.hoofd a.inlogknop,nav.hoofd a.mandknop{margin:6px 0 0;justify-content:center}
  /* algemeen: alles onder elkaar */
  .split,.split.contactgrid{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  .kaarten3,.stappen4{grid-template-columns:minmax(0,1fr)}
  .prodraster,.uspband,.scenario4,.scenario4.acht,.czraster,.czraster.vier{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .blok{margin:22px 0}
  .blokkop{flex-wrap:wrap;gap:4px 12px}
  .blokkop h2,.blok>h2{font-size:19px}
  .ctaband{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 18px 18px 22px}
  .ctaband .btn{margin-left:0;width:100%;justify-content:center}
  .paginakop{flex-wrap:wrap}
  h1{font-size:23px}
  footer.voet .in{padding:12px 16px;flex-direction:column;align-items:flex-start;gap:4px}
  footer.voet .in span+span:not(.rechts):before{display:none}
  footer.voet .rechts{margin-left:0}
  /* homepage */
  .intro .in{flex-direction:column;align-items:stretch;padding:20px 16px 24px;gap:22px}
  .intro h1{font-size:29px}
  .intro p{font-size:15px}
  .intro .knoppen{flex-wrap:wrap}.intro .knoppen .btn{flex:1;justify-content:center}
  .czhero-wrap{width:100%}
  .czhero{height:min(420px,105vw)}
  .czhero-pijl{width:44px;height:44px}
  .czhero-label{max-width:calc(100% - 24px);white-space:normal;flex-wrap:wrap;justify-content:center;row-gap:6px}
  .czhero-strip{gap:6px}.czhero-strip button{padding:4px 3px 3px;border-radius:8px}
  .czlagen{padding:20px 16px;min-height:0}
  .czl-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .czl-tekst h2{font-size:23px}
  .czfilter{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 14px;padding:0 16px 4px;scrollbar-width:none}
  .czfilter button{flex:none}
  .czkaart-inh .btn{width:100%;justify-content:center}
  /* winkelmand en afrekenen */
  .manditem{flex-direction:column}
  .mand3d{width:100%;min-height:0;height:260px}
  .mandrij{flex-wrap:wrap}
  .mandknoppen{flex-wrap:wrap}
  .levopties.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .levoptie small{font-size:11px}
  .prijsblok.mini{flex-wrap:wrap}
  .succes .kb{padding:28px 18px}
  .veld input,.veld select,.veld textarea,.inv{font-size:16px} /* geen automatische zoom op iPhone */
  .stappen4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cmykuitleg,.tekstblok{padding:18px 16px}
  .cmykuitleg{grid-template-columns:minmax(0,1fr)}
  .cmykuitleg .rozet{display:none}
  .inktrij span{height:48px;font-size:20px;min-width:0}
  .feiten{grid-template-columns:minmax(0,1fr)}
  .feit>div{min-width:0}
  .rozet{display:none}
  .twee,.rij{grid-template-columns:minmax(0,1fr)!important}
  .cmykuitleg dl{grid-template-columns:auto minmax(0,1fr)}
  .cmykuitleg dd,.contactinfo a,.contactinfo div{min-width:0;overflow-wrap:anywhere}
}

/* =====================================================================
   MOBIEL · ontwerper: werkvlak boven, gereedschap en bestellen onder, paneel als schuifblad
   ===================================================================== */
@media (max-width:820px){
  body.ow-modus{overflow:hidden}
  .ow,.ow.dicht,.ow.rbreed,.ow.dicht.rbreed,.ow.minibreed{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto 58px 58px;height:100vh;height:100dvh}
  .ow-werk{grid-row:1;grid-column:1}
  /* onderbalk met tabbladen */
  .ow-bar{grid-row:4;grid-column:1;flex-direction:row;justify-content:space-around;align-items:center;padding:0 2px;border-right:0;border-top:1px solid var(--lijn);gap:0;padding-bottom:env(safe-area-inset-bottom)}
  .ow-bar .ow-c,.ow-bar .ow-inlog,.ow-bar .ow-bar-scheid{display:none}
  .ow-bar-onder{margin:0;flex-direction:row;gap:0;display:contents}
  .ow-bar button{width:auto;flex:1;min-width:0;padding:6px 0 4px;font-size:10px}
  .ow-bar button span{font-size:10px}
  .ow-bar button[data-actie="leeg"]{display:none}
  /* paneel als schuifblad boven de onderbalk */
  /* paneel schuift tussen ontwerp en gereedschap: het werkvlak wordt kleiner, je ontwerp blijft altijd helemaal in beeld */
  .ow-paneel{grid-row:2;grid-column:1;position:relative;max-height:44vh;max-height:44dvh;z-index:3;border-right:0;border-top:1px solid var(--lijn);border-radius:16px 16px 0 0;box-shadow:0 -10px 24px rgba(23,39,67,.12);padding:16px 14px 16px}
  .ow-paneel:before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--lijn2)}
  .ow.dicht .ow-paneel{display:none}
  .ow-paneel .ow-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ow-paneel input,.ow-paneel select,.ow-paneel textarea{font-size:16px}
  /* rechterbalk wordt een strook: gereedschap (scrollt) + bestellen */
  .ow-rechts{grid-row:3;grid-column:1;flex-direction:row;align-items:stretch;border-left:0;border-top:1px solid var(--lijn);height:58px}
  .ow-rechts .ow-rbar,.ow-rbar.k1,.ow-rbar.k2,.ow-rbar.k3{order:1;flex:1;min-width:0;display:flex!important;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-top:0;padding:4px;gap:2px;align-items:stretch;scrollbar-width:none}
  .ow-rbar::-webkit-scrollbar{display:none}
  .ow-rbar>*{flex:none}
  .ow-rbar button{width:58px;padding:4px 0 2px!important}
  .ow-rbar button svg{width:20px;height:20px}
  .ow-rbar button span{font-size:9.5px!important}
  .ow-rbar .ow-rsep{width:1px;height:auto;margin:6px 2px}
  .ow-rbar .ow-rtitel,.ow-rbar .ow-rlbl,.ow-rbar .ow-rdpi{align-self:center;margin:0 4px;white-space:nowrap}
  .ow-rbar button.ow-rklaar{width:auto;padding:0 14px!important}
  .ow-rleeg{flex-direction:row;padding:0 10px;font-size:12px;gap:8px;text-align:left}
  .ow-rleeg svg{width:18px;height:18px;flex:none}
  .ow-rechts .ow-best{order:2;flex:none;width:auto;flex-direction:row;align-items:center;padding:6px 8px;border-left:1px solid var(--lijn);gap:6px}
  /* bestelknoppen op telefoon: alleen iconen */
  .ow-bestelik{flex-direction:row!important;padding:0!important;height:44px!important;width:52px!important;justify-content:center;border-radius:12px!important}
  .ow-bestelik svg{width:24px;height:24px}
  .ow-bestelik span{display:none}
  .ow-mandlink{width:44px;height:44px;padding:0;justify-content:center}.ow-mandlink span{display:none}.ow-mandlink svg{width:22px;height:22px}.ow-mandlink i{top:1px;right:1px}
  .ow-rechts .ow-check,.ow-checkik{width:40px!important;height:40px!important;border-radius:50%!important;padding:0!important;display:flex;align-items:center;justify-content:center;position:relative;flex:none}
  .ow-checkik span{display:none}
  .ow-checkik b{font-size:18px!important;line-height:1}
  .ow-checkik em{display:block;position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:currentColor;font-style:normal;font-size:10px;line-height:17px;text-align:center;padding:0 4px}
  .ow-checkik em{color:#fff;background:#b45309}.ow-check.fout em{background:#b91c1c}
  .ow-checklijst{position:fixed;left:10px;right:10px;top:auto;bottom:calc(124px + env(safe-area-inset-bottom));width:auto;max-height:50vh;max-height:50dvh;overflow:auto}
  .ow-rleeg{font-size:11px!important;line-height:1.25;white-space:normal}
  .ow-mandlink{flex-direction:row}
  .ow-3dplek{position:fixed;left:10px;top:10px;width:84px;height:104px;border:0;z-index:7}
  .ow-3dmini{width:84px;height:104px;left:0;top:0;right:auto;bottom:auto}
  .ow-3dmini.groot{position:fixed;left:8px;top:8px;width:calc(100vw - 16px);height:calc(100vh - 140px);height:calc(100dvh - 140px)}
  .ow:not(.dicht) .ow-3dplek{display:none} /* paneel open: kleine 3D weg, zodat je ontwerp vrij in beeld staat */
  .ow-3dplek,.ow-3dmini{width:70px;height:88px}
  /* zoom-/weergavebalk */
  .ow-zoom{bottom:10px;max-width:calc(100vw - 20px);flex-wrap:nowrap}
  .ow-z2d [data-z="0"]{display:none}
  .ow-zoom .ow-sfeerknop{font-size:0!important;padding:0 10px}.ow-zoom .ow-sfeerknop:first-letter{font-size:15px}
  .ow-hint3d{display:none!important}
  .ow-sluit{top:10px;right:10px;width:40px;height:40px}
  .ow-kegelmelding,.ow-snijhint{max-width:calc(100vw - 24px);white-space:normal;text-align:center}
  body.ow-modus #toasts{top:60px;left:12px;right:12px;transform:none}
  .modal{max-width:calc(100vw - 24px)}
}
@media (max-width:820px){body.beheer{min-width:1100px}body.beheer .menuknop{display:none}body.beheer nav.hoofd{display:flex;position:static;flex-direction:row;box-shadow:none;border:0;padding:0;margin-left:auto}}
@media (max-width:820px){
  .mandmobiel{display:flex;margin-left:auto;align-items:center;gap:4px;height:42px;padding:0 10px;border:1px solid var(--lijn2);border-radius:10px;color:var(--tekst);text-decoration:none}
  .mandmobiel svg{width:20px;height:20px}.mandmobiel span{background:var(--accent);color:#fff;border-radius:10px;font-size:11px;font-weight:700;padding:0 6px;line-height:18px}
  .mandmobiel.verborgen{display:none}
  .mandmobiel:not(.verborgen)+.menuknop{margin-left:0}
}

/* inloggen: één icoon rechtsboven (beheer of later klantenportaal) */
.accountknop{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:10px;border:1px solid var(--lijn2);border-radius:50%;color:var(--tekst);text-decoration:none;position:relative;flex:none}
.accountknop svg{width:20px;height:20px}
.accountknop:hover{border-color:var(--zachter);background:var(--bg)}
.accountknop.actief{background:var(--navy);border-color:var(--navy);color:#fff}
.accountknop.ingelogd:after{content:"";position:absolute;right:1px;bottom:1px;width:10px;height:10px;border-radius:50%;background:#16a34a;border:2px solid #fff}
@media (max-width:820px){
  header.top .logolink{margin-right:auto}
  .mandmobiel,.menuknop{margin-left:0!important}
  .accountknop{order:3;margin-left:0;width:42px;height:42px}
  .menuknop{order:4}
  .mandmobiel{order:2}
}

/* prijzen: groot incl. btw, klein excl. btw */
.pkaart .vanaf small{display:block;font-size:11.5px;color:var(--zachter);margin-top:1px}
.levoptie .lv-p em{font-style:normal;font-size:11px;font-weight:600;color:var(--zacht)}
.levoptie .lv-ex{grid-column:1/3;font-size:11px;color:var(--zachter);margin-top:-1px}

/* producten & prijzen */
.prijspag .paginakop p{max-width:640px}
.prodprijs{padding:22px 24px;margin-bottom:18px}
.pp-kop{display:flex;gap:20px;align-items:flex-start}
.pp-beeld{width:120px;height:120px;flex:none;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pp-beeld img,.pp-beeld svg{max-width:100%;max-height:100%;object-fit:contain}
.pp-info{min-width:0;flex:1}.pp-info h2{font-size:22px}.pp-info .spec{color:var(--zacht);font-size:13px;margin:4px 0 6px}.pp-info p{color:var(--zacht);margin:0 0 8px}
.pp-vanaf{margin:6px 0 12px;font-size:14px}.pp-vanaf b{font-size:20px}.pp-vanaf small{display:block;color:var(--zachter);font-size:12px}
.pp-opt{display:flex;gap:6px;margin:16px 0 0}
.pp-opt button,.pkeuze button{border:1px solid var(--lijn2);background:#fff;border-radius:18px;padding:6px 14px;font:600 13px Inter,sans-serif;color:var(--zacht);cursor:pointer}
.pp-opt button.aan,.pkeuze button.aan{background:var(--navy);border-color:var(--navy);color:#fff}
.pkeuze{display:none;gap:6px;margin:14px 0 8px;flex-wrap:wrap}
.ptabelwrap{margin-top:14px;overflow-x:auto}
.ptabel{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:620px}
.ptabel th,.ptabel td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--lijn);vertical-align:top}
.ptabel th:first-child,.ptabel td:first-child{text-align:left;width:150px}
.ptabel thead th{background:var(--bg);font-size:13px;font-weight:700;color:var(--tekst);border-bottom:1px solid var(--lijn2)}
.ptabel thead th:first-child{border-radius:10px 0 0 0}.ptabel thead th:last-child{border-radius:0 10px 0 0}
.pkop{display:inline-flex;align-items:center;gap:6px}.pkop svg{width:16px;height:16px;flex:none}
.ptabel th small{display:block;font-weight:500;font-size:11px;color:var(--zacht);margin-top:2px;white-space:normal}
.ptabel th.n-budget .pkop{color:#1f9d55}.ptabel th.n-spoed .pkop{color:#e5007d}.ptabel th.n-superspoed .pkop{color:#7b2ff7}
.ptabel td b{display:block;font-size:15px;font-variant-numeric:tabular-nums}.ptabel td small{display:block;font-size:11px;color:var(--zachter);font-variant-numeric:tabular-nums}
.ptabel td.pa{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptabel td.n-standaard,.ptabel th.n-standaard{background:rgba(0,160,227,.05)}
.pp-voet{font-size:12px;color:var(--zacht);margin:12px 0 0}
@media (max-width:820px){
  .prodprijs{padding:16px}
  .pp-kop{gap:12px}.pp-beeld{width:80px;height:80px}.pp-info h2{font-size:19px}
  .pp-info .btn{width:100%;justify-content:center}
  .pkeuze{display:flex}
  .ptabel{min-width:0}
  .ptabel th[class^="n-"],.ptabel td[class^="n-"]{display:none}
  .ptabel[data-toon="budget"] .n-budget,.ptabel[data-toon="standaard"] .n-standaard,.ptabel[data-toon="spoed"] .n-spoed,.ptabel[data-toon="superspoed"] .n-superspoed{display:table-cell}
  .ptabel th:first-child,.ptabel td:first-child{width:auto}
}

/* winkelmand: staffels per beker */
.mandstaffel{margin:8px 0 10px;border:1px solid var(--lijn);border-radius:10px;padding:8px 10px;background:#fbfcfe}
.stfkop{font-size:12px;font-weight:700;color:var(--tekst);margin-bottom:6px}.stfkop small{font-weight:500;color:var(--zachter);margin-left:4px}
.stfrij{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:5px}
.stfrij button{border:1px solid var(--lijn);background:#fff;border-radius:8px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;font:inherit;color:inherit;min-width:0}
.stfrij button span{font-size:10.5px;color:var(--zacht);font-weight:600}.stfrij button b{font-size:13px;font-variant-numeric:tabular-nums}.stfrij button small{font-size:10px;color:var(--zachter);font-variant-numeric:tabular-nums}
.stfrij button:hover{border-color:#9fd6ef}
.stfrij button.aan{border-color:#00a0e3;background:#eaf7fd;box-shadow:0 0 0 1px #00a0e3}
.stftip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:12.5px;color:var(--tekst);background:#fff8e1;border:1px solid #fde68a;border-radius:8px;padding:6px 10px}
.stftip .btn{margin-left:auto}

.mandprijs small{display:block;line-height:1.35}.mandprijs .mp-st{margin-top:3px}
.stfrij button em{font-style:normal;font-size:9.5px;color:var(--zacht);margin-top:-1px}
.stftip span small{display:block;font-size:11px;color:var(--zacht)}
.prijsblok .pr-r span{display:block}

/* =====================================================================
   HOMEPAGE · KLEUREXPLOSIE (volle kleurbanden in cyaan, magenta, geel, zwart)
   ===================================================================== */
.hb{--hc:#00a0e3;--hm:#e5007d;--hy:#ffe500;--hk:#0d0b1a;--hbric:'Bricolage Grotesque','Lexend',Inter,sans-serif;background:var(--hk);color:#fff;overflow-x:hidden;overflow-x:clip}
.hb-w,.hb-in{max-width:1300px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.hb h1,.hb h2,.hb h3{font-family:var(--hbric);margin:0;text-wrap:balance}
.hb-hero{position:relative;overflow:hidden;padding:46px 0 80px}
.hb-blob{position:absolute;border-radius:50%;opacity:.9;animation:hbzweef 14s ease-in-out infinite alternate;pointer-events:none;will-change:transform} /* zachte vlek zonder blur-filter: veel lichter voor telefoons */
.hb-blob.b1{width:760px;height:760px;background:radial-gradient(closest-side,rgba(229,0,125,.95),rgba(229,0,125,.45) 45%,transparent);left:-180px;top:-160px}
.hb-blob.b2{width:700px;height:700px;background:radial-gradient(closest-side,rgba(0,160,227,.95),rgba(0,160,227,.45) 45%,transparent);right:-220px;top:-100px;animation-delay:-5s}
.hb-blob.b3{width:600px;height:600px;background:radial-gradient(closest-side,rgba(255,229,0,.8),rgba(255,229,0,.3) 45%,transparent);left:35%;bottom:-340px;animation-delay:-9s}
@keyframes hbzweef{to{transform:translate(60px,40px) scale(1.1)}}
.hb-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:center}
.hb-hero h1{font-size:clamp(46px,6.6vw,100px);line-height:.92;font-weight:800;letter-spacing:-.04em}
.hb-hero h1 .s{display:block;background:linear-gradient(90deg,var(--hy),#ff8a00 40%,var(--hm) 75%,var(--hc));-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-hero .lead{font-size:18px;opacity:.88;margin:18px 0 0;max-width:520px}
.hb-naam{display:flex;max-width:500px;margin-top:26px;border:2px solid rgba(255,255,255,.75);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hb-naam input{flex:1;min-width:0;border:0;padding:16px;font:700 20px Inter,sans-serif;outline:none;background:transparent;color:#fff}
.hb-go{border:0;background:#fff;color:var(--hk);font:800 15px Inter,sans-serif;padding:0 20px;cursor:pointer;white-space:nowrap}
.hb-go:hover{background:var(--hy)}
.hb-stijlen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hb-stijlen button{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;border-radius:20px;padding:7px 13px;font:600 13px Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.hb-stijlen button i{width:13px;height:13px;border-radius:50%}
.hb-stijlen button.aan{background:#fff;color:var(--hk)}
.hb-ring{position:relative}
.hb-ring:before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:conic-gradient(var(--hc),var(--hm),var(--hy),var(--hc));-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent);mask-image:radial-gradient(closest-side,#000 25%,transparent);opacity:.6;animation:hbdraai 10s linear infinite;pointer-events:none;will-change:transform}
@keyframes hbdraai{to{transform:rotate(360deg)}}
.hbcup{position:relative;width:100%;max-width:460px;aspect-ratio:34/40;margin:0 auto}
.hbcup canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.hb-lint{overflow:hidden;white-space:nowrap;font:800 26px var(--hbric);padding-block:12px;position:relative;z-index:2}
.hb-lint span{display:inline-block;animation:hbschuif 40s linear infinite;will-change:transform}
.hb-lint.geel{background:var(--hy);color:var(--hk);transform:rotate(-2deg);margin:-12px -20px 0}
.hb-lint.roze{background:var(--hm);color:#fff;transform:rotate(1.5deg);margin:-14px -20px 0}
@keyframes hbschuif{to{transform:translateX(-50%)}}
.hb-band{padding-block:80px}
.hb-band.cyaan{background:var(--hc);margin-top:-20px;padding-top:100px}.hb-band.magenta{background:var(--hm)}.hb-band.geel{background:var(--hy);color:var(--hk)}.hb-band.zwart{background:var(--hk)}
.hb-band h2{font-size:clamp(34px,4.6vw,64px);line-height:.95;font-weight:800;letter-spacing:-.03em}
.hb-band .sub{font-size:18px;opacity:.92;margin:12px 0 0;max-width:640px}
.hb-stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
.hb-stap{background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.45);border-radius:22px;padding:22px}
.hb-stap b{display:block;font:800 54px/1 var(--hbric)}
.hb-stap h3{font-size:22px;font-weight:800;margin-top:10px}.hb-stap p{opacity:.92;margin:6px 0 0}
.hb-knop{display:inline-flex;align-items:center;gap:8px;margin-top:28px;border-radius:12px;padding:14px 22px;font:800 16px Inter,sans-serif;text-decoration:none}
.hb-knop.wit{background:#fff;color:var(--hk)}.hb-knop.zwart{background:var(--hk);color:#fff;font-size:18px;padding:18px 28px}
.hb-knop:hover{transform:translateY(-2px)}
.hb-muur{overflow:hidden;margin-top:30px}
.hb-rij{display:flex;width:max-content;gap:8px;animation:hbschuif 80s linear infinite;will-change:transform}
.hb-rij.terug{animation-direction:reverse;animation-duration:90s;margin-top:6px}
.hb-muur:hover .hb-rij{animation-play-state:paused}
.hb-rij button{width:150px;flex:none;border:0;background:none;color:#fff;cursor:pointer;padding:4px 0 8px;font:inherit;transition:transform .2s}
.hb-rij button:hover{transform:translateY(-5px) rotate(-2deg)}
.hb-rij button.bezig{opacity:.5}
.hb-rij img{width:150px;height:180px;object-fit:contain;display:block}
.hb-rij img:not([src]){visibility:hidden}
.hb-rij small{display:block;font-size:11.5px;font-weight:700;line-height:1.25}
.hb-scen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.hb-scen a{border-radius:22px;padding:24px 20px 20px;text-decoration:none;color:var(--hk);background:#fff;position:relative;overflow:hidden;min-height:160px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .2s}
.hb-scen a:hover{transform:translateY(-6px) rotate(-1deg)}
.hb-scen a:before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%}
.hb-scen a:nth-child(4n+1):before{background:var(--hc)}.hb-scen a:nth-child(4n+2):before{background:var(--hm)}.hb-scen a:nth-child(4n+3):before{background:var(--hy);box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}.hb-scen a:nth-child(4n+4):before{background:var(--hk)}
.hb-scen b{font:800 22px var(--hbric);position:relative}.hb-scen small{position:relative;opacity:.7;margin-top:4px}
.hb-prijzen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
.hb-prijs{border-radius:26px;padding:26px;color:var(--hk);background:#fff;position:relative;overflow:hidden;text-decoration:none;transition:transform .2s}
.hb-prijs:hover{transform:translateY(-4px)}
.hb-prijs .ml{font:800 54px/1 var(--hbric);letter-spacing:-.03em}
.hb-prijs .van{margin-top:10px;font-size:15px}.hb-prijs .van b{font:800 34px var(--hbric)}
.hb-prijs small{display:block;opacity:.6;font-size:12px;position:relative}
.hb-prijs:after{content:"";position:absolute;right:-20px;bottom:-20px;width:110px;height:110px;border-radius:50%;mix-blend-mode:multiply}
.hb-prijs:nth-child(1):after{background:var(--hc)}.hb-prijs:nth-child(2):after{background:var(--hm)}.hb-prijs:nth-child(3):after{background:var(--hy)}
.hb-eind{text-align:center}
.hb-eind h2{font-size:clamp(40px,6vw,86px)}
.hb-groot{margin:18px 0 0;font-weight:600}.hb-groot a{color:var(--hk)}
@media (max-width:860px){
  .hb-hero{padding:28px 0 60px}
  .hb-in{grid-template-columns:minmax(0,1fr)}
  .hbcup{max-width:330px}
  .hb-stappen,.hb-scen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-prijzen{grid-template-columns:minmax(0,1fr)}
  .hb-band{padding-block:56px}
  .hb-lint{font-size:20px}
}
@media (max-width:480px){.hb-stappen{grid-template-columns:minmax(0,1fr)}.hb-scen a{min-height:130px}}
@media (prefers-reduced-motion:reduce){.hb-blob,.hb-ring:before,.hb-lint span,.hb-rij{animation:none}}

/* alle browsers: geen iOS-menu bij lang drukken op canvas, geen tikvertraging, nette lettertypen */
canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button,a,input,select,label{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,160,227,.15)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===== vindbaarheid: footerlinks, veelgestelde vragen, gelegenheden ===== */
footer.voet .voetlinks{max-width:1440px;margin:0 auto;padding:14px 32px 6px;display:flex;flex-wrap:wrap;gap:8px 40px;border-bottom:1px solid rgba(255,255,255,.08)}
footer.voet .voetlinks div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-width:0}
footer.voet .voetlinks b{margin-right:2px}
footer.voet .voetlinks a{color:#cfd6e3}
.faqlijst{display:flex;flex-direction:column;gap:8px;max-width:860px}
.faq{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw)}
.faq summary{cursor:pointer;list-style:none;padding:15px 48px 15px 20px;font-weight:600;font-size:15px;position:relative;overflow-wrap:anywhere}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--accent-l);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.faq[open] summary:after{content:"–"}
.faq p{margin:0;padding:0 20px 16px;color:#3d4a60;font-size:14.5px;overflow-wrap:anywhere}
.faq p a,.glmeer a{color:var(--accent);font-weight:600;text-decoration:none}
.glmeer{margin:12px 0 0}
.glkaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.glkaart{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--lijn);border-top:4px solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:var(--schaduw);text-decoration:none;color:var(--tekst);transition:transform .15s;min-width:0}
.glkaart:hover{transform:translateY(-3px)}
.glkaart b{font-family:var(--kopfont);font-size:17px;margin-top:6px;overflow-wrap:anywhere}
.glkaart span{color:var(--zacht);font-size:13.5px}
.glkaart i{font-style:normal;color:var(--accent);font-weight:700;font-size:13px;margin-top:auto;padding-top:6px}
.glprijzen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.glprijs{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:18px 20px;box-shadow:var(--schaduw);text-decoration:none;color:var(--tekst);min-width:0}
.glprijs b{font-family:var(--kopfont);font-size:22px}
.glprijs .incl{font-size:14px}
.glprijs strong{font-size:22px}
.glprijs small{color:var(--zacht);font-size:12px}
.czfilter a{border:1px solid var(--lijn2);background:#fff;border-radius:20px;padding:7px 15px;font:600 13px Inter,sans-serif;color:var(--zacht);text-decoration:none;flex:none}
.czfilter a.aan{background:var(--navy);border-color:var(--navy);color:#fff}
.hb-hero h1 .r1{display:block}
.hb-hero h1{font-size:clamp(40px,5.6vw,86px)}
@media (max-width:820px){
  footer.voet .voetlinks{padding:12px 16px 6px;gap:8px}
  .glkaarten,.glprijzen{grid-template-columns:minmax(0,1fr)}
}
.faqgroep{font-size:19px;font-weight:700;margin:22px 0 10px}
.faqgroep:first-child{margin-top:0}
/* ontwerper: uitleg vooraf over vervorming op de schuine beker */
.ow-verv{position:fixed;inset:0;z-index:200;background:rgba(5,27,51,.55);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s}
.ow-verv-box{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.ow-verv-beeld{background:linear-gradient(135deg,#eaf6f4,#fbeef4 55%,#fdf3e6);padding:22px 22px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.ow-verv-svg{width:100%;max-width:330px;height:auto}
.ow-verv-beeld small{font-size:12px;color:#5b6679}
.ow-verv-tekst{padding:26px 28px}
.ow-verv-tekst h3{font-size:19px;margin:0 0 10px;overflow-wrap:anywhere}
.ow-verv-tekst p{font-size:14px;color:#3d4a60;margin:0 0 10px}
.ow-verv-let{font-size:12.5px!important;color:#5b6679!important}
.ow-verv-ok{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;margin:14px 0 18px;cursor:pointer}
.ow-verv-ok input{width:20px;height:20px;flex:none;accent-color:#2f6fb6}
.ow-verv-knoppen{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ow-verv-terug{font-size:13px;color:#5b6679;text-decoration:none}
.ow-verv-knoppen button{border:0;border-radius:10px;padding:12px 20px;font:700 15px Inter,sans-serif;background:#2f6fb6;color:#fff;cursor:pointer}
.ow-verv-knoppen button:disabled{background:#c4ccd8;cursor:not-allowed}
@media (max-width:820px){.ow-verv-beeld{padding:14px}.ow-verv-svg{max-width:280px}.ow-verv-tekst{padding:18px}}
/* winkelmand: akkoord voor drukken */
.drukakkoord{background:#f4f6fb;border:1px solid var(--lijn);border-left:4px solid var(--accent);border-radius:10px;padding:12px 14px;margin:6px 0 12px;font-size:12.5px;color:#3d4a60;line-height:1.45}
.drukakkoord>b{display:block;font-size:13.5px;color:var(--tekst);margin-bottom:4px}
.drukakkoord p{margin:0 0 6px}
.drukakkoord ul{margin:0 0 6px;padding-left:16px}
.drukakkoord li{margin:2px 0;overflow-wrap:anywhere}
.drukakkoord a{color:var(--accent);font-weight:600}

/* ===================================================================
   HOMEPAGE IN LOGOKLEUREN (.lh)
   =================================================================== */
.lh{--lnavy:#172743;--lzacht:#f4f6fb;--lregen:linear-gradient(90deg,#64c5c6,#65beac,#8ec68a,#c9da70,#fdc420,#e5a763,#fd7e7d,#ef84b4,#af87b3,#8f88b7,#4f78bb);--lkop:'Bricolage Grotesque',Inter,sans-serif;font:15px/1.55 Inter,system-ui,sans-serif;color:var(--lnavy);overflow-x:hidden;overflow-x:clip}
.lh h1,.lh h2,.lh h3{margin:0;font-family:var(--lkop);text-wrap:balance;letter-spacing:-.03em}
.lh p{margin:0}
.lh-w{max-width:1260px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.lh-eyebrow{display:inline-block;font:700 12px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5b6679;margin-bottom:10px}
/* hero */
.lh-hero{position:relative;overflow:hidden;background:var(--lnavy);color:#fff;padding-block:46px 84px}
.lh-waaier{position:absolute;inset:0;pointer-events:none}
.lh-waaier i{position:absolute;border-radius:50%;animation:lhtwinkel 5s ease-in-out infinite alternate}
.lh-waaier i.glans{background-image:radial-gradient(circle at 32% 30%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%)!important}
@keyframes lhtwinkel{to{transform:scale(.8);opacity:.7}}
.lh-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:center}
.lh-hero h1{font-size:clamp(36px,5.2vw,78px);line-height:.98;font-weight:800;letter-spacing:-.04em}
.lh-hero h1 span{display:block}
.lh-hero h1 .lh-r{width:fit-content;background:var(--lregen);-webkit-background-clip:text;background-clip:text;color:transparent}
.lh-lead{font-size:18px;opacity:.85;margin-top:18px!important;max-width:520px}
.lh-naam{display:flex;max-width:500px;margin-top:26px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lh-naam input{flex:1;min-width:0;border:0;padding:17px;font:700 20px Inter,sans-serif;outline:none;color:var(--lnavy);background:transparent}
.lh-naam button{border:0;background:var(--lregen);color:var(--lnavy);font:800 15px Inter,sans-serif;padding:0 22px;cursor:pointer;white-space:nowrap}
.lh-naam button:disabled{opacity:.7}
.lh-stijlen{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lh-stijlen button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;border-radius:20px;padding:7px 13px;font:600 13px Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lh-stijlen i{width:13px;height:13px;border-radius:50%}
.lh-stijlen button.aan{background:#fff;color:var(--lnavy)}
.lh-ring{position:relative}
.lh-ring:before{content:"";position:absolute;inset:12% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(239,132,180,.28),rgba(100,197,198,.12) 60%,transparent)}
.lh-cup{position:relative;width:100%;max-width:450px;aspect-ratio:34/40;margin:0 auto}
.lh-cup canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;-webkit-touch-callout:none;user-select:none}
/* lint */
.lh-lint{background:#fff;color:var(--lnavy);overflow:hidden;white-space:nowrap;font:800 24px var(--lkop);padding-block:14px;position:relative;z-index:2}
.lh-lint span{display:inline-block;animation:lhschuif 40s linear infinite;will-change:transform}
.lh-lint b{display:inline-block;width:16px;height:16px;border-radius:50%;margin:0 16px;vertical-align:middle}
@keyframes lhschuif{to{transform:translateX(-50%)}}
/* banden */
.lh-band{padding-block:80px;position:relative;overflow:hidden}
.lh-band h2{font-size:clamp(32px,4.4vw,60px);line-height:.98;font-weight:800}
.lh-sub{font-size:18px;margin-top:12px!important;max-width:640px;opacity:.85}
.lh-roze{background:linear-gradient(135deg,#ef84b4,#cd87b0 50%,#af87b3)}
.lh-geel{background:linear-gradient(135deg,#fdc420,#e5a763 60%,#fd7e7d)}
.lh-licht,.lh-producten{background:var(--lzacht)}
.lh-deco{position:absolute;border-radius:50%;background:radial-gradient(#fff 32%,transparent 36%) 0 0/26px 26px;opacity:.5;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent)}
.lh-knop{display:inline-flex;align-items:center;gap:8px;margin-top:28px;border-radius:12px;padding:14px 22px;font:800 16px Inter,sans-serif;text-decoration:none;background:var(--lnavy);color:#fff}
.lh-knop.wit{background:#fff;color:var(--lnavy)}
/* producten */
.lh-bekers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.lh-pbeker{background:#fff;border-radius:26px;box-shadow:0 8px 26px rgba(23,39,67,.08);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.lh-pcup{height:340px;padding-top:12px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(60% 55% at 50% 62%,var(--tint),transparent 70%)}
.lh-pcup canvas{display:block;cursor:grab;touch-action:pan-y;-webkit-touch-callout:none;user-select:none}
.lh-pinfo{padding:6px 24px 24px;display:flex;flex-direction:column;flex:1}
.lh-pinfo h3{font:800 30px/1 var(--lkop)}
.lh-mm{font-size:13px;color:#5b6679;margin-top:4px}
.lh-prijsr{margin-top:14px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.lh-prijsr span{font-size:14px;color:#5b6679}
.lh-prijsr b{font:800 40px/1 var(--lkop);letter-spacing:-.03em}
.lh-btwl{font-size:13px;font-weight:700;margin-top:2px}
.lh-pinfo small{display:block;font-size:12.5px;color:#5b6679;margin-top:2px}
.lh-mini{width:100%;border-collapse:collapse;margin-top:16px;font-size:13.5px;table-layout:fixed}
.lh-mini th{white-space:nowrap;font-size:11px;font-weight:700;color:#5b6679;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:0 0 6px}
.lh-mini th:first-child{width:34%}
.lh-mini th:last-child,.lh-mini td:last-child{text-align:right}
.lh-mini td{padding:7px 0;border-top:1px solid #edf0f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-pinfo .lh-knop{margin-top:18px;justify-content:center}
.lh-noot{margin-top:18px!important;font-size:13px;color:#5b6679}.lh-noot a{color:var(--lnavy);font-weight:700}
/* inspiratiemuur */
.lh-muur{overflow:hidden;margin-top:30px}
.lh-rij{display:flex;width:max-content;gap:8px;animation:lhschuif 80s linear infinite;will-change:transform}
.lh-rij.terug{animation-direction:reverse;animation-duration:90s;margin-top:6px}
.lh-muur:hover .lh-rij{animation-play-state:paused}
.lh-rij button{width:150px;flex:none;border:0;background:none;color:var(--lnavy);cursor:pointer;padding:4px 0 8px;font:inherit;transition:transform .2s}
.lh-rij button:hover{transform:translateY(-5px) rotate(-2deg)}
.lh-rij button.bezig{opacity:.5}
.lh-rij img{width:150px;height:180px;object-fit:contain;display:block}
.lh-rij img:not([src]){visibility:hidden}
.lh-rij small{font-size:11.5px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* gelegenheden */
.lh-scen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.lh-scen a{border-radius:22px;padding:24px 20px 20px;text-decoration:none;color:var(--lnavy);background:#fff;position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .2s;box-shadow:0 6px 18px rgba(23,39,67,.08)}
.lh-scen a:hover{transform:translateY(-6px)}
.lh-scen a:before{content:"";position:absolute;right:-26px;top:-26px;width:110px;height:110px;border-radius:50%}
.lh-scen a:nth-child(1):before{background:#64c5c6}.lh-scen a:nth-child(2):before{background:#ef84b4}.lh-scen a:nth-child(3):before{background:#8ec68a}.lh-scen a:nth-child(4):before{background:#4f78bb}
.lh-scen a:nth-child(5):before{background:#e5a763}.lh-scen a:nth-child(6):before{background:#af87b3}.lh-scen a:nth-child(7):before{background:#fd7e7d}.lh-scen a:nth-child(8):before{background:#c9da70}
.lh-scen b{font:800 22px var(--lkop);position:relative}.lh-scen small{position:relative;opacity:.7;margin-top:4px}
/* printverhaal */
.lh-pv-intro{background:linear-gradient(180deg,var(--lnavy),#0f1b31);color:#fff;text-align:center;padding-block:80px 30px}
.lh-pv-intro .lh-eyebrow{color:rgba(255,255,255,.7)}
.lh-pv-intro h2{font-size:clamp(32px,4.4vw,60px);font-weight:800}
.lh-pv-intro p{max-width:560px;margin:14px auto 0!important;opacity:.8;font-size:18px}
.lh-pv-pijl{margin:24px auto 0;width:34px;height:52px;border:2px solid rgba(255,255,255,.5);border-radius:18px;position:relative}
.lh-pv-pijl:after{content:"";position:absolute;left:50%;top:10px;width:6px;height:10px;margin-left:-3px;border-radius:3px;background:#fff;animation:lhscrol 1.6s ease-in-out infinite}
@keyframes lhscrol{50%{transform:translateY(14px);opacity:.3}}
.lh-pv{position:relative;height:640vh;background:#0f1b31;color:#fff}
.lh-pv-podium{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:20px;overflow:hidden}
.lh-pv-podium:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 50%,rgba(100,197,198,.10),transparent 45%);pointer-events:none}
.lh-pv-tekst{position:relative;padding-left:max(24px,calc((100vw - 1260px)/2 + 24px));padding-right:10px}
.lh-pv-fase{font:700 12px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.08)}
.lh-pv-fase i{width:10px;height:10px;border-radius:50%;background:var(--fk,#fff)}
.lh-pv-tekst h2{font-size:clamp(32px,4.2vw,60px);font-weight:800;line-height:.98;margin-top:16px;transition:opacity .25s}
.lh-pv-uitleg{font-size:18px;opacity:.82;margin-top:14px!important;max-width:470px;min-height:84px;transition:opacity .25s}
.lh-pv-balk{display:flex;gap:6px;margin-top:28px;max-width:470px}
.lh-pv-balk span{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;position:relative}
.lh-pv-balk span i{position:absolute;inset:0;width:0;background:var(--lregen)}
.lh-pv-namen{display:flex;gap:6px;max-width:470px;margin-top:8px}
.lh-pv-namen b{flex:1;font-size:11px;font-weight:600;opacity:.5;transition:opacity .2s}
.lh-pv-namen b.aan{opacity:1}
.lh-pv-cta{margin-top:26px;display:inline-flex;align-items:center;gap:8px;padding:15px 22px;border-radius:12px;background:var(--lregen);color:var(--lnavy);font:800 16px Inter,sans-serif;text-decoration:none}
.lh-pv-beker{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.lh-pv-beker canvas{width:min(100%,560px);height:min(92vh,700px);display:block}
.lh-pv-teller{position:absolute;right:max(24px,calc((100vw - 1260px)/2 + 24px));bottom:26px;font:700 12px Inter,sans-serif;opacity:.6;letter-spacing:.08em}
.lh-eind{text-align:center}.lh-eind h2{font-size:clamp(38px,6vw,84px)}
.lh-eind .lh-knop{font-size:18px;padding:18px 28px}
.lh-groot{margin-top:18px!important;font-size:15px}.lh-groot a{color:var(--lnavy);font-weight:800}
@media (max-width:860px){
  .lh-hero{padding-block:24px 40px}
  .lh-hero-in{grid-template-columns:minmax(0,1fr)}
  .lh-cup{max-width:330px}
  .lh-lead{font-size:16px}
  .lh-band{padding-block:56px}
  .lh-bekers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:26px -24px 0;padding:0 24px 8px;scrollbar-width:none}
  .lh-bekers::-webkit-scrollbar{display:none}
  .lh-pbeker{flex:0 0 82%;scroll-snap-align:center}
  .lh-pcup{height:320px}
  .lh-scen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lh-pv-podium{grid-template-columns:minmax(0,1fr);grid-template-rows:56% 44%;align-items:start}
  .lh-pv-beker{grid-row:1;height:100%}
  .lh-pv-beker canvas{height:100%;width:100%}
  .lh-pv-tekst{grid-row:2;padding:0 20px}
  .lh-pv-tekst h2{font-size:28px;margin-top:10px}.lh-pv-uitleg{font-size:15px;min-height:72px;margin-top:8px!important}
  .lh-pv-balk{margin-top:14px}.lh-pv-teller{display:none}.lh-pv-cta{margin-top:14px;padding:12px 18px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.lh-waaier i,.lh-lint span,.lh-rij,.lh-pv-pijl:after{animation:none}}

/* ===================================================================
   HUISSTIJL IN LOGOKLEUREN · geldt voor alle pagina's (zelfde look als de homepage)
   =================================================================== */
:root{--kopfont:'Bricolage Grotesque',Inter,system-ui,sans-serif;--navy-d:#172743;--bg:#f4f6fb;
  --logo-regenboog:linear-gradient(90deg,#64c5c6,#65beac,#8ec68a,#c9da70,#fdc420,#e5a763,#fd7e7d,#ef84b4,#af87b3,#8f88b7,#4f78bb)}
/* kleuren per accent (c/m/y/k = teal, roze, oranje, blauw uit het logo) */
.c{--ink:#3fb3a6;--tint:#e3f4f1;--ink-d:#1f8a7e}
.m{--ink:#ef84b4;--tint:#fde9f2;--ink-d:#c0507f}
.y{--ink:#e5a763;--tint:#fdf0e1;--ink-d:#b9772c}
.k{--ink:#4f78bb;--tint:#e6edf8;--ink-d:#34589a}
/* kop: navy met het witte logo */
header.top{background:var(--navy);border-bottom:0}
nav.hoofd a,nav.hoofd button{color:rgba(255,255,255,.78)}
nav.hoofd a:hover,nav.hoofd button:hover{background:rgba(255,255,255,.1);color:#fff}
nav.hoofd a.actief{background:#fff;color:var(--navy)}
nav.hoofd a.mandknop{border-color:rgba(255,255,255,.35);color:#fff}
nav.hoofd a.mandknop.actief{background:#fff;color:var(--navy);border-color:#fff}
.accountknop{border-color:rgba(255,255,255,.35);color:#fff}
.accountknop:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.accountknop.actief{background:#fff;border-color:#fff;color:var(--navy)}
.accountknop.ingelogd:after{border-color:var(--navy)}
#teller.teller,.teller{background:#ef84b4}
/* gekleurde streep: regenboog uit het logo */
.cmyk-streep{background:var(--logo-regenboog)}
.cmyk-streep i{display:none}
.ctaband:before{background:var(--logo-regenboog)}
/* paginakop: navy band met het stippenraster van het logo */
.paginaband{background:var(--navy);border-bottom:0;color:#fff}
.paginaband:before{background-image:radial-gradient(rgba(255,255,255,.16) 1.6px,transparent 2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 90%);mask-image:linear-gradient(90deg,transparent 40%,#000 90%)}
.paginaband:after{content:"";position:absolute;right:-60px;top:-70px;width:260px;height:260px;border-radius:50%;background:conic-gradient(#64c5c6,#8ec68a,#fdc420,#fd7e7d,#ef84b4,#8f88b7,#4f78bb,#64c5c6);opacity:.22;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);pointer-events:none}
.paginaband h1{font-weight:800;letter-spacing:-.03em;font-size:40px;color:#fff}
.paginaband p{color:rgba(255,255,255,.8)}
.paginaband .label{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}
.label i.c{background:#64c5c6!important}.label i.m{background:#ef84b4!important}.label i.y{background:#fdc420!important}.label i.k{background:#4f78bb!important}
/* koppen en knoppen */
h1,h2{letter-spacing:-.02em}
.btn.accent{background:var(--navy)}
.btn.accent:hover{background:var(--navy-2)}
.btn.groot{font-family:Inter,system-ui,sans-serif;font-weight:800}
.tekstblok,.ctaband,.feit,.ikaart,.s4,.glkaart,.glprijs,.faq,.kaart{border-radius:18px}
/* voettekst: navy met wit logo */
footer.voet{background:var(--navy);color:#c4ccda}
footer.voet .cmyk-streep{height:4px}
footer.voet .voetlogo{width:auto!important;height:30px!important;border-radius:0!important;margin-right:10px}
@media (max-width:820px){
  .menuknop{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
  nav.hoofd{background:var(--navy);border-bottom:0;box-shadow:0 14px 28px rgba(0,0,0,.3)}
  .mandmobiel{border-color:rgba(255,255,255,.35);color:#fff}
  .paginaband h1{font-size:28px}
  .paginaband:after{width:180px;height:180px}
}

/* werkwijze: de CMYK-uitleg houdt de echte inktkleuren */
.cmykuitleg .c,.rozet .c{--ink:#00a0e3}.cmykuitleg .m,.rozet .m{--ink:#e5007d}.cmykuitleg .y,.rozet .y{--ink:#ffe500}.cmykuitleg .k,.rozet .k{--ink:#1d1d1b}
.leegpaneel strong{color:var(--tekst)}