/* ==========================================================================
   Autorespond ontwerp
   Dit is de complete opmaak. Kleuren staan bovenaan als variabelen, dus een
   kleurwijziging hoeft maar op een plek. Donker is standaard, .licht op de
   body maakt de site licht.

   Let op: dit bestand wordt na de stylesheet van Astra ingeladen, daarom
   winnen deze regels van Astra bij gelijke specificiteit.
   ========================================================================== */


/* ==========================================================================
   Alle stijlen staan hieronder. Kleuren zitten in CSS-variabelen bovenaan,
   dus een kleurwijziging hoeft maar op 1 plek.
   Donker is de standaard, .licht op de body maakt de site licht.
   ========================================================================== */

/* ================= THEMA ================= */
:root{
  --accent:#3A7DFF;
  --accent-h:#5B93FF;
  --groen:#5FD08A;
  --groen-bg:rgba(95,208,138,.12);
  --amber:#E8B45C;
  --amber-bg:rgba(232,180,92,.12);

  --bg:#0A101F;
  --bg2:#0E1729;
  --paneel:#121C31;
  --paneel2:#16213A;
  --rand:rgba(255,255,255,.09);
  --rand2:rgba(255,255,255,.16);
  --tekst:#E9EEF7;
  --zacht:#93A2BA;
  --zachter:#6C7C97;
  --glow:rgba(58,125,255,.20);
  --schaduw:0 30px 70px -34px rgba(0,0,0,.8);
  --r:12px;
  --rl:18px;
}
body.licht{
  --accent:#046bd2;
  --accent-h:#0a7ae8;
  --groen:#177245;
  --groen-bg:#EDF7F1;
  --amber:#8A5A00;
  --amber-bg:#FDF4E5;

  --bg:#FFFFFF;
  --bg2:#F6F8FB;
  --paneel:#FFFFFF;
  --paneel2:#F6F8FB;
  --rand:#E8ECF2;
  --rand2:#D8E0EA;
  --tekst:#12203A;
  --zacht:#5F6E85;
  --zachter:#8B98AB;
  --glow:rgba(4,107,210,.10);
  --schaduw:0 30px 70px -36px rgba(14,26,51,.3);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tekst);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-stretch:84%;font-weight:700;letter-spacing:-0.012em;line-height:1.06;color:var(--tekst)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.sec{padding:120px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Archivo';font-stretch:92%;font-weight:600;
  font-size:14.5px;padding:13px 26px;border-radius:999px;transition:.18s;border:1px solid transparent;cursor:pointer}
.btn-p{background:var(--knop);color:#fff}
.btn-p:hover{background:var(--knop-hover);color:#fff}
.btn-s{background:transparent;color:var(--tekst);border-color:var(--rand2)}
.btn-s:hover{border-color:var(--tekst)}
.btn-v{background:var(--paneel2);color:var(--tekst);border-color:var(--rand)}
.btn-v:hover{border-color:var(--rand2)}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.kicker{display:block;font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--zachter);margin-bottom:20px}
.head{max-width:640px;margin:0 auto 56px;text-align:center}
.head h2{font-size:clamp(30px,4.2vw,50px);margin-bottom:16px}
.head p{color:var(--zacht);font-size:16.5px;max-width:520px;margin:0 auto}
.head.links{margin-left:0;text-align:left}
.head.links p{margin-left:0}

/* ================= NAV ================= */
nav{position:fixed;top:0;left:0;right:0;z-index:90;background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--rand)}
.navin{max-width:1180px;margin:0 auto;padding:13px 40px;display:flex;align-items:center;gap:30px;position:relative}
nav img.logo{height:21px;width:auto}
body:not(.licht) nav img.logo{filter:brightness(0) invert(1)}
.navlinks{display:flex;gap:26px;margin-left:auto;font-family:'Archivo';font-stretch:100%;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--zacht);align-items:center}
.navlinks>div{position:relative}
.navlinks a,.navlinks .top{display:inline-flex;align-items:center;gap:6px;padding:22px 0;cursor:pointer}
.navlinks a:hover,.navlinks .top:hover{color:var(--tekst)}
.caret{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:.2s}
.drop{position:absolute;top:100%;left:-18px;background:var(--paneel);border:1px solid var(--rand);border-radius:var(--r-m);padding:9px;
  min-width:296px;box-shadow:var(--schaduw);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;text-transform:none;letter-spacing:0}
.navlinks>div:hover .drop{opacity:1;visibility:visible;transform:none}
.navlinks>div:hover .caret{transform:rotate(180deg)}
.drop a{display:flex;gap:12px;padding:10px 11px;border-radius:var(--r-s);align-items:flex-start}
.drop a:hover{background:var(--paneel2)}
.drop b{font-family:'Archivo';font-stretch:92%;font-size:14px;font-weight:600;color:var(--tekst);display:block;line-height:1.35}
.drop span{font-family:'Inter';font-size:12.5px;font-weight:400;color:var(--zachter);display:block;line-height:1.4;text-transform:none}
.drop .di{width:30px;height:30px;border-radius:var(--r-s);background:var(--paneel2);border:1px solid var(--rand);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);margin-top:1px}
.drop .di .ico{width:15px;height:15px}
nav .btn{padding:9px 18px;font-size:13px}
.thema{background:none;border:1px solid var(--rand);border-radius:999px;width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--zacht);flex-shrink:0}
.thema:hover{color:var(--tekst);border-color:var(--rand2)}
.thema .zon{display:none}
body.licht .thema .zon{display:block}
body.licht .thema .maan{display:none}
.menu-btn{display:none;background:none;border:0;padding:4px;cursor:pointer;color:var(--tekst)}
.menu-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}

/* ================= HERO ================= */
.hero{position:relative;padding:152px 0 0;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:1100px;height:620px;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none}
.tegels{position:absolute;inset:0;pointer-events:none}
.tg{position:absolute;width:52px;height:52px;border-radius:var(--r-m);background:var(--paneel);border:1px solid var(--rand);
  display:flex;align-items:center;justify-content:center;color:var(--zacht);animation:zweef 7s ease-in-out infinite}
.tg .ico{width:20px;height:20px;stroke-width:1.4}
.tg.groot{width:60px;height:60px;border-radius:var(--r-m)}
.tg.aan{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
@keyframes zweef{50%{transform:translateY(-11px)}}
.l1{left:3%;top:98px;opacity:.30}
.l2{left:11%;top:172px;opacity:.55;animation-delay:-1.4s}
.l3{left:1.5%;top:246px;opacity:.42;animation-delay:-2.8s}
.l4{left:9%;top:322px;opacity:.72;animation-delay:-4.2s}
.l5{left:2.5%;top:404px;opacity:.34;animation-delay:-5.6s}
.l6{left:13.5%;top:472px;opacity:.5;animation-delay:-3.1s}
.r1{right:3%;top:98px;opacity:.30;animation-delay:-.7s}
.r2{right:11%;top:172px;opacity:.55;animation-delay:-2.1s}
.r3{right:1.5%;top:246px;opacity:.42;animation-delay:-3.5s}
.r4{right:9%;top:322px;opacity:.72;animation-delay:-4.9s}
.r5{right:2.5%;top:404px;opacity:.34;animation-delay:-6.3s}
.r6{right:13.5%;top:472px;opacity:.5;animation-delay:-1.9s}
.heroin{position:relative;max-width:720px;margin:0 auto}
.merkje{font-family:'Archivo';font-stretch:100%;font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--zachter);margin-bottom:22px;display:block}
.hero h1{font-size:clamp(40px,6.6vw,84px);line-height:1.02;letter-spacing:-0.02em;margin-bottom:22px}
.hero h1 span{color:var(--accent)}
.hero .lead{font-size:clamp(15.5px,1.6vw,18px);color:var(--zacht);max-width:520px;margin:0 auto 22px}
.gerust{display:inline-flex;align-items:center;gap:9px;background:var(--groen-bg);color:var(--groen);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:500;margin-bottom:30px;font-family:'Archivo';font-stretch:96%}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.klanten{display:flex;align-items:center;justify-content:center;gap:13px;font-size:13.5px;color:var(--zacht);flex-wrap:wrap}
.faces{display:flex}
.faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-9px}
.faces img:first-child{margin-left:0}
.klanten b{color:#E8A11C;letter-spacing:1.5px}

.shot{padding:66px 0 0;position:relative}
.frame{max-width:1000px;margin:0 auto;border:1px solid var(--rand);border-radius:var(--rl);overflow:hidden;background:var(--paneel);
  box-shadow:var(--schaduw);opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.frame.inview{opacity:1;transform:none}
.fbar{background:var(--paneel2);border-bottom:1px solid var(--rand);padding:10px 16px;display:flex;gap:7px;align-items:center}
.fdot{width:9px;height:9px;border-radius:50%;background:var(--rand2)}
.furl{margin-left:10px;background:var(--bg2);border:1px solid var(--rand);border-radius:var(--r-xs);font-size:12px;color:var(--zachter);padding:4px 14px}
.furl b{color:var(--tekst);font-weight:500}

/* ================= GROEIPAD ================= */
.pad{background:var(--bg2);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stap{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:30px;display:flex;flex-direction:column;transition:.22s}
.stap:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.stap.kern{border-top:2px solid var(--groen)}
.stap.uit{border-top:2px solid var(--accent)}
.stap.alles{border-top:2px solid var(--tekst);background:var(--paneel2)}
.num{font-family:'Archivo';font-stretch:100%;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--zachter);margin-bottom:14px;display:block}
.stap h3{font-size:22px;margin-bottom:9px}
.stap>p{font-size:14.5px;color:var(--zacht);margin-bottom:20px}
.stap ul{list-style:none;font-size:14.5px;color:var(--zacht);margin-bottom:24px;flex:1}
.stap li{padding:5px 0 5px 26px;position:relative}
.stap li svg{position:absolute;left:0;top:11px;width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stap.kern li svg{stroke:var(--groen)}
.stap .tarief{font-family:'Archivo';font-stretch:92%;font-size:15px;font-weight:600;color:var(--tekst);margin-bottom:18px}
.stap .tarief span{color:var(--zachter);font-weight:400}
.label{display:inline-flex;align-items:center;gap:7px;font-family:'Archivo';font-stretch:96%;font-size:11px;font-weight:600;
  border-radius:var(--r-xs);padding:4px 9px;width:fit-content;margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase}
.label.basis{background:var(--groen-bg);color:var(--groen)}
.label.aanrader{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)}
.label.compleet{background:var(--paneel);color:var(--zacht);border:1px solid var(--rand)}
.label.module{background:var(--paneel2);color:var(--zacht);border:1px solid var(--rand)}
.label.tijd{background:var(--amber-bg);color:var(--amber)}
.stip{width:6px;height:6px;border-radius:50%;background:currentColor}
.klein{color:var(--zachter);font-size:13.5px;margin-top:28px;text-align:center}
.klein a{color:var(--accent);text-decoration:underline}

/* ================= LOGOSTRIP ================= */
.strip{padding:76px 0}
.strip p{text-align:center;font-size:12.5px;color:var(--zachter);margin-bottom:34px;letter-spacing:.04em}
.lgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:32px 24px;align-items:center}
.lgrid img{height:19px;width:auto;margin:0 auto;opacity:.4;transition:.2s;filter:grayscale(1)}
body:not(.licht) .lgrid img{filter:grayscale(1) brightness(0) invert(1);opacity:.34}
.lgrid img:hover{opacity:.9}
.waarde{text-align:center;font-size:13.5px;color:var(--zacht);margin-top:36px}
.waarde b{color:var(--tekst);font-weight:500}

/* ================= VERHAAL ================= */
.story{border-top:1px solid var(--rand)}
.chap{display:grid;grid-template-columns:.9fr 1.1fr;gap:74px;max-width:1180px;margin:0 auto;padding:0 40px}
.chap+.chap{border-top:1px solid var(--rand)}
.chap .stick{position:sticky;top:100px;align-self:start;padding:108px 0}
.nummer{font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;color:var(--accent);letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:20px;display:block}
.chap h2{font-size:clamp(28px,3.8vw,46px);margin-bottom:18px}
.chap .stick p{font-size:16px;color:var(--zacht);max-width:410px;margin-bottom:24px}
.lijst{list-style:none;font-size:15px;margin-bottom:28px}
.lijst li{padding:7px 0 7px 30px;position:relative;color:var(--tekst)}
.lijst li svg{position:absolute;left:0;top:12px;width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.panels{padding:108px 0;display:flex;flex-direction:column;gap:20px}
.pshot{border:1px solid var(--rand);border-radius:var(--rl);overflow:hidden;background:var(--paneel);
  opacity:0;transform:translateY(32px);transition:opacity .7s,transform .7s}
.pshot.inview{opacity:1;transform:none}
.pshot img{width:100%}
.pshot .cap{padding:15px 20px;border-top:1px solid var(--rand);display:flex;justify-content:space-between;align-items:center;gap:14px}
.pshot .cap b{font-family:'Archivo';font-stretch:92%;font-size:14.5px;font-weight:600;color:var(--tekst)}
.pshot .label{margin-bottom:0}

/* ================= BASIS + MODULES ================= */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.kaart{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:32px}
.kaart.basis{border-top:2px solid var(--groen)}
.kaart.mod{border-top:2px solid var(--accent)}
.kaart .kop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px;flex-wrap:wrap}
.kaart h3{font-size:23px}
.kaart>p{font-size:14.5px;color:var(--zacht);margin-bottom:24px}
.rijen{display:flex;flex-direction:column}
.rij{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--rand)}
.rij:first-child{border-top:0;padding-top:0}
.rij .rico{width:32px;height:32px;border-radius:var(--r-s);background:var(--paneel2);border:1px solid var(--rand);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;color:var(--zacht)}
.rij .rico .ico{width:15px;height:15px}
.rij b{font-family:'Archivo';font-stretch:92%;font-size:15px;font-weight:600;color:var(--tekst);display:block;margin-bottom:2px}
.rij span{font-size:13.5px;color:var(--zacht);display:block}
.rij.tijd .rico{background:var(--amber-bg);border-color:color-mix(in srgb, var(--amber) 32%, transparent);color:var(--amber)}
.mini{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--amber);background:var(--amber-bg);
  border-radius:var(--r-xs);padding:3px 8px;margin-top:7px;font-family:'Archivo';font-stretch:96%;text-transform:uppercase;letter-spacing:.04em}
