/* Groen Licht Advies — componentstijlen voor de website. Alle waarden komen uit tokens.css (tokens.json). Voorvoegsel: gla-
   Toestanden: :hover, :focus-visible, :active en :disabled. De klassen .is-hover, .is-focus, .is-actief en .is-uit
   tonen dezelfde toestand statisch (alleen voor documentatie en previews). */

/* =========================================================== basis */
.gla-pagina {
  container-type: inline-size;
  container-name: pagina;
  position: relative;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}
.gla-pagina *, .gla-pagina *::before, .gla-pagina *::after { box-sizing: border-box; }
.gla-pagina img { max-width: 100%; }
.gla-container { width: 100%; max-width: var(--inhoud-max); margin: 0 auto; padding: 0 var(--ruimte-24); }
.gla-visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gla-icoon { width: 24px; height: 24px; flex: none; }

/* koppen en tekst */
.gla-pagina h1, .gla-pagina h2, .gla-pagina h3 { color: var(--groen-donker); margin: 0; text-wrap: balance; }
.gla-pagina h1 { font-size: 44px; line-height: 1.15; font-weight: 700; }
.gla-pagina h2 { font-size: 32px; line-height: 1.2; font-weight: 700; }
.gla-pagina h3 { font-size: 22px; line-height: 1.3; font-weight: 600; }
.gla-pagina p { margin: 0; max-width: var(--tekst-max); }
.gla-pagina p + p { margin-top: var(--ruimte-16); }
.gla-klein, .gla-pagina .gla-klein { font-size: 14px; line-height: 1.5; color: var(--tekst-secundair); }

/* focus: altijd zichtbaar, 3 px massief met 2 px afstand */
.gla-pagina :focus-visible, .gla-pagina .is-focus {
  outline: var(--focus-dikte) solid var(--focus);
  outline-offset: var(--focus-afstand);
}
.gla-op-donker :focus-visible, .gla-op-donker .is-focus { outline-color: var(--focus-op-donker); }

/* =========================================================== links */
.gla-link {
  color: var(--groen-bos);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  border-radius: 2px;
}
.gla-link:hover, .gla-link.is-hover { color: var(--groen-diep); text-decoration-thickness: 2px; }
.gla-op-donker .gla-link { color: var(--wit); }
.gla-op-donker .gla-link:hover, .gla-op-donker .gla-link.is-hover { color: var(--wit); text-decoration-thickness: 2px; }
/* losstaande tekstlink met pijl */
.gla-tekstlink {
  display: inline-flex; align-items: center; gap: var(--ruimte-8); min-height: var(--klikdoel-min);
  color: var(--groen-bos); font-weight: 600; font-size: 17px; line-height: 1.3;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  border-radius: 2px;
}
.gla-tekstlink svg { width: 20px; height: 20px; transition: transform .15s ease; }
.gla-tekstlink:hover, .gla-tekstlink.is-hover { color: var(--groen-diep); text-decoration-thickness: 2px; }
.gla-tekstlink:hover svg, .gla-tekstlink.is-hover svg { transform: translateX(3px); }

/* =========================================================== knoppen */
.gla-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-8);
  min-height: var(--knop-hoogte); min-width: var(--klikdoel-min);
  padding: 0 var(--ruimte-24);
  border: 2px solid transparent; border-radius: var(--hoek-standaard);
  font: inherit; font-size: 17px; line-height: 1; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gla-knop svg { width: 20px; height: 20px; flex: none; }
/* primair: bosgroen met witte tekst */
.gla-knop--primair { background: var(--groen-bos); color: var(--wit); }
.gla-knop--primair:hover, .gla-knop--primair.is-hover { background: var(--knop-hover); }
.gla-knop--primair:active, .gla-knop--primair.is-actief { background: var(--groen-diep); }
/* secundair: wit met bosgroene rand */
.gla-knop--secundair { background: var(--wit); color: var(--groen-bos); border-color: var(--groen-bos); }
.gla-knop--secundair:hover, .gla-knop--secundair.is-hover { background: var(--groen-licht); color: var(--groen-diep); border-color: var(--groen-diep); }
.gla-knop--secundair:active, .gla-knop--secundair.is-actief { background: var(--groen-tint); color: var(--groen-diep); border-color: var(--groen-diep); }
/* primair op foto of donker vlak: wit vlak, groen-diep tekst */
.gla-knop--op-donker { background: var(--wit); color: var(--groen-diep); }
.gla-knop--op-donker:hover, .gla-knop--op-donker.is-hover { background: var(--groen-tint); }
.gla-knop--op-donker:active, .gla-knop--op-donker.is-actief { background: var(--groen-licht); }
/* tweede actie op foto of donker vlak: witte rand, vult bij hover */
.gla-knop--rand-op-donker { background: transparent; color: var(--wit); border-color: var(--wit); }
.gla-knop--rand-op-donker:hover, .gla-knop--rand-op-donker.is-hover { background: var(--wit); color: var(--groen-diep); }
.gla-knop--rand-op-donker:active, .gla-knop--rand-op-donker.is-actief { background: var(--groen-tint); color: var(--groen-diep); border-color: var(--groen-tint); }
/* uitgeschakeld (alleen als het echt niet kan; liever uitleggen waarom) */
.gla-knop:disabled, .gla-knop[aria-disabled="true"], .gla-knop.is-uit {
  background: var(--groen-licht); color: var(--tekst-secundair); border-color: var(--lijn); cursor: not-allowed;
}

