/* ==========================================================================
   labelportaal.nl — gedeelde opmaak
   ==========================================================================
   Eén stylesheet voor alle pagina's. Stond eerst als <style>-blok in
   index.html; sinds de site uit losse pagina's bestaat zou dat blok vijf keer
   in de repo staan en vijf keer moeten worden bijgewerkt.

   De vier merkkleuren komen uit het logo. Waar een reeks kleuren een verloop
   in de tijd voorstelt — de processtappen, de labelschaal, de streep bovenaan —
   loopt hij van rood naar groen: het eindpunt is het opgeleverde label, en dat
   hoort niet op rood te eindigen.
   ========================================================================== */

/* ==========================================================================
   HUISSTIJL — de vier kleuren komen rechtstreeks uit het logo.
   Pas hier iets aan en de hele pagina volgt vanzelf.
   ========================================================================== */
:root {
  /* De vier merkkleuren, exact zoals in het logo */
  --groen:   #008F01;
  --limoen:  #A5C700;
  --oranje:  #F7A126;
  --rood:    #E00102;

  /* Afgeleiden van het merkgroen, voor leesbaarheid op wit */
  --actie:       #007A02;   /* knoppen en links                        */
  --actie-hover: #005C01;   /* hover-stand                             */
  --diep:        #0A2E0B;   /* donkere vlakken (hero-kaart, oproep)    */
  --groen-licht: #DCF0DC;   /* lichte vlakken, randen, badges          */
  --groen-zacht: #F3FAF2;   /* zachte achtergrondsecties               */

  /* Neutralen — meestal niet nodig om aan te passen */
  --tekst:       #111827;
  --tekst-zacht: #4B5563;
  --tekst-licht: #9CA3AF;
  --rand:        #E5E7EB;
  --wit:         #FFFFFF;
  --grijs:       #F7F8F7;

  --breedte:      1140px;
  --radius:       14px;
  --schaduw:      0 1px 2px rgba(10,46,11,.05), 0 8px 24px rgba(10,46,11,.06);
  --schaduw-hoog: 0 2px 4px rgba(10,46,11,.06), 0 18px 44px rgba(10,46,11,.13);
}

/* ==========================================================================
   Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -.022em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }
a  { color: var(--actie); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--actie); outline-offset: 2px; border-radius: 4px; }

.omhulsel { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 24px; }
.sectie { padding: 84px 0; }
.sectie--zacht { background: var(--grijs); }

.overslaan { position: absolute; left: -9999px; top: 0; background: var(--actie); color: #fff; padding: 12px 20px; z-index: 100; }
.overslaan:focus { left: 12px; top: 12px; }

/* Dun streepje in de vier merkkleuren, bovenaan de pagina en boven de voettekst */
.merkstreep { display: flex; height: 4px; }
.merkstreep i { flex: 1; }
/* Van rood naar groen: de reeks leest als een verloop naar het eindresultaat,
   en dat hoort niet op rood te eindigen. */
.merkstreep i:nth-child(1) { background: var(--rood); }
.merkstreep i:nth-child(2) { background: var(--oranje); }
.merkstreep i:nth-child(3) { background: var(--limoen); }
.merkstreep i:nth-child(4) { background: var(--groen); }

/* ==========================================================================
   Knoppen
   ========================================================================== */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: .97rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.knop:hover { text-decoration: none; }
.knop--primair { background: var(--actie); color: #fff; }
.knop--primair:hover { background: var(--actie-hover); }
.knop--rand { background: var(--wit); color: var(--tekst); border-color: var(--rand); }
.knop--rand:hover { border-color: var(--actie); color: var(--actie); }
.knop--licht { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.32); }
.knop--licht:hover { background: rgba(255,255,255,.22); }
.knop--groot { padding: 15px 30px; font-size: 1.03rem; }

/* ==========================================================================
   Koptekst met login-knop
   ========================================================================== */
.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kop__binnen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; }

.logo { display: inline-flex; align-items: center; }
.logo:hover { text-decoration: none; }
.logo svg { display: block; height: 36px; width: auto; }
.voet .logo svg { height: 34px; }

.kop__nav { display: flex; align-items: center; gap: 30px; }
.kop__nav a { color: var(--tekst-zacht); font-size: .95rem; font-weight: 500; }
.kop__nav a:hover { color: var(--actie); text-decoration: none; }
.kop__acties { display: flex; align-items: center; gap: 12px; }

