/* ==========================================================================
   Regulariseren.be — gedeelde stylesheet
   Merk: Regulariseren.be (initiatief van H-Architects BV)
   Bron van de designtokens: firmas/Regulariseren/branding.md, sectie 11.2
   ========================================================================== */

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/PublicSans-Variable.woff2") format("woff2-variations"),
       url("/fonts/PublicSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleuren */
  --kleur-antraciet: #171617;
  --kleur-grijs: #555659;
  --kleur-wit: #ffffff;
  --kleur-mist: #F4F3F1;
  --kleur-petrol: #2E4A5C;
  --kleur-petrol-licht: #D8E3E7;
  --kleur-footer-gedempt: #8a8987;

  /* Typografie */
  --font-basis: "Public Sans", Arial, Helvetica, sans-serif;
  --gewicht-kop: 800;
  --gewicht-subkop: 600;
  --gewicht-tekst: 400;

  /* Componenten */
  --radius-knop: 6px;
  --radius-kaart: 8px;
  --max-breedte-tekst: 720px;
  --max-breedte-page: 1180px;
  --schaduw-kaart: 0 1px 2px rgba(23, 22, 23, 0.06), 0 4px 16px rgba(23, 22, 23, 0.06);
  --ruimte-sectie: clamp(48px, 7vw, 96px);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-basis);
  font-weight: var(--gewicht-tekst);
  color: var(--kleur-antraciet);
  background: var(--kleur-wit);
  line-height: 1.6;
  font-size: 17px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  display: block;
}

a {
  color: var(--kleur-petrol);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--kleur-antraciet);
}

h1, h2, h3, h4 {
  font-family: var(--font-basis);
  color: var(--kleur-antraciet);
  line-height: 1.25;
  margin: 0 0 0.6em 0;
}

h1 {
  font-weight: var(--gewicht-kop);
  font-size: clamp(2rem, 4.2vw, 2.75rem);
  letter-spacing: -0.01em;
}

h2 {
  font-weight: var(--gewicht-kop);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
}

h3 {
  font-weight: var(--gewicht-subkop);
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em 0;
  max-width: var(--max-breedte-tekst);
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  margin: 0 0 1em 0;
  padding-left: 1.3em;
  max-width: var(--max-breedte-tekst);
}

li {
  margin-bottom: 0.5em;
}

