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

@font-face {
  font-family: "Lexend";
  src: url("/fonts/Lexend-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/fonts/Lexend-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/fonts/Lexend-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleuren, zie branding.md sectie 4 */
  --kleur-roomwit: #FBF8F3;
  --kleur-zandbeige: #F3EDE3;
  --kleur-dennengroen: #22312B;
  --kleur-warmgrijs: #6B665C;
  --kleur-mosgroen: #2F6B4F;
  --kleur-mosgroen-donker: #244F3B;
  --kleur-saliegroen: #DCEAE1;
  --kleur-rand: #DCD3C4;
  --kleur-wit: #FFFFFF;

  /* Typografie, zie branding.md sectie 5 */
  --font-basis: "Lexend", Arial, Helvetica, sans-serif;
  --gewicht-kop: 700;
  --gewicht-subkop: 600;
  --gewicht-tekst: 400;
  --basisgrootte: 17px;

  /* Layout */
  --max-breedte-marketing: 1120px;
  --max-breedte-tool: 640px;
  --max-breedte-tekst: 680px;
  --ruimte-sectie: clamp(48px, 7vw, 88px);

  /* Componenten */
  --radius-knop: 10px;
  --radius-veld: 8px;
  --radius-kaart: 12px;
  --radius-vraagkaart: 20px;
  --schaduw-kaart: 0 2px 8px rgba(34, 49, 43, 0.08);
  --schaduw-vraagkaart: 0 6px 20px rgba(34, 49, 43, 0.10);
}

/* --------------------------------------------------------------------------
   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-dennengroen);
  background: var(--kleur-roomwit);
  line-height: 1.6;
  font-size: var(--basisgrootte);
}

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

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

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

:focus-visible {
  outline: 2.5px solid var(--kleur-mosgroen);
  outline-offset: 2px;
  border-radius: 4px;
}

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

h1 {
  font-weight: var(--gewicht-kop);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

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

h3 {
  font-weight: var(--gewicht-subkop);
  font-size: 1.176rem;
  line-height: 1.3;
}

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.25em; }
ul:last-child, ol:last-child { margin-bottom: 0; }
li { margin-bottom: 0.4em; }

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

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

.section { padding: var(--ruimte-sectie) 0; }
.section--zand { background: var(--kleur-zandbeige); }

.label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-mosgroen);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.9em;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--kleur-dennengroen);
  color: var(--kleur-roomwit);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 100;
  font-weight: 600;
}

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

.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;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius-knop);
  font-family: var(--font-basis);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

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

.btn-primary:hover {
  background: var(--kleur-mosgroen-donker);
  color: var(--kleur-wit);
  box-shadow: var(--schaduw-kaart);
}

.btn-secundair {
  background: transparent;
  color: var(--kleur-mosgroen);
  border: 1.5px solid var(--kleur-mosgroen);
}

.btn-secundair:hover {
  background: var(--kleur-saliegroen);
  color: var(--kleur-mosgroen-donker);
}

.btn-tekst {
  background: none;
  border: none;
  color: var(--kleur-mosgroen);
  font-family: var(--font-basis);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-tekst:hover { color: var(--kleur-mosgroen-donker); }

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

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

.site-header {
  padding: 18px 0;
  background: var(--kleur-roomwit);
  position: relative;
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--kleur-dennengroen);
  text-decoration: none;
  letter-spacing: -0.01em;
}

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

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

.site-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--kleur-dennengroen);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

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

/* Mobiel menu: enkel zichtbaar/actief onder de breedte waarop de volledige
   navigatie niet meer op een rij past. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid var(--kleur-rand);
  border-radius: var(--radius-knop);
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-basis);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--kleur-dennengroen);
}

.menu-toggle .menu-icoon {
  position: relative;
  width: 18px;
  height: 12px;
}

.menu-toggle .menu-icoon span,
.menu-toggle .menu-icoon::before,
.menu-toggle .menu-icoon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--kleur-dennengroen);
}

.menu-toggle .menu-icoon::before { top: 0; }
.menu-toggle .menu-icoon span { top: 5px; }
.menu-toggle .menu-icoon::after { top: 10px; }

@media (max-width: 980px) {
  .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-roomwit);
    padding: 20px 24px 26px;
    box-shadow: var(--schaduw-kaart);
    z-index: 100;
  }

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

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

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

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

.hero { padding: clamp(40px, 6vw, 72px) 0 var(--ruimte-sectie); }

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.hero-tekst p { font-size: 1.05rem; }

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

/* Statisch UI-voorbeeld in de hero: geen echte tool, enkel een visuele
   verwijzing naar hoe een vraagkaart eruitziet (branding.md sectie 6 en 11.4). */
.hero-voorbeeld {
  background: var(--kleur-wit);
  border-radius: var(--radius-vraagkaart);
  box-shadow: var(--schaduw-vraagkaart);
  padding: 28px;
  max-width: 380px;
  margin: 0 auto;
}

.hero-voorbeeld-balk {
  height: 6px;
  border-radius: 999px;
  background: var(--kleur-saliegroen);
  overflow: hidden;
  margin-bottom: 20px;
}

.hero-voorbeeld-balk span {
  display: block;
  height: 100%;
  width: 45%;
  background: var(--kleur-mosgroen);
  border-radius: 999px;
}

.hero-voorbeeld p.hero-voorbeeld-vraag {
  font-family: var(--font-basis);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--kleur-dennengroen);
  margin-bottom: 16px;
  max-width: none;
}

