@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');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* lettertypen op de eigen server (fonts/), opgehaald van Google Fonts; OFL-licentie */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* TapSterren
   Eén systeem:
   - drie vlakken: warm wit (grond), perzik (accentvel) en diep petrol (hoofdstuk); kaarten zijn altijd wit
   - één actiekleur: koraal op licht, goud op petrol
   - één sectiekop: label met streepje, kop links, inleiding rechts
   - secties schuiven als afgeronde vellen over elkaar
   - terugkerend beeld: de uitgesneden kaarten en standaards, met gouden sterren eromheen */
:root{--r-klein:8px;--r-veld:12px;
  color-scheme:light;
  /* Merk (1-11-2026, werknaam Tapid): grafietinkt, wit, lichtgrijs en één actiekleur (indigo).
     De oude namen blijven bestaan omdat de hele winkelmotor ze gebruikt: petrol = inkt, perzik = lichte vlakken, koraal = actiekleur. */
  --petrol:#0F1218; --petrol-2:#1D222C; --petrol-3:#2D3441;
  --grond:#FFFFFF; --perzik:#F4F4F6; --perzik-diep:#E8E7EE; --perzik-rand:#D5D3DE;
  --koraal:#4433E6; --koraal-diep:#3323C2; --actie-tint:#EEEDFD;
  --goud:#4433E6; --goud-druk:#3323C2; --chip:#C9A24A;
  --tekst:#3B404C; --zacht:#5D6371; --wit:#FFFFFF; --lijn:#E5E5EB; --fout:#B3261E;
  --R:28px; --r:18px;
  --schaduw:0 1px 2px rgba(15,18,24,.05),0 24px 48px -30px rgba(15,18,24,.35);
  --schaduw-klein:0 1px 2px rgba(15,18,24,.06),0 8px 18px -12px rgba(15,18,24,.25);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --kopfont:'Schibsted Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --druk:'Fraunces',Georgia,serif;
  --band:clamp(64px,8vw,120px);
  --soepel:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:700px){:root{--R:30px;--r:18px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--grond);color:var(--tekst);font-family:var(--font);font-size:17px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
.sprite{position:absolute}
[hidden]{display:none!important}
a{color:var(--petrol);text-underline-offset:3px}
h1,h2,h3{color:var(--petrol);font-family:var(--kopfont);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,4.7vw,4.1rem);line-height:1.06;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.3vw,2.95rem);line-height:1.12;letter-spacing:-.03em}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.015em;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button,input{font:inherit;color:inherit}
strong,b{font-weight:700;color:var(--petrol)}
small{font-size:inherit}
.heel{white-space:nowrap}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--petrol);color:#fff;padding:12px 20px;border-radius:var(--r-veld);font-weight:700;text-decoration:none}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--koraal);outline-offset:3px;border-radius:var(--r-klein)}
.op-donker :focus-visible{outline-color:var(--goud)}
::selection{background:var(--goud);color:var(--petrol)}

.label{display:inline-flex;align-items:center;gap:12px;font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--koraal-diep);margin:0 0 1.1em}
.label::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;flex:none}
.lood{font-size:1.125rem;line-height:1.62;margin:0;max-width:34em}
.klein{font-size:.875rem;margin:0}
p a,dd a{font-weight:700;color:var(--koraal-diep)}
h2 + .lood{margin-top:1.1em}
mark{background:linear-gradient(transparent 60%,rgba(143,132,255,.6) 60%);color:inherit;padding:0 .08em}

/* ------------------------------------------------------------ knoppen: één vorm, pil met rondje-pijl */
.knop{--pijl:var(--koraal);display:inline-flex;align-items:center;justify-content:center;gap:.7em;white-space:nowrap;
  background:var(--koraal);color:#fff;font-weight:700;font-size:1rem;text-decoration:none;min-height:52px;padding:.8em 1.25em .8em 1.6em;
  border-radius:999px;border:1.5px solid var(--koraal);line-height:1.2;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background-color .18s,color .18s,border-color .18s}
.knop .kp{width:1.45em;height:1.45em;flex:none;color:#fff;transition:transform .25s var(--soepel)}
.knop:hover{transform:translateY(-2px);box-shadow:var(--schaduw-klein);background:var(--koraal-diep);border-color:var(--koraal-diep)}
.knop:hover .kp{transform:translateX(3px)}
.knop-lijn{--pijl:#fff;background:transparent;border-color:rgba(15,18,24,.4);color:var(--petrol)}
.knop-lijn .kp{color:var(--petrol)}
.knop-lijn:hover{background:var(--wit);border-color:var(--petrol);box-shadow:var(--schaduw-klein)}
.knop-klein{min-height:46px;padding:.6em 1em .6em 1.3em;font-size:.9375rem}
.knop-goud{--pijl:var(--goud);background:var(--goud);border-color:var(--goud);color:var(--petrol)}
.knop-goud .kp{color:var(--petrol)}
.knop-goud:hover{background:#FFC53A;border-color:#FFC53A;box-shadow:0 14px 24px -14px rgba(0,0,0,.7)}
.op-donker .knop-lijn{--pijl:var(--petrol);border-color:rgba(255,255,255,.5);color:#fff}
.op-donker .knop-lijn .kp{color:#fff}
.op-donker .knop-lijn:hover{--pijl:#fff;background:#fff;border-color:#fff;color:var(--petrol)}
.op-donker .knop-lijn:hover .kp{color:var(--petrol)}
.knop-prijs{font-weight:500;padding-left:.75em;border-left:1.5px solid rgba(255,255,255,.5)}
.knop-ic{width:1.6em;height:1.2em;flex:none}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}
.tekstknop{background:none;border:0;padding:12px 4px;min-height:44px;cursor:pointer;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:4px}

.rondknop{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1.5px solid rgba(15,18,24,.4);background:var(--wit);color:var(--petrol);cursor:pointer;transition:background-color .18s,opacity .18s,color .18s}
.rondknop svg{width:22px;height:22px}
.rondknop:hover{background:var(--petrol);color:#fff}
.rondknop:disabled{opacity:.35;cursor:default;background:var(--wit);color:var(--petrol)}

/* één kaartvorm */
.kaart{background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw)}

/* ------------------------------------------------------------ kop */
.kop{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.kop-in{display:flex;align-items:center;gap:28px;min-height:78px}
.merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--petrol)}
.merk-teken{display:block;width:50px;height:39px;flex:none;transition:transform .35s var(--soepel)}
.merk-teken svg{display:block;width:100%;height:100%}
.merk:hover .merk-teken{transform:rotate(-5deg)}
.merk{gap:10px}
.merk-naam{display:block;font-weight:800;font-size:1.44rem;letter-spacing:-.04em;line-height:1}
.merk-naam b{font-weight:800;color:inherit}
.merk-naam small{display:none}
.nav{display:flex;align-items:center;gap:24px;flex:1;justify-content:space-between}
.nav ul{display:flex;gap:2px;margin-left:10px}
.nav ul a{display:block;padding:12px 12px;text-decoration:none;font-weight:600;font-size:1rem;color:#1F2733;border-radius:999px;transition:background-color .15s}
.nav ul a:hover{background:var(--perzik)}
.nav-acties{display:flex;align-items:center;gap:4px}
.nav-klein{padding:12px 10px;text-decoration:none;font-size:.9375rem;font-weight:600;color:var(--zacht)}
.nav-klein:hover{color:var(--petrol);text-decoration:underline}
.nav-acties .knop{margin-left:10px}
.menuknop{display:none;margin-left:auto;align-items:center;gap:10px;min-height:48px;padding:10px 16px;background:var(--perzik);border:0;border-radius:999px;font-weight:700;color:var(--petrol);cursor:pointer}
.menuknop-streep,.menuknop-streep::before{display:block;width:18px;height:2px;background:var(--petrol);border-radius:2px;transition:transform .2s}
.menuknop-streep{position:relative;top:-3px}
.menuknop-streep::before{content:"";position:absolute;top:6px}
.menuknop[aria-expanded="true"] .menuknop-streep{transform:translateY(3px) rotate(45deg)}
.menuknop[aria-expanded="true"] .menuknop-streep::before{transform:translateY(-6px) rotate(-90deg)}

/* ------------------------------------------------------------ gouden sterren die door het beeld zweven */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.confetti i{position:absolute;color:var(--goud);animation:zweef 9s ease-in-out infinite}
.confetti svg{width:100%;height:100%}
.confetti i:nth-child(1){left:17%;top:-2%;width:54px;height:54px;rotate:18deg;filter:blur(5px);opacity:.75}
.confetti i:nth-child(2){left:71%;top:4%;width:62px;height:62px;rotate:-24deg;filter:blur(7px);opacity:.65;animation-delay:-2s}
.confetti i:nth-child(3){left:91%;top:34%;width:22px;height:22px;rotate:14deg;filter:blur(.4px);animation-delay:-4s}
.confetti i:nth-child(4){left:46%;bottom:3%;width:40px;height:40px;rotate:30deg;filter:blur(4px);opacity:.7;animation-delay:-3s}
.confetti i:nth-child(5){left:55%;top:16%;width:16px;height:16px;rotate:-10deg;animation-delay:-5s}
.confetti i:nth-child(6){left:4%;bottom:14%;width:26px;height:26px;rotate:-18deg;filter:blur(1.5px);opacity:.85;animation-delay:-6s}
@keyframes zweef{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* ------------------------------------------------------------ hero */
.hero{padding:10px 0 clamp(40px,5vw,72px)}
.hero-kaart{position:relative;width:min(1840px,100% - 40px);margin-inline:auto;border-radius:var(--R);
  background:
    radial-gradient(circle at 99% 4%,rgba(255,255,255,.55) 0 13%,transparent 13.2%),
    radial-gradient(circle at 73% 108%,rgba(255,255,255,.6) 0 30%,transparent 30.2%),
    linear-gradient(105deg,#E6E5EC 0%,#F1F1F4 46%,#E9E8EE 100%)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.160fr);gap:clamp(20px,4vw,64px);align-items:center;
  width:min(1200px,100% - 48px);margin-inline:auto;padding:clamp(36px,5vw,84px) 0 clamp(36px,5vw,84px)}
.hero h1{margin-bottom:.42em}
.hero:not(.bh) h1{font-size:clamp(2.350rem,4.200vw,3.700rem)}
.hero .lood{font-size:1.125rem;max-width:30em}
.hero .knoppen{margin-top:28px}
.hero-bewijs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:28px 0 0;font-size:.9375rem}
.sterren{display:inline-flex;gap:3px;color:var(--goud)}
.sterren svg{width:21px;height:21px;filter:drop-shadow(0 1px 0 rgba(150,95,0,.35))}
/* de producten zijn uitgesneden en steken onder het vlak uit */
.toonbank{position:relative;align-self:end;margin:0 -13% calc(-1 * clamp(36px,5vw,84px) - clamp(46px,6vw,92px)) -12%}
.toonbank img{width:100%}
/* de video "tik → review" (render/video): bij Hoe werkt het en op de productpagina's */
.tik-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(20px,3vw,32px);padding:clamp(18px,3vw,36px)}
.tik-tekst h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;letter-spacing:-.02em;color:var(--petrol);margin:8px 0 12px;text-wrap:balance}
.tik-tekst > p:not(.label){color:var(--zacht);max-width:46ch}
.tik-tekst .cta-zeker{margin-top:18px}
.tik-media{border-radius:calc(var(--r) - 4px);overflow:hidden;background:#D3E3FD}
@media (max-width:900px){.tik-blok{grid-template-columns:1fr}.tik-media{order:-1}}
.tik-video{display:block;width:100%;height:auto;aspect-ratio:1/1}
.aanzicht-video{display:grid;place-items:center}.aanzicht-video .tik-video{max-width:100%;border-radius:calc(var(--r) - 6px)}
.duimen button{position:relative}.duim-play{position:absolute;left:50%;top:38px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:rgba(15,18,24,.82)}.duim-play::after{content:'';position:absolute;left:11px;top:8px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff}
@media (max-width:560px){.duim-play{top:33px}}
.js .toonbank img{animation:hero-in 1s var(--soepel) both}
@keyframes hero-in{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

.zekerheden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(72px,8.5vw,128px);padding:6px 0}
.zekerheden li{padding:18px clamp(16px,2.4vw,30px);font-size:.9375rem;line-height:1.4}
.zekerheden li + li{border-left:1px solid var(--lijn)}
.zekerheden strong{display:block;font-size:1.0625rem;letter-spacing:-.01em}

/* ------------------------------------------------------------ banden en vellen */
.band{position:relative;padding:var(--band) 0}
.band-dicht{padding-top:clamp(28px,4vw,56px)}
.vel-perzik{--vlak:var(--perzik)}
.band:has(+ .vel),.hero:has(+ .vel){padding-bottom:calc(var(--band) + var(--R))}
.vel{border-radius:var(--R) var(--R) 0 0;margin-top:calc(-1 * var(--R));background:var(--grond)}
.vel-perzik{background-color:var(--perzik);
  background-image:
    radial-gradient(circle at 8% 112%,rgba(255,255,255,.5) 0 22%,transparent 22.15%),
    radial-gradient(circle at 97% 6%,rgba(255,255,255,.38) 0 13%,transparent 13.15%)}
#prijzen.vel-perzik,#faq.vel-perzik{background-image:
    radial-gradient(circle at 94% 114%,rgba(255,255,255,.5) 0 22%,transparent 22.15%),
    radial-gradient(circle at 3% 8%,rgba(255,255,255,.38) 0 12%,transparent 12.15%)}
.vel-donker{background:var(--petrol);
  background-image:
    radial-gradient(circle at 104% -6%,rgba(255,255,255,.05) 0 26%,transparent 26.15%),
    radial-gradient(circle at -4% 104%,rgba(255,255,255,.04) 0 24%,transparent 24.15%)}
.op-donker{color:#CBD8EC}
.op-donker h2,.op-donker h3,.op-donker strong{color:#fff}
.op-donker .label{color:var(--goud)}
.op-donker a:not(.knop){color:#fff}

.bandkop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px clamp(28px,6vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.bandkop .lood{padding-bottom:.3em;font-size:1rem}

/* ------------------------------------------------------------ kaartkiezer */
.kiezer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kies{position:relative;display:grid;gap:0;padding:8px 8px 0;border:0;background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw);cursor:pointer;text-align:center;
  transition:transform .2s,background-color .2s,color .2s}
.kies:hover{transform:translateY(-4px)}
.kies-beeld{display:grid;place-items:center;grid-template-rows:minmax(0,1fr);height:clamp(130px,15vw,190px);border-radius:calc(var(--r) - 6px);padding:12px;
  background:linear-gradient(160deg,#D2E3FD,#EEEDFD)}
.kies-beeld img{width:100%;height:100%;min-height:0;object-fit:contain;transition:transform .4s var(--soepel)}
.kies:hover .kies-beeld img{transform:scale(1.06) rotate(-2deg)}
.kies-naam{padding:16px 8px 16px;font-weight:700;font-size:1.0625rem;color:var(--petrol)}
.kies[aria-selected="true"]{background:var(--petrol)}
.kies[aria-selected="true"] .kies-naam{color:#fff}
.kies[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-11px;width:24px;height:24px;margin-left:-12px;background:var(--petrol);border-radius:4px;rotate:45deg}

.paneel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;margin-top:24px;padding:clamp(16px,2.6vw,34px)}
.js .paneel:not([hidden]){animation:paneel-in .45s var(--soepel) both}
@keyframes paneel-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.paneel-beeld{position:relative;display:grid;place-items:center;grid-template-rows:minmax(0,1fr);height:clamp(300px,34vw,440px);padding:24px 24px 76px;border-radius:calc(var(--r) - 4px);
  background:radial-gradient(circle at 82% 96%,rgba(255,255,255,.7) 0 34%,transparent 34.2%),linear-gradient(150deg,#CADEFD,#EEEDFD)}
.paneel-beeld > img{width:100%;height:100%;min-height:0;object-fit:contain;transition:opacity .2s}
.paneel-beeld-pasje > img{width:min(88%,500px);height:auto}
.vlag{position:absolute;z-index:2;top:18px;left:18px;margin:0;background:var(--goud);color:var(--petrol);font-weight:700;font-size:.875rem;padding:6px 12px;border-radius:999px}
.kleur{position:absolute;left:18px;bottom:16px;display:flex;gap:6px;border:0;margin:0;padding:4px;background:var(--wit);border-radius:999px;box-shadow:var(--schaduw-klein)}
.kleur input{position:absolute;opacity:0;width:1px;height:1px}
.kleur label{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px 6px 8px;border-radius:999px;font-size:.9375rem;font-weight:700;color:var(--petrol);cursor:pointer;border:2px solid transparent}
.kleur input:checked + label{border-color:var(--petrol);background:var(--perzik)}
.kleur input:focus-visible + label{outline:3px solid var(--koraal);outline-offset:2px}
.staal{width:22px;height:22px;border-radius:50%;border:1.5px solid #8A919B}
.staal-wit{background:#fff}
.staal-zwart{background:#17191A;border-color:#17191A}
.paneel-voorna{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;gap:12px;padding:12px;align-items:stretch;height:auto;min-height:clamp(300px,34vw,440px)}
.paneel-voorna figure{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;border-radius:var(--r);padding:16px 8px 6px;
  background:rgba(255,255,255,.42)}
.paneel-voorna img{width:100%;max-width:300px;transition:transform .5s var(--soepel)}
.paneel-voorna figure:hover img{transform:translateY(-6px)}
.paneel-voorna figcaption{align-self:flex-start;white-space:nowrap;margin:0 0 auto 8px;padding:6px 12px;border-radius:999px;background:var(--wit);font-weight:700;font-size:.875rem;color:var(--zacht);box-shadow:var(--schaduw-klein)}
.paneel-voorna .na{background:linear-gradient(160deg,#B1CAF0,#CFE2FE);box-shadow:0 0 0 2px var(--koraal)}
.paneel-voorna .na figcaption{background:var(--koraal);color:#fff}
.voorna-pijl{position:absolute;z-index:2;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;padding:10px;border-radius:50%;background:var(--petrol);color:var(--goud);
  box-shadow:0 0 0 5px #D8E7FE}
.paneel-tekst{padding:clamp(4px,1.4vw,18px) clamp(4px,1.4vw,18px) clamp(4px,1.4vw,18px) 0}
.paneel-tekst h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.025em;margin-bottom:.5em}
.vinklijst{margin:20px 0 0;display:grid;gap:10px}
.vinklijst li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-weight:600;color:var(--petrol)}
.vinklijst svg{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--perzik-diep);color:var(--koraal-diep);margin-top:2px}
.paneel-voet{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--lijn)}
.prijs{margin:0;display:grid;line-height:1.25}
.prijs span,.prijs small{font-size:.875rem;color:var(--zacht);font-weight:500}
.prijs strong{font-size:2.5rem;font-weight:800;line-height:1.1;letter-spacing:-.04em}

.snel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 0;font-size:.9375rem}
.snel strong{margin-right:6px}
.snel a,.snel span{display:inline-flex;align-items:center;min-height:42px;padding:8px 16px;border-radius:999px;background:var(--wit);box-shadow:var(--schaduw-klein);text-decoration:none;font-weight:600;color:var(--petrol);transition:background-color .15s,color .15s}
.snel a:hover{background:var(--petrol);color:#fff}
.snel span{background:var(--perzik);box-shadow:none;font-weight:500;color:var(--tekst)}
.snel-breed{margin-top:32px}
.snel-breed a{background:var(--petrol);color:#fff}
.snel-breed a:hover{background:var(--koraal)}

/* ------------------------------------------------------------ collectie: kant-en-klare ontwerpen */
.ontwerp-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.ontwerp-kop .tabs{margin:0;background:var(--wit);box-shadow:var(--schaduw-klein);flex-wrap:wrap;border-radius:var(--r);max-width:100%}
.ontwerp-kop{align-items:flex-start}
.ontwerp-kop .tabs button{padding-inline:16px}
.ontwerp-kop .tabs button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.ontwerp-kop .tabs span{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--perzik);color:var(--koraal-diep);font-size:.8125rem;font-weight:800}
.ontwerp-kop .tabs [aria-pressed="true"] span{background:rgba(255,255,255,.18);color:#fff}
.ontwerpen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ontwerpen[data-filter="pasje"]{grid-template-columns:repeat(3,minmax(0,1fr))}
/* in een gemengd overzicht krijgt elk beeldvlak dezelfde hoogte, zodat de rijen strak lopen */
#collectie:not([data-filter="pasje"]):not([data-filter="staand"]) .ontwerp-beeld{aspect-ratio:1/1.06}
#collectie:not([data-filter="pasje"]) .ontwerp-beeld-pasje{padding:10% 7%}
#collectie:not([data-filter="staand"]) .ontwerp-beeld-staand{padding:6% 16%}
#collectie[data-filter="standaard"] h3 small,#collectie[data-filter="pasje"] h3 small,#collectie[data-filter="staand"] h3 small{display:none}
.js #collectie .ontwerp:not([hidden]){animation:paneel-in .4s var(--soepel) both}
.ontwerp{display:flex;flex-direction:column;padding:8px 8px 0;transition:transform .25s var(--soepel),box-shadow .25s}
.ontwerp:hover{transform:translateY(-5px)}
.ontwerp-beeld{display:grid;place-items:end center;grid-template-rows:minmax(0,1fr);aspect-ratio:1/1.06;padding:7% 2% 1%;border-radius:calc(var(--r) - 6px);overflow:hidden;
  background:radial-gradient(circle at 86% 102%,rgba(255,255,255,.55) 0 40%,transparent 40.3%),linear-gradient(160deg,#CFCBF5,#ECEBFB)}
.ontwerp:nth-child(even) .ontwerp-beeld{background:radial-gradient(circle at 10% 2%,rgba(255,255,255,.5) 0 30%,transparent 30.3%),linear-gradient(200deg,#BDD2F2,#ECEBFB)}
.ontwerp-beeld img{width:100%;height:100%;min-height:0;object-fit:contain;object-position:50% 100%;transition:transform .5s var(--soepel),opacity .18s}
.ontwerp-beeld-pasje{aspect-ratio:1/.72;place-items:center;padding:5% 6%}
.ontwerp-beeld-pasje img{object-position:50% 55%}
.ontwerp-beeld-staand{aspect-ratio:1/1.3;place-items:center;padding:5% 6%}
.ontwerp-beeld-staand img{object-position:50% 50%}
.ontwerp:hover .ontwerp-beeld img{transform:scale(1.04)}
.ontwerp-tekst{display:flex;flex-direction:column;flex:1;padding:16px 10px 12px}
.ontwerp-tekst h3{font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.ontwerp-tekst h3 small{display:inline-block;margin-left:6px;font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--zacht);background:var(--perzik);padding:2px 8px;border-radius:999px;vertical-align:2px}
.tp-uitleg{margin:0 0 16px;max-width:46em;font-size:1rem}
.ontwerp-tekst p{margin:3px 0 0;font-size:.875rem;line-height:1.45;color:var(--zacht)}
.ontwerp-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-top:auto;padding-top:12px}
.stalen{display:flex;gap:2px;border:0;margin:0 0 0 -6px;padding:0}
.stalen input{position:absolute;opacity:0;width:1px;height:1px}
.stalen label{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.stalen input:checked + label{border-color:var(--petrol)}
.stalen input:focus-visible + label{outline:3px solid var(--koraal);outline-offset:2px}
.kies-link{--pijl:#fff;display:inline-flex;align-items:center;gap:8px;min-height:40px;font-weight:700;font-size:.9375rem;color:var(--koraal-diep);text-decoration:none;white-space:nowrap}
.kies-link .kp{width:26px;height:26px;color:var(--koraal);flex:none;transition:transform .25s var(--soepel)}
.kies-link:hover{text-decoration:underline}
.kies-link:hover .kp{transform:translateX(4px)}

/* ------------------------------------------------------------ waarom reviews */
.waarom{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5.4fr);gap:clamp(32px,6vw,96px);align-items:center}
table.factoren{margin:32px 0 0;border-collapse:separate;border-spacing:0;font-size:.9375rem;line-height:1.5}
.factoren th,.factoren td{text-align:left;vertical-align:top;padding:16px 12px 16px 0;border-top:1px solid var(--lijn)}
.factoren thead th{border-top:0;padding-block:0 10px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
.factoren tbody th{font-weight:800;font-size:1.0625rem;color:var(--petrol);white-space:nowrap;padding-right:20px}
.factoren td:last-child{width:31%;padding-right:0;color:var(--zacht);font-size:.875rem}
.invloed{display:block;font-weight:800;font-size:1rem;color:var(--petrol)}
.factor-jij > *{background:var(--perzik);border-top-color:transparent}
.factor-jij > :first-child{border-radius:var(--r) 0 0 var(--r);padding-left:16px}
.factor-jij > :last-child{border-radius:0 var(--r) var(--r) 0;padding-right:16px!important}
.factor-jij .invloed{color:var(--koraal-diep)}
.factoren tbody tr:not(.factor-jij) > :first-child{padding-left:16px}
.google-citaat{margin:24px 0 0;padding:0 0 0 16px;position:relative}
.google-citaat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--goud)}
.google-citaat p{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.5;color:var(--petrol)}
.google-citaat footer{margin-top:6px;font-size:.875rem}
.google-citaat a{font-weight:700;color:var(--koraal-diep)}
/* AI-assistenten en reviews: twee feiten met bron, in grijze kaartjes zoals de rest van de site */
.ai-feiten{margin-top:32px}
.ai-feiten h3{margin:0 0 12px;font-size:1.0625rem;font-weight:800;color:var(--petrol)}
.ai-feiten ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.ai-feiten li{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-veld);background:linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.ai-feiten li p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--tekst)}
.ai-feiten li strong{color:var(--petrol);font-weight:800}
.ai-feiten li a{margin-top:auto;font-size:.8125rem;font-weight:700;color:var(--koraal-diep)}
.ai-feiten li small{font-size:.75rem;color:var(--zacht)}
.ai-slot{margin:12px 0 0;font-size:.9375rem;line-height:1.5;color:var(--zacht)}
@media (max-width:700px){.ai-feiten ul{grid-template-columns:minmax(0,1fr)}}

.lokaal{position:relative;padding:clamp(18px,3vw,38px);border-radius:var(--R);
  background:radial-gradient(circle at 100% 0,rgba(255,255,255,.6) 0 26%,transparent 26.2%),linear-gradient(150deg,#BDD2F2,#F1F1F4)}
.lokaal > div{background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw);padding:12px}
.lokaal p{margin:0}
.zoek{display:flex;align-items:center;gap:12px;background:#F3F5F7;border-radius:999px;padding:12px 16px;font-weight:600;color:var(--petrol)}
.zoek svg{width:20px;height:20px;color:var(--zacht);flex:none}
.plattegrond{position:relative;height:clamp(110px,13vw,150px);margin-top:12px;border-radius:var(--r-veld);overflow:hidden}
.plattegrond svg{width:100%;height:100%}
.pin{position:absolute;width:22px;height:22px;margin:-22px 0 0 -11px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#97A0AD;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.pin-jij{width:40px;height:40px;margin:-40px 0 0 -20px;background:var(--koraal);display:grid;place-items:center;color:#fff;box-shadow:var(--schaduw-klein)}
.pin-jij svg{width:19px;height:19px;rotate:45deg}
.anim .waarom-beeld.zien .pin-jij{animation:pin-val .7s var(--soepel) .15s both}
@keyframes pin-val{from{opacity:0;translate:0 -26px}60%{translate:0 3px}to{opacity:1;translate:0 0}}
.resultaten{margin-top:6px}
.resultaat{display:flex;align-items:center;gap:12px;padding:12px 8px;border-top:1px solid #ECEEF1}
.res-tekst{display:grid;gap:3px;flex:1;min-width:0}
.resultaat b{font-size:1rem;font-weight:700;color:#555D6A}
.res-score{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--zacht);font-variant-numeric:tabular-nums}
.res-score i{font-style:normal;font-weight:700}
.res-score .sterren svg{width:15px;height:15px;filter:none}
.resultaat:not(.resultaat-jij) .sterren{color:#D9C08A}
.res-balk{display:block;height:7px;border-radius:999px;background:#ECEEF1;margin-top:4px;overflow:hidden}
.res-balk i{display:block;height:100%;width:var(--b);border-radius:999px;background:#B3B9C3;transform-origin:0 50%}
/* jouw bedrijf steekt buiten het venster uit: dat is het hele verhaal in één beeld */
.resultaat-jij{position:relative;z-index:1;margin:8px -26px 6px;padding:16px 20px;border:0;border-radius:var(--r);background:var(--wit);
  box-shadow:0 0 0 2px var(--koraal),var(--schaduw)}
.resultaat-jij + .resultaat{border-top:0}
.resultaat-jij b{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
.resultaat-jij .res-score{font-size:.9375rem}
.resultaat-jij .res-score .sterren svg{width:18px;height:18px}
.resultaat-jij .res-balk{height:9px;background:var(--perzik)}
.resultaat-jij .res-balk i{background:var(--koraal)}
.res-onder{font-size:.875rem;color:var(--zacht);margin-top:4px}
.res-onder strong{font-size:1rem;font-variant-numeric:tabular-nums}
.resultaat-jij img{width:21%;flex:none;margin:-34px -4px -22px 0}
.anim .waarom-beeld:not(.zien) .resultaat-jij .res-balk i{transform:scaleX(.05)}
.anim .resultaat-jij .res-balk i{transition:transform 1.5s var(--soepel) .2s}
.waarom-noot{margin:12px 6px 0;font-size:.8125rem;line-height:1.5;color:var(--zacht)}

/* ------------------------------------------------------------ platformen */
.platformen{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;margin-top:clamp(24px,3vw,40px);border-radius:var(--R)}
.platformen-beeld{position:relative;display:grid;place-items:center;padding:clamp(18px,3vw,36px);
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.07) 0 34%,transparent 34.2%),var(--petrol)}
.platformen-beeld img{width:min(100%,500px);height:auto;filter:drop-shadow(0 26px 24px rgba(0,0,0,.4))}
.platformen-tekst{padding:clamp(22px,3.6vw,52px)}
.platformen h3{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.45em}
.platformen-tekst > p:not(.label){margin:0}
.platform-lijst{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.platform-lijst li{padding:6px 16px;border-radius:999px;background:var(--perzik);font-weight:700;font-size:.9375rem;color:var(--petrol)}
.platform-lijst .klaar{background:var(--petrol);color:#fff}
.platform-lijst .klaar::after{content:none}
.platform-lijst .klaar{padding:0}
.platform-lijst .klaar a{display:block;padding:6px 16px;border-radius:999px;color:#fff;text-decoration:none}
.platform-lijst .klaar a:hover{background:var(--petrol-3)}
@media (min-width:900px){.platformen{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}.platformen-tekst{align-self:center}}

/* ------------------------------------------------------------ hoe werkt het: vier stapkaarten op één lijn */
.route-stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:stap}
.stap{position:relative;display:flex;flex-direction:column;padding:8px 8px 0}
/* pijltje naar de volgende stap, op de naad tussen twee kaarten */
.stap:not(:last-child)::after{content:"";position:absolute;z-index:2;right:-26px;top:clamp(92px,10vw,128px);width:32px;height:32px;border-radius:50%;
  background:var(--petrol) center/15px 15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23F4B21B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:0 0 0 5px var(--perzik)}
.stap-beeld{position:relative;display:grid;place-items:center;aspect-ratio:1/.92;border-radius:calc(var(--r) - 6px);overflow:hidden;
  background:radial-gradient(circle at 88% 104%,rgba(255,255,255,.55) 0 40%,transparent 40.3%),linear-gradient(160deg,#CFCBF5,#ECEBFB)}
.stap:nth-child(even) .stap-beeld{background:radial-gradient(circle at 10% 0,rgba(255,255,255,.5) 0 32%,transparent 32.3%),linear-gradient(200deg,#BDD2F2,#ECEBFB)}
.stap-tekst{position:relative;padding:24px 12px 20px;flex:1}
.stap-nr{position:absolute;left:12px;top:-20px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--petrol);color:var(--goud);
  font-weight:800;font-size:1.0625rem;box-shadow:0 0 0 4px var(--wit)}
.stap h3{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.35em}
.stap p{margin:0;font-size:.9375rem;line-height:1.58}

.sb-ontwerp{place-items:end center;grid-template-rows:minmax(0,1fr);padding:9% 6% 2%}
.sb-ontwerp img{width:100%;height:100%;min-height:0;object-fit:contain;object-position:50% 100%}
.sb-stalen{position:absolute;right:12px;top:12px;display:flex;gap:4px;padding:6px;background:var(--wit);border-radius:999px;box-shadow:var(--schaduw-klein)}
.sb-stalen .staal{width:18px;height:18px}
.sb-stalen .staal-wit{box-shadow:0 0 0 2px var(--petrol);border-color:#fff}

.mini{width:84%;background:var(--wit);border-radius:var(--r-veld);box-shadow:var(--schaduw);padding:12px 12px 12px;font-size:.8125rem;line-height:1.35;color:var(--zacht)}
.mini p{margin:0}
.mini-label{font-weight:700;color:var(--petrol);margin-bottom:8px!important}
.mini-veld{display:flex;align-items:center;gap:8px;border:1.5px solid var(--koraal);border-radius:var(--r-klein);padding:8px 10px;font-weight:600;color:var(--petrol)}
.mini-veld svg{width:15px;height:15px;color:var(--zacht);flex:none}
.mini-veld i{width:1.5px;height:15px;background:var(--koraal);margin-left:-5px;animation:knipper 1.1s steps(1) infinite}
@keyframes knipper{50%{opacity:0}}
.mini-treffer{display:flex;align-items:center;gap:10px;margin-top:8px!important;padding:8px 8px 8px 6px;border-radius:var(--r-klein);background:var(--perzik)}
.mini-treffer .pin{position:static;margin:0 2px 0 4px;width:22px;height:22px;flex:none}
.mini-treffer .pin svg{width:11px;height:11px}
.mini-treffer > span:nth-child(2){flex:1;display:grid}
.mini-treffer b{font-size:.875rem}
.mini-treffer > svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--petrol);color:var(--goud);flex:none}
.mini-klaar{display:flex;align-items:center;gap:6px;margin-top:10px!important;font-weight:700;color:var(--koraal-diep)}
.mini-klaar svg{width:15px;height:15px}

.sb-bezorg{align-content:center;gap:10px;padding:8% 8% 9%}
.sb-bezorg img{width:92%;rotate:-6deg}
.mini-status{display:grid;grid-template-columns:repeat(3,1fr);width:100%;background:var(--wit);border-radius:var(--r-veld);box-shadow:var(--schaduw-klein);padding:12px 6px 10px}
.mini-status li{position:relative;padding-top:20px;text-align:center;font-size:.75rem;font-weight:700;color:var(--zacht)}
.mini-status li::before{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--petrol);z-index:1}
.mini-status li + li::after{content:"";position:absolute;right:50%;top:5px;width:100%;height:2px;background:var(--petrol)}
.mini-status .nu{color:var(--koraal-diep)}
.mini-status .nu::before{background:var(--koraal);box-shadow:0 0 0 4px rgba(29,95,214,.22)}

.sb-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 22%}
.mini-melding{position:absolute;left:10px;right:10px;bottom:10px;margin:0;display:grid;grid-template-columns:1fr auto;gap:1px 10px;align-items:center;
  background:var(--wit);border-radius:var(--r-veld);padding:10px 12px;box-shadow:var(--schaduw);font-size:.8125rem;color:var(--zacht)}
.mini-melding .sterren{grid-column:1/-1}
.mini-melding .sterren svg{width:15px;height:15px;filter:none}
.mini-melding b{font-size:.9375rem}
.anim .stap.zien .mini-melding{animation:melding .6s var(--soepel) .5s both}
@keyframes melding{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.stap-knoppen{margin-top:32px}

/* ------------------------------------------------------------ demo */
.demo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,90px);align-items:center}
.demo-form{margin-top:32px;display:grid;gap:10px;max-width:430px;justify-items:start}
.demo-form label{font-weight:700;color:#fff}
.demo-form input,.demo-form .knop{width:100%}
.demo-form .knop{margin-top:8px;min-height:58px;font-size:1.0625rem}
input[type=text],input[type=email],input[type=url]{min-height:54px;padding:12px 16px;background:var(--wit);color:var(--petrol);border:1.5px solid #7A8390;border-radius:var(--r-veld);font-size:1rem;transition:border-color .15s}
input[type=text]:hover,input[type=email]:hover,input[type=url]:hover{border-color:var(--petrol)}
input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=url]:focus-visible{outline:3px solid var(--koraal);outline-offset:2px;border-color:var(--koraal)}
.op-donker input:focus-visible{outline-color:var(--goud);border-color:var(--goud)}
::placeholder{color:#666E79;opacity:1}
.demo-stappen{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:28px;font-size:.9375rem;font-weight:600;color:#B3C0D3}
.demo-stappen li{display:flex;align-items:center;gap:8px;transition:color .25s}
.demo-stappen span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid #7F8DA3;font-size:.875rem;font-weight:800;transition:background-color .25s,color .25s,border-color .25s}
.demo-stappen li.aan{color:#fff}
.demo-stappen li.aan span{background:var(--goud);border-color:var(--goud);color:var(--petrol)}

.podium{position:relative;container-type:inline-size;aspect-ratio:1/1.02;max-width:600px;width:100%;margin-inline:auto;
  background:radial-gradient(circle at 16% 8%,rgba(255,255,255,.75) 0 20%,transparent 20.2%),linear-gradient(150deg,#CADEFD,#EEEDFD);
  border-radius:var(--R);box-shadow:0 40px 70px -40px rgba(0,0,0,.7);overflow:hidden}
.podium-vloer{position:absolute;left:0;right:0;bottom:0;height:20%;background:rgba(255,255,255,.72);border-top:1px solid var(--perzik-rand)}
.podium-wrap{min-width:0}
.podium-noot{margin:16px 0 0;text-align:center;font-size:.875rem;color:#B3C0D3}
.bordje,.telefoon,.vonk{font-size:clamp(9.2px,2.62cqi,15.6px)}
.bordje{position:absolute;left:7%;bottom:12%;width:16.5em;color:#10231F;line-height:1.5}
.bordje-paneel{position:relative;z-index:1;background:var(--wit);border-radius:.8em;padding:1.7em 1.5em 1.4em;text-align:center;
  transform-origin:50% 100%;transform:perspective(60em) rotateX(3deg) rotateY(10deg);
  box-shadow:0 0 0 1px rgba(15,18,24,.1),var(--schaduw-klein)}
.bordje-paneel::before{content:"";position:absolute;inset:.6em;border:1px solid var(--goud-druk);border-radius:.45em;opacity:.75;pointer-events:none}
.bordje-voet{position:absolute;left:9%;right:-10%;bottom:-.95em;height:1.8em;background:#F6F8FB;border-radius:.4em;transform:skewX(-40deg);box-shadow:0 0 0 1px rgba(15,18,24,.1),var(--schaduw-klein)}
.bordje-foto{left:0;bottom:9.500%;width:19.500em}
.bordje-foto img{width:100%}
.tikpunt{position:absolute;left:57.500%;top:34%;width:5.400em;height:5.400em;margin:-2.700em 0 0 -2.700em}
.bordje p{margin:0}
.bordje-naam{font-weight:800;font-size:1.2em;line-height:1.15;letter-spacing:-.02em;min-height:2.3em;display:grid;place-items:center;overflow-wrap:anywhere}
.bordje-sterren{display:flex;justify-content:center;gap:.22em;color:var(--goud-druk);margin:.35em 0 .8em!important}
.bordje-sterren svg{width:1.05em;height:1.05em}
.bordje-zone{position:relative;width:5.2em;height:5.2em;margin:0 auto;border-radius:50%;border:.2em solid var(--goud-druk);display:grid;place-items:center}
.bordje-zone > svg{width:2.7em;height:2.02em}
.golf{position:absolute;inset:-.2em;border-radius:50%;border:.14em solid var(--koraal);opacity:0}
.podium[data-staat="rust"] .golf{animation:golf 2.6s ease-out infinite}
.podium[data-staat="rust"] .golf:nth-child(2){animation-delay:.85s}
.podium[data-staat="rust"] .golf:nth-child(3){animation-delay:1.7s}
.podium[data-staat="tik"] .golf{animation:golf .7s ease-out 3}
.podium[data-staat="tik"] .golf:nth-child(2){animation-delay:.14s}
.podium[data-staat="tik"] .golf:nth-child(3){animation-delay:.28s}
@keyframes golf{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.bordje-tik{font-size:.56em;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--goud-druk);margin-top:.8em!important}
.bordje-kop{font-family:var(--druk);font-weight:600;font-size:1.36em;line-height:1.15;margin-top:.45em!important}
.bordje-onder{display:flex;align-items:center;justify-content:center;gap:.8em;margin-top:1em;padding-top:1em;border-top:1px solid var(--goud-druk);font-size:.66em;line-height:1.35;color:#566;text-align:left}
.bordje-onder b{display:block;color:#10231F}
.bordje-qr{width:3.9em;height:3.9em;flex:none}

.telefoon{position:absolute;right:4%;bottom:6%;width:15em;height:30.5em;padding:.6em;background:#101C1E;border-radius:2.5em;color:var(--tekst);line-height:1.5;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,var(--schaduw-klein);transition:transform .65s var(--soepel);z-index:2}
.podium[data-staat="tik"] .telefoon{transform:translate(-46%,-6%) rotate(-9deg)}
.telefoon-scherm{position:relative;height:100%;background:var(--wit);border-radius:1.95em;overflow:hidden}
.telefoon-scherm::before{content:"";position:absolute;z-index:3;top:.55em;left:50%;width:4.4em;height:1.15em;margin-left:-2.2em;background:#101C1E;border-radius:1em}
.scherm{position:absolute;inset:0;padding:2.6em 1.1em 1.1em;display:flex;flex-direction:column}
.scherm p{margin:0}
.scherm strong{color:var(--petrol)}
.js .scherm:not([hidden]){animation:scherm-in .4s var(--soepel) both}
@keyframes scherm-in{from{opacity:0;transform:translateY(1.2em)}to{opacity:1;transform:none}}
.scherm-rust{background:var(--perzik);align-items:center;text-align:center}
.klok{font-weight:800;font-size:3.5em;line-height:1;letter-spacing:-.05em;color:var(--petrol);margin-top:.7em!important}
.klok-dag{font-size:.85em;color:var(--zacht);margin-top:.4em!important}
.hint{margin-top:auto!important;margin-bottom:1.2em!important;display:grid;justify-items:center;gap:.7em;font-weight:700;font-size:.95em;color:var(--koraal-diep)}
.hint svg{width:3em;height:2.25em}
.adresbalk{display:flex;align-items:center;justify-content:center;gap:.45em;background:var(--perzik);border-radius:1em;padding:.5em .8em;font-size:.76em;font-weight:700;color:var(--zacht)}
.adresbalk svg{width:1.15em;height:1.15em}
.zaak{display:flex;align-items:center;gap:.7em;margin-top:1.3em}
.zaak-letter{display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;background:var(--petrol);color:var(--goud);font-weight:800;flex:none}
.zaak p{font-size:.9em;line-height:1.3;overflow-wrap:anywhere}
.zaak p span{font-size:.86em;color:var(--zacht)}
.sterkeuze{border:0;padding:0;margin:1.5em 0 0;min-width:0}
.sterkeuze legend{padding:0;font-weight:800;font-size:1.02em;color:var(--petrol);margin-bottom:.6em}
.sterkeuze-rij{display:flex;justify-content:space-between}
.sterkeuze input{position:absolute;opacity:0;width:1px;height:1px}
.sterkeuze label{display:grid;place-items:center;width:2.5em;height:2.5em;min-width:24px;min-height:24px;cursor:pointer;color:var(--wit);border-radius:.5em}
.sterkeuze label svg{width:2.1em;height:2.1em;stroke:#7A8390;stroke-width:1.5;stroke-linejoin:round;transition:transform .2s var(--soepel),color .15s}
.sterkeuze label:hover svg{transform:scale(1.12)}
.sterkeuze label.vol{color:var(--goud)}
.sterkeuze label.vol svg{stroke:#B98300}
.sterkeuze label.plop svg{animation:plop .35s var(--soepel)}
@keyframes plop{50%{transform:scale(1.35) rotate(12deg)}}
.sterkeuze input:focus-visible + label{outline:3px solid var(--koraal);outline-offset:1px}
.nepveld{margin-top:1.2em!important;border:1.5px solid var(--lijn);border-radius:.8em;padding:.8em .9em 2.6em;font-size:.86em;color:var(--zacht)}
.plaats{margin-top:auto;min-height:max(2.9em,34px);border:0;border-radius:999px;background:var(--koraal);color:#fff;font-weight:800;font-size:.98em;cursor:pointer;transition:background-color .2s}
.plaats:hover{background:var(--koraal-diep)}
.plaats:disabled{background:var(--perzik-diep);color:var(--zacht);cursor:not-allowed}
.scherm-klaar{align-items:center;justify-content:center;text-align:center;gap:.6em}
.klaar-vink{display:grid;place-items:center;width:4.6em;height:4.6em;border-radius:50%;background:var(--petrol);color:var(--goud)}
.klaar-vink svg{width:2.5em;height:2.5em}
.js .scherm-klaar:not([hidden]) .klaar-vink{animation:plop .5s var(--soepel)}
.klaar-kop{font-weight:800;font-size:1.7em;letter-spacing:-.03em;color:var(--petrol);margin-top:.4em!important}
.klaar-tekst{font-size:.92em;color:var(--zacht);line-height:1.4;overflow-wrap:anywhere}
.vonk{position:absolute;z-index:3;right:calc(6% + 7.5em);bottom:calc(6% + 17em);width:26px;height:26px;margin:-13px;color:var(--goud);pointer-events:none;animation:vonk 1.1s var(--soepel) both}
.vonk svg{width:100%;height:100%}
@keyframes vonk{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s)) rotate(var(--r))}}

/* ------------------------------------------------------------ voor wie */
.branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.branche{display:flex;flex-direction:column;padding:8px 8px 24px;text-decoration:none;color:inherit;transition:transform .2s}
.branche:hover{transform:translateY(-5px)}
.branche figure{overflow:hidden;border-radius:calc(var(--r) - 6px);margin-bottom:20px;position:relative}
.branche figure .br-product{position:absolute;bottom:4%;width:auto;height:58%;aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.42));transition:transform .5s var(--soepel)}
.branche figure{aspect-ratio:4/3.3;background:radial-gradient(ellipse 62% 14% at 50% 93%,rgba(20,36,60,.16),transparent 70%),radial-gradient(circle at 12% 4%,rgba(255,255,255,.55) 0 28%,transparent 28.4%),linear-gradient(200deg,#BDD2F2,#ECEBFB)}
.branche figure .br-l{left:6%;transform:rotate(-8deg);z-index:1}.branche figure .br-r{right:6%;transform:rotate(8deg);z-index:1}.branche figure .br-m{left:50%;height:70%;bottom:2%;transform:translateX(-50%);z-index:2}
.branche:hover figure .br-l{transform:rotate(-10deg) translate(-4px,-4px)}.branche:hover figure .br-r{transform:rotate(10deg) translate(4px,-4px)}.branche:hover figure .br-m{transform:translateX(-50%) translateY(-6px)}
@media (max-width:560px){.branche figure .br-l,.branche figure .br-r{display:none}.branche figure .br-m{height:72%}}
.branche img{width:100%;aspect-ratio:4/3.3;object-fit:cover;transition:transform .6s var(--soepel)}
.branche:hover img{transform:scale(1.05)}
.branche h3,.branche p,.branche .meer{margin-inline:16px}
.branche h3{margin-bottom:.4em}
.branche p{font-size:.9375rem;margin-bottom:1.2em}
.ook-voor{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;margin:24px 0 0;padding:20px 20px 20px 28px;background:var(--perzik);border-radius:var(--r);font-size:1rem}
.ook-voor .knop{flex:none}
.meer{--pijl:#fff;display:inline-flex;align-items:center;gap:10px;margin-top:auto;font-weight:700;color:var(--koraal-diep)}
.meer .kp{width:26px;height:26px;color:var(--koraal);transition:transform .25s var(--soepel)}
.branche:hover .meer .kp{transform:translateX(4px)}

/* ------------------------------------------------------------ prijzen */
.prijzen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.routes{display:grid;gap:12px;margin:32px 0 24px}
.route{--pijl:#fff;display:grid;grid-template-columns:86px minmax(0,1fr) 30px;gap:16px;align-items:center;padding:10px 20px 10px 10px;text-decoration:none;color:inherit;transition:transform .2s}
.route:hover{transform:translateY(-3px)}
.route img{width:86px;height:86px;object-fit:contain;padding:8px;border-radius:calc(var(--r) - 8px);background:linear-gradient(160deg,#D2E3FD,#EEEDFD)}
.route span{font-size:.9375rem;line-height:1.5}
.route strong{display:block;font-size:1.0625rem}
.route em{display:block;font-style:normal;font-weight:700;color:var(--koraal-diep);margin-top:2px}
.route .kp{width:30px;height:30px;color:var(--koraal);transition:transform .25s var(--soepel)}
.route:hover .kp{transform:translateX(4px)}

.staffel{padding:clamp(14px,2.2vw,30px)}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--perzik);border-radius:999px;margin-bottom:12px}
.tabs button{min-height:46px;padding:10px 20px;border:0;border-radius:999px;background:transparent;font-weight:700;color:var(--petrol);cursor:pointer}
.tabs button[aria-selected="true"],.tabs button[aria-pressed="true"]{background:var(--petrol);color:#fff}
.tabs button:not([aria-selected="true"]):not([aria-pressed="true"]):hover{background:var(--wit)}
.filter button:not([aria-pressed="true"]):hover{background:var(--perzik)!important}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.staffel th,.staffel td{text-align:left;padding:16px 10px;border-bottom:1px solid var(--lijn);vertical-align:top;white-space:nowrap}
.staffel thead th{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);padding-block:12px}
.staffel tbody th{font-weight:700;color:var(--petrol)}
.staffel tbody tr:last-child > *{border-bottom:0}
.staffel td small{display:block;font-size:.8125rem;color:var(--zacht);white-space:normal}
.staffel td:nth-child(2){font-weight:800;color:var(--petrol)}
.korting{display:inline-block;background:var(--perzik);color:var(--koraal-diep);font-weight:800;padding:3px 10px;border-radius:999px;font-size:.9375rem}
.populair > *{background:#FFF3CF}
.populair > :first-child{border-radius:var(--r-veld) 0 0 var(--r-veld)}
.populair > :last-child{border-radius:0 var(--r-veld) var(--r-veld) 0}
.populair .korting{background:var(--wit)}
.pop{display:inline-block;margin-left:8px;font-size:.75rem;font-weight:800;background:var(--goud);color:var(--petrol);padding:2px 8px;border-radius:999px;vertical-align:2px}

/* ------------------------------------------------------------ dashboard */
.dash{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.dash-beeld{border-radius:var(--R);padding:clamp(20px,4vw,56px) clamp(16px,3.4vw,48px);
  background:radial-gradient(circle at 96% 4%,rgba(255,255,255,.6) 0 18%,transparent 18.2%),linear-gradient(150deg,#CADEFD,#EEEDFD)}
.venster{background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw);padding:8px clamp(16px,2.4vw,30px) 14px;rotate:-1.4deg}
.venster p{margin:0}
.venster-kop{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--lijn)}
.venster .merk{font-weight:800;font-size:1rem;gap:6px;letter-spacing:-.03em}
.venster .merk b{color:var(--koraal);font-weight:800}
.venster .merk-ster{width:18px;height:18px;color:var(--goud)}
.venster-tab{font-size:.8125rem;font-weight:700;color:var(--petrol);background:var(--perzik);padding:4px 12px;border-radius:999px}
.venster-rij{padding:20px 0;border-bottom:1px solid var(--lijn)}
.venster-rij:last-child{border-bottom:0}
.veldnaam{font-size:.8125rem;font-weight:700;color:var(--zacht);margin-bottom:8px!important;display:flex;justify-content:space-between}
.veldnaam i{font-style:normal;font-weight:500}
.nepinput{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1.5px solid var(--lijn);border-radius:var(--r-veld);padding:10px 8px 10px 12px;font-size:.875rem;color:var(--petrol)}
.nepinput span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nepinput b{background:var(--koraal);color:#fff;font-size:.8125rem;padding:6px 12px;border-radius:999px;flex:none}
.staven{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);height:150px;padding-bottom:24px}
.staven span{position:relative;flex:1;height:var(--h);background:var(--perzik-diep);border-radius:var(--r-klein) var(--r-klein) 3px 3px;transform-origin:50% 100%}
.staven span.top{background:var(--petrol)}
.staven b{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:.75rem;font-weight:700;color:var(--zacht)}
/* alleen plat beginnen als het script bevestigd heeft dat het de staven ook weer uitklapt */
.anim .dash-beeld:not(.zien) .staven span{transform:scaleY(.05)}
.js .staven span{transition:transform .8s var(--soepel)}
.js .staven span:nth-child(2){transition-delay:.06s}.js .staven span:nth-child(3){transition-delay:.12s}
.js .staven span:nth-child(4){transition-delay:.18s}.js .staven span:nth-child(5){transition-delay:.24s}
.js .staven span:nth-child(6){transition-delay:.3s}.js .staven span:nth-child(7){transition-delay:.36s}
.venster-locaties p:not(.veldnaam){display:flex;align-items:center;gap:12px;font-size:.875rem;font-weight:700;color:var(--petrol);padding:4px 0}
.venster-locaties img{width:46px;height:42px;object-fit:contain;background:var(--perzik);border-radius:var(--r-klein);padding:4px;flex:none}
.venster-locaties b{margin-left:auto;font-weight:500;color:var(--zacht);font-size:.8125rem}

.punt{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--koraal);color:#fff;font-style:normal;font-weight:800;font-size:.8125rem;flex:none}
.veldnaam span{display:inline-flex;align-items:center;gap:8px}
.veldnaam em{font-style:normal;font-weight:500}
.venster-locaties .veldnaam{padding:0!important}
.feiten{margin:32px 0 0}
.feiten > div{display:grid;grid-template-columns:36px 1fr;gap:2px 16px;padding:16px 0;border-top:1px solid var(--lijn)}
.feiten .punt{grid-row:span 2;width:36px;height:36px;font-size:1rem;margin-top:2px}
.geen-abo{margin:6px 0 0;padding:20px 24px;background:var(--perzik);border-radius:var(--r);font-size:1rem}
.geen-abo strong{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:.15em}
.feiten dt{font-weight:700;font-size:1.0625rem;color:var(--petrol);line-height:1.3}
.feiten dd{margin:0;font-size:.9375rem;line-height:1.6}

.vel-donker .feiten > div{border-top-color:rgba(255,255,255,.16)}
.vel-donker .feiten dt{color:#fff}
.vel-donker .geen-abo{background:var(--petrol-2);box-shadow:none}
.vel-donker .dash-beeld{box-shadow:0 40px 70px -40px rgba(0,0,0,.7)}

/* ------------------------------------------------------------ vergelijking: twee kaarten tegenover elkaar */
.versus{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
.vs{position:relative;display:flex;flex-direction:column;border-radius:var(--R);overflow:hidden}
.vs-wij{box-shadow:0 0 0 2px var(--koraal),var(--schaduw)}
.vs-zij{background:rgba(255,255,255,.5);border:2px dashed var(--perzik-rand)}
.vs-beeld{position:relative;height:clamp(200px,24vw,290px);overflow:hidden;
  background:radial-gradient(circle at 100% 0,rgba(255,255,255,.6) 0 28%,transparent 28.2%),linear-gradient(150deg,#CFCBF5,#ECEBFB)}
.vs-stand{position:absolute;left:8%;bottom:-6%;height:104%;width:auto}
.vs-pas{position:absolute;right:5%;bottom:9%;width:44%}
.vs-tik{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:8px;background:var(--wit);border-radius:999px;padding:8px 12px;font-size:.875rem;font-weight:700;color:var(--petrol);box-shadow:var(--schaduw-klein)}
.vs-tik svg{width:26px;height:20px;color:var(--koraal)}
.vs-beeld-grijs{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#E9EDF2 0 14px,#E2E7EF 14px 28px)}
.sticker{display:grid;justify-items:center;gap:8px;width:clamp(112px,13vw,150px);padding:12px 12px 10px;background:#fff;border-radius:var(--r-klein);rotate:-5deg;box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 18px -10px rgba(0,0,0,.3);filter:grayscale(1)}
.sticker img{width:100%;height:auto;opacity:.82}
.sticker b{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6B6F75}
.vs-tekst{display:flex;flex-direction:column;flex:1;padding:clamp(22px,3vw,38px)}
.vs-label{margin:0 0 4px;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--koraal-diep)}
.vs-zij .vs-label{color:var(--zacht)}
.vs h3{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:800;letter-spacing:-.025em}
.vs-zij h3{color:#555D6A}
.vs-lijst{display:grid;gap:0;margin:16px 0 0}
.vs-lijst li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--lijn);font-weight:600;color:var(--petrol)}
.vs-lijst .ja,.vs-lijst .nee{width:30px;height:30px}
.vs-zij .vs-lijst li{border-top-color:#D3DCE9}
.vs-lijst .niet{color:#7A8088;font-weight:500}
.vs-lijst .niet > span:last-child{text-decoration:line-through;text-decoration-color:#B0B9C6}
.vs-voet{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid var(--lijn)}
.vs-noot{margin:auto 0 0;padding-top:16px;border-top:1px solid #D3DCE9;font-size:.9375rem;line-height:1.55;color:var(--zacht)}
.vs-of{justify-self:center;display:grid;place-items:center;width:52px;height:52px;margin:-8px 0;border-radius:50%;background:var(--petrol);color:var(--goud);font-weight:800;font-size:1rem;box-shadow:0 0 0 6px var(--perzik);z-index:1}
@media (min-width:900px){
  .versus{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:28px}
  .vs-of{position:absolute;left:53.300%;top:50%;margin:-26px 0 0 -26px}
  .vs-zij{margin-block:24px}
}
.ja,.nee{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%}
.ja{background:var(--petrol);color:var(--goud)}
.ja-zacht{background:transparent;color:var(--petrol);box-shadow:inset 0 0 0 2px var(--petrol)}
.nee{color:#7A8088;box-shadow:inset 0 0 0 2px #CACFD7}
.ja svg,.nee svg{width:18px;height:18px}

/* ------------------------------------------------------------ ervaringen */
.ervaringen{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px}
.quote{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,34px)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:1rem;line-height:1.65;color:var(--petrol)}
.quote blockquote p::before{content:"“"}.quote blockquote p::after{content:"”"}
.quote-sterren{display:flex;gap:3px;color:var(--goud);margin:0 0 12px}
.quote-sterren svg{width:20px;height:20px}
.quote figcaption{margin-top:auto;padding-top:20px;font-size:.875rem;line-height:1.45}
.quote figcaption strong{display:block;font-size:1rem}
.quote-rij{display:grid;gap:20px}
.quote-groot{position:relative;overflow:hidden;padding:clamp(28px,4vw,56px);justify-content:center;
  background:radial-gradient(circle at 100% 0,rgba(210,227,252,.75) 0 30%,transparent 30.2%),var(--wit)}
.quote-groot .quote-sterren svg{width:28px;height:28px}
.quote-groot blockquote p{font-weight:700;font-size:clamp(1.4rem,2.5vw,2.05rem);line-height:1.28;letter-spacing:-.025em}
.quote-groot figcaption{margin-top:28px;padding:24px 36% 0 0;border-top:1px solid var(--lijn)}
.quote-product{position:absolute;right:2%;bottom:-3%;width:25%}

/* ------------------------------------------------------------ boost: de drie treden */
.boost{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:clamp(28px,4vw,56px);padding:clamp(26px,4.6vw,64px);padding-bottom:0;border-radius:var(--R);overflow:hidden;
  background:radial-gradient(circle at 104% -6%,rgba(255,255,255,.06) 0 30%,transparent 30.2%),var(--petrol)}
.boost-tekst{position:relative;padding-bottom:clamp(8px,2vw,24px)}
.boost h2{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.boost-tekst > p:not(.label){margin:16px 0 24px;font-size:1.0625rem;max-width:30em}
.trap{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;padding-top:130px}
.trap li{position:relative;display:grid;align-content:start;gap:2px;padding:16px 12px 16px;border-radius:var(--r) var(--r) 0 0;background:var(--petrol-2);color:#CBD8EC;height:178px}
.trap li:nth-child(2){height:222px;background:var(--petrol-3)}
.trap li:nth-child(3){height:266px;background:var(--goud);color:var(--petrol)}
.trap span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:.875rem;margin-bottom:6px}
.trap b{font-size:1rem;font-weight:800;color:#fff;line-height:1.2}
.trap small{font-size:.8125rem;line-height:1.35}
.trap li:nth-child(3) span{background:var(--petrol);color:var(--goud)}
.trap li:nth-child(3) b{color:var(--petrol)}
.trap img{position:absolute;left:50%;bottom:calc(100% - 14px);width:min(86%,150px);translate:-46% 0}
.anim .boost:not(.zien) .trap li{translate:0 100%}
.anim .trap li{transition:translate .7s var(--soepel)}
.anim .trap li:nth-child(2){transition-delay:.12s}.anim .trap li:nth-child(3){transition-delay:.24s}
@media (min-width:900px){
  .boost{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
  .boost-tekst{padding-bottom:clamp(26px,4.6vw,64px)}
  .trap{gap:12px}
  .trap li{padding:20px 16px;height:150px}
  .trap li:nth-child(2){height:200px}
  .trap li:nth-child(3){height:250px}
  .trap b{font-size:1.125rem}
}

/* ------------------------------------------------------------ vragen */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"kop vragen" "lev vragen";gap:32px clamp(32px,6vw,96px);align-items:start}
.faq-kop{grid-area:kop}
.vragen{grid-area:vragen}
.faq .levering{grid-area:lev}
.vragen{display:grid;gap:12px}
details{background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw-klein);transition:box-shadow .2s}
details[open]{box-shadow:var(--schaduw)}
summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 20px 20px 24px;cursor:pointer;list-style:none;font-weight:700;font-size:1.0625rem;line-height:1.35;color:var(--petrol);border-radius:var(--r)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:var(--perzik) center/14px 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%230B2A5B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:transform .25s var(--soepel)}
details[open] summary::after{transform:rotate(45deg)}
summary:hover{color:var(--koraal-diep)}
details p{margin:0;padding:0 70px 24px 24px;font-size:1rem}
.levering{padding:24px 24px 10px}
.levering h3{margin-bottom:10px}
.levering dl{margin:0}
.levering dl > div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--lijn);font-size:.9375rem}
.levering dt{font-weight:700;color:var(--petrol)}
.levering dd{margin:0}

/* ------------------------------------------------------------ slotband: schuine rand, de kaarten hangen eroverheen; loopt door in de voet */
.cta-band{padding:clamp(48px,7vw,100px) 0 clamp(48px,6vw,90px)}
.cta-kaart{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch;padding:clamp(12px,1.200vw,16px);border-radius:var(--R)}
.cta-tekst{align-self:center;padding:clamp(22px,3.6vw,56px) 0 clamp(22px,3.6vw,56px) clamp(14px,3.6vw,56px)}
.cta-kaart h2{font-size:clamp(2rem,3.6vw,3.1rem);margin-bottom:.4em}
.cta-kaart p:not(.label){margin:0 0 1.7em;font-size:1.0625rem;max-width:30em}
.cta-zeker{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding:20px 0 0;list-style:none;border-top:1px solid var(--lijn);font-size:.9375rem;font-weight:600;color:var(--petrol)}
.cta-zeker li{display:inline-flex;align-items:center;gap:8px}
.cta-zeker svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--perzik-diep);color:var(--koraal-diep);flex:none}
.cta-beeld{position:relative;display:grid;place-items:center;min-height:clamp(260px,30vw,440px);padding:clamp(14px,2.4vw,36px);border-radius:calc(var(--R) - 12px);overflow:hidden;
  background:radial-gradient(ellipse 60% 16% at 50% 90%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.cta-beeld img{width:100%;max-width:600px;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%);mask-image:linear-gradient(90deg,transparent,#000 9%);transition:transform .6s var(--soepel)}
.cta-kaart:hover .cta-beeld img{transform:scale(1.03)}

.voet{background:var(--petrol);padding:0 0 28px;font-size:.9375rem;border-radius:var(--R) var(--R) 0 0;position:relative;margin-top:calc(-1 * var(--R))}
.cta-band{padding-bottom:calc(clamp(48px,6vw,90px) + var(--R))}
main:has(+ .voet) > .band:last-child{padding-bottom:calc(var(--band) + var(--R))}
main:has(+ .voet) > .wp{padding-bottom:calc(clamp(60px,9vw,120px) + var(--R))}
.voet-kolommen{display:grid;grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1fr));gap:32px 48px;padding-block:clamp(44px,5.400vw,72px) clamp(36px,4.6vw,60px)}
.voet .merk-teken{filter:none}
.voet .merk-naam{color:#fff}
.voet .merk-naam b{color:inherit}
.voet-merk > p{margin:16px 0 0;max-width:36em;font-size:.9375rem}
.voet h3{font-size:1rem;margin-bottom:12px}
.voet-kolommen ul{display:grid;gap:2px}
.voet-kolommen li a{display:inline-block;padding:6px 0;text-decoration:none;color:#DFE7F4}
.voet-kolommen li a:hover{text-decoration:underline;color:#fff}
.voet-kolommen li:not(:has(a)){padding:6px 0}
.nieuwsbrief{margin-top:28px;max-width:440px}
.nieuwsbrief label{display:block;margin-bottom:12px;font-size:.9375rem}
.nieuwsbrief label strong{display:block;font-size:1.0625rem}
.nieuwsbrief-rij{display:flex;gap:8px}
.nieuwsbrief-rij input{flex:1;min-width:0;border-color:transparent}
.nieuwsbrief .klein{font-size:.8125rem;margin-top:12px;color:#B3C0D3}
.nieuwsbrief .klein a{color:#DFE7F4;font-weight:600}
.betalen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-block:20px;border-top:1px solid rgba(255,255,255,.16)}
.betalen p{margin:0;font-size:.9375rem}
.betalen ul{display:flex;flex-wrap:wrap;gap:8px}
.betalen img{width:56px;height:42px;border-radius:var(--r-klein)}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:.875rem;color:#B3C0D3}
.voet-onder p{margin:0}
.voet-onder ul{display:flex;flex-wrap:wrap;gap:6px 24px}
.voet-onder a{color:#CBD8EC!important;display:inline-block;padding:4px 0}

/* ------------------------------------------------------------ productpagina (mobiel eerst) */
.kruimel{padding:12px 0 10px;font-size:.875rem;color:var(--zacht)}
.kruimel ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.kruimel li:not(:last-child)::after{content:"›";margin-left:8px;color:#97A0AD}
.kruimel a{color:var(--zacht);text-underline-offset:3px}
.kruimel a:hover{color:var(--petrol)}
.kruimel [aria-current]{color:var(--petrol);font-weight:600}

.product{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:clamp(48px,6vw,88px)}
.productpagina main > .wrap:first-child{padding-bottom:var(--R)}
.galerij-groot{position:relative;aspect-ratio:1/1;border-radius:var(--R);overflow:hidden;
  background:radial-gradient(circle at 100% 0,rgba(255,255,255,.6) 0 24%,transparent 24.2%),radial-gradient(circle at 12% 108%,rgba(255,255,255,.55) 0 34%,transparent 34.2%),linear-gradient(150deg,#CFCBF5,#ECEBFB)}
/* zelfde rustige productvlak als de tegels in de categorie */
.galerij-groot{background:radial-gradient(ellipse 62% 20% at 50% 93%,rgba(20,36,60,.12),transparent 70%),linear-gradient(180deg,#F2F4F7,#E2E6EB)}
.duimen img{background:#EBEDF0}
.klanten{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.klant{overflow:hidden;padding:8px 8px 0}
.klant img{width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:calc(var(--r) - 6px)}
.klant figcaption{display:grid;gap:4px;padding:16px 12px 16px;font-size:.875rem;color:var(--zacht)}
.klant blockquote{margin:2px 0 8px}
.klant blockquote p{margin:0;font-size:1rem;line-height:1.550;color:var(--petrol)}
.klant strong{font-size:1rem}
@media (min-width:700px){.klanten{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.aanzicht{position:absolute;inset:0;display:grid;place-items:center;grid-template-rows:minmax(0,1fr);padding:7% 6% 5%}
.aanzicht > img{width:100%;height:100%;min-height:0;object-fit:contain}
.js .aanzicht:not([hidden]){animation:paneel-in .35s var(--soepel) both}
.plat{position:relative;width:74%;box-shadow:var(--schaduw);border-radius:2.6% / 2.2%;overflow:hidden;line-height:0}
.plat-pasje{width:88%;border-radius:4.2% / 6.5%}
.plat-staand{width:52%;border-radius:6% / 3.8%}
.plat > img{width:100%;height:auto}
.plat-achter{container-type:inline-size;font-family:'Poppins',var(--font)}
.achter-label{position:absolute;left:50%;top:60.6%;translate:-50% -50%;rotate:-5deg;padding:1.900cqw 6.400cqw 2.100cqw;border-radius:2.200cqw;background:#fff;line-height:1.2;white-space:nowrap}
.achter-label span{font-size:7.300cqw;font-weight:800;letter-spacing:-.01em;color:#E4226F}
.achter-onder{position:absolute;left:0;right:0;bottom:7.200%;text-align:center;font-size:4cqw;font-weight:500;line-height:1.3;color:#fff}
.zone{position:absolute;display:grid;place-items:center;overflow:hidden;line-height:1.1;font-weight:800;letter-spacing:-.01em;text-align:center}
.zone-rond{border-radius:50%}
.zone-kapitaal{font-weight:700;letter-spacing:.18em}
.zone img{width:86%;height:86%;object-fit:contain}
.zone-rond img{width:70%;height:70%}
.zone span{white-space:nowrap}
.duimen{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin-inline:-2px}.duimen::-webkit-scrollbar{display:none}.duimen button{flex:none}
@media (max-width:560px){.duimen{gap:8px}.duimen button{width:80px}.duimen img{height:54px}}
.duimen button{display:grid;justify-items:center;gap:6px;width:96px;padding:6px 6px 8px;border:2px solid transparent;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw-klein);cursor:pointer;
  font-size:.75rem;font-weight:700;color:var(--zacht)}
.duimen img{width:100%;height:62px;object-fit:contain;border-radius:var(--r-klein);background:var(--perzik);padding:4px}
.duimen [aria-selected="true"]{border-color:var(--petrol);color:var(--petrol)}

.koop h1{font-size:clamp(2rem,3.5vw,2.9rem);line-height:1.08}
.koop h1 span{display:block;font-size:.5em;font-weight:600;letter-spacing:-.01em;color:var(--zacht);margin-top:.45em}
.koop .label{margin-bottom:.8em}
.koop .lood{margin-top:16px;font-size:1rem}
.koop h2{font-size:1.0625rem;font-weight:800;letter-spacing:-.015em}
.productprijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:20px 0 0}
.productprijs strong{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.productprijs span{font-size:.9375rem;color:var(--zacht)}

.kleurkeuze,.pers,.aantal{border:0;margin:0;padding:20px 0 0;margin-top:20px;border-top:1px solid var(--lijn);min-width:0}
.kleurkeuze legend,.aantal > label{float:left;width:100%;padding:0;margin-bottom:10px;font-weight:700;color:var(--petrol)}
.kleurkeuze legend strong{font-weight:500;color:var(--zacht)}
.kleurkeuze div{clear:both;display:flex;gap:8px}
.kleurkeuze input{position:absolute;opacity:0;width:1px;height:1px}
.kleurkeuze label{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px 8px 10px;border-radius:999px;background:var(--wit);box-shadow:var(--schaduw-klein);border:2px solid transparent;font-weight:700;color:var(--petrol);cursor:pointer}
.kleurkeuze .staal{width:26px;height:26px}
.kleurkeuze input:checked + label{border-color:var(--petrol)}
.kleurkeuze input:focus-visible + label{outline:3px solid var(--koraal);outline-offset:2px}

.pers legend{padding:0;float:left;width:100%}
.pers-uitleg{clear:both;margin:4px 0 12px;font-size:.9375rem;color:var(--zacht)}
.pers-geen p{margin:6px 0 0;font-size:.9375rem}
.pers-keuze{display:inline-flex;gap:4px;padding:4px;background:var(--perzik);border-radius:999px;margin-bottom:12px}
.pers-keuze input{position:absolute;opacity:0;width:1px;height:1px}
.pers-keuze label{min-height:42px;display:grid;place-items:center;padding:8px 16px;border-radius:999px;font-weight:700;font-size:.9375rem;color:var(--petrol);cursor:pointer}
.pers-keuze input:checked + label{background:var(--petrol);color:#fff}
.pers-keuze input:focus-visible + label{outline:3px solid var(--koraal);outline-offset:2px}
.upload{display:flex;align-items:center;gap:12px;padding:16px 16px;border:2px dashed #99A8BE;border-radius:var(--r);background:var(--wit);cursor:pointer;transition:border-color .15s,background-color .15s}
.upload:hover{border-color:var(--koraal);background:#F3F8FF}
.upload svg{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--perzik);color:var(--koraal-diep);flex:none}
.upload strong{display:block;overflow-wrap:anywhere}
.upload small{display:block;font-size:.8125rem;color:var(--zacht);line-height:1.4}
#logo-bestand:focus-visible ~ .tekstknop,.upload:has(+ #logo-bestand:focus-visible){outline:3px solid var(--koraal);outline-offset:2px}
.tekstknop-donker{color:var(--koraal-diep);padding-block:8px}
.pers-paneel label[for=pers-tekst],.pers-achter label{display:block;font-weight:700;color:var(--petrol);font-size:.9375rem;margin-bottom:6px}
.pers-lagen label:not(.upload){display:block;font-weight:700;color:var(--petrol);font-size:.9375rem;margin:12px 0 6px}
.pers-lagen label:first-child{margin-top:0}
.pers-lagen .upload{margin-top:16px}
.plat:has(.lagen){container-type:inline-size}
.lagen{position:absolute;inset:0;pointer-events:none}
.laag{position:absolute;translate:-50% 0;line-height:1;white-space:nowrap;text-transform:uppercase}
.laag[hidden],.laag-logo[hidden]{display:none}
.laag-logo{position:absolute;translate:-50% 0;object-fit:contain}
.pers-achter{margin-top:16px;padding-top:16px;border-top:1px solid var(--lijn)}
.pers-achter label:not(:first-child){margin-top:12px}
.pers-achter label i{font-style:normal;font-weight:500;color:var(--zacht)}
.pers-paneel input[type=text]{width:100%}
.pers-paneel .klein{margin-top:6px}

.linkveld{margin-top:20px;padding-top:20px;border-top:1px solid var(--lijn)}
.linkveld-rij{position:relative}
.linkveld input{width:100%;padding-right:50px}
.link-ok{position:absolute;right:12px;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--petrol);color:var(--goud)}
.link-ok svg{width:16px;height:16px}
.linkveld[data-staat="goed"] input{border-color:var(--petrol)}
.linkveld[data-staat="fout"] input{border-color:var(--fout);border-width:2px}
.link-status{margin:6px 0 0;font-size:.875rem;min-height:1.4em;color:var(--zacht)}
.linkveld[data-staat="fout"] .link-status{color:var(--fout);font-weight:700}
.linkveld[data-staat="goed"] .link-status{color:var(--petrol);font-weight:600}
.link-hulp{background:none;box-shadow:none;border-radius:0}
.link-hulp summary{display:inline-flex;padding:6px 0;font-size:.9375rem;font-weight:700;color:var(--koraal-diep);text-decoration:underline;text-underline-offset:3px;border-radius:var(--r-klein)}
.link-hulp summary::after{display:none}
.link-hulp p{padding:6px 0 0;font-size:.9375rem}
.aantal{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 16px}
.aantal > label{float:none;width:auto;margin:0}
.stapper{display:inline-flex;align-items:center;justify-self:start;background:var(--wit);border-radius:999px;box-shadow:var(--schaduw-klein);padding:4px}
.stapper button{width:44px;height:44px;border:0;border-radius:50%;background:var(--perzik);color:var(--petrol);font-size:1.4rem;font-weight:700;line-height:1;cursor:pointer}
.stapper button:hover{background:var(--petrol);color:#fff}
.stapper button:disabled{opacity:.4;cursor:default;background:var(--perzik);color:var(--petrol)}
.stapper input{width:64px;min-height:44px;border:0;background:none;text-align:center;font-weight:800;font-size:1.125rem;color:var(--petrol);-moz-appearance:textfield;border-radius:var(--r-klein)}
.stapper input::-webkit-outer-spin-button,.stapper input::-webkit-inner-spin-button{-webkit-appearance:none}
.aantal .klein{grid-column:1/-1}

.erbij{display:grid;grid-template-columns:76px minmax(0,1fr) 30px;gap:12px;align-items:center;margin-top:20px;padding:10px 16px 10px 10px;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.erbij input{position:absolute;opacity:0;width:1px;height:1px}
.erbij img{width:76px;height:76px;object-fit:contain;padding:6px;border-radius:calc(var(--r) - 8px);background:linear-gradient(160deg,#D2E3FD,#EEEDFD)}
.erbij small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--koraal-diep)}
.erbij strong{display:block;line-height:1.3}
.erbij em{font-style:normal;font-weight:700;color:var(--zacht);font-size:.9375rem}
.erbij-vink{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid #97A0AD;color:transparent}
.erbij-vink svg{width:16px;height:16px}
.erbij.aan{border-color:var(--petrol)}
.erbij.aan .erbij-vink{background:var(--petrol);border-color:var(--petrol);color:var(--goud)}
.erbij:has(input:focus-visible){outline:3px solid var(--koraal);outline-offset:2px}

.totaal{margin-top:20px;padding-top:16px;border-top:1px solid var(--lijn)}
.totaal p{display:flex;justify-content:space-between;align-items:baseline;margin:0;font-size:.9375rem;color:var(--zacht)}
.totaal-som{margin-top:4px!important;color:var(--petrol)!important;font-weight:700;font-size:1.0625rem!important}
.totaal-som strong{font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.knop-koop{width:100%;min-height:60px;margin-top:16px;font-size:1.125rem}
.koop-zeker{display:grid;gap:8px;margin-top:16px;font-size:.9375rem}
.koop-zeker li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center}
.koop-zeker svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--perzik-diep);color:var(--koraal-diep)}

.details{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.mini-stappen{display:grid;gap:12px;margin-top:24px}
.mini-stappen li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;font-weight:600;color:var(--petrol)}
.mini-stappen span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--petrol);color:var(--goud);font-weight:800}
.specs{border-collapse:separate;border-spacing:0;overflow:hidden}
.specs th,.specs td{text-align:left;vertical-align:top;padding:16px 20px;border-bottom:1px solid var(--lijn);font-size:.9375rem}
.specs th{width:34%;font-weight:700;color:var(--petrol);white-space:nowrap}
.specs tr:last-child > *{border-bottom:0}

.combi{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.combi-beeld{position:relative;aspect-ratio:1.5;border-radius:var(--R);
  background:radial-gradient(circle at 0 100%,rgba(255,255,255,.6) 0 30%,transparent 30.2%),linear-gradient(150deg,#BDD2F2,#F1F1F4)}
.combi-beeld img{position:absolute;object-fit:contain}
.combi-beeld img:first-child{left:6%;top:6%;width:50%;height:86%}
.combi-beeld img:last-child{right:5%;bottom:8%;width:44%;height:62%}
.combi .knoppen{margin-top:24px}
.combi-beeld,.vel-perzik .combi-beeld{background:radial-gradient(ellipse 70% 16% at 50% 92%,rgba(20,36,60,.12),transparent 70%),linear-gradient(180deg,#E9EDF3,#D9DFE8);box-shadow:var(--schaduw)}
.combi-beeld img{filter:drop-shadow(0 10px 14px rgba(20,36,60,.16))}
.koop-zeker a{color:var(--petrol);font-weight:700}
.productpagina #dashboard{scroll-margin-top:80px}

.verwant{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
a.ontwerp{text-decoration:none;color:inherit}
a.ontwerp .ontwerp-tekst{display:grid;gap:2px;padding:12px 8px 12px}
a.ontwerp strong{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}
a.ontwerp small{font-size:.8125rem;color:var(--zacht)}
.productpagina .bestelbalk > span > span{display:block;font-weight:700;color:var(--koraal-diep)}

@media (min-width:900px){
  .product{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
  .galerij{position:sticky;top:96px}
  .details{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
  .combi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
  .verwant{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
}

/* ------------------------------------------------------------ branchepagina's (mobiel eerst) */
.bh .kruimel{padding:16px 0 0}
.bh-in{grid-template-columns:minmax(0,1fr);padding-top:20px;padding-bottom:0}
.h1-klein{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--koraal-diep);margin-bottom:1em}
.bh h1{font-size:clamp(2.2rem,4.6vw,3.9rem)}
.br-zeker{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;font-size:.9375rem;font-weight:600;color:var(--petrol)}
.br-zeker li{display:flex;align-items:center;gap:8px}
.br-zeker svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--wit);color:var(--koraal-diep)}
/* het toneel: de foto als boog op de achtergrond, de kaarten groot ervoor */
.bh-toneel{position:relative;aspect-ratio:1/.9;margin:8px -2% calc(-1 * clamp(34px,6vw,70px)) 0}
.bh-foto{position:absolute;right:0;top:0;width:66%;height:84%;object-fit:cover;border-radius:999px 999px var(--r) var(--r);box-shadow:var(--schaduw)}
.bh-held{position:absolute;left:0;bottom:0;width:58%;height:auto}
.bh-held-pasje{width:66%;bottom:6%}
.bh-tweede{position:absolute;right:2%;bottom:3%;width:40%;height:auto}
.bh-tweede-stand{width:36%;bottom:0}
.bh-label{position:absolute;left:2%;top:6%;display:grid;gap:1px;padding:12px 16px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw);text-decoration:none;line-height:1.3;transition:transform .2s}
.bh-label:hover{transform:translateY(-3px)}
.bh-label small{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--koraal-diep)}
.bh-label strong{font-size:1rem}
.bh-label span{font-size:.875rem;color:var(--zacht)}
.bh + .band{padding-top:clamp(72px,9vw,130px)}

.branchepagina section[id]{scroll-margin-top:70px}
.zoektermen{margin:16px 0 0;font-size:.9375rem;line-height:2;color:var(--zacht)}
.zoektermen span{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--perzik);font-weight:600;color:var(--petrol)}
.vel-perzik .lokaal{background:radial-gradient(circle at 100% 0,rgba(255,255,255,.7) 0 26%,transparent 26.2%),linear-gradient(150deg,#B1CAF0,#CFE2FE)}
@media (min-width:900px){
}
.plekken{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.plek{display:grid;grid-template-columns:40% minmax(0,1fr);padding:8px;overflow:hidden}
.plek-beeld{display:grid;place-items:end center;grid-template-rows:minmax(0,1fr);min-height:170px;padding:10% 4% 2%;border-radius:calc(var(--r) - 6px);
  background:radial-gradient(circle at 86% 102%,rgba(255,255,255,.55) 0 40%,transparent 40.3%),linear-gradient(160deg,#CFCBF5,#ECEBFB)}
.plek-beeld img{width:100%;height:100%;min-height:0;object-fit:contain;object-position:50% 100%;transition:transform .4s var(--soepel)}
.plek-beeld-pasje{place-items:center;padding:8%}
.plek-beeld-pasje img{object-position:50% 55%}
.plek:hover .plek-beeld img{transform:scale(1.05)}
.plek-tekst{padding:10px 8px 10px 16px}
.plek-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--petrol);color:var(--goud);font-weight:800;margin-bottom:10px}
.plek h3{font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.plek p{margin:4px 0 0;font-size:.9375rem;line-height:1.55}
.plek-formaat{margin-top:12px!important;padding-top:10px;border-top:1px solid var(--lijn);font-size:.875rem!important;color:var(--zacht)}

.tijdlijn{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.tijdlijn li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:2px 16px;align-items:center;padding:12px 0;color:#B3C0D3}
.tijdlijn li::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:var(--petrol-3)}
.tijdlijn li:first-child::before{top:50%}
.tijdlijn li:last-child::before{bottom:50%}
.tijdlijn span{position:relative;justify-self:center;width:14px;height:14px;border-radius:50%;background:var(--petrol-3);box-shadow:0 0 0 4px var(--petrol)}
.tijdlijn b{color:#CBD8EC;font-weight:600;font-size:1rem}
.tijdlijn .piek span{width:28px;height:28px;background:var(--goud);box-shadow:0 0 0 5px rgba(143,132,255,.25)}
.tijdlijn .piek b{color:#fff;font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.tijdlijn small{grid-column:2;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--goud)}
.tijdlijn-uitleg{display:grid;gap:16px;justify-items:start;margin-top:28px;padding:20px 24px;border-radius:var(--r);background:var(--petrol-2)}
.tijdlijn-uitleg p{margin:0;max-width:40em}

.uitgelicht{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;padding:8px}
.uitgelicht-beeld{display:grid;place-items:end center;grid-template-rows:minmax(0,1fr);height:clamp(260px,36vw,430px);padding:8% 6% 2%;border-radius:calc(var(--r) - 6px);
  background:radial-gradient(circle at 100% 0,rgba(255,255,255,.6) 0 26%,transparent 26.2%),radial-gradient(circle at 10% 106%,rgba(255,255,255,.55) 0 36%,transparent 36.2%),linear-gradient(150deg,#CFCBF5,#ECEBFB)}
.uitgelicht-beeld img{width:100%;height:100%;min-height:0;object-fit:contain;object-position:50% 100%}
.uitgelicht-beeld-pasje{place-items:center;padding:8% 10%}
.uitgelicht-beeld-pasje img{object-position:50% 55%}
.uitgelicht-tekst{padding:clamp(18px,3vw,40px)}
.vlag-los{position:static;display:inline-block;margin:0 0 12px}
.uitgelicht h3{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.4em}
.uitgelicht-tekst > p:not(.vlag){margin:0}
.br-producten{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.br-producten .ontwerp-beeld{aspect-ratio:1/1.02}
.br-producten .ontwerp-beeld-pasje{padding:12% 8%}
.br-producten .ontwerp-beeld-staand{padding:6% 22%}
.meer-tegel{--pijl:var(--petrol);grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:20px 24px;border-radius:var(--r);background:var(--petrol);color:#CBD8EC;text-decoration:none;font-size:.9375rem;line-height:1.5;transition:transform .2s}
.meer-tegel:hover{transform:translateY(-3px)}
.meer-tegel strong{color:#fff;font-size:1.125rem;letter-spacing:-.02em}
.meer-tegel span{grid-column:1}
.meer-tegel .kp{grid-row:1/3;grid-column:2;width:40px;height:40px;color:var(--goud)}

.br-vindbaar{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
.br-vindbaar .lokaal .resultaat-jij{margin-top:12px}
.br-punten{display:grid;gap:0;margin-top:24px}
.br-punten li{padding:12px 0;border-top:1px solid var(--lijn);font-size:.9375rem}
.br-punten strong{display:block;font-size:1.0625rem}

.br-rooster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* fototegel: beeld vult de kaart, naam staat op een donker verloop */
.br-tegel{--pijl:var(--petrol);position:relative;display:block;aspect-ratio:1/1.12;border-radius:var(--r);overflow:hidden;background:var(--petrol);text-decoration:none;box-shadow:var(--schaduw-klein);isolation:isolate}
.br-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--soepel)}
.br-tegel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,18,24,0) 30%,rgba(15,18,24,.55) 62%,rgba(6,38,42,.94) 100%)}
.br-tegel-tekst{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:grid;gap:3px;padding-right:0}
.br-tegel strong{color:#fff;font-size:1rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.br-tegel small{color:#CBD8EC;font-size:.8125rem;line-height:1.3}
.br-tegel .kp{position:absolute;z-index:2;right:12px;top:12px;width:32px;height:32px;color:#fff;opacity:0;translate:-6px 0;transition:opacity .25s,translate .25s var(--soepel)}
.br-tegel:hover img,.br-tegel:focus-visible img{transform:scale(1.06)}
.br-tegel:hover .kp,.br-tegel:focus-visible .kp{opacity:1;translate:0 0}
.br-tegel:focus-visible{outline-offset:3px}
@media (hover:none){.br-tegel .kp{opacity:1;translate:0 0}}

.br-overzicht-kop{position:relative;padding:22px 0 clamp(36px,6vw,80px);max-width:48em}
.br-overzicht-kop .lood{margin-top:16px}
.bh-overzicht + .band{padding-top:clamp(28px,4vw,56px)}
.bo-rooster{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.bo{display:flex;flex-direction:column;padding:8px 8px 6px;text-decoration:none;color:inherit;transition:transform .2s}
.bo:hover{transform:translateY(-5px)}
.bo-foto{position:relative;display:block}
.bo-foto > img{width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:calc(var(--r) - 6px)}
.bo-product{position:absolute;right:10px;bottom:-22px;width:30%;aspect-ratio:1/1.05;display:grid;place-items:end center;grid-template-rows:minmax(0,1fr);padding:8% 3% 2%;border-radius:var(--r-veld);border:5px solid var(--wit);
  background:linear-gradient(160deg,#CFCBF5,#D8E7FE);box-shadow:var(--schaduw-klein);transition:transform .3s var(--soepel)}
.bo-product img{width:100%;height:100%;min-height:0;object-fit:contain;object-position:50% 100%}
.bo-product-pasje{place-items:center;padding:6%}
.bo:hover .bo-product{transform:translateY(-6px) rotate(-3deg)}
.bo-tekst{display:grid;gap:4px;padding:20px 34% 16px 12px}
.bo strong{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.bo small{font-size:.875rem;line-height:1.5;color:var(--tekst)}
.bo em{--pijl:#fff;font-style:normal;display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:700;font-size:.9375rem;color:var(--koraal-diep)}
.bo em .kp{width:24px;height:24px;color:var(--koraal)}
.branchepagina .cta-band{margin-top:0}

@media (min-width:640px){
  .plekken{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .plek{grid-template-columns:minmax(0,1fr)}
  .plek-beeld{min-height:0;aspect-ratio:1/.86}
  .plek-tekst{padding:20px 12px 12px}
  .plek-nr{position:relative;margin-top:-38px;box-shadow:0 0 0 4px var(--wit)}
  .tijdlijn{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px}
  .tijdlijn li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:12px;padding:0 10px;align-content:start}
  .tijdlijn li::before{left:0;right:0;top:19px;bottom:auto;width:auto;height:2px}
  .tijdlijn li:first-child::before{left:50%;top:19px}
  .tijdlijn li:last-child::before{right:50%;bottom:auto}
  .tijdlijn span{margin-top:12px}
  .tijdlijn .piek span{width:40px;height:40px;margin-top:0}
  .tijdlijn small{grid-column:auto;margin-top:-8px}
  .tijdlijn-uitleg{grid-template-columns:1fr auto;align-items:center;margin-top:40px;padding:24px 28px}
  .br-producten{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
  .meer-tegel{grid-column:auto;grid-template-columns:1fr;align-content:end;padding:24px}
  .meer-tegel .kp{grid-row:auto;grid-column:auto;margin-top:10px}
  .br-rooster{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .bo-rooster{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (min-width:900px){
  .bh-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .bh .hero-tekst{padding-block:clamp(20px,3vw,48px) clamp(44px,6vw,88px)}
  .bh-toneel{margin:0 -6% calc(-1 * clamp(40px,5vw,84px)) 0;align-self:end}
  .uitgelicht{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .uitgelicht-beeld{height:clamp(360px,34vw,480px)}
  .br-vindbaar{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px)}
  .br-rooster{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bo-rooster{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.alle-ontwerpen{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:clamp(22px,3vw,36px);padding:clamp(22px,3.400vw,44px);border-radius:var(--R);background:var(--wit);box-shadow:var(--schaduw)}
.alle-tekst h3{font-size:clamp(1.5rem,2.400vw,2rem);font-weight:800;letter-spacing:-.03em}
.alle-tekst p{margin:10px 0 20px;max-width:26em}
.alle-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.alle-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 12px 10px 16px;border-radius:var(--r-veld);background:var(--perzik);text-decoration:none;transition:background-color .15s,color .15s}
.alle-links strong{font-size:.9375rem;line-height:1.250}
.alle-links span{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--wit);font-size:.8125rem;font-weight:800;color:var(--koraal-diep)}
.alle-links a:hover{background:var(--petrol)}
.alle-links a:hover strong{color:#fff}
@media (min-width:900px){.alle-ontwerpen{grid-template-columns:minmax(0,1fr) minmax(0,1.300fr);gap:clamp(28px,5vw,72px);align-items:center}}

/* Productvlak: rustig lichtgrijs met een zachte vloerschaduw. Op perzik vielen crème en witte kaarten weg,
   op puur wit de witte pasjes; hierop komen wit, donker en kleur alle drie uit. */
.ontwerp .ontwerp-beeld,.ontwerp:nth-child(even) .ontwerp-beeld,.br-producten .ontwerp-beeld,.verwant .ontwerp-beeld{
  background:radial-gradient(ellipse 70% 26% at 50% 96%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.ontwerp .ontwerp-beeld{padding:5% 2% 1%}
.ontwerp .ontwerp-beeld-pasje,#collectie .ontwerp-beeld-pasje,.cat-rooster .ontwerp-beeld-pasje,.br-producten .ontwerp-beeld-pasje{padding:8% 5%}
.ontwerp .ontwerp-beeld-staand,.cat-rooster .ontwerp-beeld-staand,.br-producten .ontwerp-beeld-staand{padding:5% 20%}

/* formatenkiezer: vier tabbladen, product groot op het rustige grijze vlak */
.kiezer{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kies-beeld{height:clamp(120px,15vw,200px);padding:10px 6px 4px;place-items:end center;
  background:radial-gradient(ellipse 70% 24% at 50% 96%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.kies-beeld img{object-position:50% 100%}
.kies:nth-child(2) .kies-beeld,.kies:nth-child(3) .kies-beeld{place-items:center}
.kies:nth-child(2) .kies-beeld img,.kies:nth-child(3) .kies-beeld img{object-position:50% 50%}
.kies:nth-child(3) .kies-beeld{padding:10px 22%}
.paneel-beeld{height:clamp(320px,37vw,500px);padding:16px 16px 72px;
  background:radial-gradient(ellipse 62% 18% at 50% 88%,rgba(20,36,60,.12),transparent 70%),linear-gradient(180deg,#F2F4F7,#E2E6EB)}
.paneel-beeld-pasje{padding:16px 16px 72px}
.paneel-beeld-pasje > img{width:min(92%,560px)}
.paneel-beeld-staand{padding:20px}
.paneel-beeld-staand > img{height:100%;width:auto}
.paneel-voorna{background:linear-gradient(180deg,#F2F4F7,#E2E6EB)}
.paneel-voorna figure{background:rgba(255,255,255,.7)}
.paneel-voorna .na{background:var(--wit)}
@media (max-width:640px){.kiezer{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kies[aria-selected="true"]::after{display:none}.kies-beeld{height:110px}}

/* ------------------------------------------------------------ categoriepagina (mobiel eerst) */
.cat-kop{padding:0 0 clamp(24px,3vw,40px)}
.cat-kop-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:end;padding-top:10px}
.cat-kop h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.cat-kop .lood{margin-top:12px;max-width:30em}
.snelkeuze{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.snel-tegel{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:8px 16px 8px 8px;border:2px solid transparent;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein);text-align:left;cursor:pointer;transition:transform .2s,border-color .15s}
.snel-tegel:hover{transform:translateY(-2px)}
.snel-tegel[aria-pressed="true"]{border-color:var(--petrol)}
.snel-beeld{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r-veld);background:linear-gradient(160deg,#BED7FD,#EEEDFD);padding:6px}
.snel-beeld img{width:100%;height:100%;object-fit:contain}
.snel-tegel strong{display:block;font-size:1rem;line-height:1.250}
.snel-tegel small{display:block;font-size:.8125rem;line-height:1.400;color:var(--zacht);white-space:nowrap}
.snel-tegel strong{white-space:nowrap}

.cat{padding-bottom:clamp(56px,7vw,110px)}
.cat-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.res-balk-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 0 12px;position:sticky;top:78px;z-index:6;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.res-aantal{margin:0 auto 0 0;font-size:1rem;color:var(--zacht)}
.res-aantal strong{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.filters-open{position:relative}
.filters-open .knop-ic{width:20px;height:20px}
.filter-badge{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--koraal);color:#fff;font-size:.75rem;font-weight:800}
.sorteer{display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600;color:var(--zacht)}
.sorteer select{min-height:46px;padding:8px 32px 8px 16px;border:1.500px solid rgba(15,18,24,.4);border-radius:999px;background:var(--wit) right 14px center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.500l5 5 5-5' fill='none' stroke='%230B2A5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font:inherit;font-weight:700;color:var(--petrol);appearance:none;-webkit-appearance:none;cursor:pointer}
.actief{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px 6px 12px;border:0;border-radius:999px;background:var(--petrol);color:#fff;font:inherit;font-size:.875rem;font-weight:700;cursor:pointer}
.chip svg{width:16px;height:16px;padding:3px;border-radius:50%;background:rgba(255,255,255,.2)}
.chip:hover{background:var(--koraal-diep)}
.chip-wis{background:none;color:var(--koraal-diep);text-decoration:underline;text-underline-offset:3px;padding-inline:8px}
.chip-wis:hover{background:none;color:var(--petrol)}

.cat-rooster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat-rooster .ontwerp-beeld{aspect-ratio:1/1.06}
.cat-rooster .ontwerp-beeld-pasje{padding:10% 7%}
.cat-rooster .ontwerp-beeld-staand{padding:6% 16%}
.cat-rooster .ontwerp:not([hidden]){animation:paneel-in .35s var(--soepel) both}
.cat-rooster h3 a{color:inherit;text-decoration:none}
.cat-rooster h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.cat-rooster .ontwerp{position:relative}
.cat-rooster .stalen{position:relative;z-index:2}
.cat-rooster .ontwerp:has(h3 a:focus-visible){outline:3px solid var(--koraal);outline-offset:3px}
.cat-rooster h3 a:focus-visible{outline:0}
.cat-prijs{font-size:.875rem;color:var(--zacht)}
.cat-koop{position:relative;z-index:2;width:100%;min-height:44px;margin-top:12px;padding:.5em 1em;gap:.55em;font-size:.9375rem}
.cat-koop .knop-ic{width:18px;height:18px;flex:none}
.cat-koop .aan{display:none}
.cat-koop.klaar{background:var(--petrol);border-color:var(--petrol)}
.cat-koop.klaar .uit{display:none}.cat-koop.klaar .aan{display:inline}
@media (max-width:420px){.cat-koop{font-size:.8125rem;padding-inline:.5em}}
.cat-prijs strong{font-size:1.0625rem;font-weight:800}
.met-logo{display:inline-block;align-self:flex-start;margin-top:8px!important;padding:2px 10px;border-radius:999px;background:var(--perzik);font-size:.75rem!important;font-weight:700;color:var(--koraal-diep)!important}
.leeg{padding:clamp(32px,5vw,64px) 24px;border-radius:var(--R);background:var(--perzik);text-align:center}
.leeg h2{font-size:1.6rem}
.leeg p{margin:10px auto 20px;max-width:28em}
.meer-rij{margin:28px 0 0;text-align:center}

/* filters: op telefoon een paneel van onderen, vanaf 900px een vaste kolom */
.filters{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;background:rgba(15,18,24,.5);visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
.filters.open{visibility:visible;opacity:1;transition:opacity .2s}
.filters form{width:100%;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--grond);border-radius:var(--R) var(--R) 0 0;padding:6px 20px 0;transform:translateY(24px);transition:transform .25s var(--soepel)}
.filters.open form{transform:none}
html.filters-open{overflow:hidden}
.filters-kop{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;background:var(--grond);padding:12px 0 10px}
.filters-kop h2{font-size:1.25rem}
.filters-sluit{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--perzik);color:var(--petrol);cursor:pointer}
.filters-sluit svg{width:20px;height:20px}
.zoekveld{position:relative;margin-bottom:6px}
.zoekveld svg{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--zacht);pointer-events:none}
.zoekveld input{width:100%;min-height:50px;padding:10px 16px 10px 46px;border:1.500px solid #7A8390;border-radius:999px;background:var(--wit);font:inherit;color:var(--petrol)}
.zoekveld input:focus-visible{outline:3px solid var(--koraal);outline-offset:2px;border-color:var(--koraal)}
.facet{border:0;margin:0;padding:16px 0 12px;border-top:1px solid var(--lijn);min-width:0}
.facet:first-of-type{border-top:0}
.facet legend{float:left;width:100%;padding:0;margin-bottom:6px;font-weight:800;font-size:1rem;color:var(--petrol)}
.facet legend + *{clear:both}
.facet label{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;min-height:44px;padding:4px 6px;margin-inline:-6px;border-radius:var(--r-veld);cursor:pointer;font-weight:500;color:var(--petrol)}
.facet label:hover{background:var(--perzik)}
.facet input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border:2px solid #7A8390;border-radius:var(--r-klein);background:var(--wit) center/14px no-repeat;cursor:pointer}
.facet input:checked{border-color:var(--petrol);background-color:var(--petrol);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.500 12.500l5 5 10-11' fill='none' stroke='%23F4B21B' stroke-width='3.400' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.facet input:focus-visible{outline:3px solid var(--koraal);outline-offset:2px}
.facet i{font-style:normal;font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--zacht)}
.facet label:has(input:checked){font-weight:700}
.facet label.nul{color:#8A919B;cursor:default}
.facet label.nul:hover{background:none}
.facet label.nul input{border-color:#C7CCD4;cursor:default}
.filters-voet{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 calc(14px + env(safe-area-inset-bottom));background:var(--grond);border-top:1px solid var(--lijn)}
.filters-voet .knop:last-child{flex:1}

.cat-uitleg{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.cat-uitleg .kaart{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.600vw,32px)}
.cat-uitleg h3{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.cat-uitleg p{margin:0;font-size:.9375rem}
.cat-uitleg .meer{margin-top:auto;padding-top:8px;text-decoration:none}
.cat-links{margin:28px 0 0;max-width:52em}
.categoriepagina .cta-band{margin-top:0}

@media (max-width:899px){
  /* meeschuivende balk op telefoon: één compacte regel over de volle breedte */
  .res-balk-top{flex-wrap:nowrap;gap:8px;margin-inline:-16px;padding:8px 16px;border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw-klein)}
  .res-aantal{min-width:0;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .res-aantal strong{font-size:1rem}
  .res-balk-top .filters-open{min-height:40px;padding:0 12px 0 12px;gap:6px;font-size:.875rem;border-color:var(--lijn);background:var(--wit);box-shadow:var(--schaduw-klein)}
  .filters-open .knop-ic{width:17px;height:17px}
  .filter-badge{min-width:19px;height:19px;font-size:.75rem}
  .filter-badge:empty{display:none}
  .sorteer > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  /* filterpaneel: compact vel van onderen */
  .filters form{max-height:84dvh;padding:0 16px;border-radius:var(--r) var(--r) 0 0;background:var(--wit)}
  .filters form::before{content:"";display:block;width:40px;height:4px;margin:8px auto 0;border-radius:4px;background:#C7D0DD}
  .filters-kop{padding:8px 0 8px;background:var(--wit)}
  .filters-kop h2{font-size:1.125rem}
  .filters-sluit{width:40px;height:40px}
  .filters-sluit svg{width:17px;height:17px}
  .zoekveld input{min-height:44px;font-size:.9375rem;border-width:1px;border-color:#B3C0D3}
  .facet{padding:12px 0 8px}
  .facet legend{margin-bottom:2px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
  .facet label{min-height:40px;gap:10px;padding:2px 6px;font-size:.9375rem;grid-template-columns:22px 1fr auto}
  .facet input{width:22px;height:22px;border-width:1.500px;border-radius:var(--r-klein);background-size:13px}
  .facet i{font-size:.8125rem}
  .filters-voet{padding:10px 0 calc(12px + env(safe-area-inset-bottom));background:var(--wit)}
  .filters-voet .knop{min-height:46px;font-size:.9375rem}
  #filters-toon{gap:.32em}
  .sorteer select{min-height:40px;max-width:142px;padding:0 28px 0 12px;font-size:.875rem;font-weight:700;color:var(--petrol);border:1px solid var(--lijn);background-position:right 12px center;background-size:10px;box-shadow:var(--schaduw-klein);text-overflow:ellipsis}
}
.cat-soorten{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.cat-soorten a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;background:var(--wit);box-shadow:var(--schaduw-klein);font-size:.875rem;font-weight:700;color:var(--petrol);text-decoration:none;transition:background-color .15s,color .15s}
.cat-soorten a:hover{background:var(--perzik)}
.cat-soorten a[aria-current]{background:var(--petrol);color:#fff}
.cat-seo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.cat-seo-tekst h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.6em}
.cat-seo-tekst p:not(.label){margin:0 0 1em;max-width:36em}
.cat-seo-vragen{display:grid;gap:10px}
@media (min-width:900px){.cat-seo{grid-template-columns:minmax(0,1fr) minmax(0,1.150fr)}}
@media (min-width:560px){.cat-rooster{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.snelkeuze{grid-template-columns:repeat(3,minmax(0,1fr))}.snel-tegel{grid-template-columns:minmax(0,1fr);justify-items:start;gap:10px;padding:10px 12px 12px 10px}.snel-beeld{width:100%;height:clamp(84px,9vw,118px);grid-template-rows:minmax(0,1fr)}.snel-beeld img{min-height:0}.snel-tegel strong{font-size:clamp(.88rem,1.200vw,1.020rem)}.snel-tegel small{font-size:clamp(.74rem,1vw,.84rem)}}
@media (min-width:900px){
  .cat-kop-in{grid-template-columns:minmax(0,1fr) minmax(0,1.150fr);gap:clamp(28px,5vw,72px)}
  .cat-in{grid-template-columns:268px minmax(0,1fr);gap:clamp(28px,3.400vw,48px)}
  .filters{position:sticky;top:96px;inset:auto;z-index:auto;display:block;background:none;visibility:visible;opacity:1;max-height:calc(100dvh - 112px);overflow-y:auto;scrollbar-width:thin}
  .filters form{max-height:none;overflow:visible;background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw);padding:4px 20px 10px;transform:none}
  .filters-kop{position:static;background:none;padding:16px 0 12px}
  .filters-sluit,.filters-open,#filters-toon{display:none}
  .filters-voet{position:static;background:none;border-top:1px solid var(--lijn);padding:12px 0 10px}
  .filters-voet .knop{flex:1}
  .res-balk-top{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:0}
  .cat-rooster{gap:16px}
  .cat-uitleg{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (min-width:1200px){.cat-rooster{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ------------------------------------------------------------ bestelbalk (alleen op telefoon) */
.bestelbalk{display:none}

/* ------------------------------------------------------------ onthullen */
.js .onthul{opacity:0;transform:translateY(24px);transition:opacity .7s var(--soepel),transform .7s var(--soepel)}
.js .onthul.zien{opacity:1;transform:none}

/* ------------------------------------------------------------ smaller */
@media (max-width:1060px){
  .menuknop{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--grond);padding:8px 20px 24px;flex-direction:column;align-items:stretch;gap:12px;
    border-radius:0 0 var(--R) var(--R);box-shadow:var(--schaduw)}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;margin:0;gap:0}
  .nav ul a{padding:16px 4px;border-radius:0;border-bottom:1px solid var(--lijn);font-size:1.125rem}
  .nav-acties{flex-wrap:wrap}
  .nav-acties .knop{margin-left:auto}

}
@media (max-width:900px){
  body{font-size:16.5px}
  .hero-in,.bandkop,.paneel,.duo,.demo,.prijzen,.dash,.faq,.waarom{grid-template-columns:minmax(0,1fr)}
  .resultaat-jij{margin-inline:-14px;padding:16px 12px}
  .bandkop{align-items:start}
  .hero-kaart{width:calc(100% - 20px)}
  .hero .confetti i:nth-child(3),.hero .confetti i:nth-child(5),.hero .confetti i:nth-child(6){display:none}
  .hero-in{width:calc(100% - 36px);padding-top:32px;padding-bottom:0}
  /* telefoon en tablet: het productbeeld direct onder de kop, vóór de tekst en de knoppen */
  .hero:not(.bh) .hero-tekst{display:contents}
  .hero:not(.bh) .hero-in{gap:0;padding-bottom:clamp(28px,6vw,48px)}
  .hero:not(.bh) .hero-tekst > .label{order:1}
  .hero:not(.bh) .hero-tekst > h1{order:2;margin-bottom:0}
  .toonbank{order:3;margin:6px -7% 2px;max-width:560px;justify-self:center}
  .hero:not(.bh) .hero-tekst > .lood{order:4}
  .hero:not(.bh) .hero-tekst > .knoppen{order:5;margin-top:20px}
  .hero:not(.bh) .hero-tekst > .hero-bewijs{order:6;margin-top:20px}
  .paneel-tekst{padding:6px 6px 10px}
  .ontwerpen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .route-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stap:nth-child(2)::after{display:none}
  .branches{grid-template-columns:minmax(0,1fr);gap:12px}
  .branche{display:grid;grid-template-columns:clamp(104px,30vw,170px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;padding:8px 12px 8px 8px}
  .branche figure{grid-row:1/-1;margin:0;width:100%;height:auto;aspect-ratio:1/1.15;align-self:center}
  .branche img{height:100%;aspect-ratio:1/1.15}
  .branche h3,.branche p,.branche .meer{margin-inline:0}
  .branche h3{margin-top:10px;font-size:1.0625rem}
  .branche p{font-size:.875rem;line-height:1.5;margin-bottom:.6em}
  .branche .meer{margin-bottom:10px;align-self:end;font-size:.9375rem}
  .ervaringen{grid-template-columns:minmax(0,1fr)}
  .cta-kaart{grid-template-columns:minmax(0,1fr);gap:0}
  .cta-tekst{padding:24px 12px 16px}
  .cta-beeld{order:-1;min-height:0}
  .cta-beeld:has(.cta-producten){aspect-ratio:6/5}
  .voet-kolommen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .voet-merk{grid-column:1/-1}
  .dash{gap:0}
  .dash > div:last-child{display:contents}
  .dash-beeld{order:1;margin:28px 0 6px}
  .feiten,.geen-abo{order:2}
  .feiten{margin-top:20px}
  .demo{gap:0}
  .demo-tekst{display:contents}
  .podium-wrap{order:1;margin:24px 0 4px}
  .demo-form{order:2;margin-top:16px;max-width:none}
  .demo-stappen{order:3}
  .faq{grid-template-areas:"kop" "vragen" "lev";gap:24px}
  .quote-rij{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:4px 16px 28px}
  .quote-rij::-webkit-scrollbar{display:none}
  .quote-rij .quote{flex:0 0 min(84%,340px);scroll-snap-align:center}
  .quote-product{width:27%}
  .ook-voor{flex-direction:column;align-items:flex-start;padding:20px}
  .bestelbalk{position:fixed;z-index:45;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-radius:var(--r) var(--r) 0 0;box-shadow:var(--schaduw);font-size:.875rem;line-height:1.3}
  .bestelbalk strong{display:block;font-size:1rem}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .knoppen .knop{width:100%}
  table.factoren,.factoren tbody,.factoren tr,.factoren th,.factoren td{display:block}
  .factoren thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .factoren tr{padding:12px 0;border-top:1px solid var(--lijn)}
  .factoren th,.factoren td{border:0;padding:0!important;width:auto!important;background:none!important}
  .factoren td{margin-top:3px}
  .factoren td:last-child{margin-top:8px}
  .invloed{display:inline;margin-right:6px}
  .factor-jij{background:var(--perzik);border-radius:var(--r);border-top:0!important;padding:16px!important;margin-inline:-10px}
  .factor-jij + tr,.factoren tr:first-child{border-top:0}
  .resultaat-jij img{width:24%}
  .ontwerpen,.ontwerpen[data-filter="pasje"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ontwerp-tekst h3 small{display:block;margin:4px 0 0;width:max-content}
  .ontwerp{padding:4px 4px 0}
  .ontwerp-tekst{padding:12px 6px 10px}
  .ontwerp-tekst h3{font-size:1rem}
  .ontwerp-tekst p{font-size:.8125rem}
  .ontwerp-voet{padding-top:10px}
  .kies-link{font-size:.875rem}
  /* de filters schuiven op een telefoon opzij in plaats van drie rijen te vormen */
  .ontwerp-kop{margin-inline:-16px}
  .ontwerp-kop > .klein{padding-inline:16px}
  .ontwerp-kop .tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:none;box-shadow:none;border-radius:0;gap:8px;padding:6px 16px 10px;scroll-padding-inline:16px}
  .ontwerp-kop .tabs::-webkit-scrollbar{display:none}
  .ontwerp-kop .tabs button{flex:none;box-shadow:var(--schaduw-klein)}
  .ontwerp-kop .tabs button:not([aria-pressed="true"]){background:var(--wit)}
  .ontwerp-kop .tabs button{padding-inline:8px;font-size:.875rem}
  .ontwerp-kop .tabs span{margin-left:4px;min-width:20px;height:20px;font-size:.75rem}
  .zekerheden{grid-template-columns:1fr 1fr;padding:4px 0}
  .zekerheden li{padding:12px 16px;font-size:.875rem}
  .zekerheden li + li{border-left:0}
  .zekerheden li:nth-child(even){border-left:1px solid var(--lijn)}
  .zekerheden li:nth-child(n+3){border-top:1px solid var(--lijn)}
  .zekerheden strong{font-size:1rem}
  .hero .lood{font-size:1.0625rem}
  .kiezer{gap:8px}
  .kies{padding:4px 4px 0}
  .kies-beeld{height:96px;padding:8px}
  .kies-naam{font-size:.875rem;padding:10px 2px 12px}
  .paneel-beeld{height:clamp(260px,72vw,340px)}
  .paneel-voorna{height:auto;min-height:0;gap:8px;padding:8px}
  .paneel-voorna figure{padding:10px 4px 4px}
  .paneel-voorna figcaption{margin-left:2px;padding:4px 10px;font-size:.75rem}
  .voorna-pijl{width:38px;height:38px;margin:-19px 0 0 -19px;padding:8px;box-shadow:0 0 0 4px #D8E7FE}
  .paneel-voet .knop{width:100%}
  .route-stappen{grid-template-columns:minmax(0,1fr);gap:12px}
  .stap{display:grid;grid-template-columns:42% minmax(0,1fr);padding:8px}
  .stap:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-23px;margin-left:-16px;rotate:90deg}
  .stap-beeld{aspect-ratio:auto;min-height:170px}
  .stap-tekst{padding:8px 6px 8px 16px}
  .stap-nr{position:static;width:32px;height:32px;font-size:.9375rem;box-shadow:none;margin-bottom:8px}
  .stap h3{font-size:1rem}
  .stap p{font-size:.875rem}
  .mini{width:92%;padding:10px;font-size:.75rem}
  .mini-label,.mini-klaar,.mini-treffer .pin{display:none}
  .mini-treffer{padding:8px 8px 8px 10px;gap:6px}
  .mini-treffer > span:nth-child(2){font-size:0}
  .mini-treffer b{font-size:.75rem;white-space:nowrap}
  .sb-bezorg{padding:8% 5%}
  .mini-status{padding:10px 2px 8px}
  .mini-status li{font-size:.56rem;white-space:nowrap;letter-spacing:-.01em}
  .mini-status li:nth-child(2){font-size:0}
  .mini-veld{white-space:nowrap;padding:6px 8px}
  .mini-melding{left:6px;right:6px;bottom:6px;padding:8px 10px;grid-template-columns:1fr}
  .mini-melding > span:last-child{display:none}
  .mini-melding b{font-size:.8125rem}
  .staffel th,.staffel td{padding:12px 6px;font-size:.9375rem}
  .staffel thead th{font-size:.75rem}
  .staffel thead th:last-child,.staffel td:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
  .populair > :nth-last-child(2){border-radius:0 var(--r-veld) var(--r-veld) 0}
  .pop{display:block;margin:4px 0 0;width:max-content}
  .tabs{display:flex}
  .tabs button{flex:1;padding-inline:12px}
  .route{grid-template-columns:64px minmax(0,1fr) 26px;padding-right:12px}
  .route img{width:64px;height:64px}
  summary{padding:16px 12px 16px 16px;font-size:1rem}
  details p{padding:0 16px 20px}
  .levering dl > div{grid-template-columns:1fr}
  .voet-kolommen{grid-template-columns:1fr 1fr}
  .betalen img{width:48px;height:36px}
  .voet-kolommen > div:last-child{grid-column:1/-1}
  .nieuwsbrief-rij{flex-direction:column}
}

/* snelkeuze op de categoriepagina: zelfde grijze vlak, product groot */
.snel-beeld{background:radial-gradient(ellipse 70% 24% at 50% 95%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC);padding:4px}
.snel-tegel:hover .snel-beeld img{transform:scale(1.05)}
.snel-beeld img{transition:transform .35s var(--soepel)}
@media (min-width:560px){
  .snel-beeld{height:clamp(120px,13vw,176px)!important;padding:10px 8px 4px;place-items:end center}
  .snel-beeld img{object-position:50% 100%}
  .snel-tegel:nth-child(2) .snel-beeld,.snel-tegel:nth-child(3) .snel-beeld{place-items:center;padding:10px}
  .snel-tegel:nth-child(2) .snel-beeld img,.snel-tegel:nth-child(3) .snel-beeld img{object-position:50% 50%}
  .snel-tegel{padding:8px 8px 12px!important}
  .snel-tegel > span:last-child{padding-inline:8px}
}

/* ------------------------------------------------------------ werkwijze: één kaart, vier stappen op één lijn */
.werkroute{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:clamp(18px,2.6vw,36px);border-radius:var(--R)}
.rstap{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding:20px 0}
.rstap + .rstap{border-top:1px solid var(--lijn)}
.rstap-kop{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.rstap-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--perzik-diep);color:var(--koraal-diep);font-weight:800;font-size:.9375rem;flex:none}
.rstap-label{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--koraal-diep)}
.rstap-beeld{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:1.9;margin-bottom:16px;
  background:radial-gradient(ellipse 70% 22% at 50% 94%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.rstap h3{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.rstap > p:last-child{margin:6px 0 0;font-size:.9375rem;line-height:1.58}
.rb-kies img{position:absolute;bottom:4%;height:auto}
.rb-kies .rb-achter{right:2%;width:52%;bottom:14%}
.rb-kies .rb-voor{left:4%;width:66%}
.rb-link{display:grid;place-items:center;padding:10%}
.rb-veld{display:grid;gap:8px;width:100%;padding:12px;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw-klein);text-align:left}
.rb-veldnaam{font-size:.75rem;font-weight:700;color:var(--zacht)}
.rb-invoer{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--petrol);border-radius:var(--r-klein);font-size:.8125rem;font-weight:600;color:var(--petrol);white-space:nowrap;overflow:hidden}
.rb-invoer svg{width:16px;height:16px;flex:none;color:var(--koraal)}
.rb-ok{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;color:var(--petrol)}
.rb-ok svg{width:18px;height:18px;padding:4px;border-radius:50%;background:var(--petrol);color:var(--goud);flex:none}
.rb-lever{display:grid;place-items:center;padding:8% 6% 22%}
.rb-lever img{width:100%;height:auto;rotate:-5deg}
.rb-pil{position:absolute;left:50%;bottom:9%;translate:-50% 0;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--wit);box-shadow:var(--schaduw-klein);font-size:.75rem;font-weight:700;color:var(--petrol)}
.rb-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% 20%}
.rb-review{position:absolute;left:8px;right:8px;bottom:8px;display:grid;gap:1px;padding:8px 12px;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw);font-size:.8125rem}
.rb-review .sterren{justify-content:flex-start}
.rb-review .sterren svg{width:14px;height:14px;filter:none}
@media (max-width:899px){.rb-kies .rb-voor{width:36%;left:22%}.rb-kies .rb-achter{width:29%;right:20%}.rb-link{padding:5% 16%}.rb-lever{padding:4% 28% 16%}.rb-pil{bottom:7%}.rb-foto img{object-position:30% 22%}.rb-review{left:auto;right:10px;bottom:10px}}
@media (min-width:900px){
  .werkroute{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.4vw,34px)}
  .rstap{padding:0;border:0!important}
  .rstap-kop{margin-bottom:16px}
  .rstap-kop::after{content:"";flex:1;height:2px;margin-right:calc(-1 * clamp(18px,2.4vw,34px));background:var(--perzik-diep)}
  .rstap:last-child .rstap-kop::after{margin-right:0;background:linear-gradient(90deg,var(--perzik-diep),transparent)}
  .rstap-beeld{aspect-ratio:1/.9;margin-bottom:20px}
  .rstap h3{font-size:1.125rem}
  .rb-veldnaam{font-size:.75rem}.rb-invoer{font-size:clamp(.66rem,.95vw,.84rem);padding-inline:8px}.rb-link{padding:7%}.rb-ok{font-size:.8125rem}.rb-pil{font-size:.8125rem}
}

.hero{overflow-x:clip}
.rb-invoer{text-overflow:ellipsis}
.rb-invoer svg + *{overflow:hidden}
/* ------------------------------------------------------------ tegels: één regel, vooraanzicht bij aanwijzen */
.ontwerp-tekst > p:not(.met-logo){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.900em}
.ontwerp .ontwerp-beeld{position:relative}
.ontwerp-beeld .vlak{position:absolute;inset:9% 14%;width:72%!important;height:82%!important;object-fit:contain!important;object-position:50% 50%!important;opacity:0;scale:.96;
  filter:drop-shadow(0 10px 14px rgba(60,40,20,.28));transition:opacity .25s,scale .35s var(--soepel)!important;transform:none!important}
.ontwerp-beeld-pasje .vlak{inset:16% 9%;width:82%!important;height:68%!important}
.ontwerp-beeld > img:first-child{transition:opacity .25s,transform .5s var(--soepel)}
@media (hover:hover){
  .cat-rooster .ontwerp:hover .vlak{opacity:1;scale:1}
  .cat-rooster .ontwerp:hover .ontwerp-beeld:has(.vlak) > img:first-child{opacity:0}
}

/* ------------------------------------------------------------ productpagina: bundel en schaaltekening */
.erbij{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"kop kop kop" "duo tekst prijs" "knop knop knop";gap:12px 12px;align-items:center;padding:16px;border:2px solid var(--perzik-diep)}
.erbij-kop{grid-area:kop;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-weight:800;font-size:1rem;color:var(--petrol)}
.erbij-kop i{font-style:normal;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-diep)}
.erbij-duo{grid-area:duo;display:block}
.erbij .erbij-duo img{display:block;width:64px;height:64px;padding:6px;object-fit:contain;border-radius:var(--r-veld);background:linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.erbij-tekst{grid-area:tekst;display:grid;gap:2px;min-width:0}
.erbij-tekst strong{font-size:1rem;line-height:1.300}
.erbij .erbij-tekst small,.erbij .erbij-prijs small{font-size:.8125rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--zacht)}
.erbij-prijs{grid-area:prijs;display:grid;justify-items:end;gap:2px;white-space:nowrap}
.erbij .erbij-prijs em{font-style:normal;font-weight:800;font-size:1.0625rem;color:var(--petrol)}
@media (max-width:520px){
  .erbij{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"kop kop" "duo tekst" "duo prijs" "knop knop";gap:2px 12px;padding:12px}
  .erbij-kop{margin-bottom:10px}
  .erbij-tekst{align-self:end}
  .erbij-tekst small{display:none}
  .erbij-prijs{align-self:start;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:0 10px;white-space:normal}
  .erbij-prijs > *{white-space:nowrap}
  .erbij-knop{margin-top:12px}
}
.erbij-knop{grid-area:knop;display:grid;place-items:center;min-height:46px;border-radius:999px;border:1.500px solid var(--petrol);font-weight:700;color:var(--petrol);transition:background-color .15s,color .15s}
.erbij-knop .aan{display:none;align-items:center;gap:8px}
.erbij-knop svg{width:18px;height:18px}
.erbij:hover .erbij-knop{background:var(--perzik)}
.erbij.aan{border-color:var(--petrol)}
.erbij.aan .erbij-knop{background:var(--petrol);color:#fff}
.erbij.aan .erbij-knop .uit{display:none}
.erbij.aan .erbij-knop .aan{display:inline-flex}
.erbij-vink{display:none}
.schaal{margin:20px 0 0;padding:clamp(16px,3vw,32px);border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw)}
.schaal svg{display:block;width:100%;max-height:420px;font-family:var(--font)}
.schaal figcaption{margin-top:10px;font-size:.875rem;color:var(--zacht);text-align:center}
.sch-vloer{stroke:var(--lijn);stroke-width:.800}
.sch-rand{fill:none;stroke:rgba(15,18,24,.35);stroke-width:.500}
.sch-tel{fill:var(--petrol)}
.sch-scherm{fill:#E7ECF4}
.sch-maat line{stroke:var(--koraal);stroke-width:.700}
.sch-tekst{font-size:6.500px;font-weight:700;fill:var(--petrol)}
.sch-klein{font-size:5.500px;font-weight:500;fill:var(--zacht)}

/* ------------------------------------------------------------ winkelwagen: knop in de kop */
.wagenknop{position:relative;order:2;display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:var(--perzik);color:var(--petrol);transition:background-color .15s,color .15s}
.wagenknop:hover{background:var(--petrol);color:#fff}
.wagenknop svg{width:24px;height:24px}
.wagen-aantal{position:absolute;top:-4px;right:-6px;min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--koraal);color:#fff;
  font-size:.75rem;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--grond)}
.wagen-aantal[hidden]{display:none}
.wagenknop.wplop{animation:wplop .5s var(--soepel)}
@keyframes wplop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.vlieger{position:fixed;z-index:120;margin:0;object-fit:contain;pointer-events:none;transition:transform .6s cubic-bezier(.5,0,.3,1),opacity .6s ease-in;will-change:transform}
@media (max-width:1060px){
  .kop-in{gap:10px}
  .wagenknop{order:0;margin-left:auto}
  .wagenknop + .menuknop{margin-left:0}
}
@media (max-width:520px){
  .merk-naam small{white-space:nowrap}
  .menuknop{gap:8px;padding:10px 12px}
}

/* ------------------------------------------------------------ winkelwagen: paneel dat van rechts inschuift */
.wagen-open{overflow:hidden}
.wagen{position:fixed;inset:0;z-index:90}
.wagen[hidden]{display:none}
.wagen-doek{position:absolute;inset:0;background:rgba(15,18,24,.5);opacity:0;transition:opacity .26s}
.wagen-paneel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);display:flex;flex-direction:column;background:var(--grond);
  border-radius:var(--R) 0 0 var(--R);box-shadow:var(--schaduw);transform:translateX(102%);transition:transform .34s var(--soepel);outline:0}
.wagen.open .wagen-doek{opacity:1}
.wagen.open .wagen-paneel{transform:none}
.wagen-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 12px 28px}
.wagen-top h2{font-size:1.45rem;letter-spacing:-.03em}
.wagen-top h2 span{font-weight:600;color:var(--zacht)}
.wagen-sluit{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--perzik);color:var(--petrol);cursor:pointer;flex:none}
.wagen-sluit:hover{background:var(--petrol);color:#fff}
.wagen-sluit svg{width:20px;height:20px}
.wagen-inhoud{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 20px 28px}
.wagen-voet{padding:18px 22px calc(18px + env(safe-area-inset-bottom)) 28px;background:var(--wit);border-radius:var(--r) 0 0 0;box-shadow:var(--schaduw)}
.wagen-voet[hidden]{display:none}
.wagen-voet p{display:flex;justify-content:space-between;align-items:baseline;margin:0;color:var(--petrol);font-weight:700}
.wagen-voet p strong{font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.wagen-voet .wagen-verz{font-size:.875rem;font-weight:500;color:var(--zacht);margin-top:2px}
.wagen-voet .knop-koop{margin-top:12px}
.wagen-meer{display:block;margin-top:6px;padding:12px;text-align:center;font-weight:700;color:var(--petrol);text-underline-offset:4px}
.wagen-leeg{display:grid;justify-items:center;gap:16px;padding:40px 10px;text-align:center}
.wagen-leeg[hidden]{display:none}
.wagen-leeg p{margin:0}
.wagen-leeg p strong{display:block;font-size:1.25rem;color:var(--petrol);margin-bottom:4px}
.wagen-leeg-ster{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--perzik);color:var(--goud)}
.wagen-leeg-ster svg{width:42px;height:42px}
@media (max-width:520px){
  .wagen-paneel{border-radius:0}
  .wagen-top{padding:16px 16px 10px 16px}
  .wagen-inhoud{padding:4px 16px 16px 16px}
  .wagen-voet{padding-inline:16px 16px;border-radius:var(--r) var(--r) 0 0}
}

/* ------------------------------------------------------------ regels: paneel, winkelwagenpagina en afrekenoverzicht */
.wlijst{display:grid;margin:0;padding:0;list-style:none}
.wregel{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px 0;transition:opacity .18s,transform .18s}
.wregel + .wregel{border-top:1px solid var(--lijn)}
.wregel.weg{opacity:0;transform:translateX(24px)}
.wregel.nieuw .wregel-beeld{animation:wnieuw 1.1s var(--soepel)}
@keyframes wnieuw{0%{transform:scale(.7);box-shadow:0 0 0 0 rgba(143,132,255,.9)}45%{transform:scale(1.06)}100%{transform:none;box-shadow:0 0 0 14px rgba(143,132,255,0)}}
.wregel-beeld{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-veld);
  background:radial-gradient(ellipse 70% 20% at 50% 92%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.wregel-beeld img{width:84%;height:84%;object-fit:contain}
.wregel-beeld img.wregel-eigen{width:auto;height:auto;max-width:78%;max-height:78%;border-radius:var(--r-klein);box-shadow:var(--schaduw-klein)}
.wregel-beeld b{position:absolute;top:-7px;right:-7px;min-width:24px;height:24px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--petrol);color:#fff;font-size:.75rem;font-weight:800}
.wregel-tekst{display:grid;gap:3px;min-width:0}
.wregel-naam{font-weight:800;color:var(--petrol);text-decoration:none;line-height:1.25;letter-spacing:-.01em}
.wregel-naam:hover{text-decoration:underline;text-underline-offset:3px}
.wregel-opties{font-size:.875rem;color:var(--zacht);line-height:1.4;overflow-wrap:anywhere}
.wregel-link{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--zacht)}
.wregel-link.ok{color:var(--petrol);font-weight:600}
.wregel-link svg{width:18px;height:18px;padding:4px;border-radius:50%;background:var(--petrol);color:var(--goud);flex:none}
.wregel-onder{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.wregel-stuk{font-size:.8125rem;color:var(--zacht)}
.wregel-rechts{display:grid;justify-items:end;gap:10px}
.wregel-rechts strong{color:var(--petrol);font-weight:800;white-space:nowrap}
.wregel-weg{display:grid;place-items:center;width:44px;height:44px;margin:0 -10px -10px 0;border:0;border-radius:50%;background:none;color:var(--zacht);cursor:pointer}
.wregel-weg:hover{background:var(--perzik);color:var(--koraal-diep)}
.wregel-weg svg{width:20px;height:20px}
.stapper-klein{padding:3px;box-shadow:none;border:1.5px solid var(--lijn)}
.stapper-klein button{width:36px;height:36px;font-size:1.25rem}
.stapper-klein input{width:42px;min-height:36px;font-size:1rem;padding:0}
.wlijst-vast .wregel{grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0}
.wlijst-vast .wregel-naam{font-size:1rem}
.wlijst-vast .wregel-rechts strong{font-size:1.0625rem}
.wlijst-vast .wregel-link{margin-top:3px;font-size:.8125rem;white-space:nowrap}
.wlijst-vast .wregel-link svg{background:var(--perzik-diep);color:var(--koraal-diep)}
.wregel-maal{font-size:.875rem;font-weight:700;color:var(--petrol)}

.gratisbalk{padding:12px 16px;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw-klein);margin-bottom:6px}
.gratisbalk p{margin:0 0 8px;font-size:.9375rem;color:var(--tekst)}
.gratisbalk p strong{color:var(--petrol)}
.gratisbalk > span{display:block;height:8px;border-radius:999px;background:var(--perzik-diep);overflow:hidden}
.gratisbalk i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--goud),var(--koraal));transition:width .5s var(--soepel)}
.gratisbalk.vol i{background:var(--petrol)}
.wtip{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px 16px;align-items:center;margin-top:12px;padding:12px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein)}
.wtip-beeld{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-veld);background:radial-gradient(ellipse 70% 20% at 50% 92%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.wtip-beeld img{width:84%;height:84%;object-fit:contain;transition:transform .35s var(--soepel)}
.wtip:hover .wtip-beeld img{transform:scale(1.07) rotate(-2deg)}
.wtip-tekst{display:grid;gap:2px;min-width:0}
.wtip-tekst p{margin:0}
.wtip-label{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--koraal-diep)}
.wtip-label::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--koraal)}
.wtip-naam{font-weight:800;color:var(--petrol);text-decoration:none;letter-spacing:-.01em;line-height:1.25}
.wtip-naam:hover{text-decoration:underline;text-underline-offset:3px}
.wtip-reden{font-size:.875rem;line-height:1.45;color:var(--zacht)}
.wtip-koop{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--lijn)}
.wtip-koop strong{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;color:var(--petrol);white-space:nowrap}
.wtip-koop .knop{min-height:46px;padding:.6em 1.3em .6em 1em;gap:.5em}
.wtip-plus{width:1.15em;height:1.15em;flex:none}
@media (min-width:700px){
  .wtip-groot{grid-template-columns:120px minmax(0,1fr) auto;gap:clamp(16px,2vw,26px);margin-top:16px;padding:clamp(16px,1.800vw,22px) clamp(18px,2.4vw,28px) clamp(16px,1.800vw,22px) clamp(16px,1.800vw,22px)}
  .wtip-groot .wtip-naam{font-size:1.125rem}
  .wtip-groot .wtip-reden{font-size:.9375rem;max-width:44ch}
  .wtip-groot .wtip-koop{grid-column:auto;flex-direction:column;align-items:flex-end;gap:10px;padding:0 0 0 clamp(16px,2vw,26px);border-top:0;border-left:1px solid var(--lijn);align-self:stretch;justify-content:center}
  .wtip-groot .wtip-koop strong{font-size:1.35rem}
}

/* ------------------------------------------------------------ totalen en betaallogo's */
.som{display:grid;gap:8px;margin:0}
.som div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.som dt{color:var(--tekst)}
.som dt small{display:block;font-size:.8125rem;color:var(--zacht)}
.som dd{margin:0;font-weight:700;color:var(--petrol);white-space:nowrap}
.som .som-totaal{margin-top:8px;padding-top:12px;border-top:1px solid var(--lijn)}
.som .som-totaal dt{font-weight:800;color:var(--petrol);font-size:1.0625rem}
.som .som-totaal dd{font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.betaalrij{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.betaalrij li{display:grid;place-items:center;width:46px;height:32px;border-radius:var(--r-klein);background:var(--wit);border:1px solid var(--lijn)}
.betaalrij img{width:32px;height:24px}

/* ------------------------------------------------------------ voortgang in drie stappen */
.af-voortgang{display:flex;align-items:center;gap:10px;margin:0;padding:20px 0 6px;list-style:none;font-size:.875rem;font-weight:700;color:var(--zacht)}
.af-voortgang li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.af-voortgang li + li::before{content:"";width:clamp(14px,5vw,56px);height:2px;border-radius:2px;background:var(--perzik-diep)}
.af-voortgang b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--perzik-diep);color:var(--petrol);font-size:.8125rem;flex:none}
.af-voortgang a{color:inherit;text-underline-offset:3px}
.af-voortgang[data-stap="1"] [data-n="1"],.af-voortgang[data-stap="2"] [data-n="2"],.af-voortgang[data-stap="3"] [data-n="3"]{color:var(--petrol)}
.af-voortgang[data-stap="1"] [data-n="1"] b,.af-voortgang[data-stap="2"] [data-n="2"] b,.af-voortgang[data-stap="3"] [data-n="3"] b{background:var(--wit);box-shadow:inset 0 0 0 2px var(--koraal);color:var(--koraal-diep)}
.af-voortgang[data-stap="2"] [data-n="1"] b,.af-voortgang[data-stap="3"] [data-n="1"] b,.af-voortgang[data-stap="3"] [data-n="2"] b{background:var(--perzik-diep);color:var(--koraal-diep)}
.af-voortgang[data-stap="2"] [data-n="2"]::before,.af-voortgang[data-stap="3"] li + li::before{background:var(--koraal)}
@media (max-width:520px){
  .af-voortgang{font-size:.8125rem;gap:6px}
  .af-voortgang li{gap:6px}
  .af-voortgang li:not([aria-current]) > span,.af-voortgang li:not([aria-current]) > a{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ------------------------------------------------------------ winkelwagenpagina */
.wp{padding-bottom:clamp(60px,9vw,120px)}
.wp-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:clamp(14px,2.4vw,28px) 0 clamp(18px,2.6vw,30px)}
.wp-kop h1{font-size:clamp(2rem,4vw,3rem)}
.wp-kop p{margin:0;font-weight:600;color:var(--zacht)}
.wp-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.wp-raster[hidden],.wp-leeg[hidden]{display:none}
.wlijst-groot{padding:6px clamp(16px,2.4vw,28px);margin-top:10px}
.wlijst-groot .wregel{grid-template-columns:clamp(84px,11vw,120px) minmax(0,1fr) auto;gap:clamp(14px,2vw,22px);padding:clamp(16px,2vw,22px) 0}
.wlijst-groot .wregel-naam{font-size:1.0625rem}
.wlijst-groot .wregel-rechts strong{font-size:1.125rem}
.wp-verder{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:12px;font-weight:700;color:var(--petrol);text-underline-offset:4px}
.wp-verder .kp{width:1.4em;height:1.4em;color:var(--koraal);rotate:180deg}
.wp-som{padding:clamp(20px,2.4vw,30px);border-radius:var(--r)}
.wp-som h2{font-size:1.35rem;margin-bottom:16px}
.wp-som .koop-zeker{padding-top:16px;border-top:1px solid var(--lijn)}
.wp-leeg-kop{display:grid;justify-items:center;gap:12px;max-width:520px;margin:10px auto clamp(40px,6vw,70px);text-align:center}
.wp-leeg-kop h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.wp-leeg-kop p{margin:0}
.wp-kiesrij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.wp-kies{display:grid;gap:4px;padding:12px 12px 16px;text-decoration:none;transition:transform .2s var(--soepel)}
.wp-kies:hover{transform:translateY(-4px)}
.wp-kies-beeld{display:grid;place-items:center;aspect-ratio:1/.9;margin-bottom:8px;border-radius:var(--r-veld);background:radial-gradient(ellipse 70% 20% at 50% 92%,rgba(20,36,60,.10),transparent 70%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.wp-kies-beeld img{width:78%;height:86%;object-fit:contain}
.wp-kies strong{color:var(--petrol);line-height:1.25}
.wp-kies em{font-style:normal;font-size:.875rem;color:var(--zacht)}
@media (min-width:960px){
  .wp-raster{grid-template-columns:minmax(0,1fr) 380px;gap:clamp(24px,3vw,44px)}
  .wp-som{position:sticky;top:100px}
  .wp-kiesrij{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
}
@media (max-width:520px){
  .wregel{grid-template-columns:64px minmax(0,1fr) auto;gap:12px}
  .wlijst-groot .wregel{grid-template-columns:76px minmax(0,1fr) auto}
}
@media (max-width:900px){.wagenpagina .voet{padding-bottom:96px}}

/* ------------------------------------------------------------ afrekenpagina */
.afkop{background:var(--grond);border-bottom:1px solid var(--lijn)}
.afkop-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.afkop-veilig{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:700;font-size:.9375rem;color:var(--petrol)}
.afkop-veilig svg{width:20px;height:20px;color:var(--koraal)}
.af{padding-bottom:clamp(50px,7vw,90px)}
.af-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;margin-top:clamp(10px,2vw,22px)}
.af-raster[hidden],.af-leeg[hidden],.bedankt[hidden],.af-stap[hidden],.af-fouten[hidden]{display:none}
.af-form h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:4px}
.af-form{counter-reset:stap}
.af-stap{counter-increment:stap;min-width:0;margin:16px 0 0;padding:clamp(18px,2.6vw,30px);border:0}
.af-stap legend{float:left;width:100%;display:flex;align-items:center;gap:12px;padding:0;margin-bottom:16px;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
.af-stap legend + *{clear:both}
.af-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--perzik);box-shadow:inset 0 0 0 1.5px var(--perzik-rand);color:var(--petrol);font-size:.9375rem;font-weight:800;flex:none;transition:background-color .25s,color .25s,transform .35s var(--soepel)}
.af-nr::before{content:counter(stap)}
.af-stap.klaar .af-nr{background:var(--perzik-diep);box-shadow:none;color:var(--koraal-diep);transform:rotate(360deg)}
.af-stap.klaar .af-nr::before{content:"";width:14px;height:8px;margin-top:-3px;border-left:2.5px solid;border-bottom:2.5px solid;rotate:-45deg}
.af-uitleg{margin:0 0 16px;font-size:.9375rem}
.af-velden{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 12px}
.veld{grid-column:span 3;margin:0;min-width:0}
.veld.breed{grid-column:1/-1}
.veld.smal{grid-column:span 2}
.veld label{display:block;margin-bottom:6px;font-size:.9375rem;font-weight:700;color:var(--petrol)}
.veld label i{font-style:normal;font-weight:500;color:var(--zacht)}
.veld input:not([type=checkbox]),.veld select{width:100%}
.veld select{min-height:54px;padding:12px 44px 12px 16px;background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A5B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;
  color:var(--petrol);border:1.5px solid #7A8390;border-radius:var(--r-veld);font:inherit;font-size:1rem;appearance:none;-webkit-appearance:none;cursor:pointer}
.veld select:focus-visible{outline:3px solid var(--koraal);outline-offset:2px;border-color:var(--koraal)}
.veld-hulp{display:block;margin-top:6px;font-size:.875rem;color:var(--zacht)}
.veld-fout{display:block;margin-top:6px;font-size:.875rem;font-weight:700;color:var(--fout)}
.veld-fout:empty{display:none}
.veld.fout input:not([type=checkbox]){border-color:var(--fout);border-width:2px;background:#FFF7F4}
.veld.fout .veld-hulp{display:none}
.keuzes{display:grid;gap:10px}
.keus{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:68px;padding:12px 16px;border-radius:var(--r-veld);background:var(--wit);
  border:1.5px solid #C7D0DD;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.keus:hover{border-color:var(--petrol)}
.keus input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.keus-rond{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #7A8390;background:var(--wit);transition:border-color .15s,background-color .15s}
.keus-rond::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--goud);scale:0;transition:scale .2s var(--soepel)}
.keus:has(input:checked){border-color:var(--petrol);box-shadow:inset 0 0 0 1px var(--petrol);background:#F9FBFE}
.keus:has(input:checked) .keus-rond{border-color:var(--petrol);background:var(--petrol)}
.keus:has(input:checked) .keus-rond::after{scale:1}
.keus:has(input:focus-visible){outline:3px solid var(--koraal);outline-offset:2px}
.keus-tekst{display:grid;line-height:1.3}
.keus-tekst strong{color:var(--petrol)}
.keus-tekst small{font-size:.875rem;color:var(--zacht)}
.keus-rechts{display:flex;align-items:center;gap:6px;color:var(--petrol)}
.keus-rechts b{font-weight:800;white-space:nowrap}
.keus-rechts img{width:40px;height:30px;padding:2px;border-radius:var(--r-klein);background:var(--wit);border:1px solid var(--lijn)}
.af-mollie{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.875rem;color:var(--zacht)}
.af-mollie svg{width:18px;height:18px;flex:none;color:var(--petrol)}
.af-slot{margin-top:20px}
.veld-vink{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;align-items:start}
.veld-vink input{width:26px;height:26px;margin:1px 0 0;accent-color:var(--petrol);cursor:pointer}
.veld-vink label{margin:0;font-weight:500;font-size:.9375rem;color:var(--tekst);line-height:1.5;cursor:pointer}
.veld-vink label a{color:var(--petrol);font-weight:700}
.veld-vink .veld-fout{grid-column:2}
.af-fouten{margin:12px 0 0;padding:12px 16px;border-radius:var(--r-veld);background:#FFF1EC;color:var(--fout);font-weight:700;font-size:.9375rem}
.af-slot .knop-koop{min-height:64px}
.knop-bedrag{font-weight:800}
.knop-bedrag::before{content:"·";margin-right:.6em;opacity:.7}
.af-zij{order:-1;display:grid;gap:16px;min-width:0}
.af-overzicht{padding:0 clamp(16px,2vw,24px);border-radius:var(--r)}
.af-overzicht summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;list-style:none;cursor:pointer;font-weight:800;color:var(--petrol)}
.af-overzicht summary::after{display:none}
.af-overzicht summary{padding:0}
.af-overzicht summary:hover{color:var(--petrol)}
.af-overzicht summary strong{white-space:nowrap}
.af-overzicht summary > span{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.af-overzicht summary > span::after{content:"";align-self:center;width:9px;height:9px;margin-left:4px;border-right:2.5px solid var(--koraal);border-bottom:2.5px solid var(--koraal);rotate:45deg;translate:0 -3px;transition:rotate .2s,translate .2s}
.af-overzicht[open] summary > span::after{rotate:-135deg;translate:0 2px}
.af-overzicht summary small{font-weight:600;font-size:.875rem;color:var(--zacht)}
.af-overzicht summary strong{font-size:1.25rem;letter-spacing:-.02em}
.af-overzicht[open] summary strong{visibility:hidden}
.af-wijzig{display:none;min-height:44px;align-items:center;padding:0 4px;font-size:.9375rem;font-weight:700;color:var(--koraal-diep);text-underline-offset:4px}
.af-overzicht[open] .af-wijzig{display:inline-flex}
.af-overzicht[open] summary strong{display:none}
.af-overzicht .koop-zeker{margin:0;padding:16px 16px;border-radius:var(--r-veld);background:linear-gradient(180deg,#F1F3F6,#E3E7EC);margin-bottom:clamp(16px,2vw,24px)}
.af-overzicht .som{padding-bottom:16px}
.af-overzicht .wlijst{border-top:1px solid var(--lijn);padding-top:4px}
.af-overzicht .som{padding:12px 0 20px;border-top:1px solid var(--lijn)}
.af-leeg{display:grid;justify-items:center;gap:12px;max-width:520px;margin:clamp(30px,6vw,70px) auto;text-align:center}
.af-leeg h1{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.af-leeg p{margin:0}
.afvoet{border-top:1px solid var(--lijn);padding:22px 0 calc(22px + env(safe-area-inset-bottom));font-size:.9375rem}
.afvoet-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.afvoet p{margin:0}
.afvoet a{color:var(--petrol);font-weight:700}
.afvoet .betaalrij{margin:0}
@media (min-width:960px){
  .af-raster{grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,4vw,64px)}
  .af-zij{order:0;position:sticky;top:24px;margin-top:8px}
  .af-overzicht summary{pointer-events:none;min-height:66px;font-size:1.25rem}
  .af-overzicht{padding-top:6px}
  .af-wijzig{pointer-events:auto}
  .af-overzicht summary > span::after,.af-overzicht summary strong{display:none}
}
@media (max-width:520px){
  .af-velden{gap:12px 10px}
  .af-adres .veld.smal{grid-column:span 3}
  .af-adres #postcode{letter-spacing:.02em}
  .keus{grid-template-columns:24px minmax(0,1fr) auto;gap:10px;padding:12px}
  .keus-rechts img{width:34px;height:26px}
}

/* ------------------------------------------------------------ bedankt */
.bedankt{padding-top:clamp(16px,3vw,36px)}
.bd-kaart{position:relative;display:grid;justify-items:center;gap:16px;max-width:760px;margin-inline:auto;padding:clamp(28px,5vw,60px) clamp(18px,4vw,56px);border-radius:var(--R);text-align:center;overflow:hidden}
.bd-kaart h1{font-size:clamp(2rem,4.4vw,3.2rem);outline:0}
.bd-kaart .lood{margin:0;max-width:44ch}
.bd-vink{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--petrol);color:var(--goud);animation:bdpop .6s var(--soepel) both}
.bd-vink svg{width:52px;height:52px}
.bd-vink circle{display:none}
.bd-vink path{stroke-dasharray:40;stroke-dashoffset:40;animation:bdteken .5s .35s ease-out forwards}
@keyframes bdpop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes bdteken{to{stroke-dashoffset:0}}
.bd-sterren{position:absolute;left:50%;top:clamp(74px,9vw,106px);width:0;height:0;pointer-events:none}
.bd-sterren i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;color:var(--goud);opacity:0;animation:bdster 1.5s .3s var(--soepel) both}
.bd-sterren svg{width:100%;height:100%}
@keyframes bdster{0%{transform:none;opacity:0}15%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--d)) scale(var(--s));opacity:0}}
.bd-sterren i:nth-child(1){--x:-170px;--y:-40px;--d:120deg;--s:1.2}
.bd-sterren i:nth-child(2){--x:-120px;--y:-90px;--d:-80deg;--s:.8}
.bd-sterren i:nth-child(3){--x:-60px;--y:-70px;--d:200deg;--s:1.4;animation-delay:.38s}
.bd-sterren i:nth-child(4){--x:60px;--y:-74px;--d:-160deg;--s:1}
.bd-sterren i:nth-child(5){--x:124px;--y:-86px;--d:90deg;--s:1.3;animation-delay:.36s}
.bd-sterren i:nth-child(6){--x:176px;--y:-34px;--d:-110deg;--s:.9}
.bd-sterren i:nth-child(7){--x:-190px;--y:50px;--d:60deg;--s:.7;animation-delay:.42s}
.bd-sterren i:nth-child(8){--x:-130px;--y:110px;--d:-140deg;--s:1.1}
.bd-sterren i:nth-child(9){--x:136px;--y:104px;--d:150deg;--s:.8;animation-delay:.4s}
.bd-sterren i:nth-child(10){--x:194px;--y:56px;--d:-60deg;--s:1.2}
.bd-sterren i:nth-child(11){--x:-30px;--y:-120px;--d:40deg;--s:.7;animation-delay:.45s}
.bd-sterren i:nth-child(12){--x:26px;--y:-128px;--d:-30deg;--s:1}
.bd-demo{margin:0;padding:12px 16px;border-radius:var(--r-veld);background:var(--perzik);font-size:.9375rem;color:var(--tekst);max-width:52ch}
.bd-demo strong{color:var(--koraal-diep)}
.bd-stappen{display:grid;gap:12px;width:100%;margin:10px 0 0;padding:0;list-style:none;text-align:left}
.bd-stappen li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:16px;border-radius:var(--r);background:linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.bd-stappen b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 1.5px var(--perzik-rand);color:var(--petrol);font-size:.9375rem}
.bd-stappen span{font-size:.9375rem;line-height:1.5}
.bd-stappen strong{display:block;color:var(--petrol);font-size:1rem}
.bd-overzicht{width:100%;text-align:left;padding-top:6px;border-top:1px solid var(--lijn)}
.bd-overzicht .som{padding-top:12px;border-top:1px solid var(--lijn)}
.bd-knoppen{justify-content:center;margin-top:8px}
@media (min-width:720px){.bd-stappen{grid-template-columns:repeat(3,minmax(0,1fr))}.bd-stappen li{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------ klantlogin */
.lg-terug{font-weight:700;font-size:.9375rem;color:var(--petrol);text-underline-offset:4px}
.lg{padding-block:clamp(20px,5vw,70px) clamp(40px,7vw,90px)}
.lg-kaart{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:1040px;margin-inline:auto;padding:clamp(12px,1.200vw,16px);border-radius:var(--R)}
.lg-links{padding:clamp(20px,4vw,56px) clamp(10px,4vw,56px)}
.lg-links h1{font-size:clamp(2.1rem,4vw,3rem)}
.lg-lood{margin:.6em 0 1.8em;font-size:1.0625rem;max-width:30em}
.lg form{display:grid;gap:16px}
.lg form[hidden]{display:none}
.lg form > p{margin:0}
.lg-labelrij{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.lg-labelrij label{margin:0}
.lg-tekstknop{padding:4px 0;border:0;background:none;font:inherit;font-size:.875rem;font-weight:700;color:var(--koraal-diep);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lg-tekstknop:hover{color:var(--petrol)}
.lg-ww{position:relative;display:block}
.lg-ww input{width:100%;padding-right:86px;min-height:54px;padding-left:16px;background:var(--wit);color:var(--petrol);border:1.5px solid var(--db-veldrand);border-radius:var(--r-veld);font-size:1rem}
.lg-ww input:hover{border-color:var(--petrol)}
.lg-ww input:focus-visible{outline:3px solid var(--koraal);outline-offset:2px;border-color:var(--koraal)}
.lg input[type=password],.db input[type=password]{min-height:54px;padding:12px 16px;background:var(--wit);color:var(--petrol);border:1.5px solid var(--db-veldrand);border-radius:var(--r-veld);font-size:1rem}
.db input[type=password]:focus-visible{outline:3px solid var(--koraal);outline-offset:2px;border-color:var(--koraal)}
.lg-oog{position:absolute;right:6px;top:50%;translate:0 -50%;min-width:66px;min-height:42px;border:0;border-radius:var(--r-klein);background:var(--perzik);color:var(--petrol);font:inherit;font-size:.875rem;font-weight:700;cursor:pointer}
.lg-oog:hover{background:var(--perzik-diep)}
.lg .knop-koop{margin-top:4px}
.lg form.bezig .knop-koop{opacity:.7}
.lg-veilig{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.875rem;color:var(--zacht)}
.lg-veilig svg{width:17px;height:17px;color:var(--petrol)}
.lg-uitleg{font-size:1rem}
.lg-status{padding:12px 16px;border-radius:var(--r-veld);background:var(--perzik);font-size:.9375rem;color:var(--tekst)}
.lg-nieuw{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--lijn);font-size:.9375rem}
.lg-nieuw strong{color:var(--petrol)}
.lg-nieuw a{color:var(--koraal-diep);font-weight:700;text-underline-offset:4px;white-space:nowrap}
.lg-demo{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-veld);background:var(--perzik);font-size:.875rem}
.lg-demo strong{color:var(--koraal-diep)}
.lg-rechts{display:none}
@media (min-width:900px){
  .lg-kaart{grid-template-columns:minmax(0,1.050fr) minmax(0,1fr)}
  .lg-rechts{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2vw,28px);padding:clamp(20px,3vw,44px);border-radius:calc(var(--R) - 12px);
    background:radial-gradient(ellipse 60% 12% at 50% 46%,rgba(20,36,60,.08),transparent 70%),var(--db-vlak)}
  .lg-rechts img{width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%);mask-image:linear-gradient(90deg,transparent,#000 9%)}
  .lg-rechts ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
  .lg-rechts li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:.9375rem;line-height:1.45;color:var(--tekst)}
  .lg-rechts li svg{width:24px;height:24px;padding:4px;margin-top:2px;border-radius:50%;background:var(--wit);color:var(--koraal-diep)}
  .lg-rechts li strong{display:block;color:var(--petrol);font-size:1rem}
}

/* ------------------------------------------------------------ dashboard: kop en navigatie */
.dashboardpagina{background:var(--grond)}
.db-kop{position:sticky;top:0;z-index:40;background:var(--db-kopbg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn)}
.db-kop-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}
.db-wie{display:flex;align-items:center;gap:12px;min-width:0}
.db-initiaal{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--perzik-diep);color:var(--koraal-diep);font-weight:600;flex:none}
.db-wie-tekst{display:none;line-height:1.25;min-width:0}
.db-wie-tekst strong{color:var(--petrol);font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.db-wie-tekst small{font-size:.8125rem;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}
.db-uit{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1.5px solid var(--db-rand);border-radius:999px;background:var(--wit);color:var(--petrol);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s}
.db-uit:hover{border-color:var(--petrol);background:var(--perzik)}
.db-uit svg{width:19px;height:19px;flex:none}
.db-kop .db-uit span{display:none}
.db-uit-breed{margin-top:6px}
.db{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-block:clamp(18px,3vw,40px) 120px}
.db-nav{position:fixed;z-index:45;left:0;right:0;bottom:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--r) var(--r) 0 0;box-shadow:var(--schaduw)}
.db-nav ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
.db-nav a{display:grid;justify-items:center;gap:3px;min-height:54px;padding:6px 2px 4px;border-radius:var(--r-veld);text-decoration:none;font-size:.66rem;font-weight:600;color:var(--zacht);transition:background-color .15s,color .15s}
.db-nav svg{width:23px;height:23px}
.db-nav-lang{display:none}
.db-nav a[aria-current]{background:var(--perzik);color:var(--koraal-diep)}
.db-nav-winkel{display:none!important}
.db-view[hidden]{display:none}
.db-titel{margin-bottom:clamp(18px,2.4vw,28px)}
.db-titel h1{font-size:clamp(1.9rem,3.6vw,2.7rem);outline:0}
.db-titel p{margin:.4em 0 0;color:var(--zacht)}
.db-voorbeeld{margin:0 0 20px;padding:12px 16px;border-radius:var(--r-veld);background:var(--perzik);font-size:.875rem}
.db-voorbeeld strong{color:var(--koraal-diep)}
.db-voorbeeld[hidden]{display:none}
.db-inhoud{display:grid;gap:clamp(14px,1.800vw,22px)}
@media (min-width:700px){
  .db-wie-tekst{display:grid}
  .db-kop .db-uit span{display:inline}
}
@media (min-width:1000px){
  .db{grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;padding-bottom:90px}
  .db-nav{position:sticky;top:104px;left:auto;right:auto;bottom:auto;padding:10px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw);backdrop-filter:none;-webkit-backdrop-filter:none}
  .db-nav ul{grid-template-columns:minmax(0,1fr);gap:2px}
  .db-nav a{grid-template-columns:24px minmax(0,1fr);justify-items:start;align-items:center;gap:12px;min-height:50px;padding:10px 12px;font-size:1rem;color:var(--petrol)}
  .db-nav a:hover{background:var(--db-hover)}
  .db-nav-lang{display:inline}.db-nav-kort{display:none}
  .db-nav-winkel{display:grid!important;margin-top:8px;padding-top:16px!important;border-top:1px solid var(--lijn);border-radius:0 0 var(--r-veld) var(--r-veld)!important;color:var(--koraal-diep)!important}
}

/* ------------------------------------------------------------ dashboard: blokken */
.db-blok{padding:clamp(18px,2.4vw,28px);border-radius:var(--r);min-width:0}
.db-blok h2,.db-order h3,.db-kaart h3{font-size:1.25rem;letter-spacing:-.02em}
.db-blokkop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.db-blokkop a,.db-test{font-size:.9375rem;font-weight:600;color:var(--koraal-diep);text-underline-offset:4px}
.db-blok-sub{margin:4px 0 0;font-size:.875rem;color:var(--zacht)}
.db-leeg{margin:12px 0 4px;padding:20px;border-radius:var(--r-veld);background:var(--db-vlak);text-align:center;font-size:.9375rem}
.db-tegels{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.400vw,18px)}
.db-tegel{padding:clamp(16px,2vw,24px);border-radius:var(--r)}
.db-tegel p{margin:0}
.db-tegel-naam{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-diep)}
.db-getal{margin:6px 0 2px!important;font-size:clamp(2.2rem,4vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--petrol)}
.db-getal-woord{font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.5;text-transform:capitalize}
.db-tegel-sub{font-size:.875rem;color:var(--zacht)}
.db-melding{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 20px;border-radius:var(--r);background:var(--perzik)}
.db-melding p{margin:0;font-size:.9375rem;max-width:44ch}
.db-melding strong{color:var(--petrol)}
@media (min-width:640px){.db-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.db-tegel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px}.db-tegel-naam,.db-tegel-sub{grid-column:1}.db-getal{grid-column:2;grid-row:1/3;margin:0!important}.db-getal-woord{font-size:1.4rem}}

.db-staven{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(3px,.8vw,10px);height:var(--h);margin:20px 0 0;padding:0;list-style:none}
.db-staven li{display:grid;grid-template-rows:minmax(0,1fr) 22px;align-items:end;justify-items:center;min-width:0}
.db-staaf{position:relative;width:100%;max-width:44px;border-radius:var(--r-klein) var(--r-klein) 4px 4px;background:var(--perzik-diep);transition:background-color .15s}
.db-staaf b{position:absolute;left:50%;bottom:100%;translate:-50% -4px;font-size:.75rem;font-weight:600;color:var(--petrol)}
.db-staven li.top .db-staaf{background:var(--koraal)}
.db-staven li:hover .db-staaf{background:var(--koraal-diep)}
.db-staven small{align-self:end;font-size:.75rem;font-weight:600;color:var(--zacht);white-space:nowrap}
.db-staven-veel .db-staaf{border-radius:var(--r-klein) var(--r-klein) 2px 2px}
.db-staven-veel .db-staaf b{display:none}
.db-staven-veel li.top .db-staaf b,.db-staven-veel li:hover .db-staaf b{display:block}
.db-staven-veel small{overflow:visible;width:0;display:flex;justify-content:center}
.db-klaar .db-staaf{animation:db-groei .7s var(--soepel) both;transform-origin:bottom}
@keyframes db-groei{from{transform:scaleY(.05)}to{transform:none}}

.db-tracker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;margin:20px 0 4px;padding:0;list-style:none}
.db-tracker li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--zacht);text-align:center}
.db-tracker li + li::before{content:"";position:absolute;top:14px;right:50%;left:-50%;height:3px;border-radius:3px;background:var(--lijn)}
.db-tracker li.t-af + li::before{background:var(--koraal)}
.db-tracker i{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 2px var(--db-rand)}
.db-tracker svg{width:14px;height:14px}
.db-tracker li.t-af i{background:var(--perzik-diep);box-shadow:none;color:var(--koraal-diep)}
.db-tracker li.t-nu i{background:var(--koraal);box-shadow:0 0 0 5px var(--db-gloed);color:#fff}
.db-tracker li.t-af,.db-tracker li.t-nu{color:var(--petrol)}
.db-tracker li.t-nu{font-weight:600}
.db-pil{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border-radius:999px;background:var(--perzik);color:var(--koraal-diep);font-size:.8125rem;font-weight:600;white-space:nowrap}
.db-pil.klaar{background:#E6F1EE;color:#0F5A4E}

.db-beeld{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:var(--r-veld);background:var(--db-vlak)}
.db-beeld img{width:82%;height:82%;object-fit:contain}
.db-beeld img.adm-duim-ow{border-radius:4px;box-shadow:var(--schaduw-klein)}
.db-beeld-groot{width:clamp(76px,9vw,104px);height:clamp(76px,9vw,104px);border-radius:var(--r)}
.db-kort,.db-order-regels{display:grid;margin:12px 0 0;padding:0;list-style:none}
.db-kort li,.db-order-regels li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0}
.db-kort li + li,.db-order-regels li + li{border-top:1px solid var(--lijn)}
.db-kort span,.db-order-regels span:not(.db-beeld){display:grid;line-height:1.3;min-width:0}
.db-kort strong,.db-order-regels strong{color:var(--petrol)}
.db-kort small,.db-order-regels small{font-size:.875rem;color:var(--zacht)}
.db-kort em,.db-order-regels em{font-style:normal;font-weight:600;font-size:.9375rem;color:var(--petrol);white-space:nowrap}

/* ------------------------------------------------------------ dashboard: kaarten, tabel, bestellingen, gegevens */
.db-kaarten,.db-orders{display:grid;gap:clamp(14px,1.800vw,22px);margin:0;padding:0;list-style:none}
.db-kaart,.db-order{padding:clamp(18px,2.4vw,28px);border-radius:var(--r);transition:box-shadow .3s}
.db-kaart.bewaard{box-shadow:0 0 0 2px var(--koraal),var(--schaduw)}
.db-kaart-kop{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.db-kaart-naam{min-width:0}
.db-kaart-naam p{margin:2px 0 0;font-size:.875rem;color:var(--zacht);overflow-wrap:anywhere}
.db-kaart-naam p:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.db-kaart-tik{font-weight:600;color:var(--petrol)}
.db-kaart-form{display:grid;gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid var(--lijn)}
@media (min-width:760px){.db-kaart-form{grid-template-columns:minmax(0,1.700fr) minmax(0,1fr);align-items:start}.db-kaart-form .veld.breed{grid-column:auto}.db-kaart-form .db-kaart-acties{grid-column:1/-1}}
.db-kaart-form .veld input{width:100%}
.db-kaart-acties{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:4px}
.db-order .db-kaart-acties{margin-top:16px}
.db-meer{margin:0;text-align:center}
.db-order-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.db-order-kop p{margin:3px 0 0;font-size:.875rem;color:var(--zacht)}
.db-order-regels{margin-top:16px;border-top:1px solid var(--lijn)}
.db-order-som{display:grid;gap:6px;margin:0;padding-top:12px;border-top:1px solid var(--lijn);font-size:.9375rem}
.db-order-som div{display:flex;justify-content:space-between;gap:16px}
.db-order-som dd{margin:0;color:var(--petrol);text-align:right}
.db-order-som strong{font-size:1.125rem}
.db-periode{display:inline-flex;justify-self:start;padding:4px;border-radius:999px;background:var(--wit);box-shadow:var(--schaduw-klein)}
.db-periode button{min-height:40px;padding:6px 16px;border:0;border-radius:999px;background:none;font:inherit;font-size:.875rem;font-weight:600;color:var(--zacht);cursor:pointer}
.db-periode button[aria-pressed="true"]{background:var(--perzik-diep);color:var(--koraal-diep)}
.db-tabel{width:100%;margin-top:10px;border-collapse:collapse;font-size:.9375rem}
.db-tabel th,.db-tabel td{padding:12px 0;text-align:left;vertical-align:middle;border-top:1px solid var(--lijn)}
.db-tabel thead th{border:0;padding-bottom:8px;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
.db-tabel tbody th{font-weight:400;padding-right:12px}
.db-tabel tbody th strong{display:block;color:var(--petrol)}
.db-tabel tbody th small{font-size:.8125rem;color:var(--zacht)}
.db-tabel td:nth-child(2){width:46%;white-space:nowrap}
.db-tabel td:nth-child(2) b{display:inline-block;min-width:2.6em;text-align:right;color:var(--petrol)}
.db-balk{display:inline-block;vertical-align:middle;width:calc(100% - 3.4em);height:10px;border-radius:999px;background:var(--db-spoor);overflow:hidden}
.db-balk i{display:block;height:100%;border-radius:999px;background:var(--koraal)}
.db-tabel td:last-child:not(:nth-child(2)){text-align:right;color:var(--zacht);white-space:nowrap;padding-left:12px}
.db-gegevens{grid-template-columns:minmax(0,1fr);align-items:start}
.db-gegevens h2{margin-bottom:16px}
.db-gegevens form .knop{margin-top:20px}
.db-gegevens .veld input{width:100%}
.db-zij{display:grid;gap:clamp(14px,1.800vw,22px)}
.db-hulp p{margin:0 0 12px;font-size:.9375rem}
.db-hulp a{color:var(--koraal-diep);font-weight:600}
.db-toast{position:fixed;z-index:80;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));translate:-50% 20px;width:max-content;max-width:calc(100% - 32px);margin:0;padding:12px 20px;border-radius:var(--r-veld);
  background:var(--petrol);color:#fff;font-size:.9375rem;font-weight:600;box-shadow:var(--schaduw);opacity:0;pointer-events:none;transition:opacity .25s,translate .25s var(--soepel)}
.db-toast.zien{opacity:1;translate:-50% 0}
@media (min-width:1000px){.db-toast{bottom:32px}.db-gegevens{grid-template-columns:minmax(0,1.300fr) minmax(0,1fr)}}
@media (max-width:560px){.db-smal-weg{display:none}.db-tabel td:nth-child(2){width:50%}.db-tracker li{font-size:.75rem}}

/* ------------------------------------------------------------ dashboard: verfijning */
.dashboardpagina{font-variant-numeric:tabular-nums}
.db-titel{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.db-titel h1{font-size:clamp(1.7rem,2.8vw,2.15rem);letter-spacing:-.03em}
.db-titel p{font-size:1rem}
.db-datum{margin:0 0 6px!important;font-size:.75rem!important;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--koraal-diep)!important}
.db-datum::first-letter{text-transform:uppercase}
.db-acties{display:flex;flex-wrap:wrap;gap:10px}
.db-acties .knop{min-height:46px}
.db-voorbeeld{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 16px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--wit);box-shadow:var(--schaduw-klein);font-size:.8125rem;color:var(--zacht)}
.db-voorbeeld strong{padding:3px 10px;border-radius:999px;background:var(--perzik);color:var(--koraal-diep);font-size:.75rem;letter-spacing:.04em}
.db-nav-n{display:none}
.db-blok h2,.db-order h3,.db-kaart h3{font-size:1.0625rem;letter-spacing:-.015em}
.db-blokkop{align-items:flex-start}
.db-blokkop a{white-space:nowrap}
.db-blok-sub{font-size:.875rem}

.db-tegel{position:relative;display:block;overflow:hidden;padding:clamp(18px,2vw,22px)}
.db-tegel-ic{position:absolute;top:clamp(14px,1.600vw,18px);right:clamp(14px,1.600vw,18px);display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-veld);background:var(--perzik);color:var(--koraal-diep)}
.db-tegel-ic svg{width:20px;height:20px}
.db-tegel-naam{font-size:.75rem;letter-spacing:.11em;color:var(--zacht)}
.db-getal{display:flex;align-items:baseline;gap:10px;margin:10px 0 2px!important;font-size:clamp(2rem,3vw,2.5rem)}
.db-getal small{font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--zacht)}
.db-trend{align-self:center;padding:3px 8px;border-radius:999px;background:#E6F1EE;color:#0F5A4E;font-size:.75rem;font-weight:600;letter-spacing:0}
.db-trend.min{background:var(--perzik);color:var(--koraal-diep)}
.db-tegel-sub{font-size:.875rem}
.db-vonk{display:block;width:100%;height:38px;margin-top:12px;overflow:visible}
.db-vonk polygon{fill:var(--perzik);stroke:none}
.db-vonk polyline{fill:none;stroke:var(--koraal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.db-duimen{display:flex;margin-top:12px;height:38px}
.db-duimen .db-beeld{width:38px;height:38px;border-radius:var(--r-veld);box-shadow:0 0 0 2px var(--wit)}
.db-duimen .db-beeld + .db-beeld{margin-left:-8px}
.db-meer-n{font-size:.75rem;font-weight:600;color:var(--petrol)}
.db-meter{position:relative;display:block;height:8px;margin-top:28px;border-radius:999px;background:var(--db-spoor)}
.db-meter i{display:block;height:100%;border-radius:999px;background:var(--koraal)}
.db-meter b{position:absolute;left:50%;top:-5px;width:2px;height:18px;border-radius:2px;background:var(--petrol)}
@media (max-width:639px){.db-tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.db-tegel{display:block;padding:12px 12px;border-radius:var(--r)}.db-tegel-ic,.db-vonk,.db-duimen,.db-meter,.db-trend{display:none}.db-tegel-naam{font-size:.6rem;letter-spacing:.06em;min-height:2.6em;line-height:1.3}.db-getal{flex-wrap:wrap;gap:0 6px;margin:6px 0 4px!important;font-size:1.7rem}.db-getal small{font-size:.75rem}.db-getal-woord{font-size:1rem!important;line-height:1.9}.db-tegel-sub{font-size:.75rem;line-height:1.35}}

.db-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.800vw,22px);align-items:stretch}
@media (min-width:1180px){.db-duo{grid-template-columns:minmax(0,1fr) 290px}.db-duo-een{grid-template-columns:minmax(0,1fr)}}
.db-graf{position:relative;height:var(--h);margin-top:24px;padding-left:32px}
.db-raster{position:absolute;inset:0 0 24px 34px}
.db-raster span{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--db-raster)}
.db-raster span:last-of-type{border-top-color:var(--db-rand)}
.db-raster span b{position:absolute;right:100%;top:0;translate:-10px -50%;font-size:.75rem;font-weight:600;color:var(--zacht)}
.db-gem{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed #97A3B5}
.db-legenda{display:flex;align-items:center;gap:8px;margin:12px 0 0 32px;font-size:.8125rem;color:var(--zacht)}
.db-legenda i{width:22px;height:0;border-top:1.5px dashed #97A3B5}
.db-staven{position:relative;height:100%;margin:0;gap:clamp(4px,1vw,14px)}
.db-staven li{grid-template-rows:minmax(0,1fr) 24px}
.db-staaf{max-width:34px;border-radius:var(--r-klein) var(--r-klein) 0 0}
.db-staaf b{font-size:.75rem;opacity:0;transition:opacity .15s}
.db-staven li.top .db-staaf b,.db-staven li.vandaag .db-staaf b,.db-staven li:hover .db-staaf b{opacity:1}
.db-staven-veel .db-staaf b{display:block}
.db-staven li.vandaag small{font-weight:600;color:var(--koraal-diep)}
.db-staven li.vandaag:not(.top) .db-staaf{background:var(--db-vandaag)}
.db-staven-veel .db-staaf{border-radius:4px 4px 0 0}

.db-tracker-v{display:grid;gap:0;margin:20px 0 0;padding:0;list-style:none}
.db-tracker-v li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding-bottom:20px}
.db-tracker-v li:last-child{padding-bottom:0}
.db-tracker-v li:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;border-radius:2px;background:var(--lijn)}
.db-tracker-v li.t-af::before{background:var(--koraal)}
.db-tracker-v i{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 2px var(--db-rand)}
.db-tracker-v svg{width:13px;height:13px}
.db-tracker-v li.t-af i{background:var(--perzik-diep);box-shadow:none;color:var(--koraal-diep)}
.db-tracker-v li.t-nu i{background:var(--koraal);box-shadow:0 0 0 5px var(--db-gloed);color:#fff}
.db-tracker-v span{display:grid;line-height:1.3;padding-top:3px}
.db-tracker-v strong{font-size:.9375rem;font-weight:600;color:var(--zacht)}
.db-tracker-v li.t-af strong,.db-tracker-v li.t-nu strong{color:var(--petrol);font-weight:600}
.db-tracker-v small{font-size:.8125rem;color:var(--zacht)}
.db-tracker-v li.t-nu small{color:var(--koraal-diep);font-weight:600}

.db-rijen{display:grid;margin:12px 0 -8px;padding:0;list-style:none}
.db-rijen li + li{border-top:1px solid var(--lijn)}
.db-rijen a{display:grid;grid-template-columns:48px minmax(0,1.200fr) 112px minmax(0,1fr) 3.2em 18px;gap:16px;align-items:center;margin-inline:-10px;padding:10px 10px;border-radius:var(--r-veld);text-decoration:none;transition:background-color .15s}
.db-rijen a:hover{background:var(--db-hover)}
.db-rijen .db-beeld{width:48px;height:48px;border-radius:var(--r-veld)}
.db-rij-naam{display:grid;line-height:1.3;min-width:0}
.db-rij-naam strong{color:var(--petrol);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-rij-naam small{font-size:.8125rem;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-rijen .db-balk{width:100%;height:8px}
.db-rijen .db-balk-nul{background:none}
.db-rijen .db-pil{justify-self:start}
.db-rijen em{font-style:normal;font-weight:600;color:var(--petrol);text-align:right}
.db-rijen a > svg{width:18px;height:18px;color:var(--db-ic);transition:translate .2s,color .2s}
.db-rijen a:hover > svg{translate:3px 0;color:var(--koraal)}
@media (max-width:700px){.db-rijen a{grid-template-columns:44px minmax(0,1fr) auto 18px;gap:12px}.db-rijen .db-balk,.db-rijen .db-pil{display:none}.db-rijen .db-beeld{width:44px;height:44px}.db-acties{width:100%}.db-acties .knop{flex:1}}
@media (min-width:1000px){
  .db-nav a{grid-template-columns:24px minmax(0,1fr) auto}
  .db-nav-n{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--db-spoor);color:var(--petrol);font-size:.75rem;font-weight:600}
  .db-nav-n:empty,.db-nav-n[hidden]{display:none}
  .db-nav a[aria-current] .db-nav-n{background:var(--wit);color:var(--koraal-diep)}
  .db-nav #n-bestellingen{background:var(--koraal);color:#fff}
}

/* ------------------------------------------------------------ login + dashboard: eigen, rustig kleurenschema (petrol op koel wit) */
.dashboardpagina,.loginpagina{
  --grond:#F1F5FA;
  --db-hover:#F0F5FC; --db-spoor:#E2E9F4; --db-rand:#C2CEDF; --db-raster:#E4EBF5; --db-vandaag:#5F81B5; --db-ic:#96A4BA; --db-gloed:rgba(29,95,214,.16);
  --db-vlak:linear-gradient(180deg,#F4F6F9,#E7EBF0); --db-kopbg:rgba(255,255,255,.92); --db-veldrand:#868F9C;
  background:var(--grond)}
.dashboardpagina .kaart,.loginpagina .kaart{border:1px solid var(--lijn)}
.dashboardpagina .afkop,.loginpagina .afkop,.db-kop{background:var(--db-kopbg)}
.dashboardpagina .knop-lijn,.loginpagina .knop-lijn{background:var(--wit);border-color:var(--db-rand)}
.dashboardpagina input,.dashboardpagina select,.loginpagina input{border-color:var(--db-veldrand)}
.db-initiaal{background:var(--petrol);color:var(--goud)}
.db-nav a[aria-current]{background:var(--perzik);color:var(--petrol)}
.db-nav a[aria-current] svg{color:var(--koraal)}
.db-tegel-ic{background:var(--perzik);color:var(--koraal)}
.db-staaf{background:var(--perzik-diep)}
.db-staven li.top .db-staaf{background:var(--petrol)}
.db-staven li:hover .db-staaf{background:var(--koraal)}
.db-vonk polygon{fill:var(--perzik)}
.db-balk i,.db-meter i{background:var(--koraal)}
.db-tracker li.t-af i,.db-tracker-v li.t-af i{background:var(--perzik-diep);color:var(--koraal-diep)}
.db-pil{background:#FFF3D6;color:#7A5300}
.db-pil.klaar{background:#DFF1EA;color:#0F5A4E}
.db-trend.min{background:#FDECEA;color:var(--fout)}
.db-nav #n-bestellingen{background:var(--goud);color:var(--petrol)}
.db-voorbeeld strong,.lg-demo strong{background:#FFF3D6;color:#7A5300}
.lg-demo{background:var(--wit);border:1px solid var(--lijn)}
.lg-demo strong{padding:2px 8px;border-radius:999px;margin-right:4px;font-size:.8125rem}
.db-kaart.bewaard{box-shadow:0 0 0 2px var(--koraal),var(--schaduw)}

/* ------------------------------------------------------------ beheer */
.adm-merk{display:inline-flex;align-items:center;gap:12px;min-width:0}
.adm-label{padding:4px 10px;border-radius:999px;background:var(--petrol);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.beheerpagina .db-kop a.db-uit{text-decoration:none}
@media (max-width:999px){.adm-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adm-tegels .adm-euro{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.3;white-space:nowrap}
.adm-balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.adm-filter{flex-wrap:wrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
.adm-filter button{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.adm-filter b{min-width:22px;padding:1px 6px;border-radius:999px;background:var(--db-spoor);font-size:.75rem;color:var(--petrol)}
.adm-filter button[aria-pressed="true"] b{background:var(--wit)}
.adm-zoek{flex:1 1 240px;max-width:340px;margin:0}
.adm-zoek input{min-height:46px;border-width:1px;border-color:var(--db-rand);font-size:.9375rem;box-shadow:var(--schaduw-klein)}
.adm-n{margin:0 0 4px}
.adm-lijst{margin-top:6px}
.adm-lijst a{grid-template-columns:118px minmax(0,1.300fr) 150px 232px 112px 5.4em 18px;gap:12px}
.adm-nr,.adm-klant{display:grid;line-height:1.3;min-width:0}
.adm-nr strong,.adm-klant strong{color:var(--petrol);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-nr small,.adm-klant small{font-size:.8125rem;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-duimen{display:flex;align-items:center;min-width:0}
.adm-duimen .db-beeld{width:38px;height:38px;border-radius:var(--r-klein);box-shadow:0 0 0 2px var(--wit)}
.adm-duimen .db-beeld + .db-beeld{margin-left:-10px}
.adm-duimen small{margin-left:10px;font-size:.8125rem;color:var(--zacht);white-space:nowrap}
.adm-vlag{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:0}
.adm-let{background:#FDECEA;color:var(--fout)}
.adm-echt{background:var(--perzik);color:var(--koraal-diep)}
.adm-pil-0{background:#FFF3D6;color:#7A5300}
.adm-pil-1{background:var(--perzik);color:var(--koraal-diep)}
.adm-pil-2{background:#EEE9FB;color:#4B33A8}
.adm-pil-3{background:#DFF1EA;color:#0F5A4E}
.adm-terug{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:6px;font-weight:700;font-size:.9375rem;color:var(--petrol);text-underline-offset:4px}
.adm-terug .kp{width:1.4em;height:1.4em;color:var(--koraal);rotate:180deg}
.adm-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.800vw,22px);align-items:start}
.adm-regels{display:grid;margin:8px 0 0;padding:0;list-style:none}
.adm-regels li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:start;padding:16px 0}
.adm-regels li + li{border-top:1px solid var(--lijn)}
.adm-regels h3{font-size:1.0625rem;letter-spacing:-.015em;margin-bottom:8px}
.adm-regels dl{display:grid;gap:6px;margin:0;font-size:.9375rem}
.adm-regels dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline}
.adm-regels dt{color:var(--zacht)}
.adm-regels dd{margin:0;color:var(--petrol);overflow-wrap:anywhere}
.adm-regels dd a{color:var(--koraal-diep);text-underline-offset:3px}
.adm-logo{display:block;max-width:120px;max-height:70px;margin-top:8px;padding:6px;border-radius:var(--r-klein);background:var(--db-spoor)}
.adm-druk{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px 6px 12px;border:0;border-radius:999px;background:var(--petrol);color:#fff;font:inherit;font-size:.875rem;font-weight:700;cursor:pointer}
.adm-druk:hover{background:var(--petrol-3)}
.adm-druk:disabled{opacity:.6;cursor:progress}
.adm-druk svg{width:18px;height:18px;flex:none}
.adm-druk-2{margin-left:8px;background:var(--wit);color:var(--petrol);box-shadow:inset 0 0 0 1.500px var(--db-rand)}
.adm-druk-2:hover{background:var(--perzik)}
.adm-ok{color:#0F5A4E;font-weight:700}.adm-niet{color:var(--fout);font-weight:700}
.adm-afloop{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--zacht)}
.adm-afloop select{min-height:38px;padding:4px 28px 4px 12px;border:1px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-weight:700;color:var(--petrol)}
.adm-druk-maat{display:block;margin-top:6px;font-size:.8125rem;color:var(--zacht)}
.adm-kopie,.adm-tekstknop{margin-left:10px;padding:4px 10px;border:1px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.8125rem;font-weight:700;color:var(--petrol);cursor:pointer}
.adm-kopie:hover{background:var(--perzik)}
.adm-linkrij{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adm-linkrij .adm-link{flex:1 1 100%;min-width:0;padding:8px 12px;border:1px solid var(--db-rand);border-radius:var(--r-klein);background:var(--wit);font:inherit;font-size:.875rem;color:var(--petrol)}
.adm-linkrij .adm-link:focus-visible{outline:2px solid var(--koraal);outline-offset:1px}
.adm-linkrij .adm-kopie{margin-left:0;flex:none;padding:8px 12px}
.adm-linkna{display:flex;align-items:center;margin-top:6px}
.adm-chiplijst{list-style:none;margin:0;padding:0;display:grid;gap:6px}.adm-chiplijst li{padding:0;border:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.adm-chiplijst span{font-size:.8125rem;font-weight:700;color:#5B6B85}.adm-chiplijst code{padding:4px 10px;border:1px solid var(--db-rand);border-radius:var(--r-klein);background:var(--grond);font-size:.875rem;color:var(--petrol);overflow-wrap:anywhere}.adm-chiplijst .adm-kopie{margin-left:0}
.adm-chipuitleg{display:block;margin-top:6px;font-size:.75rem;color:#5B6B85;max-width:44em}
.adm-mails{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.adm-mails li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--db-rand);border-radius:var(--r-veld);background:var(--grond)}
.adm-mails li span{display:grid;gap:2px;min-width:0}.adm-mails strong{font-size:.9375rem;color:var(--petrol)}.adm-mails small{font-size:.75rem;color:#5B6B85;overflow-wrap:anywhere}
.adm-mails a{flex:none;font-size:.875rem;font-weight:700}.adm-mails li span.adm-maillinks{flex:none;justify-items:end;gap:4px}
.adm-mails-leeg,.adm-mailuitleg{margin:0 0 12px;font-size:.875rem;color:#5B6B85}.adm-mailuitleg{margin:12px 0 0}
.adm-mailknoppen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;font-size:.8125rem;color:#5B6B85}.adm-mailknoppen .adm-kopie{margin-left:0}
.adm-accountuitleg{margin:10px 0 0}.adm-mails+.adm-breed,.adm-breed+.adm-breed{margin-top:10px}
.adm-geenmail{margin-top:12px!important}.adm-geenmail input{width:100%;margin-bottom:8px}.adm-geenmail .adm-kopie{margin-left:0}
.adm-kopie:disabled,.beheerpagina .knop:disabled{opacity:.5;cursor:default}
@media (max-width:560px){.adm-linkrij{flex-wrap:wrap}.adm-linkrij .adm-link{flex-basis:100%}}
.adm-tekstknop{display:block;margin:10px auto 0;border:0;background:none;text-decoration:underline;text-underline-offset:4px;color:var(--zacht);font-size:.875rem}
.adm-breed{width:100%;margin-top:20px}
.adm-klaar{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-weight:700;color:#0F5A4E}
.adm-klaar svg{width:24px;height:24px;padding:4px;border-radius:50%;background:#DFF1EA}
.adm-tt{margin-top:20px!important;padding-top:16px;border-top:1px solid var(--lijn)}
.adm-tt input,.beheerpagina textarea{width:100%}
.beheerpagina textarea{min-height:92px;padding:12px 16px;border:1.500px solid var(--db-veldrand);border-radius:var(--r-veld);background:var(--wit);font:inherit;color:var(--petrol);resize:vertical}
.beheerpagina textarea:focus-visible{outline:3px solid var(--koraal);outline-offset:2px}
.beheerpagina .db-blok h2{margin-bottom:6px}
.beheerpagina .db-blok .knop-klein{margin-top:12px}
.adm-adres{margin:6px 0 0;font-size:.9375rem;line-height:1.6;color:var(--petrol)}
.adm-mail{margin:10px 0 0;font-size:.9375rem}
.adm-mail a{color:var(--koraal-diep);font-weight:700;overflow-wrap:anywhere}
.adm-som{border-top:0;padding-top:6px}
.adm-tabel td{white-space:nowrap}
.adm-tabel td:nth-child(2){width:auto}
.adm-tabel td:last-child:not(:nth-child(2)){text-align:left;padding-left:0}
.adm-tabel tbody th small a{color:var(--koraal-diep)}
@media (min-width:640px){.adm-tegels{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1180px){.adm-duo{grid-template-columns:minmax(0,1.500fr) minmax(0,1fr)}}
@media (max-width:1180px){.adm-lijst a{grid-template-columns:104px minmax(0,1fr) auto 5.4em 18px}.adm-duimen,.adm-vlag{display:none}}
@media (max-width:639px){
  .adm-tegels{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .adm-lijst a{grid-template-columns:minmax(0,1fr) auto 18px;gap:4px 12px}
  .adm-lijst .adm-nr{grid-column:1;grid-row:1}.adm-lijst .adm-klant{grid-column:1;grid-row:2}
  .adm-lijst .db-pil{display:inline-flex;grid-column:2;grid-row:1;justify-self:end}.adm-lijst em{grid-column:2;grid-row:2}
  .adm-lijst a > svg{grid-column:3;grid-row:1/3}
  .adm-regels dl div{grid-template-columns:minmax(0,1fr);gap:0}
  .adm-zoek{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .onthul{opacity:1;transform:none}
  .js .dash-beeld .staven span{transform:none!important}
  .golf{display:none}
}
@media (forced-colors:active){
  .knop,.kies[aria-selected="true"],.kleur input:checked + label,.tabs button[aria-selected="true"]{border:2px solid ButtonText}
  .sterkeuze label.vol svg{fill:Highlight}
}

/* dashboard: scans resetten */
.db-reset{padding:6px 12px;border:1px solid var(--db-rand,#E5E5EB);border-radius:999px;background:var(--wit);font:inherit;font-size:.8125rem;font-weight:600;color:var(--petrol);cursor:pointer;white-space:nowrap}
.db-reset:hover{background:var(--perzik)}.db-reset.zeker{border-color:var(--fout);background:#FDECEA;color:var(--fout)}.db-reset:disabled{opacity:.5;cursor:default}
.db-resetcel{text-align:right;width:1%}
.db-resetrij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--lijn);font-size:.875rem;color:#5B6B85}

/* dashboard: statistieken */
.st-balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.st-periode{flex-wrap:wrap;border-radius:var(--r)}
.st-rechts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.st-kies select,.st-datums input{min-height:44px;padding:8px 12px;border:1.5px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.875rem;font-weight:600;color:var(--petrol);max-width:240px}
.st-export{min-height:44px;padding:8px 16px;border:1.5px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.875rem;font-weight:600;color:var(--petrol);cursor:pointer}
.st-export:hover{background:var(--perzik)}
.st-datums{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:.875rem;font-weight:600;color:var(--zacht)}.st-datums label{display:flex;align-items:center;gap:8px}
.st-tegels{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))!important}
.st-woord{font-size:clamp(1.5rem,2.4vw,1.9rem)!important;line-height:1.5!important;text-transform:none!important}
.st-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(14px,1.8vw,22px)}
.st-inzicht{margin:12px 0 4px;padding:12px 16px;border-radius:var(--r-veld);background:var(--db-vlak);font-size:.9375rem;line-height:1.55;color:var(--petrol)}
.st-scroll{overflow-x:auto}
.st-rang td:nth-child(2){width:30%}.st-rang td,.st-rang thead th{padding-right:12px}
.st-rang td:not(:nth-child(2)):not(.db-resetcel),.st-dagen td:not(:nth-child(2)){white-space:nowrap;color:var(--petrol)}
.st-rang td:last-child:not(:nth-child(2)),.st-dagen td:last-child:not(:nth-child(2)){text-align:left;padding-left:0}
.st-rang .db-resetcel{text-align:right!important;padding-right:0}
.st-beste{margin-left:8px;vertical-align:2px;font-size:.75rem}
.st-verloop{min-width:150px}.st-verloop .db-vonk{display:inline-block;vertical-align:middle;width:74px;height:26px;margin:0 10px 0 0}
.st-gekozen th strong{color:var(--koraal-diep)}
.st-dagen td:nth-child(2){width:40%}
.st-klein td:nth-child(2){width:50%}.st-klein td:last-child{width:3.5em}
.st-voorbeeld{margin:0;font-size:.875rem;color:var(--zacht);text-align:center}
@media (max-width:640px){.st-periode button{padding:6px 12px;font-size:.8125rem}.st-rechts{width:100%}.st-kies,.st-kies select{flex:1;max-width:none;width:100%}}
.st-dagen td:nth-child(n+3),.st-dagen thead th:nth-child(n+3){padding-left:20px!important}

/* statistieken: kalender */
.st-kal{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;margin-top:16px}
.st-kal-nav{display:flex;align-items:center;gap:6px}.st-kal-nav strong{min-width:9.5em;text-align:center;font-size:1rem;color:var(--petrol);text-transform:capitalize}
.st-kal-nav button{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--db-rand);border-radius:50%;background:var(--wit);color:var(--petrol);cursor:pointer}
.st-kal-nav button svg{width:18px;height:18px}.st-kal-nav button:hover:not(:disabled){background:var(--perzik)}.st-kal-nav button:disabled{opacity:.35;cursor:default}
.st-kal-rooster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.st-kal-wd{padding-bottom:4px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--zacht)}
.st-kal-dag{position:relative;display:grid;align-content:space-between;aspect-ratio:1/.86;min-height:44px;padding:6px 8px;border:0;border-radius:var(--r-klein);background:var(--db-vlak);font:inherit;text-align:left;color:var(--petrol);cursor:pointer}
.st-kal-dag i{font-style:normal;font-size:.75rem;font-weight:600;color:var(--zacht)}.st-kal-dag b{justify-self:end;font-size:1rem;font-weight:600;line-height:1}
.st-kal-dag.n1{background:#E3EDFD}.st-kal-dag.n2{background:#BCD4FA}.st-kal-dag.n3{background:#6E9FEF}.st-kal-dag.n4{background:#4433E6}
.st-kal-dag.n3,.st-kal-dag.n4,.st-kal-dag.n3 i,.st-kal-dag.n4 i{color:#fff}
.st-kal-dag.vandaag i{font-weight:600;color:var(--petrol);text-decoration:underline;text-underline-offset:3px}.st-kal-dag.n3.vandaag i,.st-kal-dag.n4.vandaag i{color:#fff}
.st-kal-dag:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--koraal)}.st-kal-dag.gekozen{box-shadow:inset 0 0 0 2.5px var(--petrol)}
.st-kal-dag:disabled{background:none;box-shadow:inset 0 0 0 1px var(--lijn);cursor:default}.st-kal-dag:disabled i{opacity:.5}
.st-kal-som{margin:12px 0 0;font-size:.875rem;color:var(--zacht)}
.st-kal-detail{padding:20px 24px;border-radius:var(--r-veld);background:var(--db-vlak);min-height:100%}
.st-kal-datum{margin:0;font-size:.9375rem;font-weight:600;color:var(--petrol)}.st-kal-datum::first-letter{text-transform:uppercase}
.st-kal-feiten{margin:12px 0 0}.st-kal-feiten div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--lijn);font-size:.9375rem}.st-kal-feiten dt{color:var(--zacht)}.st-kal-feiten dd{margin:0;font-weight:600;color:var(--petrol)}
.st-kal-kop{margin:16px 0 8px;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
.st-kal-kaarten{list-style:none;margin:0;padding:0;display:grid;gap:8px}.st-kal-kaarten li{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 2em;align-items:center;gap:10px;font-size:.875rem;color:var(--petrol)}
.st-kal-kaarten li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-kal-kaarten .db-balk{width:100%}.st-kal-kaarten b{text-align:right}
.st-kal-niets{margin:12px 0 0;font-size:.9375rem;color:var(--zacht)}
@media (max-width:820px){.st-kal{grid-template-columns:minmax(0,1fr)}.st-kal-dag{padding:4px 6px}.st-kal-dag b{font-size:.875rem}.st-kal-nav strong{min-width:7.5em}}

/* dashboard: Merkband */
.dashboardpagina{--grond:#F6F6F8;--band:#0F1218;--lijn:#ECECF0;--zacht:#666B78;--db-spoor:#EDF1F7;--db-raster:#ECECF0;--db-rand:#D5DDEA;--db-vlak:#F6F6F8;--r:14px;background:#F6F6F8}
.dashboardpagina .kaart{border:0;border-radius:var(--r-veld);background:#fff;box-shadow:var(--schaduw)}
/* kop: logo, navigatie en account op donkerblauw */
.dashboardpagina .db-kop{background:var(--band);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.1)}
.dashboardpagina .db-kop-in{min-height:72px;gap:clamp(14px,2.6vw,36px);justify-content:flex-start}
.dashboardpagina .db-kop .merk{color:#fff}.dashboardpagina .db-kop .merk-naam b{color:inherit}.dashboardpagina .db-kop .merk-naam small{display:none}.dashboardpagina .db-kop .merk-teken{filter:none}
.dashboardpagina .db-wie{margin-left:auto}
.dashboardpagina .db-wie-tekst{text-align:right}.dashboardpagina .db-wie-tekst strong{color:#fff;font-size:.875rem}.dashboardpagina .db-wie-tekst small{color:#C9CBD3;font-size:.8125rem}
.dashboardpagina .db-initiaal{order:2;width:40px;height:40px;background:#8F84FF;color:#0F1218}
.dashboardpagina .db-kop .db-uit{order:3;min-height:40px;padding:6px 12px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-klein);background:transparent;color:#fff;font-size:.8125rem}
.dashboardpagina .db-kop .db-uit:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.dashboardpagina .db-kop .db-uit span{display:none}
.dashboardpagina .db-nav{border-radius:0;box-shadow:var(--schaduw);background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.dashboardpagina .db-nav a{border-radius:var(--r-klein);color:#666B78}
.dashboardpagina .db-nav a[aria-current]{background:#EEF3FB;color:#0F1218}.dashboardpagina .db-nav a[aria-current] svg{color:#4433E6}
@media (min-width:1000px){
  .dashboardpagina .db-nav{position:static;padding:0;background:none;box-shadow:none}
  .dashboardpagina .db-nav ul{display:flex;gap:4px}
  .dashboardpagina .db-nav a{display:flex;align-items:center;gap:8px;min-height:0;padding:8px 12px;border-radius:var(--r-klein);font-size:.875rem;font-weight:600;color:#C9CBD3}
  .dashboardpagina .db-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
  .dashboardpagina .db-nav a[aria-current]{background:rgba(255,255,255,.12);color:#fff}
  .dashboardpagina .db-nav svg{display:none}
  .dashboardpagina .db-nav-n{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.75rem;font-weight:600}
  .dashboardpagina .db-nav-n:empty,.dashboardpagina .db-nav-n[hidden]{display:none}
  .dashboardpagina .db-nav a[aria-current] .db-nav-n{background:rgba(255,255,255,.2);color:#fff}
  .dashboardpagina .db-nav #n-bestellingen{background:#8F84FF;color:#0F1218}
  .dashboardpagina .db-nav-winkel{display:none!important}
  .dashboardpagina .db-kop .db-uit span{display:inline}
}
/* band: titel, werkbalk en kerncijfers */
.dashboardpagina .db{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
.dashboardpagina .db-voorbeeld{display:flex;margin:0;padding:12px 0 0;border-radius:0;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);color:#C9CBD3;font-size:.8125rem}
.dashboardpagina .db-voorbeeld strong{padding:2px 8px;border-radius:var(--r-klein);background:rgba(143,132,255,.16);color:#8F84FF}
.dashboardpagina .db-titel{display:block;margin:0 0 -76px;padding:clamp(26px,3.4vw,40px) 0 112px;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);color:#fff}
.dashboardpagina .db-titel-rij{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px}
.dashboardpagina .db-titel h1{font-size:clamp(1.6rem,2.7vw,2.1rem);font-weight:600;letter-spacing:-.03em;color:#fff}
.dashboardpagina .db-titel .db-lood{margin:.45em 0 0;font-size:.9375rem;color:#C9CBD3}
.dashboardpagina .db-datum{margin:0 0 8px!important;font-size:.8125rem!important;font-weight:600;letter-spacing:.02em;text-transform:none;color:#9CC4FF!important}
.dashboardpagina #v-statistieken .db-lood{display:none}
.dashboardpagina .db-inhoud{position:relative}
.dashboardpagina .db-acties .knop{min-height:42px;border-radius:var(--r-klein);background:#fff;color:#0F1218;box-shadow:none}
.dashboardpagina .db-acties .knop:hover{background:#EAF1FD}
.dashboardpagina .db-acties .knop-lijn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}
.dashboardpagina .db-acties .knop-lijn:hover{background:rgba(255,255,255,.1)}
.dashboardpagina .db-acties .knop .kp{color:#4433E6}
.dashboardpagina .db-band-kpi:empty{display:none}
.dashboardpagina .db-band-kpi{margin-top:clamp(24px,3vw,36px)}
.dashboardpagina .db-band-kpi .db-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:0}
.dashboardpagina .db-band-kpi .db-tegel{padding:0 clamp(14px,2.2vw,28px);border-radius:0;border-left:1px solid rgba(255,255,255,.14);background:none;box-shadow:none;overflow:visible}
.dashboardpagina .db-band-kpi .db-tegel:first-child{padding-left:0;border-left:0}
.dashboardpagina .db-band-kpi .db-tegel-ic,.dashboardpagina .db-band-kpi .db-vonk,.dashboardpagina .db-band-kpi .db-duimen,.dashboardpagina .db-band-kpi .db-meter{display:none}
.dashboardpagina .db-band-kpi .db-tegel-naam{font-size:.8125rem;font-weight:500;letter-spacing:0;text-transform:none;color:#C9CBD3}
.dashboardpagina .db-band-kpi .db-getal{margin:8px 0 0!important;font-size:clamp(1.7rem,2.6vw,2.15rem)!important;font-weight:600;letter-spacing:-.035em;line-height:1.05!important;color:#fff;text-transform:none}
.dashboardpagina .db-band-kpi .db-tegel:first-child .db-getal{font-size:clamp(2.2rem,3.6vw,2.9rem)!important;color:#8F84FF}
.dashboardpagina .db-band-kpi .db-getal small{font-size:.875rem;font-weight:500;letter-spacing:0;color:#C9CBD3}
.dashboardpagina .db-band-kpi .db-trend{padding:0;background:none;font-size:.875rem;font-weight:600;letter-spacing:0;color:#7FE0B0}.dashboardpagina .db-band-kpi .db-trend.min{background:none;color:#FFA69B}
.dashboardpagina .db-band-kpi .db-tegel-sub{margin-top:8px;font-size:.8125rem;line-height:1.45;color:#C9CBD3}
@media (max-width:760px){
  .dashboardpagina .db-band-kpi .db-tegels{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 0}
  .dashboardpagina .db-band-kpi .db-tegel{padding:0 0 0 16px}.dashboardpagina .db-band-kpi .db-tegel:nth-child(odd){padding-left:0;border-left:0}
  .dashboardpagina .db-titel{margin-bottom:-60px;padding-bottom:88px}
}
/* werkbalk van de statistieken in de band */
.dashboardpagina .st-werkbalk{display:grid;justify-items:end;gap:10px}
.dashboardpagina .st-werkbalk .st-balk{justify-content:flex-end;gap:10px}
.dashboardpagina .st-werkbalk .db-periode{padding:4px;border-radius:var(--r-klein);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.dashboardpagina .st-werkbalk .db-periode button{min-height:36px;padding:6px 12px;border-radius:var(--r-klein);font-size:.8125rem;font-weight:600;color:#C9CBD3}
.dashboardpagina .st-werkbalk .db-periode button:hover{color:#fff}
.dashboardpagina .st-werkbalk .db-periode button[aria-pressed="true"]{background:#fff;color:#0F1218}
.dashboardpagina .st-werkbalk .st-kies select,.dashboardpagina .st-werkbalk .st-export,.dashboardpagina .st-werkbalk .st-datums input{min-height:44px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-klein);background-color:transparent;color:#fff;font-size:.8125rem;font-weight:600;color-scheme:dark}
.dashboardpagina .st-werkbalk .st-kies select option{color:#0F1218;background:#fff}
.dashboardpagina .st-werkbalk .st-export:hover{background:rgba(255,255,255,.1)}
.dashboardpagina .st-werkbalk .st-datums{color:#C9CBD3;font-size:.8125rem;font-weight:600}
@media (max-width:999px){.dashboardpagina .st-werkbalk{justify-items:start;width:100%}.dashboardpagina .st-werkbalk .st-balk{justify-content:flex-start}}
/* vlakken */
.dashboardpagina .db-blok{padding:clamp(18px,2.2vw,26px)}
.dashboardpagina .db-blok h2,.dashboardpagina .db-order h3,.dashboardpagina .db-kaart h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;color:#0F1218}
.dashboardpagina .db-blok-sub{font-size:.8125rem;color:#666B78}
.dashboardpagina .db-blokkop a,.dashboardpagina .db-test{font-size:.8125rem;color:#4433E6;text-decoration:none}
.dashboardpagina .db-blokkop a:hover,.dashboardpagina .db-test:hover{text-decoration:underline}
.dashboardpagina .db-tegel-naam{font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:#666B78}
.dashboardpagina .db-melding{border:0;border-radius:var(--r-veld);background:#fff;box-shadow:var(--schaduw)}
.dashboardpagina .db-tabel thead th{font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:#666B78}
.dashboardpagina .db-balk{height:8px;border-radius:4px;background:#EDF1F7}.dashboardpagina .db-balk i{border-radius:4px;background:#4433E6}
.dashboardpagina .st-eerste .db-balk i{background:#8F84FF}
.dashboardpagina .db-staaf{border-radius:4px 4px 0 0;background:#D5E2F8}.dashboardpagina .db-staven li.top .db-staaf{background:#4433E6}.dashboardpagina .db-staven li:hover .db-staaf{background:#0F1218}
.dashboardpagina .db-pil{border-radius:var(--r-klein)}.dashboardpagina .db-trend{border-radius:var(--r-klein)}
.dashboardpagina .db-beeld{border-radius:var(--r-klein);background:#F1F4F9}
.dashboardpagina .knop{border-radius:var(--r-klein)}.dashboardpagina .db-reset{border-radius:var(--r-klein)}
.dashboardpagina .db-periode:not(.st-periode){border-radius:var(--r-klein)}
.dashboardpagina input,.dashboardpagina select,.dashboardpagina textarea{border-radius:var(--r-klein)}
.dashboardpagina .db-leeg{border-radius:var(--r-klein);background:#F6F6F8}
.dashboardpagina .db-toast{border-radius:var(--r-klein)}
/* statistieken: grafiek + beste kaart */
.dashboardpagina .st-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,348px);gap:clamp(14px,1.8vw,22px);align-items:stretch}
.dashboardpagina .st-top-een{grid-template-columns:minmax(0,1fr)}
.st-best{display:flex;flex-direction:column;border-radius:var(--r-veld);overflow:hidden;background:#171A24;color:#fff;box-shadow:var(--schaduw)}
.st-best-kop{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0}
.st-best-kop span{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8F84FF}.st-best-kop small{font-size:.8125rem;color:#C9CBD3}
.st-best-foto{flex:1;display:grid;place-items:center;min-height:176px;padding:12px;background:radial-gradient(closest-side,rgba(255,255,255,.13),transparent)}
.st-best-foto img{max-height:160px;max-width:74%;filter:drop-shadow(0 16px 16px rgba(0,0,0,.35))}
.st-best-tekst{padding:4px 24px 24px}.st-best-tekst strong{display:block;font-size:1.4rem;font-weight:600;letter-spacing:-.02em}.st-best-tekst p{margin:6px 0 0;font-size:.875rem;line-height:1.55;color:#C7D5EE}
@media (max-width:860px){.dashboardpagina .st-top{grid-template-columns:minmax(0,1fr)}.st-best{flex-direction:row;align-items:center}.st-best-kop{display:none}.st-best-foto{flex:none;width:130px;min-height:130px}.st-best-foto img{max-height:104px}.st-best-tekst{padding:16px 20px 16px 4px}}
/* lijngrafiek */
.gr{position:relative;height:var(--h);margin-top:20px;padding-left:32px}
.gr .db-raster{inset:0 0 26px 34px}.gr .db-raster span{border-top-style:dashed}.gr .db-raster span:last-of-type{border-top-style:solid}
.gr-veld{position:absolute;inset:0 0 26px 34px}
.gr-veld svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gr-lijn{fill:none;stroke:#4433E6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gr-vorig{fill:none;stroke:#B9C4D6;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.gr-kol{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.gr-kol li{position:relative}
.gr-kol li i{position:absolute;left:50%;bottom:var(--y);width:11px;height:11px;margin:0 0 -5.5px -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #4433E6;opacity:0}
.gr-kol li.top i{opacity:1;box-shadow:0 0 0 3px #8F84FF}
.gr-kol li:hover i{opacity:1}
.gr-kol li:hover::before,.gr-kol li.top::before{content:"";position:absolute;left:50%;bottom:0;height:var(--y);border-left:1px dashed rgba(29,95,214,.45)}
.gr-kol li.top::after,.gr-kol li:hover::after{content:attr(data-t) "\A" attr(data-n);white-space:pre;position:absolute;left:50%;bottom:calc(var(--y) + 14px);translate:-50% 0;z-index:2;padding:6px 10px;border-radius:var(--r-klein);background:#0F1218;color:#fff;font-size:.75rem;font-weight:600;line-height:1.45;pointer-events:none}
.gr-kol:hover li.top:not(:hover)::after{display:none}
.gr-kol li:first-child::after,.gr-kol li:nth-child(2)::after,.gr-kol li:nth-child(3)::after{translate:-12px 0}
.gr-kol li:last-child::after,.gr-kol li:nth-last-child(2)::after,.gr-kol li:nth-last-child(3)::after{translate:calc(-100% + 12px) 0}
.gr-as{position:absolute;left:34px;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.gr-as li{height:18px;font-size:.75rem;font-weight:600;color:#666B78;white-space:nowrap;display:flex;justify-content:center;overflow:visible}
.gr-legenda{flex-wrap:wrap;gap:6px 20px}.gr-legenda span{display:inline-flex;align-items:center;gap:8px}
.gr-legenda i{display:inline-block;width:18px;height:0;border-top:2.4px solid #4433E6}.gr-legenda i.gr-l2{border-top:1.5px dashed #9AA7BD}
/* ranglijst */
.st-rangcel{display:flex;align-items:center;gap:12px}
.st-rangnr{width:18px;flex:none;font-size:.8125rem;font-weight:600;color:#9AA7BD}.st-eerste .st-rangnr{color:#B8862B}
.st-rangcel .db-beeld{width:46px;height:46px}.st-rangcel .db-beeld img{max-width:36px;max-height:36px}
.dashboardpagina .st-rang td:nth-child(2) b{font-size:1rem;font-weight:600}
.dashboardpagina .st-kal-dag{border-radius:var(--r-klein)}.dashboardpagina .st-kal-detail{border-radius:var(--r-veld);background:#F6F6F8}
.dashboardpagina .st-best-tekst strong{color:#fff}
.dashboardpagina .st-kal-dag.n3 b,.dashboardpagina .st-kal-dag.n4 b{color:#fff}
.dashboardpagina .db-acties .knop .kp{display:none}
.dashboardpagina .st-werkbalk{justify-items:start;width:100%}.dashboardpagina .st-werkbalk .st-balk{justify-content:flex-start}

/* inlogpagina in dezelfde stijl: donkerblauwe band met het witte vlak eroverheen */
.loginpagina{--grond:#F6F6F8;background:linear-gradient(180deg,#0F1218 0,#0F1218 340px,#F6F6F8 340px) no-repeat #F6F6F8}
.loginpagina .afkop{background:transparent;border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.loginpagina .afkop .merk{color:#fff}.loginpagina .afkop .merk-naam b{color:inherit}.loginpagina .afkop .merk-naam small{display:none}.loginpagina .afkop .merk-teken{filter:none}
.loginpagina .lg-terug{color:#fff;font-size:.875rem;font-weight:600;text-decoration:none}.loginpagina .lg-terug:hover{text-decoration:underline}
.loginpagina .lg-kaart{padding:0;border:0;border-radius:var(--r-veld);overflow:hidden;box-shadow:var(--schaduw)}
.loginpagina .lg-links h1{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;letter-spacing:-.03em}
.loginpagina .lg-links .label{font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:#4433E6}.loginpagina .lg-links .label::before{display:none}
.loginpagina .knop{border-radius:var(--r-klein)}.loginpagina input{border-radius:var(--r-klein)!important}.loginpagina .lg-oog{border-radius:var(--r-klein);background:#EEF3FB}
.loginpagina .lg-rechts{border-radius:0;background:#171A24;color:#fff}
.loginpagina .lg-rechts strong{color:#fff}.loginpagina .lg-rechts span{color:#C7D5EE}.loginpagina .lg-rechts li svg{color:#8F84FF;background:rgba(255,255,255,.1)}
.loginpagina .lg-rechts img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.st-best-tekst small{display:block;margin-top:2px;font-size:.8125rem;color:#C9CBD3}

/* beheer in de Merkband-stijl */
.beheerpagina .adm-label{padding:3px 8px;border-radius:var(--r-klein);background:rgba(255,255,255,.12);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.06em}
.beheerpagina .db-kop a.db-uit{margin-left:auto}
.beheerpagina .db-titel p:not(.db-datum){margin:.45em 0 0;font-size:.9375rem;color:#C9CBD3}
.beheerpagina .adm-terug{min-height:32px;margin:0 0 12px;font-size:.8125rem;font-weight:600;color:#C9CBD3;text-decoration:none}.beheerpagina .adm-terug:hover{color:#fff}
.beheerpagina .adm-terug .kp{color:#9CC4FF}
.beheerpagina .db-titel .db-pil{align-self:center;padding:6px 12px;font-size:.8125rem}
.beheerpagina .adm-tegels .adm-euro{font-size:clamp(1.5rem,2.3vw,1.95rem)!important;line-height:1.15!important}
.beheerpagina .adm-balk{padding:12px 16px;border-radius:var(--r-veld);background:#fff;box-shadow:var(--schaduw)}
.beheerpagina .adm-filter{padding:0;background:none;box-shadow:none;gap:4px;flex-wrap:wrap}
.beheerpagina .adm-filter button{min-height:38px;border-radius:var(--r-klein)}.beheerpagina .adm-filter button[aria-pressed="true"]{background:#0F1218;color:#fff}
.beheerpagina .adm-zoek input{box-shadow:none;border-radius:var(--r-klein)}
.beheerpagina textarea,.beheerpagina .adm-linkrij .adm-link{border-radius:var(--r-klein)}
.beheerpagina .adm-kopie,.beheerpagina .adm-tekstknop{border-radius:var(--r-klein)}
.beheerpagina .adm-druk{border-radius:var(--r-klein)}
.beheerpagina .adm-mails li{border-radius:var(--r-klein);background:#F6F6F8;border-color:#ECECF0}

/* beheer: bestellijst als één tabel met tabbladen, zoekveld en kolomkoppen */
.beheerpagina .adm-tabel{padding:0;overflow:hidden}
.beheerpagina .adm-tabel .adm-balk{padding:0 20px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid #ECECF0;flex-wrap:wrap;gap:0 16px}
.beheerpagina .adm-filter{display:flex;flex-wrap:nowrap;gap:24px;padding:0;border-radius:0;background:none;box-shadow:none;overflow-x:auto}
.beheerpagina .adm-filter button{min-height:58px;padding:0;border-radius:0;background:none!important;font-size:.875rem;font-weight:600;color:#666B78;box-shadow:inset 0 -2px 0 transparent}
.beheerpagina .adm-filter button:hover{color:#0F1218}
.beheerpagina .adm-filter button[aria-pressed="true"]{color:#0F1218!important;box-shadow:inset 0 -2px 0 #4433E6}
.beheerpagina .adm-filter b{min-width:0;padding:1px 6px;border-radius:var(--r-klein);background:#EEF1F6;font-size:.75rem;font-weight:700;color:#666B78}
.beheerpagina .adm-filter button[aria-pressed="true"] b{background:#E6EEFC;color:#4433E6}
.beheerpagina .adm-zoek{flex:0 1 300px;max-width:none;margin:10px 0}
.beheerpagina .adm-zoek input{min-height:40px;border:1px solid transparent;border-radius:var(--r-klein);background:#F6F6F8;font-size:.875rem;box-shadow:none}
.beheerpagina .adm-zoek input:focus{border-color:#4433E6;background:#fff}
.beheerpagina .adm-kolkop{display:grid;grid-template-columns:118px minmax(0,1.3fr) 150px 232px 112px 5.4em 18px;gap:12px;padding:10px 20px;background:#F9FAFC;border-bottom:1px solid #ECECF0;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:#666B78}
.beheerpagina .adm-kolkop span:nth-child(6){text-align:right}
.beheerpagina .adm-lijst{margin:0}
.beheerpagina .adm-lijst li{border-top:1px solid #ECECF0}.beheerpagina .adm-lijst li:first-child{border-top:0}
.beheerpagina .adm-lijst a{padding:12px 20px;border-radius:0;border:0}
.beheerpagina .adm-lijst a:hover{background:#F7F9FC}
.beheerpagina .adm-lijst .adm-nr strong{font-size:.9375rem;font-weight:700}.beheerpagina .adm-lijst .adm-klant strong{font-size:.9375rem;font-weight:700}
.beheerpagina .adm-lijst small{font-size:.8125rem}
.beheerpagina .adm-lijst em{font-size:.9375rem;font-weight:700;text-align:right}
.beheerpagina .adm-lijst .db-leeg{margin:20px}
.beheerpagina .adm-n{margin:0;padding:12px 20px;border-top:1px solid #ECECF0;background:#F9FAFC;font-size:.8125rem;color:#666B78}
@media (max-width:1180px){.beheerpagina .adm-kolkop{display:none}}
@media (max-width:700px){.beheerpagina .adm-tabel .adm-balk{padding:0 16px}.beheerpagina .adm-zoek{flex:1 1 100%;margin:0 0 12px}.beheerpagina .adm-lijst a{padding:12px 16px}.beheerpagina .adm-filter{gap:20px}}
.beheerpagina .adm-lijst a{margin-inline:0}

/* subtiele sterren in de donkerblauwe band (dashboard, beheer en inlogpagina) */
.dashboardpagina,.loginpagina{--sterren:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22700%22 height=%22460%22 viewBox=%220 0 700 460%22%3E%3Cpath transform=%22translate%28415 314%29 rotate%28-12 11 11%29 scale%280.92%29%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%23fff%22 fill-opacity=%220.07%22 stroke=%22%23fff%22 stroke-opacity=%220.07%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate%28623 313%29 rotate%2814 9 9%29 scale%280.75%29%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%23fff%22 fill-opacity=%220.035%22 stroke=%22%23fff%22 stroke-opacity=%220.035%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate%2829 201%29 rotate%28-23 5 5%29 scale%280.42%29%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%23fff%22 fill-opacity=%220.07%22 stroke=%22%23fff%22 stroke-opacity=%220.07%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate%28252 366%29 rotate%282 7 7%29 scale%280.58%29%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 fill-opacity=%220.14%22 stroke=%22%23F4B21B%22 stroke-opacity=%220.14%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate%28505 39%29 rotate%28-12 9 9%29 scale%280.75%29%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%23fff%22 fill-opacity=%220.055%22 stroke=%22%23fff%22 stroke-opacity=%220.055%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate%28204 158%29 rotate%2814 5 5%29 scale%280.42%29%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%23fff%22 fill-opacity=%220.07%22 stroke=%22%23fff%22 stroke-opacity=%220.07%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate%2834 398%29 rotate%28-0 4 4%29 scale%280.33%29%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%23fff%22 fill-opacity=%220.045%22 stroke=%22%23fff%22 stroke-opacity=%220.045%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath transform=%22translate%28103 20%29 rotate%2811 11 11%29 scale%280.92%29%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%23fff%22 fill-opacity=%220.045%22 stroke=%22%23fff%22 stroke-opacity=%220.045%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%22200%22 cy=%22226%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%22451%22 cy=%22278%22 r=%221.4%22 fill=%22%23fff%22 fill-opacity=%220.07%22/%3E%3Ccircle cx=%2211%22 cy=%2258%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%22496%22 cy=%22282%22 r=%221.4%22 fill=%22%23fff%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%2219%22 cy=%22161%22 r=%221.4%22 fill=%22%23fff%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%22569%22 cy=%2261%22 r=%220.9%22 fill=%22%23fff%22 fill-opacity=%220.1%22/%3E%3Ccircle cx=%22387%22 cy=%22315%22 r=%220.9%22 fill=%22%23fff%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%22382%22 cy=%227%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%22403%22 cy=%22326%22 r=%221.4%22 fill=%22%23fff%22 fill-opacity=%220.13%22/%3E%3Ccircle cx=%22337%22 cy=%22419%22 r=%221.1%22 fill=%22%23fff%22 fill-opacity=%220.1%22/%3E%3C/svg%3E");--ster-groot:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath 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%23fff%22 fill-opacity=%22.018%22 stroke=%22%23fff%22 stroke-opacity=%22.05%22 stroke-width=%22.1%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.dashboardpagina .db-kop{background-image:var(--sterren);background-size:700px 460px;background-position:center -150px}
.dashboardpagina .db-titel{position:relative;isolation:isolate}
.dashboardpagina .db-titel::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;pointer-events:none;
  background-image:var(--ster-groot),var(--sterren);background-repeat:no-repeat,repeat;background-size:520px 520px,700px 460px;background-position:right -190px top -170px,center -222px}
.loginpagina{position:relative}
.loginpagina::before{content:"";position:absolute;z-index:0;top:0;left:0;right:0;height:340px;pointer-events:none;background-image:var(--ster-groot),var(--sterren);background-repeat:no-repeat,repeat;background-size:520px 520px,700px 460px;background-position:right -190px top -150px,center top}
.loginpagina > *{position:relative;z-index:1}
@media (max-width:760px){.dashboardpagina .db-titel::before,.loginpagina::before{background-size:300px 300px,520px 352px;background-position:right -90px top -70px,center top}}

/* beheer: btw */
.beheerpagina a.adm-btw-tegel{display:block;text-decoration:none}.beheerpagina a.adm-btw-tegel:hover .db-getal{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.beheerpagina .btw-tabel td,.beheerpagina .btw-tabel thead th:not(:first-child){text-align:right!important;white-space:nowrap;color:#24324A;width:auto!important;padding-left:16px}
.beheerpagina .btw-tabel td b{color:#0F1218;font-weight:800}
.beheerpagina .btw-tabel .btw-som th,.beheerpagina .btw-tabel .btw-som td{border-top:2px solid #0F1218;background:#F9FAFC;font-weight:700}
.beheerpagina .btw-tabel .btw-som td b{font-size:1.0625rem}
.beheerpagina .btw-tabel tbody th{padding-left:0}
.beheerpagina .btw-let p{margin:0;font-size:.9375rem;color:#24324A}.beheerpagina .btw-let{box-shadow:inset 3px 0 0 transparent,var(--schaduw);background:#FFF9E8}
.beheerpagina .btw-velden{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:12px}
.beheerpagina .btw-velden label{display:grid;gap:6px;font-size:.8125rem;font-weight:600;color:#666B78}
.beheerpagina .btw-velden select{min-height:44px;padding:8px 12px;border:1px solid #D5DDEA;border-radius:var(--r-klein);background:#fff;font:inherit;font-size:.9375rem;font-weight:600;color:#0F1218}
.beheerpagina .btw-uitleg{margin:16px 0 0;padding:16px 0 0 16px;border-top:1px solid #ECECF0;display:grid;gap:6px;font-size:.875rem;line-height:1.55;color:#666B78}

/* beheer: inloggen, betaalstatus en het bestelformulier */
.adm-dicht .db,.adm-dicht .db-nav,.adm-dicht .adm-kopknoppen{display:none!important}
.adm-poort{min-height:calc(100vh - 73px);padding:clamp(40px,9vh,110px) 16px 60px;background:linear-gradient(180deg,#0F1218 0,#0F1218 300px,#F6F6F8 300px)}
.adm-poort[hidden]{display:none}
.adm-poortkaart{max-width:440px;margin:0 auto;padding:clamp(26px,4vw,40px)}
.adm-poortkaart h1{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:#0F1218}
.adm-poortkaart > p:not(.veld):not(.adm-login-fout){margin:.5em 0 20px;font-size:.9375rem;color:#666B78}
.adm-poortkaart .veld{margin:0 0 16px}.adm-poortkaart input{width:100%;min-height:50px}
.adm-poortkaart .knop{width:100%;justify-content:center;margin-top:6px}
.adm-login-fout{min-height:1.2em;margin:0 0 10px;font-size:.875rem;font-weight:600;color:var(--fout)}.adm-login-fout:empty{display:none}
.adm-kopknoppen{display:flex;gap:8px;margin-left:auto}.beheerpagina .db-kop .adm-kopknoppen .db-uit{margin-left:0;cursor:pointer;font-family:inherit}
.beheerpagina .db-voorbeeld{flex-wrap:wrap;gap:6px 20px}
.beheerpagina .db-voorbeeld[hidden]{display:none}
.beheerpagina .db-voorbeeld span{display:inline-flex;align-items:center;gap:8px}
.beheerpagina .db-voorbeeld button{padding:2px 8px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-klein);background:none;color:#fff;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer}
.beheerpagina .db-voorbeeld button.zeker{border-color:#FFA69B;color:#FFA69B}
.db-pil.adm-betaal-open{background:#FFF3D6;color:#7A5300}.db-pil.adm-betaal-betaald{background:#DFF1EA;color:#0F5A4E}
.db-pil.adm-betaal-mislukt,.db-pil.adm-betaal-verlopen,.db-pil.adm-betaal-geannuleerd{background:#FDECEA;color:var(--fout)}.db-pil.adm-betaal-terugbetaald{background:#EEF1F6;color:#475467}
.adm-betaalknoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.adm-betaalknoppen .adm-kopie{margin-left:0;text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.adm-kopie.adm-rood{color:var(--fout)}.adm-kopie.zeker{border-color:var(--fout);background:#FDECEA;color:var(--fout)}
.adm-logo.adm-ontwerp{max-width:150px;max-height:170px;padding:0;border-radius:var(--r-klein);box-shadow:var(--schaduw-klein)}
.adm-logodl{display:inline-flex;margin:8px 0 0!important;text-decoration:none}
.fm-regels{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:12px}
.fm-regel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px 12px;padding:16px;border:1px solid #ECECF0;border-radius:var(--r-veld);background:#F9FAFC}
.fm-regel .veld,.fm-klant .veld,.fm-zij .veld{margin:0;display:grid;gap:6px}
.fm-regel label,.fm-klant label,.fm-zij .veld label{font-size:.8125rem;font-weight:600;color:#666B78}
.fm-regel input,.fm-regel select,.fm-klant input,.fm-klant select,.fm-zij input,.fm-zij select{width:100%;min-height:42px;padding:8px 12px;border:1px solid #D5DDEA;border-radius:var(--r-klein);background:#fff;font:inherit;font-size:.9375rem;color:#0F1218}
.fm-regel select:disabled{background:#F1F4F9;color:#8A97AD}
.fm-product{grid-column:span 6}.fm-naam{grid-column:span 6}.fm-soort,.fm-kleur{grid-column:span 3}.fm-aantal{grid-column:span 2}.fm-prijs{grid-column:span 4}.fm-link,.fm-tekst{grid-column:span 6}.fm-weg{grid-column:1/-1;justify-self:start;margin:0!important}
.fm-klant{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 12px;margin-top:12px}
.fm-klant .veld{grid-column:span 3}.fm-klant .breed{grid-column:1/-1}.fm-klant .fm-straat{grid-column:span 4}.fm-klant .fm-smal{grid-column:span 2}
.fm-zij{display:grid;gap:12px;margin-top:12px}
.fm-vink{display:flex;align-items:center;gap:10px;font-size:.875rem;color:#24324A;cursor:pointer}.fm-vink input{width:18px;height:18px;accent-color:#4433E6}
.fm-som{margin:16px 0 16px;padding-top:12px;border-top:1px solid #ECECF0}
@media (max-width:640px){.fm-product,.fm-naam,.fm-link,.fm-tekst{grid-column:1/-1}.fm-soort,.fm-kleur,.fm-aantal,.fm-prijs{grid-column:span 6}.fm-klant .veld{grid-column:1/-1}}

/* afrekenen: kortingscode */
.af-code{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:16px 0 4px}
.af-code input{min-height:46px;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:var(--r-veld);background:var(--wit);font:inherit;font-size:.9375rem;text-transform:uppercase;color:var(--petrol)}
.af-code input::placeholder{text-transform:none}
.af-code button{min-height:46px;padding:0 16px;border:1.5px solid var(--petrol);border-radius:var(--r-veld);background:var(--wit);font:inherit;font-size:.9375rem;font-weight:700;color:var(--petrol);cursor:pointer}
.af-code button:hover{background:var(--perzik)}
.af-code p{grid-column:1/-1;margin:0;font-size:.875rem;min-height:0}.af-code p.goed{color:#0F5A4E;font-weight:600}.af-code p.fout{color:var(--fout);font-weight:600}
#af-kortingrij dd{color:#0F5A4E;font-weight:700}#af-kortingrij small{font-weight:600;color:var(--zacht)}
/* beheer: klantpagina, cijfers, kortingscodes */
.beheerpagina .kl-kop{padding:16px 20px 12px;border-bottom:1px solid #ECECF0}.beheerpagina .kl-kop h2{margin:0}
.beheerpagina .kl-lijst a{grid-template-columns:118px minmax(0,1fr) 128px 112px 5.4em 18px}
.beheerpagina a.kl-naar{color:inherit;text-decoration:none}.beheerpagina a.kl-naar:hover strong{color:#4433E6;text-decoration:underline}
.beheerpagina .kl-kaarttabel td.kl-link{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto!important;padding-right:12px}
.beheerpagina .kl-kaarttabel td:nth-child(2){width:auto}.beheerpagina .kl-kaarttabel td:nth-child(3){width:26%;white-space:nowrap}.beheerpagina .kl-kaarttabel td:nth-child(3) b{display:inline-block;min-width:2.4em;text-align:right;color:#0F1218}
.beheerpagina .kl-kaarttabel td:nth-child(3) .db-balk{width:calc(100% - 3.2em)}
.cf-maanden{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(4px,1vw,14px);height:250px;margin:24px 0 0;padding:0;list-style:none}
.cf-maanden li{display:grid;grid-template-rows:18px minmax(0,1fr) 20px 16px;justify-items:center;align-items:end;min-width:0}
.cf-maanden b{font-size:.75rem;font-weight:700;color:#0F1218;white-space:nowrap}
.cf-maanden i{display:block;width:100%;max-width:46px;border-radius:var(--r-klein) var(--r-klein) 0 0;background:#D5E2F8}.cf-maanden li.nu i{background:#4433E6}.cf-maanden li:hover i{background:#0F1218}
.cf-maanden span{align-self:end;font-size:.75rem;font-weight:600;color:#666B78}.cf-maanden small{font-size:.75rem;color:#9AA7BD}
.cf-legenda{margin-left:0!important}
.beheerpagina .cf-top td:nth-child(2){width:30%;white-space:nowrap}.beheerpagina .cf-top th,.beheerpagina .cf-top td{padding-left:20px;padding-right:0}.beheerpagina .cf-top td:last-child,.beheerpagina .cf-top thead th:last-child{padding-right:20px;text-align:right}
.beheerpagina .cf-top thead th{background:#F9FAFC;border-bottom:1px solid #ECECF0;padding-top:10px}
.beheerpagina .cf-klein td:nth-child(2){width:38%}.beheerpagina .cf-klein td:last-child{width:6.5em;text-align:right}.beheerpagina .cf-klein .db-balk{width:100%}
.beheerpagina .kc-tabel th,.beheerpagina .kc-tabel td{padding-left:20px;white-space:nowrap;width:auto!important}.beheerpagina .kc-tabel thead th{background:#F9FAFC;border-bottom:1px solid #ECECF0;padding-top:10px}
.beheerpagina .kc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;letter-spacing:.04em}
.beheerpagina .kc-acties{text-align:right!important;padding-right:20px}.beheerpagina .kc-acties .adm-kopie{margin-left:6px}
.db-pil.kc-aan{background:#DFF1EA;color:#0F5A4E}.db-pil.kc-uit,.db-pil.kc-verlopen,.db-pil.kc-op{background:#EEF1F6;color:#475467}
@media (max-width:999px){.beheerpagina .adm-nav ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
.beheerpagina .kl-kaarttabel td:nth-child(4),.beheerpagina .kl-kaarttabel thead th:nth-child(4){padding-left:16px}.beheerpagina .kl-kaarttabel td:nth-child(5),.beheerpagina .kl-kaarttabel thead th:nth-child(5){padding-left:16px}

/* afrekenen: wachten op de betaling; dashboard: track & trace; beheer: waarschuwingen */
.af-wacht{max-width:640px;margin:clamp(30px,6vw,70px) auto;padding:clamp(24px,4vw,40px);border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw);text-align:center}
.af-wacht h1{font-size:clamp(1.5rem,3vw,2rem)}.af-wacht p{margin:.7em 0 0;color:var(--zacht)}
.db-tt{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--lijn);font-size:.875rem;color:#666B78}.db-tt strong{color:#0F1218;letter-spacing:.02em}
.adm-waarschuwing{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-klein);background:#FFF3D6;font-size:.875rem;line-height:1.5;color:#7A5300}
.dashboardpagina input[readonly]{background:#F6F6F8;color:#666B78}

/* ronde 3: smalle schermen. Rasters mogen niet meegroeien met een brede tabel of een lang e-mailadres */
.db-inhoud{grid-template-columns:minmax(0,1fr)}.db-blok,.adm-duo>*{min-width:0}
.db-tabel tbody th,.adm-lijst a,.db-order,.kl-kop{overflow-wrap:anywhere}
.filters form{min-width:0}
@media (max-width:560px){
  .beheerpagina .db-voorbeeld span{flex-wrap:wrap;min-width:0}
  .beheerpagina .db-voorbeeld strong{flex:none}
  .beheerpagina .db-kop-in{gap:8px}
  .beheerpagina .adm-merk{gap:8px;flex:0 1 auto}
  .beheerpagina .adm-merk .merk-naam small{display:none}
}
@media (max-width:400px){.beheerpagina .adm-label{display:none}}
.ontwerp-tekst h3 small{max-width:100%;white-space:normal}

/* beheer: opnieuw inloggen zonder de pagina te verlaten */
.adm-opnieuw{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(15,18,24,.72)}
.adm-opnieuw form{width:min(100%,380px);padding:28px;border-radius:var(--r-veld);background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.adm-opnieuw h2{font-size:1.35rem;color:#0F1218}.adm-opnieuw p{margin:6px 0 16px;font-size:.9375rem;color:#666B78}
.adm-opnieuw label{display:block;margin-bottom:6px;font-size:.875rem;font-weight:600;color:#0F1218}
.adm-opnieuw input{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid #C5CEDD;border-radius:var(--r-klein);font:inherit}
.adm-opnieuw input:focus-visible{outline:3px solid #4433E6;outline-offset:2px}
.adm-opnieuw .veld-fout{margin:8px 0 0;min-height:1.2em;font-size:.875rem;color:#B42318}.adm-opnieuw .knop{width:100%;margin-top:8px}
.beheerpagina .db-voorbeeld .adm-letop strong{background:rgba(255,166,155,.18);color:#FFB4AA}

.keus[hidden]{display:none!important}

/* voorwaarden, privacybeleid en de 404-pagina */
.juridisch{padding:clamp(40px,6vw,84px) 0 clamp(56px,7vw,96px)}
.juridisch-in{max-width:780px}
.juridisch h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.03em}
.juridisch .lood{margin:12px 0 clamp(28px,4vw,44px);font-size:1.0625rem;color:var(--zacht)}
.juridisch h2{margin:clamp(30px,4vw,44px) 0 10px;font-size:1.25rem;letter-spacing:-.01em}
.juridisch p,.juridisch li{font-size:1rem;line-height:1.7;color:#344054}
.juridisch p{margin:0 0 12px}.juridisch ul{margin:0 0 16px;padding-left:1.2em}.juridisch li{margin-bottom:6px}
.juridisch a:not(.knop){color:var(--petrol);font-weight:600;text-underline-offset:3px}

/* productpagina: prijs per stuk bij meer stuks */
.staffelrij{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 0;padding:0;list-style:none}
.staffelrij li{display:grid;gap:2px;padding:8px 4px;border:1px solid var(--lijn);border-radius:var(--r-klein);text-align:center;background:var(--wit)}
.staffelrij span{font-size:.75rem;color:var(--zacht)}.staffelrij strong{font-size:.875rem;color:var(--petrol);white-space:nowrap}
.staffelrij li.nu{border-color:var(--koraal);box-shadow:inset 0 0 0 1px var(--koraal)}
@media (max-width:420px){.staffelrij{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* inloggen in de kop: een rond icoon, net als de winkelwagen; in het uitklapmenu op de telefoon met het woord erbij */
.nav-login{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:var(--perzik);color:var(--petrol);text-decoration:none;transition:background-color .15s,color .15s}
.nav-login:hover{background:var(--petrol);color:#fff}
.nav-login:focus-visible{outline:3px solid var(--koraal);outline-offset:3px}
.nav-login svg{width:24px;height:24px}
.nav-login span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:1060px){
  .nav-login{display:inline-flex;gap:10px;width:auto;height:48px;padding:0 16px 0 12px;border-radius:999px;font-size:1rem;font-weight:600}
  .nav-login span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
}

/* verzending en betalen: de logo's van de vervoerders en betaalmethoden */
.levering dl > div{align-items:center}
.levering dt{display:flex;align-items:center;gap:8px}
.lev-logo{display:grid;place-items:center;flex:none;height:30px}
.lev-logo img{display:block;height:30px;width:auto}
.lev-dhl{padding:0;background:none}.lev-dhl img{height:18px;width:auto;border-radius:2px}
.levering dl > div{grid-template-columns:176px minmax(0,1fr)}
@media (max-width:899px){.levering dl > div{grid-template-columns:1fr}}
.lev-betaal{display:flex;gap:6px;margin-bottom:6px}
.lev-betaal img{display:block;width:40px;height:30px;border-radius:var(--r-klein)}
.lev-betaal img{box-shadow:0 0 0 1px var(--lijn)}
.keus-rechts{display:flex;align-items:center;gap:12px}
img.keus-vervoer{display:block;width:28px;height:28px}
.keus-dhl{display:block;line-height:0}.keus-rechts .keus-dhl img{display:block;width:auto;height:24px;padding:0;border:0;border-radius:3px;background:none;box-shadow:none}

/* al ingelogd: de inlogpagina blijft leeg tot je naar het dashboard bent doorgestuurd */
.lg-wacht body > *{visibility:hidden}

/* productpagina: tweede bijpassende formaat (complete set) en de bundelkorting */
.erbij-twee{margin-top:10px}
#bundelrij span:last-child,.wagen-bundel span:last-child,#wp-bundel,#af-bundel{color:#0F7B4F;font-weight:700}
.wagen-bundel{display:flex;justify-content:space-between}
.wagen-bundel[hidden]{display:none}

/* logo: de tikkaart. Op een donkere achtergrond wordt de kaart wit en het contactloze teken donkerblauw */
.voet .merk,.dashboardpagina .db-kop .merk,.loginpagina .afkop .merk,.beheerpagina .db-kop .merk{--mk-kaart:#fff;--mk-teken:#0F1218}
.merk-teken{width:64px;height:50px}.merk{gap:12px}.merk-naam{font-size:1.72rem}
.voet .merk-teken,.db-kop .merk-teken,.afkop .merk-teken{width:58px;height:45px}.voet .merk-naam,.db-kop .merk-naam,.afkop .merk-naam{font-size:1.56rem}
@media (max-width:560px){.merk-teken,.voet .merk-teken,.db-kop .merk-teken,.afkop .merk-teken{width:52px;height:41px}.merk{gap:8px}.merk-naam,.voet .merk-naam,.db-kop .merk-naam,.afkop .merk-naam{font-size:1.42rem}}
@media (min-width:1061px) and (max-width:1200px){.merk-teken{width:54px;height:42px}.merk-naam{font-size:1.5rem}.merk{gap:10px}}
@media (max-width:380px){.merk-teken,.db-kop .merk-teken{width:46px;height:36px}.merk-naam,.db-kop .merk-naam{font-size:1.25rem}}
@media (max-width:340px){.merk-teken,.db-kop .merk-teken{width:40px;height:31px}.merk-naam,.db-kop .merk-naam{font-size:1.125rem}.merk{gap:6px}}
@media (max-width:350px){.kies-link{white-space:normal;font-size:.8125rem;gap:4px}.kies-link .kp{width:22px;height:22px}}

/* ------------------------------------------------------------ winkelwagenpaneel op de telefoon: compacter, zodat de inhoud meer ruimte krijgt dan de balk met de afrekenknop */
@media (max-width:520px){
.wagen-top{padding:12px 12px 8px 16px}
.wagen-top h2{font-size:1.25rem}
.wagen-sluit{width:44px;height:44px}
.wagen-inhoud{padding:2px 12px 12px 16px}
.wagen .gratisbalk{padding:10px 12px}
.wagen .gratisbalk p{margin-bottom:6px;font-size:.875rem}
.wagen .gratisbalk > span{height:6px}
.wagen .wregel{grid-template-columns:56px minmax(0,1fr) auto;gap:10px;padding:12px 0}
.wagen .wregel-naam{font-size:.9375rem}
.wagen .wregel-opties{font-size:.8125rem}
.wagen .wregel-rechts strong{font-size:1rem}
.wagen .wregel-onder{margin-top:6px}
.wagen .stapper-klein button{width:32px;height:32px;font-size:1.125rem}
.wagen .stapper-klein input{width:36px;min-height:32px;font-size:.9375rem}
.wagen .wtip{grid-template-columns:60px minmax(0,1fr);gap:10px 12px;margin-top:10px;padding:12px}
.wagen .wtip-label{font-size:.66rem}
.wagen .wtip-naam{font-size:.9375rem}
.wagen .wtip-reden{font-size:.8125rem}
.wagen .wtip-koop{padding-top:10px}
.wagen .wtip-koop strong{font-size:1rem}
.wagen .wtip-koop .knop{min-height:42px;font-size:.9375rem}
.wagen-voet{padding-top:12px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.wagen-voet p{font-size:.9375rem}
.wagen-voet p strong{font-size:1.25rem}
.wagen-voet .wagen-verz{margin-top:0;font-size:.8125rem}
.wagen-voet .knop-koop{min-height:50px;margin-top:10px;font-size:1rem}
.wagen-meer{margin-top:2px;padding:8px;font-size:.9375rem}
}

/* ---------- homepagina: zelf ontwerpen in de configurator */
.zelf{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.zelf-voet{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.zelf-voet p{margin:0;max-width:22em;font-size:.875rem;line-height:1.5;color:#B3C0D3}
.zelf-beeld{display:block;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 40px 70px -40px rgba(0,0,0,.7);transition:transform .35s var(--soepel)}
.zelf-beeld:hover{transform:translateY(-4px)}
.zelf-beeld img{display:block;width:100%;height:auto}
.zelf-balk{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#EEF2F8}
.zelf-balk i{width:10px;height:10px;border-radius:50%;background:#C5D0E0}
.zelf-balk b{margin-left:10px;padding:4px 12px;border-radius:999px;background:#fff;color:#56667D;font-size:.75rem;font-weight:600}
@media (max-width:900px){.zelf{grid-template-columns:minmax(0,1fr)}.zelf-beeld{border-radius:var(--r-veld)}}
@media (prefers-reduced-motion:reduce){.zelf-beeld{transition:none}.zelf-beeld:hover{transform:none}}

/* ---------- productpagina: de twee manieren om te bestellen naast elkaar (direct of eerst zelf aanpassen); link "Zelf aanpassen" op de kaartjes */
.routes{margin:20px 0 4px}
.routes h2{margin:0 0 10px}
.routes-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.route-keuze{position:relative;display:grid;align-content:start;gap:4px;padding:16px 16px 12px;border:1.5px solid var(--lijn);border-radius:var(--r);background:var(--wit);color:var(--tekst);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .25s var(--soepel)}
.route-keuze strong{font-size:1rem;font-weight:800;letter-spacing:-.015em;color:var(--petrol)}
.route-keuze small{font-size:.875rem;line-height:1.45;color:var(--zacht)}
.route-keuze em{margin-top:6px;font-style:normal;font-weight:700;font-size:.9375rem;color:var(--petrol)}
.rk-ic{display:grid;place-items:center;width:34px;height:34px;margin-bottom:6px;border-radius:50%;background:var(--perzik);color:var(--koraal-diep)}
.rk-ic svg{width:18px;height:18px}
.route-keuze.nu{border-color:var(--koraal);box-shadow:inset 0 0 0 1px var(--koraal);background:var(--perzik)}
.route-keuze.nu .rk-ic{background:var(--koraal);color:#fff}
.rk-ga{--pijl:#fff;display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;font-size:.875rem;color:var(--koraal-diep)}
.rk-ga .kp{width:22px;height:22px;color:var(--koraal);transition:transform .25s var(--soepel)}
a.route-keuze:not(.nu):hover{border-color:var(--koraal);box-shadow:var(--schaduw-klein);transform:translateY(-2px)}
a.route-keuze:not(.nu):hover .rk-ga .kp{transform:translateX(4px)}
.bestel-anker{scroll-margin-top:96px}
@media (max-width:420px){.route-keuze{padding:12px 12px 12px}.route-keuze small{font-size:.8125rem}}
@media (prefers-reduced-motion:reduce){.route-keuze,.rk-ga .kp{transition:none}a.route-keuze:not(.nu):hover{transform:none}}
.cat-pasaan{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;margin-top:6px;font-size:.875rem;font-weight:700;color:var(--koraal-diep);text-decoration:none}
.cat-pasaan svg{width:16px;height:16px;flex:none}
.cat-pasaan:hover{text-decoration:underline;text-underline-offset:4px}
#ontwerpen .cat-pasaan{justify-content:flex-start;margin-top:2px}
.route-keuze{grid-template-rows:auto auto 1fr auto auto}
.route-keuze em{align-self:end}
.rk-neer .kp{rotate:90deg}
.rk-ga{white-space:nowrap}

/* ---------- productpagina: het bestelblok als één witte kaart met genummerde stappen.
   Eén maat voor kopjes (17), veldnamen (15), uitleg (14) en bijschrift (13); vlakken in de kaart zijn lichtgrijs met een dunne rand, zonder eigen schaduw. */
.bestelkaart{margin-top:24px;padding:24px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw)}
.bestelkaart > :first-child{margin-top:0;padding-top:0;border-top:0}
.bestelkaart > .bestel-anker:first-child + *{margin-top:0;padding-top:0;border-top:0}
.bestelkaart .routes{margin:0}
.bestelkaart .kleurkeuze,.bestelkaart .pers,.bestelkaart .aantal,.bestelkaart .linkveld,.bestelkaart .totaal{margin-top:24px;padding-top:24px}
.bestelkaart h2,.bestelkaart .kleurkeuze legend,.bestelkaart .aantal > label{font-size:1.0625rem;font-weight:800;letter-spacing:-.015em;color:var(--petrol)}
.stapnr{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:50%;background:var(--petrol);color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:0;vertical-align:2px}
.bestelkaart .pers-uitleg,.bestelkaart .klein,.bestelkaart .route-keuze small,.bestelkaart .totaal p,.bestelkaart .koop-zeker,.bestelkaart .erbij .erbij-tekst small,.bestelkaart .erbij .erbij-prijs small,.bestelkaart .link-hulp summary{font-size:.875rem;line-height:1.5}
.bestelkaart .route-keuze em,.bestelkaart .rk-ga{font-size:.9375rem}
.bestelkaart .erbij-kop,.bestelkaart .erbij-tekst strong,.bestelkaart .route-keuze strong{font-size:1rem}
.bestelkaart .productprijs strong,.productprijs strong,.bestelkaart .totaal strong,.bestelkaart em,.bestelkaart .erbij-prijs{font-variant-numeric:tabular-nums}
.bestelkaart .route-keuze{border-radius:var(--r-veld);background:var(--grond)}
.bestelkaart .route-keuze.nu{background:var(--perzik)}
.bestelkaart .erbij{border:1px solid var(--lijn);border-radius:var(--r-veld);background:var(--grond);box-shadow:none}
.bestelkaart .erbij:has(input:checked){border-color:var(--koraal);box-shadow:inset 0 0 0 1px var(--koraal)}
.bestelkaart .upload{border-width:1.5px;border-radius:var(--r-veld);background:var(--grond)}
.bestelkaart .stapper,.bestelkaart .kleurkeuze label{background:var(--grond);box-shadow:inset 0 0 0 1px var(--lijn)}
.bestelkaart .kleurkeuze input:checked + label{background:var(--wit)}
.bestelkaart .totaal-som strong{font-size:1.9rem}
.bestelkaart .knop-koop{min-height:62px;margin-top:20px}
.bestelkaart .koop-zeker{margin-top:20px;padding-top:20px;border-top:1px solid var(--lijn);grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bestelkaart .koop-zeker li{grid-template-columns:minmax(0,1fr);gap:8px;align-items:start;align-content:start;font-size:.8125rem;line-height:1.4}
@media (max-width:700px){.bestelkaart{padding:16px 16px;margin-left:-4px;margin-right:-4px}.bestelkaart .koop-zeker{grid-template-columns:minmax(0,1fr)}.bestelkaart .koop-zeker li{grid-template-columns:22px 1fr;gap:10px;align-items:center}}
@media (max-width:480px){.bestelkaart .rk-ga{font-size:.8125rem;gap:4px}.bestelkaart .rk-ga .kp{width:18px;height:18px}.bestelkaart .route-keuze{padding:12px 10px 12px}}

/* ---------- productpagina: de bovenkant in de vormtaal van de homepage-hero. Hetzelfde blauwe vlak met sterren achter het eerste scherm;
   de productfoto en de bestelkaart zweven erop, de titel en de prijs staan er rechtstreeks op. */
.productpagina main{position:relative}
.pp-band{position:absolute;z-index:0;top:10px;left:50%;translate:-50% 0;width:min(1840px,100% - 40px);height:clamp(520px,58vw,700px);border-radius:var(--R);
  background:radial-gradient(circle at 99% 4%,rgba(255,255,255,.55) 0 13%,transparent 13.2%),radial-gradient(circle at 8% 112%,rgba(255,255,255,.5) 0 26%,transparent 26.2%),linear-gradient(105deg,#E6E5EC 0%,#F1F1F4 46%,#E9E8EE 100%)}
.pp-band + .wrap{position:relative;z-index:1;padding-bottom:var(--R)}
.productpagina .kruimel{padding:28px 0 16px}
.productpagina .kruimel,.productpagina .kruimel a{color:#3B404C}
.productpagina .galerij-groot{background:radial-gradient(ellipse 60% 16% at 50% 92%,rgba(15,18,24,.16),transparent 70%),linear-gradient(180deg,#FFFFFF,#F1F5FB);box-shadow:var(--schaduw)}
.productpagina .duimen button{box-shadow:var(--schaduw-klein)}
.productpagina .koop h1{font-size:clamp(2.2rem,4.2vw,3.5rem);line-height:1.03;letter-spacing:-.035em}
.productpagina .koop .lood{color:#33435A;font-size:1.0625rem}
.productpagina .productprijs{margin-top:24px}
.productpagina .productprijs strong{font-size:clamp(2.4rem,3.6vw,3rem)}
.productpagina .productprijs span{color:#3B404C}
.pp-bewijs{margin:16px 0 0;font-size:.9375rem;color:#33435A}
.pp-bewijs .sterren svg{width:18px;height:18px}
.productpagina .bestelkaart{margin-top:28px;box-shadow:var(--schaduw)}
@media (max-width:936px){.pp-band{height:clamp(560px,150vw,760px);width:calc(100% - 16px);top:6px}.productpagina .kruimel{padding:16px 0 12px}}
@media (prefers-reduced-motion:reduce){.pp-band .confetti i{animation:none}}
.pp-band .confetti i:nth-child(1){left:1.5%;top:6%}
.pp-band .confetti i:nth-child(2){left:96%;top:52%}
.pp-band .confetti i:nth-child(3){left:97.5%;top:22%}
.pp-band .confetti i:nth-child(4){left:50%;bottom:2%}
.pp-band .confetti i:nth-child(5){left:52.5%;top:5%}
.pp-band .confetti i:nth-child(6){left:2.5%;bottom:10%}
@media (max-width:936px){.pp-band .confetti i:nth-child(n+3){display:none}}

/* ---------- ontwerpkaartjes op de homepagina: één vaste voet. Prijs links, kleurkeuze rechts, daaronder twee gelijke knoppen (of één over de volle breedte). */
#ontwerpen .ontwerp-tekst{padding:16px 12px 12px}
#ontwerpen .ontwerp-voet{min-height:42px;padding-top:12px;margin-top:auto;flex-wrap:nowrap}
#ontwerpen .cat-prijs{font-size:.875rem;color:var(--zacht);white-space:nowrap}
#ontwerpen .cat-prijs strong{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;color:var(--petrol);font-variant-numeric:tabular-nums}
#ontwerpen .stalen{margin:0 -6px 0 0}
#ontwerpen .stalen label{width:34px;height:34px}
#ontwerpen .staal{width:20px;height:20px}
.ontwerp-acties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.ontwerp-acties-een{grid-template-columns:minmax(0,1fr)}
.kaart-knop{--pijl:var(--koraal);position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:0;padding:0 12px;border-radius:999px;border:1.5px solid transparent;font-size:.875rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.kaart-knop-vol{background:var(--koraal);color:#fff}
.kaart-knop-vol .kp{width:22px;height:22px;color:#fff;transition:transform .25s var(--soepel)}
.kaart-knop-vol:hover{background:var(--koraal-diep);text-decoration:none}
.kaart-knop-vol:hover .kp{transform:translateX(3px)}
.kaart-knop-lijn{border-color:rgba(15,18,24,.24);color:var(--petrol);background:var(--wit)}
.kaart-knop-lijn svg{width:16px;height:16px;flex:none}
.kaart-knop-lijn:hover{border-color:var(--petrol);text-decoration:none}
#ontwerpen .cat-pasaan{justify-content:center;margin-top:0;font-size:.875rem}
@media (max-width:560px){#ontwerpen .ontwerp-tekst{padding:12px 8px 8px}#ontwerpen .ontwerp-voet{flex-wrap:wrap;gap:4px 8px}#ontwerpen .stalen{margin:0 0 0 -6px}.ontwerp-acties{grid-template-columns:minmax(0,1fr);gap:6px}.kaart-knop{min-height:42px;font-size:.875rem}}

/* ---------- productpagina: het bestelblok breder en korter. Bredere rechterkolom, de twee routes als compacte rij, extra's als één regel per stuk. */
@media (min-width:937px){.productpagina .product{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,56px)}}
.bestelkaart .route-keuze{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:12px;padding:12px 12px}
.bestelkaart .route-keuze .rk-ic{margin:0;width:36px;height:36px}
.rk-tekst{display:grid;gap:1px;min-width:0}
.bestelkaart .route-keuze small{font-size:.8125rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-pijl{--pijl:#fff;display:grid}
.rk-pijl .kp{width:24px;height:24px;color:var(--koraal);transition:transform .25s var(--soepel)}
a.route-keuze:hover .rk-pijl .kp{transform:translateX(3px)}
.bestelkaart .kleurkeuze,.bestelkaart .pers,.bestelkaart .aantal,.bestelkaart .linkveld,.bestelkaart .totaal{margin-top:20px;padding-top:20px}
.bestelkaart .pers-geen{font-size:.875rem;color:var(--zacht)}
.bestelkaart .pers-geen h2{display:none}
.bestelkaart .pers-geen p{margin:0}
.bestelkaart .link-hulp{margin-top:10px}
@media (min-width:480px){
.bestelkaart .erbij{grid-template-columns:52px minmax(0,1fr) auto auto;grid-template-areas:"duo kop prijs knop" "duo tekst prijs knop";gap:2px 12px;padding:12px 12px;margin-top:10px}
.bestelkaart .aantal + .erbij{margin-top:16px}
.bestelkaart .erbij .erbij-duo img{width:52px;height:52px;border-radius:var(--r-veld)}
.bestelkaart .erbij-kop{font-size:.8125rem;font-weight:700;color:var(--zacht);gap:2px 8px}
.bestelkaart .erbij-kop i{font-size:.6875rem}
.bestelkaart .erbij-tekst small{display:none}
.bestelkaart .erbij-prijs{align-self:center}
.bestelkaart .erbij-knop{align-self:center;min-height:40px;padding:0 16px;font-size:.875rem;white-space:nowrap}
}
.bestelkaart .koop-zeker{margin-top:16px;padding-top:16px}
.bestelkaart .link-status:empty{display:none}
.bestelkaart .link-hulp{margin-top:12px}

/* ---------- productpagina: de drie zekerheden onder de koopknop. Pictogram links, vet kopje met één regel eronder, drie gelijke kolommen met een dunne lijn ertussen. */
.bestelkaart .koop-zeker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;padding:16px 0 0;border-top:1px solid var(--lijn)}
.bestelkaart .koop-zeker li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:center;gap:10px;padding:2px 12px;font-size:.8125rem;line-height:1.35}
.bestelkaart .koop-zeker li:first-child{padding-left:0}
.bestelkaart .koop-zeker li:last-child{padding-right:0}
.bestelkaart .koop-zeker li + li{border-left:1px solid var(--lijn)}
.bestelkaart .koop-zeker .kz-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-veld);background:var(--perzik);color:var(--koraal-diep)}
.bestelkaart .koop-zeker .kz-ic svg{width:20px;height:20px;padding:0;border-radius:0;background:none;color:inherit}
.bestelkaart .koop-zeker strong{display:block;font-size:.875rem;font-weight:800;letter-spacing:-.01em;color:var(--petrol)}
.bestelkaart .koop-zeker small{display:block;font-size:.8125rem;color:var(--zacht)}
.bestelkaart .koop-zeker a{font-weight:500;color:var(--zacht);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lijn)}
.bestelkaart .koop-zeker a:hover{color:var(--petrol);text-decoration-color:currentColor}
@media (max-width:700px){.bestelkaart .koop-zeker{grid-template-columns:minmax(0,1fr);gap:10px}.bestelkaart .koop-zeker li{grid-template-columns:auto minmax(0,1fr);padding:0;gap:12px}.bestelkaart .koop-zeker li + li{border-left:0}}
@media (min-width:701px){.bestelkaart .koop-zeker li{gap:8px;padding:2px 10px}.bestelkaart .koop-zeker .kz-ic{width:34px;height:34px;border-radius:var(--r-klein)}.bestelkaart .koop-zeker .kz-ic svg{width:18px;height:18px}.bestelkaart .koop-zeker strong{font-size:.8125rem;white-space:nowrap}.bestelkaart .koop-zeker small{font-size:.75rem;white-space:nowrap}}

/* ---------- hero en navigatie als één geheel: op pagina's met een hero loopt het blauwe vlak door tot bovenaan het scherm en staat de navigatie er doorzichtig op.
   Zodra je scrolt krijgt de balk zijn witte, matte achtergrond terug. Pagina's zonder hero houden de gewone witte balk. */
body:has(.hero-kaart) .kop,body:has(.pp-band) .kop{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .25s,box-shadow .25s}
body:has(.hero-kaart) .kop.gescrold,body:has(.pp-band) .kop.gescrold,body:has(.hero-kaart) .kop:has(.menuknop[aria-expanded="true"]),body:has(.pp-band) .kop:has(.menuknop[aria-expanded="true"]){background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--schaduw)}
body:has(.hero-kaart) .kop:not(.gescrold) .nav ul a:hover,body:has(.pp-band) .kop:not(.gescrold) .nav ul a:hover{background:rgba(255,255,255,.6)}
body:has(.hero-kaart) .hero{padding-top:0}
body:has(.hero-kaart) .hero-kaart{width:100%;border-radius:0 0 var(--R) var(--R);padding-top:78px}
body:has(.pp-band) .pp-band{top:0;width:100%;border-radius:0 0 var(--R) var(--R);height:calc(clamp(520px,58vw,700px) + 78px)}
body:has(.pp-band) .pp-band + .wrap{padding-top:78px}
@media (max-width:936px){body:has(.pp-band) .pp-band{width:100%;top:0;height:calc(clamp(560px,150vw,760px) + 78px)}}
@media (prefers-reduced-motion:reduce){.kop{transition:none!important}}
body:has(.hero-kaart) .hero-kaart > .confetti,body:has(.pp-band) .pp-band > .confetti{inset:78px 0 0 0}
body:has(.hero-kaart) .kop:not(.gescrold) .wagenknop,body:has(.pp-band) .kop:not(.gescrold) .wagenknop,body:has(.hero-kaart) .kop:not(.gescrold) .menuknop,body:has(.pp-band) .kop:not(.gescrold) .menuknop{background:rgba(255,255,255,.72)}
/* de wazige ster stond half afgesneden onder het logo: lager en naar het midden, waar hij vrij zweeft */
body:has(.hero-kaart) .hero-kaart > .confetti i:nth-child(1){left:43%;top:7%;width:46px;height:46px}
@media (max-width:936px){body:has(.hero-kaart) .hero-kaart > .confetti i:nth-child(1){left:auto;right:6%;top:4%;width:34px;height:34px}}
@media (max-width:936px){body:has(.hero-kaart) .hero-kaart > .confetti i:nth-child(1){display:none}}
/* stapnummers: licht blauw vlakje met een blauw cijfer in plaats van een donkere bol */
.stapnr{width:28px;height:28px;margin-right:10px;border-radius:var(--r-klein);background:var(--perzik);color:var(--koraal-diep);box-shadow:inset 0 0 0 1px var(--perzik-diep);font-size:.8125rem;font-weight:800;vertical-align:1px}

/* ---------- categoriepagina's in de vormtaal van de homepagina: de kop is een blauw hero-vlak tot bovenaan het scherm (navigatie doorzichtig erop),
   en elk kaartje heeft dezelfde voet: prijs links, kleur rechts, daaronder twee gelijke knoppen. */
body:has(.cat-kop) .kop{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .25s,box-shadow .25s}
body:has(.cat-kop) .kop.gescrold,body:has(.cat-kop) .kop:has(.menuknop[aria-expanded="true"]){background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--schaduw)}
body:has(.cat-kop) .kop:not(.gescrold) .nav ul a:hover{background:rgba(255,255,255,.6)}
body:has(.cat-kop) .kop:not(.gescrold) .wagenknop,body:has(.cat-kop) .kop:not(.gescrold) .menuknop{background:rgba(255,255,255,.72)}
.cat-kop{position:relative;padding:78px 0 clamp(36px,4.5vw,64px);margin-bottom:clamp(24px,3vw,40px);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% 118%,rgba(255,255,255,.5) 0 24%,transparent 24.2%),linear-gradient(105deg,#E6E5EC 0%,#F1F1F4 46%,#E9E8EE 100%)}
.cat-kop > .confetti{inset:78px 0 0 0}
.cat-kop > .wrap{position:relative}
.cat-kop .kruimel{padding:20px 0 16px}
.cat-kop .kruimel,.cat-kop .kruimel a{color:#3B404C}
.cat-kop h1{font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1.03;letter-spacing:-.035em}
.cat-kop .lood{color:#33435A}
.cat-kop .snel-tegel{box-shadow:var(--schaduw)}
.cat-kop > .confetti i:nth-child(1){left:44%;top:6%;width:44px;height:44px}
.cat-kop > .confetti i:nth-child(4){left:38%;bottom:4%}
.cat-kop > .confetti i:nth-child(6){left:1.5%;bottom:22%}
@media (max-width:936px){.cat-kop > .confetti i:nth-child(n+3){display:none}.cat-kop > .confetti i:nth-child(1){display:none}}
.cat-rooster .ontwerp-tekst{padding:16px 10px 10px}
.cat-rooster .ontwerp-voet{flex-wrap:nowrap;min-height:40px;padding-top:12px}
.cat-rooster .cat-prijs{white-space:nowrap}
.cat-rooster .cat-prijs strong{font-size:1.0625rem;letter-spacing:-.02em;color:var(--petrol);font-variant-numeric:tabular-nums}
.cat-rooster .stalen{margin:0 -6px 0 0}
.cat-rooster .stalen label{width:32px;height:32px}
.cat-rooster .staal{width:19px;height:19px}
.cat-rooster .cat-koop{min-height:46px;margin-top:10px}
.cat-rooster .kaart-knop{width:100%;margin-top:8px;font-size:.875rem}
.cat-rooster .cat-pasaan{display:inline-flex;justify-content:center}
@media (max-width:420px){.cat-rooster .ontwerp-voet{flex-wrap:wrap;gap:2px 8px}.cat-rooster .stalen{margin:0 0 0 -6px}}

/* voor en na in Google Maps (homepagina, sectie Waarom) */
/* het beeld heeft ruimte om de schaduwen heen; de negatieve marge trekt die ruimte weer in */
.voor-na{display:block;width:calc(100% + 8%);max-width:720px;height:auto;margin:-4% -4% -6%}

/* beheer: nakijken voor de productie */
.adm-nakijk-lijst{display:grid;gap:10px;margin:16px 0;padding:0;list-style:none;font-size:.9375rem;line-height:1.5}
.adm-nakijk-lijst li{position:relative;padding-left:20px}
.adm-nakijk-lijst li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--perzik-rand)}
.adm-nakijk-lijst a{color:var(--koraal-diep);font-weight:600;word-break:break-all}
.adm-nakijk-vink{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-weight:700;color:var(--petrol)}
.adm-nk-vak{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid var(--db-rand);border-radius:var(--r-veld);background:var(--grond)}
.adm-nk-vak .veld{margin:0}.adm-nk-vak input[type=text],.adm-nk-vak textarea{width:100%;font:inherit;font-size:.9375rem;line-height:1.5}
.adm-nk-vak textarea{min-height:15em;resize:vertical}
.adm-nk-aan{margin:0;font-size:.8125rem;color:#5B6B85}.adm-nk-aan strong{color:var(--petrol);overflow-wrap:anywhere}
.adm-nk-hulp{display:block;margin-top:6px;font-size:.75rem;color:#5B6B85}
.adm-nk-beeld{margin:0;font-weight:600;font-size:.9375rem}
.adm-nk-knoppen{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}.adm-nk-knoppen .adm-kopie{margin-left:0}
.adm-nakijk-vink input{width:20px;height:20px;accent-color:var(--koraal)}
.adm-nakijk-vink small{font-weight:500;color:var(--zacht)}

/* ontwerpen per formaat (homepagina): de formaatknoppen boven de ontwerpen, en per formaat een regel met maat en prijs */
.fmt-paneel:focus{outline:none}
.fmt-info{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 20px;padding:12px 16px 12px 20px;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw-klein)}
.fmt-info p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0;font-size:.9375rem;color:var(--zacht)}
.fmt-info strong{font-size:1.0625rem;font-weight:800;color:var(--petrol)}
.fmt-info b{font-weight:800;color:var(--petrol)}
.fmt-info .knop{flex:none}
#op-eigen{margin-top:24px}
@media (max-width:700px){.fmt-info{flex-direction:column;align-items:flex-start;padding:12px 16px}}

/* ================================================================ SYSTEEM 13-10: één knopfamilie, één accentkleur voor kleine keuzes, één band bovenaan elke pagina.
   (De maten zelf komen uit maatvoering.py: vier radii, twee schaduwen, vaste lettermaten en afstanden.) */
:root{--knop-h:52px;--knop-h-klein:44px;--knop-h-groot:58px}

/* ---- knoppen: drie hoogtes. Groot voor de ene hoofdactie van een pagina, gewoon, en klein voor kaartjes en balken. */
.knop{min-height:var(--knop-h)}
.knop-klein,.cat-koop,.cat-rooster .cat-koop,.kaart-knop,.erbij-knop,.bestelkaart .erbij-knop,.wtip-koop .knop,.wagen .wtip-koop .knop,.filters-voet .knop{min-height:var(--knop-h-klein)}
.knop-koop,.bestelkaart .knop-koop,.af-slot .knop-koop,.demo-form .knop{min-height:var(--knop-h-groot)}
.wagen-voet .knop-koop{min-height:var(--knop-h)}
.kaart-knop,.erbij-knop,.cat-koop{font-size:.9375rem}
/* een knop die bezig is: zelfde vorm, rustiger, niet nog eens aan te klikken */
.knop[disabled],.knop.bezig,.kaart-knop.bezig,form.bezig .knop-koop{opacity:.65;cursor:progress;transform:none!important;box-shadow:none!important}

/* ---- donker alleen nog voor tekst en grote vlakken: elke kleine gekozen toestand in het heldere blauw */
.kies[aria-selected="true"],.kies[aria-selected="true"]::after,.tabs button[aria-selected="true"],.tabs button[aria-pressed="true"],.pers-keuze input:checked + label,.cat-soorten a[aria-current],.erbij.aan .erbij-knop,.platform-lijst .klaar{background:var(--koraal);color:#fff}
.kleur input:checked + label,.stalen input:checked + label,.kleurkeuze input:checked + label,.duimen [aria-selected="true"],.snel-tegel[aria-pressed="true"],.erbij.aan{border-color:var(--koraal)}
.duimen [aria-selected="true"]{color:var(--koraal-diep)}
.erbij.aan .erbij-knop{border-color:var(--koraal)}
.erbij.aan .erbij-vink{background:var(--koraal);border-color:var(--koraal);color:#fff}
.facet input:checked{border-color:var(--koraal);background-color:var(--koraal)}
.keus:has(input:checked){border-color:var(--koraal);box-shadow:inset 0 0 0 1px var(--koraal)}
.keus:has(input:checked) .keus-rond{border-color:var(--koraal);background:var(--koraal)}
.cat-koop.klaar{background:var(--koraal-diep);border-color:var(--koraal-diep)}
.erbij-knop{border-color:rgba(15,18,24,.28)}

/* ---- kaarten: overal dezelfde beweging onder de muis */
.ontwerp,.snel-tegel,.route-keuze,.zelf-beeld{transition:transform .25s var(--soepel),box-shadow .25s,border-color .2s}
.ontwerp:hover,.snel-tegel:hover{transform:translateY(-4px);box-shadow:var(--schaduw)}

/* ---- pagina's zonder hero (winkelwagen, afrekenen, inloggen, voorwaarden, 404): hetzelfde blauwe vlak bovenaan, lager, met de kopbalk doorzichtig erop */
body.wagenpagina,body.afrekenpagina,body.loginpagina,body:has(main > .juridisch){position:relative}
body.wagenpagina::before,body.afrekenpagina::before,body.loginpagina::before,body:has(main > .juridisch)::before{content:"";position:absolute;z-index:-1;inset:0 0 auto 0;height:clamp(260px,30vw,360px);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,#E6E5EC 0%,#F1F1F4 46%,#E9E8EE 100%)}
body.wagenpagina .kop,body:has(main > .juridisch) .kop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .25s,box-shadow .25s}
body.wagenpagina .kop.gescrold,body:has(main > .juridisch) .kop.gescrold,body.wagenpagina .kop:has(.menuknop[aria-expanded="true"]),body:has(main > .juridisch) .kop:has(.menuknop[aria-expanded="true"]){background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--schaduw)}
body.wagenpagina .kop:not(.gescrold) .wagenknop,body.wagenpagina .kop:not(.gescrold) .menuknop,body:has(main > .juridisch) .kop:not(.gescrold) .wagenknop,body:has(main > .juridisch) .kop:not(.gescrold) .menuknop{background:rgba(255,255,255,.72)}
body.wagenpagina .kop:not(.gescrold) .nav ul a:hover,body:has(main > .juridisch) .kop:not(.gescrold) .nav ul a:hover{background:rgba(255,255,255,.6)}
.afkop{background:transparent;border-bottom:0}

/* ---------- geen donkere secties meer: wat donkerblauw was, is nu hetzelfde lichte blauw als de hero, met donkere tekst en blauwe knoppen.
   (Alleen de voet onderaan de pagina blijft donker.) */
.vel-hemel{background:radial-gradient(circle at 104% -6%,rgba(255,255,255,.55) 0 26%,transparent 26.15%),radial-gradient(circle at -4% 104%,rgba(255,255,255,.5) 0 24%,transparent 24.15%),linear-gradient(105deg,#E6E5EC 0%,#F1F1F4 46%,#E9E8EE 100%)}
.vel-hemel .lood{color:#33435A}
.vel-hemel .label{color:var(--koraal-diep)}
.vel-hemel .feiten > div{border-top-color:rgba(15,18,24,.14)}
.vel-hemel .zelf-voet p{color:#3B404C}
.vel-hemel .zelf-beeld,.vel-hemel .dash-beeld{box-shadow:var(--schaduw)}
.vel-hemel .demo-form label{color:var(--petrol)}
.vel-hemel .demo-stappen{color:#3B404C}
.vel-hemel .demo-stappen span{border-color:#8FA5C6}
.vel-hemel .demo-stappen li.aan{color:var(--petrol)}
.vel-hemel .demo-stappen li.aan span{background:var(--koraal);border-color:var(--koraal);color:#fff}
.vel-hemel .tekstknop{color:var(--koraal-diep)}
.vel-hemel .geen-abo{background:rgba(255,255,255,.7);box-shadow:none}
.vel-hemel .tijdlijn li{color:#3B404C}
.vel-hemel .tijdlijn li::before{background:#9DB7E2}
.vel-hemel .tijdlijn span{background:#6E94D4;box-shadow:0 0 0 4px #D8E6FD}
.vel-hemel .tijdlijn b{color:var(--tekst)}
.vel-hemel .tijdlijn .piek span{background:var(--koraal);box-shadow:0 0 0 5px rgba(29,95,214,.2)}
.vel-hemel .tijdlijn .piek b{color:var(--petrol)}
.vel-hemel .tijdlijn small{color:var(--koraal-diep)}
.vel-hemel .tijdlijn-uitleg{background:rgba(255,255,255,.78);color:var(--tekst)}
.vel-hemel .tijdlijn-uitleg strong{color:var(--petrol)}

/* de kaart "Meer reviews" in hetzelfde lichte blauw: treden van licht naar helder blauw in plaats van donker met goud */
.boost-licht{background:radial-gradient(circle at 104% -6%,rgba(255,255,255,.55) 0 26%,transparent 26.15%),linear-gradient(105deg,#E6E5EC 0%,#F1F1F4 46%,#E9E8EE 100%)}
.boost-licht .trap li{background:rgba(255,255,255,.72);color:var(--zacht)}
.boost-licht .trap li:nth-child(2){background:#9DBDF3;color:#1F3A66}
.boost-licht .trap li:nth-child(3){background:var(--koraal);color:#DCE8FF}
.boost-licht .trap span{background:var(--perzik);color:var(--koraal-diep)}
.boost-licht .trap b{color:var(--petrol)}
.boost-licht .trap li:nth-child(2) span{background:rgba(255,255,255,.6);color:var(--petrol)}
.boost-licht .trap li:nth-child(3) span{background:#fff;color:var(--koraal-diep)}
.boost-licht .trap li:nth-child(3) b{color:#fff}

/* sfeerbeeld in de afsluitende kaart: de foto vult het hele vak (geen grijs vlak, geen masker) */
.cta-beeld:has(.cta-foto){padding:0;background:none}
.cta-beeld .cta-foto{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:22% 60%;-webkit-mask-image:none;mask-image:none}
.cta-beeld .cta-producten{object-position:50% 55%}

/* ---------- homepagina "Zelf ontwerpen", tweede versie: zelfde opbouw als de andere secties (bandkop + één witte kaart).
   Links de drie stappen en de prijs, rechts een blauw vlak waarin het scherm van de configurator groot staat en uit beeld loopt. */
.zelf-kaart{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:stretch;padding:clamp(12px,1.2vw,16px)}
.zelf-tekst{display:flex;flex-direction:column;padding:clamp(12px,2.4vw,32px) 0 clamp(8px,1.6vw,20px) clamp(8px,2.4vw,32px)}
.zelf-stappen{display:grid;gap:0;margin:0;padding:0;list-style:none}
.zelf-stappen li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--lijn)}
.zelf-stappen li:first-child{border-top:0;padding-top:0}
.zelf-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-veld);background:var(--perzik);color:var(--koraal-diep)}
.zelf-ic svg{width:24px;height:24px}
.zelf-stappen h3{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.zelf-stappen p{margin:4px 0 0;font-size:.9375rem;line-height:1.55;color:var(--zacht)}
.zelf-tekst .paneel-voet{margin-top:auto}
.zelf-vlak{position:relative;display:block;min-height:clamp(320px,38vw,520px);border-radius:calc(var(--R) - 12px);overflow:hidden;text-decoration:none;
  background:radial-gradient(circle at 96% 4%,rgba(255,255,255,.55) 0 18%,transparent 18.2%),linear-gradient(120deg,#E6E5EC 0%,#F1F1F4 50%,#E9E8EE 100%)}
.zelf-scherm{position:absolute;left:9%;top:11%;width:118%;border-radius:var(--r-veld) 0 0 0;overflow:hidden;background:#fff;box-shadow:var(--schaduw);transition:transform .6s var(--soepel)}
.zelf-scherm img{display:block;width:100%;height:auto}
.zelf-vlak:hover .zelf-scherm{transform:translate(-8px,-6px)}
.zelf-los{position:absolute;left:4%;bottom:6%;display:grid;justify-items:center;gap:8px;width:clamp(120px,15vw,180px);padding:12px 12px 10px;border-radius:var(--r);background:#fff;box-shadow:var(--schaduw)}
.zelf-los img{width:100%;height:auto}
.zelf-los b{font-size:.8125rem;font-weight:700;color:var(--petrol);text-align:center;line-height:1.3}
@media (max-width:900px){.zelf-kaart{grid-template-columns:minmax(0,1fr)}.zelf-vlak{order:-1;min-height:clamp(240px,62vw,380px)}.zelf-tekst{padding:8px 8px 12px}.zelf-scherm{left:8%;top:10%;width:150%}.zelf-los{width:110px;padding:8px}}
@media (prefers-reduced-motion:reduce){.zelf-scherm{transition:none}.zelf-vlak:hover .zelf-scherm{transform:none}}
@media (max-width:900px){.zelf-los{left:auto;right:5%;bottom:6%;width:96px}.zelf-los b{display:none}}

/* ---------- homepagina "Probeer het zelf", in het sectiepatroon: bandkop + één witte kaart. Links het veld, de knop en de drie stappen onder elkaar, rechts het podium als blauw vlak. */
.demo-kaart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(48%,560px));gap:clamp(20px,3vw,48px);align-items:stretch;padding:clamp(12px,1.2vw,16px)}
.demo-kaart .demo-tekst{display:flex;flex-direction:column;padding:clamp(12px,2.4vw,32px) 0 clamp(8px,1.6vw,20px) clamp(8px,2.4vw,32px)}
.demo-kaart .demo-form{margin-top:0;max-width:none}
.demo-kaart .demo-form label{color:var(--petrol)}
.demo-kaart .tekstknop{color:var(--koraal-diep)}
.demo-kaart .demo-stappen{display:grid;gap:0;margin-top:auto;padding-top:24px;color:var(--zacht);font-size:.9375rem;font-weight:500}
.demo-kaart .demo-stappen li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--lijn)}
.demo-kaart .demo-stappen span{width:36px;height:36px;border:0;border-radius:var(--r-klein);background:var(--perzik);color:var(--koraal-diep);font-size:.9375rem}
.demo-kaart .demo-stappen b{display:block;font-weight:800;letter-spacing:-.01em;color:var(--petrol)}
.demo-kaart .demo-stappen small{display:block;font-size:.875rem;line-height:1.45}
.demo-kaart .demo-stappen li.aan{color:var(--tekst)}
.demo-kaart .demo-stappen li.aan span{background:var(--koraal);color:#fff}
.demo-kaart .podium-wrap{display:grid;align-content:center;gap:0}
.demo-kaart .podium{max-width:none;border-radius:calc(var(--R) - 12px);box-shadow:none}
.demo-kaart .podium-noot{position:absolute;margin:0;left:0;right:0;bottom:12px;color:#3B404C;font-size:.8125rem;pointer-events:none}
.demo-kaart .podium-wrap{position:relative}
@media (max-width:900px){.demo-kaart{grid-template-columns:minmax(0,1fr)}.demo-kaart .podium-wrap{order:-1}.demo-kaart .demo-tekst{padding:8px 8px 12px}}
@media (max-width:900px){.demo-kaart .podium-noot{position:static;margin:8px 8px 0;text-align:left}}

/* ---------- homepagina "Wat reviews je opleveren": zelfde kaart als "Zelf ontwerpen"; rechts hetzelfde profiel twee keer, zonder en met kaart */
.vt-vlak{display:grid;align-content:center;gap:16px;padding:clamp(20px,3.4vw,48px) clamp(16px,3vw,44px) clamp(44px,4vw,56px)}
.vt-profiel{position:relative;padding:20px 24px;border-radius:var(--r);background:#fff}
.vt-voor{width:72%;opacity:.78}
.vt-na{margin-left:auto;width:88%;box-shadow:var(--schaduw);padding-right:clamp(110px,14vw,170px)}
.vt-tag{margin:0 0 8px;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
.vt-na .vt-tag{color:var(--koraal-diep)}
.vt-naam{margin:0;font-size:1.125rem;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
.vt-score{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;font-size:.9375rem;color:var(--zacht)}
.vt-score b{font-size:1.25rem;font-weight:800;color:var(--petrol);font-variant-numeric:tabular-nums}
.vt-score i{font-style:normal}
.vt-score .sterren svg{width:18px;height:18px}
.vt-voor .sterren{color:#C9D2E0}
.vt-voor .sterren svg{filter:none}
.vt-voor .sterren svg:nth-child(-n+4){color:var(--goud)}
.vt-regel{margin:8px 0 0;font-size:.875rem;color:var(--zacht)}
.vt-staven{display:flex;align-items:flex-end;gap:6px;height:56px;margin:16px 0 0;padding:0;list-style:none}
.vt-staven li{flex:1;max-width:28px;height:var(--h);border-radius:var(--r-klein) var(--r-klein) 2px 2px;background:var(--perzik-diep)}
.vt-staven li:last-child{background:var(--koraal)}
.vt-na img{position:absolute;right:-4%;bottom:-10%;width:clamp(110px,15vw,180px);height:auto}
.vt-noot{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font-size:.8125rem;color:#3B404C}
@media (max-width:900px){.vt-vlak{min-height:0}.vt-voor{width:84%}.vt-na{width:100%}}

/* ================================================================ dashboard, beheer en inloggen in het lichte ontwerp (13-10): de donkere band is nu hetzelfde lichtblauw als de hero op de site.
   --band moet een effen kleur blijven (hij wordt ook als schaduw van 100vmax gebruikt om de band over de volle breedte te trekken). */
.dashboardpagina{--band:#D3E3FD;--band-tekst:#0F1218;--band-zacht:#3B404C;--band-lijn:rgba(15,18,24,.14)}
.dashboardpagina .db-kop{border-bottom-color:var(--band-lijn)}
.dashboardpagina .db-kop .merk,.dashboardpagina .db-wie-tekst strong{color:var(--band-tekst)}
.dashboardpagina .db-wie-tekst small{color:var(--band-zacht)}
.dashboardpagina .db-initiaal{background:var(--koraal);color:#fff}
.dashboardpagina .db-kop .db-uit{border-color:rgba(15,18,24,.24);background:rgba(255,255,255,.6);color:var(--band-tekst)}
.dashboardpagina .db-kop .db-uit:hover{background:#fff;border-color:rgba(15,18,24,.4)}
@media (min-width:0){
.dashboardpagina .db-kop .db-nav a{color:var(--band-zacht)}
.dashboardpagina .db-kop .db-nav a:hover{background:rgba(255,255,255,.55);color:var(--band-tekst)}
.dashboardpagina .db-kop .db-nav a[aria-current]{background:#fff;color:var(--band-tekst)}
.dashboardpagina .db-kop .db-nav-n{background:rgba(15,18,24,.1);color:var(--band-tekst)}
.dashboardpagina .db-kop .db-nav a[aria-current] .db-nav-n{background:var(--perzik);color:var(--koraal-diep)}
.dashboardpagina .db-kop .db-nav #n-bestellingen{background:var(--koraal);color:#fff}
}
.dashboardpagina .db-voorbeeld{color:var(--band-zacht)}
.dashboardpagina .db-voorbeeld strong{background:rgba(255,255,255,.7);color:var(--koraal-diep)}
.dashboardpagina .db-titel,.dashboardpagina .db-titel h1{color:var(--band-tekst)}
.dashboardpagina .db-titel .db-lood,.beheerpagina .db-titel p:not(.db-datum),.beheerpagina .adm-terug{color:var(--band-zacht)}
.beheerpagina .adm-terug:hover{color:var(--band-tekst)}
.dashboardpagina .db-titel .db-datum{color:var(--band-zacht)}
.dashboardpagina .db-acties .knop{background:var(--koraal);border-color:var(--koraal);color:#fff}
.dashboardpagina .db-acties .knop:hover{background:var(--koraal-diep)}
.dashboardpagina .db-acties .knop-lijn{background:rgba(255,255,255,.6);border:1px solid rgba(15,18,24,.24);color:var(--band-tekst)}
.dashboardpagina .db-acties .knop-lijn:hover{background:#fff}
.dashboardpagina .db-band-kpi .db-tegel{border-left-color:var(--band-lijn)}
.dashboardpagina .db-band-kpi .db-tegel-naam,.dashboardpagina .db-band-kpi .db-getal small,.dashboardpagina .db-band-kpi .db-tegel-sub{color:var(--band-zacht)}
.dashboardpagina .db-band-kpi .db-getal{color:var(--band-tekst)}
.dashboardpagina .db-band-kpi .db-tegel:first-child .db-getal{color:var(--koraal)}
.dashboardpagina .st-werkbalk .db-periode{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--band-lijn)}
.dashboardpagina .st-werkbalk .db-periode button{color:var(--band-zacht)}
.dashboardpagina .st-werkbalk .db-periode button:hover{color:var(--band-tekst)}
.dashboardpagina .st-werkbalk .db-periode button[aria-pressed="true"]{background:var(--koraal);color:#fff}
.dashboardpagina .st-werkbalk .st-kies select,.dashboardpagina .st-werkbalk .st-export,.dashboardpagina .st-werkbalk .st-datums input{border-color:rgba(15,18,24,.24);background-color:rgba(255,255,255,.7);color:var(--band-tekst)}
.dashboardpagina .st-werkbalk .st-export:hover{background:#fff}
.dashboardpagina .st-werkbalk .st-datums{color:var(--band-zacht)}
.beheerpagina .adm-label{background:rgba(255,255,255,.7);color:var(--koraal-diep)}
.beheerpagina .db-voorbeeld button{border-color:rgba(15,18,24,.24);background:rgba(255,255,255,.6);color:var(--band-tekst)}
.beheerpagina .adm-filter button[aria-pressed="true"]{background:none}
/* de kaart "best lopende kaart" en de tooltips in de grafiek */
.st-best{background:var(--perzik);color:var(--tekst)}
.st-best-kop span{color:var(--koraal-diep)}
.st-best-kop small,.st-best-tekst small{color:var(--zacht)}
.dashboardpagina .st-best-tekst strong{color:var(--petrol)}
.st-best-foto{background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent)}
.dashboardpagina .st-eerste .db-balk i{background:var(--koraal)}
.gr-kol li.top i{box-shadow:0 0 0 3px var(--koraal)}
.dashboardpagina .db-staven li:hover .db-staaf{background:var(--koraal-diep)}
/* inloggen en de poort van het beheer */
.loginpagina{background:#FFFFFF}
.loginpagina .afkop{border-bottom:0}
.loginpagina .afkop .merk,.loginpagina .lg-terug{color:var(--petrol)}
.loginpagina::before{background-image: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,#E6E5EC 0%,#F1F1F4 46%,#E9E8EE 100%);background-size:auto;background-position:0 0;background-repeat:no-repeat;z-index:-1;border-radius:0 0 var(--R) var(--R)}
.loginpagina .lg-rechts{background:var(--perzik);color:var(--tekst)}
.loginpagina .lg-rechts strong{color:var(--petrol)}.loginpagina .lg-rechts span{color:var(--zacht)}.loginpagina .lg-rechts li svg{color:var(--koraal-diep);background:#fff}
.adm-poort{background:linear-gradient(180deg,#D3E3FD 0,#D3E3FD 300px,#F6F6F8 300px)}
/* het beeldmerk in zijn gewone kleuren (donkere kaart) nu de band licht is; bleke teksten op de band donkerder */
.dashboardpagina .db-kop .merk,.loginpagina .afkop .merk,.beheerpagina .db-kop .merk{--mk-kaart:#0F1218;--mk-teken:#fff}
.dashboardpagina .db-datum{color:var(--koraal-diep)!important}
.beheerpagina .adm-druk{background:var(--koraal);border-color:var(--koraal);color:#fff}
.st-best-tekst p{color:var(--zacht)}

/* dashboard en beheer: gouden sterren in de lichte band, zoals op de site. Groot en wazig op de achtergrond, klein en scherp ervoor; de tegel is breed, zodat het patroon zich pas ver buiten beeld herhaalt. */
.dashboardpagina{--sterren:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221400%22 height=%22620%22 viewBox=%220 0 1400 620%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=%222.4%22/%3E%3C/filter%3E%3Cfilter id=%22b2%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=%22b3%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=%22b5%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%224%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=%221.2%22/%3E%3C/filter%3E%3Cfilter id=%22b8%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%226%22/%3E%3C/filter%3E%3Cfilter id=%22b9%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%3Cfilter id=%22b11%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%3C/defs%3E%3Cpath transform=%22translate(70 150) rotate(-14 15 15) scale(1.250)%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(%23b0)%22/%3E%3Cpath transform=%22translate(250 330) rotate(10 6.5 6.5) scale(0.542)%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(430 120) rotate(22 23 23) scale(1.917)%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.55%22 filter=%22url(%23b2)%22/%3E%3Cpath transform=%22translate(610 400) rotate(-8 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.8%22 filter=%22url(%23b3)%22/%3E%3Cpath transform=%22translate(790 210) rotate(16 5.5 5.5) scale(0.458)%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.95%22/%3E%3Cpath transform=%22translate(940 470) rotate(-20 18 18) scale(1.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.5%22 filter=%22url(%23b5)%22/%3E%3Cpath transform=%22translate(1090 140) rotate(12 11 11) scale(0.917)%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(%23b6)%22/%3E%3Cpath transform=%22translate(1260 360) rotate(-12 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(1340 90) rotate(18 26 26) scale(2.167)%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.4%22 filter=%22url(%23b8)%22/%3E%3Cpath transform=%22translate(160 500) rotate(24 10 10) scale(0.833)%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.7%22 filter=%22url(%23b9)%22/%3E%3Cpath transform=%22translate(520 540) rotate(-6 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(1180 560) rotate(8 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(%23b11)%22/%3E%3C/svg%3E");--ster-groot:radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) 0 49.6%,transparent 50%)}
.dashboardpagina .db-kop{background-size:1400px 620px;background-position:center -120px}
.dashboardpagina .db-titel::before{background-size:560px 560px,1400px 620px;background-position:right -200px top -230px,center -193px}
.dashboardpagina .db-kop{background-image:none}

/* ---------- homepagina "Dashboard" in het sectiepatroon: zelfde kaart als "Zelf ontwerpen", gespiegeld (beeld links, tekst rechts) */
.dash-kaart{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.dash-kaart .zelf-tekst{padding:clamp(12px,2.4vw,32px) clamp(8px,2.4vw,32px) clamp(8px,1.6vw,20px) 0}
.dash-vlak .zelf-scherm{left:7%;top:9%;width:128%}
.dash-vlak{background:radial-gradient(circle at 4% 4%,rgba(255,255,255,.55) 0 18%,transparent 18.2%),linear-gradient(240deg,#E6E5EC 0%,#F1F1F4 50%,#E9E8EE 100%)}
@media (max-width:900px){.dash-kaart{grid-template-columns:minmax(0,1fr)}.dash-kaart .zelf-tekst{padding:8px 8px 12px}.dash-vlak .zelf-scherm{left:6%;width:170%}}
/* het dashboardbeeld is zelf lichtblauw: het vlak erachter is daarom het rustige grijs van de producttegels, zodat het venster loskomt */
.dash-vlak{background:radial-gradient(circle at 4% 4%,rgba(255,255,255,.7) 0 18%,transparent 18.2%),linear-gradient(180deg,#F1F3F6,#E3E7EC)}
.dash-vlak .zelf-scherm{box-shadow:0 0 0 1px rgba(15,18,24,.08),var(--schaduw)}
.dash-vlak .zelf-balk{background:#fff}
.dash-vlak .zelf-balk b{background:#EEF2F8}

/* hero: laten zien dat je ook zelf kunt ontwerpen. Een zwevend kaartje bij de producten (zelfde vorm als het label op de branchepagina's) en de tweede knop naar de configurator. */
.toonbank{position:relative}
.hero-eigen{position:absolute;z-index:2;left:0;top:13%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:var(--r);background:#fff;box-shadow:var(--schaduw);text-decoration:none;transition:transform .25s var(--soepel)}
.hero-eigen:hover{transform:translateY(-3px)}
.hero-eigen .zelf-ic{width:44px;height:44px}
.hero-eigen small{display:block;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-diep)}
.hero-eigen strong{display:block;font-size:1rem;font-weight:800;letter-spacing:-.015em;color:var(--petrol);white-space:nowrap}
.hero .knop-lijn .knop-ic{width:18px;height:18px}
@media (max-width:900px){.hero-eigen{top:auto;bottom:4%;left:auto;right:0;padding:8px 12px 8px 8px}.hero-eigen .zelf-ic{width:36px;height:36px}.hero-eigen strong{font-size:.9375rem}}
@media (prefers-reduced-motion:reduce){.hero-eigen{transition:none}.hero-eigen:hover{transform:none}}
.hero-eigen{top:1%;left:9%}
@media (max-width:900px){.hero-eigen{top:auto;bottom:-7%;left:auto;right:3%}}
.hero-eigen{top:-7%;left:11%}
@media (max-width:900px){.hero-eigen{display:none}}

/* dashboardbeeld: het venster is voor deze opname wit gehouden, dus het vlak erachter kan weer hetzelfde blauw zijn als bij "Zelf ontwerpen" */
.dash-vlak{background:radial-gradient(circle at 4% 4%,rgba(255,255,255,.55) 0 18%,transparent 18.2%),linear-gradient(240deg,#E6E5EC 0%,#F1F1F4 50%,#E9E8EE 100%)}
.dash-vlak .zelf-scherm{box-shadow:var(--schaduw)}
.dash-vlak .zelf-balk{background:#EEF2F8}
.dash-vlak .zelf-balk b{background:#fff}

/* dashboard: mijn ontwerpen (uit de configurator) */
.db-ontwerpen{margin-bottom:16px}
.ow-lijst{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ow-lijst li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--lijn)}
.ow-lijst li:first-child{border-top:0}
.ow-beeld{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-klein);background:var(--db-spoor,#EDF1F7)}
.ow-beeld img{max-width:80%;max-height:80%;border-radius:4px;box-shadow:var(--schaduw-klein)}
.ow-tekst{display:grid;gap:2px;min-width:0}
.ow-tekst strong{font-size:1rem;color:#0F1218}
.ow-tekst small{font-size:.8125rem;color:var(--zacht)}
.ow-knoppen{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.dashboardpagina .ow-knoppen .knop{min-height:40px;border-radius:var(--r-klein);font-size:.875rem;padding:0 16px}
.dashboardpagina .ow-knoppen .knop .kp{display:none}
@media (max-width:640px){.ow-lijst li{grid-template-columns:56px minmax(0,1fr)}.ow-beeld{width:56px;height:56px}.ow-knoppen{grid-column:1/-1;justify-content:stretch}.ow-knoppen .knop{flex:1}}

/* beheer: nieuwsbrief */
.nb-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.nb-zoek input{min-height:40px;min-width:240px;padding:0 12px;border:1px solid #D5DDEA;border-radius:var(--r-klein);background:#F9FAFC;font:inherit;font-size:.875rem;color:#0F1218}
.nb-tabel th a{color:#0F1218;font-weight:700;text-decoration:none}
.nb-tabel th a:hover{text-decoration:underline}
.nb-tabel td small{color:var(--zacht)}
.nb-tabel th:first-child{padding-left:20px}
.nb-tabel td:last-child,.nb-tabel thead th:last-child{padding-right:20px}

/* formaatkeuze boven de ontwerpen (homepagina): een smalle keuzebalk, zodat hij niet op de productkaartjes lijkt.
   Gekozen = blauwe rand, geen vol blauw vlak: vol blauw is op de site voor knoppen. */
.kiezer-compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kiezer-compact .kies,.kiezer-compact .kies[aria-selected="true"]{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px 10px 10px;text-align:left;border-radius:var(--r-veld);background:var(--wit);color:var(--petrol);box-shadow:var(--schaduw-klein);transition:box-shadow .2s var(--soepel),transform .2s var(--soepel)}
.kiezer-compact .kies:hover{transform:translateY(-2px)}
.kiezer-compact .kies[aria-selected="true"]{box-shadow:0 0 0 2px var(--koraal),var(--schaduw-klein)}
.kiezer-compact .kies[aria-selected="true"]::after{display:none}
.kiezer-compact .kies-beeld{height:64px;padding:6px;border-radius:var(--r-klein);place-items:center}
.kiezer-compact .kies-beeld img{object-position:50% 50%}
.kiezer-compact .kies:hover .kies-beeld img{transform:none}
.kiezer-compact .kies-tekst{display:grid;gap:2px;min-width:0}
.kiezer-compact .kies-naam,.kiezer-compact .kies[aria-selected="true"] .kies-naam{padding:0;font-size:1rem;font-weight:800;color:var(--petrol)}
.kiezer-compact .kies[aria-selected="true"] .kies-naam{color:var(--koraal-diep)}
.kiezer-compact .kies-sub{font-size:.8125rem;color:var(--zacht)}
@media (max-width:900px){.kiezer-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.kiezer-compact{gap:8px}.kiezer-compact .kies,.kiezer-compact .kies[aria-selected="true"]{grid-template-columns:40px minmax(0,1fr);gap:8px;padding:8px 8px 8px 6px}.kiezer-compact .kies-beeld{height:40px;padding:3px}.kiezer-compact .kies-naam,.kiezer-compact .kies[aria-selected="true"] .kies-naam{font-size:.875rem}.kiezer-compact .kies-sub{font-size:.75rem}}

/* Eigen ontwerp (homepagina, formaatkeuze): één podium met het resultaat groot, en zwevende labels voor wat je zelf bepaalt */
.eigen-podium{position:relative;display:grid;place-items:center;min-height:clamp(380px,38vw,500px);padding:28px;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(circle at 50% 62%,rgba(255,255,255,.95) 0 28%,rgba(255,255,255,0) 58%),linear-gradient(160deg,#E8E7EE,#F4F4F6 70%)}
.eigen-podium::before{content:"";position:absolute;right:-12%;top:-18%;width:52%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55)}
.ep-kaart{position:relative;width:min(64%,330px);height:auto;filter:drop-shadow(0 26px 30px rgba(15,18,24,.18));transition:transform .5s var(--soepel)}
.eigen-podium:hover .ep-kaart{transform:translateY(-6px) rotate(-1deg)}
.ep-chip{position:absolute;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw)}
.ep-chip .zelf-ic{width:36px;height:36px}
.ep-chip small{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-diep)}
.ep-chip strong{display:block;font-size:.875rem;font-weight:800;color:var(--petrol);white-space:nowrap}
.ep-logo{left:4%;top:36%}
.ep-kleur{right:4%;top:7%}
.ep-tekst{left:8%;bottom:11%}
.ep-stalen{display:flex;gap:6px;margin-top:4px}
.ep-stalen i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(15,18,24,.15)}
.ep-stalen i.aan{box-shadow:0 0 0 2px var(--wit),0 0 0 4px var(--koraal)}
@media (max-width:640px){.eigen-podium{min-height:360px;padding:56px 20px 64px}.ep-kaart{width:58%}.ep-chip{padding:6px 12px 6px 6px;gap:8px}.ep-chip .zelf-ic{width:28px;height:28px}.ep-chip strong{font-size:.75rem}.ep-logo{left:3%;top:auto;bottom:4%}.ep-kleur{right:3%;top:4%}.ep-tekst{display:none}}

/* ================================================================ TYPESCHAAL 14-10
   Lopende tekst in vier maten: 13 (labels, details), 15 (kaartjes, lijsten), 17 (lopende tekst), 18 (inleiding en kleine koppen).
   Grote koppen in kaarten in één maat. Knoppen en formuliervelden vallen hierbuiten. */
.ontwerp-tekst h3 small,.rstap-label,.factoren thead th,.hero-eigen small,.rb-veldnaam,.rb-invoer,.vt-tag,.paneel-voet .prijs small,.quote figcaption{font-size:.8125rem}
.ontwerp-tekst p,.cat-prijs,.kaart-knop,.paneel-voet .prijs span,.trap li span,.factoren td,.google-citaat footer,.vt-regel{font-size:.9375rem}
.vragen details p,.quote blockquote p,.invloed{font-size:1.0625rem}
.bandkop .lood,.branche h3,.levering h3,.ai-feiten h3{font-size:1.125rem}
.alle-tekst h3,.platformen-tekst h3,.quote-groot blockquote p{font-size:clamp(1.5rem,2.4vw,2rem)}
.ontwerp-tekst .cat-prijs,.ontwerp-acties .kaart-knop,.factoren tbody td,.ook-voor > span{font-size:.9375rem}
.ai-feiten li small{font-size:.8125rem}
#ontwerpen .cat-prijs,.cat-rooster .cat-prijs,.kaart-knop.kaart-knop-lijn,.cat-rooster .kaart-knop,.factoren td:last-child{font-size:.9375rem}
#ontwerpen .cat-pasaan,.cat-pasaan{font-size:.9375rem}
/* smalle telefoons: twee kaartjes naast elkaar, dan passen de knopteksten alleen in de kleine maat */
@media (max-width:420px){.cat-rooster .kaart-knop,.cat-rooster .cat-koop,.cat-rooster .cat-pasaan,#ontwerpen .kaart-knop,#ontwerpen .cat-pasaan{font-size:.8125rem}.cat-rooster .cat-koop{gap:4px;padding-left:4px;padding-right:4px}}

/* Wat het je oplevert (homepagina): een voorbeeld van het blok Prestaties uit een Google-bedrijfsprofiel */
.pr-vlak{display:grid;place-items:center;padding:clamp(24px,3.4vw,48px) clamp(16px,3vw,44px) clamp(48px,4.4vw,60px)}
.pr-kaart{position:relative;z-index:1;width:min(100%,430px);padding:20px 20px 16px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw)}
.pr-kop{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--lijn)}
.pr-g{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#F1F3F4}
.pr-g svg{width:18px;height:18px}
.pr-kop b{display:block;font-size:.9375rem;font-weight:800;color:var(--petrol)}
.pr-kop small{display:block;font-size:.8125rem;color:var(--zacht)}
.pr-groot{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:16px 0 4px;font-size:.9375rem;color:var(--zacht)}
.pr-groot b{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--petrol);font-variant-numeric:tabular-nums}
.pr-vlak em{font-style:normal;font-weight:800;font-size:.8125rem;color:#137333;background:#E6F4EA;border-radius:999px;padding:2px 8px}
.pr-lijn{display:block;width:100%;height:96px;margin-top:6px}
.pr-moment{position:relative;display:inline-block;margin:2px 0 0 33.33%;translate:-50% 0;font-size:.8125rem;font-weight:700;color:#8A6417}
.pr-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:12px 0 0;list-style:none;border-top:1px solid var(--lijn)}
.pr-cijfers li{display:grid;gap:2px;justify-items:start}
.pr-cijfers span{font-size:.8125rem;color:var(--zacht)}
.pr-cijfers b{font-size:1.125rem;font-weight:800;color:var(--petrol);font-variant-numeric:tabular-nums}
.pr-product{position:absolute;z-index:2;right:clamp(8px,2vw,28px);bottom:clamp(30px,3vw,44px);width:clamp(84px,9vw,130px);height:auto;rotate:6deg;filter:drop-shadow(0 18px 22px rgba(15,18,24,.22))}
@media (max-width:900px){.pr-product{width:84px;right:10px;bottom:34px}}
@media (max-width:640px){.pr-product{display:none}}

/* ================================================================ GIDS (meer-google-reviews-krijgen/): een redactioneel artikel, geen sjabloonsecties */
.gk .gk-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;padding-bottom:clamp(40px,6vw,80px)}
.gk h1{margin:10px 0 16px;font-size:clamp(2.4rem,5vw,4rem);line-height:1.02;letter-spacing:-.035em;color:var(--petrol)}
.gk-lood{margin:0;max-width:34em;font-size:1.125rem;line-height:1.6;color:var(--tekst)}
.gk-door{display:flex;align-items:center;gap:12px;margin:24px 0 0;font-size:.8125rem;color:var(--zacht)}
.gk-door strong{display:block;font-size:.9375rem;color:var(--petrol)}
.gk-ini{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--petrol);color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:.04em}
.gk-foto{margin:0;border-radius:var(--R);overflow:hidden;box-shadow:var(--schaduw);aspect-ratio:5/4}
.gk-foto img{display:block;width:100%;height:100%;object-fit:cover}
.gl{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,80px);padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(56px,8vw,112px)}
.gl-inhoud{position:sticky;top:110px;align-self:start}
.gl-inhoud p{margin:0 0 12px;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
.gl-inhoud ol{display:grid;gap:4px;margin:0;padding:0;list-style:none;counter-reset:gi;border-left:2px solid var(--lijn)}
.gl-inhoud li{counter-increment:gi}
.gl-inhoud a{display:block;margin-left:-2px;padding:6px 0 6px 16px;border-left:2px solid transparent;font-size:.9375rem;line-height:1.4;color:var(--tekst);text-decoration:none}
.gl-inhoud a:hover,.gl-inhoud a.aan{border-left-color:var(--koraal);color:var(--koraal-diep)}
.gl-tekst{max-width:690px}
.gl-tekst > h2{margin:72px 0 16px;scroll-margin-top:110px;font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.15;letter-spacing:-.025em;color:var(--petrol)}
.gl-tekst > h2:first-child{margin-top:0}
.gl-tekst p,.gl-lijst li{font-size:1.0625rem;line-height:1.75;color:var(--tekst)}
.gl-tekst p{margin:0 0 16px}
.gl-tekst a:not(.knop){color:var(--koraal-diep);font-weight:700}
.gl-tekst code{padding:2px 6px;border-radius:var(--r-klein);background:var(--perzik);font-size:.9375rem;color:var(--petrol)}
.gl-citaat{margin:28px 0;padding:6px 0 6px 24px;border-left:3px solid var(--goud)}
.gl-citaat p{margin:0 0 6px;font-family:var(--druk);font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.4;color:var(--petrol)}
.gl-citaat footer{font-size:.8125rem}
.gl-breed{margin:32px -60px 40px 0}
.gl-breed img{display:block;width:100%;height:auto;border-radius:var(--r)}
.gl-foto img{box-shadow:var(--schaduw)}
.gl-breed figcaption{margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--zacht)}
.gl-stap{margin:44px 0 0;scroll-margin-top:110px}
.gl-stap h3{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;font-size:1.25rem;line-height:1.3;letter-spacing:-.015em;color:var(--petrol)}
.gl-stap h3 span{flex:none;font-family:var(--druk);font-size:2rem;line-height:1;color:var(--goud-druk)}
.gl-zin{padding:16px 20px;border-radius:var(--r-veld);background:var(--perzik);font-family:var(--druk);font-size:1.125rem!important;color:var(--petrol)!important}
.gl-lijst{display:grid;gap:8px;margin:0 0 16px;padding-left:24px}
ol.gl-lijst{list-style:decimal}ol.gl-lijst li::marker{font-weight:800;color:var(--koraal-diep)}
.gl-punt{list-style:disc}.gl-punt li::marker{color:var(--goud-druk)}
.gl-vrij img{border-radius:0;filter:drop-shadow(0 26px 30px rgba(15,18,24,.16))}
.gl-bron{font-size:.8125rem!important;line-height:1.5!important;color:var(--zacht)!important}
.gl-product{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;margin:8px 0 0;padding:20px 24px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein)}
.gl-product img{width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(15,18,24,.18))}
.gl-product p{font-size:.9375rem;line-height:1.6;margin:0 0 10px}
.gl-product .gl-product-kop{margin:0 0 4px;font-size:1.125rem;font-weight:800;color:var(--petrol)}
.gl-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.gl-link .kp,.gl-slot .kp{width:22px;height:22px}
.gl-klant{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px 32px;align-items:center;margin:64px -60px 8px 0;padding:clamp(24px,3.4vw,44px);border-radius:var(--R);background:linear-gradient(160deg,#E8E7EE,#F4F4F6 70%)}
.gl-klant img{grid-row:span 2;width:100%;height:auto;rotate:-4deg;filter:drop-shadow(0 20px 24px rgba(15,18,24,.22))}
.gl-klant blockquote{margin:0}
.gl-klant blockquote p:not(.gl-klant-sterren){margin:0;font-family:var(--druk);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.35;color:var(--petrol)}
.gl-klant-sterren{display:flex;gap:4px;margin:0 0 12px!important;color:var(--goud)}.gl-klant-sterren svg{width:20px;height:20px;fill:currentColor}
.gl-klant figcaption{font-size:.8125rem;color:var(--zacht)}.gl-klant figcaption strong{display:block;font-size:.9375rem;color:var(--petrol)}
.gl-kort li{padding-left:4px}
.gl-slot{margin-top:28px;padding-top:28px;border-top:1px solid var(--lijn)}
.gl-slot .knoppen{margin-top:16px}
@media (max-width:1000px){.gl{grid-template-columns:minmax(0,1fr)}.gl-inhoud{position:static;padding:16px 20px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein)}.gl-tekst{max-width:none}.gl-breed,.gl-klant{margin-right:0}}
@media (max-width:800px){.gk .gk-in{grid-template-columns:minmax(0,1fr)}.gk-foto{aspect-ratio:16/10}}
@media (max-width:560px){.gl-product{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px}.gl-klant{grid-template-columns:minmax(0,1fr)}.gl-klant img{grid-row:auto;width:110px}}

.ai-slot a{color:var(--koraal-diep);font-weight:700}
.gl-foto img{aspect-ratio:16/10;object-fit:cover;object-position:50% 30%}
.gl-tekst .gl-klant-sterren{color:var(--goud)}

/* categorie met eigen logo: voorbeeld en de maat van de logoplek per ontwerp */
.logomaat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start}
.logomaat-beeld{margin:0;position:sticky;top:110px}
.logomaat-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:clamp(16px,2.4vw,28px);border-radius:var(--R);background:radial-gradient(circle at 50% 62%,rgba(255,255,255,.95) 0 30%,rgba(255,255,255,0) 66%),linear-gradient(160deg,#E8E7EE,#F4F4F6 70%)}
.logomaat-paar img{width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(15,18,24,.16))}
.logomaat-beeld figcaption{margin-top:12px;font-size:.8125rem;color:var(--zacht)}
.logomaat-tekst h2{margin:6px 0 12px}
.logomaat-tekst > p:not(.label){margin:0 0 20px;font-size:1.0625rem;line-height:1.7;color:var(--tekst)}
.logomaat-tabel{overflow-x:auto;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein)}
.logomaat-tabel table{width:100%;border-collapse:collapse;font-size:.9375rem}
.logomaat-tabel th,.logomaat-tabel td{padding:12px 16px;text-align:left;border-top:1px solid var(--lijn);white-space:nowrap}
.logomaat-tabel thead th{border-top:0;font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.logomaat-tabel tbody th a{color:var(--petrol);font-weight:800;text-decoration:none}
.logomaat-tabel tbody th a:hover{color:var(--koraal-diep);text-decoration:underline}
.logomaat-tabel td{color:var(--tekst)}
@media (max-width:900px){.logomaat{grid-template-columns:minmax(0,1fr)}.logomaat-beeld{position:static;max-width:520px}}

/* homepagina, sectie Waarom: duidelijke doorstap naar de gids */
.gids-link{--pijl:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:16px 16px 16px 20px;border-radius:var(--r-veld);background:var(--wit);box-shadow:var(--schaduw-klein);text-decoration:none;transition:box-shadow .2s var(--soepel),transform .2s var(--soepel)}
.gids-link:hover{transform:translateY(-2px);box-shadow:var(--schaduw)}
.gids-link small{display:block;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-diep)}
.gids-link strong{display:block;margin-top:2px;font-size:1.0625rem;font-weight:800;line-height:1.35;color:var(--petrol)}
.gids-link .kp{width:32px;height:32px;flex:none;color:var(--koraal);transition:transform .25s var(--soepel)}
.gids-link:hover .kp{transform:translateX(4px)}


/* ── PRODUCTPAGINA: HET ONTWERP 14-10 ── eigen tekst per ontwerp naast een kaart met feiten */
.ow{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.ow-tekst h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.6em}
.ow-tekst p:not(.label){margin:0 0 1em;max-width:36em}
.ow-feiten{display:grid;gap:0;margin:0;padding:clamp(8px,1.2vw,12px) clamp(22px,2.6vw,32px)}
.ow-feiten>div{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--lijn)}
.ow-feiten>div:first-child{border-top:0}
.ow-feiten dt{font-size:.9375rem;font-weight:700;color:var(--petrol)}
.ow-feiten dd{margin:0;font-size:.9375rem}
.ow-feiten a{color:inherit}
@media (min-width:900px){.ow{grid-template-columns:minmax(0,1.150fr) minmax(0,1fr)}.ow-feiten>div{grid-template-columns:9.5em 1fr;gap:16px;align-items:baseline}}

/* ── DASHBOARD: MEEKIJKEN VANUIT HET BEHEER 14-10 ── balk bovenaan, blijft staan bij scrollen */
.db-meekijk{position:sticky;top:0;z-index:60;background:#FFF6DC;border-bottom:1px solid #F1D48A;color:var(--petrol)}
.db-meekijk-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;max-width:1240px;margin:0 auto;padding:10px 16px;font-size:.9375rem;line-height:1.45}
.db-meekijk-stop{flex:none;min-height:var(--knop-h-klein);padding:0 16px;border:1px solid var(--petrol);border-radius:999px;background:var(--wit);font:inherit;font-weight:600;color:var(--petrol);cursor:pointer}
.db-meekijk-stop:hover{background:var(--petrol);color:var(--wit)}
.db-meekijk-stop:focus-visible{outline:2px solid var(--koraal);outline-offset:2px}
.adm-klantlinks{display:flex;align-items:center;gap:12px}.adm-klantlinks .adm-kopie{margin-left:0}
.adm-reseller{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font-size:.875rem;line-height:1.45;color:var(--tekst)}
.adm-bezorg{margin-top:12px;padding-top:12px;border-top:1px solid var(--db-rand)}.adm-bezorg small{display:block;margin-bottom:2px;font-size:.75rem;font-weight:700;color:#5B6B85}
.af-anders{margin:16px 0 0}.af-anders .veld-hulp{display:block;font-weight:400}
.af-bezorg{margin-top:16px;padding-top:16px;border-top:1px solid var(--lijn)}


/* ── RESELLERPAGINA 14-10 (tweede versie) ── productbeeld in de hero, cijfers tussen haarlijnen, fotostrook, de pakbon als object, prijstabel, vragen naast het formulier.
   Elke sectie opent met dezelfde haarlijn: naam links, 01 / 04 rechts. Geen pictogramrasters, geen genummerde kaartjes. */
.rs-hero{overflow-x:clip}
.rs-hero .rs-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(8px,2vw,24px)}
.rs-hero h1{font-size:clamp(2.6rem,5.4vw,4.75rem);line-height:1.03;letter-spacing:-.04em;max-width:11ch}
.rs-lood{margin:0;max-width:33em;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;color:var(--tekst)}
.rs-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}.rs-knoppen .knop,.rs-verstuur{min-height:var(--knop-h-groot);padding-left:28px;padding-right:28px}
.rs-hero-beeld{position:relative}
.rs-hero-beeld>img{display:block;width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(15,18,24,.18))}
.rs-chip{position:absolute;left:0;bottom:6%;display:grid;gap:2px;padding:16px 20px;font-variant-numeric:tabular-nums}
.rs-chip-naam{font-size:.8125rem;font-weight:700;color:var(--zacht)}
.rs-chip-prijs{font-size:2rem;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
.rs-chip-sub{font-size:.8125rem;color:var(--zacht)}.rs-chip-sub s{color:var(--zacht)}
.rs-cijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:clamp(32px,5vw,64px) 0 0;padding:0 0 clamp(36px,5vw,64px);border-top:1px solid var(--perzik-rand)}
.rs-cijfers>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:24px 20px 0 0}
.rs-cijfers dd{margin:0;font-size:clamp(2.25rem,4vw,3.25rem);line-height:1;font-weight:800;letter-spacing:-.035em;color:var(--petrol);font-variant-numeric:tabular-nums}
.rs-cijfers dt{font-size:.9375rem;line-height:1.4;color:var(--tekst)}
.rs-dev{display:flex;justify-content:space-between;gap:16px;margin:0 0 clamp(28px,4vw,48px);padding-top:12px;border-top:1px solid var(--petrol);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);font-variant-numeric:tabular-nums}
.rs-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 64px;align-items:end;margin:0 0 clamp(28px,4vw,48px)}
.rs-sectie h2{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.05;letter-spacing:-.035em}
.rs-intro p{margin:0;max-width:34em;font-size:1.0625rem;line-height:1.65;color:var(--tekst)}
.rs-strook{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:min(76vw,320px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-20px;padding-right:20px}
.rs-strook::-webkit-scrollbar{display:none}
.rs-strook li{scroll-snap-align:start}
.rs-strook figure{margin:0}
.rs-strook img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.rs-strook figcaption{display:grid;gap:4px;padding:16px 4px 0;font-size:.9375rem;line-height:1.55;color:var(--tekst)}
.rs-strook strong{font-size:1.0625rem;color:var(--petrol)}
.rs-nr{font-size:.8125rem;font-weight:700;color:var(--koraal);font-variant-numeric:tabular-nums}
.rs-neutraal{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.rs-neutraal-tekst p{margin:20px 0 0;max-width:32em;font-size:1.0625rem;line-height:1.65;color:var(--tekst)}
.rs-vink{list-style:none;margin:24px 0 0;padding:0;display:grid}
.rs-vink li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--perzik-rand);font-weight:600;color:var(--petrol)}
.rs-vink li:last-child{border-bottom:1px solid var(--perzik-rand)}
.rs-vink li::before{content:"";position:absolute;left:2px;top:17px;width:18px;height:18px;border-radius:50%;background:var(--koraal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.rs-pakbon-scene{position:relative;width:min(100%,460px);justify-self:end;padding:0 0 clamp(40px,8vw,90px)}
.rs-pakbon-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.rs-pakbon{position:absolute;left:clamp(-120px,-9vw,-12px);bottom:0;width:min(78%,330px);padding:20px 20px 16px;background:#fff;border-radius:var(--r-klein);box-shadow:var(--schaduw);transform:rotate(-3deg);font-size:.75rem;line-height:1.45;color:#222}
.rs-pb-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:10px;border-bottom:1.5px solid #111}
.rs-pb-kop strong{font-size:1.125rem;letter-spacing:-.02em;color:#111}.rs-pb-kop span{text-align:right;color:#666;font-size:.6875rem}
.rs-pb-aan{margin:12px 0}.rs-pb-aan small{display:block;font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5c5c5c}
.rs-pakbon table{width:100%;border-collapse:collapse}.rs-pakbon td{padding:6px 0;border-top:1px solid #e5e5e5}.rs-pakbon td+td{text-align:right;font-weight:700}
.rs-pb-voet{margin:10px 0 0;color:#666}
.rs-tabel-doos{padding:clamp(8px,1.5vw,16px) clamp(20px,3vw,40px);overflow-x:auto}
.rs-tabel{width:100%;min-width:620px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rs-tabel th,.rs-tabel td{padding:20px 0 20px 24px;border-top:1px solid var(--lijn);text-align:right;white-space:nowrap;font-size:1rem}
.rs-tabel th:first-child{padding-left:0;text-align:left}
.rs-tabel thead th{border-top:0;padding-top:16px;padding-bottom:12px;font-size:.8125rem;font-weight:700;color:var(--zacht)}
.rs-tabel tbody th{font-weight:700;color:var(--petrol)}
.rs-tabel strong{font-size:1.125rem;color:var(--petrol)}
.rs-oud{color:var(--zacht)}.rs-marge{font-weight:700;color:#1E7A45}
.rs-noot{margin:12px 0 0;font-size:.8125rem;color:var(--zacht)}
.rs-aanmelden{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.rs-zij{margin:16px 0 28px;max-width:30em;font-size:1.0625rem;line-height:1.6;color:var(--tekst)}
.rs-vragen{display:grid;gap:10px}
.rs-form,.rs-bedankt{padding:clamp(22px,3vw,36px)}
.rs-form .af-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.rs-form .veld{margin:0}.rs-form .veld.breed{grid-column:1/-1}.rs-form .veld.smal{grid-column:span 1}
.rs-form input,.rs-form select,.rs-form textarea{width:100%}
.rs-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rs-fouten{margin:16px 0 0;font-weight:700;color:var(--fout)}
.rs-verstuur{margin-top:20px;width:100%;justify-content:center}
.rs-klein{margin:12px 0 0;font-size:.8125rem;line-height:1.5;color:var(--zacht)}
.rs-bedankt h3{margin:0 0 10px;font-size:1.375rem;color:var(--petrol)}.rs-bedankt p{margin:0 0 20px}
@media (min-width:700px){.rs-cijfers{grid-template-columns:repeat(4,minmax(0,1fr))}.rs-cijfers>div+div{padding-left:24px;border-left:1px solid var(--perzik-rand)}}
@media (max-width:699px){.rs-cijfers>div:nth-child(even){padding-left:20px;border-left:1px solid var(--perzik-rand)}.rs-cijfers>div:nth-child(n+3){margin-top:12px;border-top:1px solid var(--perzik-rand)}}
@media (min-width:900px){
  .rs-hero .rs-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .rs-hero-beeld{margin-right:-24px}
  .rs-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .rs-strook{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin-right:0}
  .rs-neutraal{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .rs-aanmelden{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rs-form-kolom{position:sticky;top:96px}
}
@media (max-width:560px){.rs-form .af-velden{grid-template-columns:minmax(0,1fr)}.rs-form .veld.smal{grid-column:1/-1}.rs-chip{position:relative;bottom:auto;margin-top:-28px;justify-self:start}}
.rs-sectie{overflow-x:clip}
@media (max-width:640px){
  .rs-pakbon{left:-8px;width:min(86%,320px)}
  .rs-tabel-doos{padding:4px 20px;overflow:visible}
  .rs-tabel{min-width:0}.rs-tabel thead{display:none}
  .rs-tabel tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:16px 0;border-top:1px solid var(--lijn)}
  .rs-tabel tbody tr:first-child{border-top:0}
  .rs-tabel th,.rs-tabel td{padding:0;border:0;text-align:left;white-space:normal}
  .rs-tabel tbody th{grid-column:1/-1;font-size:1.0625rem}
  .rs-tabel td::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:.75rem;font-weight:700;color:var(--zacht)}
}

/* ── CONTACTPAGINA 14-10 ── sfeerfoto met contactkaart erover, formulier met snelle links ernaast. Geen eigen foto's van het team. */
.ct-hero{overflow-x:clip}
.ct-hero .ct-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(8px,2vw,24px) 0 clamp(48px,7vw,96px)}
.ct-hero h1{font-size:clamp(2.6rem,5.4vw,4.75rem);line-height:1.03;letter-spacing:-.04em;max-width:10ch}
.ct-lood{margin:0;max-width:32em;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;color:var(--tekst)}
.ct-knoppen{margin:32px 0 0}.ct-knoppen .knop,.ct-verstuur{min-height:var(--knop-h-groot);padding-left:28px;padding-right:28px}
.ct-scene{position:relative;width:min(100%,440px);justify-self:end;margin-top:clamp(0px,3vw,40px);padding-bottom:clamp(56px,8vw,96px)}
.ct-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.ct-kaart{position:absolute;left:clamp(-140px,-10vw,-12px);bottom:0;width:min(92%,360px);padding:24px 24px}
.ct-kaart-kop{margin:0 0 4px;font-size:.8125rem;font-weight:700;color:var(--zacht)}
.ct-mail{display:block;font-size:clamp(1.25rem,2vw,1.5rem);font-weight:800;letter-spacing:-.02em;color:var(--petrol);text-decoration:none;overflow-wrap:anywhere}
.ct-mail:hover{color:var(--koraal)}
.ct-tijden{display:grid;margin:16px 0 0}
.ct-tijden>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--lijn);font-size:.9375rem}
.ct-tijden dt{color:var(--zacht)}.ct-tijden dd{margin:0;font-weight:700;color:var(--petrol)}
.ct-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.ct-sectie h2{font-size:clamp(1.9rem,3.2vw,2.75rem);line-height:1.05;letter-spacing:-.035em;margin-bottom:24px}
.ct-form,.ct-bedankt{padding:clamp(22px,3vw,36px)}
.ct-form .af-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.ct-form .veld{margin:0}.ct-form .veld.breed{grid-column:1/-1}.ct-form .veld.smal{grid-column:span 1}
.ct-form input,.ct-form select,.ct-form textarea{width:100%}
.ct-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-fouten{margin:16px 0 0;font-weight:700;color:var(--fout)}
.ct-verstuur-rij{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.ct-klein{margin:0;max-width:24em;font-size:.8125rem;line-height:1.5;color:var(--zacht)}
.ct-bedankt h3{margin:0 0 10px;font-size:1.375rem;color:var(--petrol)}.ct-bedankt p{margin:0}
.ct-zij-kop{margin:0 0 12px;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol)}
.ct-sectie .ct-zij-kop{font-size:.8125rem;line-height:1.3;letter-spacing:.08em;margin-bottom:12px}
.ct-snel{list-style:none;margin:0 0 40px;padding:0;border-top:1px solid var(--petrol)}
.ct-snel a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;border-bottom:1px solid var(--lijn);text-decoration:none;color:var(--tekst)}
.ct-snel span{display:grid;gap:2px;font-size:.9375rem;line-height:1.45}.ct-snel strong{font-size:1.0625rem;color:var(--petrol)}
.ct-snel .kp{flex:none;width:22px;height:22px;color:var(--koraal);transition:transform .2s var(--soepel)}
.ct-snel a:hover strong{color:var(--koraal)}.ct-snel a:hover .kp{transform:translateX(3px)}
.ct-gegevens{padding-top:12px;border-top:1px solid var(--petrol)}
.ct-gegevens p{margin:0 0 12px;font-size:.9375rem;line-height:1.6;color:var(--tekst)}
@media (min-width:900px){.ct-hero .ct-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.ct-twee{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.ct-zij{padding-top:68px}}
@media (max-width:640px){.ct-kaart{left:-8px}.ct-form .af-velden{grid-template-columns:minmax(0,1fr)}.ct-form .veld.smal{grid-column:1/-1}}

/* ── DASHBOARD: PROFIEL VAN EEN DIGITAAL VISITEKAARTJE 14-10 ── */
.db-profiel-form{display:block}
.db-profiel-uitleg{margin:0 0 16px;font-size:.9375rem;line-height:1.5;color:var(--tekst)}
.db-profiel-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.db-profiel-velden .veld{margin:0}.db-profiel-velden .veld.breed{grid-column:1/-1}
.db-profiel-velden input,.db-profiel-velden textarea{width:100%}
.db-profiel-kleur{border:0;padding:0;min-width:0}.db-profiel-kleur legend{margin-bottom:8px;font-weight:600;font-size:.9375rem;color:var(--petrol)}
.db-profiel-kleur div{display:flex;flex-wrap:wrap;gap:10px}
.db-profiel-kleur label{position:relative;cursor:pointer}.db-profiel-kleur input{position:absolute;opacity:0;inset:0}
.db-profiel-kleur span:not(.sr){display:block;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.db-profiel-kleur input:checked+span{outline:3px solid var(--petrol);outline-offset:3px}
.db-profiel-kleur input:focus-visible+span{outline:3px solid var(--koraal);outline-offset:3px}
.db-profiel-alle{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-weight:600;color:var(--petrol)}
@media (max-width:560px){.db-profiel-velden{grid-template-columns:minmax(0,1fr)}}
.db-profiel-velden{grid-template-columns:repeat(2,minmax(0,1fr))!important}.db-profiel-velden>.veld{grid-column:auto!important}.db-profiel-velden>.veld.breed,.db-profiel-velden>.db-profiel-kleur{grid-column:1/-1!important}
@media (max-width:560px){.db-profiel-velden{grid-template-columns:minmax(0,1fr)!important}}

/* ── DIGITAAL VISITEKAARTJE 14-10 ── hero met twee kaartjes en een telefoon; stappen met de echte schermen; uitvoeringen als kaartjes. Bouwt voort op de rs-klassen van de resellerpagina. */
.vk-scene{position:relative;aspect-ratio:1/.86;width:100%}
.vk-kaart{position:absolute;display:block;height:auto;border-radius:3.8%/5.8%;box-shadow:var(--schaduw)}
.vk-kaart-achter{width:62%;left:24%;top:4%;transform:rotate(8deg)}
.vk-kaart-voor{width:68%;left:0;top:30%;transform:rotate(-6deg)}
.vk-tel{position:absolute;right:0;top:12%;width:32%;margin:0;aspect-ratio:9/18.5;overflow:hidden;border:7px solid #101828;border-radius:var(--r);background:#fff;box-shadow:var(--schaduw)}
.vk-tel img{display:block;width:100%;height:auto}
.vk-chip{left:4%;bottom:0}
.vk-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.vk-stappen figure{margin:0}
.vk-stap-beeld{display:block;aspect-ratio:5/4;overflow:hidden;border-radius:var(--r);background:var(--perzik);box-shadow:var(--schaduw-klein)}
.vk-stap-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.vk-stappen figcaption{display:grid;gap:4px;padding:16px 4px 0;font-size:.9375rem;line-height:1.55;color:var(--tekst)}
.vk-stappen strong{font-size:1.0625rem;color:var(--petrol)}
.vk-ontwerpen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vk-ontwerpen a{display:grid;gap:6px;text-decoration:none;color:var(--tekst);font-size:.875rem;line-height:1.5}
.vk-ontwerp-beeld{display:grid;place-items:center;aspect-ratio:4/3;padding:12%;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein);margin-bottom:10px}
.vk-ontwerp-beeld img{display:block;width:100%;height:auto;border-radius:3.8%/5.8%;box-shadow:var(--schaduw);transition:transform .35s var(--soepel)}
.vk-ontwerpen a:hover .vk-ontwerp-beeld img{transform:rotate(-2deg) scale(1.03)}
.vk-ontwerpen strong{font-size:1.0625rem;color:var(--petrol)}
.vk-verder{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:32px 0 0}.vk-verder span{max-width:30em;font-size:.9375rem;color:var(--tekst)}
.vk-prijzen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.vk-staffel{padding:clamp(8px,1.5vw,12px) clamp(20px,3vw,32px)}
.vk-staffel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.vk-staffel th,.vk-staffel td{padding:16px 0;border-top:1px solid var(--lijn);font-size:1rem;text-align:left}
.vk-staffel tr:first-child th,.vk-staffel tr:first-child td{border-top:0}
.vk-staffel th{font-weight:700;color:var(--petrol)}.vk-staffel td{text-align:right;color:var(--zacht)}.vk-staffel td strong{font-size:1.125rem;color:var(--petrol)}
@media (min-width:900px){.vk-stappen{grid-template-columns:repeat(3,minmax(0,1fr))}.vk-ontwerpen{grid-template-columns:repeat(4,minmax(0,1fr))}.vk-prijzen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.vk-tel{border-width:5px;border-radius:var(--r)}}
.vk-scene .vk-chip{position:absolute;left:4%;bottom:0;margin:0}
@media (max-width:899px){.vk-scene{margin-top:24px;margin-bottom:72px}.vk-scene .vk-chip{bottom:-64px}}
/* visitekaartje: de 3D-renders uit de configurator (licht, dikte en schaduw zitten in het beeld zelf) */
.vk-scene .vk-kaart{border-radius:0;box-shadow:none;transform:none}
.vk-scene .vk-kaart-achter{width:66%;left:20%;top:0}
.vk-scene .vk-kaart-voor{width:86%;left:-6%;top:30%}
.vk-scene .vk-tel{top:16%;z-index:2}
.vk-ontwerp-beeld{padding:4% 2%;background:none;box-shadow:none;aspect-ratio:auto;margin-bottom:4px}
.vk-ontwerp-beeld img{border-radius:0;box-shadow:none}
.vk-ontwerpen a:hover .vk-ontwerp-beeld img{transform:translateY(-4px) rotate(-1deg)}
@media (min-width:900px){.vk-ontwerpen{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px}.vk-ontwerp-beeld{padding:2% 6%}}
/* visitekaartjes: showcase van de sjablonen (3D-renders), elk ontwerp opent in de configurator */
.vk-showcase{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.vk-showcase a{display:grid;gap:10px;text-decoration:none;color:var(--tekst)}
.vk-sc-beeld{display:grid;place-items:center;aspect-ratio:1000/517}
.vk-sc-staand .vk-sc-beeld{aspect-ratio:auto;height:100%}
.vk-sc-beeld img{display:block;width:100%;height:auto;transition:transform .35s var(--soepel)}
.vk-sc-staand .vk-sc-beeld img{width:auto;max-width:100%;max-height:520px}
.vk-showcase a:hover .vk-sc-beeld img{transform:translateY(-4px)}
.vk-sc-tekst{display:grid;gap:2px;padding:0 6px}.vk-sc-tekst strong{font-size:1.0625rem;color:var(--petrol)}.vk-sc-tekst small{font-size:.875rem;color:var(--zacht)}
.vk-sc-knop{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.875rem;font-weight:700;color:var(--koraal)}.vk-sc-knop .kp{width:18px;height:18px}
.vk-showcase a:hover .vk-sc-knop{text-decoration:underline}
.vk-sc-staand{grid-row:span 2}
@media (min-width:900px){.vk-showcase{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.vk-showcase{grid-template-columns:minmax(0,1fr)}.vk-sc-staand{grid-row:auto}}
.vk-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.vk-filter button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border:1px solid var(--perzik-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.9375rem;font-weight:600;color:var(--petrol);cursor:pointer}
.vk-filter button small{font-size:.75rem;font-weight:700;color:var(--zacht)}
.vk-filter button[aria-pressed=true]{background:var(--petrol);border-color:var(--petrol);color:#fff}.vk-filter button[aria-pressed=true] small{color:#B9C7E0}
.vk-filter button:focus-visible{outline:2px solid var(--koraal);outline-offset:2px}
.vk-showcase li[hidden]{display:none}
.vk-sc-beeld{position:relative}
.vk-sc-tekst strong{display:flex;align-items:center;gap:10px}
/* visitekaartje: uitgelichte ontwerpen en de categorieën (landingspagina), categoriepagina's (digitaal-visitekaartje-met-qr-code/<vak>/) */
.vk-uitgelicht{margin-bottom:56px}
.vk-cats-kop{margin:0 0 20px;font-size:1.25rem;color:var(--petrol)}
.vk-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vk-cats a{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:12px 12px 20px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein);text-decoration:none;color:var(--tekst);transition:transform .3s var(--soepel),box-shadow .3s var(--soepel)}
.vk-cats a:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.vk-cats a:focus-visible{outline:2px solid var(--koraal);outline-offset:3px}
.vk-cat-beeld{display:block;aspect-ratio:1200/760;border-radius:var(--r-veld);background:var(--grond)}
.vk-cat-beeld img{display:block;width:100%;height:100%;object-fit:contain}
.vk-cat-tekst{display:grid;gap:4px;padding:16px 8px 0}.vk-cat-tekst strong{font-size:1.125rem;color:var(--petrol)}.vk-cat-tekst small{font-size:.875rem;color:var(--zacht)}
.vk-cat-n{display:inline-flex;align-items:center;gap:6px;padding:12px 8px 0;font-size:.875rem;font-weight:700;color:var(--koraal)}.vk-cat-n .kp{width:18px;height:18px}
@media (max-width:900px){.vk-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vk-cats{grid-template-columns:minmax(0,1fr)}}
.vkcat-beeld{display:grid;place-items:center}.vkcat-beeld img{display:block;width:100%;height:auto}
.vkcat-hero h1{font-size:clamp(2.25rem,4.4vw,3.5rem);text-wrap:balance}
.vk-showcase li.vk-sc-pasje[hidden],.vk-showcase li.vk-sc-staand[hidden]{display:none}
.vkcat-lijst{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vkcat-lijst a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--perzik-rand);border-radius:999px;background:var(--wit);font-size:.9375rem;font-weight:600;color:var(--petrol);text-decoration:none}
.vkcat-lijst a:hover{border-color:var(--petrol)}.vkcat-lijst small{font-size:.75rem;font-weight:700;color:var(--zacht)}
.vkcat-andere h2{color:var(--petrol)}   /* zelfde koppenmaat als de andere secties (.rs-sectie h2) */
@media (max-width:560px){.vk-sc-staand .vk-sc-beeld img{max-height:380px}.vk-sc-staand .vk-sc-beeld{height:auto}}
/* homepagina: compact blok voor het digitale visitekaartje, onder "Voor wie" (licht vlak, waaier van Signature-kaarten) */
.vk-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:24px;margin:32px 0 0;padding:48px 24px 48px 56px;border-radius:var(--R);background:radial-gradient(70% 90% at 85% 40%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(135deg,var(--perzik) 0%,var(--perzik-diep) 100%);box-shadow:inset 0 0 0 1px rgba(181,207,247,.55);overflow:hidden}
.vk-band h2{margin:8px 0 12px;font-size:clamp(1.75rem,2.6vw,2.375rem);line-height:1.1;color:var(--petrol)}
.vk-band-tekst > p:not(.label):not(.vk-band-voet){max-width:32em;font-size:1rem;line-height:1.6;color:var(--tekst)}
.vk-band-vakken{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vk-band-vakken a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:var(--wit);box-shadow:inset 0 0 0 1px var(--perzik-rand);font-size:.875rem;font-weight:600;color:var(--petrol);text-decoration:none;transition:box-shadow .2s}
.vk-band-vakken a:hover{box-shadow:inset 0 0 0 1.5px var(--petrol)}
.vk-band-voet{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:28px 0 0}.vk-band-voet span{font-size:.875rem;color:var(--zacht)}
.vk-band-beeld{display:block;margin:-24px -8px -40px 0}.vk-band-beeld img{display:block;width:100%;height:auto;transition:transform .5s var(--soepel)}
.vk-band:hover .vk-band-beeld img{transform:translateY(-6px)}
@media (max-width:900px){.vk-band{grid-template-columns:minmax(0,1fr);padding:32px 20px 8px}.vk-band-beeld{margin:0 -8px -12px}}
/* prijzen: een stapel kaarten in 3D onder de tekst (render/vk-stappen/stapel.html) */
.vk-stapel{display:block;width:min(100%,460px);height:auto;margin:32px 0 0 -8px;filter:drop-shadow(0 26px 30px rgba(15,18,24,.18))}
@media (max-width:899px){.vk-stapel{width:min(80%,360px);margin:24px auto 8px}}
/* ================================================================ dashboard: digitaal visitekaartje (dashboard-vk.js) */
.vk-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 16px}
.vk-wie{display:grid;line-height:1.25}.vk-wie strong{font-size:1.0625rem;color:var(--petrol)}.vk-wie small{font-size:.8125rem;color:var(--zacht)}
.vk-kies select{min-height:44px;padding:0 40px 0 12px;border:1px solid var(--db-rand);border-radius:var(--r-veld);background:var(--wit);font:inherit;font-weight:700;color:var(--petrol)}
.vk-pil-pauze{background:#FEF0C7;color:#93370D}.vk-pil-leeg{background:#FEE4E2;color:#B42318}
.vk-bekijk{margin-left:auto}.vk-bekijk svg,.knop svg{width:18px;height:18px}
.vk-tabs{display:flex;gap:4px;margin:0 0 20px;padding:4px;border-radius:999px;background:var(--db-spoor);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.vk-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;font-size:.9375rem;font-weight:700;color:var(--zacht);text-decoration:none;white-space:nowrap}
.vk-tabs a[aria-current=page]{background:var(--wit);color:var(--petrol);box-shadow:var(--schaduw-klein)}
.vk-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--koraal);color:#fff;font-size:.75rem}
.vk-bewerk{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.vk-form{display:grid;gap:16px;min-width:0}
.vk-sectie h2{font-size:1.125rem;color:var(--petrol)}
.vk-sectie .af-velden{margin-top:16px}
.vk-sectie .veld i{font-style:normal;font-weight:500;color:var(--zacht)}
.vk-voorbeeld{position:sticky;top:96px;display:grid;justify-items:center;gap:10px}
.vk-voorbeeld p{font-size:.8125rem;color:var(--zacht);text-align:center}
.vk-mobiel{width:320px;height:660px;padding:10px;border-radius:var(--R);background:#0E1424;box-shadow:0 0 0 2px #2A3245 inset,var(--schaduw)}
.vk-mobiel iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--R);background:#EEF1F6}
.vk-beeld{display:flex;align-items:center;gap:16px;margin-top:16px;padding:12px;border:1px dashed var(--db-rand);border-radius:var(--r)}
.vk-beeld-vb{display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:50%;background:var(--db-vlak);color:var(--zacht);overflow:hidden}
.vk-beeld-vb svg{width:28px;height:28px}.vk-beeld-vb img{width:100%;height:100%;object-fit:cover}
.vk-beeld-kopfoto .vk-beeld-vb{width:112px;height:64px;border-radius:var(--r-klein)}.vk-beeld-logo .vk-beeld-vb{border-radius:var(--r-klein);background:#fff;box-shadow:inset 0 0 0 1px var(--db-rand)}.vk-beeld-logo .vk-beeld-vb img{object-fit:contain;padding:6px}
.vk-beeld-tekst{display:grid;gap:2px;min-width:0}.vk-beeld-tekst strong{font-size:.9375rem;color:var(--petrol)}.vk-beeld-tekst small{font-size:.8125rem;color:var(--zacht)}
.vk-beeld-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.vk-beelden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.vk-link-knop{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:.875rem;font-weight:700;color:var(--koraal);cursor:pointer}.vk-link-knop svg{width:16px;height:16px}
.vk-weg{color:#B42318}
.vk-ideeen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;font-size:.8125rem;color:var(--zacht)}
.vk-ideeen button{min-height:32px;padding:0 12px;border:1px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.8125rem;font-weight:600;color:var(--petrol);cursor:pointer}
.vk-ideeen button:hover{border-color:var(--koraal);color:var(--koraal)}
.vk-knoppen{display:grid;gap:10px;margin:16px 0 12px;padding:0;list-style:none}
.vk-knop{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) auto;align-items:end;gap:10px;padding:12px;border-radius:var(--r);background:var(--db-vlak)}
.vk-knop .veld{margin:0}.vk-knop-acties{display:flex;gap:4px;padding-bottom:2px}
.vk-knop-acties button{display:grid;place-items:center;width:40px;height:44px;border:1px solid var(--db-rand);border-radius:var(--r-klein);background:var(--wit);color:var(--petrol);cursor:pointer}
.vk-knop-acties button:disabled{opacity:.35;cursor:default}.vk-knop-acties svg{width:18px;height:18px}.vk-knop-acties [data-weg]{color:#B42318}
.vk-kleuren,.vk-keuze{margin:16px 0 0;padding:0;border:0}.vk-kleuren legend,.vk-keuze legend{margin-bottom:8px;font-size:.875rem;font-weight:700;color:var(--petrol)}
.vk-kleuren div{display:flex;flex-wrap:wrap;gap:10px}
.vk-kleuren label{position:relative;cursor:pointer}.vk-kleuren input[type=radio]{position:absolute;opacity:0}
.vk-kleuren label > span:first-of-type{display:block;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.vk-kleuren input:checked + span{box-shadow:0 0 0 3px var(--wit),0 0 0 5px var(--petrol)}
.vk-kleuren input:focus-visible + span{outline:2px solid var(--koraal);outline-offset:4px}
.vk-eigen-kleur input{display:block;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);cursor:pointer;overflow:hidden}
.vk-eigen-kleur input::-webkit-color-swatch-wrapper{padding:0}.vk-eigen-kleur input::-webkit-color-swatch{border:3px solid #fff;border-radius:50%}
.vk-keuze div{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--db-spoor)}
.vk-keuze label{position:relative;cursor:pointer}.vk-keuze input{position:absolute;opacity:0}
.vk-keuze span{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;font-size:.875rem;font-weight:700;color:var(--zacht)}
.vk-keuze input:checked + span{background:var(--wit);color:var(--petrol);box-shadow:var(--schaduw-klein)}
.vk-keuze input:focus-visible + span{outline:2px solid var(--koraal);outline-offset:2px}
.vk-schakel{display:flex;align-items:flex-start;gap:12px;margin-top:12px;cursor:pointer}
.vk-schakel input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--koraal)}
.vk-schakel span{display:grid;gap:2px;font-size:.9375rem;color:var(--tekst)}.vk-schakel strong{color:var(--petrol)}.vk-schakel small{font-size:.8125rem;line-height:1.45;color:var(--zacht)}
.vk-schakel-klein{margin:0;align-items:center}.vk-schakel-klein input{margin:0}
.vk-zelfde{margin-top:12px}
.vk-team{display:grid;gap:10px;margin-top:16px;padding:16px;border-radius:var(--r);background:var(--perzik)}.vk-team p{font-size:.875rem;line-height:1.5;color:var(--tekst)}.vk-team .knop{justify-self:start}
.vk-opslaan{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:12px 12px 12px 20px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:var(--schaduw);backdrop-filter:blur(8px)}
.vk-opslaan span{font-size:.875rem;font-weight:600;color:var(--zacht)}.vk-opslaan span.vies{color:#B54708}
.vk-teller{text-align:right}
.vk-meekijk{margin:0}
.vk-leeg{max-width:640px}.vk-leeg h2{font-size:1.125rem;color:var(--petrol)}.vk-leeg p{margin:6px 0 12px;font-size:.9375rem;line-height:1.6;color:var(--tekst)}
.vk-delen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.vk-linkrij{display:flex;gap:8px;margin-top:12px}.vk-linkrij input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--db-rand);border-radius:var(--r-veld);background:var(--db-vlak);font:inherit;font-size:.875rem;color:var(--petrol)}
.vk-deel-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vk-qr-rij,.vk-scherm-rij{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:12px}
#vk-qr-vb{width:180px;height:180px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--db-rand)}
#vk-scherm-vb{width:150px;height:auto;aspect-ratio:1170/2532;border-radius:var(--r);box-shadow:0 0 0 6px #0E1424,var(--schaduw)}
.vk-stappen-klein{margin:0 0 12px;padding-left:16px;font-size:.875rem;line-height:1.6;color:var(--tekst)}
.vk-hand-vb{margin-top:12px;padding:20px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--db-rand);overflow-x:auto}
.vk-uitleg{margin-top:12px;font-size:.875rem;color:var(--tekst)}.vk-uitleg summary{cursor:pointer;font-weight:700;color:var(--koraal)}.vk-uitleg ul{margin:8px 0 0;padding-left:16px;line-height:1.7}
.vk-contact-balk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:12px}
.vk-zoek{flex:1;min-width:220px}.vk-zoek input{width:100%;min-height:44px;padding:0 16px;border:1px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit}
.vk-aantal{margin:0 0 10px;font-size:.8125rem;font-weight:700;color:var(--zacht)}
.vk-contacten{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.vk-contact{display:flex;gap:12px;padding:16px 16px;border-radius:var(--r)}
.vk-ini{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--perzik);color:var(--koraal-diep);font-weight:800;font-size:.9375rem}
.vk-contact-in{display:grid;gap:4px;min-width:0;flex:1}
.vk-contact-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.vk-contact-kop strong{font-size:1rem;color:var(--petrol)}.vk-contact-kop small{margin-left:auto;font-size:.8125rem;color:var(--zacht)}
.vk-contact-sub{font-size:.875rem;color:var(--zacht)}
.vk-contact-gegevens{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px}.vk-contact-gegevens a{display:inline-flex;align-items:center;gap:6px;font-size:.9375rem;font-weight:600;color:var(--koraal);text-decoration:none;overflow-wrap:anywhere}.vk-contact-gegevens svg{width:16px;height:16px;flex:none}
.vk-bericht{margin-top:6px;padding:10px 12px;border-radius:var(--r-klein);background:var(--db-vlak);font-size:.875rem;line-height:1.55;color:var(--tekst);white-space:pre-line}
.vk-contact-acties{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:8px}
.vk-inzicht-balk{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:16px}
.vk-periode{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--db-spoor)}
.vk-periode button{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:none;font:inherit;font-size:.875rem;font-weight:700;color:var(--zacht);cursor:pointer}
.vk-periode button[aria-pressed=true]{background:var(--wit);color:var(--petrol);box-shadow:var(--schaduw-klein)}
@media (min-width:640px){.vk-tegels{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vk-tegel-sub{margin-top:4px;font-size:.8125rem;color:var(--zacht)}.vk-tegel-sub a{color:var(--koraal);font-weight:700}
.vk-inzicht-rij{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-top:16px}
.vk-inzicht-rij h2,.vk-hoe h2{font-size:1.0625rem;color:var(--petrol)}
.vk-grafiek{display:block;width:100%;height:200px;margin-top:16px}.vk-grafiek .b1{fill:#C9DAF8}.vk-grafiek .b2{fill:var(--koraal)}
.vk-as{display:flex;justify-content:space-between;margin-top:6px;font-size:.75rem;color:var(--zacht)}
.vk-legenda{display:flex;align-items:center;gap:6px 8px;font-size:.8125rem;color:var(--zacht)}.vk-legenda span{display:inline-block;width:10px;height:10px;border-radius:3px}.vk-legenda .l1{background:#C9DAF8}.vk-legenda .l2{margin-left:8px;background:var(--koraal)}
.vk-staven{display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none}
.vk-staven li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;font-size:.875rem;color:var(--tekst)}.vk-staven b{color:var(--petrol)}
.vk-staven i{grid-column:1/-1;display:block;height:8px;border-radius:999px;background:var(--koraal)}
.vk-geen{margin-top:12px;font-size:.875rem;color:var(--zacht)}
.vk-hoe{margin-top:16px}.vk-split{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}.vk-split p{font-size:.875rem;color:var(--zacht)}.vk-split strong{display:block;font-size:1.5rem;color:var(--petrol)}
.vk-kort p{font-size:.9375rem;color:var(--tekst)}.vk-kort p strong{color:var(--petrol)}
@media (max-width:1100px){.vk-bewerk{grid-template-columns:minmax(0,1fr)}.vk-voorbeeld{position:static;order:-1}.vk-mobiel{width:280px;height:540px}}
@media (max-width:900px){.vk-delen,.vk-inzicht-rij{grid-template-columns:minmax(0,1fr)}.vk-split{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.vk-knop{grid-template-columns:minmax(0,1fr)}.vk-knop-acties{justify-content:flex-end}.vk-beelden{grid-template-columns:minmax(0,1fr)}.vk-bekijk{margin-left:0}.vk-opslaan{border-radius:var(--r)}.vk-contact-kop small{margin-left:0;width:100%}}
.vk-form input[type=tel],.vk-form textarea{width:100%;min-height:54px;padding:12px 16px;background:var(--wit);color:var(--petrol);border:1.5px solid #7A8390;border-radius:var(--r-veld);font:inherit;font-size:1rem;transition:border-color .15s}
.vk-form textarea{min-height:96px;line-height:1.5;resize:vertical}
.vk-form input[type=tel]:hover,.vk-form textarea:hover{border-color:var(--petrol)}
.vk-form input[type=tel]:focus-visible,.vk-form textarea:focus-visible{outline:3px solid var(--koraal);outline-offset:2px;border-color:var(--koraal)}
.vk-form input[type=text],.vk-form input[type=email]{width:100%}
.vk-stappen-klein{list-style:decimal}.vk-stappen-klein li{padding-left:4px;margin-bottom:4px}
/* menu: het aantal kolommen volgt het aantal zichtbare items (Visitekaartje staat er alleen bij klanten met zo'n kaart) */
.db-nav ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.db-nav li[hidden]{display:none}
.dashboardpagina .db-nav a{white-space:nowrap}
.vk-grafiek .b0{fill:#E7EDF6}
.vk-vb-knop,.vk-vb-sluit{display:none}
@media (max-width:1100px){
  .vk-voorbeeld{display:none}
  .vk-vb-knop{display:inline-flex}
  body.vk-vb-zien{overflow:hidden}
  body.vk-vb-zien .vk-voorbeeld{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:12px;padding:16px;background:rgba(10,14,22,.72);backdrop-filter:blur(4px)}
  .vk-mobiel{width:min(320px,calc(100vw - 48px));height:min(660px,calc(100svh - 140px))}
  .vk-vb-sluit{display:grid;place-items:center;justify-self:end;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--petrol);font-size:1.75rem;line-height:1;cursor:pointer}
}
@media (max-width:640px){
  .vk-form .af-velden{grid-template-columns:minmax(0,1fr)}.vk-form .af-velden .veld{grid-column:1/-1}
  .vk-tabs{width:100%}.vk-tabs a{flex:1;justify-content:center;padding:0 10px;font-size:.875rem}
  .vk-opslaan{bottom:84px;padding:10px;gap:8px}.vk-opslaan span{display:none}.vk-opslaan .knop{flex:1}
  .vk-periode{width:100%}.vk-periode button{flex:1;padding:0 6px;font-size:.8125rem}
}
/* visitekaartje: galerij, team, taal van het voorbeeld, nabestellen */
.vk-van{font-size:.8125rem;font-weight:600;color:var(--zacht)}
.vk-nabestel{margin-left:0}
.vk-overnemen{display:grid;gap:10px}.vk-overnemen span{display:flex;flex-wrap:wrap;gap:8px}.vk-overnemen select{min-height:40px;padding:0 12px;border:1px solid var(--db-rand);border-radius:var(--r-veld);font:inherit;background:var(--wit)}
.vk-galerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:0;list-style:none}
.vk-galerij li{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--db-vlak)}
.vk-galerij img{display:block;width:100%;height:100%;object-fit:cover}
.vk-galerij li > span{position:absolute;right:6px;bottom:6px;display:flex;gap:4px}
.vk-galerij li > span button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-klein);background:rgba(255,255,255,.94);color:var(--petrol);cursor:pointer;box-shadow:var(--schaduw-klein)}
.vk-galerij li > span button svg{width:16px;height:16px}.vk-galerij [data-gschuif="-1"] svg{transform:rotate(-90deg)}.vk-galerij [data-gschuif="1"] svg{transform:rotate(-90deg)}.vk-galerij [data-gweg]{color:#B42318}
.vk-galerij li > span button:disabled{opacity:.4;cursor:default}
.vk-galerij-erbij button{display:grid;place-content:center;justify-items:center;gap:6px;width:100%;height:100%;border:1.5px dashed var(--db-rand);border-radius:var(--r);background:none;font:inherit;font-size:.875rem;font-weight:600;color:var(--koraal);cursor:pointer}
.vk-galerij-erbij svg{width:22px;height:22px}
.vk-vb-taal{margin:0 0 4px}
.vk-teamlijst{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.vk-lid{display:grid;gap:10px;padding:16px 16px;border-radius:var(--r)}
.vk-lid-kop{display:flex;align-items:center;gap:12px}.vk-lid-kop div{display:grid;flex:1;min-width:0}.vk-lid-kop strong{color:var(--petrol)}.vk-lid-kop small{font-size:.8125rem;color:var(--zacht)}
.vk-lid-wie{font-size:.875rem;color:var(--tekst)}
.vk-lid-acties{display:flex;flex-wrap:wrap;gap:8px 20px}
.vk-uitnodig{display:grid;gap:8px;padding:12px;border-radius:var(--r);background:var(--db-vlak)}
.vk-uitnodig-kop{font-size:.875rem;font-weight:600;color:var(--petrol)}.vk-uitnodig-kop i{font-style:normal;font-weight:500;color:var(--zacht)}
.vk-uitnodig div{display:flex;flex-wrap:wrap;gap:8px}.vk-uitnodig input{flex:1;min-width:180px;min-height:44px!important}
@media (max-width:640px){.vk-galerij{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* contacten als inbox: één kaart met rijen per periode */
.vk-c-cijfers{display:flex;flex-wrap:wrap;gap:8px 28px;margin:4px 0 12px}
.vk-c-cijfers div{display:flex;align-items:baseline;gap:8px}.vk-c-cijfers dt{order:2;font-size:.875rem;color:var(--zacht)}.vk-c-cijfers dd{margin:0;font-size:1.375rem;font-weight:600;color:var(--petrol)}
.vk-inbox{padding:6px 0;border-radius:var(--r);overflow:hidden}
.vk-groep{margin:0;padding:12px 20px 6px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.vk-inbox .vk-contacten{gap:0}
.vk-inbox .vk-contact{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;gap:4px 16px;padding:12px 20px;border-radius:0;border-top:1px solid var(--lijn);box-shadow:none;background:none;transition:background-color .15s}
.vk-inbox .vk-groep + .vk-contacten .vk-contact:first-child{border-top:0}
.vk-inbox .vk-contact:hover{background:#FAFBFE}
.vk-inbox .vk-contact.nieuw{background:#F7FAFF}
.vk-inbox .vk-ini{width:44px;height:44px;font-size:.875rem;letter-spacing:.02em}
.vk-inbox .vk-contact-in{gap:3px}
.vk-inbox .vk-contact-in p{margin:0}
.vk-inbox .vk-contact-kop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.vk-inbox .vk-contact-kop strong{font-size:1rem;color:var(--petrol)}
.vk-stip{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--koraal);box-shadow:0 0 0 3px rgba(29,95,214,.15)}
.vk-contact-bedrijf{font-size:.875rem;color:var(--zacht)}.vk-contact-bedrijf::before{content:"·";margin-right:10px;color:#B7C2D3}
.vk-contact-meta{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:.8125rem;color:var(--zacht)}
.vk-contact-meta a{color:var(--tekst);text-decoration:none}.vk-contact-meta a:hover{color:var(--koraal);text-decoration:underline}
.vk-inbox .vk-bericht{position:relative;margin-top:8px;padding:8px 12px;border-radius:4px var(--r-veld) var(--r-veld) var(--r-veld);background:var(--db-vlak);font-size:.875rem;line-height:1.55;color:var(--tekst);max-width:62ch}
.vk-contact-acties{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;padding-top:2px}
.vk-actie{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.8125rem;font-weight:600;color:var(--petrol);text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s}
.vk-actie svg{width:16px;height:16px;flex:none}
.vk-actie:hover{border-color:var(--koraal);color:var(--koraal)}
.vk-actie-weg{width:36px;padding:0;justify-content:center;color:#98A2B3}.vk-actie-weg:hover{border-color:#F04438;color:#B42318}
@media (max-width:900px){.vk-inbox .vk-contact{grid-template-columns:44px minmax(0,1fr)}.vk-contact-acties{grid-column:2;justify-content:flex-start;padding-top:8px}}
@media (max-width:640px){.vk-inbox .vk-contact{padding:12px 16px;gap:4px 12px}.vk-groep{padding:12px 16px 6px}.vk-actie span{display:none}.vk-actie{width:40px;height:40px;padding:0;justify-content:center}}
/* kopbalk: met Visitekaartje erbij is het menu breder. Uitloggen is op desktop een pictogram (met tooltip), en tot 1280px vallen de naam en wat ruimte weg. */
@media (min-width:1000px){
  .dashboardpagina .db-kop .db-uit span{display:none}
  .dashboardpagina .db-kop .db-uit{justify-content:center;width:40px;padding:0}
}
@media (min-width:1000px) and (max-width:1279px){
  .dashboardpagina .db-wie-tekst{display:none}
  .dashboardpagina .db-nav ul{gap:2px}.dashboardpagina .db-nav a{padding:8px 8px}
}
/* ================================================================ contacten-inbox (mobiel eerst) */
.vk-inbox-balk{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.vk-inbox-balk .vk-zoek{flex:1;min-width:0}
.vk-inbox-knoppen{display:flex;align-items:center;gap:10px}
.vk-ikoon-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:46px;height:46px;padding:0 12px;border:1px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.875rem;font-weight:600;color:var(--petrol);cursor:pointer}
.vk-ikoon-knop svg{width:18px;height:18px}.vk-ikoon-knop span{display:none}
.vk-filters{display:flex;gap:6px;margin:0 -16px 12px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.vk-filters::-webkit-scrollbar{display:none}
.vk-filters button{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:38px;padding:0 12px;border:1px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.875rem;font-weight:600;color:var(--zacht);cursor:pointer}
.vk-filters b{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--db-spoor);font-size:.75rem;color:var(--petrol)}
.vk-filters button[aria-pressed=true]{background:var(--petrol);border-color:var(--petrol);color:#fff}.vk-filters button[aria-pressed=true] b{background:rgba(255,255,255,.18);color:#fff}
.vk-inbox{padding:0;border-radius:var(--r);overflow:hidden}
.vk-clijst{margin:0;padding:4px 0;list-style:none}
.vk-clijst li + li{border-top:1px solid var(--lijn)}
.vk-crij{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;background:none;font:inherit;text-align:left;color:inherit;cursor:pointer;transition:background-color .15s}
.vk-crij:hover{background:#FFFFFF}.vk-crij.gekozen{background:#EEF3FB}
.vk-crij:focus-visible{outline:2px solid var(--koraal);outline-offset:-2px}
.vk-ini{display:grid;place-items:center;flex:none;border-radius:50%;font-weight:600;letter-spacing:.02em}
.vk-ini-m{width:44px;height:44px;font-size:.875rem}.vk-ini-l{width:64px;height:64px;font-size:1.25rem}
.vk-crij-in{display:grid;gap:3px;min-width:0}
.vk-crij-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vk-crij-kop strong{overflow:hidden;font-size:.9375rem;font-weight:600;color:var(--petrol);text-overflow:ellipsis;white-space:nowrap}
.vk-crij-kop time{flex:none;font-size:.75rem;color:var(--zacht)}
.vk-crij.nieuw .vk-crij-kop strong{font-weight:600}.vk-crij.nieuw .vk-crij-kop time{color:var(--koraal);font-weight:600}
.vk-crij-sub{display:flex;align-items:center;gap:6px;min-width:0;font-size:.8125rem;color:var(--zacht)}
.vk-crij-sub > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vk-crij-sub .vk-stip{flex:none;width:8px;height:8px;box-shadow:none}
.vk-klaar-ic{display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:#E6F1EE;color:#0F5A4E}.vk-klaar-ic svg{width:11px;height:11px;stroke-width:3}
.vk-clijst .vk-geen{padding:24px 16px;margin:0;text-align:center}
/* detail: op een telefoon over het hele scherm */
.vk-cdetail{display:none}
body.vk-c-open .vk-cdetail{position:fixed;inset:0;z-index:200;display:block;overflow-y:auto;background:var(--wit);-webkit-overflow-scrolling:touch}
body.vk-c-open{overflow:hidden}
.vk-cdetail-in{display:grid;gap:16px;min-height:100%;padding:12px 16px 112px}
.vk-terug{display:inline-flex;align-items:center;gap:4px;justify-self:start;min-height:44px;padding:0 10px 0 4px;border:0;border-radius:var(--r-klein);background:none;font:inherit;font-size:.9375rem;font-weight:600;color:var(--koraal);cursor:pointer}.vk-terug svg{width:20px;height:20px}
.vk-cdetail-kop{display:flex;align-items:center;gap:16px}
.vk-cdetail-kop h2{margin:0;font-size:1.375rem;line-height:1.2;color:var(--petrol);outline:none}
.vk-cdetail-kop p{margin:2px 0 0}.vk-cdetail-bedrijf{font-size:.9375rem;font-weight:600;color:var(--tekst)}.vk-cdetail-wanneer{font-size:.8125rem;color:var(--zacht)}
.vk-cdetail-kop .db-pil{margin-top:8px}
.vk-cacties{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--lijn);backdrop-filter:blur(8px)}
.vk-cactie{display:grid;justify-items:center;gap:4px;flex:1;padding:10px 6px;border:1px solid var(--db-rand);border-radius:var(--r);background:var(--wit);font-size:.8125rem;font-weight:600;color:var(--petrol);text-decoration:none}
.vk-cactie svg{width:20px;height:20px}
.vk-cactie.hoofd{background:var(--koraal);border-color:var(--koraal);color:#fff}
.vk-cbericht{margin:0;padding:16px 16px;border-radius:4px var(--r) var(--r) var(--r);background:var(--db-vlak)}
.vk-cbericht figcaption{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.vk-cbericht blockquote{margin:6px 0 0;font-size:.9375rem;line-height:1.6;color:var(--tekst);white-space:pre-line}
.vk-cvelden{display:grid;margin:0;border-top:1px solid var(--lijn)}
.vk-cveld{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.vk-cveld dt{font-size:.75rem;font-weight:600;color:var(--zacht)}
.vk-cveld dd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font-size:.9375rem;font-weight:600;color:var(--petrol);overflow-wrap:anywhere}
.vk-cveld dd a{color:inherit;text-decoration:none}.vk-cveld dd a:hover{color:var(--koraal)}
.vk-kopie{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:var(--r-klein);background:none;color:var(--zacht);cursor:pointer}.vk-kopie:hover{background:var(--db-vlak);color:var(--petrol)}.vk-kopie svg{width:16px;height:16px}
.vk-cvoet{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.vk-volg{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1.5px solid var(--db-rand);border-radius:999px;background:var(--wit);font:inherit;font-size:.875rem;font-weight:600;color:var(--petrol);cursor:pointer}
.vk-volg svg{width:16px;height:16px;stroke-width:2.6}.vk-volg.aan{background:#E6F1EE;border-color:#B7DCCF;color:#0F5A4E}
.vk-cdetail-leeg{display:grid;place-content:center;justify-items:center;gap:10px;height:100%;min-height:320px;color:var(--zacht);text-align:center}.vk-cdetail-leeg svg{width:36px;height:36px;color:#B7C2D3}
/* groot scherm: lijst links, contact rechts */
@media (min-width:1000px){
  .vk-ikoon-knop span{display:inline}
  .vk-filters{margin:0 0 12px;padding:0}
  .vk-inbox{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);min-height:560px}
  .vk-clijst{max-height:72vh;overflow-y:auto;border-right:1px solid var(--lijn)}
  .vk-crij{padding:12px 16px}
  .vk-cdetail,body.vk-c-open .vk-cdetail{position:static;display:block;overflow:visible;background:none;z-index:auto}
  body.vk-c-open{overflow:visible}
  .vk-cdetail-in{min-height:0;padding:28px 32px;gap:20px}
  .vk-terug{display:none}
  .vk-cacties{position:static;padding:0;background:none;border:0;backdrop-filter:none}
  .vk-cactie{display:inline-flex;flex:none;gap:8px;padding:0 16px;min-height:44px;align-items:center;border-radius:999px;font-size:.875rem}
  .vk-cbericht,.vk-cvelden{max-width:640px}
}

/* ================================================================ dashboard: premium laag
   Eén systeem: Inter (optische maten, vaste cijferbreedte), gewichten 400/500/600, drie tekstgrijzen, neutrale ondergrond,
   witte kopbalk met haarlijn, kaarten met haarlijnrand en een bijna onzichtbare schaduw, twee radii (12 kaart, 10 knop/veld). */
body.dashboardpagina{--ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--inkt:#0F1B2D;--inkt-2:#475569;--inkt-3:#8B90A0;--lijn:#E6E9EF;--lijn-2:#D7DCE4;--canvas:#F6F7F9;
  --merk:#4433E6;--rk:12px;--rv:10px;--s1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);--s2:0 1px 2px rgba(16,24,40,.06),0 12px 28px -14px rgba(16,24,40,.18);
  --schaduw-klein:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.03);--schaduw:0 1px 2px rgba(16,24,40,.06),0 12px 28px -14px rgba(16,24,40,.18);--r:12px;--r-veld:10px;--r-klein:8px;
  --grond:var(--canvas);--zacht:var(--inkt-3);--tekst:var(--inkt-2);--petrol:var(--inkt);--db-rand:var(--lijn-2);--db-spoor:#EEF1F5;--db-vlak:#F6F7F9;
  background:var(--canvas);font-family:var(--ui);font-optical-sizing:auto;font-feature-settings:"cv11","calt" 0;letter-spacing:-.006em;color:var(--inkt-2);-webkit-font-smoothing:antialiased}
body.dashboardpagina :is(button,input,select,textarea){font-family:inherit}
body.dashboardpagina :is(h1,h2,h3,h4,strong,b){font-weight:600}
body.dashboardpagina :is(.db-getal,.vk-c-cijfers dd,.vk-split strong,.vk-filters b,.db-nav-n,time){font-variant-numeric:tabular-nums}
/* kopbalk */
body.dashboardpagina .db-kop{background:#fff!important;background-image:none!important;border-bottom:1px solid var(--lijn);box-shadow:none}
body.dashboardpagina .db-kop .merk{color:var(--inkt)}
body.dashboardpagina .db-wie-tekst strong{color:var(--inkt);font-weight:600}body.dashboardpagina .db-wie-tekst small{color:var(--inkt-3)}
body.dashboardpagina .db-initiaal{background:var(--inkt);color:#fff;font-weight:600}
body.dashboardpagina .db-kop .db-uit{border:1px solid var(--lijn-2);background:#fff;color:var(--inkt-2);box-shadow:var(--s1)}
@media (min-width:1000px){
  body.dashboardpagina .db-nav a{padding:6px 12px;border-radius:var(--r-klein);font-size:.875rem;font-weight:500;color:var(--inkt-2)}
  body.dashboardpagina .db-nav a:hover{background:#F3F5F8;color:var(--inkt)}
  body.dashboardpagina .db-nav a[aria-current]{background:#EEF2F8;color:var(--inkt);box-shadow:inset 0 0 0 1px #E1E7F0}
  body.dashboardpagina .db-nav-n{min-width:18px;height:18px;padding:0 4px;background:#E7EBF1;color:var(--inkt-2);font-size:.6875rem;font-weight:600}
  body.dashboardpagina .db-nav a[aria-current] .db-nav-n{background:#DCE4F0;color:var(--inkt)}
  body.dashboardpagina .db-nav #n-bestellingen{background:var(--merk);color:#fff}
}
/* titel en kerncijfers: geen band, sterren of cirkel meer */
body.dashboardpagina .db-titel{margin:0;padding:clamp(24px,3vw,36px) 0 20px;background:none;box-shadow:none;clip-path:none}
body.dashboardpagina .db-titel::before,body.dashboardpagina .db-titel::after{display:none}
body.dashboardpagina .db-titel h1{font-size:clamp(1.5rem,2.2vw,1.875rem);font-weight:600;letter-spacing:-.022em;line-height:1.15;color:var(--inkt)}
body.dashboardpagina .db-titel .db-lood{margin:6px 0 0;font-size:.9375rem;color:var(--inkt-2)}
body.dashboardpagina .db-datum{font-size:.8125rem;font-weight:500;color:var(--inkt-3)}
body.dashboardpagina .db-voorbeeld{background:none;box-shadow:none}
body.dashboardpagina .db-band-kpi{margin-top:20px}
body.dashboardpagina .db-band-kpi .db-tegels{background:#fff;border:1px solid var(--lijn);border-radius:var(--rk);box-shadow:var(--s1);overflow:hidden}
body.dashboardpagina .db-band-kpi .db-tegel{padding:16px 20px!important;border-left:1px solid var(--lijn)}
body.dashboardpagina .db-band-kpi .db-tegel:first-child{border-left:0}
body.dashboardpagina .db-band-kpi .db-tegel-naam{font-size:.8125rem;font-weight:500;color:var(--inkt-3)}
body.dashboardpagina .db-band-kpi .db-getal,body.dashboardpagina .db-band-kpi .db-tegel:first-child .db-getal{margin:6px 0 0!important;font-size:1.875rem!important;font-weight:600;letter-spacing:-.025em;color:var(--inkt)}
body.dashboardpagina .db-band-kpi .db-getal small,body.dashboardpagina .db-band-kpi .db-tegel-sub{font-size:.8125rem;font-weight:400;color:var(--inkt-3)}
body.dashboardpagina .db-band-kpi .db-trend{display:inline-flex;margin-left:8px;padding:2px 6px;border-radius:var(--r-klein);background:#E8F5EE;font-size:.75rem;font-weight:600;color:#127A45;vertical-align:middle}
body.dashboardpagina .db-band-kpi .db-trend.min{background:#FDECEC;color:#B42318}
@media (max-width:760px){body.dashboardpagina .db-band-kpi .db-tegel{padding:12px 16px!important}body.dashboardpagina .db-band-kpi .db-tegel:nth-child(odd){border-left:0}body.dashboardpagina .db-band-kpi .db-tegel:nth-child(n+3){border-top:1px solid var(--lijn)}body.dashboardpagina .db-band-kpi .db-tegels{gap:0!important}}
/* kaarten en blokken */
body.dashboardpagina .kaart{border:1px solid var(--lijn);border-radius:var(--rk);background:#fff;box-shadow:var(--s1)}
body.dashboardpagina .db-blok{padding:clamp(18px,2vw,24px)}
body.dashboardpagina :is(.db-blok h2,.db-order h3,.db-kaart h3,.vk-sectie h2,.vk-inzicht-rij h2,.vk-hoe h2){font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--inkt)}
body.dashboardpagina :is(.db-blok-sub,.vk-leeg p){font-size:.8125rem;line-height:1.55;color:var(--inkt-3)}
body.dashboardpagina .db-tegel-naam{font-size:.8125rem;font-weight:500;color:var(--inkt-3)}
body.dashboardpagina .db-getal{font-weight:600;letter-spacing:-.025em;color:var(--inkt)}
body.dashboardpagina .db-melding{border:1px solid #DCE6F7;border-radius:var(--rk);background:#F4F8FF}
/* knoppen */
body.dashboardpagina .knop{min-height:38px;padding:0 16px;border-radius:var(--rv);font-size:.875rem;font-weight:600;letter-spacing:-.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--schaduw-klein)}
body.dashboardpagina .knop:not(.knop-lijn){background:var(--merk);color:#fff}
body.dashboardpagina .knop:not(.knop-lijn):hover{background:#1A55C0}
body.dashboardpagina .knop-lijn{border:1px solid var(--lijn-2);background:#fff;color:var(--inkt);box-shadow:var(--s1)}
body.dashboardpagina .knop-lijn:hover{border-color:#C4CBD6;background:#FAFBFC}
body.dashboardpagina .knop .kp{width:16px;height:16px}
body.dashboardpagina .knop-klein{min-height:34px;padding:0 12px;font-size:.8125rem}
body.dashboardpagina :is(.knop,.vk-actie,.vk-cactie,.vk-ikoon-knop,.vk-volg,.vk-filters button):focus-visible{outline:none;box-shadow:0 0 0 3px rgba(29,95,214,.22)}
/* labels en pillen */
body.dashboardpagina .db-pil{min-height:22px;padding:2px 8px;border-radius:var(--r-klein);background:#EEF2F8;font-size:.75rem;font-weight:600;color:var(--inkt-2)}
body.dashboardpagina .db-pil.klaar{background:#E8F5EE;color:#127A45}
/* invoervelden */
body.dashboardpagina :is(input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],input[type=password],select,textarea){min-height:42px;padding:8px 12px;border:1px solid var(--lijn-2);border-radius:var(--rv);background:#fff;font-size:.9375rem;color:var(--inkt);box-shadow:var(--schaduw-klein)}
body.dashboardpagina textarea{min-height:88px}
body.dashboardpagina :is(input,select,textarea):hover{border-color:#C4CBD6}
body.dashboardpagina :is(input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],input[type=password],select,textarea):focus-visible{outline:none;border-color:var(--merk);box-shadow:0 0 0 3px rgba(29,95,214,.16)}
body.dashboardpagina .veld label{font-size:.8125rem;font-weight:500;color:var(--inkt)}body.dashboardpagina .veld label i{font-weight:400;color:var(--inkt-3)}
/* tabbladen en keuzes als strak segment */
body.dashboardpagina :is(.vk-tabs,.vk-keuze div,.vk-periode){padding:3px;border-radius:var(--rv);background:#EEF1F5;box-shadow:inset 0 0 0 1px #E4E8EE}
body.dashboardpagina :is(.vk-tabs a,.vk-keuze span,.vk-periode button){min-height:34px;border-radius:var(--r-klein);font-size:.875rem;font-weight:500;color:var(--inkt-2)}
body.dashboardpagina :is(.vk-tabs a[aria-current=page],.vk-keuze input:checked + span,.vk-periode button[aria-pressed=true]){background:#fff;color:var(--inkt);font-weight:600;box-shadow:0 0 0 1px rgba(16,24,40,.04),var(--schaduw-klein)}
body.dashboardpagina .vk-n{min-width:18px;height:18px;font-size:.6875rem;font-weight:600}
body.dashboardpagina .vk-filters button{min-height:32px;border-radius:var(--r-klein);font-size:.8125rem;font-weight:500;color:var(--inkt-2);box-shadow:var(--s1)}
body.dashboardpagina .vk-filters button[aria-pressed=true]{background:var(--inkt);border-color:var(--inkt);color:#fff}
/* visitekaartje-onderdelen in dezelfde taal */
body.dashboardpagina .vk-inbox,.vk-tel-niets{border-radius:var(--rk)}
body.dashboardpagina .vk-crij-kop strong{font-weight:600;color:var(--inkt)}body.dashboardpagina .vk-crij.nieuw .vk-crij-kop strong{font-weight:600}
body.dashboardpagina .vk-crij.gekozen{background:#F1F5FB;box-shadow:inset 2px 0 0 var(--merk)}
body.dashboardpagina .vk-cdetail-kop h2{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:var(--inkt)}
body.dashboardpagina :is(.vk-actie,.vk-cactie,.vk-volg,.vk-ikoon-knop){border-radius:var(--rv);font-weight:600;box-shadow:var(--s1)}
body.dashboardpagina .vk-cactie.hoofd{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--schaduw-klein)}
body.dashboardpagina :is(.vk-zoek input){border-radius:var(--rv)}
body.dashboardpagina .vk-opslaan{border-radius:var(--r-veld);border:1px solid var(--lijn);box-shadow:var(--s2)}
body.dashboardpagina :is(.vk-beeld,.vk-uitnodig,.vk-team,.vk-knop,.vk-galerij li,.vk-hand-vb,.vk-bericht,.vk-cbericht){border-radius:var(--rv)}
body.dashboardpagina :is(.vk-schakel strong,.vk-beeld-tekst strong,.vk-lid-kop strong,.vk-wie strong){font-weight:600;color:var(--inkt)}
body.dashboardpagina .vk-grafiek .b1{fill:#D5E2F8}
/* telefoon: de onderbalk wit met een haarlijn */
@media (max-width:999px){
  body.dashboardpagina .db-nav{background:rgba(255,255,255,.96);border-top:1px solid var(--lijn);box-shadow:var(--schaduw-klein)}
  body.dashboardpagina .db-nav a{font-weight:500;color:var(--inkt-3)}body.dashboardpagina .db-nav a[aria-current]{color:var(--merk);background:none}
}
body.dashboardpagina :is(.vk-link-knop,legend,summary,.vk-tegel-sub a,.db-blokkop a){font-weight:600}
body.dashboardpagina #db-datum,body.dashboardpagina .db-titel .db-datum{color:var(--inkt-3)!important;font-weight:500;letter-spacing:0}
/* "Je kaart" naast de grafiek: wit, met een gewone kaarttitel */
body.dashboardpagina .st-best{border:1px solid var(--lijn);border-radius:var(--rk);background:#fff;box-shadow:var(--s1)}
body.dashboardpagina .st-best-kop span{font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--inkt-3)}
body.dashboardpagina .st-best-foto{border-radius:var(--rv);background:var(--canvas)}
body.dashboardpagina .st-best-tekst strong{font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--inkt)}
body.dashboardpagina .st-best-tekst small,body.dashboardpagina .st-best-tekst p{font-size:.8125rem;line-height:1.5;color:var(--inkt-3)}
/* kerncijfers: één kaart, tegels zonder eigen rand */
body.dashboardpagina .db-band-kpi .db-tegel,body.dashboardpagina .db-band-kpi .db-tegel.kaart{border:0;border-left:1px solid var(--lijn);border-radius:0;background:none;box-shadow:none}
body.dashboardpagina .db-band-kpi .db-tegel:first-child{border-left:0}
@media (max-width:760px){body.dashboardpagina .db-band-kpi .db-tegel:nth-child(odd){border-left:0}}

/* ================================================================ dashboard: karakter
   Bovenop de premium laag: één merkmoment (navy met goud), beeld in de kerncijfers en rustige beweging bij het openen. */
body.dashboardpagina{--navy:#0F1218;--goud:#8F84FF}
/* kerncijfers: trendlijn, kaartjes en dagmeter onderaan elke tegel, op één lijn */
body.dashboardpagina .db-band-kpi .db-tegel{display:flex!important;flex-direction:column;align-items:stretch!important;text-align:left}
body.dashboardpagina .db-band-kpi .db-getal{justify-content:flex-start}
body.dashboardpagina .db-band-kpi .db-vonk,body.dashboardpagina .db-band-kpi .db-duimen,body.dashboardpagina .db-band-kpi .db-meter{display:block;margin-top:auto}
body.dashboardpagina .db-band-kpi .db-tegel-sub{margin-bottom:16px}
body.dashboardpagina .db-band-kpi .db-vonk{height:34px}
body.dashboardpagina .db-band-kpi .db-vonk polygon{fill:rgba(29,95,214,.08)}
body.dashboardpagina .db-band-kpi .db-vonk polyline{stroke:var(--koraal);stroke-width:1.75}
body.dashboardpagina .db-band-kpi .db-duimen{display:flex;height:34px}
body.dashboardpagina .db-band-kpi .db-duimen .db-beeld{width:34px;height:34px;border-radius:9px;background:var(--canvas);box-shadow:0 0 0 2px #fff,0 1px 2px rgba(15,27,45,.12)}
body.dashboardpagina .db-band-kpi .db-duimen .db-meer-n{display:grid;place-items:center;font-size:.75rem;font-weight:600;color:var(--inkt-2)}
body.dashboardpagina .db-band-kpi .db-meter{height:6px;margin-bottom:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--lijn)}
body.dashboardpagina .db-band-kpi .db-meter i{background:var(--koraal)}
body.dashboardpagina .db-band-kpi .db-meter b{top:-4px;width:2px;height:14px;background:var(--inkt)}
body.dashboardpagina .db-trend{padding:2px 7px;border-radius:999px;font-size:.75rem;font-weight:600;background:#E8F6EE;color:#16794A}
body.dashboardpagina .db-trend.min{background:#FDECEC;color:#B42318}
@media (max-width:760px){
  body.dashboardpagina .db-band-kpi .db-tegels{grid-template-columns:1fr 1fr!important}
  body.dashboardpagina .db-band-kpi .db-tegel:first-child{grid-column:1/-1}
  body.dashboardpagina .db-band-kpi .db-tegel:nth-child(2){border-left:0;border-top:1px solid var(--lijn)}
  body.dashboardpagina .db-band-kpi .db-tegel:nth-child(3){border-left:1px solid var(--lijn);border-top:1px solid var(--lijn)}
  body.dashboardpagina .db-band-kpi .db-tegel-naam{min-height:0;font-size:.8125rem;letter-spacing:0}
  body.dashboardpagina .db-band-kpi .db-trend{display:inline-block}
  body.dashboardpagina .db-band-kpi .db-tegel:not(:first-child) .db-tegel-sub{font-size:.75rem}
}
/* beste kaart: het ene donkere vlak, in de merkkleuren */
body.dashboardpagina .st-best{position:relative;border:0;color:#fff;background:radial-gradient(110% 70% at 50% 18%,#2E2580 0%,#171A24 58%,#0F1218 100%);box-shadow:0 1px 2px rgba(15,18,24,.25),0 18px 40px -18px rgba(15,18,24,.55)}
body.dashboardpagina .st-best::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(143,132,255,.7),transparent)}
body.dashboardpagina .st-best-kop span{color:var(--goud)}
body.dashboardpagina .st-best-kop small{color:rgba(255,255,255,.6)}
body.dashboardpagina .st-best-foto{background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent)}
body.dashboardpagina .st-best-foto img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.4))}
body.dashboardpagina .st-best-tekst strong{color:#fff;font-size:1.125rem}
body.dashboardpagina .st-best-tekst small,body.dashboardpagina .st-best-tekst p{color:rgba(255,255,255,.68)}
/* onderweg: op een breed scherm als één rij in plaats van een lange kolom */
@media (min-width:900px){
  body.dashboardpagina .db-lopend .db-tracker-v{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:24px}
  body.dashboardpagina .db-lopend .db-tracker-v li{grid-template-columns:1fr;gap:10px;padding-bottom:0}
  body.dashboardpagina .db-lopend .db-tracker-v li:not(:last-child)::before{left:38px;right:10px;top:13px;bottom:auto;width:auto;height:2px}
}
body.dashboardpagina .db-blokkop{flex-wrap:nowrap}
body.dashboardpagina .db-blokkop>a{white-space:nowrap;flex:none}
/* beweging: staven groeien op, blokken komen rustig binnen; niet voor wie minder beweging heeft ingesteld */
@media (prefers-reduced-motion:no-preference){
  body.dashboardpagina .db-staaf{animation:db-groei .8s cubic-bezier(.2,.8,.2,1) backwards}
  body.dashboardpagina.db-geladen .db-staaf,body.dashboardpagina.db-geladen .db-band-kpi,body.dashboardpagina.db-geladen .db-inhoud>*,body.dashboardpagina.db-geladen .db-vonk polyline{animation:none}
  body.dashboardpagina .db-staven li:nth-child(2n) .db-staaf{animation-delay:40ms}
  body.dashboardpagina .db-staven li:nth-child(3n) .db-staaf{animation-delay:80ms}
  body.dashboardpagina .db-band-kpi,body.dashboardpagina .db-inhoud>*{animation:db-in .5s cubic-bezier(.2,.8,.2,1) both}
  body.dashboardpagina .db-inhoud>:nth-child(2){animation-delay:60ms}
  body.dashboardpagina .db-inhoud>:nth-child(n+3){animation-delay:120ms}
  body.dashboardpagina .db-band-kpi .db-vonk polyline{stroke-dasharray:400;animation:db-lijn 1.2s .2s ease-out both}
}
@keyframes db-groei{from{clip-path:inset(100% -60px 0 -60px)}to{clip-path:inset(-60px -60px 0 -60px)}}   /* ruim opzij en boven: het getal boven een smalle staaf is breder dan de staaf */
@keyframes db-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes db-lijn{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
/* merkteken in de paginakop: de ster en de tikgolven uit het logo, haarlijn-dun, naast de begroeting */
html:has(body.dashboardpagina){overflow-x:clip}
body.dashboardpagina .db-titel::before{content:"";display:block!important;position:absolute;z-index:-1;top:-101px;bottom:auto;left:calc(50% - 92px);translate:none;width:520px;height:325px;background:none;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 80%);mask-image:linear-gradient(180deg,#000 55%,transparent 80%)}
body.dashboardpagina .db-titel::after{content:"";display:block!important;position:absolute;z-index:-2;top:-160px;left:calc(50% - 160px);width:900px;height:460px;background:radial-gradient(closest-side,rgba(68,51,230,.07),rgba(68,51,230,0));pointer-events:none}
@media (max-width:760px){body.dashboardpagina .db-titel::before{top:-68px;left:auto;right:-186px;width:340px;height:212px}body.dashboardpagina .db-titel::after{left:auto;right:-260px;width:560px;height:360px}}

/* ================================================================ dashboard: live, mijlpalen, tooltip, laadschermpje, logo */
/* laatste tik: groen kloppend stipje als er het afgelopen etmaal getikt is */
body.dashboardpagina .db-live{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0;padding:4px 12px 4px 10px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--lijn);font-size:.875rem;color:var(--inkt-2);font-variant-numeric:tabular-nums}
body.dashboardpagina .db-live[hidden]{display:none}
body.dashboardpagina .db-live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--inkt-3);flex:none}
body.dashboardpagina .db-live.vers i{background:#12B76A}
body.dashboardpagina .db-live.vers i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#12B76A;animation:db-klop 2s ease-out infinite}
body.dashboardpagina .db-live{max-width:100%}
body.dashboardpagina .db-live-t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.dashboardpagina .db-live b{margin:0 6px;font-weight:400;color:var(--inkt-3)}
body.dashboardpagina .db-live.flits{animation:db-flits 1.6s ease-out}
@keyframes db-klop{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3);opacity:0}}
@keyframes db-flits{0%{background:#DCFCE7;box-shadow:inset 0 0 0 1px #86EFAC}100%{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--lijn)}}
/* mijlpaal: één rustige felicitatie bovenaan, weg te klikken */
body.dashboardpagina .db-mijlpaal{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px 16px 16px;overflow:hidden;border-radius:var(--rk);background:linear-gradient(100deg,#F1F0FC 0%,#FAFAFE 45%,#fff 75%);box-shadow:inset 0 0 0 1px #F3E3B5,var(--s1);transition:opacity .25s,transform .25s}
body.dashboardpagina .db-mijlpaal::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-100%);pointer-events:none}
body.dashboardpagina .db-mijlpaal.weg{opacity:0;transform:translateY(-4px)}
body.dashboardpagina .db-mp-ster{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none;background:radial-gradient(120% 120% at 30% 20%,#5B4BEF,#2E2580);box-shadow:0 6px 14px -6px rgba(15,18,24,.6)}
body.dashboardpagina .db-mp-ster svg{width:22px;height:22px;color:var(--goud)}
body.dashboardpagina .db-mp-tekst{min-width:0;flex:1}
body.dashboardpagina .db-mp-oog{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#A16207}
body.dashboardpagina .db-mijlpaal h2{margin:2px 0 0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--inkt)}
body.dashboardpagina .db-mijlpaal p:not(.db-mp-oog){margin:2px 0 0;font-size:.875rem;line-height:1.5;color:var(--inkt-2)}
body.dashboardpagina .db-mp-weg{align-self:flex-start;display:grid;place-items:center;width:32px;height:32px;margin:-6px -6px 0 0;border:0;border-radius:8px;background:none;color:var(--inkt-3);cursor:pointer}
body.dashboardpagina .db-mp-weg:hover{background:rgba(15,27,45,.05);color:var(--inkt)}
body.dashboardpagina .db-mp-weg svg{width:16px;height:16px}
@media (prefers-reduced-motion:no-preference){
  body.dashboardpagina .db-mijlpaal::after{animation:db-glans 1.4s .6s ease-out both}
  body.dashboardpagina .db-mp-ster svg{animation:db-ster 1.1s .3s cubic-bezier(.3,1.5,.5,1) both}
  body.dashboardpagina.db-geladen .db-mijlpaal::after,body.dashboardpagina.db-geladen .db-mp-ster svg{animation:none}
}
@keyframes db-glans{to{transform:translateX(100%)}}
@keyframes db-ster{from{transform:scale(.4) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
/* tooltip op de grafiek: aanwijzen, focus met het toetsenbord of aantikken */
body.dashboardpagina .db-staven li{position:relative;outline:0;cursor:default}
body.dashboardpagina .db-staven li:focus-visible .db-staaf{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--koraal)}
body.dashboardpagina .db-tip{position:absolute;z-index:5;left:50%;bottom:calc(100% + 10px);display:grid;gap:3px;min-width:156px;padding:10px 12px;border-radius:10px;background:var(--inkt);color:#fff;font-size:.8125rem;line-height:1.35;text-align:left;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(15,27,45,.45);opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
body.dashboardpagina .db-tip strong{font-weight:600;color:#fff}
body.dashboardpagina .db-tip strong::first-letter{text-transform:uppercase}
body.dashboardpagina .db-tip em{font-style:normal;color:rgba(255,255,255,.72)}
body.dashboardpagina .db-tip span{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
body.dashboardpagina .db-tip span:first-of-type{margin-top:5px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14)}
body.dashboardpagina .db-tip i{font-style:normal;color:rgba(255,255,255,.72);overflow:hidden;text-overflow:ellipsis;max-width:16ch}
body.dashboardpagina .db-staven li:nth-child(-n+2) .db-tip{left:0;transform:translate(0,4px)}
body.dashboardpagina .db-staven li:nth-last-child(-n+2) .db-tip{left:auto;right:0;transform:translate(0,4px)}
body.dashboardpagina .db-staven li:hover .db-tip,body.dashboardpagina .db-staven li:focus-visible .db-tip,body.dashboardpagina .db-staven li.tip-open .db-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
body.dashboardpagina .db-staven li:nth-child(-n+2):hover .db-tip,body.dashboardpagina .db-staven li:nth-child(-n+2):focus-visible .db-tip,body.dashboardpagina .db-staven li:nth-child(-n+2).tip-open .db-tip,
body.dashboardpagina .db-staven li:nth-last-child(-n+2):hover .db-tip,body.dashboardpagina .db-staven li:nth-last-child(-n+2):focus-visible .db-tip,body.dashboardpagina .db-staven li:nth-last-child(-n+2).tip-open .db-tip{transform:none}
body.dashboardpagina .db-staven li:hover .db-staaf b,body.dashboardpagina .db-staven li.tip-open .db-staaf b{opacity:0}
body.dashboardpagina .db-staven li:hover .db-staaf,body.dashboardpagina .db-staven li.tip-open .db-staaf{background:var(--koraal)}
body.dashboardpagina .db-staven li:hover,body.dashboardpagina .db-staven li.tip-open{z-index:4}
@media (hover:none){body.dashboardpagina .db-staven li:hover:not(.tip-open) .db-tip{opacity:0;visibility:hidden}}
/* laadschermpje: grijze contouren die zacht oplichten tot de gegevens er zijn */
body.dashboardpagina .db-skelet i{display:block;border-radius:6px;background:linear-gradient(90deg,#EDF0F4 30%,#F6F8FA 50%,#EDF0F4 70%) 0 0/300% 100%;animation:db-skelet 1.5s ease-in-out infinite}
body.dashboardpagina .db-skelet .sk-r1{width:62%;height:10px;margin-top:10px}
body.dashboardpagina .db-skelet .sk-r2{width:34%;height:12px}
body.dashboardpagina .db-skelet .sk-getal{width:28%;height:28px;margin-top:12px}
body.dashboardpagina .db-skelet .sk-staven{display:flex;align-items:flex-end;gap:clamp(4px,1vw,12px);height:200px;margin-top:28px}
body.dashboardpagina .db-skelet .sk-staven i{flex:1;border-radius:6px 6px 3px 3px}
body.dashboardpagina .db-skelet .sk-vlak{height:180px;margin-top:18px;border-radius:10px}
body.dashboardpagina .db-skelet .sk-rijen{margin:14px 0 0;padding:0;list-style:none}
body.dashboardpagina .db-skelet .sk-rijen li{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--lijn)}
body.dashboardpagina .db-skelet .sk-rijen li:first-child{border-top:0}
body.dashboardpagina .db-skelet .sk-beeld{width:44px;height:44px;border-radius:10px;flex:none}
body.dashboardpagina .db-skelet .sk-rijen .sk-r1{flex:1;margin:0;max-width:220px}
body.dashboardpagina .db-skelet .sk-balk{width:34%;height:6px;margin-left:auto}
body.dashboardpagina .db-skelet .db-tegel{display:block!important}
@keyframes db-skelet{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){body.dashboardpagina .db-skelet i{animation:none}}
/* bedrijfslogo als avatar: een rond vlakje met een logo erin werkt niet, dus een wit vierkantje met afgeronde hoeken */
body.dashboardpagina .db-initiaal.met-logo{padding:4px;overflow:hidden;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn)}
body.dashboardpagina .db-initiaal.met-logo img{display:block;width:100%;height:100%;object-fit:contain}
body.dashboardpagina .db-logo-rij{display:flex;align-items:center;gap:20px;margin-top:14px}
body.dashboardpagina .db-logo-vak{display:grid;place-items:center;width:96px;height:96px;flex:none;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn)}
body.dashboardpagina .db-logo-vak img{max-width:78%;max-height:78%;object-fit:contain}
body.dashboardpagina .db-logo-vak span{font-size:.8125rem;color:var(--inkt-3)}
body.dashboardpagina .db-logo-rij p{margin:0;font-size:.875rem;color:var(--inkt-2)}
body.dashboardpagina .db-logo-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
@media (max-width:520px){body.dashboardpagina .db-logo-rij{align-items:flex-start;gap:16px}body.dashboardpagina .db-logo-vak{width:72px;height:72px}}
@media (max-width:520px){body.dashboardpagina .db-mijlpaal{align-items:flex-start}body.dashboardpagina .db-mp-ster{width:40px;height:40px}}
body.dashboardpagina .db-initiaal.met-foto{padding:0;overflow:hidden;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--lijn)}
body.dashboardpagina .db-initiaal.met-foto img{display:block;width:100%;height:100%;object-fit:cover}
/* zoekveld met vergrootglas (beheer): de algemene veldopmaak hierboven mag de ruimte voor het pictogram niet weghalen */
body.dashboardpagina .zoekveld input{padding-left:40px}
body.dashboardpagina .zoekveld svg{left:13px;width:17px;height:17px;margin-top:-8.5px;color:var(--inkt-3)}
/* ondertitel in de kop: korte regels (rustiger lezen) en nooit onder de ster door */
body.dashboardpagina .db-titel .db-lood{max-width:46ch;text-wrap:pretty}
/* ================================================================ app op het beginscherm + meldingen (dashboard-app.js) */
body.dashboardpagina .app-banner{position:relative;display:flex;gap:16px;padding:18px 20px;border-radius:var(--rk);background:#fff;box-shadow:inset 0 0 0 1px var(--lijn),var(--s1);transition:opacity .25s,transform .25s}
body.dashboardpagina .app-banner.weg{opacity:0;transform:translateY(-4px)}
body.dashboardpagina .app-b-icoon{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:radial-gradient(120% 120% at 30% 20%,#5B4BEF,#2E2580);color:#fff;box-shadow:0 6px 14px -6px rgba(15,18,24,.6)}
body.dashboardpagina .app-b-icoon svg{width:22px;height:22px}
body.dashboardpagina .app-b-icoon i{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--goud);box-shadow:0 0 0 2px var(--navy)}
body.dashboardpagina .app-b-tekst{min-width:0;flex:1}
body.dashboardpagina .app-banner h2{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--inkt)}
body.dashboardpagina .app-banner p{margin:3px 0 0;max-width:62ch;font-size:.875rem;line-height:1.5;color:var(--inkt-2)}
body.dashboardpagina .app-b-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
body.dashboardpagina .app-b-later,body.dashboardpagina .app-link{padding:6px 4px;border:0;background:none;font:inherit;font-size:.875rem;font-weight:500;color:var(--inkt-2);cursor:pointer}
body.dashboardpagina .app-link{color:var(--merk,#4433E6)}
body.dashboardpagina .app-b-later:hover,body.dashboardpagina .app-link:hover{color:var(--inkt);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){body.dashboardpagina:not(.db-geladen) .app-b-icoon i{animation:app-pling 1.6s .8s ease-out 2}}
@keyframes app-pling{0%,100%{transform:scale(1)}20%{transform:scale(1.5)}40%{transform:scale(1)}}
@media (max-width:520px){body.dashboardpagina .app-banner{padding:16px}body.dashboardpagina .app-b-icoon{width:40px;height:40px}}
/* stappen om hem op het beginscherm te zetten (iPhone) */
.app-stappen{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:18px;background:#fff;color:var(--inkt,#0F1B2D);box-shadow:0 24px 64px -16px rgba(15,27,45,.45)}
.app-stappen::backdrop{background:rgba(15,27,45,.45);backdrop-filter:blur(2px)}
.app-st-in{display:grid;gap:0;padding:28px 24px 22px;text-align:left;font-family:var(--ui,inherit)}
.app-st-icoon img{display:block;width:64px;height:64px;border-radius:15px;box-shadow:0 8px 20px -8px rgba(15,18,24,.55)}
.app-stappen h2{margin:16px 0 0;font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.app-st-lood{margin:6px 0 0;font-size:.9375rem;line-height:1.5;color:#475569}
.app-stappen ol{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none}
.app-stappen li{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;line-height:1.5}
.app-st-nr{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:#EEF3FC;color:#4433E6;font-size:.8125rem;font-weight:600}
.app-st-ic{display:inline-grid;place-items:center;width:26px;height:26px;margin:0 2px;vertical-align:-7px;border-radius:7px;background:#F1F4F8;color:#4433E6}
.app-st-ic svg{width:16px;height:16px}
.app-st-klein{margin:18px 0 0;font-size:.8125rem;line-height:1.5;color:#8B90A0}
.app-stappen .knop{margin-top:18px;width:100%;justify-content:center}
/* instellingen bij Gegevens */
body.dashboardpagina .app-g-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
body.dashboardpagina .app-g-kop .db-pil{flex:none;margin-top:2px}
body.dashboardpagina .app-g-uitleg{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--canvas);font-size:.875rem;line-height:1.5;color:var(--inkt-2)}
body.dashboardpagina .app-g-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
body.dashboardpagina .app-g-knoppen:empty{display:none}
body.dashboardpagina .app-g-soorten{display:grid;gap:0;margin:20px 0 0;padding:0;border:0}
body.dashboardpagina .app-g-soorten legend{margin-bottom:6px;padding:0;font-size:.8125rem;font-weight:600;color:var(--inkt-3)}
body.dashboardpagina .app-schakel{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--lijn);cursor:pointer}
body.dashboardpagina .app-schakel:first-of-type{border-top:0}
body.dashboardpagina .app-schakel span{display:grid;gap:2px;font-size:.9375rem}
body.dashboardpagina .app-schakel strong{font-weight:500;color:var(--inkt)}
body.dashboardpagina .app-schakel small{font-size:.8125rem;color:var(--inkt-3)}
body.dashboardpagina .app-schakel input{appearance:none;-webkit-appearance:none;position:relative;width:40px;height:24px;min-height:0;margin:0;padding:0;flex:none;border:0;border-radius:999px;background:#D7DCE4;cursor:pointer;transition:background .2s}
body.dashboardpagina .app-schakel input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,27,45,.25);transition:transform .2s}
body.dashboardpagina .app-schakel input:checked{background:#12B76A}
body.dashboardpagina .app-schakel input:checked::after{transform:translateX(16px)}
body.dashboardpagina .app-schakel input:focus-visible{outline:2px solid var(--merk,#4433E6);outline-offset:2px}
body.dashboardpagina .app-g-apparaten{margin-top:18px;padding-top:16px;border-top:1px solid var(--lijn)}
body.dashboardpagina .app-g-apparaten h3{margin:0;font-size:.8125rem;font-weight:600;color:var(--inkt-3)}
body.dashboardpagina .app-g-apparaten ul{margin:8px 0 0;padding:0;list-style:none}
body.dashboardpagina .app-g-apparaten li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:.9375rem;color:var(--inkt)}
body.dashboardpagina .app-g-apparaten small{margin-left:8px;font-size:.8125rem;color:var(--inkt-3)}
/* geopend als app: onder de statusbalk en de thuisbalk van de iPhone blijven */
@media (display-mode:standalone){body.dashboardpagina .db-kop{padding-top:env(safe-area-inset-top)}}
@media (max-width:760px){
  /* telefoon: de ster staat rechtsboven, dus kop en ondertitel houden die hoek vrij */
  body.dashboardpagina .db-titel h1,body.dashboardpagina .db-titel .db-lood,body.dashboardpagina .db-titel .db-datum{max-width:calc(100% - 92px)}
  body.dashboardpagina .app-g-kop{flex-direction:column;gap:8px}
}
/* homepagina, dashboardsectie: telefoon met meldingen vóór het schermbeeld */
.dash-telefoon{position:absolute;right:5%;bottom:5%;z-index:2;width:clamp(150px,40%,290px);height:auto;filter:drop-shadow(0 28px 36px rgba(15,18,24,.32)) drop-shadow(0 8px 12px rgba(15,18,24,.18));transition:transform .6s var(--soepel)}
.zelf-vlak:hover .dash-telefoon{transform:translate(6px,-8px) rotate(1deg)}
@media (max-width:900px){.dash-telefoon{right:5%;bottom:5%;width:34%}}
@media (prefers-reduced-motion:reduce){.dash-telefoon{transition:none}.zelf-vlak:hover .dash-telefoon{transform:none}}
/* ================================================================ app-pagina (app.py) + knop in de voet */
.voet-app{display:flex;align-items:center;gap:14px;max-width:380px;margin-top:24px;padding:12px 16px 12px 12px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:background .2s}
.voet-app:hover{background:rgba(255,255,255,.12)}
.voet-app img{width:44px;height:44px;border-radius:11px;flex:none}
.voet-app span{display:grid;gap:2px;flex:1;min-width:0;line-height:1.3}
.voet-app strong{font-size:.9375rem;font-weight:700}
.voet-app small{font-size:.8125rem;color:rgba(255,255,255,.7)}
.voet-app>svg{width:18px;height:18px;flex:none;opacity:.7}

/* app-pagina (app.py): hero met telefoon, drie meldingen, het dashboard op drie telefoons, installeren in beeld */
.apppagina{--ap-navy:#0F1218}
.ap-kop{padding-top:clamp(20px,3vw,40px);overflow:hidden}
.ap-kop-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
.ap-icoon{display:flex;align-items:center;gap:14px;margin:18px 0 0}
.ap-icoon img{width:64px;height:64px;border-radius:15px;box-shadow:0 10px 24px -10px rgba(15,18,24,.55)}
.ap-icoon span{display:grid;font-size:.875rem;color:var(--zacht)}
.ap-icoon strong{font-size:1.0625rem;color:var(--petrol)}
.ap-kop h1{margin:18px 0 0;max-width:15ch}
.ap-lood{margin:16px 0 0;max-width:54ch;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;color:var(--tekst-zacht,#475569)}
.ap-vinkjes{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;padding:0;list-style:none;font-size:.9375rem;font-weight:600;color:var(--petrol)}
.ap-vinkjes li{display:flex;align-items:center;gap:8px}
.ap-vinkjes svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#E3F5EB;color:#16794A}
.ap-actie{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.ap-qrkaart{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.06),0 12px 28px -14px rgba(15,18,24,.3)}
.ap-qrcode svg{display:block;width:76px;height:76px}
.ap-qrkaart p{display:grid;max-width:22ch;margin:0;font-size:.8125rem;line-height:1.45;color:var(--zacht)}
.ap-qrkaart strong{font-size:.9375rem;color:var(--petrol)}
.ap-held{position:relative;display:grid;place-items:center;padding:12px 0 24px}
.ap-held::before{content:"";position:absolute;inset:6% -10% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(29,95,214,.18),rgba(143,132,255,.08) 55%,transparent 75%);z-index:-1}
.ap-held-tel{width:min(100%,340px);height:auto;filter:drop-shadow(0 34px 44px rgba(15,18,24,.32)) drop-shadow(0 8px 14px rgba(15,18,24,.16))}
.ap-zweef{position:absolute;left:-4%;top:29%;width:min(76%,300px);filter:drop-shadow(0 18px 30px rgba(15,18,24,.28))}
.ap-zweef .ap-m{background:rgba(255,255,255,.94);backdrop-filter:blur(16px)}
@media (prefers-reduced-motion:no-preference){.ap-zweef{animation:ap-zweef 6s ease-in-out infinite}}
@keyframes ap-zweef{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(-1deg)}}
/* een melding zoals op het vergrendelscherm */
.ap-m{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:start;padding:12px 14px 13px 12px;border-radius:20px;background:rgba(245,247,252,.86);backdrop-filter:blur(20px) saturate(1.5);color:#0F1B2D;text-align:left;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.ap-m img{width:38px;height:38px;border-radius:9px;margin-top:1px}
.ap-m p{margin:0;font-size:.875rem;line-height:1.32;letter-spacing:-.005em}
.ap-m .ap-m-kop{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.ap-m .ap-m-kop small{font-size:.8125rem;font-weight:400;color:rgba(15,27,45,.5)}
.ap-m .ap-m-t{font-weight:600}
/* drie momenten */
.ap-momenten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin:clamp(24px,3vw,40px) 0 0;padding:0;list-style:none}
.ap-momenten li{display:flex;flex-direction:column;padding:12px 12px 24px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.05),0 18px 40px -24px rgba(15,18,24,.35)}
.ap-scherm{position:relative;display:grid;align-items:center;min-height:180px;padding:22px 16px;border-radius:16px;background:radial-gradient(120% 90% at 0% 0%,#fff 0%,rgba(255,255,255,0) 55%),linear-gradient(160deg,#EDF2FA,#E2E9F4);overflow:hidden}
.ap-scherm::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(15,18,24,.07) 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
.ap-scherm .ap-m{position:relative;background:#fff;backdrop-filter:none;box-shadow:0 1px 2px rgba(15,27,45,.06),0 14px 30px -14px rgba(15,18,24,.3)}
.ap-momenten h3{margin:20px 12px 0;font-size:1.1875rem}
.ap-momenten>li>p{margin:6px 12px 0;font-size:.9375rem;line-height:1.55;color:var(--tekst-zacht,#475569)}
/* het dashboard op drie telefoons */
.ap-telefoons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,40px);margin:clamp(28px,3.4vw,48px) 0 0;padding:0;list-style:none;text-align:center}
.ap-telefoons img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;filter:drop-shadow(0 26px 34px rgba(15,18,24,.24)) drop-shadow(0 6px 10px rgba(15,18,24,.12))}
.ap-telefoons li:nth-child(2) img{transform:translateY(-22px)}
.ap-telefoons h3{margin:22px 0 0;font-size:1.1875rem}
.ap-telefoons p{max-width:30ch;margin:6px auto 0;font-size:.9375rem;line-height:1.55;color:var(--tekst-zacht,#475569)}
/* installeren */
.ap-tabs{margin-top:clamp(24px,3vw,36px)}
.ap-tablijst{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:#E7ECF4;box-shadow:inset 0 1px 2px rgba(15,27,45,.06)}
.ap-tablijst button{min-width:120px;min-height:42px;padding:0 18px;border:0;border-radius:10px;background:none;font:inherit;font-weight:600;color:var(--zacht);cursor:pointer}
.ap-tablijst button[aria-selected=true]{background:#fff;color:var(--petrol);box-shadow:0 1px 2px rgba(15,27,45,.08),0 4px 12px -6px rgba(15,18,24,.25)}
.ap-tablijst button:not([aria-selected=true]):hover{color:var(--petrol)}
.ap-tablijst button:focus-visible{outline:2px solid var(--koraal);outline-offset:2px}
.ap-paneel{margin-top:24px}
.ap-stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin:0;padding:0;list-style:none}
.ap-stappen.ap-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-stappen.ap-n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.ap-stappen figure{margin:0}
.ap-stappen figcaption{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:.9375rem;line-height:1.55;color:var(--petrol)}
.ap-nr{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#EAF1FE;color:#4433E6;font-size:.8125rem;font-weight:700;box-shadow:inset 0 0 0 1px #D6E4FB}
.ap-noot{margin:20px 0 0;max-width:70ch;font-size:.875rem;line-height:1.55;color:var(--zacht)}
.ap-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
.ap-knoppen span{font-size:.9375rem;color:var(--zacht)}
.ap-vragen-wrap{max-width:820px}
.ap-vragen-wrap h2{margin-bottom:20px}
/* nagebouwde schermpjes */
.ap-mock{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3.4;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,#F6F6F8,#ECECF0);box-shadow:inset 0 0 0 1px #E1E6EE;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#0F1B2D;text-align:left}
.ap-mock svg{width:18px;height:18px}
.ap-mock .aan{position:relative;color:#4433E6}
.ap-mock .aan::after{content:"";position:absolute;inset:-5px;border-radius:12px;box-shadow:0 0 0 2px #8F84FF,0 0 0 7px rgba(143,132,255,.25)}
@media (prefers-reduced-motion:no-preference){.ap-mock .aan::after{animation:ap-wijs 2.2s ease-in-out infinite}}
@keyframes ap-wijs{0%,100%{box-shadow:0 0 0 2px #8F84FF,0 0 0 7px rgba(143,132,255,.25)}50%{box-shadow:0 0 0 2px #8F84FF,0 0 0 12px rgba(143,132,255,0)}}
.ms-pagina{position:absolute;inset:18px 18px auto;display:grid;gap:8px}
.ms-pagina i{display:block;height:10px;border-radius:5px;background:#DCE2EB}.ms-pagina i:first-child{width:46%;height:14px;background:#C9D3E2}.ms-pagina i.kort{width:70%}
.ms-balk{margin:0 10px 10px;padding:9px 10px 8px;border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px -6px rgba(15,27,45,.25)}
.ms-url{display:block;padding:6px 10px;border-radius:9px;background:#EEF1F5;font-size:.75rem;text-align:center;color:#334155}
.ms-knoppen{display:flex;justify-content:space-between;margin-top:8px;padding:0 4px;color:#4433E6}
.ms-knoppen span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px}
.ap-mock-delen{justify-content:flex-end;padding:0 10px}
.md-kop{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px 16px 0 0;background:#fff;border-bottom:1px solid #EEF1F5}
.md-kop img{width:32px;height:32px;border-radius:8px}.md-kop span{display:grid;font-size:.75rem;color:#8B90A0}.md-kop strong{font-size:.8125rem;color:#0F1B2D}
.ap-mock-delen ul{margin:0;padding:4px 0;list-style:none;background:#fff}
.ap-mock-delen li{display:flex;justify-content:space-between;align-items:center;margin:0 6px;padding:8px 10px;font-size:.8125rem;border-radius:9px}
.ap-mock-delen li.aan{background:#EEF4FF;font-weight:600}
.ap-mock-thuis{justify-content:space-between;padding:16px 14px 10px;background:radial-gradient(90% 70% at 20% 0%,#2F6BD6,transparent 65%),linear-gradient(165deg,#2E2580,#0F1218 60%,#0F1218)}
.mt-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px;justify-items:center}
.mt-app{width:34px;height:34px;border-radius:9px;background:var(--k,#E9EEF6);opacity:.55}
.mt-ts{position:relative;opacity:1;background:none}
.mt-ts img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 2px #8F84FF,0 0 0 7px rgba(143,132,255,.3)}
.mt-ts b{position:absolute;top:38px;left:50%;transform:translateX(-50%);font-size:.625rem;font-weight:500;color:#fff;white-space:nowrap}
.mt-dock{display:flex;justify-content:space-around;padding:8px;border-radius:16px;background:rgba(255,255,255,.18)}
.mt-dock span{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.5)}
.ap-mock-vraag{justify-content:center;align-items:center;background:linear-gradient(180deg,#ECECF0,#DCE2EB)}
.mv-dialoog{width:80%;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.95);box-shadow:0 10px 30px -10px rgba(15,27,45,.35);text-align:center}
.mv-dialoog p{display:grid;gap:4px;margin:0;padding:14px 14px 12px;font-size:.6875rem;line-height:1.35;color:#475569}
.mv-dialoog strong{font-size:.8125rem;color:#0F1B2D}
.mv-knoppen{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #E3E8F0}
.mv-knoppen span{padding:9px 4px;font-size:.8125rem;color:#4433E6}
.mv-knoppen span+span{border-left:1px solid #E3E8F0}
.mv-knoppen span.aan{font-weight:600}
.mv-knoppen span.aan::after{inset:3px;border-radius:9px}
.ap-mock-chrome{justify-content:flex-start;background:#fff}
.mc-balk{display:flex;align-items:center;gap:8px;padding:10px;background:#F1F3F6}
.mc-balk .ms-url{flex:1;background:#fff;text-align:left}
.mc-menu{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#334155}
.mc-lijst{position:absolute;right:10px;top:46px;width:62%;margin:0;padding:6px 0;list-style:none;border-radius:12px;background:#fff;box-shadow:0 10px 30px -8px rgba(15,27,45,.3)}
.mc-lijst li{display:flex;align-items:center;gap:8px;margin:0 6px;padding:7px 10px;font-size:.75rem;border-radius:8px}
.mc-lijst li.aan{background:#EEF4FF;font-weight:600}
.ap-mock-install{justify-content:flex-end;background:linear-gradient(180deg,#ECECF0,#C9D3E2)}
.mi-blad{border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -8px 24px -12px rgba(15,27,45,.3)}
.mi-kop{display:flex;align-items:center;gap:12px;padding:16px 16px 14px}
.mi-kop img{width:40px;height:40px;border-radius:10px}.mi-kop span{display:grid;font-size:.75rem;color:#8B90A0}.mi-kop strong{font-size:.875rem;color:#0F1B2D}
.mi-knoppen{border-top:1px solid #EEF1F5;text-align:center}
.ap-mock-andvraag{justify-content:center;align-items:center;background:linear-gradient(180deg,#ECECF0,#DCE2EB)}
.ma-dialoog{display:grid;gap:6px;justify-items:center;width:82%;padding:16px 14px 12px;border-radius:22px;background:#fff;box-shadow:0 10px 30px -10px rgba(15,27,45,.35);text-align:center}
.ma-dialoog svg{width:22px;height:22px;color:#4433E6}
.ma-dialoog p{margin:0 0 4px;font-size:.75rem;line-height:1.4}
.ma-dialoog span{width:100%;padding:8px;border-radius:999px;font-size:.75rem;background:#F1F3F6}
.ma-dialoog span.aan{background:#4433E6;color:#fff;font-weight:600}
.ma-dialoog span.aan::after{border-radius:999px}
.ap-mock-pc{justify-content:flex-start;background:#fff}
.mp-balk{display:flex;align-items:center;gap:6px;padding:10px;background:#F1F3F6}
.mp-stip{width:9px;height:9px;border-radius:50%;background:#D4DAE3}
.mp-balk .ms-url{flex:1;margin-left:6px;background:#fff;text-align:left}
.mp-inst{display:grid;place-items:center;width:28px;height:28px;border-radius:8px}
.ap-mock-pc img{display:block;width:100%;height:auto}
.ap-mock-qr{justify-content:center;align-items:center;background:#fff}
.ap-mock-qr svg{width:58%;height:auto}
@media (max-width:1000px){.ap-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}.ap-stappen.ap-n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.ap-kop-in{grid-template-columns:minmax(0,1fr)}.ap-kop h1{max-width:none}.ap-qrkaart{display:none}.ap-held-tel{width:min(64%,260px)}.ap-zweef{display:none}
  .ap-momenten{grid-template-columns:minmax(0,1fr)}
  .ap-telefoons{display:flex;gap:16px;margin-inline:calc(var(--rand,16px) * -1);padding:8px var(--rand,16px) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.ap-telefoons::-webkit-scrollbar{display:none}
  .ap-telefoons li{flex:0 0 70%;scroll-snap-align:center}.ap-telefoons li:nth-child(2) img{transform:none}
  .ap-stappen,.ap-stappen.ap-n3,.ap-stappen.ap-n2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.ap-stappen,.ap-stappen.ap-n3,.ap-stappen.ap-n2{grid-template-columns:minmax(0,1fr);gap:28px}.ap-mock{aspect-ratio:16/10}.ap-tablijst{display:flex}.ap-tablijst button{flex:1;min-width:0;padding:0 8px}
  .ap-mock-qr{display:none}}
/* slapende kaart (dashboard.js slaapHtml): rustig oranje, geen alarmrood */
body.dashboardpagina .db-slaap{padding:16px 18px;border-radius:var(--rk);background:#FFFBF2;box-shadow:inset 0 0 0 1px #F3DFB0,var(--s1)}
body.dashboardpagina .db-slaap-kop{display:flex;gap:14px;align-items:flex-start}
body.dashboardpagina .db-slaap-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:11px;background:#FDEBC4;color:#9A5B00}
body.dashboardpagina .db-slaap-ic svg{width:20px;height:20px}
body.dashboardpagina .db-slaap h2{margin:0;font-size:1rem;font-weight:600;color:var(--inkt)}
body.dashboardpagina .db-slaap-kop p{margin:2px 0 0;font-size:.875rem;color:var(--inkt-2)}
body.dashboardpagina .db-slaap ul{margin:12px 0 0;padding:0;list-style:none}
body.dashboardpagina .db-slaap li{display:flex;align-items:center;gap:14px;padding:12px 0 2px;border-top:1px solid #F3E6C8}
body.dashboardpagina .db-slaap li .db-beeld{width:44px;height:44px;flex:none}
body.dashboardpagina .db-slaap-tekst{display:grid;min-width:0;flex:1}
body.dashboardpagina .db-slaap-tekst strong{font-size:.9375rem;font-weight:600;color:var(--inkt)}
body.dashboardpagina .db-slaap-tekst small{font-size:.8125rem;color:var(--inkt-2)}
body.dashboardpagina .db-slaap-knoppen{display:flex;gap:8px;flex:none}
body.dashboardpagina .db-pil-stil{background:#FDEBC4;color:#8A5200}
@media (max-width:620px){body.dashboardpagina .db-slaap li{flex-wrap:wrap}body.dashboardpagina .db-slaap-knoppen{width:100%;padding-left:58px}}
/* heel smalle telefoons (iPhone SE, 320 px): niets mag buiten beeld steken */
@media (max-width:360px){
  .merk-naam small{display:none}
  .kop-in{gap:8px}
  .menuknop{padding:10px}
  .erbij-prijs,.erbij-prijs > *{white-space:normal}
  .specs th{white-space:normal;width:38%}
  .specs th,.specs td{padding:12px 12px;overflow-wrap:anywhere}
  .knop{max-width:100%;white-space:normal;text-align:center}
}
.veld-tip{margin:6px 0 0;font-size:.875rem;color:var(--zacht)}
.veld-tip-knop{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--koraal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kl-beheer{margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn)}
.kl-beheer summary{cursor:pointer;font-size:.875rem;font-weight:600;color:var(--petrol)}
.kl-beheer .veld{margin-top:12px}.kl-beheer .knop{margin-top:8px}
.vk-terug{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vk-form.vk-bezig{opacity:.6;transition:opacity .2s}
.vkcat-hero .rs-hero-in{padding-bottom:clamp(40px,5vw,80px)}   /* de knoppen mogen nooit tegen de onderrand van het vlak staan */

/* categoriepagina's: "Ontwerpen voor andere vakken" als tegels met drie ontwerpen in 3D (dezelfde tegels als op de hoofdpagina, vier naast elkaar) */
.vk-cats-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vk-cats-4 a{padding:10px 10px 18px}
.vk-cats-4 .vk-cat-tekst{padding:12px 6px 0}.vk-cats-4 .vk-cat-tekst strong{font-size:1rem}.vk-cats-4 .vk-cat-tekst small{font-size:.8125rem}
.vk-cats-4 .vk-cat-n{padding:10px 6px 0;font-size:.8125rem}
@media (max-width:900px){.vk-cats-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:420px){.vk-cats-4 .vk-cat-tekst small{display:none}}
.vk-cat-tekst{align-content:start}   /* één regel vakken staat net zo hoog als twee */

/* categoriepagina's: hoe iemand uit het vak de kaart gebruikt; rechts een echt voorbeeldprofiel op een telefoon (render/profielen) */
.vkcat-gids-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.vkcat-gids h2{margin:0 0 24px;font-size:clamp(1.75rem,2.8vw,2.5rem);color:var(--petrol);text-wrap:balance}
.vkcat-gids-tekst p{margin:0 0 16px;max-width:36em;font-size:1.0625rem;line-height:1.7;color:var(--tekst)}
.vkcat-voorbeeld{margin-top:32px;max-width:36em}
.vkcat-voorbeeld h3{margin:0 0 4px;font-size:1.0625rem;color:var(--petrol)}
.vkcat-voorbeeld dl{margin:0}
.vkcat-voorbeeld dl div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--perzik-diep)}
.vkcat-voorbeeld dt{font-size:.875rem;font-weight:700;color:var(--petrol)}
.vkcat-voorbeeld dd{margin:0;font-size:.9375rem;line-height:1.55;color:var(--tekst)}
.vkcat-tel{position:relative;margin:0;display:grid;justify-items:center;gap:14px}
.vkcat-tel::before{content:"";position:absolute;inset:8% -6% 10%;border-radius:50%;background:radial-gradient(closest-side,var(--perzik-diep),transparent);z-index:-1}
.vkcat-tel img{display:block;width:100%;max-width:360px;height:auto;filter:drop-shadow(0 30px 40px rgba(15,18,24,.18))}
.vkcat-tel figcaption{font-size:.875rem;font-weight:600;color:var(--zacht)}
@media (max-width:900px){.vkcat-gids-in{grid-template-columns:minmax(0,1fr)}.vkcat-tel img{max-width:300px}}
@media (max-width:480px){.vkcat-voorbeeld dl div{grid-template-columns:minmax(0,1fr)}}

/* "Hoe wil je bestellen?": op een smalle telefoon (of met een grotere systeemletter) passen twee keuzes niet naast elkaar.
   Dan onder elkaar, zodat de uitleg niet wordt afgekapt en de pijl niet over de tekst valt. */
.bestelkaart .route-keuze small{white-space:normal;overflow:visible;text-overflow:clip}   /* nooit afkappen: liever een tweede regel */
@media (max-width:640px){.bestelkaart .routes-rij{grid-template-columns:minmax(0,1fr)}}

/* Bestelroute "Alles aanpassen": duidelijk een knop naar de configurator, niet een uitgeschakelde keuze */
.bestelkaart a#pasaan{background:var(--wit);border-color:var(--perzik-rand);box-shadow:var(--schaduw-klein)}
.bestelkaart a#pasaan .rk-ic{background:var(--perzik-diep);color:var(--koraal-diep)}
.bestelkaart a#pasaan:hover{border-color:var(--koraal)}

/* Snelkeuze-tegels: een lange titel ("Google review bordjes") breekt netjes af in plaats van over de rand te lopen */
.snel-tegel > span:last-child{min-width:0}
.snel-tegel strong{white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
@media (min-width:560px){.snel-tegel{align-items:start;align-content:start}}

/* Branchepagina zonder grote foto: een opstelling van bordjes en pasjes (branches.json 'hero') */
.bh-groep{aspect-ratio:1/.86}
.bh-podium{position:absolute;left:6%;right:2%;bottom:4%;height:58%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none}
.bh-groep img{position:absolute;height:auto}
.bh-groep .bg-achter{right:6%;bottom:16%;width:44%}
.bh-groep .bg-staand{right:-1%;bottom:6%;width:25%}
.bh-groep .bg-voor{left:6%;bottom:2%;width:52%}
.bh-groep .bg-pasje{left:42%;bottom:0;width:40%}
.bh-groep .bh-label{left:0;top:2%}
.bh-in .bh-groep{margin:12px 0 28px}
@media (min-width:960px){.bh-in .bh-groep{align-self:center;margin:0 -3% 36px 2%}}

/* Deelknoppen onder de productfoto */
.deel.deel-onder{margin-top:22px;padding-top:18px;border-top:1px solid var(--lijn)}
.deel{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}
.deel-label{width:100%;text-align:center;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.deel-knop{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;border:1px solid var(--lijn);border-radius:999px;background:var(--wit);color:var(--petrol);font:inherit;font-size:.9375rem;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}
.deel-knop svg{width:18px;height:18px;flex:none}
.deel-knop:hover{border-color:var(--koraal);box-shadow:var(--schaduw-klein);transform:translateY(-1px)}
.deel-knop:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
.deel-wa{background:#25D366;border-color:#25D366;color:#fff}
.deel-wa:hover{background:#1EBE5A;border-color:#1EBE5A}
.deel-knop.aan{border-color:#1E9E57;color:#1E7A45}
.deel-veld{width:100%;max-width:340px;padding:8px 10px;border:1px solid var(--lijn);border-radius:var(--r-klein);font:inherit;font-size:.8125rem;color:var(--tekst)}
@media (prefers-reduced-motion:reduce){.deel-knop{transition:none}.deel-knop:hover{transform:none}}

/* Instagram in de footer en op de contactpagina */
.voet-ig,.ct-ig{display:inline-flex;align-items:center;gap:8px}
.voet-ig svg,.ct-ig svg{width:18px;height:18px;flex:none}
.voet ul li a.voet-ig,.ct-gegevens a.ct-ig{display:inline-flex;align-items:center;gap:8px}

.voet .voet-tweede{margin-top:28px}

/* Kennisartikelen: QR-tool en kopieerbare voorbeeldteksten */
.qt{margin:20px 0 32px;padding:22px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw-klein);display:grid;gap:12px}
.qt-label{font-weight:700;font-size:.9375rem;color:var(--petrol)}
.qt-rij{display:flex;gap:10px;flex-wrap:wrap}
.qt-rij input,.qt input{flex:1;min-width:220px;min-height:48px;padding:10px 14px;border:1.5px solid var(--lijn);border-radius:var(--r-veld);font:inherit;font-size:1rem;color:var(--tekst);background:var(--wit)}
.qt input:focus-visible{outline:3px solid var(--goud);outline-offset:1px}
.qt-melding{font-size:.875rem;color:var(--zacht)}
.qt-melding.fout{color:var(--fout)}.qt-melding.goed{color:#1E7A45}
.qt-uit{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px;align-items:start;margin-top:6px}
.qt-voorbeeld canvas{display:block;width:100%;height:auto;border-radius:var(--r-klein);box-shadow:0 0 0 1px var(--lijn)}
.qt-acties{display:grid;gap:10px}
.qt-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.qt-upsell{display:grid;gap:4px;margin-top:6px;padding:14px 16px;border-radius:var(--r-veld);background:var(--perzik);font-size:.9375rem}
.qt-upsell a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--koraal-diep);text-decoration:none}
.qt-upsell .kp{width:20px;height:20px}
@media (max-width:560px){.qt-uit{grid-template-columns:minmax(0,1fr)}.qt-voorbeeld{max-width:260px}}
.sj{margin:14px 0;border:1px solid var(--lijn);border-radius:var(--r-veld);background:var(--wit);overflow:hidden}
.sj figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--perzik);font-weight:700;font-size:.9375rem;color:var(--petrol)}
.sj-tekst{margin:0;padding:14px 16px;white-space:pre-line;font-size:1rem;line-height:1.6;color:var(--tekst)}
.sj-kopieer{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--lijn);border-radius:999px;background:var(--wit);color:var(--petrol);font:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}
.sj-kopieer svg{width:16px;height:16px}
.sj-kopieer.aan{border-color:#1E9E57;color:#1E7A45}
.sj-kopieer:focus-visible{outline:3px solid var(--goud);outline-offset:2px}

/* beheer: meldingen-knop + paneel (beheer-push.js) */
.adm-belknop{position:relative}
.adm-bel-stip{position:absolute;top:7px;left:23px;width:8px;height:8px;border-radius:50%;background:#1E8E3E;box-shadow:0 0 0 2px var(--wit)}
.adm-push-soorten{display:grid;gap:0;margin:18px 0 0;padding:0;list-style:none;border:1px solid var(--db-rand);border-radius:12px;overflow:hidden}
.adm-push-soorten li+li{border-top:1px solid var(--db-rand)}
.adm-push-soorten label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;cursor:pointer}
.adm-push-soorten input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#0F1218}
.adm-push-soorten strong{display:block;font-size:.9375rem;font-weight:600}
.adm-push-soorten small{display:block;font-size:.8125rem;color:#475569}
.adm-push-knoppen{display:grid;gap:8px;margin-top:20px}
.adm-push-knoppen .knop{width:100%;justify-content:center}
.adm-push-app{display:grid;gap:12px;margin-top:18px;padding:14px 16px;border-radius:12px;background:#EEF3FC;font-size:.9375rem;line-height:1.5;color:#0F1B2D}
.adm-push-app p{margin:0}.adm-push-app .knop{width:100%;justify-content:center}
.adm-blijf{margin:4px 0 0}.adm-blijf label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.9375rem;line-height:1.4}
.adm-blijf input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:#0F1218}.adm-blijf small{display:block;font-size:.8125rem;color:#475569}
.adm-toestellen{display:grid;gap:0;margin:8px 0 0;padding:0;list-style:none;border:1px solid var(--db-rand);border-radius:12px;overflow:hidden}
.adm-toestellen li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px;font-size:.875rem;line-height:1.35}
.adm-toestellen li+li{border-top:1px solid var(--db-rand)}.adm-toestellen small{display:block;color:#475569;font-size:.8125rem}
.adm-toestellen button{flex:none;min-height:36px;padding:6px 12px;border:1.5px solid var(--db-rand);border-radius:999px;background:#fff;color:#0F1B2D;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer}
.adm-push-sub{margin:22px 0 0;font-size:.9375rem;font-weight:600}
.adm-poortkaart .adm-blijf label{color:#0F1B2D;font-weight:500;font-size:.9375rem;align-items:center}
/* beheer op de telefoon: compacte cijfers, lijst over de volle breedte, rijen met productbeeld */
@media (max-width:700px){
  body.beheerpagina .adm-tegels{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important}
  body.beheerpagina .adm-tegels > .db-tegel{grid-column:auto!important;display:block;padding:14px 16px;border:0;border-radius:0;box-shadow:none;background:none}
  body.beheerpagina .adm-tegels > .db-tegel:nth-child(3){display:none!important}
  body.beheerpagina .adm-tegels > .db-tegel:nth-child(n+4){border-top:1px solid #ECECF0}
  body.beheerpagina .adm-tegels > .db-tegel:nth-child(even){border-left:0}body.beheerpagina .adm-tegels > .db-tegel:nth-child(2),body.beheerpagina .adm-tegels > .db-tegel:nth-child(5){border-left:1px solid #ECECF0}
  body.beheerpagina .adm-tegels .db-tegel-naam{margin:0;font-size:.8125rem;font-weight:500;color:#666B78}
  body.beheerpagina .adm-tegels .db-getal,body.beheerpagina .adm-tegels .adm-euro{margin:4px 0 0;font-size:1.5rem!important;line-height:1.15!important;font-weight:700;letter-spacing:-.02em}
  body.beheerpagina .adm-tegels .db-tegel-sub{margin:4px 0 0;font-size:.75rem;line-height:1.35;color:#8B90A0}
  body.beheerpagina .db-band-kpi{margin-top:16px}
  body.beheerpagina .adm-tabel{padding:0!important}
  body.beheerpagina .adm-tabel .adm-balk{padding:0 0 0 16px;border-bottom:1px solid #ECECF0}
  body.beheerpagina #adm-filter{gap:20px;width:100%;padding-right:16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  body.beheerpagina #adm-filter button{min-height:50px;font-size:.875rem}
  body.beheerpagina .adm-zoek{margin:0 16px 12px 0}
  body.beheerpagina .adm-zoek input{min-height:42px;font-size:16px}
  body.beheerpagina .adm-lijst a{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"duim klant prijs" "duim nr pil";gap:2px 12px;align-items:center;padding:14px 16px}
  body.beheerpagina .adm-lijst a > svg{display:none}
  body.beheerpagina .adm-lijst .adm-duimen{display:block;grid-area:duim;align-self:start;width:48px;height:48px}
  body.beheerpagina .adm-lijst .adm-duimen .db-beeld{display:grid;place-items:center;width:48px;height:48px;margin:0;border-radius:10px;background:#F1F4F9;overflow:hidden}
  body.beheerpagina .adm-lijst .adm-duimen .db-beeld ~ .db-beeld,body.beheerpagina .adm-lijst .adm-duimen small{display:none}
  body.beheerpagina .adm-lijst .adm-duimen img{width:42px;height:42px;object-fit:contain}
  body.beheerpagina .adm-lijst .adm-klant{grid-area:klant;min-width:0}
  body.beheerpagina .adm-lijst .adm-klant strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem}
  body.beheerpagina .adm-lijst .adm-klant small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666B78}
  body.beheerpagina .adm-lijst .adm-nr{grid-area:nr;display:flex;gap:0;min-width:0;white-space:nowrap;font-size:.75rem;color:#8B90A0}
  body.beheerpagina .adm-lijst .adm-nr strong{font-size:.75rem!important;font-weight:600!important;color:#666B78;letter-spacing:.01em}
  body.beheerpagina .adm-lijst .adm-nr small{font-size:.75rem}body.beheerpagina .adm-lijst .adm-nr small::before{content:"\00a0·\00a0"}
  body.beheerpagina .adm-lijst em{grid-area:prijs;font-size:.9375rem;align-self:end}
  body.beheerpagina .adm-lijst > li > a > .db-pil{grid-area:pil;justify-self:end;align-self:start;min-height:0;padding:2px 8px;font-size:.6875rem;font-weight:600}
  body.beheerpagina .adm-n{padding:14px 16px;background:none;text-align:center;font-size:.75rem;color:#8B90A0}
}
@media (max-width:460px){body.beheerpagina .adm-label{display:none}}
/* beheer op de telefoon: cijfertegels 2x2, ranglijst en lijstjes als rijen (naam over de volle breedte, balk en bedrag eronder) */
@media (max-width:700px){
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important}
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels) > .db-tegel{grid-column:auto!important;display:block;padding:14px 16px;border:0;border-radius:0;box-shadow:none;background:none}
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels) > .db-tegel:nth-child(n+3){border-top:1px solid #ECECF0}
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels) > .db-tegel:nth-child(even){border-left:1px solid #ECECF0}
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels) .db-tegel-naam{margin:0;font-size:.8125rem;font-weight:500;color:#666B78}
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels) .db-getal{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:4px 0 0;font-size:1.375rem!important;line-height:1.15!important;font-weight:700;letter-spacing:-.02em}
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels) .db-trend{font-size:.6875rem}
  body.beheerpagina .db-band-kpi .db-tegels:not(.adm-tegels) .db-tegel-sub{margin:4px 0 0;font-size:.75rem;line-height:1.35;color:#8B90A0}
  body.beheerpagina .cf-maanden li:not(.nu) b{visibility:hidden}
  body.beheerpagina .cf-top thead{display:none}
  body.beheerpagina .cf-top,body.beheerpagina .cf-top tbody,body.beheerpagina .cf-klein,body.beheerpagina .cf-klein tbody{display:block;width:100%}
  body.beheerpagina .cf-top tr,body.beheerpagina .cf-klein tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:14px 16px;border-top:1px solid #ECECF0}
  body.beheerpagina .cf-top tr{grid-template-areas:"naam naam" "balk omzet"}
  body.beheerpagina .cf-klein tr{grid-template-areas:"naam omzet" "balk balk";padding-inline:0}
  body.beheerpagina .cf-klein tr:first-child{border-top:0}
  body.beheerpagina .cf-top th,body.beheerpagina .cf-top td,body.beheerpagina .cf-klein th,body.beheerpagina .cf-klein td{display:block;width:auto!important;padding:0!important;border:0!important;white-space:normal;text-align:left}
  body.beheerpagina .cf-top th,body.beheerpagina .cf-klein th{grid-area:naam;min-width:0}
  body.beheerpagina .cf-top td.db-smal-weg{display:none}
  body.beheerpagina .cf-top td:nth-of-type(1){grid-area:balk;display:flex;align-items:center;gap:10px;padding-left:88px!important}
  body.beheerpagina .cf-top td:last-child,body.beheerpagina .cf-klein td:last-child{grid-area:omzet;justify-self:end;white-space:nowrap}
  body.beheerpagina .cf-klein td:nth-of-type(1){grid-area:balk}
  body.beheerpagina .cf-top .db-balk,body.beheerpagina .cf-klein .db-balk{flex:1;width:100%;min-width:0}
  body.beheerpagina .cf-top td:nth-of-type(1) b::after{content:" st.";font-weight:500;color:#8B90A0}
  body.beheerpagina .st-rangcel{display:flex;align-items:center;gap:12px}
  body.beheerpagina .st-rangcel .st-rangnr{width:16px;flex:none;text-align:center}
  body.beheerpagina .st-rangcel .db-beeld{width:48px;height:48px;flex:none;margin:0;border-radius:10px}
  body.beheerpagina .st-rangcel strong,body.beheerpagina .cf-klein th strong{display:block;font-size:.9375rem;line-height:1.3}
  body.beheerpagina .st-rangcel small,body.beheerpagina .cf-klein th small{display:block;font-size:.8125rem;color:#8B90A0}
  body.beheerpagina .st-scroll{overflow:visible}
}
/* beheer op de telefoon: btw- en klantentabel als rijen */
@media (max-width:700px){
  body.beheerpagina .btw-tabel thead,body.beheerpagina #adm-klanten .db-tabel thead{display:none}
  body.beheerpagina .btw-tabel,body.beheerpagina .btw-tabel tbody,body.beheerpagina #adm-klanten .db-tabel,body.beheerpagina #adm-klanten .db-tabel tbody{display:block;width:100%}
  body.beheerpagina .btw-tabel th,body.beheerpagina .btw-tabel td,body.beheerpagina #adm-klanten .db-tabel th,body.beheerpagina #adm-klanten .db-tabel td{display:block;width:auto!important;padding:0!important;border:0!important;background:none;white-space:normal;text-align:left}
  body.beheerpagina .btw-tabel tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 0;padding:14px 0;border-top:1px solid #ECECF0}
  body.beheerpagina .btw-tabel tr:first-child{border-top:0}
  body.beheerpagina .btw-tabel tr::after{content:"";order:3;flex-basis:100%;height:0}
  body.beheerpagina .btw-tabel th{order:1;flex:1 1 0;min-width:0;padding-right:12px!important}
  body.beheerpagina .btw-tabel th strong{display:block;font-size:.9375rem;line-height:1.3}
  body.beheerpagina .btw-tabel th small{display:block;font-size:.8125rem;color:#8B90A0}
  body.beheerpagina .btw-tabel td:last-child{order:2;text-align:right;white-space:nowrap}
  body.beheerpagina .btw-tabel td:last-child b{font-size:.9375rem}
  body.beheerpagina .btw-tabel td:last-child::before{content:"btw";display:block;font-size:.6875rem;font-weight:500;color:#8B90A0}
  body.beheerpagina .btw-tabel td:not(:last-child){order:4;font-size:.8125rem;color:#666B78;white-space:nowrap}
  body.beheerpagina .btw-tabel td:nth-of-type(1)::after{content:" bestellingen"}
  body.beheerpagina .btw-tabel td:nth-of-type(2)::before,body.beheerpagina .btw-tabel td:nth-of-type(3)::before{content:"\00a0·\00a0"}
  body.beheerpagina .btw-tabel td:nth-of-type(2)::after{content:" incl."}
  body.beheerpagina .btw-tabel td:nth-of-type(3)::after{content:" excl."}
  body.beheerpagina .btw-tabel tr.btw-som{margin-top:4px;padding:14px 12px;border-top:0;border-radius:10px;background:#F6F6F8}
  body.beheerpagina #adm-klanten .db-tabel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"naam bedrag" "naam aantal";align-items:start;gap:2px 14px;padding:14px 0;border-top:1px solid #ECECF0}
  body.beheerpagina #adm-klanten .db-tabel tr:first-child{border-top:0}
  body.beheerpagina #adm-klanten .db-tabel th{grid-area:naam;min-width:0}
  body.beheerpagina #adm-klanten .db-tabel th small{display:block;overflow:hidden;text-overflow:ellipsis;font-size:.8125rem;line-height:1.45}
  body.beheerpagina #adm-klanten .db-tabel td.db-smal-weg{display:none}
  body.beheerpagina #adm-klanten .db-tabel td:nth-of-type(4){grid-area:bedrag;justify-self:end;white-space:nowrap}
  body.beheerpagina #adm-klanten .db-tabel td:nth-of-type(2){grid-area:aantal;justify-self:end;font-size:.75rem;color:#8B90A0;white-space:nowrap}
  body.beheerpagina #adm-klanten .db-tabel td:nth-of-type(2)::after{content:"× besteld"}
}
/* beheer en dashboard op de telefoon: titel over de volle breedte, anders breekt "Klant sinds …" en de naam per woord af */
@media (max-width:700px){.dashboardpagina .db-titel-rij>div:first-child{flex:1 1 100%;min-width:0}}
/* beheer op de telefoon: kaarten en scans bij een klant als rijen (kaart boven, link eronder, scans rechts) */
@media (max-width:700px){
  body.beheerpagina .kl-kaarttabel thead{display:none}
  body.beheerpagina .kl-kaarttabel,body.beheerpagina .kl-kaarttabel tbody{display:block;width:100%}
  body.beheerpagina .kl-kaarttabel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kaart scans" "link link";align-items:start;gap:6px 14px;padding:14px 0;border-top:1px solid #ECECF0}
  body.beheerpagina .kl-kaarttabel tr:first-child{border-top:0}
  body.beheerpagina .kl-kaarttabel th,body.beheerpagina .kl-kaarttabel td{display:block;width:auto!important;max-width:none!important;padding:0!important;border:0!important;background:none;text-align:left}
  body.beheerpagina .kl-kaarttabel th{grid-area:kaart;min-width:0;white-space:normal}
  body.beheerpagina .kl-kaarttabel th strong{display:block;font-size:.9375rem;line-height:1.3;overflow-wrap:anywhere}
  body.beheerpagina .kl-kaarttabel th small{display:block;font-size:.8125rem;color:#8B90A0}
  body.beheerpagina .kl-kaarttabel td.kl-link{grid-area:link;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem}
  body.beheerpagina .kl-kaarttabel td:nth-child(3){grid-area:scans;justify-self:end;white-space:nowrap;text-align:right}
  body.beheerpagina .kl-kaarttabel td:nth-child(3) .db-balk{display:none}
  body.beheerpagina .kl-kaarttabel td:nth-child(3) b{min-width:0;font-size:.9375rem}
  body.beheerpagina .kl-kaarttabel td:nth-child(3)::after{content:"scans, 30 d.";display:block;font-size:.6875rem;font-weight:500;color:#8B90A0}
  body.beheerpagina .kl-kaarttabel td.db-smal-weg{display:none}
}
@media (max-width:700px){body.beheerpagina .btw-tabel tr.btw-som th,body.beheerpagina .btw-tabel tr.btw-som td{background:none!important;box-shadow:none!important}}
/* beheer op de telefoon: kortingscodes als rijen, bestelregels met de gegevens over de volle breedte */
@media (max-width:700px){
  body.beheerpagina .kc-tabel thead{display:none}
  body.beheerpagina .kc-tabel,body.beheerpagina .kc-tabel tbody{display:block;width:100%}
  body.beheerpagina .kc-tabel tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"code korting status" "gebruikt gebruikt acties";align-items:center;gap:8px 12px;padding:14px 16px;border-top:1px solid #ECECF0}
  body.beheerpagina .kc-tabel tr:first-child{border-top:0}
  body.beheerpagina .kc-tabel th,body.beheerpagina .kc-tabel td{display:block;width:auto!important;padding:0!important;border:0!important;white-space:nowrap;text-align:left}
  body.beheerpagina .kc-tabel th{grid-area:code}
  body.beheerpagina .kc-tabel th small{display:block;font-size:.75rem;color:#8B90A0}
  body.beheerpagina .kc-tabel td:nth-of-type(1){grid-area:korting;font-weight:700}
  body.beheerpagina .kc-tabel td:nth-of-type(2){grid-area:gebruikt;font-size:.8125rem;color:#666B78}
  body.beheerpagina .kc-tabel td:nth-of-type(2)::after{content:" gebruikt"}
  body.beheerpagina .kc-tabel td.db-smal-weg{display:none}
  body.beheerpagina .kc-tabel td:nth-of-type(4){grid-area:status;justify-self:end}
  body.beheerpagina .kc-tabel td.kc-acties{grid-area:acties;display:flex;gap:8px;justify-self:end}
  body.beheerpagina .kc-tabel td.kc-acties .adm-kopie{margin:0}
  body.beheerpagina .adm-regels > li{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"beeld kop" "gegevens gegevens";align-items:center;gap:14px}
  body.beheerpagina .adm-regels > li > .db-beeld{grid-area:beeld;width:64px;height:64px;margin:0}
  body.beheerpagina .adm-regels > li > div{display:contents}
  body.beheerpagina .adm-regels > li > div > h3{grid-area:kop;margin:0}
  body.beheerpagina .adm-regels > li > div > dl{grid-area:gegevens;margin:0}
  body.beheerpagina .adm-linkrij{display:flex;gap:8px;align-items:center}
  body.beheerpagina .adm-linkrij .adm-link{flex:1;min-width:0}
}
@media (max-width:700px){body.beheerpagina .kc-tabel td:nth-of-type(1),body.beheerpagina .kc-tabel td:nth-of-type(4){align-self:start}}
/* beheer op de telefoon: nieuwsbrief-tabellen als rijen */
@media (max-width:700px){
  body.beheerpagina .nb-tabel thead{display:none}
  body.beheerpagina .nb-tabel,body.beheerpagina .nb-tabel tbody{display:block;width:100%}
  body.beheerpagina .nb-tabel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mail rechts1" "datum rechts2";align-items:center;gap:6px 12px;padding:14px 16px;border-top:1px solid #ECECF0}
  body.beheerpagina .nb-tabel tr:first-child{border-top:0}
  body.beheerpagina .nb-tabel th,body.beheerpagina .nb-tabel td{display:block;width:auto!important;padding:0!important;border:0!important;white-space:nowrap;text-align:left}
  body.beheerpagina .nb-tabel th{grid-area:mail;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.9375rem}
  body.beheerpagina .nb-tabel td:nth-of-type(1){grid-area:datum;font-size:.8125rem;color:#666B78}
  body.beheerpagina .nb-tabel td.db-smal-weg{display:none}
  body.beheerpagina .nb-tabel td:nth-of-type(3){grid-area:rechts1;justify-self:end}
  body.beheerpagina .nb-tabel td:nth-of-type(2):last-child{grid-area:rechts1;justify-self:end;font-weight:700}
  body.beheerpagina .nb-tabel td.kc-acties{grid-area:rechts2;justify-self:end}
  body.beheerpagina .nb-tabel td.kc-acties .adm-kopie{margin:0}
}

/* zakelijk bestellen: btw-nummer (afrekenen) en zakelijke gegevens in het beheer */
.af-zakelijk{margin-top:16px;padding-top:16px;border-top:1px solid var(--lijn)}
.af-btw{grid-column:1/-1;margin:-6px 0 4px;padding:10px 12px;border-radius:10px;background:#F6F6F8;font-size:.875rem;line-height:1.45;color:#475569}
.af-btw.goed{background:#E8F5EE;color:#0F5A3A}.af-btw.let{background:#FFF4E5;color:#7A4A00}.af-btw.bezig{color:#666B78}
.som .som-btw{margin-top:2px}.som .som-btw dt,.som .som-btw dd{font-size:.8125rem;color:var(--zacht)}
.adm-zak{margin:10px 0 0;font-size:.875rem;line-height:1.5}.adm-zak small{display:block;margin-top:4px;font-size:.8125rem;color:#666B78}

/* beheer: bezoekers */
.bz-stip{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#C2CEDF;vertical-align:1px}
.bz-stip.aan{background:#1E8E3E;box-shadow:0 0 0 0 rgba(30,142,62,.5);animation:bz-puls 2s infinite}
@keyframes bz-puls{0%{box-shadow:0 0 0 0 rgba(30,142,62,.45)}70%{box-shadow:0 0 0 7px rgba(30,142,62,0)}100%{box-shadow:0 0 0 0 rgba(30,142,62,0)}}
@media (prefers-reduced-motion:reduce){.bz-stip.aan{animation:none}}
.bz-nav-live{background:#1E8E3E!important;color:#fff!important}
.bz-periode{flex-wrap:wrap}
.bz-nu-lijst{display:grid;gap:0;margin:0;padding:0 22px 14px;list-style:none}
.bz-nu-lijst li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #ECECF0;font-size:.9375rem}
.bz-nu-lijst li:first-child{border-top:0}.bz-nu-lijst span{flex:1;min-width:0}.bz-nu-lijst small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;color:#8B90A0}
.bz-grafiek{display:flex;align-items:flex-end;gap:3px;height:180px;margin:0;padding:8px 22px 26px;list-style:none}
.bz-grafiek li{position:relative;display:flex;flex:1;align-items:flex-end;height:100%;min-width:0}
.bz-grafiek i{display:block;width:100%;border-radius:4px 4px 1px 1px;background:#BFD3F6}
.bz-grafiek li.nu i{background:#4433E6}.bz-grafiek li:hover i{background:#7FA6EC}
.bz-grafiek span{position:absolute;top:100%;left:50%;margin-top:6px;transform:translateX(-50%);font-size:.6875rem;color:#8B90A0;white-space:nowrap}
.bz-dicht{gap:1px}
.bz-as{margin:0;padding:0 22px 18px;font-size:.75rem;color:#8B90A0}
.bz-uitleg{margin:4px 2px 0;font-size:.8125rem;line-height:1.55;color:#666B78}
@media (max-width:700px){.bz-grafiek{height:150px;padding:8px 16px 26px;gap:2px}.bz-nu-lijst{padding:0 16px 10px}.bz-as{padding:0 16px 14px}.bz-periode{width:100%}}

/* productpagina: voor- en achterkant (dubbelzijdig) */
.kanten{border:0;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--lijn);min-width:0}
.kant-keuzes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.kant-keus{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1.5px solid var(--lijn);border-radius:12px;background:var(--wit);cursor:pointer}
.kant-keus.aan{border-color:var(--blauw,#4433E6);box-shadow:0 0 0 3px rgba(29,95,214,.12)}
.kant-keus input{margin-top:3px;accent-color:#4433E6}.kant-keus strong{display:block;color:var(--petrol);font-size:.9375rem}.kant-keus small{display:block;color:var(--zacht);font-size:.8125rem}
.achter-paneel{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:20px;align-items:start;margin-top:16px}
.achter-voorbeeld{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;border-radius:10px;box-shadow:0 10px 26px rgba(15,18,24,.16),inset 0 0 0 1px rgba(0,0,0,.06);text-align:center;overflow:hidden}
.achter-liggend{aspect-ratio:85/55}.achter-staand{aspect-ratio:55/88;max-width:140px}
.achter-voorbeeld img{max-width:70%;max-height:46%;object-fit:contain}.achter-voorbeeld strong{font-size:1.05rem;line-height:1.15;overflow-wrap:anywhere}.achter-voorbeeld span{font-size:.75rem;opacity:.8;overflow-wrap:anywhere}
.achter-velden label[for=dz-naam],.achter-velden label[for=dz-regel]{display:block;margin:12px 0 6px;font-weight:700;color:var(--petrol);font-size:.9375rem}
.achter-velden label i{font-style:normal;font-weight:500;color:var(--zacht)}.achter-velden input[type=text]{width:100%}
.achter-fout{margin:8px 0 0;color:#B42318;font-size:.875rem}.achter-fout:empty{display:none}.achter-conf{display:inline-block;margin-top:12px;font-size:.875rem}
@media (max-width:560px){.achter-paneel{grid-template-columns:1fr}.achter-voorbeeld{max-width:220px}.achter-staand{max-width:130px}}
.achter-voorbeeld strong,.achter-voorbeeld span{color:inherit!important}
/* ACTIE OP DE SITE (beheer > Korting): balk bovenaan elke pagina (winkel.js) en doorgestreepte prijzen */
.actiebalk{background:#0F1218;color:#fff;font-size:.875rem;line-height:1.3}
.actiebalk a,.actiebalk .ab-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;padding:8px 16px;color:inherit;text-decoration:none}
.actiebalk .ab-label{padding:2px 8px;border-radius:999px;background:#F7B733;color:#0F1218;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.actiebalk s{opacity:.65}
.actiebalk b{color:#FFD36B;font-weight:800}
.actiebalk .ab-tot{color:#C9CBD3}
.actiebalk a:hover .ab-pijl{transform:translateX(3px)}
.actiebalk .ab-pijl{transition:transform .2s}
@media (max-width:520px){.actiebalk{font-size:.8125rem}.actiebalk .ab-tot,.actiebalk .ab-pijl{display:none}}
.productprijs .pp-van{font-size:1.25rem;font-weight:600;color:var(--zacht);text-decoration-thickness:2px}
.productprijs .pp-actie{flex-basis:100%;font-style:normal;font-size:.8125rem;font-weight:700;color:#B4321E}
.cat-prijs s{color:var(--zacht);font-size:.8125rem}
.ac-blok{margin-bottom:24px}
.ac-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ac-voorbeeld{margin:4px 0 18px;border-radius:12px;overflow:hidden}
.ac-voorbeeld i{opacity:.6}
.ac-breed{grid-column:1/-1}
.ac-hint{display:block;margin-top:6px;font-size:.8125rem;color:var(--zacht)}
.ac-schakel label{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.ac-schakel input{width:20px;height:20px;accent-color:#4433E6}
.ac-schakel input{min-height:0;padding:0}
/* afrekenen: zekerheden en betaallogo's direct onder de betaalknop (28-10-2026) */
.af-zeker{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:.8125rem;font-weight:600;color:#3B404C}
.af-zeker li{display:flex;align-items:center;gap:6px}
.af-zeker svg{width:15px;height:15px;flex:none;color:#1E8E5A}
.af-betaalrij{justify-content:center;margin:12px 0 0}
.af-akkoord{margin:0 0 14px;font-size:.875rem;color:#3B404C;text-align:center}
.af-akkoord a{color:inherit}
/* beheer: ontwerpvoorstellen */
.vs-lijst{margin:0;padding:0;list-style:none}
.vs-rij{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:16px 22px;border-top:1px solid #ECECF0}
.vs-wie{min-width:0;flex:1 1 260px}
.vs-wie strong{display:block;font-size:1rem;color:#0F1218}
.vs-wie small{display:block;font-size:.8125rem;color:#666B78;margin-top:2px}
.vs-wens{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:#F6F6F8;font-size:.875rem;white-space:pre-line}
.vs-acties{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.vs-geen{font-size:.8125rem;color:#666B78}
.vs-status select{min-height:36px;padding:4px 8px;border:1px solid #D5DDEA;border-radius:8px;background:#fff;font:inherit;font-size:.875rem}
/* knop naar het gratis ontwerpvoorstel (productpagina, slotband) */
.koop-voorstel{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:14px 16px;border:1px solid #D7E3F7;border-radius:14px;background:#F4F8FF;color:#0F1218;text-decoration:none;font-size:.9375rem;line-height:1.45;transition:border-color .2s,background .2s}
.koop-voorstel:hover{border-color:#4433E6;background:#EAF1FD}
.koop-voorstel strong{font-weight:800}
.koop-voorstel .kv-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:#8F84FF;box-shadow:0 0 0 1px #E3E8F1}.koop-voorstel .kv-ic svg{width:20px;height:20px;fill:#8F84FF}
.koop-voorstel .kp{flex:none;width:20px;height:20px;margin-left:auto;color:#4433E6;transition:transform .2s}
.koop-voorstel:hover .kp{transform:translateX(3px)}
.cta-voorstel{margin:14px 0 0;font-size:.9375rem}
.cta-voorstel a{display:inline-flex;align-items:center;gap:6px;color:inherit;font-weight:700}
.cta-voorstel .kp{width:18px;height:18px}
#adm-voorstellen .vs-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px 24px}
#adm-voorstellen .vs-wie{flex:none;width:auto}
#adm-voorstellen .vs-acties{justify-content:flex-end;max-width:440px}
@media (max-width:760px){#adm-voorstellen .vs-rij{grid-template-columns:minmax(0,1fr)}#adm-voorstellen .vs-acties{justify-content:flex-start;max-width:none}}

/* GRATIS ONTWERPVOORSTEL (/gratis-ontwerp/, voorstel.py + voorstel.js), 28-10-2026 */
.gv-hero{overflow-x:clip}
.gv-hero .gv-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(8px,2vw,24px) 0 clamp(36px,5vw,72px)}
.gv-badge{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(15,18,24,.08);font-size:.875rem;font-weight:700;color:var(--petrol)}
.gv-badge span{padding:4px 10px;border-radius:999px;background:#8F84FF;color:#0F1218;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gv-hero h1{margin:18px 0 0;font-size:clamp(2.5rem,5.2vw,4.5rem);line-height:1.02;letter-spacing:-.045em;max-width:12ch;text-wrap:balance}

.gv-lood{margin:20px 0 0;max-width:31em;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;color:var(--tekst)}
.gv-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:28px 0 0}
.gv-knop{min-height:56px;padding-inline:26px;font-size:1.0625rem}
.gv-link{font-weight:700;color:var(--petrol);text-underline-offset:4px}
.gv-zeker{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding:0;list-style:none;font-size:.9375rem;font-weight:600;color:var(--petrol)}
.gv-zeker li{display:flex;align-items:center;gap:8px}.gv-zeker svg{width:18px;height:18px;color:#1E8E5A;flex:none}
/* waaier van vijf bordjes */
.gv-waaier{position:relative;width:min(100%,640px);aspect-ratio:1/0.95;justify-self:center}
.gv-gloed{position:absolute;inset:4% 2% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0))}
.gv-w{position:absolute;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 30px 34px rgba(15,18,24,.2))}
.gv-w1,.gv-w5{display:none}
.gv-w2{width:46%;left:0;bottom:12%;rotate:-8deg;z-index:1}
.gv-w3{width:56%;left:22%;bottom:2%;z-index:3}
.gv-w4{width:46%;right:0;bottom:12%;rotate:8deg;z-index:2}
.gv-zwev{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:16px;background:#fff;box-shadow:0 14px 34px rgba(15,18,24,.16);font-size:.875rem;line-height:1.2;color:var(--petrol)}
.gv-zwev small{display:block;font-size:.75rem;font-weight:600;color:var(--zacht)}.gv-zwev strong{font-weight:800}
.gv-zwev-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#EAF1FD;color:#4433E6}.gv-zwev-ic svg{width:20px;height:20px}
.gv-zwev-ic.gv-groen{background:#E7F6EE;color:#1E8E5A}
.gv-zwev-logo{left:-2%;top:6%}
.gv-zwev-tijd{right:2%;bottom:0}
@media (prefers-reduced-motion:no-preference){.gv-zwev-logo{animation:gv-zweef 6s ease-in-out infinite}.gv-zwev-tijd{animation:gv-zweef 6s ease-in-out -3s infinite}}
@keyframes gv-zweef{50%{transform:translateY(-8px)}}
/* koppen van de banden */
.gv-kop-rij{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(22px,3vw,36px)}
.gv-kop-rij h2,.gv-sectie h2,.gv-faq h2{margin:6px 0 0;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.gv-kop-lood{margin:0;max-width:30em;color:var(--zacht);font-size:1.0625rem;line-height:1.55}
/* galerij */
.gv-galerij-band{padding-top:clamp(28px,3.5vw,48px)}
.gv-galerij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.gv-galerij a{display:block;text-decoration:none;color:var(--petrol)}
.gv-g-beeld{display:grid;place-items:center;aspect-ratio:4/5;border-radius:18px;background:linear-gradient(180deg,#F4F7FC,#E6EDF8);overflow:hidden;transition:transform .3s var(--soepel),box-shadow .3s}
.gv-g-beeld img{width:86%;height:auto;transition:transform .4s var(--soepel)}
.gv-galerij a:hover .gv-g-beeld{box-shadow:0 14px 30px rgba(15,18,24,.12)}.gv-galerij a:hover img{transform:translateY(-4px) scale(1.03)}
.gv-g-lab{display:block;margin:10px 2px 0;font-size:.9375rem;font-weight:700}
@media (max-width:1000px){.gv-galerij{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.gv-galerij{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* stappen */
.gv-stappen-band{background:linear-gradient(180deg,#fff,#F3F7FD)}
.gv-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin:0;padding:0;list-style:none;counter-reset:st}
.gv-stappen li{position:relative;padding:26px 24px 28px;border-radius:var(--r);background:#fff;box-shadow:0 10px 30px rgba(15,18,24,.07)}
.gv-st-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#4433E6,#0F1218);color:#fff}.gv-st-ic svg{width:26px;height:26px}
.gv-nr{display:block;margin:18px 0 0;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal)}
.gv-stappen h3{margin:6px 0 8px;font-size:1.25rem;letter-spacing:-.02em;color:var(--petrol)}.gv-stappen p{margin:0;font-size:.9688rem;line-height:1.6;color:var(--zacht)}
/* formulier + voorbeeldmail */
.gv-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.gv-sub{margin:10px 0 22px;color:var(--zacht)}
.gv-form,.gv-bedankt{padding:clamp(22px,3vw,36px);box-shadow:0 18px 50px rgba(15,18,24,.10)}
.gv-form .af-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:18px}
.gv-form .veld{margin:0}.gv-form .veld.breed{grid-column:1/-1}.gv-form .veld.smal{grid-column:span 1}
.gv-form input,.gv-form select,.gv-form textarea{width:100%}
.gv-form textarea{font:inherit;font-size:.9375rem;padding:10px 12px;border:1px solid #D5DDEA;border-radius:var(--r-klein);resize:vertical}
.gv-drop{position:relative}
.gv-drop input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.gv-drop-vlak{display:block;padding:26px 22px;border:2px dashed #B9C8E2;border-radius:18px;background:#F6F9FF;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.gv-drop.sleep .gv-drop-vlak,.gv-drop-vlak:hover{border-color:#4433E6;background:#EEF4FF}
.gv-drop.vol .gv-drop-vlak{border-style:solid;border-color:#1E8E5A;background:#F2FBF6;text-align:left}
.gv-drop.fout .gv-drop-vlak{border-color:var(--fout)}
#gv-logo:focus-visible + .gv-drop-vlak{outline:3px solid #4433E6;outline-offset:2px}
.gv-drop-leeg{display:grid;justify-items:center;gap:4px}
.gv-drop-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:50%;background:#fff;color:#4433E6;box-shadow:0 6px 16px rgba(15,18,24,.10)}.gv-drop-ic svg{width:26px;height:26px}
.gv-drop-leeg strong{font-size:1.0625rem;color:var(--petrol)}.gv-drop-leeg small{font-size:.8125rem;color:var(--zacht)}
.gv-drop-vol{display:flex;align-items:center;gap:14px}
.gv-drop-vol img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #E3E8F1}
.gv-drop-vol strong{display:block;color:var(--petrol);overflow-wrap:anywhere}.gv-drop-vol small{font-size:.8125rem;color:var(--zacht)}
.gv-drop-hulp{margin:8px 0 0;font-size:.8125rem;color:var(--zacht)}
.gv-ontwerp{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:10px 12px;border-radius:14px;background:#F6F6F8}
.gv-ontwerp img{width:56px;height:56px;object-fit:contain}.gv-ontwerp span{flex:1;min-width:0}
.gv-ontwerp small{display:block;font-size:.75rem;color:var(--zacht)}.gv-ontwerp strong{display:block;color:var(--petrol)}
.gv-ontwerp button{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--zacht);cursor:pointer;padding:4px 8px}
.gv-verstuur{width:100%;min-height:56px;margin-top:22px;font-size:1.0625rem}
.gv-klein{margin:12px 0 0;font-size:.8125rem;line-height:1.5;color:var(--zacht);text-align:center}
.gv-bedankt{text-align:center}
.gv-bedankt-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#E7F6EE;color:#1E8E5A}.gv-bedankt-ic svg{width:28px;height:28px}
.gv-bedankt h3{margin:14px 0 10px;font-size:1.375rem;color:var(--petrol)}.gv-bedankt p{margin:0 0 16px}
.gv-mail{position:relative;padding:20px;border-radius:24px;background:#fff;box-shadow:0 24px 60px rgba(15,18,24,.14);rotate:1.5deg}
.gv-mail-kop{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--lijn)}
.gv-mail-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0F1218;color:#fff;font-weight:800}
.gv-mail-kop strong{display:block;color:var(--petrol)}.gv-mail-kop small{display:block;font-size:.8125rem;color:var(--zacht)}
.gv-mail-tijd{margin-left:auto;font-size:.75rem;color:var(--zacht)}
.gv-mail-tekst{margin:14px 0;font-size:.9375rem;line-height:1.55;color:var(--tekst)}
.gv-mail-beeld{display:grid;place-items:center;padding:16px;border-radius:16px;background:linear-gradient(180deg,#F4F7FC,#E6EDF8)}.gv-mail-beeld img{width:72%;height:auto}
.gv-mail-knop{display:block;margin-top:14px;padding:12px;border-radius:12px;background:#4433E6;color:#fff;font-weight:800;text-align:center}
.gv-zij-noot{margin:16px 0 0;text-align:center;font-size:.875rem;color:var(--zacht)}
/* vragen */
.gv-faq-band{background:#F3F7FD}
.gv-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 64px}
@media (min-width:900px){.gv-hero .gv-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.gv-twee{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.gv-zij{position:sticky;top:110px;padding-top:96px}.gv-faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media (max-width:640px){.gv-form .af-velden{grid-template-columns:minmax(0,1fr)}.gv-form .veld.smal{grid-column:1/-1}.gv-waaier{width:min(100%,420px)}.gv-zwev{font-size:.75rem;padding:8px 12px 8px 8px}.gv-zwev-ic{width:30px;height:30px}.gv-zij{display:none}}
/* gratis-ontwerp: waarom een eigen ontwerp */
.gv-lood strong{color:var(--petrol)}
.gv-voordelen-band{background:linear-gradient(180deg,#F3F7FD,#fff)}
.gv-voordelen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.gv-voordelen-kop h2{margin:6px 0 0;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.035em;color:var(--petrol);text-wrap:balance}
.gv-voordelen-kop .gv-kop-lood{margin:16px 0 26px;color:var(--zacht)}
.gv-voordelen-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin:0;padding:0;list-style:none}
.gv-voordelen-lijst li{display:flex;gap:14px;padding:22px;border-radius:var(--r);background:#fff;box-shadow:0 10px 30px rgba(15,18,24,.07)}
.gv-vd-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:#EAF1FD;color:#4433E6}.gv-vd-ic svg{width:22px;height:22px}
.gv-voordelen-lijst h3{margin:2px 0 6px;font-size:1.0938rem;color:var(--petrol)}.gv-voordelen-lijst p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--zacht)}
@media (min-width:900px){.gv-voordelen{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
/* homepage: sectie gratis ontwerpvoorstel */
.gv-promo-band{padding-block:clamp(24px,4vw,56px)}
.gv-promo{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,5vw,64px);border-radius:var(--R);background:radial-gradient(90% 80% at 80% 30%,#FFFFFF 0%,#F4F4F6 50%,#E6E5EE 100%);color:var(--tekst);overflow:hidden}
.gv-promo .gv-badge{margin:0}
.gv-promo h2{margin:18px 0 0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;letter-spacing:-.04em;color:var(--petrol);text-wrap:balance}

.gv-promo-lood{margin:16px 0 0;max-width:32em;font-size:1.0625rem;line-height:1.6;color:var(--tekst)}
.gv-promo-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:22px 0 0;padding:0;list-style:none;font-size:.9375rem;font-weight:600;color:var(--petrol)}
.gv-promo-lijst li{display:flex;align-items:flex-start;gap:8px}.gv-promo-lijst svg{width:18px;height:18px;flex:none;margin-top:2px;color:#1E8E5A}
.gv-promo .gv-knoppen{margin-top:28px}
.gv-promo-knop{min-height:54px;padding-inline:24px}
.gv-promo-link{font-weight:700;color:var(--petrol);text-underline-offset:4px}
.gv-promo-beeld{position:relative;aspect-ratio:1.15/1;width:min(100%,560px);justify-self:center}
.gv-pw{position:absolute;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 26px 30px rgba(15,18,24,.18))}
.gv-pw1{width:44%;left:0;bottom:10%;rotate:-8deg}
.gv-pw2{width:54%;left:23%;bottom:0;z-index:2}
.gv-pw3{width:44%;right:0;bottom:10%;rotate:8deg;z-index:1}
.gv-promo-chip{left:4%;top:4%;color:#0F1218}
@media (min-width:900px){.gv-promo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
@media (max-width:520px){.gv-promo-lijst{grid-template-columns:minmax(0,1fr)}}
.gv-vragen{display:grid;gap:12px}

/* ==== SITE-BEGIN (uit site.css, niet hier bewerken) ==== */
/* Opmaak van nfc-visitekaartjes.nl (1-11-2026). Grafietinkt, wit, lichtgrijze vlakken (--perzik) en één actiekleur (--koraal = indigo).
   Koppen in Schibsted Grotesk, tekst in Inter. Alles licht; geen donkere vlakken, geen tweekleurige koppen.
   css.py zet dit bestand achter styles.css. */

/* ---------- basis ---------- */
.s-pagina{background:var(--wit);font-size:17px}
.s-pagina h1,.s-pagina h2,.s-pagina h3{font-family:var(--kopfont);color:var(--petrol)}
.s-pagina h1{font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.04em;font-weight:700}
.s-pagina h2{font-size:clamp(2rem,3.7vw,3.15rem);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.s-pagina h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.015em;font-weight:650}
.s-pagina p{max-width:62ch}
.s-label{margin:0 0 18px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.s-band{padding-block:var(--band)}
.s-vlak{background:var(--perzik)}
.s-sectiekop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.s-sectiekop p{margin:0;color:var(--zacht);font-size:1.0625rem}
.s-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.s-midden{justify-content:center;margin-top:48px}
.s-tekstlink{display:inline-flex;align-items:center;gap:.45em;font-weight:600;color:var(--petrol);text-decoration:underline;text-decoration-color:var(--perzik-rand);text-underline-offset:4px}
.s-tekstlink:hover{text-decoration-color:var(--koraal)}
.s-tekstlink .kp{width:1.1em;height:1.1em;flex:none}
.h-hoe-kop .s-tekstlink{display:inline;}
.h-hoe-kop .s-tekstlink .kp{display:inline-block;vertical-align:-.2em;margin-left:.3em}
.s-vinken{display:grid;gap:10px;margin:22px 0 30px}
.s-vinken li{display:flex;gap:10px;align-items:flex-start}
.s-vinken .ic,.sv-zeker .ic{width:20px;height:20px;flex:none;margin-top:3px;color:var(--koraal)}

/* knoppen: indigo, kaal pijltje */
.s-pagina .knop,.kop .knop{background:var(--koraal);border-color:var(--koraal);color:#fff;border-radius:999px;font-weight:600}
.s-pagina .knop .kp,.kop .knop .kp{width:1.15em;height:1.15em;color:currentColor}
.s-pagina .knop-lijn{background:transparent;color:var(--petrol);border-color:var(--perzik-rand)}
.s-pagina .knop-lijn:hover{background:var(--wit);border-color:var(--petrol)}

/* ---------- kop ---------- */
.kop .merk{gap:9px;color:var(--petrol)}
.kop .mk,.sv .mk{width:50px;height:50px;flex:none;margin:-8px -4px -8px -6px}
.mk-naam{font-family:var(--kopfont);font-weight:800;font-size:1.22rem;letter-spacing:-.05em;line-height:1;color:var(--petrol);white-space:nowrap}
.mk-naam span{color:var(--zacht);font-weight:500}
.kop.gescrold{box-shadow:0 1px 0 var(--lijn)}
.kop .nav ul a{font-weight:500;font-size:.96875rem;color:var(--petrol)}
.kop .nav ul a[aria-current="page"]{background:var(--perzik)}
@media (max-width:1180px) and (min-width:1001px){.kop .nav ul a{padding:12px 9px;font-size:.9375rem}.mk-naam{font-size:1.08rem}}

/* ---------- hero ---------- */
.h-hero{padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,64px)}
.h-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.h-hero-tekst h1{max-width:13ch}
.h-lood{margin:26px 0 34px;font-size:clamp(1.125rem,1.5vw,1.3rem);line-height:1.55;color:var(--tekst)}
.h-prijs{margin:28px 0 0;font-size:.96875rem;color:var(--zacht)}
.h-prijs strong{font-family:var(--kopfont);font-size:1.35rem;letter-spacing:-.02em;color:var(--petrol)}
.h-prijs span{margin-inline:6px;color:var(--perzik-rand)}
.h-hero-beeld{position:relative;margin:0;aspect-ratio:1990/1600;max-width:100%}
.h-hero-kaarten{position:absolute;left:0;top:4%;width:88%;filter:drop-shadow(0 30px 40px rgba(15,18,24,.18))}
.h-hero-tel{position:absolute;right:0;bottom:-6%;width:30%;filter:drop-shadow(0 30px 40px rgba(15,18,24,.25))}
.h-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,5vw,64px);border-block:1px solid var(--lijn)}
.h-spec li{padding:22px 26px 22px 0;font-size:.9375rem;color:var(--zacht)}
.h-spec li+li{border-left:1px solid var(--lijn);padding-left:26px}
.h-spec strong{display:block;margin-bottom:2px;font-family:var(--kopfont);font-variant-numeric:normal;font-size:1.3rem;letter-spacing:-.02em;color:var(--petrol)}

/* ---------- zo werkt het ---------- */
.h-hoe{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);align-items:start}
.h-hoe-kop{position:sticky;top:120px}
.h-hoe-kop p{margin:22px 0 24px;color:var(--zacht);font-size:1.0625rem}
.h-stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.h-stappen li{display:grid;gap:22px}
.h-stappen figure{border-radius:var(--r);overflow:hidden;background:var(--perzik)}
.h-stappen figure img{width:100%}
.h-stappen li>div{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline}
.h-stappen p{grid-column:2;margin:0;color:var(--zacht)}
.h-stap-nr{font-family:var(--kopfont);font-size:1rem;font-weight:700;color:var(--koraal);font-variant-numeric:tabular-nums}
.h-stappen h3{font-size:1.25rem}
.h-stappen p{font-size:.96875rem}

/* ---------- ontwerpen ---------- */
.h-ontwerpen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:end}
.h-ow a{display:grid;gap:12px;text-decoration:none;color:var(--petrol)}
.h-ow-beeld{display:grid;place-items:center;border-radius:14px;transition:transform .3s var(--soepel)}
.h-ow-beeld img{filter:drop-shadow(0 16px 22px rgba(15,18,24,.18))}
.h-ow a:hover .h-ow-beeld{transform:translateY(-4px)}
.h-ow-tekst strong{display:block;font-weight:600;font-size:.96875rem}
.h-ow-tekst small{color:var(--zacht);font-size:.875rem}
.h-ow-pasje{grid-column:span 1}
.h-cat-kop{margin:72px 0 20px;font-size:1.25rem}
.h-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.h-cats a{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;padding:12px 18px 12px 12px;background:var(--wit);border-radius:16px;text-decoration:none;color:var(--petrol);transition:box-shadow .2s,transform .2s var(--soepel)}
.h-cats a:hover{box-shadow:var(--schaduw-klein);transform:translateY(-2px)}
.h-cat-beeld{display:block;border-radius:10px;background:var(--perzik);aspect-ratio:960/608;overflow:hidden}
.h-cat-tekst strong{display:block;font-weight:600}
.h-cat-tekst small{display:block;font-size:.8125rem;line-height:1.4;color:var(--zacht)}
.h-cat-n{font-size:.8125rem;font-weight:600;color:var(--zacht);font-variant-numeric:tabular-nums}

/* ---------- profiel ---------- */
.h-profiel{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.h-profiel-tel{margin:0;padding:clamp(28px,4vw,56px) clamp(40px,7vw,96px) 0;background:var(--perzik);border-radius:var(--R);overflow:hidden}
.h-profiel-tel img{width:100%;margin-bottom:-18%;filter:drop-shadow(0 30px 40px rgba(15,18,24,.2))}
.h-lood-klein{margin:18px 0 30px;font-size:1.125rem;color:var(--zacht)}
.h-lijst{display:grid;margin:0}
.h-lijst>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:6px 28px;padding:18px 0;border-top:1px solid var(--lijn)}
.h-lijst>div:last-child{border-bottom:1px solid var(--lijn)}
.h-lijst dt{font-weight:600;color:var(--petrol)}
.h-lijst dd{margin:0;color:var(--zacht);font-size:.96875rem}

/* ---------- team ---------- */
.h-team{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.h-team-tekst>p{margin:22px 0 0;font-size:1.0625rem}
.h-team-beeld{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}

/* ---------- prijzen ---------- */
.h-prijzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.h-prijzen>div>p{margin:22px 0 30px;font-size:1.0625rem}
.h-staffel{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.h-staffel th,.h-staffel td{padding:18px 4px;text-align:left;border-bottom:1px solid var(--lijn)}
.h-staffel thead th{padding-top:0;font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--zacht)}
.h-staffel tbody th{font-weight:500;color:var(--tekst)}
.h-staffel td:nth-child(2){font-size:1.375rem;font-weight:650;letter-spacing:-.02em;color:var(--petrol)}
.h-staffel td:last-child{text-align:right;font-size:.875rem;font-weight:600;color:var(--koraal)}
.h-staffel tbody tr:last-child td:nth-child(2){color:var(--koraal)}

/* ---------- vragen ---------- */
.s-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.s-faq-kop{position:sticky;top:120px}
.s-faq-kop h2{font-size:clamp(1.9rem,3vw,2.6rem)}
.s-faq-kop p{margin:20px 0 0;color:var(--zacht)}
.s-faq-meer a{color:var(--petrol);font-weight:600}
.s-vragen{display:grid;gap:10px}
.s-vraag,.s-vraag[open]{background:var(--perzik);border-radius:16px;box-shadow:none}
.s-vraag summary::after{display:none}
.s-vraag summary:hover{color:var(--koraal)}
.s-vraag summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 24px;font-weight:600;font-size:1rem;border-radius:16px;color:var(--petrol);cursor:pointer;list-style:none}
.s-vraag summary::-webkit-details-marker{display:none}
.s-vraag summary span{position:relative;width:14px;height:14px;flex:none}
.s-vraag summary span::before,.s-vraag summary span::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:2px;background:var(--petrol);transition:transform .2s}
.s-vraag summary span::after{transform:rotate(90deg)}
.s-vraag[open] summary span::after{transform:rotate(0)}
.s-vraag p{margin:0;padding:0 56px 22px 24px;color:var(--tekst);font-size:.96875rem}

/* ---------- slot ---------- */
.s-slot{padding-block:0 var(--band)}
.s-slot-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:32px 56px;padding:clamp(32px,4.5vw,60px) clamp(28px,4.5vw,64px);background:var(--actie-tint);border-radius:var(--R);overflow:hidden}
.s-slot-tekst h2{max-width:20ch;font-size:clamp(1.9rem,3.2vw,2.7rem)}
.s-slot-tekst p{margin:16px 0 28px;color:var(--tekst)}
.s-slot-beeld{margin:-24px -24px -24px 0}
.s-slot-beeld img{width:100%;filter:drop-shadow(0 26px 34px rgba(15,18,24,.25))}
@media (max-width:860px){.s-slot-in{grid-template-columns:1fr}.s-slot-beeld{max-width:360px;margin:0 auto -8px}}

/* ---------- kruimelpad ---------- */
.s-kruimel ol{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;font-size:.875rem;color:var(--zacht)}
.s-kruimel li+li::before{content:"/";margin-right:6px;color:var(--perzik-rand)}
.s-kruimel a{color:var(--zacht);text-decoration:none}
.s-kruimel a:hover{color:var(--petrol);text-decoration:underline}

/* ---------- voet ---------- */
.sv{margin-top:0;border-radius:0;padding-block:72px 32px;background:var(--perzik);color:var(--tekst);font-size:.9375rem}
.sv a{color:var(--tekst);text-decoration:none}
.sv a:hover{color:var(--petrol);text-decoration:underline}
.sv-kolommen{display:grid;grid-template-columns:minmax(0,1.55fr) repeat(3,minmax(0,1fr));gap:40px}
.sv h3{margin:0 0 14px;font-family:var(--kopfont);font-size:.9375rem;font-weight:650;color:var(--petrol)}
.sv ul{display:grid;gap:8px}
.sv-merk p{margin:18px 0 18px;max-width:38ch}
.sv-merk .merk{display:inline-flex;align-items:center;gap:9px}
.sv-zeker li{display:flex;gap:8px}
.sv-zeker .ic{margin-top:2px}
.sv-onder{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:56px;padding-top:24px;border-top:1px solid var(--perzik-rand);font-size:.875rem;color:var(--zacht)}
.sv-onder p{margin:0}
.sv-onder ul{display:flex;gap:20px;margin-left:auto}
.sv-betaal{display:flex!important;gap:8px!important;margin:0!important}
.sv-betaal img{height:24px;width:auto}

/* ---------- smal ---------- */
@media (max-width:1000px){
  .h-hero-in,.h-hoe,.h-profiel,.h-team,.h-prijzen,.s-faq,.s-sectiekop{grid-template-columns:1fr}
  .h-hoe-kop,.s-faq-kop{position:static}
    .h-ontwerpen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h-stappen{grid-template-columns:1fr;gap:40px;max-width:640px}
  .h-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-spec li:nth-child(3){border-left:0}
  .h-spec li:nth-child(n+3){border-top:1px solid var(--lijn)}
  .h-profiel-tel{max-width:440px}
  .sv-kolommen{grid-template-columns:1fr 1fr}
  .sv-merk{grid-column:1/-1}
}
@media (max-width:640px){
  .s-pagina{font-size:16px}
  .h-ontwerpen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-cats{grid-template-columns:1fr}
  .h-lijst>div{grid-template-columns:1fr}
  .h-staffel td:last-child{display:none}
  .sv-kolommen{grid-template-columns:1fr}
  .sv-onder ul{margin-left:0}
  .mk-naam{font-size:1.02rem}
  .kop .mk{width:40px;height:40px}
}

/* ---------- tekstpagina's (contact, juridisch, kennisbank) ---------- */
.s-pagkop{padding-block:clamp(36px,5vw,64px) clamp(16px,2vw,24px)}
.s-pagkop h1{max-width:18ch}
.s-pagkop .h-lood{margin-bottom:0}
.s-band-dicht{padding-block:clamp(32px,4vw,56px) var(--band)}
.s-h2-klein{font-size:1.5rem!important;margin-bottom:18px}
.s-smal{max-width:760px}
.s-juridisch h1{font-size:clamp(2.2rem,4vw,3.2rem)}
.s-tekst h2{margin:44px 0 14px;font-size:1.5rem!important;letter-spacing:-.02em}
.s-tekst h3{margin:28px 0 10px}
.s-tekst p,.s-tekst li{color:var(--tekst)}
.s-tekst ul{list-style:disc;padding-left:1.3em;margin:0 0 1em}
.s-tekst ol{list-style:decimal;padding-left:1.3em;margin:0 0 1em}
.s-tekst li{margin-bottom:6px}
.s-tekst a{color:var(--koraal)}
.ct-twee{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.ct-twee{grid-template-columns:1fr}}
.s-pagina .ct-zij-kop{font-family:var(--font);font-size:.8125rem;font-weight:600;letter-spacing:.06em;line-height:1.4;color:var(--zacht);text-transform:uppercase;margin-bottom:12px}

/* ---------- ontwerpen ---------- */
.o-prijsregel{display:flex;gap:8px;align-items:flex-start;margin:22px 0 0;font-size:.9375rem;color:var(--zacht)}
.o-prijsregel .ic{width:18px;height:18px;flex:none;margin-top:3px;color:var(--koraal)}
.o-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.o-filter-knop{min-height:40px;padding:0 16px;border:1px solid var(--lijn);border-radius:999px;background:var(--wit);font-size:.9375rem;font-weight:500;color:var(--petrol);cursor:pointer}
.o-filter-knop:hover{border-color:var(--perzik-rand)}
.o-filter-knop[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.o-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.o-kaart a{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:14px 14px 16px;background:var(--perzik);border-radius:16px;text-decoration:none;color:var(--petrol);transition:background-color .2s,box-shadow .2s}
.o-kaart a:hover{background:var(--wit);box-shadow:var(--schaduw)}
.o-beeld{position:relative;display:block;aspect-ratio:1/1;margin-bottom:12px}
.o-beeld img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 12px 16px rgba(15,18,24,.16));transition:transform .3s var(--soepel)}
.o-staand .o-beeld img{max-height:94%}
.o-kaart a:hover .o-beeld img{transform:translateY(-4px)}
.o-beeld-leeg span{position:absolute;inset:0;margin:auto;height:fit-content;display:grid;place-items:center;width:62%;aspect-ratio:85/55;border:2px dashed var(--perzik-rand);border-radius:10px;font-size:2rem;color:var(--zacht);background:var(--wit)}
.o-tekst strong{display:block;font-weight:600}
.o-tekst small{display:block;font-size:.8125rem;line-height:1.4;color:var(--zacht)}
.o-pas{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.875rem;font-weight:600;color:var(--koraal)}
.o-pas .kp{width:1em;height:1em}
.o-catkop-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.o-catbeeld{margin:0}
.o-catbeeld img{width:100%;filter:drop-shadow(0 24px 30px rgba(15,18,24,.18))}
.o-gids{align-items:start}
.o-gids-tekst h2{margin-bottom:18px}
.o-profielkop{margin-bottom:12px;font-size:1.1rem}
@media (max-width:1000px){.o-catkop-in{grid-template-columns:1fr}.o-catbeeld{max-width:480px}}
@media (max-width:520px){.o-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.o-kaart a{padding:10px 10px 12px}.o-pas{display:none}}

.h-cats a{border:1px solid var(--lijn)}
.s-vlak .h-cats a{border-color:transparent}

/* ---------- vaste pagina's ---------- */
.p-kopknoppen{margin-top:26px}
.p-kopbeeld{margin:0}
.p-kopbeeld img{width:100%;filter:drop-shadow(0 24px 30px rgba(15,18,24,.18))}
.p-noot{margin:14px 0 0;font-size:.875rem;color:var(--zacht)}
.p-staffel td:nth-child(3){font-size:.9375rem;color:var(--zacht);font-weight:500}
.p-inbegrepen{padding:clamp(24px,3vw,40px);background:var(--perzik);border-radius:var(--r)}
.p-inbegrepen .s-vinken{margin:18px 0 28px}
.p-schaduw{box-shadow:var(--schaduw)}
.p-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid var(--perzik-rand);padding-top:28px}
.p-vier h3{margin-bottom:8px;font-size:1.1rem}
.p-vier p{margin:0;font-size:.96875rem;color:var(--zacht)}
@media (max-width:900px){.p-vier{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.p-vier{grid-template-columns:1fr}}

/* ---------- artikelen ---------- */
.p-art-kop{max-width:820px}
.p-art-kop h1{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.p-art-meta{margin:18px 0 0;font-size:.875rem;color:var(--zacht)}
.p-artbeeld{margin:clamp(28px,4vw,48px) 0 0;max-width:1000px;border-radius:var(--r);overflow:hidden}
.p-artbeeld img{width:100%}
.p-art-raster{display:grid;grid-template-columns:240px minmax(0,720px);gap:clamp(32px,5vw,80px);margin-top:clamp(36px,5vw,64px);align-items:start}
.p-toc{position:sticky;top:110px;font-size:.9375rem}
.p-toc p{margin:0 0 10px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.p-toc ol{display:grid;gap:2px;border-left:1px solid var(--lijn)}
.p-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--tekst);text-decoration:none;line-height:1.4}
.p-toc a:hover{color:var(--petrol);border-left-color:var(--koraal)}
.p-art-tekst h2:first-child{margin-top:0}
.p-art-tekst h2{scroll-margin-top:110px}
.p-art-tekst p,.p-art-tekst li{font-size:1.0625rem;line-height:1.7}
.p-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:48px 0;padding:24px 28px;background:var(--actie-tint);border-radius:var(--r)}
.p-cta p{margin:0;max-width:44ch}
.s-tekst .p-verder,.p-verder{list-style:none;padding:0;display:grid;gap:8px}
.p-verder a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;background:var(--perzik);border-radius:12px;color:var(--petrol);font-weight:600;text-decoration:none}
.p-verder a:hover{background:var(--perzik-diep)}
.p-verder .kp{width:1.1em;height:1.1em;flex:none;color:var(--koraal)}
.p-artlijst{display:grid;gap:12px}
.p-artlijst a{display:grid;gap:4px;padding:22px 24px;background:var(--perzik);border-radius:16px;text-decoration:none;color:var(--tekst)}
.p-artlijst a:hover{background:var(--perzik-diep)}
.p-artlijst strong{font-family:var(--kopfont);font-size:1.25rem;color:var(--petrol)}
@media (max-width:900px){.p-art-raster{grid-template-columns:1fr}.p-toc{position:static}}

/* merk in de kop van afrekenen, account, dashboard en beheer */
.afkop .merk,.db-kop .merk{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.afkop .mk,.db-kop .mk{width:34px;height:34px;flex:none}
@media (max-width:1000px){
  .h-spec li,.h-spec li+li{padding:18px 16px}
  .h-spec li:nth-child(odd){padding-left:0}
}
@media (max-width:640px){
  .h-ontwerpen{align-items:end;gap:28px 16px}
  .h-ow-staand .h-ow-beeld img{max-height:200px;width:auto;margin-inline:auto}
  .h-hero-tekst h1{max-width:none}
  .h-prijs span{margin-inline:3px}
}

/* logo L24: in de voet met haarlijn en slogan; de naad tussen de kaarten volgt de achtergrond */
.sv{--naad:var(--perzik)}
.sv-lockup{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.sv-lockup .mk{width:56px;height:56px;margin:-6px -4px -6px -6px}
.sv-lijn{width:1px;align-self:stretch;margin:4px 0;background:var(--perzik-rand)}
.sv-tekst{display:grid;gap:7px}
.mk-slogan{font:500 .625rem/1.2 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--zacht);white-space:nowrap}

/* ======== professionaliseringsronde (1-11) ======== */
/* vast sectie-element: nummer, label, haarlijn */
.s-pagina .s-oog,.s-oog{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:0 0 clamp(28px,3.5vw,44px);font:600 .78125rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);max-width:none}
.s-oog span{font-variant-numeric:tabular-nums;color:var(--koraal);letter-spacing:.04em}
.s-oog::after{content:"";flex:1;height:1px;background:var(--perzik-rand)}
.s-vlak .s-oog::after{background:var(--perzik-rand)}

/* hero: kaarten op een podium, telefoon erover, melding als detail */
.h-hero-beeld{aspect-ratio:1/0.86}
.h-podium{position:absolute;inset:6% 0 0 6%;border-radius:32px;background:
  radial-gradient(120% 90% at 85% 10%,rgba(68,51,230,.16) 0,rgba(68,51,230,0) 55%),
  linear-gradient(160deg,#F6F6F8 0%,#ECEBF5 100%);box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}
.h-hero-kaarten{left:-2%;top:12%;width:84%;filter:drop-shadow(0 34px 38px rgba(15,18,24,.22))}
.h-hero-tel{right:5%;bottom:-4%;width:29%;filter:drop-shadow(0 30px 40px rgba(15,18,24,.28))}
.h-melding{position:absolute;left:12%;bottom:9%;display:flex;align-items:center;gap:12px;margin:0;padding:12px 18px 12px 12px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(15,18,24,.06),0 18px 36px -14px rgba(15,18,24,.28);font-size:.875rem;line-height:1.3;max-width:none}
.h-melding strong{display:block;font-weight:600;color:var(--petrol)}
.h-melding small{display:block;color:var(--zacht);font-size:.8125rem}
.h-melding-v{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--actie-tint);color:var(--koraal)}
.h-melding-v .ic{width:18px;height:18px}
.h-hero-tekst h1{font-size:clamp(2.5rem,4.9vw,4.35rem);letter-spacing:-.045em}
.h-lood{color:var(--zacht)}

/* ontwerpen op wit; de vakken in een eigen vlak */
.h-catvlak{margin-top:clamp(48px,6vw,80px);padding:clamp(24px,3vw,40px);background:var(--perzik);border-radius:var(--R)}
.h-catvlak .h-cat-kop{margin:0 0 18px}
.h-catvlak .h-cats a{border-color:transparent}
.h-ow-beeld{min-height:180px;align-content:end}

/* koppen: strakker */
.s-pagina h2{letter-spacing:-.04em}
.s-sectiekop{margin-bottom:clamp(36px,4vw,56px)}

/* profiel en team: beeldvlakken iets rustiger */
.s-vlak .h-profiel-tel{background:#fff}
.h-team-beeld{border:1px solid var(--lijn);box-shadow:0 40px 80px -48px rgba(15,18,24,.45)}
@media (max-width:640px){.h-melding{left:4%;bottom:4%;padding:9px 12px 9px 9px;font-size:.75rem}.h-melding small{font-size:.6875rem}.h-melding-v{width:26px;height:26px}}

/* logo groter (Daniel 1-11) */
.kop .mk-naam{font-size:1.44rem}
.kop .mk{width:58px;height:58px;margin:-10px -4px -10px -8px}
.kop .merk{gap:10px}
@media (max-width:1180px) and (min-width:1001px){.kop .mk-naam{font-size:1.24rem}.kop .mk{width:50px;height:50px}}
@media (max-width:640px){.kop .mk-naam{font-size:1.14rem}.kop .mk{width:46px;height:46px;margin:-8px -4px -8px -6px}}
@media (max-width:380px){.kop .mk-naam{font-size:1.02rem}.kop .mk{width:40px;height:40px}}
.sv-lockup .mk-naam{font-size:1.5rem}
.sv-lockup .mk{width:64px;height:64px}
.afkop .mk-naam,.db-kop .mk-naam{font-size:1.32rem}
.afkop .mk,.db-kop .mk{width:50px;height:50px;margin:-8px -4px -8px -6px}

/* ontwerpgids op /ontwerpen/ */
.o-gidsraster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:0 clamp(40px,6vw,96px);align-items:start}
.o-gidskop{position:sticky;top:110px}
.o-gidskop p{margin:20px 0 26px;color:var(--zacht);font-size:1.0625rem}
.o-gidsnav{display:grid;border-top:1px solid var(--lijn)}
.o-gidsnav a{padding:12px 0;border-bottom:1px solid var(--lijn);font-weight:500;font-size:.9375rem;color:var(--petrol);text-decoration:none;display:flex;justify-content:space-between}
.o-gidsnav a::after{content:"→";color:var(--koraal)}
.o-gidsnav a:hover{color:var(--koraal)}
.o-gidstekst{max-width:680px}
.o-gidstekst h3{margin:44px 0 12px;font-size:1.45rem;letter-spacing:-.025em;scroll-margin-top:110px}
.o-gidstekst h3:first-child{margin-top:0}
.o-gidstekst p,.o-gidstekst li{font-size:1.0625rem;line-height:1.7}
.o-specs{overflow-x:auto;margin:6px 0 8px;border:1px solid var(--lijn);border-radius:16px}
.o-specs table{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums}
.o-specs th,.o-specs td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
.o-specs tr:last-child th,.o-specs tr:last-child td{border-bottom:0}
.o-specs th{font-weight:600;color:var(--petrol);white-space:nowrap;background:var(--perzik)}
.o-specs td:nth-child(2){font-weight:600;color:var(--petrol);white-space:nowrap}
.o-specs td:last-child{color:var(--zacht)}
.o-tips{margin:8px 0 22px}
.o-tips>div{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}
@media (max-width:1000px){.o-gidsraster{grid-template-columns:1fr}.o-gidskop{position:static;margin-bottom:36px}}
@media (max-width:640px){.o-tips>div{grid-template-columns:1fr}.o-specs td:last-child{min-width:200px}}

/* hero op /ontwerpen/: stapel echte ontwerpen op het podium */
.o-hero{padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,40px)}
.o-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.o-hero-tekst h1{font-size:clamp(2.4rem,4.6vw,4.1rem);letter-spacing:-.045em;max-width:12ch}
.o-hero-tekst .h-lood{margin:24px 0 32px}
.o-cijfers{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(28px,3vw,40px);border-top:1px solid var(--lijn)}
.o-cijfers li{flex:1;min-width:110px;padding:18px 20px 0 0;color:var(--zacht);font-size:.875rem}
.o-cijfers li+li{padding-left:20px;border-left:1px solid var(--lijn)}
.o-cijfers strong{display:block;font-family:var(--font);font-weight:650;font-size:1.55rem;letter-spacing:-.03em;color:var(--petrol);margin-bottom:2px}
.o-hero-beeld{position:relative;margin:0;aspect-ratio:1/0.92;max-width:100%}
.o-hero-beeld .h-podium{inset:4% 0 2% 4%}
.oh{position:absolute;height:auto;filter:drop-shadow(0 22px 26px rgba(15,18,24,.22))}
.oh-1{width:27%;left:10%;top:9%;transform:rotate(-10deg)}
.oh-4{width:27%;right:9%;top:9%;transform:rotate(9deg)}
.oh-3{width:30%;left:35%;top:4%;z-index:2}
.oh-2{width:50%;left:0;top:47%;transform:rotate(-7deg);z-index:3}
.oh-5{width:48%;right:0;top:46%;transform:rotate(6deg);z-index:3}
.oh-6{width:48%;left:26%;top:60%;z-index:4}
@media (max-width:1000px){.o-hero-in{grid-template-columns:1fr}.o-hero-beeld{max-width:620px}}

/* overzicht: uitgelicht groot, per vak vier */
.o-uitgelicht{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.o-uitgelicht .o-kaart a{padding:22px 20px 20px}
.o-raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.o-vakken{display:grid;gap:clamp(40px,5vw,64px)}
.o-vakkop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--perzik-rand)}
.o-vakkop h3{font-size:1.5rem;letter-spacing:-.025em}
.o-vakkop h3 a{color:inherit;text-decoration:none}
.o-vakkop p{margin:4px 0 0;color:var(--zacht);font-size:.9375rem}
.s-vlak .o-kaart a{background:#fff}
.s-vlak .o-kaart a:hover{box-shadow:var(--schaduw)}
.o-meer{display:flex;justify-content:center;margin:36px 0 0}
@media (max-width:1000px){.o-uitgelicht,.o-raster-4{grid-template-columns:repeat(3,minmax(0,1fr))}.o-raster-4 li:nth-child(4){display:none}}
@media (max-width:640px){.o-uitgelicht,.o-raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}.o-raster-4 li:nth-child(4){display:block}}

/* bento: per vak één uitgelichte kaart */
.o-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.ob{grid-column:span 4}
.ob-groot{grid-column:span 7;grid-row:span 2}
.ob-breed{grid-column:span 5}
.ob a{position:relative;display:block;height:100%;min-height:280px;padding:26px 28px;border-radius:24px;background:var(--tint);overflow:hidden;text-decoration:none;color:var(--petrol);isolation:isolate;transition:box-shadow .25s}
.ob-groot a{min-height:576px;padding:36px 40px}
.ob a:hover{box-shadow:0 30px 60px -36px rgba(15,18,24,.45)}
.ob-tekst{position:relative;z-index:2;display:grid;gap:6px;max-width:58%}
.ob-groot .ob-tekst{max-width:60%}
.ob-n{font:600 .75rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
.ob-tekst strong{font-family:var(--kopfont);font-weight:700;font-size:1.65rem;line-height:1.05;letter-spacing:-.035em;margin-top:4px}
.ob-groot .ob-tekst strong{font-size:clamp(2.2rem,3.4vw,3rem)}
.ob-tekst small{font-size:.875rem;line-height:1.45;color:var(--zacht)}
.ob-knop{position:absolute;left:28px;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9375rem;color:var(--petrol)}
.ob-groot .ob-knop{left:40px;bottom:34px;font-size:1rem}
.ob-knop .kp{width:1.1em;height:1.1em;transition:transform .25s var(--soepel)}
.ob a:hover .ob-knop .kp{transform:translateX(4px)}
.ob-beeld{position:absolute;inset:0;z-index:1}
.ob-beeld img{position:absolute;height:auto;filter:drop-shadow(0 18px 22px rgba(15,18,24,.24));transition:transform .45s var(--soepel)}
.ob-st{width:31%;right:24%;bottom:-6%;transform:rotate(-7deg)}
.ob-lg{width:46%;right:-3%;bottom:12%;transform:rotate(6deg)}
.ob-groot .ob-st{width:36%;right:30%;bottom:-4%}
.ob-groot .ob-lg{width:56%;right:-4%;bottom:16%}
.ob-breed .ob-st{width:26%;right:30%}
.ob-breed .ob-lg{width:44%}
.ob a:hover .ob-st{transform:rotate(-9deg) translateY(-8px)}
.ob a:hover .ob-lg{transform:rotate(8deg) translateY(-10px)}
@media (max-width:1000px){.o-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.ob,.ob-breed{grid-column:span 1}.ob-groot{grid-column:1/-1;grid-row:auto}.ob-groot a{min-height:440px}}
@media (max-width:640px){.o-bento{grid-template-columns:1fr}.ob a{min-height:250px}.ob-groot a{min-height:380px;padding:28px}.ob-groot .ob-knop{left:28px;bottom:26px}}

/* homepage: vergelijking, telefoons, bestelinfo */
.h-vgl{margin-top:clamp(56px,6vw,88px)}
.h-vgl h3{font-size:1.5rem;letter-spacing:-.025em;margin-bottom:18px}
.h-vgl thead th{background:#fff;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.h-vgl tbody td:nth-child(2){color:var(--petrol);font-weight:500;white-space:normal}
.h-vgl tbody td:last-child{color:var(--zacht)}
.h-tel-kop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.h-tel-kop p{margin:0;color:var(--zacht);font-size:1.0625rem}
.h-tel-kolommen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--petrol)}
.h-tel-kolommen>div{padding:24px 28px 8px 0;display:flex;flex-direction:column;gap:10px}
.h-tel-kolommen>div+div{padding-left:28px;border-left:1px solid var(--lijn)}
.h-tel-kolommen h3{font-size:1.15rem}
.h-tel-kolommen p{margin:0;font-size:.96875rem;color:var(--tekst)}
.h-tel-kolommen .s-tekstlink{margin-top:auto;font-size:.9375rem}
.h-bestel{display:grid;gap:0;margin:0 0 28px;border-top:1px solid var(--perzik-rand)}
.h-bestel li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--perzik-rand);font-size:.9375rem;color:var(--tekst)}
.h-bestel strong{font-weight:600}
@media (max-width:1000px){.h-tel-kop{grid-template-columns:1fr}.h-tel-kolommen{grid-template-columns:1fr 1fr}.h-tel-kolommen>div:nth-child(3){padding-left:0;border-left:0}.h-tel-kolommen>div:nth-child(n+3){border-top:1px solid var(--lijn)}}
@media (max-width:640px){.h-tel-kolommen{grid-template-columns:1fr}.h-tel-kolommen>div,.h-tel-kolommen>div+div{padding:20px 0 12px;border-left:0}.h-tel-kolommen>div+div{border-top:1px solid var(--lijn)}.h-bestel li{grid-template-columns:1fr;gap:2px}}

/* /het-dashboard/ */
.d-kopbeeld{border-radius:18px;border:1px solid var(--lijn);box-shadow:0 40px 80px -48px rgba(15,18,24,.5);filter:none!important}
.d-snel{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.d-snel li{padding:6px 12px;border-radius:999px;background:var(--actie-tint);color:var(--koraal-diep);font-size:.8125rem;font-weight:600}
.d-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px,6vw,96px);align-items:center}
.d-blok .d-tekst h2{margin-bottom:16px}
.d-blok .d-tekst>p{color:var(--tekst);font-size:1.0625rem}
.d-links .d-tekst{order:2}
.d-links .d-beeld{order:1}
.d-beeld{margin:0;display:grid;place-items:center}
.d-beeld img{border-radius:18px}
.d-beeld img.d-scherm{border:1px solid var(--lijn);box-shadow:0 40px 80px -48px rgba(15,18,24,.45)}
.d-beeld img.d-tel{width:min(320px,70%);border-radius:0;filter:drop-shadow(0 30px 40px rgba(15,18,24,.25))}
@media (max-width:1000px){.d-blok{grid-template-columns:1fr;gap:32px}.d-links .d-tekst,.d-links .d-beeld{order:0}}
.h-meerlink{margin:22px 0 0}

/* /hoe-werkt-een-nfc-visitekaartje/ */
.hw-hero{padding-block:clamp(28px,4vw,56px) clamp(32px,4vw,56px)}
.hw-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hw-hero h1{font-size:clamp(2.4rem,4.4vw,3.9rem);letter-spacing:-.045em;max-width:13ch}
.hw-hero .h-lood{margin:22px 0 26px}
.hw-kort{padding:20px 22px;border-radius:16px;background:var(--actie-tint);border:1px solid rgba(68,51,230,.14)}
.hw-kort strong{display:block;font:600 .75rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--koraal);margin-bottom:8px}
.hw-kort p{margin:0;color:var(--petrol);font-size:1rem;line-height:1.6}
.hw-inhoud{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hw-inhoud a{padding:7px 13px;border:1px solid var(--lijn);border-radius:999px;font-size:.875rem;font-weight:500;color:var(--petrol);text-decoration:none}
.hw-inhoud a:hover{border-color:var(--koraal);color:var(--koraal)}
.hw-hero-beeld{position:relative;margin:0;padding:6% 5% 5%}
.hw-hero-beeld .h-podium{inset:0}
.hw-hero-beeld img{position:relative;border-radius:18px;box-shadow:0 40px 70px -40px rgba(15,18,24,.45)}
.hw-stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:x}
.hw-stappen li{display:flex;flex-direction:column}
.hw-stappen figure{margin:0 0 20px;border-radius:18px;overflow:hidden;background:var(--perzik)}
.hw-nr{font:700 .8125rem/1 var(--font);letter-spacing:.06em;color:var(--koraal);margin-bottom:10px}
.hw-stappen h3{font-size:1.3rem;margin-bottom:8px}
.hw-stappen p{margin:0;color:var(--zacht);font-size:.96875rem}
.hw-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px,6vw,96px);align-items:center}
.hw-twee .s-tekst h2{margin-bottom:18px}
.hw-twee .s-tekst p{font-size:1.0625rem;line-height:1.7}
.hw-figuur{margin:0}
.hw-lagen{width:100%;height:auto}
.hw-feiten{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--petrol)}
.hw-feiten li{padding:22px 20px 22px 0;border-bottom:1px solid var(--lijn);color:var(--zacht);font-size:.9375rem}
.hw-feiten li:nth-child(even){padding-left:20px;border-left:1px solid var(--lijn)}
.hw-feiten strong{display:block;font-family:var(--kopfont);font-size:2.2rem;letter-spacing:-.04em;color:var(--petrol);margin-bottom:4px}
.hw-tels{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hw-telkaart{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;padding:28px;background:#fff;border-radius:22px}
.hw-tel{width:120px;height:auto}
.hw-telkaart h3{font-size:1.35rem;margin-bottom:8px}
.hw-telkaart p{margin:0 0 14px;font-size:.96875rem;color:var(--tekst)}
.hw-check{display:grid;gap:12px}
.hw-check li{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:14px;background:var(--perzik);font-weight:500;color:var(--petrol)}
.hw-check .ic{width:22px;height:22px;flex:none;color:var(--koraal)}
.hw-tips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:t}
.hw-tips li{counter-increment:t;padding:24px;background:#fff;border-radius:18px}
.hw-tips li::before{content:counter(t);display:grid;place-items:center;width:32px;height:32px;margin-bottom:16px;border-radius:50%;background:var(--actie-tint);color:var(--koraal);font-weight:700;font-size:.875rem}
.hw-tips strong{display:block;color:var(--petrol);font-size:1.05rem;margin-bottom:6px}
.hw-tips p{margin:0;font-size:.9375rem;color:var(--zacht)}
@media (max-width:1000px){.hw-hero-in,.hw-twee{grid-template-columns:1fr;gap:32px}.hw-stappen{grid-template-columns:1fr;max-width:620px}.hw-tels{grid-template-columns:1fr}.hw-tips{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hw-telkaart{grid-template-columns:80px 1fr;gap:18px;padding:20px}.hw-tel{width:80px}.hw-tips{grid-template-columns:1fr}.hw-feiten strong{font-size:1.7rem}}
.hw-twee .s-tekst h2{font-size:clamp(2rem,3.4vw,2.9rem)!important;letter-spacing:-.04em;margin:0 0 20px}
.hw-prak{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--petrol)}
.hw-prak>div{padding:28px 32px 28px 0;border-bottom:1px solid var(--lijn)}
.hw-prak>div:nth-child(even){padding:28px 0 28px 32px;border-left:1px solid var(--lijn)}
.hw-prak h3{font-size:1.3rem;margin-bottom:10px}
.hw-prak p{margin:0;color:var(--tekst);font-size:1rem;line-height:1.7}
@media (max-width:800px){.hw-prak{grid-template-columns:1fr}.hw-prak>div,.hw-prak>div:nth-child(even){padding:24px 0;border-left:0}}
/* slogan bij het logo in de kop (L24) */
.kop-lockup{display:inline-flex;align-items:center;gap:12px}
.kop-lijn{width:1px;align-self:stretch;margin:6px 0;background:var(--perzik-rand)}
.kop-merktekst{display:grid;gap:5px}
.kop .mk-slogan{font-size:.5625rem;letter-spacing:.17em}
@media (max-width:1180px){.kop .mk-slogan{font-size:.5rem;letter-spacing:.12em}}
@media (max-width:1000px){.kop-lijn{display:none}.kop .mk-slogan{display:none}.kop-lockup{gap:10px}}
.afkop .merk,.db-kop .merk{gap:12px}.afkop .mk-slogan,.db-kop .mk-slogan{font-size:.5625rem;letter-spacing:.17em}@media (max-width:1000px){.afkop .mk-slogan,.db-kop .mk-slogan,.afkop .kop-lijn,.db-kop .kop-lijn{display:none}}
.kop .nav ul a{white-space:nowrap}@media (max-width:1180px) and (min-width:1001px){.kop .nav ul{margin-left:0}.kop .nav ul a{padding:12px 8px;font-size:.90625rem}.kop .nav-acties .knop{padding-inline:1em .9em}.kop-in{gap:18px}}
/* /zakelijk/ voordelen */
.z-voordelen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--petrol)}
.z-voordelen>div{padding:28px 28px 30px 0;border-bottom:1px solid var(--lijn)}
.z-voordelen>div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--lijn)}
.z-nr{display:block;font:700 .8125rem/1 var(--font);color:var(--koraal);margin-bottom:14px;letter-spacing:.04em}
.z-voordelen h3{font-size:1.2rem;margin-bottom:8px}
.z-voordelen p{margin:0;color:var(--zacht);font-size:.96875rem}
@media (max-width:900px){.z-voordelen{grid-template-columns:1fr 1fr}.z-voordelen>div,.z-voordelen>div:not(:nth-child(3n+1)){padding:24px 20px 24px 0;border-left:0}.z-voordelen>div:nth-child(even){padding-left:20px;border-left:1px solid var(--lijn)}}
@media (max-width:560px){.z-voordelen{grid-template-columns:1fr}.z-voordelen>div,.z-voordelen>div:nth-child(even){padding:22px 0;border-left:0}}

/* /contact/ */
.c-hero{padding-block:clamp(28px,4vw,56px) clamp(40px,5vw,72px)}
.c-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.c-hero h1{font-size:clamp(2.5rem,5vw,4.3rem);letter-spacing:-.045em}
.c-hero .h-lood{margin:22px 0 30px}
.c-gegevens{display:grid;border-top:1px solid var(--lijn)}
.c-gegevens li{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--lijn)}
.c-gegevens svg{width:40px;height:40px;padding:9px;flex:none;border-radius:12px;background:var(--actie-tint);color:var(--koraal)}
.c-gegevens span{display:grid;font-weight:600;color:var(--petrol)}
.c-gegevens small{font-weight:500;font-size:.8125rem;color:var(--zacht)}
.c-gegevens a{color:var(--petrol);text-decoration:none}
.c-gegevens a:hover{color:var(--koraal)}
.c-beeld{position:relative;margin:0;padding:clamp(48px,7vw,96px) clamp(28px,5vw,64px) clamp(56px,7vw,88px)}
.c-beeld .h-podium{inset:0}
.c-kaart{position:relative;aspect-ratio:85/55;max-width:460px;margin:0 auto;padding:7% 7.5%;display:flex;flex-direction:column;justify-content:space-between;border-radius:clamp(14px,1.6vw,20px);
  background:radial-gradient(120% 140% at 100% 0%,#2A2F3A 0%,#14171E 55%,#0F1218 100%);color:#fff;transform:rotate(-6deg);
  box-shadow:0 2px 3px rgba(15,18,24,.25),0 40px 60px -26px rgba(15,18,24,.55);--naad:#14171E}
.c-kaart::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%);pointer-events:none}
.c-kaart-top{display:flex;align-items:center;gap:10px}
.c-kaart-top .mk{width:44px;height:44px;margin:-6px -2px -6px -6px}
.c-kaart-merk{font-family:var(--kopfont);font-weight:800;font-size:clamp(1rem,1.6vw,1.3rem);letter-spacing:-.05em}
.c-kaart-merk span{color:#8B90A0;font-weight:500}
.c-kaart-onder{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.c-kaart-onder div{display:grid;gap:3px;font-size:clamp(.7rem,1vw,.8125rem);color:#C9CBD3}
.c-kaart-onder strong{color:#fff;font-size:clamp(.85rem,1.2vw,1rem);margin-bottom:2px}
.c-qr{width:clamp(64px,8vw,92px);height:auto;border-radius:6px;flex:none}
.c-golf{position:absolute;right:6%;top:9%;width:26px;color:#8F84FF}
.c-onder{position:relative;margin:clamp(34px,4vw,48px) 0 0;text-align:center;font-size:.875rem;color:var(--zacht)}
.c-form-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:start}
.c-form-zij{position:sticky;top:110px}
.c-form-zij h2{margin-bottom:12px}
.c-form-zij>p{color:var(--zacht);margin:0 0 22px}
.c-onderwerpen{display:grid;gap:10px}
.c-ond{display:grid;gap:2px;text-align:left;padding:15px 18px;border:1px solid transparent;border-radius:14px;background:#fff;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.c-ond strong{color:var(--petrol);font-weight:600}
.c-ond small{color:var(--zacht);font-size:.8125rem}
.c-ond:hover{border-color:var(--perzik-rand)}
.c-ond[aria-pressed="true"]{border-color:var(--koraal);box-shadow:0 0 0 3px var(--actie-tint)}
.c-belofte{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:.875rem;font-weight:500;color:var(--petrol)}
.c-belofte span{width:8px;height:8px;border-radius:50%;background:#12B76A;box-shadow:0 0 0 4px rgba(18,183,106,.15)}
.c-form{padding:clamp(24px,3vw,40px);border-radius:24px;border:0;box-shadow:0 1px 2px rgba(15,18,24,.04),0 30px 60px -40px rgba(15,18,24,.35)}
.c-snel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.c-snel a{position:relative;display:grid;gap:6px;height:100%;padding:22px 22px 52px;border-radius:18px;background:var(--perzik);text-decoration:none;color:var(--tekst);transition:background-color .2s}
.c-snel a:hover{background:var(--perzik-diep)}
.c-snel strong{color:var(--petrol);font-size:1.05rem}
.c-snel span{font-size:.9rem;color:var(--zacht)}
.c-snel .kp{position:absolute;left:22px;bottom:20px;width:1.2em;height:1.2em;color:var(--koraal)}
.c-bedrijf{margin:32px 0 0;font-size:.875rem;color:var(--zacht)}
@media (max-width:1000px){.c-hero-in,.c-form-raster{grid-template-columns:1fr}.c-form-zij{position:static}.c-snel{grid-template-columns:1fr 1fr}.c-onderwerpen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.c-snel,.c-onderwerpen{grid-template-columns:1fr}.c-kaart{transform:rotate(-4deg)}}

/* /visitekaartje-laten-ontwerpen/ */
.os-hero{padding-block:clamp(28px,4vw,56px) clamp(32px,4vw,56px)}
.os-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.os-hero h1{font-size:clamp(2.4rem,4.6vw,4rem);letter-spacing:-.045em;max-width:14ch}
.os-hero .h-lood{margin:22px 0 30px}
.os-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--actie-tint);color:var(--koraal-diep);font-size:.8125rem;font-weight:600}
.os-badge .ic{width:16px;height:16px}
.os-hero-beeld{position:relative;margin:0;padding:8% 6%}
.os-hero-beeld .h-podium{inset:0}
.os-vb{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px;align-items:center;justify-items:center}
.os-vb img{filter:drop-shadow(0 14px 18px rgba(15,18,24,.2))}
.os-vb li:nth-child(odd){transform:rotate(-4deg)}
.os-vb li:nth-child(even){transform:rotate(4deg) translateY(10px)}
.os-vb-staand img{max-height:170px;width:auto}
.os-stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--petrol)}
.os-stappen li{padding:26px 24px 26px 0}
.os-stappen li+li{padding-left:24px;border-left:1px solid var(--lijn)}
.os-nr{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:50%;background:var(--petrol);color:#fff;font-weight:700;font-size:.875rem}
.os-stappen h3{font-size:1.15rem;margin-bottom:8px}
.os-stappen p{margin:0;color:var(--zacht);font-size:.9375rem}
#aanvragen .c-form-zij .s-oog{margin-bottom:24px}
#aanvragen .hw-check{margin-top:22px}
#aanvragen .hw-check li{background:#fff}
.gv-form .gv-drop{margin-bottom:22px}
@media (max-width:1000px){.os-hero-in{grid-template-columns:1fr}.os-stappen{grid-template-columns:1fr 1fr}.os-stappen li:nth-child(3){padding-left:0;border-left:0}.os-stappen li:nth-child(n+3){border-top:1px solid var(--lijn)}}
@media (max-width:560px){.os-stappen{grid-template-columns:1fr}.os-stappen li,.os-stappen li+li{padding:20px 0;border-left:0}.os-stappen li+li{border-top:1px solid var(--lijn)}.os-vb-staand img{max-height:120px}}
.gv-drop-leeg>span:last-child{display:grid;gap:2px;text-align:left}
/* winkelwagen: accessoires */
.wp-acc{margin-top:28px;padding:24px;border-radius:20px;background:var(--perzik)}
.wp-acc h2{font-size:1.2rem!important;margin:0 0 14px}
.wp-acc ul{display:grid;gap:10px}
.wp-acc li{display:grid;grid-template-columns:72px 1fr auto auto;gap:16px;align-items:center;padding:12px 14px;border-radius:14px;background:#fff}
.wp-acc img{width:72px;height:72px;object-fit:contain}
.wp-acc strong{display:block;color:var(--petrol);font-weight:600}
.wp-acc small{display:block;font-size:.8125rem;line-height:1.4;color:var(--zacht)}
.wp-acc-prijs{font-weight:600;color:var(--petrol);font-variant-numeric:tabular-nums;white-space:nowrap}
.wp-acc-knop{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--koraal);background:#fff;color:var(--koraal);font:600 .875rem var(--font);cursor:pointer;white-space:nowrap}
.wp-acc-knop:hover{background:var(--koraal);color:#fff}
.wp-acc-knop:disabled{border-color:var(--lijn);color:var(--zacht);background:var(--perzik);cursor:default}
@media (max-width:640px){.wp-acc li{grid-template-columns:56px 1fr;}.wp-acc img{width:56px;height:56px}.wp-acc-prijs{grid-column:2}.wp-acc-knop{grid-column:1/-1}}
body.wagenpagina::before,body.afrekenpagina::before,body.loginpagina::before{background:var(--perzik)!important;border-radius:0!important}

/* ======== hero in actie (homepage, 1-11) ======== */
.ww img{position:absolute;height:auto}
.ww{position:relative;overflow:hidden;background:#0B0D14;--tx:#fff;--tz:#AEB3C2;--naad:#0B0D14;isolation:isolate}
.ww-licht{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 70% at 78% 45%,rgba(68,51,230,.55) 0%,rgba(68,51,230,0) 70%),
  radial-gradient(40% 50% at 10% 0%,rgba(143,132,255,.18) 0%,rgba(143,132,255,0) 70%),
  linear-gradient(180deg,#0B0D14 0%,#12112A 100%)}
.ww-licht::after{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 50%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 50%,#000 0%,transparent 75%)}
.ww-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(24px,4vw,56px) clamp(56px,7vw,100px)}
.ww-pil{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#D6D8E0;font:500 .875rem var(--font)}
.ww-punt{width:8px;height:8px;border-radius:50%;background:#7CF0B6;box-shadow:0 0 0 4px rgba(124,240,182,.18)}
.ww h1{font-family:var(--kopfont);font-weight:700;font-size:clamp(2.7rem,5.4vw,4.9rem);line-height:1;letter-spacing:-.05em;color:#fff;margin:0;max-width:12ch;text-wrap:balance}
.ww h1 em{font-style:normal;background:linear-gradient(100deg,#B9B1FF 0%,#7D6CFF 60%,#B9B1FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ww-lead{margin:26px 0 34px;max-width:44ch;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;color:#AEB3C2}
.ww-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.ww .ww-knoppen .knop{background:#fff;border-color:#fff;color:#1F1592;min-height:56px;padding-inline:1.5em 1.3em;font-size:1.0625rem;box-shadow:0 10px 30px -10px rgba(124,108,255,.8)}
.ww .ww-knoppen .knop:hover{background:#EEEDFD}
.ww-link{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px}
.ww-zeker{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.9375rem;color:#AEB3C2}
.ww-zeker li{display:flex;align-items:center;gap:8px}.ww-zeker li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:#5B5F70;margin-right:14px}
.ww-zeker b{color:#fff;font-size:1.1rem}
/* podium */
.ww-podium{position:relative;aspect-ratio:1/1.02;max-width:640px;justify-self:end;width:100%}
.ww-gloed{position:absolute;left:36%;top:6%;width:58%;height:86%;border-radius:50%;background:radial-gradient(closest-side,rgba(124,108,255,.55),rgba(124,108,255,0));filter:blur(30px)}
.ww-tel{position:absolute;right:6%;top:0;width:47%;aspect-ratio:940/1860;animation:ww-tel 8s infinite}
.ww-scherm{position:absolute;inset:0;width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.ww-s2{opacity:0;animation:ww-s2 8s infinite;filter:none}
.ww-knopgloed{position:absolute;left:14.7%;top:43.8%;width:70.6%;height:5.9%;border-radius:999px;box-shadow:0 0 0 0 rgba(143,132,255,.9);opacity:0;animation:ww-knop 8s infinite}
.ww-kaart{position:absolute;left:-2%;top:46%;width:56%;height:auto;transform-origin:70% 30%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:ww-kaart 8s infinite}
.ww-golf{position:absolute;left:47%;top:23%;width:0;height:0}
.ww-golf i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:2px solid rgba(185,177,255,.9);opacity:0;animation:ww-golf 8s infinite}
.ww-golf i:nth-child(2){animation-delay:.18s}.ww-golf i:nth-child(3){animation-delay:.36s}
.ww-toast{position:absolute;left:4%;top:16%;z-index:4;display:flex;align-items:center;gap:12px;margin:0;padding:12px 18px 12px 12px;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 24px 50px -16px rgba(0,0,0,.6);font-size:.9rem;opacity:0;animation:ww-toast 8s infinite}
.ww-toast>span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#12B76A;color:#fff}.ww-toast .ic{width:18px;height:18px}
.ww-toast strong{display:block;color:#0F1218}.ww-toast small{color:#5D6371}
.ww-stappen{position:absolute;left:0;right:0;bottom:-4%;display:flex;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;counter-reset:s}
.ww-stappen li{counter-increment:s;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#8E93A3;font:600 .8125rem var(--font)}
.ww-stappen li::before{content:counter(s);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1);font-size:.75rem}
.ww-stappen li:nth-child(1){animation:ww-st1 8s infinite}.ww-stappen li:nth-child(2){animation:ww-st2 8s infinite}.ww-stappen li:nth-child(3){animation:ww-st3 8s infinite}
@keyframes ww-kaart{0%,10%{transform:translate(0,0) rotate(-14deg)}22%,40%{transform:translate(52%,-62%) rotate(-4deg) scale(.96)}52%,100%{transform:translate(0,0) rotate(-14deg)}}
@keyframes ww-tel{0%,21%{transform:none}23%{transform:translateX(-4px) rotate(-.6deg)}25%{transform:translateX(3px) rotate(.4deg)}27%,100%{transform:none}}
@keyframes ww-golf{0%,21%{opacity:0;transform:scale(.3)}23%{opacity:1}38%,100%{opacity:0;transform:scale(2.6)}}
@keyframes ww-s2{0%,27%{opacity:0}32%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes ww-knop{0%,40%{opacity:0;box-shadow:0 0 0 0 rgba(143,132,255,.9)}43%{opacity:1}52%{opacity:1;box-shadow:0 0 0 18px rgba(143,132,255,0)}53%,100%{opacity:0}}
@keyframes ww-toast{0%,50%{opacity:0;transform:translateY(14px) scale(.96)}55%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes ww-st1{0%,10%,32%,100%{background:rgba(255,255,255,.06);color:#8E93A3}14%,29%{background:#fff;color:#1F1592}}
@keyframes ww-st2{0%,29%,50%,100%{background:rgba(255,255,255,.06);color:#8E93A3}32%,47%{background:#fff;color:#1F1592}}
@keyframes ww-st3{0%,47%,92%,100%{background:rgba(255,255,255,.06);color:#8E93A3}52%,88%{background:#fff;color:#1F1592}}
@media (prefers-reduced-motion:reduce){.ww *{animation:none!important}.ww-s2{opacity:1}.ww-toast{opacity:1}.ww-stappen li:nth-child(3){background:#fff;color:#1F1592}}
@media (max-width:1000px){.ww-in{grid-template-columns:1fr}.ww-podium{justify-self:center;max-width:520px;margin-top:10px}.ww h1{max-width:14ch}}
@media (max-width:560px){.ww-toast{left:0;top:8%;font-size:.78rem;padding:9px 12px 9px 9px}.ww-toast>span:first-child{width:28px;height:28px}.ww-stappen li{padding:6px 10px 6px 6px;font-size:.72rem}}

/* donkere kop boven de hero (body.s-donker) */
:is(.s-donker,.s-thema,.wagenpagina) .kop{background:rgba(11,13,20,.84);--naad:#0B0D14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:is(.s-donker,.s-thema,.wagenpagina) .kop.gescrold{box-shadow:0 1px 0 rgba(255,255,255,.08)}
:is(.s-donker,.s-thema,.wagenpagina) .kop .nav ul a,:is(.s-donker,.s-thema,.wagenpagina) .kop .mk-naam{color:#fff}:is(.s-donker,.s-thema,.wagenpagina) .kop .mk-naam span,:is(.s-donker,.s-thema,.wagenpagina) .kop .mk-slogan{color:#8B90A0}
:is(.s-donker,.s-thema,.wagenpagina) .kop .nav ul a:hover{background:rgba(255,255,255,.08)}:is(.s-donker,.s-thema,.wagenpagina) .kop .nav ul a[aria-current="page"]{background:rgba(255,255,255,.1)}
:is(.s-donker,.s-thema,.wagenpagina) .kop .nav-login,:is(.s-donker,.s-thema,.wagenpagina) .kop .wagenknop,:is(.s-donker,.s-thema,.wagenpagina) .kop .menuknop{background:rgba(255,255,255,.1);color:#fff}
:is(.s-donker,.s-thema,.wagenpagina) .kop .menuknop-streep,:is(.s-donker,.s-thema,.wagenpagina) .kop .menuknop-streep::before{background:#fff}
:is(.s-donker,.s-thema,.wagenpagina) .kop .kop-lijn{background:rgba(255,255,255,.2)}
:is(.s-donker,.s-thema,.wagenpagina) .kop .knop{background:#fff;border-color:#fff;color:#1F1592}
@media (max-width:1060px){:is(.s-donker,.s-thema,.wagenpagina) .kop .nav{background:#12131C;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}:is(.s-donker,.s-thema,.wagenpagina) .kop .nav ul a{border-bottom-color:rgba(255,255,255,.08)}}

/* ======== donkere vervolgsectie, loopt door uit de hero (s-nacht) ======== */
.s-nacht{position:relative;isolation:isolate;margin-top:-1px;background:linear-gradient(180deg,#12112A 0%,#0E0F1C 55%,#0B0D14 100%);color:#AEB3C2;border-radius:0 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px)}
.s-nacht::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(50% 40% at 15% 30%,rgba(68,51,230,.22),transparent 70%),radial-gradient(40% 35% at 90% 85%,rgba(124,108,255,.14),transparent 70%)}
.s-nacht h2,.s-nacht h3{color:#fff}
.s-nacht .s-sectiekop p,.s-nacht p{color:#AEB3C2}
.s-nacht .s-oog{color:#fff}.s-nacht .s-oog span{color:#9C92FF}.s-nacht .s-oog::after{background:rgba(255,255,255,.12)}
.s-nacht .s-tekstlink{color:#fff;text-decoration-color:rgba(255,255,255,.3)}.s-nacht .s-tekstlink:hover{text-decoration-color:#9C92FF}
.s-nacht .h-stappen{position:relative;gap:20px}
.s-nacht .h-stappen li{padding:14px 14px 26px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:transform .35s var(--soepel),box-shadow .35s}
.s-nacht .h-stappen li:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(156,146,255,.35),0 30px 60px -30px rgba(68,51,230,.6)}
.s-nacht .h-stappen figure{border-radius:16px;background:#1A1C29;box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.s-nacht .h-stappen li>div{padding:0 10px}
.s-nacht .h-stap-nr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(156,146,255,.16);color:#B9B1FF;font-size:.8125rem}
.s-nacht .h-stappen h3{color:#fff}
.s-nacht .h-stappen p{color:#AEB3C2}
.s-nacht .h-vgl h3{color:#fff}
.s-nacht .h-vgl .o-specs{border:0;border-radius:22px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.s-nacht .h-vgl th,.s-nacht .h-vgl td{border-bottom-color:rgba(255,255,255,.07)}
.s-nacht .h-vgl thead th{background:transparent;color:#8E93A3}
.s-nacht .h-vgl thead th:nth-child(2){color:#B9B1FF}
.s-nacht .h-vgl tbody th{background:transparent;color:#fff;font-weight:600}
.s-nacht .h-vgl tbody td:nth-child(2){color:#fff;background:rgba(68,51,230,.14)}
.s-nacht .h-vgl tbody tr:first-child td:nth-child(2){border-top-left-radius:0}
.s-nacht .h-vgl tbody td:last-child{color:#7D8293}
.s-nacht .h-vgl td .ic{display:inline-block;width:16px;height:16px;margin:0 8px -2px 0;color:#7CF0B6}
@media (max-width:640px){
  .h-vgl .o-specs{overflow:visible}
  .h-vgl table,.h-vgl tbody,.h-vgl tr,.h-vgl th,.h-vgl td{display:block;width:100%}
  .h-vgl thead{display:none}
  .h-vgl tr{padding:14px 16px;border-bottom:1px solid var(--lijn)}
  .s-nacht .h-vgl tr{border-bottom-color:rgba(255,255,255,.08)}
  .h-vgl tr:last-child{border-bottom:0}
  .h-vgl th,.h-vgl td{padding:4px 0!important;border:0!important;white-space:normal!important}
  .h-vgl tbody th{font-size:1rem;margin-bottom:4px}
  .s-nacht .h-vgl tbody td:nth-child(2){background:transparent}
  .h-vgl td:last-child::before{content:"Papier: ";font-weight:600}
}

/* ======== homepage volledig donker en luxe (body.s-donker, 1-11) ======== */
body.s-donker{background:#0B0D14;color:#AEB3C2;--goudlicht:#D9B866}
.s-donker main{background:#0B0D14}
.s-donker .s-nacht{border-radius:0;background:linear-gradient(180deg,#12112A 0%,#0B0D14 100%)}
.s-donker main>.s-band{position:relative;isolation:isolate;background:#0B0D14}
.s-donker main>.s-band.s-vlak{background:#0E0F18}
.s-donker main>.s-band:not(.s-nacht)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 85% 20%,rgba(68,51,230,.13),transparent 70%)}
.s-donker main>.s-band.s-vlak::before{background:radial-gradient(45% 55% at 10% 70%,rgba(124,108,255,.12),transparent 70%)}
.s-donker main>.s-band+.s-band{border-top:1px solid rgba(255,255,255,.06)}
/* typografie */
.s-donker main h2,.s-donker main h3,.s-donker main strong,.s-donker main dt{color:#fff}
.s-donker main p,.s-donker main dd,.s-donker main li{color:#AEB3C2}
.s-donker main h2{letter-spacing:-.045em}
.s-donker .s-oog{color:#fff}.s-donker .s-oog span{color:var(--goudlicht)}.s-donker .s-oog::after{background:linear-gradient(90deg,rgba(217,184,102,.45),rgba(255,255,255,.08) 30%,rgba(255,255,255,.04))}
.s-donker main .s-tekstlink{color:#fff;text-decoration-color:rgba(255,255,255,.3)}.s-donker main .s-tekstlink:hover{text-decoration-color:var(--goudlicht)}
.s-donker main a:not(.knop):not(.s-tekstlink):not(.ob a){color:#fff}
/* knoppen */
.s-donker main .knop{background:#fff;border-color:#fff;color:#1F1592;box-shadow:0 10px 30px -12px rgba(124,108,255,.7)}
.s-donker main .knop:hover{background:#EEEDFD}
.s-donker main .knop-lijn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none}
.s-donker main .knop-lijn:hover{background:rgba(255,255,255,.08);border-color:#fff}
.s-donker .s-vinken .ic,:is(.s-donker,.s-thema) .sv-zeker .ic{color:var(--goudlicht)}
/* bento: donker glas met de tint van het vak als gloed */
.s-donker .ob a{background:radial-gradient(90% 80% at 80% 100%,color-mix(in srgb,var(--tint) 30%,transparent),transparent 65%),linear-gradient(180deg,#171926,#11131C);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.s-donker .ob a:hover{box-shadow:inset 0 0 0 1px rgba(217,184,102,.45),0 40px 70px -40px rgba(0,0,0,.9)}
.s-donker .ob-tekst strong{color:#fff}.s-donker .ob-tekst small,.s-donker .ob-n{color:#8E93A3}.s-donker .ob-n{color:var(--goudlicht)}
.s-donker .ob-knop{color:#fff}
.s-donker .ob-beeld img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
/* profiel */
.s-donker .h-profiel-tel,.s-donker .s-vlak .h-profiel-tel{background:radial-gradient(70% 60% at 50% 60%,rgba(68,51,230,.35),transparent 70%),#141622;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.s-donker .h-profiel-tel img{filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
.s-donker .h-lijst>div{border-top-color:rgba(255,255,255,.08)}.s-donker .h-lijst>div:last-child{border-bottom-color:rgba(255,255,255,.08)}
/* telefoons */
.s-donker .h-tel-kolommen{border-top-color:rgba(217,184,102,.5)}.s-donker .h-tel-kolommen>div+div{border-left-color:rgba(255,255,255,.08)}
@media (max-width:1000px){.s-donker .h-tel-kolommen>div:nth-child(n+3){border-top-color:rgba(255,255,255,.08)}}
@media (max-width:640px){.s-donker .h-tel-kolommen>div+div{border-top-color:rgba(255,255,255,.08)}}
/* team */
.s-donker .h-team-beeld{border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 100px -40px rgba(68,51,230,.55)}
/* prijzen */
.s-donker .h-staffel th,.s-donker .h-staffel td{border-bottom-color:rgba(255,255,255,.08)}
.s-donker .h-staffel thead th{color:#8E93A3}.s-donker .h-staffel tbody th{color:#C9CBD3}
.s-donker .h-staffel td:nth-child(2){color:#fff}.s-donker .h-staffel td:last-child{color:var(--goudlicht)}
.s-donker .h-staffel tbody tr:last-child td:nth-child(2){color:var(--goudlicht)}
.s-donker .h-bestel{border-top-color:rgba(255,255,255,.1)}.s-donker .h-bestel li{border-bottom-color:rgba(255,255,255,.08)}
/* vragen */
.s-donker .s-vraag,.s-donker .s-vraag[open]{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.s-donker .s-vraag[open]{background:rgba(255,255,255,.055)}
.s-donker .s-vraag summary{color:#fff}.s-donker .s-vraag summary:hover{color:var(--goudlicht)}
.s-donker .s-vraag summary span::before,.s-donker .s-vraag summary span::after{background:#fff}
/* slot: indigo paneel met lichtval */
.s-donker .s-slot{background:#0B0D14;padding-top:var(--band)}
.s-donker .s-slot-in{background:radial-gradient(70% 90% at 90% 10%,rgba(255,255,255,.18),transparent 60%),linear-gradient(135deg,#4433E6 0%,#2A1D9E 100%);box-shadow:0 60px 120px -60px rgba(68,51,230,.8),inset 0 0 0 1px rgba(255,255,255,.15)}
.s-donker .s-slot-in h2{color:#fff}.s-donker .s-slot-in p{color:#D5D1FF}
.s-donker .s-slot-in .s-tekstlink{color:#fff}
/* voet */
:is(.s-donker,.s-thema) .sv{background:#08090F;color:#8E93A3;border-top:1px solid rgba(255,255,255,.06);--naad:#08090F}
:is(.s-donker,.s-thema) .sv h3,:is(.s-donker,.s-thema) .sv .mk-naam{color:#fff}:is(.s-donker,.s-thema) .sv .mk-naam span,:is(.s-donker,.s-thema) .sv .mk-slogan{color:#6B7080}
:is(.s-donker,.s-thema) .sv a{color:#AEB3C2}:is(.s-donker,.s-thema) .sv a:hover{color:#fff}:is(.s-donker,.s-thema) .sv p{color:#8E93A3}
:is(.s-donker,.s-thema) .sv-lijn{background:rgba(255,255,255,.15)}:is(.s-donker,.s-thema) .sv-onder{border-top-color:rgba(255,255,255,.08);color:#6B7080}
:is(.s-donker,.s-thema) .sv-betaal img{background:#fff;border-radius:4px;padding:2px}

/* ======== één doorlopende achtergrond over de hele homepage (1-11) ======== */
.s-donker main{background:linear-gradient(180deg,#12112A 0%,#0B0D14 9%,#11102A 22%,#0D0E1A 34%,#0B0D14 44%,#12112C 56%,#0B0D14 68%,#0F0E22 80%,#0B0D14 92%,#0B0D14 100%)}
.s-donker main>.s-band,.s-donker main>.s-band.s-vlak,.s-donker .s-nacht,.s-donker .s-slot{background:transparent!important;border-top:0!important}
.s-donker main>.s-band::before,.s-donker .s-nacht::before{inset:-18% 0!important;border-radius:0!important}
.s-donker #hoe::before{background:radial-gradient(45% 40% at 12% 35%,rgba(68,51,230,.22),transparent 70%),radial-gradient(35% 30% at 92% 80%,rgba(124,108,255,.12),transparent 70%)!important}
.s-donker #ontwerpen::before{background:radial-gradient(60% 55% at 50% 55%,rgba(124,108,255,.24),transparent 72%),radial-gradient(40% 30% at 20% 85%,rgba(217,184,102,.06),transparent 70%)!important}
.s-donker #profiel::before{background:radial-gradient(40% 50% at 22% 50%,rgba(68,51,230,.28),transparent 70%)!important}
.s-donker #telefoons::before{background:radial-gradient(40% 45% at 85% 40%,rgba(124,108,255,.12),transparent 70%)!important}
.s-donker #zakelijk::before{background:radial-gradient(45% 55% at 78% 50%,rgba(68,51,230,.26),transparent 70%)!important}
.s-donker #prijzen::before{background:radial-gradient(40% 50% at 75% 50%,rgba(124,108,255,.14),transparent 70%),radial-gradient(30% 40% at 10% 60%,rgba(217,184,102,.05),transparent 70%)!important}
.s-donker #vragen::before{background:none!important}
/* bento: lichtere glazen tegel en een spotlight achter de kaarten */
.s-donker .ob a{background:radial-gradient(70% 70% at 78% 92%,color-mix(in srgb,var(--tint) 34%,transparent),transparent 72%),linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 55%,rgba(255,255,255,.05) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.s-donker .ob-beeld::before{content:"";position:absolute;right:-8%;bottom:-22%;width:82%;height:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.30),color-mix(in srgb,var(--tint) 30%,transparent) 45%,transparent 75%);filter:blur(10px)}
.s-donker .ob-groot .ob-beeld::before{right:0;bottom:-12%;width:80%;height:95%}
.s-donker .ob-beeld img{filter:drop-shadow(0 28px 34px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.35))}
.s-donker .ob-st{width:33%}.s-donker .ob-lg{width:50%}
.s-donker .ob-groot .ob-st{width:38%}.s-donker .ob-groot .ob-lg{width:60%}
.s-donker .ob-breed .ob-st{width:25%;right:31%}.s-donker .ob-breed .ob-lg{width:42%}.s-donker .ob-breed .ob-tekst{max-width:56%}.s-donker .ob-beeld::before{filter:blur(18px);opacity:.85}

/* bento op de donkere homepage: lichte vitrines (1-11, Daniel: 'mag naar helemaal licht') */
.s-donker .ob a{background:radial-gradient(80% 70% at 80% 95%,color-mix(in srgb,var(--tint) 85%,#fff) 0%,transparent 70%),linear-gradient(160deg,#FFFFFF 0%,#F6F5FA 45%,color-mix(in srgb,var(--tint) 70%,#fff) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -34px rgba(0,0,0,.75);-webkit-backdrop-filter:none;backdrop-filter:none}
.s-donker .ob a:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(217,184,102,.8),0 40px 80px -36px rgba(68,51,230,.65)}
.s-donker .ob-beeld::before{display:none}
.s-donker .ob-tekst strong{color:#0F1218}.s-donker .ob-tekst small{color:#5D6371}.s-donker .ob-n{color:#866627}
.s-donker .ob-knop{color:#0F1218}
.s-donker .ob-beeld img{filter:drop-shadow(0 22px 26px rgba(15,18,24,.32)) drop-shadow(0 4px 6px rgba(15,18,24,.18))}

/* ======== homepage als één verloop: donker → licht → donker (1-11) ======== */
/* elke sectie begint in de kleur waar de vorige eindigt: naadloos op elke schermhoogte */
.s-donker main>#hoe{background:linear-gradient(180deg,#12112A 0%,#0D0E1C 55%,#0D0E1C calc(100% - 340px),#2A2468 calc(100% - 210px),#9C95DD calc(100% - 95px),#EEEDF8 100%)!important;padding-bottom:calc(var(--band) + 240px)}
.s-donker main>#ontwerpen{background:linear-gradient(180deg,#EEEDF8 0%,#FFFFFF 100%)!important}
.s-donker main>#profiel{background:linear-gradient(180deg,#FFFFFF 0%,#F4F3FB 100%)!important}
.s-donker main>#telefoons{background:linear-gradient(180deg,#F4F3FB 0%,#FFFFFF 100%)!important}
.s-donker main>#zakelijk{background:linear-gradient(180deg,#FFFFFF 0%,#F2F0FC 100%)!important}
.s-donker main>#prijzen{background:linear-gradient(180deg,#F2F0FC 0%,#FFFFFF 100%)!important}
.s-donker main>#vragen{background:#FFFFFF!important}
.s-donker main>.s-slot{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 30%,#C9C4EE 52%,#3A3290 72%,#12112A 86%,#0B0D14 100%)!important;padding-bottom:calc(var(--band) + 20px)}
:is(.s-donker,.s-thema) .sv{background:#0B0D14;border-top:0}
/* zachte gloed in de lichte secties */
.s-donker :is(#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen)::before{inset:0!important}
.s-donker #ontwerpen::before{background:radial-gradient(50% 40% at 50% 60%,rgba(124,108,255,.10),transparent 70%)!important}
.s-donker #profiel::before{background:radial-gradient(35% 45% at 22% 50%,rgba(68,51,230,.10),transparent 70%)!important}
.s-donker #telefoons::before,.s-donker #prijzen::before{background:none!important}
.s-donker #zakelijk::before{background:radial-gradient(40% 50% at 78% 50%,rgba(68,51,230,.12),transparent 70%)!important}
/* tekst en onderdelen in de lichte secties weer in de lichte stijl */
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) :is(h2,h3,strong,dt){color:#0F1218}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) :is(p,dd,li){color:#4A4F5C}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .s-sectiekop p{color:#5D6371}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .s-oog{color:#0F1218}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .s-oog span{color:#866627}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .s-oog::after{background:linear-gradient(90deg,rgba(168,132,58,.5),rgba(15,18,24,.1) 30%,rgba(15,18,24,.06))}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .s-tekstlink{color:#0F1218;text-decoration-color:rgba(15,18,24,.25)}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) a:not(.knop):not(.s-tekstlink):not(.ob a){color:#0F1218}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .knop{background:#0F1218;border-color:#0F1218;color:#fff;box-shadow:0 14px 30px -14px rgba(15,18,24,.5)}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .knop:hover{background:#4433E6;border-color:#4433E6}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .knop-lijn{background:transparent;color:#0F1218;border-color:rgba(15,18,24,.25);box-shadow:none}
.s-donker main :is(#hoe,#ontwerpen,#profiel,#telefoons,#zakelijk,#prijzen,#vragen) .knop-lijn:hover{background:#0F1218;color:#fff}
.s-donker main :is(#zakelijk) .s-vinken .ic{color:#866627}
/* bento in het licht: witte vitrines met een zachte schaduw */
.s-donker #ontwerpen .ob a{background:radial-gradient(80% 70% at 80% 95%,color-mix(in srgb,var(--tint) 95%,#fff) 0%,transparent 70%),linear-gradient(160deg,#FFFFFF 0%,#FBFBFD 50%,color-mix(in srgb,var(--tint) 75%,#fff) 100%);
  box-shadow:0 0 0 1px rgba(15,18,24,.05),0 2px 4px rgba(15,18,24,.04),0 30px 60px -38px rgba(30,20,90,.35)}
.s-donker #ontwerpen .ob a:hover{box-shadow:0 0 0 1px rgba(168,132,58,.55),0 40px 70px -36px rgba(68,51,230,.4)}
.s-donker #ontwerpen .ob-n{color:#866627}
/* profiel, telefoons, team, prijzen, vragen */
.s-donker #profiel .h-profiel-tel{background:radial-gradient(70% 60% at 50% 65%,rgba(124,108,255,.28),transparent 70%),linear-gradient(180deg,#F1EFFC,#E7E4F8);box-shadow:inset 0 0 0 1px rgba(15,18,24,.05)}
.s-donker #profiel .h-profiel-tel img{filter:drop-shadow(0 40px 50px rgba(30,20,90,.35))}
.s-donker #profiel .h-lijst>div,.s-donker #profiel .h-lijst>div:last-child{border-color:rgba(15,18,24,.08)}
.s-donker #telefoons .h-tel-kolommen{border-top-color:#A8843A}.s-donker #telefoons .h-tel-kolommen>div+div,.s-donker #telefoons .h-tel-kolommen>div{border-color:rgba(15,18,24,.08)}
.s-donker #zakelijk .h-team-beeld{border:1px solid rgba(15,18,24,.06);box-shadow:0 50px 100px -50px rgba(30,20,90,.5)}
.s-donker #prijzen .h-staffel th,.s-donker #prijzen .h-staffel td{border-bottom-color:rgba(15,18,24,.08)}
.s-donker #prijzen .h-staffel thead th{color:#8B90A0}.s-donker #prijzen .h-staffel tbody th{color:#4A4F5C}
.s-donker #prijzen .h-staffel td:nth-child(2){color:#0F1218}.s-donker #prijzen .h-staffel td:last-child,.s-donker #prijzen .h-staffel tbody tr:last-child td:nth-child(2){color:#866627}
.s-donker #prijzen .h-bestel,.s-donker #prijzen .h-bestel li{border-color:rgba(15,18,24,.08)}
.s-donker #vragen .s-vraag,.s-donker #vragen .s-vraag[open]{background:#F5F4FA;box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}
.s-donker #vragen .s-vraag summary{color:#0F1218}.s-donker #vragen .s-vraag summary:hover{color:#4433E6}
.s-donker #vragen .s-vraag summary span::before,.s-donker #vragen .s-vraag summary span::after{background:#0F1218}
.s-donker #vragen .s-faq-meer a{color:#0F1218}

/* ======== horizon-overgangen: hero → licht en licht → voet (1-11) ======== */
@keyframes hz-licht{0%{background-position:0% 0,0 0}50%{background-position:100% 0,0 0}100%{background-position:0% 0,0 0}}
@keyframes hz-adem{0%,100%{box-shadow:0 -1px 0 rgba(200,194,255,.95),0 -24px 70px -10px rgba(124,108,255,.55),0 -90px 160px -40px rgba(68,51,230,.45)}
  50%{box-shadow:0 -1px 0 rgba(220,215,255,1),0 -34px 90px -8px rgba(124,108,255,.75),0 -120px 200px -40px rgba(68,51,230,.6)}}
/* hero-kant: #hoe blijft donker, de lichte boog komt eruit omhoog */
.s-donker main>#hoe{background:linear-gradient(180deg,#12112A 0%,#0D0E1C 60%,#110F2A 100%)!important;padding-bottom:calc(var(--band) + 230px)}
.s-donker #hoe::after{content:"";position:absolute;z-index:0;left:-30%;right:-30%;bottom:-1px;height:260px;border-radius:50% 50% 0 0/100% 100% 0 0;
  background:radial-gradient(18% 120% at 50% 0%,rgba(165,155,255,.55),transparent 70%) 0 0/200% 100% no-repeat,linear-gradient(180deg,#E6E3FA 0%,#EEEDF8 45%);
  animation:hz-licht 14s ease-in-out infinite,hz-adem 6s ease-in-out infinite}
.s-donker #hoe>.wrap{position:relative;z-index:1}
/* voet-kant: wit boven, de donkere boog rijst op, het paneel zweeft erover */
.s-donker main>.s-slot{position:relative;isolation:isolate;background:#FFFFFF!important;padding-bottom:0;padding-top:var(--band)}
.s-donker .s-slot>.wrap{position:relative;z-index:2}
.s-donker .s-slot::before{content:"";position:absolute;z-index:0;left:-30%;right:-30%;bottom:-1px;height:300px;border-radius:50% 50% 0 0/100% 100% 0 0;
  background:radial-gradient(18% 120% at 50% 0%,rgba(91,75,239,.55),transparent 70%) 0 0/200% 100% no-repeat,linear-gradient(180deg,#14132E 0%,#0B0D14 55%);
  animation:hz-licht 16s ease-in-out infinite reverse,hz-adem 7s ease-in-out infinite}
.s-donker .s-slot-in{margin-bottom:90px}
:is(.s-donker,.s-thema) .sv{position:relative;z-index:1;margin-top:-1px}
@media (max-width:700px){.s-donker #hoe::after{height:150px;left:-60%;right:-60%}.s-donker main>#hoe{padding-bottom:calc(var(--band) + 120px)}.s-donker .s-slot::before{height:200px;left:-60%;right:-60%}.s-donker .s-slot-in{margin-bottom:60px}}
@media (prefers-reduced-motion:reduce){.s-donker #hoe::after,.s-donker .s-slot::before{animation:none}}
/* geen verloop: effen vlakken, scherpe boog, alleen de lichtrand als effect (1-11) */
.s-donker main>#hoe{background:#12112A!important;padding-bottom:calc(var(--band) + 120px)}
.s-donker #hoe::after{height:200px;background:#F4F3FB;animation:hz-adem 6s ease-in-out infinite}
.s-donker main>#ontwerpen{background:#F4F3FB!important;padding-top:20px}
.s-donker main>:is(#profiel,#telefoons,#zakelijk,#prijzen,#vragen){background:#FFFFFF!important}
.s-donker main>#profiel{border-top:1px solid rgba(15,18,24,.06)!important}
.s-donker .s-slot::before{height:260px;background:#0B0D14;animation:hz-adem 7s ease-in-out infinite}
:is(.s-donker,.s-thema) .sv{background:#0B0D14}
@media (max-width:700px){.s-donker #hoe::after{height:120px}.s-donker main>#hoe{padding-bottom:calc(var(--band) + 70px)}}
.s-donker .s-slot-in{box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 30px 60px -30px rgba(15,18,24,.35)}

/* ======== breuken met het product erop, i.p.v. boog (1-11) ======== */
.s-donker #hoe::after,.s-donker .s-slot::before{display:none!important}
.s-donker main>#hoe{background:#12112A!important;padding-bottom:calc(var(--band) + 70px)}
.s-donker main>#ontwerpen{background:#F4F3FB!important;padding-top:calc(var(--band) + 40px)}
.s-donker main>.s-slot{padding-bottom:calc(var(--band) + 40px)}
.s-donker .s-slot-in{margin-bottom:0}
:is(.s-donker,.s-thema) .sv{padding-top:calc(72px + 70px)}
.s-breuk{position:relative;z-index:5;height:0;display:none}
:is(.s-donker,.s-thema) .s-breuk{display:block}
.br-golf{position:absolute;left:50%;top:0;width:1400px;height:1400px;margin:-700px 0 0 -700px;pointer-events:none}
.br-boven{clip-path:inset(0 0 50% 0)}.br-onder{clip-path:inset(50% 0 0 0)}
.br-golf i{position:absolute;inset:0;border-radius:50%;border:1.5px solid;opacity:0;transform:scale(.12);animation:br-golf 4.8s cubic-bezier(.2,.6,.3,1) infinite}
.br-boven i{border-color:rgba(200,194,255,.55)}.br-onder i{border-color:rgba(68,51,230,.35)}
.br-golf i:nth-child(2){animation-delay:1.2s}.br-golf i:nth-child(3){animation-delay:2.4s}.br-golf i:nth-child(4){animation-delay:3.6s}
@keyframes br-golf{0%{opacity:0;transform:scale(.12)}12%{opacity:1}100%{opacity:0;transform:scale(1)}}
.br-kaart{position:absolute;left:50%;top:0;width:min(400px,56vw);height:auto;transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(0 30px 40px rgba(15,18,24,.45));animation:br-zweef 6s ease-in-out infinite}
@keyframes br-zweef{0%,100%{transform:translate(-50%,-50%) rotate(-8deg)}50%{transform:translate(-50%,-56%) rotate(-6deg)}}
.br-merk{position:absolute;left:50%;top:0;display:grid;place-items:center;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:#fff;--naad:#fff;
  box-shadow:0 0 0 1px rgba(15,18,24,.06),0 20px 50px -16px rgba(15,18,24,.55),0 0 0 10px rgba(255,255,255,.06)}
.br-merk svg{width:64px;height:64px}
.s-breuk-voet .br-boven i{border-color:rgba(68,51,230,.35)}.s-breuk-voet .br-onder i{border-color:rgba(200,194,255,.5)}
@media (max-width:700px){.br-golf{width:800px;height:800px;margin:-400px 0 0 -400px}.br-merk{width:84px;height:84px;margin:-42px 0 0 -42px}.br-merk svg{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.br-golf i{animation:none;opacity:.6;transform:scale(.35)}.br-golf i:nth-child(2){transform:scale(.6)}.br-golf i:nth-child(3){transform:scale(.85)}.br-kaart{animation:none}}
.br-golf i{border-width:2px}.br-boven i{border-color:rgba(200,194,255,.8)}.br-onder i{border-color:rgba(68,51,230,.5)}.s-breuk-voet .br-boven i{border-color:rgba(68,51,230,.5)}.s-breuk-voet .br-onder i{border-color:rgba(200,194,255,.75)}.br-kaart{width:min(460px,64vw)}


/* ======== alle andere pagina's: zelfde stijl als de homepage (body.s-thema, 1-11) ======== */
body.s-thema{background:#fff}
.s-thema .sv{padding-top:calc(72px + 70px)}
.s-kopband{position:relative;isolation:isolate;overflow:hidden;background:#12112A!important;color:#AEB3C2;padding-bottom:calc(clamp(40px,5vw,72px) + 80px)!important}
.s-kopband::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 75% at 80% 45%,rgba(68,51,230,.5),transparent 70%),radial-gradient(40% 60% at 5% 0%,rgba(143,132,255,.16),transparent 70%)}
.s-kopband::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 70% at 70% 50%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 50%,#000,transparent 75%)}
.s-kopband :is(h1,h2,h3,strong,dt,b){color:#fff}
.s-kopband h1{letter-spacing:-.05em}
.s-kopband :is(p,li,dd,small,span){color:#AEB3C2}
.s-kopband .h-lood{color:#AEB3C2}
.s-kopband .s-kruimel :is(a,li){color:#8E93A3}.s-kopband .s-kruimel li[aria-current]{color:#fff}.s-kopband .s-kruimel li+li::before{color:#4B4F60}
.s-kopband .knop{background:#fff!important;border-color:#fff!important;color:#1F1592!important;box-shadow:0 10px 30px -12px rgba(124,108,255,.8)}
.s-kopband .knop .kp{color:#1F1592}
.s-kopband .knop-lijn{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
.s-kopband .s-tekstlink,.s-kopband a:not(.knop){color:#fff;text-decoration-color:rgba(255,255,255,.3)}
.s-kopband .s-label,.s-kopband .hv-oog{color:#9C92FF}
.s-kopband .os-badge,.s-kopband .d-snel li{background:rgba(255,255,255,.08);color:#D6D8E0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.s-kopband .os-badge .ic,.s-kopband .o-prijsregel .ic,.s-kopband .hw-check .ic{color:#D9B866}
.s-kopband .h-podium{background:radial-gradient(70% 70% at 60% 40%,rgba(124,108,255,.35),transparent 70%),rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.s-kopband .o-cijfers{border-top-color:rgba(255,255,255,.12)}.s-kopband .o-cijfers li+li{border-left-color:rgba(255,255,255,.12)}
.s-kopband .hw-kort{background:rgba(255,255,255,.05);border-color:rgba(156,146,255,.3)}.s-kopband .hw-kort strong{color:#B9B1FF}.s-kopband .hw-kort p{color:#E2E3EA}
.s-kopband .hw-inhoud a{border-color:rgba(255,255,255,.15)}.s-kopband .hw-inhoud a:hover{border-color:#B9B1FF;color:#B9B1FF}
.s-kopband .c-gegevens{border-top-color:rgba(255,255,255,.1)}.s-kopband .c-gegevens li{border-bottom-color:rgba(255,255,255,.1)}
.s-kopband .c-gegevens svg{background:rgba(156,146,255,.15);color:#B9B1FF}.s-kopband .c-gegevens span{color:#fff}.s-kopband .c-gegevens a{color:#fff}
.s-kopband .c-onder{color:#8E93A3}
.s-kopband .p-art-meta{color:#8E93A3}
.s-kopband img:not(.br-kaart){filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.s-kopband .d-kopbeeld,.s-kopband .hw-hero-beeld img{filter:none!important;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.s-kopband .h-prijs strong{color:#fff}
.s-thema main>.s-breuk+*{padding-top:calc(var(--band) + 70px)!important}
.s-thema main>*:last-child{padding-bottom:calc(var(--band) + 30px)}
@media (max-width:700px){.br-golf{width:560px;height:560px;margin:-280px 0 0 -280px}}

/* homepage: "Zo werkt het" licht, los van de hero; breuk direct onder de hero (1-11) */
.s-donker .ww-in{padding-bottom:calc(clamp(56px,7vw,100px) + 70px)}
.s-donker main>#hoe{background:#FFFFFF!important;color:#4A4F5C;padding-top:calc(var(--band) + 70px);padding-bottom:var(--band)}
.s-donker main>#hoe::before{background:radial-gradient(40% 40% at 12% 40%,rgba(124,108,255,.08),transparent 70%)!important;inset:0!important}
.s-donker main>#ontwerpen{padding-top:var(--band);border-top:1px solid rgba(15,18,24,.06)}
.s-donker #hoe .h-stappen li{background:#F7F6FC;box-shadow:inset 0 0 0 1px rgba(15,18,24,.05)}
.s-donker #hoe .h-stappen li:hover{box-shadow:inset 0 0 0 1px rgba(168,132,58,.5),0 30px 60px -36px rgba(30,20,90,.35)}
.s-donker #hoe .h-stap-nr{background:#EEEDFD;color:#4433E6}
.s-donker #hoe .h-vgl .o-specs{background:#fff;border:1px solid rgba(15,18,24,.08)}
.s-donker #hoe .h-vgl td{color:#5D6371}
.s-donker #hoe .h-vgl tbody td:nth-child(2){color:#0F1218;background:#F4F3FB}
.h-vgl td .ic{display:inline-block;width:16px;height:16px;margin:0 8px -2px 0;color:#12B76A}
.s-donker #hoe .h-stappen li{padding:14px 14px 26px;border-radius:26px}.s-donker #hoe .h-stappen figure{border-radius:16px;overflow:hidden}.s-donker #hoe .h-stappen li>div{padding:0 10px}.s-donker #hoe .h-stap-nr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:.8125rem}
/* kaart op de breuk: zonder golven (Daniel 1-11) */
.s-breuk:not(.s-breuk-voet) .br-golf{display:none}
/* hero en paginakop: afgeronde onderhoeken (1-11) */
.s-donker main{background:#fff}
.ww,.s-kopband{border-radius:0 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px)}

/* telefoons-sectie (1-11): tekst links, twee getekende telefoons rechts */
.tf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0 clamp(40px,6vw,96px);align-items:center}
.tf-lood{margin:18px 0 30px;font-size:1.0625rem}
.tf-qr{display:flex;gap:20px;align-items:center;padding:18px;border-radius:20px;background:#F5F4FA}
.tf-qrcode{width:96px;height:96px;flex:none;border-radius:10px;box-shadow:0 0 0 1px rgba(15,18,24,.06)}
.tf-qr strong{display:block;margin-bottom:4px}.tf-qr p{margin:0;font-size:.9375rem}
.tf-privacy{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;font-size:.9375rem}
.tf-privacy svg{width:20px;height:20px;flex:none;margin-top:2px;color:#866627}
.tf-tels{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(24px,3vw,40px);border-radius:28px;background:radial-gradient(70% 60% at 50% 30%,rgba(68,51,230,.35),transparent 70%),#12112A}
.tf-tel{margin:0;display:grid;justify-items:center;gap:18px;text-align:center}
.tf-svg{width:min(150px,100%);height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
.tf-zone{transform-box:fill-box;transform-origin:center;animation:tf-puls 2.4s ease-in-out infinite}
@keyframes tf-puls{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.08);opacity:1}}
.tf-tel figcaption{display:grid;gap:6px}
.s-donker #telefoons .tf-tel strong{color:#fff;font-size:1.15rem}
.s-donker #telefoons .tf-tel span{color:#AEB3C2;font-size:.875rem;line-height:1.5}
.s-donker #telefoons .tf-tel .s-tekstlink{color:#fff;font-size:.875rem;justify-self:center;text-decoration-color:rgba(255,255,255,.35)}
@media (max-width:900px){.tf{grid-template-columns:1fr;gap:32px}}
@media (prefers-reduced-motion:reduce){.tf-zone{animation:none}}
.tf-tels{align-items:start}.tf-tel figcaption{min-height:7.5em;align-content:start}

/* telefoons-sectie v2: echte telefoon + kaart, met aanwijzers (1-11) */
.tf{grid-template-areas:"o o" "t s" "t l"}.tf>.s-oog{grid-area:o}.tf-tekst{grid-area:t}.tf-scene{grid-area:s}.tf-links{grid-area:l}
.tf-scene{position:relative;aspect-ratio:1/1;border-radius:32px;overflow:hidden;background:#12112A}
.tf-gloed{position:absolute;inset:0;background:radial-gradient(45% 50% at 50% 35%,rgba(91,75,239,.65),transparent 70%),radial-gradient(60% 40% at 50% 110%,rgba(217,184,102,.12),transparent 70%)}
.tf-tel-img{position:absolute;left:31%;top:9%;width:38%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.tf-kaart{position:absolute;left:44%;top:3%;width:42%;height:auto;transform:rotate(-12deg);filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));animation:tf-tik 4s ease-in-out infinite}
@keyframes tf-tik{0%,100%{transform:translate(0,0) rotate(-12deg)}45%,60%{transform:translate(-6%,4%) rotate(-9deg)}}
.tf-ring{position:absolute;left:50%;top:15%;width:0;height:0}
.tf-ring i{position:absolute;left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;border:2px solid rgba(185,177,255,.85);opacity:0;animation:tf-ring 4s ease-out infinite}
.tf-ring i:nth-child(2){animation-delay:.25s}.tf-ring i:nth-child(3){animation-delay:.5s}
@keyframes tf-ring{0%,40%{opacity:0;transform:scale(.3)}48%{opacity:1}80%,100%{opacity:0;transform:scale(2.2)}}
.tf-pin{position:absolute;display:grid;gap:2px;margin:0;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font-size:.8125rem;z-index:3}
.tf-pin b{color:#0F1218;font-size:.9375rem}.s-donker #telefoons .tf-pin span{color:#5D6371}
.tf-pin::after{content:"";position:absolute;top:50%;width:46px;height:1px;background:rgba(255,255,255,.7)}
.tf-pin::before{content:"";position:absolute;top:calc(50% - 4px);width:9px;height:9px;border-radius:50%;background:#B9B1FF;box-shadow:0 0 0 4px rgba(185,177,255,.25)}
.tf-pin-1{left:5%;top:14%}.tf-pin-1::after{left:100%}.tf-pin-1::before{left:calc(100% + 46px)}
.tf-pin-2{right:4%;top:47%}.tf-pin-2::after{right:100%}.tf-pin-2::before{right:calc(100% + 46px)}
.tf-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin:18px 0 0;padding:0;list-style:none;justify-content:center}
@media (max-width:900px){.tf{grid-template-areas:"o" "t" "s" "l"}.tf-pin{font-size:.72rem;padding:8px 10px}.tf-pin b{font-size:.8125rem}.tf-pin::after{width:22px}.tf-pin-1::before{left:calc(100% + 22px)}.tf-pin-2::before{right:calc(100% + 22px)}}
@media (prefers-reduced-motion:reduce){.tf-kaart,.tf-ring i{animation:none}}
.tf-tel-img{left:36%;top:16%;width:28%}
.tf-kaart{left:47%;top:5%;width:36%}
.tf-ring{left:50%;top:20%}
.tf-pin-1{left:4%;top:20%}.tf-pin-2{right:4%;top:50%}
.tf-pin::after{width:28px;background:rgba(185,177,255,.9)}
.tf-pin-1::before{left:calc(100% + 28px)}.tf-pin-2::before{right:calc(100% + 28px)}
.tf-scene{aspect-ratio:1/.9}.tf-tel-img{left:34.5%;top:19%;width:31%}.tf-kaart{left:48%;top:6%;width:38%}.tf-ring{left:50%;top:24%}.tf-pin-1{top:25%}.tf-pin-2{top:58%}
.tf-pin{white-space:nowrap}.tf-pin-1{left:3%}.tf-pin-2{right:3%}

/* telefoons-sectie v3: typografisch, paneel met scène en specificatiestrook (1-11) */
.tf2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 clamp(48px,6vw,104px);align-items:center}
.tf2>.s-oog{grid-column:1/-1}
.tf2 h2{font-size:clamp(2.2rem,3.6vw,3.3rem);line-height:1.02;max-width:13ch}
.tf2-lood{margin:22px 0 36px;font-size:1.0625rem;line-height:1.7;max-width:44ch}
.tf2-feiten{display:grid;margin:0;border-top:1px solid #0F1218}
.tf2-feiten>div{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(15,18,24,.1)}
.tf2-feiten dt{font:700 1.9rem/1 var(--kopfont);letter-spacing:-.04em;color:#0F1218;font-variant-numeric:tabular-nums}
.tf2-feiten dd{margin:0;font-size:.9375rem;color:#5D6371}
.tf2-klein{margin:20px 0 0;font-size:.875rem;color:#8B90A0}
.tf2-paneel{border-radius:32px;overflow:hidden;background:#12112A;box-shadow:0 50px 100px -50px rgba(30,20,90,.6)}
.tf2-scene{position:relative;aspect-ratio:1/.78;overflow:hidden}
.tf2-tel{position:absolute;left:33%;top:16%;width:34%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.tf2-kaart{position:absolute;left:45%;top:2%;width:40%;height:auto;transform:rotate(-10deg);filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));animation:tf-tik 4s ease-in-out infinite}
.tf2-ring{position:absolute;left:50%;top:22%;width:0;height:0}
.tf2-ring i{position:absolute;left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;border:1.5px solid rgba(185,177,255,.8);opacity:0;animation:tf-ring 4s ease-out infinite}
.tf2-ring i:nth-child(2){animation-delay:.25s}.tf2-ring i:nth-child(3){animation-delay:.5s}
.tf2-strip{display:grid;grid-template-columns:1fr 1fr 1.1fr;margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.tf2-strip li{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px}
.tf2-strip li+li{border-left:1px solid rgba(255,255,255,.08)}
.s-donker #telefoons .tf2-strip strong{color:#fff;font-size:.9375rem}
.s-donker #telefoons .tf2-strip span{color:#A9AEBB;font-size:.8125rem;line-height:1.5}
.s-donker #telefoons .tf2-strip .tf2-nr{color:#D9B866;font:600 .75rem var(--font);letter-spacing:.08em}
.s-donker #telefoons .tf2-strip a{margin-top:auto;padding-top:6px;color:#fff;font-size:.8125rem;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
.tf2-qr{flex-direction:row!important;align-items:center;gap:14px!important}
.tf2-qr .tf-qrcode{width:72px;height:72px;box-shadow:none}
.tf2-qr>span{display:flex;flex-direction:column;gap:4px}
@media (max-width:1000px){.tf2{grid-template-columns:1fr;gap:40px}}
@media (max-width:640px){.tf2-strip{grid-template-columns:1fr}.tf2-strip li+li{border-left:0;border-top:1px solid rgba(255,255,255,.08)}.tf2-feiten>div{grid-template-columns:90px 1fr}}
@media (prefers-reduced-motion:reduce){.tf2-kaart,.tf2-ring i{animation:none}}
.s-donker #telefoons .tf2-strip a{color:#fff!important}.s-donker #telefoons .tf2-strip strong{line-height:1.35}
/* telefoons-paneel licht, met echte Apple- en Android-logo's (1-11) */
.tf2-paneel{background:#F4F3FB;box-shadow:0 0 0 1px rgba(15,18,24,.05),0 50px 100px -60px rgba(30,20,90,.45)}
.tf2-scene .tf-gloed{background:radial-gradient(45% 55% at 50% 40%,rgba(124,108,255,.35),transparent 70%)}
.tf2-tel{filter:drop-shadow(0 40px 50px rgba(30,20,90,.35))}
.tf2-kaart{filter:drop-shadow(0 24px 28px rgba(15,18,24,.35))}
.tf2-ring i{border-color:rgba(68,51,230,.55)}
.tf2-strip{background:#fff;border-top:1px solid rgba(15,18,24,.07)}
.tf2-strip li+li{border-left-color:rgba(15,18,24,.07)}
.s-donker #telefoons .tf2-strip strong{color:#0F1218}
.s-donker #telefoons .tf2-strip span{color:#5D6371}
.s-donker #telefoons .tf2-strip a{color:#0F1218!important;text-decoration-color:rgba(15,18,24,.25)}
.tf2-logo{width:26px;height:26px;margin-bottom:6px}
.tf2-apple{color:#0F1218}.tf2-android{color:#3DDC84}
.tf2-qr .tf-qrcode{box-shadow:0 0 0 1px rgba(15,18,24,.08)}
@media (max-width:640px){.tf2-strip li+li{border-top-color:rgba(15,18,24,.07)}}

/* zo werkt het: filmstrook (hoe_premium.py, goedgekeurd 1-11) */
.zw{background:#fff}
.zw .s-oog{color:#0F1218}.zw .s-oog span{color:#866627}.zw .s-oog::after{background:linear-gradient(90deg,rgba(168,132,58,.5),rgba(15,18,24,.08) 30%)}
.zw-kop{display:grid;grid-template-columns:1.25fr .75fr;gap:24px 80px;align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.zw-kop h2{margin:0;font-size:clamp(2.6rem,5.2vw,4.6rem);line-height:.98;letter-spacing:-.055em;color:#0F1218;max-width:11ch}
.zw-kop p{margin:0 0 16px;font-size:1.0625rem;line-height:1.7;color:#5D6371;max-width:36ch}
.zw .s-tekstlink{color:#0F1218;text-decoration-color:rgba(15,18,24,.25)}
.zw-strook{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin:0;padding:0;list-style:none}
.zw-beeld{position:relative;aspect-ratio:4/4.6;margin-bottom:28px;border-radius:24px;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 42%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E6E3F4 100%);
  box-shadow:inset 0 0 0 1px rgba(15,18,24,.04);transition:box-shadow .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.zw-beeld img{position:absolute;height:auto}
.zw-stapel{left:8%;top:22%;width:84%;filter:drop-shadow(0 30px 34px rgba(30,20,90,.28))}
.zw-tel{left:30%;top:13%;width:40%;filter:drop-shadow(0 34px 40px rgba(30,20,90,.32))}
.zw-f2 .zw-kaart{left:38%;top:5%;width:52%;transform:rotate(-12deg);filter:drop-shadow(0 22px 26px rgba(15,18,24,.35));animation:zw-tik 6s ease-in-out infinite}
@keyframes zw-tik{0%,30%,100%{transform:translate(8%,-4%) rotate(-14deg)}42%,60%{transform:translate(-2%,4%) rotate(-10deg)}}
.zw-ring{position:absolute;left:52%;top:20%}
.zw-ring i{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;border:1.5px solid rgba(68,51,230,.6);opacity:0;animation:zw-ring 6s ease-out infinite}
.zw-ring i:nth-child(2){animation-delay:.2s}.zw-ring i:nth-child(3){animation-delay:.4s}
@keyframes zw-ring{0%,40%{opacity:0;transform:scale(.3)}46%{opacity:1}70%,100%{opacity:0;transform:scale(2.3)}}
.zw-toast{position:absolute;left:12%;right:12%;top:62%;display:flex;gap:10px;align-items:center;margin:0;padding:11px 14px 11px 11px;border-radius:16px;background:rgba(255,255,255,.97);
  box-shadow:0 24px 40px -18px rgba(30,20,90,.45),0 0 0 1px rgba(15,18,24,.04);font-size:.8125rem;animation:zw-toast 6s ease-in-out infinite}
.zw-toast>span:first-child{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:#12B76A;color:#fff}.zw-toast .ic{width:16px;height:16px}
.zw-toast strong{display:block;color:#0F1218}.zw-toast small{color:#5D6371}
@keyframes zw-toast{0%,66%{opacity:0;transform:translateY(12px)}72%,96%{opacity:1;transform:none}100%{opacity:0}}
.zw-tijd{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:600 .75rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#0F1218}
.zw-tijd span{color:#866627;letter-spacing:.04em}
.zw-f h3{margin:0 0 10px;font-size:1.3rem;line-height:1.25;letter-spacing:-.02em;color:#0F1218}
.zw-f>p:last-child{margin:0;font-size:.96875rem;line-height:1.65;color:#5D6371;max-width:34ch}
.zw-lijn{position:relative;height:1px;margin-top:44px;background:rgba(15,18,24,.1)}
.zw-lijn i{position:absolute;left:0;top:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,#D9B866,#A8843A);animation:zw-lijn 6s linear infinite}
@keyframes zw-lijn{0%{width:0}33%{width:33.3%}66%{width:66.6%}96%{width:100%}100%{width:100%;opacity:0}}
.zw-f1 .zw-beeld{animation:zw-act1 6s infinite}.zw-f2 .zw-beeld{animation:zw-act2 6s infinite}.zw-f3 .zw-beeld{animation:zw-act3 6s infinite}
@keyframes zw-act1{0%,30%{box-shadow:inset 0 0 0 1px rgba(168,132,58,.55),0 40px 70px -46px rgba(30,20,90,.55)}36%,100%{box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}}
@keyframes zw-act2{0%,33%,66%,100%{box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}36%,63%{box-shadow:inset 0 0 0 1px rgba(168,132,58,.55),0 40px 70px -46px rgba(30,20,90,.55)}}
@keyframes zw-act3{0%,66%{box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}69%,97%{box-shadow:inset 0 0 0 1px rgba(168,132,58,.55),0 40px 70px -46px rgba(30,20,90,.55)}}
@media (max-width:900px){.zw-kop{grid-template-columns:1fr}.zw-strook{grid-template-columns:1fr;gap:44px;max-width:520px}.zw-lijn{display:none}}
@media (prefers-reduced-motion:reduce){.zw *{animation:none!important}.zw-toast{opacity:1}}

.zw .h-vgl{margin-top:clamp(64px,7vw,96px)}
.zw .h-vgl h3{font-size:1.5rem;letter-spacing:-.03em;color:#0F1218}
/* hoe-werkt-pagina: hero in actie + intro (1-11) */
.ww.s-kopband{padding-bottom:0!important}.ww.s-kopband::before,.ww.s-kopband::after{display:none}
.ww.s-kopband .ww-in{padding-bottom:calc(clamp(56px,7vw,100px) + 70px)}
.ww.s-kopband img{filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))!important}
.ww.s-kopband .ww-toast span,.ww.s-kopband .ww-toast small{color:#5D6371}.ww.s-kopband .ww-toast strong{color:#0F1218}
.ww.s-kopband .ww-pil{color:#D6D8E0}
.hw-intro{padding-top:calc(var(--band) + 50px)!important}
.hw-intro-in{max-width:860px}
.hw-intro .hw-kort{padding:26px 28px;border-radius:20px;background:#F4F3FB;border:0;margin-top:10px}
.hw-intro .hw-kort strong{color:#866627}.hw-intro .hw-kort p{color:#0F1218;font-size:1.0625rem}
.hw-intro .hw-inhoud a{background:#fff}
.hw-intro+.s-breuk{display:none}
.hw-intro-in{max-width:none}.hw-intro .hw-kort,.hw-intro .hw-inhoud{max-width:820px}

/* breuk: waaier van ontwerpen op de lijn (1-11) */
.bw-rij{position:absolute;left:50%;top:0;width:min(940px,96vw);height:0;transform:translateX(-50%)}
.bw{position:absolute;top:0;height:auto;filter:drop-shadow(0 26px 30px rgba(15,18,24,.35));animation:bw-zweef 7s ease-in-out infinite}
.bw0{left:2%;width:15%;--r:-14deg;--y:-46%;animation-delay:-1s}
.bw1{left:13%;width:25%;--r:-9deg;--y:-40%;animation-delay:-2.5s}
.bw2{left:34%;width:32%;--r:-3deg;--y:-52%;z-index:3;animation-delay:0s}
.bw3{right:13%;width:25%;--r:8deg;--y:-38%;z-index:2;animation-delay:-4s}
.bw4{right:2%;width:15%;--r:13deg;--y:-48%;animation-delay:-5.5s}
.bw{transform:translateY(var(--y)) rotate(var(--r))}
@keyframes bw-zweef{0%,100%{transform:translateY(var(--y)) rotate(var(--r))}50%{transform:translateY(calc(var(--y) - 5%)) rotate(var(--r))}}
.bw2{filter:drop-shadow(0 34px 40px rgba(15,18,24,.45))}
@media (max-width:700px){.bw0,.bw4{display:none}.bw1{left:0;width:32%}.bw2{left:28%;width:44%}.bw3{right:0;width:32%}}
@media (prefers-reduced-motion:reduce){.bw{animation:none}}

/* één navbar overal: effen inkt, ook boven witte inhoud en in winkel/account/dashboard/configurator (1-11) */
:is(.s-donker,.s-thema,.wagenpagina) .kop{background:#0B0D14!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.afkop,.dashboardpagina .db-kop,.beheerpagina .db-kop{background:#0B0D14!important;border-bottom:0!important;box-shadow:none!important}
:is(.afkop,.db-kop) .mk-naam{color:#fff!important}:is(.afkop,.db-kop) .mk-naam span,:is(.afkop,.db-kop) .mk-slogan{color:#8B90A0!important}
:is(.afkop,.db-kop) .kop-lijn{background:rgba(255,255,255,.2)!important}
.afkop .afkop-veilig,.afkop .afkop-veilig span{color:#D6D8E0!important}
.db-kop :is(a,button,span,p,small,strong){color:#D6D8E0}
.wagenpagina::before,.afrekenpagina::before,.loginpagina::before{display:none!important}
html body.dashboardpagina header.db-kop,html body.beheerpagina header.db-kop{background:#0B0D14!important;border-bottom:0!important;box-shadow:none!important}
html body.dashboardpagina header.db-kop :is(.db-nav a,.db-nav button){color:#C9CBD3!important;background:transparent!important;border-color:transparent!important}
html body.dashboardpagina header.db-kop :is(.db-nav a,.db-nav button):is([aria-current],.actief,[aria-selected="true"]){color:#fff!important;background:rgba(255,255,255,.1)!important}
html body.dashboardpagina header.db-kop .db-nav-n{background:rgba(255,255,255,.14)!important;color:#fff!important}
html body.dashboardpagina header.db-kop :is(strong,b){color:#fff!important}
html body.dashboardpagina header.db-kop :is(small){color:#8B90A0!important}
html body.dashboardpagina header.db-kop :is(.db-uit,.db-uitlog,button[aria-label*="Uitlog"],a[aria-label*="Uitlog"]){background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:transparent!important}
html body.dashboardpagina header.db-kop .mk-naam{color:#fff!important}
.wagenpagina .kop .wagenknop{background:rgba(255,255,255,.1)!important;color:#fff!important}
/* paginakop: accentwoord zoals op de homepage (1-11) */
.s-kopband h1 em{font-style:normal;background:linear-gradient(100deg,#B9B1FF 0%,#7D6CFF 60%,#B9B1FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.s-kopband h1{color:#fff}
.s-thema .s-oog span{color:#866627}.s-thema .s-oog::after{background:linear-gradient(90deg,rgba(168,132,58,.5),rgba(15,18,24,.08) 30%)}.s-thema main h2,.s-thema main h3{color:#0F1218}.s-thema .s-kopband h2,.s-thema .s-kopband h3{color:#fff}
/* paginakop: geen kader achter het beeld, alleen zacht licht zoals in de homepage-hero (1-11) */
.s-kopband .h-podium{background:radial-gradient(closest-side,rgba(124,108,255,.45),transparent 75%)!important;box-shadow:none!important;border:0!important;border-radius:50%!important;filter:blur(20px)}
/* zakelijk 'waarom' in filmstrook-stijl (1-11) */
.zz-team{left:4%;top:16%;width:92%;filter:drop-shadow(0 30px 34px rgba(30,20,90,.28))}
.zz-toast{top:58%;animation:none}
.zz-dash{left:12%;top:14%;width:150%;border-radius:14px;box-shadow:0 30px 60px -30px rgba(30,20,90,.45),0 0 0 1px rgba(15,18,24,.06)}
.zz-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:28px 0 0;padding:0;list-style:none}
.zz-extra li{padding:4px 28px 0 0;font-size:.9375rem;color:#5D6371;line-height:1.6}
.zz-extra li+li{padding-left:28px;border-left:1px solid rgba(15,18,24,.1)}
.zz-extra span{display:block;margin-bottom:8px;font:600 .75rem var(--font);letter-spacing:.06em;color:#866627}
.zz-extra strong{display:block;margin-bottom:4px;color:#0F1218;font-size:1.0625rem}
@media (max-width:900px){.zz-extra{grid-template-columns:1fr}.zz-extra li,.zz-extra li+li{padding:16px 0;border-left:0;border-top:1px solid rgba(15,18,24,.1)}}
.zw-strook .zw-f1 .zz-team{top:24%}
/* zakelijk werkwijze in filmstrook-stijl (1-11) */
.zk{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0 clamp(48px,6vw,96px);align-items:center}.zk>.s-oog{grid-column:1/-1}
.zk h2{margin:0;font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.055em;color:#0F1218;max-width:12ch}
.zk-lood{margin:20px 0 30px;font-size:1.0625rem;line-height:1.7;color:#5D6371}
.zk-stappen{margin:0;padding:0;list-style:none;border-top:1px solid #0F1218}
.zk-stappen li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid rgba(15,18,24,.1)}
.zk-stappen span{font:700 .8125rem/1.6 var(--font);letter-spacing:.06em;color:#866627}
.zk-stappen strong{display:block;color:#0F1218;font-size:1.0625rem}.zk-stappen p{margin:4px 0 0;font-size:.9375rem;color:#5D6371}
.zk-stappen a{color:#0F1218}
.zk-beeld{aspect-ratio:1/1;margin:0;animation:none!important;box-shadow:inset 0 0 0 1px rgba(15,18,24,.04),0 50px 90px -60px rgba(30,20,90,.5)!important}
.zk-k1,.zk-k2,.zk-k3{width:50%;filter:drop-shadow(0 24px 28px rgba(30,20,90,.3))}
.zk-k1{left:4%;top:12%;transform:rotate(-12deg)}.zk-k2{left:10%;top:30%;transform:rotate(-6deg)}.zk-k3{left:16%;top:48%;transform:rotate(0)}
.zk-tel{left:58%;top:10%;width:34%;filter:drop-shadow(0 34px 40px rgba(30,20,90,.35))}
.zk-team{position:absolute;left:6%;bottom:6%;display:grid;gap:6px;margin:0;padding:12px;list-style:none;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 20px 40px -18px rgba(30,20,90,.4);font-size:.8125rem;color:#0F1218;font-weight:600}
.zk-team li{display:grid;grid-template-columns:28px 1fr;gap:0 10px;align-items:center}.zk-team b{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#EEEDFD;color:#4433E6;font-size:.6875rem}
.zk-team small{color:#8B90A0;font-weight:500;font-size:.75rem}
@media (max-width:900px){.zk{grid-template-columns:1fr;gap:36px}}
#werkwijze{background:#fff!important}.zk-team{left:auto;right:42%;bottom:5%}
/* homepage prijzen: product spreekt (1-11) */
.pz{display:grid;gap:14px}
.pz-beeld{aspect-ratio:1/.72;margin:0;animation:none!important;box-shadow:inset 0 0 0 1px rgba(15,18,24,.04),0 50px 90px -60px rgba(30,20,90,.5)!important}
.pz-stapel{left:6%;top:10%;width:72%;filter:drop-shadow(0 30px 34px rgba(30,20,90,.3))}
.pz-tag{position:absolute;right:6%;bottom:9%;display:grid;gap:2px;margin:0;padding:16px 20px;border-radius:18px;background:#0F1218;color:#AEB3C2;box-shadow:0 24px 40px -18px rgba(15,18,24,.6)}
.pz-tag small{font:600 .6875rem var(--font);letter-spacing:.1em;text-transform:uppercase;color:#D9B866}
.pz-tag b{font:700 2.3rem/1.05 var(--kopfont);letter-spacing:-.04em;color:#fff}
.s-donker #prijzen .pz-tag span{color:#AEB3C2;font-size:.8125rem}
.pz-staffel{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.07)}
.pz-staffel li{display:grid;gap:4px;padding:16px 16px;text-align:left}
.pz-staffel li+li{border-left:1px solid rgba(15,18,24,.07)}
.s-donker #prijzen .pz-staffel span{font-size:.75rem;color:#8B90A0}
.s-donker #prijzen .pz-staffel b{font-size:1.125rem;color:#0F1218;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.s-donker #prijzen .pz-staffel small{font-size:.75rem;font-weight:600;color:#866627;min-height:1.1em}
.pz-laag{background:#F4F3FB;border-radius:0 20px 20px 0}.s-donker #prijzen .pz-laag b{color:#866627}
@media (max-width:640px){.pz-staffel{grid-template-columns:repeat(3,1fr)}.pz-staffel li:nth-child(4){border-left:0}.pz-staffel li:nth-child(n+4){border-top:1px solid rgba(15,18,24,.07)}.pz-tag b{font-size:1.7rem}}

/* profiel met genummerde aanwijzers die rondgaan (1-11) */
.pf-fig{padding:clamp(28px,4vw,48px) clamp(36px,6vw,80px) 0!important;overflow:hidden}
.pf-tel{position:relative;margin-bottom:-14%}
.pf-tel img{width:100%;margin:0!important;display:block}
.pf-pin{position:absolute;z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #A8843A,0 8px 18px -6px rgba(15,18,24,.45);animation:pf-pin 15s infinite}
.pf-pin b{font:700 .75rem var(--font);color:#866627}
.pf-pin::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #D9B866;opacity:0;animation:pf-golf 15s infinite}
.pf-lijst>div{position:relative;transition:background .3s;animation:pf-rij 15s infinite;border-radius:12px;padding-inline:12px!important;margin-inline:-12px}
.pf-lijst dt span{display:inline-block;width:32px;font:700 .75rem var(--font);color:#866627;letter-spacing:.04em}
.pf-p0,.pf-p0::before,.pf-p0 b,.pf-r0{animation-delay:0.0s}
.pf-p1,.pf-p1::before,.pf-p1 b,.pf-r1{animation-delay:2.5s}
.pf-p2,.pf-p2::before,.pf-p2 b,.pf-r2{animation-delay:5.0s}
.pf-p3,.pf-p3::before,.pf-p3 b,.pf-r3{animation-delay:7.5s}
.pf-p4,.pf-p4::before,.pf-p4 b,.pf-r4{animation-delay:10.0s}
.pf-p5,.pf-p5::before,.pf-p5 b,.pf-r5{animation-delay:12.5s}
@keyframes pf-pin{0%,16%{transform:scale(1.25);background:#A8843A}0%,16%{}17%,100%{transform:scale(1);background:#fff}}
.pf-pin{animation-name:pf-pin}
@keyframes pf-pin{0%{transform:scale(1.25);background:#A8843A;color:#fff}15%{transform:scale(1.25);background:#A8843A}17%,100%{transform:scale(1);background:#fff}}
.pf-pin b{animation:pf-b 15s infinite;animation-delay:inherit}
@keyframes pf-b{0%,15%{color:#fff}17%,100%{color:#866627}}
@keyframes pf-golf{0%{opacity:.9;transform:scale(1)}15%{opacity:0;transform:scale(2.2)}100%{opacity:0}}
@keyframes pf-rij{0%,15%{background:#F1EFFC}17%,100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.pf-pin,.pf-pin::before,.pf-lijst>div,.pf-pin b{animation:none}}
.pf-lijst>.pf-r0{animation-delay:0.0s}
.pf-lijst>.pf-r1{animation-delay:2.5s}
.pf-lijst>.pf-r2{animation-delay:5.0s}
.pf-lijst>.pf-r3{animation-delay:7.5s}
.pf-lijst>.pf-r4{animation-delay:10.0s}
.pf-lijst>.pf-r5{animation-delay:12.5s}
@keyframes pf-rij{0%,15%{background:#EFEDFB}17%,100%{background:transparent}}
.pf-lijst>div{margin-inline:-14px;padding-inline:14px!important}
/* prijzen-kop: product spreekt (1-11) */
.pk-beeld{position:relative;aspect-ratio:1/.82}
.pk-stapel{position:absolute;left:4%;top:8%;width:86%;height:auto}
.pk-tag{right:2%;bottom:6%}
.s-kopband .pk-tag span,.s-kopband .pk-tag small{color:#AEB3C2}.s-kopband .pk-tag small{color:#D9B866}
.pk-tag2{position:absolute;left:2%;top:4%;display:grid;margin:0;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.s-kopband .pk-tag2 b{color:#0F1218;font-size:1.25rem}.s-kopband .pk-tag2 span{color:#5D6371;font-size:.75rem}
.s-thema .h-staffel td:last-child{color:#866627}
/* prijzen 'inbegrepen': dashboard spreekt (1-11) */
.ib{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 clamp(48px,6vw,96px);align-items:center}
.ib h2{margin:0;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.02;letter-spacing:-.05em;color:#0F1218;max-width:14ch}
.ib-lijst li{padding:14px 0}.ib-lijst p{font-size:.875rem}
.ib-beeld{aspect-ratio:1/1;margin:0;animation:none!important;box-shadow:inset 0 0 0 1px rgba(15,18,24,.04),0 50px 90px -60px rgba(30,20,90,.5)!important}
.ib-scherm{position:absolute;left:7%;top:12%;width:108%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 70px -30px rgba(30,20,90,.45),0 0 0 1px rgba(15,18,24,.06)}
.ib-scherm img{position:static!important;display:block;width:100%;height:auto}
.ib-balk{display:flex;gap:6px;padding:10px 12px;background:#F4F4F7;border-bottom:1px solid rgba(15,18,24,.06)}.ib-balk i{width:9px;height:9px;border-radius:50%;background:#D5D3DE}
.ib-tel{left:8%;top:40%;width:30%;filter:drop-shadow(0 34px 40px rgba(30,20,90,.4))}
.ib-tag{right:6%;bottom:7%}
.s-thema .ib-tag span{color:#AEB3C2}.s-thema .ib-tag small{color:#D9B866}.s-thema .ib-tag b{color:#fff}
@media (max-width:900px){.ib{grid-template-columns:1fr;gap:36px}}
.ib-tel{top:34%;width:28%}
/* inbegrepen v2: schoon statistiekenscherm, rustiger compositie */
.ib-beeld{aspect-ratio:1/.92}
.ib-scherm{left:6%;top:16%;width:96%;border-radius:16px}
.ib-tel{left:auto;right:4%;top:auto;bottom:-14%;width:24%}
.ib-tag{right:auto;left:4%;top:5%;bottom:auto;padding:14px 18px}
.ib-tag b{font-size:2rem}
.ib-scherm{top:22%}.ib-tag{left:auto;right:4%;top:4%}.ib-tel{bottom:3%;width:22%;right:3%}
.rs-st{left:14%;top:12%;width:36%;transform:rotate(-8deg);filter:drop-shadow(0 26px 30px rgba(30,20,90,.3))}.rs-lg{left:30%;top:42%;width:64%;transform:rotate(6deg);filter:drop-shadow(0 30px 34px rgba(30,20,90,.35))}
.rs-st{width:42%;left:10%;top:8%}.rs-lg{width:72%;left:24%;top:44%}
.s-thema #profiel{background:#fff}.s-thema .pf-fig{background:radial-gradient(70% 60% at 50% 65%,rgba(124,108,255,.28),transparent 70%),linear-gradient(180deg,#F1EFFC,#E7E4F8)!important;box-shadow:inset 0 0 0 1px rgba(15,18,24,.05)!important}
/* hoe-werkt 'in de praktijk': 4 productscènes (1-11) */
.pk4{display:grid;grid-template-columns:1fr 1fr;gap:48px 28px;margin:0;padding:0;list-style:none}
.pk4-b{aspect-ratio:16/10.5;animation:none!important}
.pk4-t{animation:none;left:auto;right:6%;top:auto;bottom:8%;max-width:280px}
.pk4-a1{left:10%;top:12%;width:20%;transform:rotate(-10deg);filter:drop-shadow(0 20px 24px rgba(30,20,90,.3))}
.pk4-a2{left:28%;top:18%;width:38%;transform:rotate(-3deg);z-index:2;filter:drop-shadow(0 24px 28px rgba(30,20,90,.32))}
.pk4-a3{left:56%;top:10%;width:34%;transform:rotate(8deg);filter:drop-shadow(0 20px 24px rgba(30,20,90,.3))}
.pk4-tel{left:14%;top:8%;width:30%;filter:drop-shadow(0 30px 36px rgba(30,20,90,.32))}
.pk4-mail{position:absolute;left:9%;right:9%;top:12%;bottom:12%;padding:20px 22px;border-radius:14px;background:#fff;box-shadow:0 30px 60px -30px rgba(30,20,90,.4),0 0 0 1px rgba(15,18,24,.05);font-size:.8125rem;color:#5D6371}
.pk4-mk{display:grid;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid rgba(15,18,24,.08)}.pk4-mk b{color:#0F1218;font-size:.9375rem}
.pk4-tx{margin:0 0 14px}
.pk4-sig{display:flex;gap:14px;align-items:center;padding-top:12px;border-top:2px solid #0F1218;max-width:340px}
.pk4-qr{width:64px;height:64px;flex:none}
.pk4-sig div{display:grid;gap:2px}.pk4-sig strong{color:#0F1218}.pk4-sig em{font-style:normal;color:#4433E6;font-weight:600}
.pk4-dash{position:absolute;left:8%;top:12%;width:110%;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(30,20,90,.45),0 0 0 1px rgba(15,18,24,.06)}.pk4-dash img{position:static!important;display:block;width:100%;height:auto}
@media (max-width:800px){.pk4{grid-template-columns:1fr}}
/* prijzen 'waarom geen abonnement': kaart + bon (1-11) */
.ab{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0 clamp(48px,6vw,96px);align-items:center}
.ab h2{margin:0;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.02;letter-spacing:-.05em;color:#0F1218}
.ab-beeld{aspect-ratio:1/.9;margin:0;animation:none!important}
.ab-kaart{left:6%;top:10%;width:62%;transform:rotate(-10deg);filter:drop-shadow(0 30px 34px rgba(30,20,90,.32))}
.ab-bon{position:absolute;right:7%;bottom:8%;width:min(300px,56%);padding:22px 22px 18px;background:#fff;border-radius:6px;box-shadow:0 30px 60px -26px rgba(30,20,90,.45);font-size:.875rem;
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 6px at 50% calc(100% + 1px),transparent 98%,#000) 0 0/16px 100% repeat-x;padding-bottom:26px}
.ab-kop{margin:0 0 12px;font:600 .6875rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:#866627}
.ab-bon dl{margin:0;display:grid;gap:8px;padding-bottom:12px;border-bottom:1px dashed rgba(15,18,24,.2)}
.ab-bon dl div{display:flex;justify-content:space-between;gap:12px}.ab-bon dt{color:#5D6371}.ab-bon dd{margin:0;color:#0F1218;font-weight:600;font-variant-numeric:tabular-nums}
.ab-tot{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 0}.ab-tot span{color:#0F1218;font-weight:600}.ab-tot b{font:700 1.6rem var(--kopfont);letter-spacing:-.03em;color:#0F1218}
@media (max-width:900px){.ab{grid-template-columns:1fr;gap:36px}}
/* afwisselen: beeld links bij "waarom geen abonnement" (1-11) */
.ab{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.ab .ab-beeld{order:-1}
@media (max-width:900px){.ab .ab-beeld{order:0}}
.s-donker #zakelijk .h-team{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.s-donker #zakelijk .h-team-beeld{order:-1}@media (max-width:1000px){.s-donker #zakelijk .h-team-beeld{order:0}}
.br-kaart{width:min(340px,48vw)}
.s-donker #zakelijk .h-team-beeld{order:0;grid-column:1;grid-row:2}.s-donker #zakelijk .h-team-tekst{grid-column:2;grid-row:2}.s-donker #zakelijk .h-team>.s-oog{grid-row:1}
@media (max-width:1000px){.s-donker #zakelijk .h-team-beeld,.s-donker #zakelijk .h-team-tekst{grid-column:1;grid-row:auto}}
.s-donker #zakelijk .zk-beeld{border:0;overflow:hidden;border-radius:24px}
/* naadloze overgang navbar → hero: geen gloed linksboven, bovenrand = navbarkleur (1-11) */
.ww-licht{background:radial-gradient(60% 70% at 78% 55%,rgba(68,51,230,.55) 0%,rgba(68,51,230,0) 70%),linear-gradient(180deg,#0B0D14 0%,#0B0D14 8%,#12112A 100%)!important}
.s-kopband{background:linear-gradient(180deg,#0B0D14 0%,#12112A 60%)!important}
.s-kopband::before{background:radial-gradient(55% 75% at 80% 55%,rgba(68,51,230,.5),transparent 70%)!important}
/* ontwerpenstrook direct onder de hero (1-11) */
.ds{padding:calc(var(--band) * .5 + 60px) 0 calc(var(--band) * .4);background:#fff;overflow:hidden}
.ds-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 30px;margin-bottom:34px}
.ds-kop p{margin:0;color:#5D6371;font-size:1.0625rem}.ds-kop b{color:#0F1218;font-family:var(--kopfont);font-size:1.5rem;letter-spacing:-.03em;margin-right:6px}
.ds-rij{position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ds-rij+.ds-rij{margin-top:18px}
.ds-band{display:flex;align-items:center;gap:22px;width:max-content;animation:ds-loop 90s linear infinite}
.ds-r2 .ds-band{animation-direction:reverse;animation-duration:110s}
.ds-rij:hover .ds-band{animation-play-state:paused}
.ds-band a{flex:none;display:block;transition:transform .35s var(--soepel)}
.ds-band a:hover{transform:translateY(-6px) rotate(-1deg)}
.ds-band img{display:block;height:150px;width:auto;filter:drop-shadow(0 14px 18px rgba(30,20,90,.22))}
.ds-band img.ds-staand{height:190px}
@keyframes ds-loop{to{transform:translateX(-50%)}}
.s-donker main>#hoe{padding-top:var(--band)!important}
@media (max-width:700px){.ds-band img{height:96px}.ds-band img.ds-staand{height:124px}.ds-kop b{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.ds-band{animation:none}}
.ds-band{gap:4px}.ds-band img{height:170px}.ds-band img.ds-staand{height:200px}
/* ontwerpenwand: stilstaand (Daniel: slider irritant) */
.ds-wand{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 18px;align-items:center;justify-items:center}
.ds-wand a{display:block;transition:transform .3s var(--soepel)}
.ds-wand a:hover{transform:translateY(-6px)}
.ds-wand img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(30,20,90,.2))}
.ds-wand img.ds-staand{width:auto;max-height:190px}
.ds-wand a:has(.ds-staand){height:190px;display:flex;align-items:center}
@media (max-width:900px){.ds-wand{grid-template-columns:repeat(3,1fr)}.ds-wand img.ds-staand,.ds-wand a:has(.ds-staand){max-height:150px;height:150px}}
@media (max-width:520px){.ds-wand{grid-template-columns:repeat(2,1fr)}}
/* één beeldvlak overal: gelijk aan .zw-beeld (1-11) */
.pf-fig,.s-thema .pf-fig,.s-donker .h-profiel-tel,.tf2-scene,.d-beeld,.s-thema .h-stappen figure{
  background:radial-gradient(70% 55% at 50% 42%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E6E3F4 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)!important;border-radius:24px!important}
.tf2-scene .tf-gloed{display:none}
.tf2-paneel{background:#fff}
.d-beeld{padding:clamp(24px,3vw,44px);overflow:hidden}
.d-beeld img.d-scherm{border-radius:12px}
.s-thema .h-stappen figure{padding:18px}
.s-thema .h-stappen figure img{border-radius:12px}
/* ontwerpenwand v2: één lavendel tafel, verspringend ritme (1-11) */
.ds{padding:calc(var(--band) * .55 + 60px) 0 calc(var(--band) * .5)}
.ds-kop2{margin-bottom:clamp(32px,4vw,52px)}
.ds-kop2 h2{max-width:13ch}
.ds-tafel{aspect-ratio:auto;margin:0;animation:none!important;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2.6vw,40px) clamp(14px,2vw,30px);align-items:center;justify-items:center;padding:clamp(36px,5vw,72px) clamp(24px,4vw,64px)}
.ds-tafel a{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:clamp(120px,13vw,190px);transition:transform .35s var(--soepel)}
.ds-tafel img{position:static!important;max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 18px 22px rgba(30,20,90,.24))}
.ds-tafel img:not(.ds-staand){width:100%}
.ds-tafel a:nth-child(6n+1){transform:rotate(-5deg) translateY(10px)}.ds-tafel a:nth-child(6n+2){transform:rotate(3deg) translateY(-8px)}.ds-tafel a:nth-child(6n+3){transform:rotate(-2deg) translateY(12px)}
.ds-tafel a:nth-child(6n+4){transform:rotate(4deg) translateY(-6px)}.ds-tafel a:nth-child(6n+5){transform:rotate(-3deg) translateY(8px)}.ds-tafel a:nth-child(6n){transform:rotate(5deg) translateY(-10px)}
.ds-tafel a:hover{transform:translateY(-14px) rotate(0) scale(1.06)!important;z-index:2}
.ds-tafel a:hover img{filter:drop-shadow(0 28px 32px rgba(30,20,90,.35))}
@media (max-width:900px){.ds-tafel{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.ds-tafel{grid-template-columns:repeat(2,1fr)}.ds-tafel a{height:110px}}
.s-donker main .ds :is(h2,strong){color:#0F1218}.s-donker main .ds p{color:#5D6371}
.s-donker main .ds .s-tekstlink{color:#0F1218;text-decoration-color:rgba(15,18,24,.25)}
.ds-tafel{background:radial-gradient(60% 50% at 50% 50%,#FFFFFF 0%,rgba(255,255,255,0) 75%),linear-gradient(180deg,#EFEDF8 0%,#E6E3F4 100%)!important}
.ds-tafel a{height:clamp(130px,14vw,200px)}
.ds-tafel img:not(.ds-staand){width:128%;max-width:none;max-height:none}.ds-tafel{column-gap:clamp(20px,3vw,44px)}
/* etalage: één ontwerp in de spotlight (1-11) */
.ds-tafel{display:none}
.et{display:grid;gap:18px}
.et-podium{position:relative;display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:20px;min-height:clamp(380px,40vw,520px);padding:clamp(28px,4vw,56px);border-radius:28px;overflow:hidden;
  background:radial-gradient(45% 70% at 36% 50%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%);box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}
.et-licht{position:absolute;left:12%;bottom:8%;width:46%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,20,90,.28),transparent);filter:blur(14px)}
.et-groot{position:relative;justify-self:center;width:min(88%,560px);height:auto;transform:rotate(-6deg) translateY(-8px);filter:drop-shadow(0 40px 50px rgba(30,20,90,.35));transition:opacity .18s,transform .5s var(--soepel)}
.et-groot.et-staand{width:auto;max-height:clamp(300px,32vw,430px);transform:rotate(-4deg) translateY(-6px)}
.et-groot.wissel{opacity:0;transform:rotate(-2deg) translateY(10px) scale(.96)}
.et-info{position:relative;display:grid;gap:8px;justify-items:start}
.s-donker main .ds .et-vak{margin:0;font:600 .75rem var(--font);letter-spacing:.12em;text-transform:uppercase;color:#866627}
.et-naam{margin:0 0 18px;font:700 clamp(2.4rem,4.4vw,3.8rem)/1 var(--kopfont);letter-spacing:-.05em;color:#0F1218}
.s-donker main .ds .et-naam{color:#0F1218}
.s-donker main .ds .knop{background:#0F1218;border-color:#0F1218;color:#fff}.s-donker main .ds .knop:hover{background:#4433E6;border-color:#4433E6}
.et-rij{display:grid;grid-template-columns:repeat(11,1fr);gap:10px;margin:0;padding:0;list-style:none}
.et-t{display:grid;place-items:center;width:100%;aspect-ratio:1/1;padding:8px;border:0;border-radius:16px;background:#F4F3FB;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s;text-decoration:none}
.et-t img{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 6px 8px rgba(30,20,90,.2))}
.et-t:hover{background:#ECEAF8;transform:translateY(-2px)}
.et-t.aan{background:#fff;box-shadow:0 0 0 2px #A8843A,0 14px 26px -14px rgba(30,20,90,.4)}
.et-alle{background:#0F1218;color:#fff;align-content:center;gap:2px}.et-alle b{font:700 1.15rem var(--kopfont);color:#fff}.s-donker main .ds .et-alle span{font-size:.6875rem;color:#AEB3C2;line-height:1.2;text-align:center}
.et-alle:hover{background:#4433E6}
@media (max-width:900px){.et-podium{grid-template-columns:1fr;text-align:left}.et-rij{grid-template-columns:repeat(6,1fr)}}
@media (max-width:520px){.et-rij{grid-template-columns:repeat(4,1fr)}}
.et-rij li{display:flex}.et-t{height:100%;aspect-ratio:1/1;overflow:hidden}.et-t img{max-height:84px;object-fit:contain}
/* waaier van ontwerpen (1-11) */
.et{display:none}
.wv{position:relative;padding:clamp(40px,5vw,72px) 0 clamp(28px,3vw,40px);border-radius:28px;overflow:hidden;
  background:radial-gradient(50% 60% at 50% 60%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%);box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}
.wv-hand{position:relative;height:clamp(300px,34vw,440px);margin:0;padding:0;list-style:none}
.wv-hand li{position:absolute;left:50%;bottom:0;width:clamp(120px,13vw,180px);margin-left:calc(clamp(120px,13vw,180px) / -2);
  transform-origin:50% 190%;transform:rotate(calc(var(--i) * 7deg));transition:transform .45s var(--soepel);z-index:1}
.wv-hand a{display:block;transition:transform .4s var(--soepel)}
.wv-hand img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(30,20,90,.3))}
.wv-hand li:hover,.wv-hand li:focus-within{z-index:5}
.wv-hand li:hover a,.wv-hand li:focus-within a{transform:translateY(-36px) scale(1.12)}
.wv-hand li:hover img{filter:drop-shadow(0 34px 40px rgba(30,20,90,.42))}
.wv-hand:hover li:not(:hover){transform:rotate(calc(var(--i) * 7.6deg))}
.wv-onder{display:grid;justify-items:center;gap:4px;margin:clamp(24px,3vw,40px) 0 0;text-align:center}
.s-donker main .ds .wv-vak{font:600 .75rem var(--font);letter-spacing:.12em;text-transform:uppercase;color:#866627}
.s-donker main .ds .wv-naam{font:700 clamp(1.4rem,2.4vw,2rem)/1.15 var(--kopfont);letter-spacing:-.03em;color:#0F1218}
@media (max-width:700px){.wv-hand li{transform-origin:50% 230%;transform:rotate(calc(var(--i) * 6deg))}.wv-hand li:nth-child(-n+2),.wv-hand li:nth-last-child(-n+2){display:none}}
.wv-onder{max-width:none!important;width:100%}
.wv{padding:clamp(56px,6vw,90px) 0 clamp(32px,3vw,48px)}
.wv-hand{height:clamp(320px,36vw,480px)}
.wv-hand li{--w:clamp(140px,15vw,210px);width:var(--w);margin-left:calc(var(--w) / -2);bottom:6%;transform-origin:50% 165%;transform:rotate(calc(var(--i) * 9deg))}
.wv-hand:hover li:not(:hover){transform:rotate(calc(var(--i) * 9.6deg))}
.wv-hand li:hover a,.wv-hand li:focus-within a{transform:translateY(-48px) scale(1.14)}
@media (max-width:700px){.wv-hand li{--w:120px;transform-origin:50% 200%;transform:rotate(calc(var(--i) * 8deg))}}
.wv{padding-top:clamp(20px,2vw,32px)}
.wv-hand{height:clamp(300px,30vw,420px)}
html,body{overflow-x:clip}
/* accessoires in de waaier: kaart in de houder, zodat de upsell meteen zichtbaar is */
.wv-acc{position:absolute;z-index:1;margin:0;pointer-events:none}
.wv-acc img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 28px rgba(30,20,90,.28))}
.wv-acc-l{left:-1%;top:-7%;width:clamp(200px,23vw,330px);transform:rotate(-4deg)}
.wv-acc-r{right:-2%;bottom:-6%;width:clamp(190px,21vw,300px);transform:rotate(6deg)}
.wv-acc figcaption{position:absolute;display:grid;gap:2px;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 14px 30px -14px rgba(30,20,90,.4),0 0 0 1px rgba(15,18,24,.05);font-size:.8125rem;line-height:1.25;white-space:nowrap}
.wv-acc figcaption b{color:#0F1218;font-weight:600}.wv-acc figcaption span{color:#866627;font-weight:600;font-variant-numeric:tabular-nums}
.wv-acc-l figcaption{left:58%;top:30%;transform:rotate(4deg)}
.wv-acc-r figcaption{left:-6%;top:12%;transform:rotate(-6deg)}
.wv-hand{z-index:2}
@media (max-width:900px){.wv{display:flex;flex-direction:column}.wv-hand{order:1}.wv-onder{order:2}
  .wv-acc{position:relative;order:3;inset:auto;transform:none;width:50%;align-self:flex-start;margin-top:8px}
  .wv-acc-r{align-self:flex-end;margin-top:-34%}
  .wv-acc figcaption{position:static;transform:none;margin:-14px auto 0;width:max-content;max-width:100%}}
.wv-acc-r{right:0;bottom:3%;width:clamp(180px,19vw,270px)}
.wv-acc-r figcaption{left:auto;right:4%;top:-14%;transform:rotate(-6deg)}
@media (max-width:900px){.wv{flex-direction:row;flex-wrap:wrap;justify-content:center;padding-inline:12px}
  .wv-hand{width:100%;height:290px}.wv-onder{width:100%}
  .wv-acc,.wv-acc-r{width:46%;margin:12px 0 0;align-self:auto;bottom:auto;right:auto}
  .wv-acc figcaption{right:auto;top:auto;font-size:.75rem;padding:7px 10px}}
.wv-acc-r figcaption{right:14%}
@media (max-width:900px){.wv{padding-top:0}.wv-hand{height:250px;margin-top:-10px}.wv-acc-r figcaption,.wv-acc-l figcaption{transform:none;right:auto}}
/* ===== winkelwagen-lade in huisstijl (1-11) ===== */
.wagen-paneel{width:min(480px,100%);background:#fff;border-radius:22px 0 0 22px;overflow:hidden}
.wagen-top{position:relative;padding:22px 20px 22px 26px;background:radial-gradient(80% 140% at 100% 0%,rgba(68,51,230,.45),transparent 65%),#12112A;color:#fff}
.wagen-top h2{display:flex;align-items:center;gap:10px;margin:0;font-size:1.375rem;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.wagen-top h2 span{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:linear-gradient(135deg,#D9B866,#A8843A);color:#12112A;font-size:.8125rem;font-weight:700;letter-spacing:0}
.wagen-top h2 span:empty{display:none}
.wagen-sluit{width:42px;height:42px;background:rgba(255,255,255,.1);color:#fff}.wagen-sluit:hover{background:rgba(255,255,255,.2);color:#fff}
.wagen-inhoud{padding:18px 20px 24px 26px;display:flex;flex-direction:column;gap:18px}
.wagen .gratisbalk{margin:0;padding:12px 14px;border-radius:14px;background:#F4F3FB;box-shadow:none;border:0}
.wagen .gratisbalk p{font-size:.875rem;color:#3A3F4B}
.wagen .gratisbalk span{background:rgba(68,51,230,.12)}.wagen .gratisbalk i{background:linear-gradient(90deg,#6A5BFF,#4433E6)}
.wagen .gratisbalk.vol i{background:linear-gradient(90deg,#D9B866,#A8843A)}
.wagen .wlijst{margin:0}
.wagen .wregel{grid-template-columns:92px minmax(0,1fr) auto;gap:14px;padding:4px 0 16px}
.wagen .wregel-beeld{border-radius:16px;background:radial-gradient(70% 60% at 50% 40%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8,#E3E0F3);border:0}
.wagen .wregel-beeld img{filter:drop-shadow(0 8px 10px rgba(30,20,90,.25))}
.wagen .wregel-naam{font-size:1rem;line-height:1.3;letter-spacing:-.01em;color:#0F1218}
.wagen .wregel-opties{font-size:.8125rem;color:#5D6371}
.wagen .wregel-rechts strong{font-size:1rem;color:#0F1218}
.wagen .wregel-link{display:none}
/* accessoires */
.wacc{padding:16px;border-radius:18px;background:linear-gradient(180deg,#F4F3FB,#ECEAF7)}
.wacc-kop{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 .6875rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#866627}
.wacc-kop::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(168,132,58,.45),transparent)}
.wacc ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.wacc li{display:flex;flex-direction:column;gap:3px;padding:8px 10px 10px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -16px rgba(30,20,90,.35),0 0 0 1px rgba(15,18,24,.04)}
.wacc-beeld{display:block;margin:-2px -4px 2px;aspect-ratio:1/.78;overflow:hidden}
.wacc-beeld img{width:100%;height:100%;object-fit:cover;object-position:28% 60%;transition:transform .5s var(--soepel)}
.wacc li:nth-child(2) .wacc-beeld img{object-position:40% 62%;transform:scale(1.18)}
.wacc li:hover .wacc-beeld img{transform:scale(1.06)}.wacc li:nth-child(2):hover .wacc-beeld img{transform:scale(1.24)}
.wacc strong{font-size:.875rem;color:#0F1218;line-height:1.25}
.wacc small{font-size:.75rem;line-height:1.4;color:#5D6371;min-height:2.8em}
.wacc button{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;height:36px;border:0;border-radius:999px;background:#12112A;color:#fff;font:600 .8125rem/1 var(--font);cursor:pointer;transition:background .2s}
.wacc button:hover{background:#4433E6}
.wacc button svg{width:15px;height:15px}
.wacc li.al button{background:#E8F7EF;color:#0E7A47;cursor:default}
/* zekerheden */
.wagen-zeker{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:.8125rem;color:#3A3F4B}
.wagen-zeker[hidden]{display:none}
.wagen-zeker li{display:flex;align-items:center;gap:10px}
.wagen-zeker svg{width:18px;height:18px;padding:3px;flex:none;border-radius:50%;background:rgba(168,132,58,.14);color:#866627}
.wagen-voet{border-radius:0;box-shadow:0 -18px 40px -24px rgba(30,20,90,.3);border-top:1px solid rgba(15,18,24,.06)}
.wagen-voet p{color:#0F1218}
.wagen-voet .knop-koop{background:linear-gradient(135deg,#5A49FF,#4433E6);box-shadow:0 14px 30px -14px rgba(68,51,230,.7)}
.wagen-meer{color:#0F1218;font-weight:600}
@media (max-width:520px){.wagen-paneel{border-radius:0}}
.wagen .wregel-beeld{overflow:hidden}.wagen .wregel-beeld img{transform:scale(1.45)}
.wagen .wregel-beeld img.wregel-eigen{transform:none}
.wacc-beeld{aspect-ratio:1/.64}
.wacc small{min-height:0}
.wagen-top h2 span{min-width:24px;height:24px}
.wacc button{margin-top:auto}.wacc small{margin-bottom:8px}
/* upsells compact: kleiner dan het product zelf */
.wacc{padding:12px 14px}
.wacc-kop{margin-bottom:8px}
.wacc ul{grid-template-columns:1fr;gap:6px}
.wacc li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center;padding:6px 8px 6px 6px;border-radius:12px;box-shadow:0 0 0 1px rgba(15,18,24,.05)}
.wacc-beeld{grid-row:1/3;width:56px;height:56px;margin:0;aspect-ratio:auto;border-radius:10px;background:linear-gradient(180deg,#EFEDF8,#E3E0F3)}
.wacc-beeld img{object-position:22% 72%;transform:scale(1.7)}
.wacc li:nth-child(2) .wacc-beeld img{object-position:30% 70%;transform:scale(1.9)}
.wacc li:hover .wacc-beeld img{transform:scale(1.8)}.wacc li:nth-child(2):hover .wacc-beeld img{transform:scale(2)}
.wacc strong{grid-column:2;align-self:end;font-size:.8125rem}
.wacc small{grid-column:2;align-self:start;margin:0;font-size:.71875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wacc button{grid-column:3;grid-row:1/3;margin:0;height:32px;padding:0 12px;font-size:.75rem}
.wagen .wregel-beeld img{transform:scale(1.22)}.wagen .wregel-beeld img.wregel-eigen{transform:none}
/* breuk naar de voet: geen ringen meer, het logo vertelt het zelf (1-11) */
.s-breuk-voet .br-golf,.s-breuk-voet .br-merk{display:none}
.br-lock{position:absolute;left:50%;top:0;z-index:2;display:flex;align-items:center;gap:16px;padding:14px 28px 14px 16px;border-radius:999px;background:#fff;transform:translate(-50%,-50%);white-space:nowrap;
  box-shadow:0 0 0 1px rgba(15,18,24,.06),0 26px 60px -22px rgba(15,18,24,.6)}
.br-teken{width:68px;height:68px;flex:none;overflow:visible}
.bt-k{transform-box:view-box;transform-origin:13px 40px;transform:rotate(var(--r))}
.br-lock-tekst{display:grid;gap:5px}
.br-lock .mk-naam{font:800 1.375rem/1 var(--font);letter-spacing:-.035em;color:#0F1218}
.br-lock .mk-naam span{color:#4433E6;font-weight:600}
.br-slogan{font:600 .625rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#866627}
/* de kaartjes waaieren open zodra de footer in beeld komt, daarna zendt de chip rustig */
.br-lock.speel .bt-k{animation:bt-waaier 1.1s cubic-bezier(.2,.8,.2,1) both}
.br-lock.speel .bt-k2{animation-delay:.08s}.br-lock.speel .bt-k3{animation-delay:.16s}
@keyframes bt-waaier{from{transform:rotate(4deg) translateY(4px)}}
.bt-g1,.bt-g2{animation:bt-zend 3.2s ease-in-out infinite}.bt-g2{animation-delay:.25s}
.br-lock.speel .bt-g1,.br-lock.speel .bt-g2{animation-delay:1.1s,1.35s}
@keyframes bt-zend{0%,55%,100%{opacity:1}70%{opacity:.25}85%{opacity:1}}
@media (max-width:700px){.br-lock{gap:10px;padding:10px 18px 10px 10px}.br-teken{width:48px;height:48px}.br-lock .mk-naam{font-size:1rem}.br-slogan{font-size:.5rem;letter-spacing:.16em}}
@media (prefers-reduced-motion:reduce){.br-lock .bt-k,.bt-g1,.bt-g2{animation:none!important}}
@media (min-width:701px){.br-lock{gap:20px;padding:18px 38px 18px 22px}.br-teken{width:92px;height:92px}.br-lock .mk-naam{font-size:1.875rem}.br-slogan{font-size:.6875rem}}
.s-thema main > .s-breuk-voet{padding-bottom:0}.s-thema main > :has(+ .s-breuk-voet){padding-bottom:calc(var(--band) + 30px)}
/* ===== ontwerpservice: proefdruk die laat zien waar een ontwerper op let (1-11) ===== */
.pr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:center}
.pr-vel{margin:0;padding:clamp(56px,6vw,84px) clamp(40px,5vw,72px) clamp(28px,3vw,40px);border-radius:28px;
  background:radial-gradient(70% 55% at 45% 42%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%);
  background-image:radial-gradient(70% 55% at 45% 42%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(rgba(68,51,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(68,51,230,.05) 1px,transparent 1px),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%);
  background-size:auto,24px 24px,24px 24px,auto}
.pr-stage{position:relative;margin-right:8%}
.pr-kaart{position:relative;z-index:2;border-radius:3.5%/5.4%;box-shadow:0 30px 60px -28px rgba(15,27,45,.55),0 0 0 1px rgba(15,18,24,.06)}
.pr-kaart img{display:block;width:100%;height:auto;border-radius:inherit}
.pr-achter{position:absolute;z-index:1;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;border-radius:3.5%/5.4%;transform:translate(9%,-11%) rotate(5deg);
  background:linear-gradient(115deg,#0F1B2D 0 58%,#2F6BFF 58% 60.5%,#094E93 60.5%);box-shadow:0 24px 50px -26px rgba(15,27,45,.6);transition:transform .5s var(--soepel)}
.pr-achter-logo{font:800 clamp(1rem,2.2vw,1.75rem)/1 var(--font);letter-spacing:.06em;color:#fff;transform:translateX(-14%)}
.pr-achter-sub{font:600 clamp(.45rem,.7vw,.625rem)/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:#8AACFF;transform:translateX(-14%)}
/* maatlijnen */
.pr-maat{position:absolute;display:flex;align-items:center;gap:10px;color:#4433E6;font:600 .75rem/1 var(--font);letter-spacing:.04em}
.pr-maat i{flex:1;background:rgba(68,51,230,.45)}
.pr-maat-h{left:0;right:0;top:-34px;height:12px}.pr-maat-h i{height:1px;position:relative}
.pr-maat-h i:first-child::before,.pr-maat-h i:last-child::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:inherit}
.pr-maat-h i:first-child::before{left:0}.pr-maat-h i:last-child::after{right:0}
.pr-maat-v{top:0;bottom:0;left:-34px;width:12px;flex-direction:column}.pr-maat-v i{width:1px}
.pr-maat-v b{writing-mode:vertical-rl;transform:rotate(180deg)}
.pr-maat b{font-weight:600;white-space:nowrap}
/* lagen op de kaart */
.pr-afloop,.pr-veilig,.pr-vak{position:absolute;pointer-events:none;transition:opacity .3s,box-shadow .3s,border-color .3s}
.pr-afloop{inset:-3.5% -2.3%;border:1px dashed rgba(220,60,90,.55);border-radius:4px}
.pr-veilig{inset:5.5% 3.5%;border:1px dashed rgba(68,51,230,.4);border-radius:2px}
.pr-afloop em,.pr-veilig em,.pr-vak em{position:absolute;font:600 .625rem/1 var(--font);font-style:normal;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:4px 6px;border-radius:5px;background:#fff;box-shadow:0 4px 12px -6px rgba(15,18,24,.4)}
.pr-afloop em{right:2%;bottom:-11px;color:#C23656}
.pr-veilig em{left:50%;top:-9px;transform:translateX(-50%);color:#4433E6}
.pr-vak{border:1.5px solid rgba(168,132,58,.0);border-radius:4px}
.pr-logo{left:5.5%;top:8.5%;width:26.5%;height:11.5%}
.pr-naam{left:5.5%;top:30%;width:24%;height:12%}
.pr-tekst{left:5.5%;top:48%;width:20%;height:14.5%}.pr-tekst em{left:calc(100% + 8px);top:50%;transform:translateY(-50%);color:#866627}
.pr-qr{left:5.5%;top:73%;width:12.5%;height:19.5%;border:1px dashed rgba(168,132,58,.85)!important;background:repeating-linear-gradient(45deg,rgba(168,132,58,.08) 0 4px,transparent 4px 8px)}
.pr-qr em{left:calc(100% + 8px);top:50%;transform:translateY(-50%);color:#866627}
/* nummers */
.pr-pin{position:absolute;z-index:4;width:28px;height:28px;margin:-14px 0 0 -14px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#866627;font:700 .75rem/1 var(--font);
  box-shadow:0 0 0 2px #A8843A,0 8px 18px -6px rgba(15,18,24,.45);transition:transform .3s var(--soepel),background .3s,color .3s}
.pr-pin-achter{left:96%;top:-8%}
/* onder het vel: kleuren en team */
.pr-onder{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(36px,4vw,52px)}
.pr-kleuren{display:flex;align-items:center;gap:6px}
.pr-kleuren i{width:26px;height:26px;border-radius:50%;background:var(--k);box-shadow:0 0 0 3px #fff,0 6px 14px -6px rgba(15,18,24,.5)}
.pr-kleuren i+i{margin-left:-4px}
.pr-kleuren small{margin-left:10px;font-size:.75rem;color:#5D6371}
.pr-team{display:flex}
.pr-team i{font:600 .75rem/1 var(--font);font-style:normal;color:#0F1B2D;padding:8px 12px;border-radius:999px;background:#fff;box-shadow:0 6px 16px -8px rgba(15,18,24,.4),0 0 0 1px rgba(15,18,24,.05);transition:transform .35s var(--soepel)}
.pr-team i+i{margin-left:-10px}.pr-team i:nth-child(2){opacity:.85}.pr-team i:nth-child(3){opacity:.7}
/* lijst */
.pr-lijst{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.pr-lijst li{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:14px 16px;border-radius:16px;cursor:default;transition:background .25s}
.pr-lijst li>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1.5px #A8843A;color:#866627;font:700 .75rem/1 var(--font);transition:background .25s,color .25s}
.pr-lijst h3{margin:2px 0 4px;font-size:1.0625rem;letter-spacing:-.015em;color:#0F1218}
.pr-lijst p{margin:0;font-size:.9375rem;line-height:1.6;color:#5D6371}
/* oplichten: lijstpunt en het bijbehorende deel van de kaart */
.pr-lijst li.aan{background:#F4F3FB}.pr-lijst li.aan>b{background:#A8843A;color:#fff}
.pr-vel[data-aan] .pr-afloop,.pr-vel[data-aan] .pr-veilig,.pr-vel[data-aan] .pr-qr,.pr-vel[data-aan] .pr-tekst em{opacity:.25}
.pr-vel[data-aan="1"] [data-n="1"],.pr-vel[data-aan="2"] [data-n="2"],.pr-vel[data-aan="3"] [data-n="3"],.pr-vel[data-aan="4"] [data-n="4"],.pr-vel[data-aan="4"] .pr-tekst em,.pr-vel[data-aan="5"] [data-n="5"],.pr-vel[data-aan="6"] [data-n="6"]{opacity:1}
.pr-vel[data-aan="1"] .pr-logo,.pr-vel[data-aan="4"] .pr-tekst,.pr-vel[data-aan="6"] .pr-naam,.pr-vel[data-aan="3"] .pr-qr{border-color:#A8843A;box-shadow:0 0 0 4px rgba(168,132,58,.18)}
.pr-vel[data-aan="1"] b.pr-pin[data-n="1"],.pr-vel[data-aan="2"] b.pr-pin[data-n="2"],.pr-vel[data-aan="3"] b.pr-pin[data-n="3"],.pr-vel[data-aan="4"] b.pr-pin[data-n="4"],.pr-vel[data-aan="5"] b.pr-pin[data-n="5"],.pr-vel[data-aan="6"] b.pr-pin[data-n="6"]{background:#A8843A;color:#fff;transform:scale(1.18)}
.pr-vel[data-aan="5"] .pr-achter{transform:translate(13%,-16%) rotate(7deg)}
.pr-vel[data-aan="6"] .pr-team i:nth-child(2){transform:translateX(6px)}.pr-vel[data-aan="6"] .pr-team i:nth-child(3){transform:translateX(12px)}
.pr-vel[data-aan="1"] .pr-kleuren i{transform:translateY(-3px)}.pr-kleuren i{transition:transform .3s var(--soepel)}
@media (max-width:980px){.pr{grid-template-columns:1fr}.pr-vel{padding:56px 40px 28px 48px}}
@media (max-width:560px){.pr-vel{padding:48px 22px 22px 36px;border-radius:22px}.pr-maat-v{left:-24px}.pr-maat-h{top:-28px}.pr-pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:.625rem}
  .pr-tekst em,.pr-qr em{display:none}.pr-afloop em,.pr-veilig em{font-size:.5rem}.pr-onder{justify-content:center}.pr-lijst li{padding:12px 6px}}
@media (prefers-reduced-motion:reduce){.pr *{transition:none!important}}
.pr-achter{transform:translate(5%,-10%) rotate(4deg);background:linear-gradient(160deg,#16253D,#0F1B2D 60%);place-content:start end;justify-items:end;padding:3.2% 6% 0 0}
.pr-achter::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2.2%;background:#2F6BFF;border-radius:0 12px 12px 0}
.pr-achter-logo,.pr-achter-sub{transform:none}
.pr-achter-logo{font-size:clamp(.7rem,1.1vw,.95rem);letter-spacing:.14em}
.pr-achter-sub{font-size:clamp(.4rem,.55vw,.5rem);letter-spacing:.28em}
.pr-vel[data-aan="5"] .pr-achter{transform:translate(8%,-15%) rotate(6deg)}
.pr-pin-achter{left:72%;top:-10%}
.pr-maat-h{top:auto;bottom:-48px}
.pr-afloop em{bottom:auto;top:-11px;right:4%}
.pr-veilig em{left:auto;right:38%;transform:none;top:auto;bottom:-9px}
.pr-onder{margin-top:72px}
@media (max-width:560px){.pr-maat-h{bottom:-38px}.pr-onder{margin-top:54px}.pr-pin-achter{left:62%;top:-13%}.pr-veilig em{display:none}}
.br-lock{width:max-content;max-width:calc(100vw - 32px)}
@media (max-width:380px){.br-slogan{letter-spacing:.1em}}
.pr .pr-kaart{padding:0;background:none;border:0;border-radius:3.5%/5.4%;transform:none}
.pr .pr-kaart{width:100%}
/* ===== ontwerpservice: zo werkt het als filmstrook met de Northwise-kaart (1-11) ===== */
.os-strook{grid-template-columns:repeat(4,1fr)}
.os-f .zw-beeld{aspect-ratio:4/4.4;display:grid;place-items:center}
.os-f h3{margin:0 0 10px;font-size:1.2rem;line-height:1.25;letter-spacing:-.02em;color:#0F1218}
.os-f>p:last-child{margin:0;font-size:.9375rem;line-height:1.65;color:#5D6371}
/* 1: uploaden */
.os-up{width:80%;display:grid;gap:8px}
.os-drop{display:grid;place-items:center;height:96px;border-radius:14px;border:1.5px dashed rgba(68,51,230,.45);background:rgba(255,255,255,.7)}
.os-logo{display:grid;gap:3px;font:800 1.05rem/1 var(--font);letter-spacing:.06em;color:#0F1B2D;text-align:left;animation:os-val 8s infinite}
.os-logo small{font:600 .4rem/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:#2F6BFF}
@keyframes os-val{0%{opacity:0;transform:translateY(-14px) scale(.9)}6%,100%{opacity:1;transform:none}}
.os-bestand,.os-invoer{margin:0;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;background:#fff;font-size:.75rem;color:#0F1218;box-shadow:0 10px 24px -16px rgba(30,20,90,.4)}
.os-bestand span{padding:3px 5px;border-radius:5px;background:#EEF2FF;color:#2F6BFF;font-weight:700;font-size:.5625rem}
.os-bestand i{margin-left:auto;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#12B76A;color:#fff}.os-bestand .ic{width:11px;height:11px}
.os-invoer{flex-direction:column;align-items:flex-start;gap:2px}.os-invoer small{font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:#8A8FA0}
.os-typ{display:inline-block;overflow:hidden;white-space:nowrap;border-right:1.5px solid #4433E6;animation:os-typ 8s steps(12) infinite,os-caret .8s step-end infinite}
@keyframes os-typ{0%,8%{width:0}22%,100%{width:12ch}}@keyframes os-caret{50%{border-color:transparent}}
/* 2: ontwerpen */
.os-ontwerp{position:relative;width:86%}
.os-ontwerp img{display:block;width:100%;height:auto;border-radius:3.5%/5.4%;box-shadow:0 26px 44px -22px rgba(15,27,45,.55)}
.os-gids{position:absolute;background:#FF3D8B;opacity:.8}
.os-gids-v{left:6.2%;top:-8%;bottom:-8%;width:1px}.os-gids-h{left:-6%;right:40%;top:31.5%;height:1px;animation:os-gids 8s infinite}
@keyframes os-gids{0%,30%{opacity:0}36%,70%{opacity:.8}76%,100%{opacity:0}}
.os-cursor{position:absolute;left:30%;top:34%;display:flex;align-items:flex-start;gap:2px;animation:os-cursor 8s ease-in-out infinite}
.os-cursor svg{width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.os-cursor b{margin-top:14px;padding:3px 7px;border-radius:6px;background:#FF3D8B;color:#fff;font:600 .5625rem/1 var(--font)}
@keyframes os-cursor{0%,100%{transform:translate(40%,180%)}35%,70%{transform:translate(0,0)}}
.os-palet{position:absolute;left:50%;bottom:-38px;display:flex;gap:6px;padding:6px 8px;border-radius:999px;background:#fff;transform:translateX(-50%);box-shadow:0 10px 24px -14px rgba(30,20,90,.45)}
.os-palet i{width:16px;height:16px;border-radius:50%;background:var(--k)}
/* 3: mail */
.os-mail{width:84%;padding:14px;border-radius:16px;background:#fff;box-shadow:0 26px 50px -26px rgba(30,20,90,.5);animation:os-mail 8s ease-in-out infinite}
@keyframes os-mail{0%,40%{opacity:0;transform:translateY(16px)}48%,100%{opacity:1;transform:none}}
.os-mail-kop{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.6875rem;line-height:1.3;color:#0F1218}
.os-mail-kop b{display:block}.os-mail-kop small{color:#5D6371}.os-mail-kop time{margin-left:auto;align-self:flex-start;color:#8A8FA0;font-size:.625rem}
.os-mail-av{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:#12112A}.os-mail-av svg{width:22px;height:22px}
.os-mail-tekst{margin:0 0 6px;font-size:.6875rem;line-height:1.5;color:#3A3F4B}
.os-mail img{display:block;width:100%;height:auto;margin:-4px 0}
.os-mail-knop{display:block;margin-top:6px;padding:8px;border-radius:999px;background:#4433E6;color:#fff;text-align:center;font:600 .6875rem/1 var(--font)}
/* 4: bestellen */
.os-koop{display:grid;justify-items:center;gap:6px;width:90%}
.os-koop-kaart{width:100%;height:auto;animation:os-zweef 6s ease-in-out infinite}
@keyframes os-zweef{50%{transform:translateY(-6px) rotate(-1deg)}}
.os-koop-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;width:88%;margin:0;padding:8px 8px 8px 14px;border-radius:999px;background:#fff;box-shadow:0 14px 30px -18px rgba(30,20,90,.5)}
.os-koop-rij small{display:block;font-size:.5625rem;color:#5D6371}.os-koop-rij b{font-size:.875rem;color:#0F1218}
.os-koop-knop{position:relative;padding:9px 14px;border-radius:999px;background:linear-gradient(135deg,#5A49FF,#4433E6);color:#fff;font:600 .75rem/1 var(--font);animation:os-klik 8s infinite}
.os-koop-knop i{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(68,51,230,.5);animation:os-ring 8s infinite}
@keyframes os-klik{0%,82%,90%,100%{transform:none}86%{transform:scale(.94)}}
@keyframes os-ring{0%,85%{box-shadow:0 0 0 0 rgba(68,51,230,.5)}100%{box-shadow:0 0 0 14px rgba(68,51,230,0)}}
/* voortgang over vier stappen */
.os-lijn i{animation-duration:8s}
.os-f1 .zw-beeld{animation:os-a1 8s infinite}.os-f2 .zw-beeld{animation:os-a2 8s infinite}.os-f3 .zw-beeld{animation:os-a3 8s infinite}.os-f4 .zw-beeld{animation:os-a4 8s infinite}
@keyframes os-a1{0%,23%{box-shadow:inset 0 0 0 1px rgba(168,132,58,.55),0 40px 70px -46px rgba(30,20,90,.55)}27%,100%{box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}}
@keyframes os-a2{0%,24%,52%,100%{box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}27%,49%{box-shadow:inset 0 0 0 1px rgba(168,132,58,.55),0 40px 70px -46px rgba(30,20,90,.55)}}
@keyframes os-a3{0%,49%,77%,100%{box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}52%,74%{box-shadow:inset 0 0 0 1px rgba(168,132,58,.55),0 40px 70px -46px rgba(30,20,90,.55)}}
@keyframes os-a4{0%,74%{box-shadow:inset 0 0 0 1px rgba(15,18,24,.04)}77%,97%{box-shadow:inset 0 0 0 1px rgba(168,132,58,.55),0 40px 70px -46px rgba(30,20,90,.55)}}
@keyframes os-lijn{0%{width:0}25%{width:25%}50%{width:50%}75%{width:75%}96%{width:100%}100%{width:100%;opacity:0}}
.os-lijn i{animation-name:os-lijn}
@media (max-width:1100px){.os-strook{grid-template-columns:repeat(2,1fr);gap:40px 20px}.os-lijn{display:none}}
@media (max-width:600px){.os-strook{grid-template-columns:1fr;max-width:460px}}
@media (prefers-reduced-motion:reduce){.os-strook *{animation:none!important}.os-typ{width:12ch;border:0}}
.os-f .zw-beeld img{position:static;left:auto;top:auto;filter:none}.os-koop-kaart{filter:drop-shadow(0 24px 26px rgba(30,20,90,.3))!important}.os-mail img{filter:drop-shadow(0 10px 12px rgba(30,20,90,.25))!important}
@media (max-width:600px){.os-f .zw-beeld{aspect-ratio:auto;padding:30px 0 34px}.os-f2 .zw-beeld{padding-bottom:60px}.os-up,.os-mail{width:82%}.os-koop{width:80%}}
/* ===== mobiel menu: schermvullend, in huisstijl, product voorop (1-11) ===== */
.nm-beeld,.nm-uitleg,.nm-pijl,.nm-uitgelicht,.nm-zeker{display:none}
.nm-tekst{display:contents}
@media (max-width:1060px){
  html.menu-open{overflow:hidden}
  .kop .nav,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav{position:fixed;left:0;right:0;top:var(--kop-h,72px);bottom:0;z-index:60;display:flex;visibility:hidden;opacity:0;flex-direction:column;gap:18px;
    padding:14px 20px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border-radius:0;box-shadow:none;
    background:radial-gradient(90% 45% at 100% 0%,rgba(68,51,230,.38),transparent 70%),radial-gradient(70% 40% at 0% 100%,rgba(68,51,230,.18),transparent 70%),#0B0C14;
    transition:opacity .28s ease,visibility 0s linear .28s}
  .kop .nav.open,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav.open{visibility:visible;opacity:1;transition:opacity .28s ease}
  /* uitgelicht: waaier van ontwerpen */
  .nm-uitgelicht{display:grid;grid-template-columns:1fr auto;align-items:center;min-height:132px;padding:18px 0 18px 20px;border-radius:22px;overflow:hidden;text-decoration:none;
    background:radial-gradient(70% 90% at 80% 50%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8,#E3E0F3);transform:translateY(10px);opacity:0;transition:transform .5s var(--soepel) .05s,opacity .4s .05s}
  .nm-uit-tekst{display:grid;gap:6px}
  .nm-uit-tekst small{font:600 .625rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#866627}
  .nm-uit-tekst b{font:800 1.3rem/1.05 var(--font);letter-spacing:-.035em;color:#0F1218}
  .nm-waaier{position:relative;width:150px;height:110px;margin-right:-6px}
  .nm-waaier img{position:absolute;left:50%;bottom:-8px;width:62px;height:auto;margin-left:-31px;transform-origin:50% 140%;filter:drop-shadow(0 10px 14px rgba(30,20,90,.35));transition:transform .7s var(--soepel) .15s}
  .nm-waaier img:nth-child(1){transform:rotate(-4deg)}.nm-waaier img:nth-child(3){transform:rotate(4deg)}
  .nav.open .nm-uitgelicht{transform:none;opacity:1}
  .nav.open .nm-waaier img:nth-child(1){transform:rotate(-20deg)}.nav.open .nm-waaier img:nth-child(3){transform:rotate(20deg)}.nav.open .nm-waaier img:nth-child(2){transform:translateY(-6px)}
  /* items */
  .kop .nav ul:not(.nm-zeker){flex-direction:column;margin:0;gap:0}
  .kop .nav ul:not(.nm-zeker) li{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--soepel)}
  .nav.open ul:not(.nm-zeker) li{opacity:1;transform:none;transition-delay:calc(var(--n) * 45ms + 120ms)}
  .kop .nav ul a,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav ul a{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;align-items:center;gap:14px;padding:11px 2px;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.07);background:none!important;color:#fff;font-size:1rem}
  .nm-tekst{display:grid;gap:3px}
  .nm-titel{font:700 1.1875rem/1.1 var(--font);letter-spacing:-.025em;color:#fff}
  .nm-uitleg{display:block;font-size:.8125rem;line-height:1.3;color:#8B90A0;font-weight:400}
  .nm-pijl{display:block;width:18px;height:18px;color:#5D6371;transition:transform .2s,color .2s}
  .kop .nav ul a:active .nm-pijl{transform:translateX(3px);color:#fff}
  .kop .nav ul a[aria-current="page"] .nm-titel{color:#B3A9FF}
  .kop .nav ul a[aria-current="page"] .nm-titel::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border-radius:50%;background:#D9B866;vertical-align:middle}
  .nm-beeld{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;overflow:hidden;background:linear-gradient(180deg,#EFEDF8,#DCD8F0)}
  .nm-beeld img{display:block}
  .nm-ontwerpen img{position:absolute;width:26px;height:auto;bottom:4px;filter:drop-shadow(0 3px 4px rgba(30,20,90,.35))}
  .nm-ontwerpen img:first-child{left:7px;transform:rotate(-12deg)}.nm-ontwerpen img:last-child{right:7px;transform:rotate(10deg)}
  .nm-hoe svg{width:26px;height:26px;color:#4433E6}
  .nm-het img{width:100%;height:100%;object-fit:cover;object-position:0 0}
  .nm-zakelijk img{width:150%;max-width:none;height:auto;transform:translateY(6%)}
  .nm-prijzen{background:linear-gradient(135deg,#D9B866,#A8843A)}.nm-prijzen b{font:800 1.4rem/1 var(--font);color:#12112A}
  /* zekerheden en acties */
  .kop .nm-zeker{display:grid;gap:8px;margin:2px 0 0;padding:0;list-style:none;font-size:.8125rem;color:#B6BAC6}
  .nm-zeker li{display:flex;align-items:center;gap:10px}
  .nm-zeker .ic{width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(217,184,102,.16);color:#D9B866;flex:none}
  .kop .nav-acties{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:auto;padding-top:6px}
  .kop .nav-acties .knop{margin:0;justify-content:center;min-height:52px;font-size:1rem;background:linear-gradient(135deg,#5A49FF,#4433E6);color:#fff;box-shadow:0 14px 30px -14px rgba(68,51,230,.8)}
  .kop .nav-acties .nav-login{min-height:52px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff}
}
@media (max-width:1060px) and (prefers-reduced-motion:reduce){.kop .nav *{transition:none!important}}
.kop .nav .nm-zeker,.kop .nav .nm-uitgelicht{display:none}
@media (max-width:1060px){
  .kop .nav .nm-zeker{display:grid}.kop .nav .nm-uitgelicht{display:grid}
  .nm-uitgelicht{grid-template-columns:auto 1fr;padding:14px 18px 14px 0;min-height:118px;gap:4px}
  .nm-waaier{order:-1;width:132px;height:100px;margin:0}
  .nm-uit-tekst b{font-size:1.2rem}
  .kop .nav{gap:14px}
}
@media (max-width:370px){.nm-waaier{width:112px}.nm-waaier img{width:54px;margin-left:-27px}.nm-uit-tekst b{font-size:1.08rem}}
/* ===== ontwerpservice-hero: ontwerpstudio met de Northwise-kaart op het tekenvlak (1-11) ===== */
.st{position:relative;margin:0;padding:34px 0 46px 6%}
.st .h-podium{display:none}
.st-venster{position:relative;border-radius:18px;overflow:hidden;background:rgba(22,22,40,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 50px 90px -40px rgba(0,0,0,.8),0 0 120px -30px rgba(68,51,230,.55)}
.st-balk{display:flex;align-items:center;gap:6px;margin:0;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-size:.6875rem;color:#8B90A0}
.st-balk i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.st-balk span{margin-left:10px;color:#C9CCD6}.st-balk b{margin-left:auto;padding:3px 8px;border-radius:6px;background:rgba(217,184,102,.14);color:#D9B866;font-weight:600}
.st-werk{display:grid;grid-template-columns:96px minmax(0,1fr) 108px;min-height:300px}
.st-lagen,.st-props{margin:0;padding:12px 10px;list-style:none;font-size:.6875rem;color:#9CA0AE}
.st-lagen{border-right:1px solid rgba(255,255,255,.07)}.st-props{border-left:1px solid rgba(255,255,255,.07)}
.st-kop{margin:0 0 8px;font:600 .5625rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#5D6371}
.st-props .st-kop:not(:first-child){margin-top:14px}
.st-lagen li:not(.st-kop){padding:6px 8px;border-radius:6px}
.st-lagen li.aan{background:rgba(68,51,230,.35);color:#fff}
.st-canvas{position:relative;display:grid;place-items:center;padding:40px 22px 30px;
  background:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/14px 14px,#101021}
.st-maat{position:absolute;top:14px;left:50%;transform:translateX(-50%);font:600 .625rem/1 var(--font);letter-spacing:.06em;color:#8C80FF}
.st-bord{position:relative;width:100%}
.st-bord img{display:block;width:100%;height:auto;border-radius:3.5%/5.4%;box-shadow:0 20px 40px -18px rgba(0,0,0,.8)}
.st-sel{position:absolute;left:5%;top:29.5%;width:25.5%;height:12.5%;border:1.5px solid #4433E6;animation:st-sel 7s ease-in-out infinite}
.st-sel i{position:absolute;width:6px;height:6px;background:#fff;border:1.5px solid #4433E6}
.st-sel i:nth-child(1){left:-4px;top:-4px}.st-sel i:nth-child(2){right:-4px;top:-4px}.st-sel i:nth-child(3){left:-4px;bottom:-4px}.st-sel i:nth-child(4){right:-4px;bottom:-4px}
.st-sel em{position:absolute;left:0;top:calc(100% + 6px);padding:3px 6px;border-radius:4px;background:#4433E6;color:#fff;font:600 .5625rem/1 var(--font);font-style:normal;white-space:nowrap}
@keyframes st-sel{0%,8%{opacity:0;transform:scale(.96)}14%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.st-gids{position:absolute;left:5%;top:-14%;bottom:-14%;width:1px;background:#FF3D8B;opacity:0;animation:st-gids 7s infinite}
@keyframes st-gids{0%,30%{opacity:0}36%,60%{opacity:.9}66%,100%{opacity:0}}
.st-cursor{position:absolute;left:28%;top:40%;display:flex;gap:2px;animation:st-cursor 7s ease-in-out infinite}
.st-cursor svg{width:18px;height:18px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.st-cursor b{margin-top:13px;padding:3px 7px;border-radius:6px;background:#FF3D8B;color:#fff;font:600 .5625rem/1 var(--font)}
@keyframes st-cursor{0%,100%{transform:translate(120%,160%)}14%,30%{transform:translate(0,0)}46%,62%{transform:translate(-6%,-4%)}80%{transform:translate(160%,60%)}}
.st-kleur{display:flex;gap:4px;margin:0}.st-kleur i{width:18px;height:18px;border-radius:5px;background:var(--k);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.st-font{display:flex;align-items:center;gap:8px;margin:0;padding:6px;border-radius:7px;background:rgba(255,255,255,.05)}
.st-font b{font:700 1rem/1 var(--font);color:#fff}.st-font span{display:grid;line-height:1.2;color:#C9CCD6}.st-font small{font-size:.5625rem;color:#8B90A0}
.st-druk{display:flex;justify-content:space-between;margin:0 0 4px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.05)}.st-druk b{color:#D9B866;font-weight:600}
/* buiten het venster: het aangeleverde logo en het resultaat */
.st-bestand{position:absolute;left:0;top:4px;z-index:3;display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px 8px 8px;border-radius:12px;background:#fff;color:#0F1218;font-size:.75rem;font-weight:500;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transform:rotate(-4deg);animation:st-zweef 7s ease-in-out infinite}
.st-bestand span{padding:4px 6px;border-radius:6px;background:#EEF2FF;color:#2F6BFF;font-size:.5625rem;font-weight:700}
.st-klaar{position:absolute;right:-5%;bottom:0;z-index:3;width:46%;animation:st-zweef 7s ease-in-out infinite reverse}
.st-klaar img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.55))}
.st-klaar p{position:absolute;left:8%;bottom:4%;display:flex;align-items:center;gap:6px;margin:0;padding:6px 10px 6px 6px;border-radius:999px;background:#fff;color:#0F1218;font:600 .6875rem/1 var(--font);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.st-klaar .ic{width:16px;height:16px;padding:2px;border-radius:50%;background:#12B76A;color:#fff}
@keyframes st-zweef{50%{translate:0 -6px}}
@media (max-width:1180px){.st-werk{grid-template-columns:0 minmax(0,1fr) 100px}.st-lagen{display:none}}
@media (max-width:560px){.st{padding:30px 0 40px}.st-werk{grid-template-columns:1fr;min-height:0}.st-props{display:none}.st-canvas{padding:34px 14px 26px}.st-klaar{width:52%;right:-2%}.st-bestand{font-size:.6875rem}}
@media (prefers-reduced-motion:reduce){.st *{animation:none!important}.st-sel{opacity:1}}
.os-hero .st-bestand,.os-hero .st-klaar p{color:#0F1218}.os-hero .st p{font-size:inherit;line-height:inherit}.os-hero .st-balk{font-size:.6875rem}
/* ===== mobiel menu licht (1-11): lichte inhoud zoals de rest van de site, donkere uitgelichte kaart ===== */
.nm-populair,.nm-hulp{display:none}
@media (max-width:1060px){
  .kop .nav,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav{padding:16px 16px 0;gap:16px;background:linear-gradient(180deg,#F4F3FB 0%,#FFFFFF 46%)}
  /* uitgelicht nu donker op licht */
  .nm-uitgelicht{background:radial-gradient(80% 120% at 0% 50%,rgba(68,51,230,.55),transparent 65%),#12112A;box-shadow:0 20px 40px -24px rgba(18,17,42,.7)}
  .nm-uit-tekst b{color:#fff}.nm-uit-tekst small{color:#D9B866}
  /* items als één witte groep */
  .kop .nav ul:not(.nm-zeker):not(.nm-populair ul){padding:2px 14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.06),0 16px 34px -26px rgba(30,20,90,.4)}
  .kop .nav ul a,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav ul a{border-bottom:1px solid rgba(15,18,24,.07);color:#0F1218}
  .kop .nav ul li:last-child a{border-bottom:0}
  .nm-titel{color:#0F1218;font-size:1.0625rem}
  .nm-uitleg{color:#5D6371}
  .nm-pijl{color:#B6BAC6}.kop .nav ul a:active .nm-pijl{color:#4433E6}
  .kop .nav ul a[aria-current="page"] .nm-titel{color:#4433E6}
  .nm-beeld{width:48px;height:48px;border-radius:13px}
  .kop .nav ul a,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav ul a{grid-template-columns:48px minmax(0,1fr) 18px;padding:12px 0}
  /* populair */
  .kop .nav .nm-populair{display:block}
  .nm-label{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 .625rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#866627}
  .nm-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(168,132,58,.4),transparent)}
  .kop .nav .nm-populair ul{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
  .kop .nav .nm-populair li{opacity:1;transform:none}
  .kop .nav .nm-populair a,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav .nm-populair a{display:grid;justify-items:center;gap:6px;padding:10px 4px 8px;border:0;border-radius:14px;background:linear-gradient(180deg,#EFEDF8,#E3E0F3);font:600 .6875rem/1 var(--font);color:#0F1218}
  .nm-populair img{width:70%;height:auto;filter:drop-shadow(0 6px 8px rgba(30,20,90,.3));transition:transform .3s var(--soepel)}
  .nm-populair a:active img{transform:translateY(-3px) rotate(-3deg)}
  /* hulp + zekerheden */
  .kop .nav .nm-hulp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;font-size:.8125rem;color:#5D6371}
  .nm-hulp span{font-weight:600;color:#0F1218}.nm-hulp a{color:#4433E6;font-weight:600;text-decoration:none}.nm-hulp small{flex-basis:100%;font-size:.75rem;color:#8A8FA0}
  .kop .nm-zeker{grid-template-columns:1fr 1fr;gap:8px;color:#3A3F4B;font-size:.75rem}
  .nm-zeker li{align-items:flex-start;padding:10px;border-radius:12px;background:#F4F3FB;line-height:1.35}
  .nm-zeker .ic{background:rgba(168,132,58,.16);color:#866627}
  /* acties vast onderin */
  .kop .nav-acties{position:sticky;bottom:0;margin:auto -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 rgba(15,18,24,.06),0 -16px 30px -20px rgba(30,20,90,.25)}
  .kop .nav-acties .nav-login,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav-acties .nav-login{background:#F1F0F7;color:#0F1218}
}
@media (max-width:1060px){
  .kop .nav .nm-populair ul a,:is(.s-donker,.s-thema,.wagenpagina) .kop .nav .nm-populair ul a{display:grid;grid-template-columns:1fr;justify-items:center;gap:7px;padding:12px 4px 10px;border:0;border-radius:14px;background:linear-gradient(180deg,#EFEDF8,#E3E0F3)!important;font:600 .6875rem/1 var(--font);color:#0F1218}
  .kop .nav .nm-populair ul{padding:0!important;background:none!important;box-shadow:none!important}
}
@media (max-width:390px){.kop .nav-acties .nav-login span{display:none}.kop .nav-acties .nav-login{width:52px;padding:0;justify-content:center}}
/* ===== hoe werkt het, "in het kort": exploded view van de kaart (1-11) ===== */
.hw-intro-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kr ex" "kort ex" "feit ex" "inh ex";column-gap:clamp(32px,5vw,80px);align-items:start}
.hw-intro-in>.kruimels,.hw-intro-in>nav.kruimel,.hw-intro-in>:first-child{grid-area:kr}
.hw-intro-in .hw-kort{grid-area:kort}.hw-intro-in .ex{grid-area:ex}.hw-intro-in .ex-feiten{grid-area:feit}.hw-intro-in .hw-inhoud{grid-area:inh}
.ex{position:relative;margin:0;height:clamp(420px,40vw,540px);border-radius:28px;overflow:hidden;
  background:radial-gradient(60% 50% at 50% 50%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8,#E3E0F3)}
.ex-stapel{position:absolute;left:44%;top:50%;width:min(36%,190px);aspect-ratio:550/880;transform:translate(-50%,-50%) rotateX(56deg) rotateZ(-38deg);transform-style:preserve-3d}
.ex-laag{position:absolute;inset:0;border-radius:6%/3.8%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ex-laag img,.ex-laag svg{display:block;width:100%;height:100%;border-radius:inherit}
.ex-l1{transform:translateZ(150px);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.ex-l2{transform:translateZ(75px)}
.ex-l2 svg{backdrop-filter:blur(2px);box-shadow:0 0 0 1px rgba(199,120,58,.25)}
.ex-l3{transform:translateZ(0);box-shadow:-30px 40px 60px -20px rgba(30,20,90,.45)}
.ex-l1,.ex-l2{box-shadow:-24px 34px 50px -26px rgba(30,20,90,.4)}
.ex-golf{position:absolute;left:50%;top:15.5%}
.ex-golf i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:2px solid rgba(68,51,230,.7);opacity:0;animation:ex-golf 3.6s ease-out infinite}
.ex-golf i+i{animation-delay:.6s}
@keyframes ex-golf{0%{opacity:0;transform:scale(.3)}20%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
.ex:hover .ex-l1{transform:translateZ(190px)}.ex:hover .ex-l3{transform:translateZ(-30px)}
/* labels */
.ex-lab{position:absolute;z-index:5;display:grid;gap:2px;margin:0;padding:9px 12px;border-radius:12px;background:#fff;font-size:.75rem;line-height:1.35;color:#5D6371;box-shadow:0 12px 28px -16px rgba(30,20,90,.45);max-width:180px}
.ex-lab b{font-size:.8125rem;color:#0F1218}
.ex-lab::before{content:"";position:absolute;top:50%;width:28px;height:1px;background:#A8843A}
.ex-lab::after{content:"";position:absolute;top:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:#A8843A}
.ex-lab1{right:5%;top:12%}.ex-lab1::before{right:100%}.ex-lab1::after{right:calc(100% + 26px)}
.ex-lab2{left:4%;top:44%}.ex-lab2::before{left:100%}.ex-lab2::after{left:calc(100% + 26px)}
.ex-lab3{right:5%;bottom:12%}.ex-lab3::before{right:100%}.ex-lab3::after{right:calc(100% + 26px)}
/* feiten */
.ex-feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 24px;padding:0;list-style:none}
.ex-feiten li{display:grid;gap:3px;padding:14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.07);font-size:.75rem;color:#5D6371}
.ex-feiten b{font:800 1.125rem/1.1 var(--font);letter-spacing:-.02em;color:#0F1218}
@media (max-width:900px){.hw-intro-in{grid-template-columns:1fr;grid-template-areas:"kr" "kort" "ex" "feit" "inh"}.ex{margin-top:20px;height:440px}}
@media (max-width:520px){.ex{height:400px}.ex-stapel{width:150px;left:46%}.ex-lab{max-width:140px;font-size:.6875rem;padding:7px 10px}.ex-lab1,.ex-lab3{right:3%}.ex-lab2{left:3%}.ex-feiten li{padding:12px 10px}.ex-feiten b{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.ex *{animation:none!important;transition:none!important}}
.ex-stapel{top:57%}
.ex-lab1{top:14%}.ex-lab2{top:47%}.ex-lab3{bottom:20%;right:8%}
@media (max-width:520px){.ex{height:420px}.ex-stapel{top:59%;width:138px}.ex-lab1{top:8%}.ex-lab3{bottom:10%}}
/* ===== dashboard > profiel: het profiel zelf, met nummers die oplichten (1-11) ===== */
#profiel .d-beeld{padding:0!important;overflow:hidden}
.pp{position:relative;height:clamp(520px,46vw,620px)}
.pp-tel{position:absolute;left:12%;top:6%;width:44%;z-index:2}
.pp-tel img,.pp-tel2{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 40px rgba(30,20,90,.32))}
.pp-tel2{position:absolute;right:6%;top:13%;width:36%;z-index:1;transform:rotate(7deg);transition:transform .5s var(--soepel),filter .4s}
.pp-vak{position:absolute;z-index:3;border-radius:12px;border:2px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s;pointer-events:none}
.pp-pin{position:absolute;z-index:5;width:28px;height:28px;margin:-14px 0 0 -14px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#866627;font:700 .75rem/1 var(--font);
  box-shadow:0 0 0 2px #A8843A,0 8px 18px -6px rgba(15,18,24,.45);transition:transform .3s var(--soepel),background .3s,color .3s}
.pp-chip{position:absolute;z-index:4;margin:0;border-radius:16px;background:#fff;box-shadow:0 16px 34px -18px rgba(30,20,90,.5),0 0 0 1px rgba(15,18,24,.04);transition:transform .35s var(--soepel),box-shadow .3s}
.pp-chip>.pp-pin{left:0;top:0}
.pp-soc{left:2%;top:47%;display:flex;gap:6px;padding:10px}
.pp-soc i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#F1F0F7;color:#0F1218;font:700 .625rem/1 var(--font);font-style:normal}
.pp-kleur{right:4%;top:6%;display:flex;align-items:center;gap:5px;padding:9px 12px}
.pp-kleur i{width:18px;height:18px;border-radius:50%;background:var(--k);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(15,18,24,.08)}
.pp-kleur span{margin-left:6px;font-size:.6875rem;font-weight:600;color:#3A3F4B}
.pp-instel{right:4%;bottom:6%;display:grid;gap:2px;padding:10px 12px;min-width:200px}
.pp-instel p{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0;padding:6px 0;font-size:.71875rem;color:#5D6371}
.pp-instel p+p{border-top:1px solid rgba(15,18,24,.06)}
.pp-instel em{font-style:normal;font-weight:600;color:#0F1218}
.pp-wissel{display:flex;padding:2px;border-radius:999px;background:#F1F0F7;font-size:.625rem}
.pp-wissel u,.pp-wissel{text-decoration:none}.pp-wissel u{padding:2px 7px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pp-wissel{gap:0}.pp-wissel{padding-right:7px}
.pp-aan{width:28px;height:16px;border-radius:999px;background:#4433E6;position:relative}.pp-aan::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff}
/* lijst met nummers */
.pp-lijst dt{display:flex;align-items:center;gap:10px}
.pp-lijst dt b{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;box-shadow:0 0 0 1.5px #A8843A;color:#866627;font:700 .6875rem/1 var(--font);transition:background .25s,color .25s}
.pp-lijst>div{cursor:default;transition:background .25s;border-radius:12px}
.pp-lijst>div.aan dt b{background:#A8843A;color:#fff}
/* oplichten */
.pp[data-aan] .pp-pin{opacity:.35}
.pp[data-aan="1"] .pp-pin[data-n="1"],.pp[data-aan="2"] .pp-pin[data-n="2"],.pp[data-aan="3"] .pp-pin[data-n="3"],.pp[data-aan="4"] .pp-pin[data-n="4"],.pp[data-aan="5"] .pp-pin[data-n="5"],.pp[data-aan="6"] .pp-pin[data-n="6"]{opacity:1;background:#A8843A;color:#fff;transform:scale(1.18)}
.pp[data-aan="1"] .pp-vak[data-n="1"],.pp[data-aan="2"] .pp-vak[data-n="2"],.pp[data-aan="4"] .pp-vak[data-n="4"]{border-color:#A8843A;box-shadow:0 0 0 5px rgba(168,132,58,.2)}
.pp[data-aan="3"] .pp-soc,.pp[data-aan="5"] .pp-kleur,.pp[data-aan="6"] .pp-instel{transform:translateY(-4px) scale(1.04);box-shadow:0 0 0 2px #A8843A,0 22px 40px -18px rgba(30,20,90,.55)}
.pp[data-aan="5"] .pp-tel2{transform:rotate(3deg) translateX(-6%)}
@media (max-width:900px){.pp{height:560px}}
@media (max-width:560px){.pp{height:470px}.pp-tel{left:6%;width:52%;top:8%}.pp-tel2{width:40%;right:2%}.pp-soc{left:auto;right:3%;top:auto;bottom:30%;flex-wrap:wrap;width:116px;gap:4px;padding:8px}.pp-soc i{width:30px;height:30px}
  .pp-instel{min-width:0;right:3%;bottom:3%;padding:8px 10px}.pp-instel p{font-size:.625rem;gap:8px}.pp-kleur{top:3%;right:3%}.pp-kleur span{display:none}}
#profiel .d-beeld{display:block}.pp{width:100%}
@media (min-width:561px){.pp-soc{left:3%;top:24%;flex-direction:column;padding:8px}.pp-tel{left:17%;width:42%}.pp-soc i{width:32px;height:32px}}
/* ===== dashboard-hero: venster in perspectief, telefoon met meldingen (1-11) ===== */
.p-kopbeeld:has(.dh){perspective:1800px;overflow:visible}
.dh{position:relative;padding:20px 8% 60px 0}
.dh-venster{position:relative;border-radius:16px;overflow:hidden;background:#fff;transform:rotateY(-16deg) rotateX(6deg) rotateZ(1deg);transform-origin:60% 50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),-40px 60px 100px -40px rgba(0,0,0,.85),0 0 140px -30px rgba(68,51,230,.7);animation:dh-in 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes dh-in{from{opacity:0;transform:rotateY(-26deg) rotateX(10deg) translateY(30px)}}
.dh-venster img{display:block;width:100%;height:auto;filter:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
.dh-balk{display:flex;align-items:center;gap:6px;margin:0;padding:9px 12px;background:#F1F0F7;border-bottom:1px solid rgba(15,18,24,.06)}
.dh-balk i{width:9px;height:9px;border-radius:50%;background:#D9D7E4}
.dh-balk span{margin:0 auto;padding:3px 14px;border-radius:7px;background:#fff;color:#5D6371;font-size:.6875rem}
.dh-venster::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,transparent 35%);pointer-events:none}
.dh-stat{position:absolute;left:-6%;top:44%;z-index:3;display:grid;gap:2px;width:170px;padding:12px 14px;border-radius:16px;background:#fff;
  box-shadow:0 26px 50px -20px rgba(0,0,0,.6);animation:dh-zweef 7s ease-in-out infinite}
.dh-stat small{font-size:.6875rem;color:#5D6371}.dh-stat b{font:800 1.6rem/1 var(--font);letter-spacing:-.03em;color:#0F1218}
.dh-stat svg{width:100%;height:30px;margin-top:4px}
.dh-tel{position:absolute;right:-2%;bottom:0;z-index:4;width:28%;animation:dh-zweef 7s ease-in-out infinite reverse}
.dh-tel img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 40px rgba(0,0,0,.7))!important;border:0!important;box-shadow:none!important}
.dh-melding{position:absolute;left:7%;right:7%;display:flex;align-items:flex-start;gap:6px;margin:0;padding:7px;border-radius:12px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);font-size:clamp(.45rem,.62vw,.5625rem);line-height:1.3;color:#3A3F4B;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.dh-melding b{display:block;color:#0F1218}.dh-melding time{margin-left:auto;color:#8A8FA0;flex:none}
.dh-m1{top:34%;animation:dh-mel 6s ease-in-out infinite}.dh-m2{top:51%;opacity:.9}
.dh-app{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:6px;background:#12112A}.dh-app svg{width:15px;height:15px}
@keyframes dh-mel{0%,8%{opacity:0;transform:translateY(-8px) scale(.96)}16%,100%{opacity:1;transform:none}}
@keyframes dh-zweef{50%{translate:0 -8px}}
@media (max-width:900px){.dh{padding:10px 6% 50px 0}.dh-stat{left:0;top:auto;bottom:6%;width:140px}.dh-tel{width:30%}}
@media (max-width:560px){.dh-venster{transform:rotateY(-10deg) rotateX(4deg)}.dh-stat{display:none}.dh-melding{font-size:.4375rem;padding:5px}.dh-app{width:14px;height:14px}.dh-app svg{width:11px;height:11px}}
@media (prefers-reduced-motion:reduce){.dh *{animation:none!important}}
.s-pagkop .dh-melding{color:#3A3F4B;font-size:9px;line-height:1.3;max-width:none;margin:0}
.s-pagkop .dh-melding b{color:#0F1218;font-size:9.5px}
.dh-melding>span:nth-child(2){min-width:0;overflow:hidden}
.dh-melding>span:nth-child(2) b,.dh-melding>span:nth-child(2){white-space:nowrap;text-overflow:ellipsis}
.s-pagkop .dh-melding time{font-size:8px}
.dh-tel{width:30%}.dh-m1{top:33%}.dh-m2{top:46%}
.s-pagkop .dh-stat small{color:#5D6371;font-size:.6875rem}
@media (max-width:560px){.s-pagkop .dh-melding{font-size:7px}.s-pagkop .dh-melding b{font-size:7.5px}.s-pagkop .dh-melding time{font-size:6px}.dh-m2{display:none}.dh-tel{width:32%}}
.dh-melding>span:nth-child(2){white-space:normal}.dh-melding>span:nth-child(2) b{white-space:nowrap}
/* meldingen als iOS-notificaties, geschaald op de telefoonbreedte */
.dh-tel{container-type:inline-size}
.s-pagkop .dh-tel .dh-melding{left:6.5%;right:6.5%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2.6cqw 4cqw;
  padding:3.6cqw 4.4cqw;border-radius:6.5cqw;background:rgba(245,244,250,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 3cqw 8cqw -3cqw rgba(0,0,0,.55);font-size:5.4cqw;line-height:1.25;color:#3C3C43}
.s-pagkop .dh-tel .dh-melding>span:nth-child(2){display:grid;gap:.6cqw;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3C3C43;font-size:5.4cqw}
.s-pagkop .dh-tel .dh-melding b{display:block;font-size:5.6cqw;font-weight:650;color:#0F1218;overflow:hidden;text-overflow:ellipsis}
.s-pagkop .dh-tel .dh-melding time{align-self:start;font-size:4.4cqw;color:#6E6E78;margin:0}
.dh-tel .dh-app{width:11cqw;height:11cqw;border-radius:2.6cqw}.dh-tel .dh-app svg{width:8.5cqw;height:8.5cqw}
.dh-m1{top:31%}.dh-m2{top:auto;bottom:auto}.s-pagkop .dh-tel .dh-m2{top:calc(31% + 22cqw);opacity:.92;transform:scale(.97)}
@media (max-width:560px){.s-pagkop .dh-tel .dh-m2{display:grid}}
.s-pagkop .dh-tel .dh-melding{left:10%;right:10%}
.dh-tel{width:33%;right:-4%}@media (max-width:560px){.dh-tel{width:38%}}
/* ===== inlogpagina: split screen, links het formulier, rechts het dashboard dat leeft (1-11) ===== */
body.loginpagina{background:#F4F3FB;min-height:100vh;display:flex;flex-direction:column;margin:0}
.loginpagina .afkop{background:#0B0C14!important;position:relative;z-index:3}
.loginpagina .afkop .mk-naam{color:#fff}.loginpagina .afkop .mk-naam span,.loginpagina .afkop .mk-slogan{color:#8B90A0}
.loginpagina .lg-terug{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-weight:600;font-size:.875rem}
.loginpagina .lg-terug::before{content:"←";opacity:.7}.loginpagina .lg-terug:hover{background:rgba(255,255,255,.16)}
.loginpagina main.lg{flex:1;display:flex;max-width:none;width:100%;margin:0;padding:0}
.loginpagina .lg-kaart{flex:1;max-width:none;margin:0;padding:0;border:0!important;border-radius:0;background:none;box-shadow:none;grid-template-columns:1fr}
.loginpagina .lg-links{width:100%;max-width:460px;margin:0 auto;padding:clamp(40px,7vh,88px) 24px clamp(32px,6vh,64px);align-self:center}
.loginpagina .lg-links .label{font:600 .6875rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#866627}
.loginpagina .lg-links h1{margin:.35em 0 0;font-size:clamp(2.2rem,3.6vw,3rem);letter-spacing:-.045em;color:#0F1218}
.loginpagina .lg-lood{color:#5D6371;margin:.5em 0 1.6em}
.loginpagina .veld label,.loginpagina .lg-labelrij label{color:#0F1218;font-weight:600}
.loginpagina input,.loginpagina .lg-ww input{min-height:54px;border:1.5px solid #D9D7E4!important;border-radius:14px!important;background:#fff;box-shadow:0 1px 2px rgba(15,18,24,.04);transition:border-color .2s,box-shadow .2s}
.loginpagina input:hover{border-color:#B8B4D6!important}
.loginpagina input:focus,.loginpagina input:focus-visible{outline:0!important;border-color:#4433E6!important;box-shadow:0 0 0 4px rgba(68,51,230,.14)}
.loginpagina .lg-oog{background:#F1F0F7;color:#0F1218;border-radius:10px}
.loginpagina .lg-tekstknop,.loginpagina .lg-nieuw a{color:#4433E6;text-decoration-color:rgba(68,51,230,.3)}
.loginpagina .knop-koop{min-height:56px;border-radius:14px;background:linear-gradient(135deg,#5A49FF,#4433E6);box-shadow:0 16px 30px -14px rgba(68,51,230,.75)}
.loginpagina .lg-veilig svg{color:#866627}
.loginpagina .lg-nieuw{border-top-color:rgba(15,18,24,.08);color:#5D6371}
/* rechterpaneel */
.loginpagina .lg-rechts{position:relative;display:none;flex-direction:column;justify-content:center;gap:28px;padding:clamp(40px,5vw,72px);border-radius:0;overflow:hidden;
  background:radial-gradient(70% 55% at 70% 30%,rgba(68,51,230,.5),transparent 70%),radial-gradient(50% 40% at 10% 100%,rgba(68,51,230,.25),transparent 70%),#0B0C14}
.loginpagina .lg-rechts::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(70% 70% at 60% 45%,#000,transparent);mask-image:radial-gradient(70% 70% at 60% 45%,#000,transparent)}
.lgs-kop{position:relative;margin:0;display:grid;gap:10px}
.lgs-kop small{font:600 .6875rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#D9B866}
.lgs-kop b{font:800 clamp(1.8rem,2.6vw,2.4rem)/1.05 var(--font);letter-spacing:-.04em;color:#fff}
.lgs-kop em{font-style:normal;background:linear-gradient(90deg,#B3A9FF,#7C6CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.lgs{position:relative;height:clamp(380px,48vh,500px)}
.lgs .lgs-tel{position:absolute;left:30%;top:0;height:100%;width:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.7));animation:lgs-z 8s ease-in-out infinite}
.lgs-kaart{position:absolute;left:0;bottom:6%;width:44%;transform:rotate(-10deg);animation:lgs-z 8s ease-in-out infinite reverse}
.lgs-kaart img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
.lgs-ring{position:absolute;left:78%;top:20%}
.lgs-ring i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(179,169,255,.8);opacity:0}
.lgs-ring.aan i{animation:lgs-ring 1.6s ease-out}.lgs-ring.aan i:nth-child(2){animation-delay:.18s}.lgs-ring.aan i:nth-child(3){animation-delay:.36s}
@keyframes lgs-ring{0%{opacity:0;transform:scale(.3)}20%{opacity:1}100%{opacity:0;transform:scale(2.6)}}
.lgs-stat{position:absolute;right:0;top:12%;width:170px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 26px 50px -20px rgba(0,0,0,.7);animation:lgs-z 8s ease-in-out infinite;animation-delay:-2s}
.lgs-stat small{font-size:.6875rem;color:#5D6371}
.lgs-stat p{display:flex;align-items:baseline;gap:8px;margin:2px 0 0}
.lgs-stat b{font:800 1.75rem/1 var(--font);letter-spacing:-.03em;color:#0F1218;font-variant-numeric:tabular-nums}
.lgs-plus{font:700 .75rem/1 var(--font);color:#12B76A;opacity:0}.lgs-plus.aan{animation:lgs-plus 1.4s ease-out}
@keyframes lgs-plus{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.lgs-stat svg{display:block;width:100%;height:28px;margin-top:6px}
.lgs-contact{position:absolute;right:4%;bottom:4%;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 26px 50px -20px rgba(0,0,0,.7);font-size:.75rem;line-height:1.3;color:#5D6371;animation:lgs-z 8s ease-in-out infinite;animation-delay:-5s}
.lgs-contact b{display:block;font-size:.8125rem;color:#0F1218}
.lgs-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6A5BFF,#4433E6);color:#fff;font:700 .75rem/1 var(--font)}
.lgs-contact em{margin-left:6px;padding:4px 8px;border-radius:999px;background:rgba(18,183,106,.12);color:#0E7A47;font:700 .625rem/1 var(--font);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
@keyframes lgs-z{50%{translate:0 -8px}}
.lgs-feit{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lgs-feit li{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#D6D8E0;font-size:.8125rem}
.lgs-feit .ic{width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(217,184,102,.18);color:#D9B866}
@media (min-width:900px){.loginpagina .lg-kaart{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.loginpagina .lg-rechts{display:flex}}
@media (max-width:899px){.loginpagina .lg-links{padding-top:36px}}
@media (prefers-reduced-motion:reduce){.lg-rechts *{animation:none!important}}
.loginpagina>.skip{position:absolute}.loginpagina>svg.sprite,.loginpagina>svg:first-child{position:absolute}
.loginpagina .lg-rechts .lgs-feit li{display:flex;grid-template-columns:none;align-items:center;font-size:.8125rem;line-height:1;color:#D6D8E0}
.loginpagina .lg-rechts .lgs-feit li .ic{width:20px;height:20px;margin:0;padding:4px;background:rgba(217,184,102,.18);color:#D9B866}
.lgs-av{color:#fff!important}
@media (max-width:600px){.loginpagina .lg-terug{font-size:0;padding:0;width:44px;height:44px;justify-content:center}.loginpagina .lg-terug::before{font-size:1.1rem;opacity:1}}
/* mobiel: compacte live strook onder het formulier */
@media (max-width:899px){
  .loginpagina .lg-rechts{display:flex;gap:18px;padding:32px 20px 36px}
  .lgs{height:300px}.lgs .lgs-tel{left:auto;right:4%}.lgs-kaart{width:52%;bottom:4%}
  .lgs-stat{left:0;right:auto;top:4%;width:140px}.lgs-contact{right:auto;left:2%;bottom:-2%;display:none}
  .lgs-kop b{font-size:1.6rem}
}
.loginpagina .lg-rechts ul.lgs-feit{display:flex;flex-wrap:wrap;gap:8px}
.loginpagina .lg-rechts ul.lgs-feit li{display:inline-flex;width:auto;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.loginpagina .lg-rechts ul.lgs-feit li svg{width:22px;height:22px;flex:none;margin:0;padding:5px;border-radius:50%;background:rgba(217,184,102,.18);color:#D9B866}
/* ===== inlog v2: compositie die meeschaalt, formulier als kaart (1-11) ===== */
.loginpagina .lg-kaart{min-height:calc(100vh - 72px)}
.loginpagina .lg-kaart>.lg-links{position:relative;max-width:480px;padding:clamp(32px,4vw,48px);margin:clamp(32px,6vh,72px) auto;border-radius:28px;background:#fff;
  box-shadow:0 0 0 1px rgba(15,18,24,.05),0 40px 80px -40px rgba(30,20,90,.35)}
.loginpagina .lg-kaart>.lg-links::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:28px 28px 0 0;background:linear-gradient(90deg,#D9B866,#4433E6 60%,#7C6CFF)}
@media (min-width:900px){.loginpagina .lg-kaart{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .loginpagina .lg-kaart>.lg-links{align-self:center;width:calc(100% - 64px)}
  .loginpagina .lg-kaart::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 50% at 20% 30%,rgba(68,51,230,.08),transparent 70%),#F4F3FB}}
.loginpagina .lg-rechts{align-items:center;justify-content:center}
.lgs-binnen{width:min(100%,600px);display:flex;flex-direction:column;gap:clamp(20px,3vh,32px)}
.lgs-binnen .lgs-kop{order:-1}
.lgs{container-type:inline-size;position:relative;width:100%;height:auto;aspect-ratio:1/0.95}
.lgs .lgs-tel{left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);z-index:2;animation:none}
.lgs-kaart{left:-2%;bottom:3%;width:40%;z-index:1;transform:rotate(-14deg);animation:lgs-z 8s ease-in-out infinite reverse}
.lgs-ring{left:70%;top:30%}
.lgs-stat{left:0;right:auto;top:12%;width:36%;z-index:3;padding:3cqw 3.4cqw}
.lgs-stat b{font-size:6.4cqw}.lgs-stat small{font-size:2.3cqw}
.lgs-contact{right:0;bottom:22%;z-index:3;padding:2.4cqw 3cqw 2.4cqw 2.4cqw;font-size:2.4cqw;gap:2.4cqw}
.lgs-contact b{font-size:2.8cqw}.lgs-av{width:8cqw;height:8cqw;font-size:2.4cqw}.lgs-contact em{font-size:1.9cqw;padding:1cqw 1.8cqw}
.lgs-live{position:absolute;right:2%;top:6%;z-index:3;display:flex;align-items:center;gap:1.6cqw;margin:0;padding:1.6cqw 2.8cqw;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:700 2.3cqw/1 var(--font)}
.lgs-live span{font-weight:500;color:#9CA0AE}
.lgs-live i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#12B76A;box-shadow:0 0 0 0 rgba(18,183,106,.6);animation:lgs-puls 2s infinite}
@keyframes lgs-puls{70%{box-shadow:0 0 0 2cqw rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
.loginpagina .lg-rechts ul.lgs-feit{justify-content:center}
@media (max-width:899px){.lgs{height:auto}.lgs .lgs-tel{left:50%;right:auto}.lgs-stat{left:0;top:10%;width:36%}.lgs-contact{display:flex}.lgs-kaart{width:40%;bottom:3%}
  .loginpagina .lg-kaart>.lg-links{margin:20px 16px;width:auto;padding:28px 22px}}
/* ===== inlog v3: rustig en zakelijk (1-11) ===== */
.loginpagina .lg-kaart>.lg-links::before{display:none}
.loginpagina .lg-kaart>.lg-links{border-radius:24px;box-shadow:0 0 0 1px rgba(15,18,24,.06),0 30px 60px -36px rgba(30,20,90,.3)}
.loginpagina .lg-links h1{font-family:var(--font);font-weight:800;font-size:clamp(2rem,2.8vw,2.5rem);letter-spacing:-.045em}
.loginpagina .lg-links .label{margin:0}
.loginpagina .lg-lood{font-size:1rem}
.lgs-contact{display:none!important}
.lgs-live{left:50%;right:auto;top:-1%;transform:translateX(-50%)}
.lgs .lgs-tel{top:6%;height:94%}
.lgs-kaart{left:auto;right:4%;bottom:10%;width:38%;z-index:1;transform:rotate(12deg)}
.lgs-ring{left:30%;top:25%}
.lgs-stat{left:2%;top:auto;bottom:16%;width:28%;padding:2.6cqw 3cqw}
.lgs-stat b{font-size:5.4cqw}
.lgs-kop b{font-size:clamp(1.8rem,2.4vw,2.25rem)}
.lgs-binnen{text-align:left}
@media (max-width:899px){.lgs-stat{width:32%}.lgs-kaart{width:40%}}
.loginpagina .lg-links h1,.lgs-kop b{font-family:var(--kopfont)}
@media (min-width:900px){.lgs-binnen{width:min(100%,600px)}.lgs{width:min(100%,calc((100vh - 72px - 300px) * 1.05));align-self:center;min-width:360px}.loginpagina .lg-rechts{padding-block:40px}}
@media (max-width:899px){.lgs-stat{display:none}.lgs-kaart{right:2%}}
/* ===== één koppenschaal voor de hele site (1-11) =====
   h1 paginatitel 64/38 · h2 sectiekop 50/32 · h2 in artikeltekst 28/24 · h3 kaartkop 20/18 */
.s-pagina main h1,.s-pagina main h1.os-h1{font-size:clamp(2.375rem,4.4vw,4rem)!important;line-height:1.02!important;letter-spacing:-.05em!important}
.s-pagina main h2{font-size:clamp(2rem,3.5vw,3.125rem)!important;line-height:1.04!important;letter-spacing:-.045em!important}
.s-pagina main :is(.p-art-tekst,.s-tekst) h2{font-size:clamp(1.5rem,2vw,1.75rem)!important;line-height:1.2!important;letter-spacing:-.025em!important}
.s-pagina main h3{font-size:clamp(1.125rem,1.4vw,1.25rem)!important;line-height:1.3!important;letter-spacing:-.02em!important}
.s-pagina main h2.s-h2-klein{margin-bottom:clamp(20px,2.4vw,32px)!important}
/* toegankelijk contrast (Lighthouse 1-11): goud als kleine tekst #866627, grijs op wit #5D6371 */
.s-donker #prijzen .pz-staffel span{color:#5D6371}
.s-donker #prijzen .pz-laag span{color:#3A3F4B}
.voet .mk-slogan,.sv-merk .mk-slogan{color:#A3A8B6}
.sv .sv-merk .mk-slogan,.voet.sv .mk-slogan{color:#A3A8B6!important}
.os-invoer small{color:#5D6371}.os-bestand span{color:#1D4ED8}.os-cursor b,.st-cursor b{background:#D61F69}
.s-donker main .ww-toast strong{color:#0F1218}
/* ===== categoriepagina's: profiel met nummers naast de uitleg (1-11) ===== */
.og-rechts{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);align-items:start}
.og-tel{position:relative;margin:0;padding:22px 18px 18px;border-radius:24px;
  background:radial-gradient(70% 55% at 50% 42%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%)}
.og-tel img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(30,20,90,.3))}
.pp-lijst dt b{font-family:var(--font)}
.pp-lijst>div.aan{background:rgba(255,255,255,.7)}
.pp[data-aan="7"] .pp-pin[data-n="7"]{opacity:1}
@media (max-width:1100px){.og-rechts{grid-template-columns:1fr}.og-tel{max-width:300px}}
.pp.og-bin{position:relative;height:auto;width:100%}
/* categoriesectie: meer ruimte voor de lijst, markering bij elk nummer */
@media (min-width:1101px){.h-profiel.o-gids{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr)!important;gap:clamp(32px,4vw,64px)!important}
  .og-rechts{grid-template-columns:240px minmax(0,1fr)}}
.og-rechts .pp-lijst>div{grid-template-columns:150px minmax(0,1fr)}
.pp[data-aan="1"] .pp-vak[data-n="1"],.pp[data-aan="2"] .pp-vak[data-n="2"],.pp[data-aan="3"] .pp-vak[data-n="3"],.pp[data-aan="4"] .pp-vak[data-n="4"],.pp[data-aan="5"] .pp-vak[data-n="5"],.pp[data-aan="6"] .pp-vak[data-n="6"]{border-color:#A8843A;box-shadow:0 0 0 5px rgba(168,132,58,.22),0 0 0 999px rgba(15,18,24,.22)}
.og-bin{overflow:hidden;border-radius:12%/6%}
@media (max-width:1100px){.og-tel{margin-inline:auto}}
/* ===== zakelijk "voor wie": vier tegels met product en accessoires (1-11) ===== */
.tw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.tw-k h3{margin:18px 0 8px}
.tw-k p{margin:0;font-size:.9375rem;line-height:1.6;color:#5D6371}
.tw-beeld{position:relative;aspect-ratio:4/4.4;border-radius:22px;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 45%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%);transition:transform .5s var(--soepel),box-shadow .5s}
.tw-k:hover .tw-beeld{transform:translateY(-4px);box-shadow:0 30px 50px -34px rgba(30,20,90,.55)}
.tw-beeld img{position:absolute;height:auto;filter:drop-shadow(0 20px 24px rgba(30,20,90,.3))}
.tw-tel{width:46%;left:40%;top:8%}
.tw-kaart{width:62%;left:4%;top:52%;transform:rotate(-10deg);transition:transform .6s var(--soepel)}
.tw-k:hover .tw-kaart{transform:rotate(-4deg) translate(6%,-4%)}
.tw-acc{width:112%;left:-12%;top:-4%;transform-origin:52% 6%;transition:transform .8s var(--soepel)}
.tw-k:hover .tw-acc{transform:rotate(4deg)}
.tw-2 .tw-acc{width:88%;transform-origin:52% 6%}
.tw-a1{left:-28%!important;transform:rotate(-12deg)}.tw-a2{left:-6%!important;top:2%!important;z-index:2}.tw-a3{left:14%!important;transform:rotate(12deg)}
.tw-k:hover .tw-a1{transform:rotate(-16deg)}.tw-k:hover .tw-a3{transform:rotate(16deg)}.tw-k:hover .tw-a2{transform:none}
.tw-jojo{width:110%;left:-6%;top:-2%}
.tw-chip{position:absolute;z-index:3;display:grid;gap:1px;margin:0;padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.96);font-size:.6875rem;line-height:1.3;color:#5D6371;
  box-shadow:0 12px 26px -14px rgba(30,20,90,.5);white-space:nowrap}
.tw-chip b{font-size:.75rem;color:#0F1218}
.tw-chip-r{left:6%;top:8%}
.tw-prijs{left:6%;bottom:6%}.tw-prijs span{color:#866627;font-weight:600}
.tw-live{right:6%;top:6%;grid-template-columns:auto 1fr;column-gap:7px;align-items:center}.tw-live i{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:#12B76A;box-shadow:0 0 0 0 rgba(18,183,106,.6);animation:lgs-puls 2s infinite}
@media (max-width:1100px){.tw{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}
@media (max-width:560px){.tw{grid-template-columns:1fr}.tw-beeld{aspect-ratio:4/3.4}.tw-tel{width:34%;left:52%}.tw-kaart{width:46%;left:8%;top:44%}.tw-acc{width:80%;left:4%}.tw-2 .tw-acc{width:70%}.tw-jojo{width:80%;left:10%}}
@media (prefers-reduced-motion:reduce){.tw *{transition:none!important;animation:none!important}}
.tw .tw-chip,.tw .tw-chip span{font-size:.6875rem!important;line-height:1.3!important;margin:0}
.tw .tw-chip b{font-size:.75rem!important}
.tw-chip-r{left:auto;right:5%;top:auto;bottom:6%}
.tw-1 .tw-acc{top:-16%}.tw-2 .tw-acc{top:-16%!important}.tw-2 .tw-a2{top:-12%!important}
.tw-prijs{left:auto;right:5%;bottom:5%}
.tw-2 .tw-prijs{right:auto;left:5%}
.tw-live{top:5%;right:5%}
.tw-jojo{top:-12%}
.s-pagina main .o-hero-tekst h1{max-width:none}
/* homepage: zoekwoord in de h1 als label, grote regel blijft het beeld (1-11) */
.s-pagina main h1.ww-h1{display:block}
.s-pagina main h1.ww-h1 .ww-pil{display:inline-flex;font:500 .875rem/1.2 var(--font)!important;letter-spacing:0!important;color:#D6D8E0}
.ww-h1-groot{display:block}
@media (max-width:560px){.ww-pil-extra{display:none}}
/* homepage: uitlegblok voor SEO */
.hs{background:#fff}
.hs-raster{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,88px);align-items:start}
.hs-zij{position:sticky;top:110px;display:grid;gap:18px}
.hs-beeld{border-radius:24px;padding:28px 22px;background:radial-gradient(70% 55% at 50% 45%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%)}
.hs-beeld img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(30,20,90,.3))}
.hs-feit{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.hs-feit div{padding:12px 14px;border-radius:14px;background:#F4F3FB}
.hs-feit dt{font:600 .625rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#866627;margin-bottom:6px}
.hs-feit dd{margin:0;font-size:.875rem;font-weight:600;color:#0F1218}
.s-donker main .hs-tekst h2,.s-donker main .hs-tekst h3,.s-donker main .hs-tekst strong{color:#0F1218}
.hs-tekst h2{margin:0 0 18px}
.hs-tekst h3{margin:34px 0 10px}
.hs-tekst p{font-size:1.0625rem;line-height:1.75;color:#3A3F4B;max-width:66ch}
.hs-tekst a{color:#4433E6;font-weight:600;text-decoration:underline;text-decoration-color:rgba(68,51,230,.3);text-underline-offset:3px}
.hs-tekst a:hover{text-decoration-color:#4433E6}
@media (max-width:900px){.hs-raster{grid-template-columns:1fr}.hs-zij{position:static;order:2}}
.s-donker main .hs .s-oog{color:#0F1218}.s-donker main .hs .s-oog span{color:#866627}
.s-donker main .hs .s-oog::after{background:linear-gradient(90deg,rgba(168,132,58,.5),rgba(15,18,24,.08) 30%)}
.s-donker main .hs-tekst p,.s-donker main .hs-tekst li{color:#3A3F4B}
.s-donker main .hs-tekst a{color:#4433E6!important;text-decoration-color:rgba(68,51,230,.3)}
.s-donker main .hs-feit dt{color:#866627}.s-donker main .hs-feit dd{color:#0F1218}
.s-donker main .hs-tekst h2 em{-webkit-text-fill-color:currentColor;background:none}
/* ===== zakelijk hero: drie medewerkers in keycord, met teamoverzicht (1-11) ===== */
.p-kopbeeld:has(.zh){overflow:visible}
.zh{position:relative;aspect-ratio:1/0.92;margin-top:-30px}
.zh::before{content:"";position:absolute;inset:8% 4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(124,108,255,.45),transparent);filter:blur(30px)}
.zh-k{position:absolute;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))!important;border:0!important;box-shadow:none!important;transform-origin:52% 4%;animation:zh-zwaai 7s ease-in-out infinite}
.zh-k2{width:74%;left:12%;top:-6%;z-index:3}
.zh-k1{width:62%;left:-12%;top:-2%;z-index:2;transform:rotate(-14deg);animation-delay:-2s;--r:-14deg}
.zh-k3{width:62%;left:40%;top:-2%;z-index:1;transform:rotate(12deg);animation-delay:-4s;--r:12deg}
.zh-k2{--r:0deg}
@keyframes zh-zwaai{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) + 2.5deg))}}
.zh-team{position:absolute;right:-2%;bottom:14%;z-index:4;width:210px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 26px 50px -20px rgba(0,0,0,.7)}
.zh-team p{display:flex;align-items:center;gap:8px;margin:0;padding:6px 0;font-size:.75rem!important;line-height:1.2!important;color:#0F1218!important}
.zh-team p+p{border-top:1px solid rgba(15,18,24,.06)}
.zh-team .zh-kop{display:grid;gap:2px;padding:0 0 8px}
.zh-team .zh-kop b{font-size:.8125rem;color:#0F1218}.zh-team .zh-kop span{font-size:.6875rem;color:#5D6371}
.zh-team i{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--k);color:#fff;font:700 .5625rem/1 var(--font);font-style:normal}
.zh-team em{margin-left:auto;font-style:normal;font-weight:600;color:#866627;font-variant-numeric:tabular-nums}
.zh-prijs{position:absolute;left:0;bottom:4%;z-index:4;display:grid;gap:1px;margin:0;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 18px 36px -16px rgba(0,0,0,.6);font-size:.6875rem!important;line-height:1.3!important}
.zh-prijs b{font-size:.75rem;color:#0F1218}.zh-prijs span{color:#866627;font-weight:600}
@media (max-width:900px){.zh{margin-top:10px;max-width:520px;margin-inline:auto}}
@media (max-width:560px){.zh-team{width:170px;right:0;bottom:8%}.zh-prijs{bottom:0}}
@media (prefers-reduced-motion:reduce){.zh-k{animation:none}}
.zh{aspect-ratio:1/0.9;margin-top:0;overflow:visible}
.zh-k{transform-origin:46% 0%}
.zh-k2{width:112%;left:8%;top:-34%}
.zh-k1{width:96%;left:-22%;top:-28%}
.zh-k3{width:96%;left:28%;top:-30%}
.zh-team{right:-4%;bottom:-2%;width:200px}
.zh-prijs{left:-2%;bottom:6%}
.p-kopbeeld:has(.zh){-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%);padding-bottom:20px}
@media (max-width:560px){.zh-team{width:160px;right:-2%;bottom:-4%}.zh-team p{font-size:.6875rem!important}.zh-team em{font-size:.625rem}}
.p-kopbeeld:has(.zh){-webkit-mask-image:none;mask-image:none;padding-bottom:0}
.zh{aspect-ratio:1/0.86}
.zh-k{transform-origin:50% 0%}
.zh-k2{width:70%;left:16%;top:2%}
.zh-k1{width:58%;left:-6%;top:6%}
.zh-k3{width:58%;left:46%;top:4%}
.zh-team{right:-2%;bottom:-4%;width:206px}
.zh-prijs{left:0;bottom:2%}
@media (max-width:560px){.zh-team{width:168px;right:0;bottom:-6%}}
.zh-k2{width:62%;left:14%;top:0}
.zh-k1{width:52%;left:-8%;top:5%}
.zh-k3{width:52%;left:40%;top:3%}
.zh-team{right:-4%;bottom:auto;top:4%;width:200px}
.zh-prijs{left:-2%;bottom:0}
/* ===== zakelijk prijzen: rekenhulp met keycords (1-11) ===== */
.tr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.07),0 40px 70px -46px rgba(30,20,90,.45)}
.tr-beeld{position:relative;min-height:340px;background:radial-gradient(70% 55% at 50% 50%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%);overflow:hidden}
.tr-k{position:absolute;height:auto;filter:drop-shadow(0 22px 26px rgba(30,20,90,.35));transform-origin:50% 0;transition:transform .6s var(--soepel),opacity .4s}
.tr-k2{width:74%;left:13%;top:-2%;z-index:3}
.tr-k1{width:62%;left:-12%;top:6%;transform:rotate(-12deg)}
.tr-k3{width:62%;left:50%;top:4%;transform:rotate(12deg)}
.tr.zonder .tr-k{clip-path:inset(38% 0 0 0)}
.tr.zonder .tr-k2{transform:translateY(-12%)}
.tr-x{position:absolute;right:14px;bottom:14px;z-index:4;padding:6px 12px;border-radius:999px;background:#12112A;color:#fff;font:700 .875rem/1 var(--font);font-variant-numeric:tabular-nums}
.tr-paneel{padding:clamp(22px,2.6vw,32px)}
.tr-label{margin:0 0 10px;font:600 .6875rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#866627}
.tr-keus{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:5px;border-radius:14px;background:#F1F0F7}
.tr-keus button{height:42px;border:0;border-radius:10px;background:none;font:700 1rem/1 var(--font);color:#3A3F4B;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tr-keus button[aria-checked="true"]{background:#fff;color:#4433E6;box-shadow:0 4px 12px -6px rgba(30,20,90,.4)}
.tr-acc{display:flex;align-items:center;gap:12px;margin:16px 0;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px #E3E0F3;cursor:pointer}
.tr-acc input{width:20px;height:20px;accent-color:#4433E6;flex:none}
.tr-acc span{display:grid;gap:2px}.tr-acc b{font-size:.9375rem;color:#0F1218}.tr-acc small{font-size:.8125rem;color:#866627;font-weight:600}
.tr-som{margin:0;display:grid;gap:8px}
.tr-som div{display:flex;justify-content:space-between;align-items:baseline;font-size:.9375rem;color:#5D6371}
.tr-som dd{margin:0;font-weight:600;color:#0F1218;font-variant-numeric:tabular-nums}
.tr-som .tr-tot{margin-top:6px;padding-top:12px;border-top:1px solid rgba(15,18,24,.08)}
.tr-som .tr-tot dt{font-weight:600;color:#0F1218}
.tr-som .tr-tot dd{font:800 1.75rem/1 var(--font);letter-spacing:-.03em;color:#0F1218}
.tr-tot dd.flits,#tr-tot.flits{animation:tr-flits .5s ease}
@keyframes tr-flits{0%{color:#4433E6;transform:translateY(-3px)}100%{color:#0F1218;transform:none}}
.tr-klein{margin:12px 0 0!important;font-size:.75rem!important;color:#8A8FA0!important}
.tr-tabel{margin-top:14px}.tr-tabel summary{cursor:pointer;font-weight:600;color:#4433E6;font-size:.9375rem;padding:6px 0}
.tr-tabel .o-specs{margin-top:10px}
@media (max-width:700px){.tr{grid-template-columns:1fr}.tr-beeld{min-height:240px}}
.tr-k2{width:96%;left:2%;top:10%}
.tr-k1{width:80%;left:-26%;top:16%}
.tr-k3{width:80%;left:46%;top:14%}
.tr.zonder .tr-k{clip-path:none;opacity:0;transform:translateY(-14%)}
.tr-los{position:absolute;width:88%;left:6%;height:auto;opacity:0;filter:drop-shadow(0 22px 26px rgba(30,20,90,.35));transition:opacity .45s,transform .6s var(--soepel)}
.tr-los1{top:22%;transform:rotate(-8deg) translateY(10%)}.tr-los2{top:40%;transform:rotate(4deg) translateY(10%)}
.tr.zonder .tr-los{opacity:1}.tr.zonder .tr-los1{transform:rotate(-8deg)}.tr.zonder .tr-los2{transform:rotate(4deg)}
/* zakelijk hero v2: rustig, één kaart in houder voorop (1-11) */
.zh{aspect-ratio:1/0.82;margin:0}
.zh::before{inset:14% 10% 6%}
.zh .zh-los,.zh .zh-houder{position:absolute;height:auto;border:0!important;box-shadow:none!important}
.zh-los{width:58%;border-radius:4%/6.4%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))!important}
.zh-los1{left:44%;top:6%;transform:rotate(9deg);opacity:.92}
.zh-los2{left:30%;top:20%;transform:rotate(3deg)}
.zh-houder{width:52%;left:4%;top:4%;z-index:3;transform:rotate(-6deg);transform-origin:55% 0;filter:drop-shadow(0 36px 46px rgba(0,0,0,.6))!important;animation:zh-zwaai2 8s ease-in-out infinite}
@keyframes zh-zwaai2{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-3.5deg)}}
.zh-tag{position:absolute;right:4%;bottom:6%;z-index:4;display:grid;gap:2px;margin:0;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.s-pagkop .zh-tag b{font-size:.8125rem;color:#fff}.s-pagkop .zh-tag span{font-size:.75rem;color:#B6BAC6}
@media (prefers-reduced-motion:reduce){.zh-houder{animation:none}}
.zh{aspect-ratio:1/0.78}
.zh .zh-h{position:absolute;height:auto;width:46%;top:0;transform-origin:50% 0;border:0!important;box-shadow:none!important;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))!important}
.zh-h1{left:2%;transform:rotate(-13deg) translateY(6%);z-index:1;animation:zh-z1 8s ease-in-out infinite}
.zh-h3{left:50%;transform:rotate(13deg) translateY(6%);z-index:1;animation:zh-z3 8s ease-in-out infinite}
.zh-h2{left:26%;z-index:2;animation:zh-z2 8s ease-in-out infinite}
@keyframes zh-z1{0%,100%{transform:rotate(-13deg) translateY(6%)}50%{transform:rotate(-11deg) translateY(6%)}}
@keyframes zh-z2{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg)}}
@keyframes zh-z3{0%,100%{transform:rotate(13deg) translateY(6%)}50%{transform:rotate(11deg) translateY(6%)}}
.zh-tag{left:50%;right:auto;bottom:-2%;transform:translateX(-50%);text-align:center;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.zh .zh-h{animation:none}}
.zh .zh-h{width:60%}
.zh-h1{left:-8%}.zh-h2{left:20%}.zh-h3{left:48%}
.zh-tag{bottom:2%}
@media (max-width:560px){.zh-tag{bottom:-6%}}
.zh-tag{bottom:-12%}
/* rekenhulp: totaal netjes onder elkaar, nette houders */
.tr-som .tr-tot{display:grid;gap:6px;justify-content:stretch}
.tr-som .tr-tot dd{white-space:nowrap;font-size:clamp(1.5rem,2.4vw,1.875rem)}
.tr-k{transform-origin:50% 0}
.tr-k2{width:78%;left:11%;top:14%}
.tr-k1{width:66%;left:-14%;top:20%}
.tr-k3{width:66%;left:48%;top:18%}
@media (max-width:700px){.tr-beeld{min-height:260px}.tr-k2{width:52%;left:24%;top:4%}.tr-k1{width:44%;left:4%;top:10%}.tr-k3{width:44%;left:52%;top:8%}}
/* telefoons: drie gelijke kolommen, zelfde opbouw (1-11) */
.tf2-strip{grid-template-columns:repeat(3,1fr)}
.tf2-strip li{gap:6px;padding:24px 24px 26px}
.tf2-qr{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
.tf2-strip .tf2-logo{display:block;width:28px;height:28px;margin-bottom:10px;flex:none}
.tf2-qrlogo .tf-qrcode{display:block;width:28px!important;height:28px!important;box-shadow:none!important;padding:0;border-radius:4px}
.tf2-strip strong{min-height:2.7em;display:flex;align-items:flex-end}
.tf2-tel{top:12%;width:32%;left:34%}
.tf2-strip strong{align-items:flex-start}@media (max-width:640px){.tf2-strip strong{min-height:0}}
@media (max-width:640px){.tf2-strip{grid-template-columns:1fr}.tf2-strip li+li{border-left:0;border-top:1px solid rgba(15,18,24,.08)}}
/* ===== zakelijk teambeheer: vier panelen met het dashboard in actie (1-11) ===== */
.tb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none}
.tb-beeld{position:relative;aspect-ratio:4/4.2;margin-bottom:22px;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(70% 55% at 50% 45%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%)}
.tb-k h3{margin:0 0 8px}.tb-k>p:last-child{margin:0;font-size:.9375rem;line-height:1.6;color:#5D6371}
.tb-ui{width:84%;display:grid;gap:8px;padding:14px;border-radius:16px;background:#fff;box-shadow:0 22px 40px -24px rgba(30,20,90,.5);font-size:.75rem;color:#3A3F4B}
.tb-ui p{margin:0!important;font-size:.75rem!important;line-height:1.3!important}
.tb-kop{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#0F1218!important;font-size:.8125rem!important}
.tb-kop b{font-size:.6875rem;padding:3px 8px;border-radius:999px;background:#EEEBFF;color:#4433E6}
.tb-4 .tb-kop b{background:none;font-size:1.125rem;color:#0F1218;padding:0}
.tb-veld{display:grid;gap:3px;padding:8px 10px;border-radius:10px;box-shadow:inset 0 0 0 1.5px #4433E6}
.tb-veld small{font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:#8A8FA0}
.tb-typ{display:inline-block;width:0;overflow:hidden;white-space:nowrap;border-right:1.5px solid #4433E6;color:#0F1218;font-weight:600;animation:tb-typ 7s steps(16) infinite}
@keyframes tb-typ{0%,6%{width:0}30%,100%{width:16ch}}
.tb-knop{padding:9px;border-radius:10px;background:#12112A;color:#fff!important;text-align:center;font-weight:600}
.tb-lijn{background:#F1F0F7;color:#0F1218!important}
.tb-toast{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:#E8F7EF;color:#0E7A47!important;font-weight:600;animation:tb-toast 7s infinite}
.tb-toast i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#12B76A;color:#fff;font-style:normal;font-size:.625rem}
@keyframes tb-toast{0%,40%{opacity:0;transform:translateY(6px)}48%,92%{opacity:1;transform:none}100%{opacity:0}}
.tb-over{position:relative;width:84%;display:grid;justify-items:center;gap:6px}
.tb-over img{width:86%;height:auto;border-radius:4%/6.4%;filter:drop-shadow(0 16px 20px rgba(30,20,90,.3));transform:rotate(-4deg);margin-bottom:6px}
.tb-naam{display:flex;align-items:center;gap:8px;margin:0!important;padding:7px 12px 7px 7px;border-radius:999px;background:#fff;font-size:.75rem!important;font-weight:600;color:#0F1218;box-shadow:0 10px 22px -14px rgba(30,20,90,.5)}
.tb-naam em{font-style:normal;font-size:.625rem;padding:2px 7px;border-radius:999px;background:#E8F7EF;color:#0E7A47}
.tb-oud{animation:tb-oud 7s infinite}.tb-nieuw{animation:tb-nieuw 7s infinite}
@keyframes tb-oud{0%,35%{opacity:1}50%,90%{opacity:.35;text-decoration:line-through}100%{opacity:1}}
@keyframes tb-nieuw{0%,40%{opacity:0;transform:translateY(-6px)}55%,92%{opacity:1;transform:none}100%{opacity:0}}
.tb-pijl{color:#866627;font-weight:700}
.tb i{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--k);color:#fff;font:700 .5625rem/1 var(--font);font-style:normal}
.tb-rij{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(15,18,24,.06)}
.tb-rij span{display:grid;font-weight:600;color:#0F1218}.tb-rij small{font-weight:400;font-size:.625rem;color:#8A8FA0}
.tb-3 .tb-rij:nth-child(2){animation:tb-nieuw 7s infinite}
.tb-staaf{display:flex;align-items:flex-end;gap:10px;height:96px;padding:0 4px;border-bottom:1px solid rgba(15,18,24,.08)}
.tb-staaf i{position:relative;flex:1;width:auto;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,#7C6CFF,#4433E6);transform-origin:bottom;animation:tb-groei 7s ease-out infinite}
.tb-staaf i:nth-child(4){background:linear-gradient(180deg,#D9B866,#A8843A)}
.tb-staaf em{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-style:normal;font-size:.5625rem;color:#8A8FA0}
@keyframes tb-groei{0%,8%{transform:scaleY(.1)}30%,100%{transform:none}}
.tb-mail{margin-top:14px!important;padding:8px 10px;border-radius:10px;background:#F4F3FB;color:#3A3F4B!important}
@media (max-width:1100px){.tb{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}}
@media (max-width:560px){.tb{grid-template-columns:1fr}.tb-beeld{aspect-ratio:auto;padding:28px 0}}
@media (prefers-reduced-motion:reduce){.tb *{animation:none!important}.tb-typ{width:16ch}}
.tb-over img{width:70%;margin-top:4px}.tb-staaf{margin-bottom:22px}.tb-mail{margin-top:0!important}
/* hoe werkt stap 1: waaier van ontwerpen (1-11) */
.rs-waaier{position:absolute;left:50%;top:10%;width:30%;aspect-ratio:400/581;transform:translateX(-50%)}
.rs-w{position:absolute;inset:0;width:100%;height:auto;transform-origin:50% 160%;transform:rotate(calc(var(--i) * 13deg));filter:drop-shadow(0 16px 20px rgba(30,20,90,.3));transition:transform .6s var(--soepel)}
.rs-w[style*="--i:0"]{z-index:2;transform:translateY(-4%)}
.zw-f1:hover .rs-w{transform:rotate(calc(var(--i) * 16deg))}.zw-f1:hover .rs-w[style*="--i:0"]{transform:translateY(-8%)}
.rs-lg2{position:absolute;left:18%;top:52%;width:64%;height:auto;z-index:3;transform:rotate(-5deg);filter:drop-shadow(0 28px 32px rgba(30,20,90,.38))}
.rs-tag{position:absolute;left:50%;bottom:5%;z-index:4;transform:translateX(-50%);margin:0!important;padding:7px 12px;border-radius:999px;background:#fff;font-size:.6875rem!important;font-weight:600;color:#0F1218;white-space:nowrap;box-shadow:0 10px 22px -12px rgba(30,20,90,.45)}
.rs-lg2{top:44%;left:20%;width:62%;transform:rotate(-6deg)}.rs-waaier{top:9%}
/* homepage "voor teams" op mobiel: één kolom, beeld volle breedte (1-11) */
@media (max-width:1000px){
  .s-donker #zakelijk .h-team{grid-template-columns:1fr;gap:32px}
  .s-donker #zakelijk .h-team-beeld{width:100%;max-width:520px;justify-self:center}
}
@media (max-width:900px){.ab{grid-template-columns:1fr;gap:32px}.ab .ab-beeld{width:100%;max-width:520px;justify-self:center}}
/* ===== homepage: gratis ontwerpservice (1-11) ===== */
.hos{background:#fff}
.hos-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,88px);align-items:center}
.hos-beeld{position:relative;padding:clamp(28px,3vw,44px) clamp(20px,3vw,40px) clamp(36px,4vw,56px);border-radius:28px;
  background:radial-gradient(70% 60% at 30% 30%,rgba(124,108,255,.45),transparent 70%),linear-gradient(160deg,#16153A,#0B0C14)}
.hos .st{padding:20px 4% 40px 6%}
.s-donker main .hos .st-bestand,.s-donker main .hos .st-klaar p{color:#0F1218}
.s-donker main .hos .st p{font-size:inherit;line-height:inherit}
.s-donker main .hos .st-balk{font-size:.6875rem}
.s-donker main .hos .st strong{color:inherit}
.hos-tekst h2{margin:0 0 18px;color:#0F1218}
.hos-tekst>p{margin:0 0 24px;font-size:1.0625rem;line-height:1.7;color:#3A3F4B!important;max-width:44ch}
.hos-stap{display:grid;gap:12px;margin:0 0 28px;padding:0;list-style:none}
.hos-stap li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.hos-stap b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1.5px #A8843A;color:#866627;font:700 .8125rem/1 var(--font)}
.hos-stap span{display:grid;gap:2px;font-size:.9375rem;line-height:1.5;color:#5D6371}
.s-donker main .hos-stap strong{color:#0F1218;font-size:1rem}
.hos .s-knoppen{margin:0 0 22px}
.hos .s-tekstlink{color:#0F1218}
.hos-snel{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:.875rem;color:#3A3F4B}
.hos-snel li{display:flex;align-items:center;gap:8px}
.hos-snel .ic{width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(168,132,58,.14);color:#866627}
@media (max-width:1000px){.hos-raster{grid-template-columns:1fr}.hos-beeld{order:2}}
.s-donker main .hos h2{color:#0F1218}
.s-donker main .hos .s-oog{color:#0F1218}.s-donker main .hos .s-oog span{color:#866627}
.s-donker main .hos .s-oog::after{background:linear-gradient(90deg,rgba(168,132,58,.5),rgba(15,18,24,.08) 30%)}
.s-donker main .hos .s-tekstlink{color:#0F1218!important;text-decoration-color:rgba(15,18,24,.25)}
.s-donker main .hos .hos-snel,.s-donker main .hos .hos-snel li{color:#3A3F4B}
.s-donker main .hos .st-balk,.s-donker main .hos .st-balk span,.s-donker main .hos .st-balk b{font-size:.6875rem!important;line-height:1.2!important}
.s-donker main .hos .st-balk span{color:#C9CCD6}
.s-donker main .hos .st-bestand{font-size:.75rem!important;line-height:1.2!important}
.s-donker main .hos .st-klaar p{font-size:.6875rem!important;line-height:1!important}
.s-donker main .hos .st-klaar p strong,.s-donker main .hos .st-klaar p{color:#0F1218}
.hos .st-sel em,.hos .st-cursor b{font-size:.5625rem!important}
.s-donker main .hos h2 em{font-style:normal;background:linear-gradient(90deg,#5A49FF,#7C6CFF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.s-donker main .hos .knop{background:linear-gradient(135deg,#5A49FF,#4433E6);color:#fff;box-shadow:0 16px 30px -14px rgba(68,51,230,.7)}
.s-donker main .hos .knop svg{color:#fff}
.s-donker main .hs::before,.s-donker main .hos::before{display:none}
/* homepage: afwisselen beeld links/rechts, uitlegkop op sectiemaat (1-11) */
@media (min-width:1001px){.hos-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.hos-beeld{order:2}}
.s-pagina main .hs-tekst h2{font-size:clamp(2rem,3.5vw,3.125rem)!important;line-height:1.04!important;letter-spacing:-.045em!important;margin-bottom:24px!important}
.s-pagina main .hs-tekst h3{font-size:clamp(1.125rem,1.4vw,1.25rem)!important}
.hs-raster{align-items:start}
@media (max-width:1000px){.hos-beeld{order:0}}
/* slogan leesbaar: gewone zetting, iets groter en lichter (1-11) */
.kop .mk-slogan,.afkop .mk-slogan,.db-kop .mk-slogan,.sv .mk-slogan{font:500 .75rem/1.2 var(--font)!important;letter-spacing:0!important;text-transform:none!important;color:#B6BAC6!important}
@media (max-width:1180px){.kop .mk-slogan{font-size:.6875rem!important}}
.br-slogan{font:500 .8125rem/1.2 var(--font)!important;letter-spacing:0!important;text-transform:none!important;color:#866627!important}@media (max-width:700px){.br-slogan{font-size:.6875rem!important}}
/* ===== spokes: digitaal visitekaartje + met QR-code (1-11) ===== */
.dv-held,.qv-held{position:relative;aspect-ratio:1/.86}
.dv-held-tel{position:absolute;left:30%;top:0;width:40%;height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))!important;border:0!important;box-shadow:none!important}
.dv-held-kaart{position:absolute;left:2%;bottom:6%;width:52%;height:auto;transform:rotate(-9deg);filter:drop-shadow(0 30px 34px rgba(0,0,0,.55))!important;border:0!important;box-shadow:none!important;animation:lgs-z 8s ease-in-out infinite}
.dv-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 clamp(40px,6vw,96px);align-items:center}
.dv-split>.s-oog{grid-column:1/-1}
.dv-om{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.dv-fig{position:relative;margin:0;padding:clamp(28px,3vw,44px);border-radius:28px;display:grid;place-items:center;
  background:radial-gradient(70% 55% at 50% 42%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%)}
.dv-fig>img{width:62%;height:auto;filter:drop-shadow(0 30px 36px rgba(30,20,90,.32))}
.dv-fig-dash>img{width:100%;border-radius:14px;filter:none;box-shadow:0 30px 60px -30px rgba(30,20,90,.5)}
.dv-toast{position:absolute;left:8%;right:8%;bottom:16%;display:flex;gap:10px;align-items:center;margin:0;padding:11px 14px;border-radius:16px;background:#fff;box-shadow:0 24px 40px -18px rgba(30,20,90,.45);font-size:.8125rem;line-height:1.3;color:#5D6371}
.dv-toast .ic{width:28px;height:28px;padding:6px;flex:none;border-radius:50%;background:#12B76A;color:#fff}.dv-toast b{display:block;color:#0F1218}
.dv-tekst h2{margin:0 0 20px}.dv-tekst p{font-size:1.0625rem;line-height:1.75;color:#3A3F4B}
.dv-tekst a,.qv-noot a,#vergelijk p a{color:#4433E6;font-weight:600;text-decoration:underline;text-decoration-color:rgba(68,51,230,.3);text-underline-offset:3px}
.dv-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none}
.dv-beeld{position:relative;aspect-ratio:4/3.4;margin-bottom:18px;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.05)}
.dv-t h3{margin:0 0 6px}.dv-t p{margin:0;font-size:.9375rem;line-height:1.6;color:#5D6371}
.dv-kaart{width:76%;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 18px 22px rgba(30,20,90,.3))}
.dv-ring{position:absolute;left:60%;top:30%}.dv-ring i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(68,51,230,.6);animation:ex-golf 3.2s ease-out infinite}.dv-ring i+i{animation-delay:.6s}
.dv-lens{position:absolute;left:22%;top:50%;width:64px;height:64px;border-radius:14px;border:2.5px solid #4433E6;box-shadow:0 0 0 999px rgba(15,18,24,.12);animation:qv-scan 3s ease-in-out infinite}
@keyframes qv-scan{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}
.dv-chat{margin:0;display:grid;gap:6px;max-width:80%;padding:12px 14px;border-radius:16px 16px 16px 4px;background:#DCF8C6;font-size:.8125rem;line-height:1.4;color:#0F1218}
.dv-chat b{color:#1D4ED8;font-weight:600;text-decoration:underline}
.dv-sig{display:grid;gap:2px;width:80%;padding:14px;border-radius:12px;background:#fff;box-shadow:0 14px 30px -18px rgba(30,20,90,.5),0 0 0 1px rgba(15,18,24,.05);font-size:.75rem;color:#5D6371}
.dv-sig p{margin:0 0 6px!important;font-size:.75rem!important}.dv-sig b{font-size:.875rem;color:#0F1218}.dv-sig i{margin-top:8px;font-style:normal;font-weight:600;color:#4433E6}
.dv-stap{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.dv-stap li{display:grid;grid-template-columns:34px 1fr;gap:14px}
.dv-stap b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1.5px #A8843A;color:#866627;font:700 .875rem/1 var(--font)}
.dv-stap span{display:grid;gap:3px;font-size:.9375rem;line-height:1.55;color:#5D6371}.dv-stap strong{color:#0F1218;font-size:1.0625rem}
.dv-check{display:grid;gap:12px;margin:0 0 20px;padding:0;list-style:none}
.dv-check li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:1rem;line-height:1.6;color:#3A3F4B}
.dv-check .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(168,132,58,.14);color:#866627;margin-top:2px}
.dv-check strong{color:#0F1218}
#vergelijk h2{margin-bottom:24px}#vergelijk p{margin-top:20px;color:#3A3F4B}
/* QR-pagina */
.qv-kaart{position:absolute;left:4%;top:12%;width:92%;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))!important;border:0!important;box-shadow:none!important}
.qv-scan{position:absolute;left:13%;top:52%;width:22%;aspect-ratio:1;border-radius:16px;border:3px solid #fff;box-shadow:0 0 30px rgba(124,108,255,.8);animation:qv-scan 3s ease-in-out infinite}
.qv-scan i{position:absolute;left:6%;right:6%;top:10%;height:2px;background:#7C6CFF;box-shadow:0 0 12px #7C6CFF;animation:qv-lijn 2.4s ease-in-out infinite}
@keyframes qv-lijn{0%,100%{top:10%}50%{top:88%}}
.qv-tag{position:absolute;right:4%;bottom:6%;margin:0;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;font-size:.8125rem;font-weight:600}
.qv-twee{grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.qv-kolom{display:grid;justify-items:center;gap:12px;padding:20px 14px;border-radius:18px;background:#fff;text-align:center}
.qv-label{margin:0!important;font:600 .6875rem/1 var(--font)!important;letter-spacing:.14em;text-transform:uppercase;color:#866627}
.qv-code{width:110px;aspect-ratio:1;border-radius:6px;background:
  conic-gradient(from 90deg at 2px 2px,#0F1218 25%,transparent 0) 0 0/22px 22px,#fff;box-shadow:0 0 0 8px #fff,0 0 0 9px rgba(15,18,24,.08);
  -webkit-mask:radial-gradient(#000 0 0);opacity:.9}
.qv-code{background:repeating-conic-gradient(#0F1218 0 25%,#fff 0 50%) 0 0/22px 22px}
.qv-code-dicht{background:repeating-conic-gradient(#0F1218 0 25%,#fff 0 50%) 0 0/7px 7px}
.qv-uit{margin:0!important;font-size:.8125rem!important;line-height:1.4!important;color:#5D6371;display:flex;gap:6px;align-items:center}
.qv-oud .qv-uit{color:#B42318}.qv-nieuw .qv-uit{color:#0E7A47;font-weight:600}.qv-nieuw .ic{width:14px;height:14px}
.qv-noot{margin-top:20px;color:#3A3F4B}
.qv-maat{position:absolute;left:12%;bottom:16%;padding:5px 9px;border-radius:7px;background:#fff;color:#866627;font:700 .6875rem/1 var(--font);box-shadow:0 8px 18px -8px rgba(30,20,90,.4)}
@media (max-width:1100px){.dv-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.dv-split,.dv-om{grid-template-columns:1fr;gap:28px}.dv-om .dv-fig{order:0}}
@media (max-width:560px){.dv-tegels{grid-template-columns:1fr}.qv-twee{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dv-held *,.qv-held *,.dv-tegels *{animation:none!important}}
.p-kopbeeld .dv-held .dv-held-tel{width:40%!important;max-width:none}
.p-kopbeeld .dv-held .dv-held-kaart{width:52%!important;max-width:none}
.p-kopbeeld .qv-held .qv-kaart{width:92%!important}
.dv-stap span{display:block}.dv-stap strong{display:block;margin-bottom:3px}
.s-pagina main .dv-tekst h2{font-size:clamp(2rem,3.5vw,3.125rem)!important;line-height:1.04!important;letter-spacing:-.045em!important}
/* QR-hero: scanvenster vast op de QR-code van de kaart */
.qv-k{position:absolute;left:8%;top:12%;width:84%;transform:rotate(-6deg);filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}
.p-kopbeeld .qv-k .qv-plat{display:block;width:100%!important;height:auto;border-radius:3.5%/5.4%;border:0!important;box-shadow:none!important;filter:none!important}
.qv-k .qv-scan{left:3%;top:68.5%;width:17%;height:auto;aspect-ratio:1;border-radius:12px}
.qv-k .qv-scan{left:4%;top:67%;width:15.5%;border-width:2.5px;box-shadow:0 0 0 999px rgba(15,18,24,.18),0 0 24px rgba(124,108,255,.7)}.qv-k{overflow:hidden;border-radius:3.5%/5.4%}
/* QR-pagina: echte codes naast elkaar (1-11) */
.qv-twee{grid-template-columns:1fr 1fr;gap:16px;padding:clamp(22px,2.6vw,36px)}
.qv-kolom{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:20px 18px 18px;border-radius:20px;background:#fff;text-align:left;box-shadow:0 20px 40px -28px rgba(30,20,90,.45),0 0 0 1px rgba(15,18,24,.04)}
.qv-label{text-align:center}
.qv-tegel{position:relative;align-self:center;width:72%;aspect-ratio:1;padding:6%;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,18,24,.08)}
.qv-tegel svg{display:block;width:100%;height:100%}
.qv-nieuw .qv-tegel::after{content:"";position:absolute;inset:-4px;border-radius:17px;box-shadow:0 0 0 2px #4433E6;opacity:.35}
.qv-maat2{margin:0!important;text-align:center;font:600 .75rem/1 var(--font)!important;color:#0F1218;font-variant-numeric:tabular-nums}
.qv-data{display:grid;gap:6px;margin:0;padding:10px 0 0;border-top:1px dashed rgba(15,18,24,.12);list-style:none;font-size:.75rem;line-height:1.3;color:#3A3F4B}
.qv-data em{font-style:normal;font-size:.625rem;padding:2px 6px;border-radius:999px;background:#FEE4E2;color:#B42318}
.qv-data s{color:#8A8FA0}.qv-ok{color:#0E7A47;font-weight:600}
.qv-uit{justify-content:center;margin-top:auto!important;padding:8px;border-radius:10px;font-size:.75rem!important;font-weight:600}
.qv-oud .qv-uit{background:#FEF3F2;color:#B42318}.qv-nieuw .qv-uit{background:#E8F7EF;color:#0E7A47}
.qv-nieuw .qv-uit .ic{width:14px;height:14px}
@media (max-width:560px){.qv-twee{grid-template-columns:1fr 1fr;gap:10px;padding:14px}.qv-kolom{padding:14px 10px}.qv-tegel{width:88%}.qv-data{font-size:.6875rem}}
.qv-data em{white-space:nowrap}
/* QR-pagina: QR, NFC of allebei als drie kaarten (1-11) */
.qn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.qn-k{position:relative;padding:16px 16px 20px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.06),0 30px 60px -44px rgba(30,20,90,.5);transition:transform .4s var(--soepel)}
.qn-k:hover{transform:translateY(-4px)}
.qn-2,.qn-3{box-shadow:0 0 0 1.5px rgba(68,51,230,.35),0 30px 60px -40px rgba(68,51,230,.5)}
.qn-tag{position:absolute;right:16px;top:16px;z-index:2;padding:5px 10px;border-radius:999px;background:#12112A;color:#fff;font:600 .6875rem/1 var(--font)}
.qn-beeld{position:relative;aspect-ratio:4/3;margin-bottom:16px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 45%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8 0%,#E3E0F3 100%)}
.qn-qr{width:46%;aspect-ratio:1;padding:5%;border-radius:12px;background:#fff;box-shadow:0 16px 30px -16px rgba(30,20,90,.45)}
.qn-qr svg{display:block;width:100%;height:100%}
.qn-cam{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:18px;
  background:linear-gradient(#4433E6,#4433E6) 0 0/22px 3px,linear-gradient(#4433E6,#4433E6) 0 0/3px 22px,linear-gradient(#4433E6,#4433E6) 100% 0/22px 3px,linear-gradient(#4433E6,#4433E6) 100% 0/3px 22px,
  linear-gradient(#4433E6,#4433E6) 0 100%/22px 3px,linear-gradient(#4433E6,#4433E6) 0 100%/3px 22px,linear-gradient(#4433E6,#4433E6) 100% 100%/22px 3px,linear-gradient(#4433E6,#4433E6) 100% 100%/3px 22px;background-repeat:no-repeat;animation:qn-cam 3s ease-in-out infinite}
.qn-1 .qn-cam{filter:grayscale(1);opacity:.5;animation-name:qn-zoek}
@keyframes qn-cam{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(.9)}}
@keyframes qn-zoek{0%,100%{transform:translate(-52%,-50%) scale(1)}50%{transform:translate(-48%,-50%) scale(1.04)}}
.qn-kaart{width:74%;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 18px 22px rgba(30,20,90,.3))}
.qn-ring{position:absolute;left:62%;top:38%}.qn-ring i{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;border:2px solid rgba(68,51,230,.6);animation:ex-golf 3s ease-out infinite}
.qn-ring i:nth-child(2){animation-delay:.5s}.qn-ring i:nth-child(3){animation-delay:1s}
.qn-k h3{margin:0 0 2px}
.qn-sub{margin:0 0 14px!important;font-size:.875rem!important;color:#5D6371}
.qn-lijst{display:grid;gap:8px;margin:0;padding:12px 0 0;border-top:1px solid rgba(15,18,24,.07);list-style:none;font-size:.9375rem;color:#0F1218}
.qn-lijst li{display:flex;align-items:center;gap:10px}
.qn-lijst i{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;font-style:normal;font-size:.6875rem;font-weight:700}
.qn-lijst .ja i{background:#E8F7EF;color:#0E7A47}.qn-lijst .nee{color:#8A8FA0}.qn-lijst .nee i{background:#FEF3F2;color:#B42318}
.qn-tabel{margin-top:18px}
@media (max-width:900px){.qn{grid-template-columns:1fr;max-width:460px}}
@media (prefers-reduced-motion:reduce){.qn *{animation:none!important}}
.qn .qn-lijst li{display:grid!important;grid-template-columns:20px 1fr!important;align-items:center;gap:10px;padding:0!important;margin:0;background:none!important;color:#0F1218!important;font-size:.9375rem!important;font-weight:500;text-align:left;width:auto;height:auto;border:0!important}
.qn .qn-lijst li.nee{color:#8A8FA0!important}
.qn .qn-lijst li i{position:static!important;display:grid!important;place-items:center;width:20px!important;height:20px!important;margin:0!important;padding:0!important;border-radius:50%;font:700 .6875rem/1 var(--font)!important;font-style:normal}
.qn .qn-lijst li.ja i{background:#E8F7EF!important;color:#0E7A47!important}
.qn .qn-lijst li.nee i{background:#FEF3F2!important;color:#B42318!important}
.qn .qn-lijst li::before,.qn .qn-lijst li::after{display:none!important}
.qn .qn-lijst li{justify-items:start;text-align:left!important;box-shadow:none!important;outline:0!important;border-radius:0!important}.qn .qn-lijst li span{text-align:left}
/* bedrukken: filmstrip in plaats van oude stapbeelden (1-11) */
.bd-beeld{display:grid;place-items:center}
.bd-beeld img{position:static!important}
.bd-ontw{position:relative;width:84%}
.bd-ontw img{display:block;width:100%;height:auto;border-radius:3.5%/5.4%;box-shadow:0 22px 40px -20px rgba(15,27,45,.55)}
.bd-gids{position:absolute;inset:-5% -3.5%;border:1.5px dashed rgba(194,54,86,.55);border-radius:6px}
.bd-maat{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:#fff;color:#866627;font:700 .6875rem/1 var(--font);white-space:nowrap;box-shadow:0 8px 18px -8px rgba(30,20,90,.4)}
.bd-stapel{width:86%;height:auto;filter:drop-shadow(0 26px 30px rgba(30,20,90,.3))}
.bd-toast{top:auto!important;bottom:10%}
.bd-dash{width:94%;height:auto;border-radius:12px;box-shadow:0 26px 50px -26px rgba(30,20,90,.55)}
.bd-strook a{color:#4433E6;font-weight:600}
/* ===== winkelwagen en afrekenen in huisstijl (1-11) ===== */
body.wagenpagina,body.afrekenpagina{background:linear-gradient(180deg,#F4F3FB 0,#F4F3FB 70%,#fff 100%)}
.wagenpagina main,.afrekenpagina main{background:none}
.wagenpagina .kaart,.afrekenpagina .kaart,.afrekenpagina .af-blok,.afrekenpagina .af-som{border:0!important;box-shadow:0 0 0 1px rgba(15,18,24,.05),0 30px 60px -44px rgba(30,20,90,.45)!important;border-radius:22px!important;background:#fff}
.wagenpagina .wregel-beeld,.afrekenpagina .wregel-beeld{border:0!important;border-radius:16px;background:radial-gradient(70% 60% at 50% 40%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8,#E3E0F3)!important}
.wagenpagina .wregel-beeld img{filter:drop-shadow(0 8px 10px rgba(30,20,90,.25))}
.wp-acc{border-radius:22px!important;background:linear-gradient(180deg,#EFEDF8,#E6E3F4)!important}
.wp-acc h2{font-size:1.125rem!important}
.wp-acc li{border-radius:16px!important;box-shadow:0 10px 24px -18px rgba(30,20,90,.4)}
.wp-acc li>img{width:72px!important;height:72px!important;object-fit:cover;object-position:24% 72%;border-radius:12px;background:linear-gradient(180deg,#EFEDF8,#E3E0F3);transform:none}
.wp-acc-knop{border-color:#4433E6!important;color:#4433E6!important}.wp-acc-knop:hover{background:#4433E6!important;color:#fff!important}
.wagenpagina h1,.afrekenpagina h1{letter-spacing:-.045em}
.wagenpagina .gratisbalk{background:#fff;border:0;border-radius:16px;box-shadow:0 0 0 1px rgba(15,18,24,.05)}
.wagenpagina .gratisbalk i,.afrekenpagina .gratisbalk i{background:linear-gradient(90deg,#6A5BFF,#4433E6)}
.afrekenpagina .afvoet{background:#0B0C14;color:#A3A8B6;border:0}.afrekenpagina .afvoet a{color:#fff}
/* QR-pagina: vergrootglas op de QR-code (1-11) */
.qo{display:block;position:relative;aspect-ratio:1/.92;padding:0;overflow:hidden}
.qo-kaart{position:absolute;left:5%;top:9%;width:62%;transform:rotate(-4deg)}
.qo-kaart img{display:block;width:100%;height:auto;border-radius:3.5%/5.4%;box-shadow:0 24px 40px -20px rgba(15,27,45,.5)}
.qo-doel{position:absolute;left:4.5%;top:71%;width:14%;aspect-ratio:1;border-radius:6px;border:2px solid #4433E6;box-shadow:0 0 0 4px rgba(68,51,230,.2)}
.qo-loep{position:absolute;right:7%;bottom:9%;width:48%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #fff,0 0 0 8px rgba(68,51,230,.35),0 30px 60px -20px rgba(30,20,90,.55);display:grid;place-items:center}
.qo-loep::before{content:"";position:absolute;left:-36%;top:-26%;width:44%;height:2px;background:linear-gradient(90deg,transparent,rgba(68,51,230,.5));transform:rotate(38deg);transform-origin:right}
.qo-zone{width:62%;aspect-ratio:1;padding:10%;border-radius:8px;border:1.5px dashed rgba(168,132,58,.7);background:#fff;transition:box-shadow .3s,border-color .3s}
.qo-code{width:100%;height:100%;transition:transform .3s}
.qo-code svg{display:block;width:100%;height:100%}
.qo-m{position:absolute;display:flex;align-items:center;gap:6px;color:#866627;font:700 .6875rem/1 var(--font);transition:opacity .3s}
.qo-m i{flex:1;background:#A8843A}.qo-m b{white-space:nowrap}
.qo-mh{left:19%;right:19%;bottom:8%;height:10px}.qo-mh i{height:1.5px}
.qo-mv{top:19%;bottom:19%;right:8%;width:10px;flex-direction:column}.qo-mv i{width:1.5px}.qo-mv b{writing-mode:vertical-rl}
.qo-scan{position:absolute;left:19%;right:19%;top:20%;height:2px;background:#7C6CFF;box-shadow:0 0 12px #7C6CFF;animation:qo-scan 2.6s ease-in-out infinite}
@keyframes qo-scan{0%,100%{top:20%}50%{top:80%}}
.qo-pin{position:absolute;z-index:3;width:26px;height:26px;margin:-13px 0 0 -13px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#866627;font:700 .75rem/1 var(--font);box-shadow:0 0 0 2px #A8843A,0 6px 14px -6px rgba(15,18,24,.45);transition:transform .3s,background .3s,color .3s}
.qo-pin[data-n="3"]{opacity:0}
.qo-toast{position:absolute;left:5%;bottom:6%;z-index:3;display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px 10px 10px;border-radius:14px;background:#fff;box-shadow:0 18px 36px -16px rgba(30,20,90,.5);font-size:.75rem;line-height:1.3;transition:transform .3s}
.qo-toast>span:first-child{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#12B76A;color:#fff}.qo-toast .ic{width:14px;height:14px}
.qo-toast strong{display:block;color:#0F1218}.qo-toast small{color:#5D6371}
.qo-lijst{display:grid;gap:6px;margin:0 0 20px;padding:0;list-style:none}
.qo-lijst li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:12px 14px;border-radius:14px;cursor:default;transition:background .25s;font-size:1rem;line-height:1.6;color:#3A3F4B}
.qo-lijst li>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1.5px #A8843A;color:#866627;font:700 .75rem/1 var(--font)}
.qo-lijst strong{color:#0F1218}
.qo-lijst li.aan{background:#F4F3FB}.qo-lijst li.aan>b{background:#A8843A;color:#fff}
.qo[data-aan] .qo-pin{opacity:.3}
.qo[data-aan="1"] .qo-pin[data-n="1"],.qo[data-aan="2"] .qo-pin[data-n="2"],.qo[data-aan="4"] .qo-pin[data-n="4"]{opacity:1;background:#A8843A;color:#fff;transform:scale(1.15)}
.qo[data-aan] .qo-m{opacity:.25}.qo[data-aan="1"] .qo-m{opacity:1}
.qo[data-aan="2"] .qo-zone{border-color:#A8843A;box-shadow:0 0 0 6px rgba(168,132,58,.18)}
.qo[data-aan="3"] .qo-code{transform:scale(1.06)}
.qo[data-aan="4"] .qo-toast{transform:translateY(-6px) scale(1.04)}
@media (prefers-reduced-motion:reduce){.qo-scan{animation:none}}
.qo-loep{bottom:17%;right:6%;width:46%}
.qo-pin[data-n="1"]{top:93%!important}.qo-pin[data-n="2"]{left:19%!important;top:19%!important}.qo-pin[data-n="4"]{display:none}
.qo-toast{left:4%;bottom:4%;max-width:60%}
.qo-mh{bottom:9%}
.qo[data-aan="4"] .qo-toast{box-shadow:0 0 0 2px #A8843A,0 18px 36px -16px rgba(30,20,90,.5)}
.qo-pin[data-n="1"]{left:14%!important;top:91%!important}
/* QR-pagina: bestellen + zelf maken (1-11) */
.qb-fig{position:relative}.qb-fig>img{width:86%}
.qb-prijs{position:absolute;right:6%;bottom:8%;display:grid;gap:2px;margin:0;padding:12px 16px;border-radius:16px;background:#12112A;color:#fff;box-shadow:0 20px 40px -18px rgba(18,17,42,.7)}
.qb-prijs small{font:600 .625rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#D9B866}.qb-prijs b{font:800 1.75rem/1 var(--font);letter-spacing:-.03em}.qb-prijs span{font-size:.75rem;color:#B6BAC6}
.qz{width:min(320px,86%);display:grid;justify-items:center;gap:12px;padding:20px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -30px rgba(30,20,90,.5)}
.qz p{margin:0!important}
.qz-kop{display:flex;justify-content:space-between;width:100%;font-weight:700;color:#0F1218;font-size:.9375rem!important}
.qz-kop span{font-size:.6875rem;padding:4px 9px;border-radius:999px;background:#EEEBFF;color:#4433E6;font-weight:600}
.qz-code{width:64%;aspect-ratio:1;padding:6%;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(15,18,24,.08)}.qz-code svg{display:block;width:100%;height:100%}
.qz-url{font-size:.75rem!important;color:#5D6371}
.qz-knop{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.qz-knop b{padding:9px;border-radius:10px;background:#12112A;color:#fff;text-align:center;font-size:.8125rem}.qz-knop b+b{background:#F1F0F7;color:#0F1218}
.qz-noot{font-size:.6875rem!important;color:#866627;text-align:center;font-weight:600}
.s-pagina main .qb-prijs b{color:#fff!important}.s-pagina main .qb-prijs span{color:#B6BAC6!important}
/* productrij + koopbalk op uitlegpagina's (1-11) */
.pr2{background:#fff}
.pr2-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none}
.pr2-rij a{display:flex;flex-direction:column;height:100%;padding:14px;border-radius:22px;background:#fff;text-decoration:none;box-shadow:0 0 0 1px rgba(15,18,24,.06),0 26px 50px -40px rgba(30,20,90,.5);transition:transform .35s var(--soepel),box-shadow .35s}
.pr2-rij a:hover{transform:translateY(-6px);box-shadow:0 0 0 1.5px rgba(68,51,230,.4),0 34px 60px -36px rgba(68,51,230,.5)}
.pr2-beeld{display:grid;place-items:center;aspect-ratio:4/3;border-radius:16px;background:radial-gradient(70% 55% at 50% 45%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8,#E3E0F3);overflow:hidden}
.pr2-beeld img{width:84%;height:auto;filter:drop-shadow(0 16px 20px rgba(30,20,90,.3));transition:transform .5s var(--soepel)}
.pr2-rij a:hover .pr2-beeld img{transform:rotate(-4deg) scale(1.05)}
.pr2-tekst{display:grid;gap:2px;margin:14px 2px 10px}.pr2-tekst strong{font-size:1.0625rem;color:#0F1218}.pr2-tekst small{font-size:.8125rem;color:#5D6371}
.pr2-prijs{display:flex;justify-content:space-between;align-items:center;margin:auto 2px 0;padding-top:10px;border-top:1px solid rgba(15,18,24,.07);font-weight:700;color:#0F1218}
.pr2-prijs em{font-style:normal;font-size:.8125rem;font-weight:600;color:#4433E6}
.kb{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;margin:28px 0 8px;padding:22px 26px;border-radius:24px;overflow:hidden;position:relative;
  background:radial-gradient(60% 120% at 0% 50%,rgba(68,51,230,.55),transparent 70%),#12112A;color:#fff}
.kb-beeld{position:relative;width:170px;height:96px}
.kb-beeld img{position:absolute;width:140px;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.kb-beeld img:first-child{left:0;top:4px;transform:rotate(-10deg)}.kb-beeld img:last-child{left:30px;top:16px;transform:rotate(4deg)}
.kb-tekst p{margin:0!important;color:#B6BAC6;font-size:.9375rem}.kb-tekst .kb-kop{color:#fff!important;font:800 1.375rem/1.15 var(--font)!important;letter-spacing:-.025em;margin-bottom:4px!important}
.kb-actie{display:flex;align-items:center;gap:18px}
.kb-prijs{display:grid;margin:0!important;text-align:right}.kb-prijs b{font:800 1.5rem/1 var(--font);color:#fff}.kb-prijs span{font-size:.75rem;color:#B6BAC6;white-space:nowrap}
.kb .knop{background:#fff;color:#1F1592}
@media (max-width:1100px){.pr2-rij{grid-template-columns:repeat(2,minmax(0,1fr))}.kb{grid-template-columns:1fr;gap:16px}.kb-actie{justify-content:space-between}.kb-prijs{text-align:left}}
/* koopblok v2 (1-11) */
.kb2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;margin:36px 0 0;padding:clamp(28px,4vw,52px);border-radius:30px;position:relative;overflow:hidden;
  background:radial-gradient(70% 90% at 85% 40%,rgba(124,108,255,.55),transparent 65%),radial-gradient(50% 60% at 0% 100%,rgba(68,51,230,.3),transparent 70%),#0E0D22;color:#fff}
.kb2::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(60% 70% at 80% 45%,#000,transparent);mask-image:radial-gradient(60% 70% at 80% 45%,#000,transparent)}
.kb2-tekst{position:relative}
.kb2 p{margin:0}
.kb2-oog{font:600 .6875rem/1 var(--font)!important;letter-spacing:.18em;text-transform:uppercase;color:#D9B866!important;margin-bottom:12px!important}
.kb2-kop{font:800 clamp(1.75rem,2.8vw,2.5rem)/1.05 var(--font)!important;letter-spacing:-.04em;color:#fff!important;margin-bottom:12px!important;font-family:var(--kopfont)!important}
.kb2-lood{color:#B6BAC6!important;font-size:1rem!important;line-height:1.6!important;max-width:42ch;margin-bottom:18px!important}
.kb2-punt{display:grid;gap:9px;margin:0 0 24px;padding:0;list-style:none;color:#E2E4EA;font-size:.9375rem}
.kb2-punt li{display:flex;align-items:center;gap:10px}.kb2-punt .ic{width:20px;height:20px;padding:4px;border-radius:50%;background:rgba(217,184,102,.18);color:#D9B866}
.kb2-actie{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.kb2-prijs{display:grid}.kb2-prijs b{font:800 1.75rem/1 var(--font);color:#fff;letter-spacing:-.03em}.kb2-prijs span{font-size:.75rem;color:#9CA0AE}
.kb2 .knop{background:#fff;color:#1F1592;box-shadow:0 16px 30px -14px rgba(124,108,255,.8)}
.kb2-link{flex-basis:100%;color:#C9C3FF;font-size:.875rem;font-weight:600;text-decoration:underline;text-decoration-color:rgba(201,195,255,.35);text-underline-offset:4px}
.kb2-podium{position:relative;display:block;aspect-ratio:1/.72}
.kb2-k{position:absolute;width:64%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));transition:transform .7s var(--soepel)}
.kb2-k1{left:2%;top:10%;transform:rotate(-14deg)}
.kb2-k2{left:30%;top:2%;transform:rotate(6deg)}
.kb2-k3{left:14%;top:30%;width:70%;transform:rotate(-4deg);display:block}
.kb2-k3 img{display:block;width:100%;height:auto;border-radius:3.5%/5.4%}
.kb2-podium:hover .kb2-k1{transform:rotate(-18deg) translate(-4%,-2%)}.kb2-podium:hover .kb2-k2{transform:rotate(10deg) translate(4%,-4%)}.kb2-podium:hover .kb2-k3{transform:rotate(-2deg) translateY(-3%)}
.kb2-scan{position:absolute;left:4%;top:68%;width:15.5%;aspect-ratio:1;border-radius:8px;border:2px solid #fff;box-shadow:0 0 18px rgba(124,108,255,.9)}
.kb2-scan u{position:absolute;left:8%;right:8%;top:12%;height:2px;background:#7C6CFF;box-shadow:0 0 10px #7C6CFF;animation:qv-lijn 2.4s ease-in-out infinite}
.kb2-golf{position:absolute;left:66%;top:38%}.kb2-golf i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:2px solid rgba(179,169,255,.75);animation:ex-golf 3.2s ease-out infinite}
.kb2-golf i:nth-child(2){animation-delay:.6s}.kb2-golf i:nth-child(3){animation-delay:1.2s}
.kb2-tag{position:absolute;right:2%;bottom:4%;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(10px);font-size:.8125rem;font-weight:600;color:#fff}
.qv-noot{margin:22px 0 0!important}
@media (max-width:900px){.kb2{grid-template-columns:1fr}.kb2-podium{order:-1;max-width:460px;margin:0 auto;width:100%}}
@media (prefers-reduced-motion:reduce){.kb2 *{animation:none!important;transition:none!important}}
/* "Bekijk als tabel" / "Alle prijzen": kleine link in plaats van FAQ-balk */
details.tr-tabel{margin:18px 0 0;padding:0;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;text-align:center}
details.tr-tabel>summary{display:inline-flex;align-items:center;gap:8px;padding:9px 16px!important;border-radius:999px;background:#fff!important;box-shadow:0 0 0 1px rgba(15,18,24,.08)!important;font-size:.875rem!important;font-weight:600;color:#4433E6;cursor:pointer;list-style:none;width:auto!important;min-height:0!important}
details.tr-tabel>summary::-webkit-details-marker{display:none}
details.tr-tabel>summary::before,details.tr-tabel>summary::after{content:none!important;display:none!important}
details.tr-tabel>summary>*{display:none}
details.tr-tabel>summary:hover{box-shadow:0 0 0 1.5px #4433E6!important}
details.tr-tabel>summary:not(:has(i))::after{content:"▾"!important;display:inline!important;position:static!important;width:auto!important;height:auto!important;background:none!important;font-size:.75rem;transform:none!important}
details.tr-tabel[open]>summary::after{content:"▴"!important}
details.tr-tabel .o-specs{margin-top:14px;text-align:left;background:#fff;border-radius:18px}
details.tr-tabel .o-specs th,details.tr-tabel .o-specs td{background:#fff!important}details.tr-tabel .o-specs thead th{background:#F4F3FB!important}
/* afsluitende CTA op elke pagina gelijk aan de homepage (1-11) */
.s-slot .s-slot-in{background:radial-gradient(70% 90% at 90% 10%,rgba(255,255,255,.18),transparent 60%),linear-gradient(135deg,#4433E6 0%,#2A1D9E 100%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 30px 60px -30px rgba(15,18,24,.35)!important}
.s-pagina .s-slot .s-slot-in h2{color:#fff!important}
.s-pagina .s-slot .s-slot-in p{color:#D5D1FF!important}
.s-pagina .s-slot .s-slot-in .s-tekstlink{color:#fff!important;text-decoration-color:rgba(255,255,255,.4)}
.s-pagina .s-slot .s-slot-in .knop{background:#fff!important;color:#1F1592!important;box-shadow:0 16px 30px -14px rgba(15,10,60,.6)}
.s-pagina .s-slot .s-slot-in .knop svg{color:#1F1592}
.s-pagina .s-slot .s-slot-in h2 em{background:none;-webkit-text-fill-color:#fff;color:#fff}
/* ontwerptegels: prijs + echte knop i.p.v. "Pas aan" (1-11) */
.o-kaart a{transition:transform .35s var(--soepel),box-shadow .35s,background .25s}
.o-kaart a:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px rgba(68,51,230,.35),0 30px 50px -30px rgba(68,51,230,.5)!important}
.o-kaart a:hover .o-beeld img{transform:translateY(-6px) rotate(-3deg) scale(1.04)}
.o-pas{display:flex!important;justify-content:space-between;align-items:center;gap:10px;margin-top:14px!important;padding-top:12px;border-top:1px solid rgba(15,18,24,.07);color:#0F1218!important}
.o-pas>b{font-size:.9375rem;font-weight:700;color:#0F1218;font-variant-numeric:tabular-nums}
.o-pas-knop{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#F1F0F7;color:#4433E6;font-size:.8125rem;font-weight:600;transition:background .25s,color .25s,gap .25s}
.o-pas-knop .kp{width:.95em;height:.95em}
.o-kaart a:hover .o-pas-knop{background:linear-gradient(135deg,#5A49FF,#4433E6);color:#fff;gap:9px}
.o-leeg .o-pas-knop,.o-kaart:first-child .o-pas-knop{}
@media (max-width:520px){.o-pas{display:flex!important;flex-wrap:wrap;gap:6px}.o-pas>b{font-size:.8125rem}.o-pas-knop{padding:6px 10px;font-size:.75rem}}
/* ===== productpagina per ontwerp (1-11) ===== */
.pp2-held .s-kruimel{margin-bottom:22px}
.pp2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:start}
.pp2-voorbeeld{position:sticky;top:96px;padding:clamp(24px,3vw,44px);border-radius:28px;
  background:radial-gradient(70% 60% at 50% 40%,rgba(124,108,255,.35),transparent 70%),rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pp2-kanten{display:grid;gap:22px;justify-items:center}
.pp2.pp2-st2 .pp2-kanten,.pp2-kanten:has(.pp2-st:not([hidden]) + .pp2-st:not([hidden])){grid-template-columns:1fr 1fr}
.pp2-kant{position:relative;margin:0;width:100%;display:grid;justify-items:center;gap:10px}
.pp2-kant[hidden]{display:none}
.pp2-kant canvas{display:block;width:100%;height:auto;border-radius:4%/6.2%;box-shadow:0 40px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);opacity:0;transition:opacity .4s}
.pp2-st canvas{max-width:300px;border-radius:5.8%/3.6%}
.pp2.klaar .pp2-kant canvas{opacity:1}
.pp2-start{position:absolute;inset:0 0 28px;width:100%;height:calc(100% - 28px);object-fit:contain;transition:opacity .4s}
.pp2.klaar .pp2-start{opacity:0;pointer-events:none}
.pp2-kant figcaption{font-size:.75rem;color:#8B90A0;letter-spacing:.06em;text-transform:uppercase}
.pp2-live{display:flex;justify-content:center;align-items:center;gap:8px;margin:18px 0 0;font-size:.8125rem;color:#B6BAC6}
.pp2-live i{width:8px;height:8px;border-radius:50%;background:#12B76A;animation:lgs-puls 2s infinite}
.pp2-koop{padding:clamp(22px,2.6vw,32px);border-radius:26px;background:#fff;color:#0F1218;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.pp2-koop p{margin:0}
.pp2-vak{font:600 .6875rem/1 var(--font)!important;letter-spacing:.16em;text-transform:uppercase;color:#866627!important;margin-bottom:10px!important}
.s-pagina main .pp2-koop h1{font-size:clamp(1.75rem,2.6vw,2.375rem)!important;line-height:1.08!important;letter-spacing:-.04em!important;color:#0F1218!important;margin:0 0 14px}
.s-pagina main .pp2-koop h1 em{background:linear-gradient(90deg,#5A49FF,#7C6CFF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-style:normal}
.pp2-prijs{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px!important}
.pp2-prijs b{font:800 1.75rem/1 var(--font);letter-spacing:-.03em;color:#0F1218}.pp2-prijs span{font-size:.8125rem;color:#5D6371}
.pp2-fm{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:18px;border-radius:14px;background:#F1F0F7}
.pp2-fm button{display:grid;gap:2px;padding:9px;border:0;border-radius:10px;background:none;font:700 .875rem/1.1 var(--font);color:#3A3F4B;cursor:pointer}
.pp2-fm small{font-weight:500;font-size:.6875rem;color:#8A8FA0}
.pp2-fm button[aria-pressed="true"]{background:#fff;color:#4433E6;box-shadow:0 4px 12px -6px rgba(30,20,90,.4)}
.pp2-form{padding:16px;border-radius:18px;background:#F4F3FB;margin-bottom:16px}
.pp2-kop{font-weight:700;font-size:.9375rem!important;color:#0F1218;margin-bottom:12px!important}
.pp2-velden{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp2-veld{display:grid;gap:4px}.pp2-groot{grid-column:1/-1}
.pp2-veld label{font-size:.75rem;font-weight:600;color:#3A3F4B}
.pp2-veld input{width:100%;min-height:44px;padding:0 12px;border:1.5px solid #D9D7E4;border-radius:12px;background:#fff;font:500 .9375rem var(--font);color:#0F1218;transition:border-color .2s,box-shadow .2s}
.pp2-veld input::placeholder{color:#A3A8B6}
.pp2-veld input:focus{outline:0;border-color:#4433E6;box-shadow:0 0 0 4px rgba(68,51,230,.14)}
.pp2-knop{width:100%;justify-content:center;min-height:56px;border-radius:14px;background:linear-gradient(135deg,#5A49FF,#4433E6)!important;color:#fff!important;box-shadow:0 16px 30px -14px rgba(68,51,230,.75)}
.pp2-meer{margin:12px 0 16px!important;font-size:.8125rem;color:#5D6371;text-align:center}.pp2-meer a{color:#4433E6;font-weight:600}
.pp2-zeker{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0 0 16px;padding:0;list-style:none;font-size:.8125rem;color:#3A3F4B}
.pp2-zeker li{display:flex;align-items:center;gap:6px}.pp2-zeker .ic{width:16px;height:16px;padding:3px;border-radius:50%;background:rgba(168,132,58,.14);color:#866627}
.pp2-staffel{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;border-radius:14px;box-shadow:0 0 0 1px rgba(15,18,24,.07);overflow:hidden}
.pp2-staffel li{display:grid;gap:2px;padding:8px 6px;text-align:center;font-size:.6875rem;color:#5D6371}.pp2-staffel li+li{border-left:1px solid rgba(15,18,24,.06)}
.pp2-staffel b{font-size:.8125rem;color:#0F1218}.pp2-staffel li:last-child{background:#F4F3FB}.pp2-staffel li:last-child b{color:#866627}
.pp2-held .s-kruimel a,.pp2-held .s-kruimel li{color:#B6BAC6}
@media (max-width:1000px){.pp2{grid-template-columns:1fr}.pp2-voorbeeld{position:static}}
@media (max-width:520px){.pp2-velden{grid-template-columns:1fr}.pp2-staffel{grid-template-columns:repeat(3,1fr)}.pp2-staffel li:nth-child(n+4){display:none}}
.pp2-kop{color:#0F1218!important}
/* snel bestellen op ontwerptegels (1-11) */
.o-kaart{position:relative}
.o-pas-plek{width:150px;height:34px}
.o-snel{position:absolute;right:20px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#5A49FF,#4433E6);color:#fff;font:600 .8125rem/1 var(--font);box-shadow:0 10px 20px -10px rgba(68,51,230,.8);transition:transform .2s,box-shadow .2s,gap .2s}
.o-snel .kp{width:.95em;height:.95em}
.o-snel:hover{transform:translateY(-2px);gap:9px;box-shadow:0 14px 26px -10px rgba(68,51,230,.9)}
.o-leeg .o-pas-plek{display:none}
.sn{width:min(440px,calc(100vw - 32px));padding:0;border:0;border-radius:24px;background:#fff;color:#0F1218;box-shadow:0 40px 100px -30px rgba(15,10,60,.7)}
.sn::backdrop{background:rgba(11,12,20,.6);backdrop-filter:blur(4px)}
.sn-in{position:relative;display:grid;gap:12px;padding:22px}
.sn-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#F1F0F7;font-size:1.25rem;cursor:pointer;color:#0F1218}
.sn-beeld{display:grid;place-items:center;height:170px;border-radius:18px;background:radial-gradient(70% 55% at 50% 45%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#EFEDF8,#E3E0F3)}
.sn-beeld img{max-height:150px;max-width:80%;filter:drop-shadow(0 16px 20px rgba(30,20,90,.3))}
.sn p{margin:0}
.sn-oog{font:600 .6875rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#866627;margin-top:4px!important}
.sn h2{margin:0;font:800 1.5rem/1.1 var(--kopfont);letter-spacing:-.035em;color:#0F1218}
.sn-veld{display:grid;gap:5px}.sn-veld label{font-size:.8125rem;font-weight:600}.sn-veld i{font-style:normal;font-weight:400;color:#8A8FA0}
.sn-veld input{min-height:48px;padding:0 14px;border:1.5px solid #D9D7E4;border-radius:12px;font:500 1rem var(--font);color:#0F1218}
.sn-veld input:focus{outline:0;border-color:#4433E6;box-shadow:0 0 0 4px rgba(68,51,230,.14)}
.sn-veld input.fout{border-color:#D92D20;box-shadow:0 0 0 4px rgba(217,45,32,.12)}
.sn-knop{justify-content:center;min-height:52px;border-radius:14px;background:linear-gradient(135deg,#5A49FF,#4433E6)!important;color:#fff!important;margin-top:4px}
.sn-knop:disabled{opacity:.7}
.sn-klein{font-size:.75rem;color:#5D6371;text-align:center}
@media (max-width:520px){.o-snel{position:static;width:calc(100% - 20px);margin:0 10px 10px;justify-content:center}.o-pas-plek{display:none}.o-kaart{display:flex;flex-direction:column}.o-kaart a{flex:1}}
/* ontwerptegel: Aanpassen + Bestellen (1-11) */
.o-kaart{display:flex;flex-direction:column;background:#fff;border-radius:16px}
.o-kaart>a{flex:1;padding-bottom:6px!important}
.o-kaart a:hover{transform:none}
.o-kaart:hover{box-shadow:0 0 0 1.5px rgba(68,51,230,.3),0 30px 50px -30px rgba(68,51,230,.45)}
.o-pas{justify-content:flex-start!important;align-items:baseline!important;gap:6px!important}
.o-pas small{font-size:.75rem;color:#8A8FA0}
.o-acties{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;padding:0 14px 14px}
.o-snel{position:static!important;justify-content:center;height:40px!important;width:100%}
.o-aanpas{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:999px;background:#F1F0F7;color:#0F1218;font:600 .8125rem/1 var(--font);text-decoration:none;transition:background .2s,color .2s}
.o-aanpas:hover{background:#E3E0F3;color:#4433E6}
.o-aanpas-vol{grid-column:1/-1}
.o-aanpas .kp{width:.95em;height:.95em}
@media (max-width:520px){.o-acties{grid-template-columns:1fr;padding:0 10px 10px;gap:6px}.o-snel{width:100%!important;margin:0!important}.o-aanpas,.o-snel{height:38px!important;font-size:.75rem}}
.o-kaart{background:#F4F3FB;border-radius:18px;overflow:hidden;transition:box-shadow .3s,transform .3s var(--soepel)}
.o-kaart:hover{transform:translateY(-4px);background:#fff}
.o-kaart>a,.o-kaart>a:hover{background:none!important;box-shadow:none!important;border-radius:0!important}
.o-aanpas{height:40px!important;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,18,24,.08)}
.o-kaart:hover .o-aanpas{background:#F1F0F7}
@media (max-width:520px){.o-aanpas,.o-snel{height:38px!important}}
/* tegelknoppen: oude .o-kaart a-regel niet op de knoppen, tegels wit op lavendel */
.o-kaart .o-acties a{display:inline-flex!important;grid-template-rows:none!important;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px!important;line-height:1;white-space:nowrap;border-radius:999px!important}
.o-kaart{background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.06),0 20px 40px -32px rgba(30,20,90,.4)}
.o-kaart:hover{background:#fff;box-shadow:0 0 0 1.5px rgba(68,51,230,.35),0 30px 50px -30px rgba(68,51,230,.45)}
.o-kaart .o-beeld{border-radius:14px;background:radial-gradient(70% 55% at 50% 45%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#F4F3FB,#ECEAF7)}
.o-aanpas{background:#F1F0F7!important;box-shadow:none!important}
.o-kaart:hover .o-aanpas{background:#E8E5F7!important}
.o-aanpas:hover{color:#4433E6}
.o-kaart .o-acties a.o-snel{background:linear-gradient(135deg,#5A49FF,#4433E6)!important;color:#fff!important;text-decoration:none}
/* productpagina: bestelblok (1-11) */
.s-pagina main .pp2-koop p,.s-pagina main .pp2-koop li,.s-pagina main .pp2-koop span,.s-pagina main .pp2-koop label{color:inherit}
.pp2-koop{color:#0F1218}
.pp2-cta{display:grid;gap:10px;margin-bottom:16px}
.s-pagina main .pp2-knop{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;padding:10px 10px 10px 22px;border:0;border-radius:16px;cursor:pointer;text-align:left;
  background:linear-gradient(135deg,#5A49FF 0%,#4433E6 60%,#3424C9 100%)!important;color:#fff!important;box-shadow:0 18px 34px -14px rgba(68,51,230,.8),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .2s,box-shadow .2s}
.s-pagina main .pp2-knop:hover{transform:translateY(-2px);box-shadow:0 24px 40px -14px rgba(68,51,230,.9),inset 0 1px 0 rgba(255,255,255,.2)}
.pp2-knop-t{display:grid;gap:3px}
.s-pagina main .pp2-knop b{font:700 1.125rem/1 var(--font);color:#fff}
.s-pagina main .pp2-knop small{font-size:.75rem;color:rgba(255,255,255,.75)!important}
.s-pagina main .pp2-knop-p{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 14px;border-radius:12px;background:rgba(255,255,255,.16);font:800 1rem/1 var(--font);color:#fff!important;font-variant-numeric:tabular-nums}
.pp2-knop-p i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:#4433E6;font-style:normal;font-weight:700;transition:transform .2s}
.pp2-knop:hover .pp2-knop-p i{transform:translateX(3px)}
.s-pagina main .pp2-zelf{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;background:#F1F0F7;color:#0F1218!important;font-weight:600;font-size:.9375rem;text-decoration:none;transition:background .2s}
.pp2-zelf svg{width:18px;height:18px;color:#4433E6}
.pp2-zelf:hover{background:#E8E5F7}
.pp2-betaal{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.s-pagina main .pp2-betaal span{font-size:.75rem;color:#8A8FA0;margin-right:4px}
.pp2-betaal img{width:32px;height:22px;border-radius:4px;box-shadow:0 0 0 1px rgba(15,18,24,.08)}
.pp2-zeker{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px!important;margin:0 0 14px!important}
.pp2-zeker li{display:grid!important;justify-items:center;gap:6px!important;padding:10px 6px;border-radius:12px;background:#F4F3FB;text-align:center;font-size:.75rem;line-height:1.3;color:#5D6371!important}
.pp2-zeker b{color:#0F1218;display:block}
.pp2-zeker .ic{width:22px!important;height:22px!important;padding:5px!important}
.s-pagina main .pp2-hulp{margin:0 0 14px!important;text-align:center;font-size:.8125rem;color:#5D6371}
.s-pagina main .pp2-hulp a{color:#4433E6;font-weight:600}
.s-pagina main .pp2-staffel li span{color:#5D6371}
.s-pagina main .pp2-vak{color:#866627!important}
/* productrij: staande kaarten niet afsnijden, knop zoals ontwerptegels */
.pr2-beeld img{width:auto!important;height:auto;max-width:84%;max-height:86%}
.pr2-beeld{aspect-ratio:4/3.2}
.pr2-prijs em.pr2-knop{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:linear-gradient(135deg,#5A49FF,#4433E6);color:#fff!important;font-size:.8125rem;transition:transform .2s}
.pr2-rij a:hover .pr2-knop{transform:translateX(2px)}
.pr2-beeld{position:relative}.pr2-beeld img{position:absolute;inset:0;margin:auto;max-width:84%!important;max-height:86%!important;width:auto!important;height:auto!important}
.br-kaart-st{width:min(200px,30vw)!important;transform:translate(-50%,-50%) rotate(-8deg)}
/* ===== klantdashboard in huisstijl (1-11) ===== */
.dashboardpagina{font-variant-numeric:normal}
.dashboardpagina :is(.db-getal,.db-tabel td,.db-cijfer,output,[class*="getal"],[class*="aantal"],time){font-variant-numeric:tabular-nums}
body.dashboardpagina{--kopfont:'Schibsted Grotesk','Inter',system-ui,sans-serif;background:#F4F3FB;font-feature-settings:"cv11"}
body.dashboardpagina .db-kop{background:#0B0C14!important;border-bottom:1px solid rgba(255,255,255,.06)}
body.dashboardpagina .db-kop .mk-naam{color:#fff}
body.dashboardpagina .db-kop nav a,body.dashboardpagina .db-kop [role=tab]{color:#C9CCD6}
body.dashboardpagina .db-kop nav a[aria-current],body.dashboardpagina .db-kop nav a.aan,body.dashboardpagina .db-kop [aria-selected="true"]{background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:none!important;border-color:transparent!important}
/* titelband */
body.dashboardpagina .db-titel{background:radial-gradient(60% 140% at 85% 0%,rgba(124,108,255,.45),transparent 65%),#0E0D22!important;box-shadow:0 0 0 100vmax #0E0D22!important;color:#fff}
body.dashboardpagina .db-titel h1{font-family:var(--kopfont);font-weight:800;letter-spacing:-.04em!important;color:#fff}
body.dashboardpagina .db-titel p,body.dashboardpagina .db-titel .db-lood{color:#B6BAC6}
body.dashboardpagina .db-datum{color:#D9B866!important}
/* kaarten */
body.dashboardpagina :is(.db-blok,.db-kaart,.db-tegels>*,.db-order,.db-paneel,.vk-blok,.db-melding){border:0!important;border-radius:20px!important;background:#fff;box-shadow:0 0 0 1px rgba(15,18,24,.05),0 24px 50px -40px rgba(30,20,90,.45)!important}
body.dashboardpagina .db-tegel-naam{color:#866627!important;letter-spacing:.14em}
body.dashboardpagina .db-getal{font-family:var(--kopfont);font-weight:800;color:#0F1218}
/* knoppen */
body.dashboardpagina .knop:not(.knop-lijn):not(.knop-zacht){background:linear-gradient(135deg,#5A49FF,#4433E6)!important;color:#fff!important;border:0!important;box-shadow:0 12px 24px -12px rgba(68,51,230,.7)}
body.dashboardpagina .knop-lijn{background:#fff!important;color:#0F1218!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(15,18,24,.12)!important}
body.dashboardpagina .db-titel .knop-lijn{background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important}
/* subtabs binnen een view */
body.dashboardpagina [role=tablist]:not(.db-kop *){background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(15,18,24,.06);padding:4px}
body.dashboardpagina [role=tablist]:not(.db-kop *) [aria-selected="true"]{background:#12112A!important;color:#fff!important;border-radius:999px}
/* velden */
body.dashboardpagina :is(input[type=text],input[type=email],input[type=tel],input[type=url],input:not([type]),textarea,select){border:1.5px solid #E1DFEC!important;border-radius:12px!important;background:#fff}
body.dashboardpagina :is(input,textarea,select):focus{outline:0!important;border-color:#4433E6!important;box-shadow:0 0 0 4px rgba(68,51,230,.12)!important}
body.dashboardpagina input[type=checkbox]{accent-color:#4433E6}
/* grafiek */
body.dashboardpagina .db-staaf.aan,body.dashboardpagina .db-staaf-top{background:linear-gradient(180deg,#7C6CFF,#4433E6)!important}
body.dashboardpagina{--band:#0E0D22}
body.dashboardpagina .db-titel{background:#0E0D22!important;box-shadow:0 0 0 100vmax #0E0D22!important;clip-path:inset(0 -100vmax)!important}
body.dashboardpagina .db-titel::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:radial-gradient(40% 120% at 75% 0%,rgba(124,108,255,.45),transparent 70%);pointer-events:none}
body.dashboardpagina .db-live{background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important;color:#D6D8E0!important}
body.dashboardpagina .db-live *{color:#D6D8E0!important}
body.dashboardpagina .db-staaf{background:#E3E0F3!important;border-radius:8px 8px 4px 4px}
body.dashboardpagina .db-staven li.top .db-staaf{background:linear-gradient(180deg,#7C6CFF,#4433E6)!important}
body.dashboardpagina .db-staven li.vandaag .db-staaf{background:linear-gradient(180deg,#D9B866,#A8843A)!important}
body.dashboardpagina .db-staven li:hover .db-staaf{background:#B3A9FF!important}
body.dashboardpagina .db-staven li.vandaag>span:last-child,body.dashboardpagina .db-staven li.vandaag small{color:#866627}
body.dashboardpagina .db-titel{position:relative;isolation:isolate;overflow:visible}
body.dashboardpagina .db-getal,body.dashboardpagina .db-getal *{font-variant-numeric:normal!important}
body.dashboardpagina .db-titel :is([role=tablist],.db-periode,.st-periode,.db-segment){background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important}
body.dashboardpagina .db-titel :is([role=tablist],.db-periode,.st-periode,.db-segment) button{color:#C9CCD6!important;background:none}
body.dashboardpagina .db-titel :is([role=tablist],.db-periode,.st-periode,.db-segment) :is([aria-selected="true"],[aria-pressed="true"],.aan){background:linear-gradient(135deg,#5A49FF,#4433E6)!important;color:#fff!important}
body.dashboardpagina .db-titel select{background-color:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important}
body.dashboardpagina .db-titel select option{color:#0F1218}
body.dashboardpagina .db-titel :is(button,a).knop-lijn,body.dashboardpagina .db-titel .db-csv{background:rgba(255,255,255,.08)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important}
body.dashboardpagina .db-titel button:not([aria-selected]):not([aria-pressed]):not(.knop){background:rgba(255,255,255,.08)!important;color:#fff!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important}
/* ==== SITE-EIND ==== */