:root{
  --ground:#080A0F; --ink:#F2EEE6;
  --ink-soft:rgba(242,238,230,.62); --ink-faint:rgba(242,238,230,.34);
  --accent:#E8E2D6; --accent-ink:#0A0C12;
  --glass-fill:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 55%,rgba(255,255,255,.06) 100%);
  --glass-edge:rgba(255,255,255,.16); --glass-top:rgba(255,255,255,.24);
  --glass-shadow:0 28px 80px rgba(0,0,0,.5);
  --soft:rgba(255,255,255,.05); --rule:rgba(232,226,214,.13);
  --r-xl:34px; --r-lg:26px; --r-md:18px; --r-pill:999px;
  --halo:radial-gradient(70% 55% at 22% 8%,rgba(232,226,214,.14),transparent 60%);
  --gap-sec:128px; --nav-h:78px;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --ground:#EFEBE2; --ink:#14161C; --ink-soft:rgba(20,22,28,.68); --ink-faint:rgba(20,22,28,.44);
  --accent:#1E2D52; --accent-ink:#F6F3EC;
  --glass-fill:linear-gradient(155deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.7) 100%);
  --glass-edge:rgba(255,255,255,.92); --glass-top:rgba(255,255,255,1);
  --glass-shadow:0 26px 66px rgba(30,45,82,.13); --soft:rgba(255,255,255,.62); --rule:rgba(30,45,82,.14);
  --halo:radial-gradient(70% 55% at 22% 8%,rgba(255,255,255,.85),transparent 60%);
}}
:root[data-theme="light"]{
  --ground:#EFEBE2; --ink:#14161C; --ink-soft:rgba(20,22,28,.68); --ink-faint:rgba(20,22,28,.44);
  --accent:#1E2D52; --accent-ink:#F6F3EC;
  --glass-fill:linear-gradient(155deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.7) 100%);
  --glass-edge:rgba(255,255,255,.92); --glass-top:rgba(255,255,255,1);
  --glass-shadow:0 26px 66px rgba(30,45,82,.13); --soft:rgba(255,255,255,.62); --rule:rgba(30,45,82,.14);
  --halo:radial-gradient(70% 55% at 22% 8%,rgba(255,255,255,.85),transparent 60%);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--ground); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
body::before{content:''; position:fixed; inset:-20%; z-index:0; pointer-events:none; filter:blur(20px);
  background:radial-gradient(46% 38% at 14% 6%,rgba(30,45,82,.5),transparent 62%),
    radial-gradient(40% 34% at 88% 26%,rgba(60,80,130,.26),transparent 64%),
    radial-gradient(50% 40% at 60% 96%,rgba(232,226,214,.06),transparent 66%);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::before{
  background:radial-gradient(46% 38% at 14% 6%,rgba(30,45,82,.12),transparent 62%),
    radial-gradient(42% 34% at 88% 26%,rgba(120,145,200,.15),transparent 64%),
    radial-gradient(50% 40% at 60% 96%,rgba(255,255,255,.7),transparent 66%);}}
:root[data-theme="light"] body::before{
  background:radial-gradient(46% 38% at 14% 6%,rgba(30,45,82,.12),transparent 62%),
    radial-gradient(42% 34% at 88% 26%,rgba(120,145,200,.15),transparent 64%),
    radial-gradient(50% 40% at 60% 96%,rgba(255,255,255,.7),transparent 66%);}
img{display:block; max-width:100%;}
figure{margin:0;}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; margin:0; text-wrap:balance; letter-spacing:-.015em;}
h1 em,h2 em,h3 em{font-style:italic; color:var(--accent);}
p{margin:0;} a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.lbl{font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);}
.shell{max-width:1280px; margin:0 auto; padding:0 22px; position:relative; z-index:1;}
.inner{max-width:1140px; margin:0 auto;}
.glass{position:relative; background:var(--glass-fill); backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%); border:1px solid var(--glass-edge);
  border-radius:var(--r-xl); box-shadow:inset 0 1px 0 var(--glass-top), var(--glass-shadow); overflow:hidden;}
.glass::before{content:''; position:absolute; inset:0; pointer-events:none; background:var(--halo); opacity:.65;}
.glass > *{position:relative; z-index:1;}

/* -- balk + navigatie -- */
.availbar{position:relative; z-index:60; text-align:center; padding:11px 20px; font-size:12.5px;
  color:var(--ink-soft); background:rgba(8,10,15,.55); border-bottom:1px solid var(--rule);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);}
:root[data-theme="light"] .availbar{background:rgba(255,255,255,.6);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .availbar{background:rgba(255,255,255,.6);}}
.availbar b{color:var(--ink); font-weight:600;}
.dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:#E0A64B; margin-right:9px; vertical-align:1px;}