.kaart.mod .rij .rico{background:color-mix(in srgb, var(--accent) 12%, transparent);border-color:color-mix(in srgb, var(--accent) 30%, transparent);color:var(--accent)}
.kaart .voet{margin-top:24px;padding-top:22px;border-top:1px solid var(--rand)}
.kaart .voet .btn{width:100%}
.legenda{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--zacht);margin-top:28px;justify-content:center}
.legenda span{display:inline-flex;align-items:center;gap:8px}
.vk{width:9px;height:9px;border-radius:3px}
.vk.g{background:var(--groen)}.vk.a{background:var(--amber)}.vk.b{background:var(--accent)}

.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.mtegel{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);overflow:hidden;transition:.22s}
.mtegel:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.mtegel img{width:100%;border-bottom:1px solid var(--rand)}
.mtegel .body{padding:22px}
.mtegel h4{font-size:17px;margin-bottom:5px}
.mtegel p{font-size:13.5px;color:var(--zacht)}

/* ================= ESSENTIALS ================= */
.egrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rand);border-left:1px solid var(--rand)}
.ecel{padding:30px;border-right:1px solid var(--rand);border-bottom:1px solid var(--rand);transition:.2s}
.ecel:hover{background:var(--paneel)}
.ecel .eico{width:38px;height:38px;border-radius:var(--r-s);background:var(--paneel2);border:1px solid var(--rand);display:flex;
  align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent)}
.ecel h4{font-size:16.5px;margin-bottom:6px}
.ecel p{font-size:13.5px;color:var(--zacht)}

/* ================= BAND ================= */
.band{border:1px solid var(--rand);border-radius:var(--rl);padding:54px;display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center;background:var(--paneel);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--glow);filter:blur(120px);right:-160px;top:-180px}
.band>*{position:relative}
.band h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.band p{color:var(--zacht);font-size:16px;margin-bottom:26px}
.band .beeld{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--rand)}
.knoppen{display:flex;gap:12px;flex-wrap:wrap}
.knoppen.mid{justify-content:center}

/* ================= VIDEO ================= */
.video{background:var(--bg2);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.vwrap{max-width:900px;margin:0 auto;border-radius:var(--rl);overflow:hidden;aspect-ratio:16/9;position:relative;
  border:1px solid var(--rand);background:#000;box-shadow:var(--schaduw)}
.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ================= REVIEWS ================= */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{border:1px solid var(--rand);border-radius:var(--rl);padding:28px;display:flex;flex-direction:column;background:var(--paneel)}
.tster{color:#E8A11C;letter-spacing:2px;margin-bottom:14px;font-size:13.5px}
.tcard h4{font-size:16.5px;margin-bottom:9px}
.tcard p{font-size:14.5px;color:var(--zacht);flex:1;margin-bottom:22px}
.twie{display:flex;gap:12px;align-items:center;padding-top:20px;border-top:1px solid var(--rand)}
.twie img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid var(--rand);background:#fff}
.twie b{font-family:'Archivo';font-stretch:92%;font-size:14px;font-weight:600;color:var(--tekst);display:block;line-height:1.3}
.twie span{font-size:12.5px;color:var(--zachter)}

/* ================= PRIJZEN ================= */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.plan{border:1px solid var(--rand);border-radius:var(--rl);padding:32px 28px;background:var(--paneel);display:flex;flex-direction:column;position:relative}
.plan.hi{border-color:var(--accent);box-shadow:0 26px 60px -34px var(--glow)}
.plan .best{position:absolute;top:-11px;left:28px;background:var(--knop);color:#fff;font-family:'Archivo';font-stretch:96%;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-xs)}
.plan h3{font-size:17.5px;margin-bottom:16px}
.plan .p{font-family:'Archivo';font-stretch:88%;font-size:42px;font-weight:700;color:var(--tekst);line-height:1}
.plan .per{font-size:13px;color:var(--zachter);margin-top:7px}
.bes{display:inline-flex;align-items:center;gap:7px;background:var(--groen-bg);color:var(--groen);font-size:12px;font-weight:600;
  border-radius:var(--r-xs);padding:4px 10px;margin:16px 0 22px;font-family:'Archivo';font-stretch:96%}
.plan ul{list-style:none;font-size:14.5px;color:var(--zacht);margin-bottom:26px;flex:1}
.plan li{padding:6px 0 6px 26px;position:relative}
.plan li svg{position:absolute;left:0;top:11px;width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan li.sterk{color:var(--tekst)}
.plan .btn{width:100%}

/* ================= CTA ================= */
.ctaband{border:1px solid var(--rand);border-radius:var(--rl);padding:60px;text-align:center;background:var(--paneel);position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;width:600px;height:400px;left:50%;top:-200px;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--glow),transparent 70%)}
.ctaband>*{position:relative}
.ctaband h2{font-size:clamp(27px,3.6vw,44px);margin-bottom:14px}
.ctaband p{color:var(--zacht);max-width:520px;margin:0 auto 28px;font-size:16px}

/* ================= FORMULIER ================= */
.rf{background:var(--bg2);border-top:1px solid var(--rand)}
.rfwrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.rfkop{font-size:clamp(28px,3.6vw,42px);margin-bottom:12px}
.rfsub{color:var(--zacht);font-size:16px;margin-bottom:22px}
.rfpak{display:flex;gap:13px;border:1px solid var(--rand);border-radius:var(--r-s);padding:15px;margin-bottom:10px;cursor:pointer;
  background:var(--paneel);transition:.18s}
.rfpak:hover{border-color:var(--rand2)}
.rfpak:has(input:checked){border-color:var(--accent)}
.rfpak input{margin-top:4px;accent-color:var(--accent)}
.rfpak b{font-family:'Archivo';font-stretch:92%;font-size:14.5px;font-weight:600;color:var(--tekst);display:block}
.rfpak span{font-size:13.5px;color:var(--zacht)}
.rfpak i{color:var(--groen);font-style:normal;font-weight:500}
.rfincl{list-style:none;margin:22px 0 16px;font-size:14.5px}
.rfincl li{padding:6px 0 6px 28px;position:relative;color:var(--zacht)}
.rfincl li svg{position:absolute;left:0;top:11px;width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rfnote{font-size:13px;color:var(--zachter)}
.rfnote a{color:var(--accent);text-decoration:underline}
.rfform{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:34px}
.rfform h3{font-size:22px;margin-bottom:6px}
.rfformsub{font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;color:var(--zachter);margin-bottom:26px;
  text-transform:uppercase;letter-spacing:.16em}
.rfform>label,.rfrow label{display:block;font-size:13.5px;font-weight:500;color:var(--tekst);margin-bottom:15px}
.rfform input[type=text],.rfform input[type=email],.rfform input[type=url],.rfform select,.rfform textarea{
  width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--rand2);border-radius:var(--r-s);font:inherit;font-size:14.5px;
  background:var(--bg2);color:var(--tekst)}
.rfform input:focus,.rfform select:focus,.rfform textarea:focus{outline:0;border-color:var(--accent)}
.rfform option{background:var(--paneel);color:var(--tekst)}
.rfrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rflabel{display:block;font-size:13.5px;font-weight:500;color:var(--tekst);margin-bottom:10px}
.rfhint{font-weight:400;font-style:normal;color:var(--zachter)}
.rfmods{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0 0 18px}
.rfmods label{display:flex;align-items:center;gap:9px;font-weight:400;margin:0;font-size:13.5px;cursor:pointer;color:var(--zacht)}
.rfmods input{accent-color:var(--accent);flex-shrink:0}
.rfok{display:flex !important;gap:11px;font-weight:400 !important;font-size:12.5px !important;color:var(--zacht) !important;
  align-items:flex-start;line-height:1.55}
.rfok input{margin-top:3px;accent-color:var(--accent);flex-shrink:0}
.rfok a{color:var(--accent);text-decoration:underline}
.rfna{font-size:12.5px;color:var(--zachter);margin-top:18px;text-align:center;line-height:1.55}

/* ================= FOOTER ================= */
footer{background:var(--bg2);border-top:1px solid var(--rand);color:var(--zacht);padding:70px 0 0;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
footer img.flogo{height:22px;width:auto;margin-bottom:18px}
body:not(.licht) footer img.flogo{filter:brightness(0) invert(1);opacity:.9}
footer p{max-width:280px;line-height:1.65;color:var(--zachter)}
footer h5{font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;color:var(--tekst);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a:hover{color:var(--tekst)}
.fbot{border-top:1px solid var(--rand);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--zachter)}

.ctabar{display:none}

@media(max-width:1040px){
  .wrap,.navin,.chap{padding-left:22px;padding-right:22px}
  .sec{padding:70px 0}
  .head{margin-bottom:36px}
  .menu-btn{display:block}
  nav .btn-s{display:none}
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--rand);
    flex-direction:column;align-items:stretch;padding:14px 22px 24px;gap:0;font-size:13px;max-height:78vh;overflow-y:auto}
  .navlinks.open a,.navlinks.open .top{padding:13px 0}
  .navlinks.open .caret{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:1px solid var(--rand);
    border-radius:0;padding:0 0 6px 14px;min-width:0;margin-bottom:8px;background:none}
  .drop a{padding:9px 0}
  .hero{padding:100px 0 0}
  .tegels{display:none}
  .hero h1{font-size:clamp(33px,9.6vw,48px)}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .shot{padding:40px 0 0}
  .strip{padding:52px 0}
  .lgrid{grid-template-columns:repeat(3,1fr);gap:26px 16px}
  .stappen,.mgrid,.tgrid,.plans,.egrid{grid-template-columns:1fr}
  .egrid{border-left:0}
  .ecel{border-right:0;padding:24px 0}
  .chap{grid-template-columns:1fr;gap:0}
  .chap .stick{position:static;padding:62px 0 4px}
  .chap h2{font-size:28px}
  .panels{padding:18px 0 62px}
  .split{grid-template-columns:1fr}
  .kaart{padding:24px}
  .band{padding:30px;grid-template-columns:1fr;gap:26px}
  .ctaband{padding:34px 22px}
  .knoppen .btn{width:100%}
  .rfwrap{grid-template-columns:1fr;gap:34px}
  .rfform{padding:22px}
  .rfmods{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
  body{padding-bottom:70px}
  .ctabar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:95;background:color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter:blur(16px);border-top:1px solid var(--rand);padding:11px 16px;align-items:center;gap:14px;justify-content:space-between}
  .ctabar b{font-family:'Archivo';font-stretch:92%;font-size:13.5px;font-weight:600;color:var(--tekst);display:block;line-height:1.25}
  .ctabar small{font-size:12px;color:var(--zachter)}
  .ctabar .btn{padding:11px 18px;font-size:13.5px;flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .frame,.pshot{opacity:1 !important;transform:none !important}
}


/* ==========================================================================
   Aanvullingen voor WordPress
   ========================================================================== */

/* De footermenu's komen uit wp_nav_menu als <ul><li><a>. */
footer .menu{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
footer .menu li{margin:0}
footer .menu a{color:inherit}
footer .menu a:hover{color:var(--tekst)}

/* Het logo mag niet uitrekken in de header. */
nav .merk{display:flex;align-items:center}

/* Losse berichten en standaardinhoud uit de editor. */
.artikel{font-size:16.5px;color:var(--zacht)}
.artikel h2,.artikel h3,.artikel h4{color:var(--tekst);margin:34px 0 12px}
.artikel h2{font-size:30px}
.artikel h3{font-size:23px}
.artikel p{margin-bottom:18px}
.artikel a{color:var(--accent);text-decoration:underline}
.artikel ul,.artikel ol{margin:0 0 18px 20px}
.artikel li{margin-bottom:7px}
.artikel img{border-radius:var(--rl);border:1px solid var(--rand);margin:24px 0}
.artikel blockquote{border-left:2px solid var(--accent);padding-left:20px;margin:24px 0;color:var(--tekst)}

/* Paginering op archieven. */
.nav-links{display:inline-flex;gap:8px;align-items:center}
.nav-links .page-numbers{border:1px solid var(--rand);border-radius:var(--r-s);padding:7px 13px;color:var(--zacht)}
.nav-links .page-numbers.current,.nav-links .page-numbers:hover{border-color:var(--accent);color:var(--tekst)}

/* WordPress-eigen klassen. */
.alignleft{float:left;margin:0 22px 18px 0}
.alignright{float:right;margin:0 0 18px 22px}
.aligncenter{margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Toegankelijkheid: duidelijke focus voor toetsenbordgebruikers. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* De admin-balk mag de vaste header niet overlappen. */
.admin-bar nav{top:32px}
@media(max-width:782px){.admin-bar nav{top:46px}}


/* ==========================================================================
   Hover-effect op de tegels
   --------------------------------------------------------------------------
   De tegels onder "Overal aan gedacht" krijgen een zachte volgspot die met de
   muis meebeweegt, een lijntje dat langs de bovenrand intrekt en een icoon dat
   even opveert. Alles subtiel, want het moet strak blijven.

   De positie van de muis komt uit twee variabelen die het script bijhoudt:
   --mx en --my. Staat het script uit, dan zit de spot netjes in het midden.
   ========================================================================== */
.ecel {
	position: relative;
	overflow: hidden;
	--mx: 50%;
	--my: 50%;
	transition: background-color .3s ease;
}

/* De volgspot zelf. */
.ecel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
	background: radial-gradient(
		260px circle at var(--mx) var(--my),
		color-mix(in srgb, var(--accent) 16%, transparent),
		transparent 62%
	);
}
.ecel:hover::before { opacity: 1; }

/* Het lijntje dat langs de bovenrand intrekt. */
.ecel::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	transform: scaleX(0);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ecel:hover::after { transform: scaleX(1); }

/* De inhoud moet boven de spot blijven. */
.ecel > * { position: relative; z-index: 2; }

/* Het icoon veert op en kleurt mee. */
.ecel .eico {
	transition: background-color .32s ease, border-color .32s ease, color .32s ease,
		transform .32s cubic-bezier(.2, .8, .2, 1);
}
.ecel:hover .eico {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	transform: translateY(-3px) rotate(-5deg);
}

.ecel h4 { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.ecel:hover h4 { transform: translateX(3px); }

/* ==========================================================================
   Dezelfde gedachte, ingetogener, op de andere kaarten
   ========================================================================== */
.mtegel,
.tcard,
.stap,
.plan {
	transition: transform .25s cubic-bezier(.2, .8, .2, 1),
		box-shadow .25s ease, border-color .25s ease;
}
.mtegel:hover,
.tcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--rand)); }

.mtegel img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mtegel { overflow: hidden; }
.mtegel:hover img { transform: scale(1.03); }

/* De pijl in een tekstlink schuift mee. */
.btn-g .ico { transition: transform .25s ease; }
.btn-g:hover .ico { transform: translateX(3px); }

/* Wie beweging liever niet ziet, krijgt hem ook niet. */
@media (prefers-reduced-motion: reduce) {
	.ecel::before,
	.ecel::after,
	.ecel .eico,
	.ecel h4,
	.mtegel img { transition: none; }
	.ecel:hover .eico { transform: none; }
	.ecel:hover h4 { transform: none; }
	.mtegel:hover img { transform: none; }
}


/* ==========================================================================
   Mega menu
   --------------------------------------------------------------------------
   Het paneel hangt onder de balk, uitgelijnd met de rest van de pagina. Het
   verschijnt met een korte fade en een klein zetje omhoog, zodat het niet
   knalt maar aankomt.

   De opbouw komt uit inc/mega/*.html, dus je kunt de inhoud aanpassen zonder
   aan de code te komen.
   ========================================================================== */
.heeft-uitklap { position: relative; }

/*
 * Een mega menu hoort niet onder zijn eigen menu-item te hangen maar netjes
 * uitgelijnd met de rest van de pagina: links gelijk met het logo, rechts
 * gelijk met de knop, en altijd op dezelfde plek.
 *
 * Waarom dat lastig was: de balk heeft backdrop-filter voor het matglas-
 * effect, en een element met backdrop-filter wordt automatisch het
 * referentiepunt voor alles wat er absoluut in gepositioneerd staat. Het
 * paneel keek dus naar de balk over de volle schermbreedte en niet naar de
 * container, en liep daardoor links door tot buiten het logo.
 *
 * De oplossing hieronder werkt hoe dan ook: we zetten het paneel op de helft
 * van zijn referentiepunt en schuiven het zijn halve breedte terug. Of dat
 * referentiepunt nu de balk is of de container, het resultaat is hetzelfde:
 * netjes gecentreerd, precies zo breed als de inhoud van de pagina.
 */
nav .navin { position: relative; }
.heeft-uitklap.heeft-mega { position: static; }

/* Het brede paneel. 1100px is de inhoudsbreedte van de balk: 1180 min de
   marge van 40 aan beide kanten. */
.mega {
	position: absolute;
	top: 100%;
	left: 50%;
	right: auto;
	width: min(1100px, calc(100vw - 80px));
	transform: translateX(-50%) translateY(8px);
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius:var(--r-l);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1), visibility .24s;
	overflow: hidden;
	text-transform: none;
	letter-spacing: 0;
	z-index: 60;
}

/* Onzichtbare brug, zodat het paneel niet dichtklapt als je er met de muis
   naartoe beweegt. */
.heeft-mega::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: min(1100px, calc(100vw - 80px));
	transform: translateX(-50%);
	height: 16px;
}