.label {
  font-weight: var(--gewicht-subkop);
  color: var(--kleur-grijs);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.tekst-grijs {
  color: var(--kleur-grijs);
}

/* Zichtbare focusstatus (toegankelijkheid) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kleur-petrol);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kleur-antraciet);
  color: var(--kleur-wit);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-knop) 0;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Layout-hulpklassen
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--max-breedte-page);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--ruimte-sectie) 0;
}

.section--mist {
  background: var(--kleur-mist);
}

.section--cta {
  background: var(--kleur-petrol);
  color: var(--kleur-wit);
  text-align: left;
}

.section--cta h2 {
  color: var(--kleur-wit);
  max-width: var(--max-breedte-tekst);
}

.section--cta .cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.section-intro {
  max-width: var(--max-breedte-tekst);
  margin-bottom: 40px;
}

.section-intro p {
  color: var(--kleur-grijs);
  font-size: 1.05rem;
}

.smal {
  max-width: var(--max-breedte-tekst);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  max-width: var(--max-breedte-page);
  margin: 0 auto;
  position: relative;
}

.logo {
  font-weight: var(--gewicht-kop);
  font-size: 1.3rem;
  color: var(--kleur-antraciet);
  text-decoration: none;
  white-space: nowrap;
}

.logo:hover {
  color: var(--kleur-petrol);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--kleur-antraciet);
  border-radius: var(--radius-knop);
  padding: 8px 10px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-family: var(--font-basis);
  font-weight: var(--gewicht-subkop);
  font-size: 0.95rem;
  color: var(--kleur-antraciet);
}

.menu-toggle .menu-icon {
  width: 20px;
  height: 14px;
  position: relative;
}

.menu-toggle .menu-icon span,
.menu-toggle .menu-icon::before,
.menu-toggle .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kleur-antraciet);
}

.menu-toggle .menu-icon::before { top: 0; }
.menu-toggle .menu-icon span { top: 6px; }
.menu-toggle .menu-icon::after { top: 12px; }

.header-rechts {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--kleur-antraciet);
  text-decoration: none;
  font-weight: var(--gewicht-subkop);
  font-size: 0.98rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--kleur-petrol);
}

.tel-link {
  color: var(--kleur-antraciet);
  text-decoration: none;
  font-weight: var(--gewicht-subkop);
  white-space: nowrap;
}

.tel-link:hover {
  color: var(--kleur-petrol);
}

@media (max-width: 959px) {
  .menu-toggle {
    display: inline-flex;
  }

  .header-rechts {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kleur-wit);
    padding: 20px 24px 28px;
    box-shadow: var(--schaduw-kaart);
    z-index: 100;
  }

  .header-rechts.open {
    display: flex;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }

  .header-rechts .btn {
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-basis);
  font-weight: var(--gewicht-subkop);
  font-size: 1rem;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius-knop);
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.3;
}

.btn-primary {
  background: var(--kleur-petrol);
  color: var(--kleur-wit);
  border-color: var(--kleur-petrol);
}

.btn-primary:hover {
  background: var(--kleur-antraciet);
  border-color: var(--kleur-antraciet);
  color: var(--kleur-wit);
}

.btn-secondary {
  background: transparent;
  color: var(--kleur-petrol);
  border-color: var(--kleur-petrol);
}

.btn-secondary:hover {
  background: var(--kleur-petrol);
  color: var(--kleur-wit);
}

.section--cta .btn-primary {
  background: var(--kleur-wit);
  color: var(--kleur-petrol);
  border-color: var(--kleur-wit);
}

.section--cta .btn-primary:hover {
  background: var(--kleur-mist);
  border-color: var(--kleur-mist);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--kleur-mist);
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: clamp(48px, 8vw, 88px);
  padding-bottom: clamp(48px, 8vw, 88px);
  align-items: center;
}

.hero-tekst {
  max-width: var(--max-breedte-tekst);
}

.hero-tekst .label {
  display: inline-block;
  margin-bottom: 14px;
}

.hero-tekst p {
  font-size: 1.15rem;
  color: var(--kleur-grijs);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero-beeld img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
}

@media (min-width: 860px) {
  .hero .container {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

@media (max-width: 640px) {
  .hero-beeld {
    max-width: 360px;
    margin: 0 auto;
  }
}

.paginakop {
  background: var(--kleur-mist);
  padding: clamp(40px, 7vw, 72px) 0;
}

.paginakop .label {
  margin-bottom: 12px;
  display: inline-block;
}

.paginakop p {
  font-size: 1.1rem;
  color: var(--kleur-grijs);
}

.kruimelpad {
  font-size: 0.85rem;
  color: var(--kleur-grijs);
  margin-bottom: 18px;
}

.kruimelpad a {
  color: var(--kleur-grijs);
}

.kruimelpad a:hover {
  color: var(--kleur-petrol);
}

/* --------------------------------------------------------------------------
   Pagina-beeld (foto onder de paginakop, op dienst-/doelgroeppagina's)
   -------------------------------------------------------------------------- */

.pagina-beeld-sectie {
  padding-top: clamp(32px, 5vw, 56px);
}

/* Bewust smaller dan de pagina: op volle breedte met 16/9 domineerde het beeld de
   pagina en duwde het de inhoud onder de vouw. Nu een liggende band die uitlijnt
   met de tekstkolom, zodat het de tekst ondersteunt in plaats van overstemt. */
.pagina-beeld-sectie img {
  width: 100%;
  max-width: var(--max-breedte-tekst);
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
}

/* --------------------------------------------------------------------------
   Kaarten / grid
   -------------------------------------------------------------------------- */

.kaarten-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}

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