nav{position:sticky; top:12px; z-index:50; margin:12px auto 0; max-width:1280px; padding:0 22px;}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 11px 11px 26px;
  border-radius:var(--r-pill); background:var(--glass-fill); border:1px solid var(--glass-edge);
  backdrop-filter:blur(26px) saturate(155%); -webkit-backdrop-filter:blur(26px) saturate(155%);
  box-shadow:inset 0 1px 0 var(--glass-top), 0 16px 44px rgba(0,0,0,.3);}
.brand{font-family:'Cormorant Garamond',serif; font-size:20px; letter-spacing:.1em; white-space:nowrap; cursor:pointer;}
.brand em{font-style:italic; color:var(--accent);}
.navlinks{display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:13.5px;}
.navlinks button{background:none; border:none; font:inherit; cursor:pointer; color:var(--ink-soft);
  padding:6px 2px; border-bottom:1px solid transparent;}
.navlinks button:hover{color:var(--ink);}
.navlinks button[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent);}
.navright{display:flex; align-items:center; gap:10px;}
.tgl,.burger{width:38px; height:38px; border-radius:var(--r-pill); cursor:pointer; background:transparent;
  border:1px solid var(--rule); color:var(--ink-soft); font-size:13px;}
.tgl:hover,.burger:hover{color:var(--ink);}
.burger{display:none;}
.navcta{font-size:13px; font-weight:500; padding:11px 22px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink); white-space:nowrap; border:none; cursor:pointer;
  font-family:inherit; transition:transform .35s cubic-bezier(.16,1,.3,1);}
.navcta:hover{transform:translateY(-2px);}
.mobmenu{display:none;}
.mobmenu ul{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.mobmenu button,.mobmenu a{display:block; width:100%; text-align:left; padding:13px 4px; font-size:16px;
  border:none; border-bottom:1px solid var(--rule); background:none; color:var(--ink); font-family:inherit; cursor:pointer;}
.mobmenu li:last-child button,.mobmenu li:last-child a{border-bottom:none;}

/* -- hero -- */
.view[hidden]{display:none;}
.hero{position:relative; margin-top:calc(-1 * (var(--nav-h) + 24px)); min-height:100vh;
  display:flex; align-items:flex-end; overflow:hidden;}
.hero.compact{min-height:70vh;}
.hero > img,.hero > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,12,.6) 0%,rgba(6,8,12,.24) 40%,rgba(6,8,12,.94) 100%),
    linear-gradient(96deg,rgba(6,8,12,.58) 0%,rgba(6,8,12,.24) 40%,rgba(6,8,12,0) 72%);}
.hero-in{position:relative; z-index:2; width:100%; max-width:1280px; margin:0 auto;
  padding:calc(var(--nav-h) + 34px) 44px 92px;}