.heeft-mega:hover .mega,
.heeft-mega:focus-within .mega,
.heeft-mega.open .mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.heeft-mega:hover .caret,
.heeft-mega.open .caret { transform: rotate(180deg); }

.mega-in {
	display: grid;
	grid-template-columns: 1fr 1fr .95fr;
	gap: 30px;
	padding: 28px 30px;
}

.mega-kolom { display: flex; flex-direction: column; gap: 2px; }

.mega-kop {
	font-family: 'Archivo', sans-serif;
	font-stretch: 100%;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--zachter);
	margin: 0 0 12px 12px;
}

/* Een regel in het paneel. */
.mega-link {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 11px 12px;
	border-radius:var(--r-s);
	transition: background-color .18s ease;
	position: relative;
}
.mega-link:hover { background: var(--paneel2); }

.mega-link .di {
	width: 34px;
	height: 34px;
	border-radius:var(--r-s);
	background: var(--paneel2);
	border: 1px solid var(--rand);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--accent);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mega-link .di .ico { width: 16px; height: 16px; }
.mega-link:hover .di {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.mega-tekst { display: block; min-width: 0; }
.mega-tekst b {
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tekst);
	display: block;
	line-height: 1.35;
}
.mega-tekst span {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--zachter);
	display: block;
	line-height: 1.45;
}

/* Klein vlaggetje, bijvoorbeeld Basis of Tijdelijk. */
.mega-vlag {
	margin-left: auto;
	align-self: center;
	font-family: 'Archivo', sans-serif;
	font-stretch: 96%;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius:var(--r-xs);
	flex-shrink: 0;
}
.mega-vlag.basis { background: var(--groen-bg); color: var(--groen); }
.mega-vlag.tijd { background: var(--amber-bg); color: var(--amber); }

/* De uitgelichte kaart rechts. */
.mega-kaart {
	display: flex;
	flex-direction: column;
	background: var(--bg2);
	border: 1px solid var(--rand);
	border-radius:var(--r-m);
	padding: 14px;
	transition: border-color .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.mega-kaart:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--rand)); }

.mega-beeld {
	display: block;
	position: relative;
	border-radius:var(--r-s);
	overflow: hidden;
	border: 1px solid var(--rand);
	margin-bottom: 14px;
	line-height: 0;
}
.mega-beeld img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.mega-kaart:hover .mega-beeld img { transform: scale(1.04); }

/* Afspeelknopje voor als er een video achter zit. */
.mega-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mega-play svg {
	width: 42px;
	height: 42px;
	padding: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	fill: #0E1A33;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.mega-kaart:hover .mega-play svg { transform: scale(1.08); }

.mega-label {
	font-family: 'Archivo', sans-serif;
	font-stretch: 100%;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
	display: block;
	margin-bottom: 6px;
}
.mega-kaart b {
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--tekst);
	display: block;
	margin-bottom: 5px;
}
.mega-uitleg {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--zachter);
	display: block;
	line-height: 1.5;
	margin-bottom: 12px;
}
.mega-meer {
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}
.mega-meer .ico { width: 15px; height: 15px; transition: transform .22s ease; }
.mega-kaart:hover .mega-meer .ico { transform: translateX(3px); }

/* De balk onderin. */
.mega-voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 30px;
	border-top: 1px solid var(--rand);
	background: var(--bg2);
}
.mega-voet-tekst {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--zacht);
	text-transform: none;
	letter-spacing: 0;
}
.mega-voet-tekst .ico { width: 15px; height: 15px; stroke: var(--groen); stroke-width: 2.4; }
.mega-voet .btn { padding: 10px 20px; font-size: 13.5px; flex-shrink: 0; }

/* De knop die het paneel opent, is een button en moet eruitzien als de rest. */
.navlinks .top {
	background: none;
	border: 0;
	padding: 22px 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Onder 1200px heeft de balk minder ruimte aan de zijkant. */
@media (max-width: 1200px) and (min-width: 1041px) {
	.mega,
	.heeft-mega::after { width: calc(100vw - 44px); }
}

@media (max-width: 1040px) {
	/* In het uitgeklapte menu op mobiel wordt het paneel een gewone lijst. */
	.heeft-uitklap.heeft-mega { position: relative; }
	.mega {
		position: static;
		transform: none;
		width: auto;
		left: auto;
		right: auto;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		border: 0;
		border-left: 1px solid var(--rand);
		border-radius: 0;
		box-shadow: none;
		background: none;
		display: none;
		margin: 4px 0 10px;
	}
	.heeft-mega.open .mega { display: block; }
	.heeft-mega::after { display: none; }

	.mega-in { grid-template-columns: 1fr; gap: 14px; padding: 8px 0 8px 12px; }
	.mega-kop { margin-left: 0; }
	.mega-link { padding: 9px 0; }
	.mega-kaart { display: none; }
	.mega-voet { flex-direction: column; align-items: stretch; padding: 12px 0 0; background: none; }
	.mega-voet .btn { width: 100%; }
	.navlinks .top { width: 100%; justify-content: space-between; padding: 13px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mega, .mega-beeld img, .mega-meer .ico, .mega-play svg { transition: none; }
}


/* ==========================================================================
   Paginahero
   Korte kop bovenaan een losse pagina. Zelfde toon als de homepage, maar
   zonder de zwevende icoontjes, want die horen bij de voorpagina.
   ========================================================================== */
/* Onder de kop hoort lucht. Zonder die ruimte plakt de eerstvolgende sectie
   er tegenaan, en dat valt vooral op als die sectie een eigen achtergrond
   heeft: dan begint de gekleurde band pal onder de tekst. */
.paginahero { padding: 150px 0 96px; text-align: center; }
.paginahero h1 {
	font-size: clamp(34px, 5.4vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}
.paginahero h1 span { color: var(--accent); }
.paginahero .lead {
	font-size: clamp(15.5px, 1.6vw, 18px);
	color: var(--zacht);
	max-width: 560px;
	margin: 0 auto 28px;
}
.paginahero .hero-cta { margin-bottom: 24px; }
.paginahero .usps { justify-content: center; }

/* ==========================================================================
   Calculator
   ========================================================================== */
/* De calculator van Elfsight heeft zijn eigen indeling met het invulgedeelte
   links en de uitkomst rechts. Die heeft ruimte nodig, dus hij staat over de
   volle breedte. De staffels komen eronder. */
.calc-embed {
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: var(--rl);
	padding: 28px;
	min-height: 320px;
	margin-bottom: 20px;
}
.calc-embed .es-embed-root,
.calc-embed [class*="EmbedRoot"] { max-width: none !important; }

.staffelgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: start;
}
/* De calculator komt van Elfsight en heeft zijn eigen witte opmaak. In de
   donkere versie zetten we er een lichte plaat onder, anders wordt het
   onleesbaar. */
body:not(.licht) .calc-embed { background: #fff; }
body:not(.licht) .calc-embed * { color: #111; }

.staffel {
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: var(--rl);
	padding: 28px;
}
.staffel h3 { font-size: 18px; margin-bottom: 16px; }
.staffel .staffelkop { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rand); }

.staffelrij {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 11px 0;
	border-top: 1px solid var(--rand);
}
.staffelrij:first-of-type { border-top: 0; }
.staffelrij b {
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tekst);
	flex-shrink: 0;
}
.staffelrij span {
	font-size: 13.5px;
	color: var(--zacht);
	text-align: right;
}
.staffelnoot {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--rand);
	font-size: 13.5px;
	color: var(--zacht);
}
.staffelnoot .ico { stroke: var(--groen); stroke-width: 2.4; flex-shrink: 0; margin-top: 3px; }

/* ==========================================================================
   Gratis proef, met de stappen ernaast
   ========================================================================== */
.proef {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}
.proef h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 16px; }
.proef p { color: var(--zacht); font-size: 16px; margin-bottom: 16px; }
.proef .knoppen { margin-top: 26px; }

.proefstappen { display: flex; flex-direction: column; }
.proefstap {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--rand);
	position: relative;
}
.proefstap:first-child { border-top: 0; padding-top: 0; }
.proefnr {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--paneel2);
	border: 1px solid var(--rand);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
}
.proefstap b {
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--tekst);
	display: block;
	margin-bottom: 3px;
}
.proefstap span:not(.proefnr) { font-size: 13.5px; color: var(--zacht); display: block; }

/* ==========================================================================
   Opstartdiensten
   ========================================================================== */
.dienstgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.dienst {
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: var(--rl);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, box-shadow .22s ease;
}
a.dienst:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--rand));
	box-shadow: var(--schaduw);
}
.dienst.gratis { border-top: 2px solid var(--groen); }
.dienst.nu-gratis { border-top: 2px solid var(--amber); }

.dienst-prijs {
	font-family: 'Archivo', sans-serif;
	font-stretch: 88%;
	font-size: 26px;
	font-weight: 700;
	color: var(--tekst);
	display: block;
	margin-bottom: 12px;
	line-height: 1;
}
.dienst-prijs s { color: var(--zachter); font-size: 17px; margin-right: 7px; font-weight: 400; }
.dienst.gratis .dienst-prijs { color: var(--groen); }
.dienst.nu-gratis .dienst-prijs { color: var(--amber); font-size: 20px; }

.dienst h3 { font-size: 17px; margin-bottom: 8px; }
.dienst p { font-size: 13.5px; color: var(--zacht); flex: 1; margin-bottom: 18px; }
.dienst .label { margin-bottom: 0; }

/* ==========================================================================
   Veelgestelde vragen
   Werkt met het details-element, dus zonder script.
   ========================================================================== */
.vragen { max-width: 800px; margin: 0 auto; }
.vraag {
	border-bottom: 1px solid var(--rand);
}
.vraag:first-child { border-top: 1px solid var(--rand); }

.vraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	cursor: pointer;
	list-style: none;
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--tekst);
	transition: color .18s ease;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--accent); }

.vraag summary .ico {
	width: 18px;
	height: 18px;
	stroke: var(--zachter);
	stroke-width: 2;
	flex-shrink: 0;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), stroke .2s ease;
}
.vraag[open] summary .ico { transform: rotate(45deg); stroke: var(--accent); }

.vraag-in { padding: 0 4px 22px; }
.vraag-in p { font-size: 15px; color: var(--zacht); max-width: 700px; }
.vraag-in a { color: var(--accent); text-decoration: underline; }

@media (max-width: 1040px) {
	.paginahero { padding: 104px 0 56px; }
	.paginahero h1 { font-size: clamp(30px, 8.6vw, 42px); }
	.staffelgrid { grid-template-columns: 1fr; }
	.staffel { padding: 22px; }
	.staffelrij { flex-direction: column; gap: 3px; }
	.staffelrij span { text-align: left; }
	.proef { grid-template-columns: 1fr; gap: 34px; }
	.dienstgrid { grid-template-columns: 1fr; }
	.vraag summary { font-size: 15.5px; padding: 18px 0; }
}


