/* Buitenslim – voorstel vormgeving en beeld (22-10-2026), versie 0.2
   Status: VOORSTEL. Niet gekoppeld aan de site. Bouwt voort op de goedgekeurde huisstijl
   (stijlgids §10: veel wit, één accentkleur #2f5d50, Inter zelf gehost). Alle bestaande
   kleurwaarden blijven gelijk; nieuw zijn alleen aanvullende tokens en componenten.
   Geen externe verzoeken: geen imports en geen url() naar buiten. Contrast: zie voorstel-vormgeving-beeld.md. */

/* --- lettertype: Inter, zelf gehost (SIL OFL 1.1), familienaam 'Inter' zoals --font in style.css.
   De @font-face-regels staan alleen in css/fonts.css: nu de bestaande inter-latin-*.woff2, na
   fonts-subset-master-3e799a8.patch de subset bs-sans-*.woff2. Hier bewust geen eigen @font-face:
   geen dubbele regels en geen verwijzing naar fonts die niet op de site staan. --- */

:root{
  /* --- kleuren: bestaand (stijlgids §10, ongewijzigd) --- */
  --tekst:#1f2933;          /* 14,8:1 op wit */
  --tekst-zacht:#52606d;    /* 6,5:1 op wit */
  --achtergrond:#ffffff;
  --vlak:#f5f7f6;
  --lijn:#d9e0dc;           /* 1,34:1 op wit: ALLEEN decoratief (scheidingslijn kop/voet). Niet voor functionele randen. */
  --accent:#2f5d50;         /* 7,5:1 op wit; knoptekst wit 7,5:1 */
  --accent-zacht:#e6efeb;
  --waarschuwing:#8a5a00;   /* 5,5:1 op --waarschuwing-vlak */
  --waarschuwing-vlak:#fff6e0;

  /* --- kleuren: nieuw (verfijning) --- */
  --accent-donker:#244a40;  /* hover; 9,9:1 met wit */
  --accent-midden:#5f8b7b;  /* alleen illustratie/decoratie, niet voor tekst (3,8:1) */
  --lijn-functioneel:#687a72; /* WCAG 1.4.11 (min. 3:1): 4,55 op wit, 4,23 op --vlak, 3,88 op --accent-zacht,
                                 3,91 op --hout-zacht, 4,03 op --veilig-vlak, 4,23 op --waarschuwing-vlak.
                                 Voor tabelranden, kaart- en tegelranden, figuurranden, invoervelden, secundaire knoppen, schemalijnen. */
  --lijn-sterk:var(--lijn-functioneel);
  --hout:#b98a4e;           /* alleen illustratie */
  --hout-zacht:#f6eddc;     /* vlak voor onderdelenlijst/bouwblok; tekst --tekst 12,7:1 */
  --hout-tekst:#6b4a1f;     /* 6,9:1 op --hout-zacht */
  --veilig:#a3271b;         /* veiligheid; 6,5:1 op --veilig-vlak, 7,3:1 op wit */
  --veilig-vlak:#fdeeec;
  --focus:#2f5d50;

  /* --- typografie --- */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* Optie zonder webfont (scheelt 2 verzoeken en ca. 130 KB): */
  --font-systeem:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --fs-basis:17px; --fs-klein:.88rem; --fs-mini:.78rem;
  --fs-h1:clamp(1.7rem,1.2rem + 2vw,2.3rem); --fs-h2:1.4rem; --fs-h3:1.1rem;
  --regel:1.65;

  /* --- ruimte (4px-raster) --- */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:24px; --r-6:32px; --r-7:48px; --r-8:64px;

  /* --- vorm --- */
  --radius:8px; --radius-groot:14px; --radius-pil:999px;
  --schaduw:0 1px 2px rgba(31,41,51,.06),0 4px 14px rgba(31,41,51,.06);
  --breed:1120px; --lees:720px;
}

/* ---------- basis ---------- */
html{font-size:var(--fs-basis)}
body{font-family:var(--font);color:var(--tekst);background:var(--achtergrond);line-height:var(--regel);margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
img,svg{max-width:100%;height:auto}
h1{font-size:var(--fs-h1);line-height:1.2;letter-spacing:-.015em}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- kop met logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tekst)}
.logo-merk{width:36px;height:36px;flex:none}
.logo-tekst{font-weight:700;font-size:1.25rem;letter-spacing:-.01em;line-height:1.1}
.logo-tekst span{color:var(--accent)}
.logo .tagline{display:block;font-weight:400;font-size:var(--fs-mini);color:var(--tekst-zacht);letter-spacing:0}

/* ---------- home: hero met illustratie ---------- */
.hero{background:linear-gradient(180deg,var(--accent-zacht) 0%,var(--vlak) 100%);border-bottom:1px solid var(--lijn)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--r-6);align-items:center;padding-top:var(--r-7);padding-bottom:var(--r-7);max-width:var(--breed)}
.hero h1{margin:0 0 .3em}
.hero .belofte{font-size:1.1rem;color:var(--tekst-zacht);margin:0 0 var(--r-4)}
.hero-beeld{width:100%;height:auto;display:block}
.hero-punten{list-style:none;padding:0;margin:var(--r-4) 0 0;display:flex;flex-wrap:wrap;gap:var(--r-2)}
.hero-punten li{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-pil);padding:4px 12px;font-size:var(--fs-klein)}
@media (max-width:800px){.hero .wrap{grid-template-columns:1fr;padding-top:var(--r-5);padding-bottom:var(--r-5)}.hero-beeld{max-width:420px;margin:0 auto}}