@media (min-width: 1000px) {
  .kaarten-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kaart {
  background: var(--kleur-wit);
  border: 1px solid #e7e5e2;
  border-radius: var(--radius-kaart);
  padding: 28px;
  box-shadow: var(--schaduw-kaart);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

/* Kaarten krijgen overal dezelfde behandeling: rand plus zachte schaduw. Alleen de
   vulling verschilt met de sectie, zodat ze op wit en op mistgrijs even veel gewicht
   hebben. Eerder had de kaart op een witte sectie geen schaduw, waardoor de blokken
   als kale omlijningen oogden. */
.section--mist .kaart {
  background: var(--kleur-wit);
}

.section:not(.section--mist) .kaart {
  background: var(--kleur-mist);
}

@media (hover: hover) {
  .kaart:hover {
    transform: translateY(-2px);
    border-color: var(--kleur-petrol);
    box-shadow: 0 2px 4px rgba(23, 22, 23, 0.06), 0 10px 24px rgba(23, 22, 23, 0.10);
  }

  .kaart:hover .icoon-vlak {
    background: var(--kleur-petrol);
    color: var(--kleur-wit);
  }
}

.kaart .icoon {
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: var(--kleur-petrol);
}

/* Het icoonvlak: het enige gekleurde element in een kaart. Petrolblauw op lichtpetrol
   geeft 7,14:1 contrast, wit op petrolblauw bij hover geeft 9,33:1.
   Vergroot van 48x48 (icoon 24px) naar 64x64 (icoon 34px): de rijkere, gedetailleerdere
   iconen (zie /iconen/) hebben meer ruimte nodig om op formaat leesbaar te blijven, en
   een groter vlak geeft de kaarten een frissere, luchtigere uitstraling. */
.icoon-vlak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--kleur-petrol-licht);
  color: var(--kleur-petrol);
  margin-bottom: 18px;
  transition: background-color 150ms ease, color 150ms ease;
}

.icoon-vlak .icoon {
  width: 34px;
  height: 34px;
  margin: 0;
}

/* Stapnummers: er bestaat verderop al een .stap-nummer voor het stappenplan
   ("Hoe wij te werk gaan"), als petrolblauw rondje met een wit cijfer. Die wordt
   hergebruikt bij "Onze diensten", zodat een stap er overal hetzelfde uitziet.
   Die kaarten krijgen daarom geen icoonvlak: het nummer is er al het beeldmerk. */

.kaart h3 {
  margin-bottom: 10px;
}

.kaart p {
  color: var(--kleur-grijs);
  font-size: 0.98rem;
}

.kaart .kaart-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: var(--gewicht-subkop);
}

/* --------------------------------------------------------------------------
   Prijskaarten (tarieven)
   --------------------------------------------------------------------------
   De kaart wordt een flex-kolom zodat het prijspaneel met margin-top: auto
   onderaan blijft hangen, ongeacht of de titel erboven één of twee regels
   beslaat. Zo sluiten de drie panelen in een rij altijd op elkaar aan, ook
   als "Andere panden: meergezinswoning, handel, horeca, kantoor" langer is
   dan de andere twee titels. */
/* gap geeft een vaste minimumafstand tussen icoonvlak, titel en prijspaneel
   (nodig zodra de kaart niet wordt uitgerekt, bv. op mobiel met één kolom).
   margin-top: auto op het paneel komt daar bovenop en vangt het verschil op
   wanneer de kaart wél wordt uitgerekt tot de rijhoogte van een grid-rij. */
.kaart-prijs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kaart-prijs .icoon-vlak {
  margin-bottom: 0;
}

.kaart-prijs h3 {
  margin-bottom: 0;
}

/* Het paneel zelf: dezelfde petrolblauwe tint als .kader en .icoon-vlak, zodat
   het bedrag het zwaarste element van de kaart is zonder een nieuwe kleur toe
   te voegen. Het bedrag excl. btw staat groot en donker, het bedrag incl. btw
   daaronder klein en grijs: dat is de hiërarchie die op het bedrag moet vallen. */
.prijs-paneel {
  background: var(--kleur-petrol-licht);
  border-radius: var(--radius-kaart);
  padding: 18px 20px;
}