.hero.compact .hero-in{padding-bottom:60px; padding-top:calc(var(--nav-h) + 44px);}
.hero h1{font-size:clamp(46px,7.6vw,114px); line-height:.94; color:#F4F1EA; margin:16px 0 24px; max-width:15ch;}
.hero.compact h1{font-size:clamp(40px,5.6vw,80px);}
.hero h1 em{color:#E8E2D6;} .hero .lbl{color:rgba(244,241,234,.82);}
.hero p{font-size:17px; color:rgba(244,241,234,.78); max-width:46ch; margin-bottom:32px;}
.snd{position:absolute; right:38px; bottom:38px; z-index:3; display:inline-flex; align-items:center; gap:9px;
  padding:11px 19px; border-radius:var(--r-pill); font-size:12.5px; font-family:inherit; color:#F4F1EA;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26); cursor:pointer;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  transition:background .35s, transform .35s cubic-bezier(.16,1,.3,1);}
.snd:hover{background:rgba(255,255,255,.22); transform:translateY(-2px);}
.snd svg{flex-shrink:0;}
.snd.let-op{animation:sndPuls 2.4s cubic-bezier(.16,1,.3,1) 4;}
@keyframes sndPuls{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 0 rgba(232,226,214,0);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 9px rgba(232,226,214,.18);}}
.acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.btn{display:inline-flex; align-items:center; gap:9px; padding:15px 30px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; border:none; font-family:inherit; cursor:pointer; text-align:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s;}
.btn-p{background:var(--accent); color:var(--accent-ink);}
.btn-p:hover{filter:brightness(1.06); transform:translateY(-3px);}
.hero .btn-p{background:#EFEBE2; color:#0A0C12; filter:none;}
.hero .btn-p:hover{background:#fff;}
.btn-g{background:rgba(255,255,255,.13); color:#F4F1EA; border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.26);}
.btn-g:hover{background:rgba(255,255,255,.22); transform:translateY(-3px);}
.btn-fijn{display:block; margin-top:12px; font-size:12.5px; color:var(--ink-faint);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.btn-fijn:hover{color:var(--ink-soft);}
.prijs .btn-fijn{text-align:center;}
/* klikvlak over een hele kaart, zodat het beeld zelf een link is */
.dek{position:absolute; inset:0; z-index:4;}
.case,.door,.svc,.tile{position:relative;}
.btn-o{border:1px solid var(--rule); color:var(--ink); background:transparent;}
.btn-o:hover{border-color:var(--accent); transform:translateY(-3px);}
.rating{display:flex; align-items:center; gap:9px; margin-top:26px; font-size:13px; color:rgba(244,241,234,.7);}
.stars{color:#E8E2D6; letter-spacing:1px;} .rating b{color:#F4F1EA;}
.pip{width:5px; height:5px; border-radius:50%; background:#E8E2D6; opacity:.75; flex-shrink:0;}

/* -- secties -- */
.sec{padding:var(--gap-sec) 0 0;} .sec:last-of-type{padding-bottom:var(--gap-sec);}
.head{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:end; margin-bottom:52px;}
.head.mid{text-align:center; grid-template-columns:1fr; max-width:660px; margin-left:auto; margin-right:auto; gap:18px;}
.head h2{font-size:clamp(32px,4.4vw,58px); line-height:1.03;}
.head p{color:var(--ink-soft); max-width:46ch;}
.head.mid p{margin:0 auto;}

.case{position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:76vh; display:flex;
  align-items:flex-end; box-shadow:var(--glass-shadow);}
.case > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.case::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,8,12,.18),rgba(6,8,12,.88));}
.case-in{position:relative; z-index:2; padding:0 48px 52px; width:100%;}
.case-in .lbl{color:rgba(244,241,234,.64);}
.case-in h2{font-size:clamp(34px,5.2vw,72px); color:#F4F1EA; line-height:1; margin:14px 0 16px;}
.case-in h2 em{color:#E8E2D6;} .case-in p{color:rgba(244,241,234,.78); max-width:48ch;}
.case-tag{display:inline-flex; align-items:center; gap:8px; margin-top:24px; padding:11px 22px;
  border-radius:var(--r-pill); font-size:13px; color:#F4F1EA; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:background .35s, transform .35s cubic-bezier(.16,1,.3,1);}
.case-tag:hover{background:rgba(255,255,255,.22); transform:translateY(-2px);}

.doors{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.door{position:relative; min-height:510px; display:flex; align-items:flex-end; overflow:hidden;
  border-radius:var(--r-xl); box-shadow:var(--glass-shadow); cursor:pointer;}
.door img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.16,1,.3,1);}
.door:hover img{transform:scale(1.06);}
.door::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,8,12,.12),rgba(6,8,12,.9));}
.door-in{position:relative; z-index:2; padding:40px;}
.door .lbl{color:rgba(244,241,234,.64);}
.door h3{font-size:clamp(26px,3.2vw,38px); color:#F4F1EA; margin:13px 0 10px; line-height:1.06;}
.door h3 em{color:#E8E2D6;}
.door p{font-size:14.5px; color:rgba(244,241,234,.74); max-width:32ch; margin-bottom:20px;}
.door .go{font-size:13.5px; font-weight:500; color:#E8E2D6;}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:20px; grid-auto-rows:clamp(280px,29vw,410px);}
.tile{position:relative; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--glass-shadow); display:block; cursor:pointer;}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.tile:hover img{transform:scale(1.05);}
.tile::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(6,8,12,.78));}
.tile figcaption{position:absolute; left:20px; bottom:18px; z-index:2; padding:9px 17px; border-radius:var(--r-pill);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#F4F1EA;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.t-a{grid-column:span 7;} .t-b{grid-column:span 5;} .t-c{grid-column:span 5;} .t-d{grid-column:span 7;}
.meer{text-align:center; margin-top:44px;}

/* -- diensten -- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.svc{position:relative; min-height:420px; display:flex; align-items:flex-end; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--glass-shadow); cursor:pointer;}
.svc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.28) brightness(.94) saturate(1.05); transition:transform 1.2s cubic-bezier(.16,1,.3,1), filter .7s;}
.svc:hover img{transform:scale(1.06); filter:grayscale(0) brightness(1);}
.svc::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,8,12,.05) 0%,rgba(6,8,12,.22) 32%,rgba(6,8,12,.84) 62%,rgba(6,8,12,.97) 100%);}
.svc-in{position:relative; z-index:2; padding:30px 28px; width:100%;}
.svc-num{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px;
  color:rgba(232,226,214,.6); display:block; margin-bottom:10px;}
.svc h3{font-size:25px; color:#F4F1EA; margin-bottom:9px; line-height:1.1;}
.svc p{font-size:13.5px; color:rgba(244,241,234,.74); margin-bottom:16px;}
.svc .go{font-size:13px; font-weight:500; color:#E8E2D6;}

/* -- stappen -- */
.proces{display:grid; grid-template-columns:.78fr 1.22fr; gap:60px; align-items:center;}
.proces-img{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--glass-shadow);}
.proces-img img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.proces h2{font-size:clamp(30px,4vw,52px); line-height:1.05; margin:14px 0 18px;}
.proces > div > p{color:var(--ink-soft); max-width:46ch; margin-bottom:12px;}
.stap{display:grid; grid-template-columns:auto 1fr; gap:26px; padding:26px 0; border-bottom:1px solid var(--rule);}
.stap:last-child{border-bottom:none; padding-bottom:0;}
.stap-n{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:32px; line-height:1;
  color:var(--accent); opacity:.6; min-width:42px;}
.stap h3{font-size:21px; margin-bottom:7px;}
.stap p{font-size:14px; color:var(--ink-soft); line-height:1.65;}

/* -- waarom -- */
.why{padding:60px 52px;}
.why-top{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; margin-bottom:44px;}
.why-top h2{font-size:clamp(30px,4vw,52px); line-height:1.04;}
.why-top p{color:var(--ink-soft); max-width:42ch;}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.why-item{padding:30px 26px; border-radius:var(--r-md); background:var(--soft); border:1px solid var(--rule);}
.why-item .ic{width:40px; height:40px; border-radius:13px; margin-bottom:18px; display:flex;
  align-items:center; justify-content:center; background:rgba(232,226,214,.1); border:1px solid var(--rule); color:var(--accent);}
:root[data-theme="light"] .why-item .ic{background:rgba(30,45,82,.07);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .why-item .ic{background:rgba(30,45,82,.07);}}
.why-item h3{font-size:15.5px; font-weight:600; margin:0 0 7px; font-family:'DM Sans',sans-serif;}
.why-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.62;}

/* -- staffel -- */
.staffel{padding:56px 52px; display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start;}
.staffel h2{font-size:clamp(30px,3.9vw,50px); line-height:1.04; margin:14px 0 18px;}
.staffel > div > p{color:var(--ink-soft); max-width:38ch;}
table{border-collapse:collapse; width:100%;}
th,td{text-align:left; padding:16px 12px; border-bottom:1px solid var(--rule);}
th{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
td.n{font-family:'Cormorant Garamond',serif; font-size:29px; font-weight:400; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; width:1%;}
tr.hi td{background:rgba(232,226,214,.07);}
:root[data-theme="light"] tr.hi td{background:rgba(30,45,82,.06);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) tr.hi td{background:rgba(30,45,82,.06);}}
tr.hi td.n{color:var(--accent);} td.who{color:var(--ink-soft); font-size:14px;}
.note{margin-top:24px; padding:18px 22px; border-radius:var(--r-md); background:rgba(232,226,214,.06);
  border:1px solid var(--rule); color:var(--ink-soft); font-size:14px;}
:root[data-theme="light"] .note{background:rgba(30,45,82,.05);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .note{background:rgba(30,45,82,.05);}}

/* -- prijskaarten -- */
.prijzen{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:20px;}
.prijzen.twee{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.prijs{padding:34px 30px; border-radius:var(--r-lg); background:var(--soft); border:1px solid var(--rule);
  display:flex; flex-direction:column;}
.prijs.top{border-color:var(--accent);}
.prijs h3{font-size:23px; margin-bottom:6px;}
.prijs .sub{font-size:13px; color:var(--ink-faint); margin-bottom:20px; min-height:36px;}
.prijs .bedrag{font-family:'Cormorant Garamond',serif; font-size:46px; font-weight:400; line-height:1; color:var(--accent);}
.prijs .btw{font-size:12.5px; color:var(--ink-faint); margin:8px 0 20px;}
.prijs ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px;}
.prijs li{font-size:13.5px; color:var(--ink-soft); padding-left:19px; position:relative; line-height:1.55;}
.prijs li::before{content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.55;}
.prijs .btn{margin-top:auto; justify-content:center;}
.prijs .btn + .btn-fijn{margin-top:12px;}
/* kaarten zonder badge houden dezelfde koplijn */
.prijs:not(:has(.badge))::before{content:''; display:block; height:27px; margin-bottom:14px;}
.badge{display:inline-block; align-self:flex-start; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink); padding:5px 12px; border-radius:var(--r-pill); margin-bottom:14px;}
.was{text-decoration:line-through; color:var(--ink-faint); font-size:16px; font-family:'DM Sans',sans-serif; margin-left:8px;}

/* -- branches / voordelen -- */
.branches{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.branch{display:flex; gap:15px; padding:24px; border-radius:var(--r-md); background:var(--soft); border:1px solid var(--rule);}
.branch .ic{flex-shrink:0; width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:rgba(232,226,214,.1); border:1px solid var(--rule); color:var(--accent);}
:root[data-theme="light"] .branch .ic{background:rgba(30,45,82,.07);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .branch .ic{background:rgba(30,45,82,.07);}}
.branch h3{font-size:16px; font-weight:600; font-family:'DM Sans',sans-serif; margin-bottom:5px;}
.branch p{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}

/* -- portfolio -- */
.chips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:42px;}
.chip{padding:10px 22px; border-radius:var(--r-pill); border:1px solid var(--rule); background:transparent;
  color:var(--ink-soft); font-family:inherit; font-size:13.5px; cursor:pointer; transition:.3s;}
.chip:hover{color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.pfgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.pf{position:relative; overflow:hidden; border-radius:var(--r-md); aspect-ratio:4/5; cursor:zoom-in;
  border:1px solid var(--rule); background:var(--soft);}
.pf img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.pf:hover img{transform:scale(1.05);}
.pf::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(6,8,12,.8));
  opacity:0; transition:opacity .4s;}
.pf:hover::after,.pf:focus-visible::after{opacity:1;}
.pf figcaption{position:absolute; left:14px; right:14px; bottom:12px; z-index:2; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#F4F1EA; opacity:0; transform:translateY(6px);
  transition:opacity .4s, transform .4s cubic-bezier(.16,1,.3,1);}
.pf:hover figcaption,.pf:focus-visible figcaption{opacity:1; transform:none;}
.pf[hidden]{display:none;}
/* videotegels: zelfde formaat als een foto, met een afspeelteken */
.pf-play{position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  padding-left:3px; color:#F4F1EA; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 34px rgba(0,0,0,.42);
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .35s;}
.pf:hover .pf-play{transform:translate(-50%,-50%) scale(1.1); background:rgba(255,255,255,.26);}
.pf[data-video]::after{opacity:.55;}
.pf[data-video]:hover::after{opacity:1;}
.pf-soort{position:absolute; z-index:3; left:12px; top:12px; padding:5px 11px; border-radius:var(--r-pill);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#F4F1EA;
  background:rgba(6,8,12,.5); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.pftel{text-align:center; margin-bottom:22px; font-size:12.5px; color:var(--ink-faint);}

/* -- lightbox -- */
.lb{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(4,5,8,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:34px;}
.lb[hidden]{display:none;}
.lb-media{display:flex; align-items:center; justify-content:center; max-width:100%; max-height:82vh;}
.lb img,.lb video{max-width:100%; max-height:82vh; border-radius:var(--r-md); box-shadow:0 40px 100px rgba(0,0,0,.6);}
.lb video{background:#05070B;}
.lb-yt{width:min(100%,1180px); aspect-ratio:16/9; border:0; border-radius:var(--r-md);
  box-shadow:0 40px 100px rgba(0,0,0,.6); background:#05070B;}
.lb-yt.staand{width:auto; height:82vh; aspect-ratio:9/16;}
.lb [hidden]{display:none!important;}
.lb-cap{position:absolute; left:0; right:0; bottom:26px; text-align:center; color:rgba(244,241,234,.8); font-size:13px;}
.lb-x,.lb-n,.lb-v{position:absolute; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.12); color:#F4F1EA; cursor:pointer; backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; font-family:inherit;}
.lb-x{top:24px; right:24px; width:44px; height:44px; font-size:19px;}
.lb-v,.lb-n{top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:17px;}
.lb-v{left:22px;} .lb-n{right:22px;}

/* -- filmkaart -- */
.film{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--glass-shadow);
  border:1px solid var(--glass-edge);}
.film video{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#05070B;}
.film iframe{width:100%; aspect-ratio:16/9; border:0; display:block; background:#05070B;}
/* klik-om-te-laden: de YouTube-player komt er pas na een klik in */
.film-facade{position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:16/9; padding:0; border:0; cursor:pointer; font-family:inherit;
  background:#05070B center/cover no-repeat;}
.film-facade::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,12,.16) 0%,rgba(6,8,12,.1) 45%,rgba(6,8,12,.62) 100%);}
.film-play{position:relative; z-index:2; width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#F4F1EA; padding-left:5px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 18px 50px rgba(0,0,0,.45);
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .35s;}
.film-facade:hover .film-play,.film-facade:focus-visible .film-play{transform:scale(1.08); background:rgba(255,255,255,.26);}
.film-duur{position:absolute; z-index:2; left:24px; bottom:22px; padding:9px 18px; border-radius:var(--r-pill);
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#F4F1EA;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
@media (max-width:620px){
  .film-play{width:68px; height:68px;}
  .film-duur{left:14px; bottom:14px; padding:7px 13px; font-size:10.5px;}
}
.film-bar{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:20px 26px; background:var(--glass-fill); backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%); border-top:1px solid var(--rule);}
.film-bar .k{font-size:13px; color:var(--ink-soft);} .film-bar .k b{color:var(--ink); font-weight:600;}
.film-link{display:inline-flex; align-items:center; gap:9px; padding:11px 21px; border-radius:var(--r-pill);
  font-size:13px; font-weight:500; background:var(--accent); color:var(--accent-ink);
  transition:transform .35s cubic-bezier(.16,1,.3,1);}
.film-link:hover{transform:translateY(-2px);}

/* -- reviews -- */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.rev{padding:32px 28px; border-radius:var(--r-lg); background:var(--soft); border:1px solid var(--rule);
  display:flex; flex-direction:column;}
.rev .st{color:var(--accent); letter-spacing:2px; font-size:13px; margin-bottom:14px;}
.rev p{font-size:14px; color:var(--ink-soft); line-height:1.68; margin-bottom:20px;}
.rev .who{margin-top:auto; display:flex; align-items:center; gap:12px;}
.rev .av{width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:600; background:rgba(232,226,214,.12);
  border:1px solid var(--rule); color:var(--accent); font-family:'DM Sans',sans-serif;}
:root[data-theme="light"] .rev .av{background:rgba(30,45,82,.08);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .rev .av{background:rgba(30,45,82,.08);}}
.rev .nm{font-size:14px; font-weight:500;} .rev .pr{font-size:12px; color:var(--ink-faint);}

/* -- quote -- */
.quote{padding:52px; text-align:center;}
.quote blockquote{margin:0 auto 22px; max-width:56ch; font-family:'Cormorant Garamond',serif;
  font-size:clamp(22px,2.7vw,32px); line-height:1.35; font-style:italic;}
.quote .src{font-size:13px; color:var(--ink-faint);}

/* -- faq -- */
.faq{display:grid; gap:12px; max-width:860px; margin:0 auto;}
.qa{border-radius:var(--r-md); background:var(--soft); border:1px solid var(--rule); overflow:hidden;}
.qa summary{cursor:pointer; list-style:none; padding:22px 26px; font-size:16px; font-weight:500;
  display:flex; align-items:center; justify-content:space-between; gap:18px;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:'+'; font-size:20px; color:var(--accent); flex-shrink:0; line-height:1;}
.qa[open] summary::after{content:'\2212';}
.qa .a{padding:0 26px 24px; font-size:14.5px; color:var(--ink-soft); line-height:1.68;}

/* -- galerijstrook -- */
.strip{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
.strip.drie{grid-template-columns:repeat(3,1fr); gap:18px;}
.strip.drie figure{aspect-ratio:4/5;}
.strip figure{margin:0; position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:1/1;
  cursor:zoom-in; border:1px solid var(--rule);}
.strip img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.16,1,.3,1);}
.strip figure:hover img{transform:scale(1.07);}

/* -- grading -- */
.grade{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--glass-shadow);
  aspect-ratio:16/9; user-select:none; touch-action:none;}
.grade img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.grade .voor{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);}
.grade .hnd{position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; background:rgba(244,241,234,.9);
  transform:translateX(-1px); pointer-events:none;}
.grade .hnd::after{content:''; position:absolute; top:50%; left:50%; width:46px; height:46px;
  transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(12px);}
.grade .tag{position:absolute; bottom:18px; z-index:3; padding:7px 15px; border-radius:var(--r-pill);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#F4F1EA;
  background:rgba(6,8,12,.55); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px);}
