/* ===== leadbooster-fundament.css ===== */
/* =========================================================
   Leadbooster Fundament — SPOT Energie
   Basislaag voor leadgeneratiesites: tokens, reset, grid, typografie,
   iconen, knoppen, formuliervelden, tags en beweging.
   Sectiespecifieke composities horen hier NIET in; die staan in
   spoedenergiecontract.css.
   Hoort bij: Leadbooster Design System v1.0
   Wijziging t.o.v. aangeleverd bestand: de twee identieke
   @media (max-width:600px)-blokken voor .field zijn samengevoegd tot één,
   en de twee mobiele :root-blokken zijn samengevoegd. Geen inhoudelijke
   wijziging; alleen dedupe (design system §10: geen dubbele selectoren).
   ========================================================= */

/* ---------- 1. Font ---------- */
/* voorvertoning: fontbestand niet ingesloten */
/* @font-face{font-family:"Azo Sans";src:url("../fonts/AzoSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} */
/* voorvertoning: fontbestand niet ingesloten */
/* @font-face{font-family:"Azo Sans";src:url("../fonts/AzoSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} */
/* voorvertoning: fontbestand niet ingesloten */
/* @font-face{font-family:"Azo Sans";src:url("../fonts/AzoSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} */
/* voorvertoning: fontbestand niet ingesloten */
/* @font-face{font-family:"Azo Sans";src:url("../fonts/AzoSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} */

/* ---------- 2. Tokens ---------- */
:root{
  --navy:#0E263B;
  --teal:#65ACAC;
  --accent:#2A9683;
  --surface:#EEF1F2;
  --white:#FFFFFF;

  --ink:var(--navy);
  --ink-soft:rgba(14,38,59,.74);
  --ink-mute:rgba(14,38,59,.66);
  --line:rgba(14,38,59,.13);
  --line-soft:rgba(14,38,59,.08);

  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.76);
  --on-dark-mute:rgba(255,255,255,.56);
  --line-dark-soft:rgba(255,255,255,.11);

  /* Grid: één breedte voor de hele site */
  --container:1440px;
  --gutter:clamp(22px,4.2vw,64px);
  --col-gap:clamp(20px,2.2vw,32px);

  --r-pill:100px;
  --r-card:18px;
  --r-ctl:10px;
  --r-xs:6px;

  /* Bedieningselementen: knoppen en velden delen exact dezelfde hoogte */
  --ctl-h:54px;
  --ctl-px:28px;
  --gap-icon:12px;

  /* Beweging: drie snelheden voor de hele site */
  --t-quick:.2s;
  --t-move:.25s;
  --t-reveal:.5s;

  /* Spacing — één schaal, overal */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:44px; --s8:64px; --s9:88px; --s10:120px;
  --section:clamp(88px,9.5vw,168px);
  --section-sm:clamp(64px,6.5vw,112px);

  /* Typografie */
  --t-display:clamp(2.55rem,1.15rem + 4.4vw,4.75rem);
  --t-h2:clamp(1.95rem,1.05rem + 2.9vw,3.35rem);
  --t-h3:clamp(1.15rem,1.06rem + .34vw,1.375rem);
  --t-lead:clamp(1.06rem,.99rem + .42vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-micro:.8125rem;
  --t-numeral:clamp(2.4rem,1.6rem + 2.2vw,3.6rem);

  --f:"Azo Sans","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Mobiele maatvoering: spacingschaal, besturingshoogte en de twee grootste
   tekstmaten schalen mee, zodat de verhouding tussen tekst, knop en witruimte
   op een telefoon klopt en koppen binnen drie regels blijven. */
@media (max-width:600px){
  :root{
    --s7:32px; --s8:44px; --s9:64px; --s10:88px;
    --ctl-h:50px; --ctl-px:22px;
    --section:clamp(72px,15vw,100px);
    --section-sm:clamp(56px,12vw,80px);
    --t-display:clamp(1.42rem,.05rem + 6.9vw,2.8rem);
    --t-h2:clamp(1.25rem,.10rem + 5.7vw,2.15rem);
  }
  h1{letter-spacing:-.03em}
  h2{letter-spacing:-.026em}
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Componenten met een eigen display-waarde (.field is bijvoorbeeld flex)
   overschrijven anders het hidden-attribuut van de browser. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f);font-size:var(--t-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--white)}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:3px;
}
.dark :where(a,button,input,select,textarea,summary):focus-visible{outline-color:var(--teal)}
.dark .icon{color:var(--on-dark)}
.skip-link{position:absolute;left:var(--s5);top:-100px;z-index:200;background:var(--navy);
  color:var(--white);padding:12px 20px;border-radius:var(--r-ctl);font-weight:500;text-decoration:none;
  transition:top var(--t-quick) var(--ease)}
.skip-link:focus{top:var(--s3)}
.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}