/* =========================================================== logo */
/* Het horizontale PNG heeft 6,03 % transparante rand per zijde (= de vrije ruimte).
   Zet de breedte van het bestand; de zichtbare breedte is 87,9 % daarvan. */
.gla-logo { display: block; height: auto; }
.gla-logo--header { width: 273px; margin-left: -16px; }   /* zichtbaar 240 px */
.gla-logo--footer { width: 228px; margin-left: -14px; }   /* zichtbaar 200 px */

/* =========================================================== skiplink */
/* Eerste element op elke pagina; verschijnt bij de eerste Tab. */
.gla-skiplink {
  position: absolute; left: var(--ruimte-16); top: -120px; z-index: 10;
  display: inline-flex; align-items: center; min-height: var(--klikdoel-min); padding: 0 var(--ruimte-16);
  background: var(--wit); color: var(--groen-diep); font-size: 17px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
  border: 2px solid var(--groen-diep); border-radius: var(--hoek-standaard);
}
.gla-skiplink:focus, .gla-skiplink.is-zichtbaar { top: var(--ruimte-16); }

/* =========================================================== header */
.gla-header { position: relative; z-index: 2; }
.gla-header--wit { background: var(--wit); border-bottom: 1px solid var(--lijn); color: var(--groen-donker); }
.gla-header--vast { position: sticky; top: 0; box-shadow: var(--schaduw-subtiel); }
.gla-header--over-foto { position: absolute; top: 0; left: 0; right: 0; color: var(--wit); }
.gla-header__balk { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-32); min-height: 88px; }
.gla-header__home { display: block; border-radius: var(--hoek-standaard); }
.gla-header__rechts { display: flex; align-items: center; gap: var(--ruimte-32); }
.gla-nav > ul { display: flex; align-items: center; gap: var(--ruimte-24); list-style: none; margin: 0; padding: 0; }
.gla-nav a {
  display: inline-flex; align-items: center; min-height: var(--klikdoel-min); padding: 0 var(--ruimte-8);
  color: inherit; text-decoration: none; font-size: 17px; font-weight: 600; line-height: 1;
  border-radius: var(--hoek-standaard);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.gla-nav a:hover, .gla-nav a.is-hover, .gla-nav a[aria-current="page"] { text-decoration-line: underline; }
.gla-header--wit .gla-nav a:hover, .gla-header--wit .gla-nav a.is-hover { color: var(--groen-bos); }
.gla-menuknop {
  display: none; align-items: center; gap: var(--ruimte-8);
  min-height: var(--klikdoel-min); min-width: var(--klikdoel-min);
  padding: 0 var(--ruimte-8) 0 var(--ruimte-16);
  background: transparent; color: inherit;
  border: 2px solid currentColor; border-radius: var(--hoek-standaard);
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer;
}
.gla-menuknop svg { width: 24px; height: 24px; }
.gla-menuknop:hover, .gla-menuknop.is-hover { background: var(--wit); color: var(--groen-diep); border-color: var(--wit); }
.gla-header--wit .gla-menuknop:hover, .gla-header--wit .gla-menuknop.is-hover { background: var(--groen-licht); color: var(--groen-diep); border-color: var(--groen-diep); }
.gla-menuknop .gla-icoon-sluiten { display: none; }
.gla-menuknop[aria-expanded="true"] .gla-icoon-menu { display: none; }
.gla-menuknop[aria-expanded="true"] .gla-icoon-sluiten { display: block; }
.gla-menupaneel { display: none; }

@container pagina (max-width: 1099px) {
  .gla-nav--breed { display: none; }
  .gla-menuknop { display: inline-flex; }
  .gla-header__rechts { gap: var(--ruimte-16); }
  .gla-menupaneel[data-open="true"] { display: block; background: var(--groen-diep); color: var(--wit); padding: var(--ruimte-16) 0 var(--ruimte-32); }
  .gla-menupaneel ul { list-style: none; margin: 0; padding: 0; }
  .gla-menupaneel li + li { border-top: 1px solid var(--groen-bos); }
  .gla-menupaneel nav a { display: flex; align-items: center; min-height: 56px; color: inherit; text-decoration: none; font-size: 18px; font-weight: 600; border-radius: 2px; }
  .gla-menupaneel nav a:hover, .gla-menupaneel nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .gla-menupaneel .gla-knop { margin-top: var(--ruimte-24); }
  .gla-header--wit .gla-menupaneel[data-open="true"] { background: var(--wit); color: var(--groen-donker); border-top: 1px solid var(--lijn); }
  .gla-header--wit .gla-menupaneel li + li { border-top-color: var(--lijn); }
}
@container pagina (max-width: 639px) {
  .gla-logo--header { width: 200px; margin-left: -12px; }  /* zichtbaar 176 px */
  .gla-header__cta { display: none; }
  .gla-header__balk { min-height: 72px; }
}

/* =========================================================== hero */
.gla-hero { position: relative; isolation: isolate; color: var(--wit); overflow: hidden; }
.gla-hero__beeld { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%; }
.gla-hero__overlay { position: absolute; inset: 0; z-index: -1; background: var(--overlay-foto); }
.gla-hero__inhoud {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 520px; padding-top: 128px; padding-bottom: var(--ruimte-64);
}
.gla-hero--zonder-header .gla-hero__inhoud { padding-top: var(--ruimte-64); }
.gla-hero h1 { color: var(--wit); max-width: 14em; }
.gla-hero__logo { width: 341px; margin-left: -21px; }   /* zichtbaar 300 px */
.gla-hero .gla-hero__intro { margin-top: var(--ruimte-24); max-width: 36em; }
.gla-hero__acties { margin-top: var(--ruimte-32); }
.gla-hero .gla-hero__bron { position: absolute; right: var(--ruimte-24); bottom: var(--ruimte-16); margin: 0; font-size: 14px; line-height: 1.5; color: var(--wit); }
@container pagina (max-width: 639px) {
  .gla-hero__inhoud { min-height: 480px; padding-top: 112px; padding-bottom: var(--ruimte-64); }
  .gla-hero--zonder-header .gla-hero__inhoud { padding-top: var(--ruimte-48); }
  .gla-hero__logo { width: 250px; margin-left: -15px; }
  .gla-hero__acties .gla-knop { white-space: normal; text-align: center; line-height: 1.3; padding-top: 12px; padding-bottom: 12px; }
  .gla-hero .gla-hero__bron { right: var(--ruimte-16); bottom: var(--ruimte-8); }
}

/* =========================================================== secties */
.gla-sectie { padding: var(--sectie-ruimte) 0; }
.gla-sectie--licht { background: var(--groen-licht); }
.gla-sectie--donker { background: var(--groen-diep); color: var(--wit); }
.gla-sectie__kop { margin-bottom: var(--ruimte-32); }
.gla-sectie__kop p.gla-sectie__intro { margin-top: var(--ruimte-8); }

/* =========================================================== keuzetegels */
.gla-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ruimte-24); list-style: none; margin: 0; padding: 0; }
.gla-tegel {
  position: relative; display: flex; flex-direction: column; gap: var(--ruimte-16); height: 100%;
  padding: var(--ruimte-24);
  background: var(--groen-licht); border: 1px solid transparent; border-radius: var(--hoek-standaard);
  color: var(--tekst); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.gla-tegel__icoon { width: 32px; height: 32px; color: var(--groen-bos); flex: none; }
.gla-tegel h3 { font-size: 22px; }
.gla-tegel__pijl { margin-top: auto; width: 24px; height: 24px; color: var(--groen-bos); transition: transform .15s ease; }
.gla-tegel:hover, .gla-tegel.is-hover { background: var(--groen-tint); border-color: var(--groen-bos); }
.gla-tegel:hover .gla-tegel__pijl, .gla-tegel.is-hover .gla-tegel__pijl { transform: translateX(4px); }
.gla-tegel:hover h3, .gla-tegel.is-hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@container pagina (max-width: 1099px) { .gla-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================== dienstblok */
.gla-diensten { display: grid; gap: var(--ruimte-96); }
.gla-dienstblok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ruimte-64); align-items: center; }
.gla-dienstblok__beeld { margin: 0; }
.gla-dienstblok__beeld img, .gla-dienstblok__beeld svg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hoek-standaard); }
.gla-dienstblok__beeld figcaption { margin-top: var(--ruimte-8); }
.gla-dienstblok--omgekeerd .gla-dienstblok__beeld { order: 2; }
.gla-dienstblok__tekst p { margin-top: var(--ruimte-16); }
.gla-dienstblok__tekst .gla-knop { margin-top: var(--ruimte-32); }