/* ==========================================================================
   Functiepagina's
   --------------------------------------------------------------------------
   Twee onderdelen: uitgelichte rijen met een schermafbeelding ernaast, en
   daaronder een raster met de overige functies. De rijen wisselen om en om
   van kant, zodat de pagina niet als een lijst aanvoelt.
   ========================================================================== */
.functie {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 60px;
	align-items: center;
	padding: 70px 0;
	border-top: 1px solid var(--rand);
}
.functie:first-of-type { border-top: 0; }
.functie:nth-of-type(even) .functie-beeld { order: -1; }

.functie h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 16px; }
.functie > div > p { color: var(--zacht); font-size: 16.5px; margin-bottom: 22px; }

.functie-beeld {
	border: 1px solid var(--rand);
	border-radius: var(--rl);
	overflow: hidden;
	background: var(--paneel);
	box-shadow: var(--schaduw);
}
.functie-beeld img { width: 100%; display: block; }

.functie-lijst {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 24px;
	font-size: 14.5px;
}
.functie-lijst li { padding: 6px 0 6px 26px; position: relative; color: var(--tekst); }
.functie-lijst li svg {
	position: absolute; left: 0; top: 11px; width: 15px; height: 15px;
	stroke: var(--accent); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Raster met de overige functies. */
.fkaarten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.fkaart {
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: var(--rl);
	padding: 28px 26px;
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, box-shadow .22s ease;
}
.fkaart:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--rand));
	box-shadow: var(--schaduw);
}
.fkaart .eico {
	width: 38px; height: 38px; border-radius:var(--r-s);
	background: var(--paneel2); border: 1px solid var(--rand);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px; color: var(--accent);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.fkaart:hover .eico { background: var(--accent); border-color: var(--accent); color: #fff; }
.fkaart h4 { font-size: 17px; margin-bottom: 7px; }
.fkaart > p { font-size: 14px; color: var(--zacht); margin-bottom: 14px; }
.fkaart ul { list-style: none; font-size: 13.5px; color: var(--zacht); }
.fkaart li { padding: 4px 0 4px 18px; position: relative; }
.fkaart li::before {
	content: ""; position: absolute; left: 0; top: 12px;
	width: 5px; height: 5px; border-radius: 50%; background: var(--rand2);
}

/* Snelkoppelingen bovenaan een lange pagina. */
.index {
	display: flex; flex-wrap: wrap; gap: 8px;
	justify-content: center; margin-top: 30px;
}
.index a {
	font-family: 'Archivo', sans-serif; font-stretch: 96%;
	font-size: 13px; font-weight: 600;
	border: 1px solid var(--rand); border-radius: 999px;
	padding: 8px 16px; color: var(--zacht);
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.index a:hover { border-color: var(--accent); color: var(--accent); background: var(--paneel); }

/* Groot citaat van een klant. */
.citaat {
	display: grid; grid-template-columns: auto 1fr; gap: 34px;
	align-items: start;
	background: var(--paneel); border: 1px solid var(--rand);
	border-radius: var(--rl); padding: 44px;
}
.citaat img {
	width: 96px; height: 96px; border-radius: 50%;
	object-fit: cover; border: 1px solid var(--rand);
}
.citaat blockquote {
	font-family: 'Archivo', sans-serif; font-stretch: 92%;
	font-size: clamp(17px, 2.1vw, 22px); font-weight: 500;
	line-height: 1.45; color: var(--tekst); margin-bottom: 20px;
}
.citaat cite { font-style: normal; font-size: 14px; color: var(--zacht); }
.citaat cite b { display: block; font-family: 'Archivo'; font-stretch: 92%; font-weight: 600; color: var(--tekst); font-size: 15px; }
.citaat .tster { margin-bottom: 14px; }

/* Grote keuzekaarten, voor de productoverzichtspagina. */
.keuzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.keuze {
	display: flex; flex-direction: column;
	background: var(--paneel); border: 1px solid var(--rand);
	border-radius: var(--rl); overflow: hidden;
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, box-shadow .22s ease;
}
.keuze:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--rand)); box-shadow: var(--schaduw); }
.keuze .beeld { border-bottom: 1px solid var(--rand); overflow: hidden; line-height: 0; }
.keuze .beeld img { width: 100%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.keuze:hover .beeld img { transform: scale(1.04); }
.keuze .body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.keuze h3 { font-size: 20px; margin-bottom: 8px; }
.keuze p { font-size: 14.5px; color: var(--zacht); flex: 1; margin-bottom: 18px; }
.keuze .label { margin-bottom: 14px; }

@media (max-width: 1040px) {
	.functie { grid-template-columns: 1fr; gap: 26px; padding: 46px 0; }
	.functie:nth-of-type(even) .functie-beeld { order: 0; }
	.functie h3 { font-size: 24px; }
	.functie-lijst { grid-template-columns: 1fr; }
	.fkaarten, .keuzes { grid-template-columns: 1fr; }
	.citaat { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
	.citaat img { width: 68px; height: 68px; }
}


/* Staat er nog geen foto bij een citaat, dan tonen we de initialen. Vervang
   de span door een img zodra de foto in de mediabibliotheek staat. */
.citaat-initialen {
	width: 96px; height: 96px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--paneel2); border: 1px solid var(--rand);
	font-family: 'Archivo', sans-serif; font-stretch: 88%;
	font-size: 30px; font-weight: 700; color: var(--accent);
	flex-shrink: 0;
}
@media (max-width: 1040px) {
	.citaat-initialen { width: 68px; height: 68px; font-size: 22px; }
}


/* ==========================================================================
   Klantverhalen
   Een metselwerk-indeling, zodat verhalen van verschillende lengte netjes
   onder elkaar vallen zonder gaten.
   ========================================================================== */
.verhalen { columns: 3; column-gap: 18px; }
.verhaal {
	break-inside: avoid;
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: var(--rl);
	padding: 28px;
	margin-bottom: 18px;
	display: inline-block;
	width: 100%;
	transition: border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.verhaal:hover {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--rand));
	transform: translateY(-3px);
	box-shadow: var(--schaduw);
}
.verhaal-wie { display: flex; gap: 13px; align-items: center; margin-bottom: 16px; }
.verhaal-wie .citaat-initialen { width: 46px; height: 46px; font-size: 15px; }
.verhaal-wie b {
	font-family: 'Archivo', sans-serif; font-stretch: 92%;
	font-size: 15px; font-weight: 600; color: var(--tekst);
	display: block; line-height: 1.3;
}
.verhaal-wie span:not(.citaat-initialen) { font-size: 12.5px; color: var(--zachter); display: block; }
.verhaal .tster { font-size: 13px; margin-bottom: 12px; }
.verhaal p { font-size: 14.5px; color: var(--zacht); margin-bottom: 12px; }
.verhaal p:last-child { margin-bottom: 0; }

/* De ledenlijst uit de community. */
.ledenlijst {
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: var(--rl);
	padding: 28px;
	min-height: 200px;
}

@media (max-width: 1040px) {
	.verhalen { columns: 1; }
}
@media (min-width: 1041px) and (max-width: 1300px) {
	.verhalen { columns: 2; }
}


/* ==========================================================================
   Calculator: het resultaat scrollt mee
   --------------------------------------------------------------------------
   De calculator van Elfsight zet het invulgedeelte links en het zwarte
   resultatenblok rechts. Schuif je onderin de sliders, dan is de uitkomst
   uit beeld. Hieronder blijft dat blok plakken zodra je bij dat gedeelte
   aankomt, zodat je het bedrag ziet veranderen terwijl je schuift.

   Let op de manier van selecteren: Elfsight zet achter elke class een
   willekeurige code, bijvoorbeeld results__Container-sc-f92cfc7b-0. Die code
   verandert bij een update van hun kant, het stuk ervoor niet. Daarom kijken
   we of de class dat stuk bevat in plaats van er precies op te matchen.
   ========================================================================== */
@media (min-width: 900px) {
	.calc-embed [class*="widget__Layout"] {
		align-items: flex-start;
	}

	.calc-embed [class*="results__Container"] {
		position: sticky;
		/* De menubalk is ongeveer 60px hoog, dus daar blijven we onder. */
		top: 92px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
}

/* Sticky werkt niet als een tussenliggend blok zijn inhoud afknipt. */
.calc-embed,
.calc-embed [class*="EmbedRoot"],
.calc-embed [class*="WidgetBackground"],
.calc-embed [class*="widget__Container"] {
	overflow: visible;
}


/* Overslaan-link. Alleen zichtbaar als je met de tab-toets navigeert. */
.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--accent);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 10px 0;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 14px;
}
.overslaan:focus { left: 0; }


/* ==========================================================================
   De afrondingsschaal
   --------------------------------------------------------------------------
   Eerder stonden hier twaalf verschillende waarden door elkaar, van 5 tot 22
   pixels. Dat zie je niet meteen, maar het maakt een ontwerp onrustig. Nu is
   het teruggebracht tot vier maten plus de ronde vormen.

   xs  kleine labels en vlaggetjes
   s   knoppen, invoervelden en icoontjes
   m   kaarten binnen een kaart, afbeeldingen in een kader
   l   panelen, secties en grote kaarten
   ========================================================================== */
:root {
	--r-xs: 6px;
	--r-s: 10px;
	--r-m: 14px;
	--r-l: 18px;
	--rl: var(--r-l);
	--r: var(--r-m);
}


/* ==========================================================================
   Footer, aanvullingen
   ========================================================================== */
.fgrid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; }

.fsocial { list-style: none; display: flex; gap: 8px; margin-top: 20px; padding: 0; }
.fsocial li { margin: 0; }
.fsocial a {
	width: 34px; height: 34px; border-radius: var(--r-s);
	border: 1px solid var(--rand);
	display: flex; align-items: center; justify-content: center;
	color: var(--zacht);
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.fsocial a:hover { color: var(--tekst); border-color: var(--rand2); background: var(--paneel); }
.fsocial .ico { width: 16px; height: 16px; }

.fcontact p { margin-bottom: 14px; line-height: 1.7; max-width: none; }
.fcontact a { color: var(--zacht); }
.fcontact a:hover { color: var(--tekst); }

.fjuridisch { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.fjuridisch a { color: var(--zachter); }
.fjuridisch a:hover { color: var(--tekst); }

@media (max-width: 1040px) {
	.fgrid { grid-template-columns: 1fr 1fr; }
	.fcontact { grid-column: 1 / -1; }
}


/* Een functiekaart die tegelijk een link is. */
a.fkaart { display: block; }
a.fkaart .mega-meer { margin-top: 6px; }
a.fkaart:hover .eico { background: var(--accent); border-color: var(--accent); color: #fff; }


/* ==========================================================================
   Knopkleur apart van accentkleur
   --------------------------------------------------------------------------
   Het accentblauw wordt op twee manieren gebruikt: als tekstkleur voor links
   en iconen, en als achtergrond van een knop. Voor die twee gelden andere
   eisen.

   Op een donkere achtergrond wil je een lichte, heldere blauwe tekst, maar
   diezelfde tint als knopvlak geeft met witte tekst maar 3,8 tegen 1. Dat is
   te weinig, de norm is 4,5. Daarom is er een aparte, iets diepere tint voor
   knopvlakken. Zichtbaar is het verschil klein, leesbaar is het verschil
   groot.
   ========================================================================== */
:root {
	--knop: #2E6FE8;        /* 4,6 : 1 met witte tekst */
	--knop-hover: #1f62d1;  /* 5,6 : 1 */
}
body.licht {
	--knop: #046bd2;        /* 5,2 : 1 */
	--knop-hover: #0b74d9;  /* 4,7 : 1 */
}


/* ==========================================================================
   Gewone tekstpagina's
   Voor pagina's zonder eigen blokken, zoals de voorwaarden, het
   privacyreglement of de releasekalender. Die hoeven niet gebouwd te worden,
   ze krijgen hier automatisch een leesbare opmaak.
   ========================================================================== */
.tekstpagina { padding-top: 150px; }
.tekstpagina .head { max-width: 760px; margin-bottom: 40px; }
.tekstpagina .artikel { max-width: 760px; font-size: 16.5px; color: var(--zacht); }
.tekstpagina .artikel h2 { font-size: 28px; margin: 40px 0 14px; color: var(--tekst); }
.tekstpagina .artikel h3 { font-size: 21px; margin: 32px 0 12px; color: var(--tekst); }
.tekstpagina .artikel h4 { font-size: 17px; margin: 26px 0 10px; color: var(--tekst); }
.tekstpagina .artikel p { margin-bottom: 18px; }
.tekstpagina .artikel a { color: var(--accent); text-decoration: underline; }
.tekstpagina .artikel ul,
.tekstpagina .artikel ol { margin: 0 0 20px 22px; list-style: disc; }
.tekstpagina .artikel ol { list-style: decimal; }
.tekstpagina .artikel li { margin-bottom: 8px; padding: 0; }
.tekstpagina .artikel table {
	width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 15px;
}
.tekstpagina .artikel th,
.tekstpagina .artikel td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rand); }
.tekstpagina .artikel th { color: var(--tekst); font-weight: 600; }
.tekstpagina .artikel blockquote {
	border-left: 2px solid var(--accent); padding-left: 20px; margin: 24px 0; color: var(--tekst);
}
.tekstpagina .artikel img { border-radius: var(--r-m); border: 1px solid var(--rand); margin: 24px 0; }

@media (max-width: 1040px) {
	.tekstpagina { padding-top: 104px; }
}


/* ==========================================================================
   Harde schaduwen
   --------------------------------------------------------------------------
   Geen vervaging, geen gloed: een scherpe kopie van de vorm, een paar pixels
   verschoven. Dat geeft diepte zonder zweverig te worden en past bij de
   strakke lijn van de rest.

   Twee maten, en een variant met een tint van het accentblauw voor als iets
   de aandacht mag krijgen.
   ========================================================================== */
:root {
	--hard-kleur: rgba(0, 0, 0, .38);
	--hard-accent: rgba(58, 125, 255, .30);
	--hard-s: 4px 4px 0 var(--hard-kleur);
	--hard-m: 7px 7px 0 var(--hard-kleur);
	--hard-l: 10px 10px 0 var(--hard-kleur);
	--hard-s-accent: 4px 4px 0 var(--hard-accent);
	--hard-m-accent: 7px 7px 0 var(--hard-accent);
}
body.licht {
	--hard-kleur: #E4EAF2;
	--hard-accent: rgba(4, 107, 210, .18);
}

/* Kaarten krijgen de harde schaduw en schuiven er bij hover naartoe. */
.fkaart,
.mtegel,
.keuze,
.dienst,
.verhaal,
.tcard,
.stap,
.mega-kaart {
	box-shadow: var(--hard-s);
	transition: transform .18s cubic-bezier(.2, .8, .2, 1),
		box-shadow .18s cubic-bezier(.2, .8, .2, 1),
		border-color .18s ease;
}

.fkaart:hover,
.mtegel:hover,
a.keuze:hover,
a.dienst:hover,
.verhaal:hover,
.tcard:hover,
.stap:hover,
.mega-kaart:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--hard-m-accent);
}