@media (max-width: 900px) {
  .kop__nav { display: none; }
  .logo svg { height: 30px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 76px 0 88px; background: linear-gradient(180deg, var(--groen-zacht), var(--wit)); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hero__label {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 15px; margin-bottom: 20px;
  border-radius: 999px;
  background: var(--groen-licht); color: var(--actie-hover);
  font-size: .82rem; font-weight: 600;
}
/* Vier stipjes: een knipoog naar de vier figuren in het logo */
.stipjes { display: inline-flex; gap: 4px; }
.stipjes i { width: 7px; height: 7px; border-radius: 50%; }
.stipjes i:nth-child(1) { background: var(--rood); }
.stipjes i:nth-child(2) { background: var(--oranje); }
.stipjes i:nth-child(3) { background: var(--limoen); }
.stipjes i:nth-child(4) { background: var(--groen); }

.hero__tekst { font-size: 1.16rem; color: var(--tekst-zacht); max-width: 34em; }
.hero__acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__noot { margin-top: 20px; font-size: .87rem; color: var(--tekst-licht); }

/* Illustratie: een opdracht die door het proces loopt */
.kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw-hoog); overflow: hidden; }
.kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--diep); color: #fff; }
.kaart__nummer { font-weight: 700; font-size: .95rem; }
.kaart__status { padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kaart__lijf { padding: 22px 20px; }
.stappen { display: grid; gap: 2px; }
.stap { display: flex; align-items: flex-start; gap: 13px; padding: 9px 0; }
.stap__bol { width: 21px; height: 21px; flex: none; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; background: var(--groen); color: #fff; font-size: .68rem; font-weight: 700; }
.stap--open .stap__bol { background: var(--wit); color: var(--tekst-licht); border: 2px dashed var(--rand); }
.stap__naam { font-size: .94rem; font-weight: 600; }
.stap--open .stap__naam { color: var(--tekst-licht); font-weight: 500; }
.stap__tijd { font-size: .8rem; color: var(--tekst-licht); }

/* Energielabel-schaal, opgebouwd uit de vier merkkleuren */
.labelstrook { display: flex; gap: 3px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rand); }
.labelstrook span { flex: 1; height: 8px; border-radius: 3px; }
/* Ook deze strook loopt van rood naar groen, zodat elke kleurreeks op de site
   dezelfde kant op leest en eindigt op het resultaat dat je wilt hebben. */
.labelstrook span:nth-child(1) { background: #E00102; }
.labelstrook span:nth-child(2) { background: #EC5A14; }
.labelstrook span:nth-child(3) { background: #F7A126; }
.labelstrook span:nth-child(4) { background: #D9BA13; }
.labelstrook span:nth-child(5) { background: #A5C700; }
.labelstrook span:nth-child(6) { background: #4FAD01; }
.labelstrook span:nth-child(7) { background: #008F01; }

@media (max-width: 900px) {
  .hero { padding: 52px 0 64px; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ==========================================================================
   Sectiekoppen
   ========================================================================== */
.sectiekop { max-width: 42em; margin-bottom: 52px; }
.sectiekop--midden { margin-left: auto; margin-right: auto; text-align: center; }
.sectiekop__oog { display: block; margin-bottom: 12px; color: var(--actie); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.sectiekop p { color: var(--tekst-zacht); font-size: 1.08rem; margin-bottom: 0; }

/* ==========================================================================
   Werkwijze — vier stappen, vier merkkleuren (net als de vier figuren in het logo)
   ========================================================================== */
.werkwijze { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: stap; }
.werkwijze__item { position: relative; padding-left: 48px; }
.werkwijze__item::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; top: -2px; left: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff; font-size: .9rem; font-weight: 700;
}
/* Van rood naar groen: de stappen lopen mee met de energielabel-schaal, zodat
   de laatste stap — het opgeleverde label — op groen uitkomt. */
.werkwijze__item:nth-child(1)::before { background: var(--rood); }
.werkwijze__item:nth-child(2)::before { background: var(--oranje); color: #4A2D02; }
.werkwijze__item:nth-child(3)::before { background: var(--limoen); color: #33420A; }
.werkwijze__item:nth-child(4)::before { background: var(--actie); }
.werkwijze__item h3 { margin-bottom: .35em; }
.werkwijze__item p { color: var(--tekst-zacht); font-size: .95rem; margin-bottom: 0; }

@media (max-width: 1000px) { .werkwijze { grid-template-columns: repeat(2, 1fr); gap: 34px; } }
@media (max-width: 620px)  { .werkwijze { grid-template-columns: 1fr; } }

/* ==========================================================================
   Voordelen
   ========================================================================== */
.rooster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blok { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 28px; box-shadow: var(--schaduw); }
.blok__icoon { width: 42px; height: 42px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 11px; background: var(--groen-licht); color: var(--actie-hover); }
.blok__icoon svg { width: 21px; height: 21px; }
.blok p { color: var(--tekst-zacht); font-size: .95rem; margin-bottom: 0; }

@media (max-width: 1000px) { .rooster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rooster { grid-template-columns: 1fr; } }

/* ==========================================================================
   Voor wie — twee kolommen
   ========================================================================== */
.doelgroepen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.doelgroep { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 34px; display: flex; flex-direction: column; box-shadow: var(--schaduw); position: relative; overflow: hidden; }
.doelgroep::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--rood), var(--oranje), var(--limoen), var(--groen));
}
.doelgroep__oog { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: var(--groen-licht); color: var(--actie-hover); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; align-self: flex-start; }
.doelgroep p { color: var(--tekst-zacht); }
.vinklijst { margin: 6px 0 26px; display: grid; gap: 11px; }
.vinklijst li { display: flex; align-items: flex-start; gap: 11px; font-size: .96rem; }
.vinklijst svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--groen); }
.doelgroep .knop { align-self: flex-start; margin-top: auto; }

@media (max-width: 860px) { .doelgroepen { grid-template-columns: 1fr; } }

/* ==========================================================================
   Oproep tot actie
   ========================================================================== */
.oproep { background: var(--diep); color: #fff; }
/* padding-block en niet padding: die laatste zette ook de zijmarge van .omhulsel op
   nul, waardoor de tekst op een telefoon tegen de rand plakte. */
.oproep__binnen { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 62px; }
.oproep h2 { color: #fff; margin-bottom: .35em; }
.oproep p { color: rgba(255,255,255,.8); margin-bottom: 0; max-width: 40em; }
.oproep__acties { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.oproep .knop--primair { background: var(--groen); }
.oproep .knop--primair:hover { background: var(--limoen); color: #23300A; }

@media (max-width: 860px) { .oproep__binnen { flex-direction: column; align-items: flex-start; gap: 28px; } }

/* ==========================================================================
   Voettekst
   ========================================================================== */
.voet { background: var(--grijs); padding: 0 0 30px; font-size: .93rem; }
.voet__binnen { padding-top: 56px; }
.voet__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; margin-bottom: 40px; }
.voet__over { color: var(--tekst-zacht); max-width: 32em; }
.voet__over .logo { margin-bottom: 16px; }
.voet h4 { margin: 0 0 14px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst); }
.voet ul { display: grid; gap: 10px; }
.voet ul li { color: var(--tekst-zacht); }
.voet ul a { color: var(--tekst-zacht); }
.voet ul a:hover { color: var(--actie); }
.voet__streep { border-top: 1px solid var(--rand); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; color: var(--tekst-licht); font-size: .87rem; }

@media (max-width: 800px) { .voet__grid { grid-template-columns: 1fr; gap: 32px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   Aanvullingen sinds de site uit losse pagina's bestaat
   ========================================================================== */

/* Het logo is nu een <img> in plaats van een ingebouwd <symbol>: met vijf
   pagina's zou dat vectorblok vijf keer in de repo staan. */
.logo img { display: block; height: 36px; width: auto; }
.voet .logo img { height: 34px; }
@media (max-width: 640px) {
  .logo img { height: 30px; }
}

/* De pagina waar je nu bent, herkenbaar in het menu. */
.kop__nav a[aria-current="page"] { color: var(--actie); font-weight: 650; }

/* Verwijzing onderaan een sectie naar de volledige pagina. */
.sectie__naar { margin: 28px 0 0; text-align: center; font-weight: 600; }

.fijndruk { color: var(--tekst-licht); font-size: .88rem; }

/* Een h1 in een gecentreerde sectiekop op de binnenpagina's. */
.sectiekop h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}

/* ==========================================================================
   Menu op een telefoon (13 september 2026)
   ==========================================================================
   Onder de 900 pixels verdween het menu helemaal: wie op een telefoon binnenkwam,
   zag alleen de pagina voor particulieren en had geen weg naar "Voor
   organisaties". Nu staat er een menuknop naast Inloggen.

   Een <details>-element in plaats van een script: het klapt open en dicht
   zonder JavaScript, en de site mag geen scripts uitvoeren (script-src 'none'
   in _headers). Toetsenbord en schermlezer werken er vanzelf mee. */
.kop__menu { display: none; position: relative; }
.kop__menu > summary {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rand); border-radius: 10px;
  background: var(--wit); color: var(--tekst);
  font-size: .95rem; font-weight: 600;
  cursor: pointer; list-style: none; user-select: none;
}
.kop__menu > summary::-webkit-details-marker { display: none; }
.kop__menu > summary svg { flex: none; }
.kop__acties .knop svg { flex: none; }
.kop__menu > summary:hover { border-color: var(--actie); color: var(--actie); }
.kop__menu-dicht { display: none; }
.kop__menu[open] .kop__menu-open { display: none; }
.kop__menu[open] .kop__menu-dicht { display: block; }
.kop__menu[open] > summary { border-color: var(--actie); color: var(--actie); }

.kop__paneel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(290px, calc(100vw - 32px));
  padding: 8px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schaduw-hoog);
  display: grid; gap: 2px;
}
.kop__paneel a {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  border-radius: 9px; color: var(--tekst); font-weight: 500;
}
.kop__paneel a:hover { background: var(--groen-zacht); color: var(--actie); text-decoration: none; }
.kop__paneel a[aria-current="page"] { background: var(--groen-licht); color: var(--actie-hover); font-weight: 650; }

@media (max-width: 900px) {
  .kop__menu { display: block; }
  .kop__binnen { min-height: 64px; gap: 12px; }
  .kop__acties { gap: 8px; }
  .kop__acties .knop { padding: 0 14px; min-height: 44px; }
}
/* Heel smalle telefoons: het inlogicoon valt weg, de tekst blijft. */
@media (max-width: 380px) {
  .kop__acties .knop svg { display: none; }
}

/* ==========================================================================
   Twee ingangen bovenaan de homepage (13 september 2026)
   ==========================================================================
   De homepage sprak alleen particulieren aan; organisaties met veel woningen
   moesten het doen met één regeltje fijne druk. Nu staan beide ingangen naast
   elkaar, direct onder de kop — op een telefoon onder elkaar, maar allebei in
   het eerste scherm. */
.keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.keuze__optie {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 20px 18px;
  background: var(--wit); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schaduw);
  transition: border-color .15s, box-shadow .15s;
}
.keuze__optie::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--rood), var(--oranje), var(--limoen), var(--groen));
}
.keuze__optie:hover { border-color: var(--actie); box-shadow: var(--schaduw-hoog); text-decoration: none; }
.keuze__oog { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--actie); }
.keuze__titel { font-size: 1.1rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.keuze__tekst { font-size: .9rem; color: var(--tekst-zacht); line-height: 1.5; }
.keuze__actie { margin-top: 10px; font-size: .95rem; font-weight: 650; color: var(--actie); }

/* Op een telefoon komen de twee ingangen vóór de uitlegtekst en naast elkaar,
   zodat ze allebei in het eerste scherm staan. Onder elkaar viel de ingang
   voor organisaties er net buiten — precies de groep die we zichtbaar wilden
   maken. De toelichting per ingang valt dan weg; de titel zegt genoeg. */
@media (max-width: 560px) {
  .hero__intro { display: flex; flex-direction: column; }
  .hero__intro .hero__label { align-self: flex-start; }
  .keuze { order: 3; gap: 10px; margin: 4px 0 22px; }
  .hero__intro .hero__tekst { order: 4; }
  .keuze__optie { padding: 16px 13px 13px; }
  .keuze__oog { font-size: .66rem; letter-spacing: .05em; }
  .keuze__titel { font-size: 1rem; }
  .keuze__tekst { display: none; }
  .keuze__actie { margin-top: auto; padding-top: 8px; font-size: .88rem; }
}

/* De voorbeeldkaart herhaalt op de homepage de vijf stappen die verderop in
   "In het kort" staan. Op een telefoon kwam hij tussen de ingangen en de rest
   van de pagina te staan en duwde alles een scherm naar beneden. */
@media (max-width: 900px) {
  .hero__kaart--breed { display: none; }
}

/* ==========================================================================
   Homepage na het snoeien (13 september 2026)
   ==========================================================================
   De homepage had zes voordelenblokken en vijf processtappen die bijna woord
   voor woord ook op "Hoe het werkt" en "Voor organisaties" stonden. Nu doet elke
   pagina één ding: de homepage laat kiezen en geeft drie redenen, de
   binnenpagina's vertellen het hele verhaal. */

/* Drie korte bewijspunten onder de hero. */
.bewijs { padding: 34px 0; border-bottom: 1px solid var(--rand); }
.bewijs__lijst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bewijs__punt { display: flex; align-items: flex-start; gap: 13px; font-size: .94rem; color: var(--tekst-zacht); line-height: 1.55; }
.bewijs__punt strong { display: block; color: var(--tekst); font-size: 1rem; margin-bottom: 2px; }
.bewijs__icoon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--groen-licht); color: var(--actie-hover); }
.bewijs__icoon svg { width: 17px; height: 17px; }
@media (max-width: 860px) { .bewijs__lijst { grid-template-columns: 1fr; gap: 18px; } .bewijs { padding: 28px 0; } }

/* Tekst links, kaart rechts. */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.split h2 { margin-top: 0; }
.split__tekst { color: var(--tekst-zacht); font-size: 1.08rem; }
.split .hero__acties { margin-top: 22px; }
.split .vinklijst { margin-bottom: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .split .knop--groot { width: 100%; } .sectie { padding: 60px 0; } }

/* Keuzes in plaats van stappen (13 september 2026). Bij "Aanleveren" op
   zakelijk.html zijn de vier manieren naast elkaar mogelijk; genummerd lazen ze
   als een volgorde. Daar een icoon in dezelfde rustige stijl als de blokken, en
   geen kleurverloop van rood naar groen — dat verloop betekent op deze site
   juist "op weg naar het resultaat". */
.werkwijze--iconen .werkwijze__item::before { display: none; }
.werkwijze__icoon {
  position: absolute; top: -3px; left: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--groen-licht); color: var(--actie-hover);
}
.werkwijze__icoon svg { width: 19px; height: 19px; }