/* =========================================================== stappen */
.gla-stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ruimte-32); list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.gla-stap { position: relative; }
.gla-stap__nummer { position: relative; display: grid; place-items: center; width: 48px; height: 52px; margin-bottom: var(--ruimte-16); }
.gla-stap__nummer svg { position: absolute; inset: 0; width: 48px; height: 52px; }
.gla-stap__nummer polygon { fill: var(--wit); stroke: var(--groen-bos); stroke-width: 2; }
.gla-stap__nummer span { position: relative; font-size: 20px; font-weight: 700; line-height: 1; color: var(--groen-donker); }
.gla-stap:not(:last-child)::after {
  content: ""; position: absolute; top: 26px; left: 64px; right: calc(-1 * var(--ruimte-32) + 16px);
  border-top: 1px solid var(--lijn);
}
.gla-stap h3 { font-size: 22px; }
.gla-stap p { margin-top: var(--ruimte-8); }
@container pagina (max-width: 959px) {
  .gla-stappen { grid-template-columns: 1fr; gap: 0; }
  .gla-stap { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--ruimte-24); padding-bottom: var(--ruimte-32); }
  .gla-stap__nummer { grid-row: 1 / span 2; margin-bottom: 0; }
  .gla-stap:not(:last-child)::after { top: 60px; bottom: 8px; left: 24px; right: auto; border-top: 0; border-left: 1px solid var(--lijn); }
}