.hero-voorbeeld-opties {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-voorbeeld-optie {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--kleur-rand);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.92rem;
  color: var(--kleur-dennengroen);
}

.hero-voorbeeld-optie span.stip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--kleur-rand);
  flex: none;
}

.hero-voorbeeld-optie.actief {
  border-color: var(--kleur-mosgroen);
  background: var(--kleur-saliegroen);
}

.hero-voorbeeld-optie.actief span.stip {
  border-color: var(--kleur-mosgroen);
  background: var(--kleur-mosgroen);
  box-shadow: inset 0 0 0 3px var(--kleur-saliegroen);
}

/* --------------------------------------------------------------------------
   Reassurance-blok
   -------------------------------------------------------------------------- */

.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.reassurance-item {
  background: var(--kleur-wit);
  border-radius: var(--radius-kaart);
  padding: 24px;
  box-shadow: var(--schaduw-kaart);
}

.reassurance-item .icoon-rond {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kleur-saliegroen);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.reassurance-item .icoon-rond .icoon {
  width: 22px;
  height: 22px;
  color: var(--kleur-mosgroen);
}

.reassurance-item h3 { margin-bottom: 0.5em; }
.reassurance-item p { font-size: 0.95rem; color: var(--kleur-warmgrijs); }

/* --------------------------------------------------------------------------
   Sectie-intro en stappen
   -------------------------------------------------------------------------- */

.sectie-intro { max-width: 680px; margin-bottom: 40px; }
.sectie-intro p { color: var(--kleur-warmgrijs); }

.stappen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.stap-kaart .stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kleur-dennengroen);
  color: var(--kleur-roomwit);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.stap-kaart h3 { margin-bottom: 0.5em; }
.stap-kaart p { font-size: 0.95rem; color: var(--kleur-warmgrijs); }

/* --------------------------------------------------------------------------
   Kaarten (algemeen)
   -------------------------------------------------------------------------- */

.kaart {
  background: var(--kleur-wit);
  border-radius: var(--radius-kaart);
  padding: 24px;
  box-shadow: var(--schaduw-kaart);
  display: flex;
  flex-direction: column;
}

.kaart h3 { margin-bottom: 0.5em; }
.kaart p { font-size: 0.95rem; color: var(--kleur-warmgrijs); }

.kaart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--kleur-mosgroen);
}

.kaart-link .icoon { width: 15px; height: 15px; transition: transform 0.15s ease; }
.kaart-link:hover .icoon,
.kaart-link:focus-visible .icoon { transform: translateX(3px); }

.kaarten-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.kaarten-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Slotoproep (CTA-band)
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--kleur-dennengroen);
  color: var(--kleur-roomwit);
  border-radius: var(--radius-vraagkaart);
  padding: 48px;
  text-align: left;
}

.cta-band h2,
.cta-band p { color: var(--kleur-roomwit); }

