Complete Nederlandse footer Nieuw

<!-- Complete Nederlandse footer · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fnc" role="contentinfo">
  <div class="fnc__top">
    <div class="fnc__brand">
      <a href="#" class="fnc__logo">Groenvast<span>hoveniers</span></a>
      <p>Tuinontwerp, aanleg en onderhoud in Ede, Wageningen en de Gelderse Vallei. Sinds 1987, met eigen kwekerij.</p>
      <a href="#" class="fnc__score"><b>9,4</b><span><span class="fnc__stars" aria-hidden="true"><i style="width:94%"></i></span>286 beoordelingen op Klantenvertellen</span></a>
    </div>
    <details class="fnc__col" open><summary>Diensten</summary><ul><li><a href="#">Tuinontwerp</a></li><li><a href="#">Tuinaanleg</a></li><li><a href="#">Tuinonderhoud</a></li><li><a href="#">Bestrating</a></li><li><a href="#">Schuttingen en overkappingen</a></li></ul></details>
    <details class="fnc__col" open><summary>Bedrijf</summary><ul><li><a href="#">Over ons</a></li><li><a href="#">Projecten</a></li><li><a href="#">Werkgebied</a></li><li><a href="#">Werken bij</a></li><li><a href="#">Tuinblog</a></li></ul></details>
    <details class="fnc__col" open><summary>Contact</summary>
      <address class="fnc__addr">Kweekweg 14<br>6716 AB Ede<br><a href="tel:+31318123456">0318 123 456</a><br><a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></address>
      <p class="fnc__hours">Ma t/m vr 07:30 tot 17:00<br>Za 09:00 tot 13:00 (showtuin)</p>
    </details>
  </div>
  <div class="fnc__marks">
    <span class="fnc__lab">Aangesloten bij</span>
    <span class="fnc__badge">VHG Keurmerk Hovenier</span>
    <span class="fnc__badge">Erkend leerbedrijf SBB</span>
    <span class="fnc__badge">VCA*</span>
    <span class="fnc__badge">Groenkeur Boomverzorging</span>
    <span class="fnc__social"><a href="#">Instagram</a><a href="#">Facebook</a><a href="#">LinkedIn</a><a href="#">Pinterest</a></span>
  </div>
  <div class="fnc__legal">
    <span>© 2026 Groenvast Hoveniers B.V.</span>
    <span>KvK 12345678</span>
    <span>BTW NL001234567B01</span>
    <a href="#">Privacy</a><a href="#">Algemene voorwaarden</a><a href="#">Cookies</a>
    <button type="button" class="fnc__up">Naar boven <span aria-hidden="true">↑</span></button>
  </div>
</div>
</div>

/* Complete Nederlandse footer · NedDev · eigen werk. */
.fnc{position:relative;width:100%;align-self:flex-start;flex:none;background:#1e2b1f;color:#e9eadf;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;padding:44px 40px 22px}
.fnc *{box-sizing:border-box}
.fnc a{color:#e9eadf;text-decoration:none}
.fnc a:hover,.fnc a:focus-visible{color:#b9d98a}
.fnc__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:36px;padding-bottom:30px;border-bottom:1px solid rgba(233,234,223,.14)}
.fnc__logo{font-family:Georgia,serif;font-size:28px;font-weight:700;display:flex;align-items:baseline;gap:8px}
.fnc__logo span{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#b9d98a}
.fnc__brand p{font-size:14px;line-height:1.6;color:rgba(233,234,223,.7);margin:12px 0 18px;max-width:36ch}
.fnc__score{display:inline-flex;align-items:center;gap:12px;background:rgba(233,234,223,.06);border:1px solid rgba(233,234,223,.14);border-radius:4px;padding:10px 14px}
.fnc__score b{font-size:28px;font-weight:800;color:#b9d98a;line-height:1}
.fnc__score>span{font-size:12px;line-height:1.4;color:rgba(233,234,223,.75);display:flex;flex-direction:column;gap:3px}
.fnc__stars{position:relative;display:block;width:80px;height:13px;background:repeating-linear-gradient(90deg,rgba(233,234,223,.22) 0 13px,transparent 13px 16.75px)}
.fnc__stars i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,#f2c230 0 13px,transparent 13px 16.75px)}
.fnc__col summary{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b9d98a;list-style:none;margin-bottom:14px;cursor:default}
.fnc__col summary::-webkit-details-marker{display:none}
.fnc__col ul{list-style:none;margin:0;padding:0}
.fnc__col li{margin-bottom:9px}
.fnc__col li a{font-size:14px}
.fnc__addr{font-style:normal;font-size:14px;line-height:1.7}
.fnc__hours{font-size:13px;line-height:1.6;color:rgba(233,234,223,.65);margin:12px 0 0}
.fnc__marks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:20px 0;border-bottom:1px solid rgba(233,234,223,.14)}
.fnc__lab{font-size:12px;color:rgba(233,234,223,.6);margin-right:6px}
.fnc__badge{font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid rgba(185,217,138,.45);color:#d7e8bf;padding:5px 9px;border-radius:2px}
.fnc__social{margin-left:auto;display:flex;gap:16px;font-size:13px}
.fnc__social a{border-bottom:1px solid rgba(233,234,223,.3)}
.fnc__legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:16px;font-size:12px;color:rgba(233,234,223,.6)}
.fnc__legal a{color:rgba(233,234,223,.8)}
.fnc__up{margin-left:auto;font:600 12px 'Switzer',sans-serif;color:#e9eadf;background:transparent;border:1px solid rgba(233,234,223,.3);border-radius:999px;padding:6px 12px;cursor:pointer}
.fnc__up:hover{background:#b9d98a;color:#1e2b1f;border-color:#b9d98a}
@media(max-width:900px){.fnc__top{grid-template-columns:1fr 1fr}.fnc__brand{grid-column:1/-1}}
@media(max-width:600px){
.fnc{padding:30px 18px 18px}
.fnc__top{grid-template-columns:1fr;gap:0}
.fnc__brand{margin-bottom:18px}
.fnc__col{border-top:1px solid rgba(233,234,223,.14)}
.fnc__col summary{cursor:pointer;margin:0;padding:15px 0;display:flex;justify-content:space-between}
.fnc__col summary::after{content:'+';font-size:16px;line-height:1;color:#e9eadf}
.fnc__col[open] summary::after{content:'×'}
.fnc__col[open]>*:last-child{margin-bottom:16px}
.fnc__social{margin-left:0;width:100%;padding-top:8px}
.fnc__up{margin-left:0}}

// Complete Nederlandse footer · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.fnc');if(!w)return;
var mq=window.matchMedia('(max-width:600px)');
var cols=w.querySelectorAll('.fnc__col');
function sync(){cols.forEach(function(d){d.open=!mq.matches;});}
sync();if(mq.addEventListener)mq.addEventListener('change',sync);
cols.forEach(function(d){d.querySelector('summary').addEventListener('click',function(e){if(!mq.matches)e.preventDefault();});});
w.querySelector('.fnc__up').addEventListener('click',function(){
  var sc=w.parentElement;while(sc&&sc!==document.body&&sc.scrollHeight<=sc.clientHeight)sc=sc.parentElement;
  var sm=matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth';
  if(sc&&sc!==document.body)sc.scrollTo({top:0,behavior:sm});else window.scrollTo({top:0,behavior:sm});
});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));