.grade .tag.l{left:18px;} .grade .tag.r{right:18px;}
.grade input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0;}

/* -- feiten -- */
.feiten{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.feit{padding:26px; border-radius:var(--r-md); background:var(--soft); border:1px solid var(--rule);}
.feit .v{font-family:'Cormorant Garamond',serif; font-size:32px; line-height:1; color:var(--accent); margin-bottom:8px;}
.feit .k{font-size:13px; color:var(--ink-soft);}

/* -- contact -- */
.contactwrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start;}
.veld{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.veld label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
.veld input,.veld select,.veld textarea{padding:14px 16px; border-radius:var(--r-md); border:1px solid var(--rule);
  background:var(--soft); color:var(--ink); font-family:inherit; font-size:15px;}
.veld textarea{min-height:120px; resize:vertical;}
.rij2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.persoon{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-md);
  background:var(--soft); border:1px solid var(--rule); margin-bottom:26px;}
.persoon img{width:54px; height:54px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.persoon p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
.persoon b{color:var(--ink);}
.contactweg{display:grid; gap:12px;}
.weg{display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--r-md);
  background:var(--soft); border:1px solid var(--rule);}
.weg .ic{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(232,226,214,.1); border:1px solid var(--rule); color:var(--accent); flex-shrink:0;}
:root[data-theme="light"] .weg .ic{background:rgba(30,45,82,.07);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .weg .ic{background:rgba(30,45,82,.07);}}
.weg .k{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
.weg .v{font-size:15px;}

.close{padding:82px 52px; text-align:center;}
.close h2{font-size:clamp(34px,5.2vw,72px); line-height:1; margin-bottom:18px;}
.close p{color:var(--ink-soft); max-width:44ch; margin:0 auto 34px;}

.foot{margin-top:var(--gap-sec); padding:64px 52px 40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px;}
.foot h2,.foot h3{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 18px; font-family:'DM Sans',sans-serif; font-weight:600;}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.foot li a,.foot li button{font-size:14px; color:var(--ink-soft); background:none; border:none;
  padding:0; font-family:inherit; cursor:pointer; text-align:left;}
.foot li a:hover,.foot li button:hover{color:var(--ink);}
.foot-brand p{font-size:14px; color:var(--ink-soft); max-width:30ch; margin-top:14px;}
.foot-brand .brand{font-size:22px;}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--rule); display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint);}
.foot-bottom a{color:var(--ink-faint);} .foot-bottom a:hover{color:var(--ink-soft);}