.kaart-prijs .prijs-paneel {
  margin-top: auto;
}

/* Specificiteit met voorvoegsel ".prijs-paneel": de algemene regel ".kaart p"
   (één klasse + één type = hogere specificiteit dan één klasse alleen) zou
   anders deze kleur en grootte overschrijven en het bedrag alsnog grijs en
   klein maken. */
.prijs-paneel .prijs-bedrag {
  margin: 0;
  font-family: var(--font-basis);
  font-weight: var(--gewicht-kop);
  font-size: clamp(1.4rem, 2.1vw, 1.7rem);
  line-height: 1.2;
  color: var(--kleur-antraciet);
  letter-spacing: -0.01em;
}

/* Op een eigen regel, in plaats van inline achter het bedrag: anders breekt
   "excl. btw" op sommige breedtes middenin af ("excl." op de ene regel, "btw"
   op de volgende), wat rommelig oogt. */
.prijs-btw-label {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: var(--gewicht-subkop);
  color: var(--kleur-grijs);
}

.prijs-paneel .prijs-incl {
  margin: 8px 0 0 0;
  font-size: 0.9rem;
  color: var(--kleur-grijs);
}

/* Toelichting en btw-kader naast elkaar in plaats van gestapeld: geeft de
   pagina na de prijskaarten meer lucht en een tweede kolomritme. */
.prijs-toelichting {
  margin-top: 56px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .prijs-toelichting {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Stappenplan
   -------------------------------------------------------------------------- */

.stappenplan {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--max-breedte-tekst);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.stappenplan li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0;
}

.stap-nummer {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kleur-petrol);
  color: var(--kleur-wit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--gewicht-kop);
  font-size: 1.1rem;
}

.stappenplan h3 {
  margin-bottom: 6px;
}

.stappenplan p {
  color: var(--kleur-grijs);
  margin: 0;
}

/* --------------------------------------------------------------------------
   FAQ (platte tekst, geen accordion-schema)
   -------------------------------------------------------------------------- */

