{"id":81065,"date":"2026-08-16T10:32:33","date_gmt":"2026-08-16T08:32:33","guid":{"rendered":"https:\/\/inr.institute\/?page_id=81065"},"modified":"2026-08-17T08:23:53","modified_gmt":"2026-08-17T06:23:53","slug":"audiobooks","status":"publish","type":"page","link":"https:\/\/inr.institute\/en\/audioboeken\/","title":{"rendered":"Audiobooks"},"content":{"rendered":"\n<!-- ============================================================================\n     INR STORIES - HERO (losstaand)\n     Een bestand. Plak dit volledig in EEN Elementor HTML-widget.\n     De openingshero met letter-voor-letter animatie. Zet de carousel eronder.\n     Alles gescoped onder .inr-hero, afgedwongen met !important.\n     ============================================================================ -->\n\n<style>\n\/* ---------- ROOT ---------- *\/\n.inr-hero{\n  --paars:#8b7bff; --paars-diep:#5b4fd6; --indigo:#4f46e5;\n  --ink:#04040a; --tekst:#f6f6fc; --grijs:#9a9ab8; --grijs-diep:#5c5c78;\n  position:relative !important; width:100% !important; max-width:100% !important;\n  margin:0 !important; padding:0 !important; box-sizing:border-box !important;\n  color:var(--tekst) !important; background:var(--ink) !important; line-height:1.5 !important;\n  overflow:hidden !important; text-align:left !important; -webkit-font-smoothing:antialiased !important;\n}\n.inr-hero, .inr-hero *, .inr-hero *::before, .inr-hero *::after{\n  box-sizing:border-box !important;\n  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;\n}\n.inr-hero h1,.inr-hero p,.inr-hero span,.inr-hero div{margin:0;padding:0;}\n\n\/* ---------- ATMOSFEER ---------- *\/\n.inr-hero .atmos{position:absolute !important;inset:0 !important;z-index:0 !important;overflow:hidden !important;pointer-events:none !important;\n  background:\n    radial-gradient(700px 460px at 16% 42%, rgba(124,107,255,.13), transparent 54%),\n    radial-gradient(620px 420px at 88% 46%, rgba(79,70,229,.10), transparent 54%) !important;}\n.inr-hero .blob{position:absolute !important;border-radius:50% !important;filter:blur(110px) !important;opacity:.5 !important;animation:hero-drift 34s ease-in-out infinite !important;}\n.inr-hero .blob.a{width:520px;height:520px;background:rgba(124,107,255,.26);top:-160px;left:-120px;}\n.inr-hero .blob.b{width:420px;height:420px;background:rgba(79,70,229,.2);top:30%;right:-140px;animation-delay:-13s;}\n@keyframes hero-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.09);}}\n\n\/* ---------- HERO ---------- *\/\n.inr-hero .binnen{position:relative !important;z-index:1 !important;min-height:100vh !important;\n  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;\n  text-align:center !important;padding:100px clamp(24px,5vw,40px) !important;}\n\n.inr-hero .grad{background:linear-gradient(115deg,var(--paars),var(--indigo)) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;}\n\n\/* App Store badge *\/\n.inr-hero .appstore{display:inline-block !important;margin-bottom:38px !important;\n  opacity:0;transform:translateY(14px);animation:hero-fade-up .9s cubic-bezier(.2,.7,.2,1) .15s forwards !important;\n  transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s !important;}\n.inr-hero .appstore:hover{transform:translateY(-3px) !important;filter:brightness(1.08) !important;}\n.inr-hero .appstore img{display:block !important;height:52px !important;width:auto !important;}\n\n\/* kop met letter-rol *\/\n.inr-hero h1{font-weight:600 !important;font-size:clamp(48px,10vw,120px) !important;line-height:1.06 !important;letter-spacing:-.045em !important;\n  max-width:16ch !important;color:var(--tekst) !important;margin-bottom:34px !important;}\n.inr-hero .rl{display:inline-block !important;overflow:hidden !important;vertical-align:top !important;\n  padding-bottom:.2em !important;margin-bottom:-.2em !important;}   \/* ruimte voor j, g, p en de punt tijdens de rol *\/\n.inr-hero h1.klaar .rl{overflow:visible !important;}                 \/* na de rol maskering weg, descenders volledig zichtbaar *\/\n.inr-hero .rl > span{display:inline-block !important;transform:translateY(112%);\n  animation:hero-rise .95s cubic-bezier(.19,1,.22,1) forwards !important;}\n.inr-hero h1 .sp{display:inline-block !important;width:.28em !important;}\n\n\/* lead *\/\n.inr-hero .lead{font-size:clamp(18px,2.3vw,24px) !important;font-weight:300 !important;color:var(--grijs) !important;max-width:42ch !important;line-height:1.5 !important;\n  opacity:0;transform:translateY(16px);animation:hero-fade-up 1s cubic-bezier(.2,.7,.2,1) 1.15s forwards !important;}\n\n\/* exclusief-regel *\/\n.inr-hero .excl{margin-top:20px !important;font-size:13.5px !important;font-weight:500 !important;letter-spacing:.02em !important;\n  color:var(--grijs-diep) !important;\n  opacity:0;transform:translateY(12px);animation:hero-fade-up 1s cubic-bezier(.2,.7,.2,1) 1.35s forwards !important;}\n\n\/* scroll-hint: lijn met een lichtpuls die van beneden naar boven trekt *\/\n.inr-hero .hint{margin-top:64px !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:14px !important;\n  font-size:12px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--grijs-diep) !important;\n  opacity:0;animation:hero-fade-up 1s ease 1.6s forwards !important;}\n.inr-hero .hint .baan{position:relative !important;width:2px !important;height:60px !important;overflow:hidden !important;\n  background:rgba(255,255,255,.08) !important;border-radius:2px !important;}\n.inr-hero .hint .baan::after{content:'' !important;position:absolute !important;left:0 !important;right:0 !important;\n  height:30px !important;border-radius:2px !important;\n  background:linear-gradient(180deg,transparent,var(--paars) 70%,#fff) !important;\n  box-shadow:0 0 8px rgba(139,123,255,.8) !important;\n  animation:hero-trek 1.8s cubic-bezier(.45,0,.35,1) infinite !important;}\n\n@keyframes hero-fade-up{to{opacity:1;transform:none;}}\n@keyframes hero-rise{to{transform:translateY(0);}}\n@keyframes hero-pols{0%,100%{box-shadow:0 0 0 4px rgba(124,107,255,.2);}50%{box-shadow:0 0 0 8px rgba(124,107,255,0);}}\n@keyframes hero-trek{0%{top:100%;}55%{top:-30px;}100%{top:-30px;}}\n\n\/* ---------- reduced motion ---------- *\/\n@media(prefers-reduced-motion:reduce){\n  .inr-hero *{animation:none !important;}\n  .inr-hero .appstore,.inr-hero .lead,.inr-hero .excl,.inr-hero .hint{opacity:1 !important;transform:none !important;}\n  .inr-hero .rl{overflow:visible !important;}\n  .inr-hero .rl > span{transform:none !important;}\n}\n<\/style>\n\n<div class=\"inr-hero\">\n  <div class=\"atmos\"><div class=\"blob a\"><\/div><div class=\"blob b\"><\/div><\/div>\n  <div class=\"binnen\">\n    <a class=\"appstore\" href=\"https:\/\/apps.apple.com\/nl\/app\/id6796658658\" target=\"_blank\" rel=\"noopener\" aria-label=\"Download in de App Store\">\n      <img decoding=\"async\" src=\"https:\/\/inr.institute\/wp-content\/uploads\/2026\/08\/App_Store_iOS-final.svg_.webp\" alt=\"Download in de App Store\">\n    <\/a>\n    <h1 id=\"heroKop\">Een uur dat je bijblijft.<\/h1>\n    <p class=\"lead\">Audioboeken die ineens verdacht veel over jou blijken te gaan.<\/p>\n    <p class=\"excl\">Exclusief voor iPhone en iPad.<\/p>\n    <div class=\"hint\"><span>Scroll<\/span><span class=\"baan\"><\/span><\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var root=document.querySelector('.inr-hero');\n  if(!root) return;\n  var kop=root.querySelector('#heroKop');\n  if(!kop) return;\n\n  \/\/ Titel uit de HTML lezen (vertaalbaar door TranslatePress), dan opsplitsen\n  \/\/ in woorden en letters voor de rol-animatie. Werkt op elke taal.\n  var titel=(kop.textContent||'').trim();\n  if(!titel) return;\n  kop.textContent='';\n  var woorden=titel.split(\/\\s+\/);\n  var totaal=0;\n  woorden.forEach(function(woord,wi){\n    var wgroep=document.createElement('span');       \/\/ woord-wrapper: letters bijeen\n    wgroep.style.display='inline-block';\n    wgroep.style.whiteSpace='nowrap';\n    for(var i=0;i<woord.length;i++){\n      var rl=document.createElement('span'); rl.className='rl';\n      var inner=document.createElement('span');\n      inner.textContent=woord[i];\n      inner.style.animationDelay=(0.35 + totaal*0.045)+'s';\n      rl.appendChild(inner);\n      wgroep.appendChild(rl);\n      totaal++;\n    }\n    kop.appendChild(wgroep);\n    if(wi<woorden.length-1){\n      var sp=document.createElement('span'); sp.className='sp'; sp.innerHTML='&nbsp;';\n      kop.appendChild(sp);\n    }\n  });\n\n  \/\/ na de laatste letter-rol de maskering opheffen zodat descenders volledig zichtbaar zijn\n  var laatsteStart=0.35 + (totaal-1)*0.045;   \/\/ seconden\n  var klaarNa=(laatsteStart + 0.95 + 0.05) * 1000;  \/\/ + animatieduur + kleine marge\n  setTimeout(function(){ kop.classList.add('klaar'); }, klaarNa);\n})();\n<\/script>\n\n\n\n<!-- ============================================================================\n     INR STORIES - EINDELOZE COVER CAROUSEL\n     Een bestand. Plak dit volledig in EEN Elementor HTML-widget.\n     Haalt de live boeken uit het publieke etalage-endpoint en bouwt een\n     continu schuivende, Apple-stijl band met covers.\n     Alles gescoped onder .inr-carrousel, afgedwongen met !important.\n\n     - Twee rijen die tegengesteld schuiven, eindeloos (naadloze loop).\n     - Randen vervagen naar de achtergrond (mask), covers komen uit het niets.\n     - Hover op een cover: die licht op en komt naar voren; de band vertraagt.\n     - Puur CSS-animatie voor de loop; JS alleen om de covers te laden.\n     ============================================================================ -->\n\n<style>\n\/* ---------- ROOT ---------- *\/\n.inr-carrousel{\n  --paars:#8b7bff; --paars-diep:#5b4fd6; --indigo:#4f46e5;\n  --ink:#04040a; --tekst:#f6f6fc; --grijs:#9a9ab8; --grijs-diep:#5c5c78;\n  --lijn:rgba(255,255,255,.08);\n  --maxw:1180px;\n  --kaart:210px;            \/* covergrootte desktop *\/\n  --gap:22px;\n  --snelheid:70s;           \/* hoe trager, hoe rustiger. 70s = premium traag *\/\n  position:relative !important; width:100% !important; max-width:100% !important;\n  margin:0 !important; padding:0 !important; box-sizing:border-box !important;\n  color:var(--tekst) !important; background:var(--ink) !important; line-height:1.5 !important;\n  overflow:hidden !important; text-align:left !important; -webkit-font-smoothing:antialiased !important;\n}\n.inr-carrousel, .inr-carrousel *, .inr-carrousel *::before, .inr-carrousel *::after{\n  box-sizing:border-box !important;\n  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;\n}\n.inr-carrousel h2,.inr-carrousel p,.inr-carrousel span,.inr-carrousel div,.inr-carrousel a{margin:0;padding:0;}\n.inr-carrousel a{text-decoration:none !important;color:inherit !important;}\n\n\/* ---------- ATMOSFEER ---------- *\/\n.inr-carrousel .atmos{position:absolute !important;inset:0 !important;z-index:0 !important;overflow:hidden !important;pointer-events:none !important;\n  background:\n    radial-gradient(640px 400px at 14% 40%, rgba(124,107,255,.12), transparent 55%),\n    radial-gradient(600px 380px at 88% 64%, rgba(79,70,229,.10), transparent 54%) !important;}\n\n\/* ---------- KOP ---------- *\/\n.inr-carrousel .kop{position:relative !important;z-index:2 !important;max-width:var(--maxw) !important;margin:0 auto !important;\n  padding:110px clamp(24px,5vw,40px) 54px !important;text-align:center !important;}\n.inr-carrousel .kop .eyebrow{font-size:12.5px !important;font-weight:600 !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--paars) !important;display:block !important;margin-bottom:18px !important;}\n.inr-carrousel .kop h2{font-weight:600 !important;font-size:clamp(30px,4.6vw,54px) !important;letter-spacing:-.03em !important;line-height:1.08 !important;color:var(--tekst) !important;margin-bottom:16px !important;}\n.inr-carrousel .kop h2 .grad{background:linear-gradient(115deg,var(--paars),var(--indigo)) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;}\n.inr-carrousel .kop p{font-size:18px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.55 !important;max-width:44ch !important;margin:0 auto !important;}\n\n\/* ---------- BAND ---------- *\/\n.inr-carrousel .band-zone{position:relative !important;z-index:1 !important;padding:20px 0 120px !important;\n  \/* randen vervagen naar de achtergrond *\/\n  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) !important;\n  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) !important;}\n.inr-carrousel .rij{display:flex !important;gap:var(--gap) !important;width:max-content !important;\n  will-change:transform !important;}\n.inr-carrousel .rij + .rij{margin-top:var(--gap) !important;}\n.inr-carrousel .rij.links{animation:carr-links var(--snelheid) linear infinite !important;}\n.inr-carrousel .rij.rechts{animation:carr-rechts calc(var(--snelheid) * 1.18) linear infinite !important;}\n\/* de hele band vertraagt zachtjes bij hover *\/\n.inr-carrousel .band-zone:hover .rij{animation-play-state:paused !important;}\n\n@keyframes carr-links{from{transform:translateX(0);}to{transform:translateX(-50%);}}\n@keyframes carr-rechts{from{transform:translateX(-50%);}to{transform:translateX(0);}}\n\n\/* veeg-hint (alleen mobiel, via mediaquery zichtbaar gemaakt) *\/\n.inr-carrousel .veeg{display:none !important;justify-content:center !important;padding:6px 24px 40px !important;position:relative !important;z-index:2 !important;}\n.inr-carrousel .veeg .veeg-in{display:inline-flex !important;align-items:center !important;gap:8px !important;\n  font-size:12.5px !important;font-weight:500 !important;letter-spacing:.03em !important;color:var(--grijs-diep) !important;}\n.inr-carrousel .veeg .veeg-in svg{width:16px !important;height:16px !important;color:var(--paars) !important;\n  animation:carr-wenk 1.8s ease-in-out infinite !important;}\n@keyframes carr-wenk{0%,100%{transform:translateX(0);opacity:.6;}50%{transform:translateX(4px);opacity:1;}}\n\n\/* ---------- KAART ---------- *\/\n.inr-carrousel .kaart{position:relative !important;flex:0 0 auto !important;width:var(--kaart) !important;height:var(--kaart) !important;\n  border-radius:20px !important;overflow:hidden !important;background:#0e0e1a !important;\n  border:1px solid var(--lijn) !important;\n  box-shadow:0 20px 40px -24px rgba(0,0,0,.8) !important;\n  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s !important;\n  display:block !important;}\n.inr-carrousel .kaart img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;\n  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s !important;filter:saturate(1.02) !important;}\n\/* onderrand-gradient voor de titel *\/\n.inr-carrousel .kaart .laag{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;\n  padding:44px 16px 14px !important;z-index:2 !important;\n  background:linear-gradient(180deg,transparent,rgba(4,4,10,.92)) !important;\n  opacity:0 !important;transform:translateY(8px) !important;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-carrousel .kaart .laag .t{display:block !important;font-weight:600 !important;font-size:14px !important;color:#fff !important;line-height:1.25 !important;letter-spacing:-.01em !important;\n  overflow:hidden !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;}\n.inr-carrousel .kaart .laag .m{display:block !important;margin-top:5px !important;font-size:11.5px !important;font-weight:400 !important;color:var(--grijs) !important;letter-spacing:.02em !important;}\n\/* gratis-label *\/\n.inr-carrousel .kaart .gratis{position:absolute !important;top:11px !important;left:11px !important;z-index:3 !important;\n  font-size:10.5px !important;font-weight:600 !important;letter-spacing:.04em !important;color:#fff !important;\n  padding:4px 9px !important;border-radius:99px !important;background:rgba(124,107,255,.85) !important;\n  -webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important;\n  opacity:0 !important;transform:translateY(-4px) !important;transition:opacity .4s ease,transform .4s ease !important;}\n\n\/* hover op een kaart *\/\n.inr-carrousel .kaart:hover{transform:translateY(-10px) scale(1.04) !important;border-color:rgba(124,107,255,.45) !important;\n  box-shadow:0 40px 70px -30px rgba(124,107,255,.6),0 20px 40px -20px rgba(0,0,0,.9) !important;z-index:5 !important;}\n.inr-carrousel .kaart:hover img{transform:scale(1.06) !important;filter:saturate(1.12) !important;}\n.inr-carrousel .kaart:hover .laag{opacity:1 !important;transform:none !important;}\n.inr-carrousel .kaart:hover .gratis{opacity:1 !important;transform:none !important;}\n\n\/* ---------- STATES ---------- *\/\n.inr-carrousel .status{position:relative !important;z-index:2 !important;text-align:center !important;padding:40px 24px 120px !important;color:var(--grijs) !important;font-weight:300 !important;font-size:16px !important;}\n\/* skeletons tijdens laden *\/\n.inr-carrousel .skel{position:relative !important;flex:0 0 auto !important;width:var(--kaart) !important;height:var(--kaart) !important;border-radius:20px !important;\n  background:linear-gradient(100deg,#0e0e1a 30%,#17172a 50%,#0e0e1a 70%) !important;background-size:200% 100% !important;\n  animation:carr-shimmer 1.4s linear infinite !important;border:1px solid var(--lijn) !important;}\n@keyframes carr-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}\n\n\/* ---------- RESPONSIVE ---------- *\/\n@media(max-width:820px){\n  .inr-carrousel{--kaart:150px;--gap:16px;}\n  .inr-carrousel .kop{padding-top:84px !important;padding-bottom:40px !important;}\n  \/* mobiel: handmatig vegen. Werkt altijd, ongeacht browser of bewegingsvoorkeur. *\/\n  .inr-carrousel .band-zone{padding:20px 0 40px !important;\n    overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch !important;\n    scroll-snap-type:x proximity !important;\n    -webkit-mask-image:none !important;mask-image:none !important;}\n  .inr-carrousel .band-zone::-webkit-scrollbar{display:none !important;}\n  .inr-carrousel .band-zone{scrollbar-width:none !important;}\n  \/* alleen de eerste rij tonen; geen animatie, gewoon een veegbare strook *\/\n  .inr-carrousel .rij{animation:none !important;width:max-content !important;\n    padding-left:clamp(20px,5vw,40px) !important;padding-right:clamp(20px,5vw,40px) !important;}\n  .inr-carrousel .rij.rechts{display:none !important;}\n  .inr-carrousel .rij + .rij{margin-top:0 !important;}\n  .inr-carrousel .kaart{scroll-snap-align:center !important;}\n  .inr-carrousel .kaart:active .laag{opacity:1 !important;transform:none !important;}\n  \/* veeg-hint onder de band *\/\n  .inr-carrousel .veeg{display:flex !important;}\n}\n@media(max-width:480px){\n  .inr-carrousel{--kaart:132px;--gap:13px;}\n}\n@media(prefers-reduced-motion:reduce){\n  \/* desktop met verminderde beweging: animatie uit, band netjes gecentreerd zichtbaar,\n     geen omschakeling naar een kapotte scroll-staat *\/\n  .inr-carrousel .rij{animation:none !important;}\n}\n<\/style>\n\n<div class=\"inr-carrousel\">\n  <div class=\"atmos\"><\/div>\n\n  <div class=\"kop\">\n    <span class=\"eyebrow\">Kies je verhaal<\/span>\n    <h2>Waar ben jij <span class=\"grad\">nieuwsgierig<\/span> naar?<\/h2>\n    <p>Waarom slimme mensen domme beslissingen nemen. Waarom sommige gesprekken nergens komen. Waarom we onder druk iemand anders lijken te worden. En waarom verandering zo makkelijk klinkt, tot je zelf moet veranderen.<\/p>\n  <\/div>\n\n  <div class=\"band-zone\" id=\"carrBand\">\n    <!-- twee rijen, gevuld door JS. Fallback skeletons tot data er is. -->\n    <div class=\"rij links\" id=\"rijBoven\" aria-label=\"Boeken, doorlopende reeks\">\n      <div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div>\n      <div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div>\n    <\/div>\n    <div class=\"rij rechts\" id=\"rijOnder\" aria-hidden=\"true\">\n      <div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div>\n      <div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div><div class=\"skel\"><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"status\" id=\"carrStatus\" style=\"display:none;\"><\/div>\n\n  <div class=\"veeg\"><span class=\"veeg-in\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>Veeg voor meer<\/span><\/div>\n<\/div>\n\n<script>\n(function(){\n  var root=document.querySelector('.inr-carrousel');\n  if(!root) return;\n  var ENDPOINT='https:\/\/inr.institute\/wp-json\/inr-stories\/v1\/etalage';\n  var rijBoven=root.querySelector('#rijBoven');\n  var rijOnder=root.querySelector('#rijOnder');\n  var status=root.querySelector('#carrStatus');\n\n  function esc(s){ return String(s==null?'':s).replace(\/[&<>\"']\/g,function(c){\n    return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]; }); }\n\n  function kaartHTML(boek){\n    var titel=esc(boek.titel);\n    var url=esc(boek.url||'#');\n    var cover=esc(boek.coverUrl||'');\n    var duur=esc(boek.duurKort||'');\n    var gratis=boek.gratis===true;\n    var meta=duur ? duur : '';\n    return ''+\n      '<a class=\"kaart\" href=\"'+url+'\" title=\"'+titel+'\">'+\n        (gratis?'<span class=\"gratis\">Gratis<\/span>':'')+\n        '<img src=\"'+cover+'\" alt=\"'+titel+'\" loading=\"lazy\">'+\n        '<span class=\"laag\"><span class=\"t\">'+titel+'<\/span>'+(meta?'<span class=\"m\">'+meta+'<\/span>':'')+'<\/span>'+\n      '<\/a>';\n  }\n\n  function vulRij(rij, boeken){\n    \/\/ twee keer achter elkaar voor de naadloze -50% loop\n    var een=boeken.map(kaartHTML).join('');\n    rij.innerHTML=een+een;\n  }\n\n  function toon(msg){\n    status.style.display='block';\n    status.textContent=msg;\n  }\n\n  fetch(ENDPOINT, {headers:{'Accept':'application\/json'}})\n    .then(function(r){ if(!r.ok) throw new Error('http '+r.status); return r.json(); })\n    .then(function(data){\n      var boeken=(data && data.boeken) ? data.boeken.slice() : [];\n      \/\/ alleen boeken met een cover\n      boeken=boeken.filter(function(b){ return b && b.coverUrl; });\n      if(!boeken.length){ toon('Geen boeken gevonden.'); return; }\n\n      \/\/ twee verschillende volgordes zodat de rijen niet identiek ogen\n      var helft=Math.ceil(boeken.length\/2);\n      var setA=boeken;                                   \/\/ bovenrij: alles\n      var setB=boeken.slice(helft).concat(boeken.slice(0,helft)); \/\/ onderrij: verschoven\n\n      vulRij(rijBoven, setA);\n      vulRij(rijOnder, setB);\n    })\n    .catch(function(err){\n      toon('De bibliotheek is even niet bereikbaar. Probeer het later opnieuw.');\n      \/\/ laat skeletons staan? nee, leegmaken zodat het niet eeuwig laadt\n      rijBoven.innerHTML=''; rijOnder.innerHTML='';\n    });\n})();\n<\/script>\n\n\n\n<!-- ============================================================================\n     INR STORIES - DE APP (losstaand)\n     Een bestand. Plak dit volledig in EEN Elementor HTML-widget.\n     Zes ervaringen in kaarten, plus twee premium-kaarten voor bestaande\n     INR-klanten (afwijkende, warmere accentkleur).\n     Donkere INR-stijl. Kaarten schieten staggered in op scroll.\n     Alles gescoped onder .inr-app, afgedwongen met !important.\n     ============================================================================ -->\n\n<style>\n\/* ---------- ROOT ---------- *\/\n.inr-app{\n  --paars:#8b7bff; --paars-diep:#5b4fd6; --indigo:#4f46e5;\n  --goud:#f0b64a; --goud-diep:#d99530;   \/* premium accent voor bestaande klanten *\/\n  --ink:#04040a; --tekst:#f6f6fc; --grijs:#9a9ab8; --grijs-diep:#5c5c78;\n  --lijn:rgba(255,255,255,.08);\n  --maxw:1180px;\n  position:relative !important; width:100% !important; max-width:100% !important;\n  margin:0 !important; padding:0 !important; box-sizing:border-box !important;\n  color:var(--tekst) !important; background:var(--ink) !important; line-height:1.5 !important;\n  overflow:hidden !important; text-align:left !important; -webkit-font-smoothing:antialiased !important;\n}\n.inr-app, .inr-app *, .inr-app *::before, .inr-app *::after{\n  box-sizing:border-box !important;\n  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;\n}\n.inr-app h2,.inr-app h3,.inr-app p,.inr-app span,.inr-app div{margin:0;padding:0;}\n\n\/* ---------- ATMOSFEER (randen puur ink voor naadloze aansluiting) ---------- *\/\n.inr-app .atmos{position:absolute !important;inset:0 !important;z-index:0 !important;overflow:hidden !important;pointer-events:none !important;\n  background:\n    radial-gradient(800px 520px at 8% 24%, rgba(124,107,255,.11), transparent 58%),\n    radial-gradient(700px 460px at 92% 74%, rgba(79,70,229,.09), transparent 56%) !important;}\n\n\/* ---------- WRAP ---------- *\/\n.inr-app .wrap{position:relative !important;z-index:1 !important;max-width:var(--maxw) !important;margin:0 auto !important;\n  padding:130px clamp(24px,5vw,40px) 130px !important;}\n\n\/* ---------- KOP ---------- *\/\n.inr-app .kop{text-align:center !important;max-width:680px !important;margin:0 auto 64px !important;}\n.inr-app .kop .eyebrow{font-size:12.5px !important;font-weight:600 !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--paars) !important;display:block !important;margin-bottom:18px !important;}\n.inr-app .kop h2{font-weight:600 !important;font-size:clamp(30px,4.6vw,54px) !important;letter-spacing:-.03em !important;line-height:1.08 !important;color:var(--tekst) !important;margin-bottom:16px !important;}\n.inr-app .kop h2 .grad{background:linear-gradient(115deg,var(--paars),var(--indigo)) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;}\n.inr-app .kop p{font-size:18px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.55 !important;max-width:44ch !important;margin:0 auto !important;}\n\n\/* ---------- GRID ---------- *\/\n.inr-app .grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:22px !important;}\n\n\/* ---------- KAART ---------- *\/\n.inr-app .kaart{position:relative !important;display:flex !important;flex-direction:column !important;\n  background:rgba(255,255,255,.035) !important;border:1px solid var(--lijn) !important;border-radius:22px !important;\n  padding:32px 30px !important;overflow:hidden !important;\n  opacity:0;transform:translateY(24px) scale(.98);\n  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s,box-shadow .4s !important;}\n.inr-app .kaart.aan{opacity:1;transform:none;}\n.inr-app .kaart:hover{border-color:rgba(124,107,255,.4) !important;background:rgba(124,107,255,.06) !important;\n  box-shadow:0 26px 54px -28px rgba(124,107,255,.5) !important;}\n\n.inr-app .kaart .ico{width:52px !important;height:52px !important;border-radius:15px !important;flex:none !important;\n  display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:24px !important;\n  background:rgba(124,107,255,.14) !important;border:1px solid rgba(124,107,255,.2) !important;color:var(--paars) !important;\n  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .4s !important;}\n.inr-app .kaart:hover .ico{transform:translateY(-3px) !important;background:rgba(124,107,255,.22) !important;}\n.inr-app .kaart .ico svg{width:25px !important;height:25px !important;}\n\n.inr-app .kaart h3{font-weight:600 !important;font-size:20px !important;letter-spacing:-.015em !important;color:var(--tekst) !important;margin-bottom:12px !important;line-height:1.2 !important;}\n.inr-app .kaart p{font-size:15px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.58 !important;}\n\n\/* ---------- PREMIUM BLOK (bestaande INR-klanten) ---------- *\/\n.inr-app .premium-kop{text-align:center !important;max-width:640px !important;margin:96px auto 40px !important;}\n.inr-app .premium-kop .label{display:inline-flex !important;align-items:center !important;gap:8px !important;\n  font-size:12px !important;font-weight:600 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--goud) !important;\n  background:rgba(240,182,74,.1) !important;border:1px solid rgba(240,182,74,.28) !important;padding:7px 15px !important;border-radius:99px !important;margin-bottom:20px !important;}\n.inr-app .premium-kop .label svg{width:14px !important;height:14px !important;}\n.inr-app .premium-kop h2{font-weight:600 !important;font-size:clamp(26px,3.8vw,40px) !important;letter-spacing:-.028em !important;line-height:1.12 !important;color:var(--tekst) !important;margin-bottom:14px !important;}\n.inr-app .premium-kop p{font-size:16.5px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.55 !important;max-width:46ch !important;margin:0 auto !important;}\n\n.inr-app .premium-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:22px !important;max-width:900px !important;margin:0 auto !important;}\n.inr-app .kaart.premium{\n  background:linear-gradient(160deg,rgba(240,182,74,.08),rgba(240,182,74,.02)) !important;\n  border-color:rgba(240,182,74,.28) !important;}\n.inr-app .kaart.premium::before{content:'' !important;position:absolute !important;top:-50px !important;right:-30px !important;width:180px !important;height:180px !important;border-radius:50% !important;\n  background:radial-gradient(circle,rgba(240,182,74,.22),transparent 70%) !important;filter:blur(30px) !important;pointer-events:none !important;}\n.inr-app .kaart.premium:hover{border-color:rgba(240,182,74,.5) !important;background:linear-gradient(160deg,rgba(240,182,74,.12),rgba(240,182,74,.03)) !important;\n  box-shadow:0 26px 54px -28px rgba(240,182,74,.5) !important;}\n.inr-app .kaart.premium .ico{background:rgba(240,182,74,.16) !important;border-color:rgba(240,182,74,.3) !important;color:var(--goud) !important;}\n.inr-app .kaart.premium:hover .ico{background:rgba(240,182,74,.26) !important;}\n.inr-app .kaart.premium .merk{position:absolute !important;top:26px !important;right:28px !important;z-index:2 !important;\n  font-size:11px !important;font-weight:600 !important;letter-spacing:.06em !important;text-transform:uppercase !important;color:var(--goud) !important;}\n\n\/* ---------- RESPONSIVE ---------- *\/\n@media(max-width:980px){\n  .inr-app .grid{grid-template-columns:repeat(2,1fr) !important;}\n}\n@media(max-width:760px){\n  .inr-app .premium-grid{grid-template-columns:1fr !important;}\n}\n@media(max-width:600px){\n  .inr-app .wrap{padding-top:84px !important;padding-bottom:84px !important;}\n  .inr-app .grid{grid-template-columns:1fr !important;gap:16px !important;}\n  .inr-app .premium-kop{margin-top:70px !important;}\n  .inr-app .kaart{padding:28px 26px !important;}\n}\n@media(prefers-reduced-motion:reduce){\n  .inr-app .kaart{opacity:1 !important;transform:none !important;transition:none !important;}\n}\n<\/style>\n\n<div class=\"inr-app\">\n  <div class=\"atmos\"><\/div>\n  <div class=\"wrap\">\n\n    <div class=\"kop\">\n      <span class=\"eyebrow\">De app<\/span>\n      <h2>Alles wat je <span class=\"grad\">nodig hebt<\/span>. Niets dat tussen jou en het verhaal komt.<\/h2>\n    <\/div>\n\n    <div class=\"grid\" id=\"appgrid\">\n      <div class=\"kaart\">\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 18v-6a9 9 0 0 1 18 0v6\"><\/path><path d=\"M21 19a2 2 0 0 1-2 2h-1a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3zM3 19a2 2 0 0 0 2 2h1a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3z\"><\/path><\/svg><\/span>\n        <h3>Gemaakt om te verdwijnen<\/h3>\n        <p>Telefoon in je zak. Stories onthoudt waar je bent en gaat verder wanneer jij verder wilt.<\/p>\n      <\/div>\n      <div class=\"kaart\">\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"><\/path><\/svg><\/span>\n        <h3>Luister waar je wilt<\/h3>\n        <p>Download vooraf en luister onderweg, in het vliegtuig of ergens zonder bereik.<\/p>\n      <\/div>\n      <div class=\"kaart\">\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"><\/path><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z\"><\/path><\/svg><\/span>\n        <h3>Maak een gedachte van jou<\/h3>\n        <p>Iets raakt je? Bewaar het moment en schrijf op wat er bij je opkomt.<\/p>\n      <\/div>\n      <div class=\"kaart\">\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18\"><\/path><\/svg><\/span>\n        <h3>Nederlands en Engels<\/h3>\n        <p>Geen vertaalde audio, maar verhalen die in beide talen zijn opgenomen.<\/p>\n      <\/div>\n      <div class=\"kaart\">\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 5v14l11-7z\"><\/path><\/svg><\/span>\n        <h3>Probeer voordat je kiest<\/h3>\n        <p>Luister naar een preview en ontdek binnen een paar minuten of een verhaal je pakt.<\/p>\n      <\/div>\n      <div class=\"kaart\">\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 19V6a2 2 0 0 1 2-2h9l5 5v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"><\/path><path d=\"M9 4v5h6\"><\/path><\/svg><\/span>\n        <h3>Jouw bibliotheek reist mee<\/h3>\n        <p>Je voortgang, favorieten en verhalen blijven altijd bij je.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Premium: alleen voor bestaande INR-klanten -->\n    <div class=\"premium-kop\">\n      <span class=\"label\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z\"><\/path><\/svg>Al klant bij INR<\/span>\n      <h2>Werkt jouw organisatie al met INR?<\/h2>\n      <p>Dan regelen we Stories voor je hele team. Niemand hoeft iets nieuws aan te maken.<\/p>\n    <\/div>\n\n    <div class=\"premium-grid\" id=\"premgrid\">\n      <div class=\"kaart premium\">\n        <span class=\"merk\">Voor klanten<\/span>\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21h18M5 21V7l7-4 7 4v14M9 21v-4h6v4M9 11h.01M15 11h.01M9 14h.01M15 14h.01\"><\/path><\/svg><\/span>\n        <h3>INR al actief in de organisatie?<\/h3>\n        <p>Wij regelen in een keer toegang voor de hele organisatie. Geen nieuwe accounts nodig.<\/p>\n      <\/div>\n      <div class=\"kaart premium\">\n        <span class=\"merk\">Voor klanten<\/span>\n        <span class=\"ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m0 8v3a2 2 0 0 0 2 2h3m8-18h3a2 2 0 0 1 2 2v3m0 8v3a2 2 0 0 1-2 2h-3M9 12h6M12 9v6\"><\/path><\/svg><\/span>\n        <h3>Integratie mogelijk<\/h3>\n        <p>Wij integreren de app zodat hij voor al je medewerkers werkt, binnen jullie eigen omgeving.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var root=document.querySelector('.inr-app');\n  if(!root) return;\n  var grid=root.querySelector('#appgrid');\n  var prem=root.querySelector('#premgrid');\n  if(!grid||!prem) return;\n\n  \/\/ De kaarten staan als echte HTML in de pagina (vertaalbaar door TranslatePress).\n  \/\/ Dit script animeert alleen wat er al is: staggered inschieten op scroll.\n  var kaarten=Array.prototype.slice.call(root.querySelectorAll('.kaart'));\n  function vuurAf(el){\n    var groep=Array.prototype.slice.call(el.querySelectorAll('.kaart'));\n    groep.forEach(function(k,i){ setTimeout(function(){ k.classList.add('aan'); }, i*70); });\n  }\n\n  if('IntersectionObserver' in window){\n    var io=new IntersectionObserver(function(es){\n      es.forEach(function(e){ if(e.isIntersecting){ vuurAf(e.target); io.unobserve(e.target); } });\n    },{threshold:.14});\n    io.observe(grid); io.observe(prem);\n  } else {\n    kaarten.forEach(function(k){ k.classList.add('aan'); });\n  }\n})();\n<\/script>\n\n\n\n<!-- ============================================================================\n     INR STORIES - PRICING\n     Een bestand. Plak dit volledig in EEN Elementor HTML-widget.\n     Leest de live prijzen uit het publieke endpoint en bouwt twee prijskaarten.\n     Alles gescoped onder .inr-prijzen, afgedwongen met !important.\n\n     - Maand\/jaar-schakelaar wisselt live de prijs; bij jaar verschijnt de korting.\n     - Het uitgelichte plan (uitgelicht:true) staat subtiel verheven met gloed\n       en een \"Populair\" markering.\n     - Voordelen, prijzen en aantallen komen rechtstreeks uit het dashboard.\n     ============================================================================ -->\n\n<style>\n\/* ---------- ROOT ---------- *\/\n.inr-prijzen{\n  --paars:#8b7bff; --paars-diep:#5b4fd6; --indigo:#4f46e5;\n  --ink:#04040a; --tekst:#f6f6fc; --grijs:#9a9ab8; --grijs-diep:#5c5c78;\n  --lijn:rgba(255,255,255,.08);\n  --maxw:1000px;\n  position:relative !important; width:100% !important; max-width:100% !important;\n  margin:0 !important; padding:0 !important; box-sizing:border-box !important;\n  color:var(--tekst) !important; background:var(--ink) !important; line-height:1.5 !important;\n  overflow:hidden !important; text-align:left !important; -webkit-font-smoothing:antialiased !important;\n}\n.inr-prijzen, .inr-prijzen *, .inr-prijzen *::before, .inr-prijzen *::after{\n  box-sizing:border-box !important;\n  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;\n}\n.inr-prijzen h2,.inr-prijzen h3,.inr-prijzen p,.inr-prijzen span,.inr-prijzen div,.inr-prijzen a,.inr-prijzen button,.inr-prijzen ul,.inr-prijzen li{margin:0;padding:0;}\n.inr-prijzen ul{list-style:none !important;}\n.inr-prijzen a{text-decoration:none !important;color:inherit !important;}\n\n\/* ---------- ATMOSFEER ---------- *\/\n.inr-prijzen .atmos{position:absolute !important;inset:0 !important;z-index:0 !important;overflow:hidden !important;pointer-events:none !important;\n  background:\n    radial-gradient(680px 420px at 50% 40%, rgba(124,107,255,.13), transparent 55%),\n    radial-gradient(600px 400px at 88% 72%, rgba(79,70,229,.09), transparent 54%) !important;}\n\n\/* ---------- WRAP ---------- *\/\n.inr-prijzen .wrap{position:relative !important;z-index:1 !important;max-width:var(--maxw) !important;margin:0 auto !important;\n  padding:110px clamp(24px,5vw,40px) 120px !important;}\n\n\/* ---------- KOP ---------- *\/\n.inr-prijzen .kop{text-align:center !important;max-width:640px !important;margin:0 auto 40px !important;}\n.inr-prijzen .kop .eyebrow{font-size:12.5px !important;font-weight:600 !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--paars) !important;display:block !important;margin-bottom:18px !important;}\n.inr-prijzen .kop h2{font-weight:600 !important;font-size:clamp(32px,4.8vw,56px) !important;letter-spacing:-.03em !important;line-height:1.06 !important;color:var(--tekst) !important;margin-bottom:16px !important;}\n.inr-prijzen .kop h2 .grad{background:linear-gradient(115deg,var(--paars),var(--indigo)) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;}\n.inr-prijzen .kop p{font-size:18px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.55 !important;max-width:46ch !important;margin:0 auto !important;}\n\n\/* ---------- SCHAKELAAR ---------- *\/\n.inr-prijzen .schakel{display:flex !important;justify-content:center !important;margin:0 auto 20px !important;}\n.inr-prijzen .schakel .track{position:relative !important;display:inline-flex !important;background:rgba(255,255,255,.05) !important;border:1px solid var(--lijn) !important;border-radius:99px !important;padding:5px !important;}\n.inr-prijzen .schakel .knop{position:relative !important;z-index:2 !important;border:0 !important;background:transparent !important;cursor:pointer !important;\n  font-size:14px !important;font-weight:600 !important;color:var(--grijs) !important;padding:9px 22px !important;border-radius:99px !important;\n  transition:color .35s ease !important;white-space:nowrap !important;}\n.inr-prijzen .schakel .knop.actief{color:#fff !important;}\n.inr-prijzen .schakel .glijder{position:absolute !important;z-index:1 !important;top:5px !important;bottom:5px !important;left:5px !important;\n  border-radius:99px !important;background:linear-gradient(120deg,var(--paars),var(--paars-diep)) !important;\n  box-shadow:0 8px 20px -8px rgba(124,107,255,.8) !important;\n  transition:transform .4s cubic-bezier(.2,.7,.2,1),width .4s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-prijzen .schakel .spaar{margin-left:10px !important;align-self:center !important;font-size:12px !important;font-weight:600 !important;color:var(--paars) !important;\n  opacity:0 !important;transform:translateX(-6px) !important;transition:opacity .4s ease,transform .4s ease !important;}\n.inr-prijzen .schakel .spaar.zicht{opacity:1 !important;transform:none !important;}\n\n\/* ---------- KAARTEN ---------- *\/\n.inr-prijzen .kaarten{display:grid !important;grid-template-columns:1fr 1fr !important;gap:22px !important;align-items:stretch !important;margin-top:36px !important;}\n.inr-prijzen .kaart{position:relative !important;display:flex !important;flex-direction:column !important;\n  background:rgba(255,255,255,.035) !important;border:1px solid var(--lijn) !important;border-radius:26px !important;\n  padding:34px 30px 32px !important;overflow:hidden !important;\n  opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),border-color .4s !important;}\n.inr-prijzen .kaart.in{opacity:1;transform:none;}\n.inr-prijzen .kaart.d2{transition-delay:.12s !important;}\n\/* uitgelicht plan *\/\n.inr-prijzen .kaart.uit{border-color:rgba(124,107,255,.4) !important;background:rgba(124,107,255,.06) !important;\n  box-shadow:0 30px 70px -34px rgba(124,107,255,.55) !important;}\n.inr-prijzen .kaart.uit::before{content:'' !important;position:absolute !important;top:-60px !important;right:-40px !important;width:220px !important;height:220px !important;border-radius:50% !important;\n  background:radial-gradient(circle,rgba(124,107,255,.35),transparent 70%) !important;filter:blur(30px) !important;pointer-events:none !important;}\n.inr-prijzen .badge{position:absolute !important;top:22px !important;right:22px !important;z-index:2 !important;\n  font-size:11px !important;font-weight:600 !important;letter-spacing:.06em !important;text-transform:uppercase !important;color:#fff !important;\n  padding:6px 12px !important;border-radius:99px !important;background:linear-gradient(120deg,var(--paars),var(--paars-diep)) !important;\n  box-shadow:0 8px 20px -8px rgba(124,107,255,.7) !important;}\n\n.inr-prijzen .kaart .naam{position:relative !important;z-index:2 !important;font-weight:600 !important;font-size:20px !important;letter-spacing:-.01em !important;color:var(--tekst) !important;margin-bottom:6px !important;}\n.inr-prijzen .kaart .sub{position:relative !important;z-index:2 !important;font-size:14px !important;font-weight:300 !important;color:var(--grijs) !important;margin-bottom:24px !important;}\n\n\/* prijs *\/\n.inr-prijzen .prijs{position:relative !important;z-index:2 !important;display:flex !important;align-items:baseline !important;gap:8px !important;margin-bottom:6px !important;}\n.inr-prijzen .prijs .bedrag{font-weight:700 !important;font-size:clamp(38px,5vw,50px) !important;letter-spacing:-.04em !important;line-height:1 !important;color:var(--tekst) !important;\n  transition:opacity .3s ease !important;}\n.inr-prijzen .prijs .per{font-size:15px !important;font-weight:400 !important;color:var(--grijs) !important;}\n.inr-prijzen .onderprijs{position:relative !important;z-index:2 !important;min-height:20px !important;font-size:13.5px !important;font-weight:400 !important;color:var(--grijs-diep) !important;margin-bottom:26px !important;}\n.inr-prijzen .onderprijs .accent{color:var(--paars) !important;font-weight:600 !important;}\n\n\/* voordelen *\/\n.inr-prijzen .voordelen{position:relative !important;z-index:2 !important;display:flex !important;flex-direction:column !important;gap:13px !important;margin-bottom:30px !important;flex:1 1 auto !important;}\n.inr-prijzen .voordeel{display:flex !important;gap:12px !important;align-items:flex-start !important;font-size:14.5px !important;font-weight:300 !important;color:#d9d9e8 !important;line-height:1.45 !important;}\n.inr-prijzen .voordeel .v{flex:none !important;width:20px !important;height:20px !important;border-radius:6px !important;margin-top:1px !important;\n  background:rgba(124,107,255,.16) !important;color:var(--paars) !important;display:flex !important;align-items:center !important;justify-content:center !important;}\n.inr-prijzen .kaart.uit .voordeel .v{background:rgba(124,107,255,.26) !important;}\n.inr-prijzen .voordeel .v svg{width:12px !important;height:12px !important;}\n\n\/* cta *\/\n.inr-prijzen .cta{position:relative !important;z-index:2 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;\n  width:100% !important;padding:15px 20px !important;border-radius:14px !important;font-size:15px !important;font-weight:600 !important;letter-spacing:-.01em !important;\n  border:1px solid var(--lijn) !important;background:rgba(255,255,255,.05) !important;color:var(--tekst) !important;cursor:pointer !important;\n  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s !important;}\n.inr-prijzen .cta:hover{transform:translateY(-2px) !important;background:rgba(255,255,255,.09) !important;}\n.inr-prijzen .kaart.uit .cta{background:linear-gradient(120deg,var(--paars),var(--paars-diep)) !important;border-color:transparent !important;color:#fff !important;\n  box-shadow:0 16px 34px -14px rgba(124,107,255,.8) !important;}\n.inr-prijzen .kaart.uit .cta:hover{box-shadow:0 22px 44px -14px rgba(124,107,255,.95) !important;}\n\n\/* ---------- MELDING ---------- *\/\n.inr-prijzen .melding{text-align:center !important;color:var(--grijs) !important;font-weight:300 !important;font-size:16px !important;padding:20px !important;}\n\n\/* skeleton tijdens laden *\/\n.inr-prijzen .skel-kaart{border-radius:26px !important;min-height:440px !important;\n  background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 70%) !important;background-size:200% 100% !important;\n  animation:pr-shim 1.4s linear infinite !important;border:1px solid var(--lijn) !important;}\n@keyframes pr-shim{from{background-position:200% 0;}to{background-position:-200% 0;}}\n\n\/* ---------- RESPONSIVE ---------- *\/\n@media(max-width:760px){\n  .inr-prijzen .wrap{padding-top:80px !important;padding-bottom:90px !important;}\n  .inr-prijzen .kaarten{grid-template-columns:1fr !important;}\n  \/* uitgelicht plan bovenaan op mobiel *\/\n  .inr-prijzen .kaart.uit{order:-1 !important;}\n}\n@media(prefers-reduced-motion:reduce){\n  .inr-prijzen .kaart{opacity:1 !important;transform:none !important;transition:none !important;}\n  .inr-prijzen .skel-kaart{animation:none !important;}\n}\n<\/style>\n\n<div class=\"inr-prijzen\">\n  <div class=\"atmos\"><\/div>\n  <div class=\"wrap\">\n\n    <div class=\"kop\">\n      <span class=\"eyebrow\">Toegang<\/span>\n      <h2>Kies wat bij je <span class=\"grad\">luisteren<\/span> past.<\/h2>\n      <p>Twee eenvoudige abonnementen. Maandelijks opzegbaar, of een jaar met korting. Alles direct in de app.<\/p>\n    <\/div>\n\n    <div class=\"schakel\">\n      <div class=\"track\" id=\"track\">\n        <span class=\"glijder\" id=\"glijder\"><\/span>\n        <button class=\"knop actief\" data-periode=\"maand\" id=\"knMaand\">Maandelijks<\/button>\n        <button class=\"knop\" data-periode=\"jaar\" id=\"knJaar\">Jaarlijks<\/button>\n      <\/div>\n      <span class=\"spaar\" id=\"spaar\"><\/span>\n    <\/div>\n\n    <div class=\"kaarten\" id=\"kaarten\">\n      <div class=\"skel-kaart\"><\/div>\n      <div class=\"skel-kaart\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var root=document.querySelector('.inr-prijzen');\n  if(!root) return;\n  var ENDPOINT='https:\/\/inr.institute\/wp-json\/inr-stories\/v1\/prijzen';\n  var kaartenEl=root.querySelector('#kaarten');\n  var knMaand=root.querySelector('#knMaand');\n  var knJaar=root.querySelector('#knJaar');\n  var glijder=root.querySelector('#glijder');\n  var spaar=root.querySelector('#spaar');\n\n  var PLANNEN=[], VALUTA='EUR', periode='maand', maxKorting=0;\n\n  function esc(s){ return String(s==null?'':s).replace(\/[&<>\"']\/g,function(c){\n    return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]; }); }\n\n  var VINK='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>';\n\n  function valutaTeken(v){ return v==='EUR' ? 'EUR ' : (v==='USD' ? '$' : (v==='GBP' ? 'GBP ' : (v?esc(v)+' ':''))); }\n\n  function bouwKaart(plan){\n    var teken=valutaTeken(plan.valuta||VALUTA);\n    var uitg=plan.uitgelicht===true;\n    var vd=(plan.voordelen||[]).map(function(v){\n      return '<li class=\"voordeel\"><span class=\"v\">'+VINK+'<\/span><span>'+esc(v)+'<\/span><\/li>';\n    }).join('');\n    var sub=(plan.titels!=null?esc(plan.titels)+' titels':'') + (plan.uren!=null? (plan.titels!=null?' . ':'')+esc(plan.uren)+' uur luisteren':'');\n    return ''+\n    '<div class=\"kaart'+(uitg?' uit':'')+(uitg?' d2':'')+'\" data-maand=\"'+esc(plan.maand)+'\" data-jaar=\"'+esc(plan.jaar)+'\" data-korting=\"'+esc(plan.jaarKorting||'')+'\" data-teken=\"'+teken+'\">'+\n      (uitg?'<span class=\"badge\">Populair<\/span>':'')+\n      '<div class=\"naam\">'+esc(plan.naam)+'<\/div>'+\n      '<div class=\"sub\">'+sub+'<\/div>'+\n      '<div class=\"prijs\"><span class=\"bedrag\">'+teken+esc(plan.maand)+'<\/span><span class=\"per\">\/maand<\/span><\/div>'+\n      '<div class=\"onderprijs\"><\/div>'+\n      '<ul class=\"voordelen\">'+vd+'<\/ul>'+\n      '<a class=\"cta\" href=\"https:\/\/apps.apple.com\/nl\/app\/id6796658658\" target=\"_blank\" rel=\"noopener\">Kies '+esc(plan.naam)+'<\/a>'+\n    '<\/div>';\n  }\n\n  function herprijs(){\n    var kaarten=kaartenEl.querySelectorAll('.kaart');\n    kaarten.forEach(function(k){\n      var maand=k.getAttribute('data-maand');\n      var jaar=k.getAttribute('data-jaar');\n      var korting=k.getAttribute('data-korting');\n      var teken=k.getAttribute('data-teken');\n      var bedrag=k.querySelector('.bedrag');\n      var per=k.querySelector('.per');\n      var onder=k.querySelector('.onderprijs');\n      \/\/ korte fade bij wisseling\n      bedrag.style.opacity='0';\n      setTimeout(function(){\n        if(periode==='maand'){\n          bedrag.textContent=teken+maand;\n          per.textContent='\/maand';\n          onder.innerHTML='Maandelijks opzegbaar';\n        } else {\n          bedrag.textContent=teken+jaar;\n          per.textContent='\/jaar';\n          if(korting){\n            onder.innerHTML='<span class=\"accent\">Bespaar '+esc(korting)+'%<\/span> tegenover maandelijks';\n          } else {\n            onder.innerHTML='Per jaar, in een keer';\n          }\n        }\n        bedrag.style.opacity='1';\n      },150);\n    });\n  }\n\n  function zetGlijder(){\n    var actief = periode==='maand' ? knMaand : knJaar;\n    glijder.style.width=actief.offsetWidth+'px';\n    glijder.style.transform='translateX('+(actief.offsetLeft-5)+'px)';\n  }\n\n  function kies(p){\n    periode=p;\n    knMaand.classList.toggle('actief', p==='maand');\n    knJaar.classList.toggle('actief', p==='jaar');\n    zetGlijder();\n    herprijs();\n    if(p==='jaar' && maxKorting){ spaar.textContent='Bespaar '+maxKorting+'%'; spaar.classList.add('zicht'); }\n    else { spaar.classList.remove('zicht'); }\n  }\n\n  knMaand.addEventListener('click', function(){ kies('maand'); });\n  knJaar.addEventListener('click', function(){ kies('jaar'); });\n  window.addEventListener('resize', zetGlijder, {passive:true});\n\n  function reveal(){\n    var io=('IntersectionObserver' in window)? new IntersectionObserver(function(es){\n      es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });\n    },{threshold:.2}) : null;\n    var doelen=root.querySelectorAll('.kaart');\n    if(io){ doelen.forEach(function(d){ io.observe(d); }); }\n    else { doelen.forEach(function(d){ d.classList.add('in'); }); }\n  }\n\n  fetch(ENDPOINT, {headers:{'Accept':'application\/json'}})\n    .then(function(r){ if(!r.ok) throw new Error('http '+r.status); return r.json(); })\n    .then(function(data){\n      PLANNEN=(data && data.plannen) ? data.plannen.slice() : [];\n      if(!PLANNEN.length){ kaartenEl.innerHTML='<div class=\"melding\">Geen abonnementen gevonden.<\/div>'; return; }\n      \/\/ grootste korting bepalen voor het spaar-label\n      PLANNEN.forEach(function(p){ var k=parseInt(p.jaarKorting,10); if(!isNaN(k)&&k>maxKorting) maxKorting=k; });\n      \/\/ niet-uitgelicht links, uitgelicht rechts (op desktop); mobiel zet uitgelicht bovenaan via CSS\n      PLANNEN.sort(function(a,b){ return (a.uitgelicht===true?1:0)-(b.uitgelicht===true?1:0); });\n      kaartenEl.innerHTML=PLANNEN.map(bouwKaart).join('');\n      herprijs();\n      zetGlijder();\n      reveal();\n    })\n    .catch(function(err){\n      kaartenEl.innerHTML='<div class=\"melding\">De prijzen zijn even niet bereikbaar. Probeer het later opnieuw.<\/div>';\n    });\n})();\n<\/script>\n\n\n\n<!-- ============================================================================\n     INR CONTACTFORMULIER\n     E\u00e9n bestand. Plak dit volledig in \u00c9\u00c9N Elementor HTML-widget.\n     Alles is gescoped onder .inr-contact en afgedwongen met !important,\n     zodat Elementor\/WordPress de stijl niet kan overrulen.\n\n     Stijl in lijn met de rest van de site: Inter, witte basis, ink #0A0A0B,\n     glassmorphism, atmosfeer-blobs, reveal-on-scroll, ink-accent.\n\n     Verzending: eigen plugin-endpoint (INR Website Leads), form-type 'contact'.\n     Geen Elementor-capture meer. Honeypot + tijdslot tegen bots.\n\n     CONTRAST-FIX (WCAG AA): de lichtgrijze tint --grijs-licht (#9A95A8) haalde\n     maar 2.9:1 op wit en zakte daarmee onder de 4.5:1-eis. Alle leesbare tekst\n     die daarop stond \u2014 het (optioneel)-sterretje en de placeholders \u2014 staat nu\n     op --grijs (#6B6480, 5.59:1). De decoratieve select-chevron is mee verhoogd.\n     ============================================================================ -->\n\n<style>\n\/* ---------- 1. ELEMENTOR-ONTWAPENING + ROOT ---------- *\/\n.inr-contact{\n  --ink:#0A0A0B; --ink-2:#1C1C20; --grijs:#6B6480; --grijs-licht:#9A95A8;\n  --lijn:rgba(10,10,11,.10); --lijn-zacht:rgba(10,10,11,.06);\n  --veld-bg:#FFFFFF; --glas:rgba(255,255,255,.72); --soft:#F7F6FA;\n  --radius:24px; --maxw:1200px;\n  position:relative !important; width:100% !important; max-width:100% !important;\n  margin:0 !important; padding:0 clamp(22px,5vw,40px) !important; box-sizing:border-box !important;\n  color:var(--ink) !important; background:transparent !important; line-height:1.5 !important;\n  overflow:hidden !important; text-align:left !important;\n  -webkit-font-smoothing:antialiased !important;\n}\n.inr-contact, .inr-contact *, .inr-contact *::before, .inr-contact *::after{\n  box-sizing:border-box !important;\n  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;\n}\n.inr-contact h1,.inr-contact h2,.inr-contact h3,.inr-contact p,\n.inr-contact span,.inr-contact div,.inr-contact label,.inr-contact a,.inr-contact button{margin:0;padding:0;}\n.inr-contact a{text-decoration:none !important;color:inherit !important;}\n.inr-contact button{background:none !important;border:none !important;cursor:pointer !important;color:inherit !important;font:inherit !important;}\n\n\/* ---------- 2. ATMOSFEER (drift-blobs) ---------- *\/\n.inr-contact .atmos{position:absolute !important;inset:0 !important;z-index:0 !important;overflow:hidden !important;pointer-events:none !important;background:transparent !important;}\n.inr-contact .blob{position:absolute !important;border-radius:50% !important;filter:blur(120px) !important;opacity:.07 !important;animation:inrc-drift 32s ease-in-out infinite !important;}\n.inr-contact .blob.a{width:520px;height:520px;background:rgba(10,10,11,1);top:-160px;left:-140px;}\n.inr-contact .blob.b{width:460px;height:460px;background:rgba(28,28,32,1);bottom:-200px;right:-160px;animation-delay:-13s;}\n@keyframes inrc-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(36px,-28px) scale(1.06);}}\n\n\/* ---------- 3. LAYOUT ---------- *\/\n.inr-contact .wrap{position:relative !important;z-index:1 !important;width:100% !important;max-width:var(--maxw) !important;margin:0 auto !important;padding:clamp(64px,9vw,120px) 0 !important;}\n.inr-contact .kaart{\n  display:grid !important;grid-template-columns:0.92fr 1.08fr !important;gap:0 !important;\n  background:var(--glas) !important;-webkit-backdrop-filter:blur(20px) !important;backdrop-filter:blur(20px) !important;\n  border:1px solid var(--lijn) !important;border-radius:32px !important;overflow:hidden !important;\n  box-shadow:0 40px 90px -54px rgba(10,10,11,.4) !important;\n}\n\n\/* ---------- 4. LINKER PANEEL ---------- *\/\n.inr-contact .paneel{\n  position:relative !important;overflow:hidden !important;background:var(--ink) !important;color:#fff !important;\n  padding:clamp(40px,5vw,64px) clamp(32px,4vw,56px) !important;\n  display:flex !important;flex-direction:column !important;\n}\n.inr-contact .paneel::before{content:'' !important;position:absolute !important;top:-130px !important;right:-90px !important;width:360px !important;height:360px !important;border-radius:50% !important;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%) !important;filter:blur(50px) !important;pointer-events:none !important;}\n.inr-contact .paneel::after{content:'' !important;position:absolute !important;bottom:-150px !important;left:-110px !important;width:340px !important;height:340px !important;border-radius:50% !important;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%) !important;filter:blur(50px) !important;pointer-events:none !important;}\n.inr-contact .paneel-in{position:relative !important;z-index:1 !important;display:flex !important;flex-direction:column !important;height:100% !important;}\n.inr-contact .badge{display:inline-flex !important;align-items:center !important;gap:9px !important;align-self:flex-start !important;\n  font-size:12px !important;font-weight:600 !important;letter-spacing:.06em !important;color:#fff !important;\n  border:1px solid rgba(255,255,255,.22) !important;background:rgba(255,255,255,.06) !important;\n  padding:8px 15px !important;border-radius:99px !important;margin-bottom:30px !important;}\n.inr-contact .badge .stip{width:7px !important;height:7px !important;border-radius:50% !important;background:#fff !important;}\n.inr-contact .paneel h2{font-weight:700 !important;font-size:clamp(28px,3.6vw,42px) !important;line-height:1.08 !important;letter-spacing:-.03em !important;color:#fff !important;margin-bottom:18px !important;}\n.inr-contact .paneel .lead{font-size:clamp(15px,1.6vw,17px) !important;font-weight:300 !important;color:rgba(255,255,255,.74) !important;line-height:1.62 !important;max-width:42ch !important;}\n.inr-contact .direct{margin-top:auto !important;padding-top:42px !important;}\n.inr-contact .direct-l{font-size:12px !important;font-weight:600 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:rgba(255,255,255,.5) !important;margin-bottom:16px !important;}\n.inr-contact .direct-rij{display:flex !important;align-items:center !important;gap:13px !important;margin-bottom:13px !important;}\n.inr-contact .direct-rij:last-child{margin-bottom:0 !important;}\n.inr-contact .direct-ic{flex:none !important;width:38px !important;height:38px !important;border-radius:11px !important;background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.12) !important;display:flex !important;align-items:center !important;justify-content:center !important;color:#fff !important;}\n.inr-contact .direct-ic svg{width:17px !important;height:17px !important;stroke:#fff !important;fill:none !important;stroke-width:1.7 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}\n.inr-contact .direct-rij a,.inr-contact .direct-rij span{font-size:15.5px !important;font-weight:400 !important;color:rgba(255,255,255,.92) !important;letter-spacing:-.01em !important;transition:color .2s !important;word-break:break-word !important;}\n.inr-contact a.direct-link:hover{color:#fff !important;}\n\n\/* ---------- 5. RECHTER PANEEL: FORMULIER ---------- *\/\n.inr-contact .form-zij{padding:clamp(40px,5vw,64px) clamp(32px,4vw,56px) !important;background:transparent !important;}\n.inr-contact .veld-rij{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:18px !important;margin-bottom:20px !important;}\n.inr-contact .veld{display:flex !important;flex-direction:column !important;min-width:0 !important;}\n.inr-contact .veld.vol{margin-bottom:20px !important;}\n.inr-contact .veld label{font-size:13px !important;font-weight:600 !important;color:var(--ink) !important;letter-spacing:-.005em !important;margin-bottom:8px !important;}\n\/* CONTRAST-FIX: was --grijs-licht (2.9:1), nu --grijs (5.59:1). *\/\n.inr-contact .veld label .ster{color:var(--grijs) !important;font-weight:400 !important;}\n.inr-contact .veld input,.inr-contact .veld select,.inr-contact .veld textarea{\n  width:100% !important;border:1px solid var(--lijn) !important;border-radius:13px !important;\n  padding:14px 16px !important;font-size:15px !important;font-weight:400 !important;line-height:1.4 !important;\n  color:var(--ink) !important;background:var(--veld-bg) !important;-webkit-text-fill-color:var(--ink) !important;\n  outline:none !important;-webkit-appearance:none !important;appearance:none !important;\n  transition:border-color .2s,box-shadow .2s,background .2s !important;\n}\n\/* CONTRAST-FIX: placeholders waren --grijs-licht (2.9:1), nu --grijs (5.59:1). *\/\n.inr-contact .veld input::placeholder,.inr-contact .veld textarea::placeholder{color:var(--grijs) !important;opacity:1 !important;}\n.inr-contact .veld input:focus,.inr-contact .veld select:focus,.inr-contact .veld textarea:focus{\n  border-color:var(--ink) !important;box-shadow:0 0 0 4px rgba(10,10,11,.07) !important;\n}\n.inr-contact .veld input.fout,.inr-contact .veld textarea.fout{border-color:#DC2626 !important;box-shadow:0 0 0 4px rgba(220,38,38,.10) !important;}\n.inr-contact .veld textarea{min-height:130px !important;resize:vertical !important;}\n.inr-contact .veld.select-veld{position:relative !important;}\n\/* Decoratieve chevron, mee verhoogd naar --grijs voor visuele samenhang. *\/\n.inr-contact .veld.select-veld::after{content:'' !important;position:absolute !important;right:18px !important;bottom:19px !important;width:8px !important;height:8px !important;border-right:1.6px solid var(--grijs) !important;border-bottom:1.6px solid var(--grijs) !important;transform:rotate(45deg) !important;pointer-events:none !important;}\n.inr-contact .veld select{cursor:pointer !important;padding-right:40px !important;}\n\n\/* honeypot, visueel verborgen *\/\n.inr-contact .hp-veld{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;}\n\n.inr-contact .knop{\n  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;width:100% !important;\n  margin-top:8px !important;background:var(--ink) !important;color:#fff !important;border-radius:14px !important;\n  padding:17px 28px !important;font-size:16px !important;font-weight:600 !important;letter-spacing:-.005em !important;line-height:1.2 !important;\n  box-shadow:0 14px 30px -16px rgba(10,10,11,.6) !important;\n  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .25s !important;\n}\n.inr-contact .knop:hover{transform:translateY(-2px) !important;box-shadow:0 20px 40px -18px rgba(10,10,11,.7) !important;}\n.inr-contact .knop svg{width:16px !important;height:16px !important;stroke:currentColor !important;fill:none !important;stroke-width:2 !important;stroke-linecap:round !important;stroke-linejoin:round !important;transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-contact .knop:hover svg{transform:translateX(4px) !important;}\n.inr-contact .knop[disabled]{opacity:.55 !important;cursor:wait !important;transform:none !important;box-shadow:none !important;}\n\n.inr-contact .form-fout{font-size:13.5px !important;font-weight:400 !important;color:#DC2626 !important;margin-top:14px !important;text-align:center !important;\n  max-height:0 !important;overflow:hidden !important;opacity:0 !important;transition:opacity .25s,max-height .25s !important;}\n.inr-contact .form-fout.toon{opacity:1 !important;max-height:60px !important;}\n.inr-contact .form-belofte{margin-top:18px !important;display:flex !important;align-items:flex-start !important;gap:9px !important;font-size:12.5px !important;font-weight:400 !important;color:var(--grijs) !important;line-height:1.55 !important;}\n.inr-contact .form-belofte svg{width:14px !important;height:14px !important;flex:none !important;margin-top:2px !important;stroke:var(--ink) !important;fill:none !important;stroke-width:2 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}\n\n\/* ---------- 6. SUCCES-STAAT ---------- *\/\n.inr-contact .form-velden.verzonden{display:none !important;}\n.inr-contact .succes{display:none !important;flex-direction:column !important;align-items:flex-start !important;gap:16px !important;padding:14px 0 !important;}\n.inr-contact .succes.toon{display:flex !important;}\n.inr-contact .succes .vink{width:54px !important;height:54px !important;border-radius:16px !important;background:var(--soft) !important;border:1px solid var(--lijn) !important;display:flex !important;align-items:center !important;justify-content:center !important;}\n.inr-contact .succes .vink svg{width:26px !important;height:26px !important;stroke:var(--ink) !important;fill:none !important;stroke-width:2.4 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}\n.inr-contact .succes h3{font-weight:700 !important;font-size:23px !important;letter-spacing:-.02em !important;color:var(--ink) !important;}\n.inr-contact .succes p{font-size:15.5px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.6 !important;max-width:42ch !important;}\n\n\/* ---------- 7. REVEAL ---------- *\/\n.inr-contact .rev{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}\n.inr-contact .rev.in{opacity:1 !important;transform:none !important;}\n\n\/* ---------- 8. MOBIEL ---------- *\/\n@media(max-width:880px){\n  .inr-contact .wrap{padding:64px 0 !important;}\n  .inr-contact .kaart{grid-template-columns:1fr !important;border-radius:26px !important;}\n  .inr-contact .paneel{padding:40px 28px !important;}\n  .inr-contact .paneel .lead{max-width:none !important;}\n  .inr-contact .direct{padding-top:34px !important;}\n  .inr-contact .form-zij{padding:36px 28px !important;}\n  .inr-contact .veld-rij{grid-template-columns:1fr !important;gap:0 !important;margin-bottom:0 !important;}\n  .inr-contact .veld-rij .veld{margin-bottom:20px !important;}\n}\n@media(prefers-reduced-motion:reduce){\n  .inr-contact .rev{opacity:1 !important;transform:none !important;transition:none !important;}\n  .inr-contact .blob{animation:none !important;}\n  .inr-contact .knop,.inr-contact .knop svg{transition:none !important;}\n}\n<\/style>\n\n<div class=\"inr-contact\">\n<div class=\"atmos\"><div class=\"blob a\"><\/div><div class=\"blob b\"><\/div><\/div>\n\n<div class=\"wrap\">\n  <div class=\"kaart rev\">\n\n    <!-- LINKER PANEEL -->\n    <div class=\"paneel\">\n      <div class=\"paneel-in\">\n        <div class=\"badge\"><span class=\"stip\"><\/span>Contact<\/div>\n        <h2>Zeg hallo. Wij denken graag met je mee.<\/h2>\n        <p class=\"lead\">Laat je gegevens achter en vertel kort waar je mee bezig bent. We nemen persoonlijk contact met je op, zonder verkooppraat.<\/p>\n        <div class=\"direct\">\n          <div class=\"direct-l\">Ons direct bereiken<\/div>\n          <div class=\"direct-rij\">\n            <span class=\"direct-ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L20 13l1 4v3a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z\"><\/path><\/svg><\/span>\n            <a class=\"direct-link\" href=\"tel:+31320844170\">+31 320 844 170<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- RECHTER PANEEL: FORMULIER -->\n    <div class=\"form-zij\">\n      <div class=\"form-velden\" id=\"inrcVelden\">\n\n        <div class=\"veld-rij\">\n          <div class=\"veld\">\n            <label for=\"inrcNaam\">Naam<\/label>\n            <input type=\"text\" id=\"inrcNaam\" placeholder=\"Jan Willem\" autocomplete=\"name\">\n          <\/div>\n          <div class=\"veld\">\n            <label for=\"inrcTel\">Telefoon <span class=\"ster\">(optioneel)<\/span><\/label>\n            <input type=\"tel\" id=\"inrcTel\" placeholder=\"Telefoon\" autocomplete=\"tel\">\n          <\/div>\n        <\/div>\n\n        <div class=\"veld vol\">\n          <label for=\"inrcEmail\">E-mail<\/label>\n          <input type=\"email\" id=\"inrcEmail\" placeholder=\"jij@bedrijf.nl\" autocomplete=\"email\" inputmode=\"email\">\n        <\/div>\n\n        <div class=\"veld-rij\">\n          <div class=\"veld select-veld\">\n            <label for=\"inrcLocatie\">Locatie <span class=\"ster\">(optioneel)<\/span><\/label>\n            <select id=\"inrcLocatie\">\n              <option value=\"\">Selecteer<\/option>\n              <option value=\"Noord-Nederland\">Noord-Nederland<\/option>\n              <option value=\"Oost-Nederland\">Oost-Nederland<\/option>\n              <option value=\"Midden-Nederland\">Midden-Nederland<\/option>\n              <option value=\"West-Nederland\">West-Nederland<\/option>\n              <option value=\"Zuid-Nederland\">Zuid-Nederland<\/option>\n              <option value=\"Heel Nederland \/ landelijk\">Heel Nederland \/ landelijk<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"veld\">\n            <label for=\"inrcMedewerkers\">Medewerkers <span class=\"ster\">(optioneel)<\/span><\/label>\n            <input type=\"number\" id=\"inrcMedewerkers\" placeholder=\"1\" min=\"1\" inputmode=\"numeric\">\n          <\/div>\n        <\/div>\n\n        <div class=\"veld vol\">\n          <label for=\"inrcBericht\">Bericht<\/label>\n          <textarea id=\"inrcBericht\" placeholder=\"Waar kunnen we je mee helpen?\"><\/textarea>\n        <\/div>\n\n        <!-- honeypot -->\n        <div class=\"hp-veld\" aria-hidden=\"true\">\n          <label for=\"inrcHp\">Laat dit veld leeg<\/label>\n          <input type=\"text\" id=\"inrcHp\" tabindex=\"-1\" autocomplete=\"off\">\n        <\/div>\n\n        <button type=\"button\" class=\"knop\" id=\"inrcKnop\">\n          Verstuur bericht\n          <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n        <\/button>\n\n        <div class=\"form-fout\" id=\"inrcFout\">Controleer de gemarkeerde velden.<\/div>\n\n        <div class=\"form-belofte\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>\n          <span>We gebruiken je gegevens uitsluitend om contact met je op te nemen over je vraag.<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- succes-staat -->\n      <div class=\"succes\" id=\"inrcSucces\">\n        <div class=\"vink\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg><\/div>\n        <h3>Bedankt, je bericht is binnen.<\/h3>\n        <p>We hebben je gegevens ontvangen en nemen zo snel mogelijk persoonlijk contact met je op.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n<\/div>\n\n<script>\n\/* ----- Config: pas hier het endpoint aan zonder de rest te raken ----- *\/\nwindow.INR_CONTACT = {\n  endpoint: \"\/wp-json\/inr-dashboard\/v1\/lead-binnen\",\n  form: \"contact\"\n};\n\n(function(){\n  var GELADEN = Math.floor(Date.now() \/ 1000);\n\n  function start(root){\n    if(!root || root.getAttribute('data-inr-actief') === '1'){ return; }\n    root.setAttribute('data-inr-actief', '1');\n\n    var CFG = window.INR_CONTACT || {};\n    var ENDPOINT = CFG.endpoint || '\/wp-json\/inr-dashboard\/v1\/lead-binnen';\n    var FORM = CFG.form || 'contact';\n\n    var velden = root.querySelector('#inrcVelden');\n    var succes = root.querySelector('#inrcSucces');\n    var knop   = root.querySelector('#inrcKnop');\n    var fout   = root.querySelector('#inrcFout');\n    if(!knop) return;\n\n    var naam   = root.querySelector('#inrcNaam');\n    var tel    = root.querySelector('#inrcTel');\n    var email  = root.querySelector('#inrcEmail');\n    var loc    = root.querySelector('#inrcLocatie');\n    var mede   = root.querySelector('#inrcMedewerkers');\n    var bericht= root.querySelector('#inrcBericht');\n    var hp     = root.querySelector('#inrcHp');\n\n    function geldigEmail(e){ return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(e); }\n\n    function toonFout(tekst){\n      if(tekst) fout.textContent = tekst;\n      fout.classList.add('toon');\n    }\n    function wisFout(){ fout.classList.remove('toon'); }\n\n    [naam, email, bericht].forEach(function(v){\n      if(v){ v.addEventListener('input', function(){ v.classList.remove('fout'); wisFout(); }); }\n    });\n\n    function valideer(){\n      var ok = true;\n      if(!(naam.value || '').trim()){ naam.classList.add('fout'); ok = false; }\n      if(!geldigEmail((email.value || '').trim())){ email.classList.add('fout'); ok = false; }\n      if(!(bericht.value || '').trim()){ bericht.classList.add('fout'); ok = false; }\n      return ok;\n    }\n\n    \/* Verstuur naar het eigen plugin-endpoint (geen Elementor). Fire-and-forget\n       met honeypot + tijdslot tegen bots. Opslaan-voor-mailen gebeurt server-\n       side, dus een lead raakt niet kwijt; we tonen de bezoeker altijd de\n       bevestiging zodra de aanvraag is weggestuurd. *\/\n    function verzendNaarPlugin(klaar){\n      var payload = {\n        form: FORM,\n        naam: (naam.value || '').trim(),\n        email: (email.value || '').trim(),\n        velden: {\n          'Telefoon': (tel.value || '').trim(),\n          'Locatie': (loc.value || '').trim(),\n          'Aantal medewerkers': (mede.value || '').trim(),\n          'Bericht': (bericht.value || '').trim()\n        },\n        meta: {},\n        bron: window.location.href,\n        ts: GELADEN,\n        website: (hp ? hp.value : '')\n      };\n      try {\n        var xhr = new XMLHttpRequest();\n        xhr.open('POST', ENDPOINT, true);\n        xhr.setRequestHeader('Content-Type', 'application\/json');\n        xhr.timeout = 15000;\n        xhr.onreadystatechange = function(){\n          if(xhr.readyState !== 4) return;\n          if(xhr.status >= 200 && xhr.status < 300){ klaar(true); }\n          else { klaar(false); }\n        };\n        xhr.ontimeout = function(){ klaar(false); };\n        xhr.onerror = function(){ klaar(false); };\n        xhr.send(JSON.stringify(payload));\n      } catch(e){ klaar(false); }\n    }\n\n    function toonSucces(){\n      velden.classList.add('verzonden');\n      succes.classList.add('toon');\n      try { succes.scrollIntoView({ behavior:'smooth', block:'center' }); } catch(e){}\n    }\n\n    knop.addEventListener('click', function(){\n      wisFout();\n      if(!valideer()){ toonFout('Vul je naam, een geldig e-mailadres en een bericht in.'); return; }\n      knop.disabled = true;\n      knop.textContent = 'Een moment...';\n      verzendNaarPlugin(function(ok){\n        if(ok){\n          toonSucces();\n        } else {\n          knop.disabled = false;\n          knop.innerHTML = 'Verstuur bericht <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>';\n          toonFout('Er ging iets mis bij het versturen. Probeer het zo nog eens, of bel ons direct.');\n        }\n      });\n    });\n\n    \/* Enter in een normaal veld (niet de textarea) verstuurt het formulier. *\/\n    [naam, tel, email, mede].forEach(function(v){\n      if(v){ v.addEventListener('keypress', function(e){ if(e.key === 'Enter'){ e.preventDefault(); knop.click(); } }); }\n    });\n\n    \/* Reveal-on-scroll, met een veiligheidsval: als de IntersectionObserver om\n       welke reden dan ook niet vuurt (bijvoorbeeld omdat de template-widget al\n       volledig in beeld staat bij het laden, of buiten een normale scroll-context\n       leeft), maken we de kaart sowieso zichtbaar. Zo blijft het formulier nooit\n       op opacity:0 hangen. *\/\n    var revs = root.querySelectorAll('.rev');\n    function toonAlles(){ [].forEach.call(revs, function(e){ e.classList.add('in'); }); }\n    if(!('IntersectionObserver' in window)){\n      toonAlles();\n    } else {\n      var io = new IntersectionObserver(function(es){\n        es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });\n      }, { threshold:.08, rootMargin:'0px 0px -4% 0px' });\n      [].forEach.call(revs, function(e){ io.observe(e); });\n      \/\/ Veiligheidsval: wat er ook gebeurt, na 1,2s is de kaart zichtbaar.\n      setTimeout(toonAlles, 1200);\n    }\n  }\n\n  \/* Initialiseer elk contactformulier op de pagina. Dit is bewust bestand tegen\n     de manier waarop WordPress een template-widget kan inladen: de widget kan op\n     de ene pagina vroeg in de DOM staan en op de andere later worden geinjecteerd\n     (waardoor een eenmalige querySelector bij het laden niets vond en het formulier\n     onzichtbaar bleef). We proberen daarom meermaals:\n       1. meteen, voor formulieren die er al zijn,\n       2. op DOMContentLoaded,\n       3. via een MutationObserver voor widgets die later in de DOM verschijnen,\n       4. met een paar korte herhaalde pogingen als veiligheidsnet. *\/\n  function initAlle(){\n    var lijst = document.querySelectorAll('.inr-contact');\n    [].forEach.call(lijst, function(node){ start(node); });\n  }\n\n  \/\/ 1 + 2: meteen en bij DOM-gereed.\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', initAlle);\n  } else {\n    initAlle();\n  }\n\n  \/\/ 3: vang formulieren op die na het laden alsnog worden ingeladen.\n  if('MutationObserver' in window){\n    var mo = new MutationObserver(function(){ initAlle(); });\n    if(document.body){\n      mo.observe(document.body, { childList:true, subtree:true });\n    } else {\n      document.addEventListener('DOMContentLoaded', function(){\n        mo.observe(document.body, { childList:true, subtree:true });\n      });\n    }\n  }\n\n  \/\/ 4: een paar korte herhaalde pogingen als extra vangnet (stopt vanzelf).\n  var pogingen = 0;\n  var herhaal = setInterval(function(){\n    pogingen++;\n    initAlle();\n    if(pogingen >= 10){ clearInterval(herhaal); }\n  }, 400);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Een uur dat je bijblijft. Audioboeken die ineens verdacht veel over jou blijken te gaan. Exclusief voor iPhone en iPad. Scroll Kies je verhaal Waar ben jij nieuwsgierig naar? Waarom slimme mensen domme beslissingen nemen. Waarom sommige gesprekken nergens komen. Waarom we onder druk iemand anders lijken te worden. En waarom verandering zo makkelijk klinkt, [&hellip;]<\/p>\n","protected":false},"author":224244682,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81065","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages\/81065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/users\/224244682"}],"replies":[{"embeddable":true,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/comments?post=81065"}],"version-history":[{"count":12,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages\/81065\/revisions"}],"predecessor-version":[{"id":81089,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages\/81065\/revisions\/81089"}],"wp:attachment":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/media?parent=81065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}