.cta-band p { color: #D8DED9; }

.cta-band .btn-secundair {
  color: var(--kleur-roomwit);
  border-color: var(--kleur-roomwit);
}

.cta-band .btn-secundair:hover {
  background: rgba(251, 248, 243, 0.12);
  color: var(--kleur-roomwit);
}

/* Lichte variant: witte kaart in plaats van de donkere band, bijvoorbeeld op
   de FAQ-pagina. De knoppen moeten dan terug hun gewone (groene) kleur
   krijgen in plaats van de witte tekst/rand die voor de donkere band bedoeld
   is: anders is de secundaire knop onzichtbaar op een witte achtergrond. */
.cta-band--licht {
  background: var(--kleur-wit);
  color: var(--kleur-dennengroen);
  box-shadow: var(--schaduw-kaart);
}

.cta-band--licht h2 { color: var(--kleur-dennengroen); }
.cta-band--licht p { color: var(--kleur-warmgrijs); }

.cta-band--licht .btn-secundair {
  color: var(--kleur-mosgroen);
  border-color: var(--kleur-mosgroen);
}

.cta-band--licht .btn-secundair:hover {
  background: var(--kleur-saliegroen);
  color: var(--kleur-mosgroen-donker);
}

/* --------------------------------------------------------------------------
   Paginakop (subpagina's)
   -------------------------------------------------------------------------- */

.paginakop { padding: 40px 0 var(--ruimte-sectie); }
.paginakop .container { max-width: var(--max-breedte-marketing); }
.kruimelpad {
  font-size: 0.85rem;
  color: var(--kleur-warmgrijs);
  margin-bottom: 1.2em;
}
.kruimelpad a { color: var(--kleur-warmgrijs); }

/* --------------------------------------------------------------------------
   Tekstblokken (privacy, wat-nu, ...)
   -------------------------------------------------------------------------- */

.tekstblok { max-width: var(--max-breedte-tekst); margin-bottom: 2.4em; }
.tekstblok:last-child { margin-bottom: 0; }
.tekstblok h2 { margin-bottom: 0.6em; }

/* Springt de browser naar een anker (bv. vanaf de overzichtspagina), dan mag
   de kop niet strak tegen de bovenrand van het scherm plakken. */
[id] { scroll-margin-top: 20px; }

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

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

.kop-met-icoon .icoon-rond { flex: none; }

.werkwijze-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.werkwijze-lijst li {
  display: flex;
  gap: 20px;
  margin: 0;
}

.werkwijze-lijst .stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kleur-saliegroen);
  color: var(--kleur-mosgroen-donker);
  font-weight: 700;
  font-size: 0.9rem;
  flex: none;
}

.werkwijze-lijst h3 { margin-bottom: 0.3em; }
.werkwijze-lijst p { color: var(--kleur-warmgrijs); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

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

.faq-item {
  border-bottom: 1px solid var(--kleur-rand);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 20px 4px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--kleur-dennengroen);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .icoon {
  color: var(--kleur-mosgroen);
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.15s ease;
}

.faq-item[open] summary .icoon { transform: rotate(90deg); }

.faq-item p {
  padding: 0 4px 20px;
  color: var(--kleur-warmgrijs);
}

/* --------------------------------------------------------------------------
   Zelfcheck: voortgangsbalk, vraagkaart, antwoordopties
   -------------------------------------------------------------------------- */

.zelfcheck-zone {
  max-width: var(--max-breedte-tool);
  margin: 0 auto;
}

.voortgangsbalk {
  height: 6px;
  width: 100%;
  background: var(--kleur-zandbeige);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 28px;
}

.voortgangsbalk span {
  display: block;
  height: 100%;
  background: var(--kleur-mosgroen);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.vraagkaart {
  max-width: var(--max-breedte-tool);
  background: var(--kleur-wit);
  border-radius: var(--radius-vraagkaart);
  box-shadow: var(--schaduw-vraagkaart);
  padding: 32px;
}

.vraagkaart h2 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1.1em;
}

.antwoord-lijst {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px 0;
  padding: 0;
  list-style: none;
}

.antwoord-lijst li { margin: 0; }

.antwoord-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.antwoord-kaart {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--kleur-rand);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-basis);
  font-size: 1rem;
  color: var(--kleur-dennengroen);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.antwoord-kaart .stip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--kleur-rand);
  flex: none;
  position: relative;
}

.antwoord-input:checked + .antwoord-kaart {
  border-color: var(--kleur-mosgroen);
  background: var(--kleur-saliegroen);
}

.antwoord-input:checked + .antwoord-kaart .stip {
  border-color: var(--kleur-mosgroen);
  background: var(--kleur-mosgroen);
  box-shadow: inset 0 0 0 3px var(--kleur-saliegroen);
}

.antwoord-input:focus-visible + .antwoord-kaart {
  outline: 2.5px solid var(--kleur-mosgroen);
  outline-offset: 2px;
}

.antwoord-kaart:hover { border-color: var(--kleur-mosgroen); }

