/* TEMPLATE — huisstijl. Alle kleuren staan hier als variabele; nergens in een template
   een losse hexcode. Dezelfde waarden staan in KLEUREN in merk.js, voor PDF's en e-mails
   die geen stylesheet kunnen laden — WIJZIG JE ER ÉÉN, WIJZIG DAN ALLEBEI.
   Ze liepen uiteen bij het maken van deze template: merk.js stond al neutraal terwijl hier
   nog het palet van het vorige portal stond (gevonden 16-08-2026 bij het opzetten van firmai).
   Geen donkere uitvoering — dezelfde keuze als bij Codex en aiacta. */
:root{
  --papier:#FFFFFF; --tint1:#F7F7F5; --tint2:#E9E9E4; --lijn:#D9D9D2;
  --accent:#26467A; --accent-donker:#182F55; --tweede:#7A5A1E;
  --inkt:#1B222B; --inkt-zacht:#5C6673;
  --risico-verboden:#A33232; --risico-hoog:#8A5B06; --risico-transparantie:#2A72A8;
  --risico-minimaal:#2F6F4E; --risico-nvt:#5E6A76;
  --serif:Georgia,'Times New Roman',serif;
  --radius:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tint1);color:var(--inkt);
  font:400 17px/1.65 system-ui,'Segoe UI',Roboto,sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:hover{color:var(--accent-donker)}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px}
.mid{text-align:center}
.section{padding:56px 0}
.section.band{background:var(--tint2)}
.muted{color:var(--inkt-zacht)}
.sub{color:var(--inkt-zacht);font-size:1.05rem}

h1,h2,h3,h4{font-family:var(--serif);color:var(--accent);line-height:1.25;font-weight:700}
h1{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 .4em}
h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:1.6em 0 .5em}
h3{font-size:1.1rem;margin:0 0 .4em}
p{margin:0 0 1em}
.eyebrow{
  display:inline-block;font-family:system-ui,sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tweede);margin-bottom:.6em;
}