/* Het uitgelichte pakket springt er sowieso uit. */
.plan.hi { box-shadow: var(--hard-m-accent); }
.plan.hi:hover { transform: translate(-3px, -3px); box-shadow: var(--hard-l); }

/* De schermafbeelding bovenaan een pagina. */
.frame,
.functie-beeld,
.pshot,
.vwrap { box-shadow: var(--hard-m); }

/* De knop krijgt hem ook, maar kleiner, anders wordt het te veel. */
.btn-p { box-shadow: var(--hard-s-accent); }
.btn-p:hover { box-shadow: 6px 6px 0 var(--hard-accent); transform: translate(-1px, -1px); }
.btn-p:active { box-shadow: 2px 2px 0 var(--hard-accent); transform: translate(1px, 1px); }

/* De vaste balk onderaan op mobiel niet, die zweeft al. */
.ctabar .btn-p { box-shadow: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.fkaart, .mtegel, .keuze, .dienst, .verhaal, .tcard, .stap,
	.mega-kaart, .plan.hi, .btn-p { transition: none; }
	.fkaart:hover, .mtegel:hover, a.keuze:hover, a.dienst:hover,
	.verhaal:hover, .tcard:hover, .stap:hover, .mega-kaart:hover,
	.plan.hi:hover, .btn-p:hover { transform: none; }
}


/* ==========================================================================
   Mega menu, tweede ronde
   --------------------------------------------------------------------------
   Vier dingen erbij:

   1. Een harde schaduw in plaats van de vervaagde, zodat het paneel bij de
      rest past.
   2. Een accentstreepje bovenaan dat meeschuift naar het menu-item dat je
      aanwijst. Het paneel staat altijd op dezelfde plek, dus zonder zo'n
      streepje zie je niet waar het bij hoort.
   3. De regels komen één voor één binnen in plaats van allemaal tegelijk.
   4. Een genummerd hoekje bij de uitgelichte kaart.
   ========================================================================== */
.mega {
	box-shadow: var(--hard-l);
	overflow: visible;
}

/* Het paneel knipt zijn eigen hoeken af, maar de inhoud moet netjes binnen
   de afronding blijven. */
.mega-in { border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden; }
.mega-voet { border-radius: 0 0 var(--r-l) var(--r-l); }

/* Het meeschuivende streepje. De positie komt uit --pijl-x, die door het
   script wordt gezet op het midden van het menu-item dat openstaat. */
.mega::before {
	content: "";
	position: absolute;
	top: -1px;
	left: var(--pijl-x, 60px);
	width: 46px;
	height: 2px;
	background: var(--accent);
	border-radius: 0 0 2px 2px;
	transform: translateX(-50%);
	transition: left .32s cubic-bezier(.2, .8, .2, 1);
	opacity: 0;
}
.heeft-mega:hover .mega::before,
.heeft-mega.open .mega::before { opacity: 1; }

/* De regels komen één voor één binnen. */
.heeft-mega:hover .mega-link,
.heeft-mega.open .mega-link {
	animation: megaRegel .34s cubic-bezier(.2, .8, .2, 1) both;
}
.mega-kolom .mega-link:nth-child(2) { animation-delay: .02s; }
.mega-kolom .mega-link:nth-child(3) { animation-delay: .06s; }
.mega-kolom .mega-link:nth-child(4) { animation-delay: .10s; }
.mega-kolom .mega-link:nth-child(5) { animation-delay: .14s; }

@keyframes megaRegel {
	from { opacity: 0; transform: translateY(7px); }
	to   { opacity: 1; transform: none; }
}

.heeft-mega:hover .mega-kaart,
.heeft-mega.open .mega-kaart {
	animation: megaRegel .38s cubic-bezier(.2, .8, .2, 1) .1s both;
}

/* Een streepje links van de regel die je aanwijst. */
.mega-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2px;
	height: 0;
	background: var(--accent);
	border-radius: 2px;
	transform: translateY(-50%);
	transition: height .22s cubic-bezier(.2, .8, .2, 1);
}
.mega-link:hover::before { height: 60%; }

/* De uitgelichte kaart met een harde rand in plaats van een vage. */
.mega-kaart { box-shadow: var(--hard-s); }
.mega-kaart:hover { transform: translate(-3px, -3px); box-shadow: var(--hard-m-accent); }
.mega-beeld { border-radius: var(--r-m); box-shadow: var(--hard-s); }

/* De balk onderin krijgt een fijn streepjespatroon, net genoeg om hem van de
   rest te onderscheiden. */
.mega-voet {
	background-image: repeating-linear-gradient(
		-45deg,
		transparent 0 7px,
		color-mix(in srgb, var(--rand) 55%, transparent) 7px 8px
	);
}

/* Toetsenbordgebruikers moeten net zo goed zien waar ze zijn. */
.mega-link:focus-visible {
	background: var(--paneel2);
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.heeft-mega:hover .mega-link,
	.heeft-mega.open .mega-link,
	.heeft-mega:hover .mega-kaart,
	.heeft-mega.open .mega-kaart { animation: none; }
	.mega::before { transition: none; }
}

@media (max-width: 1040px) {
	.mega { box-shadow: none; }
	.mega::before { display: none; }
	.mega-in { overflow: visible; border-radius: 0; }
	.mega-voet { background-image: none; }
	.heeft-mega.open .mega-link,
	.heeft-mega.open .mega-kaart { animation: none; }
}


/* ==========================================================================
   Ankerlinks onder de vaste balk
   --------------------------------------------------------------------------
   Er staan vijftien ankerlinks op de site, zoals #calculator en #tarieven.
   De menubalk staat vast bovenaan, dus zonder deze regel scrolt de browser
   het doel precies onder die balk en lijkt het alsof je op de verkeerde plek
   uitkomt. Met scroll-margin houdt hij er rekening mee.
   ========================================================================== */
[id] { scroll-margin-top: 88px; }

@media (max-width: 1040px) {
	[id] { scroll-margin-top: 74px; }
}


/* ==========================================================================
   NIEUWERE TECHNIEKEN
   --------------------------------------------------------------------------
   Alles hieronder is een verbetering bovenop wat er al staat. Kan een browser
   het niet, dan valt hij terug op het gedrag van hiervoor. Er gaat dus nooit
   iets stuk, het wordt alleen beter waar het kan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Koppen die netjes afbreken
   text-wrap: balance verdeelt een kop over de regels zodat er nooit één
   los woord op de laatste regel blijft hangen. pretty doet hetzelfde voor
   lopende tekst, maar dan alleen voor de laatste regel. Kost niets en het
   scheelt enorm in hoe verzorgd een pagina oogt.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.mega-tekst b,
.tcard h4,
.fkaart h4 { text-wrap: balance; }

p, .lead, .mega-uitleg, li { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   2. Overgang tussen pagina's
   De browser maakt zelf een zachte overvloeier als je doorklikt, in plaats
   van het harde wit tussendoor. Werkt alleen als de browser het ondersteunt.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: uitvloeien .18s ease both; }
::view-transition-new(root) { animation: invloeien .26s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes uitvloeien { to { opacity: 0; } }
@keyframes invloeien { from { opacity: 0; translate: 0 8px; } }

/* Eerder gaf ik de balk en de footer een eigen naam, zodat ze bleven staan
   tijdens de overgang. Dat maakt er alleen wel een aparte laag van, en het
   mega-paneel hangt aan de balk vast. Daardoor ging het paneel verkeerd
   staan. De overgang werkt zonder die namen prima, dus ze zijn eruit. */

/* --------------------------------------------------------------------------
   3. Inhoud die meekomt tijdens het scrollen
   Dit gebeurt nu volledig in de browser zelf, zonder script. Let op het
   gebruik van translate in plaats van transform: dat zijn aparte
   eigenschappen, dus het opveren bij hover blijft gewoon werken.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.functie,
		.fkaart,
		.verhaal,
		.stap,
		.keuze,
		.dienst,
		.ecel,
		.mtegel,
		.tcard,
		.plan {
			animation: opkomen linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
	}
}

@keyframes opkomen {
	from { opacity: 0; translate: 0 18px; }
	to   { opacity: 1; translate: 0 0; }
}

/* --------------------------------------------------------------------------
   4. Voortgangsbalkje bovenaan
   Een dunne streep die meegroeit met hoe ver je op de pagina bent. Ook dit
   draait in de browser, dus het kost geen enkel script.
   -------------------------------------------------------------------------- */
.voortgang {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	background: var(--accent);
	transform-origin: 0 50%;
	scale: 0 1;
	opacity: .9;
}

@supports (animation-timeline: scroll()) {
	.voortgang {
		animation: vullen linear both;
		animation-timeline: scroll(root block);
	}
}

@keyframes vullen { to { scale: 1 1; } }

/* --------------------------------------------------------------------------
   5. Kaarten die naar hun eigen ruimte kijken
   Een kaart weet nu hoe breed hij zelf is, in plaats van hoe breed het scherm
   is. Staat dezelfde kaart in een smalle kolom, dan wordt hij vanzelf
   compacter. Handig zodra blokken in Elementor verplaatst worden.
   -------------------------------------------------------------------------- */
.fkaarten, .keuzes, .egrid, .mgrid, .stappen, .plans { container-type: inline-size; }