@media (max-width:1040px){
  :root{--gap-sec:92px;}
  .navlinks{display:none;} .burger{display:inline-flex; align-items:center; justify-content:center;}
  .mobmenu{display:block; margin:10px 0 0; padding:22px 26px;} .mobmenu[hidden]{display:none;}
  .head,.why-top,.staffel,.proces,.contactwrap{grid-template-columns:1fr; gap:28px;}
  .doors{grid-template-columns:1fr; gap:18px;}
  .why-grid,.branches,.revs{grid-template-columns:1fr; gap:16px;}
  .svc-grid,.feiten{grid-template-columns:repeat(2,1fr);}
  .pfgrid{grid-template-columns:repeat(2,1fr);}
  .strip{grid-template-columns:repeat(3,1fr);}
  .strip.drie{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr; gap:34px;}
  .why,.staffel,.close,.foot,.quote{padding-left:30px; padding-right:30px;}
  .hero-in,.case-in{padding-left:30px; padding-right:30px;}
  .hero-in{padding-top:calc(var(--nav-h) + 30px);}
  .snd{right:24px; bottom:24px;}
}
@media (max-width:820px){
  .grid{grid-template-columns:1fr; grid-auto-rows:clamp(250px,52vw,340px); gap:16px;}
  .t-a,.t-b,.t-c,.t-d{grid-column:span 1;}
}
@media (max-width:620px){
  :root{--gap-sec:72px; --r-xl:24px; --r-lg:20px;}
  .navbar{padding:9px 9px 9px 16px;} .brand{font-size:16.5px; letter-spacing:.06em;}
  .navcta{padding:10px 15px; font-size:12px;} .tgl,.burger{width:34px; height:34px;} .navright{gap:7px;}
  .availbar{padding:10px 14px; font-size:11.5px;}
  .hero{min-height:92vh;} .hero.compact{min-height:62vh;}
  /* compactere hero op de telefoon: de reviewregel moet boven de zwevende knoppen blijven */
  .hero h1{font-size:clamp(36px,10.2vw,54px); margin:12px 0 18px;}
  .hero p{font-size:15px; line-height:1.55; margin-bottom:24px;}
  .hero-in{padding-bottom:96px; padding-top:calc(var(--nav-h) + 8px);}
  .acts{gap:10px;} .acts .btn{flex:1 1 100%; justify-content:center; padding:14px 22px;}
  .rating{margin-top:18px; font-size:12.5px; gap:7px;}
  /* op de telefoon blijft de geluidsknop vast in beeld zolang de hero zichtbaar is */
  .snd{position:fixed; right:18px; bottom:18px; padding:0; gap:0; width:50px; height:50px;
    justify-content:center; z-index:121; transition:opacity .3s, transform .3s;}
  .snd span{display:none;}
  .snd[data-weg]{opacity:0; transform:translateY(8px); pointer-events:none;}
  .case{min-height:66vh;} .door{min-height:430px;} .svc{min-height:360px;}
  .svc-grid,.feiten{grid-template-columns:1fr;}
  .pfgrid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .strip{grid-template-columns:repeat(2,1fr);}
  .rij2{grid-template-columns:1fr;}
  .why,.staffel,.close,.foot,.quote{padding:38px 24px;} .foot-grid{grid-template-columns:1fr;}
  .proces{gap:26px;} .lb{padding:16px;} .lb-v{left:10px;} .lb-n{right:10px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;} html{scroll-behavior:auto;}}