/* ==========================================================================
   Plan een gesprek (13 september 2026)
   ==========================================================================
   Het enige formulier op de site. Het portaal verwerkt het (/api/kennismaken)
   en stuurt de bezoeker terug met #verzonden, #niet-verzonden of #te-vaak in
   het adres. Welke melding er staat, regelt :target hieronder. */
.gesprek__grid { display: grid; grid-template-columns: 1.45fr .9fr; gap: 32px; align-items: start; }
.gesprek__formulier { min-width: 0; }
.gesprek__zelf h2 { font-size: 1.3rem; margin-bottom: 14px; }
.gesprek__gegevens { display: grid; gap: 14px; margin: 4px 0 18px; }
.gesprek__gegevens li { display: flex; gap: 12px; align-items: flex-start; color: var(--tekst-zacht); }
.gesprek__gegevens svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--actie); }
@media (max-width: 860px) { .gesprek__grid { grid-template-columns: 1fr; } }

.formulier { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 30px; display: grid; gap: 18px; }
.formulier h2 { font-size: 1.3rem; margin: 0; }
.formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formulier__veld { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--tekst); }
.formulier__veld em { font-style: normal; font-weight: 400; color: var(--tekst-licht); }
.formulier input, .formulier select, .formulier textarea {
  width: 100%; min-height: 46px; padding: 10px 13px;
  border: 1px solid #D1D5DB; border-radius: 10px; background: var(--wit);
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--tekst);
}
.formulier textarea { resize: vertical; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 3px solid var(--groen-licht); border-color: var(--actie); }
.formulier .knop { justify-self: start; }
.formulier__noot { margin: 0; font-size: .85rem; color: var(--tekst-licht); }
.formulier__honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) {
  .formulier { padding: 20px; }
  .formulier__rij { grid-template-columns: 1fr; }
  .formulier .knop { justify-self: stretch; }
}

