Footer met laatste oproep Nieuw

<!-- Footer met laatste oproep · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="flk" role="contentinfo">
  <div class="flk__cta">
    <span class="flk__eyebrow">Gratis waardebepaling · Amstelveen en Amsterdam-Zuid</span>
    <p class="flk__q"><span>Wat is uw huis</span> <span>nu <em>echt</em> waard?</span></p>
    <p class="flk__sub">Een makelaar komt langs, en binnen 5 werkdagen heeft u een onderbouwd rapport met recente verkopen in uw straat.</p>
    <div class="flk__acts">
      <a href="tel:+31201234567" class="flk__call"><span class="flk__ico" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z" fill="currentColor"/></svg></span><span><small>Bel direct</small>020 123 4567</span></a>
      <div class="flk__mail"><a href="mailto:verkoop@voorbeeld.nl" class="flk__mailbtn"><small>Of mail</small>verkoop@voorbeeld.nl</a><button type="button" class="flk__copy" aria-label="E-mailadres kopiëren">Kopieer</button></div>
    </div>
    <p class="flk__avail"><span class="flk__dot" aria-hidden="true"></span>Vandaag bereikbaar tot 20:00, ook op zaterdag</p>
  </div>
  <div class="flk__foot">
    <a href="#" class="flk__logo">Brouwer<span>makelaardij</span></a>
    <ul class="flk__links"><li><a href="#">Aanbod</a></li><li><a href="#">Verkopen</a></li><li><a href="#">Aankoop</a></li><li><a href="#">Taxaties</a></li><li><a href="#">Over ons</a></li></ul>
    <p class="flk__legal">NVM-lid · KvK 87654321 · <a href="#">Privacy</a> · © 2026</p>
  </div>
</div>
</div>

/* Footer met laatste oproep · NedDev · eigen werk. */
.flk{position:relative;width:100%;align-self:flex-start;flex:none;min-height:480px;background:#13213c;color:#f7f2ea;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}
.flk *{box-sizing:border-box}
.flk__cta{flex:1;padding:56px 44px 44px;background:radial-gradient(circle at 92% 0%,rgba(255,106,77,.22),transparent 40%)}
.flk__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ff8a70}
.flk__q{font-size:clamp(38px,6.4vw,84px);font-weight:900;line-height:.95;letter-spacing:-.04em;margin:16px 0 18px}
.flk__q>span{display:inline-block;transform:translateY(30%);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.flk__q>span+span{transition-delay:.12s}
.flk.is-in .flk__q>span{transform:none;opacity:1}
.flk__q em{font-style:normal;color:#ff6a4d;position:relative}
.flk__sub{font-size:17px;line-height:1.5;color:rgba(247,242,234,.72);max-width:54ch;margin:0 0 28px}
.flk__acts{display:flex;flex-wrap:wrap;gap:12px}
.flk__call{display:flex;align-items:center;gap:14px;background:#ff6a4d;color:#13213c;text-decoration:none;font-weight:800;font-size:22px;padding:14px 26px 14px 14px;border-radius:999px;transition:transform .2s ease,background .2s ease;font-variant-numeric:tabular-nums}
.flk__call:hover,.flk__call:focus-visible{background:#ff8166;transform:translateY(-2px)}
.flk__call small,.flk__mailbtn small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.flk__ico{width:46px;height:46px;border-radius:50%;background:#13213c;color:#ff6a4d;display:grid;place-items:center;flex:none}
.flk__ico svg{width:20px;height:20px}
.flk__mail{display:flex;align-items:stretch;border:1.5px solid rgba(247,242,234,.35);border-radius:999px;overflow:hidden}
.flk__mailbtn{display:flex;flex-direction:column;justify-content:center;color:#f7f2ea;text-decoration:none;font-weight:700;font-size:17px;padding:10px 20px 10px 24px}
.flk__mailbtn:hover{background:rgba(247,242,234,.08)}
.flk__copy{font:600 13px 'Switzer',sans-serif;color:#f7f2ea;background:transparent;border:0;border-left:1.5px solid rgba(247,242,234,.35);padding:0 18px;cursor:pointer;min-width:96px}
.flk__copy:hover{background:rgba(247,242,234,.08)}
.flk__copy.is-done{background:#f7f2ea;color:#13213c}
.flk__avail{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(247,242,234,.65);margin:18px 0 0}
.flk__dot{width:8px;height:8px;border-radius:50%;background:#7bd88f}
.flk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:18px 44px;border-top:1px solid rgba(247,242,234,.14);font-size:13px}
.flk__logo{font-weight:800;font-size:17px;color:#f7f2ea;text-decoration:none;display:flex;align-items:baseline;gap:6px}
.flk__logo span{font-weight:400;color:#ff8a70}
.flk__links{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0}
.flk__links a,.flk__legal a{color:rgba(247,242,234,.8);text-decoration:none}
.flk__links a:hover,.flk__legal a:hover{color:#ff8a70}
.flk__legal{margin:0 0 0 auto;color:rgba(247,242,234,.55)}
@media(max-width:700px){
.flk__cta{padding:34px 18px 28px}
.flk__acts{flex-direction:column}
.flk__call{font-size:20px}
.flk__mail{border-radius:6px}
.flk__mailbtn{flex:1;font-size:15px;padding:10px 14px;min-width:0;word-break:break-all}
.flk__copy{min-width:80px;padding:0 12px}
.flk__foot{padding:16px 18px}
.flk__legal{margin:0}}
@media(prefers-reduced-motion:reduce){.flk__q>span{transform:none;opacity:1;transition:none}.flk__call{transition:none}}

// Footer met laatste oproep · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.flk');if(!w)return;
if(matchMedia('(prefers-reduced-motion: reduce)').matches||!('IntersectionObserver' in window))w.classList.add('is-in');
else{var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){w.classList.add('is-in');io.disconnect();}});},{threshold:.25});io.observe(w);}
var c=w.querySelector('.flk__copy');
c.addEventListener('click',function(){
  function done(ok){c.textContent=ok?'Gekopieerd':'Lukt niet';c.classList.toggle('is-done',ok);setTimeout(function(){c.textContent='Kopieer';c.classList.remove('is-done');},1800);}
  try{navigator.clipboard.writeText('verkoop@voorbeeld.nl').then(function(){done(true);},function(){done(false);});}catch(e){done(false);}
});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));