/* Gedeelde stijl voor de inhoudspagina's (vakpagina's, kennisbank, websitecheck, voorwaarden) */
:root{
  --bg:#f4f5f1; --paper:#ffffff; --ink:#18241f; --muted:#56635c; --line:#dde2dc;
  --groen:#1d3a2f; --groen-2:#2c5444; --messing:#b8862b; --messing-zacht:#f1e4c6; --messing-tekst:#8a6418;
  --serif:"Young Serif",Georgia,serif; --sans:"Figtree","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111915; --paper:#18221d; --ink:#e9eee9; --muted:#a6b3ab; --line:#2a3731;
  --groen:#7fb59d; --groen-2:#a5d0bc; --messing:#d9a94a; --messing-zacht:#3a3020; --messing-tekst:#d9a94a; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#111915;--paper:#18221d;--ink:#e9eee9;--muted:#a6b3ab;--line:#2a3731;--groen:#7fb59d;--groen-2:#a5d0bc;--messing:#d9a94a;--messing-zacht:#3a3020;--messing-tekst:#d9a94a;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.65}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.smal{max-width:760px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,5.4vw,3.3rem);letter-spacing:-.015em}
h1 span{color:var(--messing-tekst)}
h2{font-size:clamp(1.55rem,3.6vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0;text-wrap:pretty}
a{color:var(--groen-2)}
:focus-visible{outline:3px solid var(--messing);outline-offset:3px}
img{max-width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;z-index:50;background:var(--groen);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .2s ease}
.skip:focus{top:12px}

/* kop en menu */
header{padding-block:18px;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo img{width:44px;height:44px;flex:none}
.logo b{font-family:var(--serif);font-weight:400;font-size:1.45rem}
nav{display:flex;gap:20px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-weight:500;position:relative}
nav a:hover,nav a[aria-current]{color:var(--ink)}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--messing);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}

/* knoppen */
.btn{display:inline-block;padding:13px 22px;border-radius:8px;text-decoration:none;border:2px solid var(--groen);font:inherit;font-weight:600;cursor:pointer;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.btn.vol{background:var(--groen);color:var(--bg);box-shadow:0 10px 22px -12px rgba(29,58,47,.7)}
.btn.leeg{color:var(--groen);background:transparent}
.btn:hover{transform:translateY(-2px)}
.knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* opbouw */
.kop{padding-block:44px 52px;position:relative;overflow:hidden}
.kop::before{content:"";position:absolute;inset:-30% -10% auto auto;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--messing) 15%,transparent),transparent);pointer-events:none}
.kop .wrap{position:relative}
.kop .lead{margin-top:18px;font-size:1.18rem;color:var(--muted);max-width:52ch}
.pad{font-size:.9rem;color:var(--muted);margin-bottom:14px}
.pad a{color:var(--muted)}
section{padding-block:56px}
.licht{background:var(--paper);border-block:1px solid var(--line)}
.intro{max-width:62ch}
.intro p{margin-top:12px;color:var(--muted)}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
.drie > div{border-left:3px solid var(--messing);padding-left:18px}
.drie p{color:var(--muted);margin-top:6px;font-size:1rem}
.twee{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.vink{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.vink li{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.vink li b{color:var(--ink);font-weight:600}
.vink li::before{content:"";flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;background:var(--messing-zacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%238a6418' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.kaart{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.noot{margin-top:14px;color:var(--muted);font-size:.95rem}

/* telefoon met voorbeeldsite */
.tel{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);text-align:center}
.tel .scherm{display:block;width:min(250px,70vw);aspect-ratio:500/958;border-radius:30px;border:8px solid #141a17;background:#141a17;overflow:hidden;box-shadow:0 26px 50px -22px rgba(20,30,25,.55);transition:transform .3s ease}
.tel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tel:hover .scherm{transform:translateY(-6px) rotate(-1deg)}
.tel b{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:1.15rem}
.tel small{color:var(--muted);font-size:.9rem}

/* pakketten in het klein */
.pakjes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.pakje{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.pakje.uit{border:2px solid var(--groen)}
.pakje .prijs{font-family:var(--serif);font-size:1.8rem}
.pakje p{color:var(--muted);font-size:.95rem}
.pakje .lint{align-self:flex-start;background:var(--messing);color:#1b1608;font-size:.8rem;font-weight:600;padding:2px 10px;border-radius:999px}

/* garantie en oproep */
.garantie{display:flex;gap:16px;align-items:flex-start;background:var(--messing-zacht);border-radius:14px;padding:18px 22px;margin-top:22px}
.garantie svg{flex:none;width:34px;height:34px}
.oproep{background:var(--groen);color:var(--bg);border-radius:18px;padding:34px;display:grid;grid-template-columns:1fr auto;gap:20px 32px;align-items:center}
.oproep h2{color:var(--bg)}
.oproep p{margin-top:10px;opacity:.88}
.oproep .btn{background:var(--messing);border-color:var(--messing);color:#1b1608}
.oproep .btn.leeg{background:transparent;border-color:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--bg)}

/* artikelen */
article{max-width:720px}
article h2{margin-top:40px;font-size:clamp(1.4rem,3vw,1.8rem)}
article h3{margin-top:26px}
article p,article ul,article ol{margin-top:14px;color:var(--ink)}
article li{margin-bottom:6px}
article .samenvatting{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--messing);border-radius:10px;padding:16px 20px;margin-top:26px}
article .samenvatting p{margin-top:6px;color:var(--muted)}
article table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.96rem}
article th,article td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
article th{font-weight:600;background:var(--paper)}
.tabel{overflow-x:auto}
.meta{color:var(--muted);font-size:.92rem;margin-top:12px}
.lijst-artikelen{display:grid;gap:18px;margin-top:28px}
.lijst-artikelen a{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:transform .2s ease,border-color .2s ease}
.lijst-artikelen a:hover{transform:translateY(-3px);border-color:var(--messing)}
.lijst-artikelen p{color:var(--muted);margin-top:6px;font-size:1rem}
.lees{display:inline-block;margin-top:10px;font-weight:600;color:var(--groen-2)}

/* vragen */
details{border-bottom:1px solid var(--line);padding-block:16px}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:" +";color:var(--messing)}
details[open] summary::after{content:" –"}
details p{margin-top:10px;color:var(--muted)}

/* formulieren */
form.formulier{display:grid;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px}
form.formulier label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
form.formulier input,form.formulier textarea,form.formulier select{font:inherit;font-weight:400;padding:11px 13px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
form.formulier textarea{min-height:100px;resize:vertical}
form.formulier .klein{font-size:.85rem;color:var(--muted);font-weight:400}

/* voettekst */
footer{padding-block:44px 28px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);margin-top:0}
footer .voet{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
footer .merk{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--serif);font-size:1.25rem;text-decoration:none}
footer .merk img{width:36px;height:36px}
footer h2{margin:0 0 8px;font-family:var(--sans);font-weight:700;line-height:1.4;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
footer .onder{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:860px){
  header{position:static}
  nav{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;gap:14px;font-size:.92rem;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:none;white-space:nowrap}
  .drie,.twee,.pakjes,.oproep{grid-template-columns:1fr}
  .twee .tel{order:-1}
  footer .voet{grid-template-columns:1fr 1fr}
  footer .voet > :first-child{grid-column:1/-1}
  .kop::before{width:360px;height:360px;inset:-10% -30% auto auto}
}
@media (prefers-reduced-motion:reduce){.btn,.tel .scherm,.lijst-artikelen a{transition:none}.btn:hover,.tel:hover .scherm,.lijst-artikelen a:hover{transform:none}}