/* De schil van elke pagina op www.lead-follow.nl: tokens, basis, navigatie, knoppen en voettekst.
   Wordt door site-bron/bouw.mjs op elke pagina gezet, vóór de stijl van de pagina zelf. Wat hier staat hoort nergens
   anders meer te staan; tot 21 september 2026 stonden de tokens en de navigatie in drie kopieën (homepage, calculator
   en juridisch.css) die stilletjes uit elkaar liepen. */

:root {
  color-scheme: light dark;
  --ground: #F8F6F1; --surface: #FFFFFF; --surface-2: #F1EDE2;
  /* --ink-3 en --champagne-txt zijn tekstkleuren en halen minimaal 4,5:1 op ivoor, wit en de tinten (AA).
     --ink-3 is #5E6862: 4,75:1 op de groene tint, de laagste ondergrond waarop hij staat. */
  --ink: #17201B; --ink-2: #57635C; --ink-3: #5E6862;
  --line: #E5DFD1; --line-strong: #D4CCBA;
  --green: #0E3B2E; --green-hover: #0A2E24; --green-ink: #FFFFFF;
  --green-tint: #E3EBE4; --green-soft: #3C6B57;
  --champagne: #C2A15E; --champagne-txt: #7A5D30; --gold-tint: #F3EBD9;
  --success: #1B6E4B; --success-tint: #E1EFE6;
  --warning: #A2691E; --warning-tint: #F5EAD6;
  --critical: #A2361E;
  --nav-bg: rgba(248, 246, 241, 0.72);
  --shadow-float: 0 12px 40px rgba(23, 32, 27, 0.10);
  --shadow-card: 0 1px 2px rgba(23, 32, 27, 0.04);
  --font-ui: "Instrument Sans", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-editorial: "Newsreader", "Iowan Old Style", Georgia, serif;
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1411; --surface: #141C18; --surface-2: #1B2620;
    --ink: #EDEAE0; --ink-2: #A6B0A8; --ink-3: #8A968E;
    --line: #253029; --line-strong: #334038;
    --green: #1E5C45; --green-hover: #277054; --green-ink: #FFFFFF;
    --green-tint: #16261F; --green-soft: #6FA88C;
    --champagne: #C9A96A; --champagne-txt: #D3B67C; --gold-tint: #262015;
    --success: #4CAF82; --success-tint: #14261D;
    --warning: #D19A4E; --warning-tint: #2A2214;
    --critical: #E0806A;
    --nav-bg: rgba(13, 20, 17, 0.72);
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  --ground: #0D1411; --surface: #141C18; --surface-2: #1B2620;
  --ink: #EDEAE0; --ink-2: #A6B0A8; --ink-3: #8A968E;
  --line: #253029; --line-strong: #334038;
  --green: #1E5C45; --green-hover: #277054; --green-ink: #FFFFFF;
  --green-tint: #16261F; --green-soft: #6FA88C;
  --champagne: #C9A96A; --champagne-txt: #D3B67C; --gold-tint: #262015;
  --success: #4CAF82; --success-tint: #14261D;
  --warning: #D19A4E; --warning-tint: #2A2214;
  --critical: #E0806A;
  --nav-bg: rgba(13, 20, 17, 0.72);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Basis */
* { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Vloeiend scrollen alleen voor wie geen beperkte beweging heeft ingesteld. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.65;
  margin: 0; -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
}
::selection { background: var(--green-tint); color: var(--ink); }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* Zichtbare focus voor toetsenbordgebruikers; ankerdoelen die via script focus krijgen tonen geen kader. */
:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
/* Ankerdoelen stoppen onder de vaste navigatie (62 px) met 16 px lucht. */
[id] { scroll-margin-top: 78px; }
.skip-link {
  position: absolute; top: 12px; left: 12px; z-index: 100;
  background: var(--green); color: var(--green-ink); font-weight: 600; font-size: 0.94rem;
  padding: 10px 18px; border-radius: var(--r-pill); text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--champagne); outline-offset: 2px; }
