
:root{--bg:#FAFAF8;--ink:#111111;--muted:#3e3e38;--border:#E8E8E0;--warm:#c5a643;--off:#F0EFE8;--edge:20px;--nav-h:86px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:18px;scroll-behavior:smooth;overflow-anchor:none;overflow-x:hidden;max-width:100%;background:var(--bg);}
body{background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.7;overflow-x:hidden;max-width:100%;padding:0 var(--edge);}
body.nav-open{overflow:hidden;}
.wrap{max-width:1280px;margin:0 auto;padding:0 56px;}
a{color:inherit;}
p,h1,h2,h3,h4,h5,h6,li,span,a{overflow-wrap:break-word;word-break:break-word;}

nav{position:fixed;top:0;left:0;right:0;z-index:100;width:100%;max-width:100%;background:var(--bg);border-bottom:1px solid var(--border);padding:0 60px;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 0;}
.nav-logo{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0;}
.nav-logo-img{height:50px;width:auto;display:block;}
.nav-links{display:flex;gap:48px;list-style:none;}
.nav-links a{font-size:13px;font-weight:300;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-cta{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--bg);border:1px solid var(--bg);padding:14px 28px;transition:opacity 0.2s;}
.nav-cta:hover{opacity:0.75;}

/* HAMBURGER */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;padding:8px;cursor:pointer;flex-shrink:0;margin-left:8px;width:40px;height:40px;}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform 0.3s ease,opacity 0.3s ease,width 0.3s ease;}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* MOBILE MENU */
.nav-mobile-menu{display:none;flex-direction:column;padding:24px 20px 36px;gap:0;background:var(--bg);border-top:1px solid var(--border);overflow-y:auto;}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-links{list-style:none;display:flex;flex-direction:column;margin-bottom:24px;}
.nav-mobile-links li{border-bottom:1px solid var(--border);}
.nav-mobile-links li:first-child{border-top:1px solid var(--border);}
.nav-mobile-links a{display:block;padding:16px 0;font-size:17px;font-weight:300;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.nav-mobile-links a:hover,.nav-mobile-links a.active{color:var(--ink);}
.nav-mobile-cta{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--bg);padding:18px 24px;text-align:center;transition:opacity 0.2s;}
.nav-mobile-cta:hover{opacity:0.75;}

footer{width:100%;max-width:100%;border-top:1px solid var(--border);padding:80px 60px 48px;}
.footer-top{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));gap:60px;margin-bottom:80px;width:100%;}
.footer-brand-name{font-family:'Syne',sans-serif;font-weight:800;font-size:28px;letter-spacing:-0.02em;color:var(--ink);margin-bottom:16px;}
.footer-logo-link{display:inline-flex;align-items:center;text-decoration:none;margin-bottom:16px;max-width:100%;}
.footer-logo-img{max-height:80px;width:auto;max-width:100%;height:auto;display:block;object-fit:contain;}
.footer-brand-sub{font-size:15px;font-weight:300;color:var(--muted);line-height:1.7;max-width:260px;}
.footer-col-title{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm);margin-bottom:24px;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:12px;}
.footer-links a{font-size:16px;font-weight:300;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--ink);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--border);gap:24px;flex-wrap:wrap;}
.footer-legal-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.footer-legal-links a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.footer-legal-links a:hover{color:var(--ink);}
.footer-legal-links span{font-size:10px;color:var(--border);}
.footer-copy{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;color:var(--muted);}
/* Zachte vermelding bij prijsbedragen (diensten / dienstpagina's) */
.price-excl-btw{font-size:0.58em;font-weight:300;color:#9a9a94;margin-left:0.28em;white-space:nowrap;vertical-align:0.12em;}
.price-amount:has(.price-prefix)::after,
.dd-hero-stat-num:has(.price-prefix)::after,
.dd-price-amount:has(.price-prefix)::after{
  content:'excl. btw';
  font-family:'DM Sans',sans-serif;
  font-size:0.42em;
  font-weight:300;
  color:#9a9a94;
  margin-left:0.3em;
  vertical-align:0.1em;
  letter-spacing:0.02em;
}
.price-card.featured .price-amount:has(.price-prefix)::after,
.dd-price-card.featured .dd-price-amount:has(.price-prefix)::after{
  color:rgba(255,255,255,0.42);
}
.price-card.featured .price-excl-btw,
.dd-price-card.featured .price-excl-btw{
  color:rgba(255,255,255,0.38);
}
.dd-aanv-price:not(.dd-aanv-price--no-euro)::after{
  content:'excl. btw';
  font-family:'DM Sans',sans-serif;
  font-size:9px;
  font-weight:300;
  color:#9a9a94;
  margin-left:0.35em;
  vertical-align:0.06em;
  letter-spacing:0.02em;
}
.footer-tagline{font-size:15px;font-weight:300;color:var(--warm);}
.footer-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;}
.footer-social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);color:var(--muted);text-decoration:none;transition:color 0.25s,border-color 0.25s,background 0.25s;}
.footer-social-link svg{width:15px;height:15px;flex-shrink:0;}
.footer-social-link:hover{color:var(--ink);border-color:var(--warm);background:var(--off);}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.8s ease,transform 0.8s ease;}
.reveal.visible{opacity:1;transform:none;}