.faq-lijst {
  max-width: var(--max-breedte-tekst);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.faq-item h3 {
  margin-bottom: 8px;
}

.faq-item p {
  color: var(--kleur-grijs);
}

/* --------------------------------------------------------------------------
   Formulier
   -------------------------------------------------------------------------- */

.formulier {
  max-width: var(--max-breedte-tekst);
  display: grid;
  gap: 20px;
}

.formulier-rij {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .formulier-rij--twee {
    grid-template-columns: 1fr 1fr;
  }
}

.veld label {
  display: block;
  font-weight: var(--gewicht-subkop);
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.veld .optioneel {
  color: var(--kleur-grijs);
  font-weight: var(--gewicht-tekst);
}

.veld input,
.veld textarea {
  width: 100%;
  font-family: var(--font-basis);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: var(--radius-knop);
  border: 1px solid #c9c7c3;
  background: var(--kleur-wit);
  color: var(--kleur-antraciet);
}

.veld input:focus,
.veld textarea:focus {
  border-color: var(--kleur-petrol);
}

.veld textarea {
  resize: vertical;
  min-height: 140px;
}

/* Honeypot: visueel verborgen met CSS, niet met type=hidden */
.hp-veld {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier-voettekst {
  color: var(--kleur-grijs);
  font-size: 0.9rem;
}

.formulier-melding {
  border-radius: var(--radius-kaart);
  padding: 20px 24px;
  max-width: var(--max-breedte-tekst);
  display: none;
}

.formulier-melding.zichtbaar {
  display: block;
}

.formulier-melding--succes {
  background: var(--kleur-petrol-licht);
  color: var(--kleur-antraciet);
}

.formulier-melding--fout {
  background: #f4ecec;
  color: var(--kleur-antraciet);
  border: 1px solid #d8c7c7;
}

.contact-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

.contact-zijbalk {
  background: var(--kleur-mist);
  border-radius: var(--radius-kaart);
  padding: 28px;
}

.contact-zijbalk h2 {
  font-size: 1.3rem;
}

.contact-zijbalk address {
  font-style: normal;
  color: var(--kleur-grijs);
  line-height: 1.8;
}

.contact-zijbalk a {
  color: var(--kleur-petrol);
}

.contact-zijbalk .kop-met-icoon:not(:first-child) {
  margin-top: 24px;
}

.vestiging-lijst {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 4px 0 0 0;
}

.vestiging-titel {
  font-weight: var(--gewicht-subkop);
  color: var(--kleur-antraciet);
  margin: 0 0 2px 0;
}

.vestiging-lijst address,
.vestiging-lijst p {
  margin: 0;
  color: var(--kleur-grijs);
}

.regel-met-icoon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icoon-klein {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--kleur-antraciet);
  color: #d8d7d5;
  padding: 56px 0 32px;
}

.site-footer .container {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .site-footer .container {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer p,
.site-footer address {
  color: #d8d7d5;
  font-style: normal;
  max-width: 480px;
}

.site-footer strong {
  color: var(--kleur-wit);
}

.site-footer a {
  color: #d8d7d5;
}

.site-footer a:hover {
  color: var(--kleur-wit);
}

.footer-kolom h2 {
  color: var(--kleur-wit);
  font-size: 1rem;
  font-weight: var(--gewicht-subkop);
  margin-bottom: 14px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-onder {
  border-top: 1px solid #3a393a;
  margin-top: 40px;
  padding-top: 24px;
}

.footer-onder .container {
  display: block;
  grid-template-columns: none;
}

.footer-onder-rij.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.footer-onder .footer-nav {
  flex-direction: row;
  gap: 20px;
}

.copyright {
  color: #a6a5a3;
  font-size: 0.88rem;
  margin: 0;
}

.site-footer .footer-identificatie {
  color: var(--kleur-footer-gedempt);
  font-size: 0.78rem;
  margin: 12px 0 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Doelgroep- en dienstpagina's: gedeelde helpers
   -------------------------------------------------------------------------- */

.tekstblok {
  max-width: var(--max-breedte-tekst);
}

.tekstblok + .tekstblok {
  margin-top: 32px;
}

.kaarten-grid + .tekstblok,
.tekstblok + .kader {
  margin-top: 32px;
}

.opsomming-check {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--max-breedte-tekst);
}

.opsomming-check li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  color: var(--kleur-antraciet);
}

.opsomming-check .icoon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--kleur-petrol);
  margin-top: 2px;
}

.kader {
  background: var(--kleur-petrol-licht);
  border-radius: var(--radius-kaart);
  padding: 24px 28px;
  max-width: var(--max-breedte-tekst);
}

.kader h3 {
  margin-bottom: 10px;
}

.kader p {
  color: var(--kleur-antraciet);
}

.kader p:last-child {
  margin-bottom: 0;
}

.zie-meer {
  margin-top: 32px;
  font-weight: var(--gewicht-subkop);
}

.kop-met-icoon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.kop-met-icoon .icoon {
  width: 24px;
  height: 24px;
  color: var(--kleur-petrol);
  flex: none;
}

.kop-met-icoon h2,
.kop-met-icoon h3 {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cijfers-band (homepage): kerncijfers naast een groot icoon
   --------------------------------------------------------------------------
   Enkel de drie aangeleverde, bevestigde gegevens (zie firma.md, "Werkgebied en
   ervaring"): geen enkel ander cijfer verzinnen bij hergebruik van dit blok.
   -------------------------------------------------------------------------- */
.cijfers-rij {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 8px;
}

@media (min-width: 700px) {
  .cijfers-rij {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.cijfer-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: var(--kleur-petrol-licht);
  color: var(--kleur-petrol);
  margin-bottom: 20px;
}

.cijfer-icoon .icoon {
  width: 46px;
  height: 46px;
}

.cijfer-getal {
  font-family: var(--font-basis);
  font-weight: var(--gewicht-kop);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  color: var(--kleur-antraciet);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.cijfer-label {
  color: var(--kleur-grijs);
  margin: 0;
  max-width: 300px;
}

/* --------------------------------------------------------------------------
   Kaart van Vlaanderen met gemeenten (homepage)
   --------------------------------------------------------------------------
   Bron en licentie van de kaartomtrek: zie firmas/Regulariseren/KAART-HERKOMST.md.
   De stippen zijn voorbeelddata, zie de opmerking bij de <svg> in index.html.
   -------------------------------------------------------------------------- */
.vlaanderen-blok {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 8px;
  align-items: center;
}

@media (min-width: 860px) {
  .vlaanderen-blok {
    grid-template-columns: 3fr 2fr;
    gap: 48px;
  }
}

.vlaanderen-kaart-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  border: 1px solid #e7e5e2;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  padding: 26px 22px;
}

.vlaanderen-kaart {
  display: block;
  width: 100%;
  height: auto;
}

/* Het land wordt gevuld met een stippenraster. De provinciegrenzen blijven zichtbaar,
   maar heel licht: ze geven de vorm houvast zonder het raster te doorsnijden. */
.vlaanderen-provincies path {
  fill: url(#landraster);
  stroke: #6d8593;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

.vlaanderen-provincies path.vlaanderen-uitsnede {
  fill: var(--kleur-wit);
}

.vlaanderen-stip circle {
  fill: var(--kleur-petrol);
  stroke: var(--kleur-wit);
  stroke-width: 3;
}

.vlaanderen-stip text {
  font-family: var(--font-basis);
  font-weight: var(--gewicht-subkop);
  font-size: 22px;
  fill: var(--kleur-antraciet);
}

.vlaanderen-lijst .label {
  display: block;
  margin-bottom: 14px;
}

.vlaanderen-lijst .opsomming-check {
  margin-bottom: 18px;
}

.vlaanderen-lijst p.tekst-grijs {
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Iconen
   --------------------------------------------------------------------------
   De iconen werden ingeladen als <img src="icoon.svg">. Zo'n bestand is voor de
   browser een apart document en erft de `color` van de pagina niet, dus de
   `stroke="currentColor"` in de SVG viel altijd terug op zwart. De petrolblauwe
   accentkleur uit het brandbook was daardoor nergens te zien en de site oogde
   grijs en levenloos.

   Ze worden nu als masker geladen: de vorm komt uit het SVG-bestand, de kleur uit
   de CSS via `background-color`. Zo erven ze wel de kleur van hun omgeving, ook
   bij hover, en blijven de bestanden in /iconen/ herbruikbaar.
   -------------------------------------------------------------------------- */
.icoon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--icoon) center / contain no-repeat;
  mask: var(--icoon) center / contain no-repeat;
  flex: none;
}

.icoon--persoon     { --icoon: url("/iconen/persoon.svg"); }
.icoon--sleutel     { --icoon: url("/iconen/sleutel.svg"); }
.icoon--bord        { --icoon: url("/iconen/bord.svg"); }
.icoon--dossier     { --icoon: url("/iconen/dossier.svg"); }
.icoon--gebouw      { --icoon: url("/iconen/gebouw.svg"); }
.icoon--huis        { --icoon: url("/iconen/huis.svg"); }
.icoon--weegschaal  { --icoon: url("/iconen/weegschaal.svg"); }
.icoon--euro        { --icoon: url("/iconen/euro.svg"); }
.icoon--register    { --icoon: url("/iconen/register.svg"); }
.icoon--kalender    { --icoon: url("/iconen/kalender.svg"); }
.icoon--plattegrond { --icoon: url("/iconen/plattegrond.svg"); }
.icoon--telefoon    { --icoon: url("/iconen/telefoon.svg"); }
.icoon--locatie     { --icoon: url("/iconen/locatie.svg"); }
.icoon--mail        { --icoon: url("/iconen/mail.svg"); }
.icoon--vink        { --icoon: url("/iconen/vink.svg"); }

/* Pijltje bij een kaartlink, schuift mee bij hover.
   De onderstreping is hier weggelaten omdat die anders ook onder het pijltje en de
   tussenruimte doorloopt. De link blijft herkenbaar zonder op kleur alleen te
   steunen: hij staat vetter, heeft een pijl, en krijgt bij hover en bij
   toetsenbordfocus alsnog een onderstreping. */
/* Let op de selector: hierboven staat al `.kaart .kaart-link` met display:inline-block.
   Die is specifieker, dus deze regels moeten dezelfde specificiteit hebben, anders
   blijft de link inline en krijgt het pijltje geen breedte of hoogte. */
.kaart .kaart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.kaart .kaart-link:hover,
.kaart .kaart-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kaart .kaart-link::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("/iconen/pijl.svg") center / contain no-repeat;
  mask: url("/iconen/pijl.svg") center / contain no-repeat;
  transition: transform 150ms ease;
}

.kaart:hover .kaart-link::after {
  transform: translateX(3px);
}

/* Wie beweging liever vermijdt, krijgt dezelfde kleuren zonder de beweging. */
@media (prefers-reduced-motion: reduce) {
  .kaart,
  .icoon-vlak,
  .kaart .kaart-link::after {
    transition: none;
  }

  .kaart:hover {
    transform: none;
  }

  .kaart:hover .kaart-link::after {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Bestanden meesturen bij het contactformulier
   -------------------------------------------------------------------------- */
.veld-uitleg {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--kleur-grijs);
  max-width: var(--max-breedte-tekst);
}

.veld-uitleg + input[type="file"] {
  margin-top: 2px;
}

input[type="file"] + .veld-uitleg {
  margin: 8px 0 0;
  font-size: 0.85rem;
}

/* Het echte bestandsveld wordt verborgen en vervangen door een eigen knop. Reden:
   de ingebouwde knop van de browser toont de taal van het besturingssysteem, dus
   op een Engelstalige computer stond er "Choose Files" op een Nederlandse site.
   Het veld blijft wel bereikbaar met het toetsenbord: het is niet display:none,
   en de focusrand verschijnt op de zichtbare knop. */
.bestandsveld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--kleur-wit);
  border: 1px dashed var(--kleur-petrol);
  border-radius: var(--radius-knop);
}

.bestandsveld input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bestandsveld-knop {
  font-weight: var(--gewicht-subkop);
  font-size: 0.92rem;
  color: var(--kleur-petrol);
  background: var(--kleur-petrol-licht);
  border-radius: var(--radius-knop);
  padding: 8px 14px;
  cursor: pointer;
  margin: 0;
}

.bestandsveld-knop:hover {
  background: var(--kleur-petrol);
  color: var(--kleur-wit);
}

.bestandsveld input[type="file"]:focus-visible + .bestandsveld-knop {
  outline: 3px solid var(--kleur-petrol);
  outline-offset: 2px;
}

.bestandsveld-status {
  font-size: 0.9rem;
  color: var(--kleur-grijs);
}

/* Bronvermelding onder de kaart. De omtrek staat onder CC BY-SA 3.0 en die licentie
   eist naamsvermelding die voor de bezoeker zichtbaar is. Een opmerking in de code
   volstaat daar niet voor. Klein en gedempt, maar wel leesbaar. */
.kaart-bron {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--kleur-grijs);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Stippen op de projectenkaart
   --------------------------------------------------------------------------
   Nagebouwd naar het gedrag dat UNABO met amCharts bereikt: een stip die bij
   aanwijzen verkleurt en een tooltip toont. Bewust zonder die bibliotheek, want
   die wordt van een externe server geladen. Deze site laadt niets van buitenaf,
   en dat is precies waarom er geen cookiemelding nodig is.

   Aanvulling op UNABO: de stippen zijn ook met het toetsenbord bereikbaar, en de
   tooltip is een live region zodat een schermlezer hem voorleest.
   -------------------------------------------------------------------------- */
/* De projectstippen moeten uit het raster springen: vol petrolblauw met een witte
   rand eromheen, zodat ze ook los blijven staan waar ze elkaar overlappen. */
.vlaanderen-kaart .stip {
  fill: var(--kleur-petrol);
  stroke: var(--kleur-wit);
  stroke-width: 1.5;
  filter: url(#stipgloed);
  cursor: pointer;
  transition: fill 120ms ease, r 120ms ease;
}

.vlaanderen-kaart .stip:hover,
.vlaanderen-kaart .stip:focus-visible {
  fill: var(--kleur-antraciet);
  stroke-width: 2.5;
  outline: none;
}

.vlaanderen-kaart .stip:focus-visible {
  stroke: var(--kleur-antraciet);
  stroke-width: 3;
}

.vlaanderen-kaart-wrap {
  position: relative;
}

/* De tooltip is een wit kaartje dat boven de stip zweeft, met de gemeente groot
   en het aantal projecten klein eronder. */
.kaart-tooltip {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--kleur-wit);
  padding: 9px 14px;
  border-radius: var(--radius-knop);
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -155%);
  box-shadow: 0 6px 22px rgba(23, 22, 23, 0.18), 0 1px 3px rgba(23, 22, 23, 0.10);
}

.kaart-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: var(--kleur-wit);
  transform: translateX(-50%) rotate(45deg);
}

.kaart-tooltip-naam {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kleur-petrol);
  letter-spacing: 0.01em;
}

.kaart-tooltip-sub {
  font-size: 0.8rem;
  color: var(--kleur-grijs);
}

/* Cijferrij onder de kaart: het eerste wat een bezoeker moet zien. */
.kaart-cijferrij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #e7e5e2;
}