/* =========================================================== kennistegel */
.gla-kennis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-24); list-style: none; margin: 0; padding: 0; }
.gla-kennistegel {
  display: flex; flex-direction: column; gap: var(--ruimte-8); height: 100%;
  padding: var(--ruimte-24); background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--hoek-standaard);
  color: var(--tekst); text-decoration: none; transition: border-color .15s ease;
}
.gla-sectie--licht .gla-kennistegel { border-color: transparent; }
.gla-kennistegel h3 { font-size: 22px; }
.gla-kennistegel p { font-size: 17px; line-height: 1.55; }
.gla-kennistegel__meta { display: flex; align-items: center; gap: var(--ruimte-8); margin-top: auto; padding-top: var(--ruimte-8); }
.gla-kennistegel__meta svg { width: 16px; height: 16px; color: var(--tekst-secundair); }
.gla-kennistegel:hover, .gla-kennistegel.is-hover { border-color: var(--groen-bos); }
.gla-kennistegel:hover h3, .gla-kennistegel.is-hover h3 { color: var(--groen-bos); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@container pagina (max-width: 959px) { .gla-kennis { grid-template-columns: 1fr; gap: var(--ruimte-16); } }

/* =========================================================== faq */
.gla-faq { max-width: var(--tekst-max); border-bottom: 1px solid var(--lijn); }
.gla-faq__item { border-top: 1px solid var(--lijn); }
.gla-faq__vraag {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-16);
  min-height: 64px; padding: var(--ruimte-16) 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--groen-donker);
  border-radius: 2px;
}
.gla-faq__vraag::-webkit-details-marker { display: none; }
.gla-faq__vraag svg { width: 24px; height: 24px; flex: none; color: var(--groen-bos); }
.gla-faq__vraag:hover, .gla-faq__vraag.is-hover { color: var(--groen-bos); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gla-faq__item .gla-icoon-min { display: none; }
.gla-faq__item[open] .gla-icoon-plus { display: none; }
.gla-faq__item[open] .gla-icoon-min { display: block; }
.gla-faq__antwoord { padding: 0 var(--ruimte-48) var(--ruimte-24) 0; }
@container pagina (max-width: 639px) { .gla-faq__antwoord { padding-right: 0; } .gla-faq__vraag { font-size: 17px; } }

/* =========================================================== over mij */
.gla-overmij { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ruimte-64); align-items: center; }
.gla-overmij__foto { margin: 0; }
.gla-overmij__foto img, .gla-overmij__plek { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--hoek-standaard); }
.gla-overmij__plek { display: grid; place-content: center; justify-items: center; gap: var(--ruimte-8); background: var(--groen-tint); color: var(--tekst-secundair); font-size: 14px; }
.gla-overmij__plek svg { width: 48px; height: 48px; color: var(--groen-bos); }
.gla-overmij__naam { margin-top: var(--ruimte-24); }
.gla-overmij__naam strong { display: block; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--groen-donker); }
.gla-overmij__tekst p { margin-top: var(--ruimte-16); }
.gla-overmij__tekst .gla-knop { margin-top: var(--ruimte-32); }