/* ---------- tegels (pijlers/artikelen) ---------- */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--r-4)}
.tegel{display:flex;flex-direction:column;gap:var(--r-2);border:1px solid var(--lijn-functioneel);border-radius:var(--radius-groot);padding:var(--r-4) var(--r-4) var(--r-5);text-decoration:none;color:var(--tekst);background:#fff;transition:border-color .15s,box-shadow .15s}
a.tegel:hover,a.tegel:focus-visible{border-color:var(--accent);box-shadow:var(--schaduw)}
.tegel .t-icoon{width:48px;height:48px;border-radius:12px;background:var(--accent-zacht);padding:6px}
.tegel .t-kop{font-weight:700;font-size:1.05rem;line-height:1.3}
.tegel .t-sub{font-size:var(--fs-klein);color:var(--tekst-zacht)}
.tegel .t-meer{margin-top:auto;font-size:var(--fs-klein);font-weight:600;color:var(--accent)}
.tegel.gepland{background:var(--vlak);color:var(--tekst-zacht);border-style:dashed}
.hero-punten li{border-color:var(--lijn-functioneel)}

/* ---------- kaders ---------- */
.kader{border-radius:var(--radius);padding:var(--r-3) var(--r-4) var(--r-3) 52px;margin:1.2em 0;position:relative;border:1px solid transparent}
.kader::before{content:"";position:absolute;left:14px;top:15px;width:22px;height:22px;background-repeat:no-repeat;background-size:22px 22px}
.kader .kop{font-weight:700;margin:0 0 .25em}
.kader p:last-child,.kader ul:last-child{margin-bottom:0}
/* tip: groen, lampje */
.kader.tip{background:var(--accent-zacht);border-color:var(--accent-zacht);border-left:5px solid var(--accent);padding-left:48px}
.kader.tip::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5d50' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
/* let op: amber, uitroepteken (bestaande waarschuwingskleuren) */
.kader.let-op{background:var(--waarschuwing-vlak);border-color:var(--waarschuwing-vlak);border-left:5px solid var(--waarschuwing);padding-left:48px;color:var(--tekst)}
.kader.let-op .kop{color:var(--waarschuwing)}
.kader.let-op::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a00' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E")}
/* veiligheid: rood, driehoek, linkerrand. Altijd met tekst, nooit alleen kleur. */
.kader.veilig{background:var(--veilig-vlak);border-color:var(--veilig);border-left:5px solid var(--veilig);padding-left:48px}
.kader.veilig .kop{color:var(--veilig)}
.kader.veilig::before{left:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3271b' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v5M12 18v.4'/%3E%3C/svg%3E")}

/* ---------- figuur met bijschrift ---------- */
.figuur{margin:1.6em 0;border:1px solid var(--lijn-functioneel);border-radius:var(--radius-groot);overflow:hidden;background:#fff}
.figuur img,.figuur svg{display:block;width:100%;height:auto}
.figuur figcaption{font-size:var(--fs-klein);color:var(--tekst-zacht);padding:var(--r-2) var(--r-4) var(--r-3);border-top:1px solid var(--lijn-functioneel);background:var(--vlak)}
.figuur figcaption strong{color:var(--tekst)}
.figuur .aanname{display:block;font-size:var(--fs-mini);margin-top:2px}
.figuur.breed{margin-left:calc(-1*var(--r-4));margin-right:calc(-1*var(--r-4))}

/* ---------- vergelijkingstabel ---------- */
.vergelijk{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;border:1px solid var(--lijn-functioneel);border-radius:var(--radius);overflow:hidden}
.vergelijk th,.vergelijk td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--lijn-functioneel)}
.vergelijk thead th{background:var(--accent);color:#fff;font-weight:600}
.vergelijk tbody th{background:var(--vlak);font-weight:600;white-space:nowrap}
.vergelijk tbody tr:last-child>*{border-bottom:0}
.vergelijk .ja::before{content:"✓ ";color:var(--accent);font-weight:700}
.vergelijk .nee::before{content:"✕ ";color:var(--veilig);font-weight:700}
.tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel-scroll .vergelijk{min-width:34rem}

/* ---------- productkaart (verfijning van de bestaande) ---------- */
/* Werkt met de huidige markup uit build.py (h3, p.badges, p, p.prijsregel, a.btn-amazon).
   Met class "met-icoon" en een img.pk-icoon wordt het een kaart met icoon links. */
.product-card{border:1px solid var(--lijn-functioneel);border-radius:var(--radius-groot);padding:var(--r-4) var(--r-5);margin:1.4em 0;background:#fff}
.product-card h3{margin:0 0 .3em;font-size:1.1rem}
.product-card .badges{margin:.2em 0 .6em}
.product-card .prijsregel{font-size:var(--fs-klein);color:var(--tekst-zacht);margin:.4em 0 0}
.product-card.met-icoon{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--r-2) var(--r-4)}
.product-card.met-icoon>*{grid-column:2}
.product-card.met-icoon .pk-icoon{grid-column:1;grid-row:1/span 3;width:72px;height:72px;border-radius:12px;background:var(--accent-zacht);padding:10px}
.product-card dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:0;font-size:.95rem}
.product-card dt{font-weight:600}
.product-card dd{margin:0}
.product-card .pk-voet{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--r-3);border-top:1px solid var(--lijn-functioneel);padding-top:var(--r-3);margin-top:var(--r-2)}
@media (max-width:560px){.product-card{padding:var(--r-4)}.product-card.met-icoon{grid-template-columns:1fr}.product-card.met-icoon>*,.product-card.met-icoon .pk-icoon{grid-column:1;grid-row:auto}.product-card.met-icoon .pk-icoon{width:56px;height:56px}}

