/* Configurator van nfc-visitekaartjes.nl (overgenomen van TapSterren): zelfde kleuren en letter als de winkel. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/schibsted-grotesk-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')}

:root{--r-klein:8px;--r-veld:14px;--petrol:#0F1218;--koraal:#4433E6;--koraal-diep:#3323C2;--perzik:#F4F4F6;--perzik-diep:#E8E7EE;--grond:#FAFAFB;--wit:#fff;--tekst:#3B404C;--zacht:#5D6371;--lijn:#E5E5EB;--goud:#4433E6;--groen:#0F7B4F;--oranje:#B4540A;
  --r:22px;--R:48px;--font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--soepel:cubic-bezier(.2,.7,.2,1);
  --schaduw:0 2px 4px rgba(15,18,24,.04),0 22px 44px -28px rgba(15,18,24,.32);--schaduw-klein:0 1px 2px rgba(15,18,24,.06),0 8px 18px -12px rgba(15,18,24,.26)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--grond);color:var(--tekst);font:500 1rem/1.5 var(--font);-webkit-font-smoothing:antialiased;padding-bottom:96px}
button,input{font:inherit;color:inherit}
svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--koraal);outline-offset:3px;border-radius:var(--r-klein)}

/* ---------- kop */
.kop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:68px;padding:0 clamp(16px,3vw,36px);background:var(--wit);border-bottom:1px solid var(--lijn)}
.kop-logo{display:inline-flex;align-items:center;gap:10px;color:var(--petrol);text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:-.04em}
.kop-logo svg{width:34px;height:34px}
.kop-logo span{font-family:'Schibsted Grotesk',var(--font);font-weight:800;font-size:1.12rem;letter-spacing:-.05em}
.kop-logo small{font-size:inherit;font-weight:500;color:var(--zacht)}
.kop-titel{font-weight:700;color:var(--petrol);letter-spacing:-.01em}
.kop-terug{justify-self:end;color:var(--zacht);font-size:.9375rem;font-weight:600;text-underline-offset:4px}
.kop-terug:hover{color:var(--petrol)}

