@font-face{font-family:Urbanist;src:url(/fonts/Urbanist.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --inkt:#0F1014;--tekst:#4A4C55;--grijs:#D8D9DD;--grijs2:#ECEDEF;--wit:#fff;
  --accent:#A78BFA;--accent-licht:#DDD3FF;--accent-diep:#5B3DF0;
  --rond:36px;--rand:clamp(10px,2vw,28px);--schaduw:0 18px 50px rgba(15,16,20,.09);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:20px;overflow-x:clip}
body{font:500 18px/1.55 Urbanist,system-ui,sans-serif;color:var(--tekst);background:var(--grijs);padding:var(--rand);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none;padding:0}
h1,h2,h3{text-wrap:balance;color:var(--inkt);font-weight:600;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(42px,5.1vw,72px);font-weight:500;line-height:1.1;letter-spacing:-.025em}
h2{font-size:clamp(32px,3.6vw,50px);font-weight:500}
h3{font-size:22px}
.sla-over{position:absolute;left:-999px}
.sla-over:focus{left:20px;top:20px;z-index:9;background:#fff;padding:10px 16px;border-radius:12px}
:focus-visible{outline:2px solid var(--accent-diep);outline-offset:3px}

/* Vormen: de afgeronde ruit is het merkteken van de hele site */
.ruit{position:absolute;display:block;aspect-ratio:1;transform:rotate(45deg);border-radius:14%;pointer-events:none}
.paneel{position:relative;overflow:hidden;border-radius:var(--rond);max-width:1560px;margin-inline:auto}
.paneel-hero{background:linear-gradient(120deg,#fff 30%,#ECEDEF);padding:0 clamp(22px,6vw,96px) clamp(30px,4vw,56px);box-shadow:var(--schaduw)}
.ruit-a{width:560px;left:-210px;top:220px;background:linear-gradient(135deg,#F2F2F4,#fff)}
.ruit-b{width:520px;left:30%;top:-330px;background:linear-gradient(135deg,#fff,#F0F1F3)}
.ruit-c{width:700px;right:-250px;top:250px;background:linear-gradient(135deg,#fff,#E6E7EA 80%)}

/* Kop */
.kop{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px}
.logo svg{height:50px;width:auto}
.menu{display:flex;gap:clamp(18px,3vw,42px);font-size:16px}
.menu a,.kop-link{text-decoration:none;color:var(--inkt)}
.menu a:hover,.kop-link:hover{color:var(--accent-diep)}
.kop-rechts{display:flex;align-items:center;gap:26px;font-size:17px}

/* Knoppen */
.knop{display:inline-flex;justify-content:center;align-items:center;border:0;background:var(--inkt);color:#fff;font:600 18px Urbanist,sans-serif;text-decoration:none;padding:20px 44px;border-radius:99px;cursor:pointer;transition:background .2s,transform .2s}
.knop:hover{background:var(--accent-diep);transform:translateY(-2px)}
.knop-klein{font-size:16px;padding:13px 28px}

/* Hero */
.hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(20px,3vw,50px);align-items:center;padding-top:clamp(20px,3vw,44px)}
.accent{position:relative;white-space:nowrap;display:inline-block}
.streep{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.17em;overflow:visible}
.streep path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.intro{font-size:clamp(19px,1.5vw,22px);color:var(--inkt);max-width:31em;margin-top:26px;line-height:1.45}
.hero-actie{position:relative;margin-top:36px;display:flex;align-items:center}
.pijl{width:128px;margin:-46px 0 0 10px;color:var(--inkt)}
.hero-voet{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--inkt);padding-top:20px;max-width:560px}
.hero-voet p{font-size:16px;color:var(--inkt)}
.soorten{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:16px;font-weight:600;color:var(--inkt);font-size:16px}
.soorten li{display:flex;align-items:center;gap:8px}
.soorten .icoon{width:21px;height:21px}

.hero-beeld{position:relative;aspect-ratio:1;max-width:680px;width:100%;justify-self:center}
.ruit-achter{inset:7%;background:linear-gradient(135deg,#fff,var(--accent-licht));opacity:.8;transform:rotate(45deg) translate(5%,-5%)}
.ruit-foto{position:absolute;inset:14.6%;transform:rotate(45deg);border-radius:13%;overflow:hidden;box-shadow:var(--schaduw)}
.ruit-foto img{width:142%;max-width:none;height:142%;object-fit:cover;transform:translate(-14.800%,-14.800%) rotate(-45deg)}

.zweef{position:absolute;z-index:3;display:flex;background:#fff;box-shadow:var(--schaduw);color:var(--inkt);font-size:15px;line-height:1.25;animation:zweef 7s ease-in-out infinite}
@keyframes zweef{50%{transform:translateY(-8px)}}
.z-bedrag{top:7%;right:6%;align-items:center;background:none;box-shadow:none}
.z-icoon{display:grid;place-items:center;width:62px;height:62px;background:#fff;border-radius:18px;box-shadow:var(--schaduw)}
.z-icoon .icoon{width:26px}
.z-pil{background:var(--accent);padding:9px 18px;border-radius:99px;margin:-44px 0 0 -14px;font-size:20px;white-space:nowrap}
.z-pil b{font-weight:600}.z-pil small{font-size:12px}
.z-ring{left:-3%;top:50%;align-items:center;gap:14px;padding:10px 24px 10px 10px;border-radius:99px;animation-delay:-2s}
.ring{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:radial-gradient(#fff 58%,transparent 60%),conic-gradient(var(--accent) 72%,var(--accent-licht) 0)}
.ring b{font-size:17px}
.z-keuze{right:-2%;top:40%;gap:22px;padding:20px 24px;border-radius:20px;animation-delay:-4s}
.z-keuze span{display:block;font-weight:600}
.z-keuze small{color:var(--tekst);font-size:13px}
.balk{display:block;width:96px;height:6px;border-radius:9px;margin:8px 0 6px;background:var(--grijs2);position:relative;overflow:hidden}
.balk::after{content:"";position:absolute;inset:0;background:var(--inkt);border-radius:9px}
.balk.half::after{right:35%;background:var(--accent)}
.z-bel{left:27%;bottom:-1%;background:none;box-shadow:none;text-decoration:none;align-items:flex-end;animation-delay:-1s}
.bel-rond{display:grid;place-items:center;width:78px;height:78px;background:#fff;border-radius:50%;box-shadow:0 0 0 12px rgba(255,255,255,.55),0 0 0 13px rgba(15,16,20,.1),0 0 0 26px rgba(255,255,255,.3),var(--schaduw)}
.bel-rond .icoon{width:30px}
.bel-pil{order:2;background:var(--accent);padding:8px 18px;border-radius:99px;margin:0 0 56px -18px;white-space:nowrap;font-weight:600}

/* Secties */
.sectie{position:relative;max-width:1320px;margin-inline:auto;padding:clamp(70px,9vw,130px) clamp(16px,3vw,40px)}
.sectie-kop{position:relative;z-index:2;max-width:760px;margin:0 auto clamp(38px,5vw,64px);text-align:center}
.sectie-kop p{margin-top:18px;font-size:20px;line-height:1.45}
.sectie-kop.links{text-align:left;margin:0}
.kaart{background:#fff;border-radius:28px;box-shadow:var(--schaduw)}

/* Rekenen */
.reken-sectie{overflow:visible}
.ruit-d{width:760px;left:50%;top:60px;margin-left:-380px;background:linear-gradient(135deg,#E6E7EA,#ECEDEF);opacity:.8}
.reken{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr 1fr;padding:14px}
.reken-velden{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:clamp(20px,3vw,38px);align-content:center}
.veld{font-size:15px;font-weight:600;color:var(--inkt)}
.veld span{display:flex;align-items:center;gap:8px;background:var(--grijs2);border-radius:16px;padding:0 18px;margin-top:8px}
.veld i{font-style:normal;color:var(--tekst)}
.veld input{flex:1;min-width:0;border:0;background:none;font:600 20px Urbanist,sans-serif;color:var(--inkt);padding:15px 0;outline:0}
.veld span:focus-within{box-shadow:0 0 0 2px var(--accent-diep)}
.schuif{grid-column:span 2;color:var(--inkt);font-size:17px}
.schuif input{width:100%;margin-top:10px;accent-color:var(--inkt)}
.reken-uitkomst{background:var(--inkt);color:#C9CAD1;border-radius:22px;padding:clamp(24px,3vw,40px)}
.u-label{color:#fff;font-size:18px}
.u-groot{display:block;color:var(--accent);font-size:clamp(52px,6vw,84px);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin:4px 0 20px}
.reken-uitkomst dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.16)}
.reken-uitkomst dd{margin:0;color:#fff;font-weight:600}
.klein{font-size:14px;line-height:1.4}
.reken-uitkomst .klein{margin-top:14px}

/* Zes punten */
.posten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.posten li{padding:34px 30px 30px;transition:transform .25s}
.posten li:hover{transform:translateY(-5px)}
.posten h3{margin:20px 0 8px}
.ruit-icoon{position:relative;display:grid;place-items:center;width:64px;height:64px;margin-left:4px;color:var(--inkt)}
.ruit-icoon::before{content:"";position:absolute;inset:9px;transform:rotate(45deg);border-radius:13px;background:var(--accent-licht)}
.posten li:nth-child(3n+1) .ruit-icoon::before{background:var(--accent)}
.ruit-icoon .icoon{position:relative;width:26px}

/* Contracten */
.paneel-donker{background:linear-gradient(135deg,#17181E,var(--inkt));color:#C9CAD1;padding:clamp(60px,8vw,110px) clamp(22px,6vw,96px)}
.paneel-donker h2{color:#fff}
.ruit-e{width:560px;left:-240px;top:-120px;background:rgba(255,255,255,.035)}
.ruit-f{width:640px;right:-240px;bottom:-280px;background:rgba(167,139,250,.14)}
.keuzes{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1100px;margin-inline:auto}
.keuze{background:#fff;color:var(--tekst);border-radius:28px;padding:clamp(28px,3vw,42px)}
.pil{display:inline-block;background:var(--accent);color:var(--inkt);font-size:14px;font-weight:600;padding:6px 15px;border-radius:99px}
.keuze:nth-child(2) .pil{background:var(--accent-licht)}
.keuze h3{font-size:30px;font-weight:500;margin:18px 0 10px}
.keuze ul{margin-top:20px;border-top:1px solid var(--grijs2)}
.keuze li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--grijs2);color:var(--inkt)}
.keuze li::before{content:"";position:absolute;left:3px;top:21px;width:10px;height:10px;transform:rotate(45deg);border-radius:2px;background:var(--accent)}

/* Stappen */
.stappen{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);text-align:center}
.stappen::before{content:"";position:absolute;left:17%;right:17%;top:58px;border-top:2px dashed #B9BAC1}
.stap-ruit{position:relative;display:grid;place-items:center;width:116px;height:116px;margin:0 auto 22px}
.stap-ruit::before{content:"";position:absolute;inset:17px;transform:rotate(45deg);border-radius:20px;background:#fff;box-shadow:var(--schaduw)}
.stappen li:nth-child(3) .stap-ruit::before{background:var(--inkt)}
.stappen li:nth-child(3) .stap-ruit b{color:#fff}
.stap-ruit b{position:relative;font-size:30px;font-weight:600;color:var(--inkt)}
.stappen h3{margin-bottom:8px}

/* Vragen */
.vragen-sectie{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);padding-top:0}
.vragen-sectie a{color:var(--accent-diep)}
.vragen{display:grid;gap:12px}
details{background:#fff;border-radius:24px}
summary{position:relative;cursor:pointer;list-style:none;padding:21px 66px 21px 26px;font-size:20px;font-weight:600;color:var(--inkt)}
summary::-webkit-details-marker{display:none}
summary::before{content:"";position:absolute;right:25px;top:24px;width:22px;height:22px;transform:rotate(45deg);border-radius:6px;background:var(--accent-licht);transition:background .2s}
summary::after{content:"+";position:absolute;right:30px;top:19px;width:12px;text-align:center;font-size:22px;font-weight:500}
details[open] summary::after{content:"\2212"}
details[open] summary::before{background:var(--accent)}
details p{padding:0 66px 24px 26px}

/* Advies */
.paneel-advies{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center;background:linear-gradient(120deg,var(--accent-licht),var(--accent));padding:clamp(40px,6vw,90px) clamp(22px,6vw,96px)}
.ruit-g{width:680px;left:-220px;bottom:-330px;background:rgba(255,255,255,.28)}
.advies-tekst{position:relative;color:var(--inkt);font-size:20px;line-height:1.45}
.advies-tekst h2{margin-bottom:18px}
.advies-form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;padding:clamp(24px,3vw,40px)}
.advies-form label{font-size:15px;font-weight:600;color:var(--inkt)}
.advies-form input::placeholder,.advies-form textarea::placeholder{color:#8B8D96}
.advies-form input{display:block;width:100%;margin-top:6px;border:0;background:var(--grijs2);border-radius:14px;padding:14px 16px;font:500 17px Urbanist,sans-serif;color:var(--inkt)}
.advies-form .knop,.advies-form .klein{grid-column:span 2}
.advies-form .klein a{color:var(--accent-diep)}

/* Voet */
.voet{max-width:1320px;margin-inline:auto;display:grid;grid-template-columns:1.2fr 1.5fr 1fr 1fr;gap:30px;padding:clamp(44px,5vw,64px) clamp(16px,3vw,40px) 30px;font-size:16px;color:var(--inkt)}
.voet a{text-decoration:none}.voet p a:hover{color:var(--accent-diep)}
.voet .logo svg{height:44px}

@media (max-width:1100px){
  .menu{display:none}
  .hero{grid-template-columns:1fr}
  .hero-beeld{margin-top:10px}
  .reken,.vragen-sectie,.paneel-advies{grid-template-columns:1fr}
  .posten{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:17px}
  :root{--rond:26px}
  .kop{padding-block:18px}
  .logo svg{height:40px}
  .kop-link{display:none}
  .knop{padding:18px 30px}
  .knop-klein{padding:11px 18px;font-size:15px}
  .pijl{display:none}
  .hero-actie .knop{width:100%}
  .z-ring{left:-2%;top:62%;font-size:13px;padding:7px 16px 7px 7px}
  .ring{width:54px;height:54px}.ring b{font-size:13px}
  .z-keuze{right:-2%;top:30%;gap:10px;padding:12px 14px}
  .z-keuze div:nth-child(2){display:none}
  .balk{width:80px}
  .z-bedrag{right:2%;top:3%}
  .z-icoon{width:50px;height:50px}
  .bel-rond{width:60px;height:60px}.bel-pil{margin-bottom:42px}
  .z-bel{left:20%}
  .posten,.stappen,.keuzes,.reken-velden{grid-template-columns:1fr}
  .schuif{grid-column:auto}
  .stappen::before{display:none}
  .advies-form{grid-template-columns:1fr}
  .advies-form .knop,.advies-form .klein{grid-column:auto}
  .voet{grid-template-columns:1fr}
  summary{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .zweef{animation:none}
  .knop,.posten li{transition:none}
}

/* Formulier: extra velden */
.advies-form small{font-weight:500;color:var(--tekst)}
.advies-form select,.advies-form textarea{display:block;width:100%;margin-top:6px;border:0;background:var(--grijs2);border-radius:14px;padding:14px 16px;font:500 17px Urbanist,sans-serif;color:var(--inkt);resize:vertical}
.advies-form .breed{grid-column:span 2}
.veld-hulp{margin-top:-6px;color:var(--tekst)}
.lokveld{position:absolute;left:-9999px}

/* Aanvraagpagina */
.paneel-pagina{min-height:calc(100vh - 2*var(--rand))}
.aanvraag{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start;padding-top:clamp(16px,3vw,44px)}
.aanvraag-tekst{position:sticky;top:30px;color:var(--inkt)}
.ruit-lijst{margin-top:30px;display:grid;gap:14px;font-size:19px}
.ruit-lijst li{position:relative;padding-left:32px}
.ruit-lijst li::before{content:"";position:absolute;left:4px;top:7px;width:13px;height:13px;transform:rotate(45deg);border-radius:3px;background:var(--accent)}
.fout{background:var(--inkt);color:#fff;border-radius:18px;padding:14px 20px;margin-bottom:14px}
.bedankt{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:20px;padding:clamp(40px,8vw,110px) 0}
.bedankt .stap-ruit{margin:0;color:#fff}
.bedankt .stap-ruit::before{background:var(--inkt)}
.bedankt .stap-ruit .icoon{position:relative;width:36px}
.bedankt .intro{margin-top:0;text-align:center}

@media (max-width:1100px){
  .aanvraag{grid-template-columns:1fr}
  .aanvraag-tekst{position:static}
}
@media (max-width:680px){
  .advies-form .breed{grid-column:auto}
}

/* Eigen pijl in keuzelijsten, zodat hij niet tegen de rechterrand plakt */
.advies-form select{appearance:none;-webkit-appearance:none;padding-right:50px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%230F1014' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.500 1.500 5.500 5.500 5.500-5.500'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 22px center}

/* Energiecontract */
.knop-wit{background:#fff;color:var(--inkt)}
.knop-wit:hover{background:var(--accent);color:var(--inkt)}
.meer{position:relative;z-index:2;text-align:center;margin-top:36px}
.hero-pagina{padding-bottom:clamp(20px,3vw,40px)}
.hero-pagina .hero-beeld{max-width:560px}
.pil.licht{background:var(--accent-licht)}
.z-kaartje{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 22px;border-radius:20px;text-decoration:none;font-weight:600;font-size:16px}
.z-een{left:-2%;top:30%;animation-delay:-2s}
.z-twee{right:-2%;bottom:18%;animation-delay:-5s}
.uitleg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding-block:clamp(50px,6vw,90px)}
.uitleg.omgekeerd .uitleg-tekst{order:2}
.uitleg h2{margin:16px 0 18px}
.uitleg-tekst p+p{margin-top:14px}
.grafiek{margin:0;padding:clamp(20px,3vw,34px)}
.grafiek svg{width:100%;height:auto}
.g-markt{fill:none;stroke:#B9BAC1;stroke-width:3;stroke-linecap:round}
.g-lijn{fill:none;stroke:var(--inkt);stroke-width:5;stroke-linecap:round}
.g-beurs{fill:var(--accent)}
.g-opslag{fill:var(--inkt)}
.grafiek figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:16px;font-size:15px;color:var(--inkt)}
.grafiek small{margin-left:auto;color:var(--tekst);font-size:13px}
.teken{width:12px;height:12px;transform:rotate(45deg);border-radius:3px;margin-left:10px}
.teken:first-child{margin-left:0}
.teken.zwart{background:var(--inkt)}.teken.grijs{background:#B9BAC1}.teken.paars{background:var(--accent)}
.vergelijk-houder{position:relative;z-index:2;max-width:1000px;margin-inline:auto;background:#fff;border-radius:28px;padding:clamp(10px,2vw,24px) clamp(14px,3vw,36px);overflow-x:auto}
.vergelijk{width:100%;border-collapse:collapse;color:var(--inkt)}
.vergelijk th,.vergelijk td{text-align:left;padding:18px 14px;vertical-align:top}
.vergelijk thead th{font-size:24px;font-weight:600}
.vergelijk tbody tr{border-top:1px solid var(--grijs2)}
.vergelijk tbody th{font-weight:600;color:var(--tekst);white-space:nowrap}
.past-bij{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.past-bij .kaart{padding:clamp(26px,3vw,40px)}
.past-bij .ruit-lijst{margin-top:20px;font-size:18px;color:var(--inkt)}
.variabel{max-width:760px;margin:36px auto 0;text-align:center;font-size:19px}
.variabel b{color:var(--inkt)}
.paneel-slot{grid-template-columns:1fr auto}

@media (max-width:1100px){
  .uitleg,.past-bij,.paneel-slot{grid-template-columns:1fr}
  .uitleg.omgekeerd .uitleg-tekst{order:0}
  .paneel-slot .knop{justify-self:start;position:relative}
}
@media (max-width:680px){
  .z-kaartje{font-size:14px;padding:10px 14px}
  .z-een{left:-2%;top:24%}
  .z-twee{right:-2%;bottom:14%}
  .vergelijk th,.vergelijk td{padding:12px 8px;font-size:15px}
  .vergelijk thead th{font-size:18px}
  .vergelijk tbody th{white-space:normal}
  .grafiek small{margin-left:0;width:100%}
}

/* Contact */
.contact-kaarten{display:grid;gap:14px;margin-top:30px}
.contact-kaart{display:flex;align-items:center;gap:14px;padding:16px 22px 16px 14px;border-radius:22px;text-decoration:none;font-size:16px;line-height:1.35;color:var(--tekst);transition:transform .2s}
.contact-kaart:hover{transform:translateY(-3px)}
.contact-kaart b{display:block;font-size:18px;font-weight:600;color:var(--inkt)}
.contact-kaart span:last-child{min-width:0;overflow-wrap:anywhere}
.contact-kaart .ruit-icoon{flex:none;margin:0}
.aanvraag h1{text-wrap:wrap}
@media (max-width:680px){
  .contact-kaart{font-size:14px;gap:10px;padding:14px 14px 14px 8px}
  .contact-kaart .ruit-icoon{width:48px;height:48px}
  .contact-kaart .ruit-icoon::before{inset:7px;border-radius:10px}
  .contact-kaart .ruit-icoon .icoon{width:21px}
}

/* Over ons */
.ruit-trio{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center}
.trio{position:absolute;overflow:hidden;transform:rotate(45deg);border-radius:13%;box-shadow:var(--schaduw)}
.trio img{width:142%;max-width:none;height:142%;object-fit:cover;transform:translate(-14.800%,-14.800%) rotate(-45deg)}
.trio-1{width:52%;aspect-ratio:1;left:30%;top:0}
.trio-2{width:36%;aspect-ratio:1;left:2%;top:52%}
.trio-3{width:24%;aspect-ratio:1;left:66%;top:68%;background:var(--inkt);display:grid;place-items:center}
.trio-3 svg{width:78%;transform:rotate(-45deg)}
.verhaal{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);padding-bottom:clamp(30px,4vw,50px)}
.verhaal p{font-size:20px;line-height:1.5}
.verhaal p+p{margin-top:16px}
.verhaal a{color:var(--accent-diep)}
.sectie-kort{padding-top:clamp(40px,5vw,70px)}
.posten-vier{grid-template-columns:repeat(4,1fr)}
.keuze .pil+ul{margin-top:20px}
.sectie-tussen{height:clamp(22px,3vw,40px)}

@media (max-width:1100px){
  .posten-vier{grid-template-columns:1fr 1fr}
  .verhaal{grid-template-columns:1fr}
}
@media (max-width:680px){
  .posten-vier{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .ruit-trio{margin-top:50px}
}

/* Juridische pagina's en sitemap */
.paneel-kort{padding-bottom:clamp(36px,5vw,70px)}
.pagina-kop{position:relative;z-index:2;max-width:760px;padding-top:clamp(16px,3vw,40px)}
.juridisch{max-width:1320px;margin-inline:auto;display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(30px,5vw,80px);align-items:start;padding:clamp(50px,6vw,90px) clamp(16px,3vw,40px)}
.kort{position:sticky;top:30px;padding:clamp(24px,3vw,36px)}
.kort h2{font-size:26px;font-weight:600}
.kort .ruit-lijst{margin-top:18px;font-size:17px;color:var(--inkt)}
.tekst{max-width:720px;color:#33353D}
.tekst .datum{font-size:15px;color:var(--tekst)}
.tekst h2{font-size:28px;font-weight:600;margin:38px 0 10px}
.tekst .datum+h2{margin-top:18px}
.tekst p+p,.tekst ul+p,.tekst p+ul{margin-top:10px}
.tekst ul li{position:relative;padding:4px 0 4px 24px}
.tekst ul li::before{content:"";position:absolute;left:3px;top:13px;width:9px;height:9px;transform:rotate(45deg);border-radius:2px;background:var(--accent)}
.tekst b{color:var(--inkt)}
.tekst a{color:var(--accent-diep)}
.sitemap-lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sitemap-kaart{display:block;height:100%;padding:26px 28px;text-decoration:none;color:var(--tekst);transition:transform .2s}
.sitemap-kaart:hover{transform:translateY(-4px)}
.sitemap-kaart b{display:block;font-size:22px;font-weight:600;color:var(--inkt);margin-bottom:4px}

@media (max-width:1100px){
  .juridisch{grid-template-columns:1fr}
  .kort{position:static}
  .sitemap-lijst{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .sitemap-lijst{grid-template-columns:1fr}
}

/* Over ons: beeldmerk als derde ruit */
.trio-3{background:none;box-shadow:none;overflow:visible;transform:none;border-radius:0}
.trio-3 svg{width:100%;height:auto;transform:none}

/* Mobiel menu */
.alleen-menu,.menu-knop{display:none}
.menu-open{overflow:hidden}
@media (max-width:1100px){
  .kop{z-index:20}
  .logo,.kop-rechts{position:relative;z-index:2}
  .menu-knop{display:grid;align-content:center;justify-items:center;gap:5px;flex:none;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--inkt);cursor:pointer}
  .menu-knop span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s}
  .menu-knop.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-knop.open span:nth-child(2){opacity:0}
  .menu-knop.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu.open{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:fixed;inset:0;z-index:1;overflow-y:auto;padding:110px clamp(24px,6vw,96px) 40px;background:linear-gradient(135deg,#fff 40%,var(--accent-licht));font-size:30px;font-weight:500}
  .menu.open .alleen-menu{display:block}
  .menu.open a{padding:8px 0}
  .menu.open .knop{display:flex;width:100%;max-width:420px;margin-top:22px;padding:18px 30px;font-size:18px;color:#fff}
  .kop-rechts{gap:16px}
}
@media (max-width:680px){
  .kop-rechts .knop-klein{display:none}
}
@media (prefers-reduced-motion:reduce){
  .menu-knop span{transition:none}
}
@media (max-width:1100px){
  .menu.open{padding:130px calc(var(--rand) + clamp(22px,6vw,96px)) 40px}
  .menu-open .kop-link,.menu-open .kop-rechts .knop-klein{display:none}
}