.partial-object{display:block;width:100%;max-width:100%;border:0;background:transparent;overflow:hidden;}
.partial-object--nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;}
/* Nav-ingeladen via <object>: bij open mobiel menu moet het frame meegroeien (zie scroll-top-after-partials.js + postMessage). */
.partial-object--nav.nav-embed-expanded{height:100vh;max-height:100vh;overflow:visible;}
.partial-object--footer{height:500px;min-height:500px;}
.partial-fallback{display:block;}

@media (max-width: 1024px){
  :root{--edge:16px;}
  .wrap{padding:0 24px;}
  nav{padding:0 24px;}
  footer{padding:64px 24px 40px;}
  .nav-logo-img{height:50px;}
  .nav-links{gap:20px;}
  .nav-links a{font-size:12px;}
  .nav-cta{padding:12px 20px;font-size:10px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px;}
  .footer-bottom{flex-wrap:wrap;}
  .partial-object--footer{height:620px;min-height:620px;}
  .partial-object--nav{height:var(--nav-h);}
}

@media (max-width: 767px){
  :root{--edge:16px;}
  .wrap{padding:0 20px;}
  nav{padding:0 20px;}
  .nav-inner{padding:13px 0;flex-wrap:nowrap;}
  .nav-logo-img{height:60px;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-hamburger{display:flex;}
  footer{padding:48px 20px 36px;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
  .footer-logo-img{max-height:55px;}
  .footer-brand-sub{max-width:none;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
  .footer-legal-links{gap:8px;}
  .partial-object--nav{height:var(--nav-h);}
  .partial-object--footer{height:auto;min-height:1100px;}
}

@media (max-width: 480px){
  :root{--edge:12px;}
  .wrap{padding:0 16px;}
  nav{padding:0 16px;}
  .nav-mobile-menu{padding:20px 0 28px;}
  footer{padding:40px 16px 32px;}
  .footer-logo-img{max-height:44px;}
  .footer-legal-links{flex-direction:column;align-items:flex-start;gap:6px;}
  .footer-legal-links span{display:none;}
  .partial-object--footer{min-height:1000px;}
}

.page-fullscreen .wrap{max-width:none;}

/* ── DOC PAGES (gedeeld: legal, privacy, cookies, voorwaarden, disclaimer, klachten) ── */
.doc-back{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.4);text-decoration:none;margin-bottom:36px;transition:color 0.2s;}
.doc-back:hover{color:var(--warm);}
.doc-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);margin-bottom:20px;}
.doc-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(40px,5vw,68px);letter-spacing:-0.03em;color:var(--bg);line-height:1.05;margin-bottom:24px;}
.doc-meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;color:rgba(255,255,255,0.35);display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.doc-meta-sep{color:var(--warm);}
.doc-layout{padding:80px 0 120px;}
.doc-grid{display:grid;grid-template-columns:260px 1fr;gap:80px;align-items:start;}
.doc-toc{position:sticky;top:168px;}
.doc-toc-title{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);margin-bottom:20px;}
.doc-toc-list{list-style:none;display:flex;flex-direction:column;gap:2px;margin-bottom:40px;}
.doc-toc-list a{font-size:15px;font-weight:300;color:var(--muted);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--border);display:block;transition:color 0.2s;}
.doc-toc-list a:hover,.doc-toc-list a.active{color:var(--ink);}
.doc-toc-pages{border-top:1px solid var(--border);padding-top:24px;display:flex;flex-direction:column;gap:8px;}
.doc-toc-page-title{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm);margin-bottom:8px;}
.doc-toc-pages a{font-size:14px;font-weight:300;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.doc-toc-pages a:hover{color:var(--ink);}
.doc-body{min-width:0;}
.doc-section{padding:48px 0;border-bottom:1px solid var(--border);}
.doc-section:first-child{padding-top:0;}
.doc-section-num{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--warm);margin-bottom:12px;}
.doc-section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.01em;color:var(--ink);margin-bottom:20px;}
.doc-body p{font-size:17px;font-weight:400;color:var(--muted);line-height:1.9;margin-bottom:16px;}
.doc-body p:last-child{margin-bottom:0;}
.doc-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.doc-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.doc-list li{font-size:16px;font-weight:400;color:var(--muted);line-height:1.8;display:flex;gap:12px;align-items:flex-start;}
.doc-list li::before{content:'—';font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--warm);margin-top:3px;flex-shrink:0;}
.doc-list strong{font-weight:400;color:var(--ink);}
.doc-footer-note{margin-top:56px;padding:32px 40px;background:var(--off);border-left:2px solid var(--warm);font-size:16px;font-weight:400;color:var(--muted);line-height:1.8;}
.doc-footer-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:1024px){
  .doc-grid{grid-template-columns:200px 1fr;gap:48px;}
}
@media(max-width:767px){
  .doc-layout{padding:48px 0 80px;}
  .doc-grid{grid-template-columns:1fr;gap:0;}
  .doc-toc{position:static;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid var(--border);}
  .doc-section{padding:36px 0;}
}