.kaart-cijferrij > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kaart-getal {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: var(--gewicht-kop);
  color: var(--kleur-petrol);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.kaart-onder {
  font-size: 0.85rem;
  color: var(--kleur-grijs);
  line-height: 1.35;
}

.kaart-tooltip[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .vlaanderen-kaart .stip {
    transition: none;
  }
}

/* Zijkolom bij de projectenkaart */
.kaart-cijfer {
  font-size: 1.05rem;
  margin: 6px 0 14px;
}

/* Geen vinkjes meer: dit is een cijferoverzicht, geen opsomming van voordelen.
   Een vinkje belooft "dit krijgt u", en dat is hier niet aan de orde. De gemeente
   staat links, het aantal rechts, met een haarlijn ertussen. Dat leest als data. */
.kaart-lijst-kop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 0 0 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--kleur-antraciet);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kleur-grijs);
  max-width: 340px;
}

.kaart-lijst {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  max-width: 340px;
}

.kaart-lijst li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid #ecebe8;
  font-size: 0.95rem;
}

.kaart-lijst li:last-child {
  border-bottom: 0;
}

.kaart-lijst-naam {
  color: var(--kleur-antraciet);
}

.kaart-lijst-aantal {
  font-weight: 700;
  color: var(--kleur-petrol);
  font-variant-numeric: tabular-nums;
}