/* ---------- 4. Grid ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
section[id]{scroll-margin-top:104px}
@media (max-width:1120px){section[id]{scroll-margin-top:90px}}
.section--sm{padding-block:var(--section-sm)}
.section--surface{background:var(--surface)}
.section--surface+.section--surface{padding-top:0}

.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
@media (max-width:980px){.grid12{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:620px){
  .grid12{grid-template-columns:minmax(0,1fr)}
  .grid12>*{grid-column:1/-1 !important}
}

/* ---------- 5. Typografie ---------- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.024em;color:var(--ink);line-height:1.13;
  text-wrap:balance}
h1{font-size:var(--t-display);line-height:1.015;letter-spacing:-.038em;overflow-wrap:break-word}
h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.032em}
h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:-.014em}
h4{font-size:1rem;letter-spacing:-.008em}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-dark)}

.accent{color:var(--accent)}
.dark .accent{color:var(--teal)}

.lead{font-size:var(--t-lead);line-height:1.58;color:var(--ink-soft)}
.dark .lead{color:var(--on-dark-soft)}
p{text-wrap:pretty}
p+p{margin-top:var(--s4)}

.numeral{font-size:var(--t-numeral);font-weight:300;line-height:1;letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;display:block}
.dark .numeral{color:var(--on-dark)}

/* ---------- 6. Iconen ---------- */
.icon{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;color:var(--ink);
      stroke-width:1.75px;
      transition:stroke var(--t-quick) ease-out}
/* vector-effect is geen erfbare eigenschap en werkt alleen op de vormen zelf.
   Op alleen de <svg> gezet doet hij niets en schaalt de lijndikte weer mee met
   het icoonformaat: 1,46 px op 20 px en 2,33 px op 32 px. Met deze regel is de
   gerenderde lijn op alle drie de formaten exact 1,75 px, zoals het design
   system in hoofdstuk 5 voorschrijft. Gemeten in Chromium. */
.icon :where(path,circle,rect,line,polyline,polygon,ellipse){vector-effect:non-scaling-stroke}
/* Opsommingsvariant. Bewuste uitbreiding op de drie icoonmaten: als
   opsommingsteken staat een lijnicoon van 20 px met 1,75 px lijn te zwaar naast
   tekst van 15 px. Gevuld en op 17 px loopt het mee met de regel en blijft de
   lijst rustig. Alleen toegestaan als opsommingsteken, niet als UI-icoon. */
.icon--bullet{width:17px;height:17px;margin-top:2px;fill:currentColor;stroke:none;
  color:var(--accent)}
.dark .icon--bullet{color:var(--teal)}
.icon--sm{width:20px;height:20px}
.icon--lg{width:32px;height:32px}
@media (max-width:900px){.icon{width:22px;height:22px}.icon--lg{width:28px;height:28px}}
@media (max-width:600px){.icon{width:21px;height:21px}.icon--lg{width:26px;height:26px}}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-icon);
  min-height:var(--ctl-h);padding:14px var(--ctl-px);
  border-radius:var(--r-ctl);border:1.5px solid transparent;
  font-size:var(--t-small);font-weight:500;line-height:1.2;white-space:nowrap;
  text-decoration:none;cursor:pointer;background:var(--accent);color:var(--white);
  transition:transform var(--t-move) var(--ease),background-color var(--t-quick) ease-out,
             border-color var(--t-quick) ease-out,color var(--t-quick) ease-out,
             box-shadow var(--t-quick) ease-out;
}
.btn .icon{color:currentColor}
.btn:hover{background:var(--navy);transform:translateY(-2px);
  box-shadow:0 12px 24px -14px rgba(14,38,59,.55)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(14,38,59,.22)}
.btn--ghost:hover{background:transparent;color:var(--ink);border-color:var(--accent);box-shadow:none}
.dark .btn--ghost{color:var(--on-dark);border-color:rgba(255,255,255,.32)}
.dark .btn--ghost:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.08)}
.btn--wide{width:100%;white-space:normal}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (max-width:600px){
  .btn-row{display:grid;grid-template-columns:minmax(0,1fr)}
  .btn-row .btn{width:100%}
}

.link-arrow{display:inline-flex;align-items:center;gap:var(--gap-icon);font-weight:500;font-size:var(--t-small);
  color:var(--ink);text-decoration:none;padding-bottom:3px;
  border-bottom:1.5px solid var(--accent);
  transition:border-color var(--t-quick) ease-out,gap var(--t-move) var(--ease)}
.link-arrow:hover{border-bottom-width:2.5px;gap:18px}
.dark .link-arrow{color:var(--on-dark);border-bottom-color:var(--teal)}

/* ---------- 8. Microcopy ----------
   De drie items staan in containers van sterk verschillende breedte: de hero,
   de formulierkaart en een smalle CTA-kolom. Een mediaquery op schermbreedte
   weet die containerbreedte niet, waardoor een bullet los aan het begin van
   een regel kon belanden. De container bepaalt nu zelf de vorm: gestapeld,
   twee regels, of alles op één regel. Items breken nooit intern af. */