/* Globale vangnet: voorkom horizontale overflow op alle elementen */
img,svg,video,iframe,table{max-width:100%;}
table{overflow-x:auto;display:block;}
.wrap > *{min-width:0;}

/* ── Large desktop (≥1440px) ─────────────────────────────────────────────── */
@media (min-width:1440px){
  :root{ --edge:32px; }
  .wrap{ max-width:1400px; padding:0 72px; }
  nav{ padding:0 80px; }
  footer{ padding:96px 80px 56px; }
  .footer-top{ gap:80px; margin-bottom:96px; }
  .footer-brand-sub{ max-width:300px; }
  .doc-grid{ grid-template-columns:300px 1fr; gap:100px; }
  .doc-layout{ padding:96px 0 140px; }
}

/* ── Extra brede schermen (≥1680px) ─────────────────────────────────────── */
@media (min-width:1680px){
  :root{ --edge:40px; }
  .wrap{ max-width:1580px; padding:0 80px; }
  nav{ padding:0 96px; }
  footer{ padding:110px 96px 64px; }
  .footer-top{ gap:96px; }
  .doc-grid{ grid-template-columns:320px 1fr; gap:110px; }
}

/* ── Brede desktop (≥1920px) ─────────────────────────────────────────────── */
@media (min-width:1920px){
  :root{ --edge:48px; }
  .wrap{ max-width:1800px; padding:0 88px; }
  nav{ padding:0 108px; }
  footer{ padding:120px 108px 72px; }
  .footer-top{ gap:108px; }
  .doc-grid{ grid-template-columns:340px 1fr; gap:120px; }
}

/* ── Ultrawide / brede monitoren (>1920px) ──────────────────────────────────
   Strategie:
   - body blijft altijd 100vw (geen cap) zodat hero-berekeningen intact blijven
   - .wrap groeit mee voor pagina's ZONDER page-fullscreen
     (page-fullscreen .wrap { max-width:none } heeft hogere specificiteit en wint)
   - .nav-inner krijgt max-width + margin auto (nav zelf blijft fixed left:0/right:0)
   - footer krijgt symmetrische padding zodat inhoud gecentreerd blijft
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width:1921px){
  :root{
    --uw-frame:min(2200px,calc(1600px + (100vw - 1920px) * 0.55));
    --uw-gutter:max(80px,calc((100vw - var(--uw-frame)) / 2));
    /* Wrap start vanaf 1800px base (gelijk aan ≥1920px breakpoint) */
    --uw-wrap:min(2200px,calc(1800px + (100vw - 1920px) * 0.55));
  }

  .wrap{max-width:var(--uw-wrap);}
  .nav-inner{max-width:var(--uw-frame);margin:0 auto;}
  footer{padding-left:var(--uw-gutter);padding-right:var(--uw-gutter);}
  .doc-grid{ grid-template-columns:380px 1fr; gap:140px; }
}

/* DG hotfix 2026-04-29: robuuste mobiele navigatie */
nav{z-index:5000;}
html.nav-menu-open,
body.nav-menu-open{overflow:hidden;}
@media (max-width:767px){
  nav{z-index:5000;}
  .nav-mobile-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    max-height:calc(100vh - var(--nav-h));
    padding:20px;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    box-shadow:0 24px 60px rgba(17,17,17,0.12);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:5001;
  }
  .nav-mobile-menu.open{display:flex;}
  .nav-mobile-links a{min-height:48px;display:flex;align-items:center;}
  .nav-mobile-cta{width:100%;}
}

/* DG Media PRD fix v6: footer op mobiel gecentreerd */
@media (max-width: 767px) {
  footer {
    text-align: center;
  }

  .footer-top {
    justify-items: center;
    text-align: center;
  }

  .footer-brand,
  .footer-col {
    width: 100%;
    text-align: center;
  }

  .footer-brand-sub {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-col-title {
    text-align: center;
  }

  .footer-links {
    align-items: center;
    text-align: center;
  }

  .footer-links li,
  .footer-links a {
    text-align: center;
  }

  .footer-bottom {
    align-items: center;
    text-align: center;
  }

  .footer-copy,
  .footer-tagline,
  .footer-legal-links {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer-legal-links {
    align-items: center;
  }
}