/* Bij veel stippen overlappen ze rond de steden. Licht doorschijnend maakt die
   opeenhoping zichtbaar in plaats van dat alles een dichte vlek wordt. */
.vlaanderen-kaart .stip {
  fill-opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Tarieven
   --------------------------------------------------------------------------
   Bewust geen kaarten met gevulde prijsblokken meer. Die waren visueel te zwaar:
   drie dozen met daarin nog eens een gekleurde doos. Nu een rustige lijst met
   haarlijnen, waarbij het bedrag door zijn plaats en kleur opvalt en niet door
   een vlak eromheen. Zelfde aanpak als het overzicht naast de projectenkaart.
   -------------------------------------------------------------------------- */
.tarieflijst {
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid var(--kleur-antraciet);
}

.tariefrij {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px 32px;
  padding: 20px 0;
  border-bottom: 1px solid #e7e5e2;
}

.tariefrij dt {
  font-weight: var(--gewicht-subkop);
  color: var(--kleur-antraciet);
  font-size: 1.02rem;
}

.tariefrij dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.tarief-bedrag {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--kleur-petrol);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.tarief-bedrag--licht {
  font-weight: var(--gewicht-subkop);
  color: var(--kleur-grijs);
}

.tarief-btw {
  font-size: 0.82rem;
  color: var(--kleur-grijs);
}

@media (max-width: 599px) {
  .tariefrij {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tariefrij dd {
    align-items: flex-start;
  }
}