/* =========================================================== formulier */
.gla-form { display: grid; gap: var(--ruimte-24); max-width: 640px; }
.gla-veld { display: flex; flex-direction: column; gap: var(--ruimte-8); }
.gla-label { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--groen-donker); }
.gla-label__verplicht { font-size: 14px; font-weight: 400; color: var(--tekst-secundair); }
.gla-veld p.gla-hint { font-size: 14px; line-height: 1.5; color: var(--tekst-secundair); margin: -4px 0 0; }
.gla-invoer {
  width: 100%; min-height: var(--knop-hoogte); padding: 11px 14px;
  font: inherit; font-size: 17px; line-height: 1.4; color: var(--tekst);
  background: var(--wit); border: 1px solid var(--lijn-invoer); border-radius: var(--hoek-standaard);
  transition: border-color .15s ease;
}
textarea.gla-invoer { min-height: 144px; resize: vertical; }
.gla-invoer::placeholder { color: var(--tekst-secundair); }
.gla-invoer:hover, .gla-invoer.is-hover { border-color: var(--tekst); }
.gla-invoer:focus-visible, .gla-invoer.is-focus { border-color: var(--groen-bos); }
.gla-invoer[aria-invalid="true"], .gla-invoer.is-fout { border-color: var(--fout); box-shadow: inset 0 0 0 1px var(--fout); }
.gla-invoer:disabled, .gla-invoer.is-uit { background: var(--groen-licht); color: var(--tekst-secundair); border-color: var(--lijn); cursor: not-allowed; }
.gla-keuzelijst { position: relative; }
.gla-keuzelijst select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.gla-keuzelijst svg { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--groen-donker); pointer-events: none; }
.gla-foutmelding { display: flex; align-items: flex-start; gap: var(--ruimte-8); margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--fout); }
.gla-foutmelding svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.gla-veld--fout .gla-label { color: var(--groen-donker); }
/* vinkje */
.gla-vinkje { display: flex; align-items: flex-start; gap: var(--ruimte-16); min-height: var(--klikdoel-min); cursor: pointer; font-size: 17px; line-height: 1.5; }
.gla-vinkje__vak { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; }
.gla-vinkje input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; cursor: pointer;
  background: var(--wit); border: 1px solid var(--lijn-invoer); border-radius: var(--hoek-standaard);
}
.gla-vinkje__vak svg { position: absolute; inset: 2px; width: 20px; height: 20px; color: var(--wit); pointer-events: none; display: none; }
.gla-vinkje input:checked { background: var(--groen-bos); border-color: var(--groen-bos); }
.gla-vinkje input:checked + svg { display: block; }
.gla-vinkje:hover input, .gla-vinkje.is-hover input { border-color: var(--tekst); }
.gla-vinkje:hover input:checked, .gla-vinkje.is-hover input:checked { background: var(--knop-hover); border-color: var(--knop-hover); }
.gla-vinkje input[aria-invalid="true"], .gla-vinkje.is-fout input { border-color: var(--fout); box-shadow: inset 0 0 0 1px var(--fout); }
.gla-vinkje input:disabled, .gla-vinkje.is-uit input { background: var(--groen-licht); border-color: var(--lijn); cursor: not-allowed; }
.gla-vinkje.is-uit { color: var(--tekst-secundair); cursor: not-allowed; }
.gla-form__acties { margin-top: var(--ruimte-8); }

/* =========================================================== prijsoverzicht */
.gla-prijzen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-24); list-style: none; margin: 0; padding: 0; }
.gla-prijs { display: flex; flex-direction: column; height: 100%; padding: var(--ruimte-32) var(--ruimte-24); background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek-standaard); }
.gla-prijs h3 { font-size: 22px; }
.gla-prijs p.gla-prijs__omschrijving { margin-top: var(--ruimte-8); margin-bottom: var(--ruimte-24); font-size: 17px; line-height: 1.55; }
.gla-prijs p.gla-prijs__uren { margin-top: auto; padding-top: var(--ruimte-16); margin-bottom: var(--ruimte-16); }
.gla-prijs__bedrag { margin-top: auto; padding-top: var(--ruimte-16); border-top: 1px solid var(--lijn); }
.gla-prijs__label { display: block; font-size: 14px; line-height: 1.5; color: var(--tekst-secundair); }
.gla-prijs__excl { display: block; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--groen-donker); }
.gla-prijs__excl small { font-size: 14px; font-weight: 400; color: var(--tekst-secundair); }
.gla-prijs__incl { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--tekst-secundair); }
.gla-prijs-toelichting { margin-top: var(--ruimte-32); padding: var(--ruimte-24); background: var(--groen-licht); border-radius: var(--hoek-standaard); }
.gla-prijs-toelichting h3 { font-size: 20px; }
.gla-prijs-toelichting p { margin-top: var(--ruimte-8); }
@container pagina (max-width: 959px) { .gla-prijzen { grid-template-columns: 1fr; gap: var(--ruimte-16); } }

