/* buitenslim.nl – neutrale, rustige basisstijl.
   Alle kleuren als variabelen zodat een huisstijl alleen :root hoeft te wijzigen. */
:root{
  --tekst:#1f2933; --tekst-zacht:#52606d; --achtergrond:#ffffff; --vlak:#f5f7f6; --lijn:#d9e0dc;
  --accent:#2f5d50; --accent-zacht:#e6efeb; --waarschuwing:#8a5a00; --waarschuwing-vlak:#fff6e0;
  --radius:8px; --breed:1120px; --lees:720px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;font-family:var(--font);color:var(--tekst);background:var(--achtergrond);line-height:1.65}
a{color:var(--accent)} a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:9}
/* kop en menu */
.site-header{border-bottom:1px solid var(--lijn);background:#fff}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;padding-bottom:14px}
.logo{font-weight:700;font-size:1.25rem;color:var(--tekst);text-decoration:none;letter-spacing:-.01em}
.logo span{color:var(--accent)}
.tagline{display:block;font-weight:400;font-size:.78rem;color:var(--tekst-zacht)}
.nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.92rem}
.nav a{text-decoration:none;color:var(--tekst);padding:4px 0;border-bottom:2px solid transparent}
.nav a.active,.nav a:hover{border-bottom-color:var(--accent)}
/* banners */
.preview-banner{background:var(--waarschuwing-vlak);color:var(--waarschuwing);font-size:.85rem;text-align:center;padding:6px 12px;border-bottom:1px solid #f0dca8}
.concept-banner{background:var(--waarschuwing-vlak);border:1px solid #f0dca8;color:var(--waarschuwing);padding:10px 14px;border-radius:var(--radius);margin:12px 0;font-size:.92rem}
/* artikel */
.page{display:grid;grid-template-columns:minmax(0,var(--lees)) 280px;gap:48px;padding-top:28px;padding-bottom:48px}
.page.smal{grid-template-columns:minmax(0,var(--lees))}
.breadcrumb{font-size:.85rem;color:var(--tekst-zacht);margin-bottom:8px}
.breadcrumb a{color:var(--tekst-zacht)}
.format-label{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-zacht);padding:2px 8px;border-radius:4px}
h1{font-size:2rem;line-height:1.2;margin:.4em 0 .3em;letter-spacing:-.015em}
h2{font-size:1.4rem;line-height:1.3;margin:1.8em 0 .5em}
h3{font-size:1.1rem;margin:1.4em 0 .4em}
.lead{font-size:1.1rem;color:var(--tekst-zacht);margin:0 0 .8em}
.meta-line{font-size:.85rem;color:var(--tekst-zacht);margin:.2em 0 1em}
.transparency-notice{font-size:.88rem;background:var(--vlak);border-left:3px solid var(--accent);padding:10px 14px;margin:0 0 1.2em;border-radius:0 var(--radius) var(--radius) 0}
.kort-antwoord{background:var(--accent-zacht);border-radius:var(--radius);padding:16px 20px;margin:1.2em 0}
.kort-antwoord .kop{font-weight:700;margin:0 0 .3em}
.niet-nodig{border:1px dashed var(--lijn);border-radius:var(--radius);padding:14px 18px;margin:1.5em 0}
.niet-nodig .kop{font-weight:700;margin:0 0 .3em}
.let-op{background:var(--waarschuwing-vlak);border-radius:var(--radius);padding:12px 16px;margin:1.2em 0}
table{border-collapse:collapse;width:100%;font-size:.92rem;margin:1em 0}
th,td{border-bottom:1px solid var(--lijn);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--vlak);font-weight:600}
.tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel-scroll .label-abo{white-space:nowrap;max-width:none}
.bedrag{white-space:nowrap}
/* badges */
.label-abo,.niveau,.niet-getest{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:999px;margin:0 4px 4px 0;white-space:normal;max-width:100%}
.label-abo{background:#eef2f7;color:#2c3e50;border:1px solid #cfd8e3}
.label-abo.geen{background:#e8f3ec;border-color:#b9dcc6;color:#1d5b34}
.label-abo.verplicht{background:#fbeaea;border-color:#efc4c4;color:#8a2323}
.niveau{background:var(--vlak);border:1px solid var(--lijn);color:var(--tekst-zacht)}
.niet-getest{background:#fff;border:1px solid var(--lijn);color:var(--tekst-zacht);font-weight:500}

/* productkaart */
.product-card{border:1px solid var(--lijn);border-radius:var(--radius);padding:16px 18px;margin:1.2em 0;background:#fff}
.product-card h3{margin:0 0 .4em}
.product-card .badges{margin:.2em 0 .6em}
.product-card p{margin:.3em 0}
.product-card .prijsregel{font-size:.9rem;color:var(--tekst-zacht)}
.btn-amazon{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:8px 16px;border-radius:6px;font-weight:600;font-size:.92rem;margin-top:6px}
.btn-amazon:hover{background:#244a40}
/* kostenteller */
.kostenteller{border:1px solid var(--lijn);border-radius:var(--radius);margin:1.2em 0;overflow:hidden}
.kostenteller .kop{background:var(--vlak);padding:8px 14px;font-weight:700;font-size:.95rem}
.kostenteller table{margin:0}
.kostenteller .totaal td{font-weight:700}
.kostenteller .voet{font-size:.8rem;color:var(--tekst-zacht);padding:8px 14px}
/* bronnen / herkomst */
.bronnen,.herkomst{border-top:2px solid var(--lijn);margin-top:2.5em;padding-top:1em;font-size:.9rem}
.bronnen ol{padding-left:1.2em}
.bronnen li{margin:.3em 0}
.herkomst-kop,.bronnen h2{font-size:1rem;margin:0 0 .4em}
/* zijbalk */
.sidebar{font-size:.9rem}
.sidebar-box{border:1px solid var(--lijn);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px;background:#fff}
.sidebar-box .card-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5em;color:var(--tekst-zacht)}
.toc-list{list-style:none;padding:0;margin:0}.toc-list li{margin:.3em 0}
/* faq */
.faq h3{font-size:1.02rem}
/* verder lezen + tegels */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1em 0}
.tegel{display:block;border:1px solid var(--lijn);border-radius:var(--radius);padding:16px;text-decoration:none;color:var(--tekst);background:#fff}
a.tegel:hover{border-color:var(--accent)}
.tegel .t-kop{font-weight:700;display:block;margin-bottom:4px}
.tegel .t-sub{font-size:.88rem;color:var(--tekst-zacht)}
.tegel.gepland{background:var(--vlak);color:var(--tekst-zacht)}
.link-gepland{color:var(--tekst-zacht)}
/* home */
.hero{background:var(--vlak);border-bottom:1px solid var(--lijn)}
.hero .wrap{padding-top:48px;padding-bottom:40px;max-width:900px}
.hero h1{font-size:2.3rem}
.sectie{padding:32px 0}
.sectie h2{margin-top:0}
.drie-kolom{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
/* voet */
.site-footer{border-top:1px solid var(--lijn);background:var(--vlak);font-size:.85rem;color:var(--tekst-zacht)}
.site-footer .wrap{padding-top:20px;padding-bottom:28px}
.footer-links a{color:var(--tekst-zacht)}
@media (max-width:900px){.page{grid-template-columns:1fr;gap:24px}h1{font-size:1.7rem}.hero h1{font-size:1.9rem}}
/* mobiel: niets breder dan het scherm */
main,.page>*{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.nav{flex-wrap:wrap}}
.tabel-scroll table,.tabel-scroll table.kostentabel{display:table;min-width:34rem}
.tabel-scroll th,.tabel-scroll td{overflow-wrap:normal;word-break:normal;hyphens:auto}