.vraagkaart-acties {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.vraagkaart-vorige {
  background: none;
  border: none;
  color: var(--kleur-warmgrijs);
  font-family: var(--font-basis);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px 4px;
}

.vraagkaart-vorige:hover { color: var(--kleur-mosgroen-donker); }
.vraagkaart-vorige[hidden] { display: none; }

.vraagkaart-fout {
  color: #8A3B2E;
  font-size: 0.9rem;
  margin: 12px 0 0 0;
  font-weight: 600;
}

.vraagkaart-fout[hidden] { display: none; }

.zelfcheck-fallback {
  max-width: var(--max-breedte-tool);
  margin: 0 auto;
  background: var(--kleur-wit);
  border-radius: var(--radius-vraagkaart);
  box-shadow: var(--schaduw-vraagkaart);
  padding: 32px;
  text-align: left;
}

.zelfcheck-tool[hidden] { display: none; }

/* Zichtbaarheid gestuurd door de js-klasse op html: zonder JavaScript blijft
   de tool verborgen en blijft enkel de leesbare terugvaloptie zichtbaar. */
.zelfcheck-fallback { display: block; }
html.js .zelfcheck-fallback { display: none; }
.zelfcheck-tool { display: none; }
html.js .zelfcheck-tool { display: block; }

/* --------------------------------------------------------------------------
   Resultaatscherm
   -------------------------------------------------------------------------- */

.resultaatkaart {
  max-width: var(--max-breedte-tool);
  background: var(--kleur-wit);
  border-radius: var(--radius-vraagkaart);
  box-shadow: var(--schaduw-vraagkaart);
  padding: 40px;
}

.resultaat-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kleur-saliegroen);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.resultaat-badge .icoon {
  width: 26px;
  height: 26px;
  color: var(--kleur-mosgroen);
}

.resultaatkaart h2 { margin-bottom: 0.5em; }

.resultaat-samenvatting {
  background: var(--kleur-zandbeige);
  border-radius: var(--radius-kaart);
  padding: 16px 18px;
  font-size: 0.92rem;
  color: var(--kleur-warmgrijs);
  margin: 20px 0;
}

.resultaat-samenvatting dt { font-weight: 600; color: var(--kleur-dennengroen); }
.resultaat-samenvatting dd { margin: 0 0 10px 18px; }
.resultaat-samenvatting dd:last-child { margin-bottom: 0; }

.resultaat-disclaimer {
  font-size: 0.875rem;
  color: var(--kleur-warmgrijs);
  border-left: 3px solid var(--kleur-saliegroen);
  padding-left: 14px;
  margin: 20px 0;
}

.resultaat-acties {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.resultaat-herstart {
  background: none;
  border: none;
  color: var(--kleur-warmgrijs);
  font-family: var(--font-basis);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Vervolgformulier (na de check, en op de contactpagina)
   -------------------------------------------------------------------------- */

.formulier-blok {
  background: var(--kleur-wit);
  border-radius: var(--radius-vraagkaart);
  box-shadow: var(--schaduw-vraagkaart);
  padding: 32px;
}

.formulier-blok[hidden] { display: none; }

.formulier { max-width: 100%; }

.veld { margin-bottom: 20px; }

.veld label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: var(--kleur-dennengroen);
}

.veld .optioneel {
  font-weight: 400;
  color: var(--kleur-warmgrijs);
  font-size: 0.85rem;
}

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld textarea {
  width: 100%;
  height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-veld);
  font-family: var(--font-basis);
  font-size: 1rem;
  color: var(--kleur-dennengroen);
  background: var(--kleur-wit);
}

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

.veld input::placeholder,
.veld textarea::placeholder { color: var(--kleur-warmgrijs); }

.veld input:focus-visible,
.veld textarea:focus-visible {
  outline: none;
  border-color: var(--kleur-mosgroen);
  box-shadow: 0 0 0 3px var(--kleur-saliegroen);
}

.veld-uitleg {
  font-size: 0.85rem;
  color: var(--kleur-warmgrijs);
  margin: 4px 0 10px 0;
  max-width: none;
}

.formulier-rij {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}

.formulier-rij--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hp-veld { position: absolute; left: -9999px; top: -9999px; }