@container (max-width: 330px) {
	.fkaart, .keuze .body, .dienst { padding: 20px 18px; }
	.fkaart h4, .keuze h3 { font-size: 16px; }
	.fkaart > p { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   6. Lange pagina's sneller tekenen: teruggedraaid

   Hier stond content-visibility op de secties. Dat versnelt het tekenen, maar
   het zet ook contain: layout style paint aan, en dat knipt alles af wat
   buiten de sectie uitsteekt. Precies wat onze harde schaduwen doen, en wat
   een uitklappend paneel nodig heeft. Het scheelde milliseconden en kostte
   zichtbare fouten, dus het is eruit.

   Wil je het toch, zet het dan alleen op secties zonder schaduw en zonder
   iets dat uitklapt, en geef ze een vaste hoogte mee.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. De volgspot op de tegels vloeiend maken
   Door de twee variabelen als lengte aan te melden weet de browser hoe hij
   ertussen moet rekenen, en beweegt de gloed mee in plaats van te springen.
   -------------------------------------------------------------------------- */
@property --mx {
	syntax: '<length-percentage>';
	inherits: false;
	initial-value: 50%;
}
@property --my {
	syntax: '<length-percentage>';
	inherits: false;
	initial-value: 50%;
}

/* --------------------------------------------------------------------------
   8. Kleine dingen die schelen
   -------------------------------------------------------------------------- */

/* Geen springende pagina meer als er een scrollbalk bijkomt of verdwijnt. */
html { scrollbar-gutter: stable; }

/* Een nette scrollbalk die bij het thema past. */
* { scrollbar-color: var(--rand2) transparent; scrollbar-width: thin; }

/* Werkt iemand met hoog contrast, dan mogen onze eigen kleuren wijken. */
@media (forced-colors: active) {
	.btn, .fkaart, .mega, .kaart { border: 1px solid; }
	.voortgang { background: Highlight; }
}

/* Wie doorzichtigheid liever niet ziet, krijgt een dichte balk. */
@media (prefers-reduced-transparency: reduce) {
	nav { background: var(--bg); backdrop-filter: none; }
	.ctabar { background: var(--bg); backdrop-filter: none; }
}

/* Afdrukken: alles wat alleen op het scherm hoort gaat eraf. */
@media print {
	nav, .ctabar, .voortgang, .mega, .footcta, .ctaband { display: none !important; }
	body { background: #fff; color: #000; }
	.sec { padding: 20px 0; content-visibility: visible; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}


/* ==========================================================================
   De domeinzoeker met rust laten
   --------------------------------------------------------------------------
   De zoeker komt uit een eigen plugin en heeft zijn eigen opmaak. Onze regels
   voor knoppen, invoervelden en lijsten binnen de inhoud gingen daar overheen,
   waardoor het zoekveld ineens vierkant werd en de knoppen de vorm van het
   thema kregen.

   Hieronder zetten we die overname terug voor alles wat binnen .ard staat.
   ========================================================================== */
html body .ard button,
html body .entry-content .ard button {
	font-family: 'Archivo', sans-serif;
	border-radius: 999px;
	background: var(--knop);
	color: #fff;
	border: 0;
	min-height: 0;
	box-shadow: none;
}
html body .ard .ard-knop-klein { border-radius: 999px; }
html body .ard .ard-terug {
	background: none;
	color: var(--zacht);
	border-radius: 0;
	padding: 0;
}
html body .ard .ard-terug:hover { background: none; color: var(--tekst); }
html body .ard .ard-rij-uit.is-bezet .ard-knop {
	background: transparent;
	color: var(--tekst);
	border: 1px solid var(--rand2);
}

html body .ard input[type="text"],
html body .ard input[type="email"],
html body .ard input[type="tel"],
html body .ard textarea,
html body .entry-content .ard input,
html body .entry-content .ard textarea {
	border-radius: var(--r-s);
	background: var(--paneel2);
	border: 1px solid var(--rand2);
	box-shadow: none;
}
html body .ard .ard-veld { border-radius: 999px; }
html body .ard .ard-veld input {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 12px 0;
	margin: 0;
}

html body .ard ul { margin: 0; padding: 0; list-style: none; }
html body .ard li { margin: 0; padding: 0; }
html body .ard li::before { content: none; }
html body .ard a { color: inherit; }

/*
 * Hier stond eerder een regel die alle alinea's in de zoeker op nul marge
 * zette. Dat weegt zwaarder dan de marges die de zoeker zelf instelt, dus
 * plakte de hinttekst onder het zoekveld tegen de rand aan. De zoeker regelt
 * zijn eigen marges prima, dus die regel is eruit.
 */
html body .ard label { margin-bottom: 15px; }


/* ==========================================================================
   Bescherming van het mega menu en de domeinzoeker
   --------------------------------------------------------------------------
   Astra en het thema zetten opmaak op algemene elementen: marges op lijsten,
   randen onder links, vulling in knoppen. Binnen deze twee onderdelen willen
   we daar niets van, want ze regelen hun eigen opmaak tot op de pixel.

   Let op de manier van schrijven: :where() telt niet mee voor het gewicht van
   een regel. Deze reset weegt dus nul, en verliest van iedere echte regel die
   we zelf schrijven. Daardoor kan hij veilig helemaal onderaan staan zonder
   onze eigen opmaak omver te gooien, en vangt hij alleen wat er van buitenaf
   binnenkomt.
   ========================================================================== */
:where(.mega, .drop, .ard) :where(a, span, b, i, em, small, div, p, ul, ol, li, label, button, form, figure, blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	line-height: inherit;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

:where(.mega, .drop, .ard) :where(li)::before,
:where(.mega, .drop, .ard) :where(li)::marker {
	content: none;
}

/* ==========================================================================
   Het mega menu, ruimte en randen expliciet
   --------------------------------------------------------------------------
   Hieronder staat nog een keer wat er aan ruimte hoort te zitten. Dat is met
   opzet dubbelop: het hoort al bij de regels hierboven in dit bestand, maar
   zo staat het ook los vast en kan er niets tussenkomen.
   ========================================================================== */
.mega .mega-in { padding: 28px 30px; gap: 30px; }
.mega .mega-kolom { gap: 2px; }
.mega .mega-kop { margin: 0 0 12px 12px; }
.mega .mega-link { padding: 11px 12px; gap: 13px; border-radius: var(--r-m); }
.mega .mega-link .di { width: 34px; height: 34px; border: 1px solid var(--rand); }
.mega .mega-tekst b { font-size: 14.5px; line-height: 1.35; display: block; }
.mega .mega-tekst span { font-size: 12.5px; line-height: 1.45; display: block; color: var(--zachter); }
.mega .mega-kaart { padding: 14px; }
.mega .mega-beeld { margin-bottom: 14px; border: 1px solid var(--rand); }
.mega .mega-uitleg { margin-bottom: 12px; display: block; }
.mega .mega-voet { padding: 14px 30px; border-top: 1px solid var(--rand); }
.mega .mega-voet .btn { padding: 10px 20px; }
.mega .mega-vlag { padding: 3px 8px; }

/* Het streepjespatroon in de balk onderin was te druk. Nu een rustig vlak. */
.mega .mega-voet { background-image: none; background: var(--bg2); }

/* De hover moet duidelijk zijn, maar niet schreeuwen. */
.mega .mega-link { transition: background-color .16s ease; }
.mega .mega-link:hover { background: var(--paneel2); }
.mega .mega-link:hover .di { background: var(--accent); border-color: var(--accent); color: #fff; }
.mega .mega-link:hover .mega-tekst b { color: var(--accent); }

/* Het smalle paneel, voor menu-items zonder eigen bestand. */
.drop { padding: 9px; }
.drop a { padding: 10px 11px; gap: 12px; border-radius: var(--r-s); }
.drop a:hover { background: var(--paneel2); }
.drop b { font-size: 14px; font-weight: 600; color: var(--tekst); display: block; line-height: 1.35; }
.drop span span { font-size: 12.5px; color: var(--zachter); display: block; line-height: 1.4; }
.drop .di { width: 30px; height: 30px; border: 1px solid var(--rand); }


/* ==========================================================================
   OPSCHONING
   --------------------------------------------------------------------------
   Drie dingen rechtzetten die door de lagen heen waren geslopen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kleuren in het menu gelijktrekken

   Het paneel hangt binnen .navlinks, en die staat op de grijze menukleur.
   Alles wat daarbinnen geen eigen kleur kreeg, erfde dus dat grijs. Daardoor
   oogde het paneel bleek naast de gewone menu-items. Hieronder krijgt elk
   onderdeel een eigen, expliciete kleur.
   -------------------------------------------------------------------------- */
.mega, .drop { color: var(--tekst); }

.mega .mega-link .mega-tekst b,
.drop a b { color: var(--tekst); font-weight: 600; }

.mega .mega-link .mega-tekst span,
.drop a span span,
.mega .mega-uitleg { color: var(--zacht); }

.mega .mega-kop { color: var(--zacht); }

/* De titel wordt blauw als je erover gaat, de omschrijving blijft leesbaar. */
.mega .mega-link:hover .mega-tekst b,
.drop a:hover b { color: var(--accent); }
.mega .mega-link:hover .mega-tekst span,
.drop a:hover span span { color: var(--zacht); }

/* --------------------------------------------------------------------------
   2. Geen rand binnen een rand

   De uitgelichte kaart had zelf een rand, en de afbeelding erin nog een keer.
   Twee kaders om hetzelfde plaatje ziet er rommelig uit. De afbeelding heeft
   nu alleen nog afronding, de kaart houdt de rand.
   -------------------------------------------------------------------------- */
.mega .mega-beeld {
	border: 0;
	box-shadow: none;
	border-radius: var(--r-s);
}

/* Hetzelfde geldt elders op de site. */
.keuze .beeld,
.mtegel img,
.band .beeld,
.functie-beeld img,
.pshot img,
.frame img { border: 0; }

.tegel .art { border: 0; }

/* --------------------------------------------------------------------------
   3. De balk onderin het paneel

   Die had een eigen achtergrond én een lijn erboven. Nu alleen de lijn, want
   de scheiding is genoeg.
   -------------------------------------------------------------------------- */
.mega .mega-voet {
	background: none;
	background-image: none;
	border-top: 1px solid var(--rand);
}


/* ==========================================================================
   De menulinks een eigen kleur geven
   --------------------------------------------------------------------------
   Hier ging het mis: wij zetten de kleur op .navlinks, dus op de laag om de
   links heen. Astra zet de kleur rechtstreeks op het a-element. En een
   geerfde kleur verliest altijd van een regel die het element zelf raakt,
   hoe zwaar die regel ook weegt.

   Gevolg: de menulinks stonden in het blauw van Astra in plaats van in onze
   eigen kleur. In de lichte stand viel dat nog mee, in de donkere stand werd
   het donkerblauw op donkerblauw en las je het niet meer.

   Hieronder krijgt elke link in de balk, in het paneel en in de footer zijn
   kleur rechtstreeks toegewezen.
   ========================================================================== */
html body nav .navlinks > a,
html body nav .navlinks .top,
html body nav .navlinks > div > a {
	color: var(--zacht);
}

html body nav .navlinks > a:hover,
html body nav .navlinks .top:hover,
html body nav .navlinks > a:focus-visible {
	color: var(--tekst);
}

/* Het item van de pagina waar je nu bent. */
html body nav .navlinks > .current-menu-item > a,
html body nav .navlinks > a[aria-current="page"] {
	color: var(--tekst);
}

/* In het uitklappaneel. */
html body .mega a,
html body .drop a { color: var(--tekst); }
html body .mega .mega-meer { color: var(--accent); }

/* In de footer. */
html body footer a,
html body footer .menu a { color: var(--zacht); }
html body footer a:hover,
html body footer .menu a:hover { color: var(--tekst); }
html body footer .fjuridisch a { color: var(--zachter); }
html body footer .fjuridisch a:hover { color: var(--tekst); }

/* De inloglink en de hoofdknop in de balk. */
html body nav .btn-s { color: var(--tekst); }
html body nav .btn-p { color: #fff; }

/* ==========================================================================
   De domeinzoeker uitzonderen van onze eigen veldopmaak
   --------------------------------------------------------------------------
   Onze regel voor invoervelden binnen de inhoud telt drie klassen en won
   daarmee van de zoeker, die er twee had. Daarom stond er een grijs vlak met
   een rand in het ronde zoekveld. Hieronder zetten we dat terug, met genoeg
   gewicht om er zeker van te zijn.
   ========================================================================== */
html body .ar-pagina .entry-content .ard .ard-veld input[type="text"],
html body .ard .ard-veld input[type="text"] {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 12px 0;
	margin: 0;
	outline: none;
}
html body .ar-pagina .entry-content .ard .ard-veld input[type="text"]:focus,
html body .ard .ard-veld input[type="text"]:focus {
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
}


/* ==========================================================================
   MOBIEL
   --------------------------------------------------------------------------
   Hieronder staat alles bij elkaar wat op een telefoon anders moet. Eerder
   was dat verspreid over losse blokken, waardoor er gaten in zaten.

   De belangrijkste fout die eruit gaat: er kon horizontaal geschoven worden.
   Verschillende secties hebben een gloed of vlak achter zich dat breder is
   dan het scherm, van 520 tot 1100 pixels. Op een grote monitor valt dat
   binnen de sectie, op een telefoon steekt het eruit en kun je de pagina
   opzij slepen. Alles zit daardoor scheef.
   ========================================================================== */

/* De pagina mag nooit horizontaal schuiven. clip is beter dan hidden, want
   daarmee blijven meescrollende elementen werken. */
html, body { overflow-x: clip; max-width: 100%; }

@supports not (overflow-x: clip) {
	html, body { overflow-x: hidden; }
}

/* En per sectie ook, zodat een brede gloed binnen zijn eigen vak blijft. */
.hero, .band, .ctaband, .sec, .paginahero, footer { overflow-x: clip; }

/* Lange domeinnamen en e-mailadressen mogen afbreken. */
.artikel, .vraag-in, .verhaal, .ard { overflow-wrap: anywhere; }

@media (max-width: 1040px) {

	/* ---- De balk ------------------------------------------------------- */
	nav .navin { gap: 10px; }
	nav .logo { max-height: 30px; width: auto; }

	/* Tikdoelen minstens 44 pixels, anders mis je ze. */
	nav .menu-btn,
	nav .thema {
		width: 42px;
		height: 42px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.navlinks.open {
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		padding: 6px 22px 22px;
		box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5);
	}
	.navlinks.open > a,
	.navlinks.open .heeft-uitklap { border-bottom: 1px solid var(--rand); }
	.navlinks.open .heeft-uitklap:last-child { border-bottom: 0; }

	/* ---- Het formulier -------------------------------------------------- */
	/* Voornaam en achternaam stonden naast elkaar, dat past niet. */
	.rfrow { grid-template-columns: 1fr; gap: 0; }
	.rfform input,
	.rfform select,
	.rfform textarea { font-size: 16px; }

	/* ---- Knoppen -------------------------------------------------------- */
	.knoppen, .hero-cta { width: 100%; }
	.knoppen .btn, .hero-cta .btn { flex: 1 1 auto; justify-content: center; }

	/* ---- Losse onderdelen ----------------------------------------------- */
	.index { gap: 6px; }
	.index a { font-size: 12px; padding: 7px 13px; }

	.rijen { gap: 0; }
	.rij { padding: 14px 0; }

	.frame, .pshot, .beeld, .vwrap, .mtegel img { border-radius: var(--r-m); }

	.tcard { padding: 22px; }
	.calc-embed { padding: 16px; }
	.vragen { padding: 0; }

	.logostrip, .lgrid { gap: 18px 24px; }
	.lgrid img { max-height: 22px; }

	/* Een brede tabel in een tekstpagina mag zelf schuiven. */
	.tekstpagina .artikel table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 600px) {

	/* Op een smal scherm past de knop niet meer naast het logo. Hij staat
	   toch al vast onderaan het scherm in de balk, dus hier mag hij weg. */
	nav .btn-p { display: none; }

	.paginahero h1 { font-size: clamp(28px, 8.4vw, 38px); }
	.paginahero .lead { font-size: 15.5px; }

	.sec { padding: 56px 0; }
	.sec.pad { padding: 56px 0; }

	.head h2 { font-size: clamp(24px, 7.6vw, 32px); }

	.kaart, .plan, .fkaart, .dienst, .verhaal { padding: 22px 20px; }
	.staffel { padding: 20px; }
	.citaat { padding: 24px 20px; }

	.functie { padding: 36px 0; }
	.functie h3 { font-size: 22px; }

	.tster, .twie { font-size: 13px; }
}

/* Op heel kleine schermen mag er niets meer uitsteken. */
@media (max-width: 380px) {
	.wrap, .navin, .chap { padding-left: 16px; padding-right: 16px; }
	.paginahero { padding-top: 92px; }
}


/* ==========================================================================
   Kruimelpad
   Alleen op subpagina's, zodat je ziet waar je zit en een stap terug kunt.
   ========================================================================== */
.kruimels {
	padding: 104px 0 0;
	font-size: 13px;
}
.kruimels .wrap {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}
.kruimels a { color: var(--zachter); transition: color .16s ease; }
.kruimels a:hover { color: var(--tekst); }
.kruimels span { color: var(--zacht); }
.kruimels .ico {
	width: 13px;
	height: 13px;
	stroke: var(--rand2);
	stroke-width: 2;
	flex-shrink: 0;
}
.kruimels .ico:last-of-type { }

/* Staat er een kruimelpad, dan hoeft de kop erboven minder ruimte. */
.kruimels + * .paginahero,
.kruimels ~ .sec .paginahero { padding-top: 40px; }

@media (max-width: 1040px) {
	.kruimels { padding-top: 84px; font-size: 12px; }
}


/* ==========================================================================
   MOBIEL, DEFINITIEF
   --------------------------------------------------------------------------
   Dit blok staat met opzet helemaal onderaan het bestand.

   Waarom dat uitmaakt: een mediaregel weegt niet zwaarder dan een gewone
   regel. Staat er verderop in het bestand nog een gewone regel over hetzelfde
   onderdeel, dan wint die, ook al gaat de mediaregel over mobiel. Precies dat
   gebeurde: de opschoonblokken die ik later toevoegde stonden onder de
   mobiele laag en overschreven hem. Vandaar dat het mega menu op een telefoon
   nog zijn bureaubladopmaak had.

   Alles hieronder staat dus als laatste, en met selectors die zwaar genoeg
   wegen om ook van Astra te winnen.
   ========================================================================== */
@media (max-width: 1040px) {

	/* ---- De balk -------------------------------------------------------
	   Astra kleurt elke button. De menuknop werd daardoor een oranje vlak,
	   en door de losse volgordewaarden belandde hij ergens in het midden.
	   Hieronder ligt de indeling vast: logo links, dan het themaknopje en de
	   menuknop rechts. -------------------------------------------------- */
	html body nav .navin {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: nowrap;
	}

	html body nav .navin .merk { margin-right: auto; }

	html body nav .menu-btn,
	html body nav button.menu-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		order: 0;
		width: 42px;
		height: 42px;
		min-height: 0;
		padding: 0;
		margin: 0;
		background: none;
		background-color: transparent;
		border: 0;
		border-radius: var(--r-s);
		box-shadow: none;
		color: var(--tekst);
		cursor: pointer;
		flex-shrink: 0;
	}
	html body nav .menu-btn:hover,
	html body nav .menu-btn:focus { background: var(--paneel2); color: var(--tekst); }

	html body nav .thema,
	html body nav button.thema {
		order: 0;
		margin: 0;
		width: 42px;
		height: 42px;
		flex-shrink: 0;
	}

	html body nav .btn-s { display: none; }

	/* ---- Het uitgeklapte menu ------------------------------------------ */
	html body nav .navlinks { display: none; }

	html body nav .navlinks.open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--bg);
		border-top: 1px solid var(--rand);
		border-bottom: 1px solid var(--rand);
		padding: 8px 22px 24px;
		gap: 0;
		box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .5);
	}

	html body nav .navlinks.open > a,
	html body nav .navlinks.open .heeft-uitklap { border-bottom: 1px solid var(--rand); }
	html body nav .navlinks.open .heeft-uitklap:last-child { border-bottom: 0; }

	html body nav .navlinks .top {
		width: 100%;
		justify-content: space-between;
		padding: 15px 0;
	}
	html body nav .navlinks.open .caret {
		display: block;
		transition: transform .22s ease;
	}
	html body nav .navlinks.open .heeft-uitklap.open .caret { transform: rotate(180deg); }

	/* ---- Het uitklappaneel op een telefoon ------------------------------
	   Geen zwevend paneel maar een gewone lijst binnen het menu. -------- */
	html body nav .heeft-uitklap.heeft-mega { position: relative; }

	html body nav .mega,
	html body nav .drop {
		position: static;
		display: none;
		width: auto;
		max-width: none;
		min-width: 0;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		opacity: 1;
		visibility: visible;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
		padding: 0;
		margin: 0 0 10px;
	}

	html body nav .heeft-uitklap.open .mega,
	html body nav .heeft-uitklap.open .drop { display: block; }

	html body nav .mega::before,
	html body nav .heeft-mega::after { display: none; }

	html body nav .mega .mega-in {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 0 0 0 6px;
		border-radius: 0;
		overflow: visible;
	}

	html body nav .mega .mega-kolom { gap: 0; }

	html body nav .mega .mega-kop {
		margin: 12px 0 4px;
		font-size: 10.5px;
	}

	html body nav .mega .mega-link,
	html body nav .drop a {
		padding: 11px 8px;
		gap: 11px;
		border-radius: var(--r-s);
	}
	html body nav .mega .mega-link .di,
	html body nav .drop a .di { width: 30px; height: 30px; }

	/* De uitgelichte kaart en de balk onderin nemen te veel ruimte op een
	   telefoon, en de links eronder staan er ook al. */
	html body nav .mega .mega-kaart { display: none; }
	html body nav .mega .mega-voet {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 0 6px;
		margin-top: 8px;
		background: none;
		border-top: 1px solid var(--rand);
	}
	html body nav .mega .mega-voet .btn { width: 100%; justify-content: center; }
	html body nav .mega .mega-voet-tekst { font-size: 12.5px; }

	/* De regels hoeven niet een voor een binnen te komen op mobiel. */
	html body nav .heeft-uitklap.open .mega-link,
	html body nav .heeft-uitklap.open .mega-kaart { animation: none; }
}

@media (max-width: 600px) {
	html body nav .btn-p { display: none; }
	html body nav .navlinks.open { padding: 8px 16px 22px; }
}


/* --------------------------------------------------------------------------
   De open stand van het paneel op mobiel

   Op een breed scherm staat het paneel gecentreerd: het krijgt links vijftig
   procent en schuift dan zijn halve breedte terug. Die verschuiving staat in
   de regel voor de open stand, en die weegt met drie klassen zwaarder dan de
   mobiele regel eronder. Zodra je het paneel opende kwam de verschuiving dus
   terug en schoof de inhoud links buiten beeld.

   Hieronder staat dezelfde regel met de balk en de uitklapper erbij, zodat
   hij op een telefoon wel zwaarder weegt.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {

	html body nav .heeft-uitklap.heeft-mega:hover .mega,
	html body nav .heeft-uitklap.heeft-mega:focus-within .mega,
	html body nav .heeft-uitklap.heeft-mega.open .mega,
	html body nav .heeft-uitklap.open .drop {
		transform: none;
		position: static;
		left: auto;
		right: auto;
		top: auto;
		width: auto;
		max-width: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		background: none;
		padding: 0;
		margin: 0 0 10px;
	}

	/* Alleen tonen als hij echt open is. Bij aanraken telt hover ook mee, en
	   dan klapte hij open zodra je er langs veegde. */
	html body nav .heeft-uitklap.heeft-mega:hover .mega,
	html body nav .heeft-uitklap.heeft-mega:focus-within .mega { display: none; }

	html body nav .heeft-uitklap.heeft-mega.open .mega,
	html body nav .heeft-uitklap.open .drop { display: block; }

	/* Niets in het menu mag breder zijn dan het scherm. */
	html body nav .navlinks.open,
	html body nav .navlinks.open * { max-width: 100%; }
	html body nav .navlinks.open .mega-tekst b,
	html body nav .navlinks.open .mega-tekst span { white-space: normal; }
}


/* ==========================================================================
   Ruimte onder de schermafbeelding in de hero
   --------------------------------------------------------------------------
   De hero had alleen ruimte aan de bovenkant. De afbeelding eindigde daardoor
   precies op de grens met de sectie eronder, en omdat die een eigen
   achtergrond heeft zag je de rand van het kader tegen de kleurgrens plakken.
   ========================================================================== */
.hero .shot { padding: 66px 0 92px; }

@media (max-width: 1040px) {
	.hero .shot { padding: 44px 0 60px; }
}

/* Hetzelfde principe voor de andere plekken waar een kader op een kleurgrens
   uitkomt. */
.band .beeld { margin-bottom: 0; }
.sec:last-child { padding-bottom: 110px; }

@media (max-width: 600px) {
	.sec:last-child { padding-bottom: 64px; }
}


/* ==========================================================================
   UITLIJNING
   --------------------------------------------------------------------------
   Wat een site professioneel doet ogen is niet dat alles even hoog is, maar
   dat de lijnen kloppen. Drie dingen zorgden hier voor onrust:

   1. In de rechterkolom stonden hele zinnen in plaats van bedragen. Die
      braken op verschillende plekken af, waardoor elke rij een andere hoogte
      kreeg en de rechterrand rafelig werd. De omschrijving staat nu onder het
      label, en rechts staat alleen nog het bedrag.

   2. Cijfers hebben van zichzelf verschillende breedtes. Een 1 is smaller dan
      een 8, dus bedragen onder elkaar staan nooit netjes uitgelijnd. Met
      tabular-nums krijgt elk cijfer dezelfde breedte en staan de komma's
      recht onder elkaar.

   3. Kaarten hadden hun eigen hoogte en eindigden dus op verschillende
      plekken. Nu vullen ze de rij en staat wat onderaan hoort ook echt
      onderaan, zonder een gat in het midden.
   ========================================================================== */

/* --- Bedragen -------------------------------------------------------- */
.staffel-bedrag,
.prijs,
.tarief,
.dienst-prijs,
.ard-prijs,
.ard-prijs-klein,
.plan .p,
.waarde {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* --- De tarievenrijen ------------------------------------------------- */
.staffelgrid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }

.staffel {
	display: flex;
	flex-direction: column;
	padding: 30px 32px;
}
.staffel h3 {
	font-size: 17px;
	margin-bottom: 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rand);
}

.staffelrij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 24px;
	padding: 15px 0;
	border-top: 1px solid var(--rand);
}
.staffelrij:first-of-type { border-top: 0; }
.staffelrij:last-of-type { padding-bottom: 0; }