.formmelding { display: none; margin-bottom: 18px; padding: 18px 20px; border-radius: var(--radius); scroll-margin-top: 96px; }
.formmelding:target { display: block; }
.formmelding p:last-child { margin-bottom: 0; }
.formmelding--ok { background: var(--groen-zacht); border: 1px solid var(--groen-licht); }
.formmelding--ok h2 { font-size: 1.3rem; color: var(--actie-hover); }
.formmelding--fout { background: #FEF2F2; border: 1px solid #FECACA; color: #7F1D1D; }
/* Verzonden: het formulier hoeft er niet nog eens te staan. */
#verzonden:target ~ .formulier { display: none; }

/* ==========================================================================
   Veelgestelde vragen op hoe-werkt-het (13 september 2026)
   ==========================================================================
   Uitklapbaar met <details>, zonder JavaScript. De antwoorden staan gewoon in
   de HTML, dus zoekmachines lezen ze ook als ze dichtgeklapt zijn. */
.vragen { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.vraag { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); }
.vraag > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 20px;
  font-weight: 650; cursor: pointer; list-style: none;
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--groen-licht); color: var(--actie-hover); font-size: 1.2rem; line-height: 1;
}
.vraag[open] > summary::after { content: "–"; }
.vraag > summary:hover { color: var(--actie); }
.vraag p { margin: 0; padding: 0 20px 18px; color: var(--tekst-zacht); }