.editorial { font-family: var(--font-editorial); font-style: italic; font-weight: 450; }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-size: 0.94rem; font-weight: 500;
  border-radius: var(--r-pill); border: 1px solid transparent;
  padding: 12px 26px; min-height: 46px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 100ms ease-out, background 200ms var(--ease-calm), border-color 200ms var(--ease-calm);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--green); color: var(--green-ink) !important; }
.btn-primary:hover { background: var(--green-hover); }
.btn-primary:focus-visible { outline-color: var(--champagne); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn-ghost { background: transparent; color: var(--green-soft); }
.btn-ghost:hover { background: var(--green-tint); }
.btn-sm { min-height: 38px; padding: 8px 18px; font-size: 0.85rem; }
.btn .kort { display: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

/* Navigatie: blijft bovenaan staan, met een lichte waas over wat eronder doorschuift. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--line);
}
.nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 62px; }
.wordmark {
  font-weight: 600; font-size: 1.05rem; text-decoration: none; white-space: nowrap; color: var(--ink);
  display: inline-flex; align-items: center; gap: 9px; letter-spacing: -0.01em;
}
.wordmark svg { flex-shrink: 0; }
.nav-links { display: flex; gap: 22px; align-items: center; margin-left: auto; }
.nav-links > a, .nav-groep-knop {
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px;
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color 180ms var(--ease-calm);
}
.nav-links > a:hover, .nav-groep-knop:hover { color: var(--ink); }
.nav-links > a[aria-current="page"], .nav-groep[data-actief] .nav-groep-knop { color: var(--ink); font-weight: 600; }
.nav-groep-knop svg { transition: transform 180ms var(--ease-calm); }
.nav-groep-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-acties { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* "Inloggen" voor kantoren die al klant zijn: een rustige knop naast de groene knop. Op een smal scherm is daar
   geen plek meer; dan staat dezelfde link onderaan het uitklapmenu. */
.nav-inlog {
  display: inline-flex; align-items: center; min-height: 40px; padding: 9px 15px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: 0.85rem; text-decoration: none; white-space: nowrap;
  transition: border-color 180ms var(--ease-calm), background 180ms var(--ease-calm);
}
.nav-inlog:hover { border-color: var(--ink-3); background: var(--green-tint); }
.nav-links a.menu-inlog { display: none; }

/* Het uitklapmenu onder Oplossingen. Op een breed scherm een paneel dat opent bij aanwijzen, bij focus (toetsenbord)
   en bij een klik op de knop; zonder JavaScript werkt het via aanwijzen en focus. */
.nav-groep { position: relative; }
.nav-paneel {
  display: none; position: absolute; top: calc(100% + 6px); left: -18px; z-index: 60;
  min-width: 520px; padding: 18px 22px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-float);
  grid-template-columns: 1fr 1fr; gap: 8px 32px;
}
.nav-groep:hover:not(.dicht) .nav-paneel, .nav-groep:focus-within:not(.dicht) .nav-paneel, .nav-groep.open .nav-paneel { display: grid; }
/* .dicht zet het script erop als de gebruiker het paneel met Escape of een klik sluit terwijl de knop nog focus heeft;
   anders zouden :focus-within en :hover het meteen weer openen. Gaat er weer af zodra de focus de groep verlaat. */
/* Een klein onzichtbaar bruggetje, zodat het paneel niet dichtklapt als de muis van de knop naar het paneel gaat. */
.nav-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-kolom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-kolom-kop { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-txt); margin: 0 0 6px; }
.nav-kolom a {
  display: block; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-s);
  font-size: 0.9rem; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-kolom a:hover { background: var(--green-tint); }
.nav-kolom a[aria-current="page"] { font-weight: 600; }
.nav-kolom a.nav-alles { margin-top: 6px; color: var(--green-soft); font-weight: 600; }
.nav-kolom a small { display: block; font-size: 0.8rem; color: var(--ink-3); white-space: normal; }

/* Zes menu-items plus twee knoppen. Daaronder tot de hamburger-grens: dichter op elkaar, kleinere letter en de
   korte knoptekst. De grenzen horen bij het aantal items; komt er een item bij, dan opnieuw meten
   (dashboard/tests/menubalk.test.ts valt als het aantal verandert). */