.staffel-wat b {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tekst);
	line-height: 1.35;
}
.staffel-wat span {
	display: block;
	font-size: 12.5px;
	color: var(--zachter);
	line-height: 1.45;
	margin-top: 2px;
}

.staffel-bedrag {
	font-family: 'Archivo', sans-serif;
	font-stretch: 88%;
	font-size: 16px;
	font-weight: 700;
	color: var(--tekst);
	text-align: right;
	white-space: nowrap;
	line-height: 1.25;
}
.staffel-bedrag small {
	display: block;
	font-family: 'Inter', sans-serif;
	font-stretch: normal;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--zachter);
	margin-top: 1px;
}
.staffel-bedrag.inbegrepen { color: var(--groen); }

/* De opmerking eronder loopt over de volle breedte, zodat hij geen kaart
   langer maakt dan de andere. */
.staffelnoot {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 18px;
	padding: 16px 22px;
	background: var(--groen-bg);
	border-radius: var(--r-m);
	font-size: 14px;
	color: var(--zacht);
	border: 0;
}
.staffelnoot b { color: var(--tekst); font-weight: 600; }
.staffelnoot .ico { stroke: var(--groen); stroke-width: 2.4; flex-shrink: 0; margin-top: 2px; }

/* --- Kaarten in een rij ------------------------------------------------
   Ze vullen de rij, en wat onderaan hoort staat ook echt onderaan. Zo krijg
   je een rechte onderrand zonder gat in het midden.
   -------------------------------------------------------------------- */
.fkaarten, .keuzes, .dienstgrid, .tgrid, .mgrid, .egrid { align-items: stretch; }

.fkaart, .keuze, .dienst, .tcard, .mtegel {
	display: flex;
	flex-direction: column;
}
.fkaart > p, .dienst p, .tcard p { flex: 1 1 auto; }
.fkaart ul, .keuze .body ul { margin-top: auto; padding-top: 14px; }

.fkaart .mega-meer,
.dienst .mega-meer,
.keuze .mega-meer { margin-top: auto; padding-top: 16px; }

.fkaart .label,
.keuze .label { align-self: flex-start; }

/* --- Een gelijke onderrand bij de reviewkaarten ----------------------- */
.tcard .twie { margin-top: auto; padding-top: 16px; }

@media (max-width: 1040px) {
	.staffelgrid { grid-template-columns: 1fr; }
	.staffel { padding: 24px 22px; }
	.staffelrij { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
}

@media (max-width: 480px) {
	.staffelrij {
		grid-template-columns: 1fr;
		row-gap: 6px;
	}
	.staffel-bedrag { text-align: left; }
	.staffel-bedrag small { display: inline; margin-left: 6px; }
}


/* ==========================================================================
   VERFIJNING
   --------------------------------------------------------------------------
   Vier dingen tegelijk, en ze hangen samen. De site oogde nog wat oud en dat
   komt door zaken die tien jaar geleden modern waren: gekleurde vlakken achter
   tekst, gloedjes onder knoppen, een groen vinkje bij alles wat goed is.

   Wat er nu voor in de plaats komt is rustiger en scherper: dunne lijnen in
   plaats van vlakken, inkt in plaats van kleur, en een enkele accentkleur die
   pas opvalt omdat de rest hem niet betwist.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Geen groen meer

   Het groen zat op achttien plekken: bij vinkjes, labels, de statuscirkel van
   de domeinzoeker, de gratis dienst. Dat gaf de site een toon die niet bij
   het merk hoort.

   In plaats van elke plek los aan te passen zetten we de kleurvariabelen om.
   Alles wat groen was wordt nu inkt: dezelfde kleur als de tekst, alleen
   rustiger. Waar iets echt een positief signaal moet geven, zoals een vrij
   domein, gebruiken we het accentblauw.
   -------------------------------------------------------------------------- */
:root {
	--groen: var(--tekst);
	--groen-bg: transparent;
	--amber: var(--zacht);
	--amber-bg: transparent;
}
body.licht {
	--groen: var(--tekst);
	--groen-bg: transparent;
	--amber: var(--zacht);
	--amber-bg: transparent;
}

/* Labels worden een dunne omlijning met een stip, geen gekleurd vlak. */
.label {
	background: none;
	border: 1px solid var(--rand2);
	color: var(--zacht);
	padding: 4px 11px 4px 9px;
}
.label .stip { background: var(--zachter); }
.label.basis { color: var(--tekst); }
.label.basis .stip { background: var(--accent); }
.label.aanrader { color: var(--tekst); border-color: var(--accent); }
.label.aanrader .stip { background: var(--accent); }
.label.module .stip,
.label.tijd .stip { background: var(--zachter); }

.mega-vlag {
	background: none;
	border: 1px solid var(--rand2);
	color: var(--zachter);
}
.mega-vlag.basis { color: var(--tekst); border-color: var(--rand2); }

/* Vinkjes in inkt in plaats van groen. */
.usps .ico,
.staffelnoot .ico,
.mega-voet-tekst .ico,
.functie-lijst li svg,
.gerust .ico { stroke: var(--tekst); }

.gerust {
	background: none;
	border: 1px solid var(--rand2);
	color: var(--zacht);
}

.staffelnoot {
	background: none;
	border-left: 2px solid var(--accent);
	border-radius: 0;
	padding: 4px 0 4px 18px;
}

.dienst.gratis { border-top: 2px solid var(--accent); }
.dienst.nu-gratis { border-top: 2px solid var(--rand2); }
.dienst.gratis .dienst-prijs { color: var(--accent); }
.dienst.nu-gratis .dienst-prijs { color: var(--zacht); }

.staffel-bedrag.inbegrepen { color: var(--zacht); }

/* --------------------------------------------------------------------------
   2. Geen gloed meer

   De volgspot op de tegels en het lichtvlak achter de hero waren zachte,
   vervaagde kleurvlakken. Dat is precies wat een ontwerp gedateerd maakt.
   Ze gaan eruit. Wat overblijft is de scherpe schaduw en een lijn die van
   kleur verandert, en dat leest veel rustiger.
   -------------------------------------------------------------------------- */
.ecel::before { display: none; }
.ecel::after { background: var(--accent); }
.ecel { transition: border-color .2s ease, background-color .2s ease; }
.ecel:hover { background: var(--paneel); }

.hero::before,
.band::before,
.ctaband::before { display: none; }

/* De harde schaduw in inkt in plaats van in blauw. */
:root {
	--hard-accent: rgba(0, 0, 0, .5);
}
body.licht {
	--hard-accent: #D6DEEA;
}

.btn-p { box-shadow: none; }
.btn-p:hover { box-shadow: none; transform: none; }
.btn-p:active { box-shadow: none; transform: translateY(1px); }

/* Bij hover verschuift een kaart niet meer diagonaal, maar wordt de rand
   scherper en de schaduw iets dieper. Subtieler en minder springerig. */
.fkaart:hover,
.mtegel:hover,
a.keuze:hover,
a.dienst:hover,
.verhaal:hover,
.tcard:hover,
.stap:hover,
.mega-kaart:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--hard-kleur);
	border-color: var(--rand2);
}