/* ══ FILMKORREL ══
   Een fijne korrel over de hele site zodat vlakken nooit dood aanvoelen. */
body::after{content:''; position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
:root[data-theme="light"] body::after{opacity:.04; mix-blend-mode:multiply;}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::after{opacity:.04; mix-blend-mode:multiply;}}

/* ══ WHATSAPP ══
   Blijft altijd linksonder in beeld, boven de pagina maar onder de cookiemelding. */
.wa-btn{position:fixed; bottom:24px; left:24px; z-index:120;
  display:flex; align-items:center; justify-content:center; width:54px; height:54px;
  background:#25D366; color:#fff; border-radius:50%;
  box-shadow:0 10px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;}
.wa-btn:hover{transform:scale(1.08); box-shadow:0 14px 38px rgba(37,211,102,.42);}
@media (max-width:680px){.wa-btn{bottom:18px; left:18px; width:50px; height:50px;}}

/* ══ COOKIEMELDING ══ */
.ck-scrim{position:fixed; inset:0; z-index:340; background:rgba(4,5,8,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s cubic-bezier(.16,1,.3,1);}
.ck-scrim.open{opacity:1;}
:root[data-theme="light"] .ck-scrim{background:rgba(26,28,36,.62);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ck-scrim{background:rgba(26,28,36,.62);}}
body.ck-lock,body.lb-lock{overflow:hidden;}
.ck-banner{position:fixed; z-index:350; top:50%; left:50%;
  width:calc(100% - 40px); max-width:520px;
  display:flex; flex-direction:column; gap:20px; padding:32px 32px 30px;
  background:#12151C; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 40px 110px rgba(0,0,0,.62);
  opacity:0; transform:translate(-50%,-50%) scale(.96);
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);}
:root[data-theme="light"] .ck-banner{background:#F7F4ED; border-color:rgba(30,45,82,.16);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ck-banner{background:#F7F4ED; border-color:rgba(30,45,82,.16);}}
.ck-banner.open{opacity:1; transform:translate(-50%,-50%) scale(1);}
.ck-titel{font-size:24px; margin:0 0 8px;}
.ck-tekst{font-size:13.5px; line-height:1.65; color:var(--ink-soft);}
.ck-tekst a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.ck-acties{display:flex; gap:10px; flex-wrap:wrap;}
.ck-btn{flex:1 1 auto; min-height:44px; padding:12px 20px; border-radius:var(--r-pill);
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background .25s, border-color .25s, transform .25s;}
.ck-btn:hover{transform:translateY(-1px);}
.ck-btn-prim{background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);}
.ck-btn-sec{background:transparent; color:var(--ink); border:1px solid var(--rule);}
.ck-btn-sec:hover{border-color:var(--accent);}
@media (max-width:560px){
  .ck-banner{width:calc(100% - 24px); padding:24px 22px; gap:16px;}
  .ck-titel{font-size:21px;} .ck-acties{flex-direction:column-reverse;} .ck-btn{width:100%;}
}