/* ---------- indeling */
.cf{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,460px);gap:clamp(20px,3vw,44px);max-width:1320px;margin:0 auto;padding:clamp(18px,2.6vw,36px) clamp(16px,3vw,36px) 40px;align-items:start}
.podium{position:sticky;top:20px}
.podium-vlak{position:relative;display:grid;place-items:center;align-content:center;height:min(66vh,680px);min-height:400px;border-radius:var(--R);overflow:hidden;
  background:radial-gradient(ellipse 75% 60% at 50% 40%,#FFFFFF 0%,#F3F3F6 60%,#E9E9EE 100%)}
.product{position:relative;line-height:0;margin:32px 58px 32px}
.product canvas{box-shadow:var(--schaduw)}
.product canvas{display:block;border-radius:var(--hoek,var(--r-klein));touch-action:none}
.product.sleepbaar canvas{cursor:grab}.product.sleept canvas{cursor:grabbing}
.glans{position:absolute;inset:0;border-radius:var(--hoek,var(--r-klein));pointer-events:none;box-shadow:inset 0 0 0 1px rgba(15,18,24,.08)}
/* de maten in de vlakke weergave: een maatlijn onder en rechts van de kaart */
.product::before,.product::after{position:absolute;color:var(--zacht);font:600 .78rem/1 var(--font);letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.product::before{content:attr(data-b);left:0;right:0;top:calc(100% + 18px);padding-top:12px;text-align:center;border-top:1.5px solid #9FB0C8;background:linear-gradient(#9FB0C8,#9FB0C8) left top/1.5px 9px no-repeat,linear-gradient(#9FB0C8,#9FB0C8) right top/1.5px 9px no-repeat;margin-top:0}
.product::after{content:attr(data-h);top:0;bottom:0;left:calc(100% + 18px);display:flex;align-items:center;padding-left:12px;border-left:1.5px solid #9FB0C8;background:linear-gradient(#9FB0C8,#9FB0C8) left top/9px 1.5px no-repeat,linear-gradient(#9FB0C8,#9FB0C8) left bottom/9px 1.5px no-repeat}
.voet{display:block;width:var(--voetb,200px);height:16px;margin-top:-3px;border-radius:0 0 var(--r-klein) var(--r-klein);background:linear-gradient(180deg,#C9D3E2,#E9EEF5 60%,#F7F9FC);box-shadow:var(--schaduw-klein);transform:perspective(300px) rotateX(48deg);transform-origin:top}
.drie{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.drie.sleept{cursor:grabbing}
.weergave{position:absolute;top:14px;right:14px;z-index:2;display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:var(--schaduw-klein)}
.weergave button{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--zacht);font-size:.8125rem;font-weight:700;cursor:pointer}
.weergave button[aria-pressed=true]{background:var(--petrol);color:#fff}
.podium-tip{position:absolute;left:14px;top:18px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.8);color:var(--zacht);font-size:.8125rem;font-weight:600;white-space:nowrap;pointer-events:none}
.podium-noot{margin-top:12px;font-size:.875rem;color:var(--zacht);text-align:center}

.formaten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.kaartkleur{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;margin-top:12px;padding:10px 10px 10px 16px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein)}
.kaartkleur-naam{font-size:.9375rem;font-weight:800;color:var(--petrol);white-space:nowrap}
.kaartkleur button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:8px 12px 8px 10px;border:2px solid var(--lijn);border-radius:var(--r-veld);background:var(--wit);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.kaartkleur button:hover{border-color:#A9BCD8}
.kaartkleur button[aria-checked=true]{border-color:var(--koraal);background:var(--perzik);box-shadow:0 0 0 3px rgba(29,95,214,.14)}
.kaartkleur i{display:block;width:30px;height:38px;border-radius:var(--r-klein);box-shadow:inset 0 0 0 1px rgba(15,18,24,.14),var(--schaduw-klein)}
.kk-wit{background:#fff}.kk-zwart{background:#141414}
.kaartkleur strong{display:block;font-size:.9375rem;font-weight:800;line-height:1.2;color:var(--petrol)}
.kaartkleur small{display:block;font-size:.75rem;line-height:1.3;color:var(--zacht)}
.formaat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 12px;border:2px solid transparent;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein);text-align:left;cursor:pointer;transition:border-color .2s,transform .2s var(--soepel)}
.formaat:hover{transform:translateY(-2px)}
.formaat[aria-selected=true]{border-color:var(--koraal)}
.formaat-beeld{display:grid;place-items:center;width:58px;height:58px;border-radius:var(--r-veld);background:var(--grond)}
.formaat-beeld canvas{border-radius:3px;box-shadow:var(--schaduw-klein)}
.formaat strong{display:block;color:var(--petrol);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.formaat small{display:block;font-size:.8125rem;color:var(--zacht);line-height:1.35}

/* ---------- paneel */
.paneel{display:grid;gap:12px}
.blok{padding:20px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein)}
.blok h2{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
.blok h2 i,.veld span i{font-style:normal;font-weight:500;font-size:.8125rem;color:var(--zacht)}
.blok h2 i{margin-left:-4px}
.veld span i{margin-left:6px}
.nr{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--perzik);color:var(--koraal-diep);font-size:.875rem;font-weight:800}
.veldnaam,.veld > span{display:block;margin:16px 0 8px;font-size:.875rem;font-weight:700;color:var(--petrol)}
.blok h2 + .veldnaam,.blok h2 + .veld > span{margin-top:0}
.veld{display:block}
.veld input[type=text],.veld input[type=url]{width:100%;min-height:50px;padding:0 16px;border:1.5px solid #B9C6DA;border-radius:var(--r-veld);background:var(--wit);color:var(--petrol);font-weight:600}
.veld input::placeholder{color:#8794A8;font-weight:500}
.veld input:focus{outline:0;border-color:var(--koraal);box-shadow:0 0 0 4px rgba(29,95,214,.16)}
.veld input[type=range]{width:100%;accent-color:var(--koraal);height:32px}
.hulp{margin-top:12px;font-size:.875rem;line-height:1.5;color:var(--zacht)}

.drop{display:grid;justify-items:center;gap:4px;padding:24px 16px;border:2px dashed #A9BCD8;border-radius:var(--r);background:var(--grond);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.boven{border-color:var(--koraal);background:var(--perzik)}
.drop svg{width:40px;height:40px;padding:8px;margin-bottom:6px;border-radius:50%;background:var(--wit);color:var(--koraal);box-shadow:var(--schaduw-klein)}
.drop strong{color:var(--petrol);font-weight:800}
.drop span{font-size:.875rem;color:var(--zacht)}
.geladen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px;border-radius:var(--r-veld);background:var(--grond)}
.geladen-beeld{grid-row:1/3}
.geladen .tekstknop{grid-column:2;grid-row:2;justify-self:start;min-height:30px}
.geladen .ikoonknop{grid-column:3;grid-row:1/3}
.geladen-beeld{display:grid;place-items:center;width:58px;height:58px;border-radius:var(--r-klein);background:repeating-conic-gradient(#E3E9F2 0 25%,#fff 0 50%) 0 0/14px 14px;overflow:hidden}
.geladen-beeld img{max-width:100%;max-height:100%}
.geladen-tekst strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--petrol);font-size:.9375rem}
.oordeel{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--groen)}
.oordeel.let{color:var(--oranje)}
.oordeel svg{width:16px;height:16px}
.tekstknop{border:0;background:none;color:var(--koraal-diep);font-size:.875rem;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px}
.ikoonknop{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--wit);color:var(--zacht);cursor:pointer}
.ikoonknop:hover{color:var(--petrol);background:var(--perzik)}
.ikoonknop svg{width:18px;height:18px}

.keuze2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.keuze2 label{position:relative;cursor:pointer}
.keuze2 input{position:absolute;opacity:0}
.keuze2 span{display:block;height:100%;padding:12px 12px;border:2px solid var(--lijn);border-radius:var(--r-veld);transition:border-color .2s,background .2s}
.keuze2 strong{display:block;color:var(--petrol);font-size:.9375rem;line-height:1.25}
.keuze2 small{display:block;margin-top:3px;font-size:.8125rem;color:var(--zacht);line-height:1.35}
.keuze2 input:checked + span{border-color:var(--koraal);background:var(--perzik)}
.keuze2 input:focus-visible + span{outline:3px solid var(--koraal);outline-offset:3px}

.schakel{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:.9375rem;font-weight:600;color:var(--petrol);cursor:pointer}
.schakel input{position:absolute;opacity:0}
.schakel-knop{position:relative;width:46px;height:28px;flex:none;border-radius:999px;background:#B9C6DA;transition:background .2s}
.schakel-knop::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--schaduw-klein);transition:translate .2s var(--soepel)}
.schakel input:checked + .schakel-knop{background:var(--koraal)}
.schakel input:checked + .schakel-knop::after{translate:18px 0}
.schakel input:focus-visible + .schakel-knop{outline:3px solid var(--koraal);outline-offset:3px}

.stijlen{display:grid;gap:8px}
.stijl{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;padding:8px 12px 8px 8px;border:2px solid var(--lijn);border-radius:var(--r-veld);background:var(--wit);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--soepel)}
.stijl:hover{border-color:#A9BCD8;transform:translateY(-1px)}
.stijl[aria-checked=true]{border-color:var(--koraal);background:var(--perzik);box-shadow:0 0 0 3px rgba(29,95,214,.14)}
.stijl-beeld{display:grid;place-items:center;width:76px;height:72px;border-radius:var(--r-klein);background:var(--grond);overflow:hidden}
.stijl[aria-checked=true] .stijl-beeld{background:var(--wit)}
.stijl canvas{border-radius:3px;box-shadow:var(--schaduw-klein)}
.stijl-tekst strong{display:block;font-size:1rem;font-weight:800;line-height:1.25;color:var(--petrol)}
.stijl-tekst small{display:block;margin-top:2px;font-size:.8125rem;line-height:1.35;color:var(--zacht)}
#fotodeel{margin-top:16px;padding-top:2px;border-top:1px solid var(--lijn)}
.drop-klein{padding:16px 12px}
#bg-deel[hidden] + .veldnaam{margin-top:0}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border:2px solid var(--lijn);border-radius:999px;background:var(--wit);color:var(--petrol);font-size:.875rem;font-weight:700;cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:#A9BCD8}
.chip[aria-checked=true]{border-color:var(--koraal);background:var(--perzik);color:var(--koraal-diep)}

.stalen{display:flex;flex-wrap:wrap;gap:10px}
.staal{position:relative;width:44px;height:44px;border:0;border-radius:50%;background:var(--k);box-shadow:inset 0 0 0 1.5px rgba(15,18,24,.18);cursor:pointer;transition:transform .2s var(--soepel)}
.staal:hover{transform:scale(1.08)}
.staal[aria-checked=true]{box-shadow:inset 0 0 0 1.5px rgba(15,18,24,.18),0 0 0 3px var(--wit),0 0 0 5.5px var(--koraal)}
.staal svg{position:absolute;inset:0;margin:auto;width:20px;height:20px;color:var(--vink,#fff);opacity:0}
.staal[aria-checked=true] svg{opacity:1}
.staal-eigen{display:grid;place-items:center;overflow:hidden;background:conic-gradient(#F4B21B,#E4226F,#7A4CE0,#4433E6,#17A673,#F4B21B)}
.staal-eigen input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer}

.bestel{list-style:none;display:grid;gap:10px}
.bestel li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 12px;border-radius:var(--r-veld);background:var(--grond)}
.bestel strong{display:block;color:var(--petrol);font-weight:800;line-height:1.25}
.bestel small{display:block;font-size:.8125rem;color:var(--zacht)}
.bestel em{min-width:74px;text-align:right;font-style:normal;font-weight:800;color:var(--petrol)}
.bestel li.nul em{color:#8794A8;font-weight:600}
.teller{display:inline-flex;align-items:center;padding:3px;border:1.5px solid var(--lijn);border-radius:999px;background:var(--wit)}
.teller button{width:36px;height:36px;border:0;border-radius:50%;background:var(--perzik);color:var(--petrol);font-size:1.25rem;font-weight:700;line-height:1;cursor:pointer}
.teller button:disabled{opacity:.4;cursor:default}
.teller output{min-width:34px;text-align:center;font-weight:800;color:var(--petrol)}
.som{display:grid;gap:6px;margin-top:16px;padding-top:12px;border-top:1px solid var(--lijn)}
.som div{display:flex;justify-content:space-between;gap:16px;font-size:.9375rem}
.som dd{font-weight:700;color:var(--petrol);white-space:nowrap}
.som .korting dd,.som .korting dt{color:var(--groen);font-weight:700}
.som .totaal{margin-top:6px;font-size:1.125rem}
.som .totaal dt,.som .totaal dd{font-weight:800;color:var(--petrol)}
.som .tip{font-size:.875rem;color:var(--koraal-diep);font-weight:600}

/* ---------- zelf opbouwen: het kader om het gekozen onderdeel en de eigenschappen */
.kader{position:absolute;border:1.5px solid var(--koraal);border-radius:3px;cursor:move;touch-action:none;outline-offset:4px}
.kader span{position:absolute;width:14px;height:14px;border:2px solid var(--koraal);border-radius:50%;background:#fff;touch-action:none}
.kader span::after{content:"";position:absolute;inset:-12px}
.kader [data-g=nw]{left:-8px;top:-8px;cursor:nwse-resize}.kader [data-g=se]{right:-8px;bottom:-8px;cursor:nwse-resize}
.kader [data-g=ne]{right:-8px;top:-8px;cursor:nesw-resize}.kader [data-g=sw]{left:-8px;bottom:-8px;cursor:nesw-resize}
.kader [data-g=w],.kader [data-g=e]{top:50%;margin-top:-9px;width:8px;height:18px;border-radius:var(--r-klein);cursor:ew-resize}
.kader [data-g=w]{left:-5px}.kader [data-g=e]{right:-5px}
.kader.smal [data-g=w],.kader.smal [data-g=e]{display:none}
.kader{transform-origin:50% 50%}
.kader [data-g=draai]{left:50%;top:-38px;margin-left:-9px;width:18px;height:18px;background:var(--koraal);border-color:#fff;box-shadow:var(--schaduw-klein);cursor:grab}
.kader [data-g=draai]::before{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:20px;margin-left:-.75px;background:var(--koraal)}
.werkbalk{position:absolute;z-index:3;display:flex;gap:2px;padding:4px;border-radius:var(--r-veld);background:var(--petrol);box-shadow:var(--schaduw-klein)}
.werkbalk button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-klein);background:none;color:#fff;cursor:pointer}
.werkbalk button:hover{background:rgba(255,255,255,.16)}
.werkbalk button[data-actie=weg]:hover{background:#B3261E}
.werkbalk svg{width:20px;height:20px}
.kader.multi span{display:none}
.kader.multi{border-style:solid;border-width:2px}
.werkbalk .alleen-multi{display:none}
.kader.multi ~ .werkbalk .alleen-multi{display:grid}
.kader.multi ~ .werkbalk [data-actie=kwart]{display:none}
.eig-acties.lijnrij{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:6px}
.eig-acties.duo2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}
.hulp-strak{margin-top:4px}
.product.bouwen canvas{cursor:default}
.hulp-boven{margin:-6px 0 4px}
.eig{margin-top:16px;padding:16px;border-radius:var(--r-veld);background:var(--grond)}
.eig h3{font-size:.9375rem;font-weight:800;color:var(--petrol);margin-bottom:2px}
.eig .veldnaam,.eig .veld > span{margin-top:12px}
.eig textarea{width:100%;min-height:74px;padding:12px 12px;border:1.5px solid #B9C6DA;border-radius:var(--r-veld);background:#fff;color:var(--petrol);font:600 1rem/1.4 var(--font);resize:vertical}
.eig textarea:focus{outline:0;border-color:var(--koraal);box-shadow:0 0 0 4px rgba(29,95,214,.16)}
.eig .chip{min-height:40px;padding:0 12px;font-size:.8125rem}
.eig .staal{width:36px;height:36px}
.eig-acties{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:16px;padding:6px;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw-klein)}
.gereed{display:grid;justify-items:center;gap:4px;padding:8px 2px 8px;border:0;border-radius:var(--r-klein);background:none;color:var(--petrol);cursor:pointer;transition:background .15s,color .15s}
.gereed svg{width:22px;height:22px}
.gereed span{font-size:.75rem;font-weight:700;line-height:1.15;text-align:center;white-space:nowrap;color:var(--zacht)}
.gereed:hover{background:var(--perzik);color:var(--koraal-diep)}
.gereed:hover span{color:var(--koraal-diep)}
.gereed.weg{color:#B3261E}
.gereed.weg:hover{background:#FCEBEA;color:#B3261E}
.gereed.weg:hover span{color:#B3261E}
.eig-leeg{margin-top:16px;padding:12px 16px;border-radius:var(--r-veld);background:var(--grond);font-size:.875rem;color:var(--zacht)}
.vrij-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--lijn)}
.vrij-voet .duo{display:flex;gap:6px}
.pilknop{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1.5px solid var(--lijn);border-radius:999px;background:var(--wit);color:var(--petrol);font-size:.875rem;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.pilknop svg{width:18px;height:18px}
.pilknop:hover:not(:disabled){border-color:var(--koraal);background:var(--perzik)}
.pilknop:disabled{color:#A3AEC0;cursor:default}
.pilknop.stil{border-color:transparent;color:var(--zacht)}
.pilknop.stil:hover{color:var(--petrol)}
#vrij-vooruit{padding:0 12px}
.tekstknop:disabled{color:#8794A8;text-decoration:none;cursor:default}

.platen{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:10px}
.plaat{display:grid;justify-items:center;gap:8px;padding:12px 10px 10px;border:2px solid var(--lijn);border-radius:var(--r-veld);background:#fff;cursor:pointer;transition:border-color .2s,transform .2s var(--soepel),box-shadow .2s}
.plaat canvas{display:block;width:100%;height:auto}
.plaat canvas[data-plaat=qr],.plaat canvas[data-plaat=kader]{max-width:150px}
.plaat-naam{font-size:.8125rem;font-weight:700;line-height:1.2;color:var(--zacht);text-align:center}
.plaat:hover{border-color:#A9BCD8;transform:translateY(-2px);box-shadow:var(--schaduw-klein)}
.plaat[aria-checked=true],.plaat[aria-pressed=true]{border-color:var(--koraal);background:var(--perzik);box-shadow:0 0 0 3px rgba(29,95,214,.14)}
.plaat[aria-checked=true] .plaat-naam,.plaat[aria-pressed=true] .plaat-naam{color:var(--koraal-diep)}
.eig .plaat{padding:8px 6px 8px;gap:6px;border-radius:var(--r-veld)}
.eig .plaat-naam{font-size:.75rem}
.picto-rooster{gap:6px}
.picto-rooster .plaat{padding:6px 2px 6px;gap:2px;border-radius:var(--r-veld)}
.picto-rooster .plaat-naam{font-size:.62rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eig .platen[style*="--n:6"]{gap:6px}
.eig .platen[style*="--n:6"] .plaat{padding:6px 2px 4px;gap:2px;border-radius:var(--r-veld)}
.eig .platen[style*="--n:6"] .plaat-naam{font-size:.6rem;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
#tiktel .plaat,#tiknfc .plaat{padding:8px 4px 6px;gap:4px}
#tiktel .plaat-naam,#tiknfc .plaat-naam{font-size:.75rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.letters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lettertegel{display:grid;justify-items:center;gap:2px;padding:10px 4px 8px;border:2px solid var(--lijn);border-radius:var(--r-veld);background:#fff;color:var(--petrol);cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--soepel)}
.lettertegel b{font-size:1.7rem;line-height:1.15;font-weight:inherit}
.lettertegel span{font:700 .72rem/1.2 var(--font);color:var(--zacht)}
.lettertegel:hover{border-color:#A9BCD8;transform:translateY(-1px)}
.lettertegel[aria-checked=true],.lettertegel[aria-pressed=true]{border-color:var(--koraal);background:var(--perzik);box-shadow:0 0 0 3px rgba(29,95,214,.14)}
.lettertegel[aria-checked=true] span,.lettertegel[aria-pressed=true] span{color:var(--koraal-diep)}

/* ---------- stappen bovenaan het paneel */
.stappen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein)}
.stappen button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:0 6px;border:0;border-radius:var(--r-veld);background:none;color:var(--zacht);font-size:.875rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.stappen b{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--grond);font-size:.75rem;font-weight:800;color:var(--zacht);transition:background .2s,color .2s}
.stappen button:hover{color:var(--petrol)}
.stappen button[aria-current=step]{background:var(--perzik);color:var(--koraal-diep);box-shadow:inset 0 0 0 2px var(--koraal)}
.stappen button[aria-current=step] b{background:var(--koraal);color:#fff}
.stappen button.gedaan b{background:var(--perzik-diep);color:var(--koraal-diep)}
.blok.stap-weg{display:none}
.blok h2[role=button]{position:relative;margin:-22px -22px 0;padding:20px 54px 20px 20px;border-radius:var(--r);cursor:pointer;user-select:none}
.blok:not(.dicht) h2[role=button]{margin-bottom:-4px}
.blok h2[role=button]::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.2px solid var(--zacht);border-bottom:2.2px solid var(--zacht);transform:rotate(45deg);transition:transform .25s var(--soepel)}
.blok:not(.dicht) h2[role=button]::after{transform:rotate(-135deg);margin-top:-2px}
.blok h2[role=button]:hover{background:var(--grond)}
.blok.dicht{padding-bottom:0}
.blok.dicht > *:not(h2){display:none!important}
.blok h2 .nr{display:none}
.blok{animation:blokin .35s var(--soepel) both}
@keyframes blokin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sjablonen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sjabloon strong{text-align:center;line-height:1.2}
.sjabloon{display:grid;justify-items:center;gap:8px;padding:10px 6px;border:2px solid var(--lijn);border-radius:var(--r-veld);background:var(--wit);cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--soepel),box-shadow .2s}
.sjabloon:hover{border-color:#A9BCD8;transform:translateY(-2px);box-shadow:var(--schaduw-klein)}
.sjabloon[aria-pressed=true]{border-color:var(--koraal);background:var(--perzik);box-shadow:0 0 0 3px rgba(29,95,214,.14)}
.sjabloon span{display:grid;place-items:center;width:100%;height:118px}
.sjabloon img{max-width:100%;max-height:118px;border-radius:var(--r-klein);box-shadow:var(--schaduw-klein)}
.sjabloon strong{font-size:.875rem;font-weight:800;color:var(--petrol)}
.veldnaam-eerste{margin-top:0}
.presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.preset{display:grid;justify-items:center;gap:6px;padding:8px 4px 8px;border:2px solid var(--lijn);border-radius:var(--r-veld);background:var(--wit);cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--soepel),box-shadow .2s}
.preset:hover{border-color:#A9BCD8;transform:translateY(-2px);box-shadow:var(--schaduw-klein)}
.preset[aria-pressed=true]{border-color:var(--koraal);background:var(--perzik);box-shadow:0 0 0 3px rgba(29,95,214,.14)}
.preset-beeld{display:grid;place-items:center;width:100%;height:92px}
.preset canvas{border-radius:4px;box-shadow:var(--schaduw-klein)}
.preset strong{font-size:.8125rem;font-weight:800;color:var(--petrol)}
.typvak{position:absolute;z-index:2;margin:0;padding:0;border:0;outline:1.5px dashed var(--koraal);outline-offset:3px;background:none;resize:none;overflow:hidden;transform-origin:50% 50%;caret-color:var(--koraal)}
.product{animation:productin .5s var(--soepel) both}
@keyframes productin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.drie{animation:driein .6s ease both}
@keyframes driein{from{opacity:0}to{opacity:1}}
.balk-vorige{margin-right:auto}
.fotorender{margin:0 0 20px}
.fotorender-beeld{position:relative;aspect-ratio:var(--verh,1);max-height:min(56vh,560px);margin:0 auto;border-radius:var(--r);overflow:hidden;background:#E2E9F4}
.fotorender img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fotorender figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-size:.875rem;color:var(--zacht)}
.fotorender a{font-weight:700;color:var(--koraal-diep);text-underline-offset:4px}
.venster-oog{margin-bottom:6px;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--koraal)}
.venster-voet{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:16px 16px;border-radius:var(--r);background:var(--petrol);color:#fff}
.venster-totaal{display:grid;line-height:1.25}
.venster-totaal span{font-size:.875rem;color:#C9D8F2}
.venster-totaal strong{font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
.venster-voet .hoofdknop{background:var(--goud);color:var(--petrol)}
.venster-voet .hoofdknop svg{background:var(--petrol);color:var(--goud)}
.venster-voet .hoofdknop:disabled{background:#3A5488;color:#9FB3D9}
.venster-voet .hoofdknop:disabled svg{background:#28406F;color:#9FB3D9}
.drukvel{background:linear-gradient(180deg,#F4F6FA,#E6ECF5)}
.drukvel img{border-radius:3px}
@media (max-width:520px){.stappen span{display:none}.presets{grid-template-columns:repeat(3,minmax(0,1fr))}.venster-voet{flex-direction:column;align-items:stretch}}
@media (prefers-reduced-motion:reduce){.blok,.product,.drie{animation:none}}

/* ---------- vaste balk onderaan */
.balk{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:14px clamp(16px,3vw,36px) calc(14px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--lijn)}
.balk-prijs{display:grid;justify-items:end;line-height:1.25}
.balk-prijs span{font-size:.8125rem;color:var(--zacht)}
.balk-prijs strong{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--petrol)}
.hoofdknop{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;min-height:56px;padding:0 12px 0 28px;border:0;border-radius:999px;background:var(--koraal);color:#fff;font-size:1.0625rem;font-weight:800;cursor:pointer;transition:background .2s,transform .2s var(--soepel)}
.hoofdknop:hover{background:var(--koraal-diep);transform:translateY(-1px)}
.hoofdknop svg{width:32px;height:32px;padding:6px;border-radius:50%;background:#fff;color:var(--koraal)}
.hoofdknop:disabled{background:#B9C6DA;cursor:not-allowed;transform:none}
.hoofdknop:disabled svg{color:#8794A8}

/* ---------- controlevenster */
.venster{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;border:0;border-radius:var(--R);background:var(--wit);color:var(--tekst);box-shadow:var(--schaduw)}
.venster::backdrop{background:rgba(15,18,24,.55)}
.venster-in{position:relative;padding:clamp(22px,3.4vw,40px)}
.venster-dicht{position:absolute;top:18px;right:18px;background:var(--grond)}
.venster h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.03em;color:var(--petrol);padding-right:50px}
.venster-lood{margin:8px 0 20px;color:var(--zacht);max-width:60ch}
.drukvellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:end}
.drukvel{display:grid;justify-items:center;gap:10px;padding:16px 12px 12px;border-radius:var(--r);background:var(--grond)}
.drukvel-beeld{position:relative;line-height:0}
.drukvel img{max-width:100%;max-height:300px;box-shadow:var(--schaduw-klein)}
.drukvel-snij{position:absolute;border:1.5px dashed rgba(228,34,111,.85);pointer-events:none}
.drukvel strong{color:var(--petrol);font-weight:800}
.drukvel small{font-size:.8125rem;color:var(--zacht);text-align:center}
.drukvel a{font-size:.875rem;font-weight:700;color:var(--koraal-diep);text-underline-offset:4px}
.controle{list-style:none;display:grid;gap:8px;margin-top:20px}
.controle li{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem}
.controle svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--groen)}
.controle li.let svg{color:var(--oranje)}
.proef{margin-top:20px;padding:12px 16px;border-radius:var(--r-veld);background:var(--perzik);color:var(--koraal-diep);font-size:.875rem;font-weight:600}

/* ---------- smal scherm: voorbeeld blijft bovenaan in beeld */
@media (max-width:920px){
.cf{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:12px}
.podium{top:0;z-index:10;margin:0 calc(-1 * clamp(16px,3vw,36px));padding:10px clamp(16px,3vw,36px) 10px;background:var(--grond)}
.podium-vlak{height:38vh;min-height:230px;border-radius:var(--r)}
.podium-noot{display:none}
.podium-tip{left:50%;top:auto;bottom:10px;translate:-50% 0}
.formaten{gap:8px;margin-top:10px}
.kaartkleur{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:8px;padding:8px}
.kaartkleur-naam,.kaartkleur small{display:none}
.kaartkleur button{padding:6px 10px 6px 8px;gap:8px}
.kaartkleur i{width:20px;height:26px}
.formaat{grid-template-columns:minmax(0,1fr);gap:0;padding:8px 10px;text-align:center}
.formaat-beeld{display:none}
.formaat strong{font-size:.8125rem}
.formaat small{font-size:.75rem}
.formaat .fm{display:none}
.kop{grid-template-columns:1fr auto}
.kop-titel{display:none}
}
@media (max-width:520px){
.blok{padding:16px 16px}

.keuze2{grid-template-columns:1fr}
.balk{gap:12px}
.balk-prijs span{font-size:.75rem}
.balk-prijs strong{font-size:1.125rem}
.hoofdknop{font-size:1rem;gap:8px}
.hoofdknop{flex:1;justify-content:space-between;padding-left:20px}
.bestel li{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
.bestel em{grid-column:1/-1;text-align:left;min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.venster-fout{margin-top:12px;padding:12px 16px;border-radius:var(--r-veld);background:var(--perzik);color:var(--koraal-diep);font-size:.9375rem;font-weight:600}
.venster-na{margin-top:12px;color:var(--zacht);font-size:.875rem}
.venster-voet .hoofdknop.bezig{opacity:.7;cursor:progress}
.hulp a{color:var(--koraal-diep);font-weight:600;text-underline-offset:3px}

/* ---------- telefoon en tablet: alleen het voorbeeld blijft in beeld staan, de rest van de pagina schuift er vrij onderdoor.
   De formaten en de kaartkleur schuiven mee weg, zodat er ruim plek is om te scrollen. */
@media (max-width:920px){
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.kop{height:54px}
.kop-logo span{font-size:1.0625rem}
.cf{gap:10px;padding-top:10px}
.podium{display:contents}
.podium-vlak{position:sticky;top:8px;z-index:10;height:clamp(200px,31svh,290px);min-height:0;border-radius:var(--r);box-shadow:0 0 0 9px var(--grond),var(--schaduw-klein)}
.weergave{top:8px;right:8px}
.weergave button{min-height:32px;padding:0 12px;font-size:.8125rem}
.podium-tip{bottom:8px;font-size:.75rem;padding:4px 10px}
.formaten{margin-top:6px}
.kaartkleur{margin-top:0}
.stappen{padding:4px}
.stappen span{display:inline}
.stappen button{min-height:42px;gap:6px;font-size:.8125rem;padding:0 4px}
.stappen b{width:21px;height:21px;font-size:.75rem}
.blok{scroll-margin-top:calc(clamp(200px,31svh,290px) + 20px)}
.balk{gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.balk-prijs{justify-items:start}
.balk .hoofdknop{min-height:52px}
.balk-vorige{margin-right:0;min-height:52px;padding:0 12px}
.balk-vorige span{display:none}
}
@media (max-width:520px){
.balk-prijs span{display:none}
.balk-prijs strong{font-size:1.25rem}
.balk-prijs::before{content:"Totaal";font-size:.75rem;font-weight:600;color:var(--zacht)}
}
@media (max-width:920px) and (max-height:620px){.podium-vlak{height:clamp(150px,34svh,220px)}}

.met-vinger{display:none}
@media (hover:none){.met-muis{display:none}.met-vinger{display:inline}}

@media (max-width:700px){:root{--R:30px;--r:18px}}

/* ================================================================ SYSTEEM 13-10: de configurator in dezelfde vormtaal als de winkel.
   Hetzelfde blauwe vlak bovenaan met de kopbalk doorzichtig erop, dezelfde knophoogtes, en gekozen toestanden in het heldere blauw. */
body{position:relative}
body::before{content:"";position:absolute;z-index:-1;inset:0 0 auto 0;height:clamp(300px,34vw,420px);border-radius:0 0 var(--R) var(--R);
  background:radial-gradient(circle at 99% 4%,rgba(255,255,255,.55) 0 13%,transparent 13.2%),radial-gradient(circle at 6% 130%,rgba(255,255,255,.5) 0 26%,transparent 26.2%),linear-gradient(105deg,#BFD8FE 0%,#E0ECFE 46%,#C6DCFD 100%)}
.kop{background:transparent;border-bottom:0}
.kop-terug{color:#3D5578}
@media (min-width:921px){.podium-vlak{box-shadow:var(--schaduw)}}
.weergave button[aria-pressed=true]{background:var(--koraal);color:#fff}
.hoofdknop{min-height:58px}
.pilknop{min-height:44px}

/* ================================================================ MOBIEL ALS APP (body.mob, gezet door configurator-mobiel.js tot 920 px breed).
   Het scherm is één kolom die precies past: kopbalk, voorbeeld, stappen + gereedschappen, het paneel (scrolt als enige) en de bestelbalk. */
body.mob{display:flex;flex-direction:column;height:100dvh;overflow:hidden;padding-bottom:0;overscroll-behavior:none}
body.mob::before{height:46dvh}
body.mob .kop{flex:none;height:48px;padding:0 12px}
body.mob .kop-logo svg{width:34px;height:27px}
body.mob .kop-logo span{font-size:1rem}
body.mob .kop-terug{font-size:.8125rem}
body.mob .cf{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;max-width:none;margin:0;padding:0}
body.mob .podium{display:contents}
body.mob .podium-vlak{position:relative;top:auto;flex:none;height:42dvh;min-height:190px;margin:0 8px;border-radius:var(--r);box-shadow:none}
body.mob .podium-noot{display:none}
body.mob .podium-tip{bottom:6px;font-size:.75rem;padding:4px 10px;max-width:calc(100% - 16px);white-space:normal;text-align:center}
body.mob .weergave{top:6px;right:6px}
body.mob .product::before,body.mob .product::after{display:none}
body.mob .paneel{flex:1;min-height:0;display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin-top:8px;border-radius:var(--r) var(--r) 0 0;background:var(--wit);box-shadow:var(--schaduw-klein)}
body.mob .stappen{position:sticky;top:0;z-index:6;margin:0;padding:6px 8px 4px;border-radius:var(--r) var(--r) 0 0;box-shadow:none;background:var(--wit)}
body.mob .stappen button{min-height:38px;font-size:.8125rem;border-radius:var(--r-klein)}
.mob-tabs{position:sticky;top:48px;z-index:5;display:flex;gap:4px;padding:4px 8px 8px;overflow-x:auto;scrollbar-width:none;background:var(--wit);border-bottom:1px solid var(--lijn)}
.mob-tabs::-webkit-scrollbar{display:none}
.mob-tabs[hidden]{display:none}
.mob-tabs button{flex:1 0 auto;display:grid;justify-items:center;gap:2px;min-width:64px;min-height:52px;padding:6px 8px;border:0;border-radius:var(--r-klein);background:none;color:var(--zacht);font:inherit;font-size:.75rem;font-weight:700;cursor:pointer}
.mob-tabs svg{width:22px;height:22px}
.mob-tabs button[aria-selected=true]{background:var(--perzik);color:var(--koraal-diep)}
body.mob .paneel > .blok{display:none;padding:16px 16px 24px;border-radius:0;background:none;box-shadow:none;animation:none}
body.mob .paneel > .blok.mob-aan:not([hidden]){display:block}
body.mob .blok h2[role=button],body.mob .blok > h2{display:none}
body.mob .blok > h2 + .veldnaam,body.mob .blok > .veldnaam:first-of-type{margin-top:0}
body.mob #blok-formaat .formaten{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
body.mob #blok-formaat .kaartkleur{margin-top:12px;box-shadow:inset 0 0 0 1px var(--lijn)}
body.mob #blok-formaat .formaat{box-shadow:inset 0 0 0 1px var(--lijn)}
/* een onderdeel gekozen: alleen de instellingen van dat onderdeel, met een weg terug naar de lijst */
.mob-terug{display:none;align-items:center;gap:6px;min-height:40px;margin:-4px 0 8px -6px;padding:0 10px 0 4px;border:0;border-radius:var(--r-klein);background:none;color:var(--koraal-diep);font:inherit;font-size:.875rem;font-weight:700;cursor:pointer}
.mob-terug svg{width:18px;height:18px}
body.mob #blok-vrij.mob-sel .mob-terug{display:inline-flex}
body.mob #blok-vrij.mob-sel > #vrij-uitleg,body.mob #blok-vrij.mob-sel > .veldnaam,body.mob #blok-vrij.mob-sel > #vrij-erbij,body.mob #blok-vrij.mob-sel > #picto-erbij{display:none}
body.mob .balk{position:static;flex:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom));backdrop-filter:none;background:var(--wit)}
body.mob .balk .hoofdknop{min-height:48px}
body.mob .balk-vorige{min-height:48px}
/* vingers zijn dikker dan een muis: grotere grepen met een ruim raakvlak, en een werkbalk met grote knoppen */
@media (pointer:coarse){
.kader span::after{content:"";position:absolute;inset:-15px}
.werkbalk button{min-width:44px;min-height:44px}
}
body.mob .balk{gap:8px}
body.mob .balk-prijs strong{white-space:nowrap;font-size:1.0625rem}
body.mob .balk .hoofdknop{flex:1;min-width:0;padding:0 8px 0 16px;font-size:.9375rem;gap:6px}
body.mob .balk .hoofdknop span{overflow:hidden;text-overflow:ellipsis}
body.mob .balk-vorige{padding:0 12px}
body.mob .cf{align-items:stretch}
body.mob .podium-vlak{width:auto}

/* mobiel, bijgesteld: de pagina scrolt weer gewoon en het voorbeeld schuift mee weg (niet vast bovenin). De tabs met gereedschappen blijven; alleen de bestelbalk staat vast onderin. */
body.mob{display:block;height:auto;overflow:visible;padding-bottom:calc(72px + env(safe-area-inset-bottom));overscroll-behavior:auto}
body.mob::before{height:clamp(300px,60vh,520px)}
body.mob .cf{display:block}
body.mob .podium-vlak{height:clamp(260px,46vh,420px)}
body.mob .paneel{overflow:visible;min-height:60vh}
body.mob .stappen,.mob-tabs{position:static}
body.mob .balk{position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--lijn)}

/* gouden sterren in het blauwe vlak bovenaan, zoals op de site: langs de randen en in de kopbalk, zodat ze niet achter de bediening staan */
body::after{content:"";position:absolute;z-index:-1;inset:0 0 auto 0;height:420px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22420%22 viewBox=%220 0 1440 420%22%3E%3Cdefs%3E%3Cfilter id=%22b0%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%223%22/%3E%3C/filter%3E%3Cfilter id=%22b3%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%222.4%22/%3E%3C/filter%3E%3Cfilter id=%22b5%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%225%22/%3E%3C/filter%3E%3Cfilter id=%22b6%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%220.6%22/%3E%3C/filter%3E%3Cfilter id=%22b7%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%221%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath transform=%22translate(24 96) rotate(-14 17 17) scale(1.417)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.8%22 filter=%22url(%23b0)%22/%3E%3Cpath transform=%22translate(300 14) rotate(10 7 7) scale(0.583)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.9%22/%3E%3Cpath transform=%22translate(470 70) rotate(-8 6 6) scale(0.500)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.85%22/%3E%3Cpath transform=%22translate(905 22) rotate(20 13 13) scale(1.083)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.6%22 filter=%22url(%23b3)%22/%3E%3Cpath transform=%22translate(1110 84) rotate(14 6 6) scale(0.500)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.9%22/%3E%3Cpath transform=%22translate(1372 150) rotate(-18 20 20) scale(1.667)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.5%22 filter=%22url(%23b5)%22/%3E%3Cpath transform=%22translate(1385 330) rotate(12 8 8) scale(0.667)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.85%22 filter=%22url(%23b6)%22/%3E%3Cpath transform=%22translate(8 300) rotate(22 9 9) scale(0.750)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.75%22 filter=%22url(%23b7)%22/%3E%3Cpath transform=%22translate(690 6) rotate(-6 5 5) scale(0.417)%22 d=%22M12 1.8l3.1 6.5 7.1.9-5.2 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.8 9.2l7.1-.9z%22 fill=%22%23F4B21B%22 opacity=%220.9%22/%3E%3C/svg%3E") top center/1440px 420px no-repeat}
@media (max-width:920px){body::after{background-position:top right -520px}}

/* zwevende balk: bij een groep staat er "Losmaken" bij, zodat duidelijk is hoe je onderdelen apart verzet */
.werkbalk button.met-tekst{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 12px 0 8px;font:inherit;font-size:.8125rem;font-weight:700;color:#fff;white-space:nowrap}
.kader.multi ~ .werkbalk button.met-tekst{display:inline-flex;flex-direction:row}
.werkbalk button.met-tekst svg{flex:none}
.eig-acties .gereed span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.eig-acties .gereed{min-width:0}

/* sterren in de vier Google-kleuren */
.staal-bont{--k:#fff;background:conic-gradient(#4285F4 0 25%,#EA4335 0 50%,#FBBC05 0 75%,#34A853 0)!important}

/* de vraag vóór het vervangen van eigen werk: klein venster, zelfde vorm als het eindvenster */
.vraag{width:min(440px,calc(100vw - 32px));border-radius:var(--r)}
.vraag .venster-in{padding:28px 24px 24px;text-align:center}
.vraag-ic{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:var(--r-veld);background:var(--perzik);color:var(--koraal-diep)}
.vraag-ic svg{width:26px;height:26px}
.vraag h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
.vraag p{margin:8px 0 0;color:var(--zacht);font-size:.9375rem;line-height:1.55}
.vraag-knoppen{display:grid;gap:8px;margin-top:24px}
.vraag-knoppen .hoofdknop,.vraag-knoppen .pilknop{width:100%;min-height:52px;justify-content:center;padding:0 16px;font-size:.9375rem}

/* patronen: een soort die niet op de kaart staat blijft zichtbaar als kopje met een knop om hem toe te voegen */
.deel-mist{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:8px 0 0;padding:12px 16px;border-radius:var(--r-veld);background:var(--grond);font-size:.875rem;color:var(--zacht)}
.deel-mist[hidden]{display:none}
.deel-mist .pilknop{min-height:38px;font-size:.8125rem}

/* een veld dat niet klopt: melding eronder en een rode rand */
.veldfout{margin:8px 0 0;padding:10px 12px;border-radius:var(--r-klein);background:#FDECEA;color:#B3261E;font-size:.875rem;font-weight:600;line-height:1.45}
.veldfout[hidden]{display:none}
input[aria-invalid=true]{border-color:#B3261E!important}

.deel-mist{display:block;margin:0 0 8px;padding:8px 12px}

/* waarschuwingen over het ontwerp, direct onder het voorbeeld */
.let-op{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.let-op[hidden]{display:none}
.let-op li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:var(--r-veld);background:#FFF4D6;color:#6B4A00;font-size:.875rem;font-weight:600;line-height:1.45}
.let-op svg{width:20px;height:20px;margin-top:1px;color:#B77900}
body.mob .let-op{margin:8px 8px 0}
/* de balk in het eindvenster in de lichte kleuren: geen donkerblauw met goud meer */
.venster-voet{background:var(--perzik);color:var(--petrol)}
.venster-voet .venster-totaal span{color:var(--zacht)}
.venster-voet .hoofdknop{background:var(--koraal);color:#fff}
.venster-voet .hoofdknop svg{background:#fff;color:var(--koraal)}
.venster-voet .hoofdknop:disabled{background:#B9CBEA;color:#fff}
.venster-voet .hoofdknop:disabled svg{background:#DCE6F5;color:#8FA5C6}

/* "Mail mij een link naar dit ontwerp", onder de bestelsom */
.maillink{margin-top:20px;padding:16px;border-radius:var(--r-veld);background:var(--grond)}
.maillink-kop{margin:0 0 12px;font-size:.875rem;line-height:1.5;color:var(--zacht)}
.maillink-kop strong{color:var(--petrol)}
.maillink-rij{display:flex;flex-wrap:wrap;gap:8px}
.maillink-rij input{flex:1 1 180px;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid var(--lijn);border-radius:var(--r-klein);background:#fff;font:inherit;font-size:.9375rem;color:var(--petrol)}
.maillink-rij .pilknop{min-height:44px;white-space:nowrap}
.maillink-uit{margin:10px 0 0;font-size:.875rem;font-weight:600;color:#B3261E}
.maillink-uit.goed{color:#0F7B4F}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── digitaal visitekaartje (14-10): alleen het pasje, geen reviewteksten, geen reviewlink, geen kant-en-klare reviewstijlen ── */
.vk-melding{display:none}
.cfg-vk .vk-melding{display:block;margin:0 0 12px;padding:12px 16px;border-radius:var(--r-veld);background:#EAF2FE;font-size:.9375rem;line-height:1.5;color:#0F1218}
.cfg-vk .vk-melding a{font-weight:700;color:#3323C2}
.cfg-vk #blok-presets,.cfg-vk #blok-stijl,.cfg-vk #blok-plaats,.cfg-vk #blok-tekst,.cfg-vk #blok-link,.cfg-vk #deel-sterren{display:none!important}
.cfg-vk #formaten .formaat[data-f="standaard"]{display:none}
/* voor- en achterkant van een pasje: links boven, gelijk aan de weergaveknoppen */
.weergave.kanten{right:auto;left:14px}
@media (max-width:920px){.weergave.kanten{left:8px}}
body.mob .weergave.kanten{left:6px}

/* dubbelzijdig: meerprijs naast de knop Achterkant */
.kanten .kant-meer{margin-left:4px;font-size:.75em;font-weight:500;opacity:.75;white-space:nowrap}

/* link naar het gratis ontwerpvoorstel (/gratis-ontwerp/) */
.cf-voorstel{display:block;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#F4F8FF;border:1px solid #D7E3F7;color:#0F1218;font-size:.875rem;line-height:1.45;text-decoration:none}
.cf-voorstel:hover{border-color:#4433E6}.cf-voorstel strong{font-weight:800}

/* nfc-visitekaartjes.nl: geen sterren en geen blauw vlak bovenaan */
body::after{display:none}
body::before{background:var(--perzik);border-radius:0}

.kop-logo{--naad:#F4F4F6}
.kop-logo svg{width:50px;height:50px;margin:-8px -4px -8px -6px}
.kop-logo span{font-size:1.32rem!important}

/* configurator: zelfde donkere navbar als de site (1-11) */
.kop{background:#0B0D14!important;border-bottom:0!important}
.kop-logo,.kop-logo span{color:#fff!important}.kop-logo small{color:#8B90A0!important}
.kop-titel{color:#fff!important}.kop-terug{color:#D6D8E0!important}
.kop-logo{--naad:#0B0D14}