/* =========================================================== review */
.gla-review { margin: 0; padding: var(--ruimte-32) var(--ruimte-48); background: var(--zand); border-radius: var(--hoek-standaard); max-width: 880px; }
.gla-review blockquote { margin: 0; }
.gla-review blockquote p { font-size: 22px; line-height: 1.45; font-weight: 400; color: var(--groen-donker); max-width: none; }
.gla-review figcaption { margin-top: var(--ruimte-24); font-size: 17px; line-height: 1.5; }
.gla-review figcaption strong { font-weight: 600; color: var(--groen-donker); }
.gla-review figcaption span { display: block; font-size: 14px; color: var(--tekst-secundair); }
p.gla-review-noot { margin-top: var(--ruimte-16); }
@container pagina (max-width: 639px) { .gla-review { padding: var(--ruimte-24); } .gla-review blockquote p { font-size: 20px; } }

/* =========================================================== melding */
.gla-melding {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--ruimte-16); align-items: start;
  padding: var(--ruimte-16) var(--ruimte-24); border: 1px solid; border-radius: var(--hoek-standaard);
  font-size: 17px; line-height: 1.5; color: var(--tekst); max-width: var(--tekst-max);
}
.gla-melding svg { width: 24px; height: 24px; margin-top: 1px; }
.gla-melding__titel { display: block; font-weight: 600; }
.gla-melding p { margin: 0; }
.gla-melding--info { background: var(--groen-licht); border-color: var(--groen-bos); }
.gla-melding--info svg, .gla-melding--info .gla-melding__titel { color: var(--groen-bos); }
.gla-melding--waarschuwing { background: var(--zand); border-color: var(--waarschuwing); }
.gla-melding--waarschuwing svg, .gla-melding--waarschuwing .gla-melding__titel { color: var(--waarschuwing); }
.gla-melding--fout { background: var(--fout-licht); border-color: var(--fout); }
.gla-melding--fout svg, .gla-melding--fout .gla-melding__titel { color: var(--fout); }

/* =========================================================== footer */
.gla-footer { background: var(--groen-diep); color: var(--wit); padding: var(--ruimte-64) 0 var(--ruimte-32); font-size: 17px; line-height: 1.6; }
.gla-footer__raster { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr)); gap: var(--ruimte-48); }
.gla-footer__merk p { margin-top: var(--ruimte-16); }
.gla-pagina .gla-footer h2 { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--wit); margin: 0 0 var(--ruimte-16); }
.gla-footer ul { list-style: none; margin: 0; padding: 0; }
.gla-footer li { display: flex; align-items: center; gap: var(--ruimte-8); min-height: 32px; }
.gla-footer li svg { width: 20px; height: 20px; flex: none; }
.gla-footer__onder {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-16);
  margin-top: var(--ruimte-48); padding-top: var(--ruimte-24); border-top: 1px solid var(--groen-bos); font-size: 14px;
}
.gla-footer__onder ul { display: flex; flex-wrap: wrap; gap: var(--ruimte-24); }
.gla-footer__onder li { min-height: var(--klikdoel-min); }
@container pagina (max-width: 959px) {
  .gla-footer__raster { grid-template-columns: 1fr 1fr; }
  .gla-footer__merk { grid-column: 1 / -1; }
}