.bestandsveld {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bestandsveld input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.bestandsveld-knop {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-knop);
  border: 1.5px solid var(--kleur-mosgroen);
  color: var(--kleur-mosgroen);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.bestandsveld-knop:hover { background: var(--kleur-saliegroen); }

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

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

.formulier-voettekst {
  font-size: 0.85rem;
  color: var(--kleur-warmgrijs);
  margin-top: 20px;
}

.formulier-melding {
  display: none;
  border-radius: var(--radius-kaart);
  padding: 24px;
  margin-bottom: 20px;
}

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

.formulier-melding--succes {
  background: var(--kleur-saliegroen);
}
.formulier-melding--succes h2,
.formulier-melding--succes p { color: var(--kleur-dennengroen); }

.formulier-melding--fout {
  background: #F5E4DE;
}
.formulier-melding--fout p { color: #7A3624; margin: 0; }

/* --------------------------------------------------------------------------
   Contactzijbalk
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

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

.contact-zijbalk h2 { font-size: 1.15rem; margin-bottom: 0.6em; }
.contact-zijbalk p { color: var(--kleur-warmgrijs); }
.contact-zijbalk address { font-style: normal; }

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

.icoon-klein { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Iconen
   Nooit als <img src="icoon.svg">: dat erft de paginakleur niet (zie
   FEEDBACK-EN-FOUTEN.md 4.7). Altijd als masker, kleur via background-color.
   -------------------------------------------------------------------------- */

.icoon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icoon) center / contain no-repeat;
  mask: var(--icoon) center / contain no-repeat;
  flex: none;
}

.icoon--document    { --icoon: url("/iconen/document.svg"); }
.icoon--gebouw      { --icoon: url("/iconen/gebouw.svg"); }
.icoon--kalender    { --icoon: url("/iconen/kalender.svg"); }
.icoon--brief       { --icoon: url("/iconen/brief.svg"); }
.icoon--vraagteken  { --icoon: url("/iconen/vraagteken.svg"); }
.icoon--vink        { --icoon: url("/iconen/vink.svg"); }
.icoon--pijl        { --icoon: url("/iconen/pijl.svg"); }
.icoon--slot        { --icoon: url("/iconen/slot.svg"); }
.icoon--veranda     { --icoon: url("/iconen/veranda.svg"); }
.icoon--carport     { --icoon: url("/iconen/carport.svg"); }
.icoon--terras      { --icoon: url("/iconen/terras.svg"); }
.icoon--oprit       { --icoon: url("/iconen/oprit.svg"); }
.icoon--opsplitsing { --icoon: url("/iconen/opsplitsing.svg"); }
.icoon--weegschaal  { --icoon: url("/iconen/weegschaal.svg"); }

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

.site-footer {
  background: var(--kleur-dennengroen);
  color: var(--kleur-roomwit);
  padding: 56px 0 28px;
  margin-top: var(--ruimte-sectie);
}

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

.footer-merknaam {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.6em 0;
}

.site-footer p { color: #C9D2CC; }
.site-footer a { color: var(--kleur-roomwit); }
.site-footer a:hover { color: var(--kleur-saliegroen); }

.footer-kolom h2 {
  color: var(--kleur-roomwit);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 1em;
}

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

.footer-nav a { text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { text-decoration: underline; }

.footer-onder {
  border-top: 1px solid rgba(251, 248, 243, 0.15);
  margin-top: 40px;
  padding-top: 24px;
}

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

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

.copyright { font-size: 0.85rem; color: #C9D2CC; margin: 0; }

.footer-identificatie {
  font-size: 0.8rem;
  color: #A9B4AC;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsief
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; gap: 36px; }
  .hero-beeld { order: -1; max-width: 340px; margin: 0 auto; }
  .reassurance-grid { grid-template-columns: 1fr; }
  .stappen-grid { grid-template-columns: 1fr; }
  .kaarten-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
  .kaarten-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { padding: 32px; text-align: left; }
}

@media (max-width: 640px) {
  .site-footer .container { grid-template-columns: 1fr; }
  .kaarten-grid--3 { grid-template-columns: 1fr; }
  .vraagkaart { padding: 24px; }
  .resultaatkaart { padding: 24px; }
  .formulier-blok { padding: 24px; }
  .formulier-rij--twee { grid-template-columns: 1fr; }
  .cta-band { padding: 28px; border-radius: var(--radius-kaart); }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Beeldmerk
   --------------------------------------------------------------------------
   Toegevoegd op 06-08-2026. Een kaartspeld met een woning erin: de speld staat
   voor het "mijn" in de naam, de woning verbindt het merk met het zustermerk.
   Bewust een andere silhouetvorm dan dat zustermerk (rond en puntig tegenover
   vierkant), zodat je meteen ziet dat het twee merken zijn.

   Als achtergrond in een span, niet als <img>: zo schaalt hij mee met de tekst.
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.logo-merk {
  width: 1.42em;
  height: 1.42em;
  flex: none;
  background: url("/logo.svg") center / contain no-repeat;
}

@media (max-width: 400px) {
  .logo {
    gap: 7px;
  }
}