/* ══ VOORGEVULD PAKKET ══
   Komt iemand vanaf een tariefkaart, dan staat het pakket al klaar. */
.voorgevuld{position:relative; animation:vgPuls 1.1s cubic-bezier(.16,1,.3,1) 2;}
@keyframes vgPuls{0%,100%{box-shadow:0 0 0 0 rgba(232,226,214,0);}50%{box-shadow:0 0 0 4px rgba(232,226,214,.22);}}
:root[data-theme="light"] .voorgevuld{animation-name:vgPulsL;}
@keyframes vgPulsL{0%,100%{box-shadow:0 0 0 0 rgba(30,45,82,0);}50%{box-shadow:0 0 0 4px rgba(30,45,82,.16);}}
.vg-melding{display:none; align-items:flex-start; gap:12px; margin-bottom:22px; padding:15px 18px;
  border-radius:var(--r-md); background:rgba(232,226,214,.08); border:1px solid var(--rule);
  font-size:13.5px; line-height:1.6; color:var(--ink-soft);}
:root[data-theme="light"] .vg-melding{background:rgba(30,45,82,.06);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .vg-melding{background:rgba(30,45,82,.06);}}
.vg-melding.aan{display:flex;}
.vg-melding b{color:var(--ink);}
.vg-melding svg{flex-shrink:0; margin-top:2px; color:var(--accent);}

/* ══ FORMULIER-EXTRA'S ══ */
.veld .hint{font-size:12.5px; color:var(--ink-faint); line-height:1.5;}
.veld label span.ster{color:var(--accent);}
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}