:root{interpolate-size:allow-keywords}
.vraag::details-content{block-size:0;overflow:hidden;content-visibility:hidden;transition:block-size .34s cubic-bezier(.4,0,.2,1),content-visibility .34s allow-discrete}
.vraag[open]::details-content{block-size:auto;content-visibility:visible}
@media (prefers-reduced-motion:reduce){.vraag::details-content{transition:none}}

:root{
  --teal:#075357; --sea:#4d9b88; --mint:#6DC1AC; --mint2:#85cebc; --sun:#fdae15;
  --ink:#075357; --txt:#335a5d; --muted:#5f7f7d; --line:#d9e9e5; --tint:#eef7f4; --grey:#f5f5f5; --white:#fff;
;--wrap:1280px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;
  /* De header is sticky. Zonder deze marge landt een ankersprong met de kop
     achter de balk. 62px is de hoogte van .topbar.klein (styles.css:322),
     want bij aankomst is de balk altijd al geslonken. */
  scroll-padding-top:66px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:Inter,system-ui,sans-serif;color:var(--txt);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.num,.brand{font-family:Comfortaa,Inter,sans-serif;color:var(--ink);line-height:1.15;font-weight:700}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:600;font-size:16px;transition:background .15s,transform .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-sun{background:var(--sun);color:#fff}.btn-sun:hover{background:#e99d0a}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{background:#04403f}
.btn-line{box-shadow:inset 0 0 0 2px var(--sea);color:var(--teal)}.btn-line:hover{background:var(--tint)}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:92px;gap:20px}
.topbar img{height:62px;width:auto}
nav{display:flex;gap:22px;font-weight:500;font-size:15px;color:var(--txt);white-space:nowrap}
nav a:hover{color:var(--sea)}
nav .dd::after{content:"";display:inline-block;margin-left:6px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.topbar .right{display:flex;align-items:center;gap:18px;white-space:nowrap}
.topbar .tel{font-weight:700;color:var(--teal)}
.topbar .btn{padding:12px 20px;font-size:15px}
section{padding:96px 0}
.kicker{color:var(--sea);font-weight:600;font-size:15px;margin-bottom:12px}
.h2{font-size:clamp(28px,3.4vw,40px);max-width:760px}
.h2 + p{color:var(--muted);font-size:18px;max-width:600px;margin-top:14px}
/* logos */
.logos{background:var(--grey);border-bottom:1px solid var(--line)}
.logos .wrap{display:flex;align-items:center;gap:30px;padding:20px 28px;flex-wrap:wrap;justify-content:space-between}
.logos p{font-size:13px;color:var(--muted);font-weight:600}
.logos .row{display:flex;gap:30px;flex-wrap:wrap}
.logos .row span{font-family:Comfortaa;font-weight:700;font-size:16px;color:#9fb9b4}
/* three numbers */
.reasons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;margin-top:56px}
.reason .num{font-size:64px;line-height:1;color:var(--sea)}
.reason .num small{font-family:Inter;font-size:17px;font-weight:600;color:var(--muted);margin-left:8px}
.reason h3{font-size:20px;margin:16px 0 8px}
.reason p{color:var(--muted);font-size:15px}
/* compare */
.compare{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.compare > div{padding:36px}
.compare .them{background:var(--grey);color:var(--muted)}
.compare .us{background:var(--teal);color:#fff}
.compare h3{font-size:19px;margin-bottom:22px}.compare .us h3{color:#fff}
.compare ul{list-style:none;display:grid;gap:14px;font-size:15.5px}
.compare li{padding-left:30px;position:relative}
.compare .them li::before{content:"\00d7";position:absolute;left:0;top:-3px;font-size:20px;color:#c0504f}
.compare .us li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--mint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075357' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:11px;background-repeat:no-repeat;background-position:center}
/* day */
.day{background:var(--tint)}
.day .wrap{display:grid;grid-template-columns:1fr 1.7fr;gap:56px;align-items:start}
.day .ph img{border-radius:22px;width:100%;object-fit:cover;aspect-ratio:4/5;object-position:50% 22%}
.tl{display:grid;gap:12px;margin-top:8px}
.tl > div{background:#fff;border-radius:16px;padding:18px 22px;display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start;border:1px solid rgba(7,83,87,.08)}
.tl time{font-family:Comfortaa;font-weight:700;color:var(--sea);font-size:17px;white-space:nowrap}
.tl h3{font-size:16px;margin-bottom:4px}
.tl p{font-size:14px;color:var(--muted)}
.tl > div.brk{background:transparent;border:1px dashed var(--mint2)}
/* plans */
.dark{background:var(--teal);color:#fff}
.dark .kicker{color:var(--mint)}
.dark .h2{color:#fff}.dark .h2 + p{color:#b8d9d1}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.plan{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:30px;display:flex;flex-direction:column}
.plan h3{font-size:21px;margin-bottom:6px;color:#fff}
.plan.featured{background:#fff;color:var(--txt);transform:translateY(-10px)}
.plan.featured h3{color:var(--ink)}
.plan .for{font-size:14px;opacity:.8;margin-bottom:22px}
.plan .price{font-family:Comfortaa;font-size:25px;font-weight:700;line-height:1.2}
.plan.featured .price{color:var(--teal)}
.plan .price small{font-family:Inter;font-size:14px;font-weight:400;opacity:.75;margin-left:6px;white-space:nowrap}
.plan ul{list-style:none;margin:22px 0 26px;display:grid;gap:10px;font-size:15px;flex:1}
.plan ul li{padding-left:22px;position:relative}
.plan ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--mint)}
.plan .btn{width:100%}
.plan.featured .btn{background:var(--sun);color:#fff}
.plan:not(.featured) .btn{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px}
.step .n{width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--teal);font-family:Comfortaa;font-weight:700;display:grid;place-items:center;margin-bottom:20px}
.step h3{font-size:19px;margin-bottom:10px}
.step p{color:var(--muted);font-size:15px}
/* quote + stats */
.quote{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.quote blockquote{font-family:Comfortaa;font-size:clamp(22px,2.5vw,30px);font-weight:700;color:var(--ink);line-height:1.3}
.quote cite{display:block;font-style:normal;margin-top:22px;color:var(--muted);font-size:15px}
.quote cite b{color:var(--ink)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{background:var(--tint);border-radius:18px;padding:26px}
.stat .num{font-size:38px;color:var(--sea);display:block;line-height:1.1}
.stat span{font-size:14px;color:var(--muted)}
/* testimonials */
.quotes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:50px}
.q{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.q p{font-size:16.5px;font-weight:500;color:var(--ink);line-height:1.45}
.q cite{display:block;margin-top:18px;font-style:normal;color:var(--muted);font-size:14px}
.q .logoph{height:22px;width:96px;background:var(--grey);border-radius:4px;margin-bottom:18px;font-size:10px;color:#9fb9b4;display:grid;place-items:center}
/* big quote */
.bigq{text-align:center;max-width:900px;margin:0 auto}
.bigq blockquote{font-family:Comfortaa;font-size:clamp(24px,3vw,36px);font-weight:700;color:var(--ink);line-height:1.25}
.bigq cite{display:block;margin-top:26px;font-style:normal;color:var(--muted);font-size:16px}
/* faq */
.faq{max-width:760px;margin-top:30px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-weight:600;font-size:17px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sea);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--muted);margin-top:12px;font-size:16px;max-width:640px}
/* banner cta */
.banner{background:var(--teal);color:#fff;text-align:center;padding:90px 0}
.banner h2{font-size:clamp(28px,3.6vw,46px);color:#fff;max-width:760px;margin:0 auto 16px}
.banner p{color:#b8d9d1;font-size:18px;max-width:560px;margin:0 auto 32px}
.banner .btn{margin:6px}
/* form */
.formsec{background:var(--tint)}
.formsec .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.formsec .h2 + p{max-width:440px}
.formsec .contact{margin-top:28px;font-size:16px}
.formsec .contact b{color:var(--ink)}
.formcard{background:#fff;border-radius:22px;padding:32px;box-shadow:0 20px 50px rgba(7,83,87,.08)}
.formcard h3{font-size:20px;margin-bottom:6px}
.formcard .sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.formcard .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.formcard input,.formcard select,.formcard textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:#fff;color:var(--txt)}
.formcard textarea{min-height:90px;margin-bottom:12px;resize:vertical}
.formcard .btn{width:100%}
.formcard small{display:block;text-align:center;color:var(--muted);font-size:12px;margin-top:10px}
/* note, footer */
.small-note{padding:34px 0;font-size:15px;color:var(--muted);border-top:1px solid var(--line)}
.small-note .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
.small-note a{color:var(--sea);font-weight:600}
footer{background:var(--teal);color:#b8d9d1;padding:60px 0 30px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
footer h4{color:#fff;margin-bottom:14px;font-size:15px}
footer ul{list-style:none;display:grid;gap:8px}
footer .lg{background:#fff;display:inline-block;padding:10px 14px;border-radius:10px;margin-bottom:16px}
footer .lg img{height:44px}
footer .copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;margin-top:22px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.mobilebar{display:none}
@media (max-width:920px){
  nav,.topbar .tel{display:none}
  .topbar img{height:42px}
  .compare,.day .wrap,.quote,.formsec .wrap,footer .wrap,.reasons,.plans,.steps,.quotes{grid-template-columns:1fr}
  .plan.featured{transform:none}
  section{padding:64px 0}
  .tl div{grid-template-columns:1fr}
  /* De vaste balk met Bel en Voorstel aanvragen onderin staat uit (Ralf,
     19-10-2026): hij nam een zevende van het scherm en zat over de tekst.
     Beide knoppen staan nu onderaan het hamburgermenu (.mm-knoppen). */
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.hero{padding:64px 0 30px;background:linear-gradient(180deg,var(--tint),#fff 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(36px,4.8vw,58px);margin-bottom:22px}
.hero .lead{font-size:19px;color:var(--muted);max-width:520px;margin-bottom:32px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .badges{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap}
.hero .badges span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500;color:var(--muted)}
.portrait{position:relative}
.portrait img{width:100%;border-radius:28px 28px 28px 110px;object-fit:cover;aspect-ratio:1/1.05;object-position:20% 30%}
.portrait .card{position:absolute;right:-8px;bottom:26px;background:#fff;border-radius:18px;padding:18px 20px;box-shadow:0 20px 50px rgba(7,83,87,.18);width:272px}
.portrait .card .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.portrait .card .av{width:44px;height:44px;border-radius:50%;background:var(--teal);flex:0 0 44px}
.portrait .card b{display:block;font-size:15px;color:var(--ink)}
.portrait .card small{color:var(--muted);font-size:12px}
.portrait .card .slot{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-top:1px solid var(--line)}
.portrait .card .slot em{font-style:normal;color:#1a7f4b;font-weight:600}
.regio{padding:40px 0 20px}
.regio .box{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px 36px;display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center;box-shadow:0 20px 60px rgba(7,83,87,.07)}
.regio h2{font-size:26px;margin-bottom:8px}
.regio p{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{padding:12px 18px;border-radius:12px;border:1px solid var(--line);font-weight:500;font-size:15px;color:var(--ink);display:flex;gap:10px;align-items:center}
.chips button i{width:9px;height:9px;border-radius:50%;background:#2fb46f}
.chips button.busy i{background:var(--sun)}
.chips button:hover{border-color:var(--sea)}
.chips .legend{width:100%;font-size:12px;color:var(--muted);margin-top:6px}
@media (max-width:920px){.hero .wrap,.regio .box{grid-template-columns:1fr}.portrait .card{right:12px;width:240px}}

.planner{background:#fff;color:var(--txt);border-radius:24px;padding:30px;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.planner h2{font-size:21px;margin-bottom:6px}
.planner .sub{color:var(--muted);font-size:14px;margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:8px;color:var(--ink)}
.seg{display:flex;background:var(--grey);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;padding:11px 8px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--teal);color:#fff}
.field input[type=range]{width:100%;accent-color:var(--teal)}
.field .val{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.field .val b{color:var(--teal);font-size:15px}
.result{background:var(--tint);border-radius:14px;padding:16px 18px;margin:8px 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result small{display:block;color:var(--muted);font-size:12px}
.result b{font-family:Comfortaa;font-size:22px;color:var(--teal);display:block;line-height:1.2}
.advice{font-size:13px;color:var(--txt);background:#fff7e3;border:1px solid #ffe4a8;border-radius:10px;padding:10px 14px;margin-bottom:18px}
.planner .btn{width:100%}
.planner .foot{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}
.plansec{background:var(--teal);color:#fff;position:relative;overflow:hidden;padding:90px 0}
.plansec::before{content:"";position:absolute;right:-10vw;top:-30%;width:60vw;height:160%;border-radius:50%;background:radial-gradient(closest-side,rgba(133,206,188,.35),transparent 70%)}
.plansec .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.plansec .kicker{color:var(--mint)}
.plansec .h2{color:#fff;font-size:clamp(30px,3.6vw,44px)}
.plansec .h2 + p{color:#d1e9e3}
.plansec .proof{margin-top:38px;display:flex;gap:34px;flex-wrap:wrap;color:#cfe6e0;font-size:14px}
.plansec .proof b{display:block;font-family:Comfortaa;color:#fff;font-size:24px}
.chips button{padding:12px 18px;border-radius:12px;border:1px solid var(--mint-l);font-weight:500;font-size:15px;color:var(--ink)}
.regio{padding:60px 0 20px}
@media (max-width:920px){.plansec .wrap{grid-template-columns:1fr}}

/* ---- kleurenpalet huidige website ---- */
:root{
  --teal:#075357; --ink:#075357;
  --mint:#85CEBC; --mint-d:#A7CCC4; --mint-l:#C5E6DE;
  --sun:#FDAE15; --sun-l:#FED375;
  --grey:#f2f5f6; --tint:#f0f9f7; --light:#BEBEBE;
  --txt:#4a5f5d; --muted:#7a8b89; --line:#dde6e4; --sea:#075357; --mint2:#A7CCC4;
}
body{color:var(--txt)}
.kicker{color:var(--mint);font-weight:700}
.btn-sun{background:var(--sun);color:#fff}.btn-sun:hover{background:var(--sun-l);color:var(--teal)}
.btn-line{box-shadow:inset 0 0 0 2px var(--mint);color:var(--teal)}.btn-line:hover{background:var(--tint)}
.btn-teal{background:var(--teal);color:#fff}
.topbar{border-bottom:1px solid var(--line)}
.topbar .wrap{height:116px}
.topbar img{height:84px;width:auto}
footer .lg img{height:52px}
.planner .btn{background:var(--sun);color:#fff}
.planner .seg button[aria-pressed=true]{background:var(--teal)}
.planner .result{background:var(--tint)}
.planner .advice{background:#fff7e3;border-color:var(--sun-l)}
.mobilebar .btn-teal{background:var(--teal)}
nav{color:var(--txt)} nav a:hover{color:var(--teal)}
.hero{background:linear-gradient(180deg,var(--tint) 0%,#fff 75%)}
.hero .badges span{background:#fff;border:1px solid var(--mint-l);color:var(--txt)}
.portrait .card .av{background:var(--mint)}
.portrait .card .slot{border-top:1px solid var(--line)}
.regio .box{border:1px solid var(--mint-l);box-shadow:0 20px 60px rgba(133,206,188,.18)}
.chips button{border:1px solid var(--mint-l)} .chips button:hover{border-color:var(--mint);background:var(--tint)}
.chips button i{background:#2fb46f} .chips button.busy i{background:var(--sun)}
.logos{background:var(--grey);border-bottom:1px solid var(--line)}
.logos .row span{color:var(--light)} .logos p{color:var(--muted)}
.reason .num{color:var(--mint)} .reason .num small{color:var(--muted)}
.compare{border:1px solid var(--mint-l)}
.compare .them{background:var(--grey);color:var(--muted)}
.compare .us{background:var(--mint);color:var(--teal)}
.compare .us h3{color:var(--teal)}
.compare .us li::before{background:#fff}
.day{background:var(--tint)}
.tl > div{border:1px solid var(--mint-l)}
.tl time{color:var(--mint)}
.tl > div.brk{border:1px dashed var(--mint-d);background:transparent}
.dark{background:var(--mint-l);color:var(--txt)}
.dark .kicker{color:var(--teal)} .dark .h2{color:var(--teal)} .dark .h2 + p{color:var(--txt)}
.plan{background:#fff;border:1px solid var(--mint-l);color:var(--txt)}
.plan h3{color:var(--teal)} .plan .for{color:var(--muted);opacity:1}
.plan .price{color:var(--teal)} .plan .price small{color:var(--muted);opacity:1}
.plan ul li::before{background:var(--mint)}
.plan.featured{background:var(--teal);color:#fff;border-color:var(--teal)}
.plan.featured h3,.plan.featured .price{color:#fff} .plan.featured .for,.plan.featured .price small{color:#c5e6de}
.plan.featured ul li::before{background:var(--mint)}
.plan.featured .btn{background:var(--sun);color:#fff}
.plan:not(.featured) .btn{color:var(--teal);box-shadow:inset 0 0 0 2px var(--mint)}
.plan:not(.featured) .btn:hover{background:var(--tint)}
.step{border:1px solid var(--mint-l)} .step .n{background:var(--mint-l);color:var(--teal)}
.stat{background:var(--tint);border:1px solid var(--mint-l)} .stat .num{color:var(--teal)}
.quotes .q{border:1px solid var(--mint-l)} .q .logoph{background:var(--grey);color:var(--light)}
.faq details{border-bottom:1px solid var(--line)} .faq summary::after{color:var(--mint)}
.banner{background:var(--mint);color:var(--teal)}
.banner h2{color:var(--teal)} .banner p{color:var(--teal);opacity:.85}
.banner .btn-ghost{color:var(--teal);box-shadow:inset 0 0 0 2px rgba(7,83,87,.45)}
.formsec{background:var(--tint)}
.formcard{box-shadow:0 20px 50px rgba(133,206,188,.25);border:1px solid var(--mint-l)}
.formcard input,.formcard select,.formcard textarea{border:1px solid var(--line)}
.formcard input::placeholder,.formcard textarea::placeholder{color:var(--light)}
.small-note{border-top:1px solid var(--line);color:var(--muted)} .small-note a{color:var(--teal)}
footer{background:var(--teal);color:var(--mint-l)}
footer .copy{color:var(--mint-d)}
.mobilebar{border-top:1px solid var(--line)}

/* ══════════════════════════════════════════════════════════════════
   HEADER + paginabreedte, herzien 14-9-2026
   ══════════════════════════════════════════════════════════════════ */

/* de hele pagina ~2,5 cm breder */
.wrap{max-width:var(--wrap);padding-inline:clamp(20px,3vw,36px)}

.topbar{background:#fff;border-bottom:1px solid var(--line);overflow:visible}
.topbar.klein{border-bottom-color:transparent;box-shadow:0 6px 22px -18px rgba(7,83,87,.55)}

/* ── informatiestrip ─────────────────────────────────────────────── */
.utilstrip{
  background:var(--teal);color:rgba(255,255,255,.82);
  font-size:12.5px;line-height:1.5;overflow:visible;
  height:34px;transition:height .22s ease,opacity .18s ease;
}
.topbar.klein .utilstrip{height:0;opacity:0;overflow:hidden}
.utilstrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:34px}
.utilstrip p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util-bel{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.util-bel span{color:rgba(255,255,255,.62)}
.util-bel a{
  color:#fff;text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;
  padding-left:14px;border-left:1px solid rgba(255,255,255,.22);
}
.util-bel a:hover{color:var(--mint)}

/* ── hoofdbalk ───────────────────────────────────────────────────── */
.hoofdbalk .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:74px;transition:height .22s ease}
.topbar.klein .hoofdbalk .wrap{height:62px}

.brandlink{display:flex;align-items:center;flex:0 0 auto}
.topbar img{height:42px;width:auto;transition:height .22s ease;transform:translateY(8.5%)}
.topbar.klein img{height:36px}

/* ── navigatie ───────────────────────────────────────────────────── */
/* Inter, niet Comfortaa: op 15px wordt Comfortaa rond en slap en dat is
   precies wat "niet professioneel" leest. Comfortaa blijft in het logo,
   de koppen en de knoplabels. */
nav#hoofdmenu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-left:auto;white-space:nowrap}
nav#hoofdmenu{align-self:stretch}
nav#hoofdmenu > a,
nav#hoofdmenu .dd{
  font-family:Inter,system-ui,sans-serif;
  font-size:15.5px;font-weight:500;letter-spacing:-.005em;
  color:var(--txt);text-decoration:none;
  padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;line-height:1;
  height:100%;position:relative;transition:color .15s ease;
}
/* het streepje hangt aan de TEKST, niet aan de onderkant van de balk:
   halverwege de knop min 0,85em zet hem een paar pixel onder de letters,
   en dat blijft kloppen als de balk krimpt bij het scrollen */
nav#hoofdmenu > a::after,
nav#hoofdmenu .dd::before{
  content:"";position:absolute;left:0;right:0;bottom:calc(50% - .93em);height:3px;
  border-radius:2px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform .2s cubic-bezier(.65,0,.35,1);
}
nav#hoofdmenu > a:hover,
nav#hoofdmenu .dd:hover,
nav#hoofdmenu .dd[aria-expanded="true"]{color:var(--teal)}
nav#hoofdmenu > a:hover::after,
nav#hoofdmenu .dd:hover::before,
nav#hoofdmenu .dd[aria-expanded="true"]::before{transform:scaleX(1)}

.heeftmenu{position:relative;display:flex;align-items:center;align-self:stretch}
nav#hoofdmenu .dd::after{
  content:"";position:static;width:6px;height:6px;background:none;transform:rotate(45deg) translateY(-2px);
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transition:transform .2s ease;
}
nav#hoofdmenu .dd[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}

.ddmenu{
  position:absolute;top:100%;left:auto;right:0;
  width:352px;background:#fff;
  border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;
  box-shadow:0 2px 4px rgba(7,83,87,.04),0 18px 38px -22px rgba(7,83,87,.34);
  padding:8px;z-index:40;
  animation:ddIn .16s cubic-bezier(.2,.7,.3,1);
}
/* geen pootje: het pijltje naast "Meer diensten" wijst het paneel al aan,
   en het paneel hangt nu rechtstreeks aan de onderrand van de header */
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.ddmenu{animation:none}}
.ddmenu a{
  position:relative;display:block;padding:10px 13px 10px 15px;border-radius:8px;
  text-decoration:none;transition:background .15s ease;
}
.ddmenu a + a{margin-top:1px}
.ddmenu a::before{
  content:"";position:absolute;left:4px;top:10px;bottom:10px;width:3px;border-radius:2px;
  background:var(--mint);transform:scaleY(0);transition:transform .18s ease;
}
.ddmenu a:hover{background:var(--tint)}
.ddmenu a:hover::before{transform:scaleY(1)}
.ddmenu span{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:14.5px;color:var(--teal);line-height:1.3}
.ddmenu em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:1px;line-height:1.35}

/* ── actiekant ───────────────────────────────────────────────────── */
.topbar .right{position:relative;display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-left:clamp(18px,2vw,30px)}
.topbar .right::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:30px;background:var(--line)}
.topbar .btn{padding:0 24px;height:44px;font-size:15px}

/* Zelfde pil als de rest van de pagina. Alleen de hover is anders: geen
   sprongetje omhoog, maar teal dat in 0,42s van links het vlak invult.
   Het label staat stil en wordt onderweg beter leesbaar, want wit op teal
   haalt 8,8:1 waar wit op amber op 1,87:1 blijft steken. */
.topbar .btn.ctavul{position:relative;overflow:hidden;border-radius:999px;transition:none}
.topbar .btn.ctavul::before{
  content:"";position:absolute;inset:0;background:var(--teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.topbar .btn.ctavul:hover,
.topbar .btn.ctavul:focus-visible{transform:none;background:var(--sun);color:#fff}
.topbar .btn.ctavul:hover::before,
.topbar .btn.ctavul:focus-visible::before{transform:scaleX(1)}
.topbar .btn.ctavul > span{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.topbar .btn.ctavul::before{transition:none}}

/* ── hamburger ───────────────────────────────────────────────────── */
.hamburger{
  display:none;width:44px;height:44px;border-radius:4px;border:1px solid var(--line);
  background:#fff;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamburger span{display:block;width:19px;height:2px;background:var(--teal);border-radius:1px;transition:transform .2s ease,opacity .15s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── mobiel menu ─────────────────────────────────────────────────── */
.mobielmenu{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--line);padding:8px 0 18px;--mm:clamp(20px,3vw,36px)}
.mobielmenu a{display:block;padding:13px var(--mm);text-decoration:none;font-size:16px;font-weight:600;color:var(--teal)}
.mobielmenu a:active{background:var(--tint)}
.mobielmenu .mm-kop{margin:14px 0 2px;padding:0 var(--mm);font-size:12.5px;color:var(--muted);font-weight:600}
.mobielmenu .mm-kop ~ a{font-weight:500;font-size:15px;color:var(--txt);padding-block:10px}
.mobielmenu .mm-tel{
  margin:16px var(--mm) 0;padding:14px 16px;border-radius:4px;background:var(--tint);
  font-family:Comfortaa,Inter,sans-serif;font-weight:700;font-size:18px;color:var(--teal);
  font-variant-numeric:tabular-nums;text-align:center;
}
.mobielmenu .mm-tel em{display:block;font-style:normal;font-family:Inter,sans-serif;font-weight:500;font-size:12px;color:var(--muted);margin-top:3px}

@media (max-width:1080px){
  nav#hoofdmenu > a, nav#hoofdmenu .dd{font-size:15px}
  nav#hoofdmenu{gap:22px}
}
@media (max-width:920px){
  .utilstrip p:first-child{display:none}
  .utilstrip .wrap{justify-content:flex-end}
  nav#hoofdmenu{display:none}
  .hoofdbalk .wrap{height:66px;gap:12px}
  .topbar.klein .hoofdbalk .wrap{height:60px}
  .topbar img{height:38px}
  .topbar.klein img{height:34px}
  .topbar .right{margin-left:auto;padding-left:0}
  .topbar .right::before{display:none}
  .hamburger{display:flex}
  .mobielmenu{display:flex}
  .mobielmenu[hidden]{display:none}
}
@media (max-width:520px){
  .topbar .btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  .topbar *,.utilstrip{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   HERO + KLANTENBAND, herzien 14-9-2026
   ══════════════════════════════════════════════════════════════════ */

.hero{padding:clamp(44px,5vw,72px) 0 clamp(40px,4.5vw,64px);background:linear-gradient(180deg,var(--tint) 0%,#fff 100%)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4.5vw,60px);align-items:center}

/* 58px viel over vier regels en duwde de knoppen onder de vouw */
.hero h1{font-size:clamp(30px,3.4vw,44px);line-height:1.14;letter-spacing:-.015em;margin-bottom:20px;max-width:24ch}

/* --muted haalde 4,36:1 op wit en zakte daarmee door de ondergrens */
.hero .lead{font-size:18px;line-height:1.65;color:var(--txt);max-width:46ch;margin-bottom:30px}

.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .cta .btn{height:48px;padding:0 24px}

/* was een rafelige wrap over twee regels; nu een raster dat uitlijnt */
.hero .badges{margin-top:32px;display:grid;grid-template-columns:repeat(2,max-content);gap:8px 10px}
.hero .badges span{
  background:#fff;border:1px solid var(--mint-l,#cfe8e0);border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-weight:500;color:var(--txt);white-space:nowrap;
}

.portrait img{border-radius:24px;aspect-ratio:1/1.02;object-position:22% 28%}

/* ── klantenband ─────────────────────────────────────────────────── */
.klantband{padding:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.klantband .wrap{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);
  padding-top:16px;padding-bottom:16px;flex-wrap:wrap;
}
.klantband p{margin:0;font-size:13px;font-weight:500;color:#597877;flex:0 0 auto}
.klantband ul{display:flex;align-items:center;justify-content:space-between;gap:14px clamp(16px,2.2vw,30px);flex-wrap:wrap;margin:0;padding:0;list-style:none;flex:1;min-width:0}
.klantband li{display:flex;align-items:center}
.klantband img{
  height:22px;width:auto;max-width:112px;object-fit:contain;display:block;
  opacity:.76;transition:opacity .22s ease;
}
.klantband li:hover img{opacity:1}
/* op aanraakschermen valt er niets te hoveren, dus daar meteen vol */
@media (hover:none){ .klantband img{opacity:1} }
@media (prefers-reduced-motion:reduce){ .klantband img{transition:none} }

@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .hero h1{max-width:26ch}
  .hero .badges{grid-template-columns:repeat(2,1fr)}
  .hero .badges span{white-space:normal}
  .klantband .wrap{gap:14px}
  .klantband ul{gap:26px}
  .klantband img{height:20px}
}
@media (max-width:560px){
  .hero .cta{display:grid;grid-template-columns:1fr;gap:10px}
  .hero .cta .btn{width:100%}
  .hero .badges{grid-template-columns:1fr}
  .klantband ul{gap:20px 24px;justify-content:space-between}
  .klantband img{height:18px}
}


/* ══════════════════════════════════════════════════════════════════
   HERO v3, 14-9-2026: beeld gespiegeld en kleiner, klantlogo's als
   lopende band eronder, kop met gestuurde regels
   ══════════════════════════════════════════════════════════════════ */

.hero{padding:clamp(40px,4vw,60px) 0 clamp(40px,4vw,60px)}
.hero .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(30px,4vw,52px);align-items:center}
.hero .wrap > *{min-width:0}
.portrait{min-width:0}

.hero h1{font-size:clamp(30px,3.3vw,44px);line-height:1.15;letter-spacing:-.018em;margin-bottom:22px;max-width:none}
.hero h1 span{display:block}
.hero .lead{font-size:17.5px;margin-bottom:28px;max-width:44ch}
.hero .badges{margin-top:28px}

/* ── heldbeeld ───────────────────────────────────────────────────── */
.portrait > img.heldbeeld{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:32% 10%;
  /* Dezelfde afronding als de andere foto's op de site (dagfoto, artikel,
     uitleg). Stond op 0 en viel daardoor als enige hard uit de hoek. */
  border-radius:22px;
  box-shadow:0 1px 2px rgba(7,83,87,.05),0 26px 50px -32px rgba(7,83,87,.5);
  /* gespiegeld: de arts kijkt zo de tekst in en niet de pagina uit */
  transform:scaleX(-1);
}

/* ── lopende band met klantlogo's ────────────────────────────────── */
.klantstrip{display:flex;align-items:center;gap:16px;margin-top:20px}
.klantstrip > p{
  flex:0 0 auto;margin:0;font-size:11.5px;font-weight:500;color:#597877;
  line-height:1.35;max-width:100px;
}
.loper{
  position:relative;flex:1;min-width:0;overflow:hidden;display:flex;gap:38px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.spoor{
  display:flex;align-items:center;gap:38px;flex:0 0 auto;
  margin:0;padding:0;list-style:none;
  animation:loperLoop 30s linear infinite;
}
@keyframes loperLoop{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 38px))}}
.spoor li{position:relative;display:flex;align-items:center;flex:0 0 auto}
/* Elk merk staat er twee keer: een versie in één tint die standaard zichtbaar
   is, en het originele kleurenlogo dat bij hover doorkomt. Daarmee zijn alle
   per-logo filters verdwenen; die waren nodig zolang we volle-kleurbestanden
   grijs probeerden te maken, waarbij geel verdween en een dicht vlak te zwaar
   werd. Toon regelen gaat nu met één opacity. */
.spoor img{width:auto;max-width:none;aspect-ratio:auto;object-fit:contain;display:block;
  border-radius:0;object-position:center}
.spoor .mono{opacity:.46;transition:opacity .22s ease}
.spoor .kleur{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .22s ease}
.spoor li:hover .mono{opacity:0}
.spoor li:hover .kleur{opacity:1}

/* Hoogte op gelijke oppervlakte, h = 26,9 / verhouding^0,25: een breed
   woordmerk oogt bij gelijke hoogte veel groter dan een vierkant beeldmerk. */
.spoor li[data-k="l-mcd"] img{height:26px}
.spoor li[data-k="l-pra"] img{height:19px}
.spoor li[data-k="l-yam"] img{height:18px}
.spoor li[data-k="l-thu"] img{height:17.5px}
.spoor li[data-k="l-gam"] img{height:20px}
/* Gamma is een dicht vlak en weegt daardoor zwaarder dan een woordmerk */
.spoor li[data-k="l-gam"] .mono{opacity:.34}
.spoor li[data-k="l-gat"] img{height:17px}
.spoor li[data-k="l-tos"] img{height:17px}
@media (hover:none){ .spoor .mono{opacity:0} .spoor .kleur{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .spoor{animation:none}
  .spoor img{transition:none}
}

@media (max-width:920px){
  /* moet hier opnieuw, want de desktopregel hierboven staat later in het
     bestand en media queries verhogen de specificiteit niet */
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .hero h1 span{display:inline}
  .hero h1{max-width:20ch}
  .portrait > img.heldbeeld{aspect-ratio:3/2}
}
@media (max-width:560px){
  .klantstrip{gap:12px}
  .klantstrip > p{max-width:66px;font-size:11px}
  .spoor,.loper{gap:28px}
  .spoor li[data-k] img{height:15px}
  .spoor li[data-k="l-mcd"] img{height:22px}
}

/* ── knoppen springen nergens meer omhoog ────────────────────────── */
.btn:hover{transform:none}

/* ── hoofdknop in de hero: zelfde vulling als de knop in de header ─── */
.hero .btn.vulknop{position:relative;overflow:hidden;transition:none}
.hero .btn.vulknop::before{
  content:"";position:absolute;inset:0;background:var(--teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.hero .btn.vulknop:hover,
.hero .btn.vulknop:focus-visible{background:var(--sun);color:#fff}
.hero .btn.vulknop:hover::before,
.hero .btn.vulknop:focus-visible::before{transform:scaleX(1)}
.hero .btn.vulknop > span{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.hero .btn.vulknop::before{transition:none}}

/* ── twee opsommingen in plaats van pillen die op knoppen lijken ───── */
.hero .punten{
  list-style:none;margin:30px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 30px;
}
.hero .punten li{
  position:relative;padding-left:24px;
  font-size:15px;color:var(--txt);line-height:1.4;
}
.hero .punten li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:9px;height:5px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);
  transform:rotate(-45deg);
}
@media (max-width:560px){
  .hero .punten{gap:10px}
  .hero .punten li{flex:0 0 100%}
}

/* ── informatiestrip: taalkiezer links, dan tijden, dan telefoon ──── */
.util-rechts{display:flex;align-items:center;gap:14px;flex:0 0 auto;white-space:nowrap}
.util-uren{color:rgba(255,255,255,.62)}
.util-tel{
  color:#fff;text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;
  padding-left:14px;border-left:1px solid rgba(255,255,255,.22);
}
.util-tel:hover{color:var(--mint)}

.taal{position:relative;padding-right:14px;border-right:1px solid rgba(255,255,255,.22)}
.taal-knop{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 6px;border:0;border-radius:4px;background:none;cursor:pointer;
  color:rgba(255,255,255,.78);font:inherit;font-size:12.5px;
  transition:color .15s ease,background-color .15s ease;
}
.taal-knop:hover,.taal-knop[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.1)}
.taal-knop b{font-weight:600;font-size:11.5px;letter-spacing:.02em}
.taal-pijl{
  width:5px;height:5px;margin-bottom:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease;
}
.taal-knop[aria-expanded="true"] .taal-pijl{transform:rotate(-135deg) translateY(-1px)}
.vlag{width:16px;height:11px;border-radius:1.5px;display:block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.14)}

.taal-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  margin:0;padding:6px;list-style:none;min-width:178px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 38px -22px rgba(7,83,87,.45);
  animation:ddIn .16s cubic-bezier(.2,.7,.3,1);
}
.taal-menu a{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;
  text-decoration:none;color:var(--txt);font-size:14px;transition:background .14s ease;
}
.taal-menu a:hover{background:var(--tint)}
.taal-menu a[aria-current]{color:var(--teal);font-weight:600}
/* de huidige taal is geen link maar een span, anders staat er een
   href="#" in elke pagina die nergens heen gaat */
.taal-menu>li>.huidig{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;
  font-size:14px;color:var(--teal);font-weight:600;
}
.taal-menu .vlag{box-shadow:0 0 0 1px rgba(7,83,87,.14)}
/* de amberkleurige focusring van de pagina is te zwaar op het donkere vlak */
.utilstrip a:focus-visible,.taal-knop:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}

@media (max-width:920px){
  .utilstrip p:first-child{display:none}
  .util-rechts{margin-left:auto}
}
@media (max-width:560px){
  .util-uren{display:none}
  .util-rechts{gap:10px}
  .taal{padding-right:10px}
  .taal-knop b{display:none}
  /* De tijden vallen hier weg; dan staan de lijn rechts van de taalkiezer
     en die links van het nummer naast elkaar. Eén streep is genoeg. */
  .util-tel{border-left:0;padding-left:0}
}


/* ══════════════════════════════════════════════════════════════════
   INZET EN KOSTEN, herzien 14-9-2026
   Rekenhulp in twee stappen, zodat de kaart ongeveer halveert, en links
   de drie cijfers eruit: twee daarvan stonden al als bullet in de hero.
   ══════════════════════════════════════════════════════════════════ */

.plansec{padding:clamp(56px,6vw,84px) 0}
.plansec .wrap{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(34px,5.6vw,84px);align-items:center}
/* kaart links, tekst rechts. Alleen op breed scherm omgezet met order, zodat
   op telefoon de kop gewoon boven het formulier blijft staan. */
@media (min-width:921px){ .plansec .planner{order:-1} }
.plansec .h2{
  font-size:clamp(26px,2.9vw,38px);line-height:1.16;letter-spacing:-.015em;max-width:none;
  /* laat de regels vollopen maar voorkomt dat er een los woord op de
     laatste regel achterblijft; de eerste afbreking valt zo op het
     zinseinde na "vloer." */
  text-wrap:pretty;
}
.plansec .h2 + p{color:#cfe6e0;font-size:17px;line-height:1.62;max-width:none;margin-top:16px}

.plansec .wat-is{
  margin-top:22px;padding-left:16px;border-left:3px solid var(--mint);
  color:#bfdcd6;font-size:14.5px;line-height:1.55;max-width:none;
}
.plansec-bel{margin-top:30px}
.plansec .btn-ghost{height:48px;padding:0 26px}

/* ── kaart ───────────────────────────────────────────────────────── */
.planner{border-radius:18px;padding:26px 26px 24px;box-shadow:0 26px 60px -26px rgba(0,0,0,.42)}
.planner-kop{margin-bottom:18px}
.planner h2{font-size:23px;margin-bottom:5px}
.planner .sub{color:var(--muted);font-size:13.5px;margin:0}

/* voortgangsrail: een echte volgorde, dus met de stapnamen erbij */
.rail{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px;padding:0;list-style:none;counter-reset:stap}
.rail li{
  counter-increment:stap;position:relative;padding-top:9px;
  font-size:12.5px;color:var(--muted);border-top:3px solid var(--line);
  transition:color .2s ease,border-color .2s ease;
}
.rail li::before{content:counter(stap) ". ";font-weight:600}
.rail li.rail-aan{color:var(--teal);border-top-color:var(--mint);font-weight:600}

/* ── velden ──────────────────────────────────────────────────────── */
.stap{animation:stapIn .18s ease}
@keyframes stapIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stap{animation:none}}
.planner .field{margin-bottom:14px}
.planner .field label{font-size:13px;margin-bottom:6px}
.planner .seg{border-radius:10px;padding:3px;gap:3px}
.planner .seg button{padding:9px 6px;font-size:13.5px;border-radius:8px;border:0;cursor:pointer;background:none;font-family:inherit}
.field-schuif{margin-bottom:20px}
.schuif-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.schuif-kop label{margin:0}
.schuif-kop b{font-size:14px;color:var(--teal);font-variant-numeric:tabular-nums}
.planner input[type=range]{width:100%;accent-color:var(--teal);margin:0}

.planner .result{margin:0 0 10px;padding:14px 16px;border-radius:12px;gap:14px}
.planner .result b{font-size:20px;margin:1px 0}
.planner .advice{margin:0 0 16px;padding:9px 12px;font-size:12.5px;border-radius:9px}
.planner .planknop{width:100%;height:48px;padding:0 20px;border:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600}

.stap-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:12px}
.terug{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:13px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;flex:0 0 auto;
}
.terug:hover{color:var(--teal)}
.planner .foot{margin:0;text-align:right;font-size:11.5px;line-height:1.45}

/* dezelfde vulling als de andere hoofdknoppen op de pagina */
.planner .planknop{position:relative;overflow:hidden;border-radius:999px;transition:none}
.planner .planknop::before{
  content:"";position:absolute;inset:0;background:var(--teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.planner .planknop:hover::before,
.planner .planknop:focus-visible::before{transform:scaleX(1)}
.planner .planknop > span{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.planner .planknop::before{transition:none}}

@media (max-width:920px){
  .plansec .wrap{grid-template-columns:1fr;gap:30px}
  .plansec .h2{max-width:none}
}
@media (max-width:560px){
  .planner{padding:22px 18px 20px}
  .planner .result{grid-template-columns:1fr;gap:12px}
  .stap-voet{flex-direction:column;align-items:flex-start;gap:8px}
  .planner .foot{text-align:left}
}


/* ── stappen stapelen in hetzelfde rastervak ─────────────────────────
   De kaart krijgt daarmee de hoogte van de langste stap en blijft die
   houden, dus hij springt niet bij het wisselen. De inactieve stap blijft
   in de layout staan maar is onzichtbaar, buiten het toetsenbord en
   buiten de schermlezer. */
.stappen{display:grid}
.stappen > .stap{
  grid-area:1/1;min-width:0;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .16s ease;
}
.stappen > .stap.is-aan{visibility:visible;opacity:1;pointer-events:auto}
.stap{animation:none}

/* de adviesregel is nu eens één en dan weer twee regels lang; vaste hoogte
   zodat ook binnen stap 2 niets verspringt */
/* Stap 1 en 2 liggen op elkaar en de hoogste bepaalt de kaart. Alles in
   stap 2 heeft daarom een vaste hoogte: het advies is nu eens één en dan
   weer twee regels, en de melding over een dagdeel verschijnt alleen als
   een grotere organisatie er toch een kiest. Zou een van beide groeien of
   verdwijnen, dan verspringt de hele kaart bij elke klik in stap 1. */
.planner .advice{min-height:58px;line-height:1.45;display:flex;align-items:center;box-sizing:border-box}
.planner .advice-melding.is-uit{visibility:hidden}
@media (max-width:560px){
  .planner .advice{min-height:78px}
}
.planner .advice-melding{background:var(--tint);border-color:#cfe6df;margin-top:-8px}

.planner .foot{
  margin:0;text-align:right;font-size:11px;font-style:italic;
  line-height:1.4;color:var(--muted);white-space:nowrap;flex:1 1 auto;
}
@media (max-width:560px){
  .planner .foot{white-space:normal;text-align:left}
}
@media (prefers-reduced-motion:reduce){.stappen > .stap{transition:none}}


/* ══════════════════════════════════════════════════════════════════
   WAAROM OP LOCATIE, herzien 14-9-2026
   De inhoud gaat over afstand versus aanwezigheid, dus dat is ook het
   beeld: de sectie ligt op een lichte mintgrond waar de linkerkolom
   plat in wegzakt, en de Dokter Beter-kolom ligt er als witte kaart
   bovenop. De kaart is bewust GEEN rastercel maar een absoluut
   geplaatste laag: een cel kan de hoogte van zijn kolom niet aannemen,
   en een rasteritem over alle rijen blokkeert de auto-plaatsing van de
   cellen eronder. Breedte volgt de kolom via calc().
   ══════════════════════════════════════════════════════════════════ */

.vergelijk-sec{
  background:var(--tint);
  border-top:1px solid #dcece7;border-bottom:1px solid #dcece7;
  padding:clamp(54px,6vw,88px) 0;
}

.verg-kicker{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;font-size:14px;font-weight:600;color:#3f6f62;letter-spacing:.01em;
}
.verg-kicker::before{content:"";width:26px;height:2px;background:var(--mint);border-radius:2px;flex:0 0 auto}

.verg-titel{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);
  margin:0;font-size:clamp(26px,2.9vw,37px);line-height:1.2;letter-spacing:-.01em;
}

/* ---- het raster -------------------------------------------------- */
.verg{
  --thema:168px;
  position:relative;display:grid;
  grid-template-columns:var(--thema) minmax(0,1fr) minmax(0,1fr);
  margin-top:clamp(32px,3.8vw,48px);
  font-size:15.5px;line-height:1.5;
}
.verg-rij{display:contents}

.verg-kaart{
  position:absolute;top:0;bottom:0;right:0;
  width:calc((100% - var(--thema)) / 2);
  background:#fff;border-radius:20px;
  box-shadow:0 2px 4px rgba(7,83,87,.04),0 28px 56px -30px rgba(7,83,87,.55);
}

.verg-thema,.verg-hun,.verg-ons{
  position:relative;z-index:1;padding:18px 0;
  display:flex;align-items:center;text-wrap:balance;
}
.verg-thema{padding-right:24px;font-weight:600;font-size:14px;color:var(--teal)}
.verg-hun{margin-right:28px;padding-right:20px;color:#577573}
.verg-ons{gap:13px;padding-left:28px;padding-right:30px;color:var(--ink)}

/* kopregel: links kale tekst op de grond, rechts een eigen band in de kaart */
.verg-kop .verg-hun,.verg-kop .verg-ons{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:15px;
}
.verg-kop .verg-hun{color:#577573;padding-top:26px;padding-bottom:18px}
.verg-kop .verg-ons{
  color:#fff;background:var(--teal);border-radius:20px 20px 0 0;
  padding:22px 30px 20px 59px;
}

/* de vier inhoudsrijen: vinkje links in de kaart */
.verg-rij:not(.verg-kop) .verg-ons::before{
  content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background-color:var(--mint-l);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075357' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}

/* scheidslijnen: stevig op de grond, bijna onzichtbaar in de kaart */
.verg-rij:not(.verg-kop) .verg-thema,
.verg-rij:not(.verg-kop) .verg-hun{box-shadow:inset 0 1px 0 #d4e7e1}
.verg-rij:not(.verg-kop) .verg-ons{box-shadow:inset 0 1px 0 #eef5f3}
.verg-rij:last-child .verg-thema,
.verg-rij:last-child .verg-hun,
.verg-rij:last-child .verg-ons{padding-bottom:28px}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- smal: per onderwerp één kaartje met de twee kanten onder elkaar ---
   Geen kolommen meer, dus de kolomkoppen verhuizen naar de cellen zelf via
   data-kop. Het vinkje maakt hier plaats voor een verticale mintrand: de
   ::before is al bezet door dat label, en een rand leest op deze breedte
   net zo duidelijk als "dit is onze kant". ------------------------------ */
@media (max-width:860px){
  .verg{display:block;margin-top:26px}
  .verg-kaart{display:none}
  .verg-rij.verg-kop{display:none}
  .verg-rij{
    display:block;margin-bottom:14px;background:#fff;
    border:1px solid #dcece7;border-radius:16px;overflow:hidden;
  }
  .verg-thema,.verg-hun,.verg-ons{
    display:block;box-shadow:none;margin:0;text-wrap:pretty;
  }
  .verg-thema{
    padding:12px 18px 11px;font-size:12.5px;font-weight:600;color:#577573;
    background:#f2f9f6;border-bottom:1px solid #e4efec;
  }
  .verg-hun{padding:14px 18px 15px;border-left:3px solid #dfebe8;color:#577573}
  .verg-ons{
    padding:14px 18px 16px;border-left:3px solid var(--mint);
    border-top:1px solid #eaf3f0;color:var(--ink);
  }
  .verg-rij .verg-hun::before,
  .verg-rij:not(.verg-kop) .verg-ons::before{
    content:attr(data-kop);display:block;
    width:auto;height:auto;border-radius:0;background:none;
    font-size:11px;font-weight:600;margin-bottom:5px;
  }
  .verg-rij .verg-hun::before{color:#7b9997}
  .verg-rij .verg-ons::before{color:#3f6f62}
}

/* ══════════════════════════════════════════════════════════════════
   LANDELIJKE DEKKING, 14-9-2026
   De oude versie was een doos met losse pillen: "in heel Nederland"
   zonder dat je Nederland zag. Nu staat het land er echt, als raster
   van stippen dat uit de CBS-provinciegrenzen is gegenereerd. Die
   geometrie is land-only, dus het IJsselmeer, de Waddenzee en de
   Zeeuwse stromen vallen er vanzelf uit en de vorm klopt.
   De stippen zijn <use>-verwijzingen naar één <circle> in <defs>:
   662 stuks, dus dat scheelt flink ten opzichte van 662 losse cirkels.
   ══════════════════════════════════════════════════════════════════ */

.regio-sec{background:#fff;padding:clamp(56px,6.5vw,92px) 0}
.regio-sec .wrap{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(34px,5.5vw,76px);
}

.regio-kicker{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;font-size:14px;font-weight:600;color:#3f6f62;
}
.regio-kicker::before{content:"";width:26px;height:2px;background:var(--mint);border-radius:2px;flex:0 0 auto}
.regio-titel{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);margin:0;
  font-size:clamp(26px,2.9vw,37px);line-height:1.2;letter-spacing:-.01em;max-width:20ch;
}
.regio-lead{margin:16px 0 0;max-width:58ch;font-size:16px;line-height:1.62;color:#4a6a68}

.regio-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.regio-chip{
  font-family:inherit;font-size:14.5px;font-weight:500;line-height:1;
  padding:11px 17px;border-radius:999px;cursor:pointer;
  color:var(--teal);background:#fff;border:1px solid var(--line);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.regio-chip:hover{border-color:var(--mint)}
.regio-chip.is-aan{background:var(--teal);border-color:var(--teal);color:#fff}
.regio-chip:focus-visible{outline:2px solid var(--sea);outline-offset:2px}

.regio-voet{margin:20px 0 0;max-width:54ch;font-size:13px;line-height:1.6;color:#6d8b89}

/* ---- de kaart ---------------------------------------------------- */
.regio-kaart{margin:0}
.regio-kaart svg{display:block;width:100%;max-width:430px;height:auto;margin-inline:auto;overflow:visible}
.db-land use{fill:#c8e4dc}

/* de speld staat met zijn punt op 0,0, dus schalen vanaf 0 0 laat hem
   op de stad staan in plaats van eromheen te zwemmen */
.db-pin{transform:translate(calc(var(--x)*1px),calc(var(--y)*1px))}
.db-mark{
  transform:scale(.86);transform-box:view-box;transform-origin:0 0;
  transition:transform .34s cubic-bezier(.34,1.28,.5,1);
}
.db-pin path{fill:var(--teal)}
.db-kop{fill:#fff;transition:fill .2s ease}
.db-pin.is-aan .db-mark{transform:scale(1.28)}
.db-pin.is-aan .db-kop{fill:var(--sun)}

.db-label{
  font-family:Comfortaa,sans-serif;font-size:14px;font-weight:600;fill:var(--teal);
  paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;
  opacity:0;transition:opacity .22s ease;
}
.db-pin.is-aan .db-label{opacity:1}

@media (prefers-reduced-motion:reduce){
  .db-mark,.db-kop,.db-label{transition:none}
}

@media (max-width:900px){
  .regio-sec .wrap{grid-template-columns:1fr;gap:34px}
  .regio-titel{max-width:none}
  .regio-kaart svg{max-width:310px}
}

/* ══════════════════════════════════════════════════════════════════
   EEN DAG OP LOCATIE, 14-9-2026
   Was zeven identieke kaartjes onder elkaar: wel een lijst, geen dag.
   De inhoud is echt een volgorde, dus hier is een draad met markeringen
   informatie en geen versiering. Alles staat op één wit vel, want het
   is één dag. De twee spreekuurblokken krijgen een dikkere streng: dat
   zijn de lange stukken waar de dag mee volloopt, de rest zijn korte
   scharnieren. De pauze is de enige holle markering.
   ══════════════════════════════════════════════════════════════════ */

.day .wrap{
  display:grid;align-items:stretch;
  grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  column-gap:clamp(30px,4vw,56px);row-gap:clamp(30px,3.6vw,44px);
}
.dag-kop{grid-column:1 / -1}
.dag-kicker{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;font-size:14px;font-weight:600;color:#3f6f62;
}
.dag-kicker::before{content:"";width:26px;height:2px;background:var(--mint);border-radius:2px;flex:0 0 auto}
.dag-titel{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);margin:0;
  font-size:clamp(26px,2.9vw,37px);line-height:1.2;letter-spacing:-.01em;max-width:32ch;
}
.dag-lead{margin:16px 0 0;max-width:92ch;font-size:16px;line-height:1.62;color:#4a6a68}

/* ---- portret, loopt even hoog als het dagoverzicht ---------------- */
.dag-foto{position:relative;margin:0}
.dag-foto img{
  width:100%;height:100%;min-height:340px;object-fit:cover;object-position:50% 20%;
  border-radius:22px;aspect-ratio:auto;display:block;
}
.dag-foto figcaption{
  position:absolute;left:16px;bottom:16px;
  padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.93);
  font-size:12.5px;font-weight:600;color:var(--teal);
  backdrop-filter:blur(4px);
}

/* ---- het dagvel -------------------------------------------------- */
.dagloop{
  list-style:none;margin:0;padding:clamp(28px,3vw,38px) clamp(24px,3vw,38px);
  background:#fff;border:1px solid #dcece7;border-radius:22px;
  box-shadow:0 1px 2px rgba(7,83,87,.04);
}
.dagstap{
  position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);
  column-gap:30px;padding-bottom:26px;
}
.dagstap:last-child{padding-bottom:0}

/* de draad loopt van deze markering door tot die van de volgende stap */
.dagstap::before{
  content:"";position:absolute;left:76px;top:12px;bottom:-12px;width:2px;
  background:#d3e6e0;
}
.dagstap:last-child::before{display:none}
.dagstap.lang::before{left:73px;width:8px;border-radius:4px;background:var(--mint-l)}

.dagstap::after{
  content:"";position:absolute;left:70.5px;top:5.5px;
  width:13px;height:13px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 0 4px #fff;
}
/* begin en eind van de dag krijgen een volle teal kop */
.dagstap:first-child::after,.dagstap:last-child::after{
  left:69px;top:4px;width:16px;height:16px;background:var(--teal);
}
.dagstap.pauze::after{background:#fff;box-shadow:0 0 0 4px #fff,inset 0 0 0 2.5px #a7ccc4}

.dagtijd{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:19px;color:var(--teal);
  font-variant-numeric:tabular-nums;line-height:1.18;letter-spacing:-.01em;
}
/* het eind van het tijdvak staat klein onder de begintijd, zodat de
   tijdkolom smal blijft; op een telefoon staat het ernaast */
.dagtijd-tot{
  display:block;margin-top:5px;font-size:13px;font-weight:600;color:#6f8f8b;
  letter-spacing:0;white-space:nowrap;
}
.dagtekst h3{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:16.5px;color:var(--teal);
  margin:0 0 5px;line-height:1.35;
}
.dagtekst p{margin:0;font-size:14.5px;line-height:1.6;color:#577573;max-width:56ch}
.dagstap.pauze .dagtijd,.dagstap.pauze .dagtekst h3{color:#577573}

@media (max-width:900px){
  .day .wrap{grid-template-columns:1fr}
  .dag-titel{max-width:none}
  .dag-foto img{min-height:0;aspect-ratio:3/2;border-radius:18px}
  .dagstap{grid-template-columns:58px minmax(0,1fr);column-gap:22px}
  .dagtijd{font-size:17px}
  .dagstap::before{left:68px}
  .dagstap.lang::before{left:65px}
  .dagstap::after{left:62.5px}
  .dagstap:first-child::after,.dagstap:last-child::after{left:61px}
}

/* op een telefoon kost een tijdkolom een kwart van de regellengte,
   dus daar schuift de tijd boven de titel en gaat de draad naar links */
@media (max-width:560px){
  .dagloop{padding:26px 20px}
  .dagstap{grid-template-columns:minmax(0,1fr);column-gap:0;padding-left:28px;padding-bottom:24px}
  .dagtijd{font-size:15px;line-height:1.4;margin-bottom:1px}
  .dagtijd-tot{display:inline;margin:0 0 0 2px;font-size:15px;color:inherit}
  .dagstap::before{left:5px;top:9px;bottom:-9px}
  .dagstap.lang::before{left:2px}
  .dagstap::after{left:0;top:2.5px;width:11px;height:11px}
  .dagstap:first-child::after,.dagstap:last-child::after{left:-1px;top:2px;width:13px;height:13px}
}

/* ══════════════════════════════════════════════════════════════════
   TARIEVEN, 14-9-2026
   Was drie identieke doosjes met de middelste omgekeerd, het meest
   voorspelbare prijsblok dat er is. Nu ligt de sectie op teal, net als
   de rekenmodule bovenaan: op deze site is teal de kleur waar het over
   geld gaat. De buitenste twee opties staan open op die grond, alleen
   "Vaste inzet" krijgt een wit vlak.
   Dat vlak is een absoluut geplaatste laag en GEEN verschoven kaart:
   verschuiven zette de prijzen 14px uit elkaar en dat leest als een
   fout. Nu delen alle drie de kolommen via subgrid dezelfde rijen, dus
   naam, prijs en knop liggen exact op één lijn terwijl het witte vlak
   er bovenuit steekt.
   ══════════════════════════════════════════════════════════════════ */

.tarief-sec{background:var(--teal);color:#fff;padding:clamp(60px,7vw,100px) 0}

.tarief-kicker{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;font-size:14px;font-weight:600;color:var(--mint);
}
.tarief-kicker::before{content:"";width:26px;height:2px;background:var(--mint);border-radius:2px;flex:0 0 auto}
.tarief-titel{
  font-family:Comfortaa,sans-serif;font-weight:600;color:#fff;margin:0;
  font-size:clamp(26px,2.9vw,37px);line-height:1.2;letter-spacing:-.01em;max-width:44ch;text-wrap:balance;
}

.tarief-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto 1fr auto;
  gap:0 clamp(12px,2vw,26px);
  margin-top:clamp(40px,5vw,64px);
}
.tarief{
  /* z-index:0 maakt hier een eigen stapelcontext, anders zakt het witte
     vlak met z-index:-1 achter de teal achtergrond van de sectie weg */
  position:relative;z-index:0;display:grid;grid-row:span 5;grid-template-rows:subgrid;
  padding:0 clamp(20px,2.2vw,30px);
}
@supports not (grid-template-rows:subgrid){
  .tarief{display:flex;flex-direction:column}
  .tarief-lijst{flex:1}
}

/* het witte vlak steekt boven en onder de gedeelde rijen uit */
.tarief-vlak{
  position:absolute;inset:-26px 0 -30px;z-index:-1;
  background:#fff;border-radius:22px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45);
}

.tarief h3{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:20px;color:#fff;
  margin:0;line-height:1.3;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.tarief-badge{
  font-family:Inter,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.01em;
  padding:5px 11px;border-radius:999px;background:var(--mint-l);color:var(--teal);
}
.tarief-voor{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:#a9cdc6}

.tarief-prijs{
  margin:26px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px;
}
.tarief-prijs .va{font-size:14px;color:#a9cdc6}
.tarief-prijs .bedrag{
  font-family:Comfortaa,sans-serif;font-weight:700;font-size:clamp(28px,2.7vw,36px);
  color:#fff;line-height:1.1;letter-spacing:-.015em;
}
.tarief-prijs .eu{margin-right:.16em}
.tarief-prijs .bedrag.klein{font-weight:600;font-size:clamp(23px,2.1vw,27px)}
.tarief-prijs .per{font-size:14px;color:#a9cdc6}

.tarief-lijst{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:13px;align-content:start}
.tarief-lijst li{
  position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:#c5e6de;
}
.tarief-lijst li::before{
  content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background-color:rgba(197,230,222,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236DC1AC' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}
.tarief .btn{width:100%}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* de middelste kolom staat op wit, dus daar draait alles om */
.tarief.is-top h3{color:var(--teal)}
.tarief.is-top .tarief-voor,
.tarief.is-top .tarief-prijs .va,
.tarief.is-top .tarief-prijs .per{color:#577573}
.tarief.is-top .tarief-prijs .bedrag{color:var(--teal)}
.tarief.is-top .tarief-lijst li{color:#3f5f5e}
.tarief.is-top .tarief-lijst li::before{
  background-color:var(--mint-l);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075357' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* Wat bij beide tarieven inbegrepen is, staat één keer onder de kaarten
   in plaats van twee keer erin: dan blijven de kaarten over het verschil
   gaan, vier of acht uur. */
.tarief-inbegrepen{
  margin-top:clamp(62px,6vw,78px);padding-top:clamp(26px,2.6vw,32px);
  border-top:1px solid rgba(255,255,255,.18);
}
.tarief-inbegrepen h3{
  margin:0 0 16px;font-family:Comfortaa,sans-serif;font-weight:600;font-size:16px;color:#fff;
}
.tarief-inbegrepen ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px clamp(22px,2.6vw,38px);
}
.tarief-inbegrepen li{
  position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:#c5e6de;
}
.tarief-inbegrepen li::before{
  content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background-color:rgba(197,230,222,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236DC1AC' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}
.tarief-voet{
  margin:clamp(26px,3vw,36px) 0 0;font-size:13px;font-style:italic;
  color:#a9cdc6;
}
@media (max-width:860px){
  .tarief-inbegrepen{margin-top:24px}
  .tarief-inbegrepen ul{flex-direction:column}
}

@media (max-width:860px){
  .tarief-grid{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .tarief{
    grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;
    padding:30px 24px;border-radius:20px;border:1px solid rgba(255,255,255,.18);
    margin-bottom:16px;
  }
  .tarief-lijst{flex:1}
  .tarief.is-top{border-color:transparent;padding:32px 24px}
  .tarief-vlak{inset:0}
  .tarief-titel{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════
   ZO WERKT HET / BEWIJS / FAQ, 14-9-2026
   Drie losse kaarten lieten niet zien dat het een volgorde is, terwijl
   de kop juist een doorlooptijd belooft. Daarom een horizontale draad
   met de nummers als knopen erop: hetzelfde systeem als de dagtijdlijn,
   een kwartslag gedraaid. Op smalle schermen kantelt hij terug.
   De slotquote stond als losse sectie onder de FAQ, terwijl de FAQ zijn
   rechterhelft leeg liet. Die twee zijn nu één blok, met het citaat
   sticky ernaast zolang je de vragen doorleest.
   ══════════════════════════════════════════════════════════════════ */

.sec-kicker{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;font-size:14px;font-weight:600;color:#3f6f62;
}
.sec-kicker::before{content:"";width:26px;height:2px;background:var(--mint);border-radius:2px;flex:0 0 auto}
.sec-titel{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);margin:0;
  font-size:clamp(26px,2.9vw,37px);line-height:1.2;letter-spacing:-.01em;
  max-width:44ch;text-wrap:balance;
}
.sec-lead{margin:16px 0 0;max-width:76ch;font-size:16px;line-height:1.62;color:#4a6a68}
/* a{color:inherit;text-decoration:none} maakt een link in lopende tekst
   onzichtbaar; in een lead moet hij wel als link te zien zijn */
.sec-lead a{color:var(--teal);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--mint)}
.sec-lead a:hover{text-decoration-color:var(--teal)}

/* ---- Zo werkt het ------------------------------------------------ */
.werkt-sec{background:#fff;padding:clamp(58px,6.5vw,94px) 0}
/* deze sectie opent als enige gecentreerd: het spoor eronder is een
   symmetrisch beeld over de volle breedte, en het breekt de rij van
   vijf identieke linkse koppen die hier anders achter elkaar staan */
.werkt-sec .wrap{text-align:center}
.werkt-sec .sec-kicker{justify-content:center}
.werkt-sec .sec-kicker::after{content:"";width:26px;height:2px;background:var(--mint);border-radius:2px;flex:0 0 auto}
.werkt-sec .sec-titel,.werkt-sec .sec-lead{margin-inline:auto}

.stappenrij{
  --g:clamp(24px,3.5vw,54px);
  position:relative;list-style:none;margin:clamp(44px,5vw,66px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--g);
}
/* één doorlopende lijn van de eerste knoop tot de laatste */
.stappenrij::before{
  content:"";position:absolute;top:21px;height:2px;background:#d3e6e0;
  left:calc((100% - 2 * var(--g)) / 6);right:calc((100% - 2 * var(--g)) / 6);
}
.werkstap{position:relative;padding-top:62px;text-align:center}
.werkstap-n{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:#fff;
  font-family:Comfortaa,sans-serif;font-weight:700;font-size:17px;
  box-shadow:0 0 0 7px #fff;
}
.werkstap h3{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:19px;color:var(--teal);
  margin:0 0 8px;line-height:1.3;
}
.werkstap p{margin:0 auto;font-size:15px;line-height:1.6;color:#577573;max-width:38ch}

/* ---- citaat en cijfers ------------------------------------------- */
.bewijs-sec{
  background:var(--tint);border-top:1px solid #dcece7;border-bottom:1px solid #dcece7;
  padding:clamp(52px,6vw,84px) 0;
}
.bewijs-quote{margin:0}
.bewijs-quote blockquote{
  margin:0;font-family:Comfortaa,sans-serif;font-weight:500;color:var(--teal);
  font-size:clamp(22px,2.5vw,31px);line-height:1.34;letter-spacing:-.015em;
  text-wrap:pretty;max-width:50ch;
}
.bewijs-quote figcaption{margin-top:20px;font-size:14.5px;line-height:1.5;color:#577573}
.bewijs-quote figcaption b{color:var(--teal);font-weight:600}

.cijfers{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(40px,4.5vw,58px);border-top:1px solid #d3e6e0;padding-top:clamp(26px,3vw,34px);
}
.cijfer{padding:0 26px}
.cijfer:first-child{padding-left:0}
.cijfer:last-child{padding-right:0}
.cijfer + .cijfer{border-left:1px solid #d3e6e0}
.cijfer-n{
  display:block;font-family:Comfortaa,sans-serif;font-weight:700;color:var(--teal);
  font-size:clamp(28px,3.1vw,40px);line-height:1.05;letter-spacing:-.02em;
}
.cijfer-l{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:#577573}
.cijfers-voet{margin:clamp(22px,2.4vw,30px) 0 0;font-size:12.5px;font-style:italic;line-height:1.5;color:#6d8b89}

/* ---- veelgestelde vragen ----------------------------------------- */
.faq-sec{background:#fff;padding:clamp(58px,6.5vw,94px) 0}
.faq-sec .wrap{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  column-gap:clamp(40px,6vw,86px);row-gap:clamp(30px,4vw,48px);
}
/* het citaat begint naast de kop in plaats van naast vraag 1, anders
   staat de hele rechterbovenhoek leeg */
.faq-kop{grid-column:1;grid-row:1}
.faq-lijst{grid-column:1;grid-row:2}
.faq-zij{grid-column:2;grid-row:1 / span 2}

.faq-lijst{border-top:1px solid #e2efeb;margin-top:4px}
.vraag{border-bottom:1px solid #e2efeb}
.vraag summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:24px;
  padding:20px 4px;
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:17px;line-height:1.35;
  color:var(--teal);transition:color .18s ease;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--sea)}
.vraag summary:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:6px}

/* plus dat een min wordt: de staande balk krimpt weg */
.vraag-teken{position:relative;flex:0 0 auto;width:18px;height:18px;margin-left:auto}
.vraag-teken::before,.vraag-teken::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--sea);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.vraag-teken::before{width:16px;height:2px}
.vraag-teken::after{width:2px;height:16px}
.vraag[open] .vraag-teken::after{transform:translate(-50%,-50%) scaleY(0)}

.vraag-antwoord p{
  margin:0;padding:0 56px 24px 4px;
  font-size:15.5px;line-height:1.65;color:#577573;max-width:66ch;
}

/* ---- het citaat naast de vragen ---------------------------------- */
.faq-zij{position:sticky;top:104px}
.faq-quote{
  margin:0;background:var(--tint);border:1px solid #dcece7;border-radius:22px;
  padding:clamp(28px,3vw,36px);
}
.faq-quote blockquote{
  margin:0;font-family:Comfortaa,sans-serif;font-weight:500;color:var(--teal);
  font-size:20px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty;
}
.faq-quote figcaption{margin-top:18px;font-size:13.5px;line-height:1.5;color:#577573}

/* Op een locatiepagina staat er geen citaat naast de vragen. Kop links,
   vragen rechts: dan begint de lijst op dezelfde hoogte als de kop en
   valt het gat weg dat ontstond toen de kop nog bovenop stond. */
.faq-sec.faq-naast .wrap{grid-template-columns:minmax(0,.68fr) minmax(0,1fr)}
.faq-sec.faq-naast .faq-kop{grid-column:1;grid-row:1;position:sticky;top:104px}
/* de regelbreuk zit in de tekst; text-wrap:balance zou hem daarna alsnog
   over drie regels uitsmeren */
.faq-sec.faq-naast .faq-kop .sec-titel{font-size:clamp(26px,2.7vw,34px);text-wrap:normal}
.faq-sec.faq-naast .faq-lijst{grid-column:2;grid-row:1;margin-top:6px}
.faq-sec.faq-naast .vraag-antwoord p{padding-right:24px}
.faq-bel{margin:26px 0 0;font-size:14.5px;line-height:1.6;color:#577573;max-width:34ch}
.faq-bel a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint)}

/* ---- de andere regio's, als band onder de vragen ------------------- */
.regioband{background:var(--tint);border-top:1px solid var(--line);padding:clamp(46px,5vw,72px) 0 clamp(40px,4.4vw,62px)}
.regioband-kop{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 40px;margin-bottom:clamp(22px,2.4vw,30px);
}
.regioband-kop .sec-titel{margin:0;font-size:clamp(24px,2.5vw,32px)}
.regiolijst{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,34px);
}
.regiolijst a{
  display:grid;gap:4px;padding:16px 0 17px;border-top:1px solid #d5e7e2;
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:15px;line-height:1.3;
  color:var(--teal);text-decoration:none;
}
.regiolijst a span{
  font-family:Inter,sans-serif;font-weight:400;font-size:12.5px;line-height:1.45;color:#6d8b89;
}
.regiolijst a::before{
  content:"";display:block;width:11px;height:15px;margin-bottom:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8.5 -22 17 23'%3E%3Cpath d='M0 0C-4.2-6.5-7.5-8.6-7.5-13.5A7.5 7.5 0 1 1 7.5-13.5C7.5-8.6 4.2-6.5 0 0Z' fill='%23075357'/%3E%3Ccircle cy='-13.5' r='3.2' fill='%23fdae15'/%3E%3C/svg%3E") left center/contain no-repeat;
}
.regiolijst a:hover{color:var(--sea)}
.regiolijst a:hover span{color:#4a6a68}

@media (max-width:1000px){
  .faq-sec.faq-naast .wrap{grid-template-columns:1fr}
  .faq-sec.faq-naast .faq-kop{position:static}
  .faq-sec.faq-naast .faq-lijst{grid-column:1;grid-row:2}
  .regiolijst{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .regiolijst{grid-template-columns:1fr}
}

@media (max-width:900px){
  .cijfers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .cijfer{padding:0 20px}
  .cijfer:nth-child(odd){padding-left:0;border-left:0}
  .cijfer:nth-child(even){padding-right:0}
  .faq-sec .wrap{grid-template-columns:1fr}
  .faq-kop,.faq-lijst,.faq-zij{grid-column:1;grid-row:auto}
  .faq-zij{position:static}
}
@media (max-width:820px){
  /* gekanteld spoor: de nummers terug naar links, tekst weer links uitgelijnd */
  .werkt-sec .wrap{text-align:left}
  .werkt-sec .sec-kicker{justify-content:flex-start}
  .werkt-sec .sec-kicker::after{display:none}
  .stappenrij{grid-template-columns:1fr;gap:28px 0}
  .stappenrij::before{display:none}
  .werkstap{padding:0 0 0 60px;min-height:42px;text-align:left}
  .werkstap-n{left:0;transform:none}
  .werkstap p{margin:0;max-width:none}
  .werkstap::before{
    content:"";position:absolute;left:20px;top:48px;bottom:-28px;width:2px;background:#d3e6e0;
  }
  .werkstap:last-child::before{display:none}
  .werkstap-n{box-shadow:none}
  .cijfer{padding-left:20px}
  .cijfer:nth-child(odd){padding-right:20px}
  .vraag summary{gap:16px}
  .vraag-antwoord p{padding-right:6px}
}

/* ══════════════════════════════════════════════════════════════════
   AFSLUITING EN FOOTER, 14-9-2026
   De banner en het formulier stonden vlak na elkaar en beloofden
   allebei "binnen één werkdag een voorstel met de naam van de arts".
   Twee keer dezelfde belofte verzwakt ze allebei, en de knop in de
   banner sprong naar de sectie eronder. Het is nu één afsluiting: de
   kop van de banner, de praktische gegevens links, het formulier
   rechts.
   De footer stond op dezelfde teal als Tarieven met het logo in een wit
   doosje. Nu een diepere teal en een witte versie van het officiële
   logo (assets/logo-wit.svg), dus het doosje kan weg.
   ══════════════════════════════════════════════════════════════════ */

/* De afsluiting en de footer vormen samen de donkere voet van de
   pagina. Daaronder lag eerst nog een bleke mintband, en dan was dit
   het vijfde lichte blok op rij. Op teal is het formulier bovendien het
   enige witte vlak in beeld, dus daar gaat je oog vanzelf heen. */
.afsluit-sec{background:var(--teal);color:#c5e6de;padding:clamp(60px,7vw,100px) 0 clamp(28px,3vw,36px)}
.afsluit-sec .sec-kicker{color:var(--mint)}
.afsluit-sec .sec-kicker::before{background:var(--mint)}
.afsluit-sec .sec-titel{color:#fff}
.afsluit-sec .sec-lead{color:#a9cdc6}
.afsluit-sec .wrap{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  column-gap:clamp(36px,5vw,76px);row-gap:clamp(34px,4vw,50px);
}
.afsluit-tekst{padding-top:clamp(0px,1vw,14px)}

.afsluit-contact{display:grid;gap:12px;margin-top:clamp(28px,3vw,38px);max-width:420px}
.contactkaart{
  display:grid;gap:3px;padding:16px 20px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background .18s ease,border-color .18s ease;
}
.contactkaart:hover{background:rgba(255,255,255,.1);border-color:var(--mint)}
.contact-label{font-size:12.5px;color:#a9cdc6}
.contact-waarde{font-family:Comfortaa,sans-serif;font-weight:600;font-size:19px;color:#fff}
.contact-extra{font-size:12.5px;color:#a9cdc6}

/* ---- formulier --------------------------------------------------- */
.aanvraag{
  background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.08);
}
.aanvraag-kop{
  padding:clamp(24px,2.6vw,30px) clamp(26px,3vw,38px);
  border-bottom:1px solid #e6f1ee;background:#fbfdfc;
}
.aanvraag-kop h3{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:20px;color:var(--teal);
  margin:0 0 4px;
}
.aanvraag-sub{margin:0;font-size:13.5px;color:#577573}
.aanvraag-body{padding:clamp(24px,3vw,32px) clamp(26px,3vw,38px) clamp(26px,3vw,34px)}

.veld-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.veld{margin:0 0 14px;display:grid;gap:6px}
.veld-rij .veld{margin-bottom:0}
.veld-rij + .veld-rij,.veld-rij + .veld{margin-top:14px}
.veld label{font-size:13px;font-weight:600;color:var(--teal)}
.veld label span{font-weight:400;color:#6d8b89}

.veld input,.veld select,.veld textarea{
  /* 16px en niet kleiner: daaronder zoomt Safari op de iPhone in zodra
     iemand in het veld tikt, en zoomt daarna niet terug. */
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  padding:13px 15px;border-radius:12px;background:#fbfdfc;
  border:1px solid #d3e6e0;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.veld textarea{resize:vertical;min-height:96px;line-height:1.55}
.veld select{
  appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23577573' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:#b9dbd2}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--sea);box-shadow:0 0 0 3px rgba(109,193,172,.3);
}
.veld ::placeholder{color:#9ab5b1}

.aanvraag-slot{
  display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;
  margin-top:26px;padding-top:24px;border-top:1px solid #e6f1ee;
}
.aanvraag-slot .btn{padding-inline:30px;flex:0 0 auto}
.aanvraag-voet{margin:0;font-size:12.5px;line-height:1.5;color:#6d8b89;flex:1 1 180px}

.afsluit-extra{
  grid-column:1 / -1;margin:0;padding-top:clamp(28px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.6;color:#a9cdc6;
}
.afsluit-extra a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint)}
.afsluit-extra a:hover{text-decoration-color:#fff}

/* ---- footer ------------------------------------------------------ */
.voet{
  background:#053f43;color:#b8d9d1;
  padding:clamp(52px,5.5vw,78px) 0 26px;font-size:14px;
}
.voet .wrap{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) repeat(3,minmax(0,1fr));
  column-gap:clamp(28px,4vw,56px);row-gap:36px;
}
.voet-logo{height:46px;width:auto;display:block;margin-bottom:20px}
.voet-merk p{margin:0;max-width:44ch;line-height:1.6;color:#a9cdc6}
.voet-merk address{margin-top:16px;font-style:normal;line-height:1.7;color:#c5e6de}
.voet-merk address a{color:#c5e6de;text-decoration:none}
.voet-merk address a:hover{color:#fff}

/* de globale nav-regel zet display:flex en white-space:nowrap, wat de
   voetkolommen naast elkaar duwde in plaats van eronder */
.voet-kolom{display:block;white-space:normal;font-size:13.5px;font-weight:400}
.voet-kolom h2{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:14px;color:#fff;
  margin:0 0 15px;letter-spacing:0;line-height:1.35;text-wrap:balance;
}
.voet-kolom ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.voet-kolom a{
  color:#b8d9d1;text-decoration:none;
  background-image:linear-gradient(var(--mint),var(--mint));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:color .18s ease,background-size .28s cubic-bezier(.65,0,.35,1);
}
.voet-kolom a:hover{color:#fff;background-size:100% 1px}

.voet-slot{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px 24px;
  justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.14);margin-top:14px;padding-top:24px;
  font-size:13px;color:#8fb3ad;
}
.voet-slot a{color:#8fb3ad;text-decoration:none}
.voet-slot a:hover{color:#fff}
.voet a:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}

@media (max-width:900px){
  .afsluit-sec .wrap{grid-template-columns:1fr}
  .afsluit-contact{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .veld-rij{grid-template-columns:1fr;gap:14px}
  .veld-rij .veld{margin-bottom:0}
  .afsluit-contact{grid-template-columns:1fr}
  .voet .wrap{row-gap:30px}
}

/* ---- footer, aangescherpt 14-9-2026 ------------------------------
   Dieper dan de afsluiting erboven, zodat de pagina echt afsluit in
   plaats van in dezelfde teal door te lopen. De keurmerken stonden
   tussen haakjes in een zin weggestopt; dat is nu een eigen regel,
   want het is het enige harde bewijs in de footer. ----------------- */
.voet{background:#042f32;padding-top:clamp(56px,6vw,84px)}
/* De vier linkkolommen zijn "auto" en niet "1fr". Bij gelijke kolommen
   vult "Locaties" zijn kolom maar half, waardoor de kier voor "Meer"
   optisch twee keer zo groot lijkt terwijl hij dat niet is. Nu zijn de
   kolommen zo breed als hun inhoud en is elke kier exact gelijk; het
   merkblok (fr) slikt de overgebleven ruimte op. */
.voet .wrap{
  grid-template-columns:minmax(0,1fr) repeat(4,auto);
  column-gap:clamp(26px,3.4vw,52px);row-gap:40px;
}
/* Dertien regio's onder elkaar maakt deze kolom twee keer zo lang als
   zijn buren en laat linksonder een gat vallen. Twee kolommen, van boven
   naar beneden gevuld zodat de alfabetische volgorde leesbaar blijft. */
.voet-locaties ul{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);
  column-gap:clamp(20px,2.2vw,38px);
}
.voet-logo{height:44px;margin-bottom:22px}
.voet-pitch{margin:0;max-width:30ch;line-height:1.6;color:#a9cdc6;font-size:14px}

.voet-merk address{
  margin-top:22px;font-style:normal;display:grid;gap:4px;justify-items:start;
}
.voet-adres{line-height:1.6;color:#a9cdc6;font-size:14px}
.voet-contact{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:16px;color:#fff;text-decoration:none;
  background-image:linear-gradient(var(--mint),var(--mint));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .28s cubic-bezier(.65,0,.35,1);
}
.voet-contact:first-of-type{margin-top:10px}
.voet-contact:hover{background-size:100% 1px}

.voet-keur{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  border-top:1px solid rgba(255,255,255,.12);margin-top:10px;padding-top:26px;
}
.voet-keur-label{font-size:13px;color:#8fb3ad;margin-right:4px}
.voet-keur-lijst{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.voet-keur-lijst li{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#c5e6de;
  padding:6px 13px;border-radius:999px;border:1px solid rgba(197,230,222,.3);
}

.voet-slot{border-top:1px solid rgba(255,255,255,.12);margin-top:0;padding-top:22px}

/* onder ~1120px worden vijf kolommen te smal voor koppen als
   "Aanvullende diensten"; het merkblok gaat dan op een eigen rij */
@media (max-width:1120px){
  /* ook hier op inhoud, met space-between zodat de overgebleven ruimte
     gelijk over de kieren wordt verdeeld in plaats van in één kolom */
  .voet .wrap{grid-template-columns:repeat(4,auto);justify-content:space-between}
  .voet-merk{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:start}
  .voet-logo{grid-column:1 / -1}
  .voet-merk address{margin-top:0}
}
@media (max-width:640px){
  .voet .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voet-merk{grid-template-columns:1fr}
  .voet-merk address{margin-top:18px}
}

/* ══════════════════════════════════════════════════════════════════
   SUBPAGINA'S, 14-9-2026
   De homepage opent met een hero met foto. De onderliggende pagina's
   delen één rustiger opening: kruimelpad, titel, inleiding, eventueel
   knoppen, op de lichte mintgrond. Zo zie je aan de eerste schermvulling
   meteen of je op de homepage of dieper in de site zit.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   Eén ritme voor de bovenkant van elke pagina: kruimelpad op dezelfde
   regel, kop eronder op dezelfde regel. Daarvoor had de ene pagina een
   kruimelpad, de andere een labeltje en de derde een terug-link, elk op
   een andere hoogte, en met align-items:center zakte de kop ook nog mee
   met de hoogte van het blok ernaast.
   ══════════════════════════════════════════════════════════════════ */
/* Het ritme staat op één plek. Boven: de ruimte onder de header. Onder:
   de ruimte tussen kruimelpad en kop. Elke paginakop gebruikt dezelfde
   twee waarden, en waar het wrap-element zelf een rijafstand heeft, doet
   die het werk in plaats van de marge van het kruimelpad. Anders telt het
   dubbel en begint elke pagina op een andere hoogte. */
.paginakop,.actueel-kop,.artikel-kop,.doc-sec,.bel-sec{
  padding-top:clamp(24px,2.5vw,32px);
}
.paginakop .wrap,.actueel-kop .wrap,.artikel-kop .wrap{
  row-gap:clamp(22px,2.4vw,30px);
}
.paginakop .wrap > .kruimels,
.actueel-kop .wrap > .kruimels,
.artikel-kop .wrap > .kruimels{margin-bottom:0}

.paginakop{
  background:var(--tint);border-bottom:1px solid #dcece7;
  padding-bottom:clamp(50px,5.5vw,76px);
}
.kruimels{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 clamp(22px,2.4vw,30px);font-size:13px;color:#577573;
}
.kruimels a{color:#577573;text-decoration:none}
.kruimels a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.kruimels li{list-style:none}
.kruimels ol{display:contents;margin:0;padding:0}
.kruimels li + li::before{content:"";display:inline-block;vertical-align:middle;width:5px;height:5px;margin-right:10px;border-radius:50%;background:var(--mint)}
.kruimels [aria-current]{color:var(--teal);font-weight:600}

.paginatitel{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);margin:0;
  font-size:clamp(32px,4.1vw,52px);line-height:1.12;letter-spacing:-.02em;
  max-width:24ch;text-wrap:balance;
}
.paginalead{
  margin:clamp(18px,2vw,24px) 0 0;max-width:60ch;
  font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:#4a6a68;
}
.paginaknoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,34px)}

/* ---- tekstsectie met een raster van korte blokken ------------------ */
.blokken-sec{background:#fff;padding:clamp(56px,6.5vw,92px) 0}
.blokken{
  list-style:none;margin:clamp(38px,4.4vw,56px) 0 0;padding:0;
  /* Vast op twee kolommen. Met auto-fit wisselt het aantal mee met de
     breedte en worden vier blokken op sommige maten 3 + 1, en dat leest
     als een fout. */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,3.4vw,44px) clamp(36px,4.6vw,68px);
}
.blok h3{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:18px;color:var(--teal);
  margin:0 0 9px;line-height:1.32;padding-top:16px;border-top:2px solid var(--mint);
}
.blok p{margin:0;font-size:15px;line-height:1.62;color:#577573;max-width:48ch}
/* tarieven: twee keuzes en een blok met rekenvoorbeelden */
.blokken-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.blokken-drie:has(> [hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}
.blok-voorbeeld h3{border-top-color:var(--sun)}
.maandvb{margin:0;display:grid;gap:12px}
.maandvb div{display:grid;gap:2px}
.maandvb dt{font-size:14px;line-height:1.45;color:#577573}
.maandvb dd{margin:0;font-family:Comfortaa,sans-serif;font-weight:700;font-size:20px;color:var(--teal)}
.blok p.maandvb-voet{margin-top:12px;font-size:12.5px;font-style:italic;color:#6d8b89}

/* ---- twee lijsten naast elkaar ------------------------------------ */
.split-sec{background:var(--tint);border-top:1px solid #dcece7;border-bottom:1px solid #dcece7;padding:clamp(52px,6vw,84px) 0}
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,36px);margin-top:clamp(34px,4vw,48px);
}
.split-kaart{background:#fff;border:1px solid #dcece7;border-radius:20px;padding:clamp(24px,2.8vw,34px)}
.split-kaart h3{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:19px;color:var(--teal);
  margin:0 0 4px;
}
.split-kaart > p{margin:0 0 20px;font-size:14px;line-height:1.55;color:#6d8b89}
.split-kaart ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.split-kaart li{position:relative;padding-left:30px;font-size:15px;line-height:1.55;color:#3f5f5e}
.split-kaart li::before{
  content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background-color:var(--mint-l);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075357' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}

/* ---- uitleg met beeld ernaast -------------------------------------- */
.uitleg-sec{background:#fff;padding:clamp(56px,6.5vw,92px) 0}
.uitleg-sec .wrap{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(34px,5vw,72px);
}
.uitleg-sec.beeld-links .uitleg-beeld{order:-1}
.uitleg-tekst p{margin:16px 0 0;font-size:16px;line-height:1.66;color:#4a6a68;max-width:58ch}
.uitleg-beeld{margin:0;position:relative}
.uitleg-beeld img{width:100%;height:auto;border-radius:22px;display:block;aspect-ratio:auto}
.uitleg-beeld figcaption{
  position:absolute;left:16px;bottom:16px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.93);font-size:12.5px;font-weight:600;color:var(--teal);
}

/* ---- keurmerken ---------------------------------------------------- */
.keur{
  list-style:none;margin:clamp(34px,4vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(16px,2vw,22px);
}
.keur li{background:#fff;border:1px solid #dcece7;border-radius:18px;padding:22px 24px}
.keur b{
  display:block;font-family:Comfortaa,sans-serif;font-weight:600;font-size:16px;
  color:var(--teal);margin-bottom:6px;
}
.keur span{display:block;font-size:14px;line-height:1.55;color:#577573}

/* ---- smalle verwijsband -------------------------------------------- */
/* De verwijsband was een volle teal sectie. Op Over ons staat daar het
   aanvraagformulier onder, dat ook teal is, en dan lopen de twee in
   elkaar over. Nu is het een teal kaart op een witte sectie: die houdt
   zich staande naast welk blok er ook onder komt. */
.wijzer{background:#fff;padding:clamp(48px,5vw,74px) 0}
.wijzer .wrap{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:22px 44px;
  background:var(--teal);color:#c5e6de;border-radius:24px;
  padding:clamp(30px,3.4vw,44px) clamp(28px,3.2vw,46px);
  box-shadow:0 34px 68px -40px rgba(7,83,87,.6);
}
.wijzer-tekst{flex:1 1 min(100%,840px);min-width:0}
.wijzer h2{
  font-family:Comfortaa,sans-serif;font-weight:600;color:#fff;margin:0;
  font-size:clamp(21px,2.1vw,27px);line-height:1.3;text-wrap:balance;
}
.wijzer p{margin:9px 0 0;font-size:15px;line-height:1.6;color:#a9cdc6;max-width:none}
.wijzer .btn{flex:0 0 auto}
.wijzer-knoppen{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
/* het logo van de werkgever van de artsen, onder het blok erover */
.blok-merk{display:inline-block;margin-top:16px}
.blok-merk img{display:block;height:24px;width:auto}
.blok-merk:hover img{opacity:.78}

@media (max-width:760px){
  .blokken{grid-template-columns:1fr}
}
@media (max-width:900px){
  .uitleg-sec .wrap{grid-template-columns:1fr}
  .uitleg-sec.beeld-links .uitleg-beeld{order:0}
  .paginatitel{max-width:none}
}

/* Op de tarievenpagina staan de prijskolommen en de rekenmodule allebei
   op teal; naast elkaar worden dat één donker blok. Het dagdeelblok
   ertussen gaat daarom op wit, met de kaarten in mint. */
.split-sec.op-wit{background:#fff;border-top:0}
.split-sec.op-wit .split-kaart{background:var(--tint)}

/* ══════════════════════════════════════════════════════════════════
   SUBPAGINA-HERO'S MET EEN EIGEN OBJECT, 14-9-2026
   De eerste versie was alleen tekst links en een lege rechterhelft.
   Elke pagina krijgt nu rechts het meest kenmerkende van die pagina
   zelf: de dagindeling bij "op locatie", het dagdeel met zijn prijs bij
   "tarieven", en een gezicht bij "over ons". Dus geen decoratie, maar
   de inhoud van de pagina op de eerste schermvulling.
   ══════════════════════════════════════════════════════════════════ */

.paginakop .wrap{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
  column-gap:clamp(36px,5vw,84px);
}
.kruimels{grid-column:1 / -1}
.kop-tekst{min-width:0}
.kop-object{min-width:0;margin:0;align-self:center}

@media (max-width:900px){
  .paginakop .wrap{grid-template-columns:1fr;row-gap:clamp(30px,4vw,42px)}
}

/* ---- dagindeling in het kort -------------------------------------- */
.dagkijk{
  background:#fff;border:1px solid #dcece7;border-radius:22px;
  padding:clamp(24px,2.6vw,32px);
  box-shadow:0 1px 2px rgba(7,83,87,.04),0 26px 52px -34px rgba(7,83,87,.55);
}
.dagkijk > p{
  margin:0 0 20px;font-family:Comfortaa,sans-serif;font-weight:600;font-size:16px;
  color:var(--teal);
}
.dagkijk ol{list-style:none;margin:0;padding:0}
/* --tk is de breedte van de tijdkolom; lijn en bolletjes staan midden
   in de ruimte tussen tijd en tekst */
.dagkijk ol{--tk:88px}
.dagkijk li{
  position:relative;display:grid;grid-template-columns:var(--tk) minmax(0,1fr);
  column-gap:32px;padding-bottom:18px;
}
.dagkijk li:last-child{padding-bottom:0}
.dagkijk li::before{content:"";position:absolute;left:calc(var(--tk) + 15px);top:10px;bottom:-10px;width:2px;background:#d3e6e0}
.dagkijk li:last-child::before{display:none}
.dagkijk li::after{
  content:"";position:absolute;left:calc(var(--tk) + 10px);top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 0 4px #fff;
}
.dagkijk li:first-child::after,.dagkijk li:last-child::after{
  left:calc(var(--tk) + 8.5px);top:2.5px;width:15px;height:15px;background:var(--teal);
}
.dagkijk time{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:15px;color:var(--teal);
  font-variant-numeric:tabular-nums;line-height:1.35;white-space:nowrap;
}
.dagkijk li span{font-size:14.5px;line-height:1.45;color:#577573}
.dagkijk .dagkijk-link{
  display:inline-block;margin-top:22px;padding-top:18px;border-top:1px solid #e6f1ee;width:100%;
  font-size:14px;font-weight:600;color:var(--teal);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--mint);
}
.dagkijk .dagkijk-link:hover{text-decoration-color:var(--teal)}

/* ---- het dagdeel als prijskaart ------------------------------------ */
.prijskijk{
  background:var(--teal);color:#c5e6de;border-radius:22px;
  padding:clamp(26px,2.8vw,34px);
  box-shadow:0 30px 60px -34px rgba(7,83,87,.7);
}
.prijskijk-label{
  margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--mint);
}
.prijskijk-bedrag{
  margin:8px 0 0;font-family:Comfortaa,sans-serif;font-weight:700;color:#fff;
  font-size:clamp(40px,4.4vw,58px);line-height:1;letter-spacing:-.025em;
}
.prijskijk-bedrag .eu{margin-right:.14em;font-weight:600}
.prijskijk-label .va{font-weight:400;color:#a9cdc6}
.prijskijk-sub{margin:10px 0 0;font-size:13.5px;color:#a9cdc6}
.prijskijk ul{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:12px}
.prijskijk li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.5;color:#c5e6de}
.prijskijk li::before{
  content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background-color:rgba(197,230,222,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236DC1AC' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}

/* twee tarieven naast elkaar; de hele dag is de voorkeur en staat voorop */
.prijskijk-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.prijskijk-prijs + .prijskijk-prijs{border-left:1px solid rgba(255,255,255,.16);padding-left:clamp(16px,2vw,26px)}
.prijskijk-twee .prijskijk-bedrag{font-size:clamp(32px,3.2vw,44px)}
.prijskijk-prijs:not(.is-voorkeur) .prijskijk-bedrag{color:#dff1ec}
.prijskijk-kort{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:#c5e6de}
.prijskijk-twee + .prijskijk-sub{margin-top:20px}

/* ---- portret in de hero -------------------------------------------- */
.kop-portret{position:relative}
.kop-portret img{
  width:100%;height:auto;display:block;border-radius:22px;aspect-ratio:4/3.4;object-fit:cover;
  object-position:50% 16%;
}
.kop-portret figcaption{
  position:absolute;left:16px;bottom:16px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.93);font-size:12.5px;font-weight:600;color:var(--teal);
}

/* Over ons heeft het portret in de hero staan, dus de uitlegsectie is
   daar één kolom met twee tekstkolommen eronder in plaats van tekst
   naast beeld. */
.uitleg-sec.enkel .wrap{grid-template-columns:1fr}
.uitleg-sec.enkel .uitleg-tekst p{max-width:68ch}

@media (max-width:560px){
  .dagkijk ol{--tk:74px}
  .dagkijk li{column-gap:26px}
  .dagkijk time{font-size:13px}
  .dagkijk li::before{left:calc(var(--tk) + 12px)}
  .dagkijk li::after{left:calc(var(--tk) + 7px)}
  .dagkijk li:first-child::after,.dagkijk li:last-child::after{left:calc(var(--tk) + 5.5px)}
  .kop-portret img{aspect-ratio:4/3}
}

/* Over ons: kop links, lopende tekst rechts. Eén kolom liet de helft van
   de breedte leeg en de regels werden te lang. */
.uitleg-sec.enkel .wrap{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:start}
.uitleg-sec.enkel .uitleg-tekst p{max-width:60ch}
.uitleg-sec.enkel .uitleg-tekst p:first-child{margin-top:0}
/* 14ch brak "Wij zetten de arts terug in het bedrijf" in drie korte
   regels. Een kop van deze lengte hoort op twee regels te staan. */
.uitleg-sec.enkel .sec-titel{max-width:21ch}
@media (max-width:900px){
  .uitleg-sec.enkel .wrap{grid-template-columns:1fr}
  .uitleg-sec.enkel .sec-titel{max-width:none}
}

/* Afbreken op een zinsgrens in plaats van midden in een zin. Alleen op
   breedtes waar de regel anders toch al ergens willekeurig breekt; op
   smalle schermen bepaalt de kolom het. */
br.regelbreuk{display:none}
@media (min-width:1000px){ br.regelbreuk{display:inline} }

/* ══════════════════════════════════════════════════════════════════
   ACTUEEL, herzien 14-9-2026
   Opgezet naar het model van de blog van TenantSupport, vertaald naar
   deze huisstijl. Wat daar de vorm bepaalt:
   - geen uitgelicht artikel, maar een uniform raster van drie kolommen,
     zodat je in één scherm ziet hoeveel er is
   - per kaart een categoriestip, datum en leestijd op één regel, en een
     byline onderaan
   - op de artikelpagina staat het beeld NAAST de kop in plaats van
     schermbreed eronder, met de leeskolom en een zijkolom eronder
   Comfortaa, teal en mint doen hier het werk dat daar groen doet.
   ══════════════════════════════════════════════════════════════════ */

/* ---- overzicht ---------------------------------------------------- */
.actueel-kop{background:#fff;padding-bottom:clamp(30px,3.4vw,44px)}
.actueel-kop .kruimels{flex:0 0 100%}
/* het blok rechts hangt onderaan de regel, de kop blijft waar hij is */
.actueel-kop .rss-link,.actueel-kop .vac-punten{align-self:flex-end}
.actueel-kop .wrap{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;column-gap:40px}
.actueel-kop .sec-titel{font-size:clamp(28px,3.2vw,42px);max-width:27ch}
.actueel-kop .sec-lead{max-width:68ch;font-size:15.5px}
.rss-link{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-size:14px;font-weight:600;color:var(--teal);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  transition:border-color .18s ease;
}
.rss-link:hover{border-color:var(--mint)}
.rss-link::before{
  content:"";width:14px;height:14px;flex:0 0 auto;
  background:var(--sea);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16'  fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='19' r='2'/%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'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.actueel-sec{background:#fff;padding:0 0 clamp(56px,6.5vw,92px)}
.artlijst{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(34px,3.6vw,46px) clamp(24px,2.6vw,34px);
}
.art{display:flex;flex-direction:column;min-width:0}
.art-beeld{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:14px;background:var(--tint);margin-bottom:16px;
}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:0 0 9px;font-size:12px;color:#6d8b89;
}
.art-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;color:var(--sea);letter-spacing:.01em;
}
.art-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.art-meta .streep{width:1px;height:11px;background:#d3e6e0}
.art h2,.art h3{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);
  margin:0 0 9px;font-size:17.5px;line-height:1.32;letter-spacing:-.005em;
}
.art a.art-link{color:inherit;text-decoration:none}
.art a.art-link:hover{color:var(--sea)}
.art-samenvatting{
  margin:0 0 14px;font-size:14.5px;line-height:1.6;color:#577573;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.art-byline{
  margin:auto 0 0;padding-top:12px;border-top:1px solid #eaf3f0;
  font-size:12px;color:#6d8b89;
}
.art-byline b{color:var(--teal);font-weight:600}

/* ---- artikelpagina ------------------------------------------------ */
.artikel-kop{background:#fff;padding-bottom:clamp(30px,3.4vw,44px)}
.terug{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(24px,2.8vw,34px);
  font-size:14px;font-weight:600;color:#577573;text-decoration:none;
}
.terug::before{
  content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.terug:hover{color:var(--teal)}

.artikel-kop .wrap{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  column-gap:clamp(34px,4.6vw,66px);
}
.kruimels{grid-column:1 / -1}
.artikel-titel{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);margin:0;
  font-size:clamp(28px,3.3vw,42px);line-height:1.16;letter-spacing:-.02em;text-wrap:balance;
}
.artikel-inleiding{margin:18px 0 0;font-size:16.5px;line-height:1.62;color:#4a6a68;max-width:52ch}
.artikel-beeld{margin:0;align-self:center}
.artikel-beeld img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}

.artikel-byline{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid #eaf3f0;
  font-size:13px;color:#6d8b89;
}
.byline-rond{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--mint-l);color:var(--teal);
  font-family:Comfortaa,sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;
}
.artikel-byline b{display:block;color:var(--teal);font-weight:600;font-size:13.5px}
.artikel-byline .regel2{display:block;margin-top:2px}

.artikel-sec{background:#fff;padding:0 0 clamp(52px,6vw,84px)}
.artikel-sec .wrap{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  column-gap:clamp(40px,5.6vw,84px);row-gap:clamp(32px,4vw,44px);
}

.artikel-tekst{max-width:66ch;font-size:16.5px;line-height:1.75;color:#3f5f5e}
.artikel-tekst > *:first-child{margin-top:0}
.artikel-tekst p{margin:0 0 1.15em}
.artikel-tekst h2{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);
  font-size:23px;line-height:1.28;letter-spacing:-.01em;margin:2em 0 .6em;
}
.artikel-tekst h3{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);
  font-size:18.5px;line-height:1.3;margin:1.7em 0 .5em;
}
.artikel-tekst ul,.artikel-tekst ol{margin:0 0 1.15em;padding-left:0;list-style:none}
.artikel-tekst ol{counter-reset:stap}
.artikel-tekst li{position:relative;padding-left:28px;margin-bottom:.55em}
.artikel-tekst ul li::before{
  content:"";position:absolute;left:3px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--mint);
}
.artikel-tekst ol li{counter-increment:stap}
.artikel-tekst ol li::before{
  content:counter(stap);position:absolute;left:0;top:.1em;
  width:20px;height:20px;border-radius:50%;background:var(--mint-l);color:var(--teal);
  font-family:Comfortaa,sans-serif;font-weight:700;font-size:11px;
  display:grid;place-items:center;
}
.artikel-tekst a{color:var(--sea);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint-l)}
.artikel-tekst a:hover{color:var(--teal);text-decoration-color:var(--teal)}
.artikel-tekst strong{color:var(--ink);font-weight:600}
.artikel-tekst blockquote{
  margin:1.7em 0;padding:4px 0 4px 24px;border-left:3px solid var(--mint);
  font-family:Comfortaa,sans-serif;font-weight:500;font-size:19px;line-height:1.45;color:var(--teal);
}
.artikel-tekst hr{border:0;border-top:1px solid #e2efeb;margin:2.2em 0}
.artikel-tekst .artikel-beeld-inline{display:block;width:100%;height:auto;border-radius:14px;margin:1.8em 0}

/* ---- zijkolom ------------------------------------------------------ */
.artikel-zij{position:sticky;top:104px;display:grid;gap:18px}
.zij-cta{background:var(--teal);border-radius:20px;padding:26px;color:#c5e6de}
.zij-cta .sec-kicker{color:var(--mint);margin-bottom:12px;font-size:12.5px}
.zij-cta h2{font-family:Comfortaa,sans-serif;font-weight:600;color:#fff;font-size:18px;margin:0 0 8px;line-height:1.3}
.zij-cta p{margin:0 0 20px;font-size:14px;line-height:1.55;color:#a9cdc6}
.zij-cta .btn{width:100%}
.zij-kaart{background:var(--tint);border:1px solid #dcece7;border-radius:20px;padding:22px}
.zij-kaart h2{font-family:Comfortaa,sans-serif;font-weight:600;font-size:15px;color:var(--teal);margin:0 0 15px}
.zij-kaart ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.zij-kaart li{border-top:1px solid #dcece7;padding-top:14px}
.zij-kaart li:first-child{border-top:0;padding-top:0}
.zij-kaart a{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:14.5px;line-height:1.35;
  color:var(--teal);text-decoration:none;
}
.zij-kaart a:hover{color:var(--sea)}
.zij-kaart .zij-datum{display:block;margin-top:5px;font-size:12px;color:#6d8b89}
@media (max-width:900px){
  .artikel-kop .wrap{grid-template-columns:1fr}
  .artikel-beeld{order:-1}
  .terug{order:-2}
  .artikel-sec .wrap{grid-template-columns:1fr}
  .artikel-zij{position:static}
  .artikel-tekst{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════
   LOCATIEPAGINA'S, 14-9-2026
   De huidige stadspagina's zijn vijf van de zeven keer helemaal leeg en
   de twee gevulde zijn 99,6% identiek aan elkaar. Daarom krijgt elke
   pagina hier eigen inhoud: het echte vestigingsadres van Arbo Concern
   in die regio, de plaatsen die eronder vallen, en een eigen FAQ.
   De kaart is ingezoomd op de stad zelf: gemeentegrenzen van het CBS,
   de eigen gemeente in mint, de buren met een naam erbij. Negen keer
   dezelfde landkaart met één pin erop zei per pagina te weinig, en het
   stippenraster van de homepage werd op deze schaal een grove rastertoon.
   Vlakken dus, met de landkaart-projectie van de homepage eronder.
   ══════════════════════════════════════════════════════════════════ */

.stadskaart{background:#fff;border:1px solid #dcece7;border-radius:22px;padding:0;overflow:hidden}
.regiokaart{display:block;width:100%;height:auto;background:#f5fbf9}
/* het zeevlak is de achtergrond van de svg; land iets dieper zodat de
   kustlijn bij Katwijk, Haarlem en Den Haag meteen leesbaar is */
.rk-land path{fill:#d8eae3;stroke:#fff;stroke-width:.16;stroke-linejoin:round}
.rk-kern path{fill:#8ecbb8;stroke:#fff;stroke-width:.22;stroke-linejoin:round}
.rk-plaats circle{fill:#2f6f63;stroke:#fff;stroke-width:.28}
.rk-plaats text{
  fill:#2c534f;font-family:Inter,sans-serif;font-weight:500;
  paint-order:stroke;stroke:#f5fbf9;stroke-width:.5;stroke-linejoin:round;
}
.rk-pin path{fill:var(--teal)}
.rk-kop{fill:var(--sun)}
.rk-pinlaag text{
  fill:var(--teal);font-family:Comfortaa,sans-serif;font-weight:700;
  paint-order:stroke;stroke:#f5fbf9;stroke-width:.6;stroke-linejoin:round;
}
.stadsadres{border-top:1px solid #e6f1ee;padding:20px clamp(20px,2.2vw,26px) clamp(21px,2.3vw,27px)}
.stadsadres p{margin:0;font-size:14.5px;line-height:1.6;color:#577573}
.stadsadres b{
  display:block;font-family:Comfortaa,sans-serif;font-weight:600;font-size:16px;
  color:var(--teal);margin-bottom:5px;
}
.stadsadres .maps{
  display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--teal);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint);
}
.stadsadres .maps:hover{text-decoration-color:var(--teal)}

/* plaatsen in de regio */
.plaatsen{display:flex;flex-wrap:wrap;gap:9px;margin:clamp(28px,3vw,36px) 0 0;padding:0;list-style:none}
.plaatsen li{
  font-size:14.5px;color:var(--teal);background:#fff;border:1px solid var(--line);
  padding:9px 16px;border-radius:999px;
}
.split-sec .plaatsen li{background:#fff}

/* ══ het regioregister op bedrijfsarts-inschakelen ═══════════════════
   Dertien regio's passen niet in het blokkenraster van twee kolommen:
   dat laat een lege rechterhelft over. Eén regel per regio dus, met de
   plaatsen erin zodat iemand zijn eigen dorp kan zoeken in plaats van
   moet raden onder welke stad hij valt.
   ══════════════════════════════════════════════════════════════════ */
.regio-kies{background:#fff;padding:clamp(40px,4.4vw,64px) 0 clamp(56px,6.5vw,92px)}
.regio-index{list-style:none;margin:0;padding:0}
.regio-regel a{
  display:grid;align-items:baseline;
  grid-template-columns:minmax(0,.52fr) minmax(0,1.5fr) minmax(0,.58fr);
  column-gap:clamp(18px,2.2vw,32px);
  padding:22px clamp(10px,1.2vw,16px) 24px;
  margin-inline:calc(clamp(10px,1.2vw,16px) * -1);
  border-top:1px solid var(--line);border-radius:14px;
  text-decoration:none;transition:background .15s;
}
.regio-regel:last-child a{border-bottom:1px solid var(--line)}
.regio-regel a:hover{background:var(--tint)}
.ri-stad{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:19px;line-height:1.25;
  color:var(--teal);letter-spacing:-.01em;
}
.regio-regel a:hover .ri-stad{text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--mint)}
.ri-plaatsen{font-size:14.5px;line-height:1.55;color:#5f7f7d}
.ri-vest{font-size:13.5px;line-height:1.5;color:#6d8a88;text-align:right}

@media (max-width:1000px){
  .regio-regel a{grid-template-columns:minmax(0,1fr) minmax(0,.5fr);row-gap:7px}
  .ri-plaatsen{grid-column:1 / -1;order:3}
  .ri-vest{grid-row:1;grid-column:2}
}
@media (max-width:560px){
  .regio-regel a{grid-template-columns:1fr}
  .ri-vest{grid-row:auto;grid-column:1;text-align:left;order:2}
  .ri-plaatsen{order:3}
}

/* Google Maps onder de plaatsenlijst */
.kaartlader{
  position:relative;margin:clamp(30px,3.4vw,42px) 0 0;border-radius:22px;overflow:hidden;
  border:1px solid #dcece7;background:var(--tint);
}
.kaartlader iframe{display:block;width:100%;height:clamp(300px,34vw,420px);border:0}
/* losse stedenpillen, buiten een kaart */
.andere-steden{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(28px,3vw,36px) 0 0;padding:0;list-style:none}
.andere-steden a{
  display:inline-block;font-size:14.5px;font-weight:500;color:var(--teal);
  background:#fff;border:1px solid var(--line);padding:10px 17px;border-radius:999px;
  text-decoration:none;transition:border-color .18s ease;
}
.andere-steden a:hover{border-color:var(--mint)}

.artikel-tekst .artikel-beeld-inline{
  display:block;width:100%;height:auto;border-radius:16px;margin:1.8em 0;
}

/* ==================================================================== *
   VACATURES
   Het overzicht is een lijst, geen kaartenraster: vier functies lezen
   onder elkaar beter, en het salaris mag meteen zichtbaar zijn. De
   detailpagina hergebruikt de opmaak van de artikelpagina.
 * ==================================================================== */
.vac-telling{margin:0;font-size:14px;font-weight:600;color:#577573}
.vac-sec{background:#fff;padding:0 0 clamp(52px,6vw,84px)}
.vaclijst{list-style:none;margin:0;padding:0}
.vac-link{
  display:grid;align-items:baseline;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr) minmax(0,.62fr) minmax(0,.42fr);
  column-gap:clamp(18px,2.2vw,32px);
  padding:24px clamp(10px,1.2vw,16px) 26px;
  margin-inline:calc(clamp(10px,1.2vw,16px) * -1);
  border-top:1px solid var(--line);border-radius:14px;
  transition:background .15s;
}
.vac:last-child .vac-link{border-bottom:1px solid var(--line);border-radius:14px}
.vac-link:hover{background:var(--tint)}
.vac-functie{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:19px;line-height:1.25;
  color:var(--teal);letter-spacing:-.01em;
}
.vac-zin{font-size:14.5px;line-height:1.55;color:#5f7f7d}
.vac-feit{font-size:13.5px;line-height:1.5;color:#6d8a88}
.vac-loon{font-size:15px;font-weight:600;color:var(--teal);text-align:right;white-space:nowrap}
.vac-status{
  display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;
  background:#eef2f1;color:#7b9391;font-family:Inter,sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;vertical-align:2px;
}
.vac-dicht .vac-functie{color:#6d8a88}
.vac-dicht .vac-loon{color:#7b9391;font-weight:500}

/* ---- de Academy: het enige luide blok op deze pagina --------------- */
.academy-sec{background:var(--teal);padding:clamp(54px,6vw,86px) 0}
.academy-sec .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  column-gap:clamp(40px,5.4vw,84px);row-gap:clamp(28px,3.4vw,40px);align-items:start;
}
.academy-sec .sec-kicker{color:var(--mint)}
.academy-sec .sec-kicker::before{background:var(--mint)}
.academy-sec .sec-titel{color:#fff}
.academy-sec .sec-lead{color:#a9cdc6;max-width:46ch}
.rollijst{
  list-style:none;margin:6px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,34px);
}
.rollijst li{
  border-top:1px solid rgba(197,230,222,.28);padding:14px 0 15px;
  font-family:Comfortaa,sans-serif;font-weight:500;font-size:14.5px;
  line-height:1.35;color:#dcefea;
}

/* ---- open sollicitatie --------------------------------------------- */
.solsec{background:#fff;border-top:1px solid var(--line);padding:clamp(52px,5.6vw,80px) 0}
.solsec .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  column-gap:clamp(40px,5.4vw,80px);row-gap:clamp(26px,3vw,36px);align-items:center;
}
.solsec .sec-lead{max-width:52ch}
.sol-acties{display:grid;gap:16px;justify-items:start}
.sol-tel{display:grid;gap:2px;font-size:14px;color:#6d8a88}
.sol-tel b{font-family:Comfortaa,sans-serif;font-size:21px;color:var(--teal);font-weight:700}
.sol-meer{font-size:14.5px;font-weight:600;color:var(--sea);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--mint-l)}
.sol-meer:hover{color:var(--teal)}

/* ---- vacaturepagina ------------------------------------------------ */
.vac-kop .wrap{align-items:start}
.vac-feiten{
  margin:0;background:var(--tint);border:1px solid #dcece7;border-radius:20px;
  padding:6px 24px 10px;
}
.vac-feiten > div{display:grid;gap:3px;padding:14px 0 15px;border-top:1px solid #dcece7}
.vac-feiten > div:first-child{border-top:0}
.vac-feiten dt{font-size:12.5px;font-weight:600;color:#6d8a88}
.vac-feiten dd{margin:0;font-family:Comfortaa,sans-serif;font-weight:600;
  font-size:15px;line-height:1.35;color:var(--teal)}
.vac-melding{
  margin:20px 0 0;padding:14px 18px;border-radius:14px;
  background:#fdf4e2;border:1px solid #f6e2b8;
  font-size:14.5px;line-height:1.55;color:#7a5a17;max-width:52ch;
}

@media (max-width:1000px){
  .vac-link{grid-template-columns:minmax(0,1fr) minmax(0,.44fr);row-gap:8px}
  .vac-zin{grid-column:1;order:3}
  .vac-feit{grid-column:1;order:4}
  .vac-loon{grid-row:1;grid-column:2}
  .academy-sec .wrap,.solsec .wrap,.vac-kop .wrap{grid-template-columns:1fr}
  .solsec .sec-lead{max-width:none}
}
@media (max-width:560px){
  .vac-link{grid-template-columns:1fr}
  .vac-loon{grid-row:auto;grid-column:1;text-align:left;order:5}
  .rollijst{grid-template-columns:1fr}
}

/* De drie arbeidsvoorwaarden die deze werkgever onderscheiden, uit zijn
   eigen vacaturetekst. Geen iconen: het is informatie om te scannen. */
.vac-punten{list-style:none;margin:0;padding:0;max-width:34ch}
.vac-punten li{
  border-top:1px solid var(--line);padding:11px 0 12px;
  font-size:14.5px;line-height:1.45;color:#4a6a68;
}
.actueel-kop .vac-punten + *{margin-top:0}

/* ==================================================================== *
   AANVULLENDE DIENSTEN
   Dokter Beter voert deze niet zelf uit; de zustermerken binnen de Arbo
   Concern groep doen dat. Het logo van het uitvoerende merk hoort daarom
   op elke kaart en boven aan elke dienstpagina te staan.
 * ==================================================================== */
/* ══ de poortwachterklok ══════════════════════════════════════════════
   Iedereen in verzuimland navigeert op weeknummers. De vier aanvullende
   diensten staan daarom niet als vier kaarten naast elkaar maar als vier
   balken op diezelfde klok van 104 weken: dan zie je in één blik dat
   veiligheidskunde vóór de ziekmelding zit en het tweede spoor erna.
   Eén verticale lijn erin, op week 52, want dat is de scheidslijn:
   daarvóór zoekt u het binnen het bedrijf, daarna daarbuiten.
   ═══════════════════════════════════════════════════════════════════ */
.klok-sec{background:#fff;padding:clamp(54px,6vw,86px) 0}
.klok-kop .sec-lead{max-width:70ch}
.klok{margin-top:clamp(36px,4.2vw,54px)}
.klok-toelichting{margin:clamp(18px,2vw,24px) 0 0;font-size:13px;font-style:italic;line-height:1.5;color:#6d8b89}

/* de as en elke baan delen hetzelfde raster, anders staan de streepjes
   niet boven de balken */
.klok-as,.baan-vak{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  column-gap:clamp(20px,2.6vw,42px);
}
.klok-aslabel{
  margin:0;align-self:end;font-size:12.5px;font-weight:600;color:#7b9391;
  letter-spacing:.01em;
}
/* De as: een zonestrook met een haarlijn eronder, en daaronder de
   mijlpalen. Een mijlpaal is twee regels hoog (weeknummer plus naam), dus
   de twee rijen moeten meer dan twee regelhoogten uit elkaar staan. Op 26
   pixels liep "Melding bij het UWV" nog door "week 52" heen. */
.klok-spoor{position:relative;height:106px}
.klok-voor{
  position:absolute;left:0;top:0;width:var(--breed);height:30px;
  border-right:1px solid #bcd8d0;background:#f2f8f6;box-sizing:border-box;
  display:flex;align-items:center;justify-content:flex-end;padding-right:9px;
  font-size:11.5px;color:#7b9391;
}
.klok-spoor::after{
  content:"";position:absolute;left:0;right:0;top:30px;height:1px;background:#bcd8d0;
}
.mijlen{position:absolute;left:0;right:0;top:31px;height:75px;list-style:none;margin:0;padding:0}
/* Het streepje van de onderste rij loopt langs de tekst van de bovenste.
   Dat lost een witte achtergrond op, zoals op een landkaart: het label
   knipt de lijn eronder weg. De rij erboven moet dan wel bovenop liggen,
   want in de HTML komt week 6 ná week 1. */
.mijl{
  position:absolute;left:var(--x);top:calc(7px + var(--rij) * 34px);
  transform:translateX(-50%);white-space:nowrap;line-height:1.3;
  background:#fff;padding:0 7px;z-index:calc(2 - var(--rij));
}
.mijl-links{transform:none;margin-left:-7px}
.mijl-rechts{transform:translateX(-100%);margin-right:-7px}
.mijl::before{
  content:"";position:absolute;left:50%;bottom:100%;
  width:1px;height:calc(7px + var(--rij) * 34px);background:#bcd8d0;
}
.mijl-links::before{left:7px}
.mijl-rechts::before{left:auto;right:7px}
.mijl-week{display:block;font-size:12px;font-weight:600;color:var(--teal)}
.mijl-naam{display:block;font-size:12px;color:#7b9391}

.klok-banen{list-style:none;margin:10px 0 0;padding:0}
.baan + .baan{margin-top:6px}
.baan-vak{
  align-items:center;text-decoration:none;
  padding:12px clamp(10px,1.2vw,16px);
  margin-inline:calc(clamp(10px,1.2vw,16px) * -1);
  border-radius:14px;transition:background .15s;
}
a.baan-vak:hover{background:var(--tint)}
.baan-naam{
  grid-column:1;grid-row:1;align-self:end;
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:17px;line-height:1.25;
  color:var(--teal);letter-spacing:-.01em;
}
.baan-merk{grid-column:1;grid-row:2;align-self:center;
  font-size:13px;font-weight:600;color:var(--sea)}
/* Het weeknummer stond eerst in de balk. Bij een venster van tien weken is
   die balk zestig pixels breed en liep de tekst eroverheen; in de kolom
   ernaast leest hij altijd. */
.baan-wanneer{
  grid-column:1;grid-row:3;align-self:start;
  font-size:12.5px;color:#7b9391;
}
.baan-balk{
  grid-column:2;grid-row:1 / -1;position:relative;height:42px;
  /* de dunne lijn is de volle 104 weken; de streep op week 52 is de
     scheidslijn tussen eerste en tweede spoor */
  background:
    linear-gradient(#bcd8d0,#bcd8d0) var(--wk52) 0/1px 100% no-repeat,
    /* de zone vóór verzuim loopt door achter de balken, anders hangt de
       strook boven het beeld los van de balk die erin valt */
    linear-gradient(#f2f8f6,#f2f8f6) 0 0/var(--voor) 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat;
}
.baan-balk::after{
  content:"";position:absolute;left:var(--van);right:calc(100% - var(--tot));
  top:5px;bottom:5px;border-radius:9px;
  background:var(--mint-l);border:1px solid #9bd2c0;
}
a.baan-vak:hover .baan-balk::after{background:var(--mint);border-color:var(--sea)}
/* op een dienstpagina staat de eigen balk op, de andere drie blijven staan
   als oriëntatie en blijven klikbaar */
/* Een dienst zonder vast begin: het deel tussen --vaag en --van loopt
   verlopend en gestippeld in, zodat de balk zegt "kan vanaf hier" in plaats
   van "begint hier". */
.baan-balk.is-vaag::before{
  content:"";position:absolute;left:var(--vaag);right:calc(100% - var(--van));
  top:5px;bottom:5px;border-radius:9px 0 0 9px;
  border:1px dashed #9bd2c0;border-right:0;
  background:linear-gradient(90deg,rgba(214,238,230,0),var(--mint-l));
}
.baan-balk.is-vaag::after{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}
.baan.is-hier .baan-balk.is-vaag::before{
  border-color:#e09a09;background:linear-gradient(90deg,rgba(255,193,59,0),var(--sun));
}
.baan.is-hier .baan-balk::after{background:var(--sun);border-color:#e09a09}
.baan.is-hier .baan-naam{color:var(--teal)}
.baan.is-hier{background:var(--tint);border-radius:14px}
.baan:not(.is-hier) .baan-naam{font-weight:600}

@media (max-width:820px){
  .klok-as,.baan-vak{grid-template-columns:1fr;row-gap:2px}
  .klok-aslabel{margin-bottom:6px}
  .baan-naam,.baan-merk,.baan-wanneer{grid-column:1;grid-row:auto;align-self:auto}
  .baan-balk{grid-column:1;grid-row:auto;height:34px;margin-top:8px}
  .baan-vak{padding:14px clamp(10px,1.2vw,16px)}
  .mijl-naam{display:none}
  /* "vóór verzuim" past hier niet naast "week 1"; het vlak blijft, de
     tekst gaat eruit */
  .klok-voor{font-size:0}
  .klok-spoor{height:66px}
  .mijlen{height:44px;top:23px}
  .klok-voor{height:22px}
  .klok-spoor::after{top:22px}
  .mijl{top:calc(6px + var(--rij) * 18px);padding:0 5px}
  .mijl::before{height:calc(6px + var(--rij) * 18px)}
  .mijl-links{margin-left:-5px}
  .mijl-links::before{left:5px}
  .mijl-rechts{margin-right:-5px}
  .mijl-rechts::before{right:5px}
}

/* ---- de familierij ------------------------------------------------- *
   Zes logo's op één rij. De hoogte staat per merk in de HTML omdat de
   verhoudingen van 4,6:1 tot vierkant lopen; gelijke hoogte geeft zes
   verschillende gewichten. Kleur blijft kleur: dit zijn zustermerken en
   geen klantenlogo's, dus ze mogen zichzelf zijn.                        */
.merkband{background:var(--tint);border-top:1px solid var(--line);
  padding:clamp(50px,5.4vw,78px) 0 clamp(46px,5vw,70px)}
/* kop links, uitleg rechts: anders blijft de rechterhelft leeg */
.merkband-kop{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  column-gap:clamp(40px,5.4vw,84px);row-gap:16px;align-items:start;
}
.merkband-kop .sec-titel{font-size:clamp(24px,2.5vw,32px);max-width:20ch}
.merkband-kop .sec-lead{margin-top:0;max-width:52ch}
.merklijst{
  list-style:none;margin:clamp(34px,3.8vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:clamp(16px,2vw,28px);
  border-top:1px solid #cfe3dd;
}
.merk > a,.merk-zelf{
  display:grid;align-content:start;gap:0;
  padding:26px 0 4px;height:100%;
}
/* de logo's staan op één lijn doordat de cel boven de tekst een vaste
   hoogte heeft; het logo zakt daarbinnen naar de onderkant */
.merk img{display:block;width:auto;max-width:100%;object-fit:contain;
  object-position:left bottom;align-self:end}
.merk > a,.merk-zelf{grid-template-rows:60px auto auto}
.merk-kort{margin-top:16px;font-size:13.5px;line-height:1.4;color:#4a6a68}
.merk-dom{margin-top:5px;font-size:12.5px;font-weight:600;color:var(--sea)}
.merk-hier{margin-top:5px;font-size:12.5px;font-weight:600;color:#8fa9a6}
.merk > a:hover .merk-dom{color:var(--teal)}
.merk > a:hover img{opacity:.78}
.merk img{transition:opacity .15s ease}

/* ---- dienstpagina -------------------------------------------------- */
.dienst-kop{padding-bottom:clamp(24px,2.6vw,34px)}
.dienst-kop .wrap{align-items:start}
/* De intro rekt mee tot de hoogte van het kader rechts en de
   uitvoerder-strook zakt naar de onderkant: dan eindigen beide kolommen op
   één lijn in plaats van dat er links een wit vlak onder blijft staan. */
.dienst-intro{flex:1 1 0;min-width:0;align-self:stretch;display:flex;flex-direction:column}
.dienst-intro .credit{margin-top:auto}
.dienst-intro .sec-lead{margin-bottom:clamp(24px,2.6vw,32px)}
/* het kader rechts van de intro: wat de klant concreet krijgt, met vinkjes
   en meteen de twee manieren om verder te gaan */
.krijgt{
  flex:0 0 min(380px,38%);background:var(--tint);border:1px solid #dcece7;
  border-radius:20px;padding:clamp(22px,2.2vw,28px);
}
.krijgt-kop{margin:0 0 14px;font-family:Comfortaa,sans-serif;font-weight:600;font-size:17px;color:var(--teal)}
.krijgt-lijst{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.krijgt-lijst li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.5;color:#3f5f5e}
.krijgt-lijst li::before{
  content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background-color:var(--mint-l);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075357' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}
.krijgt-knoppen{display:grid;gap:12px;margin-top:20px;justify-items:center}
.krijgt-knoppen .btn{width:100%}
.krijgt-bel{
  font-size:14px;font-weight:600;color:var(--teal);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint);
}
.krijgt-bel:hover{text-decoration-color:var(--teal)}

/* ---- andere diensten als kaarten, met het merk dat ze uitvoert ---- */
.andere-sec{background:var(--tint);border-top:1px solid #dcece7;padding:clamp(48px,5.4vw,72px) 0}
.andere-sec .sec-titel{font-size:clamp(23px,2.4vw,30px)}
.dienstkaarten{
  list-style:none;margin:clamp(26px,3vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);
}
.dienstkaart{
  display:flex;flex-direction:column;height:100%;box-sizing:border-box;
  background:#fff;border:1px solid #dcece7;border-radius:18px;padding:22px;
  text-decoration:none;transition:border-color .15s,box-shadow .15s;
}
.dienstkaart:hover{border-color:var(--mint);box-shadow:0 18px 40px -28px rgba(7,83,87,.5)}
/* de logo's lopen ver uiteen in verhouding (Going Concern is vierkant);
   een vaste strook houdt de namen eronder op één lijn */
.dienstkaart-logo{display:flex;align-items:center;height:40px;margin-bottom:16px}
.dienstkaart-logo img{display:block;width:auto;max-height:40px}
.dienstkaart-naam{font-family:Comfortaa,sans-serif;font-weight:600;font-size:17px;line-height:1.3;color:var(--teal)}
.dienstkaart-kort{margin-top:8px;font-size:14px;line-height:1.5;color:#577573;flex:1}
.dienstkaart-merk{margin-top:14px;font-size:12.5px;font-weight:600;color:var(--sea)}
/* ══ de creditregel op een dienstpagina ══════════════════════════════
   Hier stond een lichte kaart met het logo, een zin, drie bolletjes en
   een link: veel doos om weinig inhoud. Wat het in werkelijkheid is, is
   een creditvermelding, zoals onder een film. Dus staat het er nu ook zo
   bij: één strook tussen twee haarlijnen, logo links, de rest ernaast.
   ═══════════════════════════════════════════════════════════════════ */
.credit-sec{background:#fff;padding:0}
.credit{
  display:grid;align-items:center;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(18px,2.2vw,28px);row-gap:12px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(14px,1.6vw,18px) 0;margin-top:clamp(24px,2.6vw,32px);
}
.credit-logo{display:block;width:auto}
.credit-rol{margin:0;font-size:14.5px;line-height:1.5;color:#5f7f7d}
.credit-rol b{color:var(--teal);font-weight:600}
.credit-rol a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint)}
.credit-rol a:hover{text-decoration-color:var(--teal)}
.credit-wanneer{
  margin:0;font-family:Comfortaa,sans-serif;font-weight:600;font-size:15.5px;
  color:var(--teal);line-height:1.35;text-align:right;
}
.credit-wanneer span{
  display:block;font-family:Inter,sans-serif;font-weight:500;font-size:12.5px;
  color:#7b9391;margin-bottom:3px;
}
.credit-link{
  display:inline-block;margin-top:4px;font-size:14px;font-weight:600;color:var(--teal);white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint);
}
.credit-link:hover{text-decoration-color:var(--teal)}

@media (max-width:820px){
  /* naast het logo blijft te weinig over voor de creditregel; die wordt
     dan vier regels smal. Alles onder elkaar dus. */
  .credit{grid-template-columns:1fr;row-gap:12px}
  .credit-link{justify-self:start}
}
.uitvoerder > img{display:block;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.uitvoerder-rol{margin:22px 0 0;font-size:14px;line-height:1.55;color:#4a6a68}
.uitvoerder-punten{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.uitvoerder-punten li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;color:#577573}
.uitvoerder-punten li::before{
  content:"";position:absolute;left:1px;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--mint);
}
.uitvoerder-link{
  display:inline-block;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--sea);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint-l);
}
.uitvoerder-link:hover{color:var(--teal)}

.wanneer-sec{background:#fff;padding:clamp(36px,4vw,56px) 0 clamp(30px,3.4vw,46px);
  border-top:1px solid var(--line)}
.wanneer-kop .sec-titel{font-size:clamp(23px,2.4vw,30px)}
.wanneer-lijst{
  list-style:none;margin:clamp(30px,3.4vw,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,40px);
}
.stappen-sec{padding-top:clamp(20px,2.4vw,32px);padding-bottom:0}
.stappen-sec + .klok-sec{padding-top:clamp(40px,4.4vw,60px)}
.stappen-sec .artikel-tekst h2{margin-top:0}

@media (max-width:1000px){
  .wanneer-lijst{grid-template-columns:1fr}
  .merkband-kop{grid-template-columns:1fr}
  .merklijst{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .dienst-kop .wrap{flex-wrap:wrap}
  .krijgt{flex:1 1 100%;margin-top:24px}
  .dienstkaarten{grid-template-columns:1fr}
}
@media (max-width:560px){
  .merklijst{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==================================================================== *
   CONTACT
   Het telefoonnummer is het grootste type op de hele site, groter dan
   welke kop dan ook. Dat is de bedoeling: dit is een bedrijf dat je belt.
   Alles eromheen is hairline en kleine tekst, en er staat geen formulier,
   want dat staat al onder elke andere pagina.
 * ==================================================================== */
/* de kop draagt alleen nog de titel; de ruimte eronder komt van
   .contact-sec, anders staan er twee marges op elkaar */
.bel-sec{background:#fff;padding-bottom:0}
/* Het nummer liep eerst over de volle breedte van de wrap. Dat las als
   een affiche en nam het formulier de aandacht af; nu staat het ernaast,
   groot genoeg om het eerste te zijn wat je in die kolom ziet. */
.bel-nummer{
  display:block;margin:6px 0 0;
  font-family:Comfortaa,sans-serif;font-weight:700;color:var(--teal);
  font-size:clamp(30px,3.1vw,40px);line-height:1.06;letter-spacing:-.02em;
  white-space:nowrap;
}
.bel-nummer:hover{color:var(--sea)}
.bel-status{
  display:flex;align-items:center;gap:9px;
  margin:clamp(16px,1.8vw,22px) 0 0;font-size:14.5px;font-weight:600;color:#4a6a68;
}
.bel-stip{
  width:9px;height:9px;border-radius:50%;background:#c3d4d2;flex:0 0 auto;
}
.bel-status.is-open .bel-stip{background:var(--mint);box-shadow:0 0 0 4px rgba(133,206,188,.24)}
.bel-belofte{margin:18px 0 0;max-width:56ch;font-size:17px;line-height:1.62;color:#4a6a68}

/* het briefhoofd: vier feiten, klein gezet, op één hairline */
.briefhoofd{
  margin:clamp(36px,4.4vw,60px) 0 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,34px);
  border-top:1px solid var(--line);
}
.briefhoofd > div{padding:18px 0 0}
.briefhoofd dt{font-size:12.5px;font-weight:600;color:#7b9391;margin:0 0 7px}
.briefhoofd dd{
  margin:0;font-family:Comfortaa,sans-serif;font-weight:600;font-size:15.5px;
  line-height:1.35;color:var(--teal);
}
.briefhoofd dd a:hover{color:var(--sea)}
.briefhoofd .briefhoofd-klein{
  margin-top:4px;font-family:Inter,sans-serif;font-weight:400;
  font-size:13.5px;line-height:1.45;color:#6d8a88;
}

/* ══ contactpagina ═══════════════════════════════════════════════════
   Het formulier is de pagina; het nummer, het adres en de openingstijden
   staan in een smalle kolom ernaast. De eerste vraag van de planning aan
   de telefoon, "waar gaat het over", staat als eerste veld boven het
   formulier: vijf knoppen in plaats van een uitklaplijst, want vijf
   opties passen gewoon in beeld.
   ═══════════════════════════════════════════════════════════════════ */
.contact-kop .sec-lead{max-width:60ch}
.contact-sec{background:#fff;padding:clamp(34px,3.6vw,50px) 0 clamp(56px,6.5vw,92px)}
.contact-sec .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);
  column-gap:clamp(36px,5vw,84px);row-gap:clamp(40px,4.6vw,60px);align-items:start;
}
.contactform{
  background:var(--tint);border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,2.8vw,38px);
}
.onderwerp{border:0;margin:0 0 clamp(22px,2.4vw,30px);padding:0}
.onderwerp legend{
  padding:0;margin:0 0 12px;font-size:13px;font-weight:600;color:var(--teal);
}
.keuzes{display:flex;flex-wrap:wrap;gap:9px}
.keuze{position:relative;display:inline-flex}
.keuze input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.keuze span{
  display:block;padding:9px 16px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:14px;color:var(--teal);
  transition:background .15s,border-color .15s;
}
.keuze input:hover + span{border-color:#a7d2c6}
.keuze input:checked + span{background:var(--teal);border-color:var(--teal);color:#fff}
.keuze input:focus-visible + span{outline:2px solid var(--sun);outline-offset:2px}
.contactform .veld input,.contactform .veld select,.contactform .veld textarea{background:#fff}
.contact-slot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 22px;margin-top:clamp(18px,2vw,26px);
}
.contact-voet{margin:0;max-width:40ch;font-size:13px;line-height:1.55;color:#6d8a88}

.contact-zij{position:sticky;top:88px}
.zij-label{margin:0;font-size:13px;font-weight:600;color:#7b9391}
.contact-zij .briefhoofd{
  margin-top:clamp(26px,3vw,36px);grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
.contact-zij .briefhoofd > div{padding:16px 0 0;border-bottom:1px solid var(--line);
  padding-bottom:16px}
.contact-zij .briefhoofd > div:last-child{border-bottom:0}

@media (max-width:900px){
  .contact-sec .wrap{grid-template-columns:1fr}
  .contact-zij{position:static}
  .contact-zij .briefhoofd{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
}
@media (max-width:560px){
  .contact-zij .briefhoofd{grid-template-columns:1fr}
  .contact-slot{justify-content:flex-start}
  .contact-slot .btn{width:100%;justify-content:center}
}

/* ---- juridische documenten ---------------------------------------- *
   Eén kolom met hangende artikelnummers in de marge. De nummers mogen
   hier wel: in een reglement wordt naar artikelnummers verwezen, dus ze
   zijn informatie. Ruimere regelafstand dan de rest van de site, want dit
   wordt van begin tot eind gelezen.                                      */
.doc-sec{background:#fff;padding-bottom:clamp(56px,6.4vw,92px)}

.doc{max-width:822px}
.doc-kop h1{
  font-family:Comfortaa,sans-serif;font-weight:600;color:var(--teal);margin:0;
  font-size:clamp(30px,3.6vw,46px);line-height:1.14;letter-spacing:-.025em;
}
.doc-lead{margin:16px 0 0;max-width:56ch;font-size:17px;line-height:1.6;color:#4a6a68}
.doc-meta{
  margin:clamp(28px,3.2vw,40px) 0 0;padding-top:20px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,32px);row-gap:16px;
}
.doc-meta dt{font-size:12.5px;font-weight:600;color:#7b9391;margin:0 0 5px}
.doc-meta dd{margin:0;font-size:14px;line-height:1.5;color:#4a6a68}

.doc-status{
  margin:clamp(30px,3.4vw,42px) 0 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--sun);
  max-width:62ch;font-size:15px;line-height:1.68;color:#6b5a30;
}

.doc-body{margin-top:clamp(36px,4.2vw,56px);counter-reset:art}
.doc-art{position:relative;padding:0 0 clamp(30px,3.4vw,42px) 62px}
.doc-art h2{
  counter-increment:art;
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:21px;color:var(--teal);
  margin:0 0 12px;line-height:1.3;
}
.doc-art h2::before{
  content:counter(art) ".";
  position:absolute;left:0;top:1px;width:46px;text-align:right;
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:19px;color:var(--mint);
}
.doc-art p{margin:0;font-size:16.5px;line-height:1.8;color:#3f5f5e}

.doc-voet{margin-top:clamp(18px,2vw,26px);padding-top:24px;border-top:1px solid var(--line)}
.doc-voet p{margin:0;font-size:15px;line-height:1.65;color:#6d8a88}
.doc-voet a{color:var(--sea);font-weight:600}
.doc-voet a:hover{color:var(--teal)}

@media (max-width:1000px){
  .briefhoofd{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:4px}
  .briefhoofd > div{padding-bottom:18px}
  .doc-art{padding-left:0}
  .doc-meta{grid-template-columns:1fr;row-gap:14px}
  .doc-art h2::before{position:static;display:block;width:auto;text-align:left;
    margin-bottom:5px;font-size:15px}
}
@media (max-width:560px){
  .briefhoofd{grid-template-columns:1fr}
}
/* De vijfde regel in "Meer diensten" is het overzicht, geen dienst. Een
   hairline erboven maakt dat onderscheid zonder een kopje toe te voegen. */
.ddmenu a.dd-alle{margin-top:7px;padding-top:14px;border-top:1px solid var(--line);border-radius:0 0 8px 8px}


/* ── Formulierstaten ────────────────────────────────────────────────────
   Drie staten die je niet ziet tot ze nodig zijn: het vangnet tegen bots,
   de foutregel en de bevestiging. De bevestiging vervangt de inhoud van
   het formulier en houdt dezelfde kaart, zodat de pagina niet verspringt.
   De amberen kantlijn is dezelfde melding als op de juridische pagina's;
   amber blijft schaars en betekent hier "let hier even op". */
.vangnet{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.formulier-fout{
  margin:18px 0 0;padding:12px 16px;
  border-left:3px solid var(--sun);border-radius:0 10px 10px 0;
  background:#fdf4e2;font-size:14px;line-height:1.55;color:#7a5a17;max-width:52ch;
}
.btn[disabled]{opacity:.62;cursor:progress}
.btn[disabled]:hover{transform:none}

.formulier-klaar{
  display:grid;justify-items:start;gap:10px;
  padding:clamp(32px,3.6vw,46px) clamp(26px,3vw,38px);
}
.klaar-merk{width:40px;height:40px;margin-bottom:4px}
.formulier-klaar h3{
  font-family:Comfortaa,sans-serif;font-weight:600;font-size:21px;
  line-height:1.25;color:var(--teal);margin:0;
}
.formulier-klaar p{margin:0;font-size:15px;line-height:1.6;color:var(--txt);
  max-width:42ch;text-wrap:balance}
.formulier-klaar .klaar-bel{font-size:14px;color:var(--muted)}
.formulier-klaar .klaar-bel a{
  color:var(--teal);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--mint);
}
.contactform .formulier-klaar{padding:clamp(6px,1vw,12px) 0}

/* ---- Foutpagina (404) ---------------------------------------------- */
/* Gebouwd door bouw-404.py. Dezelfde kop als contact; daaronder de zes
   plekken waar bezoekers van de oude site het vaakst naar zochten, als
   tegels die op een telefoon onder elkaar vallen. */
.fout-sec{padding:clamp(40px,5vw,72px) 0 0}
.fout-kicker{font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sea);margin-bottom:12px}
.fout-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fout-lijst-sec{padding:clamp(40px,5vw,64px) 0 clamp(58px,6.5vw,94px)}
.fout-lijstkop{font-size:20px;margin-bottom:18px}
.fout-lijst{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.fout-lijst a{display:flex;flex-direction:column;gap:4px;height:100%;padding:18px 20px;border:1px solid var(--line);
  border-radius:14px;background:var(--tint);transition:border-color .16s ease,transform .16s ease}
.fout-lijst a:hover{border-color:var(--mint);transform:translateY(-2px)}
.fout-lijst strong{font-family:Comfortaa,sans-serif;color:var(--teal);font-size:17px}
.fout-lijst span{font-size:15px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.fout-lijst a{transition:none}.fout-lijst a:hover{transform:none}}


/* ---- Mobiel: menuknoppen, rekentool, kruimelpad (19-10-2026) -------- */
/* Bel en Voorstel aanvragen onderaan het hamburgermenu, naast elkaar,
   in plaats van de vaste balk onderin het scherm. */
.mobielmenu .mm-knoppen{display:flex;gap:10px;margin:18px var(--mm) 0}
/* .topbar .btn staat op mobiel uit (de oranje knop in de balk); deze twee
   horen er juist dan te staan. */
.mobielmenu .mm-knoppen .btn{display:inline-flex;flex:1;height:auto;padding:14px 12px;color:#fff;font-size:16px;font-weight:600}
.mobielmenu .mm-knoppen .btn-teal{flex:0 0 34%}
/* Nummer en tijden naast elkaar, met een streep ertussen, op dezelfde
   marges als de knoppen erboven. */
.mobielmenu .mm-contact{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 12px;
  margin:14px var(--mm) 0;font-size:13.5px;color:var(--muted)
}
.mobielmenu .mm-contact a{display:inline;padding:0;font-size:14px;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
.mobielmenu .mm-contact span{padding-left:12px;border-left:1px solid var(--line)}
@media (max-width:920px){
  /* Open vult het menu het scherm onder de kopbalk: de links bovenaan, de
     knoppen en het nummer onderaan, en de pagina erachter staat stil.
     --menu-top zet scripts.js bij het openen. */
  .mobielmenu:not([hidden]){
    height:calc(100dvh - var(--menu-top,100px));overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:max(22px,env(safe-area-inset-bottom))
  }
  .mobielmenu .mm-knoppen{margin-top:auto;padding-top:18px}
  html.menu-open{overflow:hidden}
}

@media (max-width:920px){
  /* De twee stappen van de rekentool liggen op desktop op elkaar, zodat de
     kaart niet verspringt naast de kolom links. Op een telefoon staat de
     kaart alleen, en dan gaf dat onder stap 1 een leeg vlak zo hoog als
     stap 2. Hier telt alleen de stap die aan staat. */
  .stappen > .stap:not(.is-aan){display:none}
}

@media (max-width:640px){
  /* Het hele pad liep op een telefoon over twee regels, met de huidige
     pagina los eronder terwijl die er als kop al staat. Op een smal scherm
     blijft alleen de stap terug over: "‹ Aanvullende diensten". De
     structured data houdt het volledige pad. */
  .kruimels li{display:none}
  .kruimels li:nth-last-child(2){display:flex;align-items:center;min-width:0;max-width:100%}
  .kruimels li:nth-last-child(2)::before{
    content:"";width:7px;height:7px;margin:0 9px 0 2px;border-radius:0;background:none;
    border-left:2px solid var(--sea);border-bottom:2px solid var(--sea);transform:rotate(45deg);flex:none
  }
  .kruimels li:nth-last-child(2) a{
    font-size:14px;font-weight:600;color:var(--teal);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    padding:6px 0
  }
}

/* Op een telefoon past de hele zin niet naast vlag en nummer (198px tegen
   154px op 360 breed), dus daar staat de korte vorm met een vinkje als
   keurmerk. Voor een schermlezer staat de volle zin er al (aria-hidden). */
.utilstrip .util-kort{display:none}
@media (max-width:920px){
  /* Het vinkje staat voor het woord, als keurmerk. Het is een
     inline-block met vertical-align, zodat het met de tekst meeloopt en
     niet met de flexrij. */
  .utilstrip .util-kort{display:block;color:#fff;font-weight:500}
  .utilstrip .util-kort::before{
    content:"";display:inline-block;width:4px;height:8px;margin:0 9px 0 2px;
    vertical-align:2px;
    border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(45deg)
  }
  .util-rechts{margin-left:auto}
}

/* ---- Cookievraag (scripts.js) --------------------------------------- */
/* Een kleine kaart linksonder, in de taal van de site: Comfortaa-kop met
   een mintgroen icoon, korte tekst, één duidelijke knop en een rustige
   tweede keuze. Schuift zacht in. Op een telefoon een kaart over de volle
   breedte met twee even grote knoppen. */
.cookiebalk{
  position:fixed;z-index:40;left:24px;bottom:24px;width:min(372px,calc(100vw - 48px));
  background:#fff;border-radius:20px;padding:20px 20px 18px;
  box-shadow:0 1px 0 rgba(7,83,87,.04),0 18px 48px -12px rgba(7,83,87,.28);
  outline:1px solid rgba(7,83,87,.08);
  color:var(--txt);
  animation:cookieIn .38s cubic-bezier(.2,.8,.2,1) both
}
@keyframes cookieIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cookiebalk[hidden]{display:none}
.cookie-kop{display:flex;align-items:center;gap:12px}
.cookie-icoon{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--tint);color:var(--sea)
}
.cookie-icoon svg{width:19px;height:19px}
.cookie-titel{margin:0;font-family:Comfortaa,Inter,sans-serif;font-weight:700;font-size:17px;color:var(--teal);line-height:1.25}
.cookie-tekst{margin:12px 0 0;font-size:14px;line-height:1.55;color:#4a6a68}
.cookie-tekst a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mint);white-space:nowrap}
.cookie-tekst a:hover{text-decoration-color:var(--teal)}
.cookie-keuze{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:16px}
.cookie-keuze button{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border:0;border-radius:999px;height:42px;padding:0 18px;transition:background .15s ease,color .15s ease}
.cookie-nee{background:none;color:#5f7f7d;box-shadow:inset 0 0 0 1.5px var(--line)}
.cookie-nee:hover{background:var(--tint);color:var(--teal)}
.cookie-ja{background:var(--teal);color:#fff;padding:0 24px}
.cookie-ja:hover{background:#04403f}
.cookie-keuze button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
@media (max-width:560px){
  .cookiebalk{left:12px;right:12px;bottom:12px;width:auto;padding:16px 16px 14px;border-radius:18px}
  .cookie-titel{font-size:16px}
  .cookie-tekst{font-size:13.5px;margin-top:10px}
  .cookie-keuze{margin-top:14px;gap:8px}
  .cookie-keuze button{flex:1;height:44px}
}
@media (prefers-reduced-motion:reduce){.cookiebalk{animation:none}}
.cookie-knop{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:inherit}
.cookie-knop:hover{text-decoration:underline}