/*!
* Adem Installatietechniek - componentlaag
* Afgeleid van assets/css/style.css uit de statische bron.
* Structuur en spacing komen uit Divi; dit bestand levert de
* componenten die Divi-instellingen niet exact kunnen uitdrukken.
*/
/* ==========================================================================
Adem Installatietechniek — huisstijl
Goud & wit, oranje accenten.
========================================================================== */
:root{
/* Kleuren */
--bone:#FAF8F3;
--bone-2:#F3EFE5;
--white:#fff;
--ink:#16130E;
--ink-2:#373025;
--muted:#6E665A;
--line:#E7E0D2;
--line-2:#D6CCB8;
--gold:#C9A227;
--gold-lt:#E4C972;
--gold-pale:#F5EAC8;
--gold-dk:#94761A;
--gold-grad:linear-gradient(135deg,#F0DA9C 0%,#C9A227 38%,#96771A 68%,#E4C972 100%);
--orange:#EF6C1A;
--orange-dk:#D25A0E;
--orange-soft:#FDEEE2;
--dark:#14110C;
--dark-2:#1D1913;
/* Ruimte */
--pad:clamp(1.25rem,4vw,2rem);
--wrap:1240px;
--wrap-narrow:820px;
--sect:clamp(4.5rem,9vw,8rem);
--r-sm:8px;
--r:14px;
--r-lg:24px;
--r-xl:34px;
/* Schaduw */
--sh-sm:0 1px 2px rgba(22,19,14,.05),0 2px 8px rgba(22,19,14,.04);
--sh:0 4px 14px rgba(22,19,14,.06),0 14px 40px rgba(22,19,14,.07);
--sh-lg:0 10px 30px rgba(22,19,14,.09),0 30px 80px rgba(22,19,14,.11);
--sh-gold:0 10px 34px rgba(201,162,39,.22);
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ---------- Basislaag ----------
Divi levert een eigen reset en een vaste kopschaal (h2 wordt 26px). Die
staan inline in de , dus vóór dit bestand. Door de basisregels uit
de bron hier opnieuw te zetten wint de huisstijl weer, zonder dat er
ergens !important aan te pas komt. Alleen overflow-x blijft buiten de
Visual Builder, omdat dat daar het slepen van modules stoort. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
font-size:1.0625rem;line-height:1.7;color:var(--ink-2);background:var(--bone);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body:not(.et-fb){overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
/* Divi zet een eigen linkkleur via een inline stijl na dit bestand; met body
ervoor wint de bron weer, zonder dat componentklassen last hebben. */
body a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:#fff}
/* Divi geeft koppen en alinea's nog een padding-bottom mee; de bron kent die
niet en regelt de ruimte met marges op de componenten zelf. */
h1,h2,h3,h4,h5,h6,p{padding-bottom:0}
h1{font-size:clamp(2.5rem,5.6vw,4.9rem)}
h2{font-size:clamp(2rem,3.7vw,3.15rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.015em;line-height:1.2}
h4{font-size:1.0625rem;letter-spacing:-.01em}
p{text-wrap:pretty}
/* ---------- Typografie ---------- */
h1,h2,h3,h4,.h-fam{
font-family:'Archivo',system-ui,sans-serif;font-weight:800;color:var(--ink);
line-height:1.04;letter-spacing:-.025em;text-wrap:balance;
}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:.005em}
.gold-text{
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
.lead{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.65;color:var(--muted)}
.eyebrow{
display:inline-flex;align-items:center;gap:.6rem;
font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--gold-grad);border-radius:2px;flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:var(--gold-lt)}
/* ---------- Layout ---------- */
.wrap{width:min(100% - (var(--pad) * 2),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--pad) * 2),var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.sect-head{max-width:660px;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.sect-head--center{margin-inline:auto;text-align:center}
.sect-head p{margin-top:1.1rem}
.sect-head h2{margin-top:1rem}
/* ---------- Knoppen ---------- */
.btn{
--btn-bg:var(--orange);--btn-fg:#fff;
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
padding:1rem 1.6rem;border-radius:100px;
font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.01em;
background:var(--btn-bg);color:var(--btn-fg);
transition:transform .28s var(--ease),background-color .2s,border-color .2s,color .2s;
text-align:center;
}
.btn:hover{background:var(--orange-dk);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:19px;height:19px;flex:none}
.btn--ghost{
background:transparent;color:var(--ink);
border:1.5px solid var(--line-2);
}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--gold{background:var(--gold-grad);color:#2A2109}
.btn--gold:hover{background:var(--gold-grad);filter:brightness(1.06)}
.btn--wa{background:#25D366}
.btn--wa:hover{background:#1FB855}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#fff;color:var(--orange)}
.btn--onDark.btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.btn--onDark.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--lg{padding:1.15rem 2rem;font-size:1rem}
.btn--block{width:100%}
.link-arrow{
display:inline-flex;align-items:center;gap:.5rem;font-family:'Archivo',sans-serif;
font-weight:700;font-size:.92rem;color:var(--ink);
}
.link-arrow svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.link-arrow:hover{color:var(--orange)}
.link-arrow:hover svg{transform:translateX(5px)}
/* ---------- Topbalk ---------- */
.topbar{
background:var(--dark);color:rgba(255,255,255,.72);
font-size:.8rem;border-bottom:1px solid rgba(201,162,39,.28);
position:relative;z-index:60;
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:42px;flex-wrap:wrap}
.topbar__list{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.topbar__item svg{width:14px;height:14px;color:var(--gold-lt);flex:none}
.topbar a:hover{color:#fff}
.topbar__stars{color:var(--gold-lt);letter-spacing:.06em}
.topbar b{color:#fff;font-weight:600}
@media (max-width:860px){.topbar__list--right{display:none}}
/* ---------- Header ---------- */
.header{
position:sticky;top:0;z-index:50;background:rgba(250,248,243,.86);
backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background-color .3s;
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(22,19,14,.06);background:rgba(250,248,243,.94)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:88px}
.logo{display:inline-flex;align-items:center;gap:.85rem;flex:none}
.logo svg,.logo img{width:50px;height:50px;flex:none}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__name{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink)}
.logo__sub{font-family:'Archivo',sans-serif;font-size:.63rem;font-weight:600;letter-spacing:.235em;
text-transform:uppercase;color:var(--gold-dk);margin-top:4px}
@media (max-width:520px){
.logo{gap:.6rem}
.logo svg,.logo img{width:40px;height:40px}
.logo__name{font-size:1.2rem}
}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{
position:relative;padding:.55rem .9rem;border-radius:100px;font-size:.94rem;font-weight:500;
color:var(--ink-2);transition:color .2s,background-color .2s;
}
.nav a:hover{color:var(--ink);background:rgba(201,162,39,.1)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a[aria-current="page"]::after{
content:'';position:absolute;left:50%;bottom:2px;translate:-50% 0;
width:16px;height:2px;border-radius:2px;background:var(--gold-grad);
}
.nav__has{position:relative}
.nav__toggle{display:inline-flex;align-items:center;gap:.32rem}
.nav__toggle svg{width:13px;height:13px;transition:transform .25s var(--ease);opacity:.6}
.nav__has:hover .nav__toggle svg,.nav__has:focus-within .nav__toggle svg{transform:rotate(180deg)}
.nav__drop{
position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;width:290px;
background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);
padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.nav__has:hover .nav__drop,.nav__has:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop a{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:10px;font-size:.9rem;width:100%}
.nav__drop a::after{display:none}
.nav__drop i{
width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
background:var(--gold-pale);color:var(--gold-dk);
}
.nav__drop i svg{width:15px;height:15px}
.header__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#fff}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1040px){
.nav,.header__cta .btn--ghost{display:none}
.burger{display:flex}
}
@media (max-width:520px){
.header__cta .btn{padding:.85rem 1.15rem;font-size:.88rem}
.logo__sub{letter-spacing:.18em;font-size:.5rem}
}
/* Mobiel menu */
.mobmenu{
position:fixed;inset:0;z-index:49;background:var(--bone);padding:calc(88px + 42px) var(--pad) 2rem;
overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);
transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
body.menu-open{overflow:hidden}
body.menu-open .mobmenu{opacity:1;visibility:visible;transform:none}
.mobmenu__nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mobmenu__nav > a,.mobmenu__group > a{
padding:1.05rem .25rem;border-bottom:1px solid var(--line);
font-family:'Archivo',sans-serif;font-weight:700;font-size:1.28rem;letter-spacing:-.02em;color:var(--ink);
display:flex;align-items:center;justify-content:space-between;
}
.mobmenu__group{border-bottom:1px solid var(--line)}
.mobmenu__group > a{border-bottom:0;padding-bottom:.55rem}
.mobmenu__sub{display:flex;flex-direction:column;gap:.15rem;padding:0 .25rem 1rem}
.mobmenu__sub a{display:flex;align-items:center;gap:.6rem;font-size:.98rem;color:var(--muted);padding:.42rem 0}
.mobmenu__sub a::before{content:'';width:14px;height:1.5px;background:var(--gold);flex:none;border-radius:2px}
.mobmenu__cta{display:grid;gap:.7rem;margin-top:2rem}
.mobmenu__info{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.mobmenu__info a{color:var(--ink);font-weight:600}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem)}
.hero::before{
content:'';position:absolute;inset:-30% -10% auto -10%;height:820px;z-index:0;pointer-events:none;
background:radial-gradient(58% 55% at 72% 32%,rgba(201,162,39,.2),transparent 68%),
radial-gradient(45% 45% at 12% 8%,rgba(239,108,26,.09),transparent 70%);
}
.hero::after{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
background-image:linear-gradient(rgba(22,19,14,.033) 1px,transparent 1px),
linear-gradient(90deg,rgba(22,19,14,.033) 1px,transparent 1px);
background-size:62px 62px;
-webkit-mask-image:radial-gradient(80% 62% at 50% 32%,#000,transparent 78%);
mask-image:radial-gradient(80% 62% at 50% 32%,#000,transparent 78%);
}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2.5rem,5vw,4.25rem);align-items:center}
@media (max-width:980px){.hero__in{grid-template-columns:1fr;gap:2.75rem}}
/* Kop staat op maximaal twee regels: regel 1 breekt op de
, regel 2 loopt door */
.hero h1{margin-top:1.15rem;font-size:clamp(2.15rem,4.05vw,3.55rem);text-wrap:normal}
.hero h1 .serif{font-weight:400;letter-spacing:-.005em}
.hero__sub{margin-top:1.5rem;max-width:53ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}
.hero__usps{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.hero__usps li{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;color:var(--ink-2)}
.hero__usps svg{width:17px;height:17px;color:var(--gold-dk);flex:none}
/* Hero beeld */
.hero__media{position:relative}
.hero__shot{
position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
aspect-ratio:4/5;background:var(--bone-2);
}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero__shot::after{
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 -110px 120px -60px rgba(20,17,12,.55);
}
.hero__shot--2{
position:absolute;right:-6%;bottom:-9%;width:47%;aspect-ratio:1/1;z-index:2;
border:7px solid var(--bone);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
}
@media (max-width:980px){.hero__shot--2{width:40%;right:0}}
@media (max-width:520px){.hero__shot--2{width:44%;right:-2%;bottom:-6%;border-width:5px}}
.hero__badge{
position:absolute;left:-4%;top:8%;z-index:3;background:#fff;border-radius:18px;
padding:.9rem 1.1rem;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:.75rem;
border:1px solid var(--line);
}
.hero__badge__score{
font-family:'Archivo',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.04em;
color:var(--ink);line-height:1;
}
.hero__badge__meta{font-size:.72rem;line-height:1.35;color:var(--muted)}
.hero__badge__stars{color:var(--gold);font-size:.78rem;letter-spacing:.08em;display:block}
@media (max-width:520px){.hero__badge{left:0;padding:.7rem .85rem;gap:.55rem}.hero__badge__score{font-size:1.3rem}}
/* Vertrouwensrij */
.trustrow{
position:relative;z-index:1;margin-top:clamp(3rem,6vw,4.5rem);
display:flex;align-items:center;justify-content:center;gap:clamp(1.25rem,4vw,3.25rem);
flex-wrap:wrap;padding-top:2rem;border-top:1px solid var(--line);
}
.trustrow__item{display:flex;align-items:center;gap:.7rem}
.trustrow__logo{
font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-.02em;color:var(--ink);
}
/* Echte platformlogo's, optisch op gelijke hoogte gezet */
.trustrow__img{width:auto;flex:none}
.trustrow__img--werkspot{height:20px}
.trustrow__img--google{height:19px}
.trustrow__img--tiktok{height:26px}
.trustrow__wordmark{
font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.045em;
color:var(--ink);margin-left:-.28rem;
}
.trustrow__score{display:flex;flex-direction:column;line-height:1.25}
.trustrow__score b{font-family:'Archivo',sans-serif;font-size:.95rem;color:var(--ink)}
/* alleen het regeltje eronder, niet de sterren die in de staan */
.trustrow__score > span{font-size:.75rem;color:var(--muted)}
.trustrow__sep{width:1px;height:34px;background:var(--line);flex:none}
@media (max-width:700px){.trustrow__sep{display:none}}
.stars{color:var(--gold);letter-spacing:.1em;font-size:.8rem}
.stars.stars--google{color:#FBBC04;font-size:.8rem}
.stars.stars--werkspot{color:#4F1E68;font-size:.8rem}
/* ---------- Marquee ---------- */
.marquee{
background:var(--dark);color:var(--gold-lt);border-block:1px solid rgba(201,162,39,.25);
padding-block:1rem;overflow:hidden;position:relative;
}
.marquee__track{display:flex;gap:0;width:max-content;animation:marq 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__grp{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem}
.marquee__grp span{
font-family:'Archivo',sans-serif;font-weight:700;font-size:.94rem;letter-spacing:.02em;white-space:nowrap;
}
.marquee__grp i{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
/* ---------- Kaarten / Diensten ---------- */
.grid{display:grid;gap:clamp(1.1rem,2vw,1.6rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
.svc{
position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s;
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--gold-lt)}
.svc__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.svc__img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s var(--ease-out)}
.op-top{object-position:center 22%!important}
.op-bottom{object-position:center 78%!important}
.svc:hover .svc__img img{transform:scale(1.055)}
.svc__img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,17,12,.55))}
.svc__num{
position:absolute;left:1.1rem;top:1.1rem;z-index:2;width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;background:rgba(250,248,243,.92);backdrop-filter:blur(6px);
font-family:'Archivo',sans-serif;font-weight:800;font-size:.82rem;color:var(--gold-dk);letter-spacing:-.01em;
}
.svc__body{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1;gap:.75rem}
.svc__body p{font-size:.945rem;color:var(--muted);flex:1}
.svc__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.svc__tags li{
font-size:.735rem;font-weight:600;padding:.28rem .6rem;border-radius:100px;
background:var(--gold-pale);color:var(--gold-dk);
}
.svc__link{margin-top:.4rem}
.svc__link::after{content:'';position:absolute;inset:0}
/* ---------- Split blok ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.25rem,5vw,4.5rem);align-items:center}
.split--media-first .split__media{order:-1}
@media (max-width:900px){
.split{grid-template-columns:1fr;gap:2.5rem}
.split--media-first .split__media{order:0}
}
.split__media{position:relative}
.split__media img{position:relative;z-index:1;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
width:100%;aspect-ratio:4/3.4;object-fit:cover}
.split__media--tall img{aspect-ratio:3/3.6}
.frame-gold{position:relative;isolation:isolate}
.frame-gold::before{
content:'';position:absolute;inset:-16px 26px 26px -16px;border-radius:var(--r-lg);
border:1.5px solid var(--gold);opacity:.5;z-index:0;
}
@media (max-width:600px){.frame-gold::before{inset:-10px 16px 16px -10px}}
/* Puntenlijst */
.points{display:grid;gap:1.35rem;margin-top:2rem}
.points li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.points__ico{
width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
background:var(--gold-pale);color:var(--gold-dk);border:1px solid rgba(201,162,39,.24);
}
.points__ico svg{width:20px;height:20px}
.points h4{margin-bottom:.2rem}
.points p{font-size:.94rem;color:var(--muted)}
/* Belofte */
.pledge{
margin-top:2.25rem;padding:1.4rem 1.6rem;border-left:3px solid var(--gold);
background:linear-gradient(90deg,rgba(201,162,39,.09),transparent);border-radius:0 var(--r) var(--r) 0;
}
.pledge p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);
line-height:1.35;color:var(--ink)}
.pledge span{display:block;margin-top:.5rem;font-family:'Archivo',sans-serif;font-style:normal;
font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk)}
/* ---------- Stats ---------- */
.stats{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.stats::before{
content:'';position:absolute;inset:auto -5% -60% 40%;height:520px;
background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,39,.24),transparent 70%);
}
.stats__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);
border-radius:var(--r-lg);overflow:hidden}
@media (max-width:820px){.stats__grid{grid-template-columns:repeat(2,1fr)}}
.stats__cell{background:var(--dark);padding:clamp(1.6rem,3vw,2.4rem) 1.4rem;text-align:center}
.stats__num{
font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(2.1rem,4vw,3.1rem);
letter-spacing:-.045em;line-height:1;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
.stats__lbl{margin-top:.6rem;font-size:.83rem;color:rgba(255,255,255,.62);letter-spacing:.02em}
/* ---------- Galerij ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery__item{
position:relative;overflow:hidden;border-radius:var(--r);background:var(--bone-2);cursor:zoom-in;
aspect-ratio:3/4;box-shadow:var(--sh-sm);border:0;padding:0;
transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.gallery__item:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter .4s}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__cap{
position:absolute;inset:auto 0 0 0;padding:1.5rem 1rem .85rem;color:#fff;font-size:.82rem;font-weight:600;
background:linear-gradient(transparent,rgba(20,17,12,.82));opacity:0;transform:translateY(6px);
transition:opacity .3s,transform .3s var(--ease);
}
.gallery__item:hover .gallery__cap,.gallery__item:focus-visible .gallery__cap{opacity:1;transform:none}
/* Lightbox */
.lightbox{
position:fixed;inset:0;z-index:100;background:rgba(14,12,8,.94);display:grid;place-items:center;
padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
backdrop-filter:blur(6px);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;border-radius:var(--r);box-shadow:var(--sh-lg)}
.lightbox__cap{color:rgba(255,255,255,.8);text-align:center;margin-top:1rem;font-size:.9rem}
.lightbox__close,.lightbox__nav{
position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.12);color:#fff;transition:background-color .2s,transform .2s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lightbox__nav svg,.lightbox__close svg{width:22px;height:22px}
.lightbox__nav--prev{left:clamp(.5rem,2vw,2rem);top:50%;translate:0 -50%}
.lightbox__nav--next{right:clamp(.5rem,2vw,2rem);top:50%;translate:0 -50%}
/* ---------- TikTok / video ---------- */
.social-sect{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.social-sect::before{
content:'';position:absolute;inset:-40% 40% auto -20%;height:700px;
background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,39,.16),transparent 70%);
}
.social-sect h2{color:#fff}
.social-sect .lead{color:rgba(255,255,255,.66)}
.social__in{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.social__in{grid-template-columns:1fr}}
.phone{
position:relative;width:min(300px,100%);margin-inline:auto;aspect-ratio:9/19.5;border-radius:38px;
background:linear-gradient(150deg,#3a332a,#14110c);padding:9px;box-shadow:var(--sh-lg),0 0 0 1px rgba(201,162,39,.3);
}
.phone__screen{width:100%;height:100%;border-radius:30px;overflow:hidden;background:#000;position:relative}
.phone__screen video{width:100%;height:100%;object-fit:cover}
.phone__notch{
position:absolute;top:14px;left:50%;translate:-50% 0;width:86px;height:22px;border-radius:100px;
background:#14110c;z-index:2;
}
.phone__live{
position:absolute;left:14px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
padding:.35rem .7rem;border-radius:100px;background:rgba(20,17,12,.6);backdrop-filter:blur(6px);
font-size:.7rem;font-weight:600;color:#fff;
}
.phone__live i{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------- TikTok slider ---------- */
.tt{position:relative}
.tt__head{text-align:center;max-width:640px;margin:0 auto clamp(2rem,4vw,3rem)}
.tt__handle{
display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem .5rem .6rem;border-radius:100px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem;color:#fff;
transition:background-color .25s,border-color .25s,transform .25s var(--ease);
}
.tt__handle:hover{background:rgba(255,255,255,.12);border-color:rgba(201,162,39,.5);transform:translateY(-2px)}
.tt__handle img{width:22px;height:22px;flex:none;background:#fff;border-radius:50%;padding:3px}
.tt__head h2{margin-top:1.25rem}
.tt__head .lead{margin-top:1rem}
.tt__stats{display:flex;justify-content:center;gap:clamp(2rem,5vw,3.5rem);margin-top:1.75rem}
.tt__stat b{
display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.05rem);
letter-spacing:-.04em;line-height:1;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
.tt__stat span{display:block;margin-top:.45rem;font-size:.74rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.5)}
/* Spoor */
.tt__viewport{position:relative}
.tt__track{
display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:.25rem .25rem 1.25rem;margin-inline:-.25rem;
scrollbar-width:none;-ms-overflow-style:none;
}
.tt__track::-webkit-scrollbar{display:none}
.tt__track.is-dragging{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}
.tt__track.is-dragging .tt-card{pointer-events:none}
@media (prefers-reduced-motion:reduce){.tt__track{scroll-behavior:auto}}
.tt-card{
position:relative;flex:0 0 auto;width:clamp(215px,23%,282px);scroll-snap-align:start;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);
overflow:hidden;display:flex;flex-direction:column;
transition:transform .4s var(--ease-out),border-color .3s,background-color .3s;
}
@media (max-width:900px){.tt-card{width:min(64vw,270px)}}
@media (max-width:560px){.tt-card{width:min(74vw,260px)}}
.tt-card:hover{transform:translateY(-5px);border-color:rgba(201,162,39,.45);background:rgba(255,255,255,.07)}
.tt-card__media{position:relative;aspect-ratio:9/16;overflow:hidden;background:#0d0b08}
.tt-card__media img,.tt-card__media video{width:100%;height:100%;object-fit:cover;display:block}
.tt-card__media img{transition:transform .8s var(--ease-out)}
.tt-card:hover .tt-card__media img{transform:scale(1.05)}
.tt-card__media::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(20,17,12,.18) 0 22%,transparent 45%,rgba(20,17,12,.72));
}
.tt-card__play{
position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.92);color:#14110C;
transition:transform .3s var(--ease),background-color .25s;
}
.tt-card__play svg{width:22px;height:22px;margin-left:3px}
.tt-card:hover .tt-card__play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.tt-card.is-playing .tt-card__play,.tt-card.is-playing .tt-card__cap{opacity:0;visibility:hidden}
.tt-card.is-playing .tt-card__media::after{opacity:0}
.tt-card__cap{
position:absolute;left:.7rem;right:.7rem;bottom:.75rem;z-index:2;
padding:.4rem .7rem;border-radius:9px;background:rgba(20,17,12,.72);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
font-size:.78rem;font-weight:600;line-height:1.35;color:#fff;
transition:opacity .3s,visibility .3s;
}
.tt-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1rem 1rem}
.tt-card__foot h3{font-size:.92rem;line-height:1.3;color:#fff;letter-spacing:-.015em}
.tt-card__foot p{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:.25rem}
.tt-card__foot img{width:17px;height:17px;flex:none;opacity:.85}
.tt-card__link::after{content:'';position:absolute;inset:0;z-index:1}
/* Bediening */
.tt__nav{
position:absolute;top:calc(50% - 2.5rem);translate:0 -50%;z-index:5;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:rgba(250,248,243,.94);color:var(--ink);
transition:transform .25s var(--ease),background-color .25s,opacity .25s;
}
.tt__nav:hover{background:#fff;transform:scale(1.07)}
.tt__nav svg{width:20px;height:20px}
.tt__nav--prev{left:-14px}
.tt__nav--next{right:-14px}
.tt__nav[disabled]{opacity:0;pointer-events:none}
@media (max-width:900px){.tt__nav{display:none}}
.tt__dots{display:flex;justify-content:center;gap:.45rem;margin-top:1.25rem}
.tt__dots button{
width:7px;height:7px;border-radius:100px;background:rgba(255,255,255,.25);
transition:background-color .3s,width .3s var(--ease);
}
.tt__dots button[aria-current="true"]{width:24px;background:var(--gold-grad)}
.tt__cta{display:flex;justify-content:center;margin-top:clamp(1.75rem,3vw,2.5rem)}
.social__stats{display:flex;gap:2.5rem;margin-top:2rem;flex-wrap:wrap}
.social__stat b{
display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.9rem;letter-spacing:-.04em;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.social__stat span{font-size:.82rem;color:rgba(255,255,255,.55)}
.social__links{display:flex;gap:.7rem;margin-top:2rem;flex-wrap:wrap}
/* ---------- Reviews ---------- */
.rev-strip{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rev-strip__track{display:flex;gap:1.1rem;width:max-content;animation:marq 62s linear infinite}
.rev-strip:hover .rev-strip__track{animation-play-state:paused}
.rev-strip + .rev-strip{margin-top:1.1rem}
.rev-strip--rev .rev-strip__track{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){
.rev-strip__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.rev-strip{mask-image:none;-webkit-mask-image:none}
}
.rev{
width:355px;flex:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--sh-sm);
}
.rev__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
/* Bron van de review, met het echte logo van het platform */
.rev__src{display:inline-flex;align-items:center;flex:none}
.rev__src img{display:block;width:auto}
.rev__src--ws img{height:17px}
.rev__src--g img{height:15px}
.rev__txt{font-size:.945rem;line-height:1.62;color:var(--ink-2)}
.rev__who{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.4rem}
.rev__av{
width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
background:var(--gold-grad);color:#3a2d08;font-family:'Archivo',sans-serif;font-weight:800;font-size:.85rem;
}
.rev__who b{font-size:.88rem;display:block;color:var(--ink);font-weight:600}
.rev__who span{font-size:.76rem;color:var(--muted)}
/* ---------- Stappen ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);position:relative}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:1.6rem}}
.step{position:relative;padding-top:2.6rem;text-align:center}
.step::before{
content:'';position:absolute;top:19px;left:0;right:0;height:1.5px;
background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 15px);opacity:.5;
}
.step:last-child::before{right:50%}
.step:first-child::before{left:50%}
.step__num{
position:absolute;top:0;left:50%;translate:-50% 0;width:38px;height:38px;border-radius:50%;
background:var(--bone);border:1.5px solid var(--gold);display:grid;place-items:center;
font-family:'Archivo',sans-serif;font-weight:800;font-size:.85rem;color:var(--gold-dk);z-index:1;
}
.step p{font-size:.94rem;color:var(--muted);margin-top:.55rem}
@media (max-width:820px){
.step::before{display:none}
.step{padding-top:0;padding-left:3.2rem;text-align:left}
.step__num{left:0;translate:0 0;top:2px}
}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
padding:1.4rem .25rem;text-align:left;
font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(1rem,1.5vw,1.14rem);
letter-spacing:-.015em;color:var(--ink);transition:color .2s;
}
.faq__q:hover{color:var(--gold-dk)}
.faq__ico{
width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
border:1px solid var(--line-2);position:relative;transition:background-color .3s,border-color .3s,transform .35s var(--ease);
}
.faq__ico::before,.faq__ico::after{
content:'';position:absolute;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),background-color .3s;
}
.faq__ico::before{width:12px;height:1.8px}
.faq__ico::after{width:1.8px;height:12px}
.faq__item.is-open .faq__ico{background:var(--gold-grad);border-color:transparent;transform:rotate(180deg)}
.faq__item.is-open .faq__ico::after{transform:scaleY(0)}
.faq__item.is-open .faq__ico::before{background:#332708}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 3.5rem 1.5rem .25rem;color:var(--muted);font-size:.98rem}
.faq__a p + p{padding-top:.8rem}
/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.ccard{
display:flex;align-items:center;gap:1rem;padding:1.15rem 1.25rem;background:#fff;
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--gold-lt)}
.ccard__ico{
width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
background:var(--gold-pale);color:var(--gold-dk);border:1px solid rgba(201,162,39,.22);
}
.ccard__ico svg{width:21px;height:21px}
.ccard__ico--wa{background:#E8F9EE;color:#128C4B;border-color:rgba(18,140,75,.2)}
.ccard b{display:block;font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ccard strong{font-family:'Archivo',sans-serif;font-size:1.06rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
/* alleen de regel onderin, niet de icoontegel zelf (die moet grid blijven) */
.ccard span span{display:block;font-size:.82rem;color:var(--muted)}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--sh)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form__grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-size:.83rem;font-weight:600;color:var(--ink)}
.field label span{color:var(--orange)}
.field input,.field textarea,.field select{
width:100%;padding:.82rem .95rem;border:1.5px solid var(--line);border-radius:10px;background:var(--bone);
font-size:.95rem;transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
outline:0;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(201,162,39,.13);
}
.field textarea{resize:vertical;min-height:118px}
.field select{appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E665A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .9rem center;background-size:15px;padding-right:2.4rem}
.field--check{flex-direction:row;align-items:flex-start;gap:.65rem}
.field--check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--orange)}
.field--check label{font-size:.82rem;font-weight:400;color:var(--muted);line-height:1.5}
.field--check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#D93A2B;background:#FEF4F3}
.field__err{font-size:.78rem;color:#C1291B;font-weight:500;display:none}
.field.has-error .field__err{display:block}
.hp{position:absolute!important;left:-9999px!important;opacity:0;pointer-events:none}
.form__note{font-size:.8rem;color:var(--muted);margin-top:1rem;text-align:center}
.form__msg{
display:none;padding:1rem 1.15rem;border-radius:12px;font-size:.92rem;margin-bottom:1.25rem;
border:1px solid;line-height:1.55;
}
.form__msg.is-ok{display:block;background:#EDF8F0;border-color:#B9E0C6;color:#1E6437}
.form__msg.is-err{display:block;background:#FEF4F3;border-color:#F5C7C2;color:#A82418}
.form__msg a{font-weight:600;text-decoration:underline}
/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:var(--r-xl);
padding:clamp(2.5rem,5vw,4rem);text-align:center}
.cta-band::before{
content:'';position:absolute;inset:-50% -10% auto -10%;height:600px;
background:radial-gradient(45% 55% at 50% 60%,rgba(201,162,39,.26),transparent 70%);
}
.cta-band > *{position:relative}
.cta-band h2{color:#fff;max-width:17ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.68);max-width:52ch;margin:1.1rem auto 0}
.cta-band__btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}
/* Hogere specificiteit dan `.cta-band p`, anders blijft die 52ch-limiet staan
en breekt de regel af. Mag de volle breedte gebruiken. */
.cta-band p.cta-band__mini{
max-width:none;margin:1.75rem auto 0;font-size:.88rem;color:rgba(255,255,255,.55);
}
/* ---------- Footer ---------- */
.footer{background:var(--dark);color:rgba(255,255,255,.62);padding-block:clamp(3rem,6vw,4.5rem) 0;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);opacity:.85}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.75rem,3vw,3rem)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer .logo__name{color:#fff}
.footer .logo__sub{color:var(--gold-lt)}
.footer__about{margin-top:1.15rem;font-size:.9rem;max-width:34ch}
.footer h4{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:700}
.footer__links{display:grid;gap:.6rem;font-size:.9rem}
.footer__links a:hover{color:var(--gold-lt)}
.footer__contact{display:grid;gap:.85rem;font-size:.9rem}
.footer__contact a{display:flex;align-items:flex-start;gap:.65rem}
.footer__contact a:hover{color:var(--gold-lt)}
.footer__contact svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:4px}
.footer__socials{display:flex;gap:.6rem;margin-top:1.5rem}
.footer__socials a{
width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.75);transition:all .25s var(--ease);
}
.footer__socials a:hover{background:var(--gold-grad);color:#2A2109;border-color:transparent;transform:translateY(-2px)}
.footer__socials svg{width:18px;height:18px}
.footer__areas{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem}
.footer__areas b{color:rgba(255,255,255,.85);font-weight:600}
.footer__bar{
margin-top:1.75rem;padding-block:1.35rem;border-top:1px solid rgba(255,255,255,.1);
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;
}
.footer__bar a:hover{color:var(--gold-lt)}
.footer__bar nav{display:flex;gap:1.25rem;flex-wrap:wrap}
/* ---------- Mobiele belbalk ---------- */
.callbar{
position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:1px;background:rgba(255,255,255,.12);
box-shadow:0 -6px 24px rgba(22,19,14,.14);
}
.callbar a{
flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem .5rem;
background:var(--dark);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:.86rem;
}
.callbar a.is-call{background:var(--orange)}
.callbar a.is-wa{background:#25D366}
.callbar svg{width:17px;height:17px}
@media (max-width:780px){
.callbar{display:flex}
body{padding-bottom:54px}
.lightbox,.mobmenu{padding-bottom:70px}
}
/* ---------- Paginakop ---------- */
.phead{position:relative;overflow:hidden;padding-block:clamp(2.75rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem);
background:var(--bone-2);border-bottom:1px solid var(--line)}
.phead::before{
content:'';position:absolute;inset:-60% -10% auto 30%;height:640px;
background:radial-gradient(45% 50% at 50% 50%,rgba(201,162,39,.2),transparent 70%);
}
/* Even breed als de rest van de site: geen eigen max-width, zodat het blok
op dezelfde lijn begint als het logo en de secties eronder. */
.phead__in{position:relative}
.phead h1{max-width:22ch}
.phead h1{margin-top:1rem;font-size:clamp(2.2rem,4.6vw,3.7rem)}
.phead p{margin-top:1.15rem;max-width:56ch}
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.crumbs a:hover{color:var(--gold-dk)}
.crumbs svg{width:13px;height:13px;opacity:.5}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
/* ---------- Prose ---------- */
.prose h2{margin-top:2.75rem;margin-bottom:1rem;font-size:clamp(1.5rem,2.4vw,2rem)}
.prose h3{margin-top:2rem;margin-bottom:.7rem}
.prose > :first-child{margin-top:0}
.prose p{margin-bottom:1.1rem;color:var(--ink-2)}
.prose ul{display:grid;gap:.7rem;margin-bottom:1.5rem}
.prose ul li{position:relative;padding-left:1.85rem;color:var(--ink-2)}
.prose ul li::before{
content:'';position:absolute;left:0;top:.28em;
width:19px;height:19px;border-radius:50%;background-color:var(--gold-pale);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394761A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:12px;background-repeat:no-repeat;background-position:center;
}
/* Lijst in twee of drie kolommen */
.prose ul.cols-2{grid-template-columns:1fr 1fr;gap:.7rem 2rem}
.prose ul.cols-3{grid-template-columns:repeat(3,1fr);gap:.8rem 2rem}
@media (max-width:760px){.prose ul.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.prose ul.cols-2,.prose ul.cols-3{grid-template-columns:1fr}}
.prose a:not(.btn):not(.link-arrow){color:var(--gold-dk);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.prose a:not(.btn):not(.link-arrow):hover{color:var(--orange)}
.prose strong{color:var(--ink);font-weight:600}
/* Prijsblok */
.pricebox{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--sh-sm);
position:sticky;top:120px;
}
.pricebox h3{margin-bottom:.3rem}
.pricebox__list{display:grid;gap:.85rem;margin:1.25rem 0}
.pricebox__list li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
font-size:.92rem;padding-bottom:.85rem;border-bottom:1px dashed var(--line)}
.pricebox__list li:last-child{border-bottom:0;padding-bottom:0}
.pricebox__list b{font-family:'Archivo',sans-serif;color:var(--ink);white-space:nowrap}
.pricebox__note{font-size:.78rem;color:var(--muted);margin-top:.4rem}
.sticky-wrap{display:grid;grid-template-columns:1.55fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.sticky-wrap{grid-template-columns:1fr}.pricebox{position:static}}
/* Uitgelichte info */
.callout{
display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.3rem 1.4rem;border-radius:var(--r);
background:var(--orange-soft);border:1px solid rgba(239,108,26,.2);margin-block:1.75rem;
}
.callout__ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;
background:#fff;color:var(--orange)}
.callout__ico svg{width:19px;height:19px}
.callout p{font-size:.93rem;margin:0;color:var(--ink-2)}
.callout b{display:block;font-family:'Archivo',sans-serif;color:var(--ink);margin-bottom:.15rem}
/* Voor/na */
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){.beforeafter{grid-template-columns:1fr}}
.beforeafter figure{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);background:var(--bone-2)}
.beforeafter img{width:100%;aspect-ratio:3/4;object-fit:cover}
.beforeafter figcaption{
position:absolute;left:.85rem;top:.85rem;padding:.3rem .7rem;border-radius:100px;
font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
background:rgba(250,248,243,.94);color:var(--ink);backdrop-filter:blur(4px);
}
.beforeafter figure.is-after figcaption{background:var(--gold-grad);color:#332708}
/* ---------- Scroll-reveal ----------
Alleen verbergen als JavaScript beschikbaar is: zonder JS blijft alles zichtbaar. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* ---------- Hulpklassen ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,1px);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.2rem;
border-radius:0 0 10px 10px;font-weight:600;font-size:.9rem;transition:top .2s}
.skip:focus{top:0}
.bg-alt{background:var(--bone-2)}
.bg-white{background:#fff}
.center{text-align:center}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:2.75rem}
.nowrap{white-space:nowrap}
/* ==========================================================================
Divi-bridge
De componentlaag hierboven is geschreven voor de statische bron. Divi zet
daar zijn eigen section/row/column omheen, met eigen breedtes en padding.
Dit blok haalt die wrappers weg op de plekken waar wij de volle breedte
nodig hebben. Verder niets: de rest van Divi blijft gewoon werken.
========================================================================== */
/* Header- en footertemplate: wrappers volledig neutraliseren */
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module,
.et-l--footer .et_pb_section,
.et-l--footer .et_pb_row,
.et-l--footer .et_pb_column,
.et-l--footer .et_pb_module{
width:100%;max-width:none;
padding:0;margin:0;
float:none;
}
.et-l--header .et_pb_row,
.et-l--footer .et_pb_row{display:block}
/* Divi geeft tekstmodules een eigen regelafstand en kleur; binnen onze
header/footer bepaalt de componentlaag dat. */
.et-l--header .et_pb_code_inner,
.et-l--footer .et_pb_code_inner{line-height:inherit;color:inherit}
/* De sticky header moet buiten Divi's stacking context blijven werken. */
.et-l--header{position:relative;z-index:100}
/* Skip-link: onzichtbaar tot hij focus krijgt. In de statische bron regelde
een negatieve top dat; binnen Divi kan die alsnog zichtbaar blijven,
dus hier de standaard visually-hidden aanpak. */
.skip{
position:absolute!important;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip:focus{
position:fixed!important;top:1rem;left:1rem;
width:auto;height:auto;margin:0;overflow:visible;
clip:auto;clip-path:none;white-space:normal;
z-index:200;padding:.8rem 1.2rem;border-radius:100px;
background:var(--ink);color:#fff;font-weight:600;
}
/* Divi zet op de body soms een achtergrond die onze bone-kleur overschrijft. */
body.et-tb-has-template{background:var(--bone)}
/* ==========================================================================
Gravity Forms in de huisstijl
De bron had een handgeschreven formulier met .form, .field en .form__grid.
Gravity Forms gebruikt eigen markup, dus die vertalen we hier naar dezelfde
vormgeving: zelfde raster, randen, radii, focusstate en knop.
========================================================================== */
/* De witte kaart komt van .form uit de bron; de wrapper zelf blijft kaal. */
.gform_wrapper.adem-form_wrapper{background:none;border:0;box-shadow:none;padding:0;margin-top:1.4rem}
.gform_wrapper.adem-form_wrapper .gform_heading{display:none}
/* Het tweekolomsraster komt uit Gravity Forms zelf: elk veld heeft daar een
breedte in het raster van twaalf kolommen. Hier staat alleen de tussenruimte
uit de bron. */
.gform_wrapper.adem-form_wrapper .gform_fields{gap:1.1rem 1rem}
.gform_wrapper.adem-form_wrapper .gfield{min-width:0}
/* Labels */
.gform_wrapper.adem-form_wrapper .gfield_label{
display:block;font-family:'Archivo',sans-serif;font-weight:600;
font-size:.86rem;color:var(--ink);margin-bottom:.45rem;letter-spacing:-.005em;
}
.gform_wrapper.adem-form_wrapper .gfield_required{color:var(--orange);margin-left:.15rem}
/* Invoervelden */
.gform_wrapper.adem-form_wrapper input[type="text"],
.gform_wrapper.adem-form_wrapper input[type="email"],
.gform_wrapper.adem-form_wrapper input[type="tel"],
.gform_wrapper.adem-form_wrapper select,
.gform_wrapper.adem-form_wrapper textarea{
width:100%;padding:.85rem 1rem;
background:var(--bone);
border:1.5px solid var(--line);
border-radius:var(--r-sm);
font-family:'Inter',sans-serif;font-size:.98rem;color:var(--ink);
transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.gform_wrapper.adem-form_wrapper textarea{min-height:130px;resize:vertical}
.gform_wrapper.adem-form_wrapper select{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E665A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 1rem center;background-size:15px;
padding-right:2.6rem;
}
.gform_wrapper.adem-form_wrapper input::placeholder,
.gform_wrapper.adem-form_wrapper textarea::placeholder{color:var(--muted);opacity:.75}
.gform_wrapper.adem-form_wrapper input:focus,
.gform_wrapper.adem-form_wrapper select:focus,
.gform_wrapper.adem-form_wrapper textarea:focus{
outline:none;background:var(--white);
border-color:var(--gold);
box-shadow:0 0 0 4px rgba(201,162,39,.14);
}
/* Toestemmingsvakje */
.gform_wrapper.adem-form_wrapper .gfield--type-consent .gfield_label{display:none}
.gform_wrapper.adem-form_wrapper .ginput_container_consent{
display:flex;align-items:flex-start;gap:.7rem;
font-size:.86rem;color:var(--muted);line-height:1.55;
}
.gform_wrapper.adem-form_wrapper .ginput_container_consent input[type="checkbox"]{
width:19px;height:19px;flex:none;margin-top:.15rem;accent-color:var(--orange);
}
.gform_wrapper.adem-form_wrapper .ginput_container_consent a{
color:var(--ink);text-decoration:underline;text-underline-offset:2px;
}
/* Validatie */
.gform_wrapper.adem-form_wrapper .gfield_error input,
.gform_wrapper.adem-form_wrapper .gfield_error select,
.gform_wrapper.adem-form_wrapper .gfield_error textarea{
border-color:#D64545;background:#FDF4F4;
}
.gform_wrapper.adem-form_wrapper .gfield_validation_message,
.gform_wrapper.adem-form_wrapper .validation_message{
margin-top:.4rem;font-size:.8rem;color:#C33;background:none;border:0;padding:0;
}
.gform_wrapper.adem-form_wrapper .gform_validation_errors{
border:1px solid #E9C9C9;background:#FDF4F4;border-radius:var(--r-sm);
padding:.9rem 1.1rem;margin-bottom:1.2rem;box-shadow:none;
}
.gform_wrapper.adem-form_wrapper .gform_validation_errors h2{
font-size:.92rem;color:#C33;margin:0;font-family:'Inter',sans-serif;font-weight:600;
}
/* Verzendknop, zelfde vorm als .btn uit de bron */
.gform_wrapper.adem-form_wrapper .gform_footer{margin:1.35rem 0 0;padding:0}
.gform_wrapper.adem-form_wrapper .gform_button{
width:100%;
display:inline-flex;align-items:center;justify-content:center;
padding:1.15rem 2rem;border:0;border-radius:100px;
font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;
background:var(--orange);color:#fff;cursor:pointer;
transition:transform .28s var(--ease),background-color .2s;
}
.gform_wrapper.adem-form_wrapper .gform_button:hover{background:var(--orange-dk);transform:translateY(-2px)}
.gform_wrapper.adem-form_wrapper .gform_button:disabled{opacity:.7;cursor:default;transform:none}
/* Bevestiging na verzenden */
.gform_confirmation_wrapper,
.gform_wrapper.adem-form_wrapper .gform_confirmation_message{
background:#EEF7F0;border:1px solid #CBE4D2;color:#245B36;
border-radius:var(--r);padding:1.1rem 1.2rem;font-size:.95rem;line-height:1.6;
}
.gform_confirmation_wrapper a{color:#1C6B39;font-weight:600}
/* Spinner tijdens verzenden */
.gform_wrapper.adem-form_wrapper .gform_ajax_spinner{margin-left:.6rem;width:20px;height:20px}
/* ==========================================================================
Divi-bridge, deel 2: structuur
Divi zet elke sectie in .et_pb_section > .et_pb_row > .et_pb_column, met
eigen breedtes, floats en padding. Waar wij een eigen layoutklasse op een
rij zetten (.wrap, .contact-grid, .split, .grid, .sticky-wrap), moet Divi's
container doorzichtig worden zodat onze eigen layout het overneemt.
Buiten die klassen blijft Divi ongemoeid.
========================================================================== */
/* Rij als contentcontainer, exact zoals .wrap in de bron */
.et_pb_row.wrap,
.et_pb_row.wrap-narrow{
width:min(100% - (var(--pad) * 2),var(--wrap));
max-width:none;margin-inline:auto;padding:0;
}
.et_pb_row.wrap-narrow{width:min(100% - (var(--pad) * 2),var(--wrap-narrow))}
/* Sectie-padding uit de huisstijl in plaats van Divi's standaard */
.et_pb_section.section{padding-block:var(--sect)}
.et_pb_section.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.et_pb_section.bg-alt{background:var(--bone-2)}
.et_pb_section.phead{padding:0}
/* Kolommen binnen onze eigen layouts: geen Divi-breedte, geen float */
.et_pb_row.contact-grid > .et_pb_column,
.et_pb_row.split > .et_pb_column,
.et_pb_row.grid > .et_pb_column,
.et_pb_row.sticky-wrap > .et_pb_column,
.et_pb_row.adem-flow > .et_pb_column{
width:auto;max-width:none;margin:0;float:none;
}
/* Divi geeft elke module een marge onderaan; onze componenten regelen dat zelf */
.et_pb_row.wrap > .et_pb_column > .et_pb_module,
.et_pb_row.wrap-narrow > .et_pb_column > .et_pb_module,
.et_pb_row.contact-grid > .et_pb_column > .et_pb_module{
margin-bottom:0;
}
/* Eén kolom die gewoon op elkaar stapelt */
.et_pb_row.adem-flow > .et_pb_column{display:flow-root}
/* Divi's tekstmodule mag onze typografie niet overschrijven */
.et_pb_code_inner > .lead:first-child,
.et_pb_code_inner > .prose:first-child,
.et_pb_code_inner > .steps:first-child,
.et_pb_code_inner > .grid:first-child{margin-top:0}
/* Kleine hulpklassen die de bron met inline styles deed */
.adem-gap-sm{gap:.8rem}
.adem-mt{margin-top:1.25rem}
.adem-mt-3{margin-top:2.25rem}
.adem-mail{font-size:.92rem;word-break:break-word}
.adem-form-kop{margin-bottom:.4rem;font-size:clamp(1.4rem,2.2vw,1.85rem)}
.adem-form-sub{font-size:.92rem;color:var(--muted);margin-bottom:1.4rem}
/* Gravity Forms-titel verbergen; wij zetten de kop er zelf boven */
.gform_wrapper .gform_title{display:none}
/* ==========================================================================
Divi-bridge, deel 3: achtergronden en lijsten
========================================================================== */
/* Divi geeft elke sectie standaard een witte achtergrond. De bron werkt met
een doorlopende bone-achtergrond op de body, met alleen bepaalde secties
in een afwijkende kleur. Dus: transparant, tenzij wij zelf iets zetten. */
.et-l--body .et_pb_section{background-color:transparent}
.et-l--body .et_pb_section.bg-alt{background-color:var(--bone-2)}
.et-l--body .et_pb_section.bg-dark,
.et-l--body .et_pb_section.stats,
.et-l--body .et_pb_section.social-sect{background-color:var(--dark)}
.et-l--body .et_pb_section.phead{background-color:var(--bone-2)}
/* De paginakop loopt door tot de schermranden, net als in de bron. */
.et_pb_section.phead{
width:100%;max-width:none;
border-bottom:1px solid var(--line);
padding-block:clamp(2.75rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem);
}
/* Divi zet zijn eigen opsommingstekens naast onze gouden vinkjes. */
.et-l--body .prose ul,
.et-l--body .prose ol,
.et-l--body .footer__links,
.et-l--body .svc__tags,
.et-l--body .hero__usps,
.et-l--body .pricebox__list{list-style:none}
.et-l--body .prose ul li::marker,
.et-l--body .prose ol li::marker{content:""}
/* Divi's tekstmodule dwingt een eigen ul-inspringing af. */
.et-l--body .et_pb_code_inner ul,
.et-l--body .et_pb_code_inner ol,
.et-l--header .et_pb_code_inner ul,
.et-l--footer .et_pb_code_inner ul{padding:0;margin:0;line-height:inherit;list-style:none}
/* Kolommen krijgen van Divi een ondermarge die onze secties dubbel maakt. */
.et-l--body .et_pb_row > .et_pb_column:last-child{margin-bottom:0}
/* ==========================================================================
Divi-bridge, deel 4: de body-template
De Theme Builder rendert de pagina-inhoud binnen een eigen section > row >
column. Die wrapper heeft Divi's standaardbreedte en -padding en perkte
daardoor elke sectie in. Alleen de directe kinderen worden hier
geneutraliseerd, zodat de rijen binnen de pagina zelf ongemoeid blijven.
========================================================================== */
.et_pb_section.adem-tb-body{padding:0;background:transparent}
.et_pb_section.adem-tb-body > .et_pb_row{
width:100%;max-width:none;padding:0;margin:0;
}
.et_pb_section.adem-tb-body > .et_pb_row > .et_pb_column{
width:100%;max-width:none;padding:0;margin:0;float:none;
}
.et_pb_section.adem-tb-body .et_pb_post_content{margin:0}
/* ==========================================================================
Divi-bridge, deel 5: rijen over de volle breedte
Sommige onderdelen staan in de bron buiten de contentcontainer en lopen
door tot de schermranden: de twee reviewstroken. Die krijgen een rij met
.adem-bleed, waarin Divi's breedte, padding en marges wegvallen.
========================================================================== */
.et_pb_row.adem-bleed{
width:100%;max-width:none;margin:0;padding:0;
}
.et_pb_row.adem-bleed > .et_pb_column{
width:100%;max-width:none;margin:0;padding:0;float:none;
}
.et_pb_row.adem-bleed > .et_pb_column > .et_pb_module{margin-bottom:0}
/* De reviewstroken staan direct onder elkaar, zoals in de bron. */
.et_pb_row.adem-bleed + .et_pb_row.adem-bleed{margin-top:0}
/* Losse inhoud tussen twee secties, zoals de werkgebiedbalk: geen eigen
ruimte of achtergrond, alleen een doorgeefluik. */
.et_pb_section.adem-los{padding:0;background:transparent}
/* Ruimte die in de bron in een style-attribuut op de sectie stond. */
.et_pb_section.adem-sect-ruim{padding-block:clamp(4rem,10vw,8rem)}
.et_pb_section.adem-sect-top-1{padding-top:clamp(2.5rem,5vw,4rem)}
.et_pb_section.adem-sect-top-2{padding-top:clamp(2rem,4vw,3rem)}
/* ==========================================================================
Kleine telefoons: de kopregel past net niet
Onder ongeveer 400 px staken het telefoonnummer en de menuknop samen net
buiten het scherm, waardoor de menuknop niet meer aan te tikken was. Met
iets minder tussenruimte en een iets kleinere knop past de rij weer.
Dit is de enige plek waar deze bouw bewust afwijkt van de statische bron.
========================================================================== */
@media (max-width:420px){
.header__in{gap:.5rem}
.logo,.logo__txt{min-width:0}
.header__cta{gap:.4rem}
.header__cta .btn{padding:.8rem .85rem;font-size:.8rem}
}
@media (max-width:380px){
/* Onder deze breedte wint het telefoonnummer het van de ondertitel. */
.logo__sub{display:none}
.logo__name{font-size:1.1rem}
}
/* ==========================================================================
Rijen die zelf een raster zijn
Op de dienstpagina's staat de layoutklasse (.sticky-wrap) op dezelfde div
als .wrap, dus op de Divi-rij. Divi zet daar een kolom en een module
tussen, waardoor het raster maar een kind zag en alles onder elkaar kwam.
Met display:contents vallen die tussenlagen weg en worden de tekst en het
prijsblok weer de twee kolommen uit de bron.
========================================================================== */
.et_pb_row.sticky-wrap > .et_pb_column,
.et_pb_row.sticky-wrap > .et_pb_column > .et_pb_module,
.et_pb_row.sticky-wrap > .et_pb_column > .et_pb_module > .et_pb_code_inner{display:contents}
/* ==========================================================================
Meer lucht onder in het prijsblok
Op verzoek ruimer dan de bron: de belregel plakte tegen de WhatsApp-knop
en stond kort op de onderrand van de kaart.
========================================================================== */
.pricebox{padding-bottom:2rem}
.pricebox__note{margin-top:1rem}