@media (max-width: 1100px) {
  .nav-links { gap: 14px; }
  .nav-links > a, .nav-groep-knop { font-size: 0.82rem; }
  .nav-inner .btn .lang { display: none; }
  .nav-inner .btn .kort { display: inline; }
}
/* Hamburgerknop: alleen zichtbaar op smalle schermen en alleen als JavaScript werkt (html.js). */
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  margin-right: -8px; padding: 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--green-tint); }
.nav-toggle .ico-dicht { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-dicht { display: block; }
@media (max-width: 900px) {
  html.js .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px 14px;
    max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-float);
  }
  .nav.menu-open .nav-links { display: flex; }
  .nav-links > a { min-height: 48px; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-links > a:last-child { border-bottom: 0; }
  /* In het uitklapmenu staat Oplossingen niet achter een knop maar gewoon open: twee lijstjes met hun eigen kopje. */
  .nav-groep { border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
  .nav-groep-knop { display: none; }
  .nav-paneel {
    display: grid; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent;
    grid-template-columns: 1fr 1fr; gap: 4px 20px;
  }
  .nav-paneel::before { display: none; }
  .nav-kolom-kop { margin-top: 8px; }
  .nav-kolom a { white-space: normal; min-height: 40px; display: flex; align-items: center; padding: 6px 0; margin: 0; }
  .nav-kolom a small { display: none; }
  .btn .lang { display: none; }
  .btn .kort { display: inline; }
  .nav-inlog { display: none; }
  .nav-links a.menu-inlog { display: inline-flex; font-weight: 600; }
}
@media (max-width: 480px) { .nav-paneel { grid-template-columns: 1fr; } }
@media (max-width: 360px) {
  .nav-inner.wrap { padding: 0 16px; gap: 10px; }
  .nav-inner .btn { padding: 8px 12px; font-size: 0.85rem; }
  .nav-links { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .nav-groep-knop svg, .nav-links > a, .nav-groep-knop, .nav-inlog { transition: none; } }

/* SECTIEGRONDEN. Het designsysteem schrijft voor: ivoor draagt (70%), wit toont detail (20%), groen handelt (8%),
   champagne siert (2%). Gemeten op 21 september 2026 haalde de site 26 tot 29 procent wit en op Growth en Partners
   één procent groen: elke sectie stond op dezelfde grond met dezelfde witte kaarten erop, twaalf keer achter elkaar.
   Daardoor is geen enkele sectie zwaarder dan de andere en trekt niets het oog naar beneden.

   Een sectie krijgt daarom een grond, en nooit twee dezelfde achter elkaar. De kleur loopt over de volle breedte
   terwijl de inhoud in de wrap blijft; dat kan met een schaduw die tot voorbij het scherm reikt, zonder de pagina
   zijdelings te laten schuiven zoals 100vw dat doet. */
.grond-wit, .grond-groen {
  clip-path: inset(0 -100vmax);
  padding-bottom: 88px;
}
.grond-wit { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); }
.grond-groen { background: var(--green); box-shadow: 0 0 0 100vmax var(--green); color: var(--green-ink); }
/* Op een gekleurde grond staan de kaarten niet meer op dezelfde kleur als hun ondergrond. */
.grond-wit .card { background: var(--ground); }
/* Op een groene grond moet elke tekstkleur opnieuw gezet worden, en preciezer dan met een losse klasse: .block-head p
   en .checklist li zijn specifieker dan .grond-groen p en hielden anders hun donkere inkt op het groen (gemeten
   1,6 tot 2,0 op 1). Elementen met een eigen achtergrond (knoppen) blijven er juist buiten. */
.grond-groen h1, .grond-groen h2, .grond-groen h3, .grond-groen h4 { color: var(--green-ink); }
.grond-groen p, .grond-groen li,
.grond-groen .block-head p, .grond-groen .checklist li, .grond-groen .bron-noot, .grond-groen .demo-cap,
.grond-groen .card p, .grond-groen .card li { color: color-mix(in srgb, var(--green-ink) 84%, transparent); }
.grond-groen .eyebrow, .grond-groen .card-kop { color: var(--champagne); }
.grond-groen a:not(.btn) { color: var(--champagne); }
.grond-groen .card { background: color-mix(in srgb, #FFFFFF 7%, transparent); border-color: color-mix(in srgb, var(--champagne) 34%, transparent); }
.grond-groen .checklist li::before { background: color-mix(in srgb, var(--champagne) 30%, transparent); border-color: var(--champagne); }
/* De knop van de demo heeft een eigen ivoren vlak en houdt dus zijn eigen kleuren. */
.grond-groen .demo-knop, .grond-groen .demo-knop span { color: var(--green); }
.grond-groen .demo-knop small { color: var(--ink-3); }
@media (max-width: 700px) { .grond-wit, .grond-groen { padding-bottom: 64px; } }

/* De knoppenrij tussen twee secties. Dezelfde twee knoppen als in de hero, halverwege herhaald: wie daar stopt met
   lezen hoeft niet terug te scrollen.

   Drie dingen die hier misgingen en waarom het nu zo staat. Hij had zelf de klasse "wrap", en die zet
   padding: 0 28px; op de homepage staat die regel in het stijlblok van de pagina en won hij van de verticale padding,
   zodat de knoppen boven en onder de rand uitstaken. Daarom zit de rij nu ín een wrap in plaats van er een te zijn.
   Hij was daarna een vlak in de champagnetint, en dat is precies wat het designsysteem verbiedt: champagne is
   sieraad, nooit een groot vlak. En als kaart met een hairline liep hij mee in de rij witte kaarten eromheen.
   Nu is het geen vlak meer maar een rustpunt: twee hairlines, veel lucht, de tekst in de editoriale letter. */
.cta-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin: 104px 0 0; padding: 36px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cta-rij p {
  font-family: var(--font-editorial); font-style: italic; font-weight: 450;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.3; color: var(--ink); max-width: 28ch;
}
.cta-rij-knoppen { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 860px) { .cta-rij { margin-top: 80px; padding: 28px 0; gap: 22px; } .cta-rij p { max-width: none; } }
@media (max-width: 640px) { .cta-rij-knoppen { width: 100%; flex-direction: column; } .cta-rij .btn { width: 100%; } }

/* Voettekst: vier kolommen met links, daaronder het merk, de regel voor makelaars en de kleine lettertjes. */
.voet { border-top: 1px solid var(--line); margin-top: 96px; padding: 56px 0 64px; font-size: 0.875rem; color: var(--ink-2); }
main + .voet { margin-top: 96px; }
.voet-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.voet-kolom h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-txt); margin: 0 0 12px; }
.voet-kolom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.voet-kolom a { display: inline-block; padding: 5px 0; color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.voet-kolom a:hover { color: var(--green-soft); }
.voet-onder { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: baseline; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.voet-onder .wordmark { font-size: 1rem; }
.voet-onder p { margin: 6px 0 0; }
.voet-legal { font-size: 0.78rem; color: var(--ink-3); margin: 18px 0 0; max-width: 80ch; }
.voet-legal a { color: inherit; padding: 5px 0; }
@media (max-width: 860px) { .voet-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .voet-kolommen { grid-template-columns: 1fr; } }

/* De meelopende balk onderaan, alleen op een telefoon. Zie mobBalk() in site-bron/bouw.mjs en nav.js. */
.mob-balk { display: none; }
@media (max-width: 720px) {
  .mob-balk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--nav-bg); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform 240ms var(--ease-calm);
  }
  .mob-balk.aan { transform: none; }
  .mob-balk .btn { flex: 1; min-width: 0; padding: 10px 12px; }
  /* De balk ligt over de onderkant van de pagina; de voettekst krijgt die ruimte erbij. */
  .voet { padding-bottom: calc(64px + 56px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .mob-balk { transition: none; } }

/* Secties die rustig in beeld komen. De klasse wordt door /assets/js/verschijn.js gezet, dus zonder JavaScript en
   bij "beperkte beweging" staat alles gewoon zichtbaar. Twaalf pixels en 500 ms: genoeg om te merken, te kort om
   op te wachten. */
.verschijnt { opacity: 0; transform: translateY(12px); }
.verschijnt.in-beeld {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-calm), transform 500ms var(--ease-calm);
}
@media (prefers-reduced-motion: reduce) { .verschijnt { opacity: 1; transform: none; } }