/* ---------- kopbalk ---------- */
.top{background:var(--accent);color:#fff}
.top-in{display:flex;align-items:center;gap:22px;min-height:64px;flex-wrap:wrap}
.wm{text-decoration:none;color:#fff;display:inline-flex;align-items:baseline}
.wm-word{font-family:var(--serif);font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
/* De staart van het woordmerk (.eu, .nl, .com) stond op 72% dekking. Op een lichte accentbalk
   zakt dat onder de contrastgrens: bij eudri (accent #3F6B34) haalde het 4,15 tegen een eis van
   4,5 -- vijfenvijftig bevindingen op negen paginas, allemaal dezelfde drie tekens. Bij donkere
   accenten viel het niet op, en juist dat maakt het lastig: dezelfde regel is in het ene portal
   goed en in het andere niet.
   85% haalt het op elk accent in het portfolio (eudri 5,07, theos 7,28, axessia 6,73) en het
   verschil met de kern blijft zichtbaar. Gemeten met axessia-app/lib/contrast.js (20-08-2026). */
.wm-staart{opacity:.85;font-weight:400}
.topnav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.topnav a{color:#fff;text-decoration:none;font-size:.94rem;opacity:.9;padding:4px 0;border-bottom:2px solid transparent}
.topnav a:hover{opacity:1;border-bottom-color:rgba(255,255,255,.5)}
.topnav a.active{opacity:1;border-bottom-color:#fff;font-weight:600}
.topacc{display:flex;align-items:center;gap:12px}
.topacc .lnk{color:#fff;opacity:.9;text-decoration:none;font-size:.94rem}
.langbar{background:var(--accent-donker);padding:4px 20px;text-align:right;font-size:.8rem}
.langbar a{color:#fff;opacity:.75;text-decoration:none;margin-left:6px}
.langbar a:hover{opacity:1}

/* ---------- knoppen ---------- */
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  border:1px solid var(--accent);border-radius:var(--radius);padding:10px 20px;
  font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--accent-donker);border-color:var(--accent-donker);color:#fff}
.btn-groot{padding:13px 26px;font-size:1rem}
.btn-sm{padding:7px 14px;font-size:.88rem}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:rgba(38,70,122,.07);color:var(--accent-donker)}
.top .btn{background:#fff;color:var(--accent);border-color:#fff}
.top .btn:hover{background:var(--tint2);color:var(--accent-donker)}

/* ---------- hero ---------- */
.hero{background:var(--papier);border-bottom:1px solid var(--lijn);padding:62px 0}
.hero-in{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.hero-sub{font-size:1.1rem;color:var(--inkt);max-width:36em}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 10px}
.hero-klein{font-size:.88rem;color:var(--inkt-zacht);margin:0}
.hero-kaart{background:var(--tint2);border:1px solid var(--lijn);border-radius:var(--radius);padding:22px 24px}
.hero-kaart h2{margin-top:0;font-size:1.15rem}
.hero-kaart p{font-size:.94rem;color:var(--inkt-zacht)}
.risicolijst{list-style:none;margin:0;padding:0;font-size:.92rem}
.risicolijst li{padding:9px 0;border-top:1px solid var(--lijn);color:var(--inkt-zacht)}
/* Een chip zonder eigen achtergrondkleur is WIT OP WIT. De kleur wordt per gebruik inline
   meegegeven; wie er een neerzet zonder, maakt onzichtbare tekst. Gevonden door onze eigen
   scan-engine op onze eigen sites (20-08-2026), twee keer los. Een fout die van oplettendheid
   afhangt, komt terug -- vandaar een terugvalkleur die het contrast haalt. --accent is per
   portal al gemeten met lib/contrast.js. */
.chip{
  display:inline-block;padding:2px 9px;border-radius:999px;color:#fff;background:var(--accent);
  font-size:.74rem;font-weight:700;margin-right:6px;white-space:nowrap;
}
/* Redactionele vlag bij een bronverwijzing. Bewust GEEN .chip: die is gevuld met een
   risicokleur, en een gevulde okerkleur naast een bron leest als de risicoklasse
   "Hoog risico" — de kleurcodering van de site draagt daar betekenis. Dit is geen
   oordeel over de wet maar over onze eigen verwijzing, en dat hoort er ook anders uit
   te zien: open, zacht, en zonder alarmkleur (gevonden door Erik, 16-08-2026). */
.bronvlag{
  display:inline-block;padding:1px 8px;border-radius:999px;
  border:1px solid var(--lijn);background:var(--tint1);color:var(--inkt-zacht);
  font-size:.72rem;font-weight:600;font-style:normal;white-space:nowrap;
}

/* ---------- kaarten ---------- */
.kaartrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:26px}
.kaart{
  display:block;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:22px 24px;text-decoration:none;color:inherit;
}
.kaart:hover{border-color:var(--accent);box-shadow:0 6px 18px -12px rgba(7,42,74,.5)}
.kaart p{font-size:.94rem;color:var(--inkt-zacht);margin-bottom:.6em}
.meer{color:var(--accent);font-weight:600;font-size:.9rem}
.waarschuwing{
  background:var(--tint2);border-left:3px solid var(--tweede);border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px;font-size:.95rem;
}
.kader{background:var(--tint2);border:1px solid var(--lijn);border-radius:var(--radius);padding:14px 18px;margin:18px 0}
.kader p{margin:0;font-size:.95rem}
.cta-band,.cta-slot{background:var(--papier);border-top:1px solid var(--lijn)}
.cta-band{padding:26px 0;text-align:center;margin-top:30px;border:none;background:none}

/* ---------- stappen, faq, juridisch ---------- */
.stappen{counter-reset:stap;list-style:none;padding:0;margin:26px 0}
.stappen li{
  position:relative;padding:0 0 4px 52px;margin-bottom:22px;counter-increment:stap;
}
.stappen li::before{
  content:counter(stap);position:absolute;left:0;top:2px;width:34px;height:34px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.stappen h2{margin:0 0 .3em;font-size:1.08rem}
.stappen p{margin:0;color:var(--inkt-zacht);font-size:.95rem}
.faq{border-top:1px solid var(--lijn);padding:16px 0}
.faq h2{margin:0 0 .35em;font-size:1.08rem}
.faq p{margin:0;color:var(--inkt-zacht)}
.juridisch h2{font-size:1.1rem;margin:1.8em 0 .4em}
.juridisch p{font-size:.97rem}

/* ---------- prijzen ---------- */
.prijsrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:26px 0}
.prijskaart{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);padding:22px 24px;text-align:center}
.prijskaart.uitgelicht{border:2px solid var(--accent)}
.prijskaart h2{margin:0 0 .3em;font-size:1.05rem}
.prijs{font-family:var(--serif);font-size:2.1rem;color:var(--accent);font-weight:700}
.prijskaart .muted{font-size:.86rem;margin:0}
.vergelijk{width:100%;border-collapse:collapse;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);font-size:.94rem}
.vergelijk th,.vergelijk td{padding:11px 14px;border-bottom:1px solid var(--lijn);text-align:left}
.vergelijk th:not(:first-child),.vergelijk td:not(:first-child){text-align:center;width:9rem}
.vergelijk thead th{background:var(--tint2);font-family:var(--serif);color:var(--accent)}

/* ---------- nieuws ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:26px}
.post-card{
  display:block;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;
}
.post-card:hover{border-color:var(--accent)}
.pc-img img{display:block;width:100%;height:auto;object-fit:cover}
.pc-body{padding:18px 20px}
.pc-date{display:block;font-size:.8rem;color:var(--inkt-zacht);margin-bottom:6px}
.pc-body h2{margin:0 0 .35em;font-size:1.05rem}
.pc-body p{font-size:.92rem;color:var(--inkt-zacht);margin-bottom:.6em}
.pc-more{color:var(--accent);font-weight:600;font-size:.88rem}
.post-hero{border-radius:var(--radius);margin:0 0 20px;border:1px solid var(--lijn)}
.post-body{font-size:1.02rem}
.post-body h2{font-size:1.25rem}
.post-body img{border-radius:var(--radius)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
.contact-details{list-style:none;padding:0;margin:18px 0;font-size:.94rem}
.contact-details li{padding:7px 0;border-bottom:1px solid var(--lijn);display:flex;gap:12px}
.cd-lb{color:var(--inkt-zacht);min-width:6.5rem}
.contact-card{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--radius);padding:24px}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:5px}
.field input,.field textarea,.field select{
  width:100%;padding:10px 12px;border:1px solid var(--lijn);border-radius:8px;
  font:inherit;font-size:.95rem;background:var(--papier);color:var(--inkt);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-note{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:.93rem}
.form-note.ok{background:#E7F1EA;color:var(--risico-minimaal);border:1px solid #BFDCC9}
.form-note.err{background:#F7E9E9;color:var(--risico-verboden);border:1px solid #E6C6C6}

/* ---------- voettekst ---------- */
.foot{background:var(--accent);color:#fff;padding:44px 0 26px;margin-top:60px}
.foot a{color:#fff;opacity:.85;text-decoration:none}
.foot a:hover{opacity:1;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot .foot-kop{color:#fff;font-family:system-ui,sans-serif;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .8em;opacity:.75}
.foot ul{list-style:none;padding:0;margin:0;font-size:.92rem}
.foot li{margin-bottom:6px}
.foot p{font-size:.9rem;opacity:.82;max-width:34em}
.foot-brand{display:block;margin-bottom:10px}
.foot-brand .wm-word{color:#fff;font-size:1.25rem}
.wm-tag{display:block;font-size:.82rem;opacity:.7;margin-top:2px}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.22);margin-top:30px;padding-top:18px;
  display:flex;flex-direction:column;gap:6px;font-size:.82rem;opacity:.85;
}

@media (max-width:900px){
  .hero-in,.contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .section{padding:40px 0}
  .veld-rij,.foot-grid{grid-template-columns:1fr}
  .topnav{gap:12px;font-size:.9rem}
}

/* ---------- artikelen ---------- */
.kruimels{font-size:.85rem;color:var(--inkt-zacht);margin-bottom:10px}
.artikel h1{margin-top:.3em}
.antwoord{font-size:1.08rem}
.antwoord > p:first-child{font-size:1.14rem}
.cat-blok{margin-bottom:34px}
.artikellijst{list-style:none;padding:0;margin:0}
.artikellijst li{border-top:1px solid var(--lijn);padding:11px 0;display:flex;gap:10px;align-items:center;justify-content:space-between}
.artikellijst a{font-weight:600;text-decoration:none}
.artikellijst a:hover{text-decoration:underline}
/* Zoeken in de onderwerpen. De lijst staat al volledig in de pagina; dit filtert hem in
   de browser. Zonder JavaScript blijft alles gewoon zichtbaar — het veld is dan het
   enige dat niets doet, en dat is de goede kant om op te falen. */
.onderwerp-zoek{margin:22px 0 6px}
.onderwerp-zoek input{
  width:100%;padding:12px 14px;font-size:1rem;font-family:inherit;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--papier);color:var(--inkt);
}
.onderwerp-zoek input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sprongrij{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 26px}
.sprong{
  display:inline-block;padding:4px 12px;border-radius:999px;text-decoration:none;
  border:1px solid var(--lijn);background:var(--tint1);color:var(--inkt-zacht);font-size:.85rem;
}
.sprong:hover{border-color:var(--accent);color:var(--accent)}
.verwant{margin:30px 0 0;padding-top:8px;border-top:2px solid var(--lijn)}
.verwant h2{font-size:1.05rem;margin:0 0 .3em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bronnen{background:var(--tint2);border-left:3px solid var(--tweede);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:26px 0}
.bronnen h2{margin:0 0 .4em;font-size:1.05rem}
.bronnen ul{margin:0;padding-left:20px;font-size:.94rem}
.bronnen li{margin-bottom:6px}
.bronnen .muted{margin:10px 0 0;font-size:.86rem}
.verdieping,.landblok{border-top:1px solid var(--lijn);padding-top:20px;margin-top:26px}
.muur{background:var(--tint2);border:1px dashed var(--lijn);border-radius:var(--radius);padding:20px 22px;margin:26px 0}
.muur h2{margin:0 0 .35em;font-size:1.1rem}
.muur p{color:var(--inkt-zacht);font-size:.95rem}
.muur .btn{margin-right:8px}
.voetnoot{border-top:1px solid var(--lijn);margin-top:34px;padding-top:16px;font-size:.9rem}
.voetnoot p{margin-bottom:.6em}

/* ---------- taalvlaggen ---------- */
/* De SVG's uit lib/geo.js hebben geen eigen afmetingen: zonder deze regels vult elke
   vlag de volle breedte van de balk. Vandaar een vaste maat hier. */
.langbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.langbar .flag{display:inline-flex;line-height:0;border-radius:2px;overflow:hidden;
  outline:1px solid rgba(255,255,255,.35);opacity:.65;transition:opacity .15s}
.langbar .flag:hover{opacity:1}
.langbar .flag.active{opacity:1;outline:2px solid #fff}
.langbar .flagimg{display:block;width:22px;height:15px}

/* ---------- quick-scan ---------- */
.scan-form{margin-top:26px}
.scan-vraag{border:1px solid var(--lijn);border-radius:var(--radius);background:var(--papier);
  padding:18px 22px 20px;margin:0 0 18px}
.scan-vraag legend{font-family:var(--serif);font-weight:700;color:var(--accent);font-size:1.05rem;padding:0 6px}
.scan-toelichting{font-size:.88rem;margin:0 0 12px}
.scan-opties{display:flex;flex-direction:column;gap:2px}
.scan-optie{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;cursor:pointer}
.scan-optie:hover{background:var(--tint1)}
.scan-optie input{margin:3px 0 0;width:auto;flex:none}
.scan-redenen,.scan-stappen{padding-left:22px}
.scan-redenen li,.scan-stappen li{margin-bottom:10px}
.scan-email{margin-top:6px}
.scan-email .btn{margin-top:4px}

/* DE ACHT VOORDEUREN OP DE KOEPEL.
   Een raster van kaarten, elk met de kleur van zijn eigen site als stip. Die stip is geen versiering:
   bij acht merken die allemaal op -pas eindigen is kleur het snelste onderscheid — en de naam staat
   er gewoon bij, want kleur mag nooit de enige drager zijn. */
.voordeurgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}
.voordeur{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;background:var(--paper);transition:border-color .15s,transform .15s}
.voordeur:hover{border-color:var(--accent);transform:translateY(-2px)}
.vd-stip{display:inline-block;width:13px;height:13px;border-radius:50%;margin-bottom:9px}
.voordeur h3{margin:0 0 2px;font-family:var(--font-serif);font-size:1.12rem}
.vd-domein{margin:0 0 8px;color:var(--accent);font-size:.9rem;font-weight:600}
/* Een vastgestelde datum krijgt nadruk, een verwachte niet — het verschil tussen "dit staat in de
   verordening" en "dit denken wij" hoort ook in de opmaak te zitten. */
.vd-klok{margin:0 0 6px;font-size:.86rem;color:var(--muted)}
.vd-hard{color:var(--ink);font-weight:600}
.voordeur .muted{margin:0;font-size:.84rem;line-height:1.45}


/* ---------- De startpagina: velden, tijdlijn en vragen ----------
   .veldgrid en .veldkaart stonden al in de HTML maar hadden geen enkele regel opmaak, waardoor de
   verplichte velden als één kolom links op de pagina stonden. Twee kolommen op een gewoon scherm,
   drie op een breed, één op een telefoon -- via auto-fit, zodat het aantal zich aanpast aan de
   ruimte in plaats van aan een breekpunt dat iemand moet onderhouden. */
.veldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:24px}
.veldkaart{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--kaart,#fff)}
.veldkaart h3{margin:0 0 4px;font-size:1rem;line-height:1.35}
.veldkaart p{margin:0;font-size:.85rem}

/* De tijdlijn. Een tabel en geen kaartjes: het gaat om de volgorde, en die lees je in een rij. */
.tijdlijn td{padding:10px 12px;vertical-align:middle}
.tl-stip{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:9px;vertical-align:baseline}
.tl-eigen{font-weight:600}
.tl-eigen td{background:var(--band,#F6F3EC)}

/* De veelgestelde vragen. Zelfde raster als de velden, zodat de pagina één ritme houdt. */
.vraaggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:24px}
.vraagkaart{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:14px;
  text-decoration:none;color:inherit;background:var(--kaart,#fff);transition:border-color .15s,transform .15s}
.vraagkaart:hover{border-color:var(--accent);transform:translateY(-2px)}
.vraagkaart h3{margin:0 0 8px;font-size:1rem;line-height:1.4}

/* De prijsstaffel: getallen rechts, zodat je ze kunt vergelijken zonder te zoeken. */
.staffel td,.staffel th{padding:9px 12px}
.staffel .r,.tijdlijn .r{text-align:right;white-space:nowrap}

/* De productgroepen op de koepel staan er sinds 22-08 als informatie en niet als link. Zonder
   hover-effect, want er valt niets te klikken -- een kaart die beweegt maar niets doet, is een
   belofte die niet wordt ingelost. */
.voordeur-stil{cursor:default}
.voordeur-stil:hover{border-color:var(--line);transform:none}

/* De stapbalk van de productscan: drie schermen, en op elk scherm zichtbaar waar je bent. */
.wiz-kop{margin:0 0 18px}
.wiz-balk{height:6px;border-radius:99px;background:var(--tint1,#eee);overflow:hidden;margin-top:8px}
.wiz-balk>span{display:block;height:100%;background:var(--accent,#12807F);border-radius:99px;transition:width .25s ease}
.vervolg{margin:34px 0 28px;padding:26px 28px;border-radius:12px;border:2px solid var(--accent,#12807F);background:var(--tint1,#f6f6f6)}
.vervolg h2{margin:6px 0 12px;font-size:1.5rem;line-height:1.2;text-wrap:balance}
.vervolg-eerste{margin:0 0 12px;font-size:1.05rem}
.vervolg-prijs{margin:16px 0 4px;font-size:1.15rem}
/* NU / DAARNA / WIJ naast elkaar. Drie kolommen op een breed scherm, onder elkaar op een telefoon.
   De derde krijgt de nadruk: dat is de kolom waar het om gaat. */
.vervolg-drie{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:18px 0 6px}
.vervolg-stap{padding:14px 16px;border-radius:10px;background:var(--kaart,#fff);border:1px solid var(--edge,#e3e3e3)}
.vervolg-stap p{margin:6px 0 0;font-size:.95rem;line-height:1.5}
.vervolg-nr{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#666)}
.vervolg-wij{border-color:var(--accent,#12807F);border-width:2px}
.vervolg-wij .vervolg-nr{color:var(--accent,#12807F)}
.vervolg-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.vervolg-klein{margin-top:14px;font-size:.86rem}
@media (max-width:520px){.vervolg{padding:20px}.vervolg-knoppen .btn{width:100%;text-align:center}}

/* Invoervragen in de wizard: adres, bedrag, oppervlakte. Groot genoeg om op een telefoon
   te raken, en met een eenheid ernaast in plaats van in de vraag. */
.wiz-invoer{margin:22px 0 28px}
.wiz-invoer .scan-invoer{width:100%;padding:14px 16px;font-size:1.15rem;border:2px solid var(--edge,#e3e3e3);border-radius:10px;background:var(--paper,#fff);color:inherit}
.wiz-invoer .scan-invoer:focus{outline:3px solid var(--accent,#12807F);outline-offset:2px;border-color:var(--accent,#12807F)}
.wiz-invoerrij{display:flex;align-items:center;gap:10px}
.wiz-eenheid{font-size:1.15rem;color:var(--muted,#666);flex:0 0 auto}
.wiz-overslaan{margin:16px 0 0;text-align:center}
.knop-als-link{background:none;border:none;padding:6px 10px;font:inherit;font-size:.92rem;color:var(--muted,#666);text-decoration:underline;cursor:pointer;border-radius:6px}
.knop-als-link:hover{color:var(--ink,#222)}
.knop-als-link:focus-visible{outline:3px solid var(--accent,#12807F);outline-offset:2px}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* De basistaalvlag is een knop in een formulier (zie flagsHtml); dit maakt hem weer een vlag. */
.langbar .flagform{display:contents}
.langbar button.flag{border:0;padding:0;margin:0;background:none;cursor:pointer;font:inherit}
.langpick .flagform{display:contents}
.langpick button.flag{border:0;padding:0;margin:0;background:none;cursor:pointer;font:inherit}