/* =========================================================== tablet en mobiel */
@container pagina (max-width: 959px) {
  .gla-dienstblok, .gla-overmij { grid-template-columns: 1fr; gap: var(--ruimte-32); }
  .gla-dienstblok--omgekeerd .gla-dienstblok__beeld { order: 0; }
  .gla-overmij__foto { max-width: 360px; }
}
@container pagina (max-width: 639px) {
  .gla-pagina > * { font-size: 17px; }
  .gla-pagina p { font-size: 17px; }
  .gla-container { padding: 0 var(--ruimte-16); }
  .gla-pagina h1 { font-size: 28px; }
  .gla-pagina h2 { font-size: 26px; }
  .gla-pagina h3, .gla-tegel h3, .gla-stap h3, .gla-kennistegel h3, .gla-prijs h3 { font-size: 20px; }
  .gla-sectie { padding: var(--sectie-ruimte-mobiel) 0; }
  .gla-sectie__kop { margin-bottom: var(--ruimte-24); }
  .gla-diensten { gap: var(--ruimte-64); }
  .gla-tegels { grid-template-columns: 1fr; gap: var(--ruimte-16); }
  .gla-tegel { padding: var(--ruimte-24) var(--ruimte-24) var(--ruimte-16); display: grid; grid-template-columns: 32px 1fr; column-gap: var(--ruimte-16); row-gap: var(--ruimte-8); }
  .gla-tegel__icoon { grid-row: 1 / span 3; }
  .gla-tegel__pijl { margin-top: 0; }
  .gla-footer__raster { grid-template-columns: 1fr; gap: var(--ruimte-32); }
  .gla-footer__onder { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .gla-knop, .gla-tegel, .gla-tegel__pijl, .gla-tekstlink svg, .gla-invoer, .gla-kennistegel { transition: none; }
}

/* =========================================================== illustratie (rekenraster) */
.gla-illustratie .ra-grond { fill: var(--groen-licht); }
.gla-illustratie polygon { stroke: var(--wit); stroke-width: 2; }
.gla-illustratie .ra-0 { fill: var(--groen-licht); }
.gla-illustratie .ra-1 { fill: var(--groen-tint); }
.gla-illustratie .ra-2 { fill: var(--groen-bos); fill-opacity: .35; }
.gla-illustratie .ra-3 { fill: var(--groen-bos); fill-opacity: .7; }
.gla-illustratie .ra-4 { fill: var(--groen-diep); }
.gla-illustratie .ra-bron { fill: var(--wit); stroke: var(--groen-diep); stroke-width: 3; }

/* =========================================================== header: submenu's */
/* Een menu-item met onderliggende pagina's is een knop (aria-expanded) met een uitklappaneel; geen ARIA-menu. */
.gla-nav__groep { position: relative; }
.gla-nav__knop {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--klikdoel-min); padding: 0 var(--ruimte-8);
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1;
  border-radius: var(--hoek-standaard);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.gla-nav__pijl { width: 16px; height: 16px; transition: transform .15s ease; }
.gla-nav__knop[aria-expanded="true"] .gla-nav__pijl { transform: rotate(180deg); }
.gla-nav__knop:hover, .gla-nav__knop.is-hover, .gla-nav__knop[aria-expanded="true"], .gla-nav__knop[data-actief="true"] { text-decoration-line: underline; }
.gla-header--wit .gla-nav__knop:hover, .gla-header--wit .gla-nav__knop.is-hover { color: var(--groen-bos); }
.gla-submenu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; width: max-content; min-width: 260px;
  list-style: none; margin: 0; padding: var(--ruimte-8);
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek-standaard); box-shadow: var(--schaduw-subtiel);
}
.gla-nav__knop[aria-expanded="true"] + .gla-submenu { display: block; }
.gla-nav .gla-submenu a {
  display: flex; align-items: center; min-height: var(--klikdoel-min); padding: 0 var(--ruimte-16);
  color: var(--groen-donker); font-weight: 400; text-decoration: none; border-radius: var(--hoek-standaard);
}
.gla-nav .gla-submenu a:hover, .gla-nav .gla-submenu a.is-hover { background: var(--groen-licht); color: var(--groen-bos); text-decoration: underline; text-underline-offset: 4px; }
.gla-nav .gla-submenu a[aria-current="page"] { color: var(--groen-bos); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.gla-op-donker .gla-submenu :focus-visible, .gla-op-donker .gla-submenu .is-focus { outline-color: var(--focus); }
@container pagina (max-width: 1099px) {
  .gla-menupaneel__groep { padding: var(--ruimte-8) 0; }
  .gla-menupaneel__kop { display: block; padding-top: var(--ruimte-8); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--groen-tint); }
  .gla-header--wit .gla-menupaneel__kop { color: var(--tekst-secundair); }
  .gla-menupaneel__groep li + li { border-top: 0; }
  .gla-menupaneel .gla-menupaneel__groep a { min-height: 48px; padding-left: var(--ruimte-16); font-weight: 400; }
}

/* =========================================================== paginakop (binnenpagina's) */
.gla-paginakop { background: var(--groen-licht); padding: var(--ruimte-16) 0 var(--ruimte-64); }
.gla-kruimelpad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ruimte-8); list-style: none; margin: 0 0 var(--ruimte-24); padding: 0; font-size: 14px; line-height: 1.5; color: var(--tekst-secundair); }
.gla-kruimelpad li { display: flex; align-items: center; gap: var(--ruimte-8); }
.gla-kruimelpad svg { width: 16px; height: 16px; color: var(--tekst-secundair); }
.gla-kruimelpad a { display: inline-flex; align-items: center; min-height: var(--klikdoel-min); color: var(--groen-bos); text-decoration: underline; text-underline-offset: 3px; border-radius: 2px; }
.gla-kruimelpad a:hover, .gla-kruimelpad a.is-hover { color: var(--groen-diep); text-decoration-thickness: 2px; }
.gla-paginakop h1 { max-width: 20em; }
.gla-paginakop p.gla-paginakop__intro { margin-top: var(--ruimte-16); }
.gla-paginakop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-8) var(--ruimte-24); margin-top: var(--ruimte-16); }
.gla-paginakop__meta span { display: inline-flex; align-items: center; gap: var(--ruimte-8); }
.gla-paginakop__meta svg { width: 16px; height: 16px; }
.gla-paginakop__acties { margin-top: var(--ruimte-32); }