/* knoppen */
.btn-amazon,.knop{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;text-decoration:none;padding:10px 18px;border-radius:var(--radius);font-weight:600;font-size:.95rem;min-height:44px;border:0}
.btn-amazon:hover,.knop:hover{background:var(--accent-donker)}
.btn-amazon::after{content:"↗";font-weight:400}
.knop.secundair{background:#fff;color:var(--accent);border:1px solid var(--lijn-sterk)}
.knop.klein,.onderdelen .btn-amazon{padding:6px 12px;min-height:36px;font-size:var(--fs-klein)}

/* ---------- Zelf bouwen: kenmerkblok, stappen, onderdelenlijst ---------- */
.bouwkenmerken{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--r-2);background:var(--hout-zacht);border-radius:var(--radius-groot);padding:var(--r-4);margin:1.2em 0;list-style:none}
.bouwkenmerken li{display:flex;flex-direction:column;font-size:var(--fs-klein);color:var(--hout-tekst)}
.bouwkenmerken strong{font-size:1rem;color:var(--tekst)}

.stappen{list-style:none;counter-reset:stap;padding:0;margin:1.4em 0}
.stappen>li{counter-increment:stap;position:relative;padding:0 0 var(--r-5) 56px;margin:0}
.stappen>li::before{content:counter(stap);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.stappen>li::after{content:"";position:absolute;left:18px;top:42px;bottom:6px;width:2px;background:var(--lijn-functioneel)}
.stappen>li:last-child::after{display:none}
.stappen h3{margin:.3em 0 .3em;font-size:1.05rem}
.stappen .stap-beeld{margin:.6em 0;border:1px solid var(--lijn-functioneel);border-radius:var(--radius);background:#fff}
.stappen .stap-tijd{font-size:var(--fs-mini);color:var(--tekst-zacht)}

.onderdelen{width:100%;border-collapse:collapse;font-size:.92rem;margin:1em 0}
.onderdelen caption{text-align:left;font-weight:700;padding:0 0 6px}
.onderdelen th,.onderdelen td{padding:8px 10px;border-bottom:1px solid var(--lijn-functioneel);text-align:left;vertical-align:middle}
.onderdelen thead th{background:var(--hout-zacht);color:var(--hout-tekst);font-weight:600}
.onderdelen .nr{width:2.2em;font-variant-numeric:tabular-nums;color:var(--tekst-zacht)}
.onderdelen .aantal{width:4em;text-align:right;font-variant-numeric:tabular-nums}
.onderdelen .koop{text-align:right;white-space:nowrap}
.onderdelen .geen-link{font-size:var(--fs-mini);color:var(--tekst-zacht)}
@media (max-width:560px){
  .onderdelen thead{display:none}
  .onderdelen tr{display:grid;grid-template-columns:2.2em 1fr auto;gap:2px 8px;padding:10px 0;border-bottom:1px solid var(--lijn-functioneel)}
  .onderdelen td{border:0;padding:0}
  .onderdelen td.functie{grid-column:2/4;color:var(--tekst-zacht);font-size:var(--fs-klein)}
  .onderdelen td.koop{grid-column:2/4;text-align:left}
}

/* ---------- mobiel ---------- */
@media (max-width:640px){
  .kader{padding-left:46px}
  .figuur.breed{margin-left:0;margin-right:0}
  .vergelijk{font-size:.88rem}
}

/* ---------- schema's: leesbaar op mobiel ---------- */
/* Schema's (viewBox 960 breed, tekst 11–14 px) worden op 390 px onleesbaar (schaal ca. 0,37).
   Daarom: horizontaal scrollen met een minimale weergavebreedte, plus een link naar het volledige bestand. */
.figuur.schema .schema-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.figuur.schema .schema-scroll img{min-width:720px}
.figuur.schema .volledig{display:inline-block;margin-top:4px;font-weight:600;color:var(--accent)}
@media (min-width:900px){.figuur.schema .schema-scroll img{min-width:0}}