/* ============================================================
   2. components.css — integraal ge-embed (bron: design/components.css)
   ============================================================ */
.wrap    { max-width: var(--content); margin-inline: auto; padding-inline: var(--ruimte-300); }
.measure { max-width: var(--measure-narrow); }
.section { padding: var(--ruimte-600) var(--ruimte-300); }
@media (min-width: 768px) { .section { padding: var(--ruimte-800) var(--ruimte-300); } }

.cta {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--cta-min-hoogte); padding:var(--cta-padding);
  background:var(--cta-bg); color:var(--cta-tekst); border:0; border-radius:var(--cta-radius);
  font:600 var(--prim-type-m)/1 var(--prim-font-body); text-decoration:none; cursor:pointer;
}
.btn-secundair {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--cta-min-hoogte); padding:var(--cta-padding);
  background:transparent; color:var(--kleur-merk);
  border:1px solid var(--kleur-merk-vlak); border-radius:var(--cta-radius);
  font:600 var(--prim-type-m)/1 var(--prim-font-body); text-decoration:none; cursor:pointer;
}
.link-neutraal { color:inherit; text-decoration:underline; }

.kaart {
  background:var(--kaart-bg); border:1px solid var(--kaart-border);
  border-radius:var(--kaart-radius); box-shadow:var(--kaart-elevatie); padding:var(--kaart-padding);
}
.formulier-kaart {
  background:var(--kleur-achtergrond); border-radius:var(--formulier-kaart-radius);
  box-shadow:var(--formulier-kaart-elevatie); padding:var(--ruimte-500);
}

.lijst-merk { list-style:none; padding-left:0; }
.lijst-merk > li { position:relative; padding-left:var(--ruimte-400); }
.lijst-merk > li::before { content:"✓"; position:absolute; left:0; color:var(--kleur-marker); font-weight:700; }

.eyebrow { font-size:var(--prim-type-s); font-weight:600; color:var(--kleur-merk); letter-spacing:.02em; }

.stappen { display:grid; grid-template-columns:repeat(var(--stappen-n,3),1fr); gap:var(--ruimte-400); }
@media (max-width:767px) { .stappen { grid-template-columns:1fr; } }
.stap-marker {
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--ruimte-500); height:var(--ruimte-500); border-radius:var(--prim-radius-pill);
  background:var(--kleur-merk); color:var(--prim-wit); font-weight:700;
}

.section--offwhite     { background:var(--kleur-offwhite); }
.section--merk-subtiel { background:var(--kleur-vlak-subtiel); }
.hairline { border:0; border-top:1px solid var(--kleur-lijn); }

body { font:var(--prim-type-m)/var(--prim-lijnhoogte) var(--prim-font-body); color:var(--kleur-tekst); background:var(--kleur-achtergrond); margin:0; }
h1,h2,h3 { font-family:var(--prim-font-kop); line-height:var(--prim-lijnhoogte-kop); color:var(--kleur-tekst); }
h1 { font-size:var(--prim-type-2xl); }  h2 { font-size:var(--prim-type-xl); }  h3 { font-size:var(--prim-type-l); }
img { max-width:100%; height:auto; display:block; }
/* hidden-attribuut moet ALTIJD winnen (2026-07-06 fix): JS toggelt overal het `hidden`-attribuut
   (stap-2, terugbelform, veld-fout, bedankt, aantal-panelen). Class-regels als `.veld-fout{display:block}`
   of `.terugbel-veld{display:flex}` overschreven anders `hidden` -> velden/fouten stonden altijd aan. */
[hidden] { display: none !important; }

.badge { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:var(--prim-radius-pill); color:var(--prim-wit); font-size:var(--prim-type-xs); }
.badge--ja  { background:var(--kleur-functioneel-groen); }
.badge--nee { background:var(--kleur-functioneel-rood); }


/* ============================================================
   owner-opgave 2026-07-05 (besluit-103) - nieuwe blokken
   ============================================================ */
.prijs-bereik-balk { margin-top: var(--ruimte-600); background: var(--kleur-vlak-subtiel); border: 0; box-shadow: none; text-align: center; }
.prijs-bereik-balk p { margin: 0; font-weight: 600; color: var(--prim-grijs-900); }
.kosten-btw-regel { max-width: var(--measure-narrow); margin: var(--ruimte-400) auto 0; text-align: center; font-size: var(--prim-type-s); color: var(--kleur-tekst-zacht); }
.kosten-btw-regel .promo-mark { color: var(--kleur-functioneel-groen); font-weight: 700; margin-right: 4px; }
.ondernemer-kaart { background: var(--kleur-vlak-subtiel); text-align: center; }
.ondernemer-kaart h2 { margin-top: 0; }
.weetje-kaart { background: var(--kleur-vlak-subtiel); border-left: 4px solid var(--kleur-merk); }
.weetje-kaart h2 { margin-top: 0; font-size: var(--prim-type-l); }
.weetje-kaart .weetje-slot { margin-bottom: 0; color: var(--kleur-tekst-zacht); font-style: italic; }

/* ============================================================
   onderdeel 4 (owner-opgave 2026-07-06) - uitgebreide formuliervelden
   (huisnummer+toevoeging op één rij; aantal-panelen conditioneel; termijn-radio's gestapeld)
   ============================================================ */
.veld-rij { display: flex; gap: var(--ruimte-200); }
.veld-rij > .veld { flex: 2 1 0; min-width: 0; }
.veld-rij > .veld + .veld { flex: 1 1 0; }   /* toevoeging smaller dan huisnummer */
.keuze-rij--termijn { display: flex; flex-direction: column; align-items: stretch; gap: var(--ruimte-200); }
.keuze-rij--termijn .keuze { width: 100%; box-sizing: border-box; }
[data-panelen-aantal][hidden] { display: none; }

/* onderdeel 5 (owner-opgave 2026-07-06): echte adviseurfoto (Jeroen) in de ronde avatar i.p.v. initialen */
.adviseur-avatar { overflow: hidden; }
.adviseur-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* onderdeel 4-vervolg (owner-opgave 2026-07-06): terugbel-form kreeg meer velden -> nette verticale spacing */
.terugbel-veld { display: flex; flex-direction: column; gap: var(--ruimte-300); text-align: left; }
.terugbel-veld .btn-secundair { align-self: stretch; }