/* --------------------------------------------------------------------------
   3. Rustiger achtergronden

   De lichtblauwe en lichtgrijze vlakken waren te aanwezig. Ze staan nu dichter
   bij wit, zodat ze een sectie scheiden zonder de aandacht te trekken.
   -------------------------------------------------------------------------- */
body.licht {
	--bg2: #FAFBFD;
	--paneel: #FFFFFF;
	--paneel2: #F7F9FC;
	--rand: #EAEEF4;
	--rand2: #D9E0EA;
}

/* Een sectie met een eigen achtergrond krijgt een lijn erboven in plaats van
   alleen een kleurverschil. Dat leest strakker. */
.sec.pad {
	background: var(--bg2);
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
}

/* --------------------------------------------------------------------------
   4. De sociale iconen naast elkaar
   -------------------------------------------------------------------------- */
html body footer .fsocial {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
html body footer .fsocial li { margin: 0; padding: 0; width: auto; display: block; }
html body footer .fsocial li::before { content: none; }
html body footer .fsocial a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rand);
	border-radius: var(--r-s);
	color: var(--zacht);
}
html body footer .fsocial a:hover { border-color: var(--tekst); color: var(--tekst); }

/* --------------------------------------------------------------------------
   5. Formulieren gelijk

   De velden hadden verschillende hoogtes doordat sommige een label boven zich
   hadden en andere niet, en de kolommen liepen niet gelijk. Hieronder ligt
   alles vast: gelijke hoogte, gelijke tussenruimte, gelijke uitlijning.
   -------------------------------------------------------------------------- */
.rfform { display: flex; flex-direction: column; gap: 18px; }
.rfform > label,
.rfform > .rfrow,
.rfform > .rfmods,
.rfform > .rfok,
.rfform > button { margin: 0; }

.rfrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

.rfform label {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--tekst);
}

.rfform input[type="text"],
.rfform input[type="email"],
.rfform input[type="url"],
.rfform input[type="tel"],
.rfform select {
	height: 46px;
	padding: 0 14px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}
.rfform textarea {
	padding: 13px 14px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	min-height: 104px;
	resize: vertical;
}

.rfmods {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
	align-items: start;
}
.rfmods label {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 13.5px;
	color: var(--zacht);
	line-height: 1.45;
}
.rfmods input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

.rfok { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--zacht); }
.rfok input { margin-top: 2px; flex-shrink: 0; }

@media (max-width: 700px) {
	.rfrow, .rfmods { grid-template-columns: 1fr; }
}


/* ==========================================================================
   WAT ERVOOR IN DE PLAATS KOMT
   --------------------------------------------------------------------------
   Terechte opmerking dat ik vooral dingen heb weggehaald. Hieronder vier
   toevoegingen. Geen effecten om het effect, maar dingen die je bij de betere
   sites van nu ziet en die hier passen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Een fijn puntenraster in plaats van een vlak

   Een sectie die zich moet onderscheiden kreeg eerst een lichtblauw vlak.
   Dat is precies wat je bedoelde met te prominent. In plaats daarvan een
   raster van puntjes van een pixel, om de 26 pixels. Van dichtbij zie je het
   nauwelijks, maar het geeft de sectie textuur in plaats van kleur. Dit is
   wat een ontwerp diepte geeft zonder gekleurde vlakken.
   -------------------------------------------------------------------------- */
.sec.pad {
	background-color: var(--bg);
	background-image: radial-gradient(var(--rand) 1px, transparent 1px);
	background-size: 26px 26px;
	background-position: -13px -13px;
	position: relative;
}

/* Naar de randen toe vervaagt het raster, zodat het niet als een tafelkleed
   over de hele sectie ligt. */
.sec.pad::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		var(--bg) 0%,
		transparent 22%,
		transparent 78%,
		var(--bg) 100%
	);
}
.sec.pad > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   2. Een streep voor de sectienaam

   Een klein redactioneel detail: een lijntje van 22 pixels voor de kicker.
   Dat geeft een sectie een begin, en het is het soort detail waar een
   ontwerp verzorgd van wordt zonder dat iemand kan aanwijzen waarom.
   -------------------------------------------------------------------------- */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 11px;
}
.kicker::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .45;
	flex-shrink: 0;
}
.head.mid .kicker,
.paginahero .kicker { justify-content: center; }
.head.mid .kicker::after,
.paginahero .kicker::after {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .45;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. Een onderstreping die intekent

   Tekstlinks krijgen geen kleurwissel maar een lijn die van links naar rechts
   intrekt. Rustiger dan een kleurverandering en het geeft aan dat er iets
   gebeurt als je klikt.
   -------------------------------------------------------------------------- */
.mega-meer,
.vraag-in a,
.klein a,
.rfnote a {
	position: relative;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size .28s cubic-bezier(.2, .8, .2, 1);
	padding-bottom: 1px;
}
.mega-meer:hover,
.vraag-in a:hover,
.klein a:hover,
.rfnote a:hover,
a:hover > .mega-meer { background-size: 100% 1px; }

.vraag-in a, .klein a, .rfnote a { text-decoration: none; }

/* --------------------------------------------------------------------------
   4. De logostrip loopt door

   Een rijtje logo's dat stilstaat is een tabel. Een rij die langzaam
   doorloopt leest als een bewijs dat er veel achter zit. Hij staat stil
   zodra je er met de muis op komt, en beweegt helemaal niet voor wie dat
   liever niet heeft.
   -------------------------------------------------------------------------- */
.logostrip { overflow: hidden; position: relative; }

.logostrip::before,
.logostrip::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 90px;
	z-index: 2;
	pointer-events: none;
}
.logostrip::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.logostrip::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.lgrid {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 54px;
	width: max-content;
	animation: loopstrip 46s linear infinite;
}
.logostrip:hover .lgrid { animation-play-state: paused; }

@keyframes loopstrip {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.lgrid {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
		gap: 30px 44px;
	}
	.logostrip::before, .logostrip::after { display: none; }
}

/* ==========================================================================
   De professionals
   ========================================================================== */
.leden {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.lid {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "foto wie" "meta meta" "merk merk";
	gap: 14px;
	align-items: center;
	background: var(--paneel);
	border: 1px solid var(--rand);
	border-radius: var(--r-l);
	padding: 24px;
	box-shadow: var(--hard-s);
	transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, border-color .18s ease;
}
.lid:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--hard-kleur);
	border-color: var(--rand2);
}

.lid-foto {
	grid-area: foto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--paneel2);
	border: 1px solid var(--rand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Archivo', sans-serif;
	font-stretch: 88%;
	font-size: 16px;
	font-weight: 700;
	color: var(--accent);
}

.lid-wie { grid-area: wie; min-width: 0; }
.lid-wie b {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-size: 16px;
	font-weight: 600;
	color: var(--tekst);
	line-height: 1.3;
}
.lid-wie span { display: block; font-size: 13px; color: var(--zachter); }

.lid-meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 16px;
	border-top: 1px solid var(--rand);
	font-size: 13px;
	color: var(--zacht);
}
.lid-plaats { font-weight: 500; color: var(--tekst); }

.lid-merk {
	grid-area: merk;
	justify-self: start;
	font-family: 'Archivo', sans-serif;
	font-stretch: 96%;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zachter);
	border: 1px solid var(--rand2);
	border-radius: var(--r-xs);
	padding: 4px 9px;
}

.melding-beheer {
	border: 1px solid var(--rand2);
	border-left: 2px solid var(--accent);
	padding: 14px 18px;
	margin-bottom: 22px;
	font-size: 13.5px;
	color: var(--zacht);
	line-height: 1.6;
}
.melding-beheer strong { color: var(--tekst); display: block; margin-bottom: 2px; }

@media (max-width: 1040px) {
	.leden { grid-template-columns: 1fr; }
	.logostrip::before, .logostrip::after { width: 40px; }
	.lgrid { gap: 38px; }
	.sec.pad { background-size: 22px 22px; }
}


/* De kopie in de logostrip gedraagt zich als de rij zelf. */
.lgrid-kopie {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 54px;
}
@media (max-width: 1040px) { .lgrid-kopie { gap: 38px; } }
@media (prefers-reduced-motion: reduce) {
	.lgrid-kopie { display: none; }
}


/* ==========================================================================
   Onthullen bij scrollen
   --------------------------------------------------------------------------
   De class reveal staat op acht elementen in de hero en het verhaal, en het
   script zet er inview op zodra ze in beeld komen. Alleen: er stond nergens
   opmaak bij. Die elementen waren dus altijd gewoon zichtbaar en het hele
   mechanisme deed niets.

   Nu is het wel wat het hoort te zijn. Kan de browser het zelf via
   animation-timeline, dan gebruikt hij dat en blijft het script erbuiten.
   Wie beweging liever niet ziet, ziet gewoon alles meteen.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		translate: 0 16px;
		transition: opacity .5s cubic-bezier(.2, .8, .2, 1),
			translate .5s cubic-bezier(.2, .8, .2, 1);
	}
	.reveal.inview {
		opacity: 1;
		translate: 0 0;
	}

	/* Staat er een reeks onder elkaar, dan komen ze net na elkaar binnen. */
	.chap .reveal:nth-child(2) { transition-delay: .06s; }
	.chap .reveal:nth-child(3) { transition-delay: .12s; }
}

/* Kan de browser het zelf, dan laten we het script erbuiten en regelt de
   stylesheet het. Zie het blok met animation-timeline hierboven. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.reveal {
			opacity: 1;
			translate: 0 0;
			animation: opkomen linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 20%;
			transition: none;
		}
	}
}


/* ==========================================================================
   GEEN SCHADUWEN MEER
   --------------------------------------------------------------------------
   Ik had de vervaagde schaduwen vervangen door scherpe, en die vervolgens
   overal neergezet: kaarten, koppen, het paneel van het menu, de knoppen,
   de schermafbeeldingen. Dat is precies een laag te veel geworden.

   Ze gaan er allemaal uit. Wat een element van zijn omgeving scheidt is
   voortaan de rand, en verder niets. Dat is rustiger en het is ook hoe de
   strakkere sites van nu het doen.

   Deze regels staan onderaan en met genoeg gewicht, zodat er niets meer
   overheen komt. Wil je er ooit toch eentje terug, dan zet je hem hier weg
   in plaats van hierboven een nieuwe toe te voegen.
   ========================================================================== */
html body .btn-p,
html body .btn-p:active,
html body .btn-p:hover,
html body .dienst,
html body .drop,
html body .fkaart,
html body .fkaart:hover,
html body .frame,
html body .functie-beeld,
html body .keuze,
html body .keuze:hover,
html body .lid,
html body .lid:hover,
html body .mega,
html body .mega-beeld,
html body .mega-kaart,
html body .mega-kaart:hover,
html body .mega-play svg,
html body .mtegel,
html body .mtegel:hover,
html body .navlinks.open,
html body .plan.hi,
html body .plan.hi:hover,
html body .pshot,
html body .stap,
html body .stap:hover,
html body .tcard,
html body .tcard:hover,
html body .verhaal,
html body .verhaal:hover,
html body .vwrap,
html body a.dienst:hover,
html body a.keuze:hover,
html body nav .navlinks.open {
	box-shadow: none;
}

:root, body.licht {
	--schaduw: none;
	--hard-s: none;
	--hard-m: none;
	--hard-l: none;
	--hard-s-accent: none;
	--hard-m-accent: none;
}

/* De rand doet nu het werk dat de schaduw deed, dus die mag iets duidelijker. */
.fkaart, .keuze, .dienst, .tcard, .verhaal, .stap, .lid,
.kaart, .plan, .staffel, .mega, .drop, .frame, .functie-beeld,
.pshot, .vwrap, .mega-kaart, .mega-beeld, .calc-embed {
	border-color: var(--rand);
}

.fkaart:hover, .keuze:hover, .dienst:hover, .tcard:hover,
.verhaal:hover, .stap:hover, .lid:hover, .mtegel:hover, .mega-kaart:hover {
	border-color: var(--rand2);
	transform: none;
}

.plan.hi { border-color: var(--accent); }

/* Het uitgeklapte menu op mobiel houdt zijn lijn, niet zijn schaduw. */
html body nav .navlinks.open { box-shadow: none; border-bottom: 1px solid var(--rand2); }

/* Het afspeelknopje in het menu had een schaduw om op te vallen. Een rand
   doet hetzelfde. */
.mega-play svg { box-shadow: none; border: 1px solid var(--rand2); }