.microcopy-box{container-type:inline-size;width:100%}
.microcopy{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s4);min-width:0;
  font-size:var(--t-micro);color:var(--ink-mute);line-height:1.5}
.microcopy span{display:flex;align-items:center;gap:var(--s4);min-width:0;white-space:nowrap}
.microcopy span:nth-child(2)::before{content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.55;flex:0 0 auto}
.microcopy span:nth-child(3){flex:0 0 100%;white-space:normal}
.dark .microcopy{color:var(--on-dark-mute)}

@container (min-width:572px){
  .microcopy{flex-wrap:nowrap}
  .microcopy span:nth-child(3){flex:0 1 auto;white-space:nowrap}
  .microcopy span:nth-child(3)::before{content:"";width:3px;height:3px;border-radius:50%;
    background:currentColor;opacity:.55;flex:0 0 auto}
}

/* ---------- 9. Formuliervelden ---------- */
.formcard{background:var(--white);border-radius:var(--r-card);padding:clamp(28px,3.2vw,52px);
  box-shadow:0 40px 90px -50px rgba(14,38,59,.85)}
.formcard,.formcard h2,.formcard h3,.formcard label{color:var(--ink)}
.formcard .microcopy{color:var(--ink-mute)}
.formcard__title{font-size:1.125rem;margin-bottom:var(--s6);padding-bottom:var(--s5);
  border-bottom:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:620px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field--full{grid-column:1/-1}
.field label{display:flex;align-items:center;gap:var(--gap-icon);flex-wrap:wrap;
  font-size:var(--t-small);font-weight:500}
.field>label>.icon{color:var(--ink)}
.field .opt{color:var(--ink-mute);font-weight:400}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;
  min-height:var(--ctl-h);
  border:1.5px solid rgba(14,38,59,.2);border-radius:var(--r-ctl);background:var(--white);
  font-size:var(--t-small);line-height:1.5;
  transition:border-color var(--t-quick) ease-out,box-shadow var(--t-quick) ease-out}
.field textarea{min-height:128px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(14,38,59,.42)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(14,38,59,.32)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(42,150,131,.16)}
.field select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E263B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center}
.field-error{display:none;font-size:var(--t-micro);color:#B3261E;font-weight:500}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B3261E}
.field.has-error .field-error{display:block}
.check{display:flex;gap:var(--gap-icon);align-items:flex-start;font-size:var(--t-small);line-height:1.55}
.check input{appearance:none;width:22px;height:22px;flex:0 0 auto;margin-top:0;
  border:1.5px solid rgba(14,38,59,.24);border-radius:var(--r-xs);background:var(--white);cursor:pointer;
  transition:background-color var(--t-quick) ease-out,border-color var(--t-quick) ease-out}
.check input:checked{background:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-repeat:no-repeat;background-position:center}
.check a{color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:1.5px;
  text-underline-offset:3px;padding-block:4px}
.form-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s7)}
.form-status{display:none;gap:var(--gap-icon);align-items:flex-start;border-radius:var(--r-ctl);
  padding:var(--s4);font-size:var(--t-small);line-height:1.55}
.form-status.is-visible{display:flex}
.form-status--ok{background:rgba(42,150,131,.1);border:1px solid rgba(42,150,131,.3)}
.form-status--err{background:rgba(179,38,30,.07);border:1px solid rgba(179,38,30,.28)}
.form-status .icon{margin-top:1px}
.form-status--ok .icon{color:var(--accent)}
.form-status--err .icon{color:#B3261E}

/* ---------- 10. Tags en labels ---------- */
.tagset{align-self:start;padding-top:2px}
.tagset__label{display:block;font-size:var(--t-micro);font-weight:700;color:var(--ink);
  margin-bottom:var(--s3)}
.dark .tagset__label{color:var(--on-dark)}
.taglijst{display:flex;flex-wrap:wrap;gap:var(--s2);align-content:start}
.tag{display:inline-block;font-size:var(--t-micro);line-height:1.4;color:var(--ink-mute);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--s1) var(--s3)}
.dark .tag{color:var(--on-dark-mute);border-color:var(--line-dark-soft)}

/* ---------- 11. Motion ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);
  transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}
/* Footerinhoud animeert niet mee. */
.geen-reveal [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* Mobiel: velden houden exact dezelfde hoogte als de knoppen.
   Staat bewust achteraan, na de basisregels van het formulier. */
@media (max-width:600px){
  .field input,.field select{padding-block:13px}
  .field textarea{padding-block:14px;min-height:112px}
}

/* ---------- 12. Print ---------- */
@media print{
  .btn{display:none!important}
  body{color:var(--navy);background:var(--white)}
  .section{padding-block:24px}
}