/* =========================================================== lopende tekst (kennisartikel, privacyverklaring) */
.gla-tekst { max-width: var(--tekst-max); }
.gla-pagina .gla-tekst > * + * { margin-top: var(--ruimte-16); }
.gla-pagina .gla-tekst h2 { font-size: 26px; margin-top: var(--ruimte-48); }
.gla-pagina .gla-tekst h3 { font-size: 20px; margin-top: var(--ruimte-32); }
.gla-pagina .gla-tekst h2 + *, .gla-pagina .gla-tekst h3 + * { margin-top: var(--ruimte-8); }
.gla-tekst ul, .gla-tekst ol { padding-left: 1.5em; margin-bottom: 0; }
.gla-tekst li + li { margin-top: var(--ruimte-8); }
.gla-tekst ul li::marker { color: var(--groen-bos); }
.gla-tekst ol li::marker { color: var(--groen-donker); font-weight: 600; }
.gla-tekst a { color: var(--groen-bos); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 2px; }
.gla-tekst a:hover { color: var(--groen-diep); text-decoration-thickness: 2px; }
.gla-tabelrol { overflow-x: auto; }
.gla-tekst table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.gla-tekst caption { caption-side: top; text-align: left; padding-bottom: var(--ruimte-8); font-size: 14px; color: var(--tekst-secundair); }
.gla-tekst th { background: var(--groen-tint); color: var(--groen-donker); font-weight: 600; text-align: left; vertical-align: bottom; }
.gla-tekst th, .gla-tekst td { padding: var(--ruimte-8) 12px; border-bottom: 1px solid var(--lijn); }
.gla-tekst .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =========================================================== formulier: keuzerondjes en datum */
.gla-keuzes { display: grid; gap: 0; min-width: 0; margin: 0; padding: 0; border: 0; }
.gla-keuzes legend { padding: 0; margin-bottom: var(--ruimte-8); }
.gla-keuze { display: flex; align-items: center; gap: var(--ruimte-16); min-height: var(--klikdoel-min); cursor: pointer; font-size: 17px; line-height: 1.4; }
.gla-keuze input {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center;
  width: 24px; height: 24px; margin: 0; cursor: pointer;
  background: var(--wit); border: 1px solid var(--lijn-invoer); border-radius: 50%;
}
.gla-keuze input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--groen-bos); transform: scale(0); transition: transform .1s ease; }
.gla-keuze input:checked { border: 2px solid var(--groen-bos); }
.gla-keuze input:checked::before { transform: scale(1); }
.gla-keuze:hover input, .gla-keuze.is-hover input { border-color: var(--tekst); }
.gla-keuze:hover input:checked, .gla-keuze.is-hover input:checked { border-color: var(--knop-hover); }
.gla-keuzes[data-fout="true"] .gla-keuze input { border: 2px solid var(--fout); }
.gla-invoer[type="date"] { max-width: 240px; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { .gla-nav__pijl, .gla-keuze input::before { transition: none; } }

/* =========================================================== varianten: drie stappen, vier prijsniveaus */
.gla-stappen--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gla-prijzen--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gla-prijzen--vier .gla-prijs__excl { font-size: 26px; }
@container pagina (max-width: 1099px) { .gla-prijzen--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pagina (max-width: 959px) { .gla-stappen--drie { grid-template-columns: 1fr; } }
@container pagina (max-width: 639px) { .gla-prijzen--vier { grid-template-columns: 1fr; } }
.gla-prijzen--vier .gla-prijs__excl small { display: block; margin-top: 2px; }

/* =========================================================== prijsoverzicht: bij vier niveaus beginnen de bedragen op dezelfde hoogte */
.gla-prijzen--vier .gla-prijs p.gla-prijs__omschrijving { min-height: calc(3 * 1.55em); }
.gla-prijzen--vier .gla-prijs__bedrag { margin-top: 0; }
@container pagina (max-width: 1099px) { .gla-prijzen--vier .gla-prijs p.gla-prijs__omschrijving { min-height: 0; } }