:root{
  --oranje:#FF902B; --oranje-donker:#EC7A12;
  --geel:#FFC63D; --groen:#5DBB63; --roze:#FF6F9F; --blauw:#3E9BEA; --paars:#8A5CD6;
  --geel-zacht:#FFF1C9; --groen-zacht:#DFF3DF; --roze-zacht:#FFE1EA; --blauw-zacht:#DCEEFF; --oranje-zacht:#FFE6CF;
  --plop-groen:#27C94A; --plop-blauw:#2E9BEA; --plop-paars:#4B22B8; --plop-oranje:#FF7A1A;
  --creme:#FFF7EB; --wit:#fff; --inkt:#2D2622; --tekst:#5A4F48;
  --kop:"Fredoka", system-ui, sans-serif; --body:"Poppins", system-ui, sans-serif; --hand:"Caveat", cursive;
  --rond:28px; --breed:1200px;
}
*{box-sizing:border-box;margin:0}
.lz-main,.lz-main *,.kop,.kop *,.paneel,.paneel *,.voet,.voet *,.lz-cookies,.lz-cookies *{padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--tekst);background:var(--wit);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
.lz-main img,.voet img,.kop img,.paneel img{display:block;max-width:100%;height:auto}
:where(.lz-main,.voet) a{color:inherit}
.lz-main h1,.lz-main h2,.lz-main h3,.voet h3{font-family:var(--kop);color:var(--inkt);line-height:1.08;font-weight:600}
.lz-wrap{max-width:var(--breed);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Knoppen ---------- */
.knop{display:inline-flex;align-items:center;gap:10px;font-family:var(--kop);font-weight:600;font-size:19px;text-decoration:none;
  background:var(--oranje);color:#fff;padding:15px 30px;border-radius:999px;box-shadow:0 5px 0 var(--oranje-donker);
  transition:transform .15s ease, box-shadow .15s ease;border:0;cursor:pointer}
.knop:hover,.knop:focus-visible{background:var(--oranje);color:#fff;transform:translateY(2px);box-shadow:0 3px 0 var(--oranje-donker)}
.knop:active{transform:translateY(5px);box-shadow:0 0 0 var(--oranje-donker)}
.knop--pijl::after{content:"";flex:none;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.knop--klein{font-size:16px;padding:10px 20px;box-shadow:0 4px 0 var(--oranje-donker)}
.knop--wit{background:#fff;color:var(--inkt);box-shadow:0 5px 0 rgba(45,38,34,.18)}
.knop--wit:hover,.knop--wit:focus-visible{background:#fff;color:var(--inkt);box-shadow:0 3px 0 rgba(45,38,34,.18)}
.linkje{font-family:var(--kop);font-weight:600;color:var(--inkt);text-decoration:none;border-bottom:3px solid var(--geel);padding-bottom:2px}
.linkje:hover{border-color:var(--oranje)}

/* Streepjes rond de knop */
.spetter{position:relative;display:inline-block}
.spetter i{position:absolute;width:4px;height:14px;border-radius:4px;background:var(--oranje);opacity:.9;animation:spat 2.4s ease-in-out infinite}
.spetter i:nth-of-type(1){left:-22px;top:6px;transform:rotate(-55deg)}
.spetter i:nth-of-type(2){left:-28px;top:22px;transform:rotate(-90deg);animation-delay:.15s}
.spetter i:nth-of-type(3){left:-22px;top:38px;transform:rotate(-125deg);animation-delay:.3s}
.spetter i:nth-of-type(4){right:-22px;top:6px;transform:rotate(55deg);animation-delay:.1s}
.spetter i:nth-of-type(5){right:-28px;top:22px;transform:rotate(90deg);animation-delay:.25s}
.spetter i:nth-of-type(6){right:-22px;top:38px;transform:rotate(125deg);animation-delay:.4s}
@keyframes spat{0%,60%,100%{scale:1 1;opacity:.9}30%{scale:1 .45;opacity:.35}}

/* ---------- Header ---------- */
.kop{position:fixed;top:0;left:0;right:0;z-index:20;background:transparent;transition:background .25s, box-shadow .25s}
.kop.vast{background:rgba(255,247,235,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(45,38,34,.07)}
.kop__logo{display:block}
.kop__logo .logo-wit{display:none}
.kop .lz-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.kop__logo .kop__logoimg{width:118px;height:auto}
.kop nav ul{display:flex;gap:30px;list-style:none;align-items:center}
.kop nav a{font-family:var(--kop);font-weight:500;font-size:17px;color:var(--inkt);text-decoration:none;position:relative}
.kop nav a.knop,.kop nav a.knop:hover,.kop nav a.knop:focus-visible{color:#fff;font-weight:600}
.kop nav a:not(.knop)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:var(--oranje);transform:scaleX(0);transition:transform .2s}
.kop nav a:not(.knop):hover::after,.kop nav a[aria-current]::after{transform:scaleX(1)}
.kop__menu{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.kop__menu span{display:block;width:26px;height:3px;border-radius:3px;background:var(--inkt);margin:5px auto;transition:.2s}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--creme);overflow:hidden;padding:160px 0 140px}
.hoek{position:absolute;border-radius:50%;z-index:0}
/* Oranje vlak hangt achter het logo: op smalle schermen valt het in de hoek, op brede schermen blijft het achter het logo */
.hoek--1{width:300px;height:300px;background:var(--oranje);top:-190px;left:calc(max(24px, (100vw - 1200px) / 2 + 24px) + 59px - 150px)}
.hoek--2{width:340px;height:340px;background:var(--geel);top:-170px;right:-170px}
.hoek--3{width:260px;height:260px;background:var(--groen);bottom:-40px;left:-130px}
.hoek--4{width:280px;height:280px;background:var(--blauw);bottom:-30px;right:-140px}
.hero .lz-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(44px,6vw,76px);margin:0 0 40px;letter-spacing:-.01em}
.hero h1 .krul{position:relative;white-space:nowrap;color:var(--oranje)}
.hero h1 .krul svg{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:18px}
.hero .intro{font-size:19px;max-width:480px;margin-bottom:36px}
.hero__acties{display:flex;align-items:center;gap:64px;flex-wrap:wrap}
.hero__vertrouwen{display:flex;gap:22px;flex-wrap:wrap;margin-top:44px;font-weight:500;font-size:14.5px;color:var(--inkt)}
.hero__punt{display:inline-flex;align-items:center;gap:8px}
.hero__punt svg{width:22px;height:22px;flex:none}

.sticker{position:absolute;left:0;bottom:12%;width:118px;height:118px;border-radius:50%;background:var(--roze);color:#fff;display:grid;place-items:center;text-align:center;
  font-family:var(--kop);font-weight:600;line-height:1;transform:rotate(-12deg);box-shadow:0 6px 0 rgba(0,0,0,.08)}
.sticker strong{display:block;font-size:40px}
.sticker small{font-size:16px}
.plopje{position:absolute;z-index:0;animation:dobber 5s ease-in-out infinite}
.plopje--lang{width:30px;height:62px}
.plopje--kort{width:35px;height:48px}
.plopje--boog{width:56px;height:41px}
.plopje--enkel{width:31px;height:42px}
@keyframes dobber{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(calc(var(--r,0deg) + 10deg))}}
.golf{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;z-index:2;color:#fff}

/* ---------- Secties ---------- */
.lz-main section{position:relative}
.sectie{padding:100px 0}
.sectie--creme{background:var(--creme)}
.kopje{text-align:center;max-width:720px;margin:0 auto 56px}
.kopje h2{font-size:clamp(34px,4.2vw,52px);margin-bottom:16px}
.kopje p{font-size:18px}
.bovenlabel{font-family:var(--hand);font-size:28px;color:var(--oranje);display:block;margin-bottom:4px;transform:rotate(-2deg)}

/* Intro + USP's */
.intro2{display:grid;grid-template-columns:1fr 1fr;gap:28px 56px;max-width:980px;margin:0 auto 64px}
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.usp{border-radius:var(--rond);padding:34px 24px 30px;text-align:center;transition:transform .25s ease}
.usp:hover{transform:translateY(-6px) rotate(-1deg)}
.usp:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
.usp__icoon{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 5px 0 rgba(0,0,0,.08)}
.usp__icoon svg{width:36px;height:36px;color:#fff}
.usp h3{font-size:23px;margin-bottom:8px}
.usp p{font-size:15.5px;line-height:1.5}
.usp--geel{background:var(--geel-zacht)} .usp--geel .usp__icoon{background:var(--geel)}
.usp--groen{background:var(--groen-zacht)} .usp--groen .usp__icoon{background:var(--groen)}
.usp--roze{background:var(--roze-zacht)} .usp--roze .usp__icoon{background:var(--roze)}
.usp--blauw{background:var(--blauw-zacht)} .usp--blauw .usp__icoon{background:var(--blauw)}

/* Stappen */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:stap}
.stap{background:#fff;border-radius:var(--rond);padding:38px 30px 34px;position:relative;box-shadow:0 6px 0 rgba(45,38,34,.05)}
.stap__nr{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-family:var(--kop);font-weight:700;font-size:26px;color:#fff;margin-bottom:20px;transform:rotate(-6deg)}
.stap:nth-child(1) .stap__nr{background:var(--oranje)}
.stap:nth-child(2) .stap__nr{background:var(--groen);transform:rotate(5deg)}
.stap:nth-child(3) .stap__nr{background:var(--blauw)}
.stap h3{font-size:25px;margin-bottom:10px}
.stap:not(:last-child)::after{content:"";position:absolute;top:58px;right:-34px;width:42px;height:20px;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 20' fill='none' stroke='%232D2622' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c10-8 22-8 34-2'/%3E%3Cpath d='M30 4l7 6-8 4'/%3E%3C/svg%3E") no-repeat center/contain}

/* Sets */
.inelke{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin:-24px auto 44px;max-width:1100px}
.inelke__titel{width:100%;text-align:center;font-family:var(--hand);font-size:26px;color:var(--inkt);margin-bottom:2px}
.inelke span{display:inline-flex;align-items:center;gap:10px;background:var(--creme);border-radius:999px;padding:7px 18px 7px 7px;font-weight:700;font-size:15px;color:var(--inkt)}
.inelke span i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.inelke span svg{width:17px;height:17px;color:#fff}
.sets{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.set{border-radius:36px;padding:40px 44px 40px;display:flex;flex-direction:column;background:var(--creme);border:3px solid var(--creme)}
.set--straks{background:#fff;border:3px dashed rgba(45,38,34,.16)}
.set__beeld{position:relative;display:grid;place-items:center;aspect-ratio:5/4;margin-bottom:26px}
.set__beeld::before{content:"";position:absolute;height:92%;aspect-ratio:1;border-radius:50%;background:var(--geel)}
.set--straks .set__beeld::before{background:var(--blauw-zacht)}
.set__beeld .set__foto{position:relative;width:88%}
.set--straks .set__beeld .set__foto{opacity:.5;filter:grayscale(.55)}
.set__beeld .sticker{left:auto;right:4%;top:2%;bottom:auto;background:var(--blauw);transform:rotate(10deg);width:104px;height:104px}
.set--straks .set__beeld .sticker{background:var(--roze)}
.set__label{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--inkt);background:#fff;border-radius:999px;padding:6px 14px}
.set--straks .set__label{background:var(--oranje-zacht)}
.set__label i{width:9px;height:9px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 4px var(--groen-zacht)}
.set--straks .set__label i{background:var(--oranje);box-shadow:0 0 0 4px #fff;animation:knipper 1.6s ease-in-out infinite}
@keyframes knipper{50%{opacity:.3}}
.set h3{font-size:clamp(28px,2.8vw,36px);margin:14px 0 10px}
.vinkjes{list-style:none;margin:20px 0 30px;display:grid;gap:12px}
.vinkjes li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--inkt)}
.vinkjes li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;margin-top:2px;
  background:var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center/16px}
.set--straks .vinkjes li::before{background-color:#C9C2BC}
.set__onder{margin-top:auto}
.knop--uit,.knop--uit:hover,.knop--uit:focus-visible{background:var(--creme);color:var(--tekst);box-shadow:none;transform:none;cursor:default}
.set__klein{margin-top:18px;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set__klein a{font-weight:700;display:inline-flex;align-items:center;gap:6px}
.set__klein svg{width:20px;height:20px;color:var(--roze)}
.zakelijk-regel{text-align:center;margin-top:34px;font-size:15px}
.zakelijk-regel a{font-weight:700}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start}
.review{border-radius:var(--rond);padding:34px 30px 30px;position:relative}
.review:nth-child(1){background:var(--oranje-zacht);transform:rotate(-1.5deg)}
.review:nth-child(2){background:var(--groen-zacht);transform:rotate(1deg) translateY(18px)}
.review:nth-child(3){background:var(--blauw-zacht);transform:rotate(-.8deg)}
.review::before{content:"";position:absolute;top:-12px;left:50%;width:76px;height:24px;margin-left:-38px;background:rgba(255,255,255,.75);border-radius:4px;transform:rotate(-3deg)}
.sterren{display:flex;gap:3px;margin-bottom:16px}
.sterren svg{width:22px;height:22px;color:var(--geel)}
.review blockquote{font-size:16.5px;color:var(--inkt);margin-bottom:18px}
.review cite{font-style:normal;font-family:var(--hand);font-size:25px;color:var(--inkt)}

/* Over */
.over{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.uitleg{position:relative;aspect-ratio:1/1;max-width:540px;width:100%;margin:0 auto}
.uitleg__vlak{position:absolute;inset:6%;border-radius:50%;background:var(--creme);border:3px dashed rgba(45,38,34,.12)}
.uitleg .uitleg__foto{position:absolute;left:50%;top:52%;width:62%;transform:translate(-50%,-50%)}
.pil{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:8px 18px 8px 8px;font-family:var(--kop);font-weight:600;font-size:16px;color:var(--inkt);line-height:1.15;box-shadow:0 5px 0 rgba(45,38,34,.07);white-space:nowrap}
.pil__icoon{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.pil__icoon svg{width:20px;height:20px;color:#fff}
.pil--1{top:6%;left:24%}
.pil--2{top:26%;right:-4%}
.pil--3{top:34%;left:-6%}
.pil--4{bottom:10%;left:-2%}
.pil--5{bottom:4%;right:2%}
.over h2{font-size:clamp(34px,4vw,50px);margin-bottom:22px}
.over p{margin-bottom:16px}
.over .handtekening{font-family:var(--hand);font-size:30px;line-height:1.2;color:var(--oranje);margin-top:8px}

/* Zakelijk */
.zakelijk{background:var(--blauw);border-radius:40px;padding:60px 64px;display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center;position:relative;overflow:hidden}
.zakelijk h2{color:#fff;font-size:clamp(30px,3.4vw,42px);margin-bottom:10px}
.zakelijk p{color:#fff;font-size:19px;font-weight:700;max-width:560px}
.zakelijk .ring{position:absolute;border-radius:50%;border:18px solid rgba(255,255,255,.35)}
.zakelijk .ring--1{width:220px;height:220px;right:-70px;top:-90px}
.zakelijk .ring--2{width:120px;height:120px;right:220px;bottom:-70px}
.zakelijk > *{position:relative}

/* Footer */
.voet{background:var(--oranje);color:#fff;margin-top:100px;position:relative}
.voet__golf{position:absolute;top:-58px;left:0;width:100%;height:60px;color:var(--oranje)}
.voet .lz-wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:40px}
.voet__logo{width:150px;margin-bottom:16px}
.voet h3{color:#fff;font-size:20px;margin-bottom:14px}
.voet ul{list-style:none;display:grid;gap:8px}
.voet a{text-decoration:none;font-weight:600}
.voet a:hover{text-decoration:underline}
.voet__onder{border-top:1px solid rgba(255,255,255,.3);font-size:14px}
.voet .voet__onder .lz-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.voet__onder ul{display:flex;gap:6px 24px;flex-wrap:wrap}
.voet__onder a{font-weight:600;opacity:.9}
.voet__onder a:hover{opacity:1}
.voet__onder i{font-style:normal;margin:0 6px;opacity:.7}

.kop:not(.vast) .logo-oranje{display:none}
.kop:not(.vast) .logo-wit{display:block}

/* ---------- Mobiel ---------- */
@media (max-width:1000px){
  .hero .lz-wrap,.over,.sets,.intro2{grid-template-columns:1fr}
  .hero{padding:130px 0 120px;text-align:center}
  .hero .intro{margin-left:auto;margin-right:auto}
  .hero__acties,.hero__vertrouwen{justify-content:center;padding-left:0}
  .usps{grid-template-columns:repeat(2,1fr)}
  .stappen,.reviews{grid-template-columns:1fr}
  .stap:not(:last-child)::after{display:none}
  .review:nth-child(2){transform:rotate(1deg)}
  .set{padding:28px 22px 32px}
  .inelke{margin-top:-30px}
  .inelke span{font-size:14px}
  .zakelijk{grid-template-columns:1fr;padding:44px 30px}
  .voet .lz-wrap{grid-template-columns:1fr 1fr}
  .voet .lz-wrap > div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  body{font-size:16px}
  .kop .lz-wrap{height:66px}
  .kop__logo .kop__logoimg{width:100px}
  .kop__menu{display:block}
  .kop nav{display:none}
  .hoek--1{width:240px;height:240px;top:-150px;left:-46px}
  .hoek--2{width:200px;height:200px;top:-100px;right:-100px}
  .hoek--3{width:160px;height:160px;left:-80px;bottom:10px}
  .hoek--4{width:170px;height:170px;right:-85px;bottom:10px}
  .plopje--desktop{display:none}
  .hero__acties{flex-direction:column;gap:22px}
  .sticker{width:92px;height:92px}
  .sticker strong{font-size:30px}
  .sticker small{font-size:13px}
  .sectie{padding:72px 0}
  .usps{gap:14px}
  .usp{padding:26px 14px 22px}
  .usp__icoon{width:60px;height:60px}
  .usp__icoon svg{width:30px;height:30px}
  .usp h3{font-size:19px}
  .usp p{display:none}
  .pil{font-size:12.5px;padding:5px 12px 5px 5px;gap:7px}
  .pil__icoon{width:28px;height:28px}
  .pil__icoon svg{width:15px;height:15px}
  .pil--2{right:-2%}
  .pil--3{left:-2%}
  .set__beeld .sticker{width:84px;height:84px}
  .voet .lz-wrap{grid-template-columns:1fr}
  .voet .voet__onder .lz-wrap{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- Subpagina's ---------- */
.paginakop{position:relative;background:var(--creme);overflow:hidden;padding:170px 0 150px;text-align:center}
.paginakop .lz-wrap{position:relative;z-index:1}
.paginakop h1{font-size:clamp(44px,5.6vw,70px);margin-bottom:18px}
.paginakop p{max-width:620px;margin:0 auto;font-size:19px}
.paginakop .hoek--3{width:220px;height:220px;bottom:-30px;left:-110px}
.paginakop .hoek--4{width:240px;height:240px;bottom:-20px;right:-120px}
.kruimel{display:flex;justify-content:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:18px;color:var(--tekst)}
.kruimel a{text-decoration:none}
.kruimel a:hover{color:var(--oranje)}
.sectie--strak{padding-top:40px}

/* Veelgestelde vragen */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border-radius:24px;margin-bottom:14px;box-shadow:0 5px 0 rgba(45,38,34,.05)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;font-family:var(--kop);font-weight:600;font-size:20px;color:var(--inkt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;transition:transform .2s;
  background:var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") no-repeat center/18px}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 26px 24px}

/* Over: tijdlijn met wat Loopzi belangrijk vindt */
.verhaal{max-width:760px;margin:0 auto;text-align:center;font-size:19px}
.verhaal p{margin-bottom:18px}
.handgeschreven{font-family:var(--hand);font-size:34px;line-height:1.2;color:var(--oranje);text-align:center;margin-top:10px}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.35fr;gap:40px;align-items:start}
.contact__info{display:grid;gap:16px}
.contactkaart{display:flex;gap:18px;align-items:flex-start;background:var(--creme);border-radius:28px;padding:26px 28px;text-decoration:none;transition:transform .2s}
a.contactkaart:hover{transform:translateY(-3px)}
.contactkaart > i{flex:none;width:52px;height:52px;border-radius:18px;display:grid;place-items:center;transform:rotate(-6deg)}
.contactkaart > i svg{width:26px;height:26px;color:#fff}
.contactkaart h3{font-size:21px;margin-bottom:4px}
.contactkaart p{font-size:15.5px;line-height:1.5}
.contactkaart strong{color:var(--inkt)}
.formulier{background:#fff;border-radius:36px;padding:42px 44px;border:3px solid var(--creme)}
.formulier h2{font-size:34px;margin-bottom:6px}
.formulier > p{margin-bottom:26px}
.veld{margin-bottom:18px}
.veld label{display:block;font-family:var(--kop);font-weight:600;color:var(--inkt);margin-bottom:6px}
.veld input,.veld select,.veld textarea{width:100%;font:inherit;color:var(--inkt);background:var(--creme);border:2px solid transparent;border-radius:16px;padding:13px 16px;transition:border-color .2s, background .2s}
.veld textarea{min-height:150px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--oranje);background:#fff}
.velden2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.formulier__bedankt{display:none;background:var(--groen-zacht);border-radius:20px;padding:22px 24px;color:var(--inkt);font-weight:700}
.formulier.verstuurd form{display:none}
.formulier.verstuurd .formulier__bedankt{display:block}

@media (max-width:1000px){
  .contact{grid-template-columns:1fr}
}
@media (max-width:760px){
  .paginakop{padding:130px 0 120px}
  .paginakop .hoek--3{width:150px;height:150px;left:-75px}
  .paginakop .hoek--4{width:160px;height:160px;right:-80px}
  .formulier{padding:30px 22px}
  .velden2{grid-template-columns:1fr}
  .faq summary{font-size:18px;padding:18px 20px}
  .faq details p{padding:0 20px 20px}
}

/* ---------- Mobiel uitschuifpaneel ---------- */
.paneel,.paneel-achtergrond{display:none}
@media (max-width:760px){
  html.paneel-open{overflow:hidden}
  .paneel-achtergrond{display:block;position:fixed;inset:0;z-index:40;background:rgba(45,38,34,.5);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s}
  .paneel-open .paneel-achtergrond{opacity:1;visibility:visible}
  .paneel{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(86vw,360px);height:100dvh;padding:14px 24px 28px;background:var(--creme);border-radius:30px 0 0 30px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;transition:transform .34s cubic-bezier(.22,.9,.3,1), visibility .34s}
  .paneel-open .paneel{transform:none;visibility:visible;box-shadow:-12px 0 40px rgba(45,38,34,.18);transition:transform .34s cubic-bezier(.22,.9,.3,1), visibility 0s}
  .paneel__vlakken{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
  .paneel__vlak{position:absolute;border-radius:50%}
  .paneel__vlak--geel{width:150px;height:150px;top:-75px;right:-55px;background:var(--geel)}
  .paneel__vlak--groen{width:80px;height:80px;bottom:-40px;left:-40px;background:var(--groen)}
  .paneel__kop,.paneel nav,.paneel__onder{position:relative}
  .paneel__kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
  .paneel__logo img{width:100px;height:auto}
  .paneel__sluit{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--inkt);cursor:pointer;box-shadow:0 3px 0 rgba(45,38,34,.1)}
  .paneel__sluit svg{width:20px;height:20px}
  .paneel__menu{list-style:none;display:grid;gap:4px}
  .paneel__menu a{display:flex;align-items:center;justify-content:space-between;font-family:var(--kop);font-weight:600;font-size:27px;line-height:1.2;color:var(--inkt);text-decoration:none;padding:12px 0;border-bottom:2px dashed rgba(45,38,34,.1)}
  .paneel__menu a[aria-current]{color:var(--oranje)}
  .paneel__menu a[aria-current]::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--oranje)}
  .paneel__onder{margin-top:auto;padding-top:32px}
  .paneel__onder .knop{justify-content:center;width:100%}
  .paneel__contact{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:20px;font-weight:700;font-size:15px}
  .paneel__contact a{display:inline-flex;align-items:center;gap:7px;color:var(--inkt);text-decoration:none;min-height:30px}
  .paneel__contact svg{width:18px;height:18px;color:var(--oranje)}
}

/* Sfeerfoto in de hero, in een rondje */
.overfoto{position:relative;width:100%;max-width:490px;margin:0 auto}
.overfoto__beeld{position:relative;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 10px #fff, 0 0 0 24px var(--oranje-zacht)}
.overfoto__notitie{position:absolute;z-index:2;top:27%;left:-11%;display:flex;flex-direction:column;align-items:center}
.overfoto__wolk{font-family:var(--hand);font-weight:700;font-size:25px;line-height:1.02;text-align:center;color:var(--inkt);background:#fff;border-radius:16px;padding:7px 14px 9px;transform:rotate(-6deg);box-shadow:0 4px 0 rgba(45,38,34,.1)}
.overfoto__notitie svg{width:72px;height:104px;margin:2px 0 0 76px;color:#fff;filter:drop-shadow(0 1px 2px rgba(45,38,34,.7))}
@media (max-width:1000px){
  .overfoto{max-width:440px;margin-top:24px}
  .overfoto__notitie{left:-4%}
}
@media (max-width:760px){
  .overfoto{max-width:300px;margin-top:30px}
  .overfoto__beeld{box-shadow:0 0 0 7px #fff, 0 0 0 16px var(--oranje-zacht)}
  .overfoto__notitie{top:25%;left:-11%}
  .overfoto__wolk{font-size:18px;padding:5px 9px 6px;border-radius:12px}
  .overfoto__notitie svg{width:44px;height:64px;margin-left:48px}
}

/* Over Loopzi: pagina begint meteen met het verhaal */
.pagina-start{position:relative;background:var(--creme);overflow:hidden;padding:140px 0 170px}
.pagina-start .lz-wrap{position:relative;z-index:1}
.pagina-start .uitleg__vlak{background:#fff}
.pagina-start .hoek--3{width:220px;height:220px;bottom:-30px;left:-110px}
.pagina-start .hoek--4{width:240px;height:240px;bottom:-20px;right:-120px}
.over .over__logo{margin:6px 0 24px;line-height:0}
.over__logo img{width:210px;height:auto}
.set__klein a + a{margin-left:10px}
.set__klein a svg + *{margin:0}
@media (max-width:760px){
  .pagina-start{padding:110px 0 170px}
  .paginakop .plopje{display:none}
  .pagina-start .hoek--3{width:130px;height:130px;left:-65px;bottom:10px}
  .pagina-start .hoek--4{width:140px;height:140px;right:-70px;bottom:10px}
  .over__logo img{width:170px}
}

/* Zakelijk blok direct na een gekleurde sectie: ruimte ertussen */
.sectie--creme + #zakelijk{margin-top:100px}
@media (max-width:760px){
  .sectie--creme + #zakelijk{margin-top:72px}
}

/* Speeltips */
.stappen__meer{text-align:center;margin-top:40px}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.tip{display:flex;flex-direction:column;border-radius:32px;overflow:hidden}
.tip .tip__foto{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.tip__tekst{padding:26px 30px 30px;flex:1}
.tip h3{font-size:26px;margin-bottom:8px}
.tip--oranje{background:var(--oranje-zacht)}
.tip--blauw{background:var(--blauw-zacht)}
.tip--geel{background:var(--geel-zacht)}
.tip--groen{background:var(--groen-zacht)}
.video-blok{display:grid;grid-template-columns:1fr 320px;gap:70px;align-items:center;max-width:980px}
.video-blok h2{font-size:clamp(32px,3.8vw,46px);margin-bottom:18px}
.video-blok__volg{margin-top:16px}
.video-blok__volg a{font-weight:600;display:inline-flex;align-items:center;gap:5px;vertical-align:bottom}
.video-blok__volg svg{width:18px;height:18px;color:var(--oranje)}
.video{border-radius:30px;overflow:hidden;background:#000;box-shadow:0 0 0 8px #fff, 0 16px 34px rgba(45,38,34,.18);line-height:0}
.video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
/* Menu met vijf items blijft passen tot het uitschuifpaneel begint */
@media (max-width:920px){
  .kop nav{gap:18px}
  .kop nav ul{gap:18px}
  .kop nav a{font-size:16px}
  .kop nav a.knop{font-size:15px;padding:9px 16px}
}
@media (max-width:760px){
  .tips{grid-template-columns:1fr;gap:22px}
  .tip__tekst{padding:20px 22px 24px}
  .tip h3{font-size:23px}
  .video-blok{grid-template-columns:1fr;gap:40px}
  .video{max-width:290px;width:100%;margin:0 auto}
}

/* Speeltips op de homepage */
.tipkaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tipkaart{display:block;border-radius:26px;overflow:hidden;text-decoration:none;transition:transform .25s ease}
.tipkaart:hover{transform:translateY(-6px) rotate(-1deg)}
.tipkaart:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
.tipkaart .tip__foto{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.tipkaart h3{font-size:20px;padding:16px 18px 18px}
.tipkaarten__knop{text-align:center;margin-top:44px}
@media (max-width:1000px){
  .tipkaarten{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .tipkaarten{gap:14px}
  .tipkaart{border-radius:20px}
  .tipkaart h3{font-size:17px;padding:12px 13px 14px}
}

/* Laatste sectie gekleurd: kleur loopt door tot aan de golf van de footer */
main:has(> section.sectie--creme:last-child) + .voet{margin-top:0}
main > section.sectie--creme:last-child{padding-bottom:160px}
@media (max-width:760px){
  main > section.sectie--creme:last-child{padding-bottom:120px}
}

/* De Plopper links naast de kop raakt op smallere schermen de tekst */
@media (max-width:1300px){
  .plopje--breed{display:none}
}

/* Mobiel: Ploppers op vrije plekken in de hero, anders vallen ze achter de foto */
@media (max-width:760px){
  .hero .plopje--enkel{top:26px !important;left:53% !important}
  .hero .plopje--boog{top:428px;left:4%;right:auto;width:50px;height:37px}
}

/* Tablet: geen vrije plek voor Ploppers rond de kop */
@media (min-width:761px) and (max-width:1000px){
  .hero .plopje{display:none}
}

/* Paarse Plopper rechts in het midden van de hero */
.hero .plopje--boog{top:42%;right:1.5%}
@media (min-width:1001px) and (max-width:1340px){
  .hero .plopje--boog{display:none}
}
@media (max-width:760px){
  .hero .plopje--boog{top:428px;left:4%;right:auto}
}

/* Footer: logo's van social media in plaats van de naam */
.voet__sociaal{display:inline-flex;align-items:center;gap:9px}
.voet__sociaal svg{width:22px;height:22px;flex:none}

/* Wolkje uit de branding: notitie in de hero */
.overfoto__notitie{top:25%;left:-15%}
.overfoto__wolk{display:grid;place-items:center;width:208px;height:151px;padding:6px 18px 0;background:url("../img/loopzi-wolkje-wit.svg") center/100% 100% no-repeat;border-radius:0;box-shadow:none;font-size:24px;filter:drop-shadow(0 4px 0 rgba(45,38,34,.1))}
.overfoto__wolk{position:relative;z-index:1}
.overfoto__notitie svg{position:relative;z-index:0;margin-top:-46px}
@media (max-width:1000px){
  .overfoto__notitie{left:-8%}
}
@media (max-width:760px){
  .overfoto__notitie{top:23%;left:-13%}
  .overfoto__wolk{width:142px;height:103px;padding:4px 12px 0;background:url("../img/loopzi-wolkje-wit.svg") center/100% 100% no-repeat;font-size:17px;border-radius:0}
  .overfoto__notitie svg{margin-top:-30px}
}


/* USP-labels als wolkjes uit de branding; icoon en tekst samen iets boven het midden */
.uitleg .uitleg__vlak{background:#FFE9D2;border:0}
.uitleg .pil{display:grid;justify-items:center;align-content:center;gap:5px;width:178px;height:129px;padding:0 24px 22px;text-align:center;white-space:normal;font-size:14.5px;line-height:1.1;background:url("../img/loopzi-wolkje-wit.svg") center/100% 100% no-repeat;border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 6px rgba(45,38,34,.16))}
.uitleg .pil__icoon{width:30px;height:30px}
.uitleg .pil__icoon svg{width:17px;height:17px}
.uitleg .pil--1{top:-3%;left:33%}
.uitleg .pil--2{top:17%;right:-9%}
.uitleg .pil--3{top:27%;left:-10%}
.uitleg .pil--4{bottom:2%;left:-6%}
.uitleg .pil--5{bottom:-2%;right:0}
@media (max-width:760px){
  .uitleg .pil{width:116px;height:84px;padding:0 14px 15px;gap:3px;font-size:10.5px}
  .uitleg .pil__icoon{width:20px;height:20px}
  .uitleg .pil__icoon svg{width:12px;height:12px}
  .uitleg .pil--1{top:-3%;left:33%}
  .uitleg .pil--2{top:17%;right:-5%}
  .uitleg .pil--3{top:27%;left:-5%}
  .uitleg .pil--4{bottom:2%;left:-4%}
  .uitleg .pil--5{bottom:-2%;right:0}
}

/* Juridische pagina's */
.juridisch{max-width:760px;margin:0 auto}
.juridisch__datum{font-size:14px;margin-bottom:8px}
.juridisch h2{font-size:clamp(25px,2.6vw,30px);margin:38px 0 12px;scroll-margin-top:100px}
.juridisch h3{font-size:20px;margin:22px 0 6px}
.juridisch p{margin-bottom:12px}
.juridisch ul{margin:0 0 14px 20px}
.juridisch li{margin-bottom:6px}
.juridisch a{color:var(--inkt);font-weight:600}
.juridisch mark{background:var(--geel-zacht);color:var(--inkt);border-radius:5px;padding:1px 5px}

/* ---------- WordPress-thema ---------- */
.admin-bar .kop{top:32px}
.admin-bar .paneel{top:32px;height:calc(100dvh - 32px)}
@media (max-width:782px){
  .admin-bar .kop{top:46px}
  .admin-bar .paneel{top:46px;height:calc(100dvh - 46px)}
}
/* Pencilino zet om beheerde inhoud altijd een div, ook voor bezoekers */
@media (min-width:761px){
  .kop nav{display:flex;align-items:center;gap:30px}
}
.kop nav .pencil-managed-region{display:block}
.kop nav li{list-style:none}
.paneel__menu{list-style:none}
.voet ul{margin:0}
.voet__sociaal{color:inherit}
.set__klein .pencil-managed-region{display:inline-flex}
.video-blok__volg .pencil-managed-region{display:inline}
.pencil-richtext p:last-child{margin-bottom:0}
.intro2 .pencil-richtext p{margin:0}

/* Teksten met een link door de hele kaart */
.contactkaart{position:relative}
.contactkaart__link{font-weight:700;color:var(--inkt);text-decoration:none}
.contactkaart__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.contactkaart__knop{display:inline-block;font-weight:700;color:var(--inkt);text-decoration:underline}
.contactkaart__knop::after{content:"";position:absolute;inset:0;border-radius:inherit}
.contactkaart:has(.contactkaart__link):hover,.contactkaart:has(.contactkaart__knop):hover{transform:translateY(-3px)}
.contactkaart{transition:transform .2s}

/* Formulieren */
.lz-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.formulier__hp{position:absolute;left:-9999px}
.formulier__melding{margin-top:14px}
.formulier__melding--ok{display:block;background:var(--groen-zacht);border-radius:20px;padding:22px 24px;color:var(--inkt);font-weight:600}
.formulier__melding--fout{color:#c0392b;font-weight:600}
.formulier__melding[hidden]{display:none}
.knop:disabled{opacity:.6;cursor:wait}

/* Cookiemelding */
.lz-cookies{position:fixed;left:24px;bottom:24px;z-index:60;width:min(440px,calc(100vw - 48px))}
.lz-cookies[hidden]{display:none}
.lz-cookies__kaart{padding:26px 26px 22px;border-radius:26px;background:#fff;box-shadow:0 14px 44px rgba(45,38,34,.22);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.lz-cookies.is-open .lz-cookies__kaart{opacity:1;transform:none}
.lz-cookies__titel{margin-bottom:8px;font-family:var(--kop);font-size:22px;font-weight:600;line-height:1.2;color:var(--inkt)}
.lz-cookies__tekst{font-size:14px;line-height:1.6}
.lz-cookies__voorkeuren{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(45,38,34,.1)}
.lz-cookies__voorkeuren[hidden]{display:none}
.lz-cookies__optie{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;cursor:pointer}
.lz-cookies__optie input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--oranje)}
.lz-cookies__knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.lz-cookies__knoppen .knop{font-size:15px;padding:10px 18px;box-shadow:0 3px 0 var(--oranje-donker)}
.lz-cookies__knoppen .knop--wit{background:var(--creme);box-shadow:none}
.lz-cookies__links{display:flex;gap:16px;margin-top:14px;font-size:13px}
.lz-cookies__link{background:none;border:0;color:var(--tekst);font:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:760px){
  /* Mobiel: in het midden met een lichte achtergrond; de pagina scrolt niet mee zolang de melding open staat */
  .lz-cookies{inset:0;width:auto;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(45,38,34,.2)}
  .lz-cookies__kaart{width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:22px 20px 20px}
  html:has(.lz-cookies:not([hidden])){overflow:hidden}
  html:has(.lz-cookies:not([hidden])) body{overflow:hidden}
}

/* Skiplink en 404 */
.lz-skip{position:absolute;left:-9999px;top:0;z-index:70;background:#fff;padding:10px 16px;border-radius:0 0 12px 0}
.lz-skip:focus{left:0}

/* Aanvullingen op het ontwerp voor de thema-opmaak */
.over__link{margin-top:26px}
.verhaal__knop{margin-top:30px}
.video-blok + .video-blok{margin-top:80px}
.video-blok{margin-left:auto;margin-right:auto}
.video-blok--om > :first-child{order:2}
.video-blok__knop{margin-top:30px;padding-left:28px}
.video-blok__volg a{margin:0 2px}
.video-blok__leeg{text-align:center}
.formulier__intro{margin-bottom:26px}
.paginakop__knop{margin-top:26px}
.pil__tekst{line-height:1.1}
.set__klein span{display:inline}
.voet__onder i{font-style:normal}
.juridisch mark{white-space:normal}
.kop__lijst{list-style:none}
@media (max-width:760px){
  .video-blok--om > :first-child{order:0}
  .video-blok__knop{padding-left:28px}
}
.knop[hidden]{display:none}
.video-blok{max-width:932px}
.verhaal .pencil-richtext{margin-bottom:18px}

/* Speeltips: zes kaarten in drie kolommen */
.tips{grid-template-columns:repeat(3,1fr);gap:26px}
.tip__tekst{padding:22px 24px 26px}
.tip h3{font-size:22px}
.tip--roze{background:var(--roze-zacht)}
@media (max-width:1000px){
  .tips{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .tips{grid-template-columns:1fr;gap:22px}
}
.voet__regel .pencil-managed-region{display:inline}

/* Oranje titelregel altijd op een eigen regel, zodat de gele streep precies zo breed is als de tekst */
.hero h1 .krul{display:table}
@media (max-width:1000px){
  .hero h1{font-size:clamp(34px,11.2vw,64px)}
  .hero h1 .krul{margin-left:auto;margin-right:auto}
}

/* Lange titels (Privacyverklaring) passen ook op een smal scherm */
@media (max-width:760px){
  .paginakop h1{font-size:clamp(28px,9.4vw,60px);overflow-wrap:break-word}
}
.lz-main{overflow-x:clip}

/* Mobiel: Website door pimvdhurk.nl op een eigen regel */
@media (max-width:760px){
  .voet__scheiding--maker{display:none}
  .voet__maker{display:block;margin-top:4px}
}