/* ---------------------------------------------------------------
   ISOLINE — huisstijllaag.
   Laadt ná site.css en zet de typografie en de vormentaal om:
   antraciet, glastint, scherpe hoeken en een dikke onderrand als
   dorpel onder de kaarten. De kleuren zelf komen uit
   Instellingen › Vormgeving, dus die blijven daar te wijzigen.
   --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --radius: 2px;
  --radius-lg: 3px;
  --font-kop: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --font-tekst: "IBM Plex Sans", system-ui, sans-serif;
}

body{ font-family: var(--font-tekst); font-size: 17.5px; line-height: 1.65; }
h1,h2,h3,h4,h5,.h1,.h2,.h3{ font-family: var(--font-kop); letter-spacing: -.02em; }
h1{ font-weight: 700; }
h2,h3,h4{ font-weight: 600; }

/* scherpe hoeken: een kozijn heeft ook geen ronde randen */
.btn,.card,.tile,.kaart,.product-card,.blok,.notice,.box,input,select,textarea,
.faq details,.hero-card,.kpi,.usp,.review{ border-radius: var(--radius) !important; }

/* knoppen: rechthoekig, met rand, en accentkleur bij hover */
.btn{ font-family: var(--font-tekst); font-weight: 600; border-width: 2px; }

/* kaarten krijgen een dikke onderrand, als de dorpel van een kozijn */
.tile,.card,.product-card,.kaart{ border-bottom-width: 6px; }

/* iets rustiger contrast in de lichte vlakken */
.section--tint,.bg-tint{ background: var(--tint, #F1F6F6); }

/* leesbaarheid: kleine teksten niet onder de 15px */
small,.muted,.klein,figcaption,.tile p,.card p{ font-size: 15px; }

/* ---- tekstgrootte-knoppen in de bovenbalk ---- */
.tekstgrootte{ display:inline-flex; align-items:center; gap:6px; margin-left:14px; }
.tekstgrootte span{ font-size:14px; opacity:.75 }
.tekstgrootte button{
  background:transparent; border:1px solid currentColor; color:inherit; cursor:pointer;
  border-radius:var(--radius); padding:4px 9px; line-height:1; font-family:var(--font-kop); font-weight:600;
}
.tekstgrootte button[aria-pressed="true"]{ background:currentColor; }
.tekstgrootte button[aria-pressed="true"] em{ color:#fff; font-style:normal; }
.tekstgrootte .k1{ font-size:13px } .tekstgrootte .k2{ font-size:16px } .tekstgrootte .k3{ font-size:19px }
@media(max-width:700px){ .tekstgrootte span{ display:none } .tekstgrootte{ margin-left:8px } }

html.tekst-groot body{ font-size:19.5px }
html.tekst-groter body{ font-size:21.5px }
html.tekst-groot .btn,html.tekst-groter .btn{ font-size:inherit }